@rip-lang/ui 0.1.3 → 0.3.1

package/README.md

@@ -1,877 +1,658 @@
-<img src="https://raw.githubusercontent.com/shreeve/rip-lang/main/docs/rip.svg" style="width:50px" /> <br>
+# Rip UI
 
-# Rip UI - @rip-lang/ui
+Headless, accessible UI components written in Rip. Zero dependencies. Zero CSS.
+Every widget exposes `$` attributes (compiled to `data-*`) for styling and handles keyboard
+interactions per WAI-ARIA Authoring Practices.
 
-> **A zero-build reactive web framework — ship the compiler to the browser, compile on demand, render with fine-grained reactivity**
-
-Rip UI inverts the traditional web development model. Instead of building,
-bundling, and shipping static JavaScript artifacts to the browser, it ships the
-40KB Rip compiler itself. Components are delivered as source files, stored in a
-browser-local Virtual File System, compiled on demand, and rendered with
-fine-grained DOM updates powered by Rip's built-in reactivity. No build step.
-No bundler. No configuration files.
-
-The component model adds exactly **two keywords** to the Rip language —
-`component` and `render` — and reuses everything else (classes, reactivity,
-functions, methods) that Rip already provides.
-
-## Architecture
-
-```
-                     ┌─────────────────────────────────────────┐
-                     │  Server (Bun + @rip-lang/api)           │
-                     │                                         │
-                     │  serve.rip (ripUI middleware)           │
-                     │  ├── /rip-ui/*.js   → framework files   │
-                     │  ├── /rip-ui/manifest.json → all pages  │
-                     │  ├── /rip-ui/watch  → SSE hot-reload    │
-                     │  └── /pages/*.rip   → individual pages  │
-                     └──────────────┬──────────────────────────┘
-                                    │
-         ┌──────────────────────────┼──────────────────────────┐
-         │                          │                          │
-         ▼                          ▼                          ▼
-   rip.browser.js (40KB)    @rip-lang/ui (~8KB)         SSE EventSource
-   (Rip compiler)           (framework modules)        (hot-reload channel)
-         │                          │                          │
-         │         ┌────────────────┼────────────────┐         │
-         │         │                │                │         │
-         │    Reactive Stash   Virtual FS       Router         │
-         │    (app state)     (file storage)  (URL → VFS)      │
-         │         │                │                │         │
-         │         └────────────────┼────────────────┘         │
-         │                          │                          │
-         └─────────────────►   Renderer   ◄────────────────────┘
-                          (compiles + mounts)
-                                    │
-                                  DOM
-```
-
-| Module | Size | Role |
-|--------|------|------|
-| `ui.js` | ~175 lines | `createApp` entry point with `loadBundle`, `watch`, re-exports |
-| `stash.js` | ~400 lines | Deep reactive state tree with path-based navigation |
-| `vfs.js` | ~200 lines | Browser-local Virtual File System with watchers |
-| `router.js` | ~300 lines | File-based router (URL ↔ VFS paths, History API) |
-| `renderer.js` | ~250 lines | Component lifecycle, layouts, transitions, `remount` |
-| `serve.rip` | ~140 lines | Server middleware: framework files, manifest, SSE hot-reload |
-
-## The Idea
-
-Modern web frameworks — React, Vue, Svelte, Solid — all share the same
-fundamental assumption: code must be compiled and bundled on the developer's
-machine, then shipped as static artifacts. This creates an entire ecosystem of
-build tools (Vite, Webpack, Turbopack, esbuild), configuration files, dev
-servers, hot module replacement protocols, and deployment pipelines. The
-developer experience is powerful, but the machinery is enormous.
-
-Rip UI asks: **what if the compiler ran in the browser?**
-
-At 40KB, the Rip compiler is small enough to ship alongside your application.
-Components arrive as `.rip` source files — plain text — and are compiled to
-JavaScript on the client's machine. This eliminates the build step entirely.
-There is no `dist/` folder, no source maps, no chunk splitting, no tree
-shaking, no CI build minutes. You write a `.rip` file, the browser compiles it,
-and it runs.
-
-This is not a toy or a limitation. The compiler produces the same output it
-would on a server. The reactive system is the same signal-based engine that
-powers server-side Rip. The component model compiles to anonymous ES6 classes
-with fine-grained DOM manipulation — no virtual DOM diffing.
-
-### How It Differs from Existing Frameworks
-
-| | React/Vue/Svelte | Rip UI |
-|---|---|---|
-| **Build step** | Required (Vite, Webpack, etc.) | None — compiler runs in browser |
-| **Bundle size** | 40-100KB+ framework + app bundle | 40KB compiler + ~8KB framework + raw source |
-| **HMR** | Dev server ↔ browser WebSocket | SSE notify + VFS invalidation + recompile |
-| **Deployment** | Build artifacts (`dist/`) | Source files served as-is |
-| **Component format** | JSX, SFC, templates | Rip source (`.rip` files) |
-| **Reactivity** | Library-specific (hooks, refs, signals) | Language-native (`:=`, `~=`, `~>`) |
-| **DOM updates** | Virtual DOM diff or compiled transforms | Fine-grained effects, direct DOM mutation |
-| **Routing** | Framework plugin (react-router, etc.) | Built-in file-based router over VFS |
-| **State management** | External library (Redux, Pinia, etc.) | Built-in reactive stash with deep tracking |
-
-## Component Model
-
-The component system adds two keywords to Rip: `component` and `render`. Everything
-else — reactive state (`:=`), computed values (`~=`), effects (`~>`), methods,
-lifecycle — uses standard Rip syntax. A component is an expression that evaluates
-to an anonymous ES6 class.
-
-### Defining a Component
+Widgets are plain `.rip` source files — no build step. The browser compiles
+them on the fly via Rip UI's runtime. Include them in your app by adding the
+widgets directory to your serve middleware:
 
 ```coffee
-Counter = component
-  @count := 0         # reactive state (signal) — parent can override via props
-  @step = 1           # plain prop — parent can set, not reactive
-
-  doubled ~= @count * 2   # computed (derived, read-only)
-
-  increment: -> @count += @step
-  decrement: -> @count -= @step
-
-  mounted: ->
-    console.log "Counter mounted"
-
-  render
-    div.counter
-      h1 "Count: #{@count}"
-      p "Doubled: #{doubled}"
-      button @click: @increment, "+#{@step}"
-      button @click: @decrement, "-#{@step}"
+use serve
+  dir: dir
+  components: ['components', '../../../packages/ui']
 ```
 
