egaki 0.8.0 → 0.10.0

package/CHANGELOG.md

@@ -2,6 +2,55 @@
 
 All notable changes to this project will be documented in this file.
 
+## 0.10.0
+
+1. **New `egaki dev` command — zero-config MDX video dev server.** Serve an `.mdx` file with no project setup at all: no `package.json`, no `vite.config.ts`, no `npm install`. All dependencies (react, remotion, vite) come from the egaki CLI's own installation:
+
+   ```bash
+   # Serve a single MDX file, no project setup
+   egaki dev video.mdx
+
+   # Serve the current directory (auto-discovers video.mdx > index.mdx > first .mdx)
+   egaki dev
+
+   # Fixed port + open browser
+   egaki dev intro.mdx --port 5199 --open
+   ```
+
+   Uses a random free port by default; `--port`, `--host`, and `--open` are available. Under the hood a shim `node_modules` with symlinks to egaki's own dependencies is created in the folder, so Vite's dep optimizer, Tailwind scans, and even editor TypeScript resolution work in scratch folders. If the folder has a foreign `node_modules` without egaki, you get a clear error with guidance.
+
+2. **SDK usage instructions printed on dev server startup** — after Vite's ready banner, the dev server prints copy-pasteable `window.egakiSDK` examples (getInfo, screenshot, filmstrip, export, seekTo via Playwriter) so agents reading terminal output immediately know how to control the running player.
+
+3. **`<AngledScreen>` hexagonal iris bokeh + new `chromaticAberration` prop** — the depth-of-field kernel is now a sparse 6-blade hexagonal iris, so bright points form hard-edged aperture disks instead of smoothing into a gaussian. The new `chromaticAberration` prop (default `0.45`) adds a radial R/B channel split that scales with local blur, so purple/cyan fringing reads strongest in the bokeh like a real lens.
+
+4. **Fixed "No video config found" with duplicate remotion copies** — under pnpm, when remotion was only a transitive dep of egaki (or the app installed remotion directly while `file:`-linking egaki), two physical copies split the Player context from `useVideoConfig`. All `remotion`, `@remotion/*`, and `motion` imports now converge on a single copy.
+
+5. **Fixed browser crash `"does not provide an export named 'default'"`** on portable npm installs of egaki — nested pure-CJS packages under safe-mdx (format, fault, micromark chain) were split into named-only ESM chunks by the dep optimizer. They now stay internalized with correct CJS interop.
+
+## 0.9.0
+
+1. **`<AngledScreen>` with true WebGL depth-of-field** — the 3D tilted screen component is now shader-based. Children DOM is captured per frame with Chromium's HTML-in-canvas API and rendered as a perspective-tilted plane in a WebGL2 fragment shader, giving true per-pixel depth. Depth drives bokeh blur (the exact Three.js BokehShader 41-tap ring kernel), fog toward `backgroundColor`, and subtle film grain. Available in MDX without imports:
+
+   ```mdx
+   # Hero duration=5s
+
+   <AngledScreen rotateX={9} rotateY={-17} translateZ={120} backgroundColor="#0a0608">
+     <Img src="/screenshot.png" style={{ width: '100%', borderRadius: 14 }} />
+   </AngledScreen>
+   ```
+
+   New depth-of-field props: `bokeh`, `aperture` (default 0.5), `maxBlur` (default 0.12), `focus` (default 0 = auto-track the near side so blur ramps toward the far edge), plus `fog` and `grainIntensity`. Transform props (`perspective`, `rotateX/Y/Z`, `translateX`, `translateZ`) keep the same semantics as before.
+
+   Requires Chrome 149+ with `chrome://flags/#canvas-draw-element`. When HTML-in-canvas is unsupported, the previous CSS version renders automatically as a fallback (also exported directly as `BasicAngledScreen`).
+
+2. **Tweakpane controls now follow animated props** — `useTweakpane`-backed components (like `AngledScreen`) previously froze all values at mount, so animated props like `translateX={interpolate(frame, ...)}` stayed stuck at frame 0. Untouched keys now return the live value every frame and their sliders visibly animate during playback. Once you touch a control, that key freezes to your value until remount, so manual overrides survive seeks. "Copy changes" now only reports keys you actually edited.
+
+3. **Fixed flat exports and screenshots of shader scenes** — web-renderer exports, SDK `screenshot()`, `filmstrip()`, and `export()` of scenes with HTML-in-canvas shaders came out without the shader output (the export scaffold is hidden, so Chromium produced no paint records for the capture). The composition root is now wrapped in a visible container for all web-renderer entry points, restoring shader output in every export path.
+
+4. **Fixed export hang with hidden `<AngledScreen>` instances** — instances inside hidden ancestors (LayoutTransition ghosts, inactive timed instances) never fired their paint callback, leaving an unreleased delayRender handle that stalled exports ~28s per frame. Handle registration is now gated on actual visibility.
+
+5. **Remotion bumped to 4.0.494** — required for WebGL contexts inside HTML-in-canvas components (earlier versions grabbed a 2D context on the offscreen canvas first, blocking WebGL).
+
 ## 0.8.0
 
 1. **`egaki bpm` command** — detect BPM of audio files locally using peak detection and interval analysis. No API call needed, runs entirely on device via `node-web-audio-api`:

