decantr 0.9.0

package/src/chart/types/line.js

@@ -0,0 +1,111 @@
+/**
+ * Line chart layout — produces scene graph.
+ * Supports: multi-series, step, smooth interpolation, labels, gaps.
+ * @module types/line
+ */
+
+import { scene, group, path, circle, text } from '../_scene.js';
+import { pointsToPathD, smoothPathD, stepPathD } from '../_scene.js';
+import { cartesian } from '../layouts/cartesian.js';
+import { chartColor, buildAnnotations } from '../layouts/_layout-base.js';
+import { resolve, groupBy, downsampleLTTB } from '../_shared.js';
+
+/**
+ * @param {Object} spec — resolved chart spec
+ * @param {number} width
+ * @param {number} height
+ * @returns {Object} scene graph
+ */
+export function layoutLine(spec, width, height) {
+  const data = resolve(spec.data);
+  const coords = cartesian(spec, width, height);
+  const { innerW, innerH, margins, xScale, yScale, xType, axisNodes, gridNodes } = coords;
+  const fields = Array.isArray(spec.y) ? spec.y : [spec.y];
+
+  // Build series
+  let series;
+  if (spec.series) {
+    const groups = groupBy(data, spec.series);
+    series = [...groups.entries()].map(([key, rows], i) => {
+      const sampled = rows.length > innerW * 2 ? downsampleLTTB(rows, spec.x, fields[0], Math.round(innerW * 2)) : rows;
+      return {
+        key, color: chartColor(i),
+        points: mapPoints(sampled, spec, xScale, yScale, xType, fields[0])
+      };
+    });
+  } else {
+    series = fields.map((f, i) => {
+      const sampled = data.length > innerW * 2 ? downsampleLTTB(data, spec.x, f, Math.round(innerW * 2)) : data;
+      return {
+        key: f, color: chartColor(i),
+        points: mapPoints(sampled, spec, xScale, yScale, xType, f)
+      };
+    });
+  }
+
+  // Build scene
+  const children = [];
+
+  // Grid
+  if (spec.grid !== false) children.push(...gridNodes);
+
+  // Axes
+  children.push(...axisNodes);
+
+  // Lines
+  for (const s of series) {
+    if (s.points.length < 2) continue;
+    let d;
+    if (spec.step) d = stepPathD(s.points);
+    else if (spec.smooth) d = smoothPathD(s.points);
+    else d = pointsToPathD(s.points);
+
+    children.push(path({
+      d, stroke: s.color, strokeWidth: 2,
+      strokeLinecap: 'round', strokeLinejoin: 'round',
+      class: 'd-chart-line',
+      data: { series: s.key }, key: `line-${s.key}`
+    }));
+
+    // Data point dots (suppress when points > 50 for LTTB-downsampled datasets)
+    if (spec.dots !== false && s.points.length <= 50) {
+      for (const p of s.points) {
+        children.push(circle({
+          cx: p.x, cy: p.y, r: 3,
+          fill: s.color, stroke: 'var(--d-bg)', strokeWidth: 2,
+          class: 'd-chart-point',
+          data: { series: s.key, value: p.raw[Array.isArray(spec.y) ? s.key : spec.y], label: String(p.raw[spec.x]) },
+          key: `dot-${s.key}-${p.x}`
+        }));
+      }
+    }
+
+    // Data point labels
+    if (spec.labels) {
+      for (const p of s.points) {
+        children.push(text({
+          x: p.x, y: p.y - 8,
+          content: String(p.raw[Array.isArray(spec.y) ? s.key : spec.y]),
+          anchor: 'middle', class: 'd-chart-axis', fontSize: 'var(--d-text-xs)'
+        }));
+      }
+    }
+  }
+
+  // Annotations
+  if (spec.annotations) {
+    children.push(...buildAnnotations(spec.annotations, xScale, yScale, xType, innerW, innerH));
+  }
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'line', series, xScale, yScale, xType, margins, innerW, innerH, dataLength: data.length });
+}
+
+function mapPoints(data, spec, xScale, yScale, xType, field) {
+  return data.map(d => {
+    const xVal = xType === 'band' ? d[spec.x] : (xType === 'time' ? new Date(d[spec.x]) : +d[spec.x]);
+    const x = xScale(xVal) + (xType === 'band' ? xScale.bandwidth() / 2 : 0);
+    return { x, y: yScale(+d[field]), raw: d };
+  });
+}

package/src/chart/types/org-chart.js

