egaki 0.7.1 → 0.8.0

package/dist/vite/player-page.js

@@ -17,26 +17,13 @@ import { AbsoluteFill, Freeze, Sequence, Series, useCurrentFrame, useDelayRender
 import { renderInBrowser } from "./render-client.js";
 import { createSpiceflowFetch } from 'spiceflow/client';
 import { egakiStore } from "./store.js";
-import { useGenerationStatus, useGenerationErrors } from "./store-hooks.js";
+import { useGenerationStatus, useGenerationErrors, useSidebarOpen } from "./store-hooks.js";
 import { egakiSDK } from "./sdk.js";
 import { LayoutEditor } from "./layout-editor.js";
 import { TweakpaneRoot, SIDEBAR_WIDTH } from "./tweakpane-hook.js";
 import { Fill, LayoutAnimationLayer, LayoutGhost, LayoutTransitionProvider, MotionTimingSync, ServerSlotsContext, } from "./mdx-video.js";
 import { SectionIndexContext } from "./media-duration-store.js";
 // ---------------------------------------------------------------------------
-// HMR scene-changed: store pending seek at module scope so it survives
-// component remounts caused by rsc:update (spiceflow payload swap).
-// The vite plugin sends egaki:scene-changed with { sectionIndex } when
-// the user edits a specific section of the entry MDX.
-// ---------------------------------------------------------------------------
-let pendingSceneSeek = null;
-/** Cancels the auto-pause listener from a previous scene-seek, so a new
- *  HMR during playback doesn't leave stale listeners that pause the wrong scene. */
-let cancelPreviousAutoPlay = null;
-/** Monotonic counter to invalidate stale requestAnimationFrame callbacks
- *  when rapid successive HMR edits arrive before the first rAF fires. */
-let sceneSeekVersion = 0;
-// ---------------------------------------------------------------------------
 // Generation progress client — fetches /api/generation-progress on page
 // load and on every rsc:update using the typed Spiceflow fetch client.
 // The route is an async generator that yields progress events as SSE;
@@ -107,9 +94,6 @@ function connectToProgress() {
 if (typeof window !== 'undefined')
     connectToProgress();
 if (import.meta.hot) {
-    import.meta.hot.on('egaki:scene-changed', (data) => {
-        pendingSceneSeek = data;
-    });
     // Reconnect on rsc:update — new generations may have started from
     // MDX edits that trigger server-side rendering of <Server> blocks.
     import.meta.hot.on('rsc:update', () => {
@@ -291,79 +275,6 @@ export function PlayerPage({ sections, totalDuration, preamble, entryPath, hasUn
             playerContainerRef,
         });
     }, [Component, totalDuration, sections, fps, width, height, scale]);
-    // Consume pending scene seek after the RSC refetch delivers new sections.
-    // The module-level pendingSceneSeek is set by import.meta.hot.on before
-    // React re-renders; this effect fires after the commit with fresh data.
-    // Seeks to the changed section's start frame, plays it, and pauses at
-    // the section's end so the user sees exactly the content they edited.
-    useEffect(() => {
-        if (pendingSceneSeek == null)
-            return;
-        // Ignore scene changes from a different entry MDX file.
-        if (pendingSceneSeek.file !== entryPath) {
-            pendingSceneSeek = null;
-            return;
-        }
-        const idx = pendingSceneSeek.sectionIndex;
-        pendingSceneSeek = null;
-        // Wait one frame for the Remotion Player to initialize after remount.
-        // Version token ensures stale rAF callbacks from rapid edits are ignored.
-        const version = ++sceneSeekVersion;
-        requestAnimationFrame(() => {
-            if (version !== sceneSeekVersion)
-                return;
-            const player = playerRef.current;
-            if (!player || idx < 0 || idx >= sections.length)
-                return;
-            // Compute section boundaries from current sections
-            let startFrame = 0;
-            for (let i = 0; i < idx; i++) {
-                startFrame += sections[i].durationInFrames;
-            }
-            const endFrame = startFrame + sections[idx].durationInFrames - 1;
-            player.seekTo(startFrame);
-            // Cancel any auto-pause from a previous HMR scene-seek so stale
-            // listeners don't pause playback in the wrong section.
-            cancelPreviousAutoPlay?.();
-            cancelPreviousAutoPlay = null;
-            // Only auto-play if currently paused (after rsc:update remount
-            // the player always starts paused at frame 0)
-            if (!player.isPlaying()) {
-                player.play();
-                // Pause at section end so only the edited section plays.
-                // If the user manually seeks (clicks timeline, arrow keys, etc.)
-                // cancel the auto-pause so we don't randomly stop playback later.
-                let cancelled = false;
-                const cleanup = () => {
-                    if (cancelled)
-                        return;
-                    cancelled = true;
-                    cancelPreviousAutoPlay = null;
-                    player.removeEventListener('frameupdate', onFrame);
-                    player.removeEventListener('seeked', onSeek);
-                };
-                cancelPreviousAutoPlay = cleanup;
-                const onFrame = () => {
-                    if (cancelled)
-                        return;
-                    if (player.getCurrentFrame() >= endFrame) {
-                        player.pause();
-                        cleanup();
-                    }
-                };
-                const onSeek = (e) => {
-                    // User seeked away — cancel auto-pause. Ignore seeks within
-                    // the target section range (could be our own seekTo settling).
-                    const frame = e?.detail?.frame ?? player.getCurrentFrame();
-                    if (frame < startFrame || frame > endFrame) {
-                        cleanup();
-                    }
-                };
-                player.addEventListener('frameupdate', onFrame);
-                player.addEventListener('seeked', onSeek);
-            }
-        });
-    }, [sections]);
     // Defer Player mount to client only. Remotion's Player and all composition
     // components (Series, AbsoluteFill, Audio, Video) use React context provided
     // by Player at runtime. During SSR there's no Remotion context, so hooks like
@@ -373,6 +284,7 @@ export function PlayerPage({ sections, totalDuration, preamble, entryPath, hasUn
     const mounted = useSyncExternalStore(subscribeNoop, getClientMounted, getServerMounted);
     const generationStatus = useGenerationStatus();
     const generationErrors = useGenerationErrors();
+    const sidebarOpen = useSidebarOpen();
     const [editing, setEditing] = useState(false);
     const [resetKey, setResetKey] = useState(0);
     const [rendering, setRendering] = useState(false);
@@ -702,9 +614,9 @@ export function PlayerPage({ sections, totalDuration, preamble, entryPath, hasUn
                                             margin: 0,
                                             lineHeight: 1.5,
                                         }, children: error.stack || error.message })] }) })) }, resetKey)) : (_jsx("div", { className: 'aspect-video bg-[#050505]' })) }) }), _jsx(TweakpaneRoot, { playerRef: playerRef, fps: fps, sections: sections, entryPath: entryPath }), _jsxs("div", { className: 'fixed bottom-6 flex items-center gap-1.5 rounded-full bg-[#1c1c1c] border border-white/10 px-2 py-1.5 shadow-2xl', style: {
-                    left: `calc((100% - ${SIDEBAR_WIDTH}px - 0.75rem) / 2)`,
+                    left: sidebarOpen ? `calc((100% - ${SIDEBAR_WIDTH}px - 0.75rem) / 2)` : '50%',
                     transform: 'translateX(-50%)',
-                }, children: [availableEntries.length > 1 && (_jsxs(_Fragment, { children: [_jsx("select", { value: currentRoute, onChange: (e) => {
+                }, children: [_jsx("button", { onClick: goToPrevScene, disabled: !hasPrevScene, className: 'flex items-center justify-center rounded-full w-7 h-7 text-zinc-400 hover:text-zinc-200 hover:bg-white/5 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default disabled:hover:bg-transparent disabled:hover:text-zinc-400', title: 'Previous scene (\u2193)', children: _jsx(ChevronDownIcon, {}) }), _jsx(ToolbarSeparator, {}), availableEntries.length > 1 && (_jsxs(_Fragment, { children: [_jsx("select", { value: currentRoute, onChange: (e) => {
                                     const route = e.target.value;
                                     const base = import.meta.env.BASE_URL ?? '/';
                                     window.location.href = `${base}${route}`;
@@ -714,7 +626,7 @@ export function PlayerPage({ sections, totalDuration, preamble, entryPath, hasUn
                                 const next = PLAYBACK_RATES[(idx + 1) % PLAYBACK_RATES.length];
                                 return next;
                             });
-                        }, className: 'flex items-center rounded-full px-2.5 py-1.5 text-[13px] font-medium tabular-nums text-zinc-400 hover:text-zinc-200 hover:bg-white/5 transition-colors cursor-pointer min-w-[3rem] justify-center', title: 'Playback speed (click to cycle)', children: playbackRate === 1 ? '1x' : `${playbackRate}x` }), _jsx(ToolbarSeparator, {}), _jsxs("div", { className: 'flex items-center', children: [_jsx("button", { onClick: goToPrevScene, disabled: !hasPrevScene, className: 'flex items-center justify-center rounded-full w-7 h-7 text-zinc-400 hover:text-zinc-200 hover:bg-white/5 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default disabled:hover:bg-transparent disabled:hover:text-zinc-400', title: 'Previous scene (\u2193)', children: _jsx(ChevronDownIcon, {}) }), _jsx("button", { onClick: goToNextScene, disabled: !hasNextScene, className: 'flex items-center justify-center rounded-full w-7 h-7 text-zinc-400 hover:text-zinc-200 hover:bg-white/5 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default disabled:hover:bg-transparent disabled:hover:text-zinc-400', title: 'Next scene (\u2191)', children: _jsx(ChevronUpIcon, {}) })] }), _jsx(ToolbarSeparator, {}), _jsx(LayoutEditor, { playerContainerRef: playerContainerRef, playerRef: playerRef, editing: editing, onEditingChange: setEditing, onReset: () => setResetKey((k) => k + 1), sections: sections, fps: fps, entryPath: entryPath }), generationStatus && (_jsxs(_Fragment, { children: [_jsx(ToolbarSeparator, {}), _jsxs("div", { className: 'flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] font-medium text-amber-400/90', children: [_jsx(SpinnerIcon, {}), _jsx("span", { children: formatGenerationStatus(generationStatus) })] })] })), generationErrors.length > 0 && (_jsxs(_Fragment, { children: [_jsx(ToolbarSeparator, {}), _jsxs("div", { className: 'flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] font-medium text-red-400/90', children: [_jsx("span", { style: { fontSize: 14, lineHeight: 1 }, children: "\u2715" }), _jsx("span", { children: generationErrors.length === 1
+                        }, className: 'flex items-center rounded-full px-2.5 py-1.5 text-[13px] font-medium tabular-nums text-zinc-400 hover:text-zinc-200 hover:bg-white/5 transition-colors cursor-pointer min-w-[3rem] justify-center', title: 'Playback speed (click to cycle)', children: playbackRate === 1 ? '1x' : `${playbackRate}x` }), _jsx(ToolbarSeparator, {}), _jsx(LayoutEditor, { playerContainerRef: playerContainerRef, playerRef: playerRef, editing: editing, onEditingChange: setEditing, onReset: () => setResetKey((k) => k + 1), sections: sections, fps: fps, entryPath: entryPath }), generationStatus && (_jsxs(_Fragment, { children: [_jsx(ToolbarSeparator, {}), _jsxs("div", { className: 'flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] font-medium text-amber-400/90', children: [_jsx(SpinnerIcon, {}), _jsx("span", { children: formatGenerationStatus(generationStatus) })] })] })), generationErrors.length > 0 && (_jsxs(_Fragment, { children: [_jsx(ToolbarSeparator, {}), _jsxs("div", { className: 'flex items-center gap-1.5 px-2.5 py-1.5 text-[13px] font-medium text-red-400/90', children: [_jsx("span", { style: { fontSize: 14, lineHeight: 1 }, children: "\u2715" }), _jsx("span", { children: generationErrors.length === 1
                                             ? `${generationErrors[0].namespace} failed: ${generationErrors[0].error.slice(0, 60)}`
-                                            : `${generationErrors.length} generations failed` })] })] }))] })] }));
+                                            : `${generationErrors.length} generations failed` })] })] })), _jsx(ToolbarSeparator, {}), _jsx("button", { onClick: goToNextScene, disabled: !hasNextScene, className: 'flex items-center justify-center rounded-full w-7 h-7 text-zinc-400 hover:text-zinc-200 hover:bg-white/5 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-default disabled:hover:bg-transparent disabled:hover:text-zinc-400', title: 'Next scene (\u2191)', children: _jsx(ChevronUpIcon, {}) })] })] }));
 }

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