package/dist/cli/cli.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../../src/cli/cli.ts"],"names":[],"mappings":";AAgGA,QAAA,MAAM,GAAG,yBAAgB,CAAA;AA2yCzB,OAAO,EAAE,GAAG,EAAE,CAAA"}
+{"version":3,"file":"cli.d.ts","sourceRoot":"","sources":["../../src/cli/cli.ts"],"names":[],"mappings":";AAgGA,QAAA,MAAM,GAAG,yBAAgB,CAAA;AA61CzB,OAAO,EAAE,GAAG,EAAE,CAAA"}

package/dist/cli/cli.js

@@ -138,6 +138,45 @@ cli
     .action(async () => {
     await showUsage();
 });
+// ─── dev command ─────────────────────────────────────────────────────────────
+cli
+    .command('dev [entry]', dedent `
+      Start the MDX video dev server with zero setup.
+      Pass an .mdx file (or a directory containing one) — no package.json,
+      vite.config.ts, or npm install needed. All dependencies (react,
+      remotion, vite) come from the egaki CLI's own installation.
+      Uses a random free port unless --port is given.
+    `)
+    .option('-p, --port [port]', z.coerce.number().int().describe('Fixed port (default: random free port)'))
+    .option('--host [host]', z.string().describe('Host to bind (default: localhost)'))
+    .option('--open', 'Open the player in the default browser')
+    .example('# Serve a single MDX file, no project setup')
+    .example('egaki dev video.mdx')
+    .example('# Serve the current directory (auto-discovers video.mdx)')
+    .example('egaki dev')
+    .example('# Fixed port + open browser')
+    .example('egaki dev intro.mdx --port 5199 --open')
+    .action(async (entry, options) => {
+    const { startDevServer } = await import('./dev-server.js');
+    const result = await startDevServer({
+        entry,
+        port: options.port,
+        host: options.host,
+    });
+    if (result instanceof Error) {
+        console.error(pc.red(result.message));
+        process.exit(1);
+    }
+    console.log();
+    console.log(`  ${pc.green('➜')}  egaki dev server running`);
+    console.log(`  ${pc.dim('root:')} ${result.root}`);
+    console.log(`  ${pc.dim('url:')}  ${pc.cyan(result.url)}`);
+    console.log();
+    if (options.open) {
+        const { openUrlInBrowser } = await import('./open-browser.js');
+        await openUrlInBrowser(result.url);
+    }
+});
 // ─── image command ───────────────────────────────────────────────────────────
 cli
     .command('image <prompt>', dedent `

package/dist/cli/dev-server.d.ts

@@ -0,0 +1,30 @@
+import type { ViteDevServer } from 'vite';
+export interface StartDevServerOptions {
+    /** Path to an .mdx entry file, or a directory containing .mdx files.
+     *  Defaults to the current working directory (auto-discovers video.mdx
+     *  > index.mdx > first .mdx alphabetically). */
+    entry?: string;
+    /** Fixed port. When omitted, a random free port is chosen. */
+    port?: number;
+    /** Host to bind. Defaults to localhost. */
+    host?: string;
+}
+export interface RunningDevServer {
+    url: string;
+    port: number;
+    root: string;
+    server: ViteDevServer;
+    close: () => Promise<void>;
+}
+/** Find a random free TCP port by binding to port 0. */
+export declare function findFreePort(host?: string): Promise<number>;
+/** Ensure bare imports resolve from the project root.
+ *
+ *  - egaki already resolvable from root → real project, do nothing
+ *  - no node_modules (or a CLI-owned shim) → (re)create the shim
+ *  - foreign node_modules without egaki → error with guidance
+ */
+export declare function ensureDependencyShim(root: string): Error | 'normal' | 'shim';
+/** Start the zero-config dev server. Returns Error | RunningDevServer. */
+export declare function startDevServer(options?: StartDevServerOptions): Promise<Error | RunningDevServer>;
+//# sourceMappingURL=dev-server.d.ts.map

package/dist/cli/dev-server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-server.d.ts","sourceRoot":"","sources":["../../src/cli/dev-server.ts"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,MAAM,CAAA;AAUzC,MAAM,WAAW,qBAAqB;IACpC;;oDAEgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2CAA2C;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,aAAa,CAAA;IACrB,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAA;CAC3B;AAED,wDAAwD;AACxD,wBAAsB,YAAY,CAAC,IAAI,SAAc,GAAG,OAAO,CAAC,MAAM,CAAC,CAStE;AAiDD;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CA4C5E;AAuFD,0EAA0E;AAC1E,wBAAsB,cAAc,CAClC,OAAO,GAAE,qBAA0B,GAClC,OAAO,CAAC,KAAK,GAAG,gBAAgB,CAAC,CA8CnC"}

package/dist/cli/dev-server.js

@@ -0,0 +1,266 @@
+// Zero-config dev server for egaki MDX videos.
+//
+// `egaki dev video.mdx` boots a Vite dev server with inline config
+// (configFile: false) — no package.json, vite.config.ts, or npm install
+// needed in the user's folder.
+//
+// Dependency resolution: when the folder has no usable node_modules, a
+// shim node_modules is created containing symlinks to egaki itself and
+// every egaki dependency (react, remotion, vite, ...) resolved from the
+// CLI's own installation. A plain fallback resolveId plugin is NOT enough
+// because Vite's dep optimizer resolves optimizeDeps.include entries with
+// an internal resolver (alias + vite:resolve only) that skips user
+// plugins — without real node_modules those includes fail and CJS deps
+// like safe-mdx break in the browser. The shim makes standard node
+// resolution work everywhere (vite:resolve, optimizer, tailwind scans).
+// The shim dir contains a .egaki-shim marker so it can be refreshed
+// idempotently and recognized as CLI-owned.
+//
+// Vite's cache dir is placed under ~/.cache/egaki/vite/<hash> so repeated
+// runs reuse the prebundle without polluting the user's folder further.
+import fs from 'node:fs';
+import net from 'node:net';
+import os from 'node:os';
+import path from 'node:path';
+import crypto from 'node:crypto';
+import { createRequire } from 'node:module';
+import { fileURLToPath } from 'node:url';
+import { video } from "../vite/vite-plugin.js";
+// Package root: this file runs from src/cli/ (dev) or dist/cli/ (published).
+// Going up 2 levels reaches the egaki package root either way.
+const __pkgRoot = path.resolve(fileURLToPath(new URL('.', import.meta.url)), '../..');
+const egakiRequire = createRequire(path.join(__pkgRoot, 'package.json'));
+const SHIM_MARKER = '.egaki-shim';
+/** Find a random free TCP port by binding to port 0. */
+export async function findFreePort(host = '127.0.0.1') {
+    return new Promise((resolve, reject) => {
+        const probe = net.createServer();
+        probe.once('error', reject);
+        probe.listen(0, host, () => {
+            const address = probe.address();
+            probe.close(() => resolve(address.port));
+        });
+    });
+}
+/** Locate the real directory of a package installed in egaki's own tree.
+ *  Tries pkg/package.json first (works for most packages), then falls
+ *  back to resolving the main entry and walking up to the package root
+ *  (for packages whose exports map hides ./package.json). */
+function packageDirFromEgaki(pkg) {
+    try {
+        return path.dirname(fs.realpathSync(egakiRequire.resolve(`${pkg}/package.json`)));
+    }
+    catch {
+        // Fall through to entry-based lookup
+    }
+    try {
+        let dir = path.dirname(fs.realpathSync(egakiRequire.resolve(pkg)));
+        while (true) {
+            const pkgJsonPath = path.join(dir, 'package.json');
+            if (fs.existsSync(pkgJsonPath)) {
+                const name = JSON.parse(fs.readFileSync(pkgJsonPath, 'utf-8')).name;
+                if (name === pkg)
+                    return dir;
+            }
+            const parent = path.dirname(dir);
+            if (parent === dir)
+                return undefined;
+            dir = parent;
+        }
+    }
+    catch {
+        return undefined;
+    }
+}
+/** All packages the shim should link: egaki itself plus every dependency
+ *  and (present) optional/peer dependency of the egaki package. */
+function shimPackageDirs() {
+    const pkgJson = JSON.parse(fs.readFileSync(path.join(__pkgRoot, 'package.json'), 'utf-8'));
+    const names = new Set([
+        ...Object.keys(pkgJson.dependencies ?? {}),
+        ...Object.keys(pkgJson.optionalDependencies ?? {}),
+        ...Object.keys(pkgJson.peerDependencies ?? {}),
+    ]);
+    const dirs = new Map();
+    dirs.set('egaki', fs.realpathSync(__pkgRoot));
+    for (const name of names) {
+        const dir = packageDirFromEgaki(name);
+        if (dir)
+            dirs.set(name, dir);
+    }
+    return dirs;
+}
+/** Ensure bare imports resolve from the project root.
+ *
+ *  - egaki already resolvable from root → real project, do nothing
+ *  - no node_modules (or a CLI-owned shim) → (re)create the shim
+ *  - foreign node_modules without egaki → error with guidance
+ */
+export function ensureDependencyShim(root) {
+    const nodeModulesDir = path.join(root, 'node_modules');
+    const isShim = fs.existsSync(path.join(nodeModulesDir, SHIM_MARKER));
+    if (!isShim) {
+        // Walk up from root looking for node_modules/egaki — a plain fs walk
+        // instead of createRequire().resolve() because test runners (tsx,
+        // vitest) patch Node's resolver and make it resolve 'egaki' from the
+        // wrong context, silently skipping shim creation.
+        let dir = root;
+        while (true) {
+            if (fs.existsSync(path.join(dir, 'node_modules', 'egaki', 'package.json'))) {
+                return 'normal';
+            }
+            const parent = path.dirname(dir);
+            if (parent === dir)
+                break;
+            dir = parent;
+        }
+        if (fs.existsSync(nodeModulesDir)) {
+            return new Error(`${nodeModulesDir} exists but 'egaki' is not installed there.\n` +
+                `Either run 'npm install egaki' in ${root}, or remove node_modules ` +
+                `to let 'egaki dev' manage dependencies automatically.`);
+        }
+    }
+    fs.mkdirSync(nodeModulesDir, { recursive: true });
+    fs.writeFileSync(path.join(nodeModulesDir, SHIM_MARKER), 'This node_modules was generated by `egaki dev`. Safe to delete.\n');
+    for (const [name, targetDir] of shimPackageDirs()) {
+        const linkPath = path.join(nodeModulesDir, name);
+        fs.mkdirSync(path.dirname(linkPath), { recursive: true });
+        const existing = fs.lstatSync(linkPath, { throwIfNoEntry: false });
+        if (existing) {
+            if (!existing.isSymbolicLink())
+                continue;
+            if (fs.readlinkSync(linkPath) === targetDir)
+                continue;
+            fs.unlinkSync(linkPath);
+        }
+        fs.symlinkSync(targetDir, linkPath, 'dir');
+    }
+    return 'shim';
+}
+/** Walk up from a real path and collect the parent of every ancestor
+ *  directory named node_modules. These parents are safe fs.allow roots
+ *  that cover hoisted/pnpm-store dependency locations. */
+function nodeModulesAncestorRoots(realPath) {
+    const roots = [];
+    let dir = realPath;
+    while (true) {
+        const parent = path.dirname(dir);
+        if (parent === dir)
+            break;
+        if (path.basename(dir) === 'node_modules')
+            roots.push(parent);
+        dir = parent;
+    }
+    return roots;
+}
+/** Compute fs.allow roots so Vite can serve framework + dependency files
+ *  that live outside the user's project root (in the CLI's install tree). */
+function computeFsAllow(root) {
+    const allow = new Set([root]);
+    const probes = [path.join(__pkgRoot, 'package.json')];
+    for (const id of ['react', 'react-dom', 'remotion', 'vite', 'spiceflow']) {
+        try {
+            probes.push(egakiRequire.resolve(id));
+        }
+        catch {
+            // Probe missing: skip
+        }
+    }
+    for (const probe of probes) {
+        try {
+            const real = fs.realpathSync(probe);
+            allow.add(path.dirname(real));
+            for (const ancestorRoot of nodeModulesAncestorRoots(real)) {
+                allow.add(ancestorRoot);
+            }
+        }
+        catch {
+            // Probe missing: skip
+        }
+    }
+    allow.add(fs.realpathSync(__pkgRoot));
+    return [...allow];
+}
+/** Resolve the entry option to { root, entryFile }.
+ *  Accepts a file path, a directory, or nothing (cwd). */
+function resolveEntry(entry) {
+    const target = path.resolve(process.cwd(), entry ?? '.');
+    if (!fs.existsSync(target)) {
+        return new Error(`entry not found: ${target}`);
+    }
+    const stat = fs.statSync(target);
+    if (stat.isDirectory()) {
+        const hasMdx = fs
+            .readdirSync(target)
+            .some((name) => name.endsWith('.mdx'));
+        if (!hasMdx) {
+            return new Error(`no .mdx files found in ${target}\nCreate a video.mdx file or pass one explicitly: egaki dev path/to/video.mdx`);
+        }
+        return { root: target };
+    }
+    if (!/\.mdx$/.test(target)) {
+        return new Error(`entry must be an .mdx file or a directory, got: ${target}`);
+    }
+    return { root: path.dirname(target), entryFile: target };
+}
+/** Warm up the server: the very first request can 500 transiently while
+ *  the dep optimizer discovers new deps and reloads the ssr program (a
+ *  browser recovers via auto-reload, but agents/tests hit the URL once).
+ *  Retry until the page serves 200 so the returned URL is ready to use. */
+async function warmUp(url, timeoutMs) {
+    const deadline = Date.now() + timeoutMs;
+    while (Date.now() < deadline) {
+        try {
+            const response = await fetch(url);
+            if (response.ok)
+                return;
+        }
+        catch {
+            // Server not accepting connections yet
+        }
+        await new Promise((resolve) => setTimeout(resolve, 300));
+    }
+    console.warn(`[egaki] dev server warmup did not reach 200 within ${timeoutMs}ms`);
+}
+/** Start the zero-config dev server. Returns Error | RunningDevServer. */
+export async function startDevServer(options = {}) {
+    const entryResult = resolveEntry(options.entry);
+    if (entryResult instanceof Error)
+        return entryResult;
+    const { root, entryFile } = entryResult;
+    const shimResult = ensureDependencyShim(root);
+    if (shimResult instanceof Error)
+        return shimResult;
+    const host = options.host ?? 'localhost';
+    const port = options.port ?? (await findFreePort());
+    const rootHash = crypto.createHash('sha256').update(root).digest('hex').slice(0, 12);
+    const cacheDir = path.join(os.homedir(), '.cache', 'egaki', 'vite', rootHash);
+    const { createServer } = await import('vite');
+    const server = await createServer({
+        configFile: false,
+        root,
+        cacheDir,
+        plugins: [video(entryFile ? { entry: entryFile } : undefined)],
+        resolve: {
+            dedupe: ['react', 'react-dom', 'remotion', '@remotion/player', '@remotion/media'],
+        },
+        server: {
+            port,
+            strictPort: true,
+            host,
+            fs: {
+                allow: computeFsAllow(root),
+            },
+        },
+    });
+    await server.listen();
+    const url = `http://${host}:${port}/`;
+    await warmUp(url, 60_000);
+    return {
+        url,
+        port,
+        root,
+        server,
+        close: () => server.close(),
+    };
+}

