@mevdragon/vidfarm-devcli 0.14.0 → 0.16.0

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

@@ -1,4 +1,201 @@
 export function isVideoPreview(url) {
     return Boolean(url && /\.(mp4|webm|ogg|mov)(\?|#|$)/i.test(url));
 }
+export const POPULAR_INSPIRATION_GROUPS = [
+    {
+        label: "Talking Head & Personal",
+        items: [
+            { title: "Vlog style", url: "https://vt.tiktok.com/ZSCWTFBSe/" },
+            { title: "Talking head monologue", url: "https://vt.tiktok.com/ZSCWw9wqf/" },
+            { title: "AI Avatar presenter", url: "https://vt.tiktok.com/ZSC7RVW1o/" },
+            { title: "Day in the life", url: "https://www.tiktok.com/@rubygrifiths/video/7657529386131868950" },
+            { title: "GRWM", url: "https://vt.tiktok.com/ZSCWKv8Xb/" },
+            { title: "Reaction video", url: "https://vt.tiktok.com/ZSCWEF8Rv/" },
+            { title: "Q&A", url: "https://vt.tiktok.com/ZSCWExEeV/" },
+            { title: "Behind the Scenes", url: "https://vt.tiktok.com/ZSCWTFYew/" },
+            { title: "Story time narrated", url: "https://vt.tiktok.com/ZSCW3kAT5/" },
+            { title: "VTuber", url: "https://vt.tiktok.com/ZSC7TQyVM/" },
+            { title: "Female Thirst Trap", url: "https://vt.tiktok.com/ZSCvRLyMf/" },
+            { title: "Male Thirst Trap", url: "https://vt.tiktok.com/ZSCvdUUE2/" },
+            { title: "Masked Host", url: "https://vt.tiktok.com/ZSCvdNvxG/" },
+            { title: "Hot Take", url: "https://vt.tiktok.com/ZSCvewSbB/" }
+        ]
+    },
+    {
+        label: "Text / Story-Driven",
+        items: [
+            { title: "Reddit story + gameplay", url: "https://vt.tiktok.com/ZSCWpeSRy/" },
+            { title: "Fake text message story", url: "https://vt.tiktok.com/ZSCWov56s/" },
+            { title: "Twitter/X Thread Video", url: "https://vt.tiktok.com/ZSC7199q6/" },
+            { title: "Quote / motivational card", url: "https://vt.tiktok.com/ZSC71D9QD/" },
+            { title: "Facts / did you know", url: "https://vt.tiktok.com/ZSCW3QrKA/" },
+            { title: "Bible verse / spiritual", url: "https://vt.tiktok.com/ZSCWsP8r7/" },
+            { title: "Horoscope / Astrology", url: "https://vt.tiktok.com/ZSC71497u/" },
+            { title: "Minecraft Reddit Brainrot", url: "https://youtube.com/shorts/AmdI56dl1z4" }
+        ]
+    },
+    {
+        label: "Educational / Explainer",
+        items: [
+            { title: "Educational explainer", url: "https://vt.tiktok.com/ZSC7e5fbr/" },
+            { title: "Whiteboard animation", url: "https://vt.tiktok.com/ZSCWpLa4p/" },
+            { title: "Kinetic typography", url: "https://vt.tiktok.com/ZSC7dJnJP/" },
+            { title: "Data viz / Infographic", url: "https://vt.tiktok.com/ZSC7RvdWR/" },
+            { title: "Science explainer", url: "https://youtu.be/WxmSJbG134k" },
+            { title: "Vox News Style", url: "https://www.tiktok.com/@vox/video/7619108001424723231" },
+            { title: "Low Poly Animation", url: "https://vt.tiktok.com/ZSC7RwmGR/" },
+            { title: "Math tutorial", url: "https://youtu.be/6yYnr8FL1fk" },
+            { title: "Historic retelling", url: "https://vt.tiktok.com/ZSC7N6Y68/" },
+            { title: "Book Summary", url: "https://vt.tiktok.com/ZSC7Fmemb/" },
+            { title: "Documentary Style", url: "https://vt.tiktok.com/ZSC7YBXm9/" },
+            { title: "Course lecture", url: "https://youtube.com/shorts/QoQUfVEp-d0" },
+            { title: "Scientific Selling", url: "https://www.tiktok.com/@maxcern/video/7604237124036037919" }
+        ]
+    },
+    {
+        label: "Product / Marketing",
+        items: [
+            { title: "Software product demo", url: "https://vt.tiktok.com/ZSC7rbNcV/" },
+            { title: "Product commercial", url: "https://vt.tiktok.com/ZSCv6C1Ms/" },
+            { title: "UGC Creator Ad", url: "https://vt.tiktok.com/ZSC7hwraf/" },
+            { title: "Product Spin Show", url: "https://vt.tiktok.com/ZSCWsuxxp/" },
+            { title: "Testimonial", url: "https://vt.tiktok.com/ZSC7kRvxk/" },
+            { title: "Explainer commercial", url: "https://vt.tiktok.com/ZSC7SEeHA/" },
+            { title: "Case Study", url: "https://www.tiktok.com/@juliejonesdesigns/video/7298542413948243243" },
+            { title: "Brand story", url: "https://vt.tiktok.com/ZSC7a7wvb/" },
+            { title: "Real Estate tour", url: "https://www.instagram.com/reel/DY19EdHGcDk/" },
+            { title: "Sales pitch", url: "https://www.tiktok.com/@mindfullallie/video/7633917841774742815" },
+            { title: "Logo reveal / brand intro", url: "https://vt.tiktok.com/ZSC7avGmH/" }
+        ]
+    },
+    {
+        label: "News / Journalism",
+        items: [
+            { title: "News anchor style", url: "https://vt.tiktok.com/ZSC7VtHNS/" },
+            { title: "Breaking news", url: "https://vt.tiktok.com/ZSCWWUCqS/" },
+            { title: "Weather Report", url: "https://vt.tiktok.com/ZSCWWBEEY/" },
+            { title: "Financial / stock update", url: "https://vt.tiktok.com/ZSC7Vt6rP/" },
+            { title: "Sports scores/recap", url: "https://vt.tiktok.com/ZSC7V7Pqf/" }
+        ]
+    },
+    {
+        label: "Entertainment / Creative",
+        items: [
+            { title: "Anime / manga", url: "https://vt.tiktok.com/ZSC7qnwWn/" },
+            { title: "Cartoon Animation", url: "https://vt.tiktok.com/ZSC7qvEfe/" },
+            { title: "Music Video", url: "https://vt.tiktok.com/ZSC7beC8P/" },
+            { title: "Lyric Video", url: "https://vt.tiktok.com/ZSC7bP5x7/" },
+            { title: "Meme video", url: "https://vt.tiktok.com/ZSC7g8sEn/" },
+            { title: "Meme recaptioning", url: "https://vt.tiktok.com/ZSCv6eeKD/" },
+            { title: "Hype Edit", url: "https://www.tiktok.com/@goldenhype0/video/7645035734901984543" },
+            { title: "Fantasy Hype Edit", url: "https://www.tiktok.com/@hype.edits/video/7538337237453344013" },
+            { title: "UGC Comedy", url: "https://www.tiktok.com/@very.manipulative/video/7644074719737646366" },
+            { title: "Parody", url: "https://vt.tiktok.com/ZSC7g4aa8/" },
+            { title: "ASMR", url: "https://vt.tiktok.com/ZSCvJvseN/" },
+            { title: "Cinematic short film", url: "https://vt.tiktok.com/ZSCvJV2mM/" },
+            { title: "Oddly satisfying", url: "https://vt.tiktok.com/ZSC7gqn9o/" },
+            { title: "POV video", url: "https://vt.tiktok.com/ZSCveMjMp/" },
+            { title: "Nostalgia", url: "https://vt.tiktok.com/ZSCv2DALg/" },
+            { title: "Musical", url: "https://vt.tiktok.com/ZSCvYwKBQ/" },
+            { title: "Gossip", url: "https://vt.tiktok.com/ZSCvYvrh7/" }
+        ]
+    },
+    {
+        label: "Data / Analytical",
+        items: [
+            { title: "Comparison \"X vs Y\"", url: "https://youtube.com/shorts/jFvemXPxayg" },
+            { title: "Ranking / Tier List", url: "https://youtube.com/shorts/Ku5xNHs7sAE" },
+            { title: "Countdown / top 10", url: "https://vt.tiktok.com/ZSC7psUDB/" },
+            { title: "Poll Results Reveal", url: "https://www.tiktok.com/@carterjstockman/video/7477653012874267947" },
+            { title: "Stats Comparison", url: "https://www.tiktok.com/@everythingecon/video/7650833928726564118" },
+            { title: "Leaderboard Reveal", url: "https://vt.tiktok.com/ZSC7sseno/" },
+            { title: "Sports stat breakdown", url: "https://vt.tiktok.com/ZSCvFUTHN/" },
+            { title: "Before/after Transformation", url: "https://vt.tiktok.com/ZSC7GRLT2/" }
+        ]
+    },
+    {
+        label: "Gaming",
+        items: [
+            { title: "Gameplay walkthrough", url: "https://vt.tiktok.com/ZSCWWE5X5/" },
+            { title: "Game review", url: "https://youtube.com/shorts/nrb0t9cRw3g" },
+            { title: "Game trailer", url: "https://vt.tiktok.com/ZSCW7LqKV/" },
+            { title: "Esports highlights", url: "https://vt.tiktok.com/ZSC7y4BEF/" }
+        ]
+    },
+    {
+        label: "Kids / Educational",
+        items: [
+            { title: "Nursery Rhyme", url: "https://vt.tiktok.com/ZSC7SWUUr/" },
+            { title: "Alphabet / counting", url: "https://vt.tiktok.com/ZSCWvhRNd/" },
+            { title: "Cartoon lesson", url: "https://vt.tiktok.com/ZSC7y9wHp/" },
+            { title: "Storybook read-along", url: "https://vt.tiktok.com/ZSC7yrnN8/" }
+        ]
+    },
+    {
+        label: "Ambient / Background",
+        items: [
+            { title: "Lo-fi study loop", url: "https://vt.tiktok.com/ZSCWcFgAh/" },
+            { title: "Nature + Music", url: "https://vt.tiktok.com/ZSCWc4Egr/" },
+            { title: "Fireplace / rain loop", url: "https://vt.tiktok.com/ZSCWcrF7v/" },
+            { title: "Aesthetic vibe/mood", url: "https://vt.tiktok.com/ZSCWcK2uQ/" }
+        ]
+    },
+    {
+        label: "Fitness / Wellness",
+        items: [
+            { title: "Workout tutorial", url: "https://vt.tiktok.com/ZSC7fLGUL/" },
+            { title: "Yoga / meditation", url: "https://vt.tiktok.com/ZSC7fTkJr/" },
+            { title: "Recipe / cooking", url: "https://vt.tiktok.com/ZSC7ffpcX/" },
+            { title: "Health tips", url: "https://vt.tiktok.com/ZSC7P6T8y/" }
+        ]
+    },
+    {
+        label: "Travel / Location",
+        items: [
+            { title: "Travel vlog", url: "https://vt.tiktok.com/ZSCWthBcp/" },
+            { title: "Destination showcase", url: "https://vt.tiktok.com/ZSC7aVDUv/" },
+            { title: "Review Guides", url: "https://vt.tiktok.com/ZSC7PpXUR/" },
+            { title: "City tour", url: "https://vt.tiktok.com/ZSC7ajj14/" }
+        ]
+    },
+    {
+        label: "Interview / Conversation",
+        items: [
+            { title: "Interview format", url: "https://vt.tiktok.com/ZSC74xE8A/" },
+            { title: "Panel discussion", url: "https://vt.tiktok.com/ZSC74xYML/" },
+            { title: "Debate", url: "https://vt.tiktok.com/ZSCvRpCW1/" },
+            { title: "Podcast clip", url: "https://www.tiktok.com/@rogantimes04/video/7659533957049961750" },
+            { title: "Audiogram", url: "https://vt.tiktok.com/ZSCWs6uMm/" },
+            { title: "Diary Confession", url: "https://vt.tiktok.com/ZSCvRcFAn/" }
+        ]
+    },
+    {
+        label: "Motion Design",
+        items: [
+            { title: "Motion graphics", url: "https://vt.tiktok.com/ZSC7u4VD8/" },
+            { title: "2D character animation", url: "https://vt.tiktok.com/ZSC7uCayM/" },
+            { title: "Stop motion", url: "https://vt.tiktok.com/ZSCWseh2r/" },
+            { title: "Static Fast Forward", url: "https://vt.tiktok.com/ZSC7HRUVa/" },
+            { title: "Montage Video", url: "https://vt.tiktok.com/ZSCv8QPRY/" },
+            { title: "Memoirs", url: "https://vt.tiktok.com/ZSCv89bXC/" }
+        ]
+    },
+    {
+        label: "Hype / Trailer",
+        items: [
+            { title: "Trailer / hype video", url: "https://vt.tiktok.com/ZSC7uHkTc/" },
+            { title: "Event promo", url: "https://vt.tiktok.com/ZSC7uMvBA/" },
+            { title: "Reveal video", url: "https://vt.tiktok.com/ZSCvNxK7d/" }
+        ]
+    },
+    {
+        label: "Pure AI",
+        items: [
+            { title: "AI Fruit Dramas", url: "https://vt.tiktok.com/ZSCv89Xck/" },
+            { title: "Surreal AI Characters", url: "https://vt.tiktok.com/ZSCv8nN2K/" },
+            { title: "Claymation Story", url: "https://vt.tiktok.com/ZSCvLJhAc/" },
+            { title: "Paper Mache Story", url: "https://www.youtube.com/watch?v=0JKu9TQCLMI" }
+        ]
+    }
+];
 //# sourceMappingURL=homepage-shared.js.map

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

@@ -7,6 +7,11 @@ export function createHomepageStore(boot) {
         bookmarks: new Set(),
         loading: boot.templates.length === 0,
         error: null,
+        view: "feed",
+        popularTemplates: [],
+        popularLoading: false,
+        popularLoaded: false,
+        popularError: null,
         setTemplates: (templates) => set({ templates, loading: false, error: null }),
         setSearchQuery: (searchQuery) => set({ searchQuery }),
         setBookmarksOnly: (bookmarksOnly) => set({ bookmarksOnly }),
@@ -22,7 +27,11 @@ export function createHomepageStore(boot) {
             return { bookmarks: next };
         }),
         setLoading: (loading) => set({ loading }),
-        setError: (error) => set({ error, loading: false })
+        setError: (error) => set({ error, loading: false }),
+        setView: (view) => set({ view }),
+        setPopularTemplates: (popularTemplates) => set({ popularTemplates, popularLoading: false, popularLoaded: true, popularError: null }),
+        setPopularLoading: (popularLoading) => set({ popularLoading }),
+        setPopularError: (popularError) => set({ popularError, popularLoading: false })
     }));
 }
 //# sourceMappingURL=homepage-store.js.map

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,51 @@ 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 popular formats\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 popular formats match your search." : "No popular formats 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))) }));
+}
 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 setView = (value) => input.onViewChange?.(value);
