@bycrux/editor 0.12.0 → 1.0.2

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

@@ -258,6 +258,62 @@ describe('useProjectSync — transient gestures', () => {
     await act(async () => { result.current.undo() })
     expect(result.current.project.name).toBe('Test Project')
   })
+
+  it('discardTransient restores the pre-gesture state without saving or touching undo', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject()
+    const { result } = renderHook(() => useProjectSync(adapter, initial.id, initial))
+    const canUndoBefore = result.current.canUndo
+
+    act(() => {
+      result.current.mutateTransient((p) => ({ ...p, name: 'Drag 1' }))
+      result.current.mutateTransient((p) => ({ ...p, name: 'Drag 2' }))
+    })
+    expect(result.current.project.name).toBe('Drag 2')
+
+    act(() => { result.current.discardTransient() })
+
+    expect(result.current.project).toEqual(initial)
+    expect(adapter.saveProject).not.toHaveBeenCalled()
+    expect(result.current.canUndo).toBe(canUndoBefore)
+  })
+
+  it('discardTransient clears the baseline so a later unrelated commit does not push a stale undo step', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject()
+    const { result } = renderHook(() => useProjectSync(adapter, initial.id, initial))
+
+    // Gesture that gets abandoned.
+    act(() => {
+      result.current.mutateTransient((p) => ({ ...p, name: 'Abandoned Drag' }))
+    })
+    act(() => { result.current.discardTransient() })
+    expect(result.current.project.name).toBe('Test Project')
+    expect(result.current.canUndo).toBe(false)
+
+    // A later, unrelated commit() — NOT preceded by any new mutateTransient —
+    // must not resurrect the discarded gesture's baseline as a phantom undo
+    // step. If discardTransient had merely restored state (the naive
+    // `mutateTransient(() => baseline)` a caller would otherwise have to do)
+    // without clearing `transientBaseline`, this commit() would call
+    // pushUndo(baseline) here and canUndo would flip to true despite no new
+    // gesture ever having happened.
+    await act(async () => { await result.current.commit() })
+
+    expect(result.current.canUndo).toBe(false)
+  })
+
+  it('discardTransient with no transient in flight is a safe no-op', async () => {
+    const adapter = makeFakeAdapter()
+    const initial = makeProject()
+    const { result } = renderHook(() => useProjectSync(adapter, initial.id, initial))
+
+    act(() => { result.current.discardTransient() })
+
+    expect(result.current.project).toEqual(initial)
+    expect(adapter.saveProject).not.toHaveBeenCalled()
+    expect(result.current.canUndo).toBe(false)
+  })
 })
 
 describe('useProjectSync — stale baseline regression', () => {

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

@@ -52,6 +52,8 @@ export interface UseProjectSync<P extends Project = Project> {
   mutateTransient: (fn: (p: P) => P) => void
   /** One queued save for the accumulated transient state; one undo step. */
   commit: () => Promise<void>
+  /** Abandon an in-progress transient gesture — no save, no undo push. */
+  discardTransient: () => void
   /** Apply server-authored state — no save, no undo push (e.g. caption regen). */
   applyExternal: (p: P) => void
   undo: () => void
@@ -230,6 +232,20 @@ export function useProjectSync<P extends Project = Project>(
     )
   }, [save, pushUndo])
 
+  // Abandon an in-progress transient gesture: restore projectRef/state to the
+  // pre-gesture baseline and clear it. No save, no undo push. A no-op when no
+  // transient baseline is set. Exists so callers don't have to reproduce this
+  // themselves via `mutateTransient(() => baseline)`, which would restore the
+  // state but leave `transientBaseline` set — corrupting the NEXT unrelated
+  // commit() into pushing a stale baseline for a gesture that never happened.
+  const discardTransient = useCallback((): void => {
+    const baseline = transientBaseline.current
+    if (baseline === null) return
+    transientBaseline.current = null
+    projectRef.current = baseline
+    setProject(baseline)
+  }, [])
+
   // undo()/redo() — snapshot swap. Pops the target stack, pushes current state
   // to the opposite stack, replaces the entire state, and enqueues a save so the
   // host persists the swap. Also clears transientBaseline: it replaces state
@@ -297,6 +313,7 @@ export function useProjectSync<P extends Project = Project>(
     mutate,
     mutateTransient,
     commit,
+    discardTransient,
     applyExternal,
     undo,
     redo,

package/src/test-setup.ts

@@ -1 +1,33 @@
 import '@testing-library/jest-dom'
+
+// SP3 fix B2: jsdom's canPlayType returns '' for everything, which would make
+// the proxy capability gate strip proxySrc in EVERY test and silently change
+// what the src-selection tests assert. Report the proxy codec as playable so
+// tests exercise the supported path by default; the unsupported path is
+// covered explicitly via __setProxySupportForTests in proxySupport.test.ts.
+const realCanPlayType = HTMLMediaElement.prototype.canPlayType
+HTMLMediaElement.prototype.canPlayType = function (type: string) {
+  if (type.includes('avc1')) return 'probably'
+  return realCanPlayType.call(this, type)
+}
+
+// jsdom implements no ResizeObserver, and several editor components measure
+// themselves with one (CaptionSpecimen, SocialSafeZoneOverlay, the preview's
+// scale observer). Without a stub, merely MOUNTING one of them throws
+// `ReferenceError: ResizeObserver is not defined` — a test-infrastructure
+// failure that reads as a behaviour regression. Eight test files had each
+// grown their own local stub; this is that same stub, installed once.
+//
+// A no-op is the right shape: the callback never fires, so every consumer
+// takes its "not measured yet" path, which each one already handles (e.g.
+// CaptionSpecimen clamps to its readable font-size floor). Tests that need
+// real measurements still override this with their own fake.
+//
+// Guarded so a future jsdom that ships a real implementation wins over ours.
+if (typeof globalThis.ResizeObserver === 'undefined') {
+  globalThis.ResizeObserver = class {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof ResizeObserver
+}

package/src/text/FontPicker.tsx

@@ -1,37 +1,62 @@
 import { useEffect, useRef, useState } from 'react'
 import { ChevronDown } from 'lucide-react'
+import { NumberField, stepValue } from '../ui'
 
 export type FontOption = {
   label: string
   value: string
   isGoogleFont: boolean
+  /** The `googleFonts` fetch spec for this family (e.g. 'Baloo+2:wght@400;700').
+   *  A caller that persists `fontFamily` must persist this alongside it — a
+   *  family whose file is never fetched renders as the fallback face. Absent
+   *  for the non-Google System option. */
+  spec?: string
 }
 
+// No spec below requests a weight above 800, even though `highlight-box` and
+// `outline` (captionStyleDefaults.ts) default to 900 — deliberate, not an
+// oversight. Requesting a weight a family doesn't publish makes Google Fonts
+// drop that family from the returned CSS ENTIRELY, so a synthesized
+// (browser-faked) 900 is strictly better than a font that silently fails to
+// load. Do not "fix" this by adding 900 to any spec.
 export const FONT_OPTIONS: FontOption[] = [
   { label: 'System', value: 'system-ui, -apple-system, "Helvetica Neue", sans-serif', isGoogleFont: false },
-  { label: 'Inter', value: '"Inter", system-ui, sans-serif', isGoogleFont: true },
-  { label: 'Roboto', value: '"Roboto", system-ui, sans-serif', isGoogleFont: true },
-  { label: 'Open Sans', value: '"Open Sans", system-ui, sans-serif', isGoogleFont: true },
-  { label: 'Lato', value: '"Lato", system-ui, sans-serif', isGoogleFont: true },
-  { label: 'Montserrat', value: '"Montserrat", system-ui, sans-serif', isGoogleFont: true },
-  { label: 'Poppins', value: '"Poppins", system-ui, sans-serif', isGoogleFont: true },
-  { label: 'Raleway', value: '"Raleway", system-ui, sans-serif', isGoogleFont: true },
-  { label: 'Nunito', value: '"Nunito", system-ui, sans-serif', isGoogleFont: true },
-  { label: 'Work Sans', value: '"Work Sans", system-ui, sans-serif', isGoogleFont: true },
-  { label: 'DM Sans', value: '"DM Sans", system-ui, sans-serif', isGoogleFont: true },
-  { label: 'Rubik', value: '"Rubik", system-ui, sans-serif', isGoogleFont: true },
-  { label: 'Oswald', value: '"Oswald", system-ui, sans-serif', isGoogleFont: true },
-  { label: 'Bebas Neue', value: '"Bebas Neue", system-ui, sans-serif', isGoogleFont: true },
-  { label: 'Playfair Display', value: '"Playfair Display", Georgia, serif', isGoogleFont: true },
-  { label: 'Merriweather', value: '"Merriweather", Georgia, serif', isGoogleFont: true },
-  { label: 'Source Serif 4', value: '"Source Serif 4", Georgia, serif', isGoogleFont: true },
-  { label: 'JetBrains Mono', value: '"JetBrains Mono", ui-monospace, monospace', isGoogleFont: true },
+  { label: 'Inter', value: '"Inter", system-ui, sans-serif', isGoogleFont: true, spec: 'Inter:wght@400;700' },
+  { label: 'Roboto', value: '"Roboto", system-ui, sans-serif', isGoogleFont: true, spec: 'Roboto:wght@400;700' },
+  { label: 'Open Sans', value: '"Open Sans", system-ui, sans-serif', isGoogleFont: true, spec: 'Open+Sans:wght@400;700' },
+  { label: 'Lato', value: '"Lato", system-ui, sans-serif', isGoogleFont: true, spec: 'Lato:wght@400;700' },
+  { label: 'Montserrat', value: '"Montserrat", system-ui, sans-serif', isGoogleFont: true, spec: 'Montserrat:wght@400;700' },
+  { label: 'Poppins', value: '"Poppins", system-ui, sans-serif', isGoogleFont: true, spec: 'Poppins:wght@400;700' },
+  { label: 'Raleway', value: '"Raleway", system-ui, sans-serif', isGoogleFont: true, spec: 'Raleway:wght@400;700' },
+  { label: 'Nunito', value: '"Nunito", system-ui, sans-serif', isGoogleFont: true, spec: 'Nunito:wght@400;700' },
+  { label: 'Work Sans', value: '"Work Sans", system-ui, sans-serif', isGoogleFont: true, spec: 'Work+Sans:wght@400;700' },
+  { label: 'DM Sans', value: '"DM Sans", system-ui, sans-serif', isGoogleFont: true, spec: 'DM+Sans:wght@400;700' },
+  { label: 'Rubik', value: '"Rubik", system-ui, sans-serif', isGoogleFont: true, spec: 'Rubik:wght@400;700' },
+  { label: 'Oswald', value: '"Oswald", system-ui, sans-serif', isGoogleFont: true, spec: 'Oswald:wght@400;700' },
+  { label: 'Bebas Neue', value: '"Bebas Neue", system-ui, sans-serif', isGoogleFont: true, spec: 'Bebas+Neue:wght@400;700' },
+  { label: 'Playfair Display', value: '"Playfair Display", Georgia, serif', isGoogleFont: true, spec: 'Playfair+Display:wght@400;700' },
+  { label: 'Merriweather', value: '"Merriweather", Georgia, serif', isGoogleFont: true, spec: 'Merriweather:wght@400;700' },
+  { label: 'Source Serif 4', value: '"Source Serif 4", Georgia, serif', isGoogleFont: true, spec: 'Source+Serif+4:wght@400;700' },
+  { label: 'JetBrains Mono', value: '"JetBrains Mono", ui-monospace, monospace', isGoogleFont: true, spec: 'JetBrains+Mono:wght@400;700' },
+  // Rounded / display group — approved for the @cruxthedoberman account.
+  { label: 'Baloo 2', value: '"Baloo 2", system-ui, sans-serif', isGoogleFont: true, spec: 'Baloo+2:wght@400;500;600;700;800' },
+  { label: 'Fredoka', value: '"Fredoka", system-ui, sans-serif', isGoogleFont: true, spec: 'Fredoka:wght@300;400;500;600;700' },
+  { label: 'Sniglet', value: '"Sniglet", system-ui, sans-serif', isGoogleFont: true, spec: 'Sniglet:wght@400;800' },
 ]
 
+// Fetches exactly the weights each family publishes, via the `spec` carried
+// on every Google-font option — the same spec a caller persists alongside
+// fontFamily. Falls back to the old label-derived guess only if `spec` is
+// somehow missing, so a stale/partial FontOption still resolves to a URL.
+// The list is now a slightly bigger stylesheet than the old flat
+// wght@400;700-everywhere version (Baloo 2/Fredoka/Sniglet pull in
+// 300/500/600/800), but that's the correct trade: the picker preview and
+// the persisted spec fetch identical weights, so what you see in the
+// dropdown is what actually renders.
 const GOOGLE_FONTS_URL = (() => {
   const params = FONT_OPTIONS
     .filter((f) => f.isGoogleFont)
-    .map((f) => `family=${f.label.replace(/ /g, '+')}:wght@400;700`)
+    .map((f) => `family=${f.spec ?? `${f.label.replace(/ /g, '+')}:wght@400;700`}`)
     .join('&')
   return `https://fonts.googleapis.com/css2?${params}&display=swap`
 })()
@@ -160,59 +185,68 @@ type FontSizePickerProps = {
 
 // Extract the numeric portion of a stored fontSize. Tolerates "25", "25px",
 // " 25px ", "25 px", or a bare number. Returns '' when no numeric prefix is
-// present so the <input type="number"> can render empty instead of NaN-empty.
+// present so the NumberField renders empty instead of NaN-empty — `''` is
+// exactly how that component spells "no explicit value" (see its `value` doc).
 function parseFontSizeNumeric(value: string): string {
   const m = /^\s*(-?\d+(?:\.\d+)?)/.exec(value)
   return m ? m[1] : ''
 }
 
 export function FontSizePicker({ value, onChange, disabled, min = 8, max = 9999, className }: FontSizePickerProps) {
-  const [local, setLocal] = useState(parseFontSizeNumeric(value))
-  const isFocused = useRef(false)
-  const onChangeRef = useRef(onChange)
-  useEffect(() => {
-    onChangeRef.current = onChange
-  }, [onChange])
-
-  useEffect(() => {
-    if (!isFocused.current) setLocal(parseFontSizeNumeric(value))
-  }, [value])
+  // NumberField carries its own "what's on screen while typing" draft (see its
+  // doc comment) — the bespoke `local` state and `isFocused` ref this used to
+  // hand-roll did exactly that job, so converting drops them rather than
+  // keeping a second copy of the same fix alongside NumberField's.
+  const numericValue = parseFontSizeNumeric(value)
 
   // Commit immediately on every keystroke. Debouncing here is the wrong call
   // for typography — the rendered text is the live preview, so delaying the
-  // PUT delays user feedback.
+  // write delays user feedback. `onPreview` points at this function for that
+  // reason: there is no separate "final" edit here, every valid keystroke
+  // already writes through — and that write is itself a COMMITTED, async
+  // mutator (`onChange` flows to `TextFormattingToolbar`'s
+  // `void updateOverlayProp(...)`, a real round trip; `value` only reflects
+  // it once the promise resolves). `onCommit` is therefore a no-op below,
+  // NOT this same function: blur has nothing left to do once typing already
+  // persisted the edit, and re-firing `commit` there would race the async
+  // write — `outgoing !== value` could still read true for a value
+  // `onPreview` already sent, because `value` has not caught up yet, and
+  // that would fire a second, fully redundant `updateOverlayProp` (and
+  // undo entry) for the same edit. `SlidePropertyPanel`'s `numInput` faces
+  // the identical hazard against its own async mutator — see its comment.
   //
   // CSS font-size requires a unit; a unitless value is invalid and the
   // overlay template falls back to its default. The picker is number-only
   // for the operator, so we attach `px` here before writing — never asking
-  // the user to type the unit themselves.
-  function commit(next: string): void {
-    setLocal(next)
-    if (next === '') return
+  // the user to type the unit themselves. The `outgoing !== value` guard
+  // skips a write that would only echo back what is already stored.
+  //
+  function commit(next: number): void {
     const outgoing = `${next}px`
-    if (outgoing !== value) onChangeRef.current(outgoing)
+    if (outgoing !== value) onChange(outgoing)
+  }
+
+  /** A stepper nudge. Falls back to `min` when the box is empty — the value is
+   *  a free-text CSS length that may carry no numeric prefix at all, and
+   *  nudging from `NaN` would write `NaNpx`. */
+  function step(direction: 1 | -1): void {
+    const from = numericValue === '' ? min : Number(numericValue)
+    commit(stepValue(from, direction, { step: 1, min, max }))
   }
 
   return (
-    <input
-      type="number"
+    <NumberField
+      name="Font size"
+      value={numericValue}
+      onPreview={commit}
+      onCommit={() => {}}
+      onStep={step}
+      disabled={disabled}
       min={min}
       max={max}
-      disabled={disabled}
-      value={local}
       placeholder="size"
-      onChange={(e) => commit(e.target.value)}
-      onFocus={() => {
-        isFocused.current = true
-      }}
-      onBlur={() => {
-        isFocused.current = false
-      }}
-      className={
-        className ??
-        'h-8 w-14 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-2.5 text-sm text-[var(--editor-text)] focus:outline-none focus:border-[var(--editor-accent)] focus:ring-1 focus:ring-[var(--editor-accent)] disabled:opacity-50'
-      }
-      aria-label="Font size"
+      unit="px"
+      className={className ?? 'w-14'}
     />
   )
 }

package/src/text/TextFormattingToolbar.tsx

@@ -60,6 +60,10 @@ export type TextFormattingToolbarProps = {
   element: OverlayElement
   updateOverlayProp: (slideId: string, elementId: string, key: string, value: string) => Promise<unknown>
   onDelete?: () => void
+  /** Editor theme mode — light/dark. Only affects the delete button's hover
+   *  hue (red-400 is sub-AA on a light `--editor-surface`). Absent -> dark,
+   *  matching every existing caller. */
+  mode?: 'light' | 'dark'
 }
 
 export function TextFormattingToolbar({
@@ -67,6 +71,7 @@ export function TextFormattingToolbar({
   element,
   updateOverlayProp,
   onDelete,
+  mode = 'dark',
 }: TextFormattingToolbarProps) {
   const props = element.overlay.props
 
@@ -238,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 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-[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'}`}
           >
             <Trash2 className="h-3.5 w-3.5" />
           </button>

package/src/text/__tests__/FontPicker.options.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest'
+import { FONT_OPTIONS, findFontOption } from '../FontPicker'
+
+describe('FONT_OPTIONS', () => {
+  it('gives every Google font a non-empty spec, and no non-Google font a spec', () => {
+    for (const opt of FONT_OPTIONS) {
+      if (opt.isGoogleFont) {
+        expect(opt.spec, `${opt.label} should have a spec`).toBeTruthy()
+      } else {
+        expect(opt.spec, `${opt.label} should not have a spec`).toBeUndefined()
+      }
+    }
+  })
+
+  it('includes the rounded/display group: Baloo 2, Fredoka, Sniglet', () => {
+    const labels = FONT_OPTIONS.map((f) => f.label)
+    expect(labels).toContain('Baloo 2')
+    expect(labels).toContain('Fredoka')
+    expect(labels).toContain('Sniglet')
+  })
+
+  it('resolves Baloo 2 via findFontOption by its CSS value', () => {
+    const resolved = findFontOption('"Baloo 2", system-ui, sans-serif')
+    expect(resolved?.label).toBe('Baloo 2')
+  })
+
+  it('does not request weight 700 for Sniglet, which only publishes 400 and 800', () => {
+    const sniglet = FONT_OPTIONS.find((f) => f.label === 'Sniglet')
+    expect(sniglet?.spec).toBeTruthy()
+    const weights = sniglet!.spec!.split('wght@')[1]?.split(';') ?? []
+    expect(weights).not.toContain('700')
+    expect(weights).toContain('400')
+    expect(weights).toContain('800')
+  })
+
+  it('has no literal spaces in any spec (URL-safe as a css2 family param)', () => {
+    for (const opt of FONT_OPTIONS) {
+      if (opt.spec) {
+        expect(opt.spec.includes(' '), `${opt.label} spec "${opt.spec}" contains a space`).toBe(false)
+      }
+    }
+  })
+})

package/src/text/__tests__/TextFormattingToolbar.test.tsx

@@ -347,7 +347,7 @@ describe('TextFormattingToolbar — adaptive rendering by element prop schema',
     expect(screen.getByRole('button', { name: /italic/i })).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /text case/i })).toBeInTheDocument();
     expect(screen.getByLabelText(/text color/i)).toBeInTheDocument();
-    expect(screen.getByLabelText(/font size/i)).toBeInTheDocument();
+    expect(screen.getByLabelText('Font size')).toBeInTheDocument();
     expect(screen.getByLabelText(/font family/i)).toBeInTheDocument();
     expect(screen.getByRole('radio', { name: /align left/i })).toBeInTheDocument();
   });
@@ -365,7 +365,7 @@ describe('TextFormattingToolbar — adaptive rendering by element prop schema',
     expect(screen.queryByRole('button', { name: /italic/i })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /text case/i })).not.toBeInTheDocument();
     expect(screen.queryByLabelText(/text color/i)).not.toBeInTheDocument();
-    expect(screen.queryByLabelText(/font size/i)).toBeInTheDocument();
+    expect(screen.queryByLabelText('Font size')).toBeInTheDocument();
     expect(screen.queryByLabelText(/font family/i)).not.toBeInTheDocument();
     expect(screen.queryByRole('radio', { name: /align left/i })).not.toBeInTheDocument();
   });
@@ -380,7 +380,7 @@ describe('TextFormattingToolbar — adaptive rendering by element prop schema',
       />,
     );
     expect(screen.queryByRole('button', { name: /bold/i })).not.toBeInTheDocument();
-    expect(screen.queryByLabelText(/font size/i)).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Font size')).not.toBeInTheDocument();
     expect(screen.getByText(/property panel/i)).toBeInTheDocument();
   });
 
