@bycrux/editor 0.8.4 → 0.8.6

package/package.json

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

package/src/types.ts

@@ -544,6 +544,21 @@ export interface VideoEditorProps<P extends Project = Project> {
    */
   assetsPlacement?: 'sidebar' | 'right' | 'bottom'
 
+  /**
+   * Which progress UI the RenderModal shows while a render runs:
+   * - `'phases'` — the compact phase stepper (Preparing → Rendering → … →
+   *   Saving). Works on any transport: poll-based hosts drive it from the
+   *   status `phase`; SSE hosts park it on "Rendering". This is the universal
+   *   default and what Hub clients use.
+   * - `'logs'` — the full scrolling render-log panel (colorized lines + Copy).
+   *   REQUIRES the SSE `adapter.render()` transport, which streams per-line
+   *   logs; this is the historical montaj-native desktop view. On a poll-based
+   *   host (no log lines) this panel would sit empty, so only pass `'logs'`
+   *   from a host whose adapter implements the streaming `render()` path.
+   * The host chooses per deployment; the package defaults to `'phases'`.
+   */
+  renderProgressView?: 'phases' | 'logs'
+
   /**
    * Opt a host OUT of the package's built-in toolbar Render button so it can
    * place Render in its own chrome (e.g. the desktop OS editor's top header).

package/src/video/RenderModal.tsx

@@ -17,6 +17,16 @@ interface RenderModalProps<P extends Project = Project> {
   /** Host-supplied export controls (e.g. a "Download all (.zip)" link) rendered
    *  in the done state's action area, mirroring the carousel render modal. */
   exportActions?: ReactNode
+  /**
+   * Which progress UI to show while the render runs:
+   *   'phases' — the compact phase stepper (Preparing → … → Saving). Works on
+   *              any transport; the default when omitted.
+   *   'logs'   — the full scrolling render-log panel. Requires the SSE
+   *              `adapter.render()` transport (which streams per-line logs);
+   *              on a poll-based host it would sit empty.
+   * Threaded down from the host as a flag (montaj-native → 'logs', Hub clients
+   * → 'phases'), mirroring `VideoEditorProps.renderProgressView`. */
+  progressView?: 'phases' | 'logs'
 }
 
 /** Promoted render output (R2-presigned), as carried by `RenderStatus.media`. */
@@ -61,6 +71,16 @@ const STEPPER_PHASES: RenderPhase[] = RENDER_PHASES.filter(p => p !== 'done')
 
 const POLL_INTERVAL_MS = 2500
 
+/**
+ * Consecutive status-poll failures tolerated before the modal declares the
+ * render failed. A multi-minute 4K render polls many times; a transient network
+ * blip (a Cloudflare-tunnel hiccup, a backend redeploy, a flaky hop) must not be
+ * mistaken for a render failure — the render keeps running server-side. ~12 ×
+ * 2.5s ≈ 30s of continuous unreachability before giving up. An explicit backend
+ * `error` status is still terminal immediately.
+ */
+const MAX_POLL_FAILURES = 12
+
 // ── Stepper ───────────────────────────────────────────────────────────────────
 
 function PhaseStepper({ current }: { current: RenderPhase }) {
@@ -103,17 +123,49 @@ function PhaseStepper({ current }: { current: RenderPhase }) {
   )
 }
 
