@skdx/angular-charts 0.33.0 → 0.34.0

package/fesm2022/skdx-angular-charts-internal.mjs

@@ -1,5 +1,83 @@
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, signal, Directive } from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, output, computed, viewChild, signal, inject, ElementRef, DestroyRef, afterNextRender, model, Directive } from '@angular/core';
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const round$1 = (v) => Number(v.toPrecision(12));
+let defaultNumberFormat;
+/** The default: the runtime locale's plain number format, with float noise trimmed. */
+const formatValue = (v) => (defaultNumberFormat ??= new Intl.NumberFormat()).format(round$1(v));
+/** Seconds as `1h 02m`, `3m 05s` or `12s`. */
+const duration = (seconds) => {
+    const s = Math.round(Math.abs(seconds));
+    const sign = seconds < 0 ? '-' : '';
+    const h = Math.floor(s / 3600);
+    const m = Math.floor((s % 3600) / 60);
+    const pad = (n) => String(n).padStart(2, '0');
+    if (h > 0)
+        return `${sign}${h}h ${pad(m)}m`;
+    if (m > 0)
+        return `${sign}${m}m ${pad(s % 60)}s`;
+    return `${sign}${s}s`;
+};
+/** Turns a `Format` into a function; `undefined` gives the default number format. */
+function makeFormatter(format) {
+    if (format === undefined)
+        return formatValue;
+    if (typeof format === 'function')
+        return format;
+    const { style, locale, digits, unit = '' } = format;
+    const withUnit = (f) => (unit ? (v) => f(v) + unit : f);
+    const digitsOf = (fallback) => digits === undefined
+        ? fallback === undefined
+            ? {}
+            : { maximumFractionDigits: fallback }
+        : { minimumFractionDigits: digits, maximumFractionDigits: digits };
+    const number = (options) => {
+        const nf = new Intl.NumberFormat(locale, options);
+        return withUnit((v) => nf.format(round$1(v)));
+    };
+    const date = (options) => {
+        const df = new Intl.DateTimeFormat(locale, options);
+        return (v) => df.format(v);
+    };
+    switch (style) {
+        case 'integer':
+            return number({ maximumFractionDigits: 0 });
+        case 'decimal':
+            return number(digitsOf(2));
+        case 'percent':
+            return number({ style: 'percent', ...digitsOf(0) });
+        case 'currency':
+            return number({ style: 'currency', currency: format.currency ?? 'USD', ...digitsOf() });
+        case 'compact':
+            return number({ notation: 'compact', ...digitsOf(1) });
+        case 'scientific':
+            return number({ notation: 'scientific', ...digitsOf(2) });
+        case 'date':
+            return date({ dateStyle: 'medium' });
+        case 'time':
+            return date({ timeStyle: 'short' });
+        case 'datetime':
+            return date({ dateStyle: 'medium', timeStyle: 'short' });
+        case 'duration':
+            return withUnit(duration);
+    }
+}
+/** A category as axis text: strings as they are, numbers and dates through `format`. */
+function categoryLabel(c, format) {
+    if (typeof c === 'string')
+        return c;
+    const v = c instanceof Date ? c.getTime() : c;
+    if (format)
+        return makeFormatter(format)(v);
+    return c instanceof Date ? new Intl.DateTimeFormat().format(c) : formatValue(v);
+}
+/** A category as a number, for positioning on numeric axes (Gantt, scatter references). */
+const categoryValue = (c) => c instanceof Date ? c.getTime() : typeof c === 'number' ? c : Number(c);
 
 /*
  * Copyright (c) 2026 SkandaDX
@@ -24,9 +102,14 @@ const CHART_COLORS = {
     axis: 'var(--skdx-color-border-strong)',
     grid: 'var(--skdx-color-border-subtle)',
     label: 'var(--skdx-color-text-muted)',
+    focus: 'var(--skdx-color-focus-ring)',
+    positive: 'var(--skdx-color-success-500)',
+    negative: 'var(--skdx-color-danger-500)',
     fontFamily: 'var(--skdx-font-family)',
     fontSize: 'var(--skdx-font-size-xs)',
 };
+/** Semantic color of a reference line, band or threshold sector. */
+const variantColor = (variant = 'neutral') => variant === 'neutral' ? CHART_COLORS.axis : `var(--skdx-color-${variant}-500)`;
 const seriesColor = (index, override) => override ?? SERIES_COLORS[index % SERIES_COLORS.length];
 
 /*
@@ -68,12 +151,43 @@ function bandScale(count, [r0, r1]) {
 const round = (v) => Number(v.toPrecision(12));
 /** Pixel coordinates rounded to 2 decimals, so the markup stays readable. */
 const px = (n) => Number(n.toFixed(2));
-const formatValue = (v) => new Intl.NumberFormat().format(round(v));
-/** SVG path through the points: straight segments, or a monotone cubic (Fritsch–Carlson) that never overshoots. */
+/** `true` for a plottable number: not `null`, `NaN` or infinite. */
+const isFinite = (v) => typeof v === 'number' && Number.isFinite(v);
+/** The plottable numbers of a list, in order. */
+const finite = (values) => values.filter(isFinite);
+/** `[min, max]` over any number of values without spreading them as arguments; `[0, 0]` when empty. */
+function minMax(values) {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const v of values) {
+        if (!isFinite(v))
+            continue;
+        if (v < min)
+            min = v;
+        if (v > max)
+            max = v;
+    }
+    return min === Infinity ? [0, 0] : [min, max];
+}
+/** SVG path through the points: straight segments, steps, or a monotone cubic (Fritsch–Carlson) that never overshoots. */
 function pathThrough(points, curve = 'linear') {
     if (points.length === 0)
         return '';
     const first = points[0];
+    if (curve === 'step' || curve === 'stepBefore' || curve === 'stepAfter') {
+        let d = `M${first.x} ${first.y}`;
+        for (let i = 1; i < points.length; i++) {
+            const a = points[i - 1];
+            const b = points[i];
+            if (curve === 'stepAfter')
+                d += `H${b.x}V${b.y}`;
+            else if (curve === 'stepBefore')
+                d += `V${b.y}H${b.x}`;
+            else
+                d += `H${px((a.x + b.x) / 2)}V${b.y}H${b.x}`;
+        }
+        return d;
+    }
     if (curve === 'linear' || points.length < 3)
         return `M${points.map((p) => `${p.x} ${p.y}`).join('L')}`;
     const n = points.length;
@@ -111,6 +225,60 @@ function pathThrough(points, curve = 'linear') {
     }
     return d;
 }
