egaki 0.9.0 → 0.10.0

package/src/cli/dev-server.ts

@@ -0,0 +1,303 @@
+// 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 type { ViteDevServer } from 'vite'
+import { video } from '../vite/vite-plugin.ts'
+
+// 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'
+
+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 async function findFreePort(host = '127.0.0.1'): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const probe = net.createServer()
+    probe.once('error', reject)
+    probe.listen(0, host, () => {
+      const address = probe.address() as net.AddressInfo
+      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: string): string | undefined {
+  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(): Map<string, string> {
+  const pkgJson = JSON.parse(
+    fs.readFileSync(path.join(__pkgRoot, 'package.json'), 'utf-8'),
+  )
+  const names = new Set<string>([
+    ...Object.keys(pkgJson.dependencies ?? {}),
+    ...Object.keys(pkgJson.optionalDependencies ?? {}),
+    ...Object.keys(pkgJson.peerDependencies ?? {}),
+  ])
+  const dirs = new Map<string, string>()
+  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: string): Error | 'normal' | 'shim' {
+  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: string): string[] {
+  const roots: string[] = []
+  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: string): string[] {
+  const allow = new Set<string>([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: string | undefined): Error | { root: string; entryFile?: string } {
+  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: string, timeoutMs: number): Promise<void> {
+  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: StartDevServerOptions = {},
+): Promise<Error | RunningDevServer> {
+  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/src/vite/angled-screen-shader.tsx

@@ -11,7 +11,10 @@
  *   intersection → plane-local UV → sample DOM texture
  *
  * The intersection distance gives true per-pixel depth, which drives:
- *   - bokeh blur (poisson-disc, radius grows with distance from focus)
+ *   - bokeh blur (sparse 6-blade hex iris, radius grows with distance from
+ *     focus — fewer taps so the aperture shape reads as hard disks instead
+ *     of smoothing into a gaussian)
+ *   - chromatic aberration (radial R/B split, stronger in the bokeh)
  *   - fog toward backgroundColor (like the original Three.js plugin's
  *     scene fog, unframer-private/plugin-angled-screen BokehPass setup)
  *   - film grain (from the plugin's filmGrainShader, u_time-seeded)
@@ -113,6 +116,11 @@ export interface AngledScreenProps {
   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
@@ -159,6 +167,7 @@ uniform float u_focusDist;  // focus distance in px along the ray
 uniform float u_aspect;     // width / height, for circular bokeh
 uniform float u_fog;
 uniform float u_grain;
+uniform float u_ca;         // chromatic aberration strength
 uniform vec4 u_background;
 uniform float u_debug;
 uniform float u_time;
@@ -170,21 +179,26 @@ float rand(vec2 co) {
   return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
 }
 
-// Three.js BokehShader ring kernel (Martins Upitis lens blur):
-// 16 taps at radius 1.0, 8 at 0.9, 8 at 0.7, 8 at 0.4, plus center = 41.
-const vec2 RING1[16] = vec2[](
-  vec2(0.0, 0.4), vec2(0.15, 0.37), vec2(0.29, 0.29), vec2(-0.37, 0.15),
-  vec2(0.40, 0.0), vec2(0.37, -0.15), vec2(0.29, -0.29), vec2(-0.15, -0.37),
-  vec2(0.0, -0.4), vec2(-0.15, 0.37), vec2(-0.29, 0.29), vec2(0.37, 0.15),
-  vec2(-0.4, 0.0), vec2(-0.37, -0.15), vec2(-0.29, -0.29), vec2(0.15, -0.37)
+// Sparse 6-blade hexagonal iris. Far fewer taps than the 41-sample Martins
+// Upitis kernel so the aperture SHAPE reads as discrete hex disks instead of
+// smoothing into a gaussian. Outer ring is weighted heavier so bright points
+// form hard-edged bokeh blobs (the look of real lens DOF on the refs).
+// Unit circle coords at radius 1.0 / 0.55.
+const vec2 HEX_OUTER[6] = vec2[](
+  vec2( 1.0000,  0.0000),
+  vec2( 0.5000,  0.8660),
+  vec2(-0.5000,  0.8660),
+  vec2(-1.0000,  0.0000),
+  vec2(-0.5000, -0.8660),
+  vec2( 0.5000, -0.8660)
 );
-const vec2 RING9[8] = vec2[](
-  vec2(0.15, 0.37), vec2(-0.37, 0.15), vec2(0.37, -0.15), vec2(-0.15, -0.37),
-  vec2(-0.15, 0.37), vec2(0.37, 0.15), vec2(-0.37, -0.15), vec2(0.15, -0.37)
-);
-const vec2 RING7[8] = vec2[](
-  vec2(0.29, 0.29), vec2(0.40, 0.0), vec2(0.29, -0.29), vec2(0.0, -0.4),
-  vec2(-0.29, 0.29), vec2(-0.4, 0.0), vec2(-0.29, -0.29), vec2(0.0, 0.4)
+const vec2 HEX_MID[6] = vec2[](
+  vec2( 0.5500,  0.0000),
+  vec2( 0.2750,  0.4763),
+  vec2(-0.2750,  0.4763),
+  vec2(-0.5500,  0.0000),
+  vec2(-0.2750, -0.4763),
+  vec2( 0.2750, -0.4763)
 );
 
 // Intersect the camera ray through screen uv suv with the tilted plane.
@@ -219,6 +233,17 @@ vec4 sampleScene(vec2 suv) {
   return mix(u_background, c, coverage);
 }
 
+// Per-channel sample with chromatic aberration: R and B pull apart along
+// the radial axis from frame center (classic lens CA purple/cyan fringing).
+vec4 sampleSceneCA(vec2 suv, vec2 caOffset) {
+  float r = sampleScene(suv + caOffset).r;
+  float g = sampleScene(suv).g;
+  float b = sampleScene(suv - caOffset).b;
+  // Coverage/alpha from the green (unshifted) sample keeps silhouette stable.
+  vec4 mid = sampleScene(suv);
+  return vec4(r, g, b, mid.a);
+}
+
 void main() {
   vec4 bg = u_background;
 
@@ -243,27 +268,41 @@ void main() {
   // stays tack sharp. Background pixels (no hit) count as far away, so the
   // plane silhouette melts softly where it is out of focus.
   float factor = hit ? max(t - u_focusDist, 0.0) / u_perspective : 1.0;
-  vec2 dofblur = vec2(clamp(factor * u_aperture, 0.0, u_maxblur)) * u_bokehEnabled;
+  float blurAmt = clamp(factor * u_aperture, 0.0, u_maxblur) * u_bokehEnabled;
+  vec2 dofblur = vec2(blurAmt);
 
   vec2 aspectcorrect = vec2(1.0, u_aspect);
-  vec2 dofblur9 = dofblur * 0.9;
-  vec2 dofblur7 = dofblur * 0.7;
-  vec2 dofblur4 = dofblur * 0.4;
 
-  vec4 col = sampleScene(v_uv);
-  for (int i = 0; i < 16; i++) {
-    col += sampleScene(v_uv + RING1[i] * aspectcorrect * dofblur);
-  }
-  for (int i = 0; i < 8; i++) {
-    col += sampleScene(v_uv + RING9[i] * aspectcorrect * dofblur9);
-  }
-  for (int i = 0; i < 8; i++) {
-    col += sampleScene(v_uv + RING7[i] * aspectcorrect * dofblur7);
+  // Radial CA direction from frame center. Strength grows with local blur so
+  // sharp regions stay clean and only the bokeh fringes with purple/cyan.
+  vec2 fromCenter = v_uv - 0.5;
+  float radial = length(fromCenter);
+  vec2 caDir = radial > 1e-5 ? fromCenter / radial : vec2(1.0, 0.0);
+  // Base fringe + blur-scaled fringe. u_ca ~0.45 reads like a real lens on
+  // the reference photos without turning the whole frame into a prism.
+  float caAmt = u_ca * (0.0015 + blurAmt * 0.55);
+  vec2 caOffset = caDir * caAmt * aspectcorrect;
+
+  // Sparse hex gather. Outer ring weight 2.0 so the 6-blade iris is visible
+  // as hard bokeh disks; mid ring 1.0 fills the disk; center 1.0 anchors.
+  // Total weight = 6*2 + 6*1 + 1 = 19.
+  const float W_OUTER = 2.0;
+  const float W_MID = 1.0;
+  const float W_CENTER = 1.0;
+  vec4 col = sampleSceneCA(v_uv, caOffset) * W_CENTER;
+  for (int i = 0; i < 6; i++) {
+    col += sampleSceneCA(v_uv + HEX_OUTER[i] * aspectcorrect * dofblur, caOffset) * W_OUTER;
   }
-  for (int i = 0; i < 8; i++) {
-    col += sampleScene(v_uv + RING7[i] * aspectcorrect * dofblur4);
+  for (int i = 0; i < 6; i++) {
+    col += sampleSceneCA(v_uv + HEX_MID[i] * aspectcorrect * dofblur, caOffset) * W_MID;
   }
-  col /= 41.0;
+  col /= (6.0 * W_OUTER + 6.0 * W_MID + W_CENTER);
+
+  // Mild highlight bias: bright samples punch through more (classic optical
+  // bokeh where speculars form bright disks instead of averaging down).
+  // Applied as a soft lift so it doesn't blow whites on already-bright UI.
+  float luma = dot(col.rgb, vec3(0.299, 0.587, 0.114));
+  col.rgb += col.rgb * blurAmt * 1.8 * smoothstep(0.55, 0.95, luma);
 
   // Fog toward background with depth (plugin's THREE.Fog equivalent)
   col.rgb = mix(col.rgb, bg.rgb, u_fog * depth01 * (hit ? 1.0 : 0.0));
@@ -305,6 +344,7 @@ const UNIFORM_NAMES = [
   'u_aspect',
   'u_fog',
   'u_grain',
+  'u_ca',
   'u_background',
   'u_debug',
   'u_time',
@@ -393,13 +433,19 @@ export function AngledScreen(props: AngledScreenProps) {
       step: 0.01,
     },
     fog: { value: props.fog ?? 0.35, min: 0, max: 1, step: 0.01 },
-    grainIntensity: { value: props.grainIntensity ?? 0.02, min: 0, max: 0.2, step: 0.005 },
+    grainIntensity: { value: props.grainIntensity ?? 0.02, min: 0, max: 0.3, step: 0.005 },
+    chromaticAberration: {
+      value: props.chromaticAberration ?? 0.45,
+      min: 0,
+      max: 2,
+      step: 0.01,
+    },
     backgroundColor: props.backgroundColor ?? '#000000',
     debug: props.debug ?? false,
   })
 
   const { perspective, rotateX, rotateY, rotateZ, translateX, translateZ } = tp
-  const { aperture, maxBlur, focus, fog, grainIntensity } = tp
+  const { aperture, maxBlur, focus, fog, grainIntensity, chromaticAberration } = tp
   const { bokeh, debug, backgroundColor } = tp
   const time = frame / fps
 
@@ -557,6 +603,7 @@ export function AngledScreen(props: AngledScreenProps) {
       if (locs.u_aspect) gl.uniform1f(locs.u_aspect, compW / compH)
       if (locs.u_fog) gl.uniform1f(locs.u_fog, fog)
       if (locs.u_grain) gl.uniform1f(locs.u_grain, grainIntensity)
+      if (locs.u_ca) gl.uniform1f(locs.u_ca, chromaticAberration)
       if (locs.u_background) gl.uniform4fv(locs.u_background, parseHexColor(backgroundColor))
       if (locs.u_debug) gl.uniform1f(locs.u_debug, debug ? 1 : 0)
       if (locs.u_time) gl.uniform1f(locs.u_time, time)
@@ -594,7 +641,7 @@ export function AngledScreen(props: AngledScreenProps) {
     },
     [
       compW, compH, perspective, rotateX, rotateY, rotateZ, translateX, translateZ,
-      bokeh, aperture, maxBlur, focus, fog, grainIntensity,
+      bokeh, aperture, maxBlur, focus, fog, grainIntensity, chromaticAberration,
       backgroundColor, debug, time,
     ],
   )