@peaske7/readit 0.1.8 → 0.2.1

package/src/lib/html-processor.tsx

@@ -1,95 +0,0 @@
-import type { Element, Root } from "hast";
-import { TriangleAlert } from "lucide-react";
-import type { ReactNode } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import rehypeParse from "rehype-parse";
-import rehypeReact from "rehype-react";
-import { unified } from "unified";
-import { visit } from "unist-util-visit";
-
-/**
- * Placeholder component for stripped dangerous elements
- */
-function StrippedElement({ tagName }: { tagName: string }) {
-  return (
-    <span className="inline-flex items-center gap-1 px-3 py-1.5 text-sm bg-red-50 text-red-700 border border-red-200 rounded-md font-mono">
-      <TriangleAlert className="w-4 h-4" />
-      &lt;{tagName}&gt; removed
-    </span>
-  );
-}
-
-/**
- * Component mappings for dangerous elements - renders placeholders instead
- */
-const dangerousElementComponents = {
-  script: () => <StrippedElement tagName="script" />,
-  // Style tags targeting body/html/* can leak outside Shadow DOM, so strip them
-  // Our base styles in ShadowContainer provide typography instead
-  style: () => null,
-  link: () => null, // External stylesheets break app styles
-  iframe: () => <StrippedElement tagName="iframe" />,
-  object: () => <StrippedElement tagName="object" />,
-  embed: () => <StrippedElement tagName="embed" />,
-  frame: () => <StrippedElement tagName="frame" />,
-  frameset: () => <StrippedElement tagName="frameset" />,
-};
-
-/**
- * Rehype plugin to strip event handler attributes (onclick, onerror, etc.)
- * and dangerous href/src values (javascript:, data:, vbscript:)
- */
-function rehypeStripDangerousAttributes() {
-  const dangerousSchemes = /^(javascript|vbscript|data):/i;
-
-  return (tree: Root) => {
-    visit(tree, "element", (node: Element) => {
-      const props = node.properties;
-      if (!props) return;
-
-      for (const key of Object.keys(props)) {
-        // Strip all event handlers (on*)
-        if (key.startsWith("on") || key.startsWith("On")) {
-          delete props[key];
-          continue;
-        }
-
-        // Neutralize dangerous href/src schemes
-        if (key === "href" || key === "src") {
-          const value = props[key];
-          if (
-            typeof value === "string" &&
-            dangerousSchemes.test(value.trim())
-          ) {
-            props[key] = "#";
-          }
-        }
-      }
-    });
-  };
-}
-
-/**
- * Create the unified processor for HTML -> React conversion
- */
-const processor = unified()
-  .use(rehypeParse, { fragment: true })
-  .use(rehypeStripDangerousAttributes)
-  .use(rehypeReact, {
-    jsx,
-    jsxs,
-    Fragment,
-    components: dangerousElementComponents,
-  });
-
-/**
- * Process HTML content and return safe React elements
- *
- * - Dangerous tags (script, iframe, etc.) become visible placeholders
- * - Event handlers (onclick, onerror, etc.) are stripped
- * - Dangerous URLs (javascript:, data:, etc.) are neutralized
- */
-export function processHtml(content: string): ReactNode {
-  const result = processor.processSync(content);
-  return result.result as ReactNode;
-}

package/src/lib/i18n/completeness.test.ts

