@joewinke/jatui 0.1.10 → 0.1.19

package/src/lib/components/MediaWorkbench.svelte

@@ -0,0 +1,871 @@
+<script lang="ts">
+  // ─── Annotation drawing primitives ───────────────────────────────────────
+  type ShapeType = 'arrow' | 'rectangle' | 'ellipse' | 'freehand' | 'text'
+  type Point = { x: number; y: number }
+  type AnnotShape =
+    | { id: number; type: 'arrow'; color: string; sw: number; start: Point; end: Point }
+    | { id: number; type: 'rectangle'; color: string; sw: number; start: Point; end: Point }
+    | { id: number; type: 'ellipse'; color: string; sw: number; start: Point; end: Point }
+    | { id: number; type: 'freehand'; color: string; sw: number; points: Point[] }
+    | { id: number; type: 'text'; color: string; sw: number; position: Point; content: string; fontSize: number }
+
+  const ANNOT_COLORS = ['#ef4444', '#eab308', '#3b82f6', '#111827', '#ffffff']
+  const ANNOT_SW = 3
+
+  function renderAnnotShape(ctx: CanvasRenderingContext2D, shape: AnnotShape) {
+    ctx.save()
+    ctx.strokeStyle = shape.color
+    ctx.lineWidth = shape.sw
+    ctx.lineCap = 'round'
+    ctx.lineJoin = 'round'
+    switch (shape.type) {
+      case 'arrow': {
+        ctx.beginPath()
+        ctx.moveTo(shape.start.x, shape.start.y)
+        ctx.lineTo(shape.end.x, shape.end.y)
+        ctx.stroke()
+        const angle = Math.atan2(shape.end.y - shape.start.y, shape.end.x - shape.start.x)
+        const hl = 14, ha = Math.PI / 7
+        ctx.beginPath()
+        ctx.moveTo(shape.end.x, shape.end.y)
+        ctx.lineTo(shape.end.x - hl * Math.cos(angle - ha), shape.end.y - hl * Math.sin(angle - ha))
+        ctx.moveTo(shape.end.x, shape.end.y)
+        ctx.lineTo(shape.end.x - hl * Math.cos(angle + ha), shape.end.y - hl * Math.sin(angle + ha))
+        ctx.stroke()
+        break
+      }
+      case 'rectangle': {
+        const x = Math.min(shape.start.x, shape.end.x)
+        const y = Math.min(shape.start.y, shape.end.y)
+        const w = Math.abs(shape.end.x - shape.start.x)
+        const h = Math.abs(shape.end.y - shape.start.y)
+        ctx.strokeRect(x, y, w, h)
+        break
+      }
+      case 'ellipse': {
+        const cx = (shape.start.x + shape.end.x) / 2
+        const cy = (shape.start.y + shape.end.y) / 2
+        const rx = Math.abs(shape.end.x - shape.start.x) / 2
+        const ry = Math.abs(shape.end.y - shape.start.y) / 2
+        if (rx < 1 || ry < 1) break
+        ctx.beginPath()
+        ctx.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2)
+        ctx.stroke()
+        break
+      }
+      case 'freehand': {
+        if (shape.points.length < 2) break
+        ctx.beginPath()
+        ctx.moveTo(shape.points[0].x, shape.points[0].y)
+        for (let i = 1; i < shape.points.length; i++) ctx.lineTo(shape.points[i].x, shape.points[i].y)
+        ctx.stroke()
+        break
+      }
+      case 'text': {
+        if (!shape.content) break
+        ctx.font = `bold ${shape.fontSize}px sans-serif`
+        ctx.textBaseline = 'top'
+        ctx.strokeStyle = '#000000'
+        ctx.lineWidth = 2
+        ctx.lineJoin = 'round'
+        ctx.strokeText(shape.content, shape.position.x, shape.position.y)
+        ctx.fillStyle = shape.color
+        ctx.fillText(shape.content, shape.position.x, shape.position.y)
+        break
+      }
+    }
+    ctx.restore()
+  }
+
+  // ─── Component props + core state ────────────────────────────────────────
+  type Tab = "generate" | "edit" | "remove-bg" | "annotate"
+
+  let {
+    value = $bindable(null),
+    uploadEndpoint = "/api/media",
+    onComplete = undefined,
+    accept = "image/png,image/jpeg,image/webp,image/gif",
+  } = $props<{
+    value?: string | null
+    uploadEndpoint?: string
+    onComplete?: (url: string) => void
+    accept?: string
+  }>()
+
+  let open = $state(false)
+  let activeTab = $state<Tab>("generate")
+  let workingUrl = $state<string | null>(null)
+  let error = $state("")
+  let busy = $state(false)
+  let generatePrompt = $state("")
+  let generateAspect = $state("")
+  let editInstruction = $state("")
+
+  const previewUrl = $derived(workingUrl ?? value)
+
+  // ─── Annotation state ────────────────────────────────────────────────────
+  let annotTool = $state<ShapeType>('arrow')
+  let annotColor = $state(ANNOT_COLORS[0])
+  let annotShapes = $state<AnnotShape[]>([])
+  let annotDrawState = $state<'idle' | 'drawing' | 'typing'>('idle')
+  let imgW = $state(0)
+  let imgH = $state(0)
+  let annotLoaded = $state(false)
+  let baseCanvas = $state<HTMLCanvasElement | undefined>(undefined)
+  let overlayCanvas = $state<HTMLCanvasElement | undefined>(undefined)
+  let annotTextInput = $state<HTMLInputElement | undefined>(undefined)
+  let annotTextInputCss = $state({ left: '0px', top: '0px' })
+  let annotTextValue = $state('')
+
+  // Non-reactive draw buffers
+  let _annotImg: HTMLImageElement | null = null
+  let _annotStartPoint: Point = { x: 0, y: 0 }
+  let _annotFreehandPts: Point[] = []
+  let _annotNextId = 1
+  let _annotTextPos: Point = { x: 0, y: 0 }
+
+  // Load source image when annotate tab opens or source URL changes
+  $effect(() => {
+    if (activeTab !== 'annotate') {
+      annotLoaded = false
+      annotShapes = []
+      return
+    }
+    const url = workingUrl ?? value
+    if (!url) return
+    annotLoaded = false
+    annotShapes = []
+    _annotImg = null
+    _annotNextId = 1
+    const img = new Image()
+    img.onload = () => {
+      imgW = img.naturalWidth
+      imgH = img.naturalHeight
+      _annotImg = img
+      annotLoaded = true
+    }
+    img.src = url
+  })
+
+  // Draw base canvas once both image and canvas element are ready
+  $effect(() => {
+    if (!annotLoaded || !baseCanvas) return
+    requestAnimationFrame(() => redrawAnnotBase())
+  })
+
+  function redrawAnnotBase() {
+    if (!baseCanvas || !_annotImg) return
+    const ctx = baseCanvas.getContext('2d')
+    if (!ctx) return
+    ctx.clearRect(0, 0, imgW, imgH)
+    ctx.drawImage(_annotImg, 0, 0, imgW, imgH)
+    for (const s of annotShapes) renderAnnotShape(ctx, s)
+  }
+
+  function clearAnnotOverlay() {
+    if (!overlayCanvas) return
+    const ctx = overlayCanvas.getContext('2d')
+    if (!ctx) return
+    ctx.clearRect(0, 0, imgW, imgH)
+  }
+
+  function canvasCoords(e: MouseEvent): Point {
+    if (!overlayCanvas) return { x: 0, y: 0 }
+    const rect = overlayCanvas.getBoundingClientRect()
+    return {
+      x: (e.clientX - rect.left) * (imgW / rect.width),
+      y: (e.clientY - rect.top) * (imgH / rect.height),
+    }
+  }
+
+  function canvasToCss(p: Point): { left: string; top: string } {
+    if (!overlayCanvas) return { left: '0px', top: '0px' }
+    const rect = overlayCanvas.getBoundingClientRect()
+    return {
+      left: `${rect.left + p.x / (imgW / rect.width)}px`,
+      top: `${rect.top + p.y / (imgH / rect.height)}px`,
+    }
+  }
+
+  function buildAnnotShape(end: Point): AnnotShape | null {
+    const base = { id: _annotNextId++, color: annotColor, sw: ANNOT_SW }
+    switch (annotTool) {
+      case 'arrow': return { ...base, type: 'arrow', start: { ..._annotStartPoint }, end }
+      case 'rectangle': return { ...base, type: 'rectangle', start: { ..._annotStartPoint }, end }
+      case 'ellipse': return { ...base, type: 'ellipse', start: { ..._annotStartPoint }, end }
+      case 'freehand': return { ...base, type: 'freehand', points: [..._annotFreehandPts, end] }
+      default: return null
+    }
+  }
+
+  function onAnnotPointerDown(e: MouseEvent) {
+    if (annotDrawState === 'typing') { commitAnnotText(); return }
+    const p = canvasCoords(e)
+    if (annotTool === 'text') {
+      annotDrawState = 'typing'
+      _annotTextPos = p
+      annotTextInputCss = canvasToCss(p)
+      annotTextValue = ''
+      requestAnimationFrame(() => annotTextInput?.focus())
+      return
+    }
+    annotDrawState = 'drawing'
+    _annotStartPoint = p
+    _annotFreehandPts = [p]
+  }
+
+  function onAnnotPointerMove(e: MouseEvent) {
+    if (annotDrawState !== 'drawing') return
+    const p = canvasCoords(e)
+    if (annotTool === 'freehand') _annotFreehandPts.push(p)
+    clearAnnotOverlay()
+    const preview = buildAnnotShape(p)
+    if (preview && overlayCanvas) {
+      const ctx = overlayCanvas.getContext('2d')
+      if (ctx) renderAnnotShape(ctx, preview)
+    }
+  }
+
+  function onAnnotPointerUp(e: MouseEvent) {
+    if (annotDrawState !== 'drawing') return
+    const p = canvasCoords(e)
+    const shape = buildAnnotShape(p)
+    if (shape) annotShapes = [...annotShapes, shape]
+    annotDrawState = 'idle'
+    _annotFreehandPts = []
+    clearAnnotOverlay()
+    redrawAnnotBase()
+  }
+
+  function onAnnotCanvasLeave() {
+    if (annotDrawState === 'drawing') {
+      annotDrawState = 'idle'
+      _annotFreehandPts = []
+      clearAnnotOverlay()
+    }
+  }
+
+  function commitAnnotText() {
+    if (annotTextValue.trim()) {
+      const shape: AnnotShape = {
+        id: _annotNextId++,
+        type: 'text',
+        color: annotColor,
+        sw: ANNOT_SW,
+        position: { ..._annotTextPos },
+        content: annotTextValue.trim(),
+        fontSize: 20,
+      }
+      annotShapes = [...annotShapes, shape]
+      redrawAnnotBase()
+    }
+    annotTextValue = ''
+    annotDrawState = 'idle'
+  }
+
+  function handleAnnotTextKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') { e.preventDefault(); commitAnnotText() }
+    else if (e.key === 'Escape') { e.preventDefault(); annotTextValue = ''; annotDrawState = 'idle' }
+  }
+
+  function annotUndo() {
+    if (annotShapes.length === 0) return
+    annotShapes = annotShapes.slice(0, -1)
+    redrawAnnotBase()
+  }
+
+  function annotClear() {
+    annotShapes = []
+    redrawAnnotBase()
+  }
+
+  async function doAnnotateSave() {
+    if (!_annotImg || imgW === 0 || busy) return
+    error = ""
+    busy = true
+    try {
+      const offscreen = document.createElement('canvas')
+      offscreen.width = imgW
+      offscreen.height = imgH
+      const ctx = offscreen.getContext('2d')
+      if (!ctx) throw new Error('Canvas context unavailable')
+      ctx.drawImage(_annotImg, 0, 0, imgW, imgH)
+      for (const s of annotShapes) renderAnnotShape(ctx, s)
+      const blob = await new Promise<Blob>((resolve, reject) =>
+        offscreen.toBlob((b) => b ? resolve(b) : reject(new Error('toBlob failed')), 'image/png')
+      )
+      if (workingUrl?.startsWith("blob:")) URL.revokeObjectURL(workingUrl)
+      workingUrl = URL.createObjectURL(blob)
+      annotShapes = []
+      activeTab = "edit"
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e)
+    } finally {
+      busy = false
+    }
+  }
+
+  // ─── Core modal actions ───────────────────────────────────────────────────
+  function openModal() {
+    workingUrl = null
+    error = ""
+    generatePrompt = ""
+    editInstruction = ""
+    activeTab = value ? "edit" : "generate"
+    open = true
+  }
+
+  function closeModal() {
+    if (workingUrl?.startsWith("blob:")) URL.revokeObjectURL(workingUrl)
+    workingUrl = null
+    error = ""
+    open = false
+  }
+
+  async function doGenerate() {
+    if (!generatePrompt.trim() || busy) return
+    error = ""
+    busy = true
+    try {
+      const res = await fetch("/api/media/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          prompt: generatePrompt,
+          ...(generateAspect && { aspect_ratio: generateAspect }),
+        }),
+      })
+      const body = await res.json().catch(() => ({})) as { error?: string; url?: string }
+      if (!res.ok) throw new Error(body.error ?? `HTTP ${res.status}`)
+      if (!body.url) throw new Error("No URL returned")
+      workingUrl = body.url
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e)
+    } finally {
+      busy = false
+    }
+  }
+
+  async function doEdit() {
+    const sourceUrl = workingUrl ?? value
+    if (!sourceUrl || !editInstruction.trim() || busy) return
+    error = ""
+    busy = true
+    try {
+      const res = await fetch("/api/media/edit", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ imageUrl: sourceUrl, instruction: editInstruction }),
+      })
+      const body = await res.json().catch(() => ({})) as { error?: string; url?: string }
+      if (!res.ok) throw new Error(body.error ?? `HTTP ${res.status}`)
+      if (!body.url) throw new Error("No URL returned")
+      workingUrl = body.url
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e)
+    } finally {
+      busy = false
+    }
+  }
+
+  async function doRemoveBg() {
+    const sourceUrl = workingUrl ?? value
+    if (!sourceUrl || busy) return
+    error = ""
+    busy = true
+    try {
+      const imgRes = await fetch(sourceUrl)
+      if (!imgRes.ok) throw new Error("Could not fetch source image")
+      const blob = await imgRes.blob()
+      const fd = new FormData()
+      fd.append("image", blob, "source.png")
+      const res = await fetch("/api/media/remove-bg", { method: "POST", body: fd })
+      if (!res.ok) {
+        const msg = await res.text().catch(() => res.statusText)
+        throw new Error(msg || `HTTP ${res.status}`)
+      }
+      const pngBlob = await res.blob()
+      if (workingUrl?.startsWith("blob:")) URL.revokeObjectURL(workingUrl)
+      workingUrl = URL.createObjectURL(pngBlob)
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e)
+    } finally {
+      busy = false
+    }
+  }
+
+  async function doSave() {
+    const result = workingUrl ?? value
+    if (!result || busy) return
+    error = ""
+    busy = true
+    try {
+      let finalUrl = result
+      if (result.startsWith("blob:")) {
+        const blob = await fetch(result).then((r) => r.blob())
+        const fd = new FormData()
+        fd.append("files", blob, "image.png")
+        const res = await fetch(uploadEndpoint, { method: "POST", body: fd })
+        const body = await res.json().catch(() => ({})) as { error?: string; uploaded?: { url: string }[]; url?: string }
+        if (!res.ok) throw new Error(body.error ?? `Upload failed: HTTP ${res.status}`)
+        finalUrl = body.uploaded?.[0]?.url ?? body.url ?? result
+      }
+      if (value?.startsWith("blob:") && finalUrl !== value) URL.revokeObjectURL(value)
+      value = finalUrl
+      onComplete?.(finalUrl)
+      workingUrl = null
+      open = false
+    } catch (e) {
+      error = e instanceof Error ? e.message : String(e)
+    } finally {
+      busy = false
+    }
+  }
+
+  function handleTriggerFile(e: Event) {
+    const file = (e.target as HTMLInputElement).files?.[0]
+    if (!file) return
+    if (value?.startsWith("blob:")) URL.revokeObjectURL(value)
+    value = URL.createObjectURL(file)
+    ;(e.target as HTMLInputElement).value = ""
+  }
+
+  // Tool metadata
+  const annotToolMeta: { type: ShapeType; label: string; path?: string; isEllipse?: boolean }[] = [
+    { type: 'arrow', label: 'Arrow', path: 'M5 19L19 5M19 5H9M19 5V15' },
+    { type: 'ellipse', label: 'Oval', isEllipse: true },
+    { type: 'rectangle', label: 'Rect', path: 'M3 5h18v14H3z' },
+    { type: 'freehand', label: 'Draw', path: 'M3 17c1-2 3-6 5-6s3 4 5 4 3-6 5-6 2 4 3 4' },
+    { type: 'text', label: 'Text', path: 'M6 4v16M18 4v16M6 12h12M8 4H4M20 4h-4M8 20H4M20 20h-4' },
+  ]
+</script>
+
+<!-- ─── Trigger ──────────────────────────────────────────────────────────── -->
+<div class="w-full">
+  {#if value}
+    <div class="relative group overflow-hidden rounded-lg border border-base-content/10 bg-base-200">
+      <img src={value} alt="Current media" class="w-full aspect-video object-contain checkerboard" />
+      <div class="absolute inset-0 bg-base-content/0 group-hover:bg-base-content/30 transition-colors duration-150 flex items-center justify-center">
+        <button
+          type="button"
+          class="btn btn-sm btn-primary gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity duration-150"
+          onclick={openModal}
+          aria-label="Edit image"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
+          Edit
+        </button>
+      </div>
+    </div>
+  {:else}
+    <div class="w-full rounded-lg border-2 border-dashed border-base-content/20 bg-base-200/40 flex flex-col items-center justify-center gap-3 py-10 px-4">
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" 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-sm text-base-content/50">No image</p>
+      <div class="flex gap-2">
+        <button type="button" class="btn btn-primary btn-sm gap-1.5" onclick={openModal}>
+          <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>
+          Generate
+        </button>
+        <!-- svelte-ignore a11y_label_has_associated_control -->
+        <label class="btn btn-ghost btn-sm cursor-pointer">
+          Upload
+          <input type="file" class="hidden" {accept} onchange={handleTriggerFile} />
+        </label>
+      </div>
+    </div>
+  {/if}
+</div>
+
+<!-- ─── Modal ────────────────────────────────────────────────────────────── -->
+{#if open}
+  <div class="modal modal-open" role="dialog" aria-modal="true" aria-labelledby="mw-title">
+    <div class="modal-box max-w-3xl p-0 overflow-hidden flex flex-col max-h-[90vh]">
+
+      <!-- Header -->
+      <div class="flex items-center justify-between px-5 py-3 border-b border-base-content/10 shrink-0">
+        <h3 id="mw-title" class="font-semibold text-base">
+          {value ? "Edit Image" : "Create Image"}
+        </h3>
+        <button type="button" class="btn btn-sm btn-circle btn-ghost" onclick={closeModal} aria-label="Close">
+          <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>
+
+      <!-- Body: two-column -->
+      <div class="flex flex-1 min-h-0">
+
+        <!-- Left: preview / annotation canvas -->
+        <div class="w-72 shrink-0 border-r border-base-content/10 flex items-center justify-center relative bg-base-100 overflow-hidden">
+          {#if busy}
+            <div class="absolute inset-0 bg-base-200/60 flex flex-col items-center justify-center gap-2 z-10">
+              <span class="loading loading-spinner loading-md text-primary"></span>
+              <span class="text-xs text-base-content/60">Processing…</span>
+            </div>
+          {/if}
+
+          {#if activeTab === 'annotate' && previewUrl}
+            {#if annotLoaded}
+              <!-- Dual-canvas stack: base (rendered image + shapes) + overlay (drawing preview) -->
+              <div class="flex items-center justify-center w-full h-full p-2">
+                <div class="relative">
+                  <canvas
+                    bind:this={baseCanvas}
+                    width={imgW}
+                    height={imgH}
+                    style="max-width: 252px; max-height: 320px; display: block;"
+                  ></canvas>
+                  <!-- svelte-ignore a11y_no_static_element_interactions -->
+                  <canvas
+                    bind:this={overlayCanvas}
+                    width={imgW}
+                    height={imgH}
+                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+                    class={annotDrawState === 'typing' ? 'cursor-text' : 'cursor-crosshair'}
+                    onmousedown={onAnnotPointerDown}
+                    onmousemove={onAnnotPointerMove}
+                    onmouseup={onAnnotPointerUp}
+                    onmouseleave={onAnnotCanvasLeave}
+                  ></canvas>
+                </div>
+              </div>
+            {:else}
+              <!-- Loading spinner while image decodes -->
+              <span class="loading loading-spinner loading-sm text-base-content/30"></span>
+            {/if}
+          {:else if previewUrl}
+            <img src={previewUrl} alt="Preview" class="w-full h-full object-contain checkerboard" />
+          {:else}
+            <div class="flex flex-col items-center gap-2 p-6 text-center">
+              <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="text-base-content/20"><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>
+              <span class="text-xs text-base-content/40">Preview will appear here</span>
+            </div>
+          {/if}
+        </div>
+
+        <!-- Right: tabs + content -->
+        <div class="flex-1 flex flex-col min-w-0 min-h-0">
+
+          <!-- Tabs -->
+          <div class="tabs tabs-boxed gap-0 rounded-none px-3 py-2.5 bg-base-200/50 border-b border-base-content/10 shrink-0 flex-nowrap">
+            <button
+              type="button"
+              class="tab tab-sm gap-1.5 whitespace-nowrap {activeTab === 'generate' ? 'tab-active' : ''}"
+              onclick={() => { activeTab = "generate"; error = "" }}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>
+              Generate
+            </button>
+            <button
+              type="button"
+              class="tab tab-sm gap-1.5 whitespace-nowrap {activeTab === 'edit' ? 'tab-active' : ''}"
+              onclick={() => { activeTab = "edit"; error = "" }}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
+              Edit with AI
+            </button>
+            <button
+              type="button"
+              class="tab tab-sm gap-1.5 whitespace-nowrap {activeTab === 'remove-bg' ? 'tab-active' : ''}"
+              onclick={() => { activeTab = "remove-bg"; error = "" }}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>
+              Remove BG
+            </button>
+            <button
+              type="button"
+              class="tab tab-sm gap-1.5 whitespace-nowrap {activeTab === 'annotate' ? 'tab-active' : ''}"
+              onclick={() => { activeTab = "annotate"; error = "" }}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>
+              Annotate
+            </button>
+          </div>
+
+          <!-- Tab content -->
+          <div class="flex-1 overflow-y-auto p-4">
+
+            {#if activeTab === "generate"}
+              <div class="space-y-3">
+                <p class="text-xs text-base-content/60">Describe the image you want to create from scratch.</p>
+                <label class="form-control w-full" for="mw-prompt">
+                  <div class="label pb-1">
+                    <span class="label-text font-medium text-sm">Prompt</span>
+                  </div>
+                  <textarea
+                    id="mw-prompt"
+                    class="textarea textarea-bordered textarea-sm w-full text-sm"
+                    rows={4}
+                    placeholder="A professional product photo of a wooden cutting board on a marble counter, natural lighting, minimalist style…"
+                    bind:value={generatePrompt}
+                    disabled={busy}
+                  ></textarea>
+                </label>
+                <label class="form-control w-full" for="mw-aspect">
+                  <div class="label pb-1">
+                    <span class="label-text text-sm">Aspect ratio</span>
+                  </div>
+                  <div class="select select-sm select-bordered w-full">
+                    <select id="mw-aspect" bind:value={generateAspect} disabled={busy}>
+                      <option value="">Auto</option>
+                      <option value="1:1">1:1 — Square</option>
+                      <option value="4:3">4:3 — Landscape</option>
+                      <option value="16:9">16:9 — Widescreen</option>
+                      <option value="3:4">3:4 — Portrait</option>
+                      <option value="9:16">9:16 — Tall</option>
+                    </select>
+                  </div>
+                </label>
+                <button
+                  type="button"
+                  class="btn btn-primary btn-sm w-full gap-1.5"
+                  onclick={doGenerate}
+                  disabled={busy || !generatePrompt.trim()}
+                >
+                  {#if busy}
+                    <span class="loading loading-spinner loading-xs"></span>
+                    Generating…
+                  {:else}
+                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>
+                    Generate Image
+                  {/if}
+                </button>
+              </div>
+
+            {:else if activeTab === "edit"}
+              <div class="space-y-3">
+                {#if !previewUrl}
+                  <div class="rounded-lg bg-warning/10 border border-warning/20 p-3 text-xs text-warning">
+                    No image to edit yet — generate or upload one first.
+                  </div>
+                {:else}
+                  <p class="text-xs text-base-content/60">Describe how to change the image shown in the preview.</p>
+                {/if}
+                <label class="form-control w-full" for="mw-instruction">
+                  <div class="label pb-1">
+                    <span class="label-text font-medium text-sm">Instruction</span>
+                  </div>
+                  <textarea
+                    id="mw-instruction"
+                    class="textarea textarea-bordered textarea-sm w-full text-sm"
+                    rows={4}
+                    placeholder="Change the background to a light gray studio backdrop. Keep the product in place…"
+                    bind:value={editInstruction}
+                    disabled={busy || !previewUrl}
+                  ></textarea>
+                </label>
+                <button
+                  type="button"
+                  class="btn btn-primary btn-sm w-full gap-1.5"
+                  onclick={doEdit}
+                  disabled={busy || !previewUrl || !editInstruction.trim()}
+                >
+                  {#if busy}
+                    <span class="loading loading-spinner loading-xs"></span>
+                    Applying…
+                  {:else}
+                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/><path d="m15 5 4 4"/></svg>
+                    Apply Edit
+                  {/if}
+                </button>
+              </div>
+
+            {:else if activeTab === "remove-bg"}
+              <div class="space-y-3">
+                {#if !previewUrl}
+                  <div class="rounded-lg bg-warning/10 border border-warning/20 p-3 text-xs text-warning">
+                    No image loaded — generate or upload one first.
+                  </div>
+                {:else}
+                  <p class="text-xs text-base-content/60">
+                    Removes the background from the image in the preview, leaving only the subject on a transparent PNG.
+                  </p>
+                  <div class="rounded-lg bg-base-200/60 border border-base-content/10 p-3 flex items-start gap-3">
+                    <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" class="text-base-content/40 mt-0.5 shrink-0"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
+                    <p class="text-xs text-base-content/60">
+                      Works best on product photos and portraits. Processing takes 1–6 seconds.
+                    </p>
+                  </div>
+                {/if}
+                <button
+                  type="button"
+                  class="btn btn-primary btn-sm w-full gap-1.5"
+                  onclick={doRemoveBg}
+                  disabled={busy || !previewUrl}
+                >
+                  {#if busy}
+                    <span class="loading loading-spinner loading-xs"></span>
+                    Removing background…
+                  {:else}
+                    <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>
+                    Remove Background
+                  {/if}
+                </button>
+              </div>
+
+            {:else if activeTab === "annotate"}
+              <div class="space-y-4">
+                {#if !previewUrl}
+                  <div class="rounded-lg bg-warning/10 border border-warning/20 p-3 text-xs text-warning">
+                    No image loaded — generate or upload one first.
+                  </div>
+                {:else}
+                  <!-- Tool picker -->
+                  <div>
+                    <p class="text-xs font-medium text-base-content/50 mb-2">Tool</p>
+                    <div class="flex gap-1 flex-wrap">
+                      {#each annotToolMeta as tm}
+                        <button
+                          type="button"
+                          class="btn btn-xs gap-1 {annotTool === tm.type ? 'btn-primary' : 'btn-ghost border border-base-content/15'}"
+                          onclick={() => { annotTool = tm.type }}
+                          title={tm.label}
+                        >
+                          {#if tm.isEllipse}
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
+                              <ellipse cx="12" cy="12" rx="10" ry="7" stroke="currentColor" stroke-width="2" fill="none"/>
+                            </svg>
+                          {:else if tm.path}
+                            <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
+                              <path d={tm.path} stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+                            </svg>
+                          {/if}
+                          {tm.label}
+                        </button>
+                      {/each}
+                    </div>
+                  </div>
+
+                  <!-- Color picker -->
+                  <div>
+                    <p class="text-xs font-medium text-base-content/50 mb-2">Color</p>
+                    <div class="flex gap-2">
+                      {#each ANNOT_COLORS as c}
+                        <button
+                          type="button"
+                          class="w-6 h-6 rounded-full border-2 transition-transform duration-100 {annotColor === c ? 'scale-125 border-base-content' : 'border-transparent hover:scale-110'}"
+                          style="background: {c}; {c === '#111827' ? 'outline: 1px solid oklch(var(--bc)/0.2);' : ''}"
+                          onclick={() => { annotColor = c }}
+                          aria-label="Color {c}"
+                        ></button>
+                      {/each}
+                    </div>
+                  </div>
+
+                  <!-- Undo / Clear -->
+                  <div class="flex gap-2">
+                    <button
+                      type="button"
+                      class="btn btn-ghost btn-sm gap-1.5"
+                      onclick={annotUndo}
+                      disabled={annotShapes.length === 0}
+                      title="Undo (last shape)"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 10h10a5 5 0 015 5v0a5 5 0 01-5 5H8M3 10l4-4M3 10l4 4"/></svg>
+                      Undo
+                    </button>
+                    <button
+                      type="button"
+                      class="btn btn-ghost btn-sm gap-1.5"
+                      onclick={annotClear}
+                      disabled={annotShapes.length === 0}
+                      title="Clear all annotations"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18M8 6V4h8v2M10 11v6M14 11v6M5 6l1 14h12l1-14"/></svg>
+                      Clear
+                    </button>
+                  </div>
+
+                  <!-- Apply button -->
+                  <button
+                    type="button"
+                    class="btn btn-primary btn-sm w-full gap-1.5"
+                    onclick={doAnnotateSave}
+                    disabled={busy || !annotLoaded}
+                  >
+                    {#if busy}
+                      <span class="loading loading-spinner loading-xs"></span>
+                      Applying…
+                    {:else}
+                      <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 12 2 2 4-4"/><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+                      Apply Annotations
+                    {/if}
+                  </button>
+                  <p class="text-xs text-base-content/40 leading-relaxed">
+                    Flattens drawings onto the image. Then click <strong>Save</strong> to upload.
+                  </p>
+                {/if}
+              </div>
+            {/if}
+
+          </div>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="flex items-center justify-between px-5 py-3 border-t border-base-content/10 shrink-0 gap-4">
+        <div class="flex-1 min-w-0">
+          {#if error}
+            <p class="text-error text-xs line-clamp-2" role="alert">{error}</p>
+          {/if}
+        </div>
+        <div class="flex gap-2 shrink-0">
+          <button type="button" class="btn btn-ghost btn-sm" onclick={closeModal} disabled={busy}>
+            Cancel
+          </button>
+          <button
+            type="button"
+            class="btn btn-primary btn-sm gap-1.5"
+            onclick={doSave}
+            disabled={busy || !previewUrl}
+          >
+            {#if busy}
+              <span class="loading loading-spinner loading-xs"></span>
+            {:else}
+              <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/></svg>
+            {/if}
+            Save
+          </button>
+        </div>
+      </div>
+
+    </div>
+    <button type="button" class="modal-backdrop" onclick={closeModal} aria-label="Close"></button>
+  </div>
+
+  <!-- Text annotation overlay input (fixed, appears at cursor position on canvas) -->
+  {#if annotDrawState === 'typing'}
+    <input
+      bind:this={annotTextInput}
+      type="text"
+      class="annot-text-input"
+      style="left: {annotTextInputCss.left}; top: {annotTextInputCss.top}; color: {annotColor};"
+      bind:value={annotTextValue}
+      onkeydown={handleAnnotTextKeydown}
+      onblur={commitAnnotText}
+      placeholder="Type label…"
+      aria-label="Annotation text"
+    />
+  {/if}
+{/if}
+
+<style>
+  .checkerboard {
+    background-color: var(--color-base-100);
+    background-image: repeating-conic-gradient(var(--color-base-200) 0% 25%, transparent 0% 50%);
+    background-size: 16px 16px;
+  }
+
+  .annot-text-input {
+    position: fixed;
+    background: transparent;
+    border: 1px dashed rgba(255, 255, 255, 0.5);
+    outline: none;
+    font-size: 16px;
+    font-weight: bold;
+    font-family: sans-serif;
+    padding: 2px 4px;
+    z-index: 9999;
+    min-width: 80px;
+    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
+  }
+</style>