@bycrux/editor 1.2.1 → 1.3.0

package/src/video/CaptionRegenModal.tsx

@@ -1,21 +1,35 @@
 import { useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import type { EditorAdapter, Project } from '../types'
+import type { CaptionProfileDefaults, EditorAdapter, Project } from '../types'
 import type { Captions } from '../schema'
+import { resolveCaptionProfileDefaults } from './captionProfileDefaults'
 
 interface CaptionRegenModalProps<P extends Project = Project> {
   projectId: string
   /** Adapter driving the caption-regeneration stream. Must implement
    *  `generateCaptions` — callers gate rendering on its presence. */
   adapter: EditorAdapter<P>
+  /** The project's attached profile name (`Project.profile`), if it has one.
+   *  Passed to `adapter.getCaptionProfileDefaults` to seed the new track's
+   *  style/font/color. Absent — or a host with no such seam — and the run is
+   *  byte-identical to what it was before profile seeding existed. */
+  profile?: string
   /** Caption rows the project has right now (`maxCaptionLane(segments) + 1`,
    *  so 1 for a lane-less or empty track). Regeneration replaces the whole
    *  track with a single fresh row, so this is the count the warning banner
    *  below reports as about to be discarded. */
   existingRowCount: number
-  /** Fired on terminal success with the freshly transcribed caption track. The
-   *  caller patches `project.captions` from this; the modal then closes. */
-  onDone: (captions: Captions) => void
+  /** Fired on terminal success with the freshly transcribed caption track,
+   *  plus whatever the host answered for `profile` (null when it answered
+   *  nothing). The caller patches `project.captions` from the first and folds
+   *  the second onto it — see `mergeCaptionProfileDefaults`. The modal then
+   *  closes.
+   *
+   *  The defaults are handed OVER rather than re-fetched by the caller so the
+   *  profile is resolved exactly once per run: the modal already had to ask
+   *  before the stream started (it needs the style for the request), and a
+   *  second lookup at apply time could answer differently. */
+  onDone: (captions: Captions, profileDefaults: CaptionProfileDefaults | null) => void
   /** Fired when the modal closes (cancel, error dismiss, or post-done). */
   onClose: () => void
   /** Editor theme mode — light/dark. The panel and log box follow
@@ -25,7 +39,7 @@ interface CaptionRegenModalProps<P extends Project = Project> {
 }
 
 function LogLine({ text, mode = 'dark' }: { text: string; mode?: 'light' | 'dark' }) {
-  let color = 'text-[var(--editor-text)]/60'
+  let color = 'text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]'
   if (/ready|complete|done|transcribed/i.test(text))      color = mode === 'light' ? 'text-green-700' : 'text-green-400'
   else if (/transcrib|detecting|loading|model/i.test(text)) color = mode === 'light' ? 'text-sky-700' : 'text-sky-400'
   else if (/extract|building|composing|mixing/i.test(text)) color = mode === 'light' ? 'text-amber-700' : 'text-amber-400'
@@ -38,7 +52,7 @@ function LogLine({ text, mode = 'dark' }: { text: string; mode?: 'light' | 'dark
   )
 }
 
-export default function CaptionRegenModal<P extends Project = Project>({ projectId, adapter, existingRowCount, onDone, onClose, mode = 'dark' }: CaptionRegenModalProps<P>) {
+export default function CaptionRegenModal<P extends Project = Project>({ projectId, adapter, profile, existingRowCount, onDone, onClose, mode = 'dark' }: CaptionRegenModalProps<P>) {
   const [logs, setLogs]     = useState<string[]>([])
   const [status, setStatus] = useState<'running' | 'done' | 'error'>('running')
   const [errorMsg, setError] = useState<string | null>(null)
@@ -66,13 +80,25 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
 
     void (async () => {
       try {
-        for await (const ev of adapter.generateCaptions!(projectId)) {
+        // Seeding, before anything is spawned: the style has to be on the
+        // request, so this one await sits in front of the stream. It cannot
+        // reject (see `resolveCaptionProfileDefaults`) and it cannot stop the
+        // run — a host with no profile seam, or a lookup that failed, simply
+        // produces `null` and everything below behaves exactly as it did
+        // before this existed, down to the arity of the call.
+        const profileDefaults = await resolveCaptionProfileDefaults(adapter, profile)
+        if (unmountedRef.current || cancelledRef.current) return
+        const stream = profileDefaults?.style
+          ? adapter.generateCaptions!(projectId, { style: profileDefaults.style })
+          : adapter.generateCaptions!(projectId)
+
+        for await (const ev of stream) {
           if (unmountedRef.current || cancelledRef.current) break
           if (ev.type === 'log') {
             setLogs(l => [...l, ev.message])
           } else if (ev.type === 'done') {
             setStatus('done')
-            onDone(ev.captions)
+            onDone(ev.captions, profileDefaults)
           } else {
             setError(ev.message)
             setStatus('error')
@@ -94,7 +120,7 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
         unmountedRef.current = true
       }, 0)
     }
-  }, [projectId, adapter, onDone])
+  }, [projectId, adapter, profile, onDone])
 
   // Auto-scroll logs
   useEffect(() => {
@@ -139,13 +165,13 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
                   question about why a clip's audio showed up in the
                   captions. Read at generation time only: unmuting later just
                   means the next run sees it. */}
-              <p className="text-[11px] text-[var(--editor-text)]/50">
+              <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">
                 Transcribes everything audible on the timeline. Muted clips and tracks are skipped.
               </p>
             </div>
           </div>
           {status !== 'running' && (
-            <button onClick={onClose} className="text-[var(--editor-text)]/55 hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
+            <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>
           )}
         </div>
 
@@ -163,17 +189,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-[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"
+            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-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[var(--editor-text)] hover:border-[var(--editor-border)] transition-colors"
             title="Copy logs"
           >
             Copy
           </button>
           <div
             ref={logRef}
-            className="h-96 overflow-y-auto px-4 py-3 font-mono text-[11px] text-[var(--editor-text)]/80 bg-[var(--editor-surface)] flex flex-col gap-0.5"
+            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-[var(--editor-text)]/40 italic">Starting transcription…</span>
+              <span className="text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] italic">Starting transcription…</span>
             )}
             {logs.map((line, i) => (
               <LogLine key={i} text={line} mode={mode} />
@@ -189,7 +215,7 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
           {status === 'running' ? (
             <button
               onClick={handleCancel}
-              className={`text-sm px-4 py-1.5 rounded-md bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)]/80 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>

package/src/video/CaptionStyleGallery.tsx

@@ -449,7 +449,7 @@ export function CaptionStyleCard({
         </div>
       )}
 
-      {/* NOT `text-[var(--editor-text)]/60` — Tailwind cannot generate an
+      {/* NOT `text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]` — Tailwind cannot generate an
           opacity modifier on an arbitrary var() colour, so that class is a
           silent no-op. See the long note in CaptionListPanel.tsx. */}
       <span

package/src/video/CommandPalette.tsx

@@ -103,7 +103,7 @@ export default function CommandPalette({ commands, initialMode = 'list', onGoToT
       >
         {mode === 'goto' ? (
           <div className="flex flex-col gap-2 px-4 py-3">
-            <span className="text-xs font-medium text-[var(--editor-text)]/60">Go to time</span>
+            <span className="text-xs font-medium text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Go to time</span>
             <input
               ref={inputRef}
               type="text"
@@ -111,14 +111,14 @@ export default function CommandPalette({ commands, initialMode = 'list', onGoToT
               onChange={(e) => { setGotoValue(e.target.value); setGotoError(false) }}
               onKeyDown={handleGotoKeyDown}
               placeholder="mm:ss, hh:mm:ss, or seconds"
-              className="w-full bg-transparent text-sm text-[var(--editor-text)] placeholder-[var(--editor-text)]/25 outline-none border border-[var(--editor-border)] rounded px-2 py-1.5"
+              className="w-full bg-transparent text-sm text-[var(--editor-text)] placeholder-[color-mix(in_srgb,var(--editor-text)_25%,transparent)] outline-none border border-[var(--editor-border)] rounded px-2 py-1.5"
             />
             {gotoError && <span className={`text-xs ${themeMode === 'light' ? 'text-red-600' : 'text-red-400'}`}>Couldn&rsquo;t parse that timecode</span>}
           </div>
         ) : (
           <>
             <div className="flex items-center gap-2 px-4 py-3 border-b border-[var(--editor-border)]">
-              <Search size={14} className="text-[var(--editor-text)]/60 shrink-0" />
+              <Search size={14} className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] shrink-0" />
               <input
                 ref={inputRef}
                 type="text"
@@ -126,12 +126,12 @@ export default function CommandPalette({ commands, initialMode = 'list', onGoToT
                 onChange={(e) => setQuery(e.target.value)}
                 onKeyDown={handleListKeyDown}
                 placeholder="Type a command…"
-                className="w-full bg-transparent text-sm text-[var(--editor-text)] placeholder-[var(--editor-text)]/25 outline-none"
+                className="w-full bg-transparent text-sm text-[var(--editor-text)] placeholder-[color-mix(in_srgb,var(--editor-text)_25%,transparent)] outline-none"
               />
             </div>
             <div className="max-h-80 overflow-y-auto py-1">
               {filtered.length === 0 && (
-                <div className="px-4 py-3 text-xs text-[var(--editor-text)]/35">No matching commands</div>
+                <div className="px-4 py-3 text-xs text-[color-mix(in_srgb,var(--editor-text)_35%,transparent)]">No matching commands</div>
               )}
               {filtered.map((cmd, i) => (
                 <button
@@ -140,14 +140,14 @@ export default function CommandPalette({ commands, initialMode = 'list', onGoToT
                   onMouseEnter={() => setHighlight(i)}
                   onClick={() => { cmd.run(); onClose() }}
                   className={`w-full flex items-center justify-between gap-3 px-4 py-2 text-left text-sm transition-colors ${
-                    i === highlight ? 'bg-[var(--editor-text)]/10 text-[var(--editor-text)]' : 'text-[var(--editor-text)]/70'
+                    i === highlight ? 'bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)] text-[var(--editor-text)]' : 'text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]'
                   }`}
                 >
                   <span>{cmd.label}</span>
                   {cmd.keyHint && cmd.keyHint.length > 0 && (
                     <span className="flex items-center gap-1 shrink-0">
                       {cmd.keyHint.map((k, j) => (
-                        <kbd key={j} className="text-[10px] font-mono px-1.5 py-0.5 rounded border border-[var(--editor-border)] text-[var(--editor-text)]/60">
+                        <kbd key={j} className="text-[10px] font-mono px-1.5 py-0.5 rounded border border-[var(--editor-border)] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
                           {k}
                         </kbd>
                       ))}

package/src/video/ImageToneMenu.tsx

@@ -63,7 +63,7 @@ export default function ImageToneMenu({ value, onChange, variant = 'icon', mode
           title="How photos and logos are converted for the HDR render"
           aria-haspopup="menu"
           aria-expanded={open}
-          className="flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)]/80 hover:text-[var(--editor-text)] transition-colors"
+          className="flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] hover:text-[var(--editor-text)] transition-colors"
         >
           <Palette size={12} className="opacity-70" />
           <span className="opacity-60">Image color:</span>
@@ -79,7 +79,7 @@ export default function ImageToneMenu({ value, onChange, variant = 'icon', mode
           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-text)]/60 bg-transparent hover:text-[var(--editor-text)]'
+              : 'text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] bg-transparent hover:text-[var(--editor-text)]'
           }`}
         >
           <Palette size={12} />
@@ -91,9 +91,9 @@ export default function ImageToneMenu({ value, onChange, variant = 'icon', mode
           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`}
         >
-          <p className="px-2 pt-1 pb-1.5 text-[11px] font-semibold text-[var(--editor-text)]/80">
+          <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-[var(--editor-text)]/50">
+            <span className="block font-normal text-[10px] text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">
               How photos and logos are converted for the HDR render.
             </span>
           </p>
@@ -108,7 +108,7 @@ export default function ImageToneMenu({ value, onChange, variant = 'icon', mode
                 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-transparent hover:bg-[var(--editor-text)]/5'
+                    : 'border-transparent hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]'
                 }`}
               >
                 <img
@@ -120,10 +120,10 @@ export default function ImageToneMenu({ value, onChange, variant = 'icon', mode
                   <span className="text-xs font-semibold text-[var(--editor-text)] flex items-center gap-1.5">
                     {tone.label}
                     {tone.id === DEFAULT_IMAGE_TONE && (
-                      <span className="text-[9px] font-normal px-1 py-px rounded bg-[var(--editor-text)]/10 text-[var(--editor-text)]/55">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)_55%,transparent)]">default</span>
                     )}
                   </span>
-                  <span className="text-[10px] leading-snug text-[var(--editor-text)]/60">
+                  <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
                     {tone.summary}
                   </span>
                 </span>

package/src/video/OverlayInspector.tsx

@@ -216,9 +216,9 @@ function normalizeDegrees(deg: number): number {
 
 // ── Shared chrome ────────────────────────────────────────────────────────
 
-const ROW_LABEL_CLASS = 'w-14 shrink-0 text-[11px] text-[var(--editor-text)]/55'
+const ROW_LABEL_CLASS = 'w-14 shrink-0 text-[11px] text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]'
 const ICON_BUTTON_CLASS =
-  'flex h-5 w-5 shrink-0 items-center justify-center rounded text-[var(--editor-text)]/45 transition-colors hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)] disabled:pointer-events-none disabled:opacity-25'
+  'flex h-5 w-5 shrink-0 items-center justify-center rounded text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)] transition-colors hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)] disabled:pointer-events-none disabled:opacity-25'
 
 function IconButton({
   label,
@@ -282,10 +282,10 @@ function KeyframeNav({
           // invites a support question; one that is visibly unavailable and
           // says why reads as a limitation, which is what it is.
           diamondDisabled
-            ? 'cursor-not-allowed text-[var(--editor-text)]/20'
+            ? 'cursor-not-allowed text-[color-mix(in_srgb,var(--editor-text)_20%,transparent)]'
             : pressed
               ? 'text-[var(--editor-accent)]'
-              : 'text-[var(--editor-text)]/40 hover:text-[var(--editor-text)]/70',
+              : 'text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]',
         )}
       >
         <Diamond size={11} fill={pressed ? 'currentColor' : 'none'} />
@@ -518,7 +518,7 @@ export default function OverlayInspector({ item, clock, onPreview, onCommit, onC
   if (!canKeyframe(item)) {
     return (
       <div className={SECTION_CLASS}>
-        <div className="px-3 py-6 text-center text-[11px] text-[var(--editor-text)]/45">
+        <div className="px-3 py-6 text-center text-[11px] text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)]">
           Select an overlay to edit its properties.
         </div>
       </div>
@@ -769,7 +769,7 @@ export default function OverlayInspector({ item, clock, onPreview, onCommit, onC
           only hosts the ALL-properties actions (reset-all + keyframe-all); the
           muted "All" scopes them apart from each row's own per-property unit. */}
       <div className="shrink-0 flex items-center gap-1 border-b border-[var(--editor-border)] px-2 py-1.5">
-        <span className="px-1 py-0.5 text-[10px] font-medium uppercase tracking-wide text-[var(--editor-text)]/40">
+        <span className="px-1 py-0.5 text-[10px] font-medium uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]">
           All
         </span>
         <div className="ml-auto flex items-center gap-1">
@@ -857,7 +857,7 @@ export default function OverlayInspector({ item, clock, onPreview, onCommit, onC
             (Space/Enter both fire click), so it needs no key handler of its
             own — only a visible focus ring. */}
         <div className="flex items-center gap-2">
-          <span className="shrink-0 text-[11px] text-[var(--editor-text)]/55">Uniform scale</span>
+          <span className="shrink-0 text-[11px] text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]">Uniform scale</span>
           <button
             type="button"
             role="checkbox"