@opendata-ai/openchart-engine 7.11.0 → 8.0.0-rc.2

package/src/annotations/geometry.ts

@@ -11,19 +11,57 @@ import type {
 import { estimateTextWidth } from '@opendata-ai/openchart-core';
 import {
   ANCHOR_OFFSET,
+  ARROWHEAD_HALF_WIDTH,
+  ARROWHEAD_LENGTH,
+  CONNECTOR_STANDOFF,
+  connectorIsDrawable,
   DEFAULT_ANNOTATION_FONT_SIZE,
   DEFAULT_ANNOTATION_FONT_WEIGHT,
   DEFAULT_LINE_HEIGHT,
+  DROP_LINE_TOP_GAP,
 } from './constants';
+import { BOLD_SPAN_FONT_WEIGHT, parseAnnotationSpans } from './rich-text';
 
+/**
+ * Measure one run of text at a given size and weight.
+ *
+ * Deliberately takes no `fontFamily`: neither implementation could use one.
+ * `heuristicMeasure` below is family-blind, and the real canvas measurer gets its
+ * family from the `createMeasureText(fontFamily)` closure, not per call -- so a
+ * family passed here would be silently dropped while implying the opposite.
+ * `style.fontFamily` on a *resolved label* is a different thing: that one is real
+ * and gets rendered.
+ */
 export type AnnotationMeasureTextFn = (
   text: string,
-  font: { fontSize: number; fontWeight: number; fontFamily?: string },
+  font: { fontSize: number; fontWeight: number },
 ) => number;
 
 export const heuristicMeasure: AnnotationMeasureTextFn = (text, { fontSize, fontWeight }) =>
   estimateTextWidth(text, fontSize, fontWeight);
 
+/**
+ * Width of one line of annotation text, `**bold**` spans included: each span is
+ * measured at its own weight and the widths are summed. Measuring the raw string
+ * would count the `**` markers and use one weight for the whole line, so bounds,
+ * collisions, placement, and connector exits would all be wrong for rich text.
+ */
+export function measureRichLine(
+  line: string,
+  style: { fontSize: number; fontWeight: number },
+  measure: AnnotationMeasureTextFn,
+): number {
+  const spans = parseAnnotationSpans(line);
+  let width = 0;
+  for (const span of spans) {
+    width += measure(span.text, {
+      fontSize: style.fontSize,
+      fontWeight: span.bold ? BOLD_SPAN_FONT_WEIGHT : style.fontWeight,
+    });
+  }
+  return width;
+}
+
 /**
  * Compute the bounding box of a text block, aware of textAnchor and multi-line layout.
  * labelY is the first-line baseline.
@@ -37,15 +75,12 @@ export function computeTextBlockBounds(
     fontWeight: number;
     lineHeight: number;
     textAnchor?: 'start' | 'middle' | 'end';
+    fontFamily?: string;
   },
   measure: AnnotationMeasureTextFn = heuristicMeasure,
 ): Rect {
   const lines = text.split('\n');
-  const maxWidth = Math.max(
-    ...lines.map((line) =>
-      measure(line, { fontSize: style.fontSize, fontWeight: style.fontWeight }),
-    ),
-  );
+  const maxWidth = Math.max(...lines.map((line) => measureRichLine(line, style, measure)));
   const height =
     style.fontSize + (lines.length - 1) * style.fontSize * style.lineHeight + style.fontSize * 0.3;
 
@@ -119,59 +154,73 @@ export function applyOffset(
   };
 }
 
+/** Inflation applied to the label box before intersecting the connector ray. */
+const BOX_INFLATE = 2;
+
 /**
- * Compute the connector origin point on the text bounding box.
- * For straight connectors, finds the edge midpoint (top, bottom, left, right)
- * closest to the data point. For curve connectors, always uses the right edge.
+ * Compute where a connector leaves the annotation's text block on its way to the
+ * target. Casts a ray from the box center toward the target, intersects the
+ * (slightly inflated) box, then advances `standoff` px along the ray so the line
+ * never touches the glyphs.
+ *
+ * Returns `null` when the target sits inside the inflated box (a connector would
+ * cross its own text) or when the standoff would overshoot the target.
  */
-export function computeConnectorOrigin(
-  labelX: number,
-  labelY: number,
-  text: string,
-  fontSize: number,
-  fontWeight: number,
+export function connectorExit(
+  bounds: Rect,
   targetX: number,
   targetY: number,
-  connectorStyle: 'straight' | 'curve',
-): { x: number; y: number } {
-  const lines = text.split('\n');
-  const isMultiLine = lines.length > 1;
-  const anchor: 'start' | 'middle' = isMultiLine ? 'middle' : 'start';
-  const box = computeTextBlockBounds(labelX, labelY, text, {
-    fontSize,
-    fontWeight,
-    lineHeight: DEFAULT_LINE_HEIGHT,
-    textAnchor: anchor,
-  });
-  const boxCenterX = box.x + box.width / 2;
-  const boxCenterY = box.y + box.height / 2;
-
-  // Curve connectors always start from the right edge
-  if (connectorStyle === 'curve') {
-    return {
-      x: box.x + box.width,
-      y: boxCenterY,
-    };
-  }
+  standoff = CONNECTOR_STANDOFF,
+): { x: number; y: number; exit: 'horizontal' | 'vertical' } | null {
+  const box = {
+    x: bounds.x - BOX_INFLATE,
+    y: bounds.y - BOX_INFLATE,
+    width: bounds.width + BOX_INFLATE * 2,
+    height: bounds.height + BOX_INFLATE * 2,
+  };
+  const cx = box.x + box.width / 2;
+  const cy = box.y + box.height / 2;
+  const halfW = box.width / 2;
+  const halfH = box.height / 2;
 
-  // Normalize the vector from box center to target by the box half-dimensions.
-  // This accounts for the box aspect ratio: a wide text box should prefer
-  // top/bottom exits even when the target is also offset horizontally.
-  const halfW = box.width / 2 || 1;
-  const halfH = box.height / 2 || 1;
-  const ndx = (targetX - boxCenterX) / halfW;
-  const ndy = (targetY - boxCenterY) / halfH;
-
-  if (Math.abs(ndy) >= Math.abs(ndx)) {
-    // Target is more above/below than left/right → use top or bottom edge
-    return ndy < 0
-      ? { x: boxCenterX, y: box.y } // top
-      : { x: boxCenterX, y: box.y + box.height }; // bottom
-  }
-  // Target is more left/right → use left or right edge
-  return ndx < 0
-    ? { x: box.x, y: boxCenterY } // left
-    : { x: box.x + box.width, y: boxCenterY }; // right
+  const dx = targetX - cx;
+  const dy = targetY - cy;
+
+  // Target inside the inflated box: any connector would cross the text.
+  if (Math.abs(dx) <= halfW && Math.abs(dy) <= halfH) return null;
+  if (dx === 0 && dy === 0) return null;
+
+  // Parametric ray: center + t * (dx, dy). Find the smallest t that lands on an
+  // edge of the box, and which axis that edge belongs to.
+  const tx = halfW > 0 && dx !== 0 ? halfW / Math.abs(dx) : Number.POSITIVE_INFINITY;
+  const ty = halfH > 0 && dy !== 0 ? halfH / Math.abs(dy) : Number.POSITIVE_INFINITY;
+  const t = Math.min(tx, ty);
+  if (!Number.isFinite(t)) return null;
+
+  const exit: 'horizontal' | 'vertical' = tx <= ty ? 'horizontal' : 'vertical';
+
+  const edgeX = cx + dx * t;
+  const edgeY = cy + dy * t;
+
+  // Advance along the ray by the standoff distance.
+  const rayLen = Math.sqrt(dx * dx + dy * dy);
+  const ux = dx / rayLen;
+  const uy = dy / rayLen;
+
+  // Overshoot guard: the standoff must not push the origin past the target.
+  // Measure edge-to-target in pixels rather than scaling the ray by (1 - t):
+  // t is a ratio of box extents, so that form understates the clearance when the
+  // ray leaves through the long side of a wide label, and killed connectors that
+  // had ample room. Whether the line is long enough to be worth drawing is
+  // decided downstream against MIN_CONNECTOR_LENGTH, once the marker pullback is
+  // known — this guard only rejects a standoff that would overshoot the target.
+  const edgeToTarget = Math.hypot(targetX - edgeX, targetY - edgeY);
+  if (standoff >= edgeToTarget) return null;
+
+  const x = edgeX + ux * standoff;
+  const y = edgeY + uy * standoff;
+
+  return { x, y, exit };
 }
 
 /** Estimate the bounding box of an annotation label using its resolved style. */
@@ -190,36 +239,132 @@ export function estimateLabelBounds(
       fontWeight,
       lineHeight: label.style.lineHeight ?? DEFAULT_LINE_HEIGHT,
       textAnchor: label.style.textAnchor ?? 'start',
+      fontFamily: label.style.fontFamily,
     },
     measure,
   );
 }
 
