@cfbender/cesium 0.5.0 → 0.5.2

package/src/render/blocks/renderers/diff.ts

@@ -0,0 +1,378 @@
+// Diff block renderer — split-view before/after code diff with bezier SVG connectors.
+// src/render/blocks/renderers/diff.ts
+
+import type { DiffBlock, BlockMeta } from "../types.ts";
+import type { RenderCtx } from "../render.ts";
+import { escapeHtml, escapeAttr } from "../escape.ts";
+import { highlightCode } from "../highlight.ts";
+import { parseUnifiedDiff } from "../diff/parse-unified.ts";
+import type { DiffEntry, DiffLine } from "../diff/parse-unified.ts";
+import { diffLines } from "../diff/myers.ts";
+
+const LINE_H = 22; // px — must match .diff-line height in CSS
+const SVG_W = 60; // px — connector column width
+
+// ─── Change region ────────────────────────────────────────────────────────────
+
+type RegionKind = "add" | "remove" | "change";
+
+interface ChangeRegion {
+  kind: RegionKind;
+  leftStart: number; // 0-based index into leftLines
+  leftEnd: number;
+  rightStart: number; // 0-based index into rightLines
+  rightEnd: number;
+}
+
+// ─── SVG path generation ──────────────────────────────────────────────────────
+
+function svgPath(region: ChangeRegion): string {
+  const W = SVG_W;
+  const H = LINE_H;
+
+  const { kind, leftStart, leftEnd, rightStart, rightEnd } = region;
+
+  if (kind === "change") {
+    const y0l = leftStart * H;
+    const y1l = leftEnd * H;
+    const y0r = rightStart * H;
+    const y1r = rightEnd * H;
+    return (
+      `M 0 ${y0l} ` +
+      `C ${W / 2} ${y0l}, ${W / 2} ${y0r}, ${W} ${y0r} ` +
+      `L ${W} ${y1r} ` +
+      `C ${W / 2} ${y1r}, ${W / 2} ${y1l}, 0 ${y1l} ` +
+      `Z`
+    );
+  }
+
+  if (kind === "add") {
+    // anchorY is on the left side (leftStart === leftEnd for pure add)
+    const anchorY = leftStart * H;
+    const y0r = rightStart * H;
+    const y1r = rightEnd * H;
+    return (
+      `M 0 ${anchorY} ` +
+      `C ${W / 2} ${anchorY}, ${W / 2} ${y0r}, ${W} ${y0r} ` +
+      `L ${W} ${y1r} ` +
+      `C ${W / 2} ${y1r}, ${W / 2} ${anchorY}, 0 ${anchorY} ` +
+      `Z`
+    );
+  }
+
+  // kind === "remove"
+  // anchorY is on the right side (rightStart === rightEnd for pure remove)
+  const anchorY = rightStart * H;
+  const y0l = leftStart * H;
+  const y1l = leftEnd * H;
+  return (
+    `M 0 ${y0l} ` +
+    `C ${W / 2} ${y0l}, ${W / 2} ${anchorY}, ${W} ${anchorY} ` +
+    `L ${W} ${anchorY} ` +
+    `C ${W / 2} ${anchorY}, ${W / 2} ${y1l}, 0 ${y1l} ` +
+    `Z`
+  );
+}
+
+// ─── Region detection ─────────────────────────────────────────────────────────
+
+function detectRegions(entries: DiffEntry[]): ChangeRegion[] {
+  const regions: ChangeRegion[] = [];
+
+  // Walk entries tracking left/right indices
+  let leftIdx = 0;
+  let rightIdx = 0;
+
+  // Region accumulation
+  let inRegion = false;
+  let regionLeftStart = 0;
+  let regionRightStart = 0;
+  let regionLeftEnd = 0;
+  let regionRightEnd = 0;
+  let hasRemoves = false;
+  let hasAdds = false;
+
+  function flushRegion() {
+    if (!inRegion) return;
+    const kind: RegionKind = hasAdds && hasRemoves ? "change" : hasAdds ? "add" : "remove";
+    regions.push({
+      kind,
+      leftStart: regionLeftStart,
+      leftEnd: regionLeftEnd,
+      rightStart: regionRightStart,
+      rightEnd: regionRightEnd,
+    });
+    inRegion = false;
+    hasAdds = false;
+    hasRemoves = false;
+  }
+
+  for (const entry of entries) {
+    if (entry.kind === "hunk-sep") {
+      flushRegion();
+      continue;
+    }
+
+    const { kind } = entry;
+
+    if (kind === "context") {
+      flushRegion();
+      leftIdx++;
+      rightIdx++;
+      continue;
+    }
+
+    if (kind === "remove") {
+      if (!inRegion) {
+        inRegion = true;
+        regionLeftStart = leftIdx;
+        regionRightStart = rightIdx;
+        hasRemoves = false;
+        hasAdds = false;
+      }
+      hasRemoves = true;
+      leftIdx++;
+      regionLeftEnd = leftIdx;
+      // For pure remove regions, rightEnd tracks the anchor
+      if (!hasAdds) {
+        regionRightEnd = rightIdx;
+      }
+      continue;
+    }
+
+    if (kind === "add") {
+      if (!inRegion) {
+        inRegion = true;
+        regionLeftStart = leftIdx;
+        regionLeftEnd = leftIdx; // anchor for pure-add
+        regionRightStart = rightIdx;
+        hasRemoves = false;
+        hasAdds = false;
+      }
+      hasAdds = true;
+      rightIdx++;
+      regionRightEnd = rightIdx;
+      // For pure add, update leftEnd to track anchor
+      if (!hasRemoves) {
+        regionLeftEnd = leftIdx;
+      }
+      continue;
+    }
+  }
+
+  flushRegion();
+  return regions;
+}
+
+// ─── Highlight helpers ────────────────────────────────────────────────────────
+
+/**
+ * Highlight a multi-line text and return an array of highlighted line HTML strings.
+ * Each element corresponds to one source line.
+ */
+async function highlightLines(text: string, lang: string, ctx: RenderCtx): Promise<string[]> {
+  if (text === "") return [];
+  const highlighted = await highlightCode(text, lang, ctx.highlightTheme);
+  return highlighted.split("\n");
+}
+
+// ─── Main renderer ────────────────────────────────────────────────────────────
+
+export async function renderDiff(block: DiffBlock, ctx: RenderCtx): Promise<string> {
+  const lang = block.lang ?? "text";
+
+  // ── 1. Resolve DiffEntry[] ─────────────────────────────────────────────────
+  let entries: DiffEntry[];
+
+  if (block.patch !== undefined) {
+    const parsed = parseUnifiedDiff(block.patch);
+    if (parsed === null) {
+      // Fallback: plaintext panel
+      const escaped = escapeHtml(block.patch);
+      const filename =
+        block.filename !== undefined
+          ? `<span class="diff-filename">${escapeHtml(block.filename)}</span>`
+          : "";
+      const header = filename !== "" ? `<header class="diff-header">${filename}</header>\n` : "";
+      return (
+        `<figure class="diff-block fallback" data-lang="${escapeAttr(lang)}">\n` +
+        header +
+        `  <pre><code>${escaped}</code></pre>\n` +
+        `</figure>`
+      );
+    }
+    entries = parsed;
+  } else {
+    const before = block.before ?? "";
+    const after = block.after ?? "";
+    entries = diffLines(before, after);
+  }
+
+  // ── 2. Build left/right line lists & recompose text for shiki ─────────────
+  const leftEntries: DiffLine[] = [];
+  const rightEntries: DiffLine[] = [];
+
+  for (const e of entries) {
+    if (e.kind === "hunk-sep") continue;
+    if (e.kind === "context" || e.kind === "remove") {
+      leftEntries.push(e);
+    }
+    if (e.kind === "context" || e.kind === "add") {
+      rightEntries.push(e);
+    }
+  }
+
+  const beforeText = leftEntries.map((e) => e.text).join("\n");
+  const afterText = rightEntries.map((e) => e.text).join("\n");
+
+  const [leftHighlighted, rightHighlighted] = await Promise.all([
+    highlightLines(beforeText, lang, ctx),
+    highlightLines(afterText, lang, ctx),
+  ]);
+
+  // ── 3. Compute stats ───────────────────────────────────────────────────────
+  let addCount = 0;
+  let removeCount = 0;
+  for (const e of entries) {
+    if (e.kind === "add") addCount++;
+    if (e.kind === "remove") removeCount++;
+  }
+
+  // ── 4. Detect change regions (for SVG connectors) ─────────────────────────
+  const regions = detectRegions(entries);
+
+  // ── 5. Compute SVG height ──────────────────────────────────────────────────
+  // Each side renders context+remove (left) or context+add (right) lines,
+  // plus one row per hunk-sep
+  let leftLineCount = 0;
+  let rightLineCount = 0;
+  for (const e of entries) {
+    if (e.kind === "hunk-sep") {
+      leftLineCount++;
+      rightLineCount++;
+    } else if (e.kind === "context") {
+      leftLineCount++;
+      rightLineCount++;
+    } else if (e.kind === "remove") {
+      leftLineCount++;
+    } else if (e.kind === "add") {
+      rightLineCount++;
+    }
+  }
+  const svgH = Math.max(leftLineCount, rightLineCount) * LINE_H;
+
+  // ── 6. Render left side ────────────────────────────────────────────────────
+  let leftHighIdx = 0;
+  let rightHighIdx = 0;
+  const leftRows: string[] = [];
+  const rightRows: string[] = [];
+
+  for (const entry of entries) {
+    if (entry.kind === "hunk-sep") {
+      const sepLabel = `… @ ${entry.newStart}`;
+      const sepHtml = `<li class="diff-line hunk-sep"><span class="num"></span><span class="content">${escapeHtml(sepLabel)}</span></li>`;
+      leftRows.push(sepHtml);
+      rightRows.push(sepHtml);
+      continue;
+    }
+
+    const { kind } = entry;
+
+    if (kind === "context" || kind === "remove") {
+      const hl =
+        leftHighlighted[leftHighIdx] ?? `<span class="line">${escapeHtml(entry.text)}</span>`;
+      leftHighIdx++;
+      const lineNum = entry.beforeLineNum !== null ? String(entry.beforeLineNum) : "";
+      leftRows.push(
+        `<li class="diff-line ${kind}"><span class="num">${escapeHtml(lineNum)}</span><span class="content">${hl}</span></li>`,
+      );
+    }
+
+    if (kind === "context" || kind === "add") {
+      const hl =
+        rightHighlighted[rightHighIdx] ?? `<span class="line">${escapeHtml(entry.text)}</span>`;
+      rightHighIdx++;
+      const lineNum = entry.afterLineNum !== null ? String(entry.afterLineNum) : "";
+      rightRows.push(
+        `<li class="diff-line ${kind}"><span class="num">${escapeHtml(lineNum)}</span><span class="content">${hl}</span></li>`,
+      );
+    }
+  }
+
+  // ── 7. Render SVG connector paths ─────────────────────────────────────────
+  const svgPaths = regions.map((region) => {
+    const d = svgPath(region);
+    return `    <path class="diff-conn ${region.kind}" d="${d}"/>`;
+  });
+
+  const svgEl =
+    `  <div class="diff-connector" style="--lineH: ${LINE_H}px;">\n` +
+    `    <svg viewBox="0 0 ${SVG_W} ${svgH}" preserveAspectRatio="none" aria-hidden="true" style="height: ${svgH}px">\n` +
+    svgPaths.join("\n") +
+    (svgPaths.length > 0 ? "\n" : "") +
+    `    </svg>\n` +
+    `  </div>`;
+
+  // ── 8. Header ──────────────────────────────────────────────────────────────
+  const filenameHtml =
+    block.filename !== undefined
+      ? `<span class="diff-filename">${escapeHtml(block.filename)}</span>`
+      : `<span class="diff-filename"></span>`;
+  const statHtml = `<span class="diff-stat"><span class="add">+${addCount}</span> <span class="rem">-${removeCount}</span></span>`;
+  const headerHtml = `<header class="diff-header">${filenameHtml}${statHtml}</header>`;
+
+  // ── 9. Caption ─────────────────────────────────────────────────────────────
+  const captionHtml =
+    block.caption !== undefined ? `\n  <figcaption>${escapeHtml(block.caption)}</figcaption>` : "";
+
+  // ── 10. Assemble ───────────────────────────────────────────────────────────
+  const leftOl =
+    `  <ol class="diff-side before">\n` +
+    leftRows.map((r) => `    ${r}`).join("\n") +
+    (leftRows.length > 0 ? "\n" : "") +
+    `  </ol>`;
+
+  const rightOl =
+    `  <ol class="diff-side after">\n` +
+    rightRows.map((r) => `    ${r}`).join("\n") +
+    (rightRows.length > 0 ? "\n" : "") +
+    `  </ol>`;
+
+  return (
+    `<figure class="diff-block" data-lang="${escapeAttr(lang)}">\n` +
+    `  ${headerHtml}\n` +
+    `  <div class="diff-grid">\n` +
+    `${leftOl}\n` +
+    `${svgEl}\n` +
+    `${rightOl}\n` +
+    `  </div>${captionHtml}\n` +
+    `</figure>`
+  );
+}
+
+export const meta: BlockMeta = {
+  type: "diff",
+  description:
+    "Side-by-side before/after code diff with curved bezier connectors. Use for showing what changed or proposing a change. Provide either a unified diff `patch`, or both `before` and `after` strings.",
+  schema: {
+    type: "object",
+    properties: {
+      type: { const: "diff" },
+      patch: { type: "string" },
+      before: { type: "string" },
+      after: { type: "string" },
+      lang: { type: "string" },
+      filename: { type: "string" },
+      caption: { type: "string" },
+    },
+    required: ["type"],
+  },
+  example: {
+    type: "diff",
+    filename: "src/auth.ts",
+    lang: "typescript",
+    before: "function login(user, pass) {\n  return db.find(user, pass);\n}",
+    after:
+      "async function login(user, pass) {\n  const u = await db.find(user);\n  if (!u) return null;\n  return verify(u, pass) ? u : null;\n}",
+  },
+};

