@peaske7/readit 0.2.0 → 0.3.0-rc.0

package/src/stores/app.svelte.ts

@@ -0,0 +1,231 @@
+import type { Heading } from "../lib/headings";
+import type { Comment, Document, Selection } from "../schema";
+
+export interface DocumentState {
+  document: Document;
+  headings: Heading[];
+  comments: Comment[];
+  commentsError: string | null;
+  sortedComments: Comment[];
+  selection: Selection | null;
+  pendingSelectionTop: number | undefined;
+  scrollY: number;
+  reanchorTarget: { commentId: string } | null;
+}
+
+interface InlineData {
+  files: { path: string; fileName: string }[];
+  activeFile: string;
+  clean: boolean;
+  workingDirectory: string;
+  documents: Record<
+    string,
+    {
+      html: string;
+      headings: { id: string; text: string; level: number }[];
+      comments: Comment[];
+    }
+  >;
+  settings: { version: number; fontFamily: string };
+}
+
+function createInitialDocumentState(doc: Document): DocumentState {
+  return {
+    document: doc,
+    headings: [],
+    comments: [],
+    commentsError: null,
+    sortedComments: [],
+    selection: null,
+    pendingSelectionTop: undefined,
+    scrollY: 0,
+    reanchorTarget: null,
+  };
+}
+
+function sortComments(comments: Comment[]): Comment[] {
+  return [...comments].sort((a, b) => a.startOffset - b.startOffset);
+}
+
+export const app = $state({
+  documents: new Map<string, DocumentState>(),
+  activeDocumentPath: null as string | null,
+  documentOrder: [] as string[],
+  workingDirectory: null as string | null,
+});
+
+export function getActiveDocumentState(): DocumentState | undefined {
+  if (!app.activeDocumentPath) return undefined;
+  return app.documents.get(app.activeDocumentPath);
+}
+
+export function setWorkingDirectory(dir: string): void {
+  app.workingDirectory = dir;
+}
+
+export function openDocument(doc: Document, opts?: { active?: boolean }): void {
+  const active = opts?.active ?? true;
+  const nextActive =
+    active || !app.activeDocumentPath ? doc.filePath : app.activeDocumentPath;
+
+  if (app.documents.has(doc.filePath)) {
+    const prevDoc = app.documents.get(doc.filePath)!;
+    const newDocs = new Map(app.documents);
+    newDocs.set(doc.filePath, {
+      ...prevDoc,
+      document: { ...prevDoc.document, ...doc },
+    });
+    app.documents = newDocs;
+    app.activeDocumentPath = nextActive;
+    return;
+  }
+
+  const newDocs = new Map(app.documents);
+  newDocs.set(doc.filePath, createInitialDocumentState(doc));
+  app.documents = newDocs;
+  app.activeDocumentPath = nextActive;
+  app.documentOrder = [...app.documentOrder, doc.filePath];
+}
+
+export function closeDocument(filePath: string): void {
+  const newDocs = new Map(app.documents);
+  newDocs.delete(filePath);
+
+  const newOrder = app.documentOrder.filter((p) => p !== filePath);
+
+  let newActive = app.activeDocumentPath;
+  if (app.activeDocumentPath === filePath) {
+    const oldIndex = app.documentOrder.indexOf(filePath);
+    newActive = newOrder[oldIndex] ?? newOrder[oldIndex - 1] ?? null;
+  }
+
+  app.documents = newDocs;
+  app.documentOrder = newOrder;
+  app.activeDocumentPath = newActive;
+}
+
+export function setActiveDocument(filePath: string): void {
+  if (app.documents.has(filePath)) {
+    app.activeDocumentPath = filePath;
+  }
+}
+
+function resolveFilePath(filePath?: string): string | null {
+  return filePath ?? app.activeDocumentPath;
+}
+
+function updateDocState(
+  filePath: string,
+  updater: (state: DocumentState) => Partial<DocumentState>,
+): void {
+  const docState = app.documents.get(filePath);
+  if (!docState) return;
+
+  const updates = updater(docState);
+  const newDocs = new Map(app.documents);
+  newDocs.set(filePath, { ...docState, ...updates });
+  app.documents = newDocs;
+}
+
+export function setComments(comments: Comment[], filePath?: string): void {
+  const path = resolveFilePath(filePath);
+  if (!path) return;
+  updateDocState(path, () => ({
+    comments,
+    sortedComments: sortComments(comments),
+  }));
+}
+
+export function setCommentsError(
+  error: string | null,
+  filePath?: string,
+): void {
+  const path = resolveFilePath(filePath);
+  if (!path) return;
+  updateDocState(path, () => ({ commentsError: error }));
+}
+
+export function setSelection(
+  selection: Selection | null,
+  filePath?: string,
+): void {
+  const path = resolveFilePath(filePath);
+  if (!path) return;
+  updateDocState(path, () => ({ selection }));
+}
+
+export function setPendingSelectionTop(
+  top: number | undefined,
+  filePath?: string,
+): void {
+  const path = resolveFilePath(filePath);
+  if (!path) return;
+  updateDocState(path, () => ({ pendingSelectionTop: top }));
+}
+
+export function setScrollY(y: number, filePath?: string): void {
+  const path = resolveFilePath(filePath);
+  if (!path) return;
+  updateDocState(path, () => ({ scrollY: y }));
+}
+
+export function setReanchorTarget(
+  target: { commentId: string } | null,
+  filePath?: string,
+): void {
+  const path = resolveFilePath(filePath);
+  if (!path) return;
+  updateDocState(path, () => ({ reanchorTarget: target }));
+}
+
+export function updateDocumentHtml(html: string, filePath?: string): void {
+  const path = resolveFilePath(filePath);
+  if (!path) return;
+  updateDocState(path, (s) => ({
+    document: { ...s.document, html },
+  }));
+}
+
+export function setHeadings(headings: Heading[], filePath?: string): void {
+  const path = resolveFilePath(filePath);
+  if (!path) return;
+  updateDocState(path, () => ({ headings }));
+}
+
+export function hydrateFromInlineData(data: InlineData): void {
+  app.workingDirectory = data.workingDirectory;
+
+  const newDocs = new Map<string, DocumentState>();
+  const order: string[] = [];
+
+  const articleEl =
+    typeof document !== "undefined"
+      ? document.getElementById("document-content")
+      : null;
+
+  for (const file of data.files) {
+    const docData = data.documents[file.path];
+    const isActiveFile = file.path === data.activeFile;
+    const doc: Document = {
+      html: docData?.html ?? (isActiveFile ? (articleEl?.innerHTML ?? "") : ""),
+      filePath: file.path,
+      fileName: file.fileName,
+      clean: data.clean,
+    };
+
+    const comments = docData?.comments ?? [];
+    const headings = (docData?.headings ?? []) as Heading[];
+
+    newDocs.set(file.path, {
+      ...createInitialDocumentState(doc),
+      comments,
+      sortedComments: sortComments(comments),
+      headings,
+    });
+    order.push(file.path);
+  }
+
+  app.documents = newDocs;
+  app.documentOrder = order;
+  app.activeDocumentPath = data.activeFile;
+}

