.

.gitignore

@@ -0,0 +1,7 @@
+backend/.venv/
+__pycache__/
+*.pyc
+.env.local
+frontend/node_modules/
+frontend/dist/
+.env*

FLOW.md

@@ -0,0 +1,71 @@
+# Cinematic product showcase flow
+
+This repo is a focused slice of a **python-backend**-style stack (same Veo, upload, and merge patterns): **shot planning → KIE Veo segments → FFmpeg merge**.
+
+## End-to-end
+
+```mermaid
+flowchart LR
+  A[Product brief + hero image] --> B["POST /api/showcase/plan-stream"]
+  B --> C[Segments JSON compatible with Veo]
+  C --> D["POST /api/veo/generate per shot"]
+  D --> E[SSE /api/veo/events]
+  E --> F["GET /api/veo/download per clip"]
+  F --> G["POST /api/export/merge"]
+  G --> H[Master MP4]
+```
+
+1. **Brief** — Product name, tagline, mood, optional features, hero image, shot count (3–6), segment length (4/6/8s), aspect ratio, seed, voice style.
+2. **Plan** — NDJSON stream builds a `SegmentsPayload` (same `VeoSegment` shape as the reference app). Uses **OpenAI** when `OPENAI_API_KEY` is set; otherwise a **built-in cinematic template**.
+3. **Render** — For each segment, the UI calls KIE **image-to-video** with the segment object as the structured prompt and the **hosted** hero image URL (see `/api/upload-image`).
+4. **Stitch** — Clips are merged with **`/api/export/merge`** (requires **ffmpeg** and **ffprobe** on the server).
+
+## GPT Image → Veo (optional)
+
+When enabled in the shot-plan step, each segment runs:
+
+1. **`POST /api/showcase/segment-first-frame`** — OpenAI **Images `edits`** with **1–4 reference URLs** (scraped gallery or hosted hero), **`input_fidelity: high`**, **`quality: high`**, model from **`GPT_IMAGE_MODEL`** (default **`gpt-image-1.5`**).
+2. The PNG is **hosted** on this API, then passed as the **single `imageUrls` entry** for **`/api/veo/generate`** so Veo animates from a keyframe that matches your product references.
+
+Requires **`OPENAI_API_KEY`** and a GPT Image-capable model on your account.
+
+## Product URL import
+
+- `POST /api/showcase/scrape` with JSON `{ "url": "<product page>" }` returns scraped fields plus `image_urls` and `source_url`.
+- `POST /api/host-image-url` with JSON `{ "url": "<image CDN URL>" }` downloads and hosts the image (same pipeline as upload) so KIE can fetch it.
+
+The UI calls these automatically when you use **Import product**.
+
+## Configuration
+
+- **Env files:** The API loads, in order (later overrides): repo `/.env`, `/.env.local`, `backend/.env`, `backend/.env.local`. Keep secrets in `.env.local` if you prefer.
+- **Frontend env:** Vite `envDir` is the **repo root**. In **development**, the UI uses **relative** `/api` URLs (same-origin) so **EventSource (Veo progress)** works through the Vite proxy — set **`VITE_DEV_PROXY_TARGET`** to your ngrok URL (or `http://127.0.0.1:4010`). Keep **`VITE_API_BASE_URL`** for the **Python app** (public URLs for KIE); the browser does not need to call that host directly unless you set `VITE_PUBLIC_API_IN_DEV=true`.
+- Set `KIE_API_KEY`, `VITE_API_BASE_URL` (public base URL for image hosting and Veo callbacks), and optionally `OPENAI_API_KEY`.
+- **`GET /health`** reports `ffmpeg_available`, `ffprobe_available`, `public_base_url`, and `gpt_image_model` for quick diagnostics.
+- **Callbacks**: KIE must reach `VITE_API_BASE_URL` (use ngrok or a deployed URL if not on localhost).
+
+## Run locally
+
+```bash
+# Terminal 1 — API (default port 4010)
+cd backend
+python -m venv .venv && source .venv/bin/activate
+pip install -r requirements.txt
+python main.py
+
+# Terminal 2 — UI (proxies /api to 4010)
+cd frontend
+npm install
+npm run dev
+```
+
+Open `http://localhost:5173`. Ensure `ffmpeg` is available for the final merge step.
+
+## Relation to python-backend
+
+| Piece | Reference repo | This repo |
+|--------|----------------|-----------|
+| Veo proxy + SSE | `api/video_generation.py` | Copied |
+| Image host | `api/image_service.py` + `utils/image_processor.py` | Copied |
+| Merge | `api/video_export.py` | Copied |
+| UGC / script segmentation | `api/prompt_generation.py` | Replaced by `api/showcase_prompts.py` (product cinematic) |

backend/api/__init__.py

@@ -0,0 +1 @@
+# API package

backend/api/gpt_image_frames.py

@@ -0,0 +1,293 @@
+"""
+Per-segment first frames via OpenAI GPT Image models (images.edit + multi-image refs).
+Feeds Veo a keyframe that matches 3–4 product reference photos.
+"""
+
+from __future__ import annotations
+
+import asyncio
+import io
+import os
+from typing import Any, List
+
+import httpx
+from fastapi import APIRouter, HTTPException
+from openai import APIError, AsyncOpenAI
+from pydantic import BaseModel, Field, field_validator
+
+from utils.image_processor import compress_and_store_image
+from utils.public_url import get_public_base_url
+
+router = APIRouter()
+
+_GPT_IMAGE_DEFAULT = "gpt-image-2"
+_GPT_IMAGE_RETRY_ATTEMPTS = 3
+_PROMPT_REFINER_MODEL_DEFAULT = "gpt-4.1-mini"
+
+
+def _supports_input_fidelity(model: str) -> bool:
+    """gpt-image-2+ models reject `input_fidelity` (invalid_input_fidelity_model)."""
+    m = (model or "").strip().lower()
+    return m.startswith("gpt-image-1")
+
+
+def _aspect_to_size(aspect: str) -> str:
+    a = (aspect or "9:16").strip()
+    if a == "9:16":
+        return "1024x1536"
+    if a == "16:9":
+        return "1536x1024"
+    return "1024x1024"
+
+
+def _sync_actions_text(segment: dict[str, Any]) -> str:
+    at = segment.get("action_timeline") or {}
+    sync = at.get("synchronized_actions") or {}
+    if isinstance(sync, dict) and sync:
+        return "; ".join(f"{k}: {v}" for k, v in sorted(sync.items()))
+    return ""
+
+
+def _build_frame_prompt(
+    segment: dict[str, Any],
+    product_name: str,
+    *,
+    reference_count: int = 1,
+) -> str:
+    sc = segment.get("scene_continuity") or {}
+    at = segment.get("action_timeline") or {}
+    multi_ref = ""
+    if reference_count >= 2:
+        multi_ref = (
+            f"\nYou are given {reference_count} reference photos of the same product (different angles or crops). "
+            "Fuse them into one coherent understanding of the real item: exact shape, materials, proportions, "
+            "labels, and distinctive details — not a generic lookalike. Prefer geometry and texture that appear "
+            "consistently across the set of references."
+        )
+    lines = [
+        "Generate ONE photorealistic keyframe — the first frame of a premium product video shot.",
+        "The product in the references must appear with identical identity: same design, materials, scale, and details. Do not substitute a different SKU or generic item.",
+        "No on-image text, logos as graphics, watermarks, or UI. Commercial photography quality.",
+        f"Product: {product_name or 'hero product'}.{multi_ref}",
+        "",
+        "Director notes for this shot:",
+    ]
+    beat = _sync_actions_text(segment)
+    if sc.get("camera_movement"):
+        lines.append(f"- Camera / motion intent: {sc.get('camera_movement')}")
+    if sc.get("lighting_state"):
+        lines.append(f"- Lighting: {sc.get('lighting_state')}")
+    if sc.get("environment"):
+        lines.append(f"- Environment: {sc.get('environment')}")
+    if sc.get("camera_position"):
+        lines.append(f"- Framing: {sc.get('camera_position')}")
+    if beat:
+        lines.append(f"- Beat / blocking: {beat}")
+    if at.get("dialogue"):
+        lines.append(f"- Dialogue / VO mood (do not render text): {at.get('dialogue')}")
+    return "\n".join(lines)
+
+
+def _looks_like_safety_failure(detail: str) -> bool:
+    d = (detail or "").strip().lower()
+    if not d:
+        return False
+    markers = (
+        "moderation_blocked",
+        "safety system",
+        "safety_violations",
+        "image_generation_user_error",
+        "request was rejected",
+        "content policy",
+    )
+    return any(m in d for m in markers)
+
+
+async def _refine_prompt_for_retry(
+    client: AsyncOpenAI,
+    prompt: str,
+    failure_detail: str,
+    product_name: str,
+) -> str:
+    """
+    Ask an LLM to rewrite a blocked image prompt into a policy-safe variant
+    while preserving visual intent and product identity.
+    """
+    model = (
+        os.getenv("OPENAI_PROMPT_REFINER_MODEL") or _PROMPT_REFINER_MODEL_DEFAULT
+    ).strip() or _PROMPT_REFINER_MODEL_DEFAULT
+    try:
+        response = await client.responses.create(
+            model=model,
+            input=[
+                {
+                    "role": "system",
+                    "content": (
+                        "Rewrite prompts for image generation to reduce safety rejections. "
+                        "Keep the same commercial product-shot intent and realism. "
+                        "Remove or neutralize any sexual, explicit, violent, self-harm, hateful, "
+                        "or policy-sensitive phrasing. Return plain prompt text only."
+                    ),
+                },
+                {
+                    "role": "user",
+                    "content": (
+                        f"Product: {product_name or 'hero product'}\n"
+                        f"Failure detail: {failure_detail}\n\n"
+                        f"Original prompt:\n{prompt}\n\n"
+                        "Rewrite this so it is safer while preserving shot composition, "
+                        "lighting, camera intent, and product continuity."
+                    ),
+                },
+            ],
+            max_output_tokens=500,
+        )
+        refined = (getattr(response, "output_text", "") or "").strip()
+        return refined or prompt
+    except Exception:
+        return prompt
+
+
+class SegmentFirstFrameRequest(BaseModel):
+    segment: dict[str, Any]
+    reference_image_urls: List[str] = Field(..., min_length=1, max_length=4)
+    aspect_ratio: str = "9:16"
+    product_name: str = ""
+
+    @field_validator("reference_image_urls")
+    @classmethod
+    def must_be_http(cls, urls: List[str]) -> List[str]:
+        out: List[str] = []
+        for u in urls:
+            u = (u or "").strip()
+            if u.startswith(("http://", "https://")):
+                out.append(u)
+        if not out:
+            raise ValueError("At least one valid http(s) image URL is required")
+        return out[:4]
+
+
+async def _download_image(client: httpx.AsyncClient, url: str) -> tuple[bytes, str]:
+    r = await client.get(
+        url,
+        follow_redirects=True,
+        timeout=30.0,
+        headers={"User-Agent": "ProductShowcase/1.0"},
+    )
+    r.raise_for_status()
+    ct = (r.headers.get("content-type") or "image/jpeg").split(";")[0].strip()
+    if not ct.startswith("image/"):
+        raise ValueError(f"Not an image: {url} ({ct})")
+    return r.content, ct
+
+
+@router.post("/showcase/segment-first-frame")
+async def generate_segment_first_frame(body: SegmentFirstFrameRequest):
+    """
+    Uses OpenAI Images `edits` with 1–4 reference images to synthesize a segment keyframe,
+    then hosts it for Veo (same as upload-image pipeline).
+    """
+    api_key = os.getenv("OPENAI_API_KEY")
+    if not api_key:
+        raise HTTPException(
+            status_code=503,
+            detail="OPENAI_API_KEY is required for GPT Image first frames.",
+        )
+
+    model = (os.getenv("GPT_IMAGE_MODEL") or _GPT_IMAGE_DEFAULT).strip() or _GPT_IMAGE_DEFAULT
+    public_url = get_public_base_url()
+
+    n_refs = len(body.reference_image_urls)
+    prompt = _build_frame_prompt(body.segment, body.product_name, reference_count=n_refs)
+    size = _aspect_to_size(body.aspect_ratio)
+
+    file_tuples: list[tuple[str, io.BytesIO, str]] = []
+    try:
+        urls_in_order = body.reference_image_urls[:4]
+        async with httpx.AsyncClient() as dl:
+            downloaded = await asyncio.gather(
+                *(_download_image(dl, url) for url in urls_in_order)
+            )
+        for i, (raw, ctype) in enumerate(downloaded):
+            ext = "png" if "png" in ctype else "jpeg"
+            file_tuples.append((f"ref_{i}.{ext}", io.BytesIO(raw), ctype))
+    except httpx.HTTPError as e:
+        raise HTTPException(status_code=502, detail=f"Could not download reference image: {e}")
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+
+    client = AsyncOpenAI(api_key=api_key)
+    result = None
+    prompt_for_attempt = prompt
+    last_detail = ""
+    for attempt in range(1, _GPT_IMAGE_RETRY_ATTEMPTS + 1):
+        try:
+            if _supports_input_fidelity(model):
+                result = await client.images.edit(
+                    model=model,
+                    image=file_tuples,
+                    prompt=prompt_for_attempt,
+                    size=size,  # type: ignore[arg-type]
+                    quality="high",
+                    input_fidelity="high",
+                    output_format="png",
+                )
+            else:
+                result = await client.images.edit(
+                    model=model,
+                    image=file_tuples,
+                    prompt=prompt_for_attempt,
+                    size=size,  # type: ignore[arg-type]
+                    quality="high",
+                    output_format="png",
+                )
+            break
+        except Exception as e:
+            detail = e.message if isinstance(e, APIError) else str(e)
+            last_detail = detail
+            should_retry = attempt < _GPT_IMAGE_RETRY_ATTEMPTS and _looks_like_safety_failure(
+                detail
+            )
+            if not should_retry:
+                raise HTTPException(
+                    status_code=502,
+                    detail=f"OpenAI image edit failed ({model}): {detail}",
+                )
+            prompt_for_attempt = await _refine_prompt_for_retry(
+                client,
+                prompt_for_attempt,
+                detail,
+                body.product_name,
+            )
+
+    if result is None:
+        raise HTTPException(
+            status_code=502,
+            detail=f"OpenAI image edit failed ({model}) after {_GPT_IMAGE_RETRY_ATTEMPTS} attempts: {last_detail}",
+        )
+
+    if not result.data or not result.data[0].b64_json:
+        raise HTTPException(
+            status_code=502,
+            detail="OpenAI returned no image (b64_json missing). Check model access and billing.",
+        )
+
+    b64 = result.data[0].b64_json
+    data_url = f"data:image/png;base64,{b64}"
+
+    try:
+        hosted = await compress_and_store_image(
+            data_url,
+            public_url,
+            max_width=1920,
+            max_height=1080,
+            quality=92,
+        )
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Could not host generated frame: {e}")
+
+    return {
+        "url": hosted,
+        "model": model,
+        "size": size,
+    }

backend/api/image_service.py

@@ -0,0 +1,126 @@
+"""
+Image Service API endpoints
+Handles image compression, storage, and serving
+"""
+
+import base64
+import re
+
+import httpx
+from fastapi import APIRouter, HTTPException, Response, UploadFile, File, Query
+from fastapi.responses import JSONResponse
+from pydantic import BaseModel, Field
+
+from utils.public_url import get_public_base_url
+from utils.storage import temp_images
+from utils.image_processor import compress_and_store_image
+
+router = APIRouter()
+
+# High-quality settings for reference/continuity frames (last frame of previous segment)
+REFERENCE_FRAME_QUALITY = 92
+REFERENCE_FRAME_MAX_WIDTH = 1920
+REFERENCE_FRAME_MAX_HEIGHT = 1080
+
+def _is_reference_frame_filename(filename: str) -> bool:
+    if not filename:
+        return False
+    name = filename.lower()
+    return bool(re.match(r"^(frame-|last-frame\.|whisper-frame-)", name) or "frame" in name and name.endswith((".jpg", ".jpeg", ".png")))
+
+
+@router.post("/upload-image")
+async def upload_image(
+    file: UploadFile = File(...),
+    reference: bool = Query(False, description="High quality for last-frame/reference uploads"),
+):
+    """
+    Upload and host an image, returns public URL.
+    Use ?reference=true when uploading a continuity/reference frame (last frame of previous segment)
+    for higher quality and less downscaling.
+    """
+    try:
+        image_bytes = await file.read()
+        encoded = base64.b64encode(image_bytes).decode('utf-8')
+        data_url = f"data:{file.content_type or 'image/jpeg'};base64,{encoded}"
+        public_url = get_public_base_url()
+
+        use_high_quality = reference or _is_reference_frame_filename(file.filename or "")
+        if use_high_quality:
+            hosted_url = await compress_and_store_image(
+                data_url, public_url,
+                max_width=REFERENCE_FRAME_MAX_WIDTH,
+                max_height=REFERENCE_FRAME_MAX_HEIGHT,
+                quality=REFERENCE_FRAME_QUALITY,
+            )
+        else:
+            hosted_url = await compress_and_store_image(data_url, public_url)
+
+        return JSONResponse(content={
+            "url": hosted_url,
+            "filename": file.filename,
+        })
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Image upload failed: {str(e)}")
+
+
+class HostImageUrlBody(BaseModel):
+    url: str = Field(..., min_length=8, description="Public HTTPS image URL (e.g. CDN)")
+
+
+@router.post("/host-image-url")
+async def host_image_from_url(body: HostImageUrlBody):
+    """
+    Download an image server-side and host it like /upload-image (reference quality).
+    Used after scraping so KIE and the planner can use a stable public URL.
+    """
+    url = body.url.strip()
+    try:
+        async with httpx.AsyncClient(timeout=30.0, follow_redirects=True) as client:
+            r = await client.get(url, headers={"User-Agent": "ProductShowcase/1.0"})
+            r.raise_for_status()
+            content = r.content
+            ct = (r.headers.get("content-type") or "image/jpeg").split(";")[0].strip() or "image/jpeg"
+            if not ct.startswith("image/"):
+                raise HTTPException(
+                    status_code=400,
+                    detail=f"URL did not return an image (content-type: {ct})",
+                )
+    except httpx.HTTPError as e:
+        raise HTTPException(status_code=502, detail=f"Could not download image: {e}")
+
+    try:
+        b64 = base64.b64encode(content).decode("utf-8")
+        data_url = f"data:{ct};base64,{b64}"
+        public_url = get_public_base_url()
+        hosted_url = await compress_and_store_image(
+            data_url,
+            public_url,
+            max_width=REFERENCE_FRAME_MAX_WIDTH,
+            max_height=REFERENCE_FRAME_MAX_HEIGHT,
+            quality=REFERENCE_FRAME_QUALITY,
+        )
+        return JSONResponse(content={"url": hosted_url, "source_url": url})
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Host image failed: {str(e)}")
+
+
+@router.get("/images/{image_id}")
+async def serve_image(image_id: str):
+    """
+    Serve temporarily stored images
+    Images are compressed and cached for 1 hour
+    """
+    if image_id not in temp_images:
+        raise HTTPException(status_code=404, detail="Image not found")
+    
+    image_data = temp_images[image_id]
+    
+    return Response(
+        content=image_data['buffer'],
+        media_type=image_data['content_type'],
+        headers={
+            'Cache-Control': 'public, max-age=3600'
+        }
+    )
+

backend/api/scraper.py

@@ -0,0 +1,175 @@
+"""
+Scrape product data from an Amalfa product page URL.
+"""
+
+import json
+import re
+from typing import Any
+from urllib.parse import urlparse
+
+import requests
+from bs4 import BeautifulSoup
+
+
+def _clean_text(s: str) -> str:
+    if not s:
+        return ""
+    return " ".join(s.split()).strip()
+
+
+def _extract_price_from_text(text: str) -> str:
+    """Find first price like Rs 1,299 or ₹1299."""
+    if not text:
+        return ""
+    m = re.search(r"(?:Rs\.?|₹)\s*([\d,]+(?:\.\d{2})?)", text, re.I)
+    if m:
+        return m.group(0).strip()
+    m = re.search(r"[\d,]+(?:\.\d{2})?", text)
+    if m:
+        return m.group(0)
+    return ""
+
+
+def scrape_product(url: str) -> dict[str, Any]:
+    """
+    Fetch an Amalfa product page and extract product_name, description, price,
+    offers, product_images, brand, category. Strategy fields left empty for AI/user.
+    """
+    parsed = urlparse(url)
+    if not parsed.scheme or not parsed.netloc:
+        raise ValueError(f"Invalid URL: {url}")
+
+    headers = {
+        "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+        "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
+        "Accept-Language": "en-IN,en;q=0.9",
+    }
+    resp = requests.get(url, headers=headers, timeout=15)
+    resp.raise_for_status()
+    html = resp.text
+    soup = BeautifulSoup(html, "html.parser")
+
+    product: dict[str, Any] = {
+        "product_name": "",
+        "description": "",
+        "price": "",
+        "offers": "",
+        "product_images": "",
+        "brand": "",
+        "category": "",
+        "target_audience": "",
+        "competitors": "",
+        "psychological_triggers": "",
+        "show_product": None,
+    }
+
+    for script in soup.find_all("script", type="application/ld+json"):
+        try:
+            data = json.loads(script.string or "{}")
+            if isinstance(data, dict) and data.get("@type") == "Product":
+                product["product_name"] = _clean_text(data.get("name") or "")
+                product["description"] = _clean_text(data.get("description") or "")
+                if data.get("offers") and isinstance(data["offers"], dict):
+                    product["price"] = str(data["offers"].get("price", ""))
+                elif isinstance(data.get("offers"), list) and data["offers"]:
+                    product["price"] = str(data["offers"][0].get("price", ""))
+                if data.get("image"):
+                    imgs = data["image"] if isinstance(data["image"], list) else [data["image"]]
+                    product["product_images"] = ", ".join(str(u).strip() for u in imgs[:9] if u)
+                if product["product_name"] and product["price"]:
+                    break
+        except (json.JSONDecodeError, TypeError):
+            continue
+
+    if not product["product_name"]:
+        meta = soup.find("meta", property="og:title")
+        if meta and meta.get("content"):
+            product["product_name"] = _clean_text(meta["content"].split("|")[0].strip())
+    if not product["description"]:
+        meta = soup.find("meta", property="og:description") or soup.find("meta", attrs={"name": "description"})
+        if meta and meta.get("content"):
+            product["description"] = _clean_text(meta["content"])
+    if not product["product_images"]:
+        meta = soup.find("meta", property="og:image")
+        if meta and meta.get("content"):
+            product["product_images"] = meta["content"].strip()
+
+    if not product["product_name"]:
+        h1 = soup.find("h1")
+        if h1:
+            product["product_name"] = _clean_text(h1.get_text())
+
+    if not product["price"]:
+        for sel in ["[class*='price']", ".product__price", "[data-product-price]", ".price-item"]:
+            el = soup.select_one(sel)
+            if el:
+                product["price"] = _extract_price_from_text(el.get_text())
+                if product["price"]:
+                    break
+        if not product["price"]:
+            product["price"] = _extract_price_from_text(soup.get_text())
+
+    if not product["description"]:
+        desc_el = (
+            soup.find("div", class_=re.compile(r"description|product-description|product__description", re.I))
+            or soup.find("meta", attrs={"name": "description"})
+        )
+        if desc_el:
+            product["description"] = _clean_text(
+                desc_el.get_text() if hasattr(desc_el, "get_text") else (desc_el.get("content") or "")
+            )
+
+    # Shopify product JSON has the full images list (primary source for product images)
+    path_parts = (parsed.path or "").strip("/").split("/")
+    if path_parts and path_parts[0] == "products" and len(path_parts) >= 2:
+        handle = path_parts[1]
+        product_json_url = f"{parsed.scheme}://{parsed.netloc}/products/{handle}.json"
+        try:
+            r = requests.get(product_json_url, headers={**headers, "Accept": "application/json"}, timeout=10)
+            if r.ok:
+                data = r.json()
+                # Shopify Ajax API: root is the product object, or wrapped as {"product": {...}}
+                prod = data.get("product") if isinstance(data.get("product"), dict) else data
+                if isinstance(prod, dict):
+                    images = prod.get("images")
+                    if isinstance(images, list) and len(images) >= 1:
+                        urls = []
+                        for img in images[:9]:
+                            u = None
+                            if isinstance(img, dict) and img.get("src"):
+                                u = (img.get("src") or "").strip()
+                            elif isinstance(img, str) and img.strip():
+                                u = img.strip()
+                            if u:
+                                if u.startswith("//"):
+                                    u = "https:" + u
+                                if u.startswith("http") and u not in urls:
+                                    urls.append(u)
+                        if urls:
+                            product["product_images"] = ", ".join(urls)
+        except (requests.RequestException, ValueError, KeyError):
+            pass
+
+    path = (parsed.path or "").lower()
+    if "earring" in path:
+        product["category"] = product["category"] or "Earrings"
+    elif "necklace" in path or "pendant" in path or "choker" in path:
+        product["category"] = product["category"] or "Necklaces"
+    elif "ring" in path:
+        product["category"] = product["category"] or "Rings"
+    elif "bracelet" in path or "bangle" in path:
+        product["category"] = product["category"] or "Bracelets"
+    elif "anklet" in path:
+        product["category"] = product["category"] or "Anklets"
+
+    if not product["category"]:
+        product["category"] = "Jewellery"
+
+    # Log scraped data for verification (especially product images)
+    _images = [u.strip() for u in (product.get("product_images") or "").split(",") if u.strip()]
+    print(
+        "[scraper] product_name=%r category=%r | product_images count=%d | urls=%s"
+        % (product.get("product_name"), product.get("category"), len(_images), _images)
+    )
+
+    return product

backend/api/scraper_routes.py

@@ -0,0 +1,38 @@
+"""HTTP API for product page scraping."""
+
+from __future__ import annotations
+
+import asyncio
+from typing import Any
+
+from fastapi import APIRouter, HTTPException
+from pydantic import BaseModel, Field
+
+from api.scraper import scrape_product
+
+router = APIRouter()
+
+
+class ScrapeRequest(BaseModel):
+    url: str = Field(..., min_length=8, description="Product page URL (e.g. Amalfa / Shopify)")
+
+
+def _image_url_list(product: dict[str, Any]) -> list[str]:
+    raw = product.get("product_images") or ""
+    return [u.strip() for u in str(raw).split(",") if u.strip()]
+
+
+@router.post("/showcase/scrape")
+async def scrape_product_endpoint(body: ScrapeRequest) -> dict[str, Any]:
+    url = body.url.strip()
+    try:
+        product = await asyncio.to_thread(scrape_product, url)
+    except ValueError as e:
+        raise HTTPException(status_code=400, detail=str(e))
+    except Exception as e:
+        raise HTTPException(status_code=502, detail=f"Scrape failed: {e}")
+
+    product = dict(product)
+    product["image_urls"] = _image_url_list(product)
+    product["source_url"] = url
+    return product

backend/api/seedance_generation.py