-This compiles to an anonymous ES6 class expression:
-
-```javascript
-Counter = class {
-  constructor(props = {}) {
-    this.count = isSignal(props.count) ? props.count : __state(props.count ?? 0);
-    this.step = props.step ?? 1;
-    this.doubled = __computed(() => this.count.value * 2);
-  }
-  increment() { return this.count.value += this.step; }
-  decrement() { return this.count.value -= this.step; }
-  mounted() { return console.log("Counter mounted"); }
-  _create() { /* fine-grained DOM creation */ }
-  _setup() { /* reactive effect bindings */ }
-  mount(target) { /* ... */ }
-  unmount() { /* ... */ }
-}
-```
+Every widget:
+- Handles all keyboard interactions per WAI-ARIA Authoring Practices
+- Sets correct ARIA attributes automatically
+- Exposes state via `$` sigil (`$open`, `$selected`) — compiles to `data-*` attributes for CSS
+- Ships zero CSS — styling is entirely in the user's stylesheets
+- Uses Rip's reactive primitives for all state management
 
-### The Two Keywords
+---
 
-**`component`** — Declares an anonymous class with component semantics:
+## Overview
 
-- `@` properties become instance variables that the parent can set via props
-- `:=` assignments create reactive signals (`__state`)
-- `~=` assignments create computed values (`__computed`)
-- `~>` assignments create effects (`__effect`)
-- Plain `=` assignments with function values become methods
-- `mounted`, `unmounted`, `updated` are lifecycle hooks called by the runtime
-- Everything else is standard Rip class behavior
+| Component | What It Handles |
+|-----------|----------------|
+| **Select** | Keyboard navigation, typeahead, ARIA listbox, positioning |
+| **Combobox** | Input filtering, keyboard nav, ARIA combobox, positioning |
+| **Dialog** | Focus trap, scroll lock, escape/click-outside dismiss, ARIA roles |
+| **Toast** | Auto-dismiss timer, stacking, ARIA live region |
+| **Popover** | Anchor positioning, flip/shift, dismiss behavior, ARIA |
+| **Tooltip** | Show/hide with delay, anchor positioning, ARIA describedby |
+| **Tabs** | Arrow key navigation, ARIA tablist/tab/tabpanel |
+| **Accordion** | Expand/collapse, single or multiple, ARIA |
+| **Checkbox** | Toggle state, indeterminate, ARIA checked |
+| **Menu** | Keyboard navigation, ARIA menu roles |
+| **Grid** | Virtual scrolling, DOM recycling, cell selection, inline editing, sorting, resizing, clipboard |
 
-**`render`** — Defines the component's template using a Pug/Jade-like DSL:
+---
 
-- Tags are bare identifiers: `div`, `h1`, `button`, `span`
-- Classes use dot notation: `div.card.active`, `button.btn.btn-primary`
-- Dynamic classes use dot-parens: `div.("active" if @selected)` (CLSX-like)
-- Attributes use object syntax: `input type: "text", placeholder: "..."`
-- Events use `@` prefix: `button @click: @handleClick`
-- Text content is a string argument: `h1 "Hello"`
-- Interpolation works: `p "Count: #{@count}"`
-- Children are indented below their parent
-- `if`/`else` and `for...in` work inside templates
+## Widgets
 
-That's it. No special attribute syntax, no directive system, no template
-compiler — just Rip's existing syntax applied to DOM construction.
+### Select
 
-### Props
-
-Every `@` property on a component is a prop that the parent can set. The child
-owns the property; the parent can provide an initial value or pass a reactive
-signal:
+Keyboard-navigable dropdown with typeahead. For provider selects, account
+pickers, or any single-value choice from a list.
 
 ```coffee
-# Parent passes plain value — child wraps it in a signal
-Counter {count: 10}
-
-# Parent passes its own signal — child uses it directly (shared state)
-Counter {count: parentCount}
+Select value <=> selectedRole, @change: handleChange
+  option value: "eng", "Engineer"
+  option value: "des", "Designer"
+  option value: "mgr", "Manager"
 ```
 
-The `isSignal` check in the constructor handles this automatically:
+**Props:** `@value`, `@placeholder`, `@disabled`
+**Events:** `@change` (detail: selected value)
+**Keyboard:** ArrowDown/Up navigate, Enter/Space select, Escape close, Home/End
+jump, type-ahead character matching
+**Data attributes:** `$open` / `[data-open]` on trigger, `$highlighted` / `[data-highlighted]` and `$selected` / `[data-selected]` on options, `$disabled` / `[data-disabled]` on trigger
 
-```javascript
-this.count = isSignal(props.count) ? props.count : __state(props.count ?? 0);
-```
+### Combobox
 
-If you don't want the parent to override a prop, don't use `@`:
+Filterable input + dropdown for search-as-you-type scenarios. For patient
+search, autocomplete, or any large list that needs filtering.
 
 ```coffee
-MyComponent = component
-  active := false      # internal state — not a prop, parent can't set it
-  @count := 0          # prop — parent can set or share a signal
+Combobox query <=> searchText, @select: handleSelect, @filter: handleFilter
+  for item in filteredItems
+    div $value: item.id
+      span item.name
 ```
 
-### Required and Optional Props
+**Props:** `@query`, `@placeholder`, `@disabled`
+**Events:** `@select` (detail: selected data-value), `@filter` (detail: query string)
+**Keyboard:** ArrowDown/Up navigate, Enter select (or first if only one match),
+Escape close/clear, Tab close
+**Data attributes:** `$open` / `[data-open]` on wrapper, `$highlighted` / `[data-highlighted]` on items
 
-```coffee
-UserCard = component
-  @name               # required — no default, error if missing
-  @avatar = "/default.png"   # optional — has a default
-  @bio? := ""         # optional reactive — ? makes it explicitly optional
-```
+### Dialog
 
