The ustack: Complete Reference for LLMs

A set of libraries to build web applications, aiming to be fully understandable by those who use it. The entire frontend stack is under 2048 lines of ES5 JavaScript; the entire backend stack (server, auth, testing) adds ~1230 more.

Philosophy & Approach

The ustack is built on these principles:

Radical minimalism: Each library solves one problem in the most straightforward way possible. The entire frontend is < 2048 lines; the full stack (all 9 libraries) is ~3300 lines.
dsDSLs (data-structure DSLs): All libraries use plain JavaScript object literals (arrays and objects) as their primary interface. Code is expressed as data. HTML is arrays, CSS is arrays, routes are arrays, tests are arrays.
mES5 subset: No new, no this, no prototypes, no switch, strict equality only (===/!==). Works in old browsers without compilation.
Functional style: Loops become expressions. Validation is declarative. HTML/CSS is generated from data. Side effects are modeled as events.
Complete understanding: These libraries are designed to be fully read and understood. No hidden magic, no framework-internal state you can't inspect.

The Nine Libraries

#	Library	Lines	Purpose	Runs in
1	dale	161	Functional iteration (loops as expressions)	Browser + Node
2	teishi	405	Declarative validation + helpers	Browser + Node
3	lith	269	HTML/CSS generation from data	Browser + Node
4	recalc	199	Event system with global store	Browser + Node
5	cocholate	355	DOM manipulation & AJAX	Browser only
6	gotoB	680	Reactive frontend framework	Browser only
7	cicek	826	HTTP server (routes, files, cookies, cluster)	Node only
8	hitit	242	HTTP API testing client	Node only
9	giz	167	Auth primitives (signup, login, sessions)	Node only

Library Dependency Chain

dale (foundation: loops)
  └─ teishi (foundation: validation + helpers)
       ├─ lith (HTML/CSS generation)
       ├─ recalc (event system)
       ├─ cocholate (DOM manipulation & AJAX)
       ├─ gotoB (frontend framework, uses all above)
       ├─ cicek (HTTP server, uses dale + teishi)
       ├─ hitit (HTTP test client, uses dale + teishi)
       └─ giz (auth primitives, uses bcrypt + redis)

Loading in the Browser (frontend)

<script src="dale.js"></script>
<script src="teishi.js"></script>
<script src="lith.js"></script>
<script src="recalc.js"></script>
<script src="cocholate.js"></script>
<script src="gotoB.js"></script>

Or load the single pre-built file for gotoB:

<meta charset="utf-8">
<script src="gotoB.min.js"></script>

Global variables after loading: dale, teishi, lith, R (recalc constructor), c (cocholate), B (gotoB).

Loading in Node.js (backend)

var dale   = require('dale');
var teishi = require('teishi');
var lith   = require('lith');
var cicek  = require('cicek');
var hitit  = require('hitit');
var giz    = require('giz');

1. dale — Loops as Functions (~160 lines)

Purpose: Functional iteration over arrays, objects, and single values. Turns loops into expressions so they can be embedded inside object literals.

Key Behaviors

Any input type works: arrays iterate normally, objects iterate over own keys, single values become [value], undefined becomes [].
Array keys are integers (not strings like native for..in).
Own properties only by default (no hasOwnProperty boilerplate). Pass true as last arg for inherited props.

The Eight Functions

`dale.go(input, fun)` → array

Map over input. Always returns an array.

dale.go([1, 2, 3], function(v) { return v * 10 })           // [10, 20, 30]
dale.go({a: 1, b: 2}, function(v, k) { return k + ':' + v }) // ['a:1', 'b:2']
dale.go('hello', function(v) { return v.toUpperCase() })     // ['HELLO']
dale.go(undefined, function(v) { return v })                 // []

`dale.fil(input, filterValue, fun)` → array

Like dale.go but excludes results equal to filterValue.

dale.fil([1, 2, 3, 4], undefined, function(v) {
   if (v % 2 === 0) return v;
})
// [2, 4]

`dale.obj(input, [baseObject], fun)` → object

Build an object. fun must return [key, value] or undefined.

dale.obj([{name: 'Jo', age: 30}, {name: 'Mo', age: 25}], function(v) {
   return [v.name, v.age];
})
// {Jo: 30, Mo: 25}

`dale.stop(input, stopValue, fun)` → single value

