@peaske7/readit 0.1.8 → 0.2.1

package/src/components/DocumentViewer/IframeContainer.tsx

@@ -1,251 +0,0 @@
-import DOMPurify from "dompurify";
-import { useEffect, useMemo, useRef, useState } from "react";
-import {
-  buildIframeScript,
-  createHighlighter,
-  type HighlightComment,
-  type Highlighter,
-} from "../../lib/highlight";
-import {
-  AnchorConfidences,
-  type Comment,
-  FontFamilies,
-  type FontFamily,
-  type SelectionRange,
-} from "../../types";
-
-interface IframeContainerProps {
-  html: string;
-  comments: Comment[];
-  pendingSelection?: SelectionRange;
-  onTextSelect: (
-    text: string,
-    startOffset: number,
-    endOffset: number,
-    selectionTop: number,
-  ) => void;
-  onHighlightPositionsChange?: (
-    positions: Record<string, number>,
-    documentPositions: Record<string, number>,
-    pendingTop?: number,
-  ) => void;
-  onHighlightHover?: (commentId: string | undefined) => void;
-  onHighlightClick?: (commentId: string) => void;
-  fontFamily?: FontFamily;
-}
-
-const FONT_SERIF =
-  'ui-serif, Georgia, Cambria, "Times New Roman", Times, serif';
-const FONT_SANS =
-  'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
-
-function getFontStack(fontFamily: FontFamily): string {
-  return fontFamily === FontFamilies.SANS_SERIF ? FONT_SANS : FONT_SERIF;
-}
-
-// Layout styles use !important; prose styles use :where() for zero specificity
-function getBaseStyles(fontFamily: FontFamily): string {
-  const fontStack = getFontStack(fontFamily);
-  return `
-  /* Critical layout - must override external CSS to ensure proper sizing */
-  html {
-    width: 100% !important;
-  }
-  body {
-    width: 100% !important;
-    min-width: 65ch;
-    box-sizing: border-box !important;
-    margin: 0;
-  }
-
-  /* Prose styles as fallback - zero specificity via :where(), easily overridden */
-  :where(body:not([class])) {
-    max-width: 65ch;
-    margin-left: auto;
-    margin-right: auto;
-    padding: 2rem 1rem;
-    line-height: 1.75;
-    color: #3f3f46;
-    font-family: ${fontStack};
-  }
-  :where(body:not([class])) :where(h1, h2, h3, h4, h5, h6) {
-    color: #18181b;
-    font-weight: 600;
-    line-height: 1.25;
-    margin-top: 2em;
-    margin-bottom: 0.5em;
-  }
-  :where(body:not([class])) :where(h1) { font-size: 2.25em; margin-top: 0; }
-  :where(body:not([class])) :where(h2) { font-size: 1.5em; }
-  :where(body:not([class])) :where(h3) { font-size: 1.25em; }
-  :where(body:not([class])) :where(h4) { font-size: 1.125em; }
-  :where(body:not([class])) :where(p) { margin: 1em 0; }
-  :where(body:not([class])) :where(ul, ol) { padding-left: 1.5em; margin: 1em 0; }
-  :where(body:not([class])) :where(li) { margin: 0.5em 0; }
-  :where(body:not([class])) :where(a) { color: #2563eb; text-decoration: underline; }
-  :where(body:not([class])) :where(code) { background: #f4f4f5; padding: 0.2em 0.4em; border-radius: 0.25em; font-size: 0.875em; }
-  :where(body:not([class])) :where(pre) { background: #f4f4f5; padding: 1em; border-radius: 0.5em; overflow-x: auto; }
-  :where(body:not([class])) :where(pre code) { background: none; padding: 0; }
-  :where(body:not([class])) :where(blockquote) { border-left: 4px solid #e4e4e7; padding-left: 1em; color: #71717a; margin: 1em 0; font-style: italic; }
-  :where(body:not([class])) :where(hr) { border: none; border-top: 1px solid #e4e4e7; margin: 2em 0; }
-  :where(body:not([class])) :where(table) { border-collapse: collapse; width: 100%; margin: 1em 0; }
-  :where(body:not([class])) :where(th, td) { border: 1px solid #e4e4e7; padding: 0.5em 1em; text-align: left; }
-  :where(body:not([class])) :where(th) { background: #fafafa; font-weight: 600; }
-  :where(body:not([class])) :where(img) { max-width: 100%; height: auto; }
-
-  /* Highlight styles - warm ink palette */
-  mark[data-comment-id] {
-    background: rgba(245, 222, 160, 0.5);
-    cursor: pointer;
-    transition: background-color 0.15s ease;
-  }
-  mark[data-comment-id]:hover {
-    background-color: rgba(228, 195, 110, 0.65);
-  }
-  mark[data-comment-id]:active {
-    background-color: rgba(228, 195, 110, 0.75);
-  }
-  mark[data-pending] { background: rgba(180, 180, 180, 0.3); cursor: text; }
-`;
-}
-
-function sanitizeHtml(html: string): string {
-  const sanitized = DOMPurify.sanitize(html, {
-    ADD_TAGS: ["style"],
-    ADD_ATTR: ["style"],
-    FORBID_TAGS: ["script", "iframe", "object", "embed", "form"],
-    FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover"],
-  });
-
-  // Escape </iframe> to prevent breaking out of srcdoc
-  return sanitized.replace(/<\/iframe/gi, "&lt;/iframe");
-}
-
-function injectStyleTag(html: string, styleTag: string): string {
-  if (/<\/head>/i.test(html)) {
-    return html.replace(/<\/head>/i, `${styleTag}</head>`);
-  }
-  if (/<head[^>]*>/i.test(html)) {
-    return html.replace(/(<head[^>]*>)/i, `$1${styleTag}`);
-  }
-  return styleTag + html;
-}
-
-export function IframeContainer({
-  html,
-  comments,
-  pendingSelection,
-  onTextSelect,
-  onHighlightPositionsChange,
-  onHighlightHover,
-  onHighlightClick,
-  fontFamily = FontFamilies.SERIF,
-}: IframeContainerProps) {
-  const iframeRef = useRef<HTMLIFrameElement>(null);
-  const adapterRef = useRef<Highlighter | null>(null);
-  const [contentHeight, setContentHeight] = useState<number>(0);
-
-  const srcdoc = useMemo(() => {
-    const sanitized = sanitizeHtml(html);
-    const baseStyles = getBaseStyles(fontFamily);
-    const styleTag = `<style id="readit-base-styles">${baseStyles}</style>`;
-
-    const finalHtml = injectStyleTag(sanitized, styleTag);
-
-    return finalHtml + buildIframeScript(window.location.origin);
-  }, [html, fontFamily]);
-
-  useEffect(() => {
-    const adapter = createHighlighter({
-      type: "iframe",
-      getIframe: () => iframeRef.current,
-      onSelect: onTextSelect,
-    });
-
-    adapterRef.current = adapter;
-
-    const unsubPositions = onHighlightPositionsChange
-      ? adapter.onPositionsChange((pos) => {
-          const iframe = iframeRef.current;
-          const iframeOffset = iframe
-            ? iframe.getBoundingClientRect().top + window.scrollY
-            : 0;
-
-          const adjustedDocPositions: Record<string, number> = {};
-          for (const [id, iframePos] of Object.entries(pos.documentPositions)) {
-            adjustedDocPositions[id] = iframePos + iframeOffset;
-          }
-
-          onHighlightPositionsChange(
-            pos.positions,
-            adjustedDocPositions,
-            pos.pendingTop,
-          );
-        })
-      : () => {};
-
-    const unsubHover = onHighlightHover
-      ? adapter.onHighlightHover(onHighlightHover)
-      : () => {};
-
-    const unsubClick = onHighlightClick
-      ? adapter.onHighlightClick(onHighlightClick)
-      : () => {};
-
-    const unsubHeight = adapter.onContentHeightChange?.((height) => {
-      setContentHeight(height);
-    });
-
-    return () => {
-      unsubPositions();
-      unsubHover();
-      unsubClick();
-      unsubHeight?.();
-      adapter.dispose();
-      adapterRef.current = null;
-    };
-  }, [
-    onTextSelect,
-    onHighlightPositionsChange,
-    onHighlightHover,
-    onHighlightClick,
-  ]);
-
-  useEffect(() => {
-    const adapter = adapterRef.current;
-    if (!adapter) return;
-
-    const highlightComments: HighlightComment[] = comments
-      .filter((c) => c.anchorConfidence !== AnchorConfidences.UNRESOLVED)
-      .map((c) => ({
-        id: c.id,
-        selectedText: c.selectedText,
-        startOffset: c.startOffset,
-        endOffset: c.endOffset,
-      }));
-
-    adapter.applyHighlights(highlightComments, pendingSelection ?? undefined);
-  }, [comments, pendingSelection]);
-
-  useEffect(() => {
-    const handleTestSelect = (e: Event) => {
-      const { text, startOffset, endOffset } = (e as CustomEvent).detail;
-      onTextSelect(text, startOffset, endOffset, 0);
-    };
-
-    window.addEventListener("test:select-text", handleTestSelect);
-    return () =>
-      window.removeEventListener("test:select-text", handleTestSelect);
-  }, [onTextSelect]);
-
-  return (
-    <iframe
-      ref={iframeRef}
-      srcDoc={srcdoc}
-      sandbox="allow-scripts allow-same-origin"
-      title="Document content"
-      className="w-full border-0"
-      style={{ height: contentHeight || "100%" }}
-    />
-  );
-}

