@oicl/openbridge-webcomponents 2.0.0-next.161 → 2.0.0-next.163

package/custom-elements.json

@@ -93140,56 +93140,54 @@
             },
             {
               "kind": "field",
-              "name": "_radiusOffset",
+              "name": "_cachedAreas",
               "type": {
-                "text": "number"
+                "text": "WatchArea[]"
               },
               "privacy": "private",
-              "default": "0"
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "_cachedViewBox",
+              "name": "_cachedTickmarks",
               "type": {
-                "text": "string"
+                "text": "Tickmark[]"
               },
               "privacy": "private",
-              "default": "''"
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "_cachedArcFrame",
+              "name": "_cachedAdvices",
               "type": {
-                "text": "ZoomToFitArcFrame | undefined"
+                "text": "AngleAdviceRaw[]"
               },
-              "privacy": "private"
+              "privacy": "private",
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "_cachedAreas",
-              "type": {
-                "text": "WatchArea[]"
-              },
+              "name": "_resizeController",
               "privacy": "private",
-              "default": "[]"
+              "default": "new ResizeController(this, {})"
             },
             {
               "kind": "field",
-              "name": "_cachedTickmarks",
+              "name": "_aspectWidth",
               "type": {
-                "text": "Tickmark[]"
+                "text": "number"
               },
               "privacy": "private",
-              "default": "[]"
+              "default": "448"
             },
             {
               "kind": "field",
-              "name": "_cachedAdvices",
+              "name": "_aspectHeight",
               "type": {
-                "text": "AngleAdviceRaw[]"
+                "text": "number"
               },
               "privacy": "private",
-              "default": "[]"
+              "default": "217.28"
             },
             {
               "kind": "method",
@@ -93221,13 +93219,25 @@
             },
             {
               "kind": "method",
-              "name": "_computeViewBox",
+              "name": "_clipBottom",
               "privacy": "private",
               "return": {
                 "type": {
-                  "text": "void"
+                  "text": "number"
                 }
-              }
+              },
+              "description": "Deepest crop the active features need, so none of them is shaved."
+            },
+            {
+              "kind": "method",
+              "name": "_buildFrame",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "RadialFrame"
+                }
+              },
+              "description": "One frame per render, feeding both layers: the shared sector box cropped\nto the arc. Zoom enlarges the arc rather than the window, so the window\nonly slides outward by the radius offset and the canvas holds still."
             },
             {
               "kind": "method",
@@ -93319,14 +93329,23 @@
               ]
             },
             {
-              "kind": "field",
+              "kind": "method",
               "name": "_readoutTopPercent",
-              "type": {
-                "text": "number"
-              },
               "privacy": "private",
-              "description": "Vertical placement of the readout as a percentage of the host height.\n\nWith `zoomToFitArc` the arc is reframed by `computeZoomToFitArcFrame`, whose\n`radiusOffset`/`viewBox` depend on the arc's *absolute* orientation (which\ncardinal axes its bounding box crosses), not just its bend. The arc itself\nis always rotated back to the top, so it stays put on screen — but a\nframe-derived offset would swing wildly as `heading` rotates the bbox around\nthe circle. So in zoom we use a fixed offset, which keeps the readout steady\nunder the (stationary) arc regardless of heading.\n\nWithout zoom the viewBox is the fixed, origin-symmetric 120° framing, so the\ngeometry is orientation-independent: place the readout halfway down the inner\nradius from the watch center toward the arc's inner edge.",
-              "readonly": true
+              "return": {
+                "type": {
+                  "text": "number"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "frame",
+                  "type": {
+                    "text": "RadialFrame"
+                  }
+                }
+              ],
+              "description": "Vertical placement of the readout as a percentage of the frame height.\n\nThe anchor sits halfway down the inner radius, below the arc's inner edge.\nZoom pushes that edge out by the radius offset, so the anchor follows it\nand the gap under the arc reads the same in both modes."
             }
           ],
           "attributes": [
@@ -115568,6 +115587,54 @@
               "privacy": "private",
               "default": "new ResizeController(this, {})"
             },
