@bycrux/editor 1.2.2 → 1.4.0

package/src/state/__tests__/use-project-sync.test.tsx

@@ -369,3 +369,79 @@ describe('useProjectSync — subscription lifecycle', () => {
     expect(adapter.unsub).toHaveBeenCalledTimes(1)
   })
 })
+
+describe('useProjectSync — onLocalEdit', () => {
+  it('fires on the four user paths only (mutate, a real commit, undo, redo)', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject()
+    const onLocalEdit = vi.fn()
+    const { result } = renderHook(() =>
+      useProjectSync(adapter, initial.id, initial, { onLocalEdit }),
+    )
+
+    await act(async () => { await result.current.mutate((p) => ({ ...p, name: 'A' })) })
+    expect(onLocalEdit).toHaveBeenCalledTimes(1)
+
+    act(() => {
+      result.current.mutateTransient((p) => ({ ...p, name: 'B1' }))
+      result.current.mutateTransient((p) => ({ ...p, name: 'B2' }))
+      result.current.mutateTransient((p) => ({ ...p, name: 'B3' }))
+    })
+    expect(onLocalEdit).toHaveBeenCalledTimes(1)
+
+    await act(async () => { await result.current.commit() })
+    expect(onLocalEdit).toHaveBeenCalledTimes(2)
+
+    // A commit with no transient gesture in flight changed nothing.
+    await act(async () => { await result.current.commit() })
+    expect(onLocalEdit).toHaveBeenCalledTimes(2)
+
+    await act(async () => { result.current.undo() })
+    expect(onLocalEdit).toHaveBeenCalledTimes(3)
+
+    await act(async () => { result.current.redo() })
+    expect(onLocalEdit).toHaveBeenCalledTimes(4)
+
+    act(() => { result.current.applyExternal(makeProject({ name: 'Ext' })) })
+    expect(onLocalEdit).toHaveBeenCalledTimes(4)
+
+    act(() => { adapter.emit(makeProject({ name: 'SSE' })) })
+    expect(result.current.project.name).toBe('SSE')
+    expect(onLocalEdit).toHaveBeenCalledTimes(4)
+  })
+
+  it('does not fire for undo or redo on an empty stack, or for discardTransient', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject()
+    const onLocalEdit = vi.fn()
+    const { result } = renderHook(() =>
+      useProjectSync(adapter, initial.id, initial, { onLocalEdit }),
+    )
+
+    act(() => { result.current.undo() })
+    act(() => { result.current.redo() })
+    act(() => {
+      result.current.mutateTransient((p) => ({ ...p, name: 'X' }))
+      result.current.discardTransient()
+    })
+    expect(onLocalEdit).not.toHaveBeenCalled()
+  })
+
+  it('calls the latest callback when the option identity changes', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject()
+    const first = vi.fn()
+    const second = vi.fn()
+    const { result, rerender } = renderHook(
+      ({ cb }) => useProjectSync(adapter, initial.id, initial, { onLocalEdit: cb }),
+      { initialProps: { cb: first } },
+    )
+    const mutateBefore = result.current.mutate
+    rerender({ cb: second })
+    expect(result.current.mutate).toBe(mutateBefore)
+
+    await act(async () => { await result.current.mutate((p) => ({ ...p, name: 'A' })) })
+    expect(first).not.toHaveBeenCalled()
+    expect(second).toHaveBeenCalledTimes(1)
+  })
+})

package/src/state/use-project-sync.ts

@@ -41,6 +41,16 @@ export interface UseProjectSyncOptions<P extends Project> {
    * one here — it must be a pure function of its two arguments.
    */
   reconcile?: (prev: P, next: P) => P
+  /**
+   * Called on every local user edit: `mutate`, a `commit` that closes a
+   * gesture which actually changed something, and an `undo`/`redo` that popped
+   * a snapshot. Never for `mutateTransient`, `discardTransient`,
+   * `applyExternal`, `refetch` or SSE frames, so a host can tell its own
+   * user's edits from server-authored writes. Fired after the optimistic
+   * apply, before the save resolves. Read through a ref: identity changes are
+   * harmless and never re-create the returned callbacks.
+   */
+  onLocalEdit?: () => void
 }
 
 export interface UseProjectSync<P extends Project = Project> {
@@ -97,6 +107,10 @@ export function useProjectSync<P extends Project = Project>(
   const reconcileRef = useRef(options?.reconcile)
   reconcileRef.current = options?.reconcile
 
+  // `onLocalEdit` likewise, so the user-edit paths stay referentially stable.
+  const onLocalEditRef = useRef(options?.onLocalEdit)
+  onLocalEditRef.current = options?.onLocalEdit
+
   // Latest deferred external frame. Held while saves are in flight because an
   // echo for an earlier save can arrive while a later save is still mid-flight —
   // applying it would regress the optimistic state to the older value (visible
@@ -193,6 +207,7 @@ export function useProjectSync<P extends Project = Project>(
       // Non-transient mutations reset the baseline so any subsequent gesture
       // starts from the freshly committed state.
       transientBaseline.current = null
+      onLocalEditRef.current?.()
       return queue.current.enqueue(() =>
         save(next, snapshot).catch((err) => {
           setLastError(err instanceof Error ? err.message : String(err))
@@ -222,7 +237,10 @@ export function useProjectSync<P extends Project = Project>(
     const current = projectRef.current
     const baseline = transientBaseline.current
     transientBaseline.current = null
-    if (baseline !== null) pushUndo(baseline)
+    if (baseline !== null) {
+      pushUndo(baseline)
+      onLocalEditRef.current?.()
+    }
     const rollbackTo = baseline ?? current
     return queue.current.enqueue(() =>
       save(current, rollbackTo).catch((err) => {
@@ -261,6 +279,7 @@ export function useProjectSync<P extends Project = Project>(
     projectRef.current = prev
     transientBaseline.current = null
     setProject(prev)
+    onLocalEditRef.current?.()
     void queue.current.enqueue(() =>
       save(prev, current).catch((err) => {
         setLastError(err instanceof Error ? err.message : String(err))
@@ -279,6 +298,7 @@ export function useProjectSync<P extends Project = Project>(
     projectRef.current = next
     transientBaseline.current = null
     setProject(next)
+    onLocalEditRef.current?.()
     void queue.current.enqueue(() =>
       save(next, current).catch((err) => {
         setLastError(err instanceof Error ? err.message : String(err))

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

@@ -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
 }
 
 /**
@@ -1038,6 +1040,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

@@ -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"
@@ -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)_60%,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)_60%,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)_60%,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] ?? ''