@@ -396,7 +396,7 @@ describe('TextFormattingToolbar — adaptive rendering by element prop schema',
         updateOverlayProp={vi.fn(() => Promise.resolve())}
       />,
     );
-    expect(screen.queryByLabelText(/font size/i)).not.toBeInTheDocument();
+    expect(screen.queryByLabelText('Font size')).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /bold/i })).not.toBeInTheDocument();
     expect(screen.getByText(/property panel/i)).toBeInTheDocument();
   });

package/src/theme.ts

@@ -6,8 +6,8 @@
  * ── CSS variable naming convention ───────────────────────────────────────────
  * Every token is written as a custom property prefixed `--editor-`:
  *   colors   →  --editor-bg, --editor-surface, --editor-accent,
- *               --editor-accent-foreground, --editor-text, --editor-border,
- *               --editor-selection
+ *               --editor-accent-foreground, --editor-accent-text, --editor-text,
+ *               --editor-border, --editor-selection
  *   fonts    →  --editor-font-sans, --editor-font-serif, --editor-font-display
  *   radii    →  --editor-radius-{sm|md|lg}
  *   spacing  →  --editor-space-{n}   (n = scale step)
@@ -69,14 +69,113 @@ export const defaultMontajTheme: EditorTheme = {
   },
 }
 
