egaki 0.6.0 → 0.7.0

package/dist/vite/server-components.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Server components for AI media generation in MDX <Server> blocks.
+ *
+ * No 'use client' directive: these execute in the RSC environment (async,
+ * filesystem access, API calls). They are auto-wrapped in <Server> by
+ * wrapGenerateNodes() in server-mdx.ts, so users write them bare in MDX.
+ *
+ * Each component delegates to the cached generate functions from egaki/generate
+ * (which handle caching, deduplication, stale management, and progress tracking
+ * via cachedGenerate) and passes the resolved URL to the client wrapper component.
+ *
+ * The server components add a thin layer on top for:
+ * - Composition-aware defaults (aspect ratio from dimensions)
+ * - Asset path resolution (string paths → Uint8Array)
+ * - Fallback lookup for RSC streaming (show stale while generating)
+ * - RSC flight streaming (pass promise to client wrapper)
+ */
+import type { ComponentProps } from 'react';
+import type { GenerateImageOptions } from '../cli/generate.js';
+import type { GenerateVideoOptions } from '../cli/generate.js';
+import type { GenerateSpeechOptions } from '../cli/speech-generate.js';
+import type { Img, Audio, Video } from './mdx-video.tsx';
+export { getGenerationProgress, onProgressChange, type GenerationProgressEvent, type GenerationProgressSummary, type GenerationProgressEntry, type GenerationError, type GenerationEntry, } from '../cli/cached-generate.js';
+export { stableJsonKey, hashKey, promptPrefix, findCachedFile, findFallbackFile } from '../cli/cache-utils.js';
+/** Resolve a path prop to an absolute filesystem path.
+ *  `/photo.png` → `{projectRoot}/public/photo.png` if the file exists.
+ *  Relative paths resolve against projectRoot.
+ *  Absolute paths and URLs pass through unchanged. */
+export declare function resolveAssetPath(p: string): Promise<string>;
+/** Resolve a path and read it as bytes. */
+export declare function readAssetBytes(p: string): Promise<Uint8Array>;
+type GeneratedImageGenProps = Omit<GenerateImageOptions, 'count' | 'inputImages' | 'maskImage'> & {
+    inputImages?: string[];
+    maskImage?: string;
+};
+export type GeneratedImageProps = GeneratedImageGenProps & Omit<ComponentProps<typeof Img>, 'src'>;
+export declare function GeneratedImage({ inputImages: inputImagePaths, maskImage: maskImagePath, ...props }: GeneratedImageProps): Promise<import("react").JSX.Element>;
+type GeneratedVideoGenProps = Omit<GenerateVideoOptions, 'count' | 'inputImage'> & {
+    inputImage?: string;
+};
+export type GeneratedVideoProps = GeneratedVideoGenProps & Omit<ComponentProps<typeof Video>, 'src'>;
+export declare function GeneratedVideo({ inputImage: inputImagePath, ...props }: GeneratedVideoProps): Promise<import("react").JSX.Element>;
+type GeneratedSpeechGenProps = GenerateSpeechOptions & {
+    seed?: number;
+};
+export type GeneratedSpeechProps = GeneratedSpeechGenProps & Omit<ComponentProps<typeof Audio>, 'src'>;
+export declare function GeneratedSpeech(props: GeneratedSpeechProps): Promise<import("react").JSX.Element>;
+interface TextToSpeechProps {
+    /** Text to synthesize. */
+    text: string;
+    /** Voice preset. */
+    voice?: string;
+}
+export declare function TextToSpeech({ text, voice }: TextToSpeechProps): Promise<import("react").JSX.Element>;
+//# sourceMappingURL=server-components.d.ts.map

