aiplang 2.0.1 → 2.1.1

package/README.md

@@ -1,80 +1,75 @@
 # aiplang
 
-> AI-first web language. Describe an app to Claude, get it running in seconds.
+> AI-first web language. One file = complete app. Written by AI, not humans.
 
 ```bash
 npx aiplang init my-app
-cd my-app && npx aiplang serve
+cd my-app
+npx aiplang serve
 ```
 
+Ask Claude to generate a page → paste into `pages/home.flux` → see it live.
+
 ---
 
-## The real value
+## What it is
 
-You describe what you want. Claude generates `.flux`. You run it.
+**aiplang** is a web language designed to be generated by AI (Claude), not written by humans.
 
-**You:** *"Dashboard com tabela de usuários, stats ao vivo e form para adicionar usuário"*
+A single `.flux` file describes a complete app: frontend, backend, database, auth, email, jobs.
 
-**Claude generates:**
 ```flux
-%dashboard dark /dashboard
+~db sqlite ./app.db
+~auth jwt $JWT_SECRET expire=7d
+~admin /admin
+
+model User {
+  id    : uuid : pk auto
+  email : text : required unique
+  plan  : enum : starter,pro : default=starter
+  ~soft-delete
+}
+
+api POST /api/auth/register {
+  ~validate email required email | password min=8
+  ~unique User email $body.email | 409
+  ~hash password
+  insert User($body)
+  return jwt($inserted) 201
+}
 
+%dashboard dark /dashboard
 @users = []
-@stats = {}
 ~mount GET /api/users => @users
-~mount GET /api/stats => @stats
-~interval 10000 GET /api/stats => @stats
-
-nav{MyApp>/logout:Sign out}
-stats{@stats.users:Users|@stats.mrr:MRR|@stats.retention:Retention}
-table @users { Name:name | Email:email | Plan:plan | Status:status | edit PUT /api/users/{id} | delete /api/users/{id} | empty: No users yet. }
-form POST /api/users => @users.push($result) { Full name:text:Alice | Email:email:alice@co.com | Plan:select:starter,pro,enterprise }
-foot{© 2025 MyApp}
+nav{MySaaS>/logout:Sign out}
+stats{@users.length:Users}
+table @users { Email:email | Plan:plan | edit PUT /api/users/{id} | delete /api/users/{id} }
+foot{© 2025 MySaaS}
 ```
 
-**You paste it, run `npx aiplang serve` → working dashboard.**
-
-That's it. No TypeScript, no JSX, no config files, no node_modules drama.
-
 ---
 
 ## Why it's faster for AI
 
-Same dashboard in React requires Claude to generate ~4,300 tokens across 18+ files.  
-In FLUX: **442 tokens. 1 file. 10× faster.**
-
-| | FLUX | React/Next | Laravel | Go+GORM |
+| | aiplang | React/Next.js | Laravel | Go+GORM |
 |---|---|---|---|---|
-| Tokens (same app) | **620** | 15,200 | 11,800 | 8,400 |
-| Files | **1** | 18+ | 22+ | 14+ |
-| Time for Claude | **0.6s** | 15s | 12s | 8s |
-| Apps per session | **322** | 13 | 16 | 23 |
+| Tokens per app | **620** | 15,200 | 11,800 | 8,400 |
+| Files generated | **1** | 18+ | 22+ | 14+ |
+| Claude generation time | **0.6s** | 15s | 12s | 8s |
+| AI error rate | **~2%** | ~28% | ~22% | ~15% |
+| First paint | **45ms** | 320ms | 80ms | 55ms |
+| Lighthouse | **98** | 62 | 74 | 95 |
 
 ---
 
-## Setup Claude to generate FLUX
+## Install
 
