@peaske7/readit 0.1.8 → 0.2.0

package/src/hooks/useKeyboardShortcuts.ts

@@ -1,63 +0,0 @@
-import { useEffect, useRef } from "react";
-import {
-  matchesBinding,
-  type ShortcutAction,
-  type ShortcutDefinition,
-} from "../lib/shortcut-registry";
-
-type ActionMap = Partial<Record<ShortcutAction, () => void>>;
-
-/**
- * Returns true if the event target is an input element where
- * keyboard shortcuts should be suppressed.
- */
-function isInputFocused(event: KeyboardEvent): boolean {
-  const target = event.target;
-  if (!(target instanceof HTMLElement)) return false;
-
-  const tagName = target.tagName;
-  if (tagName === "INPUT" || tagName === "TEXTAREA") return true;
-  if (target.isContentEditable) return true;
-
-  return false;
-}
-
-/**
- * Single centralized keyboard shortcut listener.
- * Replaces all scattered useEffect keydown handlers.
- *
- * @param shortcuts - Resolved shortcut definitions (from useKeybindings)
- * @param actions - Map of shortcut ID to callback function
- */
-export function useKeyboardShortcuts(
-  shortcuts: ShortcutDefinition[],
-  actions: ActionMap,
-): void {
-  const actionsRef = useRef(actions);
-  actionsRef.current = actions;
-
-  const shortcutsRef = useRef(shortcuts);
-  shortcutsRef.current = shortcuts;
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (isInputFocused(event)) return;
-
-      for (const shortcut of shortcutsRef.current) {
-        if (!shortcut.enabled) continue;
-
-        if (matchesBinding(event, shortcut.binding)) {
-          const action = actionsRef.current[shortcut.id];
-          if (action) {
-            event.preventDefault();
-            action();
-          }
-          return;
-        }
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, []);
-}

package/src/hooks/useLayoutMode.ts

@@ -1,44 +0,0 @@
-import { useCallback, useState } from "react";
-import { type LayoutMode, LayoutModes } from "../types";
-
-const STORAGE_KEY = "readit:layout-mode";
-
-interface UseLayoutModeResult {
-  layoutMode: LayoutMode;
-  toggleLayoutMode: () => void;
-  isFullscreen: boolean;
-}
-
-export function useLayoutMode(): UseLayoutModeResult {
-  const [layoutMode, setLayoutMode] = useState<LayoutMode>(() => {
-    try {
-      const stored = localStorage.getItem(STORAGE_KEY);
-      return stored === LayoutModes.FULLSCREEN
-        ? LayoutModes.FULLSCREEN
-        : LayoutModes.CENTERED;
-    } catch {
-      return LayoutModes.CENTERED;
-    }
-  });
-
-  const toggleLayoutMode = useCallback(() => {
-    setLayoutMode((prev) => {
-      const next =
-        prev === LayoutModes.CENTERED
-          ? LayoutModes.FULLSCREEN
-          : LayoutModes.CENTERED;
-      try {
-        localStorage.setItem(STORAGE_KEY, next);
-      } catch {
-        // localStorage may be unavailable
-      }
-      return next;
-    });
-  }, []);
-
-  return {
-    layoutMode,
-    toggleLayoutMode,
-    isFullscreen: layoutMode === LayoutModes.FULLSCREEN,
-  };
-}

package/src/hooks/useLocalePreference.ts

@@ -1,42 +0,0 @@
-import { useCallback, useState } from "react";
-import { type Locale, Locales } from "../lib/i18n";
-
-const STORAGE_KEY = "readit:locale";
-
-function detectLocale(): Locale {
-  const browserLang = navigator.language.slice(0, 2).toLowerCase();
-  if (browserLang === "ja") return Locales.JA;
-  return Locales.EN;
-}
-
-function getStoredLocale(): Locale {
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (stored === Locales.JA || stored === Locales.EN) {
-      return stored;
-    }
-  } catch {
-    // localStorage may be unavailable
-  }
-  return detectLocale();
-}
-
-interface UseLocalePreferenceResult {
-  locale: Locale;
-  setLocale: (locale: Locale) => void;
-}
-
-export function useLocalePreference(): UseLocalePreferenceResult {
-  const [locale, setLocaleState] = useState<Locale>(getStoredLocale);
-
-  const setLocale = useCallback((newLocale: Locale) => {
-    setLocaleState(newLocale);
-    try {
-      localStorage.setItem(STORAGE_KEY, newLocale);
-    } catch {
-      // localStorage may be unavailable
-    }
-  }, []);
-
-  return { locale, setLocale };
-}

