@mevdragon/vidfarm-devcli 0.20.6 → 0.20.8

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

@@ -1,890 +0,0 @@
-// /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 (or audio) 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) on ONE unified timeline shared with the playhead,
-// shows a live estimate of the clip length, and on "Clip Media" 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 the right-hand
-// history card, with a past-sessions slide-in grouped by tracer (like /tools/*).
-//
-// Layout: one big LEFT column (source URL + compact ingest above the preview;
-// video preview; unified in/out timeline + <advanced> below) and a RIGHT history
-// card styled to match /tools/image. Works for audio sources too.
-//
-// Data flow:
-//   • load source  → POST /raws/resolve-source { source_url } → { preview_url, ... }
-//   • clip media    → POST /raws/clip-range { preview_url, start_sec, end_sec, tracer, folder_path, name, notes, audio_only }
-//   • 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="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" 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 REFRESH_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="M16.5 10a6.5 6.5 0 1 1-1.9-4.6"/><path d="M16.5 4.2v4.2h-4.2"/></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="16" height="16" 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>`;
-const CHEVRON_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="m6 8 4 4 4-4"/></svg>`;
-const AUDIO_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10v4"/><path d="M8 6v12"/><path d="M12 3v18"/><path d="M16 7v10"/><path d="M20 10v4"/></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 rk-clp-head">
-    <div class="rk-inpaint-head-text">
-      ${renderInpaintModeTabs("clipper")}
-      <h1 class="rk-h1">Clip Media</h1>
-      <p class="rk-sub">Paste (or upload) a video or audio source, scrub to the exact moment, and drag the <strong>in</strong> and <strong>out</strong> edges on the timeline (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-clp-workbench">
-    <!-- LEFT: source (top) → preview → timeline + advanced (bottom) -->
-    <section class="rk-clp-main" aria-label="Clip controls">
-      <!-- Source, above the preview -->
-      <div class="rk-clp-sourcebar">
-        <label class="rk-label" for="rkClpUrl">Source URL <span class="rk-hint">video or audio</span></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://…/media.mp4" autocomplete="off" spellcheck="false" />
-          <button type="button" class="rk-btn rk-btn-gold rk-btn-sm rk-clp-loadbtn" data-clp-url-load>Load</button>
-          <span class="rk-clp-or">or</span>
-          <button type="button" class="rk-ip-iconbtn rk-clp-ingestbtn" data-clp-upload title="Upload from your computer" aria-label="Upload">${UPLOAD_ICON}</button>
-          <button type="button" class="rk-ip-iconbtn rk-clp-ingestbtn" data-clp-attach title="Attach from your Files" aria-label="From Files">${FOLDER_ICON}</button>
-        </div>
-        <input data-clp-file type="file" accept="video/*,audio/*" hidden />
-        <span class="rk-hint rk-clp-sourcehint">TikTok, YouTube, Instagram, X, or a direct link — we play it straight from the source; nothing is saved until you clip.</span>
-      </div>
-
-      <!-- Preview -->
-      <div class="rk-clp-stage" data-clp-stage>
-        <div class="rk-clp-empty" data-clp-empty>
-          <span class="rk-clp-empty-ic" aria-hidden="true">${CLIP_ICON}</span>
-          <p>Load media to start clipping.</p>
-          <span>Paste a URL and hit <strong>Load</strong>, or upload a file.</span>
-        </div>
-        <div class="rk-clp-player" data-clp-player hidden>
-          <div class="rk-clp-videowrap" data-clp-videowrap>
-            <video data-clp-video playsinline preload="auto"></video>
-            <div class="rk-clp-audioposter" data-clp-audio-poster hidden>
-              <span class="rk-clp-audioposter-ic" aria-hidden="true">${AUDIO_ICON}</span>
-              <span>Audio source</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <!-- Transport + unified timeline (only when a source is loaded) -->
-      <div class="rk-clp-controls" data-clp-controls hidden>
-        <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>
-          <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 class="rk-clp-spacer"></div>
-          <button type="button" class="rk-btn rk-btn-ghost rk-btn-xs" data-clp-whole title="Select the whole source">Whole</button>
-        </div>
-
-        <!-- ONE timeline: playhead + draggable in/out edges + selected subrange -->
-        <div class="rk-clp-timeline" data-clp-timeline>
-          <div class="rk-clp-tl-track" data-clp-tl-track>
-            <div class="rk-clp-tl-sel" data-clp-tl-sel></div>
-            <div class="rk-clp-tl-playhead" data-clp-tl-playhead aria-hidden="true"></div>
-            <button type="button" class="rk-clp-tl-handle rk-clp-tl-handle-in" data-clp-tl-in aria-label="In point"><span></span></button>
-            <button type="button" class="rk-clp-tl-handle rk-clp-tl-handle-out" data-clp-tl-out aria-label="Out point"><span></span></button>
-          </div>
-        </div>
-
-        <div class="rk-clp-inout">
-          <label class="rk-clp-field">
-            <span class="rk-clp-field-label">In</span>
-            <input class="rk-input rk-clp-tc" data-clp-start-input type="text" inputmode="numeric" value="00:00:00:0000" />
-            <button type="button" class="rk-clp-tinybtn" data-clp-set-start title="Set in-point to the playhead">Set to playhead</button>
-          </label>
-          <label class="rk-clp-field">
-            <span class="rk-clp-field-label">Out</span>
-            <input class="rk-input rk-clp-tc" data-clp-end-input type="text" inputmode="numeric" value="00:00:00:0000" />
-            <button type="button" class="rk-clp-tinybtn" data-clp-set-end title="Set out-point to the playhead">Set to playhead</button>
-          </label>
-          <div class="rk-clp-lenbox">
-            <span class="rk-clp-field-label">Length</span>
-            <strong data-clp-length>0:00.0</strong>
-          </div>
-        </div>
-        <div class="rk-clp-rangenote" data-clp-range-note hidden></div>
-
-        <!-- Advanced (collapsed) -->
-        <div class="rk-clp-advanced" data-clp-advanced>
-          <button type="button" class="rk-clp-adv-toggle" data-clp-adv-toggle aria-expanded="false">
-            <span class="rk-clp-adv-chev" aria-hidden="true">${CHEVRON_ICON}</span>
-            <span>Advanced</span>
-            <span class="rk-hint rk-clp-adv-hint">name · notes · audio only</span>
-          </button>
-          <div class="rk-clp-adv-body" data-clp-adv-body hidden>
-            <label class="rk-label" for="rkClpName">Filename <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="rkClpNotes" style="margin-top:11px">Notes <span class="rk-hint">helps you find this clip later by search</span></label>
-            <textarea class="rk-input rk-clp-notes" id="rkClpNotes" data-clp-notes rows="2" placeholder="What's in this clip / how you'll use it — indexed for search."></textarea>
-            <label class="rk-label" for="rkClpFolder" style="margin-top:11px">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" />
-            <label class="rk-clp-audio-toggle">
-              <input type="checkbox" data-clp-audio-only />
-              <span class="rk-clp-audio-text">
-                <strong>Clip audio only</strong>
-                <span class="rk-hint">Save just the sound (no video) — e.g. grab a track from a copyright-free sound video. Your choice is remembered.</span>
-              </span>
-            </label>
-          </div>
-        </div>
-
-        <button type="button" class="rk-btn rk-btn-gold rk-clp-savebtn" data-clp-save>
-          ${CLIP_ICON}<span data-clp-save-label>Clip Media</span>
-        </button>
-        <div class="rk-clp-status" data-clp-status role="status"></div>
-      </div>
-    </section>
-
-    <!-- RIGHT: this-session history card -->
-    <aside class="rk-clp-side" aria-label="Clips this session">
-      <div class="rk-clp-side-card">
-        <div class="rk-clp-side-head">
-          <h2 class="rk-inpaint-h2">This session</h2>
-          <button type="button" class="rk-ip-iconbtn rk-ip-iconbtn-sm" data-clp-session-refresh aria-label="Refresh" title="Refresh">${REFRESH_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 clip your first media.</div>
-        </div>
-        <a class="rk-clp-librarylink" href="/library/raws">Open your raws library →</a>
-      </div>
-    </aside>
-  </div>
-
-  <!-- Settings modal -->
-  <div class="rk-ip-settingsmodal" data-clp-settings hidden>
-    <div class="rk-ip-settingsmodal-panel" role="dialog" aria-modal="true" aria-label="Clipper settings">
-      <div class="rk-ip-settingsmodal-head">
-        <span class="rk-ip-settingsmodal-title">Settings</span>
-        <button type="button" class="rk-ip-iconbtn" data-clp-settings-close aria-label="Close">${CLOSE_ICON}</button>
-      </div>
-      <div class="rk-ip-settingsmodal-body">
-        <label class="rk-ip-setting">
-          <span class="rk-label">Session name <span class="rk-ip-setting-note">(tracer — groups this session's clips)</span></span>
-          <input class="rk-ip-input" id="rkClpTracer" data-clp-tracer type="text" placeholder="auto — named from the source" autocomplete="off" spellcheck="false" />
-        </label>
-        <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-ip-sessions-title">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-left:var(--rk-gutter);padding-right:var(--rk-gutter);padding-bottom:44px}
-
-/* shared page-head toolbar (Start New + gear + history) — top-right, like /tools/image */
-.rk-inpaint-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
-.rk-inpaint-head-text{min-width:0;flex:1 1 340px}
-.rk-inpaint-toolbar{flex:none;display:flex;align-items:center;gap:8px;padding-top:2px}
-.rk-inpaint-startnew{gap:6px}
-.rk-inpaint-h2{font-family:var(--rk-font-display);font-size:var(--rk-text-lg);font-weight:800;color:var(--rk-ink);letter-spacing:-.01em;margin:0}
-
-/* shared icon buttons */
-.rk-ip-iconbtn{display:grid;place-items:center;width:34px;height:34px;border-radius:var(--rk-r-lg);border:1px solid var(--rk-border);background:#fff;color:var(--rk-n-600);cursor:pointer;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
-.rk-ip-iconbtn:hover{background:var(--rk-gold-tint);color:var(--rk-gold-700);border-color:var(--rk-gold-600)}
-.rk-ip-iconbtn:disabled{opacity:.45;cursor:not-allowed;background:var(--rk-n-50);color:var(--rk-n-400);border-color:var(--rk-border)}
-.rk-ip-iconbtn-sm{width:28px;height:28px}
-
-/* workbench grid — one big left column + right history card */
-.rk-clp-workbench{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
-.rk-clp-main{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-card);padding:18px;display:grid;gap:16px;align-content:start}
-
-/* source bar (above the preview) */
-.rk-clp-sourcebar{display:grid;gap:8px}
-.rk-clp-urlrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
-.rk-clp-urlrow .rk-input{flex:1 1 240px;min-width:0}
-.rk-clp-loadbtn{flex:none}
-.rk-clp-or{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--rk-text-faint)}
-.rk-clp-ingestbtn{flex:none}
-.rk-clp-sourcehint{line-height:1.4}
-.rk-clp-loadbtn[data-loading="true"]{opacity:.7;pointer-events:none}
-.rk-clp-sourcebar.is-loading .rk-clp-ingestbtn,.rk-clp-sourcebar.is-loading .rk-input{opacity:.5;pointer-events:none}
-
-/* preview stage */
-.rk-clp-stage{min-height:300px;background:var(--rk-n-100);border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
-.rk-clp-empty{padding:44px 24px;text-align:center;color:var(--rk-text-muted)}
-.rk-clp-empty[hidden]{display:none}
-.rk-clp-empty-ic{display:inline-grid;place-items:center;color:var(--rk-n-400);margin-bottom:10px}
-.rk-clp-empty-ic svg{width:30px;height:30px}
-.rk-clp-empty p{font-size:15px;font-weight:800;color:var(--rk-ink);margin:0 0 4px}
-.rk-clp-empty span{font-size:12.5px}
-.rk-clp-player{width:100%}
-.rk-clp-player[hidden]{display:none}
-.rk-clp-videowrap{width:100%;background:#000;display:flex;align-items:center;justify-content:center;position:relative;min-height:300px;max-height:58vh}
-.rk-clp-videowrap video{width:100%;max-height:58vh;display:block}
-.rk-clp-audioposter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;background:linear-gradient(135deg,#2a2622,#1b1815)}
-.rk-clp-audioposter[hidden]{display:none}
-.rk-clp-audioposter-ic{display:grid;place-items:center;color:var(--rk-gold-500,#f0b429)}
-.rk-clp-audioposter-ic svg{width:34px;height:34px}
-.rk-clp-audioposter span{font-size:13px;font-weight:700;letter-spacing:.02em}
-
-/* transport row */
-.rk-clp-controls[hidden]{display:none}
-.rk-clp-controls{display:grid;gap:13px}
-.rk-clp-transport{display:flex;align-items:center;gap:10px}
-.rk-clp-spacer{flex:1}
-.rk-clp-tc{font-variant-numeric:tabular-nums;letter-spacing:.02em;font-weight:700}
-.rk-clp-tc-now{width:132px;padding:6px 9px;font-size:12.5px}
-.rk-clp-duration{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12.5px;color:var(--rk-text-muted)}
-.rk-btn-xs{padding:4px 11px;font-size:11.5px}
-
-/* unified timeline */
-.rk-clp-timeline{padding:16px 12px 8px}
-.rk-clp-tl-track{position:relative;height:12px;border-radius:999px;background:var(--rk-n-200,#e7e2da);cursor:pointer;touch-action:none}
-.rk-clp-tl-sel{position:absolute;top:0;bottom:0;left:0;width:100%;background:var(--rk-gold-500,#f0b429);border-radius:999px;box-shadow:inset 0 0 0 1px var(--rk-gold-600,#dd9a1f)}
-.rk-clp-tl-playhead{position:absolute;top:-4px;bottom:-4px;left:0;width:2px;background:var(--rk-ink);border-radius:2px;transform:translateX(-1px);pointer-events:none;z-index:3}
-.rk-clp-tl-playhead::after{content:"";position:absolute;top:-3px;left:50%;width:9px;height:9px;background:var(--rk-ink);border:2px solid #fff;border-radius:50%;transform:translateX(-50%)}
-.rk-clp-tl-handle{position:absolute;top:50%;width:16px;height:26px;padding:0;border:0;background:transparent;cursor:ew-resize;transform:translate(-50%,-50%);z-index:4;touch-action:none}
-.rk-clp-tl-handle span{display:block;width:14px;height:26px;margin:0 auto;border-radius:5px;background:#fff;border:2px solid var(--rk-gold-600,#dd9a1f);box-shadow:var(--rk-shadow-sm),0 0 0 1px rgba(0,0,0,.04)}
-.rk-clp-tl-handle:hover span,.rk-clp-tl-handle.is-drag span{border-color:var(--rk-gold-700);background:var(--rk-gold-tint)}
-.rk-clp-tl-handle::before{content:"";position:absolute;top:50%;left:50%;width:2px;height:12px;background:var(--rk-gold-700,#c98a1a);border-radius:2px;transform:translate(-50%,-50%);opacity:.7}
-
-/* in / out inputs */
-.rk-clp-inout{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
-.rk-clp-field{display:flex;flex-direction:column;gap:5px;flex:1 1 150px;min-width:130px}
-.rk-clp-field-label{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--rk-text-muted)}
-.rk-clp-tinybtn{align-self:flex-start;border:0;background:transparent;color:var(--rk-gold-ink,#9a6b12);font-size:11px;font-weight:700;cursor:pointer;padding:1px 2px;border-radius:6px}
-.rk-clp-tinybtn:hover{text-decoration:underline}
-.rk-clp-lenbox{display:flex;flex-direction:column;gap:5px;flex:0 0 auto;padding-bottom:2px}
-.rk-clp-lenbox strong{font-size:14px;color:var(--rk-ink);font-variant-numeric:tabular-nums}
-.rk-clp-rangenote{font-size:12px;font-weight:600;color:#b42318}
-.rk-clp-rangenote[hidden]{display:none}
-
-/* advanced */
-.rk-clp-advanced{border-top:1px solid var(--rk-border);padding-top:12px}
-.rk-clp-adv-toggle{display:flex;align-items:center;gap:8px;width:100%;padding:2px;border:0;background:transparent;cursor:pointer;font:inherit;font-size:13px;font-weight:800;color:var(--rk-ink);text-align:left}
-.rk-clp-adv-chev{display:grid;place-items:center;color:var(--rk-text-muted);transition:transform var(--rk-dur) var(--rk-ease)}
-.rk-clp-adv-toggle[aria-expanded="true"] .rk-clp-adv-chev{transform:rotate(180deg)}
-.rk-clp-adv-hint{font-weight:600;margin-left:auto}
-.rk-clp-adv-body{margin-top:12px}
-.rk-clp-adv-body[hidden]{display:none}
-.rk-clp-notes{min-height:52px;resize:vertical;line-height:1.45}
-.rk-clp-audio-toggle{display:flex;gap:9px;align-items:flex-start;margin-top:14px;cursor:pointer}
-.rk-clp-audio-toggle input{margin-top:2px;flex:none;width:16px;height:16px;accent-color:var(--rk-gold-700);cursor:pointer}
-.rk-clp-audio-text{display:flex;flex-direction:column;gap:2px;line-height:1.35}
-.rk-clp-audio-text strong{font-size:13px;color:var(--rk-ink);font-weight:800}
-.rk-clp-audio-text .rk-hint{font-size:11.5px}
-
-/* clip button + status */
-.rk-clp-savebtn{width:100%;justify-content:center;gap:8px;padding:13px}
-.rk-clp-savebtn[data-loading="true"]{opacity:.7;pointer-events:none}
-.rk-clp-savebtn:disabled{opacity:.5;cursor:not-allowed}
-.rk-clp-status{font-size:12.5px;font-weight:600;min-height:16px;line-height:1.5}
-.rk-clp-status[data-tone="error"]{color:#b42318}
-.rk-clp-status[data-tone="success"]{color:#1f7a44}
-
-/* right: this-session history card (matches /tools/image) */
-.rk-clp-side{position:sticky;top:16px}
-.rk-clp-side-card{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-card);padding:18px;display:grid;gap:12px;align-content:start}
-.rk-clp-side-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
-.rk-clp-session-list{display:flex;flex-direction:column;gap:9px;max-height:62vh;overflow:auto}
-.rk-clp-session-empty{font-size:12.5px;color:var(--rk-text-faint);padding:14px 4px;line-height:1.5;text-align:center}
-.rk-clp-clip{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--rk-border);border-radius:var(--rk-r-xl);background:var(--rk-n-50);text-decoration:none}
-.rk-clp-clip:hover{border-color:var(--rk-gold-600)}
-.rk-clp-clip-thumb{flex:none;width:60px;height:40px;border-radius:var(--rk-r-lg);object-fit:cover;background:var(--rk-n-200,#e7e2da)}
-.rk-clp-clip-meta{min-width:0;flex:1;display:grid;gap:3px}
-.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{font-size:12.5px;font-weight:700;color:var(--rk-gold-ink,#9a6b12);text-decoration:none}
-.rk-clp-librarylink:hover{text-decoration:underline}
-
-/* settings modal (shared look with /tools/image) */
-.rk-ip-settingsmodal{position:fixed;inset:0;z-index:70;background:rgba(28,25,23,.44);backdrop-filter:blur(2px);display:grid;place-items:center;padding:20px;animation:rk-clp-fade .16s var(--rk-ease)}
-.rk-ip-settingsmodal[hidden]{display:none}
-.rk-ip-settingsmodal-panel{width:min(440px,100%);background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-lg,var(--rk-shadow-card));overflow:hidden}
-.rk-ip-settingsmodal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--rk-border)}
-.rk-ip-settingsmodal-title{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-md,15px);color:var(--rk-ink)}
-.rk-ip-settingsmodal-body{padding:16px 18px;display:grid;gap:10px}
-.rk-ip-setting{display:grid;gap:6px}
-.rk-ip-setting-note{font-weight:600;color:var(--rk-text-faint)}
-.rk-ip-input{width:100%;padding:9px 11px;font:inherit;font-size:13px;color:var(--rk-ink);border:1px solid var(--rk-border-strong);border-radius:var(--rk-r-lg);background:#fff;outline:0}
-.rk-ip-input:focus{border-color:var(--rk-gold-600);box-shadow:0 0 0 3px var(--rk-gold-tint)}
-@keyframes rk-clp-fade{from{opacity:0}to{opacity:1}}
-
-/* past-sessions left slide-in panel (shared look with /tools/image) */
-.rk-ip-sessions{position:fixed;left:0;top:0;bottom:0;z-index:96;width:min(320px,86vw);display:flex;flex-direction:column;background:var(--rk-surface);border-right:1px solid var(--rk-border);box-shadow:var(--rk-shadow-xl,var(--rk-shadow-card));transform:translateX(-100%);transition:transform var(--rk-dur) var(--rk-ease)}
-.rk-ip-sessions.is-open{transform:none}
-.rk-ip-sessions-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 14px 10px;border-bottom:1px solid var(--rk-border)}
-.rk-ip-sessions-title{font-family:var(--rk-font-display);font-weight:800;font-size:14px;color:var(--rk-ink)}
-.rk-ip-sessions-list{flex:1;min-height:0;overflow-y:auto;padding:8px;display:grid;gap:4px;align-content:start}
-.rk-ip-sessions-empty{font-size:12.5px;color:var(--rk-text-faint);padding:16px 8px;text-align:center;line-height:1.4}
-.rk-ip-session{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px;padding:7px;border:1px solid transparent;border-radius:var(--rk-r-lg);background:transparent;cursor:pointer;text-align:left;font:inherit;width:100%}
-.rk-ip-session:hover{background:var(--rk-n-50)}
-.rk-ip-session.is-active{background:var(--rk-gold-tint);border-color:var(--rk-gold-600)}
-.rk-ip-session-thumb{width:44px;height:44px;border:1px solid var(--rk-border);border-radius:var(--rk-r-md,8px);object-fit:cover;background:var(--rk-n-200)}
-.rk-ip-session-thumb.is-empty{display:grid;place-items:center;color:var(--rk-text-faint)}
-.rk-ip-session-meta{min-width:0;display:grid;gap:3px}
-.rk-ip-session-title{min-width:0;color:var(--rk-ink);font-size:12.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.rk-ip-session-sub{min-width:0;color:var(--rk-text-muted);font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.rk-ip-sessions-backdrop{position:fixed;inset:0;z-index:95;background:rgba(28,25,23,.34)}
-.rk-ip-sessions-backdrop[hidden]{display:none}
-
-@media(max-width:960px){.rk-clp-workbench{grid-template-columns:1fr}.rk-clp-side{position:static}}
-`;
-    return reskinDocument({
-        title: "vidfarm — Clip Media",
-        description: "Cut exact subranges out of any video or audio straight into your raws library — preview from the source, drag 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 AUDIO_ONLY_KEY = "vf_clipper_audio_only";
-
-  var sourceBar = document.querySelector(".rk-clp-sourcebar");
-  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 audioPoster = document.querySelector("[data-clp-audio-poster]");
-  var controls = document.querySelector("[data-clp-controls]");
-  var playpause = document.querySelector("[data-clp-playpause]");
-  var timecodeNow = document.querySelector("[data-clp-timecode]");
-  var durationEl = document.querySelector("[data-clp-duration]");
-  var track = document.querySelector("[data-clp-tl-track]");
-  var selEl = document.querySelector("[data-clp-tl-sel]");
-  var playhead = document.querySelector("[data-clp-tl-playhead]");
-  var handleIn = document.querySelector("[data-clp-tl-in]");
-  var handleOut = document.querySelector("[data-clp-tl-out]");
-  var startInput = document.querySelector("[data-clp-start-input]");
-  var endInput = document.querySelector("[data-clp-end-input]");
-  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 advToggle = document.querySelector("[data-clp-adv-toggle]");
-  var advBody = document.querySelector("[data-clp-adv-body]");
-  var nameInput = document.querySelector("[data-clp-name]");
-  var notesInput = document.querySelector("[data-clp-notes]");
-  var folderInput = document.querySelector("[data-clp-folder]");
-  var audioOnlyInput = document.querySelector("[data-clp-audio-only]");
-  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 isAudioSource = false;    // heuristic: source looks like audio
-  var durationSec = 0;
-  var startSec = 0;
-  var endSec = 0;
-  var sessionTracer = "";
-  var tracerAutoPending = true;
-  var dragging = null;          // "in" | "out" | null
-
-  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]; }
-    else if(parts.length === 3){ m=+parts[0]; s=+parts[1]; }
-    else if(parts.length === 2){ s=+parts[0]; }
-    else { s=+parts[0]; }
-    if([h,m,s].some(function(n){ return isNaN(n); })) return NaN;
-    if(parts.length >= 2){ var last = parts[parts.length-1]||""; var div = Math.pow(10, last.length||4); frac = (+last)/div; if(isNaN(frac)) 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 looksAudio(u){ return /\\.(mp3|m4a|aac|wav|ogg|oga|flac|opus)(\\?|#|$)/i.test(String(u||"")); }
-
-  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 / session id ──
-  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;
-  }
-  // Always return a concrete session id — never leave the tracer unset at save time.
-  function ensureTracer(){
-    var t = resolveTracer();
-    if(tracerAutoPending || !t){ t = nameTracerFromSeed(sourceName || "clip"); }
-    return t;
-  }
-  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(controls) controls.hidden = false; }
-  function clearSourceObjectUrl(){ if(sourceObjectUrl){ try { URL.revokeObjectURL(sourceObjectUrl); } catch(_){} sourceObjectUrl=""; } }
-  function applyAudioPoster(){
-    // Once a frame is decoded (readyState>=2) a real video reports videoWidth>0;
-    // a frameless source (audio) never does → treat it as audio and force the
-    // audio-only clip mode (a "video" trim of a frameless source is meaningless).
-    if(video && video.readyState >= 2 && (!video.videoWidth || !video.videoHeight)){
-      isAudioSource = true;
-      if(audioOnlyInput && !audioOnlyInput.checked){ audioOnlyInput.checked = true; refreshSaveLabel(); }
-    }
-    var showPoster = isAudioSource || (video && video.readyState >= 1 && (!video.videoWidth || !video.videoHeight));
-    if(audioPoster) audioPoster.hidden = !showPoster;
-  }
-
-  function playSrc(url){
-    if(!video) return;
-    try { video.pause(); } catch(_){}
-    video.src = url;
-    video.load();
-    revealPlayer();
-    applyAudioPoster();
-  }
-
-  // Toggle the ingest controls off while a URL is resolving.
-  function setSourceLoading(on){
-    if(sourceBar) sourceBar.classList.toggle("is-loading", !!on);
-    if(loadBtn){ loadBtn.setAttribute("data-loading", on?"true":"false"); loadBtn.disabled = !!on; loadBtn.textContent = on ? "Loading\\u2026" : "Load"; }
-    if(uploadBtn) uploadBtn.disabled = !!on;
-    if(attachBtn) attachBtn.disabled = !!on;
-  }
-
-  // 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 media 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();
-    isAudioSource = looksAudio(u);
-    setSourceLoading(true);
-    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 source.");
-        previewUrl = res.p.preview_url;
-        if(res.p.title && !sourceName) sourceName = res.p.title;
-        if(looksAudio(previewUrl)) isAudioSource = true;
-        if(tracerAutoPending) nameTracerFromSeed(sourceName || "clip");
-        playSrc(previewUrl);
-        setStatus("Loaded \\u2014 drag the in/out edges on the timeline.", "success");
-      })
-      .catch(function(err){ setStatus(err && err.message ? err.message : "Could not load that source.", "error"); })
-      .then(function(){ setSourceLoading(false); });
-  }
-
-  function loadLocalFile(file){
-    if(!file) return;
-    clearSourceObjectUrl();
-    sourceObjectUrl = URL.createObjectURL(file);
-    previewUrl = ""; sourceName = file.name || "upload.mp4"; sourceUrl = ""; uploadTempFileId = "";
-    isAudioSource = /^audio\\//i.test(file.type||"") || looksAudio(file.name);
-    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 drag the in/out edges on the timeline.", "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 + timeline sync ──
-  function clamp(v, lo, hi){ return Math.max(lo, Math.min(hi, v)); }
-  function pctOf(sec){ return durationSec > 0 ? clamp(sec/durationSec, 0, 1) : 0; }
-  function renderTimeline(){
-    if(!durationSec || durationSec <= 0){
-      if(selEl){ selEl.style.left="0"; selEl.style.width="100%"; }
-      if(handleIn) handleIn.style.left="0%";
-      if(handleOut) handleOut.style.left="100%";
-      return;
-    }
-    var a = pctOf(startSec)*100, b = pctOf(endSec)*100;
-    if(selEl){ selEl.style.left = a+"%"; selEl.style.width = Math.max(0, b-a)+"%"; }
-    if(handleIn) handleIn.style.left = a+"%";
-    if(handleOut) handleOut.style.left = b+"%";
-  }
-  function renderPlayhead(){
-    if(!playhead) return;
-    playhead.style.left = (pctOf(video ? (video.currentTime||0) : 0)*100)+"%";
-  }
-  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);
-    var len = endSec - startSec;
-    if(lengthEl) lengthEl.textContent = fmtLen(Math.max(0, len)) + " (" + Math.max(0, len).toFixed(2) + "s)";
-    renderTimeline();
-    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 source."); }
-    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(); }
-
-  // Seek to a time and reflect the playhead / timecode.
-  function seekTo(sec){ if(!video || durationSec<=0) return; video.currentTime = clamp(sec, 0, durationSec); syncNow(); }
-
-  function secFromPointer(clientX){
-    if(!track || durationSec<=0) return 0;
-    var r = track.getBoundingClientRect();
-    var pct = r.width>0 ? clamp((clientX - r.left)/r.width, 0, 1) : 0;
-    return pct * durationSec;
-  }
-
-  // Timeline pointer interactions: click track = seek; drag handle = set in/out.
-  function onTrackPointerDown(e){
-    if(durationSec<=0) return;
-    var t = e.target;
-    if(t === handleIn || (handleIn && handleIn.contains(t))){ beginDrag("in", e); return; }
-    if(t === handleOut || (handleOut && handleOut.contains(t))){ beginDrag("out", e); return; }
-    seekTo(secFromPointer(e.clientX));
-  }
-  function beginDrag(which, e){
-    dragging = which;
-    var h = which==="in" ? handleIn : handleOut;
-    if(h) h.classList.add("is-drag");
-    e.preventDefault();
-    window.addEventListener("pointermove", onDragMove);
-    window.addEventListener("pointerup", onDragEnd);
-  }
-  function onDragMove(e){
-    if(!dragging) return;
-    var sec = secFromPointer(e.clientX);
-    if(dragging==="in"){ setStart(sec); seekTo(sec); }
-    else { setEnd(sec); seekTo(sec); }
-  }
-  function onDragEnd(){
-    if(handleIn) handleIn.classList.remove("is-drag");
-    if(handleOut) handleOut.classList.remove("is-drag");
-    dragging = null;
-    window.removeEventListener("pointermove", onDragMove);
-    window.removeEventListener("pointerup", onDragEnd);
-  }
-
-  // ── playback ──
-  function syncNow(){
-    if(timecodeNow && document.activeElement !== timecodeNow) timecodeNow.value = fmtTC(video ? (video.currentTime||0) : 0);
-    renderPlayhead();
-  }
-  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);
-      applyAudioPoster();
-      refreshRangeUI(); renderPlayhead();
-    });
-    video.addEventListener("loadeddata", applyAudioPoster);
-    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 file URL or upload it.", "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(){ if(!uploadBtn.disabled) fileInput.click(); }); fileInput.addEventListener("change", function(){ if(fileInput.files && fileInput.files[0]) loadLocalFile(fileInput.files[0]); }); }
-  if(attachBtn) attachBtn.addEventListener("click", function(){ if(!attachBtn.disabled) openAttach(); });
-  if(playpause) playpause.addEventListener("click", function(){ if(!video) return; if(video.paused) video.play(); else video.pause(); });
-  if(timecodeNow) timecodeNow.addEventListener("change", function(){ var t = parseTC(timecodeNow.value); if(isFinite(t)) seekTo(t); });
-
-  if(track) track.addEventListener("pointerdown", onTrackPointerDown);
-  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 ? (video.currentTime||0) : 0); });
-  if(setEndBtn) setEndBtn.addEventListener("click", function(){ setEnd(video ? (video.currentTime||0) : 0); });
-  if(wholeBtn) wholeBtn.addEventListener("click", function(){ startSec = 0; endSec = durationSec || 0; refreshRangeUI(); });
-
-  // ── advanced toggle + sticky audio-only ──
-  if(advToggle && advBody){
-    advToggle.addEventListener("click", function(){
-      var open = advBody.hidden;
-      advBody.hidden = !open;
-      advToggle.setAttribute("aria-expanded", open ? "true" : "false");
-    });
-  }
-  function loadStickyAudioOnly(){
-    var v = false; try { v = localStorage.getItem(AUDIO_ONLY_KEY) === "1"; } catch(_){}
-    if(audioOnlyInput) audioOnlyInput.checked = v;
-    // If it was previously enabled, reveal Advanced so the choice is visible.
-    if(v && advBody && advToggle && advBody.hidden){ advBody.hidden = false; advToggle.setAttribute("aria-expanded","true"); }
-  }
-  if(audioOnlyInput){
-    audioOnlyInput.addEventListener("change", function(){
-      try { localStorage.setItem(AUDIO_ONLY_KEY, audioOnlyInput.checked ? "1" : "0"); } catch(_){}
-      refreshSaveLabel();
-    });
-  }
-
-  // ── clip media ──
-  function isAudioOnly(){ return !!(audioOnlyInput && audioOnlyInput.checked); }
-  function restingSaveLabel(){ return isAudioOnly() ? "Clip Audio" : "Clip Media"; }
-  function refreshSaveLabel(){ if(saveLabel && saveBtn && saveBtn.getAttribute("data-loading") !== "true") saveLabel.textContent = restingSaveLabel(); }
-  function setSaving(on){ if(saveBtn){ saveBtn.setAttribute("data-loading", on?"true":"false"); saveBtn.disabled = on; } if(saveLabel) saveLabel.textContent = on ? "Saving\\u2026" : restingSaveLabel(); }
-  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 first.", "error"); return; }
-    var tracer = ensureTracer();
-    var folder = currentFolder();
-    var payload = { start_sec: Number(startSec.toFixed(3)), end_sec: Number(endSec.toFixed(3)), tracer: tracer, session_id: tracer };
-    if(isAudioOnly()) payload.audio_only = true;
-    if(folder) payload.folder_path = folder;
-    if(nameInput && nameInput.value.trim()) payload.name = nameInput.value.trim();
-    if(notesInput && notesInput.value.trim()) payload.notes = notesInput.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;
-    var audioOnly = isAudioOnly();
-    setSaving(true); setStatus(audioOnly ? "Extracting and saving the audio\\u2026" : "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 " + (audioOnly ? "audio" : "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);
-    var kind = clip.media_kind === "audio" ? "audio" : "clip";
-    sub.textContent = (d>0 ? d.toFixed(2)+"s" : "") + (d>0 ? " · " : "") + kind;
-    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 clip your first media."; 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);
-  if(settingsModal) settingsModal.addEventListener("click", function(e){ if(e.target === settingsModal) settingsModal.hidden = true; });
-  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=""; isAudioSource=false; 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(controls) controls.hidden = true; if(audioPoster) audioPoster.hidden = true;
-    if(urlInput) urlInput.value=""; if(nameInput) nameInput.value=""; if(notesInput) notesInput.value=""; if(folderInput) folderInput.value="";
-    setSourceLoading(false);
-    refreshSaveLabel();
-    if(sessionList) sessionList.innerHTML = "<div class=\\"rk-clp-session-empty\\">No clips yet — set an in/out point and clip your first media.</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();
-  }
-
-  loadStickyAudioOnly();
-  refreshSaveLabel();
-  initFromUrl();
-})();`;
-//# sourceMappingURL=inpaint-clipper-page.js.map