@bycrux/editor 0.12.0 → 1.0.1

package/src/__tests__/video-adapter-contract.test.ts

@@ -2,17 +2,32 @@ import { describe, it, expect } from 'vitest'
 import type {
   EditorAdapter,
   RenderEvent,
+  RenderExport,
   RenderOptions,
+  SampleFrameOptions,
   VersionEntry,
   WaveformChunk,
+  PeaksData,
+  FilmstripIndex,
+  AudioPolishAnalysis,
 } from '../types'
 import type { EditorProject, ImageElement } from '../schema'
 
 // ── Video adapter contract ────────────────────────────────────────────────────
-// The video editor adds four OPTIONAL adapter methods: listVersionHistory,
-// restoreVersion, getWaveformChunks, clearOverlayCache. This file fails to
-// compile if those methods are mistyped, and verifies that (a) an adapter
+// The video editor adds ELEVEN optional adapter methods. This file pins EIGHT
+// of them:
+//   listVersionHistory, restoreVersion, getWaveformChunks, clearOverlayCache,
+//   getWaveformPeaks, getFilmstrip, getSampleFrame, analyzeAudioPolish
+// It fails to compile if those are mistyped, and verifies that (a) an adapter
 // implementing them type-checks and (b) one omitting them still type-checks.
+// It also pins the `RenderOptions` shape both `render` and `renderAsync` accept.
+//
+// The remaining three — resolveCaptionTemplate, generateCaptions, reportContext
+// — are NOT pinned here; they are exercised by their own feature tests
+// (CaptionRegenModal, VideoEditor.context, use-report-context). Stated
+// explicitly because this list previously read as an exhaustive enumeration of
+// the optional surface while silently omitting them, which misleads anyone
+// consulting it to learn what a host may implement.
 
 const project: EditorProject = {
   version: '1',
@@ -23,7 +38,7 @@ const project: EditorProject = {
   editingPrompt: '',
   settings: { resolution: [1080, 1920] },
   assets: [],
-  tracks: [[]],
+  tracks: [{ id: 'trk-0', items: [] }],
 }
 
 const baseRequired = {
@@ -41,7 +56,7 @@ const baseRequired = {
   fileUrl: (path: string): string => path,
 }
 
-// (a) Adapter implementing all four new optional methods.
+// (a) Adapter implementing all seven new optional methods.
 function makeVideoAdapter(): EditorAdapter<EditorProject> {
   return {
     ...baseRequired,
@@ -56,6 +71,34 @@ function makeVideoAdapter(): EditorAdapter<EditorProject> {
       _chunkDurationS?: number,
     ): Promise<WaveformChunk[]> => [{ path: '/wf/0.png', start: 0, end: 15 }],
     clearOverlayCache: (_src?: string): void => {},
+    getWaveformPeaks: async ({ samplesPerSecond }): Promise<PeaksData> => ({
+      samplesPerSecond,
+      start: 0,
+      duration: 15,
+      peaks: [0, 0],
+    }),
+    getFilmstrip: async (_args): Promise<FilmstripIndex> => ({
+      sheets: [{ path: '/fs/sheet_01.jpg', cols: 10, rows: 1, tiles: [{ t: 0, row: 0, col: 0 }] }],
+      interval: 1,
+      tileWidth: 160,
+    }),
+    getSampleFrame: async (
+      _projectId: string,
+      at: number,
+      opts?: SampleFrameOptions,
+    ): Promise<{ url: string }> => ({ url: `/files?at=${at}&curve=${opts?.sdrCurve ?? ''}` }),
+    analyzeAudioPolish: async (args): Promise<AudioPolishAnalysis> => {
+      if (args.piece === 'silence' || args.piece === 'fillers') {
+        return { piece: args.piece, removals: [{ start: 1, end: 2, text: 'um' }] }
+      }
+      if (args.piece === 'silence-check') {
+        return { piece: 'silence-check', keeps: [[0, 1], [2, 3]] }
+      }
+      if (args.piece === 'loudness') {
+        return { piece: 'loudness', measuredI: -18, measuredTP: -1, measuredLRA: 5, targetI: -14, gainDb: 4 }
+      }
+      return { piece: 'voice', vocalsPath: '/audio/vocals.wav', url: '/files?path=vocals.wav' }
+    },
   }
 }
 
@@ -71,12 +114,62 @@ describe('EditorAdapter video methods', () => {
     expect(typeof a.restoreVersion).toBe('function')
     expect(typeof a.getWaveformChunks).toBe('function')
     expect(typeof a.clearOverlayCache).toBe('function')
+    expect(typeof a.getWaveformPeaks).toBe('function')
+    expect(typeof a.getFilmstrip).toBe('function')
+    expect(typeof a.analyzeAudioPolish).toBe('function')
 
     const versions = await a.listVersionHistory!('p1')
     expect(versions[0]).toMatchObject({ hash: 'abc', message: 'init' })
 
     const chunks = await a.getWaveformChunks!('p1', 't1', 'a.mp3', 15)
     expect(chunks[0]).toMatchObject({ path: '/wf/0.png', start: 0, end: 15 })
+
+    const peaks = await a.getWaveformPeaks!({
+      projectId: 'p1',
+      src: 'a.mp4',
+      samplesPerSecond: 200,
+      start: 0,
+      duration: 15,
+    })
+    expect(peaks).toMatchObject({ samplesPerSecond: 200, start: 0, duration: 15 })
+
+    const filmstrip = await a.getFilmstrip!({ projectId: 'p1', src: 'a.mp4' })
+    expect(filmstrip.sheets[0]).toMatchObject({ path: '/fs/sheet_01.jpg', cols: 10, rows: 1 })
+    expect(filmstrip.sheets[0].tiles[0]).toMatchObject({ t: 0, row: 0, col: 0 })
+
+    // A directly displayable URL: the modal puts it straight into an <img>.
+    const sample = await a.getSampleFrame!('p1', 4.5, { sdrCurve: 'vivid1-neutral' })
+    expect(sample.url).toBe('/files?at=4.5&curve=vivid1-neutral')
+    // Options are optional; the host falls back to its default curve.
+    expect((await a.getSampleFrame!('p1', 4.5)).url).toBe('/files?at=4.5&curve=')
+
+    // Discriminated on `piece`; times are source time, never timeline time.
+    const removals = await a.analyzeAudioPolish!({ projectId: 'p1', piece: 'silence', src: 'a.mp4' })
+    if (removals.piece === 'silence' || removals.piece === 'fillers') {
+      expect(removals.removals[0]).toMatchObject({ start: 1, end: 2 })
+    }
+    const keeps = await a.analyzeAudioPolish!({ projectId: 'p1', piece: 'silence-check', src: 'a.mp4' })
+    if (keeps.piece === 'silence-check') {
+      expect(keeps.keeps[0]).toEqual([0, 1])
+    }
+    const loudness = await a.analyzeAudioPolish!({
+      projectId: 'p1',
+      piece: 'loudness',
+      src: 'a.mp4',
+      options: { targetLufs: -14 },
+    })
+    if (loudness.piece === 'loudness') {
+      expect(loudness).toMatchObject({ targetI: -14, gainDb: 4 })
+    }
+    const voice = await a.analyzeAudioPolish!({
+      projectId: 'p1',
+      piece: 'voice',
+      src: 'a.mp4',
+      window: { in: 0, out: 10 },
+    })
+    if (voice.piece === 'voice') {
+      expect(voice.url).toBe('/files?path=vocals.wav')
+    }
   })
 
   it('an adapter omitting the new optional methods still type-checks', () => {
@@ -85,5 +178,35 @@ describe('EditorAdapter video methods', () => {
     expect(a.restoreVersion).toBeUndefined()
     expect(a.getWaveformChunks).toBeUndefined()
     expect(a.clearOverlayCache).toBeUndefined()
+    expect(a.getWaveformPeaks).toBeUndefined()
+    expect(a.getFilmstrip).toBeUndefined()
+    expect(a.getSampleFrame).toBeUndefined()
+    expect(a.analyzeAudioPolish).toBeUndefined()
+  })
+})
+
+// ── Render options shape ──────────────────────────────────────────────────────
+// `export` selects the deliverables for an HDR project; `sdrCurve` names the
+// HDR→SDR tone curve (ids live in montaj_assets/luts/looks.json). Both optional,
+// so an empty object and an omitted argument stay valid calls.
+
+describe('RenderOptions', () => {
+  it('accepts every export mode plus a curve id, and stays fully optional', async () => {
+    const modes: RenderExport[] = ['auto', 'sdr', 'both']
+    const opts: RenderOptions[] = [
+      {},
+      { scale: 2 },
+      ...modes.map(m => ({ export: m, sdrCurve: 'vivid1' })),
+    ]
+    expect(opts.map(o => o.export)).toEqual([undefined, undefined, 'auto', 'sdr', 'both'])
+
+    // Both render entry points take the same options object.
+    const a = makeVideoAdapter()
+    for await (const ev of a.render('p1', { export: 'both', sdrCurve: 'vivid1-neutral' })) {
+      expect(ev.type).toBe('done')
+    }
+
+    const sampleOpts: SampleFrameOptions = { sdrCurve: 'vivid1' }
+    expect(sampleOpts.sdrCurve).toBe('vivid1')
   })
 })

package/src/carousel/AddElementMenu.tsx

@@ -8,9 +8,14 @@ interface Props {
   selectedSlideId: string | null
   adapter: EditorAdapter<Project>
   onAddElement: (slideId: string, element: CarouselElement) => void
+  /** Editor theme mode — light/dark. Threaded to `OverlayPicker`, and used
+   *  locally for the upload/text/generate error hues (red-400 is sub-AA on
+   *  the light side panel). Absent -> dark, matching every existing
+   *  caller. */
+  mode?: 'light' | 'dark'
 }
 
-export default function AddElementMenu({ project, selectedSlideId, adapter, onAddElement }: Props) {
+export default function AddElementMenu({ project, selectedSlideId, adapter, onAddElement, mode = 'dark' }: Props) {
   const [showPrompt, setShowPrompt] = useState(false)
   const [prompt, setPrompt] = useState('')
   const [generating, setGenerating] = useState(false)
@@ -171,8 +176,8 @@ export default function AddElementMenu({ project, selectedSlideId, adapter, onAd
           + Overlay
         </Button>
       </div>
-      {uploadError && <div className="text-xs text-red-400">{uploadError}</div>}
-      {textError && <div className="text-xs text-red-400">{textError}</div>}
+      {uploadError && <div className={`text-xs ${mode === 'light' ? 'text-red-600' : 'text-red-400'}`}>{uploadError}</div>}
+      {textError && <div className={`text-xs ${mode === 'light' ? 'text-red-600' : 'text-red-400'}`}>{textError}</div>}
 
       {showPrompt && !disabled && (
         <div className="flex flex-col gap-2 p-3 bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-lg">
@@ -185,7 +190,7 @@ export default function AddElementMenu({ project, selectedSlideId, adapter, onAd
             disabled={generating}
             onKeyDown={e => { if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) handleGenerate() }}
           />
-          {genError && <div className="text-xs text-red-400">{genError}</div>}
+          {genError && <div className={`text-xs ${mode === 'light' ? 'text-red-600' : 'text-red-400'}`}>{genError}</div>}
           <div className="flex gap-2">
             <Button size="sm" onClick={handleGenerate} disabled={generating || !prompt.trim()} className="text-xs">
               {generating ? 'Generating…' : 'Generate'}
@@ -205,6 +210,7 @@ export default function AddElementMenu({ project, selectedSlideId, adapter, onAd
         onPick={element => {
           if (selectedSlideId) onAddElement(selectedSlideId, element)
         }}
+        mode={mode}
       />
     </div>
   )

package/src/carousel/CarouselEditor.tsx

@@ -1,7 +1,7 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { RefreshCw, AlertCircle, Download, Info, Undo2, Redo2 } from 'lucide-react'
 import type { Project, Slide, CarouselElement, ImageElement, CarouselEditorProps, OverlayFactory } from '../types'
-import { applyTheme, defaultMontajTheme } from '../theme'
+import { applyTheme, defaultMontajTheme, isLightTheme } from '../theme'
 import { useProjectState } from '../state/use-project-state'
 import SlideCanvas from './SlideCanvas'
 import SlidePropertyPanel from './SlidePropertyPanel'
@@ -180,6 +180,14 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
     if (containerRef.current) applyTheme(containerRef.current, theme ?? defaultMontajTheme)
   }, [theme])
 
+  // Classified once here, off the same theme object VideoEditor's
+  // `timelineMode` uses — see that file's comment for why (three independent
+  // consumers resolving light/dark separately is three chances to disagree).
+  const mode = useMemo<'light' | 'dark'>(
+    () => (isLightTheme(theme ?? defaultMontajTheme) ? 'light' : 'dark'),
+    [theme],
+  )
+
   // ── Keyboard shortcuts: undo / redo. Guarded against text inputs. ──
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
@@ -415,7 +423,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
               disabled={refreshing}
               className={`flex items-center gap-2 px-3 py-2 rounded-md border transition-colors ${
                 refreshState === 'err'
-                  ? 'text-red-300 border-red-500/40 bg-red-950/60 hover:bg-red-900/70'
+                  ? (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)]'
               }`}
               title={refreshState === 'err' ? 'Refresh failed — check connection' : 'Refresh project'}
@@ -476,9 +484,29 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
             )}
             {!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">
-                <p className="text-[var(--editor-accent)] text-xs font-bold uppercase tracking-widest">Send this to your agent</p>
-                <div className="flex items-start justify-between bg-black/60 border border-transparent rounded-lg px-3 py-3 font-mono gap-3">
-                  <span className="text-[var(--editor-text)] text-[12px] leading-relaxed break-all">
+                {/* 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
+                    border/shadow around it stay accent - this is small-TEXT only. */}
+                <p className={`text-xs font-bold uppercase tracking-widest ${mode === 'light' ? 'text-indigo-600' : 'text-[var(--editor-accent)]'}`}>Send this to your agent</p>
+                {/* Deliberately hardcoded dark chrome, not `--editor-*` tokens: this
+                    is the literal text the user copies and pastes to their coding
+                    agent, styled as terminal/code chrome — same precedent as the
+                    video preview's black canvas, which also stays dark regardless
+                    of editor theme.
+
+                    This was `bg-black/60`, which composited against whatever sat
+                    behind it: near-black over the dark surface, but only ~#666
+                    over a light one — ~3:1 for 12px copyable text, below AA.
+                    It is now an OPAQUE colour so the box no longer depends on
+                    its backdrop. The specific value is not arbitrary: #070a10 is
+                    exactly what `rgba(0,0,0,0.6)` over the dark theme's
+                    `--editor-surface` (#111827) composited to, so dark mode is
+                    pixel-identical to before while light mode is fixed. Text is
+                    pinned to #f3f4f6 (= the dark theme's `--editor-text`), so it
+                    is likewise unchanged in dark mode and ~18:1 in both. */}
+                <div className="flex items-start justify-between bg-[#070a10] border border-transparent rounded-lg px-3 py-3 font-mono gap-3">
+                  <span className="text-gray-100 text-[12px] leading-relaxed break-all">
                     There is a new project pending: &quot;{project.name ?? project.id}&quot;. Please see @{skillPath} and start. Talk to me if you run into questions.
                   </span>
                   <button
@@ -490,7 +518,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
                       setTimeout(() => setCopied(false), 2000)
                     }}
                     className={`shrink-0 flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-md transition-colors ${
-                      copied ? 'bg-green-700 text-green-200' : 'bg-white/10 text-[var(--editor-text)] hover:bg-white/20 hover:text-[var(--editor-text)]'
+                      copied ? 'bg-green-700 text-green-200' : 'bg-white/10 text-gray-100 hover:bg-white/20 hover:text-gray-100'
                     }`}
                     title="Copy prompt"
                   >
@@ -503,7 +531,14 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
           </div>
         ) : selectedSlide ? (
           <>
-            <div className="flex-shrink-0" style={{ boxShadow: '0 0 0 1px rgba(255,255,255,0.08)' }}>
+            {/* Edge definition for the slide canvas, which sits on `--editor-bg`.
+                Was a fixed `rgba(255,255,255,0.08)`, which read as a hairline
+                highlight on the dark ground but composited to under 1/255 on the
+                light one — the edge silently vanished. Keyed to `--editor-text`
+                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">
               <SlideCanvas
                 slide={selectedSlide}
                 slideId={selectedSlide.id}
@@ -566,6 +601,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
                 selectedSlideId={selectedSlideId}
                 adapter={adapter}
                 onAddElement={handleAddElement}
+                mode={mode}
               />
             </div>
           )}
@@ -587,6 +623,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
             onToggleElementVisibility={onToggleElementVisibility}
             // Fills the right column (drop the default w-80 width + left border).
             className="w-full border-l-0"
+            mode={mode}
           />
         </div>
       </div>
@@ -616,6 +653,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
           exportActions={slots?.exportActions}
           onClose={() => setRenderOpen(false)}
           onCancel={() => setRenderOpen(false)}
+          mode={mode}
         />
       )}
     </div>

package/src/carousel/CarouselRenderModal.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState, type ReactNode } from 'react'
 import { createPortal } from 'react-dom'
 import type { EditorAdapter, Project, RenderStatus } from '../types'
+import { Loader } from '../ui/Loader'
 
 interface CarouselRenderModalProps {
   projectId: string
@@ -19,6 +20,10 @@ interface CarouselRenderModalProps {
    * in the done-state info panel. The package no longer hardcodes host URLs.
    */
   exportActions?: ReactNode
+  /** Editor theme mode — light/dark. The panel and log box follow
+   *  `--editor-surface`/`--editor-bg`, so log/status hues need to darken in
+   *  light mode. Absent -> dark, matching every existing caller. */
+  mode?: 'light' | 'dark'
 }
 
 /** Promoted render output (R2-presigned), as carried by `RenderStatus.media`. */
@@ -57,12 +62,12 @@ function slidesFromMedia(media: RenderMedia[]): SlideView[] {
     .map(({ m }) => ({ url: m.url, filename: m.filename }))
 }
 
-function LogLine({ text }: { text: string }) {
+function LogLine({ text, mode = 'dark' }: { text: string; mode?: 'light' | 'dark' }) {
   const t = text.replace(/^\[render\]\s*/, '')
   let color = 'text-[var(--editor-text)]/60'
-  if (/done|complete|→/i.test(t))           color = 'text-green-400'
-  else if (/rendering|launching|bundling/i.test(t)) color = 'text-sky-400'
-  else if (/error|fail/i.test(t))           color = 'text-red-400'
+  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>
@@ -75,7 +80,7 @@ function LogLine({ text }: { text: string }) {
   )
 }
 
-export default function CarouselRenderModal({ projectId, adapter, slidesCount, resolution, onClose, onCancel, exportActions }: CarouselRenderModalProps) {
+export default function CarouselRenderModal({ projectId, adapter, slidesCount, resolution, onClose, onCancel, exportActions, mode = 'dark' }: CarouselRenderModalProps) {
   const [logs, setLogs]         = useState<string[]>([])
   const [status, setStatus]     = useState<'running' | 'done' | 'error'>('running')
   const [media, setMedia]       = useState<RenderMedia[] | null>(null)
@@ -328,12 +333,12 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
           <div className="px-5 py-8 flex flex-col items-center justify-center gap-4 min-h-[12rem]">
             {status === 'running' ? (
               <>
-                <span className="w-6 h-6 rounded-full border-2 border-amber-400 border-t-transparent animate-spin" />
+                <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-red-400 whitespace-pre-wrap break-words text-center">
+              <p className={`text-sm whitespace-pre-wrap break-words text-center ${mode === 'light' ? 'text-red-600' : 'text-red-400'}`}>
                 {errorMsg ?? 'Render failed.'}
               </p>
             )}
@@ -355,10 +360,10 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
                 <span className="text-[var(--editor-text)]/40 italic">Starting render engine…</span>
               )}
               {logs.map((line, i) => (
-                <LogLine key={i} text={line} />
+                <LogLine key={i} text={line} mode={mode} />
               ))}
               {status === 'error' && errorMsg && (
-                <span className="text-red-400 mt-1">{errorMsg}</span>
+                <span className={`mt-1 ${mode === 'light' ? 'text-red-600' : 'text-red-400'}`}>{errorMsg}</span>
               )}
             </div>
           </div>
@@ -368,7 +373,7 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
           {status === 'running' ? (
             <button
               onClick={handleCancel}
-              className="text-sm px-4 py-1.5 rounded-md bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)] hover:bg-red-900/40 hover:border-red-700 hover:text-red-300 transition-colors"
+              className={`text-sm px-4 py-1.5 rounded-md bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)] transition-colors ${mode === 'light' ? 'hover:bg-red-50 hover:border-red-300 hover:text-red-700' : 'hover:bg-red-900/40 hover:border-red-700 hover:text-red-300'}`}
             >
               Cancel
             </button>

package/src/carousel/OverlayPicker.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import type { Project, OverlayElement, GlobalOverlay, EditorAdapter } from '../types'
+import { Loader } from '../ui/Loader'
 
 // TODO (v2): live thumbnail rendering for each overlay card
 // TODO (v2): respect overlay staticFrame when rendering thumbnails — requires API extension
@@ -10,9 +11,13 @@ interface Props {
   project: Project
   adapter: EditorAdapter<Project>
   onPick: (element: OverlayElement) => void
+  /** Editor theme mode — light/dark. Only affects the load-error text
+   *  (red-400 is sub-AA on a light `--editor-surface`). Absent -> dark,
+   *  matching every existing caller. */
+  mode?: 'light' | 'dark'
 }
 
-export default function OverlayPicker({ open, onClose, project, adapter, onPick }: Props) {
+export default function OverlayPicker({ open, onClose, project, adapter, onPick, mode = 'dark' }: Props) {
   const [overlays, setOverlays] = useState<GlobalOverlay[]>([])
   const [loaded, setLoaded] = useState(false)
   const [loading, setLoading] = useState(false)
@@ -111,10 +116,12 @@ export default function OverlayPicker({ open, onClose, project, adapter, onPick
 
         <div className="flex-1 overflow-y-auto p-4">
           {loading && (
-            <div className="text-center text-[var(--editor-text)]/60 text-sm py-8">Loading overlays…</div>
+            <div className="flex justify-center py-8">
+              <Loader size="md" label="Loading overlays" />
+            </div>
           )}
           {error && (
-            <div className="text-center text-red-400 text-sm py-8">{error}</div>
+            <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>

package/src/carousel/SlidePropertyPanel.tsx

@@ -9,14 +9,10 @@ import type {
   GlobalOverlayProp,
   EditorAdapter,
 } from '../types'
-import { Button, cn, inspectorInputClass, SwatchInput } from '../ui'
+import { Button, cn, inspectorInputClass, NumberField, stepValue, SwatchInput } from '../ui'
+import { Loader } from '../ui/Loader'
 import { TextFormattingToolbar } from '../text/TextFormattingToolbar'
 
-function parseNumber(v: string): number | null {
-  const n = Number(v)
-  return Number.isFinite(n) ? n : null
-}
-
 // Shared small muted label that sits just above an inspector control.
 const fieldLabelClass = 'text-[11px] uppercase tracking-wide text-[var(--editor-text)]/55'
 
@@ -50,6 +46,10 @@ interface Props {
   // full-width (e.g. below the canvas) pass this to drop the default `w-80`
   // sidebar constraint.
   className?: string
+  /** Editor theme mode — light/dark. Threaded to `TextFormattingToolbar`'s
+   *  delete-icon hover hue. Absent -> dark, matching every existing
+   *  caller. */
+  mode?: 'light' | 'dark'
 }
 
 // Small eye toggle to hide/show the selected element in the editor preview only
@@ -78,6 +78,26 @@ function HideToggle({
   )
 }
 
+// `label` doubles as NumberField's accessible `name` — there is no separate
+// visible `<label htmlFor>` wired to the box, just the wrapping `<label>`
+// element below (which already associates the two natively), so reusing the
+// same string keeps the accessible name identical to what a screen reader
+// announced before this converted from a bare `<input>`.
+//
+// This box has no distinct preview/commit split today — every valid keystroke
+// already writes straight through the caller's `onChange`, which is a
+// COMMITTED mutator (see CarouselEditor's `handlePanelElementChange`: it goes
+// through `state.resizeElement(...).then(() => state.commit())`, an async
+// round trip). `onPreview` reproduces that keystroke-writes-through behaviour
+// exactly. `onCommit` is deliberately a no-op rather than the same `onChange`:
+// the old bare `<input>` had no `onBlur` handler at all, so blur committed
+// nothing extra, and because the mutator above is async, `value` cannot be
+// trusted to have caught up with the last keystroke by blur time — wiring
+// `onCommit` to `onChange` would risk firing a second, fully redundant
+// resize/commit (and undo entry) for the same edit. What DOES change here is
+// that typing no longer gets stomped mid-edit by a re-render carrying a
+// stale value back down while the async write is in flight (NumberField's own
+// `draft`, see its doc comment, is the fix).
 function numInput(
   label: string,
   value: number,
@@ -87,17 +107,15 @@ function numInput(
   return (
     <label className="flex flex-col gap-1">
       <span className={fieldLabelClass}>{label}</span>
-      <input
-        type="number"
+      <NumberField
+        name={label}
         value={value}
+        onPreview={onChange}
+        onCommit={() => {}}
         min={opts?.min}
         max={opts?.max}
         step={opts?.step ?? 1}
-        onChange={e => {
-          const parsed = parseNumber(e.target.value)
-          if (parsed !== null) onChange(parsed)
-        }}
-        className={cn(inspectorInputClass, 'text-right')}
+        onStep={d => onChange(stepValue(value, d, { step: opts?.step ?? 1, min: opts?.min, max: opts?.max }))}
       />
     </label>
   )
@@ -145,15 +163,17 @@ function PropEditor({
     return (
       <label className="flex flex-col gap-1" title={description}>
         <span className={fieldLabelClass}>{name}</span>
-        <input
-          type="number"
+        {/* No distinct preview/commit split here either — see `numInput`'s
+            comment above for why `onCommit` is a no-op rather than `onChange`
+            again: `onChange` already writes through per keystroke via an
+            async committed mutator, and blur previously fired nothing. */}
+        <NumberField
+          name={name}
           value={Number(value ?? 0)}
           step={type === 'float' ? 0.1 : 1}
-          onChange={e => {
-            const parsed = parseNumber(e.target.value)
-            if (parsed !== null) onChange(parsed)
-          }}
-          className={cn(inspectorInputClass, 'text-right')}
+          onPreview={onChange}
+          onCommit={() => {}}
+          onStep={d => onChange(stepValue(Number(value ?? 0), d, { step: type === 'float' ? 0.1 : 1 }))}
         />
       </label>
     )
@@ -190,6 +210,7 @@ export default function SlidePropertyPanel({
   hiddenElementIds,
   onToggleElementVisibility,
   className,
+  mode = 'dark',
 }: Props) {
   // Map of jsxPath → GlobalOverlay for overlay prop schemas
   const [overlaySchemas, setOverlaySchemas] = useState<Map<string, GlobalOverlay>>(new Map())
@@ -337,6 +358,7 @@ export default function SlidePropertyPanel({
                   slideId={slide.id}
                   element={overlayEl}
                   updateOverlayProp={updateOverlayProp}
+                  mode={mode}
                 />
               )}
 
@@ -345,7 +367,7 @@ export default function SlidePropertyPanel({
               </div>
 
               {schemasLoading && (
-                <div className="text-xs text-[var(--editor-text)]/55">Loading overlay props…</div>
+                <Loader size="sm" label="Loading overlay props" />
               )}
 
               {!schemasLoading && overlaySchema && overlaySchema.props.length > 0 && (