feat: 12 UI improvements batch - 1. Editor surface flush (no margin/border, Google Docs style) - 2. Custom styled summary slider (gradient thumb) - 3. Empty states with icons for suggestions - 4. Enhanced status bar (chars, sentences, reading time) - 5. Mobile scrollable formatting toolbar - 6. Summary word count + compression ratio - 7. Document search bar with filter - 8. Text color + highlight color pickers - 9. Lists (bullet/ordered) + indent/outdent + clear format - 10. Animated sun/moon theme toggle - 11. Summary bullet points mode toggle - 12. Print styles (only editor content)

src/css/components.css

@@ -286,12 +286,19 @@
 /* ── Formatting Toolbar ── */
 .format-toolbar {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
   gap: 6px;
   padding: 8px var(--spacing-md);
   border-bottom: 1px solid var(--color-border);
   background: var(--color-surface);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.format-toolbar::-webkit-scrollbar {
+  display: none;
 }
 
 .fmt-group {
@@ -475,7 +482,7 @@
   background: var(--color-editor);
   color: var(--color-text-primary);
   min-height: 50vh;
-  padding: var(--spacing-lg);
+  padding: var(--spacing-lg) var(--spacing-xl);
   font-size: var(--font-size-editor);
   font-weight: var(--font-weight-regular);
   line-height: var(--line-height-editor);
@@ -485,11 +492,13 @@
   white-space: pre-wrap;
   word-wrap: break-word;
   overflow-y: auto;
-  border-radius: var(--radius-md);
-  margin: var(--spacing-md);
-  border: 1px solid var(--color-border);
-  box-shadow: var(--shadow-editor);
-  transition: box-shadow var(--transition-base), border-color var(--transition-base);
+  border-radius: 0;
+  margin: 0;
+  border: none;
+  border-top: 1px solid var(--color-border);
+  box-shadow: none;
+  transition: none;
+  flex: 1;
 }
 
 @media (min-width: 768px) {
@@ -502,8 +511,6 @@
 
 .editor-surface:focus {
   outline: none;
-  border-color: var(--color-border-strong);
-  box-shadow: var(--shadow-editor), 0 0 0 3px var(--focus-ring);
 }
 
 .editor-surface[data-empty="true"]::before {
@@ -515,7 +522,7 @@
 }
 
 .editor-surface.analyzing {
-  opacity: 0.88;
+  opacity: 0.92;
 }
 
 .editor-footer {
@@ -2104,3 +2111,354 @@ input[type="range"]::-webkit-slider-thumb {
   margin-top: var(--spacing-sm);
 }
 
+/* ── Item 2: Custom Summary Slider ── */
+.summarize-panel input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--color-border);
+  outline: none;
+  direction: ltr;
+  cursor: pointer;
+}
+
+.summarize-panel input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+  cursor: pointer;
+  border: 3px solid var(--color-surface);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+  transition: transform 0.15s ease;
+}
+
+.summarize-panel input[type="range"]::-webkit-slider-thumb:hover {
+  transform: scale(1.15);
+}
+
+.summarize-panel input[type="range"]::-moz-range-thumb {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+  cursor: pointer;
+  border: 3px solid var(--color-surface);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
+}
+
+/* ── Item 3: Empty States ── */
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xl) var(--spacing-md);
+  text-align: center;
+  gap: var(--spacing-md);
+}
+
+.empty-state__icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--color-surface-elevated);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+}
+
+.empty-state__title {
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+}
+
+.empty-state__desc {
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+  line-height: 1.6;
+}
+
+/* ── Item 4: Enhanced Status Bar ── */
+.editor-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  align-items: center;
+}
+
+.stat-item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: var(--font-size-label);
+  color: var(--color-text-muted);
+}
+
+.stat-item--sep {
+  width: 1px;
+  height: 14px;
+  background: var(--color-border);
+}
+
+/* ── Item 6: Summary Stats ── */
+.summary-stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+  padding: var(--spacing-sm) 0;
+  margin-bottom: var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.summary-stat {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--font-size-label);
+  color: var(--color-text-secondary);
+}
+
+.summary-stat__value {
+  font-weight: var(--font-weight-bold);
+  color: var(--color-primary);
+}
+
+/* ── Item 7: Document Search ── */
+.docs-search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  background: var(--color-surface);
+  margin-bottom: var(--spacing-md);
+  transition: border-color 0.15s ease;
+}
+
+.docs-search:focus-within {
+  border-color: var(--color-primary);
+}
+
+.docs-search__input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--color-text-primary);
+  font-family: inherit;
+  font-size: var(--font-size-caption);
+  outline: none;
+  direction: rtl;
+}
+
+.docs-search__input::placeholder {
+  color: var(--color-text-muted);
+}
+
+.docs-search__icon {
+  color: var(--color-text-muted);
+  flex-shrink: 0;
+}
+
+.doc-item-meta {
+  font-size: 0.65rem;
+  color: var(--color-text-muted);
+  margin-top: 2px;
+}
+
+/* ── Item 8: Color Picker ── */
+.fmt-color-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: none;
+  background: var(--color-surface);
+  cursor: pointer;
+  position: relative;
+  transition: background 0.15s ease;
+}
+
+.fmt-color-btn:hover {
+  background: var(--color-surface-elevated);
+}
+
+.fmt-color-indicator {
+  position: absolute;
+  bottom: 4px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 14px;
+  height: 3px;
+  border-radius: 2px;
+}
+
+.fmt-color-grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  gap: 4px;
+  padding: 8px;
+}
+
+.fmt-color-swatch {
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: transform 0.12s ease, border-color 0.12s ease;
+}
+
+.fmt-color-swatch:hover {
+  transform: scale(1.15);
+  border-color: var(--color-text-primary);
+}
+
+.fmt-color-swatch--active {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary);
+}
+
+/* ── Item 10: Animated Theme Toggle ── */
+.theme-toggle-animated {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: 50%;
+  background: var(--color-surface-elevated);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: background 0.3s ease, transform 0.3s ease, color 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.theme-toggle-animated:hover {
+  background: var(--color-primary);
+  color: #fff;
+  transform: rotate(15deg);
+}
+
+.theme-toggle-animated svg {
+  transition: transform 0.4s ease, opacity 0.3s ease;
+}
+
+.theme-toggle-animated .theme-icon-sun,
+.theme-toggle-animated .theme-icon-moon {
+  position: absolute;
+  transition: transform 0.4s ease, opacity 0.3s ease;
+}
+
+[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;
+}
+
+/* ── Item 11: Summary Mode Toggle ── */
+.summary-mode-toggle {
+  display: flex;
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  overflow: hidden;
+  margin-bottom: var(--spacing-md);
+}
+
+.summary-mode-btn {
+  flex: 1;
+  padding: 8px 12px;
+  border: none;
+  background: transparent;
+  color: var(--color-text-secondary);
+  font-family: inherit;
+  font-size: var(--font-size-caption);
+  font-weight: var(--font-weight-semibold);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+}
+
+.summary-mode-btn.active {
+  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
+  color: #fff;
+}
+
+.summary-mode-btn:hover:not(.active) {
+  background: var(--color-surface-elevated);
+}
+
+/* ── Item 12: Print Styles ── */
+@media print {
+  body * {
+    visibility: hidden;
+  }
+
+  #editor-container,
+  #editor-container * {
+    visibility: visible;
+  }
+
+  #editor-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    width: 100%;
+    min-height: auto;
+    padding: 2cm;
+    font-size: 14pt;
+    line-height: 2;
+    color: #000;
+    background: #fff;
+    border: none;
+    box-shadow: none;
+  }
+
+  .spelling-error,
+  .grammar-error,
+  .punctuation-suggestion {
+    border: none;
+    background: transparent;
+    text-decoration: none;
+  }
+
+  .site-nav,
+  .format-toolbar,
+  .editor-toolbar,
+  .editor-footer,
+  .sidebar-panel,
+  .docs-sidebar,
+  .bottom-sheet,
+  .suggestion-popover,
+  #analyzing-indicator {
+    display: none !important;
+  }
+}
+

