rip-lang 2.5.0 → 2.7.1

package/docs/GUIDE.md

@@ -2,19 +2,17 @@
 
 # Rip Language Guide
 
-> **The Language IS the Framework**
+> **Modern CoffeeScript with Built-in Reactivity**
 
-This comprehensive guide covers Rip's reactive primitives, template syntax, component model, and special operators. Rip provides these features as **language-level constructs**, not library imports—reactivity and UI are built into the syntax itself.
+This comprehensive guide covers Rip's reactive primitives, special operators, and regex enhancements. Rip provides reactivity as a **language-level construct**, not a library import—state management is built into the syntax itself.
 
 ---
 
 ## Table of Contents
 
 1. [Reactivity](#1-reactivity)
-2. [Templates](#2-templates)
-3. [Components](#3-components)
-4. [Special Operators](#4-special-operators)
-5. [Regex+ Features](#5-regex-features)
+2. [Special Operators](#2-special-operators)
+3. [Regex+ Features](#3-regex-features)
 
 ---
 
@@ -24,72 +22,91 @@ Rip provides reactive primitives as **language-level operators**, not library im
 
 ## Reactive Operators
 
-| Operator | Name | Purpose |
-|----------|------|---------|
-| `:=` | Signal | Reactive state variable |
-| `~=` | Derived | Computed value (auto-updates when dependencies change) |
-| `effect` | Effect | Side effect that runs when dependencies change |
-| `=!` | Equal, dammit! | Constant (`const`) - not reactive, just immutable |
+| Operator | Name | Read as | Purpose |
+|----------|------|---------|---------|
+| `=` | Assign | "gets value" | Regular assignment |
+| `:=` | State | "**has state**" | Reactive state variable |
+| `~=` | Computed | "**always equals**" | Computed value (auto-updates when dependencies change) |
+| `~>` | Effect | "**reacts to**" | Side effect that runs when dependencies change |
+| `=!` | Readonly | "equals, dammit!" | Constant (`const`) - not reactive, just immutable |
 
-## Reactive State (`:=`)
+## Reactive State (`:=`) — "has state"
 
-The signal operator creates reactive state:
+The state operator creates reactive state:
 
 ```coffee
-count := 0              # Reactive signal
-name := "world"         # Another reactive signal
+count := 0              # count has state 0
+name := "world"         # name has state "world"
 ```
 
-State changes automatically trigger updates in any derived values or effects that depend on them.
+State changes automatically trigger updates in any computed values or effects that depend on them.
 
-## Derived Values (`~=`)
+## Computed Values (`~=`) — "always equals"
 
-The "always equals" operator creates a value that automatically recomputes when its dependencies change:
+The computed operator creates a value that automatically recomputes when its dependencies change:
 
 ```coffee
 count := 0
-doubled ~= count * 2    # Always equals count * 2
+doubled ~= count * 2    # doubled always equals count * 2
 
 count = 5               # doubled automatically becomes 10
 count = 10              # doubled automatically becomes 20
 ```
 
-## Constant Values (`=!`) - "Equal, Dammit!"
+## Side Effects (`~>`) — "reacts to"
 
-In Rip, regular assignment (`=`) compiles to `let` for maximum flexibility. When you want an immutable constant, use the "equal, dammit!" operator (`=!`), which compiles to `const`:
+The effect operator defines a side effect that runs when its dependencies change. Dependencies are auto-tracked from reactive values read in the body:
 
 ```coffee
-# Regular assignment → let (can reassign)
-host = "localhost"
-host = "example.com"    # OK - variables are flexible by default
+count := 0
 
-# Equal, dammit! → const (can't reassign)
-API_URL =! "https://api.example.com"
-MAX_RETRIES =! 3
+~> console.log "Count changed to:", count
 
-API_URL = "other"       # Error! const cannot be reassigned
+count = 5    # Logs: "Count changed to: 5"
+count = 10   # Logs: "Count changed to: 10"
 ```
 
-This gives you opt-in immutability when you need it, while keeping the default flexible for scripting.
+Effects are useful for:
+- Logging and debugging
+- Syncing with external systems
+- Analytics tracking
+- Local storage persistence
 
-## Side Effects (`effect`)
+### Controllable Effects
 
-The `effect` keyword defines a side effect block that runs when its dependencies change:
+Assign the effect to a variable to control it:
 
 ```coffee
 count := 0
 
-effect -> console.log "Count changed to:", count
+# Fire and forget (no assignment)
+~> console.log count
 
-count = 5    # Logs: "Count changed to: 5"
-count = 10   # Logs: "Count changed to: 10"
+# Controllable (assign to variable)
+logger ~> console.log count
+
+logger.stop!     # Pause reactions
+logger.run!      # Resume reactions  
+logger.cancel!   # Permanent disposal
 ```
 
-Effects are useful for:
-- Logging and debugging
-- Syncing with external systems
-- Analytics tracking
-- Local storage persistence
+## Constant Values (`=!`) — "equals, dammit!"
+
+In Rip, regular assignment (`=`) compiles to `let` for maximum flexibility. When you want an immutable constant, use the "equal, dammit!" operator (`=!`), which compiles to `const`:
+
+```coffee
+# Regular assignment → let (can reassign)
+host = "localhost"
+host = "example.com"    # OK - variables are flexible by default
+
+# Equal, dammit! → const (can't reassign)
+API_URL =! "https://api.example.com"
+MAX_RETRIES =! 3
+
+API_URL = "other"       # Error! const cannot be reassigned
+```
+
+This gives you opt-in immutability when you need it, while keeping the default flexible for scripting.
 
 ## Auto-Unwrapping
 
@@ -114,11 +131,22 @@ count.read()             # Get value without tracking dependencies
 |--------|---------|
 | `x.read()` | Get value without tracking (for effects that shouldn't re-run) |
 | `x.value` | Direct access to the underlying value |
-| `+x` | Shorthand for `x.value` (triggers tracking in effects) |
+| `+x` | Shorthand for `x.value` (triggers tracking in computed/effects) |
 | `x.lock()` | Make value readonly (can read but can't change) |
-| `x.free()` | Unsubscribe from all dependencies (signal still works) |
+| `x.free()` | Unsubscribe from all dependencies (state still works) |
 | `x.kill()` | Clean up everything and return final value |
 
+## Effect Controller Methods
+
+When you assign an effect to a variable, you get a controller object:
+
+| Method | Purpose |
+|--------|---------|
+| `e.stop!` | Pause reactions (can resume later) |
+| `e.run!` | Resume reactions |
+| `e.cancel!` | Permanent disposal (cannot resume) |
+| `e.active` | Boolean — is the effect running? |
+
 ## Dependency Tracking
 
 Understanding when dependencies are tracked is key to effective reactive programming.
@@ -133,7 +161,7 @@ Understanding when dependencies are tracked is key to effective reactive program
 | `+count` | ✅ Yes | Unary plus triggers `.valueOf()` |
 | `count.value` | ✅ Yes | Direct `.value` access |
 | `count.read()` | ❌ No | Explicit non-tracking read |
-| `y = count` | ❌ No | Assigns signal object, not value |
+| `y = count` | ❌ No | Assigns state object, not value |
 
 ### Example: Tracking vs Non-Tracking
 
@@ -141,37 +169,17 @@ Understanding when dependencies are tracked is key to effective reactive program
 count := 10
 
 # Effect A: Subscribes to count (will re-run when count changes)
-effect -> console.log "A: #{count}"
+~> console.log "A: #{count}"
 
-# Effect B: Does NOT subscribe (won't re-run)
-effect -> console.log "B: #{count.read()}"
-
-count = 20
-# Output:
-#   A: 20    ← Effect A re-ran
-#            ← Effect B did NOT re-run
-```
-
-### When to Use `.read()`
-
-Use `.read()` when you need the current value but don't want to create a dependency:
-
-```coffee
-count := 0
-lastSaved := 0
-
-effect ->
-  # We want to log count changes, but compare against lastSaved
-  # without re-running when lastSaved changes
-  if count != lastSaved.read()
-    console.log "Unsaved changes: #{count}"
+# Reading without tracking (for comparisons, etc.)
+currentValue = count.read()  # Does not create dependency
 ```
 
 ## Lifecycle & Cleanup
 
-### Locking a Signal
+### Locking a State
 
-Make a signal readonly (subscriptions stay active):
+Make a state readonly (subscriptions stay active):
 
 ```coffee
 config := { theme: "dark" }
@@ -193,25 +201,29 @@ doubled.free()  # No longer updates when count changes
 count = 10      # doubled stays at its last value
 ```
 
-### Killing a Signal
+### Killing a State
 
 Clean up completely and get the final value:
 
 ```coffee
 count := 10
-finalValue = count.kill()  # Returns 10, signal is now dead
+finalValue = count.kill()  # Returns 10, state is now dead
 
-count = 20  # Error or no-op (signal is dead)
+count = 20  # Error or no-op (state is dead)
 ```
 
 ### Effect Cleanup
 
-Effects can return a cleanup function:
+Use the effect controller to manage lifecycle:
 
 ```coffee
-effect ->
+# Assign to a variable for control
+ticker ~>
   interval = setInterval (-> tick()), 1000
-  -> clearInterval interval  # Cleanup when effect re-runs or disposes
+  -> clearInterval interval  # Cleanup function returned
+
+# Later, when done:
+ticker.cancel!  # Stops the effect and runs cleanup
 ```
 
 ## Real-World Example
@@ -219,21 +231,17 @@ effect ->
 A complete reactive counter with persistence:
 
 ```coffee
-# Reactive state
+# Reactive state — count has state (loaded from localStorage)
 count := parseInt(localStorage.getItem("count")) or 0
 
-# Derived values
+# Computed values — always equal to their expressions
 doubled ~= count * 2
 isEven ~= count % 2 == 0
 message ~= "Count is #{count} (#{isEven ? 'even' : 'odd'})"
 
-# Side effect: persist to localStorage
-effect ->
-  localStorage.setItem "count", count
-
-# Side effect: log changes
-effect ->
-  console.log message
+# Side effects — react to dependencies (auto-tracked)
+~> localStorage.setItem "count", count  # Persist
+~> console.log message                  # Log
 
 # Usage
 count = 5
@@ -251,16 +259,16 @@ The Rip compiler transforms reactive operators into efficient JavaScript:
 
 ```coffee
 # Rip source
-count := 0
-doubled ~= count * 2
-effect -> console.log doubled
+count := 0                    # count has state 0
+doubled ~= count * 2          # doubled always equals count * 2
+~> console.log count          # reacts to count changes
 ```
 
 ```javascript
 // Compiled output (conceptual)
-const count = __signal(0);
+const count = __state(0);
 const doubled = __computed(() => count.value * 2);
-__effect(() => console.log(doubled.value));
+__effect(() => { console.log(count.value); });
 ```
 
 The runtime is **automatically inlined** - no external dependencies required.
@@ -289,843 +297,15 @@ console.log(y);
 | Concept | React | Vue | Solid | Rip |
 |---------|-------|-----|-------|-----|
 | State | `useState()` | `ref()` | `createSignal()` | `x := 0` |
-| Derived | `useMemo()` | `computed()` | `createMemo()` | `x ~= y * 2` |
-| Effect | `useEffect()` | `watch()` | `createEffect()` | `effect ->` |
+| Computed | `useMemo()` | `computed()` | `createMemo()` | `x ~= y * 2` |
+| Effect | `useEffect()` | `watch()` | `createEffect()` | `~> body` or `x ~> body` |
 | Constant | `const` | `const` | `const` | `x =! 0` |
 
 Rip's approach: **No imports, no hooks, no special functions. Just operators.**
 
 ---
 
-# 2. Templates
-
-Rip's template syntax is not a separate language—it's native Rip syntax. The `render` block uses indentation-based markup that compiles directly to efficient DOM operations.
-
-## Quick Reference
-
-| Syntax | Purpose | Example |
-|--------|---------|---------|
-| `tag` | Element | `div`, `span`, `button` |
-| `.class` | CSS class | `div.card`, `button.btn.primary` |
-| `#id` | Element ID | `div#main`, `section#hero` |
-| `.()` | Dynamic classes | `div.('active', isOn && 'on')` |
-| `attr: val` | Attribute | `type: "text"`, `disabled: true` |
-| `@event: fn` | Event handler | `@click: handleClick` |
-| `@event.mod:` | Event modifier | `@click.prevent: submit` |
-| `"text"` | Text content | `span "Hello"` |
-| `#{expr}` | Interpolation | `"Count: #{count}"` |
-| `ref: var` | Element reference | `ref: inputEl` |
-| `key: val` | List item key | `key: item.id` |
-| `...props` | Spread attributes | `div ...props` |
-| `X <=> var` | Two-way binding | `value <=> name` |
-| `if`/`else` | Conditional | `div if visible` |
-| `for...in` | Iteration | `for item in items` |
-
-## Tags
-
-### Basic Tags
-
-```coffee
-render
-  div
-  span
-  button
-  input
-  MyComponent
-```
-
-### With Classes (CSS Selector Syntax)
-
-```coffee
-div.card
-div.card.active
-button.btn.btn-primary
-span.badge.badge-success
-```
-
-### With IDs
-
-```coffee
-div#main
-section#hero
-input#search-field
-```
-
-### Combined
-
-```coffee
-section#hero.full-width.dark
-div#sidebar.panel.collapsed
-article#post-123.blog-post.featured
-```
-
-## Attributes
-
-### Inline
-
-```coffee
-input type: "text", placeholder: "Enter name", required: true
-a href: "/home", target: "_blank", "Go Home"
-img src: user.avatar, alt: user.name
-```
-
-### Indented (for many attributes)
-
-```coffee
-input
-  type: "email"
-  placeholder: "you@example.com"
-  required: true
-  autocomplete: "email"
-  @input: handleInput
-```
-
-### Dynamic Values
-
-```coffee
-input value: searchTerm, disabled: isLoading
-img src: user.avatar, alt: user.name
-a href: "/users/#{user.id}", "View Profile"
-div title: tooltip, data-id: item.id
-```
-
-### Boolean Attributes
-
-Boolean attributes are present when `true`, absent when `false`:
-
-```coffee
-button disabled: isLoading          # <button disabled> or <button>
-input required: true, readonly: isLocked
-option selected: isDefault
-details open: expanded
-```
-
-### Dynamic Classes with `cx()` (clsx-compatible)
-
-Rip includes a `clsx`-compatible `cx()` helper for dynamic class composition. Use the `.()` syntax on elements:
-
-```coffee
-# Basic: conditions in parens
-div.('card', isActive && 'active', size)
-
-# With static classes too
-div.card.('highlighted', isNew && 'new')
-
-# Object syntax (like clsx)
-div.({ active: isActive, disabled: isDisabled })
-
-# Mixed - strings, conditions, objects
-div.base.('extra', { selected: isSelected })
-```
-
-### Spreading Props
-
-Spread an object as attributes:
-
-```coffee
-render
-  # Basic spread
-  div ...props
-
-  # With static classes
-  div.card ...props
-
-  # With explicit attrs (override spreads)
-  input ...inputProps, class: "extra", disabled: true
-
-  # With children
-  div.wrapper ...containerProps
-    span "Content"
-```
-
-## Two-Way Binding
-
-Two-way binding automatically syncs an element's value with a variable using the `<=>` operator:
-
-```coffee
-render
-  # Text input - value syncs with username
-  input value <=> username
-
-  # Checkbox - checked syncs with isActive
-  input type: "checkbox", checked <=> isActive
-
-  # Select dropdown
-  select value <=> selectedId
-
-  # Textarea
-  textarea value <=> content
-```
-
-The `<=>` operator reads as "syncs with" — it's a visual representation of bidirectional data flow.
-
-**Smart event selection:**
-- `value` on `input`/`textarea` → `oninput` event
-- `value` on `select` → `onchange` event
-- `checked` → `onchange` event
-
-**Smart value access:**
-- `type="number"` inputs → `e.target.valueAsNumber`
-- `type="range"` inputs → `e.target.valueAsNumber`
-- All other inputs → `e.target.value`
-
-## Event Handlers
-
-### Basic Events
-
-```coffee
-button @click: handleClick
-button @click: -> count += 1
-input @input: (e) -> value = e.target.value
-form @submit: handleSubmit
-```
-
-### Event Handler Patterns
-
-There are two common patterns for event handlers:
-
-```coffee
-# Normal: define methods, reference with @
-inc: -> count += 1
-button @click: @inc, "+"
-
-# Compact: inline with fat arrow (parens required)
-button (@click: => @count++), "+"
-```
-
-The fat arrow (`=>`) binds `this` correctly for inline handlers.
-
-### Event Modifiers
-
-```coffee
-# Prevent default
-form @submit.prevent: handleSubmit
-a @click.prevent: navigate
-
-# Stop propagation
-button @click.stop: handleClick
-
-# Combined
-a @click.prevent.stop: handleNavigation
-
-# Once (auto-removes after first call)
-button @click.once: initialize
-
-# Self (only if target is the element itself)
-div @click.self: handleDivClick
-```
-
-### Key Modifiers
-
-```coffee
-input @keydown.enter: submit
-input @keydown.escape: cancel
-input @keydown.tab: handleTab
-input @keydown.space: togglePlay
-input @keydown.up: previousItem
-input @keydown.down: nextItem
-```
-
-### Modifier Key Combinations
-
-```coffee
-input @keydown.ctrl.s: save
-input @keydown.cmd.s: save           # Mac Command key
-input @keydown.shift.enter: newLine
-input @keydown.ctrl.shift.z: redo
-button @click.ctrl: openInNewTab
-```
-
-## Text Content
-
-### As Final Argument
-
-```coffee
-button "Click me"
-span "Hello, #{name}!"
-h1 "Welcome"
-p "This is a paragraph of text."
-```
-
-### Variables as Text
-
-```coffee
-span count
-span user.name
-span formatCurrency(total)
-td item.quantity
-```
-
-### Mixed Content
-
-```coffee
-p
-  "Hello, "
-  strong name
-  "! Welcome back."
-
-span
-  "Total: "
-  strong formatCurrency(total)
-```
-
-## Children & Nesting
-
-Rip uses implicit nesting based on indentation:
-
-```coffee
-div.card
-  header.card-header
-    h2.title "Product"
-    span.badge "New"
-
-  div.card-body
-    p description
-
-    ul.features
-      li "Feature one"
-      li "Feature two"
-      li "Feature three"
-
-  footer.card-footer
-    button.secondary "Cancel"
-    button.primary "Buy Now"
-```
-
-You can also use explicit arrow syntax for inline nesting:
-
-```coffee
-div.card -> h1 "Title"
-```
-
-## Conditionals
-
-### If/Else Blocks
-
-```coffee
-div.status
-  if loading
-    span.spinner
-    "Loading..."
-  else if error
-    span.error error.message
-  else
-    span.success "Loaded!"
-```
-
-### Inline Conditionals
-
-```coffee
-span.badge "Admin" if user.isAdmin
-span.warning "Unsaved" unless saved
-div.alert error if error
-```
-
-### Ternary Expressions
-
-```coffee
-span class: { active: isActive }
-  isActive ? "On" : "Off"
-
-button class: { primary: isPrimary }
-  isPrimary ? "Save" : "Continue"
-```
-
-## Loops
-
-### Array Iteration with Key
-
-**Always provide a `key` for list items** to enable efficient updates:
-
-```coffee
-ul.todo-list
-  for todo in todos, key: todo.id
-    li class: { completed: todo.done }
-      span todo.text
-      button @click: -> remove(todo), "×"
-```
-
-### With Index
-
-```coffee
-ol
-  for item, i in items, key: item.id
-    li "#{i + 1}. #{item.name}"
-
-table
-  for row, rowIndex in rows, key: row.id
-    tr class: { even: rowIndex % 2 is 0 }
-      for cell, colIndex in row.cells, key: colIndex
-        td cell
-```
-
-### Object Iteration
-
-```coffee
-dl
-  for key, value of user
-    dt key
-    dd value
-
-div.metadata
-  for prop, val of item.meta
-    span.tag "#{prop}: #{val}"
-```
-
-### Ranges
-
-```coffee
-# Numeric range
-ul
-  for i in [1..5]
-    li "Item #{i}"
-
-# Dynamic range
-ul
-  for page in [1..totalPages], key: page
-    button @click: -> goToPage(page), page
-```
-
-## Refs
-
-Element references for direct DOM access:
-
-```coffee
-component SearchBox
-  inputEl = null
-
-  mounted: ->
-    inputEl.focus()
-
-  clear: ->
-    inputEl.value = ""
-    inputEl.focus()
-
-  render
-    div.search
-      input ref: inputEl, type: "text", @input: handleInput
-      button @click: clear, "Clear"
-```
-
-## SVG Support
-
-```coffee
-svg viewBox: "0 0 24 24", width: 24, height: 24
-  path d: "M12 2L2 7l10 5 10-5-10-5z"
-  path d: "M2 17l10 5 10-5"
-
-# With dynamic values
-svg.icon class: { active: isActive }
-  circle cx: 12, cy: 12, r: radius
-  line x1: 0, y1: 0, x2: 24, y2: 24, stroke: color
-```
-
-## Fragment (Multiple Root Elements)
-
-When you need multiple root elements without a wrapper:
-
-```coffee
-render
-  <>
-    Header
-    main
-      @children
-    Footer
-```
-
----
-
-# 3. Components
-
-Rip provides component syntax as **language-level constructs**, not library patterns.
-
-## Basic Component
-
-```coffee
-component HelloWorld
-  render
-    div "Hello, World!"
-```
-
-That's it. No imports, no boilerplate, no `export default`.
-
-### Creating & Mounting
-
-```coffee
-# Ruby-style constructor (Rip enhancement)
-app = HelloWorld.new()
-app.mount "#app"
-
-# Or chain it
-HelloWorld.new().mount "#app"
-
-# Traditional JS style also works
-app = new HelloWorld()
-app.mount "#app"
-
-# With props
-Counter.new(label: "Score", initial: 10).mount "#counter"
-```
-
-The `mount` method accepts either an element or a CSS selector string.
-
-## Component Structure
-
-```coffee
-component Name
-  # ═══════════════════════════════════════════
-  # Constants (readonly)
-  # ═══════════════════════════════════════════
-  MAX_ITEMS =! 100
-
-  # ═══════════════════════════════════════════
-  # Props (from parent)
-  # ═══════════════════════════════════════════
-  @title                    # Required prop
-  @subtitle?                # Optional prop (undefined if not provided)
-  @count = 0                # Optional prop with default
-  @onSelect                 # Callback prop
-  @children                 # Nested content (slot)
-  @...rest                  # Rest props (capture remaining)
-
-  # ═══════════════════════════════════════════
-  # State (local, reactive)
-  # ═══════════════════════════════════════════
-  expanded = false
-  items = []
-  searchTerm = ""
-
-  # ═══════════════════════════════════════════
-  # Derived (always equals)
-  # ═══════════════════════════════════════════
-  filtered ~= items.filter (i) -> i.active
-  total ~= items.reduce ((sum, i) -> sum + i.price), 0
-  isEmpty ~= items.length is 0
-
-  # ═══════════════════════════════════════════
-  # Methods (private)
-  # ═══════════════════════════════════════════
-  add: (item) ->
-    items = [...items, item]
-
-  remove: (item) ->
-    items = items.filter (i) -> i isnt item
-
-  # ═══════════════════════════════════════════
-  # Exposed Methods (parent can call)
-  # ═══════════════════════════════════════════
-  clear: ∞>
-    items = []
-
-  focus: ∞>
-    inputEl.focus()
-
-  # ═══════════════════════════════════════════
-  # Lifecycle
-  # ═══════════════════════════════════════════
-  mounted: ->
-    # After first render, DOM available
-    saved = localStorage.getItem "items"
-    items = JSON.parse saved if saved
-
-  unmounted: ->
-    # Cleanup before removal
-
-  updated: ->
-    # After any reactive update
-
-  # ═══════════════════════════════════════════
-  # Effects (side effects)
-  # ═══════════════════════════════════════════
-  effect ->
-    # Runs when dependencies change
-    localStorage.setItem "items", JSON.stringify items
-
-  effect ->
-    # Return function for cleanup
-    interval = setInterval (-> tick()), 1000
-    -> clearInterval interval
-
-  # ═══════════════════════════════════════════
-  # Render
-  # ═══════════════════════════════════════════
-  render
-    div.container
-      h1 @title
-      p @subtitle if @subtitle
-      # ... template
-```
-
-## Props System
-
-### Declaration
-
-```coffee
-component Button
-  # Required (error if not provided)
-  @label
-
-  # Optional (undefined if not provided)
-  @icon?
-
-  # Optional with default
-  @variant = "default"
-  @size = "md"
-  @disabled = false
-
-  # Callback prop
-  @onClick
-
-  # Children (nested content)
-  @children
-
-  # Rest props (capture all others)
-  @...rest
-```
-
-### Usage
-
-```coffee
-# Parent component
-render
-  Button
-    label: "Save"
-    variant: "primary"
-    onClick: handleSave
-
-  Button label: "Cancel", variant: "ghost", onClick: handleCancel
-
-  Button label: "Delete", variant: "danger"
-    icon: "trash"                    # Named prop
-    span "Are you sure?"             # Becomes @children
-```
-
-### Prop Rules
-
-| Rule | Description |
-|------|-------------|
-| **Readonly** | Props cannot be reassigned inside component |
-| **Required** | `@prop` without default throws if not provided |
-| **Optional** | `@prop?` is undefined if not provided |
-| **Default** | `@prop = value` uses value if not provided |
-| **Callback** | Functions passed as props, call with `@onClick()` |
-| **Children** | `@children` receives unnamed nested content |
-| **Rest** | `@...rest` captures all non-declared props |
-| **Spread** | `...@rest` spreads captured props to element |
-
-### Forwarding Props
-
-```coffee
-component FancyInput
-  @label
-  @error?
-  @...inputProps
-
-  render
-    div.field
-      label @label
-      input ...@inputProps       # Spread all other props to input
-      span.error @error if @error
-```
-
-## Lifecycle Hooks
-
-```coffee
-component DataView
-  @url
-  data = null
-  error = null
-  loading = true
-
-  mounted: ->
-    # Runs once after first render
-    # DOM is available
-    try
-      data = fetch! @url
-    catch e
-      error = e.message
-    finally
-      loading = false
-
-  unmounted: ->
-    # Runs before component is removed
-    # Cleanup subscriptions, timers, etc.
-
-  updated: ->
-    # Runs after any reactive update
-    console.log "Component updated"
-
-  render
-    div
-      if loading
-        Spinner()
-      else if error
-        ErrorMessage message: error
-      else
-        DataDisplay data: data
-```
-
-| Hook | When | Use For |
-|------|------|---------|
-| `mounted:` | After first render | Initial fetch, DOM access, setup |
-| `unmounted:` | Before removal | Cleanup timers, subscriptions |
-| `updated:` | After reactive updates | Logging, analytics |
-
-## Children / Slots
-
-### Basic Children
-
-```coffee
-component Card
-  @title
-  @children
-
-  render
-    div.card
-      h2 @title
-      div.card-body
-        @children              # Render children here
-
-# Usage:
-Card title: "My Card"
-  p "This is the card content."
-  p "It can have multiple elements."
-```
-
-### Named Slots
-
-```coffee
-component Layout
-  @header?
-  @footer?
-  @children
-
-  render
-    div.layout
-      header @header if @header
-      main @children
-      footer @footer if @footer
-
-# Usage:
-Layout
-  header:
-    h1 "My App"
-    nav ...
-  footer:
-    p "© 2024"
-
-  # Default content → @children
-  p "Main content here"
-```
-
-## Context API
-
-Pass data down through component trees without prop drilling.
-
-```coffee
-component App
-  # Set context in constructor (runs during component init)
-  mounted: ->
-    setContext "theme", { dark: true, primary: "#3b82f6" }
-
-  render
-    div
-      Header()
-      Content()
-      Footer()
-
-component Header
-  # Get context from any ancestor
-  theme = getContext "theme"
-
-  render
-    header.("bg-blue-500" if theme?.dark)
-      h1 "My App"
-
-component DeepNestedChild
-  # Works at any depth!
-  theme = getContext "theme"
-
-  render
-    div style: "color: #{theme?.primary}"
-      "Themed content"
-```
-
-**API:**
-
-| Function | Description |
-|----------|-------------|
-| `setContext(key, value)` | Set a context value in current component |
-| `getContext(key)` | Get context from nearest ancestor (or undefined) |
-| `hasContext(key)` | Check if context exists in any ancestor |
-
-## Complete Example
-
-```coffee
-component TodoApp
-  # Constants
-  STORAGE_KEY =! "todos"
-
-  # State
-  todos = []
-  newTodo = ""
-  filter = "all"
-
-  # Derived
-  filtered ~= switch filter
-    when "active" then todos.filter (t) -> not t.done
-    when "completed" then todos.filter (t) -> t.done
-    else todos
-
-  remaining ~= todos.filter((t) -> not t.done).length
-  allDone ~= todos.length > 0 and remaining is 0
-
-  # Methods
-  add: ->
-    return unless newTodo.trim()
-    todos = [...todos, { id: Date.now(), text: newTodo.trim(), done: false }]
-    newTodo = ""
-
-  toggle: (todo) ->
-    todo.done = not todo.done
-    todos = [...todos]   # Trigger reactivity
-
-  # Lifecycle
-  mounted: ->
-    saved = localStorage.getItem STORAGE_KEY
-    todos = JSON.parse saved if saved
-
-  # Effects
-  effect ->
-    localStorage.setItem STORAGE_KEY, JSON.stringify todos
-
-  # Render
-  render
-    section.todoapp
-      header.header
-        h1 "todos"
-        input.new-todo
-          placeholder: "What needs to be done?"
-          value: newTodo
-          @input: (e) -> newTodo = e.target.value
-          @keydown.enter: add
-
-      section.main if todos.length
-        ul.todo-list
-          for todo in filtered, key: todo.id
-            li class: { completed: todo.done }
-              input.toggle type: "checkbox", checked: todo.done, @change: -> toggle todo
-              label todo.text
-
-      footer.footer if todos.length
-        span.todo-count
-          strong remaining
-          " items left"
-```
-
----
-
-# 4. Special Operators
+# 2. Special Operators
 
 ## Dammit Operator (`!`)
 
@@ -1280,7 +460,7 @@ result = riskyOperation() !? "default"
 
 ---
 
-# 5. Regex+ Features
+# 3. Regex+ Features
 
 **Ruby-Inspired Regex Matching with Automatic Capture**
 
@@ -1433,9 +613,7 @@ text =~ /line2/m        # Works! (/m flag allows newlines)
 3. **Minimal boilerplate** — No `useState`, no `.value` in most cases
 4. **Familiar feel** — Looks like regular assignment, behaves reactively
 5. **Zero dependencies** — Runtime is inlined, no external packages needed
-6. **Components are language constructs** — Not classes you extend, not functions you call
-7. **Templates are code** — The `render` block is Rip syntax, not a separate template language
-8. **Everything is reactive** — State, derived values, and effects just work
+6. **Framework-agnostic** — Use Rip's reactivity with any UI framework
 
 ---