diff --git a/app/templates/base.html b/app/templates/base.html
index e12faba..4000c7f 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -48,140 +48,124 @@
   {% endif %}
 {% endmacro %}
 
-  <!-- ═══════════ SIDEBAR ═══════════ -->
+  <!-- ═══════════ SIDEBAR Notion-style ═══════════ -->
   <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }" id="sidebar"
-         x-init="$nextTick(() => initTreeSortable())">
-
+         x-data x-init="$nextTick(() => { if(typeof initTreeSortable==='function') initTreeSortable(); })">
     <!-- Workspace header -->
-    <div class="sidebar-workspace">
+    <div class="sidebar-workspace" @click="toggleWorkspaceMenu">
       <div class="workspace-info">
         <div class="workspace-avatar">{{ workspaceInitial }}</div>
         <span class="workspace-name">{{ workspaceName }}</span>
       </div>
-      <div class="sidebar-actions">
-        <button class="sidebar-action-btn" @click="sidebarCollapsed = !sidebarCollapsed" title="Toggle sidebar">
-          «
-        </button>
+      <span class="workspace-chevron">▾</span>
+    </div>
+
+    <!-- Search -->
+    <div class="sidebar-nav">
+      <div class="sidebar-nav-item" @click="openQuickFind">
+        <span class="nav-icon">🔍</span> Search
       </div>
     </div>
 
-    <!-- Quick actions -->
+    <!-- Settings -->
     <div class="sidebar-nav">
       <a href="/" class="sidebar-nav-item" :class="{ active: currentView === 'home' }">
         <span class="nav-icon">🏠</span> Home
       </a>
     </div>
-    <div class="sidebar-nav" style="gap: 2px; padding-right: 6px;">
-      <button class="sidebar-action-btn" style="width:auto; padding: 0 6px;">💬</button>
-      <button class="sidebar-action-btn" style="width:auto; padding: 0 6px;">🎤</button>
-      <button class="sidebar-action-btn" style="width:auto; padding: 0 6px;">📥</button>
-      <button class="sidebar-action-btn" style="width:auto; padding: 0 6px;">🔍</button>
-    </div>
 
     <!-- Recents -->
     <div class="sidebar-section">
-      <div class="sidebar-section-header">
+      <div class="sidebar-section-header" @click="toggleSection('recents')">
         <div class="sidebar-section-title">
-          <span class="chevron open">▶</span> Recents
+          <span class="chevron" :class="{ open: sectionsOpen.recents }" x-text="sectionsOpen.recents ? '▼' : '▶'"></span>
+          <span>Recents</span>
         </div>
         <div class="sidebar-section-actions">
-          <button class="section-action-btn" title="Open in Library" @click="openLibrary('Recents')">📚</button>
-          <button class="section-action-btn" title="Add page" @click="newPage('Recents')">+</button>
+          <button class="section-action-btn" title="Add page" @click.stop="newPage('Recents')">+</button>
         </div>
       </div>
-      <ul class="sidebar-items" data-section="recents">
-        {% for page in recent_pages %}
-          {{ render_tree_item(page) }}
-        {% endfor %}
-        {% if not recent_pages %}
-        <li class="sidebar-item">
-          <span class="tree-toggle-placeholder"></span>
-          <span class="page-icon">📄</span>
-          <span class="page-name text-dim">No recent pages</span>
-        </li>
-        {% endif %}
-      </ul>
+      <div class="sidebar-section-items" x-show="sectionsOpen.recents" x-transition>
+        <ul class="sidebar-items" data-section="recents">
+          {% for page in recent_pages %}
+            {{ render_tree_item(page) }}
+          {% endfor %}
+          {% if not recent_pages %}
+          <li class="sidebar-item">
+            <span class="tree-toggle-placeholder"></span>
+            <span class="page-icon">📄</span>
+            <span class="page-name text-dim">No recent pages</span>
+          </li>
+          {% endif %}
+        </ul>
+      </div>
     </div>
 
-    <!-- Favorites: Private -->
+    <!-- Favorites section is optionnel ici -->
+
+    <!-- Private -->
     <div class="sidebar-section">
-      <div class="sidebar-section-header">
+      <div class="sidebar-section-header" @click="toggleSection('private')">
         <div class="sidebar-section-title">
-          <span class="chevron open">▶</span> Private
+          <span class="chevron" :class="{ open: sectionsOpen.private }" x-text="sectionsOpen.private ? '▼' : '▶'"></span>
+          <span>Private</span>
         </div>
         <div class="sidebar-section-actions">
-          <button class="section-action-btn" title="Open in Library" @click="openLibrary('Private')">📚</button>
-          <button class="section-action-btn" title="Add page" @click="newPage('Private')">+</button>
+          <button class="section-action-btn" title="Add page" @click.stop="newPage('Private')">+</button>
         </div>
       </div>
-      <ul class="sidebar-items" data-section="private">
-        {% for page in private_pages %}
-          {{ render_tree_item(page) }}
-        {% endfor %}
-        {% if not private_pages %}
-        <li class="sidebar-item">
-          <span class="tree-toggle-placeholder"></span>
-          <span class="page-icon">📄</span>
-          <span class="page-name text-dim">No pages yet</span>
-        </li>
-        {% endif %}
-      </ul>
-    </div>
-
-    <!-- Notion apps -->
-    <div class="sidebar-section">
-      <div class="sidebar-section-header">
-        <div class="sidebar-section-title">
-          <span class="chevron open">▶</span> Notion apps
-        </div>
+      <div class="sidebar-section-items" x-show="sectionsOpen.private" x-transition>
+        <ul class="sidebar-items" data-section="private">
+          {% for page in private_pages %}
+            {{ render_tree_item(page) }}
+          {% endfor %}
+          {% if not private_pages %}
+          <li class="sidebar-item">
+            <span class="tree-toggle-placeholder"></span>
+            <span class="page-icon">📄</span>
+            <span class="page-name text-dim">No pages yet</span>
+          </li>
+          {% endif %}
+        </ul>
       </div>
-      <ul class="sidebar-items">
-        <li class="sidebar-item"><span class="page-icon">📅</span><span class="page-name">Notion Calendar</span></li>
-        <li class="sidebar-item"><span class="page-icon">🖥️</span><span class="page-name">Notion Desktop</span></li>
-      </ul>
-    </div>
-
-    <!-- Favorites -->
-    <div class="sidebar-section">
-      <div class="sidebar-section-header">
-        <div class="sidebar-section-title">
-          <span class="chevron open">▶</span> Favorites
-        </div>
-        <div class="sidebar-section-actions">
-          <button class="section-action-btn" title="Add page" @click="newPage('Favorites')">+</button>
-        </div>
-      </div>
-      <ul class="sidebar-items" data-section="favorites">
-        {% for page in favorite_pages %}
-          {{ render_tree_item(page) }}
-        {% endfor %}
-        {% if not favorite_pages %}
-        <li class="sidebar-item">
-          <span class="tree-toggle-placeholder"></span>
-          <span class="page-icon">⭐</span>
-          <span class="page-name text-dim">No favorites yet</span>
-        </li>
-        {% endif %}
-      </ul>
     </div>
 
     <!-- Shared -->
     <div class="sidebar-section">
-      <div class="sidebar-section-header">
+      <div class="sidebar-section-header" @click="toggleSection('shared')">
         <div class="sidebar-section-title">
-          <span class="chevron">▶</span> Shared
+          <span class="chevron" :class="{ open: sectionsOpen.shared }" x-text="sectionsOpen.shared ? '▼' : '▶'"></span>
+          <span>Shared</span>
         </div>
       </div>
