@bycrux/editor 0.5.3 → 0.6.0

package/package.json

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

package/src/crop/VideoSourceCropOverlay.tsx

@@ -0,0 +1,249 @@
+import * as React from 'react'
+import type { VisualItem } from '../schema'
+import {
+  renderedSourceRect,
+  fractionToWrapperPx,
+  applyCropHandleDrag,
+  type CropFraction,
+  type CropHandle,
+} from './crop-math'
+
+// Sibling of CanvasCropOverlay, typed to a tracks[0] VisualItem (video) instead
+// of an ImageElement. The full source clip is letterboxed into the preview via a
+// muted <video>, an 8-handle free-form crop window is drawn on top, and handle
+// drags emit the updated `sourceCrop` as source fractions clamped to [0, 1].
+//
+// Source dims come either from the item (sourceWidth/sourceHeight, set on a prior
+// crop) or from the <video>'s videoWidth/videoHeight on loadedmetadata — exactly
+// analogous to CanvasCropOverlay reading naturalWidth/Height from <img> onLoad.
+
+const CROP_HANDLES: CropHandle[] = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se']
+
+const HANDLE_OFFSET: Record<CropHandle, { dx: 0 | 0.5 | 1; dy: 0 | 0.5 | 1; cursor: string }> = {
+  nw: { dx: 0,   dy: 0,   cursor: 'nw-resize' },
+  n:  { dx: 0.5, dy: 0,   cursor: 'n-resize'  },
+  ne: { dx: 1,   dy: 0,   cursor: 'ne-resize' },
+  w:  { dx: 0,   dy: 0.5, cursor: 'w-resize'  },
+  e:  { dx: 1,   dy: 0.5, cursor: 'e-resize'  },
+  sw: { dx: 0,   dy: 1,   cursor: 'sw-resize' },
+  s:  { dx: 0.5, dy: 1,   cursor: 's-resize'  },
+  se: { dx: 1,   dy: 1,   cursor: 'se-resize' },
+}
+
+const DEFAULT_CROP: CropFraction = { x: 0, y: 0, w: 1, h: 1 }
+
+function clampFraction(c: CropFraction): CropFraction {
+  const x = Math.min(1, Math.max(0, c.x))
+  const y = Math.min(1, Math.max(0, c.y))
+  return {
+    x,
+    y,
+    w: Math.min(1 - x, Math.max(0, c.w)),
+    h: Math.min(1 - y, Math.max(0, c.h)),
+  }
+}
+
+export type VideoSourceCropOverlayProps = {
+  /** The tracks[0] video item being cropped. */
+  item: VisualItem
+  /**
+   * Host-supplied resolver for the clip's preview URL. Implement on the caller
+   * side as `(item) => adapter.fileUrl(item.nobg_preview_src ?? item.src)`.
+   */
+  resolveSrc: (item: VisualItem) => string
+  /** Wrapper width in CSS px (the rect the overlay fills — the preview area). */
+  wrapperWidth: number
+  /** Wrapper height in CSS px. */
+  wrapperHeight: number
+  /** Called once on pointer-up (drag end) with the final clamped [0,1] fractions. */
+  onChange: (next: CropFraction) => void
+  /** Called once when the <video> fires loadedmetadata with the source's intrinsic dims. */
+  onSrcDimsLoaded: (dims: { width: number; height: number }) => void
+}
+
+export function VideoSourceCropOverlay({
+  item,
+  resolveSrc,
+  wrapperWidth,
+  wrapperHeight,
+  onChange,
+  onSrcDimsLoaded,
+}: VideoSourceCropOverlayProps) {
+  const srcUrl = resolveSrc(item)
+
+  // Local mirror of dims loaded from the <video> when the item doesn't already
+  // carry them, so the crop window renders as soon as metadata arrives.
+  const [loadedDims, setLoadedDims] = React.useState<{ width: number; height: number } | null>(null)
+  const srcDims =
+    item.sourceWidth && item.sourceHeight
+      ? { width: item.sourceWidth, height: item.sourceHeight }
+      : loadedDims
+
+  // Prop-driven crop (source of truth when not dragging)
+  const propCrop = item.sourceCrop ?? DEFAULT_CROP
+
+  // In-flight drag crop — non-null only during an active handle drag.
+  // While dragging, the rendered window follows this local state for smoothness.
+  // On pointer-up it's cleared after calling onChange once with the final value.
+  const [liveCrop, setLiveCrop] = React.useState<CropFraction | null>(null)
+  // Ref mirror so onHandlePointerUp always reads the latest value regardless of closure age.
+  const liveCropRef = React.useRef<CropFraction | null>(null)
+
+  // The crop we actually render: live state during drag, props otherwise.
+  const localCrop = liveCrop ?? propCrop
+
+  const rendered =
+    srcDims && wrapperWidth > 0 && wrapperHeight > 0
+      ? renderedSourceRect({
+          wrapperW: wrapperWidth,
+          wrapperH: wrapperHeight,
+          srcWidth: srcDims.width,
+          srcHeight: srcDims.height,
+        })
+      : null
+  const windowPx = rendered ? fractionToWrapperPx({ crop: localCrop, rendered }) : null
+
+  const dragStateRef = React.useRef<{
+    handle: CropHandle
+    startClient: { x: number; y: number }
+    startCrop: CropFraction
+  } | null>(null)
+
+  const onHandlePointerDown = (handle: CropHandle, e: React.PointerEvent<HTMLDivElement>) => {
+    e.stopPropagation()
+    e.currentTarget.setPointerCapture?.(e.pointerId)
+    dragStateRef.current = {
+      handle,
+      startClient: { x: e.clientX, y: e.clientY },
+      startCrop: propCrop,
+    }
+  }
+
+  const onHandlePointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    const drag = dragStateRef.current
+    if (!drag || !srcDims) return
+    const dx = e.clientX - drag.startClient.x
+    const dy = e.clientY - drag.startClient.y
+    const next = applyCropHandleDrag({
+      handle: drag.handle,
+      initialCrop: drag.startCrop,
+      deltaPx: { x: dx, y: dy },
+      wrapperW: wrapperWidth,
+      wrapperH: wrapperHeight,
+      srcWidth: srcDims.width,
+      srcHeight: srcDims.height,
+    })
+    // Accumulate in local state for smooth visual feedback — do NOT call onChange yet.
+    const clamped = clampFraction(next)
+    liveCropRef.current = clamped
+    setLiveCrop(clamped)
+  }
+
+  const onHandlePointerUp = () => {
+    const drag = dragStateRef.current
+    dragStateRef.current = null
+    const final = liveCropRef.current
+    liveCropRef.current = null
+    setLiveCrop(null)
+    if (drag && final !== null) {
+      // Call onChange exactly once with the final value.
+      onChange(final)
+    }
+  }
+
+  return (
+    <div
+      style={{ position: 'absolute', inset: 0, overflow: 'hidden', pointerEvents: 'auto' }}
+      onPointerDown={(e) => {
+        e.stopPropagation()
+      }}
+    >
+      {/* Letterbox preview of the full source clip */}
+      <video
+        src={srcUrl}
+        muted
+        playsInline
+        preload="metadata"
+        onLoadedMetadata={(e) => {
+          const v = e.currentTarget
+          const dims = { width: v.videoWidth, height: v.videoHeight }
+          setLoadedDims(dims)
+          onSrcDimsLoaded(dims)
+        }}
+        style={{
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          height: '100%',
+          objectFit: 'contain',
+          pointerEvents: 'none',
+        }}
+      />
+
+      {windowPx && (
+        <>
+          {/* Dark dimming mask outside the crop window */}
+          <div
+            data-testid="crop-dim"
+            style={{
+              position: 'absolute',
+              inset: 0,
+              background: 'rgba(0, 0, 0, 0.55)',
+              clipPath: `polygon(
+                0 0, 100% 0, 100% 100%, 0 100%, 0 0,
+                ${windowPx.x}px ${windowPx.y}px,
+                ${windowPx.x}px ${windowPx.y + windowPx.h}px,
+                ${windowPx.x + windowPx.w}px ${windowPx.y + windowPx.h}px,
+                ${windowPx.x + windowPx.w}px ${windowPx.y}px,
+                ${windowPx.x}px ${windowPx.y}px
+              )`,
+              pointerEvents: 'none',
+            }}
+          />
+
+          {/* Crop window border */}
+          <div
+            data-testid="crop-window"
+            style={{
+              position: 'absolute',
+              left: windowPx.x,
+              top: windowPx.y,
+              width: windowPx.w,
+              height: windowPx.h,
+              outline: '2px solid var(--editor-selection)',
+              pointerEvents: 'none',
+            }}
+          />
+
+          {/* 8 resize handles */}
+          {CROP_HANDLES.map((handle) => {
+            const o = HANDLE_OFFSET[handle]
+            return (
+              <div
+                key={handle}
+                data-testid={`crop-handle-${handle}`}
+                onPointerDown={(e) => onHandlePointerDown(handle, e)}
+                onPointerMove={onHandlePointerMove}
+                onPointerUp={onHandlePointerUp}
+                style={{
+                  position: 'absolute',
+                  left: windowPx.x + o.dx * windowPx.w - 6,
+                  top: windowPx.y + o.dy * windowPx.h - 6,
+                  width: 12,
+                  height: 12,
+                  backgroundColor: '#fff',
+                  border: '1.5px solid var(--editor-selection)',
+                  borderRadius: 2,
+                  cursor: o.cursor,
+                  zIndex: 10,
+                  pointerEvents: 'auto',
+                  touchAction: 'none',
+                }}
+              />
+            )
+          })}
+        </>
+      )}
+    </div>
+  )
+}

