@peaske7/readit 0.1.8 → 0.2.1

package/src/components/ui/Button.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import { cn } from "../../lib/utils";
+
+const baseStyles =
+  "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium transition-colors duration-150 active:scale-[0.98] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+
+const variantStyles = {
+  default: "bg-blue-600 text-white hover:bg-blue-700",
+  secondary:
+    "bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 hover:bg-zinc-200 dark:hover:bg-zinc-700",
+  outline:
+    "border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-zinc-800",
+  ghost:
+    "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-100",
+  destructive: "bg-red-600 text-white hover:bg-red-700",
+  link: "text-zinc-600 dark:text-zinc-400 underline-offset-4 hover:underline",
+} as const;
+
+const sizeStyles = {
+  default: "h-9 px-4",
+  sm: "h-8 px-3 text-xs",
+  lg: "h-10 px-6",
+  icon: "size-9",
+} as const;
+
+type ButtonVariant = keyof typeof variantStyles;
+type ButtonSize = keyof typeof sizeStyles;
+
+interface Props extends HTMLButtonAttributes {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  children: Snippet;
+}
+
+let {
+  variant = "default",
+  size = "default",
+  class: className,
+  type = "button",
+  children,
+  ...rest
+}: Props = $props();
+</script>
+
+<button
+  {...rest}
+  {type}
+  class={cn(baseStyles, variantStyles[variant], sizeStyles[size], className)}
+>
+  {@render children()}
+</button>