+    const searchPlaceholder = isPopular
+        ? "Search popular formats"
+        : 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 +531,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 ? " 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: {
                                 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, 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 {
@@ -541,6 +549,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 +948,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 +1230,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;

package/dist/src/hyperframes/composition.js

@@ -575,12 +575,12 @@ function renderLayer(layer) {
             // data-start) and it plays across exactly the clip's span.
             const vars = kenBurnsInlineVars(kenBurns, positiveNumber(layer.duration, 0));
             const kbStyle = vars ? `${style};${vars}` : style;
-            return `<img ${attrs} data-kenburns="${escapeAttr(kenBurns.preset)}" src="${escapeAttr(layer.src || "")}" alt="" style="${escapeAttr(kbStyle)}" />`;
+            return `<img class="clip" ${attrs} data-kenburns="${escapeAttr(kenBurns.preset)}" src="${escapeAttr(layer.src || "")}" alt="" style="${escapeAttr(kbStyle)}" />`;
         }
-        return `<img ${attrs} src="${escapeAttr(layer.src || "")}" alt="" style="${escapeAttr(style)}" />`;
+        return `<img class="clip" ${attrs} src="${escapeAttr(layer.src || "")}" alt="" style="${escapeAttr(style)}" />`;
     }
     if (layer.kind === "html") {
-        return `<div ${attrs} style="${escapeAttr(style)}">${layer.html || ""}</div>`;
+        return `<div class="clip" ${attrs} style="${escapeAttr(style)}">${layer.html || ""}</div>`;
     }
     const text = layer.text ?? layer.label ?? "";
     const inlineStyle = textInlineCss(layer.textBackgroundStyle || "plain", layer.color || "#ffffff", layer.background || "#000000", layer.fontFamily || "TikTok Sans", positiveInteger(layer.fontWeight, 700));