@@ -0,0 +1,93 @@
+/**
+ * Org chart layout — Walker tree layout.
+ * Supports: expand/collapse, orientations (top-down, left-right).
+ * @module types/org-chart
+ */
+
+import { scene, group, rect, text, path } from '../_scene.js';
+import { buildHierarchy, walkerLayout } from '../layouts/hierarchy.js';
+import { chartColor, MARGINS } from '../layouts/_layout-base.js';
+import { resolve } from '../_shared.js';
+
+export function layoutOrgChart(spec, width, height) {
+  const data = resolve(spec.data);
+  const idField = spec.id || 'id';
+  const parentField = spec.parent || 'parent';
+  const labelField = spec.label || spec.x || 'label';
+  const valueField = spec.y || 'value';
+  const orientation = spec.orientation || 'top-down';
+
+  const margins = { top: 16, right: 16, bottom: 16, left: 16 };
+  const innerW = width - margins.left - margins.right;
+  const innerH = height - margins.top - margins.bottom;
+
+  const root = buildHierarchy(data, idField, parentField, valueField);
+  const layout = walkerLayout(root, innerW, innerH, orientation, {
+    nodeWidth: spec.nodeWidth || 120,
+    nodeHeight: spec.nodeHeight || 50,
+    siblingGap: 16,
+    levelGap: 60
+  });
+
+  const children = [];
+
+  // Edges
+  for (const edge of layout.edges) {
+    const midY = (edge.y0 + edge.y1) / 2;
+    let d;
+    if (orientation === 'left-right') {
+      const midX = (edge.x0 + edge.x1) / 2;
+      d = `M${edge.x0},${edge.y0}C${midX},${edge.y0},${midX},${edge.y1},${edge.x1},${edge.y1}`;
+    } else {
+      d = `M${edge.x0},${edge.y0}C${edge.x0},${midY},${edge.x1},${midY},${edge.x1},${edge.y1}`;
+    }
+    children.push(path({
+      d, stroke: 'var(--d-border)', strokeWidth: 1.5,
+      class: 'd-chart-line', key: `org-edge-${edge.source}-${edge.target}`
+    }));
+  }
+
+  // Nodes
+  for (const n of layout.nodes) {
+    const color = chartColor(n.depth % 8);
+    const nodeData = n.data;
+
+    children.push(rect({
+      x: n.x, y: n.y, w: n.w, h: n.h,
+      rx: 6, fill: color, opacity: 0.15,
+      stroke: color, strokeWidth: 1.5,
+      class: 'd-chart-bar',
+      data: {
+        label: nodeData?.[labelField] || n.id,
+        value: n.value, series: 'org-chart'
+      },
+      key: `org-node-${n.id}`
+    }));
+
+    // Node label
+    const label = String(nodeData?.[labelField] || n.id).slice(0, 18);
+    children.push(text({
+      x: n.x + n.w / 2, y: n.y + n.h / 2 + 4,
+      content: label, anchor: 'middle', fill: 'var(--d-fg)',
+      fontSize: 'var(--d-text-xs)', fontWeight: 'var(--d-fw-title)'
+    }));
+
+    // Expand/collapse indicator
+    if (n.children && n.children.length > 0) {
+      children.push(text({
+        x: n.x + n.w - 12, y: n.y + 14,
+        content: `(${n.children.length})`, anchor: 'middle',
+        fill: 'var(--d-muted)', fontSize: '8px'
+      }));
+    }
+  }
+
+  const series = layout.nodes.map(n => ({
+    key: n.data?.[labelField] || n.id,
+    color: chartColor(n.depth % 8)
+  }));
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'org-chart', series, layout, margins, innerW, innerH, dataLength: data.length });
+}

package/src/chart/types/pie.js