@@ -1,51 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { en } from "./en";
-import { ja } from "./ja";
-
-describe("translation completeness", () => {
-  const enKeys = Object.keys(en).sort();
-  const jaKeys = Object.keys(ja).sort();
-
-  it("en and ja have the same keys", () => {
-    expect(enKeys).toEqual(jaKeys);
-  });
-
-  // Prefix/suffix keys may be intentionally empty in some locales
-  // (e.g., Japanese has no prefix before the command)
-  const ALLOW_EMPTY = new Set(["app.noDocumentsHintPrefix"]);
-
-  it("no empty string values in en", () => {
-    for (const [key, value] of Object.entries(en)) {
-      if (ALLOW_EMPTY.has(key)) continue;
-      expect(value, `en.${key} is empty`).not.toBe("");
-    }
-  });
-
-  it("no empty string values in ja", () => {
-    for (const [key, value] of Object.entries(ja)) {
-      if (ALLOW_EMPTY.has(key)) continue;
-      expect(value, `ja.${key} is empty`).not.toBe("");
-    }
-  });
-
-  it("interpolation placeholders match between locales", () => {
-    const placeholderPattern = /\{\{(\w+)\}\}/g;
-
-    for (const key of enKeys) {
-      const enValue = en[key as keyof typeof en];
-      const jaValue = ja[key as keyof typeof ja];
-
-      const enPlaceholders = [...enValue.matchAll(placeholderPattern)]
-        .map((m) => m[1])
-        .sort();
-      const jaPlaceholders = [...jaValue.matchAll(placeholderPattern)]
-        .map((m) => m[1])
-        .sort();
-
-      expect(
-        enPlaceholders,
-        `Placeholder mismatch for key "${key}": en has ${JSON.stringify(enPlaceholders)}, ja has ${JSON.stringify(jaPlaceholders)}`,
-      ).toEqual(jaPlaceholders);
-    }
-  });
-});

package/src/lib/i18n/translations.test.ts

@@ -1,39 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { createT } from "./translations";
-import { Locales } from "./types";
-
-describe("createT", () => {
-  it("returns English strings for en locale", () => {
-    const t = createT(Locales.EN);
-    expect(t("app.loading")).toBe("Loading...");
-    expect(t("settings.title")).toBe("Settings");
-    expect(t("comment.placeholder")).toBe("Add your comment...");
-  });
-
-  it("returns Japanese strings for ja locale", () => {
-    const t = createT(Locales.JA);
-    expect(t("app.loading")).toBe("読み込み中...");
-    expect(t("settings.title")).toBe("設定");
-    expect(t("comment.placeholder")).toBe("コメントを入力...");
-  });
-
-  it("interpolates {{placeholder}} params", () => {
-    const tEn = createT(Locales.EN);
-    expect(tEn("commentNav.of", { current: 1, total: 5 })).toBe("1 of 5");
-
-    const tJa = createT(Locales.JA);
-    expect(tJa("commentNav.of", { current: 1, total: 5 })).toBe("1 / 5");
-  });
-
-  it("interpolates multiple params", () => {
-    const t = createT(Locales.EN);
-    expect(t("commentManager.deleteAllConfirm", { count: 3 })).toBe(
-      "Delete all 3 comments?",
-    );
-  });
-
-  it("returns string unchanged when no params provided", () => {
-    const t = createT(Locales.EN);
-    expect(t("app.footer")).toBe("Made with ❤️ by Jay and Claude");
-  });
-});

package/src/lib/layout-constants.ts

@@ -1,12 +0,0 @@
-// Layout constants for margin notes and document viewer
-
-export const HEADER_HEIGHT_PX = 48;
-
-// Minimum gap between margin notes (accounts for quote + comment + actions + padding)
-export const MARGIN_NOTE_MIN_GAP_PX = 150;
-
-// Height reserved for comment input form when selecting text
-export const COMMENT_INPUT_HEIGHT_PX = 160;
-
-// Minimap starts below the header
-export const MINIMAP_HEADER_OFFSET_PX = HEADER_HEIGHT_PX;

package/src/lib/scroll.test.ts