package/dist/cli/dev-server.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dev-server.test.d.ts.map

package/dist/cli/dev-server.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-server.test.d.ts","sourceRoot":"","sources":["../../src/cli/dev-server.test.ts"],"names":[],"mappings":""}

package/dist/cli/dev-server.test.js

@@ -0,0 +1,95 @@
+// Tests for the zero-config dev server (egaki dev).
+//
+// Creates a temp directory containing ONLY a video.mdx file — no
+// package.json, no vite.config.ts, no node_modules — and verifies the
+// dev server boots, serves HTML at /, and resolves all framework deps
+// from the CLI's own installation.
+import { describe, test, expect, afterAll } from 'vitest';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import dedent from 'string-dedent';
+import { startDevServer, findFreePort } from "./dev-server.js";
+const cleanups = [];
+afterAll(async () => {
+    for (const cleanup of cleanups) {
+        await cleanup();
+    }
+});
+function makeScratchProject() {
+    const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'egaki-dev-test-'));
+    const MDX = dedent `
+    ---
+    width: 1920
+    height: 1080
+    fps: 30
+    ---
+
+    # Hello duration=2
+
+    Zero-config dev server test.
+  `;
+    fs.writeFileSync(path.join(dir, 'video.mdx'), MDX);
+    cleanups.push(async () => {
+        fs.rmSync(dir, { recursive: true, force: true });
+    });
+    return dir;
+}
+describe('findFreePort', () => {
+    test('returns a valid port number', async () => {
+        const port = await findFreePort();
+        expect(port).toBeGreaterThan(0);
+        expect(port).toBeLessThan(65536);
+    });
+});
+describe('startDevServer', () => {
+    test('returns Error for missing entry', async () => {
+        const result = await startDevServer({ entry: '/nonexistent/path/video.mdx' });
+        expect(result).toBeInstanceOf(Error);
+        if (result instanceof Error) {
+            expect(result.message).toContain('entry not found');
+        }
+    });
+    test('returns Error for directory without mdx files', async () => {
+        const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'egaki-dev-empty-'));
+        cleanups.push(async () => {
+            fs.rmSync(dir, { recursive: true, force: true });
+        });
+        const result = await startDevServer({ entry: dir });
+        expect(result).toBeInstanceOf(Error);
+        if (result instanceof Error) {
+            expect(result.message).toContain('no .mdx files found');
+        }
+    });
+    test('returns Error for non-mdx file entry', async () => {
+        const dir = makeScratchProject();
+        const txtPath = path.join(dir, 'notes.txt');
+        fs.writeFileSync(txtPath, 'hi');
+        const result = await startDevServer({ entry: txtPath });
+        expect(result).toBeInstanceOf(Error);
+        if (result instanceof Error) {
+            expect(result.message).toContain('must be an .mdx file');
+        }
+    });
+    test('serves a scratch mdx file with no package.json or node_modules', async () => {
+        const dir = makeScratchProject();
+        const result = await startDevServer({
+            entry: path.join(dir, 'video.mdx'),
+        });
+        expect(result).not.toBeInstanceOf(Error);
+        const running = result;
+        cleanups.push(() => running.close());
+        expect(running.root).toBe(dir);
+        expect(running.url).toMatch(/^http:\/\/localhost:\d+\/$/);
+        const response = await fetch(running.url);
+        expect(response.status).toBe(200);
+        expect(response.headers.get('content-type')).toContain('text/html');
+        const html = await response.text();
+        // RSC streaming: the doctype shell arrives in a separate flush, so
+        // assert on stable player UI markup instead of '<html'.
+        expect(html).toContain('Export MP4');
+        // The dependency shim was created and is CLI-owned
+        expect(fs.existsSync(path.join(dir, 'node_modules', '.egaki-shim'))).toBe(true);
+        expect(fs.lstatSync(path.join(dir, 'node_modules', 'egaki')).isSymbolicLink()).toBe(true);
+    }, 120_000);
+});

