rip-lang 3.4.3 → 3.4.5

package/CHANGELOG.md

@@ -7,6 +7,45 @@ All notable changes to Rip will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.4.3] - 2026-02-09
+
+### Source Maps & IDE Intelligence
+
+- **Source Map V3 support** — New `src/sourcemaps.js` implements ECMA-426 source maps with zero dependencies. VLQ encoder + SourceMapGenerator class in ~120 lines.
+- **Inline source maps** — `-m` flag embeds source maps as base64 data URLs in compiled output. One file for everything — debuggers read them natively.
+- **Reverse source maps** — `toReverseMap()` provides O(1) source→generated position lookup for IDE type intelligence.
+- **S-expression locations** — Parser now attaches `.loc = {r, c}` on every S-expression node. Locations flow from lexer through parser to code generator using consistent `{r, c}` naming.
+- **Parser cleanup** — Removed legacy Jison location format (`first_line`/`first_column`), dead `ranges` variable, and `locFirst`/`locLast` extraction. Parser uses `{r, c}` natively.
+- **VS Code Extension v0.3.1** — Level 2 type intelligence: autocomplete, hover, and go-to-definition from third-party `.d.ts` files inside `.rip` files. Shadow `.ts` compilation with 300ms debounce. Configurable via `rip.types.intellisense` setting.
+
+## [3.3.1] - 2026-02-09
+
+### Playground & Extension
+
+- **Playground cleanup** — Eliminated dead CSS rules, extracted shared Monaco config, DRYed up toggle handlers, fixed flicker by restoring button states before page reveal, added smooth fade-in transition, defaulted light/dark mode to system `prefers-color-scheme`.
+- **VS Code Extension v0.2.0** — Auto-generate `.d.ts` files on save, commands for single-file and workspace-wide type generation, auto-detect compiler binary, configurable settings.
+- **Extension published** to VS Code Marketplace as `rip-lang.rip`.
+
+## [3.2.1] - 2026-02-08
+
+### Test Suite & Solar Cleanup
+
+- **Test suite overhaul** — Redistributed tests from `stabilization.rip` and `compatibility.rip` into proper files, removed duplicates, added `reactivity.rip` and `types.rip` test files, added `for-as` guard tests. Now 1,140 tests.
+- **Solar parser generator cleanup** — Removed ~79 lines of dead Jison compatibility code, optimized runtime parser with `.call` instead of `.apply`, modernized variable naming from `yy` prefixes.
+
+## [3.2.0] - 2026-02-08
+
+### Rip Types — Optional Type System
+
+- **Type annotations** (`::`) on variables, parameters, and return types — compile-time only, stripped from JS output.
+- **Type aliases** (`::=`) for named types, structural types, union types.
+- **Interfaces** with `extends` support.
+- **Enums** with runtime JS generation and `.d.ts` emission.
+- **Generics** (`<T>`) for reusable type definitions.
+- **`.d.ts` emission** — `emitTypes()` generates TypeScript declaration files directly from annotated token stream.
+- **CLI flag** — `-d`/`--dts` generates `.d.ts` files alongside compiled JS.
+- **Architecture** — All type logic consolidated in `src/types.js` (lexer sidecar), minimal changes to lexer and compiler. Added `::` and `::=` operators to lexer.
+
 ## [3.1.0] - 2026-02-08
 
 ### Rip UI — Zero-Build Reactive Web Framework
@@ -602,7 +641,7 @@ All 962 tests passing (100%) ✅
   - Zero performance impact, much more maintainable
 
 - **Added inline SVG favicon to HTML files**
-  - repl.html, index.html, example.html now have embedded favicon
+  - index.html now has embedded favicon
   - No HTTP request needed for favicon
   - Works in all contexts (local, GitHub Pages, offline)
 

package/README.md

@@ -9,15 +9,15 @@
 </p>
 
 <p align="center">
-  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.1.0-blue.svg" alt="Version"></a>
+  <a href="CHANGELOG.md"><img src="https://img.shields.io/badge/version-3.4.3-blue.svg" alt="Version"></a>
   <a href="#zero-dependencies"><img src="https://img.shields.io/badge/dependencies-ZERO-brightgreen.svg" alt="Dependencies"></a>
-  <a href="#"><img src="https://img.shields.io/badge/tests-1130%2F1130-brightgreen.svg" alt="Tests"></a>
+  <a href="#"><img src="https://img.shields.io/badge/tests-1140%2F1140-brightgreen.svg" alt="Tests"></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
 </p>
 
 ---
 
-Rip is a modern language inspired by CoffeeScript. It compiles to **ES2022** (classes, `?.`, `??`, modules), adds about a **dozen new operators**, includes **built-in reactivity**, and sports a self-hosting compiler with **zero dependencies** — all in about 7,700 lines of code.
+Rip is a modern language inspired by CoffeeScript. It compiles to **ES2022** (classes, `?.`, `??`, modules), adds about a **dozen new operators**, includes **built-in reactivity**, and sports a self-hosting compiler with **zero dependencies** — all in about 10,300 lines of code.
 
 > **No imports. No hooks. No dependency arrays. Just write code.**
 
@@ -254,9 +254,9 @@ See [@rip-lang/ui](packages/ui/) for the full framework: Virtual File System, fi
 | **Reactivity** | None | Built-in |
 | **Dependencies** | Multiple | Zero |
 | **Self-hosting** | No | Yes |
-| **Lexer** | 3,558 LOC | 1,542 LOC |
-| **Compiler** | 10,346 LOC | 3,148 LOC |
-| **Total** | 17,760 LOC | ~7,700 LOC |
+| **Lexer** | 3,558 LOC | 1,867 LOC |
+| **Compiler** | 10,346 LOC | 3,292 LOC |
+| **Total** | 17,760 LOC | ~10,300 LOC |
 
 Smaller codebase, modern output, built-in reactivity.
 
@@ -282,22 +282,26 @@ Run Rip directly in the browser:
 ## Architecture
 
 ```
-Source  ->  Lexer  ->  Parser  ->  S-Expressions  ->  Codegen  ->  JavaScript
-           (1,542)    (352)       ["=", "x", 42]     (3,148)
+Source  ->  Lexer  ->  emitTypes  ->  Parser  ->  S-Expressions  ->  Codegen  ->  JavaScript
+           (1,867)    (types.js)     (357)       ["=", "x", 42]     (3,292)      + source map
 ```
 
