@funnest/charts-cli 0.0.0-stage → 0.1.0

package/dist/cli.js

@@ -0,0 +1,935 @@
+#!/usr/bin/env node
+
+// src/cli.ts
+import { mkdir, readFile, writeFile } from "fs/promises";
+import { dirname, extname, join, resolve } from "path";
+
+// src/data.ts
+function parseCsv(text) {
+  const rows = [];
+  let field = "";
+  let row = [];
+  let quoted = false;
+  for (let i = 0; i < text.length; i++) {
+    const c = text[i];
+    if (quoted) {
+      if (c === '"' && text[i + 1] === '"') {
+        field += '"';
+        i++;
+      } else if (c === '"') quoted = false;
+      else field += c;
+    } else if (c === '"') quoted = true;
+    else if (c === ",") {
+      row.push(field);
+      field = "";
+    } else if (c === "\n" || c === "\r") {
+      if (c === "\r" && text[i + 1] === "\n") i++;
+      row.push(field);
+      rows.push(row);
+      row = [];
+      field = "";
+    } else field += c;
+  }
+  if (field !== "" || row.length) {
+    row.push(field);
+    rows.push(row);
+  }
+  const [header, ...body] = rows.filter((r) => r.some((v) => v.trim() !== ""));
+  if (!header) return [];
+  const keys = header.map((h) => h.trim().replace(/^/, ""));
+  return body.map(
+    (r) => Object.fromEntries(
+      keys.map((k, i) => {
+        const raw = (r[i] ?? "").trim();
+        const n = raw.replace(/,/g, "");
+        return [k, raw !== "" && Number.isFinite(Number(n)) && /^-?[\d,.]+$/.test(raw) ? Number(n) : raw];
+      })
+    )
+  );
+}
+function parseData(text, filename) {
+  if (/\.csv$/i.test(filename)) return parseCsv(text);
+  const json = JSON.parse(text);
+  if (Array.isArray(json)) return json;
+  if (json && typeof json === "object" && Array.isArray(json.data)) return json.data;
+  throw new Error(`${filename}: expected an array of rows`);
+}
+var DATE = /^\d{4}-\d{2}(-\d{2})?([T ][\d:.]+Z?)?$|^\d{1,2}\/\d{1,2}$|^\d{1,2}월$|^\d{4}\.\d{1,2}(\.\d{1,2})?$/;
+function suggestCharts(rows) {
+  if (rows.length === 0) return [];
+  const cols = Object.keys(rows[0]);
+  const numeric = cols.filter((c) => rows.every((r) => typeof r[c] === "number" || r[c] === null || r[c] === ""));
+  const text = cols.filter((c) => !numeric.includes(c));
+  const time = text.find((c) => rows.every((r) => DATE.test(String(r[c]))));
+  const category = text.find((c) => c !== time);
+  const out = [];
+  const allPositive = (c) => rows.every((r) => typeof r[c] !== "number" || r[c] >= 0);
+  const hasNegative = (c) => rows.some((r) => typeof r[c] === "number" && r[c] < 0);
+  if (time && numeric.length) {
+    const magnitude = (c) => Math.max(...rows.map((r) => Math.abs(Number(r[c]) || 0)));
+    const base = numeric.find(allPositive) ?? numeric[0];
+    const similar = numeric.filter((c) => allPositive(c) && magnitude(c) > 0 && magnitude(base) / magnitude(c) < 10 && magnitude(c) / magnitude(base) < 10);
+    for (const c of numeric.slice(0, 4)) {
+      if (hasNegative(c)) {
+        out.push({
+          reason: { ko: `${c}\uC5D0 \uC74C\uC218\uAC00 \uC788\uC5B4 0 \uAE30\uC900 \uB9C9\uB300(\uBE68\uAC15/\uD30C\uB791)\uAC00 \uC798 \uB9DE\uC544\uC694`, en: `${c} has negatives: bars around 0` },
+          spec: { type: "bar", data: rows, x: time, y: c, colorBySign: true, referenceLines: [{ y: 0 }] }
+        });
+      } else if (!similar.includes(c) || similar.length === 1) {
+        out.push({
+          reason: { ko: `${time}\uC5D0 \uB530\uB978 ${c} \uD750\uB984`, en: `${c} over ${time}` },
+          spec: { type: "line", data: rows, x: time, y: c, area: "gradient" }
+        });
+      }
+    }
+    if (similar.length > 1) {
+      out.push({
+        reason: { ko: `\uBE44\uC2B7\uD55C \uD06C\uAE30\uC758 ${similar.join(", ")}\uB97C \uD55C \uCC28\uD2B8\uC5D0\uC11C \uBE44\uAD50`, en: `Compare ${similar.join(", ")} (similar scale)` },
+        spec: { type: "line", data: rows, x: time, y: similar.slice(0, 5) }
+      });
+      out.push({
+        reason: { ko: "\uC313\uC544\uC11C \uD569\uACC4\uC640 \uAD6C\uC131\uC744 \uD568\uAED8", en: "Stack them to show total and composition" },
+        spec: { type: "area", data: rows, x: time, y: similar.slice(0, 5), stacked: true }
+      });
+    }
+    out.push({ reason: { ko: `\uBAA9\uB85D\uC5D0 \uB123\uC744 ${base}\uC758 \uC791\uC740 \uD750\uB984`, en: `Tiny ${base} trend for lists` }, spec: { type: "sparkline", data: rows, x: time, y: base } });
+  }
+  if (category && numeric.length) {
+    const v = numeric[0];
+    if (rows.length <= 8 && allPositive(v)) {
+      out.push({
+        reason: { ko: `${category}\uBCC4 ${v} \uBE44\uC911`, en: `Share of ${v} by ${category}` },
+        spec: { type: "percentage-bar", data: rows, label: category, value: v }
+      });
+    }
+    out.push({
+      reason: { ko: `${category}\uBCC4 ${v} \uBE44\uAD50`, en: `Compare ${v} by ${category}` },
+      spec: { type: "bar", data: rows, x: category, y: numeric.length > 1 ? numeric.slice(0, 4) : v, ...hasNegative(v) ? { colorBySign: true } : {} }
+    });
+  }
+  if (!time && !category && numeric.length) {
+    out.push({ reason: { ko: "\uD589 \uC21C\uC11C\uB300\uB85C \uAC12\uC758 \uD750\uB984", en: "Values in row order" }, spec: { type: "line", data: rows, y: numeric[0] } });
+  }
+  return out;
+}
+
+// src/i18n.ts
+var MESSAGES = {
+  ko: {
+    required: (f) => `${f}: \uD544\uC218 \uD56D\uBAA9\uC774\uC5D0\uC694.`,
+    unknownField: (f, hint) => `${f}: \uC54C \uC218 \uC5C6\uB294 \uD56D\uBAA9\uC774\uC5D0\uC694.${hint ? ` \uD639\uC2DC "${hint}"\uC778\uAC00\uC694?` : ""}`,
+    wrongType: (f, want) => `${f}: ${want} \uAC12\uC774\uC5B4\uC57C \uD574\uC694.`,
+    notOneOf: (f, list) => `${f}: ${list} \uC911 \uD558\uB098\uC5EC\uC57C \uD574\uC694.`,
+    unknownType: (t, hint) => `type: "${t}"\uB294 \uC5C6\uB294 \uCC28\uD2B8\uC608\uC694.${hint ? ` \uD639\uC2DC "${hint}"\uC778\uAC00\uC694?` : ""} (funnest-charts list)`,
+    noColumn: (f, col, cols, hint) => `${f}: \uB370\uC774\uD130\uC5D0 "${col}" \uC5F4\uC774 \uC5C6\uC5B4\uC694.${hint ? ` \uD639\uC2DC "${hint}"\uC778\uAC00\uC694?` : ""} \uC788\uB294 \uC5F4: ${cols}`,
+    notNumeric: (f, col) => `${f}: "${col}" \uC5F4\uC5D0 \uC22B\uC790\uAC00 \uC544\uB2CC \uAC12\uC774 \uC788\uC5B4\uC694.`,
+    emptyData: "data: \uB370\uC774\uD130\uAC00 \uBE44\uC5B4 \uC788\uC5B4\uC694.",
+    valid: "\uC2A4\uD399\uC5D0 \uBB38\uC81C\uAC00 \uC5C6\uC5B4\uC694.",
+    invalid: (n) => `\uC624\uB958 ${n}\uAC1C`,
+    wrote: (p) => `\uC800\uC7A5\uD588\uC5B4\uC694: ${p}`,
+    usage: `funnest-charts \u2014 Funnest Charts \uBA85\uB839\uC904 \uB3C4\uAD6C
+
+\uC0AC\uC6A9\uBC95: funnest-charts <\uBA85\uB839> [\uC635\uC158]
+
+\uBA85\uB839:
+  list                          \uCC28\uD2B8 \uBAA9\uB85D
+  info <type>                   \uD56D\uBAA9, \uC608\uC2DC, React \uCF54\uB4DC
+  example <type> [--out f]      \uC2DC\uC791\uC6A9 \uC2A4\uD399
+  schema <type> [--out f]       JSON \uC2A4\uD0A4\uB9C8
+  validate <spec.json>          \uC2A4\uD399 \uAC80\uC0AC (\uC624\uB958\uAC00 \uC788\uC73C\uBA74 1\uB85C \uB05D\uB098\uC694)
+  render <spec.json> --out f    SVG \xB7 PNG \xB7 HTML\uB85C \uADF8\uB9AC\uAE30 (--theme light|dark, --scale 2)
+  suggest <data.csv|json>       \uB370\uC774\uD130\uC5D0 \uB9DE\uB294 \uCC28\uD2B8 \uCD94\uCC9C (--out-dir charts)
+  init <dir> [--type line]      \uC2DC\uC791 \uD3F4\uB354 \uB9CC\uB4E4\uAE30 (spec.json, Chart.tsx)
+
+\uBAA8\uB4E0 \uBA85\uB839\uC5D0 --locale ko|en \uC744 \uBD99\uC77C \uC218 \uC788\uC5B4\uC694.`,
+    unknownCommand: (c) => `\uC54C \uC218 \uC5C6\uB294 \uBA85\uB839\uC774\uC5D0\uC694: ${c}`,
+    needArg: (what) => `${what}\uC774(\uAC00) \uD544\uC694\uD574\uC694.`,
+    pngMissing: "PNG\uB85C \uADF8\uB9AC\uB824\uBA74 @resvg/resvg-js\uAC00 \uD544\uC694\uD574\uC694: npm i @resvg/resvg-js",
+    suggested: (n) => `\uCD94\uCC9C \uCC28\uD2B8 ${n}\uAC1C`,
+    initDone: (dir) => `${dir} \uD3F4\uB354\uB97C \uB9CC\uB4E4\uC5C8\uC5B4\uC694. spec.json\uC744 \uACE0\uCE58\uACE0 funnest-charts render spec.json --out chart.svg \uB85C \uADF8\uB824\uBCF4\uC138\uC694.`
+  },
+  en: {
+    required: (f) => `${f}: required.`,
+    unknownField: (f, hint) => `${f}: unknown field.${hint ? ` Did you mean "${hint}"?` : ""}`,
+    wrongType: (f, want) => `${f}: must be ${want}.`,
+    notOneOf: (f, list) => `${f}: must be one of ${list}.`,
+    unknownType: (t, hint) => `type: no chart "${t}".${hint ? ` Did you mean "${hint}"?` : ""} (funnest-charts list)`,
+    noColumn: (f, col, cols, hint) => `${f}: no column "${col}" in data.${hint ? ` Did you mean "${hint}"?` : ""} Columns: ${cols}`,
+    notNumeric: (f, col) => `${f}: column "${col}" has non-numeric values.`,
+    emptyData: "data: is empty.",
+    valid: "Spec is valid.",
+    invalid: (n) => `${n} error(s)`,
+    wrote: (p) => `Wrote ${p}`,
+    usage: `funnest-charts \u2014 Funnest Charts command line
+
+Usage: funnest-charts <command> [options]
+
+Commands:
+  list                          List charts
+  info <type>                   Fields, example, React code
+  example <type> [--out f]      Starter spec
+  schema <type> [--out f]       JSON Schema
+  validate <spec.json>          Check a spec (exits 1 on errors)
+  render <spec.json> --out f    Render to SVG, PNG or HTML (--theme light|dark, --scale 2)
+  suggest <data.csv|json>       Suggest charts for your data (--out-dir charts)
+  init <dir> [--type line]      Create a starter folder (spec.json, Chart.tsx)
+
+Every command accepts --locale ko|en.`,
+    unknownCommand: (c) => `Unknown command: ${c}`,
+    needArg: (what) => `Missing ${what}.`,
+    pngMissing: "PNG output needs @resvg/resvg-js: npm i @resvg/resvg-js",
+    suggested: (n) => `${n} suggestion(s)`,
+    initDone: (dir) => `Created ${dir}. Edit spec.json, then run funnest-charts render spec.json --out chart.svg`
+  }
+};
+var messages = (locale = "ko") => MESSAGES[locale];
+
+// src/render.tsx
+import { AreaChart, BarChart, LineChart, Point, ReferenceLine } from "@funnest/charts-react";
+import { percentages, seriesColor } from "@funnest/charts-viz";
+import { renderToStaticMarkup } from "react-dom/server";
+import { jsx } from "react/jsx-runtime";
+var UP = "#F04452";
+var DOWN = "#3182F6";
+var FONT = "Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', sans-serif";
+var SYSTEM_FONT = { win32: "Malgun Gothic", darwin: "Apple SD Gothic Neo" };
+var defaultFont = () => SYSTEM_FONT[typeof process === "undefined" ? "" : process.platform] ?? "Noto Sans CJK KR";
+var THEMES = {
+  light: { bg: "#ffffff", text: "#191f28", muted: "#8b95a1", grid: "#eef0f3", line: "#c5cad1" },
+  dark: { bg: "#17171c", text: "#f2f2f4", muted: "#7e7e87", grid: "#26262e", line: "#4a4a55" }
+};
+var num = (v) => {
+  if (v === null || v === void 0 || v === "") return null;
+  const n = typeof v === "number" ? v : Number(v);
+  return Number.isFinite(n) ? n : null;
+};
+var esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+var yColumns = (spec) => Array.isArray(spec.y) ? spec.y : spec.y ? [spec.y] : [];
+var xLabel = (v) => {
+  const s = String(v ?? "");
+  const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(s);
+  return m ? `${Number(m[2])}/${Number(m[3])}` : s;
+};
+function valueFormatter(spec) {
+  const f = spec.format ?? {};
+  const nf = new Intl.NumberFormat(spec.locale === "en" ? "en-US" : "ko-KR", { maximumFractionDigits: f.decimals ?? 2, minimumFractionDigits: f.decimals ?? 0 });
+  return (v) => `${f.prefix ?? ""}${nf.format(v)}${f.suffix ?? ""}`;
+}
+var indexOf = (spec, x) => {
+  if (typeof x === "number") return x;
+  const i = spec.x ? spec.data.findIndex((r) => String(r[spec.x]) === x) : -1;
+  return i >= 0 ? i : Number(x);
+};
+function seriesOf(spec) {
+  return yColumns(spec).map((col, i) => ({
+    id: col,
+    label: spec.labels?.[col] ?? col,
+    data: spec.data.map((r) => num(r[col])),
+    color: spec.colors?.[col] ?? seriesColor(i)
+  }));
+}
+function element(spec, width, height) {
+  const series = seriesOf(spec);
+  const fmt = valueFormatter(spec);
+  const xAxis = spec.x ? { data: spec.data.map((r) => xLabel(r[spec.x])) } : void 0;
+  const common = {
+    series,
+    width,
+    height,
+    animate: false,
+    ...xAxis ? { xAxis } : {},
+    showXAxis: spec.showXAxis ?? !!spec.x,
+    showYAxis: spec.showYAxis === false ? false : { tickLabelFormatter: fmt, width: 64 }
+  };
+  const extras = [
+    ...(spec.referenceLines ?? []).map((r, i) => /* @__PURE__ */ jsx(
+      ReferenceLine,
+      {
+        ...r.y !== void 0 ? { dataY: r.y } : {},
+        ...r.x !== void 0 ? { dataX: indexOf(spec, r.x) } : {},
+        ...r.label !== void 0 ? { label: r.label } : {},
+        ...r.color ? { color: r.color } : {}
+      },
+      `r${i}`
+    )),
+    ...(spec.points ?? []).map((p, i) => /* @__PURE__ */ jsx(
+      Point,
+      {
+        dataX: indexOf(spec, p.x),
+        ...p.y !== void 0 ? { dataY: p.y } : { seriesId: p.series ?? series[0]?.id ?? "" },
+        ...p.label !== void 0 ? { label: p.label } : {},
+        ...p.color ? { color: p.color } : {},
+        ...p.pulse ? { pulse: true } : {}
+      },
+      `p${i}`
+    ))
+  ];
+  switch (spec.type) {
+    case "area":
+      return /* @__PURE__ */ jsx(AreaChart, { ...common, stacked: spec.stacked ?? false, ...spec.curve ? { curve: spec.curve } : {}, children: extras });
+    case "bar":
+      return /* @__PURE__ */ jsx(BarChart, { ...common, stacked: spec.stacked ?? false, ...spec.colorBySign ? { getBarColor: (v) => v >= 0 ? UP : DOWN } : {}, children: extras });
+    case "sparkline": {
+      const s = series[0];
+      const vals = (s?.data ?? []).filter((v) => v !== null);
+      const up = (vals.at(-1) ?? 0) >= (vals[0] ?? 0);
+      const color = spec.colorBySign === false ? s?.color ?? UP : up ? UP : DOWN;
+      return /* @__PURE__ */ jsx(LineChart, { series: s ? [{ ...s, color }] : [], width, height, inset: 2, strokeWidth: 1.5, animate: false });
+    }
+    default:
+      return /* @__PURE__ */ jsx(LineChart, { ...common, ...spec.curve ? { curve: spec.curve } : {}, ...spec.area ? { area: spec.area } : {}, children: extras });
+  }
+}
+function resolveVars(markup, map) {
+  let out = "";
+  let i = 0;
+  while (i < markup.length) {
+    const at = markup.indexOf("var(--fnv-", i);
+    if (at < 0) {
+      out += markup.slice(i);
+      break;
+    }
+    out += markup.slice(i, at);
+    let depth = 0;
+    let j = at;
+    for (; j < markup.length; j++) {
+      if (markup[j] === "(") depth++;
+      else if (markup[j] === ")" && --depth === 0) break;
+    }
+    const name = /^var\(--fnv-([a-z-]+)/.exec(markup.slice(at))?.[1] ?? "";
+    out += map[name] ?? "currentColor";
+    i = j + 1;
+  }
+  return out;
+}
+var percentBarSvg = (spec, width, top, p) => {
+  const rows = spec.data;
+  const items = rows.map((r, i) => ({
+    id: String(r[spec.label] ?? i),
+    value: num(r[spec.value]) ?? 0
+  }));
+  const segs = percentages(items);
+  const barH = 14;
+  const gap = 2;
+  const visible = segs.filter((s) => s.fraction > 0);
+  const usable = width - gap * Math.max(0, visible.length - 1);
+  let x = 0;
+  const bars = visible.map((s) => {
+    const w = Math.max(2, s.fraction * usable);
+    const color = spec.colors?.[s.id] ?? seriesColor(items.findIndex((it) => it.id === s.id));
+    const rect = `<rect x="${x.toFixed(1)}" y="${top}" width="${w.toFixed(1)}" height="${barH}" rx="3" fill="${color}"/>`;
+    x += w + gap;
+    return rect;
+  }).join("");
+  let lx = 0;
+  let ly = top + barH + 24;
+  const labels = segs.map((s, i) => {
+    const color = spec.colors?.[s.id] ?? seriesColor(i);
+    const text = `${s.id} ${(Math.round(s.fraction * 1e3) / 10).toString()}%`;
+    const w = textWidth(text, 12) + 26;
+    if (lx > 0 && lx + w > width) {
+      lx = 0;
+      ly += 20;
+    }
+    const g = `<circle cx="${lx + 4}" cy="${ly - 4}" r="4" fill="${color}"/><text x="${lx + 13}" y="${ly}" font-size="12" fill="${p.muted}">${esc(s.id)} <tspan fill="${p.text}" font-weight="700">${(Math.round(s.fraction * 1e3) / 10).toString()}%</tspan></text>`;
+    lx += w;
+    return g;
+  }).join("");
+  return bars + labels;
+};
+var textWidth = (t, size) => [...t].reduce((w, ch) => w + (ch.charCodeAt(0) > 11904 ? size : size * 0.6), 0);
+function renderSvg(spec, options = {}) {
+  const theme = THEMES[options.theme ?? spec.theme ?? "light"];
+  const isSpark = spec.type === "sparkline";
+  const width = spec.width ?? (isSpark ? 120 : 640);
+  const height = spec.height ?? (isSpark ? 36 : spec.type === "percentage-bar" ? 96 : 320);
+  const pad = isSpark ? 0 : 16;
+  const innerW = width - pad * 2;
+  let y = pad;
+  let head = "";
+  if (spec.title && !isSpark) {
+    head += `<text x="${pad}" y="${y + 16}" font-size="16" font-weight="700" fill="${theme.text}">${esc(spec.title)}</text>`;
+    y += 30;
+  }
+  let body;
+  if (spec.type === "percentage-bar") {
+    body = percentBarSvg(spec, innerW, 0, theme);
+    body = `<g transform="translate(${pad},${y})">${body}</g>`;
+  } else {
+    const series = seriesOf(spec);
+    const legend = !isSpark && (spec.legend ?? series.length > 1);
+    if (legend) {
+      let lx = pad;
+      head += series.map((s) => {
+        const label = s.label ?? s.id;
+        const g = `<rect x="${lx}" y="${y + 3}" width="12" height="3" rx="1.5" fill="${s.color}"/><text x="${lx + 18}" y="${y + 8}" font-size="12" fill="${theme.muted}">${esc(label)}</text>`;
+        lx += textWidth(label, 12) + 34;
+        return g;
+      }).join("");
+      y += 22;
+    }
+    const chartH = Math.max(20, height - y - pad);
+    const markup = renderToStaticMarkup(element(spec, innerW, chartH));
+    const svg = markup.slice(markup.indexOf("<svg"), markup.lastIndexOf("</svg>") + 6);
+    body = svg.replace("<svg", `<svg x="${pad}" y="${y}"`);
+  }
+  const doc = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" font-family="${FONT}"><rect width="100%" height="100%" fill="${theme.bg}"/>${head}${body}</svg>`;
+  return resolveVars(doc, {
+    text: theme.text,
+    "text-muted": theme.muted,
+    grid: theme.grid,
+    line: theme.line,
+    bg: theme.bg,
+    accent: "#6C4DFF",
+    font: FONT
+  }).replace(/font-family:inherit/g, `font-family:${FONT}`);
+}
+function renderHtml(spec, options = {}) {
+  const theme = THEMES[options.theme ?? spec.theme ?? "light"];
+  return `<!doctype html>
+<html lang="${spec.locale ?? "ko"}">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${esc(spec.title ?? "Funnest Charts")}</title>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">
+<style>body{margin:0;min-height:100vh;display:grid;place-items:center;background:${theme.bg}}svg{max-width:100%;height:auto}</style>
+</head>
+<body>
+${renderSvg(spec, options)}
+</body>
+</html>
+`;
+}
+async function renderPng(spec, options = {}) {
+  let Resvg;
+  try {
+    ({ Resvg } = await import("@resvg/resvg-js"));
+  } catch {
+    throw Object.assign(new Error("PNG_RENDERER_MISSING"), { code: "PNG_RENDERER_MISSING" });
+  }
+  const svg = renderSvg(spec, options);
+  const r = new Resvg(svg, {
+    fitTo: { mode: "zoom", value: options.scale ?? 2 },
+    font: { loadSystemFonts: true, defaultFontFamily: defaultFont() }
+  });
+  return r.render().asPng();
+}
+var lit = (v) => JSON.stringify(v);
+function reactCode(spec) {
+  const ys = yColumns(spec);
+  const dataLine = spec.data.length <= 40 ? `const data = ${JSON.stringify(spec.data, null, 2)};` : `// data: ${spec.data.length}\uD589 \u2014 \uB0B4 \uB370\uC774\uD130\uB85C \uBC14\uAFD4\uC8FC\uC138\uC694
+const data = [/* \u2026 */];`;
+  const fmt = spec.format ? `const fmt = (v: number) => \`${spec.format.prefix ?? ""}\${v.toLocaleString()}${spec.format.suffix ?? ""}\`;
+` : "";
+  if (spec.type === "percentage-bar") {
+    return `import { PercentageBarChart } from '@funnest/charts-react';
+
+${dataLine}
+
+export function Chart() {
+  return (
+    <PercentageBarChart
+      data={data.map((d) => ({ id: String(d[${lit(spec.label)}]), label: String(d[${lit(spec.label)}]), value: d[${lit(spec.value)}]${spec.colors ? `, color: (${lit(spec.colors)} as Record<string, string>)[String(d[${lit(spec.label)}])]` : ""} }))}
+    />
+  );
+}
+`;
+  }
+  const component = spec.type === "area" ? "AreaChart" : spec.type === "bar" ? "BarChart" : "LineChart";
+  const imports = /* @__PURE__ */ new Set([component]);
+  if (spec.referenceLines?.length) imports.add("ReferenceLine");
+  if (spec.points?.length) imports.add("Point");
+  const series = ys.map((c) => `{ id: ${lit(c)}, label: ${lit(spec.labels?.[c] ?? c)}, data: data.map((d) => d[${lit(c)}])${spec.colors?.[c] ? `, color: ${lit(spec.colors[c])}` : ""} }`).join(",\n        ");
+  const props = [`series={[
+        ${series},
+      ]}`];
+  if (spec.type === "sparkline") props.push("height={32}", "inset={2}", "strokeWidth={1.5}");
+  else {
+    props.push(`height={${spec.height ?? 320}}`);
+    if (spec.x) props.push(`xAxis={{ data: data.map((d) => d[${lit(spec.x)}]) }}`);
+    if (spec.showXAxis ?? !!spec.x) props.push("showXAxis");
+    if (spec.showYAxis !== false) props.push(fmt ? "showYAxis={{ tickLabelFormatter: fmt }}" : "showYAxis");
+    props.push(fmt ? "scrubber={{ showValues: true, valueFormatter: fmt }}" : "scrubber={{ showValues: true }}");
+  }
+  if (spec.stacked) props.push("stacked");
+  if (spec.area && spec.area !== "none") props.push(`area=${lit(spec.area)}`);
+  if (spec.curve) props.push(`curve=${lit(spec.curve)}`);
+  if (spec.type === "bar" && spec.colorBySign) props.push("getBarColor={(v) => (v >= 0 ? '#F04452' : '#3182F6')}");
+  if (ys.length > 1 || spec.legend) props.push("legend");
+  const children = [
+    ...(spec.referenceLines ?? []).map(
+      (r) => `<ReferenceLine${r.y !== void 0 ? ` dataY={${r.y}}` : ""}${r.x !== void 0 ? ` dataX={${typeof r.x === "number" ? r.x : `data.findIndex((d) => d[${lit(spec.x)}] === ${lit(r.x)})`}}` : ""}${r.label ? ` label=${lit(r.label)}` : ""}${r.color ? ` color=${lit(r.color)}` : ""} />`
+    ),
+    ...(spec.points ?? []).map(
+      (p) => `<Point dataX={${typeof p.x === "number" ? p.x : `data.findIndex((d) => d[${lit(spec.x)}] === ${lit(p.x)})`}}${p.y !== void 0 ? ` dataY={${p.y}}` : ` seriesId=${lit(p.series ?? ys[0])}`}${p.label ? ` label=${lit(p.label)}` : ""}${p.color ? ` color=${lit(p.color)}` : ""}${p.pulse ? " pulse" : ""} />`
+    )
+  ];
+  const open = `<${component}
+      ${props.join("\n      ")}
+    `;
+  const jsx2 = children.length ? `${open}>
+      ${children.join("\n      ")}
+    </${component}>` : `${open}/>`;
+  return `import { ${[...imports].join(", ")} } from '@funnest/charts-react';
+
+${dataLine}
+${fmt}
+export function Chart() {
+  return (
+    ${jsx2}
+  );
+}
+`;
+}
+
+// src/spec.ts
+var COMMON = {
+  type: { kind: "string", required: true, ko: "\uCC28\uD2B8 \uC885\uB958", en: "Chart type" },
+  data: { kind: "rows", required: true, ko: "\uB370\uC774\uD130 \uD589 \uBC30\uC5F4 (CLI\uB294 .csv/.json \uD30C\uC77C \uACBD\uB85C\uB3C4 \uB3FC\uC694)", en: "Array of data rows (CLI also accepts a .csv/.json path)" },
+  title: { kind: "string", ko: "\uC81C\uBAA9", en: "Title" },
+  width: { kind: "number", default: 640, ko: "\uB108\uBE44(px)", en: "Width (px)" },
+  height: { kind: "number", default: 320, ko: "\uB192\uC774(px)", en: "Height (px)" },
+  theme: { kind: "string", enum: ["light", "dark"], default: "light", ko: "\uD14C\uB9C8", en: "Theme" },
+  locale: { kind: "string", enum: ["ko", "en"], default: "ko", ko: "\uC22B\uC790\xB7\uB0A0\uC9DC \uD615\uC2DD \uC5B8\uC5B4", en: "Number/date formatting locale" }
+};
+var FORMAT = {
+  kind: "object",
+  ko: "\uAC12 \uD45C\uC2DC \uD615\uC2DD { prefix, suffix, decimals }",
+  en: "Value format { prefix, suffix, decimals }",
+  items: { type: "object", properties: { prefix: { type: "string" }, suffix: { type: "string" }, decimals: { type: "number" } }, additionalProperties: false }
+};
+var SERIES = {
+  x: { kind: "string", column: "any", ko: "x\uCD95 \uC5F4 (\uB0A0\uC9DC\xB7\uB77C\uBCA8). \uC5C6\uC73C\uBA74 \uD589 \uC21C\uC11C", en: "x column (dates/labels); row index when omitted" },
+  y: { kind: "string|string[]", required: true, column: "numeric", ko: "\uADF8\uB9B4 \uC22B\uC790 \uC5F4 (\uC5EC\uB7EC \uAC1C\uBA74 \uBC30\uC5F4)", en: "Numeric column(s) to draw" },
+  labels: { kind: "record", ko: "\uC5F4 \uC774\uB984 \u2192 \uD45C\uC2DC \uC774\uB984", en: "Column \u2192 display name" },
+  colors: { kind: "record", ko: "\uC5F4 \uC774\uB984 \u2192 \uC0C9", en: "Column \u2192 color" },
+  showXAxis: { kind: "boolean", default: true, ko: "x\uCD95 \uD45C\uC2DC", en: "Show x axis" },
+  showYAxis: { kind: "boolean", default: true, ko: "y\uCD95 \uD45C\uC2DC", en: "Show y axis" },
+  legend: { kind: "boolean", ko: "\uBC94\uB840 (\uACC4\uC5F4\uC774 \uC5EC\uB7EC \uAC1C\uBA74 \uAE30\uBCF8\uC73C\uB85C \uCF1C\uC838\uC694)", en: "Legend (on by default for several series)" },
+  format: FORMAT,
+  referenceLines: {
+    kind: "array",
+    ko: "\uAE30\uC900\uC120 [{ y, label, color }] \uB610\uB294 [{ x, label }]",
+    en: "Reference lines [{ y, label, color }] or [{ x, label }]",
+    items: { type: "object", properties: { y: { type: "number" }, x: { type: ["number", "string"] }, label: { type: "string" }, color: { type: "string" } }, additionalProperties: false }
+  },
+  points: {
+    kind: "array",
+    ko: "\uC810 \uD45C\uC2DC [{ x, series, label, color, pulse }]",
+    en: "Markers [{ x, series, label, color, pulse }]",
+    items: {
+      type: "object",
+      required: ["x"],
+      properties: { x: { type: ["number", "string"] }, y: { type: "number" }, series: { type: "string" }, label: { type: "string" }, color: { type: "string" }, pulse: { type: "boolean" } },
+      additionalProperties: false
+    }
+  }
+};
+var CURVE = { kind: "string", enum: ["monotone", "linear", "step"], default: "monotone", ko: "\uACE1\uC120 \uBC29\uC2DD", en: "Curve" };
+var days = (n) => Array.from({ length: n }, (_, i) => {
+  const d = new Date(Date.UTC(2026, 10, 10) - (n - 1 - i) * 864e5);
+  return d.toISOString().slice(0, 10);
+});
+var priceRows = () => {
+  let p = 71e3;
+  return days(30).map((date, i) => {
+    p = Math.round(p * (1 + Math.sin(i * 1.7) * 0.012 + 2e-3));
+    return { date, price: p };
+  });
+};
+var CHARTS = {
+  line: {
+    type: "line",
+    ko: "\uC120 \uCC28\uD2B8. \uAC00\uACA9 \uD750\uB984, \uC218\uC775\uB960 \uCD94\uC774",
+    en: "Line chart: price history, returns over time",
+    component: "LineChart",
+    fields: { ...COMMON, ...SERIES, curve: CURVE, area: { kind: "string", enum: ["none", "gradient", "solid"], default: "none", ko: "\uC120 \uC544\uB798 \uCC44\uC6B0\uAE30", en: "Fill under the line" } },
+    example: { title: "\uC0BC\uC131\uC804\uC790 1\uAC1C\uC6D4", data: priceRows(), x: "date", y: "price", area: "gradient", format: { suffix: "\uC6D0" }, referenceLines: [{ y: 73e3, label: "\uD3C9\uB2E8\uAC00" }] }
+  },
+  area: {
+    type: "area",
+    ko: "\uC601\uC5ED \uCC28\uD2B8. \uC790\uC0B0 \uAD6C\uC131 \uBCC0\uD654 (stacked)",
+    en: "Area chart: composition over time (stacked)",
+    component: "AreaChart",
+    fields: { ...COMMON, ...SERIES, curve: CURVE, stacked: { kind: "boolean", default: false, ko: "\uC704\uB85C \uC313\uAE30", en: "Stack series" } },
+    example: {
+      title: "\uB0B4 \uC790\uC0B0 (\uB9CC\uC6D0)",
+      data: ["1\uC6D4", "2\uC6D4", "3\uC6D4", "4\uC6D4", "5\uC6D4", "6\uC6D4"].map((month, i) => ({ month, kr: 400 + i * 12, us: 300 + i * 20, crypto: 150 + i * 37 % 60 })),
+      x: "month",
+      y: ["kr", "us", "crypto"],
+      labels: { kr: "\uAD6D\uB0B4\uC8FC\uC2DD", us: "\uD574\uC678\uC8FC\uC2DD", crypto: "\uCF54\uC778" },
+      stacked: true,
+      format: { suffix: "\uB9CC" }
+    }
+  },
+  bar: {
+    type: "bar",
+    ko: "\uB9C9\uB300 \uCC28\uD2B8. \uC77C\uBCC4 \uC190\uC775, \uAC70\uB798\uB7C9",
+    en: "Bar chart: daily P&L, volume",
+    component: "BarChart",
+    fields: {
+      ...COMMON,
+      ...SERIES,
+      stacked: { kind: "boolean", default: false, ko: "\uC704\uB85C \uC313\uAE30", en: "Stack series" },
+      colorBySign: { kind: "boolean", default: false, ko: "0 \uC774\uC0C1 \uBE68\uAC15, \uBBF8\uB9CC \uD30C\uB791", en: "Red for \u2265 0, blue for < 0" }
+    },
+    example: {
+      title: "\uC77C\uBCC4 \uC190\uC775",
+      data: days(12).map((date, i) => ({ date, pnl: Math.round(Math.sin(i * 2.1) * 300 + 60) * 1e3 })),
+      x: "date",
+      y: "pnl",
+      colorBySign: true,
+      format: { suffix: "\uC6D0" },
+      referenceLines: [{ y: 0 }]
+    }
+  },
+  "percentage-bar": {
+    type: "percentage-bar",
+    ko: "\uBE44\uC911 \uB9C9\uB300. \uD3EC\uD2B8\uD3F4\uB9AC\uC624 \uBE44\uC911, \uB9E4\uC218\xB7\uB9E4\uB3C4 \uCCB4\uACB0 \uAC15\uB3C4",
+    en: "Percentage bar: portfolio weights, buy/sell pressure",
+    component: "PercentageBarChart",
+    fields: {
+      ...COMMON,
+      height: { kind: "number", default: 96, ko: "\uB192\uC774(px)", en: "Height (px)" },
+      label: { kind: "string", required: true, column: "any", ko: "\uC774\uB984 \uC5F4", en: "Label column" },
+      value: { kind: "string", required: true, column: "numeric", ko: "\uAC12 \uC5F4", en: "Value column" },
+      colors: { kind: "record", ko: "\uC774\uB984 \u2192 \uC0C9", en: "Label \u2192 color" }
+    },
+    example: {
+      title: "\uD3EC\uD2B8\uD3F4\uB9AC\uC624 \uBE44\uC911",
+      data: [
+        { asset: "\uAD6D\uB0B4\uC8FC\uC2DD", amount: 4200 },
+        { asset: "\uD574\uC678\uC8FC\uC2DD", amount: 3100 },
+        { asset: "\uCF54\uC778", amount: 1700 },
+        { asset: "\uD604\uAE08", amount: 1e3 }
+      ],
+      label: "asset",
+      value: "amount",
+      colors: { \uD604\uAE08: "#B0B8C1" }
+    }
+  },
+  sparkline: {
+    type: "sparkline",
+    ko: "\uC2A4\uD30C\uD06C\uB77C\uC778. \uAD00\uC2EC\uC885\uBAA9 \uBAA9\uB85D\uC758 \uC791\uC740 \uC120",
+    en: "Sparkline: tiny line for watchlists",
+    component: "LineChart",
+    fields: {
+      ...COMMON,
+      width: { kind: "number", default: 120, ko: "\uB108\uBE44(px)", en: "Width (px)" },
+      height: { kind: "number", default: 36, ko: "\uB192\uC774(px)", en: "Height (px)" },
+      y: SERIES.y,
+      x: SERIES.x,
+      colors: SERIES.colors,
+      colorBySign: { kind: "boolean", default: true, ko: "\uC624\uB974\uBA74 \uBE68\uAC15, \uB0B4\uB9AC\uBA74 \uD30C\uB791", en: "Red when up, blue when down" }
+    },
+    example: { data: priceRows(), y: "price" }
+  }
+};
+var CHART_TYPES = Object.keys(CHARTS);
+function distance(a, b) {
+  const dp = Array.from({ length: a.length + 1 }, (_, i) => [i, ...new Array(b.length).fill(0)]);
+  for (let j = 1; j <= b.length; j++) dp[0][j] = j;
+  for (let i = 1; i <= a.length; i++)
+    for (let j = 1; j <= b.length; j++)
+      dp[i][j] = Math.min(dp[i - 1][j] + 1, dp[i][j - 1] + 1, dp[i - 1][j - 1] + (a[i - 1].toLowerCase() === b[j - 1].toLowerCase() ? 0 : 1));
+  return dp[a.length][b.length];
+}
+function closest(word, options) {
+  let best = null;
+  let bestD = Infinity;
+  for (const o of options) {
+    const d = distance(word, o);
+    if (d < bestD) {
+      bestD = d;
+      best = o;
+    }
+  }
+  return best !== null && bestD <= Math.max(2, Math.floor(word.length / 3)) ? best : null;
+}
+var isNumeric = (v) => typeof v === "number" && Number.isFinite(v) || v === null || typeof v === "string" && v.trim() !== "" && Number.isFinite(Number(v));
+var typeOk = (kind, v) => {
+  switch (kind) {
+    case "string":
+      return typeof v === "string";
+    case "number":
+      return typeof v === "number" && Number.isFinite(v);
+    case "boolean":
+      return typeof v === "boolean";
+    case "string|string[]":
+      return typeof v === "string" || Array.isArray(v) && v.length > 0 && v.every((x) => typeof x === "string");
+    case "record":
+      return typeof v === "object" && v !== null && !Array.isArray(v) && Object.values(v).every((x) => typeof x === "string");
+    case "array":
+      return Array.isArray(v);
+    case "object":
+      return typeof v === "object" && v !== null && !Array.isArray(v);
+    case "rows":
+      return Array.isArray(v) && v.every((r) => typeof r === "object" && r !== null && !Array.isArray(r));
+  }
+};
+var KIND_NAMES = {
+  string: { ko: "\uBB38\uC790\uC5F4", en: "a string" },
+  number: { ko: "\uC22B\uC790", en: "a number" },
+  boolean: { ko: "true/false", en: "true/false" },
+  "string|string[]": { ko: "\uBB38\uC790\uC5F4 \uB610\uB294 \uBB38\uC790\uC5F4 \uBC30\uC5F4", en: "a string or string array" },
+  record: { ko: "{ \uC774\uB984: \uBB38\uC790\uC5F4 } \uAC1D\uCCB4", en: "an object of strings" },
+  array: { ko: "\uBC30\uC5F4", en: "an array" },
+  object: { ko: "\uAC1D\uCCB4", en: "an object" },
+  rows: { ko: "\uAC1D\uCCB4 \uBC30\uC5F4", en: "an array of objects" }
+};
+function validateSpec(input, locale = "ko") {
+  const t = messages(locale);
+  const issues = [];
+  const add = (path, message) => issues.push({ path, message });
+  if (typeof input !== "object" || input === null || Array.isArray(input)) {
+    add("", t.wrongType("spec", KIND_NAMES.object[locale]));
+    return issues;
+  }
+  const spec = input;
+  const type = spec.type;
+  if (typeof type !== "string") {
+    add("type", t.required("type"));
+    return issues;
+  }
+  const def = CHARTS[type];
+  if (!def) {
+    add("type", t.unknownType(type, closest(type, CHART_TYPES)));
+    return issues;
+  }
+  for (const key of Object.keys(spec)) {
+    if (!(key in def.fields)) add(key, t.unknownField(key, closest(key, Object.keys(def.fields))));
+  }
+  for (const [name, f] of Object.entries(def.fields)) {
+    const v = spec[name];
+    if (v === void 0) {
+      if (f.required) add(name, t.required(name));
+      continue;
+    }
+    if (!typeOk(f.kind, v)) {
+      add(name, t.wrongType(name, KIND_NAMES[f.kind][locale]));
+      continue;
+    }
+    if (f.enum && !f.enum.includes(v)) add(name, t.notOneOf(name, f.enum.join(" | ")));
+  }
+  const rows = Array.isArray(spec.data) ? spec.data : null;
+  if (rows && rows.length === 0) add("data", t.emptyData);
+  if (rows && rows.length > 0) {
+    const columns = [...new Set(rows.flatMap((r) => Object.keys(r)))];
+    for (const [name, f] of Object.entries(def.fields)) {
+      if (!f.column || spec[name] === void 0) continue;
+      const cols = Array.isArray(spec[name]) ? spec[name] : typeof spec[name] === "string" ? [spec[name]] : [];
+      cols.forEach((col, i) => {
+        const path = Array.isArray(spec[name]) ? `${name}[${i}]` : name;
+        if (!columns.includes(col)) add(path, t.noColumn(path, col, columns.join(", "), closest(col, columns)));
+        else if (f.column === "numeric" && !rows.every((r) => isNumeric(r[col]))) add(path, t.notNumeric(path, col));
+      });
+    }
+  }
+  return issues;
+}
+var jsonType = (f) => {
+  switch (f.kind) {
+    case "string":
+      return f.enum ? { type: "string", enum: f.enum } : { type: "string" };
+    case "number":
+      return { type: "number" };
+    case "boolean":
+      return { type: "boolean" };
+    case "string|string[]":
+      return { oneOf: [{ type: "string" }, { type: "array", items: { type: "string" }, minItems: 1 }] };
+    case "record":
+      return { type: "object", additionalProperties: { type: "string" } };
+    case "array":
+      return { type: "array", items: f.items ?? {} };
+    case "object":
+      return f.items ?? { type: "object" };
+    case "rows":
+      return { type: "array", items: { type: "object" }, minItems: 1 };
+  }
+};
+function chartSchema(type, locale = "ko") {
+  const def = CHARTS[type];
+  const properties = {};
+  for (const [name, f] of Object.entries(def.fields)) {
+    properties[name] = {
+      ...name === "type" ? { const: type } : jsonType(f),
+      description: f[locale],
+      ...f.default !== void 0 ? { default: f.default } : {}
+    };
+  }
+  return {
+    $schema: "https://json-schema.org/draft/2020-12/schema",
+    $id: `https://charts.funnest.xyz/schema/${type}.json`,
+    title: `Funnest Charts \xB7 ${type}`,
+    description: def[locale],
+    type: "object",
+    required: Object.entries(def.fields).filter(([, f]) => f.required).map(([n]) => n),
+    properties,
+    additionalProperties: false
+  };
+}
+var exampleSpec = (type) => ({ type, ...structuredClone(CHARTS[type].example) });
+
+// src/cli.ts
+function parseArgs(argv) {
+  const out = { _: [], flags: {} };
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a.startsWith("--")) {
+      const [k, v] = a.slice(2).split("=", 2);
+      if (v !== void 0) out.flags[k] = v;
+      else if (argv[i + 1] && !argv[i + 1].startsWith("--")) out.flags[k] = argv[++i];
+      else out.flags[k] = true;
+    } else out._.push(a);
+  }
+  return out;
+}
+var print = (s) => process.stdout.write(`${s}
+`);
+var fail = (s) => {
+  process.stderr.write(`${s}
+`);
+  process.exit(1);
+};
+async function write(path, data, locale) {
+  await mkdir(dirname(resolve(path)), { recursive: true });
+  await writeFile(path, data);
+  print(messages(locale).wrote(path));
+}
+async function loadSpec(path) {
+  const spec = JSON.parse(await readFile(path, "utf8"));
+  if (typeof spec.data === "string") {
+    const file = resolve(dirname(path), spec.data);
+    spec.data = parseData(await readFile(file, "utf8"), file);
+  }
+  return spec;
+}
+function chartType(name, locale) {
+  const t = messages(locale);
+  if (!name) fail(t.needArg("<type>"));
+  if (!(name in CHARTS)) fail(t.unknownType(name, closest(name, CHART_TYPES)));
+  return name;
+}
+async function main() {
+  const { _: [command, ...rest], flags } = parseArgs(process.argv.slice(2));
+  const locale = flags.locale === "en" ? "en" : "ko";
+  const t = messages(locale);
+  const json = (v) => JSON.stringify(v, null, 2);
+  switch (command) {
+    case void 0:
+    case "help":
+    case "--help":
+      print(t.usage);
+      return;
+    case "list":
+      for (const type of CHART_TYPES) print(`${type.padEnd(16)}${CHARTS[type][locale]}`);
+      return;
+    case "info": {
+      const type = chartType(rest[0], locale);
+      const def = CHARTS[type];
+      print(`${type} \u2014 ${def[locale]}  (<${def.component} />)
+`);
+      for (const [name, f] of Object.entries(def.fields)) {
+        const meta = [f.required ? locale === "ko" ? "\uD544\uC218" : "required" : "", f.enum ? f.enum.join("|") : "", f.default !== void 0 ? `= ${JSON.stringify(f.default)}` : ""].filter(Boolean).join(", ");
+        print(`  ${name.padEnd(16)}${f[locale]}${meta ? `  (${meta})` : ""}`);
+      }
+      print(`
+${locale === "ko" ? "\uC608\uC2DC" : "Example"}:
+${json(exampleSpec(type))}`);
+      print(`
+React:
+${reactCode(exampleSpec(type))}`);
+      return;
+    }
+    case "example": {
+      const type = chartType(rest[0], locale);
+      const out = json(exampleSpec(type));
+      if (typeof flags.out === "string") await write(flags.out, `${out}
+`, locale);
+      else print(out);
+      return;
+    }
+    case "schema": {
+      const type = chartType(rest[0], locale);
+      const out = json(chartSchema(type, locale));
+      if (typeof flags.out === "string") await write(flags.out, `${out}
+`, locale);
+      else print(out);
+      return;
+    }
+    case "validate": {
+      if (!rest[0]) fail(t.needArg("<spec.json>"));
+      const spec = await loadSpec(rest[0]);
+      const issues = validateSpec(spec, locale);
+      if (issues.length === 0) return print(`\u2713 ${t.valid}`);
+      process.stderr.write(`\u2717 ${t.invalid(issues.length)}
+${issues.map((i) => `  - ${i.message}`).join("\n")}
+`);
+      process.exit(1);
+    }
+    case "render": {
+      if (!rest[0]) fail(t.needArg("<spec.json>"));
+      const out = typeof flags.out === "string" ? flags.out : fail(t.needArg("--out"));
+      const spec = await loadSpec(rest[0]);
+      const issues = validateSpec(spec, locale);
+      if (issues.length) fail(`\u2717 ${t.invalid(issues.length)}
+${issues.map((i) => `  - ${i.message}`).join("\n")}`);
+      const options = flags.theme === "dark" || flags.theme === "light" ? { theme: flags.theme } : {};
+      const ext = extname(out).toLowerCase();
+      if (ext === ".png") {
+        try {
+          const scale = typeof flags.scale === "string" ? Number(flags.scale) : 2;
+          await write(out, await renderPng(spec, { ...options, scale }), locale);
+        } catch (e) {
+          if (e.code === "PNG_RENDERER_MISSING") fail(t.pngMissing);
+          throw e;
+        }
+      } else if (ext === ".html") await write(out, renderHtml(spec, options), locale);
+      else if (ext === ".tsx" || ext === ".jsx") await write(out, reactCode(spec), locale);
+      else await write(out, renderSvg(spec, options), locale);
+      return;
+    }
+    case "suggest": {
+      if (!rest[0]) fail(t.needArg("<data.csv|json>"));
+      const rows = parseData(await readFile(rest[0], "utf8"), rest[0]);
+      const list = suggestCharts(rows);
+      print(t.suggested(list.length));
+      const dir = typeof flags["out-dir"] === "string" ? flags["out-dir"] : null;
+      for (const [i, s] of list.entries()) {
+        const name = `${String(i + 1).padStart(2, "0")}-${s.spec.type}`;
+        print(`  ${name.padEnd(20)}${s.reason[locale]}`);
+        if (dir) {
+          const spec = { ...s.spec, data: relativeTo(dir, rest[0]) };
+          await write(join(dir, `${name}.json`), `${json(spec)}
+`, locale);
+          await write(join(dir, `${name}.svg`), renderSvg(s.spec), locale);
+        }
+      }
+      return;
+    }
+    case "init": {
+      const dir = rest[0] ?? fail(t.needArg("<dir>"));
+      const type = chartType(typeof flags.type === "string" ? flags.type : "line", locale);
+      const spec = exampleSpec(type);
+      await write(join(dir, "spec.json"), `${json(spec)}
+`, locale);
+      await write(join(dir, "Chart.tsx"), reactCode(spec), locale);
+      await write(join(dir, "chart.svg"), renderSvg(spec), locale);
+      print(t.initDone(dir));
+      return;
+    }
+    default:
+      fail(`${t.unknownCommand(command)}
+
+${t.usage}`);
+  }
+}
+function relativeTo(dir, file) {
+  const from = resolve(dir).split(/[\\/]/);
+  const to = resolve(file).split(/[\\/]/);
+  let i = 0;
+  while (i < from.length && from[i] === to[i]) i++;
+  return [...from.slice(i).map(() => ".."), ...to.slice(i)].join("/");
+}
+main().catch((e) => fail(e instanceof Error ? e.message : String(e)));