@peaske7/readit 0.2.0 → 0.2.1

package/src/lib/mermaid-config.ts

@@ -0,0 +1,38 @@
+export const MERMAID_THEME = {
+  fontSize: "16px",
+  primaryColor: "rgba(245, 222, 160, 0.8)",
+  primaryTextColor: "#3f3f46",
+  primaryBorderColor: "#c9a84a",
+  secondaryColor: "rgba(168, 196, 228, 0.6)",
+  secondaryTextColor: "#3f3f46",
+  secondaryBorderColor: "#5b7fa8",
+  tertiaryColor: "rgba(170, 210, 170, 0.6)",
+  tertiaryTextColor: "#3f3f46",
+  tertiaryBorderColor: "#5a9a62",
+  background: "#ffffff",
+  mainBkg: "#ffffff",
+  textColor: "#3f3f46",
+  lineColor: "#a1a1aa",
+  nodeBkg: "rgba(245, 222, 160, 0.6)",
+  nodeBorder: "#c9a84a",
+  clusterBkg: "rgba(250, 250, 250, 0.8)",
+  clusterBorder: "#e4e4e7",
+  actorBkg: "rgba(168, 196, 228, 0.5)",
+  actorBorder: "#5b7fa8",
+  actorTextColor: "#3f3f46",
+  signalColor: "#3f3f46",
+  signalTextColor: "#3f3f46",
+  noteBkgColor: "rgba(245, 222, 160, 0.5)",
+  noteBorderColor: "#c9a84a",
+  noteTextColor: "#3f3f46",
+} as const;
+
+export function getMermaidInitConfig() {
+  return {
+    startOnLoad: false,
+    theme: "base" as const,
+    securityLevel: "strict" as const,
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    themeVariables: MERMAID_THEME,
+  };
+}

package/src/lib/mermaid-renderer.ts

@@ -0,0 +1,162 @@
+interface PendingRequest {
+  resolve: (svg: string) => void;
+  reject: (err: Error) => void;
+  timer: ReturnType<typeof setTimeout>;
+}
+
+const RENDER_TIMEOUT_MS = 15_000;
+const MAX_CONSECUTIVE_ERRORS = 3;
+
+let worker: Worker | null = null;
+let workerReady: Promise<void> | null = null;
+const pendingRequests = new Map<string, PendingRequest>();
+let requestCounter = 0;
+let consecutiveErrors = 0;
+
+function resetWorker(
+  reason: Error,
+  currentWorker: Worker | null = worker,
+): void {
+  if (currentWorker) currentWorker.terminate();
+  if (worker === currentWorker) {
+    worker = null;
+    workerReady = null;
+  }
+  for (const [, pending] of pendingRequests) {
+    clearTimeout(pending.timer);
+    pending.reject(reason);
+  }
+  pendingRequests.clear();
+}
+
+function createWorker(): { worker: Worker; ready: Promise<void> } {
+  const w = new Worker(new URL("./mermaid-worker.ts", import.meta.url).href, {
+    type: "module",
+  });
+
+  const ready = new Promise<void>((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      w.removeEventListener("message", onReady);
+      w.removeEventListener("error", onStartupError);
+      w.terminate();
+      if (worker === w) {
+        worker = null;
+        workerReady = null;
+      }
+      reject(new Error("Mermaid worker failed to start within 30s"));
+    }, 30_000);
+
+    function onStartupError(event: ErrorEvent) {
+      clearTimeout(timeout);
+      w.removeEventListener("message", onReady);
+      w.removeEventListener("error", onStartupError);
+      w.terminate();
+      if (worker === w) {
+        worker = null;
+        workerReady = null;
+      }
+      reject(new Error(`Mermaid worker failed to start: ${event.message}`));
+    }
+
+    function onReady(event: MessageEvent) {
+      if (event.data?.type === "ready") {
+        clearTimeout(timeout);
+        w.removeEventListener("message", onReady);
+        w.removeEventListener("error", onStartupError);
+        resolve();
+      }
+    }
+    w.addEventListener("message", onReady);
+    w.addEventListener("error", onStartupError);
+  });
+
+  w.addEventListener("message", (event: MessageEvent) => {
+    const { id, svg, error } = event.data;
+    if (!id) return;
+
+    const pending = pendingRequests.get(id);
+    if (!pending) return;
+
+    clearTimeout(pending.timer);
+    pendingRequests.delete(id);
+
+    if (error) {
+      consecutiveErrors++;
+      pending.reject(new Error(error));
+    } else {
+      consecutiveErrors = 0;
+      pending.resolve(svg);
+    }
+  });
+
+  w.addEventListener("error", (event) => {
+    resetWorker(new Error(`Worker error: ${event.message}`), w);
+  });
+
+  return { worker: w, ready };
+}
+
+async function ensureWorker(): Promise<Worker> {
+  if (worker && workerReady) {
+    await workerReady;
+
+    if (consecutiveErrors >= MAX_CONSECUTIVE_ERRORS) {
+      resetWorker(
+        new Error("Mermaid worker restarted after repeated render failures"),
+      );
+      consecutiveErrors = 0;
+    }
+  }
+
+  if (!worker) {
+    const result = createWorker();
+    worker = result.worker;
+    workerReady = result.ready;
+    await workerReady;
+  }
+
+  return worker;
+}
+
+async function renderMermaidSvg(code: string): Promise<string> {
+  const w = await ensureWorker();
+
+  const id = `req-${++requestCounter}`;
+  const diagramId = `mermaid-ssr-${requestCounter}`;
+
+  return new Promise<string>((resolve, reject) => {
+    const timer = setTimeout(() => {
+      pendingRequests.delete(id);
+      resetWorker(
+        new Error(`Mermaid render timed out after ${RENDER_TIMEOUT_MS}ms`),
+        w,
+      );
+      reject(
+        new Error(`Mermaid render timed out after ${RENDER_TIMEOUT_MS}ms`),
+      );
+    }, RENDER_TIMEOUT_MS);
+
+    pendingRequests.set(id, { resolve, reject, timer });
+
+    w.postMessage({ id, code, diagramId });
+  });
+}
+
+export async function renderMermaidBlocks(
+  blocks: string[],
+): Promise<(string | null)[]> {
+  const results: (string | null)[] = [];
+  for (const code of blocks) {
+    try {
+      const svg = await renderMermaidSvg(code);
+      results.push(svg);
+    } catch {
+      results.push(null);
+    }
+  }
+  return results;
+}
+
+export function disposeMermaidWorker(): void {
+  resetWorker(new Error("Mermaid worker disposed"));
+}

