egaki 0.6.0 → 0.7.0

package/dist/vite/app.d.ts

@@ -0,0 +1,51 @@
+/**
+ * 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 { Spiceflow } from 'spiceflow';
+import { type GenerationProgressEvent } from '../cli/cached-generate.js';
+export declare const app: Spiceflow<"", true, {
+    state: {};
+}, {
+    type: {};
+    error: {};
+}, {
+    schema: {};
+    macro: {};
+    macroFn: {};
+    loaderData: {};
+}, {
+    api: {
+        "generation-progress": {
+            get: {
+                request: unknown;
+                params: {};
+                query: unknown;
+                response: {
+                    200: AsyncGenerator<GenerationProgressEvent, any, any>;
+                };
+            };
+        };
+    };
+}, "" | "/" | "/api/generation-progress", Record<"/api/generation-progress", unknown>>;
+//# sourceMappingURL=app.d.ts.map

package/dist/vite/app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../src/vite/app.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAKH,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAA;AAqBrC,OAAO,EAGL,KAAK,uBAAuB,EAC7B,MAAM,2BAA2B,CAAA;AA+IlC,eAAO,MAAM,GAAG;;;;;;;;;;;;;;;;;;;;;;;sFAAa,CAAA"}

package/dist/vite/app.js

@@ -0,0 +1,150 @@
+var __rewriteRelativeImportExtension = (this && this.__rewriteRelativeImportExtension) || function (path, preserveJsx) {
+    if (typeof path === "string" && /^\.\.?\//.test(path)) {
+        return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function (m, tsx, d, ext, cm) {
+            return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : (d + ext + "." + cm.toLowerCase() + "js");
+        });
+    }
+    return path;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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 { Spiceflow } from 'spiceflow';
+import { SafeMdxRenderer } from 'safe-mdx';
+import { mdxParse } 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.js";
+import { parseFrontmatter, buildMdxScope } from "./mdx-parse.js";
+import { MdxClientApp } from "./mdx-client.js";
+import * as mdxVideoExports from "./mdx-video.js";
+import { GeneratedImage, GeneratedVideo, GeneratedSpeech, } from "./server-components.js";
+import { getGenerationProgress, onProgressChange, } from '../cli/cached-generate.js';
+/** Dynamically import the modules referenced inside <Server> blocks. */
+async function importServerModules(ast) {
+    const requireFromRoot = createRequire(path.join(projectRoot, 'package.json'));
+    const modules = {};
+    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(__rewriteRelativeImportExtension(/* @vite-ignore */ id));
+        }
+        catch (e) {
+            console.warn(`[egaki] failed to import <Server> module ${source}:`, e.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 = {
+    ...mdxVideoExports,
+    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) {
+    const mdxSource = entries[routePath];
+    const currentEntryPath = entryPaths[routePath];
+    if (mdxSource == null || currentEntryPath == null)
+        return null;
+    const title = routePath
+        ? `${routePath} · ${folderName} · egaki`
+        : `${folderName} · egaki`;
+    let ast;
+    try {
+        ast = mdxParse(mdxSource);
+    }
+    catch (e) {
+        console.error('[egaki] MDX parse error (server):', e);
+        return _jsxs(_Fragment, { children: [_jsx(Head, { children: _jsx(Head.Title, { children: title }) }), _jsx(MdxClientApp, { mdx: mdxSource, serverSlots: {}, entryPath: currentEntryPath, availableEntries: availableEntries, currentRoute: routePath })] });
+    }
+    wrapGenerateNodes(ast);
+    const serverNodes = findServerNodes(ast);
+    if (serverNodes.length === 0) {
+        return _jsxs(_Fragment, { children: [_jsx(Head, { children: _jsx(Head.Title, { children: title }) }), _jsx(MdxClientApp, { mdx: mdxSource, serverSlots: {}, entryPath: currentEntryPath, availableEntries: availableEntries, currentRoute: routePath })] });
+    }
+    const eagerModules = await importServerModules(ast);
+    const importNodes = filterImportNodesToModules(ast.children.filter((node) => node.type === 'mdxjsEsm'), Object.keys(eagerModules));
+    const { fps, bpm } = parseFrontmatter(ast);
+    const serverScope = buildMdxScope(fps, bpm);
+    const serverEvaluateOptions = { functions: true };
+    const serverSlots = {};
+    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] = (_jsx(SafeMdxRenderer, { markdown: mdxSource, mdast: { type: 'root', children: [...importNodes, ...node.children] }, components: serverComponents, modules: eagerModules, baseUrl: "./", scope: serverScope, evaluateOptions: serverEvaluateOptions, onError: (e) => console.warn('[egaki] <Server> slot:', e.message) }));
+    }
+    const clientMdx = blankServerContents(mdxSource, serverNodes);
+    return _jsxs(_Fragment, { children: [_jsx(Head, { children: _jsx(Head.Title, { children: title }) }), _jsx(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* () {
+        let resolve = null;
+        const unsubscribe = onProgressChange(() => resolve?.());
+        try {
+            while (true) {
+                const progress = getGenerationProgress();
+                yield progress;
+                if (progress.summary.total === 0)
+                    return;
+                await new Promise((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));
+    }
+    return app;
+}
+export const app = buildApp();

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

@@ -0,0 +1,47 @@
+/**
+ * BandsShader — chromatic dispersion through repeating lens bands.
+ *
+ * Port of Framer's DispersionBands shader module for Remotion/egaki.
+ * Original source:
+ *   https://framerusercontent.com/modules/jVqOzZrK81udrIw4uWLw/cV6qlarOv1tGcvTbyZeC/DispersionBands.js
+ *
+ * An animated gradient of user-defined colors is distorted through a tiled
+ * grid of spherical lenses. Each lens splits light into RGB channels at its
+ * edges (chromatic dispersion), producing rainbow fringing similar to light
+ * passing through a prism. 8-sample temporal anti-aliasing with per-sample
+ * spectral weighting gives the effect a soft, photographic quality.
+ *
+ * With the default lensSpacingY=0.01, lenses are essentially horizontal bands
+ * spanning full height. Increasing lensSpacingY creates a 2D grid of individual
+ * spherical lenses.
+ */
+import type { CSSProperties } from 'react';
+export interface BandsShaderProps {
+    /** Color palette for the gradient (max 8). Hex strings like "#4AB7FF". */
+    colors?: string[];
+    /** Seed for gradient flow directions and frequencies. Different seeds = different patterns. */
+    seed?: number;
+    /** Animation speed multiplier. 0 = frozen, 0.3 = default, 2 = fast. */
+    speed?: number;
+    /** Wavy spatial jitter per sample. 0 = clean, higher = dreamy/melting distortion. */
+    ephemeralAmp?: number;
+    /** UV scale before the lens grid. Higher = more zoomed in, fewer visible lens cells. */
+    lensScale?: number;
+    /** Horizontal spacing of the repeating lens cells. Smaller = more lens columns. */
+    lensSpacingX?: number;
+    /** Vertical spacing of lens cells. At 0.01 (default) lenses are tall horizontal bands. */
+    lensSpacingY?: number;
+    /** Radius of each lens sphere. Controls magnification area vs flat area. */
+    lensRadius?: number;
+    /** How much R and B channels diverge from G at lens edges. 0 = none, 1 = maximum rainbow. */
+    dispersionStrength?: number;
+    /** Extra rainbow tint multiplier at lens edges. Pushes edge colors toward prismatic look. */
+    edgeDisp?: number;
+    style?: CSSProperties;
+}
+/**
+ * Property controls matching the original Framer DispersionBands module.
+ * Ranges, defaults, and step sizes are preserved from the original.
+ */
+export declare const BandsShader: React.FC<BandsShaderProps>;
+//# sourceMappingURL=bands-shader.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bands-shader.d.ts","sourceRoot":"","sources":["../../src/vite/bands-shader.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAO1C,MAAM,WAAW,gBAAgB;IAC/B,0EAA0E;IAC1E,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,+FAA+F;IAC/F,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qFAAqF;IACrF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,wFAAwF;IACxF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,0FAA0F;IAC1F,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,6FAA6F;IAC7F,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB;AA6LD;;;GAGG;AACH,eAAO,MAAM,WAAW,EA4ElB,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAA"}

package/dist/vite/bands-shader.js

@@ -0,0 +1,267 @@
+'use client';
+import { defineShader } from "./shader-renderer.js";
+// ---------------------------------------------------------------------------
+// Fragment shader body
+// ---------------------------------------------------------------------------
+/**
+ * Raw GLSL fragment body from DispersionBands.js.
+ * The defineShader engine prepends #version, precision, v_uv, fragColor,
+ * uniform declarations, and built-in uniforms automatically.
+ *
+ * Algorithm overview:
+ *   1. Gradient flow: seed-derived sin/cos waves create an organic color field
+ *   2. Band lens: UV is tiled into repeating cells; each cell has a spherical
+ *      lens that warps UVs outward (magnification at center, edge factor at rim)
+ *   3. Chromatic dispersion: lens applied 3× per sample (R, G, B) with different
+ *      index-of-refraction offsets, splitting color channels at lens edges
+ *   4. 8-sample TAA: per-pixel random offset + spectral tint weights, averaged
+ */
+const FRAGMENT_SOURCE = `
+const int SAMPLES = 8;
+const float EPHEMERAL_DRIP = 1.0;
+
+// === PCG hash - https://www.jcgt.org/published/0009/03/02/
+uvec3 hash3(uvec3 v) {
+    v = v * 1664525u + 1013904223u;
+    v.x += v.y * v.z;
+    v.y += v.z * v.x;
+    v.z += v.x * v.y;
+    v ^= v >> 16u;
+    v.x += v.y * v.z;
+    v.y += v.z * v.x;
+    v.z += v.x * v.y;
+    return v;
+}
+uvec3 seed;
+vec3 random3f() {
+    seed = hash3(seed);
+    return vec3(seed) / float(-1u);
+}
+
+vec3 seedRandom(float seedVal) {
+    uvec3 s = uvec3(
+        floatBitsToUint(seedVal),
+        floatBitsToUint(seedVal * 1.5 + 7.31),
+        floatBitsToUint(seedVal * 2.7 + 13.37)
+    );
+    s = hash3(s);
+    return vec3(s) / float(0xFFFFFFFFu);
+}
+
+// === PALETTE SAMPLING ===
+vec3 getColor(int idx) {
+    if (u_colors_length < 1) return vec3(0.0);
+    int safeIdx = clamp(idx, 0, u_colors_length - 1);
+    return u_colors[safeIdx].rgb;
+}
+
+vec3 paletteN(float t, int count) {
+    if (count < 1) return vec3(0.0);
+    if (count < 2) return getColor(0);
+    t = clamp(t, 0.0, 1.0) * float(count - 1);
+    int idx = min(int(floor(t)), count - 2);
+    float localT = fract(t);
+    localT = localT * localT * (3.0 - 2.0 * localT);
+    return mix(getColor(idx), getColor(idx + 1), localT);
+}
+
+// === Gradient Flow ===
+float getGradientT(vec2 uv, float t, vec3 s1, vec3 s2) {
+    // Seed-derived flow directions
+    float angle1 = s1.x * 6.28;
+    float angle2 = s1.y * 6.28;
+    vec2 dir1 = vec2(cos(angle1), sin(angle1));
+    vec2 dir2 = vec2(cos(angle2), sin(angle2));
+
+    // Seed-derived frequencies
+    float freq1 = 1.0 + s1.z * 2.0;
+    float freq2 = 1.0 + s2.x * 1.5;
+    float freq3 = 1.5 + s2.y * 2.0;
+
+    float flow = dot(uv, dir1) + sin(dot(uv, dir2) * freq1 + t) * 0.3 + t * 0.2;
+    float flow2 = dot(uv, dir2.yx) + cos(dot(uv, dir1.yx) * freq2 - t * 0.8) * 0.25;
+
+    float gradT = sin(flow * 1.5) * 0.5 + 0.5;
+    gradT += cos(flow2 * 1.2) * 1.3;
+    gradT += sin(dot(uv, dir1 + dir2) * freq3 + t * 3.5) * 1.2;
+
+    return smoothstep(0.0, 4.12, gradT);
+}
+
+// === BAND LENS ===
+void applyBandLens(vec2 pp, float radiusSq, float iorOffset, out vec2 warpedUV, out float edgeFactor) {
+    vec2 ppLens = pp;
+    float spacingX = max(u_lensSpacingX, 0.001);
+    float spacingY = max(u_lensSpacingY, 0.001);
+    ppLens.x = fract(pp.x / spacingX + 0.5) * spacingX - spacingX * 0.5;
+    ppLens.y = fract(pp.y / spacingY + 0.5) * spacingY - spacingY * 0.5;
+
+    float sp = radiusSq - ppLens.x * ppLens.x - ppLens.y * ppLens.y;
+
+    float lensAmount = smoothstep(-0.1, 0.05, sp);
+    float baseLens = sqrt(max(sp, -sp * 0.1) / 0.3);
+    edgeFactor = (1.0 - smoothstep(0.0, radiusSq, sp)) * lensAmount;
+
+    float warpAmount = mix(1.0, baseLens * (1.0 + iorOffset), lensAmount);
+
+    warpedUV = pp;
+    warpedUV.x += (ppLens.x * warpAmount - ppLens.x);
+    warpedUV.y *= warpAmount;
+}
+
+void main() {
+    vec2 fragCoord = v_uv * u_resolution;
+    seed = uvec3(uvec2(fragCoord), uint(fract(u_time) * 1000.0));
+
+    vec2 r = u_resolution;
+    vec2 p = (fragCoord * 2.0 - r) / r.y;
+    float t = u_time * u_speed;
+
+    int colorCount = u_colors_length;
+
+    // Early out: no colors -> black
+    if (colorCount < 1) {
+        fragColor = vec4(0.0, 0.0, 0.0, 1.0);
+        return;
+    }
+
+    // Seed-based offsets for gradient flow
+    vec3 seedOff1 = seedRandom(u_seed);
+    vec3 seedOff2 = seedRandom(u_seed + 100.0);
+
+    float dice = random3f().x;
+
+    float radiusSq = u_lensRadius * u_lensRadius;
+    vec3 iorOffsets = vec3(-1.0, 0.0, 1.0) * u_dispersionStrength;
+
+    vec3 col = vec3(0.0);
+
+    for (int i = 0; i < SAMPLES; i++) {
+        float ephemeral = (float(i) + dice) / float(SAMPLES);
+        float sqEph = ephemeral * ephemeral;
+
+        vec2 pt = p;
+        pt.x += u_ephemeralAmp * sqEph * sin(p.y * 2.0 + t);
+        pt.y += u_ephemeralAmp * sqEph * cos(p.x * 1.5 - t) * 0.5;
+        pt.y -= (1.0 - exp(-EPHEMERAL_DRIP * sqEph)) * abs(pt.y) * sign(pt.y) * 0.3;
+
+        vec3 tint = smoothstep(1.0, 0.0, abs(3.0 * ephemeral - vec3(1.0, 1.5, 2.0)));
+
+        vec3 gradTs = vec3(0.0);
+        vec3 edgeFactors = vec3(0.0);
+
+        for (int c = 0; c < 3; c++) {
+            vec2 pp = pt * u_lensScale;
+            vec2 warpedUV;
+            float edgeFactor;
+            applyBandLens(pp, radiusSq, iorOffsets[c], warpedUV, edgeFactor);
+
+            vec2 gradUV = warpedUV / u_lensScale;
+            gradTs[c] = getGradientT(gradUV, t * 0.8, seedOff1, seedOff2);
+            edgeFactors[c] = edgeFactor;
+        }
+
+        vec3 convergentColor = paletteN(gradTs.g, colorCount);
+        float edgeMix = max(max(edgeFactors.r, edgeFactors.g), edgeFactors.b);
+
+        vec3 dispersedColor = vec3(
+            paletteN(gradTs.r, colorCount).r,
+            convergentColor.g,
+            paletteN(gradTs.b, colorCount).b
+        );
+
+        vec3 finalColor = mix(convergentColor, dispersedColor, edgeMix * 2.0);
+
+        vec3 rainbow = (gradTs - gradTs.g) * 3.0;
+        finalColor += rainbow * edgeMix * u_edgeDisp;
+
+        col += tint * finalColor * (3.0 / float(SAMPLES));
+    }
+
+    fragColor = vec4(col, 1.0);
+}
+`;
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+/**
+ * Property controls matching the original Framer DispersionBands module.
+ * Ranges, defaults, and step sizes are preserved from the original.
+ */
+export const BandsShader = defineShader({
+    title: 'BandsShader',
+    fragment: FRAGMENT_SOURCE,
+    propertyControls: {
+        colors: {
+            type: 'array',
+            control: { type: 'color' },
+            maxCount: 8,
+            maxVisible: 4,
+            defaultValue: ['#4AB7FF', '#000000', '#FF4040'],
+        },
+        seed: {
+            type: 'number',
+            defaultValue: 210,
+            min: 0,
+            max: 1000,
+            step: 1,
+        },
+        speed: {
+            type: 'number',
+            defaultValue: 0.3,
+            min: 0,
+            max: 2,
+            step: 0.01,
+        },
+        ephemeralAmp: {
+            type: 'number',
+            defaultValue: 0,
+            min: 0,
+            max: 0.5,
+            step: 0.01,
+        },
+        lensScale: {
+            type: 'number',
+            defaultValue: 3.7,
+            min: 0.1,
+            max: 10,
+            step: 0.1,
+        },
+        lensSpacingX: {
+            type: 'number',
+            defaultValue: 1,
+            min: 0.01,
+            max: 5,
+            step: 0.01,
+        },
+        lensSpacingY: {
+            type: 'number',
+            defaultValue: 0.01,
+            min: 0.01,
+            max: 5,
+            step: 0.01,
+            hidden: true,
+        },
+        lensRadius: {
+            type: 'number',
+            defaultValue: 0.58,
+            min: 0.1,
+            max: 2,
+            step: 0.01,
+        },
+        dispersionStrength: {
+            type: 'number',
+            defaultValue: 0.4,
+            min: 0,
+            max: 1,
+            step: 0.01,
+        },
+        edgeDisp: {
+            type: 'number',
+            defaultValue: 2,
+            min: 0,
+            max: 5,
+            step: 0.1,
+        },
+    },
+});

package/dist/vite/code-block.d.ts

@@ -0,0 +1,107 @@
+/**
+ * CodeBlock — ray.so-faithful syntax-highlighted code block for video.
+ *
+ * Uses shiki (TextMate grammars + WASM) for real syntax highlighting,
+ * with a CSS variables theme that maps token scopes to --ray-* vars.
+ * Theme colors are injected as inline CSS custom properties. The HTML
+ * from shiki's codeToHtml() is rendered via dangerouslySetInnerHTML.
+ *
+ * Per-theme frame styles are ported from ray.so's frame components:
+ * - Vercel: gridlines + corner brackets, no window chrome
+ * - Stripe: dashed gridlines + skewed stripe shape
+ * - OpenAI: clean rounded window, navy background
+ * - Supabase/Cloudflare: filename header, custom borders
+ * - Default: macOS traffic lights + title bar (non-partner themes)
+ *
+ * Source: https://github.com/raycast/ray-so
+ *
+ * Key source files:
+ * - Themes & syntax colors: https://github.com/raycast/ray-so/blob/main/app/(navigation)/(code)/store/themes.ts
+ * - CSS variables theme:    https://github.com/raycast/ray-so/blob/main/app/(navigation)/(code)/util/theme-css-variables.ts
+ * - Shiki highlighter init: https://github.com/raycast/ray-so/blob/main/app/(navigation)/(code)/code.tsx
+ * - Highlighted code render: https://github.com/raycast/ray-so/blob/main/app/(navigation)/(code)/components/HighlightedCode.tsx
+ * - Editor + token CSS:     https://github.com/raycast/ray-so/blob/main/app/(navigation)/(code)/components/Editor.module.css
+ * - Frame switch:           https://github.com/raycast/ray-so/blob/main/app/(navigation)/(code)/components/Frame.tsx
+ * - Default frame:          https://github.com/raycast/ray-so/blob/main/app/(navigation)/(code)/components/frames/DefaultFrame.tsx
+ * - Vercel frame:           https://github.com/raycast/ray-so/blob/main/app/(navigation)/(code)/components/frames/VercelFrame.tsx
+ * - Stripe frame:           https://github.com/raycast/ray-so/blob/main/app/(navigation)/(code)/components/frames/StripeFrame.tsx
+ * - OpenAI frame:           https://github.com/raycast/ray-so/blob/main/app/(navigation)/(code)/components/frames/OpenAIFrame.tsx
+ * - Supabase frame:         https://github.com/raycast/ray-so/blob/main/app/(navigation)/(code)/components/frames/SupabaseFrame.tsx
+ * - Cloudflare frame:       https://github.com/raycast/ray-so/blob/main/app/(navigation)/(code)/components/frames/CloudflareFrame.tsx
+ */
+import { type ReactNode } from 'react';
+export declare const CodeBlockContext: import("react").Context<boolean>;
+type SyntaxColors = {
+    foreground: string;
+    constant?: string;
+    string?: string;
+    comment?: string;
+    keyword?: string;
+    parameter?: string;
+    function?: string;
+    stringExpression?: string;
+    punctuation?: string;
+    link?: string;
+    number?: string;
+    property?: string;
+    objectLiteral?: string;
+    highlight?: string;
+    highlightBorder?: string;
+    highlightHover?: string;
+    diffDeleted?: string;
+    diffInserted?: string;
+};
+type FrameType = 'default' | 'vercel' | 'stripe' | 'openai' | 'supabase' | 'cloudflare';
+export type CodeBlockTheme = {
+    id: string;
+    name: string;
+    background: {
+        from: string;
+        to: string;
+    };
+    frame: FrameType;
+    /** Decorative — the preferred font name from ray.so. Not used for rendering
+     *  since web fonts aren't guaranteed; kept for documentation only. */
+    font?: string;
+    /** Per-frame visual overrides */
+    frameColors?: {
+        windowBg?: string;
+        windowBgLight?: string;
+        border?: string;
+        borderLight?: string;
+        headerBg?: string;
+        headerBgLight?: string;
+        gridline?: string;
+        gridlineLight?: string;
+        lineNumber?: string;
+        lineNumberLight?: string;
+        frameBg?: string;
+        frameBgLight?: string;
+    };
+    syntax: {
+        light?: SyntaxColors;
+        dark?: SyntaxColors;
+    };
+};
+export declare const CODE_THEMES: Record<string, CodeBlockTheme>;
+export interface CodeBlockProps {
+    children?: ReactNode;
+    theme?: string;
+    darkMode?: boolean;
+    title?: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    highlightLines?: number[];
+    padding?: number;
+    fontSize?: number;
+    width?: number | string;
+    height?: number | string;
+    showBackground?: boolean;
+    staggerFrames?: number;
+}
+export declare function CodeBlock({ children, theme: themeId, darkMode, title, language, showLineNumbers, highlightLines, padding, fontSize, width, height, showBackground, staggerFrames, }: CodeBlockProps): import("react").JSX.Element;
+export declare function MdxCodeBlockWrapper({ children, ...rest }: {
+    children?: ReactNode;
+} & Record<string, any>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=code-block.d.ts.map

package/dist/vite/code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-block.d.ts","sourceRoot":"","sources":["../../src/vite/code-block.tsx"],"names":[],"mappings":"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"}