@opendata-ai/openchart-vanilla 7.6.0 → 7.7.0

package/dist/static.d.ts

@@ -0,0 +1,29 @@
+import { ThemeConfig, DarkMode, ChartSpec, LayerSpec } from '@opendata-ai/openchart-core';
+
+interface StaticRenderOptions {
+    width?: number;
+    height?: number;
+    theme?: ThemeConfig;
+    /**
+     * Dark mode setting. In static rendering `'auto'` resolves to light mode
+     * since there is no `matchMedia` to query. Use `'force'` for dark output.
+     */
+    darkMode?: DarkMode;
+    watermark?: boolean;
+}
+/**
+ * Render a chart spec to a standalone SVG string without a browser DOM.
+ *
+ * Requires `happy-dom` as a peer dependency (`bun add happy-dom`).
+ *
+ * Not safe for concurrent invocation: the render pipeline relies on a global
+ * SVG ID counter and a temporary global `document` swap, both of which are
+ * single-threaded. In a server handling parallel requests, serialize calls
+ * through a queue or mutex.
+ *
+ * The entire render pipeline is synchronous; the global swap is safe as long
+ * as no code schedules microtasks that outlive the call.
+ */
+declare function renderStaticSVG(spec: ChartSpec | LayerSpec, options?: StaticRenderOptions): string;
+
+export { type StaticRenderOptions, renderStaticSVG };

package/dist/static.js

