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

package/dist/svghelpers/radial-frame.d.ts

@@ -0,0 +1,122 @@
+import { WatchArea } from '../navigation-instruments/watch/watch.js';
+import { ZoomToFitArcFrame } from './arc-frame.js';
+/** Approximate digit advance at 12px font-instrument-label. */
+export declare const DIGIT_WIDTH_PX = 7;
+/** Compass NSWE label width assumed by label.ts (`labelWidth = 16`). */
+export declare const NSWE_LABEL_WIDTH_PX = 16;
+/**
+ * North-arrow glyph allowance for outside-decor reserves (px). The arrow
+ * renders regardless of `showLabels`, so consumers charge this portion
+ * whenever the arrow sits outside the ring.
+ */
+export declare const NORTH_ARROW_WIDTH_PX = 16;
+/**
+ * Labels are dropped (not clipped) when their reserve would exceed this share
+ * of the box. 0.45 makes a 4-digit gauge hide labels below a ~182px container
+ * — near the canvas charts' fixed MIN_HEIGHT_WITH_LABELS = 192px threshold —
+ * while 2-digit labels survive down to ~120px. Designers may later prefer a
+ * fixed pixel threshold instead (see charthelpers/constants.ts).
+ */
+export declare const LABEL_RESERVE_MAX_FRACTION = 0.45;
+/**
+ * Pixel drop of "Max-min" end labels (`endLabelsMaxMin`) below the ±90° line:
+ * anchored at `12px/scale` with `dominant-baseline: central` (tickmark.ts),
+ * so the glyph bottom reaches ~12 + 6 + descender ≈ 20px — plus 1px pad.
+ */
+export declare const END_MAXMIN_LABEL_DROP_PX = 21;
+/**
+ * Pixel drop of regular side labels at the ±90° ends: glyph centered on the
+ * line (half-height ~6px + descender), plus pad.
+ */
+export declare const SIDE_LABEL_DROP_PX = 13;
+/** Per-edge viewBox crops in percent (0–100), matching obc-watch `clip*`. */
+export interface RadialClips {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+}
+export interface RadialFrameOptions {
+    /** Legacy padding: the frame never shrinks below `(176 + basePadding) * 2`. */
+    basePadding: number;
+    /** Max label pixel width at 12px font; 0/undefined = no outside labels. */
+    labelWidthPx?: number;
+    /** Un-zoomed viewBox crops; ignored when `zoomToFitArc` is set. */
+    clips?: RadialClips;
+    /**
+     * Pixel extent the outside labels need past the ±90° horizontal line
+     * toward a top/bottom crop edge (see END_MAXMIN_LABEL_DROP_PX /
+     * SIDE_LABEL_DROP_PX). When a `clips.top`/`clips.bottom` crop would cut
+     * into that drop, the clip is lowered so the labels stay inside the box.
+     * Absent/0 keeps the requested clips untouched (legacy geometry).
+     */
+    labelDropPx?: number;
+    /** Host client box in px; absent or zero ⇒ scale-1 fallback (first paint). */
+    containerPx?: {
+        width: number;
+        height: number;
+    };
+    /** Outer-ring diameter in px; pins scale for equal circumference (mode b). */
+    faceDiameter?: number;
+    zoomToFitArc?: boolean;
+    /** Visible arc segments; required for the zoom path. */
+    areas?: WatchArea[];
+    /** Innermost visible radius (depends on WatchCircleType); zoom path only. */
+    innerRadius?: number;
+}
+export interface RadialFrame extends ZoomToFitArcFrame {
+    /** Px per SVG unit implied by container or faceDiameter (1 when unknown). */
+    scale: number;
+    /** SVG units added beyond the base geometry for labels (0 when none/hidden). */
+    labelReserve: number;
+    /** True when the label reserve exceeded the cap; callers strip tick texts. */
+    labelsHidden: boolean;
+    /**
+     * True when `labelDropPx` lowered a top/bottom clip: the box's aspect no
+     * longer matches the requested clip fractions, so hosts with an
+     * aspect-ratio derived from those fractions must follow the frame instead.
+     */
+    clipsAdjusted: boolean;
+    /** Fixed host size in px; defined only when `faceDiameter` is set. */
+    hostWidthPx?: number;
+    /** Fixed host size in px; defined only when `faceDiameter` is set. */
+    hostHeightPx?: number;
+}
+/**
+ * Measure the host's available box in px. Radial instrument hosts render
+ * inline by default, so clientWidth/Height are often 0 — fall back to the
+ * parent box, like obc-watch's getScale() has always done (issue #1032).
+ */
+export declare function measureContainerPx(host: HTMLElement): {
+    width: number;
+    height: number;
+};
+/**
+ * Apply/remove the fixed intrinsic host size a `faceDiameter` frame pins.
+ * The hosts render inline by default, so a pinned size also needs
+ * `display: block` for width/height to apply. Returns whether the size is
+ * currently pinned; pass that back as `wasPinned` on the next call so an
+ * unpinned host's own inline styles are never clobbered.
+ */
+export declare function applyPinnedHostSize(host: HTMLElement, frame: RadialFrame | undefined, wasPinned: boolean): boolean;
+/**
+ * Additionally observe an internal element that always generates a box (the
+ * shadow `<svg>` or `.container`). Several radial hosts render inline (no
+ * `:host {display}` rule), and ResizeObserver never fires for inline boxes —
+ * the host reports a permanent 0×0 size, so a controller observing only the
+ * host misses every resize. That freezes the container-dependent frame and
+ * the `--scale` font counter-scaling at their first-paint values.
+ */
+export declare function observeInnerBox(controller: {
+    observe(target: Element): void;
+}, renderRoot: ParentNode): void;
+/**
+ * Estimate the widest label's pixel width at the 12px instrument label font.
+ */
+export declare function estimateLabelWidthPx(texts: readonly (string | undefined)[]): number;
+/**
+ * Compute the viewBox frame for a radial instrument, reserving width-aware
+ * room for outside tick labels. See the module documentation for the model.
+ */
+export declare function computeRadialFrame(opts: RadialFrameOptions): RadialFrame;
+//# sourceMappingURL=radial-frame.d.ts.map

package/dist/svghelpers/radial-frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radial-frame.d.ts","sourceRoot":"","sources":["../../src/svghelpers/radial-frame.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,0CAA0C,CAAC;AACxE,OAAO,EAA2B,KAAK,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AA6DhF,+DAA+D;AAC/D,eAAO,MAAM,cAAc,IAAI,CAAC;AAChC,wEAAwE;AACxE,eAAO,MAAM,mBAAmB,KAAK,CAAC;AACtC;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,KAAK,CAAC;AACvC;;;;;;GAMG;AACH,eAAO,MAAM,0BAA0B,OAAO,CAAC;AAC/C;;;;GAIG;AACH,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAC3C;;;GAGG;AACH,eAAO,MAAM,kBAAkB,KAAK,CAAC;AAErC,6EAA6E;AAC7E,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB;IACjC,+EAA+E;IAC/E,WAAW,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,WAAW,CAAC,EAAE;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAC,CAAC;IAC9C,8EAA8E;IAC9E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wDAAwD;IACxD,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,WAAY,SAAQ,iBAAiB;IACpD,6EAA6E;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,gFAAgF;IAChF,YAAY,EAAE,MAAM,CAAC;IACrB,8EAA8E;IAC9E,YAAY,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,aAAa,EAAE,OAAO,CAAC;IACvB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,WAAW,GAAG;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAWA;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,WAAW,EACjB,KAAK,EAAE,WAAW,GAAG,SAAS,EAC9B,SAAS,EAAE,OAAO,GACjB,OAAO,CAaT;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAC7B,UAAU,EAAE;IAAC,OAAO,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI,CAAA;CAAC,EAC5C,UAAU,EAAE,UAAU,GACrB,IAAI,CAKN;AAED;;GAEG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,CAAC,EAAE,GACrC,MAAM,CAQR;AAoJD;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,kBAAkB,GAAG,WAAW,CA4DxE"}