-### Computed Values and Effects
+Modal dialog with focus trap, scroll lock, and escape/click-outside dismiss.
+Restores focus to the previously focused element on close.
 
 ```coffee
-TodoList = component
-  @todos := []
-  remaining ~= @todos.filter((t) -> not t.done).length
-  total ~= @todos.length
-
-  ~> console.log "#{remaining} of #{total} remaining"
-
-  render
-    div
-      h2 "Todos (#{remaining}/#{total})"
-      # ...
+Dialog open <=> showDialog, @close: handleClose
+  h2 "Confirm Action"
+  p "Are you sure?"
+  button @click: (=> showDialog = false), "Cancel"
+  button @click: handleConfirm, "Confirm"
 ```
 
-### Lifecycle
+**Props:** `@open`
+**Events:** `@close`
+**Keyboard:** Escape to close, Tab trapped within dialog
+**Data attributes:** `$open` / `[data-open]` on backdrop
+**Behavior:** Focus trap confines Tab to dialog content. Body scroll is locked
+while open. Previous focus is restored on close.
 
-`mounted`, `unmounted`, and `updated` are just methods. No special syntax. The
-runtime calls them at the appropriate times:
+### Toast
+
+Managed toast system with stacking and timer pause on hover. The state is
+the array, the operation is assignment — no helpers needed.
 
 ```coffee
-Timer = component
-  @elapsed := 0
-  @interval = null
+toasts := []
 
-  mounted: ->
-    @interval = setInterval (=> @elapsed += 1), 1000
+# Add — reactive assignment is the API
+toasts = [...toasts, { message: "Saved!", type: "success" }]
 
-  unmounted: ->
-    clearInterval @interval
+# Dismiss — filter it out
+toasts = toasts.filter (t) -> t isnt target
 
-  render
-    p "#{@elapsed} seconds"
+# Render
+ToastViewport toasts <=> toasts
 ```
 
-### Two-Way Binding
-
-The `<=>` operator creates two-way bindings between form elements and reactive
-state:
+**ToastViewport props:** `@toasts`, `@placement` (bottom-right, top-right, etc.)
+**Toast props:** `@toast` (object with `message`, `type`, `duration`, `title`, `action`)
+**Toast defaults:** `duration` = 4000ms, `type` = 'info'
+**Events:** `@dismiss` (detail: toast object)
+**Data attributes:** `$type` / `[data-type]`, `$leaving` / `[data-leaving]` (during exit animation)
+**Behavior:** Timer pauses on hover and keyboard focus, resumes on leave.
 
-```coffee
-SearchBox = component
-  @query := ""
+### Popover
 
-  render
-    input type: "text", value <=> @query
-    p "Searching for: #{@query}"
-```
-
-### Child Components
-
-Components can nest. Props are passed as object arguments:
+Floating content anchored to a trigger element. Positions itself with
+flip/shift to stay in viewport.
 
 ```coffee
-App = component
-  @user := { name: "Alice" }
-
-  render
-    div
-      Header {title: "My App"}
-      UserCard {name: @user.name, avatar: "/alice.png"}
-      Footer
+Popover placement: "bottom-start"
+  button "Options"
+  div
+    p "Popover content here"
 ```
 
-### Context
-
-Components can share state down the tree without passing props at every level:
+**Props:** `@placement`, `@offset`, `@disabled`
+**Keyboard:** Enter/Space/ArrowDown toggle, Escape close
+**Data attributes:** `$open` / `[data-open]`, `$placement` / `[data-placement]` on floating element
 
-```coffee
-# In a parent component's constructor:
-setContext 'theme', @theme
-
-# In any descendant component:
-theme = getContext 'theme'
-```
-
-### Multiple Components Per File
+### Tooltip
 
-Because `component` is an expression (not a declaration), multiple components
-can live in one file:
+Hover/focus tooltip with configurable delay and positioning.
 
 ```coffee
-Button = component
-  @label = "Click"
-  @onClick = null
-  render
-    button.btn @click: @onClick, @label
-
-Card = component
-  @title = ""
-  render
-    div.card
-      h3 @title
-      div.card-body
-        slot
-
-Page = component
-  render
-    div
-      Card {title: "Welcome"}
-        Button {label: "Get Started", onClick: -> alert "Go!"}
+Tooltip text: "Save your changes", placement: "top"
+  button "Save"
 ```
 