@@ -0,0 +1,177 @@
+import {
+  SVG_NS,
+  renderChartSVG,
+  resetSvgIdCounter
+} from "./chunk-PSMDJEXK.js";
+
+// src/static.ts
+import { createRequire } from "module";
+import { adaptForLightLineStroke, isLayerSpec } from "@opendata-ai/openchart-core";
+import { compileChart, compileLayer } from "@opendata-ai/openchart-engine";
+var esmRequire = createRequire(import.meta.url);
+var cachedWindow;
+function getHappyDomWindow() {
+  if (cachedWindow) return cachedWindow;
+  try {
+    ({ Window: cachedWindow } = esmRequire("happy-dom"));
+  } catch {
+    throw new Error(
+      "renderStaticSVG requires 'happy-dom' as a peer dependency. Install it with: npm add happy-dom"
+    );
+  }
+  return cachedWindow;
+}
+var rendering = false;
+function resolveStaticDarkMode(mode) {
+  if (mode === "force") return true;
+  return false;
+}
+function buildThemeStyleBlock(theme) {
+  const accent = theme.colors.categorical[0] ?? "#06b6d4";
+  const bg = theme.colors.background === "transparent" ? theme.isDark ? "#09090b" : "#ffffff" : theme.colors.background;
+  const props = [
+    `--oc-font-family: ${theme.fonts.family}`,
+    `--oc-font-mono: ${theme.fonts.mono}`,
+    `--oc-title-size: ${theme.chrome.title.fontSize}px`,
+    `--oc-title-weight: ${theme.chrome.title.fontWeight}`,
+    `--oc-title-tracking: -0.022em`,
+    // sync with tokens.css
+    `--oc-subtitle-size: ${theme.chrome.subtitle.fontSize}px`,
+    `--oc-subtitle-weight: ${theme.chrome.subtitle.fontWeight}`,
+    `--oc-source-size: ${theme.chrome.source.fontSize}px`,
+    `--oc-source-weight: ${theme.chrome.source.fontWeight}`,
+    `--oc-body-size: ${theme.fonts.sizes.body}px`,
+    `--oc-eyebrow-size: ${theme.chrome.eyebrow.fontSize}px`,
+    `--oc-eyebrow-weight: ${theme.chrome.eyebrow.fontWeight}`,
+    `--oc-eyebrow-tracking: 0.08em`,
+    // sync with tokens.css
+    `--oc-bg: ${bg}`,
+    `--oc-text: ${theme.colors.text}`,
+    `--oc-text-muted: ${theme.colors.axis}`,
+    `--oc-text-faint: ${theme.isDark ? "#52525b" : "#d4d4d8"}`,
+    `--oc-gridline: ${theme.colors.gridline}`,
+    `--oc-axis: ${theme.colors.axis}`,
+    `--oc-border-radius: ${theme.borderRadius}px`,
+    `--oc-accent: ${accent}`,
+    `--oc-accent-strong: ${adaptForLightLineStroke(accent)}`,
+    `--oc-positive: ${theme.colors.positive}`,
+    `--oc-negative: ${theme.colors.negative}`,
+    `--oc-legend-text: ${theme.isDark ? "#d0d6e0" : "#3f3f46"}`,
+    `--oc-space-2: ${theme.spacing.chromeGap * 2}px`,
+    `--oc-space-4: ${theme.spacing.padding}px`
+  ];
+  const rules = [
+    `svg.oc-chart { ${props.join("; ")}; }`,
+    `.oc-chrome { font-family: var(--oc-font-family); }`,
+    `.oc-eyebrow { font-size: var(--oc-eyebrow-size); font-weight: var(--oc-eyebrow-weight); letter-spacing: var(--oc-eyebrow-tracking); text-transform: uppercase; fill: var(--oc-accent); }`,
+    `.oc-title { font-size: var(--oc-title-size); font-weight: var(--oc-title-weight); letter-spacing: var(--oc-title-tracking); fill: var(--oc-text); }`,
+    `.oc-subtitle { font-size: var(--oc-subtitle-size); font-weight: var(--oc-subtitle-weight); fill: var(--oc-text-muted); }`,
+    `.oc-source, .oc-byline, .oc-footer { font-size: var(--oc-source-size); font-weight: var(--oc-source-weight); fill: var(--oc-text-muted); }`,
+    `.oc-brand { font-size: 11px; font-weight: 510; letter-spacing: 0.02em; fill: var(--oc-text-faint); }`,
+    `.oc-brand-dot { fill: var(--oc-accent); }`,
+    `.oc-eyebrow-dot { fill: var(--oc-accent); }`,
+    `.oc-metrics { font-family: var(--oc-font-family); }`,
+    `.oc-metric-label { font-size: 10px; font-weight: 510; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--oc-text-muted); }`,
+    `.oc-metric-value { font-size: 22px; font-weight: 510; letter-spacing: -0.01em; fill: var(--oc-text); font-variant-numeric: tabular-nums; }`,
+    `.oc-metric-delta-up { fill: var(--oc-positive); font-size: 12px; font-weight: 510; }`,
+    `.oc-metric-delta-down { fill: var(--oc-negative); font-size: 12px; font-weight: 510; }`,
+    `.oc-axis-tick-inline { font-size: 11px; font-weight: 400; fill: var(--oc-text-muted); }`,
+    `.oc-endpoint-labels { font-family: var(--oc-font-family); }`,
+    `.oc-endpoint-label { fill: var(--oc-endpoint-label-color, var(--oc-text)); }`,
+    `.oc-endpoint-value { fill: var(--oc-endpoint-value-color, var(--oc-text-muted)); }`,
+    `.oc-endpoint-leader { stroke: var(--oc-endpoint-leader-color, currentColor); }`,
+    `.oc-annotation-subtitle { fill: var(--oc-annotation-subtitle-color, var(--oc-text-muted)); }`,
+    `.oc-metric-secondary { fill: var(--oc-positive); font-size: 12px; font-weight: 400; }`,
+    `.oc-legend { font-family: var(--oc-font-family); font-size: var(--oc-body-size); }`,
+    `.oc-legend-entry { cursor: default; }`,
+    `.oc-legend text { fill: var(--oc-legend-text); }`
+  ];
+  return rules.join("\n");
+}
+function stripInteractiveElements(svg) {
+  const selectors = ["[data-voronoi-overlay]", "[data-crosshair]", "[data-snap-dots]"];
+  for (const selector of selectors) {
+    const els = svg.querySelectorAll(selector);
+    for (const el of els) {
+      el.parentNode?.removeChild(el);
+    }
+  }
+}
+function renderStaticSVG(spec, options) {
+  if (rendering) {
+    throw new Error("renderStaticSVG is not reentrant \u2014 serialize calls through a queue or mutex");
+  }
+  rendering = true;
+  const Window = getHappyDomWindow();
+  const win = new Window({ url: "about:blank" });
+  const prevDocument = globalThis.document;
+  const prevWindow = globalThis.window;
+  try {
+    globalThis.document = win.document;
+    globalThis.window = win;
+    resetSvgIdCounter();
+    const width = options?.width ?? 640;
+    const height = options?.height ?? 420;
+    const darkMode = resolveStaticDarkMode(options?.darkMode);
+    const compileOpts = {
+      width,
+      height,
+      theme: options?.theme,
+      darkMode,
+      watermark: options?.watermark
+    };
+    let layout;
+    if (isLayerSpec(spec)) {
+      layout = compileLayer(spec, compileOpts);
+    } else {
+      layout = compileChart(spec, compileOpts);
+    }
+    const container = win.document.createElement("div");
+    Object.defineProperty(container, "getBoundingClientRect", {
+      value: () => ({
+        width,
+        height,
+        top: 0,
+        left: 0,
+        right: width,
+        bottom: height,
+        x: 0,
+        y: 0,
+        toJSON: () => ({})
+      })
+    });
+    const svg = renderChartSVG(layout, container, {
+      animate: false,
+      crosshair: false
+    });
+    stripInteractiveElements(svg);
+    const doc = win.document;
+    let defs = svg.querySelector("defs");
+    if (!defs) {
+      defs = doc.createElementNS(SVG_NS, "defs");
+      svg.insertBefore(defs, svg.firstChild);
+    }
+    const styleEl = doc.createElementNS(SVG_NS, "style");
+    styleEl.textContent = buildThemeStyleBlock(layout.theme);
+    defs.insertBefore(styleEl, defs.firstChild);
+    const serializer = new win.XMLSerializer();
+    return serializer.serializeToString(svg);
+  } finally {
+    rendering = false;
+    if (prevDocument !== void 0) {
+      globalThis.document = prevDocument;
+    } else {
+      delete globalThis.document;
+    }
+    if (prevWindow !== void 0) {
+      globalThis.window = prevWindow;
+    } else {
+      delete globalThis.window;
+    }
+    win.close();
+  }
+}
+export {
+  renderStaticSVG
+};
+//# sourceMappingURL=static.js.map