-export default function RenderModal<P extends Project = Project>({ projectId, adapter, onClose, onCancel, exportActions }: RenderModalProps<P>) {
+// ── Log line (SSE / log-panel view) ───────────────────────────────────────────
+
+function LogLine({ text }: { text: string }) {
+  const t = text.replace(/^\[montaj render\]\s*/, '')
+  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-[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-[var(--editor-text)]/40">[render] </span>
+    : null
+
+  return (
+    <span className={`leading-relaxed whitespace-pre-wrap break-all ${color}`}>
+      {prefix}{t}
+    </span>
+  )
+}
+
+export default function RenderModal<P extends Project = Project>({ projectId, adapter, onClose, onCancel, exportActions, progressView }: RenderModalProps<P>) {
   const [status, setStatus]     = useState<'running' | 'done' | 'error'>('running')
   const [phase, setPhase]       = useState<RenderPhase>('preparing')
+  const [logs, setLogs]         = useState<string[]>([])
   const [media, setMedia]       = useState<RenderMedia[] | null>(null)
   const [outputPath, setOutput] = useState<string | null>(null)
   const [errorMsg, setError]    = useState<string | null>(null)
+  const logRef                  = useRef<HTMLDivElement>(null)
   const cancelledRef            = useRef(false)
   const unmountedRef            = useRef(false)
   const cleanupTimerRef         = useRef<ReturnType<typeof setTimeout> | null>(null)
   const pollTimerRef            = useRef<ReturnType<typeof setInterval> | null>(null)
 
+  // `usePolling` is the data-transport decision (does this adapter expose the
+  // poll-based render API?) — independent of which progress UI we show.
+  const usePolling = !!(adapter.renderAsync && adapter.getRenderStatus)
+  // `view` is the host's UI choice, threaded down as a flag (montaj-native →
+  // 'logs', Hub clients → 'phases'). Defaults to the universally-safe stepper;
+  // 'logs' only renders content on the SSE transport, which streams log lines.
+  const view = progressView ?? 'phases'
+
   useEffect(() => {
     // React StrictMode in dev fires mount → cleanup → mount synchronously to
     // catch effects that aren't idempotent. Triggering a render is the textbook
@@ -135,8 +187,6 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
     unmountedRef.current = false
     cancelledRef.current = false
 
-    const usePolling = !!(adapter.renderAsync && adapter.getRenderStatus)
-
     void (async () => {
       try {
         if (usePolling) {
@@ -144,16 +194,28 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
           await adapter.renderAsync!(projectId)
           if (unmountedRef.current || cancelledRef.current) return
 
+          let pollFailures = 0
           const tick = async () => {
             if (unmountedRef.current || cancelledRef.current) return
             let snap: RenderStatus
             try {
               snap = await adapter.getRenderStatus!(projectId)
+              pollFailures = 0
             } catch (e) {
               if (unmountedRef.current || cancelledRef.current) return
-              stopPolling()
-              setError(e instanceof Error ? e.message : String(e))
-              setStatus('error')
+              // A transient network blip (Cloudflare-tunnel hiccup, a backend
+              // redeploy, a flaky hop) must NOT be mistaken for a render
+              // failure — the render is still running server-side. This is what
+              // surfaced as "Render failed: Failed to fetch" while the render
+              // actually completed and was delivered. Keep polling; only give
+              // up after MAX_POLL_FAILURES consecutive failures. An explicit
+              // { status: 'error' } reply is still terminal (handled below).
+              pollFailures += 1
+              if (pollFailures >= MAX_POLL_FAILURES) {
+                stopPolling()
+                setError(e instanceof Error ? e.message : String(e))
+                setStatus('error')
+              }
               return
             }
             if (unmountedRef.current || cancelledRef.current) return
@@ -188,8 +250,10 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
           for await (const ev of adapter.render(projectId)) {
             if (unmountedRef.current || cancelledRef.current) break
             if (ev.type === 'log') {
-              // Streaming hosts have no phase signal — keep the stepper on
-              // "rendering" as an honest mid-pipeline indicator.
+              // Streaming hosts have no phase signal. Accumulate the line for
+              // the log panel, and keep the stepper (if shown) on "rendering"
+              // as an honest mid-pipeline indicator.
+              setLogs(l => [...l, ev.message])
               setPhase('rendering')
             } else if (ev.type === 'done') {
               setOutput(ev.outputPath)
@@ -230,6 +294,11 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
     }
   }, [projectId, adapter])
 
+  // Auto-scroll the log panel as lines stream in.
+  useEffect(() => {
+    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight
+  }, [logs])
+
   // Escape to close only when done/error
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
@@ -319,7 +388,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
   return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black">
-      <div className="w-full max-w-md bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-xl shadow-2xl flex flex-col overflow-hidden">
+      <div className={`w-full ${view === 'logs' ? 'max-w-3xl' : 'max-w-md'} 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-[var(--editor-border)]">
@@ -337,21 +406,47 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
           )}
         </div>
 
-        {/* Body */}
-        <div className="px-5 py-5">
-          {status === 'running' ? (
-            <>
-              <PhaseStepper current={phase} />
-              <p className="mt-5 text-xs text-[var(--editor-text)]/50">
-                This can take a few minutes for longer videos.
+        {/* Body — full log panel (montaj-native / SSE) or phase stepper (Hub) */}
+        {view === 'logs' ? (
+          <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-[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-[var(--editor-text)]/80 bg-[var(--editor-surface)] flex flex-col gap-0.5"
+            >
+              {logs.length === 0 && status === 'running' && (
+                <span className="text-[var(--editor-text)]/40 italic">Starting render engine…</span>
+              )}
+              {logs.map((line, i) => (
+                <LogLine key={i} text={line} />
+              ))}
+              {status === 'error' && errorMsg && (
+                <span className="text-red-400 mt-1">{errorMsg}</span>
+              )}
+            </div>
+          </div>
+        ) : (
+          <div className="px-5 py-5">
+            {status === 'running' ? (
+              <>
+                <PhaseStepper current={phase} />
+                <p className="mt-5 text-xs text-[var(--editor-text)]/50">
+                  This can take a few minutes for longer videos.
+                </p>
+              </>
+            ) : (
+              <p className="text-sm text-red-400 whitespace-pre-wrap break-words">
+                {errorMsg ?? 'Render failed.'}
               </p>
-            </>
-          ) : (
-            <p className="text-sm text-red-400 whitespace-pre-wrap break-words">
-              {errorMsg ?? 'Render failed.'}
-            </p>
-          )}
-        </div>
+            )}
+          </div>
+        )}
 
         {/* Footer */}
         <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-[var(--editor-border)]">

package/src/video/VideoEditor.tsx

@@ -41,6 +41,7 @@ export default function VideoEditor<P extends Project = Project>({
   slots,
   onBackToSetup,
   assetsPlacement = 'right',
+  renderProgressView = 'phases',
   renderClipInspector,
   renderSubcutRegen,
   regenEnabled,
@@ -87,6 +88,7 @@ export default function VideoEditor<P extends Project = Project>({
         onProjectChange={emit}
         slots={slots}
         assetsPlacement={assetsPlacement}
+        renderProgressView={renderProgressView}
         getWaveformChunks={getWaveformChunks}
         resolveFilePath={resolveFilePath}
         save={save}
@@ -121,6 +123,7 @@ interface SurfaceProps<P extends Project> {
   onProjectChange: (p: P) => void
   slots?: VideoEditorProps<P>['slots']
   assetsPlacement?: VideoEditorProps<P>['assetsPlacement']
+  renderProgressView?: VideoEditorProps<P>['renderProgressView']
   getWaveformChunks?: VideoEditorProps<P>['adapter']['getWaveformChunks']
   resolveFilePath: (path: string) => string
   save: (p: P) => void
@@ -261,6 +264,7 @@ function ReviewSurface<P extends Project>({
   onProjectChange,
   slots,
   assetsPlacement = 'right',
+  renderProgressView = 'phases',
   getWaveformChunks,
   resolveFilePath,
   save,
@@ -615,6 +619,7 @@ function ReviewSurface<P extends Project>({
           projectId={project.id}
           adapter={adapter}
           exportActions={slots?.exportActions}
+          progressView={renderProgressView}
           onClose={() => setRenderOpen(false)}
           onCancel={() => setRenderOpen(false)}
         />

package/src/video/__tests__/render-progress.test.tsx

@@ -172,6 +172,56 @@ describe('RenderModal (poll-driven)', () => {
     expect(screen.getByText(/interrupted on the server/i)).toBeTruthy()
     expect(screen.getByText('Close')).toBeTruthy()
   })
+
+  it('tolerates a transient poll failure and still completes', async () => {
+    vi.useFakeTimers()
+    // poll #1 throws (network blip), then it recovers and finishes. The modal
+    // must NOT flip to "Render failed" on the transient throw — the render is
+    // still running server-side.
+    const steps: Array<() => RenderStatus> = [
+      () => { throw new Error('Failed to fetch') },
+      () => ({ status: 'running', phase: 'rendering' } as RenderStatus),
+      () => ({ status: 'done', phase: 'done', media: [DONE_MEDIA] } as RenderStatus),
+    ]
+    let call = 0
+    const adapter = baseAdapter()
+    adapter.renderAsync = vi.fn(async () => ({ status: 'running' }))
+    adapter.getRenderStatus = vi.fn(async () => steps[Math.min(call++, steps.length - 1)]())
+
+    render(<RenderModal adapter={adapter} projectId="vid-1" onClose={vi.fn()} />)
+
+    // Kick + the first poll (which throws) — still "Rendering…", not failed.
+    await act(async () => { for (let i = 0; i < 10; i++) await Promise.resolve() })
+    expect(screen.queryByText('Render failed')).toBeNull()
+    expect(screen.getByText('Rendering…')).toBeTruthy()
+
+    // Subsequent polls recover → running → done.
+    await act(async () => { await vi.advanceTimersByTimeAsync(2500) })
+    await act(async () => { await vi.advanceTimersByTimeAsync(2500) })
+
+    vi.useRealTimers()
+    await waitFor(() => {
+      expect(document.querySelector('video')?.getAttribute('src')).toBe('https://r2/x.mp4')
+    })
+  })
+
+  it('gives up only after sustained consecutive poll failures', async () => {
+    vi.useFakeTimers()
+    const adapter = baseAdapter()
+    adapter.renderAsync = vi.fn(async () => ({ status: 'running' }))
+    adapter.getRenderStatus = vi.fn(async () => { throw new Error('Failed to fetch') })
+
+    render(<RenderModal adapter={adapter} projectId="vid-1" onClose={vi.fn()} />)
+
+    // First poll throws — still running, NOT failed (one blip is tolerated).
+    await act(async () => { for (let i = 0; i < 10; i++) await Promise.resolve() })
+    expect(screen.queryByText('Render failed')).toBeNull()
+
+    // Keep failing past MAX_POLL_FAILURES (~12 × 2.5s) → terminal error.
+    await act(async () => { await vi.advanceTimersByTimeAsync(2500 * 15) })
+    expect(screen.getByText('Render failed')).toBeTruthy()
+    expect(screen.getByText('Failed to fetch')).toBeTruthy()
+  })
 })
 
 // ── Component (SSE fallback when poll methods absent) ──────────────────────────

package/src/video/timeline/__tests__/useItemDragDrop.test.ts

@@ -0,0 +1,72 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { renderHook } from '@testing-library/react'
+import { useItemDragDrop } from '../useItemDragDrop'
+
+// A press that drifts < 4px must stay a CLICK (so the timeline's click-to-select
+// fires); only a press that travels past the threshold becomes a drag. Regression
+// guard for the bug where any pixel of jitter suppressed clip selection.
+
+const RECT = {
+  width: 1000, height: 100, left: 0, top: 0, right: 1000, bottom: 100, x: 0, y: 0,
+  toJSON: () => ({}),
+} as DOMRect
+
+function setup() {
+  const draggedFlagRef = { current: false }
+  const scrollRef = { current: { getBoundingClientRect: () => RECT } }
+  const { result } = renderHook(() =>
+    useItemDragDrop({
+      totalDuration: 100,
+      snapBoundaries: [],
+      scrollRef: scrollRef as unknown as React.RefObject<HTMLDivElement>,
+      draggedFlagRef: draggedFlagRef as unknown as React.MutableRefObject<boolean>,
+    }),
+  )
+  return { beginDrag: result.current.beginDrag, draggedFlagRef }
+}
+
+const ITEM = { id: 'a', start: 10, end: 20 }
+
+function press(beginDrag: ReturnType<typeof setup>['beginDrag']) {
+  const onLivePreview = vi.fn()
+  const onCommit = vi.fn()
+  beginDrag(
+    { stopPropagation: vi.fn(), clientX: 200, clientY: 200 } as unknown as React.MouseEvent,
+    ITEM,
+    { onLivePreview, onCommit },
+  )
+  return { onLivePreview, onCommit }
+}
+
+afterEach(() => {
+  // ensure no stray listeners between tests
+  document.dispatchEvent(new MouseEvent('mouseup'))
+  vi.restoreAllMocks()
+})
+
+describe('useItemDragDrop — click vs drag threshold', () => {
+  it('sub-threshold drift stays a click: no drag flag, no move, no commit', () => {
+    const { beginDrag, draggedFlagRef } = setup()
+    const { onLivePreview, onCommit } = press(beginDrag)
+
+    // ~2.2px of jitter (hypot(2,1)) — under the 4px threshold
+    document.dispatchEvent(new MouseEvent('mousemove', { clientX: 202, clientY: 201 }))
+    document.dispatchEvent(new MouseEvent('mouseup'))
+
+    expect(draggedFlagRef.current).toBe(false) // click-to-select is NOT suppressed
+    expect(onLivePreview).not.toHaveBeenCalled()
+    expect(onCommit).not.toHaveBeenCalled()
+  })
+
+  it('moving past the threshold becomes a drag: flag set, move + commit fire', () => {
+    const { beginDrag, draggedFlagRef } = setup()
+    const { onLivePreview, onCommit } = press(beginDrag)
+
+    document.dispatchEvent(new MouseEvent('mousemove', { clientX: 240, clientY: 200 })) // 40px → drag
+    expect(draggedFlagRef.current).toBe(true)
+    expect(onLivePreview).toHaveBeenCalled()
+
+    document.dispatchEvent(new MouseEvent('mouseup'))
+    expect(onCommit).toHaveBeenCalled()
+  })
+})

package/src/video/timeline/useItemDragDrop.ts

@@ -33,6 +33,13 @@ export interface UseItemDragDropConfig {
   draggedFlagRef?: React.MutableRefObject<boolean> // sets true during drag (click suppression)
 }
 
+/** A press must travel at least this many pixels before it becomes a drag.
+ *  Below it the gesture stays a click. Without this threshold, a single pixel of
+ *  pointer drift during a click flips the drag flag, and the timeline suppresses
+ *  click-to-select — so clips/overlays can't be selected (or deleted), which
+ *  bites constantly on trackpads and touchscreens where clicks always jitter. */
+const DRAG_THRESHOLD_PX = 4
+
 export function useItemDragDrop(config: UseItemDragDropConfig) {
   const {
     totalDuration,
@@ -133,8 +140,17 @@ export function useItemDragDrop(config: UseItemDragDropConfig) {
     const initStart = item.start
     const initEnd = item.end
     const duration = initEnd - initStart
+    let dragStarted = false
 
     function onMove(moveE: MouseEvent) {
+      // Ignore sub-threshold pointer drift — it's a click, not a drag. Only once
+      // the press travels past DRAG_THRESHOLD_PX do we set the drag flag (which
+      // suppresses click-to-select) and start moving the item.
+      if (!dragStarted) {
+        const moved = Math.hypot(moveE.clientX - initX, moveE.clientY - initY)
+        if (moved < DRAG_THRESHOLD_PX) return
+        dragStarted = true
+      }
       if (draggedFlagRef) draggedFlagRef.current = true
 
       const rect = scrollRef.current?.getBoundingClientRect()