aiplang 2.10.7 → 2.10.9

package/bin/aiplang.js

@@ -5,7 +5,7 @@ const fs   = require('fs')
 const path = require('path')
 const http = require('http')
 
-const VERSION     = '2.10.7'
+const VERSION     = '2.10.9'
 const RUNTIME_DIR = path.join(__dirname, '..', 'runtime')
 const cmd         = process.argv[2]
 const args        = process.argv.slice(3)
@@ -24,10 +24,6 @@ const ic    = n => ICONS[n] || n
 const isDyn = s => s&&(s.includes('@')||s.includes('$'))
 const hSize = n => n<1024?`${n}B`:`${(n/1024).toFixed(1)}KB`
 
-// ─────────────────────────────────────────────────────────────────
-// CLI COMMANDS
-// ─────────────────────────────────────────────────────────────────
-
 if (!cmd||cmd==='--help'||cmd==='-h') {
   console.log(`
   aiplang v${VERSION}
@@ -74,18 +70,12 @@ if (!cmd||cmd==='--help'||cmd==='-h') {
 }
 if (cmd==='--version'||cmd==='-v') { console.log(`aiplang v${VERSION}`); process.exit(0) }
 
-// ─────────────────────────────────────────────────────────────────
-// TEMPLATE SYSTEM
-// Custom templates stored at ~/.aip/templates/<name>.aip
-// ─────────────────────────────────────────────────────────────────
-
 const TEMPLATES_DIR = path.join(require('os').homedir(), '.aip', 'templates')
 
 function ensureTemplatesDir() {
   if (!fs.existsSync(TEMPLATES_DIR)) fs.mkdirSync(TEMPLATES_DIR, { recursive: true })
 }
 
-// Built-in templates (interpolate {{name}} and {{year}})
 const BUILTIN_TEMPLATES = {
   saas: `# {{name}}
 ~db sqlite ./app.db
@@ -255,24 +245,20 @@ function applyTemplateVars(src, name, year) {
 function getTemplate(tplName, name, year) {
   ensureTemplatesDir()
 
-  // 1. Local file path: --template ./my-template.aip or --template /abs/path.aip
   if (tplName.startsWith('./') || tplName.startsWith('../') || tplName.startsWith('/')) {
     const full = path.resolve(tplName)
     if (!fs.existsSync(full)) { console.error(`\n  ✗  Template file not found: ${full}\n`); process.exit(1) }
     return applyTemplateVars(fs.readFileSync(full, 'utf8'), name, year)
   }
 
-  // 2. User custom template: ~/.aip/templates/<name>.aip
   const customPath = path.join(TEMPLATES_DIR, tplName + '.aip')
   if (fs.existsSync(customPath)) {
     return applyTemplateVars(fs.readFileSync(customPath, 'utf8'), name, year)
   }
 
-  // 3. Built-in template
   const builtin = BUILTIN_TEMPLATES[tplName]
   if (builtin) return applyTemplateVars(builtin, name, year)
 
-  // Not found — show what's available
   const customs = fs.existsSync(TEMPLATES_DIR)
     ? fs.readdirSync(TEMPLATES_DIR).filter(f=>f.endsWith('.aip')).map(f=>f.replace('.aip',''))
     : []
@@ -297,17 +283,14 @@ function listTemplates() {
   console.log()
 }
 
-// ── template subcommand ──────────────────────────────────────────
 if (cmd === 'template') {
   const sub = args[0]
   ensureTemplatesDir()
 
-  // aiplang template list
   if (!sub || sub === 'list' || sub === 'ls') {
     listTemplates(); process.exit(0)
   }
 
-  // aiplang template save <name> [--from <file>]
   if (sub === 'save' || sub === 'add') {
     const tname = args[1]
     if (!tname) { console.error('\n  ✗  Usage: aiplang template save <name> [--from <file>]\n'); process.exit(1) }
@@ -318,7 +301,7 @@ if (cmd === 'template') {
       if (!fs.existsSync(fp)) { console.error(`\n  ✗  File not found: ${fp}\n`); process.exit(1) }
       src = fs.readFileSync(fp, 'utf8')
     } else {
-      // Auto-detect: use pages/ directory or app.aip
+
       const sources = ['pages', 'app.aip', 'index.aip']
       const found = sources.find(s => fs.existsSync(s))
       if (!found) { console.error('\n  ✗  No .aip files found. Use --from <file> to specify source.\n'); process.exit(1) }
@@ -335,7 +318,6 @@ if (cmd === 'template') {
     process.exit(0)
   }
 
-  // aiplang template remove <name>
   if (sub === 'remove' || sub === 'rm' || sub === 'delete') {
     const tname = args[1]
     if (!tname) { console.error('\n  ✗  Usage: aiplang template remove <name>\n'); process.exit(1) }
@@ -345,13 +327,12 @@ if (cmd === 'template') {
     console.log(`\n  ✓  Removed template: ${tname}\n`); process.exit(0)
   }
 
-  // aiplang template edit <name>
   if (sub === 'edit' || sub === 'open') {
     const tname = args[1]
     if (!tname) { console.error('\n  ✗  Usage: aiplang template edit <name>\n'); process.exit(1) }
     let dest = path.join(TEMPLATES_DIR, tname + '.aip')
     if (!fs.existsSync(dest)) {
-      // create from built-in if exists
+
       const builtin = BUILTIN_TEMPLATES[tname]
       if (builtin) { fs.writeFileSync(dest, builtin); console.log(`\n  ✓  Copied built-in "${tname}" to custom templates.\n`) }
       else { console.error(`\n  ✗  Template "${tname}" not found.\n`); process.exit(1) }
@@ -362,7 +343,6 @@ if (cmd === 'template') {
     process.exit(0)
   }
 
-  // aiplang template show <name>
   if (sub === 'show' || sub === 'cat') {
     const tname = args[1] || 'default'
     const customPath = path.join(TEMPLATES_DIR, tname + '.aip')
@@ -372,7 +352,6 @@ if (cmd === 'template') {
     console.error(`\n  ✗  Template "${tname}" not found.\n`); process.exit(1)
   }
 
-  // aiplang template export <name> [--out <file>]
   if (sub === 'export') {
     const tname = args[1]
     if (!tname) { console.error('\n  ✗  Usage: aiplang template export <name>\n'); process.exit(1) }
@@ -390,7 +369,6 @@ if (cmd === 'template') {
   process.exit(1)
 }
 
-// ── Init ─────────────────────────────────────────────────────────
 if (cmd==='init') {
   const tplIdx = args.indexOf('--template')
   const tplName = tplIdx !== -1 ? args[tplIdx+1] : 'default'
@@ -399,15 +377,13 @@ if (cmd==='init') {
 
   if (fs.existsSync(dir)) { console.error(`\n  ✗  Directory "${name}" already exists.\n`); process.exit(1) }
 
-  // Get template source (built-in, custom, or file path)
   const tplSrc = getTemplate(tplName, name, year)
 
-  // Check if template has full-stack backend (models/api blocks)
   const isFullStack = tplSrc.includes('\nmodel ') || tplSrc.includes('\napi ')
   const isMultiFile = tplSrc.includes('\n---\n')
 
   if (isFullStack) {
-    // Full-stack project: single app.aip
+
     fs.mkdirSync(dir, { recursive: true })
     fs.writeFileSync(path.join(dir, 'app.aip'), tplSrc)
     fs.writeFileSync(path.join(dir, 'package.json'), JSON.stringify({
@@ -421,7 +397,7 @@ if (cmd==='init') {
     const label = tplName !== 'default' ? ` (template: ${tplName})` : ''
     console.log(`\n  ✓  Created ${name}/${label}\n\n     app.aip  ← full-stack app (backend + frontend)\n\n  Next:\n     cd ${name} && npx aiplang start app.aip\n`)
   } else if (isMultiFile) {
-    // Multi-page SSG project: pages/*.aip
+
     fs.mkdirSync(path.join(dir,'pages'), {recursive:true})
     fs.mkdirSync(path.join(dir,'public'), {recursive:true})
     for (const f of ['aiplang-runtime.js','aiplang-hydrate.js']) {
@@ -439,7 +415,7 @@ if (cmd==='init') {
     const files = fs.readdirSync(path.join(dir,'pages')).map(f=>f).join(', ')
     console.log(`\n  ✓  Created ${name}/${label}\n\n     pages/{${files}}  ← edit these\n\n  Next:\n     cd ${name} && npx aiplang serve\n`)
   } else {
-    // Single-page SSG project
+
     fs.mkdirSync(path.join(dir,'pages'), {recursive:true})
     fs.mkdirSync(path.join(dir,'public'), {recursive:true})
     for (const f of ['aiplang-runtime.js','aiplang-hydrate.js']) {
@@ -454,7 +430,6 @@ if (cmd==='init') {
   process.exit(0)
 }
 
-// ── New ───────────────────────────────────────────────────────────
 if (cmd==='new') {
   const name=args[0]; if(!name){console.error('\n  ✗  Usage: aiplang new <page>\n');process.exit(1)}
   const dir=fs.existsSync('pages')?'pages':'.'
@@ -466,7 +441,6 @@ if (cmd==='new') {
   process.exit(0)
 }
 
-// ── Build ─────────────────────────────────────────────────────────
 if (cmd==='build') {
   const outIdx=args.indexOf('--out')
   const outDir=outIdx!==-1?args[outIdx+1]:'dist'
@@ -476,7 +450,7 @@ if (cmd==='build') {
     fs.readdirSync(input).filter(f=>f.endsWith('.aip')).forEach(f=>files.push(path.join(input,f)))
   } else if(input.endsWith('.aip')&&fs.existsSync(input)){ files.push(input) }
   if(!files.length){console.error(`\n  ✗  No .aip files in: ${input}\n`);process.exit(1)}
-  // Resolve ~import directives recursively
+
   function resolveImports(content, baseDir, seen=new Set()) {
     return content.replace(/^~import\s+["']?([^"'\n]+)["']?$/mg, (_, importPath) => {
       const resolved = path.resolve(baseDir, importPath.trim())
@@ -511,7 +485,6 @@ if (cmd==='build') {
   process.exit(0)
 }
 
-// ── Serve (hot reload) ────────────────────────────────────────────
 if (cmd==='serve'||cmd==='dev') {
   const root=path.resolve(args[0]||'.')
   const port=parseInt(process.env.PORT||'3000')
@@ -549,7 +522,6 @@ if (cmd==='serve'||cmd==='dev') {
   return
 }
 
-// ── Dev server (full-stack) ──────────────────────────────────────
 if (cmd === 'start' || cmd === 'run') {
   const aipFile = args[0]
   if (!aipFile || !fs.existsSync(aipFile)) {
@@ -573,10 +545,6 @@ if (cmd === 'start' || cmd === 'run') {
 console.error(`\n  ✗  Unknown command: ${cmd}\n  Run aiplang --help\n`)
 process.exit(1)
 
-// ═════════════════════════════════════════════════════════════════
-// PARSER
-// ═════════════════════════════════════════════════════════════════
-
 function parsePages(src) {
   return src.split(/\n---\n/).map(s=>parsePage(s.trim())).filter(Boolean)
 }
@@ -619,8 +587,7 @@ function parseQuery(s) {
 }
 
 function parseBlock(line) {
-  // ── Extract suffix modifiers FIRST ──────────────────────────
-  // animate:fade-up class:my-class (can appear at end of any block line)
+
   let extraClass=null, animate=null
   const _cm=line.match(/\bclass:(\S+)/)
   if(_cm){extraClass=_cm[1];line=line.replace(_cm[0],'').trim()}
@@ -636,12 +603,10 @@ function parseBlock(line) {
   const _bgm=line.match(/\bbg:(#[0-9a-fA-F]+|[a-z]+)/)
   if(_bgm){bg=_bgm[1];line=line.replace(_bgm[0],'').trim()}
 
-  // ── raw{} HTML passthrough ──────────────────────────────────
   if(line.startsWith('raw{')) {
     return{kind:'raw',html:line.slice(4,line.lastIndexOf('}')),extraClass,animate}
   }
 
-  // ── table ───────────────────────────────────────────────────
   if(line.startsWith('table ') || line.startsWith('table{')) {
     const idx=line.indexOf('{');if(idx===-1) return null
     const start=line.startsWith('table{')?6:6
@@ -659,7 +624,6 @@ function parseBlock(line) {
     return{kind:'table',binding,cols:Array.isArray(cols)?cols:[],empty:parseEmpty(clean),editPath:em?.[2]||null,editMethod:em?.[1]||'PUT',deletePath:dm?.[1]||null,deleteKey:'id',fallback:fallbackM?.[1]?.trim()||null,retry:retryM?.[1]||null,extraClass,animate,variant,style,bg}
   }
 
-  // ── form ────────────────────────────────────────────────────
   if(line.startsWith('form ') || line.startsWith('form{')) {
     const bi=line.indexOf('{');if(bi===-1) return null
     let head=line.slice(line.startsWith('form{')?4:5,bi).trim()
@@ -667,7 +631,7 @@ function parseBlock(line) {
     let action='', optimistic=false; const ai=head.indexOf('=>')
     if(ai!==-1){
       action=head.slice(ai+2).trim()
-      // Optimistic: => @list.optimistic($result)
+
       if(action.includes('.optimistic(')){optimistic=true;action=action.replace('.optimistic','')}
       head=head.slice(0,ai).trim()
     }
@@ -677,7 +641,6 @@ function parseBlock(line) {
     return{kind:'form',method,bpath,action,optimistic,fields:parseFields(content)||[],extraClass,animate,variant,style,bg}
   }
 
-  // ── pricing ─────────────────────────────────────────────────
   if(line.startsWith('pricing{')) {
     const body=line.slice(8,line.lastIndexOf('}')).trim()
     const plans=body.split('|').map(p=>{
@@ -687,14 +650,12 @@ function parseBlock(line) {
     return{kind:'pricing',plans,extraClass,animate,variant,style,bg}
   }
 
-  // ── faq ─────────────────────────────────────────────────────
   if(line.startsWith('faq{')) {
     const body=line.slice(4,line.lastIndexOf('}')).trim()
     const items=body.split('|').map(i=>{const idx=i.indexOf('>');return{q:i.slice(0,idx).trim(),a:i.slice(idx+1).trim()}}).filter(i=>i.q&&i.a)
     return{kind:'faq',items,extraClass,animate}
   }
 
-  // ── testimonial ──────────────────────────────────────────────
   if(line.startsWith('testimonial{')) {
     const body=line.slice(12,line.lastIndexOf('}')).trim()
     const parts=body.split('|').map(x=>x.trim())
@@ -702,12 +663,10 @@ function parseBlock(line) {
     return{kind:'testimonial',author:parts[0],quote:parts[1]?.replace(/^"|"$/g,''),img:imgPart?.slice(4)||null,extraClass,animate}
   }
 
-  // ── gallery ──────────────────────────────────────────────────
   if(line.startsWith('gallery{')) {
     return{kind:'gallery',imgs:line.slice(8,line.lastIndexOf('}')).trim().split('|').map(x=>x.trim()).filter(Boolean),extraClass,animate}
   }
 
-  // ── btn ──────────────────────────────────────────────────────
   if(line.startsWith('btn{')) {
     const parts=line.slice(4,line.lastIndexOf('}')).split('>').map(p=>p.trim())
     const label=parts[0]||'Click', method=parts[1]?.split(' ')[0]||'POST'
@@ -717,7 +676,6 @@ function parseBlock(line) {
     return{kind:'btn',label,method,bpath,action,confirm,extraClass,animate}
   }
 
-  // ── card{} — standalone card customizável ──────────────────
   if(line.startsWith('card{') || line.startsWith('card ')) {
     const bi=line.indexOf('{'); if(bi===-1) return null
     const body=line.slice(bi+1,line.lastIndexOf('}')).trim()
@@ -731,7 +689,6 @@ function parseBlock(line) {
     return{kind:'card',title,subtitle,img:imgPart?.slice(4)||null,link:linkPart||null,badge,bind,extraClass,animate,variant,style,bg}
   }
 
-  // ── cols{} — grid de conteúdo livre ─────────────────────────
   if(line.startsWith('cols{') || (line.startsWith('cols ') && line.includes('{'))) {
     const bi=line.indexOf('{'); if(bi===-1) return null
     const head=line.slice(0,bi).trim()
@@ -742,19 +699,16 @@ function parseBlock(line) {
     return{kind:'cols',n,items,extraClass,animate,variant,style,bg}
   }
 
-  // ── divider{} — separador visual ─────────────────────────────
   if(line.startsWith('divider') || line.startsWith('hr{')) {
     const label=line.match(/\{([^}]*)\}/)?.[1]?.trim()||null
     return{kind:'divider',label,extraClass,animate,variant,style}
   }
 
-  // ── badge{} — label/tag destacado ───────────────────────────
   if(line.startsWith('badge{') || line.startsWith('tag{')) {
     const content=line.slice(line.indexOf('{')+1,line.lastIndexOf('}')).trim()
     return{kind:'badge',content,extraClass,animate,variant,style}
   }
 
-  // ── select ───────────────────────────────────────────────────
   if(line.startsWith('select ')) {
     const bi=line.indexOf('{')
     const varName=bi!==-1?line.slice(7,bi).trim():line.slice(7).trim()
@@ -762,13 +716,11 @@ function parseBlock(line) {
     return{kind:'select',binding:varName,options:body.split('|').map(o=>o.trim()).filter(Boolean),extraClass,animate}
   }
 
-  // ── if ───────────────────────────────────────────────────────
   if(line.startsWith('if ')) {
     const bi=line.indexOf('{');if(bi===-1) return null
     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()
@@ -781,7 +733,6 @@ function parseBlock(line) {
     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()
@@ -793,7 +744,6 @@ function parseBlock(line) {
     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()
@@ -804,7 +754,6 @@ function parseBlock(line) {
     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
     const binding=line.slice(5,bi).trim()
@@ -812,18 +761,15 @@ function parseBlock(line) {
     return{kind:'each',binding,tpl,extraClass,animate,variant}
   }
 
-  // ── spacer{} — espaçamento customizável ──────────────────────
   if(line.startsWith('spacer{') || line.startsWith('spacer ')) {
     const h=line.match(/[{\s](\S+)[}]?/)?.[1]||'3rem'
     return{kind:'spacer',height:h,extraClass,animate}
   }
 
-  // ── html{} — HTML inline com interpolação de @state ──────────
   if(line.startsWith('html{')) {
     return{kind:'html',content:line.slice(5,line.lastIndexOf('}')),extraClass,animate}
   }
 
-  // ── regular blocks (nav, hero, stats, rowN, sect, foot) ──────
   const bi=line.indexOf('{');if(bi===-1) return null
   const head=line.slice(0,bi).trim()
   const body=line.slice(bi+1,line.lastIndexOf('}')).trim()
@@ -846,25 +792,55 @@ function parseCols(s){return s.split('|').map(c=>{c=c.trim();if(c.startsWith('em
 function parseEmpty(s){const m=s.match(/empty:\s*([^|]+)/);return m?m[1].trim():'No data.'}
 function parseFields(s){return s.split('|').map(f=>{const[label,type,ph]=f.split(':').map(x=>x.trim());return label?{label,type:type||'text',placeholder:ph||'',name:label.toLowerCase().replace(/\s+/g,'_')}:null}).filter(Boolean)}
 
-// ═════════════════════════════════════════════════════════════════
-// RENDERER
-// ═════════════════════════════════════════════════════════════════
-
 function applyMods(html, b) {
   if(!html||(!b.extraClass&&!b.animate)) return html
   const cls=[(b.extraClass||''),(b.animate?'fx-anim-'+b.animate:'')].filter(Boolean).join(' ')
-  // Inject into first tag's class attribute (handles multiline HTML)
+
   return html.replace(/class="([^"]*)"/, (_,c)=>`class="${c} ${cls}"`)
 }
 
 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,stores:page.stores||[],computed:page.computed||{}}):''
+
+  const tableBlocks = page.blocks.filter(b => b.kind === 'table' && b.binding && b.cols && b.cols.length)
+  const numericKeys = ['score','count','total','amount','price','value','qty','age','rank','num','int','float','rate','pct','percent']
+  const compiledDiffs = tableBlocks.map(b => {
+    const binding = b.binding.replace(/^@/, '')
+
+    const safeId = s => (s||'').replace(/[^a-zA-Z0-9_]/g, '_').slice(0,64) || 'col'
+    const safeBinding = safeId(binding)
+    const colDefs = b.cols.map((col, j) => ({
+      key: safeId(col.key),
+      origKey: col.key,
+      idx: j,
+      numeric: numericKeys.some(kw => col.key.toLowerCase().includes(kw))
+    }))
+    const initParts = colDefs.map(d =>
+      d.numeric ? `c${d.idx}:new Float64Array(rows.map(r=>+(r.${JSON.stringify(d.origKey)}===undefined?r['${d.origKey}']:r[${JSON.stringify(d.origKey)}])||0))`
+                : `c${d.idx}:rows.map(r=>r[${JSON.stringify(d.origKey)}]??'')`
+    ).join(',')
+    const diffParts = colDefs.map(d => {
+      const k = JSON.stringify(d.origKey)
+      return d.numeric
+        ? `if(c${d.idx}[i]!==(r[${k}]||0)){c${d.idx}[i]=r[${k}]||0;p.push(i<<4|${d.idx})}`
+        : `if(c${d.idx}[i]!==r[${k}]){c${d.idx}[i]=r[${k}];p.push(i<<4|${d.idx})}`
+    }).join(';')
+    return [
+      `window.__aip_init_${safeBinding}=function(rows){return{${initParts}}};`,
+      `window.__aip_diff_${safeBinding}=function(rows,cache){`,
+      `const n=rows.length,p=[],${colDefs.map(d=>`c${d.idx}=cache.c${d.idx}`).join(',')};`,
+      `for(let i=0;i<n;i++){const r=rows[i];${diffParts}}return p};`
+    ].join('')
+  }).join('\n')
+  const compiledScript = compiledDiffs.length
+    ? `<script>/* aiplang compiled-diffs */\n${compiledDiffs}\n</script>`
+    : ''
+  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||{},compiledTables:tableBlocks.map(b=>(b.binding||'').replace(/^@/,'').replace(/[^a-zA-Z0-9_]/g,'_').slice(0,64))}):''
   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):''
-  // Extract app name from nav brand if available
+
   const _navBlock = page.blocks.find(b=>b.kind==='nav')
   const _brand = _navBlock?.brand || ''
   const _title = _brand ? `${esc(_brand)} — ${esc(page.id.charAt(0).toUpperCase()+page.id.slice(1))}` : esc(page.id.charAt(0).toUpperCase()+page.id.slice(1))
@@ -920,7 +896,6 @@ function renderBlock(b, page) {
   }
 }
 
-// ── Chart — lazy-loads Chart.js from CDN ────────────────────────
 function rChart(b) {
   const id = 'chart_' + Math.random().toString(36).slice(2,8)
   const binding = b.binding || ''
@@ -931,7 +906,6 @@ function rChart(b) {
 </div>\n`
 }
 
-// ── Kanban — drag-and-drop board ─────────────────────────────────
 function rKanban(b) {
   const cols = (b.cols||['Todo','In Progress','Done'])
   const colsHtml = cols.map(col => `
@@ -943,7 +917,6 @@ function rKanban(b) {
   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}>
@@ -1029,7 +1002,7 @@ function rRow(b) {
     pink:'#ec4899',cyan:'#06b6d4',lime:'#84cc16',amber:'#f59e0b'
   }
   const cards=(b.items||[]).map(item=>{
-    // First token can be color: red|rocket>Title>Body
+
     let colorStyle='', firstIdx=0
     if(item[0]&&!item[0].isImg&&!item[0].isLink){
       const colorKey=item[0].text?.toLowerCase()
@@ -1150,7 +1123,6 @@ function rGallery(b) {
   return `<div class="fx-gallery">${imgs}</div>\n`
 }
 
-// ── Theme helpers ─────────────────────────────────────────────────
 function genCustomThemeVars(ct) {
   return `body{background:${ct.bg};color:${ct.text}}.fx-nav{background:${ct.bg}cc;border-bottom:1px solid ${ct.text}18}.fx-cta,.fx-btn{background:${ct.accent};color:#fff}.fx-card{background:${ct.surface||ct.bg};border:1px solid ${ct.text}15}.fx-form{background:${ct.surface||ct.bg};border:1px solid ${ct.text}15}.fx-input{background:${ct.bg};border:1px solid ${ct.text}30;color:${ct.text}}.fx-stat-lbl,.fx-card-body,.fx-sub,.fx-sect-body,.fx-footer-text{color:${ct.text}88}.fx-th,.fx-nav-link{color:${ct.text}77}.fx-footer{border-top:1px solid ${ct.text}15}.fx-th{border-bottom:1px solid ${ct.text}15}`
 }
@@ -1170,10 +1142,6 @@ function genThemeVarCSS(t) {
   return r.join('')
 }
 
-// ═════════════════════════════════════════════════════════════════
-// CSS
-// ═════════════════════════════════════════════════════════════════
-
 function css(theme) {
   const base=`*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:-apple-system,'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}a{text-decoration:none;color:inherit}input,button,select{font-family:inherit}img{max-width:100%;height:auto}.fx-nav{display:flex;align-items:center;justify-content:space-between;padding:1rem 2.5rem;position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);flex-wrap:wrap;gap:.5rem}.fx-brand{font-size:1.25rem;font-weight:800;letter-spacing:-.03em}.fx-nav-links{display:flex;align-items:center;gap:1.75rem}.fx-nav-link{font-size:.875rem;font-weight:500;opacity:.65;transition:opacity .15s}.fx-nav-link:hover{opacity:1}.fx-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.25rem}.fx-hamburger span{display:block;width:22px;height:2px;background:currentColor;transition:all .2s;border-radius:1px}.fx-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.fx-hamburger.open span:nth-child(2){opacity:0}.fx-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}@media(max-width:640px){.fx-hamburger{display:flex}.fx-nav-links{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:.75rem;padding:.75rem 0}.fx-nav-links.open{display:flex}}.fx-hero{display:flex;align-items:center;justify-content:center;min-height:92vh;padding:4rem 1.5rem}.fx-hero-split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;padding:4rem 2.5rem;min-height:70vh}@media(max-width:768px){.fx-hero-split{grid-template-columns:1fr}}.fx-hero-img{width:100%;border-radius:1.25rem;object-fit:cover;max-height:500px}.fx-hero-inner{max-width:56rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem}.fx-hero-split .fx-hero-inner{text-align:left;align-items:flex-start;max-width:none}.fx-title{font-size:clamp(2.5rem,8vw,5.5rem);font-weight:900;letter-spacing:-.04em;line-height:1}.fx-sub{font-size:clamp(1rem,2vw,1.25rem);line-height:1.75;max-width:40rem}.fx-cta{display:inline-flex;align-items:center;padding:.875rem 2.5rem;border-radius:.75rem;font-weight:700;font-size:1rem;letter-spacing:-.01em;transition:transform .15s;margin:.25rem}.fx-cta:hover{transform:translateY(-1px)}.fx-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:3rem;padding:5rem 2.5rem;text-align:center}.fx-stat-val{font-size:clamp(2.5rem,5vw,4rem);font-weight:900;letter-spacing:-.04em;line-height:1}.fx-stat-lbl{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;margin-top:.5rem}.fx-grid{display:grid;gap:1.25rem;padding:1rem 2.5rem 5rem}.fx-grid-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.fx-grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}.fx-grid-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}.fx-card{border-radius:1rem;padding:1.75rem;transition:transform .2s,box-shadow .2s}.fx-card:hover{transform:translateY(-2px)}.fx-card-img{width:100%;border-radius:.75rem;object-fit:cover;height:180px;margin-bottom:1rem}.fx-icon{font-size:2rem;margin-bottom:1rem}.fx-card-title{font-size:1.0625rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.5rem}.fx-card-body{font-size:.875rem;line-height:1.65}.fx-card-link{font-size:.8125rem;font-weight:600;display:inline-block;margin-top:1rem;opacity:.6;transition:opacity .15s}.fx-card-link:hover{opacity:1}.fx-sect{padding:5rem 2.5rem}.fx-sect-title{font-size:clamp(1.75rem,4vw,3rem);font-weight:800;letter-spacing:-.04em;margin-bottom:1.5rem;text-align:center}.fx-sect-body{font-size:1rem;line-height:1.75;text-align:center;max-width:48rem;margin:0 auto}.fx-form-wrap{padding:3rem 2.5rem;display:flex;justify-content:center}.fx-form{width:100%;max-width:28rem;border-radius:1.25rem;padding:2.5rem}.fx-field{margin-bottom:1.25rem}.fx-label{display:block;font-size:.8125rem;font-weight:600;margin-bottom:.5rem}.fx-input{width:100%;padding:.75rem 1rem;border-radius:.625rem;font-size:.9375rem;outline:none;transition:box-shadow .15s}.fx-input:focus{box-shadow:0 0 0 3px rgba(37,99,235,.35)}.fx-btn{width:100%;padding:.875rem 1.5rem;border:none;border-radius:.625rem;font-size:.9375rem;font-weight:700;cursor:pointer;margin-top:.5rem;transition:transform .15s,opacity .15s;letter-spacing:-.01em}.fx-btn:hover{transform:translateY(-1px)}.fx-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.fx-btn-wrap{padding:0 2.5rem 1.5rem}.fx-standalone-btn{width:auto;padding:.75rem 2rem;margin-top:0}.fx-form-msg{font-size:.8125rem;padding:.5rem 0;min-height:1.5rem;text-align:center}.fx-form-err{color:#f87171}.fx-form-ok{color:#4ade80}.fx-table-wrap{overflow-x:auto;padding:0 2.5rem 4rem}.fx-table{width:100%;border-collapse:collapse;font-size:.875rem}.fx-th{text-align:left;padding:.875rem 1.25rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.fx-th-actions{opacity:.6}.fx-tr{transition:background .1s}.fx-td{padding:.875rem 1.25rem}.fx-td-empty{padding:2rem 1.25rem;text-align:center;opacity:.4}.fx-td-actions{white-space:nowrap;padding:.5rem 1rem!important}.fx-action-btn{border:none;cursor:pointer;font-size:.75rem;font-weight:600;padding:.3rem .75rem;border-radius:.375rem;margin-right:.375rem;font-family:inherit;transition:opacity .15s}.fx-action-btn:hover{opacity:.85}.fx-edit-btn{background:#1e40af;color:#93c5fd}.fx-delete-btn{background:#7f1d1d;color:#fca5a5}.fx-select-wrap{padding:.5rem 2.5rem}.fx-select-block{width:auto;min-width:200px;margin-top:0}.fx-pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.5rem;padding:2rem 2.5rem 5rem;align-items:start}.fx-pricing-card{border-radius:1.25rem;padding:2rem;position:relative;transition:transform .2s}.fx-pricing-featured{transform:scale(1.03)}.fx-pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#2563eb;color:#fff;font-size:.7rem;font-weight:700;padding:.25rem .875rem;border-radius:999px;white-space:nowrap;letter-spacing:.05em}.fx-pricing-name{font-size:.875rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem;opacity:.7}.fx-pricing-price{font-size:3rem;font-weight:900;letter-spacing:-.05em;line-height:1;margin-bottom:.75rem}.fx-pricing-desc{font-size:.875rem;line-height:1.65;margin-bottom:1.5rem;opacity:.7}.fx-pricing-cta{display:block;text-align:center;padding:.75rem;border-radius:.625rem;font-weight:700;font-size:.9rem;transition:opacity .15s}.fx-pricing-cta:hover{opacity:.85}.fx-faq{max-width:48rem;margin:0 auto}.fx-faq-item{border-radius:.75rem;margin-bottom:.625rem;cursor:pointer;overflow:hidden;transition:background .15s}.fx-faq-q{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;font-size:.9375rem;font-weight:600}.fx-faq-arrow{transition:transform .2s;font-size:.75rem;opacity:.5}.fx-faq-item.open .fx-faq-arrow{transform:rotate(90deg)}.fx-faq-a{max-height:0;overflow:hidden;padding:0 1.25rem;font-size:.875rem;line-height:1.7;transition:max-height .3s,padding .3s}.fx-faq-item.open .fx-faq-a{max-height:300px;padding:.75rem 1.25rem 1.25rem}.fx-testi-wrap{padding:5rem 2.5rem;display:flex;justify-content:center}.fx-testi{max-width:42rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.25rem}.fx-testi-img{width:64px;height:64px;border-radius:50%;object-fit:cover}.fx-testi-avatar{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;background:#1e293b}.fx-testi-quote{font-size:1.25rem;line-height:1.7;font-style:italic;opacity:.9}.fx-testi-author{font-size:.875rem;font-weight:600;opacity:.5}.fx-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem;padding:1rem 2.5rem 4rem}.fx-gallery-item{border-radius:.75rem;overflow:hidden;aspect-ratio:4/3}.fx-gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.fx-gallery-item:hover img{transform:scale(1.04)}.fx-if-wrap{display:contents}.fx-footer{padding:3rem 2.5rem;text-align:center}.fx-footer-text{font-size:.8125rem}.fx-footer-link{font-size:.8125rem;margin:0 .75rem;opacity:.5;transition:opacity .15s}.fx-footer-link:hover{opacity:1}
 .fx-hero-minimal{min-height:50vh!important}

package/package.json

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

package/runtime/aiplang-hydrate.js

@@ -6,23 +6,20 @@
 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 {}
+  try { sessionStorage.setItem(_STORE_KEY, JSON.stringify(_globalStore)) } catch(_e) { if(typeof console !== 'undefined') console.debug('[aiplang]',_e?.message) }
+  try { new BroadcastChannel(_STORE_KEY).postMessage({ key, value }) } catch(_e) { if(typeof console !== 'undefined') console.debug('[aiplang]',_e?.message) }
 }
 
-// ── Page-level State ─────────────────────────────────────────────
 const _state = {}
 const _watchers = {}
 const _storeKeys = new Set((cfg.stores || []).map(s => s.key))
 
-// 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 }
@@ -31,14 +28,14 @@ for (const [k, v] of Object.entries({ ...(cfg.state || {}), ..._boot })) {
 function get(key) { return _state[key] }
 
 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
@@ -46,13 +43,12 @@ function set(key, value, _persist) {
   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 {}
+} catch(_e) { if(typeof console !== 'undefined') console.debug('[aiplang]',_e?.message) }
 
 function watch(key, cb) {
   if (!_watchers[key]) _watchers[key] = []
@@ -77,8 +73,7 @@ function notify(key) {
   _pending.add(key)
   if (!_batchScheduled) {
     _batchScheduled = true
-    // 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)
     })
@@ -105,14 +100,54 @@ function resolvePath(tmpl, row) {
 
 const _intervals = []
 
+const _sid = Math.random().toString(36).slice(2)
+
 async function runQuery(q) {
   const path = resolve(q.path)
-  const opts = { method: q.method, headers: { 'Content-Type': 'application/json' } }
+  const isGet = (q.method || 'GET').toUpperCase() === 'GET'
+  const opts = {
+    method: q.method || 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      'Accept': 'application/msgpack, application/json',
+      'x-session-id': _sid
+    }
+  }
+
+  if (isGet && q._deltaReady) opts.headers['x-aiplang-delta'] = '1'
   if (q.body) opts.body = JSON.stringify(q.body)
   try {
-    const res  = await fetch(path, opts)
+    const res = await fetch(path, opts)
+
+    if (res.status === 304) { q._deltaReady = true; return get(q.target?.replace(/^@/,'')) || null }
     if (!res.ok) throw new Error('HTTP ' + res.status)
-    const data = await res.json()
+    const ct = res.headers.get('Content-Type') || ''
+    let data
+    if (ct.includes('msgpack')) {
+      const buf = await res.arrayBuffer()
+      data = _mp.decode(new Uint8Array(buf))
+    } else {
+      data = await res.json()
+    }
+
+    if (data && data.__delta) {
+      const key = q.target ? q.target.replace(/^@/, '') : null
+      if (key) {
+        const current = [...(get(key) || [])]
+
+        for (const row of (data.changed || [])) {
+          const idx = current.findIndex(r => r.id === row.id)
+          if (idx >= 0) current[idx] = row; else current.push(row)
+        }
+
+        const delSet = new Set(data.deleted || [])
+        const merged = current.filter(r => !delSet.has(r.id))
+        set(key, merged)
+        q._deltaReady = true
+        return merged
+      }
+    }
+    q._deltaReady = true
     applyAction(data, q.target, q.action)
     return data
   } catch (e) {
@@ -147,7 +182,7 @@ function applyAction(data, target, action) {
           return true
         })
         set(fm[1], filtered)
-      } catch {}
+      } catch(_e) { if(typeof console !== 'undefined') console.debug('[aiplang]',_e?.message) }
       return
     }
     const am = action.match(/^@([a-zA-Z_]+)\s*=\s*\$result$/)
@@ -281,15 +316,12 @@ 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 _rowCache = new Map()
     const _colKeys = cols.map(c => c.key)
     let _initialized = false
 
     const renderRow = (row, idx) => {
-      // (defined above, used by virtual scroll too)
+
     }
 
     const render = () => {
@@ -297,7 +329,6 @@ function hydrateTables() {
       let rows   = get(key)
       if (!Array.isArray(rows)) rows = []
 
-      // Empty state
       if (!rows.length) {
         tbody.innerHTML = ''
         _rowCache.clear()
@@ -428,9 +459,8 @@ function hydrateTables() {
         tbody.appendChild(tr)
       }
 
-      // ── Surgical update vs full initial build ────────────────────
       if (!_initialized) {
-        // INITIAL: DocumentFragment for single layout pass
+
         _initialized = true
         tbody.innerHTML = ''
         const frag = document.createDocumentFragment()
@@ -446,7 +476,7 @@ function hydrateTables() {
             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'
@@ -484,16 +514,19 @@ function hydrateTables() {
           frag.appendChild(tr)
         }
         tbody.appendChild(frag)
-        // Build TypedArray cache for ultra-fast subsequent diffs (beats Vue Vapor)
+
         try {
           const tc = _buildTypedCache(rows, _colKeys)
           _rowCache._typed = tc
-        } catch {}
+
+          const compiledInit = window['__aip_init_' + stateKey]
+          if (compiledInit) {
+            _rowCache._compiled   = compiledInit(rows)
+            _rowCache._compiled_n = rows.length
+            _rowCache._ids        = rows.map(r => r.id != null ? r.id : null)
+          }
+        } catch(_e) { if(typeof console !== 'undefined') console.debug('[aiplang]',_e?.message) }
       } else {
-        // UPDATE: off-main-thread diff + requestIdleCallback
-        // For 500+ rows: Worker computes diff on separate CPU core
-        // For <500 rows: sync diff (worker overhead not worth it)
-        // DOM patches always run on main thread but are minimal
 
         const _makeRow = (row, idx) => {
           const tr = document.createElement('tr')
@@ -531,10 +564,10 @@ function hydrateTables() {
         }
 
         if (rows.length >= 500) {
-          // Large: worker diff → idle callback apply (zero main thread impact)
+
           _diffAsync(rows, _colKeys, _rowCache).then(result => _schedIdle(() => _applyResult(result)))
         } else {
-          // Small: sync diff, immediate apply
+
           _applyResult(_diffSync(rows, _colKeys, _rowCache))
         }
       }
@@ -648,7 +681,7 @@ 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])
-    // 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('.')
@@ -826,19 +859,20 @@ function injectActionCSS() {
   document.head.appendChild(style)
 }
 
-// ═══════════════════════════════════════════════════════════════════
-// OFF-MAIN-THREAD ENGINE — better than React Fiber
-// Fiber splits work across frames on the SAME thread.
-// This moves diff computation to a SEPARATE CPU core via Web Worker.
-// Main thread only handles tiny DOM patches — never competes with animations.
-// ═══════════════════════════════════════════════════════════════════
+const _workerSrc = `
+'use strict'
+
+let _sab = null, _sabView = null
 
-const _workerSrc = `'use strict'
 self.onmessage = function(e) {
-  const { type, rows, colKeys, cache, reqId } = e.data
+  const { type, rows, colKeys, cache, reqId, sab } = e.data
+
+  if (sab) { _sab = sab; _sabView = new Int32Array(sab) }
+
   if (type !== 'diff') return
   const patches = [], inserts = [], deletes = []
   const seenIds = new Set()
+
   for (let i = 0; i < rows.length; i++) {
     const row = rows[i]
     const id = row.id != null ? row.id : i
@@ -852,15 +886,31 @@ self.onmessage = function(e) {
     }
   }
   for (const id in cache) {
-    const nid = typeof id === 'number' ? id : (isNaN(id) ? id : Number(id))
+    const nid = isNaN(id) ? id : Number(id)
     if (!seenIds.has(String(id)) && !seenIds.has(nid)) deletes.push(id)
   }
-  self.postMessage({ type: 'patches', patches, inserts, deletes, reqId })
-}`
+
+  if (_sabView && patches.length < 8000) {
+    Atomics.store(_sabView, 0, patches.length)
+    for (let i = 0; i < patches.length; i++) {
+
+      _sabView[1 + i*3]   = typeof patches[i].id === 'number' ? patches[i].id : patches[i].id.length
+      _sabView[1 + i*3+1] = patches[i].col
+      _sabView[1 + i*3+2] = 0
+    }
+    Atomics.store(_sabView, 0, patches.length | 0x80000000)
+
+    self.postMessage({ type: 'patches', patches, inserts, deletes, reqId, usedSAB: true })
+  } else {
+    self.postMessage({ type: 'patches', patches, inserts, deletes, reqId, usedSAB: false })
+  }
+}
+`
 
 let _diffWorker = null
 const _wCbs = new Map()
 let _wReq = 0
+let _wSAB = null
 
 function _getWorker() {
   if (_diffWorker) return _diffWorker
@@ -871,6 +921,12 @@ function _getWorker() {
       if (cb) { cb(e.data); _wCbs.delete(e.data.reqId) }
     }
     _diffWorker.onerror = () => { _diffWorker = null }
+
+    try {
+      const sab = new SharedArrayBuffer(8000 * 3 * 4 + 4)
+      _diffWorker.postMessage({ type: 'init_sab', sab }, [])
+      _wSAB = new Int32Array(sab)
+    } catch(_e) { if(typeof console !== 'undefined') console.debug('[aiplang]',_e?.message) }
   } catch { _diffWorker = null }
   return _diffWorker
 }
@@ -887,35 +943,30 @@ function _diffAsync(rows, colKeys, rowCache) {
   })
 }
 
-// ── TypedArray positional cache — beats Vue Vapor at all sizes ───
-// Float64Array for numeric fields, Uint8Array for status/enum
-// No Map.get in hot loop — pure positional array scan
-// Strategy: string-compare first for status (cheap), only encode int on change
-
 function _buildTypedCache(rows, colKeys) {
   const n = rows.length
   const isNum = colKeys.map(k => {
     const v = rows[0]?.[k]; return typeof v === 'number' || (v != null && !isNaN(Number(v)) && typeof v !== 'string')
   })
   const scores   = new Float64Array(n)
-  const statuses = new Uint8Array(n)  // status/enum col (first non-numeric)
-  const strCols  = []                  // which colKeys are strings
+  const statuses = new Uint8Array(n)
+  const strCols  = []
   colKeys.forEach((k,j) => {
     if (!isNum[j]) strCols.push(j)
   })
   rows.forEach((r,i) => {
-    // Numeric fields → Float64Array
+
     colKeys.forEach((k,j) => { if(isNum[j]) { const buf=j===0?scores:null; if(buf) buf[i]=Number(r[k])||0 } })
-    // Primary numeric col (usually score/value)
+
     const numIdx = colKeys.findIndex((_,j)=>isNum[j] && j>1)
     if(numIdx>=0) scores[i] = Number(rows[i][colKeys[numIdx]])||0
-    // Primary enum col
+
     const enumIdx = colKeys.findIndex((_,j)=>!isNum[j] && j>1)
     if(enumIdx>=0) statuses[i] = _STATUS_INT[rows[i][colKeys[enumIdx]]]??0
   })
   return {
     scores, statuses,
-    prevVals: colKeys.map(k => rows.map(r => r[k])), // string cache per column
+    prevVals: colKeys.map(k => rows.map(r => r[k])),
     isNum, colKeys, n,
     ids: rows.map(r => r.id)
   }
@@ -925,14 +976,31 @@ function _diffSync(rows, colKeys, rowCache) {
   const patches = [], inserts = [], deletes = [], seen = new Set()
   const nCols = colKeys.length
 
-  // FAST PATH: TypedArray positional scan — beats Vue Vapor at all sizes
-  // Condition: row count unchanged (typical for polling updates)
+  const compiledKey = stateKey
+  const compiledInit = window['__aip_init_' + compiledKey]
+  const compiledDiff = window['__aip_diff_' + compiledKey]
+
+  if (compiledDiff && rowCache._compiled && rows.length === rowCache._compiled_n
+      && rows.length > 0 && rowCache._ids?.length === rows.length) {
+
+    const raw = compiledDiff(rows, rowCache._compiled)
+    for (const pack of raw) {
+      const i = pack >> 4, col = pack & 0xf
+      const id = rowCache._ids[i]
+      if (id != null) {
+        seen.add(id)
+        patches.push({ id, col, val: rows[i][colKeys[col]] })
+      }
+    }
+    for (const [id] of rowCache) if (id !== '_compiled' && id !== '_ids' && id !== '_compiled_n' && !seen.has(id)) deletes.push(id)
+    return { patches, inserts, deletes }
+  }
+
   const tc = rowCache._typed
   if (tc && rows.length === tc.n) {
     for (let i = 0; i < rows.length; i++) {
       const r = rows[i], id = tc.ids[i]
       seen.add(id)
-      // Per-column diff using per-column strategy
       for (let j = 0; j < nCols; j++) {
         const k = colKeys[j]
         const newVal = r[k]
@@ -947,7 +1015,6 @@ function _diffSync(rows, colKeys, rowCache) {
     return { patches, inserts, deletes }
   }
 
-  // STANDARD PATH: Map-based diff (first render or variable-length data)
   for (let i = 0; i < rows.length; i++) {
     const r = rows[i], id = r.id != null ? r.id : i
     seen.add(id)
@@ -971,8 +1038,6 @@ function _diffSync(rows, colKeys, rowCache) {
   return { patches, inserts, deletes }
 }
 
-// requestIdleCallback scheduler — runs low-priority work when browser is idle
-// Polling updates (30s intervals) don't need to be urgent — let animations breathe
 const _idleQ = []
 let _idleSched = false
 const _ric = window.requestIdleCallback
@@ -990,13 +1055,11 @@ function _schedIdle(fn) {
 function _flushIdle(dl) {
   _idleSched = false
   while (_idleQ.length && dl.timeRemaining() > 1) {
-    try { _idleQ.shift()() } catch {}
+    try { _idleQ.shift()() } catch(_e) { if(typeof console !== 'undefined') console.debug('[aiplang]',_e?.message) }
   }
   if (_idleQ.length) { _idleSched = true; _ric(_flushIdle, { timeout: 5000 }) }
 }
 
-// Incremental renderer — processes rows in chunks between animation frames
-// Zero dropped frames on 100k+ row datasets
 async function _renderIncremental(items, renderFn, chunkSize = 200) {
   for (let i = 0; i < items.length; i += chunkSize) {
     const chunk = items.slice(i, i + chunkSize)
@@ -1007,9 +1070,6 @@ async function _renderIncremental(items, renderFn, chunkSize = 200) {
   }
 }
 
-
-// ── Global reusable TypedArray buffers — zero allocation in hot path ──
-// Pre-allocated at startup, reused across every table render cycle
 const _MAX_ROWS   = 100000
 const _scoreBuf   = new Float64Array(_MAX_ROWS)
 const _statusBuf  = new Uint8Array(_MAX_ROWS)
@@ -1018,6 +1078,45 @@ const _STATUS_INT = {active:0,inactive:1,pending:2,blocked:3,
   pending:2,done:3,todo:0,doing:1,done:2,
   new:0,open:1,closed:2,resolved:3}
 
+const _mp = (() => {
+  const td = new TextDecoder()
+  function decode(buf) {
+    const b = buf instanceof ArrayBuffer ? new Uint8Array(buf) : buf
+    return _read(b, {p:0})
+  }
+  function _read(b, s) {
+    const t = b[s.p++]
+    if (t <= 0x7f) return t
+    if (t >= 0xe0) return t - 256
+    if ((t & 0xe0) === 0xa0) return _str(b, s, t & 0x1f)
+    if ((t & 0xf0) === 0x90) return _arr(b, s, t & 0xf)
+    if ((t & 0xf0) === 0x80) return _map(b, s, t & 0xf)
+    switch (t) {
+      case 0xc0: return null
+      case 0xc2: return false
+      case 0xc3: return true
+      case 0xca: { const v=new DataView(b.buffer,b.byteOffset+s.p,4); s.p+=4; return v.getFloat32(0) }
+      case 0xcb: { const v=new DataView(b.buffer,b.byteOffset+s.p,8); s.p+=8; return v.getFloat64(0) }
+      case 0xcc: return b[s.p++]
+      case 0xcd: { const v=(b[s.p]<<8)|b[s.p+1]; s.p+=2; return v }
+      case 0xce: { const v=new DataView(b.buffer,b.byteOffset+s.p,4); s.p+=4; return v.getUint32(0) }
+      case 0xd0: { const v=b[s.p++]; return v>127?v-256:v }
+      case 0xd1: { const v=(b[s.p]<<8)|b[s.p+1]; s.p+=2; return v>32767?v-65536:v }
+      case 0xd2: { const v=new DataView(b.buffer,b.byteOffset+s.p,4); s.p+=4; return v.getInt32(0) }
+      case 0xd9: { const n=b[s.p++]; return _str(b,s,n) }
+      case 0xda: { const n=(b[s.p]<<8)|b[s.p+1]; s.p+=2; return _str(b,s,n) }
+      case 0xdc: { const n=(b[s.p]<<8)|b[s.p+1]; s.p+=2; return _arr(b,s,n) }
+      case 0xdd: { const v=new DataView(b.buffer,b.byteOffset+s.p,4); s.p+=4; return _arr(b,s,v.getUint32(0)) }
+      case 0xde: { const n=(b[s.p]<<8)|b[s.p+1]; s.p+=2; return _map(b,s,n) }
+      default: return null
+    }
+  }
+  function _str(b,s,n){const v=td.decode(b.subarray(s.p,s.p+n));s.p+=n;return v}
+  function _arr(b,s,n){const a=[];for(let i=0;i<n;i++)a.push(_read(b,s));return a}
+  function _map(b,s,n){const o={};for(let i=0;i<n;i++){const k=_read(b,s);o[k]=_read(b,s)}return o}
+  return { decode }
+})()
+
 function loadSSRData() {
   const ssr = window.__SSR_DATA__
   if (!ssr) return
@@ -1077,10 +1176,21 @@ function hydrateTableErrors() {
         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>`
+
+              tbody.innerHTML = ''
+              const _fe = (() => {
+                const tr=document.createElement('tr'), td=document.createElement('td')
+                td.colSpan=cols.length+2; td.className='fx-td-empty'; td.style.color='#f87171'
+                td.textContent=fallback
+                if(retryPath){
+                  const btn=document.createElement('button')
+                  btn.textContent='↻ Retry'; btn.style.cssText='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'
+                  btn.onclick=()=>window.__aiplang_retry&&window.__aiplang_retry(binding,retryPath)
+                  td.appendChild(btn)
+                }
+                tr.appendChild(td); return tr
+              })()
+              tbody.appendChild(_fe)
           }
         }
       })

package/server/server.js

@@ -246,6 +246,72 @@ async function processQueue() {
 
 // ── Cache in-memory com TTL ──────────────────────────────────────
 const _cache = new Map()
+// ── Delta update cache ─────────────────────────────────────────────
+// Stores a hash of each row per client session to send only changes
+// Key: sessionId:binding → Map<rowId, hash>
+const _deltaCache = new Map()
+const _DELTA_TTL  = 60000  // 1 min: expire client state
+const _DELTA_MAX  = 2000   // max concurrent sessions (prevent memory DoS)
+
+function _rowHash(row) {
+  // FNV-1a 32-bit — fast, low collision for row change detection
+  // Only hashes enumerable own properties to avoid prototype pollution
+  let h = 2166136261
+  const keys = Object.keys(row).sort()
+  for (const k of keys) {
+    const v = row[k]
+    if (v === null || v === undefined) continue
+    const s = k + ':' + String(v)
+    for (let i = 0; i < s.length; i++) {
+      h = (h ^ s.charCodeAt(i)) >>> 0
+      h = Math.imul(h, 16777619) >>> 0
+    }
+  }
+  return h >>> 0
+}
+
+function _getDelta(sessionId, binding, rows) {
+  const key = sessionId + ':' + binding
+  const prev = _deltaCache.get(key)
+  // First request — send full dataset, store hashes
+  if (!prev) {
+    // Evict oldest entry when at capacity (LRU approximation)
+    if (_deltaCache.size >= _DELTA_MAX) {
+      let oldest = null, oldestTs = Infinity
+      for (const [k, v] of _deltaCache) if (v.ts < oldestTs) { oldest = k; oldestTs = v.ts }
+      if (oldest) _deltaCache.delete(oldest)
+    }
+    const hashes = new Map(rows.map(r => [r.id, _rowHash(r)]))
+    _deltaCache.set(key, { hashes, ts: Date.now() })
+    return { full: true, rows }
+  }
+  // Subsequent: compute delta
+  const changed = [], deleted = []
+  const newHashes = new Map()
+  for (const row of rows) {
+    const h = _rowHash(row)
+    newHashes.set(row.id, h)
+    if (prev.hashes.get(row.id) !== h) changed.push(row)
+  }
+  for (const [id] of prev.hashes) {
+    if (!newHashes.has(id)) deleted.push(id)
+  }
+  prev.hashes = newHashes; prev.ts = Date.now()
+  // Nothing changed — return 304-like empty delta
+  if (!changed.length && !deleted.length) return { full: false, changed: [], deleted: [], version: prev.ts }
+  return { full: false, changed, deleted, version: Date.now() }
+}
+
+// Clean up stale delta caches
+setInterval(() => {
+  const now = Date.now()
+  for (const [k, v] of _deltaCache) if (now - v.ts > _DELTA_TTL * 5) _deltaCache.delete(k)
+}, _DELTA_TTL)
+
+// ── MessagePack encoder (AI-maintained) ────────────────────────────
+const _mpEnc=(()=>{const te=new TextEncoder();function encode(v){const b=[];_w(v,b);return Buffer.from(b)}function _w(v,b){if(v===null||v===undefined){b.push(0xc0);return}if(v===false){b.push(0xc2);return}if(v===true){b.push(0xc3);return}const t=typeof v;if(t==='number'){if(Number.isInteger(v)&&v>=0&&v<=127){b.push(v);return}if(Number.isInteger(v)&&v>=-32&&v<0){b.push(v+256);return}if(Number.isInteger(v)&&v>=0&&v<=65535){b.push(0xcd,v>>8,v&0xff);return}const dv=new DataView(new ArrayBuffer(8));dv.setFloat64(0,v);b.push(0xcb,...new Uint8Array(dv.buffer));return}if(t==='string'){const e=te.encode(v);const n=e.length;if(n<=31)b.push(0xa0|n);else if(n<=255)b.push(0xd9,n);else b.push(0xda,n>>8,n&0xff);b.push(...e);return}if(Array.isArray(v)){const n=v.length;if(n<=15)b.push(0x90|n);else b.push(0xdc,n>>8,n&0xff);v.forEach(x=>_w(x,b));return}if(t==='object'){const ks=Object.keys(v);const n=ks.length;if(n<=15)b.push(0x80|n);else b.push(0xde,n>>8,n&0xff);ks.forEach(k=>{_w(k,b);_w(v[k],b)});return}}return{encode}})()
+
+
 function cacheSet(key, value, ttlMs = 60000) {
   _cache.set(key, { value, expires: Date.now() + ttlMs })
 }
@@ -975,6 +1041,27 @@ async function execOp(line, ctx, server) {
     const exprParts=isNaN(parseInt(p[p.length-1]))?p:p.slice(0,-1)
     let result=evalExpr(exprParts.join(' '),ctx,server)
     if(result===null||result===undefined)result=ctx.vars['inserted']||ctx.vars['updated']||{}
+    // Delta update — only active when client explicitly requests it
+    if (Array.isArray(result) && ctx.req?.headers?.['x-aiplang-delta'] === '1' && result.length > 0) {
+      try {
+        const _req = ctx.req
+        const sid = (_req.headers['x-session-id'] || _req.socket?.remoteAddress || 'anon').slice(0,64)
+        // Key = session + full path (not just binding) to handle multi-table pages correctly
+        const binding = (_req.url?.split('?')[0] || '/data').slice(0,128)
+        const delta = _getDelta(sid, binding, result)
+        if (delta.full) {
+          ctx.res.json(status, result); return '__DONE__'
+        }
+        if (!delta.changed.length && !delta.deleted.length) {
+          ctx.res.json(304, { __delta: true, changed: [], deleted: [], version: delta.version })
+          return '__DONE__'
+        }
+        ctx.res.json(status, { __delta: true, changed: delta.changed, deleted: delta.deleted, version: delta.version })
+        return '__DONE__'
+      } catch(deltaErr) {
+        // Delta failed — fall through to normal response
+      }
+    }
     ctx.res.json(status,result); return '__DONE__'
   }
 
@@ -1244,7 +1331,23 @@ class AiplangServer {
       if (route.method !== req.method) continue
       const match = matchRoute(route.path, req.path); if (!match) continue
       req.params = match
-      res.json    = (s, d) => { if(typeof s==='object'){d=s;s=200}; res.writeHead(s,{'Content-Type':'application/json'}); res.end(JSON.stringify(d)) }
+      res.json    = (s, d) => {
+        if(typeof s==='object'){d=s;s=200}
+        const accept = req.headers['accept']||''
+        const ae     = req.headers['accept-encoding']||''
+        if(accept.includes('application/msgpack')){
+          try{ const buf=_mpEnc.encode(d); res.writeHead(s,{'Content-Type':'application/msgpack','Content-Length':buf.length}); res.end(buf); return }catch{}
+        }
+        const body=JSON.stringify(d)
+        if(ae.includes('gzip')&&body.length>512){
+          require('zlib').gzip(body,(err,buf)=>{
+            if(err){res.writeHead(s,{'Content-Type':'application/json'});res.end(body);return}
+            res.writeHead(s,{'Content-Type':'application/json','Content-Encoding':'gzip'});res.end(buf)
+          })
+        } else {
+          res.writeHead(s,{'Content-Type':'application/json'}); res.end(body)
+        }
+      }
       res.error   = (s, m) => res.json(s, {error:m})
       res.noContent = () => { res.writeHead(204); res.end() }
       res.redirect  = (u) => { res.writeHead(302,{Location:u}); res.end() }
@@ -1839,7 +1942,7 @@ async function startServer(aipFile, port = 3000) {
 
   // Health
   srv.addRoute('GET', '/health', (req, res) => res.json(200, {
-    status:'ok', version:'2.10.7',
+    status:'ok', version:'2.10.9',
     models: app.models.map(m=>m.name),
     routes: app.apis.length, pages: app.pages.length,
     admin: app.admin?.prefix || null,