egaki 0.7.2 → 0.9.0

package/src/vite/store-hooks.ts

@@ -85,6 +85,12 @@ const getGenerationErrors = () => egakiStore.getState().serverGenerationErrors
 const EMPTY_ERRORS: GenerationError[] = []
 const getGenerationErrorsServer = () => EMPTY_ERRORS
 
+// Sidebar open state
+const subscribeSidebarOpen = (callback: () => void) =>
+  egakiStore.subscribe((state) => state.sidebarOpen, callback)
+const getSidebarOpen = () => egakiStore.getState().sidebarOpen
+const getSidebarOpenServer = () => false
+
 // Modules
 const subscribeModules = (callback: () => void) =>
   egakiStore.subscribe((state) => state.modules, callback)
@@ -109,6 +115,11 @@ export function useGenerationErrors(): GenerationError[] {
   return useSyncExternalStore(subscribeGenerationErrors, getGenerationErrors, getGenerationErrorsServer)
 }
 
+/** Hook: whether the right tweakpane sidebar is open. */
+export function useSidebarOpen(): boolean {
+  return useSyncExternalStore(subscribeSidebarOpen, getSidebarOpen, getSidebarOpenServer)
+}
+
 /** Hook: user modules from virtual:egaki-modules. */
 export function useModules(): EagerModules {
   return useSyncExternalStore(subscribeModules, getModules, getModules)

package/src/vite/store.ts

@@ -70,6 +70,10 @@ 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
 }
 
 // ---------------------------------------------------------------------------
@@ -83,9 +87,15 @@ export const egakiStore = createStore<EgakiClientState>()(
     serverGenerationStatus: null as GenerationStatus | null,
     serverGenerationEntries: [] as GenerationProgressEntry[],
     serverGenerationErrors: [] as GenerationError[],
+    sidebarOpen: false as boolean,
   })),
 )
 
+/** Open or close the right tweakpane sidebar. */
+export function setSidebarOpen(open: boolean) {
+  egakiStore.setState({ sidebarOpen: open })
+}
+
 // ---------------------------------------------------------------------------
 // Selectors — derive values from state
 // ---------------------------------------------------------------------------

package/src/vite/tweakpane-hook.tsx

@@ -18,11 +18,21 @@
  * Tweakpane is pure DOM (no React dependency), so there are no dual-React
  * or SSR issues. During SSR (typeof window === 'undefined') the hook
  * returns the raw default values and skips all DOM work.
+ *
+ * Live props vs user overrides: each param follows the LIVE schema value
+ * passed on every render (so animated props like translateX={interpolate(...)}
+ * work) until the user touches that control in the pane. Once touched, the
+ * user's value wins for that key until the component remounts. Untouched
+ * controls are refreshed in the pane every render so animated values are
+ * visible while playing. Programmatic refreshes are guarded so tweakpane's
+ * change events (which fire on refresh() too) don't mark keys as touched.
  */
 
 import { useCallback, useEffect, useRef, useState, useSyncExternalStore, createContext, useContext } from 'react'
 import type { PlayerRef } from '@remotion/player'
 import { LayoutContainerContext, useIsPremounting } from './mdx-video.tsx'
+import { setSidebarOpen } from './store.ts'
+import { useSidebarOpen } from './store-hooks.ts'
 
 // ---------------------------------------------------------------------------
 // Types
@@ -127,6 +137,10 @@ interface FolderEntry {
   params: Record<string, unknown>
   /** The original default values for diffing. */
   defaults: Record<string, unknown>
+  /** Keys the user changed via the pane UI. Only these count as "changed"
+   *  in the copy prompt — untouched keys track live (possibly animated)
+   *  props, so diffing them against mount-time defaults would be noise. */
+  touched: Set<string>
 }
 const activeFolders = new Map<string, FolderEntry>()
 
@@ -144,6 +158,22 @@ function cloneValue<T>(value: T): T {
   return value
 }
 
