aiplang 2.10.0 → 2.10.2

package/bin/aiplang.js

@@ -5,7 +5,7 @@ const fs   = require('fs')
 const path = require('path')
 const http = require('http')
 
-const VERSION     = '2.10.0'
+const VERSION     = '2.10.2'
 const RUNTIME_DIR = path.join(__dirname, '..', 'runtime')
 const cmd         = process.argv[2]
 const args        = process.argv.slice(3)

package/package.json

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

package/runtime/aiplang-hydrate.js

@@ -1,7 +1,4 @@
-/**
- * aiplang-hydrate.js — aiplang Hydration Runtime v2.1
- * Handles: state, queries, table, list, form, if, edit, delete, btn, select
- */
+
 
 (function () {
 'use strict'
@@ -9,7 +6,6 @@
 const cfg = window.__AIPLANG_PAGE__
 if (!cfg) return
 
-// ── State ────────────────────────────────────────────────────────
 const _state = {}
 const _watchers = {}
 
@@ -31,7 +27,26 @@ function watch(key, cb) {
   return () => { _watchers[key] = _watchers[key].filter(f => f !== cb) }
 }
 
+const _pending = new Set()
+let _batchScheduled = false
+
+function flushBatch() {
+  _batchScheduled = false
+  for (const key of _pending) {
+    ;(_watchers[key] || []).forEach(cb => cb(_state[key]))
+  }
+  _pending.clear()
+}
+
 function notify(key) {
+  _pending.add(key)
+  if (!_batchScheduled) {
+    _batchScheduled = true
+    requestAnimationFrame(flushBatch)
+  }
+}
+
+function notifySync(key) {
   ;(_watchers[key] || []).forEach(cb => cb(_state[key]))
 }
 
@@ -45,12 +60,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) {
@@ -78,11 +91,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
@@ -114,7 +127,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)
@@ -123,7 +135,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
@@ -140,7 +151,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')
@@ -161,7 +171,6 @@ function confirm(msg) {
   })
 }
 
-// ── Edit modal ───────────────────────────────────────────────────
 function editModal(row, cols, path, method, stateKey) {
   return new Promise(resolve => {
     const overlay = document.createElement('div')
@@ -210,21 +219,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')) {
@@ -251,11 +258,71 @@ function hydrateTables() {
         return
       }
 
-      rows.forEach((row, idx) => {
+      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 = 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() })
+        }
+        wrapDiv.addEventListener('scroll', scrollListener, { passive: true })
+        renderVirtual()
+        return
+      }
+
+      function renderRow(row, idx) {
         const tr = document.createElement('tr')
         tr.className = 'fx-tr'
 
-        // Data cells
         for (const col of cols) {
           const td = document.createElement('td')
           td.className = 'fx-td'
@@ -263,7 +330,6 @@ function hydrateTables() {
           tr.appendChild(td)
         }
 
-        // Action cell
         if (editPath || delPath) {
           const td = document.createElement('td')
           td.className = 'fx-td fx-td-actions'
@@ -307,7 +373,9 @@ function hydrateTables() {
           tr.appendChild(td)
         }
         tbody.appendChild(tr)
-      })
+      }
+
+      rows.forEach((row, idx) => renderRow(row, idx))
     }
 
     const stateKey = binding.startsWith('@') ? binding.slice(1) : binding
@@ -316,7 +384,6 @@ function hydrateTables() {
   })
 }
 
