@tinytars/frame 0.1.1 → 0.1.3

package/AttachmentStrip.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  import type { Attachment } from "./attachment-types";
+  import AttachmentViewer from "./AttachmentViewer.svelte";
+
+  // The one shared display for a leaf's attachments[]: a row of small thumbnail chips (image
+  // preview, or a document glyph for anything else), each opening the in-app viewer
+  // (AttachmentViewer.svelte) instead of a bare new-tab link. Generalizes each caller's own
+  // bespoke img-strip snippets, which this replaces.
+  //
+  // attachmentUrl is injected rather than imported — this package doesn't know the host app's API
+  // route convention, only that one exists.
+  interface Props {
+    attachments: Attachment[];
+    clientId?: string | null;
+    attachmentUrl: (clientId: string, key: string) => string;
+    productName: string;
+    onRemove?: (a: Attachment) => void;
+  }
+  let { attachments, clientId = null, attachmentUrl, productName, onRemove }: Props = $props();
+
+  let openIndex = $state<number | null>(null);
+
+  function chipTitle(a: Attachment): string {
+    if (a.extracted?.error) return `${a.name} — couldn't be read: ${a.extracted.error}`;
+    if (a.extracted?.kind) return `${a.name} — read as ${a.extracted.kind}`;
+    return a.name;
+  }
+</script>
+
+{#if attachments.length > 0 && clientId}
+  <div class="attachment-strip">
+    {#each attachments as a, i (a.key)}
+      <div class="attachment-chip">
+        <button type="button" class="attachment-link" onclick={() => (openIndex = i)} title={chipTitle(a)}>
+          {#if a.mediaType.startsWith("image/")}
+            <img src={attachmentUrl(clientId, a.key)} alt="" loading="lazy" />
+          {:else}
+            <span class="attachment-glyph" aria-hidden="true">📄</span>
+          {/if}
+        </button>
+        <!-- A document that was read contributes its text to whatever the assistant answers next;
+             one that failed contributes nothing at all. That difference is invisible without a
+             mark, and a silently-ignored document is exactly the failure this milestone set out
+             to end. -->
+        {#if a.extracted?.error}
+          <span class="attachment-badge failed" title="Couldn't read this document: {a.extracted.error}">!</span>
+        {:else if a.extracted && a.extracted.chars > 0}
+          <span class="attachment-badge read" title="Read — {a.extracted.chars.toLocaleString()} characters available to {productName}">✓</span>
+        {/if}
+        {#if onRemove}
+          <button type="button" class="attachment-remove" onclick={() => onRemove(a)} aria-label="Remove {a.name}">✕</button>
+        {/if}
+      </div>
+    {/each}
+  </div>
+  {#if openIndex !== null}
+    <AttachmentViewer {attachments} bind:index={openIndex} {clientId} {attachmentUrl} onClose={() => (openIndex = null)} />
+  {/if}
+{/if}
+
+<style>
+  .attachment-strip { display: flex; gap: 0.4rem; overflow-x: auto; margin-top: 0.4rem; padding-bottom: 0.1rem; }
+  .attachment-chip { position: relative; flex: none; }
+  .attachment-link {
+    display: flex; align-items: center; justify-content: center;
+    width: 56px; height: 56px; border-radius: 6px; border: 1px solid var(--border);
+    background: var(--band); overflow: hidden; padding: 0; cursor: pointer; font: inherit;
+  }
+  .attachment-link:hover { border-color: var(--accent); }
+  .attachment-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .attachment-glyph { font-size: 1.4rem; }
+  .attachment-remove {
+    position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%;
+    border: 1px solid var(--border); background: white; color: var(--muted); font-size: 0.65rem;
+    line-height: 1; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center;
+  }
+  .attachment-remove:hover { color: var(--alert); border-color: var(--alert); }
+  .attachment-badge {
+    position: absolute; bottom: -4px; left: -4px; min-width: 16px; height: 16px; border-radius: 50%;
+    border: 1px solid var(--border); background: var(--bg); font-size: 0.6rem; line-height: 1;
+    display: flex; align-items: center; justify-content: center; padding: 0 2px;
+  }
+  .attachment-badge.read { color: var(--accent); }
+  .attachment-badge.failed { color: var(--alert); border-color: var(--alert); }
+</style>

package/AttachmentViewer.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import type { Attachment } from "./attachment-types";
+  import Modal from "./Modal.svelte";
+  import { openPdf, type PdfDoc } from "./pdf-render";
+
+  // The in-app viewer every attachment click opens (AttachmentStrip.svelte) instead
+  // of a bare new-tab link. Images render directly; PDFs render page-by-page onto a <canvas> via
+  // the shared lazy pdfjs loader (pdf-render.ts) so the ~500 KB pdfjs bundle only loads when a PDF
+  // is actually being viewed. This is the "see -> scroll pages -> Download" path an ER doctor
+  // needs, with no menu digging.
+  interface Props {
+    attachments: Attachment[];
+    index: number;
+    clientId: string;
+    attachmentUrl: (clientId: string, key: string) => string;
+    onClose: () => void;
+  }
+  let { attachments, index = $bindable(), clientId, attachmentUrl, onClose }: Props = $props();
+
+  let current = $derived(attachments[index]);
+  let isImage = $derived(current?.mediaType.startsWith("image/") ?? false);
+  let isPdf = $derived(current?.mediaType === "application/pdf");
+
+  function go(delta: number) {
+    index = Math.max(0, Math.min(attachments.length - 1, index + delta));
+  }
+  function onKeydown(e: KeyboardEvent) {
+    if (e.key === "ArrowLeft") go(-1);
+    else if (e.key === "ArrowRight") go(1);
+  }
+
+  // PDF page state — reset whenever the current attachment changes.
+  let pdfDoc = $state<PdfDoc | null>(null);
+  let pdfPage = $state(1);
+  let pdfError = $state<string | null>(null);
+  let canvasEl = $state<HTMLCanvasElement | undefined>();
+
+  $effect(() => {
+    pdfDoc = null;
+    pdfPage = 1;
+    pdfError = null;
+    if (!isPdf || !current) return;
+    const url = attachmentUrl(clientId, current.key);
+    openPdf(url)
+      .then((doc) => { pdfDoc = doc; })
+      .catch((e) => { pdfError = e instanceof Error ? e.message : "Couldn't open this PDF."; });
+  });
+
+  $effect(() => {
+    if (pdfDoc && canvasEl) pdfDoc.renderPage(pdfPage, canvasEl);
+  });
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+<Modal label={current?.name ?? "Attachment"} onClose={onClose} wide>
+  <div class="viewer">
+    <div class="viewer-head">
+      <span class="viewer-name">{current?.name}</span>
+      <a class="viewer-download" href={clientId && current ? attachmentUrl(clientId, current.key) : "#"} download={current?.name} target="_blank" rel="noopener">⤓ Download</a>
+    </div>
+    <div class="viewer-body">
+      {#if attachments.length > 1}
+        <button type="button" class="viewer-nav prev" disabled={index === 0} onclick={() => go(-1)} aria-label="Previous attachment">‹</button>
+      {/if}
+      {#if isImage && current}
+        <img class="viewer-image" src={attachmentUrl(clientId, current.key)} alt={current.name} />
+      {:else if isPdf}
+        {#if pdfError}
+          <p class="viewer-error">{pdfError}</p>
+        {:else if !pdfDoc}
+          <p class="viewer-loading">Loading PDF…</p>
+        {:else}
+          <canvas bind:this={canvasEl}></canvas>
+        {/if}
+      {:else}
+        <p class="viewer-unsupported">No preview available for this file — use Download.</p>
+      {/if}
+      {#if attachments.length > 1}
+        <button type="button" class="viewer-nav next" disabled={index === attachments.length - 1} onclick={() => go(1)} aria-label="Next attachment">›</button>
+      {/if}
+    </div>
+    {#if isPdf && pdfDoc && pdfDoc.numPages > 1}
+      <div class="viewer-pages">
+        <button type="button" class="btn" disabled={pdfPage <= 1} onclick={() => (pdfPage = Math.max(1, pdfPage - 1))}>‹ Page</button>
+        <span>Page {pdfPage} of {pdfDoc.numPages}</span>
+        <button type="button" class="btn" disabled={pdfPage >= pdfDoc.numPages} onclick={() => (pdfPage = Math.min(pdfDoc!.numPages, pdfPage + 1))}>Page ›</button>
+      </div>
+    {/if}
+    {#if attachments.length > 1}
+      <p class="viewer-count">{index + 1} of {attachments.length}</p>
+    {/if}
+  </div>
+</Modal>
+
+<style>
+  .viewer { display: flex; flex-direction: column; gap: 0.75rem; }
+  .viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-right: 1.5rem; }
+  .viewer-name { font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .viewer-download { font-size: 0.85rem; color: var(--accent); white-space: nowrap; }
+  .viewer-body { position: relative; display: flex; align-items: center; justify-content: center; min-height: 300px; }
+  .viewer-image { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 6px; }
+  .viewer-body canvas { max-width: 100%; max-height: 70vh; border: 1px solid var(--border); border-radius: 4px; }
+  .viewer-loading, .viewer-error, .viewer-unsupported { color: var(--muted); font-size: 0.9rem; }
+  .viewer-error { color: var(--alert); }
+  .viewer-nav {
+    position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;
+    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: white;
+    font-size: 1.3rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
+  }
+  .viewer-nav:disabled { opacity: 0.3; cursor: not-allowed; }
+  .viewer-nav.prev { left: -0.5rem; }
+  .viewer-nav.next { right: -0.5rem; }
+  .viewer-pages { display: flex; align-items: center; justify-content: center; gap: 0.75rem; font-size: 0.85rem; }
+  .viewer-count { text-align: center; color: var(--muted); font-size: 0.8rem; margin: 0; }
+</style>

package/Button.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  // A hoisted ".btn"/".btn.primary" rule, now the component itself rather than a class-name
+  // convention. `class` carries a caller's own local variant (`.done`, `.del`, …) alongside the
+  // base classes this renders — those variants' rule bodies stay local to the caller, targeted
+  // with `:global()` since the element now lives in this component's scope, not the caller's.
+  interface Props {
+    class?: string;
+    primary?: boolean;
+    disabled?: boolean;
+    type?: "button" | "submit" | "reset";
+    onclick?: (e: MouseEvent) => void;
+    children: Snippet;
+    [key: string]: unknown;
+  }
+  let { class: extraClass = "", primary = false, disabled = false, type = "button", onclick, children, ...rest }: Props = $props();
+</script>
+
+<button {type} class="btn {extraClass}" class:primary {disabled} {onclick} {...rest}>{@render children()}</button>
+
+<style>
+  .btn { font: inherit; font-size: 0.9rem; border-radius: 6px; cursor: pointer; padding: 0.45rem 0.9rem; border: 1px solid var(--border); background: white; color: var(--fg); }
+  .btn.primary { border-color: var(--accent); background: var(--accent); color: white; }
+  .btn.primary:disabled { opacity: 0.5; cursor: default; }
+  @media (max-width: 640px) { .btn { min-height: 44px; } }
+</style>

package/DictateButton.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import { claimDictation, releaseDictation } from "./dictate-registry";
+
+  // SpeechRecognition (unlike SpeechSynthesis) isn't in TypeScript's own DOM lib — it's a
+  // non-standardized, Chromium/Safari-only API (Firefox has neither `SpeechRecognition` nor
+  // `webkitSpeechRecognition` at all). Minimal ambient shape for just what this component uses.
+  interface SpeechRecognitionResult { 0: { transcript: string }; isFinal: boolean }
+  interface SpeechRecognitionEvent extends Event { results: ArrayLike<SpeechRecognitionResult>; resultIndex: number }
+  interface SpeechRecognitionLike extends EventTarget {
+    continuous: boolean;
+    interimResults: boolean;
+    lang: string;
+    onresult: ((e: SpeechRecognitionEvent) => void) | null;
+    onerror: ((e: Event) => void) | null;
+    onend: (() => void) | null;
+    start(): void;
+    stop(): void;
+  }
+  type SpeechRecognitionCtor = new () => SpeechRecognitionLike;
+
+  function recognitionCtor(): SpeechRecognitionCtor | undefined {
+    if (typeof window === "undefined") return undefined;
+    const w = window as unknown as { SpeechRecognition?: SpeechRecognitionCtor; webkitSpeechRecognition?: SpeechRecognitionCtor };
+    return w.SpeechRecognition ?? w.webkitSpeechRecognition;
+  }
+  const supported = !!recognitionCtor();
+
+  // Dictation appends rather than replaces: never silently destroys something the user already
+  // typed. onResult fires once, with the accumulated final transcript, when the session ends
+  // (manual stop or the browser's own silence-timeout onend).
+  interface Props {
+    onResult: (text: string) => void;
+    lang?: string;
+    title?: string;
+  }
+  let { onResult, lang, title = "Dictate" }: Props = $props();
+
+  let listening = $state(false);
+  let error = $state<string | null>(null);
+  let recognition: SpeechRecognitionLike | null = null;
+  let finalText = "";
+
+  function stop() {
+    recognition?.stop();
+  }
+
+  function start() {
+    const Ctor = recognitionCtor();
+    if (!Ctor) return;
+    error = null;
+    finalText = "";
+    const r = new Ctor();
+    r.continuous = true;
+    r.interimResults = true;
+    if (lang) r.lang = lang;
+    r.onresult = (e) => {
+      for (let i = e.resultIndex; i < e.results.length; i++) {
+        const result = e.results[i];
+        if (result.isFinal) finalText = finalText ? `${finalText} ${result[0].transcript}` : result[0].transcript;
+      }
+    };
+    r.onerror = () => {
+      // Permission-denied or no-speech-detected both land here — surface a brief inline message
+      // rather than throwing; the session is already over by the time onerror fires.
+      error = "Couldn't hear you — check mic permission and try again.";
+    };
+    r.onend = () => {
+      listening = false;
+      releaseDictation(stop);
+      recognition = null;
+      if (finalText.trim()) onResult(finalText.trim());
+    };
+    recognition = r;
+    try {
+      claimDictation(stop);
+      r.start();
+      listening = true;
+    } catch {
+      // .start() throws synchronously if called while another recognition on the SAME
+      // instance is already active, or the browser denies it outright; fail soft, no crash.
+      error = "Dictation isn't available right now.";
+      listening = false;
+      releaseDictation(stop);
+      recognition = null;
+    }
+  }
+
+  function toggle() {
+    if (listening) stop();
+    else start();
+  }
+</script>
+
+{#if supported}
+  <button
+    type="button"
+    class="dictate-btn"
+    class:listening
+    {title}
+    aria-label={title}
+    aria-pressed={listening}
+    onmousedown={(e) => e.preventDefault()}
+    onclick={toggle}
+  >{listening ? "🔴" : "🎤"}</button>
+  {#if error}<span class="dictate-error">{error}</span>{/if}
+{/if}
+
+<style>
+  .dictate-btn {
+    flex-shrink: 0; border: none; background: none; cursor: pointer;
+    font-size: 1rem; line-height: 1; padding: 0.35rem; border-radius: 6px;
+    color: var(--muted);
+  }
+  .dictate-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--fg); }
+  .dictate-btn.listening {
+    color: var(--alert);
+    animation: dictate-pulse 1.2s ease-in-out infinite;
+  }
+  @keyframes dictate-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.45; }
+  }
+  .dictate-error { font-size: 0.72rem; color: var(--alert); margin-left: 0.3rem; }
+</style>

package/Field.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  // Replaces the ".field" label+span wrapper hoisted across a caller's own Add/Edit modals.
+  // `wide` fills its own grid row (`.field--wide`); `span` spans the whole grid (`.field--span`) —
+  // the two collided under one shared name for one caller and stay distinct props here for the
+  // same reason.
+  //
+  // Styled with :global() rather than Svelte's normal component-scoped CSS: a caller may also
+  // render a bare `class="field"` span directly in its own templates (a read-only display column
+  // reusing the same layout, not a labeled input) rather than through this component, and still
+  // need the identical base rules.
+  interface Props {
+    label: string;
+    wide?: boolean;
+    span?: boolean;
+    children: Snippet;
+  }
+  let { label, wide = false, span = false, children }: Props = $props();
+</script>
+
+<label class="field" class:field--wide={wide} class:field--span={span}>
+  <span>{label}</span>
+  {@render children()}
+</label>
+
+<style>
+  :global(.field) { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
+  :global(.field--wide) { width: 100%; }
+  :global(.field--span) { grid-column: 1 / -1; }
+  /* Uppercase caption above a field. Excludes a caller's own permalink-heading inner span so a
+     read-only .field usage doesn't uppercase-transform the actual value it wraps there. */
+  :global(.field > span:not(.permalink-heading)) {
+    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600;
+  }
+</style>

package/FormGrid.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  // The field grid a caller's Add/Edit modals and search previews share — a plain wrapping
+  // div, so component-scoped CSS is enough: every caller renders this through the component rather
+  // than reusing the bare class name elsewhere.
+  interface Props { children: Snippet }
+  let { children }: Props = $props();
+</script>
+
+<div class="form-grid">{@render children()}</div>
+
+<style>
+  .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem 1.1rem; }
+</style>

package/Modal.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+  // Generic modal overlay (backdrop + close), built on the native <dialog> element, which
+  // supplies as BROWSER PRIMITIVES what a hand-rolled overlay previously did not have at all: a
+  // focus trap, focus restore on close, an inert background, Escape handling, and top-layer
+  // stacking. Hand-rolling a focus trap is ~80 lines of the most-often-wrong code in front-end
+  // and still yields neither top-layer nor `inert`.
+  //
+  // What was broken with a hand-rolled overlay, across every call site:
+  //   • NOTHING ever focused the panel. `tabindex="-1"` + `aria-modal="true"` told a screen reader the
+  //     background was inert while a keyboard user could still Tab straight into it.
+  //   • `<svelte:window onkeydown>` meant Escape closed EVERY mounted Modal at once, not the top one.
+  //   • The backdrop closed on any click, with no dirty check — so a patient typing a long note lost
+  //     all of it to one mis-aimed click, and to a text-selection drag released outside the panel.
+  //
+  // The API is deliberately unchanged for callers that have no unsaved state: `label` / `onClose` /
+  // `wide` / `children` behave exactly as before, so most call sites change zero characters.
+  import type { Snippet } from "svelte";
+  interface Props {
+    label: string;
+    onClose: () => void;
+    wide?: boolean;
+    /**
+     * The form state to watch, as a getter — e.g. `() => newNote`.
+     *
+     * Modal compares it against a snapshot taken WHEN THIS COMPONENT MOUNTS, which is exactly when the
+     * modal opens (every call site guards it with `{#if addOpen && draft}`). Using the component's own
+     * lifecycle is why there is no `$effect` and no separate tracker module here: the first design had
+     * both, to observe an "is it open" transition the mount already is.
+     *
+     * Omitted means "never dirty" — right for the read-only hosts (About, attachment viewer, import).
+     */
+    snapshot?: () => unknown;
+    discardMessage?: string;
+    children: Snippet;
+  }
+  let {
+    label,
+    onClose,
+    wide = false,
+    snapshot = undefined,
+    discardMessage = "Discard your unsaved changes?",
+    children,
+  }: Props = $props();
+
+  // Captured once, at mount. Serialisable form state only (strings, numbers, small arrays), so a JSON
+  // compare is exact for the values that matter. Being wrong in the SAFE direction — asking when
+  // nothing really changed — costs one confirmation; the opposite silently discards a patient's work.
+  const pristine = snapshot ? JSON.stringify(snapshot()) : null;
+  const isDirty = (): boolean => pristine !== null && JSON.stringify(snapshot!()) !== pristine;
+
+  let dialog = $state<HTMLDialogElement | null>(null);
+  let confirmEl = $state<HTMLDialogElement | null>(null);
+  // Where a backdrop press STARTED. A text-selection drag that begins inside the panel and releases
+  // on the backdrop dispatches `click` at the backdrop — which used to close the modal and discard
+  // everything typed. Requiring both press and release on the backdrop fixes that.
+  let pressedOnBackdrop = false;
+
+  // showModal() rather than the `open` attribute: only the former puts the dialog in the top layer,
+  // makes the rest of the document inert, traps focus and restores it on close.
+  $effect(() => {
+    dialog?.showModal();
+  });
+
+  function requestClose(): void {
+    if (isDirty()) confirmEl?.showModal();
+    else onClose();
+  }
+
+  /** Escape (and any other user-agent dismiss) arrives as a cancelable `cancel` event — per dialog. */
+  function onCancel(e: Event): void {
+    e.preventDefault(); // never let the browser close it out from under an unsaved edit
+    requestClose();
+  }
+</script>
+
+<dialog
+  bind:this={dialog}
+  class="modal-panel"
+  class:wide
+  aria-label={label}
+  oncancel={onCancel}
+  onmousedown={(e) => (pressedOnBackdrop = e.target === dialog)}
+  onclick={(e) => {
+    if (e.target === dialog && pressedOnBackdrop) requestClose();
+    pressedOnBackdrop = false;
+  }}
+>
+  <div class="modal-inner">
+    <button class="modal-close" aria-label="Close" onclick={requestClose}>×</button>
+    {@render children()}
+  </div>
+</dialog>
+
+<!-- Defined once here, not at 15 call sites. A nested <dialog> works because the top layer stacks;
+     window.confirm() would block the event loop, cannot be styled, and is invisible to Playwright
+     without a dialog handler. -->
+<dialog bind:this={confirmEl} class="discard-confirm" aria-label="Discard changes?">
+  <p>{discardMessage}</p>
+  <div class="discard-actions">
+    <button class="btn" onclick={() => confirmEl?.close()}>Keep editing</button>
+    <button
+      class="btn danger"
+      onclick={() => {
+        confirmEl?.close();
+        onClose();
+      }}>Discard</button
+    >
+  </div>
+</dialog>
+
+<style>
+  /* The element IS the panel now; ::backdrop replaces the wrapper div the browser used to need. */
+  .modal-panel {
+    position: fixed;
+    inset: 0;
+    margin: 4rem auto auto;
+    background: white;
+    color: inherit;
+    max-width: 46rem;
+    width: calc(100% - 2rem);
+    max-height: calc(100vh - 8rem);
+    overflow-y: auto;
+    border: none;
+    border-radius: 12px;
+    padding: 0;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+  }
+  .modal-panel::backdrop { background: rgba(0, 0, 0, 0.4); }
+  .modal-panel.wide { max-width: min(70rem, 95vw); }
+  /* Padding lives on an inner wrapper so a backdrop click is unambiguously outside the content: on
+     the dialog itself, padding is part of the element's box and would swallow near-edge presses. */
+  .modal-inner { position: relative; padding: 1.75rem 2rem 2rem; }
+  .modal-close {
+    position: absolute;
+    top: 0.6rem;
+    right: 0.8rem;
+    border: none;
+    background: none;
+    font-size: 1.6rem;
+    line-height: 1;
+    color: var(--muted);
+    cursor: pointer;
+    padding: 0.2rem 0.4rem;
+  }
+  .modal-close:hover { color: var(--fg); }
+
+  .discard-confirm {
+    border: none;
+    border-radius: 10px;
+    padding: 1.25rem 1.5rem;
+    max-width: 24rem;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
+  }
+  .discard-confirm::backdrop { background: rgba(0, 0, 0, 0.3); }
+  .discard-confirm p { margin: 0 0 1rem; }
+  .discard-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
+
+  /* The desktop margin is dead space on a short phone viewport. */
+  @media (max-width: 640px) {
+    .modal-panel { margin-top: 1rem; max-height: calc(100vh - 2rem); width: calc(100% - 1rem); }
+    .modal-inner { padding: 1.25rem 1rem 1.5rem; }
+  }
+  @media print { .modal-panel { display: none !important; } }
+</style>

package/ModalActions.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  // Slot wrapper for the Cancel/Save button row hoisted across every leaf editor's Add/Edit modal.
+  interface Props { children: Snippet }
+  let { children }: Props = $props();
+</script>
+
+<div class="modal-actions">{@render children()}</div>
+
+<style>
+  .modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; }
+</style>

package/PdfThumbnail.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { openPdf } from "./pdf-render";
+
+  // A report's first-page thumbnail on a reports list — the ER-doctor path: see the first page ->
+  // click to scroll through the rest -> Download, no menu digging. Loads pdfjs (via the shared
+  // pdf-render.ts) only once the card actually scrolls into view (IntersectionObserver), so a tab
+  // with many reports doesn't pay pdfjs's ~500 KB cost until a thumbnail is actually about to
+  // render.
+  interface Props {
+    url: string;
+    onOpen?: () => void;
+  }
+  let { url, onOpen }: Props = $props();
+
+  let rootEl: HTMLDivElement | undefined;
+  let canvasEl = $state<HTMLCanvasElement | undefined>();
+  let thumbState = $state<"pending" | "loading" | "ready" | "error">("pending");
+
+  $effect(() => {
+    if (!rootEl) return;
+    const obs = new IntersectionObserver((entries) => {
+      if (entries.some((e) => e.isIntersecting)) {
+        obs.disconnect();
+        load();
+      }
+    }, { rootMargin: "200px" });
+    obs.observe(rootEl);
+    return () => obs.disconnect();
+  });
+
+  async function load() {
+    thumbState = "loading";
+    try {
+      const doc = await openPdf(url);
+      thumbState = "ready";
+      // canvasEl only exists once thumbState flips to "ready" and Svelte re-renders; await a tick via
+      // requestAnimationFrame so bind:this has landed before we render into it.
+      requestAnimationFrame(async () => {
+        if (canvasEl) await doc.renderPage(1, canvasEl, 240);
+      });
+    } catch {
+      thumbState = "error";
+    }
+  }
+</script>
+
+<div class="pdf-thumb" bind:this={rootEl}>
+  <button type="button" class="pdf-thumb-btn" onclick={() => onOpen?.()} aria-label="Preview">
+    {#if thumbState === "ready"}
+      <canvas bind:this={canvasEl}></canvas>
+    {:else if thumbState === "error"}
+      <span class="pdf-thumb-glyph" aria-hidden="true">📄</span>
+    {:else}
+      <span class="pdf-thumb-glyph pdf-thumb-pending" aria-hidden="true">📄</span>
+    {/if}
+  </button>
+</div>
+
+<style>
+  .pdf-thumb { flex: none; }
+  .pdf-thumb-btn {
+    display: flex; align-items: center; justify-content: center;
+    width: 64px; height: 84px; border-radius: 6px; border: 1px solid var(--border);
+    background: var(--band); padding: 0; cursor: pointer; overflow: hidden;
+  }
+  .pdf-thumb-btn:hover { border-color: var(--accent); }
+  .pdf-thumb-btn canvas { max-width: 100%; max-height: 100%; }
+  .pdf-thumb-glyph { font-size: 1.6rem; }
+  .pdf-thumb-pending { opacity: 0.5; }
+</style>