-      <ul class="sidebar-items">
-        <li class="sidebar-item">
-          <span class="page-icon">👥</span>
-          <span class="page-name text-dim">No shared pages</span>
-        </li>
-      </ul>
+      <div class="sidebar-section-items" x-show="sectionsOpen.shared" x-transition>
+        <ul class="sidebar-items">
+          <li class="sidebar-item">
+            <span class="page-icon">👥</span>
+            <span class="page-name text-dim">No shared pages</span>
+          </li>
+        </ul>
+      </div>
     </div>
 
-    <!-- Library button -->
-    <div class="sidebar-nav" style="margin-top: 8px;">
+    <!-- Notion apps -->
+    <div class="sidebar-section">
+      <div class="sidebar-section-header" @click="toggleSection('apps')">
+        <div class="sidebar-section-title">
+          <span class="chevron" :class="{ open: sectionsOpen.apps }" x-text="sectionsOpen.apps ? '▼' : '▶'"></span>
+          <span>Notion apps</span>
+        </div>
+      </div>
+      <div class="sidebar-section-items" x-show="sectionsOpen.apps" x-transition>
+        <ul class="sidebar-items">
+          <li class="sidebar-item"><span class="page-icon">📅</span><span class="page-name">Notion Calendar</span></li>
+          <li class="sidebar-item"><span class="page-icon">🖥️</span><span class="page-name">Notion Desktop</span></li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Utility links -->
+    <div class="sidebar-utility">
       <a href="/library" class="sidebar-nav-item" @click.prevent="navigateTo('/library')">
         <span class="nav-icon">📚</span> Library
       </a>
@@ -189,22 +173,16 @@
 
     <!-- Footer -->
     <div class="sidebar-footer">
-      <div class="sidebar-invite" x-show="showInvite" x-transition>
-        <div class="sidebar-invite-title">👥 Invite members</div>
-        <div class="sidebar-invite-desc">Collaborate with your team.</div>
-        <button class="sidebar-invite-close" @click="showInvite = false">✕</button>
-      </div>
-      <button class="sidebar-new-chat">
-        <span>💬 New chat</span>
-        <span class="shortcut">Ctrl+O</span>
+      <button class="sidebar-footer-btn" @click="newPage('Private')">
+        <span style="font-size:16px;">+</span> New page
       </button>
       <div style="display: flex; gap: 4px; margin-top: 4px;">
         {% if user %}
-        <a href="/auth/logout" class="sidebar-new-chat" style="flex:1; justify-content:center;">🚪</a>
+        <a href="/auth/logout" class="sidebar-footer-btn" style="flex:1; justify-content:center;">🚪</a>
         {% else %}
-        <a href="/auth/login" class="sidebar-new-chat" style="flex:1; justify-content:center;">🔑</a>
+        <a href="/auth/login" class="sidebar-footer-btn" style="flex:1; justify-content:center;">🔑</a>
         {% endif %}
-        <button class="sidebar-new-chat" style="width:36px; justify-content:center;" @click="toggleTheme()">🌓</button>
+        <button class="sidebar-footer-btn" style="width:36px; justify-content:center;" @click="toggleTheme()">🌓</button>
       </div>
     </div>
   </aside>
@@ -362,6 +340,12 @@
       contextActions: {},
       showNewPageMenu: false,
 
+      // ── Sections collapsible ──
+      sectionsOpen: { recents: true, private: true, shared: true, apps: true },
+      toggleSection(key) { this.sectionsOpen[key] = !this.sectionsOpen[key]; this.sectionsOpen = Object.assign({}, this.sectionsOpen); },
+      toggleWorkspaceMenu() { this.sidebarCollapsed = !this.sidebarCollapsed; },
+      openQuickFind() { alert('Quick Find — Ctrl+K'); },
+
       // ── Tree state ──
       expandedNodes: {},
 
diff --git a/app/templates/page_editor.html b/app/templates/page_editor.html
index bb3b619..a8c168a 100644
--- a/app/templates/page_editor.html
+++ b/app/templates/page_editor.html
@@ -9,71 +9,16 @@
     <div class="page-title-block">
       <span class="page-icon-emoji">📄</span>
       <div class="page-title-input" contenteditable="true" id="_titleEl"
-           @paste.prevent="pastePlain($event)"
            @input="dirty=true;autoSave()"
            @keydown.enter.prevent="focusBlock()"
+           @paste.prevent="pastePlain($event)"
            spellcheck="false">{{ page.title }}</div>
     </div>
   </div>
 
-  <div class="blocks-container" id="_blocksCt" @click="onCtClick($event)">
-
-    <template x-for="idx in blocks.length" :key="'b'+idx">
-      <div class="block-wrapper" :data-bid="blocks[idx-1].id"
-           @mouseenter="hoverBid=blocks[idx-1].id" @mouseleave="hoverBid=null">
-
-        <div class="block-handle" :class="{visible:hoverBid===blocks[idx-1].id}">
-          <svg viewBox="0 0 16 16" width="14" height="14">
-            <circle cx="4" cy="3" r="1.3"/><circle cx="11" cy="3" r="1.3"/>
-            <circle cx="4" cy="8" r="1.3"/><circle cx="11" cy="8" r="1.3"/>
-            <circle cx="4" cy="13" r="1.3"/><circle cx="11" cy="13" r="1.3"/>
-          </svg>
-        </div>
-        <div class="block-actions" :class="{visible:hoverBid===blocks[idx-1].id}">
-          <button class="block-add-btn" @click="addAfter(idx-1)">+</button>
-        </div>
-
-        <div x-show="blocks[idx-1].type==='paragraph'" class="block-content" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Type '/' for commands..." spellcheck="false"></div>
-        <h1 x-show="blocks[idx-1].type==='heading_1'" class="block-content block-h1" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Heading 1" spellcheck="false"></h1>
-        <h2 x-show="blocks[idx-1].type==='heading_2'" class="block-content block-h2" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Heading 2" spellcheck="false"></h2>
-        <h3 x-show="blocks[idx-1].type==='heading_3'" class="block-content block-h3" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Heading 3" spellcheck="false"></h3>
-        <div x-show="blocks[idx-1].type==='bulleted_list'" class="block-content block-bullet" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="List" spellcheck="false"></div>
-        <div x-show="blocks[idx-1].type==='numbered_list'" class="block-content block-numbered" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="List" spellcheck="false"></div>
-        <div x-show="blocks[idx-1].type==='to_do'" class="block-content block-todo">
-          <input type="checkbox" class="todo-checkbox" :checked="blocks[idx-1].checked" @change="blocks[idx-1].checked=$event.target.checked;dirty=true;autoSave()">
-          <div :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="To-do" spellcheck="false"></div>
-        </div>
-        <div x-show="blocks[idx-1].type==='toggle'" class="block-content block-toggle">
-          <button class="toggle-chevron" :class="{open:blocks[idx-1].expanded}" @click="blocks[idx-1].expanded=!blocks[idx-1].expanded;autoSave()">▶</button>
-          <div :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Toggle" spellcheck="false"></div>
-        </div>
-        <blockquote x-show="blocks[idx-1].type==='quote'" class="block-content block-quote" :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Quote" spellcheck="false"></blockquote>
-        <div x-show="blocks[idx-1].type==='code'" class="block-content block-code">
-          <div class="code-lang-label" x-text="blocks[idx-1].language||'Plain Text'"></div>
-          <pre><code :data-bid="blocks[idx-1].id" contenteditable="true" spellcheck="false"></code></pre>
-        </div>
-        <hr x-show="blocks[idx-1].type==='divider'" class="block-divider">
-        <div x-show="blocks[idx-1].type==='callout'" class="block-content block-callout" :style="{background:(blocks[idx-1].style&&blocks[idx-1].style.bgColor)||'var(--blue-bg)'}">
-          <span class="callout-icon" x-text="blocks[idx-1].icon||'💡'">💡</span>
-          <div :data-bid="blocks[idx-1].id" contenteditable="true" data-placeholder="Type something..." spellcheck="false"></div>
-        </div>
-        <div x-show="blocks[idx-1].type==='image'" class="block-content block-image-wrapper">
-          <img :src="blocks[idx-1].src" style="max-width:100%;border-radius:4px" x-show="blocks[idx-1].src">
-          <div class="image-placeholder" x-show="!blocks[idx-1].src" @click="imgInputs[blocks[idx-1].id]?.click()" @drop.prevent="dropImg($event,idx-1)" @dragover.prevent>
-            <span>🖼 Click or drop image</span>
-            <input type="file" accept="image/*" style="display:none" :ref="el=>{if(el)imgInputs[blocks[idx-1].id]=el}" @change="uploadImg(idx-1,$event)">
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <div class="blocks-empty" x-show="blocks.length===0" @click="addAt(0)">Press '/' for commands, or just start typing...</div>
-  </div>
-
-  <!-- Slash menu: built in vanilla JS, not Alpine -->
+  <div class="blocks-container" id="_blocksCt" @click="onCtClick($event)"></div>
   <div id="_slashMenu" class="slash-menu" style="display:none;position:fixed;z-index:999"></div>
 
