@peaske7/readit 0.1.8 → 0.2.0

package/src/lib/positions.ts

@@ -0,0 +1,150 @@
+import { resolveMarginNotePositions } from "./margin-layout";
+
+type Listener = () => void;
+
+/**
+ * Positions managed outside React. Scroll-invariant — only recalculates
+ * on highlight mutation (MutationObserver) and resize.
+ */
+export class Positions {
+  private relative = new Map<string, number>();
+  private absolute = new Map<string, number>();
+  private snapshot: Record<string, number> = {};
+  private notes = new Map<string, HTMLElement>();
+  private ids: string[] = [];
+  private pendingTop: number | undefined;
+  private listeners = new Set<Listener>();
+  private root: HTMLElement | null = null;
+  private container: HTMLElement | null = null;
+  private resizeRaf: number | null = null;
+  private mutationRaf: number | null = null;
+  private observer: MutationObserver | null = null;
+
+  attach(root: HTMLElement, container: HTMLElement) {
+    this.root = root;
+    this.container = container;
+    window.addEventListener("resize", this.onResize);
+
+    this.observer = new MutationObserver(() => {
+      if (this.mutationRaf !== null) return;
+      this.mutationRaf = requestAnimationFrame(() => {
+        this.mutationRaf = null;
+        this.cache();
+      });
+    });
+    this.observer.observe(root, { childList: true, subtree: true });
+  }
+
+  detach() {
+    window.removeEventListener("resize", this.onResize);
+    if (this.resizeRaf !== null) cancelAnimationFrame(this.resizeRaf);
+    if (this.mutationRaf !== null) cancelAnimationFrame(this.mutationRaf);
+    this.resizeRaf = null;
+    this.mutationRaf = null;
+    this.observer?.disconnect();
+    this.observer = null;
+    this.root = null;
+    this.container = null;
+  }
+
+  cache() {
+    if (!this.root || !this.container) return;
+
+    const ref = this.container.getBoundingClientRect();
+    const scrollY = window.scrollY;
+
+    this.relative.clear();
+    this.absolute.clear();
+
+    for (const mark of this.root.querySelectorAll("mark[data-comment-id]")) {
+      const id = mark.getAttribute("data-comment-id");
+      if (!id || this.relative.has(id)) continue;
+
+      const rect = mark.getBoundingClientRect();
+      this.relative.set(id, rect.top - ref.top);
+      this.absolute.set(id, rect.top + scrollY);
+    }
+
+    const snap: Record<string, number> = {};
+    for (const [id, top] of this.absolute) snap[id] = top;
+    this.snapshot = snap;
+
+    this.apply();
+    this.notify();
+  }
+
+  setIds(ids: string[]) {
+    this.ids = ids;
+  }
+
+  setPending(top: number | undefined) {
+    if (this.pendingTop === top) return;
+    this.pendingTop = top;
+    this.apply();
+  }
+
+  register(id: string, el: HTMLElement) {
+    this.notes.set(id, el);
+    const top = this.resolve().get(id);
+    if (top !== undefined) {
+      el.style.top = `${top}px`;
+      el.style.visibility = "visible";
+    } else {
+      el.style.visibility = "hidden";
+    }
+  }
+
+  unregister(id: string) {
+    this.notes.delete(id);
+  }
+
+  getAbsolute(): Record<string, number> {
+    return this.snapshot;
+  }
+
+  subscribe(fn: Listener): () => void {
+    this.listeners.add(fn);
+    return () => this.listeners.delete(fn);
+  }
+
+  dispose() {
+    this.detach();
+    this.relative.clear();
+    this.absolute.clear();
+    this.snapshot = {};
+    this.notes.clear();
+    this.listeners.clear();
+    this.ids = [];
+  }
+
+  private resolve(): Map<string, number> {
+    const pos: Record<string, number> = {};
+    for (const [id, top] of this.relative) pos[id] = top;
+    return resolveMarginNotePositions(this.ids, pos, this.pendingTop);
+  }
+
+  private apply() {
+    const resolved = this.resolve();
+    for (const [id, el] of this.notes) {
+      const top = resolved.get(id);
+      if (top !== undefined) {
+        el.style.top = `${top}px`;
+        el.style.visibility = "visible";
+      } else {
+        el.style.visibility = "hidden";
+      }
+    }
+  }
+
+  private onResize = () => {
+    if (this.resizeRaf !== null) return;
+    this.resizeRaf = requestAnimationFrame(() => {
+      this.resizeRaf = null;
+      this.cache();
+    });
+  };
+
+  private notify() {
+    for (const fn of this.listeners) fn();
+  }
+}

