@mevdragon/vidfarm-devcli 0.18.0 → 0.19.0

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

@@ -41,6 +41,8 @@
 // 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,
@@ -69,6 +71,8 @@ const MODE_COPY = {
 };
 // 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>`;
@@ -77,6 +81,8 @@ const SOUND_OFF_ICON = `<svg width="17" height="17" viewBox="0 0 24 24" fill="no
 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)
@@ -90,7 +96,7 @@ function jsonForScript(value) {
 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 === "feed" ? "" : "?view=" + m.mode}"${m.mode === active ? ' aria-current="page"' : ""}>${m.label}</a>`;
+        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>`;
 }
@@ -139,9 +145,83 @@ function viewerHtml() {
       </div>
     </div>`;
 }
+// The fullscreen TikTok-style viewer for the SWIPE deck — a sibling of the feed
+// viewer above but purpose-built for swiping: slides carry live composition
+// iframes (not video/img), and a bottom action bar reject/approves the ACTIVE
+// card, driving the same POST /discover/swipe/:id/{approve,reject} the deck uses.
+// The client script (swipe block) fills [data-sv-track] with slides on open.
+function swipeViewerHtml() {
+    return `
+    <div class="rk-discover-viewer rk-swipe-viewer" data-rk-swipe-viewer hidden role="dialog" aria-modal="true" aria-label="Swipe preview">
+      <div class="rk-discover-viewer-scrim" data-sv-close></div>
+      <div class="rk-discover-viewer-track rk-swipe-viewer-track" data-sv-track></div>
+      <div class="rk-discover-viewer-ui">
+        <button type="button" class="rk-discover-viewer-btn" data-sv-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-sv-close aria-label="Close viewer">${CROSS_ICON}</button>
+      </div>
+      <div class="rk-discover-viewer-nav">
+        <button type="button" class="rk-discover-viewer-btn" data-sv-prev aria-label="Previous">${CHEV_UP_ICON}</button>
+        <button type="button" class="rk-discover-viewer-btn" data-sv-next aria-label="Next">${CHEV_DOWN_ICON}</button>
+      </div>
+      <div class="rk-swipe-viewer-actions" data-sv-actions>
+        <button type="button" class="rk-discover-act rk-discover-act-skip" data-sv-reject aria-label="Reject">${CROSS_ICON}</button>
+        <button type="button" class="rk-discover-act rk-discover-act-fork" data-sv-approve aria-label="Approve">${CHECK_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];
-    const boot = { ...DEFAULT_INPUT, ...input };
+    // 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") {
@@ -158,8 +238,7 @@ export function renderReskinDiscover(mode = "feed", input = {}) {
       <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>
-    <span class="rk-hint rk-discover-count" data-rk-count></span>`
+    <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);
@@ -177,12 +256,13 @@ export function renderReskinDiscover(mode = "feed", input = {}) {
       <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>
-      <p class="rk-discover-act-hint" data-actions-hint hidden>Swipe to customize into an ad for your brand.</p>
-    </div>`;
+      <p class="rk-discover-act-hint" data-actions-hint hidden>Tap the card to preview full-screen. Swipe to customize into an ad for your brand.</p>
+    </div>${swipeViewerHtml()}`;
     }
     // ── CATEGORIES ──────────────────────────────────────────────────────────
     if (mode === "categories") {
@@ -195,11 +275,21 @@ export function renderReskinDiscover(mode = "feed", input = {}) {
       <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">
-    <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)}
@@ -207,10 +297,58 @@ export function renderReskinDiscover(mode = "feed", input = {}) {
     ${toolbarSearch}
   </div>
   ${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}
@@ -233,11 +371,10 @@ export function renderReskinDiscover(mode = "feed", input = {}) {
 .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-count{white-space:nowrap}
 
 .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-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);
@@ -252,15 +389,28 @@ export function renderReskinDiscover(mode = "feed", input = {}) {
   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}
-.rk-discover-titlewrap{display:grid;gap:6px}
+.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}
@@ -358,12 +508,22 @@ video.rk-discover-viewer-media{cursor:pointer}
   transition:transform .38s var(--rk-ease),opacity .38s var(--rk-ease)}
 .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}