@@ -0,0 +1,584 @@
+"""
+KIE Seedance 2 — jobs/createTask + jobs/recordInfo.
+Models: bytedance/seedance-2, bytedance/seedance-2-fast.
+Falls back to Replicate (bytedance/seedance-2.0 / seedance-2.0-fast) when KIE errors.
+"""
+
+import json
+import logging
+import os
+import asyncio
+from datetime import datetime
+from typing import List
+
+import httpx
+from fastapi import APIRouter, HTTPException, Request
+from fastapi.responses import JSONResponse, StreamingResponse
+from pydantic import BaseModel, Field, field_validator
+
+from utils.public_url import get_public_base_url
+
+router = APIRouter()
+logger = logging.getLogger(__name__)
+
+KIE_API_BASE = "https://api.kie.ai"
+REPLICATE_API_BASE = "https://api.replicate.com/v1"
+REPLICATE_TASK_PREFIX = "repl_"
+DEFAULT_SEEDANCE_MODEL = "bytedance/seedance-2-fast"
+ALLOWED_SEEDANCE_MODELS = frozenset(
+    {DEFAULT_SEEDANCE_MODEL, "bytedance/seedance-2"},
+)
+KIE_TO_REPLICATE_SEEDANCE_MODEL = {
+    "bytedance/seedance-2": "bytedance/seedance-2.0",
+    "bytedance/seedance-2-fast": "bytedance/seedance-2.0-fast",
+}
+
+# In-memory callback/SSE state for Seedance tasks
+seedance_results: dict[str, dict] = {}
+seedance_sse_clients: dict[str, asyncio.Queue] = {}
+
+
+def _cleanup_old_seedance_results(max_age_hours: int = 24) -> None:
+    cutoff = datetime.now().timestamp() - (max_age_hours * 3600)
+    stale = [task_id for task_id, data in seedance_results.items() if data.get("timestamp", 0) < cutoff]
+    for task_id in stale:
+        del seedance_results[task_id]
+
+
+def _kie_key() -> str:
+    api_key = os.getenv("KIE_API_KEY")
+    if not api_key:
+        raise HTTPException(status_code=500, detail="KIE_API_KEY not configured on server.")
+    return api_key
+
+
+def _replicate_token() -> str | None:
+    raw = (os.getenv("REPLICATE_API_TOKEN") or os.getenv("REPLICATE_API_KEY") or "").strip()
+    return raw or None
+
+
+def _http_url_for_provider(u: str, public_base: str) -> str:
+    """Replicate requires http(s) URIs. Map asset:// to our public base if needed."""
+    s = (u or "").strip()
+    if s.startswith(("http://", "https://")):
+        return s
+    if s.startswith("asset://"):
+        rest = s[9:].lstrip("/")
+        return f"{public_base.rstrip('/')}/{rest}"
+    return s
+
+
+async def _kie_seedance_create_task(payload: dict, api_key: str) -> str:
+    try:
+        async with httpx.AsyncClient(timeout=60.0) as client:
+            r = await client.post(
+                f"{KIE_API_BASE}/api/v1/jobs/createTask",
+                headers={
+                    "Authorization": f"Bearer {api_key}",
+                    "Content-Type": "application/json",
+                },
+                json=payload,
+            )
+    except httpx.RequestError as e:
+        raise HTTPException(status_code=502, detail=f"KIE request error: {e}") from e
+
+    if r.status_code != 200:
+        try:
+            err = r.json()
+            msg = err.get("msg") or err.get("message") or r.text[:300]
+        except (json.JSONDecodeError, ValueError):
+            msg = r.text[:300]
+        raise HTTPException(status_code=r.status_code, detail=f"KIE createTask failed: {msg}")
+
+    data = r.json()
+    if data.get("code") != 200:
+        raise HTTPException(
+            status_code=data.get("code", 502),
+            detail=data.get("msg", "KIE createTask rejected"),
+        )
+
+    task_id = (data.get("data") or {}).get("taskId")
+    if not task_id:
+        raise HTTPException(status_code=502, detail="KIE response missing taskId")
+    return task_id
+
+
+def _replicate_input_from_seedance_urls(
+    urls: List[str],
+    prompt: str,
+    aspect_ratio: str,
+    duration: int,
+    resolution: str,
+    generate_audio: bool,
+    public_base: str,
+) -> dict:
+    mapped = [_http_url_for_provider(u, public_base) for u in urls]
+    mapped = [u for u in mapped if u.startswith(("http://", "https://"))]
+    if not mapped:
+        raise HTTPException(
+            status_code=400,
+            detail="Replicate requires public http(s) image URLs (convert or host assets first).",
+        )
+    n = len(mapped)
+    inp: dict = {
+        "prompt": prompt,
+        "generate_audio": generate_audio,
+        "resolution": resolution,
+        "aspect_ratio": aspect_ratio,
+        "duration": duration,
+    }
+    if n == 1:
+        inp["image"] = mapped[0]
+    elif n == 2:
+        inp["image"] = mapped[0]
+        inp["last_frame_image"] = mapped[1]
+    else:
+        inp["reference_images"] = mapped[:9]
+    return inp
+
+
+async def _replicate_seedance_start(
+    model_slug: str,
+    input_obj: dict,
+    token: str,
+) -> str:
+    try:
+        async with httpx.AsyncClient(timeout=90.0) as client:
+            r = await client.post(
+                f"{REPLICATE_API_BASE}/models/{model_slug}/predictions",
+                headers={
+                    "Authorization": f"Bearer {token}",
+                    "Content-Type": "application/json",
+                },
+                json={"input": input_obj},
+            )
+    except httpx.RequestError as e:
+        raise HTTPException(status_code=502, detail=f"Replicate request error: {e}") from e
+
+    if r.status_code not in (200, 201):
+        try:
+            err = r.json()
+            detail = err.get("detail") or err.get("message") or r.text[:500]
+        except (json.JSONDecodeError, ValueError):
+            detail = r.text[:500]
+        raise HTTPException(
+            status_code=502,
+            detail=f"Replicate create prediction failed ({r.status_code}): {detail}",
+        )
+
+    data = r.json()
+    pred_id = data.get("id")
+    if not pred_id:
+        raise HTTPException(status_code=502, detail="Replicate response missing prediction id")
+    return f"{REPLICATE_TASK_PREFIX}{pred_id}"
+
+
+async def _replicate_prediction_fetch(prediction_id: str, token: str) -> dict:
+    try:
+        async with httpx.AsyncClient(timeout=45.0) as client:
+            r = await client.get(
+                f"{REPLICATE_API_BASE}/predictions/{prediction_id}",
+                headers={"Authorization": f"Bearer {token}"},
+            )
+    except httpx.RequestError as e:
+        raise HTTPException(status_code=502, detail=f"Replicate request error: {e}") from e
+
+    if r.status_code != 200:
+        raise HTTPException(status_code=502, detail="Replicate prediction fetch failed")
+
+    return r.json()
+
+
+def _replicate_prediction_to_job_shape(body: dict) -> dict:
+    status = (body.get("status") or "").lower()
+    err = body.get("error")
+    out_url = None
+    output = body.get("output")
+    if isinstance(output, str):
+        out_url = output
+    elif isinstance(output, list) and output:
+        first = output[0]
+        out_url = first if isinstance(first, str) else None
+
+    if status == "succeeded":
+        state = "success"
+    elif status in {"failed", "canceled", "cancelled"}:
+        state = "fail"
+    else:
+        state = "processing"
+
+    fail_msg = None
+    if state == "fail":
+        fail_msg = err if isinstance(err, str) else (str(err) if err else "Replicate prediction failed")
+
+    return {
+        "state": state,
+        "url": out_url,
+        "failMsg": fail_msg,
+        "failCode": None,
+    }
+
+
+def _clamp_seedance_duration(seconds: int) -> int:
+    if seconds < 4:
+        return 4
+    if seconds > 15:
+        return 15
+    return int(seconds)
+
+
+def _valid_media_ref(u: str) -> bool:
+    s = str(u).strip()
+    return bool(s.startswith(("http://", "https://", "asset://")))
+
+
+def _normalize_seedance_prompt(raw: str) -> str:
+    """OpenAPI: prompt required, 3–20000 chars."""
+    p = (raw or "").strip()
+    if not p:
+        p = "Cinematic premium product showcase, photoreal, smooth camera motion."
+    if len(p) < 3:
+        p = f"{p} — product video."
+    if len(p) > 20000:
+        p = p[:20000]
+    return p
+
+
+def _seedance_input_from_urls(
+    urls: List[str],
+    prompt: str,
+    aspect_ratio: str,
+    duration: int,
+    resolution: str,
+    generate_audio: bool,
+) -> dict:
+    """
+    Seedance modes are mutually exclusive (OpenAPI):
+    - 1 URL → image-to-video (first frame only): first_frame_url
+    - 2 URLs → first & last frames: first_frame_url + last_frame_url
+    - 3+ URLs → multimodal reference-to-video: reference_image_urls only (max 9)
+    Do not mix first/last/reference in one request.
+    """
+    n = len(urls)
+    base = {
+        "prompt": prompt,
+        "generate_audio": generate_audio,
+        "resolution": resolution,
+        "aspect_ratio": aspect_ratio,
+        "duration": duration,
+        "nsfw_checker": False,
+    }
+    if n == 1:
+        base["first_frame_url"] = urls[0]
+    elif n == 2:
+        base["first_frame_url"] = urls[0]
+        base["last_frame_url"] = urls[1]
+    else:
+        base["reference_image_urls"] = urls[:9]
+    return base
+
+
+class SeedanceCreateBody(BaseModel):
+    prompt: str = Field(..., max_length=20000)
+    reference_image_urls: List[str] = Field(..., min_length=1)
+    aspect_ratio: str = "9:16"
+    duration: int = 8
+    resolution: str = "480p"
+    generate_audio: bool = True
+    model: str = Field(default=DEFAULT_SEEDANCE_MODEL, max_length=120)
+
+    @field_validator("resolution")
+    @classmethod
+    def resolution_ok(cls, v: str) -> str:
+        if v not in ("480p", "720p", "1080p"):
+            raise ValueError("resolution must be 480p, 720p, or 1080p")
+        return v
+
+    @field_validator("model")
+    @classmethod
+    def seedance_model_ok(cls, v: str) -> str:
+        m = (v or "").strip()
+        if m not in ALLOWED_SEEDANCE_MODELS:
+            raise ValueError(
+                f"model must be one of: {', '.join(sorted(ALLOWED_SEEDANCE_MODELS))}"
+            )
+        return m
+
+
+class SeedanceCreateResponse(BaseModel):
+    taskId: str
+    status: str = "processing"
+
+
+async def _send_seedance_sse_event(task_id: str, data: dict) -> None:
+    queue = seedance_sse_clients.get(task_id)
+    if queue is not None:
+        await queue.put(data)
+
+
+def _extract_seedance_callback_state(payload: dict) -> dict:
+    """
+    Normalize KIE callback payloads into a browser-friendly shape.
+    Supports both:
+    - jobs callback with `data.info.state/resultJson`
+    - direct callback payloads with `data.state/resultJson`
+    """
+    data = payload.get("data") if isinstance(payload.get("data"), dict) else {}
+    info = data.get("info") if isinstance(data.get("info"), dict) else {}
+    src = info or data
+
+    state = src.get("state")
+    fail_msg = src.get("failMsg") or payload.get("msg")
+    fail_code = src.get("failCode")
+    url = None
+    result_json = src.get("resultJson")
+    if result_json:
+        try:
+            parsed = json.loads(result_json) if isinstance(result_json, str) else result_json
+            urls = parsed.get("resultUrls") or []
+            if urls:
+                url = urls[0]
+        except (json.JSONDecodeError, TypeError, ValueError, AttributeError):
+            pass
+
+    if not state:
+        code = payload.get("code")
+        if code == 200 and url:
+            state = "success"
+        elif code not in (None, 200):
+            state = "fail"
+        else:
+            state = "processing"
+
+    return {
+        "state": state,
+        "url": url,
+        "failMsg": fail_msg,
+        "failCode": fail_code,
+    }
+
+
+@router.post("/seedance/create", response_model=SeedanceCreateResponse)
+async def seedance_create(body: SeedanceCreateBody):
+    """Start a Seedance 2 video task. Maps 1–2 image URLs to first/last frame I2V; 3+ to reference_image_urls."""
+    dur = _clamp_seedance_duration(body.duration)
+
+    allowed_ratio = {"16:9", "4:3", "1:1", "3:4", "9:16", "21:9", "adaptive"}
+    ar = body.aspect_ratio if body.aspect_ratio in allowed_ratio else "9:16"
+
+    urls = [u for u in body.reference_image_urls if u and _valid_media_ref(u)]
+    if not urls:
+        raise HTTPException(
+            status_code=400,
+            detail="At least one image URL (http(s) or asset://) is required.",
+        )
+
+    prompt = _normalize_seedance_prompt(body.prompt)
+
+    public_url = get_public_base_url()
+    callback_url = f"{public_url}/api/seedance/callback"
+
+    inp = _seedance_input_from_urls(
+        urls,
+        prompt,
+        ar,
+        dur,
+        body.resolution,
+        body.generate_audio,
+    )
+
+    payload = {
+        "model": body.model,
+        "input": inp,
+        "callBackUrl": callback_url,
+    }
+
+    kie_err: HTTPException | None = None
+    if os.getenv("KIE_API_KEY"):
+        try:
+            api_key = _kie_key()
+            task_id = await _kie_seedance_create_task(payload, api_key)
+            return SeedanceCreateResponse(taskId=task_id)
+        except HTTPException as e:
+            kie_err = e
+            logger.warning("KIE Seedance create failed, trying Replicate if configured: %s", e.detail)
+    if not os.getenv("KIE_API_KEY"):
+        logger.info("KIE_API_KEY missing; using Replicate for Seedance when token is set.")
+
+    rep = _replicate_token()
+    if not rep:
+        if kie_err:
+            raise kie_err
+        raise HTTPException(
+            status_code=500,
+            detail="Neither KIE_API_KEY nor REPLICATE_API_TOKEN is configured for Seedance.",
+        )
+
+    rep_slug = KIE_TO_REPLICATE_SEEDANCE_MODEL.get(body.model)
+    if not rep_slug:
+        raise HTTPException(status_code=500, detail="No Replicate model mapping for this Seedance variant.")
+
+    rep_input = _replicate_input_from_seedance_urls(
+        urls,
+        prompt,
+        ar,
+        dur,
+        body.resolution,
+        body.generate_audio,
+        public_url,
+    )
+    task_id = await _replicate_seedance_start(rep_slug, rep_input, rep)
+    if kie_err:
+        logger.info("Seedance task started via Replicate fallback (%s)", task_id)
+    return SeedanceCreateResponse(taskId=task_id)
+
+
+@router.get("/seedance/status/{task_id}")
+async def seedance_status(task_id: str):
+    """Poll KIE jobs/recordInfo or Replicate prediction; normalize for the browser."""
+    cached = seedance_results.get(task_id)
+    if cached:
+        return cached
+
+    if task_id.startswith(REPLICATE_TASK_PREFIX):
+        token = _replicate_token()
+        if not token:
+            raise HTTPException(status_code=500, detail="REPLICATE_API_TOKEN not configured on server.")
+        pred_id = task_id[len(REPLICATE_TASK_PREFIX) :]
+        raw = await _replicate_prediction_fetch(pred_id, token)
+        out = _replicate_prediction_to_job_shape(raw)
+        if out["state"] in {"success", "fail"}:
+            seedance_results[task_id] = {
+                **out,
+                "timestamp": datetime.now().timestamp(),
+            }
+            _cleanup_old_seedance_results()
+        return out
+
+    api_key = _kie_key()
+    try:
+        async with httpx.AsyncClient(timeout=45.0) as client:
+            r = await client.get(
+                f"{KIE_API_BASE}/api/v1/jobs/recordInfo",
+                params={"taskId": task_id},
+                headers={"Authorization": f"Bearer {api_key}"},
+            )
+    except httpx.RequestError as e:
+        raise HTTPException(status_code=502, detail=f"KIE request error: {e}") from e
+
+    if r.status_code != 200:
+        raise HTTPException(status_code=r.status_code, detail="KIE recordInfo failed")
+
+    body = r.json()
+    if body.get("code") != 200:
+        raise HTTPException(
+            status_code=body.get("code", 502),
+            detail=body.get("msg", "KIE recordInfo error"),
+        )
+
+    d = body.get("data") or {}
+    state = d.get("state")
+    out: dict = {
+        "state": state,
+        "url": None,
+        "failMsg": d.get("failMsg"),
+        "failCode": d.get("failCode"),
+    }
+
+    if state == "success" and d.get("resultJson"):
+        try:
+            rj = json.loads(d["resultJson"])
+            urls = rj.get("resultUrls") or []
+            if urls:
+                out["url"] = urls[0]
+        except (json.JSONDecodeError, TypeError, KeyError):
+            pass
+
+    if out["state"] in {"success", "fail"}:
+        seedance_results[task_id] = {
+            **out,
+            "timestamp": datetime.now().timestamp(),
+        }
+        _cleanup_old_seedance_results()
+    return out
+
+
+@router.get("/seedance/events/{task_id}")
+async def seedance_events(task_id: str):
+    """Server-Sent Events stream for callback-driven Seedance status."""
+
+    async def event_generator():
+        queue: asyncio.Queue = asyncio.Queue()
+        seedance_sse_clients[task_id] = queue
+        try:
+            existing = seedance_results.get(task_id)
+            if existing:
+                yield f"data: {json.dumps(existing)}\n\n"
+                return
+
+            if task_id.startswith(REPLICATE_TASK_PREFIX):
+                token = _replicate_token()
+                if not token:
+                    yield f"data: {json.dumps({'state': 'fail', 'url': None, 'failMsg': 'REPLICATE_API_TOKEN not configured'})}\n\n"
+                    return
+                pred_id = task_id[len(REPLICATE_TASK_PREFIX) :]
+                while True:
+                    raw = await _replicate_prediction_fetch(pred_id, token)
+                    out = _replicate_prediction_to_job_shape(raw)
+                    if out["state"] in {"success", "fail"}:
+                        seedance_results[task_id] = {
+                            **out,
+                            "timestamp": datetime.now().timestamp(),
+                        }
+                        _cleanup_old_seedance_results()
+                        yield f"data: {json.dumps(out)}\n\n"
+                        return
+                    await asyncio.sleep(2.0)
+
+            while True:
+                data = await queue.get()
+                yield f"data: {json.dumps(data)}\n\n"
+                if data.get("state") in {"success", "fail"}:
+                    return
+        except asyncio.CancelledError:
+            return
+        finally:
+            if task_id in seedance_sse_clients:
+                del seedance_sse_clients[task_id]
+
+    return StreamingResponse(
+        event_generator(),
+        media_type="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
+        },
+    )
+
+
+@router.post("/seedance/callback")
+async def seedance_callback(request: Request):
+    """
+    KIE callback endpoint; updates in-memory result and notifies SSE clients.
+    """
+    try:
+        payload = await request.json()
+        if not isinstance(payload, dict):
+            payload = {}
+    except Exception:
+        payload = {}
+
+    data = payload.get("data") if isinstance(payload.get("data"), dict) else {}
+    info = data.get("info") if isinstance(data.get("info"), dict) else {}
+    task_id = info.get("taskId") or data.get("taskId")
+
+    if task_id:
+        out = _extract_seedance_callback_state(payload)
+        seedance_results[task_id] = {
+            **out,
+            "timestamp": datetime.now().timestamp(),
+        }
+        await _send_seedance_sse_event(task_id, out)
+        _cleanup_old_seedance_results()
+
+    return JSONResponse(status_code=200, content={"code": 200, "msg": "ok"})

backend/api/showcase_prompts.py

