@peaske7/readit 0.2.1 → 0.3.0-rc.1

package/src/lib/i18n/types.ts

@@ -1,122 +0,0 @@
-export const Locales = {
-  JA: "ja",
-  EN: "en",
-} as const;
-
-export type Locale = (typeof Locales)[keyof typeof Locales];
-
-export interface Translations {
-  // App
-  "app.loading": string;
-  "app.noDocuments": string;
-  "app.noDocumentsHintPrefix": string;
-  "app.noDocumentsHintSuffix": string;
-  "app.footer": string;
-
-  // Header
-  "header.selectTextToReanchor": string;
-
-  // Actions menu
-  "actions.ariaLabel": string;
-  "actions.settings": string;
-  "actions.reload": string;
-  "actions.copyAll": string;
-  "actions.exportJson": string;
-  "actions.viewRaw": string;
-
-  // Settings
-  "settings.title": string;
-  "settings.theme": string;
-  "settings.font": string;
-  "settings.language": string;
-  "settings.theme.system": string;
-  "settings.theme.light": string;
-  "settings.theme.dark": string;
-  "settings.font.serif": string;
-  "settings.font.sansSerif": string;
-
-  // Comment input
-  "comment.placeholder": string;
-  "comment.cancel": string;
-  "comment.addNote": string;
-  "comment.highlight": string;
-
-  // Margin note
-  "marginNote.addNote": string;
-  "marginNote.delete": string;
-  "marginNote.edit": string;
-  "marginNote.copy": string;
-
-  // Comment manager
-  "commentManager.unresolved": string;
-  "commentManager.deleteAllConfirm": string;
-  "commentManager.delete": string;
-  "commentManager.cancel": string;
-  "commentManager.copyAllTitle": string;
-  "commentManager.deleteAllTitle": string;
-  "commentManager.noComments": string;
-
-  // Comment list item
-  "commentList.edit": string;
-  "commentList.delete": string;
-  "commentList.goTo": string;
-  "commentList.reanchor": string;
-  "commentList.unresolved": string;
-
-  // Comment nav
-  "commentNav.previous": string;
-  "commentNav.next": string;
-  "commentNav.of": string;
-
-  // Inline editor
-  "editor.save": string;
-  "editor.cancel": string;
-
-  // Reanchor confirm
-  "reanchor.question": string;
-  "reanchor.confirm": string;
-  "reanchor.cancel": string;
-
-  // Raw comments modal
-  "rawModal.title": string;
-  "rawModal.copyTitle": string;
-  "rawModal.loading": string;
-  "rawModal.noComments": string;
-  "rawModal.copiedToClipboard": string;
-  "rawModal.failedToCopy": string;
-
-  // Toast messages
-  "toast.copied": string;
-  "toast.copiedAllComments": string;
-
-  // Comment badge
-  "commentBadge.title": string;
-  "commentBadge.titlePlural": string;
-
-  // Keyboard shortcuts
-  "shortcuts.title": string;
-  "shortcutGroup.copy": string;
-  "shortcutGroup.navigate": string;
-  "shortcutGroup.other": string;
-  "shortcuts.resetToDefaults": string;
-  "shortcuts.enableDisable": string;
-  "shortcutCapture.pressKeys": string;
-  "shortcutCapture.reserved": string;
-  "shortcutCapture.ariaLabel": string;
-  "shortcut.copyAll.label": string;
-  "shortcut.copyAll.description": string;
-  "shortcut.copyAllRaw.label": string;
-  "shortcut.copyAllRaw.description": string;
-  "shortcut.navigateNext.label": string;
-  "shortcut.navigateNext.description": string;
-  "shortcut.navigatePrevious.label": string;
-  "shortcut.navigatePrevious.description": string;
-  "shortcut.copySelectionRaw.label": string;
-  "shortcut.copySelectionRaw.description": string;
-  "shortcut.copySelectionLLM.label": string;
-  "shortcut.copySelectionLLM.description": string;
-  "shortcut.clearSelection.label": string;
-  "shortcut.clearSelection.description": string;
-}
-
-export type TranslationKey = keyof Translations;

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

@@ -1,61 +0,0 @@
-import { bench, describe } from "vitest";
-import {
-  COMMENTS_1,
-  COMMENTS_10,
-  COMMENTS_50,
-} from "./__fixtures__/bench-data";
-import { resolveMarginNotePositions } from "./margin-layout";
-
-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;
-}
-
-describe("resolveMarginNotePositions — well-spaced", () => {
-  bench("1 comment", () => {
-    const ids = COMMENTS_1.map((c) => c.id);
-    const positions = makeHighlightPositions(ids, 300);
-    resolveMarginNotePositions(ids, positions, undefined);
-  });
-
-  bench("10 comments", () => {
-    const ids = COMMENTS_10.map((c) => c.id);
-    const positions = makeHighlightPositions(ids, 300);
-    resolveMarginNotePositions(ids, positions, undefined);
-  });
-
-  bench("50 comments", () => {
-    const ids = COMMENTS_50.map((c) => c.id);
-    const positions = makeHighlightPositions(ids, 300);
-    resolveMarginNotePositions(ids, positions, 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 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,71 +0,0 @@
-const MARGIN_NOTE_MIN_GAP_PX = 150;
-const COMMENT_INPUT_HEIGHT_PX = 160;
-
-interface NotePosition {
-  commentId: string;
-  top: number;
-}
-
-export function resolveMarginNotePositions(
-  commentIds: string[],
-  highlightPositions: Record<string, number>,
-  pendingSelectionTop: number | undefined,
-): Map<string, number> {
-  const positions: NotePosition[] = commentIds
-    .filter((id) => id in highlightPositions)
-    .map((id) => ({
-      commentId: id,
-      top: highlightPositions[id],
-    }));
-
-  positions.sort((a, b) => a.top - b.top);
-
-  if (pendingSelectionTop !== null && pendingSelectionTop !== undefined) {
-    const inputStart = pendingSelectionTop;
-    const inputEnd = pendingSelectionTop + COMMENT_INPUT_HEIGHT_PX;
-
-    for (const pos of positions) {
-      const noteBottom = pos.top + MARGIN_NOTE_MIN_GAP_PX;
-
-      const overlaps = noteBottom > inputStart && pos.top < inputEnd;
-
-      if (overlaps) {
-        if (pos.top < inputStart) {
-          pos.top = Math.max(0, inputStart - MARGIN_NOTE_MIN_GAP_PX);
-        } else {
-          pos.top = inputEnd;
-        }
-      }
-    }
-    positions.sort((a, b) => a.top - b.top);
-  }
-
-  const inputStartForOverlap = pendingSelectionTop ?? Infinity;
-  const inputEndForOverlap =
-    pendingSelectionTop != null
-      ? pendingSelectionTop + COMMENT_INPUT_HEIGHT_PX
-      : Infinity;
-
-  for (let i = positions.length - 2; i >= 0; i--) {
-    const curr = positions[i];
-    const next = positions[i + 1];
-    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);
-    }
-  }
-
-  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 (newTop >= inputStartForOverlap && newTop < inputEndForOverlap) {
-        newTop = inputEndForOverlap;
-      }
-      curr.top = newTop;
-    }
-  }
-
-  return new Map(positions.map((p) => [p.commentId, p.top]));
-}

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

@@ -1,154 +0,0 @@
-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

@@ -1,177 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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,
-  };
-}