@peaske7/readit 0.3.0-rc.0 → 0.3.0-rc.2

package/src/components/DocumentViewer.svelte

@@ -1,233 +0,0 @@
-<script lang="ts">
-import { onDestroy, onMount } from "svelte";
-import {
-  createHighlighter,
-  type Highlighter,
-} from "../lib/highlight/highlighter";
-import type { HighlightComment } from "../lib/highlight/types";
-import type { Positions } from "../lib/positions";
-import { cn } from "../lib/utils";
-import { AnchorConfidences, type Comment, FontFamilies } from "../schema";
-import { settings } from "../stores/settings.svelte";
-import MermaidEnhancer from "./MermaidEnhancer.svelte";
-
-let {
-  content,
-  comments,
-  isActive,
-  onTextSelect,
-  onHighlightHover,
-  onHighlightClick,
-  registerHighlighter,
-  unregisterHighlighter,
-  positions,
-}: {
-  content: string;
-  comments: Comment[];
-  isActive: boolean;
-  onTextSelect: (
-    text: string,
-    startOffset: number,
-    endOffset: number,
-    selectionTop: number,
-  ) => void;
-  onHighlightHover?: (commentId: string | undefined) => void;
-  onHighlightClick?: (commentId: string) => void;
-  registerHighlighter: (
-    setFocused: (id: string | undefined) => void,
-    scrollToComment: (id: string) => void,
-  ) => void;
-  unregisterHighlighter?: () => void;
-  positions: Positions;
-} = $props();
-
-let contentEl: HTMLElement | undefined = $state();
-let containerEl: HTMLDivElement | undefined = $state();
-let adapter: Highlighter | null = null;
-let renderedContent = "";
-let contentVersion = $state(0);
-
-let proseClass = $derived(
-  settings.fontFamily === FontFamilies.SANS_SERIF
-    ? "prose-sans"
-    : "prose-serif",
-);
-
-let mermaidCounter = 0;
-
-async function hydrateMermaid(root: HTMLElement) {
-  const mermaidBlocks = root.querySelectorAll("pre code.language-mermaid");
-  if (mermaidBlocks.length === 0) return;
-
-  requestIdleCallback(async () => {
-    try {
-      const { default: mermaid } = await import("mermaid");
-      const { getMermaidInitConfig } = await import("../lib/mermaid-config");
-      mermaid.initialize(getMermaidInitConfig());
-
-      for (const codeEl of mermaidBlocks) {
-        const preEl = codeEl.parentElement;
-        if (!preEl) continue;
-        const code = codeEl.textContent ?? "";
-        try {
-          const { svg } = await mermaid.render(
-            `mermaid-${mermaidCounter++}`,
-            code,
-          );
-          const wrapper = document.createElement("div");
-          wrapper.className = "mermaid-container";
-          wrapper.dataset.mermaidSource = encodeURIComponent(code);
-          // eslint-disable-next-line -- trusted mermaid render output
-          wrapper.innerHTML = svg;
-          preEl.replaceWith(wrapper);
-        } catch {}
-      }
-      contentVersion++;
-      if (isActive) requestAnimationFrame(() => positions.cache());
-    } catch {}
-  });
-}
-
-onMount(() => {
-  if (!containerEl) return;
-
-  const existingArticle = document.getElementById(
-    "document-content",
-  ) as HTMLElement | null;
-  if (existingArticle && !existingArticle.dataset.readitAdopted) {
-    existingArticle.dataset.readitAdopted = "true";
-    existingArticle.removeAttribute("id");
-    containerEl.appendChild(existingArticle);
-    contentEl = existingArticle;
-    existingArticle.className = cn("prose", proseClass);
-  } else if (!contentEl) {
-    const article = document.createElement("article");
-    article.className = cn("prose", proseClass);
-    article.innerHTML = content; // eslint-disable-line -- trusted server content
-    containerEl.appendChild(article);
-    contentEl = article;
-  }
-
-  adapter = createHighlighter({
-    root: contentEl!,
-    container: containerEl,
-    onSelect: onTextSelect,
-  });
-
-  registerHighlighter(adapter.setFocused, adapter.scrollToComment);
-
-  if (onHighlightHover) {
-    adapter.onHighlightHover(onHighlightHover);
-  }
-
-  if (onHighlightClick) {
-    adapter.onHighlightClick(onHighlightClick);
-  }
-
-  if (isActive && comments.length > 0) {
-    const hc: HighlightComment[] = comments
-      .filter((c) => c.anchorConfidence !== AnchorConfidences.UNRESOLVED)
-      .map((c) => ({
-        id: c.id,
-        selectedText: c.selectedText,
-        startOffset: c.startOffset,
-        endOffset: c.endOffset,
-      }));
-    adapter.applyHighlights(hc);
-  }
-
-  renderedContent = content;
-  contentVersion++;
-
-  void hydrateMermaid(contentEl!);
-
-  const handleTestSelect = (e: Event) => {
-    const { text, startOffset, endOffset } = (e as CustomEvent).detail;
-    onTextSelect(text, startOffset, endOffset, 0);
-  };
-  window.addEventListener("test:select-text", handleTestSelect);
-
-  document.documentElement.dataset.readitReady = "true";
-
-  return () => {
-    window.removeEventListener("test:select-text", handleTestSelect);
-  };
-});
-
-onDestroy(() => {
-  positions.detach();
-  adapter?.dispose();
-  adapter = null;
-  unregisterHighlighter?.();
-});
-
-// Intentionally capture initial value — skip first $effect when already active.
-// svelte-ignore state_referenced_locally
-let initialHighlightsDone = !isActive;
-$effect(() => {
-  if (!isActive || !adapter) return;
-
-  const _comments = comments;
-  void content;
-
-  if (!initialHighlightsDone) {
-    initialHighlightsDone = true;
-    return;
-  }
-
-  if (_comments.length === 0) {
-    adapter.clearHighlights();
-    return;
-  }
-
-  const hc: HighlightComment[] = _comments
-    .filter((c) => c.anchorConfidence !== AnchorConfidences.UNRESOLVED)
-    .map((c) => ({
-      id: c.id,
-      selectedText: c.selectedText,
-      startOffset: c.startOffset,
-      endOffset: c.endOffset,
-    }));
-  adapter.applyHighlights(hc);
-});
-
-$effect(() => {
-  if (!contentEl || !containerEl || !adapter) return;
-
-  if (isActive) {
-    positions.attach(contentEl, containerEl, adapter);
-    positions.cache();
-    return () => positions.detach();
-  }
-});
-
-$effect(() => {
-  const sorted = comments
-    .filter((c) => c.anchorConfidence !== AnchorConfidences.UNRESOLVED)
-    .sort((a, b) => a.startOffset - b.startOffset);
-  positions.setIds(sorted.map((c) => c.id));
-});
-
-$effect(() => {
-  if (!contentEl) return;
-  contentEl.className = cn("prose", proseClass);
-
-  if (renderedContent !== content) {
-    contentEl.innerHTML = content; // eslint-disable-line -- trusted server content
-    renderedContent = content;
-    contentVersion++;
-    void hydrateMermaid(contentEl);
-  }
-});
-</script>
-
-<div bind:this={containerEl} class="flex-1 min-w-0">
-</div>
-
-<MermaidEnhancer
-  root={contentEl}
-  {contentVersion}
-  notifyContentChanged={() => {
-    if (isActive) requestAnimationFrame(() => positions.cache());
-  }}
-/>