package/src/components/DocumentViewer/InlineCode.tsx

@@ -1,60 +0,0 @@
-import type { ComponentPropsWithoutRef } from "react";
-import {
-  buildEditorUri,
-  parseFilePath,
-  resolveAbsolutePath,
-} from "../../lib/editor-links";
-import type { EditorScheme } from "../../types";
-import { EditorSchemes } from "../../types";
-import { CodeBlock } from "./CodeBlock";
-
-/**
- * Creates a combined code component for react-markdown that:
- * - Routes fenced code blocks to CodeBlock (syntax highlighting)
- * - Wraps inline code containing file paths with editor links
- * - Falls back to plain <code> for non-file-path inline code
- */
-export function createCodeComponent(
-  editorScheme: EditorScheme,
-  workingDirectory: string | null,
-) {
-  return function CodeComponent({
-    children,
-    className,
-    ...props
-  }: ComponentPropsWithoutRef<"code">) {
-    // Fenced code blocks have className (e.g., "language-ts") or contain newlines
-    if (className || String(children).includes("\n")) {
-      return <CodeBlock className={className}>{children}</CodeBlock>;
-    }
-
-    // Inline code — check for file path patterns
-    if (editorScheme === EditorSchemes.NONE || !workingDirectory) {
-      return <code {...props}>{children}</code>;
-    }
-
-    const text = typeof children === "string" ? children : "";
-    if (!text) {
-      return <code {...props}>{children}</code>;
-    }
-
-    const match = parseFilePath(text);
-    if (!match) {
-      return <code {...props}>{children}</code>;
-    }
-
-    const absolutePath = resolveAbsolutePath(match.path, workingDirectory);
-    const uri = buildEditorUri(
-      editorScheme,
-      absolutePath,
-      match.line,
-      match.col,
-    );
-
-    return (
-      <a href={uri} title={`Open in ${editorScheme}`} className="editor-link">
-        <code {...props}>{children}</code>
-      </a>
-    );
-  };
-}

