@bycrux/editor 1.2.1 → 1.3.0

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/SocialPreviewMenu.tsx

@@ -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__/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')
         }`}
       >

package/src/video/timeline/TrackSettingsPopover.tsx

@@ -186,7 +186,7 @@ export default function TrackSettingsPopover({
         transform: position?.flipped ? 'translateY(-100%)' : undefined,
       }}
     >
-      <p className="text-xs font-semibold text-[var(--editor-text)]/90">{title}</p>
+      <p className="text-xs font-semibold text-[color-mix(in_srgb,var(--editor-text)_90%,transparent)]">{title}</p>
 
       {showVolume && (
         <VolumeControl
@@ -211,14 +211,14 @@ export default function TrackSettingsPopover({
 
       {showMute && (
         <div className="flex items-center justify-between">
-          <span className="text-[11px] text-[var(--editor-text)]/70">Mute</span>
+          <span className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]">Mute</span>
           <Switch checked={!!muted} onCheckedChange={onMutedChange!} aria-label={muteAriaLabel} mode={mode} />
         </div>
       )}
 
       {skip && (
         <div className="flex items-center justify-between">
-          <span className="text-[11px] text-[var(--editor-text)]/70">Skip</span>
+          <span className="text-[11px] text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]">Skip</span>
           <Switch checked={skip.skipped} onCheckedChange={() => skip.onToggle()} aria-label={skip.ariaLabel} mode={mode} />
         </div>
       )}

package/src/video/timeline/VolumeControl.tsx

@@ -69,9 +69,9 @@ export default function VolumeControl({
 
   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">
+        <span className="font-mono text-[10px] text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">
           {value.toFixed(2)} ({volumeToDb(value)})
         </span>
       </div>
@@ -100,7 +100,7 @@ export default function VolumeControl({
               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)]'
               }`}
             >
               {Math.round(p * 100)}%