@@ -0,0 +1,1223 @@
+"""
+Cinematic product showcase: stream a shot plan as Veo-compatible segments.
+Uses OpenAI when OPENAI_API_KEY is set; otherwise uses a built-in template.
+"""
+
+from __future__ import annotations
+
+import asyncio
+import base64
+import json
+import os
+import uuid
+from typing import Any, List, Optional
+
+import httpx
+from fastapi import APIRouter, File, Form, HTTPException, UploadFile
+from fastapi.responses import StreamingResponse
+from pydantic import BaseModel, Field
+
+router = APIRouter()
+
+DEFAULT_MODEL = os.getenv("SHOWCASE_PROMPT_MODEL", "gpt-4o")
+
+# Creative concepts: distinct shot DNA for template + OpenAI planning.
+_CONCEPTS: dict[str, dict[str, Any]] = {
+    "luxury_studio": {
+        "label": "Luxury studio launch",
+        "mood_tag": "controlled studio, soft bloom, premium reflections",
+        "director": (
+            "Premium packshot and launch-film grammar: slow dolly, pedestal or tabletop, "
+            "whisper VO optional, negative space, reflections choreographed. Restraint over hype."
+        ),
+        "location": "controlled studio / pedestal tabletop",
+        "voice_matching": "Optional restrained VO; otherwise silent cinematic bed",
+        "rhythm": "slow commercial pacing",
+        "transition": "invisible cuts; consistent color grade",
+        "beats": [
+            (
+                "Slow push-in on hero packshot; shallow depth of field; optional subtle haze",
+                "VO or silent: establish iconic hero framing",
+            ),
+            (
+                "Macro glide across materials, seams, and signature details",
+                "Whisper VO: emphasize craftsmanship",
+            ),
+            (
+                "Orbital or ¾ arc; reflections and rim read as luxury cues",
+                "Build desire through form and light",
+            ),
+            (
+                "Top-down flat-lay with minimal props; brand-forward negative space",
+                "Context without clutter",
+            ),
+            (
+                "Silhouette beat with rim light; bold graphic composition",
+                "Hold for logo-safe end board",
+            ),
+            (
+                "Wide curated lifestyle tableau; soft daylight, calm payoff",
+                "Emotional close; premium calm",
+            ),
+        ],
+    },
+    "ugc_authentic": {
+        "label": "UGC / social authentic",
+        "mood_tag": "handheld creator realism, warm practicals, real room",
+        "director": (
+            "Short-form authentic energy: slight handheld, ring or window light, desk or counter. "
+            "Hooks fast, shows real use, avoids fake polish. Feels like TikTok/Reels love-letter."
+        ),
+        "location": "creator desk, kitchen counter, or bedroom nook",
+        "voice_matching": "Casual spoken hook; conversational, not announcer",
+        "rhythm": "punchy short-form; quick reframes",
+        "transition": "jump cuts ok; keep product identity consistent",
+        "beats": [
+            (
+                "Handheld close-up opening hook; product fills frame; natural micro-shake",
+                "Quick spoken hook — why this product hits different",
+            ),
+            (
+                "Over-shoulder desk POV; hands interact; daylight spill",
+                "Show real setup or unbox beat in one breath",
+            ),
+            (
+                "Macro proof shot: texture, hinge, button, or pour — still handheld",
+                "Casual VO: the detail that sold you",
+            ),
+            (
+                "Wide creator space; product in lived-in context; plants, mug, cables ok",
+                "Relatable payoff; not a sterile set",
+            ),
+            (
+                "Low angle hero on table; warm practical rim; quick push with wrist",
+                "Energy lift before outro",
+            ),
+            (
+                "Faceless hold-to-camera packshot; soft smile energy implied",
+                "CTA-friendly final beat; stay human",
+            ),
+        ],
+    },
+    "tech_minimal": {
+        "label": "Tech / minimal dopamine",
+        "mood_tag": "clean void, hard edge light, precision motion",
+        "director": (
+            "Sci-fi adjacent minimalism: white/gunmetal void, crisp edges, precise slides. "
+            "Feels like flagship device film — calm confidence, no lifestyle clutter."
+        ),
+        "location": "minimal void set or seamless cyclorama",
+        "voice_matching": "Sparse tech VO or silent; measured pacing",
+        "rhythm": "locked tempo; mechanical precision",
+        "transition": "match cuts on geometry; consistent specular language",
+        "beats": [
+            (
+                "Dead-on hero with hard edge key; product floats on void",
+                "Silent establish: silhouette reads as engineering",
+            ),
+            (
+                "Linear slide parallel to product face; parallax on ports or lens ring",
+                "Highlight precision tolerances",
+            ),
+            (
+                "Macro on interface, LED, or texture grid; single specular rake",
+                "VO optional: one sharp benefit",
+            ),
+            (
+                "Top-down symmetry break: product rotates 15° into perfect alignment",
+                "Satisfying ‘snap’ moment",
+            ),
+            (
+                "Low fog or haze pass optional; rim only; graphic shadow",
+                "Tension before resolve",
+            ),
+            (
+                "Final lockup: product centered, breathing room for UI or price supers",
+                "Calm authority",
+            ),
+        ],
+    },
+    "lifestyle_natural": {
+        "label": "Lifestyle / natural daylight",
+        "mood_tag": "morning sun, wood and linen, slow living",
+        "director": (
+            "Natural lifestyle: real interiors, soft sun paths, slow living. "
+            "Product feels lived-with — editorial home story, not a soundstage."
+        ),
+        "location": "sunlit home: kitchen island, reading nook, or bathroom vanity",
+        "voice_matching": "Warm intimate VO or ambient-forward",
+        "rhythm": "unhurried; breath between moves",
+        "transition": "time-of-day consistent; gentle grade",
+        "beats": [
+            (
+                "Wide morning table; long sun streak; product in daily ritual context",
+                "VO: quiet promise of routine upgraded",
+            ),
+            (
+                "Hands-in-frame interaction; shallow depth; steam or pour optional if truthful",
+                "Sensory cues without gimmick",
+            ),
+            (
+                "Window-side profile; soft bounce; product catches real highlight",
+                "Let natural light sculpt form",
+            ),
+            (
+                "Slow walk-by with camera on slider; background falls away",
+                "Lifestyle scale without losing product read",
+            ),
+            (
+                "Detail insert on material next to organic props (fruit, book, fabric)",
+                "Tactile contrast",
+            ),
+            (
+                "Golden-hour wide; product small-in-frame then gentle push to hero",
+                "Emotional landing",
+            ),
+        ],
+    },
+    "bold_editorial": {
+        "label": "Bold / color editorial",
+        "mood_tag": "gelled color, graphic shadows, high fashion energy",
+        "director": (
+            "High-impact editorial: colored gels, graphic shadows, snap energy. "
+            "Still product-true — think campaign poster in motion."
+        ),
+        "location": "studio set with bold color fields or geometric props",
+        "voice_matching": "Confident VO with attitude or music-forward",
+        "rhythm": "syncopated; beat-driven if VO sparse",
+        "transition": "hard cuts welcome; keep product silhouette readable",
+        "beats": [
+            (
+                "Silhouette against gel wash; product revealed by moving flag",
+                "Hook with shape, not text",
+            ),
+            (
+                "Low angle with strong key; saturated bounce card",
+                "Attitude beat",
+            ),
+            (
+                "Macro with color contrast: complementary gel on background",
+                "Make material pop",
+            ),
+            (
+                "Dutch-lite framing optional; dynamic diagonal composition",
+                "Editorial risk within brand safety",
+            ),
+            (
+                "Strobe-like pulse of light (single source step) — tasteful, not club",
+                "Peak energy",
+            ),
+            (
+                "Clean hero resolve on neutral for logo legibility",
+                "Campaign poster frame",
+            ),
+        ],
+    },
+    "unboxing_asmr": {
+        "label": "Unboxing / desk ASMR",
+        "mood_tag": "top-down satisfaction, slow peel, whisper-quiet motion",
+        "director": (
+            "Unboxing satisfaction: top-down desk, slow pulls, crisp foley-friendly motion. "
+            "Whisper VO or silent; emphasize packaging choreography and product emergence."
+        ),
+        "location": "clean desk top-down; mat or paper texture",
+        "voice_matching": "Whisper ASMR VO or silent; no shouty announcer",
+        "rhythm": "elongated holds; micro pauses on satisfying moments",
+        "transition": "continuous tabletop geography",
+        "beats": [
+            (
+                "Top-down: hands enter; box or sleeve centered; slow controlled slide",
+                "Anticipation; no rush",
+            ),
+            (
+                "Peel film or lift lid; reveal inner tray; macro on texture",
+                "ASMR-forward motion",
+            ),
+            (
+                "Lift product from nest; rotate once for silhouette read",
+                "First full hero reveal",
+            ),
+            (
+                "Lay accessories in row; knolling grammar optional",
+                "Completeness story",
+            ),
+            (
+                "Slow push on logo or hero detail; shallow depth",
+                "Proof of quality",
+            ),
+            (
+                "Final flat lay: product + key pieces; hands exit frame clean",
+                "Thumbnail-friendly end",
+            ),
+        ],
+    },
+    "high_energy_sports": {
+        "label": "High-energy sports",
+        "mood_tag": "kinetic motion, impact lighting, athletic momentum",
+        "director": (
+            "Performance ad language: dynamic camera, fast reveals, hard accents, and purposeful speed. "
+            "Product remains readable while action sells intensity."
+        ),
+        "location": "training floor, outdoor court, or industrial motion set",
+        "voice_matching": "Punchy VO with motivational cadence",
+        "rhythm": "fast and percussive",
+        "transition": "hard cuts and whip-aligned moves",
+        "beats": [
+            (
+                "Explosive hero reveal with quick push and lateral sweep",
+                "Hook instantly with energy and intent",
+            ),
+            (
+                "Tracking move alongside product in active use context",
+                "Demonstrate performance under movement",
+            ),
+            (
+                "Macro impact detail on grip, texture, or mechanism",
+                "Call out functional advantage",
+            ),
+            (
+                "Low-angle speed pass with streaking background cues",
+                "Amplify power and acceleration",
+            ),
+            (
+                "Freeze-like resolve beat with sharp rim and bold silhouette",
+                "Own the frame with confidence",
+            ),
+            (
+                "Final hero lockup with breathing room for CTA",
+                "Strong finish with athletic authority",
+            ),
+        ],
+    },
+    "moody_cinematic_noir": {
+        "label": "Moody cinematic noir",
+        "mood_tag": "deep contrast, practical pools, dramatic shadow play",
+        "director": (
+            "Neo-noir product storytelling: chiaroscuro lighting, intentional darkness, and controlled reveals. "
+            "Tension first, payoff second, always preserving product fidelity."
+        ),
+        "location": "night interior with practical lamps, rain-streaked windows, or dark studio",
+        "voice_matching": "Low intimate VO or silence with atmospheric bed",
+        "rhythm": "measured suspense",
+        "transition": "shadow-led continuity and slow dissolves or soft cuts",
+        "beats": [
+            (
+                "Product emerges from shadow into a narrow key-light path",
+                "Tease form before full reveal",
+            ),
+            (
+                "Slow dolly across reflective surfaces and edge highlights",
+                "Build intrigue through texture",
+            ),
+            (
+                "Macro insert on signature detail with selective focus roll",
+                "Reward attention with craft cues",
+            ),
+            (
+                "Silhouette profile against practical backlight",
+                "Hold tension with clean geometry",
+            ),
+            (
+                "Subtle orbit as highlights travel across contours",
+                "Shift from mystery to confidence",
+            ),
+            (
+                "Final centered hero in controlled darkness",
+                "Memorable noir resolve",
+            ),
+        ],
+    },
+    "playful_stopmotion_style": {
+        "label": "Playful stop-motion style",
+        "mood_tag": "quirky tabletop, handcrafted charm, rhythmic object motion",
+        "director": (
+            "Whimsical tabletop storytelling inspired by stop-motion cadence. "
+            "Products move with intentional beats, graphic compositions, and delightful transitions."
+        ),
+        "location": "colorful tabletop set with paper, props, and clean mini-scenes",
+        "voice_matching": "Bright, friendly VO or playful sound-forward pacing",
+        "rhythm": "bouncy and rhythmic",
+        "transition": "match cuts via prop movement and shape continuity",
+        "beats": [
+            (
+                "Top-down hero pop-in with prop elements snapping into place",
+                "Immediate playful hook",
+            ),
+            (
+                "Stepwise lateral moves revealing key product sides",
+                "Show form with toy-like precision",
+            ),
+            (
+                "Macro detail punctuated by tiny prop choreography",
+                "Turn features into moments of delight",
+            ),
+            (
+                "Mini-scene swap with product centered as anchor",
+                "Context changes while identity stays constant",
+            ),
+            (
+                "Color-block background shift synced with product rotation",
+                "Peak visual fun",
+            ),
+            (
+                "Clean final tableau with product and hero prop accents",
+                "Cheerful, shareable end frame",
+            ),
+        ],
+    },
+    "nature_outdoor_adventure": {
+        "label": "Nature / outdoor adventure",
+        "mood_tag": "golden trails, fresh air texture, expansive outdoor scale",
+        "director": (
+            "Adventure brand language with natural elements: sweeping vistas, tactile details, and grounded utility. "
+            "Product feels capable, dependable, and integrated with real outdoor moments."
+        ),
+        "location": "mountain trail, lakeside camp, or forest clearing at golden hour",
+        "voice_matching": "Grounded VO with aspirational outdoor tone",
+        "rhythm": "steady forward momentum",
+        "transition": "match cuts on motion and horizon lines",
+        "beats": [
+            (
+                "Wide establishing shot with product foregrounded against open landscape",
+                "Set scale and purpose in one frame",
+            ),
+            (
+                "Tracking side move through natural texture: rock, wood, or trail dust",
+                "Show rugged utility and real-world context",
+            ),
+            (
+                "Macro detail with moisture, grain, or weathered surfaces nearby",
+                "Signal durability and craftsmanship",
+            ),
+            (
+                "Hands-in-use moment framed by natural backlight",
+                "Demonstrate intuitive use in the field",
+            ),
+            (
+                "Hero profile on elevated surface with wind/light movement",
+                "Build emotional ownership and capability",
+            ),
+            (
+                "Sunset resolve with clean product lockup and breathing room",
+                "End on calm confidence and adventure payoff",
+            ),
+        ],
+    },
+}
+
+
+def _normalize_concept(raw: Optional[str]) -> str:
+    k = (raw or "").strip().lower().replace("-", "_")
+    if k in _CONCEPTS:
+        return k
+    return "luxury_studio"
+
+
+def _concept_meta(concept_key: str) -> dict[str, Any]:
+    return _CONCEPTS.get(_normalize_concept(concept_key), _CONCEPTS["luxury_studio"])
+
+
+def _heuristic_seconds_per_segment(
+    *,
+    concept_key: str,
+    product_name: str,
+    tagline: str,
+    mood: str,
+    features: str,
+    shot_count: int,
+) -> int:
+    """
+    Pick 4/6/8s pacing from concept DNA + brief richness.
+    This is used when caller does not force a value.
+    """
+    concept_defaults = {
+        "luxury_studio": 8,
+        "ugc_authentic": 4,
+        "tech_minimal": 6,
+        "lifestyle_natural": 6,
+        "bold_editorial": 4,
+        "unboxing_asmr": 6,
+        "high_energy_sports": 4,
+        "moody_cinematic_noir": 8,
+        "playful_stopmotion_style": 4,
+        "nature_outdoor_adventure": 6,
+    }
+    base = concept_defaults.get(_normalize_concept(concept_key), 6)
+
+    richness_text = " ".join(
+        [
+            (product_name or "").strip(),
+            (tagline or "").strip(),
+            (mood or "").strip(),
+            (features or "").strip(),
+        ]
+    ).strip()
+    words = len([w for w in richness_text.split() if w])
+
+    # Richer briefs and fewer shots can support longer per-shot beats.
+    if words >= 45:
+        base += 2
+    elif words <= 12:
+        base -= 2
+
+    if shot_count <= 3:
+        base += 2
+    elif shot_count >= 6:
+        base -= 2
+
+    if base <= 4:
+        return 4
+    if base <= 6:
+        return 6
+    return 8
+
+
+def _parse_seconds_candidate(v: Any) -> Optional[int]:
+    try:
+        n = int(v)
+    except Exception:
+        return None
+    return n if n in (4, 6, 8) else None
+
+
+def _llm_seconds_per_segment(
+    *,
+    client: Any,
+    model: str,
+    concept_key: str,
+    product_name: str,
+    tagline: str,
+    mood: str,
+    features: str,
+    shot_count: int,
+    fallback_seconds: int,
+) -> int:
+    """
+    Ask the planner LLM to choose 4/6/8 seconds for pacing.
+    Falls back to the heuristic-derived value if parsing fails.
+    """
+    c = _concept_meta(concept_key)
+    system = (
+        "You are a short-form ad pacing director. "
+        "Choose seconds_per_segment for a product showcase. "
+        "Allowed values are ONLY 4, 6, or 8. "
+        "Return strict JSON: {\"seconds_per_segment\": 4|6|8, \"reason\": \"...\"}."
+    )
+    user = json.dumps(
+        {
+            "task": "choose_seconds_per_segment",
+            "instruction": "Choose one value balancing clarity, visual richness, and social retention.",
+            "allowed_values": [4, 6, 8],
+            "concept": {
+                "id": _normalize_concept(concept_key),
+                "label": c["label"],
+                "rhythm": c["rhythm"],
+            },
+            "brief": {
+                "product_name": product_name,
+                "tagline": tagline or "n/a",
+                "mood": mood or "n/a",
+                "features": features or "n/a",
+                "shot_count": shot_count,
+            },
+            "response_schema": {
+                "seconds_per_segment": "4|6|8",
+                "reason": "string",
+            },
+        }
+    )
+    try:
+        resp = client.chat.completions.create(
+            model=model,
+            messages=[
+                {"role": "system", "content": system},
+                {"role": "user", "content": user},
+            ],
+            response_format={"type": "json_object"},
+            temperature=0.2,
+        )
+        txt = resp.choices[0].message.content or "{}"
+        data = json.loads(txt)
+        pick = _parse_seconds_candidate(data.get("seconds_per_segment"))
+        return pick if pick is not None else fallback_seconds
+    except Exception:
+        return fallback_seconds
+
+
+def _continuity_template() -> dict:
+    return {
+        "start_position": "product centered, stable hero framing",
+        "end_position": "same product identity, refined end pose for cut",
+        "start_expression": "premium, confident product presence",
+        "end_expression": "elegant pause before next beat",
+        "start_gesture": "subtle light roll on hero surfaces",
+        "end_gesture": "micro shift emphasizing silhouette",
+        "location_status": "continuous studio-grade set",
+    }
+
+
+def _scene_for_shot(mood: str, beat: str) -> dict:
+    return {
+        "environment": f"minimal cinematic set, {mood} grade, high-end commercial",
+        "camera_position": "tripod or slow dolly, professional commercial",
+        "camera_movement": beat,
+        "lighting_state": "soft key, crisp rim, controlled reflections on product",
+        "background_elements": "negative space, subtle gradient or matte surface",
+        "spatial_relationships": "product dominates frame, clean horizon",
+    }
+
+
+def _actions_for_duration(seconds: int) -> dict[str, str]:
+    if seconds <= 4:
+        return {
+            "0:00-0:02": "Lock exposure; begin ultra-slow push",
+            "0:02-0:04": "Hold hero; emphasize material read",
+        }
+    if seconds <= 6:
+        return {
+            "0:00-0:02": "Establish hero; gentle parallax",
+            "0:02-0:04": "Macro-friendly move toward detail",
+            "0:04-0:06": "Settle on iconic silhouette",
+        }
+    return {
+        "0:00-0:02": "Establish premium hero framing",
+        "0:02-0:04": "Slow move to reveal depth and texture",
+        "0:04-0:06": "Accent reflections; controlled speculars",
+        "0:06-0:08": "Resolve on clean iconic pose for edit",
+    }
+
+
+def _bucket_count_for_seconds(seconds: int) -> int:
+    if seconds <= 4:
+        return 2
+    if seconds <= 6:
+        return 3
+    return 4
+
+
+def _concept_arc(concept_key: str, shot_count: int) -> list[dict[str, str]]:
+    c = _concept_meta(concept_key)
+    beats: list[tuple[str, str]] = list(c["beats"])
+    n = max(3, min(shot_count, len(beats)))
+    selected = beats[:n]
+    return [
+        {
+            "segment_number": i,
+            "camera_beat": beat,
+            "story_intent": intent,
+        }
+        for i, (beat, intent) in enumerate(selected, start=1)
+    ]
+
+
+def _segment_has_substance(seg: dict) -> bool:
+    scene = seg.get("scene_continuity") or {}
+    timeline = seg.get("action_timeline") or {}
+    camera_movement = str(scene.get("camera_movement") or "").strip()
+    dialogue = str(timeline.get("dialogue") or "").strip()
+    actions = timeline.get("synchronized_actions")
+    if not camera_movement:
+        return False
+    if not dialogue:
+        return False
+    if not isinstance(actions, dict) or not actions:
+        return False
+    return True
+
+
+def _template_segments(
+    product_name: str,
+    tagline: str,
+    mood: str,
+    features: str,
+    shot_count: int,
+    seconds_per_segment: int,
+    concept_key: str,
+) -> List[dict]:
+    c = _concept_meta(concept_key)
+    beats: list[tuple[str, str]] = list(c["beats"])
+    n = max(3, min(shot_count, len(beats)))
+    chosen = beats[:n]
+    out: List[dict] = []
+    feat_line = (features or "").strip()
+    product_line = f"{product_name}. {feat_line}" if feat_line else product_name
+    effective_mood = f"{mood}. {c['mood_tag']}"
+
+    for i, (camera_beat, dialogue) in enumerate(chosen, start=1):
+        dlg = f"VO: {tagline.strip()}" if (i == 1 and (tagline or "").strip()) else dialogue
+        out.append(
+            {
+                "segment_info": {
+                    "segment_number": i,
+                    "total_segments": n,
+                    "duration": f"{seconds_per_segment}s",
+                    "location": str(c["location"]),
+                    "continuity_markers": _continuity_template(),
+                },
+                "character_description": {
+                    "current_state": f"The hero subject is the product ({product_line}), not a person. "
+                    "Keep identity, proportions, and branding accurate to the reference image.",
+                    "voice_matching": str(c["voice_matching"]),
+                },
+                "scene_continuity": _scene_for_shot(effective_mood, camera_beat),
+                "action_timeline": {
+                    "dialogue": dlg,
+                    "synchronized_actions": _actions_for_duration(seconds_per_segment),
+                    "micro_expressions": "n/a — product-focused",
+                    "breathing_rhythm": str(c["rhythm"]),
+                    "location_transition": str(c["transition"]),
+                    "continuity_checkpoint": "match product identity, reflections, and edge lighting across segments when possible",
+                },
+            }
+        )
+    return out
+
+
+def _openai_messages(
+    product_name: str,
+    tagline: str,
+    mood: str,
+    features: str,
+    shot_count: int,
+    seconds_per_segment: int,
+    image_bytes: Optional[bytes],
+    image_media_type: Optional[str],
+    concept_key: str,
+) -> list[dict[str, Any]]:
+    c = _concept_meta(concept_key)
+    ck = _normalize_concept(concept_key)
+    arc = _concept_arc(ck, shot_count)
+    action_buckets = _actions_for_duration(seconds_per_segment)
+    bucket_count = _bucket_count_for_seconds(seconds_per_segment)
+    system = (
+        "You are a senior commercial director and Veo prompt engineer. "
+        "Output ONLY valid JSON with key 'segments' (array). "
+        "Each item MUST match this TypeScript-like shape: "
+        "{ segment_info: { segment_number, total_segments, duration, location, continuity_markers: { start_position, end_position, start_expression, end_expression, start_gesture, end_gesture, location_status } }, "
+        "character_description: { current_state, voice_matching }, "
+        "scene_continuity: { environment, camera_position, camera_movement, lighting_state, background_elements, spatial_relationships }, "
+        "action_timeline: { dialogue, synchronized_actions (object with keys like '0:00-0:02'), micro_expressions, breathing_rhythm, location_transition, continuity_checkpoint } }. "
+        "Rules: the hero is always the physical product; no human face required; keep branding truthful; photoreal; "
+        f"exactly {shot_count} segments; each segment duration string must be '{seconds_per_segment}s'; "
+        "synchronized_actions must have the right number of time buckets for the segment length "
+        "(4 keys for 8s, 3 for 6s, 2 for 4s). "
+        "Never output vague placeholders like 'cinematic shot', 'nice lighting', 'beautiful scene', or 'generic product footage'. "
+        "Every segment must include concrete camera grammar (lens feeling, angle, motion intent), lighting behavior, and shot objective. "
+        "Keep shot progression intentional: hook -> proof -> differentiation -> payoff. "
+        f"Creative concept — {c['label']}: {c['director']} "
+        "Honor this concept in location, camera grammar, lighting, and VO/dialogue tone across every segment."
+    )
+    user_text = json.dumps(
+        {
+            "task": "generate_showcase_segments",
+            "instruction": (
+                "Describe camera, lighting, and motion to match the creative concept, "
+                "not a generic packshot unless the concept demands it."
+            ),
+            "concept": {
+                "id": ck,
+                "label": c["label"],
+                "mood_tag": c["mood_tag"],
+                "director_notes": c["director"],
+            },
+            "brief": {
+                "product_name": product_name,
+                "tagline": tagline,
+                "user_mood_grade": mood,
+                "key_features": features or "n/a",
+            },
+            "constraints": {
+                "segment_count": shot_count,
+                "seconds_per_segment": seconds_per_segment,
+                "hero_subject": "physical product",
+                "branding_truthful": True,
+                "photoreal": True,
+                "required_bucket_count_per_segment": bucket_count,
+                "fallback_bucket_shape": action_buckets,
+                "must_avoid": [
+                    "generic camera wording",
+                    "repeating the same move in every segment",
+                    "human-face dependent storytelling",
+                    "over-claiming product capabilities",
+                ],
+            },
+            "segment_blueprint": arc,
+            "response_schema": {
+                "segments": [
+                    {
+                        "segment_info": {
+                            "segment_number": "number",
+                            "total_segments": "number",
+                            "duration": f"{seconds_per_segment}s",
+                            "location": "string",
+                            "continuity_markers": {
+                                "start_position": "string",
+                                "end_position": "string",
+                                "start_expression": "string",
+                                "end_expression": "string",
+                                "start_gesture": "string",
+                                "end_gesture": "string",
+                                "location_status": "string",
+                            },
+                        },
+                        "character_description": {
+                            "current_state": "string",
+                            "voice_matching": "string",
+                        },
+                        "scene_continuity": {
+                            "environment": "string",
+                            "camera_position": "string",
+                            "camera_movement": "string",
+                            "lighting_state": "string",
+                            "background_elements": "string",
+                            "spatial_relationships": "string",
+                        },
+                        "action_timeline": {
+                            "dialogue": "string",
+                            "synchronized_actions": "record<string,string>",
+                            "micro_expressions": "string",
+                            "breathing_rhythm": "string",
+                            "location_transition": "string",
+                            "continuity_checkpoint": "string",
+                        },
+                    }
+                ]
+            },
+        }
+    )
+    user: dict[str, Any] = {"role": "user", "content": []}
+    if image_bytes and image_media_type:
+        b64 = base64.b64encode(image_bytes).decode("utf-8")
+        user["content"].append(
+            {
+                "type": "image_url",
+                "image_url": {"url": f"data:{image_media_type};base64,{b64}"},
+            }
+        )
+    user["content"].append({"type": "text", "text": user_text})
+    return [{"role": "system", "content": system}, user]
+
+
+def _normalize_segments(raw: Any, expected: int, seconds: int) -> List[dict]:
+    if not isinstance(raw, dict) or "segments" not in raw:
+        raise ValueError("Invalid JSON: missing segments")
+    segs = raw["segments"]
+    if not isinstance(segs, list) or not segs:
+        raise ValueError("Invalid segments array")
+    out: List[dict] = []
+    required_actions = _actions_for_duration(seconds)
+    required_bucket_count = _bucket_count_for_seconds(seconds)
+    for i, s in enumerate(segs[:expected], start=1):
+        if not isinstance(s, dict):
+            continue
+        si = s.get("segment_info") if isinstance(s.get("segment_info"), dict) else {}
+        si["segment_number"] = i
+        si["total_segments"] = min(len(segs), expected)
+        si["duration"] = f"{seconds}s"
+        si["continuity_markers"] = si.get("continuity_markers") or _continuity_template()
+        s["segment_info"] = si
+        if not isinstance(s.get("character_description"), dict):
+            s["character_description"] = {}
+        if not isinstance(s.get("scene_continuity"), dict):
+            s["scene_continuity"] = {}
+        if not isinstance(s.get("action_timeline"), dict):
+            s["action_timeline"] = {}
+
+        scene = s["scene_continuity"]
+        timeline = s["action_timeline"]
+        character = s["character_description"]
+        scene.setdefault("environment", "minimal cinematic set with product-first framing")
+        scene.setdefault("camera_position", "commercial camera setup with stable product readability")
+        scene.setdefault("camera_movement", "slow intentional move to improve product perception")
+        scene.setdefault("lighting_state", "controlled key and rim light preserving material accuracy")
+        scene.setdefault("background_elements", "clean background with no distracting clutter")
+        scene.setdefault("spatial_relationships", "product remains primary subject with clear silhouette")
+
+        character.setdefault(
+            "current_state",
+            "The hero subject is the physical product only; preserve branding and proportions.",
+        )
+        character.setdefault("voice_matching", "Voice optional; keep tone aligned to concept.")
+
+        timeline.setdefault("dialogue", "Minimal VO: emphasize one clear product value.")
+        timeline.setdefault("micro_expressions", "n/a - product-focused")
+        timeline.setdefault("breathing_rhythm", "measured commercial rhythm")
+        timeline.setdefault("location_transition", "maintain visual continuity across cuts")
+        timeline.setdefault("continuity_checkpoint", "preserve product identity and lighting continuity")
+
+        actions = timeline.get("synchronized_actions")
+        if not isinstance(actions, dict) or len(actions) != required_bucket_count:
+            timeline["synchronized_actions"] = required_actions
+        if not _segment_has_substance(s):
+            timeline["dialogue"] = "VO: Clear, specific value proposition tied to this shot."
+            scene["camera_movement"] = "purposeful move with clear beginning, reveal, and resolve"
+            timeline["synchronized_actions"] = required_actions
+        out.append(s)
+    if len(out) < 3:
+        raise ValueError("Too few valid segments")
+    return out[:expected]
+
+
+class DirectConceptsBody(BaseModel):
+    product_name: str = Field(..., min_length=1, max_length=200)
+    tagline: str = Field(default="", max_length=400)
+    mood: str = Field(default="", max_length=400)
+    features: str = Field(default="", max_length=4000)
+    count: int = Field(default=10, ge=3, le=12)
+
+
+class DirectOneConceptBody(BaseModel):
+    product_name: str = Field(..., min_length=1, max_length=200)
+    tagline: str = Field(default="", max_length=400)
+    mood: str = Field(default="", max_length=400)
+    features: str = Field(default="", max_length=4000)
+    exclude: list[str] = Field(default_factory=list)
+    index: int = Field(default=1, ge=1, le=20)
+
+
+def _template_direct_concepts(
+    product_name: str,
+    tagline: str,
+    mood: str,
+    features: str,
+    count: int,
+) -> list[str]:
+    base = [
+        "Luxury studio hero with soft bloom and precision macro details",
+        "UGC creator desk walkthrough with candid handheld authenticity",
+        "Tech minimal void set with hard-edge lighting and geometric moves",
+        "Lifestyle morning ritual in natural daylight with tactile closeups",
+        "Bold color editorial with gel lights and graphic shadows",
+        "Top-down unboxing ASMR with satisfying reveal choreography",
+        "High-energy performance montage with dynamic camera momentum",
+        "Moody cinematic noir with deep contrast and silhouette reveals",
+        "Playful stop-motion inspired tabletop with rhythmic prop beats",
+        "Outdoor adventure story with golden hour product utility moments",
+        "Artisan craftsmanship documentary style with texture-first macro rhythm",
+        "Futuristic holographic showcase with clean sci-fi interface energy",
+    ]
+    hooks: list[str] = []
+    if tagline.strip():
+        hooks.append(f'Tagline pulse: "{tagline.strip()}"')
+    if mood.strip():
+        hooks.append(f"Mood anchor: {mood.strip()}")
+    if features.strip():
+        feature_line = " ".join(features.strip().split())
+        hooks.append(f"Feature focus: {feature_line[:180]}")
+    suffix = f" for {product_name.strip()}"
+    out: list[str] = []
+    for i in range(count):
+        concept = f"{base[i % len(base)]}{suffix}"
+        if hooks:
+            concept = f"{concept}. {hooks[i % len(hooks)]}"
+        out.append(concept)
+    return out
+
+
+def _llm_direct_concepts(
+    *,
+    product_name: str,
+    tagline: str,
+    mood: str,
+    features: str,
+    count: int,
+) -> list[str]:
+    api_key = os.getenv("OPENAI_API_KEY")
+    if not api_key:
+        return _template_direct_concepts(product_name, tagline, mood, features, count)
+    try:
+        from openai import OpenAI
+
+        client = OpenAI(api_key=api_key)
+        system = (
+            "You are a senior creative director for product video ads. "
+            "Generate distinct, production-ready creative concepts for image-to-video generation. "
+            "Return strict JSON: {\"concepts\": [\"...\"]}. "
+            "Each concept must be one sentence, concrete camera/lighting/story style, no hashtags, no numbering."
+        )
+        user = json.dumps(
+            {
+                "task": "generate_direct_video_concepts",
+                "count": count,
+                "constraints": {
+                    "distinct_styles": True,
+                    "single_sentence_each": True,
+                    "max_chars_per_concept": 220,
+                    "focused_on_product_identity": True,
+                    "suitable_for_15s_video": True,
+                },
+                "brief": {
+                    "product_name": product_name,
+                    "tagline": tagline or "n/a",
+                    "mood": mood or "n/a",
+                    "features": features or "n/a",
+                },
+            }
+        )
+        resp = client.chat.completions.create(
+            model=DEFAULT_MODEL,
+            messages=[{"role": "system", "content": system}, {"role": "user", "content": user}],
+            response_format={"type": "json_object"},
+            temperature=0.9,
+        )
+        txt = resp.choices[0].message.content or "{}"
+        data = json.loads(txt)
+        raw = data.get("concepts")
+        if not isinstance(raw, list):
+            return _template_direct_concepts(product_name, tagline, mood, features, count)
+        cleaned: list[str] = []
+        seen = set()
+        for x in raw:
+            s = " ".join(str(x or "").split()).strip()
+            if not s:
+                continue
+            if len(s) > 220:
+                s = s[:220].rstrip()
+            key = s.lower()
+            if key in seen:
+                continue
+            seen.add(key)
+            cleaned.append(s)
+            if len(cleaned) >= count:
+                break
+        if len(cleaned) < count:
+            cleaned.extend(
+                [
+                    c
+                    for c in _template_direct_concepts(product_name, tagline, mood, features, count)
+                    if c.lower() not in seen
+                ][: count - len(cleaned)]
+            )
+        return cleaned[:count]
+    except Exception:
+        return _template_direct_concepts(product_name, tagline, mood, features, count)
+
+
+@router.post("/showcase/direct-concepts")
+async def showcase_direct_concepts(body: DirectConceptsBody):
+    concepts = await asyncio.to_thread(
+        _llm_direct_concepts,
+        product_name=body.product_name.strip(),
+        tagline=body.tagline.strip(),
+        mood=body.mood.strip(),
+        features=body.features.strip(),
+        count=int(body.count),
+    )
+    return {"concepts": concepts}
+
+
+@router.post("/showcase/direct-concept-one")
+async def showcase_direct_concept_one(body: DirectOneConceptBody):
+    api_key = os.getenv("OPENAI_API_KEY")
+    excludes = [" ".join(str(x or "").split()).strip().lower() for x in body.exclude if str(x or "").strip()]
+    excludes_set = set(excludes)
+
+    if api_key:
+        try:
+            from openai import OpenAI
+
+            client = OpenAI(api_key=api_key)
+            system = (
+                "You are a senior creative director for product video ads. "
+                "Return strict JSON only: {\"concept\": \"...\"}. "
+                "One sentence, concrete visual direction, no numbering, no hashtags."
+            )
+            user = json.dumps(
+                {
+                    "task": "regenerate_single_direct_video_concept",
+                    "brief": {
+                        "product_name": body.product_name.strip(),
+                        "tagline": body.tagline.strip() or "n/a",
+                        "mood": body.mood.strip() or "n/a",
+                        "features": body.features.strip() or "n/a",
+                    },
+                    "slot_index": int(body.index),
+                    "must_be_distinct_from": list(excludes_set),
+                }
+            )
+            resp = client.chat.completions.create(
+                model=DEFAULT_MODEL,
+                messages=[{"role": "system", "content": system}, {"role": "user", "content": user}],
+                response_format={"type": "json_object"},
+                temperature=1.0,
+            )
+            txt = resp.choices[0].message.content or "{}"
+            data = json.loads(txt)
+            c = " ".join(str(data.get("concept") or "").split()).strip()
+            if c and c.lower() not in excludes_set:
+                return {"concept": c[:220]}
+        except Exception:
+            pass
+
+    # Template fallback: pick first concept not in excludes.
+    templ = _template_direct_concepts(
+        body.product_name.strip(),
+        body.tagline.strip(),
+        body.mood.strip(),
+        body.features.strip(),
+        12,
+    )
+    for c in templ:
+        if c.lower() not in excludes_set:
+            return {"concept": c}
+    return {"concept": templ[0] if templ else "Cinematic premium product showcase with clear differentiation."}
+
+
+@router.post("/showcase/plan-stream")
+async def showcase_plan_stream(
+    productName: str = Form(...),
+    tagline: str = Form(""),
+    mood: str = Form("premium, high contrast, soft bloom"),
+    features: str = Form(""),
+    shotCount: int = Form(5),
+    secondsPerSegment: Optional[int] = Form(None),
+    creativeConcept: str = Form("luxury_studio"),
+    image: Optional[UploadFile] = File(None),
+    heroImageUrl: str = Form(""),
+):
+    shot_count = max(3, min(int(shotCount), 6))
+    requested_seconds = int(secondsPerSegment) if secondsPerSegment is not None else None
+    if requested_seconds in (4, 6, 8):
+        seconds = requested_seconds
+    else:
+        seconds = _heuristic_seconds_per_segment(
+            concept_key=creativeConcept,
+            product_name=productName,
+            tagline=tagline,
+            mood=mood,
+            features=features,
+            shot_count=shot_count,
+        )
+    concept = _normalize_concept(creativeConcept)
+    concept_meta = _concept_meta(concept)
+
+    image_bytes: Optional[bytes] = None
+    image_media_type: Optional[str] = None
+    if image is not None:
+        raw = await image.read()
+        if raw:
+            image_bytes = raw
+            image_media_type = image.content_type or "image/jpeg"
+    if image_bytes is None and (heroImageUrl or "").strip():
+        try:
+            async with httpx.AsyncClient(timeout=30.0, follow_redirects=True) as client:
+                r = await client.get(
+                    heroImageUrl.strip(),
+                    headers={"User-Agent": "ProductShowcase/1.0"},
+                )
+                r.raise_for_status()
+                image_bytes = r.content
+                ct = (r.headers.get("content-type") or "image/jpeg").split(";")[0].strip()
+                image_media_type = ct if ct.startswith("image/") else "image/jpeg"
+        except Exception as e:
+            raise HTTPException(
+                status_code=400,
+                detail=f"Could not load heroImageUrl for planning: {e}",
+            )
+
+    async def gen():
+        prompt_id = str(uuid.uuid4())
+        api_key = os.getenv("OPENAI_API_KEY")
+        segments: List[dict] = []
+        selected_seconds = seconds
+
+        try:
+            if api_key:
+                from openai import OpenAI
+
+                client = OpenAI(api_key=api_key)
+                if requested_seconds not in (4, 6, 8):
+                    selected_seconds = await asyncio.to_thread(
+                        _llm_seconds_per_segment,
+                        client=client,
+                        model=DEFAULT_MODEL,
+                        concept_key=concept,
+                        product_name=productName,
+                        tagline=tagline,
+                        mood=mood,
+                        features=features,
+                        shot_count=shot_count,
+                        fallback_seconds=seconds,
+                    )
+                messages = _openai_messages(
+                    productName,
+                    tagline,
+                    mood,
+                    features,
+                    shot_count,
+                    selected_seconds,
+                    image_bytes,
+                    image_media_type,
+                    concept,
+                )
+
+                def call_llm():
+                    return client.chat.completions.create(
+                        model=DEFAULT_MODEL,
+                        messages=messages,
+                        response_format={"type": "json_object"},
+                        temperature=0.7,
+                    )
+
+                completion = await asyncio.to_thread(call_llm)
+                text = completion.choices[0].message.content or "{}"
+                data = json.loads(text)
+                segments = _normalize_segments(data, shot_count, selected_seconds)
+            else:
+                segments = _template_segments(
+                    productName,
+                    tagline,
+                    mood,
+                    features,
+                    shot_count,
+                    selected_seconds,
+                    concept,
+                )
+        except Exception as e:
+            yield json.dumps(
+                {
+                    "event": "error",
+                    "message": str(e),
+                    "error_type": type(e).__name__,
+                }
+            ) + "\n"
+            return
+
+        yield json.dumps(
+            {
+                "event": "start",
+                "total_segments": len(segments),
+                "model": DEFAULT_MODEL if api_key else "template",
+            }
+        ) + "\n"
+
+        total = len(segments)
+        for idx, seg in enumerate(segments):
+            progress = int((idx + 1) / max(total, 1) * 100)
+            yield json.dumps(
+                {
+                    "event": "segment",
+                    "index": idx,
+                    "total": total,
+                    "progress": progress,
+                    "segment": seg,
+                }
+            ) + "\n"
+            await asyncio.sleep(0.05)
+
+        payload = {
+            "segments": segments,
+            "environment": f"{concept_meta['label']} · {mood}",
+            "creative_concept": concept,
+            "seconds_per_segment": selected_seconds,
+        }
+        yield json.dumps(
+            {
+                "event": "complete",
+                "message": "Shot plan ready",
+                "prompt_id": prompt_id,
+                "payload": payload,
+            }
+        ) + "\n"
+
+    return StreamingResponse(gen(), media_type="application/x-ndjson")

backend/api/video_export.py

