@peaske7/readit 0.1.7 → 0.2.0

package/src/hooks/useComments.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
+import { AnchorConfidences, type Comment } from "../schema";
 import { appStore, useAppStore } from "../store";
-import { AnchorConfidences, type Comment } from "../types";
 
 interface UseCommentsOptions {
   clean?: boolean;
@@ -26,17 +26,12 @@ interface UseCommentsResult {
   ) => void;
 }
 
-/**
- * Hook for managing comments with optimistic updates.
- * State lives in the Zustand store; this hook coordinates API mutations.
- */
 export function useComments(
   filePath: string | null,
   options: UseCommentsOptions = {},
 ): UseCommentsResult {
   const { clean = false } = options;
 
-  // Read comments and error from the store
   const comments = useAppStore(
     (s) => s.documents.get(filePath ?? "")?.comments ?? [],
   );
@@ -44,16 +39,12 @@ export function useComments(
     (s) => s.documents.get(filePath ?? "")?.commentsError ?? undefined,
   );
 
-  // Track pending operations for rollback on error
   const pendingOperations = useRef<Map<string, Comment[]>>(new Map());
 
-  // Capture filePath at call time for stable closures
+  // Capture filePath at call time so callbacks stay stable across renders
   const filePathRef = useRef(filePath);
   filePathRef.current = filePath;
 
-  /**
-   * Execute an optimistic mutation with automatic rollback on error.
-   */
   const executeMutation = useCallback(
     async <T>({
       operationId,
@@ -71,19 +62,16 @@ export function useComments(
       const fp = filePathRef.current;
       if (!fp) return;
 
-      // Read current comments from store for rollback
       const currentDocState = appStore.getState().documents.get(fp);
       const previousComments = [...(currentDocState?.comments ?? [])];
       pendingOperations.current.set(operationId, previousComments);
 
-      // Apply optimistic update
       appStore.getState().setComments(optimisticUpdate(previousComments), fp);
       appStore.getState().setCommentsError(null, fp);
 
       try {
         const result = await apiCall();
 
-        // Apply server response transformation if provided
         if (onSuccess) {
           const current = appStore.getState().documents.get(fp)?.comments ?? [];
           appStore.getState().setComments(onSuccess(result, current), fp);
@@ -97,7 +85,6 @@ export function useComments(
             fp,
           );
 
-        // Rollback on error
         const rollback = pendingOperations.current.get(operationId);
         if (rollback) {
           appStore.getState().setComments(rollback, fp);
@@ -109,23 +96,24 @@ export function useComments(
     [],
   );
 
-  // Build path-scoped API URL
   const pathQuery = useCallback((base: string) => {
     const fp = filePathRef.current;
     if (!fp) return base;
     return `${base}?path=${encodeURIComponent(fp)}`;
   }, []);
 
-  // Load comments from API
   useEffect(() => {
     if (!filePath) return;
 
+    // Skip fetch if comments were already pre-fetched by useDocument (parallel loading)
+    const existing = appStore.getState().documents.get(filePath);
+    if (!clean && existing && existing.comments.length > 0) return;
+
     const loadComments = async () => {
       appStore.getState().setCommentsError(null, filePath);
       const query = `?path=${encodeURIComponent(filePath)}`;
 
       try {
-        // If clean flag is set, clear comments first
         if (clean) {
           await fetch(`/api/comments${query}`, { method: "DELETE" });
           appStore.getState().setComments([], filePath);

package/src/hooks/useDocument.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
+import type { Document } from "../schema";
 import { appStore, useAppStore } from "../store";
-import type { Document } from "../types";
 
 interface UseDocumentResult {
   document: Document | null;
@@ -13,30 +13,20 @@ interface UseDocumentResult {
 interface DocListItem {
   path: string;
   fileName: string;
-  type: Document["type"];
 }
 
-/**
- * Manage multi-document loading, lazy content fetching, and live reloading.
- *
- * On mount: fetches the document list from `/api/documents` and opens all
- * files in the store. Content is loaded lazily when a tab becomes active.
- * SSE events trigger content updates for already-loaded documents.
- */
 export function useDocument(): UseDocumentResult {
   const [error, setError] = useState<string | null>(null);
   const [isInitialized, setIsInitialized] = useState(false);
 
   const activeDocumentPath = useAppStore((s) => s.activeDocumentPath);
 
-  // Active document — null until content is loaded
   const document = useAppStore((s) => {
     const ds = s.getActiveDocumentState();
-    if (!ds || !ds.document.content) return null;
+    if (!ds?.document.content) return null;
     return ds.document;
   });
 
-  // Fetch document list on mount, populate store
   useEffect(() => {
     async function init() {
       try {
@@ -51,8 +41,7 @@ export function useDocument(): UseDocumentResult {
         data.files.forEach((file: DocListItem, index: number) => {
           appStore.getState().openDocument(
             {
-              content: "", // Content loaded lazily on tab activation
-              type: file.type,
+              content: "",
               filePath: file.path,
               fileName: file.fileName,
               clean,
@@ -71,32 +60,46 @@ export function useDocument(): UseDocumentResult {
     init();
   }, []);
 
-  // Load content when active document changes and has no content yet
   useEffect(() => {
     if (!activeDocumentPath) return;
     const state = appStore.getState().documents.get(activeDocumentPath);
     if (!state || state.document.content) return;
 
-    async function loadContent() {
-      try {
-        const res = await fetch(
-          `/api/document?path=${encodeURIComponent(activeDocumentPath!)}`,
-        );
-        if (!res.ok) throw new Error(`Server error: ${res.status}`);
-        const data = await res.json();
-        appStore
-          .getState()
-          .updateDocumentContent(data.content, activeDocumentPath!);
-      } catch (err) {
+    const path = activeDocumentPath;
+    const query = `?path=${encodeURIComponent(path)}`;
+    const isClean = state.document.clean;
+
+    // Fetch document content and comments in parallel so highlights
+    // can apply immediately when CommentProvider mounts.
+    const docFetch = fetch(`/api/document${query}`).then((r) => {
+      if (!r.ok) throw new Error(`Server error: ${r.status}`);
+      return r.json();
+    });
+
+    const commentsFetch = isClean
+      ? fetch(`/api/comments${query}`, { method: "DELETE" }).then(
+          () => [] as unknown[],
+        )
+      : fetch(`/api/comments${query}`)
+          .then((r) => (r.ok ? r.json() : { comments: [] }))
+          .then((d) => d.comments || []);
+
+    Promise.all([docFetch, commentsFetch]).then(
+      ([docData, comments]) => {
+        // Set comments BEFORE content: content triggers CommentProvider mount,
+        // so comments must already be in the store to avoid a wasted empty render.
+        appStore.getState().setComments(comments, path);
+        appStore.getState().updateDocumentContent(docData.content, path);
+      },
+      (err) => {
         setError(
           err instanceof Error ? err.message : "Failed to load document",
         );
-      }
-    }
-    loadContent();
+      },
+    );
   }, [activeDocumentPath]);
 
-  // SSE: register new documents without stealing focus; reload loaded docs on updates
+  // SSE: register new documents without stealing focus; reload already-loaded docs on updates
   useEffect(() => {
     const eventSource = new EventSource("/api/document/stream");
     eventSource.onmessage = async (e) => {
@@ -105,8 +108,7 @@ export function useDocument(): UseDocumentResult {
         if (data.type === "document-added" && data.path) {
           appStore.getState().openDocument(
             {
-              content: "", // Lazy-loaded when tab activated
-              type: data.fileType,
+              content: "",
               filePath: data.path,
               fileName: data.fileName,
               clean: false,
@@ -116,9 +118,8 @@ export function useDocument(): UseDocumentResult {
           return;
         }
         if (data.type === "document-updated" && data.path) {
-          // Only reload if content was previously loaded
           const state = appStore.getState().documents.get(data.path);
-          if (!state || !state.document.content) return;
+          if (!state?.document.content) return;
 
           const res = await fetch(
             `/api/document?path=${encodeURIComponent(data.path)}`,

package/src/hooks/useHeadings.test.ts

@@ -2,13 +2,13 @@ import { renderHook } from "@testing-library/react";
 import { describe, expect, it } from "vitest";
 import { useHeadings } from "./useHeadings";
 
-describe("useHeadings - markdown", () => {
+describe("useHeadings", () => {
   it("extracts basic headings", () => {
     const content = `# Heading 1
 ## Heading 2
 ### Heading 3`;
 
-    const { result } = renderHook(() => useHeadings(content, "markdown"));
+    const { result } = renderHook(() => useHeadings(content));
 
     expect(result.current).toEqual([
       { id: "heading-1", text: "Heading 1", level: 1 },
@@ -22,7 +22,7 @@ describe("useHeadings - markdown", () => {
 ## Section
 ## Section`;
 
-    const { result } = renderHook(() => useHeadings(content, "markdown"));
+    const { result } = renderHook(() => useHeadings(content));
 
     expect(result.current).toEqual([
       { id: "section", text: "Section", level: 2 },
@@ -41,7 +41,7 @@ echo "hello"
 
 ## Another Real Heading`;
 
-    const { result } = renderHook(() => useHeadings(content, "markdown"));
+    const { result } = renderHook(() => useHeadings(content));
 
     expect(result.current).toEqual([
       { id: "real-heading", text: "Real Heading", level: 1 },
@@ -60,7 +60,7 @@ def foo():
 
 ## Another Real Heading`;
 
-    const { result } = renderHook(() => useHeadings(content, "markdown"));
+    const { result } = renderHook(() => useHeadings(content));
 
     expect(result.current).toEqual([
       { id: "real-heading", text: "Real Heading", level: 1 },
@@ -83,7 +83,7 @@ def foo():
 
 ## Results`;
 
-    const { result } = renderHook(() => useHeadings(content, "markdown"));
+    const { result } = renderHook(() => useHeadings(content));
 
     expect(result.current).toEqual([
       { id: "introduction", text: "Introduction", level: 1 },
@@ -102,7 +102,7 @@ npx readit document.md --port 3000
 
 ## Usage`;
 
-    const { result } = renderHook(() => useHeadings(content, "markdown"));
+    const { result } = renderHook(() => useHeadings(content));
 
     expect(result.current).toEqual([
       { id: "setup", text: "Setup", level: 1 },
@@ -111,49 +111,7 @@ npx readit document.md --port 3000
   });
 
   it("returns empty array for null content", () => {
-    const { result } = renderHook(() => useHeadings(null, "markdown"));
+    const { result } = renderHook(() => useHeadings(null));
     expect(result.current).toEqual([]);
   });
-
-  it("returns empty array for null type", () => {
-    const { result } = renderHook(() => useHeadings("# Heading", null));
-    expect(result.current).toEqual([]);
-  });
-});
-
-describe("useHeadings - html", () => {
-  it("extracts basic headings", () => {
-    const content = `<h1>Heading 1</h1>
-<h2>Heading 2</h2>
-<h3>Heading 3</h3>`;
-
-    const { result } = renderHook(() => useHeadings(content, "html"));
-
-    expect(result.current).toEqual([
-      { id: "heading-1", text: "Heading 1", level: 1 },
-      { id: "heading-2", text: "Heading 2", level: 2 },
-      { id: "heading-3", text: "Heading 3", level: 3 },
-    ]);
-  });
-
-  it("uses existing id attribute", () => {
-    const content = `<h1 id="custom-id">Heading 1</h1>`;
-
-    const { result } = renderHook(() => useHeadings(content, "html"));
-
-    expect(result.current).toEqual([
-      { id: "custom-id", text: "Heading 1", level: 1 },
-    ]);
-  });
-
-  it("decodes HTML entities", () => {
-    const content = `<h1>Hello &amp; World</h1>`;
-
-    const { result } = renderHook(() => useHeadings(content, "html"));
-
-    // Note: & is stripped, leaving "Hello  World" → "hello-world" (hyphens collapsed)
-    expect(result.current).toEqual([
-      { id: "hello-world", text: "Hello & World", level: 1 },
-    ]);
-  });
 });

package/src/hooks/useHeadings.ts

@@ -1,6 +1,5 @@
 import { useMemo } from "react";
 import { slugify } from "../lib/utils";
-import type { DocumentType } from "../types";
 
 export interface Heading {
   id: string;
@@ -8,29 +7,17 @@ export interface Heading {
   level: 1 | 2 | 3 | 4 | 5 | 6;
 }
 
-/**
- * Remove code blocks from markdown content.
- * Handles both fenced (```) and indented (4 spaces) code blocks.
- */
 function stripCodeBlocks(content: string): string {
-  // Remove fenced code blocks (``` or ~~~)
   let result = content.replace(/^(`{3,}|~{3,}).*$[\s\S]*?^\1\s*$/gm, "");
-
-  // Remove indented code blocks (4 spaces or 1 tab at start of line)
-  // Only remove if preceded by a blank line (to avoid removing list items)
+  // Only remove indented blocks preceded by a blank line (avoids removing list items)
   result = result.replace(/(?:^|\n\n)((?:(?:[ ]{4}|\t).+\n?)+)/g, "\n\n");
 
   return result;
 }
 
-/**
- * Extract headings from markdown content
- */
 function parseMarkdownHeadings(content: string): Heading[] {
   const headings: Heading[] = [];
   const seenIds = new Map<string, number>();
-
-  // Strip code blocks to avoid matching # comments in code
   const contentWithoutCode = stripCodeBlocks(content);
 
   const regex = /^(#{1,6})\s+(.+)$/gm;
@@ -51,79 +38,9 @@ function parseMarkdownHeadings(content: string): Heading[] {
   return headings;
 }
 
-/**
- * Generate ID matching the iframe's ensureHeadingIds algorithm.
- * Note: This differs from utils/slugify - it strips underscores to match
- * the iframe script's ID generation exactly.
- */
-function generateHeadingId(text: string): string {
-  return text
-    .toLowerCase()
-    .trim()
-    .replace(/[^a-z0-9 -]/g, "")
-    .replace(/ +/g, "-")
-    .replace(/-+/g, "-");
-}
-
-/**
- * Extract headings from HTML content
- */
-function parseHtmlHeadings(content: string): Heading[] {
-  const headings: Heading[] = [];
-  const seenIds = new Map<string, number>();
-
-  // Match h1-h6 tags, capturing attributes and text content
-  const regex = /<h([1-6])([^>]*)>([^<]+)<\/h\1>/gi;
-  let match = regex.exec(content);
-
-  while (match !== null) {
-    const level = Number.parseInt(match[1], 10) as 1 | 2 | 3 | 4 | 5 | 6;
-    const attributes = match[2];
-    // Strip any remaining HTML tags and decode entities
-    const text = match[3]
-      .replace(/<[^>]+>/g, "")
-      .replace(/&amp;/g, "&")
-      .replace(/&lt;/g, "<")
-      .replace(/&gt;/g, ">")
-      .replace(/&quot;/g, '"')
-      .trim();
-
-    if (text) {
-      // Extract existing id attribute if present
-      const idMatch = /\sid=["']([^"']+)["']/i.exec(attributes);
-
-      // Use existing ID or generate one with duplicate handling
-      const id = idMatch
-        ? idMatch[1]
-        : (() => {
-            const baseId = generateHeadingId(text);
-            const count = seenIds.get(baseId) ?? 0;
-            seenIds.set(baseId, count + 1);
-            return count > 0 ? `${baseId}-${count}` : baseId;
-          })();
-
-      headings.push({ id, text, level });
-    }
-    match = regex.exec(content);
-  }
-
-  return headings;
-}
-
-/**
- * Hook to extract headings from document content
- */
-export function useHeadings(
-  content: string | null,
-  type: DocumentType | null,
-): Heading[] {
+export function useHeadings(content: string | null): Heading[] {
   return useMemo(() => {
-    if (!content || !type) return [];
-
-    if (type === "markdown") {
-      return parseMarkdownHeadings(content);
-    }
-
-    return parseHtmlHeadings(content);
-  }, [content, type]);
+    if (!content) return [];
+    return parseMarkdownHeadings(content);
+  }, [content]);
 }

package/src/hooks/useScrollSpy.ts

@@ -1,21 +1,21 @@
 import { useEffect, useRef, useState } from "react";
 
-/**
- * Hook to track which heading is currently in view
- * Uses IntersectionObserver to detect when headings enter the "active zone"
- */
-export function useScrollSpy(headingIds: string[]): string | null {
+export function useScrollSpy(
+  headingIds: string[],
+  enabled = true,
+): string | null {
   const [activeId, setActiveId] = useState<string | null>(null);
   const hasSetInitialRef = useRef(false);
 
   useEffect(() => {
-    if (headingIds.length === 0) {
-      setActiveId(null);
-      hasSetInitialRef.current = false;
+    if (!enabled || headingIds.length === 0) {
+      if (headingIds.length === 0) {
+        setActiveId(null);
+        hasSetInitialRef.current = false;
+      }
       return;
     }
 
-    // Track visible headings and their positions
     const visibleHeadings = new Map<string, number>();
 
     const observer = new IntersectionObserver(
@@ -24,20 +24,17 @@ export function useScrollSpy(headingIds: string[]): string | null {
           const id = entry.target.id;
 
           if (entry.isIntersecting) {
-            // Store the top position when heading becomes visible
             visibleHeadings.set(id, entry.boundingClientRect.top);
           } else {
             visibleHeadings.delete(id);
           }
         }
 
-        // Find the heading closest to the top of the viewport
         if (visibleHeadings.size > 0) {
           let closestId: string | null = null;
           let closestDistance = Number.POSITIVE_INFINITY;
 
           for (const [id, top] of visibleHeadings) {
-            // Prefer headings that are near the top but still visible
             const distance = Math.abs(top);
             if (distance < closestDistance) {
               closestDistance = distance;
@@ -64,7 +61,6 @@ export function useScrollSpy(headingIds: string[]): string | null {
       hasSetInitialRef.current = true;
     }
 
-    // Observe all headings
     for (const id of headingIds) {
       const element = document.getElementById(id);
       if (element) {
@@ -75,7 +71,7 @@ export function useScrollSpy(headingIds: string[]): string | null {
     return () => {
       observer.disconnect();
     };
-  }, [headingIds]);
+  }, [headingIds, enabled]);
 
   return activeId;
 }

package/src/hooks/useTextSelection.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from "react";
+import type { Selection } from "../schema";
 import { appStore, useAppStore } from "../store";
-import type { Selection } from "../types";
 
 /** Remove pending highlight marks from the DOM without triggering a full clear/reapply cycle. */
 function clearPendingMarks() {
@@ -14,8 +14,6 @@ function clearPendingMarks() {
 
 interface UseTextSelectionResult {
   selection: Selection | null;
-  highlightPositions: Record<string, number>;
-  documentPositions: Record<string, number>;
   pendingSelectionTop: number | undefined;
   onTextSelect: (
     text: string,
@@ -23,28 +21,13 @@ interface UseTextSelectionResult {
     endOffset: number,
     selectionTop: number,
   ) => void;
-  onPositionsChange: (
-    positions: Record<string, number>,
-    docPositions: Record<string, number>,
-    pendingTop?: number,
-  ) => void;
   clearSelection: () => void;
 }
 
-/**
- * Manage text selection state, highlight positions, and click-outside dismissal.
- * State lives in the Zustand store for tab-switch preservation.
- */
 export function useTextSelection(): UseTextSelectionResult {
   const selection = useAppStore(
     (s) => s.getActiveDocumentState()?.selection ?? null,
   );
-  const highlightPositions = useAppStore(
-    (s) => s.getActiveDocumentState()?.highlightPositions ?? {},
-  );
-  const documentPositions = useAppStore(
-    (s) => s.getActiveDocumentState()?.documentPositions ?? {},
-  );
   const pendingSelectionTop = useAppStore(
     (s) => s.getActiveDocumentState()?.pendingSelectionTop,
   );
@@ -54,15 +37,10 @@ export function useTextSelection(): UseTextSelectionResult {
 
     const handleClickOutside = (e: MouseEvent) => {
       const target = e.target as HTMLElement;
-
-      // Don't clear if clicking inside the comment input area
       if (target.closest("[data-comment-input]")) return;
-
-      // Don't clear if clicking on any highlight (pending or comment)
       if (target.closest("mark[data-pending]")) return;
       if (target.closest("mark[data-comment-id]")) return;
 
-      // Clear selection state and pending marks
       appStore.getState().setSelection(null);
       appStore.getState().setPendingSelectionTop(undefined);
       clearPendingMarks();
@@ -92,18 +70,6 @@ export function useTextSelection(): UseTextSelectionResult {
     [],
   );
 
-  const onPositionsChange = useCallback(
-    (
-      positions: Record<string, number>,
-      docPositions: Record<string, number>,
-      _pendingTop?: number,
-    ) => {
-      appStore.getState().setHighlightPositions(positions);
-      appStore.getState().setDocumentPositions(docPositions);
-    },
-    [],
-  );
-
   const clearSelection = useCallback(() => {
     appStore.getState().setSelection(null);
     appStore.getState().setPendingSelectionTop(undefined);
@@ -113,11 +79,8 @@ export function useTextSelection(): UseTextSelectionResult {
 
   return {
     selection,
-    highlightPositions,
-    documentPositions,
     pendingSelectionTop,
     onTextSelect,
-    onPositionsChange,
     clearSelection,
   };
 }

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

@@ -1,4 +1,4 @@
-import type { Comment, CommentFile } from "../../types";
+import type { Comment, CommentFile } from "../../schema";
 import { serializeComments } from "../comment-storage";
 
 // --- Document fixtures ---
@@ -125,43 +125,3 @@ export const COMMENT_FILE_OBJ_LARGE = makeCommentFile(COMMENTS_50);
 export const COMMENT_FILE_SMALL = serializeComments(COMMENT_FILE_OBJ_SMALL);
 export const COMMENT_FILE_MEDIUM = serializeComments(COMMENT_FILE_OBJ_MEDIUM);
 export const COMMENT_FILE_LARGE = serializeComments(COMMENT_FILE_OBJ_LARGE);
-
-// --- Highlight position fixtures ---
-
-export function makeHighlightPositions(count: number): Record<string, number> {
-  const positions: Record<string, number> = {};
-  for (let i = 0; i < count; i++) {
-    // ~200px spacing with clustering every 3rd note for overlap scenarios
-    positions[`c${i}`] = i * 200 + (i % 3 === 0 ? 50 : 0);
-  }
-  return positions;
-}
-
-// --- HTML fixture ---
-
-function generateHtmlDoc(): string {
-  const parts: string[] = [
-    "<!DOCTYPE html>",
-    "<html><head>",
-    "<style>.main { color: red; font-size: 16px; }</style>",
-    "<script>console.log('test script');</script>",
-    "</head><body>",
-  ];
-
-  for (let i = 0; i < 30; i++) {
-    parts.push(`<section id="s${i}">`);
-    parts.push(`<h2>Section ${i}</h2>`);
-    parts.push(
-      `<p>Paragraph with &amp; entities &lt;and&gt; special &quot;chars&quot; in section ${i}.</p>`,
-    );
-    parts.push(
-      `<ul><li>Item ${i}.1</li><li>Item ${i}.2</li><li>Item ${i}.3</li></ul>`,
-    );
-    parts.push("</section>");
-  }
-
-  parts.push("</body></html>");
-  return parts.join("\n");
-}
-
-export const HTML_DOC = generateHtmlDoc();