package/src/components/DocumentViewer/MermaidDiagram.tsx

@@ -1,137 +0,0 @@
-import DOMPurify from "dompurify";
-import { useEffect, useId, useState } from "react";
-
-interface MermaidDiagramProps {
-  code: string;
-}
-
-export function MermaidDiagram({ code }: MermaidDiagramProps) {
-  const id = useId().replace(/:/g, "-"); // Mermaid IDs can't have colons
-  const [svg, setSvg] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    async function renderDiagram() {
-      try {
-        // Lazy load mermaid
-        const mermaid = (await import("mermaid")).default;
-
-        mermaid.initialize({
-          startOnLoad: false,
-          theme: "base",
-          securityLevel: "strict",
-          fontFamily: "system-ui, -apple-system, sans-serif",
-          themeVariables: {
-            // Typography
-            fontSize: "16px",
-
-            // Primary colors - warm amber (matches app's comment colors)
-            primaryColor: "rgba(245, 222, 160, 0.8)",
-            primaryTextColor: "#3f3f46",
-            primaryBorderColor: "#c9a84a",
-
-            // Secondary colors - slate blue
-            secondaryColor: "rgba(168, 196, 228, 0.6)",
-            secondaryTextColor: "#3f3f46",
-            secondaryBorderColor: "#5b7fa8",
-
-            // Tertiary colors - sage green
-            tertiaryColor: "rgba(170, 210, 170, 0.6)",
-            tertiaryTextColor: "#3f3f46",
-            tertiaryBorderColor: "#5a9a62",
-
-            // Background and text
-            background: "#ffffff",
-            mainBkg: "#ffffff",
-            textColor: "#3f3f46",
-            lineColor: "#a1a1aa",
-
-            // Gantt-specific
-            taskBkgColor: "rgba(245, 222, 160, 0.7)",
-            taskTextColor: "#3f3f46",
-            taskTextDarkColor: "#3f3f46",
-            taskTextOutsideColor: "#3f3f46",
-            activeTaskBkgColor: "rgba(228, 195, 110, 0.8)",
-            activeTaskBorderColor: "#c9a84a",
-            doneTaskBkgColor: "rgba(170, 210, 170, 0.6)",
-            doneTaskBorderColor: "#5a9a62",
-            critTaskBkgColor: "rgba(225, 180, 185, 0.7)",
-            critBorderColor: "#b86b78",
-            gridColor: "#e4e4e7",
-            todayLineColor: "#b86b78",
-            sectionBkgColor: "rgba(250, 250, 250, 0.5)",
-            altSectionBkgColor: "rgba(244, 244, 245, 0.5)",
-            sectionBkgColor2: "rgba(250, 250, 250, 0.5)",
-
-            // Flowchart/general diagram
-            nodeBkg: "rgba(245, 222, 160, 0.6)",
-            nodeBorder: "#c9a84a",
-            clusterBkg: "rgba(250, 250, 250, 0.8)",
-            clusterBorder: "#e4e4e7",
-
-            // Sequence diagram
-            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",
-          },
-        });
-
-        const { svg: rawSvg } = await mermaid.render(`mermaid-${id}`, code);
-        // Sanitize SVG output with DOMPurify before storing in state
-        const sanitizedSvg = DOMPurify.sanitize(rawSvg, {
-          USE_PROFILES: { svg: true },
-        });
-
-        if (!cancelled) {
-          setSvg(sanitizedSvg);
-          setError(null);
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setError(
-            err instanceof Error ? err.message : "Failed to render diagram",
-          );
-        }
-      }
-    }
-
-    renderDiagram();
-    return () => {
-      cancelled = true;
-    };
-  }, [code, id]);
-
-  if (error) {
-    return (
-      <div className="my-6">
-        <div className="text-red-500 text-sm mb-2">Mermaid Error: {error}</div>
-        <pre className="bg-zinc-900 p-4 rounded-lg overflow-x-auto text-sm">
-          <code>{code}</code>
-        </pre>
-      </div>
-    );
-  }
-
-  if (!svg) {
-    return (
-      <div className="my-6 bg-zinc-900 p-4 rounded-lg text-zinc-400">
-        Loading diagram...
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className="mermaid-container my-6 flex justify-center overflow-x-auto"
-      // biome-ignore lint/security/noDangerouslySetInnerHtml: svg is sanitized by DOMPurify
-      dangerouslySetInnerHTML={{ __html: svg }}
-    />
-  );
-}

