@herbertgao/pi-extensions 2026.9.7 → 2026.9.9

package/node_modules/grok-mermaid/README.md

@@ -0,0 +1,191 @@
+# grok-mermaid
+
+Render Mermaid diagrams as Unicode box-drawing art, for terminals.
+
+A TypeScript port of the terminal Mermaid renderer in
+[xai-org/grok-build](https://github.com/xai-org/grok-build)
+(`crates/codegen/xai-grok-markdown/src/mermaid.rs`). No browser, no headless
+Chrome, no SVG — a self-contained layout engine that emits text.
+
+```
+      ┌──────────────┐
+      │ Parse source │
+      └───────┬──────┘
+              │
+              ▼
+       ╭────────────╮
+       │ Supported? │
+       ╰──────┬─────╯
+      ┌───────┴────────┐
+      ▼yes             ▼no
+ ┌─────────┐   ┌───────────────┐
+ │ Lay out │   │ Framed source │
+ └────┬────┘   └───────┬───────┘
+      └───────┬────────┘
+              ▼
+       ┌─────────────┐
+       │ Unicode art │
+       └─────────────┘
+```
+
+## Install
+
+```sh
+npm install grok-mermaid
+```
+
+## Usage
+
+```ts
+import { render } from 'grok-mermaid'
+
+const art = render('flowchart LR\n  A[Start] --> B[Done]')
+if (art) console.log(art.plain.join('\n'))
+```
+
+`render` draws the diagram at whatever size it needs and reports that as
+`art.width`. It returns `null` when there is no art to show: blank input, a
+syntax error, a diagram type it does not draw, or one large enough that laying
+it out is refused.
+
+### Syntax errors
+
+Rendering is best-effort: a source that does not fully parse still draws what it
+can, and reports the rest in `art.warnings`.
+
+```ts
+// Flowcharts are lenient, as mermaid.js is: the parseable prefix survives.
+render('graph TD\n A[Start --> B')
+// plain     one box labelled `Start --> B` — the edge you wrote is gone
+// warnings  ['node "A": label is missing its closing `]`']
+
+// The rest fail on any unreadable statement, but retry once without the last
+// line — the one a half-finished source ends on.
+render('stateDiagram-v2\n A --> B\n some garbage line')
+// plain     the A --> B transition, drawn
+// warnings  ['dropped, unreadable final line: "some garbage line"']
+```
+
+An empty `warnings` means the whole source made it into the art.
+
+**Warnings are advisory — never gate rendering on them.** The art is the best
+available drawing either way, and a diagram mid-edit warns at nearly every
+intermediate state: a label bracket is unterminated right up until it is typed.
+
+`diagramKind(src)` reads the header alone, separating the two `null`s worth
+different messages:
+
+```ts
+if (render(src) === null) {
+  const kind = diagramKind(src) // 'flowchart' | 'state' | 'class' | 'er' | 'sequence' | null
+  console.log(kind ? `${kind} diagram: syntax error` : 'diagram type not supported here')
+}
+```
+
+### Streaming
+
+Call `render` on each prefix as it arrives — no special handling, no waiting for
+a complete diagram. Best-effort parsing is what keeps it drawn instead of
+alternating with the source box.
+
+<img src="https://raw.githubusercontent.com/xl0/grok-mermaid/master/docs/streaming.gif" width="900" alt="A terminal replaying a stream of Mermaid diagrams — flowcharts and a state machine drawing themselves as box-drawing art, each one growing in place without ever reverting to a block of source text.">
+
+### Fitting a viewport
+
+The renderer takes no width limit. Nothing about a terminal tells it whether a
+wide diagram should be shrunk, scrolled, linked to an image or just printed, so
+the decision stays with you — compare `art.width` against the space you have:
+
+```ts
+import { render, sourceBox } from 'grok-mermaid'
+
+const cols = process.stdout.columns
+const art = render(src)
+if (art && art.width <= cols) console.log(art.plain.join('\n'))
+else {
+  console.log(sourceBox(src, cols).plain.join('\n'))
+  console.log(`(diagram needs ${art?.width ?? '?'} columns)`)
+}
+```
+
+`sourceBox(src, maxWidth?)` frames the source in a titled box, hard-wrapping to
+`maxWidth`. It is the usual thing to show when the art does not fit or does not
+exist, but it is yours to choose and yours to caption.
+
+### Colour
+
+The core is colour-blind. `styled` carries the same rows as `plain`, split into
+runs tagged with a semantic class, so you map classes to your own theme:
+
+<img src="https://raw.githubusercontent.com/xl0/grok-mermaid/master/docs/demo.svg" width="330" alt="A flowchart rendered as Unicode box-drawing art on a dark panel: grey box outlines, white node labels, cyan connectors and arrowheads, grey edge labels.">
+
+That image is real `render()` output painted through one such theme.
+
+```ts
+import { type Cls, render } from 'grok-mermaid'
+
+const art = render(src)!
+
+const theme: Partial<Record<Cls, (s: string) => string>> = {
+  border: dim, text: white, edge: cyan, edgeLabel: gray,
+}
+const out = art.styled.map((row) =>
+  row.map((span) => (theme[span.cls] ?? identity)(span.text)).join(''),
+)
+```
+
+| Class | What it covers |
+| --- | --- |
+| `border` | box outlines, subgraph frames, compartment rules |
+| `text` | node, participant and compartment labels |
+| `edge` | connector lines and arrowheads |
+| `edgeLabel` | text sitting on an edge |
+| `title` | the `mermaid: <kind>` header of a source box |
+| `none` | blank filler |
+
+`styled[i]` joined is always exactly `plain[i]`, so you can swap between them
+freely. A render is plain JSON: cacheable across theme changes, transferable to
+a worker.
+
+For the common case there is a helper:
+
+```ts
+import { render, toAnsi } from 'grok-mermaid'
+
+console.log(toAnsi(render(src)!).join('\n'))
+```
+
+`toAnsi(art, theme)` takes `Partial<Record<Cls, string>>` of SGR parameters
+(`'2'` dim, `'36'` cyan, `'38;5;244'` for 256-colour), defaulting to a dim
+frame with cyan connectors.
+
+## Supported diagrams
+
+| Type | Notes |
+| --- | --- |
+| `graph` / `flowchart` | `TD`/`TB`, `BT`, `LR`, `RL`; `subgraph` nesting; node shapes; solid/dotted/thick links; arrow, circle, cross heads; edge labels |
+| `stateDiagram` / `stateDiagram-v2` | states, transitions, `[*]` start/end, `<<choice>>`, descriptions, composite states flattened |
+| `classDiagram` | compartments, annotations, generics, cardinalities, inheritance/realization/composition/aggregation/dependency |
+| `erDiagram` | entities, attributes, crow's-foot cardinalities |
+| `sequenceDiagram` | participants, messages, self-messages, notes, `loop`/`alt`/`opt` dividers, `autonumber` |
+
+## Credits
+
+Inspired by Simon Willison's
+[grok-mermaid.html](https://tools.simonwillison.net/grok-mermaid)
+([source](https://github.com/simonw/tools/blob/main/grok-mermaid.html)), which
+compiles the original Rust renderer to WebAssembly so it runs in a browser.
+That demo is what made the renderer worth having outside the Grok CLI; this
+port takes the other route and reimplements it in TypeScript, so it needs no
+WASM and runs anywhere JS does.
+
+100% of the code written by Opus 5, with a healthy dose of feedback and direction from my side.
+
+## License
+
+Apache-2.0. See [LICENSE](LICENSE).
+
+The Rust original in [xai-org/grok-build](https://github.com/xai-org/grok-build)
+(`crates/codegen/xai-grok-markdown/src/mermaid.rs`) is Apache-2.0, Copyright
+2023-2026 SpaceXAI. Its layout algorithms, glyph tables, parser behaviour and
+test corpus are what this port is derived from.

package/node_modules/grok-mermaid/dist/ansi.d.ts

@@ -0,0 +1,16 @@
+import type { Cls, MermaidArt } from './types.ts';
+/**
+ * SGR parameter per semantic class, e.g. `'2'` for dim, `'36'` for cyan,
+ * `'38;5;244'` for a 256-colour index. A class left out is printed unstyled.
+ */
+export type AnsiTheme = Partial<Record<Cls, string>>;
+/** Dim frame, plain labels, cyan connectors. Readable on light and dark. */
+export declare const DEFAULT_THEME: AnsiTheme;
+/**
+ * Render art to ANSI-coloured lines.
+ *
+ * A convenience over mapping `art.styled` yourself — reach for that directly
+ * when your TUI has its own styling model.
+ */
+export declare function toAnsi(art: MermaidArt, theme?: AnsiTheme): string[];
+//# sourceMappingURL=ansi.d.ts.map

package/node_modules/grok-mermaid/dist/ansi.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ansi.d.ts","sourceRoot":"","sources":["../src/ansi.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAIjD;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAA;AAEpD,4EAA4E;AAC5E,eAAO,MAAM,aAAa,EAAE,SAK3B,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,GAAE,SAAyB,GAAG,MAAM,EAAE,CASlF"}

package/node_modules/grok-mermaid/dist/ansi.js

@@ -0,0 +1,23 @@
+const ESC = String.fromCharCode(27);
+/** Dim frame, plain labels, cyan connectors. Readable on light and dark. */
+export const DEFAULT_THEME = {
+    border: '2',
+    edge: '36',
+    edgeLabel: '2;36',
+    title: '1',
+};
+/**
+ * Render art to ANSI-coloured lines.
+ *
+ * A convenience over mapping `art.styled` yourself — reach for that directly
+ * when your TUI has its own styling model.
+ */
+export function toAnsi(art, theme = DEFAULT_THEME) {
+    return art.styled.map((row) => row
+        .map((span) => {
+        const sgr = theme[span.cls];
+        return sgr === undefined ? span.text : `${ESC}[${sgr}m${span.text}${ESC}[0m`;
+    })
+        .join(''));
+}
+//# sourceMappingURL=ansi.js.map

package/node_modules/grok-mermaid/dist/ansi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ansi.js","sourceRoot":"","sources":["../src/ansi.ts"],"names":[],"mappings":"AAEA,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA;AAQnC,4EAA4E;AAC5E,MAAM,CAAC,MAAM,aAAa,GAAc;IACtC,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,IAAI;IACV,SAAS,EAAE,MAAM;IACjB,KAAK,EAAE,GAAG;CACX,CAAA;AAED;;;;;GAKG;AACH,MAAM,UAAU,MAAM,CAAC,GAAe,EAAE,KAAK,GAAc,aAAa;IACtE,OAAO,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAC5B,GAAG;SACA,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;QACZ,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;QAC3B,OAAO,GAAG,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,GAAG,GAAG,KAAK,CAAA;IAC9E,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CACZ,CAAA;AACH,CAAC"}

package/node_modules/grok-mermaid/dist/canvas.d.ts

@@ -0,0 +1,87 @@
+import type { Cls, Span } from './types.ts';
+/**
+ * Sentinel occupying the trailing column of a wide glyph. Never emitted: the
+ * line builder skips it so a CJK character claims two cells of layout but
+ * contributes one character of output.
+ */
+export declare const CONT: string;
+/** Connection direction bits, combined into a box-drawing glyph by `maskChar`. */
+export declare const U = 1;
+export declare const D = 2;
+export declare const L = 4;
+export declare const R = 8;
+/** Line styles, tracked per cell so crossing edges keep their own stroke. */
+export declare const STY_DOT = 1;
+export declare const STY_THICK = 2;
+export declare const STY_SOLID = 4;
+/**
+ * A grid of cells. Edges accumulate as direction bits rather than glyphs so
+ * that crossings and junctions resolve correctly whatever order they are drawn
+ * in; `finalizeMask` turns the accumulated bits into characters at the end.
+ *
+ * `occupied` marks cells claimed by a box, which edge bits must not overwrite.
+ */
+export declare class Canvas {
+    readonly w: number;
+    readonly h: number;
+    ch: string[];
+    cls: Cls[];
+    mask: Uint8Array;
+    style: Uint8Array;
+    occupied: Uint8Array;
+    curStyle: number;
+    constructor(w: number, h: number);
+    idx(x: number, y: number): number;
+    set(x: number, y: number, c: string, cls: Cls): void;
+    /**
+     * Accumulate direction bits on a free cell.
+     *
+     * `cls` is the class to claim the cell for; `border` cells are never
+     * reclassified, so a connector meeting a box keeps the box's styling.
+     */
+    addBits(x: number, y: number, bits: number, cls?: Cls): void;
+    /** Stamp a finished sub-canvas (a subgraph frame's contents) at an offset. */
+    blit(sub: Canvas, ox: number, oy: number): void;
+    /** Add direction bits even to an occupied cell, so an edge can meet a border. */
+    junction(x: number, y: number, bits: number): void;
+    segV(x: number, y0: number, y1: number): void;
+    segH(y: number, x0: number, x1: number): void;
+    /** Resolve accumulated direction bits into glyphs, honouring line style. */
+    finalizeMask(): void;
+    /**
+     * Mirror top-to-bottom for `BT`. Rows reorder but within-row text does not,
+     * so labels stay readable; box-drawing glyphs flip to match.
+     */
+    flipVertical(): void;
+    /**
+     * Mirror left-to-right for `RL`. Mirroring reverses each row, so after
+     * flipping glyphs each text/label run is reversed back to reading order.
+     */
+    flipHorizontal(): void;
+    /** Group each row into runs of one class, dropping wide-glyph continuations. */
+    toLines(): {
+        plain: string[];
+        styled: Span[][];
+        width: number;
+    };
+}
+/**
+ * Paint `text` at `x, y`, one grapheme cluster per cell.
+ *
+ * A wide cluster claims a second cell, marked with `CONT` so the line builder
+ * emits one character for it rather than a stray space.
+ */
+export declare function drawText(canvas: Canvas, text: string, x: number, y: number, cls: Cls): void;
+/**
+ * Paint `text` at `x, y`, clearing any edge bits underneath first.
+ *
+ * Used where text sits on top of a drawn line (sequence messages, dividers,
+ * compartment rows) and must win over it.
+ */
+export declare function drawTextOverEdges(canvas: Canvas, text: string, x: number, y: number, cls: Cls): void;
+export declare function maskChar(mask: number): string;
+export declare const dottedChar: (c: string) => string;
+export declare const thickChar: (c: string) => string;
+export declare const flipGlyphV: (c: string) => string;
+export declare const flipGlyphH: (c: string) => string;
+//# sourceMappingURL=canvas.d.ts.map

package/node_modules/grok-mermaid/dist/canvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../src/canvas.ts"],"names":[],"mappings":"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"}