package/src/crop/__tests__/VideoSourceCropOverlay.test.tsx

@@ -0,0 +1,105 @@
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { fireEvent, render, cleanup } from '@testing-library/react'
+import type { VisualItem } from '../../schema'
+import { VideoSourceCropOverlay } from '../VideoSourceCropOverlay'
+
+afterEach(() => cleanup())
+
+// Aspect-matched fixture: wrapper 400×500, source 800×1000. The rendered source
+// fills the wrapper with no letterbox, so crop fractions map 1:1 onto wrapper px
+// (x over 400, y over 500). Initial crop (0.2,0.2,0.6,0.6) → px rect (80,100)–(320,400).
+function makeItem(overrides: Partial<VisualItem> = {}): VisualItem {
+  return {
+    id: 'v1',
+    type: 'video',
+    src: '/clip.mov',
+    start: 0,
+    end: 5,
+    sourceWidth: 800,
+    sourceHeight: 1000,
+    sourceCrop: { x: 0.2, y: 0.2, w: 0.6, h: 0.6 },
+    ...overrides,
+  }
+}
+
+describe('VideoSourceCropOverlay', () => {
+  it('renders the 8 crop handles for a video item with known source dims', () => {
+    const { getByTestId } = render(
+      <VideoSourceCropOverlay
+        item={makeItem()}
+        resolveSrc={() => '/clip.mov'}
+        wrapperWidth={400}
+        wrapperHeight={500}
+        onChange={vi.fn()}
+        onSrcDimsLoaded={vi.fn()}
+      />,
+    )
+    for (const h of ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se']) {
+      expect(getByTestId(`crop-handle-${h}`)).toBeTruthy()
+    }
+  })
+
+  it('emits onChange exactly once on pointer-up (not per move) with the final clamped [0,1] fractions', () => {
+    const onChange = vi.fn()
+    const { getByTestId } = render(
+      <VideoSourceCropOverlay
+        item={makeItem()}
+        resolveSrc={() => '/clip.mov'}
+        wrapperWidth={400}
+        wrapperHeight={500}
+        onChange={onChange}
+        onSrcDimsLoaded={vi.fn()}
+      />,
+    )
+
+    const se = getByTestId('crop-handle-se')
+    // Simulate a full drag sequence: pointerdown → multiple pointermoves → pointerup.
+    // jsdom has no PointerEvent constructor, so fireEvent.pointer* drops
+    // clientX/Y. Dispatch MouseEvents under the pointer* type names instead —
+    // MouseEvent carries clientX/Y and React listens on the event type string.
+    se.dispatchEvent(new MouseEvent('pointerdown', { bubbles: true, clientX: 320, clientY: 400 }))
+    // Multiple intermediate moves — onChange must NOT be called during these.
+    se.dispatchEvent(new MouseEvent('pointermove', { bubbles: true, clientX: 290, clientY: 400 }))
+    se.dispatchEvent(new MouseEvent('pointermove', { bubbles: true, clientX: 270, clientY: 400 }))
+
+    // onChange must not fire during move — only after release.
+    expect(onChange).not.toHaveBeenCalled()
+
+    // Release — final position: SE handle moved left 50 px from start (320 → 270).
+    se.dispatchEvent(new MouseEvent('pointerup', { bubbles: true, clientX: 270, clientY: 400 }))
+
+    // onChange called exactly once on pointer-up.
+    expect(onChange).toHaveBeenCalledTimes(1)
+
+    const next = onChange.mock.calls[0][0]
+    // dx = -50 px over a 400-px-wide rendered source = -0.125 fractions.
+    expect(next.x).toBeCloseTo(0.2)
+    expect(next.y).toBeCloseTo(0.2)
+    expect(next.w).toBeCloseTo(0.6 - 50 / 400) // 0.475
+    expect(next.h).toBeCloseTo(0.6)
+    // All emitted fractions stay within [0, 1].
+    for (const v of [next.x, next.y, next.w, next.h]) {
+      expect(v).toBeGreaterThanOrEqual(0)
+      expect(v).toBeLessThanOrEqual(1)
+    }
+  })
+
+  it('reads source dims from the <video> loadedmetadata when not supplied on the item', () => {
+    const onSrcDimsLoaded = vi.fn()
+    const { container } = render(
+      <VideoSourceCropOverlay
+        item={makeItem({ sourceWidth: undefined, sourceHeight: undefined })}
+        resolveSrc={() => '/clip.mov'}
+        wrapperWidth={400}
+        wrapperHeight={500}
+        onChange={vi.fn()}
+        onSrcDimsLoaded={onSrcDimsLoaded}
+      />,
+    )
+    const video = container.querySelector('video') as HTMLVideoElement
+    Object.defineProperty(video, 'videoWidth', { value: 800, configurable: true })
+    Object.defineProperty(video, 'videoHeight', { value: 1000, configurable: true })
+    fireEvent.loadedMetadata(video)
+    expect(onSrcDimsLoaded).toHaveBeenCalledWith({ width: 800, height: 1000 })
+  })
+})