package/src/hooks/useReanchorMode.ts

@@ -1,33 +0,0 @@
-import { useCallback } from "react";
-import { appStore, useAppStore } from "../store";
-
-interface UseReanchorModeResult {
-  reanchorTarget: { commentId: string } | null;
-  startReanchor: (commentId: string) => void;
-  cancelReanchor: () => void;
-}
-
-/**
- * Hook for managing re-anchor mode state.
- * When active, the user can select new text to re-anchor an unresolved comment.
- * State lives in the Zustand store for tab-switch preservation.
- */
-export function useReanchorMode(): UseReanchorModeResult {
-  const reanchorTarget = useAppStore(
-    (s) => s.getActiveDocumentState()?.reanchorTarget ?? null,
-  );
-
-  const startReanchor = useCallback((commentId: string) => {
-    appStore.getState().setReanchorTarget({ commentId });
-  }, []);
-
-  const cancelReanchor = useCallback(() => {
-    appStore.getState().setReanchorTarget(null);
-  }, []);
-
-  return {
-    reanchorTarget,
-    startReanchor,
-    cancelReanchor,
-  };
-}

package/src/hooks/useScrollMetrics.ts

@@ -1,56 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-interface ScrollMetrics {
-  documentHeight: number;
-  viewportHeight: number;
-  scrollTop: number;
-}
-
-/**
- * Track document scroll and viewport dimensions for minimap calculations.
- * Updates are throttled to once per animation frame to prevent scroll jank.
- */
-export function useScrollMetrics(): ScrollMetrics {
-  const [metrics, setMetrics] = useState<ScrollMetrics>({
-    documentHeight: 0,
-    viewportHeight: 0,
-    scrollTop: 0,
-  });
-
-  const rafIdRef = useRef<number | null>(null);
-
-  useEffect(() => {
-    const updateMetrics = () => {
-      setMetrics({
-        documentHeight: document.body.scrollHeight,
-        viewportHeight: window.innerHeight,
-        scrollTop: window.scrollY,
-      });
-    };
-
-    // Throttle scroll updates to once per animation frame
-    const handleScroll = () => {
-      if (rafIdRef.current !== null) return;
-      rafIdRef.current = requestAnimationFrame(() => {
-        updateMetrics();
-        rafIdRef.current = null;
-      });
-    };
-
-    // Initial measurement
-    updateMetrics();
-
-    window.addEventListener("scroll", handleScroll, { passive: true });
-    window.addEventListener("resize", updateMetrics);
-
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("resize", updateMetrics);
-      if (rafIdRef.current !== null) {
-        cancelAnimationFrame(rafIdRef.current);
-      }
-    };
-  }, []);
-
-  return metrics;
-}

package/src/hooks/useThemePreference.ts