package/src/components/FloatingComment.svelte

@@ -1,107 +0,0 @@
-<script lang="ts">
-import { cn } from "../lib/utils";
-import { type Comment, FontFamilies } from "../schema";
-import { t } from "../stores/locale.svelte";
-import { settings } from "../stores/settings.svelte";
-import { setActiveCommentId, ui } from "../stores/ui.svelte";
-import InlineEditor from "./InlineEditor.svelte";
-import ActionLink from "./ui/ActionLink.svelte";
-import Text from "./ui/Text.svelte";
-
-interface Props {
-  comment: Comment;
-  onedit: (id: string, text: string) => void;
-  ondelete: (id: string) => void;
-  oncopy: (comment: Comment) => void;
-  onnavigate: (commentId: string) => void;
-}
-
-let { comment, onedit, ondelete, oncopy, onnavigate }: Props = $props();
-
-let isEditing = $state(false);
-let fontClass = $derived(
-  settings.fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif",
-);
-let hasNote = $derived(comment.comment.trim().length > 0);
-
-function dismiss() {
-  setActiveCommentId(undefined);
-}
-
-function handleWindowKeydown(e: KeyboardEvent) {
-  if (ui.activeCommentId && e.key === "Escape") {
-    dismiss();
-  }
-}
-</script>
-
-<svelte:window onkeydown={handleWindowKeydown} />
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- Backdrop -->
-<div
-  class="fixed inset-0 z-40 lg:hidden"
-  onclick={dismiss}
-></div>
-
-<!-- Floating panel -->
-<div
-  class="fixed bottom-16 left-4 right-4 z-50 bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 rounded-lg shadow-lg p-4 lg:hidden"
->
-  <!-- Selected text -->
-  <div class={cn(fontClass, "text-sm italic text-zinc-500 dark:text-zinc-400 mb-2 line-clamp-2")}>
-    <button
-      type="button"
-      onclick={() => {
-        onnavigate(comment.id);
-        dismiss();
-      }}
-      class="cursor-pointer hover:underline text-left"
-    >
-      "{comment.selectedText}"
-    </button>
-  </div>
-
-  {#if isEditing}
-    <InlineEditor
-      initialText={comment.comment}
-      onsave={(text) => {
-        onedit(comment.id, text);
-        isEditing = false;
-      }}
-      oncancel={() => (isEditing = false)}
-    />
-  {:else}
-    <!-- Comment text -->
-    {#if hasNote}
-      <p class={cn(fontClass, "text-sm text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap mb-3")}>
-        {comment.comment}
-      </p>
-    {:else}
-      <Text variant="caption" class="mb-3 italic">
-        {t("marginNote.addNote")}
-      </Text>
-    {/if}
-
-    <!-- Actions -->
-    <div class="flex items-center text-xs text-zinc-400 gap-3 pt-2 border-t border-zinc-100 dark:border-zinc-800">
-      <ActionLink onclick={() => (isEditing = true)}>
-        {hasNote ? t("marginNote.edit") : t("marginNote.addNote")}
-      </ActionLink>
-      <span aria-hidden="true">&middot;</span>
-      <ActionLink variant="destructive" onclick={() => { ondelete(comment.id); dismiss(); }}>
-        {t("marginNote.delete")}
-      </ActionLink>
-      {#if hasNote}
-        <span aria-hidden="true">&middot;</span>
-        <ActionLink onclick={() => oncopy(comment)}>
-          {t("marginNote.copy")}
-        </ActionLink>
-      {/if}
-      <span class="flex-1"></span>
-      <ActionLink onclick={dismiss}>
-        {t("comment.cancel")}
-      </ActionLink>
-    </div>
-  {/if}
-</div>

package/src/components/Header.svelte

@@ -1,76 +0,0 @@
-<script lang="ts">
-import type { Comment } from "../schema";
-import { t } from "../stores/locale.svelte";
-import ActionsMenu from "./ActionsMenu.svelte";
-import CommentBadge from "./CommentBadge.svelte";
-import Text from "./ui/Text.svelte";
-
-interface Props {
-  fileName: string;
-  comments: Comment[];
-  hasReanchorTarget: boolean;
-  oncopyall: () => void;
-  onexportjson: () => void;
-  onreload: () => void;
-  onedit: (id: string, newText: string) => void;
-  ondelete: (id: string) => void;
-  ondeleteall: () => void;
-  onnavigate: (id: string) => void;
-  onstartreanchor: (id: string) => void;
-}
-
-let {
-  fileName,
-  comments,
-  hasReanchorTarget,
-  oncopyall,
-  onexportjson,
-  onreload,
-  onedit,
-  ondelete,
-  ondeleteall,
-  onnavigate,
-  onstartreanchor,
-}: Props = $props();
-
-let commentCount = $derived(comments.length);
-</script>
-
-<header class="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 class="px-6 py-3 flex items-center justify-between max-w-7xl mx-auto">
-    <div class="flex items-center gap-3">
-      <Text variant="title" as="h1">
-        readit
-      </Text>
-      <span class="text-zinc-200 dark:text-zinc-700 font-light">&mdash;</span>
-      <Text variant="caption" as="span" class="truncate max-w-[200px]">
-        {fileName}
-      </Text>
-    </div>
-
-    <div class="flex items-center gap-3">
-      {#if hasReanchorTarget}
-        <Text variant="caption" as="span" class="italic">
-          {t("header.selectTextToReanchor")}
-        </Text>
-      {/if}
-
-      <CommentBadge
-        {comments}
-        {fileName}
-        {onedit}
-        {ondelete}
-        {ondeleteall}
-        {onnavigate}
-        {onstartreanchor}
-      />
-
-      <ActionsMenu
-        {commentCount}
-        {oncopyall}
-        {onexportjson}
-        {onreload}
-      />
-    </div>
-  </div>
-</header>

package/src/components/InlineEditor.svelte

@@ -1,72 +0,0 @@
-<script lang="ts">
-import { cn } from "../lib/utils";
-import { FontFamilies } from "../schema";
-import { t } from "../stores/locale.svelte";
-import { settings } from "../stores/settings.svelte";
-import Button from "./ui/Button.svelte";
-
-interface Props {
-  initialText: string;
-  onsave: (text: string) => void;
-  oncancel: () => void;
-  rows?: number;
-  class?: string;
-}
-
-let {
-  initialText,
-  onsave,
-  oncancel,
-  rows = 2,
-  class: className,
-}: Props = $props();
-
-let fontClass = $derived(
-  settings.fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif",
-);
-
-// svelte-ignore state_referenced_locally — intentionally capture initial prop value
-let editText = $state(initialText);
-let textareaEl: HTMLTextAreaElement | undefined = $state();
-
-$effect(() => {
-  textareaEl?.focus();
-});
-
-function handleSave() {
-  if (editText.trim()) {
-    onsave(editText);
-  }
-}
-
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === "Enter" && e.metaKey) {
-    handleSave();
-  }
-  if (e.key === "Escape") {
-    oncancel();
-  }
-}
-</script>
-
-<div class="space-y-2">
-  <textarea
-    bind:this={textareaEl}
-    bind:value={editText}
-    class={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}
-    onkeydown={handleKeydown}
-  ></textarea>
-  <div class="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>

package/src/components/MarginNote.svelte

@@ -1,167 +0,0 @@
-<script lang="ts">
-import type { Positions } from "../lib/positions";
-import { cn } from "../lib/utils";
-import { type Comment, FontFamilies } from "../schema";
-import { t } from "../stores/locale.svelte";
-import { settings } from "../stores/settings.svelte";
-import { setHoveredCommentId, ui } from "../stores/ui.svelte";
-import InlineEditor from "./InlineEditor.svelte";
-import ActionLink from "./ui/ActionLink.svelte";
-
-interface Props {
-  comment: Comment;
-  commentIndex?: number;
-  positions: Positions;
-  onedit: (id: string, text: string) => void;
-  ondelete: (id: string) => void;
-  oncopy: (comment: Comment) => void;
-  onnavigate: (commentId: string) => void;
-}
-
-let {
-  comment,
-  commentIndex = 0,
-  positions,
-  onedit,
-  ondelete,
-  oncopy,
-  onnavigate,
-}: Props = $props();
-
-let isEditing = $state(false);
-let articleEl: HTMLElement | undefined = $state();
-
-let isHovered = $derived(ui.hoveredCommentId === comment.id);
-let fontClass = $derived(
-  settings.fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif",
-);
-let hasNote = $derived(comment.comment.trim().length > 0);
-
-$effect(() => {
-  if (articleEl) {
-    positions.register(comment.id, articleEl);
-  }
-
-  return () => {
-    positions.unregister(comment.id);
-  };
-});
-
-function selectedTextClass(hovered: boolean): string {
-  return cn(
-    "text-sm italic mb-1 line-clamp-1 flex items-center gap-1 transition-colors duration-150",
-    hovered
-      ? "text-zinc-600 dark:text-zinc-400"
-      : "text-zinc-400 dark:text-zinc-500",
-  );
-}
-
-function commentTextClass(hovered: boolean): string {
-  return cn(
-    "text-sm whitespace-pre-wrap transition-colors duration-150",
-    hovered
-      ? "text-zinc-800 dark:text-zinc-200"
-      : "text-zinc-500 dark:text-zinc-400",
-  );
-}
-
-function badgeClass(hovered: boolean): string {
-  return cn(
-    "absolute -left-4 top-2 text-xs tabular-nums transition-colors duration-150",
-    hovered
-      ? "text-zinc-600 dark:text-zinc-400"
-      : "text-zinc-400 dark:text-zinc-500",
-  );
-}
-</script>
-
-{#if !hasNote && !isEditing}
-  <!-- Highlight-only (no note): minimal em-dash marker -->
-  <article
-    bind:this={articleEl}
-    class="absolute left-0 right-0 group"
-    style="visibility: hidden; content-visibility: auto; contain-intrinsic-size: auto 80px;"
-    data-comment-id={comment.id}
-    onmouseenter={() => setHoveredCommentId(comment.id)}
-    onmouseleave={() => setHoveredCommentId(undefined)}
-  >
-    <span class={badgeClass(isHovered)}>&mdash;</span>
-
-    <div class="pt-2 pb-2 pl-3">
-      <div
-        class={cn(
-          "flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity",
-          "gap-1.5 duration-150",
-          isHovered && "opacity-100",
-        )}
-      >
-        <ActionLink onclick={() => (isEditing = true)}>
-          {t("marginNote.addNote")}
-        </ActionLink>
-        <span aria-hidden="true">&middot;</span>
-        <ActionLink variant="destructive" onclick={() => ondelete(comment.id)}>
-          {t("marginNote.delete")}
-        </ActionLink>
-      </div>
-    </div>
-  </article>
-{:else}
-  <!-- Comment with note -->
-  <article
-    bind:this={articleEl}
-    class="absolute left-0 right-0 group"
-    style="visibility: hidden"
-    data-comment-id={comment.id}
-    onmouseenter={() => setHoveredCommentId(comment.id)}
-    onmouseleave={() => setHoveredCommentId(undefined)}
-  >
-    <span class={badgeClass(isHovered)}>{commentIndex + 1}</span>
-
-    <div
-      class={cn(
-        "relative border-t border-zinc-100 dark:border-zinc-800 pt-3 pb-2 pl-3 transition-colors duration-150",
-        comment.anchorConfidence === "unresolved" && "opacity-60",
-      )}
-    >
-      {#if !isEditing}
-        <div class={cn(fontClass, selectedTextClass(isHovered))}>
-          <button
-            type="button"
-            onclick={() => onnavigate(comment.id)}
-            class="cursor-pointer hover:underline text-left"
-          >
-            "{comment.selectedText}"
-          </button>
-        </div>
-      {/if}
-
-      {#if isEditing}
-        <InlineEditor
-          initialText={comment.comment}
-          onsave={(text) => {
-            onedit(comment.id, text);
-            isEditing = false;
-          }}
-          oncancel={() => (isEditing = false)}
-        />
-      {:else}
-        <p class={cn(fontClass, commentTextClass(isHovered))}>
-          {comment.comment}
-        </p>
-        <div class="flex items-center text-xs text-zinc-400 opacity-0 group-hover:opacity-100 transition-opacity gap-1.5 mt-2">
-          <ActionLink onclick={() => (isEditing = true)}>
-            {t("marginNote.edit")}
-          </ActionLink>
-          <span aria-hidden="true">&middot;</span>
-          <ActionLink variant="destructive" onclick={() => ondelete(comment.id)}>
-            {t("marginNote.delete")}
-          </ActionLink>
-          <span aria-hidden="true">&middot;</span>
-          <ActionLink onclick={() => oncopy(comment)}>
-            {t("marginNote.copy")}
-          </ActionLink>
-        </div>
-      {/if}
-    </div>
-  </article>
-{/if}

package/src/components/MarginNotesContainer.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-import type { Positions } from "../lib/positions";
-import type { Comment } from "../schema";
-import MarginNote from "./MarginNote.svelte";
-
-interface Props {
-  sortedComments: Comment[];
-  positions: Positions;
-  onedit: (id: string, text: string) => void;
-  ondelete: (id: string) => void;
-  oncopy: (comment: Comment) => void;
-  onnavigate: (commentId: string) => void;
-}
-
-let { sortedComments, positions, onedit, ondelete, oncopy, onnavigate }: Props =
-  $props();
-</script>
-
-{#if sortedComments.length > 0}
-  <div class="relative w-64">
-    {#each sortedComments as comment, index (comment.id)}
-      <MarginNote
-        {comment}
-        commentIndex={index}
-        {positions}
-        {onedit}
-        {ondelete}
-        {oncopy}
-        {onnavigate}
-      />
-    {/each}
-  </div>
-{/if}