@mevdragon/vidfarm-devcli 0.18.0 → 0.18.1

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,59 @@ function viewerHtml() {
       </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 +214,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,6 +232,7 @@ 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>
@@ -195,11 +251,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 +273,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 +347,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 +365,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 +484,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 +518,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)}
@@ -447,6 +594,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 +657,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 +732,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))+'">'+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 +823,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 +844,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))+'">'+EDIT_ICON+' Open Editor</a>')
           +'</div>'
         +'</figure>'
       +'</section>';
@@ -764,9 +981,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 +1002,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 +1024,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 +1033,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 +1086,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,9 +1233,32 @@ 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
 
+    // ── 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; });
@@ -860,6 +1267,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 +1291,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;
     }
@@ -898,6 +1313,7 @@ video.rk-discover-viewer-media{cursor:pointer}
       var has=nodes.length>0;
       actionBtns.forEach(function(b){ b.hidden=!has; });
       if(hint) hint.hidden=!has;
+      syncSound(); updateSoundBtn();
       if(!has) swCaughtUp();
     }
     function swCaughtUp(){
@@ -935,8 +1351,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(){
+          // 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(){ sw.refilling=false; });
+        .catch(function(){ pollTries++; schedulePoll(); });
     }
     function loadStack(){
       swShowState('<div class="rk-discover-spinner" aria-hidden="true"></div><div>Loading your deck&hellip;</div>');
@@ -953,7 +1404,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);
@@ -1088,9 +1539,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