@@ -1,118 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { calculateScrollTarget, getElementTopInDocument } from "./scroll";
-
-describe("calculateScrollTarget", () => {
-  it("positions element at 25% from top by default", () => {
-    // Element at 1000px, viewport 800px
-    // Target offset = 800 * 0.25 = 200px
-    // Scroll target = 1000 - 200 = 800px
-    expect(
-      calculateScrollTarget({ elementTop: 1000, viewportHeight: 800 }),
-    ).toBe(800);
-  });
-
-  it("respects custom offset percent", () => {
-    // Element at 1000px, viewport 800px, offset 50%
-    // Target offset = 800 * 0.5 = 400px
-    // Scroll target = 1000 - 400 = 600px
-    expect(
-      calculateScrollTarget({
-        elementTop: 1000,
-        viewportHeight: 800,
-        offsetPercent: 0.5,
-      }),
-    ).toBe(600);
-  });
-
-  it("returns 0 when element is near top", () => {
-    // Element at 100px, viewport 800px
-    // Target offset = 200px
-    // Scroll target = max(0, 100 - 200) = 0
-    expect(
-      calculateScrollTarget({ elementTop: 100, viewportHeight: 800 }),
-    ).toBe(0);
-  });
-
-  it("returns 0 for element at position 0", () => {
-    expect(calculateScrollTarget({ elementTop: 0, viewportHeight: 800 })).toBe(
-      0,
-    );
-  });
-
-  it("handles small viewport", () => {
-    // Element at 500px, viewport 400px
-    // Target offset = 100px
-    // Scroll target = 500 - 100 = 400px
-    expect(
-      calculateScrollTarget({ elementTop: 500, viewportHeight: 400 }),
-    ).toBe(400);
-  });
-
-  it("handles zero offset percent", () => {
-    // Element at 1000px, no offset
-    // Scroll target = 1000px (element at very top of viewport)
-    expect(
-      calculateScrollTarget({
-        elementTop: 1000,
-        viewportHeight: 800,
-        offsetPercent: 0,
-      }),
-    ).toBe(1000);
-  });
-});
-
-describe("getElementTopInDocument", () => {
-  it("calculates position for element in main document (not scrolled)", () => {
-    // Element at 500px from viewport top, no scroll
-    const elementRect = { top: 500 };
-    expect(getElementTopInDocument({ elementRect, scrollY: 0 })).toBe(500);
-  });
-
-  it("calculates position for element in main document (scrolled)", () => {
-    // Element at 200px from viewport top, scrolled 300px
-    // Absolute position = 300 + 200 = 500px
-    const elementRect = { top: 200 };
-    expect(getElementTopInDocument({ elementRect, scrollY: 300 })).toBe(500);
-  });
-
-  it("calculates position for element inside iframe", () => {
-    // Iframe at 100px from viewport top
-    // Element at 150px from iframe top (inside iframe)
-    // Scrolled 50px
-    // Absolute position = 50 + 100 + 150 = 300px
-    const elementRect = { top: 150 };
-    expect(
-      getElementTopInDocument({
-        elementRect,
-        scrollY: 50,
-        iframeTopOffset: 100,
-      }),
-    ).toBe(300);
-  });
-
-  it("handles element at viewport top with scroll", () => {
-    // Element at 0px from viewport top, scrolled 1000px
-    const elementRect = { top: 0 };
-    expect(getElementTopInDocument({ elementRect, scrollY: 1000 })).toBe(1000);
-  });
-
-  it("handles negative element position (above viewport)", () => {
-    // Element scrolled past viewport top
-    const elementRect = { top: -100 };
-    expect(getElementTopInDocument({ elementRect, scrollY: 500 })).toBe(400);
-  });
-
-  it("handles iframe with element above iframe viewport", () => {
-    // Iframe at 200px, element at -50px within iframe (scrolled past)
-    // scrollY = 100
-    // Absolute position = 100 + 200 + (-50) = 250px
-    const elementRect = { top: -50 };
-    expect(
-      getElementTopInDocument({
-        elementRect,
-        scrollY: 100,
-        iframeTopOffset: 200,
-      }),
-    ).toBe(250);
-  });
-});

package/src/lib/scroll.ts