@@ -605,10 +605,10 @@ function renderLayer(layer) {
             const upper = captionConfig.uppercase ? ";text-transform:uppercase" : "";
             const divStyle = `${style}${vars ? `;${vars}` : ""}${upper};overflow:visible`;
             const captionAttrs = `${attrs} data-caption-animation="${escapeAttr(captionConfig.animation)}"${captionConfig.uppercase ? " data-caption-uppercase=\"1\"" : ""}`;
-            return `<div ${captionAttrs} style="${escapeAttr(divStyle)}"><span data-vf-text-lines="true" style="${escapeAttr(linesStyle)}"><span data-vf-text-inline="true" style="${escapeAttr(inlineStyle)}">${captionWordSpansHtml(words)}</span></span></div>`;
+            return `<div class="clip" ${captionAttrs} style="${escapeAttr(divStyle)}"><span data-vf-text-lines="true" style="${escapeAttr(linesStyle)}"><span data-vf-text-inline="true" style="${escapeAttr(inlineStyle)}">${captionWordSpansHtml(words)}</span></span></div>`;
         }
     }
-    return `<div ${attrs} style="${escapeAttr(style)}"><span data-vf-text-lines="true" style="${escapeAttr(linesStyle)}"><span data-vf-text-inline="true" style="${escapeAttr(inlineStyle)}">${escapeHtml(text)}</span></span></div>`;
+    return `<div class="clip" ${attrs} style="${escapeAttr(style)}"><span data-vf-text-lines="true" style="${escapeAttr(linesStyle)}"><span data-vf-text-inline="true" style="${escapeAttr(inlineStyle)}">${escapeHtml(text)}</span></span></div>`;
 }
 // Serializes word windows into the <span data-cap-word> run that the caption
 // stylesheet animates. Delay/duration are the word window relative to the