@cat-factory/app 0.43.0 → 0.44.0

package/app/components/media/ArtifactLightbox.vue

@@ -0,0 +1,273 @@
+<script setup lang="ts">
+// Full-screen artifact viewer — a reusable zoom/pan lightbox for a SET of stored images
+// (screenshots / reference designs), shared by the visual-confirmation gate and the test
+// report window. It reuses the owner's `useArtifactBlobs` cache (passed in as `blobs`) so
+// opening the lightbox never re-fetches a blob the gallery already resolved.
+//
+// Zoom is pure CSS `transform` (GPU, no canvas), so even large PNGs stay smooth. Keyboard:
+// Esc close · ←/→ prev/next · +/- zoom · 0 reset · double-click toggle fit↔2×.
+import { computed, ref, watch } from 'vue'
+import type { ArtifactBlobs } from '~/composables/useArtifactBlobs'
+import { useFocusTrap } from '~/composables/useFocusTrap'
+
+interface LightboxItem {
+  artifactId: string
+  label: string
+  alt: string
+}
+
+const props = defineProps<{
+  open: boolean
+  index: number
+  items: LightboxItem[]
+  blobs: ArtifactBlobs
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'update:index', value: number): void
+}>()
+
+const MIN_SCALE = 1
+const MAX_SCALE = 8
+const scale = ref(1)
+const tx = ref(0)
+const ty = ref(0)
+
+// Move focus into the lightbox on open + trap Tab within it (and restore focus on close).
+// It's the topmost surface, so its trap stays live even over an owning review window.
+const dialogRoot = ref<HTMLElement | null>(null)
+useFocusTrap(
+  dialogRoot,
+  computed(() => props.open),
+)
+
+const current = computed(() => props.items[props.index] ?? null)
+const total = computed(() => props.items.length)
+const url = computed(() =>
+  current.value ? props.blobs.urlFor(current.value.artifactId) : undefined,
+)
+const state = computed(() =>
+  current.value ? props.blobs.statusFor(current.value.artifactId) : 'idle',
+)
+
+function resetView() {
+  scale.value = 1
+  tx.value = 0
+  ty.value = 0
+}
+
+// Resolve the active item (plus its immediate neighbours, so ←/→ is instant) whenever the
+// lightbox is open or the index moves. Reset the zoom/pan on every navigation.
+watch(
+  () => [props.open, props.index, props.items.length] as const,
+  () => {
+    if (!props.open) return
+    resetView()
+    const ids = [props.index - 1, props.index, props.index + 1]
+      .map((i) => props.items[i]?.artifactId)
+      .filter((v): v is string => !!v)
+    for (const id of ids) void props.blobs.resolve(id)
+  },
+  { immediate: true },
+)
+
+function close() {
+  emit('update:open', false)
+}
+function go(delta: number) {
+  if (!total.value) return
+  const next = (props.index + delta + total.value) % total.value
+  emit('update:index', next)
+}
+function zoomBy(factor: number) {
+  scale.value = Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale.value * factor))
+  if (scale.value === 1) {
+    tx.value = 0
+    ty.value = 0
+  }
+}
+function onWheel(e: WheelEvent) {
+  e.preventDefault()
+  zoomBy(e.deltaY < 0 ? 1.15 : 1 / 1.15)
+}
+function toggleZoom() {
+  if (scale.value > 1) resetView()
+  else scale.value = 2
+}
+
+// Pointer drag to pan (only meaningful when zoomed in).
+const dragging = ref(false)
+let startX = 0
+let startY = 0
+let baseX = 0
+let baseY = 0
+function onPointerDown(e: PointerEvent) {
+  if (scale.value <= 1) return
+  dragging.value = true
+  startX = e.clientX
+  startY = e.clientY
+  baseX = tx.value
+  baseY = ty.value
+  ;(e.target as HTMLElement).setPointerCapture?.(e.pointerId)
+}
+function onPointerMove(e: PointerEvent) {
+  if (!dragging.value) return
+  tx.value = baseX + (e.clientX - startX)
+  ty.value = baseY + (e.clientY - startY)
+}
+function onPointerUp() {
+  dragging.value = false
+}
+
+function onKey(e: KeyboardEvent) {
+  if (!props.open) return
+  switch (e.key) {
+    case 'Escape':
+      e.stopPropagation()
+      close()
+      break
+    case 'ArrowLeft':
+      go(-1)
+      break
+    case 'ArrowRight':
+      go(1)
+      break
+    case '+':
+    case '=':
+      zoomBy(1.25)
+      break
+    case '-':
+    case '_':
+      zoomBy(1 / 1.25)
+      break
+    case '0':
+      resetView()
+      break
+  }
+}
+// Capture-phase so Esc closes the lightbox BEFORE the underlying window's own Esc handler
+// (both use window keydown; the lightbox is the topmost surface so it wins).
+onMounted(() => window.addEventListener('keydown', onKey, true))
+onBeforeUnmount(() => window.removeEventListener('keydown', onKey, true))
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      ref="dialogRoot"
+      tabindex="-1"
+      class="fixed inset-0 z-[60] flex flex-col bg-slate-950/95 backdrop-blur-sm focus:outline-none"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="current ? `Screenshot: ${current.label}` : 'Screenshot viewer'"
+      @click.self="close"
+    >
+      <!-- Toolbar -->
+      <div class="flex items-center gap-3 border-b border-slate-800/60 px-4 py-2.5">
+        <span class="min-w-0 flex-1 truncate text-[13px] font-medium text-slate-200">
+          {{ current?.label ?? 'Screenshot' }}
+        </span>
+        <span v-if="total > 1" class="shrink-0 text-[12px] tabular-nums text-slate-400">
+          {{ index + 1 }} / {{ total }}
+        </span>
+        <div class="flex shrink-0 items-center gap-1">
+          <button
+            class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200 disabled:opacity-40"
+            title="Zoom out (-)"
+            :disabled="scale <= MIN_SCALE"
+            @click="zoomBy(1 / 1.25)"
+          >
+            <UIcon name="i-lucide-zoom-out" class="h-4 w-4" />
+          </button>
+          <span class="w-10 text-center text-[11px] tabular-nums text-slate-500"
+            >{{ Math.round(scale * 100) }}%</span
+          >
+          <button
+            class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200 disabled:opacity-40"
+            title="Zoom in (+)"
+            :disabled="scale >= MAX_SCALE"
+            @click="zoomBy(1.25)"
+          >
+            <UIcon name="i-lucide-zoom-in" class="h-4 w-4" />
+          </button>
+          <button
+            class="rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+            title="Reset (0)"
+            @click="resetView"
+          >
+            <UIcon name="i-lucide-maximize" class="h-4 w-4" />
+          </button>
+          <button
+            class="ml-1 rounded-md p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+            title="Close (Esc)"
+            @click="close"
+          >
+            <UIcon name="i-lucide-x" class="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      <!-- Stage -->
+      <div
+        class="relative flex min-h-0 flex-1 items-center justify-center overflow-hidden p-4"
+        @wheel="onWheel"
+        @click.self="close"
+      >
+        <button
+          v-if="total > 1"
+          class="absolute left-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-slate-900/80 p-2 text-slate-300 hover:bg-slate-800 hover:text-white"
+          title="Previous (←)"
+          @click="go(-1)"
+        >
+          <UIcon name="i-lucide-chevron-left" class="h-5 w-5" />
+        </button>
+
+        <img
+          v-if="url"
+          :src="url"
+          :alt="current?.alt ?? ''"
+          draggable="false"
+          class="max-h-full max-w-full select-none rounded shadow-2xl"
+          :class="[
+            scale > 1 ? (dragging ? 'cursor-grabbing' : 'cursor-grab') : 'cursor-zoom-in',
+            dragging ? '' : 'transition-transform duration-100',
+          ]"
+          :style="{ transform: `translate(${tx}px, ${ty}px) scale(${scale})` }"
+          @dblclick="toggleZoom"
+          @pointerdown="onPointerDown"
+          @pointermove="onPointerMove"
+          @pointerup="onPointerUp"
+          @pointercancel="onPointerUp"
+        />
+        <div v-else class="flex flex-col items-center gap-2 text-slate-500">
+          <UIcon
+            :name="state === 'error' ? 'i-lucide-image-off' : 'i-lucide-loader'"
+            class="h-8 w-8"
+            :class="state === 'error' ? '' : 'animate-spin'"
+          />
+          <p class="text-[12px]">
+            {{ state === 'error' ? 'Failed to load image.' : 'Loading…' }}
+          </p>
+          <button
+            v-if="state === 'error' && current"
+            class="text-[12px] text-amber-300 hover:underline"
+            @click="props.blobs.retry(current.artifactId)"
+          >
+            Retry
+          </button>
+        </div>
+
+        <button
+          v-if="total > 1"
+          class="absolute right-3 top-1/2 z-10 -translate-y-1/2 rounded-full bg-slate-900/80 p-2 text-slate-300 hover:bg-slate-800 hover:text-white"
+          title="Next (→)"
+          @click="go(1)"
+        >
+          <UIcon name="i-lucide-chevron-right" class="h-5 w-5" />
+        </button>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/app/components/media/ImageCompare.vue