+            {
+              "kind": "field",
+              "name": "NEEDLE_INNER_RADIUS",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "-16.5",
+              "description": "Radial reach of the needle path about the watch centre, and its half\nwidth — the zoomed arc's own box stops short of the inner end."
+            },
+            {
+              "kind": "field",
+              "name": "NEEDLE_OUTER_RADIUS",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "160.65"
+            },
+            {
+              "kind": "field",
+              "name": "NEEDLE_HALF_WIDTH",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "static": true,
+              "readonly": true,
+              "default": "16.5"
+            },
+            {
+              "kind": "method",
+              "name": "_needleIncludeBox",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "radiusOffset",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "Box the zoomed frame must keep visible, in SVG units."
+            },
             {
               "kind": "field",
               "name": "_needleTransform",

package/dist/components/keyboard-numeric/keyboard-numeric.css.js

@@ -8,7 +8,6 @@ const componentStyle = css`* {
   width: fit-content;
   height: fit-content;
   min-width: var(--ui-components-keyboard-numeric-component-width-min);
-  min-height: var(--ui-components-keyboard-numeric-component-height-min);
   flex-direction: column;
   align-items: flex-start;
   border-radius: var(--ui-components-keyboard-numeric-border-radius);
@@ -132,7 +131,7 @@ obc-icon-button.calculation-button::part(visible-wrapper) {
 
 .key-button {
   flex: 1 0 0;
-  min-width: var(--ui-components-keyboard-numeric-touch-target-size);
+  min-width: var(--ui-components-keyboard-numeric-button-size-min);
   min-height: var(--ui-components-keyboard-numeric-button-size-min);
   height: var(--ui-components-keyboard-numeric-button-size-min);
 }
@@ -141,7 +140,7 @@ obc-button.key-button::part(visible-wrapper) {
   box-sizing: border-box;
   display: flex;
   flex: 1 0 0;
-  min-width: var(--ui-components-keyboard-numeric-touch-target-size);
+  min-width: var(--ui-components-keyboard-numeric-button-size-min);
   min-height: var(--ui-components-keyboard-numeric-button-size-min);
   height: 100%;
   align-items: center;

package/dist/components/keyboard-numeric/keyboard-numeric.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-numeric.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"keyboard-numeric.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -21,6 +21,13 @@ const componentStyle = css`* {
   height: 100%;
 }
 
+.container > svg {
+  /* The arc is drawn where it points and rotated into the window, so it paints
+     outside the cropped viewBox; \`transform-origin\` (set inline) keeps that
+     rotation on the compass centre. */
+  overflow: visible;
+}
+
 .container > .readout {
   left: 50%;
   width: auto;
@@ -30,17 +37,19 @@ const componentStyle = css`* {
 
 :host {
   display: block;
-  width: 100%;
-  height: 100%;
-  /* Clips the rotated overlay <svg transform="rotate(...)">, whose corners
-     swing outside the host and leak arc pixels in wide layouts (same
-     protection obc-watch has had since #994). Known trade-off: the HDG/COG
-     arrow apexes previously painted 1-2px past the host's top edge and are
-     now shaved flat at the box edge — imperceptible at normal viewing.
-     TODO(designer): if the shave is unwanted, the frame needs headroom so
-     the arrow tips fit inside the box — see "Host clipping & the arrow-apex
-     shave" in docs/agents/watch-radial-instruments.md before changing
-     (interacts with the #1021/#1049 label-reserve geometry). */
+  /* The element is the cropped canvas, not a square holding one, so the
+     aspect comes from the frame each render — the crop and the label reserve
+     both move it. 448 / 217 is the default crop's box (448 wide × 448·(1 −
+     51.5%) tall); keep in sync with \`SECTOR_CLIP_BOTTOM\` in
+     compass-sector.ts. */
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+  aspect-ratio: var(--obc-compass-sector-aspect, 448 / 217);
+
+  /* Both layers paint past their viewBox so the rotation can carry the arc in;
+     this is the edge that bounds the component. */
   overflow: hidden;
 }
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"compass-sector.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"compass-sector.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -165,17 +165,26 @@ export declare class ObcCompassSector extends LitElement {
     private _halfFOV;
     private _arcHalfExtent;
     private _scale;
-    private _radiusOffset;
-    private _cachedViewBox;
-    private _cachedArcFrame;
     private _cachedAreas;
     private _cachedTickmarks;
     private _cachedAdvices;
+    private _resizeController;
+    private _aspectWidth;
+    private _aspectHeight;
+    firstUpdated(changed: PropertyValues): void;
     willUpdate(changed: PropertyValues): void;
+    updated(changed: PropertyValues): void;
     disconnectedCallback(): void;
     private _mapAngle;
     private _buildTickmarks;
-    private _computeViewBox;
+    /** Deepest crop the active features need, so none of them is shaved. */
+    private _clipBottom;
+    /**
+     * One frame per render, feeding both layers: the shared sector box cropped
+     * to the arc. Zoom enlarges the arc rather than the window, so the window
+     * only slides outward by the radius offset and the canvas holds still.
+     */
+    private _buildFrame;
     private _renderNorthArrow;
     private _angleInRange;
     private _buildAdvices;
@@ -183,21 +192,13 @@ export declare class ObcCompassSector extends LitElement {
     private get _rotEndAngle();
     private priorityFor;
     /**
-     * Vertical placement of the readout as a percentage of the host height.
-     *
-     * With `zoomToFitArc` the arc is reframed by `computeZoomToFitArcFrame`, whose
-     * `radiusOffset`/`viewBox` depend on the arc's *absolute* orientation (which
-     * cardinal axes its bounding box crosses), not just its bend. The arc itself
-     * is always rotated back to the top, so it stays put on screen — but a
-     * frame-derived offset would swing wildly as `heading` rotates the bbox around
-     * the circle. So in zoom we use a fixed offset, which keeps the readout steady
-     * under the (stationary) arc regardless of heading.
+     * Vertical placement of the readout as a percentage of the frame height.
      *
-     * Without zoom the viewBox is the fixed, origin-symmetric 120° framing, so the
-     * geometry is orientation-independent: place the readout halfway down the inner
-     * radius from the watch center toward the arc's inner edge.
+     * The anchor sits halfway down the inner radius, below the arc's inner edge.
+     * Zoom pushes that edge out by the radius offset, so the anchor follows it
+     * and the gap under the arc reads the same in both modes.
      */
-    private get _readoutTopPercent();
+    private _readoutTopPercent;
     render(): import('lit-html').TemplateResult<1>;
     static styles: import('lit').CSSResult[];
 }

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

@@ -1 +1 @@
-{"version":3,"file":"compass-sector.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass-sector/compass-sector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,cAAc,EAAgC,MAAM,KAAK,CAAC;AAG9E,OAAO,mBAAmB,CAAC;AAS3B,OAAO,EAAc,WAAW,EAAiB,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAKL,OAAO,EACP,WAAW,EACZ,MAAM,mBAAmB,CAAC;AAS3B,OAAO,EAAC,eAAe,EAAE,QAAQ,EAAC,MAAM,aAAa,CAAC;AACtD,OAAO,EAAC,OAAO,EAAE,WAAW,EAAC,CAAC;AAE9B,oBAAY,4BAA4B;IACtC,GAAG,QAAQ;IACX,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAgCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IACpB,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,UAAQ;IAChD,6BAA6B,EAAE,MAAM,CAAK;IACzC,eAAe,EAAE,OAAO,CAAS;IACjC,QAAQ,EAAE,OAAO,CAAS;IACV,cAAc,EAAE,WAAW,EAAE,CAAM;IAEpD,MAAM,EAAE,MAAM,CAAM;IAEpB,OAAO,EAAE,OAAO,GAAG,SAAS,CAAC;IAC7B,WAAW,EAAE,WAAW,CAA2B;IACnD,0BAA0B,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/C,qBAAqB,EAAE,MAAM,CAAM;IAC7D;;;;;OAKG;IACuB,kBAAkB,EAAE,MAAM,CAAK;IAC/B,WAAW,EAAE,MAAM,CAAM;IACxB,gBAAgB,EAAE,OAAO,CAAS;IACnC,iBAAiB,EAAE,MAAM,CAAyB;IAElD,KAAK,EAAE,eAAe,CAA0B;IAChD,QAAQ,EAAE,QAAQ,CAAoB;IAEhE,gBAAgB,EAAE,4BAA4B,EAAE,CAE9C;IACyB,eAAe,EAAE,OAAO,CAAS;IACjC,YAAY,EAAE,OAAO,CAAS;IAC9B,UAAU,EAAE,OAAO,CAAS;IAC7B,KAAK,SAAS;IACd,IAAI,SAAS;IACb,cAAc,SAAK;IAE7C,OAAO,CAAC,UAAU,CAGf;IAGH,OAAO,CAAC,QAAQ,CAAM;IACtB,OAAO,CAAC,cAAc,CAAmB;IACzC,OAAO,CAAC,MAAM,CAAK;IACnB,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,cAAc,CAAM;IAC5B,OAAO,CAAC,eAAe,CAAgC;IACvD,OAAO,CAAC,YAAY,CAAmB;IACvC,OAAO,CAAC,gBAAgB,CAAkB;IAC1C,OAAO,CAAC,cAAc,CAAwB;IAErC,UAAU,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI;IA8DzC,oBAAoB,IAAI,IAAI;IASrC,OAAO,CAAC,SAAS;IAejB,OAAO,CAAC,eAAe;IAmDvB,OAAO,CAAC,eAAe;IAyBvB,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,aAAa;IAgBrB,OAAO,KAAK,sBAAsB,GAEjC;IAED,OAAO,KAAK,YAAY,GAKvB;IAED,OAAO,CAAC,WAAW;IAOnB;;;;;;;;;;;;;;OAcG;IACH,OAAO,KAAK,kBAAkB,GAU7B;IAMQ,MAAM;IAwGf,OAAgB,MAAM,4BAIpB;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
+{"version":3,"file":"compass-sector.d.ts","sourceRoot":"","sources":["../../../src/navigation-instruments/compass-sector/compass-sector.ts"],"names":[],"mappings":"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"}

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

@@ -1,5 +1,6 @@
 import { unsafeCSS, LitElement, nothing, svg, html } from "lit";
 import { property } from "lit/decorators.js";
+import { ResizeController } from "@lit-labs/observers/resize-controller.js";
 import componentStyle from "./compass-sector.css.js";
 import { WatchCircleType, innerRingRadiusFor, OUTER_RING_RADIUS } from "../watch/watch.js";
 import { centerReadoutStyles, renderCenterReadouts } from "../readout/center-readout.js";
@@ -9,11 +10,11 @@ import { TickmarkType, TickmarkStyle } from "../watch/tickmark.js";
 import { arrow, ArrowStyle } from "../compass/arrow.js";
 import { AdviceState } from "../watch/advice.js";
 import { SetpointBundle } from "../../svghelpers/setpoint-bundle.js";
-import { computeZoomToFitArcFrame } from "../../svghelpers/arc-frame.js";
+import { observeInnerBox, computeRadialFrame, measureContainerPx, estimateLabelWidthPx } from "../../svghelpers/radial-frame.js";
 import { RotPosition, ROT_ZERO_DEADBAND_DEG } from "../rate-of-turn/rot-renderer.js";
 import { RotType } from "../rate-of-turn/rot-renderer.js";
 import { customElement } from "../../decorator.js";
-import { normalizeAngle } from "../../svghelpers/math.js";
+import { degToRad, normalizeAngle } from "../../svghelpers/math.js";
 import { InstrumentState, Priority } from "../types.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -31,7 +32,12 @@ var CompassSectorPriorityElement = /* @__PURE__ */ ((CompassSectorPriorityElemen
   CompassSectorPriorityElement2["rot"] = "rot";
   return CompassSectorPriorityElement2;
 })(CompassSectorPriorityElement || {});
-const PADDING = 72;
+const BASE_PADDING = 48;
+const SECTOR_CLIP_BOTTOM = 51.5;
+const SECTOR_CLIP_BOTTOM_ROT = 50.4;
+const SECTOR_CLIP_BOTTOM_INSIDE_LABELS = 47.3;
+const SECTOR_CLIP_BOTTOM_READOUT = 44;
+const SECTOR_SIDE_MARGIN = 0;
 const WATCH_TYPE = WatchCircleType.triple;
 const INNER_RADIUS = innerRingRadiusFor(WATCH_TYPE);
 const ARC_HALF_EXTENT = 60;
@@ -87,11 +93,16 @@ let ObcCompassSector = class extends LitElement {
     this._halfFOV = 30;
     this._arcHalfExtent = ARC_HALF_EXTENT;
     this._scale = 1;
-    this._radiusOffset = 0;
-    this._cachedViewBox = "";
     this._cachedAreas = [];
     this._cachedTickmarks = [];
     this._cachedAdvices = [];
+    this._resizeController = new ResizeController(this, {});
+    this._aspectWidth = 448;
+    this._aspectHeight = 217.28;
+  }
+  firstUpdated(changed) {
+    super.firstUpdated(changed);
+    observeInnerBox(this._resizeController, this.renderRoot);
   }
   willUpdate(changed) {
     super.willUpdate(changed);
@@ -137,13 +148,19 @@ let ObcCompassSector = class extends LitElement {
           roundOutsideCut: true
         }
       ];
-      this._computeViewBox();
       this._cachedTickmarks = this._buildTickmarks();
     }
     if (arcInputsChanged || changed.has("headingAdvices")) {
       this._cachedAdvices = this._buildAdvices();
     }
   }
+  updated(changed) {
+    super.updated(changed);
+    this.style.setProperty(
+      "--obc-compass-sector-aspect",
+      `${this._aspectWidth} / ${this._aspectHeight}`
+    );
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this._headingSp.dispose();
@@ -197,25 +214,45 @@ let ObcCompassSector = class extends LitElement {
   // ---------------------------------------------------------------------------
   // ViewBox
   // ---------------------------------------------------------------------------
-  _computeViewBox() {
-    if (this.zoomToFitArc) {
-      const targetSize = (176 + PADDING) * 2;
-      const frame = computeZoomToFitArcFrame({
-        areas: this._cachedAreas,
-        outerRadius: OUTER_RING_RADIUS,
-        innerRadius: INNER_RADIUS,
-        extension: PADDING,
-        targetSize
-      });
-      this._radiusOffset = frame.radiusOffset;
-      this._cachedViewBox = frame.viewBox;
-      this._cachedArcFrame = frame;
-    } else {
-      this._radiusOffset = 0;
-      const width = (176 + PADDING) * 2;
-      this._cachedViewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
-      this._cachedArcFrame = void 0;
+  /** Deepest crop the active features need, so none of them is shaved. */
+  _clipBottom() {
+    const clips = [SECTOR_CLIP_BOTTOM];
+    if (this.rotType !== void 0 && this.rotPosition === RotPosition.innerCircle) {
+      clips.push(SECTOR_CLIP_BOTTOM_ROT);
+    }
+    if (this.tickmarksInside) {
+      clips.push(SECTOR_CLIP_BOTTOM_INSIDE_LABELS);
+    }
+    if (this.hasReadout) {
+      clips.push(SECTOR_CLIP_BOTTOM_READOUT);
     }
+    return Math.min(...clips);
+  }
+  /**
+   * One frame per render, feeding both layers: the shared sector box cropped
+   * to the arc. Zoom enlarges the arc rather than the window, so the window
+   * only slides outward by the radius offset and the canvas holds still.
+   */
+  _buildFrame() {
+    const frame = computeRadialFrame({
+      basePadding: BASE_PADDING,
+      labelWidthPx: this.tickmarksInside ? 0 : estimateLabelWidthPx(this._cachedTickmarks.map((t) => t.text)),
+      clips: { top: 0, bottom: this._clipBottom(), left: 0, right: 0 },
+      containerPx: measureContainerPx(this)
+    });
+    if (!this.zoomToFitArc) {
+      return frame;
+    }
+    const halfWidth = frame.width / 2 - SECTOR_SIDE_MARGIN;
+    const sin = Math.sin(degToRad(this._arcHalfExtent));
+    const radiusOffset = Math.max(0, halfWidth / sin - OUTER_RING_RADIUS);
+    const y = frame.y - radiusOffset;
+    return {
+      ...frame,
+      y,
+      radiusOffset,
+      viewBox: `${frame.x} ${y} ${frame.width} ${frame.height}`
+    };
   }
   // ---------------------------------------------------------------------------
   // North arrow — rendered in overlay at mapped 0° position
@@ -268,38 +305,32 @@ let ObcCompassSector = class extends LitElement {
     return selected.includes(element) ? this.priority : Priority.regular;
   }
   /**
-   * Vertical placement of the readout as a percentage of the host height.
+   * Vertical placement of the readout as a percentage of the frame height.
    *
-   * With `zoomToFitArc` the arc is reframed by `computeZoomToFitArcFrame`, whose
-   * `radiusOffset`/`viewBox` depend on the arc's *absolute* orientation (which
-   * cardinal axes its bounding box crosses), not just its bend. The arc itself
-   * is always rotated back to the top, so it stays put on screen — but a
-   * frame-derived offset would swing wildly as `heading` rotates the bbox around
-   * the circle. So in zoom we use a fixed offset, which keeps the readout steady
-   * under the (stationary) arc regardless of heading.
-   *
-   * Without zoom the viewBox is the fixed, origin-symmetric 120° framing, so the
-   * geometry is orientation-independent: place the readout halfway down the inner
-   * radius from the watch center toward the arc's inner edge.
+   * The anchor sits halfway down the inner radius, below the arc's inner edge.
+   * Zoom pushes that edge out by the radius offset, so the anchor follows it
+   * and the gap under the arc reads the same in both modes.
    */
-  get _readoutTopPercent() {
-    if (this.zoomToFitArc) {
-      return 70;
-    }
-    const [, vy, , vh] = this._cachedViewBox.split(" ").map(Number);
-    if (!vh || Number.isNaN(vy)) {
+  _readoutTopPercent(frame) {
+    if (!frame.height) {
       return 50;
     }
-    const anchorY = -INNER_RADIUS * 0.5;
-    return Math.round((anchorY - vy) / vh * 1e3) / 10;
+    const anchorY = -INNER_RADIUS * 0.5 - frame.radiusOffset;
+    return Math.round((anchorY - frame.y) / frame.height * 1e3) / 10;
   }
   // ---------------------------------------------------------------------------
   // Render
   // ---------------------------------------------------------------------------
   render() {
     const rotation = -this.heading;
-    const viewBox = this._cachedViewBox;
-    const rOff = this._radiusOffset;
+    const frame = this._buildFrame();
+    const viewBox = frame.viewBox;
+    const rOff = frame.radiusOffset;
+    const pivotX = -frame.x / frame.width * 100;
+    const pivotY = -frame.y / frame.height * 100;
+    this._aspectWidth = frame.width;
+    this._aspectHeight = frame.height;
+    const tickmarks = frame.labelsHidden ? this._cachedTickmarks.map((t) => ({ ...t, text: void 0 })) : this._cachedTickmarks;
     const mappedCOG = this._mapAngle(this.courseOverGround);
     const mappedSetpoint = this.headingSetpoint != null ? this._mapAngle(this.headingSetpoint) : void 0;
     const mappedNewSetpoint = this.newHeadingSetpoint != null ? this._mapAngle(this.newHeadingSetpoint) : void 0;
@@ -307,17 +338,15 @@ let ObcCompassSector = class extends LitElement {
       <div class="container">
         <obc-watch
           .touching=${this.touching}
-          .padding=${PADDING}
           .advices=${this._cachedAdvices}
-          .tickmarks=${this._cachedTickmarks}
+          .tickmarks=${tickmarks}
           .tickmarkStyle=${TickmarkStyle.regular}
           .tickmarksInside=${this.tickmarksInside}
           .state=${this.state}
           .watchCircleType=${WATCH_TYPE}
           .northArrow=${false}
           .areas=${this._cachedAreas}
-          .arcFrame=${this._cachedArcFrame}
-          .zoomToFitArc=${this.zoomToFitArc}
+          .arcFrame=${frame}
           .tickFadeAngle=${this._arcHalfExtent * 0.2}
           .rotation=${rotation}
           .angleSetpoint=${mappedSetpoint}
@@ -342,7 +371,11 @@ let ObcCompassSector = class extends LitElement {
           .rotationsPerMinute=${this.rotationsPerMinute}
         >
         </obc-watch>
-        <svg viewBox="${viewBox}" transform="rotate(${rotation})">
+        <svg
+          viewBox="${viewBox}"
+          transform="rotate(${rotation})"
+          style="transform-origin: ${pivotX}% ${pivotY}%"
+        >
           <g transform="rotate(${this.heading})">
             <line
               x1="0"
@@ -376,7 +409,7 @@ let ObcCompassSector = class extends LitElement {
         </svg>
         ${this.hasReadout ? html`<div
                 class="readout"
-                style="top: ${this._readoutTopPercent}%"
+                style="top: ${this._readoutTopPercent(frame)}%"
               >
                 ${renderCenterReadouts([
       {