@yewdiel21/motion-kit 0.14.0 → 0.16.0

package/src/components/chart/engine.ts

@@ -18,7 +18,7 @@ import { inert, warnOnce, type Instance } from '../../core/types';
  * table carries every value for screen readers. Resizes with its container.
  */
 
-export type ChartType = 'line' | 'area' | 'bar';
+export type ChartType = 'line' | 'area' | 'bar' | 'composed';
 
 export interface ChartPoint {
   label: string;
@@ -29,6 +29,10 @@ export interface ChartSeries {
   name: string;
   /** One value per label; null is a gap (no data). */
   values: Array<number | null>;
+  /** Per-series mark in a composed chart (default line). */
+  type?: 'line' | 'area' | 'bar';
+  /** An area's lower boundary; values is the upper boundary. Nulls leave gaps. */
+  lowerValues?: Array<number | null>;
   /** Any CSS colour; default: monochrome for one series, else the --mk-chart-N slot. */
   color?: string;
   /** Lines: an SVG dash pattern, e.g. '5 5' (a pace or goal) or '1 6' (a projection). */
@@ -43,6 +47,16 @@ export interface ChartOptions {
   points?: ChartPoint[];
   /** Bars only: stack the series. */
   stacked?: boolean;
+  /** Rounded ends (default) or a full capsule, including stacked columns. */
+  barStyle?: 'rounded' | 'pill';
+  /** Show the available capacity behind each column. */
+  barTrack?: boolean;
+  /** Solid (default), gradient, or a gradient selection over muted striped columns. */
+  barFill?: 'solid' | 'gradient' | 'spotlight';
+  /** Maximum column width in px (default 24; pill demos use 40). */
+  barWidth?: number;
+  /** Smooth monotone curves preserve the data's extrema (default linear). */
+  curve?: 'linear' | 'smooth';
   formatValue?: (value: number) => string;
   /** Accessible name (and table caption). */
   label?: string;
@@ -98,6 +112,25 @@ function barPath(x: number, width: number, base: number, end: number, rounded: b
   return `M${round(x)},${round(base)}V${round(end + dir * r)}Q${round(x)},${round(end)} ${round(x + r)},${round(end)}H${round(x + width - r)}Q${round(x + width)},${round(end)} ${round(x + width)},${round(end + dir * r)}V${round(base)}Z`;
 }
 
+function pillPath(x: number, width: number, a: number, b: number) {
+  const top = Math.min(a, b), bottom = Math.max(a, b);
+  const r = Math.min(width / 2, (bottom - top) / 2);
+  return `M${round(x + r)},${round(top)}H${round(x + width - r)}Q${round(x + width)},${round(top)} ${round(x + width)},${round(top + r)}V${round(bottom - r)}Q${round(x + width)},${round(bottom)} ${round(x + width - r)},${round(bottom)}H${round(x + r)}Q${round(x)},${round(bottom)} ${round(x)},${round(bottom - r)}V${round(top + r)}Q${round(x)},${round(top)} ${round(x + r)},${round(top)}Z`;
+}
+
+/** Cubic Hermite interpolation with bounded tangents: no invented peaks between samples. */
+function linePath(points: number[][], smooth: boolean) {
+  if (!points.length) return '';
+  let path = `M${round(points[0][0])},${round(points[0][1])}`;
+  const slopes = points.slice(1).map((point, i) => (point[1] - points[i][1]) / (point[0] - points[i][0] || 1));
+  const tangents = points.map((_, i) => i === 0 ? slopes[0] : i === points.length - 1 ? slopes[i - 1] : slopes[i - 1] * slopes[i] <= 0 ? 0 : 2 * slopes[i - 1] * slopes[i] / (slopes[i - 1] + slopes[i]));
+  for (let i = 1; i < points.length; i++) {
+    const [x0, y0] = points[i - 1], [x, y] = points[i], dx = (x - x0) / 3;
+    path += smooth ? `C${round(x0 + dx)},${round(y0 + tangents[i - 1] * dx)} ${round(x - dx)},${round(y - tangents[i] * dx)} ${round(x)},${round(y)}` : `L${round(x)},${round(y)}`;
+  }
+  return path;
+}
+
 interface Model {
   labels: string[];
   series: Array<ChartSeries & { color: string }>;
@@ -116,6 +149,8 @@ function modelOf(options: ChartOptions): Model {
     values: Array.from({ length: count }, (_, j) => (finite(series.values[j]) ? series.values[j]! : null)),
     color: series.color ?? (mono ? 'var(--mk-chart-mono)' : i < SLOTS ? `var(--mk-chart-${i + 1})` : 'var(--mk-chart-other)'),
     dash: series.dash,
+    type: series.type,
+    lowerValues: series.lowerValues ? Array.from({ length: count }, (_, j) => finite(series.lowerValues![j]) ? series.lowerValues![j]! : null) : undefined,
   }));
   return { labels: fullLabels, series };
 }
@@ -171,7 +206,7 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
   let cursor: SVGGElement | null = null;
   let band: SVGRectElement | null = null;
   /** What is drawn now: values and domain (they trail the model while gliding). */
-  let shown: { values: Values; lo: number; hi: number; type: ChartType; stacked: boolean } | null = null;
+  let shown: { values: Values; lower: Values; lo: number; hi: number; type: ChartType; stacked: boolean } | null = null;
   let glide: gsap.core.Tween | null = null;
   const effects = new Set<gsap.core.Animation>();
   const keep = (animation: gsap.core.Animation) => {
@@ -190,7 +225,9 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     if (options.formatValue) return options.formatValue(value);
     return new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(value);
   };
-  const type = (): ChartType => (options.type === 'bar' || options.type === 'area' ? options.type : 'line');
+  const type = (): ChartType => (options.type === 'bar' || options.type === 'area' || options.type === 'composed' ? options.type : 'line');
+  const seriesType = (index: number) => type() === 'composed' ? model.series[index]!.type ?? 'line' : type();
+  const hasBars = () => model.series.some((_, index) => seriesType(index) === 'bar');
   const stacked = () => type() === 'bar' && Boolean(options.stacked) && model.series.length > 1;
   const hasData = () => model.labels.length > 0 && model.series.some((series) => series.values.some(finite));
 
@@ -206,6 +243,13 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     return { up, down };
   };
   const targetValues = (): Values => model.series.map((series) => series.values);
