@mevdragon/vidfarm-devcli 0.15.0 → 0.17.0

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

@@ -263,7 +263,7 @@ function LazyVideo({ src, controls = true }) {
 }
 function DiscoverMuteToggle() {
     const muted = useDiscoverMuted();
-    return (_jsxs("button", { type: "button", className: "discover-mute-toggle", "aria-pressed": muted, "aria-label": muted ? "Unmute video previews" : "Mute video previews", title: muted ? "Unmute previews" : "Mute previews", onClick: () => setDiscoverMuted(!muted), children: [muted ? _jsx(SpeakerOffIcon, {}) : _jsx(SpeakerOnIcon, {}), _jsx("span", { className: "discover-mute-toggle-label", children: muted ? "Muted" : "Sound on" })] }));
+    return (_jsx("button", { type: "button", className: "discover-mute-toggle", "aria-pressed": muted, "aria-label": muted ? "Unmute video previews" : "Mute video previews", title: muted ? "Unmute previews" : "Mute previews", onClick: () => setDiscoverMuted(!muted), children: muted ? _jsx(SpeakerOffIcon, {}) : _jsx(SpeakerOnIcon, {}) }));
 }
 function CopyInlineButton({ text, label }) {
     const [status, setStatus] = useState("");
@@ -479,13 +479,158 @@ function AddTemplateModal(input) {
                                         }
                                     } }))] }), file ? (_jsxs("div", { className: "discover-add-template-field", children: [_jsxs("label", { className: "label", htmlFor: "add-template-title", children: ["Title ", _jsx("span", { className: "discover-add-template-optional", children: "optional \u2014 defaults to the template id" })] }), _jsx("input", { id: "add-template-title", type: "text", placeholder: "Name this template\u2026", autoComplete: "off", maxLength: 140, value: title, onChange: (event) => setTitle(event.target.value) })] })) : null, _jsxs("div", { className: "discover-add-template-field", children: [_jsxs("label", { className: "label", htmlFor: "add-template-tagline", children: ["Tagline ", _jsx("span", { className: "discover-add-template-optional", children: "optional" })] }), _jsx("input", { id: "add-template-tagline", type: "text", placeholder: "What makes this video work?", autoComplete: "off", maxLength: 140, value: tagline, onChange: (event) => setTagline(event.target.value) })] }), _jsxs("div", { className: "discover-add-template-field", children: [_jsxs("label", { className: "label", htmlFor: "add-template-notes", children: ["Notes ", _jsx("span", { className: "discover-add-template-optional", children: "optional" })] }), _jsx("textarea", { id: "add-template-notes", rows: 4, placeholder: "Ideas for how you want to remix this\u2026", maxLength: 2000, value: notes, onChange: (event) => setNotes(event.target.value) })] }), error ? _jsx("p", { className: "discover-add-template-error", role: "alert", children: error }) : null, _jsxs("div", { className: "toolbar discover-add-template-actions", children: [_jsx("button", { type: "button", className: "secondary", onClick: onClose, disabled: submitting, children: "Cancel" }), _jsx("button", { type: "submit", className: "cta-button discover-add-template-submit", disabled: submitting, children: submitting ? (file ? "Uploading…" : "Adding…") : "Add Template" })] })] })] }) }));
 }
+// The curated "Popular" picks. They are real public templates (seeded once from
+// POPULAR_INSPIRATION_GROUPS), so they render with the exact same TemplateCard
+// as the Feed — inline autoplay video that obeys the page mute toggle — just
+// 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 categories\u2026" }) });
+    }
+    if (input.error) {
+        return _jsx("ul", { className: "discover-list", children: _jsx("li", { className: "empty-state discover-loading-card", children: input.error }) });
+    }
+    const query = input.searchQuery.trim().toLowerCase();
+    const filtered = query
+        ? 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 categories match your search." : "No categories yet." }) }));
+    }
+    // Group by popularGroup, preserving the server's rank order (already sorted).
+    const groups = [];
+    for (const template of filtered) {
+        const label = (template.popularGroup || "Popular").trim() || "Popular";
+        let group = groups.find((entry) => entry.label === label);
+        if (!group) {
+            group = { label, items: [] };
+            groups.push(group);
+        }
+        group.items.push(template);
+    }
+    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);
     const [isAddTemplateOpen, setIsAddTemplateOpen] = useState(false);
