@oicl/openbridge-webcomponents-full-bundle 2.0.0-next.102 → 2.0.0-next.103

package/src/building-blocks/instrument-radial/instrument-radial.ts

@@ -1,5 +1,6 @@
-import {css, LitElement, html, svg, nothing} from 'lit';
+import {css, LitElement, PropertyValues, html, svg, nothing} from 'lit';
 import {property} from 'lit/decorators.js';
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import {customElement} from '../../decorator.js';
 import {
   AdviceState,
@@ -12,18 +13,17 @@ import {TickmarkType} from '../../navigation-instruments/watch/tickmark.js';
 import {TickmarkStyle} from '../../navigation-instruments/watch/tickmark.js';
 import {InstrumentState, Priority} from '../../navigation-instruments/types.js';
 import {SetpointMixin} from '../../svghelpers/setpoint-mixin.js';
+import {innerRingRadiusFor} from '../../navigation-instruments/watch/watch.js';
 import {
-  OUTER_RING_RADIUS,
-  innerRingRadiusFor,
-} from '../../navigation-instruments/watch/watch.js';
-import {
-  computeZoomToFitArcFrame,
-  type ZoomToFitArcFrame,
-} from '../../svghelpers/arc-frame.js';
-
-// Must match obc-watch's un-zoomed viewBox `(176 + getPadding()) * 2`
-// (default padding 48 → 448); instrument-radial overlays obc-watch 1:1.
-const WATCH_DEFAULT_VIEWBOX = 448;
+  applyPinnedHostSize,
+  computeRadialFrame,
+  END_MAXMIN_LABEL_DROP_PX,
+  estimateLabelWidthPx,
+  measureContainerPx,
+  observeInnerBox,
+  SIDE_LABEL_DROP_PX,
+  type RadialFrame,
+} from '../../svghelpers/radial-frame.js';
 
 export enum ObcGaugeRadialType {
   filled = 'filled',
@@ -115,6 +115,9 @@ function defaultGaugeAngle(
 }
 
 /**
+ * @fires frame-changed {CustomEvent<RadialFrame>} Fired after render when the
+ *   computed radial frame changed (viewBox, label visibility, or pinned host
+ *   size). Wrappers use it to align sibling overlays/readouts with the dial.
  * @experimental
  */
 @customElement('obc-instrument-radial')
@@ -174,9 +177,54 @@ export class ObcInstrumentRadial extends SetpointMixin(LitElement) {
    */
   @property({type: Boolean}) endLabelsMaxMin: boolean = false;
   @property({type: Boolean}) zoomToFitArc: boolean = false;
+  /**
+   * Outer-ring diameter in CSS pixels. When set, the instrument renders at a
+   * fixed intrinsic size derived from the ring, arc shape and label reserve —
+   * so instruments sharing the same value have identical ring circumference
+   * regardless of label width or arc extent (like obc-donut-chart's
+   * fixedHeight). When unset (default), the instrument fills its container.
+   */
+  @property({type: Number, attribute: 'face-diameter'})
+  faceDiameter: number | undefined;
 
   private _radiusOffset = 0;
-  private _arcFrame: ZoomToFitArcFrame | undefined;
+  private _frame: RadialFrame | undefined;
+  private _lastFrameKey = '';
+
+  private _resizeController = new ResizeController(this, {});
+
+  override firstUpdated(changed: PropertyValues): void {
+    super.firstUpdated(changed);
+    observeInnerBox(this._resizeController, this.renderRoot);
+  }
+
+  /** The frame computed for the current render (viewBox, label reserve …). */
+  get frame(): RadialFrame | undefined {
+    return this._frame;
+  }
+
+  /** Whether the host size styles were set by applyPinnedHostSize. */
+  private _hostSizePinned = false;
+
+  override updated(changed: PropertyValues): void {
+    super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this._frame,
+      this._hostSizePinned
+    );
+    const frame = this._frame;
+    if (!frame) {
+      return;
+    }
+    const key = `${frame.viewBox}|${frame.labelsHidden}|${frame.hostWidthPx ?? ''}|${frame.hostHeightPx ?? ''}`;
+    if (key !== this._lastFrameKey) {
+      this._lastFrameKey = key;
+      this.dispatchEvent(
+        new CustomEvent<RadialFrame>('frame-changed', {detail: frame})
+      );
+    }
+  }
 
   private get clampedValue(): number {
     const lowerBound = Math.min(this.minValue, this.maxValue);
@@ -279,31 +327,40 @@ export class ObcInstrumentRadial extends SetpointMixin(LitElement) {
         ? WatchCircleType.single
         : WatchCircleType.double;
 
-    const clips = this.safeClips;
-    let viewBox: string;
-    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,
-      });
-      this._radiusOffset = frame.radiusOffset;
-      viewBox = frame.viewBox;
-      this._arcFrame = frame;
-    } else {
-      this._radiusOffset = 0;
-      this._arcFrame = undefined;
-      const full = WATCH_DEFAULT_VIEWBOX;
-      const w = full * (1 - clips.left / 100 - clips.right / 100);
-      const h = full * (1 - clips.top / 100 - clips.bottom / 100);
-      const left = -full / 2 + (full * clips.left) / 100;
-      const top = -full / 2 + (full * clips.top) / 100;
-      viewBox = `${left} ${top} ${w} ${h}`;
-    }
+    const tickmarks = this.tickmarks;
+    // Labels hang past the ±90° line only when a labeled tick actually sits
+    // there (e.g. the 180°/90° sector ends) — a ±60° sector like rot-sector
+    // must not reserve a drop it never uses.
+    const hasHorizontalEndLabels = tickmarks.some((t) => {
+      if (t.text === undefined) {
+        return false;
+      }
+      const angle = ((t.angle % 360) + 360) % 360;
+      return Math.abs(angle - 90) < 1 || Math.abs(angle - 270) < 1;
+    });
+    const frame = computeRadialFrame({
+      basePadding: 48,
+      labelWidthPx: this.tickmarksInside
+        ? 0
+        : estimateLabelWidthPx(tickmarks.map((t) => t.text)),
+      labelDropPx:
+        this.tickmarksInside || !hasHorizontalEndLabels
+          ? 0
+          : this.endLabelsMaxMin
+            ? END_MAXMIN_LABEL_DROP_PX
+            : SIDE_LABEL_DROP_PX,
+      clips: this.zoomToFitArc ? undefined : this.safeClips,
+      containerPx: measureContainerPx(this),
+      faceDiameter: this.faceDiameter,
+      zoomToFitArc: this.zoomToFitArc,
+      areas,
+      innerRadius: innerRingRadiusFor(watchCircleType),
+    });
+    this._radiusOffset = frame.radiusOffset;
+    this._frame = frame;
+    const shownTickmarks = frame.labelsHidden
+      ? tickmarks.map((t) => ({...t, text: undefined}))
+      : tickmarks;
 
     return html`
       <div class="container">
@@ -316,23 +373,17 @@ export class ObcInstrumentRadial extends SetpointMixin(LitElement) {
           .angleSetpointAtZeroDeadband=${this.setpointAtZeroDeadband}
           .setpointOverride=${this.setpointOverride}
           .animateSetpoint=${this.animateSetpoint}
-          .padding=${48}
-          .tickmarks=${this.tickmarks}
+          .tickmarks=${shownTickmarks}
           .tickmarksInside=${this.tickmarksInside}
           .tickmarkStyle=${this.tickmarkStyle}
           .advices=${this._advices}
           .areas=${areas}
           .watchCircleType=${watchCircleType}
           .barAreas=${barAreas}
-          .clipTop=${this.zoomToFitArc ? 0 : clips.top}
-          .clipBottom=${this.zoomToFitArc ? 0 : clips.bottom}
-          .clipLeft=${this.zoomToFitArc ? 0 : clips.left}
-          .clipRight=${this.zoomToFitArc ? 0 : clips.right}
           .endLabelsMaxMin=${this.endLabelsMaxMin}
-          .zoomToFitArc=${this.zoomToFitArc}
-          .arcFrame=${this._arcFrame}
+          .arcFrame=${frame}
         ></obc-watch>
-        <svg class="gauge-radial" viewBox=${viewBox}>${this._needle}</svg>
+        <svg class="gauge-radial" viewBox=${frame.viewBox}>${this._needle}</svg>
       </div>
     `;
   }