@@ -1,47 +0,0 @@
-/**
- * Scroll calculation utilities for TOC navigation.
- * These pure functions enable unit testing of scroll position calculations.
- */
-
-/**
- * Parameters for scroll target calculation.
- * Using object destructuring per style guide §3.5 for clarity.
- */
-export interface CalculateScrollTargetParams {
-  elementTop: number;
-  viewportHeight: number;
-  offsetPercent?: number;
-}
-
-export interface GetElementTopParams {
-  elementRect: { top: number };
-  scrollY: number;
-  iframeTopOffset?: number;
-}
-
-/**
- * Calculate the scroll target position to place an element at a comfortable
- * reading position (default: 25% from top of viewport).
- */
-export function calculateScrollTarget({
-  elementTop,
-  viewportHeight,
-  offsetPercent = 0.25,
-}: CalculateScrollTargetParams): number {
-  const targetOffset = viewportHeight * offsetPercent;
-  return Math.max(0, elementTop - targetOffset);
-}
-
-/**
- * Get an element's absolute position in the main document.
- *
- * For elements directly in the document: pass scrollY and the element.
- * For elements inside an iframe: also pass the iframe's top offset.
- */
-export function getElementTopInDocument({
-  elementRect,
-  scrollY,
-  iframeTopOffset,
-}: GetElementTopParams): number {
-  return scrollY + (iframeTopOffset ?? 0) + elementRect.top;
-}

package/src/lib/shortcut-registry.test.ts

