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

package/src/schema/__tests__/schema.test.ts

@@ -1,179 +0,0 @@
-/**
- * Behavior tests for the published JSON Schema files.
- *
- * These validate the SHIPPED artifacts (`packages/core/schema/*.json`) against
- * ajv, the same draft-07 validator an LLM tool-use harness would use. They
- * prove three properties the plan requires:
- *
- *   1. Every one of the 16 mark types has a minimal valid spec the schema
- *      accepts (guards against a future mark being added to the types but not
- *      reflected in the generated schema).
- *   2. Hallucinated fields (unknown top-level keys, unknown marks, unknown
- *      encoding channels) are rejected — the mechanic that kills empty-chart
- *      generation failures.
- *   3. Representative realistic specs across chart and table validate.
- *
- * The per-mark specs are built from `MARK_ENCODING_RULES`, the same source the
- * engine validates against, so the coverage tracks the real required-channel
- * matrix rather than a hand-maintained copy.
- */
-
-import { readFileSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import Ajv, { type ValidateFunction } from 'ajv';
-import { describe, expect, it } from 'vitest';
-import { MARK_ENCODING_RULES } from '../../types/encoding';
-import { MARK_TYPES } from '../../types/spec';
-
-const schemaDir = join(dirname(fileURLToPath(import.meta.url)), '..', '..', '..', 'schema');
-
-function loadValidator(filename: string): ValidateFunction {
-  const schema = JSON.parse(readFileSync(join(schemaDir, filename), 'utf8'));
-  // strict:false — the generated schema uses draft-07 with union types that
-  // ajv's strict mode flags; allowUnionTypes matches the tool-use posture.
-  const ajv = new Ajv({ strict: false, allowUnionTypes: true });
-  return ajv.compile(schema);
-}
-
-const validateChart = loadValidator('chart.schema.json');
-const validateViz = loadValidator('vizspec.schema.json');
-const validateTable = loadValidator('table.schema.json');
-
-/** A data row carrying one column of each field type. */
-const sampleData = [
-  { cat: 'A', amount: 10, when: '2020-01-01' },
-  { cat: 'B', amount: 20, when: '2021-01-01' },
-];
-
-/** Pick a field of an allowed type for a required channel. */
-function fieldForTypes(allowedTypes: string[]): { field: string; type: string } {
-  if (allowedTypes.includes('temporal')) return { field: 'when', type: 'temporal' };
-  if (allowedTypes.includes('quantitative')) return { field: 'amount', type: 'quantitative' };
-  if (allowedTypes.includes('nominal')) return { field: 'cat', type: 'nominal' };
-  if (allowedTypes.includes('ordinal')) return { field: 'cat', type: 'ordinal' };
-  return { field: 'cat', type: 'nominal' };
-}
-
-/**
- * Build a minimal spec the schema should accept for a given mark, from its
- * required channels in MARK_ENCODING_RULES.
- */
-function minimalSpecForMark(mark: string): Record<string, unknown> {
-  const rules = MARK_ENCODING_RULES[mark as keyof typeof MARK_ENCODING_RULES] ?? {};
-  const encoding: Record<string, unknown> = {};
-  for (const [channel, rule] of Object.entries(rules)) {
-    if (rule?.required) {
-      const types = rule.allowedTypes.length ? rule.allowedTypes : ['quantitative'];
-      encoding[channel] = fieldForTypes(types);
-    }
-  }
-  // Ensure at least one positional channel so the spec is meaningful.
-  if (encoding.x === undefined && encoding.y === undefined) {
-    const yTypes = rules.y?.allowedTypes?.length ? rules.y.allowedTypes : ['quantitative'];
-    encoding.y = fieldForTypes(yTypes);
-  }
-  return { mark, data: sampleData, encoding };
-}
-
-describe('chart.schema.json', () => {
-  it('has a schema definition for exactly the 16 declared mark types', () => {
-    // Every MARK_TYPES entry must produce a spec the schema accepts.
-    for (const mark of MARK_TYPES) {
-      const spec = minimalSpecForMark(mark);
-      const valid = validateChart(spec);
-      expect(valid, `mark "${mark}" should validate: ${JSON.stringify(validateChart.errors)}`).toBe(
-        true,
-      );
-    }
-  });
-
-  it('rejects an unknown mark type', () => {
-    const spec = {
-      mark: 'notarealmark',
-      data: sampleData,
-      encoding: { y: fieldForTypes(['quantitative']) },
-    };
-    expect(validateChart(spec)).toBe(false);
-  });
-
-  it('rejects a hallucinated top-level field', () => {
-    const spec = {
-      mark: 'bar',
-      data: sampleData,
-      encoding: { y: { field: 'amount', type: 'quantitative' } },
-      totallyMadeUpField: 42,
-    };
-    expect(validateChart(spec)).toBe(false);
-  });
-
-  it('rejects a hallucinated encoding channel', () => {
-    const spec = {
-      mark: 'bar',
-      data: sampleData,
-      encoding: { notAChannel: { field: 'amount', type: 'quantitative' } },
-    };
-    expect(validateChart(spec)).toBe(false);
-  });
-
-  it('accepts a realistic bar chart with chrome and a color legend', () => {
-    const spec = {
-      mark: 'bar',
-      data: [
-        { language: 'Python', popularity: 29 },
-        { language: 'JavaScript', popularity: 24 },
-      ],
-      encoding: {
-        x: { field: 'popularity', type: 'quantitative' },
-        y: { field: 'language', type: 'nominal' },
-        color: { field: 'popularity', type: 'quantitative' },
-      },
-      chrome: { title: 'Python leads', source: 'Source: survey' },
-    };
-    expect(validateChart(spec), JSON.stringify(validateChart.errors)).toBe(true);
-  });
-});
-
-describe('vizspec.schema.json', () => {
-  it('accepts a chart spec (mark-discriminated union member)', () => {
-    expect(validateViz(minimalSpecForMark('line'))).toBe(true);
-  });
-
-  it('accepts a table spec (type-discriminated union member)', () => {
-    const spec = {
-      type: 'table',
-      data: sampleData,
-      columns: [{ key: 'cat' }, { key: 'amount' }],
-    };
-    expect(validateViz(spec), JSON.stringify(validateViz.errors)).toBe(true);
-  });
-
-  it('rejects a spec that is neither a chart nor any known type', () => {
-    expect(validateViz({ nonsense: true })).toBe(false);
-  });
-});
-
-describe('table.schema.json', () => {
-  it('accepts a table with formatted columns', () => {
-    const spec = {
-      type: 'table',
-      data: sampleData,
-      columns: [
-        { key: 'cat', label: 'Category' },
-        { key: 'amount', format: '.0f', align: 'right' },
-      ],
-      search: true,
-    };
-    expect(validateTable(spec), JSON.stringify(validateTable.errors)).toBe(true);
-  });
-
-  it('rejects a hallucinated top-level field on a table', () => {
-    const spec = {
-      type: 'table',
-      data: sampleData,
-      columns: [{ key: 'cat' }],
-      madeUp: true,
-    };
-    expect(validateTable(spec)).toBe(false);
-  });
-});

package/src/styles/__tests__/reduced-motion-selectors.test.ts

@@ -1,28 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { resolve } from 'node:path';
-import { describe, expect, it } from 'vitest';
-import { CSS_TOKEN_ROOT_SELECTORS } from '../token-definitions';
-
-describe('reduced-motion.css', () => {
-  it('uses the same root selectors as CSS_TOKEN_ROOT_SELECTORS', () => {
-    const css = readFileSync(resolve(__dirname, '../reduced-motion.css'), 'utf8');
-    const selectors = CSS_TOKEN_ROOT_SELECTORS.every((sel) => css.includes(sel));
-    expect(selectors).toBe(true);
-
-    const isBlocks = [...css.matchAll(/:is\(\s*([\s\S]*?)\s*\)/g)];
-    const selectorsInCss = new Set(
-      isBlocks.flatMap((m) =>
-        m[1]
-          .split(',')
-          .map((s) => s.trim())
-          .filter(Boolean),
-      ),
-    );
-    for (const sel of CSS_TOKEN_ROOT_SELECTORS) {
-      expect(selectorsInCss.has(sel)).toBe(true);
-    }
-    for (const sel of selectorsInCss) {
-      expect(CSS_TOKEN_ROOT_SELECTORS).toContain(sel);
-    }
-  });
-});

package/src/styles/animation.css

@@ -1,213 +0,0 @@
-@layer oc.animation {
-  /* ---------------------------------------------------------------------------
-   * Animation scoped rules (.oc-animate enables animation on the chart root)
-   * --------------------------------------------------------------------------- */
-
-  .oc-animate {
-    /* Vertical bars (default): smooth ease-out, no overshoot.
-       oc-mark-bar is reserved for future mark type aliases. */
-    & .oc-mark-rect rect,
-    & .oc-mark-bar rect {
-      animation: oc-enter-bar var(--oc-animation-duration) var(--oc-ease-smooth) both;
-      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-    }
-
-    /* Horizontal bars (data-orient is on the mark group, not the SVG root) */
-    & .oc-mark-rect[data-orient="horizontal"] rect,
-    & .oc-mark-bar[data-orient="horizontal"] rect {
-      animation-name: oc-enter-bar-h;
-    }
-
-    /* Stacked bar/column segments: chain sequentially so each segment starts
-       right when the previous one finishes, creating one fluid reveal.
-       Uses linear easing so handoffs between segments are seamless (no
-       deceleration/acceleration stutter at segment boundaries). */
-    & .oc-mark-rect[data-stack-pos] rect {
-      animation-duration: var(--oc-stack-segment-duration, 150ms);
-      animation-timing-function: linear;
-      animation-delay: calc(
-        var(--oc-animation-stagger) *
-        var(--oc-mark-index, 0) +
-        var(--oc-stack-pos, 0) *
-        var(--oc-stack-segment-duration, 150ms)
-      );
-    }
-
-    /* Line marks: entire group clips left-to-right (no WAAPI needed) */
-    & .oc-mark-line {
-      animation: oc-enter-line var(--oc-animation-duration)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-    }
-
-    /* Area marks: entire group clips left-to-right + fades in */
-    & .oc-mark-area {
-      animation: oc-enter-line var(--oc-animation-duration)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-    }
-
-    /* Arc marks (pie/donut slices): simple fade in.
-       Scale transforms break arc positioning because arcs use translate()
-       on parent groups. A clean fade is more elegant for pie/donut anyway. */
-    & .oc-mark-arc {
-      animation: oc-enter-fade-only var(--oc-animation-duration)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-    }
-
-    /* Point marks (scatter, dot).
-       Points render as bare <circle> elements with class oc-mark-point directly,
-       not wrapped in a group, so we target circle.oc-mark-point (not descendant).
-       Duration is 40% of the configured duration (quick pop-in relative to other marks). */
-    & circle.oc-mark-point,
-    & circle.oc-mark-circle {
-      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.4)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-    }
-
-    /* Points on line/area charts: delay so they pop in as the line draws through. */
-    & .oc-mark-line ~ circle.oc-mark-point,
-    & .oc-mark-area ~ circle.oc-mark-point {
-      animation-delay: calc(
-        var(--oc-animation-duration) *
-        0.35 +
-        var(--oc-animation-stagger) *
-        var(--oc-mark-index, 0)
-      );
-    }
-
-    /* Text marks: fade + slight slide up */
-    & .oc-mark-text text {
-      animation: oc-enter-fade calc(var(--oc-animation-duration) * 0.6)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-    }
-
-    /* Rule marks: fade in */
-    & .oc-mark-rule line {
-      animation: oc-enter-fade calc(var(--oc-animation-duration) * 0.5)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-    }
-
-    /* Tick marks: fade in */
-    & .oc-mark-tick line {
-      animation: oc-enter-fade calc(var(--oc-animation-duration) * 0.5)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-    }
-
-    /* Data labels: fade after their parent mark */
-    & .oc-mark-label {
-      animation: oc-enter-fade 300ms var(--oc-ease-smooth) both;
-      animation-delay: calc(
-        var(--oc-animation-stagger) *
-        var(--oc-mark-index, 0) +
-        var(--oc-animation-duration) *
-        0.7
-      );
-    }
-
-    /* Annotations: fade in after marks finish */
-    & .oc-annotation {
-      animation: oc-enter-fade 400ms var(--oc-ease-smooth) both;
-      animation-delay: calc(var(--oc-animation-duration) + var(--oc-annotation-delay, 200ms));
-    }
-
-    /* Tilemap tiles: fade in with jittered stagger for organic feel.
-       Per-tile delay is computed in the renderer with pseudo-random variation. */
-    & .oc-tilemap-tile {
-      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.35) ease-in both;
-      animation-delay: var(--oc-tile-delay, 0ms);
-    }
-
-    /* Map features: fill color reveal with shuffled stagger.
-       Per-feature --oc-map-delay is computed in the renderer via a seeded
-       Fisher-Yates shuffle so features pop in organically. */
-    & .oc-map-feature {
-      animation: oc-enter-map-fill var(--oc-animation-duration)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: var(--oc-map-delay, 0ms);
-    }
-
-    /* Bulk mode: high feature counts (counties, ~3k+) get a single group
-       fade instead of per-feature fill animations. opacity is GPU-compositable
-       so this stays smooth regardless of child count. */
-    & .oc-map-features[data-bulk-animate] {
-      animation: oc-enter-fade-only var(--oc-animation-duration)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-    }
-
-    & .oc-map-features[data-bulk-animate] .oc-map-feature {
-      animation: none;
-    }
-
-    /* Map borders: fade in near the end of the feature sweep */
-    & .oc-map-borders path {
-      animation: oc-enter-fade-only calc(var(--oc-animation-duration) * 0.4) ease-in both;
-      animation-delay: calc(var(--oc-animation-duration) * 0.7);
-    }
-
-    /* Map points: gentle scale (0.75->1) + fade pop-in after borders.
-       transform-origin set per-circle in the renderer so scale happens
-       around each circle's own center, not the SVG origin. */
-    & .oc-map-point {
-      animation: oc-enter-map-point calc(var(--oc-animation-duration) * 0.4)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(
-        var(--oc-animation-duration) *
-        0.8 +
-        var(--oc-mark-index, 0) *
-        var(--oc-point-stagger, 60ms)
-      );
-    }
-
-    /* Sankey nodes: fade in with stagger by column depth (left-to-right) */
-    & .oc-sankey-node rect {
-      animation: oc-enter-fade-only var(--oc-animation-duration)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(var(--oc-animation-stagger) * var(--oc-mark-index, 0));
-    }
-
-    /* Sankey links: fade in after nodes, with stagger.
-       Links delay by 30% of duration so nodes appear first, then links flow in. */
-    & .oc-sankey-link path {
-      animation: oc-enter-fade-only var(--oc-animation-duration)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: calc(
-        var(--oc-animation-duration) *
-        0.3 +
-        var(--oc-animation-stagger) *
-        var(--oc-mark-index, 0)
-      );
-    }
-
-    /* Barlist rows: fade + slide up per row, bars grow left-to-right */
-    & .oc-barlist-row {
-      animation: oc-enter-fade calc(var(--oc-animation-duration) * 0.6)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: var(--oc-row-delay, 0ms);
-    }
-
-    & .oc-barlist-bar {
-      animation: oc-enter-bar-h var(--oc-animation-duration)
-        var(--oc-animation-ease, var(--oc-ease-smooth)) both;
-      animation-delay: var(--oc-row-delay, 0ms);
-    }
-  }
-
-  /* ---------------------------------------------------------------------------
-   * Sparkline mode: pair the line/area reveal with a stronger ease-out so it
-   * doesn't read as a uniform left-to-right swipe. cubic-bezier(0.16, 1, 0.3, 1)
-   * is "expo-out" — fast initial draw that decelerates noticeably at the end,
-   * giving the trend a hand-drawn feel. Duration is bumped via the engine
-   * (compile.ts) so the cleanup timer stays in sync.
-   * --------------------------------------------------------------------------- */
-
-  .oc-animate[data-display="sparkline"] .oc-mark-line,
-  .oc-animate[data-display="sparkline"] .oc-mark-area {
-    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  }
-}