@@ -0,0 +1,250 @@
+"""
+Video Export API
+Handles merging multiple video clips into a single output video
+"""
+
+from fastapi import APIRouter, HTTPException, UploadFile, File, Form
+from fastapi.responses import FileResponse, StreamingResponse
+from typing import List, Optional, Tuple
+import os
+import tempfile
+import subprocess
+import json
+from pathlib import Path
+
+router = APIRouter()
+
+
+def get_video_dimensions(video_path: Path) -> Tuple[int, int]:
+    """Get video width and height using ffprobe"""
+    try:
+        cmd = [
+            'ffprobe',
+            '-v', 'error',
+            '-select_streams', 'v:0',
+            '-show_entries', 'stream=width,height',
+            '-of', 'json',
+            str(video_path)
+        ]
+        result = subprocess.run(cmd, capture_output=True, text=True, timeout=10)
+        if result.returncode == 0:
+            data = json.loads(result.stdout)
+            streams = data.get('streams', [])
+            if streams:
+                width = streams[0].get('width', 1080)
+                height = streams[0].get('height', 1920)
+                return (width, height)
+    except Exception as e:
+        print(f"⚠️ Could not detect video dimensions: {e}")
+    
+    # Default to 9:16 portrait if detection fails
+    return (1080, 1920)
+
+
+@router.post("/export/merge")
+async def merge_videos(
+    clips_data: str = Form(...),  # JSON string with clip metadata
+    files: List[UploadFile] = File(...)
+):
+    """
+    Merge multiple video clips into a single output video
+    
+    clips_data: JSON string containing array of clip objects with:
+        - index: order in timeline
+        - startTime: start time in clip (seconds)
+        - endTime: end time in clip (seconds)
+        - type: 'video' or 'image'
+        - duration: duration for images (seconds)
+    
+    files: Video/image files in the same order as clips_data
+    """
+    try:
+        # Parse clips data
+        clips = json.loads(clips_data)
+        
+        if len(clips) != len(files):
+            raise HTTPException(
+                status_code=400,
+                detail=f"Mismatch: {len(clips)} clips but {len(files)} files"
+            )
+        
+        if len(clips) == 0:
+            raise HTTPException(status_code=400, detail="No clips to merge")
+        
+        # Create temporary directory for processing
+        with tempfile.TemporaryDirectory() as temp_dir:
+            temp_path = Path(temp_dir)
+            
+            # Save all uploaded files
+            file_paths = []
+            for i, file in enumerate(files):
+                clip = clips[i]
+                file_path = temp_path / f"input_{i}.{file.filename.split('.')[-1] if '.' in file.filename else 'mp4'}"
+                
+                with open(file_path, 'wb') as f:
+                    content = await file.read()
+                    f.write(content)
+                
+                file_paths.append(file_path)
+            
+            # Detect dimensions from first video to preserve aspect ratio
+            target_width, target_height = get_video_dimensions(file_paths[0])
+            print(f"📐 Detected video dimensions: {target_width}x{target_height}")
+            
+            # Build FFmpeg command
+            output_path = temp_path / "output.mp4"
+            
+            # Helper function to check if video has audio stream
+            def has_audio_stream(video_path: Path) -> bool:
+                """Check if video file has an audio stream"""
+                try:
+                    cmd = [
+                        'ffprobe',
+                        '-v', 'error',
+                        '-select_streams', 'a',
+                        '-show_entries', 'stream=codec_type',
+                        '-of', 'json',
+                        str(video_path)
+                    ]
+                    result = subprocess.run(cmd, capture_output=True, text=True, timeout=10)
+                    if result.returncode == 0:
+                        import json as json_lib
+                        data = json_lib.loads(result.stdout)
+                        streams = data.get('streams', [])
+                        return len(streams) > 0
+                    return False
+                except Exception:
+                    return False
+            
+            # Build filter complex - process clips in order
+            filter_parts = []
+            input_args = []
+            concat_inputs = []
+            
+            # Process all clips in order
+            input_index = 0
+            for clip_idx, clip in enumerate(clips):
+                file_path = file_paths[clip_idx]
+                
+                if clip['type'] == 'video':
+                    clip_duration = clip['endTime'] - clip['startTime']
+                    input_args.extend(['-i', str(file_path)])
+                    
+                    # Check if video has audio
+                    has_audio = has_audio_stream(file_path)
+                    
+                    # Trim video and scale to match first video's dimensions
+                    # Using scale with force_original_aspect_ratio to handle any size differences
+                    filter_parts.append(
+                        f"[{input_index}:v]trim=start={clip['startTime']}:end={clip['endTime']},"
+                        f"setpts=PTS-STARTPTS,"
+                        f"scale={target_width}:{target_height}:force_original_aspect_ratio=decrease,"
+                        f"pad={target_width}:{target_height}:(ow-iw)/2:(oh-ih)/2,"
+                        f"setsar=1[v{clip_idx}];"
+                    )
+                    
+                    if has_audio:
+                        # Use existing audio stream
+                        filter_parts.append(
+                            f"[{input_index}:a]atrim=start={clip['startTime']}:end={clip['endTime']},"
+                            f"asetpts=PTS-STARTPTS[a{clip_idx}];"
+                        )
+                    else:
+                        # Generate silent audio for videos without audio
+                        filter_parts.append(
+                            f"anullsrc=channel_layout=stereo:sample_rate=44100,atrim=0:{clip_duration},"
+                            f"asetpts=PTS-STARTPTS[a{clip_idx}];"
+                        )
+                    
+                    input_index += 1
+                else:
+                    # Image clip
+                    clip_duration = clip.get('duration', 3.0)  # Default 3 seconds for images
+                    input_args.extend(['-loop', '1', '-t', str(clip_duration), '-i', str(file_path)])
+                    
+                    # Scale image to match video dimensions
+                    filter_parts.append(
+                        f"[{input_index}:v]scale={target_width}:{target_height}:force_original_aspect_ratio=decrease,"
+                        f"pad={target_width}:{target_height}:(ow-iw)/2:(oh-ih)/2,"
+                        f"setsar=1,format=yuv420p[v{clip_idx}];"
+                    )
+                    # Generate silent audio
+                    filter_parts.append(
+                        f"anullsrc=channel_layout=stereo:sample_rate=44100,atrim=0:{clip_duration},"
+                        f"asetpts=PTS-STARTPTS[a{clip_idx}];"
+                    )
+                    
+                    input_index += 1
+                
+                # Add to concat inputs in order
+                concat_inputs.append(f"[v{clip_idx}][a{clip_idx}]")
+            
+            # Build complete filter complex
+            filter_complex = ''.join(filter_parts)
+            filter_complex += f"{''.join(concat_inputs)}concat=n={len(clips)}:v=1:a=1[outv][outa]"
+            
+            # Build FFmpeg command
+            ffmpeg_cmd = [
+                'ffmpeg',
+                *input_args,
+                '-filter_complex', filter_complex,
+                '-map', '[outv]',
+                '-map', '[outa]',
+                '-c:v', 'libx264',
+                '-c:a', 'aac',
+                '-movflags', '+faststart',
+                '-y',  # Overwrite output
+                str(output_path)
+            ]
+            
+            print(f"🎬 Running FFmpeg merge with dimensions: {target_width}x{target_height}")
+            
+            # Run FFmpeg
+            result = subprocess.run(
+                ffmpeg_cmd,
+                capture_output=True,
+                text=True,
+                timeout=300  # 5 minute timeout
+            )
+            
+            if result.returncode != 0:
+                print(f"❌ FFmpeg error: {result.stderr}")
+                raise HTTPException(
+                    status_code=500,
+                    detail=f"FFmpeg failed: {result.stderr[:500]}"
+                )
+            
+            if not output_path.exists():
+                raise HTTPException(status_code=500, detail="Output file was not created")
+            
+            # Read the entire file into memory before temp directory is deleted
+            print(f"📦 Reading merged video file ({output_path.stat().st_size / 1024 / 1024:.2f} MB)...")
+            with open(output_path, 'rb') as f:
+                video_content = f.read()
+            
+            print(f"✅ Video merged successfully: {target_width}x{target_height}")
+            
+            # Return the merged video file
+            def generate():
+                # Yield in chunks to avoid loading entire file in memory at once
+                chunk_size = 8192
+                for i in range(0, len(video_content), chunk_size):
+                    yield video_content[i:i + chunk_size]
+            
+            return StreamingResponse(
+                generate(),
+                media_type="video/mp4",
+                headers={
+                    "Content-Disposition": "attachment; filename=exported-video.mp4",
+                    "Content-Type": "video/mp4",
+                    "Content-Length": str(len(video_content))
+                }
+            )
+    
+    except json.JSONDecodeError as e:
+        raise HTTPException(status_code=400, detail=f"Invalid JSON: {str(e)}")
+    except subprocess.TimeoutExpired:
+        raise HTTPException(status_code=504, detail="Video processing timed out")
+    except Exception as e:
+        print(f"❌ Export error: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Export failed: {str(e)}")

backend/api/video_generation.py

@@ -0,0 +1,761 @@
+"""
+Video Generation API endpoints
+Handles KIE API integration with SSE support for real-time updates
+"""
+
+from fastapi import APIRouter, HTTPException, Request, Query
+from fastapi.responses import StreamingResponse, JSONResponse, Response
+from pydantic import BaseModel
+from typing import List, Optional, Dict, Any
+import httpx
+import asyncio
+import json
+import os
+import shutil
+import subprocess
+import tempfile
+from pathlib import Path
+from datetime import datetime
+
+from utils.image_processor import compress_and_store_image
+from utils.public_url import get_public_base_url
+from utils.storage import video_results, sse_clients, cleanup_old_results
+
+router = APIRouter()
+
+KIE_API_BASE = "https://api.kie.ai"
+
+_ALLOWED_VEO_CLIP_SECONDS = frozenset({4, 6, 8})
+
+
+def _normalize_veo_duration_seconds(v: Optional[int]) -> Optional[int]:
+    if v is None:
+        return None
+    try:
+        n = int(v)
+    except (TypeError, ValueError):
+        return None
+    return n if n in _ALLOWED_VEO_CLIP_SECONDS else None
+
+
+def _ffmpeg_trim_to_seconds(src: Path, dest: Path, seconds: int) -> None:
+    cmd = [
+        "ffmpeg",
+        "-y",
+        "-i",
+        str(src),
+        "-t",
+        str(seconds),
+        "-c:v",
+        "libx264",
+        "-preset",
+        "veryfast",
+        "-crf",
+        "20",
+        "-c:a",
+        "aac",
+        "-b:a",
+        "128k",
+        "-movflags",
+        "+faststart",
+        str(dest),
+    ]
+    r = subprocess.run(cmd, capture_output=True, text=True, timeout=180)
+    if r.returncode != 0:
+        tail = (r.stderr or "")[-900:]
+        raise RuntimeError(tail or "ffmpeg trim failed")
+
+
+# Request/Response Models
+class VideoGenerationRequest(BaseModel):
+    prompt: Any  # Can be string (legacy) or dict/object (structured JSON)
+    imageUrls: Optional[List[str]] = []
+    model: Optional[str] = "veo3_fast"
+    aspectRatio: Optional[str] = "9:16"
+    generationType: Optional[str] = None
+    seeds: Optional[int] = None  # Seed for consistent lighting/style (e.g., 12005)
+    # Enforce audio by default (product decision)
+    voiceType: Optional[str] = 'Deep'  # Voice type for audio generation (e.g., "Deep", "Warm", "Crisp", "None")
+    # Veo clip length (seconds). If omitted, providers often default to 8s.
+    durationSeconds: Optional[int] = None
+
+class VideoExtendRequest(BaseModel):
+    taskId: str
+    prompt: Any  # Can be string or structured JSON
+    seeds: Optional[int] = None
+    watermark: Optional[str] = None
+    voiceType: Optional[str] = None  # Voice type for audio generation
+
+class VideoGenerationResponse(BaseModel):
+    taskId: str
+    status: str
+
+class CallbackData(BaseModel):
+    code: int
+    msg: str
+    data: Optional[Dict[str, Any]] = None
+
+# Helper functions
+def get_kie_api_key():
+    """Get KIE API key from environment"""
+    api_key = os.getenv('KIE_API_KEY')
+    if not api_key:
+        raise HTTPException(
+            status_code=500,
+            detail="KIE_API_KEY not configured on server."
+        )
+    return api_key
+
+async def send_sse_event(task_id: str, data: dict):
+    """Send Server-Sent Event to connected client"""
+    if task_id in sse_clients:
+        queue = sse_clients[task_id]
+        await queue.put(data)
+
+# Endpoints
+@router.post("/veo/generate", response_model=VideoGenerationResponse)
+async def generate_video(request: VideoGenerationRequest, req: Request):
+    """
+    Generate video using KIE Veo 3.1 API
+    Supports text-to-video and image-to-video generation
+    """
+    try:
+        api_key = get_kie_api_key()
+        
+        # Build public URL for callback
+        public_url = get_public_base_url()
+        callback_url = f"{public_url}/api/veo/callback"
+        
+        # Process image URLs
+        public_image_urls = []
+        if request.imageUrls:
+            print(f"📷 Processing {len(request.imageUrls)} images...")
+            for image_url in request.imageUrls:
+                # If it's already a public URL, use it as-is
+                if image_url.startswith(('http://', 'https://')):
+                    print(f"   Using external URL: {image_url}")
+                    public_image_urls.append(image_url)
+                else:
+                    # Compress and host the data URL
+                    hosted_url = await compress_and_store_image(image_url, public_url)
+                    print(f"   Hosted image: {hosted_url}")
+                    public_image_urls.append(hosted_url)
+        
+        # Determine generation type
+        generation_type = request.generationType
+        if not generation_type:
+            generation_type = "FIRST_AND_LAST_FRAMES_2_VIDEO" if public_image_urls else "TEXT_2_VIDEO"
+        
+        # Log prompt format and seed
+        if isinstance(request.prompt, dict):
+            print(f"📝 Sending structured JSON prompt to Veo 3.1")
+        else:
+            print(f"📝 Sending text prompt to Veo 3.1")
+        
+        if request.seeds:
+            print(f"�� Using seed: {request.seeds} (warm, flattering lighting)")
+        
+        # Call KIE API
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            payload = {
+                "prompt": request.prompt,  # Can be string or structured JSON object
+                "imageUrls": public_image_urls,
+                "model": request.model,
+                "aspectRatio": request.aspectRatio,
+                "generationType": generation_type,
+                "enableTranslation": True,
+                "callBackUrl": callback_url
+            }
+            
+            # Add optional seed parameter
+            if request.seeds is not None:
+                payload["seeds"] = request.seeds
+            
+            # Enforce audio for all generations. Normalize any explicit "None" to default.
+            voice = request.voiceType or 'Deep'
+            if isinstance(voice, str) and voice.lower() == 'none':
+                voice = 'Deep'
+            payload["voiceType"] = voice
+            print(f"🎤 Enforcing audio (voiceType: {voice})")
+
+            clip_sec = _normalize_veo_duration_seconds(request.durationSeconds)
+            if clip_sec is not None:
+                # Google / KIE gateways commonly accept string seconds for Veo
+                payload["durationSeconds"] = str(clip_sec)
+                print(f"⏱ Requested clip duration: {clip_sec}s")
+            
+            response = await client.post(
+                f"{KIE_API_BASE}/api/v1/veo/generate",
+                headers={
+                    "Authorization": f"Bearer {api_key}",
+                    "Content-Type": "application/json"
+                },
+                json=payload
+            )
+        
+        # Log raw response for debugging
+        print(f"📡 KIE API response status: {response.status_code}")
+        
+        # Check HTTP status first
+        if response.status_code != 200:
+            error_text = response.text
+            content_type = response.headers.get('content-type', '').lower()
+            
+            # Handle HTML error responses (like 502 Bad Gateway pages)
+            if 'text/html' in content_type or error_text.strip().startswith('<!DOCTYPE') or error_text.strip().startswith('<html'):
+                # Extract meaningful error from HTML if possible
+                error_message = f"KIE API service unavailable (HTTP {response.status_code})"
+                
+                # Try to extract title or error message from HTML
+                if '<title>' in error_text:
+                    import re
+                    title_match = re.search(r'<title>(.*?)</title>', error_text, re.IGNORECASE | re.DOTALL)
+                    if title_match:
+                        title = title_match.group(1).strip()
+                        # Extract just the error part (e.g., "502: Bad gateway" from "kie.ai | 502: Bad gateway")
+                        if ':' in title:
+                            error_message = f"KIE API error: {title.split('|')[-1].strip()}"
+                        else:
+                            error_message = f"KIE API error: {title}"
+                
+                print(f"❌ KIE API HTTP error: {response.status_code} - {error_message}")
+                raise HTTPException(
+                    status_code=502,  # Bad Gateway - the KIE API is down/unavailable
+                    detail=error_message
+                )
+            else:
+                # Non-HTML error response, try to extract JSON error if possible
+                try:
+                    error_data = response.json()
+                    error_message = error_data.get('msg') or error_data.get('message') or error_data.get('detail') or f"KIE API error (HTTP {response.status_code})"
+                except (json.JSONDecodeError, ValueError):
+                    # Not JSON, use text (truncated)
+                    error_message = error_text[:200] if len(error_text) > 200 else error_text
+                
+                print(f"❌ KIE API HTTP error: {response.status_code} - {error_message[:200]}")
+            raise HTTPException(
+                status_code=response.status_code,
+                    detail=f"KIE API error: {error_message}"
+            )
+        
+        result = response.json()
+        print(f"📡 KIE API result code: {result.get('code')}, msg: {result.get('msg')}")
+        
+        if result.get('code') != 200:
+            raise HTTPException(
+                status_code=result.get('code', 500),
+                detail=result.get('msg', 'KIE API request failed')
+            )
+        
+        task_id = result['data']['taskId']
+        print(f"✅ Video generation started: {task_id}")
+        
+        return VideoGenerationResponse(
+            taskId=task_id,
+            status="processing"
+        )
+    
+    except HTTPException:
+        raise
+    except httpx.HTTPStatusError as e:
+        error_text = e.response.text
+        content_type = e.response.headers.get('content-type', '').lower()
+        
+        # Handle HTML error responses
+        if 'text/html' in content_type or error_text.strip().startswith('<!DOCTYPE') or error_text.strip().startswith('<html'):
+            error_msg = f"KIE API service unavailable (HTTP {e.response.status_code})"
+            # Try to extract meaningful error from HTML
+            if '<title>' in error_text:
+                import re
+                title_match = re.search(r'<title>(.*?)</title>', error_text, re.IGNORECASE | re.DOTALL)
+                if title_match:
+                    title = title_match.group(1).strip()
+                    if ':' in title:
+                        error_msg = f"KIE API error: {title.split('|')[-1].strip()}"
+        else:
+            # Try to extract JSON error if possible
+            try:
+                error_data = e.response.json()
+                error_msg = error_data.get('msg') or error_data.get('message') or error_data.get('detail') or f"KIE API error (HTTP {e.response.status_code})"
+            except (json.JSONDecodeError, ValueError):
+                error_msg = error_text[:200] if len(error_text) > 200 else error_text
+        
+        print(f"❌ {error_msg}")
+        raise HTTPException(status_code=502 if 'text/html' in content_type else e.response.status_code, detail=error_msg)
+    except httpx.RequestError as e:
+        error_msg = f"KIE API request error: {type(e).__name__} - {str(e)}"
+        print(f"❌ {error_msg}")
+        raise HTTPException(status_code=502, detail=error_msg)
+    except json.JSONDecodeError as e:
+        error_msg = f"Invalid JSON response from KIE API. The service may be unavailable."
+        print(f"❌ JSON decode error: {str(e)}")
+        raise HTTPException(status_code=502, detail=error_msg)
+    except Exception as e:
+        import traceback
+        error_msg = f"{type(e).__name__}: {str(e)}"
+        print(f"❌ Video generation error: {error_msg}")
+        traceback.print_exc()
+        raise HTTPException(
+            status_code=500,
+            detail=f"Video generation request failed: {error_msg}"
+        )
+
+@router.post("/veo/callback")
+async def veo_callback(callback_data: CallbackData):
+    """
+    Callback endpoint for KIE API
+    Receives video generation status updates
+    """
+    try:
+        data = callback_data.data or {}
+        task_id = data.get('taskId')
+        info = data.get('info', {})
+        fallback_flag = data.get('fallbackFlag')
+        
+        print(f"📥 Callback received for task {task_id}: code={callback_data.code}, msg={callback_data.msg}")
+        
+        # Store result
+        video_results[task_id] = {
+            'code': callback_data.code,
+            'msg': callback_data.msg,
+            'taskId': task_id,
+            'info': info,
+            'fallbackFlag': fallback_flag,
+            'timestamp': datetime.now().timestamp()
+        }
+        
+        # Send SSE update to client
+        if callback_data.code == 200 and info:
+            await send_sse_event(task_id, {
+                'status': 'succeeded',
+                'url': info.get('resultUrls', [None])[0],
+                'resultUrls': info.get('resultUrls', []),
+                'originUrls': info.get('originUrls', []),
+                'resolution': info.get('resolution'),
+                'fallbackFlag': fallback_flag
+            })
+        else:
+            # Include both code and message for proper error handling
+            # This format matches what veo_error_handler.py expects
+            await send_sse_event(task_id, {
+                'status': 'failed',
+                'error': callback_data.msg,  # Legacy field
+                'message': callback_data.msg,  # For error handler
+                'code': callback_data.code  # HTTP or API error code
+            })
+        
+        # Clean up old results
+        cleanup_old_results()
+        
+        return JSONResponse(
+            status_code=200,
+            content={'code': 200, 'msg': 'success'}
+        )
+    
+    except Exception as e:
+        print(f"❌ Callback processing error: {str(e)}")
+        raise HTTPException(
+            status_code=500,
+            detail="Failed to process callback"
+        )
+
+
+@router.post("/veo/extend", response_model=VideoGenerationResponse)
+async def extend_video(request: VideoExtendRequest):
+    """
+    Extend an existing video using KIE Veo 3.1 extend API
+    Takes an existing taskId and extends it with new prompt
+    """
+    try:
+        api_key = get_kie_api_key()
+        
+        # Build public URL for callback
+        public_url = get_public_base_url()
+        callback_url = f"{public_url}/api/veo/callback"
+        
+        print(f"🎬 Extending video from task: {request.taskId}")
+        
+        # Log prompt format and seed
+        if isinstance(request.prompt, dict):
+            print(f"📝 Extending with structured JSON prompt")
+        else:
+            print(f"📝 Extending with text prompt")
+        
+        if request.seeds:
+            print(f"🎲 Using seed: {request.seeds} (consistent lighting)")
+        
+        # Call KIE extend API
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            payload = {
+                "taskId": request.taskId,
+                "prompt": request.prompt,
+                "callBackUrl": callback_url
+            }
+            
+            # Add optional parameters
+            if request.seeds is not None:
+                payload["seeds"] = request.seeds
+            if request.watermark:
+                payload["watermark"] = request.watermark
+            if request.voiceType and request.voiceType.lower() != "none":
+                payload["voiceType"] = request.voiceType
+                print(f"🎤 Using voice type: {request.voiceType}")
+            else:
+                print(f"🔇 No voice/audio requested (voiceType: {request.voiceType})")
+            
+            response = await client.post(
+                f"{KIE_API_BASE}/api/v1/veo/extend",
+                headers={
+                    "Authorization": f"Bearer {api_key}",
+                    "Content-Type": "application/json"
+                },
+                json=payload
+            )
+        
+        # Check for HTML error responses
+        if response.status_code != 200:
+            error_text = response.text
+            content_type = response.headers.get('content-type', '').lower()
+            
+            if 'text/html' in content_type or error_text.strip().startswith('<!DOCTYPE') or error_text.strip().startswith('<html'):
+                error_message = f"KIE API service unavailable (HTTP {response.status_code})"
+                if '<title>' in error_text:
+                    import re
+                    title_match = re.search(r'<title>(.*?)</title>', error_text, re.IGNORECASE | re.DOTALL)
+                    if title_match:
+                        title = title_match.group(1).strip()
+                        if ':' in title:
+                            error_message = f"KIE API error: {title.split('|')[-1].strip()}"
+                raise HTTPException(status_code=502, detail=error_message)
+        
+        result = response.json()
+        
+        if result.get('code') != 200:
+            raise HTTPException(
+                status_code=result.get('code', 500),
+                detail=result.get('msg', 'KIE extend API request failed')
+            )
+        
+        new_task_id = result['data']['taskId']
+        print(f"✅ Video extension started: {new_task_id}")
+        
+        return VideoGenerationResponse(
+            taskId=new_task_id,
+            status="processing"
+        )
+    
+    except HTTPException:
+        raise
+    except httpx.HTTPStatusError as e:
+        error_text = e.response.text
+        content_type = e.response.headers.get('content-type', '').lower()
+        
+        if 'text/html' in content_type or error_text.strip().startswith('<!DOCTYPE') or error_text.strip().startswith('<html'):
+            error_msg = f"KIE API service unavailable (HTTP {e.response.status_code})"
+            if '<title>' in error_text:
+                import re
+                title_match = re.search(r'<title>(.*?)</title>', error_text, re.IGNORECASE | re.DOTALL)
+                if title_match:
+                    title = title_match.group(1).strip()
+                    if ':' in title:
+                        error_msg = f"KIE API error: {title.split('|')[-1].strip()}"
+        else:
+            try:
+                error_data = e.response.json()
+                error_msg = error_data.get('msg') or error_data.get('message') or error_data.get('detail') or f"KIE API error (HTTP {e.response.status_code})"
+            except (json.JSONDecodeError, ValueError):
+                error_msg = error_text[:200] if len(error_text) > 200 else error_text
+        
+        print(f"❌ {error_msg}")
+        raise HTTPException(status_code=502 if 'text/html' in content_type else e.response.status_code, detail=error_msg)
+    except httpx.RequestError as e:
+        error_msg = f"KIE API request error: {type(e).__name__} - {str(e)}"
+        print(f"❌ {error_msg}")
+        raise HTTPException(status_code=502, detail=error_msg)
+    except json.JSONDecodeError as e:
+        error_msg = f"Invalid JSON response from KIE API. The service may be unavailable."
+        print(f"❌ JSON decode error: {str(e)}")
+        raise HTTPException(status_code=502, detail=error_msg)
+    except Exception as e:
+        import traceback
+        error_msg = f"{type(e).__name__}: {str(e)}"
+        print(f"❌ Video extension error: {error_msg}")
+        traceback.print_exc()
+        raise HTTPException(
+            status_code=500,
+            detail=f"Video extension error: {error_msg}"
+        )
+
+
+@router.get("/veo/events/{task_id}")
+async def sse_events(task_id: str):
+    """
+    Server-Sent Events endpoint for real-time updates
+    """
+    async def event_generator():
+        # Create queue for this client
+        queue = asyncio.Queue()
+        sse_clients[task_id] = queue
+        
+        print(f"🔌 SSE client connected for task {task_id}")
+        
+        try:
+            # Check if result already exists
+            if task_id in video_results:
+                result = video_results[task_id]
+                if result['code'] == 200 and result.get('info'):
+                    info = result['info']
+                    event_data = {
+                        'status': 'succeeded',
+                        'url': info.get('resultUrls', [None])[0],
+                        'resultUrls': info.get('resultUrls', []),
+                        'originUrls': info.get('originUrls', []),
+                        'resolution': info.get('resolution'),
+                        'fallbackFlag': result.get('fallbackFlag')
+                    }
+                else:
+                    event_data = {
+                        'status': 'failed',
+                        'error': result['msg'],
+                        'code': result['code']
+                    }
+                yield f"data: {json.dumps(event_data)}\n\n"
+            
+            # Stream events
+            while True:
+                data = await queue.get()
+                yield f"data: {json.dumps(data)}\n\n"
+        
+        except asyncio.CancelledError:
+            print(f"🔌 SSE client disconnected for task {task_id}")
+        finally:
+            if task_id in sse_clients:
+                del sse_clients[task_id]
+    
+    return StreamingResponse(
+        event_generator(),
+        media_type="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive"
+        }
+    )
+
+@router.get("/veo/status/{task_id}")
+async def get_video_status(task_id: str):
+    """
+    Get video generation status from KIE API
+    """
+    try:
+        api_key = get_kie_api_key()
+        
+        async with httpx.AsyncClient(timeout=30.0) as client:
+            response = await client.get(
+                f"{KIE_API_BASE}/api/v1/veo/video/{task_id}",
+                headers={
+                    "Authorization": f"Bearer {api_key}"
+                }
+            )
+        
+        # Check for HTML error responses
+        if response.status_code != 200:
+            error_text = response.text
+            content_type = response.headers.get('content-type', '').lower()
+            
+            if 'text/html' in content_type or error_text.strip().startswith('<!DOCTYPE') or error_text.strip().startswith('<html'):
+                error_message = f"KIE API service unavailable (HTTP {response.status_code})"
+                if '<title>' in error_text:
+                    import re
+                    title_match = re.search(r'<title>(.*?)</title>', error_text, re.IGNORECASE | re.DOTALL)
+                    if title_match:
+                        title = title_match.group(1).strip()
+                        if ':' in title:
+                            error_message = f"KIE API error: {title.split('|')[-1].strip()}"
+                raise HTTPException(status_code=502, detail=error_message)
+        
+        result = response.json()
+        
+        if result.get('code') != 200:
+            raise HTTPException(
+                status_code=result.get('code', 500),
+                detail=result.get('msg', 'Failed to get video status')
+            )
+        
+        # Transform response
+        status = result['data'].get('status')
+        video_url = result['data'].get('videoUrl')
+        
+        return {
+            'status': 'succeeded' if status == 'completed' else 'failed' if status == 'failed' else 'processing',
+            'output': video_url if status == 'completed' else None,
+            'url': video_url if status == 'completed' else None
+        }
+    
+    except HTTPException:
+        raise
+    except httpx.HTTPStatusError as e:
+        error_text = e.response.text
+        content_type = e.response.headers.get('content-type', '').lower()
+        
+        if 'text/html' in content_type or error_text.strip().startswith('<!DOCTYPE') or error_text.strip().startswith('<html'):
+            error_msg = f"KIE API service unavailable (HTTP {e.response.status_code})"
+            if '<title>' in error_text:
+                import re
+                title_match = re.search(r'<title>(.*?)</title>', error_text, re.IGNORECASE | re.DOTALL)
+                if title_match:
+                    title = title_match.group(1).strip()
+                    if ':' in title:
+                        error_msg = f"KIE API error: {title.split('|')[-1].strip()}"
+        else:
+            try:
+                error_data = e.response.json()
+                error_msg = error_data.get('msg') or error_data.get('message') or error_data.get('detail') or f"KIE API error (HTTP {e.response.status_code})"
+            except (json.JSONDecodeError, ValueError):
+                error_msg = error_text[:200] if len(error_text) > 200 else error_text
+        
+        print(f"❌ {error_msg}")
+        raise HTTPException(status_code=502 if 'text/html' in content_type else e.response.status_code, detail=error_msg)
+    except httpx.RequestError as e:
+        error_msg = f"KIE API request error: {type(e).__name__} - {str(e)}"
+        print(f"❌ {error_msg}")
+        raise HTTPException(status_code=502, detail=error_msg)
+    except json.JSONDecodeError as e:
+        error_msg = f"Invalid JSON response from KIE API. The service may be unavailable."
+        print(f"❌ JSON decode error: {str(e)}")
+        raise HTTPException(status_code=502, detail=error_msg)
+    except Exception as e:
+        import traceback
+        error_msg = f"{type(e).__name__}: {str(e)}"
+        print(f"❌ Status check error: {error_msg}")
+        traceback.print_exc()
+        raise HTTPException(
+            status_code=500,
+            detail=f"Failed to check video status: {error_msg}"
+        )
+
+@router.post("/veo/cancel/{task_id}")
+async def cancel_video_generation(task_id: str):
+    """
+    Cancel an ongoing video generation task
+    """
+    try:
+        # Send cancellation event to SSE clients
+        if task_id in sse_clients:
+            queue = sse_clients[task_id]
+            await send_sse_event(task_id, {
+                'status': 'cancelled',
+                'message': 'Video generation cancelled by user'
+            })
+            # Close the SSE connection
+            del sse_clients[task_id]
+            print(f"✅ Cancelled video generation: {task_id}")
+        
+        # Mark result as cancelled
+        if task_id in video_results:
+            video_results[task_id] = {
+                'code': 499,  # Client Closed Request
+                'msg': 'Video generation cancelled by user',
+                'taskId': task_id,
+                'timestamp': datetime.now().timestamp()
+            }
+        
+        return JSONResponse(
+            status_code=200,
+            content={'code': 200, 'msg': 'Video generation cancelled', 'taskId': task_id}
+        )
+    
+    except Exception as e:
+        print(f"❌ Error cancelling video generation: {str(e)}")
+        raise HTTPException(
+            status_code=500,
+            detail=f"Failed to cancel video generation: {str(e)}"
+        )
+
+@router.get("/veo/download")
+async def download_video(
+    url: str,
+    trim_seconds: Optional[int] = Query(None, alias="trimSeconds"),
+):
+    """
+    Download video from external URL
+    Proxies the video stream to avoid CORS issues.
+    Optional trimSeconds (4, 6, or 8): re-encode first N seconds with ffmpeg so
+    clip length matches the shot plan when the provider still returns a longer file.
+    """
+    if not url:
+        raise HTTPException(status_code=400, detail="Missing url query parameter")
+
+    trim_n = _normalize_veo_duration_seconds(trim_seconds)
+    if trim_seconds is not None and trim_n is None:
+        raise HTTPException(
+            status_code=400,
+            detail="trimSeconds must be 4, 6, or 8",
+        )
+    
+    try:
+        async with httpx.AsyncClient(timeout=120.0) as client:
+            response = await client.get(url)
+            if response.status_code != 200:
+                raise HTTPException(
+                    status_code=response.status_code,
+                    detail="Failed to download asset"
+                )
+            body = response.content
+            media_type = response.headers.get('content-type', 'video/mp4')
+
+            if trim_n is None:
+                return Response(
+                    content=body,
+                    media_type=media_type,
+                    headers={
+                        'Content-Disposition': 'attachment; filename="video.mp4"',
+                        'Content-Length': str(len(body)),
+                    },
+                )
+
+            if not shutil.which('ffmpeg'):
+                print("⚠️ trimSeconds requested but ffmpeg not found; returning full file")
+                return Response(
+                    content=body,
+                    media_type=media_type,
+                    headers={
+                        'Content-Disposition': 'attachment; filename="video.mp4"',
+                        'Content-Length': str(len(body)),
+                    },
+                )
+
+            with tempfile.TemporaryDirectory() as tmp:
+                src = Path(tmp) / "in.mp4"
+                dst = Path(tmp) / "out.mp4"
+                src.write_bytes(body)
+                try:
+                    _ffmpeg_trim_to_seconds(src, dst, trim_n)
+                except Exception as e:
+                    print(f"❌ ffmpeg trim failed: {e}; returning full file")
+                    return Response(
+                        content=body,
+                        media_type=media_type,
+                        headers={
+                            'Content-Disposition': 'attachment; filename="video.mp4"',
+                            'Content-Length': str(len(body)),
+                        },
+                    )
+                out = dst.read_bytes()
+                return Response(
+                    content=out,
+                    media_type='video/mp4',
+                    headers={
+                        'Content-Disposition': 'attachment; filename="video.mp4"',
+                        'Content-Length': str(len(out)),
+                    },
+                )
+    
+    except HTTPException:
+        raise
+    except Exception as e:
+        print(f"❌ Download error: {str(e)}")
+        raise HTTPException(
+            status_code=500,
+            detail=f"Failed to download asset: {str(e)}"
+        )
+

