@litfamily/litopencode 1.0.7 → 1.0.9

package/skills/lit-pptx/scripts/lib/directive-parser.js

@@ -0,0 +1,244 @@
+"use strict";
+
+/**
+ * directive-parser.js — Extract ::: fenced blocks and detect forbidden constructs.
+ *
+ * Responsibilities:
+ * - Find ::: fenced blocks (main-box, kpi-table, notes, image, key-message)
+ * - Reject nested ::: blocks
+ * - Reject arbitrary HTML/CSS (div, span, style, inline style attributes)
+ * - Extract tables from | pipe | syntax
+ * - Extract images from ![alt](path) syntax
+ */
+
+const APPROVED_DIRECTIVES = new Set(["main-box", "kpi-table", "notes", "image", "key-message"]);
+
+// A void directive is a single line: it draws something and has no body, so it
+// takes no closing fence. Shapes are the only such directive.
+const VOID_DIRECTIVES = new Set(["shape"]);
+
+// Containers nest by fence length, the pandoc fenced-div convention: a block is
+// closed by a run of the same length, so a ::: block inside a :::: block is
+// unambiguous. v1 forbade nesting outright and every v1 deck used ::: only,
+// which is why those decks keep parsing exactly as before.
+const FENCE_OPEN = /^\s*(:{3,})\s*([a-z][\w-]*)\s*(.*)$/;
+const FENCE_CLOSE = /^\s*(:{3,})\s*$/;
+const MAX_FENCE_DEPTH = 2;
+
+/**
+ * Split a directive's argument string into positional values and key=value pairs.
+ * Numbers and booleans are coerced; quoted values keep their spaces.
+ * @param {string} rest — everything after the directive name
+ * @returns {{attrs: object, positional: Array}}
+ */
+function parseAttrs(rest) {
+  const attrs = {};
+  const positional = [];
+  const token = /([^\s=]+)=("[^"]*"|'[^']*'|\S+)|(\S+)/g;
+  let m;
+  while ((m = token.exec(rest)) !== null) {
+    if (m[3] !== undefined) {
+      positional.push(m[3]);
+      continue;
+    }
+    let value = m[2];
+    if ((value.startsWith('"') && value.endsWith('"')) ||
+        (value.startsWith("'") && value.endsWith("'"))) {
+      value = value.slice(1, -1);
+    } else if (/^-?\d+(\.\d+)?$/.test(value)) {
+      value = parseFloat(value);
+    } else if (value === "true") {
+      value = true;
+    } else if (value === "false") {
+      value = false;
+    }
+    attrs[m[1]] = value;
+  }
+  return { attrs, positional };
+}
+
+/**
+ * Validate slide content for forbidden constructs.
+ * Throws on violation with descriptive message.
+ * @param {string} content — Slide content (after layout directive removed)
+ * @param {number} slideIndex — For error messages
+ */
+function validate(content, slideIndex) {
+  const lines = content.split("\n");
+
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    const lineNum = i + 1;
+
+    // Arbitrary HTML tags
+    if (/<(?:div|span|table|thead|tbody|tr|td|th|section|article|header|footer|nav|main|aside|style|script)\b/i.test(line)) {
+      throw new Error(
+        `Slide ${slideIndex}, line ${lineNum}: Arbitrary HTML is not allowed in Markdown slide spec v1. ` +
+        `Found: ${line.trim().slice(0, 60)}`
+      );
+    }
+
+    // Inline style attributes
+    if (/style\s*=\s*["']/.test(line)) {
+      throw new Error(
+        `Slide ${slideIndex}, line ${lineNum}: Inline style attributes are not allowed. ` +
+        `Found: ${line.trim().slice(0, 60)}`
+      );
+    }
+
+    // <style> blocks
+    if (/<style\b/i.test(line)) {
+      throw new Error(
+        `Slide ${slideIndex}, line ${lineNum}: <style> blocks are not allowed. ` +
+        `CSS must come from template contracts, not author input.`
+      );
+    }
+  }
+
+  // Nesting: a container must use a longer fence than everything inside it.
+  const open = [];
+  for (let i = 0; i < lines.length; i++) {
+    const openMatch = lines[i].match(FENCE_OPEN);
+    if (openMatch) {
+      if (VOID_DIRECTIVES.has(openMatch[2])) continue;
+      const len = openMatch[1].length;
+      const outer = open.length > 0 ? open[open.length - 1] : null;
+      if (outer !== null && len >= outer) {
+        throw new Error(
+          `Slide ${slideIndex}, line ${i + 1}: Nested directives must use a shorter ` +
+          `fence than their container — "${":".repeat(outer)}" cannot contain ` +
+          `"${":".repeat(len)}". Close the current block first, or open the ` +
+          `container with more colons (e.g. "::::").`
+        );
+      }
+      if (open.length >= MAX_FENCE_DEPTH) {
+        throw new Error(
+          `Slide ${slideIndex}, line ${i + 1}: Directive nesting depth exceeds ` +
+          `${MAX_FENCE_DEPTH}. A container may hold blocks, but those blocks may ` +
+          `not be containers themselves.`
+        );
+      }
+      open.push(len);
+      continue;
+    }
+    const closeMatch = lines[i].match(FENCE_CLOSE);
+    if (closeMatch && open.length > 0 && open[open.length - 1] === closeMatch[1].length) {
+      open.pop();
+    }
+  }
+
+  if (open.length > 0) {
+    throw new Error(
+      `Slide ${slideIndex}: Unclosed directive block. Each ":::" open must have a ` +
+      `matching close of the same length.`
+    );
+  }
+}
+
+/**
+ * Extract fenced blocks from content, returning interleaved segments.
+ *
+ * A container (fence longer than three colons) also carries `children`, the
+ * blocks parsed from its body, so a caller can walk a column layout without
+ * re-parsing. Plain ::: blocks keep the v1 shape: raw `value`, no children.
+ *
+ * @param {string} content
+ * @returns {Array<{type: 'text'|'directive', value: string, directive?: string,
+ *                  attrs?: object, positional?: Array, children?: Array}>}
+ */
+function extractBlocks(content) {
+  const segments = [];
+  const lines = content.split("\n");
+  let buffer = [];
+
+  const flushText = () => {
+    if (buffer.length > 0) {
+      const value = buffer.join("\n");
+      if (value.trim()) segments.push({ type: "text", value });
+      buffer = [];
+    }
+  };
+
+  let i = 0;
+  while (i < lines.length) {
+    const openMatch = lines[i].match(FENCE_OPEN);
+    if (!openMatch) {
+      buffer.push(lines[i]);
+      i++;
+      continue;
+    }
+
+    const [, fence, name, rest] = openMatch;
+    const { attrs, positional } = parseAttrs(rest || "");
+    flushText();
+
+    if (VOID_DIRECTIVES.has(name)) {
+      segments.push({ type: "directive", directive: name, attrs, positional, value: "" });
+      i++;
+      continue;
+    }
+
+    // validate() has already guaranteed no fence of this length opens inside,
+    // so the first close of the same length is this block's close.
+    let end = -1;
+    for (let j = i + 1; j < lines.length; j++) {
+      const closeMatch = lines[j].match(FENCE_CLOSE);
+      if (closeMatch && closeMatch[1].length === fence.length) {
+        end = j;
+        break;
+      }
+    }
+
+    const body = lines.slice(i + 1, end < 0 ? lines.length : end).join("\n");
+    const segment = { type: "directive", directive: name, attrs, positional, value: body.trim() };
+    if (fence.length > 3) segment.children = extractBlocks(body);
+    segments.push(segment);
+
+    i = end < 0 ? lines.length : end + 1;
+  }
+
+  flushText();
+  return segments;
+}
+
+/**
+ * Parse a pipe table from text content.
+ * @param {string} text
+ * @returns {{ headers: string[], rows: string[][] } | null}
+ */
+function parseTable(text) {
+  const lines = text.split("\n").filter((l) => l.trim().startsWith("|"));
+  if (lines.length < 2) return null;
+
+  const parseRow = (line) =>
+    line
+      .split("|")
+      .slice(1, -1)
+      .map((c) => c.trim());
+
+  // Detect separator line (|---|---|)
+  const sepIdx = lines.findIndex((l) => /^\|[\s\-:]+\|/.test(l));
+  if (sepIdx < 0) return null;
+
+  const headers = parseRow(lines[0]);
+  const dataLines = lines.slice(sepIdx + 1);
+  const rows = dataLines.map(parseRow).filter((r) => r.length > 0);
+
+  return { headers, rows };
+}
+
+/**
+ * Parse an image from ![alt](path) syntax.
+ * @param {string} text
+ * @returns {{ alt: string, src: string } | null}
+ */
+function parseImage(text) {
+  const match = text.match(/!\[([^\]]*)\]\(([^)]+)\)/);
+  if (!match) return null;
+  return { alt: match[1], src: match[2] };
+}
+
+module.exports = {
+  validate, extractBlocks, parseTable, parseImage, parseAttrs,
+  VOID_DIRECTIVES, APPROVED_DIRECTIVES,
+};

