@mevdragon/vidfarm-devcli 0.17.0 → 0.18.0

package/dist/src/reskin/theme.js

@@ -84,10 +84,10 @@ export const RESKIN_CSS = `
 /* layout */
 .rk-container{width:min(var(--rk-container),100%);margin:0 auto;padding:0 var(--rk-gutter)}
 .rk-container-wide{width:min(85rem,100%);margin:0 auto;padding:0 var(--rk-gutter)}
-.rk-page{padding:40px 0 96px}
-.rk-page-head{display:grid;gap:8px;margin-bottom:32px}
-.rk-h1{font-size:var(--rk-text-4xl);letter-spacing:-.03em}
-.rk-sub{font-size:var(--rk-text-lg);color:var(--rk-text-muted)}
+.rk-page{padding:24px 0 80px}
+.rk-page-head{display:grid;gap:4px;margin-bottom:18px}
+.rk-h1{font-size:var(--rk-text-3xl);letter-spacing:-.03em}
+.rk-sub{font-size:var(--rk-text-base);color:var(--rk-text-muted)}
 .rk-stack{display:grid;gap:16px}
 .rk-row{display:flex;align-items:center;gap:12px}
 .rk-spread{display:flex;align-items:center;justify-content:space-between;gap:16px}
@@ -115,10 +115,106 @@ export const RESKIN_CSS = `
   transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
 .rk-sidebar-item:hover{background:var(--rk-n-100);color:var(--rk-ink)}
 .rk-sidebar-item.is-active{background:var(--rk-gold-tint);color:var(--rk-ink)}
