egaki 0.6.0 → 0.7.0

package/src/vite/angled-screen.tsx

@@ -0,0 +1,214 @@
+'use client'
+
+/**
+ * AngledScreen — CSS 3D perspective wrapper with fake bokeh depth-of-field.
+ *
+ * Wraps any children (images, videos, divs) in a 3D-transformed plane using
+ * CSS `perspective` + `transform: rotateX/Y/Z`. Simulates depth-of-field
+ * via `backdrop-filter: blur()` masked with `mask-image: linear-gradient()`
+ * so only the far edge of the content gets blurred.
+ *
+ * The blur direction is auto-detected from the rotation angles: whichever
+ * edge is furthest from the camera gets blurred. Override with bokehDirection.
+ *
+ * IMPORTANT: the blur overlay lives OUTSIDE the 3D transform as a sibling
+ * in the outer container. backdrop-filter does not work inside CSS 3D
+ * transformed elements (the transform compositing layer breaks backdrop
+ * sampling and blurs everything regardless of mask). Placing it outside
+ * means it blurs the already-composited 3D scene in normal 2D space.
+ *
+ * Set `debug` to visualize the mask gradient as green (sharp) / red (blur).
+ */
+
+import { type CSSProperties, type ReactNode } from 'react'
+import { useTweakpane } from './tweakpane-hook.tsx'
+
+export interface AngledScreenProps {
+  children: ReactNode
+
+  // --- 3D transform ---
+  /** 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
+  /** Push the plane forward/back in px. Positive = closer/larger,
+   *  negative = further/smaller (same visual effect as scale). Default 0. */
+  translateZ?: number
+  /** Transform origin. Default '50% 50%'. */
+  transformOrigin?: string
+
+  // --- Bokeh (fake depth-of-field) ---
+  /** Enable bokeh blur overlay. Default true. */
+  bokeh?: boolean
+  /** Max blur radius in px at the far edge. Default 12. */
+  bokehBlur?: number
+  /** Override which edge gets blurred. Auto-detected from rotation if omitted. */
+  bokehDirection?: 'top' | 'bottom' | 'left' | 'right'
+  /** Where blur starts (0-1). 0 = blur from the very near edge, 1 = no blur.
+   *  The transition ramp is a fixed 25% after this point. Default 0.3. */
+  bokehOffset?: number
+
+  // --- Background ---
+  /** Background color behind the tilted screen. Default '#000000'. */
+  backgroundColor?: string
+
+  // --- Sizing ---
+  /** Width of the screen content. Default '80%'. */
+  width?: string | number
+  /** Height of the screen content. Default 'auto'. */
+  height?: string | number
+
+  /** Show the blur mask as green (sharp) / red (blur) overlay for debugging. */
+  debug?: boolean
+
+  /** Optional inline style on the outer container. */
+  style?: CSSProperties
+}
+
+const GRADIENT_DIRECTIONS: Record<string, string> = {
+  top: 'to top',
+  bottom: 'to bottom',
+  left: 'to left',
+  right: 'to right',
+}
+
+/**
+ * Auto-detect which edge is furthest from camera based on rotation.
+ * CSS rotateY(-20deg): right edge comes toward viewer, LEFT is far → blur left.
+ * CSS rotateY(+20deg): left edge comes toward viewer, RIGHT is far → blur right.
+ * CSS rotateX(+10deg): top edge comes toward viewer, BOTTOM is far → blur bottom.
+ * CSS rotateX(-10deg): bottom edge comes toward viewer, TOP is far → blur top.
+ * Picks the axis with the larger rotation angle.
+ */
+function autoDirection(rotateX: number, rotateY: number): 'top' | 'bottom' | 'left' | 'right' {
+  if (Math.abs(rotateY) >= Math.abs(rotateX)) {
+    return rotateY < 0 ? 'left' : 'right'
+  }
+  return rotateX > 0 ? 'bottom' : 'top'
+}
+
+export function AngledScreen(props: AngledScreenProps) {
+  const {
+    children,
+    transformOrigin = '50% 50%',
+    bokehDirection,
+    backgroundColor = '#000000',
+    width = '80%',
+    height = 'auto',
+    style,
+  } = props
+
+  const tp = useTweakpane('AngledScreen', {
+    perspective: { value: props.perspective ?? 1200, min: 100, max: 3000, step: 10 },
+    rotateX: { value: props.rotateX ?? 8, min: -90, max: 90, step: 0.5 },
+    rotateY: { value: props.rotateY ?? -12, min: -90, max: 90, step: 0.5 },
+    rotateZ: { value: props.rotateZ ?? 0, min: -180, max: 180, step: 0.5 },
+    translateZ: { value: props.translateZ ?? 0, min: -500, max: 500, step: 1 },
+    bokeh: props.bokeh ?? true,
+    bokehBlur: { value: props.bokehBlur ?? 12, min: 0, max: 50, step: 0.5 },
+    bokehOffset: { value: props.bokehOffset ?? 0.3, min: 0, max: 1, step: 0.01 },
+    debug: props.debug ?? false,
+  })
+
+  const { perspective, rotateX, rotateY, rotateZ, translateZ } = tp
+  const { bokeh, bokehBlur, bokehOffset } = tp
+  const showDebug = tp.debug as boolean
+  const direction = bokehDirection ?? autoDirection(rotateX, rotateY)
+  const gradientDir = GRADIENT_DIRECTIONS[direction] || 'to right'
+  const startPct = `${bokehOffset * 100}%`
+  const endPct = `${Math.min((bokehOffset + 0.25) * 100, 100)}%`
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Moving layer: receives user style (translateX, etc.) */}
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          backgroundColor,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          ...style,
+        }}
+      >
+        {/* Perspective container */}
+        <div
+          style={{
+            perspective: `${perspective}px`,
+            perspectiveOrigin: '50% 50%',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            width: '100%',
+            height: '100%',
+          }}
+        >
+          {/* Transformed plane */}
+          <div
+            style={{
+              transform: [
+                `rotateX(${rotateX}deg)`,
+                `rotateY(${rotateY}deg)`,
+                `rotateZ(${rotateZ}deg)`,
+                translateZ !== 0 ? `translateZ(${translateZ}px)` : '',
+              ]
+                .filter(Boolean)
+                .join(' '),
+              transformOrigin,
+              width: typeof width === 'number' ? `${width}px` : width,
+              height: typeof height === 'number' ? `${height}px` : height,
+              position: 'relative',
+              borderRadius: '12px',
+              overflow: 'hidden',
+            }}
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+
+      {/* Bokeh blur: fixed in screen space, does NOT move with the image.
+          Acts like a camera lens DOF effect. Lives outside the moving layer
+          and outside the 3D transform (backdrop-filter is broken inside
+          CSS 3D transformed elements). */}
+      {bokeh && bokehBlur > 0 && !showDebug && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            backdropFilter: `blur(${bokehBlur}px)`,
+            WebkitBackdropFilter: `blur(${bokehBlur}px)`,
+            maskImage: `linear-gradient(${gradientDir}, transparent ${startPct}, black ${endPct})`,
+            WebkitMaskImage: `linear-gradient(${gradientDir}, transparent ${startPct}, black ${endPct})`,
+            pointerEvents: 'none',
+          }}
+        />
+      )}
+
+      {/* Debug: show the mask shape as green (sharp) to red (blur) */}
+      {showDebug && (
+        <div
+          style={{
+            position: 'absolute',
+            inset: 0,
+            background: `linear-gradient(${gradientDir}, rgba(0,255,0,0.4) ${startPct}, rgba(255,0,0,0.4) ${endPct})`,
+            pointerEvents: 'none',
+            zIndex: 999,
+          }}
+        />
+      )}
+    </div>
+  )
+}