+/** Deep-equal for param values: primitives, small arrays (bezier tuples),
+ *  and flat objects (range {min, max}). */
+function valuesEqual(a: unknown, b: unknown): boolean {
+  if (a === b) return true
+  if (Array.isArray(a) && Array.isArray(b)) {
+    return a.length === b.length && a.every((x, i) => x === b[i])
+  }
+  if (typeof a === 'object' && a !== null && typeof b === 'object' && b !== null) {
+    const ra = a as Record<string, unknown>
+    const rb = b as Record<string, unknown>
+    const ka = Object.keys(ra)
+    return ka.length === Object.keys(rb).length && ka.every((k) => ra[k] === rb[k])
+  }
+  return false
+}
+
 function resolveDefault(v: ParamValue): number | boolean | string | [number, number, number, number] | { min: number; max: number } {
   if (isCubicBezierParam(v)) return [...v.value]
   if (isRangeParam(v)) return { ...v.value }
@@ -277,7 +307,10 @@ function serializeTweakpanePrompt(
     const changed: string[] = []
     for (const [key, current] of Object.entries(entry.params)) {
       const def = entry.defaults[key]
-      if (current !== def) {
+      // Only user-touched keys count as changed. Untouched keys mirror live
+      // (possibly animated) props, so comparing them to mount-time defaults
+      // would produce false positives on every playing frame.
+      if (entry.touched.has(key) && !valuesEqual(current, def)) {
         changed.push(`  ${key}: ${formatValue(current)}`)
       }
     }
@@ -378,6 +411,12 @@ function CopyChangesButton() {
  * Returns a reactive object with current values. Updating a control in the
  * pane immediately triggers a React re-render with fresh values.
  *
+ * Values follow live props: each key returns the schema value from the
+ * CURRENT render until the user touches that control in the pane, so
+ * animated props (e.g. `translateX={interpolate(frame, ...)}`) flow through
+ * every frame. Once touched, the user's pane value wins for that key until
+ * the component remounts.
+ *
  * On unmount the folder is disposed and removed from the pane.
  */
 export function useTweakpane<T extends ParamSchema>(
@@ -406,6 +445,22 @@ export function useTweakpane<T extends ParamSchema>(
   const schemaRef = useRef(schema)
   schemaRef.current = schema
 
+  // Keys the user changed via the pane UI. Untouched keys follow the live
+  // schema value on every render (so animated props work); touched keys keep
+  // the user's pane value until remount.
+  const touchedRef = useRef<Set<string>>(new Set())
+  // Latest user override values, mirrored from state so the mount effect can
+  // seed rebuilt folders without re-running on every pane change.
+  const valuesRef = useRef(values)
+  valuesRef.current = values
+  // Live handles to the mounted folder + bound params, used by the per-render
+  // sync effect below to push animated prop values into the pane.
+  const liveRef = useRef<{ folder: import('tweakpane').FolderApi; params: Record<string, unknown> } | null>(null)
+  // True while we call folder.refresh() programmatically. tweakpane emits
+  // change events on refresh() too, so handlers must ignore those or every
+  // animated frame would mark keys as user-touched.
+  const refreshingRef = useRef(false)
+
   // Stable ID for this hook instance
   const idRef = useRef(`${label}-${Math.random().toString(36).slice(2, 8)}`)
 
@@ -423,7 +478,10 @@ export function useTweakpane<T extends ParamSchema>(
       const def = resolveDefault(param)
       // Clone object/array values so tweakpane's in-place mutations on params
       // don't corrupt the defaults (used by "Copy changes" diffing).
-      params[key] = cloneValue(def)
+      // Touched keys keep the user's override when the folder is rebuilt
+      // (e.g. premount → active transition re-runs this effect).
+      const touched = touchedRef.current.has(key)
+      params[key] = cloneValue(touched ? valuesRef.current[key] : def)
       defaults[key] = cloneValue(def)
     }
 
@@ -447,6 +505,7 @@ export function useTweakpane<T extends ParamSchema>(
             picker: 'inline',
           } as any)
           ;(blade as any).on('change', (ev: any) => {
+            if (refreshingRef.current) return
             const val = ev.value
             const tuple: [number, number, number, number] = [
               Math.round(val.x1 * 1000) / 1000,
@@ -455,6 +514,7 @@ export function useTweakpane<T extends ParamSchema>(
               Math.round(val.y2 * 1000) / 1000,
             ]
             params[key] = tuple
+            touchedRef.current.add(key)
             setValues((prev) => ({ ...prev, [key]: tuple }))
           })
           continue
@@ -466,7 +526,9 @@ export function useTweakpane<T extends ParamSchema>(
             max: param.max,
             step: param.step,
           }).on('change', (ev) => {
+            if (refreshingRef.current) return
             const val = ev.value as { min: number; max: number }
+            touchedRef.current.add(key)
             setValues((prev) => ({ ...prev, [key]: { min: val.min, max: val.max } }))
           })
           continue
@@ -495,17 +557,22 @@ export function useTweakpane<T extends ParamSchema>(
         }
 
         folder.addBinding(params, key, opts).on('change', (ev) => {
+          if (refreshingRef.current) return
+          touchedRef.current.add(key)
           setValues((prev) => ({ ...prev, [key]: ev.value }))
         })
       }
 
+      liveRef.current = { folder, params }
+
       // Register for copy prompt
-      activeFolders.set(id, { label, params, defaults })
+      activeFolders.set(id, { label, params, defaults, touched: touchedRef.current })
       notifyFolderListeners()
     })()
 
     return () => {
       disposed = true
+      liveRef.current = null
       if (folder) {
         folder.dispose()
         folder = null
@@ -520,7 +587,40 @@ export function useTweakpane<T extends ParamSchema>(
     }
   }, [label, skip])
 
-  return values as ResolvedValues<T>
+  // Push live (possibly animated) prop values into the pane for untouched
+  // keys. Runs after every render — during playback the component re-renders
+  // each frame, so animated values are visible moving in the pane UI.
+  // folder.refresh() emits change events; refreshingRef makes handlers
+  // ignore them so refreshes never mark keys as touched.
+  useEffect(() => {
+    const live = liveRef.current
+    if (!live) return
+    let dirty = false
+    for (const [key, param] of Object.entries(schemaRef.current)) {
+      if (touchedRef.current.has(key)) continue
+      // Bezier blades are not bindings — refresh() won't read params for
+      // them. The returned value still follows live props below.
+      if (isCubicBezierParam(param)) continue
+      const liveVal = resolveDefault(param)
+      if (!valuesEqual(live.params[key], liveVal)) {
+        live.params[key] = cloneValue(liveVal)
+        dirty = true
+      }
+    }
+    if (dirty) {
+      refreshingRef.current = true
+      live.folder.refresh()
+      refreshingRef.current = false
+    }
+  })
+
+  // Merge: user-touched keys return the pane value, untouched keys follow
+  // the live schema value so animated props work without any extra wiring.
+  const merged: Record<string, unknown> = {}
+  for (const [key, param] of Object.entries(schema)) {
+    merged[key] = touchedRef.current.has(key) ? values[key] : resolveDefault(param)
+  }
+  return merged as ResolvedValues<T>
 }
 
 // ---------------------------------------------------------------------------
@@ -530,10 +630,32 @@ export function useTweakpane<T extends ParamSchema>(
 /** 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 (
+    <svg
+      width='16'
+      height='16'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth='1.5'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    >
+      <rect x='3' y='3' width='18' height='18' rx='2' />
+      <line x1='15' y1='3' x2='15' y2='21' />
+    </svg>
+  )
+}
+
 /**
- * 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,
@@ -566,28 +688,51 @@ export function TweakpaneRoot({
     }
   }, [playerRef, fps, sections, entryPath])
 
+  const sidebarOpen = useSidebarOpen()
+
   return (
-    <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,
-      }}
-    >
-      <CopyChangesButton />
+    <>
+      {!sidebarOpen && (
+        <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'
+        >
+          <PanelRightIcon />
+        </button>
+      )}
       <div
-        ref={containerRefCallback}
-        id='egaki-tweakpane'
-        style={{ width: '100%' }}
-      />
-    </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',
+        }}
+      >
+        <div className='flex items-center justify-end px-2 pt-2'>
+          <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'
+          >
+            <PanelRightIcon />
+          </button>
+        </div>
+        <CopyChangesButton />
+        <div
+          ref={containerRefCallback}
+          id='egaki-tweakpane'
+          style={{ width: '100%' }}
+        />
+      </div>
+    </>
   )
 }

package/src/vite/vite-plugin.ts

@@ -64,60 +64,6 @@ function resolveSourceToFile(root: string, source: string): string | undefined {
   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: string, mdast: any): string[] {
-  // Collect the start offsets of each heading node
-  const headingStarts: number[] = []
-  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: string, newSource: string): number | null {
-  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. */
@@ -160,8 +106,6 @@ export function video(options?: VideoPluginOptions): PluginOption[] {
   let defaultRoute: string = ''
   /** 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: Map<string, string> = new Map()
   /** Set of absolute paths of all entry MDX files for quick lookup. */
   let entryPathSet: Set<string> = new Set()
 
@@ -217,13 +161,6 @@ export function video(options?: VideoPluginOptions): PluginOption[] {
       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.
@@ -432,19 +369,7 @@ export function video(options?: VideoPluginOptions): PluginOption[] {
           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') {
@@ -457,26 +382,11 @@ export function video(options?: VideoPluginOptions): PluginOption[] {
         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 []
       }