@mevdragon/vidfarm-devcli 0.16.0 → 0.17.0

package/dist/src/editor-chat.js

@@ -45,7 +45,7 @@ export function buildTemplateEditorChatSystemPrompt(input) {
         "If the user asks to modify an attached image and the message includes an attachment URL, call POST /api/v1/primitives/images/edit with source_image_url inside payload set to that exact URL and instruction inside payload set to the requested edit.",
         "If the user asks to generate a new AI video from text or reference images, call POST /api/v1/primitives/videos/generate with body { tracer, payload: { prompt, input_references?, duration? } }. AI video duration is seconds; use duration: 4 for a 4-second video and never use duration_ms on /videos/generate. input_references must be direct image asset URLs, not webpage or social post URLs. Use frame_images for exact first/last-frame image-to-video.",
         "If the user asks to render HTML/design into an image, call POST /api/v1/primitives/images/render-html. If the user asks to turn existing media URLs into a slideshow/video, call POST /api/v1/primitives/videos/render-slides. If the user asks to dedupe, camouflage, or apply small zoom/tilt/rotate/filter/tint transforms to an image or video for reuse, call POST /api/v1/primitives/media/dedupe with body { tracer, payload: { source_media_url, media_type?, effects?: { zoom?, tilt?, rotate?, saturation?, speed?, horizontal_flip?, contrast?, brightness?, hue_rotate?, blur? }, tint_color?, tint_opacity?, width?, height?, duration_ms?, object_fit?, background_color?, output_format? }, webhook_url? }. Primitive media utility routes are also allowed directly here, including /videos/trim, /videos/remove-captions, /videos/extract-audio, /videos/probe, /videos/extract-frame, /videos/mute, /videos/replace-audio, /videos/concat, /audio/trim, /audio/probe, /audio/concat, and /audio/normalize. If the user asks to remove burned-in captions, subtitles, or on-screen text from a video, call POST /api/v1/primitives/videos/remove-captions with body { tracer, payload: { source_video_url } } — an async job that returns a durable caption-free MP4 and bills about $0.10 per 30 seconds of source video. Caption removal is capped at ~15 minutes of source and must NEVER be used on long-form video: when the user wants short clips out of a long video (a podcast, stream VOD, webinar, or a YouTube/TikTok/IG/X URL), call POST /clips/scan instead with body { source_url | temp_file_id | s3_key, prompt, ranges?: [\"MM:SS-MM:SS\"], target_duration_sec?, aspect?: \"9:16\"|\"16:9\"|\"4:3\"|\"1:1\", avoid_text?, tracer? } — target_duration_sec is a SOFT range (30 → 20-40s), ranges restrict the hunt to those source windows (big cost saver), aspect crops every clip, and avoid_text prefers text-free scenes via scene SELECTION (never caption removal on the source). The hunt is async (202 + scan_id): poll GET /clips/scan/:scanId, then browse GET /clips/feed?source=<source_video_id> or POST /clips/search. Hunts bill AWS compute only — the AI tagging runs on the user's own saved provider keys. To erase captions from a finished HUNTED clip, pass that short mp4 to /videos/remove-captions afterwards.",
-        "SPEECH PRIMITIVES (TTS/STT) are first-class here. VOICEOVER / NARRATION: when the user wants a script, hook, caption, or dub read aloud as AI audio, call POST /api/v1/primitives/audio/speech with body { tracer, payload: { text, voice?, instructions?, provider?, model?, output_format? } } — instructions is a free-form voice-STYLE prompt (tone, pacing, accent, emotion, persona; e.g. 'calm warm bedtime narrator' or 'excited sports announcer, fast paced'), and voice picks a provider preset (OpenAI: alloy/ash/coral/...; Gemini: Kore/Puck/Charon/...). When sending a voice you may omit provider — it is inferred from the voice preset; a voice paired with the WRONG provider (e.g. voice 'Kore' with provider 'openai') is rejected with a 400, so never mix families. The finished job returns a durable audio URL — place it on the timeline with editor_action add_layer (kind=audio, src=that URL), typically starting where the narration should begin. TRANSCRIPTION: when the user wants a transcript, subtitles/captions from speech, a translation source, or to know who says what, call POST /api/v1/primitives/audio/transcribe with body { tracer, payload: { source_url, diarize?, language?, prompt? } } — source_url may be a VIDEO or AUDIO URL (video audio is demuxed automatically; pick the fork's source via GET /api/v1/compositions/:forkId/remove-video-captions first when transcribing the current composition). One job returns BOTH formats: a simple subtitle version (plain transcript text + timed SRT cues, stored as transcript.txt/transcript.srt) and an advanced multi-speaker version (speaker-attributed timed segments in output.segments and transcript.json) for multi-narration sources like podcasts and interviews. diarize defaults to true and speaker attribution needs a Gemini key — openai/openrouter keys degrade to a plain single-speaker transcript. For transcript-grounded caption work on THIS fork, the read-only video_context tool may already contain the decompose-time transcript; prefer it before running a new billable-key transcription, and use /audio/transcribe for other URLs, multi-speaker attribution, or SRT output.",
+        "SPEECH PRIMITIVES (TTS/STT) are first-class here. VOICEOVER / NARRATION: when the user wants a script, hook, caption, or dub read aloud as AI audio, call POST /api/v1/primitives/audio/speech with body { tracer, payload: { text, voice?, instructions?, provider?, model?, output_format? } } — instructions is a free-form voice-STYLE prompt (tone, pacing, accent, emotion, persona; e.g. 'calm warm bedtime narrator' or 'excited sports announcer, fast paced'), and voice picks a provider preset (OpenAI: alloy/ash/coral/...; Gemini: Kore/Puck/Charon/...). When sending a voice you may omit provider — it is inferred from the voice preset; a voice paired with the WRONG provider (e.g. voice 'Kore' with provider 'openai') is rejected with a 400, so never mix families. The finished job returns a durable audio URL — place it on the timeline with editor_action add_layer (kind=audio, src=that URL), typically starting where the narration should begin. TRANSCRIPTION: when the user wants a transcript, subtitles/captions from speech, a translation source, or to know who says what, call POST /api/v1/primitives/audio/transcribe with body { tracer, payload: { source_url, diarize?, language?, prompt? } } — source_url may be a VIDEO or AUDIO URL (video audio is demuxed automatically; pick the fork's source via GET /api/v1/compositions/:forkId/remove-video-captions first when transcribing the current composition). One job returns BOTH formats: a simple subtitle version (plain transcript text + timed SRT cues, stored as transcript.txt/transcript.srt) and an advanced multi-speaker version (speaker-attributed timed segments in output.segments and transcript.json) for multi-narration sources like podcasts and interviews. diarize defaults to true and speaker attribution needs a Gemini key — openai/openrouter keys degrade to a plain single-speaker transcript. For transcript-grounded caption work on THIS fork, the read-only video_context tool may already contain the decompose-time transcript; prefer it before running a new billable-key transcription, and use /audio/transcribe for other URLs, multi-speaker attribution, or SRT output. REGENERATE / REVOICE: when the user wants the SAME speaker to say DIFFERENT words (reword the narration, fix a line, change an offer or CTA, redub in the original voice), call POST /api/v1/primitives/audio/regenerate-speech with body { tracer, payload: { source_url (video or audio; video audio is demuxed), rewrite_instruction (how to reword the original transcript) OR text (the exact new script — one of the two is required), voice?, instructions?, provider?, model?, language?, output_format? } }. One job listens to the source, profiles the speaker's voice, rewords the script, and returns a durable audio URL spoken by the CLOSEST PRESET voice with a style prompt matched to the speaker (result fields: audioUrl, script, original_transcript, voice_profile, voice_match). Voice profiling needs a saved Gemini key — with only openai/openrouter keys the job degrades to transcript-only rewording with a default or explicitly passed voice and voice_match 'none'. IMPORTANT HONESTY RULE: OpenAI and Gemini APIs cannot clone voice identity (preset voices only), so always tell the user the regenerated audio APPROXIMATES the original voice rather than clones it. To swap the regenerated audio into the composition, mute the original span (/videos/mute or volume/muted on the layer) and place the new audio with editor_action add_layer (kind=audio, src=audioUrl).",
         "Brainstorm primitives are also available directly here. If the user explicitly asks for hooks, angles, awareness-stage advice, a cold-start strategy questionnaire, or product-placement opportunities in a video, call the matching brainstorm primitive immediately instead of brainstorming in chat from memory. Use POST /api/v1/primitives/brainstorm/coldstart with body { tracer, payload: { user_message }, webhook_url? } when the user is clueless and needs foundational strategy questions. Use /brainstorm/awareness_stages with body { tracer, payload: { offer_description }, webhook_url? } when they are unsure what type of ads to make. Use /brainstorm/angles with body { tracer, payload: { offer_description, problem_awareness, solution_awareness }, webhook_url? } when they want persuasive ad angles; problem_awareness must be problem_unaware or problem_aware, and solution_awareness must be solution_unaware or solution_aware. Use /brainstorm/hooks with body { tracer, payload: { offer_description }, webhook_url? } when they are stuck on openings and want many hooks.",
         "Product placement is a first-class brainstorm primitive, just like angles and hooks. When the user asks to identify product-placement opportunities in a video, or to repurpose a video into a native ad for their product, prefer POST /api/v1/primitives/brainstorm/product_placement with body { tracer, payload: { source_video_url, offer_description }, webhook_url? }. source_video_url is the exact video to analyze — for the current composition, first call GET /api/v1/compositions/:forkId/remove-video-captions to pick the correct source (the ORIGINAL uploaded video vs the DECOMPOSED, caption-free video), then pass that URL. offer_description is the user's product/offer. This primitive watches the video and returns timestamped, native placement opportunities. It prefers a Gemini key for video understanding.",
         "BEFORE calling /brainstorm/product_placement for the CURRENT composition, first call the product_placement_context tool (or GET /api/v1/compositions/:forkId/product-placement.json). Decompose already scouted product-AGNOSTIC placement surfaces for this fork — real, grounded moments (timestamp, surface_type, surface_note, best_for, why_it_works). Use those surfaces to ground your answer and to seed the primitive: fold the strongest surfaces into offer_description (for example append 'Known native placement surfaces: 0:04 empty desk prop; 0:12 phone screen swap') so the product-specific pass builds on grounded moments instead of re-watching blind. If the user just wants a quick conversational take on where their product could go, the surfaces from product_placement_context are often enough to answer directly without the billable primitive.",
@@ -469,7 +469,7 @@ export const EDITOR_CHAT_SKILL_PACKS = [
     { name: "hyperframes-animation", summary: "motion rules catalog, scene blueprints, transition doctrine, runtime adapters" },
     { name: "hyperframes-keyframes", summary: "seek-safe keyframe/CSS animation patterns" },
     { name: "hyperframes-creative", summary: "design specs, palettes, typography, house style, narration craft" },
-    { name: "vidfarm-media", summary: "narration TTS/STT, BGM/SFX/media resolution through vidfarm primitives" },
+    { name: "vidfarm-media", summary: "narration TTS/STT, voice-matched speech regeneration (same speaker, new words), BGM/SFX/media resolution through vidfarm primitives" },
     { name: "embedded-captions", summary: "caption identity catalog + subject-occlusion caption pipeline" },
     { name: "talking-head-recut", summary: "timed graphic overlay cards on existing footage" },
     { name: "product-launch-video", summary: "product/launch promo workflow (time-coded shot sequences)" },

package/dist/src/frontend/homepage-client.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import "./sentry.js";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { hydrateRoot } from "react-dom/client";
 import * as Sentry from "@sentry/react";
 import { useStore } from "zustand";
@@ -57,6 +57,21 @@ function filterTemplates(input) {
         return matchesSearch && matchesBookmarks;
     });
 }