-## Virtual File System
-
-The VFS is a browser-local file storage layer. Components are delivered as
-source text and stored in memory. The compiler reads from the VFS, not from
-disk.
-
-```javascript
-import { vfs } from '@rip-lang/ui/vfs'
-
-const fs = vfs()
-
-// Write source files
-fs.write('pages/index.rip', 'component Home\n  render\n    h1 "Hello"')
-fs.write('pages/users/[id].rip', '...')
+**Props:** `@text`, `@placement`, `@delay` (ms), `@offset`
+**Data attributes:** `$open` / `[data-open]`, `$entering` / `[data-entering]`, `$exiting` / `[data-exiting]`, `$placement` / `[data-placement]`
+**Behavior:** Shows on mouseenter/focusin after delay, hides on
+mouseleave/focusout. Uses `aria-describedby` for accessibility.
 
-// Read
-fs.read('pages/index.rip')       // source string
-fs.exists('pages/index.rip')     // true
-fs.list('pages/')                // ['index.rip', 'users/']
-fs.listAll('pages/')             // all files recursively
+### Tabs
 
-// Watch for changes (triggers recompilation)
-fs.watch('pages/', ({ event, path }) => {
-  console.log(`${event}: ${path}`)
-})
+Keyboard-navigable tab panel with roving tabindex.
 
-// Fetch from server
-await fs.fetch('pages/index.rip', '/api/pages/index.rip')
-await fs.fetchManifest([
-  'pages/index.rip',
-  'pages/about.rip',
-  'pages/counter.rip'
-])
+```coffee
+Tabs active <=> currentTab
+  div $tab: "one", "Tab One"
+  div $tab: "two", "Tab Two"
+  div $panel: "one"
+    p "Content for tab one"
+  div $panel: "two"
+    p "Content for tab two"
 ```
 
-### Why a VFS?
-
-Traditional frameworks read from the server's file system during the build step
-and produce static bundles. Rip UI has no build step, so it needs somewhere to
-store source files in the browser. The VFS provides:
-
-- **Addressable storage** — components are referenced by path, just like files
-- **File watching** — the renderer re-compiles when a file changes
-- **Lazy loading** — pages can be fetched on demand as the user navigates
-- **Hot update** — write a new version of a file and the component re-renders
-- **Manifest loading** — bulk-fetch an app's files in one call
-
-The VFS is not IndexedDB or localStorage — it's a plain in-memory Map. Fast,
-simple, ephemeral. For persistence, the server delivers files on page load.
+**Props:** `@active`
+**Events:** `@change` (detail: tab id)
+**Keyboard:** ArrowLeft/Right navigate tabs, Home/End jump
+**Data attributes:** `$active` / `[data-active]` on active tab and panel
 
-## File-Based Router
+### Accordion
 
-URLs map to VFS paths. The routing conventions match Next.js / SvelteKit:
-
-```javascript
-import { createRouter } from '@rip-lang/ui/router'
-
-const router = createRouter(fs, { root: 'pages' })
-```
+Expand/collapse sections. Single or multiple mode.
 
-| VFS Path | URL Pattern | Example |
-|----------|-------------|---------|
-| `pages/index.rip` | `/` | Home page |
-| `pages/about.rip` | `/about` | Static page |
-| `pages/users/index.rip` | `/users` | User list |
-| `pages/users/[id].rip` | `/users/:id` | Dynamic segment |
-| `pages/blog/[...slug].rip` | `/blog/*slug` | Catch-all |
-| `pages/_layout.rip` | — | Root layout (wraps all pages) |
-| `pages/users/_layout.rip` | — | Nested layout (wraps `/users/*`) |
-
-```javascript
-// Navigate
-router.push('/users/42')
-router.replace('/login')
-router.back()
-
-// Reactive route state
-effect(() => {
-  console.log(router.path)     // '/users/42'
-  console.log(router.params)   // { id: '42' }
-})
+```coffee
+Accordion multiple: false
+  div $item: "a"
+    button $trigger: true, "Section A"
+    div $content: true
+      p "Content A"
 ```
 
-The router intercepts `<a>` clicks automatically for SPA navigation. External
-links and modified clicks (ctrl+click, etc.) pass through normally.
+**Props:** `@multiple`
+**Events:** `@change` (detail: array of open item ids)
+**Keyboard:** Enter/Space toggle, ArrowDown/Up move between triggers, Home/End
+**Methods:** `toggle(id)`, `isOpen(id)`
 
-## Reactive Stash
+### Checkbox
 
-Deep reactive state tree with path-based navigation. Every nested property is
-automatically tracked — changing any value triggers fine-grained updates.
+Toggle with checkbox or switch semantics. Supports indeterminate state.
 
-```javascript
-import { stash, effect } from '@rip-lang/ui/stash'
+```coffee
+Checkbox checked <=> isActive, @change: handleChange
+  span "Enable notifications"
 
-const app = stash({
-  user: { name: 'Alice', prefs: { theme: 'dark' } },
-  cart: { items: [], total: 0 }
-})
+Checkbox checked <=> isDark, switch: true
+  span "Dark mode"
+```
 
-// Direct property access (tracked)
-app.user.name                       // 'Alice'
-app.user.prefs.theme = 'light'      // triggers updates
+**Props:** `@checked`, `@disabled`, `@indeterminate`, `@switch`
+**Events:** `@change` (detail: boolean)
+**Keyboard:** Enter/Space toggle
+**Data attributes:** `$checked` / `[data-checked]`, `$indeterminate` / `[data-indeterminate]`, `$disabled` / `[data-disabled]`
+**ARIA:** `role="checkbox"` or `role="switch"`, `aria-checked` (true/false/mixed)
 
-// Path-based access
-app.get('user.prefs.theme')         // 'light'
-app.set('cart.items[0]', { id: 1 }) // deep set with auto-creation
-app.has('user.name')                // true
-app.del('cart.items[0]')            // delete
-app.inc('cart.total', 9.99)         // increment
-app.merge({ user: { role: 'admin' }}) // shallow merge
-app.keys('user')                    // ['name', 'prefs', 'role']
+### Menu
 
-// Reactive effects
-effect(() => {
-  console.log(`Theme: ${app.user.prefs.theme}`)
-  // Re-runs whenever theme changes
-})
-```
+Dropdown menu with keyboard navigation. For action menus, context menus.
 
-### State Tiers
-
-Three levels of reactive state, each scoped appropriately:
-
-| Tier | Scope | Lifetime | Access |
-|------|-------|----------|--------|
-| **App** | Global | Entire session | `app.user`, `app.theme` |
-| **Route** | Per-route | Until navigation | `router.params`, `router.query` |
-| **Component** | Per-instance | Until unmount | `:=` reactive state |
-
-App state lives in the stash. Route state lives in the router. Component state
-lives in the component instance as signals. All three are reactive — changes at
-any level trigger the appropriate DOM updates.
-
-## Component Renderer
-
-The renderer is the bridge between the router and the DOM. When the route
-changes, the renderer:
-
-1. Resolves the VFS path for the new route
-2. Reads the `.rip` source from the VFS
-3. Compiles it to JavaScript using the Rip compiler
-4. Evaluates the compiled code to get a component class
-5. Instantiates the component, passing route params as props
-6. Wraps it in any applicable layout components
-7. Mounts the result into the DOM target
-8. Runs transition animations (if configured)
-9. Unmounts the previous component
-
-```javascript
-import { createRenderer } from '@rip-lang/ui/renderer'
-
-const renderer = createRenderer({
-  router,
-  fs,
-  stash: appState,
-  compile: compileToJS,
-  target: '#app',
-  transition: { duration: 200 }
-})
-
-renderer.start()   // Watch for route changes, mount components
-renderer.stop()    // Unmount everything, clean up
+```coffee
+Menu @select: handleAction
+  button $trigger: true, "Actions"
+  div $item: "edit", "Edit"
+  div $item: "delete", "Delete"
+  div $item: "archive", "Archive"
 ```
 
-### Compilation Cache
-
-Compiled components are cached by VFS path. A file is only recompiled when it
-changes. The VFS watcher triggers cache invalidation, so updating a file in the
-VFS automatically causes the next render to use the new version.
-
-## Server Integration
+**Props:** `@disabled`
+**Events:** `@select` (detail: item id)
+**Keyboard:** ArrowDown/Up navigate, Enter/Space select, Escape close, Home/End
+**Data attributes:** `$open` / `[data-open]` on trigger, `$highlighted` / `[data-highlighted]` on items
 
-### `ripUI` Middleware
+### Grid
 
-The `ripUI` export from `@rip-lang/ui/serve` is a setup function that registers
-routes for serving framework files, auto-generated page manifests, and an SSE
-hot-reload channel. It works with `@rip-lang/api`'s `use()`:
+High-performance data grid with virtual scrolling, DOM recycling, cell
+selection, inline editing, column sorting, and column resizing. Renders 100K+
+rows at 60fps.
 
 ```coffee
-import { use } from '@rip-lang/api'
-import { ripUI } from '@rip-lang/ui/serve'
-
-use ripUI pages: 'pages', watch: true
-```
-
-When called, `ripUI` registers the following routes:
-
-| Route | Description |
-|-------|-------------|
-| `GET /rip-ui/ui.js` | Framework entry point |
-| `GET /rip-ui/stash.js` | Reactive state module |
-| `GET /rip-ui/vfs.js` | Virtual File System |
-| `GET /rip-ui/router.js` | File-based router |
-| `GET /rip-ui/renderer.js` | Component renderer |
-| `GET /rip-ui/compiler.js` | Rip compiler (40KB) |
-| `GET /rip-ui/manifest.json` | Auto-generated manifest of all `.rip` pages |
-| `GET /rip-ui/watch` | SSE hot-reload endpoint (when `watch: true`) |
-| `GET /pages/*` | Individual `.rip` page files (for hot-reload refetch) |
-
-### Options
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `pages` | `string` | `'pages'` | Directory containing `.rip` page files |
-| `base` | `string` | `'/rip-ui'` | URL prefix for framework files |
-| `watch` | `boolean` | `false` | Enable SSE hot-reload endpoint |
-| `debounce` | `number` | `250` | Milliseconds to batch filesystem change events |
-
-### Page Manifest
-
-The manifest endpoint (`/rip-ui/manifest.json`) auto-discovers every `.rip` file
-in the `pages` directory and bundles them into a single JSON response:
-
-```json
-{
-  "pages/index.rip": "Home = component\n  render\n    h1 \"Hello\"",
-  "pages/about.rip": "About = component\n  render\n    h1 \"About\"",
-  "pages/counter.rip": "..."
+Grid
+  data: employees
+  columns: [
+    { key: 'name',   title: 'Name',   width: 200 }
+    { key: 'age',    title: 'Age',    width: 80,  align: 'right' }
+    { key: 'role',   title: 'Role',   width: 150, type: 'select', source: roles }
+    { key: 'active', title: 'Active', width: 60,  type: 'checkbox' }
+  ]
+  rowHeight: 32
+  overscan: 5
+  striped: true
+  @beforeEdit: validator
+  @afterEdit: saveHandler
+```
+
+**Props:** `@data`, `@columns`, `@rowHeight`, `@headerHeight`, `@overscan`,
+`@striped`, `@beforeEdit`, `@afterEdit`
+**Column properties:** `key`, `title`, `width`, `align`, `type` (text/number/
+checkbox/select), `source` (for select type)
+**Methods:** `getCell(row, col)`, `setCell(row, col, value)`, `getData()`,
+`setData(data)`, `sort(col, direction)`, `scrollToRow(index)`,
+`copySelection()`, `cutSelection()`, `pasteAtActive()`
+**Keyboard:** Arrows navigate, Tab/Shift+Tab move cells, Enter/F2 edit,
+Escape cancel, Home/End, Ctrl+arrows jump to edge, PageUp/Down, Ctrl+A
+select all, Ctrl+C copy, Ctrl+V paste, Ctrl+X cut, Delete/Backspace clear,
+Space toggle checkboxes, type-to-edit
+**Data attributes:** `$active` / `[data-active]` and `$selected` / `[data-selected]` on cells, `$sorted` / `[data-sorted]` on headers, `$editing` / `[data-editing]` and `$selecting` / `[data-selecting]` on container
+**Sorting:** Click header to sort (asc/desc/none cycle), Shift+click for
+multi-column sort
+**Editing:** Double-click, Enter, F2, or start typing to edit. Enter/Tab
+commit, Escape cancel. Checkbox cells toggle on click/Space.
+**Clipboard:** Ctrl+C copies the selection as TSV (tab-separated values) —
+the universal spreadsheet interchange format. Ctrl+V pastes TSV from
+clipboard starting at the active cell, respecting column types and format
+parsers. Ctrl+X copies then clears the selection. Full interop with Excel,
+Google Sheets, and Numbers.
+**CSS theming:** Uses `--grid-*` custom properties (see `GRID.md` in
+`packages/grid/` for the full property list and dark mode example)
+
+---
+
+## Styling
+
+All widgets ship zero CSS. Write `$name` in Rip (compiles to `data-name` in HTML), then style with `[data-name]` selectors in CSS:
+
+```css
+.select-trigger[data-open] { border-color: var(--color-primary); }
+.option[data-highlighted] { background: var(--surface-2); }
+.option[data-selected] { font-weight: 600; color: var(--color-primary); }
+.dialog-backdrop[data-open] { animation: fade-in 150ms; }
+.toast[data-type="success"] { border-left: 3px solid green; }
+.toast[data-leaving] { animation: fade-out 200ms; }
+```
+
+No JavaScript styling logic. No className toggling. Write `$open` in Rip,
+style `[data-open]` in CSS. Any CSS methodology works — vanilla, Tailwind,
+Open Props, a custom design system. The widgets don't care.
+
+### Why Not CSS-in-JS?
+
+Libraries like Emotion and styled-components parse CSS strings at runtime,
+generate class names in JavaScript, and inject `<style>` tags into the
+document. This bundles styling into the component's JS, adds a runtime
+dependency, and locks consumers into the library's API. You can't restyle
+a component without modifying its source or fighting specificity.
+
+Our approach separates concerns: **behavior lives in Rip, styling lives in
+CSS, and `data-*` attributes are the interface between them.** The result
+is faster (no CSS parsing in JS), smaller (no styling runtime), and more
+flexible (swap your entire design system without touching widget code).
+
+### Open Props — Design Tokens
+
+[Open Props](https://open-props.style/) provides consistent scales for spacing,
+color, shadow, radius, easing, and typography as CSS custom properties. Pure CSS
+(4KB), no runtime, no build step.
+
+```bash
+bun add open-props
+```
+
+Import what you need:
+
+```css
+@import "open-props/sizes";
+@import "open-props/colors";
+@import "open-props/shadows";
+@import "open-props/radii";
+@import "open-props/easings";
+@import "open-props/fonts";
+```
+
+Or import everything:
+
+```css
+@import "open-props/style";
+```
+
+Override or extend any token:
+
+```css
+:root {
+  --color-primary: oklch(55% 0.25 260);
+  --radius-card: var(--radius-3);
 }
 ```
 
-The client loads this with `app.loadBundle('/rip-ui/manifest.json')`, which
-populates the VFS in a single request — no need to list pages manually.
-
-## Hot Reload
+**Token categories:**
 
-The hot-reload system uses a **notify-only** architecture — the server tells the
-browser *which files changed*, then the browser decides what to refetch.
+- **Spacing** — `--size-1` through `--size-15` (0.25rem to 7.5rem)
+- **Colors** — Full palettes (`--blue-0` through `--blue-12`, etc.) plus semantic surface tokens
+- **Shadows** — `--shadow-1` through `--shadow-6`, progressively stronger
+- **Radii** — `--radius-1` through `--radius-6` plus `--radius-round`
+- **Easing** — `--ease-1` through `--ease-5` (standard) and `--ease-spring-1` through `--ease-spring-5`
+- **Typography** — `--font-size-0` through `--font-size-8`, `--font-weight-1` through `--font-weight-9`, `--font-lineheight-0` through `--font-lineheight-5`
 
-### How It Works
+Define project-level aliases:
 
-```
-  Developer saves a .rip file
-           │
-           ▼
-  Server (fs.watch)
-  ├── Debounce (250ms, batches rapid saves)
-  └── SSE "changed" event: { paths: ["pages/counter.rip"] }
-           │
-           ▼
-  Browser (EventSource)
-  ├── Invalidate VFS entries (fs.delete)
-  ├── Rebuild router (router.rebuild)
-  ├── Smart refetch:
-  │   ├── Current page file? → fetch immediately
-  │   ├── Active layout?     → fetch immediately
-  │   ├── Eager file?        → fetch immediately
-  │   └── Other pages?       → fetch lazily on next navigation
-  └── Re-render (renderer.remount)
+```css
+:root {
+  --color-primary: var(--indigo-7);
+  --color-danger: var(--red-7);
+  --color-success: var(--green-7);
+  --color-text: var(--gray-9);
+  --color-text-muted: var(--gray-6);
+  --surface-1: var(--gray-0);
+  --surface-2: var(--gray-1);
+  --surface-3: var(--gray-2);
+}
 ```
 
-### Server Side
+### CSS Architecture
 
-The `watch` option enables filesystem monitoring with debounced SSE
-notifications. A heartbeat every 5 seconds keeps the connection alive:
+Modern CSS eliminates the need for preprocessors. Use these features directly:
 
-```coffee
-use ripUI pages: "#{dir}/pages", watch: true, debounce: 250
-```
+**Nesting** — group related rules:
 
-### Client Side
+```css
+.card {
+  padding: var(--size-4);
 
-Connect to the SSE endpoint after starting the app:
+  & .title {
+    font-size: var(--font-size-4);
+    font-weight: var(--font-weight-7);
+  }
 
-```javascript
-app.watch('/rip-ui/watch');
+  &:hover {
+    box-shadow: var(--shadow-3);
+  }
+}
 ```
 
-The `watch()` method accepts an optional `eager` array — files that should always
-be refetched immediately, even if they're not the current route:
+**Cascade Layers** — control specificity:
 
-```javascript
-app.watch('/rip-ui/watch', {
-  eager: ['pages/_layout.rip']
-});
-```
-
-### `loadBundle(url)`
+```css
+@layer base, components, overrides;
 
-Fetches a JSON manifest containing all page sources and loads them into the VFS
-in a single request. Returns the app instance (chainable).
+@layer base {
+  button { font: inherit; }
+}
 
-```javascript
-await app.loadBundle('/rip-ui/manifest.json');
+@layer components {
+  .dialog { border-radius: var(--radius-3); }
+}
 ```
 
-### `remount()`
+**Container Queries** — style based on the container, not the viewport:
 
-The renderer's `remount()` method re-renders the current route. This is called
-automatically by `watch()` after refetching changed files, but it can also be
-called manually:
+```css
+.sidebar {
+  container-type: inline-size;
+}
 
-```javascript
-app.renderer.remount();
+@container (min-width: 400px) {
+  .sidebar .nav { flex-direction: row; }
+}
 ```
 
-## Quick Start
-
-### With Server Integration (Recommended)
-
-The fastest way to get started is with `@rip-lang/api` and the `ripUI` middleware.
-The middleware serves all framework files, auto-generates a page manifest, and
-provides hot-reload — your server is just a few lines:
+**`color-mix()`** — derive colors without Sass:
 
-**`index.rip`** — The complete server:
-
-```coffee
-import { get, use, start, notFound } from '@rip-lang/api'
-import { ripUI } from '@rip-lang/ui/serve'
+```css
+.muted {
+  color: color-mix(in oklch, var(--color-text), transparent 40%);
+}
+```
 
-dir = import.meta.dir
+### Dark Mode
 
-use ripUI pages: "#{dir}/pages", watch: true
+Use `prefers-color-scheme` with CSS variable swapping:
 
-get '/css/*', -> @send "#{dir}/css/#{@req.path.slice(5)}"
+```css
+:root {
+  color-scheme: light dark;
 
-notFound -> @send "#{dir}/index.html", 'text/html; charset=UTF-8'
+  --surface-1: var(--gray-0);
+  --surface-2: var(--gray-1);
+  --color-text: var(--gray-9);
+}
 
-start port: 3000
+@media (prefers-color-scheme: dark) {
+  :root {
+    --surface-1: var(--gray-11);
+    --surface-2: var(--gray-10);
+    --color-text: var(--gray-1);
+  }
+}
 ```
 
-**`index.html`** — The HTML shell:
-
-```html
-<!DOCTYPE html>
-<html>
-<head><title>My App</title></head>
-<body>
-  <div id="app"></div>
-  <script type="module">
-    import { compileToJS } from '/rip-ui/compiler.js';
-    import { createApp } from '/rip-ui/ui.js';
-
-    const app = createApp({
-      target: '#app',
-      compile: compileToJS,
-      state: { theme: 'light' }
-    });
-
-    await app.loadBundle('/rip-ui/manifest.json');
-    app.start();
-    app.watch('/rip-ui/watch');
-  </script>
-</body>
-</html>
-```
+For a manual toggle, use a `[data-theme]` attribute on the root element:
 
-That's it. Run `bun index.rip` and open `http://localhost:3000`. Every `.rip`
-file in the `pages/` directory is auto-discovered, served as a manifest, and
-hot-reloaded on save.
-
-### Standalone (No Server)
-
-For static deployments or quick prototyping, you can inline components directly:
-
-```html
-<script type="module">
-  import { compileToJS } from './rip.browser.js'
-  import { createApp } from './ui.js'
-
-  createApp({
-    target: '#app',
-    compile: compileToJS,
-    files: {
-      'pages/index.rip': `
-        Home = component
-          render
-            h1 "Hello, World"
-            p "This was compiled in your browser."
-      `
-    }
-  }).start()
-</script>
+```css
+[data-theme="dark"] {
+  --surface-1: var(--gray-11);
+  --surface-2: var(--gray-10);
+  --color-text: var(--gray-1);
+}
 ```
 
-### File Structure
-
+```js
+document.documentElement.dataset.theme = 'dark'
 ```
-my-app/
-├── index.rip                # Server (uses @rip-lang/api + ripUI middleware)
-├── index.html               # HTML shell
-├── pages/
-│   ├── _layout.rip          # Root layout (nav, footer)
-│   ├── index.rip            # Home page       → /
-│   ├── about.rip            # About page      → /about
-│   └── users/
-│       ├── _layout.rip      # Users layout    → wraps /users/*
-│       ├── index.rip        # User list       → /users
-│       └── [id].rip         # User profile    → /users/:id
-└── css/
-    └── styles.css           # Tailwind or plain CSS
-```
-
-> **Note:** Framework files (`ui.js`, `stash.js`, `router.js`, etc.) are served
-> automatically by the `ripUI` middleware from the installed `@rip-lang/ui`
-> package — you don't need to copy them into your project.
-
-## Render Template Syntax
-
-The `render` block uses a concise, indentation-based template syntax:
 
-### Tags and Classes
-
-```coffee
-render
-  div                           # <div></div>
-  div.card                      # <div class="card"></div>
-  div.card.active               # <div class="card active"></div>
-  button.btn.btn-primary        # <button class="btn btn-primary"></button>
-```
+### Common Patterns
 
-### Dynamic Classes (CLSX)
+**Button:**
 
-```coffee
-render
-  div.("active" if @selected)                    # conditional class
-  div.("bg-red" if error, "bg-green" if ok)      # multiple conditions
-  div.card.("highlighted" if @featured)           # static + dynamic
-```
+```css
+.button {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--size-2);
+  padding: var(--size-2) var(--size-4);
+  border: 1px solid var(--color-primary);
+  border-radius: var(--radius-2);
+  background: var(--color-primary);
+  color: white;
+  font-weight: var(--font-weight-6);
+  cursor: pointer;
+  transition: background 150ms var(--ease-2);
 
-Dynamic class expressions are evaluated at runtime. Falsy values are filtered
-out. This provides native CLSX-like behavior without a library.
+  &:hover { background: color-mix(in oklch, var(--color-primary), black 15%); }
+  &:active { scale: 0.98; }
+  &[data-disabled] { opacity: 0.5; cursor: not-allowed; }
+}
 
-### Attributes and Events
+.ghost {
+  background: transparent;
+  color: var(--color-primary);
 
-```coffee
-render
-  input type: "text", placeholder: "Search..."
-  button @click: @handleClick, "Submit"
-  a href: "/about", "About Us"
-  img src: @imageUrl, alt: "Photo"
+  &:hover { background: color-mix(in oklch, var(--color-primary), transparent 90%); }
+}
 ```
 
-### Text and Interpolation
+**Form Input:**
 
-```coffee
-render
-  h1 "Static text"
-  p "Hello, #{@name}"
-  span "Count: #{@count}"
-```
+```css
+.input {
+  padding: var(--size-2) var(--size-3);
+  border: 1px solid var(--gray-4);
+  border-radius: var(--radius-2);
+  font-size: var(--font-size-1);
+  background: var(--surface-1);
+  color: var(--color-text);
+  transition: border-color 150ms var(--ease-2);
 
-### Conditionals
+  &:focus {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 1px;
+    border-color: var(--color-primary);
+  }
 
-```coffee
-render
-  if @loggedIn
-    p "Welcome back, #{@name}"
-  else
-    p "Please log in"
+  &[data-invalid] { border-color: var(--color-danger); }
+  &[data-disabled] { opacity: 0.5; }
+  &::placeholder { color: var(--color-text-muted); }
+}
 ```
 
-### Loops
+**Card:**
 
-```coffee
-render
-  ul
-    for item in @items
-      li item.name
-```
+```css
+.card {
+  background: var(--surface-1);
+  border-radius: var(--radius-3);
+  padding: var(--size-5);
+  box-shadow: var(--shadow-2);
+  transition: box-shadow 200ms var(--ease-2);
 
-### Nesting
+  &:hover { box-shadow: var(--shadow-3); }
 
-Indentation defines parent-child relationships:
+  & .title {
+    font-size: var(--font-size-3);
+    font-weight: var(--font-weight-7);
+    margin-block-end: var(--size-2);
+  }
 
-```coffee
-render
-  div.app
-    header.app-header
-      h1 "My App"
-      nav
-        a href: "/", "Home"
-        a href: "/about", "About"
-    main.app-body
-      p "Content goes here"
-    footer
-      p "Footer"
+  & .body {
+    color: var(--color-text-muted);
+    line-height: var(--font-lineheight-3);
+  }
+}
 ```
 
-## API Reference
-
-### `createApp(options)`
-
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `target` | `string\|Element` | `'#app'` | DOM mount target |
-| `state` | `object` | `{}` | Initial app state (becomes reactive stash) |
-| `files` | `object` | `{}` | Initial VFS files `{ path: content }` |
-| `root` | `string` | `'pages'` | Pages directory in VFS |
-| `compile` | `function` | — | Rip compiler (`compileToJS`) |
-| `transition` | `object` | — | Route transition `{ duration }` |
-| `onError` | `function` | — | Error handler |
-| `onNavigate` | `function` | — | Navigation callback |
-
-Returns an instance with these methods:
+**Dialog:**
 
-| Method | Description |
-|--------|-------------|
-| `start()` | Start routing and rendering |
-| `stop()` | Unmount components, close SSE connection, clean up |
-| `load(paths)` | Fetch `.rip` files from server into VFS |
-| `loadBundle(url)` | Fetch a JSON manifest and bulk-load all pages into VFS |
-| `watch(url, opts?)` | Connect to SSE hot-reload endpoint |
-| `go(path)` | Navigate to a route |
-| `addPage(path, source)` | Add a page to the VFS |
-| `get(key)` | Get app state value |
-| `set(key, value)` | Set app state value |
+```css
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: oklch(0% 0 0 / 40%);
+  display: grid;
+  place-items: center;
 
-Also exposes: `app` (stash), `fs` (VFS), `router`, `renderer`
+  &[data-open] { animation: fade-in 150ms var(--ease-2); }
+}
 
-### `stash(data)`
+.panel {
+  background: var(--surface-1);
+  border-radius: var(--radius-3);
+  padding: var(--size-6);
+  box-shadow: var(--shadow-4);
+  max-width: min(90vw, 32rem);
+  width: 100%;
+  animation: slide-in-up 200ms var(--ease-spring-3);
+}
 
-Creates a deeply reactive proxy around `data`. Every property read is tracked,
-every write triggers effects.
+.panel .title {
+  font-size: var(--font-size-4);
+  font-weight: var(--font-weight-7);
+  margin-block-end: var(--size-2);
+}
+```
 
-### `effect(fn)`
+**Select:**
 
-Creates a side effect that re-runs whenever its tracked dependencies change.
+```css
+.trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--size-2);
+  padding: var(--size-2) var(--size-3);
+  border: 1px solid var(--gray-4);
+  border-radius: var(--radius-2);
+  background: var(--surface-1);
+  cursor: pointer;
+  min-width: 10rem;
 
-### `computed(fn)`
+  &[data-open] { border-color: var(--color-primary); }
+}
 
-Creates a lazy computed value that caches until dependencies change.
+.popup {
+  background: var(--surface-1);
+  border: 1px solid var(--gray-3);
+  border-radius: var(--radius-2);
+  box-shadow: var(--shadow-3);
+  padding: var(--size-1);
+}
 
-### `batch(fn)`
+.option {
+  padding: var(--size-2) var(--size-3);
+  border-radius: var(--radius-1);
+  cursor: pointer;
 
-Groups multiple state updates — effects only fire once at the end.
+  &[data-highlighted] { background: var(--surface-2); }
+  &[data-selected] { font-weight: var(--font-weight-6); color: var(--color-primary); }
+}
+```
 
-## Design Principles
+**Tooltip:**
 
-**No build step.** The compiler is small enough to ship. Source files are the
-deployment artifact.
+```css
+.tooltip {
+  background: var(--gray-10);
+  color: var(--gray-0);
+  font-size: var(--font-size-0);
+  padding: var(--size-1) var(--size-2);
+  border-radius: var(--radius-2);
+  max-width: 20rem;
 
-**Language-native reactivity.** `:=` for state, `~=` for computed, `~>` for
-effects. These are Rip language features, not framework APIs.
+  &[data-entering] { animation: fade-in 100ms var(--ease-2); }
+  &[data-exiting]  { animation: fade-out 75ms var(--ease-2); }
+}
+```
 
-**Fine-grained DOM updates.** No virtual DOM. Each reactive binding creates a
-direct effect that updates exactly the DOM nodes it touches.
+### What We Don't Use
 
-**Components are classes.** `component` produces an anonymous ES6 class.
-Methods, lifecycle hooks, and state are ordinary class members. No hooks API, no
-composition functions, no magic — just a class with a `render` method.
+**React or any framework runtime** — Rip widgets are written in Rip, compiled
+to JavaScript, with zero runtime dependencies.
 
-**Props are instance variables.** `@count := 0` defines a reactive prop. The
-parent can set it, ignore it, or share a signal. The child owns it.
+**Tailwind CSS** — utility classes in markup are write-only and semantically
+empty. We write real CSS with real selectors.
 
-**File-based everything.** Components live in the VFS. Routes map to VFS paths.
-Layouts are `_layout.rip` files in the directory tree. The file system is the
-API.
+**CSS-in-JS runtimes** (styled-components, Emotion) — runtime style injection
+adds bundle size and creates hydration complexity.
 
-## License
+**Sass / Less** — native CSS nesting, `color-mix()`, and custom properties
+eliminate the need for preprocessors.
 
-MIT
+**Inline styles for layout** — the `style` prop is for truly dynamic values
+(e.g., positioning from a calculation). Layout, spacing, color, and typography
+go in CSS.
 
-## Requirements
+**Third-party headless libraries** (Base UI, Radix, Headless UI, Zag.js) —
+we implement the same WAI-ARIA patterns natively in Rip. The patterns are
+standard; the implementation is ours.
 
-- [Bun](https://bun.sh) runtime
-- `@rip-lang/api` ≥ 1.1.4 (for `@send` file serving used by `ripUI` middleware)
-- `rip-lang` ≥ 3.1.1 (Rip compiler with browser build)
+---
 
-## Links
+## File Summary
 
-- [Rip Language](https://github.com/shreeve/rip-lang)
-- [@rip-lang/api](../api/README.md) — API framework (routing, middleware, `@send`)
-- [@rip-lang/server](../server/README.md) — Production server (HTTPS, mDNS, multi-worker)
-- [Report Issues](https://github.com/shreeve/rip-lang/issues)
+| File | Lines | Description |
+|------|-------|-------------|
+| `select.rip` | 182 | Dropdown select with typeahead |
+| `combobox.rip` | 152 | Filterable input + listbox |
+| `dialog.rip` | 93 | Modal with focus trap and scroll lock |
+| `toast.rip` | 44 | Auto-dismiss notification |
+| `popover.rip` | 116 | Anchored floating content |
+| `tooltip.rip` | 99 | Hover/focus tooltip |
+| `tabs.rip` | 92 | Tab panel with roving tabindex |
+| `accordion.rip` | 92 | Expand/collapse sections |
+| `checkbox.rip` | 33 | Checkbox and switch toggle |
+| `menu.rip` | 132 | Dropdown action menu |
+| `grid.rip` | 901 | Virtual-scrolling data grid with clipboard |
+| **Total** | **1,936** | |