@@ -1,66 +0,0 @@
-import { useCallback, useEffect, useState } from "react";
-import { type ThemeMode, ThemeModes } from "../types";
-
-const STORAGE_KEY = "readit:theme";
-
-const DARK_MQ = "(prefers-color-scheme: dark)";
-
-function getStoredTheme(): ThemeMode {
-  try {
-    const stored = localStorage.getItem(STORAGE_KEY);
-    if (
-      stored === ThemeModes.LIGHT ||
-      stored === ThemeModes.DARK ||
-      stored === ThemeModes.SYSTEM
-    ) {
-      return stored;
-    }
-  } catch {
-    // localStorage may be unavailable
-  }
-  return ThemeModes.SYSTEM;
-}
-
-function applyTheme(mode: ThemeMode): void {
-  const isDark =
-    mode === ThemeModes.DARK ||
-    (mode === ThemeModes.SYSTEM && window.matchMedia(DARK_MQ).matches);
-
-  document.documentElement.classList.toggle("dark", isDark);
-}
-
-interface UseThemePreferenceResult {
-  themeMode: ThemeMode;
-  setThemeMode: (mode: ThemeMode) => void;
-}
-
-export function useThemePreference(): UseThemePreferenceResult {
-  const [themeMode, setThemeModeState] = useState<ThemeMode>(getStoredTheme);
-
-  // Apply theme class whenever mode changes
-  useEffect(() => {
-    applyTheme(themeMode);
-  }, [themeMode]);
-
-  // Listen for system preference changes when in "system" mode
-  useEffect(() => {
-    if (themeMode !== ThemeModes.SYSTEM) return;
-
-    const mq = window.matchMedia(DARK_MQ);
-    const handler = () => applyTheme(ThemeModes.SYSTEM);
-
-    mq.addEventListener("change", handler);
-    return () => mq.removeEventListener("change", handler);
-  }, [themeMode]);
-
-  const setThemeMode = useCallback((mode: ThemeMode) => {
-    setThemeModeState(mode);
-    try {
-      localStorage.setItem(STORAGE_KEY, mode);
-    } catch {
-      // localStorage may be unavailable
-    }
-  }, []);
-
-  return { themeMode, setThemeMode };
-}

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

@@ -1,63 +0,0 @@
-import { bench, describe } from "vitest";
-import {
-  COMMENT_FILE_LARGE,
-  COMMENT_FILE_MEDIUM,
-  COMMENT_FILE_OBJ_LARGE,
-  COMMENT_FILE_OBJ_MEDIUM,
-  COMMENT_FILE_SMALL,
-  LARGE_DOC,
-} from "./__fixtures__/bench-data";
-import {
-  computeHash,
-  createComment,
-  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("10 comments", () => {
-    serializeComments(COMMENT_FILE_OBJ_MEDIUM);
-  });
-
-  bench("50 comments", () => {
-    serializeComments(COMMENT_FILE_OBJ_LARGE);
-  });
-});
-
-describe("computeHash", () => {
-  const shortString = "x".repeat(100);
-
-  bench("short string (100 chars)", () => {
-    computeHash(shortString);
-  });
-
-  bench("large doc (~10k chars)", () => {
-    computeHash(LARGE_DOC);
-  });
-});
-
-describe("createComment", () => {
-  bench("short selection", () => {
-    createComment("selected text here", "my comment", 100, 118, LARGE_DOC);
-  });
-
-  const longSelection = "a".repeat(2000);
-
-  bench("long selection (triggers truncation)", () => {
-    createComment(longSelection, "my comment", 0, 2000, LARGE_DOC);
-  });
-});

package/src/lib/context.bench.ts

@@ -1,41 +0,0 @@
-import { bench, describe } from "vitest";
-import { HTML_DOC, LARGE_DOC } from "./__fixtures__/bench-data";
-import { extractContext, formatForLLM, stripHtmlTags } from "./context";
-
-describe("stripHtmlTags", () => {
-  bench("200-line HTML document", () => {
-    stripHtmlTags(HTML_DOC);
-  });
-
-  bench("short HTML string", () => {
-    stripHtmlTags(
-      "<p>Hello &amp; <strong>world</strong> with &#60;entities&#62;</p>",
-    );
-  });
-});
-
-describe("extractContext", () => {
-  bench("single-line selection, markdown", () => {
-    extractContext({ content: LARGE_DOC, startOffset: 500, endOffset: 530 });
-  });
-
-  bench("multi-line selection, markdown", () => {
-    extractContext({ content: LARGE_DOC, startOffset: 500, endOffset: 800 });
-  });
-
-  bench("HTML content (triggers stripHtmlTags)", () => {
-    extractContext({ content: HTML_DOC, startOffset: 100, endOffset: 200 });
-  });
-});
-
-describe("formatForLLM", () => {
-  const ctx = extractContext({
-    content: LARGE_DOC,
-    startOffset: 500,
-    endOffset: 530,
-  });
-
-  bench("format with comment", () => {
-    formatForLLM({ context: ctx, fileName: "doc.md", comment: "Needs review" });
-  });
-});