src/index.html

@@ -86,7 +86,10 @@
          </div>
         </div>
        </div>
-       <button id="theme-toggle" class="theme-toggle" aria-label="تبديل السمة" aria-pressed="true" type="button"></button>
+       <button id="theme-toggle" class="theme-toggle-animated" aria-label="تبديل السمة" aria-pressed="true" type="button">
+        <svg class="theme-icon-sun" width="20" height="20" 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="20" height="20" 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>
      </div>
@@ -461,6 +464,10 @@
           <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
           مستند جديد
          </button>
+         <div class="docs-search">
+          <svg class="docs-search__icon" width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
+          <input type="text" class="docs-search__input" id="docs-search-input" placeholder="بحث في المستندات..." autocomplete="off">
+         </div>
          <div id="docs-list" role="list" aria-label="قائمة المستندات"></div>
         </div>
        </div>
@@ -556,6 +563,51 @@
             <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 10H11a5 5 0 00-5 5v2M21 10l-4-4M21 10l-4 4"/></svg>
            </button>
           </div>
+          <div class="fmt-divider"></div>
+          <!-- Item 8: Color pickers -->
+          <div class="fmt-group fmt-group--font">
+           <div class="fmt-dropdown" id="fmt-textcolor-wrap">
+            <button class="fmt-color-btn" type="button" id="fmt-textcolor-trigger" title="لون النص">
+             <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M11 2L5.5 16h2.25l1.12-3h6.25l1.12 3h2.25L13 2h-2zm-1.38 9L12 4.67 14.38 11H9.62z"/></svg>
+             <span class="fmt-color-indicator" id="fmt-textcolor-bar" style="background:#ECEEF2"></span>
+            </button>
+            <div class="fmt-dropdown__menu" id="fmt-textcolor-menu" role="menu">
+             <div class="fmt-color-grid" id="fmt-textcolor-grid"></div>
+            </div>
+           </div>
+           <div class="fmt-dropdown" id="fmt-highlight-wrap">
+            <button class="fmt-color-btn" type="button" id="fmt-highlight-trigger" title="لون التظليل">
+             <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15a1.49 1.49 0 000 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5zM2 20h20v4H2v-4z"/></svg>
+             <span class="fmt-color-indicator" id="fmt-highlight-bar" style="background:transparent"></span>
+            </button>
+            <div class="fmt-dropdown__menu" id="fmt-highlight-menu" role="menu">
+             <div class="fmt-color-grid" id="fmt-highlight-grid"></div>
+            </div>
+           </div>
+          </div>
+          <div class="fmt-divider"></div>
+          <!-- Item 9: Lists + Indent -->
+          <div class="fmt-group">
+           <button class="fmt-btn" onclick="execFormat('insertUnorderedList')" type="button" title="قائمة نقطية">
+            <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6h2v2H4V6zm4 0h12v2H8V6zM4 11h2v2H4v-2zm4 0h12v2H8v-2zm-4 5h2v2H4v-2zm4 0h12v2H8v-2z"/></svg>
+           </button>
+           <button class="fmt-btn" onclick="execFormat('insertOrderedList')" type="button" title="قائمة مرقمة">
+            <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z"/></svg>
+           </button>
+           <button class="fmt-btn" onclick="execFormat('indent')" type="button" title="مسافة بادئة">
+            <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M3 21h18v-2H3v2zM3 8v8l4-4-4-4zm8 9h10v-2H11v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"/></svg>
+           </button>
+           <button class="fmt-btn" onclick="execFormat('outdent')" type="button" title="إزالة المسافة البادئة">
+            <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M11 17h10v-2H11v2zm-8-5l4 4V8l-4 4zm0 9h18v-2H3v2zM3 3v2h18V3H3zm8 6h10V7H11v2zm0 4h10v-2H11v2z"/></svg>
+           </button>
+          </div>
+          <div class="fmt-divider"></div>
+          <!-- Clear formatting -->
+          <div class="fmt-group">
+           <button class="fmt-btn" onclick="execFormat('removeFormat')" type="button" title="مسح التنسيق">
+            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 2L2 22h20L12 2z"/><path stroke-linecap="round" stroke-width="2" d="M4 4l16 16"/></svg>
+           </button>
+          </div>
          </div>
          <input type="file" id="doc-import-input" class="sr-only" accept=".txt,.docx,text/plain,application/vnd.openxmlformats-officedocument.wordprocessingml.document" aria-hidden="true">
          <div id="write-area">