@@ -6,6 +6,8 @@ export declare function useMediaDurations(): Record<string, number>;
 export declare function useGenerationStatus(): GenerationStatus | null;
 /** Hook: recent generation errors (auto-cleared after 8s). */
 export declare function useGenerationErrors(): GenerationError[];
+/** Hook: whether the right tweakpane sidebar is open. */
+export declare function useSidebarOpen(): boolean;
 /** Hook: user modules from virtual:egaki-modules. */
 export declare function useModules(): EagerModules;
 export type { GenerationStatus, GenerationError };

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

@@ -1 +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"}
+{"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;AA6EvD,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,yDAAyD;AACzD,wBAAgB,cAAc,IAAI,OAAO,CAExC;AAED,qDAAqD;AACrD,wBAAgB,UAAU,IAAI,YAAY,CAEzC;AAED,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,CAAA"}

package/dist/vite/store-hooks.js

@@ -69,6 +69,10 @@ const subscribeGenerationErrors = (callback) => egakiStore.subscribe((state) =>
 const getGenerationErrors = () => egakiStore.getState().serverGenerationErrors;
 const EMPTY_ERRORS = [];
 const getGenerationErrorsServer = () => EMPTY_ERRORS;
+// Sidebar open state
+const subscribeSidebarOpen = (callback) => egakiStore.subscribe((state) => state.sidebarOpen, callback);
+const getSidebarOpen = () => egakiStore.getState().sidebarOpen;
+const getSidebarOpenServer = () => false;
 // Modules
 const subscribeModules = (callback) => egakiStore.subscribe((state) => state.modules, callback);
 const getModules = () => egakiStore.getState().modules;
@@ -87,6 +91,10 @@ export function useGenerationStatus() {
 export function useGenerationErrors() {
     return useSyncExternalStore(subscribeGenerationErrors, getGenerationErrors, getGenerationErrorsServer);
 }
+/** Hook: whether the right tweakpane sidebar is open. */
+export function useSidebarOpen() {
+    return useSyncExternalStore(subscribeSidebarOpen, getSidebarOpen, getSidebarOpenServer);
+}
 /** Hook: user modules from virtual:egaki-modules. */
 export function useModules() {
     return useSyncExternalStore(subscribeModules, getModules, getModules);

package/dist/vite/store.d.ts

@@ -54,6 +54,9 @@ export interface EgakiClientState {
     /** Recent generation errors from the server progress stream.
      *  Errors auto-clear after ERROR_DISPLAY_DURATION_MS. */
     serverGenerationErrors: GenerationError[];
+    /** Whether the right tweakpane sidebar is open. Closed by default so the
+     *  video takes the full width. */
+    sidebarOpen: boolean;
 }
 export declare const egakiStore: Omit<import("zustand/vanilla").StoreApi<EgakiClientState>, "subscribe"> & {
     subscribe: {
@@ -64,6 +67,8 @@ export declare const egakiStore: Omit<import("zustand/vanilla").StoreApi<EgakiCl
         } | undefined): () => void;
     };
 };
+/** Open or close the right tweakpane sidebar. */
+export declare function setSidebarOpen(open: boolean): void;
 /**
  * Derive per-section max media durations.
  * Returns Record<string, number> (section-index-as-string → seconds).

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

@@ -1 +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"}
+{"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;IAEzC;sCACkC;IAClC,WAAW,EAAE,OAAO,CAAA;CACrB;AAMD,eAAO,MAAM,UAAU;;;;;;;;CAStB,CAAA;AAED,iDAAiD;AACjD,wBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,QAE3C;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

@@ -23,7 +23,12 @@ export const egakiStore = createStore()(subscribeWithSelector(() => ({
     serverGenerationStatus: null,
     serverGenerationEntries: [],
     serverGenerationErrors: [],
+    sidebarOpen: false,
 })));
+/** Open or close the right tweakpane sidebar. */
+export function setSidebarOpen(open) {
+    egakiStore.setState({ sidebarOpen: open });
+}
 // ---------------------------------------------------------------------------
 // Selectors — derive values from state
 // ---------------------------------------------------------------------------

package/dist/vite/tweakpane-hook.d.ts

@@ -77,9 +77,12 @@ export declare function useTweakpane<T extends ParamSchema>(label: string, schem
 /** Sidebar width constant shared with player-page layout. */
 export declare const SIDEBAR_WIDTH = 280;
 /**
- * Right sidebar that hosts the tweakpane Pane. Always visible in the page
- * layout; the Pane mounts into the scrollable inner div. Also provides
- * player metadata (frame, fps, sections) to the copy prompt button.
+ * Right sidebar that hosts the tweakpane Pane. Collapsed by default so the
+ * video takes the full width; a fixed top-right button opens it. The sidebar
+ * container stays mounted while collapsed (hidden via display: none) because
+ * useTweakpane registers controls into it — unmounting would lose all
+ * registrations until components remount. Also provides player metadata
+ * (frame, fps, sections) to the copy prompt button.
  */
 export declare function TweakpaneRoot({ playerRef, fps, sections, entryPath, }: {
     playerRef: React.RefObject<PlayerRef | null>;

package/dist/vite/tweakpane-hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tweakpane-hook.d.ts","sourceRoot":"","sources":["../../src/vite/tweakpane-hook.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"tweakpane-hook.d.ts","sourceRoot":"","sources":["../../src/vite/tweakpane-hook.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AASjD,oDAAoD;AACpD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,oDAAoD;AACpD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,EAAE,CAAA;CAClB;AAED,iEAAiE;AACjE,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,aAAa,CAAA;IACnB,KAAK,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;CACxC;AAED,yFAAyF;AACzF,UAAU,UAAU;IAClB,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAA;IACnC,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED;;;;;;;GAOG;AACH,KAAK,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,WAAW,GAAG,WAAW,GAAG,gBAAgB,GAAG,UAAU,CAAA;AAEvG,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAE7C,qKAAqK;AACrK,KAAK,cAAc,CAAC,CAAC,SAAS,WAAW,IAAI;KAC1C,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,WAAW,GAAG,MAAM,GAC7C,CAAC,CAAC,CAAC,CAAC,SAAS,WAAW,GAAG,MAAM,GACjC,CAAC,CAAC,CAAC,CAAC,SAAS,gBAAgB,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,GAChE,CAAC,CAAC,CAAC,CAAC,SAAS,UAAU,GAAG;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GACtD,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAC5B,CAAC,CAAC,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,GAC9B,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAC5B,CAAC,CAAC,CAAC,CAAC;CACT,CAAA;AAMD,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,CAAA;IAC5C,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE;QAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,gBAAgB,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAChE,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,eAAO,MAAM,gBAAgB,uDAAoD,CAAA;AAMjF;;;GAGG;AACH,eAAO,IAAI,kBAAkB,SAAQ,CAAA;AAwQrC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,WAAW,EAChD,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,CAAC,GACR,cAAc,CAAC,CAAC,CAAC,CA0InB;AAMD,6DAA6D;AAC7D,eAAO,MAAM,aAAa,MAAM,CAAA;AAqBhC;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,GAAG,EACH,QAAQ,EACR,SAAS,GACV,EAAE;IACD,SAAS,EAAE,KAAK,CAAC,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC,CAAA;IAC5C,GAAG,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE;QAAE,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,gBAAgB,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IAChE,SAAS,EAAE,MAAM,CAAA;CAClB,+BAoEA"}

package/dist/vite/tweakpane-hook.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Tweakpane integration for the egaki video player.
  *
@@ -21,6 +21,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useCallback, useEffect, useRef, useState, useSyncExternalStore, createContext, useContext } from 'react';
 import { LayoutContainerContext, useIsPremounting } from "./mdx-video.js";
+import { setSidebarOpen } from "./store.js";
+import { useSidebarOpen } from "./store-hooks.js";
 export const TweakpaneContext = createContext(null);
 // ---------------------------------------------------------------------------
 // Global disable switch
@@ -410,10 +412,17 @@ export function useTweakpane(label, schema) {
 // ---------------------------------------------------------------------------
 /** Sidebar width constant shared with player-page layout. */
 export const SIDEBAR_WIDTH = 280;
+/** Lucide-style panel-right icon used for both opening and closing the sidebar. */
+function PanelRightIcon() {
+    return (_jsxs("svg", { width: '16', height: '16', viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '1.5', strokeLinecap: 'round', strokeLinejoin: 'round', children: [_jsx("rect", { x: '3', y: '3', width: '18', height: '18', rx: '2' }), _jsx("line", { x1: '15', y1: '3', x2: '15', y2: '21' })] }));
+}
 /**
- * Right sidebar that hosts the tweakpane Pane. Always visible in the page
- * layout; the Pane mounts into the scrollable inner div. Also provides
- * player metadata (frame, fps, sections) to the copy prompt button.
+ * Right sidebar that hosts the tweakpane Pane. Collapsed by default so the
+ * video takes the full width; a fixed top-right button opens it. The sidebar
+ * container stays mounted while collapsed (hidden via display: none) because
+ * useTweakpane registers controls into it — unmounting would lose all
+ * registrations until components remount. Also provides player metadata
+ * (frame, fps, sections) to the copy prompt button.
  */
 export function TweakpaneRoot({ playerRef, fps, sections, entryPath, }) {
     // Ref callback sets the container synchronously when the DOM node mounts,
@@ -435,16 +444,18 @@ export function TweakpaneRoot({ playerRef, fps, sections, entryPath, }) {
             contextRef = null;
         };
     }, [playerRef, fps, sections, entryPath]);
-    return (_jsxs("div", { className: 'egaki-sidebar', style: {
-            width: SIDEBAR_WIDTH,
-            minWidth: SIDEBAR_WIDTH,
-            height: '100vh',
-            position: 'sticky',
-            top: 0,
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            background: '#111',
-            borderLeft: '1px solid rgba(255,255,255,0.08)',
-            flexShrink: 0,
-        }, children: [_jsx(CopyChangesButton, {}), _jsx("div", { ref: containerRefCallback, id: 'egaki-tweakpane', style: { width: '100%' } })] }));
+    const sidebarOpen = useSidebarOpen();
+    return (_jsxs(_Fragment, { children: [!sidebarOpen && (_jsx("button", { onClick: () => setSidebarOpen(true), title: 'Open controls sidebar', className: 'fixed top-4 right-4 z-10 flex items-center justify-center rounded-lg w-8 h-8 text-zinc-400 hover:text-zinc-200 hover:bg-white/5 transition-colors cursor-pointer', children: _jsx(PanelRightIcon, {}) })), _jsxs("div", { className: 'egaki-sidebar', style: {
+                    width: SIDEBAR_WIDTH,
+                    minWidth: SIDEBAR_WIDTH,
+                    height: '100vh',
+                    position: 'sticky',
+                    top: 0,
+                    overflowY: 'auto',
+                    overflowX: 'hidden',
+                    background: '#111',
+                    borderLeft: '1px solid rgba(255,255,255,0.08)',
+                    flexShrink: 0,
+                    display: sidebarOpen ? undefined : 'none',
+                }, children: [_jsx("div", { className: 'flex items-center justify-end px-2 pt-2', children: _jsx("button", { onClick: () => setSidebarOpen(false), title: 'Close controls sidebar', className: 'flex items-center justify-center rounded-lg w-8 h-8 text-zinc-400 hover:text-zinc-200 hover:bg-white/5 transition-colors cursor-pointer', children: _jsx(PanelRightIcon, {}) }) }), _jsx(CopyChangesButton, {}), _jsx("div", { ref: containerRefCallback, id: 'egaki-tweakpane', style: { width: '100%' } })] })] }));
 }

package/dist/vite/vite-plugin.d.ts

@@ -18,11 +18,5 @@ export interface VideoPluginOptions {
      *  All other .mdx files in the project become additional routes. */
     entry?: string;
 }
-/**
- * Compare old and new MDX sources section-by-section. Returns the index
- * of the first added or edited section, or null if nothing changed (or
- * only deletions occurred, which we skip per design).
- */
-export declare function findChangedSectionIndex(oldSource: string, newSource: string): number | null;
 export declare function video(options?: VideoPluginOptions): PluginOption[];
 //# sourceMappingURL=vite-plugin.d.ts.map

package/dist/vite/vite-plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../src/vite/vite-plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAMH,OAAO,KAAK,EAAU,YAAY,EAAE,MAAM,MAAM,CAAA;AA4BhD,MAAM,WAAW,kBAAkB;IACjC;;wEAEoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAuCD;;;;GAIG;AACH,wBAAgB,uBAAuB,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAuB3F;AAoCD,wBAAgB,KAAK,CAAC,OAAO,CAAC,EAAE,kBAAkB,GAAG,YAAY,EAAE,CAwalE"}
+{"version":3,"file":"vite-plugin.d.ts","sourceRoot":"","sources":["../../src/vite/vite-plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAMH,OAAO,KAAK,EAAU,YAAY,EAAE,MAAM,MAAM,CAAA;AA4BhD,MAAM,WAAW,kBAAkB;IACjC;;wEAEoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAiDD,wBAAgB,KAAK,CAAC,OAAO,CAAC,EAAE,kBAAkB,GAAG,YAAY,EAAE,CAoYlE"}

package/dist/vite/vite-plugin.js

@@ -46,60 +46,6 @@ function resolveSourceToFile(root, source) {
     }
     return undefined;
 }
-/**
- * Extract raw source text ranges per section directly from the mdast.
- * Works with heading nodes' positions to capture the FULL raw heading
- * text including props like `duration=3s` and `transition=20` that
- * `splitIntoSections` strips during parsing. Each section spans from
- * its heading's start offset to the next heading's start (or EOF).
- */
-function sectionRawTexts(source, mdast) {
-    // Collect the start offsets of each heading node
-    const headingStarts = [];
-    for (const node of mdast.children) {
-        if (node.type === 'heading' && node.position?.start?.offset != null) {
-            headingStarts.push(node.position.start.offset);
-        }
-    }
-    // Slice source between consecutive headings, trimming trailing whitespace
-    // so boundary changes (adding/removing a following section) don't cause
-    // false positives on the preceding section.
-    return headingStarts.map((start, i) => {
-        const end = i + 1 < headingStarts.length ? headingStarts[i + 1] : source.length;
-        return source.slice(start, end).trimEnd();
-    });
-}
-/**
- * Compare old and new MDX sources section-by-section. Returns the index
- * of the first added or edited section, or null if nothing changed (or
- * only deletions occurred, which we skip per design).
- */
-export function findChangedSectionIndex(oldSource, newSource) {
-    try {
-        const oldTexts = sectionRawTexts(oldSource, mdxParse(oldSource));
-        const newTexts = sectionRawTexts(newSource, mdxParse(newSource));
-        const maxLen = Math.max(oldTexts.length, newTexts.length);
-        for (let i = 0; i < maxLen; i++) {
-            if (i >= oldTexts.length)
-                return i; // new section added
-            if (i >= newTexts.length)
-                return null; // section deleted, skip
-            if (oldTexts[i] !== newTexts[i]) {
-                // Distinguish edit from deletion: if the next old section matches
-                // the current new section, a section was deleted (shifted down).
-                // Look ahead to detect deletions at any position, not just the tail.
-                if (newTexts.length < oldTexts.length && oldTexts[i + 1] === newTexts[i]) {
-                    return null; // deletion, skip
-                }
-                return i; // content changed
-            }
-        }
-        return null; // no scene-level change (frontmatter/preamble only)
-    }
-    catch {
-        return null; // parse error, don't seek
-    }
-}
 /** Discover .mdx files in the project root directory (non-recursive).
  *  Only root-level files become entries to avoid import resolution issues
  *  with nested paths. Returns a map of routePath → absolutePath. */
@@ -146,8 +92,6 @@ export function video(options) {
     let defaultRoute = '';
     /** Whether the user's project has `motion` (framer-motion) installed. */
     let hasMotion = false;
-    /** Cached previous MDX sources for section-level diff detection, keyed by abs path. */
-    const previousMdxSources = new Map();
     /** Set of absolute paths of all entry MDX files for quick lookup. */
     let entryPathSet = new Set();
     /** Is this file referenced inside a <Server> block of any entry MDX?
@@ -193,13 +137,6 @@ export function video(options) {
             }
             defaultRoute = resolveDefaultRoute(mdxEntries, options?.entry, root);
             entryPathSet = new Set(mdxEntries.values());
-            // Seed previous sources for section-level diff detection.
-            for (const [, absPath] of mdxEntries) {
-                try {
-                    previousMdxSources.set(absPath, fs.readFileSync(absPath, 'utf-8'));
-                }
-                catch { /* ignore read errors */ }
-            }
             // Auto-generate egaki-env.d.ts so MDX LSP knows about built-in
             // components via the global MDXProvidedComponents type. Same
             // pattern Vite uses for vite-env.d.ts.
@@ -407,21 +344,7 @@ export function video(options) {
                     mdxEntries.set(relPath.replace(/\.mdx$/, ''), absEntry);
                 }
                 defaultRoute = resolveDefaultRoute(mdxEntries, options?.entry, root);
-                const nextEntryPathSet = new Set(mdxEntries.values());
-                // Sync previousMdxSources: seed new entries, prune removed ones.
-                for (const file of previousMdxSources.keys()) {
-                    if (!nextEntryPathSet.has(file))
-                        previousMdxSources.delete(file);
-                }
-                for (const file of nextEntryPathSet) {
-                    if (!previousMdxSources.has(file)) {
-                        try {
-                            previousMdxSources.set(file, fs.readFileSync(file, 'utf-8'));
-                        }
-                        catch { /* file may be mid-write */ }
-                    }
-                }
-                entryPathSet = nextEntryPathSet;
+                entryPathSet = new Set(mdxEntries.values());
                 invalidateVirtual([RESOLVED_APP, RESOLVED_MDX, RESOLVED_MODULES]);
                 if (this.environment.name === 'client') {
                     ctx.server.environments.client?.hot.send({ type: 'full-reload' });
@@ -431,25 +354,11 @@ export function video(options) {
             if (isEntryMdx) {
                 invalidateVirtual([RESOLVED_APP, RESOLVED_MDX]);
                 if (this.environment.name === 'client') {
-                    // Section-level diff detection for the changed entry.
-                    const newMdxSource = fs.readFileSync(normalizedFile, 'utf-8');
-                    const prevSource = previousMdxSources.get(normalizedFile);
-                    const changedSection = prevSource != null
-                        ? findChangedSectionIndex(prevSource, newMdxSource)
-                        : null;
-                    previousMdxSources.set(normalizedFile, newMdxSource);
                     ctx.server.environments.client?.hot.send({
                         type: 'custom',
                         event: 'rsc:update',
                         data: { file: ctx.file },
                     });
-                    if (changedSection != null) {
-                        ctx.server.environments.client?.hot.send({
-                            type: 'custom',
-                            event: 'egaki:scene-changed',
-                            data: { sectionIndex: changedSection, file: normalizedFile },
-                        });
-                    }
                 }
                 return [];
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "egaki",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "type": "module",
   "description": "AI image, video, and speech generation CLI with MDX-to-video framework",
   "main": "./dist/cli/main.js",
@@ -111,17 +111,18 @@
     "tweakpane": "^4.0.5",
     "yaml": "^2.9.0",
     "zod": "^4.3.6",
+    "@vitejs/plugin-react": "^6.0.2",
+    "spiceflow": "1.26.0-rsc.7",
     "zustand": "^5.0.14"
   },
   "peerDependencies": {
-    "@vitejs/plugin-react": ">=6",
+    "vite": ">=6",
     "motion": ">=12",
     "motion-dom": ">=12",
-    "motion-utils": ">=12",
-    "spiceflow": ">=1.26.0-rsc.5"
+    "motion-utils": ">=12"
   },
   "peerDependenciesMeta": {
-    "@vitejs/plugin-react": {
+    "vite": {
       "optional": true
     },
     "motion": {
@@ -132,15 +133,14 @@
     },
     "motion-utils": {
       "optional": true
-    },
-    "spiceflow": {
-      "optional": true
     }
   },
+  "optionalDependencies": {
+    "node-web-audio-api": ">=1"
+  },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
     "@types/react": "^19.2.17",
-    "@vitejs/plugin-react": "^6.0.2",
     "vite": "^8.0.10",
     "vitest": "^4.1.8"
   },