package/dist/vite/angled-screen-shader.d.ts

@@ -0,0 +1,50 @@
+import { type CSSProperties, type ReactNode } from 'react';
+export interface AngledScreenProps {
+    children: ReactNode;
+    /** CSS perspective distance in px. Smaller = more dramatic. Default 1200. */
+    perspective?: number;
+    /** X-axis rotation in degrees (tilts top/bottom). Default 8. */
+    rotateX?: number;
+    /** Y-axis rotation in degrees (angles left/right). Default -12. */
+    rotateY?: number;
+    /** Z-axis rotation in degrees. Default 0. */
+    rotateZ?: number;
+    /** Shift the plane horizontally in px. Positive = right. Default 0. */
+    translateX?: number;
+    /** Push the plane forward/back in px. Positive = closer/larger. Default 0. */
+    translateZ?: number;
+    /** Enable depth-based bokeh blur. Default true. */
+    bokeh?: boolean;
+    /** Aperture — bigger values for shallower depth of field. Blur grows
+     *  linearly with distance from the focus plane, scaled by this.
+     *  Same semantics as Three's BokehPass. Default 0.5 (plugin value). */
+    aperture?: number;
+    /** Max blur in screen-UV units (fraction of frame size), the saturation
+     *  cap of the blur. Same as Three's `maxblur`. Default 0.12 (plugin value). */
+    maxBlur?: number;
+    /** Focus distance as a fraction of `perspective`. Default 0 = auto: focus
+     *  tracks the nearest visible point of the plane, so the near side stays
+     *  sharp and blur ramps progressively toward the far edge only. */
+    focus?: number;
+    /** Fog toward backgroundColor at the far depth (0-1). Default 0.35. */
+    fog?: number;
+    /** Film grain intensity. Default 0.02. */
+    grainIntensity?: number;
+    /** Chromatic aberration strength. RGB channels separate along the radial
+     *  axis from frame center, scaled up by local blur so fringing reads
+     *  strongest in the bokeh (like real lens CA on the reference photos).
+     *  0 = off. Default 0.45. */
+    chromaticAberration?: number;
+    /** Background color behind the tilted screen. Default '#000000'. */
+    backgroundColor?: string;
+    /** Width of the inner content wrapper. Default '80%'. */
+    width?: string | number;
+    /** Height of the inner content wrapper. Default 'auto'. */
+    height?: string | number;
+    /** Render normalized depth as grayscale for debugging the DOF ramp. */
+    debug?: boolean;
+    /** Optional inline style on the outer container. */
+    style?: CSSProperties;
+}
+export declare function AngledScreen(props: AngledScreenProps): import("react").JSX.Element;
+//# sourceMappingURL=angled-screen-shader.d.ts.map

package/dist/vite/angled-screen-shader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"angled-screen-shader.d.ts","sourceRoot":"","sources":["../../src/vite/angled-screen-shader.tsx"],"names":[],"mappings":"AA4EA,OAAO,EAAwC,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKhG,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAA;IAGnB,6EAA6E;IAC7E,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,6CAA6C;IAC7C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,uEAAuE;IACvE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,MAAM,CAAA;IAGnB,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;2EAEuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;mFAC+E;IAC/E,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;uEAEmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAA;IAGd,uEAAuE;IACvE,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;iCAG6B;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAE5B,oEAAoE;IACpE,eAAe,CAAC,EAAE,MAAM,CAAA;IAGxB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAExB,uEAAuE;IACvE,KAAK,CAAC,EAAE,OAAO,CAAA;IAEf,oDAAoD;IACpD,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AAwPD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BA8WpD"}