@bycrux/editor 0.5.2 → 0.6.0

package/src/video/RenderModal.tsx

@@ -22,15 +22,15 @@ function basename(p: string) { return p.split('/').pop() ?? p }
 
 function LogLine({ text }: { text: string }) {
   const t = text.replace(/^\[montaj render\]\s*/, '')
-  let color = 'text-gray-400'
+  let color = 'text-[var(--editor-text)]/60'
   if (/ready|complete|done|encoded|assembled/i.test(t))  color = 'text-green-400'
   else if (/rendering|bundling|launching|browsers/i.test(t)) color = 'text-sky-400'
   else if (/trimming|building|composing/i.test(t))       color = 'text-amber-400'
-  else if (/frame\s+\d+\/\d+/i.test(t))                  color = 'text-gray-500'
+  else if (/frame\s+\d+\/\d+/i.test(t))                  color = 'text-[var(--editor-text)]/55'
   else if (/error|fail|warn/i.test(t))                   color = 'text-red-400'
 
   const prefix = text.startsWith('[montaj render]')
-    ? <span className="text-gray-600">[render] </span>
+    ? <span className="text-[var(--editor-text)]/40">[render] </span>
     : null
 
   return (
@@ -133,7 +133,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
   if (status === 'done' && outputPath) {
     return (
       <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-md">
-        <div className="w-[96vw] h-[96vh] bg-gray-950 border border-gray-800 rounded-2xl shadow-2xl flex overflow-hidden">
+        <div className="w-[96vw] h-[96vh] bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-2xl shadow-2xl flex overflow-hidden">
 
           {/* Left — video */}
           <div className="flex-1 bg-black flex items-center justify-center overflow-hidden">
@@ -147,20 +147,20 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
           </div>
 
           {/* Right — info panel */}
-          <div className="w-72 shrink-0 flex flex-col border-l border-gray-800">
-            <div className="flex items-center justify-between px-5 py-4 border-b border-gray-800">
+          <div className="w-72 shrink-0 flex flex-col border-l border-[var(--editor-border)]">
+            <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--editor-border)]">
               <div className="flex items-center gap-2.5">
                 <span className="w-2 h-2 rounded-full bg-green-400" />
                 <div>
-                  <p className="text-sm font-semibold text-white">Render complete</p>
-                  <p className="text-xs text-gray-400">Your video is ready.</p>
+                  <p className="text-sm font-semibold text-[var(--editor-text)]">Render complete</p>
+                  <p className="text-xs text-[var(--editor-text)]/60">Your video is ready.</p>
                 </div>
               </div>
-              <button onClick={onClose} className="text-gray-500 hover:text-white transition-colors text-lg leading-none">×</button>
+              <button onClick={onClose} className="text-[var(--editor-text)]/55 hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
             </div>
 
             <div className="flex flex-col gap-3 p-5 flex-1">
-              <p className="text-xs font-mono text-gray-500 break-all leading-relaxed">{outputPath}</p>
+              <p className="text-xs font-mono text-[var(--editor-text)]/55 break-all leading-relaxed">{outputPath}</p>
               {/* Host-supplied export controls (e.g. download-all .zip). */}
               {exportActions}
               <a
@@ -172,7 +172,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
               </a>
               <button
                 onClick={onClose}
-                className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-gray-800 border border-gray-700 text-gray-300 hover:bg-gray-700 transition-colors"
+                className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)]/80 hover:opacity-90 transition-colors"
               >
                 Close
               </button>
@@ -185,21 +185,21 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
-      <div className="w-full max-w-3xl bg-gray-900 border border-gray-700 rounded-xl shadow-2xl flex flex-col overflow-hidden">
+      <div className="w-full max-w-3xl bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-xl shadow-2xl flex flex-col overflow-hidden">
 
         {/* Header */}
-        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-800">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--editor-border)]">
           <div className="flex items-center gap-2.5">
             {status === 'running' && <span className="w-2 h-2 rounded-full bg-amber-400 animate-pulse" />}
             {status === 'error'   && <span className="w-2 h-2 rounded-full bg-red-400" />}
             <div className="flex flex-col gap-0.5">
