updated app

node_modules/derby-examples/todos/Makefile

@@ -0,0 +1,2 @@
+compile:
+	./node_modules/coffee-script/bin/coffee -bw -o ./lib -c ./src

node_modules/derby-examples/todos/README.md

@@ -0,0 +1 @@
+# derby-app

node_modules/derby-examples/todos/lib/server/index.js

@@ -0,0 +1,42 @@
+// Generated by CoffeeScript 1.3.1
+var ONE_YEAR, derby, express, expressApp, gzippo, http, path, publicPath, root, server, serverError, todos;
+
+http = require('http');
+
+path = require('path');
+
+express = require('express');
+
+gzippo = require('gzippo');
+
+derby = require('derby');
+
+todos = require('../todos');
+
+serverError = require('./serverError');
+
+ONE_YEAR = 1000 * 60 * 60 * 24 * 365;
+
+root = path.dirname(path.dirname(__dirname));
+
+publicPath = path.join(root, 'public');
+
+(expressApp = express()).use(express.favicon()).use(gzippo.staticGzip(publicPath, {
+  maxAge: ONE_YEAR
+})).use(express.compress()).use(todos.router()).use(expressApp.router).use(serverError(root));
+
+module.exports = server = http.createServer(expressApp);
+
+expressApp.all('*', function(req) {
+  throw "404: " + req.url;
+});
+
+derby.use(require('racer-db-mongo'));
+
+todos.createStore({
+  listen: server,
+  db: {
+    type: 'Mongo',
+    uri: 'mongodb://localhost/derby-todos'
+  }
+});

node_modules/derby-examples/todos/lib/server/serverError.js

@@ -0,0 +1,27 @@
+// Generated by CoffeeScript 1.3.1
+var derby, isProduction;
+
+derby = require('derby');
+
+isProduction = derby.util.isProduction;
+
+module.exports = function(root) {
+  var staticPages;
+  staticPages = derby.createStatic(root);
+  return function(err, req, res, next) {
+    var message, status;
+    if (err == null) {
+      return next();
+    }
+    console.log(err.stack ? err.stack : err);
+    message = err.message || err.toString();
+    status = parseInt(message);
+    if (status === 404) {
+      return staticPages.render('404', res, {
+        url: req.url
+      }, 404);
+    } else {
+      return res.send((400 <= status && status < 600) ? status : 500);
+    }
+  };
+};

node_modules/derby-examples/todos/lib/todos/index.js