-Simple arrays instead of AST node classes. The compiler is self-hosting — `bun run parser` rebuilds from source.
+Simple arrays (with `.loc`) instead of AST node classes. The compiler is self-hosting — `bun run parser` rebuilds from source.
 
 | Component | File | Lines |
 |-----------|------|-------|
-| Lexer + Rewriter | `src/lexer.js` | 1,542 |
-| Compiler + Codegen | `src/compiler.js` | 3,148 |
-| Parser (generated) | `src/parser.js` | 352 |
-| Grammar | `src/grammar/grammar.rip` | 887 |
-| Parser Generator | `src/grammar/solar.rip` | 1,001 |
-| REPL | `src/repl.js` | 654 |
-| Browser Entry | `src/browser.js` | 79 |
-| **Total** | | **7,663** |
+| Lexer + Rewriter | `src/lexer.js` | 1,867 |
+| Compiler + Codegen | `src/compiler.js` | 3,292 |
+| Type System | `src/types.js` | 719 |
+| Component System | `src/components.js` | 1,240 |
+| Source Maps | `src/sourcemaps.js` | 122 |
+| Parser (generated) | `src/parser.js` | 357 |
+| Grammar | `src/grammar/grammar.rip` | 935 |
+| Parser Generator | `src/grammar/solar.rip` | 916 |
+| REPL | `src/repl.js` | 707 |
+| Browser Entry | `src/browser.js` | 80 |
+| Tags | `src/tags.js` | 63 |
+| **Total** | | **10,298** |
 
 ---
 
@@ -305,12 +309,17 @@ Simple arrays instead of AST node classes. The compiler is self-hosting — `bun
 
 Rip includes optional packages for full-stack development:
 
-| Package | Purpose | Lines |
-|---------|---------|-------|
-| [@rip-lang/ui](packages/ui/) | Zero-build reactive web framework (VFS, router, components) | ~1,300 |
-| [@rip-lang/api](packages/api/) | HTTP framework (Sinatra-style routing, 37 validators) | ~1,050 |
-| [@rip-lang/server](packages/server/) | Multi-worker app server (hot reload, HTTPS, mDNS) | ~1,210 |
-| [@rip-lang/db](packages/db/) | DuckDB server with official UI (pure Bun FFI) | ~1,740 |
+| Package | Version | Purpose |
+|---------|---------|---------|
+| [rip-lang](https://www.npmjs.com/package/rip-lang) | 3.4.4 | Core language compiler |
+| [@rip-lang/api](packages/api/) | 1.1.4 | HTTP framework (Sinatra-style routing, 37 validators) |
+| [@rip-lang/server](packages/server/) | 1.1.3 | Multi-worker app server (hot reload, HTTPS, mDNS) |
+| [@rip-lang/db](packages/db/) | 1.1.2 | DuckDB server with official UI (pure Bun FFI) |
+| [@rip-lang/ui](packages/ui/) | 0.1.2 | Zero-build reactive web framework (VFS, router, components) |
+| [@rip-lang/swarm](packages/swarm/) | 1.1.1 | Parallel job runner with worker pool |
+| [@rip-lang/csv](packages/csv/) | 1.1.1 | CSV parser + writer |
+| [@rip-lang/schema](packages/schema/) | 0.1.0 | ORM + validation |
+| [VS Code Extension](packages/vscode/) | 0.3.1 | Syntax highlighting, type intelligence, source maps |
 
 ```bash
 bun add -g @rip-lang/db    # Installs everything (rip-lang + api + db)
@@ -348,7 +357,7 @@ rip file.rip           # Run
 rip -c file.rip        # Compile
 rip -t file.rip        # Tokens
 rip -s file.rip        # S-expressions