package/dist/vite/server-components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server-components.d.ts","sourceRoot":"","sources":["../../src/vite/server-components.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAIH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAA;AAStE,OAAO,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAIxD,OAAO,EACL,qBAAqB,EACrB,gBAAgB,EAChB,KAAK,uBAAuB,EAC5B,KAAK,yBAAyB,EAC9B,KAAK,uBAAuB,EAC5B,KAAK,eAAe,EACpB,KAAK,eAAe,GACrB,MAAM,2BAA2B,CAAA;AAGlC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AAoC9G;;;sDAGsD;AACtD,wBAAsB,gBAAgB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAcjE;AAED,2CAA2C;AAC3C,wBAAsB,cAAc,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAQnE;AAMD,KAAK,sBAAsB,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,aAAa,GAAG,WAAW,CAAC,GAAG;IAChG,WAAW,CAAC,EAAE,MAAM,EAAE,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,KAAK,CAAC,CAAA;AAElG,wBAAsB,cAAc,CAAC,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,wCA6B7H;AAMD,KAAK,sBAAsB,GAAG,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,YAAY,CAAC,GAAG;IACjF,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,KAAK,CAAC,CAAA;AAEpG,wBAAsB,cAAc,CAAC,EAAE,UAAU,EAAE,cAAc,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,wCA0BjG;AAMD,KAAK,uBAAuB,GAAG,qBAAqB,GAAG;IACrD,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG,uBAAuB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,EAAE,KAAK,CAAC,CAAA;AAEtG,wBAAsB,eAAe,CAAC,KAAK,EAAE,oBAAoB,wCAmBhE;AAMD,UAAU,iBAAiB;IACzB,0BAA0B;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,wBAAsB,YAAY,CAAC,EAAE,IAAI,EAAE,KAAe,EAAE,EAAE,iBAAiB,wCAE9E"}

