@bycrux/editor 1.2.2 → 1.4.0

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

@@ -0,0 +1,105 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, waitFor, act, fireEvent, screen } from '@testing-library/react'
+import type { EditorAdapter, ImageElement, Project, RenderEvent, VersionEntry, WaveformChunk } from '../../types'
+import VideoEditor from '../VideoEditor'
+
+// ── Save-error banner ────────────────────────────────────────────────────────
+// `sync.lastError` (use-project-sync.ts) used to go unrendered in the video
+// editor: a failed save rolled the edit back with no visible sign anything
+// went wrong. CarouselEditor already surfaces it as a dismissible banner
+// (CarouselEditor.tsx ~584-590); this mirrors that pattern in VideoEditor.
+//
+// "M drops a marker" (VideoEditor.keymap.test.tsx) is reused as the trigger —
+// the simplest real `sync.mutate` call reachable without selecting a clip —
+// so this test can focus on the banner itself rather than on how to cause a
+// mutation.
+
+function makeVideoProject(overrides: Partial<Project> = {}): Project {
+  return {
+    id: 'vid-1',
+    name: 'Test Video',
+    status: 'draft',
+    editingPrompt: '',
+    projectType: 'video',
+    settings: { resolution: [1080, 1920], fps: 30 },
+    tracks: [
+      [{ id: 'clip-0', type: 'video', src: 'a.mp4', start: 0, end: 4, inPoint: 0, outPoint: 4 }],
+    ],
+    audio: { tracks: [] },
+    assets: [],
+    ...overrides,
+  } as Project
+}
+
+function makeFailingSaveAdapter(): EditorAdapter<Project> {
+  return {
+    loadProject: vi.fn(async () => makeVideoProject()),
+    saveProject: vi.fn(async () => { throw new Error('save boom') }),
+    subscribe: () => () => {},
+    render: async function* (): AsyncIterable<RenderEvent> { yield { type: 'done', outputPath: '/out.mp4' } },
+    resolveImageSrc: (el: ImageElement) => el.src,
+    compileOverlay: vi.fn(async () => () => null),
+    listGlobalOverlays: vi.fn(async () => []),
+    listSystemOverlays: vi.fn(async () => []),
+    uploadFile: vi.fn(async () => '/path'),
+    fileUrl: (path: string) => path,
+    listVersionHistory: vi.fn(async (): Promise<VersionEntry[]> => []),
+    restoreVersion: vi.fn(async () => makeVideoProject()),
+    getWaveformChunks: vi.fn(async (): Promise<WaveformChunk[]> => []),
+    resolveCaptionTemplate: (style: string) => `/caption/${style}`,
+    getInfo: vi.fn(async () => ({ root_skill_path: undefined })),
+  }
+}
+
+beforeEach(() => {
+  vi.spyOn(console, 'warn').mockImplementation(() => {})
+  vi.spyOn(console, 'error').mockImplementation(() => {})
+  ;(globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  }
+  ;(globalThis as unknown as { HTMLMediaElement: { prototype: HTMLMediaElement } }).HTMLMediaElement.prototype.play = vi.fn(async () => {}) as never
+  ;(globalThis as unknown as { HTMLMediaElement: { prototype: HTMLMediaElement } }).HTMLMediaElement.prototype.pause = vi.fn(() => {}) as never
+  ;(globalThis as unknown as { AudioContext: unknown }).AudioContext = class {
+    state = 'running'
+    createGain() { return { gain: { value: 1 }, connect() {}, disconnect() {} } }
+    createMediaElementSource() { return { connect() {}, disconnect() {} } }
+    get destination() { return {} }
+    close() {}
+  }
+})
+afterEach(() => vi.restoreAllMocks())
+
+describe('VideoEditor — save-error banner', () => {
+  it('shows sync.lastError when a save rejects, and dismiss clears it', async () => {
+    const adapter = makeFailingSaveAdapter()
+    render(
+      <VideoEditor
+        project={makeVideoProject()}
+        adapter={adapter}
+        onProjectChange={vi.fn()}
+        slots={{ exportActions: <div /> }}
+      />,
+    )
+    await screen.findByLabelText('Preview axis')
+
+    // No error yet.
+    expect(screen.queryByText('save boom')).toBeNull()
+
+    // Drop a marker — the simplest sync.mutate a mounted editor can reach
+    // without first selecting a clip. Its save rejects per the adapter above.
+    await act(async () => {
+      document.dispatchEvent(new KeyboardEvent('keydown', { key: 'm' }))
+    })
+
+    const banner = await waitFor(() => screen.getByText('save boom'))
+    expect(banner).toBeTruthy()
+    expect(adapter.saveProject).toHaveBeenCalledTimes(1)
+
+    const dismissBtn = screen.getByText('dismiss')
+    await act(async () => { fireEvent.click(dismissBtn) })
+
+    expect(screen.queryByText('save boom')).toBeNull()
+  })
+})

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

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

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

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