package/src/crop/__tests__/crop-math.test.ts

@@ -55,6 +55,21 @@ describe('wrapperPxToFraction', () => {
   })
 })
 
+describe('video-source round-trip (regression lock: helpers are element-agnostic)', () => {
+  it('12. round-trips a CropFraction through fractionToWrapperPx → wrapperPxToFraction for a 1920×1080 source in a 1080×1920 wrapper', () => {
+    // 1920×1080 landscape video rendered inside a 1080×1920 portrait wrapper.
+    // Source is much wider than the wrapper, so it letterboxes left/right.
+    const rendered = renderedSourceRect({ wrapperW: 1080, wrapperH: 1920, srcWidth: 1920, srcHeight: 1080 })
+    const orig: import('../crop-math').CropFraction = { x: 0.1, y: 0.2, w: 0.6, h: 0.5 }
+    const px = fractionToWrapperPx({ crop: orig, rendered })
+    const back = wrapperPxToFraction({ px, rendered })
+    expect(back.x).toBeCloseTo(orig.x)
+    expect(back.y).toBeCloseTo(orig.y)
+    expect(back.w).toBeCloseTo(orig.w)
+    expect(back.h).toBeCloseTo(orig.h)
+  })
+})
+
 import { applyCropHandleDrag } from '../crop-math'
 
 // Standard fixture: 400x500 element, 800x1000 source — aspect-matched so the

