egaki 0.5.0 → 0.7.0

package/dist/vite/shader-renderer.js

@@ -0,0 +1,411 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * WebGL2 shader component factory for egaki video.
+ *
+ * Egaki's equivalent of Framer's defineShader() API, adapted for Remotion's
+ * frame-based rendering. Time is derived from useCurrentFrame()/fps so shaders
+ * are deterministic and seekable. Property controls are exposed via useTweakpane
+ * for live editing in the player.
+ *
+ * Port of Framer's WebGL2 shader infrastructure. Original sources (in unframer):
+ *   - defineShader():           unframer/src/framer.js:50569-50588
+ *   - generateShaderHead():     unframer/src/framer.js:50493-50546
+ *   - WebGL2ShaderRenderer:     unframer/src/framer.js:49750-50346
+ *   - ShaderCanvas:             unframer/src/framer.js:51376-51593
+ *   - DEFAULT_VERTEX_SHADER:    unframer/src/framer.js:51184-51196
+ *   - builtInUniforms:          unframer/src/framer.js:49718-49747
+ *   - setUniform():             unframer/src/framer.js:50224-50246
+ *   - colorToVec4():            unframer/src/framer.js:50923-50927
+ *   - bindFullScreenQuadAttribs: unframer/src/framer.js:50354-50366
+ *
+ * Key differences from Framer:
+ *   - u_time = frame / fps (not wall-clock performance.now())
+ *   - No requestAnimationFrame loop; one GL draw per Remotion frame
+ *   - useTweakpane replaces Framer's ControlType property controls UI
+ *   - No mouse input, heightmaps, or multi-pass buffers (can add later)
+ *   - preserveDrawingBuffer=true for @remotion/web-renderer HtmlInCanvas
+ */
+import { useCurrentFrame, useVideoConfig } from 'remotion';
+import { useLayoutEffect, useRef } from 'react';
+import { useTweakpane } from "./tweakpane-hook.js";
+// ---------------------------------------------------------------------------
+// Color parsing
+// ---------------------------------------------------------------------------
+/** Parse a hex color string (#RGB, #RRGGBB, #RRGGBBAA) to [r, g, b, a] in 0-1 range. */
+function parseHexColor(hex) {
+    let h = hex.replace('#', '');
+    if (h.length === 3 || h.length === 4) {
+        h = h
+            .split('')
+            .map((c) => c + c)
+            .join('');
+    }
+    const r = parseInt(h.slice(0, 2), 16) / 255;
+    const g = parseInt(h.slice(2, 4), 16) / 255;
+    const b = parseInt(h.slice(4, 6), 16) / 255;
+    const a = h.length >= 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
+    return [r, g, b, a];
+}
+// ---------------------------------------------------------------------------
+// GLSL constants
+// ---------------------------------------------------------------------------
+/**
+ * Fullscreen quad vertex shader. Two attributes:
+ *   a_position — clip-space quad corners (2 triangles covering [-1,1]²)
+ *   a_texCoord — UV coordinates [0,1]² passed as v_uv to the fragment shader
+ *
+ * Identical to Framer's DEFAULT_VERTEX_SHADER (framer.js:51184-51196).
+ */
+const VERTEX_SHADER = `#version 300 es
+precision highp float;
+in vec2 a_position;
+in vec2 a_texCoord;
+out vec2 v_uv;
+void main() {
+  v_uv = a_texCoord;
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}
+`;
+/**
+ * Build the full fragment shader source by prepending uniform declarations
+ * and built-in uniforms before the user-provided shader body.
+ *
+ * Mirrors Framer's generateShaderHead() (framer.js:50493-50546).
+ * Property control keys are converted to uniform names with a `u_` prefix,
+ * matching Framer's toUniformName() convention (framer.js:50458-50459).
+ */
+function generateFragmentSource(body, controls) {
+    const lines = [
+        '#version 300 es',
+        'precision highp float;',
+        '',
+        'in vec2 v_uv;',
+        'out vec4 fragColor;',
+    ];
+    // #define for array max counts (Framer's toArrayMaxLengthName, framer.js:50470-50473)
+    for (const [key, ctrl] of Object.entries(controls)) {
+        if (ctrl.type === 'array') {
+            const constName = key.replace(/[a-z0-9](?=[A-Z])/g, '$&_').toUpperCase();
+            lines.push('', `#define NUM_${constName} ${ctrl.maxCount}`);
+        }
+    }
+    lines.push('');
+    // Uniform declarations from property controls
+    for (const [key, ctrl] of Object.entries(controls)) {
+        const uName = `u_${key}`;
+        if (ctrl.type === 'array') {
+            const constName = key.replace(/[a-z0-9](?=[A-Z])/g, '$&_').toUpperCase();
+            lines.push(`uniform vec4 ${uName}[NUM_${constName}];`);
+            lines.push(`uniform int ${uName}_length;`);
+        }
+        else {
+            lines.push(`uniform float ${uName};`);
+        }
+    }
+    lines.push('');
+    // Built-in uniforms (Framer's builtInUniforms, framer.js:49718-49747)
+    lines.push('uniform float u_time;', 'uniform vec2 u_resolution;', 'uniform float u_deltaTime;', 'uniform float u_pixelRatio;', 'uniform vec4 u_mousePosition;', 'uniform float u_mousePointerDown;', 'uniform float u_mouseHover;', '');
+    lines.push(body);
+    return lines.join('\n');
+}
+// ---------------------------------------------------------------------------
+// WebGL helpers
+// ---------------------------------------------------------------------------
+function compileGlShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    if (!shader)
+        throw new Error('Failed to create shader');
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        const log = gl.getShaderInfoLog(shader);
+        gl.deleteShader(shader);
+        throw new Error(`Shader compile error:\n${log}`);
+    }
+    return shader;
+}
+function linkGlProgram(gl, vs, fs) {
+    const program = gl.createProgram();
+    if (!program)
+        throw new Error('Failed to create program');
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        const log = gl.getProgramInfoLog(program);
+        gl.deleteProgram(program);
+        throw new Error(`Program link error:\n${log}`);
+    }
+    return program;
+}
+const BUILTIN_UNIFORM_NAMES = [
+    'u_time',
+    'u_resolution',
+    'u_deltaTime',
+    'u_pixelRatio',
+    'u_mousePosition',
+    'u_mousePointerDown',
+    'u_mouseHover',
+];
+// ---------------------------------------------------------------------------
+// defineShader
+// ---------------------------------------------------------------------------
+/**
+ * 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 function defineShader(config) {
+    const fragmentSource = generateFragmentSource(config.fragment, config.propertyControls);
+    // Pre-compute per-control metadata so the draw path avoids Object.entries()
+    const numberMetas = [];
+    const arrayMetas = [];
+    const tweakpaneDefaults = {};
+    const arrayDefaults = {};
+    for (const [key, ctrl] of Object.entries(config.propertyControls)) {
+        if (ctrl.type === 'number') {
+            numberMetas.push({
+                key,
+                uniformName: `u_${key}`,
+                defaultValue: ctrl.defaultValue,
+                hidden: !!ctrl.hidden,
+            });
+            if (!ctrl.hidden) {
+                tweakpaneDefaults[key] = {
+                    value: ctrl.defaultValue,
+                    min: ctrl.min,
+                    max: ctrl.max,
+                    step: ctrl.step,
+                };
+            }
+        }
+        else if (ctrl.type === 'array') {
+            arrayMetas.push({
+                key,
+                uniformName: `u_${key}`,
+                lengthName: `u_${key}_length`,
+                maxCount: ctrl.maxCount,
+            });
+            arrayDefaults[key] = ctrl.defaultValue;
+        }
+    }
+    // Build tweakpane keys for color array items. Each color slot up to maxCount
+    // becomes an individual tweakpane color picker (e.g. "colors 1", "colors 2").
+    // A "{key} count" slider controls how many are active (sent as u_{key}_length).
+    // Tweakpane auto-detects #hex strings as color inputs with a swatch.
+    const arrayTweakpaneKeys = [];
+    for (const m of arrayMetas) {
+        const ctrl = config.propertyControls[m.key];
+        const visible = ctrl.maxVisible ?? ctrl.maxCount;
+        const tpKeys = [];
+        for (let i = 0; i < visible; i++) {
+            tpKeys.push(`${m.key} ${i + 1}`);
+        }
+        arrayTweakpaneKeys.push({
+            arrayKey: m.key,
+            countKey: `${m.key} count`,
+            tpKeys,
+            defaults: ctrl.defaultValue,
+            maxCount: ctrl.maxCount,
+        });
+    }
+    function ShaderComponent(props) {
+        const frame = useCurrentFrame();
+        const { fps } = useVideoConfig();
+        const time = frame / fps;
+        const canvasRef = useRef(null);
+        const glStateRef = useRef(null);
+        // Build tweakpane schema with props overriding defaults.
+        // Number controls become sliders; color array items become individual
+        // color pickers (tweakpane auto-detects #hex strings as color inputs).
+        const tpSchema = {};
+        for (const [key, base] of Object.entries(tweakpaneDefaults)) {
+            tpSchema[key] = { ...base, value: props[key] ?? base.value };
+        }
+        for (const { arrayKey, countKey, tpKeys, defaults } of arrayTweakpaneKeys) {
+            const propColors = props[arrayKey];
+            const activeCount = Math.min(propColors?.length ?? defaults.length, tpKeys.length);
+            tpSchema[countKey] = { value: activeCount, min: 1, max: tpKeys.length, step: 1 };
+            for (let i = 0; i < tpKeys.length; i++) {
+                tpSchema[tpKeys[i]] = propColors?.[i] ?? defaults[i] ?? '#000000';
+            }
+        }
+        const tp = useTweakpane(config.title, tpSchema);
+        // Initialize WebGL2 on mount (useLayoutEffect so the first frame draws)
+        useLayoutEffect(() => {
+            const canvas = canvasRef.current;
+            if (!canvas)
+                return;
+            const gl = canvas.getContext('webgl2', {
+                alpha: true,
+                premultipliedAlpha: false,
+                antialias: false,
+                // Must be true for @remotion/web-renderer HtmlInCanvas screenshots
+                preserveDrawingBuffer: true,
+            });
+            if (!gl) {
+                console.error(`[${config.title}] WebGL2 not supported`);
+                return;
+            }
+            let vs = null;
+            let fs = null;
+            try {
+                vs = compileGlShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER);
+                fs = compileGlShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
+                const program = linkGlProgram(gl, vs, fs);
+                // Shaders can be deleted after successful link
+                gl.deleteShader(vs);
+                gl.deleteShader(fs);
+                vs = null;
+                fs = null;
+                // Fullscreen quad VAO (2 triangles, 6 vertices)
+                // Position/texCoord data matches Framer's createStaticArrayBuffer (framer.js:50347-50352)
+                const vao = gl.createVertexArray();
+                gl.bindVertexArray(vao);
+                const posBuf = gl.createBuffer();
+                gl.bindBuffer(gl.ARRAY_BUFFER, posBuf);
+                // prettier-ignore
+                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+                    -1, -1, 1, -1, -1, 1,
+                    -1, 1, 1, -1, 1, 1,
+                ]), gl.STATIC_DRAW);
+                const posLoc = gl.getAttribLocation(program, 'a_position');
+                if (posLoc >= 0) {
+                    gl.enableVertexAttribArray(posLoc);
+                    gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
+                }
+                const texBuf = gl.createBuffer();
+                gl.bindBuffer(gl.ARRAY_BUFFER, texBuf);
+                // prettier-ignore
+                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+                    0, 0, 1, 0, 0, 1,
+                    0, 1, 1, 0, 1, 1,
+                ]), gl.STATIC_DRAW);
+                const texLoc = gl.getAttribLocation(program, 'a_texCoord');
+                if (texLoc >= 0) {
+                    gl.enableVertexAttribArray(texLoc);
+                    gl.vertexAttribPointer(texLoc, 2, gl.FLOAT, false, 0, 0);
+                }
+                gl.bindVertexArray(null);
+                // Look up all uniform locations once
+                const locs = {};
+                for (const name of BUILTIN_UNIFORM_NAMES) {
+                    locs[name] = gl.getUniformLocation(program, name);
+                }
+                for (const m of numberMetas) {
+                    locs[m.uniformName] = gl.getUniformLocation(program, m.uniformName);
+                }
+                for (const m of arrayMetas) {
+                    locs[m.uniformName] = gl.getUniformLocation(program, m.uniformName);
+                    locs[m.lengthName] = gl.getUniformLocation(program, m.lengthName);
+                }
+                // Bind program + VAO for all subsequent draws (single-pass hot path,
+                // mirrors Framer's constructor binding in framer.js:49795-49797)
+                gl.useProgram(program);
+                gl.bindVertexArray(vao);
+                gl.clearColor(0, 0, 0, 0);
+                glStateRef.current = { gl, program, vao, posBuf, texBuf, locs };
+            }
+            catch (e) {
+                console.error(`[${config.title}] Shader init failed:`, e);
+                if (vs)
+                    gl.deleteShader(vs);
+                if (fs)
+                    gl.deleteShader(fs);
+            }
+            return () => {
+                const state = glStateRef.current;
+                if (state) {
+                    const { gl: g, program, vao, posBuf, texBuf } = state;
+                    g.deleteProgram(program);
+                    g.deleteVertexArray(vao);
+                    g.deleteBuffer(posBuf);
+                    g.deleteBuffer(texBuf);
+                    glStateRef.current = null;
+                }
+            };
+        }, []);
+        // Draw every Remotion frame. No deps = runs on every render, which is
+        // triggered by useCurrentFrame() changing each frame.
+        useLayoutEffect(() => {
+            const state = glStateRef.current;
+            const canvas = canvasRef.current;
+            if (!state || !canvas)
+                return;
+            const { gl, locs } = state;
+            const dpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1;
+            const w = Math.round(canvas.clientWidth * dpr);
+            const h = Math.round(canvas.clientHeight * dpr);
+            // Resize backing buffer to match CSS size × DPR
+            if (canvas.width !== w || canvas.height !== h) {
+                canvas.width = w;
+                canvas.height = h;
+                gl.viewport(0, 0, w, h);
+            }
+            // Built-in uniforms (mirrors updatePassBuiltIns, framer.js:50318-50344)
+            const loc = locs;
+            if (loc.u_time !== null)
+                gl.uniform1f(loc.u_time, time);
+            if (loc.u_resolution !== null)
+                gl.uniform2f(loc.u_resolution, w, h);
+            if (loc.u_deltaTime !== null)
+                gl.uniform1f(loc.u_deltaTime, 1 / fps);
+            if (loc.u_pixelRatio !== null)
+                gl.uniform1f(loc.u_pixelRatio, dpr);
+            if (loc.u_mousePosition !== null)
+                gl.uniform4fv(loc.u_mousePosition, [0, 0, 0, 0]);
+            if (loc.u_mousePointerDown !== null)
+                gl.uniform1f(loc.u_mousePointerDown, 0);
+            if (loc.u_mouseHover !== null)
+                gl.uniform1f(loc.u_mouseHover, 0);
+            // Number control uniforms (from tweakpane for visible, props for hidden)
+            for (const m of numberMetas) {
+                const l = loc[m.uniformName];
+                if (l == null)
+                    continue;
+                const value = m.hidden
+                    ? (props[m.key] ?? m.defaultValue)
+                    : (tp[m.key] ?? m.defaultValue);
+                gl.uniform1f(l, value);
+            }
+            // Color array uniforms — read count + individual colors from tweakpane
+            for (const { arrayKey, countKey, tpKeys } of arrayTweakpaneKeys) {
+                const m = arrayMetas.find((am) => am.key === arrayKey);
+                const count = tp[countKey];
+                const flat = [];
+                for (let i = 0; i < m.maxCount; i++) {
+                    if (i < tpKeys.length) {
+                        flat.push(...parseHexColor(tp[tpKeys[i]] ?? '#000000'));
+                    }
+                    else {
+                        flat.push(0, 0, 0, 0);
+                    }
+                }
+                const uLoc = loc[m.uniformName];
+                if (uLoc != null)
+                    gl.uniform4fv(uLoc, flat);
+                const lLoc = loc[m.lengthName];
+                if (lLoc != null)
+                    gl.uniform1i(lLoc, count);
+            }
+            // Draw the fullscreen quad
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            gl.drawArrays(gl.TRIANGLES, 0, 6);
+        });
+        return (_jsx("canvas", { ref: canvasRef, style: {
+                display: 'block',
+                width: '100%',
+                height: '100%',
+                ...props.style,
+            } }));
+    }
+    ShaderComponent.displayName = config.title;
+    return ShaderComponent;
+}

package/dist/vite/store-hooks.d.ts

@@ -0,0 +1,12 @@
+import { type GenerationStatus, type GenerationError } from './store.ts';
+type EagerModules = Record<string, Record<string, any>>;
+/** Hook: per-section max media durations. */
+export declare function useMediaDurations(): Record<string, number>;
+/** Hook: generation counts while media is being generated, or null. */
+export declare function useGenerationStatus(): GenerationStatus | null;
+/** Hook: recent generation errors (auto-cleared after 8s). */
+export declare function useGenerationErrors(): GenerationError[];
+/** Hook: user modules from virtual:egaki-modules. */
+export declare function useModules(): EagerModules;
+export type { GenerationStatus, GenerationError };
+//# sourceMappingURL=store-hooks.d.ts.map