@@ -0,0 +1,81 @@
+/**
+ * Pie / Donut chart layout — produces scene graph.
+ * Supports: variable radius, multiple rings, nested donut.
+ * @module types/pie
+ */
+
+import { scene, arc, text } from '../_scene.js';
+import { polar, sliceAngles } from '../layouts/polar.js';
+import { chartColor, MARGINS_NONE } from '../layouts/_layout-base.js';
+import { resolve } from '../_shared.js';
+
+/**
+ * @param {Object} spec — resolved chart spec
+ * @param {number} width
+ * @param {number} height
+ * @returns {Object} scene graph
+ */
+export function layoutPie(spec, width, height) {
+  const data = resolve(spec.data);
+  const yField = Array.isArray(spec.y) ? spec.y[0] : spec.y;
+  const xField = spec.x;
+
+  const innerRadiusRatio = spec.donut !== false ? 0.55 : 0;
+  const coords = polar(width, height, { innerRadiusRatio, padding: 8 });
+  const { cx, cy, radius, innerRadius, startAngle, totalAngle } = coords;
+
+  const values = data.map(d => Math.abs(+d[yField] || 0));
+  const angles = sliceAngles(values, startAngle, totalAngle);
+  let total = 0;
+  for (const v of values) total += v;
+
+  const slices = data.map((d, i) => ({
+    label: d[xField],
+    value: values[i],
+    percentage: angles[i].percentage,
+    startAngle: angles[i].startAngle,
+    endAngle: angles[i].endAngle,
+    color: chartColor(i),
+    raw: d
+  }));
+
+  // Build scene
+  const children = [];
+  for (const s of slices) {
+    children.push(arc({
+      cx, cy, outerR: radius, innerR: innerRadius,
+      startAngle: s.startAngle, endAngle: s.endAngle,
+      fill: s.color, class: 'd-chart-slice',
+      data: {
+        label: s.label, value: s.value,
+        ariaLabel: `${s.label}: ${s.value} (${s.percentage.toFixed(1)}%)`,
+        series: s.label
+      },
+      key: `slice-${s.label}`
+    }));
+
+    // Labels
+    if (spec.labels) {
+      const midAngle = (s.startAngle + s.endAngle) / 2;
+      const labelR = (radius + innerRadius) / 2;
+      const lx = cx + labelR * Math.cos(midAngle);
+      const ly = cy + labelR * Math.sin(midAngle);
+      children.push(text({
+        x: lx, y: ly, content: `${s.percentage.toFixed(0)}%`,
+        anchor: 'middle', baseline: 'middle',
+        class: 'd-chart-axis', fontSize: 'var(--d-text-xs)',
+        fill: 'var(--d-fg)'
+      }));
+    }
+  }
+
+  const series = slices.map(s => ({ key: s.label, color: s.color }));
+
+  return scene(width, height, children, {
+    type: 'pie', series, slices,
+    cx, cy, radius, innerRadius,
+    margins: MARGINS_NONE,
+    innerW: width, innerH: height,
+    dataLength: data.length
+  });
+}

package/src/chart/types/radar.js

@@ -0,0 +1,96 @@
+/**
+ * Radar chart layout.
+ * Supports: line, area, reversed, markers, labels.
+ * @module types/radar
+ */
+
+import { scene, group, path, circle, text, line, polygon } from '../_scene.js';
+import { polar, polarPoint } from '../layouts/polar.js';
+import { chartColor, MARGINS_NONE } from '../layouts/_layout-base.js';
+import { resolve, groupBy, extent } from '../_shared.js';
+
+export function layoutRadar(spec, width, height) {
+  const data = resolve(spec.data);
+  const xField = spec.x;
+  const yFields = Array.isArray(spec.y) ? spec.y : [spec.y];
+  const categories = data.map(d => d[xField]);
+  const n = categories.length;
+
+  const coords = polar(width, height, { padding: 40 });
+  const { cx, cy, radius } = coords;
+
+  // Find value range
+  let maxVal = -Infinity;
+  for (const d of data) {
+    for (const f of yFields) {
+      const v = +d[f] || 0;
+      if (v > maxVal) maxVal = v;
+    }
+  }
+  if (maxVal <= 0) maxVal = 1;
+  const levels = 5;
+
+  const children = [];
+
+  // Grid rings
+  for (let l = 1; l <= levels; l++) {
+    const r = (l / levels) * radius;
+    const ringPts = [];
+    for (let i = 0; i < n; i++) {
+      const angle = -Math.PI / 2 + (i / n) * Math.PI * 2;
+      ringPts.push(polarPoint(cx, cy, r, angle));
+    }
+    children.push(polygon({
+      points: ringPts, fill: 'none',
+      stroke: 'var(--d-border)', strokeWidth: 0.5, opacity: 0.5
+    }));
+  }
+
+  // Axis spokes + labels
+  for (let i = 0; i < n; i++) {
+    const angle = -Math.PI / 2 + (i / n) * Math.PI * 2;
+    const outer = polarPoint(cx, cy, radius, angle);
+    children.push(line({ x1: cx, y1: cy, x2: outer.x, y2: outer.y, stroke: 'var(--d-border)', strokeWidth: 0.5 }));
+
+    const labelPt = polarPoint(cx, cy, radius + 16, angle);
+    children.push(text({
+      x: labelPt.x, y: labelPt.y + 4,
+      content: String(categories[i]),
+      anchor: Math.abs(angle + Math.PI / 2) < 0.1 ? 'middle' : (labelPt.x > cx ? 'start' : 'end'),
+      class: 'd-chart-axis', fontSize: 'var(--d-text-xs)'
+    }));
+  }
+
+  // Data series
+  const series = yFields.map((f, fi) => {
+    const color = chartColor(fi);
+    const pts = data.map((d, i) => {
+      const val = +d[f] || 0;
+      const r = (val / maxVal) * radius;
+      const angle = -Math.PI / 2 + (i / n) * Math.PI * 2;
+      return polarPoint(cx, cy, r, angle);
+    });
+
+    // Filled area
+    children.push(polygon({
+      points: pts, fill: color, opacity: 0.15, stroke: color, strokeWidth: 2
+    }));
+
+    // Data points
+    for (let i = 0; i < pts.length; i++) {
+      children.push(circle({
+        cx: pts[i].x, cy: pts[i].y, r: 3,
+        fill: color, class: 'd-chart-point',
+        data: { series: f, value: data[i][f], label: categories[i] },
+        key: `radar-${f}-${i}`
+      }));
+    }
+
+    return { key: f, color, points: pts };
+  });
+
+  return scene(width, height, children, {
+    type: 'radar', series, margins: MARGINS_NONE,
+    innerW: width, innerH: height, dataLength: data.length
+  });
+}