@@ -0,0 +1,138 @@
+// Generated by CoffeeScript 1.3.1
+var get, ready, view, _ref;
+
+_ref = require('derby').createApp(module), get = _ref.get, view = _ref.view, ready = _ref.ready;
+
+get('/', function(page) {
+  return page.redirect('/derby');
+});
+
+get('/:groupName', function(page, model, _arg) {
+  var groupName, groupTodosQuery;
+  groupName = _arg.groupName;
+  groupTodosQuery = model.query('todos').where('group').equals(groupName);
+  return model.subscribe("groups." + groupName, groupTodosQuery, function(err, group) {
+    var todoIds;
+    model.ref('_group', group);
+    todoIds = group.at('todoIds');
+    group.setNull('id', groupName);
+    model.refList('_todoList', 'todos', todoIds);
+    if (!todoIds.get()) {
+      model.push('_todoList', {
+        group: groupName,
+        text: 'Example todo'
+      }, {
+        group: groupName,
+        text: 'Another example'
+      }, {
+        group: groupName,
+        text: 'This one is done already',
+        completed: true
+      });
+    }
+    model.fn('_remaining', '_todoList', function(list) {
+      var remaining, todo, _i, _len;
+      remaining = 0;
+      for (_i = 0, _len = list.length; _i < _len; _i++) {
+        todo = list[_i];
+        if (!(todo != null ? todo.completed : void 0)) {
+          remaining++;
+        }
+      }
+      return remaining;
+    });
+    return page.render();
+  });
+});
+
+ready(function(model) {
+  var list, newTodo, showReconnect, ul;
+  list = model.at('_todoList');
+  ul = $('#todos');
+  ul.sortable({
+    handle: '.handle',
+    axis: 'y',
+    containment: '#dragbox',
+    update: function(e, ui) {
+      var domId, id, item, to;
+      item = ui.item[0];
+      domId = item.id;
+      id = item.getAttribute('data-id');
+      to = ul.children().index(item);
+      return list.pass({
+        ignore: domId
+      }).move({
+        id: id
+      }, to);
+    }
+  });
+  list.on('set', '*.completed', function(i, completed, previous, isLocal) {
+    if (completed && isLocal) {
+      return list.move(i, -1);
+    }
+  });
+  newTodo = model.at('_newTodo');
+  exports.add = function() {
+    var i, text, todo, _i, _len, _ref1;
+    if (!(text = view.escapeHtml(newTodo.get()))) {
+      return;
+    }
+    newTodo.set('');
+    _ref1 = list.get();
+    for (i = _i = 0, _len = _ref1.length; _i < _len; i = ++_i) {
+      todo = _ref1[i];
+      if (todo.completed) {
+        break;
+      }
+    }
+    return list.insert(i, {
+      text: text,
+      group: model.get('_group.id')
+    });
+  };
+  exports.del = function(e) {
+    return model.at(e.target).remove();
+  };
+  showReconnect = model.at('_showReconnect');
+  showReconnect.set(true);
+  exports.connect = function() {
+    showReconnect.set(false);
+    setTimeout((function() {
+      return showReconnect.set(true);
+    }), 1000);
+    return model.socket.socket.connect();
+  };
+  exports.reload = function() {
+    return window.location.reload();
+  };
+  exports.shortcuts = function(e) {
+    var code, command;
+    if (!(e.metaKey || e.ctrlKey)) {
+      return;
+    }
+    code = e.which;
+    if (!(command = ((function() {
+      switch (code) {
+        case 66:
+          return 'bold';
+        case 73:
+          return 'italic';
+        case 32:
+          return 'removeFormat';
+        case 220:
+          return 'removeFormat';
+        default:
+          return null;
+      }
+    })()))) {
+      return;
+    }
+    document.execCommand(command, false, null);
+    if (e.preventDefault) {
+      e.preventDefault();
+    }
+    return false;
+  };
+  document.execCommand('useCSS', false, true);
+  return document.execCommand('styleWithCSS', false, false);
+});

node_modules/derby-examples/todos/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "derby-app",
+  "description": "",
+  "version": "0.0.0",
+  "main": "./server.js",
+  "dependencies": {
+    "derby": "*",
+    "express": "3.x",
+    "gzippo": ">=0.1.4",
+    "racer-db-mongo": "*"
+  },
+  "private": true,
+  "devDependencies": {
+    "coffee-script": ">=1.3.1"
+  }
+}

node_modules/derby-examples/todos/server.js

@@ -0,0 +1 @@
+require('derby').run(__dirname + '/lib/server', 3003);

node_modules/derby-examples/todos/src/server/index.coffee

@@ -0,0 +1,54 @@
+http = require 'http'
+path = require 'path'
+express = require 'express'
+gzippo = require 'gzippo'
+derby = require 'derby'
+todos = require '../todos'
+serverError = require './serverError'
+
+
+## SERVER CONFIGURATION ##
+
+ONE_YEAR = 1000 * 60 * 60 * 24 * 365
+root = path.dirname path.dirname __dirname
+publicPath = path.join root, 'public'
+
+(expressApp = express())
+  .use(express.favicon())
+  # Gzip static files and serve from memory
+  .use(gzippo.staticGzip publicPath, maxAge: ONE_YEAR)
+
+  # Gzip dynamically rendered content
+  .use(express.compress())
+
+  # Uncomment to add form data parsing support
+  # .use(express.bodyParser())
+  # .use(express.methodOverride())
+
+  # Uncomment and supply secret to add Derby session handling
+  # Derby session middleware creates req.model and subscribes to _session
+  # .use(express.cookieParser 'secret_sauce')
+  # .use(express.session cookie: {maxAge: ONE_YEAR})
+  # .use(todos.session())
+
+  # The router method creates an express middleware from the app's routes
+  .use(todos.router())
+  .use(expressApp.router)
+  .use(serverError root)
+
+module.exports = server = http.createServer expressApp
+
+
+## SERVER ONLY ROUTES ##
+
+expressApp.all '*', (req) ->
+  throw "404: #{req.url}"
+
+
+## STORE SETUP ##
+
+derby.use(require 'racer-db-mongo')
+
+todos.createStore
+  listen: server
+  db: {type: 'Mongo', uri: 'mongodb://localhost/derby-todos'}

