@mevdragon/vidfarm-devcli 0.18.1 → 0.19.0

package/dist/src/reskin/inpaint-clipper-page.js

@@ -0,0 +1,649 @@
+// /tools/clipper — the third creative-tool twin. Where /tools/image does masked
+// image edits and /tools/video does time-scoped video edits, /tools/clipper cuts
+// EXACT subranges out of a source video into the raws library. It plays the
+// source straight from its resolved RapidAPI/direct URL (nothing is uploaded to
+// preview), lets the user pick an in/out point down to sub-second precision
+// (HH:MM:SS:NNNN), shows a live estimate of the clip length, and on "Save clip"
+// POSTs to /raws/clip-range which trims just that window and lands one raw. It is
+// a MULTI-CLIP surface — the source stays loaded so you can grab clip after clip,
+// each grouped under the session's tracer/folder and listed in "Clips this
+// session", with a past-sessions slide-in grouped by tracer (like /tools/video).
+//
+// Data flow:
+//   • load source  → POST /raws/resolve-source { source_url } → { preview_url, ... }
+//   • save clip     → POST /raws/clip-range { preview_url, start_sec, end_sec, tracer, folder_path, name }
+//   • session list  → GET /raws/feed?folder=<slug>  (this session's clips)
+//   • past sessions → GET /raws/feed?limit=200 grouped by folder_path/tracer
+import { reskinDocument } from "./document.js";
+import { renderInpaintModeTabs, INPAINT_TABS_CSS } from "./inpaint-page.js";
+const UPLOAD_ICON = `<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4"/><path d="m7 9 5-5 5 5"/><path d="M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>`;
+const GEAR_ICON = `<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M8.8 3.4 9.4 2h1.2l.6 1.4 1.2.5 1.4-.6.9.9-.6 1.4.5 1.2 1.4.6v1.2l-1.4.6-.5 1.2.6 1.4-.9.9-1.4-.6-1.2.5-.6 1.4H9.4l-.6-1.4-1.2-.5-1.4.6-.9-.9.6-1.4-.5-1.2L4 8.6V7.4l1.4-.6.5-1.2-.6-1.4.9-.9 1.4.6 1.2-.5Z"/><circle cx="10" cy="8" r="2.4"/></svg>`;
+const HISTORY_ICON = `<svg width="16" height="16" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M3.2 10a6.8 6.8 0 1 1 2 4.8"/><path d="M3.2 14.4v-3.6h3.6"/><path d="M10 6.2V10l2.6 1.6"/></svg>`;
+const PLUS_ICON = `<svg width="14" height="14" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 4v12"/><path d="M4 10h12"/></svg>`;
+const CLIP_ICON = `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M8.1 8.1 20 18M8.1 15.9 20 6"/></svg>`;
+const PLAY_ICON = `<svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M7 5.5v13a1 1 0 0 0 1.5.87l11-6.5a1 1 0 0 0 0-1.74l-11-6.5A1 1 0 0 0 7 5.5Z"/></svg>`;
+const PAUSE_ICON = `<svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="5" width="4" height="14" rx="1"/><rect x="14" y="5" width="4" height="14" rx="1"/></svg>`;
+const CLOSE_ICON = `<svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 5l10 10"/><path d="M15 5 5 15"/></svg>`;
+const FOLDER_ICON = `<svg width="15" height="15" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2.5 5.5A1.5 1.5 0 0 1 4 4h3.2l1.4 1.6H16a1.5 1.5 0 0 1 1.5 1.5v7A1.5 1.5 0 0 1 16 15.6H4a1.5 1.5 0 0 1-1.5-1.5Z"/></svg>`;
+export function renderReskinInpaintClipper(input = {}) {
+    const boot = { accountId: input.accountId || "", isLoggedIn: Boolean(input.isLoggedIn) };
+    const body = `
+<main class="rk-container-wide rk-page rk-inpaint-page rk-clp-page">
+  <div class="rk-page-head rk-inpaint-head">
+    <div class="rk-inpaint-head-text">
+      ${renderInpaintModeTabs("clipper")}
+      <h1 class="rk-h1">Clip a Video</h1>
+      <p class="rk-sub">Paste (or upload) a video, scrub to the exact moment, and set a precise <strong>in</strong> and <strong>out</strong> point (HH:MM:SS:NNNN). Only the selected subrange is saved to your raws — grab as many clips as you like from the same source.</p>
+    </div>
+    <div class="rk-inpaint-toolbar">
+      <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm rk-inpaint-startnew" data-clp-start-new>${PLUS_ICON} Start New</button>
+      <button type="button" class="rk-ip-iconbtn" data-clp-settings-button aria-label="Settings" title="Settings">${GEAR_ICON}</button>
+      <button type="button" class="rk-ip-iconbtn" data-clp-history-toggle aria-label="Past sessions" title="Past sessions">${HISTORY_ICON}</button>
+    </div>
+  </div>
+
+  <div class="rk-inpaint-workbench rk-clp-workbench">
+    <!-- LEFT: source + subrange controls -->
+    <section class="rk-inpaint-panel" aria-label="Clip controls">
+      <div class="rk-inpaint-block">
+        <label class="rk-label" for="rkClpUrl">Source video URL</label>
+        <div class="rk-clp-urlrow">
+          <input class="rk-input" id="rkClpUrl" data-clp-url-input type="url" placeholder="https://youtube.com/watch?v=… or https://…/video.mp4" autocomplete="off" spellcheck="false" />
+          <button type="button" class="rk-btn rk-btn-gold rk-btn-sm" data-clp-url-load>Load</button>
+        </div>
+        <div class="rk-clp-ingest">
+          <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" data-clp-upload>${UPLOAD_ICON}<span>Upload</span></button>
+          <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" data-clp-attach>${FOLDER_ICON}<span>From Files</span></button>
+        </div>
+        <input data-clp-file type="file" accept="video/mp4,video/quicktime,video/webm,video/x-matroska,video/*" hidden />
+        <span class="rk-hint">TikTok, YouTube, Instagram, X, or a direct link — we play it straight from the source; nothing is saved until you clip.</span>
+      </div>
+
+      <div class="rk-inpaint-block rk-clp-rangeblock" data-clp-range-controls hidden>
+        <div class="rk-inpaint-brushrow">
+          <label class="rk-label">Subrange</label>
+          <button type="button" class="rk-btn rk-btn-ghost rk-btn-xs" data-clp-whole title="Select the whole video">Whole video</button>
+        </div>
+
+        <div class="rk-clp-inout">
+          <div class="rk-clp-field">
+            <div class="rk-clp-field-head">
+              <span class="rk-clp-field-label">In</span>
+              <button type="button" class="rk-clp-tinybtn" data-clp-set-start title="Set in-point to the playhead">Set to playhead</button>
+            </div>
+            <input class="rk-input rk-clp-tc" data-clp-start-input type="text" inputmode="numeric" placeholder="00:00:00:0000" value="00:00:00:0000" />
+            <input class="rk-clp-slider" data-clp-start-slider type="range" min="0" max="1000" step="1" value="0" aria-label="In point" />
+          </div>
+          <div class="rk-clp-field">
+            <div class="rk-clp-field-head">
+              <span class="rk-clp-field-label">Out</span>
+              <button type="button" class="rk-clp-tinybtn" data-clp-set-end title="Set out-point to the playhead">Set to playhead</button>
+            </div>
+            <input class="rk-input rk-clp-tc" data-clp-end-input type="text" inputmode="numeric" placeholder="00:00:00:0000" value="00:00:00:0000" />
+            <input class="rk-clp-slider" data-clp-end-slider type="range" min="0" max="1000" step="1" value="1000" aria-label="Out point" />
+          </div>
+        </div>
+
+        <div class="rk-clp-estimate" data-clp-estimate>Clip length — <strong data-clp-length>0:00.0</strong></div>
+        <div class="rk-clp-rangenote" data-clp-range-note hidden></div>
+      </div>
+
+      <div class="rk-inpaint-block rk-clp-saveblock" data-clp-save-block hidden>
+        <label class="rk-label" for="rkClpName">Clip name <span class="rk-hint">optional</span></label>
+        <input class="rk-input" id="rkClpName" data-clp-name type="text" placeholder="hook-01" autocomplete="off" />
+        <label class="rk-label" for="rkClpFolder" style="margin-top:10px">Save to raws folder <span class="rk-hint">optional</span></label>
+        <input class="rk-input" id="rkClpFolder" data-clp-folder type="text" placeholder="defaults to the session tracer" autocomplete="off" spellcheck="false" />
+        <button type="button" class="rk-btn rk-btn-gold rk-clp-savebtn" data-clp-save>
+          ${CLIP_ICON}<span data-clp-save-label>Save clip to raws</span>
+        </button>
+        <div class="rk-clp-status" data-clp-status role="status"></div>
+      </div>
+    </section>
+
+    <!-- CENTER: video preview + timeline -->
+    <section class="rk-inpaint-stage rk-clp-stage" aria-label="Video preview">
+      <div class="rk-clp-empty" data-clp-empty>
+        <div class="rk-clp-empty-inner">
+          ${CLIP_ICON}
+          <p>Load a video to start clipping.</p>
+          <span>Paste a URL and hit <strong>Load</strong>, or upload a file.</span>
+        </div>
+      </div>
+      <div class="rk-clp-player" data-clp-player hidden>
+        <div class="rk-clp-videowrap">
+          <video data-clp-video playsinline preload="auto"></video>
+        </div>
+        <div class="rk-clp-transport">
+          <button type="button" class="rk-ip-iconbtn rk-clp-playpause" data-clp-playpause aria-label="Play / pause">${PLAY_ICON}</button>
+          <div class="rk-clp-scrubwrap">
+            <input class="rk-clp-scrub" data-clp-scrub type="range" min="0" max="1000" step="1" value="0" aria-label="Scrub" />
+            <div class="rk-clp-rangebar" data-clp-rangebar aria-hidden="true"><span class="rk-clp-rangefill" data-clp-range-fill></span></div>
+          </div>
+          <div class="rk-clp-time">
+            <input class="rk-clp-tc rk-clp-tc-now" data-clp-timecode type="text" inputmode="numeric" value="00:00:00:0000" aria-label="Current time" />
+            <span class="rk-clp-duration" data-clp-duration>/ 00:00:00:0000</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- RIGHT: clips this session -->
+    <aside class="rk-inpaint-side rk-clp-side" aria-label="Clips this session">
+      <div class="rk-clp-side-head">
+        <span class="rk-eyebrow">Clips this session</span>
+        <button type="button" class="rk-ip-iconbtn rk-ip-iconbtn-sm" data-clp-session-refresh aria-label="Refresh" title="Refresh">${HISTORY_ICON}</button>
+      </div>
+      <div class="rk-clp-session-list" data-clp-session-list>
+        <div class="rk-clp-session-empty">No clips yet — set an in/out point and save your first clip.</div>
+      </div>
+      <a class="rk-clp-librarylink" href="/library/raws">Open your raws library →</a>
+    </aside>
+  </div>
+
+  <!-- Settings modal -->
+  <div class="rk-ip-settingsmodal" data-clp-settings hidden>
+    <div class="rk-ip-settingsmodal-backdrop" data-clp-settings-close></div>
+    <div class="rk-ip-settingsmodal-card" role="dialog" aria-modal="true" aria-label="Clipper settings">
+      <div class="rk-ip-settingsmodal-head">
+        <h2>Session settings</h2>
+        <button type="button" class="rk-ip-iconbtn" data-clp-settings-close aria-label="Close">${CLOSE_ICON}</button>
+      </div>
+      <div class="rk-field">
+        <label class="rk-label" for="rkClpTracer">Session name (tracer)</label>
+        <input class="rk-input" id="rkClpTracer" data-clp-tracer type="text" placeholder="auto — named from the source" autocomplete="off" spellcheck="false" />
+        <span class="rk-hint">Every clip you save in this session is grouped under this tracer — and lands in a matching <code>/raws</code> folder.</span>
+      </div>
+    </div>
+  </div>
+
+  <!-- Past sessions slide-in -->
+  <aside class="rk-ip-sessions rk-clp-sessions" data-clp-sessions aria-label="Past clipping sessions">
+    <div class="rk-ip-sessions-head">
+      <span class="rk-eyebrow">Past sessions</span>
+      <button type="button" class="rk-ip-iconbtn" data-clp-sessions-close aria-label="Close">${CLOSE_ICON}</button>
+    </div>
+    <div class="rk-ip-sessions-list" data-clp-sessions-list></div>
+  </aside>
+  <div class="rk-ip-sessions-backdrop" data-clp-sessions-backdrop hidden></div>
+
+  <script type="application/json" data-clp-boot>${JSON.stringify(boot)}</script>
+</main>`;
+    const pageCss = `
+${INPAINT_TABS_CSS}
+.rk-clp-page{padding-bottom:40px}
+.rk-clp-workbench{display:grid;grid-template-columns:320px minmax(0,1fr) 300px;gap:18px;align-items:start}
+.rk-clp-urlrow{display:flex;gap:8px}
+.rk-clp-urlrow .rk-input{flex:1;min-width:0}
+.rk-clp-ingest{display:flex;gap:8px;margin-top:8px}
+.rk-clp-ingest .rk-btn{flex:1;gap:6px}
+.rk-clp-rangeblock .rk-clp-inout{display:flex;flex-direction:column;gap:14px;margin-top:6px}
+.rk-clp-field{display:flex;flex-direction:column;gap:6px}
+.rk-clp-field-head{display:flex;align-items:center;justify-content:space-between}
+.rk-clp-field-label{font-size:12px;font-weight:800;letter-spacing:.02em;color:var(--rk-ink)}
+.rk-clp-tinybtn{border:0;background:transparent;color:var(--rk-gold-ink,#9a6b12);font-size:11px;font-weight:700;cursor:pointer;padding:2px 4px;border-radius:6px}
+.rk-clp-tinybtn:hover{background:var(--rk-n-100)}
+.rk-clp-tc{font-variant-numeric:tabular-nums;letter-spacing:.02em;font-weight:700}
+.rk-clp-slider,.rk-clp-scrub{width:100%;accent-color:var(--rk-gold,#e2a63a)}
+.rk-clp-estimate{margin-top:12px;font-size:13px;color:var(--rk-text-muted)}
+.rk-clp-estimate strong{color:var(--rk-ink);font-variant-numeric:tabular-nums}
+.rk-clp-rangenote{margin-top:8px;font-size:12px;font-weight:600;color:#b42318}
+.rk-clp-savebtn{width:100%;justify-content:center;gap:8px;margin-top:12px}
+.rk-clp-savebtn[data-loading="true"]{opacity:.7;pointer-events:none}
+.rk-clp-status{margin-top:8px;font-size:12.5px;font-weight:600;min-height:16px}
+.rk-clp-status[data-tone="error"]{color:#b42318}
+.rk-clp-status[data-tone="success"]{color:#15803d}
+.rk-clp-stage{min-height:360px;background:var(--rk-n-100);border:1px solid var(--rk-border);border-radius:var(--rk-radius-lg,18px);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
+.rk-clp-empty{padding:40px;text-align:center;color:var(--rk-text-muted)}
+.rk-clp-empty-inner svg{width:34px;height:34px;opacity:.5;margin-bottom:10px}
+.rk-clp-empty-inner p{font-size:15px;font-weight:700;color:var(--rk-ink);margin:0 0 4px}
+.rk-clp-empty-inner span{font-size:12.5px}
+.rk-clp-player{width:100%;display:flex;flex-direction:column;gap:10px;padding:12px}
+.rk-clp-videowrap{width:100%;background:#000;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;max-height:56vh}
+.rk-clp-videowrap video{width:100%;max-height:56vh;display:block}
+.rk-clp-transport{display:flex;align-items:center;gap:12px;padding:2px 4px}
+.rk-clp-playpause{flex:none}
+.rk-clp-scrubwrap{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;gap:4px}
+.rk-clp-rangebar{position:relative;height:5px;border-radius:999px;background:var(--rk-n-200,#e7e2da);overflow:hidden}
+.rk-clp-rangefill{position:absolute;top:0;bottom:0;left:0;width:100%;background:var(--rk-gold,#e2a63a);border-radius:999px}
+.rk-clp-time{flex:none;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--rk-text-muted)}
+.rk-clp-tc-now{width:118px;padding:5px 8px;font-size:12px}
+.rk-clp-duration{font-variant-numeric:tabular-nums;white-space:nowrap}
+.rk-clp-side{position:sticky;top:16px}
+.rk-clp-side-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
+.rk-ip-iconbtn-sm{width:28px;height:28px}
+.rk-clp-session-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto}
+.rk-clp-session-empty{font-size:12.5px;color:var(--rk-text-muted);padding:10px 2px;line-height:1.5}
+.rk-clp-clip{display:flex;gap:10px;align-items:center;padding:6px;border:1px solid var(--rk-border);border-radius:12px;background:var(--rk-surface);text-decoration:none}
+.rk-clp-clip:hover{border-color:var(--rk-gold,#e2a63a)}
+.rk-clp-clip-thumb{flex:none;width:64px;height:40px;border-radius:8px;object-fit:cover;background:var(--rk-n-200,#e7e2da)}
+.rk-clp-clip-meta{min-width:0;flex:1}
+.rk-clp-clip-title{font-size:12.5px;font-weight:700;color:var(--rk-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-clp-clip-sub{font-size:11px;color:var(--rk-text-muted);font-variant-numeric:tabular-nums}
+.rk-clp-librarylink{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:700;color:var(--rk-gold-ink,#9a6b12);text-decoration:none}
+.rk-clp-librarylink:hover{text-decoration:underline}
+.rk-btn-xs{padding:3px 9px;font-size:11px}
+@media (max-width: 1080px){ .rk-clp-workbench{grid-template-columns:1fr;} .rk-clp-side{position:static} }
+`;
+    return reskinDocument({
+        title: "vidfarm — Clip a Video",
+        description: "Cut exact subranges out of any video straight into your raws library — preview from the source, pick a precise in/out point, and save only the clip.",
+        activeSlug: "inpaint",
+        pageCss,
+        body,
+        script: CLIPPER_SCRIPT
+    });
+}
+// Self-contained client runtime (plain string, no runtime imports). Uses string
+// concatenation (not template literals) so no `${}` needs escaping inside the
+// outer TS template literal.
+const CLIPPER_SCRIPT = `
+(function(){
+  var bootEl = document.querySelector("[data-clp-boot]");
+  var boot = {}; try { boot = JSON.parse(bootEl && bootEl.textContent || "{}"); } catch(_){}
+
+  var urlInput = document.querySelector("[data-clp-url-input]");
+  var loadBtn = document.querySelector("[data-clp-url-load]");
+  var uploadBtn = document.querySelector("[data-clp-upload]");
+  var attachBtn = document.querySelector("[data-clp-attach]");
+  var fileInput = document.querySelector("[data-clp-file]");
+  var emptyState = document.querySelector("[data-clp-empty]");
+  var player = document.querySelector("[data-clp-player]");
+  var video = document.querySelector("[data-clp-video]");
+  var playpause = document.querySelector("[data-clp-playpause]");
+  var scrub = document.querySelector("[data-clp-scrub]");
+  var timecodeNow = document.querySelector("[data-clp-timecode]");
+  var durationEl = document.querySelector("[data-clp-duration]");
+  var rangeControls = document.querySelector("[data-clp-range-controls]");
+  var startInput = document.querySelector("[data-clp-start-input]");
+  var endInput = document.querySelector("[data-clp-end-input]");
+  var startSlider = document.querySelector("[data-clp-start-slider]");
+  var endSlider = document.querySelector("[data-clp-end-slider]");
+  var setStartBtn = document.querySelector("[data-clp-set-start]");
+  var setEndBtn = document.querySelector("[data-clp-set-end]");
+  var wholeBtn = document.querySelector("[data-clp-whole]");
+  var lengthEl = document.querySelector("[data-clp-length]");
+  var rangeNote = document.querySelector("[data-clp-range-note]");
+  var rangeFill = document.querySelector("[data-clp-range-fill]");
+  var saveBlock = document.querySelector("[data-clp-save-block]");
+  var nameInput = document.querySelector("[data-clp-name]");
+  var folderInput = document.querySelector("[data-clp-folder]");
+  var saveBtn = document.querySelector("[data-clp-save]");
+  var saveLabel = document.querySelector("[data-clp-save-label]");
+  var statusEl = document.querySelector("[data-clp-status]");
+  var sessionList = document.querySelector("[data-clp-session-list]");
+  var sessionRefresh = document.querySelector("[data-clp-session-refresh]");
+  var startNewBtn = document.querySelector("[data-clp-start-new]");
+  var settingsBtn = document.querySelector("[data-clp-settings-button]");
+  var settingsModal = document.querySelector("[data-clp-settings]");
+  var settingsCloses = document.querySelectorAll("[data-clp-settings-close]");
+  var tracerInput = document.querySelector("[data-clp-tracer]");
+  var sessionsToggle = document.querySelector("[data-clp-history-toggle]");
+  var sessionsPanel = document.querySelector("[data-clp-sessions]");
+  var sessionsList = document.querySelector("[data-clp-sessions-list]");
+  var sessionsClose = document.querySelector("[data-clp-sessions-close]");
+  var sessionsBackdrop = document.querySelector("[data-clp-sessions-backdrop]");
+
+  var PLAY_SVG = ${JSON.stringify(PLAY_ICON)};
+  var PAUSE_SVG = ${JSON.stringify(PAUSE_ICON)};
+
+  // ── state ──
+  var sourceUrl = "";          // the original pasted/handoff URL
+  var previewUrl = "";         // resolved direct media URL (what <video> plays)
+  var sourceName = "";
+  var sourceObjectUrl = "";     // object URL for a local upload
+  var uploadTempFileId = "";    // temp_file_id when the source was uploaded
+  var durationSec = 0;
+  var startSec = 0;
+  var endSec = 0;
+  var sessionTracer = "";
+  var tracerAutoPending = true;
+
+  function nowIso(){ return new Date().toISOString(); }
+  function esc(t){ var d=document.createElement("div"); d.textContent=(t==null?"":String(t)); return d.innerHTML; }
+  function pad(n, w){ n=String(Math.max(0, Math.floor(n))); while(n.length<w) n="0"+n; return n; }
+  function absoluteUrl(u){ try { return new URL(u, window.location.origin).toString(); } catch(_){ return u; } }
+  function parseJson(r){ return r.text().then(function(t){ try { return t?JSON.parse(t):{}; } catch(_){ return {}; } }); }
+
+  // HH:MM:SS:NNNN where NNNN = ten-thousandths of a second (4 digits).
+  function fmtTC(sec){
+    if(!isFinite(sec) || sec < 0) sec = 0;
+    var whole = Math.floor(sec);
+    var frac = Math.round((sec - whole) * 10000);
+    if(frac >= 10000){ frac -= 10000; whole += 1; }
+    var h = Math.floor(whole / 3600);
+    var m = Math.floor((whole % 3600) / 60);
+    var s = whole % 60;
+    return pad(h,2)+":"+pad(m,2)+":"+pad(s,2)+":"+pad(frac,4);
+  }
+  function parseTC(str){
+    if(str == null) return NaN;
+    var parts = String(str).trim().split(":").map(function(p){ return p.trim(); });
+    if(!parts.length) return NaN;
+    var h=0,m=0,s=0,frac=0;
+    if(parts.length === 4){ h=+parts[0]; m=+parts[1]; s=+parts[2]; frac=+parts[3]; }
+    else if(parts.length === 3){ m=+parts[0]; s=+parts[1]; frac=+parts[2]; }
+    else if(parts.length === 2){ s=+parts[0]; frac=+parts[1]; }
+    else { s=+parts[0]; }
+    if([h,m,s,frac].some(function(n){ return isNaN(n); })) return NaN;
+    // Frac field: 4 digits = ten-thousandths; be forgiving of shorter entries.
+    var fracDivisor = Math.pow(10, String(parts[parts.length-1]||"").length || 4);
+    if(parts.length >= 2){ frac = (+parts[parts.length-1]) / fracDivisor; } else { frac = 0; }
+    return h*3600 + m*60 + s + frac;
+  }
+  function fmtLen(sec){
+    if(!isFinite(sec) || sec < 0) sec = 0;
+    var m = Math.floor(sec/60);
+    var s = sec - m*60;
+    return m+":"+pad(Math.floor(s),2)+"."+pad(Math.round((s-Math.floor(s))*10),1);
+  }
+  function slug(v){ return String(v||"").toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/^-+|-+$/g,"").slice(0,60); }
+
+  function setStatus(msg, tone){ if(!statusEl) return; statusEl.textContent = msg||""; if(tone) statusEl.setAttribute("data-tone", tone); else statusEl.removeAttribute("data-tone"); }
+  function setRangeNote(msg){ if(!rangeNote) return; if(msg){ rangeNote.textContent = msg; rangeNote.hidden = false; } else { rangeNote.hidden = true; } }
+
+  // ── tracer ──
+  function tracerSuffix(){ return Math.random().toString(36).slice(2, 6); }
+  function nameTracerFromSeed(seed){
+    var base = slug(seed) || "clipper";
+    var t = base + "-" + tracerSuffix();
+    sessionTracer = t; tracerAutoPending = false;
+    if(tracerInput) tracerInput.value = t;
+    return t;
+  }
+  function resolveTracer(){
+    if(tracerInput && tracerInput.value.trim()){ sessionTracer = tracerInput.value.trim(); tracerAutoPending = false; return sessionTracer; }
+    return sessionTracer;
+  }
+  function currentFolder(){
+    var f = (folderInput && folderInput.value.trim()) || "";
+    return f || slug(resolveTracer() || sessionTracer || "");
+  }
+
+  // ── source loading ──
+  function revealPlayer(){ if(emptyState) emptyState.hidden = true; if(player) player.hidden = false; if(rangeControls) rangeControls.hidden = false; if(saveBlock) saveBlock.hidden = false; }
+  function clearSourceObjectUrl(){ if(sourceObjectUrl){ try { URL.revokeObjectURL(sourceObjectUrl); } catch(_){} sourceObjectUrl=""; } }
+
+  function playSrc(url){
+    if(!video) return;
+    try { video.pause(); } catch(_){}
+    video.src = url;
+    video.load();
+    revealPlayer();
+  }
+
+  // Resolve a pasted/handoff URL to a direct preview media URL, then play it.
+  function loadSourceUrl(rawUrl, name){
+    var u = String(rawUrl||"").trim();
+    if(!u){ setStatus("Enter a video URL.", "error"); return; }
+    if(!/^https?:\\/\\//i.test(u)){ setStatus("That doesn't look like a valid URL.", "error"); return; }
+    sourceUrl = u; sourceName = name || ""; uploadTempFileId = ""; clearSourceObjectUrl();
+    if(loadBtn){ loadBtn.disabled = true; loadBtn.textContent = "Loading\\u2026"; }
+    setStatus("Resolving source\\u2026");
+    fetch("/raws/resolve-source", { method:"POST", credentials:"same-origin", headers:{ "content-type":"application/json" }, body: JSON.stringify({ source_url: u }) })
+      .then(function(r){ return parseJson(r).then(function(p){ return { ok:r.ok, p:p }; }); })
+      .then(function(res){
+        if(!res.ok || !res.p.preview_url) throw new Error(res.p.error || "Could not load that video.");
+        previewUrl = res.p.preview_url;
+        if(res.p.title && !sourceName) sourceName = res.p.title;
+        if(tracerAutoPending) nameTracerFromSeed(sourceName || "clip");
+        playSrc(previewUrl);
+        setStatus("Loaded \\u2014 scrub and set your in/out points.", "success");
+      })
+      .catch(function(err){ setStatus(err && err.message ? err.message : "Could not load that video.", "error"); })
+      .then(function(){ if(loadBtn){ loadBtn.disabled = false; loadBtn.textContent = "Load"; } });
+  }
+
+  function loadLocalFile(file){
+    if(!file) return;
+    clearSourceObjectUrl();
+    sourceObjectUrl = URL.createObjectURL(file);
+    previewUrl = ""; sourceName = file.name || "upload.mp4"; sourceUrl = ""; uploadTempFileId = "";
+    if(tracerAutoPending) nameTracerFromSeed(sourceName);
+    playSrc(sourceObjectUrl);
+    setStatus("Uploading source in the background\\u2026");
+    // The <video> plays the local object URL immediately; in parallel push the
+    // file to /temp so /raws/clip-range has a server-side source to trim.
+    var fd = new FormData();
+    fd.append("file", file);
+    fetch("/api/v1/user/me/temporary-files/upload", { method:"POST", credentials:"same-origin", body: fd })
+      .then(function(r){ return parseJson(r).then(function(p){ return { ok:r.ok, p:p }; }); })
+      .then(function(res){
+        var id = res.p && (res.p.id || res.p.file_id || (res.p.file && res.p.file.id));
+        if(res.ok && id){ uploadTempFileId = String(id); setStatus("Source ready \\u2014 set your in/out points.", "success"); }
+        else { setStatus("Preview ready, but the upload failed \\u2014 saving a clip may not work. " + ((res.p && res.p.error)||""), "error"); }
+      })
+      .catch(function(){ setStatus("Preview ready, but the upload failed \\u2014 saving a clip may not work.", "error"); });
+  }
+
+  function openAttach(){
+    if(window.__vidfarmDirectory && typeof window.__vidfarmDirectory.pick === "function"){
+      window.__vidfarmDirectory.pick({ select:"file" }).then(function(picked){
+        if(!picked) return;
+        var url = picked.view_url || picked.url || picked.path;
+        if(url){ loadSourceUrl(absoluteUrl(url), picked.name || picked.file_name || ""); }
+      }).catch(function(){});
+    } else {
+      setStatus("File browser unavailable here \\u2014 paste a URL or upload instead.", "error");
+    }
+  }
+
+  // ── range sync ──
+  function clamp(v, lo, hi){ return Math.max(lo, Math.min(hi, v)); }
+  function updateFill(){
+    if(!rangeFill || durationSec <= 0){ if(rangeFill){ rangeFill.style.left="0"; rangeFill.style.width="0"; } return; }
+    var a = clamp(startSec/durationSec, 0, 1) * 100;
+    var b = clamp(endSec/durationSec, 0, 1) * 100;
+    rangeFill.style.left = a + "%";
+    rangeFill.style.width = Math.max(0, b - a) + "%";
+  }
+  function refreshRangeUI(sync){
+    if(sync !== "start" && startInput && document.activeElement !== startInput) startInput.value = fmtTC(startSec);
+    if(sync !== "end" && endInput && document.activeElement !== endInput) endInput.value = fmtTC(endSec);
+    if(durationSec > 0){
+      if(startSlider && document.activeElement !== startSlider) startSlider.value = String(Math.round((startSec/durationSec)*1000));
+      if(endSlider && document.activeElement !== endSlider) endSlider.value = String(Math.round((endSec/durationSec)*1000));
+    }
+    var len = endSec - startSec;
+    if(lengthEl) lengthEl.textContent = fmtLen(Math.max(0, len)) + " (" + Math.max(0, len).toFixed(2) + "s)";
+    updateFill();
+    var valid = len > 0.02 && (durationSec <= 0 || (startSec >= 0 && endSec <= durationSec + 0.01));
+    if(!valid){ setRangeNote(len <= 0 ? "Out point must be after the in point." : "Range is outside the video."); }
+    else setRangeNote("");
+    if(saveBtn) saveBtn.disabled = !valid;
+  }
+  function setStart(sec){ startSec = clamp(sec, 0, durationSec>0?durationSec:sec); if(endSec < startSec) endSec = Math.min(durationSec>0?durationSec:startSec, startSec + 0.1); refreshRangeUI(); }
+  function setEnd(sec){ endSec = clamp(sec, 0, durationSec>0?durationSec:sec); if(startSec > endSec) startSec = Math.max(0, endSec - 0.1); refreshRangeUI(); }
+
+  // ── playback ──
+  function syncNow(){
+    var t = video.currentTime || 0;
+    if(scrub && document.activeElement !== scrub && durationSec > 0) scrub.value = String(Math.round((t/durationSec)*1000));
+    if(timecodeNow && document.activeElement !== timecodeNow) timecodeNow.value = fmtTC(t);
+  }
+  function tick(){ if(video && !video.paused && !video.ended){ syncNow(); requestAnimationFrame(tick); } }
+  function setPlayIcon(){ if(playpause) playpause.innerHTML = (video && !video.paused) ? PAUSE_SVG : PLAY_SVG; }
+
+  if(video){
+    video.addEventListener("loadedmetadata", function(){
+      durationSec = video.duration || 0;
+      startSec = 0; endSec = durationSec || 0;
+      if(durationEl) durationEl.textContent = "/ " + fmtTC(durationSec);
+      refreshRangeUI();
+    });
+    video.addEventListener("timeupdate", syncNow);
+    video.addEventListener("play", function(){ setPlayIcon(); tick(); });
+    video.addEventListener("pause", setPlayIcon);
+    video.addEventListener("ended", setPlayIcon);
+    video.addEventListener("error", function(){ setStatus("The browser couldn't play this source. Try a direct .mp4 URL or upload the file.", "error"); });
+  }
+
+  // ── wire controls ──
+  if(loadBtn) loadBtn.addEventListener("click", function(){ loadSourceUrl(urlInput && urlInput.value, ""); });
+  if(urlInput) urlInput.addEventListener("keydown", function(e){ if(e.key === "Enter"){ e.preventDefault(); loadSourceUrl(urlInput.value, ""); } });
+  if(uploadBtn && fileInput){ uploadBtn.addEventListener("click", function(){ fileInput.click(); }); fileInput.addEventListener("change", function(){ if(fileInput.files && fileInput.files[0]) loadLocalFile(fileInput.files[0]); }); }
+  if(attachBtn) attachBtn.addEventListener("click", openAttach);
+  if(playpause) playpause.addEventListener("click", function(){ if(!video) return; if(video.paused) video.play(); else video.pause(); });
+  if(scrub) scrub.addEventListener("input", function(){ if(durationSec > 0){ video.currentTime = (scrub.value/1000)*durationSec; syncNow(); } });
+  if(timecodeNow) timecodeNow.addEventListener("change", function(){ var t = parseTC(timecodeNow.value); if(isFinite(t)){ video.currentTime = clamp(t, 0, durationSec||t); syncNow(); } });
+
+  if(startSlider) startSlider.addEventListener("input", function(){ if(durationSec>0) setStart((startSlider.value/1000)*durationSec); });
+  if(endSlider) endSlider.addEventListener("input", function(){ if(durationSec>0) setEnd((endSlider.value/1000)*durationSec); });
+  if(startInput) startInput.addEventListener("change", function(){ var t = parseTC(startInput.value); if(isFinite(t)) setStart(t); else refreshRangeUI(); });
+  if(endInput) endInput.addEventListener("change", function(){ var t = parseTC(endInput.value); if(isFinite(t)) setEnd(t); else refreshRangeUI(); });
+  if(setStartBtn) setStartBtn.addEventListener("click", function(){ setStart(video.currentTime || 0); });
+  if(setEndBtn) setEndBtn.addEventListener("click", function(){ setEnd(video.currentTime || 0); });
+  if(wholeBtn) wholeBtn.addEventListener("click", function(){ startSec = 0; endSec = durationSec || 0; refreshRangeUI(); });
+
+  // ── save clip ──
+  function setSaving(on){ if(saveBtn){ saveBtn.setAttribute("data-loading", on?"true":"false"); saveBtn.disabled = on; } if(saveLabel) saveLabel.textContent = on ? "Saving\\u2026" : "Save clip to raws"; }
+  function saveClip(){
+    if(!video){ return; }
+    var len = endSec - startSec;
+    if(!(len > 0.02)){ setStatus("Set an in point and a later out point first.", "error"); return; }
+    if(!previewUrl && !sourceUrl && !uploadTempFileId){ setStatus("Load a source video first.", "error"); return; }
+    var tracer = resolveTracer(); if(tracerAutoPending || !tracer){ tracer = nameTracerFromSeed(sourceName || "clip"); }
+    var folder = currentFolder();
+    var payload = { start_sec: Number(startSec.toFixed(3)), end_sec: Number(endSec.toFixed(3)), tracer: tracer };
+    if(folder) payload.folder_path = folder;
+    if(nameInput && nameInput.value.trim()) payload.name = nameInput.value.trim();
+    // Prefer the already-resolved direct URL (no re-resolve); else the uploaded
+    // temp file; else the raw source URL (server resolves + bills).
+    if(previewUrl) payload.preview_url = previewUrl;
+    if(uploadTempFileId) payload.temp_file_id = uploadTempFileId;
+    if(sourceUrl) payload.source_url = sourceUrl;
+    setSaving(true); setStatus("Trimming and saving your clip\\u2026");
+    fetch("/raws/clip-range", { method:"POST", credentials:"same-origin", headers:{ "content-type":"application/json" }, body: JSON.stringify(payload) })
+      .then(function(r){ return parseJson(r).then(function(p){ return { ok:r.ok, p:p }; }); })
+      .then(function(res){
+        if(!res.ok || !res.p.clip_id) throw new Error(res.p.error || "Could not save that clip.");
+        setStatus("Saved \\u2014 clip added to your raws (" + (res.p.folder_path||folder) + ").", "success");
+        prependSessionClip(res.p);
+        loadSession();
+      })
+      .catch(function(err){ setStatus(err && err.message ? err.message : "Could not save that clip.", "error"); })
+      .then(function(){ setSaving(false); });
+  }
+  if(saveBtn) saveBtn.addEventListener("click", saveClip);
+
+  // ── this-session clip list ──
+  function clipRow(clip){
+    var a = document.createElement("a");
+    a.className = "rk-clp-clip"; a.href = clip.view_url ? absoluteUrl(clip.view_url) : "/library/raws"; a.target = "_blank"; a.rel = "noopener";
+    var thumb;
+    if(clip.thumbnail_url){ thumb = document.createElement("img"); thumb.className = "rk-clp-clip-thumb"; thumb.loading = "lazy"; thumb.src = absoluteUrl(clip.thumbnail_url); thumb.alt = ""; }
+    else { thumb = document.createElement("span"); thumb.className = "rk-clp-clip-thumb"; }
+    var meta = document.createElement("div"); meta.className = "rk-clp-clip-meta";
+    var title = document.createElement("div"); title.className = "rk-clp-clip-title"; title.textContent = clip.description || clip.name || clip.clip_id || "clip";
+    var sub = document.createElement("div"); sub.className = "rk-clp-clip-sub";
+    var d = Number(clip.duration_sec || 0);
+    sub.textContent = (d>0 ? d.toFixed(2)+"s" : "clip");
+    meta.appendChild(title); meta.appendChild(sub); a.appendChild(thumb); a.appendChild(meta);
+    return a;
+  }
+  function prependSessionClip(clip){
+    if(!sessionList) return;
+    var empty = sessionList.querySelector(".rk-clp-session-empty"); if(empty) empty.remove();
+    sessionList.insertBefore(clipRow(clip), sessionList.firstChild);
+  }
+  function loadSession(){
+    if(!sessionList) return;
+    var folder = currentFolder();
+    if(!folder){ return; }
+    var endpoint = new URL("/raws/feed", window.location.origin);
+    endpoint.searchParams.set("folder", folder); endpoint.searchParams.set("limit", "200");
+    fetch(endpoint, { credentials:"same-origin", headers:{ Accept:"application/json" } })
+      .then(function(r){ return parseJson(r).then(function(p){ return { ok:r.ok, p:p }; }); })
+      .then(function(res){
+        if(!res.ok) return;
+        var clips = (res.p && res.p.clips) || [];
+        sessionList.innerHTML = "";
+        if(!clips.length){ var e=document.createElement("div"); e.className="rk-clp-session-empty"; e.textContent="No clips yet — set an in/out point and save your first clip."; sessionList.appendChild(e); return; }
+        clips.forEach(function(c){ sessionList.appendChild(clipRow(c)); });
+      }).catch(function(){});
+  }
+  if(sessionRefresh) sessionRefresh.addEventListener("click", loadSession);
+
+  // ── past sessions (grouped by folder/tracer) ──
+  function openSessions(){ if(sessionsPanel) sessionsPanel.classList.add("is-open"); if(sessionsBackdrop) sessionsBackdrop.hidden = false; loadPastSessions(); }
+  function closeSessions(){ if(sessionsPanel) sessionsPanel.classList.remove("is-open"); if(sessionsBackdrop) sessionsBackdrop.hidden = true; }
+  function relTime(v){ var then=Date.parse(v||0); if(!then) return ""; var s=Math.max(0,Math.floor((Date.now()-then)/1000)); if(s<60) return "just now"; var m=Math.floor(s/60); if(m<60) return m+"m ago"; var h=Math.floor(m/60); if(h<24) return h+"h ago"; var d=Math.floor(h/24); if(d<7) return d+"d ago"; return new Date(then).toLocaleDateString(); }
+  function loadPastSessions(){
+    if(!sessionsList) return;
+    sessionsList.innerHTML = "<div class=\\"rk-ip-sessions-empty\\">Loading\\u2026</div>";
+    var endpoint = new URL("/raws/feed", window.location.origin); endpoint.searchParams.set("limit", "200");
+    fetch(endpoint, { credentials:"same-origin", headers:{ Accept:"application/json" } })
+      .then(function(r){ return parseJson(r).then(function(p){ return { ok:r.ok, p:p }; }); })
+      .then(function(res){
+        var clips = (res.p && res.p.clips) || [];
+        var groups = {}, order = [];
+        clips.forEach(function(c){
+          var key = (c.folder_path || c.tracer || "").trim(); if(!key) return;
+          if(!groups[key]){ groups[key] = { key:key, thumb:"", count:0, createdAt:c.created_at||"" }; order.push(key); }
+          var g = groups[key]; g.count++;
+          if(!g.thumb && c.thumbnail_url) g.thumb = absoluteUrl(c.thumbnail_url);
+          if(Date.parse(c.created_at||0) > Date.parse(g.createdAt||0)) g.createdAt = c.created_at;
+        });
+        var list = order.map(function(k){ return groups[k]; }).sort(function(a,b){ return Date.parse(b.createdAt||0) - Date.parse(a.createdAt||0); });
+        sessionsList.innerHTML = "";
+        if(!list.length){ sessionsList.innerHTML = "<div class=\\"rk-ip-sessions-empty\\">No past clipping sessions yet.</div>"; return; }
+        list.forEach(function(g){
+          var row = document.createElement("button"); row.type="button"; row.className="rk-ip-session" + (g.key === currentFolder() ? " is-active" : "");
+          if(g.thumb){ var im=document.createElement("img"); im.className="rk-ip-session-thumb"; im.src=g.thumb; im.alt=""; row.appendChild(im); }
+          else { var ph=document.createElement("span"); ph.className="rk-ip-session-thumb is-empty"; row.appendChild(ph); }
+          var meta=document.createElement("div"); meta.className="rk-ip-session-meta";
+          var title=document.createElement("div"); title.className="rk-ip-session-title"; title.textContent=g.key;
+          var sub=document.createElement("div"); sub.className="rk-ip-session-sub"; sub.textContent = g.count + " clip" + (g.count===1?"":"s") + (relTime(g.createdAt)?" \\u00b7 "+relTime(g.createdAt):"");
+          meta.appendChild(title); meta.appendChild(sub); row.appendChild(meta);
+          row.addEventListener("click", function(){ switchToSession(g.key); });
+          sessionsList.appendChild(row);
+        });
+      }).catch(function(){ if(sessionsList) sessionsList.innerHTML = "<div class=\\"rk-ip-sessions-empty\\">Unable to load sessions.</div>"; });
+  }
+  function switchToSession(key){
+    if(!key) return;
+    sessionTracer = key; tracerAutoPending = false;
+    if(tracerInput) tracerInput.value = key;
+    if(folderInput) folderInput.value = key;
+    closeSessions(); loadSession();
+    setStatus("Opened session " + key + " \\u2014 load a source to add more clips.", "");
+  }
+
+  // ── settings / sessions open-close ──
+  if(settingsBtn) settingsBtn.addEventListener("click", function(){ if(settingsModal) settingsModal.hidden = false; });
+  Array.prototype.forEach.call(settingsCloses, function(el){ el.addEventListener("click", function(){ if(settingsModal) settingsModal.hidden = true; }); });
+  if(sessionsToggle) sessionsToggle.addEventListener("click", openSessions);
+  if(sessionsClose) sessionsClose.addEventListener("click", closeSessions);
+  if(sessionsBackdrop) sessionsBackdrop.addEventListener("click", closeSessions);
+  document.addEventListener("keydown", function(e){ if(e.key === "Escape"){ if(settingsModal && !settingsModal.hidden) settingsModal.hidden = true; closeSessions(); } });
+
+  // ── start new ──
+  function resetWorkspace(){
+    clearSourceObjectUrl();
+    sourceUrl=""; previewUrl=""; sourceName=""; uploadTempFileId=""; durationSec=0; startSec=0; endSec=0;
+    try { video.pause(); } catch(_){} if(video){ video.removeAttribute("src"); video.load(); }
+    if(emptyState) emptyState.hidden = false; if(player) player.hidden = true;
+    if(rangeControls) rangeControls.hidden = true; if(saveBlock) saveBlock.hidden = true;
+    if(urlInput) urlInput.value=""; if(nameInput) nameInput.value=""; if(folderInput) folderInput.value="";
+    if(sessionList) sessionList.innerHTML = "<div class=\\"rk-clp-session-empty\\">No clips yet — set an in/out point and save your first clip.</div>";
+    setStatus(""); setRangeNote("");
+  }
+  if(startNewBtn) startNewBtn.addEventListener("click", function(){
+    sessionTracer=""; tracerAutoPending=true; if(tracerInput) tracerInput.value="";
+    clearUrlParams(); resetWorkspace();
+    setStatus("Started a new session.", "");
+  });
+
+  // ── URL param preload ──
+  function firstParam(names){ var p=new URLSearchParams(window.location.search); for(var i=0;i<names.length;i++){ var v=p.get(names[i]); if(v && v.trim()) return v.trim(); } return ""; }
+  function clearUrlParams(){ var u=new URL(window.location.href); ["source_url","source_video_url","video_url","url","source_video_name","video_name","file_name","tracer","tracer_id","trace"].forEach(function(k){ u.searchParams.delete(k); }); window.history.replaceState({}, "", u.toString()); }
+  function initFromUrl(){
+    var t = firstParam(["tracer","tracer_id","trace"]);
+    if(t){ sessionTracer=t; tracerAutoPending=false; if(tracerInput) tracerInput.value=t; if(folderInput && !folderInput.value) folderInput.value=slug(t); }
+    var src = firstParam(["source_url","source_video_url","video_url","url"]);
+    if(src){ if(urlInput) urlInput.value = src; loadSourceUrl(src, firstParam(["source_video_name","video_name","file_name"])); }
+    if(t) loadSession();
+  }
+
+  initFromUrl();
+})();`;
+//# sourceMappingURL=inpaint-clipper-page.js.map