+/**
+ * Montaj's light editor theme — the counterpart to `defaultMontajTheme` for
+ * hosts that toggle to light mode. Values are chosen to mirror the dark
+ * palette's relationships rather than its literal colors:
+ *   background  gray-100  (#f3f4f6) — the editor shell
+ *   surface     white     (#ffffff) — raised panels/inputs/buttons, brighter
+ *                          than the shell (the dark theme's surface is
+ *                          lighter than its bg too, just inverted in sense)
+ *   border      gray-200  (#e5e7eb) — the hairline
+ *   text        gray-900  (#111827) — primary text
+ *   accent      indigo-500 (#6366f1) — unchanged from the dark theme; Montaj's
+ *                          interactive accent reads fine on either ground
+ *   accentForeground white (#ffffff) — unchanged; readable on the indigo accent
+ *   selection   indigo-500 (#6366f1) — deliberately darker than the dark
+ *                          theme's indigo-400 (#818cf8) so the selection
+ *                          outline has enough contrast against a light ground
+ *   font        Inter (identical to the dark theme)
+ *
+ * fonts/radii/spacing are identical to `defaultMontajTheme` — only the color
+ * ramp changes between modes.
+ */
+export const lightMontajTheme: EditorTheme = {
+  colors: {
+    background: '#f3f4f6',
+    surface: '#ffffff',
+    accent: '#6366f1',
+    accentForeground: '#ffffff',
+    text: '#111827',
+    border: '#e5e7eb',
+    selection: '#6366f1',
+  },
+  fonts: {
+    sans: "'Inter', system-ui, -apple-system, sans-serif",
+  },
+  radii: {
+    sm: '0.25rem',
+    md: '0.5rem',
+    lg: '0.75rem',
+  },
+  spacing: {
+    1: '0.25rem',
+    2: '0.5rem',
+    3: '0.75rem',
+    4: '1rem',
+    6: '1.5rem',
+    8: '2rem',
+  },
+}
+
+/**
+ * Relative-luminance test on `theme.colors.background`, used to classify a
+ * theme as light or dark. Exists because the canvas timeline and
+ * `VideoEditor` render onto an HTML canvas — they can't rely on CSS to pick
+ * their palette, so they need a cheap, direct way to ask "is this theme
+ * light?" without the `EditorTheme` type growing timeline-specific color
+ * tokens (background/grid/playhead/etc.) that only those two consumers care
+ * about. Parses 3- and 6-digit `#rgb`/`#rrggbb` hex; an unparseable or
+ * unrecognized color string falls back to `false` (dark), since dark has
+ * always been the default here and must never silently regress.
+ */
+export function isLightTheme(theme: EditorTheme): boolean {
+  const hex = theme.colors.background.trim()
+  const match = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.exec(hex)
+  if (!match) return false
+
+  const digits = match[1]
+  const expand = (c: string): number => parseInt(c + c, 16)
+
+  let r: number
+  let g: number
+  let b: number
+  if (digits.length === 3) {
+    r = expand(digits[0])
+    g = expand(digits[1])
+    b = expand(digits[2])
+  } else {
+    r = parseInt(digits.slice(0, 2), 16)
+    g = parseInt(digits.slice(2, 4), 16)
+    b = parseInt(digits.slice(4, 6), 16)
+  }
+
+  // Standard relative-luminance weighting (ITU-R BT.601-ish perceptual
+  // weights); thresholded at the midpoint of the 0-255 range.
+  const luminance = 0.299 * r + 0.587 * g + 0.114 * b
+  return luminance > 127.5
+}
+
 /**
  * Write `theme`'s tokens onto `el` as CSS custom properties following the
  * convention documented at the top of this file. Idempotent — calling it again
  * with a different theme overwrites the previously-set vars.
  */
 export function applyTheme(el: HTMLElement, theme: EditorTheme): void {
-  const { style } = el
+  // Write the vars onto the editor container AND :root. The container is the
+  // primary target (scopes the theme to the editor); mirroring to
+  // document.documentElement lets components that portal OUTSIDE the container —
+  // RenderModal renders to document.body so a transformed/filtered host ancestor
+  // can't break its `fixed` overlay — still resolve `var(--editor-*)`. Without
+  // this, those var()-based backgrounds fall back to transparent. Harmless: the
+  // vars are all `--editor-*` prefixed and unused outside editor components.
+  writeThemeVars(el.style, theme)
+  if (typeof document !== 'undefined') {
+    writeThemeVars(document.documentElement.style, theme)
+  }
+}
 