Iterate until fun returns stopValue, then stop and return it. Returns last result if never stopped.

dale.stop([1, 2, 'x', 4], false, function(v) {
   return typeof v === 'number';
})
// false (stopped at 'x')

`dale.stopNot(input, continueValue, fun)` → single value

Iterate while fun returns continueValue. Stop on first different value.

dale.stopNot([1, 2, 3], true, function(v) {
   return v < 3 ? true : 'too big';
})
// 'too big'

`dale.keys(input)` → array

Returns keys of input. Like Object.keys but works on anything.

dale.keys({a: 1, b: 2})  // ['a', 'b']

`dale.times(steps, [start=1], [step=1])` → array

Generate a sequence of numbers.

dale.times(3)        // [1, 2, 3]
dale.times(3, 0)     // [0, 1, 2]
dale.times(3, 10, 5) // [10, 15, 20]

`dale.acc(input, [initialValue], fun)` → single value

Reduce/fold. Accumulates values.

dale.acc([1, 2, 3, 4], function(a, b) { return a + b })  // 10
dale.acc([1, 2, 3], 10, function(a, b) { return a + b }) // 16

Utility

dale.clog(...): Safe console.log (falls back to alert in old browsers).

2. teishi — Validation (~410 lines)

Purpose: Declarative input validation for functions. Express validation rules as data. Auto-activation: functions check their input and return false + error message on failure.

Core Pattern

function myFunction(name, count) {
   if (teishi.stop('myFunction', [
      ['name', name, 'string'],
      ['count', count, 'integer'],
      ['count', count, {min: 0, max: 100}, teishi.test.range]
   ])) return false;
   // Input is valid, proceed...
}

`teishi.v(functionName, rule, [apres], [prod])` → true | false

Validates rules. Returns true if valid, false (+ prints error) if invalid.

functionName: optional string for error messages.
apres: if true, returns error string instead of printing. If function, calls it with error.
prod: if true, skips rule validation for speed.

`teishi.stop(functionName, rule, [apres], [prod])` → true | false

Inverse of teishi.v: returns true if there's an error (for if (teishi.stop(...)) return false; pattern).

Simple Rules: `[name, compare, to, [multi], [test]]`

name: string or [name, description] array
compare: the value being checked
to: what it should match
multi (optional): 'each' | 'oneOf' | 'eachOf'
test (optional): test function (default: teishi.test.type)

['age', age, 'integer']                                          // type check
['action', action, ['create', 'read'], 'oneOf', teishi.test.equal] // value must be one of these
['items', items, 'string', 'each']                                // every item must be string
['items', items, ['string', 'integer'], 'eachOf']                 // every item must be string or integer
['score', score, {min: 0, max: 100}, teishi.test.range]           // range check
['email', email, /^.+@.+$/, teishi.test.match]                   // regex match

Complex Rules

Nested: [rule1, rule2, rule3] — sequential, stop on first failure
Boolean: true/false — inline validation results
Function guards: function() { return rule } — defer evaluation to avoid exceptions
Conditional: [boolean, [rules]] — only evaluate rules if boolean is true

if (teishi.stop('myFn', [
   ['input', input, 'object'],
   function() { return [
      ['input.name', input.name, 'string'],
      [input.age !== undefined, ['input.age', input.age, 'integer']]
   ]}
])) return false;

Built-in Test Functions

Function	Checks
`teishi.test.type` (default)	`teishi.type(compare) === to`
`teishi.test.equal`	Deep equality
`teishi.test.notEqual`	Deep inequality
`teishi.test.range`	`{min, max, less, more}`
`teishi.test.match`	String matches regex

Helper Functions

Function	Purpose
`teishi.type(value, [objectType])`	Enhanced `typeof`: returns `'integer'`, `'float'`, `'nan'`, `'infinity'`, `'array'`, `'object'`, `'null'`, `'regex'`, `'date'`, `'function'`, `'string'`, `'boolean'`, `'undefined'`
`teishi.str(value)`	Safe `JSON.stringify` (returns `false` on error)
`teishi.parse(string)`	Safe `JSON.parse` (returns `false` on error)
`teishi.simple(v)`	`true` if not array/object
`teishi.complex(v)`	`true` if array/object
`teishi.inc(array, value)`	`array.indexOf(value) > -1`
`teishi.copy(value)`	Deep copy (handles circular refs)
`teishi.eq(a, b)`	Deep equality check
`teishi.last(array, [n])`	Last element (or nth from end)
`teishi.time([d])`	Current time in ms, or from date
`teishi.clog(...)`	Colorized logging with timestamps