package/src/components/DocumentViewer/index.ts

@@ -1 +0,0 @@
-export { DocumentViewer } from "./DocumentViewer";

package/src/components/FloatingTOC.tsx

@@ -1,61 +0,0 @@
-import { List } from "lucide-react";
-import { useState } from "react";
-import { useLocale } from "../contexts/LocaleContext";
-import type { Heading } from "../hooks/useHeadings";
-import { cn } from "../lib/utils";
-import { TableOfContents } from "./TableOfContents";
-
-interface FloatingTOCProps {
-  headings: Heading[];
-  activeId: string | null;
-  onHeadingClick: (id: string) => void;
-}
-
-export function FloatingTOC({
-  headings,
-  activeId,
-  onHeadingClick,
-}: FloatingTOCProps) {
-  const { t } = useLocale();
-  const [isExpanded, setIsExpanded] = useState(false);
-
-  if (headings.length === 0) return null;
-
-  return (
-    <nav
-      className="fixed left-4 top-16 z-40"
-      onMouseEnter={() => setIsExpanded(true)}
-      onMouseLeave={() => setIsExpanded(false)}
-      aria-label={t("floatingTOC.label")}
-    >
-      {/* Collapsed state: circular button */}
-      <button
-        type="button"
-        onClick={() => setIsExpanded(!isExpanded)}
-        className={cn(
-          "w-10 h-10 rounded-full bg-white dark:bg-zinc-900 shadow-lg border border-zinc-100 dark:border-zinc-800 flex items-center justify-center text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors duration-150",
-          isExpanded && "opacity-0 pointer-events-none",
-        )}
-        aria-label={t("floatingTOC.label")}
-      >
-        <List className="w-5 h-5" />
-      </button>
-
-      {/* Expanded state: panel */}
-      {isExpanded && (
-        <div className="absolute left-0 top-0 w-56 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm rounded-lg shadow-lg border border-zinc-200/40 dark:border-zinc-700/40 p-4 floating-toc-panel">
-          <div className="max-h-[calc(100vh-8rem)] overflow-y-auto">
-            <TableOfContents
-              headings={headings}
-              activeId={activeId}
-              onHeadingClick={(id) => {
-                onHeadingClick(id);
-                setIsExpanded(false);
-              }}
-            />
-          </div>
-        </div>
-      )}
-    </nav>
-  );
-}