package/src/render/blocks/renderers/prose.ts

@@ -23,7 +23,6 @@ export const meta: BlockMeta = {
   },
   example: {
     type: "prose",
-    markdown:
-      "This is a paragraph with **bold** and *italic* text.\n\n- Item one\n- Item two",
+    markdown: "This is a paragraph with **bold** and *italic* text.\n\n- Item one\n- Item two",
   },
 };

package/src/render/blocks/renderers/section.ts

@@ -7,7 +7,7 @@ import type { RenderCtx } from "../render.ts";
 import { renderBlock } from "../render.ts";
 import { escapeHtml } from "../escape.ts";
 
-export function renderSection(block: SectionBlock, ctx: RenderCtx): string {
+export async function renderSection(block: SectionBlock, ctx: RenderCtx): Promise<string> {
   // Determine section number: explicit or auto-increment
   let num: string;
   if (block.num !== undefined && block.num !== "") {
@@ -34,6 +34,7 @@ export function renderSection(block: SectionBlock, ctx: RenderCtx): string {
     sectionCounter: ctx.sectionCounter,
     depth: ctx.depth + 1,
     path: `${ctx.path}.children`,
+    highlightTheme: ctx.highlightTheme,
   };
 
   let buffer: string[] = [];
@@ -45,7 +46,8 @@ export function renderSection(block: SectionBlock, ctx: RenderCtx): string {
       ...childCtx,
       path: `${ctx.path}.children[${i}]`,
     };
-    const rendered = renderBlock(child, childBlockCtx);
+    // eslint-disable-next-line no-await-in-loop -- sequential render required; card buffer tracks contiguous non-section children
+    const rendered = await renderBlock(child, childBlockCtx);
     if (child.type === "section") {
       // Flush buffered non-section children into a card first
       if (buffer.length > 0) {

package/src/render/blocks/renderers/timeline.ts

@@ -27,7 +27,8 @@ export function renderTimeline(block: TimelineBlock, _ctx: RenderCtx): string {
 
 export const meta: BlockMeta = {
   type: "timeline",
-  description: "Milestone list with dot connectors. Each item has a label, text, and optional date.",
+  description:
+    "Milestone list with dot connectors. Each item has a label, text, and optional date.",
   schema: {
     type: "object",
     properties: {

package/src/render/blocks/themes/claret-dark.ts

@@ -0,0 +1,201 @@
+// Claret-dark shiki theme — converted from ports/bat/ClaretDark.tmTheme.
+// src/render/blocks/themes/claret-dark.ts
+//
+// Source of truth: /claret.nvim/ports/bat/ClaretDark.tmTheme
+// Every scope rule in the tmTheme is preserved verbatim; comma-separated
+// scope strings are split into the string[] form shiki prefers.
+//
+// Global tokens (from tmTheme global settings):
+//   bg         #180810  — editor background
+//   fg         #DDD3C7  — default foreground
+//   selection  #2B1F22
+//   gutter fg  #71685E
+//
+// Derived palette reference (claret.nvim/lua/claret/palette.lua — dark):
+//   rose_1    #C75B7A   keyword / statement / accent
+//   rose_2    #B04A68   property / data keys
+//   gold_1    #D4A76A   function / number / constant / decorator
+//   sage_1    #8FA86E   string
+//   slate_1   #8995A8   type / class / tag / escape / link
+//   slate_2   #6E7A90   tag attribute
+//   text      #DDD3C7   variable / default fg
+//   text_2    #BDB3A7   operator (syntax.lua maps Operator → text_2; tmTheme uses #9E9288)
+//             NOTE: the tmTheme uses #9E9288 (text_3) for operator/punctuation — preserved.
+//   text_4    #71685E   comment (fg)
+//   terra_1   #C44536   invalid / diff deleted
+
+import type { ThemeRegistration } from "shiki";
+
+export const claretDark: ThemeRegistration = {
+  name: "claret-dark",
+  type: "dark",
+  fg: "#DDD3C7",
+  bg: "#180810",
+  colors: {
+    "editor.foreground": "#DDD3C7",
+    "editor.background": "#180810",
+    "editor.selectionBackground": "#2B1F22",
+    "editor.lineHighlightBackground": "#2B1F22",
+    "editorLineNumber.foreground": "#71685E",
+  },
+  tokenColors: [
+    // Comment — #71685E italic
+    {
+      name: "Comment",
+      scope: ["comment", "punctuation.definition.comment"],
+      settings: { foreground: "#71685E", fontStyle: "italic" },
+    },
+    // Keyword — #C75B7A
+    {
+      name: "Keyword",
+      scope: ["keyword", "storage.type", "storage.modifier"],
+      settings: { foreground: "#C75B7A" },
+    },
+    // Function — #D4A76A
+    {
+      name: "Function",
+      scope: ["entity.name.function", "support.function"],
+      settings: { foreground: "#D4A76A" },
+    },
+    // String — #8FA86E
+    {
+      name: "String",
+      scope: ["string", "punctuation.definition.string"],
+      settings: { foreground: "#8FA86E" },
+    },
+    // Number — #D4A76A
+    {
+      name: "Number",
+      scope: ["constant.numeric"],
+      settings: { foreground: "#D4A76A" },
+    },
+    // Constant — #D4A76A
+    {
+      name: "Constant",
+      scope: ["constant", "constant.language", "variable.language"],
+      settings: { foreground: "#D4A76A" },
+    },
+    // Type — #8995A8
+    {
+      name: "Type",
+      scope: ["entity.name.type", "entity.name.class", "support.type", "support.class"],
+      settings: { foreground: "#8995A8" },
+    },
+    // Variable — #DDD3C7
+    {
+      name: "Variable",
+      scope: ["variable", "variable.parameter"],
+      settings: { foreground: "#DDD3C7" },
+    },
+    // Parameter — #DDD3C7 italic (overrides Variable for parameters)
+    {
+      name: "Parameter",
+      scope: ["variable.parameter"],
+      settings: { foreground: "#DDD3C7", fontStyle: "italic" },
+    },
+    // Property — #B04A68
+    {
+      name: "Property",
+      scope: ["variable.other.property", "variable.other.member"],
+      settings: { foreground: "#B04A68" },
+    },
+    // JSON/YAML/TOML Keys — #B04A68
+    {
+      name: "JSON/YAML/TOML Keys",
+      scope: [
+        "meta.mapping.key string",
+        "support.type.property-name.json",
+        "punctuation.support.type.property-name.json",
+        "support.type.property-name.toml",
+        "punctuation.support.type.property-name.toml",
+        "entity.name.tag.yaml",
+        "support.type.property-name.yaml",
+      ],
+      settings: { foreground: "#B04A68" },
+    },
+    // Operator — #9E9288
+    {
+      name: "Operator",
+      scope: ["keyword.operator"],
+      settings: { foreground: "#9E9288" },
+    },
+    // Punctuation — #9E9288
+    {
+      name: "Punctuation",
+      scope: ["punctuation"],
+      settings: { foreground: "#9E9288" },
+    },
+    // Decorator — #D4A76A italic
+    {
+      name: "Decorator",
+      scope: ["meta.decorator", "punctuation.decorator"],
+      settings: { foreground: "#D4A76A", fontStyle: "italic" },
+    },
+    // Tag — #8995A8
+    {
+      name: "Tag",
+      scope: ["entity.name.tag"],
+      settings: { foreground: "#8995A8" },
+    },
+    // Tag Attribute — #6E7A90
+    {
+      name: "Tag Attribute",
+      scope: ["entity.other.attribute-name"],
+      settings: { foreground: "#6E7A90" },
+    },
+    // Invalid — #C44536
+    {
+      name: "Invalid",
+      scope: ["invalid", "invalid.illegal"],
+      settings: { foreground: "#C44536" },
+    },
+    // Escape — #8995A8
+    {
+      name: "Escape",
+      scope: ["constant.character.escape"],
+      settings: { foreground: "#8995A8" },
+    },
+    // Markup Heading — #C75B7A bold
+    {
+      name: "Markup Heading",
+      scope: ["markup.heading"],
+      settings: { foreground: "#C75B7A", fontStyle: "bold" },
+    },
+    // Markup Bold — bold (no color override)
+    {
+      name: "Markup Bold",
+      scope: ["markup.bold"],
+      settings: { fontStyle: "bold" },
+    },
+    // Markup Italic — italic (no color override)
+    {
+      name: "Markup Italic",
+      scope: ["markup.italic"],
+      settings: { fontStyle: "italic" },
+    },
+    // Markup Link — #8995A8
+    {
+      name: "Markup Link",
+      scope: ["markup.underline.link", "string.other.link"],
+      settings: { foreground: "#8995A8" },
+    },
+    // Diff Added — #8FA86E
+    {
+      name: "Diff Added",
+      scope: ["markup.inserted"],
+      settings: { foreground: "#8FA86E" },
+    },
+    // Diff Deleted — #C44536
+    {
+      name: "Diff Deleted",
+      scope: ["markup.deleted"],
+      settings: { foreground: "#C44536" },
+    },
+    // Diff Changed — #D4A76A
+    {
+      name: "Diff Changed",
+      scope: ["markup.changed"],
+      settings: { foreground: "#D4A76A" },
+    },
+  ],
+};