feat: enhance extension UI and improve Smart Colon Guard

- Added visual divider lines to Chrome extension logos (Popup, Sidepanel, Inline)
- Synchronized light/dark theme toggle across all extension views via chrome.storage.local
- Fixed sidepanel theme variables to ensure responsive toggle
- Re-ordered z-index for login overlay to ensure it covers the editor
- Improved punctuation rules with a Smart Colon Guard that checks 6 words back for speech cues and perfectly retains colons even for long subjects

extension/content-inline.css

@@ -286,3 +286,53 @@
   opacity: 0.85 !important;
   transition: none !important;
 }
+
+
+/* ── Light Theme Overrides for Inline UI ── */
+.bayan-il-fab[data-bayan-theme="light"] {
+    background: #ffffff !important;
+    border: 1px solid #e5e7eb !important;
+}
+
+.bayan-il-fab[data-bayan-theme="light"] svg path {
+    fill: #6366f1 !important;
+}
+
+.bayan-il-tooltip[data-bayan-theme="light"] {
+    background: #ffffff !important;
+    border: 1px solid #e5e7eb !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(99, 102, 241, 0.1) !important;
+}
+
+.bayan-il-tooltip[data-bayan-theme="light"] .bayan-il-tooltip-header {
+    background: #f9fafb !important;
+    border-bottom: 1px solid #e5e7eb !important;
+    color: #4b5563 !important;
+}
+
+.bayan-il-tooltip[data-bayan-theme="light"] .bayan-il-tooltip-body {
+    background: #ffffff !important;
+}
+
+.bayan-il-tooltip[data-bayan-theme="light"] .bayan-il-tooltip-original {
+    color: #4b5563 !important;
+}
+
+.bayan-il-tooltip[data-bayan-theme="light"] .bayan-il-tooltip-correction {
+    color: #111827 !important;
+}
+
+.bayan-il-tooltip[data-bayan-theme="light"] .bayan-il-tooltip-actions {
+    border-top: 1px solid #e5e7eb !important;
+    background: #f9fafb !important;
+}
+
+.bayan-il-tooltip[data-bayan-theme="light"] .bayan-il-tooltip-ignore {
+    color: #4b5563 !important;
+}
+
+.bayan-il-tooltip[data-bayan-theme="light"] .bayan-il-tooltip-ignore:hover {
+    background: #e5e7eb !important;
+    color: #111827 !important;
+}
+

extension/content-inline.js

@@ -419,6 +419,7 @@
     const typeLabels = { spelling: 'إملائي', grammar: 'نحوي', punctuation: 'ترقيم' };
 
     tooltip = document.createElement('div');
+    tooltip.setAttribute('data-bayan-theme', currentBayanTheme);
     tooltip.className = 'bayan-il-tooltip';
     tooltip.dir = 'rtl';
 
@@ -566,6 +567,7 @@
     loadFabPosition();
 
     floatingBtn = document.createElement('div');
