aiplang 2.10.2 → 2.10.4

package/bin/aiplang.js

@@ -5,7 +5,7 @@ const fs   = require('fs')
 const path = require('path')
 const http = require('http')
 
-const VERSION     = '2.10.2'
+const VERSION     = '2.10.4'
 const RUNTIME_DIR = path.join(__dirname, '..', 'runtime')
 const cmd         = process.argv[2]
 const args        = process.argv.slice(3)
@@ -768,6 +768,42 @@ function parseBlock(line) {
     return{kind:'if',cond:line.slice(3,bi).trim(),inner:line.slice(bi+1,line.lastIndexOf('}')).trim(),extraClass,animate}
   }
 
+  // ── chart{} — data visualization ───────────────────────────────
+  if(line.startsWith('chart{') || line.startsWith('chart ')) {
+    const bi=line.indexOf('{'); if(bi===-1) return null
+    const body=line.slice(bi+1,line.lastIndexOf('}')).trim()
+    const parts=body.split('|').map(x=>x.trim())
+    const type=parts.find(p=>['bar','line','pie','area','donut'].includes(p))||'bar'
+    const binding=parts.find(p=>p.startsWith('@'))||''
+    const labels=parts.find(p=>p.startsWith('x:'))?.slice(2)||'label'
+    const values=parts.find(p=>p.startsWith('y:'))?.slice(2)||'value'
+    const title=parts.find(p=>!p.startsWith('@')&&!['bar','line','pie','area','donut'].includes(p)&&!p.startsWith('x:')&&!p.startsWith('y:'))||''
+    return{kind:'chart',type,binding,labels,values,title,extraClass,animate,variant,style}
+  }
+
+  // ── kanban{} — drag-and-drop board ───────────────────────────────
+  if(line.startsWith('kanban{') || line.startsWith('kanban ')) {
+    const bi=line.indexOf('{'); if(bi===-1) return null
+    const body=line.slice(bi+1,line.lastIndexOf('}')).trim()
+    const parts=body.split('|').map(x=>x.trim())
+    const binding=parts.find(p=>p.startsWith('@'))||''
+    const cols=parts.filter(p=>!p.startsWith('@')&&!p.startsWith('status:'))
+    const statusField=parts.find(p=>p.startsWith('status:'))?.slice(7)||'status'
+    const updatePath=parts.find(p=>p.startsWith('PUT ')||p.startsWith('PATCH '))||''
+    return{kind:'kanban',binding,cols,statusField,updatePath,extraClass,animate,style}
+  }
+
+  // ── editor{} — rich text editor ──────────────────────────────────
+  if(line.startsWith('editor{') || line.startsWith('editor ')) {
+    const bi=line.indexOf('{'); if(bi===-1) return null
+    const body=line.slice(bi+1,line.lastIndexOf('}')).trim()
+    const parts=body.split('|').map(x=>x.trim())
+    const name=parts[0]||'content'
+    const placeholder=parts[1]||'Start writing...'
+    const submitPath=parts.find(p=>p.startsWith('POST ')||p.startsWith('PUT '))||''
+    return{kind:'editor',name,placeholder,submitPath,extraClass,animate,style}
+  }
+
   // ── each @list { template } — loop como React .map() ────────
   if(line.startsWith('each ')) {
     const bi=line.indexOf('{');if(bi===-1) return null
@@ -824,7 +860,7 @@ function applyMods(html, b) {
 function renderPage(page, allPages) {
   const needsJS=page.queries.length>0||page.blocks.some(b=>['table','list','form','if','btn','select','faq'].includes(b.kind))
   const body=page.blocks.map(b=>{try{return applyMods(renderBlock(b,page),b)}catch(e){console.error('[aiplang] Block render error:',b.kind,e.message);return ''}}).join('')
-  const config=needsJS?JSON.stringify({id:page.id,theme:page.theme,routes:allPages.map(p=>p.route),state:page.state,queries:page.queries}):''
+  const config=needsJS?JSON.stringify({id:page.id,theme:page.theme,routes:allPages.map(p=>p.route),state:page.state,queries:page.queries,stores:page.stores||[],computed:page.computed||{}}):''
   const hydrate=needsJS?`\n<script>window.__AIPLANG_PAGE__=${config};</script>\n<script src="./aiplang-hydrate.js" defer></script>`:''
   const customVars=page.customTheme?genCustomThemeVars(page.customTheme):''
   const themeVarCSS=page.themeVars?genThemeVarCSS(page.themeVars):''
@@ -875,12 +911,55 @@ function renderBlock(b, page) {
     case 'badge':       return `<div class="fx-badge-row"><span class="fx-badge-tag">${esc(b.content||'')}</span></div>\n`
     case 'card':        return rCardBlock(b)
     case 'cols':        return rColsBlock(b)
+    case 'chart':       return rChart(b)
+    case 'kanban':      return rKanban(b)
+    case 'editor':      return rEditor(b)
     case 'each':        return `<div class="fx-each fx-each-${b.variant||'list'}" data-fx-each="${esc(b.binding||'')}" data-fx-tpl="${esc(b.tpl||'')}"${b.style?` style="${b.style.replace(/,/g,';')}"`:''}>\n<div class="fx-each-empty fx-td-empty">Loading...</div></div>\n`
     case 'if':          return `<div class="fx-if-wrap" data-fx-if="${esc(b.cond)}" style="display:none"></div>\n`
     default: return ''
   }
 }
 
+// ── Chart — lazy-loads Chart.js from CDN ────────────────────────
+function rChart(b) {
+  const id = 'chart_' + Math.random().toString(36).slice(2,8)
+  const binding = b.binding || ''
+  const style = b.style ? ` style="${b.style.replace(/,/g,';')}"` : ''
+  return `<div class="fx-chart-wrap"${style}>
+  ${b.title ? `<div class="fx-chart-title">${esc(b.title)}</div>` : ''}
+  <canvas id="${id}" class="fx-chart" data-fx-chart="${esc(binding)}" data-chart-type="${esc(b.type||'bar')}" data-chart-labels="${esc(b.labels||'label')}" data-chart-values="${esc(b.values||'value')}"></canvas>
+</div>\n`
+}
+
+// ── Kanban — drag-and-drop board ─────────────────────────────────
+function rKanban(b) {
+  const cols = (b.cols||['Todo','In Progress','Done'])
+  const colsHtml = cols.map(col => `
+    <div class="fx-kanban-col" data-col="${esc(col)}">
+      <div class="fx-kanban-col-title">${esc(col)}</div>
+      <div class="fx-kanban-cards" data-status="${esc(col)}"></div>
+    </div>`).join('')
+  const style = b.style ? ` style="${b.style.replace(/,/g,';')}"` : ''
+  return `<div class="fx-kanban" data-fx-kanban="${esc(b.binding||'')}" data-status-field="${esc(b.statusField||'status')}" data-update-path="${esc(b.updatePath||'')}"${style}>${colsHtml}</div>\n`
+}
+
+// ── Rich text editor ──────────────────────────────────────────────
+function rEditor(b) {
+  const style = b.style ? ` style="${b.style.replace(/,/g,';')}"` : ''
+  return `<div class="fx-editor-wrap"${style}>
+  <div class="fx-editor-toolbar">
+    <button type="button" onclick="document.execCommand('bold')" class="fx-editor-btn" title="Bold"><b>B</b></button>
+    <button type="button" onclick="document.execCommand('italic')" class="fx-editor-btn" title="Italic"><i>I</i></button>
+    <button type="button" onclick="document.execCommand('underline')" class="fx-editor-btn" title="Underline"><u>U</u></button>
+    <button type="button" onclick="document.execCommand('insertUnorderedList')" class="fx-editor-btn" title="List">≡</button>
+    <button type="button" onclick="document.execCommand('createLink',false,prompt('URL:'))" class="fx-editor-btn" title="Link">🔗</button>
+    ${b.submitPath ? `<button type="button" class="fx-editor-save fx-btn" data-editor-save="${esc(b.submitPath)}" data-editor-field="${esc(b.name||'content')}">Save</button>` : ''}
+  </div>
+  <div class="fx-editor" contenteditable="true" data-fx-editor="${esc(b.name||'content')}" placeholder="${esc(b.placeholder||'Start writing...')}"></div>
+  <input type="hidden" name="${esc(b.name||'content')}" class="fx-editor-hidden">
+</div>\n`
+}
+
 function rCardBlock(b) {
   const img=b.img?`<img src="${esc(b.img)}" class="fx-card-img" alt="${esc(b.title||'')}" loading="lazy">`:'';
   const badge=b.badge?`<span class="fx-card-badge">${esc(b.badge)}</span>`:'';
@@ -1129,6 +1208,9 @@ function css(theme) {
 .fx-pricing-compact{border-radius:.875rem;padding:1.25rem;display:flex;align-items:center;gap:1rem;border:1px solid rgba(255,255,255,.08)}
 .fx-pricing-price-sm{font-size:1.5rem;font-weight:800;letter-spacing:-.04em}
 .fx-grid-numbered>.fx-card{counter-increment:card-counter}
+.fx-chart-wrap{padding:1rem 2.5rem;position:relative}.fx-chart-title{font-family:monospace;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:#475569;margin-bottom:.75rem}.fx-chart{max-height:320px}
+.fx-kanban{display:flex;gap:1rem;padding:1rem 2.5rem;overflow-x:auto;align-items:flex-start}.fx-kanban-col{flex:0 0 280px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:.875rem;padding:1rem}.fx-kanban-col-title{font-family:monospace;font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#64748b;margin-bottom:.875rem}.fx-kanban-cards{min-height:80px;display:flex;flex-direction:column;gap:.5rem}.fx-kanban-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:.5rem;padding:.75rem;cursor:grab;font-size:.8125rem;line-height:1.5;transition:transform .15s,box-shadow .15s}.fx-kanban-card:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.3)}.fx-kanban-card.dragging{opacity:.5;cursor:grabbing}
+.fx-editor-wrap{padding:.75rem 2.5rem}.fx-editor-toolbar{display:flex;gap:.25rem;margin-bottom:.5rem;flex-wrap:wrap}.fx-editor-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#e2e8f0;border-radius:.375rem;padding:.25rem .625rem;cursor:pointer;font-size:.8125rem;font-family:inherit;transition:background .1s}.fx-editor-btn:hover{background:rgba(255,255,255,.12)}.fx-editor{min-height:160px;padding:1rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:.625rem;color:#e2e8f0;font-size:.875rem;line-height:1.7;outline:none}.fx-editor:empty::before{content:attr(placeholder);color:#475569;pointer-events:none}.fx-editor-save{margin-left:auto}
 .fx-grid-numbered>.fx-card::before{content:counter(card-counter,decimal-leading-zero);font-size:2rem;font-weight:900;opacity:.15;font-family:monospace;line-height:1}
 .fx-grid-bordered>.fx-card{border:1px solid rgba(255,255,255,.08)}@keyframes fx-fade-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}@keyframes fx-fade-in{from{opacity:0}to{opacity:1}}@keyframes fx-slide-left{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}@keyframes fx-slide-right{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}@keyframes fx-zoom-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fx-blur-in{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}.fx-anim-fade-up{animation:fx-fade-up .6s cubic-bezier(.4,0,.2,1) both}.fx-anim-fade-in{animation:fx-fade-in .6s ease both}.fx-anim-slide-left{animation:fx-slide-left .6s cubic-bezier(.4,0,.2,1) both}.fx-anim-slide-right{animation:fx-slide-right .6s cubic-bezier(.4,0,.2,1) both}.fx-anim-zoom-in{animation:fx-zoom-in .5s cubic-bezier(.4,0,.2,1) both}.fx-anim-blur-in{animation:fx-blur-in .7s ease both}.fx-anim-stagger>.fx-card:nth-child(1){animation:fx-fade-up .5s 0s both}.fx-anim-stagger>.fx-card:nth-child(2){animation:fx-fade-up .5s .1s both}.fx-anim-stagger>.fx-card:nth-child(3){animation:fx-fade-up .5s .2s both}.fx-anim-stagger>.fx-card:nth-child(4){animation:fx-fade-up .5s .3s both}.fx-anim-stagger>.fx-card:nth-child(5){animation:fx-fade-up .5s .4s both}.fx-anim-stagger>.fx-card:nth-child(6){animation:fx-fade-up .5s .5s both}`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aiplang",
-  "version": "2.10.2",
+  "version": "2.10.4",
   "description": "AI-first web language. One .aip file = complete app. Frontend + backend + database + auth.",
   "keywords": [
     "aiplang",

package/runtime/aiplang-hydrate.js

@@ -6,21 +6,54 @@
 const cfg = window.__AIPLANG_PAGE__
 if (!cfg) return
 
+// ── Global Store — cross-page state (like React Context / Zustand) ─
+const _STORE_KEY = 'aiplang_store_v1'
+const _globalStore = (() => {
+  try { return JSON.parse(sessionStorage.getItem(_STORE_KEY) || '{}') } catch { return {} }
+})()
+function syncStore(key, value) {
+  _globalStore[key] = value
+  try { sessionStorage.setItem(_STORE_KEY, JSON.stringify(_globalStore)) } catch {}
+  try { new BroadcastChannel(_STORE_KEY).postMessage({ key, value }) } catch {}
+}
+
+// ── Page-level State ─────────────────────────────────────────────
 const _state = {}
 const _watchers = {}
+const _storeKeys = new Set((cfg.stores || []).map(s => s.key))
 
-for (const [k, v] of Object.entries(cfg.state || {})) {
-  try { _state[k] = JSON.parse(v) } catch { _state[k] = v }
+// Bootstrap state: SSR data > global store > page state declarations
+const _boot = { ...(window.__SSR_DATA__ || {}), ..._globalStore }
+for (const [k, v] of Object.entries({ ...(cfg.state || {}), ..._boot })) {
+  try { _state[k] = typeof v === 'string' && (v.startsWith('[') || v.startsWith('{') || v === 'true' || v === 'false' || !isNaN(v)) ? JSON.parse(v) : v } catch { _state[k] = v }
 }
 
 function get(key) { return _state[key] }
 
-function set(key, value) {
-  if (JSON.stringify(_state[key]) === JSON.stringify(value)) return
+function set(key, value, _persist) {
+  // Fast equality check: primitives first (avoid JSON.stringify for numbers/strings)
+  const old = _state[key]
+  if (old === value) return
+  if (typeof value !== 'object' && old === value) return
+  if (typeof value === 'object' && value !== null && typeof old === 'object' && old !== null) {
+    // Only deep check for objects/arrays — skip if different length (fast exit)
+    if (Array.isArray(value) && Array.isArray(old) && value.length !== old.length) {
+      // Different length — definitely changed
+    } else if (JSON.stringify(old) === JSON.stringify(value)) return
+  }
   _state[key] = value
+  if (_storeKeys.has(key) || _persist) syncStore(key, value)
   notify(key)
 }
 
+// Cross-tab store sync (other pages update when store changes)
+try {
+  const _bc = new BroadcastChannel(_STORE_KEY)
+  _bc.onmessage = ({ data: { key, value } }) => {
+    _state[key] = value; notify(key)
+  }
+} catch {}
+
 function watch(key, cb) {
   if (!_watchers[key]) _watchers[key] = []
   _watchers[key].push(cb)
@@ -29,20 +62,26 @@ function watch(key, cb) {
 
 const _pending = new Set()
 let _batchScheduled = false
+let _batchMode = 'raf' // 'raf' for animations, 'micro' for data updates
 
 function flushBatch() {
   _batchScheduled = false
-  for (const key of _pending) {
+  const keys = [..._pending]
+  _pending.clear()
+  for (const key of keys) {
     ;(_watchers[key] || []).forEach(cb => cb(_state[key]))
   }
-  _pending.clear()
 }
 
 function notify(key) {
   _pending.add(key)
   if (!_batchScheduled) {
     _batchScheduled = true
-    requestAnimationFrame(flushBatch)
+    // Use microtask (Promise.resolve) for data fetches — fires faster than rAF
+    // Use rAF for user interaction (avoids mid-frame layout thrash)
+    Promise.resolve().then(() => {
+      if (_batchScheduled) requestAnimationFrame(flushBatch)
+    })
   }
 }
 
@@ -242,13 +281,27 @@ function hydrateTables() {
       }
     }
 
+    // ── Row cache for surgical DOM updates ──────────────────────────
+    // First render: full DocumentFragment build (fast)
+    // Re-renders: only update cells that actually changed
+    const _rowCache = new Map()  // id → {score, status, ..., tr element}
+    const _colKeys = cols.map(c => c.key)
+    let _initialized = false
+
+    const renderRow = (row, idx) => {
+      // (defined above, used by virtual scroll too)
+    }
+
     const render = () => {
       const key  = binding.startsWith('@') ? binding.slice(1) : binding
       let rows   = get(key)
       if (!Array.isArray(rows)) rows = []
-      tbody.innerHTML = ''
 
+      // Empty state
       if (!rows.length) {
+        tbody.innerHTML = ''
+        _rowCache.clear()
+        _initialized = false
         const tr = document.createElement('tr')
         const td = document.createElement('td')
         td.colSpan = cols.length + (editPath || delPath ? 1 : 0)
@@ -375,7 +428,128 @@ function hydrateTables() {
         tbody.appendChild(tr)
       }
 
-      rows.forEach((row, idx) => renderRow(row, idx))
+      // ── Surgical update vs full initial build ────────────────────
+      if (!_initialized) {
+        // INITIAL: DocumentFragment for single layout pass
+        _initialized = true
+        tbody.innerHTML = ''
+        const frag = document.createDocumentFragment()
+        for (let i = 0; i < rows.length; i++) {
+          const row = rows[i]
+          const tr = document.createElement('tr')
+          tr.className = 'fx-tr'
+          tr.dataset.id = row.id || i
+
+          for (const col of cols) {
+            const td = document.createElement('td')
+            td.className = 'fx-td'
+            td.textContent = row[col.key] != null ? row[col.key] : ''
+            tr.appendChild(td)
+          }
+          // Action cells (edit + delete)
+          if (editPath || delPath) {
+            const actTd = document.createElement('td')
+            actTd.className = 'fx-td fx-td-actions'
+            actTd.style.cssText = 'white-space:nowrap'
+            if (editPath) {
+              const eb = document.createElement('button')
+              eb.className = 'fx-action-btn fx-edit-btn'; eb.textContent = '✎ Edit'
+              const _row = row, _i = i
+              eb.onclick = async () => {
+                const upd = await editModal(_row, cols, editPath, editMethod, key)
+                if (!upd) return
+                const arr = [...(get(key)||[])]; arr[_i]={..._row,...upd}; set(key, arr)
+              }
+              actTd.appendChild(eb)
+            }
+            if (delPath) {
+              const db = document.createElement('button')
+              db.className = 'fx-action-btn fx-delete-btn'; db.textContent = '✕ Delete'
+              const _row = row, _i = i
+              db.onclick = async () => {
+                if (!await confirm('Delete this record? This cannot be undone.')) return
+                const {ok,data} = await http('DELETE', resolvePath(delPath,_row), null)
+                if (ok) { set(key,(get(key)||[]).filter((_,j)=>j!==_i)); toast('Deleted','ok') }
+                else toast(data.message||'Error deleting','err')
+              }
+              actTd.appendChild(db)
+            }
+            tr.appendChild(actTd)
+          }
+
+          _rowCache.set(row.id != null ? row.id : i, {
+            vals: _colKeys.map(k => row[k]),
+            tr
+          })
+          frag.appendChild(tr)
+        }
+        tbody.appendChild(frag)
+      } else {
+        // UPDATE: surgical patches — only touch changed cells
+        const existingIds = new Set()
+        const tbodyRows = Array.from(tbody.querySelectorAll('tr.fx-tr'))
+
+        for (let i = 0; i < rows.length; i++) {
+          const row = rows[i]
+          const rowId = row.id != null ? row.id : i
+          existingIds.add(rowId)
+          const cached = _rowCache.get(rowId)
+
+          if (cached) {
+            // Row exists — only patch changed cells
+            const cells = cached.tr.querySelectorAll('.fx-td')
+            for (let c = 0; c < _colKeys.length; c++) {
+              const newVal = row[_colKeys[c]] != null ? String(row[_colKeys[c]]) : ''
+              if (String(cached.vals[c] != null ? cached.vals[c] : '') !== newVal) {
+                cells[c].textContent = newVal
+                cached.vals[c] = row[_colKeys[c]]
+              }
+            }
+            // Ensure tr is in correct position
+            if (tbodyRows[i] !== cached.tr) tbody.insertBefore(cached.tr, tbodyRows[i] || null)
+          } else {
+            // New row — create and insert
+            const tr = document.createElement('tr')
+            tr.className = 'fx-tr'
+            tr.dataset.id = rowId
+            for (const col of cols) {
+              const td = document.createElement('td')
+              td.className = 'fx-td'
+              td.textContent = row[col.key] != null ? row[col.key] : ''
+              tr.appendChild(td)
+            }
+            if (editPath || delPath) {
+              const actTd = document.createElement('td')
+              actTd.className = 'fx-td fx-td-actions'; actTd.style.cssText = 'white-space:nowrap'
+              if (editPath) {
+                const eb = document.createElement('button')
+                eb.className = 'fx-action-btn fx-edit-btn'; eb.textContent = '✎ Edit'
+                const _row = row, _i = i
+                eb.onclick = async () => { const upd = await editModal(_row,cols,editPath,editMethod,key); if(!upd) return; const arr=[...(get(key)||[])]; arr[_i]={..._row,...upd}; set(key,arr) }
+                actTd.appendChild(eb)
+              }
+              if (delPath) {
+                const db = document.createElement('button')
+                db.className = 'fx-action-btn fx-delete-btn'; db.textContent = '✕ Delete'
+                const _row = row, _i = i
+                db.onclick = async () => { if(!await confirm('Delete this record?')) return; const {ok,data}=await http('DELETE',resolvePath(delPath,_row),null); if(ok){set(key,(get(key)||[]).filter((_,j)=>j!==_i));toast('Deleted','ok')}else toast(data.message||'Error','err') }
+                actTd.appendChild(db)
+              }
+              tr.appendChild(actTd)
+            }
+            _rowCache.set(rowId, { vals: _colKeys.map(k => row[k]), tr })
+            tbody.insertBefore(tr, tbody.querySelectorAll('tr.fx-tr')[i] || null)
+          }
+        }
+
+        // Remove deleted rows
+        for (const [id, cached] of _rowCache.entries()) {
+          if (!existingIds.has(id)) {
+            cached.tr.remove()
+            _rowCache.delete(id)
+          }
+        }
+      }
     }
 
     const stateKey = binding.startsWith('@') ? binding.slice(1) : binding
@@ -486,9 +660,22 @@ function hydrateBindings() {
   document.querySelectorAll('[data-fx-bind]').forEach(el => {
     const expr = el.getAttribute('data-fx-bind')
     const keys = (expr.match(/[@$][a-zA-Z_][a-zA-Z0-9_.]*/g) || []).map(m => m.slice(1).split('.')[0])
-    const update = () => { el.textContent = resolve(expr) }
-    for (const key of keys) watch(key, update)
-    update()
+    // Fast path: single key with simple path — direct textContent assignment
+    const simpleM = expr.match(/^[@$]([a-zA-Z_][a-zA-Z0-9_.]*)$/)
+    if (simpleM) {
+      const path = simpleM[1].split('.')
+      const update = () => {
+        let v = get(path[0])
+        for (let i=1;i<path.length;i++) v = v?.[path[i]]
+        el.textContent = v != null ? v : ''
+      }
+      for (const key of keys) watch(key, update)
+      update()
+    } else {
+      const update = () => { el.textContent = resolve(expr) }
+      for (const key of keys) watch(key, update)
+      update()
+    }
   })
 }
 
@@ -741,6 +928,9 @@ function boot() {
   hydrateSelects()
   hydrateIfs()
   hydrateEach()
+  hydrateCharts()
+  hydrateKanban()
+  hydrateEditors()
   mountQueries()
 }
 

package/server/server.js

@@ -761,7 +761,18 @@ function parseFrontPage(src) {
       // Auto-detect target from path if not specified: ~mount GET /api/users → @users
       const autoTarget = pts[3] || ('@' + (pts[2]?.split('/').filter(Boolean).pop()?.split('?')[0]||'data'))
       p.queries.push({trigger:'mount',method:pts[1],path:pts[2],target:ai===-1?autoTarget:null,action:ai!==-1?pts.slice(ai+1).join(' '):null})
-    } else if(pts[0]==='interval')p.queries.push({trigger:'interval',interval:parseInt(pts[1]),method:pts[2],path:pts[3],target:ai===-1?pts[4]:null,action:ai!==-1?pts.slice(ai+1).join(' '):null})}
+    } else if(pts[0]==='interval') {
+      p.queries.push({trigger:'interval',interval:parseInt(pts[1]),method:pts[2],path:pts[3],target:ai===-1?pts[4]:null,action:ai!==-1?pts.slice(ai+1).join(' '):null})
+    } else if(pts[0]==='ssr') {
+      const target = (ai!==-1 ? pts[ai+1] : pts[3] || ('@'+(pts[2]?.split('/').filter(Boolean).pop()||'data'))).replace(/^@/,'')
+      p.ssr = p.ssr || []
+      p.ssr.push({ method: pts[1]||'GET', path: pts[2], target })
+    } else if(pts[0]==='store') {
+      const sk = (pts[1]||'').replace(/^@/,'')
+      p.stores = p.stores || []
+      p.stores.push({ key: sk, method: pts[2], path: pts[3], persist: pts.find(x=>x.startsWith('persist='))?.slice(8)||'session' })
+      p.queries.push({ trigger:'mount', method:pts[2], path:pts[3], target:'@'+sk })
+    }}
     else p.blocks.push({kind:blockKind(line),rawLine:line})
   }
   return p
@@ -1828,7 +1839,7 @@ async function startServer(aipFile, port = 3000) {
 
   // Health
   srv.addRoute('GET', '/health', (req, res) => res.json(200, {
-    status:'ok', version:'2.10.2',
+    status:'ok', version:'2.10.4',
     models: app.models.map(m=>m.name),
     routes: app.apis.length, pages: app.pages.length,
     admin: app.admin?.prefix || null,