egaki 0.7.2 → 0.8.0

package/src/cli/loudness-detect.ts

@@ -0,0 +1,129 @@
+// LUFS (Loudness Units Full Scale) measurement for audio files.
+// Ported from meltica. Uses node-web-audio-api (native NAPI Rust binding)
+// as an optional dependency. If missing, returns an Error with install instructions.
+//
+// Implements a simplified LUFS measurement inspired by EBU R128 / ITU-R BS.1770:
+// K-weighting via biquad filters (approximate, not exact BS.1770 coefficients),
+// 400ms blocks with 100ms hop, two-pass gating (absolute -70 LUFS gate, then
+// relative -10 LU gate). Energy averaging is done in the linear domain (mean
+// square) before converting to LUFS, which is the correct approach.
+//
+// The K-weighting filters are simplified (highpass 60Hz + highshelf 1500Hz)
+// rather than the exact BS.1770 pre-filter + RLB coefficients, so results
+// may differ slightly from reference implementations.
+
+interface LoudnessResult {
+  /** Integrated loudness in LUFS (two-pass gated average). */
+  integrated: number
+  /** Maximum momentary loudness (single 400ms block). */
+  max: number
+  /** Minimum momentary loudness above the absolute gate. */
+  min: number
+  /** Loudness range (max - min) in LU. */
+  range: number
+}
+
+function lufsFromMeanSquare(ms: number): number {
+  return -0.691 + 10 * Math.log10(ms)
+}
+
+export async function detectLoudness(buffer: ArrayBuffer): Promise<Error | LoudnessResult> {
+  let webAudioMod: any
+  try {
+    webAudioMod = await import('node-web-audio-api')
+  } catch {
+    return new Error(
+      'node-web-audio-api is required for loudness measurement. Install it:\n\n' +
+      '  pnpm add node-web-audio-api\n',
+    )
+  }
+
+  const context = new webAudioMod.AudioContext()
+  try {
+    const audioBuffer: AudioBuffer = await context.decodeAudioData(buffer)
+
+    const offlineContext = new webAudioMod.OfflineAudioContext(
+      audioBuffer.numberOfChannels,
+      audioBuffer.length,
+      audioBuffer.sampleRate,
+    )
+
+    const source = offlineContext.createBufferSource()
+    source.buffer = audioBuffer
+
+    // Simplified K-weighting: high-pass at 60Hz + high-shelf boost at 1500Hz
+    const highPass = offlineContext.createBiquadFilter()
+    highPass.type = 'highpass'
+    highPass.frequency.value = 60
+    highPass.Q.value = 0.7
+
+    const highShelf = offlineContext.createBiquadFilter()
+    highShelf.type = 'highshelf'
+    highShelf.frequency.value = 1500
+    highShelf.gain.value = 4
+
+    source.connect(highPass)
+    highPass.connect(highShelf)
+    highShelf.connect(offlineContext.destination)
+
+    source.start(0)
+    const rendered: AudioBuffer = await offlineContext.startRendering()
+
+    // 400ms blocks, 100ms hop
+    const blockSize = Math.floor(0.4 * rendered.sampleRate)
+    const hopSize = Math.floor(0.1 * rendered.sampleRate)
+
+    if (rendered.length < blockSize) {
+      return new Error('Audio must be at least 400ms for loudness measurement.')
+    }
+
+    // Collect mean square energy per block
+    const blocks: number[] = []
+
+    for (let i = 0; i <= rendered.length - blockSize; i += hopSize) {
+      let sumSquared = 0
+      for (let ch = 0; ch < rendered.numberOfChannels; ch++) {
+        const data = rendered.getChannelData(ch)
+        for (let j = 0; j < blockSize; j++) {
+          sumSquared += data[i + j]! * data[i + j]!
+        }
+      }
+      blocks.push(sumSquared / (blockSize * rendered.numberOfChannels))
+    }
+
+    // Two-pass gating per EBU R128:
+    // Pass 1: absolute gate at -70 LUFS
+    const absoluteGate = -70
+    const absoluteGated = blocks.filter((ms) => lufsFromMeanSquare(ms) > absoluteGate)
+
+    if (absoluteGated.length === 0) {
+      return new Error('Audio is silent or below the -70 LUFS gate threshold.')
+    }
+
+    // Pass 2: relative gate at -10 LU below the absolute-gated integrated loudness
+    const preliminaryMs = absoluteGated.reduce((s, v) => s + v, 0) / absoluteGated.length
+    const relativeGate = lufsFromMeanSquare(preliminaryMs) - 10
+    const relativeGated = absoluteGated.filter((ms) => lufsFromMeanSquare(ms) > relativeGate)
+
+    if (relativeGated.length === 0) {
+      return new Error('Audio is too quiet for reliable loudness measurement.')
+    }
+
+    // Integrated loudness: average energy in linear domain, then convert to LUFS
+    const integratedMs = relativeGated.reduce((s, v) => s + v, 0) / relativeGated.length
+    const integrated = lufsFromMeanSquare(integratedMs)
+
+    // Momentary loudness values for range calculation (from absolute-gated blocks)
+    const momentaryLufs = absoluteGated.map(lufsFromMeanSquare)
+    const max = Math.max(...momentaryLufs)
+    const min = Math.min(...momentaryLufs)
+    const range = max - min
+
+    return { integrated, max, min, range }
+  } catch (err) {
+    if (err instanceof Error) return err
+    return new Error(String(err))
+  } finally {
+    await context.close().catch(() => {})
+  }
+}

