@mevdragon/vidfarm-devcli 0.18.0 → 0.19.0

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

@@ -118,7 +118,7 @@ export function renderReskinLogin(input = {}) {
     <span class="rk-login-blob rk-login-blob-b"></span>
     <div class="rk-login-art-inner">
       <a class="rk-brand rk-login-brand" href="/">
-        <span class="rk-brand-mark">V</span>vidfarm
+        <span class="rk-brand-mark">V</span>VidFarm
       </a>
       <div class="rk-login-art-copy">
         <h1 class="rk-login-hed">A week of content, made in an afternoon.</h1>
@@ -142,7 +142,7 @@ export function renderReskinLogin(input = {}) {
   <div class="rk-login-pane">
     <div class="rk-login-card">
       <a class="rk-brand rk-login-card-brand" href="/">
-        <span class="rk-brand-mark">V</span>vidfarm
+        <span class="rk-brand-mark">V</span>VidFarm
       </a>
 
       <div class="rk-login-head">
@@ -159,13 +159,13 @@ export function renderReskinLogin(input = {}) {
   </div>
 </main>`;
     const pageCss = `
-.rk-login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;
+.rk-login{min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;
   background:radial-gradient(120% 90% at 100% 0%,var(--rk-gold-tint) 0%,transparent 55%),var(--rk-bg)}
-@media(max-width:920px){.rk-login{grid-template-columns:1fr}}
+@media(max-width:920px),(max-height:600px){.rk-login{grid-template-columns:1fr}}
 
 /* ── left: sunlit brand / marketing panel ── */
 .rk-login-art{position:relative;overflow:hidden;display:flex;padding:56px clamp(2rem,4vw,4rem)}
-@media(max-width:920px){.rk-login-art{display:none}}
+@media(max-width:920px),(max-height:600px){.rk-login-art{display:none}}
 .rk-login-art-sky{position:absolute;inset:0;z-index:0;background:
   radial-gradient(72% 55% at 22% 12%,rgba(255,244,214,.96),transparent 62%),
   radial-gradient(60% 55% at 92% 96%,rgba(255,199,56,.42),transparent 60%),
@@ -203,7 +203,7 @@ export function renderReskinLogin(input = {}) {
 .rk-login-card{width:100%;max-width:412px;background:var(--rk-surface);border:1px solid var(--rk-border);
   border-radius:var(--rk-r-3xl);padding:clamp(28px,3vw,40px);box-shadow:var(--rk-shadow-xl);display:grid;gap:22px}
 .rk-login-card-brand{display:none;font-size:20px}
-@media(max-width:920px){.rk-login-card-brand{display:inline-flex;justify-self:center}}
+@media(max-width:920px),(max-height:600px){.rk-login-card-brand{display:inline-flex;justify-self:center}}
 .rk-login-head{display:grid;gap:6px;text-align:center}
 .rk-login-title{font-size:var(--rk-text-3xl);letter-spacing:-.03em}
 .rk-login-flash{font-size:13px;padding:11px 14px}

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

@@ -329,6 +329,7 @@ export function renderReskinPricing(input) {
 
 /* credit strip */
 .rk-pricing-credits{padding:34px;background:linear-gradient(180deg,#fff 0%,var(--rk-n-50) 100%)}
+@media(max-width:560px){.rk-pricing-credits{padding:22px 16px}}
 .rk-pricing-credits-head{max-width:680px;margin-bottom:26px;display:grid;gap:8px}
 .rk-pricing-credits-head h2{font-size:var(--rk-text-3xl);letter-spacing:-.02em}
 .rk-pricing-credits-head p{font-size:15px;line-height:1.55}
@@ -381,6 +382,7 @@ export function renderReskinPricing(input) {
         title: "vidfarm reskin — Pricing",
         description: "Reskinned vidfarm pricing — the $99/mo Pro plan, the $0.03/credit wallet, and real Stripe checkout.",
         activeSlug: "pricing",
+        account: { email: input.email },
         pageCss,
         body
     });

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

@@ -448,20 +448,55 @@ export function renderReskinSettings(input) {
 .rk-set-explorer{border:1px solid var(--rk-border);border-radius:var(--rk-r-2xl);background:var(--rk-n-50);overflow:hidden}
 .rk-set-fx-crumbs{padding:12px 14px 8px}
 .rk-set-fx-body{max-height:360px;min-height:120px;overflow-y:auto;padding:2px 10px 12px;display:grid;gap:2px;align-content:start}
+/* a revealed API key lives in .rk-item-sub (nowrap+ellipsis), so it truncates to
+   a few chars + "…". When shown (data-rk-shown=1), let that row wrap in full. */
+.rk-set-panel .rk-item-sub:has([data-rk-shown="1"]){white-space:normal;overflow:visible;overflow-wrap:anywhere}
+/* phone portrait: the channel / key rows pack tile + status pill + Resend +
+   Remove into one non-wrapping flex row that overflows the padded card and
+   forces horizontal page scroll. Let the actions wrap under the title. */
+@media(max-width:620px){
+  .rk-set-panel .rk-item{flex-wrap:wrap}
+  .rk-set-panel .rk-item .rk-item-main{flex:1 1 100%;order:-1}
+}
+/* very narrow: let the dialog footer buttons wrap instead of cramping */
+@media(max-width:420px){
+  .rk-set-dialog-actions{flex-wrap:wrap;gap:8px}
+  .rk-set-dialog-actions .rk-btn:first-child{margin-right:0}
+}
 `;
     const script = `
 (function(){
   var root=document;
-  function show(tab){
+  // Each panel that has its own canonical URL (/settings/<tab>). "logout" is a
+  // client-only confirm panel, so it never rewrites the address bar.
+  var URL_TABS={profile:1,wallet:1,channels:1,developer:1};
+  function setUrl(tab){
+    if(!URL_TABS[tab]||!history.pushState)return;
+    try{
+      var u=new URL(window.location.href);
+      var m=u.pathname.match(/^(\\/u\\/[^/]+)\\/settings/); // preserve account scope
+      u.pathname=(m?m[1]:'')+'/settings/'+tab; u.hash='';
+      history.pushState(null,'',u.pathname+u.search);
+    }catch(e){ history.pushState(null,'','/settings/'+tab); }
+  }
+  function show(tab,opts){
     root.querySelectorAll('[data-rk-tab]').forEach(function(b){b.classList.toggle('is-active',b.getAttribute('data-rk-tab')===tab)});
     root.querySelectorAll('[data-rk-panel]').forEach(function(p){p.hidden=p.getAttribute('data-rk-panel')!==tab});
-    if(history.replaceState)history.replaceState(null,'','#'+tab);
+    if(!opts||!opts.skipUrl)setUrl(tab);
   }
   root.querySelectorAll('[data-rk-tab]').forEach(function(btn){
     btn.addEventListener('click',function(){show(btn.getAttribute('data-rk-tab'));});
   });
-  var hash=(location.hash||'').replace('#','');
-  if(hash&&root.querySelector('[data-rk-tab="'+hash+'"]'))show(hash);
+  function tabFromLocation(){
+    var m=(location.pathname||'').match(/\\/settings\\/([a-z]+)/);
+    if(m&&URL_TABS[m[1]])return m[1];
+    var hash=(location.hash||'').replace('#','');
+    return (hash&&URL_TABS[hash])?hash:null;
+  }
+  var initial=tabFromLocation();
+  if(initial&&root.querySelector('[data-rk-tab="'+initial+'"]'))show(initial,{skipUrl:true});
+  // Back/forward between settings tabs — reflect the path without pushing again.
+  window.addEventListener('popstate',function(){ show(tabFromLocation()||'profile',{skipUrl:true}); });
   // reveal password inputs
   root.querySelectorAll('[data-rk-reveal]').forEach(function(btn){
     btn.addEventListener('click',function(){var el=root.getElementById(btn.getAttribute('data-rk-reveal'));if(el)el.type=el.type==='password'?'text':'password';});
@@ -501,16 +536,25 @@ export function renderReskinSettings(input) {
     var bodyEl=fx.querySelector('[data-rk-fx-body]');
     var ROOTS={
       my_files:{url:'/api/v1/user/me/attachments',key:'attachments',label:'My Files'},
-      temp:{url:'/api/v1/user/me/temporary-files',key:'files',label:'Temp'}
+      temp:{url:'/api/v1/user/me/temporary-files',key:'files',label:'Temp'},
+      raws:{url:'/raws/feed',key:'clips',label:'Raws'}
     };
-    var VROOTS=[{key:'my_files',label:'My Files'},{key:'temp',label:'Temp'}];
-    var st={root:'',path:{my_files:'',temp:''},data:{my_files:null,temp:null},status:{my_files:'idle',temp:'idle'}};
+    var VROOTS=[{key:'my_files',label:'My Files'},{key:'temp',label:'Temp'},{key:'raws',label:'Raws'}];
+    var st={root:'',path:{},data:{},status:{}};
+    VROOTS.forEach(function(v){ st.path[v.key]=''; st.data[v.key]=null; st.status[v.key]='idle'; });
 
     function normFolder(v){ return String(v||'').split('/').map(function(s){return s.trim();}).filter(Boolean).join('/'); }
     function normItem(raw){
-      var id=raw.id||raw.attachment_id||raw.file_id||''; var name=raw.fileName||raw.file_name||'';
-      if(!id||!name) return null;
-      return {id:id,name:name,contentType:raw.contentType||raw.content_type||'',viewUrl:raw.viewUrl||raw.view_url||'',
+      // Handles attachments, temp files, AND raws/clips (which use clip_id +
+      // source_filename/description and carry no content_type/folder).
+      var id=raw.id||raw.attachment_id||raw.file_id||raw.clip_id||'';
+      var name=raw.fileName||raw.file_name||raw.source_filename||raw.title||raw.description||'';
+      var viewUrl=raw.viewUrl||raw.view_url||'';
+      if(!id||(!name&&!viewUrl)) return null;
+      if(!name) name=id;
+      var ct=raw.contentType||raw.content_type||'';
+      if(!ct&&(raw.clip_id||raw.file_path)) ct='video/mp4';
+      return {id:id,name:name,contentType:ct,viewUrl:viewUrl,
         sizeBytes:typeof raw.sizeBytes==='number'?raw.sizeBytes:raw.size_bytes,folderPath:normFolder(raw.folderPath||raw.folder_path||'')};
     }
     function fmtBytes(b){ if(!b||b<=0) return ''; var u=['B','KB','MB','GB'],v=b,i=0; while(v>=1024&&i<u.length-1){v/=1024;i++;} return (v>=10||i===0?Math.round(v):v.toFixed(1))+' '+u[i]; }
@@ -679,6 +723,7 @@ export function renderReskinSettings(input) {
         title: "vidfarm reskin — Settings",
         description: "Vidfarm settings — profile, wallet, channels, developer.",
         activeSlug: "settings",
+        account: { name: input.name, email: input.email },
         pageCss,
         body,
         script