@bycrux/editor 1.3.0 → 1.4.0

package/package.json

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

package/src/ControlsInfoModal.tsx

@@ -110,7 +110,7 @@ export default function ControlsInfoModal({ title, sections, onClose }: Controls
       role="dialog"
       aria-modal="true"
       aria-label={title}
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm text-[var(--editor-text)]"
       onClick={onClose}
     >
       <div

package/src/__tests__/portal-roots-set-editor-text.test.ts

@@ -0,0 +1,55 @@
+import { describe, it, expect } from 'vitest'
+import { readFileSync, readdirSync, statSync } from 'node:fs'
+import { dirname, join, relative } from 'node:path'
+import { fileURLToPath } from 'node:url'
+// See ./node-shims.d.ts for why the `node:*` imports typecheck here.
+
+// Anything this package portals to `document.body` lands OUTSIDE the editor
+// root, so it no longer inherits the editor's `text-[var(--editor-text)]`.
+// It inherits the HOST page's text colour instead: in the Montaj desktop app
+// that is `text-gray-900` (#111827), which is exactly the dark theme's
+// `--editor-surface`. Any child without its own text class (or whose class the
+// host's Tailwind failed to emit) then renders dark on dark, which is how the
+// Export dialog's Cancel label and tier dims went invisible.
+//
+// Guard: in every file that calls `createPortal`, every `fixed` overlay root
+// must set its own text colour, so portalled content inherits the editor's
+// text, never the host's.
+
+const SRC_ROOT = dirname(dirname(fileURLToPath(import.meta.url)))
+const TEXT_COLOUR = /(^|\s)text-(\[var\(--editor-text\)\]|white)(\s|$)/
+
+function collectSourceFiles(dir: string, out: string[] = []): string[] {
+  for (const entry of readdirSync(dir)) {
+    if (entry === 'node_modules' || entry === '__tests__') continue
+    const full = join(dir, entry)
+    if (statSync(full).isDirectory()) collectSourceFiles(full, out)
+    else if (/\.tsx$/.test(entry) && !/\.test\.tsx$/.test(entry)) out.push(full)
+  }
+  return out
+}
+
+describe('portal roots set the editor text colour', () => {
+  it('every `fixed` root in a portalling component carries a text colour', () => {
+    const offenders: string[] = []
+    let checked = 0
+    for (const file of collectSourceFiles(SRC_ROOT)) {
+      const src = readFileSync(file, 'utf8')
+      if (!src.includes('createPortal(')) continue
+      // Static className strings and the static head of template literals.
+      const re = /className=(?:"([^"]*)"|\{`([^`]*)`\})/g
+      let m: RegExpExecArray | null
+      while ((m = re.exec(src)) !== null) {
+        const cls = (m[1] ?? m[2]).replace(/\$\{[^}]*\}/g, ' ')
+        if (!/(^|\s)fixed(\s|$)/.test(cls)) continue
+        checked += 1
+        if (!TEXT_COLOUR.test(cls)) {
+          const line = src.slice(0, m.index).split('\n').length
+          offenders.push(`${relative(SRC_ROOT, file)}:${line}: ${cls.trim()}`)
+        }
+      }
+    }
+    expect(checked).toBeGreaterThan(5)
+    expect(offenders).toEqual([])
+  })
+})

package/src/carousel/CarouselRenderModal.tsx

@@ -70,7 +70,7 @@ function LogLine({ text, mode = 'dark' }: { text: string; mode?: 'light' | 'dark
   else if (/error|fail/i.test(t))           color = mode === 'light' ? 'text-red-600' : 'text-red-400'
 
   const prefix = text.startsWith('[render]')
-    ? <span className="text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]">[render] </span>
+    ? <span className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">[render] </span>
     : null
 
   return (
@@ -240,7 +240,7 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
     // Portal to document.body (see RenderModal): a transformed host ancestor
     // would otherwise trap this `fixed` overlay and center the panel off-screen.
     return createPortal(
-      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black">
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black text-[var(--editor-text)]">
         <div className="w-[96vw] h-[96vh] bg-[var(--editor-bg)] border border-[var(--editor-border)] rounded-2xl shadow-2xl flex overflow-hidden">
 
           {/* Left — slide gallery */}
@@ -264,15 +264,15 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
                       className="block w-full h-auto"
                       style={{ aspectRatio: `${resolution[0]} / ${resolution[1]}` }}
                     />
-                    <div className="absolute bottom-0 left-0 right-0 px-2 py-1.5 bg-black text-[11px] text-[var(--editor-text)] font-mono flex justify-between">
+                    <div className="absolute bottom-0 left-0 right-0 px-2 py-1.5 bg-black text-[11px] text-white/90 font-mono flex justify-between">
                       <span>#{String(i + 1).padStart(2, '0')}</span>
-                      <span className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">{slide.filename}</span>
+                      <span className="text-white/60">{slide.filename}</span>
                     </div>
                   </a>
                 ))}
               </div>
             ) : (
-              <p className="text-sm text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Render complete.</p>
+              <p className="text-sm text-white/60">Render complete.</p>
             )}
           </div>
 
@@ -311,7 +311,7 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
   // Poll transport carries no per-line logs, so show a spinner + status text;
   // the SSE transport (montaj-native) streams logs into the log panel.
   return createPortal(
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black text-[var(--editor-text)]">
       <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">
 
         <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--editor-border)]">