package/src/chart/types/radial.js

@@ -0,0 +1,68 @@
+/**
+ * Radial bar / Nightingale chart layout.
+ * Supports: column, bar, stacked, reversed.
+ * @module types/radial
+ */
+
+import { scene, arc, text } from '../_scene.js';
+import { polar, polarPoint } from '../layouts/polar.js';
+import { chartColor, MARGINS_NONE } from '../layouts/_layout-base.js';
+import { resolve } from '../_shared.js';
+
+export function layoutRadial(spec, width, height) {
+  const data = resolve(spec.data);
+  const xField = spec.x;
+  const yField = Array.isArray(spec.y) ? spec.y[0] : spec.y;
+  const n = data.length;
+
+  const coords = polar(width, height, { innerRadiusRatio: 0.3, padding: 24 });
+  const { cx, cy, radius, innerRadius, startAngle, totalAngle } = coords;
+
+  let maxVal = -Infinity;
+  for (const d of data) {
+    const v = +d[yField] || 0;
+    if (v > maxVal) maxVal = v;
+  }
+  if (maxVal <= 0) maxVal = 1;
+
+  const sliceAngle = totalAngle / n;
+  const gap = 0.02;
+  const children = [];
+  const series = [];
+
+  for (let i = 0; i < n; i++) {
+    const d = data[i];
+    const val = +d[yField] || 0;
+    const sa = startAngle + i * sliceAngle + gap;
+    const ea = startAngle + (i + 1) * sliceAngle - gap;
+    const outerR = innerRadius + (val / maxVal) * (radius - innerRadius);
+    const color = chartColor(i);
+
+    children.push(arc({
+      cx, cy, innerR: innerRadius, outerR,
+      startAngle: sa, endAngle: ea,
+      fill: color, class: 'd-chart-slice',
+      data: { label: d[xField], value: val, series: d[xField],
+        ariaLabel: `${d[xField]}: ${val}` },
+      key: `radial-${i}`
+    }));
+
+    // Label
+    const midAngle = (sa + ea) / 2;
+    const labelPt = polarPoint(cx, cy, radius + 14, midAngle);
+    children.push(text({
+      x: labelPt.x, y: labelPt.y + 4,
+      content: String(d[xField]),
+      anchor: labelPt.x > cx ? 'start' : 'end',
+      class: 'd-chart-axis', fontSize: 'var(--d-text-xs)'
+    }));
+
+    series.push({ key: d[xField], color });
+  }
+
+  return scene(width, height, children, {
+    type: 'radial', series, margins: MARGINS_NONE,
+    innerW: width, innerH: height, cx, cy, radius, innerRadius,
+    dataLength: data.length
+  });
+}

package/src/chart/types/range-area.js