-              <h2 className="text-sm font-semibold text-white">
+              <h2 className="text-sm font-semibold text-[var(--editor-text)]">
                 {status === 'running' ? 'Rendering…' : 'Render failed'}
               </h2>
             </div>
           </div>
           {status !== 'running' && (
-            <button onClick={onClose} className="text-gray-500 hover:text-white transition-colors text-lg leading-none">×</button>
+            <button onClick={onClose} className="text-[var(--editor-text)]/55 hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
           )}
         </div>
 
@@ -207,17 +207,17 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
         <div className="relative">
           <button
             onClick={() => navigator.clipboard.writeText(logs.join('\n') + (errorMsg ? '\n' + errorMsg : ''))}
-            className="absolute top-2 right-2 z-10 text-[10px] px-2 py-0.5 rounded bg-gray-800 border border-gray-700 text-gray-400 hover:text-white hover:border-gray-500 transition-colors"
+            className="absolute top-2 right-2 z-10 text-[10px] px-2 py-0.5 rounded bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] hover:border-[var(--editor-border)] transition-colors"
             title="Copy logs"
           >
             Copy
           </button>
           <div
             ref={logRef}
-            className="h-96 overflow-y-auto px-4 py-3 font-mono text-[11px] text-gray-300 bg-gray-950 flex flex-col gap-0.5"
+            className="h-96 overflow-y-auto px-4 py-3 font-mono text-[11px] text-[var(--editor-text)]/80 bg-[var(--editor-surface)] flex flex-col gap-0.5"
           >
             {logs.length === 0 && status === 'running' && (
-              <span className="text-gray-600 italic">Starting render engine…</span>
+              <span className="text-[var(--editor-text)]/40 italic">Starting render engine…</span>
             )}
             {logs.map((line, i) => (
               <LogLine key={i} text={line} />
@@ -229,18 +229,18 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
         </div>
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-gray-800">
+        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-[var(--editor-border)]">
           {status === 'running' ? (
             <button
               onClick={handleCancel}
-              className="text-sm px-4 py-1.5 rounded-md bg-gray-800 border border-gray-700 text-gray-300 hover:bg-red-900/40 hover:border-red-700 hover:text-red-300 transition-colors"
+              className="text-sm px-4 py-1.5 rounded-md bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)]/80 hover:bg-red-900/40 hover:border-red-700 hover:text-red-300 transition-colors"
             >
               Cancel
             </button>
           ) : (
             <button
               onClick={onClose}
-              className="text-sm px-4 py-1.5 rounded-md bg-gray-800 border border-gray-700 text-white hover:bg-gray-700 transition-colors"
+              className="text-sm px-4 py-1.5 rounded-md bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)] hover:opacity-90 transition-colors"
             >
               Close
             </button>

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'
@@ -8,6 +10,7 @@ import Timeline from './timeline/Timeline'
 import PreviewPlayer from './preview/PreviewPlayer'
 import VersionPanel from './VersionPanel'
 import RenderModal from './RenderModal'
+import CaptionRegenModal from './CaptionRegenModal'
 
 // Generic over the host's concrete project type `P` (default = the package's
 // own `Project`). Montaj passes its richer Project; the index signature on
@@ -37,6 +40,7 @@ export default function VideoEditor<P extends Project = Project>({
   theme,
   slots,
   onBackToSetup,
+  assetsPlacement = 'right',
   renderClipInspector,
   renderSubcutRegen,
   regenEnabled,
@@ -59,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}
@@ -81,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}
@@ -113,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
@@ -160,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}
@@ -179,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.
@@ -198,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"
                         >
@@ -209,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>
@@ -222,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}
@@ -236,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>
       )}
@@ -251,6 +257,7 @@ function ReviewSurface<P extends Project>({
   adapter,
   onProjectChange,
   slots,
+  assetsPlacement = 'right',
   getWaveformChunks,
   resolveFilePath,
   save,
@@ -272,13 +279,32 @@ 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
   // callbacks. A Montaj-agnostic { kind, id } selector, not a project entity.
   const [inspecting, setInspecting]   = useState<{ kind: 'clip' | 'audio'; id: string } | null>(null)
 
   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.
@@ -295,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)
@@ -329,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,
@@ -395,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" />
@@ -432,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
@@ -444,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}
@@ -471,13 +556,22 @@ function ReviewSurface<P extends Project>({
             regenEnabled={regenEnabled}
             isClipQueued={isClipQueued}
             renderSubcutRegen={renderSubcutRegen}
+            onRegenerateCaptions={adapter.generateCaptions ? () => setRegenCaptionsOpen(true) : undefined}
           />
         </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} />
           )}