package/src/vite/code-block.tsx

@@ -32,8 +32,8 @@
  * - Cloudflare frame:       https://github.com/raycast/ray-so/blob/main/app/(navigation)/(code)/components/frames/CloudflareFrame.tsx
  */
 
-import { createContext, useContext, useEffect, useMemo, useState, type CSSProperties, type ReactNode } from 'react'
-import { interpolate, spring, useCurrentFrame, useVideoConfig } from 'remotion'
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useState, type CSSProperties, type ReactNode } from 'react'
+import { interpolate, spring, useCurrentFrame, useDelayRender, useVideoConfig } from 'remotion'
 import { useTweakpane } from './tweakpane-hook.tsx'
 
 // ---------------------------------------------------------------------------
@@ -422,12 +422,30 @@ function detectLanguage(title?: string, language?: string): string {
 
 function useHighlightedHtml(code: string, lang: string, highlightLines: number[]): string {
   const [html, setHtml] = useState('')
-
-  useEffect(() => {
+  const { delayRender, continueRender } = useDelayRender()
+
+  // delayRender registered during the first render (useState initializer) and
+  // continued only AFTER the highlighted html has been committed to the DOM
+  // (layout effect below). Continuing from inside the shiki .then() is too
+  // early: React batches the setHtml update, so the renderer could capture the
+  // frame between continueRender and the commit, producing an empty block in
+  // screenshots/filmstrips/exports.
+  const [handle] = useState(() => delayRender('shiki highlight'))
+  useLayoutEffect(() => {
+    if (html) continueRender(handle)
+  }, [html, handle, continueRender])
+  // Unmount safety: never leave a dangling handle.
+  useLayoutEffect(() => {
+    return () => continueRender(handle)
+  }, [handle, continueRender])
+
+  useLayoutEffect(() => {
     let cancelled = false
 
     void getHighlighter().then((h) => {
-      if (cancelled) return
+      if (cancelled) {
+        return
+      }
 
       // Load language on demand if not already loaded
       const loaded = h.getLoadedLanguages()
@@ -449,9 +467,13 @@ function useHighlightedHtml(code: string, lang: string, highlightLines: number[]
         }],
       })
       if (!cancelled) setHtml(result)
+    }).catch(() => {
+      continueRender(handle)
     })
 
-    return () => { cancelled = true }
+    return () => {
+      cancelled = true
+    }
   }, [code, lang, highlightLines.join(',')])
 
   return html

package/src/vite/layout-editor.tsx

@@ -687,7 +687,7 @@ export function LayoutEditor({ playerContainerRef, playerRef, editing, onEditing
     <div data-layout-editor-toolbar className='flex items-center gap-1.5 text-[13px]'>
       <ToolbarButton onClick={() => onEditingChange(!editing)} active={editing}
         title={editing ? 'Exit editing mode' : 'Edit layout — click to select, drag to move, corners to scale, double-click text to edit'}>
-        {editing ? '✦ Editing' : '✦ Edit Layout'}
+        {editing ? 'Editing' : 'Edit'}
       </ToolbarButton>
 
       {editing && changesCount > 0 && (

package/src/vite/mdx-video.test.tsx

@@ -14,7 +14,6 @@ import { mdxParse, extractImports, resolveModulePath } from 'safe-mdx/parse'
 import type { EagerModules } from 'safe-mdx/parse'
 import { MdastToJsx } from 'safe-mdx'
 import { splitIntoSections, calculateTotalDuration, resolveAutoDurations, parseFrontmatter, aspectRatioFromDimensions, buildMdxScope } from './mdx-parse.ts'
-import { findChangedSectionIndex } from './vite-plugin.ts'
 import { computeEffectiveDuration } from './media-duration-store.ts'
 import { findServerNodes, blankServerContents, collectServerImportSources, wrapGenerateNodes, collectServerFileImportNames } from './server-mdx.ts'
 import { stableJsonKey, hashKey, promptPrefix } from './server-components.tsx'
@@ -1978,99 +1977,6 @@ describe('computeEffectiveDuration with startInFrames', () => {
   })
 })
 
-describe('findChangedSectionIndex', () => {
-  const base = [
-    '---',
-    'fps: 30',
-    'bpm: 120',
-    '---',
-    '',
-    '# Intro duration=3s',
-    '',
-    'Hello world',
-    '',
-    '# Middle duration=2s',
-    '',
-    'Some content here',
-    '',
-    '# Outro duration=1s',
-    '',
-    'Goodbye',
-  ].join('\n')
-
-  test('identical content returns null', () => {
-    expect(findChangedSectionIndex(base, base)).toBe(null)
-  })
-
-  test('editing first section returns 0', () => {
-    const edited = base.replace('Hello world', 'Hello EDITED')
-    expect(findChangedSectionIndex(base, edited)).toBe(0)
-  })
-
-  test('editing second section returns 1', () => {
-    const edited = base.replace('Some content here', 'New content')
-    expect(findChangedSectionIndex(base, edited)).toBe(1)
-  })
-
-  test('editing last section returns 2', () => {
-    const edited = base.replace('Goodbye', 'See ya')
-    expect(findChangedSectionIndex(base, edited)).toBe(2)
-  })
-
-  test('adding a new section returns its index', () => {
-    const added = base + '\n\n# Bonus duration=1s\n\nExtra stuff'
-    expect(findChangedSectionIndex(base, added)).toBe(3)
-  })
-
-  test('deleting last section returns null (skip deletions)', () => {
-    const deleted = base.replace('\n# Outro duration=1s\n\nGoodbye', '')
-    expect(findChangedSectionIndex(base, deleted)).toBe(null)
-  })
-
-  test('deleting middle section returns null (skip deletions)', () => {
-    const deleted = base.replace('\n# Middle duration=2s\n\nSome content here\n', '\n')
-    expect(findChangedSectionIndex(base, deleted)).toBe(null)
-  })
-
-  test('editing heading text returns that section index', () => {
-    const edited = base.replace('# Middle duration=2s', '# Middle Renamed duration=2s')
-    expect(findChangedSectionIndex(base, edited)).toBe(1)
-  })
-
-  test('preamble-only change returns null', () => {
-    const withPreamble = '<Audio src="/bg.mp3" />\n\n' + base.split('\n').slice(4).join('\n')
-    const oldPreamble = '---\nfps: 30\nbpm: 120\n---\n\n' + withPreamble
-    const newPreamble = oldPreamble.replace('/bg.mp3', '/new-bg.mp3')
-    expect(findChangedSectionIndex(oldPreamble, newPreamble)).toBe(null)
-  })
-
-  test('frontmatter-only change returns null', () => {
-    const edited = base.replace('fps: 30', 'fps: 60')
-    expect(findChangedSectionIndex(base, edited)).toBe(null)
-  })
-
-  test('editing heading duration returns that section index', () => {
-    const edited = base.replace('duration=3s', 'duration=4s')
-    expect(findChangedSectionIndex(base, edited)).toBe(0)
-  })
-
-  test('editing heading transition returns that section index', () => {
-    const old = '# Intro duration=3s transition=10\n\nHello'
-    const edited = '# Intro duration=3s transition=20\n\nHello'
-    expect(findChangedSectionIndex(old, edited)).toBe(0)
-  })
-
-  test('broken MDX returns null (does not throw)', () => {
-    const valid = '# Intro duration=3s\n\nHello world'
-    const broken = '# Intro duration=3s\n\n<Component'
-    expect(findChangedSectionIndex(valid, broken)).toBe(null)
-  })
-
-  test('both sources broken returns null', () => {
-    expect(findChangedSectionIndex('<Foo', '<Bar')).toBe(null)
-  })
-})
-
 // ---------------------------------------------------------------------------
 // Parse error recovery
 // ---------------------------------------------------------------------------

package/src/vite/player-page.tsx

@@ -27,7 +27,7 @@ import { renderInBrowser } from './render-client.ts'
 import { createSpiceflowFetch } from 'spiceflow/client'
 import type { app } from './app.tsx'
 import { egakiStore } from './store.ts'
-import { useGenerationStatus, useGenerationErrors, type GenerationStatus } from './store-hooks.ts'
+import { useGenerationStatus, useGenerationErrors, useSidebarOpen, type GenerationStatus } from './store-hooks.ts'
 import { egakiSDK } from './sdk.ts'
 import { LayoutEditor, type SectionMeta } from './layout-editor.tsx'
 import { TweakpaneRoot, SIDEBAR_WIDTH } from './tweakpane-hook.tsx'
@@ -42,20 +42,6 @@ import {
 import { SectionIndexContext } from './media-duration-store.ts'
 import type { VideoFrontmatter } from './mdx-parse.ts'
 
-// ---------------------------------------------------------------------------
-// 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: { sectionIndex: number; file: string } | null = 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: (() => void) | null = 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.
@@ -131,9 +117,6 @@ function connectToProgress() {
 if (typeof window !== 'undefined') connectToProgress()
 
 if (import.meta.hot) {
-  import.meta.hot.on('egaki:scene-changed', (data: { sectionIndex: number; file: string }) => {
-    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', () => {
@@ -488,81 +471,6 @@ export function PlayerPage({
     })
   }, [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 as any)
-          player.removeEventListener('seeked', onSeek as any)
-        }
-        cancelPreviousAutoPlay = cleanup
-        const onFrame = () => {
-          if (cancelled) return
-          if (player.getCurrentFrame() >= endFrame) {
-            player.pause()
-            cleanup()
-          }
-        }
-        const onSeek = (e: any) => {
-          // 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 as any)
-        player.addEventListener('seeked', onSeek as any)
-      }
-    })
-  }, [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
@@ -573,6 +481,7 @@ export function PlayerPage({
 
   const generationStatus = useGenerationStatus()
   const generationErrors = useGenerationErrors()
+  const sidebarOpen = useSidebarOpen()
 
   const [editing, setEditing] = useState(false)
   const [resetKey, setResetKey] = useState(0)
@@ -961,17 +870,29 @@ export function PlayerPage({
         </div>
       </div>
 
-      {/* Right sidebar — always visible, hosts tweakpane controls */}
+      {/* Right sidebar — collapsible, hosts tweakpane controls */}
       <TweakpaneRoot playerRef={playerRef} fps={fps} sections={sections} entryPath={entryPath} />
 
       {/* Floating toolbar — fixed at bottom, offset left to account for sidebar */}
       <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%)',
         }}
       >
+        {/* Previous scene (Down) — first item in the toolbar */}
+        <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 (↓)'
+        >
+          <ChevronDownIcon />
+        </button>
+
+        <ToolbarSeparator />
+
         {/* Entry selector — only shown when multiple MDX files exist */}
         {availableEntries.length > 1 && (
           <>
@@ -1046,28 +967,6 @@ export function PlayerPage({
 
         <ToolbarSeparator />
 
-        {/* Scene navigation — prev (Down) / next (Up) */}
-        <div className='flex items-center'>
-          <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 (↓)'
-          >
-            <ChevronDownIcon />
-          </button>
-          <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 (↑)'
-          >
-            <ChevronUpIcon />
-          </button>
-        </div>
-
-        <ToolbarSeparator />
-
         <LayoutEditor
           playerContainerRef={playerContainerRef}
           playerRef={playerRef}
@@ -1101,6 +1000,18 @@ export function PlayerPage({
             </div>
           </>
         )}
+
+        <ToolbarSeparator />
+
+        {/* Next scene (Up) — last item in the toolbar */}
+        <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 (↑)'
+        >
+          <ChevronUpIcon />
+        </button>
       </div>
     </div>
   )

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
 // ---------------------------------------------------------------------------