@fyeeme/pi-mermaid-viewer 1.0.0 → 1.0.2

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 ## [Unreleased]
 
+## [1.0.2] - 2026-10-02
+
+### Changed
+
+- Dev toolchain pinned to `@earendil-works/pi-coding-agent` 1.0.0 (peer floors unchanged, `>=0.99.0`); typecheck and tests pass against 1.0.0 unchanged.
+
+## [1.0.1] - 2026-10-01
+
+### Changed
+
+- Peer dependency floor raised to `@earendil-works/pi-coding-agent >= 0.99.0`; dev toolchain pinned to 0.99.2 (typecheck and tests pass against 0.99.2 unchanged).
+
+
+## [1.0.0] - 2026-06-15
+
 ### Fixed
 - **Format-switcher menu was invisible.** The `.dl-split` container had `overflow:hidden` (for rounded corners), which clipped the absolutely-positioned `.dl-pop` format menu — it existed in the DOM but was neither visible nor clickable (`elementFromPoint` hit the canvas behind it). Removed `overflow:hidden` and moved the rounding to the individual buttons. SVG/PNG export itself was unaffected.
 - **PNG export silently failed** (download never triggered). Root cause: the `EMOJI_RE` regex was authored inline inside the `renderHtml` template literal, whose backslash-eating corrupted `/[\p{Emoji...}]/gu` into `/[p{Emoji...}]/gu`. As a character class that matches the literal letters p/E/m/o/j/i/..., it stripped ~45% of every exported SVG, so the `<img>` used to rasterize failed to load (`onerror`), `img.onload` never fired, and PNG export hung forever. SVG export was unaffected (it serves the blob directly). Fixed by authoring the regex source at module scope and injecting it, like `quoteBareLabels`.
@@ -24,3 +39,4 @@
 - Emoji support: emoji are now preserved and rendered natively (previously stripped). Verified with Mermaid v11 + `securityLevel: "loose"` + `htmlLabels: true`. Emoji are kept on screen but stripped from SVG/PNG exports for portability.
 - Multi-diagram navigation when conversation contains multiple blocks.
 - Unit tests for the redesign in `test/mermaid-viewer.test.ts` (vitest, 98 cases): `quoteBareLabels` healing/idempotency + the regression that motivated try-first, the `toString()` template-injection invariant (guards the backslash-eating gotcha), and `renderHtml` output validity (`node --check` on the generated `<script>`, healer injected, no stale `sanitize`/`d.fixes`). Added `"test": "vitest --run"` script.
+- **Edge labels are now auto-quoted.** The healer previously covered only node labels and skipped edge labels entirely (the suite even asserted `// Edge labels are untouched`), so a link like `A -->|@HttpExchange| B` failed with `Parse error ... got 'LINK_ID'` and no fix was attempted. `quoteBareLabels` now heals all three Mermaid edge-label forms — pipe `|text|`, dotted `-. text .->`, and dash `-- text -->` / `-- text ---` — quoting any bare label containing a special char (`@`, `/`, `()`, …). Labels are stashed behind placeholders before the node-shape pass, so `|foo(x)|` is never mistaken for a node `foo(x)`. Added 13 edge-label cases + 3 `toString()` re-eval cases (111 tests total).

package/README.md

@@ -2,6 +2,20 @@
 
 Render Mermaid diagrams found in the conversation as an HTML page opened in the default browser.
 
+### 与 pi 0.84.0 内置 TUI mermaid 的区别
+
+pi 0.84.0 起内置在终端内（TUI）渲染 Mermaid（`markdown.mermaid` 设置，默认 `streaming`）——适合**终端内速览**。本扩展与之**不是替代关系**，而是互补：
+
+| | 本扩展（pi-mermaid-viewer） | pi 内置 TUI mermaid |
+|---|---|---|
+| 查看方式 | 浏览器打开 HTML 页面 | 终端内联预览 |
+| 导出 | PNG / SVG 下载 | 无 |
+| 多图 | 多图 tab 导航 | 逐块内联 |
+| 解析失败 | try-first 修复器（仅当 Mermaid 解析失败时自动引号修复裸标签） | 直接显示解析错误 |
+| 适用场景 | 需要检查/导出/分享图时 | 对话中快速扫一眼 |
+
+两者可以共存：内置预览用于日常速览，需要细看或导出时再跑 `/mermaid`。
+
 ## Install
 
 Requires the [pi](https://pi.dev) CLI.

package/index.ts

@@ -55,6 +55,25 @@ export function quoteBareLabels(code: string): { code: string; fixes: string[] }
   // One alternation per node; longer wrappers first so ((...)) beats (...).
   const SHAPE_RE = /(\w+)(?:\(\(\(([^)]*)\)\)\)|\(\(([^)]*)\)\)|\{\{([^}]*)\}\}|\[\[([^\]]*)\]\]|\[\(([^)]*)\)\]|\[\/([^/]*)\/\]|\{([^}]*)\}|\(([^)]*)\)|\[([^\]]*)\])/g;
 