package/src/lib/mermaid-worker.ts

@@ -0,0 +1,60 @@
+/// <reference lib="webworker" />
+
+import { JSDOM } from "jsdom";
+import { getMermaidInitConfig } from "./mermaid-config";
+
+const dom = new JSDOM(
+  '<!DOCTYPE html><html><body><div id="mermaid-container"></div></body></html>',
+  {
+    url: "http://localhost",
+    pretendToBeVisual: true,
+    contentType: "text/html",
+  },
+);
+
+const g = globalThis as Record<string, unknown>;
+g.window = dom.window;
+g.document = dom.window.document;
+g.navigator = dom.window.navigator;
+g.DOMParser = dom.window.DOMParser;
+g.XMLSerializer = dom.window.XMLSerializer;
+g.HTMLElement = dom.window.HTMLElement;
+g.SVGElement = (dom.window as unknown as Record<string, unknown>).SVGElement;
+
+const mermaid = (await import("mermaid")).default;
+mermaid.initialize(getMermaidInitConfig());
+
+interface RenderRequest {
+  id: string;
+  code: string;
+  diagramId: string;
+}
+
+function resetBody() {
+  const body = dom.window.document.body;
+  while (body.firstChild) body.removeChild(body.firstChild);
+  const container = dom.window.document.createElement("div");
+  container.id = "mermaid-container";
+  body.appendChild(container);
+}
+
+let renderQueue: Promise<void> = Promise.resolve();
+
+self.onmessage = (event: MessageEvent<RenderRequest>) => {
+  const { id, code, diagramId } = event.data;
+
+  renderQueue = renderQueue.then(async () => {
+    try {
+      resetBody();
+      const { svg } = await mermaid.render(diagramId, code);
+      self.postMessage({ id, svg });
+    } catch (err) {
+      self.postMessage({
+        id,
+        error: err instanceof Error ? err.message : String(err),
+      });
+    }
+  });
+};
+
+self.postMessage({ type: "ready" });

package/src/lib/positions.ts

@@ -1,11 +1,8 @@
+import type { Highlighter } from "./highlight/highlighter";
 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>();