package/src/styles/base.css

@@ -1,102 +0,0 @@
-@layer oc.base {
-  /* ---------------------------------------------------------------------------
-   * Wrapper roots
-   * --------------------------------------------------------------------------- */
-
-  .oc-chart-root {
-    width: 100%;
-    height: 100%;
-  }
-
-  .oc-table-root,
-  .oc-graph-root,
-  .oc-sankey-root,
-  .oc-barlist-root,
-  .oc-tilemap-root,
-  .oc-map-root {
-    width: 100%;
-    height: 100%;
-  }
-
-  .oc-table-root {
-    overflow: auto;
-  }
-
-  /* ---------------------------------------------------------------------------
-   * Chart container
-   * --------------------------------------------------------------------------- */
-
-  .oc-chart {
-    font-family: var(--oc-font-family);
-    display: block;
-    width: 100%;
-  }
-
-  /* ---------------------------------------------------------------------------
-   * BarList SVG container
-   * --------------------------------------------------------------------------- */
-
-  .oc-tilemap,
-  .oc-map {
-    display: block;
-    width: 100%;
-    height: auto;
-  }
-
-  .oc-map-feature {
-    transition: opacity 400ms ease;
-  }
-
-  .oc-barlist {
-    display: block;
-    width: 100%;
-  }
-
-  /* ---------------------------------------------------------------------------
-   * Screen reader only utility
-   * --------------------------------------------------------------------------- */
-
-  .oc-sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border-width: 0;
-  }
-
-  /* ---------------------------------------------------------------------------
-   * Editable hover feedback
-   * --------------------------------------------------------------------------- */
-
-  .oc-editable-hover {
-    outline: 1.5px solid var(--oc-editable-hover);
-    outline-offset: 2px;
-    border-radius: 2px;
-  }
-
-  /* ---------------------------------------------------------------------------
-   * Keyboard focus indicators
-   *
-   * --oc-focus carries a light value in tokens.css and a dark value in
-   * dark.css, so both rings stay visible in either mode.
-   * --------------------------------------------------------------------------- */
-
-  /* Container ring when the chart itself receives keyboard focus. */
-  .oc-root:focus-visible {
-    outline: 2px solid var(--oc-focus);
-    outline-offset: 2px;
-  }
-
-  /* Mark ring during arrow-key navigation (see wireKeyboardNav). Outline on
-   * SVG elements draws around the mark's bounding box, same technique as
-   * .oc-editable-hover above. */
-  .oc-mark-focused {
-    outline: 2px solid var(--oc-focus);
-    outline-offset: 1px;
-    border-radius: 2px;
-  }
-}

