aiplang 2.10.1 → 2.10.3

package/bin/aiplang.js

@@ -5,7 +5,7 @@ const fs   = require('fs')
 const path = require('path')
 const http = require('http')
 
-const VERSION     = '2.10.1'
+const VERSION     = '2.10.3'
 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.1",
+  "version": "2.10.3",
   "description": "AI-first web language. One .aip file = complete app. Frontend + backend + database + auth.",
   "keywords": [
     "aiplang",

package/runtime/aiplang-hydrate.js

@@ -6,29 +6,51 @@
 const cfg = window.__AIPLANG_PAGE__
 if (!cfg) return
 
-// ── State ────────────────────────────────────────────────────────
+// ── 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) {
+function set(key, value, _persist) {
   if (JSON.stringify(_state[key]) === 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)
   return () => { _watchers[key] = _watchers[key].filter(f => f !== cb) }
 }
 
-// Batched notify — queues all pending updates and flushes in rAF (like React's batching)
 const _pending = new Set()
 let _batchScheduled = false
 
@@ -48,7 +70,6 @@ function notify(key) {
   }
 }
 
-// Force immediate flush (for critical updates like form submit)
 function notifySync(key) {
   ;(_watchers[key] || []).forEach(cb => cb(_state[key]))
 }
@@ -63,12 +84,10 @@ function resolve(str) {
   })
 }
 
-// Resolve path with row data: /api/users/{id} + {id:1} → /api/users/1
 function resolvePath(tmpl, row) {
   return tmpl.replace(/\{([^}]+)\}/g, (_, k) => row?.[k] ?? get(k) ?? '')
 }
 