@@ -16,39 +13,44 @@ export class Positions {
   private listeners = new Set<Listener>();
   private root: HTMLElement | null = null;
   private container: HTMLElement | null = null;
+  private highlighter: Highlighter | null = null;
   private resizeRaf: number | null = null;
-  private mutationRaf: number | null = null;
-  private observer: MutationObserver | null = null;
+  private cacheRaf: number | null = null;
+  private unsubCache: (() => void) | null = null;
 
-  attach(root: HTMLElement, container: HTMLElement) {
+  attach(root: HTMLElement, container: HTMLElement, highlighter: Highlighter) {
     this.root = root;
     this.container = container;
+    this.highlighter = highlighter;
     window.addEventListener("resize", this.onResize);
 
-    this.observer = new MutationObserver(() => {
-      if (this.mutationRaf !== null) return;
-      this.mutationRaf = requestAnimationFrame(() => {
-        this.mutationRaf = null;
+    this.unsubCache = highlighter.onCacheInvalidated(() => {
+      if (this.cacheRaf !== null) return;
+      this.cacheRaf = requestAnimationFrame(() => {
+        this.cacheRaf = 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);
+    if (this.cacheRaf !== null) cancelAnimationFrame(this.cacheRaf);
     this.resizeRaf = null;
-    this.mutationRaf = null;
-    this.observer?.disconnect();
-    this.observer = null;
+    this.cacheRaf = null;
+    this.unsubCache?.();
+    this.unsubCache = null;
     this.root = null;
     this.container = null;
+    this.highlighter = null;
   }
 
   cache() {
-    if (!this.root || !this.container) return;
+    if (!this.root || !this.container || !this.highlighter) return;
+
+    const highlightedIds = this.highlighter.getHighlightedIds();
+    if (highlightedIds.length === 0) return;
 
     const ref = this.container.getBoundingClientRect();
     const scrollY = window.scrollY;
@@ -56,13 +58,10 @@ export class Positions {
     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 positions = this.highlighter.getPositions(ref);
+    for (const [id, relTop] of positions) {
+      this.relative.set(id, relTop);
+      this.absolute.set(id, relTop + ref.top + scrollY);
     }
 
     const snap: Record<string, number> = {};
@@ -71,6 +70,7 @@ export class Positions {
 
     this.apply();
     this.notify();
+    this.exposeReady();
   }
 
   setIds(ids: string[]) {
@@ -147,4 +147,11 @@ export class Positions {
   private notify() {
     for (const fn of this.listeners) fn();
   }
+
+  private exposeReady() {
+    if (typeof window !== "undefined") {
+      (window as unknown as Record<string, unknown>).__readitPositionsReady =
+        performance.now();
+    }
+  }
 }

package/src/lib/shortcut-registry.ts

@@ -0,0 +1,244 @@
+import type { KeybindingOverride, ShortcutBinding } from "../schema";
+import type { TranslationKey } from "./i18n/types";
+
+const IS_MAC =
+  typeof navigator !== "undefined" && navigator.platform.includes("Mac");
+
+export const ShortcutActions = {
+  COPY_ALL: "copyAll",
+  COPY_ALL_RAW: "copyAllRaw",
+  NAVIGATE_NEXT: "navigateNext",
+  NAVIGATE_PREVIOUS: "navigatePrevious",
+  COPY_SELECTION_RAW: "copySelectionRaw",
+  COPY_SELECTION_LLM: "copySelectionLLM",
+  CLEAR_SELECTION: "clearSelection",
+} as const;
+
+export type ShortcutAction =
+  (typeof ShortcutActions)[keyof typeof ShortcutActions];
+
+export interface ShortcutDefinition {
+  id: ShortcutAction;
+  label: TranslationKey;
+  description: TranslationKey;
+  defaultBinding: ShortcutBinding;
+  binding: ShortcutBinding;
+  enabled: boolean;
+}
+
+export const DEFAULT_SHORTCUTS: ShortcutDefinition[] = [
+  {
+    id: ShortcutActions.COPY_ALL,
+    label: "shortcut.copyAll.label",
+    description: "shortcut.copyAll.description",
+    defaultBinding: { key: "c", alt: true },
+    binding: { key: "c", alt: true },
+    enabled: true,
+  },
+  {
+    id: ShortcutActions.COPY_ALL_RAW,
+    label: "shortcut.copyAllRaw.label",
+    description: "shortcut.copyAllRaw.description",
+    defaultBinding: { key: "c", alt: true, shift: true },
+    binding: { key: "c", alt: true, shift: true },
+    enabled: true,
+  },
+  {
+    id: ShortcutActions.NAVIGATE_NEXT,
+    label: "shortcut.navigateNext.label",
+    description: "shortcut.navigateNext.description",
+    defaultBinding: { key: "ArrowDown", alt: true },
+    binding: { key: "ArrowDown", alt: true },
+    enabled: true,
+  },
+  {
+    id: ShortcutActions.NAVIGATE_PREVIOUS,
+    label: "shortcut.navigatePrevious.label",
+    description: "shortcut.navigatePrevious.description",
+    defaultBinding: { key: "ArrowUp", alt: true },
+    binding: { key: "ArrowUp", alt: true },
+    enabled: true,
+  },
+  {
+    id: ShortcutActions.COPY_SELECTION_RAW,
+    label: "shortcut.copySelectionRaw.label",
+    description: "shortcut.copySelectionRaw.description",
+    defaultBinding: IS_MAC
+      ? { key: "c", meta: true, shift: true }
+      : { key: "c", ctrl: true, shift: true },
+    binding: IS_MAC
+      ? { key: "c", meta: true, shift: true }
+      : { key: "c", ctrl: true, shift: true },
+    enabled: true,
+  },
+  {
+    id: ShortcutActions.COPY_SELECTION_LLM,
+    label: "shortcut.copySelectionLLM.label",
+    description: "shortcut.copySelectionLLM.description",
+    defaultBinding: IS_MAC
+      ? { key: "c", meta: true, alt: true }
+      : { key: "c", ctrl: true, alt: true },
+    binding: IS_MAC
+      ? { key: "c", meta: true, alt: true }
+      : { key: "c", ctrl: true, alt: true },
+    enabled: true,
+  },
+  {
+    id: ShortcutActions.CLEAR_SELECTION,
+    label: "shortcut.clearSelection.label",
+    description: "shortcut.clearSelection.description",
+    defaultBinding: { key: "Escape" },
+    binding: { key: "Escape" },
+    enabled: true,
+  },
+];
+
+export function matchesBinding(
+  event: KeyboardEvent,
+  binding: ShortcutBinding,
+): boolean {
+  if (event.key.toLowerCase() !== binding.key.toLowerCase()) return false;
+  if (!!binding.alt !== event.altKey) return false;
+  if (!!binding.ctrl !== event.ctrlKey) return false;
+  if (!!binding.meta !== event.metaKey) return false;
+  if (!!binding.shift !== event.shiftKey) return false;
+  return true;
+}
+
+export function formatBinding(
+  binding: ShortcutBinding,
+  isMac: boolean,
+): string {
+  const parts: string[] = [];
+
+  if (binding.ctrl) {
+    parts.push(isMac ? "\u2303" : "Ctrl");
+  }
+  if (binding.meta) {
+    parts.push(isMac ? "\u2318" : "Meta");
+  }
+  if (binding.alt) {
+    parts.push(isMac ? "\u2325" : "Alt");
+  }
+  if (binding.shift) {
+    parts.push(isMac ? "\u21E7" : "Shift");
+  }
+
+  const keyDisplay = KEY_DISPLAY_MAP[binding.key] ?? binding.key.toUpperCase();
+  parts.push(keyDisplay);
+
+  return parts.join(isMac ? "" : "+");
+}
+
+const KEY_DISPLAY_MAP: Record<string, string> = {
+  ArrowUp: "\u2191",
+  ArrowDown: "\u2193",
+  ArrowLeft: "\u2190",
+  ArrowRight: "\u2192",
+  Escape: "Esc",
+  Enter: "\u21B5",
+  Backspace: "\u232B",
+  Delete: "\u2326",
+  Tab: "\u21E5",
+  " ": "Space",
+};
+
+export function resolveShortcuts(
+  overrides: KeybindingOverride[],
+): ShortcutDefinition[] {
+  return DEFAULT_SHORTCUTS.map((def) => {
+    const override = overrides.find((o) => o.id === def.id);
+    if (!override) return { ...def };
+    return {
+      ...def,
+      binding: override.binding ?? def.defaultBinding,
+      enabled: override.enabled,
+    };
+  });
+}
+
+// Mac-specific reserved bindings (Cmd+key)
+export const RESERVED_BINDINGS_MAC: ShortcutBinding[] = [
+  { key: "r", meta: true },
+  { key: "w", meta: true },
+  { key: "t", meta: true },
+  { key: "n", meta: true },
+  { key: "q", meta: true },
+  { key: "l", meta: true },
+  { key: "a", meta: true },
+  { key: "f", meta: true },
+  { key: "p", meta: true },
+];
+
+// Windows/Linux reserved bindings (Ctrl+key consumed by browser)
+export const RESERVED_BINDINGS_OTHER: ShortcutBinding[] = [
+  { key: "r", ctrl: true },
+  { key: "w", ctrl: true },
+  { key: "t", ctrl: true },
+  { key: "n", ctrl: true },
+  { key: "l", ctrl: true },
+  { key: "a", ctrl: true },
+  { key: "f", ctrl: true },
+  { key: "p", ctrl: true },
+];
+
+export function isReservedBinding(
+  binding: ShortcutBinding,
+  isMac: boolean,
+): boolean {
+  const reserved = isMac ? RESERVED_BINDINGS_MAC : RESERVED_BINDINGS_OTHER;
+  // Ignore shift when checking reserved bindings because browsers also
+  // consume the shifted variants (e.g. Cmd+Shift+R, Ctrl+Shift+T).
+  return reserved.some(
+    (r) =>
+      r.key.toLowerCase() === binding.key.toLowerCase() &&
+      !!r.alt === !!binding.alt &&
+      !!r.ctrl === !!binding.ctrl &&
+      !!r.meta === !!binding.meta,
+  );
+}
+
+export function eventToBinding(event: KeyboardEvent): ShortcutBinding {
+  return {
+    key: event.key,
+    ...(event.altKey && { alt: true }),
+    ...(event.ctrlKey && { ctrl: true }),
+    ...(event.metaKey && { meta: true }),
+    ...(event.shiftKey && { shift: true }),
+  };
+}
+
+export function bindingsEqual(a: ShortcutBinding, b: ShortcutBinding): boolean {
+  return (
+    a.key.toLowerCase() === b.key.toLowerCase() &&
+    !!a.alt === !!b.alt &&
+    !!a.ctrl === !!b.ctrl &&
+    !!a.meta === !!b.meta &&
+    !!a.shift === !!b.shift
+  );
+}
+
+export interface ShortcutGroup {
+  label: TranslationKey;
+  ids: ShortcutAction[];
+}
+
+export const SHORTCUT_GROUPS: ShortcutGroup[] = [
+  {
+    label: "shortcutGroup.copy",
+    ids: [
+      ShortcutActions.COPY_ALL,
+      ShortcutActions.COPY_ALL_RAW,
+      ShortcutActions.COPY_SELECTION_RAW,
+      ShortcutActions.COPY_SELECTION_LLM,
+    ],
+  },
+  {
+    label: "shortcutGroup.navigate",
+    ids: [ShortcutActions.NAVIGATE_NEXT, ShortcutActions.NAVIGATE_PREVIOUS],
+  },
+  {
+    label: "shortcutGroup.other",
+    ids: [ShortcutActions.CLEAR_SELECTION],
+  },
+];

package/src/lib/utils.ts

@@ -1,5 +1,4 @@
 import { type ClassValue, clsx } from "clsx";
-import type { ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
 
 export function isMarkdownFile(filePath: string): boolean {
@@ -14,31 +13,3 @@ export function truncate(text: string, maxLength = 30): string {
   if (text.length <= maxLength) return text;
   return `${text.slice(0, maxLength)}…`;
 }
-
-export function getTextContent(children: ReactNode): string {
-  if (typeof children === "string" || typeof children === "number") {
-    return String(children);
-  }
-  if (Array.isArray(children)) {
-    return children.map(getTextContent).join("");
-  }
-  if (
-    typeof children === "object" &&
-    children !== null &&
-    "props" in children
-  ) {
-    return getTextContent(
-      (children as { props: { children?: ReactNode } }).props.children,
-    );
-  }
-  return "";
-}
-
-export function slugify(text: string): string {
-  return text
-    .toLowerCase()
-    .trim()
-    .replace(/[^\w\s-]/g, "")
-    .replace(/\s+/g, "-")
-    .replace(/-+/g, "-");
-}

package/src/main.ts

@@ -0,0 +1,16 @@
+import { mount } from "svelte";
+import "./index.css";
+import App from "./App.svelte";
+import { hydrateFromInlineData } from "./stores/app.svelte";
+import { initSettings } from "./stores/settings.svelte";
+import { initShortcuts } from "./stores/shortcuts.svelte";
+
+const dataEl = document.getElementById("__readit");
+if (dataEl) {
+  const data = JSON.parse(dataEl.textContent ?? "{}");
+  hydrateFromInlineData(data);
+  initSettings(data.settings);
+  initShortcuts(data.settings?.keybindings ?? []);
+}
+
+mount(App, { target: document.getElementById("app")! });