-bun run test           # 1073 tests
+bun run test           # 1140 tests
 bun run parser         # Rebuild parser
 bun run browser        # Build browser bundle
 ```
@@ -359,11 +368,12 @@ bun run browser        # Build browser bundle
 
 | Guide | Description |
 |-------|-------------|
-| [docs/RIP-LANG.md](docs/RIP-LANG.md) | Language reference |
-| [docs/RIP-REACTIVITY.md](docs/RIP-REACTIVITY.md) | Reactivity deep dive |
-| [docs/RIP-INTERNALS.md](docs/RIP-INTERNALS.md) | Compiler internals |
-| [packages/](packages/README.md) | Full-stack packages |
-| [CONTRIBUTING.md](CONTRIBUTING.md) | How to contribute |
+| [docs/RIP-GUIDE.md](docs/RIP-GUIDE.md) | Users / AI — practical guide for using Rip in projects |
+| [AGENT.md](AGENT.md) | AI agents — get up to speed for working on the compiler |
+| [docs/RIP-LANG.md](docs/RIP-LANG.md) | Users — full language reference |
+| [docs/RIP-TYPES.md](docs/RIP-TYPES.md) | Contributors — type system specification |
+| [docs/RIP-REACTIVITY.md](docs/RIP-REACTIVITY.md) | Users — reactivity deep dive |
+| [docs/RIP-INTERNALS.md](docs/RIP-INTERNALS.md) | Contributors — compiler architecture |
 
 ---
 

package/docs/RIP-GUIDE.md

@@ -0,0 +1,598 @@
+<img src="https://raw.githubusercontent.com/shreeve/rip-lang/main/docs/rip.png" style="width:50px" /> <br>
+
+# Rip Guide
+
+A practical guide for using Rip in your projects. Rip is a modern language that compiles to ES2022 JavaScript. It runs on [Bun](https://bun.sh) and has zero dependencies.
+
+---
+
+## Getting Started
+
+```bash
+# Install Bun (if needed)
+curl -fsSL https://bun.sh/install | bash
+
+# Install Rip
+bun add -g rip-lang
+
+# Run a file
+rip app.rip
+
+# Interactive REPL
+rip
+
+# Compile to JavaScript
+rip -c app.rip
+
+# Compile with source map
+rip -cm app.rip
+
+# Generate .d.ts type declarations
+rip -d app.rip
+```
+
+Rip files use the `.rip` extension. Bun runs them directly via `bun app.rip` or `rip app.rip`.
+
+---
+
+## Language Basics
+
+Rip uses **significant whitespace** (indentation, not braces) and **implicit returns** (the last expression is the return value). Semicolons and parentheses are optional in most contexts.
+
+### Variables
+
+```coffee
+# Assignment (compiles to let)
+name = "Alice"
+count = 0
+
+# Constant ("equals, dammit!")
+MAX =! 100
+
+# Destructuring
+{name, age} = person
+[first, ...rest] = items
+```
+
+### Strings
+
+```coffee
+# Interpolation (both styles work)
+greeting = "Hello, #{name}!"
+greeting = "Hello, ${name}!"
+
+# Heredocs (closing delimiter sets left margin)
+html = """
+    <div>
+      <p>Hello</p>
+    </div>
+    """
+```
+
+### Functions
+
+```coffee
+# Named function
+def greet(name)
+  "Hello, #{name}!"
+
+# Arrow function
+add = (a, b) -> a + b
+
+# Fat arrow (preserves this)
+handler = (e) => @process(e)
+
+# Default parameters
+def greet(name = "World")
+  "Hello, #{name}!"
+
+# Void function (suppresses return)
+def log!(message)
+  console.log message
+```
+
+### Classes
+
+```coffee
+class Animal
+  constructor: (@name) ->
+
+  speak: -> "#{@name} makes a sound"
+
+class Dog extends Animal
+  speak: -> "#{@name} barks!"
+
+# Ruby-style instantiation
+dog = Dog.new "Buddy"
+```
+
+### Control Flow
+
+```coffee
+# If/else
+if user.admin
+  showAdmin()
+else
+  showUser()
+
+# Ternary
+status = active ? "on" : "off"
+
+# Postfix
+console.log "hi" if ready
+return unless valid
+
+# Switch
+result = switch status
+  when "active" then "Running"
+  when "done" then "Complete"
+  else "Unknown"
+```
+
+### Loops
+
+```coffee
+# Arrays
+for item in items
+  console.log item
+
+for item, i in items     # with index
+  console.log "#{i}: #{item}"
+
+# Objects
+for key, value of object
+  console.log "#{key} = #{value}"
+
+# Ranges
+for i in [1..10]         # inclusive (1 to 10)
+for i in [1...10]        # exclusive (1 to 9)
+
+# Comprehensions
+squares = (x * x for x in [1..10])
+evens = (x for x in items when x % 2 is 0)
+```
+
+---
+
+## Operators
+
+Rip extends JavaScript with powerful operators:
+
+| Operator | Name | Example | Result |
+|----------|------|---------|--------|
+| `!` | Dammit | `fetchData!` | `await fetchData()` |
+| `!` | Void | `def log!` | Function returns `undefined` |
+| `=!` | Readonly | `MAX =! 100` | `const MAX = 100` |
+| `!?` | Otherwise | `val !? 5` | Default if undefined/throws |
+| `?` | Existence | `x?` | `x != null` |
+| `?.` | Optional chain | `a?.b?.c` | ES6 optional chaining |
+| `?[]` | Optional index | `arr?[0]` | `arr?.[0]` |
+| `??` | Nullish | `a ?? b` | ES6 nullish coalescing |
+| `//` | Floor div | `7 // 2` | `3` |
+| `%%` | True modulo | `-1 %% 3` | `2` (always positive) |
+| `=~` | Regex match | `str =~ /pat/` | Match, captures in `_` |
+| `:=` | State | `count := 0` | Reactive signal |
+| `~=` | Computed | `doubled ~= x * 2` | Reactive computed |
+| `~>` | Effect | `~> console.log x` | Reactive side effect |
+| `**` | Power | `2 ** 10` | `1024` |
+| `..` | Range | `[1..5]` | Inclusive range |
+| `...` | Spread/rest | `[...a, ...b]` | ES6 spread |
+
+### Dammit Operator (`!`)
+
+The most distinctive Rip operator. Appended to a function call, it both calls AND awaits:
+
+```coffee
+# These are equivalent:
+data = fetchUsers!
+data = await fetchUsers()
+
+# With arguments:
+user = getUser!(id)
+user = await getUser(id)
+
+# Functions are auto-async when they contain !
+def loadData(id)
+  user = getUser!(id)
+  posts = getPosts!(user.id)
+  {user, posts}
+# Compiles to: async function loadData(id) { ... }
+```
+
+### Regex Match (`=~`)
+
+Ruby-style pattern matching with captures stored in `_`:
+
+```coffee
+if text =~ /Hello, (\w+)/
+  console.log "Found: #{_[1]}"
+
+# Direct extraction via regex indexing
+domain = "user@example.com"[/@(.+)$/, 1]  # "example.com"
+```
+
+### Guard Clauses
+
+```coffee
+def loadUser(id)
+  data = fetchUser!(id) or return {error: "Not found"}
+  token = headers.auth or throw new Error "No auth"
+  port = config.port ?? return 3000
+```
+
+### Implicit Commas
+
+When a literal value is followed by an arrow function, Rip inserts a comma automatically:
+
+```coffee
+# Clean route handlers
+get '/users' -> User.all!
+get '/users/:id' -> User.find params.id
+post '/users' -> User.create body
+```
+
+---
+
+## Reactivity
+
+Rip provides fine-grained reactivity as language-level operators, not library imports:
+
+```coffee
+# State — reactive container
+count := 0
+
+# Computed — derived value (lazy, cached)
+doubled ~= count * 2
+message ~= "Count is #{count}"
+
+# Effect — side effect, re-runs when dependencies change
+~> console.log "Count changed to #{count}"
+
+# Update state (triggers dependents)
+count = 5
+# doubled is now 10
+# effect logs: "Count changed to 5"
+```
+
+### Reactive Methods
+
+```coffee
+count := 0
+count.read()   # Get value without tracking
+count.lock()   # Make readonly
+count.free()   # Unsubscribe from dependencies
+count.kill()   # Clean up, return final value
+```
+
+---
+
+## Type Annotations
+
+Rip's optional type system adds annotations that are **erased** from JavaScript output and **emitted** as `.d.ts` files for TypeScript interoperability.
+
+```coffee
+# Annotate parameters and return types
+def greet(name:: string):: string
+  "Hello, #{name}!"
+
+# Type aliases
+User ::= type
+  id: number
+  name: string
+  email?: string    # optional property
+
+# Interfaces
+interface Animal
+  name: string
+  speak: => void
+
+# Enums (emit runtime JS + .d.ts)
+enum Status
+  Active
+  Inactive
+  Pending
+
+# Generate .d.ts
+# rip -d myfile.rip
+```
+
+---
+
+## Modules
+
+Standard ES6 module syntax:
+
+```coffee
+# Import
+import express from 'express'
+import { readFile } from 'fs'
+import * as path from 'path'
+
+# Export
+export def processData(data)
+  data.map (x) -> x * 2
+
+export default { process: processData }
+
+# Re-export
+export { foo, bar } from './utils'
+```
+
+---
+
+## Async Patterns
+
+```coffee
+# Traditional await
+user = await getUser(id)
+
+# Dammit operator (call + await)
+user = getUser!(id)
+posts = getPosts!(user.id)
+
+# Error handling
+try
+  data = fetchData!
+catch error
+  console.error error
+
+# Async iteration
+for item as! asyncIterable
+  console.log item
+```
+
+---
+
+## Packages
+
+Rip includes optional packages for full-stack development. All are written in Rip, have zero dependencies, and run on Bun.
+
+```bash
+bun add @rip-lang/api            # Web framework
+bun add @rip-lang/server         # Production server
+bun add @rip-lang/db             # DuckDB server
+bun add @rip-lang/ui             # Reactive web UI
+bun add @rip-lang/schema         # ORM + validation
+bun add @rip-lang/swarm          # Parallel job runner
+bun add @rip-lang/csv            # CSV parser + writer
+```
+
+### @rip-lang/api — Web Framework
+
+Sinatra-style routing with `@` context magic and 37 built-in validators.
+
+```coffee
+import { get, post, use, read, start, notFound } from '@rip-lang/api'
+
+# Routes — return data directly
+get '/' -> { message: 'Hello!' }
+get '/users/:id' -> User.find!(read 'id', 'id!')
+
+# Form validation with read()
+post '/signup' ->
+  email = read 'email', 'email!'           # required email
+  age   = read 'age', 'int', [18, 120]     # integer between 18-120
+  role  = read 'role', ['admin', 'user']   # enum
+  { success: true, email, age, role }
+
+# File serving
+get '/css/*' -> @send "public/#{@req.path.slice(5)}"
+notFound -> @send 'index.html', 'text/html; charset=UTF-8'
+
+# Middleware
+import { cors, logger, sessions } from '@rip-lang/api/middleware'
+
+use logger()
+use cors origin: '*'
+use sessions secret: process.env.SECRET
+
+# Lifecycle hooks
+before -> @start = Date.now()
+after -> console.log "#{@req.method} #{@req.path} - #{Date.now() - @start}ms"
+
+start port: 3000
+```
+
+#### read() Validators
+
+```coffee
+id    = read 'id', 'id!'        # positive integer (required)
+count = read 'count', 'whole'   # non-negative integer
+price = read 'price', 'money'   # cents (multiplies by 100)
+name  = read 'name', 'string'   # collapses whitespace
+email = read 'email', 'email'   # valid email format
+phone = read 'phone', 'phone'   # US phone → (555) 123-4567
+state = read 'state', 'state'   # two-letter → uppercase
+zip   = read 'zip', 'zip'       # 5-digit zip
+url   = read 'url', 'url'       # valid URL
+uuid  = read 'id', 'uuid'       # UUID format
+date  = read 'date', 'date'     # YYYY-MM-DD
+time  = read 'time', 'time'     # HH:MM or HH:MM:SS
+flag  = read 'flag', 'bool'     # boolean
+tags  = read 'tags', 'array'    # must be array
+ids   = read 'ids', 'ids'       # "1,2,3" → [1, 2, 3]
+slug  = read 'slug', 'slug'     # URL-safe slug
+```
+
+### @rip-lang/server — Production Server
+
+Multi-worker process manager with hot reload, HTTPS, and mDNS.
+
+```bash
+rip-server                # Start (uses ./index.rip)
+rip-server -w             # With file watching + hot-reload
+rip-server myapp          # Named (accessible at myapp.local)
+rip-server http:3000      # HTTP on specific port
+```
+
+### @rip-lang/db — DuckDB Server
+
+HTTP server for DuckDB with JSONCompact responses.
+
+```bash
+rip-db mydata.duckdb --port=4000
+```
+
+```coffee
+# Query from Rip
+import { get, start } from '@rip-lang/api'
+import { DB } from '@rip-lang/db'
+
+db = DB.new 'data.duckdb'
+
+get '/users' -> db.query! "SELECT * FROM users"
+get '/users/:id' -> db.query! "SELECT * FROM users WHERE id = ?", [read 'id', 'id!']
+
+start port: 3000
+```
+
+### @rip-lang/ui — Reactive Web Framework
+
+Zero-build framework. Ships the 40KB compiler to the browser and compiles `.rip` components on demand.
+
+```coffee
+# Server setup (index.rip)
+import { get, use, start, notFound } from '@rip-lang/api'
+import { ripUI } from '@rip-lang/ui/serve'
+
+dir = import.meta.dir
+use ripUI pages: "#{dir}/pages", watch: true
+notFound -> @send "#{dir}/index.html", 'text/html; charset=UTF-8'
+start port: 3000
+```
+
+```coffee
+# Component (pages/counter.rip)
+Counter = component
+  @count := 0
+  doubled ~= @count * 2
+
+  increment: -> @count += 1
+
+  render
+    div.counter
+      h1 "Count: #{@count}"
+      p "Doubled: #{doubled}"
+      button @click: @increment, "+"
+```
+
+### @rip-lang/swarm — Parallel Job Runner
+
+```coffee
+import { swarm, init, retry, todo } from '@rip-lang/swarm'
+
+setup = ->
+  unless retry()
+    init()
+    for i in [1..100] then todo(i)
+
+perform = (task, ctx) ->
+  await Bun.sleep(Math.random() * 1000)
+
+swarm { setup, perform }
+```
+
+### @rip-lang/csv — CSV Parser + Writer
+
+```coffee
+import { CSV } from '@rip-lang/csv'
+
+# Parse
+rows = CSV.read "name,age\nAlice,30\nBob,25\n", headers: true
+# [{name: 'Alice', age: '30'}, {name: 'Bob', age: '25'}]
+
+# Write
+CSV.save! 'output.csv', rows
+```
+
+### @rip-lang/schema — ORM + Validation
+
+```coffee
+import { Model } from '@rip-lang/schema'
+
+class User extends Model
+  @table = 'users'
+  @schema
+    name:  { type: 'string', required: true }
+    email: { type: 'email', unique: true }
+
+user = User.find!(25)
+user.name = 'Alice'
+user.save!()
+```
+
+---
+
+## Full-Stack Example
+
+A complete API server in Rip:
+
+```coffee
+import { get, post, use, read, start, notFound } from '@rip-lang/api'
+import { cors, logger } from '@rip-lang/api/middleware'
+
+use logger()
+use cors origin: '*'
+
+# In-memory store
+users = []
+nextId = 1
+
+get '/api/users' -> users
+
+get '/api/users/:id' ->
+  id = read 'id', 'id!'
+  user = users.find (u) -> u.id is id
+  user or throw { status: 404, message: 'Not found' }
+
+post '/api/users' ->
+  name = read 'name', 'string!'
+  email = read 'email', 'email!'
+  user = { id: nextId++, name, email }
+  users.push user
+  user
+
+notFound -> { error: 'Not found' }
+
+start port: 3000
+```
+
+---
+
+## CLI Reference
+
+```bash
+rip                        # REPL
+rip file.rip               # Run
+rip -c file.rip            # Compile to JS (stdout)
+rip -o out.js file.rip     # Compile to file
+rip -m file.rip            # Compile with inline source map
+rip -d file.rip            # Generate .d.ts
+rip -t file.rip            # Show tokens
+rip -s file.rip            # Show S-expressions
+rip -q -c file.rip         # Quiet (no headers)
+bun run test               # Run test suite (1,140 tests)
+```
+
+---
+
+## Documentation
+
+| Document | Audience | Purpose |
+|----------|----------|---------|
+| **[RIP-GUIDE.md](RIP-GUIDE.md)** | Users / AI | Practical guide for using Rip in projects |
+| **[AGENT.md](../AGENT.md)** | AI agents | Get up to speed for working on the compiler |
+| **[RIP-LANG.md](RIP-LANG.md)** | Users | Full language reference |
+| **[RIP-TYPES.md](RIP-TYPES.md)** | Contributors | Type system specification |
+| **[RIP-REACTIVITY.md](RIP-REACTIVITY.md)** | Users | Reactivity deep dive |
+| **[RIP-INTERNALS.md](RIP-INTERNALS.md)** | Contributors | Compiler architecture |
+
+## Resources
+
+- [Rip Playground](https://shreeve.github.io/rip-lang/) — Try Rip in the browser
+- [VS Code Extension](https://marketplace.visualstudio.com/items?itemName=rip-lang.rip) — IDE support
+- [GitHub](https://github.com/shreeve/rip-lang) — Source code
+
+---
+
+*Rip — Start simple. Build incrementally. Ship elegantly.*

package/docs/RIP-INTERNALS.md

@@ -1,4 +1,6 @@
-# Rip Compiler Internals
+<img src="https://raw.githubusercontent.com/shreeve/rip-lang/main/docs/rip.png" style="width:50px" /> <br>
+
+# Rip Internals
 
 > Architecture, design decisions, and technical reference for the Rip compiler.
 
@@ -43,7 +45,7 @@ class BinaryOp {
 ["+", left, right]  // That's it!
 ```
 
-**Result:** CoffeeScript's compiler is 17,760 LOC. Rip's is ~7,700 LOC — smaller, yet includes a complete reactive runtime.
+**Result:** CoffeeScript's compiler is 17,760 LOC. Rip's is ~10,300 LOC — smaller, yet includes a complete reactive runtime, type system, component system, and source maps.
 
 > **Transform the IR (s-expressions), not the output (strings).**
 
@@ -75,7 +77,7 @@ console.log(code);
 | Dependencies | Multiple | **Zero** |
 | Parser generator | External (Jison) | **Built-in (Solar)** |
 | Self-hosting | No | **Yes** |
-| Total LOC | 17,760 | ~7,700 |
+| Total LOC | 17,760 | ~10,300 |
 
 ## Design Principles
 
@@ -91,7 +93,7 @@ console.log(code);
 
 ```
 Source Code  →  Lexer  →  emitTypes  →  Parser  →  S-Expressions  →  Codegen  →  JavaScript
-                (1,866)    (types.js)    (356)       (simple arrays)     (3,219)      (ES2022)
+                (1,867)    (types.js)    (357)       (arrays + .loc)     (3,292)      + source map
                               ↓
                            file.d.ts (when types: "emit")
 ```
@@ -100,13 +102,15 @@ Source Code  →  Lexer  →  emitTypes  →  Parser  →  S-Expressions  →  C
 
 | File | Purpose | Lines | Modify? |
 |------|---------|-------|---------|
-| `src/lexer.js` | Lexer + Rewriter | 1,866 | Yes |
-| `src/compiler.js` | Compiler + Code Generator | 3,219 | Yes |
-| `src/types.js` | Type System (lexer sidecar) | 718 | Yes |
-| `src/components.js` | Component System (compiler sidecar) | ~1,240 | Yes |
-| `src/parser.js` | Generated parser | 356 | No (auto-gen) |
-| `src/grammar/grammar.rip` | Grammar specification | 934 | Yes (carefully) |
-| `src/grammar/solar.rip` | Parser generator | 1,001 | No |
+| `src/lexer.js` | Lexer + Rewriter | 1,867 | Yes |
+| `src/compiler.js` | Compiler + Code Generator | 3,292 | Yes |
+| `src/types.js` | Type System (lexer sidecar) | 719 | Yes |
+| `src/components.js` | Component System (compiler sidecar) | 1,240 | Yes |
+| `src/sourcemaps.js` | Source Map V3 Generator | 122 | Yes |
+| `src/tags.js` | HTML Tag Classification | 63 | Yes |
+| `src/parser.js` | Generated parser | 357 | No (auto-gen) |
+| `src/grammar/grammar.rip` | Grammar specification | 935 | Yes (carefully) |
+| `src/grammar/solar.rip` | Parser generator | 916 | No |
 
 ## Example Flow
 
@@ -271,7 +275,7 @@ S-expressions are simple arrays that serve as Rip's intermediate representation
 
 # 4. Lexer & Rewriter
 
-The lexer (`src/lexer.js`) is a clean reimplementation that replaces the old lexer (3,260 lines) with ~1,550 lines producing the same token vocabulary the parser expects.
+The lexer (`src/lexer.js`) is a clean reimplementation that replaces the old lexer (3,260 lines) with ~1,870 lines producing the same token vocabulary the parser expects.
 
 ## Architecture
 
@@ -435,7 +439,7 @@ REGEX tokens store `delimiter` and optional `heregex` flags in `token.data`.
 
 # 6. Compiler
 
-The compiler (`src/compiler.js`) is a clean reimplementation replacing the old compiler (6,016 lines) with ~3,150 lines producing identical JavaScript output.
+The compiler (`src/compiler.js`) is a clean reimplementation replacing the old compiler (6,016 lines) with ~3,290 lines producing identical JavaScript output.
 
 ## Structure
 
@@ -479,7 +483,7 @@ The `Compiler` class's lexer adapter reconstructs `new String()` wrapping from t
 
 | Area | Old lines | New lines | Reduction |
 |------|-----------|-----------|-----------|
-| Total file | 6,016 | ~3,150 | **48%** |
+| Total file | 6,016 | ~3,290 | **45%** |
 | Body generation | ~500 | ~200 | 60% |
 | Variable collection | ~230 | ~100 | 57% |
 | Helper methods | ~600 | ~250 | 58% |
@@ -490,7 +494,7 @@ The `Compiler` class's lexer adapter reconstructs `new String()` wrapping from t
 
 **Solar** is a complete SLR(1) parser generator included with Rip — written in Rip, compiled by Rip, zero external dependencies.
 
-**Location:** `src/grammar/solar.rip` (1,001 lines)
+**Location:** `src/grammar/solar.rip` (916 lines)
 
 ## Grammar Syntax
 
@@ -529,7 +533,7 @@ Parenthetical: [
 | Parse time | 12,500ms | ~50ms |
 | Dependencies | Many | Zero |
 | Self-hosting | No | Yes |
-| Code size | 2,285 LOC | 1,001 LOC |
+| Code size | 2,285 LOC | 916 LOC |
 
 After modifying `src/grammar/grammar.rip`:
 
@@ -558,27 +562,21 @@ rip> .sexp    # Toggle s-expression display
 rip> .js      # Toggle JS display
 ```
 
-Compare old and new compilers across all test suites:
-
-```bash
-bun src/compare-compilers.js
-```
-
 ---
 
 # 9. Future Work
 
-- Comment preservation for source maps
 - Parser update to read `.data` directly instead of `new String()` properties
 - Once parser supports `.data`, the `meta()`/`str()` helpers become trivial to update
 
 ---
 
 **See Also:**
+- [RIP-GUIDE.md](RIP-GUIDE.md) — Practical guide for using Rip
 - [RIP-LANG.md](RIP-LANG.md) — Language reference
 - [RIP-TYPES.md](RIP-TYPES.md) — Type system specification
 - [RIP-REACTIVITY.md](RIP-REACTIVITY.md) — Reactivity deep dive
 
 ---
 
-*Rip 3.0 — 1,130 tests passing — Zero dependencies — Self-hosting — ~8,800 LOC*
+*Rip 3.4 — 1,140 tests passing — Zero dependencies — Self-hosting — ~10,300 LOC*

package/docs/RIP-LANG.md

@@ -1,6 +1,8 @@
+<img src="https://raw.githubusercontent.com/shreeve/rip-lang/main/docs/rip.png" style="width:50px" /> <br>
+
 # Rip 3.0 Language Reference
 
-Rip is a modern reactive language that compiles to ES2022 JavaScript. It combines CoffeeScript's elegant syntax with built-in reactivity primitives. Zero dependencies, self-hosting, ~7,700 LOC.
+Rip is a modern reactive language that compiles to ES2022 JavaScript. It combines CoffeeScript's elegant syntax with built-in reactivity primitives. Zero dependencies, self-hosting, ~10,300 LOC.
 
 ---
 
@@ -1163,4 +1165,4 @@ count = 10  # Logs: "Count: 10, Doubled: 20"
 
 ---
 
-*Rip 3.0 — 1,073 tests passing — Zero dependencies — Self-hosting — ~7,700 LOC*
+*Rip 3.4 — 1,140 tests passing — Zero dependencies — Self-hosting — ~10,300 LOC*

package/docs/RIP-REACTIVITY.md

@@ -1,4 +1,6 @@
-# Rip Reactivity System
+<img src="https://raw.githubusercontent.com/shreeve/rip-lang/main/docs/rip.png" style="width:50px" /> <br>
+
+# Rip Reactivity
 
 Rip implements a **fine-grained reactive system** that rivals and often exceeds the capabilities of major frameworks like Vue, Svelte, Solid, and React — in just ~200 lines of runtime code.
 

package/docs/RIP-TYPES.md

@@ -1,3 +1,5 @@
+<img src="https://raw.githubusercontent.com/shreeve/rip-lang/main/docs/rip.png" style="width:50px" /> <br>
+
 # Rip Types
 
 > **Types describe what you mean. Code does what you say.**

package/docs/dist/rip.browser.js

@@ -3983,7 +3983,7 @@ if (typeof globalThis !== 'undefined') {
   };
 }
 
-// src/sourcemap.js
+// src/sourcemaps.js
 var B64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
 function vlqEncode(value) {
   let result = "";
@@ -7536,8 +7536,8 @@ function getComponentRuntime() {
   return new CodeGenerator({}).getComponentRuntime();
 }
 // src/browser.js
-var VERSION = "3.4.3";
-var BUILD_DATE = "2026-02-09@07:17:43GMT";
+var VERSION = "3.4.5";
+var BUILD_DATE = "2026-02-09@14:23:53GMT";
 var dedent = (s) => {
   const m = s.match(/^[ \t]*(?=\S)/gm);
   const i = Math.min(...(m || []).map((x) => x.length));

package/docs/dist/rip.browser.min.js

@@ -525,4 +525,4 @@ if (typeof globalThis !== 'undefined') {
 `:"",Y=U.slice(0,W).join(`
 `)}let $=new v().tokenize(Y);if(this.options.showTokens)$.forEach((R)=>console.log(`${R[0].padEnd(12)} ${JSON.stringify(R[1])}`)),console.log();let Q=null;if(this.options.types==="emit"||this.options.types==="check"||this.options.types===!0)Q=Q1($);$=$.filter((R)=>R[0]!=="TYPE_DECL");while($.length>0&&$[0][0]==="TERMINATOR")$.shift();if($.every((R)=>R[0]==="TERMINATOR"))return{tokens:$,sexpr:["program"],code:"",dts:Q,data:F,reactiveVars:{}};g.lexer={tokens:$,pos:0,setInput:function(){},lex:function(){if(this.pos>=this.tokens.length)return 1;let R=this.tokens[this.pos++],M=R[1];if(R.data)M=new String(M),Object.assign(M,R.data);return this.text=M,this.loc=R.loc,R[0]}};let D;try{D=g.parse(Y)}catch(R){if(/\?\s*\([^)]*\?[^)]*:[^)]*\)\s*:/.test(Y)||/\?\s+\w+\s+\?\s+/.test(Y))throw Error("Nested ternary operators are not supported. Use if/else statements instead.");throw R}if(this.options.showSExpr)console.log(y(D,0,!0)),console.log();let Z=null;if(this.options.sourceMap){let R=(this.options.filename||"output")+".js",M=this.options.filename||"input.rip";Z=new Y1(R,M,Y)}let X=new V({dataSection:F,skipReactiveRuntime:this.options.skipReactiveRuntime,skipComponentRuntime:this.options.skipComponentRuntime,reactiveVars:this.options.reactiveVars,sourceMap:Z}),J=X.compile(D),K=Z?Z.toJSON():null,z=Z?Z.toReverseMap():null;if(K&&this.options.sourceMap==="inline"){let R=typeof Buffer<"u"?Buffer.from(K).toString("base64"):btoa(K);J+=`
 //# sourceMappingURL=data:application/json;base64,${R}`}else if(K&&this.options.filename)J+=`
-//# sourceMappingURL=${this.options.filename}.js.map`;return{tokens:$,sexpr:D,code:J,dts:Q,map:K,reverseMap:z,data:F,reactiveVars:X.reactiveVars}}compileToJS(Y){return this.compile(Y).code}compileToSExpr(Y){return this.compile(Y).sexpr}}E1(V);V.prototype.generateEnum=Z1;function H2(Y,F={}){return new r(F).compile(Y)}function t(Y,F={}){return new r(F).compileToJS(Y)}function O2(){return new V({}).getReactiveRuntime()}function q2(){return new V({}).getComponentRuntime()}var v2="3.4.3",g2="2026-02-09@07:17:43GMT",P2=(Y)=>{let F=Y.match(/^[ \t]*(?=\S)/gm),U=Math.min(...(F||[]).map((W)=>W.length));return Y.replace(RegExp(`^[ 	]{${U}}`,"gm"),"").trim()};async function T1(){let Y=document.querySelectorAll('script[type="text/rip"]');for(let F of Y){if(F.hasAttribute("data-rip-processed"))continue;try{let U=P2(F.textContent),W=t(U);(0,eval)(W),F.setAttribute("data-rip-processed","true")}catch(U){console.error("Error compiling Rip script:",U),console.error("Script content:",F.textContent)}}}if(typeof document<"u")if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",T1);else T1();function _2(Y){try{let U=t(Y).replace(/^let\s+[^;]+;\s*\n\s*/m,"");U=U.replace(/^const\s+/gm,"var ");let W=(0,eval)(U);if(W!==void 0)globalThis._=W;return W}catch(F){console.error("Rip compilation error:",F.message);return}}if(typeof globalThis<"u")globalThis.rip=_2;export{_2 as rip,T1 as processRipScripts,g as parser,O2 as getReactiveRuntime,q2 as getComponentRuntime,y as formatSExpr,t as compileToJS,H2 as compile,v2 as VERSION,v as Lexer,r as Compiler,V as CodeGenerator,g2 as BUILD_DATE};
+//# sourceMappingURL=${this.options.filename}.js.map`;return{tokens:$,sexpr:D,code:J,dts:Q,map:K,reverseMap:z,data:F,reactiveVars:X.reactiveVars}}compileToJS(Y){return this.compile(Y).code}compileToSExpr(Y){return this.compile(Y).sexpr}}E1(V);V.prototype.generateEnum=Z1;function H2(Y,F={}){return new r(F).compile(Y)}function t(Y,F={}){return new r(F).compileToJS(Y)}function O2(){return new V({}).getReactiveRuntime()}function q2(){return new V({}).getComponentRuntime()}var v2="3.4.5",g2="2026-02-09@14:23:53GMT",P2=(Y)=>{let F=Y.match(/^[ \t]*(?=\S)/gm),U=Math.min(...(F||[]).map((W)=>W.length));return Y.replace(RegExp(`^[ 	]{${U}}`,"gm"),"").trim()};async function T1(){let Y=document.querySelectorAll('script[type="text/rip"]');for(let F of Y){if(F.hasAttribute("data-rip-processed"))continue;try{let U=P2(F.textContent),W=t(U);(0,eval)(W),F.setAttribute("data-rip-processed","true")}catch(U){console.error("Error compiling Rip script:",U),console.error("Script content:",F.textContent)}}}if(typeof document<"u")if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",T1);else T1();function _2(Y){try{let U=t(Y).replace(/^let\s+[^;]+;\s*\n\s*/m,"");U=U.replace(/^const\s+/gm,"var ");let W=(0,eval)(U);if(W!==void 0)globalThis._=W;return W}catch(F){console.error("Rip compilation error:",F.message);return}}if(typeof globalThis<"u")globalThis.rip=_2;export{_2 as rip,T1 as processRipScripts,g as parser,O2 as getReactiveRuntime,q2 as getComponentRuntime,y as formatSExpr,t as compileToJS,H2 as compile,v2 as VERSION,v as Lexer,r as Compiler,V as CodeGenerator,g2 as BUILD_DATE};

package/docs/index.html

@@ -191,7 +191,7 @@
       display: flex;
       align-items: flex-start;
       gap: 4px;
-      background: #1e1e1e;
+      background: #2d2d30;
       padding: 8px 10px;
       border: 1px solid #3e3e42;
       border-radius: 4px;
@@ -907,9 +907,13 @@ console.log "Domain:", domain`;
     modeToggle.addEventListener('click', () => {
       isDark = !isDark;
       applyMode();
-      const defaultTheme = isDark ? 'vs-dark' : 'vs';
-      themeSelect.value = defaultTheme;
-      setTheme(defaultTheme);
+      // Only reset theme if currently using a built-in default
+      const current = themeSelect.value;
+      if (current === 'vs' || current === 'vs-dark') {
+        const defaultTheme = isDark ? 'vs-dark' : 'vs';
+        themeSelect.value = defaultTheme;
+        setTheme(defaultTheme);
+      }
     });
 
     // ========================================================================
@@ -1038,7 +1042,7 @@ console.log "Domain:", domain`;
     // Tab Switching
     // ========================================================================
 
-    function switchToTab(tabName) {
+    async function switchToTab(tabName) {
       // Update URL hash
       window.location.hash = tabName;
 
@@ -1057,7 +1061,7 @@ console.log "Domain:", domain`;
         replEditor.focus();
       } else if (tabName === 'compiler') {
         // Compiler restores user's selected theme
-        setTheme(themeSelect.value);
+        await setTheme(themeSelect.value);
         compileCode();
       }
     }
@@ -1083,7 +1087,7 @@ console.log "Domain:", domain`;
     // Initialize from URL hash on page load (default to compiler)
     const initialTab = window.location.hash.slice(1);
     if (['compiler', 'repl'].includes(initialTab)) {
-      switchToTab(initialTab);
+      await switchToTab(initialTab);
     } else {
       // No hash - compiler is default
       compileCode();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rip-lang",
-  "version": "3.4.3",
+  "version": "3.4.5",
   "description": "A modern language that compiles to JavaScript",
   "type": "module",
   "main": "src/compiler.js",
@@ -67,7 +67,7 @@
   "author": "Steve Shreeve <steve.shreeve@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "@rip-lang/api": "1.1.4",
-    "@rip-lang/ui": "0.1.2"
+    "@rip-lang/api": "1.1.5",
+    "@rip-lang/ui": "0.1.3"
   }
 }

package/src/compiler.js

@@ -12,7 +12,7 @@ import { Lexer } from './lexer.js';
 import { parser } from './parser.js';
 import { installComponentSupport } from './components.js';
 import { emitTypes, generateEnum } from './types.js';
-import { SourceMapGenerator } from './sourcemap.js';
+import { SourceMapGenerator } from './sourcemaps.js';
 
 // =============================================================================
 // Metadata helpers — isolate all new String() awareness here

package/docs/example.html

@@ -1,177 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Inline Rip Code Demo</title>
-  <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
-    }
-
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      padding: 40px;
-      max-width: 800px;
-      margin: 0 auto;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      min-height: 100vh;
-    }
-
-    .container {
-      background: white;
-      border-radius: 12px;
-      padding: 40px;
-      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-    }
-
-    h1 {
-      color: #333;
-      margin-bottom: 10px;
-      font-size: 32px;
-    }
-
-    .subtitle {
-      color: #666;
-      margin-bottom: 30px;
-      font-size: 16px;
-    }
-
-    .output {
-      background: #f8f9fa;
-      border-left: 4px solid #667eea;
-      padding: 20px;
-      margin: 20px 0;
-      border-radius: 4px;
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 14px;
-    }
-
-    .output h3 {
-      margin: 0 0 10px 0;
-      color: #667eea;
-      font-size: 14px;
-      text-transform: uppercase;
-      letter-spacing: 1px;
-    }
-
-    button {
-      background: #667eea;
-      color: white;
-      border: none;
-      padding: 12px 24px;
-      border-radius: 6px;
-      cursor: pointer;
-      font-size: 16px;
-      font-weight: 600;
-      margin: 10px 10px 10px 0;
-      transition: all 0.3s;
-    }
-
-    button:hover {
-      background: #5568d3;
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-    }
-
-    .code-block {
-      background: #282c34;
-      color: #abb2bf;
-      padding: 20px;
-      border-radius: 8px;
-      margin: 20px 0;
-      overflow-x: auto;
-    }
-
-    .code-block pre {
-      margin: 0;
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 13px;
-      line-height: 1.5;
-    }
-
-    .keyword { color: #c678dd; }
-    .function { color: #61afef; }
-    .string { color: #98c379; }
-    .comment { color: #5c6370; font-style: italic; }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <h1>🔮 Inline Rip Demo</h1>
-    <p class="subtitle">Rip code embedded directly in HTML with <code>&lt;script type="text/rip"&gt;</code></p>
-
-    <div class="code-block">
-      <pre><span class="comment"># This Rip code runs automatically!</span>
-<span class="keyword">def</span> <span class="function">greet</span>(name)
-  <span class="string">"Hello, ${name}! 👋"</span>
-
-<span class="keyword">def</span> <span class="function">fibonacci</span>(n)
-  <span class="keyword">if</span> n <= 1
-    n
-  <span class="keyword">else</span>
-    fibonacci(n - 1) + fibonacci(n - 2)</pre>
-    </div>
-
-    <div id="output" class="output">
-      <h3>Output</h3>
-      <div id="results">Click the buttons to see Rip in action!</div>
-    </div>
-
-    <button onclick="testGreeting()">Test Greeting</button>
-    <button onclick="testFibonacci()">Calculate Fibonacci(10)</button>
-    <button onclick="testMath()">Test Math Operations</button>
-  </div>
-
-  <!-- Rip code embedded directly in the page! -->
-  <script type="text/rip">
-    # Define greeting function
-    def greet(name)
-      "Hello, ${name}! 👋"
-
-    # Define fibonacci function
-    def fibonacci(n)
-      if n <= 1
-        n
-      else
-        fibonacci(n - 1) + fibonacci(n - 2)
-
-    # Define math operations
-    def calculate(a, b)
-      sum = a + b
-      product = a * b
-      power = a ** b
-      {sum: sum, product: product, power: power}
-  </script>
-
-  <!-- Load the Rip compiler and runtime (loads after Rip scripts are in DOM) -->
-  <script type="module" src="./dist/rip.browser.min.js"></script>
-
-  <!-- Regular JavaScript to handle UI interactions -->
-  <script>
-    const output = document.getElementById('results');
-
-    function testGreeting() {
-      const result = greet('Rip User');
-      output.innerHTML = `<strong>greet('Rip User')</strong><br>→ ${result}`;
-    }
-
-    function testFibonacci() {
-      const result = fibonacci(10);
-      output.innerHTML = `<strong>fibonacci(10)</strong><br>→ ${result}`;
-    }
-
-    function testMath() {
-      const result = calculate(2, 3);
-      output.innerHTML = `
-        <strong>calculate(2, 3)</strong><br>
-        → sum: ${result.sum}<br>
-        → product: ${result.product}<br>
-        → power: ${result.power}
-      `;
-    }
-  </script>
-</body>
-</html>