@peaske7/readit 0.1.4 → 0.1.6

package/src/store/index.test.ts

@@ -0,0 +1,220 @@
+import { beforeEach, describe, expect, it } from "vitest";
+import type { Comment, Document } from "../types";
+import { createAppStore } from "./index";
+
+const mockDoc: Document = {
+  content: "# Hello",
+  type: "markdown",
+  filePath: "/test/file.md",
+  fileName: "file.md",
+  clean: false,
+};
+
+const mockDoc2: Document = {
+  content: "<h1>Hello</h1>",
+  type: "html",
+  filePath: "/test/file.html",
+  fileName: "file.html",
+  clean: false,
+};
+
+const mockComment = {
+  id: "c1",
+  selectedText: "hello",
+  comment: "note",
+  startOffset: 0,
+  endOffset: 5,
+  createdAt: "2026-03-13T00:00:00Z",
+} as Comment;
+
+describe("AppStore", () => {
+  let store: ReturnType<typeof createAppStore>;
+
+  beforeEach(() => {
+    store = createAppStore();
+  });
+
+  describe("openDocument", () => {
+    it("adds document to store and sets as active", () => {
+      store.getState().openDocument(mockDoc);
+      const state = store.getState();
+      expect(state.documents.has("/test/file.md")).toBe(true);
+      expect(state.activeDocumentPath).toBe("/test/file.md");
+      expect(state.documentOrder).toEqual(["/test/file.md"]);
+    });
+
+    it("does not overwrite existing document state", () => {
+      store.getState().openDocument(mockDoc);
+      store.getState().setComments([mockComment]);
+      store.getState().openDocument(mockDoc);
+      expect(
+        store.getState().documents.get("/test/file.md")!.comments,
+      ).toHaveLength(1);
+    });
+
+    it("activates existing document without overwriting", () => {
+      store.getState().openDocument(mockDoc);
+      store.getState().openDocument(mockDoc2);
+      expect(store.getState().activeDocumentPath).toBe("/test/file.html");
+      store.getState().openDocument(mockDoc);
+      expect(store.getState().activeDocumentPath).toBe("/test/file.md");
+      // Order unchanged
+      expect(store.getState().documentOrder).toEqual([
+        "/test/file.md",
+        "/test/file.html",
+      ]);
+    });
+  });
+
+  describe("closeDocument", () => {
+    it("removes document and activates right neighbor", () => {
+      store.getState().openDocument(mockDoc);
+      store.getState().openDocument(mockDoc2);
+      store.getState().setActiveDocument("/test/file.md");
+      store.getState().closeDocument("/test/file.md");
+      expect(store.getState().documents.has("/test/file.md")).toBe(false);
+      expect(store.getState().activeDocumentPath).toBe("/test/file.html");
+    });
+
+    it("activates left neighbor when closing last in order", () => {
+      store.getState().openDocument(mockDoc);
+      store.getState().openDocument(mockDoc2);
+      // mockDoc2 is active (last opened)
+      store.getState().closeDocument("/test/file.html");
+      expect(store.getState().activeDocumentPath).toBe("/test/file.md");
+    });
+
+    it("sets null when closing last document", () => {
+      store.getState().openDocument(mockDoc);
+      store.getState().closeDocument("/test/file.md");
+      expect(store.getState().activeDocumentPath).toBeNull();
+      expect(store.getState().documentOrder).toEqual([]);
+    });
+
+    it("does not change active if closing non-active tab", () => {
+      store.getState().openDocument(mockDoc);
+      store.getState().openDocument(mockDoc2);
+      // mockDoc2 is active
+      store.getState().closeDocument("/test/file.md");
+      expect(store.getState().activeDocumentPath).toBe("/test/file.html");
+    });
+
+    it("activates right neighbor when closing middle tab", () => {
+      const mockDoc3: Document = {
+        content: "# Third",
+        type: "markdown",
+        filePath: "/test/third.md",
+        fileName: "third.md",
+        clean: false,
+      };
+      store.getState().openDocument(mockDoc);
+      store.getState().openDocument(mockDoc2);
+      store.getState().openDocument(mockDoc3);
+      store.getState().setActiveDocument("/test/file.html");
+      store.getState().closeDocument("/test/file.html");
+      expect(store.getState().activeDocumentPath).toBe("/test/third.md");
+      expect(store.getState().documentOrder).toEqual([
+        "/test/file.md",
+        "/test/third.md",
+      ]);
+    });
+  });
+
+  describe("setActiveDocument", () => {
+    it("sets active document", () => {
+      store.getState().openDocument(mockDoc);
+      store.getState().openDocument(mockDoc2);
+      store.getState().setActiveDocument("/test/file.md");
+      expect(store.getState().activeDocumentPath).toBe("/test/file.md");
+    });
+
+    it("ignores unknown file paths", () => {
+      store.getState().openDocument(mockDoc);
+      store.getState().setActiveDocument("/nonexistent.md");
+      expect(store.getState().activeDocumentPath).toBe("/test/file.md");
+    });
+  });
+
+  describe("per-document setters default to active doc", () => {
+    it("setComments operates on active document", () => {
+      store.getState().openDocument(mockDoc);
+      store.getState().setComments([mockComment]);
+      const docState = store.getState().documents.get("/test/file.md")!;
+      expect(docState.comments).toEqual([mockComment]);
+      expect(docState.sortedComments).toEqual([mockComment]);
+    });
+
+    it("setComments with explicit filePath targets that document", () => {
+      store.getState().openDocument(mockDoc);
+      store.getState().openDocument(mockDoc2);
+      store.getState().setComments([mockComment], "/test/file.html");
+      expect(
+        store.getState().documents.get("/test/file.html")!.comments,
+      ).toEqual([mockComment]);
+      expect(store.getState().documents.get("/test/file.md")!.comments).toEqual(
+        [],
+      );
+    });
+
+    it("sortedComments sorts by startOffset", () => {
+      store.getState().openDocument(mockDoc);
+      const c1 = { ...mockComment, id: "c1", startOffset: 10 };
+      const c2 = { ...mockComment, id: "c2", startOffset: 2 };
+      const c3 = { ...mockComment, id: "c3", startOffset: 5 };
+      store.getState().setComments([c1, c2, c3]);
+      const docState = store.getState().documents.get("/test/file.md")!;
+      expect(docState.sortedComments.map((c) => c.id)).toEqual([
+        "c2",
+        "c3",
+        "c1",
+      ]);
+    });
+
+    it("setSelection operates on active document", () => {
+      store.getState().openDocument(mockDoc);
+      const sel = { text: "hello", startOffset: 0, endOffset: 5 };
+      store.getState().setSelection(sel);
+      expect(
+        store.getState().documents.get("/test/file.md")!.selection,
+      ).toEqual(sel);
+    });
+
+    it("setScrollY operates on active document", () => {
+      store.getState().openDocument(mockDoc);
+      store.getState().setScrollY(150);
+      expect(store.getState().documents.get("/test/file.md")!.scrollY).toBe(
+        150,
+      );
+    });
+
+    it("setters no-op when no active document", () => {
+      // No document opened
+      store.getState().setComments([mockComment]);
+      // Should not throw, just no-op
+      expect(store.getState().documents.size).toBe(0);
+    });
+  });
+
+  describe("getActiveDocumentState", () => {
+    it("returns undefined when no active document", () => {
+      expect(store.getState().getActiveDocumentState()).toBeUndefined();
+    });
+
+    it("returns active document state", () => {
+      store.getState().openDocument(mockDoc);
+      const state = store.getState().getActiveDocumentState();
+      expect(state).toBeDefined();
+      expect(state!.document.filePath).toBe("/test/file.md");
+    });
+  });
+
+  describe("updateDocumentContent", () => {
+    it("updates document content in place", () => {
+      store.getState().openDocument(mockDoc);
+      store.getState().updateDocumentContent("# Updated");
+      expect(
+        store.getState().documents.get("/test/file.md")!.document.content,
+      ).toBe("# Updated");
+    });
+  });
+});