-.rk-sidebar-foot{display:grid;gap:8px;padding-top:14px;border-top:1px solid var(--rk-border);margin-top:6px}
-.rk-sidebar-foot-link{font-size:12.5px;font-weight:500;color:var(--rk-text-muted);padding:4px 11px;border-radius:var(--rk-r-md)}
-.rk-sidebar-foot-link:hover{color:var(--rk-ink)}
-.rk-sidebar-cta{justify-content:center}
+/* AI chat dock — draggable FAB (defaults to the old sidebar-foot spot) + popup panel.
+ * The panel is 2x the sidebar width and, when it opens on the left, visually
+ * REPLACES the nav (sidebar goes visibility:hidden via body.rk-chat-left so the
+ * layout never jumps). If the FAB was dragged to the right half of the viewport
+ * the panel anchors right instead, so it is never cut off. */
+.rk-fab{position:fixed;left:16px;bottom:16px;z-index:90;width:56px;height:56px;border-radius:var(--rk-r-full);
+  border:0;cursor:grab;background:var(--rk-gold-500);color:var(--rk-ink);display:grid;place-items:center;
+  box-shadow:var(--rk-shadow-lg);touch-action:none;user-select:none;-webkit-user-select:none;
+  transition:transform var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease),opacity var(--rk-dur) var(--rk-ease)}
+.rk-fab:hover{transform:translateY(-2px);box-shadow:0 6px 18px -6px rgba(252,185,0,.6),var(--rk-shadow-lg)}
+.rk-fab.is-dragging{cursor:grabbing;transition:none;transform:scale(1.08)}
+.rk-fab.is-open{opacity:0;pointer-events:none;transform:scale(.6)}
+.rk-fab svg{width:26px;height:26px}
+.rk-aichat{position:fixed;z-index:95;top:12px;bottom:12px;left:12px;width:min(440px,calc(100vw - 24px));
+  display:flex;flex-direction:row;background:var(--rk-surface);border:1px solid var(--rk-border);
+  border-radius:var(--rk-r-3xl);box-shadow:var(--rk-shadow-xl);overflow:hidden;
+  animation:rk-aichat-in .22s var(--rk-ease)}
+.rk-aichat.has-files{width:min(772px,calc(100vw - 24px))}
+.rk-aichat.is-right{left:auto;right:12px}
+.rk-aichat[hidden]{display:none}
+@keyframes rk-aichat-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
+.rk-chat-left .rk-sidebar{visibility:hidden}
+
+/* left Files pane — baked into the panel; My Files + Temp as root folders of
+   one virtual root + directory nav. Also reused inline by /reskin/settings. */
+.rk-aichat-files{flex:none;width:266px;display:none;flex-direction:column;min-height:0;
+  border-right:1px solid var(--rk-border);background:var(--rk-n-50)}
+.rk-aichat.has-files .rk-aichat-files{display:flex}
+.rk-aichat-files .rk-aichat-crumbs{padding-top:22px}
+.rk-aichat-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:1px;padding:0 12px 8px;flex:none}
+.rk-aichat-crumb{padding:2px 6px;border-radius:var(--rk-r-sm);cursor:pointer;background:transparent;border:0;
+  color:var(--rk-text-muted);font-size:12px;font-weight:600;font-family:inherit;max-width:120px;overflow:hidden;
+  text-overflow:ellipsis;white-space:nowrap}
+.rk-aichat-crumb:hover{background:var(--rk-n-100);color:var(--rk-ink)}
+.rk-aichat-crumb.is-current{color:var(--rk-ink)}
+.rk-aichat-crumb-sep{color:var(--rk-n-300);font-size:12px}
+.rk-aichat-files-body{flex:1;min-height:0;overflow-y:auto;padding:2px 8px 12px;display:grid;gap:2px;align-content:start}
+.rk-aichat-frow{display:flex;align-items:center;gap:9px;width:100%;padding:8px 9px;border-radius:var(--rk-r-lg);
+  border:0;background:transparent;cursor:pointer;text-align:left;font-family:inherit;min-width:0;
+  transition:background var(--rk-dur) var(--rk-ease),box-shadow var(--rk-dur) var(--rk-ease)}
+.rk-aichat-frow:hover{background:#fff;box-shadow:var(--rk-shadow-xs)}
+.rk-aichat-fic{width:30px;height:30px;border-radius:var(--rk-r-md);flex:none;display:grid;place-items:center;
+  font-size:11px;font-weight:700;overflow:hidden}
+.rk-aichat-fic-folder{background:var(--rk-gold-tint2);color:var(--rk-gold-700)}
+.rk-aichat-fic-file{background:var(--rk-n-100);color:var(--rk-n-600)}
+.rk-aichat-fic img,.rk-aichat-fic video{width:100%;height:100%;object-fit:cover}
+.rk-aichat-fmain{flex:1;min-width:0;display:grid;gap:1px}
+.rk-aichat-fname{font-size:12.5px;font-weight:600;color:var(--rk-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-aichat-fmeta{font-size:11px;color:var(--rk-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-aichat-fadd{flex:none;font-size:11px;font-weight:700;color:var(--rk-gold-700);opacity:0;transition:opacity var(--rk-dur) var(--rk-ease)}
+.rk-aichat-frow:hover .rk-aichat-fadd{opacity:1}
+.rk-aichat-fstate{padding:22px 14px;text-align:center;font-size:12.5px;color:var(--rk-text-muted);line-height:1.5;display:grid;gap:8px;justify-items:center}
+.rk-aichat-fstate a{color:var(--rk-gold-700);font-weight:600}
+.rk-aichat-fstate button{font-family:inherit;font-size:12px;font-weight:600;color:var(--rk-ink);cursor:pointer;
+  background:#fff;border:1px solid var(--rk-border);border-radius:var(--rk-r-full);padding:5px 12px}
+.rk-aichat-fstate button:hover{background:var(--rk-n-100)}
+/* upload dropzone footer (shown when inside My Files / Temp) */
+.rk-aichat-drop{flex:none;margin:2px 10px 12px;padding:13px 12px;border:1.5px dashed var(--rk-border-strong);
+  border-radius:var(--rk-r-xl);background:#fff;display:grid;gap:9px;justify-items:center;text-align:center;
+  transition:border-color var(--rk-dur) var(--rk-ease),background var(--rk-dur) var(--rk-ease)}
+.rk-aichat-drop[hidden]{display:none}
+.rk-aichat-drop.is-drag{border-color:var(--rk-gold-600);background:var(--rk-gold-tint)}
+.rk-aichat-drop-text{font-size:11.5px;color:var(--rk-text-muted);line-height:1.4;overflow-wrap:anywhere}
+.rk-aichat-drop-btn{font-family:inherit;font-size:12px;font-weight:700;color:var(--rk-ink);cursor:pointer;
+  background:var(--rk-gold-tint);border:1px solid var(--rk-gold-600);border-radius:var(--rk-r-full);padding:6px 15px;
+  transition:background var(--rk-dur) var(--rk-ease)}
+.rk-aichat-drop-btn:hover{background:var(--rk-gold-tint2)}
+.rk-aichat-drop-btn:disabled{opacity:.6;cursor:default}
+
+/* chat column */
+.rk-aichat-main{flex:1;min-width:0;display:flex;flex-direction:column}
+.rk-aichat-head{display:flex;align-items:center;gap:8px;padding:14px 14px;border-bottom:1px solid var(--rk-border);flex:none}
+.rk-aichat-head-main{flex:1;min-width:0;display:grid;gap:1px}
+.rk-aichat-title{font-family:var(--rk-font-display);font-weight:800;font-size:15px;color:var(--rk-ink);letter-spacing:-.01em}
+.rk-aichat-sub{font-size:11.5px;color:var(--rk-text-muted)}
+.rk-aichat-tool{width:30px;height:30px;border-radius:var(--rk-r-lg);border:1px solid var(--rk-border);background:#fff;
+  cursor:pointer;color:var(--rk-n-600);display:grid;place-items:center;font-size:13px;flex:none;
+  transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease),border-color var(--rk-dur) var(--rk-ease)}
+.rk-aichat-tool:hover{background:var(--rk-n-100);color:var(--rk-ink)}
+.rk-aichat-tool svg{width:15px;height:15px}
+.rk-aichat-tool.is-on{background:var(--rk-gold-tint);border-color:var(--rk-gold-600);color:var(--rk-ink)}
+.rk-aichat-log{flex:1;min-height:0;overflow-y:auto;padding:16px;display:grid;gap:10px;align-content:start;background:var(--rk-n-50)}
+.rk-aichat-msg{max-width:85%;padding:10px 14px;border-radius:var(--rk-r-2xl);font-size:13.5px;line-height:1.5;overflow-wrap:break-word}
+.rk-aichat-msg.is-ai{background:#fff;border:1px solid var(--rk-border);color:var(--rk-text);justify-self:start;
+  border-bottom-left-radius:var(--rk-r-sm);box-shadow:var(--rk-shadow-xs)}
+.rk-aichat-msg.is-user{background:var(--rk-gold-tint2);color:var(--rk-ink);justify-self:end;border-bottom-right-radius:var(--rk-r-sm)}
+.rk-aichat-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px 0;flex:none}
+.rk-aichat-chips:empty{display:none}
+.rk-aichat-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 10px;border-radius:var(--rk-r-full);
+  background:var(--rk-gold-tint2);color:var(--rk-gold-700);font-size:11.5px;font-weight:600;max-width:190px}
+.rk-aichat-chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.rk-aichat-chip button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:14px;line-height:1;padding:0 2px}
+.rk-aichat-composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--rk-border);flex:none;background:#fff}
+.rk-aichat-composer .rk-input{flex:1;border-radius:var(--rk-r-full)}
+
+/* narrow: stack the files drawer above the chat so neither pane is cut off */
+@media(max-width:700px){
+  .rk-aichat.has-files{flex-direction:column}
+  .rk-aichat.has-files .rk-aichat-files{width:auto;max-height:44%;border-right:0;border-bottom:1px solid var(--rk-border)}
+}
 
 /* brand + glass helpers (kept — reused by the sidebar brand + the login page) */
 .rk-glass{background:rgba(255,255,255,.72);backdrop-filter:blur(var(--rk-glass-blur));
@@ -139,8 +235,8 @@ export const RESKIN_CSS = `
   .rk-sidebar-nav{flex-direction:row;gap:4px;flex:1}
   .rk-sidebar-sep{display:none}
   .rk-sidebar-item{padding:8px 12px}
-  .rk-sidebar-foot{display:none}
   .rk-content{margin-left:0}
+  .rk-chat-left .rk-sidebar{visibility:visible}
 }
 
 /* buttons */
@@ -225,6 +321,7 @@ export const RESKIN_CSS = `
 @media(max-width:860px){.rk-side{position:static;grid-auto-flow:column;overflow:auto}}
 .rk-side-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:var(--rk-r-xl);
   font-size:14px;font-weight:600;color:var(--rk-n-600);cursor:pointer;border:0;background:transparent;
+  box-sizing:border-box;text-decoration:none;
   width:100%;text-align:left;white-space:nowrap;transition:background var(--rk-dur) var(--rk-ease),color var(--rk-dur) var(--rk-ease)}
 .rk-side-item:hover{background:var(--rk-n-100);color:var(--rk-ink)}
 .rk-side-item.is-active{background:var(--rk-gold-tint);color:var(--rk-ink)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mevdragon/vidfarm-devcli",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Local bridge for the Vidfarm Trackpad Editor. `vidfarm serve <template_id>` boots the FULL editor on localhost (disk-backed records/storage, free in-process render); edit composition.html on disk (Claude Code, Codex, etc.) and the browser live-morphs it.",
   "type": "module",
   "bin": {