backend/main.py

@@ -0,0 +1,103 @@
+"""
+Product Showcase Studio — FastAPI backend.
+Video pipeline aligned with python-backend (KIE Veo, image hosting, merge).
+"""
+
+from contextlib import asynccontextmanager
+import os
+import shutil
+
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+
+from api.video_generation import router as video_router
+from api.seedance_generation import router as seedance_router
+from api.image_service import router as image_router
+from api.video_export import router as export_router
+from api.showcase_prompts import router as showcase_router
+from api.scraper_routes import router as scraper_router
+from api.gpt_image_frames import router as gpt_image_router
+from utils.env_load import load_app_env
+from utils.public_url import get_public_base_url, get_server_port_str
+from utils.storage import cleanup_old_files
+
+load_app_env()
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    print("Starting Product Showcase API…")
+    os.makedirs("storage/images", exist_ok=True)
+    os.makedirs("storage/videos", exist_ok=True)
+    public = get_public_base_url()
+    print(f"Public URL for callbacks/hosted images: {public}")
+    if not os.getenv("KIE_API_KEY"):
+        if os.getenv("REPLICATE_API_TOKEN") or os.getenv("REPLICATE_API_KEY"):
+            print("Info: KIE_API_KEY not set — Seedance can use Replicate fallback when token is set.")
+        else:
+            print("Warning: KIE_API_KEY not set — KIE video generation will fail (set REPLICATE_API_TOKEN for Seedance fallback).")
+    if not os.getenv("OPENAI_API_KEY"):
+        print("Info: OPENAI_API_KEY not set — shot plan uses built-in cinematic template; GPT Image frames disabled.")
+    else:
+        print(f"GPT Image model for first frames: {os.getenv('GPT_IMAGE_MODEL', 'gpt-image-1.5')}")
+    yield
+    cleanup_old_files()
+
+
+app = FastAPI(
+    title="Product Showcase API",
+    description="Cinematic product videos: shot planning + KIE Veo / Seedance 2 + export",
+    version="1.0.0",
+    lifespan=lifespan,
+)
+
+origins = [
+    "http://localhost:5173",
+    "http://127.0.0.1:5173",
+    "http://localhost:3000",
+    "http://127.0.0.1:3000",
+]
+extra = (os.getenv("CORS_ALLOWED_ORIGINS") or "").strip()
+if extra:
+    origins = [o.strip().rstrip("/") for o in extra.split(",") if o.strip()]
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=origins,
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+app.include_router(showcase_router, prefix="/api")
+app.include_router(scraper_router, prefix="/api")
+app.include_router(gpt_image_router, prefix="/api")
+app.include_router(video_router, prefix="/api")
+app.include_router(seedance_router, prefix="/api")
+app.include_router(image_router, prefix="/api")
+app.include_router(export_router, prefix="/api")
+
+
+@app.get("/health")
+def health():
+    return {
+        "status": "healthy",
+        "service": "product-showcase",
+        "kie_configured": bool(os.getenv("KIE_API_KEY")),
+        "replicate_configured": bool(
+            (os.getenv("REPLICATE_API_TOKEN") or os.getenv("REPLICATE_API_KEY") or "").strip()
+        ),
+        "openai_configured": bool(os.getenv("OPENAI_API_KEY")),
+        "gpt_image_model": os.getenv("GPT_IMAGE_MODEL", "gpt-image-1.5"),
+        "ffmpeg_available": bool(shutil.which("ffmpeg")),
+        "ffprobe_available": bool(shutil.which("ffprobe")),
+        "public_base_url": get_public_base_url(),
+        "server_port": int(get_server_port_str()),
+    }
+
+
+if __name__ == "__main__":
+    import uvicorn
+
+    port = int(get_server_port_str())
+    uvicorn.run("main:app", host="0.0.0.0", port=port, reload=True)

backend/requirements.txt

@@ -0,0 +1,9 @@
+fastapi>=0.115.0
+uvicorn[standard]>=0.32.0
+python-multipart>=0.0.9
+python-dotenv>=1.0.0
+httpx>=0.27.0
+pillow>=10.0.0
+openai>=1.40.0
+requests>=2.31.0
+beautifulsoup4>=4.12.0

backend/utils/__init__.py

@@ -0,0 +1 @@
+# Utils package

backend/utils/env_load.py

@@ -0,0 +1,22 @@
+"""Load .env from backend/ and repo root so one file works from either cwd."""
+
+from __future__ import annotations
+
+from pathlib import Path
+
+from dotenv import load_dotenv
+
+_BACKEND_DIR = Path(__file__).resolve().parent.parent
+_REPO_ROOT = _BACKEND_DIR.parent
+
+
+def load_app_env() -> None:
+    """Later paths override earlier (most specific wins)."""
+    for path in (
+        _REPO_ROOT / ".env",
+        _REPO_ROOT / ".env.local",
+        _BACKEND_DIR / ".env",
+        _BACKEND_DIR / ".env.local",
+    ):
+        if path.is_file():
+            load_dotenv(path, override=True)

backend/utils/image_processor.py

@@ -0,0 +1,98 @@
+"""
+Image Processing Utilities
+Handles image compression, conversion, and storage
+"""
+
+import base64
+import re
+from io import BytesIO
+from PIL import Image
+import uuid
+from datetime import datetime
+import os
+
+from utils.storage import temp_images
+
+async def compress_and_store_image(
+    data_url: str,
+    public_url: str,
+    max_width: int = 960,
+    max_height: int = 540,
+    quality: int = 70
+) -> str:
+    """
+    Compress image from data URL and return public URL
+    
+    Args:
+        data_url: Base64 data URL (data:image/...;base64,...)
+        public_url: Base URL for the server
+        max_width: Maximum width for resizing
+        max_height: Maximum height for resizing
+        quality: JPEG quality (1-100)
+    
+    Returns:
+        Public URL to access the compressed image
+    """
+    try:
+        # Extract base64 data from data URL
+        matches = re.match(r'^data:image/[a-zA-Z]+;base64,(.+)$', data_url)
+        if not matches:
+            raise ValueError('Invalid data URL format')
+        
+        base64_data = matches.group(1)
+        image_bytes = base64.b64decode(base64_data)
+        
+        # Open image with PIL
+        image = Image.open(BytesIO(image_bytes))
+        
+        # Convert RGBA to RGB if necessary
+        if image.mode in ('RGBA', 'LA', 'P'):
+            background = Image.new('RGB', image.size, (255, 255, 255))
+            if image.mode == 'P':
+                image = image.convert('RGBA')
+            background.paste(image, mask=image.split()[-1] if image.mode in ('RGBA', 'LA') else None)
+            image = background
+        
+        # Resize maintaining aspect ratio
+        image.thumbnail((max_width, max_height), Image.Resampling.LANCZOS)
+        
+        # Compress to JPEG
+        output = BytesIO()
+        image.save(output, format='JPEG', quality=quality, optimize=True)
+        compressed_buffer = output.getvalue()
+        
+        # Generate unique ID
+        image_id = f"img_{int(datetime.now().timestamp())}_{uuid.uuid4().hex[:9]}"
+        
+        # Store in memory
+        temp_images[image_id] = {
+            'buffer': compressed_buffer,
+            'timestamp': datetime.now().timestamp(),
+            'content_type': 'image/jpeg'
+        }
+        
+        # Clean up old images (older than 1 hour)
+        cleanup_old_images()
+        
+        # Return public URL
+        return f"{public_url}/api/images/{image_id}"
+    
+    except Exception as e:
+        print(f"❌ Image compression error: {str(e)}")
+        raise
+
+def cleanup_old_images():
+    """Remove images older than 1 hour"""
+    current_time = datetime.now().timestamp()
+    to_remove = []
+    
+    for image_id, data in temp_images.items():
+        if current_time - data['timestamp'] > 3600:  # 1 hour
+            to_remove.append(image_id)
+    
+    for image_id in to_remove:
+        del temp_images[image_id]
+    
+    if to_remove:
+        print(f"🧹 Cleaned up {len(to_remove)} old images")
+

backend/utils/public_url.py

@@ -0,0 +1,16 @@
+"""Single place for callback / hosted-asset base URL (KIE, image hosting, Veo)."""
+
+from __future__ import annotations
+
+import os
+
+
+def get_server_port_str() -> str:
+    return os.getenv("PORT") or os.getenv("SERVER_PORT", "4010")
+
+
+def get_public_base_url() -> str:
+    explicit = (os.getenv("VITE_API_BASE_URL") or "").strip().rstrip("/")
+    if explicit:
+        return explicit
+    return f"http://127.0.0.1:{get_server_port_str()}"

backend/utils/storage.py

@@ -0,0 +1,41 @@
+"""
+Storage Management
+Handles in-memory storage for images, videos, and SSE clients
+"""
+
+from typing import Dict, Any
+import asyncio
+from datetime import datetime
+
+# In-memory storage
+temp_images: Dict[str, Dict[str, Any]] = {}
+video_results: Dict[str, Dict[str, Any]] = {}
+sse_clients: Dict[str, asyncio.Queue] = {}
+
+def cleanup_old_results(max_age_hours: int = 24):
+    """
+    Clean up old video results
+    
+    Args:
+        max_age_hours: Maximum age in hours before cleanup
+    """
+    current_time = datetime.now().timestamp()
+    to_remove = []
+    
+    for task_id, data in video_results.items():
+        if current_time - data['timestamp'] > (max_age_hours * 3600):
+            to_remove.append(task_id)
+    
+    for task_id in to_remove:
+        del video_results[task_id]
+    
+    if to_remove:
+        print(f"🧹 Cleaned up {len(to_remove)} old video results")
+
+def cleanup_old_files():
+    """Clean up all temporary storage on shutdown"""
+    temp_images.clear()
+    video_results.clear()
+    sse_clients.clear()
+    print("🧹 Cleared all temporary storage")
+

frontend/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Product Showcase Studio</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://api.fontshare.com/v2/css?f[]=clash-display@600,700&f[]=satoshi@400,500,700&display=swap" rel="stylesheet" />
+  </head>
+  <body class="min-h-screen">
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package-lock.json