+  // Edge-label syntaxes Mermaid accepts on a link. Text inside any of these
+  // must be quoted when it contains a special char, or the parser rejects it
+  // (the "got 'LINK_ID'" / "got 'TEXT'" parse errors). Pipe is the canonical
+  // form; dotted and dash are the inline-text forms. All three are protected
+  // from the node pass below via placeholders, so a label like |foo(x)| is
+  // never mistaken for a node shape `foo(x)`.
+  const PIPE_RE = /\|([^|\n]*)\|/g;                       // |text|
+  const DOTTED_RE = /(-\.)\s+([^\n]*?)\s+(\.-?>)/g;       // -. text .->
+  const DASH_RE = /(--)\s+([^\n]*?)\s+(-->|---)/g;        // -- text --> / ---
+
+  // Quote a bare edge-label text if it contains a special char. Already
+  // quoted labels are left untouched.
+  const healEdgeText = (text: string): { out: string; changed: boolean } => {
+    const trimmed = text.trim();
+    if (trimmed.charAt(0) === '"' && trimmed.slice(-1) === '"') return { out: text, changed: false };
+    if (!SPECIAL.test(text)) return { out: text, changed: false };
+    return { out: '"' + text.replace(/^"+|"+$/g, "").trim() + '"', changed: true };
+  };
+
   const fixed = code.split("\n").map((line) => {
     // Subgraph: only heal a genuinely BARE label. Skip the canonical
     // `ID[...]` form, quoted forms, and bracket forms — all already safe.
@@ -68,10 +87,37 @@ export function quoteBareLabels(code: string): { code: string; fixes: string[] }
       }
       return line;
     }
+
+    // Protect every edge label with a placeholder BEFORE the node pass, so
+    // a label like |foo(x)| or -- foo(x) --> is never mistaken for a node
+    // shape `foo(x)`. The node pass runs on the placeholder line and the
+    // real labels are restored afterwards.
+    const stash: string[] = [];
+    const park = (s: string) => { stash.push(s); return "\x00E" + (stash.length - 1) + "\x00"; };
+
+    let work = line.replace(PIPE_RE, (m, text) => {
+      const h = healEdgeText(text);
+      if (!h.changed) return park(m);
+      fixes.push("edge |" + text.trim() + "|");
+      return park("|" + h.out + "|");
+    });
+    work = work.replace(DOTTED_RE, (m, pre, text, post) => {
+      const h = healEdgeText(text);
+      if (!h.changed) return park(m);
+      fixes.push("edge -. " + text.trim() + " " + post);
+      return park(pre + " " + h.out + " " + post);
+    });
+    work = work.replace(DASH_RE, (m, pre, text, post) => {
+      const h = healEdgeText(text);
+      if (!h.changed) return park(m);
+      fixes.push("edge -- " + text.trim() + " " + post);
+      return park(pre + " " + h.out + " " + post);
+    });
+
     // Nodes: quote bare labels containing special chars. Labels that are
     // already double-quoted are left untouched (defence in depth — though
     // this path only runs after a parse failure anyway).
-    return line.replace(SHAPE_RE, (match, id, ...groups) => {
+    work = work.replace(SHAPE_RE, (match, id, ...groups) => {
       const idx = groups.findIndex((g) => g !== undefined);
       if (idx < 0) return match;
       const shape = SHAPES[idx];
@@ -83,6 +129,9 @@ export function quoteBareLabels(code: string): { code: string; fixes: string[] }
       const clean = label.replace(/^"+|"+$/g, "").trim();
       return id + shape.o + '"' + clean + '"' + shape.c;
     });
+
+    // Restore the protected edge labels.
+    return work.replace(/\x00E(\d+)\x00/g, (_m, i) => stash[Number(i)]);
   }).join("\n");
 
   return { code: fixed, fixes };

package/package.json

@@ -1,52 +1,52 @@
 {
-  "name": "@fyeeme/pi-mermaid-viewer",
-  "version": "1.0.0",
-  "description": "Render Mermaid diagrams from the conversation in the browser.",
-  "type": "module",
-  "license": "MIT",
-  "author": "fyeeme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/fyeeme/pi-packages"
-  },
-  "bugs": {
-    "url": "https://github.com/fyeeme/pi-packages/issues"
-  },
-  "homepage": "https://github.com/fyeeme/pi-packages#readme",
-  "engines": {
-    "node": ">=18"
-  },
-  "keywords": [
-    "pi-package",
-    "pi",
-    "mermaid",
-    "diagram",
-    "viewer"
-  ],
-  "files": [
-    "index.ts",
-    "README.md",
-    "LICENSE",
-    "CHANGELOG.md"
-  ],
-  "pi": {
-    "extensions": [
-      "./index.ts"
-    ]
-  },
-  "scripts": {
-    "test": "vitest --run",
-    "typecheck": "tsc"
-  },
-  "peerDependencies": {
-    "@earendil-works/pi-coding-agent": ">=0.77.0"
-  },
-  "devDependencies": {
-    "@earendil-works/pi-coding-agent": "0.77.0",
-    "@types/node": "22.19.19",
-    "typescript": "5.9.3"
-  }
+	"name": "@fyeeme/pi-mermaid-viewer",
+	"version": "1.0.2",
+	"description": "Render Mermaid diagrams from the conversation in the browser.",
+	"type": "module",
+	"license": "MIT",
+	"author": "fyeeme",
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/fyeeme/pi-packages"
+	},
+	"bugs": {
+		"url": "https://github.com/fyeeme/pi-packages/issues"
+	},
+	"homepage": "https://github.com/fyeeme/pi-packages#readme",
+	"engines": {
+		"node": ">=18"
+	},
+	"keywords": [
+		"pi-package",
+		"pi",
+		"mermaid",
+		"diagram",
+		"viewer"
+	],
+	"files": [
+		"index.ts",
+		"README.md",
+		"LICENSE",
+		"CHANGELOG.md"
+	],
+	"pi": {
+		"extensions": [
+			"./index.ts"
+		]
+	},
+	"scripts": {
+		"test": "vitest --run",
+		"typecheck": "tsc"
+	},
+	"peerDependencies": {
+		"@earendil-works/pi-coding-agent": ">=0.99.0"
+	},
+	"devDependencies": {
+		"@earendil-works/pi-coding-agent": "1.0.0",
+		"@types/node": "22.19.19",
+		"typescript": "5.9.3"
+	}
 }