@conceptcraft/mindframes 0.1.12 → 0.1.13

package/dist/index.js

@@ -1087,6 +1087,12 @@ async function searchImages(searchRequest) {
     body: searchRequest
   });
 }
+async function generateImage(generateRequest) {
+  return request("/api/cli/images/generate", {
+    method: "POST",
+    body: generateRequest
+  });
+}
 async function searchVideos(searchRequest) {
   return request("/api/cli/videos/search", {
     method: "POST",
@@ -3067,8 +3073,8 @@ function generateMainSkillContent(context) {
   const { name, cmd: cmd2 } = context;
   const envPrefix = name.toUpperCase().replace(/[^A-Z0-9]/g, "_");
   return `---
-name: ${name}
-description: ${name} CLI for AI-powered content creation. Use when user needs to create presentations, generate video assets (voiceover, music, images, stock videos), use text-to-speech, mix audio, search stock media, or manage branding. This is the main entry point - load specialized skills (${name}-video, ${name}-presentation) for detailed workflows.
+name: ${cmd2}
+description: ${name} CLI for AI-powered content creation. Use when user needs to create presentations, generate video assets (voiceover, music, images, stock videos), use text-to-speech, mix audio, search stock media, or manage branding. This is the main entry point - load specialized skills (${cmd2}-video, ${cmd2}-presentation) for detailed workflows.
 ---
 
 # ${name} CLI
@@ -3187,7 +3193,6 @@ cat <<'EOF' | ${cmd2} video create --output ./public
       "imageQuery": "call to action button"
     }
   ],
-  "voice": "Kore",
   "voiceSettings": {
     "speed": 0.95,
     "stability": 0.4,
@@ -3226,10 +3231,10 @@ ${cmd2} tts generate -t "Hello world" -o output.mp3
 # With voice selection
 ${cmd2} tts generate -t "Welcome to the demo" -v Rachel -o welcome.mp3
 
-# With provider and settings
+# With provider and settings (Gemini)
 ${cmd2} tts generate \\
   -t "Professional narration" \\
-  -v Kore \\
+  -v Puck \\
   -p gemini \\
   -s 0.9 \\
   -o narration.mp3
@@ -3239,8 +3244,11 @@ ${cmd2} tts voices
 ${cmd2} tts voices --provider elevenlabs
 \`\`\`
 
-**Providers:** \`gemini\`, \`elevenlabs\`, \`openai\`
-**Popular voices:** \`Kore\`, \`Puck\`, \`Rachel\`, \`alloy\`
+**Providers:** \`elevenlabs\` (default), \`gemini\`, \`openai\`
+**Voices by provider:**
+- ElevenLabs: \`Rachel\`, \`Josh\`, \`Adam\`, \`Bella\` (or voice IDs)
+- Gemini: \`Kore\`, \`Puck\`, \`Charon\`, \`Aoede\`
+- OpenAI: \`alloy\`, \`nova\`, \`echo\`, \`onyx\`
 **Speed range:** 0.25 - 4.0 (default: 1.0)
 
 ---
@@ -3424,7 +3432,7 @@ cat scenes.json | ${cmd2} video create -o product-demo/public
 
 # 4. Render and add thumbnail (version files: v1, v2, v3...)
 cd product-demo
-pnpm exec remotion render FullVideo out/FullVideo-v1.mp4
+npx remotion render FullVideo out/FullVideo-v1.mp4
 ${cmd2} video thumbnail out/FullVideo-v1.mp4 --frame 60
 \`\`\`
 
@@ -3484,20 +3492,6 @@ ${cmd2} --version           # Version info
 }
 
 // src/commands/skill/rules/video/content.ts
-var THUMBNAIL_RULES = `Consider creating separate thumbnail component with Remotion (can be captured with remotion still, not used in actual video).
-
-**High-CTR principles:**
-- Expressive faces (emotion, not neutral) boost CTR 20-30%
-- High contrast, bold colors (yellow, orange stand out)
-- Simple: 3 main elements max (face + text + 1 visual)
-- Mobile-first: readable at 320px width (70% of views)
-- Minimal text: 3-5 words, bold legible fonts (60-80px)
-- Rule of thirds composition
-
-**Specs:** 1280x720, <2MB, 16:9 ratio
-
-Can capture: \`pnpm exec remotion still ThumbnailScene out/thumb.png\`
-`;
 var MOTION_DESIGN_GUIDELINES = `# Motion Design Principles
 
 **Core Philosophy:** "Atomic, Kinetic Construction" - nothing is static. Elements arrive and leave via physics-based transitions.
@@ -3611,7 +3605,7 @@ var ASSET_USAGE_GUIDELINES = `# Asset Usage & Optimization
 function generateVideoSkillContent(context) {
   const { name, cmd: cmd2 } = context;
   return `---
-name: ${name}-video
+name: ${cmd2}-video
 description: Use when user asks to create videos (product demos, explainers, social content, promos). Handles video asset generation, Remotion implementation, and thumbnail embedding.
 ---
 
@@ -3634,23 +3628,22 @@ ${cmd2} login
 
 ### 1. Generate Assets
 
-Generate voiceover, music, and visual assets:
+Generate voiceover, music, images, and thumbnail:
 
 \`\`\`bash
 cat <<SCENES | ${cmd2} video create --output ./public
 {
   "scenes": [
-    { 
-      "name": "Hook", 
+    {
+      "name": "Hook",
       "script": "Watch how we transformed this complex workflow into a single click.",
       "imageQuery": "modern dashboard interface dark theme"
     },
-    { 
-      "name": "Demo", 
+    {
+      "name": "Demo",
       "script": "Our AI analyzes your data in real-time, surfacing insights that matter."
     }
-  ],
-  "voice": "Kore"
+  ]
 }
 SCENES
 \`\`\`
@@ -3658,7 +3651,9 @@ SCENES
 **Output:**
 - \`public/audio/*.wav\` - scene voiceovers
 - \`public/audio/music.mp3\` - background music
-- \`public/video-manifest.json\` - timing, metadata, timeline
+- \`public/images/*.jpg\` - scene images (if imageQuery provided)
+- \`public/thumbnail.jpg\` - auto-generated thumbnail
+- \`public/video-manifest.json\` - **complete timeline ready to use**
 
 ### 2. Initialize Remotion (MANDATORY)
 
@@ -3672,29 +3667,47 @@ cd my-video
 
 ### 3. Render Video
 
-**IMPORTANT:** Always version output files to avoid overwriting. Check existing files and increment version:
-- First render: \`out/video-v1.mp4\`
-- Re-render: \`out/video-v2.mp4\`, \`out/video-v3.mp4\`, etc.
+**IMPORTANT:**
+- The \`video-manifest.json\` already contains the complete \`timeline\` - **no need to build or transform anything**
+- Just pass \`timeline\` directly to the composition
+- Always version output files: \`out/video-v1.mp4\`, \`out/video-v2.mp4\`, etc.
 
-**For landscape videos (16:9):**
+**YouTube (landscape 16:9, NO captions):**
 \`\`\`bash
-pnpm exec remotion render FullVideo out/video-v1.mp4
+npx remotion render YouTubeVideo out/youtube-v1.mp4 \\
+  --props='{"timeline":'$(cat public/video-manifest.json | jq -c .timeline)',"showCaptions":false}'
 \`\`\`
 
-**For vertical videos (9:16) with captions:**
+**TikTok/Reels/Shorts (vertical 9:16, WITH captions):**
 \`\`\`bash
-pnpm exec remotion render CaptionedVideo out/tiktok-v1.mp4 \\
+npx remotion render TikTokVideo out/tiktok-v1.mp4 \\
   --props='{"timeline":'$(cat public/video-manifest.json | jq -c .timeline)',"showCaptions":true}'
 \`\`\`
 
-### 4. Generate & Inject Thumbnail
+### Video Compositions
+
+| Composition | Dimensions | Captions | Use Case |
+|-------------|------------|----------|----------|
+| \`YouTubeVideo\` | 1920x1080 (16:9) | No | YouTube, Vimeo, traditional video |
+| \`TikTokVideo\` | 1080x1920 (9:16) | Yes (word-by-word) | TikTok, Reels, Shorts |
+
+**Same timeline, different output formats.** Both use the exact same \`timeline\` from \`video-manifest.json\`.
 
-${THUMBNAIL_RULES}
+### 4. Embed Thumbnail
+
+Thumbnail is auto-generated during \`video create\`. Inject into final video:
 
 \`\`\`bash
-${cmd2} video thumbnail out/video.mp4 --image out/thumb.png
+${cmd2} video thumbnail out/youtube-v1.mp4 --image public/thumbnail.jpg
 \`\`\`
 
+**High-CTR thumbnail principles:**
+- Expressive faces boost CTR 20-30%
+- High contrast, bold colors (yellow, orange)
+- Simple: 3 elements max
+- Mobile-first: readable at 320px
+- Specs: 1280x720, <2MB
+
 ---
 
 ${MOTION_DESIGN_GUIDELINES}
@@ -3715,7 +3728,7 @@ ${ASSET_USAGE_GUIDELINES}
 function generatePresentationSkillContent(context) {
   const { name, cmd: cmd2 } = context;
   return `---
-name: ${name}-presentation
+name: ${cmd2}-presentation
 description: Use when user asks to create presentations (slides, decks, pitch decks). Generates AI-powered presentations with structured content and professional design.
 ---
 
@@ -4745,7 +4758,7 @@ function getExtension(url) {
   }
   return "jpg";
 }
-var createCommand3 = new Command19("create").description("Create video assets (voiceover per scene, music, images)").option("-s, --script <text>", "Narration script (legacy single-script mode)").option("--script-file <path>", "Path to script file (legacy) or scenes JSON").option("-t, --topic <text>", "Topic for image search").option("-v, --voice <name>", "TTS voice (Kore, Puck, Rachel, alloy)", "Kore").option("-m, --music-prompt <text>", "Music description").option("-n, --num-images <number>", "Number of images to search/download", "5").option("-o, --output <dir>", "Output directory", "./public").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
+var createCommand3 = new Command19("create").description("Create video assets (voiceover per scene, music, images)").option("-s, --script <text>", "Narration script (legacy single-script mode)").option("--script-file <path>", "Path to script file (legacy) or scenes JSON").option("-t, --topic <text>", "Topic for image search").option("-v, --voice <name>", "TTS voice ID (ElevenLabs: Rachel, Josh, Adam; OpenAI: alloy, nova; Gemini: Kore, Puck)").option("-m, --music-prompt <text>", "Music description").option("-n, --num-images <number>", "Number of images to search/download", "5").option("-o, --output <dir>", "Output directory", "./public").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (options) => {
   const format = options.format;
   const spinner = format === "human" ? ora12("Initializing...").start() : null;
   try {
@@ -4956,7 +4969,7 @@ var createCommand3 = new Command19("create").description("Create video assets (v
       timeline.elements.length > 0 ? Math.max(...timeline.elements.map((e) => e.endMs)) : 0
     );
     const actualVideoDuration = videoEndTimeMs / 1e3;
-    const musicDuration = Math.min(30, Math.ceil(actualVideoDuration));
+    const musicDuration = Math.min(300, Math.ceil(actualVideoDuration));
     console.log(`[Music Generation] Requesting music:`, {
       prompt: musicPrompt,
       requestedDuration: musicDuration,
@@ -4965,71 +4978,107 @@ var createCommand3 = new Command19("create").description("Create video assets (v
       timelineDurationMs: videoEndTimeMs
     });
     let musicInfo;
-    if (musicDuration < 3) {
-      if (format === "human") {
-        spinner?.stop();
-        warn(`Video duration (${actualVideoDuration.toFixed(1)}s) is too short for music generation (minimum 3s).`);
-        warn(`Skipping music generation...`);
-        spinner?.start();
+    let thumbnailPath;
+    if (spinner) spinner.text = "Generating music and thumbnail...";
+    const firstScene = scenes[0];
+    const thumbnailPrompt = `YouTube thumbnail, bold text overlay, high contrast, vibrant colors, 16:9 aspect ratio: ${firstScene?.text?.slice(0, 100) || "video thumbnail"}`;
+    const parallelTasks = [];
+    const musicTask = (async () => {
+      if (musicDuration < 3) {
+        if (format === "human") {
+          spinner?.stop();
+          warn(`Video duration (${actualVideoDuration.toFixed(1)}s) is too short for music generation (minimum 3s).`);
+          spinner?.start();
+        }
+        return null;
       }
-    } else {
       try {
-        if (spinner) spinner.text = "Generating music...";
-        let musicResult = await generateMusic({
+        let musicResult2 = await generateMusic({
           prompt: musicPrompt,
           duration: musicDuration
         });
-        if (musicResult.status !== "completed" && musicResult.status !== "failed") {
-          if (spinner) spinner.text = `Processing music (ID: ${musicResult.requestId})...`;
-          musicResult = await pollForCompletion(
-            () => checkMusicStatus(musicResult.requestId),
+        if (musicResult2.status !== "completed" && musicResult2.status !== "failed") {
+          musicResult2 = await pollForCompletion(
+            () => checkMusicStatus(musicResult2.requestId),
             60,
             2e3
           );
         }
-        if (musicResult.status === "failed") {
-          throw new Error(musicResult.error || "Unknown error");
+        if (musicResult2.status === "failed") {
+          throw new Error(musicResult2.error || "Unknown error");
         }
         const musicPath = join2(audioDir, "music.mp3");
-        if (musicResult.audioUrl) {
-          await downloadFile3(musicResult.audioUrl, musicPath);
+        if (musicResult2.audioUrl) {
+          await downloadFile3(musicResult2.audioUrl, musicPath);
         }
-        totalCost += musicResult.cost || 0;
-        const actualMusicDuration = musicResult.duration || musicDuration;
-        console.log(`[Music Generation] Received music:`, {
-          requestedDuration: musicDuration,
-          returnedDuration: musicResult.duration,
-          actualUsedDuration: actualMusicDuration,
-          totalAudioDuration: totalDuration,
-          difference: actualMusicDuration - totalDuration,
-          audioUrl: musicResult.audioUrl?.substring(0, 50) + "..."
-        });
-        musicInfo = {
+        return {
           path: "audio/music.mp3",
-          duration: actualMusicDuration,
+          duration: musicResult2.duration || musicDuration,
           prompt: musicPrompt,
-          cost: musicResult.cost || 0
+          cost: musicResult2.cost || 0
         };
+      } catch (err) {
         if (format === "human") {
           spinner?.stop();
-          success(`Music: ${musicPath} (${musicInfo.duration}s)`);
-          if (actualMusicDuration < actualVideoDuration) {
-            warn(`Music duration (${actualMusicDuration.toFixed(1)}s) is shorter than video duration (${actualVideoDuration.toFixed(1)}s).`);
-            warn(`Consider using audio looping or extending music in Remotion.`);
+          warn(`Music generation failed: ${err.message}`);
+          spinner?.start();
+        }
+        return null;
+      }
+    })();
+    parallelTasks.push(musicTask);
+    const thumbnailTask = (async () => {
+      try {
+        const result = await generateImage({
+          prompt: thumbnailPrompt,
+          options: {
+            width: 1280,
+            height: 720
           }
+        });
+        if (result.success && result.data.url) {
+          const thumbPath = join2(options.output, "thumbnail.jpg");
+          await downloadFile3(result.data.url, thumbPath);
+          totalCost += result.data.cost || 0;
+          return thumbPath;
+        }
+        return null;
+      } catch (err) {
+        if (format === "human") {
+          spinner?.stop();
+          warn(`Thumbnail generation failed: ${err.message}`);
           spinner?.start();
         }
-      } catch (musicError) {
+        return null;
+      }
+    })();
+    parallelTasks.push(thumbnailTask);
+    const [musicResult, thumbResult] = await Promise.all(parallelTasks);
+    if (musicResult) {
+      musicInfo = musicResult;
+      totalCost += musicResult.cost || 0;
+      if (format === "human") {
         spinner?.stop();
-        warn(`Music generation failed: ${musicError.message}`);
-        warn(`Continuing without background music...`);
-        if (spinner && format === "human") spinner?.start();
+        success(`Music: ${join2(audioDir, "music.mp3")} (${musicResult.duration}s)`);
+        if (musicResult.duration < actualVideoDuration) {
+          warn(`Music duration (${musicResult.duration.toFixed(1)}s) is shorter than video duration (${actualVideoDuration.toFixed(1)}s).`);
+        }
+        spinner?.start();
+      }
+    }
+    if (thumbResult) {
+      thumbnailPath = thumbResult;
+      if (format === "human") {
+        spinner?.stop();
+        success(`Thumbnail: ${thumbnailPath}`);
+        spinner?.start();
       }
     }
     if (spinner) spinner.text = "Writing manifest...";
     const totalDurationInFrames = Math.round(actualVideoDuration * DEFAULT_FPS);
     const manifest = {
       music: musicInfo,
+      thumbnail: thumbnailPath ? "thumbnail.jpg" : void 0,
       images: allImages,
       videos: allVideos,
       scenes,
@@ -5117,7 +5166,7 @@ var searchCommand2 = new Command19("search").description("Search for stock video
     process.exit(EXIT_CODES.GENERAL_ERROR);
   }
 });
-var initCommand = new Command19("init").description("Create a new Remotion video project from template").argument("<name>", "Project directory name").option("-t, --template <repo>", "GitHub repo (user/repo)", DEFAULT_TEMPLATE).option("--type <type>", "Video type: landscape (16:9) or tiktok (9:16)", "landscape").option("--no-install", "Skip pnpm install").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (name, options) => {
+var initCommand = new Command19("init").description("Create a new Remotion video project from template").argument("<name>", "Project directory name").option("-t, --template <repo>", "GitHub repo (user/repo)", DEFAULT_TEMPLATE).option("--type <type>", "Video type: landscape (16:9) or tiktok (9:16)", "landscape").option("--no-install", "Skip npm install").option("-f, --format <format>", "Output format: human, json, quiet", "human").action(async (name, options) => {
   const format = options.format;
   const spinner = format === "human" ? ora12("Initializing video project...").start() : null;
   try {
@@ -5157,7 +5206,7 @@ var initCommand = new Command19("init").description("Create a new Remotion video
     if (options.install) {
       if (spinner) spinner.text = "Installing dependencies...";
       await new Promise((resolvePromise, reject) => {
-        const child = spawn("pnpm", ["install"], {
+        const child = spawn("npm", ["install"], {
           cwd: targetDir,
           stdio: "pipe",
           shell: true
@@ -5166,7 +5215,7 @@ var initCommand = new Command19("init").description("Create a new Remotion video
           if (code === 0) {
             resolvePromise();
           } else {
-            reject(new Error(`pnpm install failed with code ${code}`));
+            reject(new Error(`npm install failed with code ${code}`));
           }
         });
         child.on("error", reject);
@@ -5224,14 +5273,14 @@ var initCommand = new Command19("init").description("Create a new Remotion video
     info("Next steps:");
     info(`  cd ${name}`);
     if (!options.install) {
-      info("  pnpm install");
+      info("  npm install");
     }
-    info("  pnpm dev             # Preview in Remotion Studio");
+    info("  npm run dev          # Preview in Remotion Studio");
     info("  cc video create ...  # Generate assets to public/");
     if (options.type === "tiktok") {
-      info("  pnpm exec remotion render TikTokVideo  # Render TikTok video");
+      info("  npx remotion render TikTokVideo out/tiktok.mp4 --props='{...}'  # Render TikTok video");
     } else {
-      info("  pnpm exec remotion render FullVideo    # Render final video");
+      info("  npx remotion render YouTubeVideo out/youtube.mp4 --props='{...}'  # Render YouTube video");
     }
   } catch (err) {
     spinner?.stop();
@@ -5281,7 +5330,6 @@ var thumbnailCommand = new Command19("thumbnail").description("Embed a thumbnail
       if (options.composition) {
         if (spinner) spinner.text = `Extracting frame ${frameNum} from ${options.composition}...`;
         const args = [
-          "exec",
           "remotion",
           "still",
           options.composition,
@@ -5289,7 +5337,7 @@ var thumbnailCommand = new Command19("thumbnail").description("Embed a thumbnail
           `--frame=${frameNum}`
         ];
         try {
-          execSync(`pnpm ${args.join(" ")}`, {
+          execSync(`npx ${args.join(" ")}`, {
             stdio: "pipe",
             cwd: process.cwd()
           });
@@ -5379,7 +5427,7 @@ var thumbnailCommand = new Command19("thumbnail").description("Embed a thumbnail
 var videoCommand = new Command19("video").description("Video asset generation commands").addCommand(initCommand).addCommand(createCommand3).addCommand(searchCommand2).addCommand(thumbnailCommand);
 
 // src/index.ts
-var VERSION = "0.1.12";
+var VERSION = "0.1.13";
 var program = new Command20();
 var cmdName = brand.commands[0];
 program.name(cmdName).description(brand.description).version(VERSION, "-v, --version", "Show version number").option("--debug", "Enable debug logging").option("--no-color", "Disable colored output").configureOutput({