@@ -357,7 +357,7 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
               className="h-96 overflow-y-auto px-4 py-3 font-mono text-[11px] text-[var(--editor-text)] bg-[var(--editor-bg)] flex flex-col gap-0.5"
             >
               {logs.length === 0 && status === 'running' && (
-                <span className="text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] italic">Starting render engine…</span>
+                <span className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] italic">Starting render engine…</span>
               )}
               {logs.map((line, i) => (
                 <LogLine key={i} text={line} mode={mode} />

package/src/carousel/OverlayPicker.tsx

@@ -100,7 +100,7 @@ export default function OverlayPicker({ open, onClose, project, adapter, onPick,
 
   return (
     <div
-      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
+      className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 text-[var(--editor-text)]"
       onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
     >
       <div className="bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col overflow-hidden">

package/src/crop/VideoSourceCropModal.tsx

@@ -156,7 +156,7 @@ export function VideoSourceCropModal({
 
   return (
     <div
-      className="fixed inset-0 z-[300] flex items-center justify-center bg-black/70 p-6"
+      className="fixed inset-0 z-[300] flex items-center justify-center bg-black/70 p-6 text-[var(--editor-text)]"
       onPointerDown={onClose}
     >
       <div
@@ -165,7 +165,7 @@ export function VideoSourceCropModal({
       >
         <div className="flex items-center justify-between">
           <h2 className="text-sm font-semibold text-[var(--editor-text)]">Crop source</h2>
-          <span className="text-xs text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">Pick the part of the footage to keep — position &amp; zoom live on the canvas</span>
+          <span className="text-xs text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Pick the part of the footage to keep. Position and zoom live on the canvas</span>
         </div>
 
         {/* Source frame + crop window */}

package/src/types.ts

@@ -561,6 +561,8 @@ export interface EditorContext {
   selectedIds: string[]
   /** Selected caption segment id, if any. */
   selectedCaptionId: string | null
+  /** Whether the preview is playing. Absent from hosts that do not know. */
+  playing?: boolean
 }
 
 /**

package/src/video/AudioPolishModal.tsx

@@ -681,7 +681,7 @@ export default function AudioPolishModal<P extends Project = Project>({
   // ── Render ────────────────────────────────────────────────────────────────
 
   const panel = (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 text-[var(--editor-text)]">
       <div
         role="dialog"
         aria-label="Polish audio"
@@ -747,7 +747,7 @@ export default function AudioPolishModal<P extends Project = Project>({
                   <option key={l.id} value={l.id}>{l.label}</option>
                 ))}
               </select>
-              <span className="text-[10px] text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)] max-w-[15rem] leading-snug">
+              <span className="text-[10px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] max-w-[15rem] leading-snug">
                 Set this before analysing. The wrong language makes real speech look like silence.
               </span>
             </label>
@@ -841,7 +841,7 @@ export default function AudioPolishModal<P extends Project = Project>({
               <section key={clip.id} className="flex flex-col gap-2">
                 <header className="flex items-baseline justify-between gap-3 border-b border-[var(--editor-border)] pb-1">
                   <span className="text-xs font-semibold text-[var(--editor-text)] truncate">{clipLabel(clip)}</span>
-                  <span className="text-[10px] font-mono text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)] shrink-0">
+                  <span className="text-[10px] font-mono text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] shrink-0">
                     {`${clock(clip.start)} to ${clock(clip.end)}`}
                   </span>
                 </header>
@@ -914,7 +914,7 @@ export default function AudioPolishModal<P extends Project = Project>({
 
                 {/* Removals */}
                 {rows.length === 0 ? (
-                  <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)] italic">No removals proposed for this clip.</p>
+                  <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] italic">No removals proposed for this clip.</p>
                 ) : (
                   <ul className="flex flex-col gap-1">
                     {rows.map(row => (

package/src/video/CaptionRegenModal.tsx

@@ -144,7 +144,7 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
   // Portal to document.body so a transformed host ancestor can't trap this
   // `fixed` overlay and push the panel off-screen (see RenderModal).
   return createPortal(
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black text-[var(--editor-text)]">
       <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 */}
@@ -199,7 +199,7 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
             className="h-96 overflow-y-auto px-4 py-3 font-mono text-[11px] text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] bg-[var(--editor-surface)] flex flex-col gap-0.5"
           >
             {logs.length === 0 && status === 'running' && (
-              <span className="text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] italic">Starting transcription…</span>
+              <span className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] italic">Starting transcription…</span>
             )}
             {logs.map((line, i) => (
               <LogLine key={i} text={line} mode={mode} />

package/src/video/CommandPalette.tsx

@@ -94,7 +94,7 @@ export default function CommandPalette({ commands, initialMode = 'list', onGoToT
 
   return createPortal(
     <div
-      className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh] bg-black/70 backdrop-blur-sm"
+      className="fixed inset-0 z-50 flex items-start justify-center pt-[15vh] bg-black/70 backdrop-blur-sm text-[var(--editor-text)]"
       onClick={onClose}
     >
       <div
@@ -131,7 +131,7 @@ export default function CommandPalette({ commands, initialMode = 'list', onGoToT
             </div>
             <div className="max-h-80 overflow-y-auto py-1">
               {filtered.length === 0 && (
-                <div className="px-4 py-3 text-xs text-[color-mix(in_srgb,var(--editor-text)_35%,transparent)]">No matching commands</div>
+                <div className="px-4 py-3 text-xs text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">No matching commands</div>
               )}
               {filtered.map((cmd, i) => (
                 <button

package/src/video/ImageToneMenu.tsx

@@ -16,9 +16,8 @@ export interface ImageToneMenuProps {
    *              For host chrome at the top of the page.
    */
   variant?: 'icon' | 'header'
-  /** Editor theme mode — light/dark. Only affects the icon variant's active-
-   *  state hue (violet-400 is sub-AA on a light bottom toolbar). Absent ->
-   *  dark, matching every existing caller. */
+  /** Editor theme mode — light/dark. Kept for API compatibility; the active state now
+   *  reads the theme's accent tokens, which already adapt to light and dark. */
   mode?: 'light' | 'dark'
 }
 
@@ -29,7 +28,7 @@ export interface ImageToneMenuProps {
  * caller gates on settings.colorSpace). Each option shows an example: the same
  * generic photo converted through the actual render pipeline under that mode.
  */
-export default function ImageToneMenu({ value, onChange, variant = 'icon', mode = 'dark' }: ImageToneMenuProps) {
+export default function ImageToneMenu({ value, onChange, variant = 'icon' }: ImageToneMenuProps) {
   const [open, setOpen] = useState(false)
   const rootRef = useRef<HTMLDivElement>(null)
 
@@ -78,7 +77,7 @@ export default function ImageToneMenu({ value, onChange, variant = 'icon', mode
           aria-haspopup="menu"
           className={`flex items-center justify-center w-5 h-5 rounded transition-colors ${
             open
-              ? (mode === 'light' ? 'text-violet-600 bg-violet-400/15 hover:bg-violet-400/25' : 'text-violet-400 bg-violet-400/15 hover:bg-violet-400/25')
+              ? 'text-[var(--editor-accent-text)] bg-[color-mix(in_srgb,var(--editor-accent)_15%,transparent)] hover:bg-[color-mix(in_srgb,var(--editor-accent)_25%,transparent)]'
               : 'text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] bg-transparent hover:text-[var(--editor-text)]'
           }`}
         >
@@ -89,11 +88,11 @@ export default function ImageToneMenu({ value, onChange, variant = 'icon', mode
       {open && (
         <div
           role="menu"
-          className={`${menuPosition} z-40 w-[300px] rounded-xl border border-[var(--editor-border)] bg-[var(--editor-surface)] shadow-2xl p-2 flex flex-col gap-1`}
+          className={`${menuPosition} z-40 w-[300px] rounded-xl border border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)] shadow-2xl p-2 flex flex-col gap-1`}
         >
           <p className="px-2 pt-1 pb-1.5 text-[11px] font-semibold text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)]">
             Image color mapping
-            <span className="block font-normal text-[10px] text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">
+            <span className="block font-normal text-[10px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
               How photos and logos are converted for the HDR render.
             </span>
           </p>
@@ -107,7 +106,7 @@ export default function ImageToneMenu({ value, onChange, variant = 'icon', mode
                 onClick={() => { onChange(tone.id); setOpen(false) }}
                 className={`flex items-start gap-2.5 rounded-lg p-2 text-left transition-colors border ${
                   active
-                    ? 'border-violet-400/60 bg-violet-400/10'
+                    ? 'border-[var(--editor-accent)] bg-[color-mix(in_srgb,var(--editor-accent)_12%,transparent)]'
                     : 'border-transparent hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]'
                 }`}
               >

package/src/video/RenderModal.tsx

@@ -115,12 +115,10 @@ interface RenderModalProps<P extends Project = Project> {
   preRenderOptions?: PreRenderOptions
   /** Editor theme mode — light/dark. The export dialog and progress/error
    *  panels follow `--editor-surface`, so warning/error hues need to darken
-   *  in light mode. The render-log terminal boxes stay dark by design and so
-   *  take no mode: they are painted an OPAQUE near-black (`#0a0e17`/`#0e131f`)
-   *  rather than a translucent `bg-black/40`, which would have composited to
-   *  mid-grey over a light surface instead of staying a terminal. Those two
-   *  values are exactly what the old translucent blacks composited to over the
-   *  dark `--editor-surface`, so dark mode is unchanged. Absent -> dark,
+   *  in light mode. The render-log terminal boxes stay dark by design: they are
+   *  painted an OPAQUE near-black (`#0a0e17`) with fixed white text, so they
+   *  read the same under either theme. The phase stepper and footer buttons
+   *  follow the theme tokens instead. Absent -> dark,
    *  matching every existing caller. */
   mode?: 'light' | 'dark'
 }
@@ -309,15 +307,15 @@ function PhaseStepper({ current, phases }: { current: RenderPhase; phases: Rende
 
 function LogLine({ text }: { text: string }) {
   const t = text.replace(/^\[montaj render\]\s*/, '')
-  let color = 'text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]'
+  let color = 'text-white/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-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]'
+  else if (/frame\s+\d+\/\d+/i.test(t))                  color = 'text-white/55'
   else if (/error|fail|warn/i.test(t))                   color = 'text-red-400'
 
   const prefix = text.startsWith('[montaj render]')
-    ? <span className="text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]">[render] </span>
+    ? <span className="text-white/40">[render] </span>
     : null
 
   return (
@@ -792,16 +790,16 @@ 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/70 backdrop-blur-md p-4">
-        <div className="w-full max-w-3xl bg-[var(--editor-surface)] border border-white/10 rounded-2xl shadow-2xl flex flex-col overflow-hidden">
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md p-4 text-[var(--editor-text)]">
+        <div className="w-full max-w-3xl bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-2xl shadow-2xl flex flex-col overflow-hidden">
 
           {/* Header */}
-          <div className="flex items-center justify-between px-5 py-4 border-b border-white/10">
+          <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--editor-border)]">
             <h2 className="text-sm font-semibold text-[var(--editor-text)]">Export</h2>
             <button
               onClick={handleCancel}
               aria-label="Close"
-              className="text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)] hover:text-[var(--editor-text)] transition-colors text-lg leading-none"
+              className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[var(--editor-text)] transition-colors text-lg leading-none"
             >
               ×
             </button>
@@ -813,7 +811,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
             {/* Left — cover preview + editor */}
             <div className="md:w-64 shrink-0 flex flex-col gap-2">
               <div
-                className="relative mx-auto max-w-full overflow-hidden rounded-lg border border-white/10 bg-black/40 flex items-center justify-center"
+                className="relative mx-auto max-w-full overflow-hidden rounded-lg border border-[var(--editor-border)] bg-black/40 flex items-center justify-center"
                 style={coverPortrait
                   ? { aspectRatio: coverAspect, height: 'min(46vh, 22rem)' }
                   : { aspectRatio: coverAspect, width: '100%' }}
@@ -827,7 +825,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 ) : coverLoading ? (
                   <Loader size="md" label="Loading cover" />
                 ) : (
-                  <span className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]">No preview</span>
+                  <span className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">No preview</span>
                 )}
               </div>
               {adapter.getSampleFrame && (
@@ -857,7 +855,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                               className={`relative shrink-0 overflow-hidden rounded border transition-colors ${
                                 active
                                   ? 'border-[var(--editor-accent)] ring-1 ring-[var(--editor-accent)]'
-                                  : 'border-white/10 hover:border-white/40'
+                                  : 'border-[var(--editor-border)] hover:border-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]'
                               }`}
                               style={{ aspectRatio: coverAspect, height: 72 }}
                             >
@@ -869,7 +867,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                         })}
                       </div>
                     ) : (
-                      <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]">No frames to pick from.</p>
+                      <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">No frames to pick from.</p>
                     )
                   )}
                 </>
@@ -880,7 +878,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
             <div className="flex-1 min-w-0 flex flex-col gap-4">
               {/* Name */}
               <label className="flex flex-col gap-1.5">
-                <span className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">Name</span>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Name</span>
                 <input
                   type="text"
                   value={name}
@@ -892,9 +890,9 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
               {/* Save to */}
               <div className="flex flex-col gap-1">
-                <span className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">Save to</span>
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Save to</span>
                 <span className="text-xs font-mono text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)] truncate">output/{outputName}.mp4</span>
-                <span className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)]">Download after export.</span>
+                <span className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Download after export.</span>
               </div>
 
               {/* Resolution — source-capped tier picker. Only rendered when the
@@ -908,7 +906,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 const currentShort = Math.min(...res.value)
                 return (
                   <div className="flex flex-col gap-2">
-                    <p className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">Resolution</p>
+                    <p className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Resolution</p>
                     <div role="radiogroup" aria-label="Resolution" className="grid grid-cols-2 sm:grid-cols-4 gap-2">
                       {res.available.map(([w, h]) => {
                         const short = Math.min(w, h)
@@ -921,12 +919,12 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                             onClick={() => res.set([w, h])}
                             className={`flex flex-col gap-1 rounded-lg border p-2.5 text-left transition-colors ${
                               active
-                                ? 'border-violet-400/60 bg-violet-400/10'
+                                ? 'border-[var(--editor-accent)] bg-[color-mix(in_srgb,var(--editor-accent)_12%,transparent)]'
                                 : 'border-[var(--editor-border)] hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]'
                             }`}
                           >
                             <span className="text-xs font-semibold text-[var(--editor-text)]">{resLabel([w, h])}</span>
-                            <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]">{w} × {h}</span>
+                            <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">{w} × {h}</span>
                           </button>
                         )
                       })}
@@ -940,7 +938,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 const fps = preRenderOptions.fps
                 return (
                   <div className="flex flex-col gap-2">
-                    <p className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">Frame rate</p>
+                    <p className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Frame rate</p>
                     <div role="radiogroup" aria-label="Frame rate" className="grid grid-cols-3 gap-2">
                       {fps.available.map(f => {
                         const active = f === fps.value
@@ -953,12 +951,12 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                             onClick={() => fps.set(f)}
                             className={`flex flex-col gap-1 rounded-lg border p-2.5 text-left transition-colors ${
                               active
-                                ? 'border-violet-400/60 bg-violet-400/10'
+                                ? 'border-[var(--editor-accent)] bg-[color-mix(in_srgb,var(--editor-accent)_12%,transparent)]'
                                 : 'border-[var(--editor-border)] hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]'
                             }`}
                           >
                             <span className="text-xs font-semibold text-[var(--editor-text)]">{f} fps</span>
-                            <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]">{hint}</span>
+                            <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">{hint}</span>
                           </button>
                         )
                       })}
@@ -972,7 +970,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 <>
                   {/* Format */}
                   <div className="flex flex-col gap-2">
-                    <p className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">Format</p>
+                    <p className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Format</p>
                     <div role="radiogroup" aria-label="Format" className="grid grid-cols-3 gap-2">
                       {EXPORT_CHOICES.map(choice => {
                         const active = choice.id === exportChoice
@@ -984,12 +982,12 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                             onClick={() => setExport(choice.id)}
                             className={`flex flex-col gap-1 rounded-lg border p-2.5 text-left transition-colors ${
                               active
-                                ? 'border-violet-400/60 bg-violet-400/10'
+                                ? 'border-[var(--editor-accent)] bg-[color-mix(in_srgb,var(--editor-accent)_12%,transparent)]'
                                 : 'border-[var(--editor-border)] hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]'
                             }`}
                           >
                             <span className="text-xs font-semibold text-[var(--editor-text)]">{choice.label}</span>
-                            <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]">{choice.blurb}</span>
+                            <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">{choice.blurb}</span>
                           </button>
                         )
                       })}
@@ -1018,7 +1016,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
                         {imageColorOpen ? (
                           <div className="flex flex-col gap-2">
-                            <p className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">
+                            <p className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
                               How photos and logos convert for HDR
                             </p>
                             <div role="radiogroup" aria-label="Image color" className="grid grid-cols-2 gap-2">
@@ -1032,7 +1030,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                                     onClick={() => it.set(t.id)}
                                     className={`flex flex-col gap-1.5 rounded-lg border p-2 text-left transition-colors ${
                                       active
-                                        ? 'border-violet-400/60 bg-violet-400/10'
+                                        ? 'border-[var(--editor-accent)] bg-[color-mix(in_srgb,var(--editor-accent)_12%,transparent)]'
                                         : 'border-[var(--editor-border)] hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]'
                                     }`}
                                   >
@@ -1044,7 +1042,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                                     <span className="text-xs font-semibold text-[var(--editor-text)] flex items-center gap-1.5">
                                       {t.label}
                                       {t.id === DEFAULT_IMAGE_TONE && (
-                                        <span className="text-[9px] font-normal px-1 py-px rounded bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)] text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]">default</span>
+                                        <span className="text-[9px] font-normal px-1 py-px rounded bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">default</span>
                                       )}
                                     </span>
                                     <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">{t.summary}</span>
@@ -1054,7 +1052,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                             </div>
                           </div>
                         ) : (
-                          <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)]">
+                          <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
                             Photos and logos use the {toneInfo.label} conversion. Open to change.
                           </p>
                         )}
@@ -1075,7 +1073,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
                     {advancedOpen ? (
                       <div className="flex flex-col gap-2">
-                        <p className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">
+                        <p className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
                           Tone curve for SDR
                         </p>
                         <div role="radiogroup" aria-label="Tone curve for SDR" className="grid grid-cols-2 gap-2">
@@ -1090,7 +1088,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                                 onClick={() => setSdrCurve(curve.id)}
                                 className={`flex flex-col gap-1.5 rounded-lg border p-2 text-left transition-colors ${
                                   active
-                                    ? 'border-violet-400/60 bg-violet-400/10'
+                                    ? 'border-[var(--editor-accent)] bg-[color-mix(in_srgb,var(--editor-accent)_12%,transparent)]'
                                     : 'border-[var(--editor-border)] hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]'
                                 }`}
                               >
@@ -1127,7 +1125,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                                 <span className="text-xs font-semibold text-[var(--editor-text)] flex items-center gap-1.5">
                                   {curve.label}
                                   {curve.id === DEFAULT_SDR_CURVE && (
-                                    <span className="text-[9px] font-normal px-1 py-px rounded bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)] text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]">default</span>
+                                    <span className="text-[9px] font-normal px-1 py-px rounded bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">default</span>
                                   )}
                                 </span>
                                 <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">{curve.blurb}</span>
@@ -1139,7 +1137,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                           data-testid="sdr-honesty-line"
                           className={`text-[11px] leading-snug ${
                             sdrCurve === DEFAULT_SDR_CURVE
-                              ? 'text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]'
+                              ? 'text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]'
                               : (mode === 'light' ? 'text-amber-700' : 'text-amber-400/90')
                           }`}
                         >
@@ -1147,7 +1145,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                         </p>
                       </div>
                     ) : (
-                      <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)]">
+                      <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
                         SDR files use the {curveInfo.label} look. Open Advanced to compare curves.
                       </p>
                     )}
@@ -1159,7 +1157,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
           {/* Footer — duration on the left, actions on the right. */}
           <div className="flex items-center justify-between gap-2 px-5 py-3 border-t border-[var(--editor-border)]">
-            <span className="text-xs text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)] tabular-nums">
+            <span className="text-xs text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] tabular-nums">
               {durationSec > 0 ? formatTimecode(durationSec) : ''}
             </span>
             <div className="flex items-center gap-2">
@@ -1183,7 +1181,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
       )}
       {expandedCurve && expandedUrl && createPortal(
         <div
-          className="fixed inset-0 z-[60] flex flex-col items-center justify-center gap-3 bg-black/90 p-6"
+          className="fixed inset-0 z-[60] flex flex-col items-center justify-center gap-3 bg-black/90 p-6 text-white"
           onClick={() => setExpandedCurveId(null)}
           role="dialog"
           aria-label={`${expandedCurve.label} preview`}
@@ -1243,7 +1241,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
     // block for this `fixed` overlay, sizing it to the scrolled page height and
     // centering the panel off-screen below the fold.
     return createPortal(
-      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black">
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black text-[var(--editor-text)]">
         <div className="w-[96vw] h-[96vh] bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-2xl shadow-2xl flex overflow-hidden">
 
           {/* Left — video */}
@@ -1257,7 +1255,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 className="h-full w-full object-contain"
               />
             ) : (
-              <p className="text-sm text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Render complete.</p>
+              <p className="text-sm text-white/60">Render complete.</p>
             )}
           </div>
 
@@ -1271,7 +1269,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                   <p className="text-xs text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Saved to your library.</p>
                 </div>
               </div>
-              <button onClick={onClose} className="text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)] hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
+              <button onClick={onClose} className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
             </div>
 
             <div className="flex flex-col gap-3 p-5 flex-1">
@@ -1281,7 +1279,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 <a
                   href={videoUrl}
                   download={downloadName}
-                  className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-green-800/60 border border-green-700 text-green-200 hover:bg-green-700/60 transition-colors font-medium"
+                  className={`w-full text-center text-sm px-4 py-2.5 rounded-lg border transition-colors font-medium ${mode === 'light' ? 'bg-green-600 border-green-700 text-white hover:bg-green-700' : 'bg-green-800/60 border-green-700 text-green-200 hover:bg-green-700/60'}`}
                 >
                   {extraOutputs.length > 0 ? 'Download HDR master' : 'Download'}
                 </a>
@@ -1292,7 +1290,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                   key={p}
                   href={adapter.fileUrl(p)}
                   download={basename(p)}
-                  className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-[var(--editor-surface)] border border-green-800 text-green-200/90 hover:bg-green-900/40 transition-colors font-medium"
+                  className={`w-full text-center text-sm px-4 py-2.5 rounded-lg bg-[var(--editor-surface)] border transition-colors font-medium ${mode === 'light' ? 'border-green-600 text-green-700 hover:bg-green-50' : 'border-green-800 text-green-200/90 hover:bg-green-900/40'}`}
                 >
                   Download SDR version
                 </a>
@@ -1312,11 +1310,11 @@ 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/70 backdrop-blur-md p-4">
-      <div className="w-full max-w-md bg-[var(--editor-surface)] border border-white/10 rounded-2xl shadow-2xl flex flex-col overflow-hidden">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md p-4 text-[var(--editor-text)]">
+      <div className="w-full max-w-md bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-2xl shadow-2xl flex flex-col overflow-hidden">
 
         {/* Header */}
-        <div className="flex items-center justify-between px-5 py-4 border-b border-white/10">
+        <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-[var(--editor-accent)] animate-pulse" />}
             {status === 'error'   && <span className="w-2 h-2 rounded-full bg-red-400" />}
@@ -1325,7 +1323,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
             </h2>
           </div>
           {status !== 'running' && (
-            <button onClick={onClose} className="text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)] hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
+            <button onClick={onClose} className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
           )}
         </div>
 
@@ -1336,7 +1334,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
             <div className="flex flex-col items-center gap-1 text-center">
               <h3 className="text-base font-semibold text-[var(--editor-text)]">Exporting your video</h3>
-              <p className="text-xs text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">This can take a few minutes for longer videos.</p>
+              <p className="text-xs text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">This can take a few minutes for longer videos.</p>
             </div>
 
             {/* Progress bar — always visible while rendering, above the stepper
@@ -1355,7 +1353,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
 
             {/* Granular phase progress (poll hosts advance through phases). */}
             {view !== 'logs' && (
-              <div className="w-full max-w-xs rounded-xl border border-white/10 bg-[#0e131f] px-4 py-3">
+              <div className="w-full max-w-xs rounded-xl border border-[var(--editor-border)] bg-[color-mix(in_srgb,var(--editor-text)_4%,var(--editor-surface))] px-4 py-3">
                 <PhaseStepper current={phase} phases={stepperPhases(renderOpts)} />
               </div>
             )}
@@ -1366,7 +1364,7 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                 <button
                   onClick={() => setShowLog(o => !o)}
                   aria-expanded={showLog}
-                  className="mx-auto flex items-center gap-1 text-[11px] text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] transition-colors"
+                  className="mx-auto flex items-center gap-1 text-[11px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] transition-colors"
                 >
                   {showLog ? <ChevronDown size={13} /> : <ChevronRight size={13} />}
                   {showLog ? 'Hide render log' : 'Show render log'}
@@ -1375,17 +1373,17 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
                   <div className="relative mt-2">
                     <button
                       onClick={() => navigator.clipboard.writeText(logs.join('\n'))}
-                      className="absolute top-2 right-2 z-10 rounded border border-white/10 bg-[#0a0e17] px-2 py-0.5 text-[10px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[var(--editor-text)] transition-colors"
+                      className="absolute top-2 right-2 z-10 rounded border border-white/10 bg-[#0a0e17] px-2 py-0.5 text-[10px] text-white/60 hover:text-white transition-colors"
                       title="Copy logs"
                     >
                       Copy
                     </button>
                     <div
                       ref={logRef}
-                      className="flex h-52 flex-col gap-0.5 overflow-y-auto rounded-lg border border-white/10 bg-[#0a0e17] px-3 py-2 font-mono text-[11px] text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)]"
+                      className="flex h-52 flex-col gap-0.5 overflow-y-auto rounded-lg border border-white/10 bg-[#0a0e17] px-3 py-2 font-mono text-[11px] text-white/80"
                     >
                       {logs.length === 0
-                        ? <span className="italic text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]">Starting render engine…</span>
+                        ? <span className="italic text-white/40">Starting render engine…</span>
                         : logs.map((line, i) => <LogLine key={i} text={line} />)}
                     </div>
                   </div>
@@ -1400,14 +1398,14 @@ 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 rounded border border-white/10 bg-[#0a0e17] px-2 py-0.5 text-[10px] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[var(--editor-text)] transition-colors"
+                  className="absolute top-2 right-2 z-10 rounded border border-white/10 bg-[#0a0e17] px-2 py-0.5 text-[10px] text-white/60 hover:text-white transition-colors"
                   title="Copy logs"
                 >
                   Copy
                 </button>
                 <div
                   ref={logRef}
-                  className="flex h-72 flex-col gap-0.5 overflow-y-auto rounded-lg border border-white/10 bg-[#0a0e17] px-3 py-2 font-mono text-[11px] text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)]"
+                  className="flex h-72 flex-col gap-0.5 overflow-y-auto rounded-lg border border-white/10 bg-[#0a0e17] px-3 py-2 font-mono text-[11px] text-white/80"
                 >
                   {logs.map((line, i) => <LogLine key={i} text={line} />)}
                   {errorMsg && <span className="mt-1 text-red-400">{errorMsg}</span>}
@@ -1422,18 +1420,18 @@ export default function RenderModal<P extends Project = Project>({ projectId, ad
         )}
 
         {/* Footer */}
-        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-white/10">
+        <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-[#0e131f] border border-white/10 text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] transition-colors ${mode === 'light' ? 'hover:bg-red-50 hover:border-red-300 hover:text-red-700' : 'hover:bg-red-900/40 hover:border-red-700 hover:text-red-300'}`}
+              className={`text-sm px-4 py-1.5 rounded-md bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] transition-colors ${mode === 'light' ? 'hover:bg-red-50 hover:border-red-300 hover:text-red-700' : 'hover:bg-red-900/40 hover:border-red-700 hover:text-red-300'}`}
             >
               Cancel
             </button>
           ) : (
             <button
               onClick={onClose}
-              className="text-sm px-4 py-1.5 rounded-md bg-[#0e131f] border border-white/10 text-[var(--editor-text)] hover:opacity-90 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/VersionCompare.tsx

@@ -169,11 +169,11 @@ export default function VersionCompare({
   }, [onClose])
 
   return createPortal(
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md p-4">
-      <div className="w-full max-w-5xl bg-[var(--editor-surface)] border border-white/10 rounded-2xl shadow-2xl flex flex-col overflow-hidden">
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-md p-4 text-[var(--editor-text)]">
+      <div className="w-full max-w-5xl bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-2xl shadow-2xl flex flex-col overflow-hidden">
 
         {/* Header */}
-        <div className="flex items-center justify-between px-5 py-4 border-b border-white/10">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--editor-border)]">
           <h2 className="text-sm font-semibold text-[var(--editor-text)]">Compare versions</h2>
           <button
             onClick={onClose}

package/src/video/VideoEditor.tsx

@@ -844,6 +844,9 @@ function ReviewSurface<P extends Project>({
   // one caption id in `selectedIds` — taking the first is correct, the
   // preview only ever shows one box.
   const selectedCaptionId = selectedIds.find(id => captionIdSet.has(id)) ?? null
+  // Transport state for the context report. PreviewPlayer pushes it on a real
+  // play/pause change only, so this re-renders the surface per toggle, never per frame.
+  const [previewPlaying, setPreviewPlaying] = useState(false)
   // Publish what we are looking at, so an agent can resolve "this section".
   // No-ops entirely on a host that does not implement reportContext.
   useReportContext({
@@ -852,6 +855,7 @@ function ReviewSurface<P extends Project>({
     clock,
     selectedIds,
     selectedCaptionId,
+    playing: previewPlaying,
   })
   // Selecting a caption anywhere (timeline, preview box, or the caption list —
   // all funnel through `selectedIds` → `selectedCaptionId`) jumps the left
@@ -2115,6 +2119,7 @@ function ReviewSurface<P extends Project>({
                 onCaptionSegmentChange={handleCaptionSegmentChange}
                 engine={engine}
                 transportRef={transportRef}
+                onPlayingChange={setPreviewPlaying}
                 scrubHandleRef={scrubHandleRef}
                 hoverScrub={hoverScrub}
                 // Social-media preview chrome (mirrors CapCut's "Preview your

package/src/video/__tests__/RenderModal.hostTheme.test.tsx

@@ -0,0 +1,85 @@
+import { describe, it, expect, vi, afterEach, beforeEach } from 'vitest'
+import { render, screen, within, cleanup } from '@testing-library/react'
+import type { EditorAdapter, Project, ImageElement } from '../../types'
+import RenderModal from '../RenderModal'
+
+// The Export dialog portals to document.body, outside the editor root. A host
+// whose page text is dark (the desktop app's `text-gray-900`) must not leak
+// that colour into the dialog: the portal root sets the editor's own text
+// colour, and every control carries an explicit themed colour.
+
+afterEach(cleanup)
+
+const HOST_DARK_TEXT = 'rgb(17, 24, 39)'
+let prevColor = ''
+beforeEach(() => { prevColor = document.body.style.color; document.body.style.color = HOST_DARK_TEXT })
+afterEach(() => { document.body.style.color = prevColor })
+
+function adapter(): EditorAdapter<Project> {
+  return {
+    loadProject: vi.fn(),
+    saveProject: vi.fn(),
+    subscribe: () => () => {},
+    render: vi.fn(async function* () {}),
+    renderAsync: vi.fn(async () => ({ status: 'running' })),
+    getRenderStatus: vi.fn(async () => ({ status: 'running' as const, phase: 'rendering' as const })),
+    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) => `/files?path=${p}`,
+  } as unknown as EditorAdapter<Project>
+}
+
+function renderExport() {
+  return render(
+    <RenderModal
+      adapter={adapter()}
+      projectId="vid-1"
+      onClose={vi.fn()}
+      preRenderOptions={{
+        isHdr: false,
+        keeps: [{ start: 0, end: 12 }],
+        resolution: { value: [1080, 1920], available: [[720, 1280], [1080, 1920]], set: vi.fn() },
+      }}
+    />,
+  )
+}
+
+const THEMED_TEXT = /(^|\s)text-\[(var\(--editor-text\)|color-mix\(in_srgb,var\(--editor-text\)_\d+%,transparent\))\]/
+
+describe('Export dialog in a dark-text host', () => {
+  it('the portal root sets the editor text colour', () => {
+    renderExport()
+    const cancel = screen.getByRole('button', { name: 'Cancel' })
+    const root = cancel.closest('.fixed')
+    expect(root).not.toBeNull()
+    expect(root!.className).toMatch(/(^|\s)text-\[var\(--editor-text\)\](\s|$)/)
+  })
+
+  it('Cancel has a non-empty label and an explicit themed text colour', () => {
+    renderExport()
+    const cancel = screen.getByRole('button', { name: 'Cancel' })
+    expect(cancel.textContent?.trim()).toBe('Cancel')
+    expect(cancel.className).toMatch(THEMED_TEXT)
+  })
+
+  it('every resolution tile, 720p included, shows its dims in a themed colour', () => {
+    renderExport()
+    const group = screen.getByRole('radiogroup', { name: 'Resolution' })
+    const tile720 = within(group).getByRole('radio', { name: /720p/ })
+    const dims720 = within(tile720).getByText('720 × 1280')
+    expect(dims720.className).toMatch(THEMED_TEXT)
+    const tile1080 = within(group).getByRole('radio', { name: /1080p/ })
+    expect(within(tile1080).getByText('1080 × 1920').className).toMatch(THEMED_TEXT)
+  })
+
+  it('the selected tile uses the editor accent, not a hard-coded violet', () => {
+    renderExport()
+    const group = screen.getByRole('radiogroup', { name: 'Resolution' })
+    const active = within(group).getByRole('radio', { checked: true })
+    expect(active.className).toContain('border-[var(--editor-accent)]')
+    expect(active.className).not.toMatch(/violet|indigo/)
+  })
+})

package/src/video/__tests__/VideoEditor.context.test.tsx

@@ -22,6 +22,12 @@ describe('VideoEditor context reporting', () => {
     expect(call).toMatch(/adapter/)
   })
 
+  it('reports the transport state PreviewPlayer pushes on play/pause', () => {
+    const call = src.match(/useReportContext\(\{[\s\S]*?\}\)/)?.[0] ?? ''
+    expect(call).toMatch(/playing: previewPlaying/)
+    expect(src).toMatch(/onPlayingChange=\{setPreviewPlaying\}/)
+  })
+
   // D1: captions share `selectedIds` with clips/audio now, so `selectedCaptionId`
   // must be DERIVED from that array rather than tracked as its own `useState` —
   // a second selection model is exactly the bug a future refactor could

package/src/video/__tests__/export-limits.test.ts

@@ -163,8 +163,12 @@ describe('availableResolutionTiers', () => {
 })
 
 describe('availableFpsTiers', () => {
-  it('returns [24, 30] when settings.fps is 30', () => {
-    expect(availableFpsTiers(makeProject({ settings: { resolution: [1080, 1920], fps: 30 } }))).toEqual([24, 30])
+  it('returns [24, 30] when settings.fps is 30 and the project has a video item', () => {
+    const p = makeProject({
+      settings: { resolution: [1080, 1920], fps: 30 },
+      tracks: vtracks([videoClip()]),
+    })
+    expect(availableFpsTiers(p)).toEqual([24, 30])
   })
 
   it('returns [24, 30, 60] when settings.fps is 60', () => {
@@ -172,6 +176,27 @@ describe('availableFpsTiers', () => {
       24, 30, 60,
     ])
   })
+
+  it('offers every tier at fps 30 when the project has no video items (overlay/canvas-only)', () => {
+    const p = makeProject({
+      settings: { resolution: [1080, 1920], fps: 30 },
+      tracks: vtracks([{ id: 'o1', type: 'overlay', start: 0, end: 5 }]),
+    })
+    expect(availableFpsTiers(p)).toEqual([24, 30, 60])
+  })
+
+  it('offers every tier at fps 30 when tracks is empty (no items of any kind)', () => {
+    const p = makeProject({ settings: { resolution: [1080, 1920], fps: 30 } })
+    expect(availableFpsTiers(p)).toEqual([24, 30, 60])
+  })
+
+  it('still caps to [24, 30] for a video item missing source dims (has-video check ignores dims)', () => {
+    const p = makeProject({
+      settings: { resolution: [1080, 1920], fps: 30 },
+      tracks: vtracks([videoClip()]),
+    })
+    expect(availableFpsTiers(p)).toEqual([24, 30])
+  })
 })
 
 describe('currentResolutionTier', () => {

package/src/video/__tests__/use-report-context.test.tsx

@@ -26,7 +26,7 @@ describe('useReportContext', () => {
       selectedIds: [], selectedCaptionId: null,
     }))
     expect(reportContext).toHaveBeenCalledWith('p1', {
-      playheadSec: 4, selectedIds: [], selectedCaptionId: null,
+      playheadSec: 4, selectedIds: [], selectedCaptionId: null, playing: false,
     })
   })
 
@@ -71,6 +71,27 @@ describe('useReportContext', () => {
     expect(reportContext.mock.calls[0][1].selectedIds).toEqual(['c3'])
   })
 
+  it('reports play and pause immediately, carrying the playhead', () => {
+    const reportContext = vi.fn().mockResolvedValue(undefined)
+    const clock = createPlaybackClock()
+    const adapter = { reportContext } as never
+    const { rerender } = renderHook(
+      (props: { playing: boolean }) => useReportContext({
+        adapter, projectId: 'p1', clock,
+        selectedIds: [], selectedCaptionId: null, playing: props.playing,
+      }),
+      { initialProps: { playing: false } },
+    )
+    reportContext.mockClear()
+    rerender({ playing: true })
+    expect(reportContext).toHaveBeenCalledTimes(1)
+    expect(reportContext.mock.calls[0][1].playing).toBe(true)
+    act(() => { clock.set(2.5) })
+    rerender({ playing: false })
+    expect(reportContext).toHaveBeenCalledTimes(2)
+    expect(reportContext.mock.calls[1][1]).toMatchObject({ playing: false, playheadSec: 2.5 })
+  })
+
   it('swallows a rejected report — context sync never breaks the editor', async () => {
     const reportContext = vi.fn().mockRejectedValue(new Error('serve is down'))
     const clock = createPlaybackClock()

package/src/video/export-limits.ts

@@ -31,6 +31,21 @@ function maxSourceShortSide(project: Project): number | undefined {
   return max
 }
 
+/** Whether the project has any video item at all (regardless of whether its
+ *  source dims are known). Canvas/animation projects — overlays, images,
+ *  audio, no footage — have no source fps to protect and render cleanly at
+ *  any fps, so `availableFpsTiers` uses this (not `maxSourceShortSide`, which
+ *  also returns undefined for a video item with unknown dims) to decide
+ *  whether the fps cap applies at all. */
+function hasVideoItem(project: Project): boolean {
+  for (const items of trackItems(project)) {
+    for (const item of items) {
+      if (item.type === 'video') return true
+    }
+  }
+  return false
+}
+
 /** Converts a short-side tier to [w,h], preserving the project's aspect and
  *  orientation. Long side is rounded to the nearest EVEN integer (encoders
  *  demand even dims). */
@@ -79,8 +94,14 @@ export function availableResolutionTiers(project: Project): Array<[number, numbe
 }
 
 /** Every fps tier offerable in the export dialog, filtered to the source cap
- *  and ordered ascending. Always non-empty. */
+ *  and ordered ascending. Always non-empty.
+ *
+ *  The cap only protects source footage, so a project with no video items at
+ *  all — overlays/images/audio only, e.g. a canvas/animation project — has
+ *  nothing to protect and offers every standard tier uncapped. */
 export function availableFpsTiers(project: Project): number[] {
+  if (!hasVideoItem(project)) return [...STANDARD_FPS_TIERS]
+
   const cap = maxExportFps(project)
   const tiers = STANDARD_FPS_TIERS.filter(f => f <= cap)
   return tiers.length > 0 ? tiers : [cap]

package/src/video/preview/PreviewPlayer.tsx

@@ -85,6 +85,11 @@ interface PreviewPlayerProps {
    * engine). Absent → no-op; nothing reads or writes it.
    */
   transportRef?: MutableRefObject<TransportHandle | null>
+  /**
+   * Called with the transport's playing state whenever it changes (and once on
+   * mount), from whichever playback path is active. Absent → no-op.
+   */
+  onPlayingChange?: (playing: boolean) => void
   /**
    * The audible drag-scrub source's engine seam — mirrors `transportRef`.
    * Absent → no-op; nothing reads or writes it.
@@ -314,6 +319,7 @@ function PreviewSurface({
   onCaptionSegmentChange,
   engine,
   transportRef,
+  onPlayingChange,
   scrubHandleRef,
   socialPreview,
   muted,
@@ -378,6 +384,14 @@ function PreviewSurface({
     return () => { transportRef.current = null }
   }, [transportRef, togglePlay, isPlaying, setRate])
 
+  // Push play/pause to the host. Held in a ref so a new callback identity
+  // never re-fires it; only a real `isPlaying` change does.
+  const onPlayingChangeRef = useRef(onPlayingChange)
+  onPlayingChangeRef.current = onPlayingChange
+  useEffect(() => {
+    onPlayingChangeRef.current?.(isPlaying)
+  }, [isPlaying])
+
   // The scrub seam: only the engine path can decode a grain, so the legacy
   // `<video>` fallback simply never fills this — that absence is the audible
   // drag-scrub's capability gate. `acquireDemux` is a stable-identity callback

package/src/video/preview/SocialPreviewMenu.tsx

@@ -145,7 +145,7 @@ export default function SocialPreviewMenu({ anchorRef, value, onChange, onClose,
       ref={popoverRef}
       role="menu"
       aria-label="Preview for social media"
-      className="fixed z-[100] w-64 rounded-xl border border-[var(--editor-border)] bg-[var(--editor-surface)] shadow-2xl p-2 flex flex-col gap-1"
+      className="fixed z-[100] w-64 rounded-xl border border-[var(--editor-border)] bg-[var(--editor-surface)] shadow-2xl p-2 flex flex-col gap-1 text-[var(--editor-text)]"
       style={{
         left: position?.left ?? -9999,
         top: position?.top ?? -9999,

package/src/video/preview/__tests__/PreviewPlayer.playing.test.tsx

@@ -0,0 +1,62 @@
+/**
+ * `onPlayingChange` — PreviewPlayer pushes the ACTIVE transport's playing
+ * state to the host (VideoEditor feeds it to the agent context report). Driven
+ * through the same `transportRef` seam the keymap uses, on a canvas project so
+ * play/pause is a pure state flip with no media element in the way.
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, act } from '@testing-library/react'
+import type { MutableRefObject } from 'react'
+import PreviewPlayer, { type TransportHandle } from '../PreviewPlayer'
+import { createPlaybackClock } from '../../playback-clock'
+import type { EditorProject as Project } from '../../../schema'
+
+function makeCanvasProject(): Project {
+  return {
+    id: 'p-canvas',
+    status: 'draft',
+    settings: { resolution: [1080, 1920], fps: 30 },
+    tracks: [[{ id: 'o1', type: 'overlay', src: 'a.jsx', start: 0, end: 4, props: {} }]],
+  } as unknown as Project
+}
+
+beforeEach(() => {
+  vi.spyOn(console, 'error').mockImplementation(() => {})
+  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  ;(globalThis as unknown as { AudioContext: unknown }).AudioContext = class {
+    state = 'running'
+    createGain() { return { gain: { value: 1 }, connect() {}, disconnect() {} } }
+    createMediaElementSource() { return { connect() {}, disconnect() {} } }
+    get destination() { return {} }
+    resume() { return Promise.resolve() }
+    close() {}
+  }
+})
+afterEach(() => { vi.restoreAllMocks() })
+
+describe('PreviewPlayer onPlayingChange', () => {
+  it('reports paused on mount, then each real play/pause change', () => {
+    const transportRef: MutableRefObject<TransportHandle | null> = { current: null }
+    const onPlayingChange = vi.fn()
+    render(
+      <PreviewPlayer
+        project={makeCanvasProject()}
+        clock={createPlaybackClock(0)}
+        compileOverlay={async () => (() => null) as never}
+        fileUrl={(p) => p}
+        transportRef={transportRef}
+        onPlayingChange={onPlayingChange}
+      />,
+    )
+    expect(onPlayingChange.mock.calls).toEqual([[false]])
+    act(() => { transportRef.current!.togglePlay() })
+    expect(onPlayingChange.mock.lastCall).toEqual([true])
+    act(() => { transportRef.current!.togglePlay() })
+    expect(onPlayingChange.mock.lastCall).toEqual([false])
+    expect(onPlayingChange).toHaveBeenCalledTimes(3)
+  })
+})

package/src/video/timeline/TrackSettingsPopover.tsx

@@ -174,7 +174,7 @@ export default function TrackSettingsPopover({
       ref={popoverRef}
       role="dialog"
       aria-label={title}
-      className="fixed z-[100] w-64 rounded-lg border border-[var(--editor-border)] bg-[var(--editor-surface)] shadow-2xl p-3 flex flex-col gap-3"
+      className="fixed z-[100] w-64 rounded-lg border border-[var(--editor-border)] bg-[var(--editor-surface)] shadow-2xl p-3 flex flex-col gap-3 text-[var(--editor-text)]"
       style={{
         left: position?.left ?? -9999,
         top: position?.top ?? -9999,

package/src/video/use-report-context.ts

@@ -23,6 +23,8 @@ interface Options {
   clock: PlaybackClock
   selectedIds: string[]
   selectedCaptionId: string | null
+  /** Transport state. Reported like selection: at once, on change. */
+  playing?: boolean
 }
 
 /**
@@ -36,12 +38,12 @@ interface Options {
  * selection.
  */
 export function useReportContext({
-  adapter, projectId, clock, selectedIds, selectedCaptionId,
+  adapter, projectId, clock, selectedIds, selectedCaptionId, playing = false,
 }: Options): void {
   // Kept in a ref so the interval effect never re-subscribes on a selection
   // change — it always reads the latest values without depending on them.
-  const latest = useRef({ selectedIds, selectedCaptionId })
-  latest.current = { selectedIds, selectedCaptionId }
+  const latest = useRef({ selectedIds, selectedCaptionId, playing })
+  latest.current = { selectedIds, selectedCaptionId, playing }
 
   const send = useRef<(ctx: EditorContext) => void>(() => {})
   send.current = (ctx: EditorContext) => {
@@ -58,18 +60,19 @@ export function useReportContext({
       playheadSec:       clock.get(),
       selectedIds:       latest.current.selectedIds,
       selectedCaptionId: latest.current.selectedCaptionId,
+      playing:           latest.current.playing,
     })
     emit()
     const id = setInterval(emit, REPORT_INTERVAL_MS)
     return () => clearInterval(id)
   }, [adapter, projectId, clock])
 
-  // Selection, immediately on change. Skips the mount emit above by comparing
-  // against what the interval effect already sent.
+  // Selection and play/pause, immediately on change. Skips the mount emit
+  // above by comparing against what the interval effect already sent.
   const mounted = useRef(false)
   useEffect(() => {
     if (!adapter.reportContext) return
     if (!mounted.current) { mounted.current = true; return }
-    send.current({ playheadSec: clock.get(), selectedIds, selectedCaptionId })
-  }, [adapter, clock, selectedIds, selectedCaptionId])
+    send.current({ playheadSec: clock.get(), selectedIds, selectedCaptionId, playing })
+  }, [adapter, clock, selectedIds, selectedCaptionId, playing])
 }