@mevdragon/vidfarm-devcli 0.16.0 → 0.17.0

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

@@ -0,0 +1,515 @@
+// /reskin/library — the director's own studio, ported into the farmville design
+// system. Mirrors src/account-pages-legacy.ts → renderLibraryPage + the clip
+// gallery (renderClipsPage). This is now ONE page with two server-routed tabs:
+//   /reskin/library/approved → your projects, renders & ready-to-post cuts
+//   /reskin/library/clips    → long-form videos mined into tagged short clips
+//
+// Renders with representative SAMPLE data so it can be viewed without auth. The
+// tab toggle is real <a> links (each tab is its own URL); card actions point at
+// the real routes (/editor, /job-runs, /calendar, /discover, /approved/posts/…).
+// Everything visual is built on the shared rk-* primitives + a page-scoped
+// rk-library-* / rk-clips-* CSS block.
+import { reskinDocument, rkEscape } from "./document.js";
+const PROJECTS = [
+    { id: "proj_9c41f0", title: "Swipe-mode ad — DTC skincare", emoji: "🧴", grad: "coral", status: "ready", originKind: "inspiration", originLabel: "Punchy Hook 15s", duration: "0:15", when: "Rendered 2h ago" },
+    { id: "proj_7a12bd", title: "Founder VO — “ship a week in an afternoon”", emoji: "🎙️", grad: "honey", status: "rendering", originKind: "raw", originLabel: "Raw upload", duration: "0:42", when: "Started 4m ago", progress: 64 },
+    { id: "proj_3fd80a", title: "UGC unboxing recut #3", emoji: "📦", grad: "sky", status: "draft", originKind: "inspiration", originLabel: "Unboxing Energy", duration: "0:22", when: "Edited yesterday" },
+    { id: "proj_c19e44", title: "Honey-gold pricing explainer", emoji: "💳", grad: "violet", status: "scheduled", originKind: "inspiration", originLabel: "Explainer Grid", duration: "0:38", when: "Posts Jul 9, 9:00 AM" },
+    { id: "proj_66b2c1", title: "TikTok hook A/B — captions pop", emoji: "💬", grad: "green", status: "ready", originKind: "inspiration", originLabel: "Caption Punch", duration: "0:12", when: "Rendered Jul 6" },
+    { id: "proj_15aa09", title: "Clip mine → 15s teaser", emoji: "✂️", grad: "sky", status: "draft", originKind: "raw", originLabel: "Raw clips", duration: "0:15", when: "Edited 3d ago" },
+    { id: "proj_ken042", title: "Ken Burns product hero", emoji: "🖼️", grad: "honey", status: "posted", originKind: "inspiration", originLabel: "Still-to-Motion", duration: "0:18", when: "Posted Jul 4 · @vidfarm", href: "/approved/posts/proj_ken042" },
+    { id: "proj_news77", title: "Newsletter drop cut", emoji: "📮", grad: "coral", status: "posted", originKind: "raw", originLabel: "Raw upload", duration: "0:30", when: "Posted Jul 1 · Email", href: "/approved/posts/proj_news77" },
+    { id: "proj_sizzle", title: "Sunny SaaS sizzle reel", emoji: "☀️", grad: "ink", status: "rendering", originKind: "inspiration", originLabel: "Brand Sizzle", duration: "1:04", when: "Started 12m ago", progress: 31 },
+    { id: "proj_prompt5", title: "Prompt-gen: “costco for business apps”", emoji: "✨", grad: "violet", status: "draft", originKind: "raw", originLabel: "Prompt-gen", duration: "0:20", when: "Created 5d ago" }
+];
+const GRAD = {
+    honey: "radial-gradient(120% 78% at 22% 4%,rgba(255,255,255,.6),transparent 55%),linear-gradient(158deg,#ffe9cc,#ffc738 96%)",
+    coral: "radial-gradient(120% 78% at 22% 4%,rgba(255,255,255,.5),transparent 55%),linear-gradient(158deg,#ffe1c2,#f97316 98%)",
+    sky: "radial-gradient(120% 78% at 22% 4%,rgba(255,255,255,.58),transparent 55%),linear-gradient(158deg,#e2effd,#3f9fe0 98%)",
+    violet: "radial-gradient(120% 78% at 22% 4%,rgba(255,255,255,.5),transparent 55%),linear-gradient(158deg,#ece4fd,#9f5bde 98%)",
+    green: "radial-gradient(120% 78% at 22% 4%,rgba(255,255,255,.5),transparent 55%),linear-gradient(158deg,#dcfce7,#22c55e 98%)",
+    ink: "radial-gradient(120% 78% at 22% 4%,rgba(255,255,255,.18),transparent 55%),linear-gradient(158deg,#3f3f46,#171717 98%)"
+};
+const STATUS = {
+    draft: { short: "Draft", pill: "rk-pill" },
+    rendering: { short: "Rendering", pill: "rk-pill-sky" },
+    ready: { short: "Ready", pill: "rk-pill-green" },
+    scheduled: { short: "Scheduled", pill: "rk-pill-violet" },
+    posted: { short: "Posted", pill: "rk-pill-gold" }
+};
+const CHIPS = [
+    ["", "All", ""],
+    ["draft", "Drafts", "draft"],
+    ["rendering", "Rendering", "rendering"],
+    ["ready", "Ready to post", "ready"],
+    ["scheduled", "Scheduled", "scheduled"],
+    ["posted", "Posted", "posted"]
+];
+const PLAY = `<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5.5v13l11-6.5-11-6.5Z"/></svg>`;
+function count(status) {
+    return status === "" ? PROJECTS.length : PROJECTS.filter((p) => p.status === status).length;
+}
+function cardAction(p) {
+    switch (p.status) {
+        case "draft":
+            return `<a class="rk-btn rk-btn-ink rk-btn-sm" href="/editor">Open <span class="rk-arrow">→</span></a>`;
+        case "rendering":
+            return `<a class="rk-btn rk-btn-ghost rk-btn-sm" href="/job-runs">Track render</a>`;
+        case "ready":
+            return `<a class="rk-btn rk-btn-gold rk-btn-sm" href="/calendar">Schedule <span class="rk-arrow">→</span></a>`;
+        case "scheduled":
+            return `<a class="rk-btn rk-btn-ghost rk-btn-sm" href="/calendar">Reschedule</a>`;
+        case "posted":
+            return `<a class="rk-btn rk-btn-ghost rk-btn-sm" href="${rkEscape(p.href || "#")}" target="_blank" rel="noreferrer">View <span class="rk-arrow">→</span></a>`;
+    }
+}
+function originRow(p) {
+    if (p.originKind === "inspiration") {
+        return `<div class="rk-library-origin">
+      <span class="rk-library-origin-txt">From “${rkEscape(p.originLabel)}”</span>
+    </div>`;
+    }
+    return `<div class="rk-library-origin">
+    <span class="rk-library-origin-txt">${rkEscape(p.originLabel)} · Your project</span>
+  </div>`;
+}
+function projectCard(p) {
+    const s = STATUS[p.status];
+    const dotCls = p.status === "rendering" ? " is-pulse" : "";
+    const progress = p.status === "rendering"
+        ? `<span class="rk-library-prog"><span class="rk-library-prog-fill" style="width:${Math.max(6, Math.min(100, p.progress ?? 40))}%"></span></span>`
+        : "";
+    return `<article class="rk-library-card rk-card-hover" data-status="${p.status}" data-title="${rkEscape(p.title.toLowerCase())}">
+    <a class="rk-library-poster" style="background:${GRAD[p.grad]}" href="/editor" aria-label="${rkEscape(p.title)}">
+      <span class="rk-library-emoji">${p.emoji}</span>
+      <span class="rk-pill ${s.pill} rk-library-pstatus"><span class="rk-library-dot${dotCls}"></span>${rkEscape(s.short)}</span>
+      <span class="rk-library-dur">${rkEscape(p.duration)} · 9:16</span>
+      <span class="rk-library-play">${PLAY}</span>
+      ${progress}
+    </a>
+    <div class="rk-library-meta">
+      <h3 class="rk-library-title">${rkEscape(p.title)}</h3>
+      ${originRow(p)}
+      <div class="rk-spread rk-library-foot">
+        <span class="rk-library-time">${rkEscape(p.when)}</span>
+        ${cardAction(p)}
+      </div>
+    </div>
+  </article>`;
+}
+function statTile(emoji, num, label) {
+    return `<div class="rk-library-stat">
+    <span class="rk-tile rk-tile-lg rk-tile-gold">${emoji}</span>
+    <div class="rk-stat">
+      <div class="rk-library-stat-num">${rkEscape(num)}</div>
+      <div class="rk-library-stat-label">${rkEscape(label)}</div>
+    </div>
+  </div>`;
+}
+function approvedPanel() {
+    const chips = CHIPS.map(([value, label], i) => `<button type="button" class="rk-library-chip${i === 0 ? " is-active" : ""}" data-rk-filter="${value}">${rkEscape(label)}</button>`).join("");
+    const newTile = `<a class="rk-library-new" data-rk-newtile href="/discover">
+    <span class="rk-tile rk-tile-lg rk-tile-gold rk-library-new-plus">＋</span>
+    <div>
+      <div class="rk-library-new-title">New project</div>
+      <div class="rk-library-new-sub">Fork a template or start from a prompt</div>
+    </div>
+  </a>`;
+    const cards = PROJECTS.map(projectCard).join("");
+    return `
+  <div class="rk-library-summary"><b>${PROJECTS.length}</b> projects&nbsp;·&nbsp;<b>${count("rendering")}</b> rendering&nbsp;·&nbsp;<b>${count("ready")}</b> ready to post&nbsp;·&nbsp;<b>${count("posted")}</b> posted this week</div>
+
+  <div class="rk-library-toolbar">
+    <div class="rk-library-chips" role="tablist" aria-label="Filter by status">${chips}</div>
+    <input class="rk-input rk-library-search" data-rk-search type="search" placeholder="Search projects…" autocomplete="off" aria-label="Search projects">
+  </div>
+
+  <div class="rk-library-grid" data-rk-grid>
+    ${newTile}
+    ${cards}
+  </div>
+
+  <div class="rk-library-empty" data-rk-empty>
+    <h3>Nothing here yet</h3>
+    <p class="rk-muted">No projects match this filter. Try another status or spin up a fresh cut.</p>
+    <a class="rk-btn rk-btn-gold" href="/discover">Start a project <span class="rk-arrow">→</span></a>
+  </div>`;
+}
+const CLIP_DATA = {
+    stats: { clips: 128, sources: 14, minutes: 42, taggedPct: 100 },
+    filters: [
+        { slug: "all", label: "All clips" },
+        { slug: "reactions", label: "Reactions" },
+        { slug: "hooks", label: "Hooks & hot takes" },
+        { slug: "money", label: "Money shots" },
+        { slug: "talking", label: "Talking head" },
+        { slug: "broll", label: "B-roll" },
+        { slug: "establishing", label: "Establishing" }
+    ],
+    clips: [
+        { title: "Guest freezes mid-sentence after the host's cold-read stat", durationSec: 18, aspect: "9:16", score: 94, source: "The Founder Hour — Ep. 212", tags: ["reaction", "close-up", "high energy"], glyph: "😮", tone: "gold", cat: "reactions" },
+        { title: "“That number can't be real” — investor's slow double-take", durationSec: 19, aspect: "9:16", score: 93, source: "Contrarian Capital — Ep. 11", tags: ["reaction", "surprise", "close-up"], glyph: "😳", tone: "coral", cat: "reactions" },
+        { title: "The “nobody talks about this” hook that opened the episode", durationSec: 22, aspect: "9:16", score: 96, source: "Contrarian Capital — Ep. 09", tags: ["hook", "hot take", "talking"], glyph: "🎤", tone: "ink", cat: "hooks" },
+        { title: "Hands counting a stack of hundreds on the desk", durationSec: 15, aspect: "9:16", score: 88, source: "Cashflow Diaries — Ep. 17", tags: ["money", "hands", "macro"], glyph: "💵", tone: "green", cat: "money" },
+        { title: "Founder tears up recalling the very first sale", durationSec: 31, aspect: "9:16", score: 90, source: "The Founder Hour — Ep. 205", tags: ["emotion", "close-up", "calm"], glyph: "🥹", tone: "violet", cat: "talking" },
+        { title: "Slow push-in on the neon “SOLD OUT” window sign", durationSec: 12, aspect: "16:9", score: 78, source: "Retail Nerds — Ep. 40", tags: ["b-roll", "establishing", "calm"], glyph: "🪧", tone: "sky", cat: "broll" },
+        { title: "City skyline timelapse at golden hour", durationSec: 14, aspect: "16:9", score: 74, source: "Built Different — Ep. 51", tags: ["establishing", "b-roll", "wide"], glyph: "🌇", tone: "coral", cat: "establishing" },
+        { title: "Whiteboard reveal: the four-step funnel, drawn live", durationSec: 27, aspect: "16:9", score: 82, source: "Growth Loops — Ep. 63", tags: ["explainer", "talking", "medium"], glyph: "📊", tone: "sky", cat: "talking" },
+        { title: "Barista latte-art pour in extreme slow-mo", durationSec: 16, aspect: "9:16", score: 80, source: "Small Shop Big Dreams — Ep. 30", tags: ["b-roll", "macro", "calm"], glyph: "☕", tone: "gold", cat: "broll" },
+        { title: "Coins dropping into a glass jar, tight macro", durationSec: 13, aspect: "9:16", score: 85, source: "Cashflow Diaries — Ep. 21", tags: ["money", "macro", "sfx"], glyph: "🪙", tone: "green", cat: "money" },
+        { title: "He didn't realize the camera was still rolling", durationSec: 24, aspect: "9:16", score: 91, source: "Lightbulb Pod — Ep. 88", tags: ["reaction", "candid", "high energy"], glyph: "😅", tone: "violet", cat: "reactions" },
+        { title: "The mic-drop closing line, right before the outro", durationSec: 21, aspect: "16:9", score: 89, source: "Lightbulb Pod — Ep. 90", tags: ["hook", "hot take", "talking"], glyph: "🎙", tone: "ink", cat: "hooks" }
+    ]
+};
+const SEARCH_ICON = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>`;
+function fmtClock(sec) {
+    const m = Math.floor(sec / 60);
+    const s = Math.floor(sec % 60);
+    return `${m}:${s < 10 ? "0" : ""}${s}`;
+}
+function clipCard(clip) {
+    const tagLine = clip.tags.slice(0, 3).map((t) => rkEscape(t)).join(" · ");
+    return `
+    <article class="rk-clips-card rk-card-hover" data-cat="${rkEscape(clip.cat)}">
+      <div class="rk-clips-thumb rk-clips-g-${clip.tone}">
+        <span class="rk-clips-glyph" aria-hidden="true">${clip.glyph}</span>
+        <span class="rk-clips-dur">${fmtClock(clip.durationSec)}</span>
+        <button type="button" class="rk-clips-play" aria-label="Preview clip">▶</button>
+      </div>
+      <div class="rk-clips-body">
+        <h3 class="rk-clips-title">${rkEscape(clip.title)}</h3>
+        <div class="rk-clips-tagline">${tagLine}</div>
+        <div class="rk-clips-foot">
+          <span class="rk-clips-src" title="${rkEscape(clip.source)}">${rkEscape(clip.source)}</span>
+          <a class="rk-clips-dl" href="#">Download</a>
+        </div>
+      </div>
+    </article>`;
+}
+function clipsPanel() {
+    const s = CLIP_DATA;
+    const filterChips = s.filters.map((f, i) => `<button type="button" class="rk-clips-chip${i === 0 ? " is-active" : ""}" data-filter="${rkEscape(f.slug)}">${rkEscape(f.label)}</button>`).join("");
+    const cards = s.clips.map(clipCard).join("");
+    return `
+  <div class="rk-library-summary"><b>${s.stats.clips}</b> clips&nbsp;·&nbsp;<b>${s.stats.sources}</b> sources&nbsp;·&nbsp;<b>${s.stats.minutes}</b> min mined&nbsp;·&nbsp;<b>${s.stats.taggedPct}%</b> tagged</div>
+
+  <div class="rk-clips-toolbar">
+    <div class="rk-clips-toolbar-top">
+      <form class="rk-clips-search" id="rkClipsSearch">
+        <span class="rk-clips-search-ic">${SEARCH_ICON}</span>
+        <input class="rk-input rk-clips-search-input" id="rkClipsQuery" type="search"
+          placeholder="Search clips — e.g. &quot;someone looks confused after reading a message&quot;" autocomplete="off" />
+        <button class="rk-btn rk-btn-ink rk-btn-sm rk-clips-search-btn" type="submit">Search</button>
+      </form>
+      <button type="button" class="rk-btn rk-btn-gold rk-clips-scan" id="rkClipsScanBtn">Scan a source</button>
+    </div>
+    <div class="rk-clips-chips" id="rkClipsChips">${filterChips}</div>
+    <div class="rk-clips-status" id="rkClipsStatus">Showing all ${s.clips.length} clips from ${s.stats.sources} sources</div>
+  </div>
+
+  <div class="rk-clips-grid" id="rkClipsGrid">${cards}</div>
+
+  <div class="rk-clips-empty" id="rkClipsEmpty" hidden>
+    <h3>No clips match that filter yet</h3>
+    <p class="rk-muted">Try another tag, or scan a new source to grow your library.</p>
+  </div>`;
+}
+const CLIPS_DIALOG = `
+<dialog class="rk-clips-dialog" id="rkClipsDialog">
+  <form class="rk-clips-dialog-form" id="rkClipsScanForm" method="dialog">
+    <div class="rk-card-head">
+      <span class="rk-eyebrow">Import source</span>
+      <h2>Mine a video into clips</h2>
+      <p class="rk-muted">Paste a video URL — TikTok, YouTube, Instagram, X, or a direct link. We'll scan it and add the matching moments to your clip library.</p>
+    </div>
+    <div class="rk-field">
+      <label class="rk-label" for="rkScanUrl">Video URL</label>
+      <input class="rk-input" id="rkScanUrl" name="url" type="url" placeholder="https://youtube.com/watch?v=… or https://…/video.mp4" autocomplete="off" />
+    </div>
+    <div class="rk-field">
+      <label class="rk-label" for="rkScanPrompt">What to clip for</label>
+      <textarea class="rk-textarea" id="rkScanPrompt" name="prompt" placeholder="Clip scenes of people reacting, no text on screen, vertical, between 5–10 secs long"></textarea>
+      <span class="rk-hint">Guides the AI tagger toward the moments you actually want.</span>
+    </div>
+    <div class="rk-grid rk-grid-2 rk-clips-dialog-grid">
+      <div class="rk-field">
+        <label class="rk-label" for="rkScanProvider">AI provider</label>
+        <select class="rk-select" id="rkScanProvider" name="provider">
+          <option value="">Auto — use my saved keys</option>
+          <option value="gemini">Gemini</option>
+          <option value="openai">OpenAI</option>
+          <option value="openrouter">OpenRouter</option>
+        </select>
+      </div>
+      <div class="rk-field">
+        <label class="rk-label" for="rkScanTracer">Tracer <span class="rk-hint">optional</span></label>
+        <input class="rk-input" id="rkScanTracer" name="tracer" type="text" placeholder="my-campaign-001" autocomplete="off" />
+      </div>
+    </div>
+    <p class="rk-hint rk-clips-dialog-note">AI tagging runs on your own key (BYOK) — vidfarm only bills the clip-scan compute.</p>
+    <div class="rk-clips-dialog-actions">
+      <button type="button" class="rk-btn rk-btn-ghost" id="rkClipsScanCancel">Cancel</button>
+      <button type="submit" class="rk-btn rk-btn-gold">Start scan <span class="rk-arrow">→</span></button>
+    </div>
+  </form>
+</dialog>`;
+/* ──────────────────────────────── Page shell ──────────────────────────────── */
+const APPROVED_SCRIPT = `
+(function(){
+  var root=document;
+  var grid=root.querySelector('[data-rk-grid]');
+  var empty=root.querySelector('[data-rk-empty]');
+  var chips=Array.prototype.slice.call(root.querySelectorAll('[data-rk-filter]'));
+  var newTile=root.querySelector('[data-rk-newtile]');
+  var search=root.querySelector('[data-rk-search]');
+  var cards=Array.prototype.slice.call(root.querySelectorAll('.rk-library-card'));
+  var activeFilter='';
+  function apply(){
+    var q=(search&&search.value||'').trim().toLowerCase();
+    var shown=0;
+    cards.forEach(function(card){
+      var okStatus=activeFilter===''||card.getAttribute('data-status')===activeFilter;
+      var okSearch=!q||(card.getAttribute('data-title')||'').indexOf(q)!==-1;
+      var visible=okStatus&&okSearch;
+      card.hidden=!visible;
+      if(visible)shown++;
+    });
+    if(newTile)newTile.hidden=!(activeFilter===''&&!q);
+    if(empty)empty.classList.toggle('is-visible',shown===0);
+  }
+  chips.forEach(function(btn){
+    btn.addEventListener('click',function(){
+      activeFilter=btn.getAttribute('data-rk-filter')||'';
+      chips.forEach(function(b){b.classList.toggle('is-active',b===btn)});
+      apply();
+    });
+  });
+  if(search)search.addEventListener('input',apply);
+  apply();
+})();`;
+const CLIPS_SCRIPT = `
+(function(){
+  var root=document;
+  var chips=root.getElementById('rkClipsChips');
+  var grid=root.getElementById('rkClipsGrid');
+  var statusEl=root.getElementById('rkClipsStatus');
+  var empty=root.getElementById('rkClipsEmpty');
+  var cards=grid?Array.prototype.slice.call(grid.querySelectorAll('.rk-clips-card')):[];
+  var total=cards.length;
+  function labelFor(slug){
+    var btn=chips&&chips.querySelector('[data-filter="'+slug+'"]');
+    return btn?btn.textContent.replace(/^[^A-Za-z0-9]+/,'').trim():'';
+  }
+  function applyFilter(slug){
+    var shown=0;
+    cards.forEach(function(card){
+      var on=slug==='all'||card.getAttribute('data-cat')===slug;
+      card.style.display=on?'':'none';
+      if(on)shown++;
+    });
+    if(empty)empty.hidden=shown!==0;
+    if(grid)grid.style.display=shown===0?'none':'';
+    if(statusEl){ statusEl.textContent=slug==='all'?'Showing all '+total+' clips':'Showing '+shown+' '+labelFor(slug)+' clip'+(shown===1?'':'s'); }
+  }
+  if(chips){
+    chips.addEventListener('click',function(e){
+      var btn=e.target.closest('.rk-clips-chip');
+      if(!btn)return;
+      chips.querySelectorAll('.rk-clips-chip').forEach(function(b){b.classList.toggle('is-active',b===btn);});
+      applyFilter(btn.getAttribute('data-filter'));
+    });
+  }
+  var searchForm=root.getElementById('rkClipsSearch');
+  var query=root.getElementById('rkClipsQuery');
+  if(searchForm){
+    searchForm.addEventListener('submit',function(e){
+      e.preventDefault();
+      var q=(query&&query.value||'').trim().toLowerCase();
+      if(!q){ if(chips){var all=chips.querySelector('[data-filter="all"]'); if(all)all.click();} return; }
+      chips&&chips.querySelectorAll('.rk-clips-chip').forEach(function(b){b.classList.remove('is-active');});
+      var shown=0;
+      cards.forEach(function(card){
+        var hay=(card.textContent||'').toLowerCase();
+        var on=q.split(/\\s+/).every(function(t){return hay.indexOf(t)>=0;});
+        card.style.display=on?'':'none';
+        if(on)shown++;
+      });
+      if(empty)empty.hidden=shown!==0;
+      if(grid)grid.style.display=shown===0?'none':'';
+      if(statusEl)statusEl.textContent='semantic results for \\u201c'+q+'\\u201d — '+shown+' clip'+(shown===1?'':'s');
+    });
+  }
+  var dialog=root.getElementById('rkClipsDialog');
+  var openBtn=root.getElementById('rkClipsScanBtn');
+  var cancelBtn=root.getElementById('rkClipsScanCancel');
+  var scanForm=root.getElementById('rkClipsScanForm');
+  if(openBtn&&dialog){ openBtn.addEventListener('click',function(){ if(typeof dialog.showModal==='function'&&!dialog.open)dialog.showModal(); }); }
+  if(cancelBtn&&dialog){ cancelBtn.addEventListener('click',function(){ if(dialog.open)dialog.close(); }); }
+  if(dialog){
+    dialog.addEventListener('click',function(e){
+      var r=dialog.getBoundingClientRect();
+      if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)dialog.close();
+    });
+  }
+  if(scanForm){ scanForm.addEventListener('submit',function(){ if(statusEl)statusEl.textContent='Scanning source… this can take a few minutes.'; }); }
+})();`;
+export function renderReskinLibrary(tab = "approved") {
+    const isClips = tab === "clips";
+    const tabs = `<div class="rk-library-tabs" role="tablist" aria-label="Library view">
+    <a class="rk-library-tab${isClips ? "" : " is-active"}" role="tab" ${isClips ? "" : `aria-current="page"`} href="/reskin/library/approved">Approved</a>
+    <a class="rk-library-tab${isClips ? " is-active" : ""}" role="tab" ${isClips ? `aria-current="page"` : ""} href="/reskin/library/clips">Clips</a>
+  </div>`;
+    const body = `
+<main class="rk-container-wide rk-page rk-library-page">
+  <div class="rk-spread rk-wrap rk-page-head rk-library-head">
+    <div class="rk-stack rk-library-head-copy">
+      <span class="rk-badge">Your studio</span>
+      <h1 class="rk-h1">Library</h1>
+      <p class="rk-sub">${isClips
+        ? "Long-form videos mined into tagged, searchable short clips — every reaction, hook, and money shot, ready to drop into an edit."
+        : "Every project you own — forked templates, in-progress edits, active renders, and ready-to-post cuts."}</p>
+    </div>
+    <div class="rk-row rk-wrap rk-library-head-cta">
+      <a class="rk-btn rk-btn-gold rk-btn-lg" href="/discover">New project <span class="rk-arrow">→</span></a>
+    </div>
+  </div>
+
+  ${tabs}
+
+  ${isClips ? clipsPanel() : approvedPanel()}
+</main>
+${isClips ? CLIPS_DIALOG : ""}`;
+    const pageCss = `
+/* .rk-page zeroes horizontal padding; the wide container == viewport at 1280 so
+   margin:auto adds no gutter. Restore side gutters (longhand beats the shorthand). */
+.rk-library-page{padding-left:var(--rk-gutter);padding-right:var(--rk-gutter)}
+.rk-library-head{align-items:flex-end}
+.rk-library-head-copy{gap:8px;margin:0}
+.rk-library-head-copy .rk-badge{justify-self:start}
+.rk-library-head-cta{margin-bottom:4px}
+@media(max-width:620px){.rk-library-head-cta .rk-btn-lg{flex:1}}
+
+/* primary tab toggle (Approved | Clips) */
+.rk-library-tabs{display:inline-flex;padding:5px;gap:3px;background:var(--rk-n-100);border:1px solid var(--rk-border);border-radius:var(--rk-r-full);margin-bottom:26px}
+.rk-library-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 20px;border-radius:var(--rk-r-full);font-size:14px;font-weight:600;color:var(--rk-n-600);transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-library-tab span{font-size:15px}
+.rk-library-tab:hover{color:var(--rk-ink)}
+.rk-library-tab.is-active{background:var(--rk-ink);color:#fff;box-shadow:var(--rk-shadow-sm)}
+
+/* stats */
+.rk-library-summary{font-size:13.5px;color:var(--rk-text-muted);font-weight:500;margin-bottom:22px;line-height:1.7}
+.rk-library-summary b{color:var(--rk-ink);font-weight:800;font-family:var(--rk-font-display);font-size:15px;letter-spacing:-.01em}
+
+/* toolbar */
+.rk-library-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:24px}
+.rk-library-chips{display:flex;flex-wrap:wrap;gap:4px}
+.rk-library-chip{display:inline-flex;align-items:center;padding:6px 13px;border-radius:var(--rk-r-full);border:1px solid transparent;background:transparent;color:var(--rk-text-muted);font-size:13px;font-weight:600;cursor:pointer;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-library-chip:hover{background:var(--rk-n-100);color:var(--rk-ink)}
+.rk-library-chip.is-active{background:var(--rk-ink);color:#fff}
+.rk-library-search{max-width:230px;margin-left:auto}
+@media(max-width:720px){.rk-library-search{max-width:none;margin-left:0;width:100%;order:3}}
+
+/* grid + cards */
+.rk-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
+.rk-library-card{display:flex;flex-direction:column;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);overflow:hidden;box-shadow:var(--rk-shadow-card)}
+.rk-library-card[hidden]{display:none}
+.rk-library-poster{position:relative;display:block;aspect-ratio:9/16;overflow:hidden}
+.rk-library-poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 58%,rgba(0,0,0,.22));pointer-events:none}
+.rk-library-emoji{position:absolute;inset:0;display:grid;place-items:center;font-size:60px;filter:drop-shadow(0 8px 14px rgba(0,0,0,.2))}
+.rk-library-pstatus{position:absolute;top:12px;left:12px;z-index:2;box-shadow:var(--rk-shadow-sm)}
+.rk-library-dot{width:6px;height:6px;border-radius:var(--rk-r-full);background:currentColor;opacity:.9}
+.rk-library-dot.is-pulse{animation:rk-library-pulse 1.2s var(--rk-ease) infinite}
+.rk-library-dur{position:absolute;bottom:12px;right:12px;z-index:2;padding:4px 9px;border-radius:var(--rk-r-full);background:rgba(23,23,23,.72);color:#fff;font-size:11px;font-weight:600;letter-spacing:.01em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
+.rk-library-play{position:absolute;top:50%;left:50%;z-index:2;width:52px;height:52px;border-radius:var(--rk-r-full);background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--rk-ink);box-shadow:var(--rk-shadow-md);opacity:0;transform:translate(-50%,-50%) scale(.82);transition:opacity var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
+.rk-library-card:hover .rk-library-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
+.rk-library-play svg{margin-left:2px}
+.rk-library-prog{position:absolute;left:0;right:0;bottom:0;z-index:2;height:5px;background:rgba(255,255,255,.4)}
+.rk-library-prog-fill{display:block;height:100%;background:var(--rk-gold-500);border-radius:0 var(--rk-r-full) var(--rk-r-full) 0;box-shadow:0 0 8px rgba(252,185,0,.6);animation:rk-library-pulse 1.6s var(--rk-ease) infinite}
+.rk-library-meta{display:grid;gap:10px;padding:16px 16px 18px}
+.rk-library-title{font-family:var(--rk-font-display);font-size:15px;font-weight:700;color:var(--rk-ink);line-height:1.24;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.48em}
+.rk-library-origin{display:flex;align-items:center;gap:8px;min-width:0;font-size:12.5px;font-weight:500;color:var(--rk-text-muted)}
+.rk-library-origin-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+.rk-library-foot{margin-top:2px;gap:10px}
+.rk-library-foot .rk-btn{flex:none}
+.rk-library-time{font-size:12px;font-weight:500;color:var(--rk-text-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
+
+/* new-project tile */
+.rk-library-new{display:grid;grid-auto-flow:row;place-content:center;justify-items:center;gap:14px;text-align:center;padding:28px 22px;border:1.5px dashed var(--rk-border-strong);border-radius:var(--rk-r-3xl);background:var(--rk-n-50);color:var(--rk-text-muted);transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease)}
+.rk-library-new:hover{border-color:var(--rk-gold-600);background:var(--rk-gold-tint);transform:translateY(-2px)}
+.rk-library-new-plus{font-family:var(--rk-font-display);font-weight:800}
+.rk-library-new-title{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-lg);color:var(--rk-ink);letter-spacing:-.01em}
+.rk-library-new-sub{font-size:12.5px;color:var(--rk-text-muted);margin-top:3px;max-width:15ch}
+.rk-library-new[hidden]{display:none}
+
+/* empty state */
+.rk-library-empty{display:none;place-items:center;gap:12px;text-align:center;padding:64px 24px;border:1.5px dashed var(--rk-border-strong);border-radius:var(--rk-r-3xl);background:var(--rk-n-50)}
+.rk-library-empty.is-visible{display:grid}
+.rk-library-empty h3{font-size:var(--rk-text-xl)}
+.rk-library-empty p{max-width:42ch}
+
+@keyframes rk-library-pulse{0%,100%{opacity:.5}50%{opacity:1}}
+@media(prefers-reduced-motion:reduce){.rk-library-dot.is-pulse,.rk-library-prog-fill{animation:none}}
+
+/* ── clips tab ── */
+.rk-clips-toolbar{display:grid;gap:16px;margin-bottom:24px}
+.rk-clips-toolbar-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
+.rk-clips-search{position:relative;display:flex;align-items:center;gap:8px;flex:1 1 340px;min-width:240px;margin:0}
+.rk-clips-search-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--rk-n-400);pointer-events:none;display:flex}
+.rk-clips-search-input{flex:1;padding-left:40px;border-radius:var(--rk-r-full)}
+.rk-clips-search-btn{flex:none}
+.rk-clips-scan{flex:none}
+.rk-clips-chips{display:flex;flex-wrap:wrap;gap:4px}
+.rk-clips-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:var(--rk-r-full);border:1px solid transparent;background:transparent;font-family:var(--rk-font-body);font-size:13px;font-weight:600;color:var(--rk-text-muted);cursor:pointer;white-space:nowrap;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
+.rk-clips-chip:hover{background:var(--rk-n-100);color:var(--rk-ink)}
+.rk-clips-chip.is-active{background:var(--rk-ink);color:#fff}
+.rk-clips-status{font-size:13px;color:var(--rk-text-muted);font-weight:500}
+.rk-clips-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:22px}
+.rk-clips-card{display:flex;flex-direction:column;overflow:hidden;background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);box-shadow:var(--rk-shadow-card)}
+.rk-clips-thumb{position:relative;aspect-ratio:3/4;overflow:hidden;display:grid;place-items:center}
+.rk-clips-glyph{font-size:56px;filter:saturate(.9) drop-shadow(0 6px 14px rgba(0,0,0,.12));opacity:.92;transition:transform var(--rk-dur) var(--rk-ease)}
+.rk-clips-card:hover .rk-clips-glyph{transform:scale(1.06)}
+.rk-clips-dur{position:absolute;left:10px;bottom:10px;padding:3px 9px;border-radius:var(--rk-r-full);background:rgba(255,255,255,.92);color:var(--rk-ink);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;box-shadow:var(--rk-shadow-xs)}
+.rk-clips-play{position:absolute;right:10px;top:10px;width:34px;height:34px;display:grid;place-items:center;padding:0 0 0 2px;border:0;border-radius:var(--rk-r-full);background:rgba(255,255,255,.92);color:var(--rk-ink);font-size:13px;cursor:pointer;opacity:0;transform:scale(.85);box-shadow:var(--rk-shadow-sm);transition:opacity var(--rk-dur) var(--rk-ease),transform var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.rk-clips-card:hover .rk-clips-play{opacity:1;transform:scale(1)}
+.rk-clips-play:hover{background:var(--rk-gold-500)}
+.rk-clips-body{display:flex;flex-direction:column;gap:10px;flex:1;padding:16px}
+.rk-clips-title{font-family:var(--rk-font-display);font-size:15px;font-weight:700;line-height:1.32;color:var(--rk-ink);letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.rk-clips-tagline{font-size:12px;font-weight:500;color:var(--rk-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
+.rk-clips-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;border-top:1px solid var(--rk-border);padding-top:12px}
+.rk-clips-src{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--rk-text-muted);font-size:12px;font-weight:500}
+.rk-clips-dl{flex:none;color:var(--rk-gold-700);font-size:12px;font-weight:700}
+.rk-clips-dl:hover{color:var(--rk-gold-500)}
+.rk-clips-g-gold{background:radial-gradient(120% 90% at 25% 15%,#fff5e4,transparent 60%),linear-gradient(150deg,#ffe9cc,#ffd98a)}
+.rk-clips-g-sky{background:radial-gradient(120% 90% at 25% 15%,#f2f8ff,transparent 60%),linear-gradient(150deg,#e2effd,#b6d8f7)}
+.rk-clips-g-violet{background:radial-gradient(120% 90% at 25% 15%,#f6f1ff,transparent 60%),linear-gradient(150deg,#e4ddfd,#cbbdf5)}
+.rk-clips-g-green{background:radial-gradient(120% 90% at 25% 15%,#f0fdf4,transparent 60%),linear-gradient(150deg,#dcfce7,#b3ebc7)}
+.rk-clips-g-coral{background:radial-gradient(120% 90% at 25% 15%,#fff3ea,transparent 60%),linear-gradient(150deg,#ffe0d0,#ffc4a3)}
+.rk-clips-g-ink{background:radial-gradient(130% 100% at 78% 12%,rgba(255,199,56,.28),transparent 55%),linear-gradient(150deg,#2c2c2c,#171717)}
+.rk-clips-g-ink .rk-clips-glyph{filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
+.rk-clips-empty{display:grid;place-items:center;gap:10px;text-align:center;padding:64px 20px;background:#fff;border:1.5px dashed var(--rk-border-strong);border-radius:var(--rk-r-3xl)}
+.rk-clips-empty[hidden]{display:none}
+.rk-clips-empty h3{font-size:var(--rk-text-xl)}
+.rk-clips-dialog{width:min(34rem,calc(100vw - 2rem));padding:0;border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);background:var(--rk-surface);box-shadow:var(--rk-shadow-xl)}
+.rk-clips-dialog::backdrop{background:rgba(23,23,23,.34);backdrop-filter:blur(6px)}
+.rk-clips-dialog-form{display:grid;gap:16px;margin:0;padding:28px}
+.rk-clips-dialog-grid{gap:14px}
+.rk-clips-dialog-note{background:var(--rk-gold-tint);border-radius:var(--rk-r-xl);padding:10px 13px;color:var(--rk-n-700)}
+.rk-clips-dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}
+@media(max-width:620px){
+  .rk-clips-search{flex:1 1 100%}
+  .rk-clips-scan{flex:1 1 100%}
+  .rk-clips-search-input{font-size:16px}
+  .rk-clips-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
+  .rk-clips-glyph{font-size:42px}
+}
+`;
+    return reskinDocument({
+        title: `vidfarm reskin — Library${isClips ? " · Clips" : ""}`,
+        description: "Reskinned vidfarm library: your projects, renders & ready-to-post cuts, plus mined clips.",
+        activeSlug: "library",
+        pageCss,
+        body,
+        script: isClips ? CLIPS_SCRIPT : APPROVED_SCRIPT
+    });
+}
+//# sourceMappingURL=library-page.js.map