@@ -573,6 +625,17 @@
           </div>
          </div>
          <div id="summarize-area" class="summarize-panel is-hidden">
+          <!-- Item 11: Mode Toggle -->
+          <div class="summary-mode-toggle">
+           <button type="button" class="summary-mode-btn active" id="summary-mode-paragraph" onclick="setSummaryMode('paragraph')">
+            <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M3 5h18v2H3V5zm0 8h18v2H3v-2zm0 4h12v2H3v-2z"/></svg>
+            فقرة
+           </button>
+           <button type="button" class="summary-mode-btn" id="summary-mode-bullets" onclick="setSummaryMode('bullets')">
+            <svg width="14" height="14" fill="currentColor" viewBox="0 0 24 24"><path d="M4 6h2v2H4V6zm4 0h12v2H8V6zM4 11h2v2H4v-2zm4 0h12v2H8v-2zm-4 5h2v2H4v-2zm4 0h12v2H8v-2z"/></svg>
+            نقاط
+           </button>
+          </div>
           <div class="mb-6">
            <label class="block text-base font-bold mb-3" for="summary-length">طول الملخص</label>
            <div class="flex items-center gap-4">
@@ -591,6 +654,11 @@
           <button id="generate-summary-btn" onclick="generateSummary(event)" class="btn-primary w-full py-4 text-lg mb-6" type="button">توليد الملخص</button>
           <div id="summary-preview" class="summary-preview">
            <div class="summary-card">