@@ -1,173 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-  DEFAULT_SHORTCUTS,
-  formatBinding,
-  isReservedBinding,
-  type KeybindingOverride,
-  matchesBinding,
-  resolveShortcuts,
-  ShortcutActions,
-  type ShortcutBinding,
-} from "./shortcut-registry";
-
-describe("DEFAULT_SHORTCUTS", () => {
-  it("defines 7 shortcuts", () => {
-    expect(DEFAULT_SHORTCUTS).toHaveLength(7);
-  });
-
-  it("has unique IDs", () => {
-    const ids = DEFAULT_SHORTCUTS.map((s) => s.id);
-    expect(new Set(ids).size).toBe(ids.length);
-  });
-
-  it("all enabled by default", () => {
-    for (const shortcut of DEFAULT_SHORTCUTS) {
-      expect(shortcut.enabled).toBe(true);
-    }
-  });
-});
-
-describe("matchesBinding", () => {
-  it("matches exact key + modifiers", () => {
-    const binding: ShortcutBinding = { key: "c", alt: true };
-    const event = new KeyboardEvent("keydown", { key: "c", altKey: true });
-    expect(matchesBinding(event, binding)).toBe(true);
-  });
-
-  it("rejects wrong key", () => {
-    const binding: ShortcutBinding = { key: "c", alt: true };
-    const event = new KeyboardEvent("keydown", { key: "v", altKey: true });
-    expect(matchesBinding(event, binding)).toBe(false);
-  });
-
-  it("rejects extra modifiers", () => {
-    const binding: ShortcutBinding = { key: "c", alt: true };
-    const event = new KeyboardEvent("keydown", {
-      key: "c",
-      altKey: true,
-      shiftKey: true,
-    });
-    expect(matchesBinding(event, binding)).toBe(false);
-  });
-
-  it("matches binding with shift", () => {
-    const binding: ShortcutBinding = { key: "c", alt: true, shift: true };
-    const event = new KeyboardEvent("keydown", {
-      key: "c",
-      altKey: true,
-      shiftKey: true,
-    });
-    expect(matchesBinding(event, binding)).toBe(true);
-  });
-
-  it("matches meta key", () => {
-    const binding: ShortcutBinding = { key: "c", meta: true };
-    const event = new KeyboardEvent("keydown", { key: "c", metaKey: true });
-    expect(matchesBinding(event, binding)).toBe(true);
-  });
-
-  it("matches shifted letter key (browser reports uppercase)", () => {
-    const binding: ShortcutBinding = { key: "c", alt: true, shift: true };
-    const event = new KeyboardEvent("keydown", {
-      key: "C",
-      altKey: true,
-      shiftKey: true,
-    });
-    expect(matchesBinding(event, binding)).toBe(true);
-  });
-
-  it("matches meta+shift letter key (browser reports uppercase)", () => {
-    const binding: ShortcutBinding = { key: "c", meta: true, shift: true };
-    const event = new KeyboardEvent("keydown", {
-      key: "C",
-      metaKey: true,
-      shiftKey: true,
-    });
-    expect(matchesBinding(event, binding)).toBe(true);
-  });
-
-  it("matches key-only binding (no modifiers)", () => {
-    const binding: ShortcutBinding = { key: "Escape" };
-    const event = new KeyboardEvent("keydown", { key: "Escape" });
-    expect(matchesBinding(event, binding)).toBe(true);
-  });
-});
-
-describe("formatBinding", () => {
-  it("formats Alt+C", () => {
-    const binding: ShortcutBinding = { key: "c", alt: true };
-    expect(formatBinding(binding, true)).toBe("Alt+C");
-  });
-
-  it("formats meta key as ⌘ on Mac", () => {
-    const binding: ShortcutBinding = { key: "c", meta: true };
-    expect(formatBinding(binding, true)).toBe("⌘+C");
-  });
-
-  it("formats meta key as Ctrl on non-Mac", () => {
-    const binding: ShortcutBinding = { key: "c", meta: true };
-    expect(formatBinding(binding, false)).toBe("Ctrl+C");
-  });
-
-  it("formats shift modifier", () => {
-    const binding: ShortcutBinding = { key: "c", meta: true, shift: true };
-    expect(formatBinding(binding, true)).toBe("⌘+Shift+C");
-  });
-
-  it("formats arrow keys with symbols", () => {
-    const binding: ShortcutBinding = { key: "ArrowUp", alt: true };
-    expect(formatBinding(binding, true)).toBe("Alt+↑");
-  });
-
-  it("formats Escape", () => {
-    const binding: ShortcutBinding = { key: "Escape" };
-    expect(formatBinding(binding, true)).toBe("Esc");
-  });
-});
-
-describe("resolveShortcuts", () => {
-  it("returns defaults when no overrides", () => {
-    const resolved = resolveShortcuts([]);
-    expect(resolved).toEqual(DEFAULT_SHORTCUTS);
-  });
-
-  it("applies enabled override", () => {
-    const overrides: KeybindingOverride[] = [
-      { id: ShortcutActions.COPY_ALL, enabled: false },
-    ];
-    const resolved = resolveShortcuts(overrides);
-    const copyAll = resolved.find((s) => s.id === ShortcutActions.COPY_ALL);
-    expect(copyAll?.enabled).toBe(false);
-  });
-
-  it("applies binding override", () => {
-    const overrides: KeybindingOverride[] = [
-      {
-        id: ShortcutActions.COPY_ALL,
-        enabled: true,
-        binding: { key: "a", meta: true },
-      },
-    ];
-    const resolved = resolveShortcuts(overrides);
-    const copyAll = resolved.find((s) => s.id === ShortcutActions.COPY_ALL);
-    expect(copyAll?.binding).toEqual({ key: "a", meta: true });
-  });
-
-  it("ignores unknown override IDs", () => {
-    const overrides: KeybindingOverride[] = [
-      { id: "unknown_action", enabled: false },
-    ];
-    const resolved = resolveShortcuts(overrides);
-    expect(resolved).toEqual(DEFAULT_SHORTCUTS);
-  });
-});
-
-describe("isReservedBinding", () => {
-  it("detects ⌘+W as reserved", () => {
-    expect(isReservedBinding({ key: "w", meta: true })).toBe(true);
-  });
-
-  it("allows Alt+C", () => {
-    expect(isReservedBinding({ key: "c", alt: true })).toBe(false);
-  });
-});