node_modules/derby-examples/todos/src/server/serverError.coffee

@@ -0,0 +1,18 @@
+derby = require 'derby'
+{isProduction} = derby.util
+
+module.exports = (root) ->
+  staticPages = derby.createStatic root
+
+  return (err, req, res, next) ->
+    return next() unless err?
+
+    console.log(if err.stack then err.stack else err)
+
+    ## Customize error handling here ##
+    message = err.message || err.toString()
+    status = parseInt message
+    if status is 404
+      staticPages.render '404', res, {url: req.url}, 404
+    else
+      res.send if 400 <= status < 600 then status else 500

node_modules/derby-examples/todos/src/todos/index.coffee

@@ -0,0 +1,140 @@
+{get, view, ready} = require('derby').createApp module
+
+## ROUTES ##
+
+get '/', (page) ->
+  page.redirect '/derby'
+
+get '/:groupName', (page, model, {groupName}) ->
+  groupTodosQuery = model.query('todos').where('group').equals(groupName)
+  model.subscribe "groups.#{groupName}", groupTodosQuery, (err, group) ->
+    model.ref '_group', group
+    todoIds = group.at 'todoIds'
+    group.setNull 'id', groupName
+
+    # The refList supports array methods, but it stores the todo values
+    # on an object by id. The todos are stored on the object 'todos',
+    # and their order is stored in an array of ids at '_group.todoIds'
+    model.refList '_todoList', 'todos', todoIds
+
+    # Add some default todos if this is a new group. Items inserted into
+    # a refList will automatically get an 'id' property if not specified
+    unless todoIds.get()
+      model.push '_todoList',
+        {group: groupName, text: 'Example todo'},
+        {group: groupName, text: 'Another example'},
+        {group: groupName, text: 'This one is done already', completed: true}
+
+    # Create a reactive function that automatically keeps '_remaining'
+    # updated with the number of remaining todos
+    model.fn '_remaining', '_todoList', (list) ->
+      remaining = 0
+      for todo in list
+        remaining++ unless todo?.completed
+      return remaining
+
+    page.render()
+
+# TODO Implement this commented out API
+#get '/:groupName', (page, model, {groupName, query}) ->
+#  model.subscribe "groups.#{groupName}", (group) ->
+#    model.ref '_group', group
+##    group.setNull 'id', groupName
+#    todoIds = group.at 'todoIds'
+#    model.subscribe query('todos').where('id').within(todoIds), ->
+#      # The refList supports array methods, but it stores the todo values
+#      # on an object by id. The todos are stored on the object 'todos',
+#      # and their order is stored in an array of ids at '_group.todoIds'
+#      todoList = model.refList '_todoList', 'todos', todoIds
+#      unless todoIds.get()
+#        todoList.push
+#          {text: 'Example todo', tags: ['wknd']},
+#          {text: 'Another example', tags: ['wknd', 'work']},
+#          {text: 'This one is done already', tags: ['work'], completed: true}
+#
+#      # Create a reactive function that automatically keeps '_remaining'
+#      # updated with the number of remaining todos
+#      model.fn '_remaining', '_todoList', (list) ->
+#        remaining = 0
+#        for todo in list
+#          remaining++ unless todo.completed
+#        return remaining
+#
+#      if tags = query.tags?.split ','
+#        # TODO Hide / show tag classes
+#      else
+#        # TODO Hide / show tag classes
+#
+#      page.render()
+
+## CONTROLLER FUNCTIONS ##
+
+ready (model) ->
+
+  list = model.at '_todoList'
+
+  # Make the list draggable using jQuery UI
+  ul = $('#todos')
+  ul.sortable
+    handle: '.handle'
+    axis: 'y'
+    containment: '#dragbox'
+    update: (e, ui) ->
+      item = ui.item[0]
+      domId = item.id
+      id = item.getAttribute 'data-id'
+      to = ul.children().index(item)
+      # Use the Derby ignore option to suppress the normal move event
+      # binding, since jQuery UI will move the element in the DOM.
+      # Also, note that refList index arguments can either be an index
+      # or the item's id property
+      list.pass(ignore: domId).move {id}, to
+
+
+  list.on 'set', '*.completed', (i, completed, previous, isLocal) ->
+    # Move the item to the bottom if it was checked off
+    list.move i, -1  if completed && isLocal
+
+  newTodo = model.at '_newTodo'
+  exports.add = ->
+    # Don't add a blank todo
+    return unless text = view.escapeHtml newTodo.get()
+    newTodo.set ''
+    # Insert the new todo before the first completed item in the list
+    # or append to the end if none are completed
+    for todo, i in list.get()
+      break if todo.completed
+    list.insert i, {text, group: model.get '_group.id'}
+
+  exports.del = (e) ->
+    # Derby extends model.at to support creation from DOM nodes
+    model.at(e.target).remove()
+
+
+  showReconnect = model.at '_showReconnect'
+  showReconnect.set true
+  exports.connect = ->
+    showReconnect.set false
+    setTimeout (-> showReconnect.set true), 1000
+    model.socket.socket.connect()
+
+  exports.reload = -> window.location.reload()
+
+  exports.shortcuts = (e) ->
+    return unless e.metaKey || e.ctrlKey
+    code = e.which
+    return unless command = (switch code
+      when 66 then 'bold'           # Bold: Ctrl/Cmd + B
+      when 73 then 'italic'         # Italic: Ctrl/Cmd + I
+      when 32 then 'removeFormat'   # Clear formatting: Ctrl/Cmd + Space
+      when 220 then 'removeFormat'  # Clear formatting: Ctrl/Cmd + \
+      else null
+    )
+    document.execCommand command, false, null
+    e.preventDefault() if e.preventDefault
+    return false
+
+  # Tell Firefox to use elements for styles instead of CSS
+  # See: https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla
+  document.execCommand 'useCSS', false, true
+  document.execCommand 'styleWithCSS', false, false