package/src/navigation-instruments/azimuth-thruster/azimuth-thruster.stories.ts

@@ -2,7 +2,13 @@ import type {Meta, StoryObj} from '@storybook/web-components-vite';
 import {ObcAzimuthThruster} from './azimuth-thruster.js';
 import './azimuth-thruster.js';
 import {InstrumentState, Priority, Size} from '../types.js';
-import {widthDecorator} from '../../storybook-util.js';
+import {html} from 'lit';
+import {
+  playgroundColumn,
+  resizableStoryBox,
+  storyHint,
+  widthDecorator,
+} from '../../storybook-util.js';
 import {AdviceType} from '../watch/advice.js';
 import {TickmarkStyle} from '../watch/tickmark.js';
 import {PropellerType} from '../thruster/propeller.js';
@@ -12,6 +18,11 @@ const meta: Meta<typeof ObcAzimuthThruster> = {
   tags: ['autodocs', '6.0'],
   component: 'obc-azimuth-thruster',
   argTypes: {
+    faceDiameter: {
+      control: {type: 'range', min: 100, max: 600, step: 10},
+      description:
+        'Pins the outer-ring diameter in px (fixed intrinsic size, equal circumference across instruments). Clear to return to fill-the-container sizing.',
+    },
     thrust: {control: {type: 'range', min: -100, max: 100, step: 1}},
     thrustSetpoint: {control: {type: 'range', min: -100, max: 100, step: 1}},
     angle: {control: {type: 'range', min: -180, max: 180, step: 1}},
@@ -256,3 +267,69 @@ export const OffWithAngleSetpointOverride: Story = {
     priority: Priority.enhanced,
   },
 };
+
+type SizingPlaygroundArgs = Partial<ObcAzimuthThruster> & {
+  lockFaceDiameter?: boolean;
+};
+
+/**
+ * Interactive sizing playground: drag the dashed box's bottom-right corner to
+ * resize it. The first thruster is pinned to a fixed intrinsic size by the
+ * `faceDiameter` control, while the second adapts to the remaining flex
+ * space, reserving room for its degree labels adaptively (issue #1021).
+ * Enable `lockFaceDiameter` to pin both to the same circumference. Related:
+ * *Sizing Playground* stories under Building Blocks/Watch, Building
+ * Blocks/Instrument Radial and Instruments/Gauge Radial.
+ */
+export const SizingPlayground: StoryObj<SizingPlaygroundArgs> = {
+  name: 'Sizing Playground — FaceDiameter + Resizable (Manual)',
+  tags: ['skip-test'],
+  parameters: {widthDecorator: false},
+  args: {
+    faceDiameter: 240,
+    lockFaceDiameter: false,
+  },
+  argTypes: {
+    lockFaceDiameter: {
+      control: 'boolean',
+      description:
+        'Apply faceDiameter to every instance (equal circumference) instead of only the first.',
+    },
+  },
+  render: (args) => {
+    const instances = [
+      {label: 'thruster A', angle: 45, thrust: 60},
+      {label: 'thruster B', angle: -120, thrust: 35},
+    ];
+    const fd = (index: number) =>
+      index === 0 || args.lockFaceDiameter ? args.faceDiameter : undefined;
+    const caption = (index: number, label: string) =>
+      fd(index) !== undefined
+        ? `${label} — pinned ${fd(index)}px`
+        : `${label} — adaptive (flex)`;
+    return html`
+      ${storyHint(
+        'Drag the bottom-right corner of the dashed box to resize it. The first thruster is pinned by the faceDiameter control; the second adapts to the remaining flex space. Enable lockFaceDiameter to pin both to the same circumference.'
+      )}
+      ${resizableStoryBox(
+        html`
+          ${instances.map((g, index) =>
+            playgroundColumn(
+              caption(index, g.label),
+              html`
+                <obc-azimuth-thruster
+                  .angle=${g.angle}
+                  .thrust=${g.thrust}
+                  .showLabels=${true}
+                  .faceDiameter=${fd(index)}
+                ></obc-azimuth-thruster>
+              `,
+              {pinned: fd(index) !== undefined}
+            )
+          )}
+        `,
+        {width: 680, height: 400}
+      )}
+    `;
+  },
+};

package/src/navigation-instruments/azimuth-thruster/azimuth-thruster.ts

@@ -1,12 +1,20 @@
 import {html, LitElement, unsafeCSS} from 'lit';
 import {property} from 'lit/decorators.js';
 import type {PropertyValues} from 'lit';
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
+import {
+  applyPinnedHostSize,
+  computeRadialFrame,
+  estimateLabelWidthPx,
+  measureContainerPx,
+  observeInnerBox,
+  type RadialFrame,
+} from '../../svghelpers/radial-frame.js';
 import {InstrumentState, Priority} from '../types.js';
 import {SetpointBundle} from '../../svghelpers/setpoint-bundle.js';
 import {thruster} from '../thruster/thruster.js';
 import '../watch/watch.js';
 import componentStyle from './azimuth-thruster.css?inline';
-import {ifDefined} from 'lit/directives/if-defined.js';
 import {AdviceState, AngleAdvice, AngleAdviceRaw} from '../watch/advice.js';
 import {Tickmark, TickmarkStyle, TickmarkType} from '../watch/tickmark.js';
 import {LinearAdvice} from '../thruster/advice.js';
@@ -134,6 +142,36 @@ export class ObcAzimuthThruster extends LitElement {
   @property({type: String}) tickmarkStyle: TickmarkStyle =
     TickmarkStyle.regular;
   @property({type: Boolean}) starboardPortIndicator: boolean = false;
+  /**
+   * Outer-ring diameter in CSS pixels. When set, the instrument renders at a
+   * fixed intrinsic size derived from the ring, arc shape and label reserve —
+   * so instruments sharing the same value have identical ring circumference
+   * regardless of label width or arc extent (like obc-donut-chart's
+   * fixedHeight). When unset (default), the instrument fills its container.
+   */
+  @property({type: Number, attribute: 'face-diameter'})
+  faceDiameter: number | undefined;
+
+  private _frame: RadialFrame | undefined;
+
+  /** Whether the host size styles were set by applyPinnedHostSize. */
+  private _hostSizePinned = false;
+
+  private _resizeController = new ResizeController(this, {});
+
+  override firstUpdated(changed: PropertyValues): void {
+    super.firstUpdated(changed);
+    observeInnerBox(this._resizeController, this.renderRoot);
+  }
+
+  override updated(changed: PropertyValues): void {
+    super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this._frame,
+      this._hostSizePinned
+    );
+  }
 
   private get angleAdviceRaw(): AngleAdviceRaw[] {
     return this.angleAdvices.map((advice) => {
@@ -236,20 +274,27 @@ export class ObcAzimuthThruster extends LitElement {
 
     const tickmarks = this.getTickmarks();
 
-    let viewBox: string;
-    if (!this.hasLabelSpacer) {
-      viewBox = '-192 -192 384 384';
-    } else if (this.showLabels && !this.tickmarksInside) {
-      viewBox = '-236 -236 472 472';
-    } else {
-      viewBox = '-200 -200 400 400';
-    }
+    const frame = computeRadialFrame({
+      basePadding: this.hasLabelSpacer ? 24 : 16,
+      labelWidthPx:
+        this.hasLabelSpacer && !this.tickmarksInside
+          ? estimateLabelWidthPx(tickmarks.map((t) => t.text))
+          : 0,
+      containerPx: measureContainerPx(this),
+      faceDiameter: this.faceDiameter,
+    });
+    this._frame = frame;
+    const shownTickmarks = frame.labelsHidden
+      ? tickmarks.map((t) => ({...t, text: undefined}))
+      : tickmarks;
+    const viewBox = frame.viewBox;
 
     return html`
       <div class="container">
         <obc-watch
           .touching=${this.touching}
-          .tickmarks=${tickmarks}
+          .arcFrame=${frame}
+          .tickmarks=${shownTickmarks}
           .state=${this.state}
           .priority=${this.priority}
           .angleSetpoint=${this.angleSetpoint}
@@ -260,7 +305,6 @@ export class ObcAzimuthThruster extends LitElement {
           .animateSetpoint=${this.animateSetpoint}
           .tickmarksInside=${this.tickmarksInside}
           .tickmarkStyle=${this.tickmarkStyle}
-          padding=${ifDefined(!this.hasLabelSpacer ? 16 : undefined)}
           .advices=${this.angleAdviceRaw}
           .starboardPortIndicator=${this.starboardPortIndicator}
         ></obc-watch>

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

@@ -6,7 +6,13 @@ import {
   RotType,
 } from './compass.js';
 import './compass.js';
-import {widthDecorator} from '../../storybook-util.js';
+import {html} from 'lit';
+import {
+  playgroundColumn,
+  resizableStoryBox,
+  storyHint,
+  widthDecorator,
+} from '../../storybook-util.js';
 import {AdviceType} from '../watch/advice.js';
 import {VesselImage} from '../watch/watch.js';
 import {topVessels} from '../watch/vessels/storybook-helper.js';
@@ -48,6 +54,11 @@ const meta: Meta<typeof ObcCompass> = {
   },
   argTypes: {
     width: {control: {type: 'range', min: 32, max: 1028, step: 1}},
+    faceDiameter: {
+      control: {type: 'range', min: 100, max: 600, step: 10},
+      description:
+        'Pins the outer-ring diameter in px (fixed intrinsic size, equal circumference across instruments). Clear to return to fill-the-container sizing.',
+    },
     heading: {control: {type: 'range', min: 0, max: 360, step: 1}},
     courseOverGround: {control: {type: 'range', min: 0, max: 360, step: 1}},
     headingSetpoint: {control: {type: 'range', min: 0, max: 360, step: 1}},
@@ -171,3 +182,79 @@ export const WithRateOfTurnDegreesPerMinute: Story = {
     priorityElements: [CompassPriorityElement.hdg, CompassPriorityElement.rot],
   },
 };
+
+export const SmallContainer: Story = {
+  name: 'Small Container (250px, Labels + Decor Reserve)',
+  args: {
+    width: 250,
+  },
+};
+
+type SizingPlaygroundArgs = Partial<ObcCompass> & {
+  lockFaceDiameter?: boolean;
+};
+
+/**
+ * Interactive sizing playground: drag the dashed box's bottom-right corner to
+ * resize it. The first compass is pinned to a fixed intrinsic size by the
+ * `faceDiameter` control, while the second adapts to the remaining flex
+ * space, reserving room for the NSWE labels, north arrow and wind symbols
+ * adaptively (issue #1021). Enable `lockFaceDiameter` to pin both to the same
+ * circumference. Related: *Sizing Playground* stories under Building
+ * Blocks/Watch, Building Blocks/Instrument Radial and Instruments/Gauge
+ * Radial.
+ */
+export const SizingPlayground: StoryObj<SizingPlaygroundArgs> = {
+  name: 'Sizing Playground — FaceDiameter + Resizable (Manual)',
+  tags: ['skip-test'],
+  parameters: {widthDecorator: false},
+  args: {
+    faceDiameter: 240,
+    lockFaceDiameter: false,
+  },
+  argTypes: {
+    lockFaceDiameter: {
+      control: 'boolean',
+      description:
+        'Apply faceDiameter to every instance (equal circumference) instead of only the first.',
+    },
+  },
+  render: (args) => {
+    const instances = [
+      {label: 'compass A', heading: 311},
+      {label: 'compass B', heading: 45},
+    ];
+    const fd = (index: number) =>
+      index === 0 || args.lockFaceDiameter ? args.faceDiameter : undefined;
+    const caption = (index: number, label: string) =>
+      fd(index) !== undefined
+        ? `${label} — pinned ${fd(index)}px`
+        : `${label} — adaptive (flex)`;
+    return html`
+      ${storyHint(
+        'Drag the bottom-right corner of the dashed box to resize it. The first compass is pinned by the faceDiameter control; the second adapts to the remaining flex space. Enable lockFaceDiameter to pin both to the same circumference.'
+      )}
+      ${resizableStoryBox(
+        html`
+          ${instances.map((g, index) =>
+            playgroundColumn(
+              caption(index, g.label),
+              html`
+                <obc-compass
+                  .heading=${g.heading}
+                  .courseOverGround=${g.heading + 27}
+                  .currentWindSpeedKnots=${20}
+                  .windFromDirection=${45}
+                  .showLabels=${true}
+                  .faceDiameter=${fd(index)}
+                ></obc-compass>
+              `,
+              {pinned: fd(index) !== undefined}
+            )
+          )}
+        `,
+        {width: 680, height: 400}
+      )}
+    `;
+  },
+};

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

@@ -5,6 +5,14 @@ import {Tickmark, TickmarkType} from '../watch/tickmark.js';
 import {arrow, ArrowStyle} from './arrow.js';
 import {AdviceState, AngleAdvice, AngleAdviceRaw} from '../watch/advice.js';
 import {ResizeController} from '@lit-labs/observers/resize-controller.js';
+import {
+  applyPinnedHostSize,
+  computeRadialFrame,
+  measureContainerPx,
+  NORTH_ARROW_WIDTH_PX,
+  NSWE_LABEL_WIDTH_PX,
+  type RadialFrame,
+} from '../../svghelpers/radial-frame.js';
 import {
   VesselImage,
   VesselImageSize,
@@ -217,6 +225,15 @@ export class ObcCompass extends LitElement {
   @property({type: Boolean}) showLabels: boolean = false;
   /** When true, labels and north arrow are placed inside the outer ring. */
   @property({type: Boolean}) tickmarksInside: boolean = false;
+  /**
+   * Outer-ring diameter in CSS pixels. When set, the instrument renders at a
+   * fixed intrinsic size derived from the ring, arc shape and label reserve —
+   * so instruments sharing the same value have identical ring circumference
+   * regardless of label width or arc extent (like obc-donut-chart's
+   * fixedHeight). When unset (default), the instrument fills its container.
+   */
+  @property({type: Number, attribute: 'face-diameter'})
+  faceDiameter: number | undefined;
 
   private _headingSp = new SetpointBundle({
     angularWraparound: true,
@@ -257,18 +274,32 @@ export class ObcCompass extends LitElement {
     return this.rateOfTurnDegreesPerMinute ?? this.rotationsPerMinute;
   }
 
-  private getPadding() {
-    const size = Math.min(this.clientHeight, this.clientWidth);
-    const deltaWidth = 512 - size;
-    const steps = deltaWidth / 128;
-    let deltaPadding;
-    if (deltaWidth > 0) {
-      deltaPadding = steps * 48;
-    } else {
-      deltaPadding = steps * 6;
+  /**
+   * Pixel cost of the outside decor: the always-rendered north-arrow glyph
+   * plus, only while shown, the NSWE labels (both keep a constant on-screen
+   * size via `1/scale` terms). Feeds the frame's width-aware reserve,
+   * replacing the former empirical `72 + delta(clientSize)` padding.
+   * Wind/current symbols at their default radius are covered by the base
+   * padding of 72.
+   */
+  private getOutsideDecorPx(): number {
+    if (this.tickmarksInside) {
+      return 0;
     }
+    return NORTH_ARROW_WIDTH_PX + (this.showLabels ? NSWE_LABEL_WIDTH_PX : 0);
+  }
 
-    return 72 + deltaPadding;
+  /** Whether the host size styles were set by applyPinnedHostSize. */
+  private _hostSizePinned = false;
+  private _frame: RadialFrame | undefined;
+
+  override updated(changed: PropertyValues): void {
+    super.updated(changed);
+    this._hostSizePinned = applyPinnedHostSize(
+      this,
+      this._frame,
+      this._hostSizePinned
+    );
   }
 
   private get angleAdviceRaw(): AngleAdviceRaw[] {
@@ -315,23 +346,28 @@ export class ObcCompass extends LitElement {
       {angle: 270, type: TickmarkType.main},
     ];
 
-    const padding = this.getPadding();
-    const width = (176 + padding) * 2;
-    const viewBox = `-${width / 2} -${width / 2} ${width} ${width}`;
+    const frame = computeRadialFrame({
+      basePadding: 72,
+      labelWidthPx: this.getOutsideDecorPx(),
+      containerPx: measureContainerPx(this),
+      faceDiameter: this.faceDiameter,
+    });
+    this._frame = frame;
+    const viewBox = frame.viewBox;
 
     return html`
       <div class="container">
         <obc-watch
           .touching=${this.touching}
-          .padding=${padding}
+          .arcFrame=${frame}
           .advices=${this.angleAdviceRaw}
           .tickmarks=${tickmarks}
           .state=${this.state}
           .watchCircleType=${WatchCircleType.triple}
-          .showLabels=${this.showLabels}
+          .showLabels=${this.showLabels && !frame.labelsHidden}
           .tickmarksInside=${this.tickmarksInside}
           .crosshairEnabled=${true}
-          .northArrow=${true}
+          .northArrow=${!frame.labelsHidden}
           .angleSetpoint=${this.headingSetpoint ?? undefined}
           .newAngleSetpoint=${this.newHeadingSetpoint}
           .atAngleSetpoint=${this._headingSp.computeAtSetpoint(this.heading)}

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

@@ -31,6 +31,13 @@ export enum CompassSectorPriorityElement {
   rot = 'rot',
 }
 
+// Fixed frame padding for both the zoomed and un-zoomed paths. This component
+// deliberately keeps its bespoke FOV-compression geometry and does NOT use
+// svghelpers/radial-frame.ts: the viewBox is cached per FOV (a
+// container-size-dependent label reserve would invalidate that), and the
+// 72-unit padding covers the 3-char degree labels at typical sizes.
+// TODO(#1021): adopt computeRadialFrame if degree labels ever clip when the
+// component is shrunk far below its design size.
 const PADDING = 72;
 const WATCH_TYPE = WatchCircleType.triple;
 const INNER_RADIUS = innerRingRadiusFor(WATCH_TYPE);