3. lith — HTML/CSS Generation (~270 lines)

Purpose: Generate HTML and CSS strings from JavaScript object literals. Works both in browser and Node.js.

Liths (HTML)

A lith is an array: [tag, attributes?, contents?]

lith.g(['br'])
// '<br>'

lith.g(['p', {id: 'intro', class: 'bold'}, 'Hello'])
// '<p id="intro" class="bold">Hello</p>'

lith.g(['div', ['p', 'one'], ['p', 'two']])
// '<div><p>one</p><p>two</p></div>'

A lithbag is an array of liths, strings, numbers, or undefined:

lith.g([['p', 'A'], ['p', 'B']])
// '<p>A</p><p>B</p>'

Strings are automatically HTML-escaped (except inside <script> and <style>).
Falsy attribute values (undefined, null, false, '') are omitted.
['LITERAL', '<raw html>'] inserts unescaped HTML.
lith.g(lith, true) or lith.prod = true enables prod mode (no validation, faster).

Litcs (CSS)

A litc is [selector, attributes?, contents?]

lith.css.g(['div', {width: 0.5, height: 100}])
// 'div{width:50%;height:100px;}'

CSS Value Conventions

JS Value	CSS Output	Why
integer > 1 or < 0	`Npx`	Most common unit
`1`	`100%`	Special case
float (0 < n < 1)	`N%`	`0.5` → `50%`
string	as-is	`'200%'`, `'1em'`

Nesting (descendant selectors)

lith.css.g(['div.links', {width: 100}, ['a', {'font-size': 14}]])
// 'div.links{width:100px;}div.links a{font-size:14px;}'

Parent reference with `&`

lith.css.g(['a', {'font-size': 14}, ['&:hover', {color: 'lime'}]])
// 'a{font-size:14px;}a:hover{color:lime;}'

Multiple properties shorthand

['p', {'padding-top, padding-bottom': 10}]
// p{padding-top:10px;padding-bottom:10px;}

Mixins (nested attribute objects)

var bold = {'font-weight': 'bold'};
['p', {color: 'red', font: bold}]
// p{color:red;font-weight:bold;}

Helper Functions

lith.css.media(selector, litc) → wraps in @media
lith.css.style(attributes) → inline CSS string for style attribute

Auto CSS in HTML

lith.g(['style', ['body', {margin: 0}]])
// '<style>body{margin:0px;}</style>'

4. recalc — Event System (~200 lines)

Purpose: Functional approach to side effects. Events pass control, a global store passes data. Events have a verb and a path, like REST.

Creating an Instance

var r = R();       // browser: R is global. Node: var R = require('recalc')
var r = R([]);     // initialize store as array
var r = R({key: 'value'}); // initialize with data

Core Elements

Element	Description
`r.store`	Global state object
`r.responders`	All registered responders
`r.log`	Array of all events called and responders matched
`r.call(verb, path, ...args)`	Call an event
`r.respond(verb, path, [options], rfun)`	Register a responder
`r.forget(id, [onforget])`	Remove a responder (and its children)

Calling Events

r.call('fire', 'hello');                    // verb='fire', path=['hello']
r.call('fire', ['hello', 1]);              // path=['hello', 1]
r.call('fire', 'hello', 'extra', 'args');  // extra args passed to responders

Returns the event's id (string), or false on invalid input.

Creating Responders

r.respond('fire', 'hello', function(x, ...args) {
   // x = {verb, path, args, from, cb, responder}
});

// With options:
r.respond('fire', 'hello', {
   id: 'myResponder',    // custom id
   parent: 'parentId',   // for tree deletion
   priority: 5,          // higher = matched sooner (default 0)
   burn: true,           // auto-destroy after one match
   match: function(ev, responder) { return true; }  // custom matching
}, function(x) { ... });

Returns the responder's id, or false on error.

Matching Rules

Verb and path must both match.
Paths must have the same length and each element must match.
Wildcards: '*' matches any single element.
Regexes in responder verbs/paths match against event strings.
Empty path [] only matches empty path [].

