@giovannijecha/jecode 0.1.5-rc.2

package/dist/ui/inline.js

@@ -0,0 +1,39 @@
+// Inline Markdown notation: the marks inside a line, spent on style.
+//
+// Its own module because two things need it — a paragraph and a table cell —
+// and neither should have to import the other to get it.
+const INLINE = /`([^`]+)`|\*\*([^*]+)\*\*|__([^_]+)__|\*([^*\s][^*]*)\*|\[([^\]]+)\]\(([^)]+)\)/g;
+/**
+ * Inline notation to styled segments.
+ *
+ * Emphasis becomes weight and colour rather than a slant, and a link keeps its
+ * label and drops its target: a URL spelled out mid-sentence costs more rows
+ * than it earns, and the label is what the sentence was written around.
+ */
+export function inline(text, base, pal, bold = false) {
+    const { ink } = pal;
+    const segs = [];
+    let last = 0;
+    INLINE.lastIndex = 0;
+    for (let match = INLINE.exec(text); match !== null; match = INLINE.exec(text)) {
+        if (match.index > last) {
+            segs.push({ text: text.slice(last, match.index), fg: base, bold: bold || undefined });
+        }
+        const [, mono, strong, strongAlt, emphasis, label] = match;
+        if (mono !== undefined)
+            segs.push({ text: mono, fg: pal.accentSoft });
+        else if (strong !== undefined)
+            segs.push({ text: strong, fg: ink.bright, bold: true });
+        else if (strongAlt !== undefined)
+            segs.push({ text: strongAlt, fg: ink.bright, bold: true });
+        else if (emphasis !== undefined)
+            segs.push({ text: emphasis, fg: ink.bright });
+        else if (label !== undefined)
+            segs.push({ text: label, fg: pal.accent });
+        last = match.index + match[0].length;
+    }
+    if (last < text.length) {
+        segs.push({ text: text.slice(last), fg: base, bold: bold || undefined });
+    }
+    return segs.length === 0 ? [{ text: "", fg: base }] : segs;
+}

package/dist/ui/markdown.js

@@ -0,0 +1,147 @@
+// Drawing the model's prose, which is Markdown whether or not we asked for it.
+//
+// Printing it raw is the single loudest way a terminal agent looks unfinished:
+// the reader gets asterisks around the emphasis and backticks around the code,
+// which is the notation, not the meaning. So the notation is consumed here and
+// spent on weight and colour instead.
+//
+// Two rules keep this honest. It renders what a terminal can actually draw —
+// emphasis is weight and colour, never a slant, because a slant many terminals
+// drop leaves prose whose marks are already gone. And it is written to be fed
+// a *prefix*: text arrives a token at a time, so an unterminated fence is a
+// code block still being written, not a parse error.
+import { flow } from "./render.js";
+import { highlight } from "./highlight.js";
+import { elide } from "./width.js";
+import { inline } from "./inline.js";
+import * as table from "./table.js";
+const FENCE = /^\s*(?:```|~~~)(.*)$/;
+const HEADING = /^(#{1,6})\s+(.*)$/;
+const BULLET = /^(\s*)[-*+]\s+(.*)$/;
+const ORDERED = /^(\s*)(\d{1,3})[.)]\s+(.*)$/;
+const QUOTE = /^\s*>\s?(.*)$/;
+const HR = /^\s*(?:-{3,}|\*{3,}|_{3,})\s*$/;
+export function markdown(text, max, pal, proseMax = max) {
+    const { ink } = pal;
+    const prose = Math.min(max, proseMax);
+    const rows = [];
+    const lines = text.split("\n");
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const fence = FENCE.exec(line);
+        if (fence !== null) {
+            i = code(lines, i, max, pal, rows);
+            continue;
+        }
+        if (line.trim() === "") {
+            rows.push({ segs: [] });
+            continue;
+        }
+        if (table.opens(line, lines[i + 1])) {
+            const read = table.parse(lines, i);
+            rows.push(...table.draw(read.table, max, pal));
+            i = read.end;
+            continue;
+        }
+        if (HR.test(line)) {
+            rows.push({ segs: [{ text: "─".repeat(Math.min(max, 80)), fg: pal.rule }] });
+            continue;
+        }
+        const heading = HEADING.exec(line);
+        if (heading !== null) {
+            rows.push(...emit(inline(heading[2], ink.bright, pal, true), prose, []));
+            continue;
+        }
+        const quote = QUOTE.exec(line);
+        if (quote !== null) {
+            const bar = [{ text: "│ ", fg: pal.rule }];
+            rows.push(...emit(inline(quote[1], ink.muted, pal), prose - 2, bar, bar));
+            continue;
+        }
+        const bullet = BULLET.exec(line);
+        if (bullet !== null) {
+            const depth = Math.min(2, Math.floor(bullet[1].length / 2));
+            const mark = [
+                { text: "  ".repeat(depth) },
+                { text: "- ", fg: pal.accent },
+            ];
+            const hang = [{ text: `${"  ".repeat(depth)}  ` }];
+            rows.push(...emit(inline(bullet[2], ink.fg, pal), prose - depth * 2 - 2, mark, hang));
+            continue;
+        }
+        const ordered = ORDERED.exec(line);
+        if (ordered !== null) {
+            const label = `${ordered[2]}. `;
+            const mark = [{ text: label, fg: pal.accent }];
+            const hang = [{ text: " ".repeat(label.length) }];
+            rows.push(...emit(inline(ordered[3], ink.fg, pal), prose - label.length, mark, hang));
+            continue;
+        }
+        // A paragraph is its lines joined, not one row each. The model hard-wraps
+        // its prose at some width of its own, and honouring those breaks would
+        // wrap already-wrapped text — the ragged half-rows that gives is the
+        // clearest tell that nobody parsed the Markdown.
+        const paragraph = [line];
+        while (i + 1 < lines.length &&
+            plain(lines[i + 1]) &&
+            !table.opens(lines[i + 1], lines[i + 2])) {
+            paragraph.push(lines[++i].trim());
+        }
+        rows.push(...emit(inline(paragraph.join(" "), ink.fg, pal), prose, []));
+    }
+    return rows;
+}
+/** Whether a line continues a paragraph rather than starting something. */
+function plain(line) {
+    if (line.trim() === "")
+        return false;
+    return (!FENCE.test(line) &&
+        !HR.test(line) &&
+        !HEADING.test(line) &&
+        !QUOTE.test(line) &&
+        !BULLET.test(line) &&
+        !ORDERED.test(line));
+}
+/**
+ * A fenced block with muted transcript delimiters, never wrapped.
+ *
+ * Code that wraps stops being code — an indent that moved is a different
+ * program. A line too wide keeps both ends and marks the middle instead.
+ */
+function code(lines, start, max, pal, out) {
+    const { ink } = pal;
+    const open = FENCE.exec(lines[start]);
+    const lang = (open?.[1] ?? "").trim();
+    let i = start + 1;
+    const body = [];
+    for (; i < lines.length; i++) {
+        const line = lines[i];
+        if (FENCE.test(line))
+            break;
+        body.push(elide(line.replace(/\t/g, "  "), max - 2));
+    }
+    out.push({ segs: [{ text: `\`\`\`${lang}`, fg: ink.muted }] });
+    const roles = {
+        plain: ink.added,
+        comment: ink.muted,
+        string: ink.added,
+        number: ink.attention,
+        keyword: pal.accent,
+    };
+    for (const tokens of highlight(body, lang)) {
+        out.push({
+            segs: [
+                { text: "  " },
+                ...tokens.map((token) => ({ text: token.text, fg: roles[token.role] })),
+            ],
+        });
+    }
+    out.push({ segs: [{ text: "```", fg: ink.muted }] });
+    return i;
+}
+/** Flow one inline run into rows, with an opener and a hanging indent. */
+function emit(segs, max, opener, hang = []) {
+    return flow(segs, Math.max(8, max), hang).map((line, index) => ({
+        segs: index === 0 ? [...opener, ...line] : line,
+    }));
+}