+      floatingBtn.setAttribute('data-bayan-theme', currentBayanTheme);
     floatingBtn.className = 'bayan-il-fab';
     safeHTML(floatingBtn, `
       <svg width="18" height="18" viewBox="0 0 100 100" fill="none">
@@ -1053,4 +1055,22 @@
   // ── Log ──
   const mode = IS_PROTECTED ? 'protected' : 'full';
   console.log(`[Bayan] Inline engine v7.1 (mode: ${mode}, TT: ${ttPolicy ? 'yes' : 'no'})`);
+
+
+  // ── Theme Sync for Inline UI ──
+  let currentBayanTheme = 'dark';
+  chrome.storage.local.get(['theme'], (res) => {
+    currentBayanTheme = res.theme || 'dark';
+    if (typeof tooltip !== 'undefined' && tooltip) tooltip.setAttribute('data-bayan-theme', currentBayanTheme);
+    if (typeof floatingBtn !== 'undefined' && floatingBtn) floatingBtn.setAttribute('data-bayan-theme', currentBayanTheme);
+  });
+  
+  chrome.storage.onChanged.addListener((changes, namespace) => {
+    if (namespace === 'local' && changes.theme) {
+      currentBayanTheme = changes.theme.newValue;
+      if (typeof tooltip !== 'undefined' && tooltip) tooltip.setAttribute('data-bayan-theme', currentBayanTheme);
+      if (typeof floatingBtn !== 'undefined' && floatingBtn) floatingBtn.setAttribute('data-bayan-theme', currentBayanTheme);
+    }
+  });
+
 })();

extension/popup.css

@@ -767,3 +767,69 @@ body::-webkit-scrollbar-thumb {
 .is-hidden {
   display: none !important;
 }
+
+
+/* Light Theme Variables */
+[data-theme="light"] {
+  --bayan-bg: #f9fafb;
+  --bayan-surface: #ffffff;
+  --bayan-surface-hover: #f3f4f6;
+  --bayan-surface-active: #e5e7eb;
+  --bayan-border: #e5e7eb;
+  --bayan-border-light: #d1d5db;
+  --bayan-text: #111827;
+  --bayan-text-secondary: #4b5563;
+  --bayan-text-muted: #9ca3af;
+  --bayan-success: #16a34a;
+  --bayan-warning: #d97706;
+}
+
+/* Theme Toggle Button Styles */
+.theme-toggle-animated {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: var(--bayan-surface-hover);
+  color: var(--bayan-text-secondary);
+  cursor: pointer;
+  transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  margin-right: 8px;
+}
+
+.theme-toggle-animated:hover {
+  background: var(--bayan-primary);
+  color: #fff;
+  transform: rotate(15deg);
+}
+
+.theme-toggle-animated svg {
+  transition: transform 0.4s ease, opacity 0.3s ease;
+  position: absolute;
+}
+
+[data-theme="dark"] .theme-icon-sun {
+  transform: rotate(90deg) scale(0);
+  opacity: 0;
+}
+
+[data-theme="dark"] .theme-icon-moon {
+  transform: rotate(0) scale(1);
+  opacity: 1;
+}
+
+[data-theme="light"] .theme-icon-moon {
+  transform: rotate(-90deg) scale(0);
+  opacity: 0;
+}
+
+[data-theme="light"] .theme-icon-sun {
+  transform: rotate(0) scale(1);
+  opacity: 1;
+}
+

extension/popup.html

@@ -13,12 +13,20 @@
   <header class="bayan-header">
     <div class="bayan-header-brand">
       <img src="assets/icons/icon48.png" alt="بيان" width="28" height="28" style="border-radius:6px;">
+      <div style="height:24px; width:2px; background-color:#d1d5db; border-radius:9999px; flex-shrink:0;"></div>
       <span class="bayan-header-title">بيان</span>
     </div>
-    <div class="bayan-header-status" id="status-indicator">
+    
+    <div style="display: flex; align-items: center; gap: 12px;">
+<button id="ext-theme-toggle" class="theme-toggle-animated" aria-label="تبديل السمة" type="button">
+      <svg class="theme-icon-sun" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+      <svg class="theme-icon-moon" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
+    </button>
+<div class="bayan-header-status" id="status-indicator">
       <span class="bayan-status-dot"></span>
       <span class="bayan-status-text" id="status-text">جاهز</span>
     </div>
+</div>
   </header>
 
   <!-- ══════════════════════════════════════════════ -->

extension/popup.js

@@ -680,3 +680,32 @@ document.addEventListener('DOMContentLoaded', () => {
   })();
 });
 
+
+
+// ── Theme Toggle Logic ──
+(function initBayanThemeToggle() {
+  const toggleBtn = document.getElementById('ext-theme-toggle');
+  
+  // Load theme from storage
+  chrome.storage.local.get(['theme'], (result) => {
+    const currentTheme = result.theme || 'dark'; // default to dark
+    document.documentElement.setAttribute('data-theme', currentTheme);
+  });
+
+  // Sync theme changes instantly across all views
+  chrome.storage.onChanged.addListener((changes, namespace) => {
+    if (namespace === 'local' && changes.theme) {
+      document.documentElement.setAttribute('data-theme', changes.theme.newValue);
+    }
+  });
+
+
+  if (toggleBtn) {
+    toggleBtn.addEventListener('click', () => {
+      let theme = document.documentElement.getAttribute('data-theme') || 'dark';
+      let targetTheme = theme === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', targetTheme);
+      chrome.storage.local.set({ theme: targetTheme });
+    });
+  }
+})();

extension/sidepanel/sidepanel.css

@@ -678,3 +678,86 @@ body {
 .is-hidden {
   display: none !important;
 }
+
+
+/* Light Theme Variables */
+[data-theme="light"] {
+  --bayan-bg: #f9fafb;
+  --bayan-surface: #ffffff;
+  --bayan-surface-hover: #f3f4f6;
+  --bayan-surface-active: #e5e7eb;
+  --bayan-border: #e5e7eb;
+  --bayan-border-light: #d1d5db;
+  --bayan-text: #111827;
+  --bayan-text-secondary: #4b5563;
+  --bayan-text-muted: #9ca3af;
+  --bayan-success: #16a34a;
+  --bayan-warning: #d97706;
+}
+
+/* Theme Toggle Button Styles */
+.theme-toggle-animated {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  background: var(--sp-surface-hover);
+  color: var(--sp-text-secondary);
+  cursor: pointer;
+  transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
+  position: relative;
+  overflow: hidden;
+  margin-right: 8px;
+}
+
+.theme-toggle-animated:hover {
+  background: var(--sp-primary);
+  color: #fff;
+  transform: rotate(15deg);
+}
+
+.theme-toggle-animated svg {
+  transition: transform 0.4s ease, opacity 0.3s ease;
+  position: absolute;
+}
+
+[data-theme="dark"] .theme-icon-sun {
+  transform: rotate(90deg) scale(0);
+  opacity: 0;
+}
+
+[data-theme="dark"] .theme-icon-moon {
+  transform: rotate(0) scale(1);
+  opacity: 1;
+}
+
+[data-theme="light"] .theme-icon-moon {
+  transform: rotate(-90deg) scale(0);
+  opacity: 0;
+}
+
+[data-theme="light"] .theme-icon-sun {
+  transform: rotate(0) scale(1);
+  opacity: 1;
+}
+
+
+
+/* Light Theme Variables for Side Panel */
+[data-theme="light"] {
+  --sp-bg: #f9fafb;
+  --sp-surface: #ffffff;
+  --sp-surface-hover: #f3f4f6;
+  --sp-surface-active: #e5e7eb;
+  --sp-border: #e5e7eb;
+  --sp-border-light: #d1d5db;
+  --sp-text: #111827;
+  --sp-text-secondary: #4b5563;
+  --sp-text-muted: #9ca3af;
+  --sp-success: #16a34a;
+  --sp-warning: #d97706;
+}
+

extension/sidepanel/sidepanel.html

@@ -13,12 +13,20 @@
   <header class="sp-header">
     <div class="sp-header-brand">
       <img src="../assets/icons/icon48.png" alt="بيان" width="24" height="24" style="border-radius:5px;">
+      <div style="height:24px; width:2px; background-color:#d1d5db; border-radius:9999px; flex-shrink:0;"></div>
       <span class="sp-header-title">بيان</span>
     </div>
-    <div class="sp-header-status" id="status-indicator">
+    
+    <div style="display: flex; align-items: center; gap: 12px;">
+<button id="ext-theme-toggle" class="theme-toggle-animated" aria-label="تبديل السمة" type="button">
+      <svg class="theme-icon-sun" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
+      <svg class="theme-icon-moon" width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/></svg>
+    </button>
+<div class="sp-header-status" id="status-indicator">
       <span class="sp-status-dot"></span>
       <span class="sp-status-text" id="status-text">جاري الاتصال...</span>
     </div>
+</div>
   </header>
 
   <!-- ══════════════════════════════════════════════ -->

extension/sidepanel/sidepanel.js

@@ -846,3 +846,32 @@ document.addEventListener('DOMContentLoaded', () => {
     });
   }
 });
+
+
+// ── Theme Toggle Logic ──
+(function initBayanThemeToggle() {
+  const toggleBtn = document.getElementById('ext-theme-toggle');
+  
+  // Load theme from storage
+  chrome.storage.local.get(['theme'], (result) => {
+    const currentTheme = result.theme || 'dark'; // default to dark
+    document.documentElement.setAttribute('data-theme', currentTheme);
+  });
+
+  // Sync theme changes instantly across all views
+  chrome.storage.onChanged.addListener((changes, namespace) => {
+    if (namespace === 'local' && changes.theme) {
+      document.documentElement.setAttribute('data-theme', changes.theme.newValue);
+    }
+  });
+
+
+  if (toggleBtn) {
+    toggleBtn.addEventListener('click', () => {
+      let theme = document.documentElement.getAttribute('data-theme') || 'dark';
+      let targetTheme = theme === 'dark' ? 'light' : 'dark';
+      document.documentElement.setAttribute('data-theme', targetTheme);
+      chrome.storage.local.set({ theme: targetTheme });
+    });
+  }
+})();

generate_icons.py

@@ -1,8 +1,8 @@
 """Generate extension icons from LOGOS/1.png (gradient bg for best small-size visibility)."""
 from PIL import Image
 
-img = Image.open("LOGOS/1.png")
+img = Image.open("LOGOS/2.png")
 for size in [16, 32, 48, 128]:
-    img.resize((size, size), Image.LANCZOS).save(f"extension/assets/icons/icon{size}.png")
-    print(f"Generated icon{size}.png ({size}x{size}) from LOGOS/1.png")
+    img.resize((size, size), Image.LANCZOS).save(f"LOGOS/icon{size}.png")
+    print(f"Generated icon{size}.png ({size}x{size}) from LOGOS/2.png")
 print("Done!")

src/nlp/punctuation/punctuation_rules.py

@@ -56,23 +56,42 @@ def arabic_postprocessing(text: str) -> str:
     # Remove colons/semicolons before relative pronouns
     text = re.sub(r'[؛:]\s*(التي|الذي|الذين|اللتان|اللذان|اللاتي|اللواتي)', r' \1', text)
     
-    # NEW: Strict Colon Guard
-    _ALLOWED_COLON_CUES = r'(قال|يقول|قالت|تقول|أجاب|أجابت|سأل|سألت|أخبر|أخبرت|صرح|صرحت|أضاف|أضافت|أردف|أردفت|وضح|وضحت|أوضح|أوضحت|رد|ردت|التالي|الآتي|مثال|ملاحظة|تنبيه|تحذير|قائلا|قائلة|اسم|العمر|تاريخ|رقم|عاجل|الآتية|التالية)'
+    # 1. Fix misplaced colons (e.g. قال: المعلم -> قال المعلم:)
+    # Only applies if a colon is actually present on the verb or the name
+    def _fix_misplaced(m):
+        verb, col1, name, col2 = m.groups()
+        if col1 == ':' or col2 == ':':
+            return f"{verb} {name}:"
+        return m.group(0)
+        
+    text = re.sub(
+        r'\b([وفلس]?(?:قال|يقول|قالت|تقول|أجاب|أجابت|سأل|سألت|أخبر|أخبرت|صرح|صرحت|أضاف|أضافت|أردف|أردفت))(:?)\s+(ال[أ-ي]+|أحمد|محمد|محمود|علي|عمر|خالد|فاطمة|مريم|عائشة|خديجة)\b(:?)',
+        _fix_misplaced, text
+    )
+
+    # 2. Smart Colon Guard (looks up to 6 words back)
+    _ALLOWED_COLON_CUES = r'^[وفلس]?(قال|يقول|قالت|تقول|أجاب|أجابت|سأل|سألت|أخبر|أخبرت|صرح|صرحت|أضاف|أضافت|أردف|أردفت|وضح|وضحت|أوضح|أوضحت|رد|ردت|التالي|الآتي|مثال|ملاحظة|تنبيه|تحذير|قائلا|قائلة|اسم|العمر|تاريخ|رقم|عاجل|الآتية|التالية)$'
     
     def _colon_guard(match):
-        prev_word = match.group(1)
-        if re.fullmatch(_ALLOWED_COLON_CUES, prev_word):
+        context = match.group(1)
+        colon = match.group(2)
+        
+        words = re.findall(r'[\u0600-\u06FFa-zA-Z]+', context)
+        if not words:
             return match.group(0)
-        # Strip colons from definite nouns (ال-prefix) and preposition+definite combos
-        # (لل, بال, فال, وال, كال). These are never valid colon targets.
+            
+        prev_word = words[-1]
+        last_6_words = words[-6:]
+        
+        if any(re.match(_ALLOWED_COLON_CUES, w) for w in last_6_words):
+            return match.group(0)
+            
         if prev_word.startswith(('ال', 'لل', 'بال', 'فال', 'وال', 'كال')):
-            return f'{prev_word}'
+            return context + " " 
+            
         return match.group(0)
         
-    text = re.sub(r'([\u0600-\u06FF]+)(\s*:)', _colon_guard, text)
-    
-    # Fix misplaced colons for saying verbs (e.g. قال: المعلم -> قال المعلم:)
-    text = re.sub(r'\b(قال|يقول|قالت|تقول|أجاب|أجابت|سأل|سألت|أخبر|أخبرت|صرح|صرحت|أضاف|أضافت|أردف|أردفت):?\s+(ال[أ-ي]+|أحمد|محمد|محمود|علي|عمر|خالد|فاطمة|مريم|عائشة|خديجة)\b:?', r'\1 \2:', text)
+    text = re.sub(r'([^:]+)(:)', _colon_guard, text)
     
     # Remove colons after specific non-speech verbs (fallback for verbs without ال)
     text = re.sub(r'\b(يقدر|يستطيع|يمكن|يجب|ينبغي|يعتبر|يعد|يرى|يعتقد)\s*:', r'\1 ', text)