@opendata-ai/openchart-core 6.1.0 → 6.1.2

package/package.json

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

package/src/index.ts

@@ -54,6 +54,8 @@ export {
 // ---------------------------------------------------------------------------
 
 export {
+  BRAND_FONT_SIZE,
+  BRAND_MIN_WIDTH,
   BRAND_RESERVE_WIDTH,
   computeChrome,
   estimateTextWidth,

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

@@ -2,6 +2,7 @@ import { describe, expect, it } from 'vitest';
 import { resolveTheme } from '../../theme/resolve';
 import type { Chrome } from '../../types/spec';
 import { computeChrome } from '../chrome';
+import { BRAND_FONT_SIZE, estimateTextHeight } from '../text-measure';
 
 const theme = resolveTheme();
 
@@ -14,9 +15,35 @@ describe('computeChrome', () => {
     expect(result.subtitle).toBeUndefined();
   });
 
-  it('returns zero heights when chrome is empty', () => {
+  it('reserves brand height when chrome is empty but chart is wide enough', () => {
     const result = computeChrome({}, theme, 600);
+    const pad = theme.spacing.padding;
+    const expectedBottom =
+      theme.spacing.chartToFooter + estimateTextHeight(BRAND_FONT_SIZE, 1) + pad;
     expect(result.topHeight).toBe(0);
+    expect(result.bottomHeight).toBe(expectedBottom);
+  });
+
+  it('returns zero bottom height when chrome is empty and chart is too narrow for brand', () => {
+    const result = computeChrome({}, theme, 100);
+    expect(result.topHeight).toBe(0);
+    expect(result.bottomHeight).toBe(0);
+  });
+
+  it('reserves brand height in compact mode for wide charts', () => {
+    const chrome: Chrome = { title: 'Title', source: 'Source' };
+    const result = computeChrome(chrome, theme, 600, undefined, 'compact');
+    const pad = theme.spacing.padding;
+    const expectedBottom =
+      theme.spacing.chartToFooter + estimateTextHeight(BRAND_FONT_SIZE, 1) + pad;
+    expect(result.topHeight).toBeGreaterThan(0);
+    expect(result.source).toBeUndefined(); // compact hides bottom chrome text
+    expect(result.bottomHeight).toBe(expectedBottom);
+  });
+
+  it('returns zero bottom height in compact mode for narrow charts', () => {
+    const chrome: Chrome = { title: 'Title', source: 'Source' };
+    const result = computeChrome(chrome, theme, 100, undefined, 'compact');
     expect(result.bottomHeight).toBe(0);
   });
 

package/src/layout/chrome.ts

@@ -22,7 +22,13 @@ import type {
 } from '../types/layout';
 import type { Chrome, ChromeText } from '../types/spec';
 import type { ChromeDefaults, ResolvedTheme } from '../types/theme';
-import { BRAND_RESERVE_WIDTH, estimateCharWidth, estimateTextHeight } from './text-measure';
+import {
+  BRAND_FONT_SIZE,
+  BRAND_MIN_WIDTH,
+  BRAND_RESERVE_WIDTH,
+  estimateCharWidth,
+  estimateTextHeight,
+} from './text-measure';
 
 // ---------------------------------------------------------------------------
 // Helpers
@@ -133,6 +139,9 @@ export function computeChrome(
   padding?: number,
 ): ResolvedChrome {
   if (!chrome || chromeMode === 'hidden') {
+    // Brand watermark is also skipped at cramped sizes (height < 200px triggers
+    // hidden mode, and those containers are typically < BRAND_MIN_WIDTH), so
+    // bottomHeight: 0 is safe here.
     return { topHeight: 0, bottomHeight: 0 };
   }
 
@@ -193,11 +202,17 @@ export function computeChrome(
   const hasTopChrome = titleNorm || subtitleNorm;
   const topHeight = hasTopChrome ? topY - pad + theme.spacing.chromeToChart - chromeGap : 0;
 
-  // Bottom elements hidden in compact mode
+  // Bottom chrome text hidden in compact mode, but brand watermark still
+  // renders for wide-enough charts. Reserve space so it doesn't overflow.
   if (chromeMode === 'compact') {
+    let compactBottom = 0;
+    if (width >= BRAND_MIN_WIDTH) {
+      const brandHeight = estimateTextHeight(BRAND_FONT_SIZE, 1);
+      compactBottom = theme.spacing.chartToFooter + brandHeight + pad;
+    }
     return {
       topHeight,
-      bottomHeight: 0,
+      bottomHeight: compactBottom,
       ...topElements,
     };
   }
@@ -270,8 +285,28 @@ export function computeChrome(
 
     // Remove trailing gap
     bottomHeight -= chromeGap;
+
+    // Ensure bottom height accommodates the brand watermark, which renders
+    // at the same Y as the first bottom chrome item but is taller (20px font
+    // vs 12px source). Without this, the brand overflows the SVG viewBox.
+    if (width >= BRAND_MIN_WIDTH) {
+      const brandHeight = estimateTextHeight(BRAND_FONT_SIZE, 1);
+      // firstItemY is chartToFooter (the Y offset of the first bottom item).
+      // The brand needs brandHeight below that point; bottom chrome content
+      // needs (bottomHeight - chartToFooter). Take the max.
+      const contentBelowFirstItem = bottomHeight - theme.spacing.chartToFooter;
+      if (brandHeight > contentBelowFirstItem) {
+        bottomHeight += brandHeight - contentBelowFirstItem;
+      }
+    }
+
     // Add bottom padding
     bottomHeight += pad;
+  } else if (width >= BRAND_MIN_WIDTH) {
+    // No bottom chrome items, but brand watermark still renders.
+    // Reserve space: chartToFooter gap + brand text height + padding.
+    const brandHeight = estimateTextHeight(BRAND_FONT_SIZE, 1);
+    bottomHeight = theme.spacing.chartToFooter + brandHeight + pad;
   }
 
   return {

package/src/layout/index.ts

@@ -4,6 +4,8 @@
 
 export { computeChrome } from './chrome';
 export {
+  BRAND_FONT_SIZE,
+  BRAND_MIN_WIDTH,
   BRAND_RESERVE_WIDTH,
   estimateCharWidth,
   estimateTextHeight,

package/src/layout/text-measure.ts

@@ -58,6 +58,12 @@ export function estimateTextWidth(text: string, fontSize: number, fontWeight = 4
  */
 export const BRAND_RESERVE_WIDTH = 110;
 
+/** Font size of the brand watermark (px). Shared between layout and renderer. */
+export const BRAND_FONT_SIZE = 20;
+
+/** Minimum chart width to render the brand watermark (px). */
+export const BRAND_MIN_WIDTH = 120;
+
 /**
  * Estimate the rendered height of a text block.
  *

package/src/theme/defaults.ts

@@ -43,7 +43,7 @@ export const DEFAULT_THEME: Theme = {
     },
   },
   spacing: {
-    padding: 12,
+    padding: 20,
     chromeGap: 4,
     chromeToChart: 8,
     chartToFooter: 8,