@@ -0,0 +1,55 @@
+/**
+ * Range Area chart layout.
+ * Supports: difference, inverted, labels.
+ * @module types/range-area
+ */
+
+import { scene, group, path, text } from '../_scene.js';
+import { pointsToPathD } from '../_scene.js';
+import { cartesian } from '../layouts/cartesian.js';
+import { chartColor } from '../layouts/_layout-base.js';
+import { resolve } from '../_shared.js';
+
+export function layoutRangeArea(spec, width, height) {
+  const data = resolve(spec.data);
+  const lowField = spec.low || (Array.isArray(spec.y) ? spec.y[0] : 'low');
+  const highField = spec.high || (Array.isArray(spec.y) ? spec.y[1] : 'high');
+
+  const coords = cartesian({ ...spec, y: [lowField, highField] }, width, height);
+  const { innerW, innerH, margins, xScale, yScale, xType, axisNodes, gridNodes } = coords;
+
+  const children = [];
+  if (spec.grid !== false) children.push(...gridNodes);
+  children.push(...axisNodes);
+
+  // Map points
+  const points = data.map(d => {
+    const xVal = xType === 'band' ? d[spec.x] : (xType === 'time' ? new Date(d[spec.x]) : +d[spec.x]);
+    const x = xScale(xVal) + (xType === 'band' ? xScale.bandwidth() / 2 : 0);
+    return { x, yLow: yScale(+d[lowField]), yHigh: yScale(+d[highField]) };
+  });
+
+  // Area fill
+  let areaD = `M${points[0].x},${points[0].yHigh}`;
+  for (let i = 1; i < points.length; i++) areaD += `L${points[i].x},${points[i].yHigh}`;
+  for (let i = points.length - 1; i >= 0; i--) areaD += `L${points[i].x},${points[i].yLow}`;
+  areaD += 'Z';
+
+  children.push(path({ d: areaD, fill: chartColor(0), opacity: 0.2, class: 'd-chart-area', key: 'range-area-fill' }));
+
+  // Upper and lower bounds
+  children.push(path({
+    d: pointsToPathD(points.map(p => ({ x: p.x, y: p.yHigh }))),
+    stroke: chartColor(0), strokeWidth: 1.5, class: 'd-chart-line', key: 'range-area-high'
+  }));
+  children.push(path({
+    d: pointsToPathD(points.map(p => ({ x: p.x, y: p.yLow }))),
+    stroke: chartColor(0), strokeWidth: 1.5, strokeDash: '4,3', class: 'd-chart-line', key: 'range-area-low'
+  }));
+
+  const series = [{ key: `${lowField}-${highField}`, color: chartColor(0) }];
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'range-area', series, margins, innerW, innerH, dataLength: data.length });
+}

package/src/chart/types/range-bar.js

@@ -0,0 +1,61 @@
+/**
+ * Range Bar chart layout.
+ * Supports: labels, multi-series, horizontal.
+ * @module types/range-bar
+ */
+
+import { scene, group, rect, text, line } from '../_scene.js';
+import { MARGINS, innerDimensions, buildGridNodes, buildYAxisNodes, chartColor } from '../layouts/_layout-base.js';
+import { resolve, unique, scaleBand, scaleLinear, extent } from '../_shared.js';
+
+export function layoutRangeBar(spec, width, height) {
+  const data = resolve(spec.data);
+  const xField = spec.x;
+  const lowField = spec.low || (Array.isArray(spec.y) ? spec.y[0] : 'low');
+  const highField = spec.high || (Array.isArray(spec.y) ? spec.y[1] : 'high');
+  const categories = unique(data, xField);
+
+  const margins = { ...MARGINS };
+  const { innerW, innerH } = innerDimensions(width, height, margins);
+  const xScale = scaleBand(categories, [0, innerW], 0.2);
+  const bandW = xScale.bandwidth();
+
+  let yMin = Infinity, yMax = -Infinity;
+  for (const d of data) {
+    const lo = +d[lowField], hi = +d[highField];
+    if (lo < yMin) yMin = lo;
+    if (hi > yMax) yMax = hi;
+  }
+  const pad = (yMax - yMin) * 0.1 || 1;
+  const yScale = scaleLinear([yMin - pad, yMax + pad], [innerH, 0]);
+
+  const children = [];
+  if (spec.grid !== false) children.push(...buildGridNodes(yScale, innerW));
+
+  children.push(line({ x1: 0, y1: innerH, x2: innerW, y2: innerH, stroke: 'var(--d-border)', class: 'd-chart-axis' }));
+  for (const cat of categories) {
+    children.push(text({ x: xScale(cat) + bandW / 2, y: innerH + 18, content: String(cat), anchor: 'middle', class: 'd-chart-axis' }));
+  }
+  children.push(...buildYAxisNodes(yScale, innerH, spec));
+
+  for (let i = 0; i < data.length; i++) {
+    const d = data[i];
+    const lo = +d[lowField], hi = +d[highField];
+    const x = xScale(d[xField]);
+    children.push(rect({
+      x, y: yScale(hi), w: bandW, h: yScale(lo) - yScale(hi),
+      fill: chartColor(i % 8), rx: 2, class: 'd-chart-bar',
+      data: { label: d[xField], value: `${lo}-${hi}`, series: 'range' },
+      key: `rbar-${i}`
+    }));
+
+    if (spec.labels) {
+      children.push(text({ x: x + bandW / 2, y: yScale(hi) - 6, content: String(hi), anchor: 'middle', class: 'd-chart-axis', fontSize: 'var(--d-text-xs)' }));
+      children.push(text({ x: x + bandW / 2, y: yScale(lo) + 14, content: String(lo), anchor: 'middle', class: 'd-chart-axis', fontSize: 'var(--d-text-xs)' }));
+    }
+  }
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'range-bar', margins, innerW, innerH, dataLength: data.length });
+}