-  <!-- Format Toolbar: Alpine for show/hide only -->
   <div class="format-toolbar" x-show="fmt.open" :style="{top:fmt.top+'px',left:fmt.left+'px'}" @mousedown.prevent>
     <button @click="fmtApply('bold')"><strong>B</strong></button>
     <button @click="fmtApply('italic')"><em>I</em></button>
@@ -94,132 +39,78 @@
 
 {% block scripts %}
 <script>
-// ═══════════════════════════════════════════
-// FlowDeck Block Editor — Notion Clone v4
-// Slash menu: pure vanilla JS (zero Alpine)
-// Blocks: Alpine x-for + vanilla JS keydown
-// ═══════════════════════════════════════════
+const CMDS=[{name:'BASIC',items:[
+  {id:'paragraph',name:'Text',icon:'¶'},{id:'heading_1',name:'Heading 1',icon:'H1'},{id:'heading_2',name:'Heading 2',icon:'H2'},
+  {id:'heading_3',name:'Heading 3',icon:'H3'},{id:'heading_4',name:'Heading 4',icon:'H4'},{id:'bulleted_list',name:'Bulleted list',icon:'•'},{id:'numbered_list',name:'Numbered list',icon:'1.'},
+  {id:'to_do',name:'To-do',icon:'☐'},{id:'toggle',name:'Toggle',icon:'▶'},{id:'quote',name:'Quote',icon:'❝'},
+  {id:'callout',name:'Callout',icon:'💡'},{id:'divider',name:'Divider',icon:'—'},{id:'code',name:'Code block',icon:'<>'},
+]},{name:'MEDIA',items:[{id:'image',name:'Image',icon:'🖼'}]}];
 