package/src/vite/app.tsx

@@ -0,0 +1,197 @@
+/**
+ * Spiceflow entry for the video framework.
+ *
+ * The server has two jobs:
+ *
+ * 1. Deliver the MDX source string to the client through the RSC flight
+ *    payload. All regular MDX processing (parsing, section splitting,
+ *    expression evaluation, safe-mdx rendering) happens in the browser
+ *    inside MdxClientApp (mdx-client.tsx, 'use client'), so MDX expression
+ *    props can be functions and user components don't need 'use client'.
+ *
+ * 2. Render <Server> slots. <Server> is a reserved MDX element marking a
+ *    subtree as server components: its children are rendered HERE in the
+ *    RSC environment (async allowed, promises stream through flight) and
+ *    passed to the client as serverSlots keyed by the node's start
+ *    position. The MDX string sent to the client has each <Server> block
+ *    blanked to a self-closing marker with newline padding, so every
+ *    position (slot keys, data-markdown-line, sourcemaps) stays aligned
+ *    with the original file and the client never parses server-only
+ *    content.
+ *
+ * NOTE: Relative imports MUST include file extensions (.tsx, .ts) for the
+ * RSC module runner to resolve them correctly within noExternal packages.
+ */
+
+import path from 'node:path'
+import { createRequire } from 'node:module'
+import type { ReactNode } from 'react'
+import { Spiceflow } from 'spiceflow'
+import { SafeMdxRenderer } from 'safe-mdx'
+import { mdxParse } from 'safe-mdx/parse'
+import type { EagerModules } from 'safe-mdx/parse'
+import { entries, entryPaths, defaultRoute, projectRoot, folderName } from 'virtual:egaki-mdx'
+import { Head } from 'spiceflow/react'
+import {
+  findServerNodes,
+  blankServerContents,
+  collectServerImportSources,
+  filterImportNodesToModules,
+  wrapGenerateNodes,
+} from './server-mdx.ts'
+import { parseFrontmatter, buildMdxScope } from './mdx-parse.ts'
+import { MdxClientApp } from './mdx-client.tsx'
+import * as mdxVideoExports from './mdx-video.tsx'
+import {
+  GeneratedImage,
+  GeneratedVideo,
+  GeneratedSpeech,
+} from './server-components.tsx'
+import {
+  getGenerationProgress,
+  onProgressChange,
+  type GenerationProgressEvent,
+} from '../cli/cached-generate.js'
+
+/** Dynamically import the modules referenced inside <Server> blocks. */
+async function importServerModules(ast: any): Promise<EagerModules> {
+  const requireFromRoot = createRequire(path.join(projectRoot, 'package.json'))
+
+  const modules: EagerModules = {}
+  for (const source of collectServerImportSources(ast)) {
+    if (/\.mdx?$/.test(source)) {
+      console.warn(`[egaki] imported .mdx files inside <Server> are not supported yet: ${source}`)
+      continue
+    }
+    try {
+      const isPathLike = source.startsWith('.') || source.startsWith('/')
+      const id = isPathLike
+        ? path.resolve(projectRoot, source)
+        : requireFromRoot.resolve(source)
+      modules[source] = await import(/* @vite-ignore */ id)
+    } catch (e) {
+      console.warn(`[egaki] failed to import <Server> module ${source}:`, (e as Error).message)
+    }
+  }
+  return modules
+}
+
+/** Build the server components map from the mdx-video namespace import.
+ *  mdx-video.tsx has 'use client', so each named export in the namespace
+ *  is an individual client reference. */
+const serverComponents: Record<string, any> = {
+  ...(mdxVideoExports as any),
+  GeneratedImage,
+  GeneratedVideo,
+  GeneratedSpeech,
+}
+
+/** All route paths available for navigation, sorted. */
+const availableEntries = Object.keys(entries ||{}).sort()
+
+/** Render a single MDX entry as a page. Shared by all route handlers. */
+async function renderMdxPage(routePath: string) {
+  const mdxSource = (entries as Record<string, string>)[routePath]
+  const currentEntryPath = (entryPaths as Record<string, string>)[routePath]
+  if (mdxSource == null || currentEntryPath == null) return null
+
+  const title = routePath
+    ? `${routePath} · ${folderName} · egaki`
+    : `${folderName} · egaki`
+
+  let ast: ReturnType<typeof mdxParse>
+  try {
+    ast = mdxParse(mdxSource)
+  } catch (e) {
+    console.error('[egaki] MDX parse error (server):', e)
+    return <>
+      <Head><Head.Title>{title}</Head.Title></Head>
+      <MdxClientApp mdx={mdxSource} serverSlots={{}} entryPath={currentEntryPath} availableEntries={availableEntries} currentRoute={routePath} />
+    </>
+  }
+
+  wrapGenerateNodes(ast)
+  const serverNodes = findServerNodes(ast)
+
+  if (serverNodes.length === 0) {
+    return <>
+      <Head><Head.Title>{title}</Head.Title></Head>
+      <MdxClientApp mdx={mdxSource} serverSlots={{}} entryPath={currentEntryPath} availableEntries={availableEntries} currentRoute={routePath} />
+    </>
+  }
+
+  const eagerModules = await importServerModules(ast)
+  const importNodes = filterImportNodesToModules(
+    ast.children.filter((node: any) => node.type === 'mdxjsEsm'),
+    Object.keys(eagerModules),
+  )
+
+  const { fps, bpm } = parseFrontmatter(ast)
+  const serverScope = buildMdxScope(fps, bpm)
+  const serverEvaluateOptions = { functions: true }
+
+  const serverSlots: Record<string, ReactNode> = {}
+  for (const { key, node } of serverNodes) {
+    if (key in serverSlots) {
+      console.warn(
+        `[egaki] multiple <Server> elements start on line ${key}; ` +
+        `only the first one renders. Put each <Server> on its own line.`,
+      )
+      continue
+    }
+    serverSlots[key] = (
+      <SafeMdxRenderer
+        markdown={mdxSource}
+        mdast={{ type: 'root', children: [...importNodes, ...node.children] } as any}
+        components={serverComponents}
+        modules={eagerModules}
+        baseUrl="./"
+        scope={serverScope}
+        evaluateOptions={serverEvaluateOptions}
+        onError={(e) => console.warn('[egaki] <Server> slot:', e.message)}
+      />
+    )
+  }
+
+  const clientMdx = blankServerContents(mdxSource, serverNodes)
+  return <>
+    <Head><Head.Title>{title}</Head.Title></Head>
+    <MdxClientApp mdx={clientMdx} serverSlots={serverSlots} entryPath={currentEntryPath} availableEntries={availableEntries} currentRoute={routePath} />
+  </>
+}
+
+// Build the Spiceflow app with explicit routes for each discovered entry.
+// Using explicit routes instead of a wildcard (/*) avoids intercepting
+// the /api/generation-progress GET endpoint. Spiceflow's .page() registers
+// both GET and POST, so a wildcard would shadow the API route.
+function buildApp() {
+  let app = new Spiceflow()
+    .get('/api/generation-progress', async function* (): AsyncGenerator<GenerationProgressEvent> {
+      let resolve: (() => void) | null = null
+      const unsubscribe = onProgressChange(() => resolve?.())
+
+      try {
+        while (true) {
+          const progress = getGenerationProgress()
+          yield progress
+          if (progress.summary.total === 0) return
+
+          await new Promise<void>((r) => { resolve = r })
+          resolve = null
+        }
+      } finally {
+        unsubscribe()
+      }
+    })
+    .page('/', () => renderMdxPage(defaultRoute))
+
+  // Register each entry at its route path. The default also gets its
+  // own /<name> route so the dropdown can navigate to it from other pages.
+  for (const route of availableEntries) {
+    app = app.page(`/${route}`, () => renderMdxPage(route)) as any
+  }
+
+  return app
+}
+
+export const app = buildApp()