@peaske7/readit 0.1.8 → 0.2.1

package/src/lib/margin-layout.bench.ts

@@ -1,28 +1,61 @@
 import { bench, describe } from "vitest";
-import { makeHighlightPositions } from "./__fixtures__/bench-data";
+import {
+  COMMENTS_1,
+  COMMENTS_10,
+  COMMENTS_50,
+} from "./__fixtures__/bench-data";
 import { resolveMarginNotePositions } from "./margin-layout";
 
-// Pre-compute fixture data outside bench loops
-const ids5 = Array.from({ length: 5 }, (_, i) => `c${i}`);
-const pos5 = makeHighlightPositions(5);
+function makeHighlightPositions(
+  commentIds: string[],
+  spacing: number,
+): Record<string, number> {
+  const positions: Record<string, number> = {};
+  for (let i = 0; i < commentIds.length; i++) {
+    positions[commentIds[i]] = i * spacing;
+  }
+  return positions;
+}
 
-const ids50 = Array.from({ length: 50 }, (_, i) => `c${i}`);
-const pos50 = makeHighlightPositions(50);
+describe("resolveMarginNotePositions — well-spaced", () => {
+  bench("1 comment", () => {
+    const ids = COMMENTS_1.map((c) => c.id);
+    const positions = makeHighlightPositions(ids, 300);
+    resolveMarginNotePositions(ids, positions, undefined);
+  });
 
-describe("resolveMarginNotePositions", () => {
-  bench("5 notes, no input zone", () => {
-    resolveMarginNotePositions(ids5, pos5, undefined);
+  bench("10 comments", () => {
+    const ids = COMMENTS_10.map((c) => c.id);
+    const positions = makeHighlightPositions(ids, 300);
+    resolveMarginNotePositions(ids, positions, undefined);
   });
 
-  bench("5 notes, with input zone collision", () => {
-    resolveMarginNotePositions(ids5, pos5, 400);
+  bench("50 comments", () => {
+    const ids = COMMENTS_50.map((c) => c.id);
+    const positions = makeHighlightPositions(ids, 300);
+    resolveMarginNotePositions(ids, positions, undefined);
   });
+});
 
-  bench("50 notes, no input zone", () => {
-    resolveMarginNotePositions(ids50, pos50, undefined);
+describe("resolveMarginNotePositions — clustered", () => {
+  bench("10 comments, 10px apart", () => {
+    const ids = COMMENTS_10.map((c) => c.id);
+    const positions = makeHighlightPositions(ids, 10);
+    resolveMarginNotePositions(ids, positions, undefined);
   });
 
-  bench("50 notes, with input zone collision", () => {
-    resolveMarginNotePositions(ids50, pos50, 3000);
+  bench("50 comments, 10px apart", () => {
+    const ids = COMMENTS_50.map((c) => c.id);
+    const positions = makeHighlightPositions(ids, 10);
+    resolveMarginNotePositions(ids, positions, undefined);
+  });
+});
+
+describe("resolveMarginNotePositions — with input zone", () => {
+  bench("50 comments, input at middle", () => {
+    const ids = COMMENTS_50.map((c) => c.id);
+    const positions = makeHighlightPositions(ids, 100);
+    const midpoint = 25 * 100;
+    resolveMarginNotePositions(ids, positions, midpoint);
   });
 });

package/src/lib/margin-layout.ts

@@ -1,34 +1,16 @@
-import {
-  COMMENT_INPUT_HEIGHT_PX,
-  MARGIN_NOTE_MIN_GAP_PX,
-} from "./layout-constants";
+const MARGIN_NOTE_MIN_GAP_PX = 150;
+const COMMENT_INPUT_HEIGHT_PX = 160;
 
 interface NotePosition {
   commentId: string;
   top: number;
 }
 
-/**
- * Resolves margin note positions to avoid overlaps.
- *
- * Algorithm:
- * 1. Build initial positions from highlight positions
- * 2. Handle input zone collision (push notes up or down to avoid input)
- * 3. Resolve note-to-note overlaps:
- *    - Pass 1: Notes above input zone → push UP
- *    - Pass 2: Notes at/below input zone → push DOWN
- *
- * @param commentIds - Comment IDs in document order (sorted by startOffset)
- * @param highlightPositions - Map of comment ID to top position
- * @param pendingSelectionTop - Top position of input zone (if any)
- * @returns Map of comment ID to resolved top position
- */
 export function resolveMarginNotePositions(
   commentIds: string[],
   highlightPositions: Record<string, number>,
   pendingSelectionTop: number | undefined,
 ): Map<string, number> {
-  // Only include comments with known positions (avoids jolt to position 0)
   const positions: NotePosition[] = commentIds
     .filter((id) => id in highlightPositions)
     .map((id) => ({
@@ -36,10 +18,8 @@ export function resolveMarginNotePositions(
       top: highlightPositions[id],
     }));
 
-  // Sort by top position
   positions.sort((a, b) => a.top - b.top);
 
-  // Handle input zone collision - check visual overlap, not just top position
   if (pendingSelectionTop !== null && pendingSelectionTop !== undefined) {
     const inputStart = pendingSelectionTop;
     const inputEnd = pendingSelectionTop + COMMENT_INPUT_HEIGHT_PX;
@@ -47,48 +27,39 @@ export function resolveMarginNotePositions(
     for (const pos of positions) {
       const noteBottom = pos.top + MARGIN_NOTE_MIN_GAP_PX;
 
-      // Check if note visually overlaps with input zone
       const overlaps = noteBottom > inputStart && pos.top < inputEnd;
 
       if (overlaps) {
         if (pos.top < inputStart) {
-          // Note is above input but overlaps - push UP
           pos.top = Math.max(0, inputStart - MARGIN_NOTE_MIN_GAP_PX);
         } else {
-          // Note is within/below input zone - push DOWN
           pos.top = inputEnd;
         }
       }
     }
-    // Re-sort after potential position changes
     positions.sort((a, b) => a.top - b.top);
   }
 
-  // Resolve note-to-note overlaps
   const inputStartForOverlap = pendingSelectionTop ?? Infinity;
   const inputEndForOverlap =
     pendingSelectionTop != null
       ? pendingSelectionTop + COMMENT_INPUT_HEIGHT_PX
       : Infinity;
 
-  // Pass 1: Notes ABOVE input - resolve by pushing UP (bottom to top)
   for (let i = positions.length - 2; i >= 0; i--) {
     const curr = positions[i];
     const next = positions[i + 1];
-    // Only process if next note is above the input zone
     if (next.top >= inputStartForOverlap) continue;
     if (next.top - curr.top < MARGIN_NOTE_MIN_GAP_PX) {
       curr.top = Math.max(0, next.top - MARGIN_NOTE_MIN_GAP_PX);
     }
   }
 
-  // Pass 2: Notes at/below input - resolve by pushing DOWN (top to bottom)
   for (let i = 1; i < positions.length; i++) {
     const prev = positions[i - 1];
     const curr = positions[i];
     if (curr.top - prev.top < MARGIN_NOTE_MIN_GAP_PX) {
       let newTop = prev.top + MARGIN_NOTE_MIN_GAP_PX;
-      // If new position lands in input zone, skip to below input
       if (newTop >= inputStartForOverlap && newTop < inputEndForOverlap) {
         newTop = inputEndForOverlap;
       }

package/src/lib/markdown-renderer.test.ts

@@ -0,0 +1,154 @@
+import { JSDOM } from "jsdom";
+import { describe, expect, it } from "vitest";
+import { renderMarkdown } from "./markdown-renderer";
+
+const SAMPLE_MARKDOWN = `# Hello World
+
+This is a paragraph with **bold** and *italic* text.
+
+## Code Example
+
+\`\`\`typescript
+function hello() {
+  return "world";
+}
+\`\`\`
+
+Some text after the code block.
+
+- Item 1
+- Item 2
+- Item 3
+
+### Table
+
+| Name | Value |
+|------|-------|
+| foo  | bar   |
+| baz  | qux   |
+
+> A blockquote with some text.
+
+Final paragraph.
+`;
+
+const SAMPLE_WITH_MERMAID = `# Diagrams
+
+\`\`\`mermaid
+graph TD
+  A --> B
+\`\`\`
+
+After mermaid.
+`;
+
+describe("renderMarkdown", () => {
+  it("renders basic markdown to HTML", async () => {
+    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    expect(html).toContain("<h1");
+    expect(html).toContain("Hello World");
+    expect(html).toContain("<strong>bold</strong>");
+    expect(html).toContain("<em>italic</em>");
+    expect(html).toContain("<h2");
+    expect(html).toContain("Code Example");
+    expect(html).toContain("<h3");
+    expect(html).toContain("Table");
+  });
+
+  it("extracts headings with correct IDs", async () => {
+    const { headings } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    expect(headings).toEqual([
+      { id: "hello-world", text: "Hello World", level: 1 },
+      { id: "code-example", text: "Code Example", level: 2 },
+      { id: "table", text: "Table", level: 3 },
+    ]);
+  });
+
+  it("injects heading IDs into HTML", async () => {
+    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    expect(html).toContain('id="hello-world"');
+    expect(html).toContain('id="code-example"');
+    expect(html).toContain('id="table"');
+  });
+
+  it("syntax-highlights code blocks with shiki", async () => {
+    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    expect(html).toContain("shiki");
+    expect(html).toContain("hello");
+    expect(html).toContain("world");
+  });
+
+  it("leaves mermaid blocks for client-side hydration", async () => {
+    const { html } = await renderMarkdown(SAMPLE_WITH_MERMAID);
+
+    expect(html).toContain('class="language-mermaid"');
+    expect(html).toContain("graph TD");
+    expect(html).not.toMatch(/class="shiki[^"]*"[^>]*>.*graph TD/s);
+  });
+
+  it("renders GFM tables", async () => {
+    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    expect(html).toContain("<table>");
+    expect(html).toContain("<th>");
+    expect(html).toContain("foo");
+  });
+
+  it("renders lists", async () => {
+    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    expect(html).toContain("<ul>");
+    expect(html).toContain("<li>");
+    expect(html).toContain("Item 1");
+  });
+
+  it("renders blockquotes", async () => {
+    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    expect(html).toContain("<blockquote>");
+    expect(html).toContain("A blockquote with some text.");
+  });
+
+  it("handles duplicate headings", async () => {
+    const md = `## Section\n\n## Section\n\n## Section\n`;
+    const { headings } = await renderMarkdown(md);
+
+    expect(headings).toEqual([
+      { id: "section", text: "Section", level: 2 },
+      { id: "section-1", text: "Section", level: 2 },
+      { id: "section-2", text: "Section", level: 2 },
+    ]);
+  });
+});
+
+describe("text offset conformance", () => {
+  it("rendered HTML has proper block structure for text offset extraction", async () => {
+    const { html } = await renderMarkdown(SAMPLE_MARKDOWN);
+
+    const dom = new JSDOM(html);
+    const doc = dom.window.document;
+
+    const paragraphs = doc.querySelectorAll("p");
+    expect(paragraphs.length).toBeGreaterThan(0);
+
+    const h1 = doc.querySelector("h1");
+    expect(h1?.id).toBe("hello-world");
+    expect(h1?.textContent).toBe("Hello World");
+
+    const pres = doc.querySelectorAll("pre");
+    expect(pres.length).toBeGreaterThan(0);
+
+    const lis = doc.querySelectorAll("li");
+    expect(lis.length).toBe(3);
+
+    const trs = doc.querySelectorAll("tr");
+    expect(trs.length).toBeGreaterThan(0);
+
+    const blockquote = doc.querySelector("blockquote");
+    expect(blockquote).not.toBeNull();
+  });
+});

package/src/lib/markdown-renderer.ts

@@ -0,0 +1,177 @@
+import MarkdownIt from "markdown-it";
+import type { BundledLanguage, BundledTheme, HighlighterGeneric } from "shiki";
+import { type Heading, parseMarkdownHeadings } from "./headings";
+import { renderMermaidBlocks } from "./mermaid-renderer";
+
+const SHIKI_LANGUAGES: BundledLanguage[] = [
+  "bash",
+  "css",
+  "diff",
+  "go",
+  "graphql",
+  "javascript",
+  "json",
+  "jsx",
+  "markdown",
+  "python",
+  "rust",
+  "sql",
+  "tsx",
+  "typescript",
+  "yaml",
+];
+
+const SHIKI_THEME: BundledTheme = "one-dark-pro";
+
+let shikiInstance: HighlighterGeneric<BundledLanguage, BundledTheme> | null =
+  null;
+let shikiPromise: Promise<
+  HighlighterGeneric<BundledLanguage, BundledTheme>
+> | null = null;
+
+export async function getShiki(): Promise<
+  HighlighterGeneric<BundledLanguage, BundledTheme>
+> {
+  if (shikiInstance) return shikiInstance;
+  if (shikiPromise) return shikiPromise;
+
+  shikiPromise = import("shiki").then(async ({ createHighlighter }) => {
+    const highlighter = await createHighlighter({
+      themes: [SHIKI_THEME],
+      langs: SHIKI_LANGUAGES,
+    });
+    shikiInstance = highlighter;
+    return highlighter;
+  });
+
+  return shikiPromise;
+}
+
+function createMarkdownRenderer(
+  shiki: HighlighterGeneric<BundledLanguage, BundledTheme>,
+): MarkdownIt {
+  const md = new MarkdownIt({
+    html: true, // Allow raw HTML (matches rehype-raw behavior)
+    linkify: true,
+    typographer: false,
+    highlight(code: string, lang: string): string {
+      if (lang === "mermaid") {
+        return `<pre><code class="language-mermaid">${md.utils.escapeHtml(code)}</code></pre>`;
+      }
+
+      const language = normalizeLanguage(lang);
+
+      if (language && shiki.getLoadedLanguages().includes(language)) {
+        return shiki.codeToHtml(code, {
+          lang: language,
+          theme: SHIKI_THEME,
+        });
+      }
+
+      return `<pre class="shiki"><code>${md.utils.escapeHtml(code)}</code></pre>`;
+    },
+  });
+
+  return md;
+}
+
+function normalizeLanguage(lang: string): BundledLanguage | undefined {
+  const aliases: Record<string, BundledLanguage> = {
+    sh: "bash",
+    shell: "bash",
+    js: "javascript",
+    ts: "typescript",
+    py: "python",
+    rs: "rust",
+    yml: "yaml",
+    md: "markdown",
+  };
+  const normalized = lang.toLowerCase().trim();
+  if (SHIKI_LANGUAGES.includes(normalized as BundledLanguage)) {
+    return normalized as BundledLanguage;
+  }
+  return aliases[normalized];
+}
+
+function injectHeadingIds(html: string, headings: Heading[]): string {
+  let headingIdx = 0;
+
+  return html.replace(
+    /<(h[1-6])([^>]*)>([\s\S]*?)<\/\1>/gi,
+    (match, tag: string, attrs: string, content: string) => {
+      if (headingIdx >= headings.length) return match;
+
+      const heading = headings[headingIdx];
+      headingIdx++;
+
+      if (/\bid\s*=/.test(attrs)) return match;
+
+      return `<${tag} id="${heading.id}"${attrs}>${content}</${tag}>`;
+    },
+  );
+}
+
+interface RenderResult {
+  html: string;
+  headings: Heading[];
+}
+
+const MERMAID_BLOCK_RE =
+  /<pre><code class="language-mermaid">([\s\S]*?)<\/code><\/pre>/g;
+
+function unescapeHtml(str: string): string {
+  return str
+    .replace(/&amp;/g, "&")
+    .replace(/&lt;/g, "<")
+    .replace(/&gt;/g, ">")
+    .replace(/&quot;/g, '"');
+}
+
+async function replaceMermaidBlocks(html: string): Promise<string> {
+  MERMAID_BLOCK_RE.lastIndex = 0;
+  const matches: { fullMatch: string; code: string; index: number }[] = [];
+
+  let match: RegExpExecArray | null = MERMAID_BLOCK_RE.exec(html);
+  while (match !== null) {
+    matches.push({
+      fullMatch: match[0],
+      code: unescapeHtml(match[1]),
+      index: match.index,
+    });
+    match = MERMAID_BLOCK_RE.exec(html);
+  }
+
+  if (matches.length === 0) return html;
+
+  const codes = matches.map((m) => m.code);
+  const svgs = await renderMermaidBlocks(codes);
+
+  // Replace in reverse order to preserve string indices
+  for (let i = matches.length - 1; i >= 0; i--) {
+    const svg = svgs[i];
+    if (svg !== null) {
+      const { fullMatch, index } = matches[i];
+      const replacement = `<div class="mermaid-container">${svg}</div>`;
+      html =
+        html.slice(0, index) +
+        replacement +
+        html.slice(index + fullMatch.length);
+    }
+  }
+
+  return html;
+}
+
+export async function renderMarkdown(content: string): Promise<RenderResult> {
+  const shiki = await getShiki();
+  const md = createMarkdownRenderer(shiki);
+
+  const headings = parseMarkdownHeadings(content);
+
+  let html = md.render(content);
+
+  html = injectHeadingIds(html, headings);
+  html = await replaceMermaidBlocks(html);
+
+  return { html, headings };
+}

package/src/lib/mermaid-config.ts

@@ -0,0 +1,38 @@
+export const MERMAID_THEME = {
+  fontSize: "16px",
+  primaryColor: "rgba(245, 222, 160, 0.8)",
+  primaryTextColor: "#3f3f46",
+  primaryBorderColor: "#c9a84a",
+  secondaryColor: "rgba(168, 196, 228, 0.6)",
+  secondaryTextColor: "#3f3f46",
+  secondaryBorderColor: "#5b7fa8",
+  tertiaryColor: "rgba(170, 210, 170, 0.6)",
+  tertiaryTextColor: "#3f3f46",
+  tertiaryBorderColor: "#5a9a62",
+  background: "#ffffff",
+  mainBkg: "#ffffff",
+  textColor: "#3f3f46",
+  lineColor: "#a1a1aa",
+  nodeBkg: "rgba(245, 222, 160, 0.6)",
+  nodeBorder: "#c9a84a",
+  clusterBkg: "rgba(250, 250, 250, 0.8)",
+  clusterBorder: "#e4e4e7",
+  actorBkg: "rgba(168, 196, 228, 0.5)",
+  actorBorder: "#5b7fa8",
+  actorTextColor: "#3f3f46",
+  signalColor: "#3f3f46",
+  signalTextColor: "#3f3f46",
+  noteBkgColor: "rgba(245, 222, 160, 0.5)",
+  noteBorderColor: "#c9a84a",
+  noteTextColor: "#3f3f46",
+} as const;
+
+export function getMermaidInitConfig() {
+  return {
+    startOnLoad: false,
+    theme: "base" as const,
+    securityLevel: "strict" as const,
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    themeVariables: MERMAID_THEME,
+  };
+}

package/src/lib/mermaid-renderer.ts

@@ -0,0 +1,162 @@
+interface PendingRequest {
+  resolve: (svg: string) => void;
+  reject: (err: Error) => void;
+  timer: ReturnType<typeof setTimeout>;
+}
+
+const RENDER_TIMEOUT_MS = 15_000;
+const MAX_CONSECUTIVE_ERRORS = 3;
+
+let worker: Worker | null = null;
+let workerReady: Promise<void> | null = null;
+const pendingRequests = new Map<string, PendingRequest>();
+let requestCounter = 0;
+let consecutiveErrors = 0;
+
+function resetWorker(
+  reason: Error,
+  currentWorker: Worker | null = worker,
+): void {
+  if (currentWorker) currentWorker.terminate();
+  if (worker === currentWorker) {
+    worker = null;
+    workerReady = null;
+  }
+  for (const [, pending] of pendingRequests) {
+    clearTimeout(pending.timer);
+    pending.reject(reason);
+  }
+  pendingRequests.clear();
+}
+
+function createWorker(): { worker: Worker; ready: Promise<void> } {
+  const w = new Worker(new URL("./mermaid-worker.ts", import.meta.url).href, {
+    type: "module",
+  });
+
+  const ready = new Promise<void>((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      w.removeEventListener("message", onReady);
+      w.removeEventListener("error", onStartupError);
+      w.terminate();
+      if (worker === w) {
+        worker = null;
+        workerReady = null;
+      }
+      reject(new Error("Mermaid worker failed to start within 30s"));
+    }, 30_000);
+
+    function onStartupError(event: ErrorEvent) {
+      clearTimeout(timeout);
+      w.removeEventListener("message", onReady);
+      w.removeEventListener("error", onStartupError);
+      w.terminate();
+      if (worker === w) {
+        worker = null;
+        workerReady = null;
+      }
+      reject(new Error(`Mermaid worker failed to start: ${event.message}`));
+    }
+
+    function onReady(event: MessageEvent) {
+      if (event.data?.type === "ready") {
+        clearTimeout(timeout);
+        w.removeEventListener("message", onReady);
+        w.removeEventListener("error", onStartupError);
+        resolve();
+      }
+    }
+    w.addEventListener("message", onReady);
+    w.addEventListener("error", onStartupError);
+  });
+
+  w.addEventListener("message", (event: MessageEvent) => {
+    const { id, svg, error } = event.data;
+    if (!id) return;
+
+    const pending = pendingRequests.get(id);
+    if (!pending) return;
+
+    clearTimeout(pending.timer);
+    pendingRequests.delete(id);
+
+    if (error) {
+      consecutiveErrors++;
+      pending.reject(new Error(error));
+    } else {
+      consecutiveErrors = 0;
+      pending.resolve(svg);
+    }
+  });
+
+  w.addEventListener("error", (event) => {
+    resetWorker(new Error(`Worker error: ${event.message}`), w);
+  });
+
+  return { worker: w, ready };
+}
+
+async function ensureWorker(): Promise<Worker> {
+  if (worker && workerReady) {
+    await workerReady;
+
+    if (consecutiveErrors >= MAX_CONSECUTIVE_ERRORS) {
+      resetWorker(
+        new Error("Mermaid worker restarted after repeated render failures"),
+      );
+      consecutiveErrors = 0;
+    }
+  }
+
+  if (!worker) {
+    const result = createWorker();
+    worker = result.worker;
+    workerReady = result.ready;
+    await workerReady;
+  }
+
+  return worker;
+}
+
+async function renderMermaidSvg(code: string): Promise<string> {
+  const w = await ensureWorker();
+
+  const id = `req-${++requestCounter}`;
+  const diagramId = `mermaid-ssr-${requestCounter}`;
+
+  return new Promise<string>((resolve, reject) => {
+    const timer = setTimeout(() => {
+      pendingRequests.delete(id);
+      resetWorker(
+        new Error(`Mermaid render timed out after ${RENDER_TIMEOUT_MS}ms`),
+        w,
+      );
+      reject(
+        new Error(`Mermaid render timed out after ${RENDER_TIMEOUT_MS}ms`),
+      );
+    }, RENDER_TIMEOUT_MS);
+
+    pendingRequests.set(id, { resolve, reject, timer });
+
+    w.postMessage({ id, code, diagramId });
+  });
+}
+
+export async function renderMermaidBlocks(
+  blocks: string[],
+): Promise<(string | null)[]> {
+  const results: (string | null)[] = [];
+  for (const code of blocks) {
+    try {
+      const svg = await renderMermaidSvg(code);
+      results.push(svg);
+    } catch {
+      results.push(null);
+    }
+  }
+  return results;
+}
+
+export function disposeMermaidWorker(): void {
+  resetWorker(new Error("Mermaid worker disposed"));
+}