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

package/src/components/ShortcutCapture.svelte

@@ -1,82 +0,0 @@
-<script lang="ts">
-import { onMount } from "svelte";
-import {
-  eventToBinding,
-  formatBinding,
-  isReservedBinding,
-} from "../lib/shortcut-registry";
-import { cn } from "../lib/utils";
-import type { ShortcutBinding } from "../schema";
-import { t } from "../stores/locale.svelte";
-
-interface Props {
-  oncapture: (binding: ShortcutBinding) => void;
-  oncancel: () => void;
-}
-
-let { oncapture, oncancel }: Props = $props();
-
-let captureEl: HTMLDivElement | undefined = $state();
-let error = $state<string | null>(null);
-const isMac = navigator.platform.includes("Mac");
-
-function handleKeyDown(e: KeyboardEvent) {
-  e.preventDefault();
-  e.stopPropagation();
-
-  if (
-    e.key === "Alt" ||
-    e.key === "Shift" ||
-    e.key === "Control" ||
-    e.key === "Meta"
-  ) {
-    return;
-  }
-
-  if (e.key === "Escape" && !e.altKey && !e.metaKey && !e.shiftKey) {
-    oncancel();
-    return;
-  }
-
-  const binding = eventToBinding(e);
-
-  if (isReservedBinding(binding, isMac)) {
-    error = t("shortcutCapture.reserved", {
-      binding: formatBinding(binding, isMac),
-    });
-    return;
-  }
-
-  error = null;
-  oncapture(binding);
-}
-
-onMount(() => {
-  captureEl?.focus();
-});
-</script>
-
-<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
-<div
-  role="button"
-  aria-label={t("shortcutCapture.ariaLabel")}
-  bind:this={captureEl}
-  tabindex={0}
-  onkeydown={handleKeyDown}
-  onblur={oncancel}
-  class={cn(
-    "inline-flex items-center gap-1.5 px-2 py-1 rounded-md text-xs font-medium",
-    "bg-amber-50 dark:bg-amber-900/30",
-    "border border-amber-300 dark:border-amber-600",
-    "text-amber-700 dark:text-amber-300",
-    "outline-none ring-2 ring-amber-400/50",
-    "animate-pulse",
-  )}
->
-  <span>{t("shortcutCapture.pressKeys")}</span>
-  {#if error}
-    <span class="text-red-500 dark:text-red-400 text-[10px] animate-none"
-      >{error}</span
-    >
-  {/if}
-</div>

package/src/components/ShortcutList.svelte

@@ -1,145 +0,0 @@
-<script lang="ts">
-import {
-  bindingsEqual,
-  formatBinding,
-  SHORTCUT_GROUPS,
-  type ShortcutDefinition,
-} from "../lib/shortcut-registry";
-import { cn } from "../lib/utils";
-import type { ShortcutBinding } from "../schema";
-import { t } from "../stores/locale.svelte";
-import {
-  resetToDefaults,
-  shortcutState,
-  toggleEnabled,
-  updateBinding,
-} from "../stores/shortcuts.svelte";
-import ShortcutCapture from "./ShortcutCapture.svelte";
-import Button from "./ui/Button.svelte";
-import Text from "./ui/Text.svelte";
-
-const isMac = navigator.platform.includes("Mac");
-let capturingId = $state<string | null>(null);
-
-function handleCapture(id: string, binding: ShortcutBinding) {
-  capturingId = null;
-  updateBinding(id, binding);
-}
-
-function handleCancelCapture() {
-  capturingId = null;
-}
-
-function startCapture(id: string) {
-  capturingId = id;
-}
-
-function getShortcut(id: string): ShortcutDefinition | undefined {
-  return shortcutState.shortcuts.find((s) => s.id === id);
-}
-
-function isModified(shortcut: ShortcutDefinition): boolean {
-  return (
-    !shortcut.enabled ||
-    !bindingsEqual(shortcut.binding, shortcut.defaultBinding)
-  );
-}
-
-let hasModifications = $derived(
-  shortcutState.shortcuts.some((s) => isModified(s)),
-);
-</script>
-
-<div class="space-y-4">
-  {#each SHORTCUT_GROUPS as group (group.label)}
-    <div>
-      <Text variant="caption" as="div" class="mb-2 font-medium">
-        {t(group.label)}
-      </Text>
-
-      <div class="space-y-1">
-        {#each group.ids as id (id)}
-          {@const shortcut = getShortcut(id)}
-          {#if shortcut}
-            <div
-              class={cn(
-                "flex items-center gap-3 px-2 py-1.5 rounded-lg",
-                "hover:bg-zinc-50 dark:hover:bg-zinc-800/50",
-                !shortcut.enabled && "opacity-50",
-              )}
-            >
-              <div class="flex-1 min-w-0">
-                <div class="text-xs text-zinc-700 dark:text-zinc-300">
-                  {t(shortcut.label)}
-                </div>
-              </div>
-
-              <div class="flex items-center gap-2">
-                {#if capturingId === shortcut.id}
-                  <ShortcutCapture
-                    oncapture={(binding) =>
-                      handleCapture(shortcut.id, binding)}
-                    oncancel={handleCancelCapture}
-                  />
-                {:else}
-                  <button
-                    type="button"
-                    onclick={() => startCapture(shortcut.id)}
-                    class={cn(
-                      "inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[11px] font-mono",
-                      "bg-zinc-100 dark:bg-zinc-800",
-                      "border border-zinc-200 dark:border-zinc-700",
-                      "text-zinc-600 dark:text-zinc-400",
-                      "hover:bg-zinc-200 dark:hover:bg-zinc-700",
-                      "transition-colors cursor-pointer",
-                      isModified(shortcut) &&
-                        "ring-1 ring-blue-400/50 dark:ring-blue-500/50",
-                    )}
-                  >
-                    {formatBinding(shortcut.binding, isMac)}
-                  </button>
-                {/if}
-
-                <label
-                  class="relative inline-flex items-center cursor-pointer"
-                  title={t("shortcuts.enableDisable")}
-                >
-                  <input
-                    type="checkbox"
-                    checked={shortcut.enabled}
-                    onchange={() => toggleEnabled(shortcut.id)}
-                    class="sr-only peer"
-                  />
-                  <div
-                    class={cn(
-                      "w-7 h-4 rounded-full transition-colors",
-                      "bg-zinc-200 dark:bg-zinc-700",
-                      "peer-checked:bg-blue-500 dark:peer-checked:bg-blue-600",
-                      "after:content-[''] after:absolute after:top-0.5 after:start-[2px]",
-                      "after:bg-white after:rounded-full after:size-3",
-                      "after:transition-all after:duration-150",
-                      "peer-checked:after:translate-x-full peer-checked:after:translate-x-3",
-                    )}
-                  ></div>
-                </label>
-              </div>
-            </div>
-          {/if}
-        {/each}
-      </div>
-    </div>
-  {/each}
-
-  {#if hasModifications}
-    <div class="pt-2 border-t border-zinc-100 dark:border-zinc-800">
-      <Button
-        variant="ghost"
-        size="sm"
-        onclick={resetToDefaults}
-        class="text-xs"
-      >
-        {t("shortcuts.resetToDefaults")}
-      </Button>
-    </div>
-  {/if}
-</div>

package/src/components/TabBar.svelte

@@ -1,52 +0,0 @@
-<script lang="ts">
-import { cn } from "../lib/utils";
-import { app, closeDocument, setActiveDocument } from "../stores/app.svelte";
-</script>
-
-{#if app.documentOrder.length > 1}
-  <div
-    class="flex border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 px-2 overflow-x-auto"
-    role="tablist"
-  >
-    {#each app.documentOrder as filePath (filePath)}
-      {@const docState = app.documents.get(filePath)}
-      {@const isActive = filePath === app.activeDocumentPath}
-
-      {#if docState}
-        <div
-          role="tab"
-          tabindex={isActive ? 0 : -1}
-          aria-selected={isActive}
-          class={cn(
-            "flex items-center gap-1.5 px-3 py-1.5 text-sm border-b-2 whitespace-nowrap cursor-pointer select-none",
-            isActive
-              ? "border-zinc-900 dark:border-zinc-100 text-zinc-900 dark:text-zinc-100"
-              : "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-800",
-          )}
-          onclick={() => setActiveDocument(filePath)}
-          onkeydown={(e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              setActiveDocument(filePath);
-            }
-          }}
-        >
-          <span>{docState.document.fileName}</span>
-          <button
-            type="button"
-            aria-label="Close tab"
-            class="ml-1 rounded p-0.5 hover:bg-zinc-200 dark:hover:bg-zinc-700"
-            onclick={(e) => {
-              e.stopPropagation();
-              closeDocument(filePath);
-            }}
-          >
-            <svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
-              <path d="M18 6 6 18M6 6l12 12"></path>
-            </svg>
-          </button>
-        </div>
-      {/if}
-    {/each}
-  </div>
-{/if}

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>