package/dist/vite/server-components.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Server components for AI media generation in MDX <Server> blocks.
+ *
+ * No 'use client' directive: these execute in the RSC environment (async,
+ * filesystem access, API calls). They are auto-wrapped in <Server> by
+ * wrapGenerateNodes() in server-mdx.ts, so users write them bare in MDX.
+ *
+ * Each component delegates to the cached generate functions from egaki/generate
+ * (which handle caching, deduplication, stale management, and progress tracking
+ * via cachedGenerate) and passes the resolved URL to the client wrapper component.
+ *
+ * The server components add a thin layer on top for:
+ * - Composition-aware defaults (aspect ratio from dimensions)
+ * - Asset path resolution (string paths → Uint8Array)
+ * - Fallback lookup for RSC streaming (show stale while generating)
+ * - RSC flight streaming (pass promise to client wrapper)
+ */
+import fs from 'node:fs';
+import path from 'node:path';
+import { CATALOG, VIDEO_CATALOG } from '../cli/model-catalog.js';
+import { DEFAULT_MODEL, DEFAULT_VIDEO_MODEL } from '../cli/models.js';
+import { aspectRatioFromDimensions } from "./mdx-parse.js";
+import { GeneratedImageClient, GeneratedVideoClient, GeneratedSpeechClient, } from "./generated-media-client.js";
+import { setProjectRoot } from '../cli/cache-utils.js';
+// Re-export progress tracking from the centralized module
+export { getGenerationProgress, onProgressChange, } from '../cli/cached-generate.js';
+// Re-export caching utilities so existing imports from 'egaki/generate-media' still work
+export { stableJsonKey, hashKey, promptPrefix, findCachedFile, findFallbackFile } from '../cli/cache-utils.js';
+// ---------------------------------------------------------------------------
+// Project root and composition dimensions from Vite virtual module.
+// setProjectRoot() is called here so the cached generate functions
+// in egaki/generate know where public/generated/ is.
+// ---------------------------------------------------------------------------
+let _initialized = false;
+async function ensureInit() {
+    if (_initialized)
+        return;
+    const mod = await import('virtual:egaki-mdx');
+    setProjectRoot(mod.projectRoot);
+    _initialized = true;
+}
+async function getCompositionDimensions() {
+    const mod = await import('virtual:egaki-mdx');
+    return { width: mod.compositionWidth, height: mod.compositionHeight };
+}
+/** Look up a model's supported aspect ratios from the catalog. */
+function getModelAspectRatios(modelId, type) {
+    if (type === 'image') {
+        const entry = CATALOG.find((m) => m.id === modelId);
+        return entry?.features.aspectRatios;
+    }
+    const entry = VIDEO_CATALOG.find((m) => m.id === modelId);
+    return entry?.features.aspectRatios ?? undefined;
+}
+// ---------------------------------------------------------------------------
+// Asset path resolution — paths starting with `/` resolve to the project's
+// public/ folder (Vite convention), then fall back to absolute/relative paths.
+// ---------------------------------------------------------------------------
+/** Resolve a path prop to an absolute filesystem path.
+ *  `/photo.png` → `{projectRoot}/public/photo.png` if the file exists.
+ *  Relative paths resolve against projectRoot.
+ *  Absolute paths and URLs pass through unchanged. */
+export async function resolveAssetPath(p) {
+    await ensureInit();
+    const { getProjectRoot } = await import('../cli/cache-utils.js');
+    const root = getProjectRoot();
+    if (p.startsWith('http://') || p.startsWith('https://'))
+        return p;
+    if (p.startsWith('/')) {
+        const publicDir = path.join(root, 'public');
+        const publicPath = path.resolve(publicDir, '.' + p);
+        if (publicPath.startsWith(publicDir + path.sep) && fs.existsSync(publicPath)) {
+            return publicPath;
+        }
+    }
+    if (path.isAbsolute(p))
+        return p;
+    return path.resolve(root, p);
+}
+/** Resolve a path and read it as bytes. */
+export async function readAssetBytes(p) {
+    const resolved = await resolveAssetPath(p);
+    if (resolved.startsWith('http://') || resolved.startsWith('https://')) {
+        const res = await fetch(resolved);
+        if (!res.ok)
+            throw new Error(`Failed to fetch ${resolved}: ${res.status}`);
+        return new Uint8Array(await res.arrayBuffer());
+    }
+    return new Uint8Array(fs.readFileSync(resolved));
+}
+export async function GeneratedImage({ inputImages: inputImagePaths, maskImage: maskImagePath, ...props }) {
+    await ensureInit();
+    const { prompt, model, seed, aspectRatio: aspectRatioProp, quality, resolution, outputFormat, negativePrompt, allowPeople, imageSize, ...passthrough } = props;
+    const { width, height } = await getCompositionDimensions();
+    const allowedRatios = getModelAspectRatios(model ?? DEFAULT_MODEL, 'image');
+    const aspectRatio = aspectRatioProp ?? (allowedRatios?.length ? aspectRatioFromDimensions(width, height, allowedRatios) : undefined);
+    const inputImages = inputImagePaths ? await Promise.all(inputImagePaths.map(readAssetBytes)) : undefined;
+    const maskImage = maskImagePath ? await readAssetBytes(maskImagePath) : undefined;
+    const genParams = { prompt, model, seed, aspectRatio, quality, resolution, outputFormat, negativePrompt, allowPeople, imageSize, inputImages, maskImage };
+    // Sync cache check + fallback lookup for RSC streaming.
+    // Uses the wrapper's getCacheInfo() so the same cacheKey config is applied.
+    const { generateImage } = await import('../cli/generate.js');
+    const cacheInfo = generateImage.getCacheInfo(genParams);
+    if (cacheInfo.cached) {
+        return _jsx(GeneratedImageClient, { srcPromise: Promise.resolve(`/generated/image/${cacheInfo.cached}`), ...passthrough });
+    }
+    const srcPromise = generateImage(genParams)
+        .then((result) => {
+        if (result instanceof Error)
+            throw result;
+        return result.src;
+    });
+    return _jsx(GeneratedImageClient, { srcPromise: srcPromise, fallbackSrc: cacheInfo.fallbackSrc, ...passthrough });
+}
+export async function GeneratedVideo({ inputImage: inputImagePath, ...props }) {
+    await ensureInit();
+    const { prompt, model, seed, aspectRatio: aspectRatioProp, resolution, duration, fps, negativePrompt, mode, videoUrl, referenceImages, ...passthrough } = props;
+    const inputImage = inputImagePath ? await readAssetBytes(inputImagePath) : undefined;
+    const { width, height } = await getCompositionDimensions();
+    const allowedRatios = getModelAspectRatios(model ?? DEFAULT_VIDEO_MODEL, 'video');
+    const aspectRatio = aspectRatioProp ?? (allowedRatios?.length ? aspectRatioFromDimensions(width, height, allowedRatios) : undefined);
+    const genParams = { prompt, model, seed, aspectRatio, resolution, duration, fps, negativePrompt, inputImage, mode, videoUrl, referenceImages };
+    const { generateVideo } = await import('../cli/generate.js');
+    const cacheInfo = generateVideo.getCacheInfo(genParams);
+    if (cacheInfo.cached) {
+        return _jsx(GeneratedVideoClient, { srcPromise: Promise.resolve(`/generated/video/${cacheInfo.cached}`), ...passthrough });
+    }
+    const srcPromise = generateVideo(genParams)
+        .then((result) => {
+        if (result instanceof Error)
+            throw result;
+        return result.src;
+    });
+    return _jsx(GeneratedVideoClient, { srcPromise: srcPromise, fallbackSrc: cacheInfo.fallbackSrc, ...passthrough });
+}
+export async function GeneratedSpeech(props) {
+    await ensureInit();
+    const { text, model, voice, outputFormat, instructions, speed, language, seed, ...passthrough } = props;
+    const genParams = { text, model, voice, outputFormat, instructions, speed, language, seed };
+    const { generateSpeech } = await import('../cli/speech-generate.js');
+    const cacheInfo = generateSpeech.getCacheInfo(genParams);
+    if (cacheInfo.cached) {
+        return _jsx(GeneratedSpeechClient, { srcPromise: Promise.resolve(`/generated/audio/${cacheInfo.cached}`), ...passthrough });
+    }
+    const srcPromise = generateSpeech(genParams)
+        .then((result) => {
+        if (result instanceof Error)
+            throw result;
+        return result.src;
+    });
+    return _jsx(GeneratedSpeechClient, { srcPromise: srcPromise, fallbackSrc: cacheInfo.fallbackSrc, ...passthrough });
+}
+export async function TextToSpeech({ text, voice = 'alloy' }) {
+    return GeneratedSpeech({ text, voice });
+}