package/dist/ui/render.js

@@ -0,0 +1,232 @@
+// Composing a terminal row out of styled segments. Pure: every function here
+// returns a string or rows of segments, none of them write anywhere.
+import { terminalText } from "./terminal-text.js";
+import { elide, textWidth, wrapText } from "./width.js";
+// Built rather than written literally: a raw escape byte in the source is
+// invisible in a diff and in a code review, which is how they survive.
+const ESC = String.fromCharCode(27);
+export const CSI = `${ESC}[`;
+const RESET = `${CSI}0m`;
+const BOLD = `${CSI}1m`;
+const ITALIC = `${CSI}3m`;
+const INVERSE = `${CSI}7m`;
+// Truecolor is assumed wherever colour is wanted at all — every terminal that
+// has shipped this decade has it. The fallback that matters is "no colour",
+// which is what a pipe and NO_COLOR both get.
+const terminalColor = process.stdout.isTTY === true &&
+    process.env["NO_COLOR"] === undefined &&
+    process.env["TERM"] !== "dumb";
+let colorEnabled = terminalColor;
+export function configureColor(enabled) {
+    colorEnabled = terminalColor && enabled;
+}
+export function paint(seg) {
+    const text = terminalText(seg.text);
+    if (!colorEnabled)
+        return text;
+    let out = "";
+    if (seg.bold === true)
+        out += BOLD;
+    if (seg.italic === true)
+        out += ITALIC;
+    if (seg.inverse === true)
+        out += INVERSE;
+    if (seg.fg !== undefined)
+        out += `${CSI}38;2;${seg.fg[0]};${seg.fg[1]};${seg.fg[2]}m`;
+    if (seg.bg !== undefined)
+        out += `${CSI}48;2;${seg.bg[0]};${seg.bg[1]};${seg.bg[2]}m`;
+    return out === "" ? text : `${out}${text}${RESET}`;
+}
+/** Cells the segments take on screen — never their character count. */
+export function plainLen(segs) {
+    return segs.reduce((n, seg) => n + textWidth(terminalText(seg.text)), 0);
+}
+export function columns() {
+    const width = process.stdout.columns;
+    return typeof width === "number" && width >= 40 ? width : 80;
+}
+/**
+ * The margin every row keeps from the edges of the terminal: none.
+ *
+ * A window is as wide as its owner made it, and the content column is the whole
+ * of it. Everything then shares one left edge and one right edge — prose, the
+ * ground behind a message, the rules around the composer, the
+ * footer — so nothing on screen is wider than the text inside it. It stays a
+ * constant because it is a decision, not an assumption: one number moves the
+ * whole grid inwards if it ever needs to.
+ */
+export const PAD = 0;
+/** Keep what fits in `cols`, marking the segment that had to give way. */
+export function fitSegs(segs, cols) {
+    const out = [];
+    let used = 0;
+    for (const seg of segs) {
+        const safe = { ...seg, text: terminalText(seg.text) };
+        const w = textWidth(safe.text);
+        if (used + w <= cols) {
+            out.push(safe);
+            used += w;
+            continue;
+        }
+        const room = cols - used;
+        if (room > 0)
+            out.push({ ...safe, text: elide(safe.text, room) });
+        break;
+    }
+    return out;
+}
+/**
+ * One row: left segments, a gap, right segments, optionally on a ground.
+ *
+ * The left column is the one that gives way when the two do not both fit —
+ * the right column is a summary, and a summary that moves is worse than none.
+ * A row with neither a ground nor a right column is left ragged rather than
+ * padded: trailing spaces are invisible on screen but not in a paste buffer.
+ */
+export function row(width, left, right = [], ground, padX = PAD) {
+    const inner = Math.max(0, width - padX * 2);
+    const rightW = plainLen(right);
+    const gutter = right.length > 0 ? 1 : 0;
+    const fitted = fitSegs(left, Math.max(0, inner - rightW - gutter));
+    // An empty pad is no pad at all: a zero-width segment still costs a pair of
+    // escape sequences on every row of every frame.
+    const lead = padX === 0 ? [] : [{ text: " ".repeat(padX), bg: ground }];
+    if (ground === undefined && right.length === 0) {
+        // Nothing to draw is an empty row, not an indent: leading spaces are
+        // invisible on screen and very visible in a paste buffer.
+        if (plainLen(fitted) === 0)
+            return "";
+        return [...lead, ...fitted].map(paint).join("");
+    }
+    const gap = Math.max(gutter, inner - plainLen(fitted) - rightW);
+    return [
+        ...lead,
+        ...fitted.map((seg) => ({ ...seg, bg: seg.bg ?? ground })),
+        { text: " ".repeat(gap), bg: ground },
+        ...right.map((seg) => ({ ...seg, bg: seg.bg ?? ground })),
+        ...lead,
+    ]
+        .map(paint)
+        .join("");
+}
+export function blank(width, ground) {
+    return paint({ text: " ".repeat(width), bg: ground });
+}
+/**
+ * A full-width divider.
+ *
+ * Edge to edge, because the other thing that spans a whole row is the ground
+ * behind a user's message: two elements that stop at different columns read as
+ * two grids, and the eye finds the discrepancy before it finds the text.
+ */
+export function rule(width, color) {
+    return paint({ text: "─".repeat(Math.max(0, width)), fg: color });
+}
+export function wrap(text, max, continuation = "") {
+    return wrapText(terminalText(text, { multiline: true }), max, continuation);
+}
+/**
+ * Word wrap that survives styling: segments flow across rows, and a row breaks
+ * between words rather than between a word and its colour.
+ *
+ * `continuation` opens every row after the first, which is what gives a list
+ * item a hanging indent instead of a second bullet.
+ */
+export function flow(segs, max, continuation = []) {
+    const lead = plainLen(continuation);
+    const toks = [];
+    for (const seg of segs) {
+        const safe = { ...seg, text: terminalText(seg.text, { multiline: true }) };
+        for (const piece of safe.text.split(/(\s+)/)) {
+            if (piece === "")
+                continue;
+            if (piece.includes("\n"))
+                toks.push({ seg: safe, text: piece, kind: "break" });
+            // A space that paints a background is not whitespace, it is the edge of
+            // a semantic surface and must not collapse into its neighbour.
+            else if (/^\s+$/.test(piece)) {
+                toks.push({ seg: safe, text: piece, kind: safe.bg === undefined ? "space" : "word" });
+            }
+            else
+                toks.push({ seg: safe, text: piece, kind: "word" });
+        }
+    }
+    const rows = [];
+    let current = [];
+    let used = 0;
+    let pending;
+    const room = () => Math.max(1, max - (rows.length === 0 ? 0 : lead));
+    const add = (tok) => {
+        const last = current[current.length - 1];
+        if (last !== undefined && sameStyle(last, tok.seg))
+            last.text += tok.text;
+        else
+            current.push({ ...tok.seg, text: tok.text });
+        used += textWidth(tok.text);
+    };
+    const flush = () => {
+        rows.push(rows.length === 0 ? current : [...continuation.map(copy), ...current]);
+        current = [];
+        used = 0;
+        pending = undefined;
+    };
+    for (const tok of toks) {
+        if (tok.kind === "break") {
+            flush();
+            continue;
+        }
+        if (tok.kind === "space") {
+            if (current.length > 0)
+                pending = tok;
+            continue;
+        }
+        const space = pending === undefined ? 0 : textWidth(pending.text);
+        let word = tok.text;
+        if (used + space + textWidth(word) > room() && current.length > 0)
+            flush();
+        else if (pending !== undefined) {
+            add(pending);
+            pending = undefined;
+        }
+        // A word wider than any row is spent across rows: with autowrap off, what
+        // overflows is not ugly, it is gone.
+        while (textWidth(word) > room() - used) {
+            const head = clipTo(word, room() - used);
+            if (head === "")
+                break;
+            add({ ...tok, text: head });
+            word = word.slice(head.length);
+            flush();
+        }
+        if (word !== "")
+            add({ ...tok, text: word });
+    }
+    if (current.length > 0 || rows.length === 0)
+        flush();
+    return rows;
+}
+function clipTo(text, cols) {
+    let out = "";
+    for (const char of text) {
+        if (textWidth(out + char) > cols)
+            break;
+        out += char;
+    }
+    return out;
+}
+function copy(seg) {
+    return { ...seg };
+}
+function sameStyle(a, b) {
+    return (a.fg === b.fg &&
+        a.bg === b.bg &&
+        a.bold === b.bold &&
+        a.italic === b.italic &&
+        a.inverse === b.inverse);
+}
+/** One-line preview of a value, for echoing tool arguments back to the user. */
+export function preview(value, max = 120) {
+    const text = typeof value === "string" ? value : JSON.stringify(value);
+    const flat = (text ?? "").replace(/\s+/g, " ").trim();
+    return elide(terminalText(flat), max);
+}