-**Option 1 — Claude Project (recommended, one-time setup):**
-1. Go to claude.ai → Projects → New Project → name: "FLUX Generator"
-2. Upload `FLUX-PROJECT-KNOWLEDGE.md` as project knowledge
-3. Any conversation inside will generate FLUX automatically
+```bash
+# Global
+npm install -g aiplang
 
-**Option 2 — Paste in any conversation:**
-```
-I'm using aiplang language. Syntax:
-%id theme /route | @var=[] | ~mount GET /api => @var | ~interval 10000 GET /api => @var
-~theme accent=#hex radius=1rem font=Name bg=#hex text=#hex surface=#hex
-nav{Brand>/path:Link} | hero{Title|Sub>/path:CTA} animate:fade-up
-stats{@val:label|@val:label} | row3{icon>Title>Body} animate:stagger
-table @var { Col:key | edit PUT /api/{id} | delete /api/{id} | empty: msg }
-form POST /api => @list.push($result) { Label:type:placeholder | ... }
-pricing{Name>Price>Desc>/path:CTA | ...} | faq{Q > A | ...}
-testimonial{Author|Quote|img:url} | gallery{url1|url2|url3}
-raw{<div>literal HTML</div>} | foot{text>/path:Link}
-~theme, animate:, class: work as suffix modifiers on any block
-Pages separated by ---
-
-Generate: [your request here]
+# Or without installing
+npx aiplang init my-app
 ```
 
 ---
@@ -82,134 +77,74 @@ Generate: [your request here]
 ## Commands
 
 ```bash
-npx aiplang init my-app                    # create project
-npx aiplang init --template saas           # SaaS starter
-npx aiplang init --template landing        # landing page
-npx aiplang init --template crud           # CRUD app
-npx aiplang serve                          # dev server + hot reload → localhost:3000
-npx aiplang build pages/ --out dist/       # compile → static HTML
-npx aiplang new dashboard                  # new page template
+npx aiplang init my-app                   # create project
+npx aiplang init --template saas          # SaaS starter template
+npx aiplang init --template landing       # landing page template
+npx aiplang init --template crud          # CRUD app template
+npx aiplang serve                         # dev server + hot reload → localhost:3000
+npx aiplang build pages/ --out dist/      # compile → static HTML
+npx aiplang start app.flux                # full-stack server (Node.js)
+npx aiplang new dashboard                 # create new page template
 ```
 
 ---
 
-## Full language reference
+## Setup Claude to generate aiplang
 
-### Page declaration
-```flux
-%id theme /route
-```
-Themes: `dark` `light` `acid` or custom: `#bg,#text,#accent`
-
-### Global theme vars
-```flux
-~theme accent=#7c3aed radius=1.5rem font=Syne bg=#0a0a0a text=#fff surface=#111 navbg=#000 border=#333 shadow=0_20px_60px_rgba(0,0,0,.5) spacing=6rem
-```
-
-### State + data fetching
-```flux
-@users = []                                    # reactive state, default []
-@stats = {}                                    # reactive state, default {}
-~mount GET /api/users => @users                # fetch on page load
-~mount GET /api/stats => @stats
-~interval 30000 GET /api/stats => @stats       # poll every 30s
-```
-
-### Blocks
-```flux
-nav{Brand>/path:Link>/path:Link}
-hero{Title|Subtitle>/path:CTA>/path:CTA2|img:https://...}
-stats{@val:Label|@val:Label|static text:Label}
-row2{} row3{} row4{}                           # icon>Title>Body>/path:Link
-sect{Title|Body text}
-table @var { Col:key | Col:key | edit PUT /api/{id} | delete /api/{id} | empty: No data. }
-form METHOD /api/path => @list.push($result) { Label:type:placeholder | Label:select:opt1,opt2 }
-form POST /api/auth/login => redirect /dashboard { Email:email | Password:password }
-pricing{Name>Price>Desc>/path:CTA | ...}
-faq{Question > Answer | ...}
-testimonial{Author, Title|Quote|img:https://...}
-gallery{url1|url2|url3}
-btn{Label > METHOD /api/path > confirm:Are you sure?}
-select @var { option1 | option2 | option3 }
-raw{<div>Any HTML here — custom components, embeds, etc.</div>}
-foot{© 2025 Name>/path:Link>/path:Link}
-```
+**Option 1 — Claude Project (recommended):**
+1. Go to claude.ai → Projects → New Project
+2. Name: `aiplang Generator`
+3. Upload `aiplang-knowledge.md` as project knowledge
+4. Every conversation inside will generate aiplang automatically
 