package/dist/vite/server-mdx.d.ts

@@ -0,0 +1,74 @@
+/**
+ * <Server> MDX parsing utilities.
+ *
+ * <Server> is a reserved MDX element marking a subtree as React Server
+ * Components. This module contains the pure parsing logic shared by the
+ * server (app.tsx), the client (mdx-client.tsx), and the vite plugin:
+ *
+ * - findServerNodes: locate <Server> elements, keyed by start line
+ * - blankServerContents: strip server content from the client-facing MDX
+ *   string while preserving line positions
+ * - collectServerImportSources: detect which MDX imports <Server> blocks
+ *   need (app.tsx dynamically imports them at request time)
+ * - filterImportNodesToModules: per-statement import filtering against an
+ *   environment's modules map
+ *
+ * Environment-neutral: no remotion, react, or node-only imports.
+ */
+type RootContent = any;
+export interface ServerNode {
+    /** Slot key: the node's start LINE as a string. Stable across server
+     *  and client because both parse the same source string
+     *  (blankServerContents preserves all line positions). Line-only (no
+     *  column) because the client matches slots via the data-markdown-line
+     *  prop that safe-mdx injects, which only carries the line. Two <Server>
+     *  elements on the same line collide — app.tsx warns about duplicates. */
+    key: string;
+    node: RootContent;
+}
+/** Recursively find <Server> elements in the mdast. Server nodes nested
+ *  inside another <Server> are skipped — the outer slot covers them. */
+export declare function findServerNodes(mdast: {
+    children?: RootContent[];
+}): ServerNode[];
+/** Replace each <Server> element's source range with a self-closing
+ *  `<Server />` marker, padded with newlines so the result has the EXACT
+ *  same line count and all subsequent positions stay valid. This keeps
+ *  slot keys, data-markdown-line attributes, and sourcemaps aligned with
+ *  the original file, and prevents the client from parsing (and trying to
+ *  resolve imports for) server-only content. */
+export declare function blankServerContents(source: string, serverNodes: ServerNode[]): string;
+/** Collect MDX import sources whose names are used inside <Server>
+ *  subtrees. Includes bare specifiers (e.g. 'egaki/text-to-speech') —
+ *  app.tsx imports them through vite's resolver, and the resolved file's
+ *  'use client' directive (or lack of it) decides whether the exports are
+ *  client refs or server components. */
+export declare function collectServerImportSources(mdast: {
+    children?: RootContent[];
+}): string[];
+/** Component names that should be auto-wrapped in <Server>. */
+export declare const GENERATED_COMPONENT_NAMES: Set<string>;
+/** Collect local names imported from *.server.* sources in the MDX.
+ *  These components should be auto-wrapped in <Server> because the
+ *  .server postfix signals they run in the RSC environment. */
+export declare function collectServerFileImportNames(mdast: {
+    children?: RootContent[];
+}): Set<string>;
+/** Walk the mdast and wrap bare server components in <Server>.
+ *  Targets two categories:
+ *  1. Built-in generated media components (GeneratedImage, etc.)
+ *  2. Components imported from *.server.* files
+ *  Mutates the tree in place. Wrapping reuses the original node's position
+ *  so slot keys and line numbers are unchanged. */
+export declare function wrapGenerateNodes(mdast: {
+    children?: RootContent[];
+}): void;
+/** Filter mdxjsEsm import nodes to statements whose source is resolvable
+ *  in the given modules map. Each environment's map only contains the
+ *  modules that belong there, so this keeps exactly the imports that
+ *  environment can satisfy — no naming rules. Filtering is per-STATEMENT:
+ *  contiguous import lines parse as a single mdxjsEsm node, so dropping
+ *  whole nodes would remove unrelated imports. */
+export declare function filterImportNodesToModules(importNodes: RootContent[], moduleKeys: string[]): RootContent[];
+export {};
+//# sourceMappingURL=server-mdx.d.ts.map