+  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). */
@@ -382,6 +542,17 @@ video.rk-discover-viewer-media{cursor:pointer}
   .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)}
@@ -390,6 +561,19 @@ video.rk-discover-viewer-media{cursor:pointer}
 .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}
+/* tapping the front card opens the fullscreen swipe viewer */
+.rk-discover-deck .rk-discover-swipe{cursor:pointer}
+/* ── swipe: fullscreen TikTok viewer — reuses .rk-discover-viewer* shell; slides
+   hold live composition iframes (.rk-discover-swipe-frame) and a bottom bar
+   reject/approves the active card. */
+.rk-swipe-viewer-stage{background:#000}
+.rk-swipe-viewer-slide .rk-discover-swipe-frame{border-radius:inherit}
+.rk-swipe-viewer .rk-discover-viewer-info{padding-bottom:112px}
+.rk-swipe-viewer-actions{position:absolute;left:0;right:0;bottom:max(24px,env(safe-area-inset-bottom,0px));z-index:6;
+  display:flex;gap:40px;justify-content:center;align-items:center;pointer-events:none}
+.rk-swipe-viewer-actions .rk-discover-act{pointer-events:auto;width:64px;height:64px}
+.rk-swipe-viewer-actions .rk-discover-act[hidden]{display:none}
+@media(max-width:560px){.rk-swipe-viewer-actions{gap:30px}}
 
 /* ── categories: browse-by-format cards ── */
 .rk-discover-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px}
@@ -447,6 +631,61 @@ video.rk-discover-viewer-media{cursor:pointer}
     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; }
@@ -455,6 +694,8 @@ video.rk-discover-viewer-media{cursor:pointer}
   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)};
@@ -528,32 +769,41 @@ video.rk-discover-viewer-media{cursor:pointer}
   // 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=t.templateId||t.template_id||'';
+    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(editorUrl(id))+'"'+(viewable?' data-rk-view="'+viewIdx+'"':'')+' aria-label="'+attr((viewable?'Preview ':'Open ')+(t.title||id)+(viewable?'':' in the editor'))+'">'+posterInner+'</a>';
+      : '<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>'
-      : '<a class="rk-btn rk-btn-gold rk-btn-sm rk-btn-block rk-discover-fork" href="'+attr(editorUrl(id))+'">'+EDIT_ICON+' Open Editor</a>';
+      : 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))+'" target="_blank" rel="noopener">'+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>'
@@ -610,7 +860,9 @@ video.rk-discover-viewer-media{cursor:pointer}
     var vItems=[]; var vOpen=false; var vActive=-1; var vSound=true; var vIO=null; var parkEl=null;
 
     function viewerSlideHtml(t,i){
-      var id=t.templateId||t.template_id||'';
+      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')+'">'
@@ -629,7 +881,9 @@ video.rk-discover-viewer-media{cursor:pointer}
             +(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>':'')
-            +'<a class="rk-btn rk-btn-gold rk-btn-sm rk-discover-viewer-fork" href="'+attr(editorUrl(id))+'">'+EDIT_ICON+' Open Editor</a>'
+            +(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))+'" target="_blank" rel="noopener">'+EDIT_ICON+' Open Editor</a>')
           +'</div>'
         +'</figure>'
       +'</section>';