@@ -489,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>
       )}
@@ -509,6 +603,23 @@ function ReviewSurface<P extends Project>({
         />
       )}
 
+      {/* Caption regen modal — adapter.generateCaptions stream. On done we patch
+          project.captions via onProjectChange only. We deliberately do NOT call
+          save(): montaj persists the regenerated captions server-side and the
+          SSE subscribe frame reconciles, so a saveProject here would double-write. */}
+      {regenCaptionsOpen && adapter.generateCaptions && (
+        <CaptionRegenModal
+          adapter={adapter}
+          projectId={project.id}
+          onClose={() => setRegenCaptionsOpen(false)}
+          onDone={(captions) => {
+            const next = { ...project, captions } as P
+            onProjectChange(next)
+            setRegenCaptionsOpen(false)
+          }}
+        />
+      )}
+
       {/* Clip / audio inspector — host-rendered via render-prop seam. */}
       {inspecting && renderClipInspector?.({
         item: inspecting,

package/src/video/__tests__/CaptionRegenModal.test.tsx

@@ -0,0 +1,65 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen, waitFor, cleanup } from '@testing-library/react'
+import type { CaptionEvent, EditorAdapter, ImageElement, Project } from '../../types'
+import type { Captions } from '../../schema'
+import CaptionRegenModal from '../CaptionRegenModal'
+
+afterEach(() => cleanup())
+
+const doneCaptions: Captions = {
+  style: 'pop',
+  segments: [{ text: 'hola', start: 0, end: 1, words: [] }],
+}
+
+function makeAdapter(): EditorAdapter<Project> {
+  return {
+    loadProject: vi.fn(),
+    saveProject: vi.fn(),
+    subscribe: () => () => {},
+    render: async function* () {},
+    resolveImageSrc: (el: ImageElement) => el.src,
+    compileOverlay: vi.fn(async () => () => null),
+    listGlobalOverlays: vi.fn(async () => []),
+    listSystemOverlays: vi.fn(async () => []),
+    uploadFile: vi.fn(async () => ''),
+    fileUrl: (p: string) => p,
+    generateCaptions: async function* (): AsyncIterable<CaptionEvent> {
+      yield { type: 'log', message: 'transcribing audio…' }
+      yield { type: 'done', captions: doneCaptions }
+    },
+  } as unknown as EditorAdapter<Project>
+}
+
+describe('CaptionRegenModal', () => {
+  it('streams a log line and calls onDone with the final captions', async () => {
+    const onDone = vi.fn()
+    const onClose = vi.fn()
+    render(
+      <CaptionRegenModal
+        adapter={makeAdapter()}
+        projectId="vid-1"
+        onDone={onDone}
+        onClose={onClose}
+      />,
+    )
+
+    await waitFor(() => expect(screen.getByText(/transcribing audio/i)).toBeTruthy())
+    await waitFor(() => expect(onDone).toHaveBeenCalledWith(doneCaptions))
+  })
+
+  it('shows an error message verbatim on error', async () => {
+    const errorAdapter = makeAdapter()
+    errorAdapter.generateCaptions = async function* (): AsyncIterable<CaptionEvent> {
+      yield { type: 'error', message: 'multi_source' }
+    }
+    render(
+      <CaptionRegenModal
+        adapter={errorAdapter}
+        projectId="vid-1"
+        onDone={vi.fn()}
+        onClose={vi.fn()}
+      />,
+    )
+    await waitFor(() => expect(screen.getByText('multi_source')).toBeTruthy())
+  })
+})