@joewinke/jatui 0.1.11 → 0.1.19

package/src/lib/components/SmartImageEditor.svelte

@@ -0,0 +1,720 @@
+<script lang="ts">
+  import type {
+    ImageProcessingSpec,
+    ImageVariantSpec,
+    VariantResult,
+    VariantState,
+  } from "../types/smartImageEditor"
+
+  let {
+    spec = undefined,
+    uploadEndpoint = "/api/admin/image/process",
+    value = $bindable(""),
+    onComplete = undefined,
+    onDelete = undefined,
+    onDirectUpload = undefined,
+    accept = "image/png,image/jpeg,image/webp,image/svg+xml",
+    maxSizeMb = 10,
+    previewUrls = undefined,
+  } = $props<{
+    spec?: ImageProcessingSpec
+    uploadEndpoint?: string
+    value?: string
+    onComplete?: (variants: VariantResult[]) => void
+    /** Called when the user confirms delete on a variant tile. The host
+     *  decides what "delete" means (typically: remove from storage + clear
+     *  the stored URL). Returning false (or throwing) leaves the tile in
+     *  place; returning truthy clears the tile's variant state. */
+    onDelete?: (variantName: string) => Promise<boolean | void> | boolean | void
+    /** Called when the user drops/picks a file directly into an empty
+     *  variant tile — bypasses the AI pipeline. The host uploads the file
+     *  to its variant slot and returns the resulting VariantResult (or
+     *  null on failure). When provided, idle tiles become drop-targets. */
+    onDirectUpload?: (variantName: string, file: File) => Promise<VariantResult | null>
+    accept?: string
+    maxSizeMb?: number
+    /** Pre-populate variant cells with existing stored URLs (keyed by variant name). */
+    previewUrls?: Record<string, string>
+  }>()
+
+  const isEditorMode = $derived(spec !== undefined)
+  const maxBytes = $derived(maxSizeMb * 1024 * 1024)
+
+  // ─── State ────────────────────────────────────────────────────────────────
+  let isDragging = $state(false)
+  let error = $state("")
+  let processing = $state(false)
+  let backgroundRemovalFailed = $state(false)
+
+  // Editor mode: per-variant state, keyed by variant name.
+  // Initialized from previewUrls so existing stored images render immediately.
+  // Intentionally captures the initial prop value — changes to previewUrls do not re-initialize.
+  function _initVariantStates(): Record<string, VariantState> {
+    if (!previewUrls) return {}
+    return Object.fromEntries(
+      Object.entries(previewUrls)
+        .filter(([, url]) => Boolean(url))
+        .map(([name, url]): [string, VariantState] => [
+          name,
+          { status: "done" as const, result: { name, url: String(url), width: 0, height: 0 } },
+        ])
+    )
+  }
+  let variantStates = $state<Record<string, VariantState>>(_initVariantStates())
+  let sourceFile = $state<File | null>(null) // retained for per-cell regenerate
+  let hasResults = $derived(
+    spec !== undefined &&
+      spec.variants.length > 0 &&
+      spec.variants.every((v: ImageVariantSpec) => variantStates[v.name]?.status === "done" || variantStates[v.name]?.status === "error"),
+  )
+
+  // ─── Simple mode: forward to value + onComplete ───────────────────────────
+  function formatSize(bytes: number) {
+    if (bytes < 1024) return `${bytes} B`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  }
+
+  async function handleFile(file: File) {
+    error = ""
+    const allowedTypes = accept.split(",").map((s: string) => s.trim())
+    if (!allowedTypes.includes(file.type)) {
+      error = `Unsupported file type: ${file.type || "unknown"}. Accepted: PNG, JPG, WebP, SVG.`
+      return
+    }
+    if (file.size > maxBytes) {
+      error = `File too large (${formatSize(file.size)}). Maximum: ${maxSizeMb} MB.`
+      return
+    }
+
+    if (!isEditorMode) {
+      // Simple mode — just surface a blob URL
+      value = URL.createObjectURL(file)
+      onComplete?.([{ name: "image", url: value, width: 0, height: 0 }])
+      return
+    }
+
+    // Editor mode — POST to pipeline
+    sourceFile = file
+    await runPipeline(file, spec!.variants.map((v: ImageVariantSpec) => v.name))
+  }
+
+  async function runPipeline(file: File, variantNames: string[]) {
+    processing = true
+    backgroundRemovalFailed = false
+
+    // Initialize all requested variants to loading
+    const newStates: Record<string, VariantState> = {}
+    for (const name of variantNames) {
+      newStates[name] = { status: "loading" }
+    }
+    // Merge, keeping other variant states intact
+    variantStates = { ...variantStates, ...newStates }
+
+    const formData = new FormData()
+    formData.append("file", file)
+    formData.append(
+      "spec",
+      JSON.stringify({
+        removeBackground: spec!.removeBackground,
+        variants: spec!.variants.filter((v: ImageVariantSpec) => variantNames.includes(v.name)),
+      }),
+    )
+
+    try {
+      const res = await fetch(uploadEndpoint, { method: "POST", body: formData })
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({ error: res.statusText }))
+        throw new Error(body.error ?? `HTTP ${res.status}`)
+      }
+      const body = await res.json()
+      if (!body.ok) throw new Error(body.error ?? "Processing failed")
+
+      if (body.backgroundRemovalFailed) backgroundRemovalFailed = true
+
+      const results: VariantResult[] = body.variants
+      const nextStates: Record<string, VariantState> = {}
+      for (const result of results) {
+        nextStates[result.name] = { status: "done", result }
+      }
+      // Mark any requested variant that didn't come back as error
+      for (const name of variantNames) {
+        if (!nextStates[name]) {
+          nextStates[name] = { status: "error", message: "No result returned" }
+        }
+      }
+      variantStates = { ...variantStates, ...nextStates }
+      onComplete?.(results)
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : String(err)
+      const errStates: Record<string, VariantState> = {}
+      for (const name of variantNames) {
+        if (variantStates[name]?.status === "loading") {
+          errStates[name] = { status: "error", message: msg }
+        }
+      }
+      variantStates = { ...variantStates, ...errStates }
+      error = msg
+    } finally {
+      processing = false
+    }
+  }
+
+  async function regenerateVariant(variantName: string) {
+    if (!sourceFile || !spec) return
+    await runPipeline(sourceFile, [variantName])
+  }
+
+  // ─── Per-tile direct upload (bypasses AI) ───────────────────────────────
+  // Empty cells render as drop targets when onDirectUpload is provided.
+  // Hover styling tracked per-cell so we only highlight the one being
+  // dragged over. Each cell maintains its own loading state so a slow
+  // upload doesn't block the others.
+  let dragOverTile = $state<string | null>(null)
+  let directUploading = $state<Record<string, boolean>>({})
+
+  async function handleDirectUpload(variantName: string, file: File) {
+    if (!onDirectUpload) return
+    // Validate against the same accept/size limits as the AI dropzone — keeps
+    // the two paths consistent and avoids relying on server-side feedback.
+    const allowedTypes = accept.split(",").map((s: string) => s.trim())
+    if (!allowedTypes.includes(file.type)) {
+      console.error("[SmartImageEditor] direct upload type rejected:", file.type)
+      return
+    }
+    if (file.size > maxBytes) {
+      console.error("[SmartImageEditor] direct upload too large:", file.size)
+      return
+    }
+    directUploading = { ...directUploading, [variantName]: true }
+    variantStates = {
+      ...variantStates,
+      [variantName]: { status: "loading" },
+    }
+    try {
+      const result = await onDirectUpload(variantName, file)
+      if (result) {
+        variantStates = {
+          ...variantStates,
+          [variantName]: { status: "done", result },
+        }
+        onComplete?.([result])
+      } else {
+        // Host returned null = failed; reset to idle so the cell becomes a
+        // drop target again.
+        const next = { ...variantStates }
+        delete next[variantName]
+        variantStates = next
+      }
+    } catch (err) {
+      variantStates = {
+        ...variantStates,
+        [variantName]: {
+          status: "error",
+          message: err instanceof Error ? err.message : "Upload failed",
+        },
+      }
+    } finally {
+      const next = { ...directUploading }
+      delete next[variantName]
+      directUploading = next
+    }
+  }
+
+  function onTileDragOver(variantName: string, e: DragEvent) {
+    if (!onDirectUpload) return
+    e.preventDefault()
+    dragOverTile = variantName
+  }
+  function onTileDragLeave(variantName: string, e: DragEvent) {
+    if (dragOverTile !== variantName) return
+    if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) {
+      dragOverTile = null
+    }
+  }
+  function onTileDrop(variantName: string, e: DragEvent) {
+    e.preventDefault()
+    dragOverTile = null
+    const file = e.dataTransfer?.files[0]
+    if (file) handleDirectUpload(variantName, file)
+  }
+  function onTileFileInput(variantName: string, e: Event) {
+    const input = e.target as HTMLInputElement
+    const file = input.files?.[0]
+    if (file) handleDirectUpload(variantName, file)
+    input.value = ""
+  }
+
+  // ─── Per-variant delete (with confirm) ──────────────────────────────────
+  let deleteTarget = $state<string | null>(null)
+  let deleting = $state(false)
+
+  function requestDelete(variantName: string) {
+    deleteTarget = variantName
+  }
+  function cancelDelete() {
+    if (deleting) return
+    deleteTarget = null
+  }
+  async function confirmDelete() {
+    if (!deleteTarget || !onDelete) {
+      deleteTarget = null
+      return
+    }
+    deleting = true
+    try {
+      const ok = await onDelete(deleteTarget)
+      if (ok !== false) {
+        const next = { ...variantStates }
+        delete next[deleteTarget]
+        variantStates = next
+      }
+    } catch (err) {
+      console.error("[SmartImageEditor] delete failed:", err)
+    } finally {
+      deleting = false
+      deleteTarget = null
+    }
+  }
+
+  // ─── Drag handlers ────────────────────────────────────────────────────────
+  function onDragOver(e: DragEvent) {
+    e.preventDefault()
+    isDragging = true
+  }
+  function onDragLeave(e: DragEvent) {
+    if (!(e.currentTarget as HTMLElement).contains(e.relatedTarget as Node)) {
+      isDragging = false
+    }
+  }
+  function onDrop(e: DragEvent) {
+    e.preventDefault()
+    isDragging = false
+    const file = e.dataTransfer?.files[0]
+    if (file) handleFile(file)
+  }
+  function onFileInput(e: Event) {
+    const input = e.target as HTMLInputElement
+    const file = input.files?.[0]
+    if (file) handleFile(file)
+    // Reset so same file can be re-selected
+    input.value = ""
+  }
+  function onDropZoneKey(e: KeyboardEvent) {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault()
+      ;(e.currentTarget as HTMLElement).querySelector("input")?.click()
+    }
+  }
+
+  function clearSimple() {
+    if (value.startsWith("blob:")) URL.revokeObjectURL(value)
+    value = ""
+    error = ""
+  }
+
+  $effect(() => {
+    return () => {
+      if (value.startsWith("blob:")) URL.revokeObjectURL(value)
+    }
+  })
+
+  // ─── Helpers ──────────────────────────────────────────────────────────────
+  function variantLabel(name: string) {
+    return name
+      .replace(/_/g, " ")
+      .replace(/\b\w/g, (c) => c.toUpperCase())
+  }
+
+  // OG image is 2-col wide (wider aspect)
+  function isWideVariant(name: string) {
+    return name === "og_image" || name === "og"
+  }
+</script>
+
+<!-- ─── Simple mode ─────────────────────────────────────────────────────── -->
+{#if !isEditorMode}
+  {#if value}
+    <div class="relative w-full h-40 bg-base-200 rounded-md overflow-hidden">
+      <img src={value} alt="Uploaded" class="w-full h-full object-contain" />
+      <button
+        type="button"
+        class="btn btn-sm btn-circle absolute top-2 right-2 bg-base-100/80"
+        onclick={clearSimple}
+        aria-label="Remove image"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+      </button>
+    </div>
+  {:else}
+    <label
+      class="flex flex-col items-center justify-center w-full h-32 border-2 border-dashed rounded-md cursor-pointer transition-all duration-200
+        {isDragging
+          ? 'border-primary bg-primary/8 scale-[1.01]'
+          : 'border-base-content/20 bg-base-200 hover:bg-base-300 hover:border-base-content/30'}"
+      ondragover={onDragOver}
+      ondragleave={onDragLeave}
+      ondrop={onDrop}
+    >
+      <div class="flex flex-col items-center justify-center pt-5 pb-6 pointer-events-none">
+        {#if isDragging}
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mb-2 text-primary"><path d="M12 15V3"/><path d="M7 10l5 5 5-5"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></svg>
+          <p class="mb-2 text-sm font-semibold text-primary">Drop to upload</p>
+        {:else}
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mb-2 text-base-content/40"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
+          <p class="mb-2 text-sm"><span class="font-semibold">Click to upload</span> or drag and drop</p>
+          <p class="text-xs text-base-content/45">PNG, JPG, WebP or SVG (max {maxSizeMb} MB)</p>
+        {/if}
+      </div>
+      <input type="file" class="hidden" {accept} onchange={onFileInput} />
+    </label>
+  {/if}
+
+  {#if error}
+    <p class="text-error text-sm mt-1" role="alert">{error}</p>
+  {/if}
+
+<!-- ─── Editor mode ──────────────────────────────────────────────────────── -->
+{:else}
+  <div class="w-full space-y-4">
+
+    <!-- AI dropzone — re-framed as the "smart" path. The variant grid below
+         offers the "direct upload to specific slot" path. Both are valid
+         workflows and labeled distinctly so the user knows which is which. -->
+    {#if isEditorMode}
+      <div class="flex items-center justify-between gap-2 text-xs">
+        <div class="flex items-center gap-1.5 text-base-content/70 font-medium">
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-primary"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></svg>
+          AI mode — regenerates all 4 slots from one source
+        </div>
+        {#if onDirectUpload}
+          <span class="text-base-content/45">or upload each slot directly below ↓</span>
+        {/if}
+      </div>
+    {/if}
+    <div
+      role="button"
+      tabindex="0"
+      class="w-full border-2 border-dashed rounded-md px-6 py-8 text-center cursor-pointer transition-all duration-200 focus-visible:outline-2 focus-visible:outline-primary
+        {isDragging
+          ? 'border-primary bg-primary/8 scale-[1.005]'
+          : 'border-base-content/20 bg-base-200 hover:bg-base-300 hover:border-base-content/30'}"
+      ondragover={onDragOver}
+      ondragleave={onDragLeave}
+      ondrop={onDrop}
+      onkeydown={onDropZoneKey}
+      aria-label="Drop image here for AI variant generation, or press Enter to browse"
+    >
+      <label class="flex flex-col items-center gap-2 cursor-pointer">
+        {#if processing}
+          <!-- Processing indicator -->
+          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-primary animate-spin motion-reduce:hidden" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
+          <span class="sr-only motion-reduce:not-sr-only text-sm">Processing…</span>
+          <p class="text-sm text-primary font-medium motion-reduce:hidden" aria-live="polite">Removing background and generating variants…</p>
+        {:else if isDragging}
+          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-primary"><path d="M12 15V3"/><path d="M7 10l5 5 5-5"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></svg>
+          <p class="text-sm font-semibold text-primary">Drop to process</p>
+        {:else}
+          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-base-content/40"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
+          <p class="text-sm">
+            <span class="font-semibold">Drop your master logo here</span> or click to browse
+          </p>
+          <p class="text-xs text-base-content/45">PNG, JPG, WebP or SVG · max {maxSizeMb} MB · replaces all 4 slots</p>
+        {/if}
+        <input type="file" class="hidden" {accept} onchange={onFileInput} disabled={processing} />
+      </label>
+    </div>
+
+    <!-- Top-level error -->
+    {#if error}
+      <div class="flex items-start gap-2 p-3 rounded-md bg-error/10 border border-error/20" role="alert">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-error mt-0.5 shrink-0"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
+        <div class="flex-1 min-w-0">
+          <p class="text-sm text-error">{error}</p>
+        </div>
+        <button
+          type="button"
+          class="btn btn-xs btn-ghost text-error"
+          onclick={() => { error = ""; if (sourceFile) runPipeline(sourceFile, spec!.variants.map((v: ImageVariantSpec) => v.name)) }}
+          aria-label="Retry processing"
+        >
+          Retry
+        </button>
+      </div>
+    {/if}
+
+    <!-- Variant grid — always rendered in editor mode so empty slots are
+         visible up front. Each cell decides its render based on state
+         (loading / done / error) or falls through to the "idle" drop-target
+         when there's no state yet AND onDirectUpload is wired in. Without
+         onDirectUpload, idle cells show a passive "waiting for AI" hint
+         (preserves the original behaviour where the grid only appeared
+         after processing kicked off). -->
+    {#if spec}
+      <div class="grid grid-cols-4 gap-3">
+
+        {#each spec.variants as variant (variant.name)}
+          {@const state = variantStates[variant.name]}
+          {@const wide = isWideVariant(variant.name)}
+
+          <div
+            class="relative rounded-lg overflow-hidden border border-base-content/10 bg-base-100
+              {wide ? 'col-span-2' : 'col-span-1'}"
+          >
+            {#if !state && onDirectUpload}
+              <!-- Idle cell: direct-upload drop target. Same drag/click UX
+                   as the main AI dropzone but scoped to this variant. -->
+              <!-- svelte-ignore a11y_label_has_associated_control -->
+              <label
+                class="cursor-pointer {wide ? 'aspect-video' : 'aspect-square'} flex flex-col items-center justify-center gap-1 border-2 border-dashed transition-colors duration-150 px-2 text-center
+                  {dragOverTile === variant.name
+                    ? 'border-primary bg-primary/10'
+                    : 'border-base-content/15 bg-base-200/40 hover:border-base-content/30 hover:bg-base-200'}"
+                ondragover={(e) => onTileDragOver(variant.name, e)}
+                ondragleave={(e) => onTileDragLeave(variant.name, e)}
+                ondrop={(e) => onTileDrop(variant.name, e)}
+                aria-label="Upload {variantLabel(variant.name)} directly"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-base-content/40">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                  <polyline points="17 8 12 3 7 8"/>
+                  <line x1="12" x2="12" y1="3" y2="15"/>
+                </svg>
+                <p class="text-[0.7rem] font-medium text-base-content/70 leading-tight">
+                  Upload {variantLabel(variant.name).toLowerCase()}
+                </p>
+                <p class="text-[0.65rem] text-base-content/40 leading-tight">
+                  Drop or click
+                </p>
+                <input
+                  type="file"
+                  class="hidden"
+                  {accept}
+                  onchange={(e) => onTileFileInput(variant.name, e)}
+                />
+              </label>
+
+            {:else if !state}
+              <!-- Idle cell, no direct upload — neutral placeholder so the
+                   grid stays uniform when only AI mode is wired. -->
+              <div class="{wide ? 'aspect-video' : 'aspect-square'} flex flex-col items-center justify-center gap-1 bg-base-200/40 text-center px-2">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-base-content/30">
+                  <rect x="3" y="3" width="18" height="18" rx="2"/>
+                  <circle cx="9" cy="9" r="2"/>
+                  <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/>
+                </svg>
+                <p class="text-[0.7rem] text-base-content/45">{variantLabel(variant.name)}</p>
+              </div>
+
+            {:else if state.status === "loading"}
+              <!-- Skeleton cell -->
+              <div class="aspect-square flex flex-col">
+                <div class="flex-1 animate-skeleton-pulse bg-base-200"></div>
+                <div class="p-2 space-y-1">
+                  <div class="h-3 w-2/3 rounded animate-skeleton-pulse bg-base-200"></div>
+                  <div class="h-2 w-1/2 rounded animate-skeleton-pulse bg-base-200"></div>
+                </div>
+              </div>
+
+            {:else if state.status === "done"}
+              <!-- Resolved cell — also accepts drag-drop/click-to-replace when
+                   onDirectUpload is wired so the user can replace an existing
+                   asset without having to delete first. -->
+              {@const result = state.result}
+              <!-- svelte-ignore a11y_no_static_element_interactions -->
+              <div
+                class="group relative {wide ? 'aspect-video' : 'aspect-square'} checkerboard"
+                ondragover={onDirectUpload ? (e) => onTileDragOver(variant.name, e) : undefined}
+                ondragleave={onDirectUpload ? (e) => onTileDragLeave(variant.name, e) : undefined}
+                ondrop={onDirectUpload ? (e) => onTileDrop(variant.name, e) : undefined}
+              >
+                <img
+                  src={result.url}
+                  alt={variantLabel(variant.name)}
+                  class="w-full h-full object-contain"
+                />
+
+                <!-- Drag-over replace overlay -->
+                {#if onDirectUpload && dragOverTile === variant.name}
+                  <div class="absolute inset-0 z-20 flex items-center justify-center bg-primary/25 border-2 border-primary rounded-sm pointer-events-none">
+                    <span class="text-xs font-semibold text-primary drop-shadow-sm">Drop to replace</span>
+                  </div>
+                {/if}
+
+                <!-- Background removal failed badge (logo cell only) -->
+                {#if backgroundRemovalFailed && variant.name === "logo"}
+                  <div class="absolute top-1 left-1 badge badge-warning badge-sm text-xs gap-1 max-w-full">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+                    Background not removed
+                  </div>
+                {/if}
+                <!-- AI variant edit failed — fell back to Sharp-only resize -->
+                {#if result.aiEditFailed}
+                  <div
+                    class="absolute bottom-1 left-1 badge badge-warning badge-sm text-xs gap-1 max-w-full"
+                    title="Gemini variant edit unavailable — Sharp resize fallback used"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+                    AI edit skipped
+                  </div>
+                {/if}
+                <!-- Top-left: Regenerate (AI flow, only when sourceFile is in memory) -->
+                {#if sourceFile}
+                  <button
+                    type="button"
+                    class="absolute top-1 left-1 btn btn-xs btn-circle bg-base-100/85 backdrop-blur-sm shadow-sm opacity-0 group-hover:opacity-100 transition-opacity tooltip tooltip-right z-10"
+                    data-tip="Regenerate this variant"
+                    onclick={() => regenerateVariant(variant.name)}
+                    aria-label="Regenerate {variantLabel(variant.name)}"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
+                  </button>
+                {/if}
+
+                <!-- Top-right: Delete (only when onDelete is wired in) -->
+                {#if onDelete}
+                  <button
+                    type="button"
+                    class="absolute top-1 right-1 btn btn-xs btn-circle bg-base-100/85 backdrop-blur-sm shadow-sm text-error hover:bg-error hover:text-error-content opacity-0 group-hover:opacity-100 transition-opacity tooltip tooltip-left z-10"
+                    data-tip="Remove permanently"
+                    onclick={() => requestDelete(variant.name)}
+                    aria-label="Delete {variantLabel(variant.name)}"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                  </button>
+                {/if}
+
+                <!-- Bottom-left: Replace (direct upload, bypasses AI) -->
+                {#if onDirectUpload}
+                  <!-- svelte-ignore a11y_label_has_associated_control -->
+                  <label
+                    class="absolute bottom-1 left-1 btn btn-xs btn-circle bg-base-100/85 backdrop-blur-sm shadow-sm opacity-0 group-hover:opacity-100 transition-opacity tooltip tooltip-right z-10 cursor-pointer"
+                    data-tip="Replace with your own file"
+                    aria-label="Replace {variantLabel(variant.name)}"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>
+                    <input type="file" class="hidden" {accept} onchange={(e) => onTileFileInput(variant.name, e)} />
+                  </label>
+                {/if}
+
+                <!-- Bottom-right: Download -->
+                <a
+                  href={result.url}
+                  download="{variant.name}.png"
+                  target="_blank"
+                  rel="noopener"
+                  class="absolute bottom-1 right-1 btn btn-xs btn-circle bg-base-100/85 backdrop-blur-sm shadow-sm opacity-0 group-hover:opacity-100 transition-opacity tooltip tooltip-left z-10"
+                  data-tip="Download PNG"
+                  aria-label="Download {variantLabel(variant.name)}"
+                  onclick={(e) => e.stopPropagation()}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                </a>
+              </div>
+              <div class="p-2">
+                <p class="text-xs font-medium truncate">{variantLabel(variant.name)}</p>
+                {#if result.width && result.height}
+                  <p class="text-xs text-base-content/45">{result.width}×{result.height}</p>
+                {/if}
+              </div>
+
+            {:else if state.status === "error"}
+              <!-- Error cell -->
+              <div class="{wide ? 'aspect-video' : 'aspect-square'} flex flex-col items-center justify-center gap-1 bg-error/5 p-3" role="alert">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-error"><circle cx="12" cy="12" r="10"/><line x1="12" x2="12" y1="8" y2="12"/><line x1="12" x2="12.01" y1="16" y2="16"/></svg>
+                <p class="text-xs text-error text-center line-clamp-2">{state.message}</p>
+                <button
+                  type="button"
+                  class="btn btn-xs btn-ghost text-error mt-1"
+                  onclick={() => regenerateVariant(variant.name)}
+                >
+                  Retry
+                </button>
+              </div>
+              <div class="p-2">
+                <p class="text-xs font-medium truncate">{variantLabel(variant.name)}</p>
+              </div>
+            {/if}
+          </div>
+        {/each}
+
+      </div>
+
+      <!-- backgroundRemovalFailed warning (non-blocking, below grid) -->
+      {#if backgroundRemovalFailed && hasResults}
+        <p class="text-xs text-warning">
+          Background removal unavailable (Gemini API). You can still save — variants were processed without it.
+        </p>
+      {/if}
+    {/if}
+
+  </div>
+{/if}
+
+<!-- Delete confirmation modal — daisyUI modal pattern (open-class controlled) -->
+{#if deleteTarget}
+  <div
+    class="modal modal-open"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="sie-del-title"
+  >
+    <div class="modal-box">
+      <h3 id="sie-del-title" class="font-semibold text-lg flex items-center gap-2">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="text-error"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+        Remove {variantLabel(deleteTarget)}?
+      </h3>
+      <p class="text-sm text-base-content/70 mt-2">
+        This permanently deletes the {variantLabel(deleteTarget).toLowerCase()} file from storage and clears its URL. <strong>It cannot be undone</strong> — you'll need to upload again to get it back.
+      </p>
+      <div class="modal-action">
+        <button
+          type="button"
+          class="btn btn-ghost"
+          onclick={cancelDelete}
+          disabled={deleting}
+        >
+          Cancel
+        </button>
+        <button
+          type="button"
+          class="btn btn-error"
+          onclick={confirmDelete}
+          disabled={deleting}
+        >
+          {#if deleting}
+            <span class="loading loading-spinner loading-xs"></span>
+            Deleting…
+          {:else}
+            Delete permanently
+          {/if}
+        </button>
+      </div>
+    </div>
+    <button type="button" class="modal-backdrop" onclick={cancelDelete} aria-label="Close"></button>
+  </div>
+{/if}
+
+<style>
+  .checkerboard {
+    background-color: #fff;
+    background-image: repeating-conic-gradient(#e0e0e0 0% 25%, transparent 0% 50%);
+    background-size: 16px 16px;
+  }
+
+  :global(.animate-scale-in-center) {
+    animation: scale-in-center 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+  }
+
+  @keyframes scale-in-center {
+    0% { transform: scale(0.85); opacity: 0; }
+    100% { transform: scale(1); opacity: 1; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :global(.animate-scale-in-center),
+    :global(.animate-skeleton-pulse) {
+      animation: none !important;
+    }
+  }
+</style>