package/dist/vite/store-hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store-hooks.d.ts","sourceRoot":"","sources":["../../src/vite/store-hooks.ts"],"names":[],"mappings":"AAgBA,OAAO,EAIL,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACrB,MAAM,YAAY,CAAA;AAGnB,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;AAuEvD,6CAA6C;AAC7C,wBAAgB,iBAAiB,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAE1D;AAED,uEAAuE;AACvE,wBAAgB,mBAAmB,IAAI,gBAAgB,GAAG,IAAI,CAE7D;AAED,8DAA8D;AAC9D,wBAAgB,mBAAmB,IAAI,eAAe,EAAE,CAEvD;AAED,qDAAqD;AACrD,wBAAgB,UAAU,IAAI,YAAY,CAEzC;AAED,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,CAAA"}

package/dist/vite/store-hooks.js

@@ -0,0 +1,93 @@
+'use client';
+/**
+ * React hooks for the egaki client state store.
+ *
+ * Separated from store.ts so the vanilla store has no React dependency and
+ * can be imported from any environment (RSC, SSR, client). These hooks are
+ * only imported by 'use client' components.
+ *
+ * Uses useSyncExternalStore with stable module-level selectors. This avoids
+ * zustand's useStore + useShallow which internally calls useRef and fails
+ * during Spiceflow's SSR pass when the Vite SSR optimizer creates a split
+ * React instance (optimized react-dom/server.edge vs real pnpm react).
+ */
+import { useSyncExternalStore } from 'react';
+import { egakiStore, selectMediaDurations, selectGenerationStatus, } from "./store.js";
+// ---------------------------------------------------------------------------
+// Stable subscribe/getSnapshot functions (module-level constants so
+// useSyncExternalStore never re-subscribes on re-render).
+//
+// getSnapshot must return a referentially stable value when the derived
+// result hasn't changed. useSyncExternalStore compares snapshots with
+// Object.is(), so returning a new object every call causes infinite
+// re-render loops. We cache the last snapshot and shallow-compare.
+// ---------------------------------------------------------------------------
+function shallowEqualRecord(a, b) {
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length)
+        return false;
+    for (const key of keysA) {
+        if (a[key] !== b[key])
+            return false;
+    }
+    return true;
+}
+function shallowEqualStatus(a, b) {
+    if (a === b)
+        return true;
+    if (a === null || b === null)
+        return false;
+    if (a.total !== b.total)
+        return false;
+    return shallowEqualRecord(a.counts, b.counts);
+}
+// Media durations
+const subscribeMediaDurations = (callback) => egakiStore.subscribe((state) => state.sectionReports, callback);
+let cachedMediaDurations = {};
+const getMediaDurations = () => {
+    const next = selectMediaDurations(egakiStore.getState());
+    if (!shallowEqualRecord(cachedMediaDurations, next)) {
+        cachedMediaDurations = next;
+    }
+    return cachedMediaDurations;
+};
+const getMediaDurationsServer = () => cachedMediaDurations;
+// Generation status
+const subscribeGenerationStatus = (callback) => egakiStore.subscribe((state) => state.serverGenerationStatus, callback);
+let cachedGenerationStatus = null;
+const getGenerationStatus = () => {
+    const next = selectGenerationStatus(egakiStore.getState());
+    if (!shallowEqualStatus(cachedGenerationStatus, next)) {
+        cachedGenerationStatus = next;
+    }
+    return cachedGenerationStatus;
+};
+const getGenerationStatusServer = () => null;
+// Generation errors
+const subscribeGenerationErrors = (callback) => egakiStore.subscribe((state) => state.serverGenerationErrors, callback);
+const getGenerationErrors = () => egakiStore.getState().serverGenerationErrors;
+const EMPTY_ERRORS = [];
+const getGenerationErrorsServer = () => EMPTY_ERRORS;
+// Modules
+const subscribeModules = (callback) => egakiStore.subscribe((state) => state.modules, callback);
+const getModules = () => egakiStore.getState().modules;
+// ---------------------------------------------------------------------------
+// Hooks
+// ---------------------------------------------------------------------------
+/** Hook: per-section max media durations. */
+export function useMediaDurations() {
+    return useSyncExternalStore(subscribeMediaDurations, getMediaDurations, getMediaDurationsServer);
+}
+/** Hook: generation counts while media is being generated, or null. */
+export function useGenerationStatus() {
+    return useSyncExternalStore(subscribeGenerationStatus, getGenerationStatus, getGenerationStatusServer);
+}
+/** Hook: recent generation errors (auto-cleared after 8s). */
+export function useGenerationErrors() {
+    return useSyncExternalStore(subscribeGenerationErrors, getGenerationErrors, getGenerationErrorsServer);
+}
+/** Hook: user modules from virtual:egaki-modules. */
+export function useModules() {
+    return useSyncExternalStore(subscribeModules, getModules, getModules);
+}