@@ -764,9 +1018,18 @@ video.rk-discover-viewer-media{cursor:pointer}
   if(feedRoot){
     var gridEl=feedRoot.querySelector('[data-rk-grid]');
     var stateEl=feedRoot.querySelector('[data-rk-state]');
-    // search + count live in the shared toolbar row (outside [data-rk-feed])
-    var countEl=root.querySelector('[data-rk-count]');
+    // 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;
@@ -776,7 +1039,7 @@ video.rk-discover-viewer-media{cursor:pointer}
     function feedSetState(msg,isError){
       if(gridEl) gridEl.innerHTML='';
       if(stateEl){ stateEl.hidden=false; stateEl.innerHTML=msg; stateEl.classList.toggle('is-error',!!isError); }
-      if(countEl) countEl.textContent='';
+      setCountHint(null);
     }
     function updateBmChip(){
       if(!bmChip) return;
@@ -798,7 +1061,7 @@ video.rk-discover-viewer-media{cursor:pointer}
       }
       if(stateEl) stateEl.hidden=true;
       if(gridEl) gridEl.innerHTML=vis.map(function(t,i){ return posterCardHtml(t,i); }).join('');
-      if(countEl) countEl.textContent=vis.length+' template'+(vis.length===1?'':'s');
+      setCountHint(vis.length);
     }
     if(bmChip) bmChip.addEventListener('click',function(){ bmFilter=!bmFilter; feedRender(); });
     bmChangeHandlers.push(function(){
@@ -807,17 +1070,42 @@ video.rk-discover-viewer-media{cursor:pointer}
       // re-render restarts muted autoplay, so re-park it if the viewer is open
       if(bmFilter){ feedRender(); if(viewerCtl&&viewerCtl.isOpen()) parkVideos(gridEl); }
     });
-    function feedLoad(query){
-      var my=++feedReq;
-      feedState.loading=true;
-      feedSetState('Loading templates&hellip;',false);
+    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; feedState.items=(j&&Array.isArray(j.templates))?j.templates:[]; feedState.loading=false; feedRender(); })
+        .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=''; }
@@ -835,7 +1123,140 @@ video.rk-discover-viewer-media{cursor:pointer}
     // plain click on a card → shared viewer over the CURRENT visible feed
     // (search + bookmark filter applied)
     bindViewerOpens(gridEl, function(){ return feedState.visible; });
-    feedLoad(initialQuery.trim());
+    // 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.'); });
+        });
+      }
+    }
   }
 
   // ════════════════════════════════════════════════════════════════════════
@@ -849,8 +1270,35 @@ video.rk-discover-viewer-media{cursor:pointer}
     var hint=swipeRoot.querySelector('[data-actions-hint]');
     var skipBtn=swipeRoot.querySelector('[data-swipe-skip]');
     var forkBtn=swipeRoot.querySelector('[data-swipe-fork]');
-    var sw={target:5,customizing:0,productSet:false,busy:false,refilling:false,loaded:false};
+    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
+    var deckExpanded=false; // true while the fullscreen swipe viewer owns the previews
+
+    // ── 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(){
+      // While the fullscreen viewer is open it owns the audio flags (it names the
+      // active slide's card audible); the deck must not clobber them.
+      if(deckExpanded) return;
+      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'); }
@@ -860,6 +1308,7 @@ video.rk-discover-viewer-media{cursor:pointer}
     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;
@@ -883,6 +1332,13 @@ video.rk-discover-viewer-media{cursor:pointer}
       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;
     }
@@ -893,11 +1349,16 @@ video.rk-discover-viewer-media{cursor:pointer}
         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);
+        // The viewer owns the previews while expanded — don't build deck iframes
+        // (that would double the audio + CPU); resume rebuilds them on close.
+        if(i<=1 && !deckExpanded) upgradeToIframe(el);
       });
       var has=nodes.length>0;
       actionBtns.forEach(function(b){ b.hidden=!has; });
       if(hint) hint.hidden=!has;
+      syncSound(); updateSoundBtn();
+      // Keep the open viewer's slide list in step with refills/removals.
+      if(deckExpanded && swViewer) swViewer.sync();
       if(!has) swCaughtUp();
     }
     function swCaughtUp(){
@@ -907,6 +1368,25 @@ video.rk-discover-viewer-media{cursor:pointer}
         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>');
       }
     }
