@mevdragon/vidfarm-devcli 0.16.0 → 0.18.0

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%",

package/dist/src/homepage.js

@@ -25,7 +25,7 @@ export function renderHomepage(input) {
             }
             : undefined,
         body: `
-      <div id="homepage-root">${renderToString(_jsx(HomepageShell, { account: input.account, templates: input.templates, visibleTemplates: input.templates, searchQuery: "", bookmarksOnly: false, bookmarks: new Set(), loading: input.templates.length === 0, error: null, view: "feed", popularTemplates: [], popularLoading: false, popularError: null, onSearchQueryChange: undefined, onBookmarksOnlyChange: undefined, onViewChange: undefined, onToggleBookmark: undefined, onAddTemplate: undefined, onDeleteTemplate: undefined, skillEndpointPrefix: boot.skillEndpointPrefix }))}</div>
+      <div id="homepage-root">${renderToString(_jsx(HomepageShell, { account: input.account, templates: input.templates, visibleTemplates: input.templates, searchQuery: "", bookmarksOnly: false, bookmarks: new Set(), loading: input.templates.length === 0, error: null, view: "feed", popularTemplates: [], popularLoading: false, popularError: null, swipeStack: [], swipeLoading: false, swipeLoaded: false, swipeError: null, swipeCustomizing: 0, swipeTargetDepth: 5, swipeProductSet: true, swipeRefilling: false, onSearchQueryChange: undefined, onBookmarksOnlyChange: undefined, onViewChange: undefined, onToggleBookmark: undefined, onAddTemplate: undefined, onDeleteTemplate: undefined, skillEndpointPrefix: boot.skillEndpointPrefix }))}</div>
       <script type="application/json" id="homepage-boot">${escapeJsonForHtml(boot)}</script>
       <script type="module" src="${HOMEPAGE_CLIENT_ASSET}"></script>
     `,
@@ -527,6 +527,189 @@ export function renderHomepage(input) {
         padding-right: 6px;
       }
 
+      /* ---- Swipe deck ---- */
+      .swipe-deck-wrap {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 18px;
+        height: 100%;
+        min-height: 0;
+        padding: 8px 0 4px;
+      }
+      .swipe-deck {
+        position: relative;
+        width: min(320px, 62vw);
+        aspect-ratio: 9 / 16;
+        max-height: 66vh;
+        flex: 0 0 auto;
+      }
+      .swipe-card {
+        position: absolute;
+        inset: 0;
+        border-radius: 22px;
+        overflow: hidden;
+        background: #0d0b10;
+        box-shadow: 0 18px 44px rgba(31, 20, 8, 0.24), 0 2px 8px rgba(31, 20, 8, 0.12);
+        touch-action: none;
+        will-change: transform;
+        user-select: none;
+      }
+      .swipe-card:first-child { cursor: grab; }
+      .swipe-card:first-child:active { cursor: grabbing; }
+      .swipe-sound {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        z-index: 200;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border: 0;
+        background: rgba(0, 0, 0, 0.45);
+        color: #fff;
+        font-size: 17px;
+        line-height: 1;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        backdrop-filter: blur(4px);
+        transition: background 0.15s ease, transform 0.15s ease;
+      }
+      .swipe-sound:hover { background: rgba(0, 0, 0, 0.68); transform: scale(1.06); }
+      .swipe-card-preview,
+      .swipe-card-fallback {
+        position: absolute;
+        inset: 0;
+        width: 100%;
+        height: 100%;
+        border: 0;
+        display: block;
+      }
+      .swipe-card-fallback {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        padding: 22px;
+        color: rgba(255, 255, 255, 0.72);
+        font-size: 15px;
+        font-weight: 600;
+        background: linear-gradient(160deg, #2a2431, #16121c);
+      }
+      .swipe-card-overlay {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        padding: 40px 16px 16px;
+        background: linear-gradient(0deg, rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0));
+        color: #fff;
+        pointer-events: none;
+      }
+      .swipe-card-title { font-size: 16px; font-weight: 800; line-height: 1.25; }
+      .swipe-card-caption {
+        margin-top: 4px;
+        font-size: 12.5px;
+        line-height: 1.35;
+        color: rgba(255, 255, 255, 0.86);
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+      }
+      .swipe-stamp {
+        position: absolute;
+        top: 20px;
+        padding: 6px 14px;
+        border-radius: 10px;
+        font-weight: 900;
+        font-size: 20px;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        border: 3px solid currentColor;
+        pointer-events: none;
+      }
+      .swipe-stamp-yes { left: 18px; color: #22c55e; transform: rotate(-14deg); }
+      .swipe-stamp-no { right: 18px; color: #ef4444; transform: rotate(14deg); }
+      /* Buttons flank the deck, filling the empty side space. */
+      .swipe-deck-row {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: clamp(10px, 3vw, 56px);
+        width: 100%;
+        flex: 1 1 auto;
+        min-height: 0;
+      }
+      .swipe-action {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        border: none;
+        font-size: 26px;
+        font-weight: 800;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        box-shadow: 0 8px 20px rgba(31, 20, 8, 0.18);
+        transition: transform 0.12s ease, filter 0.12s ease;
+      }
+      .swipe-action:hover:not(:disabled) { transform: translateY(-3px); }
+      .swipe-action:disabled { opacity: 0.5; cursor: default; }
+      .swipe-action-reject { background: #fff; color: #ef4444; border: 1.5px solid rgba(239, 68, 68, 0.35); }
+      .swipe-action-approve { background: #22c55e; color: #fff; }
+      .swipe-status {
+        margin-top: 14px;
+        text-align: center;
+        font-size: 13px;
+        font-weight: 700;
+        color: #7a6a52;
+        flex: 0 0 auto;
+      }
+      .swipe-action-error {
+        color: #b91c1c;
+        font-size: 13px;
+        font-weight: 600;
+        text-align: center;
+      }
+      .swipe-empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        gap: 8px;
+        height: 100%;
+        padding: 24px;
+        color: #6f6047;
+      }
+      .swipe-empty-title { font-size: 18px; font-weight: 800; color: #3a2f1e; }
+      .swipe-empty-sub { font-size: 14px; max-width: 340px; line-height: 1.45; }
+      .swipe-empty-cta {
+        margin-top: 10px;
+        padding: 10px 20px;
+        border-radius: 999px;
+        background: #f5a524;
+        color: #2a1c00;
+        font-weight: 800;
+        text-decoration: none;
+      }
+      .swipe-spinner {
+        width: 34px;
+        height: 34px;
+        border-radius: 50%;
+        border: 3px solid rgba(245, 165, 36, 0.28);
+        border-top-color: #f5a524;
+        animation: swipe-spin 0.8s linear infinite;
+        margin-bottom: 4px;
+      }
+      @keyframes swipe-spin { to { transform: rotate(360deg); } }
+
       .discover-count {
         position: sticky;
         top: 0;