+/** Arrowhead triangle points: tip + two base corners. */
+export interface ArrowheadPoints {
+  tip: { x: number; y: number };
+  baseLeft: { x: number; y: number };
+  baseRight: { x: number; y: number };
+}
+
+// Both live in `constants.ts` (the min-length gate has to reason about the
+// arrowhead's stroke budget, and constants.ts can't import from here without a
+// cycle). Re-exported so the renderer's import path doesn't move.
+export { ARROWHEAD_HALF_WIDTH, ARROWHEAD_LENGTH };
+
 /**
- * Recompute the connector origin for a label after it has been repositioned.
- * Encapsulates the pattern of recalculating which edge of the text box the
- * connector should exit from based on the target data point.
+ * Compute arrowhead triangle geometry at a connector endpoint.
+ * Returns the tip (at the endpoint) and two base corners perpendicular to the
+ * tangent direction.
+ *
+ * @param tipX - X coordinate of the arrowhead tip
+ * @param tipY - Y coordinate of the arrowhead tip
+ * @param tangentX - X component of the tangent direction (toward the tip)
+ * @param tangentY - Y component of the tangent direction (toward the tip)
+ * @param length - Arrow length along the tangent (default ARROWHEAD_LENGTH)
+ * @param halfWidth - Arrow half-width perpendicular to tangent (default ARROWHEAD_HALF_WIDTH)
  */
