@kaydash9999/banker-plugins 0.27.0 → 0.28.0

package/skills/wide-pptx/scripts/wp-model.mjs

@@ -0,0 +1,236 @@
+// wp-model.mjs: reads a wide-pptx deck (JSON), checks it and returns one model that the PPTX and HTML writers both
+// draw. Images are read here (local regular files only) so both outputs embed the same bytes. No network.
+import { readFileSync, statSync } from "node:fs";
+import { dirname, isAbsolute, resolve, win32 } from "node:path";
+
+export const TYPES = ["title", "section", "bullets", "two", "table", "chart", "image", "quote", "closing"];
+export const CHARTS = ["bar", "line", "pie"];
+const HEX = /^#?[0-9A-Fa-f]{6}$/;
+export const THEME = { primary: "1F3864", accent: "2E86C1", dark: "1B2631", light: "F4F6F7", muted: "5D6D7E" };
+export const PALETTE = ["2E86C1", "E67E22", "27AE60", "9B59B6", "E74C3C", "16A085", "F1C40F", "34495E"];
+const MAX_IMAGE = 20 * 1024 * 1024;
+// Soft limits: past these the fixed boxes overflow or crowd, so check warns (the deck is still built).
+export const LIMITS = { tableRows: 12, tableCols: 7, chartPoints: 24, piePoints: 12 };
+
+const arr = (v) => (Array.isArray(v) ? v : []);
+const obj = (v) => (v && typeof v === "object" && !Array.isArray(v) ? v : {});
+export const hex = (c) => String(c).replace(/^#/, "").toUpperCase();
+
+// XML 1.0 has no place for most control characters. PowerPoint's soft line break comes out of copied text as
+// U+000B, so that one becomes a line break; the rest, U+FFFE/U+FFFF and lone surrogates are dropped.
+const LINE_TAB = /\u{B}/gu;
+const NOT_XML = /[\u{0}-\u{8}\u{C}\u{E}-\u{1F}\u{FFFE}\u{FFFF}]/gu;
+// In a /u pattern a well-formed pair is one code point, so this class matches lone surrogates only.
+const LONE = /[\u{D800}-\u{DFFF}]/gu;
+export const cleanText = (s) => s.replace(LINE_TAB, "\n").replace(NOT_XML, "").replace(LONE, "");
+
+/** A text field: a string (cleaned) or a finite number; absent is empty; anything else is an error. */
+function text(v, what, ctx) {
+  if (v === undefined || v === null) return "";
+  if (typeof v === "string") return cleanText(v);
+  if (typeof v === "number" && Number.isFinite(v)) return String(v);
+  ctx.errors.push(`${what}: 글이어야 함`);
+  return "";
+}
+
+/** A list field: absent is empty; present but not an array is an error. */
+function list(v, what, ctx) {
+  if (v === undefined || v === null) return [];
+  if (Array.isArray(v)) return v;
+  ctx.errors.push(`${what}: 배열이어야 함`);
+  return [];
+}
+
+// Width in em of a line: Hangul, CJK and full-width forms take a full em, other characters about half.
+const WIDE = /[\u{1100}-\u{11FF}\u{2E80}-\u{9FFF}\u{AC00}-\u{D7A3}\u{F900}-\u{FAFF}\u{FF00}-\u{FFEF}]/u;
+export const ems = (s) => Array.from(s).reduce((n, ch) => n + (WIDE.test(ch) ? 1 : 0.55), 0);
+const linesOf = (s, pt, widthIn) => s.split("\n").reduce((n, l) => n + Math.max(1, Math.ceil((ems(l) * pt) / 72 / widthIn)), 0);
+
+/** Estimated height in inches of bullets set at 20 pt (level 2 at 17 pt) in a box widthIn wide. */
+export function bulletsHeight(bullets, widthIn) {
+  return bullets.reduce((h, b) => {
+    const pt = b.level === 2 ? 17 : 20;
+    return h + (linesOf(b.text, pt, widthIn - (b.level === 2 ? 0.6 : 0.35)) * pt * 1.2) / 72 + 8 / 72;
+  }, 0);
+}
+
+function themeOf(deck, ctx) {
+  const t = { ...THEME };
+  for (const [k, v] of Object.entries(obj(deck.theme))) {
+    if (!Object.prototype.hasOwnProperty.call(THEME, k)) ctx.errors.push(`theme.${k} 는 없는 칸(${Object.keys(THEME).join(", ")})`);
+    else if (!HEX.test(String(v))) ctx.errors.push(`theme.${k} 색이 6자리 16진수가 아님: ${String(v)}`);
+    else t[k] = hex(v);
+  }
+  return t;
+}
+
+/** Bullets: strings, or { text, level } with level 1 or 2. box: { w, h } in inches for the overflow estimate. */
+function bulletsOf(raw, what, ctx, box) {
+  const out = list(raw, what, ctx).map((b, i) => {
+    if (b === null || b === undefined) ctx.errors.push(`${what}[${i}]: 글이어야 함`);
+    if (b && typeof b === "object" && !Array.isArray(b)) return { text: text(b.text, `${what}[${i}].text`, ctx), level: Number(b.level) === 2 ? 2 : 1 };
+    return { text: text(b, `${what}[${i}]`, ctx), level: 1 };
+  });
+  if (bulletsHeight(out, box.w) > box.h) ctx.warnings.push(`${what}: 글머리가 상자 높이를 넘을 수 있음(나누거나 줄이기를 권함)`);
+  return out;
+}
+
+function tableOf(s, what, ctx) {
+  const header = list(s.header, `${what}.header`, ctx).map((h, i) => text(h, `${what}.header[${i}]`, ctx));
+  const rows = list(s.rows, `${what}.rows`, ctx).map((r, i) => list(r, `${what}.rows[${i}]`, ctx).map((c, j) => text(c, `${what}.rows[${i}][${j}]`, ctx)));
+  const width = rows.reduce((m, r) => Math.max(m, r.length), header.length);
+  if (!width) ctx.errors.push(`${what}: 표에 칸이 없음`);
+  if (rows.length > LIMITS.tableRows) ctx.warnings.push(`${what}: 표 행이 ${LIMITS.tableRows}개를 넘음`);
+  if (width > LIMITS.tableCols) ctx.warnings.push(`${what}: 표 열이 ${LIMITS.tableCols}개를 넘음`);
+  const pad = (r) => [...r, ...Array(Math.max(0, width - r.length)).fill("")];
+  return { header: header.length ? pad(header) : [], rows: rows.map(pad) };
+}
+
+function seriesOf(raw, what, ctx) {
+  return list(raw, `${what}.series`, ctx).map(obj).map((x, k) => {
+    const values = list(x.values, `${what}.series[${k}].values`, ctx);
+    if (values.some((v) => typeof v !== "number" || !Number.isFinite(v))) ctx.errors.push(`${what}: 계열 값은 숫자만(null 이나 글자 안 됨)`);
+    return { name: text(x.name, `${what}.series[${k}].name`, ctx), values: values.map((v) => (typeof v === "number" ? v : 0)) };
+  });
+}
+
+function chartOf(s, what, ctx) {
+  const c = obj(s.chart);
+  const kind = text(c.kind || "bar", `${what}.chart.kind`, ctx);
+  if (!CHARTS.includes(kind)) ctx.errors.push(`${what}: chart.kind 는 ${CHARTS.join(", ")} 중 하나`);
+  const labels = list(c.labels, `${what}.chart.labels`, ctx).map((l, i) => text(l, `${what}.chart.labels[${i}]`, ctx));
+  const series = seriesOf(c.series, `${what}.chart`, ctx);
+  checkSeries(kind, labels, series, what, ctx);
+  return { kind, labels, series, unit: text(c.unit, `${what}.chart.unit`, ctx) };
+}
+
+function checkSeries(kind, labels, series, what, ctx) {
+  if (!labels.length || !series.length) ctx.errors.push(`${what}: chart.labels 와 chart.series 가 필요함`);
+  if (series.some((x) => x.values.length !== labels.length)) ctx.errors.push(`${what}: 계열마다 값 수가 labels 수와 같아야 함`);
+  const names = series.map((x) => x.name.trim());
+  if (series.length > 1 && (names.some((n) => !n) || new Set(names).size !== names.length)) ctx.errors.push(`${what}: 계열이 둘 이상이면 이름이 비지 않고 서로 달라야 함`);
+  if (kind === "pie") checkPie(series, labels, what, ctx);
+  else if (labels.length > LIMITS.chartPoints) ctx.warnings.push(`${what}: 차트 항목이 ${LIMITS.chartPoints}개를 넘음`);
+}
+
+function checkPie(series, labels, what, ctx) {
+  const v = series[0]?.values ?? [];
+  if (series.length !== 1 || v.some((x) => x < 0)) ctx.errors.push(`${what}: pie 는 음수 없는 계열 하나`);
+  else if (!v.some((x) => x > 0)) ctx.errors.push(`${what}: pie 값이 모두 0`);
+  if (labels.length > LIMITS.piePoints) ctx.warnings.push(`${what}: pie 항목이 ${LIMITS.piePoints}개를 넘음(범례가 잘림)`);
+}
+
+const IMAGE_TYPES = [
+  { mime: "image/png", magic: [0x89, 0x50, 0x4e, 0x47] },
+  { mime: "image/jpeg", magic: [0xff, 0xd8, 0xff] },
+  { mime: "image/gif", magic: [0x47, 0x49, 0x46, 0x38] },
+];
+
+const isPath = (p) => isAbsolute(p) || win32.isAbsolute(p) || !/^[a-z][a-z0-9+.-]+:/i.test(p);
+
+/** Reads a local PNG, JPEG or GIF once; the type comes from its first bytes, not its name. */
+function imageOf(s, what, ctx) {
+  const p = text(s.image, `${what}.image`, ctx);
+  if (!p || !isPath(p)) {
+    ctx.errors.push(`${what}: image 는 로컬 파일 경로여야 함(URL 은 받지 않음)`);
+    return null;
+  }
+  const file = isAbsolute(p) || win32.isAbsolute(p) ? p : resolve(ctx.base, p);
+  try {
+    const st = statSync(file);
+    if (!st.isFile()) throw new Error("보통 파일이 아님");
+    if (st.size > MAX_IMAGE) throw new Error("20MB 를 넘음");
+    const data = readFileSync(file);
+    const t = IMAGE_TYPES.find((x) => x.magic.every((b, i) => data[i] === b));
+    if (!t) throw new Error("PNG, JPEG, GIF 가 아님");
+    const size = imageSize(data, t.mime);
+    if (!size) ctx.warnings.push(`${what}: 그림 크기를 읽지 못해 상자 비율로 맞춤`);
+    return { file, mime: t.mime, size, data };
+  } catch (e) {
+    ctx.errors.push(`${what}: 이미지를 읽지 못함 (${file}: ${e.message})`);
+    return null;
+  }
+}
+
+/** Pixel size from the header (PNG IHDR, GIF screen, JPEG SOFn), or null. */
+export function imageSize(b, mime) {
+  if (mime === "image/png" && b.length > 24) return { w: b.readUInt32BE(16), h: b.readUInt32BE(20) };
+  if (mime === "image/gif" && b.length > 10) return { w: b.readUInt16LE(6), h: b.readUInt16LE(8) };
+  return mime === "image/jpeg" ? jpegSize(b) : null;
+}
+
+/** Walks the JPEG segments to the first start-of-frame marker (SOF0..SOF15 but DHT, JPG, DAC); fill bytes skipped. */
+function jpegSize(b) {
+  for (let i = 2; i + 9 < b.length;) {
+    if (b[i] !== 0xff) return null;
+    if (b[i + 1] === 0xff) {
+      i++;
+      continue;
+    }
+    const marker = b[i + 1];
+    if (marker >= 0xc0 && marker <= 0xcf && ![0xc4, 0xc8, 0xcc].includes(marker)) return { w: b.readUInt16BE(i + 7), h: b.readUInt16BE(i + 5) };
+    const len = b.readUInt16BE(i + 2);
+    if (len < 2) return null;
+    i += 2 + len;
+  }
+  return null;
+}
+
+const BOX = { w: 11.73, h: 5.15 };
+const HALF = { w: 5.66, h: 4.55 };
+
+const FIELDS = {
+  title: (s, w, ctx) => ({ subtitle: text(s.subtitle, `${w}.subtitle`, ctx), presenter: text(s.presenter, `${w}.presenter`, ctx), date: text(s.date, `${w}.date`, ctx) }),
+  section: (s, w, ctx) => ({ subtitle: text(s.subtitle, `${w}.subtitle`, ctx) }),
+  bullets: (s, w, ctx) => ({ bullets: bulletsOf(s.bullets, `${w}.bullets`, ctx, BOX) }),
+  two: (s, w, ctx) => ({ left: columnOf(s.left, `${w}.left`, ctx), right: columnOf(s.right, `${w}.right`, ctx) }),
+  table: (s, w, ctx) => ({ table: tableOf(s, w, ctx), caption: text(s.caption, `${w}.caption`, ctx) }),
+  chart: (s, w, ctx) => ({ chart: chartOf(s, w, ctx), caption: text(s.caption, `${w}.caption`, ctx) }),
+  image: (s, w, ctx) => ({ image: imageOf(s, w, ctx), caption: text(s.caption, `${w}.caption`, ctx) }),
+  quote: (s, w, ctx) => ({ quote: text(s.quote, `${w}.quote`, ctx), by: text(s.by, `${w}.by`, ctx) }),
+  closing: (s, w, ctx) => ({ subtitle: text(s.subtitle, `${w}.subtitle`, ctx) }),
+};
+
+function columnOf(raw, what, ctx) {
+  const c = obj(raw);
+  const heading = text(c.heading, `${what}.heading`, ctx);
+  return { heading, bullets: bulletsOf(c.bullets, `${what}.bullets`, ctx, heading ? HALF : { ...HALF, h: HALF.h + 0.6 }) };
+}
+
+function slideOf(raw, i, ctx) {
+  const s = obj(raw);
+  const what = `slides[${i}]`;
+  const type = typeof s.type === "string" ? s.type : "";
+  if (!TYPES.includes(type)) {
+    ctx.errors.push(`${what}: type 은 ${TYPES.join(", ")} 중 하나 (${String(s.type)})`);
+    return null;
+  }
+  const title = text(s.title, `${what}.title`, ctx);
+  if (type !== "quote" && !title.trim()) ctx.errors.push(`${what}: title 이 없음`);
+  if ((ems(title) * 28) / 72 > 12.1 && !["title", "closing"].includes(type)) ctx.warnings.push(`${what}: 제목이 한 줄을 넘을 수 있음`);
+  return { type, title, notes: text(s.notes, `${what}.notes`, ctx), ...FIELDS[type](s, what, ctx) };
+}
+
+/**
+ * Checks a deck and returns { errors, warnings, model }; model is null when there are errors. base is the folder
+ * relative image paths start from (the deck file's folder).
+ */
+export function readDeck(deck, base) {
+  const errors = [];
+  const warnings = [];
+  if (!deck || typeof deck !== "object" || Array.isArray(deck)) return { errors: ["deck 은 JSON 객체여야 함"], warnings, model: null };
+  const ctx = { errors, warnings, base: base || process.cwd() };
+  const title = text(deck.title, "title", ctx);
+  if (!title.trim()) errors.push("title 이 없음");
+  if (!Array.isArray(deck.slides) || !deck.slides.length) errors.push("slides 가 비어 있음");
+  const model = {
+    title,
+    author: text(deck.author, "author", ctx),
+    footer: text(deck.footer, "footer", ctx),
+    theme: themeOf(deck, ctx),
+    slides: arr(deck.slides).map((s, i) => slideOf(s, i, ctx)).filter(Boolean),
+  };
+  return { errors, warnings, model: errors.length ? null : model };
+}
+
+export const deckBase = (file) => dirname(resolve(file));

package/skills/wide-pptx/scripts/wp-pptx.mjs

@@ -0,0 +1,219 @@
+// wp-pptx.mjs: draws the wide-pptx model as a 16:9 PPTX (13.333 x 7.5 in) with the bundled PptxGenJS. Text sets no
+// font of its own; the theme carries the fonts: Latin Noto Sans, Hangul (and other East Asian text) Noto Sans KR.
+// PptxGenJS writes the theme's Hangul font as 맑은 고딕 and chart text as Arial, so those parts are patched after
+// writing.
+import { readFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import vm from "node:vm";
+import { PALETTE } from "./wp-model.mjs";
+
+const BUNDLE = join(dirname(fileURLToPath(import.meta.url)), "..", "vendor", "pptxgen.bundle.js");
+export const LATIN = "Noto Sans";
+export const KR = "Noto Sans KR";
+const W = 13.333;
+const M = 0.6;
+const BODY = { x: 0.8, y: 1.55, w: W - 1.6, h: 5.15 };
+
+let loaded = null;
+
+/**
+ * Loads the browser bundle (UMD) in a context of its own: required as CommonJS it would export JSZip alone and fail
+ * on the JSZip global it expects. The context keeps its own built-ins (the bundle's core-js polyfills patch those,
+ * not this process's Uint8Array or Promise); it gets timers, text codecs and Buffer (for nodebuffer output), and no
+ * require. This is a loading context, not a security boundary: the bundle is trusted code pinned by its sha256.
+ * The bundle keeps counters across builds (chart and embedding numbers keep rising in one process); each file is
+ * still self-consistent.
+ */
+export function pptxgen() {
+  if (loaded) return loaded;
+  const sandbox = {
+    console, setTimeout, clearTimeout, setImmediate, clearImmediate, queueMicrotask, Buffer,
+    TextEncoder, TextDecoder, process: { versions: {}, release: {} },
+  };
+  sandbox.window = sandbox;
+  sandbox.self = sandbox;
+  sandbox.global = sandbox;
+  sandbox.globalThis = sandbox;
+  vm.createContext(sandbox);
+  vm.runInContext(readFileSync(BUNDLE, "utf8"), sandbox, { filename: "pptxgen.bundle.js" });
+  if (typeof sandbox.PptxGenJS !== "function" || typeof sandbox.JSZip !== "function") throw new Error("pptxgen.bundle.js 를 불러오지 못함");
+  loaded = { PptxGenJS: sandbox.PptxGenJS, JSZip: sandbox.JSZip };
+  return loaded;
+}
+
+// Every text run says Korean, so spelling and the language bar match the text (fonts still follow the theme).
+const LANG = "ko-KR";
+
+function chrome(s, slide, model, n) {
+  const t = model.theme;
+  s.addText(slide.title, { x: M, y: 0.35, w: W - 2 * M, h: 0.85, fontSize: 28, bold: true, color: t.dark, valign: "middle", margin: 0, lang: LANG });
+  s.addShape("rect", { x: M, y: 1.22, w: 1.1, h: 0.06, fill: { color: t.accent }, line: { color: t.accent, width: 0 } });
+  footer(s, model, n);
+}
+
+function footer(s, model, n, color) {
+  const c = color ?? model.theme.muted;
+  if (model.footer) s.addText(model.footer, { x: M, y: 7.0, w: 9, h: 0.3, fontSize: 10, color: c, margin: 0, lang: LANG });
+  s.addText(String(n), { x: W - M - 1, y: 7.0, w: 1, h: 0.3, fontSize: 10, color: c, align: "right", margin: 0, lang: LANG });
+}
+
+/** Bullet paragraphs; a line break inside one bullet stays inside it (a soft break), as in the HTML deck. */
+function runs(bullets, color) {
+  return bullets.flatMap((b) => {
+    const size = { fontSize: b.level === 2 ? 17 : 20, color, lang: LANG };
+    const para = { ...size, bullet: b.level === 2 ? { code: "25AA", indent: 18 } : true, indentLevel: b.level - 1, paraSpaceAfter: 8 };
+    const lines = b.text.split("\n");
+    return lines.map((line, j) => ({
+      text: line,
+      options: { ...(j ? { ...size, softBreakBefore: true } : para), breakLine: j === lines.length - 1 },
+    }));
+  });
+}
+
+const DRAW = {
+  title(s, slide, model) {
+    const t = model.theme;
+    s.background = { color: t.primary };
+    s.addShape("rect", { x: 0.8, y: 2.25, w: 1.2, h: 0.08, fill: { color: t.accent }, line: { color: t.accent, width: 0 } });
+    s.addText(slide.title, { x: 0.8, y: 2.45, w: W - 1.6, h: 1.4, fontSize: 40, bold: true, color: "FFFFFF", valign: "top", margin: 0, lang: LANG });
+    if (slide.subtitle) s.addText(slide.subtitle, { x: 0.8, y: 3.95, w: W - 1.6, h: 0.8, fontSize: 22, color: "D6EAF8", margin: 0, lang: LANG });
+    const by = [slide.presenter, slide.date].filter(Boolean).join("  |  ");
+    if (by) s.addText(by, { x: 0.8, y: 5.7, w: W - 1.6, h: 0.5, fontSize: 16, color: "FFFFFF", margin: 0, lang: LANG });
+  },
+  section(s, slide, model, n) {
+    const t = model.theme;
+    s.background = { color: t.light };
+    s.addShape("rect", { x: 0, y: 0, w: 0.35, h: 7.5, fill: { color: t.accent }, line: { color: t.accent, width: 0 } });
+    s.addText(slide.title, { x: 1.0, y: 2.7, w: W - 2, h: 1.2, fontSize: 36, bold: true, color: t.dark, margin: 0, lang: LANG });
+    if (slide.subtitle) s.addText(slide.subtitle, { x: 1.0, y: 3.9, w: W - 2, h: 0.7, fontSize: 20, color: t.muted, margin: 0, lang: LANG });
+    footer(s, model, n);
+  },
+  bullets(s, slide, model, n) {
+    chrome(s, slide, model, n);
+    if (slide.bullets.length) s.addText(runs(slide.bullets, model.theme.dark), { ...BODY, valign: "top", margin: 4 });
+  },
+  two(s, slide, model, n) {
+    chrome(s, slide, model, n);
+    const half = (BODY.w - 0.4) / 2;
+    [slide.left, slide.right].forEach((col, i) => {
+      const x = BODY.x + i * (half + 0.4);
+      if (col.heading) s.addText(col.heading, { x, y: BODY.y, w: half, h: 0.5, fontSize: 20, bold: true, color: model.theme.accent, margin: 0, lang: LANG });
+      const top = col.heading ? 0.6 : 0;
+      if (col.bullets.length) s.addText(runs(col.bullets, model.theme.dark), { x, y: BODY.y + top, w: half, h: BODY.h - top, valign: "top", margin: 4 });
+    });
+  },
+  table(s, slide, model, n) {
+    chrome(s, slide, model, n);
+    const t = model.theme;
+    const head = slide.table.header.map((h) => ({ text: h, options: { bold: true, color: "FFFFFF", fill: { color: t.primary }, lang: LANG } }));
+    const rows = slide.table.rows.map((r, i) => r.map((c) => ({ text: c, options: { color: t.dark, fill: { color: i % 2 ? "FFFFFF" : t.light }, lang: LANG } })));
+    const all = head.length ? [head, ...rows] : rows;
+    s.addTable(all, { x: BODY.x, y: BODY.y, w: BODY.w, fontSize: 14, border: { type: "solid", pt: 0.75, color: "D5D8DC" }, valign: "middle", autoPage: false });
+    caption(s, slide, model);
+  },
+  chart(s, slide, model, n, p) {
+    chrome(s, slide, model, n);
+    const c = slide.chart;
+    const data = c.series.map((x) => ({ name: x.name, labels: c.labels, values: x.values }));
+    // A colour for every point or series: past the list PptxGenJS picks one at random.
+    const colors = Array.from({ length: Math.max(c.labels.length, c.series.length, 1) }, (_, i) => PALETTE[i % PALETTE.length]);
+    const opts = {
+      x: BODY.x, y: BODY.y, w: BODY.w, h: BODY.h - 0.5, chartColors: colors, showLegend: c.series.length > 1 || c.kind === "pie",
+      legendPos: "b", legendFontSize: 12, catAxisLabelFontSize: 12, valAxisLabelFontSize: 12, barDir: "col", barGapWidthPct: 60,
+      valAxisTitle: c.unit || undefined, showValAxisTitle: !!c.unit, lineSize: 2, lineDataSymbolSize: 7,
+      showPercent: c.kind === "pie", showValue: false, dataLabelColor: "FFFFFF", dataLabelFontSize: 12,
+    };
+    s.addChart(p.ChartType[c.kind], data, opts);
+    caption(s, slide, model);
+  },
+  image(s, slide, model, n) {
+    chrome(s, slide, model, n);
+    const img = slide.image;
+    const box = { ...BODY, h: BODY.h - 0.5 };
+    const r = img.size && img.size.w && img.size.h ? img.size.w / img.size.h : box.w / box.h;
+    const w = Math.min(box.w, box.h * r);
+    const h = w / r;
+    const altText = slide.caption || slide.title;
+    s.addImage({ data: `${img.mime};base64,${img.data.toString("base64")}`, x: box.x + (box.w - w) / 2, y: box.y + (box.h - h) / 2, w, h, altText });
+    caption(s, slide, model);
+  },
+  quote(s, slide, model, n) {
+    const t = model.theme;
+    s.background = { color: t.light };
+    s.addText(`“${slide.quote}”`, { x: 1.2, y: 2.0, w: W - 2.4, h: 2.8, fontSize: 30, italic: true, color: t.dark, align: "center", valign: "middle", margin: 0, lang: LANG });
+    if (slide.by) s.addText(`- ${slide.by}`, { x: 1.2, y: 4.9, w: W - 2.4, h: 0.6, fontSize: 18, color: t.muted, align: "right", margin: 0, lang: LANG });
+    if (slide.title) s.addText(slide.title, { x: M, y: 0.35, w: W - 2 * M, h: 0.7, fontSize: 18, bold: true, color: t.accent, margin: 0, lang: LANG });
+    footer(s, model, n);
+  },
+  closing(s, slide, model) {
+    const t = model.theme;
+    s.background = { color: t.primary };
+    s.addText(slide.title, { x: 0.8, y: 2.7, w: W - 1.6, h: 1.3, fontSize: 40, bold: true, color: "FFFFFF", align: "center", valign: "middle", margin: 0, lang: LANG });
+    if (slide.subtitle) s.addText(slide.subtitle, { x: 0.8, y: 4.1, w: W - 1.6, h: 0.7, fontSize: 20, color: "D6EAF8", align: "center", margin: 0, lang: LANG });
+  },
+};
+
+function caption(s, slide, model) {
+  if (slide.caption) s.addText(slide.caption, { x: BODY.x, y: BODY.y + BODY.h - 0.4, w: BODY.w, h: 0.4, fontSize: 12, color: model.theme.muted, margin: 0, lang: LANG });
+}
+
+/** The theme fonts: Latin Noto Sans, East Asian and Hangul Noto Sans KR (major and minor font sets). */
+export function patchTheme(xml) {
+  return xml
+    .replace(/<a:latin typeface="[^"]*"/g, `<a:latin typeface="${LATIN}"`)
+    .replace(/<a:ea typeface="[^"]*"/g, `<a:ea typeface="${KR}"`)
+    .replace(/<a:font script="Hang" typeface="[^"]*"/g, `<a:font script="Hang" typeface="${KR}"`);
+}
+
+/** Chart text: PptxGenJS writes <a:latin typeface="Arial"/> alone; make it Noto Sans and add the Hangul font. */
+export function patchChart(xml) {
+  return xml.replace(/<a:latin typeface="[^"]*"\/>(?!<a:ea )/g, `<a:latin typeface="${LATIN}"/><a:ea typeface="${KR}"/>`);
+}
+
+/** PptxGenJS 4.0.1 writes the chart data table as ref="A1:C6'" (a stray quote); Excel wants a plain range. */
+export const patchTable = (xml) => xml.replace(/ ref="([A-Z]+\d+:[A-Z]+\d+)'"/g, ' ref="$1"');
+
+async function patchEmbedded(JSZip, bytes) {
+  const inner = await JSZip.loadAsync(bytes);
+  for (const f of Object.keys(inner.files).filter((x) => /^xl\/tables\/table\d+\.xml$/.test(x))) {
+    inner.file(f, patchTable(await inner.file(f).async("string")));
+  }
+  return inner.generateAsync({ type: "uint8array", compression: "DEFLATE" });
+}
+
+/** PptxGenJS ends every paragraph with <a:endParaRPr lang="en-US">; text typed there later should be Korean too. */
+export const patchSlide = (xml) => xml.replace(/<a:endParaRPr lang="en-US"/g, '<a:endParaRPr lang="ko-KR"');
+
+const PATCHES = [
+  [/^ppt\/theme\/theme\d+\.xml$/, "string", patchTheme],
+  [/^ppt\/slides\/slide\d+\.xml$/, "string", patchSlide],
+  [/^ppt\/charts\/chart\d+\.xml$/, "string", patchChart],
+  [/^ppt\/embeddings\/[^/]+\.xlsx$/, "uint8array", null],
+];
+
+/** Returns the PPTX bytes for a model. */
+export async function toPptx(model) {
+  const { PptxGenJS, JSZip } = pptxgen();
+  const p = new PptxGenJS();
+  p.layout = "LAYOUT_WIDE";
+  p.title = model.title;
+  p.author = model.author || "wide-pptx";
+  p.company = "";
+  p.subject = model.title;
+  p.theme = { headFontFace: LATIN, bodyFontFace: LATIN };
+  model.slides.forEach((slide, i) => {
+    const s = p.addSlide();
+    DRAW[slide.type](s, slide, model, i + 1, p);
+    if (slide.notes) s.addNotes(slide.notes);
+  });
+  const raw = await p.write({ outputType: "nodebuffer", compression: true });
+  const zip = await JSZip.loadAsync(raw);
+  for (const f of Object.keys(zip.files)) {
+    const fix = PATCHES.find(([re]) => re.test(f));
+    if (!fix) continue;
+    const body = await zip.file(f).async(fix[1]);
+    zip.file(f, fix[2] ? fix[2](body) : await patchEmbedded(JSZip, body));
+  }
+  return Buffer.from(await zip.generateAsync({ type: "nodebuffer", compression: "DEFLATE" }));
+}

package/skills/wide-pptx/scripts/wp-svg.mjs

@@ -0,0 +1,114 @@
+// wp-svg.mjs: bar, line and pie charts as inline SVG for the HTML deck (no library). Values come from wp-model.mjs
+// as finite numbers; text is escaped; colours are 6-digit hex.
+import { PALETTE } from "./wp-model.mjs";
+
+export const esc = (s) => String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+const f = (n) => Math.round(n * 10) / 10;
+
+/** A "nice" axis: [min, max, step] covering the values with about 5 steps. */
+export function niceAxis(values) {
+  let lo = values.reduce((a, b) => Math.min(a, b), 0);
+  let hi = values.reduce((a, b) => Math.max(a, b), 0);
+  if (lo === hi) hi = lo + 1;
+  const raw = (hi - lo) / 5;
+  const mag = 10 ** Math.floor(Math.log10(raw));
+  const step = [1, 2, 2.5, 5, 10].map((m) => m * mag).find((s) => s >= raw);
+  lo = Math.floor(lo / step) * step;
+  hi = Math.ceil(hi / step) * step;
+  return [lo, hi, step];
+}
+
+/** Decimal places a step needs: 0.25 needs 2, 0.02 needs 2, 5 needs 0. */
+export function decimalsOf(step) {
+  for (let d = 0; d < 10; d++) if (Math.abs(Math.round(step * 10 ** d) - step * 10 ** d) < 1e-9) return d;
+  return 10;
+}
+
+/** The tick labels of an axis: lo + k * step, each with the decimals the step needs. */
+export function tickLabels([lo, hi, step]) {
+  const dec = decimalsOf(step);
+  const n = Math.round((hi - lo) / step);
+  return Array.from({ length: n + 1 }, (_, k) => {
+    const v = lo + k * step;
+    return { v, text: Math.abs(v) >= 1000 ? v.toLocaleString("en-US", { maximumFractionDigits: dec }) : v.toFixed(dec) };
+  });
+}
+
+function legend(names, w, y) {
+  if (names.length < 2) return "";
+  const item = 150;
+  const x0 = (w - item * names.length) / 2;
+  return names.map((n, i) => `<rect x="${f(x0 + i * item)}" y="${y - 10}" width="14" height="14" fill="#${PALETTE[i % PALETTE.length]}"/>`
+    + `<text x="${f(x0 + i * item + 20)}" y="${y + 2}" font-size="16">${esc(n)}</text>`).join("");
+}
+
+function axes(c, box) {
+  const axis = niceAxis(c.series.flatMap((s) => s.values));
+  const [lo, hi] = axis;
+  const y = (v) => box.y + box.h - ((v - lo) / (hi - lo)) * box.h;
+  const grid = tickLabels(axis).map((t) => `<line x1="${box.x}" x2="${box.x + box.w}" y1="${f(y(t.v))}" y2="${f(y(t.v))}" stroke="#D5D8DC"/>`
+    + `<text x="${box.x - 10}" y="${f(y(t.v)) + 5}" font-size="14" text-anchor="end">${esc(t.text)}</text>`).join("");
+  const unit = c.unit ? `<text x="${box.x}" y="${box.y - 14}" font-size="14">${esc(c.unit)}</text>` : "";
+  return { y, svg: grid + unit };
+}
+
+function labelsAt(c, box, slot) {
+  return c.labels.map((l, i) => `<text x="${f(box.x + slot * (i + 0.5))}" y="${box.y + box.h + 24}" font-size="14" text-anchor="middle">${esc(l)}</text>`).join("");
+}
+
+function bar(c, w, h) {
+  const box = { x: 80, y: 30, w: w - 110, h: h - 100 };
+  const { y, svg } = axes(c, box);
+  const slot = box.w / c.labels.length;
+  const bw = (slot * 0.7) / c.series.length;
+  const bars = c.series.map((s, k) => s.values.map((v, i) => {
+    const x = box.x + slot * i + slot * 0.15 + bw * k;
+    const top = Math.min(y(v), y(0));
+    return `<rect x="${f(x)}" y="${f(top)}" width="${f(bw)}" height="${f(Math.abs(y(v) - y(0)))}" fill="#${PALETTE[k % PALETTE.length]}"/>`;
+  }).join("")).join("");
+  return svg + bars + labelsAt(c, box, slot) + legend(c.series.map((s) => s.name), w, h - 16);
+}
+
+function line(c, w, h) {
+  const box = { x: 80, y: 30, w: w - 110, h: h - 100 };
+  const { y, svg } = axes(c, box);
+  const slot = box.w / c.labels.length;
+  const lines = c.series.map((s, k) => {
+    const color = PALETTE[k % PALETTE.length];
+    const pts = s.values.map((v, i) => [f(box.x + slot * (i + 0.5)), f(y(v))]);
+    return `<polyline fill="none" stroke="#${color}" stroke-width="3" points="${pts.map((p) => p.join(",")).join(" ")}"/>`
+      + pts.map((p) => `<circle cx="${p[0]}" cy="${p[1]}" r="5" fill="#${color}"/>`).join("");
+  }).join("");
+  return svg + lines + labelsAt(c, box, slot) + legend(c.series.map((s) => s.name), w, h - 16);
+}
+
+function pie(c, w, h) {
+  const values = c.series[0].values;
+  const total = values.reduce((a, b) => a + b, 0) || 1;
+  const r = Math.min(w * 0.3, (h - 70) / 2);
+  const cx = w * 0.38;
+  const cy = (h - 40) / 2;
+  let a = -Math.PI / 2;
+  const parts = values.map((v, i) => {
+    const b = a + (v / total) * 2 * Math.PI;
+    const large = b - a > Math.PI ? 1 : 0;
+    const p = (t) => `${f(cx + r * Math.cos(t))} ${f(cy + r * Math.sin(t))}`;
+    const d = v >= total ? `M ${cx - r} ${cy} a ${r} ${r} 0 1 0 ${2 * r} 0 a ${r} ${r} 0 1 0 ${-2 * r} 0` : `M ${cx} ${cy} L ${p(a)} A ${r} ${r} 0 ${large} 1 ${p(b)} Z`;
+    a = b;
+    return `<path d="${d}" fill="#${PALETTE[i % PALETTE.length]}" stroke="#FFFFFF" stroke-width="2"/>`;
+  }).join("");
+  const keys = c.labels.map((l, i) => {
+    const ky = 40 + i * 30;
+    const pct = f((values[i] / total) * 100);
+    return `<rect x="${f(w * 0.7)}" y="${ky - 12}" width="16" height="16" fill="#${PALETTE[i % PALETTE.length]}"/>`
+      + `<text x="${f(w * 0.7 + 24)}" y="${ky + 2}" font-size="16">${esc(l)} ${pct}%</text>`;
+  }).join("");
+  return parts + keys;
+}
+
+const KINDS = { bar, line, pie };
+
+/** An SVG element w x h px for a model chart. */
+export function chartSvg(c, w, h) {
+  return `<svg viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" fill="#1B2631" font-family="inherit">${KINDS[c.kind](c, w, h)}</svg>`;
+}