package/dist/ui/table.js

@@ -0,0 +1,127 @@
+// Markdown tables, drawn as a table rather than printed as pipes.
+//
+// A table is the one Markdown construct whose meaning is its geometry: the
+// columns *are* the information. Left as source it is the worst thing on the
+// screen — a wall of `|` where the eye has to do the aligning by hand.
+//
+// Two decisions shape the drawing. Columns are measured in cells, never in
+// characters, so a table of Japanese or emoji lines up like a table of ASCII.
+// And there are no vertical rules: a column of `│` down every gap is four more
+// glyphs per row earning nothing that whitespace and one horizontal rule under
+// the header do not already earn.
+import { fitSegs, plainLen } from "./render.js";
+import { inline } from "./inline.js";
+/** Cells between the gaps. Two spaces reads as a column break; one does not. */
+const GAP = 2;
+/** Narrowest a column may be squeezed to before the text stops being readable. */
+const MIN = 4;
+const DELIMITER = /^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/;
+/**
+ * Whether a line opens a table.
+ *
+ * A table is only a table once its delimiter has arrived — which matters,
+ * because text streams in. A header row on its own is a paragraph that happens
+ * to contain pipes, and it is drawn as one until the next line proves otherwise.
+ */
+export function opens(line, next) {
+    return line.includes("|") && next !== undefined && DELIMITER.test(next);
+}
+/** Read the table starting at `start`, and say which line it ended on. */
+export function parse(lines, start) {
+    const head = cells(lines[start]);
+    const align = lines[start + 1]
+        .split("|")
+        .map((cell) => cell.trim())
+        .filter((cell) => cell !== "")
+        .map(alignOf);
+    const body = [];
+    let i = start + 2;
+    for (; i < lines.length; i++) {
+        const line = lines[i];
+        if (!line.includes("|") || line.trim() === "")
+            break;
+        body.push(cells(line));
+    }
+    return { table: { head, body, align }, end: i - 1 };
+}
+function cells(line) {
+    const parts = line.split("|").map((cell) => cell.trim());
+    // A row may or may not be fenced by outer pipes; both spellings are legal,
+    // and the difference is two empty cells nobody wrote.
+    if (parts[0] === "")
+        parts.shift();
+    if (parts.length > 0 && parts[parts.length - 1] === "")
+        parts.pop();
+    return parts;
+}
+function alignOf(spec) {
+    const left = spec.startsWith(":");
+    const right = spec.endsWith(":");
+    if (left && right)
+        return "center";
+    return right ? "right" : "left";
+}
+export function draw(table, max, pal) {
+    const { ink } = pal;
+    const count = Math.max(table.head.length, ...table.body.map((r) => r.length), 1);
+    const widths = fit(natural(table, count, pal), max);
+    const head = {
+        segs: laid(table.head, widths, table, pal, ink.bright, true),
+    };
+    const under = {
+        segs: [{ text: widths.map((w) => "─".repeat(w)).join(" ".repeat(GAP)), fg: pal.rule }],
+    };
+    const body = table.body.map((cells) => ({
+        segs: laid(cells, widths, table, pal, ink.fg, false),
+    }));
+    return [head, under, ...body];
+}
+/** How wide each column would like to be: its widest cell. */
+function natural(table, count, pal) {
+    const widths = Array.from({ length: count }, () => 0);
+    for (const cells of [table.head, ...table.body]) {
+        cells.forEach((cell, i) => {
+            if (i < count)
+                widths[i] = Math.max(widths[i], plainLen(inline(cell, pal.ink.fg, pal)));
+        });
+    }
+    return widths;
+}
+/**
+ * Squeeze the columns into the room there is, widest first.
+ *
+ * Taking a cell off the widest column each pass is what keeps a table of one
+ * long prose column and three short numeric ones readable: the prose gives way,
+ * and the numbers — which cannot be elided without becoming wrong — do not.
+ */
+function fit(widths, max) {
+    const out = [...widths];
+    const gaps = GAP * (out.length - 1);
+    let total = out.reduce((n, w) => n + w, 0) + gaps;
+    while (total > max) {
+        const widest = out.reduce((best, w, i) => (w > out[best] ? i : best), 0);
+        if (out[widest] <= MIN)
+            break;
+        out[widest] = out[widest] - 1;
+        total--;
+    }
+    return out;
+}
+/** One row's cells clipped to their columns and padded to their alignment. */
+function laid(cells, widths, table, pal, base, bold) {
+    const segs = [];
+    widths.forEach((width, i) => {
+        if (i > 0)
+            segs.push({ text: " ".repeat(GAP) });
+        const content = fitSegs(inline(cells[i] ?? "", base, pal, bold), width);
+        const slack = Math.max(0, width - plainLen(content));
+        const align = table.align[i] ?? "left";
+        const before = align === "right" ? slack : align === "center" ? Math.floor(slack / 2) : 0;
+        if (before > 0)
+            segs.push({ text: " ".repeat(before) });
+        segs.push(...content);
+        if (slack - before > 0)
+            segs.push({ text: " ".repeat(slack - before) });
+    });
+    return segs;
+}