+            <!-- Item 6: Summary Stats -->
+            <div id="summary-stats" class="summary-stats" style="display:none">
+             <div class="summary-stat"><span>كلمات الملخص:</span> <span class="summary-stat__value" id="summary-word-count">0</span></div>
+             <div class="summary-stat"><span>نسبة الاختصار:</span> <span class="summary-stat__value" id="summary-compression">0%</span></div>
+            </div>
             <div class="flex items-center justify-between mb-4">
              <h3 class="text-lg font-bold summary-card__title">الملخص</h3>
              <button onclick="copySummary()" class="btn-ghost" type="button">نسخ</button>
@@ -600,14 +668,23 @@
           </div>
          </div>
          <div class="editor-footer">
-          <div class="editor-stats" role="status" aria-label="إحصائيات الأخطاء">
+          <div class="editor-stats" role="status" aria-label="إحصائيات">
            <div class="flex items-center gap-2"><span class="stat-dot stat-dot--spelling" aria-hidden="true"></span><span class="text-sm text-secondary"><span id="spelling-count">٠</span> إملائي</span></div>
            <div class="flex items-center gap-2"><span class="stat-dot stat-dot--grammar" aria-hidden="true"></span><span class="text-sm text-secondary"><span id="grammar-count">٠</span> نحوي</span></div>
            <div class="flex items-center gap-2"><span class="stat-dot stat-dot--punctuation" aria-hidden="true"></span><span class="text-sm text-secondary"><span id="punctuation-count">٠</span> ترقيم</span></div>
+           <span class="stat-item--sep"></span>
+           <span class="stat-item"><span id="char-count">٠</span> حرف</span>
+           <span class="stat-item"><span id="sentence-count">٠</span> جملة</span>
+           <span class="stat-item--sep"></span>
+           <span class="stat-item">⏱ <span id="reading-time">٠</span> د قراءة</span>
           </div>
           <div class="editor-actions">
-           <button onclick="clearEditor()" class="btn-ghost" type="button">مسح الكل</button>
-           <button onclick="copyText()" class="btn-primary" type="button">نسخ النص</button>
+           <button onclick="clearEditor()" class="btn-ghost" type="button" title="مسح الكل">
+            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
+           </button>
+           <button onclick="copyText()" class="btn-ghost" type="button" title="نسخ النص">
+            <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
+           </button>
           </div>
          </div>
         </div>