package/src/styles/chrome.css

@@ -1,174 +0,0 @@
-@layer oc.components {
-  /* ---------------------------------------------------------------------------
-   * Chrome (eyebrow, title, subtitle, source, byline, footer, brand)
-   * --------------------------------------------------------------------------- */
-
-  .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);
-  }
-
-  /* ---------------------------------------------------------------------------
-   * Metric bar (.oc-metrics) — optional row of label/value cells above chart
-   * --------------------------------------------------------------------------- */
-
-  .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-metric-secondary {
-    fill: var(--oc-positive);
-    font-size: 12px;
-    font-weight: 400;
-  }
-
-  /* ---------------------------------------------------------------------------
-   * Axis tick labels — inline variant sits above each gridline at the
-   * chart-area left edge (no left gutter). Used by line/area y-axes.
-   * --------------------------------------------------------------------------- */
-
-  .oc-axis-tick-inline {
-    font-size: 11px;
-    font-weight: 400;
-    fill: var(--oc-text-muted);
-  }
-
-  /* ---------------------------------------------------------------------------
-   * Endpoint labels (right-side per-series column for line/area charts)
-   *
-   * Swatch idiom: a thicker colored stroke segment with an optional thinner
-   * lighter strip below. Mirrors the refreshed traditional legend swatch so a
-   * single chart never shows two swatch idioms (mock-2 alignment). Per-series
-   * color is stamped inline by the renderer; CSS tokens here cover the muted
-   * value text and the leader line so theme overrides flow through naturally.
-   * --------------------------------------------------------------------------- */
-
-  .oc-endpoint-labels {
-    font-family: var(--oc-font-family);
-  }
-
-  .oc-endpoint-label {
-    /* Color set inline per series; this fallback only kicks in if the renderer
-       ever omits the inline fill. */
-    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-endpoint-marker — fill/stroke set inline (open-ring style: bg fill, series stroke). */
-  /* .oc-endpoint-swatch — color set inline per series. */
-
-  /* ---------------------------------------------------------------------------
-   * Annotation dot + subtitle (text-annotation extensions)
-   * --------------------------------------------------------------------------- */
-
-  /* .oc-annotation-dot — fill/stroke resolved by the engine (open-ring default = bg fill, series stroke). */
-
-  .oc-annotation-subtitle {
-    fill: var(--oc-annotation-subtitle-color, var(--oc-text-muted));
-  }
-
-  /* ---------------------------------------------------------------------------
-   * Table footer chrome
-   * --------------------------------------------------------------------------- */
-
-  /* Footer row: source/footer text on the left, brand watermark on the right,
-   * sharing a single baseline. gap keeps them apart if the row gets narrow. */
-  .oc-table-footer-row {
-    display: flex;
-    align-items: baseline;
-    gap: 16px;
-    padding: 16px 16px 4px;
-  }
-
-  /* Chrome block sits inside the flex row now, so it no longer owns the
-   * footer's top padding or horizontal inset (the row provides both). */
-  .oc-chrome-footer {
-    padding-top: 0;
-  }
-
-  /* Brand watermark: pushed to the right edge (margin-left:auto holds it there
-   * even when the source text is absent), never shrinks below its own text. */
-  .oc-table-footer-row .oc-table-ref {
-    margin-left: auto;
-    flex-shrink: 0;
-    text-align: right;
-  }
-}