+  const lowerValues = (): Values => model.series.map((series) => series.lowerValues ?? []);
+  const rangeText = (series: Model['series'][number], index: number) => {
+    const value = series.values[index];
+    const lower = series.lowerValues?.[index];
+    if (!finite(value)) return '—';
+    return finite(lower) ? `${format(lower)} – ${format(value)}` : format(value);
+  };
   const totals = (index: number) => totalsOf(targetValues(), index);
 
   const domainOf = (values: Values) => {
@@ -224,6 +268,9 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
           lo = Math.min(lo, value);
         }
       }
+      for (const list of lowerValues()) {
+        if (finite(list[i])) { lo = Math.min(lo, list[i]!); hi = Math.max(hi, list[i]!); }
+      }
     });
     if (hi === lo) hi = lo + 1;
     const step = niceStep((hi - lo) / 4);
@@ -272,7 +319,7 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
       for (const series of model.series) {
         const td = document.createElement('td');
         const value = series.values[i];
-        td.textContent = finite(value) ? format(value) : '—';
+        td.textContent = rangeText(series, i);
         row.append(td);
       }
       if (stacked()) {
@@ -291,11 +338,11 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     const show = options.legend ?? model.series.length > 1;
     legend.hidden = !show || !hasData();
     if (legend.hidden) return;
-    for (const series of model.series) {
+    for (const [index, series] of model.series.entries()) {
       const item = document.createElement('li');
       const swatch = document.createElement('span');
       swatch.dataset.mkChartSwatch = '';
-      swatch.dataset.mkType = type();
+      swatch.dataset.mkType = seriesType(index);
       swatch.style.background = series.color;
       swatch.style.color = series.color;
       if (series.dash) swatch.dataset.mkDash = '';
@@ -314,19 +361,19 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
   };
 
   /** Draw `values` on the domain lo…hi (called every frame while gliding). */
-  const paint = (values: Values, lo: number, hi: number, step: number) => {
+  const paint = (values: Values, lo: number, hi: number, step: number, lower: Values = lowerValues()) => {
     canvas.replaceChildren();
     const width = Math.max(120, Math.round(plot.clientWidth || root.clientWidth || 600));
     const height = Math.max(80, Math.round(finite(options.height) ? options.height : 240));
     canvas.setAttribute('viewBox', `0 0 ${width} ${height}`);
     canvas.setAttribute('width', String(width));
     canvas.setAttribute('height', String(height));
-    const bar = type() === 'bar';
+    const bar = hasBars();
     const axis = Boolean(options.axis);
     const ticks: number[] = [];
     for (let t = lo; t <= hi + step / 2; t += step) ticks.push(Number(t.toPrecision(12)));
     const tickText = ticks.map(format);
-    const withEnd = !bar && options.endLabel !== false && lastPoint(values[0]) >= 0;
+    const withEnd = seriesType(0) !== 'bar' && options.endLabel !== false && lastPoint(values[0]) >= 0;
     const left = axis ? Math.min(96, Math.max(28, Math.max(...tickText.map((text) => text.length)) * 7 + 12)) : 4;
     const top = 16;
     const right = withEnd ? Math.min(120, Math.max(48, format(values[0]![lastPoint(values[0])]!).length * 7.5 + 28)) : 8;
@@ -339,6 +386,7 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     const slot = plotW / n;
     const xs = model.labels.map((_, i) => (bar ? left + slot * (i + 0.5) : n === 1 ? left + plotW / 2 : left + (plotW * i) / (n - 1)));
     geometry = { width, height, top, bottom: top + plotH, left, right: width - right, xs, y, base };
+    shown = { values, lower, lo, hi, type: type(), stacked: stacked() };
 
     // Baseline (and, with `axis`, hairlines with their values).
     const grid = svg('g', { 'data-mk-part': 'grid' });
@@ -381,11 +429,48 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     const marks = svg('g', { 'data-mk-part': 'series' });
     const defs = svg('defs');
     if (bar) {
-      const groups = stacked() ? 1 : model.series.length;
-      const barWidth = Math.max(2, Math.min(BAR_MAX, (slot * 0.62 - GAP * (groups - 1)) / groups));
+      const barIndices = model.series.flatMap((_, index) => seriesType(index) === 'bar' ? [index] : []);
+      const groups = stacked() ? 1 : barIndices.length;
+      const maxWidth = finite(options.barWidth) ? Math.max(2, Math.min(96, options.barWidth)) : BAR_MAX;
+      const barWidth = Math.max(2, Math.min(maxWidth, (slot * 0.62 - GAP * (groups - 1)) / groups));
+      const pill = options.barStyle === 'pill';
+      const trackLayer = svg('g', { 'data-mk-part': 'bar-tracks' });
+      canvas.append(trackLayer);
+      if (options.barFill && options.barFill !== 'solid') {
+        model.series.forEach((series, k) => {
+          const gradient = svg('linearGradient', { id: `${uid}-bar-${k}`, x1: 0, y1: 0, x2: 0, y2: 1 });
+          for (const [offset, opacity] of [['0', '1'], ['1', '0.4']]) {
+            const stop = svg('stop', { offset }); stop.style.stopColor = series.color; stop.style.stopOpacity = opacity; gradient.append(stop);
+          }
+          defs.append(gradient);
+        });
+        const hatch = svg('pattern', { id: `${uid}-hatch`, patternUnits: 'userSpaceOnUse', width: 6, height: 6, patternTransform: 'rotate(35)' });
+        const ground = svg('rect', { width: 6, height: 6 }); ground.style.fill = 'var(--mk-chart-track)';
+        const stripe = svg('line', { x1: 0, x2: 0, y1: 0, y2: 6 }); stripe.style.stroke = 'var(--mk-chart-grid)'; stripe.style.strokeWidth = '2';
+        hatch.append(ground, stripe); defs.append(hatch);
+      }
+      const fillBar = (path: SVGPathElement, k: number, index: number) => {
+        const fill = options.barFill && options.barFill !== 'solid' ? `url(#${uid}-bar-${k})` : model.series[k]!.color;
+        path.style.setProperty('--mk-bar-fill', fill);
+        path.style.fill = options.barFill === 'spotlight' && index !== (selected ?? n - 1) ? `url(#${uid}-hatch)` : fill;
+      };
+      const addTrack = (x: number) => {
+        if (!options.barTrack) return;
+        const path = svg('path', { d: pillPath(x, barWidth, top, base), 'data-mk-part': 'bar-track' });
+        trackLayer.append(path);
+      };
       const totalsLayer = svg('g', { 'data-mk-part': 'totals' });
       model.labels.forEach((_, i) => {
         if (stacked()) {
+          const clipId = `${uid}-stack-${i}`;
+          if (pill) {
+            const sum = totalsOf(values, i);
+            const clip = svg('clipPath', { id: clipId });
+            if (sum.up) clip.append(svg('path', { d: pillPath(xs[i]! - barWidth / 2, barWidth, base, y(sum.up)) }));
+            if (sum.down) clip.append(svg('path', { d: pillPath(xs[i]! - barWidth / 2, barWidth, base, y(sum.down)) }));
+            defs.append(clip);
+          }
+          addTrack(xs[i]! - barWidth / 2);
           let up = 0;
           let down = 0;
           const outer = { up: -1, down: -1 };
@@ -405,8 +490,9 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
             const start = y(from) + (from !== 0 ? (value > 0 ? -GAP : GAP) : 0);
             const end = y(to);
             if ((value > 0 && end >= start) || (value < 0 && end <= start)) return;
-            const path = svg('path', { d: barPath(xs[i]! - barWidth / 2, barWidth, start, end, k === (value > 0 ? outer.up : outer.down)), 'data-mk-index': i, 'data-mk-series': k });
-            path.style.fill = model.series[k]!.color;
+            const path = svg('path', { d: barPath(xs[i]! - barWidth / 2, barWidth, start, end, !pill && k === (value > 0 ? outer.up : outer.down)), 'data-mk-part': 'bar', 'data-mk-index': i, 'data-mk-series': k });
+            if (pill) path.setAttribute('clip-path', `url(#${clipId})`);
+            fillBar(path, k, i);
             marks.append(path);
           });
           // The stack total above it, when the columns have room.
@@ -419,30 +505,35 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
         } else {
           const groupWidth = groups * barWidth + GAP * (groups - 1);
           values.forEach((list, k) => {
+            if (seriesType(k) !== 'bar') return;
             const value = list[i];
+            const x = xs[i]! - groupWidth / 2 + barIndices.indexOf(k) * (barWidth + GAP);
+            addTrack(x);
             if (!finite(value) || value === 0) return;
-            const x = xs[i]! - groupWidth / 2 + k * (barWidth + GAP);
-            const path = svg('path', { d: barPath(x, barWidth, base, y(value), true), 'data-mk-index': i, 'data-mk-series': k });
-            path.style.fill = model.series[k]!.color;
+            const path = svg('path', { d: pill ? pillPath(x, barWidth, base, y(value)) : barPath(x, barWidth, base, y(value), true), 'data-mk-part': 'bar', 'data-mk-index': i, 'data-mk-series': k });
+            fillBar(path, k, i);
             marks.append(path);
           });
         }
       });
       if (totalsLayer.childNodes.length) canvas.append(totalsLayer);
-    } else {
+    }
+    if (model.series.some((_, index) => seriesType(index) !== 'bar')) {
       values.forEach((list, k) => {
+        if (seriesType(k) === 'bar') return;
         const series = model.series[k]!;
-        const runs: Array<Array<[number, number]>> = [];
-        let run: Array<[number, number]> = [];
+        const runs: Array<Array<[number, number, number]>> = [];
+        let run: Array<[number, number, number]> = [];
         list.forEach((value, i) => {
-          if (finite(value)) run.push([xs[i]!, y(value)]);
+          const bottomValue = lower[k]?.[i];
+          if (finite(value) && (!series.lowerValues || finite(bottomValue))) run.push([xs[i]!, y(value), finite(bottomValue) ? y(bottomValue) : base]);
           else if (run.length) {
             runs.push(run);
             run = [];
           }
         });
         if (run.length) runs.push(run);
-        if (type() === 'area') {
+        if (seriesType(k) === 'area') {
           const gradient = svg('linearGradient', { id: `${uid}-fill-${k}`, x1: 0, x2: 0, y1: 0, y2: 1 });
           const stop = (offset: string, opacity: string) => {
             const element = svg('stop', { offset });
@@ -454,8 +545,10 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
           defs.append(gradient);
           for (const points of runs) {
             if (points.length < 2) continue;
-            const d = `M${points.map(([px, py]) => `${round(px)},${round(py)}`).join('L')}L${round(points[points.length - 1]![0])},${round(base)}L${round(points[0]![0])},${round(base)}Z`;
-            const area = svg('path', { d, 'data-mk-part': 'area' });
+            const upper = linePath(points, options.curve === 'smooth');
+            const bottom = linePath([...points].reverse().map(([px, , py]) => [px, py]), options.curve === 'smooth');
+            const d = `${upper}${bottom.replace(/^M/, 'L')}Z`;
+            const area = svg('path', { d, 'data-mk-part': 'area', 'data-mk-series': k });
             area.style.fill = `url(#${uid}-fill-${k})`;
             marks.append(area);
           }
@@ -468,7 +561,7 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
             marks.append(dot);
             continue;
           }
-          const line = svg('path', { d: `M${points.map(([px, py]) => `${round(px)},${round(py)}`).join('L')}`, 'data-mk-part': 'line' });
+          const line = svg('path', { d: linePath(points, options.curve === 'smooth'), 'data-mk-part': 'line' });
           line.style.stroke = series.color;
           // Dotted patterns (a first dash of 1 or less) draw round dots; dashes stay thin.
           const dotted = Boolean(series.dash) && Number(series.dash!.trim().split(/[\s,]+/)[0]) <= 1;
@@ -479,7 +572,7 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
       });
       // The last value of the first series: a ringed point and its pill.
       const last = lastPoint(values[0]);
-      if (last >= 0 && !model.series[0]!.dash) {
+      if (last >= 0 && seriesType(0) !== 'bar' && !model.series[0]!.dash) {
         const point = svg('circle', { cx: round(xs[last]!), cy: round(y(values[0]![last]!)), r: 5, 'data-mk-part': 'end' });
         point.style.fill = model.series[0]!.color;
         marks.append(point);
@@ -508,6 +601,11 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     cursor.replaceChildren();
     if (band) band.style.display = 'none';
     for (const mark of canvas.querySelectorAll('[data-mk-index]')) mark.removeAttribute('data-mk-dim');
+    for (const mark of canvas.querySelectorAll<SVGPathElement>('[data-mk-part="bar"]')) {
+      const index = Number(mark.dataset.mkIndex);
+      mark.toggleAttribute('data-mk-active', index === selected);
+      if (options.barFill === 'spotlight') mark.style.fill = index === (selected ?? model.labels.length - 1) ? mark.style.getPropertyValue('--mk-bar-fill') : `url(#${uid}-hatch)`;
+    }
     if (selected === null || !hasData()) {
       if (!tooltip.hidden && !reduced()) {
         gsap.killTweensOf(tooltip, 'opacity,scale');
@@ -532,6 +630,20 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
       for (const mark of canvas.querySelectorAll<SVGElement>('[data-mk-index]')) if (mark.getAttribute('data-mk-index') !== String(i)) mark.setAttribute('data-mk-dim', '');
       const { up, down } = totals(i);
       anchorY = stacked() ? geometry.y(up || down) : Math.min(...model.series.map((series) => (finite(series.values[i]) ? geometry.y(series.values[i]!) : geometry.bottom)));
+      if (options.barStyle === 'pill') {
+        const amount = stacked() ? up + down : model.series[0]?.values[i];
+        if (finite(amount)) {
+          const label = format(amount), width = Math.max(40, label.length * 7 + 18);
+          const bx = Math.max(0, Math.min(geometry.width - width, x - width / 2));
+          const by = Math.max(0, anchorY - 32);
+          const group = svg('g', { 'data-mk-part': 'bar-value' });
+          group.append(svg('rect', { x: round(bx), y: round(by), width, height: 24, rx: 12 }));
+          const text = svg('text', { x: round(bx + width / 2), y: round(by + 12), 'text-anchor': 'middle', 'dominant-baseline': 'middle' });
+          text.textContent = label; group.append(text); cursor.append(group);
+          const marker = svg('circle', { cx: round(x), cy: round(anchorY), r: 4, 'data-mk-part': 'marker' }); marker.style.fill = model.series[0]?.color ?? 'var(--mk-text)'; cursor.append(marker);
+          if (fresh && !reduced()) keep(gsap.fromTo(group, { opacity: 0, y: 6 }, { opacity: 1, y: 0, duration: 0.3, ease: EASE.pop }));
+        }
+      }
     } else {
       cursor.append(svg('line', { x1: round(x), x2: round(x), y1: geometry.top, y2: geometry.bottom, 'data-mk-part': 'guide' }));
       model.series.forEach((series) => {
@@ -564,10 +676,10 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
       const name = document.createElement('span');
       name.textContent = series.name;
       const amount = document.createElement('b');
-      amount.textContent = finite(value) ? format(value) : '—';
+      amount.textContent = rangeText(series, i);
       row.append(swatch, name, amount);
       tooltip.append(row);
-      rows.push(`${series.name ? `${series.name}: ` : ''}${finite(value) ? format(value) : 'sin dato'}`);
+      rows.push(`${series.name ? `${series.name}: ` : ''}${finite(value) ? rangeText(series, i) : 'sin dato'}`);
     }
     if (stacked()) {
       const { up, down } = totals(i);
@@ -621,6 +733,7 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     glide?.kill();
     canvas.setAttribute('aria-label', describe());
     scope.attr(root, 'data-mk-chart-type', type());
+    scope.attr(root, 'data-mk-bar-style', options.barStyle ?? 'rounded');
     renderTable();
     renderLegend();
     const ok = hasData();
@@ -640,7 +753,7 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     const target = targetValues();
     const domain = domainOf(target);
     const finish = () => {
-      shown = { values: target, lo: domain.lo, hi: domain.hi, type: type(), stacked: stacked() };
+      shown = { values: target, lower: lowerValues(), lo: domain.lo, hi: domain.hi, type: type(), stacked: stacked() };
       paint(target, domain.lo, domain.hi, domain.step);
       paintSelection(false);
     };
@@ -660,7 +773,11 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
             const before = from.values[k]![i];
             return finite(value) && finite(before) ? before + (value - before) * t : value;
           }));
-          paint(values, from.lo + (domain.lo - from.lo) * t, from.hi + (domain.hi - from.hi) * t, domain.step);
+          const lower = lowerValues().map((list, k) => list.map((value, i) => {
+            const before = from.lower[k]?.[i];
+            return finite(value) && finite(before) ? before + (value - before) * t : value;
+          }));
+          paint(values, from.lo + (domain.lo - from.lo) * t, from.hi + (domain.hi - from.hi) * t, domain.step, lower);
           paintSelection(false);
         },
         onComplete: () => {
@@ -673,12 +790,14 @@ export function createChart(root: HTMLElement | null, initial: ChartOptions = {}
     // First appearance: bars grow from the baseline, lines wipe in from the left.
     finish();
     if (type() === 'bar') {
-      const state = { t: 0 };
+      const stagger = Math.min(0.045, 0.22 / Math.max(1, model.labels.length - 1));
+      const length = 0.7 + stagger * (model.labels.length - 1);
+      const state = { t: 0 }, ease = gsap.parseEase(EASE.swatch);
       glide = gsap.to(state, {
-        t: 1,
-        duration: 0.7,
-        ease: EASE.swatch,
-        onUpdate: () => paint(target.map((list) => list.map((value) => (finite(value) ? value * state.t : value))), domain.lo, domain.hi, domain.step),
+        t: length,
+        duration: length,
+        ease: 'none',
+        onUpdate: () => paint(target.map((list) => list.map((value, i) => (finite(value) ? value * Math.max(0, ease(Math.min(1, Math.max(0, (state.t - i * stagger) / 0.7)))) : value))), domain.lo, domain.hi, domain.step),
         onComplete: () => {
           finish();
           settle();

package/src/components/chart/parts.ts

@@ -0,0 +1,237 @@
+import { gsap, EASE } from '../../core/gsap';
+import { reduced } from '../../core/reduced';
+import type { Scope } from '../../core/scope';
+
+/*
+ * The parts the round and flow charts (pie, radar, radial, sankey, heatmap)
+ * share with chart: the same plot, inverse-glass tooltip, outlined legend,
+ * screen-reader table and colour slots, so they read as one family and use
+ * chart.css. Each chart draws its own marks.
+ */
+
+export const SVG_NS = 'http://www.w3.org/2000/svg';
+export const SLOTS = 8;
+
+export const svg = <K extends keyof SVGElementTagNameMap>(tag: K, attrs: Record<string, string | number> = {}) => {
+  const element = document.createElementNS(SVG_NS, tag);
+  for (const [name, value] of Object.entries(attrs)) element.setAttribute(name, String(value));
+  return element;
+};
+export const finite = (value: unknown): value is number => typeof value === 'number' && Number.isFinite(value);
+export const round = (n: number) => Math.round(n * 100) / 100;
+
+/** The colour of slot `i`: monochrome alone, --mk-chart-N for up to 8, a neutral past them. */
+export const slotColor = (i: number, total = SLOTS) => (total === 1 ? 'var(--mk-chart-mono)' : i < SLOTS ? `var(--mk-chart-${i + 1})` : 'var(--mk-chart-other)');
+
+export const formatNumber = (value: number) => new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 }).format(value);
+
+/** A point on a circle: angle 0 is 12 o'clock, clockwise. */
+export const polar = (cx: number, cy: number, r: number, angle: number) => [cx + r * Math.sin(angle), cy - r * Math.cos(angle)] as const;
+
+/** An annular sector (a pie slice when `inner` is 0) from angle `a0` to `a1`. */
+export function arcPath(cx: number, cy: number, outer: number, inner: number, a0: number, a1: number) {
+  const sweep = Math.min(a1 - a0, Math.PI * 2 - 1e-4);
+  const end = a0 + sweep;
+  const large = sweep > Math.PI ? 1 : 0;
+  const [x0, y0] = polar(cx, cy, outer, a0);
+  const [x1, y1] = polar(cx, cy, outer, end);
+  if (inner <= 0) return `M${round(cx)},${round(cy)}L${round(x0)},${round(y0)}A${round(outer)},${round(outer)} 0 ${large} 1 ${round(x1)},${round(y1)}Z`;
+  const [x2, y2] = polar(cx, cy, inner, end);
+  const [x3, y3] = polar(cx, cy, inner, a0);
+  return `M${round(x0)},${round(y0)}A${round(outer)},${round(outer)} 0 ${large} 1 ${round(x1)},${round(y1)}L${round(x2)},${round(y2)}A${round(inner)},${round(inner)} 0 ${large} 0 ${round(x3)},${round(y3)}Z`;
+}
+
+export interface TipRow {
+  name: string;
+  color?: string;
+  value: string;
+}
+
+export interface ChartFrame {
+  plot: HTMLDivElement;
+  canvas: SVGSVGElement;
+  tooltip: HTMLDivElement;
+  empty: HTMLParagraphElement;
+  legend: HTMLUListElement;
+  table: HTMLTableElement;
+  live: HTMLSpanElement;
+  /** Fill and show the tooltip near (x, y) in plot px; null hides it. */
+  tip(at: { x: number; y: number; title: string; rows: TipRow[] } | null): void;
+  /** One outlined pill per item; `type` picks the swatch's shape. */
+  fillLegend(items: Array<{ name: string; color: string }>, show: boolean, type?: string): HTMLLIElement[];
+  /** The values for screen readers: a caption, the column heads and the rows. */
+  fillTable(caption: string, head: string[], rows: string[][]): void;
+  keep(animation: gsap.core.Animation | null | undefined): void;
+}
+
+/** The plot, tooltip, legend and table of a chart, removed by the scope. The root gets .mk-chart for chart.css. */
+export function chartFrame(root: HTMLElement, scope: Scope, kind: string): ChartFrame {
+  if (!root.classList.contains('mk-chart')) {
+    root.classList.add('mk-chart');
+    scope.add(() => {
+      root.classList.remove('mk-chart');
+      if (!root.classList.length) root.removeAttribute('class');
+    });
+  }
+  scope.attr(root, 'data-mk-chart-type', kind);
+  const made = <K extends keyof HTMLElementTagNameMap>(tag: K, parent: Element = root) => {
+    const element = document.createElement(tag);
+    parent.append(element);
+    scope.add(() => element.remove());
+    return element;
+  };
+  const plot = made('div');
+  plot.dataset.mkChartPlot = '';
+  const canvas = svg('svg');
+  canvas.dataset.mkChartSvg = '';
+  canvas.setAttribute('role', 'img');
+  canvas.setAttribute('tabindex', '0');
+  canvas.setAttribute('focusable', 'true');
+  plot.append(canvas);
+  const tooltip = made('div', plot);
+  tooltip.dataset.mkChartTooltip = '';
+  tooltip.setAttribute('aria-hidden', 'true');
+  tooltip.hidden = true;
+  const empty = made('p');
+  empty.dataset.mkChartEmpty = '';
+  empty.hidden = true;
+  const legend = made('ul');
+  legend.dataset.mkChartLegend = '';
+  const table = made('table');
+  table.dataset.mkChartTable = '';
+  table.className = 'mk-sr-only';
+  const live = made('span');
+  live.className = 'mk-sr-only';
+  live.setAttribute('role', 'status');
+  scope.attr(root, 'data-mk-ready', '');
+
+  const effects = new Set<gsap.core.Animation>();
+  const keep = (animation: gsap.core.Animation | null | undefined) => {
+    if (!animation) return;
+    effects.add(animation);
+    // Finished ones leave as new ones arrive: the animation's own onComplete stays untouched.
+    for (const effect of effects) if (effect.totalProgress() === 1) effects.delete(effect);
+  };
+  scope.add(() => {
+    for (const effect of effects) effect.kill();
+    effects.clear();
+    gsap.killTweensOf(tooltip);
+  });
+
+  const tip: ChartFrame['tip'] = (at) => {
+    if (!at) {
+      if (!tooltip.hidden && !reduced()) {
+        gsap.killTweensOf(tooltip, 'opacity,scale');
+        keep(gsap.to(tooltip, { opacity: 0, scale: 0.94, duration: 0.15, ease: 'power2.in', onComplete: () => {
+          tooltip.hidden = true;
+        } }));
+      } else tooltip.hidden = true;
+      return;
+    }
+    tooltip.replaceChildren();
+    const title = document.createElement('strong');
+    title.textContent = at.title;
+    tooltip.append(title);
+    for (const each of at.rows) {
+      const row = document.createElement('span');
+      row.dataset.mkChartRow = '';
+      const swatch = document.createElement('i');
+      if (!each.color || /--mk-(text|chart-mono|muted)/.test(each.color)) swatch.dataset.mkMono = '';
+      else swatch.style.background = each.color;
+      const name = document.createElement('span');
+      name.textContent = each.name;
+      const amount = document.createElement('b');
+      amount.textContent = each.value;
+      row.append(swatch, name, amount);
+      tooltip.append(row);
+    }
+    const appearing = tooltip.hidden;
+    tooltip.hidden = false;
+    const width = plot.clientWidth || 300;
+    const height = plot.clientHeight || 240;
+    const tipW = tooltip.offsetWidth || 160;
+    const tipH = tooltip.offsetHeight || 60;
+    // Beside the point, towards the middle of the plot, inside it.
+    const left = round(Math.max(0, Math.min(width - tipW, at.x > width / 2 ? at.x - 16 - tipW : at.x + 16)));
+    const top = round(Math.max(0, Math.min(height - tipH, at.y - tipH - 12)));
+    if (appearing || reduced()) {
+      gsap.killTweensOf(tooltip);
+      gsap.set(tooltip, { x: left, y: top });
+      if (!reduced()) keep(gsap.fromTo(tooltip, { opacity: 0, scale: 0.9 }, { opacity: 1, scale: 1, duration: 0.25, ease: EASE.pop }));
+      else gsap.set(tooltip, { opacity: 1, scale: 1 });
+    } else {
+      gsap.killTweensOf(tooltip, 'opacity,scale');
+      gsap.set(tooltip, { opacity: 1, scale: 1 });
+      keep(gsap.to(tooltip, { x: left, y: top, duration: 0.25, ease: 'power3.out', overwrite: 'auto' }));
+    }
+  };
+
+  const fillLegend: ChartFrame['fillLegend'] = (items, show, type = 'bar') => {
+    legend.replaceChildren();
+    legend.hidden = !show || !items.length;
+    if (legend.hidden) return [];
+    return items.map((item) => {
+      const li = document.createElement('li');
+      const swatch = document.createElement('span');
+      swatch.dataset.mkChartSwatch = '';
+      swatch.dataset.mkType = type;
+      swatch.style.background = item.color;
+      swatch.style.color = item.color;
+      swatch.setAttribute('aria-hidden', 'true');
+      const name = document.createElement('span');
+      name.textContent = item.name;
+      li.append(swatch, name);
+      legend.append(li);
+      return li;
+    });
+  };
+
+  const fillTable: ChartFrame['fillTable'] = (caption, head, rows) => {
+    table.replaceChildren();
+    const cap = document.createElement('caption');
+    cap.textContent = caption;
+    const thead = document.createElement('thead');
+    const headRow = document.createElement('tr');
+    for (const text of head) {
+      const th = document.createElement('th');
+      th.scope = 'col';
+      th.textContent = text;
+      headRow.append(th);
+    }
+    thead.append(headRow);
+    const body = document.createElement('tbody');
+    for (const cells of rows) {
+      const row = document.createElement('tr');
+      cells.forEach((text, i) => {
+        const cell = document.createElement(i ? 'td' : 'th');
+        if (!i) (cell as HTMLTableCellElement).scope = 'row';
+        cell.textContent = text;
+        row.append(cell);
+      });
+      body.append(row);
+    }
+    table.append(cap, thead, body);
+  };
+
+  return { plot, canvas, tooltip, empty, legend, table, live, tip, fillLegend, fillTable, keep };
+}
+
+/** Calls `draw` again when the root changes width (on the next frame, once). */
+export function onWidth(root: HTMLElement, scope: Scope, draw: () => void) {
+  if (typeof ResizeObserver !== 'function') return;
+  let width = 0;
+  let frame = 0;
+  const observer = scope.observe(
+    new ResizeObserver(() => {
+      const next = Math.round(root.clientWidth);
+      if (!next || next === width) return;
+      const first = !width;
+      width = next;
+      if (first) return;
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(draw);
+    }),
+  );
+  observer.observe(root);
+  scope.add(() => cancelAnimationFrame(frame));
+}

package/src/components/chart/react.tsx

@@ -11,13 +11,13 @@ export interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSele
  * <Chart type="bar" stacked labels={weeks} series={[{ name: 'Ana', values }]} formatValue={money} label="Sesiones por semana" />.
  * Data changes redraw in place; the selection survives when its point still exists.
  */
-export function Chart({ type, labels, series, points, stacked, formatValue, label, height, emptyLabel, legend, tooltip, onSelect, instanceRef, className, ...props }: ChartProps) {
+export function Chart({ type, labels, series, points, stacked, barStyle, barTrack, barFill, barWidth, curve, formatValue, label, height, emptyLabel, legend, tooltip, axis, endLabel, onSelect, instanceRef, className, ...props }: ChartProps) {
   const ref = useRef<HTMLDivElement>(null);
   const instance = useRef<ChartInstance | null>(null);
   const format = useLatest(formatValue);
   const select = useLatest(onSelect);
   const formatted = formatValue !== undefined;
-  const data = { type, labels, series, points, stacked, label, height, emptyLabel, legend, tooltip };
+  const data = { type, labels, series, points, stacked, barStyle, barTrack, barFill, barWidth, curve, label, height, emptyLabel, legend, tooltip, axis, endLabel };
   const key = JSON.stringify(data);
   const latest = useLatest(data);
   const options = (): ChartOptions => ({