+const SECOND = 1000;
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY$1 = 24 * HOUR;
+/** Calendar-friendly tick steps, in ms, from a second up to a week. */
+const TIME_STEPS = [
+    SECOND,
+    5 * SECOND,
+    15 * SECOND,
+    30 * SECOND,
+    MINUTE,
+    5 * MINUTE,
+    15 * MINUTE,
+    30 * MINUTE,
+    HOUR,
+    3 * HOUR,
+    6 * HOUR,
+    12 * HOUR,
+    DAY$1,
+    2 * DAY$1,
+    7 * DAY$1,
+    14 * DAY$1,
+];
+/**
+ * Round timestamps covering `[min, max]` (epoch ms), about `count` of them: seconds to weeks as
+ * UTC-aligned multiples, then whole months or years.
+ */
+function timeTicks(min, max, count = 6) {
+    if (!(max > min))
+        return [min];
+    const span = max - min;
+    const step = TIME_STEPS.find((s) => span / s <= count);
+    const ticks = [];
+    if (step !== undefined) {
+        for (let t = Math.ceil(min / step) * step; t <= max; t += step)
+            ticks.push(t);
+        return ticks.length ? ticks : [min, max];
+    }
+    const months = span / (30 * DAY$1);
+    const stepMonths = [1, 2, 3, 6, 12, 24, 60, 120].find((m) => months / m <= count) ?? 240;
+    const d = new Date(min);
+    let y = d.getUTCFullYear();
+    let m = Math.ceil((d.getUTCMonth() + (d.getUTCDate() > 1 ? 1 : 0)) / stepMonths) * stepMonths;
+    for (let t = Date.UTC(y, m, 1); t <= max;) {
+        ticks.push(t);
+        m += stepMonths;
+        if (m >= 12) {
+            y += Math.floor(m / 12);
+            m %= 12;
+        }
+        t = Date.UTC(y, m, 1);
+    }
+    return ticks.length ? ticks : [min, max];
+}
 /** Ticks at powers of ten covering `[min, max]` (both > 0), with 2× and 5× steps when a decade or less. */
 function logTicks(min, max) {
     const lo = Math.floor(Math.log10(min));
@@ -144,9 +312,16 @@ const size = (input, w = 600, h = 300) => ({
 const LEGEND_HEIGHT = 20;
 /** Vertical room the legend row takes, to shift the plot down by. */
 const legendTop = (input) => (input.legend ? LEGEND_HEIGHT : 0);
+/** Average glyph width at the chart font size, for text-width estimates. */
 const CHAR = 6.5;
+/** The series color for index `i`: an explicit override, else the chart palette, else the tokens. */
+const colorOf = (input, i, override) => override ??
+    (input.palette && input.palette.length > 0
+        ? input.palette[i % input.palette.length]
+        : seriesColor(i));
+const isHidden = (input, name) => input.hiddenSeries?.includes(name) ?? false;
 /** One row of swatches and names along the top edge, wrapping when it runs out of width. */
-function legendShapes(items, width) {
+function legendShapes(items, width, hidden = []) {
     const shapes = [];
     let x = 8;
     let y = 10;
@@ -156,32 +331,50 @@ function legendShapes(items, width) {
             x = 8;
             y += LEGEND_HEIGHT;
         }
-        shapes.push({ kind: 'rect', part: 'legend-swatch', x, y: y - 5, width: 10, height: 10, fill: item.color }, {
+        const off = hidden.includes(item.name);
+        const meta = { label: item.name, series: item.name, legend: true };
+        shapes.push({
+            kind: 'rect',
+            part: 'legend-swatch',
+            x,
+            y: y - 5,
+            width: 10,
+            height: 10,
+            fill: item.color,
+            opacity: off ? 0.3 : undefined,
+            item: meta,
+        }, {
             kind: 'text',
             part: 'legend-label',
             x: x + 14,
             y,
             text: item.name,
             baseline: 'middle',
-            fill: CHART_COLORS.label,
+            fill: off ? CHART_COLORS.grid : CHART_COLORS.label,
+            item: meta,
         });
         x += w + 12;
     }
     return shapes;
 }
-/** The common tail of every layout: size, legend decorations and the tooltip switch. */
+/** The common tail of every layout: size, legend decorations, the tooltip switch and accessibility passthroughs. */
 function canvas(input, width, height, legend = []) {
     return {
         width,
         height,
         tooltip: input.tooltip ?? true,
-        shapes: input.legend ? legendShapes(legend, width) : [],
+        description: input.description,
+        decorative: input.decorative,
+        animate: input.animate === true ? 300 : input.animate || undefined,
+        responsive: input.responsive,
+        shapes: input.legend ? legendShapes(legend, width, input.hiddenSeries ?? []) : [],
     };
 }
-/** A tooltip box next to the pointer, kept inside the canvas. */
+/** A tooltip box next to the pointer, kept inside the canvas; one line per entry. */
 function tooltipShapes(x, y, text, width, height) {
-    const w = text.length * CHAR + 12;
-    const h = 22;
+    const lines = Array.isArray(text) ? text : [text];
+    const w = Math.max(...lines.map((l) => l.length)) * CHAR + 12;
+    const h = 6 + lines.length * 16;
     const bx = Math.max(0, Math.min(width - w, x + 12));
     const by = Math.max(0, Math.min(height - h, y - h - 6));
     return [
@@ -194,89 +387,113 @@ function tooltipShapes(x, y, text, width, height) {
             height: h,
             fill: 'var(--skdx-color-surface-raised)',
             stroke: CHART_COLORS.axis,
+            rx: 3,
         },
-        {
+        ...lines.map((line, i) => ({
             kind: 'text',
             part: 'tooltip-label',
             x: px(bx + 6),
-            y: px(by + h / 2),
-            text,
+            y: px(by + 11 + i * 16),
+            text: line,
             baseline: 'middle',
             fill: 'var(--skdx-color-text-default)',
-        },
+            weight: lines.length > 1 && i === 0 ? 'bold' : undefined,
+        })),
     ];
 }
-/** `[min, max]` of the values, widened to include zero when asked; `[0, 0]` when empty. */
+/** `[min, max]` of the plottable values, widened to include zero when asked; `[0, 0]` when empty. */
 function extent(values, includeZero) {
-    if (values.length === 0)
-        return [0, 0];
-    const min = Math.min(...values);
-    const max = Math.max(...values);
+    const [min, max] = minMax(values);
     return includeZero ? [Math.min(0, min), Math.max(0, max)] : [min, max];
 }
-/** A nice-ticked linear axis over `[min, max]` mapped onto `range`. */
-function axis([min, max], range, log = false) {
-    if (log) {
-        const lo = Math.max(min, Number.EPSILON);
-        const ticks = logTicks(lo, Math.max(max, lo));
-        const domain = [Math.log10(lo), Math.log10(Math.max(max, lo))];
+/** A nice-ticked linear (or log) axis over `[min, max]` mapped onto `range`, honouring explicit bounds. */
+function axis([min, max], range, options = false, chartFormat) {
+    const opts = typeof options === 'boolean' ? { scale: options ? 'log' : 'linear' } : options;
+    const format = makeFormatter(opts.format ?? chartFormat);
+    const lo = opts.min ?? min;
+    const hi = opts.max ?? max;
+    if (opts.scale === 'log') {
+        const l = Math.max(lo, Number.EPSILON);
+        const h = Math.max(hi, l);
+        const ticks = logTicks(l, h);
+        const domain = [Math.log10(l), Math.log10(h)];
         const lin = linearScale(domain, range);
         const scale = (v) => lin(Math.log10(Math.max(v, Number.EPSILON)));
         return {
             scale,
             domain,
-            ticks: ticks.map((v) => ({ pos: px(scale(v)), label: formatValue(v) })),
+            format,
+            ticks: ticks.map((v) => ({ pos: px(scale(v)), label: format(v) })),
             zero: px(range[0]),
         };
     }
-    const ticks = niceTicks(min, max);
-    const domain = [ticks[0], ticks[ticks.length - 1]];
+    const nice = niceTicks(lo, hi);
+    // Explicit bounds win over the rounded ends; ticks outside them are dropped.
+    const domain = [
+        opts.min ?? nice[0],
+        opts.max ?? nice[nice.length - 1],
+    ];
     const scale = linearScale(domain, range);
+    const inside = nice.filter((v) => v >= domain[0] - 1e-9 && v <= domain[1] + 1e-9);
+    const ticks = (inside.length >= 2 ? inside : [domain[0], domain[1]]).map((v) => ({
+        pos: px(scale(v)),
+        label: format(v),
+    }));
     return {
         scale,
         domain,
-        ticks: ticks.map((v) => ({ pos: px(scale(v)), label: formatValue(v) })),
-        /** Pixel position of zero, clamped into the domain. */
+        format,
+        ticks,
         zero: px(scale(Math.min(Math.max(0, domain[0]), domain[1]))),
     };
 }
-/** Axes, ticks and scales shared by the category charts; `yExtent` is the y domain to cover. */
-function buildFrame(input, yExtent) {
-    const { width, height } = size(input);
-    const plot = plotBox(width, height, { ...MARGIN$1, top: MARGIN$1.top + legendTop(input) });
-    const count = Math.max(input.categories?.length ?? 0, ...input.series.map((s) => s.data.length));
-    const categories = Array.from({ length: count }, (_, i) => input.categories?.[i] ?? String(i + 1));
-    const y = axis(yExtent, [plot.y + plot.height, plot.y]);
-    const x = bandScale(count, [plot.x, plot.x + plot.width]);
-    return {
-        frame: {
-            ...canvas(input, width, height, input.series.map((s, i) => ({ name: s.name, color: seriesColor(i, s.color) }))),
-            plot,
-            xTicks: categories.map((label, i) => ({ pos: px(x.center(i)), label })),
-            yTicks: y.ticks,
-            baseline: y.zero,
-        },
-        x,
-        y: y.scale,
-        categories,
-    };
+/** Keeps every n-th tick so labels of the given widths do not overlap along `width`. */
+function thinTicks(ticks, width) {
+    if (ticks.length < 2)
+        return ticks;
+    const widest = ticks.reduce((w, t) => Math.max(w, t.label.length), 0) * CHAR + 8;
+    const every = Math.max(1, Math.ceil((ticks.length * widest) / Math.max(1, width)));
+    return every === 1 ? ticks : ticks.filter((_, i) => i % every === 0);
 }
-const values = (input) => input.series.flatMap((s) => s.data);
 /** Tooltip text for a value in a series: `Series, Category: 1,234`. */
-const markTitle = (series, category, value) => `${series}, ${category}: ${formatValue(value)}`;
+const markTitle = (series, category, value, format) => `${series}, ${category}: ${format(value)}`;
 /**
- * Tooltip shapes for the mark under the pointer, or none. Reads the mark's
- * `<title>` and converts the pointer position into viewBox units.
+ * The loading, error or empty placeholder, or `null` when the chart should draw. Charts call this
+ * first so no axis is drawn around missing data.
  */
-function hoverTooltip(target, svg, clientX, clientY, width, height) {
-    const mark = target?.closest?.('[data-skdx-part]');
-    const title = mark && Array.from(mark.children).find((c) => c.tagName.toLowerCase() === 'title')?.textContent;
-    if (!title)
-        return [];
-    const r = svg.getBoundingClientRect();
-    const x = r.width ? ((clientX - r.left) * width) / r.width : clientX;
-    const y = r.height ? ((clientY - r.top) * height) / r.height : clientY;
-    return tooltipShapes(x, y, title, width, height);
+function stateCanvas(input, empty, w, h) {
+    const state = input.error !== undefined ? 'error' : input.loading ? 'loading' : empty ? 'empty' : null;
+    if (!state)
+        return null;
+    const { width, height } = size(input, w, h);
+    const text = state === 'error'
+        ? input.error
+        : state === 'loading'
+            ? 'Loading…'
+            : (input.emptyMessage ?? 'No data available');
+    const shapes = [];
+    if (state === 'loading')
+        shapes.push({
+            kind: 'rect',
+            part: 'skeleton',
+            x: 0,
+            y: 0,
+            width,
+            height,
+            fill: 'var(--skdx-color-surface-sunken)',
+            rx: 4,
+        });
+    shapes.push({
+        kind: 'text',
+        part: `state-${state}`,
+        x: px(width / 2),
+        y: px(height / 2),
+        text,
+        anchor: 'middle',
+        baseline: 'middle',
+        fill: state === 'error' ? 'var(--skdx-color-text-danger)' : CHART_COLORS.label,
+    });
+    return { ...canvas(input, width, height), shapes, tooltip: false };
 }
 
 /*
@@ -285,20 +502,49 @@ function hoverTooltip(target, svg, clientX, clientY, width, height) {
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
 /** Grid, axis line and tick labels of an axis frame, as shapes. */
-function frameShapes(frame) {
+function frameShapes(frame, options = {}) {
     const { plot, xTicks, yTicks, baseline } = frame;
     const right = plot.x + plot.width;
-    return [
-        ...yTicks.map((t) => ({
+    const bottom = plot.y + plot.height;
+    const shapes = [];
+    if (options.horizontal) {
+        // Value ticks along the bottom with vertical grid lines; category labels on the left.
+        for (const t of yTicks)
+            shapes.push({
+                kind: 'line',
+                part: 'grid',
+                x1: t.pos,
+                x2: t.pos,
+                y1: plot.y,
+                y2: bottom,
+                stroke: CHART_COLORS.grid,
+            });
+        shapes.push({
             kind: 'line',
-            part: 'grid',
-            x1: plot.x,
-            x2: right,
-            y1: t.pos,
-            y2: t.pos,
-            stroke: CHART_COLORS.grid,
-        })),
-        {
+            part: 'axis',
+            x1: baseline,
+            x2: baseline,
+            y1: plot.y,
+            y2: bottom,
+            stroke: CHART_COLORS.axis,
+        });
+        for (const t of yTicks)
+            shapes.push(label(t.pos, bottom + 20, t.label, { part: 'x-label', anchor: 'middle' }));
+        for (const t of xTicks)
+            shapes.push(label(plot.x - 8, t.pos, t.label, { part: 'y-label', anchor: 'end', baseline: 'middle' }));
+    }
+    else {
+        for (const t of yTicks)
+            shapes.push({
+                kind: 'line',
+                part: 'grid',
+                x1: plot.x,
+                x2: right,
+                y1: t.pos,
+                y2: t.pos,
+                stroke: CHART_COLORS.grid,
+            });
+        shapes.push({
             kind: 'line',
             part: 'axis',
             x1: plot.x,
@@ -306,109 +552,165 @@ function frameShapes(frame) {
             y1: baseline,
             y2: baseline,
             stroke: CHART_COLORS.axis,
-        },
-        ...yTicks.map((t) => ({
-            kind: 'text',
-            part: 'y-label',
-            x: plot.x - 8,
-            y: t.pos,
-            text: t.label,
-            anchor: 'end',
-            baseline: 'middle',
-            fill: CHART_COLORS.label,
-        })),
-        ...xTicks.map((t) => ({
-            kind: 'text',
-            part: 'x-label',
-            x: t.pos,
-            y: plot.y + plot.height + 20,
-            text: t.label,
+        });
+        for (const t of yTicks)
+            shapes.push(label(plot.x - 8, t.pos, t.label, { part: 'y-label', anchor: 'end', baseline: 'middle' }));
+        for (const t of options.rightTicks ?? [])
+            shapes.push(label(right + 8, t.pos, t.label, {
+                part: 'y-label-right',
+                anchor: 'start',
+                baseline: 'middle',
+            }));
+        for (const t of xTicks)
+            shapes.push(label(t.pos, bottom + 20, t.label, { part: 'x-label', anchor: 'middle' }));
+    }
+    if (options.xLabel)
+        shapes.push(label(px(plot.x + plot.width / 2), frame.height - 4, options.xLabel, {
+            part: 'axis-title',
             anchor: 'middle',
-            fill: CHART_COLORS.label,
-        })),
-    ];
+        }));
+    if (options.yLabel)
+        shapes.push(label(4, plot.y - 6, options.yLabel, { part: 'axis-title', anchor: 'start' }));
+    if (options.rightLabel)
+        shapes.push(label(frame.width - 4, plot.y - 6, options.rightLabel, { part: 'axis-title', anchor: 'end' }));
+    return shapes;
 }
-const label = (x, y, text, extra = {}) => ({
-    kind: 'text',
-    part: 'label',
-    x,
-    y,
-    text,
-    fill: CHART_COLORS.label,
-    ...extra,
-});
+const label = (x, y, text, extra = {}) => ({ kind: 'text', part: 'label', x, y, text, fill: CHART_COLORS.label, ...extra });
 /** A dot with its native tooltip. */
-const point = (cx, cy, r, fill, title) => ({
-    kind: 'circle',
-    part: 'point',
-    cx,
-    cy,
-    r,
-    fill,
-    title,
-});
+const point = (cx, cy, r, fill, title, item) => ({ kind: 'circle', part: 'point', cx, cy, r, fill, title, item });
 
 /*
  * Copyright (c) 2026 SkandaDX
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-function layoutBarChart(input) {
-    const yExtent = input.stacked ? stackedExtent(input) : extent(values(input), true);
-    const { frame, x, y, categories } = buildFrame(input, yExtent);
-    const bars = [];
-    // Running stack tops per category, positives up and negatives down.
-    const up = new Array(categories.length).fill(0);
-    const down = new Array(categories.length).fill(0);
-    const groupWidth = input.stacked ? x.bandwidth : x.bandwidth / Math.max(1, input.series.length);
-    input.series.forEach((s, si) => {
-        const color = seriesColor(si, s.color);
-        categories.forEach((category, ci) => {
-            const value = s.data[ci];
-            if (value === undefined)
-                return;
-            let from = 0;
-            let to = value;
-            if (input.stacked) {
-                const stack = value >= 0 ? up : down;
-                from = stack[ci];
-                to = from + value;
-                stack[ci] = to;
+/**
+ * Lines and bands in data coordinates, drawn behind the marks: targets, SLAs, budgets,
+ * forecast periods, healthy ranges. Each carries its label at the plot edge.
+ */
+function referenceShapes(refs, s) {
+    const shapes = [];
+    const { plot } = s;
+    const right = plot.x + plot.width;
+    const bottom = plot.y + plot.height;
+    const clampX = (v) => Math.max(plot.x, Math.min(right, v));
+    const clampY = (v) => Math.max(plot.y, Math.min(bottom, v));
+    for (const r of refs ?? []) {
+        const color = variantColor(r.variant);
+        const meta = { part: 'reference-label', fill: color };
+        // Under horizontal orientation the value axis is x, so y references become vertical.
+        const yAsX = s.horizontal === true;
+        if ('y' in r) {
+            const p = px(s.y(r.y, r.axis ?? 'left'));
+            if (yAsX) {
+                const x = clampX(p);
+                shapes.push(...vline(x, plot.y, bottom, color, r.label, meta));
             }
-            const y0 = y(from);
-            const y1 = y(to);
-            bars.push({
-                kind: 'rect',
-                part: 'bar',
-                x: px(x.start(ci) + (input.stacked ? 0 : si * groupWidth)),
-                y: px(Math.min(y0, y1)),
-                width: px(groupWidth),
-                height: px(Math.abs(y1 - y0)),
-                fill: color,
-                title: markTitle(s.name, category, value),
-            });
-        });
-    });
-    return { ...frame, shapes: [...frameShapes(frame), ...bars, ...frame.shapes] };
-}
-function stackedExtent(input) {
-    let min = 0;
-    let max = 0;
-    const count = Math.max(0, ...input.series.map((s) => s.data.length));
-    for (let ci = 0; ci < count; ci++) {
-        let up = 0;
-        let down = 0;
-        for (const s of input.series) {
-            const v = s.data[ci] ?? 0;
-            if (v >= 0)
-                up += v;
+            else {
+                const y = clampY(p);
+                shapes.push(...hline(plot.x, right, y, color, r.label, meta));
+            }
+        }
+        else if ('x' in r) {
+            const p = s.x(r.x);
+            if (p === undefined)
+                continue;
+            if (yAsX)
+                shapes.push(...hline(plot.x, right, clampY(px(p)), color, r.label, meta));
+            else
+                shapes.push(...vline(clampX(px(p)), plot.y, bottom, color, r.label, meta));
+        }
+        else if ('y1' in r) {
+            const a = px(s.y(r.y1, r.axis ?? 'left'));
+            const b = px(s.y(r.y2, r.axis ?? 'left'));
+            if (yAsX)
+                shapes.push(...vband(clampX(Math.min(a, b)), clampX(Math.max(a, b)), plot, color, r.label));
             else
-                down += v;
+                shapes.push(...hband(clampY(Math.min(a, b)), clampY(Math.max(a, b)), plot, color, r.label));
+        }
+        else {
+            const a = s.x(r.x1);
+            const b = s.x(r.x2);
+            if (a === undefined || b === undefined)
+                continue;
+            const lo = px(Math.min(a, b));
+            const hi = px(Math.max(a, b));
+            if (yAsX)
+                shapes.push(...hband(clampY(lo), clampY(hi), plot, color, r.label));
+            else
+                shapes.push(...vband(clampX(lo), clampX(hi), plot, color, r.label));
         }
-        min = Math.min(min, down);
-        max = Math.max(max, up);
     }
-    return [min, max];
+    return shapes;
+}
+function hline(x1, x2, y, stroke, text, extra) {
+    const line = {
+        kind: 'line',
+        part: 'reference',
+        x1,
+        x2,
+        y1: y,
+        y2: y,
+        stroke,
+        dash: '6 4',
+        strokeWidth: 1.5,
+        title: text,
+    };
+    return text ? [line, label(x2 - 4, y - 5, text, { ...extra, anchor: 'end' })] : [line];
+}
+function vline(x, y1, y2, stroke, text, extra) {
+    const line = {
+        kind: 'line',
+        part: 'reference',
+        x1: x,
+        x2: x,
+        y1,
+        y2,
+        stroke,
+        dash: '6 4',
+        strokeWidth: 1.5,
+        title: text,
+    };
+    return text ? [line, label(x + 4, y1 + 10, text, { ...extra, anchor: 'start' })] : [line];
+}
+function hband(y1, y2, plot, fill, text) {
+    const band = {
+        kind: 'rect',
+        part: 'reference-area',
+        x: plot.x,
+        y: y1,
+        width: plot.width,
+        height: px(Math.max(0, y2 - y1)),
+        fill,
+        opacity: 0.12,
+        title: text,
+    };
+    return text
+        ? [
+            band,
+            label(plot.x + plot.width - 4, y1 + 12, text, {
+                part: 'reference-label',
+                fill,
+                anchor: 'end',
+            }),
+        ]
+        : [band];
+}
+function vband(x1, x2, plot, fill, text) {
+    const band = {
+        kind: 'rect',
+        part: 'reference-area',
+        x: x1,
+        y: plot.y,
+        width: px(Math.max(0, x2 - x1)),
+        height: plot.height,
+        fill,
+        opacity: 0.12,
+        title: text,
+    };
+    return text
+        ? [band, label(x1 + 4, plot.y + 12, text, { part: 'reference-label', fill, anchor: 'start' })]
+        : [band];
 }
 
 /*
@@ -416,52 +718,546 @@ function stackedExtent(input) {
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-/** A stroke per series and a dot per value; `close` turns a stroke into a filled area. */
-function polylines(input, { frame, x, y, categories }, area) {
-    const points = [];
-    const lines = [];
+/** Markers are drawn up to this many visible points per series. */
+const MARKER_LIMIT = 100;
+/** Per-point titles (and so per-point tooltips) are emitted up to this many visible points per series. */
+const TITLE_LIMIT = 2000;
+const BRUSH_HEIGHT$1 = 32;
+const BRUSH_GAP$1 = 28;
+/** Bars, lines, areas and range bands that share one category axis and up to two value axes. */
+function layoutCartesian(input, defaultType) {
+    const format = makeFormatter(input.format);
+    const { series: all, categories: cats } = transform(input, defaultType, format);
+    const count = Math.max(cats.length, ...all.map((s) => Math.max(s.data.length, s.low.length)));
+    const empty = all.every((s) => finite(s.data).length === 0 && finite(s.high).length === 0);
+    const state = stateCanvas(input, empty);
+    if (state)
+        return state;
+    // A time or linear axis places numeric/date categories proportionally instead of in even slots.
+    const xType = input.xAxis?.type ?? 'category';
+    const continuous = xType !== 'category' && cats.length > 0 && cats.every((c) => typeof c !== 'string');
+    const xValues = continuous ? cats.map(categoryValue) : [];
+    const [xMin, xMax] = minMax(xValues);
+    const xFormat = input.xAxis?.format ??
+        (xType === 'time'
+            ? { style: xMax - xMin < 2 * 86_400_000 ? 'time' : 'date' }
+            : undefined);
+    const labels = Array.from({ length: count }, (_, i) => {
+        const c = cats[i];
+        return c === undefined ? String(i + 1) : categoryLabel(c, xFormat);
+    });
+    const zoom = clampZoom$1(input.zoom, count);
+    const visible = Array.from({ length: zoom.end - zoom.start }, (_, i) => zoom.start + i);
+    const horizontal = input.orientation === 'horizontal';
+    const shown = all.map((s) => ({ ...s, hidden: s.hidden || (horizontal && s.kind !== 'bar') }));
+    const drawn = shown.filter((s) => !s.hidden);
+    const percent = input.stacked === 'percent';
+    // Stack offsets: per group and category, the running top for positives and bottom for negatives.
+    const stackFrom = new Map();
+    const stackTo = new Map();
+    const groups = new Map();
+    for (const s of drawn)
+        if (s.stack !== undefined && s.kind !== 'range')
+            groups.set(s.stack, [...(groups.get(s.stack) ?? []), s]);
+    for (const members of groups.values()) {
+        const up = new Array(count).fill(0);
+        const down = new Array(count).fill(0);
+        const totals = new Array(count).fill(0);
+        if (percent)
+            for (const s of members)
+                s.data.forEach((v, ci) => {
+                    if (isFinite(v))
+                        totals[ci] = totals[ci] + Math.abs(v);
+                });
+        for (const s of members) {
+            const from = [];
+            const to = [];
+            for (let ci = 0; ci < count; ci++) {
+                const raw = s.data[ci];
+                if (!isFinite(raw)) {
+                    from.push(null);
+                    to.push(null);
+                    continue;
+                }
+                const t = totals[ci];
+                const v = percent ? (t > 0 ? raw / t : 0) : raw;
+                const stack = v >= 0 ? up : down;
+                from.push(stack[ci]);
+                stack[ci] = stack[ci] + v;
+                to.push(stack[ci]);
+            }
+            stackFrom.set(s, from);
+            stackTo.set(s, to);
+        }
+    }
+    const valuesOf = (s) => s.kind === 'range'
+        ? { from: s.low, to: s.high }
+        : { from: stackFrom.get(s) ?? new Array(count).fill(0), to: stackTo.get(s) ?? s.data };
+    // Value extents per axis over the visible window; bars and areas grow the domain to include zero.
+    const extentOf = (side) => {
+        const values = [];
+        let zero = false;
+        for (const s of drawn) {
+            if (s.axis !== side)
+                continue;
+            const { from, to } = valuesOf(s);
+            for (const i of visible) {
+                const a = to[i];
+                if (isFinite(a))
+                    values.push(a);
+                if (s.kind === 'range' || s.stack !== undefined) {
+                    const b = from[i];
+                    if (isFinite(b))
+                        values.push(b);
+                }
+            }
+            if (s.kind === 'bar' || s.kind === 'area')
+                zero = true;
+        }
+        const [min, max] = minMax(values);
+        return zero ? [Math.min(0, min), Math.max(0, max)] : [min, max];
+    };
+    const rightUsed = input.rightAxis !== undefined || drawn.some((s) => s.axis === 'right');
+    const { width, height } = size(input);
+    const brushRoom = input.brush ? BRUSH_HEIGHT$1 + BRUSH_GAP$1 : 0;
+    const widestCategory = visible.reduce((w, i) => Math.max(w, labels[i].length), 0) * CHAR;
+    const margin = {
+        top: MARGIN$1.top + legendTop(input) + (input.yAxis?.label || input.rightAxis?.label ? 12 : 0),
+        right: rightUsed ? MARGIN$1.left : MARGIN$1.right,
+        bottom: MARGIN$1.bottom + brushRoom + (input.xAxis?.label ? 14 : 0),
+        left: horizontal ? Math.max(MARGIN$1.left, widestCategory + 16) : MARGIN$1.left,
+    };
+    const plot = plotBox(width, height, margin);
+    const valueRange = horizontal
+        ? [plot.x, plot.x + plot.width]
+        : [plot.y + plot.height, plot.y];
+    const bandRange = horizontal
+        ? [plot.y, plot.y + plot.height]
+        : [plot.x, plot.x + plot.width];
+    const percentFormat = percent ? { style: 'percent' } : undefined;
+    const left = axis(extentOf('left'), valueRange, { format: percentFormat, ...input.yAxis }, input.format);
+    const right = rightUsed
+        ? axis(extentOf('right'), valueRange, { format: percentFormat, ...input.rightAxis }, input.format)
+        : undefined;
+    const value = (v, side) => (side === 'right' && right ? right : left).scale(v);
+    const band = bandScale(visible.length, bandRange);
+    // Continuous: the visible values map linearly onto the band range, padded by half the smallest
+    // gap so edge bars stay inside; the bar slot is that smallest gap.
+    const visibleX = visible.map((i) => xValues[i]);
+    const sortedX = [...visibleX].sort((a, b) => a - b);
+    let minGap = Infinity;
+    for (let k = 1; k < sortedX.length; k++)
+        minGap = Math.min(minGap, sortedX[k] - sortedX[k - 1]);
+    const [vMin, vMax] = minMax(visibleX);
+    const pad = minGap === Infinity ? Math.max(1, Math.abs(vMax) * 0.05 || 1) : minGap / 2;
+    const xScale = linearScale([vMin - pad, vMax + pad], bandRange);
+    const center = (vi) => px(continuous ? xScale(visibleX[vi]) : band.center(vi));
+    const slot = continuous
+        ? Math.abs(xScale(vMin + (minGap === Infinity ? pad : minGap)) - xScale(vMin)) * 0.8
+        : band.bandwidth;
+    const slotStart = (vi) => (continuous ? center(vi) - slot / 2 : band.start(vi));
+    const categoryTicks = continuous
+        ? (xType === 'time' ? timeTicks(vMin - pad, vMax + pad) : niceTicks(vMin - pad, vMax + pad))
+            .filter((v) => v >= vMin - pad && v <= vMax + pad)
+            .map((v) => ({ pos: px(xScale(v)), label: categoryLabel(v, xFormat) }))
+        : thinTicks(visible.map((i, vi) => ({ pos: center(vi), label: labels[i] })), horizontal ? Infinity : plot.width);
+    const frame = {
+        ...canvas(input, width, height, all.map((s) => ({ name: s.name, color: s.color }))),
+        plot,
+        xTicks: categoryTicks,
+        yTicks: left.ticks,
+        baseline: left.zero,
+    };
+    const shapes = frameShapes(frame, {
+        horizontal,
+        rightTicks: right?.ticks,
+        xLabel: input.xAxis?.label,
+        yLabel: input.yAxis?.label,
+        rightLabel: input.rightAxis?.label,
+    });
+    // References sit behind the marks. `x` references name a category (label, value or index).
+    const indexOfCategory = (c) => {
+        if (typeof c === 'number' && cats.every((x) => typeof x === 'string'))
+            return c;
+        const target = typeof c === 'string' ? c : categoryValue(c);
+        for (let i = 0; i < count; i++) {
+            const cat = cats[i];
+            if (cat === undefined)
+                continue;
+            if (typeof target === 'string'
+                ? cat === target || labels[i] === target
+                : categoryValue(cat) === target)
+                return i;
+        }
+        return undefined;
+    };
+    shapes.push(...referenceShapes(input.references, {
+        plot,
+        horizontal,
+        x: (c) => {
+            if (continuous && typeof c !== 'string')
+                return xScale(categoryValue(c));
+            const i = indexOfCategory(c);
+            const vi = i === undefined ? -1 : visible.indexOf(i);
+            return vi < 0 ? undefined : band.center(vi);
+        },
+        y: value,
+    }));
+    // One slot per plain bar series and one per bar stack group, side by side inside the band.
+    const slots = [];
+    const slotOf = new Map();
+    for (const s of drawn) {
+        if (s.kind !== 'bar')
+            continue;
+        const key = s.stack ?? s;
+        let at = slots.indexOf(key);
+        if (at < 0)
+            at = slots.push(key) - 1;
+        slotOf.set(s, at);
+    }
+    const groupWidth = slot / Math.max(1, slots.length);
     const areas = [];
-    input.series.forEach((s, si) => {
-        const color = seriesColor(si, s.color);
-        const coords = s.data.map((value, ci) => {
-            const p = { x: px(x.center(ci)), y: px(y(value)) };
-            points.push(point(p.x, p.y, 3, color, markTitle(s.name, categories[ci], value)));
-            return p;
-        });
-        const d = pathThrough(coords, input.curve);
-        lines.push({
-            kind: 'path',
-            part: 'line',
-            d,
-            stroke: color,
-            strokeWidth: 2,
-            strokeLinecap: 'round',
-            strokeLinejoin: 'round',
+    const bars = [];
+    const lines = [];
+    const points = [];
+    const texts = [];
+    const fmt = (s) => (s.axis === 'right' && right ? right : left).format;
+    const itemOf = (s, i, v, title) => ({
+        label: title,
+        series: s.name,
+        category: labels[i],
+        index: i,
+        value: v,
+    });
+    for (const s of drawn) {
+        const { from, to } = valuesOf(s);
+        const f = fmt(s);
+        const titled = visible.length <= TITLE_LIMIT;
+        if (s.kind === 'bar') {
+            visible.forEach((i, vi) => {
+                const raw = s.data[i];
+                const a = from[i];
+                const b = to[i];
+                if (!isFinite(raw) || !isFinite(a) || !isFinite(b))
+                    return;
+                const v0 = value(a, s.axis);
+                const v1 = value(b, s.axis);
+                const b0 = slotStart(vi) + slotOf.get(s) * groupWidth;
+                const title = markTitle(s.name, labels[i], percent ? b - a : raw, percent ? f : f);
+                const rect = horizontal
+                    ? {
+                        kind: 'rect',
+                        part: 'bar',
+                        x: px(Math.min(v0, v1)),
+                        y: px(b0),
+                        width: px(Math.abs(v1 - v0)),
+                        height: px(groupWidth),
+                        fill: s.color,
+                        rx: input.radius,
+                        title: titled ? title : undefined,
+                        item: itemOf(s, i, raw, title),
+                    }
+                    : {
+                        kind: 'rect',
+                        part: 'bar',
+                        x: px(b0),
+                        y: px(Math.min(v0, v1)),
+                        width: px(groupWidth),
+                        height: px(Math.abs(v1 - v0)),
+                        fill: s.color,
+                        rx: input.radius,
+                        title: titled ? title : undefined,
+                        item: itemOf(s, i, raw, title),
+                    };
+                bars.push(rect);
+                if (input.labels) {
+                    const text = f(percent ? b - a : raw);
+                    texts.push(horizontal
+                        ? label(px(Math.max(v0, v1) + 4), px(b0 + groupWidth / 2), text, {
+                            baseline: 'middle',
+                        })
+                        : label(px(b0 + groupWidth / 2), px(Math.min(v0, v1) - 4), text, {
+                            anchor: 'middle',
+                        }));
+                }
+            });
+            continue;
+        }
+        // Lines, areas and ranges: polylines broken at gaps unless `connectNulls`.
+        const segments = [];
+        let current = [];
+        visible.forEach((i, vi) => {
+            const a = from[i];
+            const b = to[i];
+            if (!isFinite(b) || !isFinite(a)) {
+                if (!input.connectNulls && current.length) {
+                    segments.push(current);
+                    current = [];
+                }
+                return;
+            }
+            current.push({ x: center(vi), y: px(value(b, s.axis)), y0: px(value(a, s.axis)), i });
         });
-        if (area) {
-            const first = coords[0];
-            const last = coords[coords.length - 1];
-            areas.push({
+        if (current.length)
+            segments.push(current);
+        const showMarkers = s.markers ?? visible.length <= MARKER_LIMIT;
+        for (const seg of segments) {
+            const d = pathThrough(seg, s.curve);
+            if (s.kind === 'range') {
+                const lower = pathThrough([...seg].reverse().map((p) => ({ x: p.x, y: p.y0 })), s.curve);
+                areas.push({
+                    kind: 'path',
+                    part: 'range',
+                    d: `${d}L${lower.slice(1)}Z`,
+                    fill: s.color,
+                    fillOpacity: 0.2,
+                    title: s.name,
+                });
+                continue;
+            }
+            if (s.kind === 'area') {
+                const bottom = s.stack !== undefined
+                    ? pathThrough([...seg].reverse().map((p) => ({ x: p.x, y: p.y0 })), s.curve).slice(1)
+                    : `${seg[seg.length - 1]?.x} ${left.zero}L${seg[0]?.x} ${left.zero}`;
+                areas.push({
+                    kind: 'path',
+                    part: 'area',
+                    d: `${d}L${bottom}Z`,
+                    fill: s.color,
+                    fillOpacity: 0.25,
+                });
+            }
+            lines.push({
                 kind: 'path',
-                part: 'area',
-                d: d && first && last
-                    ? `${d}L${last.x} ${frame.baseline}L${first.x} ${frame.baseline}Z`
-                    : '',
-                fill: color,
-                fillOpacity: 0.25,
+                part: 'line',
+                d,
+                stroke: s.color,
+                strokeWidth: 2,
+                strokeLinecap: 'round',
+                strokeLinejoin: 'round',
+                dash: s.dash,
             });
         }
-    });
+        if (s.kind !== 'range')
+            for (const seg of segments)
+                for (const p of seg) {
+                    if (!showMarkers && !titled && !input.labels)
+                        continue;
+                    const raw = s.data[p.i];
+                    const shownValue = percent ? to[p.i] - from[p.i] : raw;
+                    const title = markTitle(s.name, labels[p.i], shownValue, f);
+                    if (showMarkers || titled)
+                        points.push({
+                            ...point(p.x, p.y, showMarkers ? 3 : 0.01, s.color, titled ? title : undefined, itemOf(s, p.i, raw, title)),
+                            // Invisible anchors keep click and keyboard access when markers are off.
+                            part: showMarkers ? 'point' : 'anchor',
+                        });
+                    if (input.labels)
+                        texts.push(label(p.x, p.y - 8, f(shownValue), { anchor: 'middle' }));
+                }
+    }
+    const hit = {
+        plot,
+        xs: horizontal ? [] : visible.map((_, vi) => center(vi)),
+        rows: visible.map((i) => [
+            labels[i],
+            ...drawn.map((s) => {
+                const f = fmt(s);
+                if (s.kind === 'range') {
+                    const lo = s.low[i];
+                    const hi = s.high[i];
+                    return `${s.name}: ${isFinite(lo) && isFinite(hi) ? `${f(lo)} – ${f(hi)}` : '—'}`;
+                }
+                const v = s.data[i];
+                return `${s.name}: ${isFinite(v) ? f(percent ? (stackTo.get(s)?.[i] ?? 0) - (stackFrom.get(s)?.[i] ?? 0) : v) : '—'}`;
+            }),
+        ]),
+        count,
+        zoom,
+        crosshair: input.crosshair ?? false,
+    };
+    const brush = [];
+    if (input.brush && !horizontal) {
+        const box = {
+            x: plot.x,
+            y: plot.y + plot.height + BRUSH_GAP$1,
+            width: plot.width,
+            height: BRUSH_HEIGHT$1,
+        };
+        const first = drawn.find((s) => s.kind !== 'range');
+        const window = {
+            x: px(box.x + (zoom.start / Math.max(1, count)) * box.width),
+            y: box.y,
+            width: px(((zoom.end - zoom.start) / Math.max(1, count)) * box.width),
+            height: box.height,
+        };
+        brush.push({
+            kind: 'rect',
+            part: 'brush',
+            x: box.x,
+            y: box.y,
+            width: box.width,
+            height: box.height,
+            fill: 'var(--skdx-color-surface-sunken)',
+            stroke: CHART_COLORS.grid,
+        });
+        if (first) {
+            const values = finite(first.data);
+            const [lo, hi] = minMax(values);
+            const step = count > 1 ? box.width / (count - 1) : 0;
+            const pts = first.data.flatMap((v, i) => isFinite(v)
+                ? [
+                    {
+                        x: px(box.x + i * step),
+                        y: px(box.y +
+                            box.height -
+                            (hi === lo ? 0.5 : (v - lo) / (hi - lo)) * (box.height - 4) -
+                            2),
+                    },
+                ]
+                : []);
+            const d = pathThrough(pts);
+            if (pts.length > 1)
+                brush.push({
+                    kind: 'path',
+                    part: 'brush-series',
+                    d: `${d}L${pts[pts.length - 1]?.x} ${box.y + box.height}L${pts[0]?.x} ${box.y + box.height}Z`,
+                    fill: first.color,
+                    fillOpacity: 0.3,
+                });
+        }
+        brush.push({
+            kind: 'rect',
+            part: 'brush-window',
+            ...window,
+            fill: 'var(--skdx-color-primary-500)',
+            opacity: 0.15,
+            stroke: CHART_COLORS.axis,
+        }, {
+            kind: 'rect',
+            part: 'brush-handle',
+            x: px(window.x - 3),
+            y: box.y + 8,
+            width: 6,
+            height: box.height - 16,
+            fill: CHART_COLORS.axis,
+            rx: 2,
+        }, {
+            kind: 'rect',
+            part: 'brush-handle',
+            x: px(window.x + window.width - 3),
+            y: box.y + 8,
+            width: 6,
+            height: box.height - 16,
+            fill: CHART_COLORS.axis,
+            rx: 2,
+        });
+        hit.brush = { box, window };
+    }
     return {
         ...frame,
-        shapes: [...frameShapes(frame), ...areas, ...lines, ...points, ...frame.shapes],
+        shapes: [
+            ...shapes,
+            ...areas,
+            ...bars,
+            ...lines,
+            ...points,
+            ...texts,
+            ...brush,
+            ...frame.shapes,
+        ],
+        hit,
     };
 }
-function layoutLineChart(input) {
-    return polylines(input, buildFrame(input, extent(values(input), false)), false);
+function clampZoom$1(zoom, count) {
+    if (!zoom || count < 2)
+        return { start: 0, end: count };
+    const start = Math.max(0, Math.min(count - 1, Math.floor(zoom.start)));
+    const end = Math.max(start + 1, Math.min(count, Math.ceil(zoom.end)));
+    return end - start < 2 && count >= 2
+        ? { start: Math.min(start, count - 2), end: Math.min(start, count - 2) + 2 }
+        : { start, end };
 }
-function layoutAreaChart(input) {
-    return polylines(input, buildFrame(input, extent(values(input), true)), true);
+/** Resolves series roles and applies `transform`, `sort` and chart-level stacking. */
+function transform(input, fallback, format) {
+    const defaultType = (s) => s.type ?? fallback;
+    let categories = input.categories ?? [];
+    let series = input.series.map((s, index) => {
+        const kind = defaultType(s);
+        const stacked = input.stacked ? true : undefined;
+        const own = s.type === 'range' ? undefined : s.stack;
+        const stack = own === false ? undefined : own === true || (own === undefined && stacked) ? `${kind}` : own;
+        return {
+            name: s.name,
+            color: colorOf(input, index, s.color),
+            axis: s.axis ?? 'left',
+            hidden: isHidden(input, s.name),
+            index,
+            kind,
+            data: s.type === 'range' ? [] : s.data,
+            low: s.type === 'range' ? s.low : [],
+            high: s.type === 'range' ? s.high : [],
+            curve: s.curve ?? input.curve ?? 'linear',
+            dash: s.type === 'range' ? undefined : s.dash,
+            markers: s.type === 'range' ? undefined : s.markers,
+            stack: kind === 'range' || kind === 'line' ? undefined : stack,
+        };
+    });
+    if (input.transform === 'histogram') {
+        const samples = series.flatMap((s) => finite(s.data));
+        const [lo, hi] = input.binDomain ?? minMax(samples);
+        const n = Math.max(1, samples.length);
+        const bins = Math.max(1, input.bins ?? Math.ceil(Math.log2(n) + 1));
+        const width = input.binWidth ?? (hi > lo ? (hi - lo) / bins : 1);
+        const binCount = hi > lo ? Math.max(1, Math.ceil((hi - lo) / width - 1e-9)) : 1;
+        categories = Array.from({ length: binCount }, (_, i) => `${format(lo + i * width)}–${format(lo + (i + 1) * width)}`);
+        series = series.map((s) => {
+            const counts = new Array(binCount).fill(0);
+            const own = finite(s.data);
+            for (const v of own) {
+                if (v < lo || v > hi)
+                    continue;
+                const b = Math.min(binCount - 1, Math.floor((v - lo) / width));
+                counts[b] = counts[b] + 1;
+            }
+            let running = 0;
+            const data = counts.map((c) => {
+                if (input.binMode === 'density')
+                    return own.length ? c / (own.length * width) : 0;
+                if (input.binMode === 'cumulative')
+                    return (running += c);
+                return c;
+            });
+            return { ...s, data };
+        });
+    }
+    else if (input.transform === 'cumulative') {
+        series = series.map((s) => {
+            let running = 0;
+            return { ...s, data: s.data.map((v) => (isFinite(v) ? (running += v) : running)) };
+        });
+    }
+    if (input.sort) {
+        const first = series.find((s) => !s.hidden && s.kind !== 'range') ?? series[0];
+        const n = Math.max(categories.length, ...series.map((s) => Math.max(s.data.length, s.low.length)));
+        const order = Array.from({ length: n }, (_, i) => i).sort((a, b) => {
+            const va = first?.data[a] ?? first?.high[a];
+            const vb = first?.data[b] ?? first?.high[b];
+            const x = isFinite(va) ? va : -Infinity;
+            const y = isFinite(vb) ? vb : -Infinity;
+            return input.sort === 'asc' ? x - y : y - x;
+        });
+        const pick = (arr) => (arr.length ? order.map((i) => arr[i] ?? null) : arr);
+        const full = Array.from({ length: n }, (_, i) => categories[i] ?? String(i + 1));
+        categories = order.map((i) => full[i]);
+        series = series.map((s) => ({
+            ...s,
+            data: pick(s.data),
+            low: pick(s.low),
+            high: pick(s.high),
+        }));
+    }
+    return { series, categories };
 }
 
 /*
@@ -469,20 +1265,126 @@ function layoutAreaChart(input) {
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
+/** Grouped, stacked, horizontal or histogram bars; series may also be lines, areas or ranges. */
+const layoutBarChart = (input) => layoutCartesian(input, 'bar');
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+/** One polyline per series with a dot per value; series may also be bars, areas or ranges. */
+const layoutLineChart = (input) => layoutCartesian(input, 'line');
+/** Filled (optionally stacked) areas down to zero; series may also be bars, lines or ranges. */
+const layoutAreaChart = (input) => layoutCartesian(input, 'area');
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const isPair = (p) => isFinite(p[0]) && isFinite(p[1]);
 function layoutScatterChart(input) {
+    const shown = input.series.map((s, i) => ({
+        ...s,
+        index: i,
+        color: colorOf(input, i, s.color),
+        data: isHidden(input, s.name) ? [] : s.data.filter(isPair),
+    }));
+    const pairs = shown.flatMap((s) => s.data);
+    const state = stateCanvas(input, pairs.length === 0);
+    if (state)
+        return state;
     const { width, height } = size(input);
-    const plot = plotBox(width, height, { ...MARGIN$1, top: MARGIN$1.top + legendTop(input) });
-    const pairs = input.series.flatMap((s) => s.data);
-    const x = axis(extent(pairs.map((p) => p[0]), false), [plot.x, plot.x + plot.width]);
-    const y = axis(extent(pairs.map((p) => p[1]), false), [plot.y + plot.height, plot.y]);
-    const legend = input.series.map((s, i) => ({ name: s.name, color: seriesColor(i, s.color) }));
-    const c = canvas(input, width, height, legend);
-    const points = input.series.flatMap((s, si) => {
-        const color = seriesColor(si, s.color);
-        return s.data.map(([vx, vy]) => point(px(x.scale(vx)), px(y.scale(vy)), 3, color, `${s.name}: ${formatValue(vx)}, ${formatValue(vy)}`));
+    const plot = plotBox(width, height, {
+        ...MARGIN$1,
+        top: MARGIN$1.top + legendTop(input) + (input.yAxis?.label ? 12 : 0),
+        bottom: MARGIN$1.bottom + (input.xAxis?.label ? 14 : 0),
     });
+    const x = axis(extent(pairs.map((p) => p[0]), false), [plot.x, plot.x + plot.width], input.xAxis ?? {}, input.format);
+    const y = axis(extent(pairs.map((p) => p[1]), false), [plot.y + plot.height, plot.y], input.yAxis ?? {}, input.format);
+    const [sMin, sMax] = minMax(pairs.map((p) => p[2]));
+    const [rMin, rMax] = input.sizeRange ?? [3, 18];
+    // Bubble area, not radius, follows the value, so a doubled value reads as doubled.
+    const radius = (s) => !isFinite(s)
+        ? 3
+        : sMax === sMin
+            ? (rMin + rMax) / 2
+            : rMin + Math.sqrt((s - sMin) / (sMax - sMin)) * (rMax - rMin);
+    const legend = input.series.map((s, i) => ({ name: s.name, color: colorOf(input, i, s.color) }));
+    const c = canvas(input, width, height, legend);
+    const marks = [];
+    const trends = [];
+    for (const s of shown) {
+        const bubbles = s.data.some((p) => p.length > 2);
+        for (const [vx, vy, vs] of s.data) {
+            const title = `${s.name}: ${x.format(vx)}, ${y.format(vy)}${isFinite(vs) ? ` (${y.format(vs)})` : ''}`;
+            const r = bubbles ? radius(vs) : 3;
+            marks.push({
+                ...point(px(x.scale(vx)), px(y.scale(vy)), px(r), s.color, title, {
+                    label: title,
+                    series: s.name,
+                    value: vy,
+                }),
+                part: bubbles ? 'bubble' : 'point',
+            });
+        }
+        if (input.trendline && s.data.length >= 2) {
+            const line = leastSquares(s.data.map(([a, b]) => [a, b]));
+            if (line) {
+                const [x0, x1] = x.domain;
+                trends.push({
+                    kind: 'line',
+                    part: 'trendline',
+                    x1: px(x.scale(x0)),
+                    y1: px(y.scale(line.slope * x0 + line.intercept)),
+                    x2: px(x.scale(x1)),
+                    y2: px(y.scale(line.slope * x1 + line.intercept)),
+                    stroke: s.color,
+                    dash: '5 4',
+                    strokeWidth: 1.5,
+                    title: `${s.name} trend: r² ${line.r2.toFixed(2)}`,
+                });
+            }
+        }
+    }
     const frame = { ...c, plot, xTicks: x.ticks, yTicks: y.ticks, baseline: y.zero };
-    return { ...c, shapes: [...frameShapes(frame), ...points, ...c.shapes] };
+    const references = referenceShapes(input.references, {
+        plot,
+        x: (v) => x.scale(categoryValue(v)),
+        y: (v) => y.scale(v),
+    });
+    return {
+        ...c,
+        shapes: [
+            ...frameShapes(frame, { xLabel: input.xAxis?.label, yLabel: input.yAxis?.label }),
+            ...references,
+            ...(marks.some((m) => m.part === 'bubble')
+                ? marks.map((m) => (m.kind === 'circle' ? { ...m, opacity: 0.7 } : m))
+                : marks),
+            ...trends,
+            ...c.shapes,
+        ],
+    };
+}
+/** Ordinary least squares over `[x, y]` pairs; `undefined` when x is constant. */
+function leastSquares(pairs) {
+    const n = pairs.length;
+    const mx = pairs.reduce((s, p) => s + p[0], 0) / n;
+    const my = pairs.reduce((s, p) => s + p[1], 0) / n;
+    let sxx = 0;
+    let sxy = 0;
+    let syy = 0;
+    for (const [a, b] of pairs) {
+        sxx += (a - mx) ** 2;
+        sxy += (a - mx) * (b - my);
+        syy += (b - my) ** 2;
+    }
+    if (sxx === 0)
+        return undefined;
+    const slope = sxy / sxx;
+    const r2 = syy === 0 ? 1 : (sxy * sxy) / (sxx * syy);
+    return { slope, intercept: my - slope * mx, r2 };
 }
 
 /*
@@ -506,38 +1408,68 @@ function arc(cx, cy, r, r0, a0, a1) {
         : `${outer}L${px(cx)} ${px(cy)}Z`;
 }
 function layoutPieChart(input) {
+    const state = stateCanvas(input, !input.data.some((d) => isFinite(d.value) && d.value > 0), 300, 300);
+    if (state)
+        return state;
+    const format = makeFormatter(input.format);
     const { width, height } = size(input, 300, 300);
     const top = legendTop(input);
+    const start = ((input.startAngle ?? 0) * Math.PI) / 180;
+    const end = ((input.endAngle ?? (input.startAngle ?? 0) + 360) * Math.PI) / 180;
+    const sweep = Math.max(0, Math.min(TAU$2, end - start));
+    // A half circle only needs half the height: centre it on the flat edge.
+    const half = sweep <= Math.PI + 1e-9 && Math.abs(Math.sin(start)) > 0.99;
     const cx = width / 2;
-    const cy = top + (height - top) / 2;
-    const r = Math.max(0, Math.min(width, height - top) / 2 - 8);
+    const r = half
+        ? Math.max(0, Math.min(width / 2, height - top) - 8)
+        : Math.max(0, Math.min(width, height - top) / 2 - 8);
+    const cy = half
+        ? start < 0 || start > Math.PI
+            ? height - 8
+            : top + 8
+        : top + (height - top) / 2;
     const r0 = r * Math.min(0.95, Math.max(0, input.innerRadius ?? 0));
-    const total = input.data.reduce((sum, d) => sum + Math.max(0, d.value), 0);
-    let angle = 0;
+    const shown = input.data.map((d) => ({
+        ...d,
+        value: isFinite(d.value) && !isHidden(input, d.name) ? Math.max(0, d.value) : 0,
+    }));
+    const total = shown.reduce((sum, d) => sum + d.value, 0);
+    let angle = start;
     const labels = [];
-    const slices = input.data.map((d, i) => {
-        const percent = total > 0 ? Math.max(0, d.value) / total : 0;
+    const slices = shown.map((d, i) => {
+        const percent = total > 0 ? d.value / total : 0;
         const a0 = angle;
-        angle += percent * TAU$2;
+        angle += percent * sweep;
+        const share = `${Math.round(percent * 100)}%`;
         if (input.labels && percent > 0.03) {
             const mid = (a0 + angle) / 2;
             const lr = (r + r0) / 2;
-            labels.push(label(px(cx + lr * Math.sin(mid)), px(cy - lr * Math.cos(mid)), `${d.name} ${Math.round(percent * 100)}%`, {
+            labels.push(label(px(cx + lr * Math.sin(mid)), px(cy - lr * Math.cos(mid)), `${d.name} ${share}`, {
                 part: 'slice-label',
                 anchor: 'middle',
                 baseline: 'middle',
                 fill: 'var(--skdx-color-text-on-accent)',
             }));
         }
+        const title = `${d.name}: ${format(d.value)} (${share})`;
         return {
             kind: 'path',
             part: 'slice',
             d: percent > 0 ? arc(cx, cy, r, r0, a0, angle) : '',
-            fill: seriesColor(i, d.color),
-            title: `${d.name}: ${formatValue(d.value)} (${Math.round(percent * 100)}%)`,
+            fill: colorOf(input, i, d.color),
+            title,
+            item: percent > 0 ? { label: title, name: d.name, index: i, value: d.value } : undefined,
         };
     });
-    const c = canvas(input, width, height, input.data.map((d, i) => ({ name: d.name, color: seriesColor(i, d.color) })));
+    if (input.centerLabel)
+        labels.push(label(px(cx), px(half ? cy - 12 : cy), input.centerLabel, {
+            part: 'center-label',
+            anchor: 'middle',
+            baseline: 'middle',
+            fill: 'var(--skdx-color-text-default)',
+            weight: 'bold',
+        }));
+    const c = canvas(input, width, height, input.data.map((d, i) => ({ name: d.name, color: colorOf(input, i, d.color) })));
     return { ...c, shapes: [...slices, ...c.shapes, ...labels] };
 }
 
@@ -547,34 +1479,87 @@ function layoutPieChart(input) {
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
 const PAD$3 = 2;
+/** A small axis-less trend: an area (default), a bare line, or bars; optional extremes and last value. */
 function layoutSparkline(input) {
+    const values = finite(input.data);
+    const state = stateCanvas(input, values.length === 0, 120, 32);
+    if (state)
+        return state;
+    const format = makeFormatter(input.format);
     const { width, height } = size(input, 120, 32);
     const n = input.data.length;
-    const y = linearScale(extent(input.data, false), [height - PAD$3, PAD$3]);
-    const x = (i) => (n < 2 ? width / 2 : PAD$3 + (i / (n - 1)) * (width - 2 * PAD$3));
-    const coords = input.data.map((v, i) => ({ x: px(x(i)), y: px(y(v)) }));
-    const line = pathThrough(coords, input.curve);
-    const last = coords[coords.length - 1];
-    const first = coords[0];
-    const color = seriesColor(0, input.color);
-    return {
-        width,
-        height,
-        tooltip: input.tooltip ?? true,
-        shapes: [
-            {
+    const first = values[0];
+    const last = values[values.length - 1];
+    const lastText = input.lastValue ? format(last) : '';
+    const right = width - PAD$3 - (lastText ? lastText.length * CHAR + 6 : 0);
+    const variant = input.variant ?? 'area';
+    const y = linearScale(extent(values, variant === 'bar'), [height - PAD$3, PAD$3]);
+    const x = (i) => (n < 2 ? (PAD$3 + right) / 2 : PAD$3 + (i / (n - 1)) * (right - PAD$3));
+    const color = input.trend
+        ? last >= first
+            ? CHART_COLORS.positive
+            : CHART_COLORS.negative
+        : colorOf(input, 0, input.color);
+    const shapes = [];
+    const coords = input.data.flatMap((v, i) => isFinite(v) ? [{ x: px(x(i)), y: px(y(v)), v, i }] : []);
+    const tail = coords[coords.length - 1];
+    if (variant === 'bar') {
+        const slot = n > 0 ? (right - PAD$3) / n : 0;
+        const zero = px(y(0));
+        input.data.forEach((v, i) => {
+            if (!isFinite(v))
+                return;
+            const top = px(y(v));
+            shapes.push({
+                kind: 'rect',
+                part: 'bar',
+                x: px(PAD$3 + i * slot + slot * 0.1),
+                y: Math.min(top, zero),
+                width: px(Math.max(1, slot * 0.8)),
+                height: px(Math.max(1, Math.abs(zero - top))),
+                fill: v < 0 && input.trend ? CHART_COLORS.negative : color,
+                title: input.tooltip === false ? undefined : format(v),
+            });
+        });
+    }
+    else {
+        const line = pathThrough(coords, input.curve);
+        const head = coords[0];
+        if (variant === 'area')
+            shapes.push({
                 kind: 'path',
                 part: 'area',
-                d: line && first && last
-                    ? `${line}L${last.x} ${height - PAD$3}L${first.x} ${height - PAD$3}Z`
+                d: line && head && tail
+                    ? `${line}L${tail.x} ${height - PAD$3}L${head.x} ${height - PAD$3}Z`
                     : '',
                 fill: color,
                 fillOpacity: 0.15,
-            },
-            { kind: 'path', part: 'line', d: line, stroke: color, strokeWidth: 1.5 },
-            // The most recent point, drawn as a dot.
-            ...(last ? [point(last.x, last.y, 2, color)] : []),
-        ],
+            });
+        shapes.push({ kind: 'path', part: 'line', d: line, stroke: color, strokeWidth: 1.5 });
+        // The most recent point, drawn as a dot.
+        if (tail)
+            shapes.push(point(tail.x, tail.y, 2, color, undefined));
+    }
+    if (input.extremes && coords.length > 1) {
+        const min = coords.reduce((a, b) => (b.v < a.v ? b : a));
+        const max = coords.reduce((a, b) => (b.v > a.v ? b : a));
+        shapes.push({ ...point(min.x, min.y, 2.5, CHART_COLORS.negative, format(min.v)), part: 'min' }, { ...point(max.x, max.y, 2.5, CHART_COLORS.positive, format(max.v)), part: 'max' });
+    }
+    if (lastText && tail)
+        shapes.push(label(px(right + 4), tail.y, lastText, {
+            part: 'last-value',
+            baseline: 'middle',
+            fill: 'var(--skdx-color-text-default)',
+        }));
+    return {
+        width,
+        height,
+        tooltip: input.tooltip ?? true,
+        description: input.description,
+        decorative: input.decorative,
+        animate: input.animate === true ? 300 : input.animate || undefined,
+        responsive: input.responsive,
+        shapes,
     };
 }
 
@@ -584,6 +1569,10 @@ function layoutSparkline(input) {
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
 function layoutRadarChart(input) {
+    const state = stateCanvas(input, input.categories.length === 0 || input.series.every((s) => finite(s.data).length === 0), 300, 300);
+    if (state)
+        return state;
+    const format = makeFormatter(input.format);
     const { width, height } = size(input, 300, 300);
     const top = legendTop(input);
     const cx = width / 2;
@@ -591,19 +1580,20 @@ function layoutRadarChart(input) {
     const radius = Math.max(0, Math.min(width, height - top) / 2 - 36);
     const n = input.categories.length;
     const angle = (i) => -Math.PI / 2 + (i * 2 * Math.PI) / Math.max(1, n);
+    const shown = input.series.filter((s) => !isHidden(input, s.name));
     // Normalized: every series is scaled to its own maximum and the rings read as percentages.
     const ticks = input.normalize
         ? [0, 25, 50, 75, 100]
-        : niceTicks(0, Math.max(0, ...input.series.flatMap((s) => s.data)), 4);
-    const max = ticks[ticks.length - 1];
-    const seriesMax = input.series.map((s) => Math.max(0, ...s.data));
+        : niceTicks(0, input.max ?? Math.max(0, minMax(shown.flatMap((s) => s.data))[1]), 4);
+    const max = input.max ?? ticks[ticks.length - 1];
+    const seriesMax = input.series.map((s) => Math.max(0, minMax(s.data)[1]));
     const norm = (si, v) => input.normalize
         ? seriesMax[si] > 0
             ? (v / seriesMax[si]) * 100
             : 0
         : v;
     const at = (i, value) => {
-        const r = max > 0 ? (value / max) * radius : 0;
+        const r = max > 0 ? (Math.min(value, max) / max) * radius : 0;
         return { x: px(cx + r * Math.cos(angle(i))), y: px(cy + r * Math.sin(angle(i))) };
     };
     const polygon = (value) => n === 0
@@ -615,7 +1605,7 @@ function layoutRadarChart(input) {
         })
             .join('L')}Z`;
     // Concentric grid polygons, one per tick, innermost first, then a spoke per category.
-    const rings = ticks.filter((t) => t > 0);
+    const rings = ticks.filter((t) => t > 0 && t <= max);
     const grid = [
         ...rings.map((t) => ({
             kind: 'path',
@@ -627,48 +1617,654 @@ function layoutRadarChart(input) {
             const p = at(i, max);
             return {
                 kind: 'line',
-                part: 'grid',
-                x1: px(cx),
-                y1: px(cy),
-                x2: p.x,
-                y2: p.y,
-                stroke: CHART_COLORS.grid,
+                part: 'grid',
+                x1: px(cx),
+                y1: px(cy),
+                x2: p.x,
+                y2: p.y,
+                stroke: CHART_COLORS.grid,
+            };
+        }),
+        ...rings.map((t) => label(px(cx + 4), at(0, t).y, input.normalize ? `${t}%` : format(t), {
+            part: 'y-label',
+            baseline: 'middle',
+        })),
+        ...input.categories.map((text, i) => {
+            const cos = Math.cos(angle(i));
+            const r = radius + 14;
+            return label(px(cx + r * cos), px(cy + r * Math.sin(angle(i))), text, {
+                part: 'x-label',
+                anchor: cos > 0.1 ? 'start' : cos < -0.1 ? 'end' : 'middle',
+                baseline: 'middle',
+            });
+        }),
+    ];
+    const points = [];
+    const polygons = [];
+    input.series.forEach((s, si) => {
+        if (isHidden(input, s.name))
+            return;
+        const color = colorOf(input, si, s.color);
+        const value = (i) => {
+            const v = s.data[i];
+            return isFinite(v) ? v : 0;
+        };
+        input.categories.forEach((category, i) => {
+            const raw = s.data[i];
+            if (!isFinite(raw))
+                return;
+            const p = at(i, norm(si, raw));
+            const title = markTitle(s.name, category, raw, format);
+            points.push(point(p.x, p.y, 3, color, title, {
+                label: title,
+                series: s.name,
+                category,
+                index: i,
+                value: raw,
+            }));
+        });
+        polygons.push({
+            kind: 'path',
+            part: 'area',
+            d: polygon((i) => norm(si, value(i))),
+            fill: (input.fill ?? true) ? color : undefined,
+            fillOpacity: 0.25,
+            stroke: color,
+            strokeWidth: 2,
+        });
+    });
+    const c = canvas(input, width, height, input.series.map((s, i) => ({ name: s.name, color: colorOf(input, i, s.color) })));
+    return { ...c, shapes: [...grid, ...polygons, ...points, ...c.shapes] };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const MARGIN = { top: 24, right: 8, bottom: 8, left: 64 };
+const DAY = 86_400_000;
+const WEEKDAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
+/** Days as a weekday × week matrix, columns labelled where a month starts. */
+function calendarMatrix(cells) {
+    const days = cells
+        .map((c) => ({ day: Math.floor(new Date(c.date).getTime() / DAY), value: c.value }))
+        .filter((c) => Number.isFinite(c.day));
+    if (days.length === 0)
+        return {
+            rows: WEEKDAYS,
+            columns: [],
+            data: WEEKDAYS.map(() => []),
+            dates: WEEKDAYS.map(() => []),
+        };
+    const [first, last] = minMax(days.map((d) => d.day));
+    // Monday-based weekday: epoch day 0 (1970-01-01) was a Thursday.
+    const weekday = (day) => (((day + 3) % 7) + 7) % 7;
+    const startWeek = first - weekday(first);
+    const weeks = Math.floor((last - startWeek) / 7) + 1;
+    const data = WEEKDAYS.map(() => new Array(weeks).fill(null));
+    const dates = WEEKDAYS.map(() => new Array(weeks).fill(undefined));
+    for (const d of days) {
+        const w = Math.floor((d.day - startWeek) / 7);
+        data[weekday(d.day)][w] = d.value;
+        dates[weekday(d.day)][w] = new Date(d.day * DAY)
+            .toISOString()
+            .slice(0, 10);
+    }
+    const months = new Intl.DateTimeFormat(undefined, { month: 'short' });
+    let lastMonth = -1;
+    const columns = Array.from({ length: weeks }, (_, w) => {
+        const date = new Date((startWeek + w * 7 + 6) * DAY);
+        const m = date.getUTCMonth();
+        if (m === lastMonth)
+            return '';
+        lastMonth = m;
+        return months.format(date);
+    });
+    return { rows: WEEKDAYS, columns, data, dates };
+}
+function layoutHeatmap(input) {
+    const cal = input.calendar ? calendarMatrix(input.calendar) : undefined;
+    const rows = cal?.rows ?? input.rows ?? [];
+    const columns = cal?.columns ?? input.columns ?? [];
+    const data = cal?.data ?? input.data ?? [];
+    const all = data.flat();
+    const state = stateCanvas(input, rows.length === 0 || columns.length === 0 || !all.some(isFinite));
+    if (state)
+        return state;
+    const format = makeFormatter(input.format);
+    const { width, height } = size(input);
+    const plot = plotBox(width, height, cal ? { ...MARGIN, left: 40 } : MARGIN);
+    const cellW = plot.width / Math.max(1, columns.length);
+    const cellH = plot.height / Math.max(1, rows.length);
+    const [min, max] = input.domain ?? minMax(all);
+    const color = colorOf(input, 0, input.color);
+    const negative = input.negativeColor ?? 'var(--skdx-color-danger-500)';
+    const span = Math.max(Math.abs(min), Math.abs(max));
+    // Diverging: opacity is the distance from zero, color the sign.
+    // Otherwise 0.15..1, the value's place between the smallest and largest cell.
+    const clamp01 = (v) => Math.max(0, Math.min(1, v));
+    const opacity = (v) => input.diverging
+        ? span === 0
+            ? 1
+            : px(0.15 + 0.85 * clamp01(Math.abs(v) / span))
+        : max === min
+            ? 1
+            : px(0.15 + 0.85 * clamp01((v - min) / (max - min)));
+    const cells = [];
+    const texts = [];
+    const gap = cal ? 1 : 0;
+    rows.forEach((row, ri) => {
+        columns.forEach((column, ci) => {
+            const value = data[ri]?.[ci];
+            if (!isFinite(value))
+                return;
+            const where = cal ? (cal.dates[ri]?.[ci] ?? row) : `${row}, ${column}`;
+            const title = `${where}: ${format(value)}`;
+            const x = px(plot.x + ci * cellW + gap);
+            const y = px(plot.y + ri * cellH + gap);
+            cells.push({
+                kind: 'rect',
+                part: 'cell',
+                x,
+                y,
+                width: px(Math.max(0, cellW - 2 * gap)),
+                height: px(Math.max(0, cellH - 2 * gap)),
+                fill: input.diverging && value < 0 ? negative : color,
+                opacity: opacity(value),
+                rx: cal ? 2 : undefined,
+                title,
+                item: { label: title, category: column, name: row, index: ci, value },
+            });
+            if (input.labels && cellW > 24 && cellH > 12)
+                texts.push(label(px(plot.x + (ci + 0.5) * cellW), px(plot.y + (ri + 0.5) * cellH), format(value), {
+                    part: 'cell-label',
+                    anchor: 'middle',
+                    baseline: 'middle',
+                    fill: 'var(--skdx-color-text-default)',
+                }));
+        });
+    });
+    const c = canvas(input, width, height);
+    return {
+        ...c,
+        shapes: [
+            ...rows.map((text, i) => label(plot.x - 8, px(plot.y + (i + 0.5) * cellH), text, {
+                part: 'y-label',
+                anchor: 'end',
+                baseline: 'middle',
+            })),
+            ...columns.flatMap((text, i) => text
+                ? [
+                    label(px(plot.x + (i + 0.5) * cellW), plot.y - 8, text, {
+                        part: 'x-label',
+                        anchor: cal ? 'start' : 'middle',
+                    }),
+                ]
+                : []),
+            ...cells,
+            ...texts,
+            ...c.shapes,
+        ],
+    };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const PAD$2 = 8;
+const GAP = 4;
+/**
+ * Stages narrowing with their value (conversion), or a pyramid widening toward the end
+ * (shares of a whole). Vertical by default, horizontal when asked.
+ */
+function layoutFunnelChart(input) {
+    const pyramid = input.variant === 'pyramid';
+    // A pyramid widens toward its base: smallest stage first, shares of the total instead of conversion.
+    const data = input.data
+        .filter((d) => isFinite(d.value))
+        .sort((a, b) => (pyramid ? a.value - b.value : 0));
+    const state = stateCanvas(input, data.length === 0, 400, 300);
+    if (state)
+        return state;
+    const format = makeFormatter(input.format);
+    const { width, height } = size(input, 400, 300);
+    const n = data.length;
+    const horizontal = input.orientation === 'horizontal';
+    const max = Math.max(0, ...data.map((d) => d.value));
+    const total = data.reduce((s, d) => s + Math.max(0, d.value), 0);
+    const first = data[0]?.value ?? 0;
+    const offset = legendTop(input);
+    // Along: the axis stages are stacked on; across: the axis a stage's width is measured on.
+    const along = horizontal ? width : height - offset;
+    const across = horizontal ? height - offset : width;
+    const full = Math.max(0, across - 2 * PAD$2);
+    const stageLen = n === 0 ? 0 : (along - 2 * PAD$2) / n;
+    const widthOf = (value) => (max > 0 ? (Math.max(0, value) / max) * full : 0);
+    const legend = data.map((d, i) => ({ name: d.name, color: colorOf(input, i, d.color) }));
+    const mid = horizontal ? offset + (height - offset) / 2 : width / 2;
+    const stages = data.flatMap((d, i) => {
+        const near = widthOf(d.value);
+        const far = widthOf(data[i + 1]?.value ?? d.value);
+        const p0 = PAD$2 + i * stageLen + (horizontal ? 0 : offset);
+        const p1 = p0 + stageLen - GAP;
+        const percent = pyramid ? (total > 0 ? d.value / total : 0) : first > 0 ? d.value / first : 0;
+        const previous = data[i - 1]?.value;
+        const drop = !pyramid && previous !== undefined && previous > 0
+            ? ` · −${Math.round((1 - d.value / previous) * 100)}% from ${data[i - 1]?.name}`
+            : '';
+        const title = `${d.name}: ${format(d.value)} (${Math.round(percent * 100)}%)${drop}`;
+        const d0 = horizontal
+            ? `M${px(p0)} ${px(mid - near / 2)}L${px(p0)} ${px(mid + near / 2)}L${px(p1)} ${px(mid + far / 2)}L${px(p1)} ${px(mid - far / 2)}Z`
+            : `M${px(mid - near / 2)} ${px(p0)}L${px(mid + near / 2)} ${px(p0)}L${px(mid + far / 2)} ${px(p1)}L${px(mid - far / 2)} ${px(p1)}Z`;
+        return [
+            {
+                kind: 'path',
+                part: 'stage',
+                d: d0,
+                fill: colorOf(input, i, d.color),
+                title,
+                item: { label: title, name: d.name, index: i, value: d.value },
+            },
+            label(px(horizontal ? (p0 + p1) / 2 : mid), px(horizontal ? mid : (p0 + p1) / 2), `${d.name} · ${format(d.value)}`, {
+                part: 'stage-label',
+                anchor: 'middle',
+                baseline: 'middle',
+                fill: 'var(--skdx-color-text-on-accent)',
+            }),
+        ];
+    });
+    const c = canvas(input, width, height, legend);
+    return { ...c, shapes: [...stages, ...c.shapes] };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+const rad = (deg) => (deg * Math.PI) / 180;
+/**
+ * Concentric arcs, one per datum, each a share of `max`: KPI completion, utilization,
+ * quota attainment. `bands` and `target` turn it into a gauge; `startAngle`/`endAngle` open it.
+ */
+function layoutRadialBar(input) {
+    const data = input.data.filter((d) => isFinite(d.value));
+    const state = stateCanvas(input, data.length === 0, 300, 300);
+    if (state)
+        return state;
+    const format = makeFormatter(input.format);
+    const { width, height } = size(input, 300, 300);
+    const top = legendTop(input);
+    const cx = width / 2;
+    const cy = top + (height - top) / 2;
+    const outer = Math.max(0, Math.min(width, height - top) / 2 - (input.bands ? 20 : 8));
+    const inner = outer * Math.min(0.95, Math.max(0, input.innerRadius ?? 0.3));
+    const start = rad(input.startAngle ?? 0);
+    const end = rad(input.endAngle ?? (input.startAngle ?? 0) + 360);
+    const sweep = Math.max(0, Math.min(2 * Math.PI, end - start));
+    const max = input.max ?? Math.max(0, ...data.map((d) => d.value));
+    const n = data.length;
+    const gap = Math.max(0, input.gap ?? 0.25);
+    const thickness = n === 0 ? 0 : (outer - inner) / (n + gap * (n - 1));
+    const rounded = input.rounded ?? true;
+    const ratio = (v) => (max > 0 ? Math.max(0, Math.min(1, v / max)) : 0);
+    const shapes = [];
+    const legend = data.map((d, i) => ({ name: d.name, color: colorOf(input, i, d.color) }));
+    // Threshold sectors outside the arcs, e.g. poor / fair / good.
+    for (const b of input.bands ?? []) {
+        const a0 = start + ratio(b.from) * sweep;
+        const a1 = start + ratio(b.to) * sweep;
+        if (a1 <= a0)
+            continue;
+        shapes.push({
+            kind: 'path',
+            part: 'band',
+            d: arc(cx, cy, outer + 14, outer + 6, a0, a1),
+            fill: variantColor(b.variant),
+            opacity: 0.6,
+            title: `${format(b.from)} – ${format(b.to)}`,
+        });
+    }
+    data.forEach((d, i) => {
+        if (isHidden(input, d.name))
+            return;
+        const r1 = outer - i * thickness * (1 + gap);
+        const r0 = r1 - thickness;
+        const color = colorOf(input, i, d.color);
+        const a1 = start + ratio(d.value) * sweep;
+        const title = `${d.name}: ${format(d.value)} (${Math.round(ratio(d.value) * 100)}%)`;
+        if (input.track ?? true)
+            shapes.push({
+                kind: 'path',
+                part: 'track',
+                d: arc(cx, cy, r1, r0, start, start + sweep),
+                fill: CHART_COLORS.grid,
+                opacity: 0.6,
+            });
+        if (a1 > start) {
+            shapes.push({
+                kind: 'path',
+                part: 'bar',
+                d: arc(cx, cy, r1, r0, start, a1),
+                fill: color,
+                title,
+                item: { label: title, name: d.name, index: i, value: d.value },
+            });
+            if (rounded && sweep < 2 * Math.PI - 1e-9) {
+                const rm = (r0 + r1) / 2;
+                for (const a of [start, a1])
+                    shapes.push({
+                        kind: 'circle',
+                        part: 'bar-cap',
+                        cx: px(cx + rm * Math.sin(a)),
+                        cy: px(cy - rm * Math.cos(a)),
+                        r: px(thickness / 2),
+                        fill: color,
+                    });
+            }
+        }
+        if (input.labels) {
+            const rm = (r0 + r1) / 2;
+            shapes.push(label(px(cx + rm * Math.sin(start) - 6 * Math.cos(start)), px(cy - rm * Math.cos(start) - 6 * Math.sin(start)), `${d.name} ${format(d.value)}`, { part: 'bar-label', anchor: Math.cos(start) >= 0 ? 'end' : 'start', baseline: 'middle' }));
+        }
+    });
+    if (input.target !== undefined && isFinite(input.target)) {
+        const a = start + ratio(input.target) * sweep;
+        const rIn = outer - n * thickness * (1 + gap) + thickness * gap;
+        shapes.push({
+            kind: 'line',
+            part: 'target',
+            x1: px(cx + rIn * Math.sin(a)),
+            y1: px(cy - rIn * Math.cos(a)),
+            x2: px(cx + (outer + 4) * Math.sin(a)),
+            y2: px(cy - (outer + 4) * Math.cos(a)),
+            stroke: 'var(--skdx-color-text-default)',
+            strokeWidth: 2,
+            title: `Target: ${format(input.target)}`,
+        });
+    }
+    if (input.centerLabel)
+        shapes.push(label(px(cx), px(cy), input.centerLabel, {
+            part: 'center-label',
+            anchor: 'middle',
+            baseline: 'middle',
+            fill: 'var(--skdx-color-text-default)',
+            weight: 'bold',
+        }));
+    const c = canvas(input, width, height, legend);
+    return { ...c, shapes: [...shapes, ...c.shapes] };
+}
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+/*
+ * Pure interaction helpers shared by every framework root: the roots hold the state
+ * (tooltip shapes, focused mark, hidden series, zoom) and call these on events, so
+ * hit-testing, keyboard stepping and zoom math cannot drift between frameworks.
+ */
+/** Converts a client position into viewBox units of the svg. */
+function toViewBox(svg, clientX, clientY, width, height) {
+    const r = svg.getBoundingClientRect();
+    return {
+        x: r.width ? ((clientX - r.left) * width) / r.width : clientX,
+        y: r.height ? ((clientY - r.top) * height) / r.height : clientY,
+    };
+}
+const inside = (b, x, y) => x >= b.x && x <= b.x + b.width && y >= b.y && y <= b.y + b.height;
+/** Index of the visible category whose center is nearest to viewBox `x`. */
+function nearestIndex(hit, x) {
+    let best = 0;
+    let dist = Infinity;
+    hit.xs.forEach((cx, i) => {
+        const d = Math.abs(cx - x);
+        if (d < dist) {
+            dist = d;
+            best = i;
+        }
+    });
+    return best;
+}
+/** The crosshair line and shared tooltip at the category nearest to `x`, or none outside the plot. */
+function crosshairShapes(layout, x, y) {
+    const hit = layout.hit;
+    if (!hit || !hit.crosshair || hit.xs.length === 0 || !inside(hit.plot, x, y))
+        return [];
+    const i = nearestIndex(hit, x);
+    const cx = hit.xs[i];
+    return [
+        {
+            kind: 'line',
+            part: 'crosshair',
+            x1: cx,
+            x2: cx,
+            y1: hit.plot.y,
+            y2: hit.plot.y + hit.plot.height,
+            stroke: CHART_COLORS.axis,
+            dash: '3 3',
+        },
+        ...tooltipShapes(cx, y, hit.rows[i] ?? [], layout.width, layout.height),
+    ];
+}
+/**
+ * Tooltip shapes for the mark under the pointer, or none. Reads the mark's
+ * `<title>` and converts the pointer position into viewBox units.
+ */
+function hoverTooltip(target, svg, clientX, clientY, width, height) {
+    const mark = target?.closest?.('[data-skdx-part]');
+    const title = mark && Array.from(mark.children).find((c) => c.tagName.toLowerCase() === 'title')?.textContent;
+    if (!title)
+        return [];
+    const { x, y } = toViewBox(svg, clientX, clientY, width, height);
+    return tooltipShapes(x, y, title, width, height);
+}
+/** What to draw for a pointer at the given position: the crosshair when on, else the hovered mark's tooltip. */
+function pointerShapes(layout, target, svg, clientX, clientY) {
+    if (!layout.tooltip)
+        return [];
+    if (layout.hit?.crosshair) {
+        const { x, y } = toViewBox(svg, clientX, clientY, layout.width, layout.height);
+        const cross = crosshairShapes(layout, x, y);
+        if (cross.length > 0)
+            return cross;
+    }
+    return hoverTooltip(target, svg, clientX, clientY, layout.width, layout.height);
+}
+/** The shape index and item of the mark an event landed on, if it stands for something. */
+function itemAt(layout, target) {
+    const mark = target?.closest?.('[data-skdx-i]');
+    const i = Number(mark?.getAttribute('data-skdx-i'));
+    const item = Number.isInteger(i) ? layout.shapes[i]?.item : undefined;
+    return item ? { index: i, item } : undefined;
+}
+/** Indexes of the shapes a keyboard user can land on, in drawing order. */
+const focusTargets = (layout) => layout.shapes.flatMap((s, i) => (s.item && !s.item.legend ? [i] : []));
+/** A representative point of a shape, where its tooltip is anchored. */
+function anchorOf(s) {
+    switch (s.kind) {
+        case 'rect':
+            return { x: s.x + s.width / 2, y: s.y };
+        case 'circle':
+            return { x: s.cx, y: s.cy - s.r };
+        case 'line':
+            return { x: (s.x1 + s.x2) / 2, y: Math.min(s.y1, s.y2) };
+        case 'text':
+            return { x: s.x, y: s.y };
+        case 'path': {
+            const m = /M\s*(-?[\d.]+)[ ,](-?[\d.]+)/.exec(s.d);
+            return m ? { x: Number(m[1]), y: Number(m[2]) } : { x: 0, y: 0 };
+        }
+    }
+}
+/** The focus ring around a shape plus its tooltip, for keyboard users. */
+function focusShapes(layout, index) {
+    const s = index === null ? undefined : layout.shapes[index];
+    if (!s)
+        return [];
+    const ring = CHART_COLORS.focus;
+    let outline;
+    switch (s.kind) {
+        case 'rect':
+            outline = {
+                kind: 'rect',
+                part: 'focus',
+                x: s.x - 2,
+                y: s.y - 2,
+                width: s.width + 4,
+                height: s.height + 4,
+                fill: 'none',
+                stroke: ring,
+                rx: 2,
+            };
+            break;
+        case 'circle':
+            outline = {
+                kind: 'circle',
+                part: 'focus',
+                cx: s.cx,
+                cy: s.cy,
+                r: s.r + 3,
+                fill: 'none',
+                stroke: ring,
+            };
+            break;
+        case 'line':
+            outline = {
+                kind: 'line',
+                part: 'focus',
+                x1: s.x1,
+                y1: s.y1,
+                x2: s.x2,
+                y2: s.y2,
+                stroke: ring,
+                strokeWidth: 4,
             };
-        }),
-        ...rings.map((t) => label(px(cx + 4), at(0, t).y, input.normalize ? `${t}%` : formatValue(t), {
-            part: 'y-label',
-            baseline: 'middle',
-        })),
-        ...input.categories.map((text, i) => {
-            const cos = Math.cos(angle(i));
-            const r = radius + 14;
-            return label(px(cx + r * cos), px(cy + r * Math.sin(angle(i))), text, {
-                part: 'x-label',
-                anchor: cos > 0.1 ? 'start' : cos < -0.1 ? 'end' : 'middle',
-                baseline: 'middle',
-            });
-        }),
-    ];
-    const points = [];
-    const polygons = input.series.map((s, si) => {
-        const color = seriesColor(si, s.color);
-        input.categories.forEach((category, i) => {
-            const value = s.data[i] ?? 0;
-            const p = at(i, norm(si, value));
-            points.push(point(p.x, p.y, 3, color, markTitle(s.name, category, value)));
-        });
-        return {
-            kind: 'path',
-            part: 'area',
-            d: polygon((i) => norm(si, s.data[i] ?? 0)),
-            fill: color,
-            fillOpacity: 0.25,
-            stroke: color,
-            strokeWidth: 2,
-        };
-    });
-    const c = canvas(input, width, height, input.series.map((s, i) => ({ name: s.name, color: seriesColor(i, s.color) })));
-    return { ...c, shapes: [...grid, ...polygons, ...points, ...c.shapes] };
+            break;
+        case 'text':
+            outline = {
+                kind: 'rect',
+                part: 'focus',
+                x: s.x - 2,
+                y: s.y - 8,
+                width: s.text.length * CHAR + 4,
+                height: 16,
+                fill: 'none',
+                stroke: ring,
+                rx: 2,
+            };
+            break;
+        case 'path':
+            outline = { kind: 'path', part: 'focus', d: s.d, stroke: ring, strokeWidth: 2, fill: 'none' };
+            break;
+    }
+    const { x, y } = anchorOf(s);
+    const text = s.item?.label ?? s.title ?? '';
+    return [outline, ...(text ? tooltipShapes(px(x), px(y), text, layout.width, layout.height) : [])];
+}
+/**
+ * The mark to focus after a key press: arrows step, Home/End jump, Escape clears (`null`);
+ * `undefined` means the key was not handled and should propagate.
+ */
+function nextFocus(layout, current, key) {
+    const targets = focusTargets(layout);
+    if (targets.length === 0)
+        return undefined;
+    const at = current === null ? -1 : targets.indexOf(current);
+    switch (key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+            return targets[Math.min(targets.length - 1, at + 1)];
+        case 'ArrowLeft':
+        case 'ArrowUp':
+            return targets[Math.max(0, at <= 0 ? 0 : at - 1)];
+        case 'Home':
+            return targets[0];
+        case 'End':
+            return targets[targets.length - 1];
+        case 'Escape':
+            return null;
+        default:
+            return undefined;
+    }
+}
+const MIN_WINDOW = 2;
+const clampZoom = (start, span, count) => {
+    const window = Math.max(MIN_WINDOW, Math.min(count, Math.round(span)));
+    const s = Math.max(0, Math.min(count - window, Math.round(start)));
+    return { start: s, end: s + window };
+};
+/** Whether the zoom shows everything. */
+const isUnzoomed = (zoom, count) => !zoom || (zoom.start <= 0 && zoom.end >= count);
+/** The window after a wheel step at viewBox `x`: scrolling up narrows around the pointer, down widens. */
+function zoomWheel(hit, deltaY, x) {
+    if (hit.count <= MIN_WINDOW || !hit.plot.width)
+        return undefined;
+    const { start, end } = hit.zoom;
+    const window = end - start;
+    const factor = deltaY > 0 ? 1.25 : 0.8;
+    const next = Math.max(MIN_WINDOW, Math.min(hit.count, Math.round(window * factor)));
+    if (next === window)
+        return deltaY > 0 && !isUnzoomed(hit.zoom, hit.count)
+            ? clampZoom(start, next, hit.count)
+            : undefined;
+    const f = Math.max(0, Math.min(1, (x - hit.plot.x) / hit.plot.width));
+    const anchor = start + f * window;
+    return clampZoom(anchor - f * next, next, hit.count);
+}
+/**
+ * The window after a pinch: `ratio` is the current finger distance over the distance when the
+ * pinch began (`> 1` narrows the window), anchored at viewBox `x`.
+ */
+function zoomPinch(hit, from, ratio, x) {
+    const window = from.end - from.start;
+    const next = Math.max(MIN_WINDOW, Math.min(hit.count, Math.round(window / Math.max(0.05, ratio))));
+    const f = Math.max(0, Math.min(1, (x - hit.plot.x) / Math.max(1, hit.plot.width)));
+    return clampZoom(from.start + f * window - f * next, next, hit.count);
+}
+/** The window after dragging the plot by `dx` viewBox pixels from where `from` was set. */
+function zoomPan(hit, from, dx) {
+    const window = from.end - from.start;
+    const perCategory = hit.plot.width / Math.max(1, window);
+    return clampZoom(from.start - dx / perCategory, window, hit.count);
+}
+/**
+ * What a pointer-down at viewBox (x, y) grabs in the range strip: a handle, the window,
+ * or (outside the window) a window re-centred there. `undefined` outside the strip.
+ */
+function brushGrab(hit, x, y) {
+    const b = hit.brush;
+    if (!b || !inside(b.box, x, y))
+        return undefined;
+    const w = b.window;
+    if (Math.abs(x - w.x) <= 6)
+        return { grab: 'left', zoom: hit.zoom };
+    if (Math.abs(x - (w.x + w.width)) <= 6)
+        return { grab: 'right', zoom: hit.zoom };
+    if (x > w.x && x < w.x + w.width)
+        return { grab: 'move', zoom: hit.zoom };
+    const window = hit.zoom.end - hit.zoom.start;
+    const at = ((x - b.box.x) / Math.max(1, b.box.width)) * hit.count;
+    return { grab: 'move', zoom: clampZoom(at - window / 2, window, hit.count) };
+}
+/** The window after dragging a brush grab by `dx` viewBox pixels. */
+function brushDrag(hit, grab, from, dx) {
+    const b = hit.brush;
+    if (!b)
+        return from;
+    const categories = (dx / Math.max(1, b.box.width)) * hit.count;
+    if (grab === 'move')
+        return clampZoom(from.start + categories, from.end - from.start, hit.count);
+    if (grab === 'left') {
+        const start = Math.max(0, Math.min(from.end - MIN_WINDOW, Math.round(from.start + categories)));
+        return { start, end: from.end };
+    }
+    const end = Math.min(hit.count, Math.max(from.start + MIN_WINDOW, Math.round(from.end + categories)));
+    return { start: from.start, end };
 }
 
 /*
@@ -676,63 +2272,89 @@ function layoutRadarChart(input) {
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-const MARGIN = { top: 24, right: 8, bottom: 8, left: 64 };
-function layoutHeatmap(input) {
-    const { width, height } = size(input);
-    const plot = plotBox(width, height, MARGIN);
-    const cellW = plot.width / Math.max(1, input.columns.length);
-    const cellH = plot.height / Math.max(1, input.rows.length);
-    const all = input.data.flat();
-    const min = Math.min(...all);
-    const max = Math.max(...all);
-    const color = seriesColor(0, input.color);
-    const negative = input.negativeColor ?? 'var(--skdx-color-danger-500)';
-    const span = Math.max(Math.abs(min), Math.abs(max));
-    // Diverging: opacity is the distance from zero, color the sign.
-    // Otherwise 0.15..1, the value's place between the smallest and largest cell.
-    const opacity = (v) => input.diverging
-        ? span === 0
-            ? 1
-            : px(0.15 + (0.85 * Math.abs(v)) / span)
-        : max === min
-            ? 1
-            : px(0.15 + (0.85 * (v - min)) / (max - min));
-    const cells = [];
-    input.rows.forEach((row, ri) => {
-        input.columns.forEach((column, ci) => {
-            const value = input.data[ri]?.[ci];
-            if (value === undefined)
-                return;
-            cells.push({
-                kind: 'rect',
-                part: 'cell',
-                x: px(plot.x + ci * cellW),
-                y: px(plot.y + ri * cellH),
-                width: px(cellW),
-                height: px(cellH),
-                fill: input.diverging && value < 0 ? negative : color,
-                opacity: opacity(value),
-                title: `${row}, ${column}: ${formatValue(value)}`,
-            });
-        });
+const esc = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
+const attrs = (pairs) => pairs
+    .filter(([, v]) => v !== undefined && v !== '')
+    .map(([k, v]) => ` ${k}="${esc(String(v))}"`)
+    .join('');
+/** One shape as SVG markup. Shared by the export and usable for server rendering. */
+function shapeMarkup(s) {
+    const title = s.title ? `<title>${esc(s.title)}</title>` : '';
+    const part = ['data-skdx-part', s.part];
+    switch (s.kind) {
+        case 'path':
+            return `<path${attrs([part, ['d', s.d], ['fill', s.fill ?? 'none'], ['stroke', s.stroke], ['stroke-width', s.strokeWidth], ['stroke-linecap', s.strokeLinecap], ['stroke-linejoin', s.strokeLinejoin], ['stroke-dasharray', s.dash], ['opacity', s.opacity], ['fill-opacity', s.fillOpacity]])}>${title}</path>`;
+        case 'rect':
+            return `<rect${attrs([part, ['x', s.x], ['y', s.y], ['width', s.width], ['height', s.height], ['rx', s.rx], ['fill', s.fill], ['stroke', s.stroke], ['fill-opacity', s.opacity]])}>${title}</rect>`;
+        case 'line':
+            return `<line${attrs([part, ['x1', s.x1], ['y1', s.y1], ['x2', s.x2], ['y2', s.y2], ['stroke', s.stroke], ['stroke-width', s.strokeWidth], ['stroke-dasharray', s.dash]])}>${title}</line>`;
+        case 'circle':
+            return `<circle${attrs([part, ['cx', s.cx], ['cy', s.cy], ['r', s.r], ['fill', s.fill], ['stroke', s.stroke]])}>${title}</circle>`;
+        case 'text':
+            return `<text${attrs([part, ['x', s.x], ['y', s.y], ['text-anchor', s.anchor], ['dominant-baseline', s.baseline], ['fill', s.fill], ['font-weight', s.weight]])}>${esc(s.text)}</text>`;
+    }
+}
+/**
+ * A standalone SVG document of a layout, for download or server rendering. Colors stay as
+ * `var(--skdx-…)` references unless `resolve` maps them to concrete values, e.g. from
+ * `getComputedStyle(document.documentElement).getPropertyValue(name)`.
+ */
+function svgMarkup(layout, label, resolve) {
+    let body = layout.shapes.map(shapeMarkup).join('');
+    if (resolve)
+        body = body.replace(/var\((--[\w-]+)\)/g, (m, name) => resolve(name).trim() || m);
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${layout.width} ${layout.height}" width="${layout.width}" height="${layout.height}" role="img" aria-label="${esc(label)}" font-family="${esc(CHART_COLORS.fontFamily)}" font-size="${esc(CHART_COLORS.fontSize)}"><title>${esc(label)}</title>${body}</svg>`;
+}
+/**
+ * Rasterizes SVG markup (from `svgMarkup`, with tokens resolved) to a PNG blob at `scale` device
+ * pixels per unit. Browser only: needs `Image`, `document` and a canvas.
+ */
+function svgToPng(markup, width, height, scale = 2, background) {
+    return new Promise((resolve, reject) => {
+        const url = URL.createObjectURL(new Blob([markup], { type: 'image/svg+xml;charset=utf-8' }));
+        const img = new Image();
+        img.onload = () => {
+            URL.revokeObjectURL(url);
+            const canvas = document.createElement('canvas');
+            canvas.width = Math.round(width * scale);
+            canvas.height = Math.round(height * scale);
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return reject(new Error('canvas 2d context unavailable'));
+            if (background) {
+                ctx.fillStyle = background;
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+            }
+            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+            canvas.toBlob((blob) => (blob ? resolve(blob) : reject(new Error('toBlob failed'))), 'image/png');
+        };
+        img.onerror = () => {
+            URL.revokeObjectURL(url);
+            reject(new Error('svg could not be decoded'));
+        };
+        img.src = url;
     });
-    const c = canvas(input, width, height);
-    return {
-        ...c,
-        shapes: [
-            ...input.rows.map((text, i) => label(plot.x - 8, px(plot.y + (i + 0.5) * cellH), text, {
-                part: 'y-label',
-                anchor: 'end',
-                baseline: 'middle',
-            })),
-            ...input.columns.map((text, i) => label(px(plot.x + (i + 0.5) * cellW), plot.y - 8, text, {
-                part: 'x-label',
-                anchor: 'middle',
-            })),
-            ...cells,
-            ...c.shapes,
-        ],
+}
+/** RFC 4180 CSV of rows, for "download data" and clipboard copy. */
+function csv(rows) {
+    const cell = (v) => {
+        const s = v === null || v === undefined ? '' : String(v);
+        return /[",\n\r]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s;
     };
+    return rows.map((r) => r.map(cell).join(',')).join('\r\n');
+}
+/** Series and categories as CSV rows: a header of series names, one row per category. */
+function seriesCsv(series, categories = []) {
+    const n = Math.max(categories.length, ...series.map((s) => s.data.length));
+    const rows = [['', ...series.map((s) => s.name)]];
+    for (let i = 0; i < n; i++) {
+        const c = categories[i];
+        rows.push([
+            c instanceof Date ? c.toISOString() : (c ?? i + 1),
+            ...series.map((s) => s.data[i]),
+        ]);
+    }
+    return csv(rows);
 }
 
 /*
@@ -740,43 +2362,34 @@ function layoutHeatmap(input) {
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-const PAD$2 = 8;
-const GAP = 4;
-function layoutFunnelChart(input) {
-    const { width, height } = size(input, 400, 300);
-    const n = input.data.length;
-    const max = Math.max(0, ...input.data.map((d) => d.value));
-    const first = input.data[0]?.value ?? 0;
-    const full = Math.max(0, width - 2 * PAD$2);
-    const offset = legendTop(input);
-    const stageH = n === 0 ? 0 : (height - offset - 2 * PAD$2) / n;
-    const widthOf = (value) => (max > 0 ? (Math.max(0, value) / max) * full : 0);
-    const legend = input.data.map((d, i) => ({ name: d.name, color: seriesColor(i, d.color) }));
-    const stages = input.data.flatMap((d, i) => {
-        const top = widthOf(d.value);
-        const bottom = widthOf(input.data[i + 1]?.value ?? d.value);
-        const y0 = offset + PAD$2 + i * stageH;
-        const y1 = y0 + stageH - GAP;
-        const cx = width / 2;
-        const percent = first > 0 ? d.value / first : 0;
-        return [
-            {
-                kind: 'path',
-                part: 'stage',
-                d: `M${px(cx - top / 2)} ${px(y0)}L${px(cx + top / 2)} ${px(y0)}L${px(cx + bottom / 2)} ${px(y1)}L${px(cx - bottom / 2)} ${px(y1)}Z`,
-                fill: seriesColor(i, d.color),
-                title: `${d.name}: ${formatValue(d.value)} (${Math.round(percent * 100)}%)`,
-            },
-            label(px(cx), px((y0 + y1) / 2), `${d.name} · ${formatValue(d.value)}`, {
-                part: 'stage-label',
-                anchor: 'middle',
-                baseline: 'middle',
-                fill: 'var(--skdx-color-text-on-accent)',
-            }),
-        ];
-    });
-    const c = canvas(input, width, height, legend);
-    return { ...c, shapes: [...stages, ...c.shapes] };
+/** Above this many shapes animation switches itself off; the transitions would cost more than they explain. */
+const ANIMATION_LIMIT = 1500;
+const MARKS = '[data-skdx-part]:not([data-skdx-part^="tooltip"]):not([data-skdx-part="focus"]):not([data-skdx-part="crosshair"])';
+/**
+ * The static stylesheet every root ships: marks fade in on mount and their geometry transitions on
+ * change, both over `--skdx-chart-duration`, which is `0ms` (nothing moves) unless the root sets it
+ * from `animationDuration`. Tooltips, focus rings and the crosshair are excluded so interaction
+ * stays immediate; `prefers-reduced-motion` turns everything off. Geometry transitions rely on
+ * SVG 2 presentation attributes as CSS properties, which evergreen browsers support.
+ */
+const ANIMATION_CSS = `@keyframes skdx-in{from{opacity:0}to{opacity:1}}${MARKS}{animation:skdx-in var(--skdx-chart-duration,0ms) ease-out;transition:${[
+    'x',
+    'y',
+    'width',
+    'height',
+    'cx',
+    'cy',
+    'r',
+    'opacity',
+    'fill-opacity',
+    'd',
+]
+    .map((p) => `${p} var(--skdx-chart-duration,0ms) ease-out`)
+    .join(',')}}@media (prefers-reduced-motion:reduce){${MARKS}{animation:none;transition:none}}`;
+/** The `--skdx-chart-duration` value for a layout, e.g. `300ms`, or `undefined` when it must not animate. */
+function animationDuration(layout) {
+    const ms = layout.animate;
+    return ms && layout.shapes.length <= ANIMATION_LIMIT ? `${ms}ms` : undefined;
 }
 
 /*
@@ -787,6 +2400,11 @@ function layoutFunnelChart(input) {
 const NODE_WIDTH = 16;
 const NODE_PAD = 8;
 function layoutSankey(input) {
+    const usable = input.links.filter((l) => isFinite(l.value) && l.value > 0 && l.source !== l.target);
+    const state = stateCanvas(input, usable.length === 0);
+    if (state)
+        return state;
+    const formatValue = makeFormatter(input.format);
     const { width, height } = size(input);
     const plot = plotBox(width, height, { top: 8 + legendTop(input), right: 96, bottom: 8, left: 8 });
     const nodes = new Map();
@@ -797,7 +2415,7 @@ function layoutSankey(input) {
                 name,
                 depth: 0,
                 value: 0,
-                color: seriesColor(nodes.size),
+                color: colorOf(input, nodes.size),
                 x: 0,
                 y: 0,
                 height: 0,
@@ -808,7 +2426,7 @@ function layoutSankey(input) {
         }
         return n;
     };
-    const links = dropBackEdges(input.links.filter((l) => l.value > 0 && l.source !== l.target));
+    const links = dropBackEdges(usable);
     for (const l of links) {
         node(l.source);
         node(l.target);
@@ -866,6 +2484,12 @@ function layoutSankey(input) {
             fill: s.color,
             opacity: 0.4,
             title: `${l.source} → ${l.target}: ${formatValue(l.value)}`,
+            item: {
+                label: `${l.source} → ${l.target}: ${formatValue(l.value)}`,
+                name: l.source,
+                category: l.target,
+                value: l.value,
+            },
         });
     }
     for (const n of nodes.values()) {
@@ -878,6 +2502,7 @@ function layoutSankey(input) {
             height: px(n.height),
             fill: n.color,
             title: `${n.name}: ${formatValue(n.value)}`,
+            item: { label: `${n.name}: ${formatValue(n.value)}`, name: n.name, value: n.value },
         });
         const last = n.depth === depths;
         shapes.push(label(px(last ? n.x - 6 : n.x + NODE_WIDTH + 6), px(n.y + n.height / 2), n.name, {
@@ -916,7 +2541,7 @@ function dropBackEdges(links) {
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-const nodeValue$1 = (n) => n.value ?? (n.children ?? []).reduce((s, c) => s + nodeValue$1(c), 0);
+const nodeValue$1 = (n) => isFinite(n.value) ? n.value : (n.children ?? []).reduce((s, c) => s + nodeValue$1(c), 0);
 /** Squarified treemap (Bruls, Huizing, van Wijk): rows of tiles kept as close to square as possible. */
 function squarify(items, x, y, w, h, out) {
     if (items.length === 0)
@@ -962,10 +2587,14 @@ function squarify(items, x, y, w, h, out) {
     }
 }
 function layoutTreemap(input) {
+    const state = stateCanvas(input, !input.data.some((n) => nodeValue$1(n) > 0));
+    if (state)
+        return state;
+    const formatValue = makeFormatter(input.format);
     const { width, height } = size(input);
     const top = legendTop(input);
     const shapes = [];
-    const legend = input.data.map((n, i) => ({ name: n.name, color: seriesColor(i, n.color) }));
+    const legend = input.data.map((n, i) => ({ name: n.name, color: colorOf(input, i, n.color) }));
     // Branches are outlined and their children tiled inside a 2px inset; leaves are filled.
     const tile = (nodes, x, y, w, h, inherited) => {
         const total = nodes.reduce((s, n) => s + Math.max(0, nodeValue$1(n)), 0);
@@ -973,10 +2602,10 @@ function layoutTreemap(input) {
             .map((node, i) => ({
             node,
             value: nodeValue$1(node),
-            color: node.color ?? inherited ?? seriesColor(i),
+            color: node.color ?? inherited ?? colorOf(input, i),
             area: total > 0 ? (Math.max(0, nodeValue$1(node)) / total) * w * h : 0,
         }))
-            .filter((t) => t.area > 0)
+            .filter((t) => t.area > 0 && !(inherited === undefined && isHidden(input, t.node.name)))
             .sort((a, b) => b.area - a.area);
         squarify(tiles, x, y, w, h, (t, [tx, ty, tw, th]) => {
             const title = `${t.node.name}: ${formatValue(t.value)}`;
@@ -992,6 +2621,7 @@ function layoutTreemap(input) {
                 opacity: branch ? 0.15 : undefined,
                 stroke: 'var(--skdx-color-surface-default)',
                 title,
+                item: { label: title, name: t.node.name, value: t.value },
             });
             if (branch)
                 tile(t.node.children, tx + 2, ty + 2, Math.max(0, tw - 4), Math.max(0, th - 4), t.color);
@@ -1012,52 +2642,226 @@ function layoutTreemap(input) {
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-const UP$1 = 'var(--skdx-color-success-500)';
-const DOWN$1 = 'var(--skdx-color-danger-500)';
+const UP$1 = CHART_COLORS.positive;
+const DOWN$1 = CHART_COLORS.negative;
+const VOLUME_SHARE = 0.22;
+const BRUSH_HEIGHT = 32;
+const BRUSH_GAP = 28;
+const valid = (c) => isFinite(c.open) && isFinite(c.high) && isFinite(c.low) && isFinite(c.close);
+/** Candles or OHLC bars on a time axis, with an optional volume pane, references, zoom and brush. */
 function layoutCandlestick(input) {
+    const all = input.data.filter(valid);
+    const state = stateCanvas(input, all.length === 0);
+    if (state)
+        return state;
+    const format = makeFormatter(input.format);
+    const count = all.length;
+    const start = Math.max(0, Math.min(count - 2, Math.floor(input.zoom?.start ?? 0)));
+    const end = input.zoom ? Math.max(start + 2, Math.min(count, Math.ceil(input.zoom.end))) : count;
+    const zoom = { start, end };
+    const data = all.slice(start, end);
+    const hasVolume = all.some((c) => isFinite(c.volume));
     const { width, height } = size(input);
-    const plot = plotBox(width, height, { ...MARGIN$1, top: MARGIN$1.top + legendTop(input) });
-    const y = axis(extent(input.data.flatMap((c) => [c.low, c.high]), false), [plot.y + plot.height, plot.y], input.scale === 'log');
-    const x = bandScale(input.data.length, [plot.x, plot.x + plot.width]);
+    const brushRoom = input.brush ? BRUSH_HEIGHT + BRUSH_GAP : 0;
+    const outer = plotBox(width, height, {
+        ...MARGIN$1,
+        top: MARGIN$1.top + legendTop(input),
+        bottom: MARGIN$1.bottom + brushRoom,
+    });
+    const volumeH = hasVolume ? outer.height * VOLUME_SHARE : 0;
+    const plot = { ...outer, height: Math.max(0, outer.height - volumeH - (hasVolume ? 8 : 0)) };
+    const y = axis(extent(data.flatMap((c) => [c.low, c.high]), false), [plot.y + plot.height, plot.y], input.scale === 'log', input.format);
+    const x = bandScale(data.length, [plot.x, plot.x + plot.width]);
+    const labels = data.map((c) => categoryLabel(c.label, input.xAxis?.format));
     const legend = [
         { name: 'Up', color: UP$1 },
         { name: 'Down', color: DOWN$1 },
     ];
-    const c = canvas(input, width, height, legend);
+    const c0 = canvas(input, width, height, legend);
     const frame = {
-        ...c,
+        ...c0,
         plot,
-        xTicks: input.data.map((c, i) => ({ pos: px(x.center(i)), label: c.label })),
+        xTicks: thinTicks(data.map((_, i) => ({ pos: px(x.center(i)), label: labels[i] })), plot.width),
         yTicks: y.ticks,
         baseline: plot.y + plot.height,
     };
     const shapes = frameShapes(frame);
-    input.data.forEach((c, i) => {
-        const color = c.close >= c.open ? UP$1 : DOWN$1;
-        const title = `${c.label}: O ${formatValue(c.open)} H ${formatValue(c.high)} L ${formatValue(c.low)} C ${formatValue(c.close)}`;
+    shapes.push(...referenceShapes(input.references, {
+        plot,
+        x: (v) => {
+            const target = typeof v === 'string' ? v : categoryValue(v);
+            const i = data.findIndex((c, idx) => typeof target === 'string'
+                ? labels[idx] === target || c.label === target
+                : categoryValue(c.label) === target);
+            return i < 0 ? undefined : x.center(i);
+        },
+        y: (v) => y.scale(v),
+    }));
+    const ohlc = input.variant === 'ohlc';
+    const rows = [];
+    data.forEach((c, i) => {
+        const up = c.close >= c.open;
+        const color = up ? UP$1 : DOWN$1;
+        const cx = px(x.center(i));
+        const title = `${labels[i]}: O ${format(c.open)} H ${format(c.high)} L ${format(c.low)} C ${format(c.close)}${isFinite(c.volume) ? ` V ${format(c.volume)}` : ''}`;
+        const item = { label: title, category: labels[i], index: start + i, value: c.close };
+        rows.push([
+            labels[i],
+            `Open: ${format(c.open)}`,
+            `High: ${format(c.high)}`,
+            `Low: ${format(c.low)}`,
+            `Close: ${format(c.close)}`,
+            ...(isFinite(c.volume) ? [`Volume: ${format(c.volume)}`] : []),
+        ]);
         const top = y.scale(Math.max(c.open, c.close));
         const bottom = y.scale(Math.min(c.open, c.close));
+        if (ohlc) {
+            const half = x.bandwidth / 2;
+            shapes.push({
+                kind: 'line',
+                part: 'wick',
+                x1: cx,
+                x2: cx,
+                y1: px(y.scale(c.high)),
+                y2: px(y.scale(c.low)),
+                stroke: color,
+                strokeWidth: 1.5,
+                title,
+                item,
+            }, {
+                kind: 'line',
+                part: 'open',
+                x1: px(cx - half),
+                x2: cx,
+                y1: px(y.scale(c.open)),
+                y2: px(y.scale(c.open)),
+                stroke: color,
+                strokeWidth: 1.5,
+            }, {
+                kind: 'line',
+                part: 'close',
+                x1: cx,
+                x2: px(cx + half),
+                y1: px(y.scale(c.close)),
+                y2: px(y.scale(c.close)),
+                stroke: color,
+                strokeWidth: 1.5,
+            });
+        }
+        else {
+            shapes.push({
+                kind: 'line',
+                part: 'wick',
+                x1: cx,
+                x2: cx,
+                y1: px(y.scale(c.high)),
+                y2: px(y.scale(c.low)),
+                stroke: color,
+                title,
+            }, {
+                kind: 'rect',
+                part: 'candle',
+                x: px(x.start(i)),
+                y: px(top),
+                width: px(x.bandwidth),
+                height: px(Math.max(1, bottom - top)),
+                fill: color,
+                title,
+                item,
+            });
+        }
+    });
+    if (hasVolume) {
+        const vTop = plot.y + plot.height + 8;
+        const [, vMax] = minMax(data.map((c) => c.volume));
+        data.forEach((c, i) => {
+            if (!isFinite(c.volume))
+                return;
+            const h = vMax > 0 ? (c.volume / vMax) * volumeH : 0;
+            shapes.push({
+                kind: 'rect',
+                part: 'volume',
+                x: px(x.start(i)),
+                y: px(vTop + volumeH - h),
+                width: px(x.bandwidth),
+                height: px(Math.max(h, 0)),
+                fill: c.close >= c.open ? UP$1 : DOWN$1,
+                opacity: 0.4,
+                title: `${labels[i]}: volume ${format(c.volume)}`,
+            });
+        });
+    }
+    const hit = {
+        plot: outer,
+        xs: data.map((_, i) => px(x.center(i))),
+        rows,
+        count,
+        zoom,
+        crosshair: input.crosshair ?? false,
+    };
+    if (input.brush) {
+        const box = {
+            x: outer.x,
+            y: outer.y + outer.height + BRUSH_GAP,
+            width: outer.width,
+            height: BRUSH_HEIGHT,
+        };
+        const closes = all.map((c) => c.close);
+        const [lo, hi] = minMax(closes);
+        const step = count > 1 ? box.width / (count - 1) : 0;
+        const pts = closes.map((v, i) => ({
+            x: px(box.x + i * step),
+            y: px(box.y + box.height - (hi === lo ? 0.5 : (v - lo) / (hi - lo)) * (box.height - 4) - 2),
+        }));
+        const window = {
+            x: px(box.x + (start / count) * box.width),
+            y: box.y,
+            width: px(((end - start) / count) * box.width),
+            height: box.height,
+        };
         shapes.push({
-            kind: 'line',
-            part: 'wick',
-            x1: px(x.center(i)),
-            x2: px(x.center(i)),
-            y1: px(y.scale(c.high)),
-            y2: px(y.scale(c.low)),
-            stroke: color,
-            title,
+            kind: 'rect',
+            part: 'brush',
+            ...box,
+            fill: 'var(--skdx-color-surface-sunken)',
+            stroke: CHART_COLORS.grid,
+        }, {
+            kind: 'path',
+            part: 'brush-series',
+            d: pts.length > 1
+                ? `${pathThrough(pts)}L${pts[pts.length - 1]?.x} ${box.y + box.height}L${pts[0]?.x} ${box.y + box.height}Z`
+                : '',
+            fill: 'var(--skdx-color-primary-500)',
+            fillOpacity: 0.3,
         }, {
             kind: 'rect',
-            part: 'candle',
-            x: px(x.start(i)),
-            y: px(top),
-            width: px(x.bandwidth),
-            height: px(Math.max(1, bottom - top)),
-            fill: color,
-            title,
+            part: 'brush-window',
+            ...window,
+            fill: 'var(--skdx-color-primary-500)',
+            opacity: 0.15,
+            stroke: CHART_COLORS.axis,
+        }, {
+            kind: 'rect',
+            part: 'brush-handle',
+            x: px(window.x - 3),
+            y: box.y + 8,
+            width: 6,
+            height: box.height - 16,
+            fill: CHART_COLORS.axis,
+            rx: 2,
+        }, {
+            kind: 'rect',
+            part: 'brush-handle',
+            x: px(window.x + window.width - 3),
+            y: box.y + 8,
+            width: 6,
+            height: box.height - 16,
+            fill: CHART_COLORS.axis,
+            rx: 2,
         });
-    });
-    return { ...c, shapes: [...shapes, ...c.shapes] };
+        hit.brush = { box, window };
+    }
+    return { ...c0, shapes: [...shapes, ...c0.shapes], hit };
 }
 
 /*
@@ -1068,11 +2872,16 @@ function layoutCandlestick(input) {
 const UP = 'var(--skdx-color-success-500)';
 const DOWN = 'var(--skdx-color-danger-500)';
 function layoutWaterfall(input) {
+    const data = input.data.filter((d) => isFinite(d.value));
+    const state = stateCanvas(input, data.length === 0);
+    if (state)
+        return state;
+    const formatValue = makeFormatter(input.format);
     const { width, height } = size(input);
     const plot = plotBox(width, height, { ...MARGIN$1, top: MARGIN$1.top + legendTop(input) });
     const steps = [];
     let running = 0;
-    for (const d of input.data) {
+    for (const d of data) {
         const from = running;
         running += d.value;
         steps.push({
@@ -1088,11 +2897,11 @@ function layoutWaterfall(input) {
             name: input.total,
             from: 0,
             to: running,
-            color: seriesColor(0),
+            color: colorOf(input, 0),
             title: `${input.total}: ${formatValue(running)}`,
         });
     const totals = steps.flatMap((s) => [s.from, s.to]);
-    const y = axis([Math.min(0, ...totals), Math.max(0, ...totals)], [plot.y + plot.height, plot.y]);
+    const y = axis([Math.min(0, ...totals), Math.max(0, ...totals)], [plot.y + plot.height, plot.y], {}, input.format);
     const x = bandScale(steps.length, [plot.x, plot.x + plot.width]);
     const c = canvas(input, width, height, [
         { name: 'Increase', color: UP },
@@ -1101,7 +2910,7 @@ function layoutWaterfall(input) {
     const shapes = frameShapes({
         ...c,
         plot,
-        xTicks: steps.map((s, i) => ({ pos: px(x.center(i)), label: s.name })),
+        xTicks: thinTicks(steps.map((s, i) => ({ pos: px(x.center(i)), label: s.name })), plot.width),
         yTicks: y.ticks,
         baseline: y.zero,
     });
@@ -1117,6 +2926,7 @@ function layoutWaterfall(input) {
             height: px(Math.max(1, Math.abs(y1 - y0))),
             fill: s.color,
             title: s.title,
+            item: { label: s.title, name: s.name, index: i, value: s.to - s.from },
         });
         const next = steps[i + 1];
         if (next)
@@ -1139,24 +2949,30 @@ function layoutWaterfall(input) {
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
+/**
+ * Intervals on a numeric time axis, one row per task, or per `group` when tasks share one.
+ * Generic enough for schedules, on-call shifts, uptime windows and market sessions.
+ */
 function layoutGantt(input) {
+    const tasks = input.tasks.filter((t) => isFinite(t.start) && isFinite(t.end));
+    const state = stateCanvas(input, tasks.length === 0);
+    if (state)
+        return state;
     const { width, height } = size(input);
+    const rowNames = [...new Set(tasks.map((t) => t.group ?? t.name))];
+    const widest = Math.max(0, ...rowNames.map((n) => n.length)) * CHAR;
     const plot = plotBox(width, height, {
         top: 8 + legendTop(input),
         right: 16,
         bottom: 32,
-        left: 112,
+        left: Math.min(width / 2, Math.max(64, widest + 16)),
     });
-    const format = input.format ?? formatValue;
-    const times = input.tasks.flatMap((t) => [t.start, t.end]);
-    const x = axis(times.length ? [Math.min(...times), Math.max(...times)] : [0, 0], [
-        plot.x,
-        plot.x + plot.width,
-    ]);
-    const rows = bandScale(input.tasks.length, [plot.y, plot.y + plot.height]);
+    const format = makeFormatter(input.format);
+    const [lo, hi] = minMax(tasks.flatMap((t) => [t.start, t.end]));
+    const x = axis([lo, hi], [plot.x, plot.x + plot.width], {}, input.format);
+    const rows = bandScale(rowNames.length, [plot.y, plot.y + plot.height]);
     const shapes = [];
-    const ticks = x.ticks.map((t) => ({ ...t, label: format(Number(t.label.replace(/,/g, ''))) }));
-    for (const t of ticks) {
+    for (const t of thinTicks(x.ticks, plot.width)) {
         shapes.push({
             kind: 'line',
             part: 'grid',
@@ -1168,26 +2984,37 @@ function layoutGantt(input) {
         });
         shapes.push(label(t.pos, plot.y + plot.height + 20, t.label, { part: 'x-label', anchor: 'middle' }));
     }
-    input.tasks.forEach((t, i) => {
+    rowNames.forEach((name, i) => shapes.push(label(plot.x - 8, px(rows.center(i)), name, {
+        part: 'y-label',
+        anchor: 'end',
+        baseline: 'middle',
+    })));
+    shapes.push(...referenceShapes(input.references, {
+        plot,
+        x: (v) => x.scale(categoryValue(v)),
+        y: (v) => rows.center(v),
+    }));
+    tasks.forEach((t, i) => {
+        if (isHidden(input, t.name))
+            return;
+        const row = rowNames.indexOf(t.group ?? t.name);
         const x0 = x.scale(Math.min(t.start, t.end));
         const x1 = x.scale(Math.max(t.start, t.end));
-        shapes.push(label(plot.x - 8, px(rows.center(i)), t.name, {
-            part: 'y-label',
-            anchor: 'end',
-            baseline: 'middle',
-        }));
+        const title = `${t.name}: ${format(t.start)} – ${format(t.end)}`;
         shapes.push({
             kind: 'rect',
             part: 'bar',
             x: px(x0),
-            y: px(rows.start(i)),
+            y: px(rows.start(row)),
             width: px(Math.max(1, x1 - x0)),
             height: px(rows.bandwidth),
-            fill: seriesColor(i, t.color),
-            title: `${t.name}: ${format(t.start)} – ${format(t.end)}`,
+            fill: colorOf(input, i, t.color),
+            rx: 2,
+            title,
+            item: { label: title, name: t.name, category: t.group, index: i, value: t.end - t.start },
         });
     });
-    const c = canvas(input, width, height, input.tasks.map((t, i) => ({ name: t.name, color: seriesColor(i, t.color) })));
+    const c = canvas(input, width, height, input.tasks.map((t, i) => ({ name: t.name, color: colorOf(input, i, t.color) })));
     return { ...c, shapes: [...shapes, ...c.shapes] };
 }
 
@@ -1209,7 +3036,7 @@ const quantile = (sorted, q) => {
 };
 /** Five-number summary with Tukey fences: whiskers reach the last sample within 1.5 IQR. */
 function boxStats(data) {
-    const sorted = [...data].sort((a, b) => a - b);
+    const sorted = finite(data).sort((a, b) => a - b);
     const q1 = quantile(sorted, 0.25);
     const median = quantile(sorted, 0.5);
     const q3 = quantile(sorted, 0.75);
@@ -1225,21 +3052,27 @@ function boxStats(data) {
     };
 }
 function layoutBoxplot(input) {
+    const state = stateCanvas(input, input.series.every((s) => finite(s.data).length === 0));
+    if (state)
+        return state;
+    const formatValue = makeFormatter(input.format);
     const { width, height } = size(input);
     const plot = plotBox(width, height, { ...MARGIN$1, top: MARGIN$1.top + legendTop(input) });
-    const y = axis(extent(input.series.flatMap((s) => s.data), false), [plot.y + plot.height, plot.y]);
+    const y = axis(extent(input.series.flatMap((s) => (isHidden(input, s.name) ? [] : s.data)), false), [plot.y + plot.height, plot.y], {}, input.format);
     const x = bandScale(input.series.length, [plot.x, plot.x + plot.width]);
-    const c = canvas(input, width, height, input.series.map((s, i) => ({ name: s.name, color: seriesColor(i, s.color) })));
+    const c = canvas(input, width, height, input.series.map((s, i) => ({ name: s.name, color: colorOf(input, i, s.color) })));
     const shapes = frameShapes({
         ...c,
         plot,
-        xTicks: input.series.map((s, i) => ({ pos: px(x.center(i)), label: s.name })),
+        xTicks: thinTicks(input.series.map((s, i) => ({ pos: px(x.center(i)), label: s.name })), plot.width),
         yTicks: y.ticks,
         baseline: plot.y + plot.height,
     });
     input.series.forEach((s, i) => {
+        if (isHidden(input, s.name) || finite(s.data).length === 0)
+            return;
         const st = boxStats(s.data);
-        const color = seriesColor(i, s.color);
+        const color = colorOf(input, i, s.color);
         const cx = px(x.center(i));
         const title = `${s.name}: min ${formatValue(st.low)} Q1 ${formatValue(st.q1)} median ${formatValue(st.median)} Q3 ${formatValue(st.q3)} max ${formatValue(st.high)}`;
         const boxW = x.bandwidth * 0.6;
@@ -1264,6 +3097,7 @@ function layoutBoxplot(input) {
             stroke: color,
             opacity: 0.5,
             title,
+            item: { label: title, series: s.name, index: i, value: st.median },
         }, {
             kind: 'line',
             part: 'median',
@@ -1292,9 +3126,13 @@ function layoutBoxplot(input) {
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
 const TAU$1 = 2 * Math.PI;
-const nodeValue = (n) => n.value ?? (n.children ?? []).reduce((s, c) => s + nodeValue(c), 0);
+const nodeValue = (n) => isFinite(n.value) ? n.value : (n.children ?? []).reduce((s, c) => s + nodeValue(c), 0);
 const depthOf = (nodes) => nodes.length === 0 ? 0 : 1 + Math.max(...nodes.map((n) => depthOf(n.children ?? [])));
 function layoutSunburst(input) {
+    const state = stateCanvas(input, !input.data.some((n) => nodeValue(n) > 0), 300, 300);
+    if (state)
+        return state;
+    const formatValue = makeFormatter(input.format);
     const { width, height } = size(input, 300, 300);
     const top = legendTop(input);
     const cx = width / 2;
@@ -1305,9 +3143,9 @@ function layoutSunburst(input) {
         const total = nodes.reduce((s, n) => s + Math.max(0, nodeValue(n)), 0);
         let angle = a0;
         nodes.forEach((n, i) => {
-            const value = Math.max(0, nodeValue(n));
+            const value = depth === 0 && isHidden(input, n.name) ? 0 : Math.max(0, nodeValue(n));
             const sweep = total > 0 ? (value / total) * span : 0;
-            const fill = n.color ?? color ?? seriesColor(i);
+            const fill = n.color ?? color ?? colorOf(input, i);
             if (sweep > 0) {
                 shapes.push({
                     kind: 'path',
@@ -1317,6 +3155,7 @@ function layoutSunburst(input) {
                     opacity: 1 - depth * 0.2,
                     stroke: 'var(--skdx-color-surface-default)',
                     title: `${n.name}: ${formatValue(value)}`,
+                    item: { label: `${n.name}: ${formatValue(value)}`, name: n.name, value },
                 });
                 walk(n.children ?? [], depth + 1, angle, sweep, fill);
             }
@@ -1324,7 +3163,7 @@ function layoutSunburst(input) {
         });
     };
     walk(input.data, 0, 0, TAU$1, undefined);
-    const c = canvas(input, width, height, input.data.map((n, i) => ({ name: n.name, color: n.color ?? seriesColor(i) })));
+    const c = canvas(input, width, height, input.data.map((n, i) => ({ name: n.name, color: colorOf(input, i, n.color) })));
     return { ...c, shapes: [...shapes, ...c.shapes] };
 }
 
@@ -1337,6 +3176,10 @@ const TAU = 2 * Math.PI;
 const PAD$1 = 0.04;
 const RING = 12;
 function layoutChord(input) {
+    const state = stateCanvas(input, input.names.length === 0 || !input.matrix.some((row) => row.some((v) => isFinite(v) && v > 0)), 300, 300);
+    if (state)
+        return state;
+    const formatValue = makeFormatter(input.format);
     const { width, height } = size(input, 300, 300);
     const top = legendTop(input);
     const cx = width / 2;
@@ -1344,7 +3187,11 @@ function layoutChord(input) {
     const r = Math.max(0, Math.min(width, height - top) / 2 - 36);
     const r0 = Math.max(0, r - RING);
     const n = input.names.length;
-    const cell = (i, j) => Math.max(0, input.matrix[i]?.[j] ?? 0);
+    const cell = (i, j) => {
+        const v = input.matrix[i]?.[j];
+        const hidden = isHidden(input, input.names[i]) || isHidden(input, input.names[j]);
+        return hidden || !isFinite(v) ? 0 : Math.max(0, v);
+    };
     const rowSum = input.names.map((_, i) => input.names.reduce((s, _n, j) => s + cell(i, j), 0));
     const total = rowSum.reduce((s, v) => s + v, 0);
     const unit = total > 0 ? (TAU - PAD$1 * n) / total : 0;
@@ -1380,7 +3227,7 @@ function layoutChord(input) {
                 kind: 'path',
                 part: 'chord',
                 d,
-                fill: seriesColor(from),
+                fill: colorOf(input, from),
                 opacity: 0.5,
                 title: i === j
                     ? `${input.names[i]}: ${formatValue(out)}`
@@ -1395,8 +3242,14 @@ function layoutChord(input) {
             kind: 'path',
             part: 'group',
             d: arc(cx, cy, r, r0, g.a0, g.a1),
-            fill: seriesColor(i),
+            fill: colorOf(input, i),
             title: `${input.names[i]}: ${formatValue(rowSum[i])}`,
+            item: {
+                label: `${input.names[i]}: ${formatValue(rowSum[i])}`,
+                name: input.names[i],
+                index: i,
+                value: rowSum[i],
+            },
         });
         const mid = (g.a0 + g.a1) / 2;
         const sin = Math.sin(mid);
@@ -1405,7 +3258,7 @@ function layoutChord(input) {
             baseline: 'middle',
         }));
     });
-    const c = canvas(input, width, height, input.names.map((name, i) => ({ name, color: seriesColor(i) })));
+    const c = canvas(input, width, height, input.names.map((name, i) => ({ name, color: colorOf(input, i) })));
     return { ...c, shapes: [...shapes, ...c.shapes] };
 }
 
@@ -1420,23 +3273,22 @@ const rings = (f) => f.geometry.type === 'Polygon' ? f.geometry.coordinates : f.
 const mercatorY = (lat) => Math.log(Math.tan(Math.PI / 4 + (Math.max(-85, Math.min(85, lat)) * Math.PI) / 360));
 /** Projection fitted to the features' bounds (equirectangular by default, or Mercator); opacity follows the value. */
 function layoutMap(input) {
+    const state = stateCanvas(input, input.features.length === 0);
+    if (state)
+        return state;
+    const formatValue = makeFormatter(input.format);
     const { width, height } = size(input);
     const top = legendTop(input);
     const toY = input.projection === 'mercator' ? mercatorY : (lat) => lat;
     const points = input.features.flatMap((f) => rings(f).flat());
-    const lons = points.map((p) => p[0]);
-    const lats = points.map((p) => toY(p[1]));
-    const [minLon, maxLon, minLat, maxLat] = points.length
-        ? [Math.min(...lons), Math.max(...lons), Math.min(...lats), Math.max(...lats)]
-        : [0, 1, 0, 1];
+    const [minLon, maxLon] = points.length ? minMax(points.map((p) => p[0])) : [0, 1];
+    const [minLat, maxLat] = points.length ? minMax(points.map((p) => toY(p[1]))) : [0, 1];
     const scale = Math.min((width - 2 * PAD) / Math.max(1e-9, maxLon - minLon), (height - top - 2 * PAD) / Math.max(1e-9, maxLat - minLat));
     const ox = (width - (maxLon - minLon) * scale) / 2;
     const oy = top + (height - top - (maxLat - minLat) * scale) / 2;
     const project = ([lon, lat]) => `${px(ox + (lon - minLon) * scale)} ${px(oy + (maxLat - toY(lat)) * scale)}`;
-    const values = input.features.map((f) => f.value);
-    const min = Math.min(...values);
-    const max = Math.max(...values);
-    const color = seriesColor(0, input.color);
+    const [min, max] = minMax(input.features.map((f) => f.value));
+    const color = colorOf(input, 0, input.color);
     const shapes = input.features.map((f) => ({
         kind: 'path',
         part: 'region',
@@ -1444,9 +3296,12 @@ function layoutMap(input) {
             .map((ring) => `M${ring.map(project).join('L')}Z`)
             .join(''),
         fill: color,
-        opacity: max === min ? 1 : px(0.15 + (0.85 * (f.value - min)) / (max - min)),
+        opacity: max === min || !Number.isFinite(f.value)
+            ? 1
+            : px(0.15 + (0.85 * (f.value - min)) / (max - min)),
         stroke: 'var(--skdx-color-surface-default)',
         title: `${f.name}: ${formatValue(f.value)}`,
+        item: { label: `${f.name}: ${formatValue(f.value)}`, name: f.name, value: f.value },
     }));
     return { ...canvas(input, width, height), shapes };
 }
@@ -1462,7 +3317,7 @@ function layoutMap(input) {
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-/** Draws a core shape list back to front. */
+/** Draws a core shape list back to front; marks with an `item` carry their index for hit-testing. */
 class SkdxChartShapesComponent {
     constructor() {
         this.shapes = input.required(/* @ts-ignore */
@@ -1475,12 +3330,14 @@ class SkdxChartShapesComponent {
         @case ('path') {
           <svg:path
             [attr.data-skdx-part]="s.part"
+            [attr.data-skdx-i]="s.item ? $index : null"
             [attr.d]="s.d"
             [attr.fill]="s.fill ?? 'none'"
             [attr.stroke]="s.stroke"
             [attr.stroke-width]="s.strokeWidth"
             [attr.stroke-linecap]="s.strokeLinecap"
             [attr.stroke-linejoin]="s.strokeLinejoin"
+            [attr.stroke-dasharray]="s.dash"
             [attr.opacity]="s.opacity"
             [attr.fill-opacity]="s.fillOpacity"
           >
@@ -1492,10 +3349,12 @@ class SkdxChartShapesComponent {
         @case ('rect') {
           <svg:rect
             [attr.data-skdx-part]="s.part"
+            [attr.data-skdx-i]="s.item ? $index : null"
             [attr.x]="s.x"
             [attr.y]="s.y"
             [attr.width]="s.width"
             [attr.height]="s.height"
+            [attr.rx]="s.rx"
             [attr.fill]="s.fill"
             [attr.stroke]="s.stroke"
             [attr.fill-opacity]="s.opacity"
@@ -1508,11 +3367,13 @@ class SkdxChartShapesComponent {
         @case ('line') {
           <svg:line
             [attr.data-skdx-part]="s.part"
+            [attr.data-skdx-i]="s.item ? $index : null"
             [attr.x1]="s.x1"
             [attr.y1]="s.y1"
             [attr.x2]="s.x2"
             [attr.y2]="s.y2"
             [attr.stroke]="s.stroke"
+            [attr.stroke-width]="s.strokeWidth"
             [attr.stroke-dasharray]="s.dash"
           >
             @if (s.title) {
@@ -1523,10 +3384,13 @@ class SkdxChartShapesComponent {
         @case ('circle') {
           <svg:circle
             [attr.data-skdx-part]="s.part"
+            [attr.data-skdx-i]="s.item ? $index : null"
             [attr.cx]="s.cx"
             [attr.cy]="s.cy"
             [attr.r]="s.r"
             [attr.fill]="s.fill"
+            [attr.stroke]="s.stroke"
+            [attr.opacity]="s.opacity"
           >
             @if (s.title) {
               <svg:title>{{ s.title }}</svg:title>
@@ -1536,14 +3400,15 @@ class SkdxChartShapesComponent {
         @case ('text') {
           <svg:text
             [attr.data-skdx-part]="s.part"
+            [attr.data-skdx-i]="s.item ? $index : null"
             [attr.x]="s.x"
             [attr.y]="s.y"
             [attr.text-anchor]="s.anchor"
             [attr.dominant-baseline]="s.baseline"
             [attr.fill]="s.fill"
-          >
-            {{ s.text }}
-          </svg:text>
+            [attr.font-weight]="s.weight"
+            [textContent]="s.text"
+          ></svg:text>
         }
       }
     }
@@ -1561,12 +3426,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         @case ('path') {
           <svg:path
             [attr.data-skdx-part]="s.part"
+            [attr.data-skdx-i]="s.item ? $index : null"
             [attr.d]="s.d"
             [attr.fill]="s.fill ?? 'none'"
             [attr.stroke]="s.stroke"
             [attr.stroke-width]="s.strokeWidth"
             [attr.stroke-linecap]="s.strokeLinecap"
             [attr.stroke-linejoin]="s.strokeLinejoin"
+            [attr.stroke-dasharray]="s.dash"
             [attr.opacity]="s.opacity"
             [attr.fill-opacity]="s.fillOpacity"
           >
@@ -1578,10 +3445,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         @case ('rect') {
           <svg:rect
             [attr.data-skdx-part]="s.part"
+            [attr.data-skdx-i]="s.item ? $index : null"
             [attr.x]="s.x"
             [attr.y]="s.y"
             [attr.width]="s.width"
             [attr.height]="s.height"
+            [attr.rx]="s.rx"
             [attr.fill]="s.fill"
             [attr.stroke]="s.stroke"
             [attr.fill-opacity]="s.opacity"
@@ -1594,11 +3463,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         @case ('line') {
           <svg:line
             [attr.data-skdx-part]="s.part"
+            [attr.data-skdx-i]="s.item ? $index : null"
             [attr.x1]="s.x1"
             [attr.y1]="s.y1"
             [attr.x2]="s.x2"
             [attr.y2]="s.y2"
             [attr.stroke]="s.stroke"
+            [attr.stroke-width]="s.strokeWidth"
             [attr.stroke-dasharray]="s.dash"
           >
             @if (s.title) {
@@ -1609,10 +3480,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         @case ('circle') {
           <svg:circle
             [attr.data-skdx-part]="s.part"
+            [attr.data-skdx-i]="s.item ? $index : null"
             [attr.cx]="s.cx"
             [attr.cy]="s.cy"
             [attr.r]="s.r"
             [attr.fill]="s.fill"
+            [attr.stroke]="s.stroke"
+            [attr.opacity]="s.opacity"
           >
             @if (s.title) {
               <svg:title>{{ s.title }}</svg:title>
@@ -1622,14 +3496,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
         @case ('text') {
           <svg:text
             [attr.data-skdx-part]="s.part"
+            [attr.data-skdx-i]="s.item ? $index : null"
             [attr.x]="s.x"
             [attr.y]="s.y"
             [attr.text-anchor]="s.anchor"
             [attr.dominant-baseline]="s.baseline"
             [attr.fill]="s.fill"
-          >
-            {{ s.text }}
-          </svg:text>
+            [attr.font-weight]="s.weight"
+            [textContent]="s.text"
+          ></svg:text>
         }
       }
     }
@@ -1642,7 +3517,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * This file is part of the SkandaDX organization.
  * Licensed under the MIT License. See LICENSE in the repository root.
  */
-/** The accessible `<svg>` root every chart renders into: projected marks, then decorations, then the hover tooltip. */
+/**
+ * The accessible `<svg>` root every chart renders into: marks, decorations, then the hover or
+ * keyboard tooltip. Owns focus state; reports legend toggles and zoom changes to the chart.
+ */
 class SkdxChartRootComponent {
     constructor() {
         this.layout = input.required(/* @ts-ignore */
@@ -1651,37 +3529,219 @@ class SkdxChartRootComponent {
         ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
         this.label = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Wheel and pinch zoom, drag pans the category axis. */
+        this.zoomable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "zoomable" }] : /* istanbul ignore next */ []));
+        /** Measure the host and report its width, so the chart can lay out at that width. */
+        this.responsive = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
+        /** A mark was clicked, or Enter/Space was pressed on the focused mark. */
+        this.itemClick = output();
+        /** The legend toggled a series; the chart applies it through its `hiddenSeries` model. */
+        this.hiddenSeriesChange = output();
+        /** Wheel, drag, pinch or brush moved the window; the chart applies it through its `zoom` model. */
+        this.zoomChange = output();
+        /** The host's measured width, under `responsive`. */
+        this.measured = output();
         this.colors = CHART_COLORS;
+        this.duration = computed(() => animationDuration(this.layout()) ?? null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "duration" }] : /* istanbul ignore next */ []));
+        this.pointers = new Map();
+        this.svg = viewChild.required('svg', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "svg" }] : /* istanbul ignore next */ []));
         this.tip = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tip" }] : /* istanbul ignore next */ []));
+        this.focused = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
+        this.canZoom = computed(() => {
+            const hit = this.layout().hit;
+            return Boolean(hit && (this.zoomable() || hit.brush));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canZoom" }] : /* istanbul ignore next */ []));
+        this.focusable = computed(() => !this.layout().decorative && focusTargets(this.layout()).length > 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusable" }] : /* istanbul ignore next */ []));
+        this.descId = computed(() => this.layout().description ? `${this.kind()}-desc-${this.label().replace(/\W+/g, '-')}` : null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "descId" }] : /* istanbul ignore next */ []));
+        this.focusShapes = computed(() => focusShapes(this.layout(), this.focused()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "focusShapes" }] : /* istanbul ignore next */ []));
+        this.drag = null;
+        const host = inject(ElementRef).nativeElement;
+        const destroy = inject(DestroyRef);
+        afterNextRender(() => {
+            // Angular strips `<style>` from templates and cannot resolve imported `styles` statically,
+            // so the animation stylesheet is appended once; it is inert until `--skdx-chart-duration` is set.
+            const style = document.createElementNS('http://www.w3.org/2000/svg', 'style');
+            style.textContent = ANIMATION_CSS;
+            this.svg().nativeElement.prepend(style);
+            if (typeof ResizeObserver === 'undefined')
+                return;
+            const ro = new ResizeObserver(([entry]) => {
+                const w = Math.floor(entry?.contentRect.width ?? 0);
+                if (w > 0 && this.responsive())
+                    this.measured.emit(w);
+            });
+            ro.observe(host);
+            destroy.onDestroy(() => ro.disconnect());
+        });
+    }
+    viewBox(e) {
+        const { width, height } = this.layout();
+        return toViewBox(e.currentTarget, e.clientX, e.clientY, width, height);
     }
     onPointerMove(e) {
-        if (!this.layout().tooltip)
+        const layout = this.layout();
+        if (this.pointers.has(e.pointerId))
+            this.pointers.set(e.pointerId, this.viewBox(e).x);
+        if (this.drag && layout.hit) {
+            const d = this.drag;
+            if (d.grab === 'pinch') {
+                const [a, b] = [...this.pointers.values()];
+                if (a === undefined || b === undefined || !d.distance)
+                    return;
+                this.zoomChange.emit(zoomPinch(layout.hit, d.zoom, Math.abs(a - b) / d.distance, (a + b) / 2));
+                return;
+            }
+            const { x } = this.viewBox(e);
+            this.zoomChange.emit(d.grab === 'pan'
+                ? zoomPan(layout.hit, d.zoom, x - d.x)
+                : brushDrag(layout.hit, d.grab, d.zoom, x - d.x));
             return;
-        const { width, height } = this.layout();
-        const next = hoverTooltip(e.target, e.currentTarget, e.clientX, e.clientY, width, height);
+        }
+        if (!layout.tooltip)
+            return;
+        const next = pointerShapes(layout, e.target, e.currentTarget, e.clientX, e.clientY);
         if (next.length > 0 || this.tip().length > 0)
             this.tip.set(next);
     }
+    onPointerDown(e) {
+        const hit = this.layout().hit;
+        if (!hit || !this.canZoom() || e.button !== 0)
+            return;
+        const { x, y } = this.viewBox(e);
+        this.pointers.set(e.pointerId, x);
+        if (this.pointers.size === 2) {
+            // A second finger turns any drag into a pinch around the midpoint.
+            const [a, b] = [...this.pointers.values()];
+            this.drag = { x: (a + b) / 2, zoom: hit.zoom, grab: 'pinch', distance: Math.abs(a - b) || 1 };
+        }
+        else {
+            const grabbed = brushGrab(hit, x, y);
+            if (grabbed) {
+                this.drag = { x, zoom: grabbed.zoom, grab: grabbed.grab };
+                if (grabbed.zoom !== hit.zoom)
+                    this.zoomChange.emit(grabbed.zoom);
+            }
+            else if (this.zoomable() &&
+                x >= hit.plot.x &&
+                x <= hit.plot.x + hit.plot.width &&
+                y >= hit.plot.y &&
+                y <= hit.plot.y + hit.plot.height)
+                this.drag = { x, zoom: hit.zoom, grab: 'pan' };
+            else {
+                this.pointers.delete(e.pointerId);
+                return;
+            }
+        }
+        e.currentTarget.setPointerCapture(e.pointerId);
+        this.tip.set([]);
+    }
+    onPointerUp(e) {
+        this.pointers.delete(e.pointerId);
+        const el = e.currentTarget;
+        if (el.hasPointerCapture(e.pointerId))
+            el.releasePointerCapture(e.pointerId);
+        if (this.pointers.size === 0 || this.drag?.grab === 'pinch')
+            this.drag = null;
+    }
+    onWheel(e) {
+        const hit = this.layout().hit;
+        if (!hit || !this.canZoom())
+            return;
+        const { x, y } = this.viewBox(e);
+        if (y < hit.plot.y || y > hit.plot.y + hit.plot.height)
+            return;
+        const next = zoomWheel(hit, e.deltaY, x);
+        if (!next)
+            return;
+        e.preventDefault();
+        this.zoomChange.emit(next);
+    }
+    onClick(e) {
+        const hit = itemAt(this.layout(), e.target);
+        if (!hit)
+            return;
+        if (hit.item.legend && hit.item.series !== undefined)
+            this.hiddenSeriesChange.emit([hit.item.series]);
+        else
+            this.itemClick.emit(hit.item);
+    }
+    onKeyDown(e) {
+        if (!this.focusable())
+            return;
+        const focused = this.focused();
+        if ((e.key === 'Enter' || e.key === ' ') && focused !== null) {
+            const item = this.layout().shapes[focused]?.item;
+            if (item) {
+                e.preventDefault();
+                this.itemClick.emit(item);
+            }
+            return;
+        }
+        const next = nextFocus(this.layout(), focused, e.key);
+        if (next === undefined)
+            return;
+        e.preventDefault();
+        this.focused.set(next);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxChartRootComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.4", type: SkdxChartRootComponent, isStandalone: true, selector: "skdx-chart-root", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null } }, host: { styleAttribute: "display: inline-block" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.4", type: SkdxChartRootComponent, isStandalone: true, selector: "skdx-chart-root", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: true, transformFunction: null }, kind: { classPropertyName: "kind", publicName: "kind", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, zoomable: { classPropertyName: "zoomable", publicName: "zoomable", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick", hiddenSeriesChange: "hiddenSeriesChange", zoomChange: "zoomChange", measured: "measured" }, host: { properties: { "style.display": "responsive() ? 'block' : 'inline-block'" } }, viewQueries: [{ propertyName: "svg", first: true, predicate: ["svg"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <svg
+      #svg
       xmlns="http://www.w3.org/2000/svg"
       [attr.viewBox]="'0 0 ' + layout().width + ' ' + layout().height"
       [attr.width]="layout().width"
       [attr.height]="layout().height"
-      role="img"
-      [attr.aria-label]="label()"
+      [attr.role]="layout().decorative ? 'presentation' : 'img'"
+      [attr.aria-hidden]="layout().decorative ? 'true' : null"
+      [attr.aria-label]="layout().decorative ? null : label()"
+      [attr.aria-describedby]="descId()"
+      [attr.tabindex]="focusable() ? 0 : null"
       [attr.data-skdx-chart]="kind()"
       [attr.font-family]="colors.fontFamily"
       [attr.font-size]="colors.fontSize"
-      style="max-width: 100%; height: auto"
+      [style.max-width]="'100%'"
+      [style.height]="'auto'"
+      [style.outline]="'none'"
+      [style.cursor]="canZoom() ? 'grab' : null"
+      [style.touch-action]="canZoom() ? 'none' : null"
+      [style.--skdx-chart-duration]="duration()"
       (pointermove)="onPointerMove($event)"
       (pointerleave)="tip.set([])"
+      (pointerdown)="onPointerDown($event)"
+      (pointerup)="onPointerUp($event)"
+      (pointercancel)="onPointerUp($event)"
+      (wheel)="onWheel($event)"
+      (dblclick)="canZoom() && zoomChange.emit(undefined)"
+      (click)="onClick($event)"
+      (keydown)="onKeyDown($event)"
+      (blur)="focused.set(null)"
     >
       <title>{{ label() }}</title>
-      <svg:g skdxChartShapes [shapes]="layout().shapes"></svg:g>
-      <svg:g skdxChartShapes [shapes]="tip()"></svg:g>
+      @if (layout().description) {
+        <svg:desc [attr.id]="descId()">{{ layout().description }}</svg:desc>
+      }
+      <svg:g
+        skdxChartShapes
+        [shapes]="layout().shapes"
+      ></svg:g>
+      <svg:g
+        skdxChartShapes
+        [shapes]="tip()"
+      ></svg:g>
+      <svg:g
+        skdxChartShapes
+        [shapes]="focusShapes()"
+      ></svg:g>
     </svg>
   `, isInline: true, dependencies: [{ kind: "component", type: SkdxChartShapesComponent, selector: "g[skdxChartShapes]", inputs: ["shapes"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -1691,31 +3751,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
                     selector: 'skdx-chart-root',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    host: { style: 'display: inline-block' },
+                    host: { '[style.display]': "responsive() ? 'block' : 'inline-block'" },
                     imports: [SkdxChartShapesComponent],
                     template: `
     <svg
+      #svg
       xmlns="http://www.w3.org/2000/svg"
       [attr.viewBox]="'0 0 ' + layout().width + ' ' + layout().height"
       [attr.width]="layout().width"
       [attr.height]="layout().height"
-      role="img"
-      [attr.aria-label]="label()"
+      [attr.role]="layout().decorative ? 'presentation' : 'img'"
+      [attr.aria-hidden]="layout().decorative ? 'true' : null"
+      [attr.aria-label]="layout().decorative ? null : label()"
+      [attr.aria-describedby]="descId()"
+      [attr.tabindex]="focusable() ? 0 : null"
       [attr.data-skdx-chart]="kind()"
       [attr.font-family]="colors.fontFamily"
       [attr.font-size]="colors.fontSize"
-      style="max-width: 100%; height: auto"
+      [style.max-width]="'100%'"
+      [style.height]="'auto'"
+      [style.outline]="'none'"
+      [style.cursor]="canZoom() ? 'grab' : null"
+      [style.touch-action]="canZoom() ? 'none' : null"
+      [style.--skdx-chart-duration]="duration()"
       (pointermove)="onPointerMove($event)"
       (pointerleave)="tip.set([])"
+      (pointerdown)="onPointerDown($event)"
+      (pointerup)="onPointerUp($event)"
+      (pointercancel)="onPointerUp($event)"
+      (wheel)="onWheel($event)"
+      (dblclick)="canZoom() && zoomChange.emit(undefined)"
+      (click)="onClick($event)"
+      (keydown)="onKeyDown($event)"
+      (blur)="focused.set(null)"
     >
       <title>{{ label() }}</title>
-      <svg:g skdxChartShapes [shapes]="layout().shapes"></svg:g>
-      <svg:g skdxChartShapes [shapes]="tip()"></svg:g>
+      @if (layout().description) {
+        <svg:desc [attr.id]="descId()">{{ layout().description }}</svg:desc>
+      }
+      <svg:g
+        skdxChartShapes
+        [shapes]="layout().shapes"
+      ></svg:g>
+      <svg:g
+        skdxChartShapes
+        [shapes]="tip()"
+      ></svg:g>
+      <svg:g
+        skdxChartShapes
+        [shapes]="focusShapes()"
+      ></svg:g>
     </svg>
   `,
                 }]
-        }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }] } });
-/** The `<svg>` root, grid, axis and tick labels every axis chart shares; marks are projected. */
+        }], ctorParameters: () => [], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: true }] }], kind: [{ type: i0.Input, args: [{ isSignal: true, alias: "kind", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], zoomable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomable", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], hiddenSeriesChange: [{ type: i0.Output, args: ["hiddenSeriesChange"] }], zoomChange: [{ type: i0.Output, args: ["zoomChange"] }], measured: [{ type: i0.Output, args: ["measured"] }], svg: [{ type: i0.ViewChild, args: ['svg', { isSignal: true }] }] } });
+/** Size, state, formatting, accessibility and interaction inputs every chart takes. */
 class SkdxSizedBase {
     constructor() {
         this.width = input(/* @ts-ignore */
@@ -1731,39 +3821,164 @@ class SkdxSizedBase {
         /** Show a hover tooltip for the mark under the pointer. */
         this.tooltip = input(true, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
+        /** How values are written: a function or an `Intl` style such as `{ style: 'currency', currency: 'EUR' }`. */
+        this.format = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "format" }] : /* istanbul ignore next */ []));
+        /** Categorical series colors, cycled by series index. */
+        this.palette = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "palette" }] : /* istanbul ignore next */ []));
+        /** Series left out of the plot; two-way bindable, the legend toggles it. */
+        this.hiddenSeries = model(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hiddenSeries" }] : /* istanbul ignore next */ []));
+        /** Draw a loading placeholder instead of the chart. */
+        this.loading = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /** Draw this message instead of the chart. */
+        this.error = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "error" }] : /* istanbul ignore next */ []));
+        /** Written in place of an empty chart. */
+        this.emptyMessage = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        /** Longer accessible description, rendered as the svg `<desc>`. */
+        this.description = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+        /** Hide the chart from assistive technology. */
+        this.decorative = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+        /** Fade marks in and transition them on change; `true` is 300 ms, a number sets the duration. */
+        this.animate = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "animate" }] : /* istanbul ignore next */ []));
+        /** Lay the chart out at the host's width, so text keeps its size. */
+        this.responsive = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "responsive" }] : /* istanbul ignore next */ []));
+        /** The width the root measured under `responsive`. */
+        this.measuredWidth = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "measuredWidth" }] : /* istanbul ignore next */ []));
+        /** Visible category window; two-way bindable, wheel, drag, pinch and brush update it. */
+        this.zoom = model(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "zoom" }] : /* istanbul ignore next */ []));
+        /** Wheel zooms and drag pans the category axis. */
+        this.zoomable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "zoomable" }] : /* istanbul ignore next */ []));
+        /** A mark was clicked, or Enter/Space was pressed on the focused mark. */
+        this.itemClick = output();
+    }
+    /** Applies a legend toggle reported by the root. */
+    toggle([name]) {
+        const current = this.hiddenSeries() ?? [];
+        if (name === undefined)
+            return;
+        this.hiddenSeries.set(current.includes(name) ? current.filter((n) => n !== name) : [...current, name]);
     }
     sized() {
         return {
-            width: this.width(),
+            width: this.responsive() && this.measuredWidth() ? this.measuredWidth() : this.width(),
             height: this.height(),
+            animate: this.animate(),
+            responsive: this.responsive(),
             legend: this.legend(),
             tooltip: this.tooltip(),
+            format: this.format(),
+            palette: this.palette(),
+            hiddenSeries: this.hiddenSeries(),
+            loading: this.loading(),
+            error: this.error(),
+            emptyMessage: this.emptyMessage(),
+            description: this.description(),
+            decorative: this.decorative(),
+            zoom: this.zoom(),
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxSizedBase, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: SkdxSizedBase, isStandalone: true, inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: SkdxSizedBase, isStandalone: true, inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, legend: { classPropertyName: "legend", publicName: "legend", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, palette: { classPropertyName: "palette", publicName: "palette", isSignal: true, isRequired: false, transformFunction: null }, hiddenSeries: { classPropertyName: "hiddenSeries", publicName: "hiddenSeries", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, responsive: { classPropertyName: "responsive", publicName: "responsive", isSignal: true, isRequired: false, transformFunction: null }, zoom: { classPropertyName: "zoom", publicName: "zoom", isSignal: true, isRequired: false, transformFunction: null }, zoomable: { classPropertyName: "zoomable", publicName: "zoomable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { hiddenSeries: "hiddenSeriesChange", zoom: "zoomChange", itemClick: "itemClick" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxSizedBase, decorators: [{
             type: Directive
-        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }] } });
-/** Inputs the category charts take. */
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], legend: [{ type: i0.Input, args: [{ isSignal: true, alias: "legend", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], palette: [{ type: i0.Input, args: [{ isSignal: true, alias: "palette", required: false }] }], hiddenSeries: [{ type: i0.Input, args: [{ isSignal: true, alias: "hiddenSeries", required: false }] }, { type: i0.Output, args: ["hiddenSeriesChange"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], responsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "responsive", required: false }] }], zoom: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoom", required: false }] }, { type: i0.Output, args: ["zoomChange"] }], zoomable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zoomable", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+/** Inputs the cartesian charts (bar, line, area) take. */
 class SkdxChartBase extends SkdxSizedBase {
     constructor() {
         super(...arguments);
         this.series = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "series" }] : /* istanbul ignore next */ []));
+        /** X-axis labels; numbers and dates are written with `xAxis.format`. */
         this.categories = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "categories" }] : /* istanbul ignore next */ []));
+        this.xAxis = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "xAxis" }] : /* istanbul ignore next */ []));
+        this.yAxis = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "yAxis" }] : /* istanbul ignore next */ []));
+        /** Enables the second y axis; series opt in with `axis: 'right'`. */
+        this.rightAxis = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "rightAxis" }] : /* istanbul ignore next */ []));
+        /** Lines and bands in data coordinates: targets, SLAs, forecast periods. */
+        this.references = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "references" }] : /* istanbul ignore next */ []));
+        /** Write each value next to its mark. */
+        this.labels = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "labels" }] : /* istanbul ignore next */ []));
+        this.curve = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "curve" }] : /* istanbul ignore next */ []));
+        this.connectNulls = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "connectNulls" }] : /* istanbul ignore next */ []));
+        /** Stack the series; `'percent'` normalizes each category to 100%. */
+        this.stacked = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "stacked" }] : /* istanbul ignore next */ []));
+        this.orientation = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "orientation" }] : /* istanbul ignore next */ []));
+        /** Corner radius of bars. */
+        this.radius = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "radius" }] : /* istanbul ignore next */ []));
+        this.sort = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "sort" }] : /* istanbul ignore next */ []));
+        this.transform = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "transform" }] : /* istanbul ignore next */ []));
+        this.bins = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "bins" }] : /* istanbul ignore next */ []));
+        this.binWidth = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "binWidth" }] : /* istanbul ignore next */ []));
+        this.binDomain = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "binDomain" }] : /* istanbul ignore next */ []));
+        this.binMode = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "binMode" }] : /* istanbul ignore next */ []));
+        /** Draw a range strip under the plot showing the whole series and the zoomed window. */
+        this.brush = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "brush" }] : /* istanbul ignore next */ []));
+        /** Snap the hover tooltip to the nearest category and list every series. */
+        this.crosshair = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "crosshair" }] : /* istanbul ignore next */ []));
     }
     input() {
-        return { ...this.sized(), series: this.series(), categories: this.categories() };
+        return {
+            ...this.sized(),
+            series: this.series(),
+            categories: this.categories(),
+            xAxis: this.xAxis(),
+            yAxis: this.yAxis(),
+            rightAxis: this.rightAxis(),
+            references: this.references(),
+            labels: this.labels(),
+            curve: this.curve(),
+            connectNulls: this.connectNulls(),
+            stacked: this.stacked(),
+            orientation: this.orientation(),
+            radius: this.radius(),
+            sort: this.sort(),
+            transform: this.transform(),
+            bins: this.bins(),
+            binWidth: this.binWidth(),
+            binDomain: this.binDomain(),
+            binMode: this.binMode(),
+            brush: this.brush(),
+            crosshair: this.crosshair(),
+        };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxChartBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: SkdxChartBase, isStandalone: true, inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.4", type: SkdxChartBase, isStandalone: true, inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: true, transformFunction: null }, categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, xAxis: { classPropertyName: "xAxis", publicName: "xAxis", isSignal: true, isRequired: false, transformFunction: null }, yAxis: { classPropertyName: "yAxis", publicName: "yAxis", isSignal: true, isRequired: false, transformFunction: null }, rightAxis: { classPropertyName: "rightAxis", publicName: "rightAxis", isSignal: true, isRequired: false, transformFunction: null }, references: { classPropertyName: "references", publicName: "references", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, connectNulls: { classPropertyName: "connectNulls", publicName: "connectNulls", isSignal: true, isRequired: false, transformFunction: null }, stacked: { classPropertyName: "stacked", publicName: "stacked", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, sort: { classPropertyName: "sort", publicName: "sort", isSignal: true, isRequired: false, transformFunction: null }, transform: { classPropertyName: "transform", publicName: "transform", isSignal: true, isRequired: false, transformFunction: null }, bins: { classPropertyName: "bins", publicName: "bins", isSignal: true, isRequired: false, transformFunction: null }, binWidth: { classPropertyName: "binWidth", publicName: "binWidth", isSignal: true, isRequired: false, transformFunction: null }, binDomain: { classPropertyName: "binDomain", publicName: "binDomain", isSignal: true, isRequired: false, transformFunction: null }, binMode: { classPropertyName: "binMode", publicName: "binMode", isSignal: true, isRequired: false, transformFunction: null }, brush: { classPropertyName: "brush", publicName: "brush", isSignal: true, isRequired: false, transformFunction: null }, crosshair: { classPropertyName: "crosshair", publicName: "crosshair", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImport: i0, type: SkdxChartBase, decorators: [{
             type: Directive
-        }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }] } });
+        }], propDecorators: { series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: true }] }], categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], xAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "xAxis", required: false }] }], yAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxis", required: false }] }], rightAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightAxis", required: false }] }], references: [{ type: i0.Input, args: [{ isSignal: true, alias: "references", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], connectNulls: [{ type: i0.Input, args: [{ isSignal: true, alias: "connectNulls", required: false }] }], stacked: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacked", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], sort: [{ type: i0.Input, args: [{ isSignal: true, alias: "sort", required: false }] }], transform: [{ type: i0.Input, args: [{ isSignal: true, alias: "transform", required: false }] }], bins: [{ type: i0.Input, args: [{ isSignal: true, alias: "bins", required: false }] }], binWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "binWidth", required: false }] }], binDomain: [{ type: i0.Input, args: [{ isSignal: true, alias: "binDomain", required: false }] }], binMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "binMode", required: false }] }], brush: [{ type: i0.Input, args: [{ isSignal: true, alias: "brush", required: false }] }], crosshair: [{ type: i0.Input, args: [{ isSignal: true, alias: "crosshair", required: false }] }] } });
 
 /*
  * Copyright (c) 2026 SkandaDX
@@ -1775,5 +3990,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CHART_COLORS, SkdxChartBase, SkdxChartRootComponent, SkdxChartShapesComponent, SkdxSizedBase, hoverTooltip, layoutAreaChart, layoutBarChart, layoutBoxplot, layoutCandlestick, layoutChord, layoutFunnelChart, layoutGantt, layoutHeatmap, layoutLineChart, layoutMap, layoutPieChart, layoutRadarChart, layoutSankey, layoutScatterChart, layoutSparkline, layoutSunburst, layoutTreemap, layoutWaterfall };
+export { ANIMATION_CSS, ANIMATION_LIMIT, CHART_COLORS, MARKER_LIMIT, SERIES_COLORS, SkdxChartBase, SkdxChartRootComponent, SkdxChartShapesComponent, SkdxSizedBase, TITLE_LIMIT, anchorOf, animationDuration, brushDrag, brushGrab, categoryLabel, crosshairShapes, csv, focusShapes, focusTargets, formatValue, hoverTooltip, isUnzoomed, itemAt, layoutAreaChart, layoutBarChart, layoutBoxplot, layoutCandlestick, layoutCartesian, layoutChord, layoutFunnelChart, layoutGantt, layoutHeatmap, layoutLineChart, layoutMap, layoutPieChart, layoutRadarChart, layoutRadialBar, layoutSankey, layoutScatterChart, layoutSparkline, layoutSunburst, layoutTreemap, layoutWaterfall, makeFormatter, nextFocus, pointerShapes, seriesCsv, shapeMarkup, stateCanvas, svgMarkup, svgToPng, timeTicks, toViewBox, tooltipShapes, variantColor, zoomPan, zoomPinch, zoomWheel };
 //# sourceMappingURL=skdx-angular-charts-internal.mjs.map