package/dist/static.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/static.ts"],"sourcesContent":["// Node.js only — do not import from browser code.\nimport { createRequire } from 'node:module';\nimport type {\n  ChartLayout,\n  ChartSpec,\n  CompileOptions,\n  DarkMode,\n  LayerSpec,\n  ResolvedTheme,\n  ThemeConfig,\n} from '@opendata-ai/openchart-core';\nimport { adaptForLightLineStroke, isLayerSpec } from '@opendata-ai/openchart-core';\nimport { compileChart, compileLayer } from '@opendata-ai/openchart-engine';\nimport { SVG_NS } from './renderers/svg-dom';\nimport { resetSvgIdCounter } from './svg-ids';\nimport { renderChartSVG } from './svg-renderer';\n\nconst esmRequire = createRequire(import.meta.url);\n\nlet cachedWindow: typeof import('happy-dom').Window | undefined;\nfunction getHappyDomWindow(): typeof import('happy-dom').Window {\n  if (cachedWindow) return cachedWindow;\n  try {\n    ({ Window: cachedWindow } = esmRequire('happy-dom') as typeof import('happy-dom'));\n  } catch {\n    throw new Error(\n      \"renderStaticSVG requires 'happy-dom' as a peer dependency. Install it with: npm add happy-dom\",\n    );\n  }\n  return cachedWindow;\n}\n\nlet rendering = false;\n\nexport interface StaticRenderOptions {\n  width?: number;\n  height?: number;\n  theme?: ThemeConfig;\n  /**\n   * Dark mode setting. In static rendering `'auto'` resolves to light mode\n   * since there is no `matchMedia` to query. Use `'force'` for dark output.\n   */\n  darkMode?: DarkMode;\n  watermark?: boolean;\n}\n\nfunction resolveStaticDarkMode(mode?: DarkMode): boolean {\n  if (mode === 'force') return true;\n  return false;\n}\n\nfunction buildThemeStyleBlock(theme: ResolvedTheme): string {\n  const accent = theme.colors.categorical[0] ?? '#06b6d4';\n  const bg =\n    theme.colors.background === 'transparent'\n      ? theme.isDark\n        ? '#09090b'\n        : '#ffffff'\n      : theme.colors.background;\n\n  const props = [\n    `--oc-font-family: ${theme.fonts.family}`,\n    `--oc-font-mono: ${theme.fonts.mono}`,\n    `--oc-title-size: ${theme.chrome.title.fontSize}px`,\n    `--oc-title-weight: ${theme.chrome.title.fontWeight}`,\n    `--oc-title-tracking: -0.022em`, // sync with tokens.css\n    `--oc-subtitle-size: ${theme.chrome.subtitle.fontSize}px`,\n    `--oc-subtitle-weight: ${theme.chrome.subtitle.fontWeight}`,\n    `--oc-source-size: ${theme.chrome.source.fontSize}px`,\n    `--oc-source-weight: ${theme.chrome.source.fontWeight}`,\n    `--oc-body-size: ${theme.fonts.sizes.body}px`,\n    `--oc-eyebrow-size: ${theme.chrome.eyebrow.fontSize}px`,\n    `--oc-eyebrow-weight: ${theme.chrome.eyebrow.fontWeight}`,\n    `--oc-eyebrow-tracking: 0.08em`, // sync with tokens.css\n    `--oc-bg: ${bg}`,\n    `--oc-text: ${theme.colors.text}`,\n    `--oc-text-muted: ${theme.colors.axis}`,\n    `--oc-text-faint: ${theme.isDark ? '#52525b' : '#d4d4d8'}`,\n    `--oc-gridline: ${theme.colors.gridline}`,\n    `--oc-axis: ${theme.colors.axis}`,\n    `--oc-border-radius: ${theme.borderRadius}px`,\n    `--oc-accent: ${accent}`,\n    `--oc-accent-strong: ${adaptForLightLineStroke(accent)}`,\n    `--oc-positive: ${theme.colors.positive}`,\n    `--oc-negative: ${theme.colors.negative}`,\n    `--oc-legend-text: ${theme.isDark ? '#d0d6e0' : '#3f3f46'}`,\n    `--oc-space-2: ${theme.spacing.chromeGap * 2}px`,\n    `--oc-space-4: ${theme.spacing.padding}px`,\n  ];\n\n  const rules = [\n    `svg.oc-chart { ${props.join('; ')}; }`,\n    `.oc-chrome { font-family: var(--oc-font-family); }`,\n    `.oc-eyebrow { font-size: var(--oc-eyebrow-size); font-weight: var(--oc-eyebrow-weight); letter-spacing: var(--oc-eyebrow-tracking); text-transform: uppercase; fill: var(--oc-accent); }`,\n    `.oc-title { font-size: var(--oc-title-size); font-weight: var(--oc-title-weight); letter-spacing: var(--oc-title-tracking); fill: var(--oc-text); }`,\n    `.oc-subtitle { font-size: var(--oc-subtitle-size); font-weight: var(--oc-subtitle-weight); fill: var(--oc-text-muted); }`,\n    `.oc-source, .oc-byline, .oc-footer { font-size: var(--oc-source-size); font-weight: var(--oc-source-weight); fill: var(--oc-text-muted); }`,\n    `.oc-brand { font-size: 11px; font-weight: 510; letter-spacing: 0.02em; fill: var(--oc-text-faint); }`,\n    `.oc-brand-dot { fill: var(--oc-accent); }`,\n    `.oc-eyebrow-dot { fill: var(--oc-accent); }`,\n    `.oc-metrics { font-family: var(--oc-font-family); }`,\n    `.oc-metric-label { font-size: 10px; font-weight: 510; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--oc-text-muted); }`,\n    `.oc-metric-value { font-size: 22px; font-weight: 510; letter-spacing: -0.01em; fill: var(--oc-text); font-variant-numeric: tabular-nums; }`,\n    `.oc-metric-delta-up { fill: var(--oc-positive); font-size: 12px; font-weight: 510; }`,\n    `.oc-metric-delta-down { fill: var(--oc-negative); font-size: 12px; font-weight: 510; }`,\n    `.oc-axis-tick-inline { font-size: 11px; font-weight: 400; fill: var(--oc-text-muted); }`,\n    `.oc-endpoint-labels { font-family: var(--oc-font-family); }`,\n    `.oc-endpoint-label { fill: var(--oc-endpoint-label-color, var(--oc-text)); }`,\n    `.oc-endpoint-value { fill: var(--oc-endpoint-value-color, var(--oc-text-muted)); }`,\n    `.oc-endpoint-leader { stroke: var(--oc-endpoint-leader-color, currentColor); }`,\n    `.oc-annotation-subtitle { fill: var(--oc-annotation-subtitle-color, var(--oc-text-muted)); }`,\n    `.oc-metric-secondary { fill: var(--oc-positive); font-size: 12px; font-weight: 400; }`,\n    `.oc-legend { font-family: var(--oc-font-family); font-size: var(--oc-body-size); }`,\n    `.oc-legend-entry { cursor: default; }`,\n    `.oc-legend text { fill: var(--oc-legend-text); }`,\n  ];\n\n  return rules.join('\\n');\n}\n\nfunction stripInteractiveElements(svg: Element): void {\n  const selectors = ['[data-voronoi-overlay]', '[data-crosshair]', '[data-snap-dots]'];\n  for (const selector of selectors) {\n    const els = svg.querySelectorAll(selector);\n    for (const el of els) {\n      el.parentNode?.removeChild(el);\n    }\n  }\n}\n\n/**\n * Render a chart spec to a standalone SVG string without a browser DOM.\n *\n * Requires `happy-dom` as a peer dependency (`bun add happy-dom`).\n *\n * Not safe for concurrent invocation: the render pipeline relies on a global\n * SVG ID counter and a temporary global `document` swap, both of which are\n * single-threaded. In a server handling parallel requests, serialize calls\n * through a queue or mutex.\n *\n * The entire render pipeline is synchronous; the global swap is safe as long\n * as no code schedules microtasks that outlive the call.\n */\nexport function renderStaticSVG(\n  spec: ChartSpec | LayerSpec,\n  options?: StaticRenderOptions,\n): string {\n  if (rendering) {\n    throw new Error('renderStaticSVG is not reentrant — serialize calls through a queue or mutex');\n  }\n  rendering = true;\n\n  const Window = getHappyDomWindow();\n  const win = new Window({ url: 'about:blank' });\n\n  const prevDocument = globalThis.document;\n  const prevWindow = (globalThis as Record<string, unknown>).window;\n\n  try {\n    (globalThis as Record<string, unknown>).document = win.document;\n    (globalThis as Record<string, unknown>).window = win;\n\n    resetSvgIdCounter();\n\n    const width = options?.width ?? 640;\n    const height = options?.height ?? 420;\n    const darkMode = resolveStaticDarkMode(options?.darkMode);\n\n    const compileOpts: CompileOptions = {\n      width,\n      height,\n      theme: options?.theme,\n      darkMode,\n      watermark: options?.watermark,\n    };\n\n    let layout: ChartLayout;\n    if (isLayerSpec(spec)) {\n      layout = compileLayer(spec, compileOpts);\n    } else {\n      layout = compileChart(spec, compileOpts);\n    }\n\n    const container = win.document.createElement('div');\n    Object.defineProperty(container, 'getBoundingClientRect', {\n      value: () => ({\n        width,\n        height,\n        top: 0,\n        left: 0,\n        right: width,\n        bottom: height,\n        x: 0,\n        y: 0,\n        toJSON: () => ({}),\n      }),\n    });\n\n    // renderChartSVG appends to container; the container and SVG are owned by\n    // the happy-dom Window which is closed in the finally block.\n    const svg = renderChartSVG(layout, container as unknown as HTMLElement, {\n      animate: false,\n      crosshair: false,\n    });\n\n    stripInteractiveElements(svg);\n\n    const doc = win.document as unknown as Document;\n    let defs = svg.querySelector('defs');\n    if (!defs) {\n      defs = doc.createElementNS(SVG_NS, 'defs');\n      svg.insertBefore(defs as unknown as Node, svg.firstChild);\n    }\n    const styleEl = doc.createElementNS(SVG_NS, 'style');\n    styleEl.textContent = buildThemeStyleBlock(layout.theme);\n    defs.insertBefore(styleEl as unknown as Node, defs.firstChild);\n\n    const serializer = new (\n      win as unknown as { XMLSerializer: typeof XMLSerializer }\n    ).XMLSerializer();\n    return serializer.serializeToString(svg as unknown as Node);\n  } finally {\n    rendering = false;\n    if (prevDocument !== undefined) {\n      (globalThis as Record<string, unknown>).document = prevDocument;\n    } else {\n      delete (globalThis as Record<string, unknown>).document;\n    }\n    if (prevWindow !== undefined) {\n      (globalThis as Record<string, unknown>).window = prevWindow;\n    } else {\n      delete (globalThis as Record<string, unknown>).window;\n    }\n    win.close();\n  }\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "7.6.0",
+  "version": "7.7.0",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -25,6 +25,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./static": {
+      "types": "./dist/static.d.ts",
+      "import": "./dist/static.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./simulation-worker": "./dist/simulation-worker.js"
   },
