From fe3cd0591f31608b6ab07d4adf754d21305e8a92 Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Fri, 27 Jun 2025 18:38:39 +0000
Subject: [PATCH] update

---
 .../wysiwyg/blocks/text/code.block.ts         |  56 ++++++-
 ts_web/elements/wysiwyg/dees-input-wysiwyg.ts |   8 +-
 ts_web/elements/wysiwyg/dees-slash-menu.ts    |  33 ++--
 ts_web/elements/wysiwyg/wysiwyg.shortcuts.ts  |  26 +--
 ts_web/elements/wysiwyg/wysiwyg.styles.ts     | 155 +++++++++---------
 5 files changed, 161 insertions(+), 117 deletions(-)

diff --git a/ts_web/elements/wysiwyg/blocks/text/code.block.ts b/ts_web/elements/wysiwyg/blocks/text/code.block.ts
index 19880ad..fb9d039 100644
--- a/ts_web/elements/wysiwyg/blocks/text/code.block.ts
+++ b/ts_web/elements/wysiwyg/blocks/text/code.block.ts
@@ -4,6 +4,7 @@ import { cssManager } from '@design.estate/dees-element';
 import { WysiwygSelection } from '../../wysiwyg.selection.js';
 import hlight from 'highlight.js';
 import { cssGeistFontFamily, cssMonoFontFamily } from '../../../00fonts.js';
+import { PROGRAMMING_LANGUAGES } from '../../wysiwyg.constants.js';
 
 /**
  * CodeBlockHandler with improved architecture
@@ -21,7 +22,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
   private highlightTimer: any = null;
   
   render(block: IBlock, isSelected: boolean): string {
-    const language = block.metadata?.language || 'javascript';
+    const language = block.metadata?.language || 'typescript';
     const content = block.content || '';
     const lineCount = content.split('\n').length;
     
@@ -31,10 +32,18 @@ export class CodeBlockHandler extends BaseBlockHandler {
       lineNumbersHtml += `<div class="line-number">${i}</div>`;
     }
     
+    // Generate language options
+    const languageOptions = PROGRAMMING_LANGUAGES.map(lang => {
+      const value = lang.toLowerCase();
+      return `<option value="${value}" ${value === language ? 'selected' : ''}>${lang}</option>`;
+    }).join('');
+    
     return `
       <div class="code-block-container${isSelected ? ' selected' : ''}" data-language="${language}">
         <div class="code-header">
-          <span class="language-label">${language}</span>
+          <select class="language-selector" data-block-id="${block.id}">
+            ${languageOptions}
+          </select>
           <button class="copy-button" title="Copy code">
             <svg class="copy-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
               <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z"></path>
@@ -61,9 +70,29 @@ export class CodeBlockHandler extends BaseBlockHandler {
     const editor = element.querySelector('.code-editor') as HTMLElement;
     const container = element.querySelector('.code-block-container') as HTMLElement;
     const copyButton = element.querySelector('.copy-button') as HTMLButtonElement;
+    const languageSelector = element.querySelector('.language-selector') as HTMLSelectElement;
     
     if (!editor || !container) return;
     
+    // Setup language selector
+    if (languageSelector) {
+      languageSelector.addEventListener('change', (e) => {
+        const newLanguage = (e.target as HTMLSelectElement).value;
+        block.metadata = { ...block.metadata, language: newLanguage };
+        container.setAttribute('data-language', newLanguage);
+        
+        // Update the syntax highlighting if content exists and not focused
+        if (block.content && document.activeElement !== editor) {
+          this.applyHighlighting(element, block);
+        }
+        
+        // Notify about the change
+        if (handlers.onInput) {
+          handlers.onInput(new InputEvent('input'));
+        }
+      });
+    }
+    
     // Setup copy button
     if (copyButton) {
       copyButton.addEventListener('click', async () => {
@@ -286,7 +315,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
     
     // Get plain text content
     const content = editor.textContent || '';
-    const language = block.metadata?.language || 'javascript';
+    const language = block.metadata?.language || 'typescript';
     
     // Apply highlighting
     try {
@@ -337,7 +366,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
         type: 'code',
         content: content,
         metadata: { 
-          language: element.querySelector('.code-block-container')?.getAttribute('data-language') || 'javascript'
+          language: element.querySelector('.code-block-container')?.getAttribute('data-language') || 'typescript'
         }
       };
       this.applyHighlighting(element, block);
@@ -441,13 +470,30 @@ export class CodeBlockHandler extends BaseBlockHandler {
         align-items: center;
       }
       
-      .language-label {
+      .language-selector {
         font-size: 12px;
         color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
         font-weight: 500;
         text-transform: uppercase;
         letter-spacing: 0.05em;
         font-family: ${cssGeistFontFamily};
+        background: transparent;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        padding: 4px 8px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        outline: none;
+      }
+      
+      .language-selector:hover {
+        background: ${cssManager.bdTheme('#f9fafb', '#1f2937')};
+        border-color: ${cssManager.bdTheme('#e5e7eb', '#374151')};
+        color: ${cssManager.bdTheme('#374151', '#e5e7eb')};
+      }
+      
+      .language-selector:focus {
+        border-color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
       }
       
       /* Copy Button - Minimal */
