fixed search below content + light editor and search

frontend/src/components/react/admin/Editor.tsx

@@ -18,43 +18,48 @@ interface Props {
 
 const salonTheme = EditorView.theme({
   '&': {
-    backgroundColor: 'var(--crust)',
+    backgroundColor: 'var(--rosewater)',
     color: 'var(--text)',
-    border: '1px solid var(--surface1)',
-    borderRadius: '0.75rem',
+    border: '1px solid var(--surface2)',
+    borderRadius: '2px',
     fontSize: '14px',
+    boxShadow: 'inset 0 0 0 1px color-mix(in srgb, var(--surface1) 40%, transparent)',
   },
   '.cm-content': {
     fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
     padding: '1rem',
-    caretColor: 'var(--text)',
-  },
-  '.cm-cursor': { borderLeftColor: 'var(--text)' },
-  '.cm-selectionBackground': { backgroundColor: 'var(--surface2) !important' },
-  '&.cm-focused .cm-selectionBackground': { backgroundColor: 'var(--surface2) !important' },
-  '.cm-activeLine': { backgroundColor: 'var(--surface0)' },
-  '.cm-gutters': {
-    backgroundColor: 'var(--mantle)',
-    color: 'var(--overlay0)',
-    border: 'none',
-  },
-  '.cm-activeLineGutter': { backgroundColor: 'var(--surface0)' },
-  '.cm-panels': {
-    backgroundColor: 'var(--mantle)',
+    caretColor: 'var(--mauve)',
     color: 'var(--text)',
-    borderTop: '1px solid var(--surface1)',
   },
-  '.cm-searchMatch': { backgroundColor: 'var(--yellow)', opacity: '0.3' },
-  '.cm-searchMatch-selected': { backgroundColor: 'var(--peach)', opacity: '0.4' },
+  '.cm-cursor': { borderLeftColor: 'var(--mauve)', borderLeftWidth: '2px' },
+  '.cm-selectionBackground': { backgroundColor: 'color-mix(in srgb, var(--mauve) 25%, transparent) !important' },
+  '&.cm-focused .cm-selectionBackground': { backgroundColor: 'color-mix(in srgb, var(--mauve) 30%, transparent) !important' },
+  '.cm-activeLine': { backgroundColor: 'color-mix(in srgb, var(--surface0) 55%, transparent)' },
+  '.cm-gutters': {
+    backgroundColor: 'var(--surface0)',
+    color: 'var(--subtext0)',
+    border: 'none',
+    borderRight: '1px solid var(--surface2)',
+    fontFamily: 'var(--font-display)',
+    fontStyle: 'italic',
+  },
+  '.cm-activeLineGutter': { backgroundColor: 'color-mix(in srgb, var(--mauve) 12%, transparent)', color: 'var(--mauve)' },
+  '.cm-panels': {
+    backgroundColor: 'var(--surface0)',
+    color: 'var(--text)',
+    borderTop: '1px solid var(--surface2)',
+  },
+  '.cm-searchMatch': { backgroundColor: 'color-mix(in srgb, var(--yellow) 45%, transparent)' },
+  '.cm-searchMatch-selected': { backgroundColor: 'color-mix(in srgb, var(--peach) 55%, transparent)' },
   '.cm-fat-cursor': {
     backgroundColor: 'var(--mauve) !important',
-    color: 'var(--crust) !important',
+    color: 'var(--rosewater) !important',
   },
   '&:not(.cm-focused) .cm-fat-cursor': {
     outline: '1px solid var(--mauve)',
     backgroundColor: 'transparent !important',
   },
-}, { dark: true });
+}, { dark: false });
 
 // Compartment for hot-swapping vim mode without recreating the editor
 const vimCompartment = new Compartment();
