@bycrux/editor 0.4.1 → 0.4.3

package/package.json

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

package/src/__tests__/adapter.test.ts

@@ -148,6 +148,9 @@ describe('applyTheme', () => {
     expect(el.style.getPropertyValue('--editor-accent')).toBe(
       defaultMontajTheme.colors.accent,
     )
+    expect(el.style.getPropertyValue('--editor-accent-foreground')).toBe(
+      defaultMontajTheme.colors.accentForeground,
+    )
     expect(el.style.getPropertyValue('--editor-text')).toBe(
       defaultMontajTheme.colors.text,
     )
@@ -162,6 +165,18 @@ describe('applyTheme', () => {
     )
   })
 
+  it('falls back accent-foreground to text when the theme omits it', () => {
+    const el = document.createElement('div')
+    const { accentForeground: _omit, ...colorsWithoutAccentFg } = defaultMontajTheme.colors
+    applyTheme(el, {
+      ...defaultMontajTheme,
+      colors: colorsWithoutAccentFg,
+    })
+    expect(el.style.getPropertyValue('--editor-accent-foreground')).toBe(
+      defaultMontajTheme.colors.text,
+    )
+  })
+
   it('writes serif/display font vars only when present', () => {
     const el = document.createElement('div')
     applyTheme(el, {

package/src/carousel/AddElementMenu.tsx

@@ -175,9 +175,9 @@ export default function AddElementMenu({ project, selectedSlideId, adapter, onAd
       {textError && <div className="text-xs text-red-400">{textError}</div>}
 
       {showPrompt && !disabled && (
-        <div className="flex flex-col gap-2 p-3 bg-gray-800 border border-gray-700 rounded-lg">
+        <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-gray-900 border border-gray-700 rounded px-2 py-1.5 text-xs text-white placeholder-gray-500 resize-none focus:outline-none focus:border-gray-500"
+            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)]"
             rows={3}
             placeholder="Describe the image to generate…"
             value={prompt}

package/src/carousel/CarouselEditor.tsx

@@ -70,9 +70,9 @@ function SlideGrid({
   }
 
   return (
-    <div className="w-56 flex-shrink-0 flex flex-col border-r border-gray-800 bg-gray-950 overflow-y-auto">
-      <div className="px-3 py-2 border-b border-gray-800">
-        <span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">Slides</span>
+    <div className="w-56 flex-shrink-0 flex flex-col border-r border-[var(--editor-border)] bg-[var(--editor-bg)] overflow-y-auto">
+      <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>
       </div>
       <div className="flex-1 overflow-y-auto py-2 flex flex-col gap-2 px-2">
         {slides.map((slide, idx) => (
@@ -84,12 +84,12 @@ function SlideGrid({
             onDrop={() => handleDrop(idx)}
             onDragEnd={handleDragEnd}
             onClick={() => onSelect(slide.id)}
-            className={`group relative cursor-pointer rounded overflow-hidden border transition-colors ${
+            className={`group relative flex-shrink-0 cursor-pointer rounded overflow-hidden border transition-colors ${
               selectedSlideId === slide.id
-                ? 'border-blue-500'
+                ? 'border-[var(--editor-accent)]'
                 : dragOverIdx === idx
-                ? 'border-blue-400 opacity-70'
-                : 'border-gray-700 hover:border-gray-500'
+                ? 'border-[var(--editor-accent)] opacity-70'
+                : 'border-[var(--editor-border)] hover:border-[var(--editor-accent)]'
             }`}
             style={{ width: THUMB_W, height: thumbH }}
           >
@@ -116,7 +116,7 @@ function SlideGrid({
           </div>
         ))}
       </div>
-      <div className="p-2 border-t border-gray-800">
+      <div className="p-2 border-t border-[var(--editor-border)]">
         <Button size="sm" variant="outline" onClick={onAdd} className="w-full text-xs">
           + Add Slide
         </Button>
@@ -357,14 +357,18 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
     obs.observe(el)
     return () => obs.disconnect()
   }, [])
-  const PADDING = 48
-  const HINT_RESERVE = 36
+  const PADDING = 32
+  const HINT_RESERVE = 28
   const availW = Math.max(0, canvasContainerSize.w - PADDING)
   const availH = Math.max(0, canvasContainerSize.h - PADDING - HINT_RESERVE)
   const canvasScale = Math.min(availW / w, availH / h, 1)
 
   return (
-    <div ref={containerRef} className="flex h-full overflow-hidden bg-gray-950">
+    <div ref={containerRef} className="flex flex-col h-full overflow-y-auto bg-[var(--editor-bg)]">
+      {/* TOP: slide rail + canvas. Given a generous viewport-relative height so
+          the slide renders large; the below-panels region flows beneath and the
+          whole editor scrolls vertically. */}
+      <div className="flex flex-shrink-0 min-h-[80vh] overflow-hidden">
       <SlideGrid
         project={project}
         slides={slides}
@@ -378,14 +382,14 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
         compileOverlay={(t) => adapter.compileOverlay(t)}
       />
 
-      <div ref={canvasContainerRef} className="relative flex-1 flex flex-col items-center justify-center gap-4 overflow-hidden p-6">
+      <div ref={canvasContainerRef} className="relative flex-1 flex flex-col items-center justify-center gap-4 overflow-hidden p-4">
         <button
           onClick={handleRefresh}
           disabled={refreshing}
           className={`absolute top-3 left-3 z-30 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'
-              : 'text-gray-200 border-gray-700 bg-gray-900/80 hover:text-white hover:border-gray-500 hover:bg-gray-800'
+              : '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'}
         >
@@ -398,7 +402,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
           <button
             onClick={handleRender}
             disabled={rendering || project.status === 'pending' || slides.length === 0}
-            className="flex items-center gap-2 px-3 py-2 rounded-md border border-blue-500/50 bg-blue-600/80 text-white hover:bg-blue-600 hover:border-blue-400 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+            className="flex items-center gap-2 px-3 py-2 rounded-md border border-[var(--editor-accent)] bg-[var(--editor-accent)] text-[var(--editor-accent-foreground)] hover:opacity-90 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
             title={
               project.status === 'pending'
                 ? 'Wait for the agent to finish before rendering'
@@ -416,15 +420,15 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
           <div className="flex flex-col items-center gap-6 text-center max-w-lg w-full">
             {slots?.pendingStatus ?? (
               <div className="flex flex-col items-center gap-2">
-                <p className="text-white text-lg font-semibold">Message your agent to start</p>
-                <p className="text-gray-400 text-sm">Nothing will happen automatically. Copy this and send it to your agent.</p>
+                <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>
               </div>
             )}
             {!slots?.pendingStatus && skillPath && (
-              <div className="w-full rounded-xl border-2 border-blue-400/50 bg-gray-900 p-5 flex flex-col gap-3 text-left shadow-lg shadow-blue-400/10">
-                <p className="text-blue-400 text-xs font-bold uppercase tracking-widest">Send this to your agent</p>
+              <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-gray-200 text-[12px] leading-relaxed break-all">
+                  <span className="text-[var(--editor-text)] 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
@@ -436,7 +440,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-gray-300 hover:bg-white/20 hover:text-white'
+                      copied ? 'bg-green-700 text-green-200' : 'bg-white/10 text-[var(--editor-text)] hover:bg-white/20 hover:text-[var(--editor-text)]'
                     }`}
                     title="Copy prompt"
                   >
@@ -445,7 +449,7 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
                 </div>
               </div>
             )}
-            <p className="text-gray-600 text-xs font-mono">project id: {project.id}</p>
+            <p className="text-[var(--editor-text)]/40 text-xs font-mono">project id: {project.id}</p>
           </div>
         ) : selectedSlide ? (
           <>
@@ -473,12 +477,12 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
                 hiddenElementIds={hiddenElementIds}
               />
             </div>
-            <p className="flex-shrink-0 text-xs text-gray-500 text-center max-w-md">
+            <p className="flex-shrink-0 text-xs text-[var(--editor-text)]/60 text-center max-w-md">
               Drag to reposition, resize/rotate via handles, double-click text to edit. Cmd/Ctrl+Z to undo.
             </p>
           </>
         ) : (
-          <div className="text-gray-600 text-sm">No slides yet. Add one in the left panel.</div>
+          <div className="text-[var(--editor-text)]/40 text-sm">No slides yet. Add one in the left panel.</div>
         )}
 
         {state.lastError && (
@@ -488,11 +492,16 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
             <button onClick={state.clearError} className="ml-2 underline">dismiss</button>
           </div>
         )}
+        </div>
       </div>
 
-      <div className="flex-shrink-0 flex flex-col overflow-hidden">
+      {/* BELOW: the slide editor, stacked vertically full-width under the canvas.
+          Flows beneath the tall canvas region and scrolls with the page (the root
+          is overflow-y-auto). Order: add-element toolbar → property panel →
+          project media (assets) at the very bottom. */}
+      <div className="flex-shrink-0 border-t border-[var(--editor-border)] bg-[var(--editor-bg)] flex flex-col">
         {selectedSlide && project.status !== 'pending' && (
-          <div className="px-4 py-2 border-l border-b border-gray-800 bg-gray-950">
+          <div className="px-4 py-2 border-b border-[var(--editor-border)] bg-[var(--editor-bg)]">
             <AddElementMenu
               project={project}
               selectedSlideId={selectedSlideId}
@@ -517,13 +526,12 @@ export default function CarouselEditor<P extends Project = Project>({ project: i
           updateOverlayProp={state.updateOverlayProp}
           hiddenElementIds={hiddenElementIds}
           onToggleElementVisibility={onToggleElementVisibility}
+          // Stacked full-width here (drop the default w-80 sidebar + left border).
+          className="w-full border-l-0 border-b border-[var(--editor-border)]"
         />
         {slots?.assetsPanel && (
-          // Bound the assets slot to the sidebar width (matches SlidePropertyPanel's
-          // w-80) and scroll vertically. Without a width cap, a wide host panel
-          // (e.g. a full media-library card) blows out this column and crushes the
-          // flex-1 canvas. Host content lays out within the 320px sidebar.
-          <div className="w-80 flex-shrink-0 border-t border-gray-800 flex flex-col overflow-y-auto overflow-x-hidden" style={{ minHeight: 180 }}>
+          // Project media — at the very bottom, full width.
+          <div className="w-full flex flex-col">
             {slots.assetsPanel}
           </div>
         )}

package/src/carousel/CarouselRenderModal.tsx

@@ -26,13 +26,13 @@ function slideFile(index: number): string {
 
 function LogLine({ text }: { text: string }) {
   const t = text.replace(/^\[render\]\s*/, '')
-  let color = 'text-gray-400'
+  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'
 
   const prefix = text.startsWith('[render]')
-    ? <span className="text-gray-600">[render] </span>
+    ? <span className="text-[var(--editor-text)]/40">[render] </span>
     : null
 
   return (
@@ -110,7 +110,7 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
   if (status === 'done' && outputDir) {
     return (
       <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-md">
-        <div className="w-[96vw] h-[96vh] bg-gray-950 border border-gray-800 rounded-2xl shadow-2xl flex overflow-hidden">
+        <div className="w-[96vw] h-[96vh] bg-[var(--editor-bg)] border border-[var(--editor-border)] rounded-2xl shadow-2xl flex overflow-hidden">
 
           {/* Left — slide gallery */}
           <div className="flex-1 bg-black flex items-center justify-center overflow-auto p-8">
@@ -127,7 +127,7 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
                     href={url}
                     target="_blank"
                     rel="noreferrer"
-                    className="group relative block rounded-lg overflow-hidden border border-gray-800 hover:border-gray-600 transition-colors bg-gray-900"
+                    className="group relative block rounded-lg overflow-hidden border border-[var(--editor-border)] hover:border-[var(--editor-accent)] transition-colors bg-[var(--editor-surface)]"
                   >
                     <img
                       src={url}
@@ -135,9 +135,9 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
                       className="block w-full h-auto"
                       style={{ aspectRatio: `${resolution[0]} / ${resolution[1]}` }}
                     />
-                    <div className="absolute bottom-0 left-0 right-0 px-2 py-1.5 bg-black/70 backdrop-blur-sm text-[11px] text-gray-300 font-mono flex justify-between">
+                    <div className="absolute bottom-0 left-0 right-0 px-2 py-1.5 bg-black/70 backdrop-blur-sm text-[11px] text-[var(--editor-text)] font-mono flex justify-between">
                       <span>#{String(i + 1).padStart(2, '0')}</span>
-                      <span className="text-gray-500">{file}</span>
+                      <span className="text-[var(--editor-text)]/60">{file}</span>
                     </div>
                   </a>
                 )
@@ -146,26 +146,26 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
           </div>
 
           {/* Right — info panel */}
-          <div className="w-72 shrink-0 flex flex-col border-l border-gray-800">
-            <div className="flex items-center justify-between px-5 py-4 border-b border-gray-800">
+          <div className="w-72 shrink-0 flex flex-col border-l border-[var(--editor-border)]">
+            <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--editor-border)]">
               <div className="flex items-center gap-2.5">
                 <span className="w-2 h-2 rounded-full bg-green-400" />
                 <div>
-                  <p className="text-sm font-semibold text-white">Render complete</p>
-                  <p className="text-xs text-gray-400">
+                  <p className="text-sm font-semibold text-[var(--editor-text)]">Render complete</p>
+                  <p className="text-xs text-[var(--editor-text)]/60">
                     {slidesCount} slide{slidesCount === 1 ? '' : 's'} ready.
                   </p>
                 </div>
               </div>
-              <button onClick={onClose} className="text-gray-500 hover:text-white transition-colors text-lg leading-none">×</button>
+              <button onClick={onClose} className="text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
             </div>
 
             <div className="flex flex-col gap-3 p-5 flex-1">
-              <p className="text-xs font-mono text-gray-500 break-all leading-relaxed">{outputDir}</p>
+              <p className="text-xs font-mono text-[var(--editor-text)]/60 break-all leading-relaxed">{outputDir}</p>
               {exportActions}
               <button
                 onClick={onClose}
-                className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-gray-800 border border-gray-700 text-gray-300 hover:bg-gray-700 transition-colors"
+                className="w-full text-center text-sm px-4 py-2.5 rounded-lg bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)] hover:opacity-90 transition-colors"
               >
                 Close
               </button>
@@ -179,37 +179,37 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
   // ── Running / error state — log readout ─────────────────────────────────
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
-      <div className="w-full max-w-3xl bg-gray-900 border border-gray-700 rounded-xl shadow-2xl flex flex-col overflow-hidden">
+      <div className="w-full max-w-3xl bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-xl shadow-2xl flex flex-col overflow-hidden">
 
-        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-800">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--editor-border)]">
           <div className="flex items-center gap-2.5">
             {status === 'running' && <span className="w-2 h-2 rounded-full bg-amber-400 animate-pulse" />}
             {status === 'error'   && <span className="w-2 h-2 rounded-full bg-red-400" />}
             <div className="flex flex-col gap-0.5">
-              <h2 className="text-sm font-semibold text-white">
+              <h2 className="text-sm font-semibold text-[var(--editor-text)]">
                 {status === 'running' ? 'Rendering slides…' : 'Render failed'}
               </h2>
             </div>
           </div>
           {status !== 'running' && (
-            <button onClick={onClose} className="text-gray-500 hover:text-white transition-colors text-lg leading-none">×</button>
+            <button onClick={onClose} className="text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] transition-colors text-lg leading-none">×</button>
           )}
         </div>
 
         <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-gray-800 border border-gray-700 text-gray-400 hover:text-white hover:border-gray-500 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-[var(--editor-text)]/60 hover:text-[var(--editor-text)] hover:border-[var(--editor-accent)] transition-colors"
             title="Copy logs"
           >
             Copy
           </button>
           <div
             ref={logRef}
-            className="h-96 overflow-y-auto px-4 py-3 font-mono text-[11px] text-gray-300 bg-gray-950 flex flex-col gap-0.5"
+            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-gray-600 italic">Starting render engine…</span>
+              <span className="text-[var(--editor-text)]/40 italic">Starting render engine…</span>
             )}
             {logs.map((line, i) => (
               <LogLine key={i} text={line} />
@@ -220,18 +220,18 @@ export default function CarouselRenderModal({ projectId, adapter, slidesCount, r
           </div>
         </div>
 
-        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-gray-800">
+        <div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-[var(--editor-border)]">
           {status === 'running' ? (
             <button
               onClick={handleCancel}
-              className="text-sm px-4 py-1.5 rounded-md bg-gray-800 border border-gray-700 text-gray-300 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)] hover:bg-red-900/40 hover:border-red-700 hover:text-red-300 transition-colors"
             >
               Cancel
             </button>
           ) : (
             <button
               onClick={onClose}
-              className="text-sm px-4 py-1.5 rounded-md bg-gray-800 border border-gray-700 text-white hover:bg-gray-700 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)] hover:opacity-90 transition-colors"
             >
               Close
             </button>

package/src/carousel/OverlayPicker.tsx

@@ -98,12 +98,12 @@ export default function OverlayPicker({ open, onClose, project, adapter, onPick
       className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
       onClick={(e) => { if (e.target === e.currentTarget) onClose() }}
     >
-      <div className="bg-gray-900 border border-gray-700 rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col overflow-hidden">
-        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-800">
-          <h2 className="text-sm font-semibold text-white">Add Overlay</h2>
+      <div className="bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded-xl shadow-2xl w-full max-w-2xl max-h-[80vh] flex flex-col overflow-hidden">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--editor-border)]">
+          <h2 className="text-sm font-semibold text-[var(--editor-text)]">Add Overlay</h2>
           <button
             onClick={onClose}
-            className="text-gray-500 hover:text-white transition-colors text-lg leading-none"
+            className="text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] transition-colors text-lg leading-none"
           >
             ×
           </button>
@@ -111,13 +111,13 @@ export default function OverlayPicker({ open, onClose, project, adapter, onPick
 
         <div className="flex-1 overflow-y-auto p-4">
           {loading && (
-            <div className="text-center text-gray-500 text-sm py-8">Loading overlays…</div>
+            <div className="text-center text-[var(--editor-text)]/60 text-sm py-8">Loading overlays…</div>
           )}
           {error && (
             <div className="text-center text-red-400 text-sm py-8">{error}</div>
           )}
           {!loading && !error && overlays.length === 0 && (
-            <div className="text-center text-gray-500 text-sm py-8">No overlays available</div>
+            <div className="text-center text-[var(--editor-text)]/60 text-sm py-8">No overlays available</div>
           )}
           {!loading && !error && overlays.length > 0 && (
             <div className="grid grid-cols-3 gap-3">
@@ -125,14 +125,14 @@ export default function OverlayPicker({ open, onClose, project, adapter, onPick
                 <button
                   key={overlay.jsxPath}
                   onClick={() => handlePick(overlay)}
-                  className="text-left p-3 bg-gray-800 hover:bg-gray-700 border border-gray-700 hover:border-gray-500 rounded-lg transition-colors"
+                  className="text-left p-3 bg-[var(--editor-surface)] hover:opacity-90 border border-[var(--editor-border)] hover:border-[var(--editor-accent)] rounded-lg transition-colors"
                 >
-                  <div className="text-sm font-medium text-white truncate">{overlay.name}</div>
+                  <div className="text-sm font-medium text-[var(--editor-text)] truncate">{overlay.name}</div>
                   {overlay.group && (
-                    <div className="text-xs text-blue-400 mt-0.5 truncate">{overlay.group}</div>
+                    <div className="text-xs text-[var(--editor-accent)] mt-0.5 truncate">{overlay.group}</div>
                   )}
                   {overlay.description && (
-                    <div className="text-xs text-gray-400 mt-1 line-clamp-2">{overlay.description}</div>
+                    <div className="text-xs text-[var(--editor-text)]/60 mt-1 line-clamp-2">{overlay.description}</div>
                   )}
                 </button>
               ))}

package/src/carousel/SlideCanvas.tsx

@@ -386,7 +386,7 @@ export default function SlideCanvas({
             transformOrigin: 'center center',
             pointerEvents: interactive ? 'auto' : 'none',
             userSelect: 'none',
-            outline: isSelected ? '1px solid #3b82f6' : 'none',
+            outline: isSelected ? '1px solid var(--editor-selection)' : 'none',
             cursor: interactive ? 'grab' : 'default',
           }
 
@@ -442,13 +442,28 @@ export default function SlideCanvas({
                 />
               )
             ) : (
-              <OverlayErrorBoundary
-                label={element.overlay.template.split('/').pop() ?? element.overlay.template}
-                watchPath={element.overlay.template}
-                watchFile={watchFile}
+              // Overlays are authored in NATIVE slide pixels (fixed font sizes sized
+              // for element.w×element.h at full resolution). The wrapper is already
+              // shrunk to element.w*scale, so render the overlay at native size and
+              // CSS-scale it to fit — mirroring the renderer. Without this the
+              // native-size text overflows the shrunk box and overlaps (the box
+              // sizing only auto-fits resolution-independent content like <img>).
+              <div
+                style={{
+                  width: element.w,
+                  height: element.h,
+                  transform: `scale(${scale})`,
+                  transformOrigin: 'top left',
+                }}
               >
-                <OverlayElementView element={element} compileOverlay={compileOverlay} />
-              </OverlayErrorBoundary>
+                <OverlayErrorBoundary
+                  label={element.overlay.template.split('/').pop() ?? element.overlay.template}
+                  watchPath={element.overlay.template}
+                  watchFile={watchFile}
+                >
+                  <OverlayElementView element={element} compileOverlay={compileOverlay} />
+                </OverlayErrorBoundary>
+              </div>
             )
 
           return (
@@ -510,7 +525,7 @@ export default function SlideCanvas({
                           top,
                           width: HANDLE_SIZE,
                           height: HANDLE_SIZE,
-                          background: '#3b82f6',
+                          background: 'var(--editor-selection)',
                           border: '1px solid #fff',
                           borderRadius: 1,
                           cursor: h.cursor,
@@ -529,7 +544,7 @@ export default function SlideCanvas({
                       top: -ROTATE_OFFSET,
                       width: 1,
                       height: ROTATE_OFFSET,
-                      background: '#3b82f6',
+                      background: 'var(--editor-selection)',
                       pointerEvents: 'none',
                       zIndex: 9,
                     }}
@@ -559,7 +574,7 @@ export default function SlideCanvas({
                       top: -ROTATE_OFFSET - 14,
                       width: 14,
                       height: 14,
-                      background: '#3b82f6',
+                      background: 'var(--editor-selection)',
                       border: '2px solid #fff',
                       borderRadius: '50%',
                       cursor: 'crosshair',
@@ -575,7 +590,7 @@ export default function SlideCanvas({
                         bottom: -20,
                         left: 0,
                         fontSize: 10,
-                        color: '#93c5fd',
+                        color: 'var(--editor-selection)',
                         pointerEvents: 'none',
                         whiteSpace: 'nowrap',
                       }}

package/src/carousel/SlidePropertyPanel.tsx

@@ -9,7 +9,7 @@ import type {
   GlobalOverlayProp,
   EditorAdapter,
 } from '../types'
-import { Button } from '../ui'
+import { Button, cn } from '../ui'
 import { TextFormattingToolbar } from '../text/TextFormattingToolbar'
 
 function parseNumber(v: string): number | null {
@@ -39,6 +39,10 @@ interface Props {
   // selected element; `hiddenElementIds` reflects the current hidden set.
   hiddenElementIds?: string[]
   onToggleElementVisibility?: (elementId: string) => void
+  // Override the panel's root container classes. Hosts that stack the panel
+  // full-width (e.g. below the canvas) pass this to drop the default `w-80`
+  // sidebar constraint.
+  className?: string
 }
 
 // Small eye toggle to hide/show the selected element in the editor preview only
@@ -60,7 +64,7 @@ function HideToggle({
       title={isHidden ? 'Show in editor' : 'Hide from editor'}
       aria-label={isHidden ? 'Show in editor' : 'Hide from editor'}
       aria-pressed={isHidden}
-      className="text-gray-500 hover:text-white px-1"
+      className="text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] px-1"
     >
       {isHidden ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
     </button>
@@ -75,7 +79,7 @@ function numInput(
 ) {
   return (
     <label className="flex flex-col gap-0.5">
-      <span className="text-xs text-gray-500">{label}</span>
+      <span className="text-xs text-[var(--editor-text)]/60">{label}</span>
       <input
         type="number"
         value={value}
@@ -86,7 +90,7 @@ function numInput(
           const parsed = parseNumber(e.target.value)
           if (parsed !== null) onChange(parsed)
         }}
-        className="bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-white focus:outline-none focus:border-gray-500 w-full"
+        className="bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded px-2 py-1 text-xs text-[var(--editor-text)] focus:outline-none focus:border-[var(--editor-accent)] w-full"
       />
     </label>
   )
@@ -110,9 +114,9 @@ function PropEditor({
           type="checkbox"
           checked={Boolean(value)}
           onChange={e => onChange(e.target.checked)}
-          className="accent-blue-500"
+          className="accent-[var(--editor-accent)]"
         />
-        <span className="text-xs text-gray-300">{name}</span>
+        <span className="text-xs text-[var(--editor-text)]">{name}</span>
       </label>
     )
   }
@@ -120,12 +124,12 @@ function PropEditor({
   if (type === 'color') {
     return (
       <label className="flex flex-col gap-0.5" title={description}>
-        <span className="text-xs text-gray-500">{name}</span>
+        <span className="text-xs text-[var(--editor-text)]/60">{name}</span>
         <input
           type="color"
           value={String(value ?? '#000000')}
           onChange={e => onChange(e.target.value)}
-          className="w-full h-7 bg-gray-800 border border-gray-700 rounded cursor-pointer"
+          className="w-full h-7 bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded cursor-pointer"
         />
       </label>
     )
@@ -134,7 +138,7 @@ function PropEditor({
   if (type === 'int' || type === 'float') {
     return (
       <label className="flex flex-col gap-0.5" title={description}>
-        <span className="text-xs text-gray-500">{name}</span>
+        <span className="text-xs text-[var(--editor-text)]/60">{name}</span>
         <input
           type="number"
           value={Number(value ?? 0)}
@@ -143,7 +147,7 @@ function PropEditor({
             const parsed = parseNumber(e.target.value)
             if (parsed !== null) onChange(parsed)
           }}
-          className="bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-white focus:outline-none focus:border-gray-500 w-full"
+          className="bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded px-2 py-1 text-xs text-[var(--editor-text)] focus:outline-none focus:border-[var(--editor-accent)] w-full"
         />
       </label>
     )
@@ -152,12 +156,12 @@ function PropEditor({
   // string fallback
   return (
     <label className="flex flex-col gap-0.5" title={description}>
-      <span className="text-xs text-gray-500">{name}</span>
+      <span className="text-xs text-[var(--editor-text)]/60">{name}</span>
       <input
         type="text"
         value={String(value ?? '')}
         onChange={e => onChange(e.target.value)}
-        className="bg-gray-800 border border-gray-700 rounded px-2 py-1 text-xs text-white focus:outline-none focus:border-gray-500 w-full"
+        className="bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded px-2 py-1 text-xs text-[var(--editor-text)] focus:outline-none focus:border-[var(--editor-accent)] w-full"
       />
     </label>
   )
@@ -179,6 +183,7 @@ export default function SlidePropertyPanel({
   adapter,
   hiddenElementIds,
   onToggleElementVisibility,
+  className,
 }: Props) {
   // Map of jsxPath → GlobalOverlay for overlay prop schemas
   const [overlaySchemas, setOverlaySchemas] = useState<Map<string, GlobalOverlay>>(new Map())
@@ -206,7 +211,7 @@ export default function SlidePropertyPanel({
 
   if (!slide) {
     return (
-      <div className="w-80 flex-shrink-0 flex items-center justify-center text-gray-600 text-xs p-4">
+      <div className={cn('w-80 flex-shrink-0 flex items-center justify-center text-[var(--editor-text)]/40 text-xs p-4', className)}>
         Select a slide
       </div>
     )
@@ -216,18 +221,18 @@ export default function SlidePropertyPanel({
   const overlaySchema = overlayEl ? overlaySchemas.get(overlayEl.overlay.template) : null
 
   return (
-    <div className="w-80 flex-shrink-0 border-l border-gray-800 flex flex-col overflow-y-auto bg-gray-950">
+    <div className={cn('w-80 flex-shrink-0 border-l border-[var(--editor-border)] flex flex-col overflow-y-auto bg-[var(--editor-bg)]', className)}>
       {/* Slide header */}
-      <div className="px-4 py-3 border-b border-gray-800">
-        <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">Slide</div>
+      <div className="px-4 py-3 border-b border-[var(--editor-border)]">
+        <div className="text-xs font-semibold text-[var(--editor-text)]/60 uppercase tracking-wider mb-2">Slide</div>
         <div className="flex flex-col gap-2">
           <label className="flex flex-col gap-0.5">
-            <span className="text-xs text-gray-500">Background color</span>
+            <span className="text-xs text-[var(--editor-text)]/60">Background color</span>
             <input
               type="color"
               value={slide.base_color || '#ffffff'}
               onChange={e => onSlideChange({ base_color: e.target.value })}
-              className="w-full h-7 bg-gray-800 border border-gray-700 rounded cursor-pointer"
+              className="w-full h-7 bg-[var(--editor-surface)] border border-[var(--editor-border)] rounded cursor-pointer"
             />
           </label>
           <div className="flex gap-2">
@@ -255,7 +260,7 @@ export default function SlidePropertyPanel({
       {element && (
         <div className="px-4 py-3 flex flex-col gap-3">
           <div className="flex items-center justify-between">
-            <span className="text-xs font-semibold text-gray-400 uppercase tracking-wider">
+            <span className="text-xs font-semibold text-[var(--editor-text)]/60 uppercase tracking-wider">
               {element.type === 'image' ? 'Image' : 'Overlay'}
             </span>
             <div className="flex items-center gap-1">
@@ -266,14 +271,14 @@ export default function SlidePropertyPanel({
               />
               <button
                 onClick={() => onReorderElement(slide.id, element.id, 'forward')}
-                className="text-xs text-gray-500 hover:text-white px-1"
+                className="text-xs text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] px-1"
                 title="Bring forward"
               >
                 ↑
               </button>
               <button
                 onClick={() => onReorderElement(slide.id, element.id, 'backward')}
-                className="text-xs text-gray-500 hover:text-white px-1"
+                className="text-xs text-[var(--editor-text)]/60 hover:text-[var(--editor-text)] px-1"
                 title="Send backward"
               >
                 ↓
@@ -294,8 +299,8 @@ export default function SlidePropertyPanel({
           {element.type === 'image' && (
             <div className="flex flex-col gap-1.5">
               <div className="flex flex-col gap-0.5">
-                <span className="text-xs text-gray-500">Source</span>
-                <span className="text-xs text-gray-300 truncate" title={element.src}>
+                <span className="text-xs text-[var(--editor-text)]/60">Source</span>
+                <span className="text-xs text-[var(--editor-text)] truncate" title={element.src}>
                   {element.src.split('/').pop() || element.src}
                 </span>
               </div>
@@ -335,12 +340,12 @@ export default function SlidePropertyPanel({
               </div>
 
               {schemasLoading && (
-                <div className="text-xs text-gray-500">Loading overlay props…</div>
+                <div className="text-xs text-[var(--editor-text)]/60">Loading overlay props…</div>
               )}
 
               {!schemasLoading && overlaySchema && overlaySchema.props.length > 0 && (
                 <div className="flex flex-col gap-2">
-                  <span className="text-xs text-gray-500 font-medium">Props</span>
+                  <span className="text-xs text-[var(--editor-text)]/60 font-medium">Props</span>
                   {overlaySchema.props.map(prop => (
                     <PropEditor
                       key={prop.name}

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

@@ -97,10 +97,12 @@ describe('CarouselEditor — editor-core integration', () => {
       />,
     )
     await waitFor(() => getByTestId('assets'))
-    // Regression: the assets slot must be width-bounded to the sidebar (w-80) so a
-    // wide host panel can't blow out the right column and crush the flex-1 canvas.
+    // The assets slot lives in the below-canvas region, stacked full-width at the
+    // very bottom (no longer capped to a 320px sidebar) so the host panel spans
+    // the editor width beneath the property panel.
     const wrapper = getByTestId('assets').parentElement
-    expect(wrapper?.className).toContain('w-80')
+    expect(wrapper?.className).toContain('w-full')
+    expect(wrapper?.className).not.toContain('w-80')
   })
 
   // Regression: SlideGrid thumbnails must receive `compileOverlay` so overlay

package/src/text/FontPicker.tsx

@@ -95,7 +95,7 @@ export function FontFamilyPicker({ value, onChange, disabled, className, buttonC
         onClick={() => setOpen((o) => !o)}
         className={
           buttonClassName ??
-          'flex w-full items-center gap-1 rounded-md border border-gray-600 bg-gray-800 px-2 py-1 text-sm text-gray-100 hover:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50'
+          'flex w-full items-center gap-1 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-2 py-1 text-sm text-[var(--editor-text)] hover:opacity-90 focus:outline-none focus:ring-1 focus:ring-[var(--editor-accent)] disabled:opacity-50'
         }
         style={displayStyle}
         aria-haspopup="listbox"
@@ -109,7 +109,7 @@ export function FontFamilyPicker({ value, onChange, disabled, className, buttonC
       {open && (
         <div
           role="listbox"
-          className="absolute right-0 z-50 mt-1 max-h-80 w-60 overflow-y-auto rounded-md border border-gray-600 bg-gray-800 shadow-xl ring-1 ring-black/20"
+          className="absolute right-0 z-50 mt-1 max-h-80 w-60 overflow-y-auto rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] shadow-xl ring-1 ring-black/20"
         >
           <ul className="py-1">
             {FONT_OPTIONS.map((opt) => {
@@ -125,14 +125,14 @@ export function FontFamilyPicker({ value, onChange, disabled, className, buttonC
                       setOpen(false)
                     }}
                     style={{ fontFamily: opt.value }}
-                    className={`flex w-full items-center justify-between px-3 py-2 text-left text-[15px] leading-tight text-gray-100 hover:bg-gray-700 focus:bg-gray-700 focus:outline-none ${
-                      isActive ? 'bg-gray-700 font-medium' : ''
+                    className={`flex w-full items-center justify-between px-3 py-2 text-left text-[15px] leading-tight text-[var(--editor-text)] hover:bg-[var(--editor-accent)]/20 focus:bg-[var(--editor-accent)]/20 focus:outline-none ${
+                      isActive ? 'bg-[var(--editor-accent)]/20 font-medium' : ''
                     }`}
                   >
                     <span className="truncate">{opt.label}</span>
                     {isActive && (
                       <span
-                        className="ml-2 shrink-0 text-xs text-gray-400"
+                        className="ml-2 shrink-0 text-xs text-[var(--editor-text)]/60"
                         style={{ fontFamily: 'system-ui, sans-serif' }}
                       >
                         ✓
@@ -210,7 +210,7 @@ export function FontSizePicker({ value, onChange, disabled, min = 8, max = 9999,
       }}
       className={
         className ??
-        'w-14 rounded-md border border-gray-600 bg-gray-800 px-2 py-1 text-sm text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-500 disabled:opacity-50'
+        'w-14 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-2 py-1 text-sm text-[var(--editor-text)] focus:outline-none focus:ring-1 focus:ring-[var(--editor-accent)] disabled:opacity-50'
       }
       aria-label="Font size"
     />

package/src/text/TextFormattingToolbar.tsx

@@ -96,10 +96,10 @@ export function TextFormattingToolbar({
   const rawColor = readPropAsString(element, 'color')
   const colorValue = HEX_PATTERN.test(rawColor) && rawColor.length === 7 ? rawColor : '#111111'
 
-  // Montaj dark-palette button styles (gray-800 surface, gray-700 hover, blue-500 ring)
-  const toolbarBtnBase = 'flex items-center justify-center rounded px-1.5 py-1 text-sm transition-colors hover:bg-gray-700 focus:outline-none focus:ring-1 focus:ring-blue-500'
-  const toolbarBtnActive = 'bg-gray-700 text-gray-100'
-  const toolbarBtnInactive = 'text-gray-400'
+  // Themed button styles: surface base, accent-tinted hover/active, accent ring.
+  const toolbarBtnBase = 'flex items-center justify-center rounded px-1.5 py-1 text-sm transition-colors hover:bg-[var(--editor-accent)]/20 focus:outline-none focus:ring-1 focus:ring-[var(--editor-accent)]'
+  const toolbarBtnActive = 'bg-[var(--editor-accent)]/20 text-[var(--editor-text)]'
+  const toolbarBtnInactive = 'text-[var(--editor-text)]/60'
 
   // Divider visibility helpers
   const hasLeftGroup = supported.has('fontWeight') || supported.has('fontStyle') || supported.has('textTransform') || supported.has('color')
@@ -108,7 +108,7 @@ export function TextFormattingToolbar({
 
   return (
     <div
-      className="rounded-lg border border-gray-600 bg-gray-800 text-gray-100 shadow-md"
+      className="rounded-lg border border-[var(--editor-border)] bg-[var(--editor-surface)] text-[var(--editor-text)] shadow-md"
       onPointerDown={(e) => e.stopPropagation()}
       onPointerMove={(e) => e.stopPropagation()}
       onClick={(e) => e.stopPropagation()}
@@ -159,7 +159,7 @@ export function TextFormattingToolbar({
             title="Text color"
           >
             <span
-              className="block h-3.5 w-3.5 rounded-sm border border-gray-500"
+              className="block h-3.5 w-3.5 rounded-sm border border-[var(--editor-border)]"
               style={{ backgroundColor: colorValue }}
               aria-hidden
             />
@@ -174,7 +174,7 @@ export function TextFormattingToolbar({
         )}
 
         {hasLeftGroup && hasMidGroup && (
-          <div className="mx-1 h-4 w-px bg-gray-600" aria-hidden />
+          <div className="mx-1 h-4 w-px bg-[var(--editor-border)]" aria-hidden />
         )}
 
         {supported.has('fontSize') && (
@@ -193,7 +193,7 @@ export function TextFormattingToolbar({
         )}
 
         {hasMidGroup && hasRightGroup && (
-          <div className="mx-1 h-4 w-px bg-gray-600" aria-hidden />
+          <div className="mx-1 h-4 w-px bg-[var(--editor-border)]" aria-hidden />
         )}
 
         {supported.has('textAlign') && (
@@ -224,19 +224,19 @@ export function TextFormattingToolbar({
         )}
 
         {!hasAnyControlProp && (
-          <span className="px-2 py-1 text-xs text-gray-400">
+          <span className="px-2 py-1 text-xs text-[var(--editor-text)]/60">
             Edit via property panel
           </span>
         )}
 
         {onDelete && (
           <>
-            {hasAnyControlProp && <div className="mx-1 h-4 w-px bg-gray-600" aria-hidden />}
+            {hasAnyControlProp && <div className="mx-1 h-4 w-px bg-[var(--editor-border)]" aria-hidden />}
             <button
               type="button"
               aria-label="Delete text overlay"
               onClick={onDelete}
-              className={`${toolbarBtnBase} text-gray-400 hover:bg-red-900/30 hover:text-red-400`}
+              className={`${toolbarBtnBase} text-[var(--editor-text)]/60 hover:bg-red-900/30 hover:text-red-400`}
             >
               <Trash2 className="h-3.5 w-3.5" />
             </button>

package/src/theme.ts

@@ -6,36 +6,49 @@
  * ── CSS variable naming convention ───────────────────────────────────────────
  * Every token is written as a custom property prefixed `--editor-`:
  *   colors   →  --editor-bg, --editor-surface, --editor-accent,
- *               --editor-text, --editor-border, --editor-selection
+ *               --editor-accent-foreground, --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)
  *
  * Optional tokens (serif/display fonts) are only written when present, so a
- * host can detect their absence via an empty `getPropertyValue`. Editor styles
- * reference these vars exclusively, which is what lets a host re-theme the same
- * component without forking its CSS.
+ * host can detect their absence via an empty `getPropertyValue`. The carousel
+ * editor chrome (shell, panels, toolbars, buttons, selection handles)
+ * references these vars via Tailwind arbitrary values (`bg-[var(--editor-bg)]`,
+ * etc.) and inline styles — so passing a host theme actually re-skins the
+ * editor, rather than only setting CSS vars nothing reads.
  */
 import type { EditorTheme } from './types'
 
 /**
- * Montaj's default editor theme. Values mirror Montaj's existing Tailwind /
- * `index.css` palette, which is dark-first:
- *   background  gray-900  (#111827, matches `surface.DEFAULT`)
- *   surface     gray-800  (#1f2937, matches `surface.raised`)
- *   border      gray-700  (#374151, matches `surface.overlay`)
- *   text        gray-100  (#f3f4f6, matches `html.dark` text)
- *   accent      indigo-500 (#6366f1) — Montaj's interactive accent
- *   selection   indigo-400 (#818cf8) — element-selection highlight
+ * Montaj's default editor theme. Values are chosen to preserve the look the
+ * chrome rendered before it was var-driven, which used three distinct grays:
+ *   background  gray-950  (#030712) — the editor shell (`bg-gray-950`)
+ *   surface     gray-900  (#111827) — raised panels/inputs/buttons (the
+ *                          dominant of the former gray-900/gray-800 surfaces)
+ *   border      gray-800  (#1f2937) — the dominant hairline (former
+ *                          gray-800/700 borders)
+ *   text        gray-100  (#f3f4f6) — primary text
+ *   accent      indigo-500 (#6366f1) — Montaj's interactive accent (Render
+ *                          button, focus rings, accent borders)
+ *   accentForeground white (#ffffff) — readable on the indigo accent
+ *   selection   indigo-400 (#818cf8) — element-selection outline/handles
+ *                          (the former hardcoded #3b82f6 blue)
  *   font        Inter (the configured `fontFamily.sans`)
+ *
+ * Collapsing the former 3-gray surface/border set into bg/surface/border keeps
+ * Montaj's chrome visually stable; muted text is rendered as `text` at reduced
+ * opacity by the chrome rather than as a separate token.
  */
 export const defaultMontajTheme: EditorTheme = {
   colors: {
-    background: '#111827',
-    surface: '#1f2937',
+    background: '#030712',
+    surface: '#111827',
     accent: '#6366f1',
+    accentForeground: '#ffffff',
     text: '#f3f4f6',
-    border: '#374151',
+    border: '#1f2937',
     selection: '#818cf8',
   },
   fonts: {
@@ -68,6 +81,9 @@ export function applyTheme(el: HTMLElement, theme: EditorTheme): void {
   style.setProperty('--editor-bg', theme.colors.background)
   style.setProperty('--editor-surface', theme.colors.surface)
   style.setProperty('--editor-accent', theme.colors.accent)
+  // 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)
   style.setProperty('--editor-text', theme.colors.text)
   style.setProperty('--editor-border', theme.colors.border)
   style.setProperty('--editor-selection', theme.colors.selection)

package/src/types.ts

@@ -337,6 +337,11 @@ export interface EditorTheme {
     surface: string
     /** Primary interactive/brand accent. */
     accent: string
+    /**
+     * Readable foreground to pair with `accent` — e.g. dark text on a yellow
+     * accent button. Optional; when absent, `applyTheme` falls back to `text`.
+     */
+    accentForeground?: string
     /** Default text color. */
     text: string
     /** Hairline/divider color. */

package/src/ui/badge.tsx

@@ -9,7 +9,7 @@ const badgeVariants = cva(
         pending: 'bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300',
         draft:   'bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300',
         final:   'bg-emerald-100 text-emerald-700 dark:bg-green-900/50 dark:text-green-300',
-        default: 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300',
+        default: 'bg-gray-100 text-gray-600 dark:bg-[var(--editor-surface)] dark:text-[var(--editor-text)]',
       },
     },
     defaultVariants: { variant: 'default' },

package/src/ui/button.tsx

@@ -2,15 +2,15 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from './utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--editor-accent)] disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default:   'bg-blue-600 text-white hover:bg-blue-700',
-        secondary: 'bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600',
-        ghost:     'text-gray-500 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-100',
+        default:   'bg-[var(--editor-accent)] text-[var(--editor-accent-foreground)] hover:opacity-90',
+        secondary: 'bg-[var(--editor-surface)] text-[var(--editor-text)] border border-[var(--editor-border)] hover:border-[var(--editor-accent)]',
+        ghost:     'text-[var(--editor-text)] hover:bg-[var(--editor-surface)] hover:text-[var(--editor-text)]',
         danger:    'bg-red-600 text-white hover:bg-red-700',
-        outline:   'border border-gray-300 dark:border-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800',
+        outline:   'bg-[var(--editor-surface)] text-[var(--editor-text)] border border-[var(--editor-border)] hover:border-[var(--editor-accent)]',
       },
       size: {
         default: 'h-9 px-4 py-2',

package/src/ui/input.tsx

@@ -6,7 +6,7 @@ export function Input({ className, ...props }: InputProps) {
   return (
     <input
       className={cn(
-        'flex h-9 w-full rounded-md border border-gray-300 bg-white px-3 py-1 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500',
+        'flex h-9 w-full rounded-md border border-gray-300 bg-white px-3 py-1 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-[var(--editor-accent)] disabled:opacity-50 dark:border-[var(--editor-border)] dark:bg-[var(--editor-surface)] dark:text-[var(--editor-text)] dark:placeholder:text-[var(--editor-text)]/60',
         className,
       )}
       {...props}

package/src/ui/label.tsx

@@ -3,7 +3,7 @@ import { cn } from './utils'
 export function Label({ className, ...props }: React.LabelHTMLAttributes<HTMLLabelElement>) {
   return (
     <label
-      className={cn('text-xs font-medium text-gray-400 leading-none', className)}
+      className={cn('text-xs font-medium text-[var(--editor-text)]/60 leading-none', className)}
       {...props}
     />
   )

package/src/ui/select.tsx

@@ -8,7 +8,7 @@ export function Select({ className, options, ...props }: SelectProps) {
   return (
     <select
       className={cn(
-        'flex h-9 w-full rounded-md border border-gray-300 bg-white px-3 py-1 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100',
+        'flex h-9 w-full rounded-md border border-gray-300 bg-white px-3 py-1 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-[var(--editor-accent)] disabled:opacity-50 dark:border-[var(--editor-border)] dark:bg-[var(--editor-surface)] dark:text-[var(--editor-text)]',
         className,
       )}
       {...props}

package/src/ui/switch.tsx

@@ -15,8 +15,8 @@ export function Switch({ checked, onCheckedChange, className, disabled }: Switch
       disabled={disabled}
       onClick={() => onCheckedChange(!checked)}
       className={cn(
-        'relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 disabled:opacity-50',
-        checked ? 'bg-blue-600' : 'bg-gray-300 dark:bg-gray-700',
+        'relative inline-flex h-5 w-9 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--editor-accent)] disabled:opacity-50',
+        checked ? 'bg-[var(--editor-accent)]' : 'bg-gray-300 dark:bg-[var(--editor-border)]',
         className,
       )}
     >

package/src/ui/textarea.tsx

@@ -6,7 +6,7 @@ export function Textarea({ className, ...props }: TextareaProps) {
   return (
     <textarea
       className={cn(
-        'flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:opacity-50 resize-none dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500',
+        'flex w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-[var(--editor-accent)] disabled:opacity-50 resize-none dark:border-[var(--editor-border)] dark:bg-[var(--editor-surface)] dark:text-[var(--editor-text)] dark:placeholder:text-[var(--editor-text)]/60',
         className,
       )}
       {...props}