package/src/stores/locale.svelte.ts

@@ -0,0 +1,46 @@
+import {
+  createT,
+  type Locale,
+  Locales,
+  type TranslationKey,
+} 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();
+}
+
+export const localeState = $state({
+  locale: getStoredLocale() as Locale,
+});
+
+export function setLocale(newLocale: Locale): void {
+  localeState.locale = newLocale;
+  try {
+    localStorage.setItem(STORAGE_KEY, newLocale);
+  } catch {
+    // localStorage may be unavailable
+  }
+}
+
+export function t(
+  key: TranslationKey,
+  params?: Record<string, string | number>,
+): string {
+  return createT(localeState.locale)(key, params);
+}

package/src/stores/settings.svelte.ts

@@ -0,0 +1,90 @@
+import {
+  FontFamilies,
+  type FontFamily,
+  type ThemeMode,
+  ThemeModes,
+} from "../schema";
+
+const THEME_STORAGE_KEY = "readit:theme";
+const DARK_MQ = "(prefers-color-scheme: dark)";
+
+function getStoredTheme(): ThemeMode {
+  try {
+    const stored = localStorage.getItem(THEME_STORAGE_KEY);
+    if (
+      stored === ThemeModes.LIGHT ||
+      stored === ThemeModes.DARK ||
+      stored === ThemeModes.SYSTEM
+    ) {
+      return stored;
+    }
+  } catch {}
+  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);
+}
+
+export const settings = $state({
+  fontFamily: FontFamilies.SERIF as FontFamily,
+  themeMode: getStoredTheme() as ThemeMode,
+});
+
+export async function updateFontFamily(font: FontFamily): Promise<void> {
+  settings.fontFamily = font;
+
+  try {
+    const response = await fetch("/api/settings", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ fontFamily: font }),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to save settings");
+    }
+  } catch (err) {
+    console.error("Failed to save font preference:", err);
+  }
+}
+
+export function updateThemeMode(mode: ThemeMode): void {
+  settings.themeMode = mode;
+  applyTheme(mode);
+  syncSystemPreference();
+
+  try {
+    localStorage.setItem(THEME_STORAGE_KEY, mode);
+  } catch {}
+}
+
+export function initSettings(data?: { fontFamily?: string }): void {
+  if (data?.fontFamily) {
+    settings.fontFamily = data.fontFamily as FontFamily;
+  }
+
+  applyTheme(settings.themeMode);
+  syncSystemPreference();
+}
+
+let mediaCleanup: (() => void) | undefined;
+
+function syncSystemPreference(): void {
+  if (mediaCleanup) {
+    mediaCleanup();
+    mediaCleanup = undefined;
+  }
+
+  if (settings.themeMode !== ThemeModes.SYSTEM) return;
+
+  const mq = window.matchMedia(DARK_MQ);
+  const handler = () => applyTheme(ThemeModes.SYSTEM);
+
+  mq.addEventListener("change", handler);
+  mediaCleanup = () => mq.removeEventListener("change", handler);
+}