Async Responders

r.respond('fetch', 'data', function(x) {
   asyncOp(function() {
      x.cb(); // resume execution of further responders
   });
   return x.cb; // signal this is async
});

Event Chains (tracking)

Pass context x as first arg to r.call within a responder:

r.respond('a', 'b', function(x) {
   r.call(x, 'c', 'd'); // chain is tracked in r.log
});

Disabling Responders

r.responders.someId.disabled = true;  // temporarily disable
r.responders.someId.disabled = false; // re-enable

5. cocholate — DOM Manipulation & AJAX (~340 lines)

Purpose: Browser-only. Lightweight DOM querying, manipulation, AJAX, cookies, and testing. Available as window.c.

Selectors: `c(selector, [fun])`

c('div')            // all divs (array)
c('.nav')           // all .nav elements (array)
c('#myId')          // single element (not array)
c('body')           // document.body (not array)
c('div', function(el) { return el.id })  // map over matches

Scoped selectors

c({selector: 'p', from: c('#container')})

Set operations

c([':or', 'div', 'p'])     // union
c([':and', '.a', '.b'])    // intersection
c([':not', 'div', 'p'])    // complement

DOM Functions

c.empty(selector)                        // clear innerHTML
c.fill(selector, htmlString)             // set innerHTML
c.place(selector, where, htmlString)     // where: 'beforeBegin'|'afterBegin'|'beforeEnd'|'afterEnd'

c.get(selector, attributes, [css])       // get attributes/CSS as object
c.get('#el', ['id', 'class'])            // {id: '...', class: '...'}
c.get('#el', 'color', true)             // {color: 'red'} (CSS)
c.get('#el')                             // all attributes

c.set(selector, attributes, [css], [notrigger])
c.set('#el', {class: 'active'})          // set attribute
c.set('#el', {class: null})              // remove attribute
c.set('#el', {color: 'red'}, true)       // set CSS

c.fire(selector, eventType)              // dispatch event
c.fire('#btn', 'click')

Non-DOM Functions

// Ready handler
c.ready(function() { /* page loaded */ })

// Cookies
c.cookie()           // parse document.cookie → {key: value, ...}
c.cookie(false)      // delete all JS-accessible cookies

// AJAX
c.ajax(method, path, headers, body, callback)
c.ajax('POST', '/api/data', {}, {foo: 'bar'}, function(error, response) {
   // error: null on success (200/304), xhr object on failure
   // response: {headers: {...}, body: ..., xhr: ...}
   // body is auto-parsed if Content-Type is application/json
})
// Objects/arrays as body auto-set Content-Type to application/json

// Load script dynamically
c.loadScript('/path/to/script.js', callback)

Testing: `c.test`

c.test([
   ['test name', function() { return someCheck() === true; }],
   ['async test', function(next) {
      doSomething();
      next(500, 50); // check every 50ms for up to 500ms
   }, function() {
      return c('#result').innerText === 'done' || 'not done yet';
   }],
], function(error, ms) {
   if (error) console.log('Failed:', error.test, error.result);
   else console.log('All passed in', ms, 'ms');
});

6. gotoB — Frontend Framework (~670 lines)

Purpose: Reactive frontend framework. Views are functions returning liths. State lives in a global store. Events drive all changes. Uses Myers diff for efficient DOM updates. Available as window.B.

Quick Start

B.mount('body', function() {
   return B.view('counter', function(counter) {
      counter = counter || 0;
      return ['div', [
         ['h2', 'Counter: ' + counter],
         ['button', {onclick: B.ev('set', 'counter', counter + 1)}, '+1']
      ]];
   });
});

Core API

`B.mount(target, vfun)` / `B.unmount(target)`

Place/remove views in the DOM. target is 'body' or '#someId'.

B.mount('body', function() { return ['h1', 'Hello'] });
B.unmount('body');

`B.store` — The Global State

All frontend state lives here. Modified only through events.

`B.get(path)` — Safe Store Access

B.get('user', 'name')         // B.store.user.name (undefined-safe)
B.get(['Data', 'items', 0])   // B.store.Data.items[0]
B.get()                        // entire B.store

`B.call(verb, path, ...args)` — Call Events