+    // POST approve/reject for a card (shared by the deck buttons + the viewer).
+    function postDecision(card,dir){
+      var path=swipeBase+'/'+encodeURIComponent(String(card.id))+'/'+(dir==='fork'?'approve':'reject');
+      return 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(){ return {}; });
+    }
+    // Drop a card from the live deck (array + its DOM node) by id. The viewer can
+    // consume a card that isn't the top one, so removal is id-based, not shift().
+    function removeNodeByCard(card){
+      var id=card&&card.id!=null?String(card.id):null; if(id==null) return;
+      for(var i=0;i<nodes.length;i++){
+        if(String(nodes[i]._card.id)===id){
+          var el=nodes[i]; nodes.splice(i,1);
+          if(el&&el.parentNode) el.parentNode.removeChild(el);
+          return;
+        }
+      }
+    }
     function decide(dir){
       if(sw.busy||!nodes.length) return;
       sw.busy=true;
@@ -917,11 +1397,7 @@ video.rk-discover-viewer-media{cursor:pointer}
       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(); });
+      postDecision(card,dir).then(function(){ sw.busy=false; restack(); refill(); });
     }
     function refill(){
       if(sw.refilling||!sw.productSet||!sw.loaded) return;
@@ -935,8 +1411,43 @@ video.rk-discover-viewer-media{cursor:pointer}
           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(){ sw.refilling=false; });
+        .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>');
@@ -953,7 +1464,7 @@ video.rk-discover-viewer-media{cursor:pointer}
           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>');
+            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);
@@ -969,6 +1480,183 @@ video.rk-discover-viewer-media{cursor:pointer}
           swShowState('<div class="rk-discover-swipe-state-title">Couldn\\u2019t load your deck</div><div>'+esc(friendlyError(err))+'</div>','error');
         });
     }