package/dist/vite/store.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Centralized client-side state store (zustand/vanilla).
+ *
+ * Pure vanilla store with no React imports. State slices:
+ *
+ * 1. **modules** — eagerly-imported user .tsx/.ts modules, updated via HMR
+ * 2. **sectionReports** — per-section effective media durations reported by
+ *    Audio/Video components (ephemeral, not persisted)
+ * 3. **serverGenerationStatus** — server-reported generation progress from
+ *    the /api/generation-progress SSE stream, for the toolbar status indicator
+ *
+ * React hooks live in store-hooks.ts ('use client') to keep this file
+ * importable from any environment (RSC, SSR, client) without pulling in React.
+ */
+/** Same as safe-mdx's EagerModules: Record<string, Record<string, any>> */
+type EagerModules = Record<string, Record<string, any>>;
+export interface GenerationStatus {
+    /** Count of active generations per namespace (e.g. { image: 2, video: 1 }) */
+    counts: Record<string, number>;
+    total: number;
+}
+/** Individual generation entry from the server progress stream. */
+export interface GenerationProgressEntry {
+    key: string;
+    namespace: string;
+    label: string;
+    model?: string;
+    startedAt: number;
+    elapsedMs: number;
+    params: Record<string, unknown>;
+}
+/** A generation that failed, reported via the progress stream. */
+export interface GenerationError {
+    key: string;
+    namespace: string;
+    label: string;
+    model?: string;
+    error: string;
+    durationMs: number;
+}
+export interface EgakiClientState {
+    /** User-imported modules from virtual:egaki-modules. Updated by HMR. */
+    modules: EagerModules;
+    /**
+     * Per-instance section duration reports (ephemeral).
+     * sectionIndex → Map<instanceId, effectiveSeconds>
+     * Each Audio/Video component reports its effective playback duration.
+     */
+    sectionReports: Map<number, Map<string, number>>;
+    /** Server-reported generation progress from /api/generation-progress SSE stream. */
+    serverGenerationStatus: GenerationStatus | null;
+    /** Detailed generation entries from the server progress stream. */
+    serverGenerationEntries: GenerationProgressEntry[];
+    /** Recent generation errors from the server progress stream.
+     *  Errors auto-clear after ERROR_DISPLAY_DURATION_MS. */
+    serverGenerationErrors: GenerationError[];
+}
+export declare const egakiStore: Omit<import("zustand/vanilla").StoreApi<EgakiClientState>, "subscribe"> & {
+    subscribe: {
+        (listener: (selectedState: EgakiClientState, previousSelectedState: EgakiClientState) => void): () => void;
+        <U>(selector: (state: EgakiClientState) => U, listener: (selectedState: U, previousSelectedState: U) => void, options?: {
+            equalityFn?: ((a: U, b: U) => boolean) | undefined;
+            fireImmediately?: boolean;
+        } | undefined): () => void;
+    };
+};
+/**
+ * Derive per-section max media durations.
+ * Returns Record<string, number> (section-index-as-string → seconds).
+ */
+export declare function selectMediaDurations(state: EgakiClientState): Record<string, number>;
+/** Generation status from the server progress stream, or null when idle. */
+export declare function selectGenerationStatus(state: EgakiClientState): GenerationStatus | null;
+export {};
+//# sourceMappingURL=store.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../src/vite/store.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AASH,2EAA2E;AAC3E,KAAK,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,CAAA;AAEvD,MAAM,WAAW,gBAAgB;IAC/B,8EAA8E;IAC9E,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,KAAK,EAAE,MAAM,CAAA;CACd;AAED,mEAAmE;AACnE,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAA;IACX,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,SAAS,EAAE,MAAM,CAAA;IACjB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CAChC;AAED,kEAAkE;AAClE,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,MAAM,CAAA;IACX,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,gBAAgB;IAC/B,wEAAwE;IACxE,OAAO,EAAE,YAAY,CAAA;IAErB;;;;OAIG;IACH,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IAEhD,oFAAoF;IACpF,sBAAsB,EAAE,gBAAgB,GAAG,IAAI,CAAA;IAE/C,mEAAmE;IACnE,uBAAuB,EAAE,uBAAuB,EAAE,CAAA;IAElD;6DACyD;IACzD,sBAAsB,EAAE,eAAe,EAAE,CAAA;CAC1C;AAMD,eAAO,MAAM,UAAU;;;;;;;;CAQtB,CAAA;AAMD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAWpF;AAED,4EAA4E;AAC5E,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,gBAAgB,GAAG,gBAAgB,GAAG,IAAI,CAEvF"}

