fix: text width ratio, brand reserve, top legend spacing, and breakpoint annotations

Bump AVG_CHAR_WIDTH_RATIO from 0.55 to 0.57 across all three text
measurement sites for more accurate width estimates. Increase brand
reserve width to 130px. Only reserve brand space for bottom-positioned
legends since the watermark renders at the bottom. Force inline
annotation positioning when users explicitly provide breakpoint
annotations.

Author: rileyhilliard

packages/core/src/layout/text-measure.ts

@@ -12,7 +12,7 @@
  * Inter is slightly wider than Helvetica, narrower than Courier.
  * This is a reasonable middle ground.
  */
-const AVG_CHAR_WIDTH_RATIO = 0.55;
+const AVG_CHAR_WIDTH_RATIO = 0.57;
 
 /** Narrower characters (i, l, t, etc.) bring the average down. */
 const WEIGHT_ADJUSTMENT: Record<number, number> = {
@@ -65,7 +65,7 @@ export function estimateTextWidth(text: string, fontSize: number, fontWeight = 4
  * so adjacent text doesn't crowd it. Used by chrome and legend layout to avoid
  * overlapping the brand.
  */
-export const BRAND_RESERVE_WIDTH = 110;
+export const BRAND_RESERVE_WIDTH = 130;
 
 /** Font size of the brand watermark (px). Shared between layout and renderer. */
 export const BRAND_FONT_SIZE = 12;

packages/engine/src/annotations/__tests__/compute.test.ts

@@ -866,8 +866,8 @@ describe('computeAnnotations', () => {
 
       // Curve should start from right edge of text, not top edge
       // Right edge x ≈ label.x + textWidth
-      // "Curve test" = 10 chars * 12 * 0.55 = 66
-      expect(connector.from.x).toBeCloseTo(label.x + 66, 1);
+      // "Curve test" = 10 chars * 12 * 0.57 = 68.4
+      expect(connector.from.x).toBeCloseTo(label.x + 68.4, 1);
     });
   });
 

packages/engine/src/compile.ts

@@ -240,7 +240,7 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
   // Responsive strategy
   const breakpoint = getBreakpoint(options.width);
   const heightClass = getHeightClass(options.height);
-  const strategy = getLayoutStrategy(breakpoint, heightClass);
+  let strategy = getLayoutStrategy(breakpoint, heightClass);
 
   // Apply breakpoint-conditional overrides from the expanded spec
   const rawSpec = expandedSpec as Record<string, unknown>;
@@ -286,6 +286,9 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
         ...chartSpec,
         annotations: bp.annotations as NormalizedChartSpec['annotations'],
       };
+      // User explicitly provided annotations at this breakpoint — override the
+      // responsive strategy so they render inline instead of being stripped.
+      strategy = { ...strategy, annotationPosition: 'inline' };
     }
   }
 

packages/engine/src/legend/compute.ts

@@ -289,9 +289,11 @@ export function computeLegend(
   }
 
   // Top/bottom-positioned legend: horizontal flow with overflow protection.
-  // Reserve space on the right so legend entries don't overlap the brand watermark.
+  // Reserve space on the right for bottom legends so they don't overlap the brand
+  // watermark. Top legends don't need this since the brand renders at the bottom.
+  const reserveBrand = watermark && resolvedPosition === 'bottom';
   const availableWidth =
-    chartArea.width - LEGEND_PADDING * 2 - (watermark ? BRAND_RESERVE_WIDTH : 0);
+    chartArea.width - LEGEND_PADDING * 2 - (reserveBrand ? BRAND_RESERVE_WIDTH : 0);
 
   // Apply symbolLimit first if set (minimum 1), then fit remaining entries to available rows.
   if (spec.legend?.symbolLimit != null) {

packages/vanilla/src/sankey-renderer.ts

@@ -85,7 +85,7 @@ function stampAnimationAttrs(
 function wrapText(text: string, fontSize: number, fontWeight: number, maxWidth: number): string[] {
   if (maxWidth <= 0) return [text];
 
-  const AVG_CHAR_WIDTH = 0.55;
+  const AVG_CHAR_WIDTH = 0.57;
   const WEIGHT_FACTORS: Record<number, number> = {
     100: 0.9,
     200: 0.92,

packages/vanilla/src/svg-renderer.ts

@@ -178,7 +178,7 @@ function wrapText(
   }
 
   // Heuristic character width matching text-measure.ts
-  const AVG_CHAR_WIDTH = 0.55;
+  const AVG_CHAR_WIDTH = 0.57;
   const WEIGHT_FACTORS: Record<number, number> = {
     100: 0.9,
     200: 0.92,