@opendata-ai/openchart-core 8.0.0-rc.9 → 8.1.0

package/src/colors/__tests__/palettes.test.ts

@@ -1,74 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { adaptColorForDarkMode } from '../../theme/dark-mode';
-import {
-  ACHROMATIC_RAMP,
-  CATEGORICAL_PALETTE,
-  DIVERGING_PALETTES,
-  DIVERGING_RED_BLUE,
-  SEQUENTIAL_BLUE,
-  SEQUENTIAL_PALETTES,
-} from '../palettes';
-
-describe('palettes', () => {
-  it('categorical palette has 9 colors (cyan-led OKLCH ramp)', () => {
-    expect(CATEGORICAL_PALETTE).toHaveLength(9);
-  });
-
-  it('categorical palette leads with cyan #06b6d4', () => {
-    expect(CATEGORICAL_PALETTE[0]).toBe('#06b6d4');
-  });
-
-  it('categorical palette colors are valid hex', () => {
-    for (const color of CATEGORICAL_PALETTE) {
-      expect(color).toMatch(/^#[0-9a-f]{6}$/i);
-    }
-  });
-
-  it('every categorical color round-trips cleanly through the dark-mode adapter', () => {
-    // Guard against hex strings that fail to parse (e.g. accidental oklch).
-    for (const color of CATEGORICAL_PALETTE) {
-      const adapted = adaptColorForDarkMode(color, '#ffffff', ACHROMATIC_RAMP.bg);
-      expect(adapted).toMatch(/^#[0-9a-f]{6}$/i);
-    }
-  });
-
-  it('exports an achromatic ramp keyed by token name', () => {
-    expect(ACHROMATIC_RAMP.bg).toBe('#09090b');
-    expect(ACHROMATIC_RAMP.fg).toBe('#f7f8f8');
-    expect(ACHROMATIC_RAMP.fgMuted).toBe('#a1a1aa');
-  });
-
-  it('sequential palettes have expected keys', () => {
-    expect(Object.keys(SEQUENTIAL_PALETTES)).toEqual(
-      expect.arrayContaining(['blue', 'green', 'orange', 'purple']),
-    );
-  });
-
-  it('sequential palettes have 6 stops each', () => {
-    for (const [_name, stops] of Object.entries(SEQUENTIAL_PALETTES)) {
-      expect(stops.length).toBeGreaterThanOrEqual(5);
-      expect(stops.length).toBeLessThanOrEqual(7);
-      // Verify all stops are hex
-      for (const stop of stops) {
-        expect(stop).toMatch(/^#[0-9a-f]{6}$/i);
-      }
-    }
-  });
-
-  it('diverging palettes have expected keys', () => {
-    expect(Object.keys(DIVERGING_PALETTES)).toEqual(
-      expect.arrayContaining(['redBlue', 'brownTeal']),
-    );
-  });
-
-  it('diverging palettes have 7 stops (neutral midpoint)', () => {
-    for (const stops of Object.values(DIVERGING_PALETTES)) {
-      expect(stops).toHaveLength(7);
-    }
-  });
-
-  it('named palette objects have matching names', () => {
-    expect(SEQUENTIAL_BLUE.name).toBe('blue');
-    expect(DIVERGING_RED_BLUE.name).toBe('redBlue');
-  });
-});

package/src/colors/colorblind.ts

@@ -1,131 +0,0 @@
-/**
- * Color blindness simulation and palette distinguishability checks.
- *
- * Uses Brettel, Vienot, and Mollon (1997) simulation matrices for
- * protanopia, deuteranopia, and tritanopia.
- *
- * These are approximations suitable for checking palette accessibility,
- * not medical-grade simulations.
- */
-
-import { rgb } from 'd3-color';
-
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-/** The four common types of color vision deficiency. */
-export type ColorBlindnessType = 'protanopia' | 'deuteranopia' | 'tritanopia' | 'achromatopsia';
-
-// ---------------------------------------------------------------------------
-// Simulation matrices
-// ---------------------------------------------------------------------------
-
-// 3x3 color transformation matrices for each deficiency type.
-// Applied in linear RGB space to simulate how colors appear.
-// Source: Brettel, Vienot & Mollon (1997), simplified.
-
-type Matrix3x3 = readonly [
-  readonly [number, number, number],
-  readonly [number, number, number],
-  readonly [number, number, number],
-];
-
-const PROTAN_MATRIX: Matrix3x3 = [
-  [0.567, 0.433, 0.0],
-  [0.558, 0.442, 0.0],
-  [0.0, 0.242, 0.758],
-];
-
-const DEUTAN_MATRIX: Matrix3x3 = [
-  [0.625, 0.375, 0.0],
-  [0.7, 0.3, 0.0],
-  [0.0, 0.3, 0.7],
-];
-
-const TRITAN_MATRIX: Matrix3x3 = [
-  [0.95, 0.05, 0.0],
-  [0.0, 0.433, 0.567],
-  [0.0, 0.475, 0.525],
-];
-
-// Total color blindness: every channel collapses to Rec. 709 relative
-// luminance, computed in linear RGB like the other matrices.
-const ACHROMAT_MATRIX: Matrix3x3 = [
-  [0.2126, 0.7152, 0.0722],
-  [0.2126, 0.7152, 0.0722],
-  [0.2126, 0.7152, 0.0722],
-];
-
-const MATRICES: Record<ColorBlindnessType, Matrix3x3> = {
-  protanopia: PROTAN_MATRIX,
-  deuteranopia: DEUTAN_MATRIX,
-  tritanopia: TRITAN_MATRIX,
-  achromatopsia: ACHROMAT_MATRIX,
-};
-
-// ---------------------------------------------------------------------------
-// sRGB linearization helpers
-// ---------------------------------------------------------------------------
-
-function linearize(v: number): number {
-  const s = v / 255;
-  return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
-}
-
-function delinearize(v: number): number {
-  const s = v <= 0.0031308 ? v * 12.92 : 1.055 * v ** (1 / 2.4) - 0.055;
-  return Math.round(Math.max(0, Math.min(255, s * 255)));
-}
-
-// ---------------------------------------------------------------------------
-// Public API
-// ---------------------------------------------------------------------------
-
-/**
- * Simulate how a color appears under a given color blindness type.
- * Returns a hex color string.
- */
-export function simulateColorBlindness(color: string, type: ColorBlindnessType): string {
-  const c = rgb(color);
-  if (c == null) return color;
-
-  const lin = [linearize(c.r), linearize(c.g), linearize(c.b)];
-  const m = MATRICES[type];
-
-  const r = m[0][0] * lin[0] + m[0][1] * lin[1] + m[0][2] * lin[2];
-  const g = m[1][0] * lin[0] + m[1][1] * lin[1] + m[1][2] * lin[2];
-  const b = m[2][0] * lin[0] + m[2][1] * lin[1] + m[2][2] * lin[2];
-
-  return rgb(delinearize(r), delinearize(g), delinearize(b)).formatHex();
-}
-
-/**
- * Check if colors in a palette are distinguishable under a given
- * color blindness type.
- *
- * Uses a minimum perceptual distance threshold in simulated space.
- * Returns true if all pairs of colors are sufficiently different.
- */
-export function checkPaletteDistinguishability(
-  colors: string[],
-  type: ColorBlindnessType,
-  minDistance = 30,
-): boolean {
-  const simulated = colors.map((c) => {
-    const s = rgb(simulateColorBlindness(c, type));
-    return s ? [s.r, s.g, s.b] : [0, 0, 0];
-  });
-
-  for (let i = 0; i < simulated.length; i++) {
-    for (let j = i + 1; j < simulated.length; j++) {
-      const dr = simulated[i][0] - simulated[j][0];
-      const dg = simulated[i][1] - simulated[j][1];
-      const db = simulated[i][2] - simulated[j][2];
-      const dist = Math.sqrt(dr * dr + dg * dg + db * db);
-      if (dist < minDistance) return false;
-    }
-  }
-
-  return true;
-}

package/src/colors/contrast.ts

@@ -1,143 +0,0 @@
-/**
- * WCAG contrast ratio utilities.
- *
- * Uses d3-color for color space parsing and manipulation.
- * All functions accept CSS color strings (hex, rgb, hsl, named colors).
- */
-
-import { rgb } from 'd3-color';
-
-// ---------------------------------------------------------------------------
-// Relative luminance (WCAG 2.1)
-// ---------------------------------------------------------------------------
-
-/**
- * Compute the relative luminance of a color per WCAG 2.1 definition.
- * https://www.w3.org/TR/WCAG21/#dfn-relative-luminance
- */
-export function relativeLuminance(color: string): number {
-  const c = rgb(color);
-  if (c == null) return 0;
-
-  const srgb = [c.r / 255, c.g / 255, c.b / 255];
-  const linear = srgb.map((v) => (v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4));
-  return 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2];
-}
-
-// ---------------------------------------------------------------------------
-// Public API
-// ---------------------------------------------------------------------------
-
-/**
- * Check whether a color string parses to a fully opaque color.
- * Contrast ratios are only meaningful against opaque backgrounds; the
- * default chart background ('transparent') defers to the host page and
- * can't be checked at compile time.
- */
-export function isOpaqueColor(color: string): boolean {
-  const c = rgb(color);
-  return c != null && !Number.isNaN(c.r) && c.opacity === 1;
-}
-
-/**
- * Compute the WCAG contrast ratio between two colors.
- * Returns a value between 1 (identical) and 21 (black on white).
- */
-export function contrastRatio(fg: string, bg: string): number {
-  const l1 = relativeLuminance(fg);
-  const l2 = relativeLuminance(bg);
-  const lighter = Math.max(l1, l2);
-  const darker = Math.min(l1, l2);
-  return (lighter + 0.05) / (darker + 0.05);
-}
-
-/**
- * Pick a legible label color (white or near-black) for text placed on top of `bg`.
- *
- * Uses a perceptual luminance threshold rather than a strict 4.5:1 contrast
- * gate. WCAG's 4.5:1 ratio is calibrated for body text on a page; bold value
- * labels sitting on a saturated filled bar read fine at lower ratios. A pure
- * contrast-ratio gate sends mid-tone fills (e.g. slate `#94a3b8`, L≈0.36) to
- * dark text even though white reads cleaner on them.
- *
- * The threshold is mode-dependent because of simultaneous contrast: the same
- * bar fill looks lighter against a dark canvas than against a white page, so
- * dark text reads more grounded on it. Dark mode therefore uses a lower
- * threshold (L < 0.30) to pivot mid-tone fills to dark text sooner.
- *
- * - Light mode (L < 0.42 → white): white on saturated and mid-tone fills;
- *   dark text only on genuinely light fills (`#b0b0b0` and lighter).
- * - Dark mode (L < 0.30 → white): saturated fills keep white; mid-tone fills
- *   (slate `#94a3b8`, cyan `#06b6d4`, mid-grey) pivot to dark text.
- */
-export function pickLabelColor(bg: string, darkMode = false): string {
-  const WHITE = '#ffffff';
-  const DARK = '#111111';
-  const threshold = darkMode ? 0.3 : 0.42;
-  return relativeLuminance(bg) < threshold ? WHITE : DARK;
-}
-
-/**
- * Check if two colors meet WCAG AA contrast requirements.
- * Normal text: 4.5:1, large text (18px+ bold or 24px+): 3:1.
- */
-export function meetsAA(fg: string, bg: string, largeText = false): boolean {
-  const ratio = contrastRatio(fg, bg);
-  return largeText ? ratio >= 3 : ratio >= 4.5;
-}
-
-/**
- * Find an accessible variant of `baseColor` against `bg`.
- *
- * Preserves the hue and saturation of baseColor but adjusts lightness
- * until the target contrast ratio is met. Returns the original color
- * if it already meets the target.
- */
-export function findAccessibleColor(baseColor: string, bg: string, targetRatio = 4.5): string {
-  if (contrastRatio(baseColor, bg) >= targetRatio) {
-    return baseColor;
-  }
-
-  const c = rgb(baseColor);
-  if (c == null) return baseColor;
-
-  const bgLum = relativeLuminance(bg);
-  const baseLum = relativeLuminance(baseColor);
-
-  // Try both directions: prefer the one matching bg luminance, but fall back
-  // to the other if the base color is already at the extreme (e.g. white on
-  // a medium-luminance background can't be lightened, so darken instead).
-  const preferDarken = bgLum > 0.5;
-  const directions = preferDarken ? [true, false] : [false, true];
-
-  for (const darken of directions) {
-    // Skip impossible directions: can't lighten white or darken black.
-    if (!darken && baseLum > 0.95) continue;
-    if (darken && baseLum < 0.05) continue;
-
-    let lo = 0;
-    let hi = 1;
-    let best: string | null = null;
-
-    for (let i = 0; i < 20; i++) {
-      const mid = (lo + hi) / 2;
-      const adjusted = darken
-        ? rgb(c.r * (1 - mid), c.g * (1 - mid), c.b * (1 - mid))
-        : rgb(c.r + (255 - c.r) * mid, c.g + (255 - c.g) * mid, c.b + (255 - c.b) * mid);
-
-      const hex = adjusted.formatHex();
-      const ratio = contrastRatio(hex, bg);
-
-      if (ratio >= targetRatio) {
-        best = hex;
-        hi = mid;
-      } else {
-        lo = mid;
-      }
-    }
-
-    if (best) return best;
-  }
-
-  return baseColor;
-}

package/src/colors/index.ts

@@ -1,36 +0,0 @@
-/**
- * Color system barrel export.
- */
-
-export type { ColorBlindnessType } from './colorblind';
-export {
-  checkPaletteDistinguishability,
-  simulateColorBlindness,
-} from './colorblind';
-
-export {
-  contrastRatio,
-  findAccessibleColor,
-  isOpaqueColor,
-  meetsAA,
-  pickLabelColor,
-} from './contrast';
-export type {
-  CategoricalPalette,
-  DivergingPalette,
-  SequentialPalette,
-} from './palettes';
-export {
-  ACHROMATIC_RAMP,
-  CATEGORICAL_PALETTE,
-  DIVERGING_BROWN_TEAL,
-  DIVERGING_PALETTES,
-  DIVERGING_RED_BLUE,
-  resolveSchemeName,
-  SEQUENTIAL_BLUE,
-  SEQUENTIAL_GREEN,
-  SEQUENTIAL_ORANGE,
-  SEQUENTIAL_PALETTES,
-  SEQUENTIAL_PURPLE,
-  SUPPORTED_SCHEME_NAMES,
-} from './palettes';

package/src/colors/palettes.ts

@@ -1,206 +0,0 @@
-/**
- * Color palettes for @opendata-ai.
- *
- * Categorical palette leads with cyan and uses an OKLCH-balanced multi-hue
- * ramp tuned to L≈0.70, C≈0.13–0.15. Hex values are precomputed sRGB
- * (rather than raw `oklch()` strings) because raw OKLCH strings parse
- * unreliably through d3-color and the dark-mode adapter's hsl-based
- * binary search. Source OKLCH values are documented inline so the ramp
- * can be regenerated if needed.
- *
- * Convention for low-cardinality charts (1 / 2-4 / 5+ series) is available
- * as an opt-in via `theme.seriesStrategy`. The default strategy is 'palette'
- * (full categorical ramp always). The accent-neutral convention is:
- *   - 1 series: cyan only
- *   - 2-4 series: cyan + zinc-400/500/600 (achromatic)
- *   - 5+ series: full multi-hue ramp below
- *
- * Sequential palettes: 5-7 stops from light to dark.
- * Diverging palettes: 7 stops with a neutral midpoint.
- */
-
-// ---------------------------------------------------------------------------
-// Achromatic ramp (zinc-based, dark-mode canonical)
-// ---------------------------------------------------------------------------
-
-/**
- * Achromatic surface and supporting-series ramp. Values are the canonical
- * dark-mode tokens; light-mode equivalents are derived per token in
- * `theme/dark-mode.ts` and the CSS partials, not mirrored here.
- */
-export const ACHROMATIC_RAMP = {
-  fg: '#f7f8f8', // primary text
-  fg2: '#d0d6e0', // body text
-  fgMuted: '#a1a1aa', // secondary series (zinc-400)
-  fgSubtle: '#71717a', // tertiary series (zinc-500)
-  fgFaint: '#52525b', // quaternary series (zinc-600)
-  secondary: '#27272a', // hover / raised surface
-  card: '#111113', // card surface
-  bg: '#09090b', // canvas
-} as const;
-
-// ---------------------------------------------------------------------------
-// Categorical
-// ---------------------------------------------------------------------------
-
-/**
- * Default categorical palette. Cyan-led OKLCH-balanced multi-hue ramp.
- *
- * Hex values precomputed from OKLCH via the standard OKLab -> linear sRGB
- * -> sRGB pipeline. Documented OKLCH source values are the contract; if
- * the conversion math changes, regenerate from the source rather than
- * editing hex literals directly.
- *
- * Tuned at L≈0.65, C≈0.20 (vs prior L≈0.70, C≈0.15) for more vivid,
- * saturated color on dark backgrounds where the lighter pastels read soft.
- */
-// Order interleaves hues so adjacent slots sit at least ~70° apart on the
-// OKLCH wheel. Cyan and teal differ by only ~10° and read as the same color
-// when placed side-by-side (e.g. on a pie slice or stacked area), so the
-// teal slot is pushed deep into the ramp where it won't neighbor cyan.
-export const CATEGORICAL_PALETTE = [
-  '#06b6d4', // cyan,    primary accent (sRGB literal, ~205°)
-  '#ee4a73', // rose     — oklch(65% 0.20 10)
-  '#00b054', // emerald  — oklch(65% 0.20 155)
-  '#a46bf5', // violet   — oklch(65% 0.20 300)
-  '#e07d00', // amber    — oklch(68% 0.19 70)
-  '#0091ff', // sky      — oklch(65% 0.20 250)
-  '#f36000', // orange   — oklch(67% 0.20 45)
-  '#6f7dff', // indigo   — oklch(65% 0.20 275)
-  '#00afbf', // teal     — oklch(65% 0.20 200)
-] as const;
-
-export type CategoricalPalette = typeof CATEGORICAL_PALETTE;
-
-// ---------------------------------------------------------------------------
-// Sequential
-// ---------------------------------------------------------------------------
-
-/** Sequential palette definition: an array of color stops from light to dark. */
-export interface SequentialPalette {
-  readonly name: string;
-  readonly stops: readonly string[];
-}
-
-export const SEQUENTIAL_BLUE: SequentialPalette = {
-  name: 'blue',
-  stops: ['#deebf7', '#c6dbef', '#9ecae1', '#6baed6', '#3182bd', '#08519c'],
-} as const;
-
-export const SEQUENTIAL_GREEN: SequentialPalette = {
-  name: 'green',
-  stops: ['#e5f5e0', '#c7e9c0', '#a1d99b', '#74c476', '#31a354', '#006d2c'],
-} as const;
-
-export const SEQUENTIAL_ORANGE: SequentialPalette = {
-  name: 'orange',
-  stops: ['#fee6ce', '#fdd0a2', '#fdae6b', '#fd8d3c', '#e6550d', '#a63603'],
-} as const;
-
-export const SEQUENTIAL_PURPLE: SequentialPalette = {
-  name: 'purple',
-  stops: ['#efedf5', '#dadaeb', '#bcbddc', '#9e9ac8', '#756bb1', '#54278f'],
-} as const;
-
-export const SEQUENTIAL_TEAL: SequentialPalette = {
-  name: 'teal',
-  stops: ['#06b6d4', '#05a3be', '#0490a8', '#037d92', '#026a7c', '#015766', '#004450'],
-} as const;
-
-/** All sequential palettes keyed by name. */
-export const SEQUENTIAL_PALETTES: Record<string, string[]> = {
-  blue: [...SEQUENTIAL_BLUE.stops],
-  green: [...SEQUENTIAL_GREEN.stops],
-  orange: [...SEQUENTIAL_ORANGE.stops],
-  purple: [...SEQUENTIAL_PURPLE.stops],
-  teal: [...SEQUENTIAL_TEAL.stops],
-};
-
-// ---------------------------------------------------------------------------
-// Diverging
-// ---------------------------------------------------------------------------
-
-/** Diverging palette definition: an array of color stops with a neutral midpoint. */
-export interface DivergingPalette {
-  readonly name: string;
-  readonly stops: readonly string[];
-}
-
-export const DIVERGING_RED_BLUE: DivergingPalette = {
-  name: 'redBlue',
-  stops: [
-    '#b2182b', // strong red
-    '#d6604d', // medium red
-    '#f4a582', // light red
-    '#f7f7f7', // neutral
-    '#92c5de', // light blue
-    '#4393c3', // medium blue
-    '#2166ac', // strong blue
-  ],
-} as const;
-
-export const DIVERGING_BROWN_TEAL: DivergingPalette = {
-  name: 'brownTeal',
-  stops: [
-    '#8c510a', // strong brown
-    '#bf812d', // medium brown
-    '#dfc27d', // light brown
-    '#f6e8c3', // neutral
-    '#80cdc1', // light teal
-    '#35978f', // medium teal
-    '#01665e', // strong teal
-  ],
-} as const;
-
-/** All diverging palettes keyed by name. */
-export const DIVERGING_PALETTES: Record<string, string[]> = {
-  redBlue: [...DIVERGING_RED_BLUE.stops],
-  brownTeal: [...DIVERGING_BROWN_TEAL.stops],
-};
-
-// ---------------------------------------------------------------------------
-// Scheme name resolution (spec-level `scale: { scheme }` support)
-// ---------------------------------------------------------------------------
-
-/**
- * Vega-Lite scheme-name aliases mapped onto the openchart palettes.
- * Keys are lowercase. Only schemes with a faithful local equivalent are
- * aliased; unknown names fail validation with the supported list rather
- * than silently substituting an unrelated ramp.
- */
-const VL_SCHEME_ALIASES: Record<string, string> = {
-  blues: 'blue',
-  greens: 'green',
-  oranges: 'orange',
-  purples: 'purple',
-  teals: 'teal',
-  redblue: 'redBlue',
-  brownteal: 'brownTeal',
-  // ColorBrewer BrBG, which brownTeal mirrors
-  brownbluegreen: 'brownTeal',
-  category10: 'categorical',
-  tableau10: 'categorical',
-};
-
-/**
- * Resolve a scheme name to its palette stops. Accepts openchart palette names
- * (blue, green, orange, purple, teal, redBlue, brownTeal, categorical) and
- * common Vega-Lite aliases (blues, greens, ..., redblue, category10).
- * Case-insensitive. Returns undefined for unknown names.
- */
-export function resolveSchemeName(name: string): string[] | undefined {
-  const canonical =
-    SEQUENTIAL_PALETTES[name] || DIVERGING_PALETTES[name]
-      ? name
-      : (VL_SCHEME_ALIASES[name.toLowerCase()] ?? name.toLowerCase());
-  if (canonical === 'categorical') return [...CATEGORICAL_PALETTE];
-  return SEQUENTIAL_PALETTES[canonical] ?? DIVERGING_PALETTES[canonical];
-}
-
-/** Scheme names accepted by `scale: { scheme }`, for validation messages. */
-export const SUPPORTED_SCHEME_NAMES: readonly string[] = [
-  ...Object.keys(SEQUENTIAL_PALETTES),
-  ...Object.keys(DIVERGING_PALETTES),
-  'categorical',
-  ...Object.keys(VL_SCHEME_ALIASES),
-];

package/src/helpers/__tests__/deep-merge.test.ts

@@ -1,54 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { deepMergeSpec } from '../deep-merge';
-
-describe('deepMergeSpec', () => {
-  it('merges nested plain objects key by key', () => {
-    const base = { encoding: { x: { field: 'a' }, y: { field: 'b' } }, chrome: { title: 'X' } };
-    const patch = { encoding: { y: { field: 'c' } } };
-    expect(deepMergeSpec(base, patch)).toEqual({
-      encoding: { x: { field: 'a' }, y: { field: 'c' } },
-      chrome: { title: 'X' },
-    });
-  });
-
-  it('replaces arrays wholesale rather than merging by index', () => {
-    const base = { annotations: [{ type: 'text', text: 'old' }] };
-    const patch = { annotations: [{ type: 'refline', y: 5 }] };
-    expect(deepMergeSpec(base, patch)).toEqual({
-      annotations: [{ type: 'refline', y: 5 }],
-    });
-  });
-
-  it('leaves target untouched when patch value is undefined', () => {
-    const base = { chrome: { title: 'X' } };
-    expect(deepMergeSpec(base, { chrome: { title: undefined } })).toEqual({
-      chrome: { title: 'X' },
-    });
-  });
-
-  it('overwrites with null explicitly', () => {
-    const base = { encoding: { color: { field: 'a' } } };
-    expect(deepMergeSpec(base, { encoding: { color: null } })).toEqual({
-      encoding: { color: null },
-    });
-  });
-
-  it('does not mutate the source objects', () => {
-    const base = { encoding: { x: { field: 'a' } } };
-    const patch = { encoding: { x: { field: 'b' } } };
-    const result = deepMergeSpec(base, patch);
-    expect(result).not.toBe(base);
-    expect(base.encoding.x.field).toBe('a');
-  });
-
-  it('cumulative patches compose left to right', () => {
-    let spec: Record<string, unknown> = { mark: 'line', encoding: { y: { field: 'a' } } };
-    const patches = [{ chrome: { title: 'Step 1' } }, { encoding: { y: { field: 'b' } } }];
-    for (const p of patches) spec = deepMergeSpec(spec, p);
-    expect(spec).toEqual({
-      mark: 'line',
-      encoding: { y: { field: 'b' } },
-      chrome: { title: 'Step 1' },
-    });
-  });
-});