@mevdragon/vidfarm-devcli 0.16.0 → 0.17.0

package/.agents/skills/farmville-saas-ux/references/tokens.md

@@ -0,0 +1,271 @@
+# Farmville SaaS — Design Tokens
+
+The complete design system as CSS custom properties. Paste the `:root` block below into your global
+stylesheet and reference the variables everywhere — never hand-pick ad-hoc hex/px values, or the system
+drifts. Values are the real ones distilled from Fillout.com (a Tailwind-v4 default scale + a custom
+honey-gold brand palette + rounded display type).
+
+## Table of contents
+1. Fonts (loading + stacks)
+2. The `:root` token block (copy-paste)
+3. Color rationale
+4. Typography scale & usage
+5. Radius, shadow, spacing rationale
+6. Glass / blur
+7. Motion
+
+---
+
+## 1. Fonts
+
+**Display / headings — `Hanken Grotesk`.** Fillout uses a proprietary rounded grotesque called
+*blMelody*. Hanken Grotesk is the closest free, warm, rounded grotesque with an excellent bold. Good
+alternates, all free on Google Fonts, in order of similarity: **Figtree**, **Gantari**, **Onest**,
+**Plus Jakarta Sans**. If you have a license for blMelody, use it and keep Hanken as the fallback.
+
+**Body / UI — `Inter`.** Exact match to Fillout. Free.
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+```
+
+Rules of thumb:
+- Headlines, section titles, big numbers, the logo → **Hanken Grotesk** (or blMelody).
+- Body copy, labels, buttons, nav items, form fields → **Inter**.
+- Never set body copy in the display font, and never set a huge headline in Inter — the mix is the point.
+
+---
+
+## 2. The `:root` token block
+
+```css
+:root {
+  /* ---- Fonts ---- */
+  --font-display: "Hanken Grotesk", "blMelody", ui-sans-serif, system-ui, sans-serif;
+  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono:    ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
+
+  /* ---- Signature accent: HONEY GOLD (the one "joy" color) ---- */
+  --gold-500:  #ffc738;   /* primary accent */
+  --gold-400:  #ffd66f;   /* lighter */
+  --gold-300:  #f8d884;   /* soft */
+  --gold-600:  #f6c744;   /* focus-ring gold */
+  --gold-700:  #fcb900;   /* deep / hover */
+  --gold-tint: #fff5e4;   /* pale wash bg */
+  --gold-tint2:#ffe9cc;   /* warm cream */
+
+  /* ---- Ink & neutral scale (Tailwind neutral) ---- */
+  --ink:        #171717;  /* primary text, dark buttons, footer */
+  --ink-950:    #0a0a0a;  /* deepest */
+  --n-900:      #171717;
+  --n-800:      #262626;
+  --n-700:      #404040;  /* heading text on light */
+  --n-600:      #525252;
+  --n-500:      #737373;  /* secondary / body text */
+  --n-400:      #a3a3a3;  /* muted, placeholders, disabled */
+  --n-300:      #d4d4d4;  /* strong border */
+  --n-200:      #ededed;  /* hairline border (default) */
+  --n-150:      #f0f0f0;
+  --n-100:      #f5f5f5;  /* section tint background */
+  --n-50:       #fbfbfb;  /* page background */
+  --white:      #ffffff;  /* card surface */
+
+  /* ---- Support pastels (icon tiles, nodes, illustration accents) ---- */
+  --sky:        #3f9fe0;  --sky-tint:    #e2effd;   /* hero sky / info */
+  --violet:     #9f5bde;  --violet-tint: #e4ddfd;   /* AI / smart */
+  --green:      #22c55e;  --green-tint:  #dcfce7;   /* branch / success / nature */
+  --coral:      #f97316;  --coral-tint:  #ffe9cc;   /* energy / warm */
+  --red:        #ef4444;  --red-tint:    #fee2e2;   /* destructive */
+
+  /* ---- Semantic roles ---- */
+  --bg:            var(--n-50);
+  --bg-section:    var(--n-100);
+  --surface:       var(--white);
+  --border:        var(--n-200);
+  --border-strong: var(--n-300);
+  --text:          var(--n-700);
+  --text-muted:    var(--n-500);
+  --text-faint:    var(--n-400);
+  --accent:        var(--gold-500);
+
+  /* ---- Radius (curves are signature — nothing sharp) ---- */
+  --r-sm:  4px;
+  --r-md:  6px;     /* inputs, small chips */
+  --r-lg:  8px;     /* small buttons */
+  --r-xl:  12px;    /* buttons, icon tiles */
+  --r-2xl: 16px;    /* cards, nodes */
+  --r-3xl: 24px;    /* big feature cards, image frames, nav pill */
+  --r-full: 9999px; /* nav bar, pill buttons, badges, avatars */
+
+  /* ---- Shadows (diffuse, low-opacity = soft sunlight, never harsh) ---- */
+  --shadow-xs: 0 1px 2px 0 #0000000d;
+  --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
+  --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
+  --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
+  --shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
+  --shadow-2xl:0 25px 50px -12px #00000040;
+  --shadow-card:  0 1px 2px #0000000d, 0 8px 24px -12px #00000014; /* lifted-card ambient */
+  --shadow-nav:   0 4px 24px -8px #00000026, 0 1px 2px #0000000d;  /* floating glass nav */
+  --ring-gold:    0 0 0 3px var(--gold-600), 0 0 14px rgba(246,199,68,.4); /* focus */
+
+  /* ---- Type scale (rem) ---- */
+  --text-xs:  0.75rem;   --lh-xs:  1rem;
+  --text-sm:  0.875rem;  --lh-sm:  1.25rem;
+  --text-base:1rem;      --lh-base:1.5rem;
+  --text-lg:  1.125rem;  --lh-lg:  1.75rem;
+  --text-xl:  1.25rem;   --lh-xl:  1.75rem;
+  --text-2xl: 1.5rem;    --lh-2xl: 2rem;
+  --text-3xl: 1.875rem;  --lh-3xl: 2.25rem;
+  --text-4xl: 2.25rem;   --lh-4xl: 2.5rem;
+  --text-5xl: 3rem;      --lh-5xl: 1.05;
+  --text-6xl: 3.75rem;   --lh-6xl: 1.0;
+  --text-7xl: 4.5rem;    --lh-7xl: 1.0;
+  --display:  clamp(3rem, 7vw, 6rem);   /* hero headline, fluid */
+
+  /* ---- Font weights ---- */
+  --fw-normal: 400;  --fw-medium: 500;  --fw-semibold: 600;
+  --fw-bold: 700;    --fw-extrabold: 800;
+
+  /* ---- Tracking / leading ---- */
+  --track-tighter: -0.05em;
+  --track-tight:   -0.025em;   /* headings default */
+  --track-normal:  0em;
+  --lh-tight: 1.1;  --lh-snug: 1.25;  --lh-normal: 1.5;  --lh-relaxed: 1.6;
+
+  /* ---- Spacing (4px base) ---- */
+  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
+  --sp-6: 24px; --sp-8: 32px;  --sp-10:40px; --sp-12:48px; --sp-16:64px;
+  --sp-20:80px; --sp-24:96px;  --sp-32:128px;
+  --section-y: clamp(4rem, 9vw, 7rem);   /* vertical rhythm between sections */
+  --container: 75rem;                     /* 1200px, max content width */
+  --gutter:    clamp(1rem, 4vw, 2rem);
+
+  /* ---- Glass / blur ---- */
+  --glass-bg:   rgba(251,251,251,0.8);
+  --glass-blur: 16px;
+
+  /* ---- Motion ---- */
+  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* gentle ease-out */
+  --dur-fast: 150ms;  --dur: 220ms;  --dur-slow: 320ms;
+}
+
+/* Baseline application */
+html { font-size: 16px; }
+body {
+  font-family: var(--font-body);
+  color: var(--text);
+  background: var(--bg);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+h1,h2,h3,h4 {
+  font-family: var(--font-display);
+  font-weight: var(--fw-extrabold);
+  letter-spacing: var(--track-tight);
+  line-height: var(--lh-tight);
+  color: var(--ink);
+}
+```
+
+---
+
+## 3. Color rationale
+
+- **Honey-gold `#ffc738` is the whole personality.** It is the *only* saturated brand color. Use it
+  where you want a smile: the footer's primary CTA, star ratings, a "Publish" chip, the logo, a small
+  underline/highlight, a hover glow. If you find yourself using gold on more than ~5–10% of a screen,
+  pull back — its power is scarcity. Never pair it with a second competing bright brand color.
+- **Charcoal `#171717` is the workhorse.** Primary buttons on light backgrounds, primary text, the
+  footer surface. It reads premium and calm and lets the gold pop.
+- **Everything else is the neutral gray scale.** Backgrounds alternate `#fbfbfb` (page) ↔ `#f5f5f5`
+  (tinted section) ↔ `#ffffff` (cards). Borders are the near-invisible `#ededed` hairline. Text steps
+  down `#171717` → `#404040` → `#737373` → `#a3a3a3`.
+- **Support pastels are for tiny surfaces only** — icon tiles, workflow nodes, illustration accents,
+  chart dots. Each has a saturated glyph color + a pale tint background (violet on `#e4ddfd`, green on
+  `#dcfce7`, etc.). They add life without stealing the gold's job.
+- **The illustrated hero introduces sky-blue and green** as *painted* colors, not UI colors. That's
+  intentional — the warmth lives in the artwork, the UI stays disciplined.
+
+---
+
+## 4. Typography scale & usage
+
+| Element | Font | Size | Weight | Tracking | Line-height |
+|---|---|---|---|---|---|
+| Hero headline | display | `--display` (clamp 3→6rem) | 800 | -0.03em | 1.0 |
+| Section title | display | `--text-5xl`/`4xl` | 800 | -0.025em | 1.05 |
+| Card / feature title | display | `--text-xl`/`2xl` | 700 | -0.02em | 1.2 |
+| Subhead / lede | body | `--text-lg`/`xl` | 400 | 0 | 1.5 |
+| Body copy | body | `--text-base` | 400 | 0 | 1.6 |
+| Small / caption | body | `--text-sm` | 400/500 | 0 | 1.4 |
+| Button label | body | `--text-sm`/`base` | 600 | 0 | 1 |
+| Badge / eyebrow | body | `--text-sm` | 500 | 0 | 1 |
+| Big stat number | display | `--text-5xl`+ | 700 | -0.02em | 1 |
+
+**Two-tone hero trick:** split the headline across two lines and set the first line to a translucent
+white and the second to solid white for a soft-to-strong reveal:
+
+```css
+.hero-h1 { font: 800 var(--display)/1.0 var(--font-display); letter-spacing:-0.03em; color:#fff; }
+.hero-h1 .soft { color: rgba(255,255,255,0.55); }
+```
+```html
+<h1 class="hero-h1"><span class="soft">Forms that</span><br>do it all</h1>
+```
+
+On light backgrounds, headings are ink `#171717`; subheads are `#737373`.
+
+---
+
+## 5. Radius, shadow, spacing rationale
+
+- **Radius is a personality dial and it's turned way up.** Interactive elements are *fully* rounded
+  (nav, buttons, badges → `--r-full`). Containers are generously rounded (cards `16px`, big cards &
+  image frames `24px`). Only truly small utility elements go as low as `4–6px`. When in doubt, round
+  more. A single sharp corner breaks the whole cozy feeling.
+- **Shadows imitate soft ambient sunlight**, not hard drop-shadows. They're always large-radius and
+  low-opacity (`#0000001a` ≈ 10% black; the biggest is 25%). Use `--shadow-card` on resting cards and
+  `--shadow-nav` on the floating nav. On hover, step a card from `--shadow-card` to `--shadow-lg` and
+  nudge it up 2px.
+- **Spacing is generous and rhythmic.** Sections get `--section-y` (≈ 6rem) of vertical padding.
+  Content maxes at `--container` (1200px) and stays centered with `--gutter` side padding. Inside
+  cards, pad `24–40px`. Whitespace *is* the premium signal — don't crowd.
+
+---
+
+## 6. Glass / blur
+
+The floating nav and any sticky "feature tab" bar use frosted glass:
+
+```css
+.glass {
+  background: var(--glass-bg);              /* rgba(251,251,251,0.8) */
+  backdrop-filter: blur(var(--glass-blur)); /* 16px */
+  -webkit-backdrop-filter: blur(var(--glass-blur));
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow-nav);
+}
+```
+Over the illustrated hero, use a whiter translucent fill (`rgba(255,255,255,0.7)`) so nav text stays legible.
+
+---
+
+## 7. Motion
+
+Gentle and springy, never bouncy-cartoonish. One easing curve (`--ease`, a soft ease-out) and short
+durations (150–320ms). The canonical interactions:
+
+- **Card hover:** `transform: translateY(-2px)` + shadow `--shadow-card` → `--shadow-lg`.
+- **Button hover:** slight brightness/darken + `--shadow-md`; the trailing `→` arrow nudges right ~3px.
+- **Focus:** `box-shadow: var(--ring-gold)` — the gold glow ring.
+- **Section reveal (optional):** fade-up 12px over 320ms as it enters the viewport.
+
+```css
+.card { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
+.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
+.btn .arrow { transition: transform var(--dur) var(--ease); }
+.btn:hover .arrow { transform: translateX(3px); }
+:where(a,button,input,textarea):focus-visible { outline: none; box-shadow: var(--ring-gold); }
+```

package/.agents/skills/vidfarm-media/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: vidfarm-media
-description: Media resolution for video workflows — narration TTS, word-level timings, BGM, SFX, and image/clip sourcing through vidfarm. Use when a video needs audio (voiceover/narration, music, sound effects), caption word timings, or media assets. Ships the shared audio engine scripts/audio.mjs (audio_request.json → audio_meta.json) used by faceless-explainer, product-launch-video, and general-video; documents vidfarm tts/stt BYOK primitives, the keyless local Kokoro + whisper.cpp engines, and My Files / clip-library / generation sourcing. No third-party media accounts — everything is user-owned or generated on the user's keys.
+description: Media resolution for video workflows — narration TTS, voice-matched speech regeneration ("same speaker, new words"), word-level timings, BGM, SFX, and image/clip sourcing through vidfarm. Use when a video needs audio (voiceover/narration, music, sound effects), rewording of existing narration in the original speaker's voice, caption word timings, or media assets. Ships the shared audio engine scripts/audio.mjs (audio_request.json → audio_meta.json) used by faceless-explainer, product-launch-video, and general-video; documents vidfarm tts/stt BYOK primitives, the keyless local Kokoro + whisper.cpp engines, and My Files / clip-library / generation sourcing. No third-party media accounts — everything is user-owned or generated on the user's keys.
 ---
 
 # vidfarm-media
@@ -63,6 +63,7 @@ Contract points:
 | Narration, promptable voice (BYOK) | `vidfarm tts "…" --style "calm, warm narrator"` | Local-first on your env key; `--voice alloy`/`Kore`…; `--cloud` = saved-key platform job → `POST /api/v1/primitives/audio/speech` |
 | Narration, zero keys | `npx hyperframes tts "…" -v af_heart --json` | Kokoro-82M, local, WAV + duration in JSON |
 | Transcript + SRT (BYOK) | `vidfarm stt <file\|url>` | Gemini key labels speakers; OpenAI whisper-1 gives real word timestamps |
+| Reword existing narration in the (approximate) original voice | `POST /api/v1/primitives/audio/regenerate-speech` (platform job on saved keys; no devcli command yet) | One job: listens to a video/audio source, profiles the speaker (needs a Gemini key), rewords the transcript per `rewrite_instruction` (or takes exact `text`), regenerates with the closest preset voice + matched style. Always an approximation — OpenAI/Gemini cannot clone voices. Details: `references/tts.md` |
 | Word timings, zero keys | `npx hyperframes transcribe <audio> --json` | whisper.cpp; writes word-level `transcript.json` |
 | Captions straight into a composition | `vidfarm captions generate <dir>` | whisper-1 real timings when an OpenAI key exists; estimates otherwise |
 

package/.agents/skills/vidfarm-media/references/tts.md

@@ -21,7 +21,26 @@ vidfarm tts "Welcome back to the channel" --style "calm, warm bedtime narrator"
   - Gemini (`gemini-*-tts`, TitleCase, also the default family for OpenRouter TTS): `Kore, Puck, Charon, Aoede, Fenrir, Leda, Orus, Zephyr, Achernar, Achird, Algenib, Algieba, Alnilam, Autonoe, Callirrhoe, Despina, Enceladus, Erinome, Gacrux, Iapetus, Laomedeia, Pulcherrima, Rasalgethi, Sadachbia, Sadaltager, Schedar, Sulafat, Umbriel, Vindemiatrix, Zubenelgenubi`
 - **Formats**: `--format mp3|wav` (default mp3). `--json` prints `{ ok, provider, model, out, … }`.
 
-## Keyless local TTS — Kokoro-82M
+## Voice-matched regeneration — "same speaker, new words"
+
+```bash
+# Platform job on saved keys (no devcli command yet); poll the returned job_id.
+POST /api/v1/primitives/audio/regenerate-speech   # alias: /api/v1/primitives/regenerate-speech
+{ "tracer": "…", "payload": {
+    "source_url": "…",                 # video or audio; video audio is demuxed automatically
+    "rewrite_instruction": "mention the summer sale instead of the discount code",
+    "text": "…",                       # OR: the exact new script (one of the two is required)
+    "voice": "…", "instructions": "…", # optional preset override / extra style guidance
+    "provider": "…", "model": "…", "language": "…", "output_format": "mp3|wav"
+} }
+```
+
+One job: listens to the source, profiles the dominant speaker with an audio-native Gemini call (verbatim transcript + gender/age/accent/pace/pitch/energy profile + a dense style direction + the closest preset in both voice families), rewords the transcript per `rewrite_instruction` (keeping length and rhythm) or takes the exact `text`, then regenerates via TTS with the matched preset + profiled style instructions. Result: durable `audioUrl`, `script`, `original_transcript`, `voice_profile`, `voice_match`, plus a `regenerate-speech.json` artifact.
+
+- **Honesty rule (non-negotiable): this is an approximation, never a clone.** Neither OpenAI nor Gemini exposes voice cloning through their public APIs — both offer preset voices with style steering only (actual cloning is sales-allowlisted at both, e.g. OpenAI "Custom Voices", Google Chirp 3 Instant Custom Voice). `voice_match` says `"approximate"` or `"none"`; always present it that way to the user. True self-serve cloning would need an ElevenLabs/Cartesia-class provider or a local OSS model (F5-TTS, CosyVoice, XTTS-v2, Chatterbox) — none are wired into vidfarm today.
+- **Voice profiling needs a saved Gemini key** (it is the audio-native LLM). With only openai/openrouter keys the job degrades gracefully: STT transcript + reword still work, but the voice is a default or explicitly passed preset and `voice_match` is `"none"`.
+- Sources over ~40 minutes of speech must be trimmed first (same cap as `/audio/transcribe`).
+- To swap the result into a composition: mute the original span (`/videos/mute` or the layer's volume), then place `audioUrl` as a new audio layer.
 
 ```bash
 npx hyperframes tts "Welcome back" -v af_heart -o line.wav --json   # {"ok":true,"durationSeconds":…,"outputPath":…}

package/dist/src/account-pages-legacy.js

@@ -880,10 +880,10 @@ export function renderSettingsPage(input) {
                   </div>
                   <div class="profile-field">
                     <div class="profile-field-head">
-                      <label for="about">Profile notes</label>
+                      <label for="about">Product / offer description</label>
                       <button type="submit" data-profile-about-save disabled>Save</button>
                     </div>
-                    <textarea id="about" name="about" placeholder="What should your operators or collaborators know about this account?" data-profile-about data-initial-value="${escapeAttribute(input.about ?? "")}">${escapeHtml(input.about ?? "")}</textarea>
+                    <textarea id="about" name="about" placeholder="Describe your product or offer — what it is, who it's for, and the promise. Swipe mode uses this to auto-recut templates into ads for you." data-profile-about data-initial-value="${escapeAttribute(input.about ?? "")}">${escapeHtml(input.about ?? "")}</textarea>
                   </div>
                 </form>
                 <section class="files-card" data-files-card>