package/dist/ui/terminal-text.js

@@ -0,0 +1,42 @@
+// Text that is safe to hand to a terminal.
+//
+// Styling escapes are owned by the renderer. Everything coming from a model,
+// tool, filename, error, or paste is data, so control characters are made
+// visible before layout as well as before paint. This keeps terminal state and
+// cell measurement in agreement.
+const CONTROL_PICTURE = 0x2400;
+const DELETE_PICTURE = String.fromCodePoint(0x2421);
+const TAB = "  ";
+export function terminalText(text, options = {}) {
+    let safe = "";
+    for (const char of text) {
+        const code = char.codePointAt(0);
+        if (code === undefined)
+            continue;
+        if (code === 0x0a && options.multiline === true) {
+            safe += "\n";
+        }
+        else if (code === 0x09) {
+            safe += TAB;
+        }
+        else if (code <= 0x1f) {
+            safe += String.fromCodePoint(CONTROL_PICTURE + code);
+        }
+        else if (code === 0x7f) {
+            safe += DELETE_PICTURE;
+        }
+        else if (code >= 0x80 && code <= 0x9f) {
+            safe += `\\u${code.toString(16).padStart(4, "0")}`;
+        }
+        else if (isBidiControl(code)) {
+            safe += `\\u${code.toString(16).padStart(4, "0")}`;
+        }
+        else {
+            safe += char;
+        }
+    }
+    return safe;
+}
+function isBidiControl(code) {
+    return (code >= 0x202a && code <= 0x202e) || (code >= 0x2066 && code <= 0x2069);
+}

package/dist/ui/theme.js

@@ -0,0 +1,25 @@
+// Jecode's fixed terminal identity. Components depend on semantic tokens, not
+// literal colours, while the product exposes one deliberate dark Steel look.
+// Jecode's fixed dark Steel baseline. Components depend on these semantic
+// roles rather than embedding presentation values of their own.
+export const STEEL = {
+    accent: [138, 190, 183],
+    accentSoft: [0, 215, 255],
+    focus: [95, 135, 255],
+    rule: [80, 80, 80],
+    ink: {
+        fg: [212, 212, 212],
+        bright: [212, 212, 212],
+        muted: [128, 128, 128],
+        attention: [255, 255, 0],
+        added: [181, 189, 104],
+        removed: [204, 102, 102],
+    },
+    surface: {
+        subtle: [52, 53, 65],
+        inset: [40, 40, 50],
+        added: [40, 50, 40],
+        removed: [60, 40, 40],
+        attention: [58, 58, 74],
+    },
+};