package/src/chart/types/sankey.js

@@ -0,0 +1,73 @@
+/**
+ * Sankey diagram layout.
+ * Supports: flow diagram, iterative node positioning, cubic Bezier links.
+ * @module types/sankey
+ */
+
+import { scene, group, rect, path, text } from '../_scene.js';
+import { sankeyLayout } from '../layouts/hierarchy.js';
+import { chartColor, MARGINS } from '../layouts/_layout-base.js';
+import { resolve } from '../_shared.js';
+
+export function layoutSankey(spec, width, height) {
+  const rawData = resolve(spec.data);
+  const nodes = resolve(spec.nodes) || (rawData && rawData.nodes) || (Array.isArray(rawData) ? rawData : []);
+  const links = resolve(spec.links) || (rawData && rawData.links) || [];
+
+  const margins = { top: 16, right: 16, bottom: 16, left: 16 };
+  const innerW = width - margins.left - margins.right;
+  const innerH = height - margins.top - margins.bottom;
+
+  const layout = sankeyLayout(nodes, links, innerW, innerH, {
+    nodeWidth: spec.nodeWidth || 20,
+    nodePadding: spec.nodePadding || 12,
+    iterations: 32
+  });
+
+  const children = [];
+  const series = [];
+
+  // Links (curved Bezier paths)
+  for (let i = 0; i < layout.links.length; i++) {
+    const l = layout.links[i];
+    const curvature = 0.5;
+    const xi = l.x0 + (l.x1 - l.x0) * curvature;
+    const d = `M${l.x0},${l.y0}C${xi},${l.y0},${xi},${l.y1},${l.x1},${l.y1}`;
+
+    children.push(path({
+      d, stroke: chartColor(i % 8), strokeWidth: Math.max(1, l.width),
+      opacity: 0.4, strokeLinecap: 'butt',
+      class: 'd-chart-line',
+      data: { label: `${l.source.id} → ${l.target.id}`, value: l.value, series: 'sankey-link' },
+      key: `sankey-link-${i}`
+    }));
+  }
+
+  // Nodes
+  for (let i = 0; i < layout.nodes.length; i++) {
+    const n = layout.nodes[i];
+    const color = chartColor(i % 8);
+
+    children.push(rect({
+      x: n.x, y: n.y, w: n.w, h: Math.max(1, n.h),
+      fill: color, class: 'd-chart-bar',
+      data: { label: n.label, value: n.value, series: 'sankey-node' },
+      key: `sankey-node-${n.id}`
+    }));
+
+    // Label
+    const labelX = n.x < innerW / 2 ? n.x + n.w + 6 : n.x - 6;
+    const anchor = n.x < innerW / 2 ? 'start' : 'end';
+    children.push(text({
+      x: labelX, y: n.y + n.h / 2 + 4,
+      content: n.label, anchor,
+      class: 'd-chart-axis', fontSize: 'var(--d-text-xs)'
+    }));
+
+    series.push({ key: n.label, color });
+  }
+
+  return scene(width, height, [
+    group({ transform: `translate(${margins.left},${margins.top})` }, children)
+  ], { type: 'sankey', series, layout, margins, innerW, innerH, dataLength: nodes.length });
+}