@bycrux/editor 1.2.2 → 1.3.0

package/src/text/FontPicker.tsx

@@ -221,14 +221,14 @@ export function FontFamilyPicker({ value, onChange, disabled, className, buttonC
                       setOpen(false)
                     }}
                     style={{ fontFamily: opt.value }}
-                    className={`flex w-full items-center justify-between px-3 py-2 text-left text-[15px] leading-tight text-[var(--editor-text)] hover:bg-[var(--editor-accent)]/20 focus:bg-[var(--editor-accent)]/20 focus:outline-none ${
-                      isActive ? 'bg-[var(--editor-accent)]/20 font-medium' : ''
+                    className={`flex w-full items-center justify-between px-3 py-2 text-left text-[15px] leading-tight text-[var(--editor-text)] hover:bg-[color-mix(in_srgb,var(--editor-accent)_20%,transparent)] focus:bg-[color-mix(in_srgb,var(--editor-accent)_20%,transparent)] focus:outline-none ${
+                      isActive ? 'bg-[color-mix(in_srgb,var(--editor-accent)_20%,transparent)] font-medium' : ''
                     }`}
                   >
                     <span className="truncate">{opt.label}</span>
                     {isActive && (
                       <span
-                        className="ml-2 shrink-0 text-xs text-[var(--editor-text)]/60"
+                        className="ml-2 shrink-0 text-xs text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]"
                         style={{ fontFamily: 'system-ui, sans-serif' }}
                       >
                         ✓

package/src/text/TextFormattingToolbar.tsx

@@ -106,7 +106,7 @@ export function TextFormattingToolbar({
   // toward the surface tone. One look for B / I / case / align across the bar.
   const toolbarBtnBase = 'flex h-7 min-w-[1.75rem] items-center justify-center rounded-md border px-1.5 text-sm transition-colors focus:outline-none focus:ring-1 focus:ring-[var(--editor-accent)]'
   const toolbarBtnActive = 'border-[var(--editor-accent)] bg-[var(--editor-accent)] text-[var(--editor-accent-foreground)]'
-  const toolbarBtnInactive = 'border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)]/70 hover:text-[var(--editor-text)] hover:border-[var(--editor-accent)]'
+  const toolbarBtnInactive = 'border-[var(--editor-border)] bg-[var(--editor-surface)] text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)] hover:text-[var(--editor-text)] hover:border-[var(--editor-accent)]'
 
   // Segment visibility helpers — group toggles vs size/font vs alignment.
   const hasLeftGroup = supported.has('fontWeight') || supported.has('fontStyle') || supported.has('textTransform') || supported.has('color')
@@ -233,7 +233,7 @@ export function TextFormattingToolbar({
         )}
 
         {!hasAnyControlProp && (
-          <span className="px-1 py-1 text-xs text-[var(--editor-text)]/55">
+          <span className="px-1 py-1 text-xs text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]">
             Edit via property panel
           </span>
         )}
@@ -243,7 +243,7 @@ export function TextFormattingToolbar({
             type="button"
             aria-label="Delete text overlay"
             onClick={onDelete}
-            className={`${toolbarBtnBase} border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)]/60 ${mode === 'light' ? 'hover:border-red-300 hover:bg-red-50 hover:text-red-700' : 'hover:border-red-500/50 hover:bg-red-900/30 hover:text-red-400'}`}
+            className={`${toolbarBtnBase} border-[var(--editor-border)] bg-[var(--editor-surface)] text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] ${mode === 'light' ? 'hover:border-red-300 hover:bg-red-50 hover:text-red-700' : 'hover:border-red-500/50 hover:bg-red-900/30 hover:text-red-400'}`}
           >
             <Trash2 className="h-3.5 w-3.5" />
           </button>

package/src/types.ts

@@ -1038,6 +1038,22 @@ export interface VideoEditorProps<P extends Project = Project> {
   slots?: EditorSlots
   readOnly?: boolean
   onBackToSetup?: () => void
+  /**
+   * What renders while `project.status === 'pending'`:
+   * - `'default'` — the built-in pending surface (agent prompt, `slots.pendingStatus`,
+   *   project id, back-to-setup).
+   * - `'host'` — the full editor, exactly as for a draft. The editor draws no
+   *   pending UI of its own; any gate or overlay is the host's. `onBackToSetup`
+   *   and `slots.pendingStatus` are unused in this mode.
+   * Defaults to `'default'`.
+   */
+  pendingSurface?: 'default' | 'host'
+  /**
+   * Called on every edit the user makes (edits, finished gestures, undo, redo),
+   * never for server frames. Lets a host tell its own user's edits from an
+   * agent's writes. Fires on every edit; the host dedupes.
+   */
+  onUserEdit?: () => void
   /**
    * Where the host's `slots.assetsPanel` is placed in the review layout:
    * - `'sidebar'` — stacked inside the right-hand version/run-history rail, below

package/src/ui/Loader.tsx

@@ -56,7 +56,7 @@ export function Loader({ size = 'md', label, className = '' }: LoaderProps) {
           <path d="M43 14 l7 10 h7 l-7 -10 z" fill="#facc15" />
         </g>
       </svg>
-      {label && <span className="text-[11px] text-[var(--editor-text)]/50">{label}</span>}
+      {label && <span className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">{label}</span>}
     </div>
   )
 }

package/src/ui/NumberField.tsx

@@ -196,7 +196,7 @@ export function NumberField({
   return (
     <div className="flex shrink-0 items-center gap-1">
       {prefix && (
-        <span aria-hidden="true" className="w-2 shrink-0 text-[10px] text-[var(--editor-text)]/40">
+        <span aria-hidden="true" className="w-2 shrink-0 text-[10px] text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]">
           {prefix}
         </span>
       )}
@@ -218,7 +218,7 @@ export function NumberField({
         className={cn(inspectorInputClass, 'text-right disabled:opacity-50 disabled:cursor-not-allowed', className)}
       />
       {unit && (
-        <span aria-hidden="true" className="text-[10px] text-[var(--editor-text)]/40">
+        <span aria-hidden="true" className="text-[10px] text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]">
           {unit}
         </span>
       )}
@@ -238,7 +238,7 @@ export function NumberField({
  *  than only being dimmed for show. */
 function Stepper({ name, onStep, disabled }: { name: string; onStep: (direction: 1 | -1) => void; disabled?: boolean }) {
   const btn = cn(
-    'flex h-3 w-4 items-center justify-center rounded-sm text-[var(--editor-text)]/45 transition-colors',
+    'flex h-3 w-4 items-center justify-center rounded-sm text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)] transition-colors',
     disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)]',
   )
   return (

package/src/ui/SwatchInput.tsx

@@ -50,7 +50,7 @@ export function SwatchInput({
         />
       </label>
       {showValue && (
-        <span className="font-mono text-sm uppercase text-[var(--editor-text)]/80">{value}</span>
+        <span className="font-mono text-sm uppercase text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)]">{value}</span>
       )}
     </div>
   )

package/src/ui/Tooltip.tsx

@@ -103,7 +103,7 @@ export function Tooltip({ label, keys, side = 'top', className, children }: Tool
           {keys?.map((k, i) => (
             <kbd
               key={i}
-              className="rounded border border-[var(--editor-border)] bg-[var(--editor-text)]/10 px-1 py-0.5 font-mono text-[9px] leading-none text-[var(--editor-text)]/70"
+              className="rounded border border-[var(--editor-border)] bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)] px-1 py-0.5 font-mono text-[9px] leading-none text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]"
             >
               {k}
             </kbd>

package/src/ui/input.tsx

@@ -12,7 +12,7 @@ export function Input({ className, ...props }: InputProps) {
   return (
     <input
       className={cn(
-        'flex h-9 w-full rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-3 py-1 text-sm text-[var(--editor-text)] placeholder:text-[var(--editor-text)]/60 focus:outline-none focus:ring-2 focus:ring-[var(--editor-accent)] disabled:opacity-50',
+        'flex h-9 w-full rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-3 py-1 text-sm text-[var(--editor-text)] placeholder:text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] focus:outline-none focus:ring-2 focus:ring-[var(--editor-accent)] disabled:opacity-50',
         className,
       )}
       {...props}

package/src/ui/label.tsx

@@ -3,7 +3,7 @@ import { cn } from './utils'
 export function Label({ className, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>) {
   return (
     <label
-      className={cn('text-xs font-medium text-[var(--editor-text)]/60 leading-none', className)}
+      className={cn('text-xs font-medium text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] leading-none', className)}
       {...props}
     />
   )

package/src/ui/textarea.tsx

@@ -6,7 +6,7 @@ export function Textarea({ className, ...props }: TextareaProps) {
   return (
     <textarea
       className={cn(
-        'flex w-full rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-3 py-2 text-sm text-[var(--editor-text)] placeholder:text-[var(--editor-text)]/60 focus:outline-none focus:ring-2 focus:ring-[var(--editor-accent)] disabled:opacity-50 resize-none',
+        'flex w-full rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-3 py-2 text-sm text-[var(--editor-text)] placeholder:text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] focus:outline-none focus:ring-2 focus:ring-[var(--editor-accent)] disabled:opacity-50 resize-none',
         className,
       )}
       {...props}

package/src/video/AudioPolishModal.tsx

@@ -691,7 +691,7 @@ export default function AudioPolishModal<P extends Project = Project>({
         <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--editor-border)]">
           <div className="flex flex-col gap-0.5">
             <h2 className="text-sm font-semibold text-[var(--editor-text)]">Polish audio</h2>
-            <p className="text-[11px] text-[var(--editor-text)]/55">
+            <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]">
               {targets.length === 1
                 ? '1 clip in scope. Nothing is saved until you press Apply.'
                 : `${targets.length} clips in scope. Nothing is saved until you press Apply.`}
@@ -700,7 +700,7 @@ export default function AudioPolishModal<P extends Project = Project>({
           <button
             onClick={handleCancel}
             aria-label="Close"
-            className="text-[var(--editor-text)]/55 hover:text-[var(--editor-text)] transition-colors text-lg leading-none"
+            className="text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)] hover:text-[var(--editor-text)] transition-colors text-lg leading-none"
           >
             ×
           </button>
@@ -712,7 +712,7 @@ export default function AudioPolishModal<P extends Project = Project>({
             {PIECES.map(p => (
               <label
                 key={p.id}
-                className="flex items-start gap-2 rounded-lg border border-[var(--editor-border)] p-2.5 cursor-pointer hover:bg-[var(--editor-text)]/5 transition-colors"
+                className="flex items-start gap-2 rounded-lg border border-[var(--editor-border)] p-2.5 cursor-pointer hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)] transition-colors"
               >
                 <input
                   type="checkbox"
@@ -723,7 +723,7 @@ export default function AudioPolishModal<P extends Project = Project>({
                 />
                 <span className="flex flex-col gap-0.5 min-w-0">
                   <span className="text-xs font-semibold text-[var(--editor-text)]">{p.label}</span>
-                  <span className="text-[10px] leading-snug text-[var(--editor-text)]/55">{p.blurb}</span>
+                  <span className="text-[10px] leading-snug text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]">{p.blurb}</span>
                   {phase === 'review' && pieces[p.id] && !analysedPieces[p.id] && (
                     <span className={`text-[10px] ${mode === 'light' ? 'text-amber-700' : 'text-amber-400'}`}>Not analysed yet. Run Analyse again.</span>
                   )}
@@ -734,7 +734,7 @@ export default function AudioPolishModal<P extends Project = Project>({
 
           <div className="flex flex-wrap items-end gap-4">
             <label className="flex flex-col gap-1.5">
-              <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">
                 Spoken language
               </span>
               <select
@@ -747,13 +747,13 @@ export default function AudioPolishModal<P extends Project = Project>({
                   <option key={l.id} value={l.id}>{l.label}</option>
                 ))}
               </select>
-              <span className="text-[10px] text-[var(--editor-text)]/45 max-w-[15rem] leading-snug">
+              <span className="text-[10px] text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)] max-w-[15rem] leading-snug">
                 Set this before analysing. The wrong language makes real speech look like silence.
               </span>
             </label>
 
             <label className="flex flex-col gap-1.5">
-              <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">
+              <span className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">
                 Loudness target
               </span>
               <select
@@ -770,7 +770,7 @@ export default function AudioPolishModal<P extends Project = Project>({
 
             {targetId === 'custom' && (
               <label className="flex flex-col gap-1.5">
-                <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--editor-text)]/50">
+                <span className="text-[11px] font-semibold uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">
                   Custom LUFS
                 </span>
                 <NumberField
@@ -803,7 +803,7 @@ export default function AudioPolishModal<P extends Project = Project>({
                 {busy ? 'Analysing…' : phase === 'review' ? 'Analyse again' : 'Analyse'}
               </button>
               {busy && (
-                <span className="text-[10px] text-[var(--editor-text)]/55">
+                <span className="text-[10px] text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]">
                   {`Analysing ${Math.min(progress.done + 1, progress.total)} of ${progress.total}. ${progress.label}`}
                 </span>
               )}
@@ -825,7 +825,7 @@ export default function AudioPolishModal<P extends Project = Project>({
         {/* Review */}
         <div className="flex-1 overflow-y-auto px-5 py-4 flex flex-col gap-5 min-h-[12rem]">
           {phase === 'setup' && (
-            <p className="text-xs text-[var(--editor-text)]/50 italic">
+            <p className="text-xs text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)] italic">
               Pick the cleanups you want, set the language, then press Analyse. You see every proposed
               change on the timeline before anything is saved.
             </p>
@@ -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-[var(--editor-text)]/45 shrink-0">
+                  <span className="text-[10px] font-mono text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)] shrink-0">
                     {`${clock(clip.start)} to ${clock(clip.end)}`}
                   </span>
                 </header>
@@ -859,7 +859,7 @@ export default function AudioPolishModal<P extends Project = Project>({
 
                 {/* Loudness */}
                 {pieces.loudness && a?.loudness && gainDb !== undefined && (
-                  <p className="text-[11px] text-[var(--editor-text)]/70">
+                  <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]">
                     {`Loudness: measured ${a.loudness.measuredI.toFixed(1)} LUFS, true peak ${a.loudness.measuredTP.toFixed(1)} dBTP. Gain ${signedDb(gainDb)} to reach ${targetLufs} LUFS.`}
                     {clamped && (
                       <span className={mode === 'light' ? 'text-amber-700' : 'text-amber-400'}>
@@ -885,12 +885,12 @@ export default function AudioPolishModal<P extends Project = Project>({
                 {pieces.voice && supports(clip, 'voice') && (
                   a?.vocalsUrl ? (
                     <div className="flex flex-col gap-1.5">
-                      <span className="text-[11px] text-[var(--editor-text)]/70">
+                      <span className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]">
                         Isolated voice. Compare the two before you apply.
                       </span>
                       <div className="flex flex-wrap items-center gap-3">
                         <span className="flex items-center gap-1.5">
-                          <span className="text-[10px] text-[var(--editor-text)]/55">Original</span>
+                          <span className="text-[10px] text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]">Original</span>
                           <audio
                             controls
                             preload="none"
@@ -899,7 +899,7 @@ export default function AudioPolishModal<P extends Project = Project>({
                           />
                         </span>
                         <span className="flex items-center gap-1.5">
-                          <span className="text-[10px] text-[var(--editor-text)]/55">Isolated voice</span>
+                          <span className="text-[10px] text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]">Isolated voice</span>
                           <audio
                             controls
                             preload="none"
@@ -914,12 +914,12 @@ export default function AudioPolishModal<P extends Project = Project>({
 
                 {/* Removals */}
                 {rows.length === 0 ? (
-                  <p className="text-[11px] text-[var(--editor-text)]/45 italic">No removals proposed for this clip.</p>
+                  <p className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)] italic">No removals proposed for this clip.</p>
                 ) : (
                   <ul className="flex flex-col gap-1">
                     {rows.map(row => (
                       <li key={row.key}>
-                        <label className="flex items-start gap-2 text-[11px] text-[var(--editor-text)]/80 cursor-pointer hover:bg-[var(--editor-text)]/5 rounded px-1 py-0.5">
+                        <label className="flex items-start gap-2 text-[11px] text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] cursor-pointer hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)] rounded px-1 py-0.5">
                           <input
                             type="checkbox"
                             checked={Boolean(approved[row.key])}
@@ -928,10 +928,10 @@ export default function AudioPolishModal<P extends Project = Project>({
                             className="mt-0.5"
                           />
                           <span className="font-mono shrink-0">{clock(row.tlStart)}</span>
-                          <span className="font-mono text-[var(--editor-text)]/50 shrink-0">
+                          <span className="font-mono text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)] shrink-0">
                             {`${(row.tlEnd - row.tlStart).toFixed(2)}s`}
                           </span>
-                          <span className="text-[var(--editor-text)]/50 shrink-0">
+                          <span className="text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)] shrink-0">
                             {row.piece === 'silence' ? 'silence' : 'filler'}
                           </span>
                           {row.text && <span className="italic truncate">{`"${row.text}"`}</span>}
@@ -952,7 +952,7 @@ export default function AudioPolishModal<P extends Project = Project>({
 
         {/* Footer */}
         <div className="flex items-center justify-between gap-2 px-5 py-3 border-t border-[var(--editor-border)]">
-          <span className="text-[11px] text-[var(--editor-text)]/50">
+          <span className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">
             {phase === 'review'
               ? `${totalApproved} removal${totalApproved === 1 ? '' : 's'} ticked. The timeline is showing the result.`
               : 'Nothing is saved until you press Apply.'}
@@ -960,7 +960,7 @@ export default function AudioPolishModal<P extends Project = Project>({
           <div className="flex items-center gap-2">
             <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/CaptionListPanel.test.tsx

@@ -145,13 +145,14 @@ describe('CaptionListPanel list', () => {
   // only a source-text check on the actual class string catches it.
   //
   // Scoped to just these two spans, not "no `/<number>` modifier anywhere in
-  // the file": ~12 OTHER `text-[var(--editor-text)]/N` uses remain elsewhere
-  // in this component (toolbar, buttons, search, empty states) and are
-  // equally no-ops, but they were individually measured to render legibly in
-  // their positions and are out of scope for this fix. A file-wide ban here
-  // would either force touching all of them unverified or need a fragile
-  // "count didn't grow" check that can't tell one class moving from banning
-  // one occurrence while a new one appears elsewhere.
+  // the file": the other `text-[var(--editor-text)]/N` uses elsewhere in this
+  // component (toolbar, buttons, search, empty states) were the same no-op at
+  // the time this guard was written. They're since converted to the
+  // equivalent `color-mix(in_srgb,var(--editor-text)_N%,transparent)` form
+  // package-wide (see the CHANGELOG), which a repo-wide grep test now
+  // enforces — this test stays narrow because it predates that fix and these
+  // two spans specifically were fixed with a plain `opacity-N` utility
+  // instead, not `color-mix`.
   it('the row index and timestamp spans do not use a no-op opacity-modifier color class', () => {
     const indexSpan = src.match(/<span className="[^"]*">\{index \+ 1\}<\/span>/)?.[0] ?? ''
     const timestampSpan = src.match(/<span className="[^"]*">\{formatTime\(seg\.start\)\}<\/span>/)?.[0] ?? ''

package/src/video/CaptionListPanel.tsx

@@ -88,7 +88,7 @@ const ALIGNMENTS = [
 /** The panel's one chip look, worn by every toggle on the Format tab (Bold,
  *  case, alignment). The inactive foreground is
  *  `text-[var(--editor-text)] opacity-60` rather than
- *  `text-[var(--editor-text)]/60` — Tailwind cannot generate an opacity
+ *  `text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]` — Tailwind cannot generate an opacity
  *  modifier on an arbitrary var() color, so that class is a silent no-op (see
  *  the longer note on the row index span at the bottom of this file). The
  *  row-filter chips on the Captions tab hand-roll the same look with the older
@@ -96,7 +96,7 @@ const ALIGNMENTS = [
 const chipClass = (active: boolean): string =>
   `text-[10px] rounded px-2 py-0.5 transition-all border ${
     active
-      ? 'bg-[var(--editor-accent)]/20 border-[var(--editor-accent)]/60 text-[var(--editor-accent)]'
+      ? 'bg-[color-mix(in_srgb,var(--editor-accent)_20%,transparent)] border-[color-mix(in_srgb,var(--editor-accent)_60%,transparent)] text-[var(--editor-accent)]'
       : 'bg-[var(--editor-surface)] border-[var(--editor-border)] text-[var(--editor-text)] opacity-60 hover:opacity-100'
   }`
 
@@ -111,7 +111,7 @@ const rowClass = 'flex items-center gap-1.5'
  *  ("Alignment") at this size and still leaves the ~300px rail enough room for
  *  the widest control (the font picker + Bold).
  *
- *  `opacity-60`, NOT `text-[var(--editor-text)]/60` — an opacity modifier on an
+ *  `opacity-60`, NOT `text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]` — an opacity modifier on an
  *  arbitrary var() color is a silent no-op; see the note on `chipClass` above.
  *
  *  These labels are PRESENTATIONAL: plain sibling spans, never a
@@ -559,10 +559,10 @@ function CaptionListPanelBody({
           control — so the left rail's panels share one tab language. ── */}
       <div className="shrink-0 border-b border-[var(--editor-border)] flex flex-col">
         <div className="px-3 pt-2 pb-1 flex items-center justify-between gap-2">
-          <span className="text-xs font-medium text-[var(--editor-text)]/60 uppercase tracking-wide">
+          <span className="text-xs font-medium text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] uppercase tracking-wide">
             Captions
             {segs.length > 0 && (
-              <span className="ml-1.5 text-[var(--editor-text)]/40 normal-case tracking-normal">{segs.length}</span>
+              <span className="ml-1.5 text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] normal-case tracking-normal">{segs.length}</span>
             )}
           </span>
         </div>
@@ -603,7 +603,7 @@ function CaptionListPanelBody({
             </div>
           ) : (
             <div className="flex flex-col items-center gap-2 text-center mt-4 px-2">
-              <p className="text-xs text-[var(--editor-text)]/50 leading-relaxed">
+              <p className="text-xs text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)] leading-relaxed">
                 {onRegenerateCaptions
                   ? "Captions are generated from the timeline's audio."
                   : 'No captions yet. Captions are generated during transcription.'}
@@ -920,14 +920,14 @@ function CaptionListPanelBody({
           <div className="shrink-0 border-b border-[var(--editor-border)] px-3 py-2 flex flex-col gap-2">
             {/* ── Search ── */}
             <div className="relative">
-              <Search size={11} className="absolute left-2 top-1/2 -translate-y-1/2 text-[var(--editor-text)]/40 pointer-events-none" />
+              <Search size={11} className="absolute left-2 top-1/2 -translate-y-1/2 text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] pointer-events-none" />
               <input
                 type="text"
                 value={search}
                 onChange={e => setSearch(e.target.value)}
                 placeholder="Search captions…"
                 aria-label="Search captions"
-                className="w-full h-7 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] pl-6 pr-2 text-xs text-[var(--editor-text)] placeholder-[var(--editor-text)]/40 focus:outline-none focus:border-[var(--editor-accent)]"
+                className="w-full h-7 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] pl-6 pr-2 text-xs text-[var(--editor-text)] placeholder-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] focus:outline-none focus:border-[var(--editor-accent)]"
               />
             </div>
 
@@ -946,8 +946,8 @@ function CaptionListPanelBody({
                   onClick={() => setRowFilter(null)}
                   className={`text-[10px] rounded px-2 py-0.5 transition-all border ${
                     rowFilter === null
-                      ? 'bg-[var(--editor-accent)]/20 border-[var(--editor-accent)]/60 text-[var(--editor-accent)]'
-                      : 'bg-[var(--editor-surface)] border-[var(--editor-border)] text-[var(--editor-text)]/50 hover:text-[var(--editor-text)]/80 hover:border-[var(--editor-text)]/30'
+                      ? 'bg-[color-mix(in_srgb,var(--editor-accent)_20%,transparent)] border-[color-mix(in_srgb,var(--editor-accent)_60%,transparent)] text-[var(--editor-accent)]'
+                      : 'bg-[var(--editor-surface)] border-[var(--editor-border)] text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] hover:border-[color-mix(in_srgb,var(--editor-text)_30%,transparent)]'
                   }`}
                 >
                   All
@@ -960,8 +960,8 @@ function CaptionListPanelBody({
                     onClick={() => setRowFilter(g.lane)}
                     className={`text-[10px] rounded px-2 py-0.5 transition-all border ${
                       rowFilter === g.lane
-                        ? 'bg-[var(--editor-accent)]/20 border-[var(--editor-accent)]/60 text-[var(--editor-accent)]'
-                        : 'bg-[var(--editor-surface)] border-[var(--editor-border)] text-[var(--editor-text)]/50 hover:text-[var(--editor-text)]/80 hover:border-[var(--editor-text)]/30'
+                        ? 'bg-[color-mix(in_srgb,var(--editor-accent)_20%,transparent)] border-[color-mix(in_srgb,var(--editor-accent)_60%,transparent)] text-[var(--editor-accent)]'
+                        : 'bg-[var(--editor-surface)] border-[var(--editor-border)] text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] hover:border-[color-mix(in_srgb,var(--editor-text)_30%,transparent)]'
                     }`}
                   >
                     {`Row ${g.lane + 1}`}
@@ -974,7 +974,7 @@ function CaptionListPanelBody({
           {/* ── Scrollable numbered list ── */}
           <div role="list" aria-label="Caption segments" className="flex-1 min-h-0 overflow-y-auto px-2 py-2 flex flex-col gap-1">
         {totalVisible === 0 ? (
-          <p className="text-xs text-[var(--editor-text)]/50 italic text-center mt-4 px-2">No matching captions.</p>
+          <p className="text-xs text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)] italic text-center mt-4 px-2">No matching captions.</p>
         ) : (
           visibleGroups.map(group => (
             // A single-lane project has exactly one entry here, so this
@@ -989,7 +989,7 @@ function CaptionListPanelBody({
                 // resolveDropLane), and a sidebar dropdown doing the same
                 // move by a different mechanism invites the two to disagree
                 // about what a drag means. Follow-up, not YAGNI-scope here.
-                <div className="sticky top-0 z-10 -mx-2 px-2 py-1 bg-[var(--editor-surface)] border-b border-[var(--editor-border)] text-[10px] font-medium text-[var(--editor-text)]/50 uppercase tracking-wide">
+                <div className="sticky top-0 z-10 -mx-2 px-2 py-1 bg-[var(--editor-surface)] border-b border-[var(--editor-border)] text-[10px] font-medium text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)] uppercase tracking-wide">
                   {`Row ${group.lane + 1}`}
                 </div>
               )}
@@ -1050,7 +1050,7 @@ function CaptionListPanelBody({
                       />
                     </span>
                     <button
-                      className={`shrink-0 opacity-0 group-hover:opacity-100 text-[var(--editor-text)]/40 transition-opacity ${mode === 'light' ? 'hover:text-red-600' : 'hover:text-red-400'}`}
+                      className={`shrink-0 opacity-0 group-hover:opacity-100 text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] transition-opacity ${mode === 'light' ? 'hover:text-red-600' : 'hover:text-red-400'}`}
                       onClick={e => { e.stopPropagation(); handleDelete(seg.id) }}
                       title="Delete caption"
                       aria-label="Delete caption"
@@ -1090,8 +1090,8 @@ function CaptionListPanelBody({
                   confirmRemove
                     ? (mode === 'light' ? 'bg-red-50 border-red-400 text-red-700' : 'bg-red-500/15 border-red-500/60 text-red-400')
                     : (mode === 'light'
-                        ? 'border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)]/70 hover:border-red-400 hover:text-red-700'
-                        : 'border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)]/70 hover:border-red-500/50 hover:text-red-400')
+                        ? 'border-[var(--editor-border)] bg-[var(--editor-surface)] text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)] hover:border-red-400 hover:text-red-700'
+                        : 'border-[var(--editor-border)] bg-[var(--editor-surface)] text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)] hover:border-red-500/50 hover:text-red-400')
                 }`}
               >
                 <Trash2 size={13} />

package/src/video/CaptionRegenModal.tsx

@@ -39,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'
@@ -165,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>
 
@@ -189,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} />
@@ -215,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>
                       ))}