package/src/schema.ts

@@ -76,7 +76,11 @@ export interface VisualItem {
   remove_bg?: boolean     // video type only
   nobg_src?: string         // video type only — ProRes 4444 .mov for final render
   nobg_preview_src?: string // video type only — VP9 WebM with alpha for browser preview
+  normalizedSrc?: string    // derived per-window normalized cache; render/preview prefer it; src stays original
   muted?: boolean         // video type only — suppress audio in preview and render
+  sourceCrop?: { x: number; y: number; w: number; h: number }  // video type only — non-destructive crop of the source clip (0–1 fractions)
+  sourceWidth?: number    // video type only — intrinsic width of the source clip in pixels
+  sourceHeight?: number   // video type only — intrinsic height of the source clip in pixels
   generation?: {            // ai_video only — frozen provenance from Kling generation
     // Single-shot fields (present when multiShot is falsy).
     sceneId?: string
@@ -186,7 +190,7 @@ export interface Slide {
 export interface EditorProject {
   id: string
   status: 'pending' | 'storyboard_ready' | 'draft' | 'final'
-  settings: { resolution: [number, number]; fps?: number; brandKit?: string }
+  settings: { resolution: [number, number]; fps?: number; brandKit?: string; normalize?: 'eager' | 'lazy' }
   name?: string | null
   editingPrompt?: string
   slides?: Slide[]
@@ -196,6 +200,7 @@ export interface EditorProject {
   assets?: Asset[]
   carousel?: { aspect: string }
   profile?: string
+  derivedFrom?: string  // ID of the source project this was derived from (e.g. clips workflow)
   // Host-only / pipeline fields pass through at the type level.
   [key: string]: unknown
 }

package/src/types.ts

@@ -489,6 +489,15 @@ export interface VideoEditorProps<P extends Project = Project> {
   slots?: EditorSlots
   readOnly?: boolean
   onBackToSetup?: () => void
+  /**
+   * Where the host's `slots.assetsPanel` is placed in the review layout:
+   * - `'right'` (default) — a sidebar column to the right of the preview/timeline.
+   *   The historical Montaj-local layout; preferred when horizontal space is ample.
+   * - `'bottom'` — a full-width region stacked below the editor. Used by hosts with
+   *   constrained width (e.g. the Hub editor) where vertical stacking reads better.
+   * The host chooses per deployment; the package defaults to `'right'`.
+   */
+  assetsPlacement?: 'right' | 'bottom'
 
   // ── Host-supplied Montaj-specific UI (render-prop seams) ──────────────────
   // The clip/audio inspector and the subcut-regeneration tool read host-only

package/src/video/CaptionRegenModal.tsx

@@ -15,7 +15,7 @@ interface CaptionRegenModalProps<P extends Project = Project> {
 }
 
 function LogLine({ text }: { text: string }) {
-  let color = 'text-gray-400'
+  let color = 'text-[var(--editor-text)]/60'
   if (/ready|complete|done|transcribed/i.test(text))      color = 'text-green-400'
   else if (/transcrib|detecting|loading|model/i.test(text)) color = 'text-sky-400'
   else if (/extract|building|composing/i.test(text))      color = 'text-amber-400'
@@ -107,16 +107,16 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
 
   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 === 'done'    && <span className="w-2 h-2 rounded-full bg-green-400" />}
             {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' ? 'Regenerating captions…'
                   : status === 'done' ? 'Captions regenerated'
                   : 'Caption regeneration failed'}
@@ -124,7 +124,7 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
             </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>
 
@@ -132,17 +132,17 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
         <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 transcription…</span>
+              <span className="text-[var(--editor-text)]/40 italic">Starting transcription…</span>
             )}
             {logs.map((line, i) => (
               <LogLine key={i} text={line} />
@@ -154,18 +154,18 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
         </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/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>