@bycrux/editor 1.2.2 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bycrux/editor",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "private": false,
   "type": "module",
   "exports": {

package/src/ControlsInfoModal.tsx

@@ -140,7 +140,7 @@ export default function ControlsInfoModal({ title, sections, onClose }: Controls
           <div className="relative flex items-start justify-between gap-4">
             <div className="flex items-center gap-3">
               <span
-                className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border bg-[var(--editor-text)]/[0.06]"
+                className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border bg-[color-mix(in_srgb,var(--editor-text)_6%,transparent)]"
                 style={{ borderColor: 'var(--editor-border)' }}
               >
                 <Command size={17} style={{ color: 'var(--editor-accent)' }} />
@@ -156,7 +156,7 @@ export default function ControlsInfoModal({ title, sections, onClose }: Controls
               type="button"
               onClick={onClose}
               aria-label="Close"
-              className="-mr-1 -mt-1 shrink-0 cursor-pointer rounded-md p-1.5 opacity-55 transition-all hover:bg-[var(--editor-text)]/10 hover:opacity-100"
+              className="-mr-1 -mt-1 shrink-0 cursor-pointer rounded-md p-1.5 opacity-55 transition-all hover:bg-[color-mix(in_srgb,var(--editor-text)_10%,transparent)] hover:opacity-100"
             >
               <X size={18} />
             </button>
@@ -182,7 +182,7 @@ export default function ControlsInfoModal({ title, sections, onClose }: Controls
                     style={{ borderColor: 'var(--editor-border)' }}
                   >
                     <span
-                      className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[var(--editor-text)]/[0.06]"
+                      className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-[color-mix(in_srgb,var(--editor-text)_6%,transparent)]"
                     >
                       <Icon size={14} style={{ color: 'var(--editor-accent)' }} />
                     </span>
@@ -194,7 +194,7 @@ export default function ControlsInfoModal({ title, sections, onClose }: Controls
                     {section.entries.map((entry, i) => (
                       <li
                         key={i}
-                        className="flex items-center justify-between gap-3 rounded-md px-2 py-2 text-sm transition-colors hover:bg-[var(--editor-text)]/[0.06]"
+                        className="flex items-center justify-between gap-3 rounded-md px-2 py-2 text-sm transition-colors hover:bg-[color-mix(in_srgb,var(--editor-text)_6%,transparent)]"
                       >
                         <span className="flex items-start gap-2.5 opacity-90">
                           {/* A toolbar row shows that button's real glyph;

package/src/__tests__/no-opacity-modifier-on-editor-vars.test.ts

@@ -0,0 +1,84 @@
+import { describe, it, expect } from 'vitest'
+import { readFileSync, readdirSync, statSync } from 'node:fs'
+import { dirname, join, relative } from 'node:path'
+import { fileURLToPath } from 'node:url'
+// See ./node-shims.d.ts: this package has no @types/node, so the `node:*`
+// specifiers above have no type declarations under this package's tsconfig.
+// Vitest itself runs on Node and provides the real modules at runtime.
+
+// Tailwind cannot generate a rule for a `/NN` opacity modifier on an
+// arbitrary CSS-variable color — `text-[var(--editor-text)]/60` and friends
+// — because it can't parse an opaque `var(...)` reference to inject an alpha
+// channel. It silently emits NO rule (measured under a host app's Tailwind
+// v3.4), so the class falls back to an inherited/default color, which is how
+// toolbar and timeline icons went invisible against the editor's dark
+// surface. The fix is `color-mix(in_srgb,var(--editor-X)_NN%,transparent)`
+// baked directly into the arbitrary value, so Tailwind never has to parse
+// the color itself (see CHANGELOG.md "Unreleased", and LeftPanelTabs.tsx for
+// the original instance of this fix).
+//
+// This guard fails the build if that dead pattern comes back anywhere in
+// this package's source, from a revert, a bad merge, or a new component
+// copy-pasting an old snippet.
+
+const SRC_ROOT = dirname(dirname(fileURLToPath(import.meta.url)))
+
+// The one deliberate exception: this file quotes the OLD broken class with a
+// real digit (`text-[var(--editor-text)]/40`) inside a comment, as a
+// historical example for a narrower regression test that predates this
+// repo-wide fix. It is not live code and this guard would otherwise treat
+// that quote as a violation.
+const ALLOWLIST = new Set(['video/CaptionListPanel.test.tsx'])
+
+// Requires a digit or `[` right after the slash, matching how the modifier
+// actually looks in real Tailwind classes (`/60`, `/[0.06]`) — this keeps
+// prose like "`text-[var(--editor-text)]/N`" (an `N` placeholder, not a real
+// modifier) out of the check without needing it on the allowlist below.
+const DEAD_OPACITY_MODIFIER = /var\(--editor-[a-z-]+\)\]\/[\d[]/
+
+function collectSourceFiles(dir: string, out: string[] = []): string[] {
+  for (const entry of readdirSync(dir)) {
+    if (entry === 'node_modules') continue
+    const full = join(dir, entry)
+    const stat = statSync(full)
+    if (stat.isDirectory()) {
+      collectSourceFiles(full, out)
+    } else if (/\.(ts|tsx)$/.test(entry)) {
+      out.push(full)
+    }
+  }
+  return out
+}
+
+describe('no dead Tailwind opacity modifier on --editor-* vars', () => {
+  it('finds zero `[var(--editor-*)]/NN`-style classes anywhere in src', () => {
+    const thisFile = fileURLToPath(import.meta.url)
+    const offenders: { file: string; line: number; text: string }[] = []
+
+    for (const file of collectSourceFiles(SRC_ROOT)) {
+      if (file === thisFile) continue
+      const rel = relative(SRC_ROOT, file)
+      if (ALLOWLIST.has(rel)) continue
+
+      const lines = readFileSync(file, 'utf8').split('\n')
+      lines.forEach((line, i) => {
+        if (DEAD_OPACITY_MODIFIER.test(line)) {
+          offenders.push({ file: rel, line: i + 1, text: line.trim() })
+        }
+      })
+    }
+
+    if (offenders.length > 0) {
+      const report = offenders
+        .map((o) => `  ${o.file}:${o.line}: ${o.text}`)
+        .join('\n')
+      throw new Error(
+        `Found ${offenders.length} dead Tailwind opacity-modifier class(es) on an --editor-* var ` +
+          `(Tailwind emits no rule for these — see this test's header comment).\n` +
+          `Replace each with color-mix(in_srgb,var(--editor-X)_NN%,transparent):\n${report}`,
+      )
+    }
+
+    expect(offenders).toEqual([])
+  })
+})

package/src/__tests__/node-shims.d.ts

@@ -0,0 +1,19 @@
+// This package has no @types/node (it's a browser-facing library with no
+// Node-touching runtime code otherwise), so plain TypeScript can't resolve
+// `node:*` specifiers on its own. Vitest runs on Node and provides the real
+// modules at runtime regardless — these ambient shapes cover only the
+// handful of calls `no-opacity-modifier-on-editor-vars.test.ts` makes,
+// purely so `tsc --noEmit` can typecheck that file.
+declare module 'node:fs' {
+  export function readFileSync(path: string, encoding: 'utf8'): string
+  export function readdirSync(path: string): string[]
+  export function statSync(path: string): { isDirectory(): boolean }
+}
+declare module 'node:path' {
+  export function dirname(path: string): string
+  export function join(...parts: string[]): string
+  export function relative(from: string, to: string): string
+}
+declare module 'node:url' {
+  export function fileURLToPath(url: string): string
+}

package/src/carousel/AddElementMenu.tsx

@@ -182,7 +182,7 @@ export default function AddElementMenu({ project, selectedSlideId, adapter, onAd
       {showPrompt && !disabled && (
         <div className="flex flex-col gap-2 p-3 bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-lg">
           <textarea
-            className="w-full bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded px-2 py-1.5 text-xs text-[var(--editor-text)] placeholder-[var(--editor-text)]/60 resize-none focus:outline-none focus:border-[var(--editor-accent)]"
+            className="w-full bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded px-2 py-1.5 text-xs text-[var(--editor-text)] placeholder-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] resize-none focus:outline-none focus:border-[var(--editor-accent)]"
             rows={3}
             placeholder="Describe the image to generate…"
             value={prompt}

package/src/carousel/CarouselEditor.tsx

@@ -73,7 +73,7 @@ function SlideGrid({
   return (
     <div className="w-56 flex-shrink-0 flex flex-col border-r border-[var(--editor-border)] bg-[var(--editor-bg)] overflow-y-auto min-h-0 h-full">
       <div className="px-3 py-2 border-b border-[var(--editor-border)]">
-        <span className="text-xs font-semibold text-[var(--editor-text)]/60 uppercase tracking-wider">Slides</span>
+        <span className="text-xs font-semibold text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] uppercase tracking-wider">Slides</span>
       </div>
       <div className="flex-1 overflow-y-auto py-2 flex flex-col gap-2 px-2">
         {slides.map((slide, idx) => (
@@ -392,7 +392,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
   const canvasScale = Math.min(availW / w, availH / h, 1)
 
   return (
-    <div ref={containerRef} className="flex flex-col h-full overflow-y-auto bg-[var(--editor-bg)]">
+    <div ref={containerRef} className="flex flex-col h-full overflow-y-auto bg-[var(--editor-bg)] text-[var(--editor-text)]">
       {/* TOP: slide rail | canvas | editing panel (right). Fixed viewport-relative
           height with min-h-0 so each of the three columns establishes its own
           independent scroll context; the project-media region flows beneath and
@@ -424,7 +424,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
               className={`flex items-center gap-2 px-3 py-2 rounded-md border transition-colors ${
                 refreshState === 'err'
                   ? (mode === 'light' ? 'text-red-700 border-red-300 bg-red-50 hover:bg-red-100' : 'text-red-300 border-red-500/40 bg-red-950/60 hover:bg-red-900/70')
-                  : 'text-[var(--editor-text)] border-[var(--editor-border)] bg-[var(--editor-surface)]/80 hover:text-[var(--editor-text)] hover:border-[var(--editor-accent)] hover:bg-[var(--editor-surface)]'
+                  : 'text-[var(--editor-text)] border-[var(--editor-border)] bg-[color-mix(in_srgb,var(--editor-surface)_80%,transparent)] hover:text-[var(--editor-text)] hover:border-[var(--editor-accent)] hover:bg-[var(--editor-surface)]'
               }`}
               title={refreshState === 'err' ? 'Refresh failed — check connection' : 'Refresh project'}
             >
@@ -434,7 +434,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
             <button
               onClick={() => state.undo()}
               disabled={!state.canUndo}
-              className="flex items-center justify-center p-2 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)]/80 text-[var(--editor-text)] transition-colors hover:border-[var(--editor-accent)] hover:bg-[var(--editor-surface)] disabled:opacity-40 disabled:cursor-not-allowed"
+              className="flex items-center justify-center p-2 rounded-md border border-[var(--editor-border)] bg-[color-mix(in_srgb,var(--editor-surface)_80%,transparent)] text-[var(--editor-text)] transition-colors hover:border-[var(--editor-accent)] hover:bg-[var(--editor-surface)] disabled:opacity-40 disabled:cursor-not-allowed"
               title="Undo (Cmd/Ctrl+Z)"
               aria-label="Undo"
             >
@@ -443,7 +443,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
             <button
               onClick={() => state.redo()}
               disabled={!state.canRedo}
-              className="flex items-center justify-center p-2 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)]/80 text-[var(--editor-text)] transition-colors hover:border-[var(--editor-accent)] hover:bg-[var(--editor-surface)] disabled:opacity-40 disabled:cursor-not-allowed"
+              className="flex items-center justify-center p-2 rounded-md border border-[var(--editor-border)] bg-[color-mix(in_srgb,var(--editor-surface)_80%,transparent)] text-[var(--editor-text)] transition-colors hover:border-[var(--editor-accent)] hover:bg-[var(--editor-surface)] disabled:opacity-40 disabled:cursor-not-allowed"
               title="Redo (Cmd/Ctrl+Shift+Z)"
               aria-label="Redo"
             >
@@ -479,11 +479,11 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
             {slots?.pendingStatus ?? (
               <div className="flex flex-col items-center gap-2">
                 <p className="text-[var(--editor-text)] text-lg font-semibold">Message your agent to start</p>
-                <p className="text-[var(--editor-text)]/60 text-sm">Nothing will happen automatically. Copy this and send it to your agent.</p>
+                <p className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] text-sm">Nothing will happen automatically. Copy this and send it to your agent.</p>
               </div>
             )}
             {!slots?.pendingStatus && skillPath && (
-              <div className="w-full rounded-xl border-2 border-[var(--editor-accent)] bg-[var(--editor-surface)] p-5 flex flex-col gap-3 text-left shadow-lg shadow-[var(--editor-accent)]/10">
+              <div className="w-full rounded-xl border-2 border-[var(--editor-accent)] bg-[var(--editor-surface)] p-5 flex flex-col gap-3 text-left shadow-lg shadow-[color-mix(in_srgb,var(--editor-accent)_10%,transparent)]">
                 {/* indigo-600 in light mode: the accent (indigo-500) is ~4.06:1 on
                     `--editor-surface`, and 12px bold is still NORMAL text under WCAG
                     (large starts at 18.66px bold), so it needs the 4.5:1 floor. The
@@ -527,7 +527,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
                 </div>
               </div>
             )}
-            <p className="text-[var(--editor-text)]/40 text-xs font-mono">project id: {project.id}</p>
+            <p className="text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] text-xs font-mono">project id: {project.id}</p>
           </div>
         ) : selectedSlide ? (
           <>
@@ -538,7 +538,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
                 instead, the same "tint with the foreground colour" idiom the rest
                 of the chrome uses, so it is a light ring on dark and a dark ring
                 on light at the same subtle strength. */}
-            <div className="flex-shrink-0 ring-1 ring-[var(--editor-text)]/10">
+            <div className="flex-shrink-0 ring-1 ring-[color-mix(in_srgb,var(--editor-text)_10%,transparent)]">
               <SlideCanvas
                 slide={selectedSlide}
                 slideId={selectedSlide.id}
@@ -562,7 +562,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
                 hiddenElementIds={hiddenElementIds}
               />
             </div>
-            <div className="flex-shrink-0 flex items-center justify-center gap-1.5 text-xs text-[var(--editor-text)]/60 max-w-md">
+            <div className="flex-shrink-0 flex items-center justify-center gap-1.5 text-xs text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] max-w-md">
               <span className="text-center">
                 Drag to reposition, resize/rotate via handles, double-click text to edit. Cmd/Ctrl+Z to undo.
               </span>
@@ -578,7 +578,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
             </div>
           </>
         ) : (
-          <div className="text-[var(--editor-text)]/40 text-sm">No slides yet. Add one in the left panel.</div>
+          <div className="text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] text-sm">No slides yet. Add one in the left panel.</div>
         )}
 
         {state.lastError && (

package/src/carousel/CarouselRenderModal.tsx

@@ -64,13 +64,13 @@ function slidesFromMedia(media: RenderMedia[]): SlideView[] {
 
 function LogLine({ text, mode = 'dark' }: { text: string; mode?: 'light' | 'dark' }) {
   const t = text.replace(/^\[render\]\s*/, '')
-  let color = 'text-[var(--editor-text)]/60'
+  let color = 'text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]'
   if (/done|complete|→/i.test(t))           color = mode === 'light' ? 'text-green-700' : 'text-green-400'
   else if (/rendering|launching|bundling/i.test(t)) color = mode === 'light' ? 'text-sky-700' : 'text-sky-400'
   else if (/error|fail/i.test(t))           color = mode === 'light' ? 'text-red-600' : 'text-red-400'
 
   const prefix = text.startsWith('[render]')
-    ? <span className="text-[var(--editor-text)]/40">[render] </span>
+    ? <span className="text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]">[render] </span>
     : null
 
   return (
@@ -266,13 +266,13 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
                     />
                     <div className="absolute bottom-0 left-0 right-0 px-2 py-1.5 bg-black text-[11px] text-[var(--editor-text)] font-mono flex justify-between">
                       <span>#{String(i + 1).padStart(2, '0')}</span>
-                      <span className="text-[var(--editor-text)]/60">{slide.filename}</span>
+                      <span className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">{slide.filename}</span>
                     </div>
                   </a>
                 ))}
               </div>
             ) : (
-              <p className="text-sm text-[var(--editor-text)]/60">Render complete.</p>
+              <p className="text-sm text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">Render complete.</p>
             )}
           </div>
 
@@ -283,12 +283,12 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
                 <span className="w-2 h-2 rounded-full bg-green-400" />
                 <div>
                   <p className="text-sm font-semibold text-[var(--editor-text)]">Render complete</p>
-                  <p className="text-xs text-[var(--editor-text)]/60">
+                  <p className="text-xs text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)]">
                     {slides.length || slidesCount} slide{(slides.length || slidesCount) === 1 ? '' : 's'} ready.
                   </p>
                 </div>
               </div>
-              <button onClick={onClose} className="text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
+              <button onClick={onClose} className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
             </div>
 
             <div className="flex flex-col gap-3 p-5 flex-1">
@@ -325,7 +325,7 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
             </div>
           </div>
           {status !== 'running' && (
-            <button onClick={onClose} className="text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
+            <button onClick={onClose} className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
           )}
         </div>
 
@@ -334,8 +334,8 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
             {status === 'running' ? (
               <>
                 <Loader size="lg" />
-                <p className="text-sm text-[var(--editor-text)]/70">Rendering slides…</p>
-                <p className="text-xs text-[var(--editor-text)]/50">This can take a moment.</p>
+                <p className="text-sm text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]">Rendering slides…</p>
+                <p className="text-xs text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">This can take a moment.</p>
               </>
             ) : (
               <p className={`text-sm whitespace-pre-wrap break-words text-center ${mode === 'light' ? 'text-red-600' : 'text-red-400'}`}>
@@ -347,7 +347,7 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
           <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-accent)] 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-accent)] transition-colors"
               title="Copy logs"
             >
               Copy
@@ -357,7 +357,7 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
               className="h-96 overflow-y-auto px-4 py-3 font-mono text-[11px] text-[var(--editor-text)] bg-[var(--editor-bg)] flex flex-col gap-0.5"
             >
               {logs.length === 0 && status === 'running' && (
-                <span className="text-[var(--editor-text)]/40 italic">Starting render engine…</span>
+                <span className="text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] italic">Starting render engine…</span>
               )}
               {logs.map((line, i) => (
                 <LogLine key={i} text={line} mode={mode} />

package/src/carousel/OverlayPicker.tsx

@@ -108,7 +108,7 @@ export default function OverlayPicker({ open, onClose, project, adapter, onPick,
           <h2 className="text-sm font-semibold text-[var(--editor-text)]">Add Overlay</h2>
           <button
             onClick={onClose}
-            className="text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] transition-colors text-lg leading-none"
+            className="text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:text-[var(--editor-text)] transition-colors text-lg leading-none"
           >
             ×
           </button>
@@ -124,7 +124,7 @@ export default function OverlayPicker({ open, onClose, project, adapter, onPick,
             <div className={`text-center text-sm py-8 ${mode === 'light' ? 'text-red-600' : 'text-red-400'}`}>{error}</div>
           )}
           {!loading && !error && overlays.length === 0 && (
-            <div className="text-center text-[var(--editor-text)]/60 text-sm py-8">No overlays available</div>
+            <div className="text-center text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] text-sm py-8">No overlays available</div>
           )}
           {!loading && !error && overlays.length > 0 && (
             <div className="grid grid-cols-3 gap-3">
@@ -139,7 +139,7 @@ export default function OverlayPicker({ open, onClose, project, adapter, onPick,
                     <div className="text-xs text-[var(--editor-accent)] mt-0.5 truncate">{overlay.group}</div>
                   )}
                   {overlay.description && (
-                    <div className="text-xs text-[var(--editor-text)]/60 mt-1 line-clamp-2">{overlay.description}</div>
+                    <div className="text-xs text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] mt-1 line-clamp-2">{overlay.description}</div>
                   )}
                 </button>
               ))}

package/src/carousel/SlidePropertyPanel.tsx

@@ -14,11 +14,11 @@ import { Loader } from '../ui/Loader'
 import { TextFormattingToolbar } from '../text/TextFormattingToolbar'
 
 // Shared small muted label that sits just above an inspector control.
-const fieldLabelClass = 'text-[11px] uppercase tracking-wide text-[var(--editor-text)]/55'
+const fieldLabelClass = 'text-[11px] uppercase tracking-wide text-[color-mix(in_srgb,var(--editor-text)_55%,transparent)]'
 
 // Section header: SLIDE / OVERLAY / IMAGE.
 const sectionHeaderClass =
-  'text-xs font-semibold uppercase tracking-wider text-[var(--editor-text)]/70'
+  'text-xs font-semibold uppercase tracking-wider text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)]'
 
 interface Props {
   project: Project
@@ -71,7 +71,7 @@ function HideToggle({
       title={isHidden ? 'Show in editor' : 'Hide from editor'}
       aria-label={isHidden ? 'Show in editor' : 'Hide from editor'}
       aria-pressed={isHidden}
-      className="flex h-7 w-7 items-center justify-center rounded text-[var(--editor-text)]/60 hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)]"
+      className="flex h-7 w-7 items-center justify-center rounded text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)]"
     >
       {isHidden ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
     </button>
@@ -238,7 +238,7 @@ export default function SlidePropertyPanel({
 
   if (!slide) {
     return (
-      <div className={cn('w-80 flex-shrink-0 flex items-center justify-center text-[var(--editor-text)]/40 text-xs p-4', className)}>
+      <div className={cn('w-80 flex-shrink-0 flex items-center justify-center text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)] text-xs p-4', className)}>
         Select a slide
       </div>
     )
@@ -295,14 +295,14 @@ export default function SlidePropertyPanel({
               />
               <button
                 onClick={() => onReorderElement(slide.id, element.id, 'forward')}
-                className="flex h-7 w-7 items-center justify-center rounded text-[var(--editor-text)]/60 hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)]"
+                className="flex h-7 w-7 items-center justify-center rounded text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)]"
                 title="Bring forward"
               >
                 ↑
               </button>
               <button
                 onClick={() => onReorderElement(slide.id, element.id, 'backward')}
-                className="flex h-7 w-7 items-center justify-center rounded text-[var(--editor-text)]/60 hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)]"
+                className="flex h-7 w-7 items-center justify-center rounded text-[color-mix(in_srgb,var(--editor-text)_60%,transparent)] hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)]"
                 title="Send backward"
               >
                 ↓

package/src/carousel/__tests__/CarouselEditor.test.tsx

@@ -105,6 +105,18 @@ describe('CarouselEditor — editor-core integration', () => {
     expect(wrapper?.className).not.toContain('w-80')
   })
 
+  // The root sets the editor text colour (as VideoEditor's root does), so chrome
+  // that inherits colour reads --editor-text instead of the host page's colour.
+  it('sets the editor text colour on its root', async () => {
+    const adapter = makeFakeAdapter()
+    const { container } = render(
+      <CarouselEditor project={makeProject()} adapter={adapter} onProjectChange={vi.fn()} />,
+    )
+    const root = container.firstElementChild as HTMLElement
+    expect(root.className).toContain('bg-[var(--editor-bg)]')
+    expect(root.className).toContain('text-[var(--editor-text)]')
+  })
+
   // Regression: SlideGrid thumbnails must receive `compileOverlay` so overlay
   // elements render in the left rail. Before the fix the thumbnail used a
   // noopCompiler that always rejected → a red "overlay error" badge on every

package/src/components/FilmstripScrubber.tsx

@@ -266,7 +266,7 @@ export default function FilmstripScrubber({
       )}
       {phase === 'error' && (
         <div
-          className="pointer-events-none absolute inset-0 flex items-center justify-center bg-[var(--editor-surface)] text-[10px] text-[var(--editor-text)]/40"
+          className="pointer-events-none absolute inset-0 flex items-center justify-center bg-[var(--editor-surface)] text-[10px] text-[color-mix(in_srgb,var(--editor-text)_40%,transparent)]"
           role="status"
         >
           No preview

package/src/crop/VideoSourceCropModal.tsx

@@ -165,7 +165,7 @@ export function VideoSourceCropModal({
       >
         <div className="flex items-center justify-between">
           <h2 className="text-sm font-semibold text-[var(--editor-text)]">Crop source</h2>
-          <span className="text-xs text-[var(--editor-text)]/50">Pick the part of the footage to keep — position &amp; zoom live on the canvas</span>
+          <span className="text-xs text-[color-mix(in_srgb,var(--editor-text)_50%,transparent)]">Pick the part of the footage to keep — position &amp; zoom live on the canvas</span>
         </div>
 
         {/* Source frame + crop window */}
@@ -243,8 +243,8 @@ export function VideoSourceCropModal({
                 title={key === 'free' ? 'Free-form crop' : `Lock crop to ${label}`}
                 className={`flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors ${
                   active
-                    ? 'border-[var(--editor-selection)] bg-[var(--editor-selection)]/15 text-[var(--editor-text)]'
-                    : 'border-[var(--editor-border)] text-[var(--editor-text)]/70 hover:text-[var(--editor-text)]'
+                    ? 'border-[var(--editor-selection)] bg-[color-mix(in_srgb,var(--editor-selection)_15%,transparent)] text-[var(--editor-text)]'
+                    : 'border-[var(--editor-border)] text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)] hover:text-[var(--editor-text)]'
                 }`}
               >
                 <Icon size={14} />
@@ -258,7 +258,7 @@ export function VideoSourceCropModal({
         <div className="flex items-center justify-end gap-2 pt-1">
           <button
             onClick={onClose}
-            className="rounded-md px-3 py-1.5 text-xs font-medium text-[var(--editor-text)]/70 hover:text-[var(--editor-text)] transition-colors"
+            className="rounded-md px-3 py-1.5 text-xs font-medium text-[color-mix(in_srgb,var(--editor-text)_70%,transparent)] hover:text-[var(--editor-text)] transition-colors"
           >
             Cancel
           </button>

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))