diff --git a/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts b/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts
index 4867472..0232deb 100644
--- a/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts
+++ b/ts_web/elements/wysiwyg/dees-input-wysiwyg.ts
@@ -507,13 +507,9 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
     // Close menu
     this.closeSlashMenu(false);
     
-    // If it's a code block, ask for language
+    // If it's a code block, default to TypeScript
     if (type === 'code') {
-      const language = await WysiwygModalManager.showLanguageSelectionModal();
-      if (!language) {
-        return; // User cancelled
-      }
-      currentBlock.metadata = { language };
+      currentBlock.metadata = { language: 'typescript' };
     }
     
     // Transform the current block
diff --git a/ts_web/elements/wysiwyg/dees-slash-menu.ts b/ts_web/elements/wysiwyg/dees-slash-menu.ts
index 22d0f33..fd84a57 100644
--- a/ts_web/elements/wysiwyg/dees-slash-menu.ts
+++ b/ts_web/elements/wysiwyg/dees-slash-menu.ts
@@ -8,6 +8,7 @@ import {
   state,
 } from '@design.estate/dees-element';
 import { zIndexRegistry } from '../00zindex.js';
+import '../dees-icon.js';
 
 import { type ISlashMenuItem } from './wysiwyg.types.js';
 import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
@@ -61,10 +62,10 @@ export class DeesSlashMenu extends DeesElement {
 
       .slash-menu {
         position: fixed;
-        background: ${cssManager.bdTheme('#ffffff', '#262626')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
-        border-radius: 8px;
-        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-radius: 4px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
         padding: 4px;
         min-width: 220px;
         max-height: 300px;
@@ -77,7 +78,7 @@ export class DeesSlashMenu extends DeesElement {
       @keyframes fadeInScale {
         from {
           opacity: 0;
-          transform: scale(0.95) translateY(-10px);
+          transform: scale(0.98) translateY(-2px);
         }
         to {
           opacity: 1;
@@ -86,37 +87,35 @@ export class DeesSlashMenu extends DeesElement {
       }
 
       .slash-menu-item {
-        padding: 10px 12px;
+        padding: 8px 10px;
         cursor: pointer;
         transition: all 0.15s ease;
         display: flex;
         align-items: center;
         gap: 12px;
-        border-radius: 4px;
-        color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
+        border-radius: 3px;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         font-size: 14px;
       }
 
       .slash-menu-item:hover,
       .slash-menu-item.selected {
-        background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
-        color: ${cssManager.bdTheme('#000000', '#ffffff')};
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
       }
 
       .slash-menu-item .icon {
-        width: 24px;
-        height: 24px;
+        width: 20px;
+        height: 20px;
         display: flex;
         align-items: center;
         justify-content: center;
-        font-size: 16px;
-        color: ${cssManager.bdTheme('#666', '#999')};
-        font-weight: 600;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
       }
 
       .slash-menu-item:hover .icon,
       .slash-menu-item.selected .icon {
-        color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+        color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
       }
     `,
   ];
@@ -142,7 +141,7 @@ export class DeesSlashMenu extends DeesElement {
             data-item-type="${item.type}"
             data-item-index="${index}"
           >
-            <span class="icon">${item.icon}</span>
+            <dees-icon class="icon" .icon="${item.icon}" iconSize="16"></dees-icon>
             <span>${item.label}</span>
           </div>
         `)}
diff --git a/ts_web/elements/wysiwyg/wysiwyg.shortcuts.ts b/ts_web/elements/wysiwyg/wysiwyg.shortcuts.ts
index 09de756..ef358ba 100644
--- a/ts_web/elements/wysiwyg/wysiwyg.shortcuts.ts
+++ b/ts_web/elements/wysiwyg/wysiwyg.shortcuts.ts
@@ -49,19 +49,19 @@ export class WysiwygShortcuts {
 
   static getSlashMenuItems(): ISlashMenuItem[] {
     return [
-      { type: 'paragraph', label: 'Paragraph', icon: '¶' },
-      { type: 'heading-1', label: 'Heading 1', icon: 'H₁' },
-      { type: 'heading-2', label: 'Heading 2', icon: 'H₂' },
-      { type: 'heading-3', label: 'Heading 3', icon: 'H₃' },
-      { type: 'quote', label: 'Quote', icon: '"' },
-      { type: 'code', label: 'Code', icon: '<>' },
-      { type: 'list', label: 'List', icon: '•' },
-      { type: 'image', label: 'Image', icon: '🖼' },
-      { type: 'divider', label: 'Divider', icon: '—' },
-      { type: 'youtube', label: 'YouTube', icon: '▶️' },
-      { type: 'markdown', label: 'Markdown', icon: 'M↓' },
-      { type: 'html', label: 'HTML', icon: '</>' },
-      { type: 'attachment', label: 'File Attachment', icon: '📎' },
+      { type: 'paragraph', label: 'Paragraph', icon: 'lucide:pilcrow' },
+      { type: 'heading-1', label: 'Heading 1', icon: 'lucide:heading1' },
+      { type: 'heading-2', label: 'Heading 2', icon: 'lucide:heading2' },
+      { type: 'heading-3', label: 'Heading 3', icon: 'lucide:heading3' },
+      { type: 'quote', label: 'Quote', icon: 'lucide:quote' },
+      { type: 'code', label: 'Code Block', icon: 'lucide:fileCode' },
+      { type: 'list', label: 'Bullet List', icon: 'lucide:list' },
+      { type: 'image', label: 'Image', icon: 'lucide:image' },
+      { type: 'divider', label: 'Divider', icon: 'lucide:minus' },
+      { type: 'youtube', label: 'YouTube', icon: 'lucide:youtube' },
+      { type: 'markdown', label: 'Markdown', icon: 'lucide:fileText' },
+      { type: 'html', label: 'HTML', icon: 'lucide:code' },
+      { type: 'attachment', label: 'File Attachment', icon: 'lucide:paperclip' },
     ];
   }
 
diff --git a/ts_web/elements/wysiwyg/wysiwyg.styles.ts b/ts_web/elements/wysiwyg/wysiwyg.styles.ts
index 5afddfd..fc2e263 100644
--- a/ts_web/elements/wysiwyg/wysiwyg.styles.ts
+++ b/ts_web/elements/wysiwyg/wysiwyg.styles.ts
@@ -7,23 +7,25 @@ export const wysiwygStyles = css`
   }
 
   .wysiwyg-container {
-    background: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
-    border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
-    border-radius: 8px;
+    background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+    border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+    border-radius: 6px;
     min-height: 200px;
-    padding: 32px 40px;
+    padding: 24px;
     position: relative;
     transition: all 0.2s ease;
-    color: ${cssManager.bdTheme('#000000', '#ffffff')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .wysiwyg-container:hover {
-    border-color: ${cssManager.bdTheme('#d0d0d0', '#444')};
+    border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
   }
 
   .wysiwyg-container:focus-within {
-    border-color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
-    box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(0, 102, 204, 0.1)', 'rgba(77, 148, 255, 0.1)')};
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    box-shadow: 0 0 0 2px ${cssManager.bdTheme('#f4f4f5', '#18181b')}, 0 0 0 4px ${cssManager.bdTheme('rgba(59, 130, 246, 0.5)', 'rgba(59, 130, 246, 0.5)')};
+    border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
   }
 
   /* Visual hint for text selection */
@@ -44,7 +46,7 @@ export const wysiwygStyles = css`
     position: relative;
     transition: all 0.15s ease;
     min-height: 1.6em;
-    color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   /* First and last blocks don't need extra spacing */
@@ -57,8 +59,9 @@ export const wysiwygStyles = css`
   }
 
   .block.selected {
-    background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.05)', 'rgba(77, 148, 255, 0.08)')};
-    box-shadow: inset 0 0 0 2px ${cssManager.bdTheme('rgba(0, 102, 204, 0.2)', 'rgba(77, 148, 255, 0.2)')};
+    background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.05)', 'rgba(59, 130, 246, 0.05)')};
+    outline: 2px solid ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.2)')};
+    outline-offset: -2px;
     border-radius: 4px;
     margin-left: -8px;
     margin-right: -8px;
@@ -78,7 +81,7 @@ export const wysiwygStyles = css`
 
   .block.paragraph:empty::before {
     content: "Type '/' for commands...";
-    color: ${cssManager.bdTheme('#999', '#666')};
+    color: ${cssManager.bdTheme('#71717a', '#71717a')};
     pointer-events: none;
     font-size: 16px;
     line-height: 1.6;
@@ -89,12 +92,12 @@ export const wysiwygStyles = css`
     font-size: 32px;
     font-weight: 700;
     line-height: 1.2;
-    color: ${cssManager.bdTheme('#000000', '#ffffff')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .block.heading-1:empty::before {
     content: "Heading 1";
-    color: ${cssManager.bdTheme('#999', '#666')};
+    color: ${cssManager.bdTheme('#71717a', '#71717a')};
     pointer-events: none;
     font-size: 32px;
     line-height: 1.2;
@@ -105,12 +108,12 @@ export const wysiwygStyles = css`
     font-size: 24px;
     font-weight: 600;
     line-height: 1.3;
-    color: ${cssManager.bdTheme('#000000', '#ffffff')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .block.heading-2:empty::before {
     content: "Heading 2";
-    color: ${cssManager.bdTheme('#999', '#666')};
+    color: ${cssManager.bdTheme('#71717a', '#71717a')};
     pointer-events: none;
     font-size: 24px;
     line-height: 1.3;
@@ -121,12 +124,12 @@ export const wysiwygStyles = css`
     font-size: 20px;
     font-weight: 600;
     line-height: 1.4;
-    color: ${cssManager.bdTheme('#000000', '#ffffff')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .block.heading-3:empty::before {
     content: "Heading 3";
-    color: ${cssManager.bdTheme('#999', '#666')};
+    color: ${cssManager.bdTheme('#71717a', '#71717a')};
     pointer-events: none;
     font-size: 20px;
     line-height: 1.4;
@@ -134,10 +137,10 @@ export const wysiwygStyles = css`
   }
 
   .block.quote {
-    border-left: 3px solid ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+    border-left: 2px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
     padding-left: 20px;
     font-style: italic;
-    color: ${cssManager.bdTheme('#555', '#b0b0b0')};
+    color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
     margin-left: 0;
     margin-right: 0;
     line-height: 1.6;
@@ -145,7 +148,7 @@ export const wysiwygStyles = css`
 
   .block.quote:empty::before {
     content: "Quote";
-    color: ${cssManager.bdTheme('#999', '#666')};
+    color: ${cssManager.bdTheme('#71717a', '#71717a')};
     pointer-events: none;
     font-size: 16px;
     line-height: 1.6;
@@ -162,33 +165,33 @@ export const wysiwygStyles = css`
     position: absolute;
     top: 0;
     right: 0;
-    background: ${cssManager.bdTheme('#e1e4e8', '#333333')};
-    color: ${cssManager.bdTheme('#586069', '#8b949e')};
+    background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+    color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
     padding: 4px 12px;
     font-size: 12px;
-    border-radius: 0 6px 0 6px;
+    border-radius: 0 4px 0 4px;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     text-transform: lowercase;
     z-index: 1;
   }
 
   .block.code {
-    background: ${cssManager.bdTheme('#f8f8f8', '#0d0d0d')};
-    border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#2a2a2a')};
-    border-radius: 6px;
-    padding: 16px 20px;
+    background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+    border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+    border-radius: 4px;
+    padding: 16px;
     padding-top: 32px; /* Make room for language indicator */
     font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
     font-size: 14px;
     line-height: 1.5;
     white-space: pre-wrap;
-    color: ${cssManager.bdTheme('#24292e', '#e1e4e8')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
     overflow-x: auto;
   }
 
   .block.code:empty::before {
     content: "// Code block";
-    color: ${cssManager.bdTheme('#999', '#666')};
+    color: ${cssManager.bdTheme('#71717a', '#71717a')};
     pointer-events: none;
     font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
     font-size: 14px;
@@ -233,16 +236,16 @@ export const wysiwygStyles = css`
 
   .block.divider hr {
     border: none;
-    border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#333')};
+    border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
     margin: 0;
   }
 
   .slash-menu {
     position: absolute;
-    background: ${cssManager.bdTheme('#ffffff', '#262626')};
-    border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
-    border-radius: 8px;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+    background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+    border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
     padding: 4px;
     z-index: 1000;
     min-width: 220px;
@@ -253,21 +256,21 @@ export const wysiwygStyles = css`
   }
 
   .slash-menu-item {
-    padding: 10px 12px;
+    padding: 8px 10px;
     cursor: pointer;
     transition: all 0.15s ease;
     display: flex;
     align-items: center;
     gap: 12px;
-    border-radius: 4px;
-    color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
+    border-radius: 3px;
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
     font-size: 14px;
   }
 
   .slash-menu-item:hover,
   .slash-menu-item.selected {
-    background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
-    color: ${cssManager.bdTheme('#000000', '#ffffff')};
+    background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .slash-menu-item .icon {
@@ -277,23 +280,23 @@ export const wysiwygStyles = css`
     align-items: center;
     justify-content: center;
     font-size: 16px;
-    color: ${cssManager.bdTheme('#666', '#999')};
+    color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
     font-weight: 600;
   }
 
   .slash-menu-item:hover .icon,
   .slash-menu-item.selected .icon {
-    color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+    color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
   }
 
   .toolbar {
     position: absolute;
     top: -40px;
     left: 0;
-    background: ${cssManager.bdTheme('#ffffff', '#262626')};
-    border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
-    border-radius: 6px;
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+    background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+    border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
     padding: 4px;
     display: none;
     gap: 4px;
@@ -310,17 +313,17 @@ export const wysiwygStyles = css`
     border: none;
     background: transparent;
     cursor: pointer;
-    border-radius: 4px;
+    border-radius: 3px;
     transition: all 0.15s ease;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .toolbar-button:hover {
-    background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
-    color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+    background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+    color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
   }
 
   /* Drag and Drop Styles */
@@ -360,7 +363,7 @@ export const wysiwygStyles = css`
     display: flex;
     align-items: center;
     justify-content: center;
-    color: ${cssManager.bdTheme('#999', '#666')};
+    color: ${cssManager.bdTheme('#71717a', '#71717a')};
     border-radius: 4px;
   }
 
@@ -375,13 +378,13 @@ export const wysiwygStyles = css`
   }
 
   .drag-handle:hover {
-    color: ${cssManager.bdTheme('#666', '#999')};
-    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
+    color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+    background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
   }
 
   .drag-handle:active {
     cursor: grabbing;
-    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+    background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
   }
 
   .block-wrapper.dragging {
@@ -407,9 +410,9 @@ export const wysiwygStyles = css`
     position: absolute;
     left: 0;
     right: 0;
-    background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.08)', 'rgba(77, 148, 255, 0.08)')};
-    border: 2px dashed ${cssManager.bdTheme('#0066cc', '#4d94ff')};
-    border-radius: 8px;
+    background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.05)', 'rgba(59, 130, 246, 0.05)')};
+    border: 2px dashed ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+    border-radius: 4px;
     transition: top 0.2s ease, height 0.2s ease;
     pointer-events: none;
     z-index: 1999;
@@ -440,7 +443,7 @@ export const wysiwygStyles = css`
     display: flex;
     align-items: center;
     justify-content: center;
-    color: ${cssManager.bdTheme('#999', '#666')};
+    color: ${cssManager.bdTheme('#71717a', '#71717a')};
     border-radius: 4px;
   }
 
@@ -449,27 +452,27 @@ export const wysiwygStyles = css`
   }
 
   .block-settings:hover {
-    color: ${cssManager.bdTheme('#666', '#999')};
-    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
+    color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+    background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
   }
 
   .block-settings:active {
-    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+    background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
   }
 
   /* Text Selection Styles */
   .block ::selection {
-    background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.3)', 'rgba(77, 148, 255, 0.3)')};
+    background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.2)')};
     color: inherit;
   }
 
   /* Formatting Menu */
   .formatting-menu {
     position: absolute;
-    background: ${cssManager.bdTheme('#ffffff', '#262626')};
-    border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#404040')};
-    border-radius: 6px;
-    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
+    background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+    border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
     padding: 4px;
     display: flex;
     gap: 2px;
@@ -480,7 +483,7 @@ export const wysiwygStyles = css`
   @keyframes fadeInScale {
     from {
       opacity: 0;
-      transform: scale(0.95) translateY(5px);
+      transform: scale(0.98) translateY(2px);
     }
     to {
       opacity: 1;
@@ -494,20 +497,20 @@ export const wysiwygStyles = css`
     border: none;
     background: transparent;
     cursor: pointer;
-    border-radius: 4px;
+    border-radius: 3px;
     transition: all 0.15s ease;
     display: flex;
     align-items: center;
     justify-content: center;
-    color: ${cssManager.bdTheme('#000000', '#e0e0e0')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
     font-weight: 600;
     font-size: 14px;
     position: relative;
   }
 
   .format-button:hover {
-    background: ${cssManager.bdTheme('#f0f0f0', '#333333')};
-    color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+    background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+    color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
   }
 
   .format-button:active {
@@ -535,7 +538,7 @@ export const wysiwygStyles = css`
   .block strong,
   .block b {
     font-weight: 600;
-    color: ${cssManager.bdTheme('#000000', '#ffffff')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .block em,
@@ -554,22 +557,22 @@ export const wysiwygStyles = css`
   }
 
   .block code {
-    background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')};
+    background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
     padding: 2px 6px;
     border-radius: 3px;
     font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
     font-size: 0.9em;
-    color: ${cssManager.bdTheme('#d14', '#ff6b6b')};
+    color: ${cssManager.bdTheme('#09090b', '#fafafa')};
   }
 
   .block a {
-    color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+    color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
     text-decoration: none;
     border-bottom: 1px solid transparent;
     transition: border-color 0.15s ease;
   }
 
   .block a:hover {
-    border-bottom-color: ${cssManager.bdTheme('#0066cc', '#4d94ff')};
+    border-bottom-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
   }
 `;
\ No newline at end of file