package/dist/svghelpers/radial-frame.js

@@ -0,0 +1,259 @@
+import { computeZoomToFitArcFrame } from "./arc-frame.js";
+const OUTER_RING_RADIUS = 368 / 2;
+const RADIAL_VIEWBOX_BASE = 176;
+const LABEL_RADIAL_PAD_UNITS = 3;
+const LABEL_ANCHOR_OFFSET_PX = 9;
+const LABEL_EDGE_PAD_PX = 4;
+const DIGIT_WIDTH_PX = 7;
+const NSWE_LABEL_WIDTH_PX = 16;
+const NORTH_ARROW_WIDTH_PX = 16;
+const LABEL_RESERVE_MAX_FRACTION = 0.45;
+const END_MAXMIN_LABEL_DROP_PX = 21;
+const SIDE_LABEL_DROP_PX = 13;
+function measureContainerPx(host) {
+  let width = host.clientWidth;
+  let height = host.clientHeight;
+  if (width === 0 || height === 0) {
+    const box = host.parentElement?.getBoundingClientRect();
+    if (box) {
+      width = box.width;
+      height = box.height;
+    }
+  }
+  return { width, height };
+}
+function applyPinnedHostSize(host, frame, wasPinned) {
+  if (frame?.hostWidthPx !== void 0 && frame.hostHeightPx !== void 0) {
+    host.style.width = `${frame.hostWidthPx}px`;
+    host.style.height = `${frame.hostHeightPx}px`;
+    host.style.display = "block";
+    return true;
+  }
+  if (wasPinned) {
+    host.style.removeProperty("width");
+    host.style.removeProperty("height");
+    host.style.removeProperty("display");
+  }
+  return false;
+}
+function observeInnerBox(controller, renderRoot) {
+  const box = renderRoot.querySelector("svg, .container");
+  if (box) {
+    controller.observe(box);
+  }
+}
+function estimateLabelWidthPx(texts) {
+  let maxChars = 0;
+  for (const t of texts) {
+    if (t !== void 0 && t.length > maxChars) {
+      maxChars = t.length;
+    }
+  }
+  return maxChars * DIGIT_WIDTH_PX;
+}
+function clipFractions(clips) {
+  if (!clips) {
+    return { fx: 1, fy: 1 };
+  }
+  const fx = 1 - (clips.left + clips.right) / 100;
+  const fy = 1 - (clips.top + clips.bottom) / 100;
+  return { fx: fx > 0 ? fx : 1, fy: fy > 0 ? fy : 1 };
+}
+function buildViewBox(side, clips) {
+  const { fx, fy } = clipFractions(clips);
+  const width = side * fx;
+  const height = side * fy;
+  const x = -side / 2 + side * (clips?.left ?? 0) / 100;
+  const y = -side / 2 + side * (clips?.top ?? 0) / 100;
+  return {
+    x,
+    y,
+    width,
+    height,
+    viewBox: `${x} ${y} ${width} ${height}`,
+    radiusOffset: 0
+  };
+}
+function pinnedScale(opts) {
+  if (opts.faceDiameter === void 0) {
+    return void 0;
+  }
+  const scale = opts.faceDiameter / (2 * OUTER_RING_RADIUS);
+  return Number.isFinite(scale) && scale > 0 ? scale : void 0;
+}
+function effectiveContainer(opts, fx, fy) {
+  const w = opts.containerPx?.width ?? 0;
+  const h = opts.containerPx?.height ?? 0;
+  if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
+    return void 0;
+  }
+  return Math.min(w / fx, h / fy);
+}
+function containerScale(opts, frame) {
+  const w = opts.containerPx?.width ?? 0;
+  const h = opts.containerPx?.height ?? 0;
+  if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {
+    return void 0;
+  }
+  const scale = Math.min(w / frame.width, h / frame.height);
+  return Number.isFinite(scale) && scale > 0 ? scale : void 0;
+}
+function withHostPx(frame, pinned, scale, labelReserve, labelsHidden, clipsAdjusted = false) {
+  const result = {
+    ...frame,
+    scale,
+    labelReserve,
+    labelsHidden,
+    clipsAdjusted
+  };
+  if (pinned) {
+    result.hostWidthPx = frame.width * scale;
+    result.hostHeightPx = frame.height * scale;
+  }
+  return result;
+}
+function solveSide(opts, labelCostPx, clips) {
+  const baseSide = (RADIAL_VIEWBOX_BASE + opts.basePadding) * 2;
+  const { fx, fy } = clipFractions(clips);
+  const labelSideAt = (scale) => 2 * (OUTER_RING_RADIUS + LABEL_RADIAL_PAD_UNITS + labelCostPx / scale);
+  let side = baseSide;
+  let labelsHidden = false;
+  if (labelCostPx > 0) {
+    const pinned = pinnedScale(opts);
+    if (pinned !== void 0) {
+      const grown = Math.max(baseSide, labelSideAt(pinned));
+      labelsHidden = 2 * (labelCostPx / pinned) / grown > LABEL_RESERVE_MAX_FRACTION;
+      side = labelsHidden ? baseSide : grown;
+    } else {
+      const container = effectiveContainer(opts, fx, fy);
+      if (container === void 0) {
+        side = Math.max(baseSide, labelSideAt(1));
+      } else if (2 * labelCostPx / container > LABEL_RESERVE_MAX_FRACTION) {
+        labelsHidden = true;
+      } else {
+        side = Math.max(
+          baseSide,
+          2 * (OUTER_RING_RADIUS + LABEL_RADIAL_PAD_UNITS) / (1 - 2 * labelCostPx / container)
+        );
+      }
+    }
+  }
+  return { side, labelsHidden };
+}
+function adjustClipsForLabelDrop(clips, side, scale, labelDropPx) {
+  const requiredUnits = labelDropPx / scale;
+  const requiredClipPct = Math.max(0, (0.5 - requiredUnits / side) * 100);
+  const bottom = clips.bottom > requiredClipPct ? requiredClipPct : clips.bottom;
+  const top = clips.top > requiredClipPct ? requiredClipPct : clips.top;
+  if (bottom === clips.bottom && top === clips.top) {
+    return clips;
+  }
+  return { ...clips, top, bottom };
+}
+function computeRadialFrame(opts) {
+  const labelWidthPx = opts.labelWidthPx ?? 0;
+  const labelCostPx = labelWidthPx > 0 ? LABEL_ANCHOR_OFFSET_PX + labelWidthPx + LABEL_EDGE_PAD_PX : 0;
+  if (opts.zoomToFitArc && opts.areas && opts.areas.length > 0) {
+    return computeZoomedFrame(opts, labelCostPx);
+  }
+  const baseSide = (RADIAL_VIEWBOX_BASE + opts.basePadding) * 2;
+  let clips = opts.clips;
+  let { side, labelsHidden } = solveSide(opts, labelCostPx, clips);
+  const labelDropPx = opts.labelDropPx ?? 0;
+  if (labelDropPx > 0 && labelCostPx > 0 && !labelsHidden && clips) {
+    for (let i = 0; i < 2; i++) {
+      const scale2 = pinnedScale(opts) ?? containerScale(opts, buildViewBox(side, clips)) ?? 1;
+      const adjusted = adjustClipsForLabelDrop(
+        clips,
+        side,
+        scale2,
+        labelDropPx
+      );
+      if (adjusted === clips) {
+        break;
+      }
+      clips = adjusted;
+      const solved = solveSide(opts, labelCostPx, clips);
+      side = solved.side;
+      labelsHidden = solved.labelsHidden;
+    }
+    if (labelsHidden) {
+      clips = opts.clips;
+      const solved = solveSide(opts, labelCostPx, clips);
+      side = solved.side;
+      labelsHidden = solved.labelsHidden;
+    }
+  }
+  const frame = buildViewBox(side, clips);
+  const pinned = pinnedScale(opts);
+  const scale = pinned ?? containerScale(opts, frame) ?? 1;
+  return withHostPx(
+    frame,
+    pinned !== void 0,
+    scale,
+    (side - baseSide) / 2,
+    labelsHidden,
+    clips !== opts.clips
+  );
+}
+function computeZoomedFrame(opts, labelCostPx) {
+  let reserve = 0;
+  let labelsHidden = false;
+  let frame = zoomFrameAt(opts, opts.basePadding);
+  if (labelCostPx > 0) {
+    for (let i = 0; i < 2; i++) {
+      const passScale = zoomedScale(opts, frame);
+      const reserveUnits = labelCostPx / passScale;
+      if (2 * reserveUnits / Math.max(frame.width, frame.height) > LABEL_RESERVE_MAX_FRACTION) {
+        labelsHidden = true;
+        reserve = 0;
+        frame = zoomFrameAt(opts, opts.basePadding);
+        break;
+      }
+      reserve = reserveUnits;
+      frame = zoomFrameAt(opts, opts.basePadding + reserve);
+    }
+  }
+  const pinned = pinnedZoomedScale(opts, frame);
+  const scale = pinned ?? containerScale(opts, frame) ?? 1;
+  return withHostPx(
+    frame,
+    pinned !== void 0,
+    scale,
+    labelsHidden ? 0 : reserve,
+    labelsHidden
+  );
+}
+function zoomFrameAt(opts, extension) {
+  return computeZoomToFitArcFrame({
+    areas: opts.areas,
+    outerRadius: OUTER_RING_RADIUS,
+    innerRadius: opts.innerRadius ?? OUTER_RING_RADIUS,
+    extension,
+    targetSize: (RADIAL_VIEWBOX_BASE + extension) * 2
+  });
+}
+function pinnedZoomedScale(opts, frame) {
+  if (opts.faceDiameter === void 0) {
+    return void 0;
+  }
+  const scale = opts.faceDiameter / (2 * (OUTER_RING_RADIUS + frame.radiusOffset));
+  return Number.isFinite(scale) && scale > 0 ? scale : void 0;
+}
+function zoomedScale(opts, frame) {
+  return pinnedZoomedScale(opts, frame) ?? containerScale(opts, frame) ?? 1;
+}
+export {
+  DIGIT_WIDTH_PX,
+  END_MAXMIN_LABEL_DROP_PX,
+  LABEL_RESERVE_MAX_FRACTION,
+  NORTH_ARROW_WIDTH_PX,
+  NSWE_LABEL_WIDTH_PX,
+  SIDE_LABEL_DROP_PX,
+  applyPinnedHostSize,
+  computeRadialFrame,
+  estimateLabelWidthPx,
+  measureContainerPx,
+  observeInnerBox
+};
+//# sourceMappingURL=radial-frame.js.map

