@mevdragon/vidfarm-devcli 0.17.0 → 0.18.1

package/dist/src/reskin/discover-page.js

@@ -1,17 +1,58 @@
-// /reskin/discover — the template discovery surface, in the farmville design system.
-// SIMPLIFIED & RESTRUCTURED into THREE server-routed modes, each its own URL:
-//   • feed       → /reskin/discover/feed       — clean 9:16 poster grid
-//   • swipe      → /reskin/discover/swipe       — Tinder-style single-card deck
-//   • categories → /reskin/discover/categories  — browse-by-format cards
+// /reskin/discover — the template discovery surface, MIGRATED to the REAL
+// production feed (part of the /reskin/* UX migration; reference:
+// job-runs-page.ts for the "render a shell → client-fetch a real endpoint"
+// pattern, settings-page.ts for the real-data render pattern).
 //
-// The mode is chosen server-side (the `mode` arg) and surfaced as a Feed / Swipe /
-// Categories segmented toggle rendered as THREE real <a> links. Rendered with baked
-// SAMPLE data so every mode views without auth or a live catalog. Uses ONLY shared
-// rk-* primitives + a page-scoped rk-discover-* CSS block + a tiny self-contained
-// module script (deck advance in swipe). Pill density is kept deliberately low: at
-// most a duration overlay + a plain meta line + the single gold Fork CTA per card,
-// so the surface reads calm rather than repetitive.
-import { reskinDocument } from "./document.js";
+// Three server-routed modes, each its own URL, surfaced as a Feed / Swipe /
+// Categories segmented toggle (three real <a> links):
+//   • feed       → /reskin/discover/feed       — real /discover/feed poster grid
+//   • swipe      → /reskin/discover/swipe       — real /discover/swipe/* Tinder deck
+//   • categories → /reskin/discover/categories  — real /discover/popular groups
+//
+// Every mode renders the farmville shell + a self-contained module script that
+// fetches the SAME real, same-origin endpoints the live React SPA hits, with
+// credentials, and renders real poster cards (real title, real thumbnail/video
+// from the real url, real source + duration) that fork/open into the real
+// editor at /editor/<template_id>. Loading / empty / error states are all
+// guarded so an offline fetch degrades to a friendly state instead of throwing.
+//
+// Poster-grid extras (feed + categories reveal, which share posterCardHtml):
+//   • hover audio — mousing over a card's (muted, autoplaying) video unmutes
+//     it while the pointer stays, with an autoplay-policy fallback that
+//     reverts to muted playback if the browser blocks unmuted play.
+//   • TikTok-style viewer — clicking a card opens a fullscreen vertical
+//     scroll-snap deck (swipe / wheel / arrow keys between templates, sound
+//     on, tap video to pause, mute toggle) with an "Open Editor" CTA per
+//     slide. The card's "Open Editor" button still deep-links the editor.
+//     The viewer is shared: feed swipes the (filtered) feed, categories
+//     swipes the revealed group.
+//   • bookmarks — one-tap bookmark on each viewer slide + on cards on hover,
+//     persisted client-side in localStorage ('rk-discover-bookmarks'; there
+//     is no backend favorite endpoint), plus a "bookmarked only" toolbar
+//     filter chip on the feed so saved templates are findable.
+//   • no platform pill on posters (user feedback) — source only shows as the
+//     small meta line inside the viewer slide.
+//
+// The renderer keeps its `mode` signature (so the existing zero-arg
+// `/reskin/discover/:mode` route keeps working — the client fetches the live
+// endpoints same-origin using the browser session cookie) and adds an optional
+// 2nd `input` arg (defaulted) so the parent route can, if it wants, pass the
+// signed-in account id (→ ?account= on fetches + editor links, matching the
+// live editorHref) and override any endpoint.
+import { reskinDocument, rkEscape } from "./document.js";
+import { POPULAR_INSPIRATION_GROUPS } from "../frontend/homepage-shared.js";
+/** Config-only defaults (the data fields feedInitial/feedFetchedAt are seeded
+ *  per-request, never defaulted). */
+const DEFAULT_INPUT = {
+    accountId: "",
+    isLoggedIn: false,
+    feedEndpoint: "/discover/feed",
+    popularEndpoint: "/discover/popular",
+    swipeStackEndpoint: "/discover/swipe/stack",
+    swipeRefillEndpoint: "/discover/swipe/refill",
+    swipeBase: "/discover/swipe",
+    editorBase: "/editor"
+};
 const MODES = [
     { mode: "feed", label: "Feed" },
     { mode: "swipe", label: "Swipe" },
@@ -19,227 +60,278 @@ const MODES = [
 ];
 const MODE_COPY = {
     feed: {
-        badge: "Template feed",
-        sub: "Browse proven short-form formats, then fork one into a live editor and make it yours in an afternoon."
+        sub: "Browse proven short-form formats, then open one in the editor and make it yours in an afternoon."
     },
     swipe: {
-        badge: "Swipe to customize",
         sub: "One template at a time — keep the ones that fit and we'll recut them into ads for your brand."
     },
     categories: {
-        badge: "Browse by format",
         sub: "Jump straight to the style you need — every short-form format, neatly grouped."
     }
 };
-const CARDS = [
-    { emoji: "💄", grad: "linear-gradient(150deg,#ffd76a,#f97316)", hook: "POV: you finally found the serum", title: "Skincare UGC hook", handle: "@glow.recipes", difficulty: "easy", duration: "0:18", cat: "ugc", forks: "2.4k" },
-    { emoji: "🎙️", grad: "linear-gradient(160deg,#6cc0f5,#3f9fe0)", hook: "Nobody tells you this about growth", title: "Talking-head monologue", handle: "@founder.notes", difficulty: "easy", duration: "0:32", cat: "talking", forks: "1.9k" },
-    { emoji: "🧠", grad: "linear-gradient(155deg,#c4a0ee,#7c3aed)", hook: "How it actually works", title: "Kinetic explainer", handle: "@explain.daily", difficulty: "medium", duration: "0:44", cat: "explainer", forks: "3.1k" },
-    { emoji: "🔟", grad: "linear-gradient(160deg,#7de0a3,#16a34a)", hook: "5 tools I can't live without", title: "Listicle countdown", handle: "@stack.picks", difficulty: "easy", duration: "0:27", cat: "listicle", forks: "1.2k" },
-    { emoji: "😂", grad: "linear-gradient(150deg,#ffb27a,#f43f5e)", hook: "me explaining this to my boss", title: "Meme recaption", handle: "@office.brainrot", difficulty: "easy", duration: "0:11", cat: "meme", forks: "5.8k" },
-    { emoji: "✨", grad: "linear-gradient(155deg,#ffc9d4,#f472b6)", hook: "get ready with me", title: "GRWM voiceover", handle: "@morning.rituals", difficulty: "medium", duration: "0:38", cat: "talking", forks: "980" },
-    { emoji: "📱", grad: "linear-gradient(155deg,#4b4b4b,#171717)", hook: "This app saved me 4 hours a day", title: "Software product demo", handle: "@shipfast.co", difficulty: "hard", duration: "0:41", cat: "product", forks: "2.0k" },
-    { emoji: "📖", grad: "linear-gradient(160deg,#8fa3ff,#4f46e5)", hook: "AITA for quitting on day one?", title: "Reddit story + gameplay", handle: "@story.loops", difficulty: "medium", duration: "0:52", cat: "story", forks: "4.3k" },
-    { emoji: "🏆", grad: "linear-gradient(150deg,#ffd76a,#fb7185)", hook: "Top 10 hooks that actually convert", title: "Ranking / tier list", handle: "@viral.teardown", difficulty: "medium", duration: "0:35", cat: "listicle", forks: "2.7k" },
-    { emoji: "💬", grad: "linear-gradient(160deg,#5eead4,#0d9488)", hook: "I doubled my revenue in 60 days", title: "Testimonial UGC", handle: "@case.studies", difficulty: "easy", duration: "0:24", cat: "ugc", forks: "1.5k" },
-    { emoji: "📊", grad: "linear-gradient(150deg,#ffe08a,#38bdf8)", hook: "The chart that broke the internet", title: "Data-viz explainer", handle: "@number.go.up", difficulty: "hard", duration: "0:29", cat: "explainer", forks: "890" },
-    { emoji: "🎬", grad: "linear-gradient(160deg,#c084fc,#1e1b4b)", hook: "One shot. No cuts.", title: "Cinematic short", handle: "@one.take", difficulty: "expert", duration: "0:47", cat: "story", forks: "670" }
-];
-// The swipe deck — a curated front-to-back run through the strongest formats.
-const SWIPE_CARDS = [
-    CARDS[0], // Skincare UGC
-    CARDS[4], // Meme recaption
-    CARDS[2], // Kinetic explainer
-    CARDS[7], // Reddit story
-    CARDS[1] // Talking-head monologue
-];
-const CATEGORIES = [
-    {
-        slug: "ugc", label: "UGC ad", emoji: "💄", tile: "rk-tile-coral", count: 128,
-        blurb: "Creator-style ads that feel like a recommendation, not an ad.",
-        thumbs: [
-            { emoji: "💄", grad: "linear-gradient(150deg,#ffd76a,#f97316)" },
-            { emoji: "💬", grad: "linear-gradient(160deg,#5eead4,#0d9488)" },
-            { emoji: "🧴", grad: "linear-gradient(150deg,#ffc9d4,#f472b6)" },
-            { emoji: "🛍️", grad: "linear-gradient(155deg,#ffb27a,#f43f5e)" }
-        ]
-    },
-    {
-        slug: "talking", label: "Talking head", emoji: "🎙️", tile: "rk-tile-sky", count: 96,
-        blurb: "Straight-to-camera monologues with punchy captioned hooks.",
-        thumbs: [
-            { emoji: "🎙️", grad: "linear-gradient(160deg,#6cc0f5,#3f9fe0)" },
-            { emoji: "✨", grad: "linear-gradient(155deg,#ffc9d4,#f472b6)" },
-            { emoji: "🗣️", grad: "linear-gradient(160deg,#8fa3ff,#4f46e5)" }
-        ]
-    },
-    {
-        slug: "explainer", label: "Explainer", emoji: "🧠", tile: "rk-tile-violet", count: 74,
-        blurb: "Kinetic typography and diagrams that make an idea click.",
-        thumbs: [
-            { emoji: "🧠", grad: "linear-gradient(155deg,#c4a0ee,#7c3aed)" },
-            { emoji: "📊", grad: "linear-gradient(150deg,#ffe08a,#38bdf8)" },
-            { emoji: "🔗", grad: "linear-gradient(160deg,#a5b4fc,#6366f1)" },
-            { emoji: "💡", grad: "linear-gradient(150deg,#ffe08a,#f59e0b)" }
-        ]
-    },
-    {
-        slug: "listicle", label: "Listicle", emoji: "🔟", tile: "rk-tile-green", count: 63,
-        blurb: "Countdowns, tier lists and ranked picks that keep watch time high.",
-        thumbs: [
-            { emoji: "🔟", grad: "linear-gradient(160deg,#7de0a3,#16a34a)" },
-            { emoji: "🏆", grad: "linear-gradient(150deg,#ffd76a,#fb7185)" },
-            { emoji: "⭐", grad: "linear-gradient(150deg,#ffe08a,#f97316)" }
-        ]
-    },
-    {
-        slug: "meme", label: "Meme", emoji: "😂", tile: "rk-tile-gold", count: 141,
-        blurb: "Recaptioned reactions and relatable brainrot for reach.",
-        thumbs: [
-            { emoji: "😂", grad: "linear-gradient(150deg,#ffb27a,#f43f5e)" },
-            { emoji: "🤡", grad: "linear-gradient(150deg,#ffd76a,#f97316)" },
-            { emoji: "🔥", grad: "linear-gradient(150deg,#fb923c,#ef4444)" },
-            { emoji: "💀", grad: "linear-gradient(160deg,#94a3b8,#334155)" }
-        ]
-    },
-    {
-        slug: "product", label: "Product demo", emoji: "📱", tile: "rk-tile-ink", count: 52,
-        blurb: "Screen-first walkthroughs that sell the feature in 30 seconds.",
-        thumbs: [
-            { emoji: "📱", grad: "linear-gradient(155deg,#4b4b4b,#171717)" },
-            { emoji: "🖥️", grad: "linear-gradient(160deg,#64748b,#0f172a)" },
-            { emoji: "⚡", grad: "linear-gradient(150deg,#ffe08a,#38bdf8)" }
-        ]
-    },
-    {
-        slug: "story", label: "Story", emoji: "📖", tile: "rk-tile-violet", count: 88,
-        blurb: "Narrated stories over satisfying gameplay or B-roll.",
-        thumbs: [
-            { emoji: "📖", grad: "linear-gradient(160deg,#8fa3ff,#4f46e5)" },
-            { emoji: "🎬", grad: "linear-gradient(160deg,#c084fc,#1e1b4b)" },
-            { emoji: "🎮", grad: "linear-gradient(160deg,#5eead4,#0d9488)" },
-            { emoji: "📜", grad: "linear-gradient(150deg,#ffd76a,#f59e0b)" }
-        ]
-    }
-];
-const FORK_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.4"/><circle cx="6" cy="18" r="2.4"/><circle cx="18" cy="7" r="2.4"/><path d="M6 8.4v7.2M18 9.4c0 3-3 3.6-6 4.2"/></svg>`;
-// ── feed: poster card ──────────────────────────────────────────────────────
-// Deliberately calm: just the duration overlay on the poster, ONE plain muted
-// meta line (handle · forks — not pills), and the single gold Fork CTA.
-function posterCard(c) {
-    return `<article class="rk-discover-card rk-card-hover">
-    <div class="rk-discover-poster" style="background:${c.grad}">
-      <span class="rk-discover-poster-glyph" aria-hidden="true">${c.emoji}</span>
-      <span class="rk-discover-dur">${c.duration}</span>
-      <div class="rk-discover-scrim"></div>
-      <p class="rk-discover-hook">${c.hook}</p>
-    </div>
-    <div class="rk-discover-body">
-      <div class="rk-discover-titlewrap">
-        <h3 class="rk-discover-title">${c.title}</h3>
-        <p class="rk-discover-metaline">${c.handle} · ${c.forks} forks</p>
-      </div>
-      <button type="button" class="rk-btn rk-btn-gold rk-btn-sm rk-btn-block rk-discover-fork">${FORK_ICON} Fork template</button>
-    </div>
-  </article>`;
+// Functional (non-decorative) SVG glyphs.
+const EDIT_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z"/></svg>`;
+const COPY_ICON = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M6 15H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v1"/></svg>`;
+const IDCHECK_ICON = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 12.5l5 5 10-11"/></svg>`;
+const BOOKMARK_ICON = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21l-5-3.4L7 21V5.2A2.2 2.2 0 0 1 9.2 3h5.6A2.2 2.2 0 0 1 17 5.2z"/></svg>`;
+const CHECK_ICON = `<svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 12.5l5 5 10-11"/></svg>`;
+const CROSS_ICON = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6L6 18"/></svg>`;
+const SOUND_ON_ICON = `<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5 6 9H3v6h3l5 4z"/><path d="M15.5 8.5a5 5 0 0 1 0 7"/><path d="M18.5 6a9 9 0 0 1 0 12"/></svg>`;
+const SOUND_OFF_ICON = `<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 5 6 9H3v6h3l5 4z"/><path d="m16 9.5 5 5M21 9.5l-5 5"/></svg>`;
+const CHEV_UP_ICON = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 14.5 7-7 7 7"/></svg>`;
+const CHEV_DOWN_ICON = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="m5 9.5 7 7 7-7"/></svg>`;
+const PLAY_ICON = `<svg width="56" height="56" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5.4v13.2L19 12z"/></svg>`;
+const PLUS_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>`;
+const UPLOAD_ICON = `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/></svg>`;
+/** Safe JSON embedding inside a <script> tag (mirrors page-shell.escapeJsonForHtml). */
+function jsonForScript(value) {
+    return JSON.stringify(value ?? null)
+        .replace(/</g, "\\u003c")
+        .replace(/>/g, "\\u003e")
+        .replace(/&/g, "\\u0026")
+        .replace(/\u2028/g, "\\u2028")
+        .replace(/\u2029/g, "\\u2029");
 }
-// ── swipe: single deck card (full-bleed poster with overlaid info) ──────────
-function swipeCard(c, i) {
-    const z = 20 - i;
-    const scale = (1 - i * 0.045).toFixed(3);
-    const ty = i * 12;
-    const op = i === 0 ? 1 : i === 1 ? 0.92 : 0.82;
-    const hidden = i > 2 ? "display:none;" : "";
-    const style = `z-index:${z};transform:translateY(${ty}px) scale(${scale});opacity:${op};${hidden}`;
-    return `<article class="rk-discover-swipe${i === 0 ? " is-front" : ""}" data-swipe style="${style}">
-    <div class="rk-discover-swipe-art" style="background:${c.grad}"></div>
-    <span class="rk-discover-poster-glyph" aria-hidden="true">${c.emoji}</span>
-    <span class="rk-discover-dur">${c.duration}</span>
-    <div class="rk-discover-swipe-scrim"></div>
-    <div class="rk-discover-swipe-info">
-      <p class="rk-discover-hook">${c.hook}</p>
-      <div class="rk-discover-swipe-foot">
-        <div class="rk-discover-swipe-title">${c.title}</div>
-        <div class="rk-discover-swipe-handle">${c.handle} · ${c.forks} forks</div>
-      </div>
-    </div>
-  </article>`;
+// The segmented Feed / Swipe / Categories toggle (three real links).
+function modeToggle(active) {
+    const links = MODES.map((m) => {
+        const on = m.mode === active ? " is-active" : "";
+        return `<a class="rk-discover-mode${on}" href="/discover/${m.mode}"${m.mode === active ? ' aria-current="page"' : ""}>${m.label}</a>`;
+    }).join("");
+    return `<nav class="rk-discover-modes" aria-label="Discover mode">${links}</nav>`;
 }
-// ── categories: one browse card ─────────────────────────────────────────────
-function categoryCard(g) {
-    const thumbs = g.thumbs
-        .map((t) => `<span class="rk-discover-mini" style="background:${t.grad}">${t.emoji}</span>`)
-        .join("");
-    return `<a class="rk-discover-cat rk-card-hover" href="/reskin/discover/feed" data-cat="${g.slug}">
+// Server-rendered category skeleton from the real POPULAR_INSPIRATION_GROUPS
+// manifest — always renders (real group labels + real format counts) even
+// before/without the /discover/popular fetch, so categories mode is never blank
+// and degrades gracefully offline. The client enriches each card with real
+// thumbnails + wires an in-page reveal of that group's real templates.
+function categorySkeleton() {
+    return POPULAR_INSPIRATION_GROUPS.map((g) => {
+        const count = g.items.length;
+        const blurb = g.items.slice(0, 4).map((i) => i.title).join(" · ");
+        const fallbackQuery = encodeURIComponent(g.label);
+        // Placeholder thumb tiles (no media yet) keep the card height stable; the
+        // client swaps in real poster media once /discover/popular resolves.
+        const thumbs = Array.from({ length: 4 })
+            .map(() => `<span class="rk-discover-mini rk-discover-mini-ph"></span>`)
+            .join("");
+        return `<a class="rk-discover-cat rk-card-hover" href="/discover?q=${fallbackQuery}" data-rk-cat="${rkEscape(g.label)}">
     <div class="rk-discover-cat-head">
       <div class="rk-discover-cat-titlewrap">
-        <h3 class="rk-discover-cat-title">${g.label}</h3>
-        <p class="rk-discover-cat-count">${g.count} templates</p>
+        <h3 class="rk-discover-cat-title">${rkEscape(g.label)}</h3>
+        <p class="rk-discover-cat-count" data-rk-cat-count>${count} format${count === 1 ? "" : "s"}</p>
       </div>
-      <span class="rk-discover-cat-arrow" aria-hidden="true">→</span>
+      <span class="rk-discover-cat-arrow" aria-hidden="true">&rarr;</span>
     </div>
-    <p class="rk-discover-cat-blurb">${g.blurb}</p>
-    <div class="rk-discover-cat-thumbs">${thumbs}</div>
+    <div class="rk-discover-cat-thumbs" data-rk-cat-thumbs>${thumbs}</div>
+    <p class="rk-discover-cat-blurb">${rkEscape(blurb)}</p>
   </a>`;
-}
-// ── the segmented Feed / Swipe / Categories toggle (three real links) ───────
-function modeToggle(active) {
-    const links = MODES.map((m) => {
-        const on = m.mode === active ? " is-active" : "";
-        return `<a class="rk-discover-mode${on}" href="/reskin/discover/${m.mode}"${m.mode === active ? ' aria-current="page"' : ""}>${m.label}</a>`;
     }).join("");
-    return `<nav class="rk-discover-modes" aria-label="Discover mode">${links}</nav>`;
 }
-export function renderReskinDiscover(mode = "feed") {
+// The fullscreen TikTok-style viewer shell — shared by feed and categories
+// (the client script fills [data-viewer-track] with slides on open).
+function viewerHtml() {
+    return `
+    <div class="rk-discover-viewer" data-rk-viewer hidden role="dialog" aria-modal="true" aria-label="Template viewer">
+      <div class="rk-discover-viewer-scrim" data-viewer-close></div>
+      <div class="rk-discover-viewer-track" data-viewer-track></div>
+      <div class="rk-discover-viewer-ui">
+        <button type="button" class="rk-discover-viewer-btn" data-viewer-mute aria-label="Toggle sound"><span class="rk-dvm-on">${SOUND_ON_ICON}</span><span class="rk-dvm-off">${SOUND_OFF_ICON}</span></button>
+        <button type="button" class="rk-discover-viewer-btn" data-viewer-close aria-label="Close viewer">${CROSS_ICON}</button>
+      </div>
+      <div class="rk-discover-viewer-nav">
+        <button type="button" class="rk-discover-viewer-btn" data-viewer-prev aria-label="Previous template">${CHEV_UP_ICON}</button>
+        <button type="button" class="rk-discover-viewer-btn" data-viewer-next aria-label="Next template">${CHEV_DOWN_ICON}</button>
+      </div>
+    </div>`;
+}
+// The "Add New" modal (feed mode only) — paste a social video URL or upload a
+// video, adding it to the caller's private Discover feed via the same real
+// endpoints the old React SPA used (POST /discover/templates + the upload
+// presign pair). Mirrors the old UI's Add Template modal, farmville-styled.
+function addModalHtml() {
+    return `
+    <div class="rk-add-modal" data-rk-add-modal hidden role="dialog" aria-modal="true" aria-labelledby="rk-add-title">
+      <div class="rk-add-scrim" data-rk-add-close></div>
+      <div class="rk-add-card">
+        <div class="rk-add-head">
+          <h2 class="rk-add-title" id="rk-add-title">Add to your feed</h2>
+          <button type="button" class="rk-add-x" data-rk-add-close aria-label="Close">${CROSS_ICON}</button>
+        </div>
+        <p class="rk-add-sub">Paste a TikTok, YouTube, Twitter/X, or Instagram video link &mdash; or upload a video from your computer. It's added to your Discover feed, visible only to your account.</p>
+        <form class="rk-add-form" data-rk-add-form>
+          <div class="rk-add-field">
+            <label class="rk-add-label" for="rk-add-url">Video URL</label>
+            <input class="rk-add-input" id="rk-add-url" type="url" placeholder="https://www.tiktok.com/@&hellip;" autocomplete="off" data-rk-add-url />
+          </div>
+          <div class="rk-add-or"><span>or</span></div>
+          <label class="rk-add-file" data-rk-add-filelabel>
+            <input type="file" accept="video/*,.mp4,.mov,.webm,.m4v" data-rk-add-file />
+            <span class="rk-add-file-ic">${UPLOAD_ICON}</span>
+            <span class="rk-add-file-text" data-rk-add-filetext>Upload a video<span class="rk-add-optional">MP4 / MOV / WebM, up to 200 MB</span></span>
+          </label>
+          <div class="rk-add-field">
+            <label class="rk-add-label" for="rk-add-tagline">Tagline <span class="rk-add-optional">optional</span></label>
+            <input class="rk-add-input" id="rk-add-tagline" type="text" placeholder="What makes it work" autocomplete="off" data-rk-add-tagline />
+          </div>
+          <div class="rk-add-field">
+            <label class="rk-add-label" for="rk-add-notes">Notes <span class="rk-add-optional">optional</span></label>
+            <textarea class="rk-add-input rk-add-textarea" id="rk-add-notes" rows="2" placeholder="Anything to remember about this one" data-rk-add-notes></textarea>
+          </div>
+          <p class="rk-add-error" data-rk-add-error hidden></p>
+          <div class="rk-add-actions">
+            <button type="button" class="rk-btn rk-btn-ghost" data-rk-add-close>Cancel</button>
+            <button type="submit" class="rk-btn rk-btn-gold" data-rk-add-submit>Add to feed</button>
+          </div>
+        </form>
+      </div>
+    </div>`;
+}
+export function renderReskinDiscover(mode = "feed", input = {}) {
     const copy = MODE_COPY[mode];
-    // ── FEED ──────────────────────────────────────────────────────────────────
+    // feedInitial/feedFetchedAt only make sense in feed mode; drop them elsewhere
+    // so swipe/categories boots stay lean.
+    const { feedInitial, feedFetchedAt, ...cfg } = input;
+    const boot = {
+        ...DEFAULT_INPUT,
+        ...cfg,
+        feedInitial: mode === "feed" ? feedInitial ?? null : null,
+        feedFetchedAt: mode === "feed" ? feedFetchedAt ?? null : null
+    };
     let modeBody = "";
+    // ── FEED ────────────────────────────────────────────────────────────────
     if (mode === "feed") {
-        const cards = CARDS.map(posterCard).join("");
-        modeBody = `<div class="rk-discover-grid">${cards}</div>`;
+        modeBody = `
+    <div class="rk-discover-feed" data-rk-feed>
+      <div class="rk-discover-grid" data-rk-grid></div>
+      <div class="rk-discover-state" data-rk-state>Loading templates&hellip;</div>
+    </div>${viewerHtml()}`;
     }
-    // ── SWIPE ─────────────────────────────────────────────────────────────────
+    // Feed's quick search + bookmarked-only chip share the toolbar row with the
+    // mode toggle.
+    const toolbarSearch = mode === "feed"
+        ? `<label class="rk-discover-search">
+      <span class="rk-discover-search-ic" aria-hidden="true"><svg width="18" height="18" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="8.5" cy="8.5" r="5.8"/><path d="m13 13 4.2 4.2"/></svg></span>
+      <input type="search" data-rk-search placeholder="Search templates" autocomplete="off" aria-label="Search templates" />
+    </label>
+    <button type="button" class="rk-discover-bmfilter" data-rk-bmfilter aria-pressed="false" title="Show bookmarked templates only">${BOOKMARK_ICON}<span class="rk-discover-bmfilter-count" data-rk-bmcount></span></button>`
+        : "";
+    // Categories' in-page group reveal header ("← All categories" + the group
+    // title) lives IN the toolbar row, next to the mode toggle (user feedback);
+    // the client unhides it while a group is revealed.
+    const toolbarReveal = mode === "categories"
+        ? `<div class="rk-discover-reveal-head" data-rk-reveal-head hidden>
+      <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" data-rk-cat-back>&larr; All categories</button>
+      <h2 class="rk-discover-reveal-title" data-rk-reveal-title></h2>
+    </div>`
+        : "";
+    // ── SWIPE ───────────────────────────────────────────────────────────────
     if (mode === "swipe") {
-        const deck = SWIPE_CARDS.map((c, i) => swipeCard(c, i)).join("");
         modeBody = `
-    <div class="rk-discover-swipe-wrap">
-      <p class="rk-discover-helper">Tap <b>✓ Fork</b> to recut a template into an ad for your brand, or <b>✕ Skip</b> to see the next one.</p>
-      <div class="rk-discover-deck" data-deck>
-        ${deck}
-        <div class="rk-discover-empty" data-empty hidden>
-          <h3>You're all caught up</h3>
-          <p class="rk-muted">We're lining up fresh templates that match your brand.</p>
-          <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" data-restart>↻ Reshuffle the deck</button>
+    <div class="rk-discover-swipe-wrap" data-rk-swipe>
+      <div class="rk-discover-stage">
+        <button type="button" class="rk-discover-act rk-discover-act-skip" data-swipe-skip data-swipe-act hidden aria-label="Skip">${CROSS_ICON}</button>
+        <div class="rk-discover-deck" data-deck>
+          <button type="button" class="rk-discover-sound-toggle" data-swipe-sound hidden aria-label="Unmute" aria-pressed="false">${SOUND_OFF_ICON}</button>
+          <div class="rk-discover-swipe-state" data-rk-swipe-state>Loading your deck&hellip;</div>
         </div>
+        <button type="button" class="rk-discover-act rk-discover-act-fork" data-swipe-fork data-swipe-act hidden aria-label="Fork">${CHECK_ICON}</button>
       </div>
-      <div class="rk-discover-actions" data-actions>
-        <button type="button" class="rk-discover-act rk-discover-act-skip" data-swipe-skip aria-label="Skip">✕</button>
-        <button type="button" class="rk-discover-act rk-discover-act-fork" data-swipe-fork aria-label="Fork">✓</button>
-      </div>
-      <p class="rk-discover-act-hint" data-actions-hint>Swipe to customize into an ad for your brand.</p>
+      <p class="rk-discover-act-hint" data-actions-hint hidden>Swipe to customize into an ad for your brand.</p>
     </div>`;
     }
-    // ── CATEGORIES ────────────────────────────────────────────────────────────
+    // ── CATEGORIES ──────────────────────────────────────────────────────────
     if (mode === "categories") {
-        const cats = CATEGORIES.map(categoryCard).join("");
-        modeBody = `<div class="rk-discover-cats">${cats}</div>`;
+        modeBody = `
+    <div class="rk-discover-catwrap" data-rk-cats>
+      <div class="rk-discover-cats" data-rk-cats-grid>${categorySkeleton()}</div>
+      <section class="rk-discover-cat-reveal" data-rk-cat-reveal hidden>
+        <div class="rk-discover-grid" data-rk-reveal-grid></div>
+      </section>
+      <div class="rk-discover-state rk-discover-cats-state" data-rk-cats-state hidden></div>
+    </div>${viewerHtml()}`;
     }
+    // "Add New" lives top-right of the page head (feed mode only) — opens the
+    // Add modal when signed in, else routes to /login (mirrors the old UI).
+    const addNewBtn = mode === "feed"
+        ? (boot.isLoggedIn
+            ? `<button type="button" class="rk-btn rk-btn-gold rk-discover-add" data-rk-add>${PLUS_ICON}<span>Add New</span></button>`
+            : `<a class="rk-btn rk-btn-gold rk-discover-add" href="/login">${PLUS_ICON}<span>Add New</span></a>`)
+        : "";
     const body = `
 <main class="rk-container rk-page">
   <div class="rk-page-head rk-discover-head">
-    <span class="rk-badge">${copy.badge}</span>
-    <h1 class="rk-h1">Discover</h1>
-    <p class="rk-sub">${copy.sub}</p>
+    <div class="rk-discover-headtext">
+      <h1 class="rk-h1">Discover</h1>
+      <p class="rk-sub">${copy.sub}</p>
+    </div>
+    ${addNewBtn}
+  </div>
+  <div class="rk-discover-toolbar">
+    ${modeToggle(mode)}
+    ${toolbarReveal}
+    ${toolbarSearch}
   </div>
-  ${modeToggle(mode)}
   ${modeBody}
+  ${mode === "feed" ? addModalHtml() : ""}
+  <script type="application/json" data-rk-discover-boot>${jsonForScript(boot)}</script>
 </main>`;
     const pageCss = `
-.rk-discover-head{margin-bottom:22px}
+/* head row: title block on the left, "Add New" CTA pinned top-right */
+.rk-discover-head{margin-bottom:22px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
+.rk-discover-headtext{display:grid;gap:4px;min-width:0}
+.rk-discover-add{flex:none;align-self:flex-start}
+.rk-discover-add svg{margin-top:-1px}
+@media(max-width:520px){
+  .rk-discover-add span{display:none}
+  .rk-discover-add{padding:11px}
+}
+
+/* ── "Add New" modal ── */
+.rk-add-modal{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:20px}
+.rk-add-modal[hidden]{display:none}
+.rk-add-scrim{position:absolute;inset:0;background:rgba(15,12,5,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
+.rk-add-card{position:relative;z-index:1;width:min(480px,100%);max-height:calc(100vh - 40px);overflow:auto;
+  background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-xl);padding:24px 24px 22px}
+.rk-add-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
+.rk-add-title{font-family:var(--rk-font-display);font-size:var(--rk-text-xl);font-weight:800;color:var(--rk-ink);letter-spacing:-.02em}
+.rk-add-x{flex:none;width:34px;height:34px;border-radius:var(--rk-r-full);border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-600);
+  display:grid;place-items:center;cursor:pointer;transition:color var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-add-x:hover{color:var(--rk-ink);border-color:var(--rk-border-strong)}
+.rk-add-x svg{width:16px;height:16px}
+.rk-add-sub{font-size:13px;color:var(--rk-text-muted);line-height:1.5;margin-bottom:18px}
+.rk-add-form{display:grid;gap:14px}
+.rk-add-field{display:grid;gap:6px}
+.rk-add-label{font-size:12.5px;font-weight:700;color:var(--rk-n-700)}
+.rk-add-optional{font-weight:500;color:var(--rk-text-faint)}
+.rk-add-input{width:100%;box-sizing:border-box;border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-lg);
+  background:#fff;padding:11px 14px;font-family:var(--rk-font-body);font-size:14px;color:var(--rk-ink);outline:none;
+  transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-add-input::placeholder{color:var(--rk-n-400)}
+.rk-add-input:focus{border-color:var(--rk-gold-600);box-shadow:var(--rk-ring-gold)}
+.rk-add-textarea{resize:vertical;min-height:52px;line-height:1.45}
+.rk-add-or{display:flex;align-items:center;gap:12px;color:var(--rk-text-faint);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
+.rk-add-or::before,.rk-add-or::after{content:"";height:1px;flex:1;background:var(--rk-border)}
+.rk-add-file{display:flex;align-items:center;gap:12px;border:1px dashed var(--rk-border-strong);border-radius:var(--rk-r-lg);
+  padding:13px 14px;cursor:pointer;color:var(--rk-n-700);
+  transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.rk-add-file:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
+.rk-add-file input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
+.rk-add-file-ic{flex:none;color:var(--rk-gold-700);display:grid;place-items:center}
+.rk-add-file-text{font-size:13.5px;font-weight:600;display:grid;gap:2px;min-width:0}
+.rk-add-file-text .rk-add-optional{font-size:11.5px;font-weight:500}
+.rk-add-file.is-picked{border-style:solid;border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
+.rk-add-error{font-size:13px;color:#b91c1c;background:var(--rk-red-tint);border:1px solid #fecaca;border-radius:var(--rk-r-lg);padding:9px 12px;font-weight:500;line-height:1.4}
+.rk-add-error[hidden]{display:none}
+.rk-add-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
+.rk-add-actions .rk-btn[disabled]{opacity:.6;cursor:default;transform:none}
+
+/* toolbar row: mode toggle + (feed) quick search share one line, wrap on mobile */
+.rk-discover-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}
 
 /* segmented Feed / Swipe / Categories toggle — three real links, gold active */
-.rk-discover-modes{display:inline-flex;gap:4px;background:var(--rk-n-100);border:1px solid var(--rk-border);
-  border-radius:var(--rk-r-full);padding:4px;box-shadow:var(--rk-shadow-xs);margin-bottom:28px;max-width:100%;overflow:auto;scrollbar-width:none}
+.rk-discover-modes{display:inline-flex;flex:none;gap:4px;background:var(--rk-n-100);border:1px solid var(--rk-border);
+  border-radius:var(--rk-r-full);padding:4px;box-shadow:var(--rk-shadow-xs);max-width:100%;overflow:auto;scrollbar-width:none}
 .rk-discover-modes::-webkit-scrollbar{display:none}
 .rk-discover-mode{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--rk-r-full);
   font-size:14px;font-weight:600;color:var(--rk-n-600);white-space:nowrap;
@@ -247,62 +339,209 @@ export function renderReskinDiscover(mode = "feed") {
 .rk-discover-mode:hover{color:var(--rk-ink)}
 .rk-discover-mode.is-active{background:var(--rk-gold-500);color:var(--rk-ink);font-weight:700;box-shadow:var(--rk-shadow-sm)}
 
-/* ── feed: poster grid ── */
+/* ── feed: quick search (lives in the toolbar row) + poster grid ── */
+.rk-discover-search{flex:1;min-width:220px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--rk-border-strong);
+  border-radius:var(--rk-r-full);padding:10px 16px;box-shadow:var(--rk-shadow-xs);
+  transition:border-color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-discover-search:focus-within{border-color:var(--rk-gold-600);box-shadow:var(--rk-ring-gold)}
+.rk-discover-search-ic{color:var(--rk-text-faint);display:grid;place-items:center;flex:none}
+.rk-discover-search input{flex:1;min-width:0;border:0;outline:none;background:transparent;font-family:var(--rk-font-body);font-size:14px;color:var(--rk-ink)}
+.rk-discover-search input::placeholder{color:var(--rk-n-400)}
+
 .rk-discover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:22px}
 @media(max-width:520px){.rk-discover-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}}
-.rk-discover-card{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);overflow:hidden;box-shadow:var(--rk-shadow-card);display:flex;flex-direction:column}
-.rk-discover-poster{position:relative;aspect-ratio:9/16;display:flex;align-items:flex-end;overflow:hidden}
-.rk-discover-poster-glyph{position:absolute;inset:0;z-index:0;display:grid;place-items:center;font-size:3.2rem;line-height:1;
-  opacity:.92;filter:drop-shadow(0 2px 10px rgba(0,0,0,.2))}
-.rk-discover-dur{position:absolute;top:14px;right:12px;z-index:3;font-family:var(--rk-font-body);font-size:11.5px;font-weight:700;color:#fff;
-  background:rgba(0,0,0,.34);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:4px 9px;border-radius:var(--rk-r-full)}
-.rk-discover-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,.14) 38%,transparent 62%)}
-.rk-discover-hook{position:relative;z-index:2;margin:0;padding:16px 15px 17px;font-family:var(--rk-font-display);font-weight:800;font-size:1.12rem;
-  line-height:1.12;letter-spacing:-.02em;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.35)}
-.rk-discover-body{padding:15px 16px 16px;display:grid;gap:13px}
-.rk-discover-titlewrap{display:grid;gap:4px}
-.rk-discover-title{font-family:var(--rk-font-display);font-size:1.02rem;font-weight:700;letter-spacing:-.01em;color:var(--rk-ink);line-height:1.2}
-.rk-discover-metaline{font-size:12.5px;font-weight:500;color:var(--rk-text-muted)}
+.rk-discover-card{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);overflow:hidden;box-shadow:var(--rk-shadow-card);display:flex;flex-direction:column;min-width:0}
+.rk-discover-poster{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;background:var(--rk-n-100);color:inherit}
+.rk-discover-poster img,.rk-discover-poster video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
+.rk-discover-media-empty{position:absolute;inset:0;display:grid;place-items:center;font-size:12.5px;font-weight:600;color:var(--rk-text-faint);
+  background:repeating-linear-gradient(135deg,var(--rk-n-100),var(--rk-n-100) 12px,var(--rk-n-50) 12px,var(--rk-n-50) 24px)}
+.rk-discover-dur{position:absolute;top:12px;right:12px;z-index:3;font-family:var(--rk-font-body);font-size:11.5px;font-weight:700;color:#fff;
+  background:rgba(0,0,0,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:4px 9px;border-radius:var(--rk-r-full)}
+.rk-discover-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.28) 0%,transparent 42%)}
+/* wrap = positioning context so the bookmark button can sit NEXT TO (not
+   inside) the poster anchor — a button inside an <a> is invalid HTML */
+.rk-discover-posterwrap{position:relative}
+.rk-discover-bm{position:absolute;right:10px;bottom:10px;z-index:4;width:34px;height:34px;border:0;border-radius:var(--rk-r-full);
+  display:none;place-items:center;color:#fff;background:rgba(0,0,0,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;
+  transition:transform var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.rk-discover-posterwrap:hover .rk-discover-bm{display:grid}
+/* touch has no hover, so always show the bookmark button there (else you can
+   never save a not-yet-bookmarked card from the grid) */
+@media(hover:none){.rk-discover-bm{display:grid}}
+.rk-discover-bm:hover{transform:scale(1.08);background:rgba(0,0,0,.6)}
+.rk-discover-bm.is-on{display:grid;background:var(--rk-gold-500);color:var(--rk-ink)}
+.rk-discover-bm.is-on svg{fill:currentColor}
+.rk-discover-body{padding:15px 16px 16px;display:grid;gap:13px;min-width:0}
+.rk-discover-titlewrap{display:grid;gap:6px;min-width:0}
+.rk-discover-title{font-family:var(--rk-font-display);font-size:1.02rem;font-weight:700;letter-spacing:-.01em;color:var(--rk-ink);line-height:1.2;
+  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.rk-discover-desc{font-size:12.5px;font-weight:500;color:var(--rk-text-muted);line-height:1.4;
+  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.rk-discover-idchip{justify-self:start;display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;
+  padding:3px 8px;border-radius:999px;background:var(--rk-surface-2,rgba(0,0,0,.05));
+  font-family:var(--rk-font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:11px;font-weight:600;
+  color:var(--rk-text-muted);cursor:pointer;border:0;line-height:1.4;transition:background .15s,color .15s;
+  -webkit-user-select:none;user-select:none;box-sizing:border-box}
+.rk-discover-idchip:hover{background:var(--rk-surface-3,rgba(0,0,0,.09));color:var(--rk-ink)}
+.rk-discover-idchip svg{flex:0 0 auto;opacity:.7}
+.rk-discover-idchip .rk-idchip-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-discover-idchip.is-copied{background:rgba(52,168,110,.16);color:#1f7a4d}
+.rk-discover-idchip.is-copied svg{opacity:1;color:#1f7a4d}
 .rk-discover-fork{gap:7px}
 .rk-discover-fork svg{margin-top:-1px}
+.rk-discover-fork-disabled{opacity:.6;cursor:default;pointer-events:none}
+.rk-discover-badges{display:flex;flex-wrap:wrap;gap:6px}
+
+/* hover-to-unmute speaker badge (video posters only): hidden until hover,
+   flips to a gold "sound on" chip once the browser actually allows audio */
+.rk-discover-sound{position:absolute;left:12px;bottom:12px;z-index:3;width:32px;height:32px;display:none;place-items:center;color:#fff;
+  background:rgba(0,0,0,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:var(--rk-r-full);pointer-events:none}
+.rk-discover-sound span{display:grid;place-items:center;line-height:0}
+.rk-discover-posterwrap:hover .rk-discover-sound{display:grid}
+.rk-discover-sound .rk-ds-on{display:none}
+.rk-discover-posterwrap.is-sound .rk-discover-sound{display:grid;background:var(--rk-gold-500);color:var(--rk-ink)}
+.rk-discover-posterwrap.is-sound .rk-ds-on{display:grid}
+.rk-discover-posterwrap.is-sound .rk-ds-off{display:none}
+
+/* bookmarked-only toolbar chip (feed) — count span collapses when empty */
+.rk-discover-bmfilter{flex:none;display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:var(--rk-r-full);
+  border:1px solid var(--rk-border-strong);background:#fff;color:var(--rk-n-600);font-family:var(--rk-font-body);font-size:13px;font-weight:700;
+  cursor:pointer;box-shadow:var(--rk-shadow-xs);
+  transition:color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-discover-bmfilter:hover{color:var(--rk-ink);border-color:var(--rk-gold-600)}
+.rk-discover-bmfilter.is-active{background:var(--rk-gold-500);border-color:transparent;color:var(--rk-ink)}
+.rk-discover-bmfilter.is-active svg{fill:currentColor}
+.rk-discover-bmfilter-count:empty{display:none}
+
+/* load / empty / error state (feed + categories) */
+.rk-discover-state{padding:48px 16px;text-align:center;color:var(--rk-text-muted);font-size:14px;
+  background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);box-shadow:var(--rk-shadow-xs)}
+.rk-discover-state[hidden]{display:none}
+.rk-discover-state.is-error{color:#b91c1c;background:var(--rk-red-tint);border-color:#fecaca;font-weight:500}
+.rk-discover-state .rk-btn{margin-top:14px}
+
+/* ── feed: TikTok-style fullscreen viewer (click a card → vertical deck) ── */
+html.rk-noscroll,html.rk-noscroll body{overflow:hidden}
+.rk-discover-viewer{position:fixed;inset:0;z-index:120}
+.rk-discover-viewer[hidden]{display:none}
+.rk-discover-viewer-scrim{position:absolute;inset:0;background:rgba(15,12,5,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
+.rk-discover-viewer-track{position:absolute;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
+.rk-discover-viewer-track::-webkit-scrollbar{display:none}
+.rk-discover-viewer-slide{height:100%;display:grid;place-items:center;scroll-snap-align:start;scroll-snap-stop:always;padding:20px 0}
+.rk-discover-viewer-stage{position:relative;width:min(92vw,calc(93vh * 9 / 16));aspect-ratio:9/16;max-height:100%;margin:0;
+  border-radius:var(--rk-r-3xl);overflow:hidden;background:#000;box-shadow:var(--rk-shadow-xl)}
+.rk-discover-viewer-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
+video.rk-discover-viewer-media{cursor:pointer}
+.rk-discover-viewer-pause{position:absolute;inset:0;z-index:2;display:none;place-items:center;color:rgba(255,255,255,.92);pointer-events:none;
+  filter:drop-shadow(0 4px 14px rgba(0,0,0,.55))}
+.rk-discover-viewer-slide.is-paused .rk-discover-viewer-pause{display:grid}
+.rk-discover-viewer-shade{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:1;pointer-events:none;
+  background:linear-gradient(to top,rgba(0,0,0,.74) 0%,rgba(0,0,0,.22) 62%,transparent 100%)}
+/* right padding reserves the bookmark rail so text never runs under it */
+.rk-discover-viewer-info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:20px 78px 20px 20px;display:grid;gap:7px;justify-items:start;pointer-events:none}
+.rk-discover-viewer-bm{position:absolute;right:14px;bottom:22px;z-index:4;width:48px;height:48px;border-radius:var(--rk-r-full);
+  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
+  color:#fff;display:grid;place-items:center;cursor:pointer;
+  transition:background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
+.rk-discover-viewer-bm:hover{background:rgba(255,255,255,.26);transform:scale(1.06)}
+.rk-discover-viewer-bm.is-on{background:var(--rk-gold-500);border-color:transparent;color:var(--rk-ink)}
+.rk-discover-viewer-bm.is-on svg{fill:currentColor}
+.rk-discover-viewer-meta{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.72)}
+.rk-discover-viewer-title{font-family:var(--rk-font-display);font-weight:700;font-size:1.12rem;line-height:1.2;letter-spacing:-.01em;color:#fff}
+.rk-discover-viewer-desc{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.82);line-height:1.4;
+  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.rk-discover-viewer-fork{pointer-events:auto;gap:7px;margin-top:5px}
+.rk-discover-viewer-ui{position:absolute;top:max(16px,env(safe-area-inset-top,0px));right:16px;z-index:5;display:flex;gap:10px}
+.rk-discover-viewer-btn{width:44px;height:44px;border-radius:var(--rk-r-full);border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.12);
+  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;cursor:pointer;
+  transition:background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
+.rk-discover-viewer-btn:hover{background:rgba(255,255,255,.24);transform:scale(1.06)}
+.rk-discover-viewer-btn span{display:grid;place-items:center;line-height:0}
+.rk-discover-viewer .rk-dvm-off{display:none}
+.rk-discover-viewer.is-muted .rk-dvm-on{display:none}
+.rk-discover-viewer.is-muted .rk-dvm-off{display:grid}
+.rk-discover-viewer-nav{position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:5;display:grid;gap:12px}
+@media(hover:none){.rk-discover-viewer-nav{display:none}}
+@media(max-width:640px){
+  .rk-discover-viewer-nav{display:none}
+  .rk-discover-viewer-slide{padding:0}
+  .rk-discover-viewer-stage{width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;box-shadow:none}
+}
 
 /* ── swipe: single-card deck ── */
 .rk-discover-swipe-wrap{display:grid;justify-items:center;gap:18px;padding:4px 0 8px}
-.rk-discover-helper{font-size:14px;color:var(--rk-text-muted);text-align:center;max-width:440px}
-.rk-discover-helper b{color:var(--rk-ink);font-weight:700}
-.rk-discover-deck{position:relative;width:min(322px,84vw);aspect-ratio:9/16;margin:6px 0 44px}
-.rk-discover-swipe{position:absolute;inset:0;border-radius:var(--rk-r-3xl);overflow:hidden;border:1px solid var(--rk-border);
+.rk-discover-deck{position:relative;width:min(322px,84vw);aspect-ratio:9/16;margin:6px 0}
+.rk-discover-swipe-state{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;padding:28px;
+  background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-card);color:var(--rk-text-muted);font-size:14px}
+.rk-discover-swipe-state[hidden]{display:none}
+.rk-discover-swipe-state.is-error{color:#b91c1c}
+.rk-discover-swipe-state-title{font-family:var(--rk-font-display);font-size:var(--rk-text-lg);font-weight:700;color:var(--rk-ink)}
+.rk-discover-swipe-state .rk-btn{margin-top:6px}
+.rk-discover-spinner{width:30px;height:30px;border-radius:50%;border:3px solid var(--rk-gold-tint2);border-top-color:var(--rk-gold-700);animation:rk-discover-spin .8s linear infinite}
+@keyframes rk-discover-spin{to{transform:rotate(360deg)}}
+.rk-discover-swipe{position:absolute;inset:0;border-radius:var(--rk-r-3xl);overflow:hidden;border:1px solid var(--rk-border);background:#0b0b0b;
   box-shadow:var(--rk-shadow-xl);transform-origin:center bottom;will-change:transform;
   transition:transform .38s var(--rk-ease),opacity .38s var(--rk-ease)}
-.rk-discover-swipe-art{position:absolute;inset:0;z-index:0}
-.rk-discover-swipe .rk-discover-poster-glyph{font-size:5rem;opacity:.9}
-.rk-discover-swipe-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.2) 42%,rgba(0,0,0,.06) 66%,transparent 82%)}
-.rk-discover-swipe-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 20px 22px;display:grid;gap:14px}
-.rk-discover-swipe .rk-discover-hook{padding:0;font-size:1.5rem;line-height:1.08}
-.rk-discover-swipe-foot{display:grid;gap:4px;min-width:0}
-.rk-discover-swipe-title{font-family:var(--rk-font-display);font-weight:700;font-size:1.02rem;color:#fff;letter-spacing:-.01em;line-height:1.2}
-.rk-discover-swipe-handle{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.82)}
-
-.rk-discover-empty{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;padding:28px;
-  background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-card)}
-.rk-discover-empty h3{font-family:var(--rk-font-display);font-size:var(--rk-text-xl);color:var(--rk-ink)}
-.rk-discover-empty p{font-size:13.5px;max-width:230px}
-.rk-discover-empty .rk-btn{margin-top:8px}
-
-.rk-discover-actions{display:flex;align-items:center;justify-content:center;gap:20px}
+.rk-discover-swipe-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;pointer-events:none;background:#000}
+.rk-discover-swipe-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;
+  background:linear-gradient(155deg,#3a3a3a,#111);color:#fff;font-family:var(--rk-font-display);font-weight:700;font-size:1.1rem;line-height:1.15;
+  transition:opacity .4s var(--rk-ease)}
+.rk-discover-swipe-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.16) 46%,transparent 74%)}
+.rk-discover-swipe-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px;display:grid;gap:6px;pointer-events:none}
+.rk-discover-swipe-title{font-family:var(--rk-font-display);font-weight:700;font-size:1.05rem;color:#fff;letter-spacing:-.01em;line-height:1.18}
+.rk-discover-swipe-caption{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.84);line-height:1.35;
+  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+/* audio toggle — overlays the top-of-deck card, top-right; global mute state */
+.rk-discover-sound-toggle{position:absolute;top:12px;right:12px;z-index:40;width:38px;height:38px;border-radius:var(--rk-r-full);
+  border:0;display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(15,15,15,.5);backdrop-filter:blur(6px);
+  -webkit-backdrop-filter:blur(6px);box-shadow:0 2px 8px -2px rgba(0,0,0,.5);
+  transition:background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
+.rk-discover-sound-toggle[hidden]{display:none}
+.rk-discover-sound-toggle:hover{background:rgba(15,15,15,.72);transform:scale(1.06)}
+.rk-discover-sound-toggle.is-on{background:var(--rk-gold-500);color:var(--rk-ink)}
+.rk-discover-sound-toggle.is-on:hover{background:var(--rk-gold-700)}
+
+/* deck flanked by skip/fork — buttons ride the card's vertical center, 1fr gutters absorb spare width.
+   Explicit column placement keeps the deck centered when the buttons are display:none (empty/caught-up states). */
+.rk-discover-stage{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;width:100%}
+.rk-discover-deck{grid-column:2}
 .rk-discover-act{width:60px;height:60px;flex:none;border-radius:var(--rk-r-full);border:1px solid var(--rk-border);background:#fff;
-  display:grid;place-items:center;font-size:24px;font-weight:700;cursor:pointer;box-shadow:var(--rk-shadow-md);
-  transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+  display:grid;place-items:center;cursor:pointer;box-shadow:var(--rk-shadow-md);
+  transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-discover-act[hidden]{display:none}
+.rk-discover-act-skip{grid-column:1;justify-self:end}
+.rk-discover-act-fork{grid-column:3;justify-self:start}
+/* no side room on small phones — card spans, buttons drop under it as a pair */
+@media(max-width:560px){
+  .rk-discover-stage{grid-template-columns:auto auto;grid-template-areas:"deck deck" "skip fork";justify-content:center;column-gap:26px;row-gap:16px}
+  .rk-discover-deck{grid-area:deck}
+  .rk-discover-act-skip{grid-area:skip;justify-self:center}
+  .rk-discover-act-fork{grid-area:fork;justify-self:center}
+}
+/* short viewports (landscape phones, small laptops): the deck is sized by width
+   with a locked 9/16 ratio → ~570px tall, taller than the screen, so the card +
+   its flanking Skip/Fork controls fall off-screen. Cap it by HEIGHT instead and
+   let width follow the ratio (mirrors how the fullscreen viewer stage sizes). */
+@media(max-height:720px){
+  .rk-discover-deck{height:min(74vh,572px);width:auto}
+}
+@media(max-height:520px){
+  .rk-discover-head{margin-bottom:10px}
+  .rk-discover-swipe-wrap{gap:10px;padding:0}
+}
 .rk-discover-act:hover{transform:translateY(-2px);box-shadow:var(--rk-shadow-lg)}
+.rk-discover-act:disabled{opacity:.5;cursor:default;transform:none}
 .rk-discover-act-skip{color:var(--rk-n-500)}
 .rk-discover-act-skip:hover{color:var(--rk-red);border-color:var(--rk-red-tint)}
 .rk-discover-act-fork{background:var(--rk-gold-500);color:var(--rk-ink);border-color:transparent}
 .rk-discover-act-fork:hover{background:var(--rk-gold-700);box-shadow:0 8px 22px -6px rgba(252,185,0,.6)}
 .rk-discover-act-hint{font-size:12.5px;font-weight:600;color:var(--rk-text-faint);text-align:center;letter-spacing:.01em}
+.rk-discover-act-hint[hidden]{display:none}
 
 /* ── categories: browse-by-format cards ── */
 .rk-discover-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px}
 @media(max-width:560px){.rk-discover-cats{grid-template-columns:1fr}}
+.rk-discover-cats[hidden]{display:none}
 .rk-discover-cat{display:flex;flex-direction:column;gap:14px;background:var(--rk-surface);border:1px solid var(--rk-border);
   border-radius:var(--rk-r-3xl);padding:22px;box-shadow:var(--rk-shadow-card);color:inherit}
 .rk-discover-cat-head{display:flex;align-items:center;gap:14px}
@@ -311,70 +550,1002 @@ export function renderReskinDiscover(mode = "feed") {
 .rk-discover-cat-count{font-size:12.5px;font-weight:600;color:var(--rk-text-muted)}
 .rk-discover-cat-arrow{flex:none;font-size:18px;color:var(--rk-n-400);transition:transform var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
 .rk-discover-cat:hover .rk-discover-cat-arrow{transform:translateX(3px);color:var(--rk-gold-700)}
-.rk-discover-cat-blurb{font-size:13px;color:var(--rk-text-muted);line-height:1.45}
+.rk-discover-cat-blurb{font-size:13px;color:var(--rk-text-muted);line-height:1.45;
+  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .rk-discover-cat-thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
-.rk-discover-mini{aspect-ratio:9/16;border-radius:var(--rk-r-lg);display:grid;place-items:center;font-size:20px;box-shadow:var(--rk-shadow-xs)}
+.rk-discover-mini{position:relative;aspect-ratio:9/16;border-radius:var(--rk-r-lg);overflow:hidden;background:var(--rk-n-100);box-shadow:var(--rk-shadow-xs)}
+.rk-discover-mini img,.rk-discover-mini video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
+.rk-discover-mini-ph{background:linear-gradient(135deg,var(--rk-n-100),var(--rk-n-200))}
+
+.rk-discover-cat-reveal[hidden]{display:none}
+/* reveal header shares the toolbar row with the mode toggle (user feedback) */
+.rk-discover-reveal-head{display:flex;align-items:center;gap:12px;min-width:0}
+.rk-discover-reveal-head[hidden]{display:none}
+.rk-discover-reveal-title{font-family:var(--rk-font-display);font-size:var(--rk-text-xl);font-weight:800;color:var(--rk-ink);letter-spacing:-.02em;
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-discover-cats-state[hidden]{display:none}
 `;
     const script = `
 (function(){
   var root=document;
-  // ── swipe: advance the deck ──
-  var deck=root.querySelector('[data-deck]');
-  if(deck){
-    var empty=deck.querySelector('[data-empty]');
-    var actions=root.querySelector('[data-actions]');
-    var hint=root.querySelector('[data-actions-hint]');
-    var all=Array.prototype.slice.call(deck.querySelectorAll('[data-swipe]'));
-    var live=all.slice();
+  var bootEl=root.querySelector('[data-rk-discover-boot]');
+  var boot={};
+  try{ boot=JSON.parse(bootEl&&bootEl.textContent?bootEl.textContent:'{}')||{}; }catch(e){ boot={}; }
+  var feedEndpoint=boot.feedEndpoint||'/discover/feed';
+  var popularEndpoint=boot.popularEndpoint||'/discover/popular';
+  var swipeStackEndpoint=boot.swipeStackEndpoint||'/discover/swipe/stack';
+  var swipeRefillEndpoint=boot.swipeRefillEndpoint||'/discover/swipe/refill';
+  var swipeBase=boot.swipeBase||'/discover/swipe';
+  var editorBase=boot.editorBase||'/editor';
+  var accountId=boot.accountId||'';
+
+  function esc(v){ return String(v==null?'':v).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;').replace(/'/g,'&#39;'); }
+  function attr(v){ return String(v==null?'':v).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
+  function isVideo(u){ return Boolean(u)&&/\\.(mp4|webm|ogg|mov)(\\?|#|$)/i.test(u); }
+  // previewUrl falls back to the template's raw videoUrl, which is often a
+  // signed/extension-less URL — so treat "not a known image" as video, never
+  // the other way round, or those templates render a broken <img> (no preview).
+  function isImage(u){ return Boolean(u)&&/\\.(png|jpe?g|gif|webp|avif|svg)(\\?|#|$)/i.test(u); }
+  function withAccount(u){
+    try{ var url=new URL(u, window.location.href); if(accountId) url.searchParams.set('account', accountId); return url.toString(); }
+    catch(e){ return u; }
+  }
+  function editorUrl(id){
+    var u=editorBase+'/'+encodeURIComponent(String(id));
+    return accountId? u+'?account='+encodeURIComponent(accountId) : u;
+  }
+  // Feed cards browse INSPIRATIONS: an entry may have no template yet. The real
+  // template id (if decomposed) opens the editor directly; otherwise the card
+  // carries an inspirationId and its CTA decomposes on demand (preview → Remix).
+  function realTemplateId(t){ var id=t.templateId||t.template_id||''; return /^template_/.test(String(id))? String(id):''; }
+  function inspirationIdOf(t){ return String(t.inspirationId||t.inspiration_id||''); }
+  function domId(t){ return realTemplateId(t)||inspirationIdOf(t)||''; }
+  function needsDecompose(t){ return !realTemplateId(t) && Boolean(inspirationIdOf(t)); }
+  // POST the lazy decompose, then hand off to the editor. Shared by card +
+  // viewer Remix buttons via a delegated [data-remix] listener.
+  function remixInspiration(btn){
+    var inspId=btn.getAttribute('data-remix'); if(!inspId||btn.getAttribute('data-busy')) return;
+    btn.setAttribute('data-busy','1');
+    var label=btn.innerHTML; btn.innerHTML='Preparing&hellip;';
+    fetch(withAccount('/discover/inspirations/'+encodeURIComponent(inspId)+'/decompose'),{method:'POST',credentials:'same-origin',headers:{Accept:'application/json'}})
+      .then(function(r){ return r.json().then(function(d){ return {ok:r.ok,data:d}; }); })
+      .then(function(res){
+        if(res.ok&&res.data&&res.data.templateId){ window.location.href=editorUrl(res.data.templateId); return; }
+        btn.removeAttribute('data-busy'); btn.innerHTML=label;
+        window.alert((res.data&&res.data.error)||'Could not open this inspiration — please try again.');
+      })
+      .catch(function(){ btn.removeAttribute('data-busy'); btn.innerHTML=label; window.alert('Network error — please try again.'); });
+  }
+  document.addEventListener('click',function(e){
+    var b=e.target&&e.target.closest?e.target.closest('[data-remix]'):null;
+    if(!b) return; e.preventDefault(); remixInspiration(b);
+  });
+  // Click the template-id chip on a feed card to copy the id to the clipboard,
+  // with a brief inline "Copied" swap (icon + label) as subtle confirmation.
+  function copyText(text){
+    if(navigator.clipboard&&navigator.clipboard.writeText){ return navigator.clipboard.writeText(text); }
+    return new Promise(function(resolve,reject){
+      try{
+        var ta=document.createElement('textarea'); ta.value=text;
+        ta.style.position='fixed'; ta.style.top='-9999px'; document.body.appendChild(ta);
+        ta.focus(); ta.select(); var ok=document.execCommand('copy'); document.body.removeChild(ta);
+        ok?resolve():reject(new Error('copy failed'));
+      }catch(err){ reject(err); }
+    });
+  }
+  document.addEventListener('click',function(e){
+    var chip=e.target&&e.target.closest?e.target.closest('[data-copy-id]'):null;
+    if(!chip) return;
+    e.preventDefault(); e.stopPropagation();
+    var id=chip.getAttribute('data-copy-id')||'';
+    if(!id||chip.getAttribute('data-copied')) return;
+    copyText(id).then(function(){
+      var txt=chip.querySelector('.rk-idchip-text'); var prev=txt?txt.textContent:'';
+      chip.setAttribute('data-copied','1'); chip.classList.add('is-copied');
+      chip.innerHTML=IDCHECK_ICON+'<span class="rk-idchip-text">Copied</span>';
+      window.setTimeout(function(){
+        chip.classList.remove('is-copied'); chip.removeAttribute('data-copied');
+        chip.innerHTML=COPY_ICON+'<span class="rk-idchip-text">'+esc(prev)+'</span>';
+      },1300);
+    }).catch(function(){});
+  });
+  function fmtDuration(s){
+    s=Number(s); if(!s||!isFinite(s)||s<=0) return '';
+    if(s>=60){ var m=Math.floor(s/60); var r=Math.round(s%60); return m+':'+(r<10?'0':'')+r; }
+    return (s>=10? s.toFixed(0) : s.toFixed(1))+'s';
+  }
+  var SOURCE_MAP={tiktok:'TikTok','tiktok.com':'TikTok',youtube:'YouTube','youtube.com':'YouTube','youtu.be':'YouTube',instagram:'Instagram','instagram.com':'Instagram',twitter:'Twitter/X',x:'Twitter/X','x.com':'Twitter/X'};
+  function sourceLabel(s){ s=String(s||'').toLowerCase(); if(!s) return ''; if(SOURCE_MAP[s]) return SOURCE_MAP[s]; var host=s.replace(/^www\\./,'').split('.')[0]; return host.charAt(0).toUpperCase()+host.slice(1); }
+  var EDIT_ICON=${JSON.stringify(EDIT_ICON)};
+  var COPY_ICON=${JSON.stringify(COPY_ICON)};
+  var IDCHECK_ICON=${JSON.stringify(IDCHECK_ICON)};
+  var BOOKMARK_ICON=${JSON.stringify(BOOKMARK_ICON)};
+  var SOUND_ON_ICON=${JSON.stringify(SOUND_ON_ICON)};
+  var SOUND_OFF_ICON=${JSON.stringify(SOUND_OFF_ICON)};
+  var PLAY_ICON=${JSON.stringify(PLAY_ICON)};
+
+  // ── bookmarks: client-side saves in localStorage (no backend favorite
+  // endpoint exists), shared by feed cards, category reveal cards and the
+  // viewer slides. One delegated document listener toggles any [data-bm].
+  var BM_KEY='rk-discover-bookmarks';
+  var bookmarks=(function(){
+    try{ var v=JSON.parse(window.localStorage.getItem(BM_KEY)||'[]'); return new Set(Array.isArray(v)?v.map(String):[]); }
+    catch(e){ return new Set(); }
+  })();
+  var bmChangeHandlers=[];
+  function isBookmarked(id){ return Boolean(id)&&bookmarks.has(String(id)); }
+  function syncBmButtons(){
+    root.querySelectorAll('[data-bm]').forEach(function(b){
+      var on=isBookmarked(b.getAttribute('data-bm'));
+      b.classList.toggle('is-on',on);
+      b.setAttribute('aria-pressed',on?'true':'false');
+      b.setAttribute('aria-label',on?'Remove bookmark':'Bookmark');
+    });
+  }
+  function toggleBookmark(id){
+    id=String(id||''); if(!id) return;
+    if(bookmarks.has(id)) bookmarks.delete(id); else bookmarks.add(id);
+    try{ window.localStorage.setItem(BM_KEY, JSON.stringify(Array.from(bookmarks))); }catch(e){}
+    syncBmButtons();
+    bmChangeHandlers.forEach(function(fn){ try{ fn(id); }catch(e){} });
+  }
+  function bmBtnHtml(id, cls){
+    if(!id) return '';
+    var on=isBookmarked(id);
+    return '<button type="button" class="'+cls+(on?' is-on':'')+'" data-bm="'+attr(id)+'" aria-pressed="'+(on?'true':'false')+'" aria-label="'+(on?'Remove bookmark':'Bookmark')+'">'+BOOKMARK_ICON+'</button>';
+  }
+  document.addEventListener('click',function(e){
+    var b=(e.target&&e.target.closest)?e.target.closest('[data-bm]'):null;
+    if(!b) return;
+    e.preventDefault();
+    toggleBookmark(b.getAttribute('data-bm'));
+  });
+
+  // ── shared: pause/resume a grid's muted autoplay (while the viewer is open) ──
+  function parkVideos(container){
+    if(!container) return;
+    container.querySelectorAll('video').forEach(function(o){ o.muted=true; o.pause(); });
+    container.querySelectorAll('.rk-discover-posterwrap.is-sound').forEach(function(p){ p.classList.remove('is-sound'); });
+  }
+  function resumeVideos(container){
+    if(!container) return;
+    container.querySelectorAll('video').forEach(function(o){ o.muted=true; var pr=o.play(); if(pr&&pr.catch) pr.catch(function(){}); });
+  }
+
+  function friendlyError(err){
+    var msg=(err&&err.message)?String(err.message):'';
+    if(!msg||/failed to fetch|networkerror|load failed/i.test(msg)) return "Couldn't reach the server — check your connection, or sign in to keep browsing.";
+    return msg;
+  }
+
+  function mediaHtml(t){
+    var url=t.previewUrl||t.preview_url||'';
+    if(!url) return '<div class="rk-discover-media-empty">'+(t.status==='processing'?'Downloading&hellip;':'No preview')+'</div>';
+    if(isImage(url)) return '<img src="'+attr(url)+'" alt="'+attr((t.title||'Template')+' preview')+'" loading="lazy" decoding="async">';
+    // #t=0.1 paints the first frame even where autoplay is blocked.
+    return '<video src="'+attr(url+'#t=0.1')+'" muted loop autoplay playsinline preload="metadata" tabindex="-1"></video>';
+  }
+
+  // Real feed/category poster card. The "Open Editor" CTA always deep-links
+  // into the real editor; the poster itself carries data-rk-view=<index> so a
+  // plain click opens the TikTok-style viewer instead (cmd/middle-click still
+  // opens the editor via the untouched href). No platform/source pill on the
+  // poster (user feedback) — source shows only in the viewer's meta line.
+  function posterCardHtml(t, viewIdx){
+    var id=domId(t);
+    var tid=realTemplateId(t);
+    var remix=needsDecompose(t);
+    var url=t.previewUrl||t.preview_url||'';
+    var hasVideo=Boolean(url)&&!isImage(url);
+    var pending=(t.status==='processing'||t.status==='failed');
+    var viewable=!pending&&Boolean(url)&&typeof viewIdx==='number'&&viewIdx>=0;
+    var dur=fmtDuration(t.durationSeconds);
+    var desc=String(t.viralDna||t.summary||'').trim();
+    // Real templates deep-link to the editor; inspiration-only cards open the
+    // preview viewer instead (a plain anchor href would 404 the editor), and the
+    // CTA decomposes on demand.
+    var posterHref=remix? '#' : editorUrl(tid);
+    var posterInner=mediaHtml(t)
+      +(dur?'<span class="rk-discover-dur">'+esc(dur)+'</span>':'')
+      +'<div class="rk-discover-scrim"></div>'
+      +(hasVideo&&!pending?'<span class="rk-discover-sound" aria-hidden="true"><span class="rk-ds-on">'+SOUND_ON_ICON+'</span><span class="rk-ds-off">'+SOUND_OFF_ICON+'</span></span>':'');
+    var poster=pending
+      ? '<div class="rk-discover-poster">'+posterInner+'</div>'
+      : '<a class="rk-discover-poster" href="'+attr(posterHref)+'"'+(viewable?' data-rk-view="'+viewIdx+'"':'')+' aria-label="'+attr((viewable?'Preview ':'Open ')+(t.title||id)+(viewable?'':' in the editor'))+'">'+posterInner+'</a>';
+    // bookmark sits NEXT TO the anchor inside the wrap (button-in-anchor is
+    // invalid HTML); the wrap is the shared hover context for sound + bookmark
+    poster='<div class="rk-discover-posterwrap">'+poster+(pending?'':bmBtnHtml(id,'rk-discover-bm'))+'</div>';
+    var cta=pending
+      ? '<span class="rk-btn rk-btn-ghost rk-btn-sm rk-btn-block rk-discover-fork rk-discover-fork-disabled" aria-disabled="true">'+(t.status==='failed'?'Download failed':'Preparing&hellip;')+'</span>'
+      : remix
+        ? '<button type="button" class="rk-btn rk-btn-gold rk-btn-sm rk-btn-block rk-discover-fork" data-remix="'+attr(inspirationIdOf(t))+'">'+EDIT_ICON+' Remix</button>'
+        : '<a class="rk-btn rk-btn-gold rk-btn-sm rk-btn-block rk-discover-fork" href="'+attr(editorUrl(tid))+'">'+EDIT_ICON+' Open Editor</a>';
+    return '<article class="rk-discover-card rk-card-hover">'
+      + poster
+      + '<div class="rk-discover-body">'
+        + '<div class="rk-discover-titlewrap">'
+          + '<h3 class="rk-discover-title">'+esc(t.title||id)+'</h3>'
+          + (desc?'<p class="rk-discover-desc">'+esc(desc)+'</p>':'')
+          + (tid?'<button type="button" class="rk-discover-idchip" data-copy-id="'+attr(tid)+'" title="Copy template ID">'+COPY_ICON+'<span class="rk-idchip-text">'+esc(tid)+'</span></button>':'')
+        + '</div>'
+        + cta
+      + '</div>'
+    + '</article>';
+  }
+
+  // ── hover audio: unmute a poster's (muted, autoplaying) video while the
+  // pointer is over it; only one card is ever audible at a time. Browsers may
+  // refuse unmuted playback before the user's first click (autoplay policy) —
+  // in that case we verify shortly after and fall back to muted playback
+  // instead of leaving a frozen poster. Delegated, so grid re-renders keep it.
+  function bindHoverAudio(container){
+    if(!container) return;
+    function posterOf(e){ var t=e.target; return (t&&t.closest)?t.closest('.rk-discover-posterwrap'):null; }
+    function setSound(poster,on){
+      var v=poster.querySelector('video'); if(!v) return;
+      if(on){
+        container.querySelectorAll('video').forEach(function(o){ if(o!==v) o.muted=true; });
+        container.querySelectorAll('.rk-discover-posterwrap.is-sound').forEach(function(p){ if(p!==poster) p.classList.remove('is-sound'); });
+        v.muted=false;
+        if(v.paused){ var pr=v.play(); if(pr&&pr.catch) pr.catch(function(){}); }
+        window.setTimeout(function(){
+          if(v.muted) return; // already reverted (pointer left)
+          if(v.paused){ v.muted=true; poster.classList.remove('is-sound'); var pr2=v.play(); if(pr2&&pr2.catch) pr2.catch(function(){}); }
+          else poster.classList.add('is-sound');
+        },70);
+      } else {
+        v.muted=true; poster.classList.remove('is-sound');
+      }
+    }
+    container.addEventListener('mouseover',function(e){
+      var p=posterOf(e); if(!p) return;
+      if(e.relatedTarget&&p.contains(e.relatedTarget)) return; // still inside the same poster
+      setSound(p,true);
+    });
+    container.addEventListener('mouseout',function(e){
+      var p=posterOf(e); if(!p) return;
+      if(e.relatedTarget&&p.contains(e.relatedTarget)) return;
+      setSound(p,false);
+    });
+  }
+
+  // ── TikTok-style viewer modal — SHARED by the feed grid and the categories
+  // reveal grid. open(list, clickedIdx, park): list is the template array
+  // behind the grid the user clicked, clickedIdx the clicked card index in
+  // that list, park the grid container whose muted autoplay is paused while
+  // the modal owns audio + CPU. Slides hydrate lazily (active +/-1); the click
+  // that opens the modal is a real user gesture, so the active video plays
+  // WITH sound (with a muted-playback fallback if the browser still refuses).
+  var viewerCtl=(function(){
+    var viewer=root.querySelector('[data-rk-viewer]');
+    if(!viewer) return null;
+    var vTrack=viewer.querySelector('[data-viewer-track]');
+    var vItems=[]; var vOpen=false; var vActive=-1; var vSound=true; var vIO=null; var parkEl=null;
+
+    function viewerSlideHtml(t,i){
+      var id=domId(t);
+      var tid=realTemplateId(t);
+      var remix=needsDecompose(t);
+      var url=t.previewUrl||t.preview_url||'';
+      var media=isImage(url)
+        ? '<img class="rk-discover-viewer-media" src="'+attr(url)+'" alt="'+attr((t.title||'Template')+' preview')+'">'
+        : '<video class="rk-discover-viewer-media" data-vsrc="'+attr(url)+'" loop playsinline preload="none"></video>';
+      var meta=[];
+      var srcL=sourceLabel(t.sourceType); if(srcL) meta.push(esc(srcL));
+      var dur=fmtDuration(t.durationSeconds); if(dur) meta.push(esc(dur));
+      var desc=String(t.viralDna||t.summary||'').trim();
+      return '<section class="rk-discover-viewer-slide" data-vslide="'+i+'">'
+        +'<figure class="rk-discover-viewer-stage">'
+          + media
+          +'<span class="rk-discover-viewer-pause">'+PLAY_ICON+'</span>'
+          +'<div class="rk-discover-viewer-shade"></div>'
+          + bmBtnHtml(id,'rk-discover-viewer-bm')
+          +'<div class="rk-discover-viewer-info">'
+            +(meta.length?'<div class="rk-discover-viewer-meta">'+meta.join(' &middot; ')+'</div>':'')
+            +'<div class="rk-discover-viewer-title">'+esc(t.title||id)+'</div>'
+            +(desc?'<div class="rk-discover-viewer-desc">'+esc(desc)+'</div>':'')
+            +(remix
+              ? '<button type="button" class="rk-btn rk-btn-gold rk-btn-sm rk-discover-viewer-fork" data-remix="'+attr(inspirationIdOf(t))+'">'+EDIT_ICON+' Remix</button>'
+              : '<a class="rk-btn rk-btn-gold rk-btn-sm rk-discover-viewer-fork" href="'+attr(editorUrl(tid))+'">'+EDIT_ICON+' Open Editor</a>')
+          +'</div>'
+        +'</figure>'
+      +'</section>';
+    }
+    function hydrateSlide(slide){
+      var v=slide.querySelector('video[data-vsrc]');
+      if(!v||v.getAttribute('src')) return;
+      v.preload='auto';
+      v.setAttribute('src', v.getAttribute('data-vsrc'));
+    }
+    function updateMuteUi(){ viewer.classList.toggle('is-muted',!vSound); }
+    function setViewerActive(idx){
+      vActive=idx;
+      [].forEach.call(vTrack.children,function(s,i){
+        if(Math.abs(i-idx)<=1) hydrateSlide(s);
+        s.classList.remove('is-paused');
+        var v=s.querySelector('video');
+        if(!v) return;
+        if(i===idx){
+          v.muted=!vSound;
+          var pr=v.play();
+          if(pr&&pr.catch) pr.catch(function(){
+            // sound-on autoplay blocked → fall back to muted playback
+            v.muted=true; vSound=false; updateMuteUi();
+            var pr2=v.play(); if(pr2&&pr2.catch) pr2.catch(function(){});
+          });
+        } else { v.pause(); }
+      });
+      updateMuteUi();
+    }
+    function stepViewer(d){
+      if(!vOpen) return;
+      var next=Math.max(0,Math.min(vItems.length-1,vActive+d));
+      if(next===vActive) return;
+      vTrack.scrollTo({top:next*vTrack.clientHeight,behavior:'smooth'});
+    }
+    function open(list, clickedIdx, park){
+      vItems=[]; var start=0;
+      (list||[]).forEach(function(t,i){
+        var url=t.previewUrl||t.preview_url||'';
+        if(!url||t.status==='processing'||t.status==='failed') return;
+        if(i===clickedIdx) start=vItems.length;
+        vItems.push(t);
+      });
+      if(!vItems.length) return;
+      parkEl=park||null;
+      vTrack.innerHTML=vItems.map(viewerSlideHtml).join('');
+      vOpen=true; vSound=true;
+      viewer.hidden=false;
+      document.documentElement.classList.add('rk-noscroll');
+      parkVideos(parkEl);
+      if(vIO) vIO.disconnect();
+      vIO=('IntersectionObserver' in window)?new IntersectionObserver(function(entries){
+        entries.forEach(function(en){
+          if(!en.isIntersecting) return;
+          var i=Number(en.target.getAttribute('data-vslide'));
+          if(i!==vActive) setViewerActive(i);
+        });
+      },{root:vTrack,threshold:0.6}):null;
+      if(vIO) [].forEach.call(vTrack.children,function(s){ vIO.observe(s); });
+      vTrack.scrollTop=start*vTrack.clientHeight;
+      setViewerActive(start);
+    }
+    function close(){
+      if(!vOpen) return;
+      vOpen=false; vActive=-1;
+      if(vIO){ vIO.disconnect(); vIO=null; }
+      vTrack.querySelectorAll('video').forEach(function(v){ v.pause(); });
+      vTrack.innerHTML='';
+      viewer.hidden=true;
+      document.documentElement.classList.remove('rk-noscroll');
+      resumeVideos(parkEl);
+      parkEl=null;
+    }
+
+    viewer.querySelectorAll('[data-viewer-close]').forEach(function(b){ b.addEventListener('click',close); });
+    var muteBtn=viewer.querySelector('[data-viewer-mute]');
+    if(muteBtn) muteBtn.addEventListener('click',function(){
+      vSound=!vSound; updateMuteUi();
+      var s=vTrack.children[vActive]; var v=s&&s.querySelector('video');
+      if(v){ v.muted=!vSound; if(vSound&&v.paused){ var pr=v.play(); if(pr&&pr.catch) pr.catch(function(){}); s.classList.remove('is-paused'); } }
+    });
+    var prevBtn=viewer.querySelector('[data-viewer-prev]');
+    var nextBtn=viewer.querySelector('[data-viewer-next]');
+    if(prevBtn) prevBtn.addEventListener('click',function(){ stepViewer(-1); });
+    if(nextBtn) nextBtn.addEventListener('click',function(){ stepViewer(1); });
+    // tap the video → pause/resume (TikTok); tap the empty gutter → close;
+    // bookmarks are handled by the document-level [data-bm] listener
+    vTrack.addEventListener('click',function(e){
+      var t=e.target;
+      if(t&&t.closest&&(t.closest('a')||t.closest('[data-bm]'))) return;
+      var media=(t&&t.closest)?t.closest('.rk-discover-viewer-media'):null;
+      if(media&&media.tagName==='VIDEO'){
+        var slide=media.closest('.rk-discover-viewer-slide');
+        if(media.paused){ var pr=media.play(); if(pr&&pr.catch) pr.catch(function(){}); if(slide) slide.classList.remove('is-paused'); }
+        else { media.pause(); if(slide) slide.classList.add('is-paused'); }
+        return;
+      }
+      if(t&&t.classList&&(t.classList.contains('rk-discover-viewer-slide')||t===vTrack)) close();
+    });
+    document.addEventListener('keydown',function(e){
+      if(!vOpen) return;
+      if(e.key==='Escape'){ e.preventDefault(); close(); }
+      else if(e.key==='ArrowDown'||e.key==='PageDown'){ e.preventDefault(); stepViewer(1); }
+      else if(e.key==='ArrowUp'||e.key==='PageUp'){ e.preventDefault(); stepViewer(-1); }
+    });
+    window.addEventListener('resize',function(){
+      if(vOpen&&vActive>=0) vTrack.scrollTop=vActive*vTrack.clientHeight;
+    });
+
+    return { open: open, close: close, isOpen: function(){ return vOpen; } };
+  })();
+
+  // Wire a poster grid's plain-clicks into the shared viewer. getList is
+  // called at click time so it always reflects the grid's CURRENT contents
+  // (search filter, bookmark filter, revealed group).
+  function bindViewerOpens(container, getList){
+    if(!container||!viewerCtl) return;
+    container.addEventListener('click',function(e){
+      if(e.defaultPrevented||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||e.button!==0) return;
+      var a=(e.target&&e.target.closest)?e.target.closest('[data-rk-view]'):null;
+      if(!a||!container.contains(a)) return;
+      e.preventDefault();
+      viewerCtl.open(getList()||[], Number(a.getAttribute('data-rk-view')), container);
+    });
+  }
+
+  // ════════════════════════════════════════════════════════════════════════
+  // FEED
+  // ════════════════════════════════════════════════════════════════════════
+  var feedRoot=root.querySelector('[data-rk-feed]');
+  if(feedRoot){
+    var gridEl=feedRoot.querySelector('[data-rk-grid]');
+    var stateEl=feedRoot.querySelector('[data-rk-state]');
+    // search lives in the shared toolbar row (outside [data-rk-feed]); the
+    // visible-count is folded into the search placeholder rather than shown as
+    // a separate label.
+    var searchEl=root.querySelector('[data-rk-search]');
+    // caption the placeholder with the count, but only while the box is empty —
+    // a typed query keeps its own placeholder-less state.
+    function setCountHint(n){
+      if(!searchEl) return;
+      searchEl.placeholder = (n==null)
+        ? 'Search templates'
+        : 'Search '+n+' template'+(n===1?'':'s');
+    }
+    var bmChip=root.querySelector('[data-rk-bmfilter]');
+    var bmCountEl=root.querySelector('[data-rk-bmcount]');
+    var bmFilter=false;
+    var feedState={items:[],visible:[],loading:false};
+    var feedReq=0;
+
+    function feedSetState(msg,isError){
+      if(gridEl) gridEl.innerHTML='';
+      if(stateEl){ stateEl.hidden=false; stateEl.innerHTML=msg; stateEl.classList.toggle('is-error',!!isError); }
+      setCountHint(null);
+    }
+    function updateBmChip(){
+      if(!bmChip) return;
+      var n=0;
+      feedState.items.forEach(function(t){ if(isBookmarked(t.templateId||t.template_id)) n++; });
+      if(bmCountEl) bmCountEl.textContent=n?String(n):'';
+      bmChip.classList.toggle('is-active',bmFilter);
+      bmChip.setAttribute('aria-pressed',bmFilter?'true':'false');
+    }
+    function feedRender(){
+      var vis=bmFilter
+        ? feedState.items.filter(function(t){ return isBookmarked(t.templateId||t.template_id); })
+        : feedState.items;
+      feedState.visible=vis;
+      updateBmChip();
+      if(!vis.length){
+        feedSetState(bmFilter?'No bookmarks yet — tap the bookmark on any template to save it for later.':'No templates match — try a different search.',false);
+        return;
+      }
+      if(stateEl) stateEl.hidden=true;
+      if(gridEl) gridEl.innerHTML=vis.map(function(t,i){ return posterCardHtml(t,i); }).join('');
+      setCountHint(vis.length);
+    }
+    if(bmChip) bmChip.addEventListener('click',function(){ bmFilter=!bmFilter; feedRender(); });
+    bmChangeHandlers.push(function(){
+      updateBmChip();
+      // with the filter on, un-bookmarking drops the card from the grid; the
+      // re-render restarts muted autoplay, so re-park it if the viewer is open
+      if(bmFilter){ feedRender(); if(viewerCtl&&viewerCtl.isOpen()) parkVideos(gridEl); }
+    });
+    function applyFeedItems(items){
+      feedState.items=Array.isArray(items)?items:[];
+      feedState.loading=false;
+      feedRender();
+    }
+    // Direct same-origin fetch — the fallback for when the Zustand bridge isn't
+    // on the page yet (its deferred module is still loading) or is disabled.
+    function feedFetchDirect(query,my){
+      var url=feedEndpoint;
+      try{ var u=new URL(feedEndpoint, window.location.href); if(query) u.searchParams.set('q', query); if(accountId) u.searchParams.set('account', accountId); url=u.toString(); }catch(e){ url=feedEndpoint; }
+      fetch(url,{credentials:'same-origin',headers:{'accept':'application/json'}})
+        .then(function(r){ if(!r.ok){ throw new Error(r.status===401?'Sign in to browse the template feed.':("Couldn't load templates ("+r.status+").")); } return r.json(); })
+        .then(function(j){ if(my!==feedReq) return; applyFeedItems((j&&Array.isArray(j.templates))?j.templates:[]); })
+        .catch(function(err){ if(my!==feedReq) return; feedState.loading=false; feedSetState(esc(friendlyError(err)),true); });
+    }
+    // Feed loads flow through the Zustand store bridge (SSR-seed + SWR cache);
+    // it may call onResult twice for the default feed (cached snapshot first,
+    // then a background-revalidated fresh copy) — both are honored under the
+    // same request token so a newer search still wins.
+    function feedLoad(query){
+      var my=++feedReq;
+      feedState.loading=true;
+      // Only flash the loading state when nothing's painted yet — a
+      // revalidate must never blank an already-good grid.
+      if(!feedState.items.length) feedSetState('Loading templates&hellip;',false);
+      var bridge=window.__vidfarmDiscover;
+      if(bridge&&bridge.loadFeed){
+        bridge.loadFeed(query,{
+          onLoading:function(){ if(my===feedReq && !feedState.items.length) feedSetState('Loading templates&hellip;',false); },
+          onResult:function(items){ if(my!==feedReq) return; applyFeedItems(items); },
+          onError:function(err){ if(my!==feedReq) return; feedState.loading=false; feedSetState(esc(friendlyError(err)),true); }
+        });
+      } else {
+        feedFetchDirect(query,my);
+      }
+    }
+    // Honor a ?q= (e.g. from a category link) in the page URL.
+    var initialQuery='';
+    try{ initialQuery=(new URL(window.location.href)).searchParams.get('q')||''; }catch(e){ initialQuery=''; }
+    if(searchEl){
+      searchEl.value=initialQuery;
+      var debounce=null;
+      searchEl.addEventListener('input',function(){
+        if(debounce) window.clearTimeout(debounce);
+        var v=searchEl.value.trim();
+        debounce=window.setTimeout(function(){ feedLoad(v); },260);
+      });
+      searchEl.addEventListener('keydown',function(e){ if(e.key==='Enter'){ if(debounce) window.clearTimeout(debounce); feedLoad(searchEl.value.trim()); } });
+    }
+    bindHoverAudio(gridEl);
+    // plain click on a card → shared viewer over the CURRENT visible feed
+    // (search + bookmark filter applied)
+    bindViewerOpens(gridEl, function(){ return feedState.visible; });
+    // SSR-seed: if the server inlined the first page of the default feed AND
+    // there's no ?q= search, paint it immediately with NO initial fetch — this
+    // is what kills the redundant SSR-render → client-fetch round trip.
+    var seeded=false;
+    if(!initialQuery && boot.feedInitial && Array.isArray(boot.feedInitial) && boot.feedInitial.length){
+      applyFeedItems(boot.feedInitial);
+      seeded=true;
+    }
+    if(!seeded){
+      feedLoad(initialQuery.trim());
+    }
+    // A background revalidation (stale snapshot / BFCache restore) from the
+    // store bridge re-paints the grid — but only while not mid-search.
+    window.addEventListener('vidfarm:discover-feed-updated',function(ev){
+      var q=searchEl?searchEl.value.trim():'';
+      if(q) return;
+      var items=ev&&ev.detail&&ev.detail.items;
+      if(Array.isArray(items)) applyFeedItems(items);
+    });
+
+    // ── "Add New" modal — paste a social URL or upload a video, add it to the
+    // caller's private feed (real POST /discover/templates + upload presign
+    // pair), then reload the feed so the new pending card appears. In feed
+    // scope so it can reach feedLoad + the current search value.
+    var addModal=root.querySelector('[data-rk-add-modal]');
+    var addBtn=root.querySelector('[data-rk-add]');
+    if(addModal&&addBtn){
+      var addForm=addModal.querySelector('[data-rk-add-form]');
+      var addUrl=addModal.querySelector('[data-rk-add-url]');
+      var addFile=addModal.querySelector('[data-rk-add-file]');
+      var addFileLabel=addModal.querySelector('[data-rk-add-filelabel]');
+      var addFileText=addModal.querySelector('[data-rk-add-filetext]');
+      var addTagline=addModal.querySelector('[data-rk-add-tagline]');
+      var addNotes=addModal.querySelector('[data-rk-add-notes]');
+      var addErr=addModal.querySelector('[data-rk-add-error]');
+      var addSubmit=addModal.querySelector('[data-rk-add-submit]');
+      var MAX_UPLOAD=200*1024*1024;
+      var defaultFileText=addFileText?addFileText.innerHTML:'';
+      var addBusy=false;
+
+      function showAddErr(msg){ if(addErr){ addErr.textContent=msg||''; addErr.hidden=!msg; } }
+      function openAdd(){
+        addModal.hidden=false;
+        document.documentElement.classList.add('rk-noscroll');
+        if(addUrl){ try{ addUrl.focus(); }catch(e){} }
+      }
+      function closeAdd(){
+        if(addBusy) return;
+        addModal.hidden=true;
+        document.documentElement.classList.remove('rk-noscroll');
+      }
+      function resetAdd(){
+        if(addForm) addForm.reset();
+        if(addFileLabel) addFileLabel.classList.remove('is-picked');
+        if(addFileText) addFileText.innerHTML=defaultFileText;
+        showAddErr('');
+      }
+      function setAddBusy(on,label){
+        addBusy=on;
+        if(addSubmit){ addSubmit.disabled=on; addSubmit.textContent=on?(label||'Adding\\u2026'):'Add to feed'; }
+      }
+
+      addBtn.addEventListener('click',openAdd);
+      addModal.querySelectorAll('[data-rk-add-close]').forEach(function(b){ b.addEventListener('click',closeAdd); });
+      document.addEventListener('keydown',function(e){ if(e.key==='Escape'&&!addModal.hidden) closeAdd(); });
+
+      if(addFile){
+        addFile.addEventListener('change',function(){
+          var f=addFile.files&&addFile.files[0];
+          if(addFileLabel) addFileLabel.classList.toggle('is-picked',!!f);
+          if(addFileText) addFileText.innerHTML=f?esc(f.name):defaultFileText;
+          showAddErr('');
+        });
+      }
+
+      function ingest(uploadRef){
+        var tagline=addTagline?addTagline.value.trim():'';
+        var notes=addNotes?addNotes.value.trim():'';
+        var payload=uploadRef
+          ? { upload:uploadRef, tagline:tagline||null, notes:notes||null }
+          : { source_url:(addUrl?addUrl.value.trim():''), tagline:tagline||null, notes:notes||null };
+        return fetch(withAccount('/discover/templates'),{
+          method:'POST',credentials:'same-origin',
+          headers:{'content-type':'application/json',Accept:'application/json'},
+          body:JSON.stringify(payload)
+        }).then(function(r){ return r.json().catch(function(){ return {}; }).then(function(d){ return {ok:r.ok,status:r.status,data:d}; }); });
+      }
+      function uploadFile(file){
+        return fetch(withAccount('/discover/templates/upload/presign'),{
+          method:'POST',credentials:'same-origin',
+          headers:{'content-type':'application/json',Accept:'application/json'},
+          body:JSON.stringify({ file_name:file.name, content_type:file.type||null, size_bytes:file.size })
+        }).then(function(r){ return r.json().catch(function(){ return {}; }).then(function(d){ return {ok:r.ok,data:d}; }); })
+        .then(function(res){
+          if(!res.ok) throw new Error((res.data&&res.data.error)||'Unable to start the video upload.');
+          var p=res.data||{};
+          if(p.transport==='presigned'&&p.upload&&p.upload.url&&p.storage_key){
+            return fetch(p.upload.url,{ method:(p.upload.method||'PUT'), headers:(p.upload.headers||{}), body:file })
+              .then(function(put){ if(!put.ok) throw new Error('Video upload failed ('+put.status+'). Try again.');
+                return { storage_key:p.storage_key, file_name:p.file_name||file.name }; });
+          }
+          var form=new FormData(); form.append('file',file,p.file_name||file.name);
+          return fetch((p.upload&&p.upload.url)||'/discover/templates/upload',{ method:'POST',credentials:'same-origin',body:form })
+            .then(function(direct){ return direct.json().catch(function(){ return {}; }).then(function(dd){
+              if(!direct.ok||!dd.storage_key) throw new Error(dd.error||'Video upload failed. Try again.');
+              return { storage_key:dd.storage_key, file_name:dd.file_name||file.name }; }); });
+        });
+      }
+
+      if(addForm){
+        addForm.addEventListener('submit',function(e){
+          e.preventDefault();
+          if(addBusy) return;
+          showAddErr('');
+          var file=addFile&&addFile.files?addFile.files[0]:null;
+          var url=addUrl?addUrl.value.trim():'';
+          if(!file&&!url){ showAddErr('Paste a TikTok, YouTube, Twitter/X, or Instagram video URL \\u2014 or upload a video file.'); return; }
+          if(file&&file.size>MAX_UPLOAD){ showAddErr('Video uploads can be at most 200 MB.'); return; }
+          setAddBusy(true,file?'Uploading\\u2026':'Adding\\u2026');
+          var chain=file?uploadFile(file):Promise.resolve(null);
+          chain.then(function(uploadRef){ return ingest(uploadRef); })
+            .then(function(res){
+              setAddBusy(false);
+              if(!res.ok){ showAddErr((res.data&&res.data.error)||'Unable to add that video.'); return; }
+              resetAdd(); closeAdd();
+              // A new inspiration just landed — drop the cached snapshot so the
+              // reload fetches fresh (no stale-cache flash of the old feed).
+              if(window.__vidfarmDiscover&&window.__vidfarmDiscover.invalidate) window.__vidfarmDiscover.invalidate();
+              feedLoad(searchEl?searchEl.value.trim():'');
+            })
+            .catch(function(err){ setAddBusy(false); showAddErr((err&&err.message)?err.message:'Unable to add that video.'); });
+        });
+      }
+    }
+  }
+
+  // ════════════════════════════════════════════════════════════════════════
+  // SWIPE
+  // ════════════════════════════════════════════════════════════════════════
+  var swipeRoot=root.querySelector('[data-rk-swipe]');
+  if(swipeRoot){
+    var deck=swipeRoot.querySelector('[data-deck]');
+    var swStateEl=swipeRoot.querySelector('[data-rk-swipe-state]');
+    var actionBtns=[].slice.call(swipeRoot.querySelectorAll('[data-swipe-act]'));
+    var hint=swipeRoot.querySelector('[data-actions-hint]');
+    var skipBtn=swipeRoot.querySelector('[data-swipe-skip]');
+    var forkBtn=swipeRoot.querySelector('[data-swipe-fork]');
+    var soundBtn=swipeRoot.querySelector('[data-swipe-sound]');
+    var sw={target:5,customizing:0,productSet:false,busy:false,refilling:false,loaded:false,soundOn:false,known:{}};
+    var nodes=[]; // live card DOM nodes, top-of-deck first
+
+    // ── audio: the same-origin preview iframes poll these window flags (see
+    // injectSwipePreviewFit). Only the TOP card's id is named audible so the
+    // preloaded 2nd iframe stays silent (audio never doubles). Deck previews
+    // always start muted (the only autoplay browsers permit); the toggle is the
+    // user gesture that unlocks sound.
+    function syncSound(){
+      try{
+        window.__VF_SWIPE_SOUND__ = sw.soundOn===true;
+        window.__VF_SWIPE_SOUND_TOP__ = nodes.length? String(nodes[0]._card.id): null;
+      }catch(e){}
+    }
+    function updateSoundBtn(){
+      if(!soundBtn) return;
+      var show=nodes.length>0;
+      soundBtn.hidden=!show;
+      soundBtn.classList.toggle('is-on', sw.soundOn);
+      soundBtn.setAttribute('aria-pressed', sw.soundOn?'true':'false');
+      soundBtn.setAttribute('aria-label', sw.soundOn?'Mute':'Unmute');
+      soundBtn.innerHTML = sw.soundOn? SOUND_ON_ICON : SOUND_OFF_ICON;
+    }
+    if(soundBtn) soundBtn.addEventListener('click',function(){ sw.soundOn=!sw.soundOn; syncSound(); updateSoundBtn(); });
+
+    function swShowState(html,kind){
+      if(swStateEl){ swStateEl.hidden=false; swStateEl.innerHTML=html; swStateEl.classList.toggle('is-error',kind==='error'); }
+      actionBtns.forEach(function(b){ b.hidden=true; });
+      if(hint) hint.hidden=true;
+    }
+    function swHideState(){ if(swStateEl) swStateEl.hidden=true; }
+
+    function makeCard(card){
+      if(card&&card.id) sw.known[String(card.id)]=true;
+      var el=document.createElement('article');
+      el.className='rk-discover-swipe';
+      el._card=card; el._iframed=false;
+      var title=esc(card.title||card.source_title||card.template_id||'Template');
+      var caption=card.caption?('<div class="rk-discover-swipe-caption">'+esc(card.caption)+'</div>'):'';
+      el.innerHTML='<div class="rk-discover-swipe-fallback"><span>'+title+'</span></div>'
+        +'<div class="rk-discover-swipe-scrim"></div>'
+        +'<div class="rk-discover-swipe-info"><div class="rk-discover-swipe-title">'+title+'</div>'+caption+'</div>';
+      deck.appendChild(el);
+      return el;
+    }
+    function upgradeToIframe(el){
+      if(el._iframed) return;
+      var card=el._card; var url=card&&(card.preview_url||card.previewUrl);
+      if(!url) return;
+      var fb=el.querySelector('.rk-discover-swipe-fallback');
+      var frame=document.createElement('iframe');
+      frame.className='rk-discover-swipe-frame';
+      frame.setAttribute('src', url);
+      frame.setAttribute('title', String(card.title||'Preview'));
+      frame.setAttribute('loading','lazy');
+      frame.setAttribute('scrolling','no');
+      frame.setAttribute('allow','autoplay');
+      // The fallback is an OPAQUE dark placeholder that sits later in the DOM,
+      // so it paints over the iframe. Reveal the live preview once it loads by
+      // fading the placeholder out (kept as a load state until then). A timed
+      // fallback covers the case where 'load' never fires.
+      function revealFrame(){ if(fb){ fb.style.opacity='0'; fb.style.pointerEvents='none'; } }
+      frame.addEventListener('load', function(){ window.setTimeout(revealFrame, 120); });
+      window.setTimeout(revealFrame, 2600);
+      if(fb&&fb.parentNode) fb.parentNode.insertBefore(frame, fb); else el.insertBefore(frame, el.firstChild);
+      el._iframed=true;
+    }
     function restack(){
-      live.forEach(function(c,i){
-        if(i>2){c.style.display='none';return;}
-        c.style.display='';
-        c.style.zIndex=String(20-i);
-        c.style.transform='translateY('+(i*12)+'px) scale('+(1-i*0.045).toFixed(3)+')';
-        c.style.opacity=i===0?'1':(i===1?'0.92':'0.82');
-        c.classList.toggle('is-front',i===0);
+      nodes.forEach(function(el,i){
+        if(i>2){ el.style.display='none'; return; }
+        el.style.display='';
+        el.style.zIndex=String(20-i);
+        el.style.transform='translateY('+(i*12)+'px) scale('+(1-i*0.045).toFixed(3)+')';
+        el.style.opacity=i===0?'1':(i===1?'0.92':'0.82');
+        if(i<=1) upgradeToIframe(el);
       });
-      if(live.length===0){
-        if(empty)empty.hidden=false;
-        if(actions)actions.style.visibility='hidden';
-        if(hint)hint.style.visibility='hidden';
+      var has=nodes.length>0;
+      actionBtns.forEach(function(b){ b.hidden=!has; });
+      if(hint) hint.hidden=!has;
+      syncSound(); updateSoundBtn();
+      if(!has) swCaughtUp();
+    }
+    function swCaughtUp(){
+      if(sw.customizing>0||sw.refilling){
+        swShowState('<div class="rk-discover-spinner" aria-hidden="true"></div><div class="rk-discover-swipe-state-title">Customizing fresh clips&hellip;</div><div>Recutting viral templates into ads for your product.</div>');
+      } else {
+        swShowState('<div class="rk-discover-swipe-state-title">You\\u2019re all caught up</div><div>No more templates to customize right now. Check back as new ones are added.</div>');
       }
     }
-    function advance(dir){
-      var front=live.shift();
-      if(!front)return;
-      front.classList.remove('is-front');
-      front.style.transform='translateX('+(dir==='fork'?460:-460)+'px) rotate('+(dir==='fork'?15:-15)+'deg)';
-      front.style.opacity='0';
-      window.setTimeout(function(){front.style.display='none';},360);
-      restack();
-    }
-    var skip=root.querySelector('[data-swipe-skip]');
-    var fork=root.querySelector('[data-swipe-fork]');
-    if(skip)skip.addEventListener('click',function(){advance('skip')});
-    if(fork)fork.addEventListener('click',function(){advance('fork')});
-    var restart=deck.querySelector('[data-restart]');
-    if(restart)restart.addEventListener('click',function(){
-      live=all.slice();
-      all.forEach(function(c){c.style.transition='none';c.style.opacity='';c.style.transform='';});
-      // force reflow so the reset transforms take without animating
-      void deck.offsetWidth;
-      all.forEach(function(c){c.style.transition='';});
-      if(empty)empty.hidden=true;
-      if(actions)actions.style.visibility='';
-      if(hint)hint.style.visibility='';
-      restack();
+    function decide(dir){
+      if(sw.busy||!nodes.length) return;
+      sw.busy=true;
+      var el=nodes.shift();
+      var card=el._card;
+      el.classList.remove('is-front');
+      el.style.zIndex='30';
+      el.style.transform='translateX('+(dir==='fork'?460:-460)+'px) rotate('+(dir==='fork'?15:-15)+'deg)';
+      el.style.opacity='0';
+      window.setTimeout(function(){ if(el&&el.parentNode) el.parentNode.removeChild(el); },380);
+      var path=swipeBase+'/'+encodeURIComponent(String(card.id))+'/'+(dir==='fork'?'approve':'reject');
+      fetch(withAccount(path),{method:'POST',credentials:'same-origin',headers:{'content-type':'application/json','accept':'application/json'},body:'{}'})
+        .then(function(r){ return r.json().catch(function(){ return {}; }); })
+        .catch(function(){ /* swallowed — the card already left the deck */ })
+        .then(function(){ sw.busy=false; restack(); refill(); });
+    }
+    function refill(){
+      if(sw.refilling||!sw.productSet||!sw.loaded) return;
+      if(nodes.length>=sw.target) return;
+      sw.refilling=true;
+      fetch(withAccount(swipeRefillEndpoint),{method:'POST',credentials:'same-origin',headers:{'content-type':'application/json','accept':'application/json'},body:'{}'})
+        .then(function(r){ return r.json().catch(function(){ return {}; }); })
+        .then(function(j){
+          sw.refilling=false;
+          if(!j||j.ok===false) return; // e.g. need_provider_key — stop quietly
+          if(j.filled&&j.record){ makeCard(j.record); restack(); }
+          var more=j.filled&&nodes.length<sw.target&&j.reason!=='no_eligible'&&j.reason!=='at_target';
+          if(more) refill();
+          // Server said it's still working (no card yet, not "done") — the
+          // customization keeps running Lambda-side even if THIS request replies
+          // late; poll the stack so a finished card appears without a refresh.
+          else if(!j.filled&&j.reason!=='no_eligible'&&j.reason!=='at_target') schedulePoll();
+        })
+        .catch(function(){
+          // Timeout / 504 / network drop: customizeOneMore often runs past the
+          // gateway's reply window, so the card lands server-side after we gave
+          // up here. Poll the stack to pick it up (this is the "504 on first
+          // load, works after a manual refresh" case — now it self-heals).
+          sw.refilling=false; schedulePoll();
+        });
+    }
+    // ── stack re-poll: recover cards the refill Lambda produced after its HTTP
+    // reply timed out. Backs off after a fixed number of empty tries so we never
+    // poll forever.
+    var pollTimer=null, pollTries=0;
+    function schedulePoll(){
+      if(pollTimer||pollTries>=12) return;
+      if(nodes.length>=sw.target) return;
+      pollTimer=window.setTimeout(function(){ pollTimer=null; pollStack(); }, 5000);
+    }
+    function pollStack(){
+      if(nodes.length>=sw.target) return;
+      fetch(withAccount(swipeStackEndpoint),{credentials:'same-origin',headers:{'accept':'application/json'}})
+        .then(function(r){ return r.ok? r.json(): null; })
+        .then(function(j){
+          if(!j){ pollTries++; schedulePoll(); return; }
+          sw.customizing=Number(j&&j.customizing)||0;
+          var stack=(j&&Array.isArray(j.stack))?j.stack:[];
+          var added=0;
+          stack.forEach(function(card){ if(card&&card.id&&!sw.known[String(card.id)]){ nodes.push(makeCard(card)); added++; } });
+          if(added){ pollTries=0; swHideState(); restack(); }
+          else { pollTries++; if(!nodes.length) swCaughtUp(); }
+          if((sw.customizing>0||nodes.length<sw.target)&&nodes.length<sw.target) schedulePoll();
+        })
+        .catch(function(){ pollTries++; schedulePoll(); });
+    }
+    function loadStack(){
+      swShowState('<div class="rk-discover-spinner" aria-hidden="true"></div><div>Loading your deck&hellip;</div>');
+      fetch(withAccount(swipeStackEndpoint),{credentials:'same-origin',headers:{'accept':'application/json'}})
+        .then(function(r){
+          if(r.status===401){ var e=new Error('unauth'); e.code=401; throw e; }
+          if(!r.ok){ throw new Error("Couldn't load your deck ("+r.status+")."); }
+          return r.json();
+        })
+        .then(function(j){
+          sw.loaded=true;
+          sw.target=Number(j&&j.target_depth)||5;
+          sw.customizing=Number(j&&j.customizing)||0;
+          sw.productSet=Boolean(j&&j.product_description_set);
+          var stack=(j&&Array.isArray(j.stack))?j.stack:[];
+          if(!sw.productSet){
+            swShowState('<div class="rk-discover-swipe-state-title">Tell us about your product</div><div>Swipe auto-recuts viral templates into ads for your product. Add a product / offer description in Settings to start the deck.</div><a class="rk-btn rk-btn-gold rk-btn-sm" href="/settings/profile">Open Settings</a>');
+            return;
+          }
+          nodes=stack.map(makeCard);
+          if(nodes.length){ swHideState(); restack(); }
+          else { swCaughtUp(); }
+          refill();
+        })
+        .catch(function(err){
+          if(err&&err.code===401){
+            swShowState('<div class="rk-discover-swipe-state-title">Swipe is for your product</div><div>Log in to auto-generate ads from viral templates and swipe to approve.</div><a class="rk-btn rk-btn-gold rk-btn-sm" href="/login">Log in</a>');
+            return;
+          }
+          swShowState('<div class="rk-discover-swipe-state-title">Couldn\\u2019t load your deck</div><div>'+esc(friendlyError(err))+'</div>','error');
+        });
+    }
+    if(skipBtn) skipBtn.addEventListener('click',function(){ decide('skip'); });
+    if(forkBtn) forkBtn.addEventListener('click',function(){ decide('fork'); });
+    loadStack();
+  }
+
+  // ════════════════════════════════════════════════════════════════════════
+  // CATEGORIES
+  // ════════════════════════════════════════════════════════════════════════
+  var catsRoot=root.querySelector('[data-rk-cats]');
+  if(catsRoot){
+    var catsGrid=catsRoot.querySelector('[data-rk-cats-grid]');
+    var reveal=catsRoot.querySelector('[data-rk-cat-reveal]');
+    var revealGrid=catsRoot.querySelector('[data-rk-reveal-grid]');
+    // reveal header ("← All categories" + group title) lives in the toolbar row
+    var revealHead=root.querySelector('[data-rk-reveal-head]');
+    var revealTitle=root.querySelector('[data-rk-reveal-title]');
+    var backBtn=root.querySelector('[data-rk-cat-back]');
+    var catsState=catsRoot.querySelector('[data-rk-cats-state]');
+    var groups={}; // label -> [templates]
+    var revealItems=[]; // the currently-revealed group's templates (viewer list)
+
+    function miniHtml(t){
+      var url=t.previewUrl||t.preview_url||'';
+      if(!url) return '<span class="rk-discover-mini rk-discover-mini-ph"></span>';
+      if(isImage(url)) return '<span class="rk-discover-mini"><img src="'+attr(url)+'" alt="" loading="lazy" decoding="async"></span>';
+      // First-frame still, NOT autoplay: 4 tiles x 16 category cards would be
+      // ~64 playing videos. preload=metadata + #t=0.1 paints frame one only.
+      return '<span class="rk-discover-mini"><video src="'+attr(url+'#t=0.1')+'" muted playsinline preload="metadata" tabindex="-1" aria-hidden="true"></video></span>';
+    }
+    function showReveal(label){
+      var items=groups[label]||[];
+      if(!items.length) return false;
+      revealItems=items;
+      if(revealTitle) revealTitle.textContent=label;
+      // cards carry data-rk-view=<i> so a plain click opens the shared viewer
+      if(revealGrid) revealGrid.innerHTML=items.map(function(t,i){ return posterCardHtml(t,i); }).join('');
+      if(catsGrid) catsGrid.hidden=true;
+      if(reveal) reveal.hidden=false;
+      if(revealHead) revealHead.hidden=false;
+      window.scrollTo(0,0);
+      return true;
+    }
+    function hideReveal(){
+      if(viewerCtl&&viewerCtl.isOpen()) viewerCtl.close();
+      revealItems=[];
+      if(reveal) reveal.hidden=true;
+      if(revealHead) revealHead.hidden=true;
+      if(catsGrid) catsGrid.hidden=false;
+    }
+    if(backBtn) backBtn.addEventListener('click',hideReveal);
+    bindHoverAudio(revealGrid); // reveal cards share posterCardHtml → same hover audio
+    bindViewerOpens(revealGrid, function(){ return revealItems; }); // click → shared TikTok viewer
+
+    // Intercept category-card clicks: if we have live templates for that group,
+    // reveal them in-page; otherwise let the href fall through to a filtered
+    // feed (graceful offline / not-yet-seeded fallback).
+    catsRoot.querySelectorAll('[data-rk-cat]').forEach(function(a){
+      a.addEventListener('click',function(e){
+        var label=a.getAttribute('data-rk-cat');
+        if(groups[label]&&groups[label].length){ e.preventDefault(); showReveal(label); }
+      });
     });
+
+    function enrichCards(){
+      catsRoot.querySelectorAll('[data-rk-cat]').forEach(function(a){
+        var label=a.getAttribute('data-rk-cat');
+        var items=groups[label]||[];
+        if(!items.length) return;
+        var thumbs=a.querySelector('[data-rk-cat-thumbs]');
+        if(thumbs) thumbs.innerHTML=items.slice(0,4).map(miniHtml).join('');
+        var count=a.querySelector('[data-rk-cat-count]');
+        if(count) count.textContent=items.length+' template'+(items.length===1?'':'s');
+      });
+    }
+    function ingestPopular(list){
+      groups={};
+      (list||[]).forEach(function(t){ var g=(t.popularGroup||'Popular').trim()||'Popular'; (groups[g]=groups[g]||[]).push(t); });
+      enrichCards();
+    }
+    function loadPopular(){
+      var url=popularEndpoint;
+      try{ var u=new URL(popularEndpoint, window.location.href); if(accountId) u.searchParams.set('account', accountId); url=u.toString(); }catch(e){ url=popularEndpoint; }
+      fetch(url,{credentials:'same-origin',headers:{'accept':'application/json'}})
+        .then(function(r){ if(!r.ok){ throw new Error("Couldn't load categories ("+r.status+")."); } return r.json(); })
+        .then(function(j){
+          var list=(j&&Array.isArray(j.templates))?j.templates:[];
+          if(list.length){ ingestPopular(list); return; }
+          // Local serve without the popular catalog seeded (and no upstream
+          // passthrough configured): fall back to the public prod endpoint —
+          // it's CORS-open and unauthenticated — so the sandbox still shows
+          // real first-frame previews on a fully-local box.
+          loadPopularFallback();
+          // The static skeleton already shows every real group; the fetch just
+          // enriches it, so a fetch that returns nothing is not an error state.
+        })
+        .catch(function(){
+          // Offline / unreachable: try the public prod catalog before settling
+          // for the static skeleton grid (real group labels + counts, clicks
+          // fall through to the filtered feed).
+          loadPopularFallback();
+        });
+    }
+    function loadPopularFallback(){
+      if(window.location.hostname==='vidfarm.cc') return; // already prod
+      fetch('https://vidfarm.cc/discover/popular',{headers:{'accept':'application/json'}})
+        .then(function(r){ return r.ok?r.json():null; })
+        .then(function(j){
+          var list=(j&&Array.isArray(j.templates))?j.templates:[];
+          if(list.length) ingestPopular(list);
+        })
+        .catch(function(){ /* keep the static skeleton */ });
+    }
+    loadPopular();
   }
 })();`;
     return reskinDocument({
         title: `vidfarm reskin — Discover (${mode})`,
-        description: "Reskinned vidfarm Discover — Feed / Swipe / Categories modes, poster cards, warm sunny SaaS.",
+        description: "Reskinned vidfarm Discover — real Feed / Swipe / Categories, live template posters, warm sunny SaaS.",
         activeSlug: "discover",
+        account: { name: input.name, email: input.email },
         pageCss,
         body,
-        script
+        script,
+        // Feed mode hydrates a Zustand store (SSR-seed + stale-while-revalidate);
+        // the other modes don't need it.
+        moduleScripts: mode === "feed" ? ["/assets/discover-client-app.js"] : undefined
     });
 }
 //# sourceMappingURL=discover-page.js.map