package/src/video/export-limits.ts

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

package/src/video/panels/ClipPropertiesPanel.tsx

@@ -68,7 +68,7 @@ export interface ClipPropertiesPanelProps {
 }
 
 const SECTION_CLASS = 'shrink-0 border-b border-[var(--editor-border)] flex flex-col overflow-hidden'
-const ROW_LABEL_CLASS = 'w-16 shrink-0 text-[11px] text-[var(--editor-text)]/55'
+const ROW_LABEL_CLASS = 'w-16 shrink-0 text-[11px] text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]'
 
 function basename(path: string): string {
   return path.split('/').pop() ?? path
@@ -107,7 +107,7 @@ function CollapsibleSection({
           type="button"
           aria-expanded={!collapsed}
           onClick={onToggle}
-          className="flex items-center gap-1 rounded px-1 py-0.5 text-[var(--editor-text)]/60 transition-colors hover:text-[var(--editor-text)]"
+          className="flex items-center gap-1 rounded px-1 py-0.5 text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] transition-colors hover:text-[var(--editor-text)]"
         >
           {collapsed ? <ChevronRight size={12} /> : <ChevronDown size={12} />}
           <span className={nested ? 'text-[11px] font-medium' : 'text-xs font-medium uppercase tracking-wide'}>{label}</span>
@@ -358,7 +358,7 @@ function ClipTabs({ item, onPreviewClip, onCommitClip, onChangeClip, transformSl
                   <div className={`flex h-11 w-11 items-center justify-center rounded-full bg-indigo-500/10 ${mode === 'light' ? 'text-indigo-600' : 'text-indigo-400'}`}>
                     <Crop size={20} />
                   </div>
-                  <p className="max-w-[220px] text-xs leading-relaxed text-[var(--editor-text)]/60">
+                  <p className="max-w-[220px] text-xs leading-relaxed text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
                     Reframe this clip by cropping its source video. Pick the part of the frame to keep.
                   </p>
                   <button
@@ -678,7 +678,7 @@ export default function ClipPropertiesPanel({
   if (!selection) {
     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 a clip to edit its properties.
         </div>
       </div>

package/src/video/panels/OverlayContentPanel.tsx

@@ -65,7 +65,7 @@ export interface OverlayContentPanelProps {
 }
 
 const SECTION_CLASS = 'shrink-0 border-b border-[var(--editor-border)] flex flex-col overflow-hidden'
-const FIELD_LABEL_CLASS = 'text-[11px] uppercase tracking-wide text-[var(--editor-text)]/55'
+const FIELD_LABEL_CLASS = 'text-[11px] uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]'
 
 /**
  * Image prop control: a thumbnail preview plus a file picker that uploads the
@@ -128,16 +128,16 @@ function ImageField({
           className="h-14 w-14 shrink-0 rounded-md border border-[var(--editor-border)] object-cover bg-black/20"
         />
       ) : (
-        <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-md border border-dashed border-[var(--editor-border)] text-[10px] text-[var(--editor-text)]/40">
+        <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-md border border-dashed border-[var(--editor-border)] text-[10px] text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]">
           none
         </div>
       )}
       <div className="flex min-w-0 flex-1 flex-col gap-1">
-        <span className="truncate font-mono text-xs text-[var(--editor-text)]/70" title={value}>
+        <span className="truncate font-mono text-xs text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]" title={value}>
           {value ? value.split('/').pop() : '—'}
         </span>
         {uploadFile ? (
-          <label className="inline-flex w-fit cursor-pointer items-center gap-1.5 rounded-md border border-[var(--editor-border)] px-2.5 py-1 text-xs text-[var(--editor-text)]/80 hover:bg-[var(--editor-text)]/5">
+          <label className="inline-flex w-fit cursor-pointer items-center gap-1.5 rounded-md border border-[var(--editor-border)] px-2.5 py-1 text-xs text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]">
             {busy ? 'Uploading…' : 'Change…'}
             <input
               type="file"
@@ -324,7 +324,7 @@ export default function OverlayContentPanel({
     <div className={SECTION_CLASS}>
       <div className="flex flex-col gap-3 p-2">
         {fields.length === 0 ? (
-          <p className="px-1 py-4 text-center text-[11px] text-[var(--editor-text)]/45">
+          <p className="px-1 py-4 text-center text-[11px] text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)]">
             {item
               ? 'This overlay has no editable content.'
               : 'Select an overlay to edit its content.'}

package/src/video/preview/OverlayItemsLayer.tsx

@@ -113,13 +113,18 @@ function OverlayVideo({ src, currentTime, itemStart, inPoint, speed = 1, isPlayi
 // already recurses — without this, image paths nested in array/object props
 // (e.g. players[].src, items[].src) reach <img> raw as /var/hub-scratch/... and
 // render blank in preview even though they render correctly in the final MP4.
-// Already-proxied /api/ URLs are left untouched (idempotent).
+// Already-proxied /api/ URLs are left untouched (idempotent). On Windows an
+// absolute path is a drive-letter one (C:\ or C:/); this runs in the browser,
+// so that is a regex, not Node's path module. UNC (\\host) is not rewritten.
+const DRIVE_ABS_PATH = /^[A-Za-z]:[\\/]/
+
 export function resolveOverlayPropPaths(
   value: unknown,
   fileUrl: (path: string) => string,
 ): unknown {
   if (typeof value === 'string') {
-    return value.startsWith('/') && !value.startsWith('/api/') ? fileUrl(value) : value
+    const abs = (value.startsWith('/') && !value.startsWith('/api/')) || DRIVE_ABS_PATH.test(value)
+    return abs ? fileUrl(value) : value
   }
   if (Array.isArray(value)) {
     return value.map((v) => resolveOverlayPropPaths(v, fileUrl))

package/src/video/preview/PreviewPlayer.tsx

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

package/src/video/preview/SocialPreviewMenu.tsx

@@ -145,7 +145,7 @@ export default function SocialPreviewMenu({ anchorRef, value, onChange, onClose,
       ref={popoverRef}
       role="menu"
       aria-label="Preview for social media"
-      className="fixed z-[100] w-64 rounded-xl border border-[var(--editor-border)] bg-[var(--editor-surface)] shadow-2xl p-2 flex flex-col gap-1"
+      className="fixed z-[100] w-64 rounded-xl border border-[var(--editor-border)] bg-[var(--editor-surface)] shadow-2xl p-2 flex flex-col gap-1 text-[var(--editor-text)]"
       style={{
         left: position?.left ?? -9999,
         top: position?.top ?? -9999,
@@ -157,8 +157,8 @@ export default function SocialPreviewMenu({ anchorRef, value, onChange, onClose,
       }}
     >
       <p className="px-2 pt-1 pb-1.5">
-        <span className="block text-[11px] font-semibold text-[var(--editor-text)]/90">Preview for social media</span>
-        <span className="block text-[10px] text-[var(--editor-text)]/50">What you see may vary depending on your device.</span>
+        <span className="block text-[11px] font-semibold text-[color-mix(in_srgb,var(--editor-text)_90%,transparent)]">Preview for social media</span>
+        <span className="block text-[10px] text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">What you see may vary depending on your device.</span>
       </p>
 
       {PLATFORM_OPTIONS.map(opt => {
@@ -175,7 +175,7 @@ export default function SocialPreviewMenu({ anchorRef, value, onChange, onClose,
             className={`flex items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-left text-xs transition-colors ${
               active
                 ? 'text-[var(--editor-text)] bg-sky-400/10'
-                : 'text-[var(--editor-text)]/80 hover:bg-[var(--editor-text)]/5'
+                : 'text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]'
             }`}
           >
             <span className="flex items-center gap-2">
@@ -199,11 +199,11 @@ export default function SocialPreviewMenu({ anchorRef, value, onChange, onClose,
         className={`flex items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-left text-xs transition-colors ${
           value === null
             ? 'text-[var(--editor-text)] bg-sky-400/10'
-            : 'text-[var(--editor-text)]/80 hover:bg-[var(--editor-text)]/5'
+            : 'text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)]'
         }`}
       >
         <span className="flex items-center gap-2">
-          <PlatformGlyph icon={Slash} badgeClassName="bg-[var(--editor-text)]/15" />
+          <PlatformGlyph icon={Slash} badgeClassName="bg-[color-mix(in_srgb,var(--editor-text)_15%,transparent)]" />
           <span>None</span>
         </span>
         {value === null && <Check size={13} className={mode === 'light' ? 'text-sky-600' : 'text-sky-400'} />}

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

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

package/src/video/preview/__tests__/resolveOverlayPropPaths.test.ts

@@ -50,4 +50,25 @@ describe('resolveOverlayPropPaths', () => {
     expect(out.duration).toBe(90)
     expect(out.nested.deep[0].src).toBe(fileUrl('/var/x.png'))
   })
+
+  // Windows: an absolute image prop is a drive-letter path. It must reach
+  // fileUrl like a posix absolute path does; a UNC path stays refused.
+  it('rewrites drive-letter absolute paths in either slash style', () => {
+    expect(resolveOverlayPropPaths('C:\\a\\x.png', fileUrl)).toBe(fileUrl('C:\\a\\x.png'))
+    expect(resolveOverlayPropPaths('C:/a/x.png', fileUrl)).toBe(fileUrl('C:/a/x.png'))
+    expect(resolveOverlayPropPaths('d:\\x.png', fileUrl)).toBe(fileUrl('d:\\x.png'))
+  })
+
+  it('leaves UNC, drive-relative and relative paths untouched', () => {
+    for (const v of ['\\\\server\\x', 'C:x.png', 'a\\x.png', 'a/x.png']) {
+      expect(resolveOverlayPropPaths(v, fileUrl)).toBe(v)
+    }
+  })
+
+  it('keeps posix behaviour exactly: /abs and //host rewritten, /api/ untouched', () => {
+    expect(resolveOverlayPropPaths('/abs/x.png', fileUrl)).toBe(fileUrl('/abs/x.png'))
+    expect(resolveOverlayPropPaths('//host/x.png', fileUrl)).toBe(fileUrl('//host/x.png'))
+    expect(resolveOverlayPropPaths('/api/x', fileUrl)).toBe('/api/x')
+    expect(resolveOverlayPropPaths('/apix', fileUrl)).toBe(fileUrl('/apix'))
+  })
 })

package/src/video/timeline/EditableSegment.tsx

@@ -22,7 +22,7 @@ export function EditableSegment({ seg, onEdit }: { seg: CaptionSegment; onEdit:
       suppressContentEditableWarning
       onBlur={handleBlur}
       onKeyDown={handleKeyDown}
-      className="cursor-text rounded px-0.5 hover:bg-[var(--editor-text)]/5 focus:bg-[var(--editor-text)]/10 focus:outline-none focus:ring-1 focus:ring-purple-500/40"
+      className="cursor-text rounded px-0.5 hover:bg-[color-mix(in_srgb,var(--editor-text)_5%,transparent)] focus:bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)] focus:outline-none focus:ring-1 focus:ring-purple-500/40"
     >
       {seg.text}
     </span>

package/src/video/timeline/Scrubber.tsx

@@ -34,14 +34,14 @@ export default function Scrubber({ onOpenGoToTime }: ScrubberProps) {
     /* `cursor-pointer`: the row is a strip of timeline background, and
        Timeline's container click seeks through it (see `handleContainerClick`),
        so it should look live rather than dead. */
-    <div className="flex items-center justify-between text-[10px] font-mono text-[var(--editor-text)]/35 cursor-pointer">
+    <div className="flex items-center justify-between text-[10px] font-mono text-[color-mix(in_srgb,var(--editor-text)_35%,transparent)] cursor-pointer">
       {onOpenGoToTime ? (
         <Tooltip label="Go to time">
           <button
             type="button"
             aria-label="Go to time"
             onClick={(e) => { e.stopPropagation(); onOpenGoToTime() }}
-            className="hover:text-[var(--editor-text)]/80 transition-colors"
+            className="hover:text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] transition-colors"
           >
             {formatTime(currentTime)}
           </button>

package/src/video/timeline/SpeedControl.tsx

@@ -52,9 +52,9 @@ export default function SpeedControl({
 
   return (
     <div className="flex flex-col gap-2">
-      <div className={`flex items-center text-[11px] text-[var(--editor-text)]/70 ${label ? 'justify-between' : 'justify-end'}`}>
+      <div className={`flex items-center text-[11px] text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)] ${label ? 'justify-between' : 'justify-end'}`}>
         {label && <span>{label}</span>}
-        <span className="font-mono text-[10px] text-[var(--editor-text)]/50">{value.toFixed(2)}×</span>
+        <span className="font-mono text-[10px] text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">{value.toFixed(2)}×</span>
       </div>
       <Slider
         id={sliderId}
@@ -82,7 +82,7 @@ export default function SpeedControl({
               className={`rounded-md border px-2 py-0.5 text-[11px] font-mono transition-colors focus:outline-none focus:ring-1 focus:ring-[var(--editor-accent)] ${
                 active
                   ? 'border-[var(--editor-accent)] bg-[var(--editor-accent)] text-[var(--editor-accent-foreground)]'
-                  : 'border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)]/70 hover:text-[var(--editor-text)] hover:border-[var(--editor-accent)]'
+                  : '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)]'
               }`}
             >
               {p}×

package/src/video/timeline/Timeline.tsx

@@ -940,7 +940,7 @@ export default function Timeline({ project, clock, onProjectChange, onOverlayEdi
         <div className="flex items-center justify-end gap-0.5 -mb-1 cursor-pointer">
           <Tooltip label="Zoom out">
             <button
-              className="text-[11px] leading-none text-[var(--editor-text)]/45 hover:text-[var(--editor-text)]/80 w-5 h-5 flex items-center justify-center rounded hover:bg-[var(--editor-text)]/10 transition-colors"
+              className="text-[11px] leading-none text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] w-5 h-5 flex items-center justify-center rounded hover:bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)] transition-colors"
               aria-label="Zoom out"
               onClick={(e) => { e.stopPropagation(); zoomControls.zoomOut() }}
             >−</button>
@@ -948,7 +948,7 @@ export default function Timeline({ project, clock, onProjectChange, onOverlayEdi
           {zoomControls.badge}
           <Tooltip label="Zoom in">
             <button
-              className="text-[11px] leading-none text-[var(--editor-text)]/45 hover:text-[var(--editor-text)]/80 w-5 h-5 flex items-center justify-center rounded hover:bg-[var(--editor-text)]/10 transition-colors"
+              className="text-[11px] leading-none text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] w-5 h-5 flex items-center justify-center rounded hover:bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)] transition-colors"
               aria-label="Zoom in"
               onClick={(e) => { e.stopPropagation(); zoomControls.zoomIn() }}
             >+</button>
@@ -956,7 +956,7 @@ export default function Timeline({ project, clock, onProjectChange, onOverlayEdi
           {zoomControls.showFit && (
             <Tooltip label="Fit to view" className="ml-0.5">
               <button
-                className="text-[10px] text-[var(--editor-text)]/45 hover:text-[var(--editor-text)]/80 px-1.5 h-5 rounded hover:bg-[var(--editor-text)]/10 transition-colors"
+                className="text-[10px] text-[color-mix(in_srgb,var(--editor-text)_45%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)] px-1.5 h-5 rounded hover:bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)] transition-colors"
                 aria-label="Fit to view"
                 onClick={(e) => { e.stopPropagation(); zoomControls.fit() }}
               >fit</button>

package/src/video/timeline/TrackGutter.tsx

@@ -118,7 +118,7 @@ function RailCell({ height, accent, icon, label, action, dimmed, settingsButton
           icons could be clicked — a decorative-looking glyph that happened to
           open a dialog. Settings moved to the gear beside it. */}
       <Tooltip label={label}>
-        <span aria-label={label} className="flex h-4 w-4 items-center justify-center text-[var(--editor-text)]/50">
+        <span aria-label={label} className="flex h-4 w-4 items-center justify-center text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">
           {icon}
         </span>
       </Tooltip>
@@ -144,8 +144,8 @@ function RailCell({ height, accent, icon, label, action, dimmed, settingsButton
               onClick={settingsButton.onClick}
               className={`flex h-3.5 w-3.5 items-center justify-center rounded transition-colors ${
                 settingsButton.open
-                  ? 'text-[var(--editor-text)]/90 bg-[var(--editor-text)]/10'
-                  : 'text-[var(--editor-text)]/40 hover:text-[var(--editor-text)]/90 hover:bg-[var(--editor-text)]/10'
+                  ? 'text-[color-mix(in_srgb,var(--editor-text)_90%,transparent)] bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)]'
+                  : 'text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_90%,transparent)] hover:bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)]'
               }`}
             >
               <Settings2 size={13} />
@@ -179,7 +179,7 @@ function MuteToggle({ muted, onToggle, trackLabel, mode }: { muted: boolean; onT
         className={`flex h-3.5 w-3.5 items-center justify-center rounded transition-colors ${
           muted
             ? (mode === 'light' ? 'text-amber-600 hover:text-amber-700' : 'text-amber-400/90 hover:text-amber-300')
-            : 'text-[var(--editor-text)]/35 hover:text-[var(--editor-text)]/80'
+            : 'text-[color-mix(in_srgb,var(--editor-text)_35%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)]'
         }`}
       >
         {muted ? <VolumeX size={13} /> : <Volume2 size={13} />}
@@ -206,7 +206,7 @@ function MagnetToggle({ magnetic, onToggle, trackLabel, mode }: { magnetic: bool
         className={`flex h-3.5 w-3.5 items-center justify-center rounded transition-colors ${
           magnetic
             ? (mode === 'light' ? 'text-emerald-600 hover:text-emerald-700' : 'text-emerald-400/90 hover:text-emerald-300')
-            : 'text-[var(--editor-text)]/35 hover:text-[var(--editor-text)]/80'
+            : 'text-[color-mix(in_srgb,var(--editor-text)_35%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)]'
         }`}
       >
         <Magnet size={13} />
@@ -227,7 +227,7 @@ function SkipToggle({ enabled, onToggle, trackLabel, mode }: { enabled: boolean;
         onClick={onToggle}
         className={`flex h-3.5 w-3.5 items-center justify-center rounded transition-colors ${
           enabled
-            ? 'text-[var(--editor-text)]/35 hover:text-[var(--editor-text)]/80'
+            ? 'text-[color-mix(in_srgb,var(--editor-text)_35%,transparent)] hover:text-[color-mix(in_srgb,var(--editor-text)_80%,transparent)]'
             : (mode === 'light' ? 'text-amber-600/90 hover:text-amber-700' : 'text-amber-400/80 hover:text-amber-300')
         }`}
       >