@peaske7/readit 0.1.8 → 0.2.1

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/useScrollSpy.ts

@@ -1,81 +0,0 @@
-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 {
-  const [activeId, setActiveId] = useState<string | null>(null);
-  const hasSetInitialRef = useRef(false);
-
-  useEffect(() => {
-    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(
-      (entries) => {
-        for (const entry of entries) {
-          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;
-              closestId = id;
-            }
-          }
-
-          if (closestId) {
-            setActiveId(closestId);
-          }
-        }
-      },
-      {
-        // Observe when headings are in the top 30% of viewport
-        rootMargin: "-10% 0px -70% 0px",
-        threshold: 0,
-      },
-    );
-
-    // Set initial active heading BEFORE starting observer
-    // to prevent flash when observer fires first
-    if (!hasSetInitialRef.current) {
-      setActiveId(headingIds[0]);
-      hasSetInitialRef.current = true;
-    }
-
-    // Observe all headings
-    for (const id of headingIds) {
-      const element = document.getElementById(id);
-      if (element) {
-        observer.observe(element);
-      }
-    }
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [headingIds]);
-
-  return activeId;
-}

package/src/hooks/useTextSelection.ts

@@ -1,123 +0,0 @@
-import { useCallback, useEffect } from "react";
-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() {
-  for (const mark of document.querySelectorAll("mark[data-pending]")) {
-    const parent = mark.parentNode;
-    if (!parent) continue;
-    while (mark.firstChild) parent.insertBefore(mark.firstChild, mark);
-    parent.removeChild(mark);
-  }
-}
-
-interface UseTextSelectionResult {
-  selection: Selection | null;
-  highlightPositions: Record<string, number>;
-  documentPositions: Record<string, number>;
-  pendingSelectionTop: number | undefined;
-  onTextSelect: (
-    text: string,
-    startOffset: number,
-    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,
-  );
-
-  useEffect(() => {
-    if (!selection) return;
-
-    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();
-      requestAnimationFrame(() => {
-        const sel = window.getSelection();
-        if (sel?.isCollapsed) {
-          sel.removeAllRanges();
-        }
-      });
-    };
-
-    // Use mousedown to catch clicks before text selection
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [selection]);
-
-  const onTextSelect = useCallback(
-    (
-      text: string,
-      startOffset: number,
-      endOffset: number,
-      selectionTop: number,
-    ) => {
-      appStore.getState().setSelection({ text, startOffset, endOffset });
-      appStore.getState().setPendingSelectionTop(selectionTop);
-    },
-    [],
-  );
-
-  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);
-    clearPendingMarks();
-    window.getSelection()?.removeAllRanges();
-  }, []);
-
-  return {
-    selection,
-    highlightPositions,
-    documentPositions,
-    pendingSelectionTop,
-    onTextSelect,
-    onPositionsChange,
-    clearSelection,
-  };
-}

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/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" });
-  });
-});