-export function recomputeConnector(
-  label: ResolvedLabel,
-  targetX: number,
-  targetY: number,
+export function computeArrowheadPoints(
+  tipX: number,
+  tipY: number,
+  tangentX: number,
+  tangentY: number,
+  length = ARROWHEAD_LENGTH,
+  halfWidth = ARROWHEAD_HALF_WIDTH,
+): ArrowheadPoints {
+  const tLen = Math.sqrt(tangentX * tangentX + tangentY * tangentY) || 1;
+  const ux = tangentX / tLen;
+  const uy = tangentY / tLen;
+
+  const baseX = tipX - ux * length;
+  const baseY = tipY - uy * length;
+
+  const px = -uy;
+  const py = ux;
+
+  return {
+    tip: { x: tipX, y: tipY },
+    baseLeft: { x: baseX + px * halfWidth, y: baseY + py * halfWidth },
+    baseRight: { x: baseX - px * halfWidth, y: baseY - py * halfWidth },
+  };
+}
+
+/**
+ * Distance the connector's data-point end is pulled back so the line stops short
+ * of the endpoint marker instead of piercing it.
+ */
+export function connectorPullbackGap(markerRadius: number, arrow: boolean): number {
+  return arrow ? Math.max(markerRadius + 2, 2) : Math.max(markerRadius + 3, 4);
+}
+
+/**
+ * Rebuild a connector's geometry against a (possibly moved) annotation bounds.
+ *
+ * `from` comes from the ray-box exit; `to` is recomputed by pulling back from
+ * `connector.endpoint` — never from the already-pulled-back `to`, which would
+ * shrink the line a little more on every pass.
+ *
+ * Returns `undefined` when the connector should be suppressed: the target sits
+ * inside the text block, or the resulting line is shorter than
+ * `MIN_CONNECTOR_LENGTH`.
+ */
+export function refreshConnector(
+  connector: NonNullable<ResolvedLabel['connector']>,
+  bounds: Rect,
+  markerRadius: number,
 ): ResolvedLabel['connector'] {
-  const connector = label.connector;
-  if (!connector) return connector;
+  // `endpoint` is the un-pulled-back data point, and the only valid basis for a
+  // rebuild: pulling back from `to` (already pulled back) shrinks the line a
+  // little more on every pass. Every resolver sets it, but the field is optional
+  // on the public `ResolvedLabel` type, so a layout from another producer could
+  // omit it — bail rather than silently compound the error.
+  if (!connector.endpoint) return undefined;
+  const endpoint = connector.endpoint;
 
-  const fontSize = label.style.fontSize ?? DEFAULT_ANNOTATION_FONT_SIZE;
-  const fontWeight = label.style.fontWeight ?? DEFAULT_ANNOTATION_FONT_WEIGHT;
-  const connStyle = connector.style === 'curve' ? ('curve' as const) : ('straight' as const);
-  const newFrom = computeConnectorOrigin(
-    label.x,
-    label.y,
-    label.text,
-    fontSize,
-    fontWeight,
-    targetX,
-    targetY,
-    connStyle,
-  );
-  return { ...connector, from: newFrom };
+  // A drop-line is not a leader: it's a vertical rule pinned to the data point's
+  // x, running from just above the label box down to the marker. Rebuilding it
+  // from a ray-box exit tilts it into a diagonal (which the renderer draws with
+  // shape-rendering: crispEdges, assuming axis alignment), and the
+  // MIN_CONNECTOR_LENGTH rule below would delete it outright once the label sits
+  // near its point.
+  //
+  // This mirrors `resolveDropLineAnnotation`'s formula exactly — `from` above the
+  // label top, `to` pulled back from the point — so a nudged drop-line keeps the
+  // same geometry it resolved with, just at the label's new position.
+  if (connector.style === 'drop-line') {
+    const gap = connectorPullbackGap(markerRadius, false);
+    return {
+      ...connector,
+      from: { x: endpoint.x, y: bounds.y - DROP_LINE_TOP_GAP },
+      to: { x: endpoint.x, y: endpoint.y - gap },
+      exit: 'vertical',
+    };
+  }
+
+  const exit = connectorExit(bounds, endpoint.x, endpoint.y);
+  if (!exit) return undefined;
+
+  const from = { x: exit.x, y: exit.y };
+
+  const gap = connectorPullbackGap(markerRadius, connector.arrow);
+  const cdx = endpoint.x - from.x;
+  const cdy = endpoint.y - from.y;
+  const dist = Math.sqrt(cdx * cdx + cdy * cdy);
+  const to =
+    dist > 0
+      ? { x: endpoint.x - (cdx / dist) * gap, y: endpoint.y - (cdy / dist) * gap }
+      : { ...endpoint };
+
+  // Min-length check runs AFTER the pullback: a near-degenerate line can flip
+  // direction once its end is pulled back, and checking first would miss it.
+  const lx = to.x - from.x;
+  const ly = to.y - from.y;
+  if (!connectorIsDrawable(Math.sqrt(lx * lx + ly * ly), connector.arrow)) return undefined;
+
+  return { ...connector, from, to, exit: exit.exit };
 }

package/src/annotations/move.ts

@@ -0,0 +1,135 @@
+/**
+ * The single owner of "where a resolved annotation sits".
+ *
+ * WHY THIS MODULE EXISTS
+ *
+ * An annotation's position is not one number, it's five that have to agree: the
+ * label origin, the subtitle origin (absolute, not relative), the label-only
+ * bounds, the label-union-subtitle block bounds, and the connector endpoints. The
+ * resolver establishes that agreement -- and then FOUR later passes re-position
+ * the block (obstacle nudge, mutual-collision nudge, clamp-to-bounds, and the
+ * auto-placement search). Every one of them has to re-establish all five.
+ *
+ * When two of those passes each did their own arithmetic, the two copies drifted:
+ * one spelled the subtitle gap `SUBTITLE_GAP`, the other spelled it `+ 2`, and a
+ * subtitled auto-placed callout rendered its second line 3px off from where the
+ * search had scored it. That is the bug this module exists to make unrepresentable.
+ *
+ * So: nothing outside this file writes annotation geometry. `moveAnnotationTo`
+ * (absolute) and `moveAnnotationBy` (delta) are the only doors, and they always
+ * leave all five in agreement.
+ */
+
+import type { Rect, ResolvedAnnotation, ResolvedLabel } from '@opendata-ai/openchart-core';
+import {
+  DEFAULT_ANNOTATION_FONT_SIZE,
+  DEFAULT_LINE_HEIGHT,
+  SUBTITLE_FONT_WEIGHT,
+  subtitleFontSize,
+} from './constants';
+import {
+  type AnnotationMeasureTextFn,
+  computeTextBlockBounds,
+  estimateLabelBounds,
+  refreshConnector,
+  unionRects,
+} from './geometry';
+import { markerClearance } from './resolve-text';
+
+/**
+ * The full block an annotation occupies: label text plus its subtitle.
+ *
+ * This is the box other annotations must avoid, and the box the connector exits.
+ * It is NOT `label.bounds` -- that one is label-only by contract, because the
+ * renderer sizes the `background` plate from it and a subtitled annotation must
+ * not get a plate sized to both lines.
+ */
+export function annotationBlockBounds(
+  annotation: ResolvedAnnotation,
+  label: ResolvedLabel,
+  measure: AnnotationMeasureTextFn,
+): Rect {
+  const labelBounds = estimateLabelBounds(label, measure);
+  const sub = annotation.subtitle;
+  if (!sub) return labelBounds;
+
+  const subBounds = computeTextBlockBounds(
+    sub.x,
+    sub.y,
+    sub.text,
+    {
+      // Every resolver stamps all three, so these fallbacks are unreachable today.
+      // They still come from the constants: a hand-rolled `?? 10` here is a second
+      // definition of the subtitle's type, free to drift from the real one.
+      fontSize: sub.style.fontSize ?? subtitleFontSize(DEFAULT_ANNOTATION_FONT_SIZE),
+      fontWeight: Number(sub.style.fontWeight) || SUBTITLE_FONT_WEIGHT,
+      lineHeight: sub.style.lineHeight ?? DEFAULT_LINE_HEIGHT,
+      textAnchor: sub.style.textAnchor ?? 'start',
+    },
+    measure,
+  );
+  return unionRects(labelBounds, subBounds);
+}
+
+/**
+ * Put a resolved annotation's block at an absolute origin, keeping every piece of
+ * its geometry in agreement.
+ *
+ * The subtitle is TRANSLATED with the label rather than re-derived from a font-metric
+ * sum: the resolver already placed it correctly relative to the label, and a second
+ * derivation here is a second chance to disagree with the first.
+ *
+ * `textAnchor` is optional because only the auto-placement search chooses a side;
+ * the nudge passes slide a block that has already picked one.
+ */
+export function moveAnnotationTo(
+  annotation: ResolvedAnnotation,
+  label: ResolvedLabel,
+  x: number,
+  y: number,
+  measure: AnnotationMeasureTextFn,
+  textAnchor?: 'start' | 'middle' | 'end',
+): void {
+  moveAnnotationBy(annotation, label, x - label.x, y - label.y, measure, textAnchor);
+}
+
+/**
+ * Slide a resolved annotation's block by (dx, dy), keeping every piece of its
+ * geometry in agreement. See `moveAnnotationTo`.
+ */
+export function moveAnnotationBy(
+  annotation: ResolvedAnnotation,
+  label: ResolvedLabel,
+  dx: number,
+  dy: number,
+  measure: AnnotationMeasureTextFn,
+  textAnchor?: 'start' | 'middle' | 'end',
+): void {
+  const movedLabel: ResolvedLabel = { ...label, x: label.x + dx, y: label.y + dy };
+  if (textAnchor) {
+    movedLabel.style = { ...movedLabel.style, textAnchor };
+  }
+
+  if (annotation.subtitle) {
+    annotation.subtitle = {
+      ...annotation.subtitle,
+      x: annotation.subtitle.x + dx,
+      y: annotation.subtitle.y + dy,
+      ...(textAnchor ? { style: { ...annotation.subtitle.style, textAnchor } } : {}),
+    };
+  }
+
+  movedLabel.bounds = estimateLabelBounds(movedLabel, measure);
+  const blockBounds = annotationBlockBounds(annotation, movedLabel, measure);
+
+  if (movedLabel.connector) {
+    movedLabel.connector = refreshConnector(
+      movedLabel.connector,
+      blockBounds,
+      markerClearance(annotation.dot),
+    );
+  }
+
+  annotation.label = movedLabel;
+  annotation.bounds = blockBounds;
+}

package/src/annotations/placement.ts

@@ -4,6 +4,7 @@
  */
 
 import { overlapArea, type Rect } from '@opendata-ai/openchart-core';
+import { ANCHOR_OFFSET, subtitleBaselineY } from './constants';
 import {
   type AnnotationMeasureTextFn,
   computeTextBlockBounds,
@@ -240,7 +241,7 @@ const CLEAN_THRESHOLD = EPSILON * 16;
 interface DirectionDef {
   ux: number;
   uy: number;
-  textAnchor: 'start' | 'middle' | 'end';
+  textAnchor: 'start' | 'end';
   attach:
     | 'bottom-center'
     | 'bottom-left'
@@ -255,11 +256,11 @@ interface DirectionDef {
 const D = Math.SQRT1_2;
 
 const DIRECTIONS: DirectionDef[] = [
-  { ux: 0, uy: -1, textAnchor: 'middle', attach: 'bottom-center' }, // N
+  { ux: 0, uy: -1, textAnchor: 'start', attach: 'bottom-center' }, // N
   { ux: D, uy: -D, textAnchor: 'start', attach: 'bottom-left' }, // NE
   { ux: 1, uy: 0, textAnchor: 'start', attach: 'left-middle' }, // E
   { ux: D, uy: D, textAnchor: 'start', attach: 'top-left' }, // SE
-  { ux: 0, uy: 1, textAnchor: 'middle', attach: 'top-center' }, // S
+  { ux: 0, uy: 1, textAnchor: 'start', attach: 'top-center' }, // S
   { ux: -D, uy: D, textAnchor: 'end', attach: 'top-right' }, // SW
   { ux: -1, uy: 0, textAnchor: 'end', attach: 'right-middle' }, // W
   { ux: -D, uy: -D, textAnchor: 'end', attach: 'bottom-right' }, // NW
@@ -272,7 +273,7 @@ const UPPER_HALF_ORDER = [3, 4, 5, 2, 1, 0, 7, 6]; // SE, S, SW, E, NE, N, NW, W
 export interface PlacementCandidate {
   labelX: number;
   labelY: number;
-  textAnchor: 'start' | 'middle' | 'end';
+  textAnchor: 'start' | 'end';
   box: Rect;
   directionIndex: number;
   ring: 1 | 2 | 3;
@@ -309,11 +310,20 @@ function labelPositionFromAttachment(
   dir: DirectionDef,
   boxHeight: number,
   fontSize: number,
+  boxWidth: number,
 ): { labelX: number; labelY: number } {
-  const labelX = attachPt.x;
-  let labelY: number;
-
   const attach = dir.attach;
+
+  // A `*-center` attach means the block straddles the point, so `labelX` (the
+  // text's start edge, since these directions render textAnchor 'start') has to
+  // back off by half the block width. Centering the BLOCK is not the same as
+  // center-aligning the TEXT: the lines inside stay left-aligned and ragged
+  // right, per the reference voice. Without this the point sits at the block's
+  // left edge and a "top" anchor reads as "up and to the right".
+  const centered = attach === 'top-center' || attach === 'bottom-center';
+  const labelX = centered ? attachPt.x - boxWidth / 2 : attachPt.x;
+
+  let labelY: number;
   if (attach === 'left-middle' || attach === 'right-middle') {
     labelY = attachPt.y - boxHeight / 2 + fontSize;
   } else if (attach === 'top-left' || attach === 'top-center' || attach === 'top-right') {
@@ -414,7 +424,7 @@ function scoreCandidate(
 export interface PlacementResult {
   labelX: number;
   labelY: number;
-  textAnchor: 'start' | 'middle' | 'end';
+  textAnchor: 'start' | 'end';
   bounds: Rect;
   score: number;
   debug?: CandidateScoreBreakdown[];
@@ -428,9 +438,11 @@ export function findBestPlacement(
   anchorX: number,
   anchorY: number,
   text: string,
-  style: { fontSize: number; fontWeight: number; lineHeight: number },
+  style: { fontSize: number; fontWeight: number; lineHeight: number; fontFamily?: string },
   subtitleText: string | undefined,
-  subtitleStyle: { fontSize: number; fontWeight: number; lineHeight: number } | undefined,
+  subtitleStyle:
+    | { fontSize: number; fontWeight: number; lineHeight: number; fontFamily?: string }
+    | undefined,
   obstacles: Rect[],
   chartArea: Rect,
   svgRect: Rect,
@@ -454,7 +466,29 @@ export function findBestPlacement(
   );
   const boxHeight = sampleBounds.height;
 
-  const r1 = 12;
+  // Centering a `*-center` attach needs the width of the WHOLE block, not just
+  // the primary line: a subtitle is often the wider of the two, and centering on
+  // the primary width alone would leave a lede+subtitle stack visibly off-center
+  // over its point.
+  const subtitleSampleWidth =
+    subtitleText && subtitleStyle
+      ? computeTextBlockBounds(
+          0,
+          subtitleStyle.fontSize,
+          subtitleText,
+          { ...subtitleStyle, textAnchor: 'start' },
+          measure,
+        ).width
+      : 0;
+  const boxWidth = Math.max(sampleBounds.width, subtitleSampleWidth);
+
+  // The innermost ring is the default setback for an auto-placed label, so it's
+  // the same quantity ANCHOR_OFFSET expresses for the explicit path — keep them
+  // as one constant. A 12px ring sat inside the standoff + marker-pullback
+  // overhead, so an auto-placed label's connector was always shorter than
+  // MIN_CONNECTOR_LENGTH and got suppressed: six bare callouts rendered as
+  // floating text with no leader back to the data.
+  const r1 = ANCHOR_OFFSET;
   const r2 = r1 + boxHeight + 8;
   const r3 = 2 * r2;
 
@@ -473,6 +507,7 @@ export function findBestPlacement(
           dir,
           boxHeight,
           style.fontSize,
+          boxWidth,
         );
 
         let box = computeTextBlockBounds(
@@ -488,8 +523,15 @@ export function findBestPlacement(
 
         // Union with subtitle bounds if present
         if (subtitleText && subtitleStyle) {
-          const primaryLineCount = text.split('\n').length;
-          const subtitleY = labelY + style.fontSize * style.lineHeight * primaryLineCount + 2;
+          // This pass SCORES a candidate subtitle position; the resolver STAMPS the
+          // one that renders. They must agree, or the scored block height is a lie
+          // and the bounds other annotations avoid no longer contain the subtitle.
+          // Hence the shared formula rather than a second copy of the sum.
+          const subtitleY = subtitleBaselineY(
+            labelY,
+            style.fontSize * style.lineHeight,
+            text.split('\n').length,
+          );
           const subBounds = computeTextBlockBounds(
             labelX,
             subtitleY,
@@ -579,10 +621,16 @@ export function findBestPlacement(
 export function isAutoPlacement(annotation: {
   anchor?: string;
   offset?: { dx?: number; dy?: number };
-  connector?: string | boolean;
+  connector?: string | boolean | { type?: string };
 }): boolean {
   if (annotation.offset) return false;
   if (annotation.anchor && annotation.anchor !== 'auto') return false;
   if (annotation.connector === 'drop-line') return false;
+  if (
+    typeof annotation.connector === 'object' &&
+    annotation.connector !== null &&
+    annotation.connector.type === 'drop-line'
+  )
+    return false;
   return true;
 }

package/src/annotations/resolve-range.ts

@@ -20,6 +20,7 @@ export function resolveRangeAnnotation(
   scales: ResolvedScales,
   chartArea: Rect,
   isDark: boolean,
+  fontFamily?: string,
 ): ResolvedAnnotation | null {
   let x = chartArea.x;
   let y = chartArea.y;
@@ -79,6 +80,7 @@ export function resolveRangeAnnotation(
       annotation.fontWeight ?? 500,
       undefined,
       isDark,
+      fontFamily,
     );
     if (centered) {
       style.textAnchor = 'middle';