@adia-ai/web-components 0.0.1

package/components/chart/chart.js

@@ -0,0 +1,1075 @@
+/**
+ * <chart-ui type="bar" x="month" y="revenue" heading="Monthly Revenue"></chart-ui>
+ *
+ * Declarative chart component supporting bar, line, pie, donut, radar,
+ * sparkline, stacked-bar, grouped-bar, and multi-line chart types.
+ *
+ * Attributes:
+ *   type         — chart type (default: 'bar')
+ *   heading      — chart heading text
+ *   x            — key for X-axis data
+ *   y            — key(s) for Y-axis, comma-separated for multi-series
+ *   hide-average — suppress the overlaid average line on bar/line (default: false — line shown)
+ *   color        — accent/success/warning/danger/info
+ *   hide-grid    — hide gridlines
+ *   hide-values  — hide value labels
+ *   radius       — bar corner radius (default: 4)
+ *
+ * JS API:
+ *   .data = [{...}, ...]  — array of data objects
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+/* ── Helpers ────────────────────────────────────────────────────── */
+
+function niceScale(min, max, ticks = 5) {
+  const range = max - min || 1;
+  const rough = range / ticks;
+  const mag = Math.pow(10, Math.floor(Math.log10(rough)));
+  const norm = rough / mag;
+  const nice = norm <= 1.5 ? 1 : norm <= 3 ? 2 : norm <= 7 ? 5 : 10;
+  const step = nice * mag;
+  const lo = Math.floor(min / step) * step;
+  const hi = Math.ceil(max / step) * step;
+  const result = [];
+  for (let v = lo; v <= hi + step * 0.5; v += step) result.push(+v.toFixed(10));
+  return result;
+}
+
+function fmt(v) {
+  if (v == null) return '';
+  const n = +v;
+  if (Number.isNaN(n)) return String(v);
+  if (Math.abs(n) >= 1e6) return (n / 1e6).toFixed(1).replace(/\.0$/, '') + 'M';
+  if (Math.abs(n) >= 1e3) return (n / 1e3).toFixed(1).replace(/\.0$/, '') + 'K';
+  return Number.isInteger(n) ? String(n) : n.toFixed(1);
+}
+
+function esc(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+}
+
+/* Emit tooltip data-attributes for a datum shape. Consumed by the pointer
+   delegate below. All fields optional — unused ones are skipped. */
+function tip({ label, value, pct, series }) {
+  let s = '';
+  if (label  != null) s += ` data-tip-label="${esc(String(label))}"`;
+  if (value  != null) s += ` data-tip-value="${value}"`;
+  if (pct    != null) s += ` data-tip-pct="${pct}"`;
+  if (series != null) s += ` data-tip-series="${esc(String(series))}"`;
+  return s;
+}
+
+/* Polar helpers for pie/donut */
+function polarX(cx, r, angle) { return cx + r * Math.cos(angle); }
+function polarY(cy, r, angle) { return cy + r * Math.sin(angle); }
+
+function arcPath(cx, cy, r, start, end) {
+  const x1 = polarX(cx, r, start);
+  const y1 = polarY(cy, r, start);
+  const x2 = polarX(cx, r, end);
+  const y2 = polarY(cy, r, end);
+  const large = end - start > Math.PI ? 1 : 0;
+  return `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`;
+}
+
+function donutArcPath(cx, cy, outer, inner, start, end, radius = 0) {
+  // Radius is clamped to half the ring thickness. A radius of 0 renders
+  // a flat (original) wedge with sharp corners.
+  const ringHalf = (outer - inner) / 2;
+  const sliceAngle = end - start;
+  const r = Math.max(0, Math.min(radius, ringHalf));
+  const flatPath = () => {
+    const x1 = polarX(cx, outer, start);
+    const y1 = polarY(cy, outer, start);
+    const x2 = polarX(cx, outer, end);
+    const y2 = polarY(cy, outer, end);
+    const x3 = polarX(cx, inner, end);
+    const y3 = polarY(cy, inner, end);
+    const x4 = polarX(cx, inner, start);
+    const y4 = polarY(cy, inner, start);
+    const large = sliceAngle > Math.PI ? 1 : 0;
+    return `M ${x1} ${y1} A ${outer} ${outer} 0 ${large} 1 ${x2} ${y2} L ${x3} ${y3} A ${inner} ${inner} 0 ${large} 0 ${x4} ${y4} Z`;
+  };
+  if (r <= 0) return flatPath();
+
+  // Rounded-CORNER wedge (rounded rectangle-on-ring).
+  // Each end has two small corner arcs connected by a short radial line,
+  // so thin slices on thick rings don't collapse into pill shapes.
+  const aOuter = r / outer;
+  const aInner = r / inner;
+  if (sliceAngle <= (aOuter + aInner) * 1.05) return flatPath();
+
+  const sOuter = start + aOuter;
+  const eOuter = end   - aOuter;
+  const sInner = start + aInner;
+  const eInner = end   - aInner;
+  const large  = (eOuter - sOuter) > Math.PI ? 1 : 0;
+
+  // Points: outer-arc ends, radial-line ends at each angular extremum.
+  const ox1 = polarX(cx, outer, sOuter);
+  const oy1 = polarY(cy, outer, sOuter);
+  const ox2 = polarX(cx, outer, eOuter);
+  const oy2 = polarY(cy, outer, eOuter);
+  const ix2 = polarX(cx, inner, eInner);
+  const iy2 = polarY(cy, inner, eInner);
+  const ix1 = polarX(cx, inner, sInner);
+  const iy1 = polarY(cy, inner, sInner);
+
+  // Radial-line endpoints: the corner pushes the radial inward by `r`,
+  // so the straight segment runs from (outer-r) down to (inner+r) at the
+  // end angle, and symmetrically at the start angle.
+  const rsOuter = polarX(cx, outer - r, start), rsOuterY = polarY(cy, outer - r, start);
+  const rsInner = polarX(cx, inner + r, start), rsInnerY = polarY(cy, inner + r, start);
+  const reOuter = polarX(cx, outer - r, end),   reOuterY = polarY(cy, outer - r, end);
+  const reInner = polarX(cx, inner + r, end),   reInnerY = polarY(cy, inner + r, end);
+
+  return `M ${ox1} ${oy1} ` +
+    `A ${outer} ${outer} 0 ${large} 1 ${ox2} ${oy2} ` +      // outer arc (CW)
+    `A ${r} ${r} 0 0 1 ${reOuter} ${reOuterY} ` +            // end outer corner
+    `L ${reInner} ${reInnerY} ` +                            // end radial line
+    `A ${r} ${r} 0 0 1 ${ix2} ${iy2} ` +                     // end inner corner
+    `A ${inner} ${inner} 0 ${large} 0 ${ix1} ${iy1} ` +      // inner arc (CCW)
+    `A ${r} ${r} 0 0 1 ${rsInner} ${rsInnerY} ` +            // start inner corner
+    `L ${rsOuter} ${rsOuterY} ` +                            // start radial line
+    `A ${r} ${r} 0 0 1 ${ox1} ${oy1} Z`;                     // start outer corner
+}
+
+/**
+ * Smooth path — converts points [{x,y}] to a cubic bezier SVG path.
+ * t = 0 → straight lines (polyline), t = 1 → maximum smoothing.
+ * Uses Catmull-Rom-to-Bezier spline conversion.
+ */
+function smoothPath(points, t = 0.4) {
+  if (points.length < 2) return '';
+  if (t <= 0) return 'M' + points.map(p => `${p.x},${p.y}`).join(' L');
+
+  const n = points.length;
+  let d = `M${points[0].x},${points[0].y}`;
+
+  for (let i = 0; i < n - 1; i++) {
+    const p0 = points[Math.max(i - 1, 0)];
+    const p1 = points[i];
+    const p2 = points[i + 1];
+    const p3 = points[Math.min(i + 2, n - 1)];
+
+    const cp1x = p1.x + (p2.x - p0.x) * t / 3;
+    const cp1y = p1.y + (p2.y - p0.y) * t / 3;
+    const cp2x = p2.x - (p3.x - p1.x) * t / 3;
+    const cp2y = p2.y - (p3.y - p1.y) * t / 3;
+
+    d += ` C${cp1x},${cp1y} ${cp2x},${cp2y} ${p2.x},${p2.y}`;
+  }
+
+  return d;
+}
+
+/** Build a closed area path from a smooth line path + baseline Y */
+function smoothAreaPath(points, baselineY, t = 0.4) {
+  const line = smoothPath(points, t);
+  const last = points[points.length - 1];
+  const first = points[0];
+  return `${line} L${last.x},${baselineY} L${first.x},${baselineY} Z`;
+}
+
+/* ── Aspect ratios ─────────────────────────────────────────────── */
+
+const ASPECTS = {
+  std:    { ratio: 4 / 3 },   // default — balanced dataviz proportion
+  wide:   { ratio: 16 / 9 },  // landscape / video (sparkline, timeline)
+  square: { ratio: 1 },       // pie / donut / radar
+  tall:   { ratio: 3 / 4 },   // vertical column
+};
+
+/* ── Component ──────────────────────────────────────────────────── */
+
+class AdiaChart extends AdiaElement {
+  static properties = {
+    type:        { type: String,  default: 'bar',    reflect: true },
+    heading:     { type: String,  default: '',       reflect: true },
+    x:           { type: String,  default: '',       reflect: true },
+    y:           { type: String,  default: '',       reflect: true },
+    hideAverage: { type: Boolean, default: false,    reflect: true, attribute: 'hide-average' },
+    color:       { type: String,  default: '',       reflect: true },
+    hideGrid:    { type: Boolean, default: false,    reflect: true, attribute: 'hide-grid' },
+    hideValues:  { type: Boolean, default: false,    reflect: true, attribute: 'hide-values' },
+    radius:      { type: Number,  default: null,     reflect: true },
+    smooth:      { type: Number,  default: 0.4,      reflect: true },
+    aspect:      { type: String,  default: 'std',    reflect: true },  // std | wide | square | tall
+    size:        { type: String,  default: '',       reflect: true },  // sm | md | lg
+  };
+
+  static template = () => null;
+
+  #data = [];
+  #resizeObs = null;
+  #resizeRaf = null;
+  #lastW = 0;
+  #lastH = 0;
+
+  /** Resolves the corner radius: the `radius` prop if explicitly set,
+   *  otherwise `--a-radius` from the host's computed style. Falls back
+   *  to 6 if the token is unset (should not happen in practice). */
+  #resolveRadius() {
+    if (this.radius != null) return this.radius;
+    const val = getComputedStyle(this).getPropertyValue('--a-radius').trim();
+    const parsed = parseFloat(val);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : 6;
+  }
+
+  set data(arr) {
+    this.#data = Array.isArray(arr) ? arr : [];
+    this.#renderChart();
+  }
+
+  get data() {
+    return this.#data;
+  }
+
+  connected() {
+    this.#resizeObs = new ResizeObserver((entries) => {
+      const { inlineSize: w, blockSize: h } = entries[0].contentBoxSize[0];
+      if (!this.#data.length) return;
+      const rw = Math.round(w);
+      const rh = Math.round(h);
+      if (rw === this.#lastW && (!this.hasAttribute('resize') || rh === this.#lastH)) return;
+      this.#lastW = rw;
+      this.#lastH = rh;
+      if (this.#resizeRaf) return;
+      this.#resizeRaf = requestAnimationFrame(() => {
+        this.#resizeRaf = null;
+        this.#renderChart();
+      });
+    });
+    this.#resizeObs.observe(this);
+  }
+
+  render() {
+    this.#renderChart();
+  }
+
+  /**
+   * Compute layout dimensions from actual container width.
+   * Returns { width, height, pad, fontSize, labelSize, valueSize, barMinW }
+   */
+  #dims() {
+    const containerW = this.clientWidth || 300;
+    const containerH = this.clientHeight || 0;
+    const aspect = ASPECTS[this.aspect] || ASPECTS.std;
+    const n = this.#data.length || 1;
+
+    const width = Math.max(containerW, 120);
+    // When element has explicit height (resize handle, CSS height, inline style),
+    // use it. Otherwise derive from aspect ratio. Safe because resize sets
+    // overflow:auto which prevents content from pushing height.
+    const hasExplicitHeight = this.hasAttribute('resize') || this.style.height;
+    let height = hasExplicitHeight && containerH > 40
+      ? containerH
+      : Math.round(width / aspect.ratio);
+
+    // Cap against --chart-max-height (CSS-resolved to px by getComputedStyle).
+    // Keeps wide-viewport renders from producing absurdly tall charts while
+    // staying overridable — set --chart-max-height: none (or a larger value)
+    // per-chart to opt out.
+    const maxH = parseFloat(getComputedStyle(this).maxHeight);
+    if (isFinite(maxH) && maxH > 0 && height > maxH) height = Math.round(maxH);
+
+    // Scale-aware font sizes: consistent regardless of chart dimensions
+    // Use sm/md/lg or auto-detect from smallest dimension
+    const minDim = Math.min(width, height);
+    const sizeClass = this.size || (minDim < 150 ? 'sm' : minDim < 300 ? 'md' : 'lg');
+    const fontSize = sizeClass === 'sm' ? 9 : sizeClass === 'md' ? 10 : 11;
+    const labelSize = fontSize;
+    const valueSize = sizeClass === 'sm' ? 8 : sizeClass === 'md' ? 9 : 10;
+
+    // Padding scales with font size and axis visibility.
+    // When the grid is hidden (in-card sparkline-like use) we can zero
+    // out the Y-axis label gutter entirely — otherwise the plot area
+    // collapses at small sizes.
+    const hideGrid = this.hideGrid;
+    const yLabelW = hideGrid ? 0 : fontSize * 3.2;
+    const hasXLabels = !!this.x;
+    const pad = {
+      top:    hideGrid ? 2 : fontSize * 1.6,
+      right:  hideGrid ? 2 : fontSize * 1.2,
+      bottom: !hasXLabels || hideGrid ? 2 : fontSize * 2.2,
+      left:   yLabelW,
+    };
+
+    // Bar width adapts to data count + container
+    const plotW = width - pad.left - pad.right;
+    const barMinW = Math.max(4, plotW / n * 0.6);
+
+    return { width, height, pad, fontSize, labelSize, valueSize, barMinW, plotW, n, sizeClass };
+  }
+
+  /* ── Main render ──────────────────────────────────────────────── */
+
+  #renderChart() {
+    if (!this.isConnected) return;
+    this.innerHTML = '';
+
+    if (!this.#data.length) return;
+
+    if (this.heading) {
+      const headingEl = document.createElement('div');
+      headingEl.setAttribute('data-chart-heading', '');
+      headingEl.textContent = this.heading;
+      this.appendChild(headingEl);
+    }
+
+    const svgWrap = document.createElement('div');
+    if (this.type === 'sparkline') svgWrap.setAttribute('data-sparkline', '');
+    this.appendChild(svgWrap);
+
+    const svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svgWrap.appendChild(svgEl);
+
+    let svgContent = '';
+    let vb = '';
+
+    switch (this.type) {
+      case 'bar':         ({ svg: svgContent, viewBox: vb } = this.#renderBar()); break;
+      case 'line':        ({ svg: svgContent, viewBox: vb } = this.#renderLine()); break;
+      case 'pie':         ({ svg: svgContent, viewBox: vb } = this.#renderPie()); break;
+      case 'donut':       ({ svg: svgContent, viewBox: vb } = this.#renderDonut()); break;
+      case 'radar':       ({ svg: svgContent, viewBox: vb } = this.#renderRadar()); break;
+      case 'sparkline':   ({ svg: svgContent, viewBox: vb } = this.#renderSparkline()); break;
+      case 'segments':    ({ svg: svgContent, viewBox: vb } = this.#renderSegments()); break;
+      case 'stacked-bar': ({ svg: svgContent, viewBox: vb } = this.#renderStackedBar()); break;
+      case 'grouped-bar': ({ svg: svgContent, viewBox: vb } = this.#renderGroupedBar()); break;
+      case 'multi-line':  ({ svg: svgContent, viewBox: vb } = this.#renderMultiLine()); break;
+      default:            ({ svg: svgContent, viewBox: vb } = this.#renderBar()); break;
+    }
+
+    svgEl.setAttribute('viewBox', vb);
+    svgEl.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+    svgEl.innerHTML = svgContent;
+
+    /* Append legend for types that need it */
+    if (['pie', 'donut', 'stacked-bar', 'grouped-bar', 'multi-line'].includes(this.type)) {
+      const legend = this.#buildLegend();
+      if (legend) this.appendChild(legend);
+    }
+
+    /* Wire hover tooltip — pointer delegate on the SVG reads data-tip-*
+       attrs from the shape under the cursor and shows a single shared
+       popover. See #showTooltip / #hideTooltip below. */
+    svgEl.addEventListener('pointerover',  this.#onPointerOver);
+    svgEl.addEventListener('pointermove',  this.#onPointerMove);
+    svgEl.addEventListener('pointerleave', this.#onPointerLeave);
+  }
+
+  /* ── Tooltip ───────────────────────────────────────────────────── */
+
+  #tipEl = null;
+
+  disconnected() {
+    this.#resizeObs?.disconnect();
+    this.#resizeObs = null;
+    if (this.#resizeRaf) { cancelAnimationFrame(this.#resizeRaf); this.#resizeRaf = null; }
+    this.#hideTooltip();
+  }
+
+  #onPointerOver = (e) => {
+    const t = e.target.closest('[data-tip-label], [data-tip-value]');
+    if (t) this.#showTooltip(t, e);
+  };
+
+  #onPointerMove = (e) => {
+    const t = e.target.closest('[data-tip-label], [data-tip-value]');
+    if (!t) return this.#hideTooltip();
+    this.#showTooltip(t, e);
+  };
+
+  #onPointerLeave = () => this.#hideTooltip();
+
+  #showTooltip(target, event) {
+    const { tipLabel, tipValue, tipPct, tipSeries } = target.dataset;
+
+    if (!this.#tipEl) {
+      const el = document.createElement('div');
+      el.setAttribute('popover', 'manual');
+      el.setAttribute('role', 'tooltip');
+      el.classList.add('chart-tooltip-popup');
+      document.body.appendChild(el);
+      this.#tipEl = el;
+    }
+
+    const lines = [];
+    if (tipSeries) lines.push(`<span data-tip-role="series">${esc(tipSeries)}</span>`);
+    if (tipLabel)  lines.push(`<span data-tip-role="label">${esc(tipLabel)}</span>`);
+    if (tipValue !== undefined) {
+      const pct = tipPct !== undefined ? ` <span data-tip-role="pct">(${tipPct}%)</span>` : '';
+      lines.push(`<span data-tip-role="value">${fmt(tipValue)}${pct}</span>`);
+    }
+    this.#tipEl.innerHTML = lines.join('');
+
+    try { this.#tipEl.showPopover(); } catch (_) { /* popover not supported */ }
+
+    /* Follow the cursor — offset up-right, clamp to viewport */
+    const gap = 12;
+    const { clientX, clientY } = event;
+    const tw = this.#tipEl.offsetWidth  || 0;
+    const th = this.#tipEl.offsetHeight || 0;
+    let x = clientX + gap;
+    let y = clientY - th - gap;
+    if (x + tw > window.innerWidth)  x = clientX - tw - gap;
+    if (y < 0)                       y = clientY + gap;
+    this.#tipEl.style.left = `${x}px`;
+    this.#tipEl.style.top  = `${y}px`;
+  }
+
+  #hideTooltip() {
+    if (!this.#tipEl) return;
+    try { this.#tipEl.hidePopover(); } catch (_) { /* */ }
+    this.#tipEl.remove();
+    this.#tipEl = null;
+  }
+
+  /* ── Y keys helper ────────────────────────────────────────────── */
+
+  #yKeys() {
+    return this.y ? this.y.split(',').map(k => k.trim()).filter(Boolean) : [];
+  }
+
+  /* ── Grid + axes helper ───────────────────────────────────────── */
+
+  #gridAndAxes(width, height, ticks, labels, pad, dims) {
+    const p = pad;
+    const fs = dims?.fontSize || 10;
+    const ls = dims?.labelSize || fs;
+    let s = '';
+
+    // Reduce tick count at small sizes
+    let displayTicks = ticks;
+    if (dims?.sizeClass === 'sm' && ticks.length > 4) {
+      displayTicks = ticks.filter((_, i) => i % 2 === 0 || i === ticks.length - 1);
+    }
+
+    // hideGrid suppresses both gridlines AND axis labels — callers who
+    // want labels without gridlines can omit hide-grid and rely on token
+    // overrides to make gridlines transparent. This keeps compact in-card
+    // charts visually clean.
+    if (!this.hideGrid) {
+      const tickRange = ticks[ticks.length - 1] - ticks[0];
+      const safeRange = tickRange || 1; // Prevent division by zero
+      for (const t of displayTicks) {
+        const gy = p.top + (height - p.top - p.bottom) * (1 - (t - ticks[0]) / safeRange);
+        s += `<line data-grid x1="${p.left}" y1="${gy}" x2="${width - p.right}" y2="${gy}"/>`;
+      }
+
+      /* Y-axis labels */
+      for (const t of displayTicks) {
+        const gy = p.top + (height - p.top - p.bottom) * (1 - (t - ticks[0]) / safeRange);
+        s += `<text data-y-label x="${p.left - 4}" y="${gy + fs * 0.35}" text-anchor="end" font-size="${fs}">${fmt(t)}</text>`;
+      }
+
+      /* X-axis labels — stride based on label width so they never overlap */
+      if (labels) {
+        const plotW = width - p.left - p.right;
+        const step = plotW / labels.length;
+        const maxChars = labels.reduce((m, l) => Math.max(m, String(l).length), 1);
+        const labelPx = maxChars * ls * 0.6 + ls * 0.75;
+        const stride = Math.max(1, Math.ceil(labelPx / step));
+        const last = labels.length - 1;
+        for (let i = 0; i < labels.length; i++) {
+          if (i % stride !== 0 && i !== last) continue;
+          if (i !== last && last - i < stride) continue;
+          const lx = p.left + step * i + step / 2;
+          s += `<text data-x-label x="${lx}" y="${height - fs * 0.5}" text-anchor="middle" font-size="${ls}">${esc(labels[i])}</text>`;
+        }
+      }
+    }
+
+    return s;
+  }
+
+  /* ── Bar chart ────────────────────────────────────────────────── */
+
+  #renderBar() {
+    const dims = this.#dims();
+    const data = this.#data;
+    const yKey = this.#yKeys()[0] || this.y;
+    const vals = data.map(v => +(v[yKey] ?? 0));
+    const labels = data.map(v => v[this.x] ?? '');
+    const ticks = niceScale(0, Math.max(...vals), 5);
+    const maxVal = ticks[ticks.length - 1];
+
+    const { width, height, pad } = dims;
+    const plotH = height - pad.top - pad.bottom;
+    const plotW = width - pad.left - pad.right;
+    const barW = plotW / data.length;
+    const barInner = barW * 0.6;
+    const barGap = (barW - barInner) / 2;
+
+    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims);
+
+    // At sm auto-hide value labels (they overlap at narrow widths).
+    const showValues = !this.hideValues && dims.sizeClass !== 'sm';
+    const showAverage = !this.hideAverage && vals.length > 1 && dims.sizeClass !== 'sm' && !this.hideGrid;
+
+    for (let i = 0; i < data.length; i++) {
+      const v = vals[i];
+      const barH = maxVal ? (v / maxVal) * plotH : 0;
+      const bx = pad.left + barW * i + barGap;
+      const by = pad.top + plotH - barH;
+
+      svg += `<rect data-bar${tip({ label: labels[i], value: v })} x="${bx}" y="${by}" width="${barInner}" height="${barH}" rx="${this.#resolveRadius()}"/>`;
+
+      if (showValues) {
+        svg += `<text data-value x="${bx + barInner / 2}" y="${by - 4}" text-anchor="middle" font-size="${dims.valueSize}">${fmt(v)}</text>`;
+      }
+    }
+
+    if (showAverage) {
+      const avg = vals.reduce((a, b) => a + b, 0) / vals.length;
+      const ay = pad.top + plotH - (maxVal ? (avg / maxVal) * plotH : 0);
+      svg += `<line data-avg x1="${pad.left}" y1="${ay}" x2="${width - pad.right}" y2="${ay}"/>`;
+      svg += `<text data-avg-label x="${width - pad.right + 2}" y="${ay + 3}" text-anchor="start" font-size="${dims.valueSize}">${fmt(avg)}</text>`;
+      /* Wider invisible hit target so the thin dashed line is hoverable */
+      svg += `<line data-hit${tip({ label: 'Average', value: avg })} x1="${pad.left}" y1="${ay}" x2="${width - pad.right}" y2="${ay}" stroke="transparent" stroke-width="12"/>`;
+    }
+
+    return { svg, viewBox: `0 0 ${width} ${height}` };
+  }
+
+  /* ── Line chart ───────────────────────────────────────────────── */
+
+  #renderLine() {
+    const dims = this.#dims();
+    const data = this.#data;
+    const yKey = this.#yKeys()[0] || this.y;
+    const vals = data.map(v => +(v[yKey] ?? 0));
+    const labels = data.map(v => v[this.x] ?? '');
+    const ticks = niceScale(0, Math.max(...vals), 5);
+    const maxVal = ticks[ticks.length - 1];
+
+    const { width, height, pad } = dims;
+    const plotH = height - pad.top - pad.bottom;
+    const plotW = width - pad.left - pad.right;
+    const step = plotW / Math.max(data.length - 1, 1);
+
+    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims);
+
+    const points = vals.map((v, i) => {
+      const px = pad.left + step * i;
+      const py = pad.top + plotH - (maxVal ? (v / maxVal) * plotH : 0);
+      return { x: px, y: py, v, label: labels[i] };
+    });
+
+    const baseline = pad.top + plotH;
+    const t = Math.max(0, Math.min(1, this.smooth));
+    svg += `<path data-area d="${smoothAreaPath(points, baseline, t)}"/>`;
+    svg += `<path data-line d="${smoothPath(points, t)}"/>`;
+
+    // Density tuning for sm: smaller dots, no value labels.
+    const isSm = dims.sizeClass === 'sm';
+    const dotR = isSm ? 1.5 : 3;
+    const hitR = Math.max(dotR, 10);  // invisible hit-target for tooltip
+    const showValues = !this.hideValues && !isSm;
+    const showAverage = !this.hideAverage && vals.length > 1 && !isSm && !this.hideGrid;
+
+    for (const p of points) {
+      svg += `<circle data-dot cx="${p.x}" cy="${p.y}" r="${dotR}"/>`;
+      svg += `<circle data-hit${tip({ label: p.label, value: p.v })} cx="${p.x}" cy="${p.y}" r="${hitR}" fill="transparent"/>`;
+      if (showValues) {
+        svg += `<text data-value x="${p.x}" y="${p.y - 8}" text-anchor="middle" font-size="${dims.valueSize}">${fmt(p.v)}</text>`;
+      }
+    }
+
+    if (showAverage) {
+      const avg = vals.reduce((a, b) => a + b, 0) / vals.length;
+      const ay = pad.top + plotH - (maxVal ? (avg / maxVal) * plotH : 0);
+      svg += `<line data-avg x1="${pad.left}" y1="${ay}" x2="${width - pad.right}" y2="${ay}"/>`;
+      svg += `<text data-avg-label x="${width - pad.right + 2}" y="${ay + 3}" text-anchor="start" font-size="${dims.valueSize}">${fmt(avg)}</text>`;
+      /* Wider invisible hit target so the thin dashed line is hoverable */
+      svg += `<line data-hit${tip({ label: 'Average', value: avg })} x1="${pad.left}" y1="${ay}" x2="${width - pad.right}" y2="${ay}" stroke="transparent" stroke-width="12"/>`;
+    }
+
+    return { svg, viewBox: `0 0 ${width} ${height}` };
+  }
+
+  /* ── Pie chart ────────────────────────────────────────────────── */
+
+  #renderPie() {
+    const data = this.#data;
+    const yKey = this.#yKeys()[0] || this.y;
+    const vals = data.map(d => +(d[yKey] ?? 0));
+    const total = vals.reduce((a, b) => a + b, 0) || 1;
+    const labels = data.map(d => d[this.x] ?? '');
+
+    // Responsive viewBox so pie respects chart-ui's max-height and
+    // doesn't push the legend past the container bounds.
+    const dims = this.#dims();
+    const { width, height } = dims;
+    const cx = width / 2;
+    const cy = height / 2;
+    const r = Math.max(30, Math.min(width, height) * 0.42);
+
+    let svg = '';
+    let angle = -Math.PI / 2;
+
+    for (let i = 0; i < vals.length; i++) {
+      const slice = (vals[i] / total) * Math.PI * 2;
+      if (slice === 0) { continue; }
+      const end = angle + slice;
+
+      const pct = ((vals[i] / total) * 100).toFixed(1);
+      const attrs = ` data-slice="${i % 10}"${tip({ label: labels[i], value: vals[i], pct })}`;
+
+      if (Math.abs(slice - Math.PI * 2) < 0.001) {
+        /* Full circle — special case */
+        svg += `<circle${attrs} cx="${cx}" cy="${cy}" r="${r}"/>`;
+      } else {
+        svg += `<path${attrs} d="${arcPath(cx, cy, r, angle, end)}"/>`;
+      }
+      angle = end;
+    }
+
+    this.#legendData = data.map((d, i) => ({
+      label: labels[i],
+      value: vals[i],
+      pct: ((vals[i] / total) * 100).toFixed(1),
+      slot: i % 10,
+    }));
+
+    return { svg, viewBox: `0 0 ${width} ${height}` };
+  }
+
+  /* ── Donut chart ──────────────────────────────────────────────── */
+
+  #renderDonut() {
+    const data = this.#data;
+    const yKey = this.#yKeys()[0] || this.y;
+    const vals = data.map(d => +(d[yKey] ?? 0));
+    const total = vals.reduce((a, b) => a + b, 0) || 1;
+    const labels = data.map(d => d[this.x] ?? '');
+
+    const dims = this.#dims();
+    const { width, height } = dims;
+    const cx = width / 2;
+    const cy = height / 2;
+    const outer = Math.max(30, Math.min(width, height) * 0.42);
+    const inner = outer * 0.72;
+
+    let svg = '';
+    let angle = -Math.PI / 2;
+
+    for (let i = 0; i < vals.length; i++) {
+      const slice = (vals[i] / total) * Math.PI * 2;
+      if (slice === 0) continue;
+      const end = angle + slice;
+
+      const pct = ((vals[i] / total) * 100).toFixed(1);
+      const attrs = ` data-slice="${i % 10}"${tip({ label: labels[i], value: vals[i], pct })}`;
+
+      if (Math.abs(slice - Math.PI * 2) < 0.001) {
+        /* Full ring */
+        svg += `<circle${attrs} cx="${cx}" cy="${cy}" r="${(outer + inner) / 2}" fill="none" stroke-width="${outer - inner}" style="fill:none"/>`;
+        svg += `<path${attrs} d="M ${cx - outer} ${cy} A ${outer} ${outer} 0 1 1 ${cx + outer} ${cy} A ${outer} ${outer} 0 1 1 ${cx - outer} ${cy} Z M ${cx - inner} ${cy} A ${inner} ${inner} 0 1 0 ${cx + inner} ${cy} A ${inner} ${inner} 0 1 0 ${cx - inner} ${cy} Z" fill-rule="evenodd"/>`;
+      } else {
+        svg += `<path${attrs} d="${donutArcPath(cx, cy, outer, inner, angle, end, this.#resolveRadius())}"/>`;
+      }
+      angle = end;
+    }
+
+    /* Center total — font size tied to donut radius so it scales with the chart */
+    const totalFs = Math.max(14, Math.round(outer * 0.32));
+    const labelFs = Math.max(9, Math.round(outer * 0.16));
+    svg += `<text data-donut-total x="${cx}" y="${cy}" text-anchor="middle" dominant-baseline="central" font-size="${totalFs}">${fmt(total)}</text>`;
+    svg += `<text data-donut-label x="${cx}" y="${cy + totalFs}" text-anchor="middle" dominant-baseline="central" font-size="${labelFs}">Total</text>`;
+
+    this.#legendData = data.map((d, i) => ({
+      label: labels[i],
+      value: vals[i],
+      pct: ((vals[i] / total) * 100).toFixed(1),
+      slot: i % 10,
+    }));
+
+    return { svg, viewBox: `0 0 ${width} ${height}` };
+  }
+
+  /* ── Radar chart ──────────────────────────────────────────────── */
+
+  #renderRadar() {
+    const data = this.#data;
+    const yKey = this.#yKeys()[0] || this.y;
+    const vals = data.map(d => +(d[yKey] ?? 0));
+    const labels = data.map(d => d[this.x] ?? '');
+    const maxVal = Math.max(...vals) || 1;
+    const n = data.length;
+
+    // Derive size from container so viewBox ≈ rendered pixels (keeps
+    // font-size and stroke widths at their intended visual scale).
+    const dims = this.#dims();
+    const { width, height, fontSize } = dims;
+    const cx = width / 2;
+    const cy = height / 2;
+    // Leave label breathing room proportional to font size so labels
+    // never clip at wide sizes or crowd the polygon at small sizes.
+    const labelPad = fontSize * 3.5;
+    const r = Math.max(40, Math.min(width, height) / 2 - labelPad);
+
+    let svg = '';
+    const angleStep = (Math.PI * 2) / n;
+
+    /* Grid rings (3 levels) */
+    for (let level = 1; level <= 3; level++) {
+      const lr = (r * level) / 3;
+      let ring = '';
+      for (let i = 0; i < n; i++) {
+        const a = -Math.PI / 2 + angleStep * i;
+        const px = cx + lr * Math.cos(a);
+        const py = cy + lr * Math.sin(a);
+        ring += (i === 0 ? 'M' : 'L') + ` ${px} ${py}`;
+      }
+      ring += ' Z';
+      svg += `<path data-grid d="${ring}"/>`;
+    }
+
+    /* Axis lines */
+    for (let i = 0; i < n; i++) {
+      const a = -Math.PI / 2 + angleStep * i;
+      const px = cx + r * Math.cos(a);
+      const py = cy + r * Math.sin(a);
+      svg += `<line data-grid x1="${cx}" y1="${cy}" x2="${px}" y2="${py}"/>`;
+    }
+
+    /* Data polygon + per-vertex hit targets */
+    let poly = '';
+    const vertices = [];
+    for (let i = 0; i < n; i++) {
+      const a = -Math.PI / 2 + angleStep * i;
+      const vr = (vals[i] / maxVal) * r;
+      const px = cx + vr * Math.cos(a);
+      const py = cy + vr * Math.sin(a);
+      poly += (i === 0 ? 'M' : 'L') + ` ${px} ${py}`;
+      vertices.push({ px, py });
+    }
+    poly += ' Z';
+    svg += `<path data-radar-fill d="${poly}"/>`;
+    svg += `<path data-radar-line d="${poly}"/>`;
+
+    const hitR = Math.max(fontSize, 10);
+    for (let i = 0; i < n; i++) {
+      const { px, py } = vertices[i];
+      svg += `<circle data-hit${tip({ label: labels[i], value: vals[i] })} cx="${px}" cy="${py}" r="${hitR}" fill="transparent"/>`;
+    }
+
+    /* Labels */
+    const labelGap = fontSize * 1.3;
+    for (let i = 0; i < n; i++) {
+      const a = -Math.PI / 2 + angleStep * i;
+      const lx = cx + (r + labelGap) * Math.cos(a);
+      const ly = cy + (r + labelGap) * Math.sin(a);
+      const anchor = Math.abs(Math.cos(a)) < 0.1 ? 'middle' : Math.cos(a) > 0 ? 'start' : 'end';
+      svg += `<text data-x-label x="${lx}" y="${ly}" text-anchor="${anchor}" dominant-baseline="central" font-size="${fontSize}">${esc(labels[i])}</text>`;
+    }
+
+    return { svg, viewBox: `0 0 ${width} ${height}` };
+  }
+
+  /* ── Sparkline ────────────────────────────────────────────────── */
+
+  #renderSparkline() {
+    const data = this.#data;
+    const yKey = this.#yKeys()[0] || this.y;
+    const vals = data.map(d => +(d[yKey] ?? 0));
+    const maxVal = Math.max(...vals) || 1;
+    const minVal = Math.min(...vals);
+    const range = maxVal - minVal || 1;
+
+    // Use the actual container dims so the aspect ratio matches what
+    // the CSS allocates (otherwise the fixed 120×32 viewBox gets
+    // stretched vertically in tall in-card slots).
+    const containerW = this.clientWidth  || 120;
+    const containerH = this.clientHeight || 32;
+    const w = Math.max(40, containerW);
+    const h = Math.max(16, containerH);
+    const step = w / Math.max(vals.length - 1, 1);
+
+    // Breathing room so the line doesn't clip at the top/bottom edges.
+    const padY = Math.max(2, Math.min(6, h * 0.1));
+
+    const labels = data.map(d => d[this.x] ?? '');
+    const points = vals.map((v, i) => ({
+      x: step * i,
+      y: h - ((v - minVal) / range) * (h - padY * 2) - padY,
+      v,
+      label: labels[i],
+    }));
+
+    const t = Math.max(0, Math.min(1, this.smooth));
+    let svg = '';
+    svg += `<path data-area d="${smoothAreaPath(points, h, t)}"/>`;
+    svg += `<path data-line d="${smoothPath(points, t)}"/>`;
+
+    /* Invisible hit-targets for tooltip — sized to fill each X-column */
+    const hitR = Math.max(step / 2, 6);
+    for (const p of points) {
+      svg += `<circle data-hit${tip({ label: p.label, value: p.v })} cx="${p.x}" cy="${p.y}" r="${hitR}" fill="transparent"/>`;
+    }
+
+    return { svg, viewBox: `0 0 ${w} ${h}` };
+  }
+
+  /* ── Segments (single horizontal stacked bar) ──────────────────
+     Categorical data rendered as one horizontal bar split into
+     proportional colored slices. Good for compact in-card
+     "distribution" widgets. Legend reuses the pie/donut path. */
+  #renderSegments() {
+    const data = this.#data;
+    const yKey = this.#yKeys()[0] || this.y;
+    const vals = data.map(d => +(d[yKey] ?? 0));
+    const total = vals.reduce((a, b) => a + b, 0) || 1;
+    const labels = data.map(d => d[this.x] ?? '');
+
+    // ViewBox matches actual render width so there's no horizontal
+    // stretching — keeps rounded corners from flattening into ellipses
+    // and matches the token-controlled gap at its intended px size.
+    const cs = getComputedStyle(this);
+    const w = Math.max(40, this.clientWidth || 200);
+    const h = 24;
+    const r = Math.min(this.#resolveRadius(), h / 2);
+    const gap = Math.max(0, parseFloat(cs.getPropertyValue('--chart-segments-gap')) || 2);
+
+    // Compute segment widths, distributing rounding error so the last
+    // segment lands exactly on the right edge.
+    const widths = [];
+    let acc = 0;
+    for (let i = 0; i < vals.length; i++) {
+      const nextAcc = (i === vals.length - 1) ? w : Math.round(((acc * total + vals[i] * w) / total));
+      // Use the cumulative approach for sub-pixel accuracy.
+      const endX = (i === vals.length - 1) ? w : ((vals.slice(0, i + 1).reduce((s, v) => s + v, 0)) / total) * w;
+      const startX = (i === 0) ? 0 : ((vals.slice(0, i).reduce((s, v) => s + v, 0)) / total) * w;
+      widths.push({ x: startX, w: Math.max(0, endX - startX) });
+      acc = nextAcc;
+    }
+
+    let svg = '';
+    for (let i = 0; i < widths.length; i++) {
+      const { x, w: segW } = widths[i];
+      if (segW <= 0) continue;
+
+      // Only round the outer corners of the first/last visible segment.
+      const isFirst = i === 0;
+      const isLast  = i === widths.length - 1;
+      const drawW = Math.max(0, segW - (isLast ? 0 : gap));
+
+      const pct = ((vals[i] / total) * 100).toFixed(1);
+      const tipAttrs = tip({ label: labels[i], value: vals[i], pct });
+      const a11yTitle = `<title>${esc(labels[i])}: ${vals[i]} (${pct}%)</title>`;
+
+      if ((isFirst && isLast) || (!isFirst && !isLast) || r === 0) {
+        svg += `<rect data-slice="${i % 10}"${tipAttrs} x="${x}" y="0" width="${drawW}" height="${h}"${(isFirst || isLast) && r ? ` rx="${r}"` : ''}>${a11yTitle}</rect>`;
+      } else {
+        // Build a path with asymmetric rounded corners.
+        const rr = r;
+        const x2 = x + drawW;
+        let d;
+        if (isFirst) {
+          d = `M ${x + rr} 0 H ${x2} V ${h} H ${x + rr} A ${rr} ${rr} 0 0 1 ${x} ${h - rr} V ${rr} A ${rr} ${rr} 0 0 1 ${x + rr} 0 Z`;
+        } else { // isLast
+          d = `M ${x} 0 H ${x2 - rr} A ${rr} ${rr} 0 0 1 ${x2} ${rr} V ${h - rr} A ${rr} ${rr} 0 0 1 ${x2 - rr} ${h} H ${x} Z`;
+        }
+        svg += `<path data-slice="${i % 10}"${tipAttrs} d="${d}">${a11yTitle}</path>`;
+      }
+    }
+
+    // Legend data (same shape pie/donut use).
+    this.#legendData = data.map((d, i) => ({
+      label: labels[i],
+      value: vals[i],
+      pct: ((vals[i] / total) * 100).toFixed(1),
+      slot: i % 10,
+    }));
+
+    return { svg, viewBox: `0 0 ${w} ${h}` };
+  }
+
+  /* ── Stacked bar ──────────────────────────────────────────────── */
+
+  #renderStackedBar() {
+    const data = this.#data;
+    const keys = this.#yKeys();
+    const labels = data.map(d => d[this.x] ?? '');
+
+    /* Get stacked totals for max */
+    const totals = data.map(d => keys.reduce((sum, k) => sum + (+(d[k] ?? 0)), 0));
+    const ticks = niceScale(0, Math.max(...totals), 5);
+    const maxVal = ticks[ticks.length - 1];
+
+    const dims = this.#dims();
+    const { width, height, pad } = dims;
+    const plotH = height - pad.top - pad.bottom;
+    const plotW = width - pad.left - pad.right;
+    const barW = plotW / data.length;
+    const barInner = barW * 0.6;
+    const barGap = (barW - barInner) / 2;
+
+    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims);
+
+    for (let i = 0; i < data.length; i++) {
+      let stackY = pad.top + plotH;
+      const segCount = keys.length;
+      for (let k = 0; k < segCount; k++) {
+        const v = +(data[i][keys[k]] ?? 0);
+        const segH = maxVal ? (v / maxVal) * plotH : 0;
+        if (segH <= 0) { stackY -= segH; continue; }
+        stackY -= segH;
+        const bx = pad.left + barW * i + barGap;
+        const by = stackY;
+        const bh = segH;
+        const isTop = k === segCount - 1;
+        const isBottom = k === 0;
+        const r = Math.min(this.#resolveRadius(), barInner / 2, bh / 2);
+
+        const attrs = ` data-slice="${k % 10}"${tip({ label: labels[i], value: v, series: keys[k] })}`;
+
+        if (isTop && isBottom) {
+          // Single segment — round top + bottom
+          svg += `<path${attrs} d="M${bx + r},${by} H${bx + barInner - r} Q${bx + barInner},${by} ${bx + barInner},${by + r} V${by + bh - r} Q${bx + barInner},${by + bh} ${bx + barInner - r},${by + bh} H${bx + r} Q${bx},${by + bh} ${bx},${by + bh - r} V${by + r} Q${bx},${by} ${bx + r},${by} Z"/>`;
+        } else if (isTop) {
+          // Top segment — round top corners only
+          svg += `<path${attrs} d="M${bx},${by + bh} V${by + r} Q${bx},${by} ${bx + r},${by} H${bx + barInner - r} Q${bx + barInner},${by} ${bx + barInner},${by + r} V${by + bh} Z"/>`;
+        } else if (isBottom) {
+          // Bottom segment — round bottom corners only
+          svg += `<path${attrs} d="M${bx},${by} H${bx + barInner} V${by + bh - r} Q${bx + barInner},${by + bh} ${bx + barInner - r},${by + bh} H${bx + r} Q${bx},${by + bh} ${bx},${by + bh - r} Z"/>`;
+        } else {
+          // Middle segment — no radius
+          svg += `<rect${attrs} x="${bx}" y="${by}" width="${barInner}" height="${bh}"/>`;
+        }
+      }
+    }
+
+    this.#legendData = keys.map((k, i) => ({ label: k, slot: i % 10 }));
+
+    return { svg, viewBox: `0 0 ${width} ${height}` };
+  }
+
+  /* ── Grouped bar ──────────────────────────────────────────────── */
+
+  #renderGroupedBar() {
+    const data = this.#data;
+    const keys = this.#yKeys();
+    const labels = data.map(d => d[this.x] ?? '');
+
+    const allVals = data.flatMap(d => keys.map(k => +(d[k] ?? 0)));
+    const ticks = niceScale(0, Math.max(...allVals), 5);
+    const maxVal = ticks[ticks.length - 1];
+
+    const dims = this.#dims();
+    const { width, height, pad } = dims;
+    const plotH = height - pad.top - pad.bottom;
+    const plotW = width - pad.left - pad.right;
+    const groupW = plotW / data.length;
+    const barGap = 3;
+    const totalBarSpace = groupW * 0.7;
+    const subBarW = (totalBarSpace - barGap * (keys.length - 1)) / keys.length;
+    const groupPad = (groupW - totalBarSpace) / 2;
+
+    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims);
+
+    for (let i = 0; i < data.length; i++) {
+      for (let k = 0; k < keys.length; k++) {
+        const v = +(data[i][keys[k]] ?? 0);
+        const barH = maxVal ? (v / maxVal) * plotH : 0;
+        const bx = pad.left + groupW * i + groupPad + (subBarW + barGap) * k;
+        const by = pad.top + plotH - barH;
+        svg += `<rect data-slice="${k % 10}"${tip({ label: labels[i], value: v, series: keys[k] })} x="${bx}" y="${by}" width="${subBarW}" height="${barH}" rx="${this.#resolveRadius()}"/>`;
+
+        if (!this.hideValues) {
+          svg += `<text data-value x="${bx + subBarW / 2}" y="${by - 4}" text-anchor="middle" font-size="${dims.valueSize}">${fmt(v)}</text>`;
+        }
+      }
+    }
+
+    this.#legendData = keys.map((k, i) => ({ label: k, slot: i % 10 }));
+
+    return { svg, viewBox: `0 0 ${width} ${height}` };
+  }
+
+  /* ── Multi-line ───────────────────────────────────────────────── */
+
+  #renderMultiLine() {
+    const data = this.#data;
+    const keys = this.#yKeys();
+    const labels = data.map(d => d[this.x] ?? '');
+
+    const allVals = data.flatMap(d => keys.map(k => +(d[k] ?? 0)));
+    const ticks = niceScale(0, Math.max(...allVals), 5);
+    const maxVal = ticks[ticks.length - 1];
+
+    const dims = this.#dims();
+    const { width, height, pad } = dims;
+    const plotH = height - pad.top - pad.bottom;
+    const plotW = width - pad.left - pad.right;
+    const step = plotW / Math.max(data.length - 1, 1);
+
+    let svg = this.#gridAndAxes(width, height, ticks, labels, pad, dims);
+
+    for (let k = 0; k < keys.length; k++) {
+      const vals = data.map(d => +(d[keys[k]] ?? 0));
+      const points = vals.map((v, i) => {
+        const px = pad.left + step * i;
+        const py = pad.top + plotH - (maxVal ? (v / maxVal) * plotH : 0);
+        return { x: px, y: py, v, label: labels[i] };
+      });
+
+      const baseline = pad.top + plotH;
+      const t = Math.max(0, Math.min(1, this.smooth));
+
+      /* Area fill */
+      svg += `<path data-area data-slice="${k % 10}" d="${smoothAreaPath(points, baseline, t)}"/>`;
+
+      /* Line */
+      svg += `<path data-line data-slice="${k % 10}" d="${smoothPath(points, t)}"/>`;
+
+      /* Dots + hit targets. Hit circles deliberately omit data-slice so
+         they aren't caught by the circle[data-slice] fill rule in CSS. */
+      for (const p of points) {
+        svg += `<circle data-dot data-slice="${k % 10}" cx="${p.x}" cy="${p.y}" r="3"/>`;
+        svg += `<circle data-hit${tip({ label: p.label, value: p.v, series: keys[k] })} cx="${p.x}" cy="${p.y}" r="10" fill="transparent"/>`;
+      }
+    }
+
+    this.#legendData = keys.map((k, i) => ({ label: k, slot: i % 10 }));
+
+    return { svg, viewBox: `0 0 ${width} ${height}` };
+  }
+
+  /* ── Legend ────────────────────────────────────────────────────── */
+
+  #legendData = null;
+
+  #buildLegend() {
+    if (!this.#legendData || !this.#legendData.length) return null;
+
+    const legend = document.createElement('div');
+    legend.setAttribute('data-legend', '');
+
+    for (const item of this.#legendData) {
+      const el = document.createElement('span');
+      el.setAttribute('data-legend-item', '');
+
+      const dot = document.createElement('span');
+      dot.setAttribute('data-legend-dot', '');
+      dot.setAttribute('data-slice', String(item.slot));
+      el.appendChild(dot);
+
+      const text = document.createElement('span');
+      text.textContent = item.pct ? `${item.label} (${item.pct}%)` : item.label;
+      el.appendChild(text);
+
+      legend.appendChild(el);
+    }
+
+    this.#legendData = null;
+    return legend;
+  }
+}
+customElements.define('chart-ui', AdiaChart);
+
+export { AdiaChart };