package/src/store/index.ts

@@ -0,0 +1,234 @@
+import { createStore, useStore } from "zustand";
+import type { Comment, Document, Selection } from "../types";
+
+// ─── Types ───────────────────────────────────────────────────────────
+
+export interface DocumentState {
+  document: Document;
+  comments: Comment[];
+  commentsError: string | null;
+  sortedComments: Comment[];
+  selection: Selection | null;
+  pendingSelectionTop: number | undefined;
+  pendingCommentText: string;
+  highlightPositions: Record<string, number>;
+  documentPositions: Record<string, number>;
+  scrollY: number;
+  hoveredCommentId: string | undefined;
+  reanchorTarget: { commentId: string } | null;
+}
+
+export interface AppStore {
+  // Multi-document state
+  documents: Map<string, DocumentState>;
+  activeDocumentPath: string | null;
+  documentOrder: string[];
+
+  // Global actions
+  openDocument: (doc: Document) => void;
+  closeDocument: (filePath: string) => void;
+  setActiveDocument: (filePath: string) => void;
+
+  // Per-document setters (default to active doc)
+  setComments: (comments: Comment[], filePath?: string) => void;
+  setCommentsError: (error: string | null, filePath?: string) => void;
+  setSelection: (selection: Selection | null, filePath?: string) => void;
+  setPendingSelectionTop: (top: number | undefined, filePath?: string) => void;
+  setHighlightPositions: (
+    positions: Record<string, number>,
+    filePath?: string,
+  ) => void;
+  setDocumentPositions: (
+    positions: Record<string, number>,
+    filePath?: string,
+  ) => void;
+  setScrollY: (y: number, filePath?: string) => void;
+  setHoveredCommentId: (id: string | undefined, filePath?: string) => void;
+  setReanchorTarget: (
+    target: { commentId: string } | null,
+    filePath?: string,
+  ) => void;
+  setPendingCommentText: (text: string, filePath?: string) => void;
+  updateDocumentContent: (content: string, filePath?: string) => void;
+
+  // Helpers
+  getActiveDocumentState: () => DocumentState | undefined;
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────
+
+function createInitialDocumentState(doc: Document): DocumentState {
+  return {
+    document: doc,
+    comments: [],
+    commentsError: null,
+    sortedComments: [],
+    selection: null,
+    pendingSelectionTop: undefined,
+    pendingCommentText: "",
+    highlightPositions: {},
+    documentPositions: {},
+    scrollY: 0,
+    hoveredCommentId: undefined,
+    reanchorTarget: null,
+  };
+}
+
+function sortComments(comments: Comment[]): Comment[] {
+  return [...comments].sort((a, b) => a.startOffset - b.startOffset);
+}
+
+// ─── Store Factory ───────────────────────────────────────────────────
+
+export function createAppStore() {
+  return createStore<AppStore>((set, get) => {
+    const resolveFilePath = (filePath?: string): string | null =>
+      filePath ?? get().activeDocumentPath;
+
+    const updateDocState = (
+      filePath: string,
+      updater: (state: DocumentState) => Partial<DocumentState>,
+    ) => {
+      set((prev) => {
+        const docState = prev.documents.get(filePath);
+        if (!docState) return prev;
+        const updates = updater(docState);
+        const newDocs = new Map(prev.documents);
+        newDocs.set(filePath, { ...docState, ...updates });
+        return { documents: newDocs };
+      });
+    };
+
+    return {
+      documents: new Map(),
+      activeDocumentPath: null,
+      documentOrder: [],
+
+      openDocument: (doc) => {
+        set((prev) => {
+          if (prev.documents.has(doc.filePath)) {
+            return { activeDocumentPath: doc.filePath };
+          }
+          const newDocs = new Map(prev.documents);
+          newDocs.set(doc.filePath, createInitialDocumentState(doc));
+          return {
+            documents: newDocs,
+            activeDocumentPath: doc.filePath,
+            documentOrder: [...prev.documentOrder, doc.filePath],
+          };
+        });
+      },
+
+      closeDocument: (filePath) => {
+        set((prev) => {
+          const newDocs = new Map(prev.documents);
+          newDocs.delete(filePath);
+          const newOrder = prev.documentOrder.filter((p) => p !== filePath);
+
+          let newActive = prev.activeDocumentPath;
+          if (prev.activeDocumentPath === filePath) {
+            const oldIndex = prev.documentOrder.indexOf(filePath);
+            newActive = newOrder[oldIndex] ?? newOrder[oldIndex - 1] ?? null;
+          }
+
+          return {
+            documents: newDocs,
+            activeDocumentPath: newActive,
+            documentOrder: newOrder,
+          };
+        });
+      },
+
+      setActiveDocument: (filePath) => {
+        if (get().documents.has(filePath)) {
+          set({ activeDocumentPath: filePath });
+        }
+      },
+
+      setComments: (comments, filePath?) => {
+        const path = resolveFilePath(filePath);
+        if (!path) return;
+        updateDocState(path, () => ({
+          comments,
+          sortedComments: sortComments(comments),
+        }));
+      },
+
+      setCommentsError: (error, filePath?) => {
+        const path = resolveFilePath(filePath);
+        if (!path) return;
+        updateDocState(path, () => ({ commentsError: error }));
+      },
+
+      setSelection: (selection, filePath?) => {
+        const path = resolveFilePath(filePath);
+        if (!path) return;
+        updateDocState(path, () => ({ selection }));
+      },
+
+      setPendingSelectionTop: (top, filePath?) => {
+        const path = resolveFilePath(filePath);
+        if (!path) return;
+        updateDocState(path, () => ({ pendingSelectionTop: top }));
+      },
+
+      setHighlightPositions: (positions, filePath?) => {
+        const path = resolveFilePath(filePath);
+        if (!path) return;
+        updateDocState(path, () => ({ highlightPositions: positions }));
+      },
+
+      setDocumentPositions: (positions, filePath?) => {
+        const path = resolveFilePath(filePath);
+        if (!path) return;
+        updateDocState(path, () => ({ documentPositions: positions }));
+      },
+
+      setScrollY: (y, filePath?) => {
+        const path = resolveFilePath(filePath);
+        if (!path) return;
+        updateDocState(path, () => ({ scrollY: y }));
+      },
+
+      setHoveredCommentId: (id, filePath?) => {
+        const path = resolveFilePath(filePath);
+        if (!path) return;
+        updateDocState(path, () => ({ hoveredCommentId: id }));
+      },
+
+      setReanchorTarget: (target, filePath?) => {
+        const path = resolveFilePath(filePath);
+        if (!path) return;
+        updateDocState(path, () => ({ reanchorTarget: target }));
+      },
+
+      setPendingCommentText: (text, filePath?) => {
+        const path = resolveFilePath(filePath);
+        if (!path) return;
+        updateDocState(path, () => ({ pendingCommentText: text }));
+      },
+
+      updateDocumentContent: (content, filePath?) => {
+        const path = resolveFilePath(filePath);
+        if (!path) return;
+        updateDocState(path, (s) => ({
+          document: { ...s.document, content },
+        }));
+      },
+
+      getActiveDocumentState: () => {
+        const { documents, activeDocumentPath } = get();
+        if (!activeDocumentPath) return undefined;
+        return documents.get(activeDocumentPath);
+      },
+    };
+  });
+}
+
+// ─── Singleton + React Hook ─────────────────────────────────────────
+
+export const appStore = createAppStore();
+
+export function useAppStore<T>(selector: (state: AppStore) => T): T {
+  return useStore(appStore, selector);
+}

package/src/test-setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

package/src/types/index.ts

@@ -0,0 +1,115 @@
+// Anchor confidence levels - const object pattern per style guide 6.3
+export const AnchorConfidences = {
+  EXACT: "exact",
+  NORMALIZED: "normalized",
+  FUZZY: "fuzzy",
+  UNRESOLVED: "unresolved",
+} as const;
+
+export type AnchorConfidence =
+  (typeof AnchorConfidences)[keyof typeof AnchorConfidences];
+
+// Subset excluding "unresolved" for resolved anchors
+export type ResolvedAnchorConfidence = Exclude<
+  AnchorConfidence,
+  typeof AnchorConfidences.UNRESOLVED
+>;
+
+export interface Comment {
+  id: string;
+  selectedText: string;
+  comment: string;
+  createdAt: string;
+  // Position info for highlighting
+  startOffset: number;
+  endOffset: number;
+  // Line hint for text-based anchoring (e.g., "L42" or "L42-45")
+  lineHint?: string;
+  // Confidence level of anchor resolution
+  anchorConfidence?: AnchorConfidence;
+  // First N chars of original text for anchor matching when selectedText is truncated
+  anchorPrefix?: string;
+}
+
+// Parsed comment file structure
+export interface CommentFile {
+  source: string; // Absolute path to source file
+  hash: string; // SHA-256 prefix (16 chars) of source content
+  version: number; // Format version
+  comments: Comment[];
+}
+
+// Anchor match result
+export interface Anchor {
+  start: number;
+  end: number;
+  line: number;
+  confidence: ResolvedAnchorConfidence;
+  distance?: number; // Levenshtein distance for fuzzy matches
+}
+
+export interface SelectionRange {
+  startOffset: number;
+  endOffset: number;
+}
+
+export interface Selection extends SelectionRange {
+  text: string;
+}
+
+export type DocumentType = "markdown" | "html";
+
+export interface Document {
+  content: string;
+  type: DocumentType;
+  filePath: string;
+  fileName: string;
+  clean: boolean;
+}
+
+// Font family options - const object pattern per style guide 6.3
+export const FontFamilies = {
+  SERIF: "serif",
+  SANS_SERIF: "sans-serif",
+} as const;
+
+export type FontFamily = (typeof FontFamilies)[keyof typeof FontFamilies];
+
+// Theme mode options - const object pattern per style guide 6.3
+export const ThemeModes = {
+  LIGHT: "light",
+  DARK: "dark",
+  SYSTEM: "system",
+} as const;
+
+export type ThemeMode = (typeof ThemeModes)[keyof typeof ThemeModes];
+
+// Layout mode options - const object pattern per style guide 6.3
+export const LayoutModes = {
+  CENTERED: "centered",
+  FULLSCREEN: "fullscreen",
+} as const;
+
+export type LayoutMode = (typeof LayoutModes)[keyof typeof LayoutModes];
+
+// Keyboard shortcut binding
+export interface ShortcutBinding {
+  key: string; // KeyboardEvent.key value, e.g. "c", "ArrowUp"
+  alt?: boolean;
+  meta?: boolean; // ⌘ on Mac, Ctrl on Windows/Linux
+  shift?: boolean;
+}
+
+// User override for a shortcut
+export interface KeybindingOverride {
+  id: string;
+  binding?: ShortcutBinding; // undefined = use default
+  enabled: boolean;
+}
+
+// Document settings stored per-file
+export interface DocumentSettings {
+  version: number;
+  fontFamily: FontFamily;
+  keybindings?: KeybindingOverride[];
+}

package/test.md

@@ -0,0 +1,74 @@
+# Welcome to readit
+
+A simple tool for reviewing markdown with inline comments.
+
+---
+
+## How It Works
+
+readit follows a simple loop: **read → comment → extract**.
+
+### 1. Read
+
+You're already doing this. Open any markdown file with `npx readit <file.md>` and it renders in your browser with a clean reading experience.
+
+### 2. Comment
+
+Select any text to add a comment. Try it now — **select this sentence** and type your first comment.
+
+Your comments appear as margin notes next to the highlighted text, just like reviewing a document in Google Docs. Add as many as you need.
+
+### 3. Extract
+
+When you're done reviewing, click the menu in the top-right and choose **Copy as Prompt**. This exports all your comments in a format ready for Claude, ChatGPT, or any AI assistant.
+
+You can also export as JSON if you prefer structured data.
+
+---
+
+## Everything is Plain Markdown
+
+Your comments are saved as `.comments.md` files in `~/.readit/comments/`. No database, no lock-in — just readable markdown files you can version control, search, or edit by hand.
+
+Each comment file looks something like this:
+
+```markdown
+## Comment 1
+**Selected:** "select this sentence"
+**Comment:** This is my first comment!
+**Created:** 2024-01-15T10:30:00Z
+```
+
+---
+
+## Navigating Comments
+
+Once you have multiple comments, use the navigation bar at the bottom of the screen to jump between them. You can also use keyboard shortcuts:
+
+| Shortcut | Action |
+|----------|--------|
+| `Alt + ↑` | Previous comment |
+| `Alt + ↓` | Next comment |
+| `⌘ + C` | Copy selected text (raw) |
+| `⌘ + Shift + C` | Copy selected text with context (for AI) |
+
+---
+
+## Quick Start
+
+```bash
+# Review a markdown file
+npx readit document.md
+
+# Use a custom port
+npx readit document.md --port 3000
+
+# Start fresh (clear existing comments)
+npx readit document.md --clean
+```
+
+---
+
+## Try It Now
+
+Go ahead and add a few comments to this document. When you're done, export them and see the output. That's the entire workflow — simple, transparent, and designed for reviewing AI-generated content.

package/tsconfig.cli.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "noEmit": false,
+    "outDir": "dist",
+    "declaration": false,
+    "allowImportingTsExtensions": false
+  },
+  "include": ["src/cli", "src/server", "src/types"]
+}

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "allowImportingTsExtensions": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/vite.config.ts

@@ -0,0 +1,19 @@
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [tailwindcss(), react()],
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://localhost:4567",
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    outDir: "dist",
+    emptyOutDir: true,
+  },
+});