+function writeThemeVars(style: CSSStyleDeclaration, theme: EditorTheme): void {
   // Colors
   style.setProperty('--editor-bg', theme.colors.background)
   style.setProperty('--editor-surface', theme.colors.surface)
@@ -84,6 +183,12 @@ export function applyTheme(el: HTMLElement, theme: EditorTheme): void {
   // Accent-foreground falls back to `text` so it's never empty (e.g. a host
   // theme that omits it still gets a readable foreground for accent controls).
   style.setProperty('--editor-accent-foreground', theme.colors.accentForeground ?? theme.colors.text)
+  // Accent as small TEXT. In LIGHT mode the indigo-500 accent falls just under
+  // the 4.5:1 AA floor as ~10px text on the light ground (~4.06:1), so accent
+  // text nudges to indigo-600 (#4f46e5) there. Dark mode (and any host theme)
+  // keeps the accent unchanged. Fills, borders, rings and buttons keep
+  // `--editor-accent`; ONLY small accent text should read this token.
+  style.setProperty('--editor-accent-text', isLightTheme(theme) ? '#4f46e5' : theme.colors.accent)
   style.setProperty('--editor-text', theme.colors.text)
   style.setProperty('--editor-border', theme.colors.border)
   style.setProperty('--editor-selection', theme.colors.selection)