@opendata-ai/openchart-core 2.9.1 → 2.11.0

package/dist/styles.css

@@ -662,6 +662,8 @@ th[aria-sort="descending"] .viz-table-sort-btn::before {
   overflow: hidden;
   background: var(--viz-bg);
   font-family: var(--viz-font-family);
+  width: 100%;
+  height: 100%;
 }
 
 .viz-graph-canvas {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-core",
-  "version": "2.9.1",
+  "version": "2.11.0",
   "description": "Types, theme, colors, accessibility, and utilities for openchart",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",

package/src/index.ts

@@ -54,6 +54,7 @@ export {
 // ---------------------------------------------------------------------------
 
 export {
+  BRAND_RESERVE_WIDTH,
   computeChrome,
   estimateTextWidth,
 } from './layout/index';
@@ -66,12 +67,15 @@ export type {
   AnnotationPosition,
   AxisLabelDensity,
   Breakpoint,
+  ChromeMode,
+  HeightClass,
   LabelMode,
   LayoutStrategy,
   LegendPosition,
 } from './responsive/index';
 export {
   getBreakpoint,
+  getHeightClass,
   getLayoutStrategy,
 } from './responsive/index';
 
@@ -83,7 +87,7 @@ export type {
   LabelCandidate,
   LabelPriority,
 } from './labels/index';
-export { resolveCollisions } from './labels/index';
+export { computeLabelBounds, detectCollision, resolveCollisions } from './labels/index';
 
 // ---------------------------------------------------------------------------
 // Locale: number and date formatting

package/src/labels/collision.ts

@@ -6,6 +6,7 @@
  * Targeting ~60% of Infrographic quality for Phase 0.
  */
 
+import { estimateTextWidth } from '../layout/text-measure';
 import type { Rect, ResolvedLabel, TextStyle } from '../types/layout';
 
 // ---------------------------------------------------------------------------
@@ -159,3 +160,28 @@ export function resolveCollisions(labels: LabelCandidate[]): ResolvedLabel[] {
 
   return results;
 }
+
+// ---------------------------------------------------------------------------
+// Label bounds estimation
+// ---------------------------------------------------------------------------
+
+/**
+ * Compute the bounding rect of a resolved label from its position and text.
+ * Uses heuristic text measurement so it works without DOM access.
+ */
+export function computeLabelBounds(label: ResolvedLabel): Rect {
+  const fontSize = label.style.fontSize;
+  const fontWeight = label.style.fontWeight;
+  const width = estimateTextWidth(label.text, fontSize, fontWeight);
+  const height = fontSize * (label.style.lineHeight ?? 1.2);
+
+  // Adjust x based on text anchor
+  let x = label.x;
+  if (label.style.textAnchor === 'middle') {
+    x = label.x - width / 2;
+  } else if (label.style.textAnchor === 'end') {
+    x = label.x - width;
+  }
+
+  return { x, y: label.y, width, height };
+}

package/src/labels/index.ts

@@ -3,4 +3,4 @@
  */
 
 export type { LabelCandidate, LabelPriority } from './collision';
-export { detectCollision, resolveCollisions } from './collision';
+export { computeLabelBounds, detectCollision, resolveCollisions } from './collision';

package/src/layout/__tests__/chrome.test.ts

@@ -100,6 +100,23 @@ describe('computeChrome', () => {
     expect(result.bottomHeight).toBeGreaterThan(0);
   });
 
+  it('reserves extra height when title wraps to multiple lines at narrow widths', () => {
+    const longTitle =
+      'Global Economic Recovery Trends Show Surprising Resilience Across Major Markets';
+    const chrome: Chrome = { title: longTitle, subtitle: 'Subtitle text' };
+
+    // At wide width, title fits on one line
+    const wide = computeChrome(chrome, theme, 800);
+    // At narrow width, title wraps to multiple lines
+    const narrow = computeChrome(chrome, theme, 300);
+
+    // Narrow should reserve more top height due to title wrapping
+    expect(narrow.topHeight).toBeGreaterThan(wide.topHeight);
+
+    // Subtitle should be pushed further down to avoid collision
+    expect(narrow.subtitle!.y).toBeGreaterThan(wide.subtitle!.y);
+  });
+
   it('uses measureText function when provided', () => {
     const measureText = (text: string, fontSize: number) => ({
       width: text.length * fontSize * 0.6,

package/src/layout/chrome.ts

@@ -3,8 +3,17 @@
  *
  * Takes a Chrome spec + resolved theme and produces a ResolvedChrome
  * with computed text positions, styles, and total chrome heights.
+ *
+ * Supports three chrome modes:
+ * - full: all chrome elements rendered at normal size
+ * - compact: title only, no subtitle/source/byline/footer
+ * - hidden: no chrome at all (maximizes chart area)
+ *
+ * Font sizes scale down continuously at narrow widths to keep
+ * chrome proportional to the container.
  */
 
+import type { ChromeMode } from '../responsive/breakpoints';
 import type {
   MeasureTextFn,
   ResolvedChrome,
@@ -13,7 +22,7 @@ import type {
 } from '../types/layout';
 import type { Chrome, ChromeText } from '../types/spec';
 import type { ChromeDefaults, ResolvedTheme } from '../types/theme';
-import { estimateTextHeight, estimateTextWidth } from './text-measure';
+import { BRAND_RESERVE_WIDTH, estimateCharWidth, estimateTextHeight } from './text-measure';
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -28,16 +37,32 @@ function normalizeChromeText(
   return { text: value.text, style: value.style, offset: value.offset };
 }
 
-/** Build a TextStyle from chrome defaults + optional overrides. */
+/**
+ * Scale a font size based on container width. Only applies to default sizes
+ * (not user overrides). Scales from 100% at >= 500px down to 72% at <= 250px.
+ */
+function scaleFontSize(baseFontSize: number, width: number): number {
+  if (width >= 500) return baseFontSize;
+  if (width <= 250) return Math.max(Math.round(baseFontSize * 0.72), 10);
+  const t = (width - 250) / 250;
+  return Math.max(Math.round(baseFontSize * (0.72 + t * 0.28)), 10);
+}
+
+/** Build a TextStyle from chrome defaults + optional overrides, with width-based scaling. */
 function buildTextStyle(
   defaults: ChromeDefaults,
   fontFamily: string,
   textColor: string,
+  width: number,
   overrides?: ChromeText['style'],
 ): TextStyle {
+  const hasExplicitSize = overrides?.fontSize !== undefined;
+  const baseFontSize = overrides?.fontSize ?? defaults.fontSize;
+  const fontSize = hasExplicitSize ? baseFontSize : scaleFontSize(baseFontSize, width);
+
   return {
     fontFamily: overrides?.fontFamily ?? fontFamily,
-    fontSize: overrides?.fontSize ?? defaults.fontSize,
+    fontSize,
     fontWeight: overrides?.fontWeight ?? defaults.fontWeight,
     fill: overrides?.color ?? textColor ?? defaults.color,
     lineHeight: defaults.lineHeight,
@@ -46,27 +71,40 @@ function buildTextStyle(
   };
 }
 
-/** Measure text width using the provided function or heuristic fallback. */
-function measureWidth(text: string, style: TextStyle, measureText?: MeasureTextFn): number {
-  if (measureText) {
-    return measureText(text, style.fontSize, style.fontWeight).width;
-  }
-  return estimateTextWidth(text, style.fontSize, style.fontWeight);
-}
-
 /**
  * Estimate how many lines text will wrap to, given a max width.
+ * Uses character-count word-wrapping that matches the SVG renderer's
+ * wrapText behavior (word-boundary breaks, same charWidth heuristic).
  * Returns at least 1.
  */
 function estimateLineCount(
   text: string,
   style: TextStyle,
   maxWidth: number,
-  measureText?: MeasureTextFn,
+  _measureText?: MeasureTextFn,
 ): number {
-  const fullWidth = measureWidth(text, style, measureText);
-  if (fullWidth <= maxWidth) return 1;
-  return Math.ceil(fullWidth / maxWidth);
+  if (maxWidth <= 0) return 1;
+
+  const charWidth = estimateCharWidth(style.fontSize, style.fontWeight);
+  const maxChars = Math.floor(maxWidth / charWidth);
+
+  if (text.length <= maxChars) return 1;
+
+  const words = text.split(' ');
+  let lines = 1;
+  let current = '';
+
+  for (const word of words) {
+    const candidate = current ? `${current} ${word}` : word;
+    if (candidate.length > maxChars && current) {
+      lines++;
+      current = word;
+    } else {
+      current = candidate;
+    }
+  }
+
+  return lines;
 }
 
 // ---------------------------------------------------------------------------
@@ -83,24 +121,28 @@ function estimateLineCount(
  * @param theme - The fully resolved theme.
  * @param width - Total available width in pixels.
  * @param measureText - Optional real text measurement function from the adapter.
+ * @param chromeMode - Chrome display mode: full, compact (title only), or hidden.
+ * @param padding - Override padding (for scaled padding from dimensions).
  */
 export function computeChrome(
   chrome: Chrome | undefined,
   theme: ResolvedTheme,
   width: number,
   measureText?: MeasureTextFn,
+  chromeMode: ChromeMode = 'full',
+  padding?: number,
 ): ResolvedChrome {
-  if (!chrome) {
+  if (!chrome || chromeMode === 'hidden') {
     return { topHeight: 0, bottomHeight: 0 };
   }
 
-  const padding = theme.spacing.padding;
+  const pad = padding ?? theme.spacing.padding;
   const chromeGap = theme.spacing.chromeGap;
-  const maxWidth = width - padding * 2;
+  const maxWidth = width - pad * 2;
   const fontFamily = theme.fonts.family;
 
   // Track vertical cursor for top elements
-  let topY = padding;
+  let topY = pad;
   const topElements: Partial<Pick<ResolvedChrome, 'title' | 'subtitle'>> = {};
 
   // Title
@@ -110,12 +152,13 @@ export function computeChrome(
       theme.chrome.title,
       fontFamily,
       theme.chrome.title.color,
+      width,
       titleNorm.style,
     );
     const lineCount = estimateLineCount(titleNorm.text, style, maxWidth, measureText);
     const element: ResolvedChromeElement = {
       text: titleNorm.text,
-      x: padding + (titleNorm.offset?.dx ?? 0),
+      x: pad + (titleNorm.offset?.dx ?? 0),
       y: topY + (titleNorm.offset?.dy ?? 0),
       maxWidth,
       style,
@@ -124,19 +167,20 @@ export function computeChrome(
     topY += estimateTextHeight(style.fontSize, lineCount, style.lineHeight) + chromeGap;
   }
 
-  // Subtitle
-  const subtitleNorm = normalizeChromeText(chrome.subtitle);
+  // Subtitle (hidden in compact mode)
+  const subtitleNorm = chromeMode === 'compact' ? null : normalizeChromeText(chrome.subtitle);
   if (subtitleNorm) {
     const style = buildTextStyle(
       theme.chrome.subtitle,
       fontFamily,
       theme.chrome.subtitle.color,
+      width,
       subtitleNorm.style,
     );
     const lineCount = estimateLineCount(subtitleNorm.text, style, maxWidth, measureText);
     const element: ResolvedChromeElement = {
       text: subtitleNorm.text,
-      x: padding + (subtitleNorm.offset?.dx ?? 0),
+      x: pad + (subtitleNorm.offset?.dx ?? 0),
       y: topY + (subtitleNorm.offset?.dy ?? 0),
       maxWidth,
       style,
@@ -147,10 +191,20 @@ export function computeChrome(
 
   // Add chromeToChart gap if there are any top elements
   const hasTopChrome = titleNorm || subtitleNorm;
-  const topHeight = hasTopChrome ? topY - padding + theme.spacing.chromeToChart - chromeGap : 0;
+  const topHeight = hasTopChrome ? topY - pad + theme.spacing.chromeToChart - chromeGap : 0;
+
+  // Bottom elements hidden in compact mode
+  if (chromeMode === 'compact') {
+    return {
+      topHeight,
+      bottomHeight: 0,
+      ...topElements,
+    };
+  }
 
   // Bottom elements: source, byline, footer
-  // We compute heights bottom-up but position them after knowing total
+  // Reserve space on the right for the brand watermark so text doesn't overlap it
+  const bottomMaxWidth = maxWidth - BRAND_RESERVE_WIDTH;
   const bottomElements: Partial<Pick<ResolvedChrome, 'source' | 'byline' | 'footer'>> = {};
   let bottomHeight = 0;
 
@@ -191,17 +245,23 @@ export function computeChrome(
     bottomHeight += theme.spacing.chartToFooter;
 
     for (const item of bottomItems) {
-      const style = buildTextStyle(item.defaults, fontFamily, item.defaults.color, item.norm.style);
-      const lineCount = estimateLineCount(item.norm.text, style, maxWidth, measureText);
+      const style = buildTextStyle(
+        item.defaults,
+        fontFamily,
+        item.defaults.color,
+        width,
+        item.norm.style,
+      );
+      const lineCount = estimateLineCount(item.norm.text, style, bottomMaxWidth, measureText);
       const height = estimateTextHeight(style.fontSize, lineCount, style.lineHeight);
 
       // y positions will be computed relative to the bottom of the
       // chart area by the engine. We store offsets from bottom start.
       bottomElements[item.key] = {
         text: item.norm.text,
-        x: padding + (item.norm.offset?.dx ?? 0),
+        x: pad + (item.norm.offset?.dx ?? 0),
         y: bottomHeight + (item.norm.offset?.dy ?? 0), // offset from where bottom chrome starts
-        maxWidth,
+        maxWidth: bottomMaxWidth,
         style,
       };
 
@@ -211,7 +271,7 @@ export function computeChrome(
     // Remove trailing gap
     bottomHeight -= chromeGap;
     // Add bottom padding
-    bottomHeight += padding;
+    bottomHeight += pad;
   }
 
   return {

package/src/layout/index.ts

@@ -3,4 +3,9 @@
  */
 
 export { computeChrome } from './chrome';
-export { estimateTextHeight, estimateTextWidth } from './text-measure';
+export {
+  BRAND_RESERVE_WIDTH,
+  estimateCharWidth,
+  estimateTextHeight,
+  estimateTextWidth,
+} from './text-measure';

package/src/layout/text-measure.ts

@@ -27,6 +27,15 @@ const WEIGHT_ADJUSTMENT: Record<number, number> = {
   900: 1.12,
 };
 
+/**
+ * Estimate the average character width for a given font size and weight.
+ * Used by both text width estimation and word-wrap line counting.
+ */
+export function estimateCharWidth(fontSize: number, fontWeight = 400): number {
+  const weightFactor = WEIGHT_ADJUSTMENT[fontWeight] ?? 1.0;
+  return fontSize * AVG_CHAR_WIDTH_RATIO * weightFactor;
+}
+
 /**
  * Estimate the rendered width of a text string.
  *
@@ -38,10 +47,17 @@ const WEIGHT_ADJUSTMENT: Record<number, number> = {
  * @param fontWeight - Font weight (100-900). Defaults to 400.
  */
 export function estimateTextWidth(text: string, fontSize: number, fontWeight = 400): number {
-  const weightFactor = WEIGHT_ADJUSTMENT[fontWeight] ?? 1.0;
-  return text.length * fontSize * AVG_CHAR_WIDTH_RATIO * weightFactor;
+  return text.length * estimateCharWidth(fontSize, fontWeight);
 }
 
+/**
+ * Width reserved for the "OpenData" brand watermark in the bottom-right corner.
+ * Accounts for ~8 chars at font size 20 with mixed 500/600 weight, plus a gap
+ * so adjacent text doesn't crowd it. Used by chrome and legend layout to avoid
+ * overlapping the brand.
+ */
+export const BRAND_RESERVE_WIDTH = 110;
+
 /**
  * Estimate the rendered height of a text block.
  *

package/src/responsive/__tests__/breakpoints.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { getBreakpoint, getLayoutStrategy } from '../breakpoints';
+import { getBreakpoint, getHeightClass, getLayoutStrategy } from '../breakpoints';
 
 describe('getBreakpoint', () => {
   it('returns compact for widths below 400', () => {
@@ -55,4 +55,92 @@ describe('getLayoutStrategy', () => {
     expect(compact.legendPosition).not.toBe(full.legendPosition);
     expect(compact.labelMode).not.toBe(full.labelMode);
   });
+
+  it('includes chromeMode and legendMaxHeight at normal height', () => {
+    const strategy = getLayoutStrategy('full');
+    expect(strategy.chromeMode).toBe('full');
+    expect(strategy.legendMaxHeight).toBe(-1);
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Height class detection
+// ---------------------------------------------------------------------------
+
+describe('getHeightClass', () => {
+  it('returns cramped for heights below 200', () => {
+    expect(getHeightClass(100)).toBe('cramped');
+    expect(getHeightClass(199)).toBe('cramped');
+  });
+
+  it('returns short for heights 200-350', () => {
+    expect(getHeightClass(200)).toBe('short');
+    expect(getHeightClass(280)).toBe('short');
+    expect(getHeightClass(350)).toBe('short');
+  });
+
+  it('returns normal for heights above 350', () => {
+    expect(getHeightClass(351)).toBe('normal');
+    expect(getHeightClass(800)).toBe('normal');
+  });
+
+  it('handles edge cases', () => {
+    expect(getHeightClass(0)).toBe('cramped');
+    expect(getHeightClass(-10)).toBe('cramped');
+    expect(getHeightClass(5000)).toBe('normal');
+  });
+});
+
+// ---------------------------------------------------------------------------
+// Height-aware layout strategy
+// ---------------------------------------------------------------------------
+
+describe('getLayoutStrategy with height class', () => {
+  it('normal height does not modify the width strategy', () => {
+    const withoutHeight = getLayoutStrategy('full');
+    const withNormal = getLayoutStrategy('full', 'normal');
+    expect(withoutHeight).toEqual(withNormal);
+  });
+
+  it('cramped height hides chrome and labels', () => {
+    const strategy = getLayoutStrategy('full', 'cramped');
+    expect(strategy.chromeMode).toBe('hidden');
+    expect(strategy.legendMaxHeight).toBe(0);
+    expect(strategy.labelMode).toBe('none');
+    expect(strategy.annotationPosition).toBe('tooltip-only');
+  });
+
+  it('cramped overrides even compact width strategy', () => {
+    const strategy = getLayoutStrategy('compact', 'cramped');
+    expect(strategy.chromeMode).toBe('hidden');
+    expect(strategy.legendMaxHeight).toBe(0);
+    expect(strategy.labelMode).toBe('none');
+  });
+
+  it('short height compresses chrome and caps legend', () => {
+    const strategy = getLayoutStrategy('full', 'short');
+    expect(strategy.chromeMode).toBe('compact');
+    expect(strategy.legendMaxHeight).toBe(0.15);
+  });
+
+  it('short height preserves width-based label and legend settings', () => {
+    const strategy = getLayoutStrategy('full', 'short');
+    // Width strategy for 'full' sets these; short only touches chromeMode and legendMaxHeight
+    expect(strategy.labelMode).toBe('all');
+    expect(strategy.legendPosition).toBe('right');
+    expect(strategy.axisLabelDensity).toBe('full');
+  });
+
+  it('short height preserves compact width label settings', () => {
+    const strategy = getLayoutStrategy('compact', 'short');
+    expect(strategy.labelMode).toBe('none');
+    expect(strategy.legendPosition).toBe('top');
+    expect(strategy.chromeMode).toBe('compact');
+  });
+
+  it('defaults heightClass to normal when omitted', () => {
+    const strategy = getLayoutStrategy('medium');
+    expect(strategy.chromeMode).toBe('full');
+    expect(strategy.legendMaxHeight).toBe(-1);
+  });
 });

package/src/responsive/breakpoints.ts

@@ -1,14 +1,19 @@
 /**
  * Responsive breakpoints and layout strategies.
  *
- * Three breakpoints based on container width:
+ * Width breakpoints:
  * - compact: < 400px (mobile, small embeds)
  * - medium: 400-700px (tablet, sidebars)
  * - full: > 700px (desktop, full-width)
+ *
+ * Height classes:
+ * - cramped: < 200px (dashboard widgets, thumbnails)
+ * - short: 200-350px (embedded panels, short containers)
+ * - normal: > 350px (standard containers)
  */
 
 // ---------------------------------------------------------------------------
-// Breakpoint type and detection
+// Width breakpoint type and detection
 // ---------------------------------------------------------------------------
 
 /** Responsive breakpoint based on container width. */
@@ -27,6 +32,26 @@ export function getBreakpoint(width: number): Breakpoint {
   return 'full';
 }
 
+// ---------------------------------------------------------------------------
+// Height class type and detection
+// ---------------------------------------------------------------------------
+
+/** Height classification based on container height. */
+export type HeightClass = 'cramped' | 'short' | 'normal';
+
+/** Height class thresholds in pixels. */
+export const HEIGHT_CRAMPED_MAX = 200;
+export const HEIGHT_SHORT_MAX = 350;
+
+/**
+ * Determine the height class for a given container height.
+ */
+export function getHeightClass(height: number): HeightClass {
+  if (height < HEIGHT_CRAMPED_MAX) return 'cramped';
+  if (height <= HEIGHT_SHORT_MAX) return 'short';
+  return 'normal';
+}
+
 // ---------------------------------------------------------------------------
 // Layout strategy
 // ---------------------------------------------------------------------------
@@ -43,9 +68,12 @@ export type AnnotationPosition = 'inline' | 'tooltip-only';
 /** Axis label density (controls tick count reduction). */
 export type AxisLabelDensity = 'full' | 'reduced' | 'minimal';
 
+/** Chrome display mode based on available height. */
+export type ChromeMode = 'full' | 'compact' | 'hidden';
+
 /**
  * Layout strategy defining how the visualization adapts to available space.
- * Returned by getLayoutStrategy() based on the current breakpoint.
+ * Returned by getLayoutStrategy() based on width breakpoint and height class.
  */
 export interface LayoutStrategy {
   /** How data labels are displayed. */
@@ -56,16 +84,16 @@ export interface LayoutStrategy {
   annotationPosition: AnnotationPosition;
   /** Axis tick density. */
   axisLabelDensity: AxisLabelDensity;
+  /** Chrome display mode: full, compact (title only), or hidden. */
+  chromeMode: ChromeMode;
+  /** Max fraction of container height for legend (0-1). -1 means unlimited. */
+  legendMaxHeight: number;
 }
 
 /**
- * Get the layout strategy for a given breakpoint.
- *
- * Compact: minimal chrome, no inline labels, legend on top, reduced axes.
- * Medium: moderate labels, legend on top, reduced axes.
- * Full: all labels, legend on right, full axes.
+ * Get the base layout strategy for a width breakpoint.
  */
-export function getLayoutStrategy(breakpoint: Breakpoint): LayoutStrategy {
+function getWidthStrategy(breakpoint: Breakpoint): LayoutStrategy {
   switch (breakpoint) {
     case 'compact':
       return {
@@ -73,6 +101,8 @@ export function getLayoutStrategy(breakpoint: Breakpoint): LayoutStrategy {
         legendPosition: 'top',
         annotationPosition: 'tooltip-only',
         axisLabelDensity: 'minimal',
+        chromeMode: 'full',
+        legendMaxHeight: -1,
       };
     case 'medium':
       return {
@@ -80,6 +110,8 @@ export function getLayoutStrategy(breakpoint: Breakpoint): LayoutStrategy {
         legendPosition: 'top',
         annotationPosition: 'inline',
         axisLabelDensity: 'reduced',
+        chromeMode: 'full',
+        legendMaxHeight: -1,
       };
     case 'full':
       return {
@@ -87,6 +119,54 @@ export function getLayoutStrategy(breakpoint: Breakpoint): LayoutStrategy {
         legendPosition: 'right',
         annotationPosition: 'inline',
         axisLabelDensity: 'full',
+        chromeMode: 'full',
+        legendMaxHeight: -1,
       };
   }
 }
+
+/**
+ * Apply height constraints to a width-based strategy.
+ * Short containers compress chrome and cap legend height.
+ * Cramped containers hide chrome and labels entirely.
+ */
+function applyHeightConstraints(
+  strategy: LayoutStrategy,
+  heightClass: HeightClass,
+): LayoutStrategy {
+  if (heightClass === 'normal') return strategy;
+
+  if (heightClass === 'cramped') {
+    return {
+      ...strategy,
+      chromeMode: 'hidden',
+      legendMaxHeight: 0,
+      labelMode: 'none',
+      annotationPosition: 'tooltip-only',
+    };
+  }
+
+  // short
+  return {
+    ...strategy,
+    chromeMode: 'compact',
+    legendMaxHeight: 0.15,
+  };
+}
+
+/**
+ * Get the layout strategy for a given breakpoint and height class.
+ *
+ * Compact: minimal chrome, no inline labels, legend on top, reduced axes.
+ * Medium: moderate labels, legend on top, reduced axes.
+ * Full: all labels, legend on right, full axes.
+ *
+ * Height constraints further reduce chrome and legend when container is short.
+ */
+export function getLayoutStrategy(
+  breakpoint: Breakpoint,
+  heightClass: HeightClass = 'normal',
+): LayoutStrategy {
+  const base = getWidthStrategy(breakpoint);
+  return applyHeightConstraints(base, heightClass);
+}

package/src/responsive/index.ts

@@ -6,6 +6,8 @@ export type {
   AnnotationPosition,
   AxisLabelDensity,
   Breakpoint,
+  ChromeMode,
+  HeightClass,
   LabelMode,
   LayoutStrategy,
   LegendPosition,
@@ -14,5 +16,8 @@ export {
   BREAKPOINT_COMPACT_MAX,
   BREAKPOINT_MEDIUM_MAX,
   getBreakpoint,
+  getHeightClass,
   getLayoutStrategy,
+  HEIGHT_CRAMPED_MAX,
+  HEIGHT_SHORT_MAX,
 } from './breakpoints';