package/skills/lit-pptx/scripts/lib/font-map.js

@@ -0,0 +1,79 @@
+"use strict";
+
+/**
+ * font-map.js — apply a font SYSTEM to an azure-style template, decoupled from
+ * which enrolled template was chosen. Lets a user pick AZURE design + any font.
+ *
+ * Three systems:
+ *   pretendard — ONE weighted family "LitOpenCode Sans" (bold via weight; bold:true OK)
+ *   a2z        — 에이투지체, one family PER weight (bold:false; weight by name)
+ *
+ * Each font_role is reassigned by its INTENDED weight class (derived from the
+ * role name, not the source template's possibly-flattened bold flag) so the
+ * mapping is correct no matter which template you start from.
+ */
+
+// Per-weight family names for the per-weight font systems.
+const FAMILIES = {
+  a2z: { bold: "에이투지체 7 Bold", regular: "에이투지체 4 Regular", light: "에이투지체 3 Light", black: "에이투지체 9 Black", medium: "에이투지체 5 Medium" },
+};
+
+// Canonical weight class per role name (intended hierarchy weight).
+const ROLE_WEIGHT = {
+  cover_title: "bold", section_title: "bold", section_header: "bold",
+  table_header: "bold", closing_title: "bold", divider_title: "bold",
+  body_text_toc: "bold", kpi_value: "black",
+  disclaimer: "light",
+  cover_metadata: "regular", cover_date: "regular", body_text: "regular",
+  numbered_item: "regular", table_data: "regular", kpi_label: "regular",
+  figure_caption: "regular", table_caption: "regular", eyebrow: "bold",
+};
+
+function weightClass(roleName) {
+  if (ROLE_WEIGHT[roleName]) return ROLE_WEIGHT[roleName];
+  const n = roleName.toLowerCase();
+  if (n.includes("kpi_value")) return "black";
+  if (n.includes("title") || n.includes("header") || n.includes("eyebrow")) return "bold";
+  if (n.includes("disclaimer") || n.includes("light") || n.includes("caption_small")) return "light";
+  return "regular";
+}
+
+const KEYS = ["pretendard", "a2z"];
+
+/**
+ * Mutate templateObj in place to use the given font system. No-op for unknown key.
+ * @param {object} templateObj  { template, capabilities, mapping }
+ * @param {"pretendard"|"a2z"} key
+ */
+function applyFont(templateObj, key) {
+  if (!key || !KEYS.includes(key)) return templateObj;
+  const t = templateObj.template || (templateObj.template = {});
+  const caps = templateObj.capabilities || {};
+
+  if (key === "pretendard") {
+    t.fonts = { title: "LitOpenCode Sans", body: "LitOpenCode Sans", light: "LitOpenCode Sans" };
+    t.global_typography = { ...(t.global_typography || {}), bullet_font: "LitOpenCode Sans" };
+    const roles = caps.font_roles || {};
+    for (const [name, r] of Object.entries(roles)) {
+      const cls = weightClass(name);
+      r.font = "LitOpenCode Sans";
+      r.bold = cls === "bold" || cls === "black";
+    }
+    if (caps.constraints) caps.constraints.no_bold_on_bold_fonts = false;
+    return templateObj;
+  }
+
+  const fam = FAMILIES[key];
+  t.fonts = { title: fam.bold, body: fam.regular, light: fam.light };
+  t.global_typography = { ...(t.global_typography || {}), bullet_font: fam.regular };
+  const roles = caps.font_roles || {};
+  for (const [name, r] of Object.entries(roles)) {
+    const cls = weightClass(name);
+    r.font = fam[cls] || fam.regular;
+    r.bold = false; // per-weight families never take a bold flag (avoids faux-bold)
+  }
+  if (caps.constraints) caps.constraints.no_bold_on_bold_fonts = true;
+  return templateObj;
+}
+
+module.exports = { applyFont, KEYS, FAMILIES, weightClass };

