@mevdragon/vidfarm-devcli 0.17.0 → 0.18.1

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

@@ -0,0 +1,547 @@
+// /reskin/inpaint — "Create Image" masked image editor, ported into the
+// farmville design system. A clean 3-column workbench (upload + prompt | canvas
+// brush mask | result + history) wired to the SAME real endpoints the live
+// /inpaint tool uses:
+//   • temp-file upload  → POST /api/v1/user/me/temporary-files/presign
+//                         → (server|direct) upload → POST /api/v1/user/me/temporary-files
+//   • provider keys     → GET  /api/v1/user/me/provider-keys
+//   • create job        → POST /api/v1/primitives/images/inpaint
+//                         body { tracer, payload:{ source_image_url, mask_url,
+//                         instruction, reference_attachments, provider?, size,
+//                         aspect_ratio?, output_format } }
+//   • poll job          → GET  /api/v1/primitives/image_inpaint/jobs/:jobId
+//
+// The masking + upload + poll logic is the proven live logic (single-mask
+// variant): the mask PNG is white with alpha holes where the user brushed
+// (destination-out), and the API treats transparent pixels as the only editable
+// region. Everything is same-origin with the session cookie. Loading / auth /
+// error states degrade gracefully; the design stays rk-* farmville.
+import { reskinDocument } from "./document.js";
+// Functional SVG glyphs (no decorative emoji).
+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 UNDO_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-1"/></svg>`;
+const CLEAR_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 6l12 12M18 6 6 18"/></svg>`;
+const SPARK_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.5l1.9 5.1 5.1 1.9-5.1 1.9L12 16.5l-1.9-5.1L5 9.5l5.1-1.9z"/></svg>`;
+const DL_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="M10 3v9"/><path d="m6.5 8.5 3.5 3.5 3.5-3.5"/><path d="M4 16h12"/></svg>`;
+export function renderReskinInpaint(input = {}) {
+    const boot = { accountId: input.accountId || "", isLoggedIn: Boolean(input.isLoggedIn) };
+    const body = `
+<main class="rk-container-wide rk-page rk-inpaint-page">
+  <div class="rk-page-head">
+    <h1 class="rk-h1">Create Image</h1>
+    <p class="rk-sub">Upload an image, brush a mask over what you want to change, describe the edit, and generate — everything outside the mask stays untouched.</p>
+  </div>
+
+  <div class="rk-inpaint-workbench">
+    <!-- LEFT: upload + prompt + brush controls -->
+    <section class="rk-inpaint-panel" aria-label="Controls">
+      <div class="rk-inpaint-block">
+        <label class="rk-label" for="rk-ip-file">Source image</label>
+        <label class="rk-inpaint-drop" id="rk-ip-drop" for="rk-ip-file">
+          <span class="rk-inpaint-drop-ic" aria-hidden="true">${UPLOAD_ICON}</span>
+          <span class="rk-inpaint-drop-main"><strong>Choose an image</strong> or drop it here</span>
+          <span class="rk-inpaint-drop-name" id="rk-ip-srcname">No image selected</span>
+          <input id="rk-ip-file" class="rk-inpaint-file" type="file" accept="image/*" />
+        </label>
+      </div>
+
+      <div class="rk-inpaint-block">
+        <label class="rk-label" for="rk-ip-prompt">What should change in the masked area?</label>
+        <textarea id="rk-ip-prompt" class="rk-textarea rk-inpaint-prompt" placeholder="e.g. replace the sky with a warm golden sunset"></textarea>
+        <span class="rk-hint">Only the pixels you brush are edited. The rest of the image is preserved.</span>
+      </div>
+
+      <div class="rk-inpaint-block">
+        <div class="rk-inpaint-brushrow">
+          <label class="rk-label" for="rk-ip-brush">Brush size</label>
+          <span class="rk-inpaint-brushval" id="rk-ip-brushval">40&nbsp;px</span>
+        </div>
+        <input id="rk-ip-brush" class="rk-inpaint-range" type="range" min="8" max="160" value="40" step="2" />
+        <div class="rk-inpaint-tools">
+          <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" id="rk-ip-undo">${UNDO_ICON} Undo</button>
+          <button type="button" class="rk-btn rk-btn-ghost rk-btn-sm" id="rk-ip-clear">${CLEAR_ICON} Clear mask</button>
+        </div>
+      </div>
+
+      <div class="rk-inpaint-block rk-inpaint-provwrap" id="rk-ip-provwrap" data-visible="false">
+        <label class="rk-label" for="rk-ip-provider">AI provider</label>
+        <select id="rk-ip-provider" class="rk-select rk-inpaint-select"><option value="">Auto</option></select>
+      </div>
+
+      <div class="rk-inpaint-keynote" id="rk-ip-keynote" hidden>
+        Add an AI provider key (OpenAI, Gemini, or OpenRouter) to generate edits.
+        <a href="/settings/developer">Open Settings</a>
+      </div>
+
+      <button type="button" class="rk-btn rk-btn-gold rk-inpaint-generate" id="rk-ip-generate" disabled>${SPARK_ICON} Generate edit</button>
+      <p class="rk-inpaint-status" id="rk-ip-status" data-tone="" aria-live="polite"></p>
+    </section>
+
+    <!-- CENTER: canvas stage -->
+    <section class="rk-inpaint-stage" aria-label="Canvas">
+      <div class="rk-inpaint-empty" id="rk-ip-empty">
+        <span class="rk-inpaint-empty-ic" aria-hidden="true">${UPLOAD_ICON}</span>
+        <p class="rk-inpaint-empty-title">Upload an image to start</p>
+        <p class="rk-inpaint-empty-sub">Then brush over the area you want the AI to change.</p>
+      </div>
+      <div class="rk-inpaint-canvaswrap" id="rk-ip-canvaswrap" hidden>
+        <img id="rk-ip-img" class="rk-inpaint-img" alt="Source image" />
+        <canvas id="rk-ip-canvas" class="rk-inpaint-canvas"></canvas>
+        <span class="rk-inpaint-cursor" id="rk-ip-cursor" hidden></span>
+      </div>
+    </section>
+
+    <!-- RIGHT: result + history -->
+    <section class="rk-inpaint-output" aria-label="Result">
+      <div class="rk-inpaint-result" id="rk-ip-result" hidden>
+        <div class="rk-inpaint-result-head">
+          <h2 class="rk-inpaint-h2">Result</h2>
+          <a class="rk-btn rk-btn-ink rk-btn-sm rk-inpaint-dl" id="rk-ip-dl" href="#" download>${DL_ICON} Download</a>
+        </div>
+        <a class="rk-inpaint-result-imgwrap" id="rk-ip-resultlink" href="#" target="_blank" rel="noopener">
+          <img id="rk-ip-resultimg" class="rk-inpaint-result-img" alt="Edited image" />
+        </a>
+      </div>
+      <div class="rk-inpaint-history">
+        <h2 class="rk-inpaint-h2">History</h2>
+        <div class="rk-inpaint-historylist" id="rk-ip-history"></div>
+      </div>
+    </section>
+  </div>
+
+  <script type="application/json" data-rk-inpaint-boot>${JSON.stringify(boot).replace(/</g, "\\u003c")}</script>
+</main>`;
+    const pageCss = `
+.rk-inpaint-page{padding-left:var(--rk-gutter);padding-right:var(--rk-gutter)}
+/* slimmer side rails so the center canvas (the primary work surface) isn't
+   starved once the 248px app sidebar is subtracted; drop the right rail under
+   the canvas sooner (≤1200) so mid-size laptops give the canvas full width. */
+.rk-inpaint-workbench{display:grid;grid-template-columns:280px minmax(0,1fr) 300px;gap:20px;align-items:start}
+@media(max-width:1200px){.rk-inpaint-workbench{grid-template-columns:280px minmax(0,1fr)}.rk-inpaint-output{grid-column:1 / -1;grid-row:2}}
+@media(max-width:820px){.rk-inpaint-workbench{grid-template-columns:1fr}.rk-inpaint-output,.rk-inpaint-stage,.rk-inpaint-panel{grid-column:auto}
+  /* stack canvas ABOVE the controls so you can paint without scrolling past Generate */
+  .rk-inpaint-stage{order:-1}}
+@media(max-height:520px){.rk-inpaint-stage{min-height:0}}
+
+/* panels (no side borders — uniform hairline) */
+.rk-inpaint-panel,.rk-inpaint-stage,.rk-inpaint-output{background:var(--rk-surface);border:1px solid var(--rk-border);border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-card)}
+.rk-inpaint-panel{padding:20px;display:grid;gap:18px;align-content:start}
+.rk-inpaint-block{display:grid;gap:9px}
+.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}
+
+/* upload dropzone */
+.rk-inpaint-drop{display:grid;justify-items:center;gap:6px;text-align:center;padding:22px 16px;cursor:pointer;
+  border:1.5px dashed var(--rk-border-strong);border-radius:var(--rk-r-2xl);background:var(--rk-n-50);color:var(--rk-text-muted);
+  transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.rk-inpaint-drop:hover,.rk-inpaint-drop.is-drag{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
+.rk-inpaint-drop-ic{color:var(--rk-gold-700);display:grid;place-items:center}
+.rk-inpaint-drop-main{font-size:13px}
+.rk-inpaint-drop-main strong{color:var(--rk-ink);font-weight:700}
+.rk-inpaint-drop-name{font-size:12px;color:var(--rk-text-faint);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.rk-inpaint-file{display:none}
+.rk-inpaint-prompt{min-height:88px}
+
+/* brush controls */
+.rk-inpaint-brushrow{display:flex;align-items:center;justify-content:space-between;gap:10px}
+.rk-inpaint-brushval{font-size:12.5px;font-weight:700;color:var(--rk-n-600);font-variant-numeric:tabular-nums}
+.rk-inpaint-range{width:100%;accent-color:var(--rk-gold-700);cursor:pointer}
+.rk-inpaint-tools{display:flex;gap:8px}
+.rk-inpaint-tools .rk-btn{flex:1;gap:6px}
+.rk-inpaint-provwrap[data-visible="false"]{display:none}
+.rk-inpaint-keynote{font-size:12.5px;color:var(--rk-text-muted);line-height:1.5;background:var(--rk-gold-tint);border:1px solid var(--rk-gold-600);border-radius:var(--rk-r-xl);padding:10px 12px}
+.rk-inpaint-keynote[hidden]{display:none}
+.rk-inpaint-keynote a{color:var(--rk-gold-700);font-weight:700}
+.rk-inpaint-generate{width:100%;justify-content:center;gap:8px;padding:13px}
+.rk-inpaint-generate:disabled{opacity:.55;cursor:default}
+.rk-inpaint-status{font-size:12.5px;font-weight:600;line-height:1.5;min-height:18px;color:var(--rk-text-muted)}
+.rk-inpaint-status[data-tone="error"]{color:#b42318}
+.rk-inpaint-status[data-tone="success"]{color:#1f7a44}
+
+/* center stage */
+.rk-inpaint-stage{min-height:420px;display:grid;place-items:center;padding:20px;overflow:hidden}
+.rk-inpaint-empty{display:grid;justify-items:center;gap:8px;text-align:center;color:var(--rk-text-muted);padding:40px 20px}
+.rk-inpaint-empty[hidden]{display:none}
+.rk-inpaint-empty-ic{color:var(--rk-n-400)}
+.rk-inpaint-empty-title{font-family:var(--rk-font-display);font-weight:800;font-size:var(--rk-text-lg);color:var(--rk-ink)}
+.rk-inpaint-empty-sub{font-size:13px}
+.rk-inpaint-canvaswrap{position:relative;display:inline-block;line-height:0;max-width:100%;border-radius:var(--rk-r-2xl);overflow:hidden;box-shadow:var(--rk-shadow-md)}
+.rk-inpaint-canvaswrap[hidden]{display:none}
+.rk-inpaint-img{display:block;max-width:100%;max-height:min(64vh,620px);width:auto;height:auto}
+.rk-inpaint-canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair;touch-action:none}
+.rk-inpaint-cursor{position:absolute;z-index:3;border:2px solid rgba(252,185,0,.95);background:rgba(252,185,0,.28);border-radius:50%;
+  pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(0,0,0,.25)}
+.rk-inpaint-cursor[hidden]{display:none}
+
+/* right: result + history */
+.rk-inpaint-output{padding:18px;display:grid;gap:18px;align-content:start}
+.rk-inpaint-result[hidden]{display:none}
+.rk-inpaint-result-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
+.rk-inpaint-dl{gap:6px}
+.rk-inpaint-result-imgwrap{display:block;border-radius:var(--rk-r-2xl);overflow:hidden;background:var(--rk-n-100);box-shadow:var(--rk-shadow-sm)}
+.rk-inpaint-result-img{display:block;width:100%;height:auto}
+.rk-inpaint-historylist{display:grid;gap:10px;margin-top:10px}
+.rk-inpaint-hitem{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--rk-border);border-radius:var(--rk-r-xl);background:var(--rk-n-50)}
+.rk-inpaint-hthumb{width:52px;height:52px;flex:none;border-radius:var(--rk-r-lg);overflow:hidden;background:var(--rk-n-200);display:grid;place-items:center}
+.rk-inpaint-hthumb img{width:100%;height:100%;object-fit:cover}
+.rk-inpaint-hspin{width:20px;height:20px;border-radius:50%;border:3px solid var(--rk-gold-tint2);border-top-color:var(--rk-gold-700);animation:rk-ip-spin .8s linear infinite}
+@keyframes rk-ip-spin{to{transform:rotate(360deg)}}
+.rk-inpaint-hmain{flex:1;min-width:0;display:grid;gap:2px}
+.rk-inpaint-htitle{font-size:12.5px;font-weight:700;color:var(--rk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-inpaint-hsub{font-size:11.5px;color:var(--rk-text-muted)}
+.rk-inpaint-hdl{flex:none;color:var(--rk-gold-700);display:grid;place-items:center;width:30px;height:30px;border-radius:var(--rk-r-lg);border:1px solid var(--rk-border);background:#fff}
+.rk-inpaint-hdl:hover{background:var(--rk-gold-tint)}
+.rk-inpaint-hempty{font-size:12.5px;color:var(--rk-text-faint);padding:14px 4px;text-align:center}
+`;
+    const script = `
+(function(){
+  var root=document;
+  var boot={};
+  try{ var b=root.querySelector('[data-rk-inpaint-boot]'); boot=b?JSON.parse(b.textContent||'{}'):{}; }catch(e){ boot={}; }
+
+  var fileInput=root.getElementById('rk-ip-file');
+  var drop=root.getElementById('rk-ip-drop');
+  var srcName=root.getElementById('rk-ip-srcname');
+  var promptEl=root.getElementById('rk-ip-prompt');
+  var brush=root.getElementById('rk-ip-brush');
+  var brushVal=root.getElementById('rk-ip-brushval');
+  var undoBtn=root.getElementById('rk-ip-undo');
+  var clearBtn=root.getElementById('rk-ip-clear');
+  var provWrap=root.getElementById('rk-ip-provwrap');
+  var provSelect=root.getElementById('rk-ip-provider');
+  var keyNote=root.getElementById('rk-ip-keynote');
+  var generate=root.getElementById('rk-ip-generate');
+  var statusEl=root.getElementById('rk-ip-status');
+  var emptyState=root.getElementById('rk-ip-empty');
+  var canvasWrap=root.getElementById('rk-ip-canvaswrap');
+  var img=root.getElementById('rk-ip-img');
+  var canvas=root.getElementById('rk-ip-canvas');
+  var cursor=root.getElementById('rk-ip-cursor');
+  var resultBox=root.getElementById('rk-ip-result');
+  var resultImg=root.getElementById('rk-ip-resultimg');
+  var resultLink=root.getElementById('rk-ip-resultlink');
+  var resultDl=root.getElementById('rk-ip-dl');
+  var historyList=root.getElementById('rk-ip-history');
+
+  var MASK_COLOR='rgba(252,185,0,0.55)';
+  var sourceUrl='';
+  var strokes=[];        // [{size, points:[{x,y}]}]
+  var current=null;
+  var painting=false;
+  var busy=false;
+  var historyItems=[];   // [{kind:'pending'|'output', jobId, url, createdAt, status, progress}]
+
+  function setStatus(msg,tone){ if(!statusEl) return; statusEl.textContent=msg||''; statusEl.setAttribute('data-tone',tone||''); }
+  function absUrl(v){ try{ return new URL(v, window.location.href).toString(); }catch(e){ return v; } }
+  function parseJson(r){ return r.json().catch(function(){ return {}; }); }
+  function tracerId(){ return 'reskin-inpaint-'+Date.now().toString(36)+'-'+Math.floor(Math.random()*1e6).toString(36); }
+
+  function canGenerate(){ return Boolean(sourceUrl) && strokes.length>0 && !busy; }
+  function syncGenerate(){ if(generate) generate.disabled=!canGenerate(); }
+
+  // ── canvas mask ──────────────────────────────────────────────────────────
+  function redraw(){
+    var ctx=canvas.getContext('2d'); if(!ctx) return;
+    ctx.clearRect(0,0,canvas.width,canvas.height);
+    ctx.lineCap='round'; ctx.lineJoin='round'; ctx.globalAlpha=1; ctx.strokeStyle=MASK_COLOR;
+    for(var s=0;s<strokes.length;s++){
+      var st=strokes[s]; if(!st.points.length) continue;
+      ctx.lineWidth=st.size; ctx.beginPath(); ctx.moveTo(st.points[0].x,st.points[0].y);
+      if(st.points.length===1){ ctx.lineTo(st.points[0].x+0.01,st.points[0].y+0.01); }
+      else { for(var i=1;i<st.points.length;i++){ ctx.lineTo(st.points[i].x,st.points[i].y); } }
+      ctx.stroke();
+    }
+  }
+  function syncCanvasSize(){
+    if(!img.naturalWidth||!img.naturalHeight) return;
+    if(canvas.width!==img.naturalWidth||canvas.height!==img.naturalHeight){
+      canvas.width=img.naturalWidth; canvas.height=img.naturalHeight; redraw();
+    }
+  }
+  function pointOf(e){
+    var rect=canvas.getBoundingClientRect();
+    return {
+      x:Math.max(0,Math.min(canvas.width,(e.clientX-rect.left)*(canvas.width/rect.width))),
+      y:Math.max(0,Math.min(canvas.height,(e.clientY-rect.top)*(canvas.height/rect.height)))
+    };
+  }
+  function resetMask(){ strokes=[]; current=null; painting=false; redraw(); syncGenerate(); }
+
+  canvas.addEventListener('pointerdown',function(e){
+    if(!sourceUrl||busy) return;
+    e.preventDefault();
+    try{ canvas.setPointerCapture(e.pointerId); }catch(_){}
+    painting=true;
+    current={ size:Number(brush.value)||40, points:[pointOf(e)] };
+    strokes.push(current); redraw(); syncGenerate();
+  });
+  canvas.addEventListener('pointermove',function(e){
+    moveCursor(e);
+    if(!painting||!current) return;
+    e.preventDefault();
+    current.points.push(pointOf(e)); redraw();
+  });
+  function endStroke(e){ if(!painting) return; painting=false; current=null; try{ canvas.releasePointerCapture(e.pointerId); }catch(_){} }
+  canvas.addEventListener('pointerup',endStroke);
+  canvas.addEventListener('pointercancel',endStroke);
+  canvas.addEventListener('pointerleave',function(){ if(cursor) cursor.hidden=true; });
+
+  // brush cursor preview
+  function cursorPx(){
+    if(!img.naturalWidth) return Number(brush.value)||40;
+    var rect=canvas.getBoundingClientRect();
+    return (Number(brush.value)||40)*(rect.width/canvas.width);
+  }
+  function moveCursor(e){
+    if(!cursor||!sourceUrl) return;
+    var wrapRect=canvasWrap.getBoundingClientRect();
+    var d=cursorPx();
+    cursor.hidden=false;
+    cursor.style.width=d+'px'; cursor.style.height=d+'px';
+    cursor.style.left=(e.clientX-wrapRect.left)+'px';
+    cursor.style.top=(e.clientY-wrapRect.top)+'px';
+  }
+
+  if(brush) brush.addEventListener('input',function(){ if(brushVal) brushVal.innerHTML=(brush.value)+'&nbsp;px'; });
+  if(undoBtn) undoBtn.addEventListener('click',function(){ strokes.pop(); redraw(); syncGenerate(); });
+  if(clearBtn) clearBtn.addEventListener('click',function(){ resetMask(); });
+
+  // ── mask blob: white + destination-out holes where painted ────────────────
+  function maskBlob(){
+    return new Promise(function(resolve,reject){
+      var m=document.createElement('canvas'); m.width=canvas.width; m.height=canvas.height;
+      var ctx=m.getContext('2d'); if(!ctx){ reject(new Error('Unable to prepare mask image.')); return; }
+      ctx.fillStyle='#ffffff'; ctx.fillRect(0,0,m.width,m.height);
+      ctx.globalCompositeOperation='destination-out'; ctx.lineCap='round'; ctx.lineJoin='round'; ctx.strokeStyle='rgba(0,0,0,1)';
+      for(var s=0;s<strokes.length;s++){
+        var st=strokes[s]; if(!st.points.length) continue;
+        ctx.lineWidth=st.size; ctx.beginPath(); ctx.moveTo(st.points[0].x,st.points[0].y);
+        if(st.points.length===1){ ctx.lineTo(st.points[0].x+0.01,st.points[0].y+0.01); }
+        else { for(var i=1;i<st.points.length;i++){ ctx.lineTo(st.points[i].x,st.points[i].y); } }
+        ctx.stroke();
+      }
+      m.toBlob(function(blob){ blob?resolve(blob):reject(new Error('Unable to prepare mask image.')); },'image/png');
+    });
+  }
+  function aspectRatio(){
+    var w=canvas.width||img.naturalWidth||0, h=canvas.height||img.naturalHeight||0;
+    if(!w||!h) return '';
+    var r=w/h;
+    if(Math.abs(r-1)<0.08) return '1:1';
+    if(r>1) return r>=1.55?'16:9':'4:3';
+    return r<=0.65?'9:16':'3:4';
+  }
+  function buildInstruction(){
+    var p=(promptEl.value||'').trim();
+    if(!p) return '';
+    return [
+      'INPAINTING SYSTEM WRAPPER:',
+      'You are editing an existing image with an alpha mask. Treat transparent mask pixels as the only editable region. Everything outside the mask must remain the same image: preserve identity, layout, pose, camera angle, framing, background, lighting, colors, textures, text, logos, and all unmasked details.',
+      'Do not redraw, reinterpret, beautify, crop, zoom, rotate, expand, or stylize unmasked content. Keep the original dimensions and aspect ratio.',
+      'Edit only the masked region to: '+p+'. Match the surrounding perspective, lighting, grain, shadows, and edge blending.'
+    ].join(' ');
+  }
+
+  // ── temp-file upload (presign → upload → finalize) ────────────────────────
+  function uploadTemp(blob,fileName,contentType){
+    return fetch('/api/v1/user/me/temporary-files/presign',{
+      method:'POST',credentials:'same-origin',headers:{'content-type':'application/json'},
+      body:JSON.stringify({ file_name:fileName, content_type:contentType, size_bytes:blob.size, folder_path:'inpaint' })
+    }).then(parseJson).then(function(pre){
+      if(!pre||!pre.transport){ throw new Error((pre&&pre.error)||'Unable to prepare upload.'); }
+      if(pre.transport==='server'){
+        var fd=new FormData();
+        fd.append((pre.upload&&pre.upload.form_field)||'file', new File([blob],fileName,{type:contentType}));
+        fd.append('folder_path','inpaint');
+        return fetch((pre.upload&&pre.upload.url)||'/api/v1/user/me/temporary-files/upload',{
+          method:(pre.upload&&pre.upload.method)||'POST',credentials:'same-origin',body:fd
+        }).then(parseJson).then(function(up){
+          if(!up||!up.file){ throw new Error((up&&up.error)||'Unable to upload file.'); }
+          return up.file.viewUrl||up.file.view_url||up.file.s3Url||up.file.s3_url;
+        });
+      }
+      return fetch(pre.upload.url,{ method:pre.upload.method, headers:pre.upload.headers, body:blob }).then(function(r){
+        if(!r.ok) throw new Error('Upload failed with status '+r.status+'.');
+        return fetch('/api/v1/user/me/temporary-files',{
+          method:'POST',credentials:'same-origin',headers:{'content-type':'application/json'},
+          body:JSON.stringify({ file_id:pre.file_id, file_name:pre.file_name, content_type:pre.content_type, size_bytes:blob.size, storage_key:pre.storage_key, folder_path:pre.folder_path||'inpaint' })
+        }).then(parseJson).then(function(fin){
+          if(!fin||!fin.file){ throw new Error((fin&&fin.error)||'Unable to save file.'); }
+          return fin.file.viewUrl||fin.file.view_url||fin.file.s3Url||fin.file.s3_url;
+        });
+      });
+    });
+  }
+
+  function loadSourceFile(file){
+    if(!file||!/^image\\//.test(file.type||'')){ setStatus('Choose an image file.','error'); return; }
+    if(generate) generate.disabled=true;
+    setStatus('Uploading source image\\u2026','');
+    uploadTemp(file, file.name||'source.png', file.type||'image/png').then(function(url){
+      sourceUrl=absUrl(url);
+      if(srcName) srcName.textContent=file.name||'Source image';
+      if(emptyState) emptyState.hidden=true;
+      if(canvasWrap) canvasWrap.hidden=false;
+      if(resultBox) resultBox.hidden=true;
+      resetMask();
+      img.onload=function(){ syncCanvasSize(); resetMask(); };
+      img.src=sourceUrl;
+      setStatus('Source ready. Brush the area to change.','success');
+    }).catch(function(err){
+      setStatus((err&&err.message)?err.message:'Unable to upload source image.','error');
+    }).then(function(){ syncGenerate(); });
+  }
+
+  if(fileInput) fileInput.addEventListener('change',function(){ if(fileInput.files&&fileInput.files[0]) loadSourceFile(fileInput.files[0]); });
+  if(drop){
+    ['dragenter','dragover'].forEach(function(ev){ drop.addEventListener(ev,function(e){ e.preventDefault(); drop.classList.add('is-drag'); }); });
+    ['dragleave','drop'].forEach(function(ev){ drop.addEventListener(ev,function(e){ e.preventDefault(); drop.classList.remove('is-drag'); }); });
+    drop.addEventListener('drop',function(e){ var f=e.dataTransfer&&e.dataTransfer.files&&e.dataTransfer.files[0]; if(f) loadSourceFile(f); });
+  }
+
+  // ── provider keys ─────────────────────────────────────────────────────────
+  function loadProviders(){
+    fetch('/api/v1/user/me/provider-keys',{credentials:'same-origin'}).then(function(r){ return r.ok?parseJson(r):null; }).then(function(j){
+      if(!j){ return; }
+      var supported={openai:1,gemini:1,openrouter:1}; var seen={}; var providers=[];
+      var keys=Array.isArray(j.provider_keys)?j.provider_keys:[];
+      for(var i=0;i<keys.length;i++){
+        var p=String(keys[i].provider||''); var status=String(keys[i].status||'active');
+        var cd=keys[i].cooldown_until?Date.parse(String(keys[i].cooldown_until)):0;
+        if(!supported[p]||status!=='active'||(cd&&cd>Date.now())||seen[p]) continue;
+        seen[p]=1; providers.push(p);
+      }
+      if(provSelect){
+        provSelect.innerHTML='<option value="">Auto</option>'+providers.map(function(p){ return '<option value="'+p+'">'+p.charAt(0).toUpperCase()+p.slice(1)+'</option>'; }).join('');
+      }
+      if(provWrap) provWrap.setAttribute('data-visible', providers.length>1?'true':'false');
+      if(keyNote) keyNote.hidden=providers.length>0;
+    }).catch(function(){});
+  }
+
+  // ── history ────────────────────────────────────────────────────────────────
+  function renderHistory(){
+    if(!historyList) return;
+    if(!historyItems.length){ historyList.innerHTML='<div class="rk-inpaint-hempty">No edits yet.</div>'; return; }
+    historyList.innerHTML='';
+    historyItems.forEach(function(it){
+      var row=document.createElement('div'); row.className='rk-inpaint-hitem';
+      var thumb=document.createElement('div'); thumb.className='rk-inpaint-hthumb';
+      if(it.kind==='pending'){ thumb.innerHTML='<span class="rk-inpaint-hspin" aria-hidden="true"></span>'; }
+      else { var im=document.createElement('img'); im.src=it.url; im.alt='Edit output'; im.loading='lazy'; thumb.appendChild(im); }
+      var main=document.createElement('div'); main.className='rk-inpaint-hmain';
+      var t=document.createElement('div'); t.className='rk-inpaint-htitle';
+      t.textContent=it.kind==='pending'?'Generating\\u2026':(it.createdAt?new Date(it.createdAt).toLocaleTimeString([], {hour:'numeric',minute:'2-digit'}):'Edit output');
+      var sub=document.createElement('div'); sub.className='rk-inpaint-hsub';
+      sub.textContent=it.kind==='pending'?('Job '+(it.status||'running')+(it.progress>0?(' \\u00b7 '+Math.round(it.progress*100)+'%'):'')):'Ready';
+      main.appendChild(t); main.appendChild(sub);
+      row.appendChild(thumb); row.appendChild(main);
+      if(it.kind==='output'&&it.url){
+        var dl=document.createElement('a'); dl.className='rk-inpaint-hdl'; dl.href=it.url; dl.target='_blank'; dl.rel='noopener';
+        dl.setAttribute('download','inpaint-'+(it.jobId||'output')+'.png'); dl.setAttribute('aria-label','Download'); dl.innerHTML=${JSON.stringify(DL_ICON)};
+        row.appendChild(dl);
+      }
+      historyList.appendChild(row);
+    });
+  }
+  function upsertPending(jobId,status,progress){
+    if(!jobId) return;
+    historyItems=historyItems.filter(function(x){ return x.jobId!==jobId; });
+    historyItems.unshift({ kind:'pending', jobId:jobId, status:status||'queued', progress:progress||0, createdAt:new Date().toISOString() });
+    renderHistory();
+  }
+  function upsertOutput(jobId,url){
+    historyItems=historyItems.filter(function(x){ return x.jobId!==jobId; });
+    historyItems.unshift({ kind:'output', jobId:jobId, url:url, createdAt:new Date().toISOString() });
+    renderHistory();
+  }
+
+  function extractOutput(payload){
+    var r=(payload&&payload.result)?payload.result:{};
+    return (r.output&&r.output.image&&r.output.image.file_url)
+      ||(r.output&&r.output.primary_file_url)
+      ||(r.image&&r.image.file_url)
+      ||r.primary_file_url
+      ||(r.output&&Array.isArray(r.output.files)?r.output.files[0]:'')
+      ||(Array.isArray(r.files)?r.files[0]:'')
+      ||'';
+  }
+  function applyCompleted(payload){
+    var out=extractOutput(payload); if(!out) return '';
+    var url=absUrl(out); var jobId=String((payload&&(payload.job_id||payload.jobId))||'');
+    if(resultImg) resultImg.src=url;
+    if(resultLink) resultLink.href=url;
+    if(resultDl){ resultDl.href=url; resultDl.setAttribute('download','inpaint-'+Date.now()+'.png'); }
+    if(resultBox) resultBox.hidden=false;
+    upsertOutput(jobId||'inpaint', url);
+    return url;
+  }
+
+  function pollJob(jobId){
+    var attempt=0;
+    function step(){
+      return fetch('/api/v1/primitives/image_inpaint/jobs/'+encodeURIComponent(jobId),{credentials:'same-origin'}).then(function(r){
+        return parseJson(r).then(function(payload){
+          if(!r.ok) throw new Error(payload.error||'Unable to poll image edit job.');
+          if(payload.status==='failed'||payload.status==='cancelled'){ throw new Error((payload.error&&payload.error.message)||('Image edit job '+payload.status+'.')); }
+          var out=extractOutput(payload);
+          if(payload.status==='succeeded'||payload.status==='complete'||out){
+            if(!out) throw new Error('Image edit completed without an output URL.');
+            applyCompleted(payload); setStatus('Image edit complete.','success'); return out;
+          }
+          upsertPending(jobId,payload.status,Number(payload.progress||0));
+          setStatus('Image edit job is '+(payload.status||'running')+'\\u2026','');
+          attempt++;
+          if(attempt>=90){ setStatus('Still running \\u2014 check back shortly.',''); return null; }
+          return new Promise(function(res){ setTimeout(res, attempt<8?1500:3000); }).then(step);
+        });
+      });
+    }
+    return step();
+  }
+
+  function submit(){
+    if(!canGenerate()){
+      if(!sourceUrl) setStatus('Upload a source image first.','error');
+      else if(!strokes.length) setStatus('Brush at least one mask region.','error');
+      return;
+    }
+    if(!(promptEl.value||'').trim()){ setStatus('Describe what should change in the masked area.','error'); return; }
+    var instruction=buildInstruction(); if(!instruction){ setStatus('Describe what should change in the masked area.','error'); return; }
+    busy=true; syncGenerate();
+    setStatus('Uploading mask\\u2026','');
+    maskBlob().then(function(blob){ return uploadTemp(blob,'inpaint-mask-'+Date.now()+'.png','image/png'); }).then(function(maskUrl){
+      setStatus('Creating image edit job\\u2026','');
+      var payload={ source_image_url:sourceUrl, mask_url:absUrl(maskUrl), instruction:instruction, reference_attachments:[], size:'auto', output_format:'png' };
+      if(provSelect&&provSelect.value) payload.provider=provSelect.value;
+      var ar=aspectRatio(); if(ar) payload.aspect_ratio=ar;
+      return fetch('/api/v1/primitives/images/inpaint',{
+        method:'POST',credentials:'same-origin',headers:{'content-type':'application/json'},
+        body:JSON.stringify({ tracer:tracerId(), payload:payload })
+      }).then(parseJson).then(function(j){
+        if(!j||!j.job_id){ throw new Error((j&&j.error)||'Unable to create image edit job.'); }
+        setStatus('Image edit job started\\u2026','success');
+        upsertPending(j.job_id,'queued',0);
+        return pollJob(j.job_id);
+      });
+    }).catch(function(err){
+      var msg=(err&&err.message)?err.message:'Unable to create image edit.';
+      if(/401|403|sign in|unauth/i.test(msg)) msg='Sign in to generate edits.';
+      setStatus(msg,'error');
+    }).then(function(){ busy=false; syncGenerate(); });
+  }
+  if(generate) generate.addEventListener('click',submit);
+
+  renderHistory();
+  loadProviders();
+  syncGenerate();
+})();`;
+    return reskinDocument({
+        title: "vidfarm reskin — Create Image",
+        description: "Reskinned vidfarm masked image editor — upload, brush a mask, describe the edit, and generate on your own AI keys.",
+        activeSlug: "inpaint",
+        pageCss,
+        body,
+        script
+    });
+}
+//# sourceMappingURL=inpaint-page.js.map