egaki 0.9.0 → 0.11.0

package/dist/vite/vite-plugin.js

@@ -18,6 +18,7 @@ import { fileURLToPath } from 'node:url';
 import { spiceflowPlugin } from 'spiceflow/vite';
 import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite';
+import pc from 'picocolors';
 import { mdxParse } from 'safe-mdx/parse';
 import { collectServerImportSources } from "./server-mdx.js";
 import { parseFrontmatter } from "./mdx-parse.js";
@@ -34,6 +35,23 @@ const RESOLVED_MDX = '\0' + VIRTUAL_MDX;
 const VIRTUAL_MODULES = 'virtual:egaki-modules';
 const RESOLVED_MODULES = '\0' + VIRTUAL_MODULES;
 const PKG_NAME = 'egaki';
+// Packages that must resolve to a single physical copy (same pattern as
+// spiceflow:dedupe-singleton). Remotion Player + useVideoConfig share React
+// context; two copies → "No video config found". Motion patches need one
+// JSAnimation class. resolve.dedupe alone fails under pnpm when the package
+// is only a transitive dep of egaki (not hoisted to the consumer root).
+const dedupePackages = new Set([
+    'remotion',
+    '@remotion/player',
+    '@remotion/media',
+    '@remotion/web-renderer',
+    'motion',
+    'motion-dom',
+    'motion-utils',
+]);
+// Fake importer anchored inside egaki's package so this.resolve() finds the
+// same remotion/motion copy egaki itself depends on.
+const dedupeImporter = path.join(__pkgRoot, '_dedupe_importer_.js');
 /** Resolve a relative MDX import source against the project root,
  *  probing common extensions. Returns the absolute path or undefined. */
 function resolveSourceToFile(root, source) {
@@ -237,7 +255,7 @@ export function video(options) {
                         if (entry.isDirectory()) {
                             walkDir(fullPath);
                         }
-                        else if (/\.(tsx?|jsx?|mdx?)$/.test(entry.name) && !/\.(test|spec|config)\./.test(entry.name)) {
+                        else if (/\.(tsx?|jsx?|mdx?)$/.test(entry.name) && !/\.(test|spec|config)\./.test(entry.name) && !/\.d\.ts$/.test(entry.name)) {
                             // Entry MDX files are NOT skipped: they may be imported as
                             // partials by other MDX files (e.g. `import Intro from './intro.mdx'`).
                             // Self-import is a user error and harmless (safe-mdx handles it).
@@ -291,6 +309,50 @@ export function video(options) {
                 ].join('\n');
             }
         },
+        // Print SDK usage instructions after Vite's startup banner.
+        // Agents read terminal output to learn how to interact with the
+        // running dev server via Playwriter + window.egakiSDK.
+        configureServer(server) {
+            server.httpServer?.on('listening', () => {
+                const log = server.config.logger;
+                const p = (s) => log.info(s);
+                // Small delay so our block prints after Vite's "ready in" + URL lines
+                setTimeout(() => {
+                    const title = `  ${pc.cyan(pc.bold('egaki SDK'))} ${pc.dim('—')} ${pc.white('programmatic control via')} ${pc.yellow('window.egakiSDK')}`;
+                    const sep = pc.dim('  ─'.padEnd(72, '─'));
+                    p('');
+                    p(title);
+                    p(sep);
+                    p('');
+                    p(`  ${pc.green('●')} ${pc.bold('Get info')}        ${pc.dim('composition metadata, sections, fps')}`);
+                    p(`    ${pc.cyan(`playwriter -s 1 -e 'console.log(await state.page.evaluate(() => window.egakiSDK.getInfo()))'`)}`);
+                    p('');
+                    p(`  ${pc.green('●')} ${pc.bold('Screenshot')}      ${pc.dim('capture a single frame as PNG')}`);
+                    p(`    ${pc.cyan("playwriter -s 1 -e \"$(cat <<'JS'")}`);
+                    p(`    ${pc.cyan('const dataUrl = await state.page.evaluate(() => window.egakiSDK.screenshot({ frame: 60 }))')}`);
+                    p(`    ${pc.cyan('const buf = Buffer.from(await (await fetch(dataUrl)).arrayBuffer())')}`);
+                    p(`    ${pc.cyan('require("node:fs").writeFileSync("/tmp/frame-60.png", buf)')}`);
+                    p(`    ${pc.cyan('JS')}`);
+                    p(`    ${pc.cyan(')"')}`);
+                    p('');
+                    p(`  ${pc.green('●')} ${pc.bold('Filmstrip')}       ${pc.dim('grid of frames across scenes')}`);
+                    p(`    ${pc.cyan("playwriter -s 1 -e \"$(cat <<'JS'")}`);
+                    p(`    ${pc.cyan('const dataUrl = await state.page.evaluate(() =>')}`);
+                    p(`    ${pc.cyan('  window.egakiSDK.filmstrip({ scenes: [0, 1, 2], framesPerScene: 3 }))')}`);
+                    p(`    ${pc.cyan('const buf = Buffer.from(await (await fetch(dataUrl)).arrayBuffer())')}`);
+                    p(`    ${pc.cyan('require("node:fs").writeFileSync("/tmp/filmstrip.png", buf)')}`);
+                    p(`    ${pc.cyan('JS')}`);
+                    p(`    ${pc.cyan(')"')}`);
+                    p('');
+                    p(`  ${pc.green('●')} ${pc.bold('Export video')}     ${pc.dim('render MP4 via WebCodecs')}`);
+                    p(`    ${pc.cyan(`playwriter -s 1 -e 'await state.page.evaluate(() => window.egakiSDK.export({ path: "output.mp4" }))'`)}`);
+                    p('');
+                    p(`  ${pc.green('●')} ${pc.bold('Seek')}            ${pc.dim('jump to a specific frame')}`);
+                    p(`    ${pc.cyan(`playwriter -s 1 -e 'await state.page.evaluate(() => window.egakiSDK.seekTo(120))'`)}`);
+                    p('');
+                }, 50);
+            });
+        },
         // HMR for file changes in the project.
         //
         // Entry MDX: the source string flows server → client through the RSC
@@ -352,13 +414,32 @@ export function video(options) {
                 return [];
             }
             if (isEntryMdx) {
-                invalidateVirtual([RESOLVED_APP, RESOLVED_MDX]);
+                // Every root .mdx is both a route entry (virtual:egaki-mdx / RSC
+                // flight) and a ?raw partial in virtual:egaki-modules (importable
+                // via `import X from './foo.mdx'`). Must refresh both paths:
+                // rsc:update for the entry source, and modules dep-accept for
+                // partials. Invalidating only RESOLVED_MODULES is not enough —
+                // Vite keeps the cached ?raw binding, so also invalidate every
+                // module graph node for this file (including `?raw`).
+                invalidateVirtual([RESOLVED_APP, RESOLVED_MDX, RESOLVED_MODULES]);
                 if (this.environment.name === 'client') {
+                    const fileMods = this.environment.moduleGraph.getModulesByFile(ctx.file);
+                    if (fileMods) {
+                        for (const mod of fileMods) {
+                            this.environment.moduleGraph.invalidateModule(mod);
+                        }
+                    }
                     ctx.server.environments.client?.hot.send({
                         type: 'custom',
                         event: 'rsc:update',
                         data: { file: ctx.file },
                     });
+                    const modulesMod = this.environment.moduleGraph.getModuleById(RESOLVED_MODULES);
+                    const updates = [
+                        ...(fileMods ? [...fileMods] : []),
+                        ...(modulesMod ? [modulesMod] : []),
+                    ];
+                    return updates;
                 }
                 return [];
             }
@@ -408,22 +489,29 @@ export function video(options) {
             arr.push(new RegExp(`^${PKG_NAME}`));
             arr.push(/^tweakpane/);
             config.resolve.noExternal = arr;
-            // Deduplicate motion packages so egaki's motion-timing virtual module
-            // patches the same JSAnimation class that motion/react uses. Without
-            // this, Vite can resolve motion-dom to different instances and
-            // prototype patches won't affect the user's animations.
-            // Always applied (not gated by hasMotion) because configEnvironment
-            // runs before configResolved where hasMotion is set. Harmless when
-            // motion isn't installed — dedupe on missing packages is a no-op.
-            config.resolve.dedupe = mergeUnique(config.resolve.dedupe, ['motion', 'motion-dom', 'motion-utils']);
+            // Baseline hint for Vite's built-in resolver (same list as the
+            // resolveId singleton plugin below). Real enforcement is the
+            // egaki:dedupe-singleton plugin — resolve.dedupe alone is not enough
+            // under pnpm when remotion is only a transitive dep of egaki.
+            config.resolve.dedupe = mergeUnique(config.resolve.dedupe, [...dedupePackages]);
             if (name === 'client') {
                 config.optimizeDeps ??= {};
                 config.optimizeDeps.exclude = mergeUnique(config.optimizeDeps.exclude, [PKG_NAME]);
+                // Prebundle safe-mdx as a single entry so its pure-CJS leaves
+                // (format via fault/micromark) stay internalized with CJS interop.
+                // Do NOT list format/fault as separate optimizeDeps entries — that
+                // splits them into named-only ESM chunks and the browser crashes with
+                // "does not provide an export named 'default'" (same bug Holocron hit
+                // when safe-mdx leaked to the client; see holocron vite CHANGELOG).
+                // Holocron's clean fix is keep safe-mdx server-only; egaki needs it on
+                // the client for MDX-in-browser, so correct prebundling is the fix.
                 config.optimizeDeps.include = mergeUnique(config.optimizeDeps.include, [
                     `${PKG_NAME} > spiceflow > @vitejs/plugin-rsc/vendor/react-server-dom/client.browser`,
                     `${PKG_NAME} > remotion`,
                     `${PKG_NAME} > @remotion/player`,
                     `${PKG_NAME} > safe-mdx`,
+                    'safe-mdx',
+                    'safe-mdx/parse',
                 ]);
             }
             if (name === 'rsc' || name === 'ssr') {
@@ -432,9 +520,39 @@ export function video(options) {
             }
         },
     };
+    // Force remotion / motion to a single copy across all importers, even when
+    // egaki is a transitive or file:-linked dep under pnpm. Mirrors
+    // spiceflow:dedupe-singleton (spiceflow/src/vite.tsx).
+    //
+    // Vite's resolve.dedupe sets basedir=root then walks node_modules/, but
+    // pnpm only symlinks direct deps at the root. Transitive deps stay buried
+    // in .pnpm/, so dedupe silently falls back to importer-based resolution
+    // and Player vs useVideoConfig load different remotion instances.
+    const dedupeSingletonPlugin = {
+        name: 'egaki:dedupe-singleton',
+        enforce: 'pre',
+        async resolveId(id, _importer, options) {
+            if (id.startsWith('.') ||
+                id.startsWith('/') ||
+                id.startsWith('\0') ||
+                id.includes('?')) {
+                return null;
+            }
+            const pkgName = id.startsWith('@')
+                ? id.split('/').slice(0, 2).join('/')
+                : (id.split('/')[0] ?? id);
+            if (!dedupePackages.has(pkgName))
+                return null;
+            return this.resolve(id, dedupeImporter, {
+                ...options,
+                skipSelf: true,
+            });
+        },
+    };
     return [
         videoPlugin,
         rscPackagePlugin,
+        dedupeSingletonPlugin,
         tailwindcss(),
         spiceflowPlugin({ entry: VIRTUAL_APP }),
         react(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "egaki",
-  "version": "0.9.0",
+  "version": "0.11.0",
   "type": "module",
   "description": "AI image, video, and speech generation CLI with MDX-to-video framework",
   "main": "./dist/cli/main.js",
@@ -94,9 +94,10 @@
     "@tailwindcss/vite": "^4.2.2",
     "@tweakpane/core": "^2.0.5",
     "@tweakpane/plugin-essentials": "^0.2.1",
+    "@vitejs/plugin-react": "^6.0.2",
     "ai": "6.0.103",
     "eventsource-parser": "^3.0.6",
-    "goke": "^6.12.1",
+    "goke": "^6.14.1",
     "js-yaml": "^4.1.1",
     "mediabunny": "^1.50.8",
     "moveable": "^0.53.0",
@@ -104,27 +105,23 @@
     "react": "19.2.7",
     "react-dom": "19.2.7",
     "remotion": "4.0.494",
-    "safe-mdx": "^1.11.3",
+    "safe-mdx": "^1.12.0",
     "shiki": "^4.2.0",
+    "spiceflow": "1.26.0-rsc.7",
     "string-dedent": "^3.0.2",
     "tailwindcss": "^4.3.0",
     "tweakpane": "^4.0.5",
+    "vite": "^8.0.10",
     "yaml": "^2.9.0",
     "zod": "^4.3.6",
-    "@vitejs/plugin-react": "^6.0.2",
-    "spiceflow": "1.26.0-rsc.7",
     "zustand": "^5.0.14"
   },
   "peerDependencies": {
-    "vite": ">=6",
     "motion": ">=12",
     "motion-dom": ">=12",
     "motion-utils": ">=12"
   },
   "peerDependenciesMeta": {
-    "vite": {
-      "optional": true
-    },
     "motion": {
       "optional": true
     },
@@ -141,7 +138,6 @@
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
     "@types/react": "^19.2.17",
-    "vite": "^8.0.10",
     "vitest": "^4.1.8"
   },
   "scripts": {

package/skills/egaki/SKILL.md

@@ -66,6 +66,20 @@ Agents should always pass `-m` explicitly to avoid the interactive picker.
 
 1. **`grok-imagine-video-1.5`** (xAI Grok)
 
+## Extracting small assets from a reference
+
+**Crop to the target object first** with an image tool, leaving a small margin,
+then pass that crop to `egaki image --input`. This makes small details easier for
+the model to see and reduces ambiguity about which object to preserve. In a
+switch-extraction comparison, a tight crop preserved the design much better than
+the full instrument image with the same prompt.
+
+Keep the prompt short: "Extract this switch exactly as it is, with a transparent
+background. Do not redesign it or change its shape, materials, or details."
+
+**Inspect the result:** generation can still redraw details. Use a direct crop
+and background masking when exact original pixels are required.
+
 ## Video generation note
 
 Video generation can be very slow (1-3 minutes per request). Always use a