B.call('set', 'username', 'mono')         // B.store = {username: 'mono'}
B.call('set', ['user', 'name'], 'mono')   // B.store = {user: {name: 'mono'}}
B.call('add', 'items', 'a', 'b')          // push to array
B.call('rem', 'items', 0)                 // remove index 0
B.call('rem', [], 'username')             // delete key from root

From within responders, pass context for tracking:

B.call(x, 'set', 'key', 'value')

Built-in Data Responders

Verb	Effect	Change Event
`set`	Set value at path	Yes, if value changed
`add`	Push to array at path	Yes, if items added
`rem`	Remove keys from object/array at path	Yes, per key removed
`mset` / `madd` / `mrem`	Same but no change event (mute)	No

All data responders fire change events which trigger view redraws.

`B.respond(verb, path, [options], rfun)` — Register Responders

B.respond('submit', 'form', function(x) {
   var data = B.get('form');
   c.ajax('POST', '/api/submit', {}, data, function(error, response) {
      if (error) return B.call(x, 'set', ['State', 'error'], 'Submit failed');
      B.call(x, 'set', ['State', 'page'], 'success');
   });
   return x.cb; // async
});

Options: id, priority, match, burn, parent (same as recalc).

Do / Don't (safe app code, especially for LLM-generated code):

Do call events as B.call(x, ...) inside responders (preserves event trace/context).
Don't mutate B.store directly in app logic; use events/data responders instead.
Do batch multi-path updates with mute/direct writes (mset/madd/mrem or B.set + manual change) to avoid redraw storms.
Don't trigger events from inside vfun (views should stay pure).
Do return x.cb in async responders so responder flow resumes correctly.
Don't mutate objects returned by B.get directly — this bypasses the event/update flow. Copy first with teishi.copy if you need to modify.
Don't accidentally replace the entire store with B.call('set', [], value) — empty path [] means root.

`B.mrespond(responders)` — Register Multiple

B.mrespond([
   ['verb1', 'path1', function(x) { ... }],
   ['verb2', 'path2', {priority: 1}, function(x) { ... }]
]);

`B.forget(id)` — Remove Responder

B.forget('myResponderId')

`B.ev(verb, path, ...args)` — DOM Event Handlers

Generates a stringified B.call for use in HTML attributes.

['button', {onclick: B.ev('set', 'counter', 5)}, 'Set to 5']
['input', {oninput: B.ev('set', 'query')}]  // default: passes this.value

// Raw values (not stringified):
['button', {onclick: B.ev('submit', 'form', {raw: 'this.value'})}, 'Go']

// Multiple events:
['button', {onclick: B.ev(['save', 'data'], ['navigate', 'home'])}, 'Save & Go']

// Conditional (no-op with empty array):
['button', {onclick: B.ev(condition ? ['save', 'data'] : [])}, 'Maybe Save']

`B.view(path, vfun)` — Reactive Views

Creates a DOM element that auto-updates when the relevant part of B.store changes.

B.view('todos', function(todos) {
   todos = todos || [];
   return ['ul', dale.go(todos, function(todo, i) {
      return ['li', [todo, ['button', {onclick: B.ev('rem', 'todos', i)}, 'x']]];
   })];
})

Rules:

vfun must return a single lith (not a lithbag).
Don't set id on the returned lith (gotoB manages ids).
Wrap B.view calls in functions for reuse.
Don't call events from inside vfun.
Views can be nested.

Multiple paths:

B.view([['user'], ['settings']], function(user, settings) {
   return ['div', [user.name, ' - theme: ', settings.theme]];
})

Path matching for redraws: A view at path 'todos' redraws when change fires on:

'todos' (exact match)
['todos', 0] (more specific — affects todos)
[] (less specific — affects everything)

But NOT 'users' (unrelated path).

Logging & Debugging

B.log            // array of all events and responder matches
B.eventlog()     // render HTML table of all events
B.eventlog('set') // filter log entries containing 'set'

Production Mode

B.prod = true;   // disable all validation (faster, no error catching)

Advanced: Opaque Elements

For DOM elements modified by external libraries (e.g., date pickers, SVG):

B.view('chart', function(data) {
   return ['div', {opaque: true}, ['LITERAL', '<svg>...</svg>']];
})

Opaque elements are fully recreated on redraw (never recycled/diffed).

Advanced: Async Responders

