@peaske7/readit 0.2.1 → 0.3.0-rc.1

package/src/stores/app.svelte.ts

@@ -1,231 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,104 +0,0 @@
-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,48 +0,0 @@
-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

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