learn-loops 0.1.0 → 0.4.0

package/dist/termimg.js

@@ -0,0 +1,27 @@
+export function imageProtocol(env = process.env, isTTY = !!process.stdout.isTTY) {
+    if (env.LOOPS_IMAGES === "off")
+        return null;
+    if (env.LOOPS_IMAGES === "iterm" || env.LOOPS_IMAGES === "kitty")
+        return env.LOOPS_IMAGES; // forced
+    if (!isTTY)
+        return null;
+    if (env.TMUX)
+        return null; // needs passthrough; not worth the risk of garbage output
+    if (env.KITTY_WINDOW_ID || env.TERM === "xterm-kitty" || env.TERM_PROGRAM === "ghostty")
+        return "kitty";
+    if (["iTerm.app", "WezTerm", "vscode"].includes(env.TERM_PROGRAM ?? ""))
+        return "iterm";
+    return null;
+}
+/** Escape sequence that draws `png` about `cells` columns wide. */
+export function drawImage(png, cells, protocol) {
+    const b64 = png.toString("base64");
+    if (protocol === "iterm")
+        return `\x1b]1337;File=inline=1;width=${cells};preserveAspectRatio=1:${b64}\x07`;
+    const chunks = [];
+    for (let i = 0; i < b64.length; i += 4096) {
+        const more = i + 4096 < b64.length ? 1 : 0;
+        chunks.push(`\x1b_G${i === 0 ? `a=T,f=100,c=${cells},` : ""}m=${more};${b64.slice(i, i + 4096)}\x1b\\`);
+    }
+    return chunks.join("");
+}

package/dist/ui.js

@@ -1,5 +1,9 @@
 import * as p from "@clack/prompts";
 import pc from "picocolors";
+import { renderDiagram } from "./diagram.js";
+import { parsePlot, plotToBraille, renderPlot, sanitizeSvg, svgCaption } from "./figures.js";
+import { mathToText, svgToPng, texToLines, texToPng } from "./math.js";
+import { drawImage, imageProtocol } from "./termimg.js";
 const useColor = !!process.stdout.isTTY && !process.env.NO_COLOR;
 const c256 = (n) => (s) => (useColor ? `\x1b[38;5;${n}m${s}\x1b[39m` : s);
 export const t = {
@@ -52,35 +56,115 @@ export function bar(done, total, width = 20) {
     const filled = total === 0 ? 0 : Math.round((done / total) * width);
     return t.accent("█".repeat(filled)) + t.dim("░".repeat(width - filled)) + t.dim(` ${done}/${total}`);
 }
-/** Lightweight terminal markdown renderer. Mermaid blocks are summarised, not drawn. */
+let tipShown = false;
+/** Draw a raster inline if the terminal can; returns null otherwise. */
+function inlineImage(r, maxCells) {
+    const proto = imageProtocol();
+    if (!proto)
+        return null;
+    const cols = process.stdout.columns ?? 100;
+    const cells = Math.max(8, Math.min(Math.ceil(r.width / 8), maxCells, cols - 4));
+    return "  " + drawImage(r.png, cells, proto);
+}
+function figureNote(what, caption) {
+    const lines = ["  " + t.pink(`◆ ${what}`) + (caption ? t.dim(` — ${caption}`) : "") + t.dim("  (saved in the lesson's markdown file)")];
+    if (!tipShown) {
+        tipShown = true;
+        lines.push("  " + t.dim("tip: iTerm2, WezTerm, Kitty and Ghostty draw figures inline; elsewhere open the .md file"));
+    }
+    return lines;
+}
+function renderEquation(tex) {
+    try {
+        const img = imageProtocol() ? inlineImage(texToPng(tex, true), 60) : null;
+        if (img)
+            return ["", img, ""];
+        return ["", ...texToLines(tex).map((l) => "    " + t.cyan(l)), ""];
+    }
+    catch {
+        return ["", "    " + t.dim(tex.trim()), ""];
+    }
+}
+function renderFigure(kind, src) {
+    if (kind === "plot") {
+        const p = renderPlot(src);
+        if (!p)
+            return figureNote("plot", "couldn't be drawn");
+        const img = imageProtocol() ? inlineImage(p.raster, 70) : null;
+        if (img)
+            return ["", img, ""];
+        const braille = plotToBraille(parsePlot(src), Math.min(64, (process.stdout.columns ?? 100) - 14), 14, useColor);
+        return braille ? ["", ...braille.map((l) => "  " + l), ""] : figureNote("plot", p.caption);
+    }
+    const svg = sanitizeSvg(src);
+    if (!svg)
+        return figureNote("figure", "couldn't be drawn");
+    const img = imageProtocol() ? inlineImage(svgToPng(svg, 2), 70) : null;
+    return ["", img ?? figureNote("figure", svgCaption(svg)).join("\n"), ""];
+}
+/** Terminal markdown renderer: styling, mermaid, TeX equations, SVG figures and plots. */
 export function renderMd(md) {
     const out = [];
     let fence = null;
-    const inline = (s) => s
+    let buf = [];
+    let math = null;
+    const inline = (s) => mathToText(s)
         .replace(/\*\*(.+?)\*\*/g, (_, x) => t.bold(x))
         .replace(/`([^`]+)`/g, (_, x) => t.cyan(x))
         .replace(/(?<![*\w])\*([^*]+)\*(?!\w)/g, (_, x) => t.italic(x));
     for (const raw of md.split("\n")) {
+        // display math: $$ … $$ (one or many lines) and \[ … \]
+        if (math) {
+            const close = raw.match(/^(.*?)(\$\$|\\\])\s*$/);
+            if (close) {
+                math.push(close[1]);
+                out.push(...renderEquation(math.join("\n")));
+                math = null;
+            }
+            else
+                math.push(raw);
+            continue;
+        }
+        if (fence === null) {
+            const one = raw.match(/^\s*(?:\$\$|\\\[)(.+?)(?:\$\$|\\\])\s*$/);
+            if (one) {
+                out.push(...renderEquation(one[1]));
+                continue;
+            }
+            const open = raw.match(/^\s*(\$\$|\\\[)(.*)$/);
+            if (open) {
+                math = open[2].trim() ? [open[2]] : [];
+                continue;
+            }
+        }
         const fm = raw.match(/^```(\w*)/);
         if (fm) {
             if (fence === null) {
                 fence = fm[1] || "code";
-                if (fence === "mermaid")
-                    out.push("  " + t.pink("◆ diagram ") + t.dim("(rendered in the markdown file)"));
+                buf = [];
             }
-            else
+            else {
+                if (fence === "mermaid") {
+                    const art = renderDiagram(buf.join("\n"));
+                    out.push("", ...(art ? art.split("\n").map((l) => "  " + l) : ["  " + t.pink("◆ diagram ") + t.dim("(too wide for this terminal — open the markdown file)")]), "");
+                }
+                else if (fence === "svg" || fence === "plot")
+                    out.push(...renderFigure(fence, buf.join("\n")));
                 fence = null;
+            }
             continue;
         }