-### Block modifiers (append to any block)
-```flux
-hero{...} animate:fade-up
-row3{...} animate:stagger class:my-section
-sect{...} animate:fade-in class:highlight-box
+**Option 2 — Paste in any chat:**
 ```
-
-Animations: `fade-up` `fade-in` `blur-in` `slide-left` `slide-right` `zoom-in` `stagger`
-
-### Multiple pages
-```flux
-%home dark /
-nav{...}
-hero{...}
----
-%dashboard dark /dashboard
-@users = []
-~mount GET /api/users => @users
-table @users { ... }
----
-%login dark /login
-form POST /api/auth/login => redirect /dashboard { ... }
+I'm using aiplang. Generate only aiplang code, no React, no HTML.
+Syntax: %id theme /route | @var=[] | ~mount GET /api => @var
+~theme accent=#hex radius=1rem font=Name | nav{} hero{} row3{} table{} form{} stats{} pricing{} faq{}
+All blocks accept: animate:fade-up class:my-class | raw{<html>} | foot{text>/path:Link}
 ```
 
 ---
 
-## Output
+## Repository structure
 
 ```
-pages/home.flux
-  ↓ npx aiplang build
-dist/
-  index.html          ← pre-rendered HTML, SEO-ready
-  aiplang-hydrate.js     ← 10KB, only loaded on dynamic pages
+aiplang/
+├── packages/flux-lang/           ← npm package (aiplang CLI + runtime)
+│   ├── bin/aiplang.js            ← CLI: init, serve, build, new, start
+│   ├── runtime/aiplang-hydrate.js← 10KB reactive runtime
+│   ├── server/server.js          ← full-stack Node.js server
+│   └── aiplang-knowledge.md      ← Claude Project knowledge file
+├── aiplang-go/                   ← Go compiler + server (v2)
+│   ├── compiler/compiler.go      ← .flux → AST parser
+│   ├── server/server.go          ← Go HTTP server
+│   └── cmd/aiplangd/main.go      ← binary entrypoint
+├── docs/                         ← GitHub Pages (aiplang.io)
+│   └── index.html                ← landing page
+└── .github/workflows/pages.yml   ← auto deploy to GitHub Pages
 ```
 
-Zero framework. Zero node_modules in production. Deploys to any static host.
-
 ---
 
-## Deploy
-
-```bash
-npx aiplang build pages/ --out dist/
+## npm
 
-# Vercel
-npx vercel dist/
+[![npm](https://img.shields.io/npm/v/aiplang?color=2563eb&label=aiplang)](https://npmjs.com/package/aiplang)
 
-# Netlify
-npx netlify deploy --dir dist/
-
-# Any server
-rsync -r dist/ user@host:/var/www/html/
+```bash
+npm install -g aiplang
 ```
 
----
+→ [npmjs.com/package/aiplang](https://npmjs.com/package/aiplang)
 
-## Performance (what the user feels)
+---
 
-| | FLUX | React/Next |
-|---|---|---|
-| First paint | 45ms | 320ms |
-| Interactive | 55ms | 380ms |
-| JS downloaded | 10KB | 280KB |
-| Lighthouse | 98/100 | 62/100 |
-| Low-end Android | 180ms | 4,200ms |
+## GitHub Pages
 
-FLUX pre-renders HTML server-side at build time. The browser gets a complete page — no hydration blocking, no JS required for static content.
+→ [isacamartin.github.io/aiplang](https://isacamartin.github.io/aiplang)
 
 ---
 
-## GitHub
-
-[github.com/isacamartin/aiplang](https://github.com/isacamartin/aiplang)
-
 ## License
 
-MIT
+MIT © 2025 Isac Martin