@@ -0,0 +1,2612 @@
+{
+  "name": "product-showcase-studio",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "product-showcase-studio",
+      "version": "1.0.0",
+      "dependencies": {
+        "framer-motion": "^11.15.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      },
+      "devDependencies": {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "@vitejs/plugin-react": "^4.3.4",
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.4.49",
+        "tailwindcss": "^3.4.17",
+        "typescript": "~5.6.0",
+        "vite": "^6.0.0"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@babel/code-frame": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz",
+      "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "js-tokens": "^4.0.0",
+        "picocolors": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/compat-data": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.0.tgz",
+      "integrity": "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/core": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
+      "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-compilation-targets": "^7.28.6",
+        "@babel/helper-module-transforms": "^7.28.6",
+        "@babel/helpers": "^7.28.6",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/traverse": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/remapping": "^2.3.5",
+        "convert-source-map": "^2.0.0",
+        "debug": "^4.1.0",
+        "gensync": "^1.0.0-beta.2",
+        "json5": "^2.2.3",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/babel"
+      }
+    },
+    "node_modules/@babel/generator": {
+      "version": "7.29.1",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz",
+      "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.29.0",
+        "@babel/types": "^7.29.0",
+        "@jridgewell/gen-mapping": "^0.3.12",
+        "@jridgewell/trace-mapping": "^0.3.28",
+        "jsesc": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-compilation-targets": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz",
+      "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/compat-data": "^7.28.6",
+        "@babel/helper-validator-option": "^7.27.1",
+        "browserslist": "^4.24.0",
+        "lru-cache": "^5.1.1",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-globals": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
+      "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-imports": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz",
+      "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/traverse": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-module-transforms": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz",
+      "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.28.6",
+        "@babel/helper-validator-identifier": "^7.28.5",
+        "@babel/traverse": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@babel/helper-plugin-utils": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.28.6.tgz",
+      "integrity": "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
+      "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.28.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
+      "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-option": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz",
+      "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helpers": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.2.tgz",
+      "integrity": "sha512-HoGuUs4sCZNezVEKdVcwqmZN8GoHirLUcLaYVNBK2J0DadGtdcqgr3BCbvH8+XUo4NGjNl3VOtSjEKNzqfFgKw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.2.tgz",
+      "integrity": "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.29.0"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-self": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz",
+      "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/plugin-transform-react-jsx-source": {
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz",
+      "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@babel/template": {
+      "version": "7.28.6",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz",
+      "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.28.6",
+        "@babel/parser": "^7.28.6",
+        "@babel/types": "^7.28.6"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/traverse": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz",
+      "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.29.0",
+        "@babel/generator": "^7.29.0",
+        "@babel/helper-globals": "^7.28.0",
+        "@babel/parser": "^7.29.0",
+        "@babel/template": "^7.28.6",
+        "@babel/types": "^7.29.0",
+        "debug": "^4.3.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.29.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz",
+      "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.27.1",
+        "@babel/helper-validator-identifier": "^7.28.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+      "integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+      "integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+      "integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+      "integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+      "integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+      "integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+      "integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+      "integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+      "integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+      "integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+      "integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+      "integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+      "integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+      "integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+      "integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+      "integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+      "integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+      "integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+      "integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+      "integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+      "integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+      "integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+      "integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
+      "integrity": "sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==",
+      "dev": true
+    },
+    "node_modules/@rollup/rollup-android-arm-eabi": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.2.tgz",
+      "integrity": "sha512-dnlp69efPPg6Uaw2dVqzWRfAWRnYVb1XJ8CyyhIbZeaq4CA5/mLeZ1IEt9QqQxmbdvagjLIm2ZL8BxXv5lH4Yw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-android-arm64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.2.tgz",
+      "integrity": "sha512-OqZTwDRDchGRHHm/hwLOL7uVPB9aUvI0am/eQuWMNyFHf5PSEQmyEeYYheA0EPPKUO/l0uigCp+iaTjoLjVoHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-arm64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.2.tgz",
+      "integrity": "sha512-UwRE7CGpvSVEQS8gUMBe1uADWjNnVgP3Iusyda1nSRwNDCsRjnGc7w6El6WLQsXmZTbLZx9cecegumcitNfpmA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-darwin-x64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.2.tgz",
+      "integrity": "sha512-gjEtURKLCC5VXm1I+2i1u9OhxFsKAQJKTVB8WvDAHF+oZlq0GTVFOlTlO1q3AlCTE/DF32c16ESvfgqR7343/g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-arm64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.2.tgz",
+      "integrity": "sha512-Bcl6CYDeAgE70cqZaMojOi/eK63h5Me97ZqAQoh77VPjMysA/4ORQBRGo3rRy45x4MzVlU9uZxs8Uwy7ZaKnBw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-freebsd-x64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.2.tgz",
+      "integrity": "sha512-LU+TPda3mAE2QB0/Hp5VyeKJivpC6+tlOXd1VMoXV/YFMvk/MNk5iXeBfB4MQGRWyOYVJ01625vjkr0Az98OJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.2.tgz",
+      "integrity": "sha512-2QxQrM+KQ7DAW4o22j+XZ6RKdxjLD7BOWTP0Bv0tmjdyhXSsr2Ul1oJDQqh9Zf5qOwTuTc7Ek83mOFaKnodPjg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm-musleabihf": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.2.tgz",
+      "integrity": "sha512-TbziEu2DVsTEOPif2mKWkMeDMLoYjx95oESa9fkQQK7r/Orta0gnkcDpzwufEcAO2BLBsD7mZkXGFqEdMRRwfw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.2.tgz",
+      "integrity": "sha512-bO/rVDiDUuM2YfuCUwZ1t1cP+/yqjqz+Xf2VtkdppefuOFS2OSeAfgafaHNkFn0t02hEyXngZkxtGqXcXwO8Rg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-arm64-musl": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.2.tgz",
+      "integrity": "sha512-hr26p7e93Rl0Za+JwW7EAnwAvKkehh12BU1Llm9Ykiibg4uIr2rbpxG9WCf56GuvidlTG9KiiQT/TXT1yAWxTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.2.tgz",
+      "integrity": "sha512-pOjB/uSIyDt+ow3k/RcLvUAOGpysT2phDn7TTUB3n75SlIgZzM6NKAqlErPhoFU+npgY3/n+2HYIQVbF70P9/A==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.2.tgz",
+      "integrity": "sha512-2/w+q8jszv9Ww1c+6uJT3OwqhdmGP2/4T17cu8WuwyUuuaCDDJ2ojdyYwZzCxx0GcsZBhzi3HmH+J5pZNXnd+Q==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.2.tgz",
+      "integrity": "sha512-11+aL5vKheYgczxtPVVRhdptAM2H7fcDR5Gw4/bTcteuZBlH4oP9f5s9zYO9aGZvoGeBpqXI/9TZZihZ609wKw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.2.tgz",
+      "integrity": "sha512-i16fokAGK46IVZuV8LIIwMdtqhin9hfYkCh8pf8iC3QU3LpwL+1FSFGej+O7l3E/AoknL6Dclh2oTdnRMpTzFQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.2.tgz",
+      "integrity": "sha512-49FkKS6RGQoriDSK/6E2GkAsAuU5kETFCh7pG4yD/ylj9rKhTmO3elsnmBvRD4PgJPds5W2PkhC82aVwmUcJ7A==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.2.tgz",
+      "integrity": "sha512-mjYNkHPfGpUR00DuM1ZZIgs64Hpf4bWcz9Z41+4Q+pgDx73UwWdAYyf6EG/lRFldmdHHzgrYyge5akFUW0D3mQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-s390x-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.2.tgz",
+      "integrity": "sha512-ALyvJz965BQk8E9Al/JDKKDLH2kfKFLTGMlgkAbbYtZuJt9LU8DW3ZoDMCtQpXAltZxwBHevXz5u+gf0yA0YoA==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.2.tgz",
+      "integrity": "sha512-UQjrkIdWrKI626Du8lCQ6MJp/6V1LAo2bOK9OTu4mSn8GGXIkPXk/Vsp4bLHCd9Z9Iz2OTEaokUE90VweJgIYQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-x64-musl": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.2.tgz",
+      "integrity": "sha512-bTsRGj6VlSdn/XD4CGyzMnzaBs9bsRxy79eTqTCBsA8TMIEky7qg48aPkvJvFe1HyzQ5oMZdg7AnVlWQSKLTnw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.2.tgz",
+      "integrity": "sha512-6d4Z3534xitaA1FcMWP7mQPq5zGwBmGbhphh2DwaA1aNIXUu3KTOfwrWpbwI4/Gr0uANo7NTtaykFyO2hPuFLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
+    "node_modules/@rollup/rollup-openharmony-arm64": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.2.tgz",
+      "integrity": "sha512-NetAg5iO2uN7eB8zE5qrZ3CSil+7IJt4WDFLcC75Ymywq1VZVD6qJ6EvNLjZ3rEm6gB7XW5JdT60c6MN35Z85Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openharmony"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-arm64-msvc": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.2.tgz",
+      "integrity": "sha512-NCYhOotpgWZ5kdxCZsv6Iudx0wX8980Q/oW4pNFNihpBKsDbEA1zpkfxJGC0yugsUuyDZ7gL37dbzwhR0VI7pQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-ia32-msvc": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.2.tgz",
+      "integrity": "sha512-RXsaOqXxfoUBQoOgvmmijVxJnW2IGB0eoMO7F8FAjaj0UTywUO/luSqimWBJn04WNgUkeNhh7fs7pESXajWmkg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-gnu": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.2.tgz",
+      "integrity": "sha512-qdAzEULD+/hzObedtmV6iBpdL5TIbKVztGiK7O3/KYSf+HIzU257+MX1EXJcyIiDbMAqmbwaufcYPvyRryeZtA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.2.tgz",
+      "integrity": "sha512-Nd/SgG27WoA9e+/TdK74KnHz852TLa94ovOYySo/yMPuTmpckK/jIF2jSwS3g7ELSKXK13/cVdmg1Z/DaCWKxA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
+    "node_modules/@types/babel__core": {
+      "version": "7.20.5",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
+      "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
+        "@types/babel__generator": "*",
+        "@types/babel__template": "*",
+        "@types/babel__traverse": "*"
+      }
+    },
+    "node_modules/@types/babel__generator": {
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.27.0.tgz",
+      "integrity": "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__template": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
+      "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.1.0",
+        "@babel/types": "^7.0.0"
+      }
+    },
+    "node_modules/@types/babel__traverse": {
+      "version": "7.28.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.28.0.tgz",
+      "integrity": "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.28.2"
+      }
+    },
+    "node_modules/@types/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.14",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
+      "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
+      "dev": true,
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@vitejs/plugin-react": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
+      "integrity": "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+        "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+        "@rolldown/pluginutils": "1.0.0-beta.27",
+        "@types/babel__core": "^7.20.5",
+        "react-refresh": "^0.17.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.5.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.0.tgz",
+      "integrity": "sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "browserslist": "^4.28.2",
+        "caniuse-lite": "^1.0.30001787",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.23",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.23.tgz",
+      "integrity": "sha512-xwVXGqevyKPsiuQdLj+dZMVjidjJV508TBqexND5HrF89cGdCYCJFB3qhcxRHSeMctdCfbR1jrxBajhDy7o29g==",
+      "dev": true,
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.2.tgz",
+      "integrity": "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "baseline-browser-mapping": "^2.10.12",
+        "caniuse-lite": "^1.0.30001782",
+        "electron-to-chromium": "^1.5.328",
+        "node-releases": "^2.0.36",
+        "update-browserslist-db": "^1.2.3"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001791",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001791.tgz",
+      "integrity": "sha512-yk0l/YSrOnFZk3UROpDLQD9+kC1l4meK/wed583AXrzoarMGJcbRi2Q4RaUYbKxYAsZ8sWmaSa/DsLmdBeI1vQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ]
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "dev": true
+    },
+    "node_modules/debug": {
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.344",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.344.tgz",
+      "integrity": "sha512-4MxfbmNDm+KPh066EZy+eUnkcDPcZ35wNmOWzFuh/ijvHsve6kbLTLURy88uCNK5FbpN+yk2nQY6BYh1GEt+wg==",
+      "dev": true
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/esbuild": {
+      "version": "0.25.12",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+      "integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.25.12",
+        "@esbuild/android-arm": "0.25.12",
+        "@esbuild/android-arm64": "0.25.12",
+        "@esbuild/android-x64": "0.25.12",
+        "@esbuild/darwin-arm64": "0.25.12",
+        "@esbuild/darwin-x64": "0.25.12",
+        "@esbuild/freebsd-arm64": "0.25.12",
+        "@esbuild/freebsd-x64": "0.25.12",
+        "@esbuild/linux-arm": "0.25.12",
+        "@esbuild/linux-arm64": "0.25.12",
+        "@esbuild/linux-ia32": "0.25.12",
+        "@esbuild/linux-loong64": "0.25.12",
+        "@esbuild/linux-mips64el": "0.25.12",
+        "@esbuild/linux-ppc64": "0.25.12",
+        "@esbuild/linux-riscv64": "0.25.12",
+        "@esbuild/linux-s390x": "0.25.12",
+        "@esbuild/linux-x64": "0.25.12",
+        "@esbuild/netbsd-arm64": "0.25.12",
+        "@esbuild/netbsd-x64": "0.25.12",
+        "@esbuild/openbsd-arm64": "0.25.12",
+        "@esbuild/openbsd-x64": "0.25.12",
+        "@esbuild/openharmony-arm64": "0.25.12",
+        "@esbuild/sunos-x64": "0.25.12",
+        "@esbuild/win32-arm64": "0.25.12",
+        "@esbuild/win32-ia32": "0.25.12",
+        "@esbuild/win32-x64": "0.25.12"
+      }
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/framer-motion": {
+      "version": "11.18.2",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.18.2.tgz",
+      "integrity": "sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==",
+      "dependencies": {
+        "motion-dom": "^11.18.1",
+        "motion-utils": "^11.18.1",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/gensync": {
+      "version": "1.0.0-beta.2",
+      "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
+      "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.3.tgz",
+      "integrity": "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
+    },
+    "node_modules/jsesc": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
+      "dev": true,
+      "bin": {
+        "jsesc": "bin/jsesc"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/json5": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
+      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
+      "dev": true,
+      "bin": {
+        "json5": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
+    "node_modules/lru-cache": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+      "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+      "dev": true,
+      "dependencies": {
+        "yallist": "^3.0.2"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "11.18.1",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.18.1.tgz",
+      "integrity": "sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==",
+      "dependencies": {
+        "motion-utils": "^11.18.1"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "11.18.1",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.18.1.tgz",
+      "integrity": "sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA=="
+    },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.38",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.38.tgz",
+      "integrity": "sha512-3qT/88Y3FbH/Kx4szpQQ4HzUbVrHPKTLVpVocKiLfoYvw9XSGOX2FmD2d6DrXbVYyAQTF2HeF6My8jmzx7/CRw==",
+      "dev": true
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.12",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.12.tgz",
+      "integrity": "sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/react": {
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.2.5.tgz",
+      "integrity": "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "19.2.5",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
+      "integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
+      "dependencies": {
+        "scheduler": "^0.27.0"
+      },
+      "peerDependencies": {
+        "react": "^19.2.5"
+      }
+    },
+    "node_modules/react-refresh": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
+      "integrity": "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.12",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz",
+      "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==",
+      "dev": true,
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rollup": {
+      "version": "4.60.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.2.tgz",
+      "integrity": "sha512-J9qZyW++QK/09NyN/zeO0dG/1GdGfyp9lV8ajHnRVLfo/uFsbji5mHnDgn/qYdUHyCkM2N+8VyspgZclfAh0eQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "1.0.8"
+      },
+      "bin": {
+        "rollup": "dist/bin/rollup"
+      },
+      "engines": {
+        "node": ">=18.0.0",
+        "npm": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-android-arm-eabi": "4.60.2",
+        "@rollup/rollup-android-arm64": "4.60.2",
+        "@rollup/rollup-darwin-arm64": "4.60.2",
+        "@rollup/rollup-darwin-x64": "4.60.2",
+        "@rollup/rollup-freebsd-arm64": "4.60.2",
+        "@rollup/rollup-freebsd-x64": "4.60.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.60.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.60.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.60.2",
+        "@rollup/rollup-linux-arm64-musl": "4.60.2",
+        "@rollup/rollup-linux-loong64-gnu": "4.60.2",
+        "@rollup/rollup-linux-loong64-musl": "4.60.2",
+        "@rollup/rollup-linux-ppc64-gnu": "4.60.2",
+        "@rollup/rollup-linux-ppc64-musl": "4.60.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.60.2",
+        "@rollup/rollup-linux-riscv64-musl": "4.60.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.60.2",
+        "@rollup/rollup-linux-x64-gnu": "4.60.2",
+        "@rollup/rollup-linux-x64-musl": "4.60.2",
+        "@rollup/rollup-openbsd-x64": "4.60.2",
+        "@rollup/rollup-openharmony-arm64": "4.60.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.60.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.60.2",
+        "@rollup/rollup-win32-x64-gnu": "4.60.2",
+        "@rollup/rollup-win32-x64-msvc": "4.60.2",
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
+      "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="
+    },
+    "node_modules/semver": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
+      "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver.js"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "dev": true,
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="
+    },
+    "node_modules/typescript": {
+      "version": "5.6.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+      "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
+    },
+    "node_modules/vite": {
+      "version": "6.4.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.2.tgz",
+      "integrity": "sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==",
+      "dev": true,
+      "dependencies": {
+        "esbuild": "^0.25.0",
+        "fdir": "^6.4.4",
+        "picomatch": "^4.0.2",
+        "postcss": "^8.5.3",
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.13"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^18.0.0 || ^20.0.0 || >=22.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+        "jiti": ">=1.21.0",
+        "less": "*",
+        "lightningcss": "^1.21.0",
+        "sass": "*",
+        "sass-embedded": "*",
+        "stylus": "*",
+        "sugarss": "*",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "lightningcss": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vite/node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "dev": true
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "product-showcase-studio",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "framer-motion": "^11.15.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.6.0",
+    "vite": "^6.0.0"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

frontend/src/App.tsx

@@ -0,0 +1,108 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+import { checkHealth, type HealthStatus } from '@/api';
+import { ShowcaseFlow } from '@/components/ShowcaseFlow';
+
+function StatusDot({ ok }: { ok: boolean }) {
+  return (
+    <span
+      className={`h-1.5 w-1.5 shrink-0 rounded-full ${ok ? 'bg-emerald-400 shadow-[0_0_8px_rgba(52,211,153,0.6)]' : 'bg-red-400'}`}
+      aria-hidden
+    />
+  );
+}
+
+export default function App() {
+  const [health, setHealth] = useState<HealthStatus | null>(null);
+  const [healthOk, setHealthOk] = useState(false);
+
+  useEffect(() => {
+    checkHealth()
+      .then((h) => {
+        setHealth(h);
+        setHealthOk(h.status === 'healthy');
+      })
+      .catch(() => {
+        setHealth(null);
+        setHealthOk(false);
+      });
+  }, []);
+
+  return (
+    <div className="studio-page-bg">
+      <header className="studio-header">
+        <div className="studio-shell flex flex-col gap-5 py-6 sm:flex-row sm:items-end sm:justify-between sm:py-7">
+          <div className="max-w-xl">
+            <p className="mb-2 text-[0.65rem] font-semibold uppercase tracking-[0.2em] text-accent/90">
+              Launch films
+            </p>
+            <motion.h1
+              initial={{ opacity: 0, y: 8 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.35 }}
+              className="font-display text-3xl font-semibold leading-tight tracking-tight text-slate-900 sm:text-4xl"
+            >
+              Product Showcase
+              <span className="text-slate-400"> Studio</span>
+            </motion.h1>
+            <p className="mt-3 text-sm leading-relaxed text-slate-600">
+              Plan shots, align the product with GPT Image keyframes, animate with Veo — then merge one master
+              cut.
+            </p>
+          </div>
+          {health && (
+            <div className="flex flex-wrap gap-2 sm:justify-end">
+              <span
+                className={`studio-pill ${
+                  healthOk
+                    ? 'border-emerald-500/30 bg-emerald-500/10 text-emerald-100'
+                    : 'border-red-500/35 bg-red-500/10 text-red-100'
+                }`}
+              >
+                <StatusDot ok={healthOk} />
+                API {healthOk ? 'live' : 'unreachable'}
+              </span>
+              <span
+                className={`studio-pill ${
+                  health.kie_configured
+                    ? 'border-slate-300 bg-white text-slate-700'
+                    : 'border-amber-500/35 bg-amber-500/10 text-amber-100'
+                }`}
+              >
+                <StatusDot ok={health.kie_configured} />
+                KIE
+              </span>
+              {health.replicate_configured && (
+                <span className="studio-pill border-slate-300 bg-white text-slate-700">
+                  <StatusDot ok={true} />
+                  Replicate
+                </span>
+              )}
+              <span
+                className={`studio-pill ${
+                  health.openai_configured
+                    ? 'border-slate-300 bg-white text-slate-700'
+                    : 'border-slate-300 bg-slate-100 text-slate-500'
+                }`}
+              >
+                <StatusDot ok={health.openai_configured} />
+                OpenAI
+              </span>
+              {health.ffmpeg_available === false && (
+                <span className="studio-pill border-amber-500/35 bg-amber-500/10 text-amber-100">
+                  FFmpeg missing
+                </span>
+              )}
+            </div>
+          )}
+        </div>
+      </header>
+      <main className="studio-shell py-8 sm:py-12">
+        <ShowcaseFlow health={health} />
+      </main>
+      <footer className="border-t border-slate-200 py-6 text-center text-[0.7rem] text-slate-500">
+        Product Showcase Studio — local pipeline
+      </footer>
+    </div>
+  );
+}

frontend/src/api.ts

@@ -0,0 +1,691 @@
+import type { ClipMetadata, SegmentsPayload, StreamEvent, VeoSegment } from '@/types';
+
+/**
+ * In dev, use same-origin `/api` so the Vite proxy handles SSE (EventSource) without CORS.
+ * Ngrok and other tunnels often omit Access-Control-Allow-Origin on streamed responses.
+ * Set `VITE_PUBLIC_API_IN_DEV=true` only if your API sends proper CORS for localhost.
+ * Production: set `VITE_API_BASE_URL` to your deployed API origin.
+ */
+const API_BASE =
+  import.meta.env.DEV && import.meta.env.VITE_PUBLIC_API_IN_DEV !== 'true'
+    ? ''
+    : (import.meta.env.VITE_API_BASE_URL || '');
+
+/**
+ * Hero preview in the UI: prefer the storefront CDN URL when we have it (always a real image).
+ * Otherwise use blob/data URLs as-is. For hosted /api/images/... URLs, use a path-only URL in dev
+ * so the Vite proxy loads pixels (ngrok-free and some tunnels return HTML for absolute image GETs).
+ */
+export function imageSrcForHeroPreview(
+  heroRemoteUrl: string | null,
+  imagePreview: string | null
+): string | null {
+  if (heroRemoteUrl) return heroRemoteUrl;
+  if (!imagePreview) return null;
+  if (imagePreview.startsWith('blob:') || imagePreview.startsWith('data:')) return imagePreview;
+
+  if (imagePreview.includes('/api/images/') && import.meta.env.DEV) {
+    try {
+      return new URL(imagePreview).pathname;
+    } catch {
+      return imagePreview.startsWith('/') ? imagePreview : null;
+    }
+  }
+
+  return imagePreview;
+}
+
+const GPT_IMAGE_EDIT_MAX_REFS = 4;
+
+/**
+ * Build 2–4 distinct product image URLs for GPT Image `edits` (e.g. gpt-image-2).
+ * Merges the hosted hero (this run), storefront hero, and scraped gallery so models
+ * see multiple angles when available — not just a single frame.
+ */
+export function pickProductReferenceUrlsForGpt(options: {
+  hostedUrl: string | null;
+  heroRemoteUrl: string | null;
+  scrapedImageUrls: string[];
+  max?: number;
+}): string[] {
+  const max = Math.min(GPT_IMAGE_EDIT_MAX_REFS, Math.max(1, options.max ?? GPT_IMAGE_EDIT_MAX_REFS));
+  const out: string[] = [];
+  const seen = new Set<string>();
+
+  const push = (u: string | null | undefined): boolean => {
+    const s = (u ?? '').trim();
+    if (!s || seen.has(s)) return false;
+    seen.add(s);
+    out.push(s);
+    return out.length >= max;
+  };
+
+  if (push(options.hostedUrl)) return out;
+  if (push(options.heroRemoteUrl)) return out;
+  for (const u of options.scrapedImageUrls) {
+    if (push(u)) break;
+  }
+
+  return out;
+}
+
+async function parseError(res: Response, fallback: string): Promise<string> {
+  const ct = res.headers.get('content-type');
+  try {
+    if (ct?.includes('application/json')) {
+      const j = await res.json();
+      return j.detail || j.message || fallback;
+    }
+    const t = await res.text();
+    return t?.trim() || fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+export interface HealthStatus {
+  status: string;
+  service?: string;
+  kie_configured: boolean;
+  /** Seedance can fall back to Replicate when KIE fails if this is true */
+  replicate_configured?: boolean;
+  openai_configured: boolean;
+  gpt_image_model?: string;
+  ffmpeg_available?: boolean;
+  ffprobe_available?: boolean;
+  public_base_url?: string;
+  server_port?: number;
+}
+
+export async function checkHealth(): Promise<HealthStatus> {
+  const url = `${API_BASE}/health`;
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(await parseError(res, 'Health check failed'));
+  return res.json();
+}
+
+export async function uploadImage(file: File): Promise<{ url: string }> {
+  const fd = new FormData();
+  fd.append('file', file);
+  const res = await fetch(`${API_BASE}/api/upload-image`, { method: 'POST', body: fd });
+  if (!res.ok) throw new Error(await parseError(res, 'Upload failed'));
+  return res.json();
+}
+
+export interface ScrapeProductResponse {
+  product_name: string;
+  description: string;
+  price: string;
+  offers: string;
+  product_images: string;
+  brand: string;
+  category: string;
+  image_urls: string[];
+  source_url: string;
+  [key: string]: unknown;
+}
+
+export async function scrapeProductPage(url: string): Promise<ScrapeProductResponse> {
+  const res = await fetch(`${API_BASE}/api/showcase/scrape`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ url }),
+  });
+  if (!res.ok) throw new Error(await parseError(res, 'Scrape failed'));
+  return res.json();
+}
+
+export async function hostImageFromUrl(url: string): Promise<{ url: string; source_url: string }> {
+  const res = await fetch(`${API_BASE}/api/host-image-url`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ url }),
+  });
+  if (!res.ok) throw new Error(await parseError(res, 'Could not host image'));
+  return res.json();
+}
+
+export async function generateDirectConcepts(params: {
+  productName: string;
+  tagline?: string;
+  mood?: string;
+  features?: string;
+  count?: number;
+}): Promise<{ concepts: string[] }> {
+  const res = await fetch(`${API_BASE}/api/showcase/direct-concepts`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      product_name: params.productName,
+      tagline: params.tagline ?? '',
+      mood: params.mood ?? '',
+      features: params.features ?? '',
+      count: params.count ?? 10,
+    }),
+  });
+  if (!res.ok) throw new Error(await parseError(res, 'Concept generation failed'));
+  return res.json();
+}
+
+export async function regenerateDirectConcept(params: {
+  productName: string;
+  tagline?: string;
+  mood?: string;
+  features?: string;
+  exclude?: string[];
+  index?: number;
+}): Promise<{ concept: string }> {
+  const res = await fetch(`${API_BASE}/api/showcase/direct-concept-one`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      product_name: params.productName,
+      tagline: params.tagline ?? '',
+      mood: params.mood ?? '',
+      features: params.features ?? '',
+      exclude: params.exclude ?? [],
+      index: params.index ?? 1,
+    }),
+  });
+  if (!res.ok) throw new Error(await parseError(res, 'Concept regeneration failed'));
+  return res.json();
+}
+
+/** Must match backend `showcase_prompts._CONCEPTS` keys. */
+export const SHOWCASE_CONCEPT_OPTIONS = [
+  {
+    id: 'luxury_studio',
+    label: 'Luxury studio launch',
+    description: 'Slow dolly, pedestal, whisper VO — flagship packshot grammar.',
+    category: 'Commercial',
+  },
+  {
+    id: 'ugc_authentic',
+    label: 'UGC / social authentic',
+    description: 'Handheld, desk or counter, creator energy — short-form hooks.',
+    category: 'Social',
+  },
+  {
+    id: 'tech_minimal',
+    label: 'Tech / minimal',
+    description: 'Void set, hard edge light, precise motion — device-film calm.',
+    category: 'Commercial',
+  },
+  {
+    id: 'lifestyle_natural',
+    label: 'Lifestyle / natural light',
+    description: 'Real rooms, sun paths, slow living — editorial home story.',
+    category: 'Commercial',
+  },
+  {
+    id: 'bold_editorial',
+    label: 'Bold / color editorial',
+    description: 'Gels, graphic shadows, campaign-poster energy.',
+    category: 'Experimental',
+  },
+  {
+    id: 'unboxing_asmr',
+    label: 'Unboxing / desk ASMR',
+    description: 'Top-down peel, satisfying motion, whisper pacing.',
+    category: 'Social',
+  },
+  {
+    id: 'high_energy_sports',
+    label: 'High-energy sports',
+    description: 'Kinetic camera, impact cuts, performance-first momentum.',
+    category: 'Commercial',
+  },
+  {
+    id: 'moody_cinematic_noir',
+    label: 'Moody cinematic noir',
+    description: 'Chiaroscuro lighting, suspense pacing, dramatic reveals.',
+    category: 'Experimental',
+  },
+  {
+    id: 'playful_stopmotion_style',
+    label: 'Playful stop-motion style',
+    description: 'Tabletop whimsy, snappy object beats, colorful transitions.',
+    category: 'Experimental',
+  },
+  {
+    id: 'nature_outdoor_adventure',
+    label: 'Nature / outdoor adventure',
+    description: 'Golden trails, outdoor scale, utility-forward storytelling.',
+    category: 'Commercial',
+  },
+] as const;
+
+export type ShowcaseConceptId = (typeof SHOWCASE_CONCEPT_OPTIONS)[number]['id'];
+
+export async function showcasePlanStream(
+  params: {
+    productName: string;
+    tagline: string;
+    mood: string;
+    features: string;
+    shotCount: number;
+    /** Optional override; when omitted backend chooses 4/6/8 from concept + product brief. */
+    secondsPerSegment?: number;
+    /** Creative arc for shot planning (template + GPT). */
+    creativeConcept?: ShowcaseConceptId;
+    image?: File | null;
+    /** Original CDN URL for vision (optional); file upload takes precedence when present. */
+    heroImageUrl?: string;
+  },
+  onEvent: (e: StreamEvent) => void,
+  signal?: AbortSignal
+): Promise<SegmentsPayload> {
+  const fd = new FormData();
+  fd.append('productName', params.productName);
+  fd.append('tagline', params.tagline);
+  fd.append('mood', params.mood);
+  fd.append('features', params.features);
+  fd.append('shotCount', String(params.shotCount));
+  if (params.secondsPerSegment != null) {
+    fd.append('secondsPerSegment', String(params.secondsPerSegment));
+  }
+  fd.append('creativeConcept', params.creativeConcept ?? 'luxury_studio');
+  if (params.image) fd.append('image', params.image);
+  if (params.heroImageUrl) fd.append('heroImageUrl', params.heroImageUrl);
+
+  const res = await fetch(`${API_BASE}/api/showcase/plan-stream`, {
+    method: 'POST',
+    body: fd,
+    signal,
+  });
+  if (!res.ok) throw new Error(await parseError(res, 'Shot plan failed'));
+  if (!res.body) throw new Error('No response body');
+
+  const reader = res.body.getReader();
+  const dec = new TextDecoder();
+  let buf = '';
+  let final: SegmentsPayload | null = null;
+
+  try {
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      buf += dec.decode(value, { stream: true });
+      const lines = buf.split('\n');
+      buf = lines.pop() || '';
+      for (const line of lines) {
+        if (!line.trim()) continue;
+        const ev = JSON.parse(line) as StreamEvent;
+        onEvent(ev);
+        if (ev.event === 'complete') final = ev.payload;
+        if (ev.event === 'error') throw new Error(ev.message);
+      }
+    }
+  } finally {
+    reader.releaseLock();
+  }
+
+  if (!final) throw new Error('Stream ended without complete payload');
+  return final;
+}
+
+export interface KlingGenerateResponse {
+  taskId: string;
+  status: string;
+}
+
+/** Parse segment_info.duration ("4s", "8s") for Veo / trim. */
+export function segmentClipSeconds(segment: { segment_info?: { duration?: string } }): 4 | 6 | 8 {
+  const raw = segment.segment_info?.duration ?? '';
+  const m = String(raw).match(/^(\d+)/);
+  if (m) {
+    const n = parseInt(m[1], 10);
+    if (n === 4 || n === 6 || n === 8) return n;
+  }
+  return 8;
+}
+
+export type SegmentVideoModel = 'veo3_fast' | 'seedance-2' | 'seedance-2-fast';
+
+export type SeedanceSegmentModel = 'seedance-2' | 'seedance-2-fast';
+
+/** UI segment model → KIE `jobs/createTask` model id. */
+export function kieSeedanceModelId(model: SeedanceSegmentModel): string {
+  return model === 'seedance-2-fast' ? 'bytedance/seedance-2-fast' : 'bytedance/seedance-2';
+}
+
+export function isSeedanceSegmentModel(model: SegmentVideoModel): model is SeedanceSegmentModel {
+  return model === 'seedance-2' || model === 'seedance-2-fast';
+}
+
+/** Flatten structured segment JSON into a Seedance text prompt (max 20k on API). */
+export function segmentToSeedancePrompt(segment: VeoSegment, productName?: string): string {
+  const ch = segment.character_description;
+  const sc = segment.scene_continuity;
+  const at = segment.action_timeline;
+  const lines: string[] = [];
+  if (productName?.trim()) lines.push(`Product: ${productName.trim()}.`);
+  if (ch?.current_state) lines.push(ch.current_state);
+  if (sc?.environment) lines.push(sc.environment);
+  if (sc?.camera_position) lines.push(`Camera: ${sc.camera_position}`);
+  if (sc?.camera_movement) lines.push(`Motion: ${sc.camera_movement}`);
+  if (sc?.lighting_state) lines.push(`Lighting: ${sc.lighting_state}`);
+  if (sc?.background_elements) lines.push(`Background: ${sc.background_elements}`);
+  if (at?.dialogue) lines.push(`VO: ${at.dialogue}`);
+  const sync = at?.synchronized_actions;
+  if (sync && typeof sync === 'object') {
+    for (const [k, v] of Object.entries(sync)) {
+      if (v) lines.push(`${k}: ${v}`);
+    }
+  }
+  let text = lines.filter(Boolean).join('\n').trim();
+  if (!text) {
+    text =
+      'Cinematic premium product showcase, photoreal, smooth camera, shallow depth of field.';
+  }
+  if (text.length > 20000) text = text.slice(0, 20000);
+  return text;
+}
+
+export async function seedanceCreate(body: {
+  prompt: string;
+  reference_image_urls: string[];
+  aspect_ratio: string;
+  duration: number;
+  resolution?: string;
+  generate_audio?: boolean;
+  /** KIE model, e.g. `bytedance/seedance-2` or `bytedance/seedance-2-fast`. */
+  model?: string;
+}): Promise<{ taskId: string }> {
+  const res = await fetch(`${API_BASE}/api/seedance/create`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) throw new Error(await parseError(res, 'Seedance task failed'));
+  return res.json();
+}
+
+export function createSeedanceEventSource(taskId: string): EventSource {
+  return new EventSource(`${API_BASE}/api/seedance/events/${encodeURIComponent(taskId)}`);
+}
+
+export async function seedanceStatus(taskId: string): Promise<{
+  state?: string;
+  url?: string | null;
+  failMsg?: string | null;
+}> {
+  const res = await fetch(`${API_BASE}/api/seedance/status/${encodeURIComponent(taskId)}`);
+  if (!res.ok) throw new Error(await parseError(res, 'Seedance status check failed'));
+  return res.json();
+}
+
+export function waitForSeedanceVideo(taskId: string, timeoutMs = 600000): Promise<string> {
+  return new Promise((resolve, reject) => {
+    let settled = false;
+    const es = createSeedanceEventSource(taskId);
+    const pollEveryMs = 4000;
+    const poller = window.setInterval(async () => {
+      if (settled) return;
+      try {
+        const data = await seedanceStatus(taskId);
+        if (data.state === 'success' && data.url) {
+          settled = true;
+          window.clearInterval(poller);
+          clearTimeout(t);
+          es.close();
+          resolve(data.url);
+        } else if (data.state === 'fail') {
+          settled = true;
+          window.clearInterval(poller);
+          clearTimeout(t);
+          es.close();
+          reject(new Error(data.failMsg || 'Seedance generation failed'));
+        }
+      } catch {
+        /* ignore transient poll errors; SSE can still resolve */
+      }
+    }, pollEveryMs);
+    const t = setTimeout(() => {
+      if (settled) return;
+      settled = true;
+      window.clearInterval(poller);
+      es.close();
+      reject(new Error('Seedance generation timed out'));
+    }, timeoutMs);
+    es.onmessage = (ev) => {
+      if (settled) return;
+      try {
+        const data = JSON.parse(ev.data) as {
+          state?: string;
+          url?: string | null;
+          failMsg?: string | null;
+        };
+        if (data.state === 'success' && data.url) {
+          settled = true;
+          window.clearInterval(poller);
+          clearTimeout(t);
+          es.close();
+          resolve(data.url);
+        } else if (data.state === 'fail') {
+          settled = true;
+          window.clearInterval(poller);
+          clearTimeout(t);
+          es.close();
+          reject(new Error(data.failMsg || 'Seedance generation failed'));
+        }
+      } catch {
+        /* ignore malformed SSE payloads */
+      }
+    };
+    es.onerror = () => {
+      /* EventSource retries automatically; timeout handles terminal failure */
+    };
+  });
+}
+
+export async function klingGenerate(body: {
+  prompt: string | object;
+  imageUrls?: string[];
+  model?: string;
+  aspectRatio?: string;
+  generationType?: string;
+  seeds?: number;
+  voiceType?: string;
+  /** 4, 6, or 8 — forwarded to the API so the provider can honor shot length */
+  durationSeconds?: number;
+}): Promise<KlingGenerateResponse> {
+  const res = await fetch(`${API_BASE}/api/veo/generate`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  });
+  if (!res.ok) throw new Error(await parseError(res, 'Video start failed'));
+  return res.json();
+}
+
+export function createKlingEventSource(taskId: string): EventSource {
+  return new EventSource(`${API_BASE}/api/veo/events/${taskId}`);
+}
+
+export function waitForKlingVideo(taskId: string, timeoutMs = 420000): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const es = createKlingEventSource(taskId);
+    const t = setTimeout(() => {
+      es.close();
+      reject(new Error('Video generation timed out'));
+    }, timeoutMs);
+    es.onmessage = (ev) => {
+      try {
+        const data = JSON.parse(ev.data);
+        if (data.status === 'succeeded' && data.url) {
+          clearTimeout(t);
+          es.close();
+          resolve(data.url as string);
+        } else if (data.status === 'failed' || data.status === 'cancelled') {
+          clearTimeout(t);
+          es.close();
+          reject(new Error(data.error || data.message || 'Generation failed'));
+        }
+      } catch {
+        /* ignore */
+      }
+    };
+    es.onerror = () => {
+      /* EventSource retries; rely on timeout */
+    };
+  });
+}
+
+export async function downloadVideo(
+  url: string,
+  opts?: { trimSeconds?: 4 | 6 | 8 }
+): Promise<Blob> {
+  const q = new URLSearchParams({ url });
+  if (opts?.trimSeconds != null) q.set('trimSeconds', String(opts.trimSeconds));
+  const res = await fetch(`${API_BASE}/api/veo/download?${q}`);
+  if (!res.ok) throw new Error('Download failed');
+  return res.blob();
+}
+
+function loadVideoFromFile(file: File): Promise<HTMLVideoElement> {
+  return new Promise((resolve, reject) => {
+    const v = document.createElement('video');
+    v.preload = 'metadata';
+    v.src = URL.createObjectURL(file);
+    v.onloadedmetadata = () => resolve(v);
+    v.onerror = () => {
+      URL.revokeObjectURL(v.src);
+      reject(new Error('Could not read video'));
+    };
+  });
+}
+
+export async function getVideoDuration(file: File): Promise<number> {
+  const v = await loadVideoFromFile(file);
+  try {
+    return v.duration;
+  } finally {
+    URL.revokeObjectURL(v.src);
+  }
+}
+
+export async function mergeVideos(blobs: Blob[], clips: ClipMetadata[]): Promise<Blob> {
+  const fd = new FormData();
+  fd.append('clips_data', JSON.stringify(clips));
+  blobs.forEach((b, i) => fd.append('files', b, `clip_${i}.mp4`));
+  const res = await fetch(`${API_BASE}/api/export/merge`, { method: 'POST', body: fd });
+  if (!res.ok) throw new Error(await parseError(res, 'Merge failed'));
+  return res.blob();
+}
+
+/**
+ * Run async work on `items` with at most `concurrency` in flight. Results are in original order.
+ * Use for I/O-bound pipelines (e.g. several segment renders) without unbounded provider load.
+ */
+export async function mapWithConcurrency<T, R>(
+  items: T[],
+  concurrency: number,
+  mapper: (item: T, index: number) => Promise<R>,
+  onProgress?: (completed: number, total: number) => void
+): Promise<R[]> {
+  const n = items.length;
+  if (n === 0) return [];
+  const cap = Math.max(1, Math.min(concurrency, n));
+  const results: R[] = new Array(n);
+  let next = 0;
+  let finished = 0;
+
+  async function worker(): Promise<void> {
+    while (true) {
+      const i = next++;
+      if (i >= n) return;
+      results[i] = await mapper(items[i], i);
+      finished++;
+      onProgress?.(finished, n);
+    }
+  }
+
+  await Promise.all(Array.from({ length: cap }, () => worker()));
+  return results;
+}
+
+/** Default parallel segment pipelines (GPT keyframe + Veo/Seedance). Reduce if providers rate-limit. */
+export const SEGMENT_RENDER_CONCURRENCY = 3;
+
+/** Build merge metadata for full-length clips in order. */
+export async function clipsFromBlobs(blobs: Blob[]): Promise<ClipMetadata[]> {
+  return Promise.all(
+    blobs.map(async (b, i) => {
+      const file = new File([b], `c${i}.mp4`, { type: 'video/mp4' });
+      const dur = await getVideoDuration(file);
+      return {
+        index: i,
+        startTime: 0,
+        endTime: dur,
+        type: 'video' as const,
+      };
+    })
+  );
+}
+
+export async function generateSegmentFirstFrame(params: {
+  segment: VeoSegment;
+  referenceImageUrls: string[];
+  aspectRatio: string;
+  productName: string;
+}): Promise<{ url: string; model: string; size: string }> {
+  const res = await fetch(`${API_BASE}/api/showcase/segment-first-frame`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      segment: params.segment,
+      reference_image_urls: params.referenceImageUrls.slice(0, GPT_IMAGE_EDIT_MAX_REFS),
+      aspect_ratio: params.aspectRatio,
+      product_name: params.productName,
+    }),
+  });
+  if (!res.ok) throw new Error(await parseError(res, 'GPT Image first frame failed'));
+  return res.json();
+}
+
+export async function generateSegmentVideo(
+  segment: VeoSegment,
+  imageUrl: string,
+  aspectRatio: string,
+  seed: number,
+  voiceType: string,
+  opts: {
+    model?: SegmentVideoModel;
+    productName?: string;
+    seedanceResolution?: '480p' | '720p' | '1080p';
+    promptOverride?: string;
+  } = {}
+): Promise<Blob> {
+  const clipSec = segmentClipSeconds(segment);
+  const model = opts.model ?? 'seedance-2-fast';
+
+  if (isSeedanceSegmentModel(model)) {
+    const prompt =
+      opts.promptOverride?.trim() || segmentToSeedancePrompt(segment, opts.productName);
+    const { taskId } = await seedanceCreate({
+      prompt,
+      reference_image_urls: [imageUrl],
+      aspect_ratio: aspectRatio,
+      duration: clipSec,
+      resolution: opts.seedanceResolution ?? '480p',
+      generate_audio: voiceType.trim().toLowerCase() !== 'none',
+      model: kieSeedanceModelId(model),
+    });
+    const url = await waitForSeedanceVideo(taskId);
+    return downloadVideo(url, { trimSeconds: clipSec });
+  }
+
+  const { taskId } = await klingGenerate({
+    prompt: opts.promptOverride?.trim() || segment,
+    imageUrls: [imageUrl],
+    model: 'veo3_fast',
+    aspectRatio,
+    generationType: 'FIRST_AND_LAST_FRAMES_2_VIDEO',
+    seeds: seed,
+    voiceType,
+    durationSeconds: clipSec,
+  });
+  const url = await waitForKlingVideo(taskId);
+  return downloadVideo(url, { trimSeconds: clipSec });
+}

frontend/src/components/ShowcaseFlow.tsx