package/src/components/ui/Dialog.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+import { X } from "lucide-svelte";
+import type { Snippet } from "svelte";
+import { cn } from "../../lib/utils";
+
+interface Props {
+  open: boolean;
+  onclose?: () => void;
+  contentClass?: string;
+  children: Snippet;
+  header?: Snippet;
+  headerActions?: Snippet;
+}
+
+let {
+  open = $bindable(false),
+  onclose,
+  contentClass,
+  children,
+  header,
+  headerActions,
+}: Props = $props();
+
+let dialogEl: HTMLDialogElement | undefined = $state();
+
+$effect(() => {
+  if (!dialogEl) return;
+
+  if (open && !dialogEl.open) {
+    dialogEl.showModal();
+  } else if (!open && dialogEl.open) {
+    dialogEl.close();
+  }
+});
+
+$effect(() => {
+  if (!dialogEl) return;
+
+  const handleClose = () => {
+    open = false;
+    onclose?.();
+  };
+
+  dialogEl.addEventListener("close", handleClose);
+  return () => dialogEl!.removeEventListener("close", handleClose);
+});
+
+function handleBackdropClick(e: MouseEvent) {
+  if (e.target === dialogEl && dialogEl?.open) {
+    dialogEl.close();
+  }
+}
+
+function handleCloseClick() {
+  if (dialogEl?.open) dialogEl.close();
+}
+</script>
+
+<dialog
+  bind:this={dialogEl}
+  onclick={handleBackdropClick}
+  class="backdrop:bg-black/20 dark:backdrop:bg-black/40 backdrop:backdrop-blur-sm bg-transparent p-0 m-auto max-w-none"
+>
+  {#if open}
+    <div
+      class={cn(
+        "w-full bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm shadow-lg border border-zinc-200/40 dark:border-zinc-700/40 rounded-xl flex flex-col",
+        contentClass,
+      )}
+    >
+      {#if header}
+        <div
+          class="flex items-center justify-between pl-4 pr-12 py-3 border-b border-zinc-100 dark:border-zinc-800"
+        >
+          <h2 class="text-sm font-medium text-zinc-900 dark:text-zinc-100">
+            {@render header()}
+          </h2>
+          {#if headerActions}
+            {@render headerActions()}
+          {/if}
+        </div>
+      {/if}
+
+      <div class="flex-1 overflow-visible p-4">
+        {@render children()}
+      </div>
+
+      <button
+        type="button"
+        onclick={handleCloseClick}
+        class="absolute top-3 right-3 size-7 inline-flex items-center justify-center rounded-lg text-zinc-600 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800"
+      >
+        <X class="w-4 h-4" />
+      </button>
+    </div>
+  {/if}
+</dialog>

package/src/components/ui/DropdownMenu.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import { cn } from "../../lib/utils";
+
+interface Props {
+  open?: boolean;
+  trigger: Snippet;
+  align?: "start" | "end";
+  contentClass?: string;
+  children: Snippet;
+}
+
+let {
+  open = $bindable(false),
+  trigger,
+  align = "start",
+  contentClass,
+  children,
+}: Props = $props();
+
+let containerEl: HTMLDivElement | undefined = $state();
+
+function toggle() {
+  open = !open;
+}
+
+function close() {
+  open = false;
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  if (e.key === "Escape" && open) {
+    e.stopPropagation();
+    close();
+  }
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    e.stopPropagation();
+    toggle();
+  }
+}
+
+$effect(() => {
+  if (!open) return;
+
+  function handleClickOutside(e: MouseEvent) {
+    if (containerEl && !containerEl.contains(e.target as Node)) {
+      close();
+    }
+  }
+
+  document.addEventListener("mousedown", handleClickOutside);
+  return () => document.removeEventListener("mousedown", handleClickOutside);
+});
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  bind:this={containerEl}
+  class="relative inline-block"
+  onkeydown={handleKeydown}
+>
+  <!-- svelte-ignore a11y_click_events_have_key_events -->
+  <div onclick={toggle} role="button" tabindex="0" aria-expanded={open}>
+    {@render trigger()}
+  </div>
+
+  {#if open}
+    <div
+      class={cn(
+        "absolute top-full mt-1 z-50 min-w-[8rem] overflow-hidden rounded-xl py-1",
+        "bg-white/95 dark:bg-zinc-900/95 backdrop-blur-sm shadow-lg border border-zinc-200/40 dark:border-zinc-700/40",
+        align === "end" ? "right-0" : "left-0",
+        contentClass,
+      )}
+    >
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<script lang="ts" module>
+  export { default as DropdownMenuItem } from "./DropdownMenuItem.svelte";
+  export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.svelte";
+</script>

package/src/components/ui/DropdownMenuItem.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import { cn } from "../../lib/utils";
+
+interface Props {
+  variant?: "default" | "destructive";
+  onselect?: () => void;
+  class?: string;
+  title?: string;
+  children: Snippet;
+}
+
+let {
+  variant = "default",
+  onselect,
+  class: className,
+  title,
+  children,
+}: Props = $props();
+</script>
+
+<button
+  type="button"
+  role="menuitem"
+  {title}
+  class={cn(
+    "w-full px-3 py-1.5 text-left text-sm outline-none select-none transition-colors duration-150 flex items-center gap-2 cursor-default",
+    variant === "default" &&
+      "text-zinc-600 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-100 focus-visible:bg-zinc-50 dark:focus-visible:bg-zinc-800 focus-visible:text-zinc-900 dark:focus-visible:text-zinc-100",
+    variant === "destructive" &&
+      "text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950 hover:text-red-700 dark:hover:text-red-300 focus-visible:bg-red-50 dark:focus-visible:bg-red-950 focus-visible:text-red-700 dark:focus-visible:text-red-300",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+    className,
+  )}
+  onclick={() => onselect?.()}
+>
+  {@render children()}
+</button>

package/src/components/ui/DropdownMenuSeparator.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { cn } from "../../lib/utils";
+
+interface Props {
+  class?: string;
+}
+
+let { class: className }: Props = $props();
+</script>
+
+<div class={cn("my-1 h-px bg-zinc-100 dark:bg-zinc-800", className)}></div>

package/src/components/ui/Text.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+import type { Snippet } from "svelte";
+import { cn } from "../../lib/utils";
+import { FontFamilies } from "../../schema";
+import { settings } from "../../stores/settings.svelte";
+
+const variantStyles = {
+  title:
+    "text-lg font-semibold tracking-tight text-zinc-900 dark:text-zinc-100",
+  section: "text-sm font-medium text-zinc-900 dark:text-zinc-100",
+  subsection: "text-xs font-medium text-zinc-700 dark:text-zinc-300",
+  overline:
+    "text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wider",
+  body: "text-sm text-zinc-600 dark:text-zinc-400",
+  caption: "text-xs text-zinc-500 dark:text-zinc-400",
+  micro: "text-[10px] text-zinc-400 dark:text-zinc-500",
+} as const;
+
+type TextVariant = keyof typeof variantStyles;
+
+interface Props {
+  variant?: TextVariant;
+  as?: "p" | "span" | "div" | "h1" | "h2" | "h3" | "label" | "pre";
+  class?: string;
+  children: Snippet;
+}
+
+let {
+  variant = "body",
+  as = "p",
+  class: className,
+  children,
+}: Props = $props();
+
+let fontClass = $derived(
+  settings.fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif",
+);
+</script>
+
+<svelte:element this={as} class={cn(fontClass, variantStyles[variant], className)}>
+  {@render children()}
+</svelte:element>

package/src/env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="bun" />
+
+declare module "*.css" {
+  const content: string;
+  export default content;
+}

package/src/index.css

@@ -101,8 +101,8 @@ html {
   --comment-color-3-bg-focused: rgba(205, 145, 155, 0.65);
   --comment-color-3-border: #b86b78;
 
-  /* Pending - neutral gray */
-  --pending-bg: rgba(180, 180, 180, 0.3);
+  /* Pending - warm amber tint (matches comment highlight palette) */
+  --pending-bg: rgba(245, 222, 160, 0.45);
 }
 
 .dark {
@@ -151,127 +151,38 @@ html {
   --comment-color-3-bg-focused: rgba(184, 107, 120, 0.55);
   --comment-color-3-border: #d08a98;
 
-  --pending-bg: rgba(100, 100, 100, 0.3);
+  --pending-bg: rgba(202, 168, 74, 0.35);
 }
 
 /* ========================================
-   Comment Highlight Styles
+   Comment Highlight Styles (CSS Custom Highlight API)
    ======================================== */
 
-/* Base highlight - subtle by default */
-mark[data-comment-id] {
-  background-color: var(--highlight-bg, var(--comment-color-0-bg));
-  cursor: pointer;
-  transition:
-    background-color 150ms ease,
-    opacity 150ms ease;
-}
-
-/* Color variants based on data-color-index */
-mark[data-comment-id][data-color-index="0"] {
-  --highlight-bg: var(--comment-color-0-bg);
-  --highlight-bg-focused: var(--comment-color-0-bg-focused);
-  --highlight-border: var(--comment-color-0-border);
-}
-
-mark[data-comment-id][data-color-index="1"] {
-  --highlight-bg: var(--comment-color-1-bg);
-  --highlight-bg-focused: var(--comment-color-1-bg-focused);
-  --highlight-border: var(--comment-color-1-border);
-}
-
-mark[data-comment-id][data-color-index="2"] {
-  --highlight-bg: var(--comment-color-2-bg);
-  --highlight-bg-focused: var(--comment-color-2-bg-focused);
-  --highlight-border: var(--comment-color-2-border);
-}
-
-mark[data-comment-id][data-color-index="3"] {
-  --highlight-bg: var(--comment-color-3-bg);
-  --highlight-bg-focused: var(--comment-color-3-bg-focused);
-  --highlight-border: var(--comment-color-3-border);
-}
-
-/* Focused state - this highlight is hovered */
-mark[data-comment-id][data-focused="true"] {
-  background-color: var(
-    --highlight-bg-focused,
-    var(--comment-color-0-bg-focused)
-  );
-}
-
-/* Hover on highlight itself */
-mark[data-comment-id]:hover {
-  background-color: var(
-    --highlight-bg-focused,
-    var(--comment-color-0-bg-focused)
-  );
-}
-
-/* ========================================
-   Bracket Mode for Long Selections
-   ======================================== */
-
-/* Container for bracket-mode highlights */
-mark[data-comment-id][data-bracket-mode="true"] {
-  background-color: transparent;
-  position: relative;
-}
-
-/* Only show background on first segment in bracket mode */
-mark[data-comment-id][data-bracket-start="true"] {
-  background-color: var(--highlight-bg, var(--comment-color-0-bg));
-  border-radius: 2px 2px 0 0;
-}
-
-/* Focused bracket mode shows full highlight */
-mark[data-comment-id][data-bracket-mode="true"][data-focused="true"],
-mark[data-comment-id][data-bracket-mode="true"]:hover {
-  background-color: var(
-    --highlight-bg-focused,
-    var(--comment-color-0-bg-focused)
-  );
+/* Color variants — paint-time only, zero DOM mutations */
+::highlight(comment-color-0) {
+  background-color: var(--comment-color-0-bg);
 }
 
-/* Gutter line for bracket mode */
-.bracket-gutter-line {
-  position: absolute;
-  left: -20px;
-  width: 2px;
-  background-color: var(--bracket-color, var(--comment-color-0-border));
-  border-radius: 1px;
-  opacity: 0.6;
-  transition: opacity 150ms ease;
-  pointer-events: none;
+::highlight(comment-color-1) {
+  background-color: var(--comment-color-1-bg);
 }
 
-.bracket-gutter-line[data-focused="true"],
-.bracket-gutter-line:hover {
-  opacity: 1;
+::highlight(comment-color-2) {
+  background-color: var(--comment-color-2-bg);
 }
 
-/* Bracket markers */
-.bracket-marker {
-  position: absolute;
-  left: -24px;
-  font-family: monospace;
-  font-size: 10px;
-  color: var(--bracket-color, var(--comment-color-0-border));
-  opacity: 0.6;
-  pointer-events: none;
-  transition: opacity 150ms ease;
+::highlight(comment-color-3) {
+  background-color: var(--comment-color-3-bg);
 }
 
-.bracket-marker-start {
-  top: -2px;
+/* Focused state — higher priority, overrides color group */
+::highlight(comment-focused) {
+  background-color: var(--comment-color-0-bg-focused);
 }
 
-.bracket-marker-end {
-  bottom: -2px;
-}
-
-.bracket-marker[data-focused="true"] {
-  opacity: 1;
+/* Pending selection highlight — neutral gray */
+::highlight(pending-selection) {
+  background-color: var(--pending-bg);
 }
 
 /* ========================================
@@ -301,64 +212,6 @@ mark[data-comment-id][data-bracket-mode="true"]:hover {
   opacity: 0.7;
 }
 
-/* Pending selection highlight - neutral gray */
-mark[data-pending] {
-  background-color: var(--pending-bg);
-  cursor: text;
-}
-
-/* Ensure highlights are visible in all contexts including headings */
-.prose mark[data-pending],
-.prose h1 mark[data-pending],
-.prose h2 mark[data-pending],
-.prose h3 mark[data-pending],
-.prose h4 mark[data-pending],
-.prose h5 mark[data-pending],
-.prose h6 mark[data-pending] {
-  background-color: var(--pending-bg) !important;
-  display: inline !important;
-}
-
-/* Ensure comment highlights are visible inside headings (prose overrides) */
-.prose h1 mark[data-comment-id],
-.prose h2 mark[data-comment-id],
-.prose h3 mark[data-comment-id],
-.prose h4 mark[data-comment-id],
-.prose h5 mark[data-comment-id],
-.prose h6 mark[data-comment-id] {
-  background-color: var(--highlight-bg, var(--comment-color-0-bg)) !important;
-  display: inline !important;
-}
-
-/* Bracket mode in headings - override transparent background */
-.prose h1 mark[data-comment-id][data-bracket-mode="true"],
-.prose h2 mark[data-comment-id][data-bracket-mode="true"],
-.prose h3 mark[data-comment-id][data-bracket-mode="true"],
-.prose h4 mark[data-comment-id][data-bracket-mode="true"],
-.prose h5 mark[data-comment-id][data-bracket-mode="true"],
-.prose h6 mark[data-comment-id][data-bracket-mode="true"] {
-  background-color: var(--highlight-bg, var(--comment-color-0-bg)) !important;
-}
-
-/* Hover state for comment highlights in headings */
-.prose h1 mark[data-comment-id]:hover,
-.prose h2 mark[data-comment-id]:hover,
-.prose h3 mark[data-comment-id]:hover,
-.prose h4 mark[data-comment-id]:hover,
-.prose h5 mark[data-comment-id]:hover,
-.prose h6 mark[data-comment-id]:hover,
-.prose h1 mark[data-comment-id][data-focused="true"],
-.prose h2 mark[data-comment-id][data-focused="true"],
-.prose h3 mark[data-comment-id][data-focused="true"],
-.prose h4 mark[data-comment-id][data-focused="true"],
-.prose h5 mark[data-comment-id][data-focused="true"],
-.prose h6 mark[data-comment-id][data-focused="true"] {
-  background-color: var(
-    --highlight-bg-focused,
-    var(--comment-color-0-bg-focused)
-  ) !important;
-}
-
 /* Toast animation */
 [data-sonner-toast] {
   animation: toast-in 0.2s ease-out;
@@ -579,6 +432,23 @@ mark[data-pending] {
   margin: 1.75em 0;
 }
 
+/* Shiki syntax-highlighted code blocks (server-rendered) */
+.prose pre.shiki {
+  margin: 1.5em 0;
+  border-radius: 0.5em;
+  font-size: 0.875em;
+  padding: 1em;
+  overflow-x: auto;
+}
+
+.prose pre.shiki code {
+  background: transparent;
+  padding: 0;
+  font-size: inherit;
+  font-weight: 400;
+  color: inherit;
+}
+
 .prose pre code {
   background: transparent;
   padding: 0;

package/src/lib/__fixtures__/bench-data.ts

@@ -1,8 +1,6 @@
-import type { Comment, CommentFile } from "../../types";
+import type { Comment, CommentFile } from "../../schema";
 import { serializeComments } from "../comment-storage";
 
-// --- Document fixtures ---
-
 function generateMarkdownDoc(lineCount: number): string {
   const lines: string[] = [];
   lines.push("# Performance Test Document");
@@ -21,13 +19,11 @@ function generateMarkdownDoc(lineCount: number): string {
     );
     lines.push("");
 
-    // Add a list
     for (let j = 1; j <= 3; j++) {
       lines.push(`- Item ${j} in section ${sectionNum}`);
     }
     lines.push("");
 
-    // Add a code block
     lines.push("```typescript");
     lines.push(`function section${sectionNum}() {`);
     lines.push(`  const value = ${sectionNum} * 42;`);
@@ -36,13 +32,11 @@ function generateMarkdownDoc(lineCount: number): string {
     lines.push("```");
     lines.push("");
 
-    // Add a paragraph
     lines.push(
       `The conclusion of section ${sectionNum} summarizes the key findings and provides actionable recommendations for the reader to follow.`,
     );
     lines.push("");
 
-    // Add a table every few sections
     if (sectionNum % 3 === 0) {
       lines.push("| Column A | Column B | Column C |");
       lines.push("|----------|----------|----------|");
@@ -65,11 +59,8 @@ export const SMALL_DOC = generateMarkdownDoc(30);
 export const MEDIUM_DOC = generateMarkdownDoc(150);
 export const LARGE_DOC = generateMarkdownDoc(300);
 
-// --- Comment fixtures ---
-
 function makeComment(index: number, doc: string): Comment {
   const lines = doc.split("\n");
-  // Distribute comments across the document
   const targetLine = Math.min(
     Math.floor((index + 1) * (lines.length / 55)),
     lines.length - 1,
@@ -81,7 +72,6 @@ function makeComment(index: number, doc: string): Comment {
       ? lineText.slice(0, Math.min(30, lineText.length))
       : lineText || "default text";
 
-  // Calculate actual character offset
   let startOffset = 0;
   for (let i = 0; i < targetLine; i++) {
     startOffset += lines[i].length + 1; // +1 for \n
@@ -92,7 +82,6 @@ function makeComment(index: number, doc: string): Comment {
     id: `bench${String(index).padStart(3, "0")}`,
     selectedText,
     comment: `Benchmark comment ${index}: This text needs to be reviewed and updated.`,
-    createdAt: "2025-01-01T00:00:00.000Z",
     startOffset,
     endOffset,
     lineHint: `L${targetLine + 1}`,
@@ -107,8 +96,6 @@ export const COMMENTS_1 = makeComments(1);
 export const COMMENTS_10 = makeComments(10);
 export const COMMENTS_50 = makeComments(50);
 
-// --- Serialized comment file fixtures ---
-
 function makeCommentFile(comments: Comment[]): CommentFile {
   return {
     source: "/bench/test-doc.md",
@@ -125,43 +112,3 @@ export const COMMENT_FILE_OBJ_LARGE = makeCommentFile(COMMENTS_50);
 export const COMMENT_FILE_SMALL = serializeComments(COMMENT_FILE_OBJ_SMALL);
 export const COMMENT_FILE_MEDIUM = serializeComments(COMMENT_FILE_OBJ_MEDIUM);
 export const COMMENT_FILE_LARGE = serializeComments(COMMENT_FILE_OBJ_LARGE);
-
-// --- Highlight position fixtures ---
-
-export function makeHighlightPositions(count: number): Record<string, number> {
-  const positions: Record<string, number> = {};
-  for (let i = 0; i < count; i++) {
-    // ~200px spacing with clustering every 3rd note for overlap scenarios
-    positions[`c${i}`] = i * 200 + (i % 3 === 0 ? 50 : 0);
-  }
-  return positions;
-}
-
-// --- HTML fixture ---
-
-function generateHtmlDoc(): string {
-  const parts: string[] = [
-    "<!DOCTYPE html>",
-    "<html><head>",
-    "<style>.main { color: red; font-size: 16px; }</style>",
-    "<script>console.log('test script');</script>",
-    "</head><body>",
-  ];
-
-  for (let i = 0; i < 30; i++) {
-    parts.push(`<section id="s${i}">`);
-    parts.push(`<h2>Section ${i}</h2>`);
-    parts.push(
-      `<p>Paragraph with &amp; entities &lt;and&gt; special &quot;chars&quot; in section ${i}.</p>`,
-    );
-    parts.push(
-      `<ul><li>Item ${i}.1</li><li>Item ${i}.2</li><li>Item ${i}.3</li></ul>`,
-    );
-    parts.push("</section>");
-  }
-
-  parts.push("</body></html>");
-  return parts.join("\n");
-}
-
-export const HTML_DOC = generateHtmlDoc();