B.respond('fetch', 'users', function(x) {
   c.ajax('GET', '/api/users', {}, '', function(error, res) {
      if (! error) B.call(x, 'set', 'users', res.body);
      x.cb();
   });
   return x.cb;
});

Advanced: Change Responder (non-view)

B.respond('change', 'counter', {match: B.changeResponder}, function(x, value, oldValue) {
   console.log('Counter changed from', oldValue, 'to', value);
});

Advanced: Dynamic Responder IDs for Graph-Like Dependencies

When views/components have user-defined dependencies (e.g., spreadsheet cell formulas), use B.forget + B.respond with explicit id and parent to rewire reactive edges at runtime:

B.respond('update', 'cellRefs', function(x, cellId, newRefs) {
   // Forget old dependency responders for this cell
   B.forget('cell-deps-' + cellId);

   // Create new responders for each referenced cell
   dale.go(newRefs, function(ref, k) {
      B.respond('change', ['cells', ref], {
         id: 'cell-deps-' + cellId + '-' + k,
         parent: 'cell-deps-' + cellId,
         match: B.changeResponder
      }, function(x) {
         B.call(x, 'recalculate', 'cell', cellId);
      });
   });
});

This pattern lets you build spreadsheet-like reactive graphs where dependencies change based on user input.

Common Patterns

Full App Structure

// --- State initialization ---
B.call('set', [], {State: {page: 'login'}, Data: {}});

// --- Responders (business logic) ---
B.mrespond([
   ['login', [], function(x) {
      var creds = B.get('State', 'credentials');
      c.ajax('POST', '/auth/login', {}, creds, function(error, res) {
         if (error) return B.call(x, 'set', ['State', 'error'], 'Login failed');
         B.call(x, 'set', ['Data', 'user'], res.body);
         B.call(x, 'set', ['State', 'page'], 'main');
         x.cb();
      });
      return x.cb;
   }],
   ['logout', [], function(x) {
      B.call(x, 'set', [], {State: {page: 'login'}, Data: {}});
   }]
]);

// --- Views ---
var app = function() {
   return B.view(['State', 'page'], function(page) {
      if (page === 'login') return loginView();
      if (page === 'main')  return mainView();
      return ['div', 'Unknown page'];
   });
}

var loginView = function() {
   return ['div', [
      ['input', {placeholder: 'Username', oninput: B.ev('set', ['State', 'credentials', 'username'])}],
      ['input', {type: 'password', oninput: B.ev('set', ['State', 'credentials', 'password'])}],
      ['button', {onclick: B.ev('login', [])}, 'Login']
   ]];
}

var mainView = function() {
   return B.view(['Data', 'user'], function(user) {
      return ['div', [
         ['h1', 'Welcome, ' + (user ? user.name : '')],
         ['button', {onclick: B.ev('logout', [])}, 'Logout']
      ]];
   });
}

B.mount('body', app);

Table with Dynamic Data

var table = function() {
   return B.view(['Data', 'items'], function(items) {
      items = items || [];
      return ['table', [
         ['tr', dale.go(['Name', 'Price'], function(h) { return ['th', h] })],
         dale.go(items, function(item) {
            return ['tr', [['td', item.name], ['td', item.price]]];
         })
      ]];
   });
}

CSS with lith

var styles = function() {
   return ['style', [
      ['body', {'font-family': 'sans-serif', margin: 0, padding: 20}],
      ['.btn', {
         'background-color': '#4488DD',
         color: 'white',
         border: 'none',
         padding: '10px 20px',
         cursor: 'pointer'
      }, ['&:hover', {'background-color': '#3377CC'}]]
   ]];
}

Input Binding

// Text input
['input', {value: B.get('query'), oninput: B.ev('set', 'query')}]

// Select
['select', {onchange: B.ev('set', 'selected')},
   dale.go(options, function(opt) {
      return ['option', {value: opt, selected: opt === B.get('selected')}, opt];
   })
]

// Checkbox
['input', {type: 'checkbox', checked: B.get('agreed'), onclick: B.ev('set', 'agreed', !B.get('agreed'))}]

Extended Examples

Shopping Cart (full app with filter, add-to-cart, checkout)

This example shows a complete shopping cart with product listing, filtering, quantity input, cart management, and a total that auto-recalculates.