package/src/components/Header.tsx

@@ -1,65 +0,0 @@
-import { useCommentContext } from "../contexts/CommentContext";
-import { useLayoutContext } from "../contexts/LayoutContext";
-import { useLocale } from "../contexts/LocaleContext";
-import { cn } from "../lib/utils";
-import { ActionsMenu } from "./ActionsMenu";
-import { CommentBadge } from "./comments/CommentBadge";
-import { Text } from "./ui/Text";
-
-interface HeaderProps {
-  fileName: string;
-  onCopyAll: () => void;
-  onCopyAllRaw: () => void;
-  onExportJson: () => void;
-  onReload: () => void;
-}
-
-export function Header({
-  fileName,
-  onCopyAll,
-  onCopyAllRaw,
-  onExportJson,
-  onReload,
-}: HeaderProps) {
-  const { reanchorTarget } = useCommentContext();
-  const { isFullscreen } = useLayoutContext();
-  const { t } = useLocale();
-
-  return (
-    <header className="sticky top-0 z-50 bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm border-b border-zinc-100 dark:border-zinc-800">
-      <div
-        className={cn(
-          "px-6 py-3 flex items-center justify-between",
-          !isFullscreen && "max-w-7xl mx-auto",
-        )}
-      >
-        <div className="flex items-center gap-3">
-          <Text variant="title" asChild>
-            <h1>readit</h1>
-          </Text>
-          <span className="text-zinc-200 dark:text-zinc-700 font-light">—</span>
-          <Text variant="caption" asChild>
-            <span className="truncate max-w-[200px]">{fileName}</span>
-          </Text>
-        </div>
-
-        <div className="flex items-center gap-3">
-          {reanchorTarget && (
-            <Text variant="caption" asChild>
-              <span className="italic">{t("header.selectTextToReanchor")}</span>
-            </Text>
-          )}
-
-          <CommentBadge />
-
-          <ActionsMenu
-            onCopyAll={onCopyAll}
-            onCopyAllRaw={onCopyAllRaw}
-            onExportJson={onExportJson}
-            onReload={onReload}
-          />
-        </div>
-      </div>
-    </header>
-  );
-}

package/src/components/InlineEditor.tsx

@@ -1,74 +0,0 @@
-import { use, useEffect, useRef, useState } from "react";
-import { LayoutContext } from "../contexts/LayoutContext";
-import { useLocale } from "../contexts/LocaleContext";
-import { cn } from "../lib/utils";
-import { FontFamilies } from "../types";
-import { Button } from "./ui/Button";
-
-interface InlineEditorProps {
-  initialText: string;
-  onSave: (text: string) => void;
-  onCancel: () => void;
-  rows?: number;
-  className?: string;
-}
-
-export function InlineEditor({
-  initialText,
-  onSave,
-  onCancel,
-  rows = 2,
-  className,
-}: InlineEditorProps) {
-  const layout = use(LayoutContext);
-  const { t } = useLocale();
-  const fontClass = layout
-    ? layout.fontFamily === FontFamilies.SANS_SERIF
-      ? "font-sans"
-      : "font-serif"
-    : undefined;
-  const [editText, setEditText] = useState(initialText);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    textareaRef.current?.focus();
-  }, []);
-
-  const handleSave = () => {
-    if (editText.trim()) {
-      onSave(editText);
-    }
-  };
-
-  return (
-    <div className="space-y-2">
-      <textarea
-        ref={textareaRef}
-        value={editText}
-        onChange={(e) => setEditText(e.target.value)}
-        className={cn(
-          fontClass,
-          "w-full px-2 py-1.5 text-sm border border-zinc-200 dark:border-zinc-700 dark:bg-zinc-800 resize-none focus:outline-none focus:border-zinc-400 dark:focus:border-zinc-500",
-          className,
-        )}
-        rows={rows}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" && e.metaKey) {
-            handleSave();
-          }
-          if (e.key === "Escape") {
-            onCancel();
-          }
-        }}
-      />
-      <div className="flex gap-3 text-sm">
-        <Button variant="link" size="sm" onClick={handleSave}>
-          {t("editor.save")}
-        </Button>
-        <Button variant="ghost" size="sm" onClick={onCancel}>
-          {t("editor.cancel")}
-        </Button>
-      </div>
-    </div>
-  );
-}