@oicl/openbridge-webcomponents 0.0.20260407101310 → 0.0.20260407112816

package/dist/building-blocks/instrument-radial/instrument-radial.d.ts

@@ -46,6 +46,9 @@ export declare class ObcInstrumentRadial extends ObcInstrumentRadial_base {
     advices: GaugeRadialAdvice[];
     clipTop: number;
     clipBottom: number;
+    zoomToFitArc: boolean;
+    private _radiusOffset;
+    private _arcFrame;
     get minAngle(): number;
     get maxAngle(): number;
     private get _derivedNeedleColor();

package/dist/building-blocks/instrument-radial/instrument-radial.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"instrument-radial.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/instrument-radial/instrument-radial.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,UAAU,EAAqB,MAAM,KAAK,CAAC;AAGxD,OAAO,EAEL,UAAU,EAEX,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EAAC,QAAQ,EAAC,MAAM,gDAAgD,CAAC;AAExE,OAAO,EAAC,aAAa,EAAC,MAAM,gDAAgD,CAAC;AAC7E,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,uCAAuC,CAAC;AAGhF,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;;AACD,qBACa,mBAAoB,SAAQ,wBAAyB;IAKtC,KAAK,EAAE,eAAe,CAA0B;IAChD,QAAQ,EAAE,QAAQ,CAAoB;IAEtC,KAAK,SAAK;IACV,QAAQ,SAAO;IACf,QAAQ,SAAK;IACT,QAAQ,EAAG,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAS;IACvD;;;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,IAAI,EAAE,kBAAkB,CACtB;IACF,UAAU,EAAE,kBAAkB,CAC5B;IACD,eAAe,EAAE,OAAO,CAAS;IAClC,aAAa,EAAE,aAAa,CAC9B;IACmB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IACnD,OAAO,EAAE,MAAM,CAAK;IACpB,UAAU,EAAE,MAAM,CAAK;IAEjD,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,OAAO,KAAK,mBAAmB,GAU9B;IAED,OAAO,KAAK,gBAAgB,GAe3B;IAEQ,MAAM;IA6Df,OAAO,KAAK,OAAO,GAkBlB;IAED,IAAI,SAAS,IAAI,QAAQ,EAAE,CAkI1B;IAED,OAAO,KAAK,QAAQ,GAkBnB;IAED,OAAgB,MAAM,0BAmCpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}
+{"version":3,"file":"instrument-radial.d.ts","sourceRoot":"","sources":["../../../src/building-blocks/instrument-radial/instrument-radial.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,UAAU,EAAqB,MAAM,KAAK,CAAC;AAGxD,OAAO,EAEL,UAAU,EAEX,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EAAC,QAAQ,EAAC,MAAM,gDAAgD,CAAC;AAExE,OAAO,EAAC,aAAa,EAAC,MAAM,gDAAgD,CAAC;AAC7E,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,uCAAuC,CAAC;AAWhF,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;;AACD,qBACa,mBAAoB,SAAQ,wBAAyB;IAKtC,KAAK,EAAE,eAAe,CAA0B;IAChD,QAAQ,EAAE,QAAQ,CAAoB;IAEtC,KAAK,SAAK;IACV,QAAQ,SAAO;IACf,QAAQ,SAAK;IACT,QAAQ,EAAG,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAS;IACvD;;;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,IAAI,EAAE,kBAAkB,CACtB;IACF,UAAU,EAAE,kBAAkB,CAC5B;IACD,eAAe,EAAE,OAAO,CAAS;IAClC,aAAa,EAAE,aAAa,CAC9B;IACmB,OAAO,EAAE,iBAAiB,EAAE,CAAM;IACnD,OAAO,EAAE,MAAM,CAAK;IACpB,UAAU,EAAE,MAAM,CAAK;IACtB,YAAY,EAAE,OAAO,CAAS;IAEzD,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,SAAS,CAAgC;IAEjD,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,OAAO,KAAK,mBAAmB,GAU9B;IAED,OAAO,KAAK,gBAAgB,GAe3B;IAEQ,MAAM;IAsFf,OAAO,KAAK,OAAO,GAmBlB;IAED,IAAI,SAAS,IAAI,QAAQ,EAAE,CAkI1B;IAED,OAAO,KAAK,QAAQ,GAkBnB;IAED,OAAgB,MAAM,0BAmCpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}

package/dist/building-blocks/instrument-radial/instrument-radial.js

@@ -2,10 +2,11 @@ import { LitElement, html, nothing, svg, css } from "lit";
 import { property } from "lit/decorators.js";
 import { customElement } from "../../decorator.js";
 import { AdviceState } from "../../navigation-instruments/watch/advice.js";
-import { WatchCircleType } from "../../navigation-instruments/watch/watch.js";
+import { WatchCircleType, innerRingRadiusFor, OUTER_RING_RADIUS } from "../../navigation-instruments/watch/watch.js";
 import { TickmarkStyle, TickmarkType } from "../../navigation-instruments/watch/tickmark.js";
 import { InstrumentState, Priority } from "../../navigation-instruments/types.js";
 import { SetpointMixin } from "../../svghelpers/setpoint-mixin.js";
+import { computeZoomToFitArcFrame } from "../../svghelpers/arc-frame.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -41,8 +42,9 @@ let ObcInstrumentRadial = class extends SetpointMixin(LitElement) {
     this.advices = [];
     this.clipTop = 0;
     this.clipBottom = 0;
+    this.zoomToFitArc = false;
+    this._radiusOffset = 0;
   }
-  // in percent of height
   get minAngle() {
     return this.getAngle(this.minValue);
   }
@@ -75,10 +77,37 @@ let ObcInstrumentRadial = class extends SetpointMixin(LitElement) {
         fillColor: barColor
       }
     ];
-    const width = 448;
-    const height = width * (1 - this.clipTop / 100 - this.clipBottom / 100);
-    const top = -width / 2 + width * this.clipTop / 100;
-    const viewBox = `-${width / 2} ${top} ${width} ${height}`;
+    const areas = [
+      {
+        startAngle: this.minAngle,
+        endAngle: this.maxAngle,
+        roundInsideCut: true,
+        roundOutsideCut: true
+      }
+    ];
+    const watchCircleType = this.type === "needle" ? WatchCircleType.single : WatchCircleType.double;
+    let viewBox;
+    if (this.zoomToFitArc) {
+      const ext = 48;
+      const targetSize = (176 + ext) * 2;
+      const frame = computeZoomToFitArcFrame({
+        areas,
+        outerRadius: OUTER_RING_RADIUS,
+        innerRadius: innerRingRadiusFor(watchCircleType),
+        extension: ext,
+        targetSize
+      });
+      viewBox = frame.viewBox;
+      this._radiusOffset = frame.radiusOffset;
+      this._arcFrame = frame;
+    } else {
+      this._radiusOffset = 0;
+      this._arcFrame = void 0;
+      const width = 448;
+      const height = width * (1 - this.clipTop / 100 - this.clipBottom / 100);
+      const top = -width / 2 + width * this.clipTop / 100;
+      viewBox = `${-width / 2} ${top} ${width} ${height}`;
+    }
     return html`
       <div class="container">
         <obc-watch
@@ -95,18 +124,13 @@ let ObcInstrumentRadial = class extends SetpointMixin(LitElement) {
           .tickmarksInside=${this.tickmarksInside}
           .tickmarkStyle=${this.tickmarkStyle}
           .advices=${this._advices}
-          .areas=${[
-      {
-        startAngle: this.minAngle,
-        endAngle: this.maxAngle,
-        roundInsideCut: true,
-        roundOutsideCut: true
-      }
-    ]}
-          .watchCircleType=${this.type === "needle" ? WatchCircleType.single : WatchCircleType.double}
+          .areas=${areas}
+          .watchCircleType=${watchCircleType}
           .barAreas=${barAreas}
-          .clipTop=${this.clipTop}
-          .clipBottom=${this.clipBottom}
+          .clipTop=${this.zoomToFitArc ? 0 : this.clipTop}
+          .clipBottom=${this.zoomToFitArc ? 0 : this.clipBottom}
+          .zoomToFitArc=${this.zoomToFitArc}
+          .arcFrame=${this._arcFrame}
         ></obc-watch>
         <svg class="gauge-radial" viewBox=${viewBox}>${this._needle}</svg>
       </div>
@@ -117,17 +141,18 @@ let ObcInstrumentRadial = class extends SetpointMixin(LitElement) {
       return nothing;
     }
     const needleColor = this.needleColor ?? this._derivedNeedleColor;
+    const rOff = this._radiusOffset;
     if (this.type === "needle") {
       return svg`<g transform="rotate(${this.getAngle(this.value)}) translate(-256, -256)">
       <circle cx="256" cy="256" r="14" fill=${needleColor}/>
-      <rect x="250" y="96" width="12" height="192" rx="6" fill=${needleColor}/>
-      <rect x="252" y="98" width="8" height="188" rx="4" stroke=${needleColor} fill=${needleColor} stroke-width="4"/>
-      </svg> 
+      <rect x="250" y="${96 - rOff}" width="12" height="${192 + rOff}" rx="6" fill=${needleColor}/>
+      <rect x="252" y="${98 - rOff}" width="8" height="${188 + rOff}" rx="4" stroke=${needleColor} fill=${needleColor} stroke-width="4"/>
+      </g>
 `;
     } else {
       return svg`<g transform="rotate(${this.getAngle(this.value)}) translate(-256, -256)">
-<rect x="252" y="96" width="8" height="48" rx="4" fill=${needleColor} stroke="var(--border-silhouette-color)"/>
-</svg>
+<rect x="252" y="${96 - rOff}" width="8" height="48" rx="4" fill=${needleColor} stroke="var(--border-silhouette-color)"/>
+</g>
       `;
     }
   }
@@ -332,6 +357,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], ObcInstrumentRadial.prototype, "clipBottom", 2);
+__decorateClass([
+  property({ type: Boolean })
+], ObcInstrumentRadial.prototype, "zoomToFitArc", 2);
 ObcInstrumentRadial = __decorateClass([
   customElement("obc-instrument-radial")
 ], ObcInstrumentRadial);

package/dist/building-blocks/instrument-radial/instrument-radial.js.map

@@ -1 +1 @@
-{"version":3,"file":"instrument-radial.js","sources":["../../../src/building-blocks/instrument-radial/instrument-radial.ts"],"sourcesContent":["import {css, LitElement, html, svg, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {\n  AdviceState,\n  AdviceType,\n  AngleAdviceRaw,\n} from '../../navigation-instruments/watch/advice.js';\nimport {WatchCircleType} from '../../navigation-instruments/watch/watch.js';\nimport {Tickmark} from '../../navigation-instruments/watch/tickmark.js';\nimport {TickmarkType} from '../../navigation-instruments/watch/tickmark.js';\nimport {TickmarkStyle} from '../../navigation-instruments/watch/tickmark.js';\nimport {InstrumentState, Priority} from '../../navigation-instruments/types.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\n\nexport enum ObcGaugeRadialType {\n  filled = 'filled',\n  bar = 'bar',\n  needle = 'needle',\n}\n\nexport interface GaugeRadialAdvice {\n  minValue: number;\n  maxValue: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n@customElement('obc-instrument-radial')\nexport class ObcInstrumentRadial extends SetpointMixin(LitElement) {\n  // setpoint, newSetpoint, atSetpoint, touching, autoAtSetpoint,\n  // autoAtSetpointDeadband, setpointAtZeroDeadband, setpointOverride\n  // — all inherited from SetpointMixin\n\n  @property({type: String}) state: InstrumentState = InstrumentState.active;\n  @property({type: String}) priority: Priority = Priority.regular;\n\n  @property({type: Number}) value = 0;\n  @property({type: Number}) maxValue = 100;\n  @property({type: Number}) minValue = 0;\n  @property({attribute: false}) getAngle!: (v: number) => number;\n  @property({type: String}) needleColor: string | undefined;\n  @property({type: String}) barColor: string | undefined;\n  @property({type: Boolean}) showLabels: boolean = false;\n  /**\n   * Interval for primary tickmarks in value units.\n   * When undefined or <= 0, no primary tickmarks are shown.\n   */\n  @property({type: Number}) primaryTickmarkInterval: number | undefined = 50;\n  /**\n   * Interval for secondary tickmarks in value units.\n   * When undefined or <= 0, no secondary tickmarks are shown.\n   */\n  @property({type: Number}) secondaryTickmarkInterval: number | undefined = 10;\n  /**\n   * Interval for tertiary tickmarks in value units.\n   * When undefined or <= 0, no tertiary tickmarks are shown.\n   */\n  @property({type: Number}) tertiaryTickmarkInterval: number | undefined =\n    undefined;\n  @property({type: String}) type: ObcGaugeRadialType =\n    ObcGaugeRadialType.filled;\n  @property({type: String}) needleType: ObcGaugeRadialType =\n    ObcGaugeRadialType.filled;\n  @property({type: Boolean}) tickmarksInside: boolean = false;\n  @property({type: String}) tickmarkStyle: TickmarkStyle =\n    TickmarkStyle.regular;\n  @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];\n  @property({type: Number}) clipTop: number = 0; // in percent of height\n  @property({type: Number}) clipBottom: number = 0; // in percent of height\n\n  get minAngle(): number {\n    return this.getAngle(this.minValue);\n  }\n\n  get maxAngle(): number {\n    return this.getAngle(this.maxValue);\n  }\n\n  private get _derivedNeedleColor(): string {\n    if (\n      this.state === InstrumentState.loading ||\n      this.state === InstrumentState.off\n    ) {\n      return 'transparent';\n    }\n    return this.priority === Priority.enhanced\n      ? 'var(--instrument-enhanced-secondary-color)'\n      : 'var(--instrument-regular-secondary-color)';\n  }\n\n  private get _derivedBarColor(): string {\n    if (\n      this.state === InstrumentState.loading ||\n      this.state === InstrumentState.off\n    ) {\n      return 'transparent';\n    }\n    if (this.type === ObcGaugeRadialType.filled) {\n      return this.priority === Priority.enhanced\n        ? 'var(--instrument-enhanced-secondary-color)'\n        : 'var(--instrument-regular-secondary-color)';\n    }\n    return this.priority === Priority.enhanced\n      ? 'var(--instrument-enhanced-tertiary-color)'\n      : 'var(--instrument-regular-tertiary-color)';\n  }\n\n  override render() {\n    const barColor = this.barColor ?? this._derivedBarColor;\n    const setpointAngle =\n      this.setpoint !== undefined ? this.getAngle(this.setpoint) : undefined;\n    const newSetpointAngle =\n      this.newSetpoint !== undefined\n        ? this.getAngle(this.newSetpoint)\n        : undefined;\n\n    const barAreas =\n      this.type === ObcGaugeRadialType.needle\n        ? []\n        : [\n            {\n              startAngle: this.getAngle(0),\n              endAngle: this.getAngle(this.value),\n              fillColor: barColor,\n            },\n          ];\n\n    const width = 448;\n    const height = width * (1 - this.clipTop / 100 - this.clipBottom / 100);\n    const top = -width / 2 + (width * this.clipTop) / 100;\n    const viewBox = `-${width / 2} ${top} ${width} ${height}`;\n\n    return html`\n      <div class=\"container\">\n        <obc-watch\n          .state=${this.state}\n          .priority=${this.priority}\n          .angleSetpoint=${setpointAngle}\n          .newAngleSetpoint=${newSetpointAngle}\n          .atAngleSetpoint=${this.computeAtSetpoint(this.value)}\n          .angleSetpointAtZeroDeadband=${this.setpointAtZeroDeadband}\n          .setpointOverride=${this.setpointOverride}\n          .animateSetpoint=${this.animateSetpoint}\n          .padding=${48}\n          .tickmarks=${this.tickmarks}\n          .tickmarksInside=${this.tickmarksInside}\n          .tickmarkStyle=${this.tickmarkStyle}\n          .advices=${this._advices}\n          .areas=${[\n            {\n              startAngle: this.minAngle,\n              endAngle: this.maxAngle,\n              roundInsideCut: true,\n              roundOutsideCut: true,\n            },\n          ]}\n          .watchCircleType=${this.type === ObcGaugeRadialType.needle\n            ? WatchCircleType.single\n            : WatchCircleType.double}\n          .barAreas=${barAreas}\n          .clipTop=${this.clipTop}\n          .clipBottom=${this.clipBottom}\n        ></obc-watch>\n        <svg class=\"gauge-radial\" viewBox=${viewBox}>${this._needle}</svg>\n      </div>\n    `;\n  }\n\n  private get _needle() {\n    if (this.type === ObcGaugeRadialType.filled) {\n      return nothing;\n    }\n    const needleColor = this.needleColor ?? this._derivedNeedleColor;\n    if (this.type === ObcGaugeRadialType.needle) {\n      return svg`<g transform=\"rotate(${this.getAngle(this.value)}) translate(-256, -256)\">\n      <circle cx=\"256\" cy=\"256\" r=\"14\" fill=${needleColor}/>\n      <rect x=\"250\" y=\"96\" width=\"12\" height=\"192\" rx=\"6\" fill=${needleColor}/>\n      <rect x=\"252\" y=\"98\" width=\"8\" height=\"188\" rx=\"4\" stroke=${needleColor} fill=${needleColor} stroke-width=\"4\"/>\n      </svg> \n`;\n    } else {\n      return svg`<g transform=\"rotate(${this.getAngle(this.value)}) translate(-256, -256)\">\n<rect x=\"252\" y=\"96\" width=\"8\" height=\"48\" rx=\"4\" fill=${needleColor} stroke=\"var(--border-silhouette-color)\"/>\n</svg>\n      `;\n    }\n  }\n\n  get tickmarks(): Tickmark[] {\n    const tickmarks: Tickmark[] = [];\n\n    // Primary tickmarks — skip when undefined or <= 0 to prevent infinite loops\n    const primaryInterval = this.primaryTickmarkInterval;\n    if (\n      primaryInterval !== undefined &&\n      primaryInterval > 0 &&\n      Number.isFinite(primaryInterval)\n    ) {\n      for (let i = primaryInterval; i < this.maxValue; i += primaryInterval) {\n        tickmarks.push({\n          angle: this.getAngle(i),\n          type: TickmarkType.primary,\n          text: this.showLabels ? i.toString() : undefined,\n        });\n      }\n\n      if (this.showLabels && this.maxValue % primaryInterval === 0) {\n        tickmarks.push({\n          angle: this.getAngle(this.maxValue),\n          type: TickmarkType.textOnly,\n          text: this.showLabels ? this.maxValue.toString() : undefined,\n        });\n      }\n\n      for (let i = -primaryInterval; i > this.minValue; i -= primaryInterval) {\n        tickmarks.push({\n          angle: this.getAngle(i),\n          type: TickmarkType.primary,\n          text: this.showLabels ? i.toString() : undefined,\n        });\n      }\n\n      if (this.showLabels && this.minValue % primaryInterval === 0) {\n        tickmarks.push({\n          angle: this.getAngle(this.minValue),\n          type: TickmarkType.textOnly,\n          text: this.showLabels ? this.minValue.toString() : undefined,\n        });\n      }\n    }\n\n    // Secondary tickmarks — skip when undefined or <= 0 to prevent infinite loops\n    const secondaryInterval = this.secondaryTickmarkInterval;\n    if (\n      secondaryInterval !== undefined &&\n      secondaryInterval > 0 &&\n      Number.isFinite(secondaryInterval)\n    ) {\n      const existingTickmarks = tickmarks.map((t) => t.angle);\n\n      for (\n        let i = secondaryInterval;\n        i < this.maxValue;\n        i += secondaryInterval\n      ) {\n        if (existingTickmarks.includes(this.getAngle(i))) {\n          continue;\n        }\n        tickmarks.push({\n          angle: this.getAngle(i),\n          type: TickmarkType.secondary,\n        });\n      }\n\n      for (\n        let i = -secondaryInterval;\n        i > this.minValue;\n        i -= secondaryInterval\n      ) {\n        if (existingTickmarks.includes(this.getAngle(i))) {\n          continue;\n        }\n        tickmarks.push({\n          angle: this.getAngle(i),\n          type: TickmarkType.secondary,\n        });\n      }\n    }\n\n    // Tertiary tickmarks — skip when undefined or <= 0 to prevent infinite loops\n    const tertiaryInterval = this.tertiaryTickmarkInterval;\n    if (\n      tertiaryInterval !== undefined &&\n      tertiaryInterval > 0 &&\n      Number.isFinite(tertiaryInterval)\n    ) {\n      const existingTickmarks = tickmarks.map((t) => t.angle);\n\n      for (let i = tertiaryInterval; i < this.maxValue; i += tertiaryInterval) {\n        if (existingTickmarks.includes(this.getAngle(i))) {\n          continue;\n        }\n        tickmarks.push({\n          angle: this.getAngle(i),\n          type: TickmarkType.tertiary,\n        });\n      }\n\n      for (\n        let i = -tertiaryInterval;\n        i > this.minValue;\n        i -= tertiaryInterval\n      ) {\n        if (existingTickmarks.includes(this.getAngle(i))) {\n          continue;\n        }\n        tickmarks.push({\n          angle: this.getAngle(i),\n          type: TickmarkType.tertiary,\n        });\n      }\n    }\n\n    // Add the zero tickmark\n\n    const zeroTickmark = tickmarks.find((t) => t.angle === this.getAngle(0));\n    if (zeroTickmark) {\n      zeroTickmark.type =\n        this.minValue < 0 ? TickmarkType.main : TickmarkType.textOnly;\n    } else {\n      tickmarks.push({\n        angle: this.getAngle(0),\n        type: this.minValue < 0 ? TickmarkType.main : TickmarkType.textOnly,\n        text: this.showLabels ? '0' : undefined,\n      });\n    }\n\n    return tickmarks;\n  }\n\n  private get _advices(): AngleAdviceRaw[] {\n    return this.advices.map((advice) => {\n      const minAngle = this.getAngle(advice.minValue);\n      const maxAngle = this.getAngle(advice.maxValue);\n      let state = advice.hinted ? AdviceState.hinted : AdviceState.regular;\n      if (this.value >= advice.minValue && this.value <= advice.maxValue) {\n        state = AdviceState.triggered;\n      }\n\n      return {\n        minAngle,\n        maxAngle,\n        type: advice.type,\n        state,\n        hideMinTickmark: advice.minValue === this.minValue,\n        hideMaxTickmark: advice.maxValue === this.maxValue,\n      };\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    obc-watch {\n      anchor-name: --watch;\n    }\n\n    .speed-gauge-value {\n      position: absolute;\n      top: clamp(\n        70%,\n        calc(80% - (anchor-size(--watch height) - 200px) * 0.2),\n        80%\n      );\n      left: 50%;\n      transform: translateX(-50%);\n      width: fit-content;\n      height: fit-content;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-instrument-radial': ObcInstrumentRadial;\n  }\n}\n"],"names":["ObcGaugeRadialType"],"mappings":"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"}
+{"version":3,"file":"instrument-radial.js","sources":["../../../src/building-blocks/instrument-radial/instrument-radial.ts"],"sourcesContent":["import {css, LitElement, html, svg, nothing} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport {customElement} from '../../decorator.js';\nimport {\n  AdviceState,\n  AdviceType,\n  AngleAdviceRaw,\n} from '../../navigation-instruments/watch/advice.js';\nimport {WatchCircleType} from '../../navigation-instruments/watch/watch.js';\nimport {Tickmark} from '../../navigation-instruments/watch/tickmark.js';\nimport {TickmarkType} from '../../navigation-instruments/watch/tickmark.js';\nimport {TickmarkStyle} from '../../navigation-instruments/watch/tickmark.js';\nimport {InstrumentState, Priority} from '../../navigation-instruments/types.js';\nimport {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';\nimport {\n  OUTER_RING_RADIUS,\n  innerRingRadiusFor,\n} from '../../navigation-instruments/watch/watch.js';\nimport {\n  computeZoomToFitArcFrame,\n  type ZoomToFitArcFrame,\n} from '../../svghelpers/arc-frame.js';\n\nexport enum ObcGaugeRadialType {\n  filled = 'filled',\n  bar = 'bar',\n  needle = 'needle',\n}\n\nexport interface GaugeRadialAdvice {\n  minValue: number;\n  maxValue: number;\n  type: AdviceType;\n  hinted: boolean;\n}\n@customElement('obc-instrument-radial')\nexport class ObcInstrumentRadial extends SetpointMixin(LitElement) {\n  // setpoint, newSetpoint, atSetpoint, touching, autoAtSetpoint,\n  // autoAtSetpointDeadband, setpointAtZeroDeadband, setpointOverride\n  // — all inherited from SetpointMixin\n\n  @property({type: String}) state: InstrumentState = InstrumentState.active;\n  @property({type: String}) priority: Priority = Priority.regular;\n\n  @property({type: Number}) value = 0;\n  @property({type: Number}) maxValue = 100;\n  @property({type: Number}) minValue = 0;\n  @property({attribute: false}) getAngle!: (v: number) => number;\n  @property({type: String}) needleColor: string | undefined;\n  @property({type: String}) barColor: string | undefined;\n  @property({type: Boolean}) showLabels: boolean = false;\n  /**\n   * Interval for primary tickmarks in value units.\n   * When undefined or <= 0, no primary tickmarks are shown.\n   */\n  @property({type: Number}) primaryTickmarkInterval: number | undefined = 50;\n  /**\n   * Interval for secondary tickmarks in value units.\n   * When undefined or <= 0, no secondary tickmarks are shown.\n   */\n  @property({type: Number}) secondaryTickmarkInterval: number | undefined = 10;\n  /**\n   * Interval for tertiary tickmarks in value units.\n   * When undefined or <= 0, no tertiary tickmarks are shown.\n   */\n  @property({type: Number}) tertiaryTickmarkInterval: number | undefined =\n    undefined;\n  @property({type: String}) type: ObcGaugeRadialType =\n    ObcGaugeRadialType.filled;\n  @property({type: String}) needleType: ObcGaugeRadialType =\n    ObcGaugeRadialType.filled;\n  @property({type: Boolean}) tickmarksInside: boolean = false;\n  @property({type: String}) tickmarkStyle: TickmarkStyle =\n    TickmarkStyle.regular;\n  @property({type: Array, attribute: false}) advices: GaugeRadialAdvice[] = [];\n  @property({type: Number}) clipTop: number = 0; // in percent of height\n  @property({type: Number}) clipBottom: number = 0; // in percent of height\n  @property({type: Boolean}) zoomToFitArc: boolean = false;\n\n  private _radiusOffset = 0;\n  private _arcFrame: ZoomToFitArcFrame | undefined;\n\n  get minAngle(): number {\n    return this.getAngle(this.minValue);\n  }\n\n  get maxAngle(): number {\n    return this.getAngle(this.maxValue);\n  }\n\n  private get _derivedNeedleColor(): string {\n    if (\n      this.state === InstrumentState.loading ||\n      this.state === InstrumentState.off\n    ) {\n      return 'transparent';\n    }\n    return this.priority === Priority.enhanced\n      ? 'var(--instrument-enhanced-secondary-color)'\n      : 'var(--instrument-regular-secondary-color)';\n  }\n\n  private get _derivedBarColor(): string {\n    if (\n      this.state === InstrumentState.loading ||\n      this.state === InstrumentState.off\n    ) {\n      return 'transparent';\n    }\n    if (this.type === ObcGaugeRadialType.filled) {\n      return this.priority === Priority.enhanced\n        ? 'var(--instrument-enhanced-secondary-color)'\n        : 'var(--instrument-regular-secondary-color)';\n    }\n    return this.priority === Priority.enhanced\n      ? 'var(--instrument-enhanced-tertiary-color)'\n      : 'var(--instrument-regular-tertiary-color)';\n  }\n\n  override render() {\n    const barColor = this.barColor ?? this._derivedBarColor;\n    const setpointAngle =\n      this.setpoint !== undefined ? this.getAngle(this.setpoint) : undefined;\n    const newSetpointAngle =\n      this.newSetpoint !== undefined\n        ? this.getAngle(this.newSetpoint)\n        : undefined;\n\n    const barAreas =\n      this.type === ObcGaugeRadialType.needle\n        ? []\n        : [\n            {\n              startAngle: this.getAngle(0),\n              endAngle: this.getAngle(this.value),\n              fillColor: barColor,\n            },\n          ];\n\n    const areas = [\n      {\n        startAngle: this.minAngle,\n        endAngle: this.maxAngle,\n        roundInsideCut: true,\n        roundOutsideCut: true,\n      },\n    ];\n\n    const watchCircleType =\n      this.type === ObcGaugeRadialType.needle\n        ? WatchCircleType.single\n        : WatchCircleType.double;\n\n    let viewBox: string;\n    if (this.zoomToFitArc) {\n      const ext = 48;\n      const targetSize = (176 + ext) * 2;\n      const frame = computeZoomToFitArcFrame({\n        areas,\n        outerRadius: OUTER_RING_RADIUS,\n        innerRadius: innerRingRadiusFor(watchCircleType),\n        extension: ext,\n        targetSize,\n      });\n      viewBox = frame.viewBox;\n      this._radiusOffset = frame.radiusOffset;\n      this._arcFrame = frame;\n    } else {\n      this._radiusOffset = 0;\n      this._arcFrame = undefined;\n      const width = 448;\n      const height = width * (1 - this.clipTop / 100 - this.clipBottom / 100);\n      const top = -width / 2 + (width * this.clipTop) / 100;\n      viewBox = `${-width / 2} ${top} ${width} ${height}`;\n    }\n\n    return html`\n      <div class=\"container\">\n        <obc-watch\n          .state=${this.state}\n          .priority=${this.priority}\n          .angleSetpoint=${setpointAngle}\n          .newAngleSetpoint=${newSetpointAngle}\n          .atAngleSetpoint=${this.computeAtSetpoint(this.value)}\n          .angleSetpointAtZeroDeadband=${this.setpointAtZeroDeadband}\n          .setpointOverride=${this.setpointOverride}\n          .animateSetpoint=${this.animateSetpoint}\n          .padding=${48}\n          .tickmarks=${this.tickmarks}\n          .tickmarksInside=${this.tickmarksInside}\n          .tickmarkStyle=${this.tickmarkStyle}\n          .advices=${this._advices}\n          .areas=${areas}\n          .watchCircleType=${watchCircleType}\n          .barAreas=${barAreas}\n          .clipTop=${this.zoomToFitArc ? 0 : this.clipTop}\n          .clipBottom=${this.zoomToFitArc ? 0 : this.clipBottom}\n          .zoomToFitArc=${this.zoomToFitArc}\n          .arcFrame=${this._arcFrame}\n        ></obc-watch>\n        <svg class=\"gauge-radial\" viewBox=${viewBox}>${this._needle}</svg>\n      </div>\n    `;\n  }\n\n  private get _needle() {\n    if (this.type === ObcGaugeRadialType.filled) {\n      return nothing;\n    }\n    const needleColor = this.needleColor ?? this._derivedNeedleColor;\n    const rOff = this._radiusOffset;\n    if (this.type === ObcGaugeRadialType.needle) {\n      return svg`<g transform=\"rotate(${this.getAngle(this.value)}) translate(-256, -256)\">\n      <circle cx=\"256\" cy=\"256\" r=\"14\" fill=${needleColor}/>\n      <rect x=\"250\" y=\"${96 - rOff}\" width=\"12\" height=\"${192 + rOff}\" rx=\"6\" fill=${needleColor}/>\n      <rect x=\"252\" y=\"${98 - rOff}\" width=\"8\" height=\"${188 + rOff}\" rx=\"4\" stroke=${needleColor} fill=${needleColor} stroke-width=\"4\"/>\n      </g>\n`;\n    } else {\n      return svg`<g transform=\"rotate(${this.getAngle(this.value)}) translate(-256, -256)\">\n<rect x=\"252\" y=\"${96 - rOff}\" width=\"8\" height=\"48\" rx=\"4\" fill=${needleColor} stroke=\"var(--border-silhouette-color)\"/>\n</g>\n      `;\n    }\n  }\n\n  get tickmarks(): Tickmark[] {\n    const tickmarks: Tickmark[] = [];\n\n    // Primary tickmarks — skip when undefined or <= 0 to prevent infinite loops\n    const primaryInterval = this.primaryTickmarkInterval;\n    if (\n      primaryInterval !== undefined &&\n      primaryInterval > 0 &&\n      Number.isFinite(primaryInterval)\n    ) {\n      for (let i = primaryInterval; i < this.maxValue; i += primaryInterval) {\n        tickmarks.push({\n          angle: this.getAngle(i),\n          type: TickmarkType.primary,\n          text: this.showLabels ? i.toString() : undefined,\n        });\n      }\n\n      if (this.showLabels && this.maxValue % primaryInterval === 0) {\n        tickmarks.push({\n          angle: this.getAngle(this.maxValue),\n          type: TickmarkType.textOnly,\n          text: this.showLabels ? this.maxValue.toString() : undefined,\n        });\n      }\n\n      for (let i = -primaryInterval; i > this.minValue; i -= primaryInterval) {\n        tickmarks.push({\n          angle: this.getAngle(i),\n          type: TickmarkType.primary,\n          text: this.showLabels ? i.toString() : undefined,\n        });\n      }\n\n      if (this.showLabels && this.minValue % primaryInterval === 0) {\n        tickmarks.push({\n          angle: this.getAngle(this.minValue),\n          type: TickmarkType.textOnly,\n          text: this.showLabels ? this.minValue.toString() : undefined,\n        });\n      }\n    }\n\n    // Secondary tickmarks — skip when undefined or <= 0 to prevent infinite loops\n    const secondaryInterval = this.secondaryTickmarkInterval;\n    if (\n      secondaryInterval !== undefined &&\n      secondaryInterval > 0 &&\n      Number.isFinite(secondaryInterval)\n    ) {\n      const existingTickmarks = tickmarks.map((t) => t.angle);\n\n      for (\n        let i = secondaryInterval;\n        i < this.maxValue;\n        i += secondaryInterval\n      ) {\n        if (existingTickmarks.includes(this.getAngle(i))) {\n          continue;\n        }\n        tickmarks.push({\n          angle: this.getAngle(i),\n          type: TickmarkType.secondary,\n        });\n      }\n\n      for (\n        let i = -secondaryInterval;\n        i > this.minValue;\n        i -= secondaryInterval\n      ) {\n        if (existingTickmarks.includes(this.getAngle(i))) {\n          continue;\n        }\n        tickmarks.push({\n          angle: this.getAngle(i),\n          type: TickmarkType.secondary,\n        });\n      }\n    }\n\n    // Tertiary tickmarks — skip when undefined or <= 0 to prevent infinite loops\n    const tertiaryInterval = this.tertiaryTickmarkInterval;\n    if (\n      tertiaryInterval !== undefined &&\n      tertiaryInterval > 0 &&\n      Number.isFinite(tertiaryInterval)\n    ) {\n      const existingTickmarks = tickmarks.map((t) => t.angle);\n\n      for (let i = tertiaryInterval; i < this.maxValue; i += tertiaryInterval) {\n        if (existingTickmarks.includes(this.getAngle(i))) {\n          continue;\n        }\n        tickmarks.push({\n          angle: this.getAngle(i),\n          type: TickmarkType.tertiary,\n        });\n      }\n\n      for (\n        let i = -tertiaryInterval;\n        i > this.minValue;\n        i -= tertiaryInterval\n      ) {\n        if (existingTickmarks.includes(this.getAngle(i))) {\n          continue;\n        }\n        tickmarks.push({\n          angle: this.getAngle(i),\n          type: TickmarkType.tertiary,\n        });\n      }\n    }\n\n    // Add the zero tickmark\n\n    const zeroTickmark = tickmarks.find((t) => t.angle === this.getAngle(0));\n    if (zeroTickmark) {\n      zeroTickmark.type =\n        this.minValue < 0 ? TickmarkType.main : TickmarkType.textOnly;\n    } else {\n      tickmarks.push({\n        angle: this.getAngle(0),\n        type: this.minValue < 0 ? TickmarkType.main : TickmarkType.textOnly,\n        text: this.showLabels ? '0' : undefined,\n      });\n    }\n\n    return tickmarks;\n  }\n\n  private get _advices(): AngleAdviceRaw[] {\n    return this.advices.map((advice) => {\n      const minAngle = this.getAngle(advice.minValue);\n      const maxAngle = this.getAngle(advice.maxValue);\n      let state = advice.hinted ? AdviceState.hinted : AdviceState.regular;\n      if (this.value >= advice.minValue && this.value <= advice.maxValue) {\n        state = AdviceState.triggered;\n      }\n\n      return {\n        minAngle,\n        maxAngle,\n        type: advice.type,\n        state,\n        hideMinTickmark: advice.minValue === this.minValue,\n        hideMaxTickmark: advice.maxValue === this.maxValue,\n      };\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    obc-watch {\n      anchor-name: --watch;\n    }\n\n    .speed-gauge-value {\n      position: absolute;\n      top: clamp(\n        70%,\n        calc(80% - (anchor-size(--watch height) - 200px) * 0.2),\n        80%\n      );\n      left: 50%;\n      transform: translateX(-50%);\n      width: fit-content;\n      height: fit-content;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-instrument-radial': ObcInstrumentRadial;\n  }\n}\n"],"names":["ObcGaugeRadialType"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBO,IAAK,uCAAAA,wBAAL;AACLA,sBAAA,QAAA,IAAS;AACTA,sBAAA,KAAA,IAAM;AACNA,sBAAA,QAAA,IAAS;AAHC,SAAAA;AAAA,GAAA,sBAAA,CAAA,CAAA;AAaL,IAAM,sBAAN,cAAkC,cAAc,UAAU,EAAE;AAAA,EAA5D,cAAA;AAAA,UAAA,GAAA,SAAA;AAKqB,SAAA,QAAyB,gBAAgB;AACzC,SAAA,WAAqB,SAAS;AAE9B,SAAA,QAAQ;AACR,SAAA,WAAW;AACX,SAAA,WAAW;AAIV,SAAA,aAAsB;AAKvB,SAAA,0BAA8C;AAK9C,SAAA,4BAAgD;AAKhD,SAAA,2BACxB;AACwB,SAAA,OACxB;AACwB,SAAA,aACxB;AACyB,SAAA,kBAA2B;AAC5B,SAAA,gBACxB,cAAc;AAC2B,SAAA,UAA+B,CAAA;AAChD,SAAA,UAAkB;AAClB,SAAA,aAAqB;AACpB,SAAA,eAAwB;AAEnD,SAAQ,gBAAgB;AAAA,EAAA;AAAA,EAGxB,IAAI,WAAmB;AACrB,WAAO,KAAK,SAAS,KAAK,QAAQ;AAAA,EACpC;AAAA,EAEA,IAAI,WAAmB;AACrB,WAAO,KAAK,SAAS,KAAK,QAAQ;AAAA,EACpC;AAAA,EAEA,IAAY,sBAA8B;AACxC,QACE,KAAK,UAAU,gBAAgB,WAC/B,KAAK,UAAU,gBAAgB,KAC/B;AACA,aAAO;AAAA,IACT;AACA,WAAO,KAAK,aAAa,SAAS,WAC9B,+CACA;AAAA,EACN;AAAA,EAEA,IAAY,mBAA2B;AACrC,QACE,KAAK,UAAU,gBAAgB,WAC/B,KAAK,UAAU,gBAAgB,KAC/B;AACA,aAAO;AAAA,IACT;AACA,QAAI,KAAK,SAAS,UAA2B;AAC3C,aAAO,KAAK,aAAa,SAAS,WAC9B,+CACA;AAAA,IACN;AACA,WAAO,KAAK,aAAa,SAAS,WAC9B,8CACA;AAAA,EACN;AAAA,EAES,SAAS;AAChB,UAAM,WAAW,KAAK,YAAY,KAAK;AACvC,UAAM,gBACJ,KAAK,aAAa,SAAY,KAAK,SAAS,KAAK,QAAQ,IAAI;AAC/D,UAAM,mBACJ,KAAK,gBAAgB,SACjB,KAAK,SAAS,KAAK,WAAW,IAC9B;AAEN,UAAM,WACJ,KAAK,SAAS,WACV,CAAA,IACA;AAAA,MACE;AAAA,QACE,YAAY,KAAK,SAAS,CAAC;AAAA,QAC3B,UAAU,KAAK,SAAS,KAAK,KAAK;AAAA,QAClC,WAAW;AAAA,MAAA;AAAA,IACb;AAGR,UAAM,QAAQ;AAAA,MACZ;AAAA,QACE,YAAY,KAAK;AAAA,QACjB,UAAU,KAAK;AAAA,QACf,gBAAgB;AAAA,QAChB,iBAAiB;AAAA,MAAA;AAAA,IACnB;AAGF,UAAM,kBACJ,KAAK,SAAS,WACV,gBAAgB,SAChB,gBAAgB;AAEtB,QAAI;AACJ,QAAI,KAAK,cAAc;AACrB,YAAM,MAAM;AACZ,YAAM,cAAc,MAAM,OAAO;AACjC,YAAM,QAAQ,yBAAyB;AAAA,QACrC;AAAA,QACA,aAAa;AAAA,QACb,aAAa,mBAAmB,eAAe;AAAA,QAC/C,WAAW;AAAA,QACX;AAAA,MAAA,CACD;AACD,gBAAU,MAAM;AAChB,WAAK,gBAAgB,MAAM;AAC3B,WAAK,YAAY;AAAA,IACnB,OAAO;AACL,WAAK,gBAAgB;AACrB,WAAK,YAAY;AACjB,YAAM,QAAQ;AACd,YAAM,SAAS,SAAS,IAAI,KAAK,UAAU,MAAM,KAAK,aAAa;AACnE,YAAM,MAAM,CAAC,QAAQ,IAAK,QAAQ,KAAK,UAAW;AAClD,gBAAU,GAAG,CAAC,QAAQ,CAAC,IAAI,GAAG,IAAI,KAAK,IAAI,MAAM;AAAA,IACnD;AAEA,WAAO;AAAA;AAAA;AAAA,mBAGQ,KAAK,KAAK;AAAA,sBACP,KAAK,QAAQ;AAAA,2BACR,aAAa;AAAA,8BACV,gBAAgB;AAAA,6BACjB,KAAK,kBAAkB,KAAK,KAAK,CAAC;AAAA,yCACtB,KAAK,sBAAsB;AAAA,8BACtC,KAAK,gBAAgB;AAAA,6BACtB,KAAK,eAAe;AAAA,qBAC5B,EAAE;AAAA,uBACA,KAAK,SAAS;AAAA,6BACR,KAAK,eAAe;AAAA,2BACtB,KAAK,aAAa;AAAA,qBACxB,KAAK,QAAQ;AAAA,mBACf,KAAK;AAAA,6BACK,eAAe;AAAA,sBACtB,QAAQ;AAAA,qBACT,KAAK,eAAe,IAAI,KAAK,OAAO;AAAA,wBACjC,KAAK,eAAe,IAAI,KAAK,UAAU;AAAA,0BACrC,KAAK,YAAY;AAAA,sBACrB,KAAK,SAAS;AAAA;AAAA,4CAEQ,OAAO,IAAI,KAAK,OAAO;AAAA;AAAA;AAAA,EAGjE;AAAA,EAEA,IAAY,UAAU;AACpB,QAAI,KAAK,SAAS,UAA2B;AAC3C,aAAO;AAAA,IACT;AACA,UAAM,cAAc,KAAK,eAAe,KAAK;AAC7C,UAAM,OAAO,KAAK;AAClB,QAAI,KAAK,SAAS,UAA2B;AAC3C,aAAO,2BAA2B,KAAK,SAAS,KAAK,KAAK,CAAC;AAAA,8CACnB,WAAW;AAAA,yBAChC,KAAK,IAAI,wBAAwB,MAAM,IAAI,iBAAiB,WAAW;AAAA,yBACvE,KAAK,IAAI,uBAAuB,MAAM,IAAI,mBAAmB,WAAW,SAAS,WAAW;AAAA;AAAA;AAAA,IAGjH,OAAO;AACL,aAAO,2BAA2B,KAAK,SAAS,KAAK,KAAK,CAAC;AAAA,mBAC9C,KAAK,IAAI,uCAAuC,WAAW;AAAA;AAAA;AAAA,IAG1E;AAAA,EACF;AAAA,EAEA,IAAI,YAAwB;AAC1B,UAAM,YAAwB,CAAA;AAG9B,UAAM,kBAAkB,KAAK;AAC7B,QACE,oBAAoB,UACpB,kBAAkB,KAClB,OAAO,SAAS,eAAe,GAC/B;AACA,eAAS,IAAI,iBAAiB,IAAI,KAAK,UAAU,KAAK,iBAAiB;AACrE,kBAAU,KAAK;AAAA,UACb,OAAO,KAAK,SAAS,CAAC;AAAA,UACtB,MAAM,aAAa;AAAA,UACnB,MAAM,KAAK,aAAa,EAAE,aAAa;AAAA,QAAA,CACxC;AAAA,MACH;AAEA,UAAI,KAAK,cAAc,KAAK,WAAW,oBAAoB,GAAG;AAC5D,kBAAU,KAAK;AAAA,UACb,OAAO,KAAK,SAAS,KAAK,QAAQ;AAAA,UAClC,MAAM,aAAa;AAAA,UACnB,MAAM,KAAK,aAAa,KAAK,SAAS,aAAa;AAAA,QAAA,CACpD;AAAA,MACH;AAEA,eAAS,IAAI,CAAC,iBAAiB,IAAI,KAAK,UAAU,KAAK,iBAAiB;AACtE,kBAAU,KAAK;AAAA,UACb,OAAO,KAAK,SAAS,CAAC;AAAA,UACtB,MAAM,aAAa;AAAA,UACnB,MAAM,KAAK,aAAa,EAAE,aAAa;AAAA,QAAA,CACxC;AAAA,MACH;AAEA,UAAI,KAAK,cAAc,KAAK,WAAW,oBAAoB,GAAG;AAC5D,kBAAU,KAAK;AAAA,UACb,OAAO,KAAK,SAAS,KAAK,QAAQ;AAAA,UAClC,MAAM,aAAa;AAAA,UACnB,MAAM,KAAK,aAAa,KAAK,SAAS,aAAa;AAAA,QAAA,CACpD;AAAA,MACH;AAAA,IACF;AAGA,UAAM,oBAAoB,KAAK;AAC/B,QACE,sBAAsB,UACtB,oBAAoB,KACpB,OAAO,SAAS,iBAAiB,GACjC;AACA,YAAM,oBAAoB,UAAU,IAAI,CAAC,MAAM,EAAE,KAAK;AAEtD,eACM,IAAI,mBACR,IAAI,KAAK,UACT,KAAK,mBACL;AACA,YAAI,kBAAkB,SAAS,KAAK,SAAS,CAAC,CAAC,GAAG;AAChD;AAAA,QACF;AACA,kBAAU,KAAK;AAAA,UACb,OAAO,KAAK,SAAS,CAAC;AAAA,UACtB,MAAM,aAAa;AAAA,QAAA,CACpB;AAAA,MACH;AAEA,eACM,IAAI,CAAC,mBACT,IAAI,KAAK,UACT,KAAK,mBACL;AACA,YAAI,kBAAkB,SAAS,KAAK,SAAS,CAAC,CAAC,GAAG;AAChD;AAAA,QACF;AACA,kBAAU,KAAK;AAAA,UACb,OAAO,KAAK,SAAS,CAAC;AAAA,UACtB,MAAM,aAAa;AAAA,QAAA,CACpB;AAAA,MACH;AAAA,IACF;AAGA,UAAM,mBAAmB,KAAK;AAC9B,QACE,qBAAqB,UACrB,mBAAmB,KACnB,OAAO,SAAS,gBAAgB,GAChC;AACA,YAAM,oBAAoB,UAAU,IAAI,CAAC,MAAM,EAAE,KAAK;AAEtD,eAAS,IAAI,kBAAkB,IAAI,KAAK,UAAU,KAAK,kBAAkB;AACvE,YAAI,kBAAkB,SAAS,KAAK,SAAS,CAAC,CAAC,GAAG;AAChD;AAAA,QACF;AACA,kBAAU,KAAK;AAAA,UACb,OAAO,KAAK,SAAS,CAAC;AAAA,UACtB,MAAM,aAAa;AAAA,QAAA,CACpB;AAAA,MACH;AAEA,eACM,IAAI,CAAC,kBACT,IAAI,KAAK,UACT,KAAK,kBACL;AACA,YAAI,kBAAkB,SAAS,KAAK,SAAS,CAAC,CAAC,GAAG;AAChD;AAAA,QACF;AACA,kBAAU,KAAK;AAAA,UACb,OAAO,KAAK,SAAS,CAAC;AAAA,UACtB,MAAM,aAAa;AAAA,QAAA,CACpB;AAAA,MACH;AAAA,IACF;AAIA,UAAM,eAAe,UAAU,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK,SAAS,CAAC,CAAC;AACvE,QAAI,cAAc;AAChB,mBAAa,OACX,KAAK,WAAW,IAAI,aAAa,OAAO,aAAa;AAAA,IACzD,OAAO;AACL,gBAAU,KAAK;AAAA,QACb,OAAO,KAAK,SAAS,CAAC;AAAA,QACtB,MAAM,KAAK,WAAW,IAAI,aAAa,OAAO,aAAa;AAAA,QAC3D,MAAM,KAAK,aAAa,MAAM;AAAA,MAAA,CAC/B;AAAA,IACH;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,IAAY,WAA6B;AACvC,WAAO,KAAK,QAAQ,IAAI,CAAC,WAAW;AAClC,YAAM,WAAW,KAAK,SAAS,OAAO,QAAQ;AAC9C,YAAM,WAAW,KAAK,SAAS,OAAO,QAAQ;AAC9C,UAAI,QAAQ,OAAO,SAAS,YAAY,SAAS,YAAY;AAC7D,UAAI,KAAK,SAAS,OAAO,YAAY,KAAK,SAAS,OAAO,UAAU;AAClE,gBAAQ,YAAY;AAAA,MACtB;AAEA,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,MAAM,OAAO;AAAA,QACb;AAAA,QACA,iBAAiB,OAAO,aAAa,KAAK;AAAA,QAC1C,iBAAiB,OAAO,aAAa,KAAK;AAAA,MAAA;AAAA,IAE9C,CAAC;AAAA,EACH;AAsCF;AA1Xa,oBAsVK,SAAS;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAjVC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GALb,oBAKe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GANb,oBAMe,WAAA,YAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GARb,oBAQe,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GATb,oBASe,WAAA,YAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAVb,oBAUe,WAAA,YAAA,CAAA;AACI,gBAAA;AAAA,EAA7B,SAAS,EAAC,WAAW,MAAA,CAAM;AAAA,GAXjB,oBAWmB,WAAA,YAAA,CAAA;AACJ,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAZb,oBAYe,WAAA,eAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAbb,oBAae,WAAA,YAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAdd,oBAcgB,WAAA,cAAA,CAAA;AAKD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAnBb,oBAmBe,WAAA,2BAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAxBb,oBAwBe,WAAA,6BAAA,CAAA;AAKA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA7Bb,oBA6Be,WAAA,4BAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA/Bb,oBA+Be,WAAA,QAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAjCb,oBAiCe,WAAA,cAAA,CAAA;AAEC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAnCd,oBAmCgB,WAAA,mBAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GApCb,oBAoCe,WAAA,iBAAA,CAAA;AAEiB,gBAAA;AAAA,EAA1C,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GAtC9B,oBAsCgC,WAAA,WAAA,CAAA;AACjB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAvCb,oBAuCe,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAxCb,oBAwCe,WAAA,cAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAzCd,oBAyCgB,WAAA,gBAAA,CAAA;AAzChB,sBAAN,gBAAA;AAAA,EADN,cAAc,uBAAuB;AAAA,GACzB,mBAAA;"}

package/dist/navigation-instruments/compass/arrow.d.ts

@@ -4,5 +4,5 @@ export declare enum ArrowStyle {
     HDG = "HDG",
     COG = "COG"
 }
-export declare function arrow(style: ArrowStyle, angle: number, priority?: Priority): SVGTemplateResult | SVGTemplateResult[];
+export declare function arrow(style: ArrowStyle, angle: number, priority?: Priority, radiusOffset?: number): SVGTemplateResult | SVGTemplateResult[];
 //# sourceMappingURL=arrow.d.ts.map

package/dist/navigation-instruments/compass/arrow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"arrow.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass/arrow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAM,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AAErC,oBAAY,UAAU;IACpB,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED,wBAAgB,KAAK,CACnB,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,MAAM,EACb,QAAQ,GAAE,QAA2B,GACpC,iBAAiB,GAAG,iBAAiB,EAAE,CAiCzC"}
+{"version":3,"file":"arrow.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass/arrow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAM,MAAM,KAAK,CAAC;AAC3C,OAAO,EAAC,QAAQ,EAAC,MAAM,aAAa,CAAC;AAErC,oBAAY,UAAU;IACpB,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED,wBAAgB,KAAK,CACnB,KAAK,EAAE,UAAU,EACjB,KAAK,EAAE,MAAM,EACb,QAAQ,GAAE,QAA2B,EACrC,YAAY,SAAI,GACf,iBAAiB,GAAG,iBAAiB,EAAE,CAiCzC"}

package/dist/navigation-instruments/compass/arrow.js

@@ -5,11 +5,11 @@ var ArrowStyle = /* @__PURE__ */ ((ArrowStyle2) => {
   ArrowStyle2["COG"] = "COG";
   return ArrowStyle2;
 })(ArrowStyle || {});
-function arrow(style, angle, priority = Priority.regular) {
+function arrow(style, angle, priority = Priority.regular, radiusOffset = 0) {
   const colorName = priority === Priority.enhanced ? "var(--instrument-enhanced-secondary-color)" : "var(--instrument-regular-secondary-color)";
   if (style === "HDG") {
     return svg`
-      <g transform="rotate(${angle}) translate(-256, -256)">
+      <g transform="rotate(${angle}) translate(-256, ${-256 - radiusOffset})">
 
 <path d="M254.654 100.32C255.219 99.1903 256.906 99.2277 257.396 100.433L272.312 137.092L272.388 137.301C273.067 139.455 270.647 141.314 268.676 140.13V140.129L256 132.582L243.323 140.129L243.324 140.13C241.289 141.352 238.777 139.332 239.688 137.092L254.604 100.433L254.654 100.32Z"
  fill=${colorName} stroke="var(--border-silhouette-color)" stroke-width="1" vector-effect="non-scaling-stroke"/>
@@ -17,7 +17,7 @@ function arrow(style, angle, priority = Priority.regular) {
     `;
   } else if (style === "COG") {
     return svg`
-      <g transform="rotate(${angle}) translate(-256, -256)">
+      <g transform="rotate(${angle}) translate(-256, ${-256 - radiusOffset})">
 <mask id="path-1-outside-1_133_32856" maskUnits="userSpaceOnUse" x="238" y="99" width="36" height="42" fill="black">
 <rect fill="white" x="238" y="99" width="36" height="42"/>
 <path fill-rule="evenodd" clip-rule="evenodd" vector-effect="non-scaling-stroke" d="M256 127.334L265.867 133.192L256 108.941L246.133 133.192L256 127.334ZM255.067 100.621C255.404 99.7929 256.596 99.7929 256.933 100.621L271.849 137.28C272.567 139.046 270.584 140.693 268.933 139.701L256 132L243.067 139.701C241.416 140.693 239.433 139.046 240.151 137.28L255.067 100.621Z"/>

package/dist/navigation-instruments/compass/arrow.js.map

@@ -1 +1 @@
-{"version":3,"file":"arrow.js","sources":["../../../src/navigation-instruments/compass/arrow.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\nimport {Priority} from '../types.js';\n\nexport enum ArrowStyle {\n  HDG = 'HDG',\n  COG = 'COG',\n}\n\nexport function arrow(\n  style: ArrowStyle,\n  angle: number,\n  priority: Priority = Priority.regular\n): SVGTemplateResult | SVGTemplateResult[] {\n  const colorName =\n    priority === Priority.enhanced\n      ? 'var(--instrument-enhanced-secondary-color)'\n      : 'var(--instrument-regular-secondary-color)';\n\n  if (style === ArrowStyle.HDG) {\n    return svg`\n      <g transform=\"rotate(${angle}) translate(-256, -256)\">\n\n<path d=\"M254.654 100.32C255.219 99.1903 256.906 99.2277 257.396 100.433L272.312 137.092L272.388 137.301C273.067 139.455 270.647 141.314 268.676 140.13V140.129L256 132.582L243.323 140.129L243.324 140.13C241.289 141.352 238.777 139.332 239.688 137.092L254.604 100.433L254.654 100.32Z\"\n fill=${colorName} stroke=\"var(--border-silhouette-color)\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>\n      </g>\n    `;\n  } else if (style === ArrowStyle.COG) {\n    return svg`\n      <g transform=\"rotate(${angle}) translate(-256, -256)\">\n<mask id=\"path-1-outside-1_133_32856\" maskUnits=\"userSpaceOnUse\" x=\"238\" y=\"99\" width=\"36\" height=\"42\" fill=\"black\">\n<rect fill=\"white\" x=\"238\" y=\"99\" width=\"36\" height=\"42\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" vector-effect=\"non-scaling-stroke\" d=\"M256 127.334L265.867 133.192L256 108.941L246.133 133.192L256 127.334ZM255.067 100.621C255.404 99.7929 256.596 99.7929 256.933 100.621L271.849 137.28C272.567 139.046 270.584 140.693 268.933 139.701L256 132L243.067 139.701C241.416 140.693 239.433 139.046 240.151 137.28L255.067 100.621Z\"/>\n</mask>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M256 127.334L265.867 133.192L256 108.941L246.133 133.192L256 127.334ZM255.067 100.621C255.404 99.7929 256.596 99.7929 256.933 100.621L271.849 137.28C272.567 139.046 270.584 140.693 268.933 139.701L256 132L243.067 139.701C241.416 140.693 239.433 139.046 240.151 137.28L255.067 100.621Z\"\n   fill=${colorName} />\n<path d=\"M256 127.334L256.511 126.474L256 126.171L255.489 126.474L256 127.334ZM265.867 133.192L265.357 134.052L267.914 135.571L266.793 132.816L265.867 133.192ZM256 108.941L256.926 108.564L256 106.288L255.074 108.564L256 108.941ZM246.133 133.192L245.207 132.816L244.086 135.571L246.643 134.052L246.133 133.192ZM255.067 100.621L254.14 100.244L255.067 100.621ZM256.933 100.621L257.86 100.244L256.933 100.621ZM271.849 137.28L270.922 137.657L271.849 137.28ZM268.933 139.701L269.448 138.844L269.445 138.842L268.933 139.701ZM256 132L256.512 131.141L256 130.836L255.488 131.141L256 132ZM243.067 139.701L242.555 138.842L242.552 138.844L243.067 139.701ZM240.151 137.28L241.078 137.657L240.151 137.28ZM255.489 128.193L265.357 134.052L266.378 132.333L256.511 126.474L255.489 128.193ZM266.793 132.816L256.926 108.564L255.074 109.318L264.941 133.569L266.793 132.816ZM255.074 108.564L245.207 132.816L247.059 133.569L256.926 109.318L255.074 108.564ZM246.643 134.052L256.511 128.193L255.489 126.474L245.622 132.333L246.643 134.052ZM255.993 100.998C255.994 100.994 255.996 100.992 255.996 100.992C255.996 100.992 255.995 100.993 255.994 100.994C255.991 100.997 255.988 101 255.986 101.002C255.984 101.003 255.984 101.002 255.987 101.002C255.99 101.001 255.994 101 256 101C256.006 101 256.01 101.001 256.013 101.002C256.016 101.002 256.016 101.003 256.014 101.002C256.012 101 256.009 100.997 256.006 100.994C256.005 100.993 256.004 100.992 256.004 100.992C256.004 100.992 256.006 100.994 256.007 100.998L257.86 100.244C257.185 98.5852 254.815 98.5852 254.14 100.244L255.993 100.998ZM256.007 100.998L270.922 137.657L272.775 136.903L257.86 100.244L256.007 100.998ZM270.922 137.657C271.255 138.473 270.33 139.373 269.448 138.844L268.418 140.558C270.838 142.012 273.879 139.618 272.775 136.903L270.922 137.657ZM269.445 138.842L256.512 131.141L255.488 132.859L268.422 140.56L269.445 138.842ZM255.488 131.141L242.555 138.842L243.578 140.56L256.512 132.859L255.488 131.141ZM242.552 138.844C241.67 139.373 240.745 138.473 241.078 137.657L239.225 136.903C238.121 139.618 241.162 142.012 243.582 140.558L242.552 138.844ZM241.078 137.657L255.993 100.998L254.14 100.244L239.225 136.903L241.078 137.657Z\" \nfill=\"var(--border-silhouette-color)\" vector-effect=\"non-scaling-stroke\" mask=\"url(#path-1-outside-1_133_32856)\"/>\n\n      </g>\n    `;\n  } else {\n    return [];\n  }\n\n  // return [...shaft, circle, arrowTip];\n}\n"],"names":["ArrowStyle"],"mappings":";;AAGO,IAAK,+BAAAA,gBAAL;AACLA,cAAA,KAAA,IAAM;AACNA,cAAA,KAAA,IAAM;AAFI,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAKL,SAAS,MACd,OACA,OACA,WAAqB,SAAS,SACW;AACzC,QAAM,YACJ,aAAa,SAAS,WAClB,+CACA;AAEN,MAAI,UAAU,OAAgB;AAC5B,WAAO;AAAA,6BACkB,KAAK;AAAA;AAAA;AAAA,QAG1B,SAAS;AAAA;AAAA;AAAA,EAGf,WAAW,UAAU,OAAgB;AACnC,WAAO;AAAA,6BACkB,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMxB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjB,OAAO;AACL,WAAO,CAAA;AAAA,EACT;AAGF;"}
+{"version":3,"file":"arrow.js","sources":["../../../src/navigation-instruments/compass/arrow.ts"],"sourcesContent":["import {SVGTemplateResult, svg} from 'lit';\nimport {Priority} from '../types.js';\n\nexport enum ArrowStyle {\n  HDG = 'HDG',\n  COG = 'COG',\n}\n\nexport function arrow(\n  style: ArrowStyle,\n  angle: number,\n  priority: Priority = Priority.regular,\n  radiusOffset = 0\n): SVGTemplateResult | SVGTemplateResult[] {\n  const colorName =\n    priority === Priority.enhanced\n      ? 'var(--instrument-enhanced-secondary-color)'\n      : 'var(--instrument-regular-secondary-color)';\n\n  if (style === ArrowStyle.HDG) {\n    return svg`\n      <g transform=\"rotate(${angle}) translate(-256, ${-256 - radiusOffset})\">\n\n<path d=\"M254.654 100.32C255.219 99.1903 256.906 99.2277 257.396 100.433L272.312 137.092L272.388 137.301C273.067 139.455 270.647 141.314 268.676 140.13V140.129L256 132.582L243.323 140.129L243.324 140.13C241.289 141.352 238.777 139.332 239.688 137.092L254.604 100.433L254.654 100.32Z\"\n fill=${colorName} stroke=\"var(--border-silhouette-color)\" stroke-width=\"1\" vector-effect=\"non-scaling-stroke\"/>\n      </g>\n    `;\n  } else if (style === ArrowStyle.COG) {\n    return svg`\n      <g transform=\"rotate(${angle}) translate(-256, ${-256 - radiusOffset})\">\n<mask id=\"path-1-outside-1_133_32856\" maskUnits=\"userSpaceOnUse\" x=\"238\" y=\"99\" width=\"36\" height=\"42\" fill=\"black\">\n<rect fill=\"white\" x=\"238\" y=\"99\" width=\"36\" height=\"42\"/>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" vector-effect=\"non-scaling-stroke\" d=\"M256 127.334L265.867 133.192L256 108.941L246.133 133.192L256 127.334ZM255.067 100.621C255.404 99.7929 256.596 99.7929 256.933 100.621L271.849 137.28C272.567 139.046 270.584 140.693 268.933 139.701L256 132L243.067 139.701C241.416 140.693 239.433 139.046 240.151 137.28L255.067 100.621Z\"/>\n</mask>\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M256 127.334L265.867 133.192L256 108.941L246.133 133.192L256 127.334ZM255.067 100.621C255.404 99.7929 256.596 99.7929 256.933 100.621L271.849 137.28C272.567 139.046 270.584 140.693 268.933 139.701L256 132L243.067 139.701C241.416 140.693 239.433 139.046 240.151 137.28L255.067 100.621Z\"\n   fill=${colorName} />\n<path d=\"M256 127.334L256.511 126.474L256 126.171L255.489 126.474L256 127.334ZM265.867 133.192L265.357 134.052L267.914 135.571L266.793 132.816L265.867 133.192ZM256 108.941L256.926 108.564L256 106.288L255.074 108.564L256 108.941ZM246.133 133.192L245.207 132.816L244.086 135.571L246.643 134.052L246.133 133.192ZM255.067 100.621L254.14 100.244L255.067 100.621ZM256.933 100.621L257.86 100.244L256.933 100.621ZM271.849 137.28L270.922 137.657L271.849 137.28ZM268.933 139.701L269.448 138.844L269.445 138.842L268.933 139.701ZM256 132L256.512 131.141L256 130.836L255.488 131.141L256 132ZM243.067 139.701L242.555 138.842L242.552 138.844L243.067 139.701ZM240.151 137.28L241.078 137.657L240.151 137.28ZM255.489 128.193L265.357 134.052L266.378 132.333L256.511 126.474L255.489 128.193ZM266.793 132.816L256.926 108.564L255.074 109.318L264.941 133.569L266.793 132.816ZM255.074 108.564L245.207 132.816L247.059 133.569L256.926 109.318L255.074 108.564ZM246.643 134.052L256.511 128.193L255.489 126.474L245.622 132.333L246.643 134.052ZM255.993 100.998C255.994 100.994 255.996 100.992 255.996 100.992C255.996 100.992 255.995 100.993 255.994 100.994C255.991 100.997 255.988 101 255.986 101.002C255.984 101.003 255.984 101.002 255.987 101.002C255.99 101.001 255.994 101 256 101C256.006 101 256.01 101.001 256.013 101.002C256.016 101.002 256.016 101.003 256.014 101.002C256.012 101 256.009 100.997 256.006 100.994C256.005 100.993 256.004 100.992 256.004 100.992C256.004 100.992 256.006 100.994 256.007 100.998L257.86 100.244C257.185 98.5852 254.815 98.5852 254.14 100.244L255.993 100.998ZM256.007 100.998L270.922 137.657L272.775 136.903L257.86 100.244L256.007 100.998ZM270.922 137.657C271.255 138.473 270.33 139.373 269.448 138.844L268.418 140.558C270.838 142.012 273.879 139.618 272.775 136.903L270.922 137.657ZM269.445 138.842L256.512 131.141L255.488 132.859L268.422 140.56L269.445 138.842ZM255.488 131.141L242.555 138.842L243.578 140.56L256.512 132.859L255.488 131.141ZM242.552 138.844C241.67 139.373 240.745 138.473 241.078 137.657L239.225 136.903C238.121 139.618 241.162 142.012 243.582 140.558L242.552 138.844ZM241.078 137.657L255.993 100.998L254.14 100.244L239.225 136.903L241.078 137.657Z\" \nfill=\"var(--border-silhouette-color)\" vector-effect=\"non-scaling-stroke\" mask=\"url(#path-1-outside-1_133_32856)\"/>\n\n      </g>\n    `;\n  } else {\n    return [];\n  }\n\n  // return [...shaft, circle, arrowTip];\n}\n"],"names":["ArrowStyle"],"mappings":";;AAGO,IAAK,+BAAAA,gBAAL;AACLA,cAAA,KAAA,IAAM;AACNA,cAAA,KAAA,IAAM;AAFI,SAAAA;AAAA,GAAA,cAAA,CAAA,CAAA;AAKL,SAAS,MACd,OACA,OACA,WAAqB,SAAS,SAC9B,eAAe,GAC0B;AACzC,QAAM,YACJ,aAAa,SAAS,WAClB,+CACA;AAEN,MAAI,UAAU,OAAgB;AAC5B,WAAO;AAAA,6BACkB,KAAK,qBAAqB,OAAO,YAAY;AAAA;AAAA;AAAA,QAGlE,SAAS;AAAA;AAAA;AAAA,EAGf,WAAW,UAAU,OAAgB;AACnC,WAAO;AAAA,6BACkB,KAAK,qBAAqB,OAAO,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMhE,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjB,OAAO;AACL,WAAO,CAAA;AAAA,EACT;AAGF;"}

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

@@ -1,8 +1,9 @@
 import { LitElement, PropertyValues } from 'lit';
 import { AngleAdvice } from '../watch/advice.js';
-import { VesselImage } from '../watch/watch.js';
+import { VesselImage, RotType, RotPosition } from '../watch/watch.js';
 import { InstrumentState, Priority } from '../types.js';
 import '../watch/watch.js';
+export { RotType };
 export declare enum CompassDirection {
     NorthUp = "northUp",
     HeadingUp = "headingUp",
@@ -37,7 +38,10 @@ export declare enum CompassPriorityElement {
  * - **Advice zones**: Pass `headingAdvices` to render caution/alert arcs;
  *   triggered state is derived from whether the current heading falls
  *   inside the advice range.
- * - **Rate of turn**: Animated ROT dot driven by `rotationsPerMinute`.
+ * - **Rate of turn**: Animated ROT indicator driven by `rotationsPerMinute`.
+ *   Supports spinning dots (`rotType="dots"`) and a banana-shaped arc bar
+ *   (`rotType="bar"`) showing the HDG→COG span. Position on the outer
+ *   scale ring or inner circle via `rotPosition`.
  * - **Environmental overlays**: Wind speed/direction and current
  *   speed/direction indicators on the watch face.
  * - **Vessel image**: Configurable vessel silhouette centered on the
@@ -84,6 +88,8 @@ export declare enum CompassPriorityElement {
  * @property {number | null} currentFromDirection - The direction the current is coming from in degrees.
  * @property {VesselImage} vesselImage - The image of the vessel.
  * @property {number} rotationsPerMinute - The number of rotations per minute for the rate of turn controller.
+ * @property {RotType} rotType - ROT display mode: `'dots'` (spinning dots, default) or `'bar'` (arc bar from HDG to COG).
+ * @property {RotPosition} rotPosition - ROT track position: `'innerCircle'` (default) or `'scale'` (on the outer ring).
  * @property {Priority} priority - Color priority: `Priority.enhanced` uses the blue/enhanced color palette, `Priority.regular` (default) uses the standard palette.
  *
  * @ignition-base-height: 512px
@@ -108,6 +114,10 @@ export declare class ObcCompass extends LitElement {
     currentFromDirection: number | null;
     vesselImage: VesselImage;
     rotationsPerMinute: number;
+    rotType: RotType;
+    rotPosition: RotPosition;
+    rotMaxValue: number;
+    rotArcExtent: number;
     direction: CompassDirection;
     state: InstrumentState;
     priority: Priority;
@@ -116,13 +126,9 @@ export declare class ObcCompass extends LitElement {
     showLabels: boolean;
     /** When true, labels and north arrow are placed inside the outer ring. */
     tickmarksInside: boolean;
-    protected updated(_changedProperties: PropertyValues): void;
     private _headingSp;
     willUpdate(changed: PropertyValues): void;
     disconnectedCallback(): void;
-    private rot;
-    private rateOfTurnController?;
-    firstUpdated(): void;
     private _resizeController;
     private getPadding;
     private get angleAdviceRaw();

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

@@ -1 +1 @@
-{"version":3,"file":"compass.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass/compass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAY,MAAM,KAAK,CAAC;AAE1D,OAAO,mBAAmB,CAAC;AAG3B,OAAO,EAAc,WAAW,EAAiB,MAAM,oBAAoB,CAAC;AAE5E,OAAO,EAAC,WAAW,EAAmC,MAAM,mBAAmB,CAAC;AAKhF,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AAEtD,oBAAY,gBAAgB;IAC1B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;CACtB;AAED,oBAAY,sBAAsB;IAChC,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,OAAO,YAAY;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyEG;AACH,qBACa,UAAW,SAAQ,UAAU;IACd,OAAO,SAAK;IACZ,gBAAgB,SAAK;IAErB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAQ;IACtC,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,iBAAiB,EAAE,OAAO,CAAS;IACpC,6BAA6B,EAAE,MAAM,CAAO;IAC3C,uBAAuB,EAAE,OAAO,CAAS;IACvB,qBAAqB,EAAE,OAAO,CACpE;IACmB,6BAA6B,EAAE,MAAM,CAAK;IACzC,eAAe,EAAE,OAAO,CAAS;IACjC,QAAQ,EAAE,OAAO,CAAS;IACV,cAAc,EAAE,WAAW,EAAE,CAAM;IACpD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAChC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAQ;IACxC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IACnC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC3C,WAAW,EAAE,WAAW,CAA0B;IAClD,kBAAkB,EAAE,MAAM,CAAK;IAC/B,SAAS,EAAE,gBAAgB,CAC1B;IACD,KAAK,EAAE,eAAe,CAA0B;IAChD,QAAQ,EAAE,QAAQ,CAAoB;IAEhE,gBAAgB,EAAE,sBAAsB,EAAE,CAAgC;IAC1E,gDAAgD;IACrB,UAAU,EAAE,OAAO,CAAS;IACvD,0EAA0E;IAC/C,eAAe,EAAE,OAAO,CAAS;cAEzC,OAAO,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAUpE,OAAO,CAAC,UAAU,CAGf;IAEM,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAezC,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,GAAG,CAAe;IAE1B,OAAO,CAAC,oBAAoB,CAAC,CAAuB;IAE3C,YAAY;IAUrB,OAAO,CAAC,iBAAiB,CAAkC;IAE3D,OAAO,CAAC,UAAU;IAclB,OAAO,KAAK,cAAc,GAUzB;IAED,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,WAAW;IAWV,MAAM;IAiEf,OAAgB,MAAM,0BAwBpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"compass.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass/compass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAY,MAAM,KAAK,CAAC;AAE1D,OAAO,mBAAmB,CAAC;AAG3B,OAAO,EAAc,WAAW,EAAiB,MAAM,oBAAoB,CAAC;AAE5E,OAAO,EACL,WAAW,EAGX,OAAO,EACP,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AACtD,OAAO,EAAC,OAAO,EAAC,CAAC;AAEjB,oBAAY,gBAAgB;IAC1B,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,QAAQ,aAAa;CACtB;AAED,oBAAY,sBAAsB;IAChC,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,OAAO,YAAY;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8EG;AACH,qBACa,UAAW,SAAQ,UAAU;IACd,OAAO,SAAK;IACZ,gBAAgB,SAAK;IAErB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAQ;IACtC,kBAAkB,EAAE,MAAM,GAAG,SAAS,CAAC;IACtC,iBAAiB,EAAE,OAAO,CAAS;IACpC,6BAA6B,EAAE,MAAM,CAAO;IAC3C,uBAAuB,EAAE,OAAO,CAAS;IACvB,qBAAqB,EAAE,OAAO,CACpE;IACmB,6BAA6B,EAAE,MAAM,CAAK;IACzC,eAAe,EAAE,OAAO,CAAS;IACjC,QAAQ,EAAE,OAAO,CAAS;IACV,cAAc,EAAE,WAAW,EAAE,CAAM;IACpD,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAChC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAQ;IACxC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IACnC,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAQ;IAC3C,WAAW,EAAE,WAAW,CAA0B;IAClD,kBAAkB,EAAE,MAAM,CAAK;IAC/B,OAAO,EAAE,OAAO,CAAgB;IAChC,WAAW,EAAE,WAAW,CAA2B;IACnD,WAAW,EAAE,MAAM,CAAM;IACzB,YAAY,EAAE,MAAM,CAAM;IAC1B,SAAS,EAAE,gBAAgB,CAC1B;IACD,KAAK,EAAE,eAAe,CAA0B;IAChD,QAAQ,EAAE,QAAQ,CAAoB;IAEhE,gBAAgB,EAAE,sBAAsB,EAAE,CAAgC;IAC1E,gDAAgD;IACrB,UAAU,EAAE,OAAO,CAAS;IACvD,0EAA0E;IAC/C,eAAe,EAAE,OAAO,CAAS;IAE5D,OAAO,CAAC,UAAU,CAGf;IAEM,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IAezC,oBAAoB,IAAI,IAAI;IAOrC,OAAO,CAAC,iBAAiB,CAAkC;IAE3D,OAAO,CAAC,UAAU;IAclB,OAAO,KAAK,cAAc,GAUzB;IAED,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,QAAQ;IAMhB,OAAO,CAAC,WAAW;IAWV,MAAM;IAyEf,OAAgB,MAAM,0BAwBpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

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

@@ -1,16 +1,15 @@
 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 { TickmarkType } from "../watch/tickmark.js";
 import { arrow, ArrowStyle } from "./arrow.js";
 import { AdviceState } from "../watch/advice.js";
 import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 import { SetpointBundle } from "../../svghelpers/setpoint-bundle.js";
-import { rot } from "./rot.js";
-import { RateOfTurnController } from "../rate-of-turn/rate-of-turn.controller.js";
 import { customElement } from "../../decorator.js";
 import { InstrumentState, Priority } from "../types.js";
 import { VesselImage, VesselImageSize } from "../watch/vessel.js";
+import { RotType, RotPosition } from "../rate-of-turn/rot-renderer.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -55,6 +54,10 @@ let ObcCompass = class extends LitElement {
     this.currentFromDirection = null;
     this.vesselImage = VesselImage.genericTop;
     this.rotationsPerMinute = 1;
+    this.rotType = RotType.dots;
+    this.rotPosition = RotPosition.innerCircle;
+    this.rotMaxValue = 10;
+    this.rotArcExtent = 60;
     this.direction = "northUp";
     this.state = InstrumentState.active;
     this.priority = Priority.regular;
@@ -70,12 +73,6 @@ let ObcCompass = class extends LitElement {
     });
     this._resizeController = new ResizeController(this, {});
   }
-  updated(_changedProperties) {
-    super.updated(_changedProperties);
-    if (_changedProperties.has("rotationsPerMinute") && this.rateOfTurnController) {
-      this.rateOfTurnController.rotationsPerMinute = this.rotationsPerMinute;
-    }
-  }
   willUpdate(changed) {
     super.willUpdate(changed);
     this._headingSp.sync({
@@ -94,13 +91,6 @@ let ObcCompass = class extends LitElement {
     super.disconnectedCallback();
     this._headingSp.dispose();
   }
-  firstUpdated() {
-    this.rateOfTurnController = new RateOfTurnController(
-      this,
-      this.rot,
-      this.rotationsPerMinute
-    );
-  }
   getPadding() {
     const size = Math.min(this.clientHeight, this.clientWidth);
     const deltaWidth = 512 - size;
@@ -186,6 +176,15 @@ let ObcCompass = class extends LitElement {
       /* current */
     )}
           .rotation=${this.getRotation()}
+          .rotType=${this.rotType}
+          .rotPosition=${this.rotPosition}
+          .rotStartAngle=${this.heading + (this.getRotation() ?? 0)}
+          .rotEndAngle=${this.heading + this.rotationsPerMinute / (this.rotMaxValue || 1) * this.rotArcExtent + (this.getRotation() ?? 0)}
+          .rotPriority=${this.priorityFor(
+      "rot"
+      /* rot */
+    )}
+          .rotationsPerMinute=${this.rotationsPerMinute}
         >
         </obc-watch>
         <svg viewBox="${viewBox}">
@@ -205,10 +204,6 @@ let ObcCompass = class extends LitElement {
         /* cog */
       )
     )}
-          <g id="rot">${rot(this.colorFor(
-      "rot"
-      /* rot */
-    ))}</g>
         </svg>
       </div>
     `;
@@ -293,6 +288,18 @@ __decorateClass([
 __decorateClass([
   property({ type: Number })
 ], ObcCompass.prototype, "rotationsPerMinute", 2);
+__decorateClass([
+  property({ type: String })
+], ObcCompass.prototype, "rotType", 2);
+__decorateClass([
+  property({ type: String })
+], ObcCompass.prototype, "rotPosition", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompass.prototype, "rotMaxValue", 2);
+__decorateClass([
+  property({ type: Number })
+], ObcCompass.prototype, "rotArcExtent", 2);
 __decorateClass([
   property({ type: String })
 ], ObcCompass.prototype, "direction", 2);
@@ -311,15 +318,13 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], ObcCompass.prototype, "tickmarksInside", 2);
-__decorateClass([
-  query("#rot")
-], ObcCompass.prototype, "rot", 2);
 ObcCompass = __decorateClass([
   customElement("obc-compass")
 ], ObcCompass);
 export {
   CompassDirection,
   CompassPriorityElement,
-  ObcCompass
+  ObcCompass,
+  RotType
 };
 //# sourceMappingURL=compass.js.map

package/dist/navigation-instruments/compass/compass.js.map

@@ -1 +1 @@
-{"version":3,"file":"compass.js","sources":["../../../src/navigation-instruments/compass/compass.ts"],"sourcesContent":["import {LitElement, PropertyValues, css, html} from 'lit';\nimport {property, query} from 'lit/decorators.js';\nimport '../watch/watch.js';\nimport {Tickmark, TickmarkType} from '../watch/tickmark.js';\nimport {arrow, ArrowStyle} from './arrow.js';\nimport {AdviceState, AngleAdvice, AngleAdviceRaw} from '../watch/advice.js';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport {VesselImage, VesselImageSize, WatchCircleType} from '../watch/watch.js';\nimport {SetpointBundle} from '../../svghelpers/setpoint-bundle.js';\nimport {rot} from './rot.js';\nimport {RateOfTurnController} from '../rate-of-turn/rate-of-turn.controller.js';\nimport {customElement} from '../../decorator.js';\nimport {InstrumentState, Priority} from '../types.js';\n\nexport enum CompassDirection {\n  NorthUp = 'northUp',\n  HeadingUp = 'headingUp',\n  CourseUp = 'courseUp',\n}\n\nexport enum CompassPriorityElement {\n  hdg = 'hdg',\n  cog = 'cog',\n  rot = 'rot',\n  wind = 'wind',\n  current = 'current',\n}\n\n/**\n * `<obc-compass>` – Full-featured compass with HDG/COG arrows, rate-of-turn indicator, and environmental overlays.\n *\n * Renders a circular compass instrument that displays heading (HDG) and\n * course-over-ground (COG) as rotating arrows over a triple-ring watch face.\n * It supports wind and current indicators, a vessel silhouette, heading\n * setpoint with auto at-setpoint detection, advice zones, and a rate-of-turn\n * (ROT) dot indicator. The compass can be oriented north-up, heading-up, or\n * course-up.\n *\n * ## Features\n *\n * - **Direction modes**: `northUp` (default), `headingUp`, or `courseUp`\n *   via the `direction` property.\n * - **HDG / COG arrows**: Two styled arrows overlay the watch face,\n *   rotating independently.\n * - **Heading setpoint**: Optional setpoint marker with auto at-setpoint\n *   detection via `headingSetpoint`, `atHeadingSetpoint`, and deadband\n *   tuning properties.\n * - **Advice zones**: Pass `headingAdvices` to render caution/alert arcs;\n *   triggered state is derived from whether the current heading falls\n *   inside the advice range.\n * - **Rate of turn**: Animated ROT dot driven by `rotationsPerMinute`.\n * - **Environmental overlays**: Wind speed/direction and current\n *   speed/direction indicators on the watch face.\n * - **Vessel image**: Configurable vessel silhouette centered on the\n *   compass, rotating with heading.\n * - **Color priority**: Set `priority` to `Priority.enhanced` to use the\n *   blue/enhanced color palette instead of the default gray/regular palette\n *   (default: `Priority.regular`).\n *\n * ## Usage Guidelines\n *\n * - Set `heading` and `courseOverGround` to the current sensor values\n *   in degrees.\n * - Use `direction` to control the compass orientation mode.\n * - Use `headingSetpoint` to show a target heading marker.\n * - Pass `headingAdvices` as an array of `AngleAdvice` objects for\n *   caution/alert zones.\n * - Set `windSpeed` / `windFromDirection` and `currentSpeed` /\n *   `currentFromDirection` to display environmental indicators.\n *\n * ## Example\n *\n * ```html\n * <obc-compass\n *   heading=\"45\"\n *   courseOverGround=\"50\"\n *   direction=\"northUp\"\n *   headingSetpoint=\"90\"\n *   priority=\"regular\"\n *   vesselImage=\"genericTop\"\n * ></obc-compass>\n * ```\n *\n * @property {number} heading - The current heading of the vessel in degrees.\n * @property {number} courseOverGround - The current course over ground in degrees.\n * @property {number | null} headingSetpoint - The set point for the heading in degrees.\n * @property {boolean} atHeadingSetpoint - Indicates if the vessel is at the heading set point.\n * @property {boolean} autoAtHeadingSetpoint - Enables automatic at heading set point calculation.\n * @property {number} autoAtHeadingSetpointDeadband - The deadband for the heading set point in degrees.\n * @property {boolean} touching - Indicates if the compass is being touched.\n * @property {Array<AngleAdvice>} headingAdvices - An array of angle advices for the compass.\n * @property {number | null} windSpeed - The wind speed in beaufort scale number.\n * @property {number | null} windFromDirection - The direction the wind is coming from in degrees.\n * @property {number | null} currentSpeed - The current speed, number of arrows.\n * @property {number | null} currentFromDirection - The direction the current is coming from in degrees.\n * @property {VesselImage} vesselImage - The image of the vessel.\n * @property {number} rotationsPerMinute - The number of rotations per minute for the rate of turn controller.\n * @property {Priority} priority - Color priority: `Priority.enhanced` uses the blue/enhanced color palette, `Priority.regular` (default) uses the standard palette.\n *\n * @ignition-base-height: 512px\n * @ignition-base-width: 512px\n */\n@customElement('obc-compass')\nexport class ObcCompass extends LitElement {\n  @property({type: Number}) heading = 0;\n  @property({type: Number}) courseOverGround = 0;\n\n  @property({type: Number}) headingSetpoint: number | null = null;\n  @property({type: Number}) newHeadingSetpoint: number | undefined;\n  @property({type: Boolean}) atHeadingSetpoint: boolean = false;\n  @property({type: Number}) headingSetpointAtZeroDeadband: number = 0.5;\n  @property({type: Boolean}) headingSetpointOverride: boolean = false;\n  @property({type: Boolean, attribute: false}) autoAtHeadingSetpoint: boolean =\n    true;\n  @property({type: Number}) autoAtHeadingSetpointDeadband: number = 2;\n  @property({type: Boolean}) animateSetpoint: boolean = false;\n  @property({type: Boolean}) touching: boolean = false;\n  @property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];\n  @property({type: Number}) windSpeed: number | null = null;\n  @property({type: Number}) windFromDirection: number | null = null;\n  @property({type: Number}) currentSpeed: number | null = null;\n  @property({type: Number}) currentFromDirection: number | null = null;\n  @property({type: String}) vesselImage: VesselImage = VesselImage.genericTop;\n  @property({type: Number}) rotationsPerMinute: number = 1;\n  @property({type: String}) direction: CompassDirection =\n    CompassDirection.NorthUp;\n  @property({type: String}) state: InstrumentState = InstrumentState.active;\n  @property({type: String}) priority: Priority = Priority.regular;\n  @property({type: Array, attribute: false})\n  priorityElements: CompassPriorityElement[] = [CompassPriorityElement.hdg];\n  /** Show compass NSEW labels and north arrow. */\n  @property({type: Boolean}) showLabels: boolean = false;\n  /** When true, labels and north arrow are placed inside the outer ring. */\n  @property({type: Boolean}) tickmarksInside: boolean = false;\n\n  protected override updated(_changedProperties: PropertyValues): void {\n    super.updated(_changedProperties);\n    if (\n      _changedProperties.has('rotationsPerMinute') &&\n      this.rateOfTurnController\n    ) {\n      this.rateOfTurnController.rotationsPerMinute = this.rotationsPerMinute;\n    }\n  }\n\n  private _headingSp = new SetpointBundle({\n    angularWraparound: true,\n    onAnimationEnd: () => this.requestUpdate(),\n  });\n\n  override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this._headingSp.sync({\n      setpoint: this.headingSetpoint ?? undefined,\n      newSetpoint: this.newHeadingSetpoint,\n      atSetpoint: this.atHeadingSetpoint,\n      touching: this.touching,\n      autoAtSetpoint: this.autoAtHeadingSetpoint,\n      autoAtSetpointDeadband: this.autoAtHeadingSetpointDeadband,\n      setpointAtZeroDeadband: this.headingSetpointAtZeroDeadband,\n      setpointOverride: this.headingSetpointOverride,\n      animateSetpoint: this.animateSetpoint,\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._headingSp.dispose();\n  }\n\n  @query('#rot')\n  private rot!: HTMLElement;\n\n  private rateOfTurnController?: RateOfTurnController;\n\n  override firstUpdated() {\n    this.rateOfTurnController = new RateOfTurnController(\n      this,\n      this.rot,\n      this.rotationsPerMinute\n    );\n  }\n\n  // @ts-expect-error TS6133: The controller ensures that the render\n  // function is called on resize of the element\n  private _resizeController = new ResizeController(this, {});\n\n  private getPadding() {\n    const size = Math.min(this.clientHeight, this.clientWidth);\n    const deltaWidth = 512 - size;\n    const steps = deltaWidth / 128;\n    let deltaPadding;\n    if (deltaWidth > 0) {\n      deltaPadding = steps * 48;\n    } else {\n      deltaPadding = steps * 6;\n    }\n\n    return 72 + deltaPadding;\n  }\n\n  private get angleAdviceRaw(): AngleAdviceRaw[] {\n    return this.headingAdvices.map(({minAngle, maxAngle, hinted, type}) => {\n      const state =\n        this.heading >= minAngle && this.heading <= maxAngle\n          ? AdviceState.triggered\n          : hinted\n            ? AdviceState.hinted\n            : AdviceState.regular;\n      return {minAngle, maxAngle, type, state};\n    });\n  }\n\n  private priorityFor(element: CompassPriorityElement): Priority {\n    const selected = Array.isArray(this.priorityElements)\n      ? this.priorityElements\n      : [];\n    return selected.includes(element) ? this.priority : Priority.regular;\n  }\n\n  private colorFor(element: CompassPriorityElement): string | undefined {\n    return this.priorityFor(element) === Priority.enhanced\n      ? 'var(--instrument-enhanced-secondary-color)'\n      : undefined;\n  }\n\n  private getRotation(): number | undefined {\n    if (this.direction === CompassDirection.NorthUp) {\n      return undefined;\n    } else if (this.direction === CompassDirection.HeadingUp) {\n      return -this.heading;\n    } else if (this.direction === CompassDirection.CourseUp) {\n      return -this.courseOverGround;\n    }\n    return undefined;\n  }\n\n  override render() {\n    const tickmarks: Tickmark[] = [\n      {angle: 0, type: TickmarkType.main},\n      {angle: 90, type: TickmarkType.main},\n      {angle: 180, type: TickmarkType.main},\n      {angle: 270, type: TickmarkType.main},\n    ];\n\n    const padding = this.getPadding();\n    const width = (176 + padding) * 2;\n    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\n\n    return html`\n      <div class=\"container\">\n        <obc-watch\n          .touching=${this.touching}\n          .padding=${padding}\n          .advices=${this.angleAdviceRaw}\n          .tickmarks=${tickmarks}\n          .state=${this.state}\n          .watchCircleType=${WatchCircleType.triple}\n          .showLabels=${this.showLabels}\n          .tickmarksInside=${this.tickmarksInside}\n          .crosshairEnabled=${true}\n          .northArrow=${true}\n          .angleSetpoint=${this.headingSetpoint ?? undefined}\n          .newAngleSetpoint=${this.newHeadingSetpoint}\n          .atAngleSetpoint=${this._headingSp.computeAtSetpoint(this.heading)}\n          .angleSetpointAtZeroDeadband=${this.headingSetpointAtZeroDeadband}\n          .setpointOverride=${this.headingSetpointOverride}\n          .priority=${this.priority}\n          .animateSetpoint=${this.animateSetpoint}\n          .vessels=${[\n            {\n              size: VesselImageSize.medium,\n              vesselImage: this.vesselImage,\n              transform: `rotate(${this.heading}deg)`,\n            },\n          ]}\n          .wind=${this.windSpeed}\n          .windFromDirectionDeg=${this.windFromDirection}\n          .windColor=${this.colorFor(CompassPriorityElement.wind)}\n          .current=${this.currentSpeed}\n          .currentFromDirectionDeg=${this.currentFromDirection}\n          .currentColor=${this.colorFor(CompassPriorityElement.current)}\n          .rotation=${this.getRotation()}\n        >\n        </obc-watch>\n        <svg viewBox=\"${viewBox}\">\n          ${arrow(\n            ArrowStyle.HDG,\n            this.heading + (this.getRotation() ?? 0),\n            this.priorityFor(CompassPriorityElement.hdg)\n          )}\n          ${arrow(\n            ArrowStyle.COG,\n            this.courseOverGround + (this.getRotation() ?? 0),\n            this.priorityFor(CompassPriorityElement.cog)\n          )}\n          <g id=\"rot\">${rot(this.colorFor(CompassPriorityElement.rot))}</g>\n        </svg>\n      </div>\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    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-compass': ObcCompass;\n  }\n}\n"],"names":["CompassDirection","CompassPriorityElement"],"mappings":"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"}
+{"version":3,"file":"compass.js","sources":["../../../src/navigation-instruments/compass/compass.ts"],"sourcesContent":["import {LitElement, PropertyValues, css, html} from 'lit';\nimport {property} from 'lit/decorators.js';\nimport '../watch/watch.js';\nimport {Tickmark, TickmarkType} from '../watch/tickmark.js';\nimport {arrow, ArrowStyle} from './arrow.js';\nimport {AdviceState, AngleAdvice, AngleAdviceRaw} from '../watch/advice.js';\nimport {ResizeController} from '@lit-labs/observers/resize-controller.js';\nimport {\n  VesselImage,\n  VesselImageSize,\n  WatchCircleType,\n  RotType,\n  RotPosition,\n} from '../watch/watch.js';\nimport {SetpointBundle} from '../../svghelpers/setpoint-bundle.js';\nimport {customElement} from '../../decorator.js';\nimport {InstrumentState, Priority} from '../types.js';\nexport {RotType};\n\nexport enum CompassDirection {\n  NorthUp = 'northUp',\n  HeadingUp = 'headingUp',\n  CourseUp = 'courseUp',\n}\n\nexport enum CompassPriorityElement {\n  hdg = 'hdg',\n  cog = 'cog',\n  rot = 'rot',\n  wind = 'wind',\n  current = 'current',\n}\n\n/**\n * `<obc-compass>` – Full-featured compass with HDG/COG arrows, rate-of-turn indicator, and environmental overlays.\n *\n * Renders a circular compass instrument that displays heading (HDG) and\n * course-over-ground (COG) as rotating arrows over a triple-ring watch face.\n * It supports wind and current indicators, a vessel silhouette, heading\n * setpoint with auto at-setpoint detection, advice zones, and a rate-of-turn\n * (ROT) dot indicator. The compass can be oriented north-up, heading-up, or\n * course-up.\n *\n * ## Features\n *\n * - **Direction modes**: `northUp` (default), `headingUp`, or `courseUp`\n *   via the `direction` property.\n * - **HDG / COG arrows**: Two styled arrows overlay the watch face,\n *   rotating independently.\n * - **Heading setpoint**: Optional setpoint marker with auto at-setpoint\n *   detection via `headingSetpoint`, `atHeadingSetpoint`, and deadband\n *   tuning properties.\n * - **Advice zones**: Pass `headingAdvices` to render caution/alert arcs;\n *   triggered state is derived from whether the current heading falls\n *   inside the advice range.\n * - **Rate of turn**: Animated ROT indicator driven by `rotationsPerMinute`.\n *   Supports spinning dots (`rotType=\"dots\"`) and a banana-shaped arc bar\n *   (`rotType=\"bar\"`) showing the HDG→COG span. Position on the outer\n *   scale ring or inner circle via `rotPosition`.\n * - **Environmental overlays**: Wind speed/direction and current\n *   speed/direction indicators on the watch face.\n * - **Vessel image**: Configurable vessel silhouette centered on the\n *   compass, rotating with heading.\n * - **Color priority**: Set `priority` to `Priority.enhanced` to use the\n *   blue/enhanced color palette instead of the default gray/regular palette\n *   (default: `Priority.regular`).\n *\n * ## Usage Guidelines\n *\n * - Set `heading` and `courseOverGround` to the current sensor values\n *   in degrees.\n * - Use `direction` to control the compass orientation mode.\n * - Use `headingSetpoint` to show a target heading marker.\n * - Pass `headingAdvices` as an array of `AngleAdvice` objects for\n *   caution/alert zones.\n * - Set `windSpeed` / `windFromDirection` and `currentSpeed` /\n *   `currentFromDirection` to display environmental indicators.\n *\n * ## Example\n *\n * ```html\n * <obc-compass\n *   heading=\"45\"\n *   courseOverGround=\"50\"\n *   direction=\"northUp\"\n *   headingSetpoint=\"90\"\n *   priority=\"regular\"\n *   vesselImage=\"genericTop\"\n * ></obc-compass>\n * ```\n *\n * @property {number} heading - The current heading of the vessel in degrees.\n * @property {number} courseOverGround - The current course over ground in degrees.\n * @property {number | null} headingSetpoint - The set point for the heading in degrees.\n * @property {boolean} atHeadingSetpoint - Indicates if the vessel is at the heading set point.\n * @property {boolean} autoAtHeadingSetpoint - Enables automatic at heading set point calculation.\n * @property {number} autoAtHeadingSetpointDeadband - The deadband for the heading set point in degrees.\n * @property {boolean} touching - Indicates if the compass is being touched.\n * @property {Array<AngleAdvice>} headingAdvices - An array of angle advices for the compass.\n * @property {number | null} windSpeed - The wind speed in beaufort scale number.\n * @property {number | null} windFromDirection - The direction the wind is coming from in degrees.\n * @property {number | null} currentSpeed - The current speed, number of arrows.\n * @property {number | null} currentFromDirection - The direction the current is coming from in degrees.\n * @property {VesselImage} vesselImage - The image of the vessel.\n * @property {number} rotationsPerMinute - The number of rotations per minute for the rate of turn controller.\n * @property {RotType} rotType - ROT display mode: `'dots'` (spinning dots, default) or `'bar'` (arc bar from HDG to COG).\n * @property {RotPosition} rotPosition - ROT track position: `'innerCircle'` (default) or `'scale'` (on the outer ring).\n * @property {Priority} priority - Color priority: `Priority.enhanced` uses the blue/enhanced color palette, `Priority.regular` (default) uses the standard palette.\n *\n * @ignition-base-height: 512px\n * @ignition-base-width: 512px\n */\n@customElement('obc-compass')\nexport class ObcCompass extends LitElement {\n  @property({type: Number}) heading = 0;\n  @property({type: Number}) courseOverGround = 0;\n\n  @property({type: Number}) headingSetpoint: number | null = null;\n  @property({type: Number}) newHeadingSetpoint: number | undefined;\n  @property({type: Boolean}) atHeadingSetpoint: boolean = false;\n  @property({type: Number}) headingSetpointAtZeroDeadband: number = 0.5;\n  @property({type: Boolean}) headingSetpointOverride: boolean = false;\n  @property({type: Boolean, attribute: false}) autoAtHeadingSetpoint: boolean =\n    true;\n  @property({type: Number}) autoAtHeadingSetpointDeadband: number = 2;\n  @property({type: Boolean}) animateSetpoint: boolean = false;\n  @property({type: Boolean}) touching: boolean = false;\n  @property({type: Array, attribute: false}) headingAdvices: AngleAdvice[] = [];\n  @property({type: Number}) windSpeed: number | null = null;\n  @property({type: Number}) windFromDirection: number | null = null;\n  @property({type: Number}) currentSpeed: number | null = null;\n  @property({type: Number}) currentFromDirection: number | null = null;\n  @property({type: String}) vesselImage: VesselImage = VesselImage.genericTop;\n  @property({type: Number}) rotationsPerMinute: number = 1;\n  @property({type: String}) rotType: RotType = RotType.dots;\n  @property({type: String}) rotPosition: RotPosition = RotPosition.innerCircle;\n  @property({type: Number}) rotMaxValue: number = 10;\n  @property({type: Number}) rotArcExtent: number = 60;\n  @property({type: String}) direction: CompassDirection =\n    CompassDirection.NorthUp;\n  @property({type: String}) state: InstrumentState = InstrumentState.active;\n  @property({type: String}) priority: Priority = Priority.regular;\n  @property({type: Array, attribute: false})\n  priorityElements: CompassPriorityElement[] = [CompassPriorityElement.hdg];\n  /** Show compass NSEW labels and north arrow. */\n  @property({type: Boolean}) showLabels: boolean = false;\n  /** When true, labels and north arrow are placed inside the outer ring. */\n  @property({type: Boolean}) tickmarksInside: boolean = false;\n\n  private _headingSp = new SetpointBundle({\n    angularWraparound: true,\n    onAnimationEnd: () => this.requestUpdate(),\n  });\n\n  override willUpdate(changed: PropertyValues): void {\n    super.willUpdate(changed);\n    this._headingSp.sync({\n      setpoint: this.headingSetpoint ?? undefined,\n      newSetpoint: this.newHeadingSetpoint,\n      atSetpoint: this.atHeadingSetpoint,\n      touching: this.touching,\n      autoAtSetpoint: this.autoAtHeadingSetpoint,\n      autoAtSetpointDeadband: this.autoAtHeadingSetpointDeadband,\n      setpointAtZeroDeadband: this.headingSetpointAtZeroDeadband,\n      setpointOverride: this.headingSetpointOverride,\n      animateSetpoint: this.animateSetpoint,\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._headingSp.dispose();\n  }\n\n  // @ts-expect-error TS6133: The controller ensures that the render\n  // function is called on resize of the element\n  private _resizeController = new ResizeController(this, {});\n\n  private getPadding() {\n    const size = Math.min(this.clientHeight, this.clientWidth);\n    const deltaWidth = 512 - size;\n    const steps = deltaWidth / 128;\n    let deltaPadding;\n    if (deltaWidth > 0) {\n      deltaPadding = steps * 48;\n    } else {\n      deltaPadding = steps * 6;\n    }\n\n    return 72 + deltaPadding;\n  }\n\n  private get angleAdviceRaw(): AngleAdviceRaw[] {\n    return this.headingAdvices.map(({minAngle, maxAngle, hinted, type}) => {\n      const state =\n        this.heading >= minAngle && this.heading <= maxAngle\n          ? AdviceState.triggered\n          : hinted\n            ? AdviceState.hinted\n            : AdviceState.regular;\n      return {minAngle, maxAngle, type, state};\n    });\n  }\n\n  private priorityFor(element: CompassPriorityElement): Priority {\n    const selected = Array.isArray(this.priorityElements)\n      ? this.priorityElements\n      : [];\n    return selected.includes(element) ? this.priority : Priority.regular;\n  }\n\n  private colorFor(element: CompassPriorityElement): string | undefined {\n    return this.priorityFor(element) === Priority.enhanced\n      ? 'var(--instrument-enhanced-secondary-color)'\n      : undefined;\n  }\n\n  private getRotation(): number | undefined {\n    if (this.direction === CompassDirection.NorthUp) {\n      return undefined;\n    } else if (this.direction === CompassDirection.HeadingUp) {\n      return -this.heading;\n    } else if (this.direction === CompassDirection.CourseUp) {\n      return -this.courseOverGround;\n    }\n    return undefined;\n  }\n\n  override render() {\n    const tickmarks: Tickmark[] = [\n      {angle: 0, type: TickmarkType.main},\n      {angle: 90, type: TickmarkType.main},\n      {angle: 180, type: TickmarkType.main},\n      {angle: 270, type: TickmarkType.main},\n    ];\n\n    const padding = this.getPadding();\n    const width = (176 + padding) * 2;\n    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;\n\n    return html`\n      <div class=\"container\">\n        <obc-watch\n          .touching=${this.touching}\n          .padding=${padding}\n          .advices=${this.angleAdviceRaw}\n          .tickmarks=${tickmarks}\n          .state=${this.state}\n          .watchCircleType=${WatchCircleType.triple}\n          .showLabels=${this.showLabels}\n          .tickmarksInside=${this.tickmarksInside}\n          .crosshairEnabled=${true}\n          .northArrow=${true}\n          .angleSetpoint=${this.headingSetpoint ?? undefined}\n          .newAngleSetpoint=${this.newHeadingSetpoint}\n          .atAngleSetpoint=${this._headingSp.computeAtSetpoint(this.heading)}\n          .angleSetpointAtZeroDeadband=${this.headingSetpointAtZeroDeadband}\n          .setpointOverride=${this.headingSetpointOverride}\n          .priority=${this.priority}\n          .animateSetpoint=${this.animateSetpoint}\n          .vessels=${[\n            {\n              size: VesselImageSize.medium,\n              vesselImage: this.vesselImage,\n              transform: `rotate(${this.heading}deg)`,\n            },\n          ]}\n          .wind=${this.windSpeed}\n          .windFromDirectionDeg=${this.windFromDirection}\n          .windColor=${this.colorFor(CompassPriorityElement.wind)}\n          .current=${this.currentSpeed}\n          .currentFromDirectionDeg=${this.currentFromDirection}\n          .currentColor=${this.colorFor(CompassPriorityElement.current)}\n          .rotation=${this.getRotation()}\n          .rotType=${this.rotType}\n          .rotPosition=${this.rotPosition}\n          .rotStartAngle=${this.heading + (this.getRotation() ?? 0)}\n          .rotEndAngle=${this.heading +\n          (this.rotationsPerMinute / (this.rotMaxValue || 1)) *\n            this.rotArcExtent +\n          (this.getRotation() ?? 0)}\n          .rotPriority=${this.priorityFor(CompassPriorityElement.rot)}\n          .rotationsPerMinute=${this.rotationsPerMinute}\n        >\n        </obc-watch>\n        <svg viewBox=\"${viewBox}\">\n          ${arrow(\n            ArrowStyle.HDG,\n            this.heading + (this.getRotation() ?? 0),\n            this.priorityFor(CompassPriorityElement.hdg)\n          )}\n          ${arrow(\n            ArrowStyle.COG,\n            this.courseOverGround + (this.getRotation() ?? 0),\n            this.priorityFor(CompassPriorityElement.cog)\n          )}\n        </svg>\n      </div>\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    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n  `;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'obc-compass': ObcCompass;\n  }\n}\n"],"names":["CompassDirection","CompassPriorityElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBO,IAAK,qCAAAA,sBAAL;AACLA,oBAAA,SAAA,IAAU;AACVA,oBAAA,WAAA,IAAY;AACZA,oBAAA,UAAA,IAAW;AAHD,SAAAA;AAAA,GAAA,oBAAA,CAAA,CAAA;AAML,IAAK,2CAAAC,4BAAL;AACLA,0BAAA,KAAA,IAAM;AACNA,0BAAA,KAAA,IAAM;AACNA,0BAAA,KAAA,IAAM;AACNA,0BAAA,MAAA,IAAO;AACPA,0BAAA,SAAA,IAAU;AALA,SAAAA;AAAA,GAAA,0BAAA,CAAA,CAAA;AAwFL,IAAM,aAAN,cAAyB,WAAW;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA;AACqB,SAAA,UAAU;AACV,SAAA,mBAAmB;AAEnB,SAAA,kBAAiC;AAEhC,SAAA,oBAA6B;AAC9B,SAAA,gCAAwC;AACvC,SAAA,0BAAmC;AACjB,SAAA,wBAC3C;AACwB,SAAA,gCAAwC;AACvC,SAAA,kBAA2B;AAC3B,SAAA,WAAoB;AACJ,SAAA,iBAAgC,CAAA;AACjD,SAAA,YAA2B;AAC3B,SAAA,oBAAmC;AACnC,SAAA,eAA8B;AAC9B,SAAA,uBAAsC;AACtC,SAAA,cAA2B,YAAY;AACvC,SAAA,qBAA6B;AAC7B,SAAA,UAAmB,QAAQ;AAC3B,SAAA,cAA2B,YAAY;AACvC,SAAA,cAAsB;AACtB,SAAA,eAAuB;AACvB,SAAA,YACxB;AACwB,SAAA,QAAyB,gBAAgB;AACzC,SAAA,WAAqB,SAAS;AAExD,SAAA,mBAA6C;AAAA,MAAC;AAAA;AAAA,IAAA;AAEnB,SAAA,aAAsB;AAEtB,SAAA,kBAA2B;AAEtD,SAAQ,aAAa,IAAI,eAAe;AAAA,MACtC,mBAAmB;AAAA,MACnB,gBAAgB,MAAM,KAAK,cAAA;AAAA,IAAc,CAC1C;AAwBD,SAAQ,oBAAoB,IAAI,iBAAiB,MAAM,CAAA,CAAE;AAAA,EAAA;AAAA,EAtBhD,WAAW,SAA+B;AACjD,UAAM,WAAW,OAAO;AACxB,SAAK,WAAW,KAAK;AAAA,MACnB,UAAU,KAAK,mBAAmB;AAAA,MAClC,aAAa,KAAK;AAAA,MAClB,YAAY,KAAK;AAAA,MACjB,UAAU,KAAK;AAAA,MACf,gBAAgB,KAAK;AAAA,MACrB,wBAAwB,KAAK;AAAA,MAC7B,wBAAwB,KAAK;AAAA,MAC7B,kBAAkB,KAAK;AAAA,MACvB,iBAAiB,KAAK;AAAA,IAAA,CACvB;AAAA,EACH;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA;AACN,SAAK,WAAW,QAAA;AAAA,EAClB;AAAA,EAMQ,aAAa;AACnB,UAAM,OAAO,KAAK,IAAI,KAAK,cAAc,KAAK,WAAW;AACzD,UAAM,aAAa,MAAM;AACzB,UAAM,QAAQ,aAAa;AAC3B,QAAI;AACJ,QAAI,aAAa,GAAG;AAClB,qBAAe,QAAQ;AAAA,IACzB,OAAO;AACL,qBAAe,QAAQ;AAAA,IACzB;AAEA,WAAO,KAAK;AAAA,EACd;AAAA,EAEA,IAAY,iBAAmC;AAC7C,WAAO,KAAK,eAAe,IAAI,CAAC,EAAC,UAAU,UAAU,QAAQ,WAAU;AACrE,YAAM,QACJ,KAAK,WAAW,YAAY,KAAK,WAAW,WACxC,YAAY,YACZ,SACE,YAAY,SACZ,YAAY;AACpB,aAAO,EAAC,UAAU,UAAU,MAAM,MAAA;AAAA,IACpC,CAAC;AAAA,EACH;AAAA,EAEQ,YAAY,SAA2C;AAC7D,UAAM,WAAW,MAAM,QAAQ,KAAK,gBAAgB,IAChD,KAAK,mBACL,CAAA;AACJ,WAAO,SAAS,SAAS,OAAO,IAAI,KAAK,WAAW,SAAS;AAAA,EAC/D;AAAA,EAEQ,SAAS,SAAqD;AACpE,WAAO,KAAK,YAAY,OAAO,MAAM,SAAS,WAC1C,+CACA;AAAA,EACN;AAAA,EAEQ,cAAkC;AACxC,QAAI,KAAK,cAAc,WAA0B;AAC/C,aAAO;AAAA,IACT,WAAW,KAAK,cAAc,aAA4B;AACxD,aAAO,CAAC,KAAK;AAAA,IACf,WAAW,KAAK,cAAc,YAA2B;AACvD,aAAO,CAAC,KAAK;AAAA,IACf;AACA,WAAO;AAAA,EACT;AAAA,EAES,SAAS;AAChB,UAAM,YAAwB;AAAA,MAC5B,EAAC,OAAO,GAAG,MAAM,aAAa,KAAA;AAAA,MAC9B,EAAC,OAAO,IAAI,MAAM,aAAa,KAAA;AAAA,MAC/B,EAAC,OAAO,KAAK,MAAM,aAAa,KAAA;AAAA,MAChC,EAAC,OAAO,KAAK,MAAM,aAAa,KAAA;AAAA,IAAI;AAGtC,UAAM,UAAU,KAAK,WAAA;AACrB,UAAM,SAAS,MAAM,WAAW;AAChC,UAAM,UAAU,IAAI,QAAQ,CAAC,KAAK,QAAQ,CAAC,IAAI,KAAK,IAAI,KAAK;AAE7D,WAAO;AAAA;AAAA;AAAA,sBAGW,KAAK,QAAQ;AAAA,qBACd,OAAO;AAAA,qBACP,KAAK,cAAc;AAAA,uBACjB,SAAS;AAAA,mBACb,KAAK,KAAK;AAAA,6BACA,gBAAgB,MAAM;AAAA,wBAC3B,KAAK,UAAU;AAAA,6BACV,KAAK,eAAe;AAAA,8BACnB,IAAI;AAAA,wBACV,IAAI;AAAA,2BACD,KAAK,mBAAmB,MAAS;AAAA,8BAC9B,KAAK,kBAAkB;AAAA,6BACxB,KAAK,WAAW,kBAAkB,KAAK,OAAO,CAAC;AAAA,yCACnC,KAAK,6BAA6B;AAAA,8BAC7C,KAAK,uBAAuB;AAAA,sBACpC,KAAK,QAAQ;AAAA,6BACN,KAAK,eAAe;AAAA,qBAC5B;AAAA,MACT;AAAA,QACE,MAAM,gBAAgB;AAAA,QACtB,aAAa,KAAK;AAAA,QAClB,WAAW,UAAU,KAAK,OAAO;AAAA,MAAA;AAAA,IACnC,CACD;AAAA,kBACO,KAAK,SAAS;AAAA,kCACE,KAAK,iBAAiB;AAAA,uBACjC,KAAK;AAAA,MAAS;AAAA;AAAA,IAAA,CAA4B;AAAA,qBAC5C,KAAK,YAAY;AAAA,qCACD,KAAK,oBAAoB;AAAA,0BACpC,KAAK;AAAA,MAAS;AAAA;AAAA,IAAA,CAA+B;AAAA,sBACjD,KAAK,aAAa;AAAA,qBACnB,KAAK,OAAO;AAAA,yBACR,KAAK,WAAW;AAAA,2BACd,KAAK,WAAW,KAAK,YAAA,KAAiB,EAAE;AAAA,yBAC1C,KAAK,UACnB,KAAK,sBAAsB,KAAK,eAAe,KAC9C,KAAK,gBACN,KAAK,YAAA,KAAiB,EAAE;AAAA,yBACV,KAAK;AAAA,MAAY;AAAA;AAAA,IAAA,CAA2B;AAAA,gCACrC,KAAK,kBAAkB;AAAA;AAAA;AAAA,wBAG/B,OAAO;AAAA,YACnB;AAAA,MACA,WAAW;AAAA,MACX,KAAK,WAAW,KAAK,YAAA,KAAiB;AAAA,MACtC,KAAK;AAAA,QAAY;AAAA;AAAA,MAAA;AAAA,IAA0B,CAC5C;AAAA,YACC;AAAA,MACA,WAAW;AAAA,MACX,KAAK,oBAAoB,KAAK,YAAA,KAAiB;AAAA,MAC/C,KAAK;AAAA,QAAY;AAAA;AAAA,MAAA;AAAA,IAA0B,CAC5C;AAAA;AAAA;AAAA;AAAA,EAIT;AA2BF;AArNa,WA4LK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA3LC,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GADb,WACe,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAFb,WAEe,WAAA,oBAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAJb,WAIe,WAAA,mBAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GALb,WAKe,WAAA,sBAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GANd,WAMgB,WAAA,qBAAA,CAAA;AACD,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAPb,WAOe,WAAA,iCAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GARd,WAQgB,WAAA,2BAAA,CAAA;AACkB,gBAAA;AAAA,EAA5C,SAAS,EAAC,MAAM,SAAS,WAAW,OAAM;AAAA,GAThC,WASkC,WAAA,yBAAA,CAAA;AAEnB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAXb,WAWe,WAAA,iCAAA,CAAA;AACC,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAZd,WAYgB,WAAA,mBAAA,CAAA;AACA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAbd,WAagB,WAAA,YAAA,CAAA;AACgB,gBAAA;AAAA,EAA1C,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GAd9B,WAcgC,WAAA,kBAAA,CAAA;AACjB,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAfb,WAee,WAAA,aAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAhBb,WAgBe,WAAA,qBAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAjBb,WAiBe,WAAA,gBAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAlBb,WAkBe,WAAA,wBAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAnBb,WAmBe,WAAA,eAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GApBb,WAoBe,WAAA,sBAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GArBb,WAqBe,WAAA,WAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAtBb,WAsBe,WAAA,eAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAvBb,WAuBe,WAAA,eAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAxBb,WAwBe,WAAA,gBAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GAzBb,WAyBe,WAAA,aAAA,CAAA;AAEA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA3Bb,WA2Be,WAAA,SAAA,CAAA;AACA,gBAAA;AAAA,EAAzB,SAAS,EAAC,MAAM,OAAA,CAAO;AAAA,GA5Bb,WA4Be,WAAA,YAAA,CAAA;AAE1B,gBAAA;AAAA,EADC,SAAS,EAAC,MAAM,OAAO,WAAW,OAAM;AAAA,GA7B9B,WA8BX,WAAA,oBAAA,CAAA;AAE2B,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAhCd,WAgCgB,WAAA,cAAA,CAAA;AAEA,gBAAA;AAAA,EAA1B,SAAS,EAAC,MAAM,QAAA,CAAQ;AAAA,GAlCd,WAkCgB,WAAA,mBAAA,CAAA;AAlChB,aAAN,gBAAA;AAAA,EADN,cAAc,aAAa;AAAA,GACf,UAAA;"}