/*
Store structure:
   products:   [{id: STRING, title: STRING, price: INTEGER|FLOAT}, ...]
   cart:       {productId: quantity, ...}
   quantities: {productId: STRING, ...}   // input buffer for quantity fields
   total:      INTEGER
   filter:     STRING
*/

// *** RESPONDERS ***

B.mrespond([
   ['load', 'data', function(x) {
      // In a real app, you'd fetch from a server with c.ajax
      B.call(x, 'set', 'products', [
         {id: 'p1', title: 'A book on design',           price: 5},
         {id: 'p2', title: 'Something useless',          price: 8},
         {id: 'p3', title: 'Kittens & sunshine',         price: 11},
         {id: 'p4', title: 'Dinner & movie with JSON',   price: 200}
      ]);
   }],
   ['cart', 'add', function(x, productId, quantity) {
      var cart = B.get('cart') || {};
      quantity = parseInt(quantity);
      if (isNaN(quantity) || quantity <= 0) return alert('Please enter a valid quantity.');
      if (! cart[productId]) B.call(x, 'set', ['cart', productId], quantity);
      else                   B.call(x, 'set', ['cart', productId], cart[productId] + quantity);
   }],
   // Recalculate total whenever cart changes
   ['change', 'cart', {match: B.changeResponder}, function(x) {
      B.call(x, 'calculate', 'total');
   }],
   ['calculate', 'total', function(x) {
      var products = B.get('products'), total = 0;
      dale.go(B.get('cart'), function(quantity, productId) {
         var product = dale.stopNot(products, undefined, function(product) {
            if (product.id === productId) return product;
         });
         total += product.price * quantity;
      });
      B.call(x, 'set', 'total', total);
   }],
   ['checkout', [], function(x) {
      alert('PROFIT! ' + JSON.stringify(B.get('cart')));
      B.call(x, 'rem', [], 'cart');
   }]
]);

// *** VIEWS ***

var cart = function() {
   return [
      ['style', [
         ['body', {padding: 15}],
         ['span.action', {color: 'blue', cursor: 'pointer', 'text-decoration': 'underline'}]
      ]],

      // Left panel: product list with filter
      B.view([['products'], ['filter']], function(products, filter) {
         products = products || [];
         var filtered = dale.fil(products, undefined, function(product) {
            if (! filter || product.title.toLowerCase().match(filter.toLowerCase())) return product;
         });
         return ['div', [
            ['h3', 'Product list'],
            ['h4', [filtered.length, ' matching products']],
            ['span', {'class': 'action', onclick: B.ev('load', 'data')}, 'Load data'],
            ['br'], ['br'],
            ['input', {
               placeholder: 'filter',
               value: filter,
               oninput: B.ev('set', 'filter')
            }],
            ['br'], ['br'],
            ['table', dale.go(filtered, function(product) {
               return B.view(['quantities', product.id], function(quantity) {
                  return ['tr', [
                     ['td', product.title],
                     ['td', '$' + product.price],
                     ['td', [
                        ['input', {
                           placeholder: 'Qty',
                           value: quantity,
                           oninput: B.ev('set', ['quantities', product.id], {raw: 'this.value'})
                        }],
                        ['span', {
                           'class': 'action',
                           onclick: B.ev(
                              ['cart', 'add', product.id, quantity],
                              ['rem', 'quantities', product.id]
                           )
                        }, ' Add to cart']
                     ]]
                  ]];
               });
            })]
         ]];
      }),

      // Right panel: cart with totals
      B.view([['products'], ['cart'], ['total']], function(products, cart, total) {
         cart = cart || {};
         return ['div', [
            ['h3', 'My cart'],
            ['h4', [dale.keys(cart).length, ' items, total: $', total || 0]],
            ['table', dale.go(cart, function(quantity, productId) {
               var product = dale.stopNot(products, undefined, function(p) {
                  if (p.id === productId) return p;
               });
               return ['tr', [
                  ['td', product.title],
                  ['td', '$' + product.price],
                  ['td', 'x' + quantity],
                  ['td', '$' + (product.price * quantity)],
                  ['td', ['span', {'class': 'action', onclick: B.ev('rem', 'cart', productId)}, 'Remove']]
               ]];
            })],
            dale.keys(cart).length > 0 ? ['button', {onclick: B.ev('checkout', [])}, 'Checkout!'] : []
         ]];
      })
   ];
}

B.mount('body', cart);
B.call('load', 'data');