@@ -0,0 +1,305 @@
+<script setup lang="ts">
+// Actual-vs-reference comparator for one view. Four modes:
+//   · side-by-side — the two images in a 2-col grid (the original layout)
+//   · overlay      — stacked, with an opacity (onion-skin) slider on the actual layer
+//   · swipe        — reference under, actual clipped by a draggable split handle
+//   · diff         — canvas `difference` composite (identical pixels go black)
+// Modes that need both images hide themselves when there's no reference yet. Clicking any
+// image emits `expand` so the owner can open the shared lightbox; the reference slot doubles
+// as a drag-and-drop / click upload target (emits `uploadReference`).
+import { computed, nextTick, ref, watch } from 'vue'
+import type { ArtifactBlobs } from '~/composables/useArtifactBlobs'
+
+const props = defineProps<{
+  view: string
+  actualId: string | null | undefined
+  referenceId: string | null | undefined
+  blobs: ArtifactBlobs
+  busy?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'expand', artifactId: string): void
+  (e: 'uploadReference', file: File): void
+}>()
+
+type Mode = 'side-by-side' | 'overlay' | 'swipe' | 'diff'
+
+const actualUrl = computed(() => props.blobs.urlFor(props.actualId))
+const refUrl = computed(() => props.blobs.urlFor(props.referenceId))
+const hasBoth = computed(() => !!actualUrl.value && !!refUrl.value)
+
+const diffFailed = ref(false)
+const MODES = computed<{ id: Mode; icon: string; label: string }[]>(() => {
+  const base: { id: Mode; icon: string; label: string }[] = [
+    { id: 'side-by-side', icon: 'i-lucide-columns-2', label: 'Side by side' },
+  ]
+  if (hasBoth.value) {
+    base.push(
+      { id: 'overlay', icon: 'i-lucide-layers', label: 'Overlay' },
+      { id: 'swipe', icon: 'i-lucide-flip-horizontal-2', label: 'Swipe' },
+    )
+    if (!diffFailed.value) base.push({ id: 'diff', icon: 'i-lucide-contrast', label: 'Difference' })
+  }
+  return base
+})
+
+const mode = ref<Mode>('side-by-side')
+// Fall back to side-by-side if the active mode stops being available (e.g. reference removed).
+watch(MODES, (list) => {
+  if (!list.some((m) => m.id === mode.value)) mode.value = 'side-by-side'
+})
+
+const overlayOpacity = ref(50)
+const splitPct = ref(50)
+
+// --- swipe handle drag ---
+const swipeBox = ref<HTMLElement | null>(null)
+const swiping = ref(false)
+function onSwipeDown(e: PointerEvent) {
+  swiping.value = true
+  ;(e.target as HTMLElement).setPointerCapture?.(e.pointerId)
+  moveSwipe(e)
+}
+function moveSwipe(e: PointerEvent) {
+  if (!swiping.value || !swipeBox.value) return
+  const r = swipeBox.value.getBoundingClientRect()
+  splitPct.value = Math.min(100, Math.max(0, ((e.clientX - r.left) / r.width) * 100))
+}
+function onSwipeUp() {
+  swiping.value = false
+}
+
+// --- diff canvas ---
+const diffCanvas = ref<HTMLCanvasElement | null>(null)
+const CAP = 2000
+// Bumped on every renderDiff entry so a render whose async work (image decode) is overtaken
+// by a newer mode/image change bails out instead of drawing stale pixels onto the canvas.
+let renderToken = 0
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onload = () => resolve(img)
+    img.onerror = reject
+    img.src = src
+  })
+}
+async function renderDiff() {
+  if (mode.value !== 'diff' || !actualUrl.value || !refUrl.value) return
+  const token = ++renderToken
+  await nextTick()
+  const canvas = diffCanvas.value
+  if (!canvas || token !== renderToken) return
+  try {
+    const [a, b] = await Promise.all([loadImage(actualUrl.value), loadImage(refUrl.value)])
+    if (token !== renderToken) return
+    const scale = Math.min(1, CAP / Math.max(a.naturalWidth, a.naturalHeight || 1))
+    const w = Math.max(1, Math.round((a.naturalWidth || 1) * scale))
+    const h = Math.max(1, Math.round((a.naturalHeight || 1) * scale))
+    canvas.width = w
+    canvas.height = h
+    const ctx = canvas.getContext('2d')
+    if (!ctx) throw new Error('no 2d context')
+    ctx.clearRect(0, 0, w, h)
+    ctx.globalCompositeOperation = 'source-over'
+    ctx.drawImage(b, 0, 0, w, h)
+    ctx.globalCompositeOperation = 'difference'
+    ctx.drawImage(a, 0, 0, w, h)
+    ctx.globalCompositeOperation = 'source-over'
+    // Touch the pixels to surface a taint SecurityError early (untainted for same-origin
+    // blobs, but degrade gracefully if that ever changes).
+    ctx.getImageData(0, 0, 1, 1)
+    diffFailed.value = false
+  } catch {
+    diffFailed.value = true
+    if (mode.value === 'diff') mode.value = 'overlay'
+  }
+}
+watch([mode, actualUrl, refUrl], renderDiff, { immediate: true })
+
+// --- reference upload (drag-drop + click) ---
+const dragOver = ref(false)
+const refInput = ref<HTMLInputElement | null>(null)
+// Accept only the formats the file input advertises (PNG/JPEG), so a dropped GIF/SVG/WebP
+// can't slip past the picker's `accept` filter.
+const ACCEPTED = /^image\/(png|jpeg)$/
+function pickFile(files: FileList | null | undefined) {
+  const file = files?.[0]
+  if (file && ACCEPTED.test(file.type)) emit('uploadReference', file)
+}
+function onDrop(e: DragEvent) {
+  dragOver.value = false
+  pickFile(e.dataTransfer?.files)
+}
+function onRefInput(e: Event) {
+  pickFile((e.target as HTMLInputElement).files)
+  if (refInput.value) refInput.value.value = ''
+}
+</script>
+
+<template>
+  <div class="rounded-lg border border-slate-800 bg-slate-900/60 p-3">
+    <div class="mb-2 flex items-center justify-between gap-2">
+      <h3 class="min-w-0 truncate text-[12px] font-semibold text-slate-200">{{ view }}</h3>
+      <!-- Mode switch -->
+      <div
+        v-if="MODES.length > 1"
+        class="flex items-center gap-0.5 rounded-md border border-slate-800 bg-slate-950/60 p-0.5"
+      >
+        <button
+          v-for="m in MODES"
+          :key="m.id"
+          class="rounded px-1.5 py-1 text-slate-400 hover:text-slate-200"
+          :class="mode === m.id ? 'bg-slate-800 text-slate-100' : ''"
+          :title="m.label"
+          @click="mode = m.id"
+        >
+          <UIcon :name="m.icon" class="h-3.5 w-3.5" />
+        </button>
+      </div>
+    </div>
+
+    <!-- SIDE BY SIDE -->
+    <div v-if="mode === 'side-by-side'" class="grid grid-cols-2 gap-3">
+      <figure class="space-y-1">
+        <figcaption class="text-[10px] uppercase tracking-wide text-slate-500">Actual</figcaption>
+        <button
+          v-if="actualUrl"
+          class="block w-full overflow-hidden rounded border border-slate-800 hover:border-slate-600"
+          @click="actualId && emit('expand', actualId)"
+        >
+          <img :src="actualUrl" :alt="`${view} (actual)`" class="w-full cursor-zoom-in" />
+        </button>
+        <div
+          v-else
+          class="flex h-32 items-center justify-center rounded border border-dashed border-slate-700 text-[11px] text-slate-600"
+        >
+          {{
+            props.blobs.statusFor(actualId) === 'error'
+              ? 'Failed to load'
+              : actualId
+                ? 'Loading…'
+                : 'Not captured'
+          }}
+        </div>
+      </figure>
+
+      <figure class="space-y-1">
+        <figcaption class="text-[10px] uppercase tracking-wide text-slate-500">
+          Reference
+        </figcaption>
+        <button
+          v-if="refUrl"
+          class="group relative block w-full overflow-hidden rounded border border-slate-800 hover:border-slate-600"
+          @click="referenceId && emit('expand', referenceId)"
+        >
+          <img :src="refUrl" :alt="`${view} (reference)`" class="w-full cursor-zoom-in" />
+          <span
+            class="absolute bottom-1 right-1 rounded bg-slate-950/80 px-1.5 py-0.5 text-[10px] text-slate-300 opacity-0 group-hover:opacity-100"
+            @click.stop="refInput?.click()"
+          >
+            Replace
+          </span>
+        </button>
+        <!-- Drop zone when no reference yet -->
+        <div
+          v-else
+          class="flex h-32 cursor-pointer flex-col items-center justify-center gap-1 rounded border border-dashed text-[11px] transition"
+          :class="
+            dragOver
+              ? 'border-amber-500 bg-amber-500/5 text-amber-300'
+              : 'border-slate-700 text-slate-600 hover:border-slate-500 hover:text-slate-400'
+          "
+          @click="refInput?.click()"
+          @dragover.prevent="dragOver = true"
+          @dragleave.prevent="dragOver = false"
+          @drop.prevent="onDrop"
+        >
+          <UIcon name="i-lucide-image-up" class="h-5 w-5" />
+          <span>Drop or click to add a reference</span>
+        </div>
+      </figure>
+    </div>
+
+    <!-- OVERLAY (onion-skin) -->
+    <div v-else-if="mode === 'overlay'" class="space-y-2">
+      <div class="relative w-full overflow-hidden rounded border border-slate-800">
+        <img :src="refUrl" :alt="`${view} (reference)`" class="w-full" />
+        <!-- object-contain so a differing aspect ratio onion-skins undistorted over the reference. -->
+        <img
+          :src="actualUrl"
+          :alt="`${view} (actual)`"
+          class="absolute inset-0 h-full w-full object-contain"
+          :style="{ opacity: overlayOpacity / 100 }"
+        />
+      </div>
+      <div class="flex items-center gap-2 text-[10px] uppercase tracking-wide text-slate-500">
+        <span>Reference</span>
+        <input
+          v-model.number="overlayOpacity"
+          type="range"
+          min="0"
+          max="100"
+          class="flex-1 accent-amber-500"
+        />
+        <span>Actual</span>
+      </div>
+    </div>
+
+    <!-- SWIPE (split slider) -->
+    <div
+      v-else-if="mode === 'swipe'"
+      ref="swipeBox"
+      class="relative w-full cursor-ew-resize select-none overflow-hidden rounded border border-slate-800"
+      @pointerdown="onSwipeDown"
+      @pointermove="moveSwipe"
+      @pointerup="onSwipeUp"
+      @pointercancel="onSwipeUp"
+    >
+      <img :src="refUrl" :alt="`${view} (reference)`" class="block w-full" />
+      <div
+        class="absolute inset-0 overflow-hidden"
+        :style="{ clipPath: `inset(0 ${100 - splitPct}% 0 0)` }"
+      >
+        <!-- Fit the actual within the reference's box (object-contain) so a differing aspect
+             ratio doesn't stretch it; the split then compares like-for-like. -->
+        <img
+          :src="actualUrl"
+          :alt="`${view} (actual)`"
+          class="absolute inset-0 block h-full w-full object-contain"
+        />
+      </div>
+      <div class="absolute inset-y-0 w-0.5 bg-amber-400" :style="{ left: `${splitPct}%` }">
+        <span
+          class="absolute top-1/2 left-1/2 flex h-6 w-6 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-amber-400 text-slate-950 shadow"
+        >
+          <UIcon name="i-lucide-move-horizontal" class="h-3.5 w-3.5" />
+        </span>
+      </div>
+      <span
+        class="absolute left-1 top-1 rounded bg-slate-950/70 px-1 text-[9px] uppercase text-slate-300"
+        >Actual</span
+      >
+      <span
+        class="absolute right-1 top-1 rounded bg-slate-950/70 px-1 text-[9px] uppercase text-slate-300"
+        >Reference</span
+      >
+    </div>
+
+    <!-- DIFF (canvas) -->
+    <div v-else-if="mode === 'diff'" class="space-y-1">
+      <canvas ref="diffCanvas" class="w-full rounded border border-slate-800 bg-black" />
+      <p class="text-[10px] text-slate-500">Identical pixels appear black; differences glow.</p>
+    </div>
+
+    <!-- Hidden file input shared by replace/drop zone -->
+    <input
+      ref="refInput"
+      type="file"
+      accept="image/png,image/jpeg"
+      class="hidden"
+      :disabled="busy"
+      @change="onRefInput"
+    />
+  </div>
+</template>