package/src/lib/utils.ts

@@ -1,34 +1,20 @@
 import { type ClassValue, clsx } from "clsx";
 import type { ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
-import type { DocumentType } from "../types";
 
-export function getFileType(filePath: string): DocumentType | null {
-  if (filePath.endsWith(".md") || filePath.endsWith(".markdown")) {
-    return "markdown";
-  }
-  if (filePath.endsWith(".html") || filePath.endsWith(".htm")) {
-    return "html";
-  }
-  return null;
+export function isMarkdownFile(filePath: string): boolean {
+  return filePath.endsWith(".md") || filePath.endsWith(".markdown");
 }
 
 export function cn(...inputs: ReadonlyArray<ClassValue>) {
   return twMerge(clsx(inputs));
 }
 
-/**
- * Truncate text with ellipsis for toast notifications.
- */
 export function truncate(text: string, maxLength = 30): string {
   if (text.length <= maxLength) return text;
   return `${text.slice(0, maxLength)}…`;
 }
 
-/**
- * Recursively extract text content from React children.
- * Handles strings, numbers, arrays, and React elements.
- */
 export function getTextContent(children: ReactNode): string {
   if (typeof children === "string" || typeof children === "number") {
     return String(children);
@@ -48,9 +34,6 @@ export function getTextContent(children: ReactNode): string {
   return "";
 }
 
-/**
- * Slugify text to create URL-friendly IDs
- */
 export function slugify(text: string): string {
   return text
     .toLowerCase()

package/src/schema.ts

@@ -0,0 +1,81 @@
+export const AnchorConfidences = {
+  EXACT: "exact",
+  NORMALIZED: "normalized",
+  FUZZY: "fuzzy",
+  UNRESOLVED: "unresolved",
+} as const;
+
+export type AnchorConfidence =
+  (typeof AnchorConfidences)[keyof typeof AnchorConfidences];
+
+export type ResolvedAnchorConfidence = Exclude<
+  AnchorConfidence,
+  typeof AnchorConfidences.UNRESOLVED
+>;
+
+export interface Comment {
+  id: string;
+  selectedText: string;
+  comment: string;
+  createdAt: string;
+  startOffset: number;
+  endOffset: number;
+  /** e.g. "L42" or "L42-L55" */
+  lineHint?: string;
+  anchorConfidence?: AnchorConfidence;
+  /** First N chars of original text for anchor matching when selectedText is truncated */
+  anchorPrefix?: string;
+}
+
+export interface CommentFile {
+  source: string;
+  /** SHA-256 prefix (16 chars) */
+  hash: string;
+  version: number;
+  comments: Comment[];
+}
+
+export interface Anchor {
+  start: number;
+  end: number;
+  line: number;
+  confidence: ResolvedAnchorConfidence;
+  distance?: number;
+}
+
+export interface SelectionRange {
+  startOffset: number;
+  endOffset: number;
+}
+
+export interface Selection extends SelectionRange {
+  text: string;
+}
+
+export interface Document {
+  content: string;
+  filePath: string;
+  fileName: string;
+  clean: boolean;
+}
+
+export const FontFamilies = {
+  SERIF: "serif",
+  SANS_SERIF: "sans-serif",
+} as const;
+
+export type FontFamily = (typeof FontFamilies)[keyof typeof FontFamilies];
+
+export const ThemeModes = {
+  LIGHT: "light",
+  DARK: "dark",
+  SYSTEM: "system",
+} as const;
+
+export type ThemeMode = (typeof ThemeModes)[keyof typeof ThemeModes];
+
+export interface DocumentSettings {
+  version: number;
+  fontFamily: FontFamily;
+  onboarded?: boolean;
+}

package/src/{server/index.ts → server.ts}

@@ -3,7 +3,7 @@ import * as fs from "node:fs/promises";
 import * as os from "node:os";
 import * as path from "node:path";
 import { basename, dirname, join } from "node:path";
-import { findAnchorWithFallback } from "../lib/anchor.js";
+import { findAnchorWithFallback } from "./lib/anchor.js";
 import {
   computeHash,
   createComment,
@@ -12,20 +12,15 @@ import {
   parseCommentFile,
   serializeComments,
   truncateSelection,
-} from "../lib/comment-storage.js";
-import { getFileType } from "../lib/utils.js";
+} from "./lib/comment-storage.js";
+import { isMarkdownFile } from "./lib/utils.js";
 import {
   AnchorConfidences,
   type Comment,
   type DocumentSettings,
-  type DocumentType,
-  type EditorScheme,
-  EditorSchemes,
   FontFamilies,
   type FontFamily,
-} from "../types/index.js";
-
-// ─── Helpers ─────────────────────────────────────────────────────────
+} from "./schema.js";
 
 function isErrnoException(err: unknown): err is NodeJS.ErrnoException {
   return err instanceof Error && "code" in err;
@@ -33,7 +28,6 @@ function isErrnoException(err: unknown): err is NodeJS.ErrnoException {
 
 export interface FileEntry {
   content?: string;
-  type: DocumentType;
   filePath: string;
 }
 
@@ -194,12 +188,6 @@ function isValidFontFamily(value: unknown): value is FontFamily {
   return value === FontFamilies.SERIF || value === FontFamilies.SANS_SERIF;
 }
 
-function isValidEditorScheme(value: unknown): value is EditorScheme {
-  return Object.values(EditorSchemes).includes(value as EditorScheme);
-}
-
-// ─── PID file helpers ───────────────────────────────────────────────
-
 export const SERVER_INFO_PATH = path.join(
   os.homedir(),
   ".readit",
@@ -225,8 +213,6 @@ export async function removeServerInfo(): Promise<void> {
   }
 }
 
-// ─── Response helpers ───────────────────────────────────────────────
-
 function json(data: unknown, status = 200): Response {
   return Response.json(data, { status });
 }
@@ -235,15 +221,11 @@ function errorResponse(message: string, status: number): Response {
   return Response.json({ error: message }, { status });
 }
 
-// ─── Route context ──────────────────────────────────────────────────
-
 interface RouteContext {
   filePath: string;
   getCurrentContent: () => Promise<string>;
 }
 
-// ─── Route handlers ─────────────────────────────────────────────────
-
 async function getComments(ctx: RouteContext): Promise<Response> {
   try {
     const currentContent = await ctx.getCurrentContent();
@@ -446,22 +428,16 @@ async function getSettingsRoute(): Promise<Response> {
 async function updateSettingsRoute(req: Request): Promise<Response> {
   try {
     const body = await req.json();
-    const { fontFamily, editorScheme, keybindings } = body;
+    const { fontFamily } = body;
 
     if (fontFamily !== undefined && !isValidFontFamily(fontFamily)) {
       return errorResponse("Invalid font family", 400);
     }
 
-    if (editorScheme !== undefined && !isValidEditorScheme(editorScheme)) {
-      return errorResponse("Invalid editor scheme", 400);
-    }
-
     const current = await readSettings();
     const settings: DocumentSettings = {
       ...current,
       ...(fontFamily !== undefined && { fontFamily }),
-      ...(editorScheme !== undefined && { editorScheme }),
-      ...(keybindings !== undefined && { keybindings }),
     };
 
     await writeSettings(settings);
@@ -472,8 +448,6 @@ async function updateSettingsRoute(req: Request): Promise<Response> {
   }
 }
 
-// ─── SSE helpers ────────────────────────────────────────────────────
-
 function createDocumentStream(
   sseClients: Set<ReadableStreamDefaultController>,
 ): Response {
@@ -545,8 +519,6 @@ function createHeartbeat(
   });
 }
 
-// ─── Static file serving ────────────────────────────────────────────
-
 async function serveStaticFile(
   distPath: string,
   pathname: string,
@@ -567,40 +539,85 @@ async function serveStaticFile(
   return new Response("Not Found", { status: 404 });
 }
 
-// ─── Extract route param ────────────────────────────────────────────
+const VITE_DEV_PORT = 24678;
+const VITE_DEV_ORIGIN = `http://127.0.0.1:${VITE_DEV_PORT}`;
+
+async function proxyToVite(
+  req: Request,
+  pathname: string,
+  search: string,
+): Promise<Response> {
+  const target = `${VITE_DEV_ORIGIN}${pathname}${search}`;
+  try {
+    return await fetch(
+      new Request(target, {
+        method: req.method,
+        headers: req.headers,
+        body: req.body,
+        redirect: "manual",
+      }),
+    );
+  } catch {
+    return new Response("Vite dev server not available", { status: 502 });
+  }
+}
+
+async function isViteReady(): Promise<boolean> {
+  try {
+    const res = await fetch(`${VITE_DEV_ORIGIN}/`);
+    return res.ok;
+  } catch {
+    return false;
+  }
+}
+
+async function spawnViteDev(): Promise<() => void> {
+  // If Vite is already running (e.g. after bun --watch restart), reuse it
+  if (await isViteReady()) {
+    return () => {};
+  }
+
+  const child = Bun.spawn(
+    ["bunx", "vite", "--port", String(VITE_DEV_PORT), "--strictPort"],
+    { stdout: "ignore", stderr: "inherit" },
+  );
+
+  const maxWaitMs = 10_000;
+  const start = Date.now();
+  while (Date.now() - start < maxWaitMs) {
+    if (await isViteReady()) break;
+    await new Promise((r) => setTimeout(r, 200));
+  }
+
+  return () => {
+    child.kill();
+  };
+}
 
 function extractCommentId(pathname: string): string | undefined {
   const match = pathname.match(/^\/api\/comments\/([^/]+)/);
   return match?.[1];
 }
 
-// ─── Multi-file state ───────────────────────────────────────────────
-
 interface FileState {
   content: string | null;
   isLoaded: boolean;
-  type: DocumentType;
   debounceTimer: ReturnType<typeof setTimeout> | null;
 }
 
-// ─── Server creation ────────────────────────────────────────────────
-
 interface ServerWithWatchers {
   server: ReturnType<typeof Bun.serve>;
   watchers: FSWatcher[];
 }
 
 function createServer(options: ServerOptions): ServerWithWatchers {
-  // Map of absolute path → mutable file state
   const fileMap = new Map<string, FileState>();
-  // Ordered list of file paths (insertion order for tab display)
   const fileOrder: string[] = [];
 
   for (const entry of options.files) {
     fileMap.set(entry.filePath, {
       content: entry.content ?? null,
       isLoaded: entry.content !== undefined,
-      type: entry.type,
       debounceTimer: null,
     });
     fileOrder.push(entry.filePath);
@@ -663,7 +680,6 @@ function createServer(options: ServerOptions): ServerWithWatchers {
     return content;
   }
 
-  // Resolve the target file from ?path= query param, falling back to first file
   function resolveContext(url: URL): RouteContext | null {
     const requestedPath = url.searchParams.get("path") ?? defaultPath;
     const state = fileMap.get(requestedPath);
@@ -726,18 +742,11 @@ function createServer(options: ServerOptions): ServerWithWatchers {
       const { pathname } = url;
       const method = req.method;
 
-      // ── API routes ──────────────────────────────────────────
-
-      // Document list (multi-file)
       if (pathname === "/api/documents" && method === "GET") {
-        const files = fileOrder.map((fp) => {
-          const state = fileMap.get(fp)!;
-          return {
-            path: fp,
-            fileName: basename(fp),
-            type: state.type,
-          };
-        });
+        const files = fileOrder.map((fp) => ({
+          path: fp,
+          fileName: basename(fp),
+        }));
         return json({
           files,
           clean: options.clean || false,
@@ -745,7 +754,6 @@ function createServer(options: ServerOptions): ServerWithWatchers {
         });
       }
 
-      // Register a document for this session without forcing focus
       if (pathname === "/api/documents" && method === "POST") {
         try {
           const { path: requestedPath } = await req.json();
@@ -763,11 +771,9 @@ function createServer(options: ServerOptions): ServerWithWatchers {
             }
             throw err;
           }
-          const fileType = getFileType(filePath);
-
-          if (!fileType) {
+          if (!isMarkdownFile(filePath)) {
             return errorResponse(
-              `Unsupported file type: ${filePath} (expected .md, .markdown, .html, or .htm)`,
+              `Unsupported file type: ${filePath} (expected .md or .markdown)`,
               400,
             );
           }
@@ -778,15 +784,12 @@ function createServer(options: ServerOptions): ServerWithWatchers {
             return json({
               path: filePath,
               fileName: basename(filePath),
-              type: fileType,
               status: "present",
             });
           } else {
-            // New document — register metadata only, load content on demand
             fileMap.set(filePath, {
               content: null,
               isLoaded: false,
-              type: fileType,
               debounceTimer: null,
             });
             fileOrder.push(filePath);
@@ -798,14 +801,12 @@ function createServer(options: ServerOptions): ServerWithWatchers {
               type: "document-added",
               path: filePath,
               fileName: basename(filePath),
-              fileType,
             });
           }
 
           return json({
             path: filePath,
             fileName: basename(filePath),
-            type: fileType,
             status: "added",
           });
         } catch (err) {
@@ -814,15 +815,12 @@ function createServer(options: ServerOptions): ServerWithWatchers {
         }
       }
 
-      // Single document (backward compat + path-aware)
       if (pathname === "/api/document" && method === "GET") {
         const ctxOrRes = requireContext(url);
         if (ctxOrRes instanceof Response) return ctxOrRes;
-        const state = fileMap.get(ctxOrRes.filePath)!;
         const content = await ctxOrRes.getCurrentContent();
         return json({
           content,
-          type: state.type,
           filePath: ctxOrRes.filePath,
           fileName: basename(ctxOrRes.filePath),
           clean: options.clean || false,
@@ -841,7 +839,6 @@ function createServer(options: ServerOptions): ServerWithWatchers {
         return createHeartbeat(onHeartbeatOpen, onHeartbeatClose);
       }
 
-      // Comments routes
       if (pathname === "/api/comments" && method === "GET") {
         const ctxOrRes = requireContext(url);
         if (ctxOrRes instanceof Response) return ctxOrRes;
@@ -866,7 +863,6 @@ function createServer(options: ServerOptions): ServerWithWatchers {
         return clearComments(ctxOrRes);
       }
 
-      // Parameterized comment routes
       const commentId = extractCommentId(pathname);
       if (commentId) {
         const ctxOrRes = requireContext(url);
@@ -883,7 +879,6 @@ function createServer(options: ServerOptions): ServerWithWatchers {
         }
       }
 
-      // Settings routes (global, not per-document)
       if (pathname === "/api/settings" && method === "GET") {
         return getSettingsRoute();
       }
@@ -892,8 +887,9 @@ function createServer(options: ServerOptions): ServerWithWatchers {
         return updateSettingsRoute(req);
       }
 
-      // ── Static / SPA serving ────────────────────────────────
-
+      if (isDev) {
+        return proxyToVite(req, pathname, url.search);
+      }
       return serveStaticFile(distPath, pathname);
     },
   });
@@ -909,8 +905,6 @@ function createServer(options: ServerOptions): ServerWithWatchers {
   return { server, watchers };
 }
 
-// ─── Port fallback + start ──────────────────────────────────────────
-
 export async function startServer(
   options: ServerOptions,
 ): Promise<ServerResult> {
@@ -923,9 +917,15 @@ export async function startServer(
       const displayHost =
         options.host === "0.0.0.0" ? "localhost" : options.host;
 
+      let stopVite: (() => void) | undefined;
+      if (process.env.NODE_ENV === "development") {
+        stopVite = await spawnViteDev();
+      }
+
       const originalStop = server.stop.bind(server);
       const wrappedServer = {
         stop() {
+          stopVite?.();
           for (const w of watchers) w.close();
           originalStop();
         },