@peaske7/readit 0.2.0 → 0.3.0-rc.0

package/src/index.css

@@ -101,8 +101,8 @@ html {
   --comment-color-3-bg-focused: rgba(205, 145, 155, 0.65);
   --comment-color-3-border: #b86b78;
 
-  /* Pending - neutral gray */
-  --pending-bg: rgba(180, 180, 180, 0.3);
+  /* Pending - warm amber tint (matches comment highlight palette) */
+  --pending-bg: rgba(245, 222, 160, 0.45);
 }
 
 .dark {
@@ -151,127 +151,38 @@ html {
   --comment-color-3-bg-focused: rgba(184, 107, 120, 0.55);
   --comment-color-3-border: #d08a98;
 
-  --pending-bg: rgba(100, 100, 100, 0.3);
+  --pending-bg: rgba(202, 168, 74, 0.35);
 }
 
 /* ========================================
-   Comment Highlight Styles
+   Comment Highlight Styles (CSS Custom Highlight API)
    ======================================== */
 
-/* Base highlight - subtle by default */
-mark[data-comment-id] {
-  background-color: var(--highlight-bg, var(--comment-color-0-bg));
-  cursor: pointer;
-  transition:
-    background-color 150ms ease,
-    opacity 150ms ease;
-}
-
-/* Color variants based on data-color-index */
-mark[data-comment-id][data-color-index="0"] {
-  --highlight-bg: var(--comment-color-0-bg);
-  --highlight-bg-focused: var(--comment-color-0-bg-focused);
-  --highlight-border: var(--comment-color-0-border);
-}
-
-mark[data-comment-id][data-color-index="1"] {
-  --highlight-bg: var(--comment-color-1-bg);
-  --highlight-bg-focused: var(--comment-color-1-bg-focused);
-  --highlight-border: var(--comment-color-1-border);
+/* Color variants — paint-time only, zero DOM mutations */
+::highlight(comment-color-0) {
+  background-color: var(--comment-color-0-bg);
 }
 
-mark[data-comment-id][data-color-index="2"] {
-  --highlight-bg: var(--comment-color-2-bg);
-  --highlight-bg-focused: var(--comment-color-2-bg-focused);
-  --highlight-border: var(--comment-color-2-border);
+::highlight(comment-color-1) {
+  background-color: var(--comment-color-1-bg);
 }
 
-mark[data-comment-id][data-color-index="3"] {
-  --highlight-bg: var(--comment-color-3-bg);
-  --highlight-bg-focused: var(--comment-color-3-bg-focused);
-  --highlight-border: var(--comment-color-3-border);
+::highlight(comment-color-2) {
+  background-color: var(--comment-color-2-bg);
 }
 
-/* Focused state - this highlight is hovered */
-mark[data-comment-id][data-focused="true"] {
-  background-color: var(
-    --highlight-bg-focused,
-    var(--comment-color-0-bg-focused)
-  );
+::highlight(comment-color-3) {
+  background-color: var(--comment-color-3-bg);
 }
 
-/* Hover on highlight itself */
-mark[data-comment-id]:hover {
-  background-color: var(
-    --highlight-bg-focused,
-    var(--comment-color-0-bg-focused)
-  );
-}
-
-/* ========================================
-   Bracket Mode for Long Selections
-   ======================================== */
-
-/* Container for bracket-mode highlights */
-mark[data-comment-id][data-bracket-mode="true"] {
-  background-color: transparent;
-  position: relative;
-}
-
-/* Only show background on first segment in bracket mode */
-mark[data-comment-id][data-bracket-start="true"] {
-  background-color: var(--highlight-bg, var(--comment-color-0-bg));
-  border-radius: 2px 2px 0 0;
-}
-
-/* Focused bracket mode shows full highlight */
-mark[data-comment-id][data-bracket-mode="true"][data-focused="true"],
-mark[data-comment-id][data-bracket-mode="true"]:hover {
-  background-color: var(
-    --highlight-bg-focused,
-    var(--comment-color-0-bg-focused)
-  );
-}
-
-/* Gutter line for bracket mode */
-.bracket-gutter-line {
-  position: absolute;
-  left: -20px;
-  width: 2px;
-  background-color: var(--bracket-color, var(--comment-color-0-border));
-  border-radius: 1px;
-  opacity: 0.6;
-  transition: opacity 150ms ease;
-  pointer-events: none;
-}
-
-.bracket-gutter-line[data-focused="true"],
-.bracket-gutter-line:hover {
-  opacity: 1;
+/* Focused state — higher priority, overrides color group */
+::highlight(comment-focused) {
+  background-color: var(--comment-color-0-bg-focused);
 }
 
-/* Bracket markers */
-.bracket-marker {
-  position: absolute;
-  left: -24px;
-  font-family: monospace;
-  font-size: 10px;
-  color: var(--bracket-color, var(--comment-color-0-border));
-  opacity: 0.6;
-  pointer-events: none;
-  transition: opacity 150ms ease;
-}
-
-.bracket-marker-start {
-  top: -2px;
-}
-
-.bracket-marker-end {
-  bottom: -2px;
-}
-
-.bracket-marker[data-focused="true"] {
-  opacity: 1;
+/* Pending selection highlight — neutral gray */
+::highlight(pending-selection) {
+  background-color: var(--pending-bg);
 }
 
 /* ========================================
@@ -301,64 +212,6 @@ mark[data-comment-id][data-bracket-mode="true"]:hover {
   opacity: 0.7;
 }
 
-/* Pending selection highlight - neutral gray */
-mark[data-pending] {
-  background-color: var(--pending-bg);
-  cursor: text;
-}
-
-/* Ensure highlights are visible in all contexts including headings */
-.prose mark[data-pending],
-.prose h1 mark[data-pending],
-.prose h2 mark[data-pending],
-.prose h3 mark[data-pending],
-.prose h4 mark[data-pending],
-.prose h5 mark[data-pending],
-.prose h6 mark[data-pending] {
-  background-color: var(--pending-bg) !important;
-  display: inline !important;
-}
-
-/* Ensure comment highlights are visible inside headings (prose overrides) */
-.prose h1 mark[data-comment-id],
-.prose h2 mark[data-comment-id],
-.prose h3 mark[data-comment-id],
-.prose h4 mark[data-comment-id],
-.prose h5 mark[data-comment-id],
-.prose h6 mark[data-comment-id] {
-  background-color: var(--highlight-bg, var(--comment-color-0-bg)) !important;
-  display: inline !important;
-}
-
-/* Bracket mode in headings - override transparent background */
-.prose h1 mark[data-comment-id][data-bracket-mode="true"],
-.prose h2 mark[data-comment-id][data-bracket-mode="true"],
-.prose h3 mark[data-comment-id][data-bracket-mode="true"],
-.prose h4 mark[data-comment-id][data-bracket-mode="true"],
-.prose h5 mark[data-comment-id][data-bracket-mode="true"],
-.prose h6 mark[data-comment-id][data-bracket-mode="true"] {
-  background-color: var(--highlight-bg, var(--comment-color-0-bg)) !important;
-}
-
-/* Hover state for comment highlights in headings */
-.prose h1 mark[data-comment-id]:hover,
-.prose h2 mark[data-comment-id]:hover,
-.prose h3 mark[data-comment-id]:hover,
-.prose h4 mark[data-comment-id]:hover,
-.prose h5 mark[data-comment-id]:hover,
-.prose h6 mark[data-comment-id]:hover,
-.prose h1 mark[data-comment-id][data-focused="true"],
-.prose h2 mark[data-comment-id][data-focused="true"],
-.prose h3 mark[data-comment-id][data-focused="true"],
-.prose h4 mark[data-comment-id][data-focused="true"],
-.prose h5 mark[data-comment-id][data-focused="true"],
-.prose h6 mark[data-comment-id][data-focused="true"] {
-  background-color: var(
-    --highlight-bg-focused,
-    var(--comment-color-0-bg-focused)
-  ) !important;
-}
-
 /* Toast animation */
 [data-sonner-toast] {
   animation: toast-in 0.2s ease-out;
@@ -579,6 +432,23 @@ mark[data-pending] {
   margin: 1.75em 0;
 }
 
+/* Shiki syntax-highlighted code blocks (server-rendered) */
+.prose pre.shiki {
+  margin: 1.5em 0;
+  border-radius: 0.5em;
+  font-size: 0.875em;
+  padding: 1em;
+  overflow-x: auto;
+}
+
+.prose pre.shiki code {
+  background: transparent;
+  padding: 0;
+  font-size: inherit;
+  font-weight: 400;
+  color: inherit;
+}
+
 .prose pre code {
   background: transparent;
   padding: 0;
@@ -864,6 +734,111 @@ mark[data-pending] {
   }
 }
 
+/* Interactive toolbar (hover-revealed) */
+.mermaid-toolbar {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border-radius: 0.5rem;
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(4px);
+  border: 1px solid rgba(228, 228, 231, 0.6);
+  opacity: 0;
+  transition: opacity 120ms ease-out;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.dark .mermaid-toolbar {
+  background: rgba(24, 24, 27, 0.85);
+  border-color: rgba(63, 63, 70, 0.6);
+}
+
+.mermaid-container:hover .mermaid-toolbar,
+.mermaid-toolbar:focus-within {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.mermaid-toolbar button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 0.375rem;
+  color: rgb(82, 82, 91);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  transition:
+    background 120ms ease-out,
+    color 120ms ease-out;
+}
+
+.mermaid-toolbar button:hover {
+  background: rgba(228, 228, 231, 0.8);
+  color: rgb(24, 24, 27);
+}
+
+.dark .mermaid-toolbar button {
+  color: rgb(161, 161, 170);
+}
+
+.dark .mermaid-toolbar button:hover {
+  background: rgba(63, 63, 70, 0.8);
+  color: rgb(244, 244, 245);
+}
+
+/* Inline source view shown when toggled to code mode */
+.mermaid-source-view {
+  margin: 0;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  background: rgb(244, 244, 245);
+  color: rgb(39, 39, 42);
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  font-family:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  overflow: auto;
+  white-space: pre;
+}
+
+.dark .mermaid-source-view {
+  background: rgb(24, 24, 27);
+  color: rgb(228, 228, 231);
+}
+
+.mermaid-source-view code {
+  background: transparent;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+}
+
+/* Modal-mode mermaid graph — let it scale up */
+.mermaid-modal-graph {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.mermaid-modal-graph > svg {
+  max-width: 100%;
+  max-height: 80vh;
+  width: auto;
+  height: auto;
+}
+
 /* ========================================
    Floating TOC Panel
    ======================================== */

package/src/lib/__fixtures__/bench-data.ts

@@ -1,8 +1,6 @@
 import type { Comment, CommentFile } from "../../schema";
 import { serializeComments } from "../comment-storage";
 
-// --- Document fixtures ---
-
 function generateMarkdownDoc(lineCount: number): string {
   const lines: string[] = [];
   lines.push("# Performance Test Document");
@@ -21,13 +19,11 @@ function generateMarkdownDoc(lineCount: number): string {
     );
     lines.push("");
 
-    // Add a list
     for (let j = 1; j <= 3; j++) {
       lines.push(`- Item ${j} in section ${sectionNum}`);
     }
     lines.push("");
 
-    // Add a code block
     lines.push("```typescript");
     lines.push(`function section${sectionNum}() {`);
     lines.push(`  const value = ${sectionNum} * 42;`);
@@ -36,13 +32,11 @@ function generateMarkdownDoc(lineCount: number): string {
     lines.push("```");
     lines.push("");
 
-    // Add a paragraph
     lines.push(
       `The conclusion of section ${sectionNum} summarizes the key findings and provides actionable recommendations for the reader to follow.`,
     );
     lines.push("");
 
-    // Add a table every few sections
     if (sectionNum % 3 === 0) {
       lines.push("| Column A | Column B | Column C |");
       lines.push("|----------|----------|----------|");
@@ -65,11 +59,8 @@ export const SMALL_DOC = generateMarkdownDoc(30);
 export const MEDIUM_DOC = generateMarkdownDoc(150);
 export const LARGE_DOC = generateMarkdownDoc(300);
 
-// --- Comment fixtures ---
-
 function makeComment(index: number, doc: string): Comment {
   const lines = doc.split("\n");
-  // Distribute comments across the document
   const targetLine = Math.min(
     Math.floor((index + 1) * (lines.length / 55)),
     lines.length - 1,
@@ -81,7 +72,6 @@ function makeComment(index: number, doc: string): Comment {
       ? lineText.slice(0, Math.min(30, lineText.length))
       : lineText || "default text";
 
-  // Calculate actual character offset
   let startOffset = 0;
   for (let i = 0; i < targetLine; i++) {
     startOffset += lines[i].length + 1; // +1 for \n
@@ -92,7 +82,6 @@ function makeComment(index: number, doc: string): Comment {
     id: `bench${String(index).padStart(3, "0")}`,
     selectedText,
     comment: `Benchmark comment ${index}: This text needs to be reviewed and updated.`,
-    createdAt: "2025-01-01T00:00:00.000Z",
     startOffset,
     endOffset,
     lineHint: `L${targetLine + 1}`,
@@ -107,8 +96,6 @@ export const COMMENTS_1 = makeComments(1);
 export const COMMENTS_10 = makeComments(10);
 export const COMMENTS_50 = makeComments(50);
 
-// --- Serialized comment file fixtures ---
-
 function makeCommentFile(comments: Comment[]): CommentFile {
   return {
     source: "/bench/test-doc.md",

package/src/lib/anchor.bench.ts

@@ -13,8 +13,6 @@ import {
   findAnchorWithFallback,
 } from "./anchor";
 
-// --- Exact match (best case) ---
-
 describe("findAnchor — exact match", () => {
   const comment = COMMENTS_10[5];
 
@@ -35,10 +33,7 @@ describe("findAnchor — exact match", () => {
   });
 });
 
-// --- Normalized match ---
-
 describe("findAnchorNormalized", () => {
-  // Create text with extra whitespace to force normalization path
   const comment = COMMENTS_10[5];
   const normalizedText = comment.selectedText.replace(/ /g, "  ");
 
@@ -51,13 +46,9 @@ describe("findAnchorNormalized", () => {
   });
 });
 
-// --- Fuzzy match (worst case) ---
-
 describe("findAnchorFuzzy", () => {
-  // Slightly mutate text to force Levenshtein search
   const comment = COMMENTS_10[5];
-  const mutated =
-    "X" + comment.selectedText.slice(1, -1) + "Z";
+  const mutated = `X${comment.selectedText.slice(1, -1)}Z`;
 
   bench("large doc — fuzzy (mutated text)", () => {
     findAnchorFuzzy({
@@ -68,8 +59,6 @@ describe("findAnchorFuzzy", () => {
   });
 });
 
-// --- Full fallback chain ---
-
 describe("findAnchorWithFallback", () => {
   bench("1 comment — exact hit", () => {
     const c = COMMENTS_1[0];

package/src/lib/anchor.test.ts

@@ -64,12 +64,10 @@ describe("levenshteinDistance", () => {
   });
 
   it("returns Infinity when exceeding maxDistance threshold", () => {
-    // Length difference alone exceeds threshold
     expect(levenshteinDistance("hello", "hi", 1)).toBe(
       Number.POSITIVE_INFINITY,
     );
 
-    // Content difference exceeds threshold during computation
     expect(levenshteinDistance("hello", "world", 2)).toBe(
       Number.POSITIVE_INFINITY,
     );
@@ -252,7 +250,6 @@ line eight`;
 
 describe("findAnchorNormalized", () => {
   it("finds text with collapsed whitespace", () => {
-    // Original had "hello world" but source was reformatted
     const source = "hello\n  world";
     const result = findAnchorNormalized({
       source,
@@ -275,7 +272,6 @@ describe("findAnchorNormalized", () => {
   });
 
   it("returns null when text has no collapsible whitespace", () => {
-    // If original text has no extra whitespace, exact match would have worked
     const result = findAnchorNormalized({
       source: "hello world",
       selectedText: "hello world",
@@ -411,7 +407,6 @@ describe("findAnchorWithFallback", () => {
   });
 
   it("falls back to normalized match when exact fails", () => {
-    // Source was reformatted (newlines instead of spaces)
     const result = findAnchorWithFallback({
       source: "hello\nworld",
       selectedText: "hello  world",
@@ -444,7 +439,6 @@ describe("findAnchorWithFallback", () => {
 describe("findClosestOccurrence", () => {
   it("finds the occurrence closest to hint", () => {
     const content = "the cat sat on the mat and the rat";
-    // "the" appears at positions 0, 15, and 27
 
     const result = findClosestOccurrence({
       source: content,
@@ -452,7 +446,6 @@ describe("findClosestOccurrence", () => {
       lineHint: "L1",
     });
     expect(result).not.toBeUndefined();
-    // Should find the first "the" at position 0 since hint is L1
     expect(result?.start).toBe(0);
   });
 
@@ -463,7 +456,6 @@ line three the
 line four
 line five the`;
 
-    // Test finding closest to line 3
     const result = findClosestOccurrence({
       source: content,
       selectedText: "the",

package/src/lib/anchor.ts

@@ -31,7 +31,6 @@ export function normalizeWhitespace(text: string): string {
   return text.replace(/\s+/g, " ").trim();
 }
 
-/** Wagner-Fischer with O(min(m,n)) space. Returns Infinity when > maxDistance. */
 export function levenshteinDistance(
   a: string,
   b: string,
@@ -100,7 +99,6 @@ export function getLineOffset(content: string, lineNumber: number): number {
   return content.length;
 }
 
-/** Supports "L42", "L42-L55", and legacy "L42-45" format. */
 export function parseLineHint(lineHint: string): {
   start: number;
   end: number;
@@ -222,7 +220,6 @@ export function findAnchorNormalized({
     const originalStart = windowStart + toOriginal[normalizedIndex];
     const endNormIndex = normalizedIndex + normalizedText.length - 1;
     let originalEnd = windowStart + toOriginal[endNormIndex] + 1;
-    // Extend past trailing whitespace that was collapsed during normalization
     while (originalEnd < source.length && /\s/.test(source[originalEnd])) {
       originalEnd++;
     }
@@ -318,7 +315,6 @@ export function findAnchorFuzzy({
   return bestMatch;
 }
 
-/** Fallback chain: exact → normalized → fuzzy. */
 export function findAnchorWithFallback({
   source,
   selectedText,

package/src/lib/comment-storage.bench.ts

@@ -0,0 +1,49 @@
+import { bench, describe } from "vitest";
+import {
+  COMMENT_FILE_LARGE,
+  COMMENT_FILE_MEDIUM,
+  COMMENT_FILE_OBJ_LARGE,
+  COMMENT_FILE_OBJ_MEDIUM,
+  COMMENT_FILE_OBJ_SMALL,
+  COMMENT_FILE_SMALL,
+  LARGE_DOC,
+} from "./__fixtures__/bench-data";
+import {
+  computeHash,
+  parseCommentFile,
+  serializeComments,
+} from "./comment-storage";
+
+describe("parseCommentFile", () => {
+  bench("1 comment", () => {
+    parseCommentFile(COMMENT_FILE_SMALL);
+  });
+
+  bench("10 comments", () => {
+    parseCommentFile(COMMENT_FILE_MEDIUM);
+  });
+
+  bench("50 comments", () => {
+    parseCommentFile(COMMENT_FILE_LARGE);
+  });
+});
+
+describe("serializeComments", () => {
+  bench("1 comment", () => {
+    serializeComments(COMMENT_FILE_OBJ_SMALL);
+  });
+
+  bench("10 comments", () => {
+    serializeComments(COMMENT_FILE_OBJ_MEDIUM);
+  });
+
+  bench("50 comments", () => {
+    serializeComments(COMMENT_FILE_OBJ_LARGE);
+  });
+});
+
+describe("computeHash", () => {
+  bench("300-line document", () => {
+    computeHash(LARGE_DOC);
+  });
+});