@mevdragon/vidfarm-devcli 0.16.0 → 0.17.0

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

@@ -0,0 +1,380 @@
+// /reskin/discover — the template discovery surface, in the farmville design system.
+// SIMPLIFIED & RESTRUCTURED into THREE server-routed modes, each its own URL:
+//   • feed       → /reskin/discover/feed       — clean 9:16 poster grid
+//   • swipe      → /reskin/discover/swipe       — Tinder-style single-card deck
+//   • categories → /reskin/discover/categories  — browse-by-format cards
+//
+// The mode is chosen server-side (the `mode` arg) and surfaced as a Feed / Swipe /
+// Categories segmented toggle rendered as THREE real <a> links. Rendered with baked
+// SAMPLE data so every mode views without auth or a live catalog. Uses ONLY shared
+// rk-* primitives + a page-scoped rk-discover-* CSS block + a tiny self-contained
+// module script (deck advance in swipe). Pill density is kept deliberately low: at
+// most a duration overlay + a plain meta line + the single gold Fork CTA per card,
+// so the surface reads calm rather than repetitive.
+import { reskinDocument } from "./document.js";
+const MODES = [
+    { mode: "feed", label: "Feed" },
+    { mode: "swipe", label: "Swipe" },
+    { mode: "categories", label: "Categories" }
+];
+const MODE_COPY = {
+    feed: {
+        badge: "Template feed",
+        sub: "Browse proven short-form formats, then fork one into a live editor and make it yours in an afternoon."
+    },
+    swipe: {
+        badge: "Swipe to customize",
+        sub: "One template at a time — keep the ones that fit and we'll recut them into ads for your brand."
+    },
+    categories: {
+        badge: "Browse by format",
+        sub: "Jump straight to the style you need — every short-form format, neatly grouped."
+    }
+};
+const CARDS = [
+    { emoji: "💄", grad: "linear-gradient(150deg,#ffd76a,#f97316)", hook: "POV: you finally found the serum", title: "Skincare UGC hook", handle: "@glow.recipes", difficulty: "easy", duration: "0:18", cat: "ugc", forks: "2.4k" },
+    { emoji: "🎙️", grad: "linear-gradient(160deg,#6cc0f5,#3f9fe0)", hook: "Nobody tells you this about growth", title: "Talking-head monologue", handle: "@founder.notes", difficulty: "easy", duration: "0:32", cat: "talking", forks: "1.9k" },
+    { emoji: "🧠", grad: "linear-gradient(155deg,#c4a0ee,#7c3aed)", hook: "How it actually works", title: "Kinetic explainer", handle: "@explain.daily", difficulty: "medium", duration: "0:44", cat: "explainer", forks: "3.1k" },
+    { emoji: "🔟", grad: "linear-gradient(160deg,#7de0a3,#16a34a)", hook: "5 tools I can't live without", title: "Listicle countdown", handle: "@stack.picks", difficulty: "easy", duration: "0:27", cat: "listicle", forks: "1.2k" },
+    { emoji: "😂", grad: "linear-gradient(150deg,#ffb27a,#f43f5e)", hook: "me explaining this to my boss", title: "Meme recaption", handle: "@office.brainrot", difficulty: "easy", duration: "0:11", cat: "meme", forks: "5.8k" },
+    { emoji: "✨", grad: "linear-gradient(155deg,#ffc9d4,#f472b6)", hook: "get ready with me", title: "GRWM voiceover", handle: "@morning.rituals", difficulty: "medium", duration: "0:38", cat: "talking", forks: "980" },
+    { emoji: "📱", grad: "linear-gradient(155deg,#4b4b4b,#171717)", hook: "This app saved me 4 hours a day", title: "Software product demo", handle: "@shipfast.co", difficulty: "hard", duration: "0:41", cat: "product", forks: "2.0k" },
+    { emoji: "📖", grad: "linear-gradient(160deg,#8fa3ff,#4f46e5)", hook: "AITA for quitting on day one?", title: "Reddit story + gameplay", handle: "@story.loops", difficulty: "medium", duration: "0:52", cat: "story", forks: "4.3k" },
+    { emoji: "🏆", grad: "linear-gradient(150deg,#ffd76a,#fb7185)", hook: "Top 10 hooks that actually convert", title: "Ranking / tier list", handle: "@viral.teardown", difficulty: "medium", duration: "0:35", cat: "listicle", forks: "2.7k" },
+    { emoji: "💬", grad: "linear-gradient(160deg,#5eead4,#0d9488)", hook: "I doubled my revenue in 60 days", title: "Testimonial UGC", handle: "@case.studies", difficulty: "easy", duration: "0:24", cat: "ugc", forks: "1.5k" },
+    { emoji: "📊", grad: "linear-gradient(150deg,#ffe08a,#38bdf8)", hook: "The chart that broke the internet", title: "Data-viz explainer", handle: "@number.go.up", difficulty: "hard", duration: "0:29", cat: "explainer", forks: "890" },
+    { emoji: "🎬", grad: "linear-gradient(160deg,#c084fc,#1e1b4b)", hook: "One shot. No cuts.", title: "Cinematic short", handle: "@one.take", difficulty: "expert", duration: "0:47", cat: "story", forks: "670" }
+];
+// The swipe deck — a curated front-to-back run through the strongest formats.
+const SWIPE_CARDS = [
+    CARDS[0], // Skincare UGC
+    CARDS[4], // Meme recaption
+    CARDS[2], // Kinetic explainer
+    CARDS[7], // Reddit story
+    CARDS[1] // Talking-head monologue
+];
+const CATEGORIES = [
+    {
+        slug: "ugc", label: "UGC ad", emoji: "💄", tile: "rk-tile-coral", count: 128,
+        blurb: "Creator-style ads that feel like a recommendation, not an ad.",
+        thumbs: [
+            { emoji: "💄", grad: "linear-gradient(150deg,#ffd76a,#f97316)" },
+            { emoji: "💬", grad: "linear-gradient(160deg,#5eead4,#0d9488)" },
+            { emoji: "🧴", grad: "linear-gradient(150deg,#ffc9d4,#f472b6)" },
+            { emoji: "🛍️", grad: "linear-gradient(155deg,#ffb27a,#f43f5e)" }
+        ]
+    },
+    {
+        slug: "talking", label: "Talking head", emoji: "🎙️", tile: "rk-tile-sky", count: 96,
+        blurb: "Straight-to-camera monologues with punchy captioned hooks.",
+        thumbs: [
+            { emoji: "🎙️", grad: "linear-gradient(160deg,#6cc0f5,#3f9fe0)" },
+            { emoji: "✨", grad: "linear-gradient(155deg,#ffc9d4,#f472b6)" },
+            { emoji: "🗣️", grad: "linear-gradient(160deg,#8fa3ff,#4f46e5)" }
+        ]
+    },
+    {
+        slug: "explainer", label: "Explainer", emoji: "🧠", tile: "rk-tile-violet", count: 74,
+        blurb: "Kinetic typography and diagrams that make an idea click.",
+        thumbs: [
+            { emoji: "🧠", grad: "linear-gradient(155deg,#c4a0ee,#7c3aed)" },
+            { emoji: "📊", grad: "linear-gradient(150deg,#ffe08a,#38bdf8)" },
+            { emoji: "🔗", grad: "linear-gradient(160deg,#a5b4fc,#6366f1)" },
+            { emoji: "💡", grad: "linear-gradient(150deg,#ffe08a,#f59e0b)" }
+        ]
+    },
+    {
+        slug: "listicle", label: "Listicle", emoji: "🔟", tile: "rk-tile-green", count: 63,
+        blurb: "Countdowns, tier lists and ranked picks that keep watch time high.",
+        thumbs: [
+            { emoji: "🔟", grad: "linear-gradient(160deg,#7de0a3,#16a34a)" },
+            { emoji: "🏆", grad: "linear-gradient(150deg,#ffd76a,#fb7185)" },
+            { emoji: "⭐", grad: "linear-gradient(150deg,#ffe08a,#f97316)" }
+        ]
+    },
+    {
+        slug: "meme", label: "Meme", emoji: "😂", tile: "rk-tile-gold", count: 141,
+        blurb: "Recaptioned reactions and relatable brainrot for reach.",
+        thumbs: [
+            { emoji: "😂", grad: "linear-gradient(150deg,#ffb27a,#f43f5e)" },
+            { emoji: "🤡", grad: "linear-gradient(150deg,#ffd76a,#f97316)" },
+            { emoji: "🔥", grad: "linear-gradient(150deg,#fb923c,#ef4444)" },
+            { emoji: "💀", grad: "linear-gradient(160deg,#94a3b8,#334155)" }
+        ]
+    },
+    {
+        slug: "product", label: "Product demo", emoji: "📱", tile: "rk-tile-ink", count: 52,
+        blurb: "Screen-first walkthroughs that sell the feature in 30 seconds.",
+        thumbs: [
+            { emoji: "📱", grad: "linear-gradient(155deg,#4b4b4b,#171717)" },
+            { emoji: "🖥️", grad: "linear-gradient(160deg,#64748b,#0f172a)" },
+            { emoji: "⚡", grad: "linear-gradient(150deg,#ffe08a,#38bdf8)" }
+        ]
+    },
+    {
+        slug: "story", label: "Story", emoji: "📖", tile: "rk-tile-violet", count: 88,
+        blurb: "Narrated stories over satisfying gameplay or B-roll.",
+        thumbs: [
+            { emoji: "📖", grad: "linear-gradient(160deg,#8fa3ff,#4f46e5)" },
+            { emoji: "🎬", grad: "linear-gradient(160deg,#c084fc,#1e1b4b)" },
+            { emoji: "🎮", grad: "linear-gradient(160deg,#5eead4,#0d9488)" },
+            { emoji: "📜", grad: "linear-gradient(150deg,#ffd76a,#f59e0b)" }
+        ]
+    }
+];
+const FORK_ICON = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.4"/><circle cx="6" cy="18" r="2.4"/><circle cx="18" cy="7" r="2.4"/><path d="M6 8.4v7.2M18 9.4c0 3-3 3.6-6 4.2"/></svg>`;
+// ── feed: poster card ──────────────────────────────────────────────────────
+// Deliberately calm: just the duration overlay on the poster, ONE plain muted
+// meta line (handle · forks — not pills), and the single gold Fork CTA.
+function posterCard(c) {
+    return `<article class="rk-discover-card rk-card-hover">
+    <div class="rk-discover-poster" style="background:${c.grad}">
+      <span class="rk-discover-poster-glyph" aria-hidden="true">${c.emoji}</span>
+      <span class="rk-discover-dur">${c.duration}</span>
+      <div class="rk-discover-scrim"></div>
+      <p class="rk-discover-hook">${c.hook}</p>
+    </div>
+    <div class="rk-discover-body">
+      <div class="rk-discover-titlewrap">
+        <h3 class="rk-discover-title">${c.title}</h3>
+        <p class="rk-discover-metaline">${c.handle} · ${c.forks} forks</p>
+      </div>
+      <button type="button" class="rk-btn rk-btn-gold rk-btn-sm rk-btn-block rk-discover-fork">${FORK_ICON} Fork template</button>
+    </div>
+  </article>`;
+}
+// ── swipe: single deck card (full-bleed poster with overlaid info) ──────────
+function swipeCard(c, i) {
+    const z = 20 - i;
+    const scale = (1 - i * 0.045).toFixed(3);
+    const ty = i * 12;
+    const op = i === 0 ? 1 : i === 1 ? 0.92 : 0.82;
+    const hidden = i > 2 ? "display:none;" : "";
+    const style = `z-index:${z};transform:translateY(${ty}px) scale(${scale});opacity:${op};${hidden}`;
+    return `<article class="rk-discover-swipe${i === 0 ? " is-front" : ""}" data-swipe style="${style}">
+    <div class="rk-discover-swipe-art" style="background:${c.grad}"></div>
+    <span class="rk-discover-poster-glyph" aria-hidden="true">${c.emoji}</span>
+    <span class="rk-discover-dur">${c.duration}</span>
+    <div class="rk-discover-swipe-scrim"></div>
+    <div class="rk-discover-swipe-info">
+      <p class="rk-discover-hook">${c.hook}</p>
+      <div class="rk-discover-swipe-foot">
+        <div class="rk-discover-swipe-title">${c.title}</div>
+        <div class="rk-discover-swipe-handle">${c.handle} · ${c.forks} forks</div>
+      </div>
+    </div>
+  </article>`;
+}
+// ── categories: one browse card ─────────────────────────────────────────────
+function categoryCard(g) {
+    const thumbs = g.thumbs
+        .map((t) => `<span class="rk-discover-mini" style="background:${t.grad}">${t.emoji}</span>`)
+        .join("");
+    return `<a class="rk-discover-cat rk-card-hover" href="/reskin/discover/feed" data-cat="${g.slug}">
+    <div class="rk-discover-cat-head">
+      <div class="rk-discover-cat-titlewrap">
+        <h3 class="rk-discover-cat-title">${g.label}</h3>
+        <p class="rk-discover-cat-count">${g.count} templates</p>
+      </div>
+      <span class="rk-discover-cat-arrow" aria-hidden="true">→</span>
+    </div>
+    <p class="rk-discover-cat-blurb">${g.blurb}</p>
+    <div class="rk-discover-cat-thumbs">${thumbs}</div>
+  </a>`;
+}
+// ── the segmented Feed / Swipe / Categories toggle (three real links) ───────
+function modeToggle(active) {
+    const links = MODES.map((m) => {
+        const on = m.mode === active ? " is-active" : "";
+        return `<a class="rk-discover-mode${on}" href="/reskin/discover/${m.mode}"${m.mode === active ? ' aria-current="page"' : ""}>${m.label}</a>`;
+    }).join("");
+    return `<nav class="rk-discover-modes" aria-label="Discover mode">${links}</nav>`;
+}
+export function renderReskinDiscover(mode = "feed") {
+    const copy = MODE_COPY[mode];
+    // ── FEED ──────────────────────────────────────────────────────────────────
+    let modeBody = "";
+    if (mode === "feed") {
+        const cards = CARDS.map(posterCard).join("");
+        modeBody = `<div class="rk-discover-grid">${cards}</div>`;
+    }
+    // ── SWIPE ─────────────────────────────────────────────────────────────────
+    if (mode === "swipe") {
+        const deck = SWIPE_CARDS.map((c, i) => swipeCard(c, i)).join("");
+        modeBody = `
+    <div class="rk-discover-swipe-wrap">
+      <p class="rk-discover-helper">Tap <b>✓ Fork</b> to recut a template into an ad for your brand, or <b>✕ Skip</b> to see the next one.</p>
+      <div class="rk-discover-deck" data-deck>
+        ${deck}
+        <div class="rk-discover-empty" data-empty hidden>
+          <h3>You're all caught up</h3>
+          <p class="rk-muted">We're lining up fresh templates that match your brand.</p>
+          <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" data-restart>↻ Reshuffle the deck</button>
+        </div>
+      </div>
+      <div class="rk-discover-actions" data-actions>
+        <button type="button" class="rk-discover-act rk-discover-act-skip" data-swipe-skip aria-label="Skip">✕</button>
+        <button type="button" class="rk-discover-act rk-discover-act-fork" data-swipe-fork aria-label="Fork">✓</button>
+      </div>
+      <p class="rk-discover-act-hint" data-actions-hint>Swipe to customize into an ad for your brand.</p>
+    </div>`;
+    }
+    // ── CATEGORIES ────────────────────────────────────────────────────────────
+    if (mode === "categories") {
+        const cats = CATEGORIES.map(categoryCard).join("");
+        modeBody = `<div class="rk-discover-cats">${cats}</div>`;
+    }
+    const body = `
+<main class="rk-container rk-page">
+  <div class="rk-page-head rk-discover-head">
+    <span class="rk-badge">${copy.badge}</span>
+    <h1 class="rk-h1">Discover</h1>
+    <p class="rk-sub">${copy.sub}</p>
+  </div>
+  ${modeToggle(mode)}
+  ${modeBody}
+</main>`;
+    const pageCss = `
+.rk-discover-head{margin-bottom:22px}
+
+/* segmented Feed / Swipe / Categories toggle — three real links, gold active */
+.rk-discover-modes{display:inline-flex;gap:4px;background:var(--rk-n-100);border:1px solid var(--rk-border);
+  border-radius:var(--rk-r-full);padding:4px;box-shadow:var(--rk-shadow-xs);margin-bottom:28px;max-width:100%;overflow:auto;scrollbar-width:none}
+.rk-discover-modes::-webkit-scrollbar{display:none}
+.rk-discover-mode{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--rk-r-full);
+  font-size:14px;font-weight:600;color:var(--rk-n-600);white-space:nowrap;
+  transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-discover-mode:hover{color:var(--rk-ink)}
+.rk-discover-mode.is-active{background:var(--rk-gold-500);color:var(--rk-ink);font-weight:700;box-shadow:var(--rk-shadow-sm)}
+
+/* ── feed: poster grid ── */
+.rk-discover-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:22px}
+@media(max-width:520px){.rk-discover-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}}
+.rk-discover-card{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);overflow:hidden;box-shadow:var(--rk-shadow-card);display:flex;flex-direction:column}
+.rk-discover-poster{position:relative;aspect-ratio:9/16;display:flex;align-items:flex-end;overflow:hidden}
+.rk-discover-poster-glyph{position:absolute;inset:0;z-index:0;display:grid;place-items:center;font-size:3.2rem;line-height:1;
+  opacity:.92;filter:drop-shadow(0 2px 10px rgba(0,0,0,.2))}
+.rk-discover-dur{position:absolute;top:14px;right:12px;z-index:3;font-family:var(--rk-font-body);font-size:11.5px;font-weight:700;color:#fff;
+  background:rgba(0,0,0,.34);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:4px 9px;border-radius:var(--rk-r-full)}
+.rk-discover-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,.14) 38%,transparent 62%)}
+.rk-discover-hook{position:relative;z-index:2;margin:0;padding:16px 15px 17px;font-family:var(--rk-font-display);font-weight:800;font-size:1.12rem;
+  line-height:1.12;letter-spacing:-.02em;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.35)}
+.rk-discover-body{padding:15px 16px 16px;display:grid;gap:13px}
+.rk-discover-titlewrap{display:grid;gap:4px}
+.rk-discover-title{font-family:var(--rk-font-display);font-size:1.02rem;font-weight:700;letter-spacing:-.01em;color:var(--rk-ink);line-height:1.2}
+.rk-discover-metaline{font-size:12.5px;font-weight:500;color:var(--rk-text-muted)}
+.rk-discover-fork{gap:7px}
+.rk-discover-fork svg{margin-top:-1px}
+
+/* ── swipe: single-card deck ── */
+.rk-discover-swipe-wrap{display:grid;justify-items:center;gap:18px;padding:4px 0 8px}
+.rk-discover-helper{font-size:14px;color:var(--rk-text-muted);text-align:center;max-width:440px}
+.rk-discover-helper b{color:var(--rk-ink);font-weight:700}
+.rk-discover-deck{position:relative;width:min(322px,84vw);aspect-ratio:9/16;margin:6px 0 44px}
+.rk-discover-swipe{position:absolute;inset:0;border-radius:var(--rk-r-3xl);overflow:hidden;border:1px solid var(--rk-border);
+  box-shadow:var(--rk-shadow-xl);transform-origin:center bottom;will-change:transform;
+  transition:transform .38s var(--rk-ease),opacity .38s var(--rk-ease)}
+.rk-discover-swipe-art{position:absolute;inset:0;z-index:0}
+.rk-discover-swipe .rk-discover-poster-glyph{font-size:5rem;opacity:.9}
+.rk-discover-swipe-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(0,0,0,.62) 0%,rgba(0,0,0,.2) 42%,rgba(0,0,0,.06) 66%,transparent 82%)}
+.rk-discover-swipe-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 20px 22px;display:grid;gap:14px}
+.rk-discover-swipe .rk-discover-hook{padding:0;font-size:1.5rem;line-height:1.08}
+.rk-discover-swipe-foot{display:grid;gap:4px;min-width:0}
+.rk-discover-swipe-title{font-family:var(--rk-font-display);font-weight:700;font-size:1.02rem;color:#fff;letter-spacing:-.01em;line-height:1.2}
+.rk-discover-swipe-handle{font-size:12.5px;font-weight:500;color:rgba(255,255,255,.82)}
+
+.rk-discover-empty{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;padding:28px;
+  background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-card)}
+.rk-discover-empty h3{font-family:var(--rk-font-display);font-size:var(--rk-text-xl);color:var(--rk-ink)}
+.rk-discover-empty p{font-size:13.5px;max-width:230px}
+.rk-discover-empty .rk-btn{margin-top:8px}
+
+.rk-discover-actions{display:flex;align-items:center;justify-content:center;gap:20px}
+.rk-discover-act{width:60px;height:60px;flex:none;border-radius:var(--rk-r-full);border:1px solid var(--rk-border);background:#fff;
+  display:grid;place-items:center;font-size:24px;font-weight:700;cursor:pointer;box-shadow:var(--rk-shadow-md);
+  transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.rk-discover-act:hover{transform:translateY(-2px);box-shadow:var(--rk-shadow-lg)}
+.rk-discover-act-skip{color:var(--rk-n-500)}
+.rk-discover-act-skip:hover{color:var(--rk-red);border-color:var(--rk-red-tint)}
+.rk-discover-act-fork{background:var(--rk-gold-500);color:var(--rk-ink);border-color:transparent}
+.rk-discover-act-fork:hover{background:var(--rk-gold-700);box-shadow:0 8px 22px -6px rgba(252,185,0,.6)}
+.rk-discover-act-hint{font-size:12.5px;font-weight:600;color:var(--rk-text-faint);text-align:center;letter-spacing:.01em}
+
+/* ── categories: browse-by-format cards ── */
+.rk-discover-cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:20px}
+@media(max-width:560px){.rk-discover-cats{grid-template-columns:1fr}}
+.rk-discover-cat{display:flex;flex-direction:column;gap:14px;background:var(--rk-surface);border:1px solid var(--rk-border);
+  border-radius:var(--rk-r-3xl);padding:22px;box-shadow:var(--rk-shadow-card);color:inherit}
+.rk-discover-cat-head{display:flex;align-items:center;gap:14px}
+.rk-discover-cat-titlewrap{flex:1;min-width:0;display:grid;gap:2px}
+.rk-discover-cat-title{font-family:var(--rk-font-display);font-size:var(--rk-text-lg);font-weight:700;color:var(--rk-ink);letter-spacing:-.01em}
+.rk-discover-cat-count{font-size:12.5px;font-weight:600;color:var(--rk-text-muted)}
+.rk-discover-cat-arrow{flex:none;font-size:18px;color:var(--rk-n-400);transition:transform var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-discover-cat:hover .rk-discover-cat-arrow{transform:translateX(3px);color:var(--rk-gold-700)}
+.rk-discover-cat-blurb{font-size:13px;color:var(--rk-text-muted);line-height:1.45}
+.rk-discover-cat-thumbs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
+.rk-discover-mini{aspect-ratio:9/16;border-radius:var(--rk-r-lg);display:grid;place-items:center;font-size:20px;box-shadow:var(--rk-shadow-xs)}
+`;
+    const script = `
+(function(){
+  var root=document;
+  // ── swipe: advance the deck ──
+  var deck=root.querySelector('[data-deck]');
+  if(deck){
+    var empty=deck.querySelector('[data-empty]');
+    var actions=root.querySelector('[data-actions]');
+    var hint=root.querySelector('[data-actions-hint]');
+    var all=Array.prototype.slice.call(deck.querySelectorAll('[data-swipe]'));
+    var live=all.slice();
+    function restack(){
+      live.forEach(function(c,i){
+        if(i>2){c.style.display='none';return;}
+        c.style.display='';
+        c.style.zIndex=String(20-i);
+        c.style.transform='translateY('+(i*12)+'px) scale('+(1-i*0.045).toFixed(3)+')';
+        c.style.opacity=i===0?'1':(i===1?'0.92':'0.82');
+        c.classList.toggle('is-front',i===0);
+      });
+      if(live.length===0){
+        if(empty)empty.hidden=false;
+        if(actions)actions.style.visibility='hidden';
+        if(hint)hint.style.visibility='hidden';
+      }
+    }
+    function advance(dir){
+      var front=live.shift();
+      if(!front)return;
+      front.classList.remove('is-front');
+      front.style.transform='translateX('+(dir==='fork'?460:-460)+'px) rotate('+(dir==='fork'?15:-15)+'deg)';
+      front.style.opacity='0';
+      window.setTimeout(function(){front.style.display='none';},360);
+      restack();
+    }
+    var skip=root.querySelector('[data-swipe-skip]');
+    var fork=root.querySelector('[data-swipe-fork]');
+    if(skip)skip.addEventListener('click',function(){advance('skip')});
+    if(fork)fork.addEventListener('click',function(){advance('fork')});
+    var restart=deck.querySelector('[data-restart]');
+    if(restart)restart.addEventListener('click',function(){
+      live=all.slice();
+      all.forEach(function(c){c.style.transition='none';c.style.opacity='';c.style.transform='';});
+      // force reflow so the reset transforms take without animating
+      void deck.offsetWidth;
+      all.forEach(function(c){c.style.transition='';});
+      if(empty)empty.hidden=true;
+      if(actions)actions.style.visibility='';
+      if(hint)hint.style.visibility='';
+      restack();
+    });
+  }
+})();`;
+    return reskinDocument({
+        title: `vidfarm reskin — Discover (${mode})`,
+        description: "Reskinned vidfarm Discover — Feed / Swipe / Categories modes, poster cards, warm sunny SaaS.",
+        activeSlug: "discover",
+        pageCss,
+        body,
+        script
+    });
+}
+//# sourceMappingURL=discover-page.js.map

