@joewinke/jatui 0.1.11 → 0.1.20

package/src/lib/components/HunkDiffView.svelte

@@ -0,0 +1,348 @@
+<script lang="ts">
+  /**
+   * HunkDiffView — side-by-side line-level diff with inline word highlights.
+   *
+   * Renders the before/after of a single DiffHunk with the visual treatment of
+   * a real code-review tool:
+   *   - Line numbers in gutter
+   *   - "−" / "+" markers per line
+   *   - Red background + strikethrough for removed lines
+   *   - Green background for added lines
+   *   - Inline word-level highlights when a line was modified (Myers diff)
+   *   - Monospace, syntax-naive (YAML is plain enough)
+   *
+   * Pure presentation — no state, no side effects. Pairs with DiffReview's
+   * per-hunk Accept/Reject buttons.
+   */
+
+  import { diffLines, diffWordsWithSpace, type Change } from 'diff'
+
+  interface Props {
+    oldText: string | null
+    newText: string | null
+    /** When false (default), shows two columns. When true, unified single column. */
+    unified?: boolean
+  }
+
+  let { oldText, newText, unified = false }: Props = $props()
+
+  type Row = {
+    kind: 'context' | 'removed' | 'added' | 'modified'
+    oldLineNo: number | null
+    newLineNo: number | null
+    oldContent: string | null
+    newContent: string | null
+    /** When kind=='modified', word-level segments per side */
+    oldSegments?: Array<{ text: string; changed: boolean }>
+    newSegments?: Array<{ text: string; changed: boolean }>
+  }
+
+  /**
+   * Build paired rows for side-by-side rendering.
+   * Adjacent removed+added blocks of equal-ish line count are zipped into
+   * 'modified' rows so the eye can compare line-for-line. Otherwise they
+   * render as separate red/green rows (with blank counterpart on the other
+   * side).
+   */
+  function buildRows(oldT: string, newT: string): Row[] {
+    const changes = diffLines(oldT, newT)
+    const rows: Row[] = []
+    let oldLine = 1
+    let newLine = 1
+
+    for (let i = 0; i < changes.length; i++) {
+      const c = changes[i]
+      const lines = c.value.replace(/\n$/, '').split('\n')
+
+      if (!c.added && !c.removed) {
+        // context
+        for (const line of lines) {
+          rows.push({
+            kind: 'context',
+            oldLineNo: oldLine++,
+            newLineNo: newLine++,
+            oldContent: line,
+            newContent: line,
+          })
+        }
+      } else if (c.removed) {
+        // Lookahead: is the very next change an 'added' block? If so, pair them
+        const next = changes[i + 1]
+        if (next?.added) {
+          const remLines = lines
+          const addLines = next.value.replace(/\n$/, '').split('\n')
+          const pairs = Math.max(remLines.length, addLines.length)
+          for (let j = 0; j < pairs; j++) {
+            const r = remLines[j]
+            const a = addLines[j]
+            if (r !== undefined && a !== undefined) {
+              // both present — modified row with inline word diff
+              const wordChanges = diffWordsWithSpace(r, a)
+              const oldSegments: Array<{ text: string; changed: boolean }> = []
+              const newSegments: Array<{ text: string; changed: boolean }> = []
+              for (const w of wordChanges) {
+                if (w.added) newSegments.push({ text: w.value, changed: true })
+                else if (w.removed) oldSegments.push({ text: w.value, changed: true })
+                else {
+                  oldSegments.push({ text: w.value, changed: false })
+                  newSegments.push({ text: w.value, changed: false })
+                }
+              }
+              rows.push({
+                kind: 'modified',
+                oldLineNo: oldLine++,
+                newLineNo: newLine++,
+                oldContent: r,
+                newContent: a,
+                oldSegments,
+                newSegments,
+              })
+            } else if (r !== undefined) {
+              rows.push({
+                kind: 'removed',
+                oldLineNo: oldLine++,
+                newLineNo: null,
+                oldContent: r,
+                newContent: null,
+              })
+            } else if (a !== undefined) {
+              rows.push({
+                kind: 'added',
+                oldLineNo: null,
+                newLineNo: newLine++,
+                oldContent: null,
+                newContent: a,
+              })
+            }
+          }
+          i++ // consumed the next 'added' change
+        } else {
+          for (const line of lines) {
+            rows.push({
+              kind: 'removed',
+              oldLineNo: oldLine++,
+              newLineNo: null,
+              oldContent: line,
+              newContent: null,
+            })
+          }
+        }
+      } else if (c.added) {
+        // standalone added (not preceded by a removed block — already handled above)
+        for (const line of lines) {
+          rows.push({
+            kind: 'added',
+            oldLineNo: null,
+            newLineNo: newLine++,
+            oldContent: null,
+            newContent: line,
+          })
+        }
+      }
+    }
+
+    return rows
+  }
+
+  const rows = $derived.by<Row[]>(() => {
+    const oldT = oldText ?? ''
+    const newT = newText ?? ''
+    if (!oldT && !newT) return []
+    if (!oldT) {
+      // pure-add — every line is 'added'
+      return newT.replace(/\n$/, '').split('\n').map((line, i) => ({
+        kind: 'added' as const,
+        oldLineNo: null,
+        newLineNo: i + 1,
+        oldContent: null,
+        newContent: line,
+      }))
+    }
+    if (!newT) {
+      // pure-remove — every line is 'removed'
+      return oldT.replace(/\n$/, '').split('\n').map((line, i) => ({
+        kind: 'removed' as const,
+        oldLineNo: i + 1,
+        newLineNo: null,
+        oldContent: line,
+        newContent: null,
+      }))
+    }
+    return buildRows(oldT, newT)
+  })
+
+  function lineNoStr(n: number | null): string {
+    return n === null ? '   ' : String(n).padStart(3, ' ')
+  }
+</script>
+
+<div class="hunk-diff text-xs font-mono leading-relaxed rounded border border-base-300/60 overflow-hidden bg-base-200/30">
+  {#if rows.length === 0}
+    <div class="px-3 py-4 text-center text-base-content/40 italic">no content</div>
+  {:else if unified}
+    <!-- Unified column -->
+    <div class="flex flex-col">
+      {#each rows as row, i (i)}
+        {#if row.kind === 'context'}
+          <div class="diff-row diff-row-context">
+            <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+            <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+            <span class="diff-marker"> </span>
+            <span class="diff-content">{row.oldContent}</span>
+          </div>
+        {:else if row.kind === 'removed'}
+          <div class="diff-row diff-row-removed">
+            <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+            <span class="diff-gutter">   </span>
+            <span class="diff-marker">−</span>
+            <span class="diff-content line-through opacity-80">{row.oldContent}</span>
+          </div>
+        {:else if row.kind === 'added'}
+          <div class="diff-row diff-row-added">
+            <span class="diff-gutter">   </span>
+            <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+            <span class="diff-marker">+</span>
+            <span class="diff-content">{row.newContent}</span>
+          </div>
+        {:else if row.kind === 'modified'}
+          <div class="diff-row diff-row-removed">
+            <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+            <span class="diff-gutter">   </span>
+            <span class="diff-marker">−</span>
+            <span class="diff-content">
+              {#each row.oldSegments ?? [] as seg, j (j)}{#if seg.changed}<span class="word-removed">{seg.text}</span>{:else}<span>{seg.text}</span>{/if}{/each}
+            </span>
+          </div>
+          <div class="diff-row diff-row-added">
+            <span class="diff-gutter">   </span>
+            <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+            <span class="diff-marker">+</span>
+            <span class="diff-content">
+              {#each row.newSegments ?? [] as seg, j (j)}{#if seg.changed}<span class="word-added">{seg.text}</span>{:else}<span>{seg.text}</span>{/if}{/each}
+            </span>
+          </div>
+        {/if}
+      {/each}
+    </div>
+  {:else}
+    <!-- Side-by-side: two synced columns -->
+    <div class="grid grid-cols-2 divide-x divide-base-300/60">
+      <!-- LEFT (current/old) -->
+      <div class="flex flex-col">
+        {#each rows as row, i (i)}
+          {#if row.kind === 'context'}
+            <div class="diff-row diff-row-context">
+              <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+              <span class="diff-marker"> </span>
+              <span class="diff-content">{row.oldContent}</span>
+            </div>
+          {:else if row.kind === 'removed'}
+            <div class="diff-row diff-row-removed">
+              <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+              <span class="diff-marker">−</span>
+              <span class="diff-content line-through opacity-80">{row.oldContent}</span>
+            </div>
+          {:else if row.kind === 'added'}
+            <div class="diff-row diff-row-empty">
+              <span class="diff-gutter">   </span>
+              <span class="diff-marker"> </span>
+              <span class="diff-content">&nbsp;</span>
+            </div>
+          {:else if row.kind === 'modified'}
+            <div class="diff-row diff-row-removed">
+              <span class="diff-gutter">{lineNoStr(row.oldLineNo)}</span>
+              <span class="diff-marker">−</span>
+              <span class="diff-content">
+                {#each row.oldSegments ?? [] as seg, j (j)}{#if seg.changed}<span class="word-removed">{seg.text}</span>{:else}<span>{seg.text}</span>{/if}{/each}
+              </span>
+            </div>
+          {/if}
+        {/each}
+      </div>
+
+      <!-- RIGHT (proposed/new) -->
+      <div class="flex flex-col">
+        {#each rows as row, i (i)}
+          {#if row.kind === 'context'}
+            <div class="diff-row diff-row-context">
+              <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+              <span class="diff-marker"> </span>
+              <span class="diff-content">{row.newContent}</span>
+            </div>
+          {:else if row.kind === 'added'}
+            <div class="diff-row diff-row-added">
+              <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+              <span class="diff-marker">+</span>
+              <span class="diff-content">{row.newContent}</span>
+            </div>
+          {:else if row.kind === 'removed'}
+            <div class="diff-row diff-row-empty">
+              <span class="diff-gutter">   </span>
+              <span class="diff-marker"> </span>
+              <span class="diff-content">&nbsp;</span>
+            </div>
+          {:else if row.kind === 'modified'}
+            <div class="diff-row diff-row-added">
+              <span class="diff-gutter">{lineNoStr(row.newLineNo)}</span>
+              <span class="diff-marker">+</span>
+              <span class="diff-content">
+                {#each row.newSegments ?? [] as seg, j (j)}{#if seg.changed}<span class="word-added">{seg.text}</span>{:else}<span>{seg.text}</span>{/if}{/each}
+              </span>
+            </div>
+          {/if}
+        {/each}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .diff-row {
+    display: grid;
+    grid-template-columns: auto auto 1fr;
+    column-gap: 0.5rem;
+    padding: 0 0.5rem;
+    align-items: baseline;
+    min-height: 1.4em;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+  .diff-gutter {
+    color: color-mix(in oklab, currentColor 35%, transparent);
+    font-variant-numeric: tabular-nums;
+    user-select: none;
+    text-align: right;
+  }
+  .diff-marker {
+    color: color-mix(in oklab, currentColor 55%, transparent);
+    width: 0.75em;
+    user-select: none;
+  }
+  .diff-row-removed {
+    background-color: color-mix(in oklab, var(--color-error, oklch(0.68 0.18 28)) 12%, transparent);
+  }
+  .diff-row-removed .diff-marker {
+    color: var(--color-error, oklch(0.68 0.18 28));
+  }
+  .diff-row-added {
+    background-color: color-mix(in oklab, var(--color-success, oklch(0.7 0.17 145)) 12%, transparent);
+  }
+  .diff-row-added .diff-marker {
+    color: var(--color-success, oklch(0.7 0.17 145));
+  }
+  .diff-row-empty {
+    background-color: color-mix(in oklab, currentColor 3%, transparent);
+  }
+  .diff-row-context {
+    background-color: transparent;
+  }
+  .word-removed {
+    background-color: color-mix(in oklab, var(--color-error, oklch(0.68 0.18 28)) 28%, transparent);
+    text-decoration: line-through;
+    text-decoration-color: color-mix(in oklab, var(--color-error, oklch(0.68 0.18 28)) 65%, transparent);
+  }
+  .word-added {
+    background-color: color-mix(in oklab, var(--color-success, oklch(0.7 0.17 145)) 28%, transparent);
+    font-weight: 600;
+  }
+</style>

package/src/lib/components/ImageLightbox.svelte

@@ -0,0 +1,274 @@
+<script lang="ts">
+  import type { Annotation } from '../types/annotation'
+  import type { MarkupShape } from '../components/markup'
+  import AnnotationLayer from './AnnotationLayer.svelte'
+  import MarkupOverlay from './MarkupOverlay.svelte'
+
+  interface Props {
+    /** URL of the image to display */
+    imageUrl: string
+    /** Alt text / filename for accessibility */
+    filename?: string
+    /** Markup shapes to overlay on the image */
+    markupShapes?: MarkupShape[]
+    /** Annotation pins to display */
+    annotations?: Annotation[]
+    /** Active annotation ID (highlighted pin) */
+    activeAnnotationId?: string | null
+    /** Whether annotation placement mode is active */
+    annotationMode?: boolean
+    /** Called when a pin is clicked */
+    onAnnotationClick?: (annotation: Annotation) => void
+    /** Called when the image is clicked in annotation mode */
+    onImageClick?: (x: number, y: number) => void
+    /** Called when the lightbox requests close */
+    onClose?: () => void
+  }
+
+  let {
+    imageUrl,
+    filename = "Image",
+    markupShapes = [],
+    annotations = [],
+    activeAnnotationId = null,
+    annotationMode = false,
+    onAnnotationClick,
+    onImageClick,
+    onClose,
+  }: Props = $props()
+
+  let isFullscreen = $state(false)
+  let zoom = $state(1)
+  let isLoading = $state(true)
+  let error = $state(false)
+
+  function handleImageLoad() {
+    isLoading = false
+  }
+
+  function handleImageError() {
+    error = true
+    isLoading = false
+  }
+
+  function toggleFullscreen() {
+    isFullscreen = !isFullscreen
+    if (!isFullscreen) {
+      zoom = 1
+    }
+  }
+
+  function zoomIn() {
+    zoom = Math.min(3, zoom + 0.25)
+  }
+
+  function zoomOut() {
+    zoom = Math.max(0.5, zoom - 0.25)
+  }
+
+  function resetZoom() {
+    zoom = 1
+  }
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (e.key === "Escape") {
+      if (isFullscreen) {
+        isFullscreen = false
+        zoom = 1
+      } else {
+        onClose?.()
+      }
+    } else if (e.key === "+" || e.key === "=") {
+      zoomIn()
+    } else if (e.key === "-") {
+      zoomOut()
+    } else if (e.key === "0") {
+      resetZoom()
+    }
+  }
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (e.target === e.currentTarget) {
+      if (isFullscreen) {
+        isFullscreen = false
+        zoom = 1
+      }
+    }
+  }
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<div class="flex flex-col h-full min-h-[400px]">
+  <!-- Inline Preview -->
+  <div class="flex-1 bg-base-200 flex items-center justify-center p-2 overflow-auto">
+    {#if isLoading}
+      <div class="flex items-center justify-center">
+        <span class="loading loading-spinner loading-lg text-primary"></span>
+      </div>
+    {/if}
+
+    {#if error}
+      <div class="text-center">
+        <svg
+          class="mx-auto h-12 w-12 text-error"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+          />
+        </svg>
+        <p class="mt-2 text-error">Failed to load image</p>
+      </div>
+    {:else}
+      <div
+        class="relative inline-block"
+        class:hidden={isLoading}
+      >
+        {#if !annotationMode}
+          <button
+            type="button"
+            onclick={toggleFullscreen}
+            class="focus:outline-none focus:ring-2 focus:ring-primary rounded"
+            aria-label="Click to view fullscreen"
+          >
+            <img
+              src={imageUrl}
+              alt={filename}
+              class="max-w-full max-h-full object-contain rounded border border-base-300 shadow-lg cursor-zoom-in"
+              style="max-height: 60vh;"
+              onload={handleImageLoad}
+              onerror={handleImageError}
+            />
+          </button>
+        {:else}
+          <img
+            src={imageUrl}
+            alt={filename}
+            class="max-w-full max-h-full object-contain rounded border border-base-300 shadow-lg"
+            style="max-height: 60vh;"
+            onload={handleImageLoad}
+            onerror={handleImageError}
+          />
+        {/if}
+
+        <!-- Markup shapes overlay -->
+        {#if markupShapes.length > 0}
+          <MarkupOverlay shapes={markupShapes} {imageUrl} />
+        {/if}
+
+        <!-- Annotation overlay -->
+        {#if annotations.length > 0 || annotationMode}
+          <AnnotationLayer
+            {annotations}
+            {activeAnnotationId}
+            {annotationMode}
+            {onAnnotationClick}
+            {onImageClick}
+          />
+        {/if}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<!-- Fullscreen Modal -->
+{#if isFullscreen}
+  <div
+    class="fixed inset-0 z-50 bg-black/90 flex items-center justify-center"
+    onclick={handleBackdropClick}
+    onkeydown={(e) => e.key === "Escape" && handleBackdropClick(e as unknown as MouseEvent)}
+    role="dialog"
+    aria-modal="true"
+    aria-label="Image fullscreen view"
+    tabindex="-1"
+  >
+    <!-- Close Button -->
+    <button
+      class="absolute top-4 right-4 btn btn-circle btn-ghost text-white hover:bg-white/20"
+      onclick={() => { isFullscreen = false; zoom = 1; }}
+      title="Close (Esc)"
+    >
+      <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M6 18L18 6M6 6l12 12"
+        />
+      </svg>
+    </button>
+
+    <!-- Zoom Controls -->
+    <div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-2 bg-black/50 rounded-lg p-2">
+      <button
+        class="btn btn-sm btn-ghost text-white"
+        onclick={zoomOut}
+        disabled={zoom <= 0.5}
+        title="Zoom out (-)"
+      >
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4" />
+        </svg>
+      </button>
+
+      <span class="text-white text-sm min-w-[60px] text-center">
+        {Math.round(zoom * 100)}%
+      </span>
+
+      <button
+        class="btn btn-sm btn-ghost text-white"
+        onclick={zoomIn}
+        disabled={zoom >= 3}
+        title="Zoom in (+)"
+      >
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+        </svg>
+      </button>
+
+      <button
+        class="btn btn-sm btn-ghost text-white"
+        onclick={resetZoom}
+        title="Reset zoom (0)"
+      >
+        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+          />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Image with overlays -->
+    <div class="relative overflow-auto max-w-full max-h-full p-4">
+      <div class="relative inline-block">
+        <img
+          src={imageUrl}
+          alt={filename}
+          class="transition-transform duration-200"
+          style="transform: scale({zoom}); transform-origin: center center;"
+        />
+        {#if markupShapes.length > 0}
+          <MarkupOverlay shapes={markupShapes} {imageUrl} />
+        {/if}
+        {#if annotations.length > 0}
+          <AnnotationLayer
+            {annotations}
+            {activeAnnotationId}
+            annotationMode={false}
+            {onAnnotationClick}
+          />
+        {/if}
+      </div>
+    </div>
+  </div>
+{/if}