@opendata-ai/openchart-core 7.11.0 → 8.0.0-rc.10

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

@@ -0,0 +1,179 @@
+/**
+ * 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

@@ -0,0 +1,28 @@
+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,170 +1,213 @@
-/* ---------------------------------------------------------------------------
- * 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));
+@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);
   }
-
-  /* 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);
-  }
-
-  /* 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);
 }