+// The swipe API serializes snake_case; the store/view use camelCase SwipeCard.
+function mapSwipeCard(raw) {
+    return {
+        id: String(raw?.id ?? ""),
+        templateId: String(raw?.template_id ?? ""),
+        forkId: raw?.fork_id ?? null,
+        sourceTitle: raw?.source_title ?? null,
+        title: String(raw?.title ?? raw?.source_title ?? "Untitled"),
+        caption: String(raw?.caption ?? ""),
+        pinnedComment: raw?.pinned_comment ?? null,
+        previewUrl: raw?.preview_url ?? null,
+        durationSeconds: typeof raw?.duration_seconds === "number" ? raw.duration_seconds : null,
+        status: String(raw?.status ?? "ready")
+    };
+}
 function HomepageClientApp({ boot }) {
     const store = useMemo(() => createHomepageStore(boot), [boot]);
     const templates = useStore(store, (state) => state.templates);
@@ -69,6 +84,15 @@ function HomepageClientApp({ boot }) {
     const popularTemplates = useStore(store, (state) => state.popularTemplates);
     const popularLoading = useStore(store, (state) => state.popularLoading);
     const popularError = useStore(store, (state) => state.popularError);
+    const swipeStack = useStore(store, (state) => state.swipeStack);
+    const swipeLoading = useStore(store, (state) => state.swipeLoading);
+    const swipeLoaded = useStore(store, (state) => state.swipeLoaded);
+    const swipeError = useStore(store, (state) => state.swipeError);
+    const swipeCustomizing = useStore(store, (state) => state.swipeCustomizing);
+    const swipeTargetDepth = useStore(store, (state) => state.swipeTargetDepth);
+    const swipeProductSet = useStore(store, (state) => state.swipeProductSet);
+    const swipeRefilling = useStore(store, (state) => state.swipeRefilling);
+    const swipeFillingRef = useRef(false);
     const [bookmarksReady, setBookmarksReady] = useState(false);
     const visibleTemplates = useMemo(() => filterTemplates({ templates, searchQuery, bookmarksOnly, bookmarks }), [templates, searchQuery, bookmarksOnly, bookmarks]);
     useEffect(() => {
@@ -170,6 +194,142 @@ function HomepageClientApp({ boot }) {
         }, 8000);
         return () => window.clearInterval(timer);
     }, [hasProcessingPopular, refreshPopular]);
+    // Swipe deck: the customer's own product, auto-recut from decomposed templates.
+    const refreshSwipeStack = useCallback(async (options) => {
+        if (options?.showLoading) {
+            store.getState().setSwipeLoading(true);
+        }
+        try {
+            const response = await fetch("/discover/swipe/stack", {
+                credentials: "same-origin",
+                cache: "no-store",
+                headers: { Accept: "application/json" }
+            });
+            const payload = await response.json().catch(() => ({}));
+            if (!response.ok) {
+                throw new Error(typeof payload.error === "string" && payload.error ? payload.error : "Unable to load your swipe deck.");
+            }
+            const stack = Array.isArray(payload.stack) ? payload.stack.map(mapSwipeCard) : [];
+            store.getState().setSwipeStack(stack, {
+                customizing: typeof payload.customizing === "number" ? payload.customizing : 0,
+                targetDepth: typeof payload.target_depth === "number" ? payload.target_depth : undefined,
+                productSet: typeof payload.product_description_set === "boolean" ? payload.product_description_set : undefined
+            });
+        }
+        catch (fetchError) {
+            if (options?.showLoading) {
+                store.getState().setSwipeError(fetchError instanceof Error ? fetchError.message : "Unable to load your swipe deck.");
+            }
+            else {
+                debugError("homepage.swipe_refresh_failed", { message: fetchError instanceof Error ? fetchError.message : String(fetchError) });
+            }
+        }
+    }, [store]);
+    // Progressively customize until the buffer hits target (server-capped), one
+    // per request. Each finished variant streams into the deck as it lands.
+    const fillSwipeDeck = useCallback(async () => {
+        if (swipeFillingRef.current)
+            return;
+        swipeFillingRef.current = true;
+        store.getState().setSwipeRefilling(true);
+        try {
+            for (let i = 0; i < 8; i += 1) {
+                const response = await fetch("/discover/swipe/refill", {
+                    method: "POST",
+                    credentials: "same-origin",
+                    headers: { Accept: "application/json" }
+                });
+                const payload = await response.json().catch(() => ({}));
+                if (!response.ok) {
+                    if (payload?.need_product_description) {
+                        store.getState().setSwipeMeta({ productSet: false });
+                    }
+                    else {
+                        store.getState().setSwipeError(typeof payload.error === "string" && payload.error ? payload.error : "Customization failed.");
+                    }
+                    break;
+                }
+                if (payload.filled && payload.record) {
+                    store.getState().appendSwipeCard(mapSwipeCard(payload.record));
+                }
+                if (!payload.filled) {
+                    break; // at_target or no_eligible
+                }
+            }
+        }
+        catch (fillError) {
+            debugError("homepage.swipe_refill_failed", { message: fillError instanceof Error ? fillError.message : String(fillError) });
+        }
+        finally {
+            swipeFillingRef.current = false;
+            store.getState().setSwipeRefilling(false);
+            // Re-sync the customizing/buffered counts after filling settles.
+            void refreshSwipeStack();
+        }
+    }, [store, refreshSwipeStack]);
+    // First open of Swipe → load the current deck, then top it up.
+    useEffect(() => {
+        if (view !== "swipe" || swipeLoaded) {
+            return;
+        }
+        void (async () => {
+            await refreshSwipeStack({ showLoading: true });
+            const state = store.getState();
+            if (state.swipeProductSet && state.swipeStack.length < state.swipeTargetDepth) {
+                void fillSwipeDeck();
+            }
+        })();
+    }, [view, swipeLoaded, refreshSwipeStack, fillSwipeDeck, store]);
+    const handleSwipeApprove = useCallback(async (id) => {
+        try {
+            const response = await fetch(`/discover/swipe/${encodeURIComponent(id)}/approve`, {
+                method: "POST",
+                credentials: "same-origin",
+                headers: { Accept: "application/json" }
+            });
+            const payload = await response.json().catch(() => ({}));
+            if (!response.ok) {
+                // The server retired this card (built by an older customize pipeline) —
+                // drop it from the deck and pull a fresh one instead of jamming.
+                if (payload && payload.superseded) {
+                    store.getState().removeSwipeCard(id);
+                    void fillSwipeDeck();
+                    return { ok: true };
+                }
+                return { ok: false, error: typeof payload.error === "string" && payload.error ? payload.error : "Unable to approve." };
+            }
+            store.getState().removeSwipeCard(id);
+            void fillSwipeDeck(); // +1 fresh at the tail
+            return { ok: true };
+        }
+        catch (approveError) {
+            return { ok: false, error: approveError instanceof Error ? approveError.message : "Unable to approve." };
+        }
+    }, [store, fillSwipeDeck]);
+    const handleSwipeReject = useCallback(async (id) => {
+        try {
+            const response = await fetch(`/discover/swipe/${encodeURIComponent(id)}/reject`, {
+                method: "POST",
+                credentials: "same-origin",
+                headers: { Accept: "application/json" }
+            });
+            const payload = await response.json().catch(() => ({}));
+            if (!response.ok) {
+                if (payload && payload.superseded) {
+                    store.getState().removeSwipeCard(id);
+                    void fillSwipeDeck();
+                    return { ok: true };
+                }
+                return { ok: false, error: typeof payload.error === "string" && payload.error ? payload.error : "Unable to reject." };
+            }
+            store.getState().removeSwipeCard(id);
+            void fillSwipeDeck(); // +1 fresh at the tail
+            return { ok: true };
+        }
+        catch (rejectError) {
+            return { ok: false, error: rejectError instanceof Error ? rejectError.message : "Unable to reject." };
+        }
+    }, [store, fillSwipeDeck]);
     const handleDeleteTemplate = useCallback(async (templateId) => {
         try {
             const response = await fetch(`/discover/templates/${encodeURIComponent(templateId)}`, {
@@ -268,7 +428,7 @@ function HomepageClientApp({ boot }) {
             return { ok: false, error: submitError instanceof Error ? submitError.message : "Unable to add that video." };
         }
     }, [refreshFeed]);
-    return (_jsx(HomepageShell, { account: boot.account, templates: templates, visibleTemplates: visibleTemplates, searchQuery: searchQuery, bookmarksOnly: bookmarksOnly, bookmarks: bookmarks, loading: loading, error: error, view: view, popularTemplates: popularTemplates, popularLoading: popularLoading, popularError: popularError, skillEndpointPrefix: boot.skillEndpointPrefix, onSearchQueryChange: (value) => store.getState().setSearchQuery(value), onBookmarksOnlyChange: (value) => store.getState().setBookmarksOnly(value), onViewChange: (value) => store.getState().setView(value), onToggleBookmark: (templateId) => store.getState().toggleBookmark(templateId), onAddTemplate: handleAddTemplate, onDeleteTemplate: handleDeleteTemplate }));
+    return (_jsx(HomepageShell, { account: boot.account, templates: templates, visibleTemplates: visibleTemplates, searchQuery: searchQuery, bookmarksOnly: bookmarksOnly, bookmarks: bookmarks, loading: loading, error: error, view: view, popularTemplates: popularTemplates, popularLoading: popularLoading, popularError: popularError, swipeStack: swipeStack, swipeLoading: swipeLoading, swipeLoaded: swipeLoaded, swipeError: swipeError, swipeCustomizing: swipeCustomizing, swipeTargetDepth: swipeTargetDepth, swipeProductSet: swipeProductSet, swipeRefilling: swipeRefilling, skillEndpointPrefix: boot.skillEndpointPrefix, onSearchQueryChange: (value) => store.getState().setSearchQuery(value), onBookmarksOnlyChange: (value) => store.getState().setBookmarksOnly(value), onViewChange: (value) => store.getState().setView(value), onToggleBookmark: (templateId) => store.getState().toggleBookmark(templateId), onAddTemplate: handleAddTemplate, onDeleteTemplate: handleDeleteTemplate, onSwipeApprove: handleSwipeApprove, onSwipeReject: handleSwipeReject }));
 }
 const boot = readBoot();
 const root = document.getElementById("homepage-root");

package/dist/src/frontend/homepage-store.js

@@ -12,6 +12,14 @@ export function createHomepageStore(boot) {
         popularLoading: false,
         popularLoaded: false,
         popularError: null,
+        swipeStack: [],
+        swipeLoading: false,
+        swipeLoaded: false,
+        swipeError: null,
+        swipeCustomizing: 0,
+        swipeTargetDepth: 5,
+        swipeProductSet: true,
+        swipeRefilling: false,
         setTemplates: (templates) => set({ templates, loading: false, error: null }),
         setSearchQuery: (searchQuery) => set({ searchQuery }),
         setBookmarksOnly: (bookmarksOnly) => set({ bookmarksOnly }),
@@ -31,7 +39,28 @@ export function createHomepageStore(boot) {
         setView: (view) => set({ view }),
         setPopularTemplates: (popularTemplates) => set({ popularTemplates, popularLoading: false, popularLoaded: true, popularError: null }),
         setPopularLoading: (popularLoading) => set({ popularLoading }),
-        setPopularError: (popularError) => set({ popularError, popularLoading: false })
+        setPopularError: (popularError) => set({ popularError, popularLoading: false }),
+        setSwipeLoading: (swipeLoading) => set({ swipeLoading }),
+        setSwipeError: (swipeError) => set({ swipeError, swipeLoading: false }),
+        setSwipeStack: (swipeStack, meta) => set({
+            swipeStack,
+            swipeLoading: false,
+            swipeLoaded: true,
+            swipeError: null,
+            ...(meta?.customizing !== undefined ? { swipeCustomizing: meta.customizing } : {}),
+            ...(meta?.targetDepth !== undefined ? { swipeTargetDepth: meta.targetDepth } : {}),
+            ...(meta?.productSet !== undefined ? { swipeProductSet: meta.productSet } : {})
+        }),
+        setSwipeMeta: (meta) => set({
+            ...(meta.customizing !== undefined ? { swipeCustomizing: meta.customizing } : {}),
+            ...(meta.targetDepth !== undefined ? { swipeTargetDepth: meta.targetDepth } : {}),
+            ...(meta.productSet !== undefined ? { swipeProductSet: meta.productSet } : {})
+        }),
+        appendSwipeCard: (card) => set((state) => (state.swipeStack.some((existing) => existing.id === card.id)
+            ? {}
+            : { swipeStack: [...state.swipeStack, card] })),
+        removeSwipeCard: (id) => set((state) => ({ swipeStack: state.swipeStack.filter((card) => card.id !== id) })),
+        setSwipeRefilling: (swipeRefilling) => set({ swipeRefilling })
     }));
 }
 //# sourceMappingURL=homepage-store.js.map

package/dist/src/frontend/homepage-view.js

@@ -485,7 +485,7 @@ function AddTemplateModal(input) {
 // grouped under their editorial category headings and ordered by the server.
 function PopularTemplates(input) {
     if (input.loading) {
-        return _jsx("ul", { className: "discover-list", children: _jsx("li", { className: "empty-state discover-loading-card", children: "Loading popular formats\u2026" }) });
+        return _jsx("ul", { className: "discover-list", children: _jsx("li", { className: "empty-state discover-loading-card", children: "Loading categories\u2026" }) });
     }
     if (input.error) {
         return _jsx("ul", { className: "discover-list", children: _jsx("li", { className: "empty-state discover-loading-card", children: input.error }) });
@@ -495,7 +495,7 @@ function PopularTemplates(input) {
         ? input.templates.filter((template) => `${template.title} ${template.templateId} ${template.popularGroup ?? ""}`.toLowerCase().includes(query))
         : input.templates;
     if (filtered.length === 0) {
-        return (_jsx("ul", { className: "discover-list", children: _jsx("li", { className: "empty-state discover-loading-card", children: query ? "No popular formats match your search." : "No popular formats yet." }) }));
+        return (_jsx("ul", { className: "discover-list", children: _jsx("li", { className: "empty-state discover-loading-card", children: query ? "No categories match your search." : "No categories yet." }) }));
     }
     // Group by popularGroup, preserving the server's rank order (already sorted).
     const groups = [];
@@ -510,6 +510,112 @@ function PopularTemplates(input) {
     }
     return (_jsx("div", { className: "discover-popular", children: groups.map((group) => (_jsxs("section", { className: "discover-popular-group", children: [_jsx("h3", { className: "discover-popular-group-label", children: group.label }), _jsx("ul", { className: "discover-list", children: group.items.map((template) => (_jsx(TemplateCard, { template: template, isBookmarked: input.bookmarks.has(template.templateId), onToggleBookmark: input.onToggleBookmark, onOpenPreview: input.onOpenPreview, onDeleteTemplate: input.onDeleteTemplate, accountUserId: input.accountUserId }, template.templateId))) })] }, group.label))) }));
 }
+// Tinder-style deck of the customer's own product, auto-recut from decomposed
+// templates. Previews are LIVE HyperFrames compositions in an iframe (no baked
+// MP4) — only the top two cards mount an iframe (the concurrent-decoder ceiling);
+// the rest are static placeholders. Drag or tap the buttons to approve/reject.
+function SwipeDeck(input) {
+    const [drag, setDrag] = useState(null);
+    const [flyOut, setFlyOut] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [actionError, setActionError] = useState(null);
+    // Deck previews start muted (the only autoplay browsers allow); this toggle
+    // is the user gesture that unlocks audio. The same-origin preview iframes
+    // poll these window flags (see injectSwipePreviewFit) — the top-card id gate
+    // keeps the preloaded second iframe silent so audio never doubles.
+    const [soundOn, setSoundOn] = useState(false);
+    const topCardId = input.stack.length ? input.stack[0].id : null;
+    useEffect(() => {
+        window.__VF_SWIPE_SOUND__ = soundOn;
+        window.__VF_SWIPE_SOUND_TOP__ = topCardId;
+        return () => {
+            window.__VF_SWIPE_SOUND__ = false;
+            window.__VF_SWIPE_SOUND_TOP__ = null;
+        };
+    }, [soundOn, topCardId]);
+    const startRef = useRef(null);
+    const THRESHOLD = 110;
+    const decide = (card, dir) => {
+        if (!card || busy)
+            return;
+        setBusy(true);
+        setActionError(null);
+        setFlyOut({ id: card.id, dir });
+        // Let the fly-out animation play, then commit (parent removes the card and
+        // refills the deck).
+        window.setTimeout(async () => {
+            const action = dir === "right" ? input.onApprove : input.onReject;
+            try {
+                const result = await action?.(card.id);
+                if (result && !result.ok)
+                    setActionError(result.error ?? "Action failed.");
+            }
+            finally {
+                setFlyOut(null);
+                setDrag(null);
+                startRef.current = null;
+                setBusy(false);
+            }
+        }, 260);
+    };
+    if (!input.isLoggedIn) {
+        return (_jsxs("div", { className: "swipe-empty", children: [_jsx("p", { className: "swipe-empty-title", children: "Swipe is for your product" }), _jsx("p", { className: "swipe-empty-sub", children: "Log in to auto-generate ads from viral templates and swipe to approve." }), _jsx("a", { className: "swipe-empty-cta", href: "/login", children: "Log in" })] }));
+    }
+    if (!input.productSet) {
+        return (_jsxs("div", { className: "swipe-empty", children: [_jsx("p", { className: "swipe-empty-title", children: "Tell us about your product" }), _jsx("p", { className: "swipe-empty-sub", children: "Swipe auto-recuts viral templates into ads for your product. Add a product / offer description in Settings to start the deck." }), _jsx("a", { className: "swipe-empty-cta", href: "/settings", children: "Open Settings" })] }));
+    }
+    if (input.error) {
+        return (_jsxs("div", { className: "swipe-empty", children: [_jsx("p", { className: "swipe-empty-title", children: "Couldn't load your deck" }), _jsx("p", { className: "swipe-empty-sub", children: input.error })] }));
+    }
+    if (input.stack.length === 0) {
+        if (input.loading || input.customizing > 0 || input.refilling) {
+            return (_jsxs("div", { className: "swipe-empty", children: [_jsx("div", { className: "swipe-spinner", "aria-hidden": "true" }), _jsx("p", { className: "swipe-empty-title", children: "Customizing fresh clips\u2026" }), _jsx("p", { className: "swipe-empty-sub", children: "Recutting viral templates into ads for your product." })] }));
+        }
+        return (_jsxs("div", { className: "swipe-empty", children: [_jsx("p", { className: "swipe-empty-title", children: "You're all caught up" }), _jsx("p", { className: "swipe-empty-sub", children: "No more templates to customize right now. Check back as new ones are added." })] }));
+    }
+    const visible = input.stack.slice(0, 4);
+    const top = visible[0];
+    return (_jsxs("div", { className: "swipe-deck-wrap", children: [_jsxs("div", { className: "swipe-deck-row", children: [_jsx("button", { type: "button", className: "swipe-action swipe-action-reject", disabled: busy, onClick: () => decide(top, "left"), "aria-label": "Reject", children: "\u2715" }), _jsxs("div", { className: "swipe-deck", children: [_jsx("button", { type: "button", className: "swipe-sound", onClick: () => setSoundOn((value) => !value), "aria-label": soundOn ? "Mute preview" : "Play preview with sound", "aria-pressed": soundOn, title: soundOn ? "Mute" : "Sound on", children: soundOn ? "🔊" : "🔇" }), visible.map((card, index) => {
+                                const isTop = index === 0;
+                                const isFlying = flyOut?.id === card.id;
+                                const isDragging = isTop && drag?.id === card.id;
+                                const useIframe = index <= 1 && Boolean(card.previewUrl);
+                                const dx = isDragging ? drag.dx : 0;
+                                const dy = isDragging ? drag.dy : 0;
+                                let transform;
+                                let transition;
+                                if (isFlying) {
+                                    transform = `translate(${flyOut.dir === "right" ? 130 : -130}%, ${dy}px) rotate(${flyOut.dir === "right" ? 22 : -22}deg)`;
+                                    transition = "transform 0.26s ease-in";
+                                }
+                                else if (isTop) {
+                                    transform = `translate(${dx}px, ${dy * 0.25}px) rotate(${dx / 22}deg)`;
+                                    transition = isDragging ? "none" : "transform 0.2s ease";
+                                }
+                                else {
+                                    transform = `translateY(${index * 12}px) scale(${1 - index * 0.04})`;
+                                    transition = "transform 0.2s ease";
+                                }
+                                const hint = isDragging ? (drag.dx > 40 ? "approve" : drag.dx < -40 ? "reject" : null) : null;
+                                return (_jsxs("div", { className: "swipe-card", style: { transform, transition, zIndex: 100 - index }, onPointerDown: isTop && !busy ? (event) => {
+                                        startRef.current = { x: event.clientX, y: event.clientY };
+                                        event.currentTarget.setPointerCapture?.(event.pointerId);
+                                    } : undefined, onPointerMove: isTop && !busy ? (event) => {
+                                        if (!startRef.current)
+                                            return;
+                                        setDrag({ id: card.id, dx: event.clientX - startRef.current.x, dy: event.clientY - startRef.current.y });
+                                    } : undefined, onPointerUp: isTop && !busy ? () => {
+                                        const moved = drag?.id === card.id ? drag.dx : 0;
+                                        startRef.current = null;
+                                        if (moved > THRESHOLD)
+                                            decide(card, "right");
+                                        else if (moved < -THRESHOLD)
+                                            decide(card, "left");
+                                        else
+                                            setDrag(null);
+                                    } : undefined, onPointerCancel: isTop ? () => { startRef.current = null; setDrag(null); } : undefined, children: [useIframe ? (_jsx("iframe", { className: "swipe-card-preview", src: card.previewUrl ?? undefined, title: card.title, loading: "lazy", scrolling: "no", allow: "autoplay", style: { pointerEvents: "none" } })) : (_jsx("div", { className: "swipe-card-fallback", children: _jsx("span", { children: card.title }) })), _jsxs("div", { className: "swipe-card-overlay", children: [_jsx("div", { className: "swipe-card-title", children: card.title }), card.caption ? _jsx("div", { className: "swipe-card-caption", children: card.caption }) : null] }), hint === "approve" ? _jsx("div", { className: "swipe-stamp swipe-stamp-yes", children: "Approve" }) : null, hint === "reject" ? _jsx("div", { className: "swipe-stamp swipe-stamp-no", children: "Reject" }) : null] }, card.id));
+                            })] }), _jsx("button", { type: "button", className: "swipe-action swipe-action-approve", disabled: busy, onClick: () => decide(top, "right"), "aria-label": "Approve", children: "\u2713" })] }), _jsx("div", { className: "swipe-status", children: input.customizing > 0 || input.refilling ? "Customizing more…" : `${input.stack.length} ready` }), actionError ? _jsx("div", { className: "swipe-action-error", children: actionError }) : null] }));
+}
 export function HomepageShell(input) {
     const showEmpty = !input.loading && !input.error && input.templates.length > 0 && input.visibleTemplates.length === 0;
     const [previewTemplate, setPreviewTemplate] = useState(null);
@@ -518,9 +624,10 @@ export function HomepageShell(input) {
     // curated static picks fetched from /discover/popular. View state lives in the
     // store so the client can lazily load the Popular set on first open.
     const isPopular = input.view === "popular";
+    const isSwipe = input.view === "swipe";
     const setView = (value) => input.onViewChange?.(value);
     const searchPlaceholder = isPopular
-        ? "Search popular formats"
+        ? "Search categories"
         : input.loading || input.error
             ? "Search Templates"
             : `Search ${input.visibleTemplates.length} Template${input.visibleTemplates.length === 1 ? "" : "s"}`;
@@ -531,7 +638,7 @@ export function HomepageShell(input) {
     // disabled textarea and a "Log in to chat" CTA in the same slot.
     const hasChatRail = true;
     const isChatEnabled = input.account.isLoggedIn;
-    return (_jsxs("section", { className: `frame discover-frame${hasChatRail ? " has-chat-rail" : ""}`, children: [_jsxs("header", { className: "topbar", children: [_jsx(BrandLockup, { account: input.account }), _jsx("div", { className: "topbar-actions", children: _jsx(PrimaryNav, { account: input.account }) })] }), _jsx("div", { className: "frame-body", children: _jsxs("section", { className: "discover-shell", children: [_jsxs("div", { className: "discover-filter-bar", role: "toolbar", "aria-label": "Composition filters", children: [_jsxs("div", { className: "view-toggle discover-view-toggle", role: "tablist", "aria-label": "Discover view", children: [_jsx("button", { type: "button", className: `view-toggle-tab${!isPopular ? " is-active" : ""}`, role: "tab", "aria-selected": !isPopular, onClick: () => setView("feed"), children: "Feed" }), _jsx("button", { type: "button", className: `view-toggle-tab${isPopular ? " is-active" : ""}`, role: "tab", "aria-selected": isPopular, onClick: () => setView("popular"), children: "Popular" })] }), _jsx(DiscoverMuteToggle, {}), _jsxs("div", { className: "discover-filter-search search-field", children: [_jsx("span", { className: "search-icon", "aria-hidden": "true", children: _jsx(SearchIcon, {}) }), _jsx("input", { id: "search", type: "search", placeholder: searchPlaceholder, autoComplete: "off", value: input.searchQuery, onChange: (event) => input.onSearchQueryChange?.(event.target.value) })] }), !isPopular ? (_jsxs("label", { className: "discover-filter-toggle", htmlFor: "bookmarks-only", "data-active": input.bookmarksOnly ? "true" : "false", children: [_jsx("span", { className: "discover-filter-toggle-label", children: "Saved" }), _jsxs("span", { className: "switch-shell", "data-active": input.bookmarksOnly ? "true" : "false", children: [_jsx("input", { id: "bookmarks-only", className: "switch-input", type: "checkbox", checked: input.bookmarksOnly, onChange: (event) => input.onBookmarksOnlyChange?.(event.target.checked) }), _jsx("span", { className: "switch-knob" })] })] })) : null, input.account.isLoggedIn ? (_jsx("button", { type: "button", className: "discover-add-template-button", onClick: () => setIsAddTemplateOpen(true), children: "Add Template" })) : (_jsx("a", { className: "discover-add-template-button", href: "/login", children: "Add Template" }))] }), _jsx("section", { className: "discover-results", children: _jsx("div", { className: "discover-results-scroll", children: _jsx("div", { className: "discover-list-scroll", children: isPopular ? (_jsx(PopularTemplates, { templates: input.popularTemplates, loading: input.popularLoading, error: input.popularError, searchQuery: input.searchQuery, bookmarks: input.bookmarks, onToggleBookmark: input.onToggleBookmark, onOpenPreview: setPreviewTemplate, onDeleteTemplate: input.onDeleteTemplate, accountUserId: input.account.userId })) : (_jsxs(_Fragment, { children: [_jsx("ul", { className: "discover-list", id: "template-list", children: input.loading ? (_jsx("li", { className: "empty-state discover-loading-card", children: "Loading compositions..." })) : input.error ? (_jsx("li", { className: "empty-state discover-loading-card", children: "Unable to load compositions." })) : input.templates.length === 0 ? (_jsx("li", { className: "empty-state discover-loading-card", children: "No compositions available." })) : (input.visibleTemplates.map((template) => (_jsx(TemplateCard, { template: template, isBookmarked: input.bookmarks.has(template.templateId), onToggleBookmark: input.onToggleBookmark, onOpenPreview: setPreviewTemplate, onDeleteTemplate: input.onDeleteTemplate, accountUserId: input.account.userId }, template.templateId)))) }), _jsx("div", { className: "empty-state empty", id: "empty-state", "data-visible": showEmpty ? "true" : "false", children: "No compositions match the current search and filter combination." })] })) }) }) })] }) }), hasChatRail ? (_jsx("aside", { className: "editor-right-rail", "aria-label": "Discover copilot", children: isChatEnabled ? (_jsx("div", { className: "editor-chat-panel", "data-template-editor-chat-root": true })) : (_jsxs(_Fragment, { children: [_jsx("a", { className: "vf-editor-chat-mobile-fab", href: "/login", "aria-label": "Log in to chat with Vidfarm", children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M20 11.5a7.5 7.5 0 0 1-9.8 7.1L4 20l1.5-5.3A7.5 7.5 0 1 1 20 11.5Z" }) }) }), _jsxs("div", { className: "editor-chat-panel editor-chat-panel--logged-out", style: {
+    return (_jsxs("section", { className: `frame discover-frame${hasChatRail ? " has-chat-rail" : ""}`, children: [_jsxs("header", { className: "topbar", children: [_jsx(BrandLockup, { account: input.account }), _jsx("div", { className: "topbar-actions", children: _jsx(PrimaryNav, { account: input.account }) })] }), _jsx("div", { className: "frame-body", children: _jsxs("section", { className: "discover-shell", children: [_jsxs("div", { className: "discover-filter-bar", role: "toolbar", "aria-label": "Composition filters", children: [_jsxs("div", { className: "view-toggle discover-view-toggle", role: "tablist", "aria-label": "Discover view", children: [_jsx("button", { type: "button", className: `view-toggle-tab${!isPopular && !isSwipe ? " is-active" : ""}`, role: "tab", "aria-selected": !isPopular && !isSwipe, onClick: () => setView("feed"), children: "Feed" }), _jsx("button", { type: "button", className: `view-toggle-tab${isSwipe ? " is-active" : ""}`, role: "tab", "aria-selected": isSwipe, onClick: () => setView("swipe"), children: "Swipe" }), _jsx("button", { type: "button", className: `view-toggle-tab${isPopular ? " is-active" : ""}`, role: "tab", "aria-selected": isPopular, onClick: () => setView("popular"), children: "Category" })] }), _jsx(DiscoverMuteToggle, {}), _jsxs("div", { className: "discover-filter-search search-field", children: [_jsx("span", { className: "search-icon", "aria-hidden": "true", children: _jsx(SearchIcon, {}) }), _jsx("input", { id: "search", type: "search", placeholder: searchPlaceholder, autoComplete: "off", value: input.searchQuery, onChange: (event) => input.onSearchQueryChange?.(event.target.value) })] }), !isPopular && !isSwipe ? (_jsxs("label", { className: "discover-filter-toggle", htmlFor: "bookmarks-only", "data-active": input.bookmarksOnly ? "true" : "false", children: [_jsx("span", { className: "discover-filter-toggle-label", children: "Saved" }), _jsxs("span", { className: "switch-shell", "data-active": input.bookmarksOnly ? "true" : "false", children: [_jsx("input", { id: "bookmarks-only", className: "switch-input", type: "checkbox", checked: input.bookmarksOnly, onChange: (event) => input.onBookmarksOnlyChange?.(event.target.checked) }), _jsx("span", { className: "switch-knob" })] })] })) : null, input.account.isLoggedIn ? (_jsx("button", { type: "button", className: "discover-add-template-button", onClick: () => setIsAddTemplateOpen(true), children: "Add Template" })) : (_jsx("a", { className: "discover-add-template-button", href: "/login", children: "Add Template" }))] }), _jsx("section", { className: "discover-results", children: _jsx("div", { className: "discover-results-scroll", children: _jsx("div", { className: "discover-list-scroll", children: isSwipe ? (_jsx(SwipeDeck, { stack: input.swipeStack, loading: input.swipeLoading, loaded: input.swipeLoaded, error: input.swipeError, customizing: input.swipeCustomizing, targetDepth: input.swipeTargetDepth, productSet: input.swipeProductSet, refilling: input.swipeRefilling, isLoggedIn: input.account.isLoggedIn, onApprove: input.onSwipeApprove, onReject: input.onSwipeReject })) : isPopular ? (_jsx(PopularTemplates, { templates: input.popularTemplates, loading: input.popularLoading, error: input.popularError, searchQuery: input.searchQuery, bookmarks: input.bookmarks, onToggleBookmark: input.onToggleBookmark, onOpenPreview: setPreviewTemplate, onDeleteTemplate: input.onDeleteTemplate, accountUserId: input.account.userId })) : (_jsxs(_Fragment, { children: [_jsx("ul", { className: "discover-list", id: "template-list", children: input.loading ? (_jsx("li", { className: "empty-state discover-loading-card", children: "Loading compositions..." })) : input.error ? (_jsx("li", { className: "empty-state discover-loading-card", children: "Unable to load compositions." })) : input.templates.length === 0 ? (_jsx("li", { className: "empty-state discover-loading-card", children: "No compositions available." })) : (input.visibleTemplates.map((template) => (_jsx(TemplateCard, { template: template, isBookmarked: input.bookmarks.has(template.templateId), onToggleBookmark: input.onToggleBookmark, onOpenPreview: setPreviewTemplate, onDeleteTemplate: input.onDeleteTemplate, accountUserId: input.account.userId }, template.templateId)))) }), _jsx("div", { className: "empty-state empty", id: "empty-state", "data-visible": showEmpty ? "true" : "false", children: "No compositions match the current search and filter combination." })] })) }) }) })] }) }), hasChatRail ? (_jsx("aside", { className: "editor-right-rail", "aria-label": "Discover copilot", children: isChatEnabled ? (_jsx("div", { className: "editor-chat-panel", "data-template-editor-chat-root": true })) : (_jsxs(_Fragment, { children: [_jsx("a", { className: "vf-editor-chat-mobile-fab", href: "/login", "aria-label": "Log in to chat with Vidfarm", children: _jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "M20 11.5a7.5 7.5 0 0 1-9.8 7.1L4 20l1.5-5.3A7.5 7.5 0 1 1 20 11.5Z" }) }) }), _jsxs("div", { className: "editor-chat-panel editor-chat-panel--logged-out", style: {
                                 display: "flex",
                                 flexDirection: "column",
                                 height: "100%",