@opendata-ai/openchart-engine 1.2.0

package/src/legend/compute.ts

@@ -0,0 +1,186 @@
+/**
+ * Legend computation.
+ *
+ * Derives legend entries from the color encoding's unique values in data,
+ * computes position based on layout strategy, and returns a LegendLayout
+ * that dimensions.ts uses to reserve space in the chart area.
+ *
+ * The legend is computed early (before marks) so the chartArea accounts
+ * for legend space. Entries come from data + encoding, not marks.
+ */
+
+import type {
+  LayoutStrategy,
+  LegendEntry,
+  LegendLayout,
+  Rect,
+  ResolvedTheme,
+  TextStyle,
+} from '@opendata-ai/openchart-core';
+import { estimateTextWidth } from '@opendata-ai/openchart-core';
+
+import type { NormalizedChartSpec } from '../compiler/types';
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+const SWATCH_SIZE = 12;
+const SWATCH_GAP = 6;
+const ENTRY_GAP = 16;
+const LEGEND_PADDING = 8;
+const LEGEND_RIGHT_WIDTH = 120;
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Determine the swatch shape based on chart type. */
+function swatchShapeForType(chartType: string): LegendEntry['shape'] {
+  switch (chartType) {
+    case 'line':
+      return 'line';
+    case 'scatter':
+    case 'dot':
+      return 'circle';
+    default:
+      return 'square';
+  }
+}
+
+/** Extract unique color values from data based on the color encoding. */
+function extractColorEntries(spec: NormalizedChartSpec, theme: ResolvedTheme): LegendEntry[] {
+  const colorEnc = spec.encoding.color;
+  if (!colorEnc) return [];
+
+  // Sequential (quantitative) color doesn't produce discrete legend entries
+  if (colorEnc.type === 'quantitative') return [];
+
+  const uniqueValues = [...new Set(spec.data.map((d) => String(d[colorEnc.field])))];
+  const palette = theme.colors.categorical;
+  const shape = swatchShapeForType(spec.type);
+
+  return uniqueValues.map((value, i) => ({
+    label: value,
+    color: palette[i % palette.length],
+    shape,
+    active: true,
+  }));
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Compute legend layout for a chart spec.
+ *
+ * @param spec - Normalized chart spec.
+ * @param strategy - Responsive layout strategy.
+ * @param theme - Resolved theme.
+ * @param chartArea - The available chart area (before legend space is reserved).
+ * @returns LegendLayout with position, entries, and bounds.
+ */
+export function computeLegend(
+  spec: NormalizedChartSpec,
+  strategy: LayoutStrategy,
+  theme: ResolvedTheme,
+  chartArea: Rect,
+): LegendLayout {
+  const entries = extractColorEntries(spec, theme);
+
+  const labelStyle: TextStyle = {
+    fontFamily: theme.fonts.family,
+    fontSize: theme.fonts.sizes.small,
+    fontWeight: theme.fonts.weights.normal,
+    fill: theme.colors.text,
+    lineHeight: 1.3,
+  };
+
+  // Resolve position: spec-level override wins, then responsive strategy
+  const resolvedPosition =
+    spec.legend?.position ?? (strategy.legendPosition === 'right' ? 'right' : 'top');
+
+  // No entries = empty legend with no space
+  if (entries.length === 0) {
+    return {
+      position: resolvedPosition,
+      entries: [],
+      bounds: { x: 0, y: 0, width: 0, height: 0 },
+      labelStyle,
+      swatchSize: SWATCH_SIZE,
+      swatchGap: SWATCH_GAP,
+      entryGap: ENTRY_GAP,
+    };
+  }
+
+  if (resolvedPosition === 'right' || resolvedPosition === 'bottom-right') {
+    // Right-positioned legend: vertical stack
+    const maxLabelWidth = Math.max(
+      ...entries.map((e) => estimateTextWidth(e.label, labelStyle.fontSize, labelStyle.fontWeight)),
+    );
+    const legendWidth = Math.min(
+      LEGEND_RIGHT_WIDTH,
+      SWATCH_SIZE + SWATCH_GAP + maxLabelWidth + LEGEND_PADDING * 2,
+    );
+    const entryHeight = Math.max(SWATCH_SIZE, labelStyle.fontSize * labelStyle.lineHeight);
+    const legendHeight =
+      entries.length * entryHeight + (entries.length - 1) * 4 + LEGEND_PADDING * 2;
+    const clampedHeight = Math.min(legendHeight, chartArea.height);
+
+    // bottom-right anchors to the bottom of the chart area
+    const legendY =
+      resolvedPosition === 'bottom-right'
+        ? chartArea.y + chartArea.height - clampedHeight
+        : chartArea.y;
+
+    // Apply user-provided legend offset
+    const offsetDx = spec.legend?.offset?.dx ?? 0;
+    const offsetDy = spec.legend?.offset?.dy ?? 0;
+
+    return {
+      position: resolvedPosition,
+      entries,
+      bounds: {
+        x: chartArea.x + chartArea.width - legendWidth + offsetDx,
+        y: legendY + offsetDy,
+        width: legendWidth,
+        height: clampedHeight,
+      },
+      labelStyle,
+      swatchSize: SWATCH_SIZE,
+      swatchGap: SWATCH_GAP,
+      entryGap: 4,
+    };
+  }
+
+  // Top/bottom-positioned legend: horizontal flow
+  const totalWidth = entries.reduce((sum, entry) => {
+    const labelWidth = estimateTextWidth(entry.label, labelStyle.fontSize, labelStyle.fontWeight);
+    return sum + SWATCH_SIZE + SWATCH_GAP + labelWidth + ENTRY_GAP;
+  }, 0);
+
+  const legendHeight = SWATCH_SIZE + LEGEND_PADDING * 2;
+
+  // Apply user-provided legend offset
+  const offsetDx = spec.legend?.offset?.dx ?? 0;
+  const offsetDy = spec.legend?.offset?.dy ?? 0;
+
+  return {
+    position: resolvedPosition,
+    entries,
+    bounds: {
+      x: chartArea.x + offsetDx,
+      y:
+        (resolvedPosition === 'bottom'
+          ? chartArea.y + chartArea.height - legendHeight
+          : chartArea.y) + offsetDy,
+      width: Math.min(totalWidth, chartArea.width),
+      height: legendHeight,
+    },
+    labelStyle,
+    swatchSize: SWATCH_SIZE,
+    swatchGap: SWATCH_GAP,
+    entryGap: ENTRY_GAP,
+  };
+}

package/src/tables/__tests__/bar-column.test.ts

@@ -0,0 +1,147 @@
+import type { BarColumnConfig } from '@opendata-ai/openchart-core';
+import { resolveTheme } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { computeBarCell, computeColumnMax, computeColumnMin } from '../bar-column';
+
+const theme = resolveTheme();
+
+describe('computeBarCell', () => {
+  it('computes correct percentage for mid-range value', () => {
+    const config: BarColumnConfig = {};
+    const result = computeBarCell(50, config, 100, 0, theme, false);
+    expect(result.barPercent).toBeCloseTo(0.5);
+    expect(result.barOffset).toBe(0);
+    expect(result.isNegative).toBe(false);
+  });
+
+  it('computes 100% for max value', () => {
+    const config: BarColumnConfig = {};
+    const result = computeBarCell(100, config, 100, 0, theme, false);
+    expect(result.barPercent).toBeCloseTo(1);
+  });
+
+  it('computes 0% for zero value', () => {
+    const config: BarColumnConfig = {};
+    const result = computeBarCell(0, config, 100, 0, theme, false);
+    expect(result.barPercent).toBeCloseTo(0);
+  });
+
+  it('uses config maxValue when provided', () => {
+    const config: BarColumnConfig = { maxValue: 200 };
+    const result = computeBarCell(100, config, 50, 0, theme, false);
+    // Should use config maxValue (200), not columnMax (50)
+    expect(result.barPercent).toBeCloseTo(0.5);
+  });
+
+  it('clamps negative values to 0 when column has no negatives', () => {
+    const config: BarColumnConfig = {};
+    // columnMin=0 means no negative values in the column
+    const result = computeBarCell(-10, config, 100, 0, theme, false);
+    expect(result.barPercent).toBe(0);
+  });
+
+  it('clamps values above max to 1', () => {
+    const config: BarColumnConfig = {};
+    const result = computeBarCell(150, config, 100, 0, theme, false);
+    expect(result.barPercent).toBe(1);
+  });
+
+  it('uses custom color from config', () => {
+    const config: BarColumnConfig = { color: '#ff0000' };
+    const result = computeBarCell(50, config, 100, 0, theme, false);
+    expect(result.barColor).toBe('#ff0000');
+  });
+
+  it('defaults to first categorical palette color', () => {
+    const config: BarColumnConfig = {};
+    const result = computeBarCell(50, config, 100, 0, theme, false);
+    expect(result.barColor).toBe(theme.colors.categorical[0]);
+  });
+
+  it('handles NaN value', () => {
+    const config: BarColumnConfig = {};
+    const result = computeBarCell(NaN, config, 100, 0, theme, false);
+    expect(result.barPercent).toBe(0);
+  });
+
+  it('handles Infinity value', () => {
+    const config: BarColumnConfig = {};
+    const result = computeBarCell(Infinity, config, 100, 0, theme, false);
+    expect(result.barPercent).toBe(0);
+  });
+
+  it('handles zero columnMax', () => {
+    const config: BarColumnConfig = {};
+    const result = computeBarCell(50, config, 0, 0, theme, false);
+    expect(result.barPercent).toBe(0);
+  });
+
+  // Negative value support
+  it('renders negative value as bidirectional bar', () => {
+    const config: BarColumnConfig = {};
+    // Column range: -20 to 80, totalRange = 100, zeroPos = 0.2
+    const result = computeBarCell(-10, config, 80, -20, theme, false);
+    expect(result.isNegative).toBe(true);
+    expect(result.barPercent).toBeCloseTo(0.1); // 10/100
+    expect(result.barOffset).toBeCloseTo(0.1); // zeroPos(0.2) - barPercent(0.1)
+  });
+
+  it('renders positive value with offset when column has negatives', () => {
+    const config: BarColumnConfig = {};
+    // Column range: -20 to 80, totalRange = 100, zeroPos = 0.2
+    const result = computeBarCell(40, config, 80, -20, theme, false);
+    expect(result.isNegative).toBe(false);
+    expect(result.barPercent).toBeCloseTo(0.4); // 40/100
+    expect(result.barOffset).toBeCloseTo(0.2); // zeroPos
+  });
+
+  it('uses red color for negative bars by default', () => {
+    const config: BarColumnConfig = {};
+    const result = computeBarCell(-10, config, 80, -20, theme, false);
+    expect(result.isNegative).toBe(true);
+    expect(result.barColor).toBe('#c44e52');
+  });
+
+  it('uses custom color for negative bars when config.color is set', () => {
+    const config: BarColumnConfig = { color: '#ff0000' };
+    const result = computeBarCell(-10, config, 80, -20, theme, false);
+    expect(result.barColor).toBe('#ff0000');
+  });
+});
+
+describe('computeColumnMax', () => {
+  it('finds the max numeric value in a column', () => {
+    const data = [{ value: 10 }, { value: 50 }, { value: 30 }];
+    expect(computeColumnMax(data, 'value')).toBe(50);
+  });
+
+  it('ignores non-numeric values', () => {
+    const data = [{ value: 10 }, { value: 'hello' }, { value: null }, { value: 30 }];
+    expect(computeColumnMax(data, 'value')).toBe(30);
+  });
+
+  it('returns 0 for empty data', () => {
+    expect(computeColumnMax([], 'value')).toBe(0);
+  });
+
+  it('returns 0 when all values are non-numeric', () => {
+    const data = [{ value: 'a' }, { value: 'b' }];
+    expect(computeColumnMax(data, 'value')).toBe(0);
+  });
+});
+
+describe('computeColumnMin', () => {
+  it('finds the min numeric value in a column', () => {
+    const data = [{ value: 10 }, { value: -5 }, { value: 30 }];
+    expect(computeColumnMin(data, 'value')).toBe(-5);
+  });
+
+  it('returns 0 for all-positive data', () => {
+    const data = [{ value: 10 }, { value: 20 }];
+    expect(computeColumnMin(data, 'value')).toBe(0);
+  });
+
+  it('returns 0 for empty data', () => {
+    expect(computeColumnMin([], 'value')).toBe(0);
+  });
+});

package/src/tables/__tests__/category-colors.test.ts

@@ -0,0 +1,153 @@
+import type { ColumnConfig, ResolvedTheme } from '@opendata-ai/openchart-core';
+import { adaptTheme, contrastRatio, resolveTheme } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { computeCategoryColors } from '../category-colors';
+
+function getTheme(dark = false): ResolvedTheme {
+  const theme = resolveTheme();
+  return dark ? adaptTheme(theme) : theme;
+}
+
+describe('computeCategoryColors', () => {
+  const data = [
+    { status: 'active' },
+    { status: 'inactive' },
+    { status: 'active' },
+    { status: 'pending' },
+  ];
+
+  it('applies explicit color mapping correctly', () => {
+    const col: ColumnConfig = {
+      key: 'status',
+      categoryColors: {
+        active: '#00ff00',
+        inactive: '#ff0000',
+      },
+    };
+    const theme = getTheme();
+    const colors = computeCategoryColors(data, col, theme, false);
+
+    expect(colors.size).toBe(4);
+    // "active" rows (indices 0, 2) should have green background
+    expect(colors.get(0)!.backgroundColor).toBe('#00ff00');
+    expect(colors.get(2)!.backgroundColor).toBe('#00ff00');
+    // "inactive" row (index 1) should have red background
+    expect(colors.get(1)!.backgroundColor).toBe('#ff0000');
+  });
+
+  it('unmapped values get palette colors', () => {
+    const col: ColumnConfig = {
+      key: 'status',
+      categoryColors: {
+        active: '#00ff00',
+      },
+    };
+    const theme = getTheme();
+    const colors = computeCategoryColors(data, col, theme, false);
+
+    // "inactive" and "pending" are not in the explicit map, should get palette colors
+    const inactiveBg = colors.get(1)!.backgroundColor!;
+    const pendingBg = colors.get(3)!.backgroundColor!;
+
+    // They should be assigned from the categorical palette
+    expect(inactiveBg).toBeTruthy();
+    expect(pendingBg).toBeTruthy();
+    // They should not be the explicit mapped color
+    expect(inactiveBg).not.toBe('#00ff00');
+  });
+
+  it('same category value gets consistent colors', () => {
+    const col: ColumnConfig = {
+      key: 'status',
+      categoryColors: { active: '#00ff00' },
+    };
+    const theme = getTheme();
+    const colors = computeCategoryColors(data, col, theme, false);
+
+    // Both "active" rows should have the same color
+    expect(colors.get(0)!.backgroundColor).toBe(colors.get(2)!.backgroundColor);
+  });
+
+  it('text contrast meets AA (at least 3:1)', () => {
+    const col: ColumnConfig = {
+      key: 'status',
+      categoryColors: {
+        active: '#00ff00',
+        inactive: '#ff0000',
+        pending: '#0000ff',
+      },
+    };
+    const theme = getTheme();
+    const colors = computeCategoryColors(data, col, theme, false);
+
+    for (const [, style] of colors) {
+      const bg = style.backgroundColor!;
+      const fg = style.color!;
+      const ratio = contrastRatio(fg, bg);
+      // accessibleTextColor picks black or white; both should exceed 3:1
+      expect(ratio).toBeGreaterThanOrEqual(3);
+    }
+  });
+
+  it('dark mode adapts colors', () => {
+    const col: ColumnConfig = {
+      key: 'status',
+      categoryColors: {
+        active: '#00ff00',
+        inactive: '#ff0000',
+      },
+    };
+    const lightTheme = getTheme(false);
+    const darkTheme = getTheme(true);
+
+    const lightColors = computeCategoryColors(data, col, lightTheme, false);
+    const darkColors = computeCategoryColors(data, col, darkTheme, true);
+
+    expect(lightColors.size).toBe(darkColors.size);
+
+    // Dark mode colors should be adapted (different from light mode)
+    const lightBg = lightColors.get(0)!.backgroundColor;
+    const darkBg = darkColors.get(0)!.backgroundColor;
+    expect(darkBg).not.toBe(lightBg);
+  });
+
+  it('dark mode text contrast still meets AA', () => {
+    const col: ColumnConfig = {
+      key: 'status',
+      categoryColors: {
+        active: '#00ff00',
+        inactive: '#ff0000',
+      },
+    };
+    const theme = getTheme(true);
+    const colors = computeCategoryColors(data, col, theme, true);
+
+    for (const [, style] of colors) {
+      const bg = style.backgroundColor!;
+      const fg = style.color!;
+      const ratio = contrastRatio(fg, bg);
+      expect(ratio).toBeGreaterThanOrEqual(3);
+    }
+  });
+
+  it('returns empty map when no categoryColors config', () => {
+    const col: ColumnConfig = { key: 'status' };
+    const theme = getTheme();
+    const colors = computeCategoryColors(data, col, theme, false);
+    expect(colors.size).toBe(0);
+  });
+
+  it('skips null values', () => {
+    const dataWithNull = [{ status: 'active' }, { status: null }, { status: 'inactive' }];
+    const col: ColumnConfig = {
+      key: 'status',
+      categoryColors: { active: '#00ff00', inactive: '#ff0000' },
+    };
+    const theme = getTheme();
+    const colors = computeCategoryColors(dataWithNull, col, theme, false);
+
+    // null row (index 1) should not be included
+    expect(colors.has(1)).toBe(false);
+    expect(colors.size).toBe(2);
+  });
+});

package/src/tables/__tests__/compile-table.test.ts

@@ -0,0 +1,208 @@
+import type { CompileTableOptions } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import { compileTable } from '../../compile';
+
+const sampleData = [
+  { name: 'Alice', age: 30, score: 88.5 },
+  { name: 'Bob', age: 25, score: 92.1 },
+  { name: 'Charlie', age: 35, score: 76.3 },
+  { name: 'Diana', age: 28, score: 95.0 },
+];
+
+const baseSpec = {
+  type: 'table' as const,
+  data: sampleData,
+  columns: [
+    { key: 'name', label: 'Name' },
+    { key: 'age', label: 'Age' },
+    { key: 'score', label: 'Score' },
+  ],
+};
+
+const baseOptions: CompileTableOptions = {
+  width: 800,
+  height: 600,
+};
+
+describe('compileTable', () => {
+  it('produces a valid TableLayout from a basic spec', () => {
+    const layout = compileTable(baseSpec, baseOptions);
+
+    expect(layout.columns).toHaveLength(3);
+    expect(layout.rows).toHaveLength(4);
+    expect(layout.theme).toBeDefined();
+    expect(layout.chrome).toBeDefined();
+    expect(layout.search.enabled).toBe(false);
+    expect(layout.stickyFirstColumn).toBe(false);
+    expect(layout.compact).toBe(false);
+  });
+
+  it('formats cell values correctly', () => {
+    const layout = compileTable(baseSpec, baseOptions);
+
+    // First row, first cell should be "Alice"
+    const firstRow = layout.rows[0];
+    expect(firstRow.cells[0].formattedValue).toBe('Alice');
+    // Age should be formatted as number
+    expect(firstRow.cells[1].formattedValue).toBe('30');
+    // Score should be formatted with decimal
+    expect(firstRow.cells[2].formattedValue).toBe('88.50');
+  });
+
+  it('applies d3-format strings to numeric columns', () => {
+    const spec = {
+      ...baseSpec,
+      columns: [{ key: 'name' }, { key: 'age', format: '.1f' }, { key: 'score', format: ',.0f' }],
+    };
+    const layout = compileTable(spec, baseOptions);
+
+    expect(layout.rows[0].cells[1].formattedValue).toBe('30.0');
+    expect(layout.rows[0].cells[2].formattedValue).toBe('89');
+  });
+
+  it('right-aligns number columns by default', () => {
+    const layout = compileTable(baseSpec, baseOptions);
+
+    // name should be left, age and score should be right
+    expect(layout.columns[0].align).toBe('left');
+    expect(layout.columns[1].align).toBe('right');
+    expect(layout.columns[2].align).toBe('right');
+  });
+
+  it('generates stable row IDs from data index', () => {
+    const layout = compileTable(baseSpec, baseOptions);
+
+    expect(layout.rows[0].id).toBe('0');
+    expect(layout.rows[1].id).toBe('1');
+    expect(layout.rows[2].id).toBe('2');
+    expect(layout.rows[3].id).toBe('3');
+  });
+
+  it('uses rowKey for row IDs when specified', () => {
+    const spec = { ...baseSpec, rowKey: 'name' };
+    const layout = compileTable(spec, baseOptions);
+
+    expect(layout.rows[0].id).toBe('Alice');
+    expect(layout.rows[1].id).toBe('Bob');
+    expect(layout.rows[2].id).toBe('Charlie');
+    expect(layout.rows[3].id).toBe('Diana');
+  });
+
+  it('applies tabular-nums font variant on number cells', () => {
+    const layout = compileTable(baseSpec, baseOptions);
+
+    // age cell should have tabular-nums
+    const ageCell = layout.rows[0].cells[1];
+    expect(ageCell.style.fontVariant).toBe('tabular-nums');
+
+    // name cell should not
+    const nameCell = layout.rows[0].cells[0];
+    expect(nameCell.style.fontVariant).toBeUndefined();
+  });
+
+  it('computes reasonable column widths (header text not clipped)', () => {
+    const layout = compileTable(baseSpec, baseOptions);
+
+    for (const col of layout.columns) {
+      // Each column should be at least 60px
+      expect(col.width).toBeGreaterThanOrEqual(60);
+    }
+  });
+
+  it('computes chrome from spec', () => {
+    const spec = {
+      ...baseSpec,
+      chrome: { title: 'Test Table', subtitle: 'A test' },
+    };
+    const layout = compileTable(spec, baseOptions);
+
+    expect(layout.chrome.title?.text).toBe('Test Table');
+    expect(layout.chrome.subtitle?.text).toBe('A test');
+  });
+
+  it('produces valid a11y metadata', () => {
+    const spec = {
+      ...baseSpec,
+      chrome: { title: 'Student Scores' },
+    };
+    const layout = compileTable(spec, baseOptions);
+
+    expect(layout.a11y.caption).toBe('Table: Student Scores');
+    expect(layout.a11y.summary).toContain('3 columns');
+    expect(layout.a11y.summary).toContain('4 rows');
+  });
+
+  it('handles empty data gracefully', () => {
+    // Validation catches empty data, so we test with a minimal valid dataset
+    const spec = {
+      type: 'table' as const,
+      data: [{ x: 1 }],
+      columns: [{ key: 'x' }],
+    };
+    const layout = compileTable(spec, baseOptions);
+    expect(layout.rows).toHaveLength(1);
+  });
+
+  it('preserves original data in row.data', () => {
+    const layout = compileTable(baseSpec, baseOptions);
+
+    expect(layout.rows[0].data).toBe(sampleData[0]);
+    expect(layout.rows[0].data.name).toBe('Alice');
+  });
+
+  it('throws for non-table spec', () => {
+    expect(() =>
+      compileTable(
+        {
+          type: 'line',
+          data: [
+            { date: '2020-01-01', y: 2 },
+            { date: '2021-01-01', y: 4 },
+          ],
+          encoding: {
+            x: { field: 'date', type: 'temporal' },
+            y: { field: 'y', type: 'quantitative' },
+          },
+        },
+        baseOptions,
+      ),
+    ).toThrow('Use compileChart instead');
+  });
+
+  it('determines column cellType from visual features', () => {
+    const spec = {
+      type: 'table' as const,
+      data: [
+        {
+          val: 10,
+          cat: 'A',
+          trend: [1, 2, 3],
+          bar: 50,
+          img: 'http://example.com/a.png',
+          flag: 'US',
+        },
+      ],
+      columns: [
+        { key: 'val', heatmap: { palette: 'blue' } },
+        { key: 'cat', categoryColors: { A: '#ff0000' } },
+        { key: 'trend', sparkline: { type: 'line' as const } },
+        { key: 'bar', bar: {} },
+        { key: 'img', image: {} },
+        { key: 'flag', flag: true },
+      ],
+    };
+    const layout = compileTable(spec, baseOptions);
+
+    expect(layout.columns[0].cellType).toBe('heatmap');
+    expect(layout.columns[1].cellType).toBe('category');
+    expect(layout.columns[2].cellType).toBe('sparkline');
+    expect(layout.columns[3].cellType).toBe('bar');
+    expect(layout.columns[4].cellType).toBe('image');
+    expect(layout.columns[5].cellType).toBe('flag');
+  });
+
+  it('applies dark mode theme', () => {
+    const layout = compileTable(baseSpec, { ...baseOptions, darkMode: true });
+    expect(layout.theme.isDark).toBe(true);
+  });
+});