@peaske7/readit 0.1.6 → 0.1.8

package/src/index.css

@@ -56,17 +56,18 @@ html {
   --scrollbar-thumb-hover: #aaaaaa;
 
   /* Prose */
-  --prose-body: #3f3f46;
-  --prose-headings: #18181b;
+  --prose-body: #374151;
+  --prose-headings: #111827;
   --prose-links: #2563eb;
   --prose-links-hover: #1d4ed8;
-  --prose-bold: #18181b;
-  --prose-code-bg: #f4f4f5;
-  --prose-border: #e4e4e7;
-  --prose-table-header-bg: #fafafa;
-  --prose-table-even-bg: #fafafa;
-  --prose-blockquote: #71717a;
-  --prose-summary-marker: #a1a1aa;
+  --prose-bold: #111827;
+  --prose-code-bg: #e8e8ec;
+  --prose-border: #e5e7eb;
+  --prose-table-header-bg: #f9fafb;
+  --prose-table-even-bg: #f9fafb;
+  --prose-blockquote: #6b7280;
+  --prose-blockquote-border: #d1d5db;
+  --prose-summary-marker: #9ca3af;
 
   /* TOC */
   --toc-text: rgba(26, 26, 26, 0.5);
@@ -113,15 +114,16 @@ html {
   --scrollbar-thumb-hover: #71717a;
 
   --prose-body: #d4d4d8;
-  --prose-headings: #fafafa;
+  --prose-headings: #f4f4f5;
   --prose-links: #60a5fa;
   --prose-links-hover: #93c5fd;
-  --prose-bold: #fafafa;
-  --prose-code-bg: #27272a;
+  --prose-bold: #f4f4f5;
+  --prose-code-bg: #323238;
   --prose-border: #3f3f46;
   --prose-table-header-bg: #27272a;
   --prose-table-even-bg: #1f1f23;
   --prose-blockquote: #a1a1aa;
+  --prose-blockquote-border: #52525b;
   --prose-summary-marker: #71717a;
 
   --toc-text: rgba(228, 228, 231, 0.5);
@@ -467,6 +469,7 @@ mark[data-pending] {
   color: var(--prose-body);
   user-select: text;
   -webkit-user-select: text;
+  letter-spacing: -0.011em;
 }
 
 /* Headings */
@@ -477,27 +480,43 @@ mark[data-pending] {
 .prose h5,
 .prose h6 {
   font-weight: 600;
-  line-height: 1.25;
+  line-height: 1.3;
   margin-top: 2em;
   margin-bottom: 0.75em;
   color: var(--prose-headings);
+  letter-spacing: -0.02em;
 }
 
 .prose h1 {
   font-size: 2.25em;
   margin-top: 0;
+  margin-bottom: 0.889em;
+  font-weight: 800;
+  line-height: 1.111;
 }
 
 .prose h2 {
   font-size: 1.5em;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  font-weight: 700;
+  line-height: 1.333;
+  padding-bottom: 0.4em;
+  border-bottom: 1px solid var(--prose-border);
 }
 
 .prose h3 {
   font-size: 1.25em;
+  margin-top: 1.6em;
+  margin-bottom: 0.6em;
+  line-height: 1.6;
 }
 
 .prose h4 {
-  font-size: 1.125em;
+  font-size: 1.1em;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.5;
 }
 
 /* Paragraphs and spacing */
@@ -516,12 +535,21 @@ mark[data-pending] {
 /* Lists */
 .prose ul,
 .prose ol {
-  padding-left: 1.5em;
+  padding-left: 1.625em;
   margin: 1.25em 0;
 }
 
 .prose li {
   margin: 0.5em 0;
+  padding-left: 0.375em;
+}
+
+.prose li::marker {
+  color: #9ca3af;
+}
+
+.dark .prose li::marker {
+  color: #6b7280;
 }
 
 .prose ul {
@@ -535,46 +563,67 @@ mark[data-pending] {
 /* Nested lists */
 .prose li > ul,
 .prose li > ol {
-  margin: 0.5em 0;
+  margin: 0.35em 0;
 }
 
 /* Code */
 .prose code {
   background: var(--prose-code-bg);
-  padding: 0.2em 0.4em;
-  border-radius: 0.25em;
-  font-size: 0.875em;
+  padding: 0.15em 0.4em;
+  border-radius: 0.3em;
+  font-size: 0.85em;
+  font-weight: 500;
 }
 
 .prose pre {
-  margin: 1.5em 0;
+  margin: 1.75em 0;
 }
 
 .prose pre code {
   background: transparent;
   padding: 0;
-  font-size: 0.875em;
+  font-size: 0.85em;
+  font-weight: 400;
   color: inherit;
 }
 
+/* Editor links — clickable file paths */
+.prose a.editor-link {
+  text-decoration: none;
+  color: inherit;
+  border-bottom: 1px dashed var(--prose-links);
+  transition: border-color 0.15s;
+}
+
+.prose a.editor-link:hover {
+  border-bottom-style: solid;
+}
+
+.prose a.editor-link code {
+  cursor: pointer;
+}
+
 /* Tables */
 .prose table {
   width: 100%;
   border-collapse: collapse;
-  margin: 1.5em 0;
+  margin: 1.75em 0;
   font-size: 0.9em;
 }
 
 .prose th,
 .prose td {
   border: 1px solid var(--prose-border);
-  padding: 0.75em 1em;
+  padding: 0.625em 1em;
   text-align: left;
+  line-height: 1.6;
 }
 
 .prose th {
   background: var(--prose-table-header-bg);
   font-weight: 600;
+  font-size: 0.875em;
+  letter-spacing: 0.01em;
 }
 
 .prose tr:nth-child(even) {
@@ -583,8 +632,8 @@ mark[data-pending] {
 
 /* Blockquotes */
 .prose blockquote {
-  border-left: 4px solid var(--prose-border);
-  padding-left: 1em;
+  border-left: 3px solid var(--prose-blockquote-border);
+  padding-left: 1.125em;
   margin: 1.5em 0;
   color: var(--prose-blockquote);
   font-style: italic;
@@ -597,7 +646,10 @@ mark[data-pending] {
 /* Links */
 .prose a {
   color: var(--prose-links);
+  font-weight: 500;
   text-decoration: underline;
+  text-underline-offset: 2px;
+  text-decoration-thickness: 1px;
 }
 
 .prose a:hover {
@@ -608,7 +660,7 @@ mark[data-pending] {
 .prose hr {
   border: none;
   border-top: 1px solid var(--prose-border);
-  margin: 2em 0;
+  margin: 3em 0;
 }
 
 /* Task lists (checkboxes) */
@@ -628,12 +680,21 @@ mark[data-pending] {
 .prose strong {
   font-weight: 600;
   color: var(--prose-bold);
+  letter-spacing: -0.01em;
 }
 
 .prose em {
   font-style: italic;
 }
 
+/* First paragraph after heading - tighter spacing */
+.prose h1 + p,
+.prose h2 + p,
+.prose h3 + p,
+.prose h4 + p {
+  margin-top: 0.75em;
+}
+
 /* Fullscreen prose - left-aligned, full width */
 .prose-fullscreen {
   max-width: none;

package/src/lib/editor-links.ts

@@ -0,0 +1,59 @@
+import { type EditorScheme, EditorSchemes } from "../types";
+
+// Known source file extensions — kept broad to cover common languages
+const EXTENSIONS =
+  "ts|tsx|js|jsx|mjs|cjs|json|md|mdx|css|scss|html|htm|py|rs|go|rb|java|kt|yml|yaml|toml|sh|bash|zsh|sql|graphql|gql|vue|svelte|astro|c|cpp|h|hpp|cs|swift|zig|lua|ex|exs|erl|hrl|elm|clj|cljs|ml|mli|fs|fsx|r|jl|dart|tf|hcl|proto|xml|svg";
+
+// Match file paths with known extensions and optional :line[:col] suffix
+// Requires at least one `/` to avoid matching bare filenames like "README.md"
+const FILE_PATH_RE = new RegExp(
+  `^(?:\\.\\.\\/|\\.\\/)?((?:[\\w@.-]+\\/)+[\\w.-]+\\.(?:${EXTENSIONS}))(?::(\\d+)(?::(\\d+))?)?$`,
+);
+
+export interface FilePathMatch {
+  path: string;
+  line?: number;
+  col?: number;
+}
+
+export function parseFilePath(text: string): FilePathMatch | undefined {
+  const match = FILE_PATH_RE.exec(text.trim());
+  if (!match) return undefined;
+
+  return {
+    path: match[1],
+    line: match[2] ? Number.parseInt(match[2], 10) : undefined,
+    col: match[3] ? Number.parseInt(match[3], 10) : undefined,
+  };
+}
+
+export function buildEditorUri(
+  scheme: EditorScheme,
+  absolutePath: string,
+  line?: number,
+  col?: number,
+): string {
+  if (scheme === EditorSchemes.NONE) return "";
+
+  // vscode://file/path:line:col
+  let uri = `${scheme}://file/${absolutePath}`;
+  if (line !== undefined) {
+    uri += `:${line}`;
+    if (col !== undefined) {
+      uri += `:${col}`;
+    }
+  }
+  return uri;
+}
+
+export function resolveAbsolutePath(
+  relativePath: string,
+  workingDirectory: string,
+): string {
+  if (relativePath.startsWith("/")) return relativePath;
+
+  const base = workingDirectory.endsWith("/")
+    ? workingDirectory
+    : `${workingDirectory}/`;
+  return `${base}${relativePath}`;
+}

package/src/lib/highlight/dom.ts

@@ -147,6 +147,21 @@ export function collectTextNodes(root: Node): TextNodeInfo[] {
 export interface ExtendedHighlightStyle extends HighlightStyle {
   colorIndex?: number;
   isBracketMode?: boolean;
+  isBracketStart?: boolean;
+  isBracketEnd?: boolean;
+}
+
+interface BatchedHighlightSegment {
+  startOffset: number;
+  endOffset: number;
+  style: ExtendedHighlightStyle;
+}
+
+interface NodeSegment {
+  start: number;
+  end: number;
+  style: ExtendedHighlightStyle;
+  order: number;
 }
 
 /**
@@ -217,78 +232,135 @@ export function applyHighlightToRange(
   }
 }
 
-/**
- * Apply highlight with extended styling (color index, bracket mode) for saved comments.
- */
-export function applyHighlightWithStyle(
-  root: HTMLElement,
-  textContent: string,
-  startOffset: number,
-  endOffset: number,
+function createStyledMark(
+  text: string,
   style: ExtendedHighlightStyle,
-): void {
-  const textNodes = collectTextNodes(root);
-  const overlappingNodes = textNodes.filter(
-    (n) => n.end > startOffset && n.start < endOffset,
-  );
+): HTMLElement {
+  const mark = document.createElement("mark");
+  mark.setAttribute(style.attribute, style.attributeValue);
 
-  if (overlappingNodes.length === 0) {
-    return;
+  if (style.colorIndex !== undefined) {
+    mark.setAttribute("data-color-index", String(style.colorIndex % 4));
   }
 
-  const lineCount = countLinesInRange(textContent, startOffset, endOffset);
-  const useBracketMode =
-    style.isBracketMode ?? lineCount >= BRACKET_MODE_LINE_THRESHOLD;
+  if (style.isBracketMode) {
+    mark.setAttribute("data-bracket-mode", "true");
+    if (style.isBracketStart) {
+      mark.setAttribute("data-bracket-start", "true");
+    }
+    if (style.isBracketEnd) {
+      mark.setAttribute("data-bracket-end", "true");
+    }
+  }
 
-  let isFirst = true;
+  mark.textContent = text;
+  return mark;
+}
 
-  for (let i = 0; i < overlappingNodes.length; i++) {
-    const { node: textNode, start } = overlappingNodes[i];
-    const isLast = i === overlappingNodes.length - 1;
+function normalizeNodeSegments(segments: NodeSegment[]): NodeSegment[] {
+  const sorted = [...segments].sort((a, b) => {
+    if (a.start !== b.start) return a.start - b.start;
+    if (a.end !== b.end) return b.end - a.end;
+    return a.order - b.order;
+  });
 
-    const nodeStart = Math.max(0, startOffset - start);
-    const nodeEnd = Math.min(textNode.length, endOffset - start);
+  const normalized: NodeSegment[] = [];
+  let coveredUntil = 0;
 
-    if (nodeStart >= nodeEnd) {
-      continue;
-    }
+  for (const segment of sorted) {
+    const start = Math.max(segment.start, coveredUntil);
+    if (start >= segment.end) continue;
 
-    const range = document.createRange();
-    range.setStart(textNode, nodeStart);
-    range.setEnd(textNode, nodeEnd);
+    normalized.push({ ...segment, start });
+    coveredUntil = segment.end;
+  }
 
-    const mark = document.createElement("mark");
-    mark.setAttribute(style.attribute, style.attributeValue);
+  return normalized;
+}
+
+export function applyHighlightBatch(
+  root: HTMLElement,
+  textContent: string,
+  highlights: BatchedHighlightSegment[],
+): void {
+  if (highlights.length === 0) return;
 
-    if (style.colorIndex !== undefined) {
-      mark.setAttribute("data-color-index", String(style.colorIndex % 4));
+  const textNodes = collectTextNodes(root);
+  const segmentsByNode = new Map<Text, NodeSegment[]>();
+
+  for (
+    let highlightIndex = 0;
+    highlightIndex < highlights.length;
+    highlightIndex++
+  ) {
+    const highlight = highlights[highlightIndex];
+    const overlappingNodes = textNodes.filter(
+      (n) => n.end > highlight.startOffset && n.start < highlight.endOffset,
+    );
+
+    if (overlappingNodes.length === 0) continue;
+
+    const lineCount = countLinesInRange(
+      textContent,
+      highlight.startOffset,
+      highlight.endOffset,
+    );
+    const useBracketMode =
+      highlight.style.isBracketMode ?? lineCount >= BRACKET_MODE_LINE_THRESHOLD;
+
+    for (let nodeIndex = 0; nodeIndex < overlappingNodes.length; nodeIndex++) {
+      const { node, start } = overlappingNodes[nodeIndex];
+      const localStart = Math.max(0, highlight.startOffset - start);
+      const localEnd = Math.min(node.length, highlight.endOffset - start);
+
+      if (localStart >= localEnd) continue;
+
+      const nodeSegments = segmentsByNode.get(node) ?? [];
+      nodeSegments.push({
+        start: localStart,
+        end: localEnd,
+        order: highlightIndex,
+        style: {
+          ...highlight.style,
+          isBracketMode: useBracketMode,
+          isBracketStart: useBracketMode && nodeIndex === 0,
+          isBracketEnd:
+            useBracketMode && nodeIndex === overlappingNodes.length - 1,
+        },
+      });
+      segmentsByNode.set(node, nodeSegments);
     }
+  }
 
-    if (useBracketMode) {
-      mark.setAttribute("data-bracket-mode", "true");
-      if (isFirst) {
-        mark.setAttribute("data-bracket-start", "true");
-      }
-      if (isLast) {
-        mark.setAttribute("data-bracket-end", "true");
+  for (const { node } of textNodes) {
+    const segments = segmentsByNode.get(node);
+    if (!segments || segments.length === 0) continue;
+
+    const normalized = normalizeNodeSegments(segments);
+    if (normalized.length === 0) continue;
+
+    const text = node.textContent ?? "";
+    const fragment = document.createDocumentFragment();
+    let cursor = 0;
+
+    for (const segment of normalized) {
+      if (cursor < segment.start) {
+        fragment.appendChild(
+          document.createTextNode(text.slice(cursor, segment.start)),
+        );
       }
+
+      fragment.appendChild(
+        createStyledMark(text.slice(segment.start, segment.end), segment.style),
+      );
+      cursor = segment.end;
     }
 
-    try {
-      range.surroundContents(mark);
-    } catch {
-      // Range crosses element boundaries - use extractContents fallback
-      try {
-        const fragment = range.extractContents();
-        mark.appendChild(fragment);
-        range.insertNode(mark);
-      } catch (err) {
-        // Skip if fallback also fails, but log for debugging
-        console.warn("[highlight] Failed to apply styled highlight:", err);
-      }
+    if (cursor < text.length) {
+      fragment.appendChild(document.createTextNode(text.slice(cursor)));
     }
 
-    isFirst = false;
+    node.replaceWith(fragment);
   }
 }
 

package/src/lib/highlight/highlighter.ts

@@ -1,7 +1,7 @@
 import { findTextPosition } from "./core";
 import {
+  applyHighlightBatch,
   applyHighlightToRange,
-  applyHighlightWithStyle,
   clearHighlights,
   collectHighlightPositions,
   getDOMTextContent,
@@ -195,19 +195,19 @@ function createMarkdownHighlighter(options: MarkdownOptions): Highlighter {
         .filter((c): c is HighlightComment => c !== null)
         .sort((a, b) => a.startOffset - b.startOffset);
 
-      for (const comment of resolved) {
-        applyHighlightWithStyle(
-          root,
-          textContent,
-          comment.startOffset,
-          comment.endOffset,
-          {
+      applyHighlightBatch(
+        root,
+        textContent,
+        resolved.map((comment) => ({
+          startOffset: comment.startOffset,
+          endOffset: comment.endOffset,
+          style: {
             attribute: "data-comment-id",
             attributeValue: comment.id,
             colorIndex: 0,
           },
-        );
-      }
+        })),
+      );
 
       // Defer position update to next frame to ensure browser has completed layout
       // after DOM changes from highlight application

package/src/lib/i18n/completeness.test.ts

@@ -0,0 +1,51 @@
+import { describe, expect, it } from "vitest";
+import { en } from "./en";
+import { ja } from "./ja";
+
+describe("translation completeness", () => {
+  const enKeys = Object.keys(en).sort();
+  const jaKeys = Object.keys(ja).sort();
+
+  it("en and ja have the same keys", () => {
+    expect(enKeys).toEqual(jaKeys);
+  });
+
+  // Prefix/suffix keys may be intentionally empty in some locales
+  // (e.g., Japanese has no prefix before the command)
+  const ALLOW_EMPTY = new Set(["app.noDocumentsHintPrefix"]);
+
+  it("no empty string values in en", () => {
+    for (const [key, value] of Object.entries(en)) {
+      if (ALLOW_EMPTY.has(key)) continue;
+      expect(value, `en.${key} is empty`).not.toBe("");
+    }
+  });
+
+  it("no empty string values in ja", () => {
+    for (const [key, value] of Object.entries(ja)) {
+      if (ALLOW_EMPTY.has(key)) continue;
+      expect(value, `ja.${key} is empty`).not.toBe("");
+    }
+  });
+
+  it("interpolation placeholders match between locales", () => {
+    const placeholderPattern = /\{\{(\w+)\}\}/g;
+
+    for (const key of enKeys) {
+      const enValue = en[key as keyof typeof en];
+      const jaValue = ja[key as keyof typeof ja];
+
+      const enPlaceholders = [...enValue.matchAll(placeholderPattern)]
+        .map((m) => m[1])
+        .sort();
+      const jaPlaceholders = [...jaValue.matchAll(placeholderPattern)]
+        .map((m) => m[1])
+        .sort();
+
+      expect(
+        enPlaceholders,
+        `Placeholder mismatch for key "${key}": en has ${JSON.stringify(enPlaceholders)}, ja has ${JSON.stringify(jaPlaceholders)}`,
+      ).toEqual(jaPlaceholders);
+    }
+  });
+});