package/src/lib/utils.test.ts

@@ -1,110 +0,0 @@
-import { createElement } from "react";
-import { describe, expect, it } from "vitest";
-import { getTextContent, slugify } from "./utils";
-
-describe("slugify", () => {
-  it("converts text to lowercase", () => {
-    expect(slugify("Hello World")).toBe("hello-world");
-  });
-
-  it("replaces spaces with hyphens", () => {
-    expect(slugify("hello world")).toBe("hello-world");
-  });
-
-  it("removes special characters", () => {
-    expect(slugify("Hello, World!")).toBe("hello-world");
-  });
-
-  it("handles multiple spaces", () => {
-    expect(slugify("hello   world")).toBe("hello-world");
-  });
-
-  it("handles leading/trailing whitespace", () => {
-    expect(slugify("  hello world  ")).toBe("hello-world");
-  });
-
-  it("preserves underscores", () => {
-    expect(slugify("hello_world")).toBe("hello_world");
-  });
-
-  it("handles hyphens", () => {
-    expect(slugify("hello-world")).toBe("hello-world");
-  });
-
-  it("collapses multiple hyphens", () => {
-    expect(slugify("hello---world")).toBe("hello-world");
-  });
-});
-
-describe("getTextContent", () => {
-  it("returns string children directly", () => {
-    expect(getTextContent("Hello")).toBe("Hello");
-  });
-
-  it("converts number children to string", () => {
-    expect(getTextContent(123)).toBe("123");
-  });
-
-  it("joins array of strings", () => {
-    expect(getTextContent(["Hello", " ", "World"])).toBe("Hello World");
-  });
-
-  it("extracts text from React element", () => {
-    const element = createElement("strong", null, "Bold");
-    expect(getTextContent(element)).toBe("Bold");
-  });
-
-  it("extracts text from nested React elements", () => {
-    const element = createElement(
-      "span",
-      null,
-      "Hello ",
-      createElement("strong", null, "World"),
-    );
-    expect(getTextContent(element)).toBe("Hello World");
-  });
-
-  it("handles mixed array of strings and elements", () => {
-    const children = ["Hello ", createElement("strong", null, "World"), "!"];
-    expect(getTextContent(children)).toBe("Hello World!");
-  });
-
-  it("handles deeply nested elements", () => {
-    const element = createElement(
-      "div",
-      null,
-      createElement("span", null, createElement("strong", null, "Deep")),
-    );
-    expect(getTextContent(element)).toBe("Deep");
-  });
-
-  it("returns empty string for null", () => {
-    expect(getTextContent(null)).toBe("");
-  });
-
-  it("returns empty string for undefined", () => {
-    expect(getTextContent(undefined)).toBe("");
-  });
-
-  it("returns empty string for boolean", () => {
-    expect(getTextContent(true)).toBe("");
-    expect(getTextContent(false)).toBe("");
-  });
-
-  it("handles markdown-style inline formatting", () => {
-    // Simulates what react-markdown produces for "## Hello **World**"
-    const children = ["Hello ", createElement("strong", null, "World")];
-    expect(getTextContent(children)).toBe("Hello World");
-  });
-
-  it("handles complex markdown with multiple formatting", () => {
-    // Simulates "## Hello **World** and _italic_"
-    const children = [
-      "Hello ",
-      createElement("strong", null, "World"),
-      " and ",
-      createElement("em", null, "italic"),
-    ];
-    expect(getTextContent(children)).toBe("Hello World and italic");
-  });
-});

package/src/main.tsx

@@ -1,13 +0,0 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import { LocaleProvider } from "./contexts/LocaleContext";
-import "./index.css";
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <LocaleProvider>
-      <App />
-    </LocaleProvider>
-  </React.StrictMode>,
-);