package/dist/vite/store.js

@@ -0,0 +1,52 @@
+/**
+ * Centralized client-side state store (zustand/vanilla).
+ *
+ * Pure vanilla store with no React imports. State slices:
+ *
+ * 1. **modules** — eagerly-imported user .tsx/.ts modules, updated via HMR
+ * 2. **sectionReports** — per-section effective media durations reported by
+ *    Audio/Video components (ephemeral, not persisted)
+ * 3. **serverGenerationStatus** — server-reported generation progress from
+ *    the /api/generation-progress SSE stream, for the toolbar status indicator
+ *
+ * React hooks live in store-hooks.ts ('use client') to keep this file
+ * importable from any environment (RSC, SSR, client) without pulling in React.
+ */
+import { createStore } from 'zustand/vanilla';
+import { subscribeWithSelector } from 'zustand/middleware';
+// ---------------------------------------------------------------------------
+// Store
+// ---------------------------------------------------------------------------
+export const egakiStore = createStore()(subscribeWithSelector(() => ({
+    modules: {},
+    sectionReports: new Map(),
+    serverGenerationStatus: null,
+    serverGenerationEntries: [],
+    serverGenerationErrors: [],
+})));
+// ---------------------------------------------------------------------------
+// Selectors — derive values from state
+// ---------------------------------------------------------------------------
+/**
+ * Derive per-section max media durations.
+ * Returns Record<string, number> (section-index-as-string → seconds).
+ */
+export function selectMediaDurations(state) {
+    const obj = {};
+    for (const [idx, reports] of state.sectionReports) {
+        if (reports.size === 0)
+            continue;
+        let max = 0;
+        for (const dur of reports.values()) {
+            if (dur > max)
+                max = dur;
+        }
+        if (max > 0)
+            obj[String(idx)] = max;
+    }
+    return obj;
+}
+/** Generation status from the server progress stream, or null when idle. */
+export function selectGenerationStatus(state) {
+    return state.serverGenerationStatus;
+}

package/dist/vite/store.test.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Tests for the centralized egaki client store.
+ * Pure state transitions — no React, no mocks, just data in and data out.
+ */
+export {};
+//# sourceMappingURL=store.test.d.ts.map

package/dist/vite/store.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.test.d.ts","sourceRoot":"","sources":["../../src/vite/store.test.ts"],"names":[],"mappings":"AAAA;;;GAGG"}