@@ -50,11 +54,19 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@opendata-ai/openchart-core": "7.6.0",
-    "@opendata-ai/openchart-engine": "7.6.0",
+    "@opendata-ai/openchart-core": "7.7.0",
+    "@opendata-ai/openchart-engine": "7.7.0",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },
+  "peerDependencies": {
+    "happy-dom": ">=14.0.0"
+  },
+  "peerDependenciesMeta": {
+    "happy-dom": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/d3-force": "^3.0.10",
     "@types/d3-quadtree": "^3.0.6"

package/src/__tests__/static.test.ts

@@ -0,0 +1,141 @@
+import type { LayerSpec } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { barSpec, lineSpec, pieSpec } from '../__test-fixtures__/specs';
+import { renderStaticSVG } from '../static';
+
+describe('renderStaticSVG', () => {
+  it('returns a valid SVG string', () => {
+    const svg = renderStaticSVG(lineSpec);
+    expect(svg).toContain('<svg');
+    expect(svg).toContain('</svg>');
+    expect(svg).toContain('viewBox');
+  });
+
+  it('produces byte-identical output for the same spec', () => {
+    const first = renderStaticSVG(lineSpec, { width: 640, height: 420 });
+    const second = renderStaticSVG(lineSpec, { width: 640, height: 420 });
+    expect(first).toBe(second);
+  });
+
+  it('includes a11y attributes', () => {
+    const svg = renderStaticSVG(lineSpec);
+    expect(svg).toContain('role=');
+    expect(svg).toContain('aria-label=');
+  });
+
+  it('does not contain interactive elements', () => {
+    const svg = renderStaticSVG(lineSpec);
+    expect(svg).not.toContain('data-voronoi-overlay');
+    expect(svg).not.toContain('data-crosshair');
+    expect(svg).not.toContain('data-snap-dots');
+  });
+
+  it('does not contain animation classes', () => {
+    const svg = renderStaticSVG(lineSpec);
+    expect(svg).not.toContain('oc-animate');
+  });
+
+  it('includes the inlined style block with theme values', () => {
+    const svg = renderStaticSVG(lineSpec);
+    expect(svg).toContain('<style');
+    expect(svg).toContain('.oc-brand-dot');
+  });
+
+  it('scopes custom properties to svg.oc-chart, not :root', () => {
+    const svg = renderStaticSVG(lineSpec);
+    expect(svg).toContain('svg.oc-chart');
+    expect(svg).not.toContain(':root');
+  });
+
+  it('uses var() references in class rules for theme overridability', () => {
+    const svg = renderStaticSVG(lineSpec);
+    expect(svg).toContain('fill: var(--oc-accent)');
+    expect(svg).toContain('fill: var(--oc-text)');
+    expect(svg).toContain('fill: var(--oc-text-muted)');
+    expect(svg).toContain('font-family: var(--oc-font-family)');
+    expect(svg).not.toMatch(/\.oc-brand-dot \{ fill: #[0-9a-f]{6}/i);
+  });
+
+  it('renders bar charts', () => {
+    const svg = renderStaticSVG(barSpec);
+    expect(svg).toContain('oc-mark-rect');
+  });
+
+  it('renders pie charts', () => {
+    const svg = renderStaticSVG(pieSpec);
+    expect(svg).toContain('oc-mark-arc');
+  });
+
+  it('renders layer specs', () => {
+    const layerSpec: LayerSpec = {
+      layer: [
+        {
+          mark: 'line',
+          data: [
+            { x: '2020', y: 10 },
+            { x: '2021', y: 20 },
+          ],
+          encoding: {
+            x: { field: 'x', type: 'temporal' },
+            y: { field: 'y', type: 'quantitative' },
+          },
+        },
+        {
+          mark: 'point',
+          data: [
+            { x: '2020', y: 10 },
+            { x: '2021', y: 20 },
+          ],
+          encoding: {
+            x: { field: 'x', type: 'temporal' },
+            y: { field: 'y', type: 'quantitative' },
+          },
+        },
+      ],
+    };
+    const svg = renderStaticSVG(layerSpec);
+    expect(svg).toContain('<svg');
+    expect(svg).toContain('oc-mark-line');
+  });
+
+  it('respects explicit width and height', () => {
+    const svg = renderStaticSVG(lineSpec, { width: 800, height: 500 });
+    expect(svg).toContain('viewBox="0 0 800 500"');
+  });
+
+  it('renders dark mode when darkMode is "force"', () => {
+    const light = renderStaticSVG(lineSpec, { darkMode: 'off' });
+    const dark = renderStaticSVG(lineSpec, { darkMode: 'force' });
+    expect(light).not.toBe(dark);
+  });
+
+  it('renders chrome elements', () => {
+    const svg = renderStaticSVG(lineSpec);
+    expect(svg).toContain('GDP Growth');
+    expect(svg).toContain('US vs UK over time');
+    expect(svg).toContain('World Bank');
+  });
+
+  it('produces deterministic IDs across calls', () => {
+    const first = renderStaticSVG(lineSpec, { width: 640, height: 420 });
+    const second = renderStaticSVG(lineSpec, { width: 640, height: 420 });
+    const idPattern = /id="oc-[a-z]+-\d+"/g;
+    const firstIds = first.match(idPattern) ?? [];
+    const secondIds = second.match(idPattern) ?? [];
+    expect(firstIds).toEqual(secondIds);
+    expect(firstIds.length).toBeGreaterThan(0);
+  });
+
+  it('does not pollute global document or window after rendering', () => {
+    const docBefore = globalThis.document;
+    const winBefore = globalThis.window;
+    renderStaticSVG(lineSpec);
+    expect(globalThis.document).toBe(docBefore);
+    expect(globalThis.window).toBe(winBefore);
+  });
+
+  it('suppresses watermark when watermark is false', () => {
+    const svg = renderStaticSVG(lineSpec, { watermark: false });
+    expect(svg).not.toContain('oc-brand-text');
+  });
+});

package/src/__tests__/svg-renderer.test.ts

@@ -525,16 +525,22 @@ describe('axis rendering', () => {
     expect(labels.length).toBeGreaterThan(0);
   });
 
-  it('x-axis has a baseline line element', () => {
-    const { svg } = renderSpec(lineSpec);
+  it('x-axis has a baseline line element for grounded marks', () => {
+    const { svg } = renderSpec(barSpec);
     const xAxis = svg.querySelector('.oc-axis-x');
     const line = xAxis!.querySelector('line');
-    // The renderer draws an axis line for x-axis
     expect(line).not.toBeNull();
   });
 
+  it('x-axis hides baseline for non-grounded marks', () => {
+    const { svg } = renderSpec(lineSpec);
+    const xAxis = svg.querySelector('.oc-axis-x');
+    const line = xAxis!.querySelector('line');
+    expect(line).toBeNull();
+  });
+
   it('x-tick labels hang below the axis line by the label padding (no hugging)', () => {
-    const { svg, layout } = renderSpec(lineSpec);
+    const { svg, layout } = renderSpec(barSpec);
     const xAxis = svg.querySelector('.oc-axis-x')!;
     const axisLineY = Number(xAxis.querySelector('line')!.getAttribute('y2'));
     const labels = Array.from(xAxis.querySelectorAll('text.oc-axis-tick'));

package/src/mount.ts

@@ -20,7 +20,7 @@ import type {
   LayerSpec,
   ThemeConfig,
 } from '@opendata-ai/openchart-core';
-import { isLayerSpec } from '@opendata-ai/openchart-core';
+import { isGraphSpec, isLayerSpec } from '@opendata-ai/openchart-core';
 import { compileChart, compileLayer } from '@opendata-ai/openchart-engine';
 import { cancelAnimations, setupAnimationCleanup } from './animation';
 import {
@@ -57,6 +57,7 @@ import { createMeasureText, resolveFontFamily, scheduleFontReload } from './meas
 import { observeResize } from './resize-observer';
 import { renderChartSVG } from './svg-renderer';
 import { createTextEditOverlay } from './text-edit-overlay';
+import { stampThemeProperties } from './theme-tokens';
 import { createTooltipManager, type TooltipManager } from './tooltip';
 
 // ---------------------------------------------------------------------------
@@ -114,6 +115,8 @@ export interface ChartInstance {
   deselect(): void;
   /** Whether inline text editing is active. */
   readonly isEditing: boolean;
+  /** Set highlight values on the color encoding and re-render. Pass null to clear. */
+  setHighlight(values: string[] | null): void;
 }
 
 // ---------------------------------------------------------------------------
@@ -789,6 +792,10 @@ export function createChart<TData extends DataRow = DataRow>(
       container.classList.remove('oc-dark');
     }
 
+    // Stamp resolved theme as CSS custom properties on the container
+    // so CSS consumers read from the same source of truth as the JS engine.
+    stampThemeProperties(container, currentLayout.theme);
+
     // Set up animation cleanup on first render only
     if (shouldAnimate && svgElement) {
       cleanupAnimations = setupAnimationCleanup(svgElement, () => {
@@ -849,6 +856,28 @@ export function createChart<TData extends DataRow = DataRow>(
     render();
   }
 
+  function setHighlight(values: string[] | null): void {
+    if (destroyed) return;
+    if (isLayerSpec(currentSpec) || isGraphSpec(currentSpec as unknown as Record<string, unknown>))
+      return;
+    const spec = currentSpec as ChartSpec;
+    const colorEnc = spec.encoding?.color;
+    if (!colorEnc || typeof colorEnc !== 'object' || !('field' in colorEnc)) return;
+    const current = (colorEnc as { highlight?: string | string[] }).highlight;
+    if (!values?.length && !current) return;
+    const updatedColor = { ...colorEnc };
+    if (values && values.length > 0) {
+      updatedColor.highlight = values;
+    } else {
+      delete updatedColor.highlight;
+    }
+    currentSpec = {
+      ...spec,
+      encoding: { ...spec.encoding, color: updatedColor },
+    } as ChartSpec;
+    render();
+  }
+
   function doExport(format: 'svg'): string;
   function doExport(format: 'svg-with-fonts', exportOptions?: SVGExportOptions): Promise<string>;
   function doExport(format: 'png', exportOptions?: ExportOptions): Promise<Blob>;
@@ -985,5 +1014,6 @@ export function createChart<TData extends DataRow = DataRow>(
     get isEditing(): boolean {
       return isTextEditingActive;
     },
+    setHighlight,
   };
 }

package/src/renderers/annotations.ts

@@ -121,6 +121,49 @@ function renderAnnotation(
     g.appendChild(line);
   }
 
+  // Footnote marker: annotation was demoted by auto-thinning. Render a numbered
+  // dot at the data point instead of the full label text.
+  if (annotation.footnoteIndex != null && annotation.label) {
+    const cx =
+      annotation.label.connector?.endpoint?.x ??
+      annotation.label.connector?.to.x ??
+      annotation.label.x;
+    const cy =
+      annotation.label.connector?.endpoint?.y ??
+      annotation.label.connector?.to.y ??
+      annotation.label.y;
+    const r = 8;
+    const circle = createSVGElement('circle');
+    circle.setAttribute('class', 'oc-annotation-footnote-marker');
+    setAttrs(circle, {
+      cx,
+      cy,
+      r,
+      fill: bgColor ?? '#ffffff',
+      stroke: annotation.label.style.fill ?? '#666',
+      'stroke-width': 1.5,
+    });
+    g.appendChild(circle);
+
+    const num = createSVGElement('text');
+    num.setAttribute('class', 'oc-annotation-footnote-number');
+    setAttrs(num, {
+      x: cx,
+      y: cy,
+      'dominant-baseline': 'central',
+      'text-anchor': 'middle',
+    });
+    applyTextStyle(num, {
+      ...annotation.label.style,
+      fontSize: 9,
+      fontWeight: 600,
+    });
+    num.textContent = String(annotation.footnoteIndex);
+    g.appendChild(num);
+    parent.appendChild(g);
+    return;
+  }
+
   // Label with optional connector line
   if (annotation.label?.visible) {
     // Render connector first (behind the label text)

package/src/renderers/chrome.ts

@@ -91,10 +91,41 @@ export function renderChrome(parent: SVGElement, layout: ChartLayout): void {
   }
 
   const bottomOffset = layout.chrome.bottomAnchorY ?? layout.area.y + layout.area.height;
+
+  // Footnotes from auto-thinned annotations, rendered above source/byline.
+  // Each footnote gets its own line to avoid horizontal overflow.
+  let footnoteBandHeight = 0;
+  if (chrome.footnotes && chrome.footnotes.length > 0) {
+    const fontSize = layout.theme.fonts.sizes.small;
+    const pad = layout.theme.spacing.padding;
+    const lineHeight = fontSize * 1.3;
+    const style = {
+      fontFamily: layout.theme.fonts.family,
+      fontSize,
+      fontWeight: layout.theme.fonts.weights.normal,
+      fill: layout.theme.chrome.source.color,
+      lineHeight: 1.3,
+      textAnchor: 'start' as const,
+    };
+
+    for (let i = 0; i < chrome.footnotes.length; i++) {
+      const f = chrome.footnotes[i];
+      const y =
+        bottomOffset + layout.theme.spacing.chartToFooter + textAscent(fontSize) + i * lineHeight;
+      const el = createSVGElement('text');
+      el.setAttribute('class', 'oc-footnotes');
+      setAttrs(el, { x: pad, y });
+      applyTextStyle(el, style);
+      el.textContent = `${f.index}. ${f.text}`;
+      g.appendChild(el);
+    }
+    footnoteBandHeight = chrome.footnotes.length * lineHeight + 4;
+  }
+
   if (chrome.source) {
     renderChromeElement(
       g,
-      { ...chrome.source, y: bottomOffset + chrome.source.y },
+      { ...chrome.source, y: bottomOffset + chrome.source.y + footnoteBandHeight },
       'oc-source',
       'source',
       measureText,
@@ -103,7 +134,7 @@ export function renderChrome(parent: SVGElement, layout: ChartLayout): void {
   if (chrome.byline) {
     renderChromeElement(
       g,
-      { ...chrome.byline, y: bottomOffset + chrome.byline.y },
+      { ...chrome.byline, y: bottomOffset + chrome.byline.y + footnoteBandHeight },
       'oc-byline',
       'byline',
       measureText,
@@ -112,14 +143,14 @@ export function renderChrome(parent: SVGElement, layout: ChartLayout): void {
   if (chrome.footer) {
     renderChromeElement(
       g,
-      { ...chrome.footer, y: bottomOffset + chrome.footer.y },
+      { ...chrome.footer, y: bottomOffset + chrome.footer.y + footnoteBandHeight },
       'oc-footer',
       'footer',
       measureText,
     );
   }
   if (chrome.brand) {
-    const brandY = bottomOffset + chrome.brand.y;
+    const brandY = bottomOffset + chrome.brand.y + footnoteBandHeight;
     renderChromeElement(g, { ...chrome.brand, y: brandY }, 'oc-brand', 'brand', measureText);
     // Accent dot to the left of the brand text. text-anchor=end means
     // brand.x is the right edge, so the dot sits 12px left of the measured