-// ── Query Engine ─────────────────────────────────────────────────
 const _intervals = []
 
 async function runQuery(q) {
@@ -96,11 +115,11 @@ function applyAction(data, target, action) {
     if (pm) { set(pm[1], [...(get(pm[1]) || []), data]); return }
     const fm = action.match(/^@([a-zA-Z_]+)\.filter\((.+)\)$/)
     if (fm) {
-      // Safe filter: @list.filter(item.status=active) style — no eval/new Function
+
       try {
         const expr = fm[2].trim()
         const filtered = (get(fm[1]) || []).filter(item => {
-          // Support simple: field=value or field!=value
+
           const eq = expr.match(/^([a-zA-Z_.]+)\s*(!?=)\s*(.+)$/)
           if (eq) {
             const [, field, op, val] = eq
@@ -132,7 +151,6 @@ function mountQueries() {
   }
 }
 
-// ── HTTP helper ──────────────────────────────────────────────────
 async function http(method, path, body) {
   const opts = { method, headers: { 'Content-Type': 'application/json' } }
   if (body) opts.body = JSON.stringify(body)
@@ -141,7 +159,6 @@ async function http(method, path, body) {
   return { ok: res.ok, status: res.status, data }
 }
 
-// ── Toast notifications ──────────────────────────────────────────
 function toast(msg, type) {
   const t = document.createElement('div')
   t.textContent = msg
@@ -158,7 +175,6 @@ function toast(msg, type) {
   setTimeout(() => { t.style.opacity = '0'; setTimeout(() => t.remove(), 300) }, 2500)
 }
 
-// ── Confirm modal ────────────────────────────────────────────────
 function confirm(msg) {
   return new Promise(resolve => {
     const overlay = document.createElement('div')
@@ -179,7 +195,6 @@ function confirm(msg) {
   })
 }
 
-// ── Edit modal ───────────────────────────────────────────────────
 function editModal(row, cols, path, method, stateKey) {
   return new Promise(resolve => {
     const overlay = document.createElement('div')
@@ -228,21 +243,19 @@ function editModal(row, cols, path, method, stateKey) {
   })
 }
 
-// ── Hydrate tables with CRUD ─────────────────────────────────────
 function hydrateTables() {
   document.querySelectorAll('[data-fx-table]').forEach(tbl => {
     const binding   = tbl.getAttribute('data-fx-table')
     const colsJSON  = tbl.getAttribute('data-fx-cols')
-    const editPath  = tbl.getAttribute('data-fx-edit')    // e.g. /api/users/{id}
+    const editPath  = tbl.getAttribute('data-fx-edit')
     const editMethod= tbl.getAttribute('data-fx-edit-method') || 'PUT'
-    const delPath   = tbl.getAttribute('data-fx-delete')  // e.g. /api/users/{id}
+    const delPath   = tbl.getAttribute('data-fx-delete')
     const delKey    = tbl.getAttribute('data-fx-delete-key') || 'id'
 
     const cols  = colsJSON ? JSON.parse(colsJSON) : []
     const tbody = tbl.querySelector('tbody')
     if (!tbody) return
 
-    // Add action column headers if needed
     if ((editPath || delPath) && tbl.querySelector('thead tr')) {
       const thead = tbl.querySelector('thead tr')
       if (!thead.querySelector('.fx-th-actions')) {
@@ -269,37 +282,71 @@ function hydrateTables() {
         return
       }
 
-      // Virtual rendering: only render visible rows for large datasets
-      const VIRTUAL_THRESHOLD = 100
-      const ROW_HEIGHT = 44 // px
+      const VIRTUAL_THRESHOLD = 80
+      const OVERSCAN = 8
+      const colSpanTotal = cols.length + (editPath || delPath ? 1 : 0)
       const useVirtual = rows.length >= VIRTUAL_THRESHOLD
+      let rowHeights = null, totalHeight = 0, scrollListener = null
 
       if (useVirtual) {
-        const wrapDiv = tbody.closest('.fx-table-wrap') || tbody.parentElement
-        const visible = Math.ceil((wrapDiv.clientHeight || 400) / ROW_HEIGHT) + 10
-        const scrollTop = wrapDiv.scrollTop || 0
-        const startIdx = Math.max(0, Math.floor(scrollTop / ROW_HEIGHT) - 5)
-        const endIdx = Math.min(rows.length - 1, startIdx + visible)
-
-        // Spacer before
-        if (startIdx > 0) {
-          const spacerTr = document.createElement('tr')
-          const spacerTd = document.createElement('td')
-          spacerTd.colSpan = cols.length + (editPath || delPath ? 1 : 0)
-          spacerTd.style.height = (startIdx * ROW_HEIGHT) + 'px'
-          spacerTd.style.padding = '0'
-          spacerTr.appendChild(spacerTd)
-          tbody.appendChild(spacerTr)
+        const wrapDiv = tbl.closest('.fx-table-wrap') || tbl.parentElement
+        wrapDiv.style.cssText += ';max-height:520px;overflow-y:auto;position:relative'
+
+        const measureRow = rows[0]
+        const tempTr = document.createElement('tr')
+        tempTr.style.visibility = 'hidden'
+        cols.forEach(col => {
+          const td = document.createElement('td'); td.className = 'fx-td'
+          td.textContent = measureRow[col.key] || ''; tempTr.appendChild(td)
+        })
+        tbody.appendChild(tempTr)
+        const rowH = Math.max(tempTr.getBoundingClientRect().height, 40) || 44
+        tbody.removeChild(tempTr)
+
+        const viewH = wrapDiv.clientHeight || 480
+        const visibleCount = Math.ceil(viewH / rowH) + OVERSCAN * 2
+
+        const renderVirtual = () => {
+          const scrollTop = wrapDiv.scrollTop
+          const startRaw = Math.floor(scrollTop / rowH)
+          const start = Math.max(0, startRaw - OVERSCAN)
+          const end   = Math.min(rows.length - 1, start + visibleCount)
+          const paddingTop = start * rowH
+          const paddingBot = Math.max(0, (rows.length - end - 1) * rowH)
+
+          tbody.innerHTML = ''
+
+          if (paddingTop > 0) {
+            const tr = document.createElement('tr')
+            const td = document.createElement('td')
+            td.colSpan = colSpanTotal; td.style.cssText = 'height:'+paddingTop+'px;padding:0;border:none'
+            tr.appendChild(td); tbody.appendChild(tr)
+          }
+
+          for (let i = start; i <= end; i++) renderRow(rows[i], i)
+
+          if (paddingBot > 0) {
+            const tr = document.createElement('tr')
+            const td = document.createElement('td')
+            td.colSpan = colSpanTotal; td.style.cssText = 'height:'+paddingBot+'px;padding:0;border:none'
+            tr.appendChild(td); tbody.appendChild(tr)
+          }
+        }
+
+        let rafPending = false
+        scrollListener = () => {
+          if (rafPending) return; rafPending = true
+          requestAnimationFrame(() => { rafPending = false; renderVirtual() })
         }
-        rows = rows.slice(startIdx, endIdx + 1)
+        wrapDiv.addEventListener('scroll', scrollListener, { passive: true })
+        renderVirtual()
+        return
       }
 
-      rows.forEach((row, idx) => {
+      function renderRow(row, idx) {
         const tr = document.createElement('tr')
         tr.className = 'fx-tr'
-        if (useVirtual) tr.style.height = ROW_HEIGHT + 'px'
 
-        // Data cells
         for (const col of cols) {
           const td = document.createElement('td')
           td.className = 'fx-td'
@@ -307,7 +354,6 @@ function hydrateTables() {
           tr.appendChild(td)
         }
 
-        // Action cell
         if (editPath || delPath) {
           const td = document.createElement('td')
           td.className = 'fx-td fx-td-actions'
@@ -351,7 +397,9 @@ function hydrateTables() {
           tr.appendChild(td)
         }
         tbody.appendChild(tr)
-      })
+      }
+
+      rows.forEach((row, idx) => renderRow(row, idx))
     }
 
     const stateKey = binding.startsWith('@') ? binding.slice(1) : binding
@@ -360,7 +408,6 @@ function hydrateTables() {
   })
 }
 
-// ── Hydrate lists ────────────────────────────────────────────────
 function hydrateLists() {
   document.querySelectorAll('[data-fx-list]').forEach(wrap => {
     const binding  = wrap.getAttribute('data-fx-list')
@@ -389,7 +436,6 @@ function hydrateLists() {
   })
 }
 
-// ── Hydrate forms ─────────────────────────────────────────────────
 function hydrateForms() {
   document.querySelectorAll('[data-fx-form]').forEach(form => {
     const path   = form.getAttribute('data-fx-form')
@@ -424,8 +470,6 @@ function hydrateForms() {
   })
 }
 
-// ── Hydrate btns ──────────────────────────────────────────────────
-// <button data-fx-btn="/api/path" data-fx-method="POST" data-fx-action="...">
 function hydrateBtns() {
   document.querySelectorAll('[data-fx-btn]').forEach(btn => {
     const path   = btn.getAttribute('data-fx-btn')
@@ -452,8 +496,6 @@ function hydrateBtns() {
   })
 }
 
-// ── Hydrate select dropdowns ──────────────────────────────────────
-// <select data-fx-model="@filter"> sets @filter on change
 function hydrateSelects() {
   document.querySelectorAll('[data-fx-model]').forEach(sel => {
     const binding = sel.getAttribute('data-fx-model')
@@ -464,7 +506,6 @@ function hydrateSelects() {
   })
 }
 
-// ── Hydrate text bindings ─────────────────────────────────────────
 function hydrateBindings() {
   document.querySelectorAll('[data-fx-bind]').forEach(el => {
     const expr = el.getAttribute('data-fx-bind')
@@ -475,7 +516,6 @@ function hydrateBindings() {
   })
 }
 
-// ── Hydrate conditionals ──────────────────────────────────────────
 function hydrateIfs() {
   document.querySelectorAll('[data-fx-if]').forEach(wrap => {
     const cond = wrap.getAttribute('data-fx-if')
@@ -496,9 +536,8 @@ function hydrateIfs() {
   })
 }
 
-// ── Advanced Animations (scroll-triggered + stagger) ─────────────
 function initAnimations() {
-  // Extended animation presets — beyond what React ships by default
+
   const style = document.createElement('style')
   style.textContent = `
     @keyframes fx-blur-in   { from{opacity:0;filter:blur(8px);transform:translateY(8px)} to{opacity:1;filter:blur(0);transform:none} }
@@ -532,7 +571,6 @@ function initAnimations() {
   `
   document.head.appendChild(style)
 
-  // Intersection Observer — trigger when element scrolls into view (like Framer whileInView)
   const observer = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
       if (entry.isIntersecting) {
@@ -543,14 +581,57 @@ function initAnimations() {
   }, { threshold: 0.12, rootMargin: '0px 0px -30px 0px' })
 
   document.querySelectorAll('[class*="fx-anim-"]').forEach(el => {
-    // bounce and pulse run immediately
+
     if (el.classList.contains('fx-anim-bounce') || el.classList.contains('fx-anim-pulse')) {
       el.classList.add('fx-visible'); return
     }
     observer.observe(el)
   })
 
-  // Counter animation — numbers count up on scroll-in
+  window.aiplang = window.aiplang || {}
+  window.aiplang.spring = function(el, prop, from, to, opts = {}) {
+    const k  = opts.stiffness || 180
+    const b  = opts.damping   || 22
+    const m  = opts.mass      || 1
+    let pos = from, vel = 0
+    const dt = 1/60
+    let raf
+
+    const tick = () => {
+      const F = -k * (pos - to) - b * vel
+      vel += (F / m) * dt
+      pos += vel * dt
+      if (Math.abs(pos - to) < 0.01 && Math.abs(vel) < 0.01) {
+        pos = to
+        el.style[prop] = pos + (opts.unit || 'px')
+        return
+      }
+      el.style[prop] = pos + (opts.unit || 'px')
+      raf = requestAnimationFrame(tick)
+    }
+    cancelAnimationFrame(raf)
+    requestAnimationFrame(tick)
+  }
+
+  const springObs = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (!entry.isIntersecting) return
+      const el = entry.target
+      if (el.classList.contains('fx-anim-spring')) {
+        el.style.opacity = '1'
+        el.style.transform = 'translateY(0px)'
+        window.aiplang.spring(el, '--spring-y', 24, 0, { stiffness: 200, damping: 20, unit: 'px' })
+        springObs.unobserve(el)
+      }
+    })
+  }, { threshold: 0.1 })
+
+  document.querySelectorAll('.fx-anim-spring').forEach(el => {
+    el.style.opacity = '0'
+    el.style.transform = 'translateY(24px)'
+    springObs.observe(el)
+  })
+
   document.querySelectorAll('.fx-stat-val').forEach(el => {
     const target = parseFloat(el.textContent)
     if (isNaN(target) || target === 0) return
@@ -576,7 +657,6 @@ function initAnimations() {
   })
 }
 
-// ── Inject action column CSS ──────────────────────────────────────
 function injectActionCSS() {
   const style = document.createElement('style')
   style.textContent = `
@@ -595,9 +675,6 @@ function injectActionCSS() {
   document.head.appendChild(style)
 }
 
-// ── SSR Data Injection — pre-populate state from server data ────────
-// Server can inject window.__SSR_DATA__ = {users: [...], stats: {...}}
-// to avoid loading flash (like Next.js getServerSideProps)
 function loadSSRData() {
   const ssr = window.__SSR_DATA__
   if (!ssr) return
@@ -606,8 +683,6 @@ function loadSSRData() {
   }
 }
 
-// ── Optimistic UI ─────────────────────────────────────────────────
-// form data-fx-optimistic="true": updates state instantly, rolls back on error
 function hydrateOptimistic() {
   document.querySelectorAll('[data-fx-optimistic]').forEach(form => {
     const action = form.getAttribute('data-fx-action') || ''
@@ -616,7 +691,7 @@ function hydrateOptimistic() {
     const key = pm[1]
 
     form.addEventListener('submit', (e) => {
-      // Inject a temp item optimistically before submit fires
+
       const body = {}
       form.querySelectorAll('input,select,textarea').forEach(inp => {
         if (inp.name) body[inp.name] = inp.value
@@ -626,26 +701,23 @@ function hydrateOptimistic() {
       const current = [...(get(key) || [])]
       set(key, [...current, optimisticItem])
 
-      // After actual submit (handled by hydrateForms), remove temp if error
       const origAction = form.getAttribute('data-fx-action')
       form.setAttribute('data-fx-action-orig', origAction)
       form.setAttribute('data-fx-action', `@${key}._rollback_${tempId}`)
 
-      // Restore action after tick
       setTimeout(() => {
         form.setAttribute('data-fx-action', origAction)
-        // Clean up optimistic item if real item arrived
+
         setTimeout(() => {
           const arr = get(key) || []
           const hasReal = arr.some(i => !i._optimistic)
           if (hasReal) set(key, arr.filter(i => !i._optimistic || i.id !== tempId))
         }, 500)
       }, 50)
-    }, true) // capture phase — before hydrateForms submit handler
+    }, true)
   })
 }
 
-// ── Error recovery — fallback + retry ────────────────────────────
 function hydrateTableErrors() {
   document.querySelectorAll('[data-fx-fallback]').forEach(tbl => {
     const fallback = tbl.getAttribute('data-fx-fallback')
@@ -656,7 +728,6 @@ function hydrateTableErrors() {
     const tbody = tbl.querySelector('tbody')
     const originalEmpty = tbl.getAttribute('data-fx-empty') || 'No data.'
 
-    // Override runQuery to detect errors for this table's binding
     const key = binding?.replace(/^@/, '') || ''
     if (key) {
       const cleanup = watch(key, (val) => {
@@ -680,7 +751,6 @@ function hydrateTableErrors() {
   }
 }
 
-// ── Boot ──────────────────────────────────────────────────────────
 function boot() {
   loadSSRData()
   injectActionCSS()
@@ -695,10 +765,12 @@ function boot() {
   hydrateSelects()
   hydrateIfs()
   hydrateEach()
+  hydrateCharts()
+  hydrateKanban()
+  hydrateEditors()
   mountQueries()
 }
 
-// ── Hydrate each @list { template } ──────────────────────────────
 function hydrateEach() {
   document.querySelectorAll('[data-fx-each]').forEach(wrap => {
     const binding = wrap.getAttribute('data-fx-each')
@@ -721,7 +793,7 @@ function hydrateEach() {
       items.forEach(item => {
         const div = document.createElement('div')
         div.className = 'fx-each-item'
-        // Interpolate {item.field} syntax in template
+
         const html = tpl.replace(/\{item\.([^}]+)\}/g, (_, field) => {
           const parts = field.split('.')
           let val = item

package/server/server.js

@@ -613,7 +613,18 @@ function parseApp(src) {
       else if (line.startsWith('~belongs '))curModel.relationships.push({ type:'belongsTo', model:line.slice(9).trim() })
       else if (line.startsWith('~hook '))   curModel.hooks.push(line.slice(6).trim())
       else if (line === '~soft-delete')     curModel.softDelete = true
-      else if (line && line !== '{')        curModel.fields.push(parseField(line))
+      else if (line && line !== '{') {
+      // Support both multi-line and compact single-line field defs
+      if (line.startsWith('~')) {
+        if (line === '~soft-delete') curModel.softDelete = true
+        else if (line.startsWith('~belongs ')) curModel.relationships.push({type:'belongsTo',model:line.slice(9).trim()})
+      } else if (!line.includes(' ') && line.includes(':')) {
+        // Compact: "email:text:unique:required"
+        curModel.fields.push(parseFieldCompact(line))
+      } else {
+        curModel.fields.push(parseField(line))
+      }
+    }
       i++; continue
     }
 
@@ -621,8 +632,12 @@ function parseApp(src) {
       if (inAPI && curAPI) app.apis.push(curAPI)
       const braceIdx = line.indexOf('{')
       const closeBraceIdx = line.lastIndexOf('}')
-      const pts = line.slice(4, braceIdx).trim().split(/\s+/)
-      curAPI = { method:pts[0], path:pts[1], guards:[], validate:[], query:[], body:[], return:null }
+      const rawHead = line.slice(4, braceIdx).trim()
+      // Shorthand: api GET /path => auth,admin { — arrow guard syntax
+      const arrowM = rawHead.match(/^(\S+)\s+(\S+)\s*=>\s*([\w,]+)\s*$/)
+      const pts = (arrowM ? rawHead.slice(0, rawHead.indexOf('=>')).trim() : rawHead).split(/\s+/)
+      const inlineGuards = arrowM ? arrowM[3].split(',').map(g=>g.trim()) : []
+      curAPI = { method:pts[0], path:pts[1], guards:[...inlineGuards], validate:[], query:[], body:[], return:null }
       // Inline api: "api GET /path { ops }" — entire api on one line
       if (braceIdx !== -1 && closeBraceIdx > braceIdx) {
         const inlineBody = line.slice(braceIdx+1, closeBraceIdx).trim()
@@ -648,7 +663,7 @@ function parseApp(src) {
 }
 
 function parseEnvLine(s) { const p=s.split(/\s+/); const ev={name:'',required:false,default:null}; for(const x of p){if(x==='required')ev.required=true;else if(x.includes('=')){const[k,v]=x.split('=');ev.name=k;ev.default=v}else ev.name=x}; return ev }
-function parseDBLine(s) { const p=s.split(/\s+/); return{driver:p[0]||'sqlite',dsn:p[1]||'./app.db'} }
+function parseDBLine(s) { const p=s.split(/\s+/); const d=p[0]||'sqlite'; return{driver:d==='pg'||d==='psql'?'postgres':d,dsn:p[1]||'./app.db'} }
 function parseAuthLine(s) { const p=s.split(/\s+/); const a={provider:'jwt',secret:p[1]||'$JWT_SECRET',expire:'7d',refresh:'30d'}; for(const x of p){if(x.startsWith('expire='))a.expire=x.slice(7);if(x.startsWith('refresh='))a.refresh=x.slice(8);if(x==='google')a.oauth=['google'];if(x==='github')a.oauth=[...(a.oauth||[]),'google']}; return a }
 function parseMailLine(s) { const parts=s.split(/\s+/); const m={driver:parts[0]||'smtp'}; for(const x of parts.slice(1)){const[k,v]=x.split('='); m[k]=v}; return m }
 function parseStripeLine(s) {
@@ -708,7 +723,6 @@ function parseEventLine(s) { const m=s.match(/^(\S+)\s*=>\s*(.+)$/); return{even
 function parseField(line) {
   const p=line.split(':').map(s=>s.trim())
   const f={name:p[0],type:p[1]||'text',modifiers:[],enumVals:[],default:null}
-  // If type is enum, p[2] contains comma-separated values directly
   if (f.type === 'enum' && p[2] && !p[2].startsWith('default=') && !['required','unique','hashed','pk','auto','index'].includes(p[2])) {
     f.enumVals = p[2].split(',').map(v=>v.trim()).filter(Boolean)
     for(let j=3;j<p.length;j++){const x=p[j];if(x.startsWith('default='))f.default=x.slice(8);else if(x)f.modifiers.push(x)}
@@ -717,6 +731,19 @@ function parseField(line) {
   }
   return f
 }
+
+// Compact model field: "email:text:unique:required" single-line
+function parseFieldCompact(def) {
+  const parts = def.trim().split(':').map(s=>s.trim()).filter(Boolean)
+  const f = {name:parts[0], type:parts[1]||'text', modifiers:[], enumVals:[], default:null}
+  for (let i=2; i<parts.length; i++) {
+    const x = parts[i]
+    if (x.startsWith('default=')) f.default = x.slice(8)
+    else if (/^[a-z]+,[a-z]/.test(x)) f.enumVals = x.split(',').map(v=>v.trim())
+    else f.modifiers.push(x)
+  }
+  return f
+}
 function parseAPILine(line, route) {
   if(line.startsWith('~guard '))    route.guards=line.slice(7).split('|').map(s=>s.trim())
   else if(line.startsWith('~validate ')) line.slice(10).split('|').forEach(v=>{const p=v.trim().split(/\s+/);if(p[0])route.validate.push({field:p[0],rules:p.slice(1)})})
@@ -727,10 +754,25 @@ function parseFrontPage(src) {
   const lines=src.split('\n').map(l=>l.trim()).filter(l=>l&&!l.startsWith('#'))
   const p={id:'page',theme:'dark',route:'/',themeVars:null,state:{},queries:[],blocks:[]}
   for(const line of lines){
-    if(line.startsWith('%')){const pts=line.slice(1).trim().split(/\s+/);p.id=pts[0]||'page';p.route=pts[2]||'/';const rt=pts[1]||'dark';if(rt.includes('#')){const c=rt.split(',');p.theme='custom';p.customTheme={bg:c[0],text:c[1]||'#f1f5f9',accent:c[2]||'#2563eb'}}else p.theme=rt}
+    if(line.startsWith('%')){const pts=line.slice(1).trim().split(/\s+/);p.id=pts[0]||'page';p.route=pts[2]||'/';const cachePt=pts.find(x=>x.startsWith('cache='));if(cachePt)p.cacheTTL=parseInt(cachePt.slice(6));const rt=pts[1]||'dark';if(rt.includes('#')){const c=rt.split(',');p.theme='custom';p.customTheme={bg:c[0],text:c[1]||'#f1f5f9',accent:c[2]||'#2563eb'}}else p.theme=rt}
     else if(line.startsWith('~theme ')){p.themeVars=p.themeVars||{};line.slice(7).trim().split(/\s+/).forEach(pair=>{const eq=pair.indexOf('=');if(eq!==-1)p.themeVars[pair.slice(0,eq)]=pair.slice(eq+1)})}
     else if(line.startsWith('@')&&line.includes('=')){const eq=line.indexOf('=');p.state[line.slice(1,eq).trim()]=line.slice(eq+1).trim()}
-    else if(line.startsWith('~')){const pts=line.slice(1).trim().split(/\s+/);const ai=pts.indexOf('=>');if(pts[0]==='mount')p.queries.push({trigger:'mount',method:pts[1],path:pts[2],target:ai===-1?pts[3]: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(line.startsWith('~')){const pts=line.slice(1).trim().split(/\s+/);const ai=pts.indexOf('=>');if(pts[0]==='mount'){
+      // 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]==='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
@@ -1797,7 +1839,7 @@ async function startServer(aipFile, port = 3000) {
 
   // Health
   srv.addRoute('GET', '/health', (req, res) => res.json(200, {
-    status:'ok', version:'2.10.1',
+    status:'ok', version:'2.10.3',
     models: app.models.map(m=>m.name),
     routes: app.apis.length, pages: app.pages.length,
     admin: app.admin?.prefix || null,