node_modules/derby-examples/todos/styles/404.styl

@@ -0,0 +1 @@
+@import "./base";

node_modules/derby-examples/todos/styles/base.styl

@@ -0,0 +1,13 @@
+@import "./reset";
+@import "nib/vendor";
+
+body {
+  padding: 2em;
+}
+h1 {
+  font-size: 2em;
+  margin-bottom: .5em;
+}
+p {
+  line-height: 2em;
+}

node_modules/derby-examples/todos/styles/reset.styl

@@ -0,0 +1,21 @@
+body,h1,h2,h3,h4,th {
+  font: 13px/normal Arial,sans-serif;
+}
+body {
+  background: #fff;
+  color: #000;
+}
+body,fieldset,form,h1,h2,h3,h4,li,ol,p,td,th,ul {
+  margin: 0;
+  padding: 0;
+}
+ul {
+  margin: 0 normal;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+fieldset,img {
+  border: 0;
+}

node_modules/derby-examples/todos/styles/todos/index.styl

@@ -0,0 +1,385 @@
+/* CSS Reset */
+
+html,body,p,h1,ul,li,table,tr,th,td {
+  margin: 0;
+  padding: 0;
+}
+ins {
+  text-decoration: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+body {
+  color: #000;
+  background: #f7f7f7;
+}
+body,h1 {
+  font: 13px/16px Arial, sans-serif;
+}
+a {
+  color: #01c;
+}
+
+
+/* Page styles */
+
+#overlay {
+  width: 100%;
+  position: absolute;
+  text-align: center;
+}
+#alert {
+  position: absolute;
+  text-align: center;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 0;
+  z-index: 99;
+}
+#alert > p {
+  display: inline-block;
+  padding: 0 12px;
+  line-height: 21px;
+  border: 1px solid #a69c6d;
+  border-top: 0;
+  border-bottom-color: #8c845c;
+  border-radius: 0 0 3px 3px;
+  background: #fff1a8;
+  box-shadow: inset 0 1px #fff7cf, 0 1px rgba(0,0,0,.1);
+}
+
+h1 {
+  font: 26px/24px "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  margin-bottom: 12px;
+  color: #111;
+  text-shadow: 0 1px #f7f7f7;
+}
+h1 > span {
+  color: #444;
+  font-weight: 200;
+  margin-left: 6px;
+}
+#head {
+  background: #ddd;
+  background: -webkit-gradient(linear,0 0,0 100%,from(#e7e7e7),to(#d0d0d0));
+  background: -moz-linear-gradient(#e7e7e7, #d0d0d0);
+  background: -ms-linear-gradient(#e7e7e7, #d0d0d0);
+  background: -o-linear-gradient(#e7e7e7, #d0d0d0);
+  background: linear-gradient(#e7e7e7, #d0d0d0);
+  -webkit-box-shadow: inset 0 1px #f7f7f7, 0 1px #888, 0 2px #e7e7e7;
+  -moz-box-shadow: inset 0 1px #f7f7f7, 0 1px #888, 0 2px #e7e7e7;
+  box-shadow: inset 0 1px #f7f7f7, 0 1px #888, 0 2px #e7e7e7;
+  padding: 12px 16px;
+  white-space: nowrap;
+}
+#add {
+  max-width: 480px;
+  position: relative;
+}
+#add-input {
+  margin-right: 56px;
+}
+#add-button,
+.delete {
+  padding-left: 0;
+  padding-right: 0;
+  width: 52px;
+}
+#add-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+#new-todo {
+  width: 100%;
+}
+
+#dragbox {
+  position: absolute;
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+}
+#content {
+  max-width: 496px;
+  padding: 11px 16px 0 0;
+}
+#todos {
+  font-family: "Lucida Grande", Tahoma, sans-serif;
+  list-style: none;
+}
+.handle:hover {
+  opacity: 1;
+}
+.handle {
+  opacity: .4;
+  vertical-align: top;
+  padding: 3px 5px 0 7px;
+}
+.handle:after {
+  background: #ddd;
+  background: url("data:image/gif;base64,R0lGODdhAwADAPEAAN7e3oiIiP////f39yH/C1hNUCBEYXRhWE1QAT8ALAAAAAADAAMAQAIE1AYXVwA7");
+  background-clip: content-box;
+  background-origin: content-box;
+  vertical-align: top;
+  content: "";
+  display: block;
+  width: 8px;
+  height: 15px;
+}
+.todo {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 3px 4px 3px 18px;
+}
+.todo > label {
+  position: absolute;
+  margin-left: -18px;
+}
+.delete {
+  font-size: 11px;
+  padding: 0;
+  position: relative;
+  height: 18px;
+}
+
+.completed [contenteditable] {
+  text-decoration: line-through;
+}
+[contenteditable]:focus {
+  outline: none;
+}
+[contenteditable]:hover:before,
+[contenteditable]:focus:before {
+  content: "";
+}
+[contenteditable]:before {
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: -4px;
+  display: block;
+  position: absolute;
+}
+
+
+/* Form CSS from Impress: http://nateps.github.com/impress/ */
+
+::-moz-focus-inner {
+  border: 0;
+}
+input,
+button,
+select {
+  -webkit-appearance: none;
+  background: transparent;
+  color: #000;
+  font: 13px/normal "Lucida Grande", Tahoma, sans-serif;
+  margin: 0;
+  outline: 0;
+}
+input,
+button,
+[type="checkbox"]+i,
+[type="radio"]+i,
+select+i,
+[contenteditable]:before {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 1px 4px 2px;
+}
+input,
+[contenteditable]:before {
+  border: 1px solid;
+  border-color: rgba(0,0,0,0.35) rgba(0,0,0,0.25) rgba(0,0,0,0.25);
+  -webkit-box-shadow: inset 0 1px #f2f2f2, 0 1px rgba(255,255,255,0.3), inset 0 800px 1px -400px #fff;
+  -moz-box-shadow: inset 0 1px #f2f2f2, 0 1px rgba(255,255,255,0.3), inset 0 800px 1px -400px #fff;
+  box-shadow: inset 0 1px #f2f2f2, 0 1px rgba(255,255,255,0.3), inset 0 800px 1px -400px #fff;
+}
+button,
+[type="submit"],
+[type="checkbox"]+i,
+[type="radio"]+i,
+select+i {
+  background: rgba(0,0,0,0.35);
+  background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0.25)), to(rgba(0,0,0,0.45)));
+  background: -moz-linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45));
+  background: -ms-linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45));
+  background: -o-linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45));
+  background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45));
+  -moz-background-origin: border;
+  background-origin: border-box;
+  border: 1px solid transparent;
+  -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #e6e6e6, inset 0 200px 1px -100px #fff;
+  -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #e6e6e6, inset 0 200px 1px -100px #fff;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #e6e6e6, inset 0 200px 1px -100px #fff;
+  padding: 1px 12px 2px;
+}
+button:active,
+[type="submit"]:active,
+[type="checkbox"]:active+i,
+[type="radio"]:active+i,
+select:active+i {
+  -webkit-box-shadow: inset 0 1px #d6d6d6, inset 0 -1px #f2f2f2, 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #e6e6e6, inset 0 200px 1px -100px #e0e0e0;
+  -moz-box-shadow: inset 0 1px #d6d6d6, inset 0 -1px #f2f2f2, 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #e6e6e6, inset 0 200px 1px -100px #e0e0e0;
+  box-shadow: inset 0 1px #d6d6d6, inset 0 -1px #f2f2f2, 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #e6e6e6, inset 0 200px 1px -100px #e0e0e0;
+}
+input:focus,
+[contenteditable]:focus:before {
+  border-color: #2976d7 #5492de #5492de;
+}
+button:focus,
+[type="submit"]:focus,
+[type="checkbox"]:focus+i,
+[type="radio"]:focus+i,
+select:focus+i {
+  border-color: #5492de #2976d7 #215eac;
+  -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #b4d5fe, inset 0 200px 1px -100px #e5f4fb;
+  -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #b4d5fe, inset 0 200px 1px -100px #e5f4fb;
+  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #b4d5fe, inset 0 200px 1px -100px #e5f4fb;
+}
+button:focus:active,
+[type="submit"]:focus:active,
+[type="checkbox"]:focus:active+i,
+[type="radio"]:focus:active+i,
+select:focus:active+i {
+  -webkit-box-shadow: inset 0 1px #8abfe9, inset 0 -1px #c9e1fe, 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #b4d5fe, inset 0 200px 1px -100px #a1cced;
+  -moz-box-shadow: inset 0 1px #8abfe9, inset 0 -1px #c9e1fe, 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #b4d5fe, inset 0 200px 1px -100px #a1cced;
+  box-shadow: inset 0 1px #8abfe9, inset 0 -1px #c9e1fe, 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #b4d5fe, inset 0 200px 1px -100px #a1cced;
+}
+[type="checkbox"],
+[type="radio"] {
+  opacity: 0;
+  position: absolute;
+}
+[type="checkbox"]+i,
+[type="radio"]+i {
+  display: inline-block;
+  font-size: 7px;
+  margin-right: 2px;
+  padding: 0;
+  position: relative;
+  vertical-align: -1px;
+  left: 1px;
+  height: 12px;
+  width: 12px;
+}
+[type="radio"]+i {
+  -moz-border-radius: 12px;
+  -webkit-border-radius: 12px;
+  -moz-border-radius: 12px;
+  border-radius: 12px;
+  font-size: 8px;
+  margin: 0;
+  vertical-align: -2px;
+  left: 0;
+  height: 14px;
+  width: 14px;
+}
+[type="checkbox"]+i:after,
+[type="radio"]+i:after {
+  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAQAAAADpb+tAAAAcklEQVQIHWXBIQoCQQAAwAkWDR74D4PNqOAbBLkP+AD7VTFabYLFL2i6J1y2mAzbFmSrIHKw6wylytnJn0bSKswkyVxmqJUcFHaSzlhmKkoWvjaeagzcvO39rEXR0lbUqfQawcNLsJK5CIKjwsjV3UTvA0hhHjtECitsAAAAAElFTkSuQmCC") no-repeat;
+  display: block;
+  position: absolute;
+  top: -3px;
+  left: 1px;
+  height: 11px;
+  width: 11px;
+}
+@media (-webkit-min-device-pixel-ratio: 2) {
+  [type="checkbox"]+i:after {
+    background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjExcHgiIGhlaWdodD0iMTJweCI+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTksMS40MWMtMC4wMywwLjA0LTAuMDgsMC4wNi0wLjEsMC4xTDMuOTcsOUwxLjk4LDYuODZDMS41NSw2LjQsMC44Myw2LjM3LDAuMzcsNi44Qy0wLjEsNy4yMy0wLjEyLDcuOTYsMC4zMSw4LjQybDIuOTgsMy4yMUMzLjUsMTEuODcsMy44MSwxMiw0LjEyLDEyYzAuMDMsMCwwLjA2LDAsMC4xLDBjMC4zNS0wLjAzLDAuNjctMC4yMiwwLjg2LTAuNTFMOSw1LjUzVjEuNDF6Ii8+PHBhdGggZD0iTTQuMTIsMTFjLTAuMzIsMC0wLjYyLTAuMTMtMC44NC0wLjM3TDAuMzEsNy40MkMtMC4xMiw2Ljk2LTAuMSw2LjI0LDAuMzcsNS44YzAuNDYtMC40MywxLjE5LTAuNCwxLjYyLDAuMDZMMy45Nyw4TDguOSwwLjUyYzAuMzUtMC41MywxLjA2LTAuNjgsMS41OS0wLjMzYzAuNTMsMC4zNSwwLjY3LDEuMDYsMC4zMywxLjU5bC01LjczLDguNzFjLTAuMTksMC4yOS0wLjUxLDAuNDgtMC44NiwwLjUxQzQuMTksMTEsNC4xNiwxMSw0LjEyLDExeiIvPjwvc3ZnPg==") no-repeat;
+    height: 12px;
+  }
+}
+[type="radio"]+i:after {
+  background: #000;
+  -moz-border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px rgba(255,255,255,0.6);
+  -moz-box-shadow: 0 1px rgba(255,255,255,0.6);
+  box-shadow: 0 1px rgba(255,255,255,0.6);
+  top: 4px;
+  left: 4px;
+  height: 4px;
+  width: 4px;
+}
+:checked+i:after {
+  content: "";
+}
+.select {
+  display: inline-block;
+  line-height: 21px;
+  position: relative;
+  height: 21px;
+  min-width: 100px;
+}
+.select>i {
+  display: inline-block;
+  overflow: hidden;
+  vertical-align: top;
+  width: 100%;
+}
+select {
+  border: 0;
+  padding: 0 2px;
+  position: relative;
+  z-index: 1;
+  width: 120%;
+}
+@media (-webkit-min-device-pixel-ratio: 0) {
+  select {
+    padding: 0 21px 0 6px;
+    width: auto;
+  }
+}
+:-o-prefocus,
+.select>i {
+  float: left;
+}
+:-o-prefocus,
+select {
+  background: rgba(0,0,0,0);
+  top: 1px;
+  left: 3px;
+}
+:-o-prefocus,
+select:focus {
+  background: transparent;
+}
+select+i {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+select+i:after {
+  border: solid;
+  border-color: #666 transparent;
+  border-width: 4px 4px 0;
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: 7px;
+  right: 5px;
+}
+select:focus+i:after {
+  border-top-color: #000;
+}

node_modules/derby-examples/todos/views/404.html

@@ -0,0 +1,16 @@
+<!--
+  This is a static template file, so it doesn't have an associated app.
+  It is rendered by the server via a staticPages renderer.
+
+  Since static pages don't include the Derby client library, they can't have
+  bound variables that automatically update. However, they do support initial
+  template tag rendering from a context object and/or model.
+-->
+
+<Title:>
+  Not found
+
+<Body:>
+  <h1>404</h1>
+  <p>Sorry, we can't find anything at <b>{{url}}</b>.
+  <p>Try heading back to the <a href="/">home page</a>.

node_modules/derby-examples/todos/views/todos/index.html

@@ -0,0 +1,50 @@
+<Title:>
+  Todos
+
+<Header:>
+  <app:alert>
+
+<Body:>
+  <div id=overlay></div>
+  <form id=head x-bind=submit:add>
+    <h1>Todos <span>{_remaining} remaining</span></h1>
+    <div id=add>
+      <div id=add-input><input id=new-todo value={_newTodo}></div>
+      <input id=add-button type=submit value=Add>
+    </div>
+  </form>
+  <div id=dragbox></div>
+  <div id=content><ul id=todos>{#each _todoList}<app:todo>{/}</ul></div>
+
+<todo:>
+  <li data-id={{id}} class="{#if .completed}completed{/}">
+    <table width=100%>
+      <tr>
+        <td class=handle width=0></td>
+        <td width=100%>
+          <div class=todo>
+            <label><input type=checkbox checked={.completed}><i></i></label>
+            <div x-bind=keydown:shortcuts contenteditable>{unescaped .text}</div>
+          </div>
+        </td>
+        <td width=0><button class=delete x-bind=click:del>Delete</button></td>
+      </tr>
+    </table>
+  </li>
+
+<alert:>
+  <div id=alert>
+    {#unless connected}
+      <p>
+        {#if canConnect}
+          Offline {#if _showReconnect}&ndash; <a x-bind=click:connect>Reconnect</a>{/}
+        {else}
+          Unable to reconnect &ndash; <a x-bind=click:reload>Reload</a>
+        {/}
+      </p>
+    {/}
+  </div>
+
+<Scripts:>
+  <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js></script>
+  <script src=https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js></script>