package/src/stores/shortcuts.svelte.ts

@@ -0,0 +1,104 @@
+import {
+  bindingsEqual,
+  DEFAULT_SHORTCUTS,
+  resolveShortcuts,
+  type ShortcutDefinition,
+} from "../lib/shortcut-registry";
+import type { KeybindingOverride, ShortcutBinding } from "../schema";
+
+export const shortcutState = $state({
+  shortcuts: DEFAULT_SHORTCUTS as ShortcutDefinition[],
+});
+
+export function initShortcuts(overrides: KeybindingOverride[]): void {
+  shortcutState.shortcuts = resolveShortcuts(overrides);
+}
+
+export async function updateBinding(
+  id: string,
+  binding: ShortcutBinding,
+): Promise<void> {
+  const target = shortcutState.shortcuts.find((s) => s.id === id);
+  const conflict = shortcutState.shortcuts.find(
+    (s) => s.id !== id && s.enabled && bindingsEqual(s.binding, binding),
+  );
+
+  const updated = shortcutState.shortcuts.map((s) => {
+    if (s.id === id) return { ...s, binding };
+    if (conflict && s.id === conflict.id) {
+      // Only swap bindings when the target is enabled; otherwise
+      // just revert the conflicting shortcut to its default binding
+      // to avoid creating two enabled shortcuts on the same combo.
+      if (target?.enabled) {
+        return { ...s, binding: target.binding };
+      }
+      return { ...s, binding: s.defaultBinding };
+    }
+    return s;
+  });
+
+  shortcutState.shortcuts = updated;
+  await persistOverrides(updated);
+}
+
+export async function toggleEnabled(id: string): Promise<void> {
+  const target = shortcutState.shortcuts.find((s) => s.id === id);
+  if (!target) return;
+
+  // When re-enabling, check for binding conflicts with other enabled shortcuts
+  if (!target.enabled) {
+    const conflict = shortcutState.shortcuts.find(
+      (s) =>
+        s.id !== id && s.enabled && bindingsEqual(s.binding, target.binding),
+    );
+    if (conflict) {
+      // Disable the conflicting shortcut to resolve the conflict
+      shortcutState.shortcuts = shortcutState.shortcuts.map((s) => {
+        if (s.id === id) return { ...s, enabled: true };
+        if (s.id === conflict.id) return { ...s, enabled: false };
+        return s;
+      });
+      await persistOverrides(shortcutState.shortcuts);
+      return;
+    }
+  }
+
+  shortcutState.shortcuts = shortcutState.shortcuts.map((s) =>
+    s.id === id ? { ...s, enabled: !s.enabled } : s,
+  );
+  await persistOverrides(shortcutState.shortcuts);
+}
+
+export async function resetToDefaults(): Promise<void> {
+  shortcutState.shortcuts = DEFAULT_SHORTCUTS.map((s) => ({ ...s }));
+  await persistOverrides(shortcutState.shortcuts);
+}
+
+function toOverrides(shortcuts: ShortcutDefinition[]): KeybindingOverride[] {
+  return shortcuts
+    .filter((s) => !s.enabled || !bindingsEqual(s.binding, s.defaultBinding))
+    .map((s) => ({
+      id: s.id,
+      binding: bindingsEqual(s.binding, s.defaultBinding)
+        ? undefined
+        : s.binding,
+      enabled: s.enabled,
+    }));
+}
+
+async function persistOverrides(
+  shortcuts: ShortcutDefinition[],
+): Promise<void> {
+  try {
+    const response = await fetch("/api/settings", {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ keybindings: toOverrides(shortcuts) }),
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to save keybindings: ${response.status}`);
+    }
+  } catch (err) {
+    console.error("Failed to save keybindings:", err);
+  }
+}

package/src/stores/ui.svelte.ts

@@ -0,0 +1,12 @@
+export const ui = $state({
+  hoveredCommentId: undefined as string | undefined,
+  activeCommentId: undefined as string | undefined,
+});
+
+export function setHoveredCommentId(id: string | undefined): void {
+  ui.hoveredCommentId = id;
+}
+
+export function setActiveCommentId(id: string | undefined): void {
+  ui.activeCommentId = id;
+}

package/src/template.ts

@@ -0,0 +1,104 @@
+export interface TemplateOptions {
+  title: string;
+  cssPath: string;
+  jsPath: string;
+  documentHtml: string;
+  inlineData: object;
+  isDev: boolean;
+  fontFamily: string;
+}
+
+function safeJsonStringify(data: object): string {
+  return JSON.stringify(data).replace(/</g, "\\u003c");
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#39;");
+}
+
+function escapeAttr(str: string): string {
+  return str.replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+}
+
+/**
+ * Sanitize server-rendered HTML to prevent XSS from raw HTML in markdown source.
+ * While readit is designed for local use with the user's own files, this
+ * provides defense-in-depth against untrusted markdown content.
+ *
+ * Uses a simple tag-stripping approach to remove dangerous elements while
+ * preserving the rendered content. The Go server uses bluemonday for the
+ * same purpose.
+ */
+function sanitizeHtml(html: string): string {
+  // Remove <script> tags and their content
+  let sanitized = html.replace(
+    /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
+    "",
+  );
+  // Remove event handler attributes (onclick, onerror, onload, etc.)
+  sanitized = sanitized.replace(
+    /\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi,
+    "",
+  );
+  // Remove javascript: URLs
+  sanitized = sanitized.replace(
+    /\bhref\s*=\s*(?:"javascript:[^"]*"|'javascript:[^']*')/gi,
+    "",
+  );
+  sanitized = sanitized.replace(
+    /\bsrc\s*=\s*(?:"javascript:[^"]*"|'javascript:[^']*')/gi,
+    "",
+  );
+  return sanitized;
+}
+
+export function renderTemplate(options: TemplateOptions): string {
+  const {
+    title,
+    cssPath,
+    jsPath,
+    documentHtml,
+    inlineData,
+    isDev,
+    fontFamily,
+  } = options;
+
+  const viteClient = isDev
+    ? '<script type="module" src="http://127.0.0.1:24678/@vite/client"></script>'
+    : "";
+
+  const cssLink = cssPath
+    ? `<link rel="stylesheet" href="${escapeAttr(cssPath)}">`
+    : "";
+  const proseClass = fontFamily === "sans-serif" ? "prose-sans" : "prose-serif";
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>readit — ${escapeHtml(title)}</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📖</text></svg>">
+  <script>
+    (() => {
+      var t = localStorage.getItem("readit:theme");
+      var d = t === "dark" || (t !== "light" && matchMedia("(prefers-color-scheme: dark)").matches);
+      if (d) document.documentElement.classList.add("dark");
+    })();
+  </script>
+  ${viteClient}
+  ${cssLink}
+</head>
+<body class="min-h-screen">
+  <article id="document-content" class="prose ${proseClass}">${sanitizeHtml(documentHtml)}</article>
+  <div id="app"></div>
+  <script type="application/json" id="__readit">${safeJsonStringify(inlineData)}</script>
+  <script type="module" src="${escapeAttr(jsPath)}" defer></script>
+</body>
+</html>`;
+}

package/src/test-setup.ts

@@ -1 +1,48 @@
 import "@testing-library/jest-dom/vitest";
+
+// Mock CSS Custom Highlight API for jsdom (not supported natively)
+if (typeof globalThis.Highlight === "undefined") {
+  globalThis.Highlight = class Highlight {
+    _ranges: AbstractRange[];
+    priority = 0;
+    type: "highlight" | "spelling-error" | "grammar-error" = "highlight";
+    get size() {
+      return this._ranges.length;
+    }
+    constructor(...ranges: AbstractRange[]) {
+      this._ranges = ranges;
+    }
+    add(range: AbstractRange) {
+      this._ranges.push(range);
+    }
+    delete(range: AbstractRange) {
+      const idx = this._ranges.indexOf(range);
+      if (idx >= 0) {
+        this._ranges.splice(idx, 1);
+        return true;
+      }
+      return false;
+    }
+    clear() {
+      this._ranges = [];
+    }
+    has(range: AbstractRange) {
+      return this._ranges.includes(range);
+    }
+    [Symbol.iterator]() {
+      return this._ranges[Symbol.iterator]();
+    }
+  } as unknown as typeof Highlight;
+}
+
+if (typeof CSS === "undefined" || !CSS.highlights) {
+  const highlightsMap = new Map<string, Highlight>();
+  Object.defineProperty(globalThis, "CSS", {
+    value: {
+      ...((globalThis as Record<string, unknown>).CSS ?? {}),
+      highlights: highlightsMap,
+    },
+    writable: true,
+    configurable: true,
+  });
+}

package/svelte.config.js

@@ -0,0 +1,5 @@
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+export default {
+  preprocess: vitePreprocess(),
+};

package/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "ES2022",
     "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["node"],
     "module": "ESNext",
     "moduleResolution": "bundler",
     "strict": true,
@@ -10,11 +11,10 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
     "allowImportingTsExtensions": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true
   },
   "include": ["src"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "vscode-readit"]
 }

