davaux 0.8.0

package/src/dev/watch.ts

@@ -0,0 +1,3098 @@
+import { spawn } from 'node:child_process'
+import { createReadStream, existsSync, watch as fsWatch, readFileSync, statSync, writeFileSync } from 'node:fs'
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import { createRequire } from 'node:module'
+import { extname, join, relative } from 'node:path'
+import { context, type Plugin } from 'esbuild'
+import { cssCollectorPlugin, generateIslandsEntry, islandServerPlugin } from '../build/plugins.js'
+import {
+  collectEsbuildPlugins,
+  collectScannerSuffixes,
+  type DavauxPlugin,
+  pathsToAlias,
+} from '../config.js'
+import { formatBuildErrors } from '../errors.js'
+import type { OmlPropSchema } from '../oml/types.js'
+import { buildApp } from '../router/handler.js'
+import { scanIslands, scanRoutes } from '../router/scanner.js'
+import { startServer } from '../server/index.js'
+import type { IslandFile, ScanResult } from '../types.js'
+import { scanBlueprints } from './blueprints.js'
+import { saveBlueprint, scanComponents, updateBlueprint } from './components.js'
+import { insertAfterElement, insertJsx } from './insert.js'
+import { getComponentFragment, getElementFragment, moveNode, removeElement, removeJsx, replaceComponentFragment, replaceElementAttrs, replaceElementFragment, replaceJsx, replaceTextContent } from './remove.js'
+
+const MIME: Record<string, string> = {
+  '.js': 'application/javascript',
+  '.mjs': 'application/javascript',
+  '.css': 'text/css',
+  '.html': 'text/html',
+  '.json': 'application/json',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.gif': 'image/gif',
+  '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon',
+  '.woff': 'font/woff',
+  '.woff2': 'font/woff2',
+}
+
+let _partialUpdatesScript: string | null = null
+function getPartialUpdatesScript(): string {
+  if (_partialUpdatesScript !== null) return _partialUpdatesScript
+  try {
+    const r = createRequire(import.meta.url)
+    const templateForCjs = r.resolve('template-for-polyfill')
+    const templateForJs = readFileSync(
+      templateForCjs.replace(/template-for-polyfill\.cjs$/, 'template-for-polyfill.js'),
+      'utf-8',
+    )
+    const htmlSettersMain = r.resolve('html-setters-polyfill')
+    const htmlSettersJs = readFileSync(
+      htmlSettersMain.replace(/index\.js$/, 'index.min.js'),
+      'utf-8',
+    )
+    _partialUpdatesScript = `${templateForJs}\n${htmlSettersJs}`
+  } catch {
+    _partialUpdatesScript = '/* partial-updates polyfills unavailable */'
+  }
+  return _partialUpdatesScript
+}
+
+function serveStatic(
+  publicDir: string,
+): ((req: IncomingMessage, res: ServerResponse) => boolean) | null {
+  if (!existsSync(publicDir)) return null
+  return (req, res): boolean => {
+    const filePath = join(publicDir, new URL(req.url ?? '/', 'http://x').pathname)
+    if (!filePath.startsWith(`${publicDir}/`) && filePath !== publicDir) return false
+    if (!existsSync(filePath) || !statSync(filePath).isFile()) return false
+    const mime = MIME[extname(filePath)] ?? 'application/octet-stream'
+    res.writeHead(200, { 'Content-Type': mime })
+    createReadStream(filePath).pipe(res)
+    return true
+  }
+}
+
+// ─── Live reload (SSE) ────────────────────────────────────────────────────────
+
+const sseClients = new Set<ServerResponse>()
+let serverReady = false
+let reloadTimer: ReturnType<typeof setTimeout> | undefined
+
+function sendToClients(data: string): void {
+  for (const client of sseClients) {
+    try {
+      client.write(`data: ${data}\n\n`)
+    } catch {
+      sseClients.delete(client)
+    }
+  }
+}
+
+function scheduleReload(): void {
+  if (!serverReady) return
+  if (reloadTimer) clearTimeout(reloadTimer)
+  reloadTimer = setTimeout(() => {
+    reloadTimer = undefined
+    sendToClients('reload')
+  }, 50)
+}
+
+// SharedWorker script: one SSE connection per origin, fans messages to all tab ports.
+// Falls back to a per-tab EventSource when SharedWorker is unavailable.
+const SHARED_WORKER_SCRIPT = `var ports=[];var source=null;
+self.onconnect=function(ev){
+  var port=ev.ports[0];port.start();ports.push(port);
+  if(!source){
+    source=new EventSource('/_davaux/livereload');
+    source.onmessage=function(e){
+      ports=ports.filter(function(p){try{p.postMessage(e.data);return true}catch(_){return false}});
+    };
+  }
+};`
+
+const LIVERELOAD_SCRIPT = `;(function(){
+  var overlay=null
+  function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')}
+  function show(errors){
+    if(!overlay){
+      overlay=document.createElement('div')
+      overlay.style.cssText='position:fixed;inset:0;z-index:99999;overflow:auto;background:#0d0d0d;color:#e8e8e8;font:13px/1.6 monospace;padding:2rem;box-sizing:border-box'
+      document.body.appendChild(overlay)
+    }
+    overlay.innerHTML='<p style="color:#ff5555;font-size:1.1em;margin:0 0 1.5rem 0"><b>[davaux] Build Error</b></p>'+
+      errors.map(function(e){
+        var loc=e.file?(e.file+(e.line?':'+e.line+':'+e.column:'')):'unknown'
+        return '<div style="margin-bottom:1.25rem;border:1px solid #ff3333;border-radius:6px;padding:1rem">'+
+          '<div style="color:#888;font-size:0.9em;margin-bottom:0.4rem">'+esc(loc)+'</div>'+
+          '<div style="color:#ff6b6b">'+esc(e.text)+'</div>'+
+          (e.lineText?'<pre style="margin:0.75rem 0 0;padding:0.5rem;background:#1a1a1a;border-radius:4px;overflow:auto;color:#aaa">'+esc(e.lineText)+'</pre>':'')+
+          '</div>'
+      }).join('')
+  }
+  function handle(data){
+    if(data==='reload'){location.reload()}
+    else if(data.slice(0,6)==='error:'){show(JSON.parse(data.slice(6)))}
+  }
+  if(typeof SharedWorker!=='undefined'){
+    var w=new SharedWorker('/_davaux/livereload-worker.js')
+    w.port.onmessage=function(ev){handle(ev.data)}
+    w.port.start()
+  } else {
+    new EventSource('/_davaux/livereload').onmessage=function(ev){handle(ev.data)}
+  }
+})()`
+
+const INSPECTOR_SCRIPT = `;(function(){
+if(window!==window.top)return
+var KEY='_dv_ins'
+var isOpen=sessionStorage.getItem(KEY)==='1'
+var host=document.createElement('div')
+var shadow=host.attachShadow({mode:'open'})
+document.body.appendChild(host)
+var st=document.createElement('style')
+st.textContent=':host{all:initial;display:block;position:fixed;bottom:12px;right:12px;z-index:2147483647;font:13px/1.5 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}:host(.open){inset:0}*{box-sizing:border-box}.badge{display:block;padding:4px 10px;background:#0f0f1a;color:#7cc5f0;border:1px solid #2a2a4a;border-radius:20px;cursor:pointer;font:700 11px/1 inherit;letter-spacing:.05em;box-shadow:0 2px 8px rgba(0,0,0,.4);white-space:nowrap}.badge:hover{background:#1a1a2e}.edbtn{display:block;margin-top:6px;padding:4px 10px;background:#1a2a1a;color:#7eca9c;border:1px solid #2a4a2a;border-radius:20px;font:700 11px/1 inherit;letter-spacing:.05em;text-decoration:none;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.4);white-space:nowrap}.edbtn:hover{background:#243a24}:host(.open) .badge,:host(.open) .edbtn{display:none}.panel{display:none;position:absolute;inset:0;background:#0f0f1a;flex-direction:column;overflow:hidden}:host(.open) .panel{display:flex}.hd{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#080816;border-bottom:1px solid #2a2a4a;flex-shrink:0}.title{color:#7cc5f0;font-weight:700;font-size:11px;letter-spacing:.1em;flex:1}.chip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;letter-spacing:.05em;display:none}.chip.oml{display:inline;background:#1a2a1a;color:#7eca9c;border:1px solid #2a4a2a}.chip.dom{display:inline;background:#0f0f1a;color:#aaa;border:1px solid #333}.xb{background:none;border:none;color:#555;cursor:pointer;font:inherit;padding:0;line-height:1}.xb:hover{color:#e8e8e8}.bd{overflow:auto;flex:1;padding:6px 0}.row{display:flex;align-items:baseline;padding:1px 8px;white-space:nowrap;border-radius:3px;color:#e8e8e8;cursor:default;-webkit-user-select:none;user-select:none}.row.c:hover{background:#1a1a2e;cursor:pointer}.tog{width:14px;font-size:9px;color:#666;flex-shrink:0;text-align:center}.el{color:#7cc5f0}.co{color:#7eca9c}.fr{color:#666}.tx{color:#888;font-style:italic}.pk{color:#b89eff}.pv{color:#f1c27d}.empty{padding:12px;color:#555;font-style:italic;text-align:center}'
+shadow.appendChild(st)
+;(function(){var p=(window.__DVX__&&window.__DVX__.pos)||'bottom-right';if(p!=='bottom-right'){var ps=document.createElement('style');var css=':host:not(.open){';css+=p.indexOf('top')>-1?'top:12px;bottom:auto;':'bottom:12px;top:auto;';css+=p.indexOf('left')>-1?'left:12px;right:auto;':'right:12px;left:auto;';css+='}';ps.textContent=css;shadow.appendChild(ps)}})()
+var badge=document.createElement('button')
+badge.className='badge'
+badge.textContent=(window.__DVX__&&window.__DVX__.label)||'Inspector'
+badge.title=((window.__DVX__&&window.__DVX__.label)||'Inspector')+' (Ctrl+Shift+O)'
+shadow.appendChild(badge)
+var edbtn=document.createElement('a')
+edbtn.className='edbtn'
+edbtn.textContent='Edit'
+edbtn.title='Visual Editor (Ctrl+Shift+E)'
+edbtn.href='/_davaux/editor?page='+encodeURIComponent(location.pathname+location.search)
+shadow.appendChild(edbtn)
+var panel=document.createElement('div')
+panel.className='panel'
+var hd=document.createElement('div')
+hd.className='hd'
+var ttl=document.createElement('span')
+ttl.className='title'
+ttl.textContent='INSPECTOR'
+var chip=document.createElement('span')
+chip.className='chip'
+var xb=document.createElement('button')
+xb.className='xb'
+xb.textContent='✕'
+xb.title='Close'
+hd.appendChild(ttl)
+hd.appendChild(chip)
+hd.appendChild(xb)
+var bd=document.createElement('div')
+bd.className='bd'
+panel.appendChild(hd)
+panel.appendChild(bd)
+shadow.appendChild(panel)
+function setOpen(v){
+  isOpen=!!v
+  sessionStorage.setItem(KEY,v?'1':'0')
+  host.classList.toggle('open',!!v)
+  if(v)load()
+}
+badge.onclick=function(){setOpen(!isOpen)}
+xb.onclick=function(){setOpen(false)}
+document.addEventListener('keydown',function(e){
+  if(e.ctrlKey&&e.shiftKey&&(e.key==='O'||e.key==='o')){e.preventDefault();setOpen(!isOpen)}
+  if(e.ctrlKey&&e.shiftKey&&(e.key==='E'||e.key==='e')){e.preventDefault();window.location.href='/_davaux/editor?page='+encodeURIComponent(location.pathname+location.search)}
+})
+if(isOpen)setOpen(true)
+function setMode(mode){
+  badge.textContent=mode
+  chip.textContent=mode
+  chip.className='chip '+mode.toLowerCase()
+}
+function load(){
+  bd.innerHTML='<div class="empty">Loading…</div>'
+  fetch('/_davaux/inspector?url='+encodeURIComponent(location.pathname+location.search))
+    .then(function(r){return r.json()})
+    .then(function(d){
+      bd.innerHTML=''
+      if(d.error){
+        setMode('DOM')
+        var bodySnap=domSnap(document.body)
+        if(bodySnap)bd.appendChild(tree(bodySnap,0))
+        return
+      }
+      setMode('OML')
+      bd.appendChild(tree(d.node,0))
+    })
+    .catch(function(){bd.innerHTML='<div class="empty">No tree available</div>'})
+}
+function domSnap(el){
+  if(el===host)return null
+  if(el.nodeType===3){var v=(el.textContent||'').trim();return v?{type:'#text',value:v}:null}
+  if(el.nodeType!==1)return null
+  var tag=el.tagName.toLowerCase()
+  var p={};for(var i=0;i<el.attributes.length;i++){var a=el.attributes[i];p[a.name]=a.value}
+  var cs=[];for(var j=0;j<el.childNodes.length;j++){var c=domSnap(el.childNodes[j]);if(c!==null)cs.push(c)}
+  return{type:'element',tag:tag,id:undefined,props:p,children:cs}
+}
+function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')}
+function propHtml(p){
+  if(!p)return''
+  var ks=Object.keys(p).filter(function(k){return!/^on[A-Z]/.test(k)&&k!=='children'&&k!=='dangerouslySetInnerHTML'})
+  var out=ks.slice(0,3).map(function(k){
+    var v=p[k],s=typeof v==='string'?'"'+(v.length>18?v.slice(0,18)+'…':esc(v))+'"':esc(String(v))
+    return' <span class="pk">'+esc(k)+'</span>=<span class="pv">'+s+'</span>'
+  }).join('')
+  if(ks.length>3)out+=' <span style="color:#555">+'+(ks.length-3)+'</span>'
+  return out
+}
+function tree(node,depth){
+  var w=document.createElement('div')
+  var pad=(depth*14+8)+'px'
+  if(node===null){
+    var r=document.createElement('div')
+    r.className='row'
+    r.style.paddingLeft=pad
+    r.innerHTML='<span class="tog"> </span><span class="fr">null</span>'
+    w.appendChild(r)
+    return w
+  }
+  if(node.type==='#text'){
+    var v=String(node.value||'')
+    var r=document.createElement('div')
+    r.className='row'
+    r.style.paddingLeft=pad
+    r.innerHTML='<span class="tog"> </span><span class="tx">"'+(v.length>60?esc(v.slice(0,60))+'…':esc(v))+'"</span>'
+    w.appendChild(r)
+    return w
+  }
+  if(node.type==='#raw'){
+    var v=String(node.value||'')
+    var r=document.createElement('div')
+    r.className='row'
+    r.style.paddingLeft=pad
+    r.innerHTML='<span class="tog"> </span><span class="fr">[raw html] </span><span class="tx">'+(v.length>60?esc(v.slice(0,60))+'…':esc(v))+'</span>'
+    w.appendChild(r)
+    return w
+  }
+  var cs=node.type==='#component'
+    ?(node.output&&node.output.type!=='#raw'?[node.output]:(node.children||[]).filter(function(c){return c!==null}))
+    :(node.children||[]).filter(function(c){return c!==null})
+  var hk=cs.length>0
+  var closed=false
+  var row=document.createElement('div')
+  row.className='row'+(hk?' c':'')
+  row.style.paddingLeft=pad
+  var tog=document.createElement('span')
+  tog.className='tog'
+  tog.textContent=hk?'▼':' '
+  var lbl=document.createElement('span')
+  if(node.type==='element'){
+    lbl.innerHTML='<span class="el">&lt;'+esc(node.tag)+'</span>'+propHtml(node.props)+'<span class="el">&gt;</span>'
+  }else if(node.type==='#component'){
+    lbl.innerHTML='<span class="co">◈ '+esc(node.name)+'</span>'+propHtml(node.props)
+  }else{
+    lbl.innerHTML='<span class="fr">&lt;&gt;</span>'
+  }
+  row.appendChild(tog)
+  row.appendChild(lbl)
+  w.appendChild(row)
+  if(hk){
+    var kc=document.createElement('div')
+    cs.forEach(function(c){kc.appendChild(tree(c,depth+1))})
+    w.appendChild(kc)
+    row.onclick=function(){
+      closed=!closed
+      kc.style.display=closed?'none':''
+      tog.textContent=closed?'▶':'▼'
+    }
+  }
+  return w
+}
+})()`
+
+const EDITOR_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Davaux Visual Editor</title>
+<script type="importmap">
+{
+  "imports": {
+    "https://esm.sh/@codemirror/state@^6.6.0?target=es2022": "https://esm.sh/@codemirror/state@6.6.0/es2022/state.mjs",
+    "https://esm.sh/@codemirror/state@^6.0.0?target=es2022": "https://esm.sh/@codemirror/state@6.6.0/es2022/state.mjs",
+    "https://esm.sh/@codemirror/view@^6.27.0?target=es2022": "https://esm.sh/@codemirror/view@6.43.0/es2022/view.mjs",
+    "https://esm.sh/@codemirror/view@^6.23.0?target=es2022": "https://esm.sh/@codemirror/view@6.43.0/es2022/view.mjs",
+    "https://esm.sh/@codemirror/language@^6.0.0?target=es2022": "https://esm.sh/@codemirror/language@6.12.3/es2022/language.mjs",
+    "https://esm.sh/@codemirror/language@^6.3.0?target=es2022": "https://esm.sh/@codemirror/language@6.12.3/es2022/language.mjs",
+    "https://esm.sh/@codemirror/autocomplete@^6.7.1?target=es2022": "https://esm.sh/@codemirror/autocomplete@6.20.2/es2022/autocomplete.mjs",
+    "https://esm.sh/@codemirror/lang-html@^6.0.0?target=es2022": "https://esm.sh/@codemirror/lang-html@6.4.11/es2022/lang-html.mjs",
+    "https://esm.sh/@lezer/common@^1.1.0?target=es2022": "https://esm.sh/@lezer/common@1.5.2/es2022/common.mjs",
+    "https://esm.sh/@lezer/common@^1.5.0?target=es2022": "https://esm.sh/@lezer/common@1.5.2/es2022/common.mjs",
+    "https://esm.sh/@lezer/highlight@^1.0.0?target=es2022": "https://esm.sh/@lezer/highlight@1.2.3/es2022/highlight.mjs",
+    "https://esm.sh/crelt@^1.0.6?target=es2022": "https://esm.sh/crelt@1.0.6/es2022/crelt.mjs"
+  }
+}
+</script>
+<style>
+:root{
+  --dvx-bg:#0d0d1a;--dvx-surf:#0f0f1a;--dvx-hd:#080816;--dvx-inp:#1a1a2e;
+  --dvx-bdr:#2a2a4a;--dvx-bdr-hi:#4a4a8a;
+  --dvx-txt:#e8e8e8;--dvx-txt-dim:#aaa;--dvx-txt-faint:#666;--dvx-txt-ghost:#555;
+  --dvx-row-hover:#1a1a2e;--dvx-row-sel:#1a2a3a;
+}
+[data-dvx-theme="light"]{
+  --dvx-bg:#f8f9fa;--dvx-surf:#ffffff;--dvx-hd:#e9ecef;--dvx-inp:#f1f3f5;
+  --dvx-bdr:#ced4da;--dvx-bdr-hi:#4c6ef5;
+  --dvx-txt:#212529;--dvx-txt-dim:#343a40;--dvx-txt-faint:#495057;--dvx-txt-ghost:#6c757d;
+  --dvx-row-hover:#f1f3f5;--dvx-row-sel:#dbe4ff;
+}
+*{box-sizing:border-box;margin:0;padding:0}
+body{display:flex;flex-direction:column;height:100vh;background:var(--dvx-bg);color:var(--dvx-txt);font:13px/1.5 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
+header{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--dvx-hd);border-bottom:1px solid var(--dvx-bdr);flex-shrink:0}
+.logo{color:#7cc5f0;font-weight:700;font-size:11px;letter-spacing:.1em}
+.page-bar{display:flex;align-items:center;gap:8px;flex:1}
+.page-bar span{color:var(--dvx-txt-faint);font-size:11px}
+.pg-wrap{position:relative;display:inline-flex;align-items:center}
+.page-input{background:var(--dvx-inp);border:1px solid var(--dvx-bdr);color:var(--dvx-txt);padding:3px 22px 3px 8px;border-radius:4px;font:inherit;width:240px}
+.page-input:focus{outline:none;border-color:var(--dvx-bdr-hi)}
+.pg-clear{position:absolute;right:6px;background:none;border:none;color:var(--dvx-txt-ghost);cursor:pointer;font:inherit;font-size:13px;line-height:1;padding:0;display:none}
+.pg-clear:hover{color:var(--dvx-txt-dim)}
+.hbtn{background:#1a2a3a;border:1px solid #2a4a6a;color:#7cc5f0;padding:3px 10px;border-radius:4px;cursor:pointer;font:inherit;text-decoration:none;display:inline-block}
+.hbtn:hover{background:#243a4a}
+.main{display:flex;flex:1;overflow:hidden}
+.palette{width:260px;flex-shrink:0;background:var(--dvx-surf);border-right:1px solid var(--dvx-bdr);display:flex;flex-direction:column;overflow:hidden}
+.section-hd{color:var(--dvx-txt-faint);font-size:10px;font-weight:700;letter-spacing:.1em;padding:4px 4px 8px;flex-shrink:0}
+.bp-card{background:var(--dvx-inp);border:1px solid var(--dvx-bdr);border-radius:6px;margin-bottom:6px;cursor:pointer;overflow:hidden;flex-shrink:0}
+.bp-card:hover{border-color:var(--dvx-bdr-hi)}
+.bp-card.sel{border-color:#7cc5f0}
+.bp-prev{padding:8px;min-height:36px;background:var(--dvx-surf);overflow:hidden;max-height:72px;font-size:12px}
+.bp-lbl{padding:5px 8px;font-size:11px;font-weight:700;color:#7eca9c;border-top:1px solid var(--dvx-bdr)}
+.empty{color:var(--dvx-txt-ghost);font-style:italic;padding:8px 4px;font-size:11px}
+.center{flex:1;background:var(--dvx-bg);display:flex;flex-direction:column;overflow:hidden}
+.ctoolbar{display:flex;align-items:center;gap:4px;padding:4px 8px;background:var(--dvx-hd);border-bottom:1px solid var(--dvx-bdr);flex-shrink:0}
+.tool-btn{background:none;border:1px solid transparent;color:var(--dvx-txt-ghost);cursor:pointer;font:700 10px/1 inherit;letter-spacing:.05em;padding:4px 10px;border-radius:4px}
+.tool-btn:hover{color:var(--dvx-txt-dim);border-color:var(--dvx-bdr)}
+.tool-btn.active{background:var(--dvx-inp);color:#7cc5f0;border-color:var(--dvx-bdr-hi)}
+.center iframe{flex:1;width:100%;border:none;background:#fff}
+.details{width:260px;flex-shrink:0;background:var(--dvx-surf);border-left:1px solid var(--dvx-bdr);overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:0}
+.d-title{color:#7cc5f0;font-weight:700;font-size:13px;margin-bottom:12px}
+.d-lbl{color:var(--dvx-txt-faint);font-size:10px;font-weight:700;letter-spacing:.1em;margin:12px 0 6px}
+.prop-row{margin-bottom:4px;font-size:12px}
+.pn{color:#b89eff}
+.pt{color:#888}
+.pr{color:#ff6b6b;font-size:10px}
+.jsx-block{background:var(--dvx-inp);border:1px solid var(--dvx-bdr);border-radius:4px;padding:8px;white-space:pre;overflow-x:auto;font-size:11px;color:var(--dvx-txt);margin-bottom:8px}
+.cbtn{background:#1a3a1a;border:1px solid #2a6a2a;color:#7eca9c;padding:4px 12px;border-radius:4px;cursor:pointer;font:inherit;width:100%}
+.cbtn:hover{background:#243a24}
+.cbtn.ok{background:#1a4a1a;color:#5ef05e}
+.ibtn{background:#1a2a3a;border-color:#2a4a6a;color:#7cc5f0;margin-top:4px}
+.ibtn:hover{background:#243a4a}
+.ins-st{font-size:10px;margin-top:5px;min-height:14px;color:#888;word-break:break-all}
+.ins-st.ok{color:#7eca9c}
+.ins-st.warn{color:#f5a623}
+.ins-st.err{color:#ff8888}
+.no-sel{color:var(--dvx-txt-ghost);font-style:italic;padding:8px 0;font-size:12px}
+.src-ed{width:100%;font:12px/1.6 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;background:var(--dvx-hd);border:1px solid var(--dvx-bdr);color:var(--dvx-txt);padding:12px;tab-size:2;white-space:pre;resize:none}
+.src-ed:focus{outline:none;border-color:var(--dvx-bdr-hi)}
+.src-file-lbl{font-size:10px;color:var(--dvx-txt-ghost);word-break:break-all;padding:0 2px}
+.src-modal{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center}
+.src-modal-box{display:flex;flex-direction:column;width:80vw;height:82vh;background:var(--dvx-surf);border:1px solid var(--dvx-bdr);border-radius:8px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,.4)}
+.src-modal-hd{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--dvx-hd);border-bottom:1px solid var(--dvx-bdr);flex-shrink:0}
+.src-modal-hd .cbtn{width:auto;flex-shrink:0}
+.src-modal-hd #src-modal-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:normal}
+.src-editor-area{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
+.src-modal-ta{flex:1;border-radius:0;border:none;border-top:1px solid var(--dvx-bdr);padding:12px 16px;min-height:0;background:var(--dvx-surf);color:var(--dvx-txt)}
+#src-cm-host{flex:1;min-height:0;overflow:hidden;display:none;border-top:1px solid var(--dvx-bdr)}
+#src-cm-host .cm-editor{height:100%!important;background:var(--dvx-bg)}
+#src-cm-host .cm-scroller{overflow:auto!important}
+.src-modal-ft{display:flex;align-items:center;gap:8px;padding:4px 8px;background:var(--dvx-hd);border-top:1px solid var(--dvx-bdr);flex-shrink:0}
+.src-modal-ft .ins-st{flex:1;margin:0}
+.xbtn{background:none;border:none;color:var(--dvx-txt-ghost);cursor:pointer;font:inherit;font-size:14px;line-height:1;padding:0 2px}.xbtn:hover{color:var(--dvx-txt)}
+.pi-row{margin-bottom:6px;display:flex;flex-direction:column;gap:2px}
+.pi-lbl{font-size:11px}.pi-lbl .pn{color:#b89eff}.pi-lbl .pt{color:var(--dvx-txt-faint)}.pi-lbl .pr{color:#ff6b6b}
+.pi{background:var(--dvx-inp);border:1px solid var(--dvx-bdr);color:var(--dvx-txt);padding:3px 6px;border-radius:3px;font:inherit;font-size:11px;width:100%}
+.pi:focus{outline:none;border-color:var(--dvx-bdr-hi)}
+.pi-cb{accent-color:#7cc5f0;width:14px;height:14px;cursor:pointer}
+.el-chip{display:inline-block;background:#1a2a3a;border:1px solid #2a4a6a;border-radius:4px;padding:2px 7px;font-size:11px;color:#7cc5f0;margin-bottom:8px}
+.comp-chip{display:inline-block;background:#1a2a1a;border:1px solid #2a4a2a;border-radius:4px;padding:2px 7px;font-size:11px;color:#7eca9c;margin-bottom:4px}
+.det-tabs{display:flex;border-bottom:1px solid var(--dvx-bdr);flex-shrink:0;margin-bottom:4px}
+.dtab{background:none;border:none;border-bottom:2px solid transparent;color:var(--dvx-txt-faint);cursor:pointer;font:700 10px/1 inherit;letter-spacing:.1em;padding:7px 12px;flex:1}
+.dtab.active{color:#7cc5f0;border-bottom-color:#7cc5f0}
+.dtab:hover:not(.active){color:var(--dvx-txt-dim)}
+.cv-row{margin-bottom:10px}
+.cv-name{color:#b89eff;font-size:10px;margin-bottom:3px;word-break:break-all}
+.cv-color-row{display:flex;gap:4px;align-items:center}
+.cv-color{width:32px;height:24px;padding:1px 2px;border:1px solid var(--dvx-bdr);border-radius:3px;background:var(--dvx-inp);cursor:pointer;flex-shrink:0}
+.cv-text{background:var(--dvx-inp);border:1px solid var(--dvx-bdr);color:var(--dvx-txt);padding:3px 6px;border-radius:3px;font:inherit;font-size:11px;width:100%;min-width:0}
+.cv-text:focus{outline:none;border-color:var(--dvx-bdr-hi)}
+.cv-color-row .cv-text{flex:1;width:auto}
+.pal-tabs{display:flex;border-bottom:1px solid var(--dvx-bdr);flex-shrink:0}
+.ptab{background:none;border:none;border-bottom:2px solid transparent;color:var(--dvx-txt-faint);cursor:pointer;font:700 10px/1 inherit;letter-spacing:.1em;padding:7px 8px;flex:1}
+.ptab.active{color:#7cc5f0;border-bottom-color:#7cc5f0}
+.ptab:hover:not(.active){color:var(--dvx-txt-dim)}
+.pal-panel{display:none;flex:1;overflow-y:auto;padding:8px;flex-direction:column}
+.pal-panel.active{display:flex}
+.conv-hd{display:flex;gap:4px;margin-bottom:8px;align-items:center;flex-shrink:0}
+.conv-dir{background:var(--dvx-inp);border:1px solid var(--dvx-bdr);color:var(--dvx-txt);padding:3px 6px;border-radius:3px;font:inherit;font-size:11px;flex:1;min-width:0}
+.conv-dir:focus{outline:none;border-color:var(--dvx-bdr-hi)}
+.conv-go{background:#1a2a3a;border:1px solid #2a4a6a;color:#7cc5f0;padding:3px 8px;border-radius:3px;cursor:pointer;font:inherit;font-size:11px;flex-shrink:0}
+.conv-go:hover{background:#243a4a}
+.conv-item{background:var(--dvx-inp);border:1px solid var(--dvx-bdr);border-radius:4px;padding:6px 8px;margin-bottom:4px;flex-shrink:0}
+.conv-name{color:#7eca9c;font-weight:700;font-size:11px;margin-bottom:2px}
+.conv-meta{color:var(--dvx-txt-ghost);font-size:10px;margin-bottom:4px;word-break:break-all}
+.conv-btn{background:#1a3a1a;border:1px solid #2a5a2a;color:#7eca9c;padding:2px 8px;border-radius:3px;cursor:pointer;font:inherit;font-size:10px;letter-spacing:.05em}
+.conv-btn:hover:not([disabled]){background:#243a24}
+.conv-btn.done{background:#1a4a1a;color:#5ef05e;border-color:#2a6a2a;cursor:default}
+.conv-btn.err{background:#3a1a1a;color:#ff8888;border-color:#5a2a2a}
+.conv-acts{display:flex;gap:4px;align-items:center}
+.conv-exists{font-size:10px;color:#5ef05e;flex:1}
+.conv-upd{background:#1a2a3a;border:1px solid #2a4a6a;color:#7cc5f0}
+.conv-upd:hover:not([disabled]){background:#243a4a}
+.ebtn{background:#1a2a3a;border:1px solid #2a4a6a;color:#7cc5f0}
+.ebtn:hover{background:#243a4a}
+.ep-row{display:flex;gap:3px;align-items:center;margin-bottom:3px}
+.ep-name{width:68px;flex-shrink:0}
+.ep-type{width:64px;flex-shrink:0;background:var(--dvx-inp);border:1px solid var(--dvx-bdr);color:var(--dvx-txt);padding:3px 4px;border-radius:3px;font:inherit;font-size:11px}
+.ep-def{flex:1;min-width:0}
+.ep-req-lbl{display:flex;align-items:center;gap:2px;font-size:10px;color:var(--dvx-txt-faint);flex-shrink:0;cursor:pointer}
+.ep-rm{background:none;border:none;color:var(--dvx-txt-ghost);cursor:pointer;font:inherit;font-size:11px;padding:0 2px;flex-shrink:0;line-height:1}
+.ep-rm:hover{color:#ff8888}
+.tr-row{display:flex;align-items:center;gap:3px;padding:2px 4px;border-radius:3px;cursor:pointer;user-select:none;min-width:0}
+.tr-row:hover{background:var(--dvx-row-hover)}
+.tr-row.tr-sel{background:var(--dvx-row-sel)}
+.tr-tog{width:12px;flex-shrink:0;text-align:center;font-size:9px;color:var(--dvx-txt-ghost);cursor:pointer;padding-top:1px}
+.tr-tog:hover{color:var(--dvx-txt-dim)}
+.tr-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:11px}
+.tr-tag{color:#7cc5f0}
+.tr-comp{color:#7eca9c}
+.tr-frag{color:var(--dvx-txt-ghost)}
+.tr-txt{color:var(--dvx-txt-ghost);font-style:italic;font-size:10px}
+</style>
+</head>
+<body>
+<header>
+  <div class="logo">&#9826; DAVAUX EDITOR</div>
+  <div class="page-bar">
+    <span>Page:</span>
+    <div class="pg-wrap">
+      <input id="pg" class="page-input" value="/" list="route-list" autocomplete="off" />
+      <button id="pg-clear" class="pg-clear" type="button">&#x2715;</button>
+    </div>
+    <datalist id="route-list"></datalist>
+    <button class="hbtn" onclick="goPage()">Go</button>
+  </div>
+  <a id="back" href="/" class="hbtn">&#8592; Back to page</a>
+</header>
+<div class="main">
+  <div class="palette">
+    <div class="pal-tabs">
+      <button class="ptab active" data-pal="bps" onclick="switchPal('bps')">BLUEPRINTS</button>
+      <button class="ptab" data-pal="conv" onclick="switchPal('conv')">CONVERT</button>
+      <button class="ptab" data-pal="tree" onclick="switchPal('tree')">TREE</button>
+    </div>
+    <div id="pal-bps" class="pal-panel active">
+      <div id="bplist"><div class="empty">Loading&#8230;</div></div>
+    </div>
+    <div id="pal-tree" class="pal-panel">
+      <div id="tree-root"><div class="empty">Load a page to see the tree.</div></div>
+    </div>
+    <div id="pal-conv" class="pal-panel">
+      <div class="conv-hd">
+        <input id="conv-dir" class="conv-dir" value="src/components" title="Component folder (relative to project root)" />
+        <button class="conv-go" onclick="loadComponents()">Scan</button>
+      </div>
+      <div id="conv-list"><div class="empty">Click Scan to load components.</div></div>
+    </div>
+  </div>
+  <div class="center">
+    <div class="ctoolbar">
+      <button id="sel-toggle" class="tool-btn" title="Inspect elements (I)" onclick="toggleInspect()">⌖ Inspect</button>
+      <button id="edit-src-btn" class="tool-btn" style="display:none" onclick="openPageSrcModal()">&#9998; Edit Source</button>
+      <div id="layout-btns"></div>
+    </div>
+    <iframe id="frame" src="/"></iframe>
+    <div id="src-modal" class="src-modal" style="display:none" onclick="if(event.target===this)closeSrcModal()">
+      <div class="src-modal-box">
+        <div class="src-modal-hd">
+          <span id="src-modal-title" class="src-file-lbl" style="flex:1;font-size:11px;color:#aaa"></span>
+          <button class="cbtn" id="src-save-btn" style="padding:3px 12px">Save</button>
+          <button class="xbtn" onclick="closeSrcModal()" title="Close (Esc)">✕</button>
+        </div>
+        <div class="src-editor-area">
+          <textarea class="src-ed src-modal-ta" id="src-ta" spellcheck="false"></textarea>
+          <div id="src-cm-host"></div>
+        </div>
+        <div class="src-modal-ft">
+          <div id="src-st" class="ins-st"></div>
+          <button id="src-hl-btn" class="tool-btn" style="font-size:10px;padding:3px 8px" onclick="toggleHighlight()">✦ Highlight</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="details">
+    <div class="det-tabs">
+      <button class="dtab active" data-mode="comp" onclick="switchMode('comp')">PROPS</button>
+      <button class="dtab" data-mode="styles" onclick="switchMode('styles')">STYLES</button>
+    </div>
+    <div id="det"><div class="no-sel">Select a component to see details.</div></div>
+  </div>
+</div>
+<script>
+;(function(){
+var NL=String.fromCharCode(10)
+var bps=[]
+var sel=-1
+var overrides={}
+var omlTree=null
+var pageMode='oml'
+var pageFilePath=null
+var pageFileType=null
+var pageSourceContent=''
+var cmEditor=null
+var cmModules=null
+var srcHighlight=localStorage.getItem('dvx-src-hl')==='1'
+var themeObserver=null
+var insertTarget=null
+var pageLayouts=[]
+var pageOwnFilePath=null
+var srcModalMode='file'
+var srcFragmentComp=null
+var srcFragmentTag=null
+var srcFragmentIdx=0
+var prevHovered=null
+var selected=null
+var selectedTreeRow=null
+var cssVarMap={}
+var styleEdits={}
+var detMode='comp'
+var frame=document.getElementById('frame')
+var params=new URLSearchParams(location.search)
+var pg=params.get('page')||'/'
+document.getElementById('pg').value=pg
+setFrame(pg)
+document.getElementById('back').href=pg
+var pgInp=document.getElementById('pg')
+var pgClear=document.getElementById('pg-clear')
+function syncPgClear(){pgClear.style.display=pgInp.value?'block':'none'}
+pgInp.addEventListener('keydown',function(e){if(e.key==='Enter')goPage()})
+pgInp.addEventListener('input',syncPgClear)
+pgClear.addEventListener('click',function(){pgInp.value='';syncPgClear();pgInp.focus()})
+syncPgClear()
+
+function setFrame(path){
+  var sep=path.indexOf('?')>=0?'&':'?'
+  frame.src=path+sep+'_editor=1'
+}
+function goPage(){
+  pg=document.getElementById('pg').value.trim()||'/'
+  setFrame(pg)
+  document.getElementById('back').href=pg
+  history.replaceState(null,'','/_davaux/editor?page='+encodeURIComponent(pg))
+}
+window.goPage=goPage
+
+// ── Click-to-select bridge ────────────────────────────────────────────────────
+// ── Inspect mode ─────────────────────────────────────────────────────────────
+var selectMode=false
+function setSelectMode(v){
+  selectMode=!!v
+  var btn=document.getElementById('sel-toggle')
+  if(btn)btn.classList.toggle('active',selectMode)
+  if(!selectMode&&prevHovered){prevHovered.style.outline='';prevHovered=null}
+  if(!selectMode&&selected){try{selected.style.outline=''}catch(_){}selected=null}
+  try{frame.contentDocument.body.style.cursor=selectMode?'crosshair':''}catch(_){}
+}
+window.setSelectMode=setSelectMode
+window.toggleInspect=function(){setSelectMode(!selectMode)}
+window.openSrcModal=openSrcModal
+window.openLayoutModal=openLayoutModal
+window.openPageSrcModal=openPageSrcModal
+window.closeSrcModal=closeSrcModal
+window.toggleHighlight=toggleHighlight
+window.openFragmentModal=openFragmentModal
+window.openElementFragmentModal=openElementFragmentModal
+document.addEventListener('keydown',function(e){
+  if(e.key==='Escape'){var m=document.getElementById('src-modal');if(m&&m.style.display!=='none'){closeSrcModal();return}}
+  if(e.target.tagName==='INPUT'||e.target.tagName==='TEXTAREA'||e.target.tagName==='SELECT'||e.target.isContentEditable)return
+  if(e.key==='i'||e.key==='I'){e.preventDefault();setSelectMode(!selectMode)}
+})
+
+frame.addEventListener('load',function(){
+  try{
+    var doc=frame.contentDocument
+    if(!doc||!doc.body)return
+    // Fetch OML tree for this page
+    var fp=frame.contentWindow.location
+    var rawSearch=fp.search.replace(/[?&]_editor=1/,'')
+    var treeUrl=fp.pathname+(rawSearch||'')
+    omlTree=null
+    ocState=null
+    oeState=null
+    selected=null
+    insertTarget=null
+    styleEdits={}
+    var det=document.getElementById('det')
+    if(det)det.innerHTML='<div class="no-sel">Select a component to see details.</div>'
+    fetch('/_davaux/inspector?url='+encodeURIComponent(treeUrl))
+      .then(function(r){return r.json()})
+      .then(function(d){
+        pageFileType=d.fileType||'tsx'
+        pageFilePath=d.filePath||null
+        pageOwnFilePath=d.filePath||null
+        pageLayouts=d.layouts||[]
+        omlTree=d.node||null
+        pageMode=(pageFileType==='mdx'||pageFileType==='md')?'source':'oml'
+        renderLayoutButtons()
+        if(pageMode==='source'){
+          enterSourceMode()
+        }else{
+          var esb=document.getElementById('edit-src-btn')
+          if(esb)esb.style.display=pageFilePath?'':'none'
+          pageSourceContent=''
+          if(pageFilePath){
+            fetch('/_davaux/get-source?file='+encodeURIComponent(pageFilePath))
+              .then(function(r){return r.json()})
+              .then(function(d2){pageSourceContent=d2.content||''})
+              .catch(function(){})
+          }
+          closeSrcModal()
+          renderTreePanel()
+        }
+      })
+      .catch(function(){renderTreePanel()})
+    scanCssVars(doc)
+    detectPageTheme(doc)
+    if(themeObserver)themeObserver.disconnect()
+    themeObserver=new MutationObserver(function(){detectPageTheme(doc)})
+    themeObserver.observe(doc.documentElement,{attributes:true,attributeFilter:['data-mantine-color-scheme','data-color-scheme','data-theme']})
+    if(detMode==='styles')renderStylesPanel()
+    if(selectMode)doc.body.style.cursor='crosshair'
+    // Hover — blue outline (inspect mode only)
+    doc.addEventListener('mouseover',function(e){
+      if(!selectMode)return
+      // Restore selection outline on previously hovered element (if it was selected)
+      if(prevHovered){
+        prevHovered.style.outline=prevHovered===selected?'2px solid #7cc5f0':''
+        prevHovered.style.outlineOffset=prevHovered===selected?'-1px':''
+      }
+      if(e.target===doc.body||e.target===doc.documentElement){prevHovered=null;return}
+      prevHovered=e.target
+      e.target.style.outline='2px solid rgba(124,197,240,0.7)'
+      e.target.style.outlineOffset='-1px'
+    })
+    doc.addEventListener('mouseout',function(){
+      if(!selectMode)return
+      if(prevHovered){
+        // Restore selection outline if this element is still selected
+        prevHovered.style.outline=prevHovered===selected?'2px solid #7cc5f0':''
+        prevHovered.style.outlineOffset=prevHovered===selected?'-1px':''
+        prevHovered=null
+      }
+    })
+    // Click — toggle selection and show details (inspect mode only)
+    doc.addEventListener('click',function(e){
+      if(!selectMode)return
+      e.preventDefault()
+      e.stopPropagation()
+      var target=e.target
+      // Clear previous selection outline
+      if(selected){selected.style.outline='';selected.style.outlineOffset=''}
+      if(selected===target){
+        // Same element clicked again — deselect
+        selected=null
+        ocState=null
+        oeState=null
+        var det=document.getElementById('det')
+        if(det)det.innerHTML='<div class="no-sel">Select a component to see details.</div>'
+        return
+      }
+      // Select the new element
+      selected=target
+      selected.style.outline='2px solid #7cc5f0'
+      selected.style.outlineOffset='-1px'
+      showElemDet(target)
+    },true)
+  }catch(_){}
+})
+
+function showElemDet(el){
+  detMode='comp'
+  document.querySelectorAll('.dtab').forEach(function(t){t.classList.toggle('active',t.dataset.mode==='comp')})
+  sel=-1
+  ocState=null
+  oeState=null
+  styleEdits={}
+  document.querySelectorAll('.bp-card').forEach(function(c){c.classList.remove('sel')})
+  var tag=el.tagName?el.tagName.toLowerCase():'?'
+  var cls=el.getAttribute?el.getAttribute('class')||'':''
+  var txt=(el.textContent||'').trim().slice(0,80)
+  var det=document.getElementById('det')
+  // Islands use data-island; library components use data-oml-comp injected at render time.
+  // Walk up from the clicked element to find the nearest marker.
+  var islandName=null
+  var omlCompEl=null
+  var n=el
+  while(n){
+    var di=n.getAttribute&&n.getAttribute('data-island');if(di){islandName=di;break}
+    var dc=n.getAttribute&&n.getAttribute('data-oml-comp');if(dc){omlCompEl=n;break}
+    n=n.parentElement
+  }
+  var match=islandName&&omlTree?findByName(omlTree,islandName)
+    :omlCompEl&&omlTree?findByOmlComp(omlTree,omlCompEl.getAttribute('data-oml-comp'),parseInt(omlCompEl.getAttribute('data-oml-inst')||'0',10))
+    :omlTree?findInTree(omlTree,tag,txt,cls):null
+  if(match&&match.type==='#component'){
+    var compIdx=countNameBefore(omlTree,match,match.name)
+    var rawProps=Object.assign({},match.props||{})
+    var chi=compChildrenInfo(match)
+    ocState={name:match.name,props:rawProps,instanceIndex:compIdx,childrenText:chi.childrenText,hasChildren:chi.hasChildren}
+    insertTarget={type:'comp',name:match.name,instanceIndex:compIdx}
+    renderOcPanel(det)
+    syncTreeRow(match)
+    return
+  }
+  if(match&&match.type==='element'){
+    var elemText=null
+    if(match.children&&match.children.length>0){
+      var allTxt=true
+      var accum=''
+      for(var ci=0;ci<match.children.length;ci++){
+        var ch=match.children[ci]
+        if(ch&&ch.type==='#text'){accum+=ch.value||''}
+        else{allTxt=false;break}
+      }
+      if(allTxt&&accum.trim())elemText=accum
+    }
+    var idx=countTagBefore(omlTree,match,match.tag)
+    oeState={tag:match.tag,props:Object.assign({},match.props||{}),instanceIndex:idx,textContent:elemText}
+    insertTarget={type:'elem',tag:match.tag,instanceIndex:idx}
+    renderOePanel(det)
+    syncTreeRow(match)
+    return
+  }
+  syncTreeRow(null)
+  var h='<span class="el-chip">&lt;'+esc(tag)+'&gt;</span>'
+  if(cls)h+='<div class="prop-row"><span class="pn">class</span><span class="pt"> "'+esc(cls)+'"</span></div>'
+  if(txt)h+='<div class="d-lbl">TEXT</div><div style="color:#888;font-size:11px;word-break:break-all;line-height:1.4">'+esc(txt)+'</div>'
+  det.innerHTML=h
+}
+function compChildrenInfo(node){
+  var kids=node.children||[]
+  if(kids.length===0)return{childrenText:null,hasChildren:false}
+  if(kids.length===1&&kids[0]&&kids[0].type==='#text')return{childrenText:kids[0].value||null,hasChildren:true}
+  return{childrenText:null,hasChildren:true}
+}
+function isOmlVal(v){
+  if(!v||typeof v!=='object')return false
+  if(Array.isArray(v))return v.some(isOmlVal)
+  var t=v.type
+  return t==='element'||t==='#component'||t==='#fragment'||t==='#text'||t==='#raw'
+}
+function renderOcPanel(det){
+  if(!ocState)return
+  var entries=Object.entries(ocState.props).filter(function(e){return typeof e[1]!=='function'&&!isOmlVal(e[1])})
+  var readonlyEntries=Object.entries(ocState.props).filter(function(e){return isOmlVal(e[1])})
+  // Find matching blueprint to surface optional props not currently in the JSX
+  var bp=bps.find(function(b){return b.name===ocState.name})
+  var bpSchema=bp?bp.props||{}:{}
+  var missing=Object.keys(bpSchema).filter(function(k){return!(k in ocState.props)})
+  var h='<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">'
+  h+='<span class="comp-chip" style="margin:0">&#9826; '+esc(ocState.name)+'</span>'
+  h+='<button class="cbtn mv-up" style="padding:2px 6px;font-size:12px;width:auto" title="Move up">↑</button>'
+  h+='<button class="cbtn mv-dn" style="padding:2px 6px;font-size:12px;width:auto" title="Move down">↓</button>'
+  h+='<button class="cbtn rem-btn" style="background:#2a1a1a;border-color:#4a2a2a;color:#ff8888;padding:2px 8px;font-size:10px;width:auto;margin-left:auto" data-comp="'+esc(ocState.name)+'" data-idx="'+ocState.instanceIndex+'">Remove</button>'
+  h+='</div>'
+  h+='<div id="rem-st" class="ins-st"></div>'
+  if(entries.length||readonlyEntries.length){
+    h+='<div class="d-lbl">PROPS</div>'
+    entries.forEach(function(e){
+      var k=e[0],v=e[1]
+      h+='<div class="pi-row"><label class="pi-lbl"><span class="pn">'+esc(k)+'</span>'
+      h+='<span class="pt"> '+esc(typeof v)+'</span></label>'
+      if(typeof v==='boolean'){
+        h+='<input type="checkbox" class="pi pi-cb oc-inp" data-prop="'+esc(k)+'" data-type="boolean"'+(v?' checked':'')+'>'
+      }else if(typeof v==='number'){
+        h+='<input type="number" class="pi oc-inp" data-prop="'+esc(k)+'" data-type="number" value="'+esc(String(v))+'">'
+      }else if(typeof v==='object'&&v!==null){
+        h+='<input type="text" class="pi oc-inp" data-prop="'+esc(k)+'" data-type="json" value="'+esc(JSON.stringify(v))+'">'
+      }else{
+        h+='<input type="text" class="pi oc-inp" data-prop="'+esc(k)+'" data-type="string" value="'+esc(String(v!==null&&v!==undefined?v:''))+'">'
+      }
+      h+='</div>'
+    })
+    readonlyEntries.forEach(function(e){
+      var k=e[0]
+      h+='<div class="pi-row"><label class="pi-lbl"><span class="pn">'+esc(k)+'</span><span class="pt"> jsx</span></label>'
+      h+='<input type="text" class="pi" value="[JSX]" readonly style="opacity:0.4;cursor:default"></div>'
+    })
+  }else{
+    h+='<div class="no-sel" style="font-size:11px">No props</div>'
+  }
+  if(ocState.childrenText!==null&&ocState.childrenText!==undefined){
+    h+='<div class="d-lbl" style="margin-top:8px">CONTENT</div>'
+    h+='<textarea class="pi oc-txt" rows="2" style="width:100%;resize:vertical;font-family:monospace;font-size:11px">'+esc(ocState.childrenText)+'</textarea>'
+  }else if(ocState.hasChildren){
+    h+='<div class="d-lbl" style="margin-top:8px">CHILDREN</div>'
+    h+='<button class="cbtn ibtn" style="font-size:10px;padding:3px 8px;width:auto" onclick="openFragmentModal()">&#9998; Edit Children</button>'
+  }
+  // Blueprint optional props not yet in JSX
+  if(missing.length){
+    h+='<div class="d-lbl" style="margin-top:8px">OPTIONAL</div>'
+    missing.forEach(function(k){
+      var schema=bpSchema[k]
+      h+='<div class="pi-row"><span class="pn" style="opacity:0.5;font-size:11px;flex:1">'+esc(k)+'</span>'
+      h+='<span class="pt" style="opacity:0.4;font-size:10px;flex-shrink:0;margin-right:4px">'+esc(schema.type||'string')+'</span>'
+      h+='<button class="conv-btn oc-add-bp" data-prop="'+esc(k)+'" data-type="'+(schema.type||'string')+'" style="font-size:10px;padding:2px 6px">+ Add</button>'
+      h+='</div>'
+    })
+  }
+  // Manual add prop
+  h+='<button class="cbtn oc-add-manual" style="margin-top:6px;font-size:10px;background:#1a1a2e;color:#666">+ Add prop</button>'
+  h+='<div style="display:flex;gap:4px;margin-top:8px"><button class="cbtn" id="oc-save-btn">Save changes</button></div>'
+  h+='<div id="oc-st" class="ins-st"></div>'
+  det.innerHTML=h
+  det.querySelectorAll('.oc-inp').forEach(function(inp){
+    inp.addEventListener('input',function(){
+      var p=this.dataset.prop,t=this.dataset.type
+      if(t==='boolean')ocState.props[p]=this.checked
+      else if(t==='number')ocState.props[p]=Number(this.value)
+      else if(t==='json'){try{ocState.props[p]=JSON.parse(this.value)}catch(_){}}
+      else ocState.props[p]=this.value
+    })
+  })
+  var ocTxt=det.querySelector('.oc-txt')
+  if(ocTxt)ocTxt.addEventListener('input',function(){ocState.childrenText=this.value})
+  det.querySelectorAll('.oc-add-bp').forEach(function(btn){
+    btn.addEventListener('click',function(){
+      var k=this.dataset.prop,t=this.dataset.type||'string'
+      ocState.props[k]=defVal(t)
+      renderOcPanel(document.getElementById('det'))
+    })
+  })
+  var addManual=det.querySelector('.oc-add-manual')
+  if(addManual)addManual.addEventListener('click',function(){
+    var row=document.createElement('div')
+    row.className='pi-row'
+    row.style.gap='4px'
+    row.innerHTML='<input type="text" class="pi" placeholder="name" style="flex:1"><input type="text" class="pi" placeholder="value" style="flex:1"><button class="conv-btn" style="padding:2px 6px;font-size:10px;flex-shrink:0">OK</button>'
+    var saveArea=det.querySelector('#oc-save-btn')
+    if(saveArea&&saveArea.parentElement)saveArea.parentElement.before(row)
+    row.querySelector('input').focus()
+    row.querySelector('button').addEventListener('click',function(){
+      var ins=row.querySelectorAll('input')
+      var name=ins[0].value.trim(),val=ins[1].value
+      if(!name)return
+      ocState.props[name]=val
+      renderOcPanel(document.getElementById('det'))
+    })
+  })
+  var rb=det.querySelector('.rem-btn')
+  if(rb)rb.addEventListener('click',function(){remComp(this.getAttribute('data-comp'),parseInt(this.getAttribute('data-idx')||'0',10))})
+  var sb=det.querySelector('#oc-save-btn')
+  if(sb)sb.addEventListener('click',saveOmlComp)
+  var mvup=det.querySelector('.mv-up')
+  if(mvup)mvup.addEventListener('click',function(){movePanelNode(true,ocState.name,ocState.instanceIndex,'up')})
+  var mvdn=det.querySelector('.mv-dn')
+  if(mvdn)mvdn.addEventListener('click',function(){movePanelNode(true,ocState.name,ocState.instanceIndex,'down')})
+}
+function buildJsxFromObj(name,props){
+  var entries=Object.entries(props).filter(function(e){return typeof e[1]!=='function'})
+  if(!entries.length)return'<'+name+' />'
+  var lines=entries.map(function(e){
+    var k=e[0],v=e[1]
+    if(typeof v==='string')return'  '+k+'='+JSON.stringify(v)
+    if(typeof v==='boolean')return'  '+k+'={'+(v?'true':'false')+'}'
+    if(typeof v==='number')return'  '+k+'={'+v+'}'
+    return'  '+k+'={'+JSON.stringify(v)+'}'
+  })
+  return'<'+name+NL+lines.join(NL)+NL+'/>'
+}
+function saveOmlComp(){
+  if(!ocState)return
+  var st=document.getElementById('oc-st')
+  if(st){st.textContent='Saving...';st.className='ins-st'}
+  fetch('/_davaux/update-comp-props',{
+    method:'POST',headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({page:pg.split('?')[0],component:ocState.name,newProps:ocState.props,instanceIndex:ocState.instanceIndex,childrenText:ocState.childrenText})
+  })
+  .then(function(r){return r.json()})
+  .then(function(res){
+    var s=document.getElementById('oc-st');if(!s)return
+    if(res.replaced){
+      s.textContent='Saved to '+res.file;s.className='ins-st ok'
+      var b=document.getElementById('oc-save-btn')
+      if(b){b.textContent='Saved!';b.classList.add('ok');setTimeout(function(){b.textContent='Save changes';b.classList.remove('ok')},2000)}
+    }else{s.textContent=res.error;s.className='ins-st err'}
+  })
+  .catch(function(){var s=document.getElementById('oc-st');if(s){s.textContent='Request failed';s.className='ins-st err'}})
+}
+window.saveOmlComp=saveOmlComp
+
+function countTagBefore(root,target,tag){
+  var state={n:0,found:false}
+  walkTagCount(root,target,tag,state)
+  return state.found?state.n:0
+}
+function walkTagCount(node,target,tag,state){
+  if(state.found)return
+  if(node===target){state.found=true;return}
+  if(node.type==='element'){
+    if(node.tag===tag)state.n++
+    var kids=node.children||[]
+    for(var i=0;i<kids.length;i++)walkTagCount(kids[i],target,tag,state)
+  }else if(node.type==='#fragment'){
+    var kids=node.children||[]
+    for(var i=0;i<kids.length;i++)walkTagCount(kids[i],target,tag,state)
+  }else if(node.type==='#component'){
+    var sub=(node.output&&node.output.type!=='#raw')?[node.output]:(node.children||[])
+    for(var i=0;i<sub.length;i++)walkTagCount(sub[i],target,tag,state)
+  }
+}
+function countNameBefore(root,target,name){
+  var state={n:0,found:false}
+  walkNameCount(root,target,name,state)
+  return state.found?state.n:0
+}
+function walkNameCount(node,target,name,state){
+  if(!node||state.found)return
+  if(node===target){state.found=true;return}
+  if(node.type==='#component'){
+    if(node.name===name)state.n++
+    var sub=(node.output&&node.output.type!=='#raw')?[node.output]:(node.children||[])
+    for(var i=0;i<sub.length;i++)walkNameCount(sub[i],target,name,state)
+  }else if(node.type==='element'||node.type==='#fragment'){
+    var kids=node.children||[]
+    for(var i=0;i<kids.length;i++)walkNameCount(kids[i],target,name,state)
+  }
+}
+function renderOePanel(det){
+  if(!oeState)return
+  var entries=Object.entries(oeState.props).filter(function(e){return typeof e[1]!=='function'})
+  var h='<div style="display:flex;align-items:center;gap:8px;margin-bottom:8px">'
+  h+='<span class="el-chip" style="margin:0">&lt;'+esc(oeState.tag)+'&gt;</span>'
+  h+='<button class="cbtn mv-up" style="padding:2px 6px;font-size:12px;width:auto" title="Move up">↑</button>'
+  h+='<button class="cbtn mv-dn" style="padding:2px 6px;font-size:12px;width:auto" title="Move down">↓</button>'
+  h+='<button class="cbtn oe-rem-btn" style="background:#2a1a1a;border-color:#4a2a2a;color:#ff8888;padding:2px 8px;font-size:10px;width:auto;margin-left:auto">Remove</button>'
+  h+='</div>'
+  if(entries.length){
+    h+='<div class="d-lbl">ATTRIBUTES</div>'
+    entries.forEach(function(e){
+      var k=e[0],v=e[1]
+      h+='<div class="pi-row"><label class="pi-lbl"><span class="pn">'+esc(k)+'</span>'
+      if(typeof v==='boolean'){
+        h+='<span class="pt"> bool</span></label>'
+        h+='<input type="checkbox" class="pi pi-cb oe-inp" data-attr="'+esc(k)+'" data-type="boolean"'+(v?' checked':'')+'>'
+      }else if(typeof v==='object'&&v!==null){
+        h+='<span class="pt"> object</span></label>'
+        h+='<input type="text" class="pi oe-inp" data-attr="'+esc(k)+'" data-type="json" value="'+esc(JSON.stringify(v))+'">'
+      }else{
+        h+='<span class="pt"> string</span></label>'
+        h+='<input type="text" class="pi oe-inp" data-attr="'+esc(k)+'" data-type="string" value="'+esc(String(v!==null&&v!==undefined?v:''))+'">'
+      }
+      h+='</div>'
+    })
+  }else{
+    h+='<div class="no-sel" style="font-size:11px">No attributes</div>'
+  }
+  if(oeState.textContent!==null&&oeState.textContent!==undefined){
+    h+='<div class="d-lbl" style="margin-top:8px">TEXT</div>'
+    h+='<textarea class="pi oe-txt" rows="2" style="width:100%;resize:vertical;font-family:monospace;font-size:11px">'+esc(oeState.textContent)+'</textarea>'
+  }else{
+    h+='<div class="d-lbl" style="margin-top:8px">CHILDREN</div>'
+    h+='<button class="cbtn ibtn" style="font-size:10px;padding:3px 8px;width:auto" onclick="openElementFragmentModal()">&#9998; Edit Children</button>'
+  }
+  h+='<button class="cbtn oe-add-manual" style="margin-top:6px;font-size:10px;background:#1a1a2e;color:#666">+ Add attr</button>'
+  h+='<div style="display:flex;gap:4px;margin-top:8px"><button class="cbtn" id="oe-save-btn">Save changes</button></div>'
+  h+='<div id="oe-st" class="ins-st"></div>'
+  h+='<div style="margin-top:8px">'
+  h+='<button class="cbtn oe-add-sib-btn" style="font-size:10px;background:#1a2a1a;border-color:#2a4a2a;color:#88cc88;width:auto;padding:2px 8px">+ Add sibling</button>'
+  h+='<div id="oe-sib-form" style="display:none;margin-top:6px">'
+  h+='<div class="pi-row"><label class="pi-lbl"><span class="pn">tag</span></label>'
+  h+='<select class="pi" id="sib-tag"><option>div</option><option>p</option><option>span</option><option>h1</option><option>h2</option><option>h3</option><option>section</option><option>article</option><option>button</option><option>a</option><option>ul</option><option>li</option></select>'
+  h+='</div>'
+  h+='<div class="pi-row"><label class="pi-lbl"><span class="pn">class</span></label><input type="text" class="pi" id="sib-cls" placeholder="optional"></div>'
+  h+='<div class="pi-row"><label class="pi-lbl"><span class="pn">text</span></label><input type="text" class="pi" id="sib-txt" placeholder="optional"></div>'
+  h+='<button class="cbtn" id="sib-create-btn" style="margin-top:4px">Create</button>'
+  h+='</div></div>'
+  det.innerHTML=h
+  det.querySelectorAll('.oe-inp').forEach(function(inp){
+    inp.addEventListener('input',function(){
+      var a=this.dataset.attr,t=this.dataset.type
+      if(t==='boolean')oeState.props[a]=this.checked
+      else if(t==='json'){try{oeState.props[a]=JSON.parse(this.value)}catch(_){}}
+      else oeState.props[a]=this.value
+    })
+  })
+  var txtArea=det.querySelector('.oe-txt')
+  if(txtArea)txtArea.addEventListener('input',function(){oeState.textContent=this.value})
+  var addManual=det.querySelector('.oe-add-manual')
+  if(addManual)addManual.addEventListener('click',function(){
+    var row=document.createElement('div')
+    row.className='pi-row'
+    row.style.gap='4px'
+    row.innerHTML='<input type="text" class="pi" placeholder="attr" style="flex:1"><input type="text" class="pi" placeholder="value" style="flex:1"><button class="conv-btn" style="padding:2px 6px;font-size:10px;flex-shrink:0">OK</button>'
+    var saveArea=det.querySelector('#oe-save-btn')
+    if(saveArea&&saveArea.parentElement)saveArea.parentElement.before(row)
+    row.querySelector('input').focus()
+    row.querySelector('button').addEventListener('click',function(){
+      var ins=row.querySelectorAll('input')
+      var name=ins[0].value.trim(),val=ins[1].value
+      if(!name)return
+      oeState.props[name]=val
+      renderOePanel(document.getElementById('det'))
+    })
+  })
+  var sb=det.querySelector('#oe-save-btn')
+  if(sb)sb.addEventListener('click',saveOmlElem)
+  var mvup=det.querySelector('.mv-up')
+  if(mvup)mvup.addEventListener('click',function(){movePanelNode(false,oeState.tag,oeState.instanceIndex,'up')})
+  var mvdn=det.querySelector('.mv-dn')
+  if(mvdn)mvdn.addEventListener('click',function(){movePanelNode(false,oeState.tag,oeState.instanceIndex,'down')})
+  var remBtn=det.querySelector('.oe-rem-btn')
+  if(remBtn)remBtn.addEventListener('click',removeOmlElem)
+  var addSibBtn=det.querySelector('.oe-add-sib-btn')
+  if(addSibBtn)addSibBtn.addEventListener('click',function(){
+    var form=document.getElementById('oe-sib-form')
+    if(form)form.style.display=form.style.display==='none'?'block':'none'
+  })
+  var createSibBtn=det.querySelector('#sib-create-btn')
+  if(createSibBtn)createSibBtn.addEventListener('click',insertSiblingElem)
+}
+function insertSiblingElem(){
+  if(!oeState)return
+  var tagEl=document.getElementById('sib-tag')
+  var clsEl=document.getElementById('sib-cls')
+  var txtEl=document.getElementById('sib-txt')
+  var tag=tagEl?tagEl['value']:'div'
+  var cls=clsEl?clsEl['value'].trim():''
+  var txt=txtEl?txtEl['value'].trim():''
+  var attrs=cls?' class="'+cls+'"':''
+  var jsx=txt?'<'+tag+attrs+'>'+txt+'</'+tag+'>':'<'+tag+attrs+' />'
+  var st=document.getElementById('oe-st')
+  if(st){st.textContent='Creating...';st.className='ins-st'}
+  fetch('/_davaux/insert-after',{
+    method:'POST',headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({page:pg.split('?')[0],tag:oeState.tag,instanceIndex:oeState.instanceIndex,newJsx:jsx})
+  })
+  .then(function(r){return r.json()})
+  .then(function(res){
+    var s=document.getElementById('oe-st');if(!s)return
+    if(res.inserted){
+      s.textContent='Inserted into '+res.file;s.className='ins-st ok'
+      var cb=document.getElementById('sib-create-btn')
+      if(cb){cb['disabled']=true;cb.textContent='Done'}
+    }else{s.textContent=res.error;s.className='ins-st err'}
+  })
+  .catch(function(){var s=document.getElementById('oe-st');if(s){s.textContent='Request failed';s.className='ins-st err'}})
+}
+function removeOmlElem(){
+  if(!oeState)return
+  var st=document.getElementById('oe-st')
+  if(st){st.textContent='Removing...';st.className='ins-st'}
+  fetch('/_davaux/remove',{
+    method:'POST',headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({page:pg.split('?')[0],tag:oeState.tag,instanceIndex:oeState.instanceIndex})
+  })
+  .then(function(r){return r.json()})
+  .then(function(res){
+    var s=document.getElementById('oe-st');if(!s)return
+    if(res.removed){
+      s.textContent='Removed from '+res.file;s.className='ins-st ok'
+      var rb=document.querySelector('.oe-rem-btn')
+      if(rb){rb.disabled=true;rb.textContent='Removed'}
+    }else{s.textContent=res.error;s.className='ins-st err'}
+  })
+  .catch(function(){var s=document.getElementById('oe-st');if(s){s.textContent='Request failed';s.className='ins-st err'}})
+}
+function saveOmlElem(){
+  if(!oeState)return
+  var st=document.getElementById('oe-st')
+  if(st){st.textContent='Saving...';st.className='ins-st'}
+  fetch('/_davaux/update-element',{
+    method:'POST',headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({page:pg.split('?')[0],tag:oeState.tag,newProps:oeState.props,instanceIndex:oeState.instanceIndex,textContent:oeState.textContent})
+  })
+  .then(function(r){return r.json()})
+  .then(function(res){
+    var s=document.getElementById('oe-st');if(!s)return
+    if(res.replaced){
+      s.textContent='Saved to '+res.file;s.className='ins-st ok'
+      var b=document.getElementById('oe-save-btn')
+      if(b){b.textContent='Saved!';b.classList.add('ok');setTimeout(function(){b.textContent='Save changes';b.classList.remove('ok')},2000)}
+    }else{s.textContent=res.error;s.className='ins-st err'}
+  })
+  .catch(function(){var s=document.getElementById('oe-st');if(s){s.textContent='Request failed';s.className='ins-st err'}})
+}
+window.saveOmlElem=saveOmlElem
+
+function movePanelNode(isComp,name,instanceIndex,dir){
+  var stId=isComp?'oc-st':'oe-st'
+  var st=document.getElementById(stId)
+  if(st){st.textContent='Moving...';st.className='ins-st'}
+  fetch('/_davaux/move',{
+    method:'POST',headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({page:pg.split('?')[0],name:name,isComponent:isComp,instanceIndex:instanceIndex,direction:dir})
+  })
+  .then(function(r){return r.json()})
+  .then(function(res){
+    var s=document.getElementById(stId);if(!s)return
+    if(res.moved){s.textContent='';s.className='ins-st'}
+    else{s.textContent=res.error;s.className='ins-st err'}
+  })
+  .catch(function(){var s=document.getElementById(stId);if(s){s.textContent='Request failed';s.className='ins-st err'}})
+}
+window.movePanelNode=movePanelNode
+
+function findByName(node,name){
+  if(!node)return null
+  if(node.type==='#component'&&node.name===name)return node
+  var kids
+  if(node.type==='element'||node.type==='#fragment'){kids=node.children||[]}
+  else if(node.type==='#component'){kids=(node.output&&node.output.type!=='#raw')?[node.output]:(node.children||[])}
+  else{kids=[]}
+  for(var i=0;i<kids.length;i++){var f=findByName(kids[i],name);if(f)return f}
+  return null
+}
+function findByOmlComp(root,name,inst){
+  var state={n:0,found:null}
+  walkFindOmlComp(root,name,inst,state)
+  return state.found
+}
+function walkFindOmlComp(node,name,inst,state){
+  if(!node||state.found)return
+  if(node.type==='#component'){
+    if(node.name===name){
+      if(state.n===inst){state.found=node;return}
+      state.n++
+    }
+    var sub=(node.output&&node.output.type!=='#raw')?[node.output]:(node.children||[])
+    for(var i=0;i<sub.length;i++)walkFindOmlComp(sub[i],name,inst,state)
+  }else if(node.type==='element'||node.type==='#fragment'){
+    var kids=node.children||[]
+    for(var i=0;i<kids.length;i++)walkFindOmlComp(kids[i],name,inst,state)
+  }
+}
+function nodeMatchesCriteria(node,tag,txt,cls){
+  if(node.tag!==tag)return false
+  var nc=(node.props&&node.props.class)||''
+  // Class must match when provided — prevents div.grid from matching div.card.
+  if(cls&&nc!==cls)return false
+  // Text is always checked as a tiebreaker — prevents the first div.card from
+  // matching when clicking a different div.card that shares the same class.
+  if(txt){var nt=extractText(node).trim();if(nt.slice(0,30)!==txt.slice(0,30))return false}
+  return true
+}
+function findInTree(node,tag,txt,cls){
+  if(!node)return null
+  // Elements: check children FIRST so we always return the deepest (most specific) match.
+  if(node.type==='element'){
+    var ekids=node.children||[]
+    for(var i=0;i<ekids.length;i++){var ef=findInTree(ekids[i],tag,txt,cls);if(ef)return ef}
+    if(nodeMatchesCriteria(node,tag,txt,cls))return node
+    return null
+  }
+  if(node.type==='#component'){
+    // For #raw-returning components, search in JSX children (the hierarchy the user wrote)
+    if(node.output&&node.output.type==='#raw'){
+      var jkids=node.children||[]
+      for(var i=0;i<jkids.length;i++){var jf=findInTree(jkids[i],tag,txt,cls);if(jf)return jf}
+      return null
+    }
+    if(node.output){
+      var r=node.output
+      if(r.type==='element'&&nodeMatchesCriteria(r,tag,txt,cls))return node
+      var fc=findInTree(r,tag,txt,cls)
+      if(fc)return node
+    }
+    return null
+  }
+  if(node.type==='#fragment'){
+    var fkids=node.children||[]
+    for(var i=0;i<fkids.length;i++){var ff=findInTree(fkids[i],tag,txt,cls);if(ff)return ff}
+    return null
+  }
+  return null
+}
+function extractText(node){
+  if(!node)return''
+  if(node.type==='#text')return node.value
+  if(node.type==='element'||node.type==='#fragment')return(node.children||[]).map(extractText).join('')
+  if(node.type==='#component'){
+    if(node.output&&node.output.type!=='#raw')return extractText(node.output)
+    return(node.children||[]).map(extractText).join('')
+  }
+  return''
+}
+
+// ── Tree Panel ────────────────────────────────────────────────────────────────
+function renderLayoutButtons(){
+  var container=document.getElementById('layout-btns')
+  if(!container)return
+  container.innerHTML=''
+  if(!pageLayouts.length)return
+  pageLayouts.forEach(function(l){
+    var btn=document.createElement('button')
+    btn.className='tool-btn'
+    btn.title=l.filePath
+    var parts=l.filePath.replace(/\\\\/g,'/').split('/')
+    var label=pageLayouts.length===1?'Layout':(parts.length>2?parts.slice(-2).join('/'):l.filePath)
+    btn.textContent='♰ '+label
+    btn.onclick=function(){openLayoutModal(l.filePath)}
+    container.appendChild(btn)
+  })
+}
+function openLayoutModal(filePath){
+  srcModalMode='file'
+  pageFilePath=filePath
+  fetch('/_davaux/get-source?file='+encodeURIComponent(filePath))
+    .then(function(r){return r.json()})
+    .then(function(d){pageSourceContent=d.content||'';openSrcModal('file')})
+    .catch(function(){})
+}
+function openPageSrcModal(){
+  if(!pageOwnFilePath)return
+  pageFilePath=pageOwnFilePath
+  srcModalMode='file'
+  fetch('/_davaux/get-source?file='+encodeURIComponent(pageOwnFilePath))
+    .then(function(r){return r.json()})
+    .then(function(d){pageSourceContent=d.content||'';openSrcModal('file')})
+    .catch(function(){})
+}
+function enterSourceMode(){
+  var root=document.getElementById('tree-root')
+  if(root)root.innerHTML='<div class="empty">'+esc(pageFileType.toUpperCase())+' page</div>'
+  var det=document.getElementById('det')
+  if(det)det.innerHTML='<div class="no-sel">Click <b>Edit Source</b> in the toolbar to edit this page.</div>'
+  var btn=document.getElementById('edit-src-btn')
+  if(btn)btn.style.display=''
+  if(!pageFilePath)return
+  fetch('/_davaux/get-source?file='+encodeURIComponent(pageFilePath))
+    .then(function(r){return r.json()})
+    .then(function(d){pageSourceContent=d.content||''})
+    .catch(function(){})
+}
+function openSrcModal(mode){
+  if(mode)srcModalMode=mode
+  var modal=document.getElementById('src-modal')
+  var title=document.getElementById('src-modal-title')
+  var ta=document.getElementById('src-ta')
+  var saveBtn=document.getElementById('src-save-btn')
+  var st=document.getElementById('src-st')
+  var hlBtn=document.getElementById('src-hl-btn')
+  if(!modal||!ta)return
+  if(title)title.textContent=srcModalMode==='fragment'?('<'+srcFragmentComp+'> children'):srcModalMode==='element-fragment'?('<'+srcFragmentTag+'> children'):(pageFilePath||'')
+  if(st)st.textContent=''
+  if(saveBtn){saveBtn.disabled=false;saveBtn.onclick=saveSource}
+  if(hlBtn)hlBtn.classList.toggle('active',srcHighlight)
+  if(cmEditor&&cmEditor._dvxMode!==srcModalMode){cmEditor.destroy();cmEditor=null}
+  if(cmEditor){
+    try{cmEditor.dispatch({changes:{from:0,to:cmEditor.state.doc.length,insert:pageSourceContent}})}
+    catch(_){cmEditor.destroy();cmEditor=null}
+  }
+  if(!cmEditor){
+    ta.value=pageSourceContent
+    ta.onkeydown=function(e){
+      if(e.key==='Tab'){e.preventDefault();var s=this.selectionStart,en=this.selectionEnd;this.value=this.value.substring(0,s)+'  '+this.value.substring(en);this.selectionStart=this.selectionEnd=s+2;pageSourceContent=this.value}
+      if(e.key==='Escape'){closeSrcModal()}
+    }
+    ta.oninput=function(){pageSourceContent=this.value}
+    if(srcHighlight)enableHighlight()
+  }
+  modal.style.display='flex'
+  if(!cmEditor)ta.focus()
+}
+function closeSrcModal(){
+  var modal=document.getElementById('src-modal')
+  if(modal)modal.style.display='none'
+}
+function saveSource(){
+  var btn=document.getElementById('src-save-btn'),st=document.getElementById('src-st')
+  if(btn)btn.disabled=true
+  if(st)st.textContent='Saving…'
+  var body=srcModalMode==='fragment'
+    ?JSON.stringify({file:pageFilePath,component:srcFragmentComp,instanceIndex:srcFragmentIdx,content:pageSourceContent})
+    :srcModalMode==='element-fragment'
+    ?JSON.stringify({file:pageFilePath,tag:srcFragmentTag,instanceIndex:srcFragmentIdx,content:pageSourceContent})
+    :JSON.stringify({file:pageFilePath,content:pageSourceContent})
+  var url=srcModalMode==='fragment'?'/_davaux/update-fragment':srcModalMode==='element-fragment'?'/_davaux/update-element-fragment':'/_davaux/update-source'
+  fetch(url,{method:'POST',headers:{'Content-Type':'application/json'},body:body})
+    .then(function(r){return r.json()})
+    .then(function(){if(st){st.textContent='Saved';setTimeout(function(){st.textContent=''},2000)}if(btn)btn.disabled=false})
+    .catch(function(){if(st)st.textContent='Error saving';if(btn)btn.disabled=false})
+}
+async function enableHighlight(){
+  var hlBtn=document.getElementById('src-hl-btn')
+  var ta=document.getElementById('src-ta')
+  var host=document.getElementById('src-cm-host')
+  if(!ta||!host)return
+  if(hlBtn){hlBtn.disabled=true;hlBtn.textContent='⟳ Loading…'}
+  if(!cmModules){
+    try{
+      var [view,cmds,lang,langMd,langJs,thm]=await Promise.all([
+        import('https://esm.sh/@codemirror/view@6'),
+        import('https://esm.sh/@codemirror/commands@6'),
+        import('https://esm.sh/@codemirror/language@6'),
+        import('https://esm.sh/@codemirror/lang-markdown@6'),
+        import('https://esm.sh/@codemirror/lang-javascript@6'),
+        import('https://esm.sh/@codemirror/theme-one-dark@6'),
+      ])
+      cmModules={EditorView:view.EditorView,lineNumbers:view.lineNumbers,keymap:view.keymap,drawSelection:view.drawSelection,highlightActiveLine:view.highlightActiveLine,history:cmds.history,defaultKeymap:cmds.defaultKeymap,historyKeymap:cmds.historyKeymap,syntaxHighlighting:lang.syntaxHighlighting,defaultHighlightStyle:lang.defaultHighlightStyle,indentOnInput:lang.indentOnInput,LanguageDescription:lang.LanguageDescription,markdown:langMd.markdown,markdownLanguage:langMd.markdownLanguage,javascript:langJs.javascript,oneDark:thm.oneDark}
+    }catch(e){
+      console.error('CodeMirror load failed',e)
+      srcHighlight=false
+      localStorage.setItem('dvx-src-hl','0')
+      if(hlBtn){hlBtn.disabled=false;hlBtn.textContent='✦ Highlight';hlBtn.classList.remove('active')}
+      return
+    }
+  }
+  var isDark=document.documentElement.dataset.dvxTheme!=='light'
+  var isFragment=srcModalMode==='fragment'||srcModalMode==='element-fragment'
+  var isTsx=!isFragment&&pageFilePath&&/\\.tsx?$/.test(pageFilePath)
+  var m=cmModules
+  var LD=m.LanguageDescription
+  var activeLang=(isFragment||isTsx)
+    ?m.javascript({jsx:true,typescript:true})
+    :m.markdown({base:m.markdownLanguage,codeLanguages:[
+        LD.of({name:'JavaScript',alias:['js','javascript'],extensions:['js'],support:m.javascript()}),
+        LD.of({name:'TypeScript',alias:['ts','typescript'],extensions:['ts'],support:m.javascript({typescript:true})}),
+        LD.of({name:'JSX',alias:['jsx'],extensions:['jsx'],support:m.javascript({jsx:true})}),
+        LD.of({name:'TSX',alias:['tsx'],extensions:['tsx'],support:m.javascript({jsx:true,typescript:true})}),
+      ]})
+  cmEditor=new m.EditorView({
+    doc:pageSourceContent,
+    extensions:[
+      m.lineNumbers(),
+      m.history(),
+      m.keymap.of([...m.defaultKeymap,...m.historyKeymap]),
+      m.drawSelection(),
+      m.highlightActiveLine(),
+      m.indentOnInput(),
+      m.syntaxHighlighting(m.defaultHighlightStyle),
+      ...(isDark?[m.oneDark]:[]),
+      activeLang,
+      m.EditorView.updateListener.of(function(upd){if(upd.docChanged)pageSourceContent=upd.state.doc.toString()}),
+      m.EditorView.domEventHandlers({keydown:function(e){if(e.key==='Escape'){closeSrcModal();return true}}}),
+    ],
+    parent:host
+  })
+  cmEditor._dvxDark=isDark
+  cmEditor._dvxMode=srcModalMode
+  ta.style.display='none'
+  host.style.display='flex'
+  host.style.flexDirection='column'
+  if(hlBtn){hlBtn.disabled=false;hlBtn.textContent='✦ Highlight';hlBtn.classList.add('active')}
+}
+function openFragmentModal(){
+  if(!ocState||!pageOwnFilePath)return
+  pageFilePath=pageOwnFilePath
+  srcFragmentComp=ocState.name
+  srcFragmentIdx=ocState.instanceIndex
+  srcModalMode='fragment'
+  var det=document.getElementById('det')
+  var st=document.getElementById('src-st')
+  if(st)st.textContent=''
+  fetch('/_davaux/get-fragment?file='+encodeURIComponent(pageOwnFilePath)+'&component='+encodeURIComponent(srcFragmentComp)+'&instanceIndex='+srcFragmentIdx)
+    .then(function(r){return r.json()})
+    .then(function(d){
+      if(!d.found){if(det)det.innerHTML='<div class="no-sel" style="color:#ff8888">'+esc(d.error)+'</div>';return}
+      pageSourceContent=d.content||''
+      openSrcModal('fragment')
+    })
+    .catch(function(){if(det)det.innerHTML='<div class="no-sel" style="color:#ff8888">Could not load fragment.</div>'})
+}
+function openElementFragmentModal(){
+  if(!oeState||!pageOwnFilePath)return
+  pageFilePath=pageOwnFilePath
+  srcFragmentTag=oeState.tag
+  srcFragmentIdx=oeState.instanceIndex
+  srcModalMode='element-fragment'
+  var det=document.getElementById('det')
+  fetch('/_davaux/get-element-fragment?file='+encodeURIComponent(pageOwnFilePath)+'&tag='+encodeURIComponent(srcFragmentTag)+'&instanceIndex='+srcFragmentIdx)
+    .then(function(r){return r.json()})
+    .then(function(d){
+      if(!d.found){if(det)det.innerHTML='<div class="no-sel" style="color:#ff8888">'+esc(d.error)+'</div>';return}
+      pageSourceContent=d.content||''
+      openSrcModal('element-fragment')
+    })
+    .catch(function(){if(det)det.innerHTML='<div class="no-sel" style="color:#ff8888">Could not load fragment.</div>'})
+}
+function disableHighlight(){
+  var ta=document.getElementById('src-ta')
+  var host=document.getElementById('src-cm-host')
+  if(cmEditor){pageSourceContent=cmEditor.state.doc.toString();cmEditor.destroy();cmEditor=null}
+  if(ta){ta.value=pageSourceContent;ta.style.display='';ta.focus()}
+  if(host){host.style.display='none';host.innerHTML=''}
+  var hlBtn=document.getElementById('src-hl-btn')
+  if(hlBtn){hlBtn.classList.remove('active');hlBtn.textContent='✦ Highlight'}
+}
+function toggleHighlight(){
+  srcHighlight=!srcHighlight
+  localStorage.setItem('dvx-src-hl',srcHighlight?'1':'0')
+  if(srcHighlight)enableHighlight()
+  else disableHighlight()
+}
+function renderTreePanel(){
+  var root=document.getElementById('tree-root')
+  if(!root)return
+  if(!omlTree){root.innerHTML='<div class="empty">Load a page to see the tree.</div>';return}
+  root.innerHTML=''
+  var dom=buildTreeNode(omlTree,0,true)
+  if(dom)root.appendChild(dom)
+  else root.innerHTML='<div class="empty">Empty page.</div>'
+}
+
+function buildTreeNode(node,depth,isRoot){
+  if(!node)return null
+  if(node.type==='#raw')return null
+  if(node.type==='#text'){
+    var v=String(node.value||'').trim()
+    if(!v)return null
+    var w=document.createElement('div')
+    var row=document.createElement('div')
+    row.className='tr-row'
+    row.style.paddingLeft=(depth*12+4)+'px'
+    row.innerHTML='<span class="tr-tog"> </span><span class="tr-lbl"><span class="tr-txt">"'+esc(v.length>28?v.slice(0,28)+'…':v)+'"</span></span>'
+    w.appendChild(row)
+    return w
+  }
+  var cs
+  if(node.type==='#fragment'){
+    cs=(node.children||[]).filter(Boolean)
+    if(isRoot||depth===0){
+      var w=document.createElement('div')
+      cs.forEach(function(c){var ch=buildTreeNode(c,depth,false);if(ch)w.appendChild(ch)})
+      return w
+    }
+  }else if(node.type==='#component'){
+    // If return is #raw (library component), show JSX children hierarchy instead
+    if(node.output&&node.output.type!=='#raw'){cs=[node.output]}
+    else{cs=(node.children||[]).filter(Boolean)}
+  }else{
+    var allCs=(node.children||[]).filter(Boolean)
+    var hasElemKids=allCs.some(function(c){return c.type!=='#text'&&c.type!=='#raw'})
+    cs=hasElemKids?allCs.filter(function(c){return c.type!=='#text'&&c.type!=='#raw'}):[]
+  }
+  var hk=cs&&cs.length>0
+  var collapsed=false
+  var w=document.createElement('div')
+  var row=document.createElement('div')
+  row.className='tr-row'
+  row.style.paddingLeft=(depth*12+4)+'px'
+  var togSpan=document.createElement('span')
+  togSpan.className='tr-tog'
+  togSpan.textContent=hk?'▼':' '
+  var lblSpan=document.createElement('span')
+  lblSpan.className='tr-lbl'
+  if(node.type==='element'){
+    var cls=(node.props&&node.props.class)||''
+    var fc=cls?'.'+cls.split(' ')[0]:''
+    lblSpan.innerHTML='<span class="tr-tag">&lt;'+esc(node.tag+fc)+'&gt;</span>'
+    row._omlNode=node
+    row.addEventListener('click',function(e){if(e.target===togSpan)return;selectFromTree(node)})
+  }else if(node.type==='#component'){
+    lblSpan.innerHTML='<span class="tr-comp">&#9826; '+esc(node.name)+'</span>'
+    row._omlNode=node
+    row.addEventListener('click',function(e){if(e.target===togSpan)return;selectFromTree(node)})
+  }else{
+    lblSpan.innerHTML='<span class="tr-frag">&lt;&gt;</span>'
+    row.addEventListener('click',function(){if(!hk)return;collapsed=!collapsed;kidsDiv.style.display=collapsed?'none':'';togSpan.textContent=collapsed?'▶':'▼'})
+  }
+  row.appendChild(togSpan)
+  row.appendChild(lblSpan)
+  w.appendChild(row)
+  if(hk){
+    var kidsDiv=document.createElement('div')
+    cs.forEach(function(c){var ch=buildTreeNode(c,depth+1,false);if(ch)kidsDiv.appendChild(ch)})
+    w.appendChild(kidsDiv)
+    togSpan.addEventListener('click',function(e){
+      e.stopPropagation()
+      collapsed=!collapsed
+      kidsDiv.style.display=collapsed?'none':''
+      togSpan.textContent=collapsed?'▶':'▼'
+    })
+  }
+  return w
+}
+
+function selectFromTree(node){
+  if(!node)return
+  var det=document.getElementById('det')
+  if(!det)return
+  if(selected){try{selected.style.outline='';selected.style.outlineOffset=''}catch(_){}selected=null}
+  detMode='comp'
+  document.querySelectorAll('.dtab').forEach(function(t){t.classList.toggle('active',t.dataset.mode==='comp')})
+  sel=-1
+  document.querySelectorAll('.bp-card').forEach(function(c){c.classList.remove('sel')})
+  if(node.type==='#component'){
+    var treeCompIdx=countNameBefore(omlTree,node,node.name)
+    var treeRawProps=Object.assign({},node.props||{})
+    var chi=compChildrenInfo(node)
+    ocState={name:node.name,props:treeRawProps,instanceIndex:treeCompIdx,childrenText:chi.childrenText,hasChildren:chi.hasChildren}
+    oeState=null
+    renderOcPanel(det)
+  }else if(node.type==='element'){
+    var idx=countTagBefore(omlTree,node,node.tag)
+    var elemText=null
+    var allCs=(node.children||[]).filter(Boolean)
+    var onlyTxt=allCs.length>0&&allCs.every(function(c){return c.type==='#text'})
+    if(onlyTxt){var acc='';allCs.forEach(function(c){acc+=c.value||''});if(acc.trim())elemText=acc}
+    oeState={tag:node.tag,props:Object.assign({},node.props||{}),instanceIndex:idx,textContent:elemText}
+    ocState=null
+    renderOePanel(det)
+  }
+  try{
+    var domEl=findDomElForNode(node)
+    if(domEl){
+      selected=domEl
+      domEl.style.outline='2px solid #7cc5f0'
+      domEl.style.outlineOffset='-1px'
+      domEl.scrollIntoView({behavior:'smooth',block:'nearest'})
+    }
+  }catch(_){}
+  syncTreeRow(node)
+}
+
+function findDomElForNode(node){
+  if(!node)return null
+  var doc=frame.contentDocument
+  if(!doc)return null
+  if(node.type==='#component'){
+    var islandEl=doc.querySelector('[data-island="'+node.name+'"]')
+    if(islandEl)return islandEl
+    var compInst=countNameBefore(omlTree,node,node.name)
+    var compEls=doc.querySelectorAll('[data-oml-comp="'+node.name+'"]')
+    return compEls[compInst]||null
+  }
+  if(node.type==='element'){
+    var tag=node.tag
+    var cls=(node.props&&node.props.class)||''
+    var txt=extractText(node).trim().slice(0,30)
+    var els=Array.from(doc.querySelectorAll(tag))
+    for(var i=0;i<els.length;i++){
+      var el=els[i]
+      var elCls=el.getAttribute?el.getAttribute('class')||'':''
+      var elTxt=(el.textContent||'').trim().slice(0,30)
+      if((!cls||elCls===cls)&&(!txt||elTxt===txt))return el
+    }
+  }
+  return null
+}
+
+function syncTreeRow(node){
+  if(selectedTreeRow){selectedTreeRow.classList.remove('tr-sel');selectedTreeRow=null}
+  if(!node)return
+  var root=document.getElementById('tree-root')
+  if(!root)return
+  var rows=root.querySelectorAll('.tr-row')
+  for(var i=0;i<rows.length;i++){
+    if(rows[i]._omlNode===node){
+      selectedTreeRow=rows[i]
+      selectedTreeRow.classList.add('tr-sel')
+      try{selectedTreeRow.scrollIntoView({block:'nearest'})}catch(_){}
+      break
+    }
+  }
+}
+
+// ── Route picker ─────────────────────────────────────────────────────────────
+fetch('/_davaux/routes').then(function(r){return r.json()}).then(function(routes){
+  var dl=document.getElementById('route-list')
+  routes.forEach(function(r){
+    var opt=document.createElement('option')
+    opt.value=r.urlPattern
+    dl.appendChild(opt)
+  })
+}).catch(function(){})
+
+// ── Blueprint palette ─────────────────────────────────────────────────────────
+function refreshBps(){
+  fetch('/_davaux/blueprints').then(function(r){return r.json()}).then(function(data){
+    bps=data
+    var list=document.getElementById('bplist')
+    if(!bps.length){list.innerHTML='<div class="empty">No blueprints found.<br>Add .oml.json files to<br>src/blueprints/</div>';return}
+    list.innerHTML=''
+    bps.forEach(function(bp,i){
+      var card=document.createElement('div')
+      card.className='bp-card'
+      if(bp.previewHtml){var pv=document.createElement('div');pv.className='bp-prev';pv.innerHTML=bp.previewHtml;card.appendChild(pv)}
+      var lbl=document.createElement('div');lbl.className='bp-lbl';lbl.textContent=bp.name;card.appendChild(lbl)
+      card.onclick=function(){pick(i)}
+      list.appendChild(card)
+    })
+  }).catch(function(){document.getElementById('bplist').innerHTML='<div class="empty">Failed to load.</div>'})
+}
+refreshBps()
+
+// ── Blueprint editor ──────────────────────────────────────────────────────────
+var editBp=null
+var ocState=null
+var oeState=null
+function startEdit(i){
+  var bp=bps[i]
+  editBp={idx:i,id:bp.id,name:bp.name,rows:Object.entries(bp.props||{}).map(function(e){
+    var s=e[1];return{name:e[0],type:s.type||'string',required:!!s.required,def:s.default!==undefined?String(s.default):''}
+  })}
+  renderEditPanel()
+}
+window.startEdit=startEdit
+function renderEditPanel(){
+  if(!editBp)return
+  var det=document.getElementById('det')
+  det.innerHTML=
+    '<div style="display:flex;align-items:center;gap:6px;margin-bottom:10px">'
+    +'<div id="ep-title" class="d-title" style="margin:0;flex:1">'+esc(editBp.name)+'</div>'
+    +'</div>'
+    +'<div class="d-lbl">NAME</div>'
+    +'<input id="ep-bpname" class="pi" style="margin-bottom:8px" value="'+esc(editBp.name)+'">'
+    +'<div class="d-lbl">PROPS</div>'
+    +'<div id="ep-list"></div>'
+    +'<button class="cbtn" style="margin-bottom:8px" onclick="epAdd()">+ Add prop</button>'
+    +'<div style="display:flex;gap:4px;margin-bottom:4px">'
+    +'<button class="cbtn ebtn" onclick="epSave()">Save</button>'
+    +'<button class="cbtn" style="background:#1a1a2e;flex:1" onclick="epCancel()">Cancel</button>'
+    +'</div>'
+    +'<div id="ep-st" class="ins-st"></div>'
+  renderEpRows()
+  document.getElementById('ep-bpname').addEventListener('input',function(){
+    editBp.name=this.value
+    var t=document.getElementById('ep-title');if(t)t.textContent=this.value
+  })
+}
+function renderEpRows(){
+  var list=document.getElementById('ep-list');if(!list)return
+  list.innerHTML=''
+  editBp.rows.forEach(function(row,idx){
+    var d=document.createElement('div');d.className='ep-row'
+    var ni=document.createElement('input');ni.type='text';ni.className='pi ep-name';ni.value=row.name;ni.placeholder='name'
+    ni.addEventListener('input',function(){editBp.rows[idx].name=this.value})
+    var ts=document.createElement('select');ts.className='ep-type'
+    ;['string','number','boolean','function','node','array'].forEach(function(t){
+      var o=document.createElement('option');o.value=t;o.textContent=t;if(t===row.type)o.selected=true;ts.appendChild(o)
+    })
+    ts.addEventListener('change',function(){editBp.rows[idx].type=this.value})
+    var rl=document.createElement('label');rl.className='ep-req-lbl'
+    var rc=document.createElement('input');rc.type='checkbox';rc.className='pi-cb';rc.checked=row.required
+    rc.addEventListener('change',function(){editBp.rows[idx].required=this.checked})
+    rl.appendChild(rc);rl.appendChild(Object.assign(document.createElement('span'),{textContent:'req'}))
+    var di=document.createElement('input');di.type='text';di.className='pi ep-def';di.value=row.def;di.placeholder='default'
+    di.addEventListener('input',function(){editBp.rows[idx].def=this.value})
+    var rm=document.createElement('button');rm.className='ep-rm';rm.innerHTML='✕';rm.title='Remove'
+    rm.addEventListener('click',function(){editBp.rows.splice(idx,1);renderEpRows()})
+    d.appendChild(ni);d.appendChild(ts);d.appendChild(rl);d.appendChild(di);d.appendChild(rm)
+    list.appendChild(d)
+  })
+}
+window.epAdd=function(){
+  editBp.rows.push({name:'',type:'string',required:false,def:''})
+  renderEpRows()
+  var list=document.getElementById('ep-list')
+  if(list){var ins=list.querySelectorAll('.ep-name');if(ins.length)ins[ins.length-1].focus()}
+}
+window.epCancel=function(){
+  editBp=null
+  if(sel>=0)renderBpDet(bps[sel])
+  else document.getElementById('det').innerHTML='<div class="no-sel">Select a component to see details.</div>'
+}
+window.epSave=function(){
+  var st=document.getElementById('ep-st')
+  if(st){st.textContent='Saving...';st.className='ins-st'}
+  var props={}
+  editBp.rows.forEach(function(row){
+    var n=row.name.trim();if(!n)return
+    var s={type:row.type,required:row.required}
+    if(row.def!==''){
+      if(row.type==='boolean')s.default=row.def==='true'
+      else if(row.type==='number')s.default=Number(row.def)
+      else s.default=row.def
+    }
+    props[n]=s
+  })
+  fetch('/_davaux/update-blueprint',{
+    method:'POST',headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({id:editBp.id,name:editBp.name,props:props})
+  })
+  .then(function(r){return r.json()})
+  .then(function(res){
+    if(res.saved){
+      editBp=null;sel=-1
+      document.getElementById('det').innerHTML='<div class="no-sel">Blueprint saved.</div>'
+      refreshBps()
+    }else{if(st){st.textContent=res.error||'Save failed';st.className='ins-st err'}}
+  })
+  .catch(function(){if(st){st.textContent='Request failed';st.className='ins-st err'}})
+}
+
+// ── Prop editing ──────────────────────────────────────────────────────────────
+function pick(i){
+  detMode='comp'
+  document.querySelectorAll('.dtab').forEach(function(t){t.classList.toggle('active',t.dataset.mode==='comp')})
+  sel=i
+  overrides={}
+  ocState=null
+  document.querySelectorAll('.bp-card').forEach(function(c,j){c.classList.toggle('sel',j===i)})
+  renderBpDet(bps[i])
+}
+
+function renderBpDet(bp){
+  var pe=Object.entries(bp.props||{})
+  var h='<div style="display:flex;align-items:center;gap:6px;margin-bottom:12px"><div class="d-title" style="margin:0;flex:1">'+esc(bp.name)+'</div><button class="cbtn ebtn" style="padding:2px 8px;font-size:10px;width:auto" onclick="startEdit('+sel+')">Edit</button></div>'
+  if(pe.length){
+    h+='<div class="d-lbl">PROPS</div>'
+    pe.forEach(function(e){
+      var name=e[0],schema=e[1]
+      var def=schema.default!==undefined?schema.default:defVal(schema.type)
+      h+='<div class="pi-row"><label class="pi-lbl"><span class="pn">'+esc(name)+'</span>'
+      +'<span class="pt"> '+esc(schema.type)+'</span>'
+      +(schema.required?'<span class="pr"> *</span>':'')+'</label>'
+      if(schema.type==='boolean'){
+        h+='<input type="checkbox" class="pi pi-cb" data-prop="'+esc(name)+'" data-type="boolean"'+(def?' checked':'')+'>'
+      }else if(schema.type==='number'){
+        h+='<input type="number" class="pi" data-prop="'+esc(name)+'" data-type="number" value="'+esc(String(def||0))+'">'
+      }else{
+        h+='<input type="text" class="pi" data-prop="'+esc(name)+'" data-type="string" value="'+esc(String(def||''))+'">'
+      }
+      h+='</div>'
+    })
+  }
+  h+='<div class="d-lbl">JSX</div>'
+  h+='<div class="jsx-block" id="jsx-out">'+esc(buildJsx(bp))+'</div>'
+  h+='<button class="cbtn" id="cpbtn" onclick="cp()">Copy JSX</button>'
+  var insLabel=insertTarget?('Insert after &lt;'+(insertTarget.name||insertTarget.tag)+'&gt;'):'Insert into page'
+  h+='<button class="cbtn ibtn" id="ibtn" onclick="ins()">'+insLabel+'</button>'
+  h+='<div id="ins-st" class="ins-st"></div>'
+  var det=document.getElementById('det')
+  det.innerHTML=h
+  det.querySelectorAll('.pi').forEach(function(inp){
+    inp.addEventListener('input',function(){
+      var prop=this.dataset.prop,type=this.dataset.type
+      overrides[prop]=type==='boolean'?this.checked:type==='number'?Number(this.value):this.value
+      var out=document.getElementById('jsx-out')
+      if(out)out.textContent=buildJsx(bps[sel])
+    })
+  })
+}
+
+function buildJsx(bp){
+  var pe=Object.entries(bp.props||{})
+  if(!pe.length)return'<'+bp.name+' />'
+  var lines=pe.map(function(e){
+    var name=e[0],schema=e[1]
+    var val=overrides[name]!==undefined?overrides[name]:(schema.default!==undefined?schema.default:defVal(schema.type))
+    return'  '+name+'='+fmtVal(schema.type,val)
+  })
+  return'<'+bp.name+NL+lines.join(NL)+NL+'/>'
+}
+function fmtVal(type,val){
+  if(type==='string')return JSON.stringify(String(val))
+  if(type==='boolean')return'{'+(val?'true':'false')+'}'
+  if(type==='number')return'{'+Number(val)+'}'
+  return'{'+JSON.stringify(val)+'}'
+}
+function defVal(type){
+  return{string:'example',number:0,boolean:false,function:'() => {}',node:'content',array:[]}[type]??'example'
+}
+
+function switchMode(m){
+  detMode=m
+  document.querySelectorAll('.dtab').forEach(function(t){t.classList.toggle('active',t.dataset.mode===m)})
+  if(m==='styles'){renderStylesPanel()}
+  else{
+    if(sel>=0)renderBpDet(bps[sel])
+    else document.getElementById('det').innerHTML='<div class="no-sel">Select a component to see details.</div>'
+  }
+}
+function detectPageTheme(doc){
+  try{
+    var forced=window.__DVX_EDITOR__&&window.__DVX_EDITOR__.theme
+    if(forced==='dark'||forced==='light'){document.documentElement.dataset.dvxTheme=forced;return}
+    var html=doc&&doc.documentElement
+    if(!html)return
+    var scheme=html.dataset.mantineColorScheme||html.dataset.colorScheme||html.dataset.theme||''
+    var dark=scheme==='dark'||(!scheme&&window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches)
+    document.documentElement.dataset.dvxTheme=dark?'dark':'light'
+    // Swap CodeMirror theme if active
+    if(cmEditor&&cmModules){
+      var wasDark=cmEditor._dvxDark
+      var nowDark=dark
+      if(wasDark!==nowDark){
+        disableHighlight()
+        if(srcHighlight)enableHighlight()
+      }
+    }
+  }catch(_){}
+}
+function scanCssVars(doc){
+  var vars={}
+  try{
+    for(var i=0;i<doc.styleSheets.length;i++){
+      var sheet=doc.styleSheets[i]
+      try{
+        var rules=sheet.cssRules
+        for(var j=0;j<rules.length;j++){
+          var rule=rules[j]
+          if(rule.selectorText===':root'||rule.selectorText==='html'){
+            var style=rule.style
+            for(var k=0;k<style.length;k++){
+              var prop=style[k]
+              if(prop.charAt(0)==='-'&&prop.charAt(1)==='-'){
+                var cv=style.getPropertyValue(prop).trim()
+                vars[prop]={value:cv,type:detectVarType(cv)}
+              }
+            }
+          }
+        }
+      }catch(_){}
+    }
+  }catch(_){}
+  cssVarMap=vars
+}
+function detectVarType(val){
+  var v=val.trim()
+  if(/^#[0-9a-fA-F]{3,8}$/.test(v))return'color'
+  if(v.indexOf('rgb')===0||v.indexOf('hsl')===0)return'color-fn'
+  if(/^-?[0-9]+([.][0-9]+)?(px|rem|em|%|vw|vh|ch|ex|pt|fr)$/.test(v))return'size'
+  if(/^-?[0-9]+([.][0-9]+)?$/.test(v))return'number'
+  return'text'
+}
+var STYLE_GROUPS=[
+  {label:'TYPOGRAPHY',props:['color','font-size','font-weight','line-height','text-align']},
+  {label:'SPACING',props:['padding','margin','gap']},
+  {label:'BACKGROUND',props:['background-color']},
+  {label:'BORDER',props:['border-radius','border-width','border-color']},
+  {label:'LAYOUT',props:['display','width','height','max-width']},
+]
+function isVisibleColor(v){var t=v.trim();return(/^#/.test(t)||/^rgb/.test(t)||/^hsl/.test(t))&&t!=='rgba(0, 0, 0, 0)'&&t!=='transparent'}
+function renderStylePropRow(prop,computed,current){
+  var showPicker=isVisibleColor(computed||'')&&/color|background/.test(prop)
+  var pick=current&&isVisibleColor(current)?current:isVisibleColor(computed||'')?computed:''
+  var h='<div class="cv-row">'
+  h+='<div class="cv-name">'+esc(prop)+'</div>'
+  if(showPicker){
+    h+='<div class="cv-color-row">'
+    h+='<input type="color" class="sty-inp cv-color" data-prop="'+esc(prop)+'" data-role="cp" value="'+esc(pick)+'">'
+    h+='<input type="text" class="sty-inp cv-text" data-prop="'+esc(prop)+'" data-role="tx" placeholder="'+esc((computed||'').slice(0,24))+'" value="'+esc(current)+'">'
+    h+='</div>'
+  }else{
+    h+='<input type="text" class="sty-inp cv-text" data-prop="'+esc(prop)+'" placeholder="'+esc((computed||'').slice(0,28))+'" value="'+esc(current)+'">'
+  }
+  h+='</div>'
+  return h
+}
+function renderElementStylesSection(cs){
+  var h='<div class="d-lbl">ELEMENT STYLES</div>'
+  STYLE_GROUPS.forEach(function(g){
+    var rows=g.props.map(function(p){
+      var computed=''
+      try{computed=cs.getPropertyValue(p)||''}catch(_){}
+      var current=styleEdits[p]!==undefined?styleEdits[p]:(selected.style.getPropertyValue(p)||'')
+      return renderStylePropRow(p,computed,current)
+    }).join('')
+    h+='<div class="d-lbl" style="font-size:9px;margin:8px 0 4px">'+g.label+'</div>'+rows
+  })
+  h+='<div style="display:flex;gap:4px;margin-top:8px">'
+  h+='<button class="cbtn" id="style-save-btn" onclick="saveInlineStyles()">Apply Styles</button>'
+  h+='</div>'
+  h+='<div id="style-st" class="ins-st"></div>'
+  h+='<div class="d-lbl" style="margin-top:16px">CSS VARIABLES</div>'
+  return h
+}
+function renderStylesPanel(){
+  var det=document.getElementById('det')
+  var h=''
+  if(selected){
+    try{
+      var cs=frame.contentDocument.defaultView.getComputedStyle(selected)
+      h+=renderElementStylesSection(cs)
+    }catch(_){}
+  }
+  var names=Object.keys(cssVarMap)
+  if(!names.length&&!h){det.innerHTML='<div class="no-sel">Select an element to inspect its styles,<br>or add CSS custom properties on :root.</div>';return}
+  if(names.length){
+    if(!selected)h+='<div class="d-lbl">CSS VARIABLES</div>'
+    var colors=names.filter(function(n){return cssVarMap[n].type==='color'})
+    var colorFns=names.filter(function(n){return cssVarMap[n].type==='color-fn'})
+    var sizes=names.filter(function(n){return cssVarMap[n].type==='size'||cssVarMap[n].type==='number'})
+    var texts=names.filter(function(n){return cssVarMap[n].type==='text'})
+    if(colors.length+colorFns.length){h+='<div class="d-lbl" style="font-size:9px;margin:8px 0 4px">COLORS</div>';colors.concat(colorFns).forEach(function(n){h+=renderVarRow(n)})}
+    if(sizes.length){h+='<div class="d-lbl" style="font-size:9px;margin:8px 0 4px">SIZES</div>';sizes.forEach(function(n){h+=renderVarRow(n)})}
+    if(texts.length){h+='<div class="d-lbl" style="font-size:9px;margin:8px 0 4px">OTHER</div>';texts.forEach(function(n){h+=renderVarRow(n)})}
+    h+='<button class="cbtn" id="css-cpbtn" onclick="ccss()" style="margin-top:12px">Copy CSS</button>'
+  }
+  det.innerHTML=h
+  // Wire CSS var inputs
+  det.querySelectorAll('.cv-inp').forEach(function(inp){
+    inp.addEventListener('input',function(){
+      var name=this.dataset.var
+      var val=this.value
+      cssVarMap[name].value=val
+      var companion=det.querySelector('[data-var="'+name+'"][data-role="'+(this.dataset.role==='cp'?'tx':'cp')+'"]')
+      if(companion)companion.value=val
+      try{frame.contentDocument.documentElement.style.setProperty(name,val)}catch(_){}
+    })
+  })
+  // Wire element style inputs — live preview
+  det.querySelectorAll('.sty-inp').forEach(function(inp){
+    inp.addEventListener('input',function(){
+      var prop=this.dataset.prop
+      var val=this.value.trim()
+      styleEdits[prop]=val
+      if(this.dataset.role){
+        var companion=det.querySelector('[data-prop="'+prop+'"][data-role="'+(this.dataset.role==='cp'?'tx':'cp')+'"]')
+        if(companion)companion.value=val
+      }
+      try{if(val)selected.style.setProperty(prop,val);else selected.style.removeProperty(prop)}catch(_){}
+    })
+  })
+}
+function saveInlineStyles(){
+  if(!oeState&&!ocState)return
+  var det=document.getElementById('det')
+  var st=document.getElementById('style-st')
+  if(st){st.textContent='Saving...';st.className='ins-st'}
+  // Build style string from edits
+  var styleObj={}
+  var existing=(oeState&&oeState.props&&oeState.props.style)||(ocState&&ocState.props&&ocState.props.style)||''
+  if(typeof existing==='string'){existing.split(';').forEach(function(p){var i=p.indexOf(':');if(i>-1){var k=p.slice(0,i).trim(),v=p.slice(i+1).trim();if(k)styleObj[k]=v}})}
+  det.querySelectorAll('.sty-inp[data-role="tx"],.sty-inp:not([data-role])').forEach(function(inp){
+    var prop=inp.dataset.prop,val=inp.value.trim()
+    if(val)styleObj[prop]=val;else delete styleObj[prop]
+  })
+  var styleStr=Object.entries(styleObj).map(function(e){return e[0]+': '+e[1]}).join('; ')
+  var url,body
+  if(oeState){
+    var np=Object.assign({},oeState.props);if(styleStr)np.style=styleStr;else delete np.style
+    url='/_davaux/update-element'
+    body=JSON.stringify({page:pg.split('?')[0],tag:oeState.tag,newProps:np,instanceIndex:oeState.instanceIndex,textContent:oeState.textContent})
+  }else{
+    var np=Object.assign({},ocState.props);if(styleStr)np.style=styleStr;else delete np.style
+    url='/_davaux/update-comp-props'
+    body=JSON.stringify({page:pg.split('?')[0],component:ocState.name,newProps:np,instanceIndex:ocState.instanceIndex,childrenText:ocState.childrenText})
+  }
+  fetch(url,{method:'POST',headers:{'Content-Type':'application/json'},body:body})
+    .then(function(r){return r.json()})
+    .then(function(res){
+      var ok=res.replaced||res.inserted
+      if(st){st.textContent=ok?'Saved':(res.error||'Error');st.className='ins-st '+(ok?'ok':'err');setTimeout(function(){st.textContent=''},2000)}
+    })
+    .catch(function(){if(st){st.textContent='Error';st.className='ins-st err'}})
+}
+window.saveInlineStyles=saveInlineStyles
+function renderVarRow(name){
+  var v=cssVarMap[name]
+  var h='<div class="cv-row"><div class="cv-name">'+esc(name)+'</div>'
+  if(v.type==='color'){
+    h+='<div class="cv-color-row">'
+    h+='<input type="color" class="cv-inp cv-color" data-var="'+esc(name)+'" data-role="cp" value="'+esc(v.value)+'">'
+    h+='<input type="text" class="cv-inp cv-text" data-var="'+esc(name)+'" data-role="tx" value="'+esc(v.value)+'">'
+    h+='</div>'
+  }else{
+    h+='<input type="text" class="cv-inp cv-text" data-var="'+esc(name)+'" value="'+esc(v.value)+'">'
+  }
+  h+='</div>'
+  return h
+}
+window.switchMode=switchMode
+
+// ── Palette tabs ──────────────────────────────────────────────────────────────
+function switchPal(m){
+  document.querySelectorAll('.ptab').forEach(function(t){t.classList.toggle('active',t.dataset.pal===m)})
+  document.querySelectorAll('.pal-panel').forEach(function(p){p.classList.toggle('active',p.id==='pal-'+m)})
+}
+window.switchPal=switchPal
+
+// ── Convert panel ─────────────────────────────────────────────────────────────
+var comps=[]
+function loadComponents(){
+  var dir=document.getElementById('conv-dir').value.trim()||'src/components'
+  var cl=document.getElementById('conv-list')
+  cl.innerHTML='<div class="empty">Scanning…</div>'
+  fetch('/_davaux/components?dir='+encodeURIComponent(dir))
+    .then(function(r){return r.json()})
+    .then(function(data){comps=data;renderConvList()})
+    .catch(function(){cl.innerHTML='<div class="empty">Failed to scan.</div>'})
+}
+window.loadComponents=loadComponents
+function renderConvList(){
+  var cl=document.getElementById('conv-list')
+  if(!comps.length){cl.innerHTML='<div class="empty">No components found.<br>Create .tsx files starting with<br>an uppercase letter.</div>';return}
+  cl.innerHTML=''
+  comps.forEach(function(c){
+    var div=document.createElement('div')
+    div.className='conv-item'
+    var nc=Object.keys(c.props||{}).length
+    var nd=document.createElement('div');nd.className='conv-name';nd.textContent=c.name
+    var md=document.createElement('div');md.className='conv-meta';md.textContent=c.file+(nc?' · '+nc+' prop'+(nc!==1?'s':''):'')
+    var acts=document.createElement('div');acts.className='conv-acts'
+    if(c.hasBlueprintAlready){
+      var ex=document.createElement('span');ex.className='conv-exists';ex.textContent='✓ exists'
+      var upd=document.createElement('button');upd.className='conv-btn conv-upd';upd.innerHTML='↻ Update'
+      upd.onclick=(function(comp,b){return function(){saveBp(comp,b,true)}})(c,upd)
+      acts.appendChild(ex);acts.appendChild(upd)
+    }else{
+      var btn=document.createElement('button');btn.className='conv-btn';btn.innerHTML='→ Blueprint'
+      btn.onclick=(function(comp,b){return function(){saveBp(comp,b,false)}})(c,btn)
+      acts.appendChild(btn)
+    }
+    div.appendChild(nd);div.appendChild(md);div.appendChild(acts)
+    cl.appendChild(div)
+  })
+}
+function saveBp(comp,btn,isUpdate){
+  btn.disabled=true;btn.textContent='Saving...'
+  fetch('/_davaux/save-blueprint',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:comp.name,props:comp.props,importPath:comp.importPath})})
+    .then(function(r){return r.json()})
+    .then(function(res){
+      if(res.saved){
+        if(isUpdate){
+          btn.innerHTML='✓ Updated'
+          setTimeout(function(){btn.innerHTML='↻ Update';btn.disabled=false},1500)
+        }else{
+          comps.forEach(function(c){if(c.name===comp.name)c.hasBlueprintAlready=true})
+          renderConvList()
+          refreshBps()
+        }
+      }else{btn.innerHTML='Error';btn.className='conv-btn conv-upd err';btn.disabled=false}
+    })
+    .catch(function(){btn.innerHTML='Error';btn.className='conv-btn conv-upd err';btn.disabled=false})
+}
+
+function buildCss(){
+  var lines=Object.keys(cssVarMap).map(function(n){return'  '+n+': '+cssVarMap[n].value+';'})
+  return':root {'+NL+lines.join(NL)+NL+'}'
+}
+window.ccss=function(){
+  navigator.clipboard.writeText(buildCss()).then(function(){
+    var b=document.getElementById('css-cpbtn')
+    if(!b)return
+    b.textContent='Copied!'
+    b.classList.add('ok')
+    setTimeout(function(){b.textContent='Copy CSS';b.classList.remove('ok')},1500)
+  })
+}
+window.cp=function(){
+  if(sel<0)return
+  navigator.clipboard.writeText(buildJsx(bps[sel])).then(function(){
+    var b=document.getElementById('cpbtn')
+    if(!b)return
+    b.textContent='Copied!'
+    b.classList.add('ok')
+    setTimeout(function(){b.textContent='Copy JSX';b.classList.remove('ok')},1500)
+  })
+}
+window.ins=function(){
+  if(sel<0)return
+  var bp=bps[sel]
+  var st=document.getElementById('ins-st')
+  if(st){st.textContent='Inserting...';st.className='ins-st'}
+  var url,body
+  if(insertTarget){
+    url='/_davaux/insert-after'
+    body=JSON.stringify({page:pg.split('?')[0],tag:insertTarget.name||insertTarget.tag,instanceIndex:insertTarget.instanceIndex,newJsx:buildJsx(bp),imports:bp.imports||{}})
+  }else{
+    url='/_davaux/insert'
+    body=JSON.stringify({page:pg.split('?')[0],jsx:buildJsx(bp),imports:bp.imports||{}})
+  }
+  fetch(url,{
+    method:'POST',
+    headers:{'Content-Type':'application/json'},
+    body:body
+  })
+  .then(function(r){return r.json()})
+  .then(function(res){
+    var st2=document.getElementById('ins-st')
+    if(!st2)return
+    if(res.inserted){
+      st2.textContent=res.warning?res.warning:'Inserted into '+res.file
+      st2.className='ins-st '+(res.warning?'warn':'ok')
+      var b=document.getElementById('ibtn')
+      if(b){b.textContent='Inserted!';b.classList.add('ok');setTimeout(function(){b.textContent='Insert into page';b.classList.remove('ok')},2000)}
+    }else{
+      st2.textContent=res.error
+      st2.className='ins-st err'
+    }
+  })
+  .catch(function(e){
+    var st3=document.getElementById('ins-st')
+    if(st3){st3.textContent='Request failed';st3.className='ins-st err'}
+  })
+}
+window.remComp=function(name,instanceIndex){
+  if(!name)return
+  var st=document.getElementById('rem-st')
+  if(st){st.textContent='Removing...';st.className='ins-st'}
+  fetch('/_davaux/remove',{
+    method:'POST',headers:{'Content-Type':'application/json'},
+    body:JSON.stringify({page:pg.split('?')[0],component:name,instanceIndex:instanceIndex??0})
+  })
+  .then(function(r){return r.json()})
+  .then(function(res){
+    var s=document.getElementById('rem-st');if(!s)return
+    if(res.removed){
+      s.textContent='Removed from '+res.file
+      s.className='ins-st ok'
+      var rb=document.querySelector('.rem-btn')
+      if(rb){rb.disabled=true;rb.textContent='Removed'}
+    }else{
+      s.textContent=res.error
+      s.className='ins-st err'
+    }
+  })
+  .catch(function(){var s=document.getElementById('rem-st');if(s){s.textContent='Request failed';s.className='ins-st err'}})
+}
+function esc(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')}
+})()
+</script>
+</body>
+</html>`
+
+type ClientError = {
+  text: string
+  file?: string
+  line?: number
+  column?: number
+  lineText?: string
+}
+
+const reloadPlugin: Plugin = {
+  name: 'davaux-reload',
+  setup(build) {
+    build.onEnd((result) => {
+      if (result.errors.length > 0) {
+        console.error(`\n[davaux] Build error:\n${formatBuildErrors(result.errors)}`)
+        if (serverReady) {
+          const payload: ClientError[] = result.errors.map((e) => ({
+            text: e.text,
+            file: e.location?.file,
+            line: e.location?.line,
+            column: e.location?.column,
+            lineText: e.location?.lineText?.trim(),
+          }))
+          sendToClients(`error:${JSON.stringify(payload)}`)
+        }
+        return
+      }
+      scheduleReload()
+    })
+  },
+}
+
+// ─── Dev server ───────────────────────────────────────────────────────────────
+
+export interface DevOptions {
+  cwd: string
+  port?: number
+  hostname?: string
+  routesDir?: string
+  publicDir?: string
+  islandsDir?: string
+  /** Path to the client-side entry file for custom client code. Default: <cwd>/src/client.ts */
+  clientEntry?: string
+  /** Path aliases forwarded to esbuild `alias` in every build context. Same glob syntax as tsconfig `paths`. */
+  paths?: Record<string, string>
+  /** Davaux plugins from davaux.config.ts — contribute esbuild transforms and scanner extensions. */
+  plugins?: DavauxPlugin[]
+  /**
+   * Additional packages to exclude from esbuild bundling. Merged with the default
+   * `['node:*', 'davaux']` externals. Useful for native or CJS-only packages.
+   */
+  external?: string[]
+  /** Absolute path to `src/middleware.ts` if it exists — compiled and run before route matching. */
+  middlewareSrc?: string
+  /** Visual editor configuration from davaux.config.ts. */
+  editor?: import('../config.js').EditorConfig
+}
+
+export async function startDev(options: DevOptions): Promise<void> {
+  const {
+    cwd,
+    port = 3000,
+    hostname = 'localhost',
+    routesDir = join(cwd, 'src', 'routes'),
+    publicDir = join(cwd, 'public'),
+    islandsDir = join(cwd, 'src', 'islands'),
+    clientEntry = join(cwd, 'src', 'client.ts'),
+    paths,
+    plugins: davauxPlugins = [],
+    external: userExternal = [],
+    middlewareSrc,
+    editor: editorConfig,
+  } = options
+  const editorEnabled = editorConfig?.enabled === true
+
+  const serverExternal = ['node:*', 'davaux', ...userExternal]
+
+  const userAlias = pathsToAlias(paths ?? {})
+  const extraPlugins = collectEsbuildPlugins(davauxPlugins)
+  const scannerSuffixes = collectScannerSuffixes(davauxPlugins)
+
+  const dauxDir = join(cwd, '.davaux')
+  const outDir = join(dauxDir, 'routes')
+  const clientOutFile = join(dauxDir, 'client.js')
+  const islandsOutFile = join(dauxDir, 'islands.js')
+  const stylesOutFile = join(dauxDir, 'styles.css')
+  const hasClient = existsSync(clientEntry)
+
+  function toCompiledPath(src: string): string {
+    return join(outDir, relative(routesDir, src).replace(/\.(tsx?|jsx?|mdx?)$/, '.js'))
+  }
+  function toCompiledDir(srcDir: string): string {
+    return join(outDir, relative(routesDir, srcDir))
+  }
+
+  function collectSourceFiles(scan: ScanResult): string[] {
+    return [
+      ...scan.routes.map((r) => r.filePath),
+      ...scan.layouts.map((l) => l.filePath),
+      ...scan.middlewares.map((m) => m.filePath),
+      ...(scan.errorPage ? [scan.errorPage] : []),
+    ]
+  }
+
+  function makeApp(scan: ScanResult, islandFiles: IslandFile[]) {
+    const injectedScripts: string[] = []
+    if (islandFiles.length > 0) injectedScripts.push('/_davaux/islands.js')
+    if (hasClient) injectedScripts.push('/_davaux/client.js')
+    // src/middleware.ts compiles to .davaux/middleware.js (one level above the routes outDir)
+    const appMiddlewarePath = middlewareSrc ? join(dauxDir, 'middleware.js') : undefined
+    return buildApp(
+      {
+        routes: scan.routes.map((r) => ({ ...r, filePath: toCompiledPath(r.filePath) })),
+        layouts: scan.layouts.map((l) => ({
+          filePath: toCompiledPath(l.filePath),
+          dirPath: toCompiledDir(l.dirPath),
+        })),
+        middlewares: scan.middlewares.map((m) => ({
+          filePath: toCompiledPath(m.filePath),
+          dirPath: toCompiledDir(m.dirPath),
+        })),
+        errorPage: scan.errorPage ? toCompiledPath(scan.errorPage) : undefined,
+      },
+      true,
+      injectedScripts,
+      ['/_davaux/styles.css'],
+      appMiddlewarePath,
+      '',
+      editorEnabled,
+    )
+  }
+
+  // Mutable state — updated on structural rebuild (file add/remove)
+  let scan = await scanRoutes(routesDir, scannerSuffixes)
+  let islands = await scanIslands(islandsDir)
+  let sourceFiles = collectSourceFiles(scan)
+
+  if (sourceFiles.length === 0) {
+    console.warn('[davaux] No routes found in', routesDir)
+  }
+
+  // Routes context — server JSX, islands aliased to server stubs + auto-wrapped
+  let ctx = await context({
+    entryPoints: sourceFiles,
+    outdir: outDir,
+    outbase: routesDir,
+    format: 'esm',
+    platform: 'node',
+    target: 'node22',
+    bundle: true,
+    external: serverExternal,
+    jsx: 'automatic',
+    jsxImportSource: 'davaux/oml',
+    sourcemap: 'inline',
+    alias: { ...userAlias, 'davaux/client': 'davaux/signal' },
+    plugins: [
+      reloadPlugin,
+      islandServerPlugin(islandsDir),
+      cssCollectorPlugin(dauxDir, stylesOutFile),
+      ...extraPlugins,
+    ],
+  })
+  await ctx.rebuild()
+
+  // Islands client context — client JSX, one bundle with all islands + hydration
+  let islandsCtx: Awaited<ReturnType<typeof context>> | undefined
+  if (islands.length > 0) {
+    islandsCtx = await context({
+      stdin: {
+        contents: generateIslandsEntry(islands),
+        loader: 'ts',
+        resolveDir: cwd,
+      },
+      outfile: islandsOutFile,
+      format: 'esm',
+      platform: 'browser',
+      target: 'es2022',
+      bundle: true,
+      jsx: 'automatic',
+      jsxImportSource: 'davaux/client',
+      sourcemap: 'inline',
+      alias: userAlias,
+      tsconfigRaw: JSON.stringify({
+        compilerOptions: { jsx: 'react-jsx', jsxImportSource: 'davaux/client' },
+      }),
+      plugins: [reloadPlugin, cssCollectorPlugin(dauxDir, stylesOutFile), ...extraPlugins],
+    })
+    await islandsCtx.rebuild()
+  }
+
+  // Optional user-authored client bundle (never needs a structural rebuild)
+  let clientCtx: Awaited<ReturnType<typeof context>> | undefined
+  if (hasClient) {
+    clientCtx = await context({
+      entryPoints: [clientEntry],
+      outfile: clientOutFile,
+      format: 'esm',
+      platform: 'browser',
+      target: 'es2022',
+      bundle: true,
+      jsx: 'automatic',
+      jsxImportSource: 'davaux/client',
+      sourcemap: 'inline',
+      alias: userAlias,
+      tsconfigRaw: JSON.stringify({
+        compilerOptions: { jsx: 'react-jsx', jsxImportSource: 'davaux/client' },
+      }),
+      plugins: [reloadPlugin, ...extraPlugins],
+    })
+    await clientCtx.rebuild()
+  }
+
+  // src/middleware.ts — compiled separately so it lands at .davaux/middleware.js
+  // (not in the routes context, which uses outbase: src/routes and would mis-place it)
+  const middlewareOutFile = join(dauxDir, 'middleware.js')
+  let middlewareCtx: Awaited<ReturnType<typeof context>> | undefined
+  if (middlewareSrc) {
+    middlewareCtx = await context({
+      entryPoints: [middlewareSrc],
+      outfile: middlewareOutFile,
+      format: 'esm',
+      platform: 'node',
+      target: 'node22',
+      bundle: true,
+      external: serverExternal,
+      jsx: 'automatic',
+      jsxImportSource: 'davaux',
+      sourcemap: 'inline',
+      alias: userAlias,
+      plugins: [reloadPlugin, ...extraPlugins],
+    })
+    await middlewareCtx.rebuild()
+  }
+
+  // Mutable app — hot-swapped by the structural rebuild without restarting the server
+  let app = makeApp(scan, islands)
+  const staticHandler = serveStatic(publicDir)
+
+  startServer(() => app, {
+    port,
+    hostname,
+    onRequest: async (req, res) => {
+      const path = req.url?.split('?')[0]
+
+      // SSE live reload stream
+      if (path === '/_davaux/livereload') {
+        res.writeHead(200, {
+          'Content-Type': 'text/event-stream',
+          'Cache-Control': 'no-cache',
+          Connection: 'keep-alive',
+        })
+        res.write('\n')
+        sseClients.add(res)
+        req.on('close', () => sseClients.delete(res))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/livereload.js') {
+        res.writeHead(200, { 'Content-Type': 'application/javascript' })
+        res.end(LIVERELOAD_SCRIPT)
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/livereload-worker.js') {
+        res.writeHead(200, { 'Content-Type': 'application/javascript' })
+        res.end(SHARED_WORKER_SCRIPT)
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/partial-updates.js') {
+        res.writeHead(200, { 'Content-Type': 'application/javascript' })
+        res.end(getPartialUpdatesScript())
+        return Promise.resolve(true)
+      }
+
+      // Security gate — editor endpoints require editor.enabled: true.
+      // Infrastructure paths (livereload, styles, islands, client) are always served.
+      if (path?.startsWith('/_davaux/') && !editorEnabled) {
+        const alwaysOn = [
+          '/_davaux/livereload',
+          '/_davaux/livereload.js',
+          '/_davaux/livereload-worker.js',
+          '/_davaux/partial-updates.js',
+          '/_davaux/styles.css',
+          '/_davaux/islands.js',
+          '/_davaux/client.js',
+        ]
+        if (!alwaysOn.includes(path)) {
+          res.writeHead(404)
+          res.end()
+          return Promise.resolve(true)
+        }
+      }
+
+      if (path === '/_davaux/inspector.js') {
+        res.writeHead(200, {
+          'Content-Type': 'application/javascript',
+          'Cache-Control': 'no-store',
+        })
+        const dvx = JSON.stringify({
+          pos: editorConfig?.badge?.position ?? 'bottom-right',
+          label: editorConfig?.badge?.label ?? 'Inspector',
+        })
+        res.end(`window.__DVX__=${dvx};\n${INSPECTOR_SCRIPT}`)
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/inspector') {
+        const url = new URL(req.url ?? '/', 'http://x').searchParams.get('url') ?? '/'
+        const node = app.devOmlStore?.get(url)
+        const pageUrl = url.split('?')[0]
+        const route = scan.routes.find((r) => r.urlPattern === pageUrl && r.type === 'page')
+        const filePath = route?.filePath ? relative(cwd, route.filePath) : null
+        const ext = route?.filePath ? extname(route.filePath) : ''
+        const fileType = ext === '.mdx' ? 'mdx' : ext === '.md' ? 'md' : 'tsx'
+        // Applicable layouts — same matching logic as findLayouts() in handler.ts
+        const layouts = route?.filePath
+          ? scan.layouts
+              .filter((l) => {
+                const d = route.filePath.replace(/[\\/][^\\/]+$/, '')
+                return d === l.dirPath || d.startsWith(`${l.dirPath}/`)
+              })
+              .sort((a, b) => b.dirPath.length - a.dirPath.length)
+              .map((l) => ({ filePath: relative(cwd, l.filePath) }))
+          : []
+        res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' })
+        res.end(
+          node !== undefined
+            ? JSON.stringify({ node, fileType, filePath, layouts })
+            : JSON.stringify({ error: 'No OML tree for this URL. Load the page first.', fileType, filePath, layouts }),
+        )
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/editor') {
+        res.writeHead(200, {
+          'Content-Type': 'text/html; charset=utf-8',
+          'Cache-Control': 'no-store',
+        })
+        const dvxEditor = JSON.stringify({ theme: editorConfig?.theme ?? 'auto' })
+        let cssContent = editorConfig?.css ?? ''
+        if (editorConfig?.cssFile) {
+          try { cssContent += readFileSync(join(cwd, editorConfig.cssFile), 'utf-8') } catch {}
+        }
+        const extras = `<script>window.__DVX_EDITOR__=${dvxEditor}</script>${cssContent ? `<style>${cssContent}</style>` : ''}`
+        res.end(EDITOR_HTML.replace('</head>', `${extras}</head>`))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/blueprints') {
+        try {
+          const entries = scanBlueprints(cwd)
+          res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' })
+          res.end(JSON.stringify(entries))
+        } catch (err) {
+          console.error('[davaux] Failed to scan blueprints:', err)
+          res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' })
+          res.end('[]')
+        }
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/get-source' && req.method === 'GET') {
+        const file = new URL(req.url ?? '/', 'http://x').searchParams.get('file') ?? ''
+        const absPath = join(cwd, file)
+        if (!file || !absPath.startsWith(`${cwd}/`)) {
+          res.writeHead(403, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ error: 'Forbidden' }))
+          return Promise.resolve(true)
+        }
+        try {
+          const content = readFileSync(absPath, 'utf-8')
+          res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' })
+          res.end(JSON.stringify({ content }))
+        } catch {
+          res.writeHead(404, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ error: 'File not found' }))
+        }
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/update-source' && req.method === 'POST') {
+        const body = await new Promise<string>((resolve) => {
+          const chunks: Buffer[] = []
+          req.on('data', (c: Buffer) => chunks.push(c))
+          req.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))
+          req.on('error', () => resolve('{}'))
+        })
+        const { file, content } = JSON.parse(body) as { file: string; content: string }
+        const absPath = join(cwd, file)
+        if (!file || !absPath.startsWith(`${cwd}/`)) {
+          res.writeHead(403, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ error: 'Forbidden' }))
+          return Promise.resolve(true)
+        }
+        writeFileSync(absPath, content, 'utf-8')
+        res.writeHead(200, { 'Content-Type': 'application/json' })
+        res.end(JSON.stringify({ ok: true }))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/get-fragment' && req.method === 'GET') {
+        const params = new URL(req.url ?? '/', 'http://x').searchParams
+        const file = params.get('file') ?? ''
+        const component = params.get('component') ?? ''
+        const instanceIndex = parseInt(params.get('instanceIndex') ?? '0', 10)
+        const absPath = join(cwd, file)
+        if (!file || !absPath.startsWith(`${cwd}/`)) {
+          res.writeHead(403, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ error: 'Forbidden' }))
+          return Promise.resolve(true)
+        }
+        const result = getComponentFragment(absPath, component, instanceIndex)
+        res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' })
+        res.end(JSON.stringify(result))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/update-fragment' && req.method === 'POST') {
+        const body = await new Promise<string>((resolve) => {
+          const chunks: Buffer[] = []
+          req.on('data', (c: Buffer) => chunks.push(c))
+          req.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))
+          req.on('error', () => resolve('{}'))
+        })
+        const { file, component, instanceIndex, content } = JSON.parse(body) as {
+          file: string; component: string; instanceIndex: number; content: string
+        }
+        const absPath = join(cwd, file)
+        if (!file || !absPath.startsWith(`${cwd}/`)) {
+          res.writeHead(403, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ error: 'Forbidden' }))
+          return Promise.resolve(true)
+        }
+        const result = replaceComponentFragment(absPath, component, instanceIndex, content)
+        res.writeHead(200, { 'Content-Type': 'application/json' })
+        res.end(JSON.stringify(result))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/get-element-fragment' && req.method === 'GET') {
+        const params = new URL(req.url ?? '/', 'http://x').searchParams
+        const file = params.get('file') ?? ''
+        const tag = params.get('tag') ?? ''
+        const instanceIndex = parseInt(params.get('instanceIndex') ?? '0', 10)
+        const absPath = join(cwd, file)
+        if (!file || !absPath.startsWith(`${cwd}/`)) {
+          res.writeHead(403, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ error: 'Forbidden' }))
+          return Promise.resolve(true)
+        }
+        const result = getElementFragment(absPath, tag, instanceIndex)
+        res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' })
+        res.end(JSON.stringify(result))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/update-element-fragment' && req.method === 'POST') {
+        const body = await new Promise<string>((resolve) => {
+          const chunks: Buffer[] = []
+          req.on('data', (c: Buffer) => chunks.push(c))
+          req.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))
+          req.on('error', () => resolve('{}'))
+        })
+        const { file, tag, instanceIndex, content } = JSON.parse(body) as {
+          file: string; tag: string; instanceIndex: number; content: string
+        }
+        const absPath = join(cwd, file)
+        if (!file || !absPath.startsWith(`${cwd}/`)) {
+          res.writeHead(403, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ error: 'Forbidden' }))
+          return Promise.resolve(true)
+        }
+        const result = replaceElementFragment(absPath, tag, instanceIndex, content)
+        res.writeHead(200, { 'Content-Type': 'application/json' })
+        res.end(JSON.stringify(result))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/routes') {
+        const pageRoutes = scan.routes
+          .filter((r) => r.type === 'page')
+          .map((r) => ({ urlPattern: r.urlPattern }))
+          .sort((a, b) => a.urlPattern.localeCompare(b.urlPattern))
+        res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' })
+        res.end(JSON.stringify(pageRoutes))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/insert' && req.method === 'POST') {
+        const body = await new Promise<string>((resolve) => {
+          const chunks: Buffer[] = []
+          req.on('data', (c: Buffer) => chunks.push(c))
+          req.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))
+          req.on('error', () => resolve('{}'))
+        })
+        const { page, jsx, imports } = JSON.parse(body) as {
+          page: string
+          jsx: string
+          imports: Record<string, string>
+        }
+        const pageUrl = (page ?? '/').split('?')[0]
+        const route = scan.routes.find((r) => r.urlPattern === pageUrl && r.type === 'page')
+        if (!route) {
+          res.writeHead(404, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ inserted: false, error: `No page route found for: ${pageUrl}` }))
+          return Promise.resolve(true)
+        }
+        const result = insertJsx(route.filePath, jsx, imports ?? {})
+        const display = result.inserted ? { ...result, file: relative(cwd, result.file) } : result
+        res.writeHead(200, { 'Content-Type': 'application/json' })
+        res.end(JSON.stringify(display))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/insert-after' && req.method === 'POST') {
+        const body = await new Promise<string>((resolve) => {
+          const chunks: Buffer[] = []
+          req.on('data', (c: Buffer) => chunks.push(c))
+          req.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))
+          req.on('error', () => resolve('{}'))
+        })
+        const { page, tag, instanceIndex, newJsx, imports } = JSON.parse(body) as {
+          page: string; tag: string; instanceIndex: number; newJsx: string
+          imports?: Record<string, string>
+        }
+        const pageUrl = (page ?? '/').split('?')[0]
+        const route = scan.routes.find((r) => r.urlPattern === pageUrl && r.type === 'page')
+        if (!route) {
+          res.writeHead(404, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ inserted: false, error: `No page route found for: ${pageUrl}` }))
+          return Promise.resolve(true)
+        }
+        const result = insertAfterElement(route.filePath, tag, instanceIndex ?? 0, newJsx, imports ?? {})
+        const display = result.inserted ? { ...result, file: relative(cwd, result.file) } : result
+        res.writeHead(200, { 'Content-Type': 'application/json' })
+        res.end(JSON.stringify(display))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/components') {
+        const qs = new URL(req.url ?? '/', 'http://x').searchParams
+        const dir = qs.get('dir') || 'src/components'
+        const absDir = dir.startsWith('/') ? dir : join(cwd, dir)
+        const blueprintsDir = join(cwd, 'src', 'blueprints')
+        try {
+          const entries = scanComponents(absDir, cwd, blueprintsDir)
+          res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' })
+          res.end(JSON.stringify(entries))
+        } catch (err) {
+          console.error('[davaux] Failed to scan components:', err)
+          res.writeHead(200, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' })
+          res.end('[]')
+        }
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/save-blueprint' && req.method === 'POST') {
+        const body = await new Promise<string>((resolve) => {
+          const chunks: Buffer[] = []
+          req.on('data', (c: Buffer) => chunks.push(c))
+          req.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))
+          req.on('error', () => resolve('{}'))
+        })
+        const { name, props, importPath } = JSON.parse(body) as {
+          name: string
+          props: Record<string, OmlPropSchema>
+          importPath?: string
+        }
+        const blueprintsDir = join(cwd, 'src', 'blueprints')
+        const imports = importPath ? { [name]: importPath } : {}
+        const result = saveBlueprint(name, props, imports, blueprintsDir)
+        res.writeHead(200, { 'Content-Type': 'application/json' })
+        res.end(JSON.stringify(result))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/update-blueprint' && req.method === 'POST') {
+        const body = await new Promise<string>((resolve) => {
+          const chunks: Buffer[] = []
+          req.on('data', (c: Buffer) => chunks.push(c))
+          req.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))
+          req.on('error', () => resolve('{}'))
+        })
+        const { id, name, props } = JSON.parse(body) as {
+          id: string
+          name: string
+          props: Record<string, OmlPropSchema>
+        }
+        const blueprintsDir = join(cwd, 'src', 'blueprints')
+        const result = updateBlueprint(id, name, props, blueprintsDir)
+        res.writeHead(200, { 'Content-Type': 'application/json' })
+        res.end(JSON.stringify(result))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/remove' && req.method === 'POST') {
+        const body = await new Promise<string>((resolve) => {
+          const chunks: Buffer[] = []
+          req.on('data', (c: Buffer) => chunks.push(c))
+          req.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))
+          req.on('error', () => resolve('{}'))
+        })
+        const { page, component, tag, instanceIndex } = JSON.parse(body) as {
+          page: string
+          component?: string
+          tag?: string
+          instanceIndex?: number
+        }
+        const pageUrl = (page ?? '/').split('?')[0]
+        const route = scan.routes.find((r) => r.urlPattern === pageUrl && r.type === 'page')
+        if (!route) {
+          res.writeHead(404, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ removed: false, error: `No page route found for: ${pageUrl}` }))
+          return Promise.resolve(true)
+        }
+        const result = tag !== undefined
+          ? removeElement(route.filePath, tag, instanceIndex ?? 0)
+          : removeJsx(route.filePath, component ?? '', instanceIndex)
+        const display = result.removed ? { ...result, file: relative(cwd, result.file) } : result
+        res.writeHead(200, { 'Content-Type': 'application/json' })
+        res.end(JSON.stringify(display))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/update-component' && req.method === 'POST') {
+        const body = await new Promise<string>((resolve) => {
+          const chunks: Buffer[] = []
+          req.on('data', (c: Buffer) => chunks.push(c))
+          req.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))
+          req.on('error', () => resolve('{}'))
+        })
+        const { page, component, jsx, instanceIndex } = JSON.parse(body) as {
+          page: string
+          component: string
+          jsx: string
+          instanceIndex?: number
+        }
+        const pageUrl = (page ?? '/').split('?')[0]
+        const route = scan.routes.find((r) => r.urlPattern === pageUrl && r.type === 'page')
+        if (!route) {
+          res.writeHead(404, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ replaced: false, error: `No page route found for: ${pageUrl}` }))
+          return Promise.resolve(true)
+        }
+        const result = replaceJsx(route.filePath, component, jsx, instanceIndex ?? 0)
+        const display = result.replaced ? { ...result, file: relative(cwd, result.file) } : result
+        res.writeHead(200, { 'Content-Type': 'application/json' })
+        res.end(JSON.stringify(display))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/update-element' && req.method === 'POST') {
+        const body = await new Promise<string>((resolve) => {
+          const chunks: Buffer[] = []
+          req.on('data', (c: Buffer) => chunks.push(c))
+          req.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))
+          req.on('error', () => resolve('{}'))
+        })
+        const { page, tag, newProps, instanceIndex, textContent } = JSON.parse(body) as {
+          page: string
+          tag: string
+          newProps: Record<string, unknown>
+          instanceIndex?: number
+          textContent?: string | null
+        }
+        if (!page || !tag) {
+          res.writeHead(400, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ replaced: false, error: 'Missing page or tag' }))
+          return Promise.resolve(true)
+        }
+        const pageUrl = (page ?? '/').split('?')[0]
+        const route = scan.routes.find((r) => r.urlPattern === pageUrl && r.type === 'page')
+        if (!route) {
+          res.writeHead(404, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ replaced: false, error: `No page route found for: ${pageUrl}` }))
+          return Promise.resolve(true)
+        }
+        const attrsResult = replaceElementAttrs(route.filePath, tag, newProps, instanceIndex ?? 0)
+        if (!attrsResult.replaced) {
+          const display = attrsResult
+          res.writeHead(200, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify(display))
+          return Promise.resolve(true)
+        }
+        if (textContent != null) {
+          const textResult = replaceTextContent(route.filePath, tag, textContent, instanceIndex ?? 0)
+          if (!textResult.replaced) {
+            res.writeHead(200, { 'Content-Type': 'application/json' })
+            res.end(JSON.stringify(textResult))
+            return Promise.resolve(true)
+          }
+        }
+        const display = { ...attrsResult, file: relative(cwd, attrsResult.file) }
+        res.writeHead(200, { 'Content-Type': 'application/json' })
+        res.end(JSON.stringify(display))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/update-comp-props' && req.method === 'POST') {
+        const body = await new Promise<string>((resolve) => {
+          const chunks: Buffer[] = []
+          req.on('data', (c: Buffer) => chunks.push(c))
+          req.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))
+          req.on('error', () => resolve('{}'))
+        })
+        const { page, component, newProps, instanceIndex, childrenText } = JSON.parse(body) as {
+          page: string
+          component: string
+          newProps: Record<string, unknown>
+          instanceIndex?: number
+          childrenText?: string | null
+        }
+        const pageUrl = (page ?? '/').split('?')[0]
+        const route = scan.routes.find((r) => r.urlPattern === pageUrl && r.type === 'page')
+        if (!route) {
+          res.writeHead(404, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ replaced: false, error: `No page route found for: ${pageUrl}` }))
+          return Promise.resolve(true)
+        }
+        const attrsResult = replaceElementAttrs(route.filePath, component, newProps ?? {}, instanceIndex ?? 0)
+        if (!attrsResult.replaced) {
+          res.writeHead(200, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify(attrsResult))
+          return Promise.resolve(true)
+        }
+        if (childrenText != null) {
+          replaceTextContent(route.filePath, component, childrenText, instanceIndex ?? 0)
+        }
+        const display = { ...attrsResult, file: relative(cwd, attrsResult.file) }
+        res.writeHead(200, { 'Content-Type': 'application/json' })
+        res.end(JSON.stringify(display))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/move' && req.method === 'POST') {
+        const body = await new Promise<string>((resolve) => {
+          const chunks: Buffer[] = []
+          req.on('data', (c: Buffer) => chunks.push(c))
+          req.on('end', () => resolve(Buffer.concat(chunks).toString('utf-8')))
+          req.on('error', () => resolve('{}'))
+        })
+        const { page, name, isComponent, instanceIndex, direction } = JSON.parse(body) as {
+          page: string
+          name: string
+          isComponent: boolean
+          instanceIndex?: number
+          direction: 'up' | 'down'
+        }
+        if (!page || !name || !direction) {
+          res.writeHead(400, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ moved: false, error: 'Missing required fields' }))
+          return Promise.resolve(true)
+        }
+        const pageUrl = (page ?? '/').split('?')[0]
+        const route = scan.routes.find((r) => r.urlPattern === pageUrl && r.type === 'page')
+        if (!route) {
+          res.writeHead(404, { 'Content-Type': 'application/json' })
+          res.end(JSON.stringify({ moved: false, error: `No page route found for: ${pageUrl}` }))
+          return Promise.resolve(true)
+        }
+        const result = moveNode(route.filePath, name, isComponent ?? false, instanceIndex ?? 0, direction)
+        const display = result.moved ? { ...result, file: relative(cwd, result.file) } : result
+        res.writeHead(200, { 'Content-Type': 'application/json' })
+        res.end(JSON.stringify(display))
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/styles.css') {
+        res.writeHead(200, { 'Content-Type': 'text/css' })
+        if (existsSync(stylesOutFile)) {
+          createReadStream(stylesOutFile).pipe(res)
+        } else {
+          res.end()
+        }
+        return Promise.resolve(true)
+      }
+
+      if (path === '/_davaux/islands.js') {
+        res.writeHead(200, { 'Content-Type': 'application/javascript' })
+        createReadStream(islandsOutFile).pipe(res)
+        return Promise.resolve(true)
+      }
+
+      if (hasClient && path === '/_davaux/client.js') {
+        res.writeHead(200, { 'Content-Type': 'application/javascript' })
+        createReadStream(clientOutFile).pipe(res)
+        return Promise.resolve(true)
+      }
+
+      if (staticHandler) return Promise.resolve(staticHandler(req, res))
+      return Promise.resolve(false)
+    },
+  })
+
+  serverReady = true
+
+  // ─── Config hot reload ────────────────────────────────────────────────────────
+  const CONFIG_NAMES = ['davaux.config.ts', 'davaux.config.js', 'davaux.config.mjs']
+  const activeConfigFile = CONFIG_NAMES.map((f) => join(cwd, f)).find(existsSync)
+
+  if (activeConfigFile) {
+    let configReloadTimer: ReturnType<typeof setTimeout> | undefined
+    fsWatch(activeConfigFile, () => {
+      if (configReloadTimer) clearTimeout(configReloadTimer)
+      configReloadTimer = setTimeout(async () => {
+        configReloadTimer = undefined
+        try {
+          app = makeApp(scan, islands)
+          console.log('[davaux] Config reloaded')
+          scheduleReload()
+        } catch (err) {
+          console.error('[davaux] Failed to reload config:', err)
+        }
+      }, 300)
+    })
+  }
+
+  await ctx.watch()
+  if (islandsCtx) await islandsCtx.watch()
+  if (clientCtx) await clientCtx.watch()
+  if (middlewareCtx) await middlewareCtx.watch()
+  console.log('  Watching for changes...')
+
+  // ─── Structural rebuild on file addition / removal ────────────────────────
+  // esbuild watch() only tracks changes to existing entry points. Adding or
+  // removing a route/island file requires disposing the old context and
+  // creating a new one with the updated entry list.
+
+  let isRebuilding = false
+  let rebuildTimer: ReturnType<typeof setTimeout> | undefined
+
+  async function handleStructuralChange(): Promise<void> {
+    const newScan = await scanRoutes(routesDir, scannerSuffixes)
+    const newIslands = await scanIslands(islandsDir)
+    const newSourceFiles = collectSourceFiles(newScan)
+
+    // Skip if the file set is identical
+    const same =
+      newSourceFiles.length === sourceFiles.length &&
+      newSourceFiles.every((f) => sourceFiles.includes(f)) &&
+      newIslands.length === islands.length &&
+      newIslands.every((i) => islands.some((j) => j.filePath === i.filePath))
+    if (same) return
+
+    sourceFiles = newSourceFiles
+    scan = newScan
+    islands = newIslands
+
+    ctx = await context({
+      entryPoints: sourceFiles,
+      outdir: outDir,
+      outbase: routesDir,
+      format: 'esm',
+      platform: 'node',
+      target: 'node22',
+      bundle: true,
+      external: serverExternal,
+      jsx: 'automatic',
+      jsxImportSource: 'davaux/oml',
+      sourcemap: 'inline',
+      alias: { ...userAlias, 'davaux/client': 'davaux/signal' },
+      plugins: [
+        reloadPlugin,
+        islandServerPlugin(islandsDir),
+        cssCollectorPlugin(dauxDir, stylesOutFile),
+        ...extraPlugins,
+      ],
+    })
+    await ctx.rebuild()
+
+    if (islands.length > 0) {
+      islandsCtx = await context({
+        stdin: {
+          contents: generateIslandsEntry(islands),
+          loader: 'ts',
+          resolveDir: cwd,
+        },
+        outfile: islandsOutFile,
+        format: 'esm',
+        platform: 'browser',
+        target: 'es2022',
+        bundle: true,
+        jsx: 'automatic',
+        jsxImportSource: 'davaux/client',
+        sourcemap: 'inline',
+        alias: userAlias,
+        tsconfigRaw: JSON.stringify({
+          compilerOptions: { jsx: 'react-jsx', jsxImportSource: 'davaux/client' },
+        }),
+        plugins: [reloadPlugin, cssCollectorPlugin(dauxDir, stylesOutFile), ...extraPlugins],
+      })
+      await islandsCtx.rebuild()
+    } else {
+      islandsCtx = undefined
+    }
+
+    app = makeApp(scan, islands)
+
+    await ctx.watch()
+    if (islandsCtx) await islandsCtx.watch()
+
+    scheduleReload()
+    console.log('[davaux] Routes updated')
+  }
+
+  function onStructuralChange(): void {
+    // Immediately stop esbuild's watch so it cannot attempt a rebuild with the
+    // now-stale entry list (e.g. an entry point file that was just deleted).
+    // Errors are swallowed — the context may already be disposed.
+    ctx.dispose().catch(() => {})
+    islandsCtx?.dispose().catch(() => {})
+
+    if (rebuildTimer) clearTimeout(rebuildTimer)
+    rebuildTimer = setTimeout(() => {
+      if (isRebuilding) return
+      isRebuilding = true
+      handleStructuralChange()
+        .catch((err) => console.error('[davaux] Route rebuild failed:', err))
+        .finally(() => {
+          isRebuilding = false
+        })
+    }, 200)
+  }
+
+  fsWatch(routesDir, { recursive: true }, (event, filename) => {
+    if (event !== 'rename' || !filename) return
+    if (!/\.(tsx?|jsx?|mdx?)$/.test(filename)) return
+    onStructuralChange()
+  })
+
+  if (existsSync(islandsDir)) {
+    fsWatch(islandsDir, { recursive: true }, (event, filename) => {
+      if (event !== 'rename' || !filename) return
+      if (!/\.(tsx?|jsx?|mdx?)$/.test(filename)) return
+      onStructuralChange()
+    })
+  }
+
+  startTypeChecker(cwd)
+}
+
+// ─── Type checker ─────────────────────────────────────────────────────────────
+
+function startTypeChecker(cwd: string): void {
+  const tscBin = join(cwd, 'node_modules', '.bin', 'tsc')
+  if (!existsSync(tscBin) || !existsSync(join(cwd, 'tsconfig.json'))) return
+
+  const proc = spawn(tscBin, ['--noEmit', '--watch', '--preserveWatchOutput'], {
+    cwd,
+    stdio: ['ignore', 'inherit', 'inherit'],
+  })
+  proc.on('error', () => {})
+  process.on('exit', () => proc.kill())
+}