@peaske7/readit 0.2.1 → 0.3.0-rc.1

package/src/components/TableOfContents.svelte

@@ -1,125 +0,0 @@
-<script lang="ts">
-import type { Heading } from "../lib/headings";
-import { cn } from "../lib/utils";
-import { FontFamilies } from "../schema";
-import { settings } from "../stores/settings.svelte";
-
-interface Props {
-  headings: Heading[];
-  onheadingclick: (id: string) => void;
-}
-
-let { headings, onheadingclick }: Props = $props();
-
-let fontClass = $derived(
-  settings.fontFamily === FontFamilies.SANS_SERIF ? "font-sans" : "font-serif",
-);
-
-let expandedH2s = $state(new Set<string>());
-
-let h2sWithChildren = $derived.by(() => {
-  const result = new Set<string>();
-  let currentH2: string | null = null;
-
-  for (const heading of headings) {
-    if (heading.level === 2) {
-      currentH2 = heading.id;
-    } else if (heading.level > 2 && currentH2) {
-      result.add(currentH2);
-    } else if (heading.level === 1) {
-      currentH2 = null;
-    }
-  }
-  return result;
-});
-
-let visibleHeadings = $derived.by(() => {
-  let currentH2: string | null = null;
-
-  return headings.filter((heading) => {
-    if (heading.level <= 2) {
-      if (heading.level === 2) {
-        currentH2 = heading.id;
-      } else {
-        currentH2 = null;
-      }
-      return true;
-    }
-
-    return currentH2 !== null && expandedH2s.has(currentH2);
-  });
-});
-
-function toggleH2(id: string) {
-  const next = new Set(expandedH2s);
-  if (next.has(id)) {
-    next.delete(id);
-  } else {
-    next.add(id);
-  }
-  expandedH2s = next;
-}
-
-let observedActiveId = $state<string | null>(null);
-
-$effect(() => {
-  if (headings.length === 0) return;
-
-  const headingElements = headings
-    .map((h) => document.getElementById(h.id))
-    .filter((el): el is HTMLElement => el !== null);
-
-  if (headingElements.length === 0) return;
-
-  const observer = new IntersectionObserver(
-    (entries) => {
-      for (const entry of entries) {
-        if (entry.isIntersecting) {
-          observedActiveId = entry.target.id;
-        }
-      }
-    },
-    {
-      rootMargin: "-80px 0px -60% 0px",
-      threshold: 0,
-    },
-  );
-
-  for (const el of headingElements) {
-    observer.observe(el);
-  }
-
-  return () => observer.disconnect();
-});
-
-let effectiveActiveId = $derived(observedActiveId);
-</script>
-
-{#if headings.length > 0}
-  <nav class={cn("toc", fontClass)} aria-label="Table of contents">
-    {#each visibleHeadings as heading (heading.id)}
-      {@const hasChildren =
-        heading.level === 2 && h2sWithChildren.has(heading.id)}
-      {@const isExpanded = expandedH2s.has(heading.id)}
-      <a
-        href={`#${heading.id}`}
-        title={heading.text}
-        class={`toc-item toc-level-${heading.level}${effectiveActiveId === heading.id ? " toc-active" : ""}`}
-        onclick={(e) => {
-          e.preventDefault();
-          if (hasChildren) {
-            toggleH2(heading.id);
-          }
-          onheadingclick(heading.id);
-        }}
-      >
-        {heading.text}
-        {#if hasChildren}
-          <span class="toc-toggle ml-1 opacity-40">
-            {isExpanded ? "\u25BE" : "\u25B8"}
-          </span>
-        {/if}
-      </a>
-    {/each}
-  </nav>
-{/if}

package/src/components/ui/ActionLink.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-import type { Snippet } from "svelte";
-import { cn } from "../../lib/utils";
-
-const variantStyles = {
-  default: "hover:text-zinc-600",
-  destructive: "hover:text-red-500",
-} as const;
-
-type ActionLinkVariant = keyof typeof variantStyles;
-
-interface Props {
-  variant?: ActionLinkVariant;
-  onclick?: (e: MouseEvent) => void;
-  class?: string;
-  disabled?: boolean;
-  children: Snippet;
-}
-
-let {
-  variant = "default",
-  onclick,
-  class: className,
-  disabled = false,
-  children,
-}: Props = $props();
-</script>
-
-<button
-  type="button"
-  {disabled}
-  class={cn(
-    "cursor-pointer transition-colors duration-150",
-    variantStyles[variant],
-    className,
-  )}
-  {onclick}
->
-  {@render children()}
-</button>

package/src/components/ui/Button.svelte

@@ -1,53 +0,0 @@
-<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

@@ -1,97 +0,0 @@
-<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

@@ -1,85 +0,0 @@
-<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

@@ -1,38 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-<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

@@ -1,42 +0,0 @@
-<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

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