package/vite.config.ts

@@ -1,9 +1,28 @@
+import { svelte } from "@sveltejs/vite-plugin-svelte";
 import tailwindcss from "@tailwindcss/vite";
-import react from "@vitejs/plugin-react";
-import { defineConfig } from "vite";
+import { createLogger, defineConfig } from "vite";
+
+// Suppress lightningcss warnings about ::highlight() pseudo-element.
+// The CSS Custom Highlight API is a valid standard; lightningcss doesn't
+// recognise it yet (fix merged upstream, pending release).
+const logger = createLogger();
+const originalWarn = logger.warn.bind(logger);
+logger.warn = (msg, options) => {
+  if (msg.includes("::highlight")) return;
+  originalWarn(msg, options);
+};
+
+// Tailwind CSS v4 calls console.warn directly for lightningcss warnings
+// (bypassing Vite's logger), so we also intercept that.
+const originalConsoleWarn = console.warn.bind(console);
+console.warn = (...args: unknown[]) => {
+  if (typeof args[0] === "string" && args[0].includes("::highlight")) return;
+  originalConsoleWarn(...args);
+};
 
 export default defineConfig({
-  plugins: [tailwindcss(), react()],
+  customLogger: logger,
+  plugins: [tailwindcss(), svelte()],
   server: {
     port: 24678,
     strictPort: true,
@@ -23,5 +42,6 @@ export default defineConfig({
   build: {
     outDir: "dist",
     emptyOutDir: true,
+    manifest: true,
   },
 });