package/dist/vite/server-mdx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"server-mdx.d.ts","sourceRoot":"","sources":["../../src/vite/server-mdx.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAKH,KAAK,WAAW,GAAG,GAAG,CAAA;AAYtB,MAAM,WAAW,UAAU;IACzB;;;;;8EAK0E;IAC1E,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,WAAW,CAAA;CAClB;AAMD;wEACwE;AACxE,wBAAgB,eAAe,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;CAAE,GAAG,UAAU,EAAE,CAcjF;AAED;;;;;gDAKgD;AAChD,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,MAAM,CAgBrF;AAsDD;;;;wCAIwC;AACxC,wBAAgB,0BAA0B,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;CAAE,GAAG,MAAM,EAAE,CA+BxF;AAYD,+DAA+D;AAC/D,eAAO,MAAM,yBAAyB,aAIpC,CAAA;AAEF;;+DAE+D;AAC/D,wBAAgB,4BAA4B,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;CAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAe7F;AAED;;;;;mDAKmD;AACnD,wBAAgB,iBAAiB,CAAC,KAAK,EAAE;IAAE,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAA;CAAE,GAAG,IAAI,CAqC3E;AAED;;;;;kDAKkD;AAClD,wBAAgB,0BAA0B,CACxC,WAAW,EAAE,WAAW,EAAE,EAC1B,UAAU,EAAE,MAAM,EAAE,GACnB,WAAW,EAAE,CAaf"}

package/dist/vite/server-mdx.js