-let _bid=0;
-function genId(){return 'b'+(++_bid)+'_'+Date.now().toString(36);}
+let _bid=0;function genId(){return 'b'+(++_bid)+'_'+Date.now().toString(36);}
+function cp(e){const s=window.getSelection();if(!s.rangeCount)return 0;const r=s.getRangeAt(0).cloneRange();r.selectNodeContents(e);r.setEnd(s.getRangeAt(0).endContainer,s.getRangeAt(0).endOffset);return r.toString().length;}
+function ce(e){const r=document.createRange();r.selectNodeContents(e);r.collapse(false);window.getSelection().removeAllRanges();window.getSelection().addRange(r);}
+function cs(e){const r=document.createRange();r.selectNodeContents(e);r.collapse(true);window.getSelection().removeAllRanges();window.getSelection().addRange(r);}
+function esc(s){return s.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');}
 
-// Slash commands data
-const SLASH_GROUPS=[
-  {name:'BASIC',items:[
-    {id:'paragraph',name:'Text',icon:'¶'},
-    {id:'heading_1',name:'Heading 1',icon:'H1'},
-    {id:'heading_2',name:'Heading 2',icon:'H2'},
-    {id:'heading_3',name:'Heading 3',icon:'H3'},
-    {id:'bulleted_list',name:'Bulleted list',icon:'•'},
-    {id:'numbered_list',name:'Numbered list',icon:'1.'},
-    {id:'to_do',name:'To-do',icon:'☐'},
-    {id:'toggle',name:'Toggle',icon:'▶'},
-    {id:'quote',name:'Quote',icon:'❝'},
-    {id:'callout',name:'Callout',icon:'💡'},
-    {id:'divider',name:'Divider',icon:'—'},
-    {id:'code',name:'Code block',icon:'<>'},
-  ]},
-  {name:'MEDIA',items:[
-    {id:'image',name:'Image',icon:'🖼'},
-  ]},
-];
-
-// ── Slash Menu (100% vanilla JS, no Alpine) ──
-const SlashMenu={
-  _open:false,_idx:-1,_sel:0,_q:'',_items:[],
-  _el:null,_inp:null,_list:null,
-
-  init(){
-    this._el=document.getElementById('_slashMenu');
-    if(!this._el)return;
-    this._inp=document.createElement('input');
-    this._inp.type='text';this._inp.placeholder='Filter...';
-    this._inp.style.cssText='width:100%;padding:6px 10px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:14px;outline:none;box-sizing:border-box';
-    this._inp.oninput=()=>this.filter();
-    this._inp.onkeydown=e=>this._onKey(e);
-    const hdr=document.createElement('div');
-    hdr.style.cssText='padding:8px;border-bottom:1px solid var(--border)';
-    hdr.appendChild(this._inp);
-    this._list=document.createElement('div');
-    this._list.style.cssText='overflow-y:auto;max-height:340px';
-    this._el.appendChild(hdr);
-    this._el.appendChild(this._list);
-    document.addEventListener('mousedown',e=>{if(!this._el.contains(e.target))this.close();});
+// Slash menu — event delegation on list, single innerHTML set
+const SM={_o:false,_i:-1,_s:0,_q:'',_it:[],
+  init(){const e=document.getElementById('_slashMenu');if(!e)return;e.innerHTML='';
+    const inp=document.createElement('input');inp.type='text';inp.placeholder='Filter...';
+    inp.style.cssText='width:100%;padding:6px 10px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;color:var(--text-primary);font-size:14px;outline:none;box-sizing:border-box';
+    inp.oninput=()=>SM.flt();inp.onkeydown=ev=>SM._kd(ev);
+    const hdr=document.createElement('div');hdr.style.cssText='padding:8px;border-bottom:1px solid var(--border)';hdr.appendChild(inp);
+    const list=document.createElement('div');list.style.cssText='overflow-y:auto;max-height:340px';
+    // Event delegation: single click handler for all items
+    list.addEventListener('click',ev=>{const it=ev.target.closest('.slash-item');if(it){ev.preventDefault();SM.sel(it.dataset.sid);}});
+    e.appendChild(hdr);e.appendChild(list);
+    SM._e=e;SM._in=inp;SM._li=list;
+    document.addEventListener('mousedown',ev=>{if(!e.contains(ev.target))SM.close();});
   },
-
-  open(idx,el){
-    if(!this._el)this.init();
-    this._idx=idx;this._q='';this._sel=0;this._inp.value='';
-    this.filter();
-    const r=el.getBoundingClientRect();
-    this._el.style.display='block';
-    const mh=this._el.offsetHeight||400;
-    this._el.style.top=Math.max(0,(r.bottom+4+mh>window.innerHeight)?r.top-mh-4:r.bottom+4)+'px';
-    this._el.style.left=Math.min(r.left,window.innerWidth-330)+'px';
-    this._inp.focus();this._open=true;
-  },
-
-  close(){
-    this._el.style.display='none';this._open=false;
-    this._inp.value='';this._q='';
-  },
-
-  filter(){
-    const q=(this._inp.value||'').toLowerCase();this._q=q;
-    let html='';
-    for(const g of SLASH_GROUPS){
-      let items=g.items;
-      if(q)items=items.filter(c=>c.name.toLowerCase().includes(q)||c.id.includes(q));
-      if(!items.length)continue;
-      html+=`<div style="padding:6px 12px 4px;font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px">${g.name}</div>`;
-      items.forEach((c,i)=>{
-        const sel=(this._items.length===this._sel);
-        if(sel)this._selItem=c.id;
-        this._items.push(c);
-        html+=`<div class="slash-item${sel?' selected':''}" data-sid="${c.id}" style="display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:14px;color:var(--text-primary);cursor:pointer;transition:background .1s"
-                onmousedown="event.preventDefault()" onclick="SlashMenu.select('${c.id}')" onmouseenter="this.classList.add('selected')" onmouseleave="this.classList.remove('selected')">
+  open(i,el){if(!SM._e)SM.init();SM.close();SM._i=i;SM._s=0;SM._in.value='';SM.flt();
+    const r=el.getBoundingClientRect();SM._e.style.display='block';
+    SM._e.style.top=Math.max(4,(r.bottom+4>window.innerHeight-340)?r.top-344:r.bottom+4)+'px';
+    SM._e.style.left=Math.min(r.left,window.innerWidth-324)+'px';
+    setTimeout(()=>SM._in.focus(),10);SM._o=true;},
+  close(){if(SM._e)SM._e.style.display='none';SM._o=false;SM._in&&(SM._in.value='');},
+  flt(){if(!SM._li)return;SM._it=[];const q=(SM._in.value||'').toLowerCase();SM._q=q;let h='';
+    for(const g of CMDS){let items=g.items;if(q)items=items.filter(c=>c.name.toLowerCase().includes(q)||c.id.includes(q));if(!items.length)continue;
+      h+=`<div style="padding:6px 12px 4px;font-size:11px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px">${g.name}</div>`;
+      items.forEach(c=>{SM._it.push(c);
+        h+=`<div class="slash-item" data-sid="${c.id}" style="display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:14px;color:var(--text-primary);cursor:pointer">
           <span style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--bg-secondary);border-radius:4px;flex-shrink:0">${c.icon}</span>
-          <span style="flex:1;font-weight:500">${c.name}</span>
-        </div>`;
-      });
-    }
-    this._list.innerHTML=html;
-    if(this._items.length)this._selItem=this._items[0].id;
-  },
+          <span style="flex:1;font-weight:500">${c.name}</span></div>`;});}
+    SM._li.innerHTML=h;},
+  _kd(e){if(e.key==='ArrowDown'){e.preventDefault();SM._s=Math.min(SM._s+1,SM._it.length-1);SM._rs();}
+    else if(e.key==='ArrowUp'){e.preventDefault();SM._s=Math.max(SM._s-1,0);SM._rs();}
+    else if(e.key==='Enter'){e.preventDefault();const c=SM._it[SM._s];if(c)SM.sel(c.id);}
+    else if(e.key==='Escape'){e.preventDefault();SM.close();}},
+  _rs(){const its=SM._li.querySelectorAll('.slash-item');its.forEach((el,i)=>{el.classList.toggle('selected',i===SM._s);});},
+  sel(id){if(window.E)window.E.applySlash(id);SM.close();},
+  get isOpen(){return SM._o;}};
 
-  _onKey(e){
-    if(e.key==='ArrowDown'){e.preventDefault();this._sel=Math.min(this._sel+1,this._items.length-1);this._renderSel();}
-    else if(e.key==='ArrowUp'){e.preventDefault();this._sel=Math.max(this._sel-1,0);this._renderSel();}
-    else if(e.key==='Enter'){e.preventDefault();const c=this._items[this._sel];if(c)this.select(c.id);}
-    else if(e.key==='Escape'){e.preventDefault();this.close();}
-  },
+function renderBlock(b,idx){
+  if(b.type==='divider')return `<div class="block-wrapper"><hr class="block-divider"></div>`;
+  const ph=b.type==='heading_1'?'Heading 1':b.type==='heading_2'?'Heading 2':b.type==='heading_3'?'Heading 3':b.type==='heading_4'?'Heading 4':b.type==='bulleted_list'?'List':b.type==='numbered_list'?'List':b.type==='to_do'?'To-do':b.type==='toggle'?'Toggle list':b.type==='quote'?'Empty quote':b.type==='code'?'Type code...':b.type==='callout'?'Type something...':'Press \'/\' for commands...';
+  let inner='';
+  if(b.type==='to_do')inner=`<input type="checkbox" class="todo-checkbox" ${b.checked?'checked':''} onchange="E._doToggle('${b.id}',this.checked)"><div data-bid="${b.id}" contenteditable="true" data-placeholder="${ph}" spellcheck="false">${esc(b.content)}</div>`;
+  else if(b.type==='toggle')inner=`<button class="toggle-chevron ${b.expanded?'open':''}" onclick="E._doToggleExpand('${b.id}')">▶</button><div data-bid="${b.id}" contenteditable="true" data-placeholder="${ph}" spellcheck="false">${esc(b.content)}</div>`;
+  else if(b.type==='code')inner=`<div class="code-lang-label">${b.language||'Plain Text'}</div><pre><code data-bid="${b.id}" contenteditable="true" spellcheck="false">${esc(b.content)}</code></pre>`;
+  else if(b.type==='callout')inner=`<span class="callout-icon">${b.icon||'💡'}</span><div data-bid="${b.id}" contenteditable="true" data-placeholder="${ph}" spellcheck="false">${esc(b.content)}</div>`;
+  else inner=`<div data-bid="${b.id}" contenteditable="true" data-placeholder="${ph}" spellcheck="false">${esc(b.content)}</div>`;
+  const tag=b.type.startsWith('heading_')?'h'+b.type.slice(-1):b.type==='quote'?'blockquote':'div';
+  const cls=tag==='div'?`block-content ${b.type==='bulleted_list'?'block-bullet':b.type==='numbered_list'?'block-numbered':b.type==='to_do'?'block-todo':b.type==='toggle'?'block-toggle':b.type==='code'?'block-code':b.type==='callout'?'block-callout':''}`:`block-content block-${tag}`;
+  const style=b.type==='callout'?` style="background:${(b.style&&b.style.bgColor)||'var(--blue-bg)'}"`:'';
+  return `<div class="block-wrapper">
+    <div class="block-handle"><svg viewBox="0 0 16 16" width="14" height="14"><circle cx="4" cy="3" r="1.3"/><circle cx="11" cy="3" r="1.3"/><circle cx="4" cy="8" r="1.3"/><circle cx="11" cy="8" r="1.3"/><circle cx="4" cy="13" r="1.3"/><circle cx="11" cy="13" r="1.3"/></svg></div>
+    <div class="block-actions"><button class="block-add-btn" onclick="E.addAfter(${idx})">+</button></div>
+    <${tag}${style} class="${cls}">${inner}</${tag}>
+  </div>`;
+}
 
-  _renderSel(){
-    const items=this._list.querySelectorAll('.slash-item');
-    items.forEach((el,i)=>{el.classList.toggle('selected',i===this._sel);});
-  },
-
-  select(id){
-    const ed=document.querySelector('.page-editor-wrapper');
-    if(!ed?.__x)return;
-    ed.__x.$data.applySlash(id);
-    this.close();
-  },
-
-  get isOpen(){return this._open;},
-};
-
-// ── Cursor helpers ──
-function curPos(el){const s=window.getSelection();if(!s.rangeCount)return 0;const r=s.getRangeAt(0).cloneRange();r.selectNodeContents(el);r.setEnd(s.getRangeAt(0).endContainer,s.getRangeAt(0).endOffset);return r.toString().length;}
-function curEnd(el){const r=document.createRange();r.selectNodeContents(el);r.collapse(false);const s=window.getSelection();s.removeAllRanges();s.addRange(r);}
-function curStart(el){const r=document.createRange();r.selectNodeContents(el);r.collapse(true);const s=window.getSelection();s.removeAllRanges();s.addRange(r);}
-
-// ── Editor component ──
+window.E=null;
 function editor(pid,title,fmt,raw){
   const self={
-    pid,pageTitle:title,blocks:[],hoverBid:null,
-    dirty:false,saving:false,lastSaved:'',st:null,
-    imgInputs:{},
+    pid,pageTitle:title,blocks:[],dirty:false,saving:false,lastSaved:'',st:null,
     fmt:{open:false,top:0,left:0,idx:-1},
 
     init(){
@@ -227,94 +118,81 @@ function editor(pid,title,fmt,raw){
       if(fmt==='blocks'&&raw){try{this.blocks=JSON.parse(raw);this.blocks.forEach(b=>{if(!b.id)b.id=genId()});}catch(e){this.blocks=[];}}
       else if(raw&&raw.trim())this.blocks=this.md2b(raw);
       if(!this.blocks.length)this.blocks=[this.mkB('paragraph','')];
-
-      SlashMenu.init();
-
-      // Give Alpine time to render, then setup once
-      setTimeout(()=>{
-        const ct=document.getElementById('_blocksCt');
-        if(!ct)return;
-        // Fill content
-        for(const b of this.blocks){
-          const el=ct.querySelector(`[data-bid="${b.id}"]:not(button):not(input)`);
-          if(el&&b.type!=='divider')el.textContent=b.content||'';
-        }
-        // Focus first block
-        this.focusBlock();
-        // KEYDOWN (vanilla JS)
-        ct.addEventListener('keydown',e=>this.onKd(e,ct));
+      window.E=this;SM.init();this.render();
+      setTimeout(()=>{this.focusBlock();const ct=document.getElementById('_blocksCt');if(!ct)return;
+        ct.addEventListener('keydown',e=>this.onKd(e));
         ct.addEventListener('paste',e=>{e.preventDefault();document.execCommand('insertText',false,(e.clipboardData||window.clipboardData).getData('text/plain'));this.dirty=true;this.autoSave();});
-        // SortableJS
-        if(typeof Sortable!=='undefined')Sortable.create(ct,{draggable:'.block-wrapper',handle:'.block-handle',animation:150,ghostClass:'sortable-ghost',dragClass:'sortable-drag',onEnd:evt=>{if(evt.oldIndex===evt.newIndex)return;const[item]=this.blocks.splice(evt.oldIndex,1);this.blocks.splice(evt.newIndex,0,item);this.dirty=true;this.autoSave();}});
-      },400);
+        if(typeof Sortable!=='undefined')Sortable.create(ct,{draggable:'.block-wrapper',handle:'.block-handle',animation:150,ghostClass:'sortable-ghost',dragClass:'sortable-drag',onEnd:evt=>{if(evt.oldIndex===evt.newIndex)return;const[item]=this.blocks.splice(evt.oldIndex,1);this.blocks.splice(evt.newIndex,0,item);this.dirty=true;this.autoSave();this.render();}});
+      },100);
     },
 
     mkB(type,content,extras){const b={id:genId(),type,content:content||'',...(extras||{})};if(type==='toggle')b.expanded=true;if(type==='to_do')b.checked=false;return b;},
 
-    focusFirstBlock(){const b=this.blocks[0];if(b){const el=this.getEl(b.id);if(el){el.focus();curEnd(el);}}},
-    focusBlock(n){n=n||0;const b=this.blocks[0];if(!b)return;const el=this.getEl(b.id);if(el){el.focus();curEnd(el);}else if(n<10){setTimeout(()=>this.focusBlock(n+1),50);}},
-    onCtClick(e){
-      if(e.target===document.getElementById('_blocksCt')||e.target.classList.contains('blocks-empty')){
-        if(!this.blocks.length)this.addAt(0);
-        else{const b=this.blocks[this.blocks.length-1];const el=b&&this.getEl(b.id);if(el){el.focus();curEnd(el);}}
-      }
-    },
-    getEl(bid){const ct=document.getElementById('_blocksCt');return ct?ct.querySelector(`[data-bid="${bid}"]:not(button):not(input)`):null;},
+    getEl(bid){const ct=document.getElementById('_blocksCt');return ct?ct.querySelector(`[data-bid="${bid}"]`):null;},
     getIdx(bid){return this.blocks.findIndex(b=>b.id===bid);},
+    getActiveBlock(){const el=document.activeElement;if(!el||!el.hasAttribute('data-bid'))return null;return{el,bid:el.dataset.bid,idx:this.getIdx(el.dataset.bid)};},
+    focusBlock(){const b=this.blocks[0];if(!b)return;const el=this.getEl(b.id);if(el){el.focus();ce(el);}},
+    onCtClick(e){if(e.target===document.getElementById('_blocksCt')||e.target?.classList?.contains('blocks-empty')){if(!this.blocks.length)this.addAt(0);else{const b=this.blocks[this.blocks.length-1];const el=b&&this.getEl(b.id);if(el){el.focus();ce(el);}}}},
 
-    addAt(idx,type,content){const b=this.mkB(type||'paragraph',content||'');this.blocks.splice(idx,0,b);this.dirty=true;this.autoSave();requestAnimationFrame(()=>{const el=this.getEl(b.id);if(el&&type!=='divider'){el.focus();curEnd(el);}});return b;},
+    // Sync DOM→data, render, add listeners
+    sync(){const ct=document.getElementById('_blocksCt');if(!ct)return;for(const b of this.blocks){if(b.type==='divider')continue;const el=ct.querySelector(`[data-bid="${b.id}"]`);if(el)b.content=el.textContent||'';}},
+    render(){const ct=document.getElementById('_blocksCt');if(!ct)return;let html='';for(let i=0;i<this.blocks.length;i++)html+=renderBlock(this.blocks[i],i);ct.innerHTML=html;
+      ct.querySelectorAll('.block-wrapper').forEach(w=>{w.onmouseenter=()=>{w.querySelector('.block-handle')?.classList.add('visible');w.querySelector('.block-actions')?.classList.add('visible');};w.onmouseleave=()=>{w.querySelector('.block-handle')?.classList.remove('visible');w.querySelector('.block-actions')?.classList.remove('visible');};});
+      // Update empty class: browser may insert <br> in contentEditable — strip and apply class
+      ct.querySelectorAll('[data-placeholder]').forEach(el=>{el.innerHTML=el.innerHTML.replace(/<br[^>]*>/gi,'').trim()!==''?el.innerHTML:'';el.classList.toggle('empty',!el.textContent.trim());});
+    },
+
+    addAt(idx,type,content){this.sync();const b=this.mkB(type||'paragraph',content||'');this.blocks.splice(idx,0,b);this.dirty=true;this.autoSave();this.render();setTimeout(()=>{const el=this.getEl(b.id);if(el&&type!=='divider'){el.focus();content&&ce(el);}},60);return b;},
     addAfter(idx,type){return this.addAt(idx+1,type);},
 
-    removeBlock(idx){
-      if(this.blocks.length<=1){const b=this.blocks[0];b.type='paragraph';b.content='';const el=this.getEl(b.id);if(el)el.textContent='';this.dirty=true;this.autoSave();requestAnimationFrame(()=>{if(el)el.focus();});return;}
-      this.blocks.splice(idx,1);const fi=Math.max(0,idx-1);this.dirty=true;this.autoSave();
-      requestAnimationFrame(()=>{const el=this.getEl(this.blocks[fi]?.id);if(el){el.focus();curEnd(el);}});
-    },
+    removeBlock(idx){this.sync();if(this.blocks.length<=1){this.blocks[0]=this.mkB('paragraph','');}else{this.blocks.splice(idx,1);}const fi=Math.min(idx,this.blocks.length-1);this.render();this.dirty=true;this.autoSave();setTimeout(()=>{const el=this.getEl(this.blocks[fi]?.id);if(el){el.focus();ce(el);}},60);},
 
-    // ── THE KEY HANDLER ──
-    onKd(e,ct){
-      const el=document.activeElement;
-      if(!el||!el.hasAttribute('data-bid'))return;
-      const bid=el.dataset.bid,idx=this.getIdx(bid);
-      if(idx<0)return;
-      const block=this.blocks[idx];
+    // KEY HANDLER
+    onKd(e){
+      const ab=this.getActiveBlock();if(!ab)return;
+      const{el,bid,idx}=ab;const block=this.blocks[idx];if(!block)return;
 
-      // Slash menu open
-      if(SlashMenu.isOpen){
-        if(e.key==='Escape'){e.preventDefault();SlashMenu.close();return;}
-        if(e.key==='ArrowDown'||e.key==='ArrowUp'||e.key==='Enter'){e.preventDefault();SlashMenu._inp.dispatchEvent(new KeyboardEvent('keydown',{key:e.key,bubbles:true}));return;}
-        if(e.key==='Backspace'&&!SlashMenu._q&&(el.textContent||'').trim()==='/'){e.preventDefault();SlashMenu.close();return;}
+      if(SM.isOpen){
+        if(e.key==='Escape'){e.preventDefault();SM.close();return;}
+        if(e.key==='ArrowDown'||e.key==='ArrowUp'||e.key==='Enter'){e.preventDefault();SM._in.dispatchEvent(new KeyboardEvent('keydown',{key:e.key,bubbles:true}));return;}
+        if(e.key==='Backspace'&&!SM._q&&(el.textContent||'').trim()==='/'){e.preventDefault();SM.close();return;}
         return;
       }
 
-      // After content keys, check for slash
-      if(e.key.length===1||e.key==='Backspace'||e.key==='Delete'){
-        const b2=bid;setTimeout(()=>{const e2=this.getEl(b2);if(e2&&e2.textContent?.trim()==='/'&&!SlashMenu.isOpen)SlashMenu.open(this.getIdx(b2),e2);},15);
-      }
+      // Slash detection — use idx, not bid (bid can get stale after render)
+      if(e.key.length===1||e.key==='Backspace'||e.key==='Delete'){const i2=idx;setTimeout(()=>{const e2=this.getEl(this.blocks[i2]?.id);if(e2&&e2.textContent?.trim()==='/'&&!SM.isOpen)SM.open(i2,e2);},15);}
 
-      // ENTER
+      // ENTER: split block
+
+      // Markdown shortcuts on space — use idx
+      if(e.key===' '){const i2=idx;setTimeout(()=>this.checkMd(i2),15);}
+
+      // ENTER: split block
       if(e.key==='Enter'){
         if(e.shiftKey){this.dirty=true;this.autoSave();return;}
         e.preventDefault();
-        const text=el.textContent||'',pos=curPos(el),before=text.substring(0,pos),after=text.substring(pos);
-        if(!before.trim()&&!after.trim()){const nt=(block.type==='bulleted_list'||block.type==='numbered_list'||block.type==='to_do')?block.type:'paragraph';this.addAt(idx+1,nt);return;}
-        el.textContent=before;block.content=before;
+        const text=el.textContent||'',pos=cp(el),before=text.substring(0,pos),after=text.substring(pos);
+        if(!before.trim()&&!after.trim()){
+          const nt=(block.type==='bulleted_list'||block.type==='numbered_list'||block.type==='to_do')?block.type:'paragraph';
+          this.sync();this.blocks.splice(idx+1,0,this.mkB(nt,''));this.render();
+          setTimeout(()=>{const ne=this.getEl(this.blocks[idx+1]?.id);if(ne){ne.focus();ce(ne);}},60);
+          this.dirty=true;this.autoSave();return;
+        }
         const nt=(block.type==='bulleted_list'||block.type==='numbered_list'||block.type==='to_do')?block.type:'paragraph';
-        const nb=this.addAt(idx+1,nt,after);this.dirty=true;this.autoSave();
-        requestAnimationFrame(()=>{const nel=this.getEl(nb.id);if(nel){nel.textContent=after;nel.focus();curStart(nel);}});
-        return;
+        this.sync();block.content=before;this.blocks.splice(idx+1,0,this.mkB(nt,after));this.render();
+        setTimeout(()=>{const ne=this.getEl(this.blocks[idx+1]?.id);if(ne){ne.focus();cs(ne);}},60);
+        this.dirty=true;this.autoSave();return;
       }
 
-      // ARROW UP
-      if(e.key==='ArrowUp'){const pos=curPos(el);if(pos===0&&idx>0){e.preventDefault();const prev=this.getEl(this.blocks[idx-1]?.id);if(prev){prev.focus();curEnd(prev);}}return;}
-      // ARROW DOWN
-      if(e.key==='ArrowDown'){const pos=curPos(el),len=(el.textContent||'').length;if(pos>=len&&idx<this.blocks.length-1){e.preventDefault();const next=this.getEl(this.blocks[idx+1]?.id);if(next){next.focus();curStart(next);}}return;}
+      // ARROWS
+      if(e.key==='ArrowUp'){if(cp(el)===0&&idx>0){e.preventDefault();const prev=this.getEl(this.blocks[idx-1]?.id);if(prev){prev.focus();ce(prev);}}return;}
+      if(e.key==='ArrowDown'){if(cp(el)>=(el.textContent||'').length&&idx<this.blocks.length-1){e.preventDefault();const next=this.getEl(this.blocks[idx+1]?.id);if(next){next.focus();cs(next);}}return;}
 
       // BACKSPACE
-      if(e.key==='Backspace'){const text=el.textContent||'';if(!text.trim()){if(block.type!=='paragraph'){e.preventDefault();block.type='paragraph';block.content='';el.textContent='';this.dirty=true;this.autoSave();requestAnimationFrame(()=>el.focus());}else if(this.blocks.length>1){e.preventDefault();this.removeBlock(idx);}}return;}
+      if(e.key==='Backspace'){if(!(el.textContent||'').trim()){this.sync();if(block.type!=='paragraph'){e.preventDefault();block.type='paragraph';block.content='';this.render();setTimeout(()=>{const ne=this.getEl(block.id);if(ne)ne.focus();},60);}else if(this.blocks.length>1){e.preventDefault();this.removeBlock(idx);}}return;}
 
-      // SPACE: check markdown
-      if(e.key===' '){const b2=bid;setTimeout(()=>this.checkMd(b2),10);}
+      // Markdown shortcuts on space
+      if(e.key===' '){const b2=bid;setTimeout(()=>this.checkMd(b2),15);}
 
       // Ctrl shortcuts
       if((e.ctrlKey||e.metaKey)&&!e.altKey){const m={b:'bold',i:'italic',u:'underline'};if(m[e.key]){e.preventDefault();document.execCommand(m[e.key]);this.dirty=true;this.autoSave();}}
@@ -322,56 +200,48 @@ function editor(pid,title,fmt,raw){
       this.dirty=true;this.autoSave();
     },
 
-    checkMd(bid){
-      const idx=this.getIdx(bid);if(idx<0)return;
-      const block=this.blocks[idx],el=this.getEl(bid);if(!el)return;
-      const text=el.textContent||'';
-      const sc={'# ':'heading_1','## ':'heading_2','### ':'heading_3','- ':'bulleted_list','* ':'bulleted_list','+ ':'bulleted_list','1. ':'numbered_list','[] ':'to_do','[ ] ':'to_do','> ':'quote'};
-      for(const[pfx,type] of Object.entries(sc)){if(text===pfx||text.startsWith(pfx)){block.type=type;block.content='';if(type==='toggle')block.expanded=true;if(type==='to_do')block.checked=false;this.dirty=true;this.autoSave();requestAnimationFrame(()=>{const nel=this.getEl(bid);if(nel){nel.textContent='';if(type!=='divider')nel.focus();}});return;}}
-      if(text==='---'){block.type='divider';block.content='';this.addAfter(idx,'paragraph');this.dirty=true;this.autoSave();}
-      if(text==='```'){block.type='code';block.content='';block.language='Plain Text';this.dirty=true;this.autoSave();requestAnimationFrame(()=>{const nel=this.getEl(bid);if(nel){nel.textContent='';nel.focus();}});}
+    checkMd(idx){
+      if(idx<0||idx>=this.blocks.length)return;const block=this.blocks[idx];const el=this.getEl(block.id);if(!el)return;const text=el.textContent||'';
+      const sc={'# ':'heading_1','## ':'heading_2','### ':'heading_3','#### ':'heading_4','- ':'bulleted_list','* ':'bulleted_list','+ ':'bulleted_list','1. ':'numbered_list','[] ':'to_do','[ ] ':'to_do','> ':'quote'};
+      this.sync();
+      for(const[pfx,type] of Object.entries(sc)){if(text===pfx||text.startsWith(pfx)){block.type=type;block.content='';if(type==='toggle')block.expanded=true;if(type==='to_do')block.checked=false;this.render();setTimeout(()=>{const ne=this.getEl(block.id);if(ne&&type!=='divider')ne.focus();},60);return;}}
+      if(text==='---'){block.type='divider';block.content='';this.addAfter(idx,'paragraph');}
+      if(text==='```'){block.type='code';block.content='';block.language='Plain Text';this.render();setTimeout(()=>{const ne=this.getEl(block.id);if(ne)ne.focus();},60);}
     },
 
-    // ── Slash apply (called from SlashMenu.select) ──
     applySlash(id){
-      const idx=SlashMenu._idx;
-      if(idx<0||idx>=this.blocks.length)return;
-      const block=this.blocks[idx],el=this.getEl(block.id);
-      if(el)el.textContent='';block.content='';
-      if(id==='divider'){block.type='divider';block.content='';this.addAfter(idx,'paragraph');}
-      else{block.type=id;if(id==='toggle')block.expanded=true;if(id==='to_do')block.checked=false;if(id==='code')block.language='Plain Text';
-        requestAnimationFrame(()=>{const nel=this.getEl(block.id);if(nel){nel.textContent='';nel.focus();}});}
-      this.dirty=true;this.autoSave();
+      const idx=SM._i;if(idx<0||idx>=this.blocks.length)return;
+      const block=this.blocks[idx];this.sync();block.content='';
+      if(id==='divider'){block.type='divider';this.addAfter(idx,'paragraph');}
+      else{block.type=id;if(id==='toggle')block.expanded=true;if(id==='to_do')block.checked=false;if(id==='code')block.language='Plain Text';}
+      this.render();this.dirty=true;this.autoSave();
+      setTimeout(()=>{const ne=this.getEl(block.id);if(ne)ne.focus();},60);
     },
 
-    // ── Format toolbar ──
+    _doToggle(bid,v){const idx=this.getIdx(bid);if(idx>=0){this.blocks[idx].checked=v;this.dirty=true;this.autoSave();}},
+    _doToggleExpand(bid){const idx=this.getIdx(bid);if(idx>=0){this.blocks[idx].expanded=!this.blocks[idx].expanded;this.dirty=true;this.autoSave();}},
+
     showFmt(idx){const s=window.getSelection();if(!s.rangeCount||s.isCollapsed){this.fmt.open=false;return;}const r=s.getRangeAt(0).getBoundingClientRect();this.fmt.open=true;this.fmt.idx=idx;this.fmt.top=Math.max(r.top-44,0);this.fmt.left=Math.min(r.left+r.width/2-120,window.innerWidth-260);this._sel={range:s.getRangeAt(0).cloneRange(),idx};},
     fmtApply(f){this.fmt.open=false;if(!this._sel)return;const s=window.getSelection();s.removeAllRanges();s.addRange(this._sel.range);document.execCommand(f==='strikeThrough'?'strikeThrough':f);this._sel=null;this.dirty=true;this.autoSave();},
     fmtLink(){this.fmt.open=false;const u=prompt('URL:');if(u){document.execCommand('createLink',false,u);this.dirty=true;this.autoSave();}},
-
-    dropImg(e,idx){const f=e.dataTransfer.files[0];if(f?.type?.startsWith('image/'))this.upFile(idx,f);},
-    uploadImg(idx,e){if(e.target.files[0])this.upFile(idx,e.target.files[0]);},
-    upFile(idx,file){const b=this.blocks[idx];const r=new FileReader();r.onload=ev=>{b.src=ev.target.result;this.dirty=true;this.autoSave();};r.readAsDataURL(file);},
     pastePlain(e){e.preventDefault();document.execCommand('insertText',false,(e.clipboardData||window.clipboardData).getData('text/plain'));this.dirty=true;this.autoSave();},
 
     autoSave(){clearTimeout(this.st);this.st=setTimeout(()=>this.save(),1500);},
     save(){
       if(this.saving)return;
-      const ct=document.getElementById('_blocksCt');
-      for(const b of this.blocks){if(b.type==='divider')continue;const el=ct?ct.querySelector(`[data-bid="${b.id}"]:not(button):not(input)`):null;if(el)b.content=el.textContent||'';}
-      const t=document.getElementById('_titleEl');if(t)this.pageTitle=t.textContent?.trim()||'Untitled';
+      this.sync();
+      const t=document.getElementById('_titleEl');if(t)this.pageTitle=t.textContent?.trim()||'New page';
       this.saving=true;
       const csrf=document.cookie.match(/csrf_token=([^;]+)/);
       fetch(`/board/api/pages/${this.pid}/blocks`,{method:'POST',headers:{'Content-Type':'application/json','X-CSRF-Token':csrf?csrf[1]:''},body:JSON.stringify({title:this.pageTitle,blocks:this.blocks.map(b=>{const c={id:b.id,type:b.type,content:b.content};['checked','expanded','language','icon','src','alt','style'].forEach(k=>{if(b[k]!=null)c[k]=b[k];});return c;})})})
       .then(r=>r.json()).then(()=>{this.saving=false;this.dirty=false;this.lastSaved=new Date().toLocaleTimeString();}).catch(()=>{this.saving=false;});
     },
 
-    md2b(md){const bl=[];let cb=null;for(const line of md.split('\n')){if(cb){if(line.trim()==='```'){bl.push(cb);cb=null;}else cb.content+=(cb.content?'\n':'')+line;continue;}const t=line.trim();if(!t)continue;if(t.startsWith('```')){cb=this.mkB('code','',{language:t.substring(3).trim()||'Plain Text'});continue;}if(t.startsWith('# ')&&!t.startsWith('## '))bl.push(this.mkB('heading_1',t.substring(2)));else if(t.startsWith('## ')&&!t.startsWith('### '))bl.push(this.mkB('heading_2',t.substring(3)));else if(t.startsWith('### '))bl.push(this.mkB('heading_3',t.substring(4)));else if(t==='---'||t==='***')bl.push(this.mkB('divider',''));else if(/^[-*+] /.test(t))bl.push(this.mkB('bulleted_list',t.substring(2)));else if(/^\d+\. /.test(t))bl.push(this.mkB('numbered_list',t.replace(/^\d+\. /,'')));else if(t.startsWith('- [ ] ')||t.startsWith('* [ ] '))bl.push(this.mkB('to_do',t.substring(6)));else if(t.startsWith('- [x] ')||t.startsWith('* [x] '))bl.push(this.mkB('to_do',t.substring(6),{checked:true}));else if(t.startsWith('> '))bl.push(this.mkB('quote',t.substring(2)));else bl.push(this.mkB('paragraph',t));}if(cb)bl.push(cb);return bl;},
+    md2b(md){const bl=[];let cb=null;for(const line of md.split('\n')){if(cb){if(line.trim()==='```'){bl.push(cb);cb=null;}else cb.content+=(cb.content?'\n':'')+line;continue;}const t=line.trim();if(!t)continue;if(t.startsWith('```')){cb=this.mkB('code','',{language:t.substring(3).trim()||'Plain Text'});continue;}if(t.startsWith('# ')&&!t.startsWith('## '))bl.push(this.mkB('heading_1',t.substring(2)));else if(t.startsWith('## ')&&!t.startsWith('### '))bl.push(this.mkB('heading_2',t.substring(3)));else if(t.startsWith('### ')&&!t.startsWith('#### '))bl.push(this.mkB('heading_3',t.substring(4)));else if(t.startsWith('#### '))bl.push(this.mkB('heading_4',t.substring(5)));else if(t==='---'||t==='***')bl.push(this.mkB('divider',''));else if(/^[-*+] /.test(t))bl.push(this.mkB('bulleted_list',t.substring(2)));else if(/^\d+\. /.test(t))bl.push(this.mkB('numbered_list',t.replace(/^\d+\. /,'')));else if(t.startsWith('- [ ] ')||t.startsWith('* [ ] '))bl.push(this.mkB('to_do',t.substring(6)));else if(t.startsWith('- [x] ')||t.startsWith('* [x] '))bl.push(this.mkB('to_do',t.substring(6),{checked:true}));else if(t.startsWith('> '))bl.push(this.mkB('quote',t.substring(2)));else bl.push(this.mkB('paragraph',t));}if(cb)bl.push(cb);return bl;},
   };
   return self;
 }
 
-// ── Global: selection → toolbar ──
 document.addEventListener('mouseup',()=>{setTimeout(()=>{const s=window.getSelection();if(!s||s.isCollapsed)return;const ed=document.querySelector('.page-editor-wrapper');if(!ed?.__x)return;const d=ed.__x.$data;const ct=document.getElementById('_blocksCt');if(!ct?.contains(s.anchorNode))return;const bel=s.anchorNode.parentElement?.closest('[data-bid]');if(bel){const idx=d.getIdx(bel.dataset.bid);if(idx>=0)d.showFmt(idx);}},80);});
 </script>
 {% endblock %}
diff --git a/static/css/app.css b/static/css/app.css
index 1919329..8b8c96b 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -19,8 +19,10 @@
   --text-primary: #FFFFFF;
   --text-secondary: #A0A0A0;
   --text-dim: #6B6B6B;
+  --text-muted: #4A4A4A;
 
   --border: #333333;
+  --border-color: rgba(255,255,255,0.06);
   --border-light: #3a3a3a;
 
   /* ===== Couleurs d'accent Notion ===== */
@@ -70,7 +72,9 @@
   --text-primary: #1A1A1A;
   --text-secondary: #6B6B6B;
   --text-dim: #9B9B9B;
+  --text-muted: #B0B0B0;
   --border: #E0E0E0;
+  --border-color: rgba(0,0,0,0.06);
   --border-light: #EDEDEC;
   --blue-bg: #E8F0FE;
   --green-bg: #E6F4EA;
@@ -1511,8 +1515,6 @@ input, select, textarea { font-family: inherit; color: inherit; }
   overflow-y: auto;
   padding: 0;
   min-height: 0;
-  display: flex;
-  flex-direction: column;
 }
 
 /* Page title area */
@@ -1560,7 +1562,6 @@ input, select, textarea { font-family: inherit; color: inherit; }
   max-width: 900px;
   margin: 0 auto;
   min-height: 300px;
-  flex: 1;
 }
 
 .blocks-empty {
@@ -1674,10 +1675,11 @@ input, select, textarea { font-family: inherit; color: inherit; }
   min-height: 28px;
   word-break: break-word;
 }
-.block-content:empty::before {
+.block-content.empty::before {
   content: attr(data-placeholder);
   color: #9B9A97;
   pointer-events: none;
+  font-style: normal;
 }
 
 /* Headings */
@@ -1700,6 +1702,16 @@ input, select, textarea { font-family: inherit; color: inherit; }
   padding: 4px 2px 2px;
 }
 
+.block-h4 {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  padding: 4px 2px 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--text-dim);
+}
+
 /* Bulleted list */
 .block-bullet {
   padding-left: 18px;
@@ -1743,10 +1755,11 @@ input, select, textarea { font-family: inherit; color: inherit; }
   min-height: 26px;
   word-break: break-word;
 }
-.block-todo div:empty::before {
+.block-content.empty::before {
   content: attr(data-placeholder);
   color: #9B9A97;
   pointer-events: none;
+  font-style: normal;
 }
 
 /* Toggle */
@@ -1783,10 +1796,11 @@ input, select, textarea { font-family: inherit; color: inherit; }
   min-height: 26px;
   word-break: break-word;
 }
-.block-toggle div:empty::before {
+.block-content.empty::before {
   content: attr(data-placeholder);
   color: #9B9A97;
   pointer-events: none;
+  font-style: normal;
 }
 
 /* Quote */
@@ -1860,10 +1874,11 @@ input, select, textarea { font-family: inherit; color: inherit; }
   line-height: 1.6;
   min-height: 24px;
 }
-.block-callout div:empty::before {
+.block-content.empty::before {
   content: attr(data-placeholder);
   color: #9B9A97;
   pointer-events: none;
+  font-style: normal;
 }
 
 /* Image block */