-// ── Hydrate lists ────────────────────────────────────────────────
 function hydrateLists() {
   document.querySelectorAll('[data-fx-list]').forEach(wrap => {
     const binding  = wrap.getAttribute('data-fx-list')
@@ -345,7 +412,6 @@ function hydrateLists() {
   })
 }
 
-// ── Hydrate forms ─────────────────────────────────────────────────
 function hydrateForms() {
   document.querySelectorAll('[data-fx-form]').forEach(form => {
     const path   = form.getAttribute('data-fx-form')
@@ -380,8 +446,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')
@@ -408,8 +472,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')
@@ -420,7 +482,6 @@ function hydrateSelects() {
   })
 }
 
-// ── Hydrate text bindings ─────────────────────────────────────────
 function hydrateBindings() {
   document.querySelectorAll('[data-fx-bind]').forEach(el => {
     const expr = el.getAttribute('data-fx-bind')
@@ -431,7 +492,6 @@ function hydrateBindings() {
   })
 }
 
-// ── Hydrate conditionals ──────────────────────────────────────────
 function hydrateIfs() {
   document.querySelectorAll('[data-fx-if]').forEach(wrap => {
     const cond = wrap.getAttribute('data-fx-if')
@@ -452,7 +512,127 @@ function hydrateIfs() {
   })
 }
 
-// ── Inject action column CSS ──────────────────────────────────────
+function initAnimations() {
+
+  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} }
+    @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-up  { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:none} }
+    @keyframes fx-slide-left{ from{opacity:0;transform:translateX(30px)} to{opacity:1;transform:none} }
+    @keyframes fx-scale-in  { from{opacity:0;transform:scale(.92)} to{opacity:1;transform:scale(1)} }
+    @keyframes fx-bounce    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
+    @keyframes fx-shake     { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
+    @keyframes fx-pulse-ring{ 0%{box-shadow:0 0 0 0 rgba(99,102,241,.4)} 70%{box-shadow:0 0 0 12px transparent} 100%{box-shadow:0 0 0 0 transparent} }
+    @keyframes fx-count     { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:none} }
+
+    [class*="fx-anim-"] { opacity: 0 }
+    [class*="fx-anim-"].fx-visible { animation-fill-mode: both; animation-timing-function: cubic-bezier(.4,0,.2,1) }
+    .fx-visible.fx-anim-blur-in   { animation: fx-blur-in   .7s both }
+    .fx-visible.fx-anim-fade-up   { animation: fx-fade-up   .6s both }
+    .fx-visible.fx-anim-fade-in   { animation: fx-fade-in   .5s both }
+    .fx-visible.fx-anim-slide-up  { animation: fx-slide-up  .65s both }
+    .fx-visible.fx-anim-slide-left{ animation: fx-slide-left .6s both }
+    .fx-visible.fx-anim-scale-in  { animation: fx-scale-in  .5s both }
+    .fx-visible.fx-anim-stagger > * { animation: fx-fade-up .5s both }
+    .fx-visible.fx-anim-stagger > *:nth-child(1) { animation-delay: 0s }
+    .fx-visible.fx-anim-stagger > *:nth-child(2) { animation-delay: .1s }
+    .fx-visible.fx-anim-stagger > *:nth-child(3) { animation-delay: .2s }
+    .fx-visible.fx-anim-stagger > *:nth-child(4) { animation-delay: .3s }
+    .fx-visible.fx-anim-stagger > *:nth-child(5) { animation-delay: .4s }
+    .fx-visible.fx-anim-stagger > *:nth-child(6) { animation-delay: .5s }
+    .fx-anim-bounce { animation: fx-bounce 1.5s ease-in-out infinite !important; opacity: 1 !important }
+    .fx-anim-pulse  { animation: fx-pulse-ring 2s ease infinite !important; opacity: 1 !important }
+  `
+  document.head.appendChild(style)
+
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('fx-visible')
+        observer.unobserve(entry.target)
+      }
+    })
+  }, { threshold: 0.12, rootMargin: '0px 0px -30px 0px' })
+
+  document.querySelectorAll('[class*="fx-anim-"]').forEach(el => {
+
+    if (el.classList.contains('fx-anim-bounce') || el.classList.contains('fx-anim-pulse')) {
+      el.classList.add('fx-visible'); return
+    }
+    observer.observe(el)
+  })
+
+  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
+    const isFloat = el.textContent.includes('.')
+    let hasAnimated = false
+    const obs = new IntersectionObserver(([entry]) => {
+      if (!entry.isIntersecting || hasAnimated) return
+      hasAnimated = true
+      obs.unobserve(el)
+      const dur = Math.min(1200, Math.max(600, target * 2))
+      const start = Date.now()
+      const tick = () => {
+        const elapsed = Date.now() - start
+        const progress = Math.min(elapsed / dur, 1)
+        const eased = 1 - Math.pow(1 - progress, 3)
+        const current = target * eased
+        el.textContent = isFloat ? current.toFixed(1) : Math.round(current).toLocaleString()
+        if (progress < 1) requestAnimationFrame(tick)
+      }
+      requestAnimationFrame(tick)
+    }, { threshold: 0.5 })
+    obs.observe(el)
+  })
+}
+
 function injectActionCSS() {
   const style = document.createElement('style')
   style.textContent = `
@@ -471,19 +651,138 @@ function injectActionCSS() {
   document.head.appendChild(style)
 }
 
-// ── Boot ──────────────────────────────────────────────────────────
+function loadSSRData() {
+  const ssr = window.__SSR_DATA__
+  if (!ssr) return
+  for (const [key, value] of Object.entries(ssr)) {
+    _state[key] = value
+  }
+}
+
+function hydrateOptimistic() {
+  document.querySelectorAll('[data-fx-optimistic]').forEach(form => {
+    const action = form.getAttribute('data-fx-action') || ''
+    const pm = action.match(/^@([a-zA-Z_]+)\.push\(\$result\)$/)
+    if (!pm) return
+    const key = pm[1]
+
+    form.addEventListener('submit', (e) => {
+
+      const body = {}
+      form.querySelectorAll('input,select,textarea').forEach(inp => {
+        if (inp.name) body[inp.name] = inp.value
+      })
+      const tempId = '__temp_' + Date.now()
+      const optimisticItem = { ...body, id: tempId, _optimistic: true }
+      const current = [...(get(key) || [])]
+      set(key, [...current, optimisticItem])
+
+      const origAction = form.getAttribute('data-fx-action')
+      form.setAttribute('data-fx-action-orig', origAction)
+      form.setAttribute('data-fx-action', `@${key}._rollback_${tempId}`)
+
+      setTimeout(() => {
+        form.setAttribute('data-fx-action', origAction)
+
+        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)
+  })
+}
+
+function hydrateTableErrors() {
+  document.querySelectorAll('[data-fx-fallback]').forEach(tbl => {
+    const fallback = tbl.getAttribute('data-fx-fallback')
+    const retryPath = tbl.getAttribute('data-fx-retry')
+    const binding = tbl.getAttribute('data-fx-table')
+    if (!fallback) return
+
+    const tbody = tbl.querySelector('tbody')
+    const originalEmpty = tbl.getAttribute('data-fx-empty') || 'No data.'
+
+    const key = binding?.replace(/^@/, '') || ''
+    if (key) {
+      const cleanup = watch(key, (val) => {
+        if (val === '__error__') {
+          if (tbody) {
+            const cols = JSON.parse(tbl.getAttribute('data-fx-cols') || '[]')
+            tbody.innerHTML = `<tr><td colspan="${cols.length + 2}" class="fx-td-empty" style="color:#f87171">
+              ${fallback}
+              ${retryPath ? `<button onclick="window.__aiplang_retry('${binding}','${retryPath}')" style="margin-left:.75rem;padding:.3rem .75rem;background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.3);color:#f87171;border-radius:.375rem;cursor:pointer;font-size:.75rem">↻ Retry</button>` : ''}
+            </td></tr>`
+          }
+        }
+      })
+    }
+  })
+
+  window.__aiplang_retry = (binding, path) => {
+    const key = binding.replace(/^@/, '')
+    set(key, [])
+    runQuery({ method: 'GET', path, target: binding })
+  }
+}
+
 function boot() {
+  loadSSRData()
   injectActionCSS()
+  initAnimations()
   hydrateBindings()
   hydrateTables()
+  hydrateTableErrors()
   hydrateLists()
   hydrateForms()
+  hydrateOptimistic()
   hydrateBtns()
   hydrateSelects()
   hydrateIfs()
+  hydrateEach()
   mountQueries()
 }
 
+function hydrateEach() {
+  document.querySelectorAll('[data-fx-each]').forEach(wrap => {
+    const binding = wrap.getAttribute('data-fx-each')
+    const tpl     = wrap.getAttribute('data-fx-tpl') || ''
+    const key     = binding.startsWith('@') ? binding.slice(1) : binding
+
+    const render = () => {
+      let items = get(key)
+      if (!Array.isArray(items)) items = []
+      wrap.innerHTML = ''
+
+      if (!items.length) {
+        const empty = document.createElement('div')
+        empty.className = 'fx-each-empty fx-td-empty'
+        empty.textContent = wrap.getAttribute('data-fx-empty') || 'No items.'
+        wrap.appendChild(empty)
+        return
+      }
+
+      items.forEach(item => {
+        const div = document.createElement('div')
+        div.className = 'fx-each-item'
+
+        const html = tpl.replace(/\{item\.([^}]+)\}/g, (_, field) => {
+          const parts = field.split('.')
+          let val = item
+          for (const p of parts) val = val?.[p]
+          return val != null ? String(val) : ''
+        })
+        div.textContent = html || (item.name || item.title || item.label || JSON.stringify(item))
+        wrap.appendChild(div)
+      })
+    }
+
+    watch(key, render)
+    render()
+  })
+}
+
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', boot)
 } else {

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,14 @@ 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 p.blocks.push({kind:blockKind(line),rawLine:line})
   }
   return p
@@ -1797,7 +1828,7 @@ async function startServer(aipFile, port = 3000) {
 
   // Health
   srv.addRoute('GET', '/health', (req, res) => res.json(200, {
-    status:'ok', version:'2.10.0',
+    status:'ok', version:'2.10.2',
     models: app.models.map(m=>m.name),
     routes: app.apis.length, pages: app.pages.length,
     admin: app.admin?.prefix || null,