-    const searchPlaceholder = input.loading || input.error
-        ? "Search Templates"
-        : `Search ${input.visibleTemplates.length} Template${input.visibleTemplates.length === 1 ? "" : "s"}`;
+    // "feed" = the live inspirations catalog (continuously grown); "popular" = the
+    // 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 categories"
+        : input.loading || input.error
+            ? "Search Templates"
+            : `Search ${input.visibleTemplates.length} Template${input.visibleTemplates.length === 1 ? "" : "s"}`;
     // Chat rail is always visible on /discover so logged-out visitors see the copilot
     // affordance and understand what unlocks after login. When logged in, the real chat
     // React tree portals into the [data-template-editor-chat-root] element (see
@@ -493,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: "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) })] }), _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" })] })] }), 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(DiscoverMuteToggle, {})] }), _jsx("section", { className: "discover-results", children: _jsx("div", { className: "discover-results-scroll", children: _jsxs("div", { className: "discover-list-scroll", 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, onSearchQueryChange: undefined, onBookmarksOnlyChange: 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>
     `,
@@ -70,8 +70,7 @@ export function renderHomepage(input) {
         position: sticky;
         top: 0;
         z-index: 5;
-        display: grid;
-        grid-template-columns: minmax(220px, 1fr) auto auto auto;
+        display: flex;
         align-items: center;
         gap: 12px;
         padding: 14px 22px;
@@ -80,6 +79,16 @@ export function renderHomepage(input) {
         backdrop-filter: blur(8px);
       }
 
+      .discover-filter-search {
+        flex: 1 1 auto;
+        min-width: 200px;
+      }
+
+      /* Feed/Popular segmented switch reuses the shared page-shell .view-toggle
+         look; height-match the 44px filter-bar controls. */
+      .discover-view-toggle { flex: 0 0 auto; }
+      .discover-view-toggle .view-toggle-tab { min-height: 36px; padding: 0 16px; }
+
       .discover-filter-search input {
         min-height: 44px;
         padding-left: 46px;
@@ -134,17 +143,16 @@ export function renderHomepage(input) {
       .discover-mute-toggle {
         display: inline-flex;
         align-items: center;
-        gap: 8px;
+        justify-content: center;
+        width: 44px;
+        height: 44px;
         min-height: 44px;
-        padding: 0 16px;
+        padding: 0;
         border: 1px solid rgba(209, 219, 233, 0.96);
         border-radius: 999px;
         background: rgba(255, 255, 255, 0.9);
         color: #55637b;
         cursor: pointer;
-        font-size: 0.86rem;
-        font-weight: 700;
-        white-space: nowrap;
       }
 
       .discover-mute-toggle svg {
@@ -519,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;
@@ -541,6 +732,27 @@ export function renderHomepage(input) {
         gap: 22px;
       }
 
+      /* Popular view: the curated picks render with the same autoplay
+         TemplateCard rows as the Feed, just grouped under category headings. */
+      .discover-popular {
+        display: grid;
+        gap: 34px;
+      }
+
+      .discover-popular-group {
+        display: grid;
+        gap: 22px;
+      }
+
+      .discover-popular-group-label {
+        margin: 0;
+        font-size: 0.78rem;
+        font-weight: 800;
+        letter-spacing: 0.14em;
+        text-transform: uppercase;
+        color: #a9884a;
+      }
+
       .discover-card {
         display: grid;
         grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
@@ -919,14 +1131,6 @@ export function renderHomepage(input) {
       @media (max-width: 1180px) {
         .discover-frame.has-chat-rail { padding-left: 0; }
 
-        .discover-mute-toggle-label {
-          display: none;
-        }
-
-        .discover-mute-toggle {
-          padding: 0 12px;
-        }
-
         .discover-card {
           grid-template-columns: minmax(200px, 300px) minmax(0, 1fr);
           gap: 20px;
@@ -1209,12 +1413,24 @@ export function renderHomepage(input) {
         }
 
         .discover-filter-toggle,
-        .discover-add-template-button,
-        .discover-mute-toggle {
+        .discover-add-template-button {
           flex: 1 1 auto;
           justify-content: center;
         }
 
+        .discover-mute-toggle {
+          flex: 0 0 auto;
+        }
+
+        /* Feed/Popular leads its own full-width row on phones. */
+        .discover-view-toggle {
+          flex: 1 1 100%;
+        }
+
+        .discover-view-toggle .view-toggle-tab {
+          flex: 1 1 auto;
+        }
+
         .discover-media-modal-backdrop {
           align-items: stretch;
           padding: 12px;