@@ -0,0 +1,1468 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import type { SegmentsPayload } from '@/types';
+import {
+  clipsFromBlobs,
+  downloadVideo,
+  generateDirectConcepts,
+  generateSegmentFirstFrame,
+  generateSegmentVideo,
+  hostImageFromUrl,
+  imageSrcForHeroPreview,
+  isSeedanceSegmentModel,
+  kieSeedanceModelId,
+  mapWithConcurrency,
+  mergeVideos,
+  pickProductReferenceUrlsForGpt,
+  scrapeProductPage,
+  SEGMENT_RENDER_CONCURRENCY,
+  seedanceCreate,
+  segmentToSeedancePrompt,
+  showcasePlanStream,
+  SHOWCASE_CONCEPT_OPTIONS,
+  uploadImage,
+  waitForSeedanceVideo,
+  type HealthStatus,
+  type SegmentVideoModel,
+  type ShowcaseConceptId,
+} from '@/api';
+
+type Phase = 'brief' | 'planning' | 'review' | 'rendering' | 'done';
+
+type ShowcaseFlowProps = {
+  health: HealthStatus | null;
+};
+
+type LibraryVideo = {
+  id: string;
+  url: string;
+  title: string;
+  createdAt: number;
+  successfulClips: number;
+  totalClips: number;
+};
+
+type ConceptPlan = {
+  conceptId: ShowcaseConceptId;
+  payload: SegmentsPayload;
+};
+
+type BriefFlowMode = 'planned' | 'direct_15s';
+
+export function ShowcaseFlow({ health }: ShowcaseFlowProps) {
+  const [phase, setPhase] = useState<Phase>('brief');
+  const [productName, setProductName] = useState('');
+  const [tagline, setTagline] = useState('');
+  const [mood, setMood] = useState('premium contrast, soft bloom, graphite backdrop');
+  const [selectedConcepts, setSelectedConcepts] = useState<ShowcaseConceptId[]>(['luxury_studio']);
+  const [features, setFeatures] = useState('');
+  const [shotCount, setShotCount] = useState(3);
+  const [aspectRatio, setAspectRatio] = useState('9:16');
+  const [seed, setSeed] = useState(12005);
+  const [voiceType, setVoiceType] = useState('Crisp');
+  const [videoModel, setVideoModel] = useState<SegmentVideoModel>('seedance-2-fast');
+  const [seedanceResolution, setSeedanceResolution] = useState<'480p' | '720p' | '1080p'>('480p');
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [imagePreview, setImagePreview] = useState<string | null>(null);
+  const [hostedUrl, setHostedUrl] = useState<string | null>(null);
+  const [productPageUrl, setProductPageUrl] = useState('');
+  const [heroRemoteUrl, setHeroRemoteUrl] = useState<string | null>(null);
+  const [scrapedImageUrls, setScrapedImageUrls] = useState<string[]>([]);
+  const [scrapeBusy, setScrapeBusy] = useState(false);
+  /** Synthesize a per-shot keyframe with OpenAI GPT Image (multi-ref edits) before Veo. */
+  const [useGptFirstFrames, setUseGptFirstFrames] = useState(true);
+  const [renderLabel, setRenderLabel] = useState('');
+
+  useEffect(() => {
+    if (health && !health.openai_configured) {
+      setUseGptFirstFrames(false);
+    }
+  }, [health]);
+
+  const [planProgress, setPlanProgress] = useState(0);
+  const [conceptPlans, setConceptPlans] = useState<ConceptPlan[]>([]);
+  const [selectedRenderConcepts, setSelectedRenderConcepts] = useState<ShowcaseConceptId[]>([]);
+  const [segmentPromptEdits, setSegmentPromptEdits] = useState<Record<string, string>>({});
+
+  const [renderIndex, setRenderIndex] = useState(0);
+  const [renderTotalSegments, setRenderTotalSegments] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  const [finalUrl, setFinalUrl] = useState<string | null>(null);
+  const [libraryVideos, setLibraryVideos] = useState<LibraryVideo[]>([]);
+  const libraryVideosRef = useRef<LibraryVideo[]>([]);
+  const [abort, setAbort] = useState<AbortController | null>(null);
+  const [phaseElapsedSeconds, setPhaseElapsedSeconds] = useState(0);
+  const [planPulseIndex, setPlanPulseIndex] = useState(0);
+  const [renderPulseIndex, setRenderPulseIndex] = useState(0);
+  const [briefFlowMode, setBriefFlowMode] = useState<BriefFlowMode>('planned');
+  const [directConcepts, setDirectConcepts] = useState<string[]>([]);
+  const [selectedDirectConcepts, setSelectedDirectConcepts] = useState<string[]>([]);
+  const [conceptsBusy, setConceptsBusy] = useState(false);
+  const [selectedReferenceImageUrls, setSelectedReferenceImageUrls] = useState<string[]>([]);
+
+  const onPickImage = useCallback((f: File | null) => {
+    setImageFile(f);
+    if (imagePreview && imagePreview.startsWith('blob:')) URL.revokeObjectURL(imagePreview);
+    setImagePreview(f ? URL.createObjectURL(f) : null);
+    setHostedUrl(null);
+    setHeroRemoteUrl(null);
+    setScrapedImageUrls([]);
+    setSelectedReferenceImageUrls([]);
+  }, [imagePreview]);
+
+  const buildFeaturesFromScrape = (data: Awaited<ReturnType<typeof scrapeProductPage>>) => {
+    const parts: string[] = [];
+    if (data.description) parts.push(String(data.description).trim());
+    if (data.price) parts.push(`Price: ${data.price}`);
+    if (data.brand) parts.push(`Brand: ${data.brand}`);
+    if (data.category) parts.push(`Category: ${data.category}`);
+    if (data.offers) parts.push(`Offers: ${data.offers}`);
+    return parts.join('\n\n');
+  };
+
+  const importFromProductUrl = async () => {
+    setError(null);
+    const u = productPageUrl.trim();
+    if (!u) {
+      setError('Paste a product page URL.');
+      return;
+    }
+    setScrapeBusy(true);
+    try {
+      const data = await scrapeProductPage(u);
+      setProductName((data.product_name || '').trim());
+      const desc = (data.description || '').trim();
+      setTagline(desc ? desc.slice(0, 120) + (desc.length > 120 ? '…' : '') : '');
+      setFeatures(buildFeaturesFromScrape(data));
+      const cat = (data.category || '').trim();
+      if (cat) {
+        setMood((m) => (m.includes(cat) ? m : `${m} · ${cat} editorial`));
+      }
+      const urls = Array.isArray(data.image_urls) ? data.image_urls.filter(Boolean) : [];
+      if (!urls.length) {
+        setError('No product images found on this page.');
+        return;
+      }
+      setScrapedImageUrls(urls);
+      setSelectedReferenceImageUrls(urls.slice(0, 6));
+      setHeroRemoteUrl(urls[0]);
+      setImageFile(null);
+      const hosted = await hostImageFromUrl(urls[0]);
+      setHostedUrl(hosted.url);
+      setImagePreview(hosted.url);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Import failed');
+    } finally {
+      setScrapeBusy(false);
+    }
+  };
+
+  const selectScrapedHero = async (url: string) => {
+    setError(null);
+    try {
+      setHeroRemoteUrl(url);
+      setSelectedReferenceImageUrls((prev) => (prev.includes(url) ? prev : [...prev, url]));
+      setImageFile(null);
+      const hosted = await hostImageFromUrl(url);
+      setHostedUrl(hosted.url);
+      setImagePreview(hosted.url);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Could not use that image');
+    }
+  };
+
+  const runPlan = async () => {
+    setError(null);
+    setConceptPlans([]);
+    setSelectedRenderConcepts([]);
+    if (!productName.trim()) {
+      setError('Add a product name.');
+      return;
+    }
+    if (selectedConcepts.length === 0) {
+      setError('Select at least one creative concept.');
+      return;
+    }
+    if (!imageFile && !hostedUrl) {
+      setError('Import a product URL or upload a hero image.');
+      return;
+    }
+    setPhase('planning');
+    setPlanProgress(0);
+    const ac = new AbortController();
+    setAbort(ac);
+    try {
+      let veoHost = hostedUrl;
+      if (imageFile) {
+        const up = await uploadImage(imageFile);
+        veoHost = up.url;
+        setHostedUrl(up.url);
+      }
+      if (!veoHost) {
+        setError('Could not resolve a hosted hero image for video generation.');
+        setPhase('brief');
+        return;
+      }
+
+      const progressByConcept: Partial<Record<ShowcaseConceptId, number>> = {};
+      const conceptOrder = [...selectedConcepts];
+      const planned = await mapWithConcurrency(
+        conceptOrder,
+        Math.min(3, conceptOrder.length),
+        async (conceptId) => {
+          try {
+            const payload: SegmentsPayload = await showcasePlanStream(
+              {
+                productName: productName.trim(),
+                tagline: tagline.trim(),
+                mood: mood.trim(),
+                features: features.trim(),
+                shotCount,
+                creativeConcept: conceptId,
+                image: imageFile ?? null,
+                heroImageUrl: imageFile ? undefined : heroRemoteUrl || undefined,
+              },
+              (ev) => {
+                if (ev.event === 'segment') {
+                  progressByConcept[conceptId] = ev.progress;
+                  const sum = conceptOrder.reduce((acc, id) => acc + (progressByConcept[id] ?? 0), 0);
+                  setPlanProgress(Math.round(sum / conceptOrder.length));
+                }
+              },
+              ac.signal
+            );
+            return { ok: true as const, conceptId, payload };
+          } catch (e) {
+            return {
+              ok: false as const,
+              conceptId,
+              error: e instanceof Error ? e.message : 'Planning failed',
+            };
+          }
+        }
+      );
+      const successes = planned
+        .filter((r) => r.ok)
+        .map((r) => ({ conceptId: r.conceptId, payload: r.payload }));
+      const failures = planned.filter((r) => !r.ok);
+      if (successes.length === 0) {
+        throw new Error(failures[0]?.error || 'Planning failed');
+      }
+      setConceptPlans(successes);
+      setSelectedRenderConcepts(successes.map((s) => s.conceptId));
+      setSegmentPromptEdits({});
+      if (failures.length > 0) {
+        setError(`Planned ${successes.length}/${conceptOrder.length} concepts. Some concepts failed.`);
+      }
+      setPlanProgress(100);
+      setPhase('review');
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Planning failed');
+      setPhase('brief');
+    } finally {
+      setAbort(null);
+    }
+  };
+
+  const cancelPlan = () => {
+    abort?.abort();
+  };
+
+  /** 2–4 distinct URLs for GPT Image edits: hosted hero + storefront hero + scraped gallery (deduped). */
+  const referenceUrlsForGpt = useMemo(
+    () =>
+      pickProductReferenceUrlsForGpt({
+        hostedUrl,
+        heroRemoteUrl,
+        scrapedImageUrls,
+      }),
+    [hostedUrl, heroRemoteUrl, scrapedImageUrls]
+  );
+
+  const runRender = async () => {
+    if (!hostedUrl) {
+      setError('Missing hosted image URL. Re-run plan from the brief step.');
+      return;
+    }
+    setError(null);
+    setPhase('rendering');
+    const plansToRender = conceptPlans.filter((p) => selectedRenderConcepts.includes(p.conceptId));
+    if (plansToRender.length === 0) {
+      setError('Select at least one concept from the shot plan to render.');
+      return;
+    }
+    const totalSegments = plansToRender.reduce((acc, p) => acc + p.payload.segments.length, 0);
+    setRenderIndex(0);
+    setRenderTotalSegments(totalSegments);
+    setRenderLabel('Starting parallel render…');
+    const refs = referenceUrlsForGpt;
+    const doGpt = useGptFirstFrames && gptOptionEnabled;
+    const modelLabel = isSeedanceSegmentModel(videoModel) ? 'Seedance' : 'Veo';
+    try {
+      const completedSegmentsByConcept: Partial<Record<ShowcaseConceptId, number>> = {};
+      let gptFrameFallbacks = 0;
+      const renderedConcepts = await mapWithConcurrency(
+        plansToRender,
+        Math.min(2, plansToRender.length),
+        async ({ conceptId, payload }) => {
+          const next = await mapWithConcurrency(
+            payload.segments,
+            SEGMENT_RENDER_CONCURRENCY,
+            async (seg, index) => {
+              let veoStillUrl = hostedUrl;
+              const promptKey = `${conceptId}:${index}`;
+              const promptOverride = segmentPromptEdits[promptKey]?.trim() || undefined;
+              try {
+                if (doGpt) {
+                  try {
+                    const { url } = await generateSegmentFirstFrame({
+                      segment: seg,
+                      referenceImageUrls: refs,
+                      aspectRatio,
+                      productName: productName.trim(),
+                    });
+                    veoStillUrl = url;
+                  } catch (e) {
+                    // Fallback: keep rendering with hosted hero image if GPT keyframe fails.
+                    gptFrameFallbacks += 1;
+                    console.warn('GPT keyframe failed, using hosted hero image for segment', {
+                      conceptId,
+                      segmentIndex: index,
+                      error: e instanceof Error ? e.message : String(e),
+                    });
+                  }
+                }
+                const blob = await generateSegmentVideo(
+                  seg,
+                  veoStillUrl,
+                  aspectRatio,
+                  seed,
+                  voiceType,
+                  {
+                    model: videoModel,
+                    productName: productName.trim(),
+                    seedanceResolution,
+                    promptOverride,
+                  }
+                );
+                return { ok: true as const, blob, index };
+              } catch (e) {
+                return {
+                  ok: false as const,
+                  index,
+                  error: e instanceof Error ? e.message : 'Segment render failed',
+                };
+              }
+            },
+            (done, total) => {
+              completedSegmentsByConcept[conceptId] = done;
+              const doneAll = plansToRender.reduce((acc, p) => acc + (completedSegmentsByConcept[p.conceptId] ?? 0), 0);
+              setRenderIndex(doneAll);
+              const conceptLabel =
+                SHOWCASE_CONCEPT_OPTIONS.find((c) => c.id === conceptId)?.label ?? conceptId;
+              setRenderLabel(
+                doGpt
+                  ? `GPT keyframes + ${modelLabel}: ${conceptLabel} ${done}/${total} · total ${doneAll}/${totalSegments}`
+                  : `${modelLabel}: ${conceptLabel} ${done}/${total} · total ${doneAll}/${totalSegments}`
+              );
+            }
+          );
+          const successes = next
+            .filter((r) => r.ok)
+            .sort((a, b) => a.index - b.index)
+            .map((r) => r.blob);
+          const failures = next.filter((r) => !r.ok);
+          if (successes.length === 0) {
+            return {
+              ok: false as const,
+              conceptId,
+              error: failures[0]?.error || 'Render failed',
+            };
+          }
+          const meta = await clipsFromBlobs(successes);
+          const merged = await mergeVideos(successes, meta);
+          return {
+            ok: true as const,
+            conceptId,
+            merged,
+            successfulClips: successes.length,
+            totalClips: payload.segments.length,
+            failedClips: failures.length,
+          };
+        }
+      );
+      setRenderLabel('');
+      const successes = renderedConcepts.filter((r) => r.ok);
+      const failures = renderedConcepts.filter((r) => !r.ok);
+      if (successes.length === 0) throw new Error(failures[0]?.error || 'Render failed');
+      const createdAt = Date.now();
+      const items: LibraryVideo[] = successes.map((s, idx) => {
+        const url = URL.createObjectURL(s.merged);
+        const conceptLabel = SHOWCASE_CONCEPT_OPTIONS.find((c) => c.id === s.conceptId)?.label ?? s.conceptId;
+        return {
+          id: `${createdAt}-${idx}-${Math.random().toString(36).slice(2, 8)}`,
+          url,
+          title: `${productName.trim() || 'Product showcase'} · ${conceptLabel}`,
+          createdAt: createdAt + idx,
+          successfulClips: s.successfulClips,
+          totalClips: s.totalClips,
+        };
+      });
+      setFinalUrl(items[0]?.url ?? null);
+      setLibraryVideos((prev) => [...items, ...prev]);
+      const failedConcepts = failures.length;
+      const partialClips = successes.reduce((acc, s) => acc + (s.failedClips > 0 ? 1 : 0), 0);
+      if (failedConcepts > 0 || partialClips > 0) {
+        setError(
+          `Rendered ${successes.length}/${plansToRender.length} concepts. ${failedConcepts} concept(s) failed, ${partialClips} concept(s) had partial clip failures.`
+        );
+      } else if (gptFrameFallbacks > 0) {
+        setError(
+          `Rendered successfully with ${gptFrameFallbacks} GPT keyframe fallback(s). Some OpenAI first-frame calls failed (502), so those shots used your hosted hero image.`
+        );
+      }
+      setPhase('done');
+    } catch (e) {
+      setRenderLabel('');
+      setError(e instanceof Error ? e.message : 'Render failed');
+      setPhase('review');
+    }
+  };
+
+  const buildDirectConceptPrompt = (conceptText: string): string => {
+    const lines: string[] = [];
+    lines.push(`Create a cinematic 15-second product ad video for "${productName.trim()}".`);
+    if (tagline.trim()) lines.push(`Tagline direction: ${tagline.trim()}`);
+    lines.push(`Creative concept: ${conceptText.trim()}`);
+    if (mood.trim()) lines.push(`Mood and grade: ${mood.trim()}.`);
+    if (features.trim()) lines.push(`Key product details to preserve: ${features.trim()}`);
+    lines.push('Use the reference images as the same product identity across the full clip.');
+    lines.push('Photoreal quality, coherent lighting, smooth camera motion, premium commercial finish.');
+    return lines.join('\n');
+  };
+
+  const runDirectConceptIdeas = async () => {
+    setError(null);
+    if (!productName.trim()) {
+      setError('Add a product name first, then generate concepts.');
+      return;
+    }
+    setConceptsBusy(true);
+    try {
+      const { concepts } = await generateDirectConcepts({
+        productName: productName.trim(),
+        tagline: tagline.trim(),
+        mood: mood.trim(),
+        features: features.trim(),
+        count: 10,
+      });
+      const unique = Array.from(
+        new Set(
+          (concepts || [])
+            .map((c) => c.trim())
+            .filter(Boolean)
+        )
+      ).slice(0, 10);
+      if (unique.length === 0) throw new Error('Could not generate concepts. Try again.');
+      setDirectConcepts(unique);
+      setSelectedDirectConcepts(unique.slice(0, Math.min(3, unique.length)));
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Concept generation failed');
+    } finally {
+      setConceptsBusy(false);
+    }
+  };
+
+  const runDirectConceptRender = async () => {
+    setError(null);
+    if (!productName.trim()) {
+      setError('Add a product name.');
+      return;
+    }
+    if (!isSeedanceSegmentModel(videoModel)) {
+      setError('Direct 15s flow is available for Seedance models only.');
+      return;
+    }
+    if (selectedDirectConcepts.length === 0) {
+      setError('Generate AI concepts and select at least one concept.');
+      return;
+    }
+    if (!imageFile && !hostedUrl && selectedReferenceImageUrls.length === 0) {
+      setError('Import a product URL or upload a hero image.');
+      return;
+    }
+
+    setPhase('rendering');
+    setRenderIndex(0);
+    setRenderTotalSegments(selectedDirectConcepts.length);
+    setRenderLabel('Generating full 15s concept videos…');
+
+    try {
+      let hosted = hostedUrl;
+      if (imageFile) {
+        const up = await uploadImage(imageFile);
+        hosted = up.url;
+        setHostedUrl(up.url);
+        setImagePreview(up.url);
+      }
+
+      const refs = Array.from(
+        new Set(
+          [...selectedReferenceImageUrls, heroRemoteUrl || '', hosted || '']
+            .map((u) => u.trim())
+            .filter(Boolean)
+        )
+      ).slice(0, 9);
+      if (refs.length === 0) throw new Error('No valid reference images available for Seedance.');
+
+      const rendered = await mapWithConcurrency(
+        selectedDirectConcepts,
+        Math.min(2, selectedDirectConcepts.length),
+        async (conceptText) => {
+          const { taskId } = await seedanceCreate({
+            model: kieSeedanceModelId(videoModel),
+            prompt: buildDirectConceptPrompt(conceptText),
+            reference_image_urls: refs,
+            aspect_ratio: aspectRatio,
+            duration: 15,
+            resolution: seedanceResolution,
+            generate_audio: voiceType.trim().toLowerCase() !== 'none',
+          });
+          const outUrl = await waitForSeedanceVideo(taskId);
+          const blob = await downloadVideo(outUrl);
+          return { conceptText, blob };
+        },
+        (done, total) => {
+          setRenderIndex(done);
+          setRenderLabel(`Direct 15s concepts: ${done}/${total}`);
+        }
+      );
+
+      const createdAt = Date.now();
+      const items: LibraryVideo[] = rendered.map((r, idx) => {
+        const url = URL.createObjectURL(r.blob);
+        return {
+          id: `${createdAt}-${idx}-${Math.random().toString(36).slice(2, 8)}`,
+          url,
+          title: `${productName.trim() || 'Product showcase'} · ${r.conceptText.slice(0, 64)} · 15s direct`,
+          createdAt: createdAt + idx,
+          successfulClips: 1,
+          totalClips: 1,
+        };
+      });
+
+      setRenderLabel('');
+      setFinalUrl(items[0]?.url ?? null);
+      setLibraryVideos((prev) => [...items, ...prev]);
+      setPhase('done');
+    } catch (e) {
+      setRenderLabel('');
+      setError(e instanceof Error ? e.message : 'Direct 15s generation failed');
+      setPhase('brief');
+    }
+  };
+
+  const reset = () => {
+    setFinalUrl(null);
+    setConceptPlans([]);
+    setSelectedRenderConcepts([]);
+    setPhase('brief');
+    setRenderIndex(0);
+    setRenderTotalSegments(0);
+    setError(null);
+    setProductPageUrl('');
+    setHeroRemoteUrl(null);
+    setScrapedImageUrls([]);
+    setRenderLabel('');
+    setSegmentPromptEdits({});
+    setDirectConcepts([]);
+    setSelectedDirectConcepts([]);
+    setSelectedReferenceImageUrls([]);
+  };
+
+  useEffect(() => {
+    libraryVideosRef.current = libraryVideos;
+  }, [libraryVideos]);
+
+  useEffect(() => {
+    return () => {
+      for (const item of libraryVideosRef.current) {
+        URL.revokeObjectURL(item.url);
+      }
+    };
+  }, []);
+
+  const heroPreviewSrc = useMemo(
+    () => imageSrcForHeroPreview(heroRemoteUrl, imagePreview),
+    [heroRemoteUrl, imagePreview]
+  );
+
+  const canUseGptFrames = referenceUrlsForGpt.length >= 1;
+  const openaiReady = health == null || health.openai_configured;
+  const gptOptionEnabled = canUseGptFrames && openaiReady;
+  const renderProgressPct = renderTotalSegments ? Math.min(100, (renderIndex / renderTotalSegments) * 100) : 0;
+  const planPulseMessages = [
+    'Shaping narrative arc and camera rhythm…',
+    'Aligning product highlights to visual beats…',
+    'Balancing continuity, mood, and pacing…',
+  ];
+  const renderPulseMessages = [
+    'Rendering clips in parallel threads…',
+    'Maintaining visual continuity between shots…',
+    'Preparing final merge and audio sync…',
+  ];
+  const conceptGroups = useMemo(() => {
+    const groups: Record<string, Array<(typeof SHOWCASE_CONCEPT_OPTIONS)[number]>> = {};
+    for (const concept of SHOWCASE_CONCEPT_OPTIONS) {
+      const key = concept.category ?? 'Other';
+      if (!groups[key]) groups[key] = [];
+      groups[key].push(concept);
+    }
+    return groups;
+  }, []);
+
+  useEffect(() => {
+    if (phase !== 'planning' && phase !== 'rendering') {
+      setPhaseElapsedSeconds(0);
+      return;
+    }
+    setPhaseElapsedSeconds(0);
+    const interval = window.setInterval(() => {
+      setPhaseElapsedSeconds((s) => s + 1);
+    }, 1000);
+    return () => window.clearInterval(interval);
+  }, [phase]);
+
+  useEffect(() => {
+    if (phase !== 'planning') {
+      setPlanPulseIndex(0);
+      return;
+    }
+    const interval = window.setInterval(() => {
+      setPlanPulseIndex((i) => (i + 1) % planPulseMessages.length);
+    }, 2800);
+    return () => window.clearInterval(interval);
+  }, [phase, planPulseMessages.length]);
+
+  useEffect(() => {
+    if (phase !== 'rendering') {
+      setRenderPulseIndex(0);
+      return;
+    }
+    const interval = window.setInterval(() => {
+      setRenderPulseIndex((i) => (i + 1) % renderPulseMessages.length);
+    }, 2600);
+    return () => window.clearInterval(interval);
+  }, [phase, renderPulseMessages.length]);
+
+  return (
+    <div className="space-y-10">
+      <AnimatePresence mode="wait">
+        {phase === 'brief' && (
+          <motion.section
+            key="brief"
+            initial={{ opacity: 0, y: 12 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            transition={{ duration: 0.3 }}
+            className="studio-card p-6 sm:p-8"
+          >
+            <div className="studio-step-title">
+              <span className="studio-step-badge">1</span>
+              <div>
+                <h2 className="font-display text-xl font-semibold text-slate-900 sm:text-2xl">Product brief</h2>
+                <p className="mt-1 max-w-2xl text-sm leading-relaxed text-slate-600">
+                  Import a storefront URL to autofill copy and gallery, or type manually. A hosted hero image is
+                  required for Veo.
+                </p>
+              </div>
+            </div>
+
+            <div className="studio-import-panel mt-8">
+              <span className="studio-label text-accent/80">Import from URL</span>
+              <p className="mt-2 text-sm leading-relaxed text-slate-600">
+                Scraper pulls JSON-LD, Open Graph, and Shopify{' '}
+                <code className="rounded-md bg-slate-200 px-1.5 py-0.5 text-xs text-slate-700">
+                  /products/&lt;handle&gt;.json
+                </code>{' '}
+                images.
+              </p>
+              <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-stretch">
+                <input
+                  type="url"
+                  className="studio-input min-w-0 flex-1 !mt-0"
+                  value={productPageUrl}
+                  onChange={(e) => setProductPageUrl(e.target.value)}
+                  placeholder="https://…/products/your-handle"
+                />
+                <button
+                  type="button"
+                  disabled={scrapeBusy}
+                  onClick={importFromProductUrl}
+                  className="studio-btn-secondary shrink-0 px-6 disabled:opacity-50"
+                >
+                  {scrapeBusy ? 'Importing…' : 'Import product'}
+                </button>
+              </div>
+              {scrapedImageUrls.length > 1 && (
+                <div className="mt-5 border-t border-slate-200 pt-5">
+                  <span className="studio-label">Gallery — tap hero</span>
+                  <div className="mt-3 flex flex-wrap gap-2.5">
+                    {scrapedImageUrls.map((u) => (
+                      <button
+                        key={u}
+                        type="button"
+                        onClick={() => selectScrapedHero(u)}
+                        className={`relative h-16 w-16 overflow-hidden rounded-xl border-2 transition shadow-md ${
+                          heroRemoteUrl === u
+                            ? 'border-accent ring-2 ring-accent/30'
+                            : 'border-slate-200 hover:border-slate-300'
+                        }`}
+                      >
+                        <img src={u} alt="" loading="lazy" className="h-full w-full object-cover" />
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+              {briefFlowMode === 'direct_15s' && scrapedImageUrls.length > 0 && (
+                <div className="mt-5 border-t border-slate-200 pt-5">
+                  <span className="studio-label">Reference images for generation (multi-select)</span>
+                  <p className="mt-1 text-xs text-slate-600">
+                    Select multiple product angles so Seedance keeps product identity accurate.
+                  </p>
+                  <div className="mt-3 flex flex-wrap gap-2.5">
+                    {scrapedImageUrls.map((u) => {
+                      const checked = selectedReferenceImageUrls.includes(u);
+                      return (
+                        <button
+                          key={`ref-${u}`}
+                          type="button"
+                          onClick={() =>
+                            setSelectedReferenceImageUrls((prev) =>
+                              prev.includes(u) ? prev.filter((x) => x !== u) : [...prev, u]
+                            )
+                          }
+                          className={`relative h-16 w-16 overflow-hidden rounded-xl border-2 transition shadow-md ${
+                            checked
+                              ? 'border-accent ring-2 ring-accent/30'
+                              : 'border-slate-200 hover:border-slate-300'
+                          }`}
+                        >
+                          <img src={u} alt="" loading="lazy" className="h-full w-full object-cover" />
+                        </button>
+                      );
+                    })}
+                  </div>
+                  <p className="mt-2 text-xs text-slate-500">
+                    Selected: {selectedReferenceImageUrls.length} / {scrapedImageUrls.length} (up to 9 used)
+                  </p>
+                </div>
+              )}
+            </div>
+
+            <div className="mt-8 grid gap-5 sm:grid-cols-2">
+              <div className="block sm:col-span-2">
+                <span className="studio-label">Generation flow</span>
+                <div className="mt-2 flex flex-wrap gap-2">
+                  <button
+                    type="button"
+                    onClick={() => setBriefFlowMode('planned')}
+                    className={`rounded-xl border px-3 py-2 text-sm transition ${
+                      briefFlowMode === 'planned'
+                        ? 'border-accent/40 bg-accent/[0.08] text-slate-900'
+                        : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300'
+                    }`}
+                  >
+                    Plan shots then render
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setBriefFlowMode('direct_15s');
+                      if (directConcepts.length === 0 && !conceptsBusy) {
+                        void runDirectConceptIdeas();
+                      }
+                    }}
+                    disabled={!isSeedanceSegmentModel(videoModel)}
+                    className={`rounded-xl border px-3 py-2 text-sm transition ${
+                      briefFlowMode === 'direct_15s'
+                        ? 'border-accent/40 bg-accent/[0.08] text-slate-900'
+                        : 'border-slate-200 bg-white text-slate-700 hover:border-slate-300'
+                    } disabled:cursor-not-allowed disabled:opacity-50`}
+                  >
+                    Direct 15s concepts (Seedance)
+                  </button>
+                </div>
+                <p className="mt-2 text-xs text-slate-600">
+                  {briefFlowMode === 'planned'
+                    ? 'Creates a shot plan first, then renders and merges clips.'
+                    : 'Skips planning and generates one full 15s video per selected concept from product references.'}
+                </p>
+              </div>
+              {briefFlowMode === 'direct_15s' && (
+                <div className="block sm:col-span-2 rounded-2xl border border-slate-200 bg-slate-50 p-4">
+                  <div className="flex flex-wrap items-center justify-between gap-3">
+                    <span className="studio-label">AI-generated concepts (10)</span>
+                    <button
+                      type="button"
+                      onClick={runDirectConceptIdeas}
+                      disabled={conceptsBusy}
+                      className="studio-btn-secondary !px-3 !py-1.5 text-xs disabled:opacity-50"
+                    >
+                      {conceptsBusy ? 'Generating…' : 'Regenerate concepts'}
+                    </button>
+                  </div>
+                  <p className="mt-2 text-xs text-slate-600">Select only the concepts you want to render.</p>
+                  {directConcepts.length > 0 ? (
+                    <div className="mt-3 space-y-2">
+                      {directConcepts.map((concept) => {
+                        const checked = selectedDirectConcepts.includes(concept);
+                        return (
+                          <label
+                            key={concept}
+                            className={`flex cursor-pointer items-start gap-2 rounded-xl border px-3 py-2 text-sm transition ${
+                              checked
+                                ? 'border-accent/40 bg-accent/[0.08]'
+                                : 'border-slate-200 bg-white hover:border-slate-300'
+                            }`}
+                          >
+                            <input
+                              type="checkbox"
+                              checked={checked}
+                              onChange={(e) => {
+                                setSelectedDirectConcepts((prev) =>
+                                  e.target.checked ? [...prev, concept] : prev.filter((x) => x !== concept)
+                                );
+                              }}
+                              className="mt-0.5 h-4 w-4 rounded border-slate-300 bg-white text-accent focus:ring-accent/40"
+                            />
+                            <span className="leading-snug text-slate-700">{concept}</span>
+                          </label>
+                        );
+                      })}
+                    </div>
+                  ) : (
+                    <p className="mt-3 text-xs text-slate-500">
+                      No concepts yet. Click &quot;Regenerate concepts&quot;.
+                    </p>
+                  )}
+                </div>
+              )}
+              <label className="block sm:col-span-2">
+                <span className="studio-label">Product name</span>
+                <input
+                  className="studio-input !mt-1.5"
+                  value={productName}
+                  onChange={(e) => setProductName(e.target.value)}
+                  placeholder="AuraBrew Six"
+                />
+              </label>
+              <label className="block sm:col-span-2">
+                <span className="studio-label">Tagline / VO line</span>
+                <input
+                  className="studio-input !mt-1.5"
+                  value={tagline}
+                  onChange={(e) => setTagline(e.target.value)}
+                  placeholder="Precision pour. Silent mornings."
+                />
+              </label>
+              <label className="block sm:col-span-2">
+                <span className="studio-label">Mood & grade</span>
+                <input
+                  className="studio-input !mt-1.5"
+                  value={mood}
+                  onChange={(e) => setMood(e.target.value)}
+                />
+              </label>
+              {briefFlowMode === 'planned' && (
+                <div className="block sm:col-span-2">
+                  <span className="studio-label">Creative concepts (select one or more)</span>
+                  <div className="mt-2 space-y-4">
+                    {Object.entries(conceptGroups).map(([groupName, concepts]) => (
+                      <div key={groupName}>
+                        <p className="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-500">{groupName}</p>
+                        <div className="grid gap-2 sm:grid-cols-2">
+                          {concepts.map((c) => {
+                            const checked = selectedConcepts.includes(c.id);
+                            return (
+                              <label
+                                key={c.id}
+                                className={`cursor-pointer rounded-xl border px-3 py-3 transition ${
+                                  checked
+                                    ? 'border-accent/40 bg-accent/[0.08]'
+                                    : 'border-slate-200 bg-white hover:border-slate-300'
+                                }`}
+                              >
+                                <div className="flex items-start gap-2">
+                                  <input
+                                    type="checkbox"
+                                    checked={checked}
+                                    onChange={(e) => {
+                                      setSelectedConcepts((prev) => {
+                                        if (e.target.checked) return [...prev, c.id];
+                                        return prev.filter((id) => id !== c.id);
+                                      });
+                                    }}
+                                    className="mt-0.5 h-4 w-4 rounded border-slate-300 bg-white text-accent focus:ring-accent/40"
+                                  />
+                                  <div>
+                                    <p className="text-sm font-medium text-slate-900">{c.label}</p>
+                                    <p className="mt-1 text-xs text-slate-600">{c.description}</p>
+                                  </div>
+                                </div>
+                              </label>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+              <label className="block sm:col-span-2">
+                <span className="studio-label">Key features (optional)</span>
+                <textarea
+                  className="studio-input !mt-1.5 min-h-[88px] resize-y"
+                  value={features}
+                  onChange={(e) => setFeatures(e.target.value)}
+                  placeholder="Ceramic drip, 92°C thermal lock, magnetic dock…"
+                />
+              </label>
+              <label className="block">
+                <span className="studio-label">Shots (3–6)</span>
+                <input
+                  type="number"
+                  min={3}
+                  max={6}
+                  className="studio-input !mt-1.5"
+                  value={shotCount}
+                  onChange={(e) => setShotCount(Number(e.target.value))}
+                />
+              </label>
+              <div className="block">
+                <span className="studio-label">Seconds / shot</span>
+                <p className="mt-1.5 text-xs leading-relaxed text-slate-600">
+                  Auto-selected by AI from your concept + product brief (4s, 6s, or 8s pacing).
+                </p>
+              </div>
+              <label className="block">
+                <span className="studio-label">Aspect ratio</span>
+                <select
+                  className="studio-select !mt-1.5"
+                  value={aspectRatio}
+                  onChange={(e) => setAspectRatio(e.target.value)}
+                >
+                  <option value="9:16">9:16 vertical</option>
+                  <option value="16:9">16:9 cinematic</option>
+                  <option value="1:1">1:1 square</option>
+                </select>
+              </label>
+              <label className="block">
+                <span className="studio-label">Seed</span>
+                <input
+                  type="number"
+                  className="studio-input !mt-1.5"
+                  value={seed}
+                  onChange={(e) => setSeed(Number(e.target.value))}
+                />
+              </label>
+              <label className="block sm:col-span-2">
+                <span className="studio-label">Video model (KIE · Replicate fallback)</span>
+                <select
+                  className="studio-select !mt-1.5 max-w-md"
+                  value={videoModel}
+                  onChange={(e) => setVideoModel(e.target.value as SegmentVideoModel)}
+                >
+                  <option value="veo3_fast">Veo 3.1 Fast (image → video, SSE)</option>
+                  <option value="seedance-2">Seedance 2 — ByteDance (image + prompt)</option>
+                  <option value="seedance-2-fast">Seedance 2 Fast — ByteDance (image + prompt)</option>
+                </select>
+                <p className="mt-1.5 text-xs text-slate-600">
+                  Same API key. Seedance 2 uses <span className="text-slate-800">first_frame_url</span> image-to-video
+                  (your hero or GPT keyframe) plus the shot plan as the text prompt; duration 4–15s (planner currently
+                  picks 4s, 6s, or 8s based on concept + brief). Two URLs would map to first+last frame; three or more
+                  to reference-only mode per KIE docs.
+                </p>
+              </label>
+              <label className="block sm:col-span-2">
+                <span className="studio-label">Seedance resolution</span>
+                <select
+                  className="studio-select !mt-1.5 max-w-md"
+                  value={seedanceResolution}
+                  onChange={(e) =>
+                    setSeedanceResolution(e.target.value as '480p' | '720p' | '1080p')
+                  }
+                  disabled={!isSeedanceSegmentModel(videoModel)}
+                >
+                  <option value="480p">480p (default)</option>
+                  <option value="720p">720p</option>
+                  <option value="1080p">1080p</option>
+                </select>
+                <p className="mt-1 text-xs text-slate-500">
+                  Applies only when using Seedance models.
+                </p>
+              </label>
+              <label className="block sm:col-span-2">
+                <span className="studio-label">Voice (Veo only)</span>
+                <select
+                  className="studio-select !mt-1.5 max-w-md"
+                  value={voiceType}
+                  onChange={(e) => setVoiceType(e.target.value)}
+                >
+                  {['Deep', 'Warm', 'Crisp'].map((v) => (
+                    <option key={v} value={v}>
+                      {v}
+                    </option>
+                  ))}
+                </select>
+                <p className="mt-1 text-xs text-slate-500">
+                  Seedance uses API synced audio (<code className="rounded bg-slate-200 px-1 text-[0.65rem]">generate_audio</code>).
+                </p>
+              </label>
+              <div className="sm:col-span-2">
+                <span className="studio-label">Hero image</span>
+                <p className="mt-1 text-xs text-slate-600">
+                  Upload replaces an imported hero. Images are hosted on your API for KIE.
+                </p>
+                <div className="mt-3 flex flex-col gap-4 sm:flex-row sm:items-center">
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={(e) => onPickImage(e.target.files?.[0] ?? null)}
+                    className="text-sm text-slate-600 file:mr-3 file:cursor-pointer file:rounded-xl file:border-0 file:bg-accent file:px-4 file:py-2.5 file:text-sm file:font-semibold file:text-ink file:shadow-sm hover:file:brightness-110"
+                  />
+                  {heroPreviewSrc && (
+                    <div className="relative">
+                      <img
+                        src={heroPreviewSrc}
+                        alt="Hero preview"
+                        loading="lazy"
+                        className="h-28 w-28 rounded-2xl border border-slate-200 object-cover shadow-sm"
+                      />
+                      <span className="absolute -bottom-1 -right-1 rounded-full bg-accent px-2 py-0.5 text-[0.6rem] font-bold text-ink">
+                        Hero
+                      </span>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+            <div className="mt-10 flex flex-wrap gap-3 border-t border-slate-200 pt-8">
+              <button
+                type="button"
+                onClick={briefFlowMode === 'direct_15s' ? runDirectConceptRender : runPlan}
+                className="studio-btn-primary"
+              >
+                {briefFlowMode === 'direct_15s'
+                  ? 'Generate 15s concept videos'
+                  : 'Generate shot plan'}
+              </button>
+            </div>
+          </motion.section>
+        )}
+
+        {phase === 'planning' && (
+          <motion.section
+            key="planning"
+            initial={{ opacity: 0, y: 12 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            className="studio-card px-6 py-12 text-center sm:px-10 sm:py-14"
+          >
+            <div className="mx-auto max-w-md">
+              <p className="text-xs font-medium uppercase tracking-[0.18em] text-accent/80">
+                AI planner in progress · {phaseElapsedSeconds}s elapsed
+              </p>
+              <div className="studio-progress-track h-2.5">
+                <motion.div
+                  className="studio-progress-fill"
+                  initial={{ width: 0 }}
+                  animate={{ width: `${planProgress}%` }}
+                  transition={{ duration: 0.25 }}
+                />
+              </div>
+              <p className="mt-6 font-display text-lg text-slate-900">Composing your shot plan</p>
+              <p className="mt-2 text-sm text-slate-600">Streaming segment beats from the planner…</p>
+              <AnimatePresence mode="wait">
+                <motion.p
+                  key={`plan-pulse-${planPulseIndex}`}
+                  initial={{ opacity: 0, y: 4 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -4 }}
+                  transition={{ duration: 0.2 }}
+                  className="mt-3 text-xs text-slate-500"
+                >
+                  {planPulseMessages[planPulseIndex]}
+                </motion.p>
+              </AnimatePresence>
+              <div className="mt-6 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-left">
+                <p className="text-xs font-semibold uppercase tracking-wide text-slate-600">What happens next</p>
+                <p className="mt-1.5 text-xs leading-relaxed text-slate-600">
+                  We will show your generated shot list in a quick review screen before rendering starts.
+                </p>
+              </div>
+              <button type="button" onClick={cancelPlan} className="studio-btn-ghost mt-8">
+                Cancel
+              </button>
+            </div>
+          </motion.section>
+        )}
+
+        {phase === 'review' && (
+          <motion.section
+            key="review"
+            initial={{ opacity: 0, y: 12 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            className="studio-card p-6 sm:p-8"
+          >
+            <div className="studio-step-title">
+              <span className="studio-step-badge">2</span>
+              <div>
+                <h2 className="font-display text-xl font-semibold text-slate-900 sm:text-2xl">Shot plans</h2>
+                <p className="mt-1 text-sm text-slate-600">
+                  Review each concept plan, then choose one or many concepts to render in parallel.
+                </p>
+              </div>
+            </div>
+
+            <div className="mt-8 space-y-6">
+              {conceptPlans.map(({ conceptId, payload }) => {
+                const conceptMeta = SHOWCASE_CONCEPT_OPTIONS.find((c) => c.id === conceptId);
+                const checked = selectedRenderConcepts.includes(conceptId);
+                return (
+                  <section key={conceptId} className="rounded-2xl border border-slate-200 bg-slate-50 p-4 sm:p-5">
+                    <label className="flex cursor-pointer items-start gap-3">
+                      <input
+                        type="checkbox"
+                        checked={checked}
+                        onChange={(e) => {
+                          setSelectedRenderConcepts((prev) => {
+                            if (e.target.checked) return [...prev, conceptId];
+                            return prev.filter((id) => id !== conceptId);
+                          });
+                        }}
+                        className="mt-1 h-4 w-4 rounded border-slate-300 bg-white text-accent focus:ring-accent/40"
+                      />
+                      <div>
+                        <p className="text-sm font-semibold text-slate-900">{conceptMeta?.label ?? conceptId}</p>
+                        <p className="mt-1 text-xs text-slate-600">
+                          {payload.environment || 'Concept plan ready'}
+                          {payload.seconds_per_segment ? ` · ${payload.seconds_per_segment}s / shot` : ''}
+                        </p>
+                      </div>
+                    </label>
+                    <ol className="mt-4 space-y-2.5">
+                      {payload.segments.map((s, i) => {
+                        const promptKey = `${conceptId}:${i}`;
+                        const generatedPrompt = segmentToSeedancePrompt(s, productName.trim());
+                        const currentPrompt = segmentPromptEdits[promptKey] ?? generatedPrompt;
+                        const isEdited = currentPrompt.trim() !== generatedPrompt.trim();
+                        return (
+                          <li key={`${conceptId}-${i + 1}`} className="studio-shot-card pl-5 text-sm text-slate-700">
+                            <div className="flex items-center gap-2">
+                              <span className="font-mono text-xs font-semibold text-accent">Shot {i + 1}</span>{' '}
+                              <span className="text-slate-500">({s.segment_info.duration})</span>
+                              {isEdited && (
+                                <span className="rounded-full bg-accent/[0.12] px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-accent">
+                                  edited
+                                </span>
+                              )}
+                            </div>
+                            <div className="mt-1.5 leading-snug text-slate-600">
+                              {s.scene_continuity.camera_movement.slice(0, 96)}
+                            </div>
+                            <label className="mt-3 block">
+                              <span className="studio-label">Prompt (editable)</span>
+                              <textarea
+                                className="studio-input !mt-1.5 min-h-[110px] resize-y font-mono text-xs leading-relaxed"
+                                value={currentPrompt}
+                                onChange={(e) =>
+                                  setSegmentPromptEdits((prev) => ({
+                                    ...prev,
+                                    [promptKey]: e.target.value,
+                                  }))
+                                }
+                              />
+                            </label>
+                            {isEdited && (
+                              <button
+                                type="button"
+                                onClick={() =>
+                                  setSegmentPromptEdits((prev) => {
+                                    const next = { ...prev };
+                                    delete next[promptKey];
+                                    return next;
+                                  })
+                                }
+                                className="studio-btn-ghost mt-2 !px-3 !py-1.5 text-xs"
+                              >
+                                Reset to generated prompt
+                              </button>
+                            )}
+                          </li>
+                        );
+                      })}
+                    </ol>
+                  </section>
+                );
+              })}
+            </div>
+
+            {health && health.ffprobe_available === false && (
+              <p className="mt-6 rounded-xl border border-amber-500/25 bg-amber-500/[0.08] px-4 py-3 text-xs leading-relaxed text-amber-100/95">
+                <code className="rounded bg-amber-100 px-1 text-amber-700">ffprobe</code> missing — clip duration
+                for merge may fail. Install FFmpeg on the API host.
+              </p>
+            )}
+            {health && health.ffmpeg_available === false && (
+              <p className="mt-3 rounded-xl border border-red-500/30 bg-red-500/[0.08] px-4 py-3 text-xs leading-relaxed text-red-100">
+                <code className="rounded bg-red-100 px-1 text-red-700">ffmpeg</code> not on server PATH — final
+                merge will error.
+              </p>
+            )}
+
+            <label
+              className={`mt-8 flex cursor-pointer items-start gap-4 rounded-2xl border p-5 transition ${
+                gptOptionEnabled
+                  ? 'border-slate-200 bg-white hover:border-slate-300'
+                  : 'cursor-not-allowed border-slate-200 bg-slate-100 opacity-55'
+              }`}
+            >
+              <input
+                type="checkbox"
+                className="mt-1 h-4 w-4 rounded border-slate-300 bg-white text-accent focus:ring-accent/40"
+                checked={useGptFirstFrames && gptOptionEnabled}
+                disabled={!gptOptionEnabled}
+                onChange={(e) => setUseGptFirstFrames(e.target.checked)}
+              />
+              <div>
+                <span className="text-sm font-semibold text-slate-900">GPT Image keyframes per shot</span>
+                <p className="mt-2 text-xs leading-relaxed text-slate-600">
+                  Before each rendered clip, synthesize a first frame with OpenAI{' '}
+                  <code className="rounded bg-slate-200 px-1 py-0.5 text-[0.7rem] text-slate-700">images.edit</code>{' '}
+                  using{' '}
+                  {referenceUrlsForGpt.length} reference image
+                  {referenceUrlsForGpt.length === 1 ? '' : 's'}
+                  {referenceUrlsForGpt.length >= 2
+                    ? ' (merged hero + gallery for stronger product match).'
+                    : scrapedImageUrls.length > 0
+                      ? ' from your import.'
+                      : heroRemoteUrl
+                        ? ' (hero URL).'
+                        : ' (hosted hero only — import a product page for 2–4 angles).'}{' '}
+                  Server needs <code className="rounded bg-slate-200 px-1 text-[0.7rem]">OPENAI_API_KEY</code> and{' '}
+                  <code className="rounded bg-slate-200 px-1 text-[0.7rem]">GPT_IMAGE_MODEL</code>
+                  {health?.gpt_image_model ? (
+                    <>
+                      {' '}
+                      (
+                      <code className="rounded bg-slate-200 px-1 text-[0.7rem] text-accent-dim">
+                        {health.gpt_image_model}
+                      </code>
+                      ).
+                    </>
+                  ) : (
+                    <>
+                      {' '}
+                      (e.g. <code className="rounded bg-slate-200 px-1 text-[0.7rem]">gpt-image-1.5</code>).
+                    </>
+                  )}
+                </p>
+                {health && !health.openai_configured && (
+                  <p className="mt-3 text-xs leading-relaxed text-amber-100/90">
+                    OpenAI not configured — set <code className="rounded bg-amber-100 px-1 text-amber-800">OPENAI_API_KEY</code> and
+                    restart the API.
+                  </p>
+                )}
+              </div>
+            </label>
+
+            <div className="mt-10 flex flex-wrap gap-3 border-t border-slate-200 pt-8">
+              <button type="button" onClick={runRender} className="studio-btn-primary">
+                {useGptFirstFrames && gptOptionEnabled
+                  ? `Generate keyframes + render (${isSeedanceSegmentModel(videoModel) ? 'Seedance' : 'Veo'})`
+                  : `Render all segments (${isSeedanceSegmentModel(videoModel) ? 'Seedance' : 'Veo'})`}
+              </button>
+              <button type="button" onClick={() => setPhase('brief')} className="studio-btn-secondary">
+                Edit brief
+              </button>
+            </div>
+          </motion.section>
+        )}
+
+        {phase === 'rendering' && (
+          <motion.section
+            key="rendering"
+            initial={{ opacity: 0, y: 12 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            className="studio-card p-6 sm:p-8"
+          >
+            <div className="studio-step-title">
+              <span className="studio-step-badge">3</span>
+              <div>
+                <h2 className="font-display text-xl font-semibold text-slate-900 sm:text-2xl">Rendering</h2>
+                <p className="mt-1 text-sm text-slate-600">
+                  {renderLabel || `Segment ${renderIndex} / ${renderTotalSegments}`} — each concept gets its own merged video.
+                </p>
+              </div>
+            </div>
+            <div className="mt-5 flex flex-wrap items-center gap-2 text-xs text-slate-600">
+              <span className="rounded-full border border-slate-300 bg-white px-2.5 py-1">
+                {phaseElapsedSeconds}s elapsed
+              </span>
+              <span className="rounded-full border border-slate-300 bg-white px-2.5 py-1">
+                {Math.round(renderProgressPct)}% complete
+              </span>
+              <span className="rounded-full border border-slate-300 bg-white px-2.5 py-1">
+                {Math.max(0, renderTotalSegments - renderIndex)} clips remaining
+              </span>
+            </div>
+            <div className="studio-progress-track mt-8 h-2.5 max-w-xl">
+              <motion.div
+                className="studio-progress-fill"
+                initial={{ width: 0 }}
+                animate={{
+                  width: `${renderProgressPct}%`,
+                }}
+                transition={{ duration: 0.3 }}
+              />
+            </div>
+            <AnimatePresence mode="wait">
+              <motion.p
+                key={`render-pulse-${renderPulseIndex}`}
+                initial={{ opacity: 0, y: 4 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -4 }}
+                transition={{ duration: 0.2 }}
+                className="mt-4 text-sm text-slate-600"
+              >
+                {renderPulseMessages[renderPulseIndex]}
+              </motion.p>
+            </AnimatePresence>
+            {renderTotalSegments > 0 && (
+              <div className="mt-6 grid gap-2 sm:grid-cols-2">
+                {Array.from({ length: renderTotalSegments }).map((_, idx) => {
+                  const done = idx < renderIndex;
+                  return (
+                    <div
+                      key={`render-shot-${idx + 1}`}
+                      className={`rounded-xl border px-3 py-2 text-xs transition ${
+                        done
+                          ? 'border-accent/35 bg-accent/[0.08] text-accent'
+                          : 'border-slate-200 bg-white text-slate-500'
+                      }`}
+                    >
+                      Shot {idx + 1} {done ? 'ready' : 'queued'}
+                    </div>
+                  );
+                })}
+              </div>
+            )}
+          </motion.section>
+        )}
+
+        {phase === 'done' && finalUrl && (
+          <motion.section
+            key="done"
+            initial={{ opacity: 0, y: 12 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -10 }}
+            className="studio-card p-6 sm:p-8"
+          >
+            <div className="studio-step-title">
+              <span className="studio-step-badge">4</span>
+              <div>
+                <h2 className="font-display text-xl font-semibold text-slate-900 sm:text-2xl">Master cut</h2>
+                <p className="mt-1 text-sm text-slate-600">Stitched with FFmpeg on your API server.</p>
+              </div>
+            </div>
+            <div className="mt-6 overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-md ring-1 ring-slate-200">
+              <video
+                src={finalUrl}
+                controls
+                preload="metadata"
+                className="aspect-video w-full max-h-[min(520px,70vh)] bg-slate-100 object-contain"
+              />
+            </div>
+            <div className="mt-8 flex flex-wrap gap-3">
+              <a href={finalUrl} download="product-showcase-master.mp4" className="studio-btn-primary">
+                Download MP4
+              </a>
+              <button type="button" onClick={reset} className="studio-btn-secondary">
+                New project
+              </button>
+            </div>
+          </motion.section>
+        )}
+      </AnimatePresence>
+
+      {error && (
+        <div
+          className="flex gap-3 rounded-2xl border border-red-300 bg-red-50 px-4 py-4 text-sm text-red-700 shadow-sm"
+          role="alert"
+        >
+          <span className="shrink-0 text-lg leading-none text-red-500" aria-hidden>
+            !
+          </span>
+          <p className="leading-relaxed">{error}</p>
+        </div>
+      )}
+
+      {libraryVideos.length > 0 && (
+        <section className="studio-card p-6 sm:p-8">
+          <div className="studio-step-title">
+            <span className="studio-step-badge">Library</span>
+            <div>
+              <h2 className="font-display text-xl font-semibold text-slate-900 sm:text-2xl">Generated videos</h2>
+              <p className="mt-1 text-sm text-slate-600">
+                Session library of your master cuts. Click any card to preview it above.
+              </p>
+            </div>
+          </div>
+          <div className="mt-6 grid gap-4 sm:grid-cols-2">
+            {libraryVideos.map((item) => {
+              const isActive = finalUrl === item.url;
+              return (
+                <article
+                  key={item.id}
+                  className={`rounded-2xl border p-3 transition ${
+                    isActive
+                      ? 'border-accent/45 bg-accent/[0.08]'
+                      : 'border-slate-200 bg-white hover:border-slate-300'
+                  }`}
+                >
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setFinalUrl(item.url);
+                      setPhase('done');
+                    }}
+                    className="w-full text-left"
+                  >
+                    <video src={item.url} preload="metadata" className="aspect-video w-full rounded-xl bg-slate-100 object-cover" />
+                    <p className="mt-3 text-sm font-semibold text-slate-900">{item.title}</p>
+                    <p className="mt-1 text-xs text-slate-600">
+                      {new Date(item.createdAt).toLocaleString()} · {item.successfulClips}/{item.totalClips} clips merged
+                    </p>
+                  </button>
+                  <div className="mt-3 flex gap-2">
+                    <a
+                      href={item.url}
+                      download={`${item.title.toLowerCase().replace(/\s+/g, '-') || 'product-showcase'}-${item.id}.mp4`}
+                      className="studio-btn-secondary !px-3 !py-2 text-xs"
+                    >
+                      Download
+                    </a>
+                  </div>
+                </article>
+              );
+            })}
+          </div>
+        </section>
+      )}
+    </div>
+  );
+}

frontend/src/index.css

@@ -0,0 +1,212 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    margin: 0;
+    min-height: 100vh;
+    color: #cbd5e1;
+    background: #07090e;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  ::selection {
+    background-color: rgba(212, 175, 55, 0.3);
+    color: #f8fafc;
+  }
+}
+
+@layer components {
+  .studio-page-bg {
+    @apply min-h-screen text-slate-300 antialiased;
+    background-color: #07090e;
+    background-image: radial-gradient(
+        ellipse 85% 65% at 50% -32%,
+        rgba(212, 175, 55, 0.11),
+        transparent 60%
+      ),
+      radial-gradient(circle at 82% 8%, rgba(148, 163, 184, 0.08), transparent 38%),
+      linear-gradient(to bottom, rgba(15, 23, 42, 0.18) 0%, transparent 42%),
+      linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
+    background-size: auto, auto, auto, 52px 52px, 52px 52px;
+    background-attachment: scroll;
+  }
+
+  .studio-shell {
+    @apply mx-auto w-full max-w-6xl px-4 sm:px-6;
+  }
+
+  .studio-header {
+    @apply sticky top-0 z-20 border-b border-slate-200/80;
+    border-color: rgba(148, 163, 184, 0.16);
+    background-color: rgba(9, 12, 18, 0.74);
+    backdrop-filter: blur(14px);
+    box-shadow: 0 1px 0 0 rgba(148, 163, 184, 0.12), 0 20px 35px -34px rgba(0, 0, 0, 0.9);
+  }
+
+  .studio-card {
+    @apply relative overflow-hidden rounded-3xl border bg-white shadow-[0_30px_60px_-42px_rgba(0,0,0,0.95)];
+    border-color: rgba(148, 163, 184, 0.2);
+    background: linear-gradient(
+      145deg,
+      rgba(15, 20, 28, 0.94) 0%,
+      rgba(17, 24, 39, 0.96) 45%,
+      rgba(10, 14, 22, 0.98) 100%
+    );
+  }
+
+  .studio-card > * {
+    @apply relative z-[1];
+  }
+
+  .studio-card::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(135deg, rgba(212, 175, 55, 0.24), rgba(148, 163, 184, 0.13) 38%, transparent 66%);
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+  }
+
+  .studio-card-inner {
+    @apply relative z-[1] p-6 sm:p-8;
+  }
+
+  .studio-step-title {
+    @apply flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-4;
+  }
+
+  .studio-step-badge {
+    @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-xl font-display text-sm font-bold tracking-tight text-accent shadow-inner;
+    background-color: rgba(212, 175, 55, 0.16);
+    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.2), 0 10px 22px -15px rgba(212, 175, 55, 0.8);
+  }
+
+  .studio-label {
+    @apply text-[0.65rem] font-semibold uppercase tracking-[0.14em] text-slate-400;
+  }
+
+  .studio-input {
+    @apply mt-1.5 w-full rounded-xl border px-4 py-2.5 text-sm text-slate-100 transition;
+    border-color: rgba(148, 163, 184, 0.22);
+    background-color: rgba(15, 23, 42, 0.52);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
+    @apply placeholder:text-slate-500;
+    @apply focus:outline-none focus:ring-2 focus:ring-[rgba(212,175,55,0.18)];
+  }
+
+  .studio-input:focus {
+    border-color: rgba(212, 175, 55, 0.5);
+    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.14);
+  }
+
+  .studio-select {
+    @apply studio-input cursor-pointer appearance-none;
+    background-color: rgba(15, 23, 42, 0.52);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.75rem center;
+    background-size: 1rem;
+    padding-right: 2.5rem;
+  }
+
+  .studio-import-panel {
+    @apply relative mt-6 rounded-2xl border p-5 sm:p-6;
+    border-color: rgba(212, 175, 55, 0.22);
+    background: linear-gradient(to bottom right, rgba(212, 175, 55, 0.1), rgba(15, 23, 42, 0.44) 62%);
+    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.08), 0 15px 30px -24px rgba(0, 0, 0, 0.85),
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
+  }
+
+  .studio-btn-primary {
+    @apply inline-flex items-center justify-center rounded-xl bg-accent px-6 py-3 text-sm font-semibold text-ink shadow-glow transition;
+    background-image: linear-gradient(160deg, #e5c96b, #d4af37 58%, #c49a1b);
+    @apply hover:brightness-110 active:scale-[0.98] disabled:pointer-events-none disabled:opacity-45;
+  }
+
+  .studio-btn-secondary {
+    @apply inline-flex items-center justify-center rounded-xl border px-5 py-2.5 text-sm font-medium text-slate-100 transition;
+    border-color: rgba(148, 163, 184, 0.24);
+    background-color: rgba(15, 23, 42, 0.55);
+    @apply hover:border-slate-400 hover:bg-slate-800/80 active:scale-[0.98] disabled:opacity-45;
+  }
+
+  .studio-btn-ghost {
+    @apply text-xs font-medium text-slate-400 underline decoration-slate-500 underline-offset-4 transition hover:text-slate-200;
+  }
+
+  .studio-pill {
+    @apply inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-[0.7rem] font-medium tracking-wide shadow-sm;
+  }
+
+  .studio-progress-track {
+    @apply h-2 overflow-hidden rounded-full bg-slate-300/70 shadow-inner shadow-slate-400/40;
+    border: 1px solid rgba(148, 163, 184, 0.2);
+    background-color: rgba(30, 41, 59, 0.75);
+  }
+
+  .studio-progress-fill {
+    @apply h-full rounded-full bg-gradient-to-r from-accent-dim to-accent shadow-sm;
+  }
+
+  .studio-shot-card {
+    @apply relative rounded-xl border px-4 py-3.5 transition hover:border-slate-400;
+    border-color: rgba(148, 163, 184, 0.18);
+    background: rgba(15, 23, 42, 0.42);
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  }
+
+  .studio-shot-card::before {
+    content: '';
+    @apply absolute left-0 top-3 bottom-3 w-0.5 rounded-full;
+    background-color: rgba(212, 175, 55, 0.4);
+  }
+
+  /* Dark-theme compatibility layer for existing utility classes inside studio surfaces. */
+  .studio-page-bg .text-slate-900 {
+    color: #f1f5f9 !important;
+  }
+
+  .studio-page-bg .text-slate-800 {
+    color: #e2e8f0 !important;
+  }
+
+  .studio-page-bg .text-slate-700,
+  .studio-page-bg .text-slate-600 {
+    color: #94a3b8 !important;
+  }
+
+  .studio-page-bg .text-slate-500 {
+    color: #64748b !important;
+  }
+
+  .studio-page-bg .border-slate-200,
+  .studio-page-bg .border-slate-300,
+  .studio-page-bg .border-slate-400\/80 {
+    border-color: rgba(148, 163, 184, 0.22) !important;
+  }
+
+  .studio-page-bg .bg-white,
+  .studio-page-bg .bg-slate-50,
+  .studio-page-bg .bg-slate-100,
+  .studio-page-bg .bg-slate-100\/70 {
+    background-color: rgba(15, 23, 42, 0.48) !important;
+  }
+
+  .studio-page-bg code {
+    background-color: rgba(30, 41, 59, 0.7) !important;
+    color: #e2e8f0 !important;
+  }
+}

frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

frontend/src/types.ts

@@ -0,0 +1,78 @@
+export interface ContinuityMarkers {
+  start_position: string;
+  end_position: string;
+  start_expression: string;
+  end_expression: string;
+  start_gesture: string;
+  end_gesture: string;
+  location_status: string;
+}
+
+export interface SegmentInfo {
+  segment_number: number;
+  total_segments: number;
+  duration: string;
+  location: string;
+  continuity_markers: ContinuityMarkers;
+}
+
+export interface CharacterDescription {
+  current_state: string;
+  voice_matching: string;
+}
+
+export type SynchronizedActions = Record<string, string>;
+
+export interface ActionTimeline {
+  dialogue: string;
+  synchronized_actions: SynchronizedActions;
+  micro_expressions: string;
+  breathing_rhythm: string;
+  location_transition: string;
+  continuity_checkpoint: string;
+}
+
+export interface SceneContinuity {
+  environment: string;
+  camera_position: string;
+  camera_movement: string;
+  lighting_state: string;
+  background_elements: string;
+  spatial_relationships: string;
+}
+
+export interface VeoSegment {
+  segment_info: SegmentInfo;
+  character_description: CharacterDescription;
+  scene_continuity: SceneContinuity;
+  action_timeline: ActionTimeline;
+}
+
+export interface SegmentsPayload {
+  segments: VeoSegment[];
+  environment?: string;
+  /** Backend concept id, e.g. luxury_studio, ugc_authentic */
+  creative_concept?: string;
+  /** AI-selected segment pacing in seconds (4/6/8). */
+  seconds_per_segment?: 4 | 6 | 8;
+}
+
+export type StreamEvent =
+  | { event: 'start'; total_segments: number; model: string }
+  | {
+      event: 'segment';
+      index: number;
+      total: number;
+      progress: number;
+      segment: VeoSegment;
+    }
+  | { event: 'complete'; message: string; prompt_id: string; payload: SegmentsPayload }
+  | { event: 'error'; message: string; error_type?: string };
+
+export interface ClipMetadata {
+  index: number;
+  startTime: number;
+  endTime: number;
+  type: 'video' | 'image';
+  duration?: number;
+}

frontend/src/vite-env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL?: string;
+  /** When "true" in dev, use VITE_API_BASE_URL in the browser (cross-origin; needs CORS on API). */
+  readonly VITE_PUBLIC_API_IN_DEV?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

frontend/tailwind.config.js

@@ -0,0 +1,45 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Satoshi', 'system-ui', 'sans-serif'],
+        display: ['"Clash Display"', 'Satoshi', 'system-ui', 'sans-serif'],
+      },
+      colors: {
+        ink: '#070708',
+        ink2: '#0e0e12',
+        mist: '#e8e6e3',
+        accent: '#d4af37',
+        'accent-dim': '#9a7b2c',
+        surface: '#121218',
+        line: 'rgba(255,255,255,0.07)',
+      },
+      boxShadow: {
+        card: '0 0 0 1px rgba(255,255,255,0.06), 0 24px 48px -16px rgba(0,0,0,0.65)',
+        'card-hover': '0 0 0 1px rgba(212,175,55,0.12), 0 28px 56px -16px rgba(0,0,0,0.7)',
+        glow: '0 0 40px -8px rgba(212,175,55,0.25)',
+      },
+      backgroundImage: {
+        'radial-header':
+          'radial-gradient(ellipse 80% 60% at 50% -30%, rgba(212,175,55,0.12), transparent 55%)',
+        'grid-fade':
+          'linear-gradient(to bottom, rgba(7,7,8,0.3) 0%, transparent 40%), linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px)',
+      },
+      backgroundSize: {
+        grid: '48px 48px',
+      },
+      animation: {
+        shimmer: 'shimmer 2s ease-in-out infinite',
+      },
+      keyframes: {
+        shimmer: {
+          '0%, 100%': { opacity: '0.45' },
+          '50%': { opacity: '0.9' },
+        },
+      },
+    },
+  },
+  plugins: [],
+};

frontend/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "baseUrl": ".",
+    "paths": { "@/*": ["src/*"] }
+  },
+  "include": ["src", "vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,38 @@
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig(({ mode }) => {
+  const repoRoot = path.resolve(__dirname, '..');
+  const env = loadEnv(mode, repoRoot, '');
+
+  const proxyTarget =
+    env.VITE_DEV_PROXY_TARGET || env.VITE_PROXY_API || 'http://127.0.0.1:4010';
+  const isNgrok = proxyTarget.includes('ngrok');
+
+  const proxyConfig = {
+    target: proxyTarget,
+    changeOrigin: true,
+    configure(proxy: { on: (e: string, fn: (req: unknown, res: unknown) => void) => void }) {
+      if (!isNgrok) return;
+      proxy.on('proxyReq', (proxyReq: { setHeader: (k: string, v: string) => void }) => {
+        proxyReq.setHeader('ngrok-skip-browser-warning', '69420');
+      });
+    },
+  };
+
+  return {
+    envDir: repoRoot,
+    plugins: [react()],
+    resolve: {
+      alias: { '@': path.resolve(__dirname, './src') },
+    },
+    server: {
+      port: 5173,
+      proxy: {
+        '/api': proxyConfig,
+        '/health': proxyConfig,
+      },
+    },
+  };
+});

scripts/run-dev.sh

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+export PYTHONPATH="${ROOT}/backend:${PYTHONPATH:-}"
+
+echo "API:  cd ${ROOT}/backend && python main.py"
+echo "UI:   cd ${ROOT}/frontend && npm run dev"
+echo "Vite loads env from ${ROOT} (repo root)."