package/skills/lit-pptx/scripts/lib/gen-bg.js

@@ -0,0 +1,85 @@
+"use strict";
+
+/**
+ * gen-bg.js — generate blurred gradient-mesh backgrounds (glassmorphism) in the
+ * active palette hue, via sharp. Two variants:
+ *   mesh-light.png — near-white base + soft light-hue blobs (dark ink stays readable)
+ *   mesh-dark.png  — deep-hue base + richer blobs (white text stays readable)
+ * Full-bleed 16:9 at ~150dpi (2000×1125). The whole canvas is heavily blurred so
+ * no hard edges remain — an ambient wash, not a busy pattern.
+ */
+const fs = require("fs");
+const path = require("path");
+const sharp = require("sharp");
+
+const W = 2000;
+const H = 1125;
+
+function blob(cx, cy, r, color, opacity, id) {
+  return (
+    `<radialGradient id="b${id}" cx="50%" cy="50%" r="50%">` +
+    `<stop offset="0%" stop-color="${color}" stop-opacity="${opacity}"/>` +
+    `<stop offset="100%" stop-color="${color}" stop-opacity="0"/></radialGradient>`
+  );
+}
+
+function meshSvg(base, blobs) {
+  const defs = blobs.map((b, i) => blob(b.cx, b.cy, b.r, b.color, b.op, i)).join("");
+  const circles = blobs
+    .map((b, i) => `<circle cx="${b.cx}" cy="${b.cy}" r="${b.r}" fill="url(#b${i})"/>`)
+    .join("");
+  return Buffer.from(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}">` +
+      `<defs>${defs}</defs><rect width="${W}" height="${H}" fill="${base}"/>${circles}</svg>`
+  );
+}
+
+function pick(p, key, fallback) {
+  return (p && p[key]) || fallback;
+}
+
+/**
+ * @param {object} palette azure-style palette (primary, primary_deep, azure, azure_soft, tint, tint_2, paper)
+ * @param {string} outDir
+ * @returns {Promise<{light:string,dark:string}>}
+ */
+async function genMeshBg(palette, outDir) {
+  fs.mkdirSync(outDir, { recursive: true });
+  const primary = pick(palette, "primary", "#1D4ED8");
+  const deep = pick(palette, "primary_deep", "#0B2E6F");
+  const azure = pick(palette, "azure", "#3B82F6");
+  const soft = pick(palette, "azure_soft", "#93C5FD");
+  const tint2 = pick(palette, "tint_2", "#DCE9FF");
+  const paper = pick(palette, "paper", "#F6F9FE");
+
+  // LIGHT: airy wash on near-white. Low opacities keep luminance very high so
+  // dark ink clears WCAG (qa assumes white bg; real bg is only marginally darker).
+  const light = meshSvg("#FFFFFF", [
+    // broad central wash so the glass effect reads across the WHOLE slide (not just
+    // corners) — tint2 is a very pale blue, so luminance stays high and dark ink is safe.
+    { cx: 1000, cy: 560, r: 1500, color: tint2, op: 0.55 },
+    { cx: 120, cy: 160, r: 820, color: soft, op: 0.5 },
+    { cx: 1880, cy: 240, r: 760, color: tint2, op: 0.9 },
+    { cx: 1640, cy: 1040, r: 860, color: soft, op: 0.42 },
+    { cx: 360, cy: 1080, r: 680, color: tint2, op: 0.85 },
+    { cx: 1480, cy: 520, r: 460, color: azure, op: 0.14 },
+  ]);
+
+  // DARK: deep-hue base for white text (section dividers). Stays dark enough.
+  const dark = meshSvg(deep, [
+    { cx: 1640, cy: 280, r: 760, color: primary, op: 0.55 },
+    { cx: 240, cy: 980, r: 720, color: azure, op: 0.32 },
+    { cx: 1820, cy: 1080, r: 560, color: soft, op: 0.14 },
+    { cx: 80, cy: 80, r: 520, color: "#000000", op: 0.28 },
+  ]);
+
+  const lightPath = path.join(outDir, "mesh-light.png");
+  const darkPath = path.join(outDir, "mesh-dark.png");
+  await Promise.all([
+    sharp(light).blur(60).png().toFile(lightPath),
+    sharp(dark).blur(60).png().toFile(darkPath),
+  ]);
+  return { light: lightPath, dark: darkPath };
+}
+
+module.exports = { genMeshBg };