-        if (fence === "mermaid")
+        if (fence === "mermaid" || fence === "svg" || fence === "plot") {
+            buf.push(raw);
             continue;
+        }
         if (fence !== null) {
             out.push("  " + t.dim("│ ") + t.cyan(raw));
             continue;
         }
         const h = raw.match(/^(#{1,4})\s+(.*)/);
         if (h) {
-            out.push("", "  " + (h[1].length <= 2 ? t.bold(t.accent(h[2])) : t.bold(h[2])));
+            out.push("", "  " + (h[1].length <= 2 ? t.bold(t.accent(inline(h[2]))) : t.bold(inline(h[2]))));
             continue;
         }
         const li = raw.match(/^(\s*)[-*]\s+(.*)/);
@@ -97,3 +181,5 @@ export function renderMd(md) {
     }
     return out.join("\n");
 }
+/** Plain-text math for prompts, options and flashcards. */
+export const m = mathToText;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "learn-loops",
-  "version": "0.1.0",
+  "version": "0.4.0",
   "description": "A learning CLI that uses Claude Code / Codex as your tutor",
   "type": "module",
   "bin": {
@@ -19,7 +19,12 @@
   "license": "MIT",
   "dependencies": {
     "@clack/prompts": "^1.8.1",
-    "picocolors": "^1.1.1"
+    "@resvg/resvg-js": "^2.6.2",
+    "beautiful-mermaid": "^1.1.3",
+    "mathjax-full": "^3.2.1",
+    "mathjs": "^15.2.0",
+    "picocolors": "^1.1.1",
+    "unicodeit": "^0.7.5"
   },
   "devDependencies": {
     "@types/node": "^26.6.5",
@@ -39,4 +44,4 @@
     "spaced-repetition",
     "tutor"
   ]
-}
+}