package/src/lib/context.test.ts

@@ -1,224 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { extractContext, formatForLLM, stripHtmlTags } from "./context";
-
-describe("stripHtmlTags", () => {
-  it("removes simple HTML tags", () => {
-    expect(stripHtmlTags("<p>Hello</p>")).toBe("Hello");
-    expect(stripHtmlTags("<div><span>Nested</span></div>")).toBe("Nested");
-  });
-
-  it("removes script and style content entirely", () => {
-    expect(stripHtmlTags('<script>alert("xss")</script>text')).toBe("text");
-    expect(stripHtmlTags("<style>.foo { color: red }</style>text")).toBe(
-      "text",
-    );
-  });
-
-  it("decodes common named entities", () => {
-    expect(stripHtmlTags("&lt;tag&gt;")).toBe("<tag>");
-    expect(stripHtmlTags("&amp;&nbsp;&quot;&#39;")).toBe("& \"'");
-  });
-
-  it("decodes numeric entities (decimal)", () => {
-    expect(stripHtmlTags("&#65;&#66;&#67;")).toBe("ABC");
-  });
-
-  it("decodes numeric entities (hex)", () => {
-    expect(stripHtmlTags("&#x41;&#x42;&#x43;")).toBe("ABC");
-    expect(stripHtmlTags("&#X41;&#X42;&#X43;")).toBe("ABC"); // case-insensitive
-  });
-
-  it("handles mixed content", () => {
-    const html = "<p>Hello &amp; <strong>World</strong>!</p>";
-    expect(stripHtmlTags(html)).toBe("Hello & World!");
-  });
-
-  it("preserves plain text", () => {
-    expect(stripHtmlTags("plain text")).toBe("plain text");
-  });
-});
-
-describe("extractContext", () => {
-  it("extracts single-line selection with markers", () => {
-    const content = "line1\nline2\nline3\nline4\nline5";
-    // "line2" starts at offset 6, ends at 11
-    const result = extractContext({ content, startOffset: 6, endOffset: 11 });
-
-    expect(result.startLine).toBe(2);
-    expect(result.endLine).toBe(2);
-    // Should have >>> and <<< markers around "line2"
-    expect(result.lines.some((l) => l.includes(">>> line2 <<<"))).toBe(true);
-  });
-
-  it("includes context lines before and after", () => {
-    const content = "line1\nline2\nline3\nline4\nline5";
-    // Select "line3" at offset 12
-    const result = extractContext({
-      content,
-      startOffset: 12,
-      endOffset: 17,
-      contextLines: 2,
-    });
-
-    expect(result.startLine).toBe(3);
-    expect(result.endLine).toBe(3);
-    // Should include 2 lines before (line1, line2) and 2 after (line4, line5)
-    expect(result.lines.length).toBe(5);
-  });
-
-  it("handles multi-line selection", () => {
-    const content = "line1\nline2\nline3\nline4\nline5";
-    // Select from "line2" to "line3" (offset 6 to 17)
-    const result = extractContext({ content, startOffset: 6, endOffset: 17 });
-
-    expect(result.startLine).toBe(2);
-    expect(result.endLine).toBe(3);
-    // Start line should have >>> marker
-    expect(result.lines.some((l) => l.includes(">>>"))).toBe(true);
-    // End line should have <<< marker
-    expect(result.lines.some((l) => l.includes("<<<"))).toBe(true);
-  });
-
-  it("handles selection at start of document", () => {
-    const content = "line1\nline2\nline3";
-    // Select "line1" at start
-    const result = extractContext({ content, startOffset: 0, endOffset: 5 });
-
-    expect(result.startLine).toBe(1);
-    expect(result.endLine).toBe(1);
-    expect(result.lines[0]).toContain(">>> line1 <<<");
-  });
-
-  it("handles selection at end of document", () => {
-    const content = "line1\nline2\nline3";
-    // Select "line3" (offset 12 to 17)
-    const result = extractContext({ content, startOffset: 12, endOffset: 17 });
-
-    expect(result.startLine).toBe(3);
-    expect(result.endLine).toBe(3);
-    expect(result.lines.some((l) => l.includes(">>> line3 <<<"))).toBe(true);
-  });
-
-  it("truncates very long lines", () => {
-    const longLine = "a".repeat(250);
-    const content = `short\n${longLine}\nshort`;
-    // Select part of the long line
-    const result = extractContext({ content, startOffset: 6, endOffset: 256 });
-
-    // Long line should be truncated with ...
-    const longLineOutput = result.lines.find((l) => l.length > 100);
-    expect(longLineOutput?.endsWith("...")).toBe(true);
-  });
-
-  it("handles HTML content by stripping tags", () => {
-    const html = "<p>paragraph</p>\n<div>div content</div>";
-    // After stripping: "paragraph\ndiv content"
-    // Select "paragraph" at offset 0-9
-    const result = extractContext({
-      content: html,
-      startOffset: 0,
-      endOffset: 9,
-    });
-
-    expect(result.lines.some((l) => l.includes(">>> paragraph <<<"))).toBe(
-      true,
-    );
-  });
-
-  it("normalizes CRLF to LF", () => {
-    const content = "line1\r\nline2\r\nline3";
-    // After normalization: "line1\nline2\nline3"
-    // Select "line2" at offset 6
-    const result = extractContext({ content, startOffset: 6, endOffset: 11 });
-
-    expect(result.startLine).toBe(2);
-    expect(result.lines.some((l) => l.includes(">>> line2 <<<"))).toBe(true);
-  });
-
-  it("limits context lines to document bounds", () => {
-    const content = "only\ntwo\nlines";
-    // Select middle line with 5 context lines requested
-    const result = extractContext({
-      content,
-      startOffset: 5,
-      endOffset: 8,
-      contextLines: 5,
-    });
-
-    // Should not go beyond document bounds
-    expect(result.lines.length).toBeLessThanOrEqual(3);
-  });
-
-  it("truncates very long selections with ellipsis", () => {
-    // Create content with more than MAX_SELECTION_LINES (10) lines
-    const lines = Array.from({ length: 15 }, (_, i) => `line${i + 1}`);
-    const content = lines.join("\n");
-    // Select all content
-    const result = extractContext({
-      content,
-      startOffset: 0,
-      endOffset: content.length,
-      contextLines: 0,
-    });
-
-    // Should include ... for truncated middle
-    expect(result.lines.some((l) => l === "...")).toBe(true);
-  });
-});
-
-describe("formatForLLM", () => {
-  it("formats context with header and line range", () => {
-    const context = {
-      lines: ["before", ">>> selected <<<", "after"],
-      startLine: 5,
-      endLine: 5,
-    };
-
-    const result = formatForLLM({ context, fileName: "test.md" });
-
-    expect(result).toContain("# From: test.md");
-    expect(result).toContain("Lines 5-5:");
-    expect(result).toContain("---");
-    expect(result).toContain(">>> selected <<<");
-  });
-
-  it("includes optional comment", () => {
-    const context = {
-      lines: ["text"],
-      startLine: 1,
-      endLine: 1,
-    };
-
-    const result = formatForLLM({
-      context,
-      fileName: "test.md",
-      comment: "This needs review",
-    });
-
-    expect(result).toContain("Comment: This needs review");
-  });
-
-  it("omits comment section when not provided", () => {
-    const context = {
-      lines: ["text"],
-      startLine: 1,
-      endLine: 1,
-    };
-
-    const result = formatForLLM({ context, fileName: "test.md" });
-
-    expect(result).not.toContain("Comment:");
-  });
-
-  it("formats multi-line range correctly", () => {
-    const context = {
-      lines: [">>> start", "middle", "end <<<"],
-      startLine: 10,
-      endLine: 12,
-    };
-
-    const result = formatForLLM({ context, fileName: "doc.html" });
-
-    expect(result).toContain("Lines 10-12:");
-  });
-});