@@ -472,11 +477,11 @@ export default function Editor({ editSlug }: Props) {
             {/* Autocomplete dropdown */}
             {showAutocomplete && autocompleteAssets.length > 0 && (
               <div
-                className="absolute z-50 bg-mantle border border-surface1 rounded-lg shadow-2xl max-h-64 overflow-y-auto w-80"
-                style={{ top: autocompletePos.top, left: autocompletePos.left }}
+                className="absolute z-50 bg-[var(--rosewater)] border border-[var(--surface2)] shadow-2xl max-h-64 overflow-y-auto w-80"
+                style={{ top: autocompletePos.top, left: autocompletePos.left, borderRadius: 2 }}
                 onClick={e => e.stopPropagation()}
               >
-                <div className="p-2 text-[10px] text-subtext0 uppercase border-b border-white/5 bg-crust/50">Assets Library</div>
+                <div className="p-2 text-[10px] text-[var(--subtext0)] uppercase tracking-[0.2em] border-b border-[var(--surface2)]/60 bg-[var(--surface0)]/60 font-display italic">Assets</div>
                 <ul className="py-1">
                   {autocompleteAssets.map(asset => {
                     const img = /\.(jpg|jpeg|png|webp|gif|svg)$/i.test(asset.name);
@@ -484,16 +489,16 @@ export default function Editor({ editSlug }: Props) {
                       <li
                         key={asset.name}
                         onClick={() => insertAssetMarkdown(asset)}
-                        className="px-4 py-2 hover:bg-mauve/20 cursor-pointer text-sm truncate text-subtext1 hover:text-mauve flex items-center gap-3 transition-colors"
+                        className="px-4 py-2 hover:bg-[var(--mauve)]/15 cursor-pointer text-sm truncate text-[var(--subtext1)] hover:text-[var(--mauve)] flex items-center gap-3 transition-colors"
                       >
-                        <div className="w-6 h-6 flex-shrink-0 bg-surface0 rounded flex items-center justify-center overflow-hidden">
+                        <div className="w-6 h-6 flex-shrink-0 bg-[var(--surface0)] border border-[var(--surface2)] flex items-center justify-center overflow-hidden" style={{ borderRadius: 1 }}>
                           {img ? (
                             <img src={asset.url} className="w-full h-full object-cover" alt="" />
                           ) : (
                             <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/></svg>
                           )}
                         </div>
-                        <span className="truncate">{asset.name}</span>
+                        <span className="truncate font-mono text-xs">{asset.name}</span>
                       </li>
                     );
                   })}
@@ -505,11 +510,12 @@ export default function Editor({ editSlug }: Props) {
           {/* Live Preview — stretches to match editor height on desktop, full-pane via tabs on mobile */}
           {showPreview && (
             <div
-              className={`border border-surface1 rounded-xl bg-crust/50 overflow-y-auto flex-col md:flex md:min-h-0 ${
+              className={`border border-[var(--surface2)] bg-[var(--rosewater)] overflow-y-auto flex-col md:flex md:min-h-0 ${
                 mobileView === 'preview' ? 'flex min-h-[60vh]' : 'hidden'
               }`}
+              style={{ borderRadius: 2 }}
             >
-              <div className="sticky top-0 bg-mantle px-4 py-2 text-xs text-subtext0 uppercase border-b border-surface1 z-10">
+              <div className="sticky top-0 bg-[var(--surface0)] px-4 py-2 text-xs text-[var(--subtext0)] uppercase tracking-[0.2em] border-b border-[var(--surface2)] z-10 font-display italic">
                 Preview
               </div>
               <div ref={previewRef} className="prose max-w-none p-4 md:p-6 flex-1" />
@@ -520,18 +526,18 @@ export default function Editor({ editSlug }: Props) {
 
       {/* Asset Modal */}
       {showModal && (
-        <div className="fixed inset-0 z-[100] bg-crust/80 backdrop-blur-sm flex items-center justify-center p-4 md:p-6">
-          <div className="glass w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden">
-            <header className="p-4 md:p-6 border-b border-white/5 flex justify-between items-center bg-surface0/20">
+        <div className="fixed inset-0 z-[100] bg-[var(--crust)]/55 backdrop-blur-sm flex items-center justify-center p-4 md:p-6">
+          <div className="glass w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden bg-[var(--base)]">
+            <header className="p-4 md:p-6 border-b border-[var(--surface2)]/60 flex justify-between items-center bg-[var(--surface0)]/50">
               <div>
-                <h2 className="text-xl md:text-2xl font-bold text-mauve">Asset Library</h2>
-                <p className="text-xs text-subtext0">Click 'Insert' to add an asset to your post.</p>
+                <h2 className="font-display italic text-2xl md:text-3xl text-[var(--text)] leading-tight">Asset library</h2>
+                <p className="text-xs text-[var(--subtext0)] font-display italic mt-1">Click an asset to drop it into the work.</p>
               </div>
-              <button onClick={() => setShowModal(false)} className="p-2 text-subtext0 hover:text-red transition-colors">
+              <button onClick={() => setShowModal(false)} className="p-2 text-[var(--subtext0)] hover:text-[var(--red)] transition-colors">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
               </button>
             </header>
-            <div className="p-4 md:p-6 overflow-y-auto flex-1 bg-bg/50">
+            <div className="p-4 md:p-6 overflow-y-auto flex-1 bg-[var(--base)]/50">
               <AssetManager mode="select" onSelect={handleAssetSelect} />
             </div>
           </div>