@@ -926,10 +1003,32 @@
         }
         
         if (data.status === 'success' && data.summary) {
-          const p = document.createElement('p');
-          p.textContent = data.summary;
-          summaryText.textContent = '';
-          summaryText.appendChild(p);
+          let summaryContent = data.summary;
+          
+          // Item 11: Bullet mode
+          if (window._summaryMode === 'bullets') {
+            const sentences = summaryContent.split(/[.،؛]\s*/).filter(s => s.trim().length > 2);
+            const ul = document.createElement('ul');
+            ul.style.cssText = 'list-style: disc; padding-right: 1.5rem; direction: rtl; text-align: right;';
+            sentences.forEach(s => {
+              const li = document.createElement('li');
+              li.textContent = s.trim();
+              li.style.marginBottom = '8px';
+              ul.appendChild(li);
+            });
+            summaryText.textContent = '';
+            summaryText.appendChild(ul);
+          } else {
+            const p = document.createElement('p');
+            p.textContent = summaryContent;
+            summaryText.textContent = '';
+            summaryText.appendChild(p);
+          }
+          
+          // Item 6: Summary stats
+          if (typeof updateSummaryStats === 'function') {
+            updateSummaryStats(summaryContent);
+          }
         } else {
           throw new Error(data.error || 'لم يتم توليد ملخص');
         }
@@ -1065,6 +1164,7 @@
       initUI();
       initEditor();
       if (typeof initFormatToolbar === 'function') initFormatToolbar();
+      if (typeof initDocSearch === 'function') initDocSearch();
       initDocuments();
       updateSuggestionsList([]);
       // Phase 7 — Sync System

src/js/editor.js