package/skills/lit-pptx/scripts/lib/gen-gradient-assets.js

@@ -0,0 +1,36 @@
+"use strict";
+
+/**
+ * gen-gradient-assets.js — render the azure-style gradient circle PNGs
+ * (circle-lg/md/sm) in an arbitrary two-stop gradient, into a target dir.
+ * Used to recolor cover/divider decorations for a custom --accent.
+ */
+const fs = require("fs");
+const path = require("path");
+const sharp = require("sharp");
+
+function gradCircleSvg(size, c1, c2) {
+  return Buffer.from(
+    `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">` +
+      `<defs><linearGradient id="g" x1="0%" y1="0%" x2="100%" y2="100%">` +
+      `<stop offset="0%" stop-color="${c1}"/><stop offset="100%" stop-color="${c2}"/></linearGradient></defs>` +
+      `<circle cx="${size / 2}" cy="${size / 2}" r="${size / 2}" fill="url(#g)"/></svg>`
+  );
+}
+
+/**
+ * @param {[string,string]} gradient [c1, c2]
+ * @param {string} outDir directory to write circle-lg/md/sm.png into
+ * @returns {Promise<string>} outDir
+ */
+async function genGradientAssets([c1, c2], outDir) {
+  fs.mkdirSync(outDir, { recursive: true });
+  await Promise.all([
+    sharp(gradCircleSvg(1040, c1, c2)).png().toFile(path.join(outDir, "circle-lg.png")),
+    sharp(gradCircleSvg(420, c1, c2)).png().toFile(path.join(outDir, "circle-md.png")),
+    sharp(gradCircleSvg(240, c1, c2)).png().toFile(path.join(outDir, "circle-sm.png")),
+  ]);
+  return outDir;
+}
+
+module.exports = { genGradientAssets, gradCircleSvg };