@peaske7/readit 0.1.8 → 0.2.0

package/src/{store/index.ts → store.ts}

@@ -1,7 +1,5 @@
 import { createStore, useStore } from "zustand";
-import type { Comment, Document, Selection } from "../types";
-
-// ─── Types ───────────────────────────────────────────────────────────
+import type { Comment, Document, Selection } from "./schema";
 
 export interface DocumentState {
   document: Document;
@@ -11,41 +9,27 @@ export interface DocumentState {
   selection: Selection | null;
   pendingSelectionTop: number | undefined;
   pendingCommentText: string;
-  highlightPositions: Record<string, number>;
-  documentPositions: Record<string, number>;
   scrollY: number;
-  hoveredCommentId: string | undefined;
   reanchorTarget: { commentId: string } | null;
 }
 
 export interface AppStore {
-  // Multi-document state
   documents: Map<string, DocumentState>;
   activeDocumentPath: string | null;
   documentOrder: string[];
   workingDirectory: string | null;
 
-  // Global actions
   setWorkingDirectory: (dir: string) => void;
   openDocument: (doc: Document, opts?: { active?: boolean }) => void;
   closeDocument: (filePath: string) => void;
   setActiveDocument: (filePath: string) => void;
 
-  // Per-document setters (default to active doc)
+  // Setters default to active doc when filePath omitted
   setComments: (comments: Comment[], filePath?: string) => void;
   setCommentsError: (error: string | null, filePath?: string) => void;
   setSelection: (selection: Selection | null, filePath?: string) => void;
   setPendingSelectionTop: (top: number | undefined, filePath?: string) => void;
-  setHighlightPositions: (
-    positions: Record<string, number>,
-    filePath?: string,
-  ) => void;
-  setDocumentPositions: (
-    positions: Record<string, number>,
-    filePath?: string,
-  ) => void;
   setScrollY: (y: number, filePath?: string) => void;
-  setHoveredCommentId: (id: string | undefined, filePath?: string) => void;
   setReanchorTarget: (
     target: { commentId: string } | null,
     filePath?: string,
@@ -53,12 +37,9 @@ export interface AppStore {
   setPendingCommentText: (text: string, filePath?: string) => void;
   updateDocumentContent: (content: string, filePath?: string) => void;
 
-  // Helpers
   getActiveDocumentState: () => DocumentState | undefined;
 }
 
-// ─── Helpers ─────────────────────────────────────────────────────────
-
 function createInitialDocumentState(doc: Document): DocumentState {
   return {
     document: doc,
@@ -68,10 +49,7 @@ function createInitialDocumentState(doc: Document): DocumentState {
     selection: null,
     pendingSelectionTop: undefined,
     pendingCommentText: "",
-    highlightPositions: {},
-    documentPositions: {},
     scrollY: 0,
-    hoveredCommentId: undefined,
     reanchorTarget: null,
   };
 }
@@ -80,8 +58,6 @@ function sortComments(comments: Comment[]): Comment[] {
   return [...comments].sort((a, b) => a.startOffset - b.startOffset);
 }
 
-// ─── Store Factory ───────────────────────────────────────────────────
-
 export function createAppStore() {
   return createStore<AppStore>((set, get) => {
     const resolveFilePath = (filePath?: string): string | null =>
@@ -192,30 +168,12 @@ export function createAppStore() {
         updateDocState(path, () => ({ pendingSelectionTop: top }));
       },
 
-      setHighlightPositions: (positions, filePath?) => {
-        const path = resolveFilePath(filePath);
-        if (!path) return;
-        updateDocState(path, () => ({ highlightPositions: positions }));
-      },
-
-      setDocumentPositions: (positions, filePath?) => {
-        const path = resolveFilePath(filePath);
-        if (!path) return;
-        updateDocState(path, () => ({ documentPositions: positions }));
-      },
-
       setScrollY: (y, filePath?) => {
         const path = resolveFilePath(filePath);
         if (!path) return;
         updateDocState(path, () => ({ scrollY: y }));
       },
 
-      setHoveredCommentId: (id, filePath?) => {
-        const path = resolveFilePath(filePath);
-        if (!path) return;
-        updateDocState(path, () => ({ hoveredCommentId: id }));
-      },
-
       setReanchorTarget: (target, filePath?) => {
         const path = resolveFilePath(filePath);
         if (!path) return;
@@ -245,10 +203,20 @@ export function createAppStore() {
   });
 }
 
-// ─── Singleton + React Hook ─────────────────────────────────────────
-
 export const appStore = createAppStore();
 
 export function useAppStore<T>(selector: (state: AppStore) => T): T {
   return useStore(appStore, selector);
 }
+
+interface UIState {
+  hoveredCommentId: string | undefined;
+}
+
+export const uiStore = createStore<UIState>(() => ({
+  hoveredCommentId: undefined,
+}));
+
+export function useUI<T>(selector: (s: UIState) => T): T {
+  return useStore(uiStore, selector);
+}

package/vite.config.ts

@@ -5,6 +5,14 @@ import { defineConfig } from "vite";
 export default defineConfig({
   plugins: [tailwindcss(), react()],
   server: {
+    port: 24678,
+    strictPort: true,
+    host: "127.0.0.1",
+    hmr: {
+      host: "127.0.0.1",
+      port: 24678,
+      clientPort: 24678,
+    },
     proxy: {
       "/api": {
         target: "http://localhost:4567",

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/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/ShortcutCapture.tsx

@@ -1,48 +0,0 @@
-import { useCallback, useEffect } from "react";
-import { useLocale } from "../contexts/LocaleContext";
-import {
-  eventToBinding,
-  isReservedBinding,
-  type ShortcutBinding,
-} from "../lib/shortcut-registry";
-
-interface ShortcutCaptureProps {
-  onCapture: (binding: ShortcutBinding) => void;
-  onCancel: () => void;
-}
-
-export function ShortcutCapture({ onCapture, onCancel }: ShortcutCaptureProps) {
-  const { t } = useLocale();
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      if (e.key === "Escape") {
-        onCancel();
-        return;
-      }
-
-      const binding = eventToBinding(e);
-      if (!binding) return;
-
-      if (isReservedBinding(binding)) return;
-
-      onCapture(binding);
-    },
-    [onCapture, onCancel],
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyDown, { capture: true });
-    return () =>
-      window.removeEventListener("keydown", handleKeyDown, { capture: true });
-  }, [handleKeyDown]);
-
-  return (
-    <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-amber-50 border border-amber-200 text-amber-700 text-xs font-medium animate-pulse">
-      {t("shortcutCapture.pressKeys")}
-    </span>
-  );
-}