@bycrux/editor 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bycrux/editor",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "private": false,
   "type": "module",
   "exports": {

package/src/video/VideoEditor.tsx

@@ -388,7 +388,9 @@ function ReviewSurface<P extends Project>({
   }
 
   return (
-    <div className="flex flex-1 overflow-hidden">
+    <div className="flex flex-col flex-1 overflow-hidden">
+      {/* Work area — editor body + version rail, side by side */}
+      <div className="flex flex-1 overflow-hidden min-h-0">
       {/* Main: preview + timeline */}
       <div className="flex flex-col flex-1 overflow-hidden">
         <div className="flex-1 flex items-center justify-center bg-black overflow-hidden p-2">
@@ -473,8 +475,8 @@ function ReviewSurface<P extends Project>({
         </div>
       </div>
 
-      {/* Right sidebar — version history + run history slot + host-supplied assets panel */}
-      {(adapter.listVersionHistory || slots?.assetsPanel || slots?.runHistory) && (
+      {/* Right rail — version history + run history slot */}
+      {(adapter.listVersionHistory || slots?.runHistory) && (
         <div className="w-48 shrink-0 border-l border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-950 flex flex-col overflow-hidden">
           {adapter.listVersionHistory && (
             <VersionPanel versions={versions} restoring={restoring} onRestore={handleRestoreVersion} />
@@ -483,7 +485,16 @@ function ReviewSurface<P extends Project>({
               RunSnapshot / project.history are host-only types — the package never
               reads them. When absent nothing is rendered. */}
           {slots?.runHistory}
-          {slots?.assetsPanel}
+        </div>
+      )}
+      </div>
+
+      {/* Project media / assets — full-width region stacked BELOW the editor,
+          mirroring CarouselEditor's layout (was previously crammed into the
+          narrow right rail). The host's panel manages its own scroll. */}
+      {slots?.assetsPanel && (
+        <div className="shrink-0 border-t border-gray-200 dark:border-gray-800 w-full flex flex-col max-h-[45%] overflow-hidden">
+          {slots.assetsPanel}
         </div>
       )}
 

package/src/video/preview/useVideoPlayback.ts

@@ -50,6 +50,10 @@ export function useVideoPlayback(
   const loopOffsetRef = useRef(0)
   const rafRef        = useRef<number | null>(null)
   const rafLastMs     = useRef<number | null>(null)
+  // rAF clock for VIDEO projects — drives clip-boundary detection at ~60Hz
+  // instead of the <video> element's coarse `timeupdate` event (~4Hz). See the
+  // effect below for why.
+  const videoRafRef   = useRef<number | null>(null)
   const audioRefsMap  = useRef<Map<string, HTMLAudioElement>>(new Map())
   const audioSrcMap   = useRef<Map<string, string>>(new Map())
   // Web Audio API: GainNode per audio track allows volume > 1.0 (amplification).
@@ -693,6 +697,39 @@ export function useVideoPlayback(
     handleTimeUpdate()
   }, [handleTimeUpdate])
 
+  // ── Video boundary clock ─────────────────────────────────────────────────
+  // Drive clip-boundary detection from requestAnimationFrame (~60Hz) rather
+  // than relying on the <video> element's `timeupdate` event, which only fires
+  // ~every 250ms. Under timeupdate-gating the active clip plays up to a full
+  // ~250ms PAST its outPoint before the swap fires; on a silence-trimmed
+  // single-source timeline that overshoot is trimmed-out footage playing past
+  // the cut — the "underlying video keeps playing in the background" bug.
+  // Polling currentTime every frame tightens the boundary to ~16ms.
+  // handleTimeUpdate is idempotent (preload + swap are guarded), so the
+  // timeupdate event firing in addition to this is harmless. Canvas projects
+  // advance time via their own rAF above and are excluded here.
+  useEffect(() => {
+    if (isCanvasProject || !isPlaying) {
+      if (videoRafRef.current !== null) {
+        cancelAnimationFrame(videoRafRef.current)
+        videoRafRef.current = null
+      }
+      return
+    }
+    function pump() {
+      // The gap clock owns time during gaps; handleTimeUpdate no-ops then.
+      if (!inGapRef.current) handleTimeUpdate()
+      videoRafRef.current = requestAnimationFrame(pump)
+    }
+    videoRafRef.current = requestAnimationFrame(pump)
+    return () => {
+      if (videoRafRef.current !== null) {
+        cancelAnimationFrame(videoRafRef.current)
+        videoRafRef.current = null
+      }
+    }
+  }, [isPlaying, isCanvasProject, handleTimeUpdate])
+
   function togglePlay() {
     // GESTURE-ANCHORED: same rationale as the keydown handler — resume the
     // AudioContext synchronously inside this user-gesture call so a wired