@@ -71,6 +71,10 @@ function updateEditorStats() {
   if (wordCountEl) {
     wordCountEl.textContent = words.toLocaleString('ar-EG');
   }
+  // Item 4: Enhanced stats
+  if (typeof updateEnhancedStats === 'function') {
+    updateEnhancedStats();
+  }
 }
 
 function updatePlaceholder() {

src/js/format.js

@@ -197,4 +197,118 @@ function initFormatToolbar() {
   document.addEventListener('keydown', (e) => {
     if (e.key === 'Escape') closeAllFmtDropdowns();
   });
+
+  // Item 8: Color pickers
+  initColorPicker('fmt-textcolor', 'foreColor', 'fmt-textcolor-bar');
+  initColorPicker('fmt-highlight', 'hiliteColor', 'fmt-highlight-bar');
+}
+
+/* ── Item 8: Color Picker ── */
+const COLOR_PALETTE = [
+  '#ECEEF2', '#E88A8A', '#E4B35A', '#6BC98A', '#6BA3E0', '#A594E8',
+  '#F5F5F5', '#FF6B6B', '#FFD93D', '#51CF66', '#339AF0', '#845EF7',
+  '#ADB5BD', '#C92A2A', '#F08C00', '#2B8A3E', '#1864AB', '#5F3DC4',
+  '#495057', '#862E2E', '#B7791F', '#1B5E20', '#0D47A1', '#311B92',
+  '#212529', '#000000', '#5D4037', '#004D40', '#1A237E', '#4A148C',
+];
+
+function initColorPicker(prefix, command, barId) {
+  const trigger = document.getElementById(prefix + '-trigger');
+  const wrap = document.getElementById(prefix + '-wrap');
+  const grid = document.getElementById(prefix + '-grid');
+  if (!trigger || !wrap || !grid) return;
+
+  // Build swatches
+  COLOR_PALETTE.forEach(color => {
+    const swatch = document.createElement('button');
+    swatch.type = 'button';
+    swatch.className = 'fmt-color-swatch';
+    swatch.style.background = color;
+    swatch.title = color;
+    swatch.addEventListener('click', () => {
+      document.execCommand(command, false, color);
+      const bar = document.getElementById(barId);
+      if (bar) bar.style.background = color;
+      closeAllFmtDropdowns();
+      const editor = getEditorElement();
+      if (editor) editor.focus();
+    });
+    grid.appendChild(swatch);
+  });
+
+  // Toggle
+  trigger.addEventListener('click', (e) => {
+    e.stopPropagation();
+    toggleFmtDropdown(prefix + '-wrap');
+  });
+}
+
+/* ── Item 4: Enhanced Stats ── */
+function updateEnhancedStats() {
+  const text = getEditorText();
+  const charCount = text.length;
+  const sentences = text.split(/[.!?。؟!\.]+/).filter(s => s.trim().length > 0).length;
+  const words = text.trim().split(/\s+/).filter(w => w.length > 0).length;
+  const readingTimeMinutes = Math.max(1, Math.ceil(words / 200));
+
+  const charEl = document.getElementById('char-count');
+  const sentEl = document.getElementById('sentence-count');
+  const readEl = document.getElementById('reading-time');
+
+  if (charEl) charEl.textContent = charCount.toLocaleString('ar-EG');
+  if (sentEl) sentEl.textContent = sentences.toLocaleString('ar-EG');
+  if (readEl) readEl.textContent = readingTimeMinutes.toLocaleString('ar-EG');
+}
+
+/* ── Item 6: Summary Stats ── */
+function updateSummaryStats(summaryText) {
+  const originalText = getEditorText();
+  const summaryWords = summaryText.trim().split(/\s+/).filter(w => w.length > 0).length;
+  const originalWords = originalText.trim().split(/\s+/).filter(w => w.length > 0).length;
+  const compression = originalWords > 0 ? Math.round((1 - summaryWords / originalWords) * 100) : 0;
+
+  const statsEl = document.getElementById('summary-stats');
+  const wordCountEl = document.getElementById('summary-word-count');
+  const compressionEl = document.getElementById('summary-compression');
+
+  if (statsEl) statsEl.style.display = 'flex';
+  if (wordCountEl) wordCountEl.textContent = summaryWords;
+  if (compressionEl) compressionEl.textContent = compression + '%';
+}
+
+/* ── Item 11: Summary Mode ── */
+window._summaryMode = 'paragraph';
+
+function setSummaryMode(mode) {
+  window._summaryMode = mode;
+  document.querySelectorAll('.summary-mode-btn').forEach(btn => {
+    btn.classList.toggle('active', btn.id === 'summary-mode-' + mode);
+  });
+}
+
+/* ── Item 3: Empty States ── */
+function renderEmptyState(container, icon, title, desc) {
+  if (!container) return;
+  container.innerHTML = `
+    <div class="empty-state">
+      <div class="empty-state__icon">${icon}</div>
+      <div class="empty-state__title">${title}</div>
+      <div class="empty-state__desc">${desc}</div>
+    </div>
+  `;
+}
+
+/* ── Item 7: Document Search ── */
+function initDocSearch() {
+  const searchInput = document.getElementById('docs-search-input');
+  if (!searchInput) return;
+
+  searchInput.addEventListener('input', () => {
+    const query = searchInput.value.trim().toLowerCase();
+    const items = document.querySelectorAll('.doc-item');
+    items.forEach(item => {
+      const title = (item.textContent || '').toLowerCase();
+      item.style.display = title.includes(query) || !query ? '' : 'none';
+    });
+  });
 }

src/js/theme.js

@@ -18,10 +18,7 @@ function updateThemeToggleIcon(theme) {
     'aria-label',
     isDark ? 'التبديل إلى الوضع الفاتح' : 'التبديل إلى الوضع الداكن'
   );
-
-  btn.innerHTML = isDark
-    ? '<svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><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 width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><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>';
+  // CSS handles the sun/moon icon transitions via [data-theme] selectors
 }
 
 function clearThemePaletteOverrides() {

src/js/ui.js

@@ -101,12 +101,13 @@ function updateSuggestionsList(suggestions) {
   if (!suggestions || suggestions.length === 0) {
     const emptyHTML = `
       <div class="empty-state">
-        <svg class="empty-state-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
-            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
-        </svg>
-        <p class="text-base font-semibold">لا توجد اقتراحات</p>
-        <p class="text-sm mt-1">ابدأ بكتابة جملة عربية</p>
+        <div class="empty-state__icon">
+          <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+        </div>
+        <div class="empty-state__title">لا توجد اقتراحات</div>
+        <div class="empty-state__desc">ابدأ بكتابة نص عربي وسيتم تحليله تلقائياً</div>
       </div>`;
 
     lists.forEach((el) => { el.innerHTML = emptyHTML; });