@bycrux/editor 0.5.3 → 0.6.1

package/src/video/VersionPanel.tsx

@@ -42,35 +42,35 @@ export default function VersionPanel({ versions, restoring, onRestore }: Version
   const deduped = dedupeVersions(versions)
 
   return (
-    <div className="shrink-0 border-b border-gray-200 dark:border-gray-800 flex flex-col overflow-hidden" style={{ maxHeight: open ? 224 : 0, transition: 'max-height 0.15s ease' }}>
+    <div className="shrink-0 border-b border-[var(--editor-border)] flex flex-col overflow-hidden" style={{ maxHeight: open ? 224 : 0, transition: 'max-height 0.15s ease' }}>
       <button
         onClick={() => setOpen(o => !o)}
-        className="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-900 transition-colors w-full text-left"
+        className="flex items-center justify-between px-3 py-2 border-b border-[var(--editor-border)] hover:bg-[var(--editor-surface)] transition-colors w-full text-left"
       >
-        <span className="text-xs font-medium text-gray-400 uppercase tracking-wide">Versions</span>
-        <span className="text-gray-600 text-[10px]">{open ? '▲' : '▼'}</span>
+        <span className="text-xs font-medium text-[var(--editor-text)]/60 uppercase tracking-wide">Versions</span>
+        <span className="text-[var(--editor-text)]/50 text-[10px]">{open ? '▲' : '▼'}</span>
       </button>
       <div className="overflow-y-auto p-2 flex flex-col gap-1.5">
         {deduped.length === 0 ? (
-          <p className="text-xs text-gray-600 text-center mt-2 px-1 leading-relaxed">No saved versions yet.</p>
+          <p className="text-xs text-[var(--editor-text)]/55 text-center mt-2 px-1 leading-relaxed">No saved versions yet.</p>
         ) : deduped.map(v => {
           const { run, label } = parseVersion(v)
           const isDefault = label === 'draft' || label === 'final' || label === 'pending'
           return (
-            <div key={v.hash} className="rounded border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 p-2 flex flex-col gap-1">
+            <div key={v.hash} className="rounded border border-[var(--editor-border)] bg-[var(--editor-surface)] p-2 flex flex-col gap-1">
               <div className="flex items-center gap-1.5">
-                <span className="text-[10px] text-gray-500 dark:text-gray-600 shrink-0">Run {run}</span>
+                <span className="text-[10px] text-[var(--editor-text)]/50 shrink-0">Run {run}</span>
                 {isDefault ? (
-                  <span className="text-[10px] text-gray-500 capitalize">{label}</span>
+                  <span className="text-[10px] text-[var(--editor-text)]/60 capitalize">{label}</span>
                 ) : (
-                  <span className="text-xs font-medium text-gray-700 dark:text-gray-200 truncate capitalize" title={label}>{label}</span>
+                  <span className="text-xs font-medium text-[var(--editor-text)] truncate capitalize" title={label}>{label}</span>
                 )}
               </div>
-              <span className="text-[10px] text-gray-600">{formatTime(v.timestamp)}</span>
+              <span className="text-[10px] text-[var(--editor-text)]/55">{formatTime(v.timestamp)}</span>
               <button
                 onClick={() => onRestore(v.hash)}
                 disabled={restoring === v.hash}
-                className="text-[10px] text-blue-500 hover:text-blue-400 text-left transition-colors disabled:opacity-40"
+                className="text-[10px] text-[var(--editor-accent)] hover:opacity-80 text-left transition-colors disabled:opacity-40"
               >
                 {restoring === v.hash ? 'Restoring…' : 'Restore →'}
               </button>

package/src/video/VideoEditor.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from 'react'
-import { Magnet } from 'lucide-react'
+import { Crop, Magnet } from 'lucide-react'
 import type { Project, VideoEditorProps } from '../types'
+import { VideoSourceCropOverlay } from '../crop/VideoSourceCropOverlay'
+import { getOverlayDesignCanvas } from './design-canvas'
 import { applyTheme, defaultMontajTheme } from '../theme'
 import { applyCutToItem, applyCutToTracks, collapseGaps, splitAtTime } from './cuts'
 import { repairCaptionWords } from './captionRepair'
@@ -38,6 +40,7 @@ export default function VideoEditor<P extends Project = Project>({
   theme,
   slots,
   onBackToSetup,
+  assetsPlacement = 'right',
   renderClipInspector,
   renderSubcutRegen,
   regenEnabled,
@@ -60,7 +63,7 @@ export default function VideoEditor<P extends Project = Project>({
 
   if (isPending) {
     return (
-      <div ref={containerRef} className="flex flex-col h-full bg-white dark:bg-gray-950">
+      <div ref={containerRef} className="flex flex-col h-full bg-[var(--editor-bg)]">
         <PendingSurface
           project={project}
           adapter={adapter}
@@ -82,6 +85,7 @@ export default function VideoEditor<P extends Project = Project>({
         adapter={adapter}
         onProjectChange={emit}
         slots={slots}
+        assetsPlacement={assetsPlacement}
         getWaveformChunks={getWaveformChunks}
         resolveFilePath={resolveFilePath}
         save={save}
@@ -114,6 +118,7 @@ interface SurfaceProps<P extends Project> {
   adapter: VideoEditorProps<P>['adapter']
   onProjectChange: (p: P) => void
   slots?: VideoEditorProps<P>['slots']
+  assetsPlacement?: VideoEditorProps<P>['assetsPlacement']
   getWaveformChunks?: VideoEditorProps<P>['adapter']['getWaveformChunks']
   resolveFilePath: (path: string) => string
   save: (p: P) => void
@@ -161,7 +166,7 @@ function PendingSurface<P extends Project>({
     <div className="flex flex-1 overflow-hidden">
       {/* Main */}
       <div className="flex flex-col flex-1 overflow-hidden">
-        <div className="flex-1 flex items-center justify-center bg-gray-950 overflow-hidden p-4">
+        <div className="flex-1 flex items-center justify-center bg-black overflow-hidden p-4">
           {hasTrimmedClips ? (
             <PreviewPlayer
               project={project}
@@ -180,12 +185,12 @@ function PendingSurface<P extends Project>({
               {slots?.pendingStatus ?? (
                 <>
                   <div className="flex flex-col items-center gap-2">
-                    <p className="text-white text-lg font-semibold">Message your agent to start</p>
-                    <p className="text-gray-400 text-sm">Nothing will happen automatically. Copy this and send it to your agent.</p>
+                    <p className="text-[var(--editor-text)] text-lg font-semibold">Message your agent to start</p>
+                    <p className="text-[var(--editor-text)]/60 text-sm">Nothing will happen automatically. Copy this and send it to your agent.</p>
                   </div>
                   {skillPath && (
-                    <div className="w-full rounded-xl border-2 border-blue-400/50 bg-gray-900 p-5 flex flex-col gap-3 text-left shadow-lg shadow-blue-400/10">
-                      <p className="text-blue-400 text-xs font-bold uppercase tracking-widest">Send this to your agent</p>
+                    <div className="w-full rounded-xl border-2 border-[var(--editor-accent)]/50 bg-[var(--editor-surface)] p-5 flex flex-col gap-3 text-left shadow-lg shadow-[var(--editor-accent)]/10">
+                      <p className="text-[var(--editor-accent)] text-xs font-bold uppercase tracking-widest">Send this to your agent</p>
                       <div className="flex items-start justify-between bg-black/60 border border-transparent rounded-lg px-3 py-3 font-mono gap-3">
                         <span className="text-gray-200 text-[12px] leading-relaxed break-all">
                           There is a new project pending: &quot;{project.name ?? project.id}&quot;. Please see @{skillPath} and start. Talk to me if you run into questions.
@@ -199,7 +204,7 @@ function PendingSurface<P extends Project>({
                             setTimeout(() => setCopied(false), 2000)
                           }}
                           className={`shrink-0 flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-md transition-colors ${
-                            copied ? 'bg-green-700 text-green-200' : 'bg-white/10 text-gray-300 hover:bg-white/20 hover:text-white'
+                            copied ? 'bg-green-700 text-green-200' : 'bg-[var(--editor-text)]/10 text-[var(--editor-text)]/80 hover:bg-[var(--editor-text)]/20 hover:text-[var(--editor-text)]'
                           }`}
                           title="Copy prompt"
                         >
@@ -210,11 +215,11 @@ function PendingSurface<P extends Project>({
                   )}
                 </>
               )}
-              <p className="text-gray-600 text-xs font-mono">project id: {project.id}</p>
+              <p className="text-[var(--editor-text)]/40 text-xs font-mono">project id: {project.id}</p>
               {canGoBack && (
                 <button
                   onClick={onBackToSetup}
-                  className="text-xs text-gray-600 hover:text-gray-400 transition-colors underline underline-offset-2"
+                  className="text-xs text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] transition-colors underline underline-offset-2"
                 >
                   ← Back to setup
                 </button>
@@ -223,7 +228,7 @@ function PendingSurface<P extends Project>({
           )}
         </div>
 
-        <div className="shrink-0 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950">
+        <div className="shrink-0 border-t border-[var(--editor-border)] bg-[var(--editor-surface)]">
           <Timeline
             project={project}
             currentTime={currentTime}
@@ -237,7 +242,7 @@ function PendingSurface<P extends Project>({
 
       {/* Right sidebar — version history (hidden when the capability is absent) */}
       {adapter.listVersionHistory && (
-        <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">
+        <div className="w-48 shrink-0 border-l border-[var(--editor-border)] bg-[var(--editor-surface)] flex flex-col overflow-hidden">
           <VersionPanel versions={versions} restoring={restoring} onRestore={handleRestoreVersion} />
         </div>
       )}
@@ -252,6 +257,7 @@ function ReviewSurface<P extends Project>({
   adapter,
   onProjectChange,
   slots,
+  assetsPlacement = 'right',
   getWaveformChunks,
   resolveFilePath,
   save,
@@ -273,6 +279,9 @@ function ReviewSurface<P extends Project>({
   const [selectedIds, setSelectedIds] = useState<string[]>([])
   const primarySelectedId = selectedIds[0] ?? null
   const [rippleMode, setRippleMode]   = useState(false)
+  // Source-crop mode: when on, a VideoSourceCropOverlay is mounted over the
+  // preview for the selected tracks[0] video item. Cleared when selection changes.
+  const [cropMode, setCropMode]       = useState(false)
   const [renderOpen, setRenderOpen]   = useState(false)
   const [regenCaptionsOpen, setRegenCaptionsOpen] = useState(false)
   // The clip/audio inspector target — derived from the timeline's inspect
@@ -281,6 +290,21 @@ function ReviewSurface<P extends Project>({
 
   const { versions, restoring, setRestoring } = useVersionHistory(adapter, project)
 
+  // Measured pixel size of the preview's rendered video rect — fed to the crop
+  // overlay as its wrapper dims so renderedSourceRect letterboxes correctly.
+  const previewBoxRef = useRef<HTMLDivElement>(null)
+  const [previewBox, setPreviewBox] = useState<{ w: number; h: number }>({ w: 0, h: 0 })
+  useEffect(() => {
+    if (!cropMode) return
+    const el = previewBoxRef.current
+    if (!el) return
+    const obs = new ResizeObserver(([entry]) => {
+      setPreviewBox({ w: entry.contentRect.width, h: entry.contentRect.height })
+    })
+    obs.observe(el)
+    return () => obs.disconnect()
+  }, [cropMode])
+
   // Repair caption segments whose words[] text has diverged from edited seg.text.
   // Inline caption edits update seg.text but not seg.words; this normalizes the
   // data so PreviewPlayer's word-level timing is correct. Runs once per project.id.
@@ -297,6 +321,18 @@ function ReviewSurface<P extends Project>({
   const clips      = project.tracks?.[0] ?? []
   const hasContent = clips.length > 0 || (project.tracks?.slice(1).flat().length ?? 0) > 0 || (project.captions?.segments?.length ?? 0) > 0
 
+  // The selected tracks[0] video item, if any — the only thing source-crop mode
+  // can target. Source crop is a tracks[0]-video primitive (the renderer applies
+  // it to the original clip before compositing).
+  const cropTarget = primarySelectedId
+    ? clips.find(c => c.id === primarySelectedId && c.type === 'video' && !!c.src) ?? null
+    : null
+
+  // Selecting a different item (or nothing croppable) exits crop mode.
+  useEffect(() => {
+    if (!cropTarget && cropMode) setCropMode(false)
+  }, [cropTarget, cropMode])
+
   function pushHistory(prev: P) {
     historyRef.current = [...historyRef.current.slice(-49), prev]
     setCanUndo(true)
@@ -331,7 +367,7 @@ function ReviewSurface<P extends Project>({
     setSelectedIds([])
   }
 
-  function handleOverlayChange(id: string, changes: { offsetX?: number; offsetY?: number; scale?: number; rotation?: number; fit?: 'cover' | 'contain' | 'fill' }) {
+  function handleOverlayChange(id: string, changes: { offsetX?: number; offsetY?: number; scale?: number; rotation?: number; fit?: 'cover' | 'contain' | 'fill'; sourceCrop?: { x: number; y: number; w: number; h: number }; sourceWidth?: number; sourceHeight?: number }) {
     pushHistory(project)
     const updated = {
       ...project,
@@ -397,29 +433,59 @@ function ReviewSurface<P extends Project>({
       <div className="flex flex-col flex-1 overflow-hidden">
         <div className="flex-1 flex items-center justify-center bg-black overflow-hidden p-2">
           {hasContent ? (
-            <PreviewPlayer
-              project={project}
-              currentTime={currentTime}
-              onTimeUpdate={setCurrentTime}
-              selectedOverlayId={primarySelectedId ?? undefined}
-              onOverlayChange={handleOverlayChange}
-              compileOverlay={adapter.compileOverlay}
-              clearOverlayCache={adapter.clearOverlayCache}
-              watchFile={adapter.watchFile}
-              fileUrl={adapter.fileUrl}
-              resolveCaptionTemplate={adapter.resolveCaptionTemplate}
-            />
+            <div
+              ref={previewBoxRef}
+              className="relative h-full max-w-full"
+              style={{ aspectRatio: (() => { const [w, h] = getOverlayDesignCanvas(project.settings?.resolution); return `${w} / ${h}` })() }}
+            >
+              <PreviewPlayer
+                project={project}
+                currentTime={currentTime}
+                onTimeUpdate={setCurrentTime}
+                selectedOverlayId={primarySelectedId ?? undefined}
+                onOverlayChange={handleOverlayChange}
+                compileOverlay={adapter.compileOverlay}
+                clearOverlayCache={adapter.clearOverlayCache}
+                watchFile={adapter.watchFile}
+                fileUrl={adapter.fileUrl}
+                resolveCaptionTemplate={adapter.resolveCaptionTemplate}
+              />
+              {/* Source-crop overlay — mounted over the preview for the selected
+                  tracks[0] video. Persists sourceCrop through handleOverlayChange. */}
+              {cropMode && cropTarget && (
+                <div className="absolute inset-0" style={{ zIndex: 200 }}>
+                  <VideoSourceCropOverlay
+                    item={cropTarget}
+                    resolveSrc={(it) => adapter.fileUrl(it.nobg_preview_src ?? it.src ?? '')}
+                    wrapperWidth={previewBox.w}
+                    wrapperHeight={previewBox.h}
+                    onChange={(next) => handleOverlayChange(cropTarget.id, {
+                      sourceCrop: {
+                        x: Math.min(1, Math.max(0, next.x)),
+                        y: Math.min(1, Math.max(0, next.y)),
+                        w: Math.min(1, Math.max(0, next.w)),
+                        h: Math.min(1, Math.max(0, next.h)),
+                      },
+                    })}
+                    onSrcDimsLoaded={(dims) => {
+                      if (cropTarget.sourceWidth && cropTarget.sourceHeight) return
+                      handleOverlayChange(cropTarget.id, { sourceWidth: dims.width, sourceHeight: dims.height })
+                    }}
+                  />
+                </div>
+              )}
+            </div>
           ) : (
-            <p className="text-gray-600 text-sm">No clips</p>
+            <p className="text-[var(--editor-text)]/60 text-sm">No clips</p>
           )}
         </div>
 
         {/* Track controls bar — split + ripple + render */}
-        <div className="shrink-0 flex items-center justify-end gap-1.5 px-3 py-1 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950">
+        <div className="shrink-0 flex items-center justify-end gap-1.5 px-3 py-1 border-t border-[var(--editor-border)] bg-[var(--editor-surface)]">
           <button
             onClick={() => handleSplit()}
             title="Split at playhead (S) — selected item or all clips"
-            className="flex items-center justify-center w-5 h-5 rounded transition-colors text-gray-500 bg-transparent hover:text-gray-400"
+            className="flex items-center justify-center w-5 h-5 rounded transition-colors text-[var(--editor-text)]/60 bg-transparent hover:text-[var(--editor-text)]"
           >
             <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.5">
               <line x1="6" y1="0" x2="6" y2="12" />
@@ -434,11 +500,28 @@ function ReviewSurface<P extends Project>({
             className={`flex items-center justify-center w-5 h-5 rounded transition-colors ${
               rippleMode
                 ? 'text-teal-400 bg-teal-400/15 hover:bg-teal-400/25'
-                : 'text-gray-500 bg-transparent hover:text-gray-400'
+                : 'text-[var(--editor-text)]/60 bg-transparent hover:text-[var(--editor-text)]'
             }`}
           >
             <Magnet size={12} />
           </button>
+          <button
+            onClick={() => setCropMode(m => !m)}
+            disabled={!cropTarget}
+            title={
+              !cropTarget
+                ? 'Select a video clip to crop its source'
+                : cropMode ? 'Exit source crop' : 'Crop source — non-destructively crop the selected clip'
+            }
+            aria-pressed={cropMode}
+            className={`flex items-center justify-center w-5 h-5 rounded transition-colors disabled:opacity-30 disabled:cursor-not-allowed ${
+              cropMode
+                ? 'text-amber-400 bg-amber-400/15 hover:bg-amber-400/25'
+                : 'text-[var(--editor-text)]/60 bg-transparent hover:text-[var(--editor-text)]'
+            }`}
+          >
+            <Crop size={12} />
+          </button>
           <button
             onClick={() => {
               const final = { ...project, status: 'final' } as P
@@ -446,13 +529,13 @@ function ReviewSurface<P extends Project>({
               save(final)
               setRenderOpen(true)
             }}
-            className="text-xs px-2.5 py-1 rounded-md bg-blue-600 text-white hover:bg-blue-500 transition-colors"
+            className="text-xs px-2.5 py-1 rounded-md bg-[var(--editor-accent)] text-[var(--editor-accent-foreground)] hover:opacity-90 transition-colors"
           >
             Render →
           </button>
         </div>
 
-        <div className="shrink-0 border-t border-gray-200 dark:border-gray-800 bg-gray-100 dark:bg-gray-950">
+        <div className="shrink-0 border-t border-[var(--editor-border)] bg-[var(--editor-surface)]">
           <Timeline
             project={project}
             currentTime={currentTime}
@@ -478,9 +561,17 @@ function ReviewSurface<P extends Project>({
         </div>
       </div>
 
+      {/* Assets — right sidebar column (assetsPlacement: 'right', the default /
+          Montaj-local layout). The host's panel manages its own scroll. */}
+      {assetsPlacement === 'right' && slots?.assetsPanel && (
+        <div className="w-72 shrink-0 border-l border-[var(--editor-border)] bg-[var(--editor-surface)] flex flex-col overflow-hidden">
+          {slots.assetsPanel}
+        </div>
+      )}
+
       {/* 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">
+        <div className="w-48 shrink-0 border-l border-[var(--editor-border)] bg-[var(--editor-surface)] flex flex-col overflow-hidden">
           {adapter.listVersionHistory && (
             <VersionPanel versions={versions} restoring={restoring} onRestore={handleRestoreVersion} />
           )}
@@ -492,11 +583,11 @@ function ReviewSurface<P extends Project>({
       )}
       </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">
+      {/* Project media / assets — full-width region stacked BELOW the editor
+          (assetsPlacement: 'bottom'). Preferred by width-constrained hosts (Hub).
+          The host's panel manages its own scroll. */}
+      {assetsPlacement === 'bottom' && slots?.assetsPanel && (
+        <div className="shrink-0 border-t border-[var(--editor-border)] w-full flex flex-col max-h-[45%] overflow-hidden">
           {slots.assetsPanel}
         </div>
       )}

package/src/video/preview/OverlayItemsLayer.tsx

@@ -62,6 +62,9 @@ function OverlayVideo({ src, currentTime, itemStart, inPoint, isPlaying, muted,
   return (
     <video
       ref={ref}
+      // Anonymous CORS so cross-origin R2 clips aren't tainted (would mute the
+      // Web Audio graph). crossOrigin must be set before src. R2 sends ACAO.
+      crossOrigin="anonymous"
       src={src}
       muted={muted}
       preload="auto"

package/src/video/preview/PreviewPlayer.tsx

@@ -6,6 +6,7 @@ import { getOverlayDesignCanvas } from '../design-canvas'
 import { useDragOverlay } from './useDragOverlay'
 import OverlayItemsLayer from './OverlayItemsLayer'
 import { useVideoPlayback } from './useVideoPlayback'
+import { sourceCropVideoStyle } from './sourceCropStyle'
 import CarouselPreview from './CarouselPreview'
 
 // ---------------------------------------------------------------------------
@@ -42,6 +43,12 @@ export default function PreviewPlayer({
 
   const containerRef = useRef<HTMLDivElement>(null)
   const [renderScale, setRenderScale] = useState<number>(1)
+  // Frame pixel size — used to compute the sourceCrop CSS transform that mirrors
+  // render's crop→contain. Tracked alongside renderScale from the same observer.
+  const [frameSize, setFrameSize] = useState<{ w: number; h: number }>({ w: 0, h: 0 })
+  // Intrinsic dims of the loaded source <video>, captured on loadedmetadata.
+  // Falls back to a clip's own sourceWidth/sourceHeight when present.
+  const [videoDims, setVideoDims] = useState<{ w: number; h: number } | null>(null)
 
   // Track container size to scale overlay components from 1080×1920 → preview size
   useEffect(() => {
@@ -49,6 +56,7 @@ export default function PreviewPlayer({
     if (!el) return
     const obs = new ResizeObserver(([entry]) => {
       setRenderScale(entry.contentRect.width / RENDER_W)
+      setFrameSize({ w: entry.contentRect.width, h: entry.contentRect.height })
     })
     obs.observe(el)
     return () => obs.disconnect()
@@ -81,6 +89,36 @@ export default function PreviewPlayer({
 
   const captionTrack = useMemo(() => project.captions, [project])
 
+  // ── sourceCrop reflection ───────────────────────────────────────────────────
+  // Mirror render's crop→contain so the preview frames the clip the way the
+  // final output will. The active clip is the one whose [start, end) contains the
+  // playhead (same selection the playback hook uses internally). Only the active
+  // <video> slot is opaque, so applying the active clip's crop to both slots is
+  // safe — the inactive slot is invisible.
+  const activeClip = useMemo(
+    () => clips.find(c => currentTime >= c.start && currentTime < c.end) ?? clips[clips.length - 1],
+    [clips, currentTime],
+  )
+  const cropStyle = useMemo(() => {
+    const crop = activeClip?.sourceCrop
+    if (!crop) return null
+    const sw = activeClip?.sourceWidth ?? videoDims?.w
+    const sh = activeClip?.sourceHeight ?? videoDims?.h
+    if (!sw || !sh || !frameSize.w || !frameSize.h) return null
+    return sourceCropVideoStyle({
+      crop,
+      sourceWidth: sw,
+      sourceHeight: sh,
+      frameWidth: frameSize.w,
+      frameHeight: frameSize.h,
+    })
+  }, [activeClip, videoDims, frameSize])
+
+  // The default full-frame style (no crop). object-contain letterboxes the source.
+  const baseVideoStyle = cropStyle
+    ? { ...cropStyle }
+    : { position: 'absolute' as const, inset: 0, width: '100%', height: '100%', objectFit: 'contain' as const }
+
   return (
     <div ref={containerRef} className="relative bg-black h-full max-w-full overflow-hidden rounded" style={{ aspectRatio: `${RENDER_W} / ${RENDER_H}`, isolation: 'isolate' }}>
       {isCanvasProject ? (
@@ -94,24 +132,31 @@ export default function PreviewPlayer({
           {/* Slot 0 */}
           <video
             ref={video0Ref}
-            className="absolute inset-0 w-full h-full object-contain"
+            // Clips load cross-origin from R2; without this the media is CORS-tainted
+            // and the Web Audio createMediaElementSource graph outputs silence. R2
+            // sends Access-Control-Allow-Origin, so anonymous CORS keeps it audible.
+            crossOrigin="anonymous"
+            onLoadedMetadata={(e) => { const v = e.currentTarget; if (v.videoWidth && v.videoHeight) setVideoDims({ w: v.videoWidth, h: v.videoHeight }) }}
             onTimeUpdate={() => { if (activeSlotRef.current === 0) handleTimeUpdate() }}
             onEnded={() => { if (activeSlotRef.current === 0) handleEnded() }}
             onPlay={() => { if (activeSlotRef.current === 0) setIsPlaying(true) }}
             onPause={() => { if (activeSlotRef.current === 0) handlePause() }}
             playsInline
-            style={{ opacity: showVideo && activeSlot === 0 ? 1 : 0, pointerEvents: activeSlot === 0 ? 'auto' : 'none', zIndex: activeSlot === 0 ? 1 : 0 }}
+            style={{ ...baseVideoStyle, opacity: showVideo && activeSlot === 0 ? 1 : 0, pointerEvents: activeSlot === 0 ? 'auto' : 'none', zIndex: activeSlot === 0 ? 1 : 0 }}
           />
           {/* Slot 1 */}
           <video
             ref={video1Ref}
-            className="absolute inset-0 w-full h-full object-contain"
+            // See slot 0: anonymous CORS so R2 cross-origin clips aren't tainted
+            // (which would mute the Web Audio graph).
+            crossOrigin="anonymous"
+            onLoadedMetadata={(e) => { const v = e.currentTarget; if (v.videoWidth && v.videoHeight) setVideoDims({ w: v.videoWidth, h: v.videoHeight }) }}
             onTimeUpdate={() => { if (activeSlotRef.current === 1) handleTimeUpdate() }}
             onEnded={() => { if (activeSlotRef.current === 1) handleEnded() }}
             onPlay={() => { if (activeSlotRef.current === 1) setIsPlaying(true) }}
             onPause={() => { if (activeSlotRef.current === 1) handlePause() }}
             playsInline
-            style={{ opacity: showVideo && activeSlot === 1 ? 1 : 0, pointerEvents: activeSlot === 1 ? 'auto' : 'none', zIndex: activeSlot === 1 ? 1 : 0 }}
+            style={{ ...baseVideoStyle, opacity: showVideo && activeSlot === 1 ? 1 : 0, pointerEvents: activeSlot === 1 ? 'auto' : 'none', zIndex: activeSlot === 1 ? 1 : 0 }}
           />
         </>
       )}

package/src/video/preview/__tests__/sourceCropStyle.test.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest'
+import { sourceCropVideoStyle } from '../sourceCropStyle'
+
+describe('sourceCropVideoStyle', () => {
+  it('returns null for a full-frame (default) crop', () => {
+    expect(
+      sourceCropVideoStyle({
+        crop: { x: 0, y: 0, w: 1, h: 1 },
+        sourceWidth: 1920, sourceHeight: 1080,
+        frameWidth: 1080, frameHeight: 1920,
+      }),
+    ).toBeNull()
+  })
+
+  it('returns null without source dims', () => {
+    expect(
+      sourceCropVideoStyle({
+        crop: { x: 0.25, y: 0, w: 0.5, h: 1 },
+        sourceWidth: 0, sourceHeight: 0,
+        frameWidth: 1080, frameHeight: 1920,
+      }),
+    ).toBeNull()
+  })
+
+  it('center vertical-strip crop of a landscape source fills a portrait frame', () => {
+    // 1920x1080 source, crop the centre 50% width / full height → 960x1080 region
+    // (aspect 0.888...). Portrait frame 1080x1920 (aspect 0.5625). Crop aspect >
+    // frame aspect → crop fills frame WIDTH, letterboxed vertically.
+    const style = sourceCropVideoStyle({
+      crop: { x: 0.25, y: 0, w: 0.5, h: 1 },
+      sourceWidth: 1920, sourceHeight: 1080,
+      frameWidth: 1080, frameHeight: 1920,
+    })!
+    expect(style).not.toBeNull()
+    // videoWRatio = cropWRatio(1) / crop.w(0.5) = 2 → 200% wide
+    expect(style.width).toBe('200%')
+    // cropAspect = (1920*0.5)/(1080*1) = 0.8889; frameAspect = 0.5625
+    // cropHRatio = frameAspect/cropAspect = 0.6328; videoHRatio = /h(1) = 0.6328
+    expect(parseFloat(style.height as string)).toBeCloseTo(63.28, 1)
+    // leftRatio = (1-1)/2 - 0.25*2 = -0.5 → -50%
+    expect(style.left).toBe('-50%')
+    // topRatio = (1-0.6328)/2 - 0*... = 0.1836 → ~18.36%
+    expect(parseFloat(style.top as string)).toBeCloseTo(18.36, 1)
+    expect(style.objectFit).toBe('fill')
+  })
+
+  it('crop region matching frame aspect fills the frame exactly (no letterbox)', () => {
+    // Portrait source 1080x1920, crop a centred 9:16 sub-rect → same aspect as a
+    // 1080x1920 frame. Should fill edge-to-edge.
+    const style = sourceCropVideoStyle({
+      crop: { x: 0.1, y: 0.1, w: 0.8, h: 0.8 },
+      sourceWidth: 1080, sourceHeight: 1920,
+      frameWidth: 1080, frameHeight: 1920,
+    })!
+    expect(style.width).toBe('125%')   // 1/0.8
+    expect(style.height).toBe('125%')  // 1/0.8
+    // left/top = (1-1)/2 - 0.1*1.25 = -0.125 → -12.5%
+    expect(style.left).toBe('-12.5%')
+    expect(style.top).toBe('-12.5%')
+  })
+})

package/src/video/preview/__tests__/useVideoPlayback.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { effectiveInPoint, effectiveOutPoint } from '../useVideoPlayback'
+
+// These helpers mirror render's collectAllItems rebase (render.js): when the
+// preview loads a normalizedSrc window cache (which starts at 0 and covers
+// [inPoint, outPoint] of the original), the effective seek inPoint is 0 and the
+// outPoint is rebased to the window length. nobg_preview_src is the full source
+// and must NOT rebase.
+
+describe('effectiveInPoint', () => {
+  it('rebases to 0 when normalizedSrc is the chosen src', () => {
+    expect(effectiveInPoint({ inPoint: 496.92, normalizedSrc: '/cache/window.mp4' })).toBe(0)
+  })
+
+  it('returns clip.inPoint when there is no normalizedSrc', () => {
+    expect(effectiveInPoint({ inPoint: 496.92, src: '/orig.mov' })).toBe(496.92)
+  })
+
+  it('does NOT rebase when nobg_preview_src takes precedence over normalizedSrc', () => {
+    // nobg_preview_src wins in playbackSrcFor and covers the full source.
+    expect(
+      effectiveInPoint({ inPoint: 496.92, nobg_preview_src: '/nobg.webm', normalizedSrc: '/cache/window.mp4' }),
+    ).toBe(496.92)
+  })
+
+  it('defaults to 0 when inPoint is absent and no cache', () => {
+    expect(effectiveInPoint({ src: '/orig.mov' })).toBe(0)
+  })
+})
+
+describe('effectiveOutPoint', () => {
+  it('rebases to the window length (outPoint - inPoint) for a normalizedSrc cache', () => {
+    // original inPoint 496.92, outPoint 514.92 → 18s window cache
+    expect(
+      effectiveOutPoint({ inPoint: 496.92, outPoint: 514.92, normalizedSrc: '/cache/window.mp4' }),
+    ).toBeCloseTo(18, 5)
+  })
+
+  it('returns the stored outPoint when there is no cache', () => {
+    expect(effectiveOutPoint({ inPoint: 496.92, outPoint: 514.92, src: '/orig.mov' })).toBe(514.92)
+  })
+
+  it('does NOT rebase when nobg_preview_src takes precedence', () => {
+    expect(
+      effectiveOutPoint({ inPoint: 496.92, outPoint: 514.92, nobg_preview_src: '/nobg.webm', normalizedSrc: '/c.mp4' }),
+    ).toBe(514.92)
+  })
+
+  it('returns undefined when no outPoint is stored', () => {
+    expect(effectiveOutPoint({ inPoint: 496.92, normalizedSrc: '/cache/window.mp4' })).toBeUndefined()
+  })
+})