package/dist/src/reskin/document.js

@@ -0,0 +1,74 @@
+// ─────────────────────────────────────────────────────────────────────────
+// /reskin/* shared document skeleton + chrome (LEFT SIDEBAR nav)
+// ─────────────────────────────────────────────────────────────────────────
+// Every reskin page module calls `reskinDocument(...)` to wrap its body in a
+// full, standalone HTML document that loads ONLY the shared reskin stylesheet
+// (theme.ts). This is what guarantees CSS isolation from the live app pages.
+//
+// The app chrome is a fixed LEFT sidebar nav (Notion/Linear-style) + a content
+// column. Page modules stay pure: they build a `body` string (their own
+// `<main class="rk-container rk-page">…`) and return `reskinDocument({...})`.
+// They never emit the sidebar and never import from app.ts.
+//
+// NOTE: the sidebar uses `.rk-sidebar*` class names — deliberately NOT `.rk-side*`
+// (that belongs to the settings page's own inner tab rail) so the two never clash.
+import { RESKIN_CSS, RESKIN_FONT_LINKS, RESKIN_PAGES } from "./theme.js";
+/** Minimal HTML escaper so reskin modules don't need to import app helpers. */
+export function rkEscape(value) {
+    return String(value ?? "")
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+function renderSidebar(activeSlug) {
+    const items = RESKIN_PAGES.map((p) => {
+        const active = p.slug === activeSlug ? " is-active" : "";
+        return `<a class="rk-sidebar-item${active}" href="/reskin/${p.slug}"${p.slug === activeSlug ? ` aria-current="page"` : ""}>${p.label}</a>`;
+    }).join("");
+    const live = RESKIN_PAGES.find((p) => p.slug === activeSlug)?.live ?? "/";
+    const homeActive = activeSlug === null ? " is-active" : "";
+    return `<aside class="rk-sidebar">
+  <a class="rk-sidebar-brand" href="/reskin"><span class="rk-brand-mark">V</span>vidfarm<span class="rk-brand-tag">reskin</span></a>
+  <nav class="rk-sidebar-nav" aria-label="Reskin pages">
+    <a class="rk-sidebar-item${homeActive}" href="/reskin">Gallery</a>
+    <div class="rk-sidebar-sep"></div>
+    ${items}
+  </nav>
+  <div class="rk-sidebar-foot">
+    <a class="rk-sidebar-foot-link" href="${rkEscape(live)}">↗ Compare with live page</a>
+    <a class="rk-btn rk-btn-ink rk-btn-sm rk-sidebar-cta" href="/">Live site <span class="rk-arrow">→</span></a>
+  </div>
+</aside>`;
+}
+/** Wrap page content in a complete standalone reskin HTML document. */
+export function reskinDocument(input) {
+    const chrome = input.chrome ?? "full";
+    const active = input.activeSlug ?? null;
+    const pageCss = input.pageCss ? `\n/* page-scoped */\n${input.pageCss}\n` : "";
+    const script = input.script ? `\n<script>${input.script}</script>` : "";
+    const shell = chrome === "full"
+        ? `<div class="rk-app">
+${renderSidebar(active)}
+<div class="rk-content">
+${input.body}
+</div>
+</div>`
+        : input.body;
+    return `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${rkEscape(input.title)}</title>
+<meta name="description" content="${rkEscape(input.description ?? input.title)}">
+${RESKIN_FONT_LINKS}
+<style>${RESKIN_CSS}${pageCss}</style>
+</head>
+<body class="rk-root${chrome === "full" ? " rk-has-sidebar" : ""}">
+${shell}${script}
+</body>
+</html>`;
+}
+//# sourceMappingURL=document.js.map