@@ -0,0 +1,259 @@
+/**
+ * <Server> MDX parsing utilities.
+ *
+ * <Server> is a reserved MDX element marking a subtree as React Server
+ * Components. This module contains the pure parsing logic shared by the
+ * server (app.tsx), the client (mdx-client.tsx), and the vite plugin:
+ *
+ * - findServerNodes: locate <Server> elements, keyed by start line
+ * - blankServerContents: strip server content from the client-facing MDX
+ *   string while preserving line positions
+ * - collectServerImportSources: detect which MDX imports <Server> blocks
+ *   need (app.tsx dynamically imports them at request time)
+ * - filterImportNodesToModules: per-statement import filtering against an
+ *   environment's modules map
+ *
+ * Environment-neutral: no remotion, react, or node-only imports.
+ */
+import { resolveModulePath } from 'safe-mdx/parse';
+function serverNodeKey(node) {
+    return String(node.position?.start?.line);
+}
+/** Recursively find <Server> elements in the mdast. Server nodes nested
+ *  inside another <Server> are skipped — the outer slot covers them. */
+export function findServerNodes(mdast) {
+    const found = [];
+    const visit = (node) => {
+        const isServer = (node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement')
+            && node.name === 'Server';
+        if (isServer) {
+            found.push({ key: serverNodeKey(node), node });
+            return; // don't descend — nested Server is part of the outer slot
+        }
+        for (const child of node.children || [])
+            visit(child);
+    };
+    for (const child of mdast.children || [])
+        visit(child);
+    return found;
+}
+/** Replace each <Server> element's source range with a self-closing
+ *  `<Server />` marker, padded with newlines so the result has the EXACT
+ *  same line count and all subsequent positions stay valid. This keeps
+ *  slot keys, data-markdown-line attributes, and sourcemaps aligned with
+ *  the original file, and prevents the client from parsing (and trying to
+ *  resolve imports for) server-only content. */
+export function blankServerContents(source, serverNodes) {
+    // Process back-to-front so earlier offsets stay valid after each splice.
+    const sorted = [...serverNodes].sort((a, b) => (b.node.position?.start?.offset ?? 0) - (a.node.position?.start?.offset ?? 0));
+    let result = source;
+    for (const { node } of sorted) {
+        const start = node.position?.start?.offset;
+        const end = node.position?.end?.offset;
+        if (typeof start !== 'number' || typeof end !== 'number')
+            continue;
+        const span = result.slice(start, end);
+        const newlines = span.split('\n').length - 1;
+        const replacement = '<Server />' + '\n'.repeat(newlines);
+        result = result.slice(0, start) + replacement + result.slice(end);
+    }
+    return result;
+}
+// ---------------------------------------------------------------------------
+// Server import detection
+//
+// Detects which MDX imports are needed by <Server> slot rendering by
+// scanning identifier usage inside <Server> subtrees. app.tsx dynamically
+// imports exactly these sources at request time — no filename convention
+// required (though *.server.* remains supported as a hard "never bundle
+// to the browser" override in the vite plugin).
+//
+// Detection is name-based and intentionally COARSE: it collects JSX
+// element names (root identifier of <ns.Comp/>) plus every estree
+// Identifier in expressions and attribute values. Over-collection just
+// imports an extra file server-side; under-collection would break slot
+// rendering, so coarse is the safe direction.
+// ---------------------------------------------------------------------------
+/** Collect every estree Identifier name reachable from a value. */
+function collectEstreeIdentifiers(value, out) {
+    if (!value || typeof value !== 'object')
+        return;
+    if (Array.isArray(value)) {
+        for (const item of value)
+            collectEstreeIdentifiers(item, out);
+        return;
+    }
+    if (value.type === 'Identifier' && typeof value.name === 'string') {
+        out.add(value.name);
+    }
+    for (const key of Object.keys(value)) {
+        if (key === 'position' || key === 'loc' || key === 'range' || key === 'start' || key === 'end')
+            continue;
+        collectEstreeIdentifiers(value[key], out);
+    }
+}
+/** Collect identifier usage from a single mdast node into a bucket:
+ *  JSX element names plus identifiers in expressions/attribute values. */
+function collectNodeIdentifiers(node, out) {
+    if (node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement') {
+        if (typeof node.name === 'string' && node.name) {
+            out.add(node.name.split('.')[0]);
+        }
+        for (const attr of node.attributes || []) {
+            if (attr.type === 'mdxJsxExpressionAttribute') {
+                collectEstreeIdentifiers(attr.data?.estree, out);
+            }
+            else if (attr.value && typeof attr.value === 'object') {
+                collectEstreeIdentifiers(attr.value.data?.estree, out);
+            }
+        }
+    }
+    if (node.type === 'mdxFlowExpression' || node.type === 'mdxTextExpression') {
+        collectEstreeIdentifiers(node.data?.estree, out);
+    }
+}
+/** Collect MDX import sources whose names are used inside <Server>
+ *  subtrees. Includes bare specifiers (e.g. 'egaki/text-to-speech') —
+ *  app.tsx imports them through vite's resolver, and the resolved file's
+ *  'use client' directive (or lack of it) decides whether the exports are
+ *  client refs or server components. */
+export function collectServerImportSources(mdast) {
+    const insideNames = new Set();
+    const visit = (node, insideServer) => {
+        const isServer = (node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement')
+            && node.name === 'Server';
+        const nowInside = insideServer || isServer;
+        if (nowInside && !isServer) {
+            // The <Server> element itself contributes no identifiers.
+            collectNodeIdentifiers(node, insideNames);
+        }
+        for (const child of node.children || [])
+            visit(child, nowInside);
+    };
+    for (const child of mdast.children || [])
+        visit(child, false);
+    const sources = new Set();
+    for (const node of mdast.children || []) {
+        if (node.type !== 'mdxjsEsm')
+            continue;
+        const body = node.data?.estree?.body || [];
+        for (const stmt of body) {
+            if (stmt.type !== 'ImportDeclaration')
+                continue;
+            const source = stmt.source?.value;
+            if (typeof source !== 'string')
+                continue;
+            const locals = (stmt.specifiers || [])
+                .map((s) => s.local?.name)
+                .filter(Boolean);
+            if (locals.some((name) => insideNames.has(name)))
+                sources.add(source);
+        }
+    }
+    return [...sources].sort();
+}
+// ---------------------------------------------------------------------------
+// Auto-wrap generated media components in <Server>
+//
+// <GeneratedImage>, <GeneratedVideo>, <GeneratedSpeech> are server components
+// that call egaki's generation APIs. When found bare in the mdast (not inside
+// a <Server> block), this transform wraps them in a synthetic <Server> node
+// so findServerNodes() picks them up. The wrapper reuses the original node's
+// position so line numbers stay stable and no sourcemap fixup is needed.
+// ---------------------------------------------------------------------------
+/** Component names that should be auto-wrapped in <Server>. */
+export const GENERATED_COMPONENT_NAMES = new Set([
+    'GeneratedImage',
+    'GeneratedVideo',
+    'GeneratedSpeech',
+]);
+/** Collect local names imported from *.server.* sources in the MDX.
+ *  These components should be auto-wrapped in <Server> because the
+ *  .server postfix signals they run in the RSC environment. */
+export function collectServerFileImportNames(mdast) {
+    const names = new Set();
+    for (const node of mdast.children || []) {
+        if (node.type !== 'mdxjsEsm')
+            continue;
+        for (const stmt of node.data?.estree?.body || []) {
+            if (stmt.type !== 'ImportDeclaration')
+                continue;
+            const source = stmt.source?.value;
+            if (typeof source !== 'string')
+                continue;
+            if (!/\.server(\.[jt]sx?)?$/.test(source))
+                continue;
+            for (const spec of stmt.specifiers || []) {
+                if (spec.local?.name)
+                    names.add(spec.local.name);
+            }
+        }
+    }
+    return names;
+}
+/** Walk the mdast and wrap bare server components in <Server>.
+ *  Targets two categories:
+ *  1. Built-in generated media components (GeneratedImage, etc.)
+ *  2. Components imported from *.server.* files
+ *  Mutates the tree in place. Wrapping reuses the original node's position
+ *  so slot keys and line numbers are unchanged. */
+export function wrapGenerateNodes(mdast) {
+    const serverImportNames = collectServerFileImportNames(mdast);
+    const shouldWrap = (name) => GENERATED_COMPONENT_NAMES.has(name) || serverImportNames.has(name);
+    const wrapInParent = (parent) => {
+        if (!parent.children)
+            return;
+        for (let i = 0; i < parent.children.length; i++) {
+            const node = parent.children[i];
+            // Use root identifier for dotted names like <Scenes.Hero /> → "Scenes"
+            const jsxRootName = typeof node.name === 'string' ? node.name.split('.')[0] : '';
+            if ((node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement')
+                && shouldWrap(jsxRootName)) {
+                // Wrap in a synthetic <Server> with the same position so slot
+                // keying (by start line) stays identical and blankServerContents
+                // replaces the right source span.
+                parent.children[i] = {
+                    type: node.type,
+                    name: 'Server',
+                    attributes: [],
+                    children: [node],
+                    position: node.position ? { ...node.position } : undefined,
+                };
+                continue;
+            }
+            // Don't descend into <Server> — already server-side
+            const isServer = (node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement')
+                && node.name === 'Server';
+            if (isServer)
+                continue;
+            // Recurse into other elements
+            if (node.children)
+                wrapInParent(node);
+        }
+    };
+    wrapInParent(mdast);
+}
+/** Filter mdxjsEsm import nodes to statements whose source is resolvable
+ *  in the given modules map. Each environment's map only contains the
+ *  modules that belong there, so this keeps exactly the imports that
+ *  environment can satisfy — no naming rules. Filtering is per-STATEMENT:
+ *  contiguous import lines parse as a single mdxjsEsm node, so dropping
+ *  whole nodes would remove unrelated imports. */
+export function filterImportNodesToModules(importNodes, moduleKeys) {
+    return importNodes.map((node) => {
+        const estree = node.data?.estree;
+        if (!estree?.body)
+            return node;
+        const body = estree.body.filter((stmt) => {
+            if (stmt.type !== 'ImportDeclaration')
+                return true;
+            const source = stmt.source?.value;
+            if (typeof source !== 'string')
+                return true;
+            return resolveModulePath(source, './', moduleKeys) !== undefined;
+        });
+        if (body.length === estree.body.length)
+            return node;
+        return { ...node, data: { ...node.data, estree: { ...estree, body } } };
+    });
+}

package/dist/vite/shader-renderer.d.ts

@@ -0,0 +1,48 @@
+import { type CSSProperties } from 'react';
+export interface NumberControl {
+    type: 'number';
+    defaultValue: number;
+    min: number;
+    max: number;
+    step: number;
+    /** Hidden controls are not shown in the tweakpane UI but still set as uniforms. */
+    hidden?: boolean;
+}
+export interface ColorArrayControl {
+    type: 'array';
+    control: {
+        type: 'color';
+    };
+    /** Maximum number of colors. Determines the GLSL array size. */
+    maxCount: number;
+    /** Max color slots shown in tweakpane UI. Defaults to maxCount. */
+    maxVisible?: number;
+    defaultValue: string[];
+}
+export type PropertyControl = NumberControl | ColorArrayControl;
+export interface ShaderConfig {
+    /** Display name shown in tweakpane and used as React displayName. */
+    title: string;
+    /** Fragment shader body (everything after the auto-generated header). */
+    fragment: string;
+    /** Property controls that become uniforms and tweakpane sliders. */
+    propertyControls: Record<string, PropertyControl>;
+}
+/**
+ * Create a React component that renders a WebGL2 fragment shader full-screen.
+ *
+ * The returned component accepts all property control keys as optional props
+ * plus a `style` prop. Number controls are exposed in tweakpane as sliders
+ * (unless `hidden: true`). Color array items are exposed as individual
+ * tweakpane color pickers with swatch UI.
+ *
+ * Time and resolution are derived from Remotion's hooks, making the shader
+ * fully deterministic and seekable.
+ */
+export declare function defineShader(config: ShaderConfig): {
+    (props: Record<string, any> & {
+        style?: CSSProperties;
+    }): import("react").JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=shader-renderer.d.ts.map

package/dist/vite/shader-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shader-renderer.d.ts","sourceRoot":"","sources":["../../src/vite/shader-renderer.tsx"],"names":[],"mappings":"AA8BA,OAAO,EAA2B,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AAOnE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,QAAQ,CAAA;IACd,YAAY,EAAE,MAAM,CAAA;IACpB,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE;QAAE,IAAI,EAAE,OAAO,CAAA;KAAE,CAAA;IAC1B,gEAAgE;IAChE,QAAQ,EAAE,MAAM,CAAA;IAChB,mEAAmE;IACnE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,MAAM,EAAE,CAAA;CACvB;AAED,MAAM,MAAM,eAAe,GAAG,aAAa,GAAG,iBAAiB,CAAA;AAE/D,MAAM,WAAW,YAAY;IAC3B,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAA;IACb,yEAAyE;IACzE,QAAQ,EAAE,MAAM,CAAA;IAChB,oEAAoE;IACpE,gBAAgB,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAA;CAClD;AAoLD;;;;;;;;;;GAUG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,YAAY;YAsEtC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;QAAE,KAAK,CAAC,EAAE,aAAa,CAAA;KAAE;;EA+MzD"}