@slickfast/mcp 0.1.0

package/dist/index.js

@@ -0,0 +1,1360 @@
+#!/usr/bin/env node
+
+// server.mjs
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { z } from "zod";
+import { readFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+
+// ../../packages/palette-core/tokens.json
+var tokens_default = {
+  version: "1.0.0",
+  description: "Design tokens for BarGraphFast / PieChartFast / future data-viz sites and the rendering API. Language-agnostic: any consumer reads this verbatim. The color math that turns these into resolved palettes lives in palette-core (see README). Parity across consumers is enforced by golden-vectors.json.",
+  flatPalettes: [
+    { name: "Clean Corporate", colors: ["#2563eb", "#7c3aed", "#059669", "#d97706", "#dc2626", "#0891b2", "#65a30d", "#9333ea"] },
+    { name: "Pastel", colors: ["#93c5fd", "#c4b5fd", "#6ee7b7", "#fcd34d", "#fca5a5", "#67e8f9", "#bbf7d0", "#f0abfc"] },
+    { name: "Vibrant", colors: ["#f43f5e", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#6366f1", "#a855f7", "#ec4899"] },
+    { name: "Monochrome", colors: ["#c8cdd4", "#a0a8b4", "#78838f", "#57606a", "#3d4752", "#6e8090", "#b0bac4", "#8a95a0"] },
+    { name: "Cyberpunk", colors: ["#ec4899", "#a855f7", "#22d3ee", "#d946ef", "#8b5cf6", "#2dd4bf", "#f472b6", "#0ea5e9"] },
+    { name: "Analogous Shift", colors: ["#6b2d5c", "#c8324b", "#f2785c", "#f2913d", "#f6b73c", "#fcd848", "#a3c940", "#2fa98c"] }
+  ],
+  nestedThemes: [
+    { name: "Modern Corporate", pie1: ["#14B8A6", "#0A2540", "#64748B"] },
+    { name: "Nordic Earth", pie1: ["#7C8A4E", "#C0683C", "#CBA14A"] },
+    { name: "Cyberpunk Glow", pie1: ["#A855F7", "#EC4899", "#22D3EE"], dark: true },
+    { name: "Sequential Rainbow", pie1: ["#F43F5E", "#2563EB", "#FACC15"], hueShift: 15, hueSpread: 25 },
+    { name: "Retro Editorial", tiers: [["#D4A017", "#C65D3B", "#2F7E8C"], ["#7A7C3F", "#C98B91", "#2C3E5C"], ["#A7B59A", "#F0C3A0", "#EDE4D0"]] },
+    { name: "Analogous Shift", tiers: [["#6B2D5C", "#C8324B", "#F2785C"], ["#F2913D", "#F6B73C", "#FCD848"], ["#A3C940", "#6FCF97", "#2FA98C"]] },
+    { name: "Classic Triadic", tiers: [["#4338CA", "#14B8A6", "#FB7185"], ["#374151", "#D4AF6A", "#6EE7B7"], ["#64748B", "#C4B5FD", "#FBCFE0"]] },
+    { name: "Sorbet Pastel", tiers: [["#C9B6E4", "#BFD8A4", "#F6C396"], ["#A9CCE3", "#F5E79E", "#F4B8D0"], ["#A8E0C8", "#D6CDEA", "#F6CBA0"]] },
+    { name: "Clean Corporate", pie1: ["#2563eb", "#7c3aed", "#059669"] },
+    { name: "Pastel", pie1: ["#93c5fd", "#c4b5fd", "#6ee7b7"] },
+    { name: "Vibrant", pie1: ["#f43f5e", "#f97316", "#eab308"] },
+    { name: "Monochrome", pie1: ["#c8cdd4", "#a0a8b4", "#78838f"] }
+  ],
+  rampConfig: {
+    comment: "Tunables for the generative color math. Mirror of the constants baked into palette-core's generators, surfaced here as design data. Changing these requires regenerating golden-vectors.json.",
+    monochromatic: { startLightness: 75, endLightness: 35 },
+    tier: {
+      depth1: { startLightnessClampMin: 46, startLightnessClampMax: 58, lightnessSpan: 24, saturationFloor: 42, saturationDrop: 4 },
+      depthN: { startLightness: 70, lightnessSpan: 16, saturationFloor: 32, saturationDrop: 20 },
+      lightnessCeiling: 92
+    },
+    fallback: { startLightnessOffset: 8, endLightnessStep: 8, lightnessCeiling: 92 }
+  }
+};
+
+// ../../packages/palette-core/palette-core.mjs
+var RAMP = tokens_default.rampConfig;
+function hexToRgb(hex) {
+  hex = String(hex).replace(/^#/, "");
+  if (hex.length === 3) hex = hex.split("").map((c) => c + c).join("");
+  const n = parseInt(hex, 16);
+  return { r: n >> 16 & 255, g: n >> 8 & 255, b: n & 255 };
+}
+function rgbToHsl(r2, g, b) {
+  r2 /= 255;
+  g /= 255;
+  b /= 255;
+  const mx = Math.max(r2, g, b), mn = Math.min(r2, g, b);
+  let h, s, l = (mx + mn) / 2;
+  if (mx === mn) {
+    h = s = 0;
+  } else {
+    const d = mx - mn;
+    s = l > 0.5 ? d / (2 - mx - mn) : d / (mx + mn);
+    switch (mx) {
+      case r2:
+        h = (g - b) / d + (g < b ? 6 : 0);
+        break;
+      case g:
+        h = (b - r2) / d + 2;
+        break;
+      default:
+        h = (r2 - g) / d + 4;
+    }
+    h /= 6;
+  }
+  return { h: h * 360, s: s * 100, l: l * 100 };
+}
+function hexToHsl(hex) {
+  const { r: r2, g, b } = hexToRgb(hex);
+  return rgbToHsl(r2, g, b);
+}
+function hslToHex(h, s, l) {
+  h = (h % 360 + 360) % 360;
+  s = Math.max(0, Math.min(100, s)) / 100;
+  l = Math.max(0, Math.min(100, l)) / 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(h / 60 % 2 - 1)), m = l - c / 2;
+  let r2, g, b;
+  if (h < 60) {
+    [r2, g, b] = [c, x, 0];
+  } else if (h < 120) {
+    [r2, g, b] = [x, c, 0];
+  } else if (h < 180) {
+    [r2, g, b] = [0, c, x];
+  } else if (h < 240) {
+    [r2, g, b] = [0, x, c];
+  } else if (h < 300) {
+    [r2, g, b] = [x, 0, c];
+  } else {
+    [r2, g, b] = [c, 0, x];
+  }
+  const to = (v) => ("0" + Math.round((v + m) * 255).toString(16)).slice(-2);
+  return "#" + to(r2) + to(g) + to(b);
+}
+function getLuminance(hex) {
+  const { r: r2, g, b } = hexToRgb(hex);
+  return [r2, g, b].reduce((sum, c, i) => {
+    c /= 255;
+    c = c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    return sum + c * [0.2126, 0.7152, 0.0722][i];
+  }, 0);
+}
+function contrastColor(hex) {
+  return getLuminance(hex) > 0.179 ? "#1a1a1a" : "#ffffff";
+}
+function generateMonochromaticPalette(baseHue, baseSaturation, sliceCount, startLightness = RAMP.monochromatic.startLightness, endLightness = RAMP.monochromatic.endLightness) {
+  const colors = [];
+  const step = (startLightness - endLightness) / Math.max(sliceCount - 1, 1);
+  for (let i = 0; i < sliceCount; i++) {
+    colors.push(hslToHex(baseHue, baseSaturation, startLightness - i * step));
+  }
+  return colors;
+}
+function tierPalette(rootHex, depth, count, opts = {}) {
+  const { hueShift = 0, hueSpread = 0 } = opts;
+  const d1 = RAMP.tier.depth1, dN = RAMP.tier.depthN, ceil = RAMP.tier.lightnessCeiling;
+  const base = hexToHsl(rootHex);
+  const startL = depth === 1 ? Math.min(Math.max(base.l, d1.startLightnessClampMin), d1.startLightnessClampMax) : dN.startLightness;
+  const spanL = depth === 1 ? d1.lightnessSpan : dN.lightnessSpan;
+  const S = depth === 1 ? Math.max(d1.saturationFloor, base.s - d1.saturationDrop) : Math.max(dN.saturationFloor, base.s - dN.saturationDrop);
+  const out = [];
+  for (let i = 0; i < count; i++) {
+    const t = count > 1 ? i / (count - 1) : 0;
+    out.push(hslToHex(base.h + hueShift * depth + hueSpread * t, S, Math.min(ceil, startL + t * spanL)));
+  }
+  return out;
+}
+function generateTierPaletteWithFallback(predefinedColors, sliceCount, rootHex = null) {
+  if (sliceCount <= predefinedColors.length) return predefinedColors.slice(0, sliceCount);
+  const fb = RAMP.fallback;
+  const result = predefinedColors.slice();
+  const remaining = sliceCount - predefinedColors.length;
+  const baseHsl = hexToHsl(predefinedColors[predefinedColors.length - 1]);
+  const baseHue = rootHex ? hexToHsl(rootHex).h : baseHsl.h;
+  const startLightness = baseHsl.l + fb.startLightnessOffset;
+  const endLightness = Math.min(fb.lightnessCeiling, baseHsl.l + remaining * fb.endLightnessStep);
+  const dynamic = generateMonochromaticPalette(baseHue, baseHsl.s, remaining + 1, startLightness, endLightness);
+  result.push(...dynamic.slice(1));
+  return result.slice(0, sliceCount);
+}
+var FLAT_PALETTES = tokens_default.flatPalettes;
+var NESTED_THEMES = tokens_default.nestedThemes;
+function resolveFlatPalette(name, count) {
+  const p = FLAT_PALETTES.find((p2) => p2.name === name) || FLAT_PALETTES[0];
+  return generateTierPaletteWithFallback(p.colors, count);
+}
+function resolveNestedTheme(themeName, pieIndex, count, rootHexOverride = null) {
+  const theme = NESTED_THEMES.find((t) => t.name === themeName) || NESTED_THEMES[0];
+  if (theme.tiers) {
+    const predefined = theme.tiers[Math.min(pieIndex, theme.tiers.length - 1)];
+    return generateTierPaletteWithFallback(predefined, count);
+  }
+  if (pieIndex === 0) return generateTierPaletteWithFallback(theme.pie1, count);
+  const root = rootHexOverride || theme.pie1[0];
+  return tierPalette(root, pieIndex, count, theme);
+}
+
+// ../../packages/fonts/fonts.mjs
+var FONTS = {
+  Inter: "Inter, system-ui, -apple-system, sans-serif",
+  System: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+  Serif: "Georgia, 'Times New Roman', serif",
+  Mono: "'JetBrains Mono', 'SF Mono', Menlo, monospace",
+  Rounded: "'Nunito', 'Segoe UI', system-ui, sans-serif",
+  Condensed: "'Roboto Condensed', 'Arial Narrow', sans-serif"
+};
+var DEFAULT_FONT = FONTS.Inter;
+function resolveFont(spec = {}) {
+  if (spec.fontFamily) return spec.fontFamily;
+  if (spec.font && FONTS[spec.font]) return FONTS[spec.font];
+  return DEFAULT_FONT;
+}
+
+// ../../packages/render-core/render-core.mjs
+function contrastFloor(color, bg, transparent) {
+  if (transparent || typeof color !== "string" || color[0] !== "#") return color;
+  const lc = getLuminance(color), lb = getLuminance(bg);
+  if (Math.abs(lc - lb) >= 0.22) return color;
+  const hsl = hexToHsl(color);
+  const dl = lb > 0.5 ? -30 : 30;
+  return hslToHex(hsl.h, hsl.s, Math.max(0, Math.min(100, hsl.l + dl)));
+}
+var esc = (s) => String(s ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+var r = (n) => Math.round(n * 100) / 100;
+var fmt = (n) => (Number(n) || 0).toLocaleString("en-US");
+function pct100(vals) {
+  const tot = vals.reduce((a, b) => a + b, 0);
+  if (tot <= 0) return vals.map(() => 0);
+  const exact = vals.map((v) => v / tot * 100);
+  const out = exact.map(Math.floor);
+  const rem = 100 - out.reduce((a, b) => a + b, 0);
+  const order = exact.map((v, i) => [i, v - Math.floor(v)]).sort((a, b) => b[1] - a[1]);
+  for (let k = 0; k < rem; k++) out[order[k % order.length][0]]++;
+  return out;
+}
+var txt = (spec, fallback) => spec.textColor || fallback;
+var wAttr = (spec, base) => {
+  const w = spec.fontWeight ? esc(spec.fontWeight) : spec.bold === true ? Math.min(900, base + 100) : base;
+  return `font-weight="${w}"`;
+};
+var wOpt = (spec) => {
+  if (spec.fontWeight) return ` font-weight="${esc(spec.fontWeight)}"`;
+  if (spec.bold === true) return ' font-weight="700"';
+  return "";
+};
+function niceNum(x, round) {
+  const v = x > 0 ? x : 1;
+  const exp = Math.floor(Math.log10(v));
+  const f = v / Math.pow(10, exp);
+  const nf = round ? f < 1.5 ? 1 : f < 3 ? 2 : f < 7 ? 5 : 10 : f <= 1 ? 1 : f <= 2 ? 2 : f <= 5 ? 5 : 10;
+  return nf * Math.pow(10, exp);
+}
+function niceScale(max, ticks = 5) {
+  const m = max > 0 ? max : 1;
+  const step = niceNum(niceNum(m, false) / ticks, true);
+  return { step, niceMax: Math.ceil(m / step) * step };
+}
+function topRoundedBar(x, y, w, h, rad) {
+  const rr = Math.min(rad, w / 2, h);
+  return `M${r(x)},${r(y + h)} L${r(x)},${r(y + rr)} Q${r(x)},${r(y)} ${r(x + rr)},${r(y)} L${r(x + w - rr)},${r(y)} Q${r(x + w)},${r(y)} ${r(x + w)},${r(y + rr)} L${r(x + w)},${r(y + h)} Z`;
+}
+function rightRoundedBar(x, y, w, h, rad) {
+  const rr = Math.min(rad, h / 2, w);
+  return `M${r(x)},${r(y)} L${r(x + w - rr)},${r(y)} Q${r(x + w)},${r(y)} ${r(x + w)},${r(y + rr)} L${r(x + w)},${r(y + h - rr)} Q${r(x + w)},${r(y + h)} ${r(x + w - rr)},${r(y + h)} L${r(x)},${r(y + h)} Z`;
+}
+function bottomRoundedBar(x, y, w, h, rad) {
+  const rr = Math.min(rad, w / 2, h);
+  return `M${r(x)},${r(y)} L${r(x + w)},${r(y)} L${r(x + w)},${r(y + h - rr)} Q${r(x + w)},${r(y + h)} ${r(x + w - rr)},${r(y + h)} L${r(x + rr)},${r(y + h)} Q${r(x)},${r(y + h)} ${r(x)},${r(y + h - rr)} Z`;
+}
+function straightPath(pts) {
+  return pts.map((pt, i) => (i ? "L" : "M") + pt[0] + "," + pt[1]).join(" ");
+}
+function steppedPath(pts) {
+  let d = `M${pts[0][0]},${pts[0][1]}`;
+  for (let i = 1; i < pts.length; i++) d += ` L${pts[i][0]},${pts[i - 1][1]} L${pts[i][0]},${pts[i][1]}`;
+  return d;
+}
+function smoothPath(pts) {
+  if (pts.length < 3) return straightPath(pts);
+  let d = `M${pts[0][0]},${pts[0][1]}`;
+  for (let i = 0; i < pts.length - 1; i++) {
+    const p0 = pts[i - 1] || pts[i], p1 = pts[i], p2 = pts[i + 1], p3 = pts[i + 2] || p2;
+    const c1x = p1[0] + (p2[0] - p0[0]) / 6, c1y = p1[1] + (p2[1] - p0[1]) / 6;
+    const c2x = p2[0] - (p3[0] - p1[0]) / 6, c2y = p2[1] - (p3[1] - p1[1]) / 6;
+    d += ` C${r(c1x)},${r(c1y)} ${r(c2x)},${r(c2y)} ${p2[0]},${p2[1]}`;
+  }
+  return d;
+}
+function arcPath(cx, cy, rad, a0, a1, innerR) {
+  const x0 = r(cx + rad * Math.cos(a0)), y0 = r(cy + rad * Math.sin(a0));
+  const x1 = r(cx + rad * Math.cos(a1)), y1 = r(cy + rad * Math.sin(a1));
+  const large = a1 - a0 > Math.PI ? 1 : 0;
+  if (innerR > 0) {
+    const ix0 = r(cx + innerR * Math.cos(a0)), iy0 = r(cy + innerR * Math.sin(a0));
+    const ix1 = r(cx + innerR * Math.cos(a1)), iy1 = r(cy + innerR * Math.sin(a1));
+    return `M${x0},${y0} A${rad},${rad} 0 ${large} 1 ${x1},${y1} L${ix1},${iy1} A${innerR},${innerR} 0 ${large} 0 ${ix0},${iy0} Z`;
+  }
+  return `M${r(cx)},${r(cy)} L${x0},${y0} A${rad},${rad} 0 ${large} 1 ${x1},${y1} Z`;
+}
+function renderBar(spec) {
+  const W = spec.width || 800, H = spec.height || 450;
+  const bg = spec.background || "#ffffff";
+  const transparent = bg === "transparent" || bg === "none";
+  const isDark = !transparent && getLuminance(bg) < 0.35;
+  const fs = spec.fontSize ? Number(spec.fontSize) : Math.max(13, Math.round(13 * Math.sqrt(W * H) / 600));
+  const font = resolveFont(spec);
+  const title = spec.title || "";
+  const labels = spec.data.labels;
+  const values = spec.data.series[0].values.map((v) => Number(v) || 0);
+  const u = spec.valueUnit ? " " + spec.valueUnit : "";
+  const showValues = spec.showValues !== false;
+  const showTotal = spec.showTotal !== false;
+  const watermark = spec.watermark !== false;
+  const explicit = spec.data.series[0].colors;
+  const colors = Array.isArray(explicit) && explicit.length >= labels.length ? explicit : resolveFlatPalette(spec.palette || "Clean Corporate", labels.length);
+  const axisText = txt(spec, isDark ? "#94a3b8" : "#64748b");
+  const gridCol = isDark ? "#1e293b" : "#e2e8f0";
+  const catText = txt(spec, isDark ? "#cbd5e1" : "#475569");
+  const valText = txt(spec, isDark ? "#e2e8f0" : "#334155");
+  const titleCol = txt(spec, isDark ? "#f1f5f9" : "#0f172a");
+  const faint = isDark ? "#475569" : "#94a3b8";
+  const M = { left: 56, right: 24, top: title ? 54 : 28, bottom: 46 };
+  const plotW = W - M.left - M.right;
+  const plotH = H - M.top - M.bottom;
+  const maxV = Math.max(0, ...values);
+  const { step, niceMax } = niceScale(maxV);
+  const yPix = (v) => M.top + plotH - v / niceMax * plotH;
+  const band = plotW / labels.length;
+  const barW = Math.min(band * 0.62, 96);
+  const p = [];
+  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
+  for (let v = 0; v <= niceMax + 1e-9; v += step) {
+    const y = r(yPix(v));
+    p.push(`<line x1="${M.left}" y1="${y}" x2="${r(M.left + plotW)}" y2="${y}" stroke="${gridCol}" stroke-width="1"/>`);
+    p.push(`<text x="${M.left - 8}" y="${r(y + 4)}" text-anchor="end" font-size="${fs - 2}"${wOpt(spec)} fill="${axisText}">${fmt(v)}</text>`);
+  }
+  values.forEach((v, i) => {
+    const x = M.left + i * band + (band - barW) / 2;
+    const y = yPix(v);
+    const h = M.top + plotH - y;
+    const cx = r(x + barW / 2);
+    p.push(`<path d="${topRoundedBar(x, y, barW, h, 5)}" fill="${colors[i]}"/>`);
+    if (showValues) p.push(`<text x="${cx}" y="${r(y - 7)}" text-anchor="middle" font-size="${fs - 1}" ${wAttr(spec, 600)} fill="${valText}">${esc(fmt(v) + u)}</text>`);
+    p.push(`<text x="${cx}" y="${r(M.top + plotH + 18)}" text-anchor="middle" font-size="${fs - 1}"${wOpt(spec)} fill="${catText}">${esc(labels[i])}</text>`);
+  });
+  if (showTotal) {
+    const total = values.reduce((s, v) => s + v, 0);
+    p.push(`<text x="${r(W - M.right)}" y="${title ? 50 : 20}" text-anchor="end" font-size="${fs - 1}"${wOpt(spec)} fill="${axisText}">Total: ${esc(fmt(total) + u)}</text>`);
+  }
+  if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
+  if (watermark) p.push(`<text x="${r(W - 8)}" y="${r(H - 8)}" text-anchor="end" font-size="10" fill="${faint}" opacity="0.7">slickfast.com</text>`);
+  p.push(`</svg>`);
+  return p.join("\n");
+}
+function renderBarGrouped(spec) {
+  const W = spec.width || 800, H = spec.height || 450;
+  const bg = spec.background || "#ffffff";
+  const transparent = bg === "transparent" || bg === "none";
+  const isDark = !transparent && getLuminance(bg) < 0.35;
+  const fs = spec.fontSize ? Number(spec.fontSize) : Math.max(13, Math.round(13 * Math.sqrt(W * H) / 600));
+  const font = resolveFont(spec);
+  const title = spec.title || "";
+  const labels = spec.data.labels;
+  const series = spec.data.series;
+  const u = spec.valueUnit ? " " + spec.valueUnit : "";
+  const showValues = spec.showValues !== false;
+  const watermark = spec.watermark !== false;
+  const cols = resolveFlatPalette(spec.palette || "Clean Corporate", 8);
+  const mid = Math.floor(cols.length / 2);
+  const seriesColor = (s, i) => s.color || (i === 0 ? cols[0] : i === 1 ? cols[mid] || cols[1] : cols[i % cols.length]);
+  const axisText = txt(spec, isDark ? "#94a3b8" : "#64748b");
+  const gridCol = isDark ? "#1e293b" : "#e2e8f0";
+  const catText = txt(spec, isDark ? "#cbd5e1" : "#475569");
+  const valText = txt(spec, isDark ? "#e2e8f0" : "#334155");
+  const titleCol = txt(spec, isDark ? "#f1f5f9" : "#0f172a");
+  const faint = isDark ? "#475569" : "#94a3b8";
+  const multi = series.length > 1;
+  const M = { left: 56, right: 24, top: title ? 54 : 28, bottom: multi ? 64 : 46 };
+  const plotW = W - M.left - M.right;
+  const plotH = H - M.top - M.bottom;
+  const maxV = Math.max(0, ...series.flatMap((s) => s.values.map((v) => Number(v) || 0)));
+  const { step, niceMax } = niceScale(maxV);
+  const yPix = (v) => M.top + plotH - v / niceMax * plotH;
+  const band = plotW / labels.length;
+  const groupW = Math.min(band * 0.72, 132);
+  const n = series.length;
+  const barW = groupW / n;
+  const p = [];
+  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
+  for (let v = 0; v <= niceMax + 1e-9; v += step) {
+    const y = r(yPix(v));
+    p.push(`<line x1="${M.left}" y1="${y}" x2="${r(M.left + plotW)}" y2="${y}" stroke="${gridCol}" stroke-width="1"/>`);
+    p.push(`<text x="${M.left - 8}" y="${r(y + 4)}" text-anchor="end" font-size="${fs - 2}"${wOpt(spec)} fill="${axisText}">${fmt(v)}</text>`);
+  }
+  labels.forEach((lab, i) => {
+    const gx = M.left + i * band + (band - groupW) / 2;
+    series.forEach((s, si) => {
+      const v = Number(s.values[i]) || 0;
+      const x = gx + si * barW;
+      const y = yPix(v);
+      const h = M.top + plotH - y;
+      const cx = r(x + barW / 2);
+      p.push(`<path d="${topRoundedBar(x + 1, y, barW - 2, h, 4)}" fill="${seriesColor(s, si)}"/>`);
+      if (showValues && v > 0) p.push(`<text x="${cx}" y="${r(y - 6)}" text-anchor="middle" font-size="${fs - 3}" ${wAttr(spec, 600)} fill="${valText}">${esc(fmt(v) + u)}</text>`);
+    });
+    p.push(`<text x="${r(M.left + i * band + band / 2)}" y="${r(M.top + plotH + 18)}" text-anchor="middle" font-size="${fs - 1}"${wOpt(spec)} fill="${catText}">${esc(lab)}</text>`);
+  });
+  if (multi) {
+    const items = series.map((s, i) => ({ name: s.name || "Bar " + (i + 1), col: seriesColor(s, i) }));
+    const widths = items.map((it) => 16 + it.name.length * (fs * 0.56) + 18);
+    let lx = (W - widths.reduce((a, b) => a + b, 0)) / 2;
+    const ly = H - 16;
+    items.forEach((it, i) => {
+      p.push(`<rect x="${r(lx)}" y="${r(ly - 9)}" width="11" height="11" rx="2.5" fill="${it.col}"/>`);
+      p.push(`<text x="${r(lx + 17)}" y="${r(ly)}" font-size="${fs - 1}"${wOpt(spec)} fill="${catText}">${esc(it.name)}</text>`);
+      lx += widths[i];
+    });
+  }
+  if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
+  if (watermark) p.push(`<text x="${r(W - 8)}" y="${r(H - 8)}" text-anchor="end" font-size="10" fill="${faint}" opacity="0.7">slickfast.com</text>`);
+  p.push(`</svg>`);
+  return p.join("\n");
+}
+function renderBarStacked(spec) {
+  const W = spec.width || 800, H = spec.height || 450;
+  const bg = spec.background || "#ffffff";
+  const transparent = bg === "transparent" || bg === "none";
+  const isDark = !transparent && getLuminance(bg) < 0.35;
+  const fs = spec.fontSize ? Number(spec.fontSize) : Math.max(13, Math.round(13 * Math.sqrt(W * H) / 600));
+  const font = resolveFont(spec);
+  const title = spec.title || "";
+  const labels = spec.data.labels;
+  const series = spec.data.series;
+  const u = spec.valueUnit ? " " + spec.valueUnit : "";
+  const showValues = spec.showValues !== false;
+  const watermark = spec.watermark !== false;
+  const is100 = spec.type === "stacked100";
+  const cols = resolveFlatPalette(spec.palette || "Clean Corporate", Math.max(series.length, 2));
+  const segColor = (s, i) => s.color || cols[i % cols.length];
+  const axisText = txt(spec, isDark ? "#94a3b8" : "#64748b");
+  const gridCol = isDark ? "#1e293b" : "#e2e8f0";
+  const catText = txt(spec, isDark ? "#cbd5e1" : "#475569");
+  const titleCol = txt(spec, isDark ? "#f1f5f9" : "#0f172a");
+  const faint = isDark ? "#475569" : "#94a3b8";
+  const M = { left: 56, right: 24, top: title ? 54 : 28, bottom: 64 };
+  const plotW = W - M.left - M.right;
+  const plotH = H - M.top - M.bottom;
+  const raw = (si, i) => Math.max(0, Number(series[si].values[i]) || 0);
+  const colPct = is100 ? labels.map((_, i) => pct100(series.map((_s, si) => raw(si, i)))) : null;
+  const val = (si, i) => is100 ? colPct[i][si] : raw(si, i);
+  const totals = labels.map((_, i) => series.reduce((a, _s, si) => a + val(si, i), 0));
+  const maxV = is100 ? 100 : Math.max(0, ...totals);
+  const { step, niceMax } = is100 ? { step: 20, niceMax: 100 } : niceScale(maxV);
+  const yPix = (v) => M.top + plotH - v / niceMax * plotH;
+  const band = plotW / labels.length;
+  const barW = Math.min(band * 0.62, 96);
+  const p = [];
+  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
+  for (let v = 0; v <= niceMax + 1e-9; v += step) {
+    const y = r(yPix(v));
+    p.push(`<line x1="${M.left}" y1="${y}" x2="${r(M.left + plotW)}" y2="${y}" stroke="${gridCol}" stroke-width="1"/>`);
+    p.push(`<text x="${M.left - 8}" y="${r(y + 4)}" text-anchor="end" font-size="${fs - 2}"${wOpt(spec)} fill="${axisText}">${fmt(v)}</text>`);
+  }
+  labels.forEach((lab, i) => {
+    const x = M.left + i * band + (band - barW) / 2;
+    const cx = r(x + barW / 2);
+    const barTotalH = totals[i] / niceMax * plotH || 1;
+    let topSeg = -1;
+    for (let k = series.length - 1; k >= 0; k--) {
+      if ((Number(series[k].values[i]) || 0) > 0) {
+        topSeg = k;
+        break;
+      }
+    }
+    let cum = 0;
+    series.forEach((s, si) => {
+      const v = val(si, i);
+      if (v <= 0) return;
+      const yTop = yPix(cum + v), yBot = yPix(cum), h = yBot - yTop;
+      const col = segColor(s, si);
+      if (si === topSeg) p.push(`<path d="${topRoundedBar(x, yTop, barW, h, 5)}" fill="${col}"/>`);
+      else p.push(`<rect x="${r(x)}" y="${r(yTop)}" width="${r(barW)}" height="${r(h)}" fill="${col}"/>`);
+      const tc = spec.textColor || contrastColor(col);
+      if (s.name && h >= 24 && h >= 0.12 * barTotalH) p.push(`<text x="${cx}" y="${r(yTop + 14)}" text-anchor="middle" font-size="${fs - 2}" ${wAttr(spec, 700)} fill="${tc}">${esc(s.name)}</text>`);
+      if (showValues && h >= 14) p.push(`<text x="${cx}" y="${r(yBot - 7)}" text-anchor="middle" font-size="${fs - 1}" ${wAttr(spec, 600)} fill="${tc}">${esc(fmt(v) + (is100 ? "%" : u))}</text>`);
+      cum += v;
+    });
+    p.push(`<text x="${cx}" y="${r(M.top + plotH + 18)}" text-anchor="middle" font-size="${fs - 1}"${wOpt(spec)} fill="${catText}">${esc(lab)}</text>`);
+  });
+  const items = series.map((s, i) => ({ name: s.name || "Series " + (i + 1), col: segColor(s, i) }));
+  const widths = items.map((it) => 16 + it.name.length * (fs * 0.56) + 18);
+  let lx = (W - widths.reduce((a, b) => a + b, 0)) / 2;
+  const ly = H - 16;
+  items.forEach((it, i) => {
+    p.push(`<rect x="${r(lx)}" y="${r(ly - 9)}" width="11" height="11" rx="2.5" fill="${it.col}"/>`);
+    p.push(`<text x="${r(lx + 17)}" y="${r(ly)}" font-size="${fs - 1}"${wOpt(spec)} fill="${catText}">${esc(it.name)}</text>`);
+    lx += widths[i];
+  });
+  if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
+  if (watermark) p.push(`<text x="${r(W - 8)}" y="${r(H - 8)}" text-anchor="end" font-size="10" fill="${faint}" opacity="0.7">slickfast.com</text>`);
+  p.push(`</svg>`);
+  return p.join("\n");
+}
+function renderBarStackedH(spec) {
+  const W = spec.width || 800, H = spec.height || 450;
+  const bg = spec.background || "#ffffff";
+  const transparent = bg === "transparent" || bg === "none";
+  const isDark = !transparent && getLuminance(bg) < 0.35;
+  const fs = spec.fontSize ? Number(spec.fontSize) : Math.max(13, Math.round(13 * Math.sqrt(W * H) / 600));
+  const font = resolveFont(spec);
+  const title = spec.title || "";
+  const labels = spec.data.labels;
+  const series = spec.data.series;
+  const u = spec.valueUnit ? " " + spec.valueUnit : "";
+  const showValues = spec.showValues !== false;
+  const watermark = spec.watermark !== false;
+  const cols = resolveFlatPalette(spec.palette || "Clean Corporate", Math.max(series.length, 2));
+  const segColor = (s, i) => s.color || cols[i % cols.length];
+  const axisText = txt(spec, isDark ? "#94a3b8" : "#64748b");
+  const gridCol = isDark ? "#1e293b" : "#e2e8f0";
+  const catText = txt(spec, isDark ? "#cbd5e1" : "#475569");
+  const titleCol = txt(spec, isDark ? "#f1f5f9" : "#0f172a");
+  const faint = isDark ? "#475569" : "#94a3b8";
+  const longest = Math.max(0, ...labels.map((l) => String(l).length));
+  const M = { left: Math.min(160, 24 + longest * (fs * 0.62)), right: 28, top: title ? 54 : 28, bottom: 64 };
+  const plotW = W - M.left - M.right;
+  const plotH = H - M.top - M.bottom;
+  const raw = (si, i) => Math.max(0, Number(series[si].values[i]) || 0);
+  const totals = labels.map((_, i) => series.reduce((a, _s, si) => a + raw(si, i), 0));
+  const maxV = Math.max(0, ...totals);
+  const { step, niceMax } = niceScale(maxV);
+  const xPix = (v) => M.left + v / niceMax * plotW;
+  const band = plotH / labels.length;
+  const barH = Math.min(band * 0.62, 64);
+  const p = [];
+  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
+  for (let v = 0; v <= niceMax + 1e-9; v += step) {
+    const x = r(xPix(v));
+    p.push(`<line x1="${x}" y1="${M.top}" x2="${x}" y2="${r(M.top + plotH)}" stroke="${gridCol}" stroke-width="1"/>`);
+    p.push(`<text x="${x}" y="${r(M.top + plotH + 18)}" text-anchor="middle" font-size="${fs - 2}"${wOpt(spec)} fill="${axisText}">${fmt(v)}</text>`);
+  }
+  labels.forEach((lab, i) => {
+    const y = M.top + i * band + (band - barH) / 2;
+    const my = r(y + barH / 2 + 4);
+    let lastSeg = -1;
+    for (let k = series.length - 1; k >= 0; k--) {
+      if (raw(k, i) > 0) {
+        lastSeg = k;
+        break;
+      }
+    }
+    let cum = 0;
+    series.forEach((s, si) => {
+      const v = raw(si, i);
+      if (v <= 0) return;
+      const xL = xPix(cum), xR = xPix(cum + v), w = xR - xL;
+      const col = segColor(s, si);
+      if (si === lastSeg) p.push(`<path d="${rightRoundedBar(xL, y, w, barH, 5)}" fill="${col}"/>`);
+      else p.push(`<rect x="${r(xL)}" y="${r(y)}" width="${r(w)}" height="${r(barH)}" fill="${col}"/>`);
+      const tc = spec.textColor || contrastColor(col);
+      const cx = r(xL + w / 2);
+      if (s.name && w >= 58 && barH >= 30) {
+        p.push(`<text x="${cx}" y="${r(y + barH / 2 - 3)}" text-anchor="middle" font-size="${fs - 3}" ${wAttr(spec, 700)} fill="${tc}">${esc(s.name)}</text>`);
+        if (showValues) p.push(`<text x="${cx}" y="${r(y + barH / 2 + 13)}" text-anchor="middle" font-size="${fs - 1}" ${wAttr(spec, 600)} fill="${tc}">${esc(fmt(v) + u)}</text>`);
+      } else if (showValues && w >= 28) {
+        p.push(`<text x="${cx}" y="${my}" text-anchor="middle" font-size="${fs - 1}" ${wAttr(spec, 600)} fill="${tc}">${esc(fmt(v) + u)}</text>`);
+      }
+      cum += v;
+    });
+    p.push(`<text x="${r(M.left - 10)}" y="${my}" text-anchor="end" font-size="${fs - 1}"${wOpt(spec)} fill="${catText}">${esc(lab)}</text>`);
+  });
+  const items = series.map((s, i) => ({ name: s.name || "Series " + (i + 1), col: segColor(s, i) }));
+  const widths = items.map((it) => 16 + it.name.length * (fs * 0.56) + 18);
+  let lx = (W - widths.reduce((a, b) => a + b, 0)) / 2;
+  const ly = H - 16;
+  items.forEach((it, i) => {
+    p.push(`<rect x="${r(lx)}" y="${r(ly - 9)}" width="11" height="11" rx="2.5" fill="${it.col}"/>`);
+    p.push(`<text x="${r(lx + 17)}" y="${r(ly)}" font-size="${fs - 1}"${wOpt(spec)} fill="${catText}">${esc(it.name)}</text>`);
+    lx += widths[i];
+  });
+  if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
+  if (watermark) p.push(`<text x="${r(W - 8)}" y="${r(H - 8)}" text-anchor="end" font-size="10" fill="${faint}" opacity="0.7">slickfast.com</text>`);
+  p.push(`</svg>`);
+  return p.join("\n");
+}
+function renderBarH(spec) {
+  const W = spec.width || 800, H = spec.height || 450;
+  const bg = spec.background || "#ffffff";
+  const transparent = bg === "transparent" || bg === "none";
+  const isDark = !transparent && getLuminance(bg) < 0.35;
+  const fs = spec.fontSize ? Number(spec.fontSize) : Math.max(13, Math.round(13 * Math.sqrt(W * H) / 600));
+  const font = resolveFont(spec);
+  const title = spec.title || "";
+  const labels = spec.data.labels;
+  const values = spec.data.series[0].values.map((v) => Number(v) || 0);
+  const u = spec.valueUnit ? " " + spec.valueUnit : "";
+  const showValues = spec.showValues !== false;
+  const showTotal = spec.showTotal !== false;
+  const watermark = spec.watermark !== false;
+  const explicit = spec.data.series[0].colors;
+  const colors = Array.isArray(explicit) && explicit.length >= labels.length ? explicit : resolveFlatPalette(spec.palette || "Clean Corporate", labels.length);
+  const axisText = txt(spec, isDark ? "#94a3b8" : "#64748b");
+  const gridCol = isDark ? "#1e293b" : "#e2e8f0";
+  const catText = txt(spec, isDark ? "#cbd5e1" : "#475569");
+  const valText = txt(spec, isDark ? "#e2e8f0" : "#334155");
+  const titleCol = txt(spec, isDark ? "#f1f5f9" : "#0f172a");
+  const faint = isDark ? "#475569" : "#94a3b8";
+  const longest = Math.max(0, ...labels.map((l) => String(l).length));
+  const M = { left: Math.min(160, 24 + longest * (fs * 0.62)), right: 52, top: title ? 54 : 28, bottom: 46 };
+  const plotW = W - M.left - M.right;
+  const plotH = H - M.top - M.bottom;
+  const maxV = Math.max(0, ...values);
+  const { step, niceMax } = niceScale(maxV);
+  const xPix = (v) => M.left + v / niceMax * plotW;
+  const band = plotH / labels.length;
+  const barH = Math.min(band * 0.62, 56);
+  const p = [];
+  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
+  for (let v = 0; v <= niceMax + 1e-9; v += step) {
+    const x = r(xPix(v));
+    p.push(`<line x1="${x}" y1="${M.top}" x2="${x}" y2="${r(M.top + plotH)}" stroke="${gridCol}" stroke-width="1"/>`);
+    p.push(`<text x="${x}" y="${r(M.top + plotH + 18)}" text-anchor="middle" font-size="${fs - 2}"${wOpt(spec)} fill="${axisText}">${fmt(v)}</text>`);
+  }
+  values.forEach((v, i) => {
+    const y = M.top + i * band + (band - barH) / 2;
+    const my = r(y + barH / 2 + 4);
+    const w = xPix(v) - M.left;
+    p.push(`<path d="${rightRoundedBar(M.left, y, Math.max(0, w), barH, 5)}" fill="${colors[i]}"/>`);
+    if (showValues) {
+      if (w >= 44) p.push(`<text x="${r(xPix(v) - 8)}" y="${my}" text-anchor="end" font-size="${fs - 1}" ${wAttr(spec, 600)} fill="${spec.textColor || contrastColor(colors[i])}">${esc(fmt(v) + u)}</text>`);
+      else p.push(`<text x="${r(xPix(v) + 6)}" y="${my}" text-anchor="start" font-size="${fs - 1}" ${wAttr(spec, 600)} fill="${valText}">${esc(fmt(v) + u)}</text>`);
+    }
+    p.push(`<text x="${r(M.left - 10)}" y="${my}" text-anchor="end" font-size="${fs - 1}"${wOpt(spec)} fill="${catText}">${esc(labels[i])}</text>`);
+  });
+  if (showTotal) {
+    const total = values.reduce((s, v) => s + v, 0);
+    p.push(`<text x="${r(W - M.right + 44)}" y="${title ? 50 : 20}" text-anchor="end" font-size="${fs - 1}"${wOpt(spec)} fill="${axisText}">Total: ${esc(fmt(total) + u)}</text>`);
+  }
+  if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
+  if (watermark) p.push(`<text x="${r(W - 8)}" y="${r(H - 8)}" text-anchor="end" font-size="10" fill="${faint}" opacity="0.7">slickfast.com</text>`);
+  p.push(`</svg>`);
+  return p.join("\n");
+}
+function renderDiverging(spec) {
+  const W = spec.width || 800, H = spec.height || 450;
+  const bg = spec.background || "#ffffff";
+  const transparent = bg === "transparent" || bg === "none";
+  const isDark = !transparent && getLuminance(bg) < 0.35;
+  const fs = spec.fontSize ? Number(spec.fontSize) : Math.max(13, Math.round(13 * Math.sqrt(W * H) / 600));
+  const font = resolveFont(spec);
+  const title = spec.title || "";
+  const labels = spec.data.labels;
+  const series = spec.data.series;
+  const u = spec.valueUnit ? " " + spec.valueUnit : "";
+  const showValues = spec.showValues !== false;
+  const watermark = spec.watermark !== false;
+  const cols = resolveFlatPalette(spec.palette || "Clean Corporate", 8);
+  const mid = Math.floor(cols.length / 2);
+  const A = series[0], B = series[1] || { name: "", values: [] };
+  const colA = A.color || cols[0];
+  const colB = B.color || cols[mid] || cols[1];
+  const axisText = txt(spec, isDark ? "#94a3b8" : "#64748b");
+  const gridCol = isDark ? "#1e293b" : "#e2e8f0";
+  const zeroCol = isDark ? "#64748b" : "#334155";
+  const catText = txt(spec, isDark ? "#cbd5e1" : "#475569");
+  const valText = txt(spec, isDark ? "#e2e8f0" : "#334155");
+  const titleCol = txt(spec, isDark ? "#f1f5f9" : "#0f172a");
+  const faint = isDark ? "#475569" : "#94a3b8";
+  const M = { left: 56, right: 24, top: title ? 54 : 28, bottom: 64 };
+  const plotW = W - M.left - M.right;
+  const plotH = H - M.top - M.bottom;
+  const aVals = labels.map((_, i) => Math.abs(Number(A.values[i]) || 0));
+  const bVals = labels.map((_, i) => Math.abs(Number(B.values[i]) || 0));
+  const S = Math.max(1, ...aVals, ...bVals);
+  const { step, niceMax } = niceScale(S);
+  const half = plotH / 2;
+  const yZero = M.top + half;
+  const yUp = (v) => yZero - v / niceMax * half;
+  const yDn = (v) => yZero + v / niceMax * half;
+  const band = plotW / labels.length;
+  const barW = Math.min(band * 0.5, 72);
+  const p = [];
+  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
+  for (let v = step; v <= niceMax + 1e-9; v += step) {
+    [yUp(v), yDn(v)].forEach((y) => {
+      p.push(`<line x1="${M.left}" y1="${r(y)}" x2="${r(M.left + plotW)}" y2="${r(y)}" stroke="${gridCol}" stroke-width="1"/>`);
+    });
+    p.push(`<text x="${M.left - 8}" y="${r(yUp(v) + 4)}" text-anchor="end" font-size="${fs - 2}"${wOpt(spec)} fill="${axisText}">${fmt(v)}</text>`);
+    p.push(`<text x="${M.left - 8}" y="${r(yDn(v) + 4)}" text-anchor="end" font-size="${fs - 2}"${wOpt(spec)} fill="${axisText}">${fmt(v)}</text>`);
+  }
+  labels.forEach((lab, i) => {
+    const x = M.left + i * band + (band - barW) / 2;
+    const cx = r(x + barW / 2);
+    if (aVals[i] > 0) {
+      const yt = yUp(aVals[i]), h = yZero - yt;
+      p.push(`<path d="${topRoundedBar(x, yt, barW, h, 4)}" fill="${colA}"/>`);
+      if (showValues) p.push(`<text x="${cx}" y="${r(yt - 7)}" text-anchor="middle" font-size="${fs - 1}" ${wAttr(spec, 600)} fill="${valText}">${esc(fmt(aVals[i]) + u)}</text>`);
+    }
+    if (bVals[i] > 0) {
+      const h = yDn(bVals[i]) - yZero;
+      p.push(`<path d="${bottomRoundedBar(x, yZero, barW, h, 4)}" fill="${colB}"/>`);
+      if (showValues) p.push(`<text x="${cx}" y="${r(yDn(bVals[i]) + 16)}" text-anchor="middle" font-size="${fs - 1}" ${wAttr(spec, 600)} fill="${valText}">${esc(fmt(bVals[i]) + u)}</text>`);
+    }
+  });
+  p.push(`<line x1="${M.left}" y1="${r(yZero)}" x2="${r(M.left + plotW)}" y2="${r(yZero)}" stroke="${zeroCol}" stroke-width="1.75"/>`);
+  const pillFill = transparent ? isDark ? "#0b0f17" : "#ffffff" : bg;
+  labels.forEach((lab, i) => {
+    const cx = r(M.left + i * band + band / 2);
+    const lw = String(lab).length * (fs - 2) * 0.6 + 14;
+    p.push(`<rect x="${r(cx - lw / 2)}" y="${r(yZero - 9)}" width="${r(lw)}" height="18" rx="9" fill="${pillFill}"/>`);
+    p.push(`<text x="${cx}" y="${r(yZero + 4)}" text-anchor="middle" font-size="${fs - 2}" ${wAttr(spec, 600)} fill="${catText}">${esc(lab)}</text>`);
+  });
+  const items = [{ name: A.name || "Series A", col: colA }, { name: B.name || "Series B", col: colB }];
+  const widths = items.map((it) => 16 + it.name.length * (fs * 0.56) + 18);
+  let lx = (W - widths.reduce((a, b) => a + b, 0)) / 2;
+  const ly = H - 16;
+  items.forEach((it, i) => {
+    p.push(`<rect x="${r(lx)}" y="${r(ly - 9)}" width="11" height="11" rx="2.5" fill="${it.col}"/>`);
+    p.push(`<text x="${r(lx + 17)}" y="${r(ly)}" font-size="${fs - 1}"${wOpt(spec)} fill="${catText}">${esc(it.name)}</text>`);
+    lx += widths[i];
+  });
+  if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
+  if (watermark) p.push(`<text x="${r(W - 8)}" y="${r(H - 8)}" text-anchor="end" font-size="10" fill="${faint}" opacity="0.7">slickfast.com</text>`);
+  p.push(`</svg>`);
+  return p.join("\n");
+}
+function renderLollipop(spec) {
+  const W = spec.width || 800, H = spec.height || 450;
+  const bg = spec.background || "#ffffff";
+  const transparent = bg === "transparent" || bg === "none";
+  const isDark = !transparent && getLuminance(bg) < 0.35;
+  const fs = spec.fontSize ? Number(spec.fontSize) : Math.max(13, Math.round(13 * Math.sqrt(W * H) / 600));
+  const font = resolveFont(spec);
+  const title = spec.title || "";
+  const labels = spec.data.labels;
+  const values = spec.data.series[0].values.map((v) => Number(v) || 0);
+  const u = spec.valueUnit ? " " + spec.valueUnit : "";
+  const showValues = spec.showValues !== false;
+  const showTotal = spec.showTotal !== false;
+  const watermark = spec.watermark !== false;
+  const explicit = spec.data.series[0].colors;
+  const colors = Array.isArray(explicit) && explicit.length >= labels.length ? explicit : resolveFlatPalette(spec.palette || "Clean Corporate", labels.length);
+  const axisText = txt(spec, isDark ? "#94a3b8" : "#64748b");
+  const gridCol = isDark ? "#1e293b" : "#e2e8f0";
+  const catText = txt(spec, isDark ? "#cbd5e1" : "#475569");
+  const valText = txt(spec, isDark ? "#e2e8f0" : "#334155");
+  const titleCol = txt(spec, isDark ? "#f1f5f9" : "#0f172a");
+  const faint = isDark ? "#475569" : "#94a3b8";
+  const M = { left: 56, right: 24, top: title ? 54 : 28, bottom: 46 };
+  const plotW = W - M.left - M.right;
+  const plotH = H - M.top - M.bottom;
+  const maxV = Math.max(0, ...values);
+  const { step, niceMax } = niceScale(maxV);
+  const yPix = (v) => M.top + plotH - v / niceMax * plotH;
+  const band = plotW / labels.length;
+  const baseY = M.top + plotH;
+  const p = [];
+  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
+  for (let v = 0; v <= niceMax + 1e-9; v += step) {
+    const y = r(yPix(v));
+    p.push(`<line x1="${M.left}" y1="${y}" x2="${r(M.left + plotW)}" y2="${y}" stroke="${gridCol}" stroke-width="1"/>`);
+    p.push(`<text x="${M.left - 8}" y="${r(y + 4)}" text-anchor="end" font-size="${fs - 2}"${wOpt(spec)} fill="${axisText}">${fmt(v)}</text>`);
+  }
+  values.forEach((v, i) => {
+    const cx = r(M.left + i * band + band / 2);
+    const y = yPix(v);
+    const mc = contrastFloor(colors[i], bg, transparent);
+    p.push(`<line x1="${cx}" y1="${r(baseY)}" x2="${cx}" y2="${r(y)}" stroke="${mc}" stroke-width="3" stroke-linecap="round"/>`);
+    p.push(`<circle cx="${cx}" cy="${r(y)}" r="7" fill="${mc}"/>`);
+    if (showValues) p.push(`<text x="${cx}" y="${r(y - 14)}" text-anchor="middle" font-size="${fs - 1}" ${wAttr(spec, 600)} fill="${valText}">${esc(fmt(v) + u)}</text>`);
+    p.push(`<text x="${cx}" y="${r(baseY + 18)}" text-anchor="middle" font-size="${fs - 1}"${wOpt(spec)} fill="${catText}">${esc(labels[i])}</text>`);
+  });
+  if (showTotal) {
+    const total = values.reduce((s, v) => s + v, 0);
+    p.push(`<text x="${r(W - M.right)}" y="${title ? 50 : 20}" text-anchor="end" font-size="${fs - 1}"${wOpt(spec)} fill="${axisText}">Total: ${esc(fmt(total) + u)}</text>`);
+  }
+  if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
+  if (watermark) p.push(`<text x="${r(W - 8)}" y="${r(H - 8)}" text-anchor="end" font-size="10" fill="${faint}" opacity="0.7">slickfast.com</text>`);
+  p.push(`</svg>`);
+  return p.join("\n");
+}
+function renderKpi(spec) {
+  const W = spec.width || 340, H = spec.height || 180;
+  const bg = spec.background || "#ffffff";
+  const transparent = bg === "transparent" || bg === "none";
+  const isDark = !transparent && getLuminance(bg) < 0.35;
+  const fs = spec.fontSize ? Number(spec.fontSize) : Math.max(13, Math.round(13 * Math.sqrt(W * H) / 600));
+  const font = resolveFont(spec);
+  const watermark = spec.watermark !== false;
+  const accent = resolveFlatPalette(spec.palette || "Clean Corporate", 1)[0];
+  const labelCol = txt(spec, isDark ? "#94a3b8" : "#64748b");
+  const valueCol = txt(spec, isDark ? "#f1f5f9" : "#0f172a");
+  const faint = isDark ? "#475569" : "#94a3b8";
+  const label = spec.label || "";
+  const valueStr = (spec.valuePrefix || "") + fmt(spec.value) + (spec.valueUnit ? " " + spec.valueUnit : "");
+  const hasDelta = spec.delta !== void 0 && spec.delta !== null;
+  const d = Number(spec.delta) || 0;
+  const goodDown = spec.deltaGoodWhen === "down";
+  const good = goodDown ? d < 0 : d > 0;
+  const bad = goodDown ? d > 0 : d < 0;
+  const arrow = d > 0 ? "\u25B2" : d < 0 ? "\u25BC" : "\u2013";
+  const dText = arrow + " " + fmt(Math.abs(d)) + (spec.deltaUnit || "%");
+  const pillBg = good ? isDark ? "#064e3b" : "#ecfdf5" : bad ? isDark ? "#7f1d1d" : "#fef2f2" : isDark ? "#334155" : "#f1f5f9";
+  const pillTx = good ? isDark ? "#6ee7b7" : "#059669" : bad ? isDark ? "#fca5a5" : "#dc2626" : labelCol;
+  const p = [];
+  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" rx="14" fill="${bg}"/>`);
+  const portrait = H > W;
+  if (!portrait) {
+    const cx = 40;
+    p.push(`<rect x="18" y="28" width="5" height="${r(H - 56)}" rx="2.5" fill="${accent}"/>`);
+    if (label) p.push(`<text x="${cx}" y="48" font-size="${fs + 1}" ${wAttr(spec, 600)} fill="${labelCol}">${esc(label)}</text>`);
+    p.push(`<text x="${cx}" y="104" font-size="42" ${wAttr(spec, 800)} fill="${valueCol}">${esc(valueStr)}</text>`);
+    if (hasDelta) {
+      const pillW = Math.round(dText.length * 7.3 + 18);
+      p.push(`<rect x="${cx}" y="124" width="${pillW}" height="24" rx="12" fill="${pillBg}"/>`);
+      p.push(`<text x="${r(cx + pillW / 2)}" y="140" text-anchor="middle" font-size="12.5" ${wAttr(spec, 700)} fill="${pillTx}">${esc(dText)}</text>`);
+    }
+  } else {
+    const hasLabel = !!label;
+    const px = Math.round(W * 0.09);
+    const valFont = Math.max(48, Math.min(Math.round(W * 0.16), Math.round((W - 2 * px) / Math.max(1, valueStr.length) * 1.7)));
+    const labelFont = Math.round(valFont * 0.32);
+    const pillFont = Math.round(valFont * 0.3);
+    const pillH = Math.round(pillFont * 1.9);
+    const gap1 = Math.round(valFont * 0.3), gap2 = Math.round(valFont * 0.34);
+    const blockH = (hasLabel ? labelFont + gap1 : 0) + valFont + (hasDelta ? gap2 + pillH : 0);
+    let y = Math.round((H - blockH) / 2);
+    const accW = Math.max(5, Math.round(W * 0.012));
+    p.push(`<rect x="${Math.round(W * 0.04)}" y="${r(y)}" width="${accW}" height="${r(blockH)}" rx="${r(accW / 2)}" fill="${accent}"/>`);
+    if (hasLabel) {
+      const by = y + labelFont;
+      p.push(`<text x="${px}" y="${r(by)}" font-size="${labelFont}" ${wAttr(spec, 600)} fill="${labelCol}">${esc(label)}</text>`);
+      y = by + gap1;
+    }
+    const vy = y + valFont;
+    p.push(`<text x="${px}" y="${r(vy)}" font-size="${valFont}" ${wAttr(spec, 800)} fill="${valueCol}">${esc(valueStr)}</text>`);
+    y = vy + gap2;
+    if (hasDelta) {
+      const pillW = Math.round(dText.length * pillFont * 0.62 + pillFont * 1.4);
+      p.push(`<rect x="${px}" y="${r(y)}" width="${pillW}" height="${pillH}" rx="${r(pillH / 2)}" fill="${pillBg}"/>`);
+      p.push(`<text x="${r(px + pillW / 2)}" y="${r(y + pillH * 0.68)}" text-anchor="middle" font-size="${pillFont}" ${wAttr(spec, 700)} fill="${pillTx}">${esc(dText)}</text>`);
+    }
+  }
+  if (watermark) p.push(`<text x="${W - 10}" y="${H - 9}" text-anchor="end" font-size="9" fill="${faint}" opacity="0.6">slickfast.com</text>`);
+  p.push(`</svg>`);
+  return p.join("\n");
+}
+function renderLine(spec) {
+  const W = spec.width || 800, H = spec.height || 450;
+  const bg = spec.background || "#ffffff";
+  const transparent = bg === "transparent" || bg === "none";
+  const isDark = !transparent && getLuminance(bg) < 0.35;
+  const fs = spec.fontSize ? Number(spec.fontSize) : Math.max(13, Math.round(13 * Math.sqrt(W * H) / 600));
+  const font = resolveFont(spec);
+  const watermark = spec.watermark !== false;
+  const title = spec.title || "";
+  const labels = spec.data.labels;
+  const series = spec.data.series;
+  const u = spec.valueUnit ? " " + spec.valueUnit : "";
+  const showValues = spec.showValues === true;
+  const showPoints = spec.showPoints !== false;
+  const smooth = spec.curve === "smooth" || spec.type === "smooth";
+  const stepped = spec.curve === "stepped" || spec.type === "stepped";
+  const area = spec.area === true || spec.type === "area";
+  const stackedArea = spec.stacked === true || spec.type === "stackedArea" || spec.type === "stacked-area";
+  const difference = spec.type === "difference";
+  const pal = resolveFlatPalette(spec.palette || "Clean Corporate", Math.max(series.length, 2));
+  const colorOf = (s, i) => s.color || pal[i % pal.length];
+  const axisText = txt(spec, isDark ? "#94a3b8" : "#64748b");
+  const gridCol = isDark ? "#1e293b" : "#e2e8f0";
+  const catText = txt(spec, isDark ? "#cbd5e1" : "#475569");
+  const valText = txt(spec, isDark ? "#e2e8f0" : "#334155");
+  const titleCol = txt(spec, isDark ? "#f1f5f9" : "#0f172a");
+  const faint = isDark ? "#475569" : "#94a3b8";
+  const multi = series.length > 1;
+  const M = { left: 56, right: 24, top: title ? 54 : 28, bottom: multi ? 64 : 46 };
+  const plotW = W - M.left - M.right;
+  const plotH = H - M.top - M.bottom;
+  const maxV = stackedArea ? Math.max(1, ...labels.map((_, i) => series.reduce((s, sr) => s + (Number(sr.values[i]) || 0), 0))) : Math.max(0, ...series.flatMap((s) => s.values.map((v) => Number(v) || 0)));
+  const { step, niceMax } = niceScale(maxV);
+  const yPix = (v) => M.top + plotH - v / niceMax * plotH;
+  const n = labels.length;
+  const xPix = (i) => M.left + (n > 1 ? i / (n - 1) : 0.5) * plotW;
+  const p = [];
+  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
+  for (let v = 0; v <= niceMax + 1e-9; v += step) {
+    const y = r(yPix(v));
+    p.push(`<line x1="${M.left}" y1="${y}" x2="${r(M.left + plotW)}" y2="${y}" stroke="${gridCol}" stroke-width="1"/>`);
+    p.push(`<text x="${M.left - 8}" y="${r(y + 4)}" text-anchor="end" font-size="${fs - 2}"${wOpt(spec)} fill="${axisText}">${fmt(v)}</text>`);
+  }
+  labels.forEach((lab, i) => {
+    const anchor = i === 0 ? "start" : i === labels.length - 1 ? "end" : "middle";
+    p.push(`<text x="${r(xPix(i))}" y="${r(M.top + plotH + 18)}" text-anchor="${anchor}" font-size="${fs - 1}"${wOpt(spec)} fill="${catText}">${esc(lab)}</text>`);
+  });
+  const dot = (pt, col) => `<circle cx="${pt[0]}" cy="${pt[1]}" r="3.5" fill="${col}" stroke="${transparent ? col : bg}" stroke-width="1.5"/>`;
+  if (stackedArea) {
+    const cum = new Array(n).fill(0);
+    series.forEach((s, si) => {
+      const col = colorOf(s, si);
+      const top = cum.map((c, i) => c + (Number(s.values[i]) || 0));
+      const topPts = top.map((v, i) => [r(xPix(i)), r(yPix(v))]);
+      const botPts = cum.map((v, i) => [r(xPix(i)), r(yPix(v))]);
+      const topD = straightPath(topPts);
+      const botD = botPts.slice().reverse().map((pt) => "L" + pt[0] + "," + pt[1]).join(" ");
+      p.push(`<path d="${topD} ${botD} Z" fill="${col}" fill-opacity="0.8" stroke="none"/>`);
+      p.push(`<path d="${topD}" fill="none" stroke="${col}" stroke-width="2" stroke-linejoin="round"/>`);
+      if (showPoints) topPts.forEach((pt) => p.push(dot(pt, col)));
+      top.forEach((v, i) => {
+        cum[i] = v;
+      });
+    });
+  } else if (difference) {
+    const a = series[0], b = series[1] || series[0];
+    const colA = colorOf(a, 0), colB = colorOf(b, 1);
+    const aPts = labels.map((_, i) => [r(xPix(i)), r(yPix(Number(a.values[i]) || 0))]);
+    const bPts = labels.map((_, i) => [r(xPix(i)), r(yPix(Number(b.values[i]) || 0))]);
+    const aD = straightPath(aPts);
+    const bandBack = bPts.slice().reverse().map((pt) => "L" + pt[0] + "," + pt[1]).join(" ");
+    p.push(`<path d="${aD} ${bandBack} Z" fill="${isDark ? "#475569" : "#cbd5e1"}" fill-opacity="0.35" stroke="none"/>`);
+    p.push(`<path d="${aD}" fill="none" stroke="${colA}" stroke-width="2.5"/>`);
+    p.push(`<path d="${straightPath(bPts)}" fill="none" stroke="${colB}" stroke-width="2.5"/>`);
+    if (showPoints) {
+      aPts.forEach((pt) => p.push(dot(pt, colA)));
+      bPts.forEach((pt) => p.push(dot(pt, colB)));
+    }
+    labels.forEach((_, i) => {
+      const gap = (Number(a.values[i]) || 0) - (Number(b.values[i]) || 0);
+      const my = r((aPts[i][1] + bPts[i][1]) / 2 + 4);
+      p.push(`<text x="${r(xPix(i))}" y="${my}" text-anchor="middle" font-size="${fs - 1}" ${wAttr(spec, 700)} fill="${gap >= 0 ? "#059669" : "#dc2626"}">${(gap >= 0 ? "+" : "") + fmt(gap)}</text>`);
+    });
+  } else {
+    series.forEach((s, si) => {
+      const col = colorOf(s, si);
+      const vals = s.values.slice(0, n).map((v) => Number(v) || 0);
+      const pts = vals.map((v, i) => [r(xPix(i)), r(yPix(v))]);
+      const d = smooth ? smoothPath(pts) : stepped ? steppedPath(pts) : straightPath(pts);
+      if (area) {
+        const baseY = r(M.top + plotH);
+        p.push(`<path d="${d} L${pts[pts.length - 1][0]},${baseY} L${pts[0][0]},${baseY} Z" fill="${col}" fill-opacity="0.16" stroke="none"/>`);
+      }
+      p.push(`<path d="${d}" fill="none" stroke="${col}" stroke-width="2.5" stroke-linejoin="round" stroke-linecap="round"/>`);
+      if (showPoints) pts.forEach((pt) => p.push(dot(pt, col)));
+      if (showValues) vals.forEach((v, i) => p.push(`<text x="${r(xPix(i))}" y="${r(yPix(v) - 9)}" text-anchor="middle" font-size="${fs - 2}" ${wAttr(spec, 600)} fill="${valText}">${esc(fmt(v) + u)}</text>`));
+    });
+  }
+  if (multi) {
+    const items = series.map((s, i) => ({ name: s.name || "Series " + (i + 1), col: colorOf(s, i) }));
+    const widths = items.map((it) => 16 + it.name.length * (fs * 0.56) + 18);
+    const totalW = widths.reduce((a, b) => a + b, 0);
+    let lx = (W - totalW) / 2;
+    const ly = H - 16;
+    items.forEach((it, i) => {
+      p.push(`<circle cx="${r(lx + 5)}" cy="${r(ly - 4)}" r="5" fill="${it.col}"/>`);
+      p.push(`<text x="${r(lx + 16)}" y="${r(ly)}" font-size="${fs - 1}"${wOpt(spec)} fill="${catText}">${esc(it.name)}</text>`);
+      lx += widths[i];
+    });
+  }
+  if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
+  if (watermark) p.push(`<text x="${r(W - 8)}" y="${r(H - 8)}" text-anchor="end" font-size="10" fill="${faint}" opacity="0.7">slickfast.com</text>`);
+  p.push(`</svg>`);
+  return p.join("\n");
+}
+function renderSlope(spec) {
+  const W = spec.width || 800, H = spec.height || 450;
+  const bg = spec.background || "#ffffff";
+  const transparent = bg === "transparent" || bg === "none";
+  const isDark = !transparent && getLuminance(bg) < 0.35;
+  const fs = spec.fontSize ? Number(spec.fontSize) : Math.max(13, Math.round(13 * Math.sqrt(W * H) / 600));
+  const font = resolveFont(spec);
+  const watermark = spec.watermark !== false;
+  const title = spec.title || "";
+  const labels = spec.data.labels;
+  const series = spec.data.series;
+  const u = spec.valueUnit ? " " + spec.valueUnit : "";
+  const li = labels.length - 1;
+  const pal = resolveFlatPalette(spec.palette || "Clean Corporate", Math.max(series.length, 2));
+  const colorOf = (s, i) => s.color || pal[i % pal.length];
+  const guide = isDark ? "#1e293b" : "#e2e8f0";
+  const catText = txt(spec, isDark ? "#cbd5e1" : "#475569");
+  const valText = txt(spec, isDark ? "#e2e8f0" : "#334155");
+  const titleCol = txt(spec, isDark ? "#f1f5f9" : "#0f172a");
+  const faint = isDark ? "#475569" : "#94a3b8";
+  const multi = series.length > 1;
+  const M = { left: 72, right: 132, top: title ? 54 : 28, bottom: multi ? 64 : 44 };
+  const plotH = H - M.top - M.bottom;
+  const leftX = M.left, rightX = W - M.right, baseY = M.top + plotH;
+  const firstVals = series.map((s) => Number(s.values[0]) || 0);
+  const lastVals = series.map((s) => Number(s.values[li]) || 0);
+  const { niceMax } = niceScale(Math.max(1, ...firstVals, ...lastVals));
+  const yPix = (v) => M.top + plotH - v / niceMax * plotH;
+  const p = [];
+  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
+  p.push(`<line x1="${leftX}" y1="${M.top}" x2="${leftX}" y2="${r(baseY)}" stroke="${guide}" stroke-width="1"/>`);
+  p.push(`<line x1="${rightX}" y1="${M.top}" x2="${rightX}" y2="${r(baseY)}" stroke="${guide}" stroke-width="1"/>`);
+  series.forEach((s, si) => {
+    const col = colorOf(s, si);
+    const y0 = r(yPix(firstVals[si])), y1 = r(yPix(lastVals[si]));
+    p.push(`<line x1="${leftX}" y1="${y0}" x2="${rightX}" y2="${y1}" stroke="${col}" stroke-width="2.5" stroke-linecap="round"/>`);
+    p.push(`<circle cx="${leftX}" cy="${y0}" r="4" fill="${col}"/>`);
+    p.push(`<circle cx="${rightX}" cy="${y1}" r="4" fill="${col}"/>`);
+    p.push(`<text x="${leftX - 10}" y="${r(y0 + 4)}" text-anchor="end" font-size="${fs - 1}" ${wAttr(spec, 600)} fill="${valText}">${esc(fmt(firstVals[si]) + u)}</text>`);
+    const delta = lastVals[si] - firstVals[si];
+    p.push(`<text x="${rightX + 10}" y="${r(y1 + 4)}" font-size="${fs - 1}" ${wAttr(spec, 600)} fill="${valText}">${esc(fmt(lastVals[si]) + u)} <tspan fill="${delta >= 0 ? "#059669" : "#dc2626"}">(${delta >= 0 ? "+" : ""}${esc(fmt(delta))})</tspan></text>`);
+  });
+  p.push(`<text x="${leftX}" y="${r(baseY + 22)}" text-anchor="middle" font-size="${fs - 1}" ${wAttr(spec, 600)} fill="${catText}">${esc(labels[0])}</text>`);
+  p.push(`<text x="${rightX}" y="${r(baseY + 22)}" text-anchor="middle" font-size="${fs - 1}" ${wAttr(spec, 600)} fill="${catText}">${esc(labels[li])}</text>`);
+  if (multi) {
+    const items = series.map((s, i) => ({ name: s.name || "Series " + (i + 1), col: colorOf(s, i) }));
+    const widths = items.map((it) => 16 + it.name.length * (fs * 0.56) + 18);
+    let lx = (W - widths.reduce((a, b) => a + b, 0)) / 2;
+    const ly = H - 16;
+    items.forEach((it, i) => {
+      p.push(`<circle cx="${r(lx + 5)}" cy="${r(ly - 4)}" r="5" fill="${it.col}"/>`);
+      p.push(`<text x="${r(lx + 16)}" y="${r(ly)}" font-size="${fs - 1}"${wOpt(spec)} fill="${catText}">${esc(it.name)}</text>`);
+      lx += widths[i];
+    });
+  }
+  if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
+  if (watermark) p.push(`<text x="${r(W - 8)}" y="${r(H - 8)}" text-anchor="end" font-size="10" fill="${faint}" opacity="0.7">slickfast.com</text>`);
+  p.push(`</svg>`);
+  return p.join("\n");
+}
+function renderPie(spec) {
+  const W = spec.width || 640, H = spec.height || 420;
+  const bg = spec.background || "#ffffff";
+  const transparent = bg === "transparent" || bg === "none";
+  const isDark = !transparent && getLuminance(bg) < 0.35;
+  const fs = spec.fontSize ? Number(spec.fontSize) : Math.max(13, Math.round(13 * Math.sqrt(W * H) / 600));
+  const font = resolveFont(spec);
+  const watermark = spec.watermark !== false;
+  const title = spec.title || "";
+  const donut = spec.type === "donut" || spec.donut === true;
+  const labels = spec.data.labels;
+  const values = spec.data.series[0].values.map((v) => Number(v) || 0);
+  const u = spec.valueUnit ? " " + spec.valueUnit : "";
+  const pre = spec.valuePrefix || "";
+  const explicit = spec.data.series[0].colors;
+  const colors = Array.isArray(explicit) && explicit.length >= labels.length ? explicit : resolveFlatPalette(spec.palette || "Clean Corporate", labels.length);
+  const titleCol = txt(spec, isDark ? "#f1f5f9" : "#0f172a");
+  const legendText = txt(spec, isDark ? "#cbd5e1" : "#475569");
+  const faint = isDark ? "#475569" : "#94a3b8";
+  const total = values.reduce((a2, b) => a2 + b, 0) || 1;
+  const top = title ? 54 : 24;
+  const bottomPad = 24;
+  const portrait = H > W;
+  const legendRowH = 26;
+  const legendW = 184;
+  const legendH = portrait ? labels.length * legendRowH + 14 : 0;
+  const cx = portrait ? W / 2 : (W - legendW) / 2;
+  const pieAreaH = portrait ? H - top - legendH - bottomPad : H - top - 24;
+  const cy = top + pieAreaH / 2;
+  const rad = r(Math.min(portrait ? W - 48 : W - legendW, pieAreaH) / 2 - 10);
+  const innerR = r(donut ? rad * 0.58 : 0);
+  const gapColor = transparent ? null : bg;
+  const gapW = spec.sliceGap != null ? Number(spec.sliceGap) : Math.max(2, r(rad * 0.016));
+  const gapAttr = gapColor && gapW > 0 ? ` stroke="${gapColor}" stroke-width="${gapW}" stroke-linejoin="round"` : "";
+  const p = [];
+  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
+  let a = -Math.PI / 2;
+  values.forEach((v, i) => {
+    const frac = v / total;
+    if (frac <= 0) return;
+    const a1 = a + frac * Math.PI * 2;
+    const col = colors[i];
+    if (frac >= 0.9999) {
+      if (innerR > 0) p.push(`<circle cx="${r(cx)}" cy="${r(cy)}" r="${r((rad + innerR) / 2)}" fill="none" stroke="${col}" stroke-width="${r(rad - innerR)}"/>`);
+      else p.push(`<circle cx="${r(cx)}" cy="${r(cy)}" r="${rad}" fill="${col}"/>`);
+    } else {
+      p.push(`<path d="${arcPath(cx, cy, rad, a, a1, innerR)}" fill="${col}"${gapAttr}/>`);
+    }
+    if (frac >= 0.06) {
+      const mid = (a + a1) / 2;
+      const lr = innerR > 0 ? (rad + innerR) / 2 : rad * 0.62;
+      p.push(`<text x="${r(cx + lr * Math.cos(mid))}" y="${r(cy + lr * Math.sin(mid) + 4)}" text-anchor="middle" font-size="${fs}" ${wAttr(spec, 700)} fill="${spec.textColor || contrastColor(col)}">${Math.round(frac * 100)}%</text>`);
+    }
+    a = a1;
+  });
+  if (donut) {
+    p.push(`<text x="${r(cx)}" y="${r(cy - 2)}" text-anchor="middle" font-size="${fs + 10}" ${wAttr(spec, 800)} fill="${titleCol}">${esc(pre + fmt(total) + u)}</text>`);
+    p.push(`<text x="${r(cx)}" y="${r(cy + 18)}" text-anchor="middle" font-size="${fs - 1}"${wOpt(spec)} fill="${legendText}">Total</text>`);
+  }
+  if (portrait) {
+    const maxChars = Math.max(...labels.map((lab, i) => (String(lab) + " \xB7 " + pre + fmt(values[i]) + u).length));
+    const blockW = 18 + maxChars * (fs - 1) * 0.55;
+    const lx = r((W - blockW) / 2);
+    let lgy = H - legendH - bottomPad + 20;
+    labels.forEach((lab, i) => {
+      p.push(`<rect x="${lx}" y="${r(lgy - 9)}" width="11" height="11" rx="2.5" fill="${colors[i]}"/>`);
+      p.push(`<text x="${r(lx + 18)}" y="${r(lgy)}" font-size="${fs - 1}"${wOpt(spec)} fill="${legendText}">${esc(lab)} \xB7 ${esc(pre + fmt(values[i]) + u)}</text>`);
+      lgy += legendRowH;
+    });
+  } else {
+    const lgx = W - legendW + 8;
+    let lgy = top + 8;
+    labels.forEach((lab, i) => {
+      p.push(`<rect x="${lgx}" y="${r(lgy - 9)}" width="11" height="11" rx="2.5" fill="${colors[i]}"/>`);
+      p.push(`<text x="${lgx + 18}" y="${r(lgy)}" font-size="${fs - 1}"${wOpt(spec)} fill="${legendText}">${esc(lab)} \xB7 ${esc(pre + fmt(values[i]) + u)}</text>`);
+      lgy += 24;
+    });
+  }
+  if (title) p.push(`<text x="${r(W / 2)}" y="33" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
+  if (watermark) p.push(`<text x="${r(W - 8)}" y="${r(H - 8)}" text-anchor="end" font-size="10" fill="${faint}" opacity="0.7">slickfast.com</text>`);
+  p.push(`</svg>`);
+  return p.join("\n");
+}
+function renderPieOfPie(spec) {
+  const W = spec.width || 920, H = spec.height || 380;
+  const bg = spec.background || "#ffffff";
+  const transparent = bg === "transparent" || bg === "none";
+  const isDark = !transparent && getLuminance(bg) < 0.35;
+  const fs = spec.fontSize ? Number(spec.fontSize) : 13;
+  const font = resolveFont(spec);
+  const title = spec.title || "";
+  const watermark = spec.watermark !== false;
+  const donut = spec.donut !== false;
+  const showValues = spec.showValues !== false;
+  const titleCol = txt(spec, isDark ? "#f1f5f9" : "#0f172a");
+  const subCol = txt(spec, isDark ? "#cbd5e1" : "#475569");
+  const faint = isDark ? "#475569" : "#94a3b8";
+  const sliceBorder = isDark ? "#0b0f17" : "#ffffff";
+  const accent = isDark ? "#a78bfa" : "#8b5cf6";
+  const cascade = spec.cascade !== false;
+  const raw = Array.isArray(spec.pies) ? spec.pies : [];
+  const pies = raw.map((pp) => {
+    const labels = (pp.labels || []).map(String);
+    const vals = (pp.values || []).map((v) => Number(v) || 0);
+    const keep = vals.map((v, i) => [v, i]).filter((e) => e[0] > 0);
+    const values = keep.map((e) => e[0]);
+    const lbls = keep.map((e) => labels[e[1]] || "");
+    return {
+      title: pp.title || "",
+      labels: lbls,
+      values,
+      total: values.reduce((a, b) => a + b, 0) || 1,
+      explicit: Array.isArray(pp.colors) && pp.colors.length >= keep.length ? pp.colors : null,
+      palette: pp.palette
+    };
+  }).filter((pie) => pie.values.length);
+  const themeName = spec.palette || "Clean Corporate";
+  const isNested = NESTED_THEMES.some((t) => t.name === themeName);
+  pies.forEach((pie, i) => {
+    const count = pie.values.length;
+    if (pie.explicit) pie.colors = pie.explicit;
+    else if (isNested && cascade) pie.colors = resolveNestedTheme(themeName, i, count, i > 0 ? pies[0].colors[0] : null);
+    else if (i === 0 || !cascade) pie.colors = resolveFlatPalette(pie.palette || themeName, count);
+    else pie.colors = tierPalette(pies[0].colors[0], i, count);
+  });
+  const n = pies.length;
+  const p = [];
+  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}" width="${W}" height="${H}" font-family="${esc(font)}">`);
+  if (!transparent) p.push(`<rect x="0" y="0" width="${W}" height="${H}" fill="${bg}"/>`);
+  if (n === 0) {
+    p.push(`</svg>`);
+    return p.join("\n");
+  }
+  const SHRINK = 0.75, EXPL = 0.1, innerFrac = 0.58;
+  const fac = (i) => Math.pow(SHRINK, i);
+  const sumDiam = pies.reduce((s, _, i) => s + 2 * fac(i), 0);
+  const sidePad = 28;
+  const gap = Math.max(28, W * 0.035);
+  const topMain = title ? 40 : 16;
+  const perTitleH = 30;
+  const botPad = 16 + (watermark ? 6 : 0);
+  let R = Math.min((W - 2 * sidePad - (n - 1) * gap) / sumDiam, (H - topMain - perTitleH - botPad) / 2);
+  R = Math.max(20, R);
+  const cyAxis = topMain + perTitleH + R;
+  const cxs = [];
+  let cursor = sidePad;
+  pies.forEach((_, i) => {
+    const rad = R * fac(i);
+    cxs.push(cursor + rad);
+    cursor += 2 * rad + gap;
+  });
+  const rowRight = cxs[n - 1] + R * fac(n - 1);
+  const center = (W - (rowRight - sidePad)) / 2 - sidePad;
+  for (let i = 0; i < n; i++) cxs[i] += center;
+  const clamp = (x) => Math.max(-Math.PI / 2, Math.min(Math.PI / 2, x));
+  for (let i = 0; i < n - 1; i++) {
+    const rad = R * fac(i), nrad = R * fac(i + 1), cx = cxs[i], ncx = cxs[i + 1];
+    const frac0 = pies[i].values[0] / pies[i].total;
+    const exCx = cx + rad * EXPL;
+    const s0 = clamp(-frac0 * Math.PI), e0 = clamp(frac0 * Math.PI);
+    const ex1 = exCx + rad * Math.cos(s0), ey1 = cyAxis + rad * Math.sin(s0);
+    const ex2 = exCx + rad * Math.cos(e0), ey2 = cyAxis + rad * Math.sin(e0);
+    const lx = ncx - Math.cos(Math.PI / 3) * nrad;
+    const lyT = cyAxis - Math.sin(Math.PI / 3) * nrad, lyB = cyAxis + Math.sin(Math.PI / 3) * nrad;
+    const col = pies[i].colors[0] || "#94a3b8";
+    const sw = Math.max(1, r(rad * 0.012));
+    p.push(`<line x1="${r(ex1)}" y1="${r(ey1)}" x2="${r(lx)}" y2="${r(lyT)}" stroke="${col}" stroke-width="${sw}" stroke-opacity="0.4"/>`);
+    p.push(`<line x1="${r(ex2)}" y1="${r(ey2)}" x2="${r(lx)}" y2="${r(lyB)}" stroke="${col}" stroke-width="${sw}" stroke-opacity="0.4"/>`);
+  }
+  pies.forEach((pie, i) => {
+    const rad = R * fac(i), cx = cxs[i];
+    const innerR = donut ? r(rad * innerFrac) : 0;
+    const isBridge = i < n - 1;
+    const frac0 = pie.values[0] / pie.total;
+    let a = isBridge ? -frac0 * Math.PI : -Math.PI / 2;
+    pie.values.forEach((v, si) => {
+      const frac = v / pie.total;
+      const a1 = a + frac * Math.PI * 2;
+      const col = pie.colors[si];
+      const bridge = isBridge && si === 0;
+      const drawCx = bridge ? cx + rad * EXPL : cx;
+      const stroke = bridge ? ` stroke="${sliceBorder}" stroke-width="${Math.max(1.5, r(rad * 0.02))}"` : "";
+      if (frac >= 0.9999) p.push(`<circle cx="${r(drawCx)}" cy="${r(cyAxis)}" r="${r(rad)}" fill="${col}"${stroke}/>`);
+      else p.push(`<path d="${arcPath(drawCx, cyAxis, rad, a, a1, innerR)}" fill="${col}"${stroke}/>`);
+      if (showValues && frac >= 0.07) {
+        const mid = (a + a1) / 2;
+        const lr = innerR > 0 ? (rad + innerR) / 2 : rad * 0.62;
+        const lfs = Math.max(9, r(fs * Math.sqrt(fac(i))));
+        p.push(`<text x="${r(drawCx + lr * Math.cos(mid))}" y="${r(cyAxis + lr * Math.sin(mid) + 4)}" text-anchor="middle" font-size="${lfs}" ${wAttr(spec, 700)} fill="${spec.textColor || contrastColor(col)}">${Math.round(frac * 100)}%</text>`);
+      }
+      a = a1;
+    });
+    if (pie.title) p.push(`<text x="${r(cx)}" y="${r(topMain + 13)}" text-anchor="middle" font-size="${fs}" ${wAttr(spec, 700)} fill="${subCol}">${esc(pie.title)}</text>`);
+    const parentLabel = i > 0 ? pies[i - 1].labels[0] : "";
+    if (parentLabel && parentLabel !== pie.title) {
+      const sy = pie.title ? topMain + 27 : topMain + 14;
+      p.push(`<text x="${r(cx)}" y="${r(sy)}" text-anchor="middle" font-size="${fs - 3}"${wOpt(spec)} fill="${accent}">\u21B3 ${esc(parentLabel)}</text>`);
+    }
+  });
+  if (title) p.push(`<text x="${r(W / 2)}" y="26" text-anchor="middle" font-size="${fs + 5}" ${wAttr(spec, 700)} fill="${titleCol}">${esc(title)}</text>`);
+  if (watermark) p.push(`<text x="${r(W - 8)}" y="${r(H - 8)}" text-anchor="end" font-size="10" fill="${faint}" opacity="0.7">slickfast.com</text>`);
+  p.push(`</svg>`);
+  return p.join("\n");
+}
+var RATIO_PRESETS = {
+  "share card": [1200, 630],
+  "sharecard": [1200, 630],
+  "share-card": [1200, 630],
+  "1.91:1": [1200, 630],
+  "wide": [1280, 720],
+  "16:9": [1280, 720],
+  "square": [1080, 1080],
+  "1:1": [1080, 1080],
+  "portrait": [1080, 1350],
+  "4:5": [1080, 1350],
+  "tall": [1080, 1920],
+  "9:16": [1080, 1920],
+  "classic": [1200, 900],
+  "4:3": [1200, 900]
+};
+function applyPreset(spec) {
+  const key = String(spec.preset || spec.ratio || "").trim().toLowerCase();
+  const p = RATIO_PRESETS[key];
+  if (!p) return spec;
+  return { ...spec, width: spec.width != null ? spec.width : p[0], height: spec.height != null ? spec.height : p[1] };
+}
+function renderSpec(spec) {
+  spec = applyPreset(spec);
+  switch (spec.type) {
+    case "bar":
+      return renderBar(spec);
+    case "grouped":
+      return renderBarGrouped(spec);
+    case "stacked":
+    case "stacked100":
+      return renderBarStacked(spec);
+    case "stackedh":
+      return renderBarStackedH(spec);
+    case "horizontal":
+      return renderBarH(spec);
+    case "diverging":
+      return renderDiverging(spec);
+    case "lollipop":
+      return renderLollipop(spec);
+    case "line":
+    case "smooth":
+    case "area":
+    case "stepped":
+    case "stackedArea":
+    case "stacked-area":
+    case "difference":
+      return renderLine(spec);
+    case "slope":
+      return renderSlope(spec);
+    case "pie":
+    case "donut":
+      return renderPie(spec);
+    case "pieofpie":
+    case "piepie":
+      return renderPieOfPie(spec);
+    case "kpi":
+      return renderKpi(spec);
+    default:
+      throw new Error('render-core: unknown chart type "' + spec.type + '"');
+  }
+}
+
+// ../../packages/raster/raster.mjs
+import { Resvg } from "@resvg/resvg-js";
+function svgToPng(svg, opts = {}) {
+  const fitTo = opts.width ? { mode: "width", value: opts.width } : { mode: "zoom", value: opts.scale || 2 };
+  const resvg = new Resvg(svg, { fitTo, font: { loadSystemFonts: true } });
+  return resvg.render().asPng();
+}
+
+// server.mjs
+var here = dirname(fileURLToPath(import.meta.url));
+var SPEC_PATH = join(here, "../../packages/render-core/SPEC.md");
+var seriesShape = z.object({
+  name: z.string().optional().describe("series label (legend)"),
+  values: z.array(z.number()).describe("the numbers, aligned to data.labels"),
+  color: z.string().optional().describe("per-series color override"),
+  colors: z.array(z.string()).optional().describe("per-item color overrides")
+});
+var pieShape = z.object({
+  title: z.string().optional().describe("this pie's heading"),
+  labels: z.array(z.string()).describe("slice labels"),
+  values: z.array(z.number()).describe("slice values, aligned to labels"),
+  colors: z.array(z.string()).optional().describe("per-slice color overrides"),
+  palette: z.string().optional().describe("per-pie palette override (rare)")
+});
+var inputSchema = {
+  type: z.enum(["bar", "grouped", "stacked", "stacked100", "stackedh", "horizontal", "lollipop", "diverging", "line", "smooth", "area", "stepped", "stackedArea", "difference", "slope", "pie", "donut", "pieofpie", "kpi"]).describe("chart type"),
+  title: z.string().optional(),
+  data: z.object({ labels: z.array(z.string()), series: z.array(seriesShape) }).optional().describe("categories + series; required for every type except kpi and pieofpie"),
+  pies: z.array(pieShape).optional().describe(`pieofpie ONLY: a list of pies; each pie's first slice ("bridge") drills down into the next. 2 pies = pie-of-pie, 3 = pie-of-pie-of-pie, N supported.`),
+  cascade: z.boolean().optional().describe("pieofpie: child pies shade from the parent bridge hue (default true); false = flat palette per pie"),
+  palette: z.string().optional().describe("Clean Corporate | Pastel | Vibrant | Monochrome | Cyberpunk | Analogous Shift. Use Monochrome for black & white / laser-printer output \u2014 a grey ramp that stays legible without color."),
+  background: z.string().optional().describe('any hex color, or "transparent"'),
+  font: z.string().optional().describe("Inter | System | Serif | Mono | Rounded | Condensed"),
+  fontFamily: z.string().optional().describe("raw CSS font stack (overrides font)"),
+  fontSize: z.number().optional(),
+  textColor: z.string().optional().describe("force neutral text color (title/axis/labels/legend); omit for auto contrast. Semantic up/down colors are not affected"),
+  bold: z.boolean().optional().describe("thicken all text"),
+  fontWeight: z.string().optional().describe('exact weight for all text ("400"-"900" or "bold"); overrides bold'),
+  valueUnit: z.string().optional().describe('appended to values, e.g. "$" or "%"'),
+  width: z.number().optional(),
+  height: z.number().optional(),
+  preset: z.string().optional().describe('aspect-ratio preset (sets width/height): "Share Card" 1.91:1 (link/OG cards \u2014 Slack/X/LinkedIn), "Wide" 16:9, "Square" 1:1, "Portrait" 4:5 (IG/FB feed), "Tall" 9:16 (Stories/Reels/TikTok), "Classic" 4:3. Explicit width/height still win.'),
+  ratio: z.string().optional().describe('alias for preset \u2014 accepts a ratio like "16:9", "1:1", "9:16", "4:5", "4:3", "1.91:1"'),
+  watermark: z.boolean().optional().describe("tasteful slickfast.com mark (default true; off for the chart sites)"),
+  showValues: z.boolean().optional(),
+  showPoints: z.boolean().optional(),
+  showTotal: z.boolean().optional(),
+  curve: z.enum(["straight", "smooth", "stepped"]).optional().describe("line shape"),
+  area: z.boolean().optional().describe("fill under the line"),
+  stacked: z.boolean().optional().describe("stack area series"),
+  donut: z.boolean().optional().describe("pie with a center hole"),
+  label: z.string().optional().describe("kpi: the metric name"),
+  value: z.number().optional().describe("kpi: the big number"),
+  valuePrefix: z.string().optional().describe('prefix before values, e.g. "$" \u2014 used by kpi value and pie/donut legend + center total'),
+  delta: z.number().optional().describe("kpi: the change (green up / red down)"),
+  deltaUnit: z.string().optional().describe('kpi: delta unit, default "%"'),
+  deltaGoodWhen: z.enum(["up", "down"]).optional().describe('kpi: which delta direction is GOOD (green). Default "up"; set "down" for lower-is-better metrics (churn, latency, cost)'),
+  format: z.enum(["png", "svg"]).optional().describe('output format: "png" (default \u2014 shows inline in chat) or "svg" (scalable vector text)'),
+  scale: z.number().optional().describe("png pixel-density multiplier (default 2 = retina)")
+};
+var server = new McpServer({ name: "slickfast", version: "0.1.0" });
+server.registerTool("render_chart", {
+  title: "Render chart (SVG)",
+  description: `Turn a chart spec into an SVG string with the SlickFast engine. Types: bar, grouped, stacked, stacked100, stackedh, horizontal, lollipop, diverging, line, smooth, area, stepped, stackedArea, difference, slope, pie, donut, pieofpie, kpi. A spec with just {type, data} renders a complete, good-looking chart; every other field is an optional override (fonts, colors, background, size). pieofpie uses {pies:[\u2026]} instead of data \u2014 each pie's first slice drills into the next; set palette to a nested theme like "Analogous Shift". Read the chart-spec resource for the full field contract.`,
+  inputSchema
+}, async (spec) => {
+  try {
+    const svg = renderSpec(spec);
+    if ((spec.format || "png") === "png") {
+      const png = svgToPng(svg, { scale: spec.scale });
+      return { content: [{ type: "image", data: png.toString("base64"), mimeType: "image/png" }] };
+    }
+    return { content: [{ type: "text", text: svg }] };
+  } catch (e) {
+    return { isError: true, content: [{ type: "text", text: "render error: " + (e?.message || String(e)) }] };
+  }
+});
+server.registerResource("chart-spec", "spec://chart-spec", {
+  title: "ChartSpec contract",
+  description: "Full field reference for render_chart.",
+  mimeType: "text/markdown"
+}, async (uri) => ({
+  contents: [{ uri: uri.href, mimeType: "text/markdown", text: readFileSync(SPEC_PATH, "utf8") }]
+}));
+var transport = new StdioServerTransport();
+await server.connect(transport);
+console.error("slickfast MCP server ready (stdio) \u2014 tool: render_chart");