+    // ── fullscreen swipe viewer — a TikTok-style vertical scroll over the CURRENT
+    // deck. Its bottom bar reject/approves the ACTIVE slide (same postDecision +
+    // refill the deck buttons use). While open it OWNS the previews: the deck's
+    // iframes are torn down (parkDeck) so audio/CPU never double, and it drives
+    // __VF_SWIPE_SOUND_* for the active slide's card. Closing rebuilds the deck.
+    var swViewer=(function(){
+      var el=root.querySelector('[data-rk-swipe-viewer]');
+      if(!el) return null;
+      var track=el.querySelector('[data-sv-track]');
+      var actionsEl=el.querySelector('[data-sv-actions]');
+      var rejectBtn=el.querySelector('[data-sv-reject]');
+      var approveBtn=el.querySelector('[data-sv-approve]');
+      var open=false, active=-1, sound=false, io=null, busy=false, activeCardId=null;
+
+      function updateMuteUi(){ el.classList.toggle('is-muted',!sound); }
+      function syncSVSound(){
+        try{ window.__VF_SWIPE_SOUND__ = sound===true; window.__VF_SWIPE_SOUND_TOP__ = activeCardId || null; }catch(e){}
+        updateMuteUi();
+      }
+      function updateActionState(){ if(actionsEl) actionsEl.style.display=track.children.length?'':'none'; }
+      // Detach every deck iframe so only the viewer plays audio/video.
+      function parkDeck(){
+        nodes.forEach(function(n){
+          var f=n.querySelector('.rk-discover-swipe-frame');
+          if(f&&f.parentNode) f.parentNode.removeChild(f);
+          n._iframed=false;
+          var fb=n.querySelector('.rk-discover-swipe-fallback');
+          if(fb){ fb.style.opacity=''; fb.style.pointerEvents=''; }
+        });
+      }
+      function hydrate(slide){
+        if(!slide||slide._iframed) return;
+        var url=slide.getAttribute('data-preview-url'); if(!url) return;
+        var fb=slide.querySelector('.rk-discover-swipe-fallback');
+        var frame=document.createElement('iframe');
+        frame.className='rk-discover-swipe-frame';
+        frame.setAttribute('src',url);
+        frame.setAttribute('title', slide.getAttribute('data-title')||'Preview');
+        frame.setAttribute('loading','lazy');
+        frame.setAttribute('scrolling','no');
+        frame.setAttribute('allow','autoplay');
+        function reveal(){ if(fb){ fb.style.opacity='0'; fb.style.pointerEvents='none'; } }
+        frame.addEventListener('load',function(){ window.setTimeout(reveal,120); });
+        window.setTimeout(reveal,2600);
+        var stage=slide.querySelector('.rk-swipe-viewer-stage');
+        if(stage) stage.insertBefore(frame, stage.firstChild); else slide.insertBefore(frame, slide.firstChild);
+        slide._iframed=true;
+      }
+      function setActive(idx){
+        active=idx;
+        var kids=track.children;
+        for(var i=0;i<kids.length;i++){ if(Math.abs(i-idx)<=1) hydrate(kids[i]); }
+        var s=kids[idx];
+        activeCardId=s? s.getAttribute('data-card-id'): null;
+        syncSVSound();
+      }
+      function appendSlide(card){
+        var slide=document.createElement('section');
+        slide.className='rk-discover-viewer-slide rk-swipe-viewer-slide';
+        slide.setAttribute('data-card-id', String(card.id));
+        var url=card.preview_url||card.previewUrl||'';
+        if(url) slide.setAttribute('data-preview-url', url);
+        var titleTxt=String(card.title||card.source_title||card.template_id||'Template');
+        slide.setAttribute('data-title', titleTxt);
+        var title=esc(titleTxt);
+        var caption=card.caption?('<div class="rk-discover-viewer-desc">'+esc(card.caption)+'</div>'):'';
+        slide.innerHTML='<figure class="rk-discover-viewer-stage rk-swipe-viewer-stage">'
+          +'<div class="rk-discover-swipe-fallback"><span>'+title+'</span></div>'
+          +'<div class="rk-discover-viewer-shade"></div>'
+          +'<div class="rk-discover-viewer-info"><div class="rk-discover-viewer-title">'+title+'</div>'+caption+'</div>'
+          +'</figure>';
+        track.appendChild(slide);
+        if(open&&io) io.observe(slide);
+        return slide;
+      }
+      // Keep the open track in step with the live deck: append a slide for any
+      // node that doesn't have one yet (refills). Removals go through decide().
+      function sync(){
+        if(!open) return;
+        var have={};
+        for(var i=0;i<track.children.length;i++){ have[track.children[i].getAttribute('data-card-id')]=true; }
+        nodes.forEach(function(n){ if(!have[String(n._card.id)]) appendSlide(n._card); });
+        updateActionState();
+      }
+      function step(d){
+        if(!open) return;
+        var next=Math.max(0,Math.min(track.children.length-1,active+d));
+        if(next===active) return;
+        track.scrollTo({top:next*track.clientHeight,behavior:'smooth'});
+      }
+      function decideActive(dir){
+        if(busy||active<0) return;
+        var slide=track.children[active]; if(!slide) return;
+        var id=slide.getAttribute('data-card-id'); var card=null;
+        for(var i=0;i<nodes.length;i++){ if(String(nodes[i]._card.id)===String(id)){ card=nodes[i]._card; break; } }
+        if(!card) return;
+        busy=true; var wasIdx=active;
+        var stage=slide.querySelector('.rk-swipe-viewer-stage');
+        if(stage){
+          stage.style.transition='transform .34s ease, opacity .34s ease';
+          stage.style.transform='translateX('+(dir==='fork'?'62%':'-62%')+') rotate('+(dir==='fork'?'9deg':'-9deg')+')';
+          stage.style.opacity='0';
+        }
+        postDecision(card,dir).then(function(){ refill(); });
+        removeNodeByCard(card);
+        window.setTimeout(function(){
+          if(slide&&slide.parentNode) slide.parentNode.removeChild(slide);
+          busy=false; updateActionState();
+          if(!track.children.length){ close(); return; }
+          var nextIdx=Math.min(wasIdx, track.children.length-1);
+          track.scrollTop=nextIdx*track.clientHeight;
+          setActive(nextIdx);
+        },340);
+      }
+      function openAt(startId){
+        if(!nodes.length||open) return;
+        deckExpanded=true; parkDeck();
+        track.innerHTML=''; sound=sw.soundOn===true; open=true;
+        el.hidden=false; document.documentElement.classList.add('rk-noscroll');
+        if(io) io.disconnect();
+        io=('IntersectionObserver' in window)?new IntersectionObserver(function(entries){
+          entries.forEach(function(en){
+            if(!en.isIntersecting) return;
+            var i=[].indexOf.call(track.children,en.target);
+            if(i>=0&&i!==active) setActive(i);
+          });
+        },{root:track,threshold:0.6}):null;
+        nodes.forEach(function(n){ appendSlide(n._card); });
+        updateActionState();
+        var startIdx=0;
+        for(var i=0;i<nodes.length;i++){ if(String(nodes[i]._card.id)===String(startId)){ startIdx=i; break; } }
+        track.scrollTop=startIdx*track.clientHeight;
+        setActive(startIdx);
+      }
+      function close(){
+        if(!open) return;
+        open=false; active=-1; activeCardId=null; busy=false;
+        if(io){ io.disconnect(); io=null; }
+        track.innerHTML=''; el.hidden=true;
+        document.documentElement.classList.remove('rk-noscroll');
+        deckExpanded=false; sw.soundOn=sound; // carry the sound pref back to the deck
+        restack(); updateSoundBtn();
+      }
+
+      el.querySelectorAll('[data-sv-close]').forEach(function(b){ b.addEventListener('click',close); });
+      var muteBtn=el.querySelector('[data-sv-mute]');
+      if(muteBtn) muteBtn.addEventListener('click',function(){ sound=!sound; syncSVSound(); });
+      var prevBtn=el.querySelector('[data-sv-prev]'); if(prevBtn) prevBtn.addEventListener('click',function(){ step(-1); });
+      var nextBtn=el.querySelector('[data-sv-next]'); if(nextBtn) nextBtn.addEventListener('click',function(){ step(1); });
+      if(rejectBtn) rejectBtn.addEventListener('click',function(){ decideActive('skip'); });
+      if(approveBtn) approveBtn.addEventListener('click',function(){ decideActive('fork'); });
+      // tap the empty gutter (not the phone frame) closes the viewer
+      track.addEventListener('click',function(e){
+        var t=e.target;
+        if(t&&t.classList&&(t.classList.contains('rk-discover-viewer-slide')||t===track)) close();
+      });
+      document.addEventListener('keydown',function(e){
+        if(!open) return;
+        if(e.key==='Escape'){ e.preventDefault(); close(); }
+        else if(e.key==='ArrowDown'||e.key==='PageDown'){ e.preventDefault(); step(1); }
+        else if(e.key==='ArrowUp'||e.key==='PageUp'){ e.preventDefault(); step(-1); }
+        else if(e.key==='ArrowRight'){ e.preventDefault(); decideActive('fork'); }
+        else if(e.key==='ArrowLeft'){ e.preventDefault(); decideActive('skip'); }
+      });
+      window.addEventListener('resize',function(){ if(open&&active>=0) track.scrollTop=active*track.clientHeight; });
+
+      return { openAt:openAt, close:close, sync:sync, isOpen:function(){ return open; } };
+    })();
+
+    // Tap the front card → open the fullscreen viewer at that card.
+    if(deck) deck.addEventListener('click',function(e){
+      if(sw.busy||(swViewer&&swViewer.isOpen())||!nodes.length) return;
+      var el=(e.target&&e.target.closest)?e.target.closest('.rk-discover-swipe'):null;
+      if(!el||!el._card||el!==nodes[0]) return; // only the front card is interactive
+      if(swViewer) swViewer.openAt(el._card.id);
+    });
+
     if(skipBtn) skipBtn.addEventListener('click',function(){ decide('skip'); });
     if(forkBtn) forkBtn.addEventListener('click',function(){ decide('fork'); });
     loadStack();
@@ -1088,9 +1776,13 @@ video.rk-discover-viewer-media{cursor:pointer}
         title: `vidfarm reskin — Discover (${mode})`,
         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