package/dist/svghelpers/radial-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radial-frame.js","sources":["../../src/svghelpers/radial-frame.ts"],"sourcesContent":["import type {WatchArea} from '../navigation-instruments/watch/watch.js';\nimport {computeZoomToFitArcFrame, type ZoomToFitArcFrame} from './arc-frame.js';\n\n/**\n * Shared frame computation for circular/radial watch-based instruments.\n *\n * Every radial instrument (watch, instrument-radial/gauge-radial, speed-gauge,\n * azimuth-thruster, compass, heading, rudder, pitch/roll, …) needs the same\n * three outputs to render: an SVG viewBox for `<obc-watch>` and its overlay,\n * a zoom radius offset, and — since issue #1021 — enough reserved room around\n * the outer ring that tick labels are not clipped when the instrument shrinks\n * inside a flex container.\n *\n * `computeRadialFrame()` is the single source of truth for that geometry.\n * Consumers call it once per render and pass the resulting frame to\n * `<obc-watch .arcFrame=...>` (which uses it verbatim) and to their own\n * overlay `<svg viewBox=...>`, guaranteeing the two layers stay aligned.\n *\n * ## Label reserve (issue #1021)\n *\n * Tick labels render at `font-size: calc(12px / scale)` so they keep a\n * constant on-screen size while the ring scales. Their footprint in SVG units\n * is therefore `px / scale`, where `scale = containerPx / viewBoxSide` — the\n * smaller the instrument, the more SVG units a label needs. The frame solves\n * the resulting equation in closed form:\n *\n * ```\n * side/2 >= (OUTER_RING_RADIUS + LABEL_RADIAL_PAD_UNITS) + P/scale\n * scale   = containerPx / side\n * => side = 2 * (OUTER_RING_RADIUS + LABEL_RADIAL_PAD_UNITS) / (1 - 2P/containerPx)\n * ```\n *\n * where `P` is the label's pixel cost beyond the ring (anchor offsets + text\n * width + edge padding). The viewBox never shrinks below the legacy\n * `(176 + basePadding) * 2` box, so instruments without labels — or with\n * labels that already fit — render byte-identical to the pre-#1021 output.\n *\n * When the reserve would exceed `LABEL_RESERVE_MAX_FRACTION` of the box, the\n * frame reports `labelsHidden: true` and falls back to the base box; callers\n * must then strip tick label texts (graceful degradation instead of clipping,\n * mirroring the canvas charts).\n *\n * ## Equal circumference (`faceDiameter`)\n *\n * When `faceDiameter` (px) is given, the outer-ring diameter is pinned:\n * `scale = faceDiameter / 368`. The frame then reports `hostWidthPx` /\n * `hostHeightPx` so the host element can adopt a fixed intrinsic size, and\n * instruments sharing a `faceDiameter` value have identical ring\n * circumference regardless of label width or arc extent — the SVG counterpart\n * of `obc-donut-chart`'s fixed-height ⇒ fixed-circumference contract.\n */\n\n// Keep in sync with watch.ts OUTER_RING_RADIUS (importing it would be circular).\nconst OUTER_RING_RADIUS = 368 / 2;\n/** Legacy viewBox base: `side = (RADIAL_VIEWBOX_BASE + padding) * 2`. */\nconst RADIAL_VIEWBOX_BASE = 176;\n/** Non-scaled part of the tickmark text radius pad (`3/scale + 3` in tickmark.ts). */\nconst LABEL_RADIAL_PAD_UNITS = 3;\n/** Scaled label anchor offsets in px: `3/scale` textRadius pad + `6/scale` xOffset. */\nconst LABEL_ANCHOR_OFFSET_PX = 9;\n/** Breathing room between the label's far edge and the viewBox edge, in px. */\nconst LABEL_EDGE_PAD_PX = 4;\n/** Approximate digit advance at 12px font-instrument-label. */\nexport const DIGIT_WIDTH_PX = 7;\n/** Compass NSWE label width assumed by label.ts (`labelWidth = 16`). */\nexport const NSWE_LABEL_WIDTH_PX = 16;\n/**\n * North-arrow glyph allowance for outside-decor reserves (px). The arrow\n * renders regardless of `showLabels`, so consumers charge this portion\n * whenever the arrow sits outside the ring.\n */\nexport const NORTH_ARROW_WIDTH_PX = 16;\n/**\n * Labels are dropped (not clipped) when their reserve would exceed this share\n * of the box. 0.45 makes a 4-digit gauge hide labels below a ~182px container\n * — near the canvas charts' fixed MIN_HEIGHT_WITH_LABELS = 192px threshold —\n * while 2-digit labels survive down to ~120px. Designers may later prefer a\n * fixed pixel threshold instead (see charthelpers/constants.ts).\n */\nexport const LABEL_RESERVE_MAX_FRACTION = 0.45;\n/**\n * Pixel drop of \"Max-min\" end labels (`endLabelsMaxMin`) below the ±90° line:\n * anchored at `12px/scale` with `dominant-baseline: central` (tickmark.ts),\n * so the glyph bottom reaches ~12 + 6 + descender ≈ 20px — plus 1px pad.\n */\nexport const END_MAXMIN_LABEL_DROP_PX = 21;\n/**\n * Pixel drop of regular side labels at the ±90° ends: glyph centered on the\n * line (half-height ~6px + descender), plus pad.\n */\nexport const SIDE_LABEL_DROP_PX = 13;\n\n/** Per-edge viewBox crops in percent (0–100), matching obc-watch `clip*`. */\nexport interface RadialClips {\n  top: number;\n  bottom: number;\n  left: number;\n  right: number;\n}\n\nexport interface RadialFrameOptions {\n  /** Legacy padding: the frame never shrinks below `(176 + basePadding) * 2`. */\n  basePadding: number;\n  /** Max label pixel width at 12px font; 0/undefined = no outside labels. */\n  labelWidthPx?: number;\n  /** Un-zoomed viewBox crops; ignored when `zoomToFitArc` is set. */\n  clips?: RadialClips;\n  /**\n   * Pixel extent the outside labels need past the ±90° horizontal line\n   * toward a top/bottom crop edge (see END_MAXMIN_LABEL_DROP_PX /\n   * SIDE_LABEL_DROP_PX). When a `clips.top`/`clips.bottom` crop would cut\n   * into that drop, the clip is lowered so the labels stay inside the box.\n   * Absent/0 keeps the requested clips untouched (legacy geometry).\n   */\n  labelDropPx?: number;\n  /** Host client box in px; absent or zero ⇒ scale-1 fallback (first paint). */\n  containerPx?: {width: number; height: number};\n  /** Outer-ring diameter in px; pins scale for equal circumference (mode b). */\n  faceDiameter?: number;\n  zoomToFitArc?: boolean;\n  /** Visible arc segments; required for the zoom path. */\n  areas?: WatchArea[];\n  /** Innermost visible radius (depends on WatchCircleType); zoom path only. */\n  innerRadius?: number;\n}\n\nexport interface RadialFrame extends ZoomToFitArcFrame {\n  /** Px per SVG unit implied by container or faceDiameter (1 when unknown). */\n  scale: number;\n  /** SVG units added beyond the base geometry for labels (0 when none/hidden). */\n  labelReserve: number;\n  /** True when the label reserve exceeded the cap; callers strip tick texts. */\n  labelsHidden: boolean;\n  /**\n   * True when `labelDropPx` lowered a top/bottom clip: the box's aspect no\n   * longer matches the requested clip fractions, so hosts with an\n   * aspect-ratio derived from those fractions must follow the frame instead.\n   */\n  clipsAdjusted: boolean;\n  /** Fixed host size in px; defined only when `faceDiameter` is set. */\n  hostWidthPx?: number;\n  /** Fixed host size in px; defined only when `faceDiameter` is set. */\n  hostHeightPx?: number;\n}\n\n/**\n * Measure the host's available box in px. Radial instrument hosts render\n * inline by default, so clientWidth/Height are often 0 — fall back to the\n * parent box, like obc-watch's getScale() has always done (issue #1032).\n */\nexport function measureContainerPx(host: HTMLElement): {\n  width: number;\n  height: number;\n} {\n  let width = host.clientWidth;\n  let height = host.clientHeight;\n  if (width === 0 || height === 0) {\n    const box = host.parentElement?.getBoundingClientRect();\n    if (box) {\n      width = box.width;\n      height = box.height;\n    }\n  }\n  return {width, height};\n}\n\n/**\n * Apply/remove the fixed intrinsic host size a `faceDiameter` frame pins.\n * The hosts render inline by default, so a pinned size also needs\n * `display: block` for width/height to apply. Returns whether the size is\n * currently pinned; pass that back as `wasPinned` on the next call so an\n * unpinned host's own inline styles are never clobbered.\n */\nexport function applyPinnedHostSize(\n  host: HTMLElement,\n  frame: RadialFrame | undefined,\n  wasPinned: boolean\n): boolean {\n  if (frame?.hostWidthPx !== undefined && frame.hostHeightPx !== undefined) {\n    host.style.width = `${frame.hostWidthPx}px`;\n    host.style.height = `${frame.hostHeightPx}px`;\n    host.style.display = 'block';\n    return true;\n  }\n  if (wasPinned) {\n    host.style.removeProperty('width');\n    host.style.removeProperty('height');\n    host.style.removeProperty('display');\n  }\n  return false;\n}\n\n/**\n * Additionally observe an internal element that always generates a box (the\n * shadow `<svg>` or `.container`). Several radial hosts render inline (no\n * `:host {display}` rule), and ResizeObserver never fires for inline boxes —\n * the host reports a permanent 0×0 size, so a controller observing only the\n * host misses every resize. That freezes the container-dependent frame and\n * the `--scale` font counter-scaling at their first-paint values.\n */\nexport function observeInnerBox(\n  controller: {observe(target: Element): void},\n  renderRoot: ParentNode\n): void {\n  const box = renderRoot.querySelector('svg, .container');\n  if (box) {\n    controller.observe(box);\n  }\n}\n\n/**\n * Estimate the widest label's pixel width at the 12px instrument label font.\n */\nexport function estimateLabelWidthPx(\n  texts: readonly (string | undefined)[]\n): number {\n  let maxChars = 0;\n  for (const t of texts) {\n    if (t !== undefined && t.length > maxChars) {\n      maxChars = t.length;\n    }\n  }\n  return maxChars * DIGIT_WIDTH_PX;\n}\n\nfunction clipFractions(clips?: RadialClips): {fx: number; fy: number} {\n  if (!clips) {\n    return {fx: 1, fy: 1};\n  }\n  const fx = 1 - (clips.left + clips.right) / 100;\n  const fy = 1 - (clips.top + clips.bottom) / 100;\n  return {fx: fx > 0 ? fx : 1, fy: fy > 0 ? fy : 1};\n}\n\nfunction buildViewBox(side: number, clips?: RadialClips): ZoomToFitArcFrame {\n  const {fx, fy} = clipFractions(clips);\n  const width = side * fx;\n  const height = side * fy;\n  const x = -side / 2 + (side * (clips?.left ?? 0)) / 100;\n  const y = -side / 2 + (side * (clips?.top ?? 0)) / 100;\n  return {\n    x,\n    y,\n    width,\n    height,\n    viewBox: `${x} ${y} ${width} ${height}`,\n    radiusOffset: 0,\n  };\n}\n\nfunction pinnedScale(opts: RadialFrameOptions): number | undefined {\n  if (opts.faceDiameter === undefined) {\n    return undefined;\n  }\n  const scale = opts.faceDiameter / (2 * OUTER_RING_RADIUS);\n  return Number.isFinite(scale) && scale > 0 ? scale : undefined;\n}\n\n/** Container px available for the full (un-clipped) square, or undefined. */\nfunction effectiveContainer(\n  opts: RadialFrameOptions,\n  fx: number,\n  fy: number\n): number | undefined {\n  const w = opts.containerPx?.width ?? 0;\n  const h = opts.containerPx?.height ?? 0;\n  if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {\n    return undefined;\n  }\n  return Math.min(w / fx, h / fy);\n}\n\nfunction containerScale(\n  opts: RadialFrameOptions,\n  frame: {width: number; height: number}\n): number | undefined {\n  const w = opts.containerPx?.width ?? 0;\n  const h = opts.containerPx?.height ?? 0;\n  if (!Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) {\n    return undefined;\n  }\n  const scale = Math.min(w / frame.width, h / frame.height);\n  return Number.isFinite(scale) && scale > 0 ? scale : undefined;\n}\n\nfunction withHostPx(\n  frame: ZoomToFitArcFrame,\n  pinned: boolean,\n  scale: number,\n  labelReserve: number,\n  labelsHidden: boolean,\n  clipsAdjusted = false\n): RadialFrame {\n  const result: RadialFrame = {\n    ...frame,\n    scale,\n    labelReserve,\n    labelsHidden,\n    clipsAdjusted,\n  };\n  if (pinned) {\n    result.hostWidthPx = frame.width * scale;\n    result.hostHeightPx = frame.height * scale;\n  }\n  return result;\n}\n\n/**\n * Solve the un-zoomed box side and label visibility for a given clip window.\n */\nfunction solveSide(\n  opts: RadialFrameOptions,\n  labelCostPx: number,\n  clips: RadialClips | undefined\n): {side: number; labelsHidden: boolean} {\n  const baseSide = (RADIAL_VIEWBOX_BASE + opts.basePadding) * 2;\n  const {fx, fy} = clipFractions(clips);\n  const labelSideAt = (scale: number): number =>\n    2 * (OUTER_RING_RADIUS + LABEL_RADIAL_PAD_UNITS + labelCostPx / scale);\n\n  let side = baseSide;\n  let labelsHidden = false;\n\n  if (labelCostPx > 0) {\n    const pinned = pinnedScale(opts);\n    if (pinned !== undefined) {\n      const grown = Math.max(baseSide, labelSideAt(pinned));\n      labelsHidden =\n        (2 * (labelCostPx / pinned)) / grown > LABEL_RESERVE_MAX_FRACTION;\n      side = labelsHidden ? baseSide : grown;\n    } else {\n      const container = effectiveContainer(opts, fx, fy);\n      if (container === undefined) {\n        side = Math.max(baseSide, labelSideAt(1));\n      } else if ((2 * labelCostPx) / container > LABEL_RESERVE_MAX_FRACTION) {\n        labelsHidden = true;\n      } else {\n        side = Math.max(\n          baseSide,\n          (2 * (OUTER_RING_RADIUS + LABEL_RADIAL_PAD_UNITS)) /\n            (1 - (2 * labelCostPx) / container)\n        );\n      }\n    }\n  }\n\n  return {side, labelsHidden};\n}\n\n/**\n * Lower a top/bottom clip so the crop edge keeps `labelDropPx / scale` SVG\n * units past the ±90° horizontal line (where the arc end labels hang).\n * Returns the input object unchanged when the requested clips already fit.\n */\nfunction adjustClipsForLabelDrop(\n  clips: RadialClips,\n  side: number,\n  scale: number,\n  labelDropPx: number\n): RadialClips {\n  const requiredUnits = labelDropPx / scale;\n  const requiredClipPct = Math.max(0, (0.5 - requiredUnits / side) * 100);\n  const bottom =\n    clips.bottom > requiredClipPct ? requiredClipPct : clips.bottom;\n  const top = clips.top > requiredClipPct ? requiredClipPct : clips.top;\n  if (bottom === clips.bottom && top === clips.top) {\n    return clips;\n  }\n  return {...clips, top, bottom};\n}\n\n/**\n * Compute the viewBox frame for a radial instrument, reserving width-aware\n * room for outside tick labels. See the module documentation for the model.\n */\nexport function computeRadialFrame(opts: RadialFrameOptions): RadialFrame {\n  const labelWidthPx = opts.labelWidthPx ?? 0;\n  const labelCostPx =\n    labelWidthPx > 0\n      ? LABEL_ANCHOR_OFFSET_PX + labelWidthPx + LABEL_EDGE_PAD_PX\n      : 0;\n\n  if (opts.zoomToFitArc && opts.areas && opts.areas.length > 0) {\n    return computeZoomedFrame(opts, labelCostPx);\n  }\n\n  const baseSide = (RADIAL_VIEWBOX_BASE + opts.basePadding) * 2;\n  let clips = opts.clips;\n  let {side, labelsHidden} = solveSide(opts, labelCostPx, clips);\n\n  // Label drop past the ±90° line: lower a top/bottom crop that would cut\n  // into it. The clip change alters the container fit (fy grows), so run a\n  // second pass; visually exact after two.\n  const labelDropPx = opts.labelDropPx ?? 0;\n  if (labelDropPx > 0 && labelCostPx > 0 && !labelsHidden && clips) {\n    for (let i = 0; i < 2; i++) {\n      const scale =\n        pinnedScale(opts) ??\n        containerScale(opts, buildViewBox(side, clips)) ??\n        1;\n      const adjusted = adjustClipsForLabelDrop(\n        clips!,\n        side,\n        scale,\n        labelDropPx\n      );\n      if (adjusted === clips) {\n        break;\n      }\n      clips = adjusted;\n      const solved = solveSide(opts, labelCostPx, clips);\n      side = solved.side;\n      labelsHidden = solved.labelsHidden;\n    }\n    if (labelsHidden) {\n      // The taller window pushed the reserve past the cap: labels are\n      // stripped, so the drop is moot — restore the requested clips.\n      clips = opts.clips;\n      const solved = solveSide(opts, labelCostPx, clips);\n      side = solved.side;\n      labelsHidden = solved.labelsHidden;\n    }\n  }\n\n  const frame = buildViewBox(side, clips);\n  const pinned = pinnedScale(opts);\n  const scale = pinned ?? containerScale(opts, frame) ?? 1;\n  return withHostPx(\n    frame,\n    pinned !== undefined,\n    scale,\n    (side - baseSide) / 2,\n    labelsHidden,\n    clips !== opts.clips\n  );\n}\n\nfunction computeZoomedFrame(\n  opts: RadialFrameOptions,\n  labelCostPx: number\n): RadialFrame {\n  let reserve = 0;\n  let labelsHidden = false;\n  let frame: ZoomToFitArcFrame = zoomFrameAt(opts, opts.basePadding);\n\n  if (labelCostPx > 0) {\n    // Fixed-point on the extension: the reserve depends on the scale, and the\n    // scale on the frame size. Converges monotonically; two passes suffice.\n    for (let i = 0; i < 2; i++) {\n      const passScale = zoomedScale(opts, frame);\n      const reserveUnits = labelCostPx / passScale;\n      if (\n        (2 * reserveUnits) / Math.max(frame.width, frame.height) >\n        LABEL_RESERVE_MAX_FRACTION\n      ) {\n        labelsHidden = true;\n        reserve = 0;\n        frame = zoomFrameAt(opts, opts.basePadding);\n        break;\n      }\n      reserve = reserveUnits;\n      frame = zoomFrameAt(opts, opts.basePadding + reserve);\n    }\n  }\n\n  const pinned = pinnedZoomedScale(opts, frame);\n  const scale = pinned ?? containerScale(opts, frame) ?? 1;\n  return withHostPx(\n    frame,\n    pinned !== undefined,\n    scale,\n    labelsHidden ? 0 : reserve,\n    labelsHidden\n  );\n}\n\nfunction zoomFrameAt(\n  opts: RadialFrameOptions,\n  extension: number\n): ZoomToFitArcFrame {\n  return computeZoomToFitArcFrame({\n    areas: opts.areas!,\n    outerRadius: OUTER_RING_RADIUS,\n    innerRadius: opts.innerRadius ?? OUTER_RING_RADIUS,\n    extension,\n    targetSize: (RADIAL_VIEWBOX_BASE + extension) * 2,\n  });\n}\n\n/** Pin scale for a zoomed frame, or undefined when `faceDiameter` is unusable. */\nfunction pinnedZoomedScale(\n  opts: RadialFrameOptions,\n  frame: ZoomToFitArcFrame\n): number | undefined {\n  if (opts.faceDiameter === undefined) {\n    return undefined;\n  }\n  const scale =\n    opts.faceDiameter / (2 * (OUTER_RING_RADIUS + frame.radiusOffset));\n  return Number.isFinite(scale) && scale > 0 ? scale : undefined;\n}\n\nfunction zoomedScale(\n  opts: RadialFrameOptions,\n  frame: ZoomToFitArcFrame\n): number {\n  return pinnedZoomedScale(opts, frame) ?? containerScale(opts, frame) ?? 1;\n}\n"],"names":["scale"],"mappings":";AAqDA,MAAM,oBAAoB,MAAM;AAEhC,MAAM,sBAAsB;AAE5B,MAAM,yBAAyB;AAE/B,MAAM,yBAAyB;AAE/B,MAAM,oBAAoB;AAEnB,MAAM,iBAAiB;AAEvB,MAAM,sBAAsB;AAM5B,MAAM,uBAAuB;AAQ7B,MAAM,6BAA6B;AAMnC,MAAM,2BAA2B;AAKjC,MAAM,qBAAqB;AA4D3B,SAAS,mBAAmB,MAGjC;AACA,MAAI,QAAQ,KAAK;AACjB,MAAI,SAAS,KAAK;AAClB,MAAI,UAAU,KAAK,WAAW,GAAG;AAC/B,UAAM,MAAM,KAAK,eAAe,sBAAA;AAChC,QAAI,KAAK;AACP,cAAQ,IAAI;AACZ,eAAS,IAAI;AAAA,IACf;AAAA,EACF;AACA,SAAO,EAAC,OAAO,OAAA;AACjB;AASO,SAAS,oBACd,MACA,OACA,WACS;AACT,MAAI,OAAO,gBAAgB,UAAa,MAAM,iBAAiB,QAAW;AACxE,SAAK,MAAM,QAAQ,GAAG,MAAM,WAAW;AACvC,SAAK,MAAM,SAAS,GAAG,MAAM,YAAY;AACzC,SAAK,MAAM,UAAU;AACrB,WAAO;AAAA,EACT;AACA,MAAI,WAAW;AACb,SAAK,MAAM,eAAe,OAAO;AACjC,SAAK,MAAM,eAAe,QAAQ;AAClC,SAAK,MAAM,eAAe,SAAS;AAAA,EACrC;AACA,SAAO;AACT;AAUO,SAAS,gBACd,YACA,YACM;AACN,QAAM,MAAM,WAAW,cAAc,iBAAiB;AACtD,MAAI,KAAK;AACP,eAAW,QAAQ,GAAG;AAAA,EACxB;AACF;AAKO,SAAS,qBACd,OACQ;AACR,MAAI,WAAW;AACf,aAAW,KAAK,OAAO;AACrB,QAAI,MAAM,UAAa,EAAE,SAAS,UAAU;AAC1C,iBAAW,EAAE;AAAA,IACf;AAAA,EACF;AACA,SAAO,WAAW;AACpB;AAEA,SAAS,cAAc,OAA+C;AACpE,MAAI,CAAC,OAAO;AACV,WAAO,EAAC,IAAI,GAAG,IAAI,EAAA;AAAA,EACrB;AACA,QAAM,KAAK,KAAK,MAAM,OAAO,MAAM,SAAS;AAC5C,QAAM,KAAK,KAAK,MAAM,MAAM,MAAM,UAAU;AAC5C,SAAO,EAAC,IAAI,KAAK,IAAI,KAAK,GAAG,IAAI,KAAK,IAAI,KAAK,EAAA;AACjD;AAEA,SAAS,aAAa,MAAc,OAAwC;AAC1E,QAAM,EAAC,IAAI,OAAM,cAAc,KAAK;AACpC,QAAM,QAAQ,OAAO;AACrB,QAAM,SAAS,OAAO;AACtB,QAAM,IAAI,CAAC,OAAO,IAAK,QAAQ,OAAO,QAAQ,KAAM;AACpD,QAAM,IAAI,CAAC,OAAO,IAAK,QAAQ,OAAO,OAAO,KAAM;AACnD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS,GAAG,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,MAAM;AAAA,IACrC,cAAc;AAAA,EAAA;AAElB;AAEA,SAAS,YAAY,MAA8C;AACjE,MAAI,KAAK,iBAAiB,QAAW;AACnC,WAAO;AAAA,EACT;AACA,QAAM,QAAQ,KAAK,gBAAgB,IAAI;AACvC,SAAO,OAAO,SAAS,KAAK,KAAK,QAAQ,IAAI,QAAQ;AACvD;AAGA,SAAS,mBACP,MACA,IACA,IACoB;AACpB,QAAM,IAAI,KAAK,aAAa,SAAS;AACrC,QAAM,IAAI,KAAK,aAAa,UAAU;AACtC,MAAI,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,OAAO,SAAS,CAAC,KAAK,KAAK,KAAK,KAAK,GAAG;AAClE,WAAO;AAAA,EACT;AACA,SAAO,KAAK,IAAI,IAAI,IAAI,IAAI,EAAE;AAChC;AAEA,SAAS,eACP,MACA,OACoB;AACpB,QAAM,IAAI,KAAK,aAAa,SAAS;AACrC,QAAM,IAAI,KAAK,aAAa,UAAU;AACtC,MAAI,CAAC,OAAO,SAAS,CAAC,KAAK,CAAC,OAAO,SAAS,CAAC,KAAK,KAAK,KAAK,KAAK,GAAG;AAClE,WAAO;AAAA,EACT;AACA,QAAM,QAAQ,KAAK,IAAI,IAAI,MAAM,OAAO,IAAI,MAAM,MAAM;AACxD,SAAO,OAAO,SAAS,KAAK,KAAK,QAAQ,IAAI,QAAQ;AACvD;AAEA,SAAS,WACP,OACA,QACA,OACA,cACA,cACA,gBAAgB,OACH;AACb,QAAM,SAAsB;AAAA,IAC1B,GAAG;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEF,MAAI,QAAQ;AACV,WAAO,cAAc,MAAM,QAAQ;AACnC,WAAO,eAAe,MAAM,SAAS;AAAA,EACvC;AACA,SAAO;AACT;AAKA,SAAS,UACP,MACA,aACA,OACuC;AACvC,QAAM,YAAY,sBAAsB,KAAK,eAAe;AAC5D,QAAM,EAAC,IAAI,OAAM,cAAc,KAAK;AACpC,QAAM,cAAc,CAAC,UACnB,KAAK,oBAAoB,yBAAyB,cAAc;AAElE,MAAI,OAAO;AACX,MAAI,eAAe;AAEnB,MAAI,cAAc,GAAG;AACnB,UAAM,SAAS,YAAY,IAAI;AAC/B,QAAI,WAAW,QAAW;AACxB,YAAM,QAAQ,KAAK,IAAI,UAAU,YAAY,MAAM,CAAC;AACpD,qBACG,KAAK,cAAc,UAAW,QAAQ;AACzC,aAAO,eAAe,WAAW;AAAA,IACnC,OAAO;AACL,YAAM,YAAY,mBAAmB,MAAM,IAAI,EAAE;AACjD,UAAI,cAAc,QAAW;AAC3B,eAAO,KAAK,IAAI,UAAU,YAAY,CAAC,CAAC;AAAA,MAC1C,WAAY,IAAI,cAAe,YAAY,4BAA4B;AACrE,uBAAe;AAAA,MACjB,OAAO;AACL,eAAO,KAAK;AAAA,UACV;AAAA,UACC,KAAK,oBAAoB,2BACvB,IAAK,IAAI,cAAe;AAAA,QAAA;AAAA,MAE/B;AAAA,IACF;AAAA,EACF;AAEA,SAAO,EAAC,MAAM,aAAA;AAChB;AAOA,SAAS,wBACP,OACA,MACA,OACA,aACa;AACb,QAAM,gBAAgB,cAAc;AACpC,QAAM,kBAAkB,KAAK,IAAI,IAAI,MAAM,gBAAgB,QAAQ,GAAG;AACtE,QAAM,SACJ,MAAM,SAAS,kBAAkB,kBAAkB,MAAM;AAC3D,QAAM,MAAM,MAAM,MAAM,kBAAkB,kBAAkB,MAAM;AAClE,MAAI,WAAW,MAAM,UAAU,QAAQ,MAAM,KAAK;AAChD,WAAO;AAAA,EACT;AACA,SAAO,EAAC,GAAG,OAAO,KAAK,OAAA;AACzB;AAMO,SAAS,mBAAmB,MAAuC;AACxE,QAAM,eAAe,KAAK,gBAAgB;AAC1C,QAAM,cACJ,eAAe,IACX,yBAAyB,eAAe,oBACxC;AAEN,MAAI,KAAK,gBAAgB,KAAK,SAAS,KAAK,MAAM,SAAS,GAAG;AAC5D,WAAO,mBAAmB,MAAM,WAAW;AAAA,EAC7C;AAEA,QAAM,YAAY,sBAAsB,KAAK,eAAe;AAC5D,MAAI,QAAQ,KAAK;AACjB,MAAI,EAAC,MAAM,aAAA,IAAgB,UAAU,MAAM,aAAa,KAAK;AAK7D,QAAM,cAAc,KAAK,eAAe;AACxC,MAAI,cAAc,KAAK,cAAc,KAAK,CAAC,gBAAgB,OAAO;AAChE,aAAS,IAAI,GAAG,IAAI,GAAG,KAAK;AAC1B,YAAMA,SACJ,YAAY,IAAI,KAChB,eAAe,MAAM,aAAa,MAAM,KAAK,CAAC,KAC9C;AACF,YAAM,WAAW;AAAA,QACf;AAAA,QACA;AAAA,QACAA;AAAAA,QACA;AAAA,MAAA;AAEF,UAAI,aAAa,OAAO;AACtB;AAAA,MACF;AACA,cAAQ;AACR,YAAM,SAAS,UAAU,MAAM,aAAa,KAAK;AACjD,aAAO,OAAO;AACd,qBAAe,OAAO;AAAA,IACxB;AACA,QAAI,cAAc;AAGhB,cAAQ,KAAK;AACb,YAAM,SAAS,UAAU,MAAM,aAAa,KAAK;AACjD,aAAO,OAAO;AACd,qBAAe,OAAO;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,QAAQ,aAAa,MAAM,KAAK;AACtC,QAAM,SAAS,YAAY,IAAI;AAC/B,QAAM,QAAQ,UAAU,eAAe,MAAM,KAAK,KAAK;AACvD,SAAO;AAAA,IACL;AAAA,IACA,WAAW;AAAA,IACX;AAAA,KACC,OAAO,YAAY;AAAA,IACpB;AAAA,IACA,UAAU,KAAK;AAAA,EAAA;AAEnB;AAEA,SAAS,mBACP,MACA,aACa;AACb,MAAI,UAAU;AACd,MAAI,eAAe;AACnB,MAAI,QAA2B,YAAY,MAAM,KAAK,WAAW;AAEjE,MAAI,cAAc,GAAG;AAGnB,aAAS,IAAI,GAAG,IAAI,GAAG,KAAK;AAC1B,YAAM,YAAY,YAAY,MAAM,KAAK;AACzC,YAAM,eAAe,cAAc;AACnC,UACG,IAAI,eAAgB,KAAK,IAAI,MAAM,OAAO,MAAM,MAAM,IACvD,4BACA;AACA,uBAAe;AACf,kBAAU;AACV,gBAAQ,YAAY,MAAM,KAAK,WAAW;AAC1C;AAAA,MACF;AACA,gBAAU;AACV,cAAQ,YAAY,MAAM,KAAK,cAAc,OAAO;AAAA,IACtD;AAAA,EACF;AAEA,QAAM,SAAS,kBAAkB,MAAM,KAAK;AAC5C,QAAM,QAAQ,UAAU,eAAe,MAAM,KAAK,KAAK;AACvD,SAAO;AAAA,IACL;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,eAAe,IAAI;AAAA,IACnB;AAAA,EAAA;AAEJ;AAEA,SAAS,YACP,MACA,WACmB;AACnB,SAAO,yBAAyB;AAAA,IAC9B,OAAO,KAAK;AAAA,IACZ,aAAa;AAAA,IACb,aAAa,KAAK,eAAe;AAAA,IACjC;AAAA,IACA,aAAa,sBAAsB,aAAa;AAAA,EAAA,CACjD;AACH;AAGA,SAAS,kBACP,MACA,OACoB;AACpB,MAAI,KAAK,iBAAiB,QAAW;AACnC,WAAO;AAAA,EACT;AACA,QAAM,QACJ,KAAK,gBAAgB,KAAK,oBAAoB,MAAM;AACtD,SAAO,OAAO,SAAS,KAAK,KAAK,QAAQ,IAAI,QAAQ;AACvD;AAEA,SAAS,YACP,MACA,OACQ;AACR,SAAO,kBAAkB,MAAM,KAAK,KAAK,eAAe,MAAM,KAAK,KAAK;AAC1E;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oicl/openbridge-webcomponents-full-bundle",
-  "version": "2.0.0-next.101",
+  "version": "2.0.0-next.103",
   "type": "module",
   "repository": {
     "type": "git",

package/script/check-slot-event-docs.ts

@@ -31,6 +31,13 @@
  * - **Empty description (warning):** a `@slot`/`@fires` tag with only a name and
  *   no descriptive text. These become blank cells in the manifest / Storybook
  *   controls; warnings do not fail CI.
+ * - **Class-level `@property` tag (error):** properties must be documented
+ *   inline above their field declarations (AGENTS.md §3.6). A tag in the class
+ *   JSDoc block overrides the inline doc and can inject a ghost member for a
+ *   non-existent property (issue #1043). A short allowlist covers documented
+ *   exceptions (property-injecting mixins, one legacy chart-base tag). A
+ *   class-level `@attr`/`@attribute` that documents a CSS-only attribute with
+ *   no backing `@property` field is allowed and is not flagged.
  *
  * There is deliberately no phantom-`@fires` *error*: unlike slots (which must be
  * a `<slot>` element in the component's own shadow DOM), a documented event may
@@ -304,6 +311,34 @@ async function run(): Promise<void> {
     }
   }
 
+  // Class-level @property / @attr JSDoc tags (AGENTS.md §3.6): properties must be
+  // documented inline above their field declarations. A class-level tag overrides
+  // the inline doc and can inject a ghost member for a property that does not
+  // exist (issue #1043). Allowlisted files are documented exceptions: mixins that
+  // inject properties into consumers, and one legacy `fill` tag on the chart base.
+  const PROPERTY_TAG_ALLOWLIST = [
+    'svghelpers/setpoint-mixin.ts',
+    'svghelpers/setpoint-bundle.ts',
+    'building-blocks/chart-line/chart-line-base.ts',
+  ];
+  // Only `@property` is flagged. `@attr`/`@attribute` in a class block is the
+  // legitimate way to document a CSS-only attribute that has no backing
+  // `@property` field (e.g. slider's `hugcontainer`), so it is not an error.
+  // Matches both the multi-line (` * @property`) and single-line
+  // (`/** @property`) JSDoc block-comment forms.
+  const propTagRe = /^[ \t]*(?:\/\*\*|\*)[ \t]*@property\b/gm;
+  for (const rel of files.sort()) {
+    if (PROPERTY_TAG_ALLOWLIST.some((a) => rel.endsWith(a))) continue;
+    const source = fs.readFileSync(path.join(cwd, rel), 'utf8');
+    const matches = source.match(propTagRe);
+    if (matches && matches.length > 0) {
+      errors.push({
+        file: rel,
+        message: `has ${matches.length} class-level @property JSDoc tag(s) — document each property inline above its field declaration instead (AGENTS.md §3.6; these override inline docs and can create ghost manifest members)`,
+      });
+    }
+  }
+
   console.log('Slot & event documentation audit');
   console.log(`Scanned ${componentCount} registered components under src/`);
 

package/src/bars-graphs/donut-chart/donut-chart.ts

@@ -138,75 +138,77 @@ export type DonutChartDataItem = {
  * </script>
  * ```
  *
- * @property {Array<{label: string, value: number}>} data - Chart data segments (set via JavaScript)
- * @property {string[]} colors - Custom segment colors (set via JavaScript) with fallback to theme palette
- * @property {boolean} half - Whether to display as half-circle (180°) or full circle (360°), default: false
- * @property {boolean} showOuterLabels - Show outer labels, default: false
- * @property {boolean} showUnit - Whether to show unit in labels, default: false
- * @property {string} outerLabelUnit - Unit string to append to outer labels, default: "%"
- * @property {number} outerLabelMaxLength - Maximum character length for labels before trim (0 = no limit), default: 0
- * @property {number} outerLabelDecimalPlaces - Number of decimal places in labels, default: 0
- * @property {string} centerReadoutLabel - Text label shown below the center total value, default: "Total"
- * @property {string} centerReadoutUnit - Unit string shown inline after the label in the center readout, default: "%"
- * @property {number} max - Maximum value for calculating remaining empty sector, default: 100
- * @property {number} thickness - Donut ring thickness in pixels, default: 24
- * @property {boolean} showDebugOverlay - Show debug overlay for development, default: false
- * @property {number} fixedHeight - Fixed height of the chart in pixels (mandatory, determines chart circumference), default: 320. The chart's circumference is always based on this fixed height to match other radial instruments.
- * @property {boolean} legend - Whether to display the legend below the chart, default: false
  * @beta
  */
 @customElement('obc-donut-chart')
 export class ObcDonutChart extends LitElement {
+  /** Chart data segments (set via JavaScript) */
   @property({type: Array, attribute: false})
   data: DonutChartDataItem[] = [];
 
+  /** Custom segment colors (set via JavaScript) with fallback to theme palette */
   @property({type: Array, attribute: false})
   colors: string[] = [];
 
   @property({type: String})
   priority: Priority = Priority.regular;
 
+  /** Whether to display as half-circle (180°) or full circle (360°), default: false */
   @property({type: Boolean, reflect: true})
   half = false;
 
+  /** Show outer labels, default: false */
   @property({type: Boolean})
   showOuterLabels = false;
 
+  /** Whether to show unit in labels, default: false */
   @property({type: Boolean})
   showUnit = false;
 
+  /** Unit string to append to outer labels, default: "%" */
   @property({type: String})
   outerLabelUnit = '%';
 
-  /** @availableWhen showOuterLabels==true */
+  /**
+   * Maximum character length for labels before trim (0 = no limit), default: 0
+   * @availableWhen showOuterLabels==true
+   */
   @property({
     type: Number,
   })
   outerLabelMaxLength = 0;
 
+  /** Number of decimal places in labels, default: 0 */
   @property({
     type: Number,
   })
   outerLabelDecimalPlaces = 0;
 
+  /** Text label shown below the center total value, default: "Total" */
   @property({type: String})
   centerReadoutLabel = 'Total';
 
+  /** Unit string shown inline after the label in the center readout, default: "%" */
   @property({type: String})
   centerReadoutUnit = '%';
 
+  /** Maximum value for calculating remaining empty sector, default: 100 */
   @property({type: Number})
   max = 100;
 
+  /** Donut ring thickness in pixels, default: 24 */
   @property({type: Number})
   thickness = 24;
 
+  /** Whether to display the legend below the chart, default: false */
   @property({type: Boolean, reflect: true})
   legend = false;
 
+  /** Show debug overlay for development, default: false */
   @property({type: Boolean, reflect: true})
   showDebugOverlay = false;
 
+  /** Fixed height of the chart in pixels (determines chart circumference), default: 320. The chart's circumference is always based on this fixed height to match other radial instruments. */
   @property({type: Number, reflect: true})
   fixedHeight = 320;
 

package/src/bars-graphs/pie-chart/pie-chart.ts

@@ -156,59 +156,61 @@ export type PieChartDataItem = {
  * </script>
  * ```
  *
- * @property {Array<{label: string, value: number, children?: Array<{label: string, value: number}>}>} data - Chart data segments with optional children subsegments for sunburst mode (set via JavaScript)
- * @property {string[]} colors - Custom segment colors (set via JavaScript) with fallback to theme palette
- * @property {boolean} showOuterLabels - Show outer labels, default: false
- * @property {boolean} showUnit - Whether to show unit in labels, default: false
- * @property {boolean} sunburst - Enable sunburst mode with interactive children subsegments, default: false
- * @property {string} outerLabelUnit - Unit string to append to outer labels, default: "%"
- * @property {number} outerLabelMaxLength - Maximum character length for labels before trim (0 = no limit), default: 0
- * @property {number} outerLabelDecimalPlaces - Number of decimal places in labels, default: 0
- * @property {boolean} showDebugOverlay - Show debug overlay for development, default: false
- * @property {number} fixedHeight - Fixed height of the chart in pixels (mandatory, determines chart circumference), default: 320. The chart's circumference is always based on this fixed height to match other radial instruments.
- * @property {boolean} legend - Whether to display the legend below the chart, default: false
  * @beta
  */
 @customElement('obc-pie-chart')
 export class ObcPieChart extends LitElement {
+  /** Chart data segments with optional children subsegments for sunburst mode (set via JavaScript). */
   @property({type: Array, attribute: false})
   data: PieChartDataItem[] = [];
 
+  /** Custom segment colors (set via JavaScript) with fallback to theme palette */
   @property({type: Array, attribute: false})
   colors: string[] = [];
 
   @property({type: String})
   priority: Priority = Priority.regular;
 
+  /** Show outer labels, default: false */
   @property({type: Boolean})
   showOuterLabels = false;
 
+  /** Whether to show unit in labels, default: false */
   @property({type: Boolean})
   showUnit = false;
 
+  /** Enable sunburst mode with interactive children subsegments, default: false */
   @property({type: Boolean})
   sunburst = false;
 
+  /** Unit string to append to outer labels, default: "%" */
   @property({type: String})
   outerLabelUnit = '%';
 
-  /** @availableWhen showOuterLabels==true */
+  /**
+   * Maximum character length for labels before trim (0 = no limit), default: 0
+   * @availableWhen showOuterLabels==true
+   */
   @property({
     type: Number,
   })
   outerLabelMaxLength = 0;
 
+  /** Number of decimal places in labels, default: 0 */
   @property({
     type: Number,
   })
   outerLabelDecimalPlaces = 0;
 
+  /** Whether to display the legend below the chart, default: false */
   @property({type: Boolean, reflect: true})
   legend = false;
 
+  /** Show debug overlay for development, default: false */
   @property({type: Boolean, reflect: true})
   showDebugOverlay = false;
 
+  /** Fixed height of the chart in pixels (determines chart circumference), default: 320. The chart's circumference is always based on this fixed height to match other radial instruments. */
   @property({type: Number, reflect: true})
   fixedHeight = 320;