Added audio (#1408)

* Added audio

* Update stream.html

Clean up edit.

* Update stream.html

Somehow my last commit seemed to be a mistake.

.dockerignore

@@ -0,0 +1,6 @@
+node_modules
+radata
+stats.radata
+.git
+.gitignore
+*.md

.github/FUNDING.yml

@@ -0,0 +1,12 @@
+# These are supported funding model platforms
+
+github: amark
+patreon: gunDB
+open_collective: gun
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/workflows/ci.yml

@@ -0,0 +1,108 @@
+name: ci
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  test:
+    strategy:
+      matrix:
+        node-version: [14.x]
+        os: [ubuntu-latest]
+    runs-on: ${{ matrix.os }}
+    steps:
+      # checkout the code
+      - name: Checkout
+        uses: actions/checkout@v4  # Updated to v4 (latest as of 2025)
+
+      # verify the version in package.json matches the release tag
+      - name: Version
+        uses: tcurdt/action-verify-version-npm@master  # No version update as it's using @master
+
+      # setup the node version
+      - name: Setup Node ${{ matrix.node-version }}
+        uses: actions/setup-node@v4  # Updated to v4 (latest as of 2025)
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      # cache node_modules if we can
+      - name: Cache
+        id: cache-modules
+        uses: actions/cache@v4  # Updated to v4 (latest as of 2025)
+        with:
+          path: node_modules
+          key: ${{ matrix.node-version }}-${{ runner.os }}-build-${{ hashFiles('package.json') }}
+
+      # otherwise run install
+      - name: Install
+        if: steps.cache-modules.outputs.cache-hit != 'true'
+        run: npm install
+
+      # run tests
+      - name: Test
+        run: npm test
+
+  # create github release
+  release:
+    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v')
+    needs: [test]
+    runs-on: ubuntu-latest
+    steps:
+      # create github release (which triggers the release workflows)
+      - name: Release
+        uses: softprops/action-gh-release@v2  # Updated to v2 (latest stable version as of 2025)
+        # env:
+        #   GITHUB_TOKEN: ${{ secrets.PAT }}
+
+#   # publish latest master or release to dockerhub
+#   dockerhub:
+#     if: github.event_name == 'push'
+#     needs: [test]
+#     runs-on: ubuntu-latest
+#     env:
+#       image: ${{ secrets.DOCKERHUB_USERNAME }}/gun
+#     steps:
+#
+#     - name: Checkout
+#       uses: actions/checkout@v4  # Updated to v4
+#
+#     - name: Login
+#       env:
+#         DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+#         DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
+#       run: echo -n ${{ secrets.DOCKERHUB_TOKEN }} | docker login -u ${{ secrets.DOCKERHUB_USERNAME }} --password-stdin
+#
+#     - name: Build
+#       run: |
+#         echo "SHA=$GITHUB_SHA"
+#         docker build --build-arg SHA=$GITHUB_SHA \
+#           BUILD_DATE=$(date +'%Y-%m-%dT%H:%M:%S') \
+#           VCS_REF=${GITHUB_REF} \
+#           VCS_URL=${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY} \
+#           VERSION=${GITHUB_REF##*/} \
+#           SHA=$GITHUB_SHA \
+#           --label "SHA=$GITHUB_SHA" \
+#           --tag ${{ env.image }}:${GITHUB_REF##*/} \
+#           --tag ${{ env.image }}:latest \
+#           .
+#
+#     - name: Push
+#       run: docker push ${{ env.image }}
+
+  # publish release to npm
+  npm:
+    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v')
+    needs: [test]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4  # Updated to v4
+
+      - name: Publish
+        env:
+          NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+        run: |
+          npm config set //registry.npmjs.org/:_authToken=$NPM_AUTH_TOKEN
+          npm install
+          npm publish --access=public

.gitignore

@@ -1,7 +1,21 @@
-node_modules/*
+node_modules
 npm-debug.log
+yarn.lock
 *data.json
+*data*
 *.db
 .idea/
 *.bak
 *.new
+*.log
+v8.json
+*.DS_store
+isolate*.log
+.esm-cache
+.sessionStorage
+.localStorage
+/types/**/*.ts
+!/types/**/*.d.ts
+!/types/**/*.test-d.ts
+/gun.ts
+/temp/

.npmignore

@@ -0,0 +1,5 @@
+*.ts
+/temp/
+!*.d.ts
+*.radata
+isolate-*

.prettierignore

@@ -0,0 +1 @@
+*

.travis.yml

@@ -1,10 +1,10 @@
 language: node_js
+branches:
+  except:
+    - debug
+    - manhattan
 node_js:
-  - 0.6
-  - 0.8
-  - 0.10
-  - 0.11
-  - 0.12
-  - 4.0
-  - 4.2
-  - 5.0
+  - 10
+cache:
+  directories:
+    - node_modules

CHANGELOG.md

@@ -1,5 +1,80 @@
 # CHANGELOG
 
+## 0.2020.x
+
+`>0.2020.520` may break in-process `gun1` `gun2` message passing. Check `test/common.js` "Check multi instance message passing" for a hint and/or complain on community chat. 
+
+ - No breaking changes to core API.
+ - Storage adapter `put` event breaking change (temporary?), RAD is official now and storage adapters should be RAD plugins instead of GUN adapters.
+ - GUN soul format changed from being a random UUID to being a more predictable graph path (of where initially created) to support even better offline behavior. This means `null`ing & replacing an object will not create a new but re-merge.
+ - Pretty much all internal GUN utility will be deleted, these are mostly undocumented but will affect some people - they will still be available as a separate file but deprecated.
+ - As the DHT gets implemented, your relay peers may automatically connect to it, so do not assume your peer is standalone. `Gun({axe: false` should help prevent this but loses you most scaling properties.
+ - The 2019 -> 2020 "changes" are happening gradually, based on experimental in-production tests.
+ - As always, **most important** is to ask in the [community chat](http://chat.gun.eco) if you have any issues, and to keep up to date with changes.
+
+## 0.2019.x
+
+Some RAD & SEA data format changes, but with as much backward compatibility as possible, tho ideally should be dropped.
+
+## 0.9.x
+
+No breaking changes, but the new Radix Storage Engine (RSE) has been finally integrated and works with S3 as a backup.
+
+// Edit: commentary removed.
+
+## 0.8.x
+
+Adapter interfaces have changed from `Gun.on('event', cb)` to `gun.on('event', cb)`, this will force adapters to be instance specific.
+
+`.path()` and `.not()` have been officially removed from the core bundle, you can bundle them yourself at `lib/path.js` and `lib/not.js` if you still need them.
+
+## 0.7.x
+
+Small breaking change to `.val(cb)`:
+
+Previously `.val(cb)` would ONLY be called when data exists, like `.on(cb)`.
+
+However, due to popular demand, people wanted `.val(cb)` to also get called for `.not(cb)` rather than (before) it would "wait" until data arrived.
+
+NOTE: For dynamic paths, `.val(cb)` will still wait, like:
+
+`gun.get('users').map().val(cb)` because the behavior of the `map()` is simply to not fire anything down the chain unless items are found.
+
+## 0.6.x
+
+Introduced experimental features, chaining `.val()` (no callback) and `.map(cb)` behaving as a map/reduce function.
+
+It also upgraded the socket adapters and did end-to-end load testing and correctness testing.
+
+## 0.5.9
+
+GUN 0.3 -> 0.4 -> 0.5 Migration Guide:
+`gun.back` -> `gun.back()`;
+`gun.get(key, cb)` -> cb(err, data) -> cb(at) at.err, at.put;
+`gun.map(cb)` -> `gun.map().on(cb)`;
+`gun.init` -> deprecated;
+`gun.put(data, cb)` -> cb(err, ok) -> cb(ack) ack.err, ack.ok;
+`gun.get(key)` global/absolute -> `gun.back(-1).get(key)`;
+`gun.key(key)` -> temporarily broken;
+
+## 0.3.7
+
+ - Catch localStorage errors.
+
+## 0.3.6
+
+ - Fixed S3 typo.
+
+## 0.3.5
+
+ - Fixed server push.
+
+## 0.3.4
+
+ - Breaking Change! `list.set(item)` returns the item's chain now, not the list chain.
+ - Client and Server GUN servers are now more up to spec, trimmed excess HTTP/REST header data.
+ - Gun.is.lex added.
+
 ## 0.3.3
 
 - You can now link nodes natively, `gun.get('mark').path('owner').put(gun.get('cat'))`!

Dockerfile

@@ -0,0 +1,35 @@
+# install packages
+FROM node:lts-alpine as builder
+RUN mkdir /work
+WORKDIR /work
+RUN apk add --no-cache alpine-sdk python3
+COPY package*.json ./
+RUN mkdir -p node_modules
+RUN npm ci --only=production
+
+# fresh image without dev packages
+FROM node:lts-alpine
+# build-time metadata as defined at http://label-schema.org
+ARG BUILD_DATE
+ARG VCS_REF
+ARG VCS_URL
+ARG VERSION
+LABEL org.label-schema.build-date=$BUILD_DATE \
+  org.label-schema.name="Gun - Offline First, Javascript Graph Database" \
+  org.label-schema.url="http://gun.js.org" \
+  org.label-schema.vcs-ref=$VCS_REF \
+  org.label-schema.vcs-url=$VCS_URL \
+  org.label-schema.vendor="The Gun Database Team" \
+  org.label-schema.version=$VERSION \
+  org.label-schema.schema-version="1.0"
+ARG SHA
+RUN mkdir /work
+WORKDIR /work
+COPY --from=builder /work/node_modules ./node_modules
+RUN npm rebuild -q
+ADD . .
+RUN echo "{ \"sha\": \"$SHA\" }" > version.json
+RUN cat version.json
+EXPOSE 8080
+EXPOSE 8765
+CMD ["npm","start"]

Procfile

@@ -0,0 +1 @@
+web: node --inspect examples/http.js

README.md

@@ -1,90 +1,330 @@
-# gun [![NPM downloads](https://img.shields.io/npm/dm/gun.svg?style=flat)](https://npmjs.org/package/gun) [![Build Status](https://travis-ci.org/amark/gun.svg?branch=master)](https://travis-ci.org/amark/gun) [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/amark/gun?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+<p id="readme"><a href="https://gun.eco/"><img width="40%" src="https://cldup.com/TEy9yGh45l.svg"/></a><img width="50%" align="right" vspace="25" src="https://gun.eco/see/demo.gif"/></p>
 
-GUN is a realtime, distributed, offline-first, graph database engine. Lightweight and powerful, at just **~9KB** gzipped.
+[![](https://data.jsdelivr.com/v1/package/npm/gun/badge)](https://www.jsdelivr.com/package/npm/gun)
+![Build](https://github.com/amark/gun/actions/workflows/ci.yml/badge.svg)
+[![Gitter](https://img.shields.io/gitter/room/amark/gun.js.svg)](http://chat.gun.eco)
 
-## Why?
+**GUN** is an [ecosystem](https://gun.eco/docs/Ecosystem) of **tools** that let you build [community run](https://www.nbcnews.com/tech/tech-news/these-technologists-think-internet-broken-so-they-re-building-another-n1030136) and [encrypted applications](https://gun.eco/docs/Cartoon-Cryptography) - like an Open Source Firebase or a Decentralized Dropbox.
 
- - **Realtime** - It may be trivial to get realtime updates with socket.io or something, but what you do not get is *state synchronization*. GUN does this for you out of the box, assuring that two users' simultaneous updates won't concurrently break each other.
- - **Distributed** - GUN is peer-to-peer by design, meaning you have no centralized database server to maintain or that could crash. This lets you sleep through the night without worrying about database DevOps - we call this "NoDB". From that, you can build decentralized, federated, or centralized apps.
- - **Offline-first** - GUN works even if your internet or cell reception doesn't. Users can still plug away and save data as normal, and then when the network comes back online GUN will automatically synchronize all the changes and handle any conflicts for you.
- - **Graph** - Most databases force you to bend over backwards to match their storage constraints. But graphs are different, they let you have any data structure you want. Whether that be traditional tables with relations, document oriented trees, or tons of circular references. You choose.
+The [Internet Archive](https://news.ycombinator.com/item?id=17685682) and [100s of other apps](https://github.com/amark/gun/wiki/awesome-gun) run GUN in-production.
+
+ + Multiplayer by default with realtime p2p state synchronization!
+ + Graph data lets you use key/value, tables, documents, videos, & more!
+ + Local-first, offline, and decentralized with end-to-end encryption.
+
+Decentralized alternatives to [Zoom](https://www.zdnet.com/article/era-hatches-meething-an-open-source-browser-based-video-conferencing-system/), [Reddit](https://notabug.io/t/whatever/comments/36588a16b9008da4e3f15663c2225e949eca4a15/gpu-bot-test), [Instagram](https://iris.to/), [Slack](https://iris.to/), [YouTube](https://d.tube/), [Stripe](https://twitter.com/marknadal/status/1422717427427647489), [Wikipedia](https://news.ycombinator.com/item?id=17685682), Facebook [Horizon](https://twitter.com/marknadal/status/1424476179189305347) and more have already pushed terabytes of daily P2P traffic on GUN. We are a [friendly community](http://chat.gun.eco/) creating a [free fun future for freedom](https://youtu.be/1HJdrBk3BlE):
+
+<table>
+<tr>
+<a href="https://youtu.be/s_m16-w6bBI"><img width="31%" src="https://gun.eco/see/3dvr.gif" title="3D VR"/></a>
+<a href="https://github.com/cstefanache/cstefanache.github.io/blob/06697003449e4fc531fd32ee068bab532976f47b/_posts/2016-08-02-gun-db-artificial-knowledge-sharing.md"><img width="31%" src="https://gun.eco/see/aiml.gif" title="AI/ML"/></a>
+<a href="http://gps.gunDB.io/"><img width="31%" src="https://gun.eco/see/gps.gif" title="GPS"/></a>
+</tr>
+<tr>
+<a href="https://github.com/lmangani/gun-scape#gun-scape"><img width="31%" src="https://gun.eco/see/dataviz.gif" title="Data Viz"/></a>
+<a href="https://github.com/amark/gun/wiki/Auth"><img width="31%" src="https://gun.eco/see/p2p.gif" title="P2P"/></a>
+<a href="https://github.com/Stefdv/gun-ui-lcd#okay-what-about-gundb-"><img width="31%" src="https://gun.eco/see/iot.gif" title="IoT"/></a>
+</tr>
+<tr>
+<a href="http://chat.gun.eco"><img width="31%" src="https://gun.eco/see/vr-world.gif" title="VR World"/></a>
+<a href="https://youtu.be/1ASrmQ-CwX4"><img width="31%" src="https://gun.eco/see/ar.gif" title="AR"/></a>
+<a href="https://meething.space/"><img width="31%" src="https://gun.eco/see/video-conf.gif" title="Video Confernece"/></a>
+</tr>
+</table>
 
 ## Quickstart
 
-Try the [interactive tutorial](http://gun.js.org/think.html) in the browser (**5min** ~ average developer). Or run the NodeJS [demo example apps](#demos) (**5min** ~ average developer).
+GUN is *super easy* to get started with:
 
-## Table of Contents
- - [Demos](#demos)
-   - [Videos](#videos)
-   - [Projects](#gun-projects)  
- - [How to get started](#how-to-get-started)
- - [Modules](#gun-modules)
- - [How can I help make gun even more awesome?](#how-can-i-help-make-gun-even-more-awesome)
- - [License](#license)
-   - [Contributors](#contributors)
- - [Changelog](#changelog)
- - [Stay up-to-date](#stay-up-to-date)
- - **[API Reference](https://github.com/amark/gun/wiki/API-(v0.3.x))**  :arrow_upper_right:
-
-## Demos
-
- - [Online example applications](http://gunjs.herokuapp.com/)
- - The above examples are included in this repo. You can run them locally by running the following commands in your terminal or on your command line:
+ - Try the [interactive tutorial](https://gun.eco/docs/Todo-Dapp) in the browser (**5min** ~ average developer).
+ - Or `npm install gun` and run the examples with `cd node_modules/gun && npm start` (**5min** ~ average developer).
 
 > **Note:** If you don't have [node](http://nodejs.org/) or [npm](https://www.npmjs.com/), read [this](https://github.com/amark/gun/blob/master/examples/install.sh) first.
+> If the `npm` command line didn't work, you may need to `mkdir node_modules` first or use `sudo`.
 
-   ```bash
-   npm install gun
-   cd node_modules/gun
-   node examples/http.js 8080
+- An online demo of the examples are available here: http://try.axe.eco/
+- Or write a quick app: ([try now in a playground](https://jsbin.com/kadobamevo/edit?js,console))
+```html
+<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
+<script>
+// import GUN from 'gun'; // in ESM
+// GUN = require('gun'); // in NodeJS
+// GUN = require('gun/gun'); // in React
+gun = GUN();
+
+gun.get('mark').put({
+  name: "Mark",
+  email: "mark@gun.eco",
+});
+
+gun.get('mark').on((data, key) => {
+  console.log("realtime updates:", data);
+});
+
+setInterval(() => { gun.get('mark').get('live').put(Math.random()) }, 9);
+</script>
+```
+- Or try something **mind blowing**, like saving circular references to a table of documents! ([play](http://jsbin.com/wefozepume/edit?js,console))
+```javascript
+cat = {name: "Fluffy", species: "kitty"};
+mark = {boss: cat};
+cat.slave = mark;
+
+// partial updates merge with existing data!
+gun.get('mark').put(mark);
+
+// access the data as if it is a document.
+gun.get('mark').get('boss').get('name').once(function(data, key){
+  // `once` grabs the data once, no subscriptions.
+  console.log("Mark's boss is", data);
+});
+
+// traverse a graph of circular references!
+gun.get('mark').get('boss').get('slave').once(function(data, key){
+  console.log("Mark is the cat's slave!", data);
+});
+
+// add both of them to a table!
+gun.get('list').set(gun.get('mark').get('boss'));
+gun.get('list').set(gun.get('mark'));
+
+// grab each item once from the table, continuously:
+gun.get('list').map().once(function(data, key){
+  console.log("Item:", data);
+});
+
+// live update the table!
+gun.get('list').set({type: "cucumber", goal: "jumping cat"});
 ```
 
-   Then visit [http://localhost:8080](http://localhost:8080) in your browser. 
+Want to keep building more? **Jump to [THE DOCUMENTATION](#documentation)!**
 
-   If that did not work it is probably because npm installed it to a global directory. To fix that try `mkdir node_modules` in your desired directory and re-run the above commands. You also might have to add `sudo` in front of the commands.
+# About
+First & foremost, GUN is **a community of the nicest and most helpful people** out there. So [I want to invite you](http://chat.gun.eco) to come tell us about what **you** are working on & wanting to build (new or old school alike! Just be nice as well.) and ask us your questions directly. :)
 
-### Videos
- - [Fault tolerance](https://www.youtube.com/watch?v=-i-11T5ZI9o&feature=youtu.be) (01:01)
- - [Saving relational or document based data](https://www.youtube.com/watch?v=cOO6wz1rZVY&feature=youtu.be) (06:59)
- - [Everything you want to know about GUN](https://youtu.be/qJNDplwJ8aQ) (57:50) 2x speed recommended.
- - [GUN's YouTube channel](https://www.youtube.com/channel/UCQAtpf-zi9Pp4__2nToOM8g/playlists) also has videos.
+<p align="center"><a href="https://www.youtube.com/watch?v=oTQXzhm8w_8"><img width="250" src="https://img.youtube.com/vi/oTQXzhm8w_8/0.jpg"><br/>Watch the 100 second intro!</a></p>
 
-### <a name="gun-projects"></a>Projects
- - GUN users are encouraged to add their projects to this [running projects list](https://github.com/amark/gun/wiki/projects).
+The GUN ecosystem stack is a collection of independent and modular tools covering everything from [CRDT](https://crdt.tech/) [conflict resolution](https://gun.eco/distributed/matters.html), [cryptographic security](https://gun.eco/docs/Cartoon-Cryptography) & [encryption](https://gun.eco/docs/SEA), [radix storage serialization](https://gun.eco/docs/RAD), [mesh networking](https://gun.eco/docs/DAM) & [routing algorithms](https://gun.eco/docs/Routing), to distributed systems [correctness & load testing](https://github.com/gundb/panic-server), CPU scheduled [JSON parser](https://github.com/amark/gun/blob/master/lib/yson.js) to prevent UI lag, and more!
 
-## How to get started
- - Until we complete the [Getting Started with GUN](https://github.com/amark/gun/wiki/getting-started-(v0.3.x)) Guide, please review the [API documentation](https://github.com/amark/gun/wiki/API-(v0.3.x)) and [examples' source code](https://github.com/amark/gun/blob/master/examples).
- - Check out and add example code [snippets](https://github.com/amark/gun/wiki/snippets-(v0.3.x)) —including micro-modules— to address specific situations.
+<div><img width="48%" src="https://gun.eco/see/stack.png"/>
+<img width="48%" align="right" src="https://gun.eco/see/layers.png"/></div>
 
-## <a name="gun-modules"></a>Modules
-GUN is designed to be as minimal as possible, with any additional functionality being provided via modules.  Please refer to the [modules](https://github.com/amark/gun/wiki/modules) page for a list of existing extensions. Please refer to the [gun-extensions](https://github.com/gundb/gun-extensions/issues) repo to see what extensions have been requested or to request an extension.
+On that note, let's get some official shout outs covered first:
 
-## How can I help make gun even more awesome?
- - Star this repo
- - Follow us and share your appreciation via [Gitter](https://gitter.im/amark/gun), [Twitter](https://twitter.com/databasegun), [LinkedIn](https://www.linkedin.com/company/gun-inc), and [Facebook](https://www.facebook.com/databasegun)
- - [Share projects you've written](https://github.com/amark/gun/wiki/projects)
- - [Build extensions or squish bugs](https://waffle.io/amark/gun)
-         - If you are working on an extension, familiarize yourself with [GUN's Module API](https://github.com/amark/gun/wiki/Building-Modules-for-Gun)
+### Support
+
+<p align="center">
+Thanks to:
+
+<table>
+<tr>
+<td vlign="center"><a href="https://mozilla.org/builders"><img height="100" src="https://user-images.githubusercontent.com/1423657/81992335-85346480-9643-11ea-8754-8275e98e06bc.png"></a></td>
+<td vlign="center"><a href="http://unstoppabledomains.com/"><img src="https://gun.eco/img/unstoppable.png"></a></td>
+<td vlign="center"><a href="https://mask.io/"><img src="https://dimensiondev.github.io/Mask-VI/assets/Logo/MB--Logo--CombH-Circle--Blue.svg" width="250"></a></td>
+</tr>
+<tr>
+<td vlign="center">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://www.ajar.org/"><img src="https://www.ajar.org/logo.png" height="120"></a></td>
+<td vlign="center"><a href="https://wallie.io/"><img src="https://raw.githubusercontent.com/gundb/gun-site/master/img/wallie.png" width="250"></a></td>
+<td vlign="center">&nbsp;&nbsp;<a href="https://ghostdrive.com/"><img src="https://gun.eco/img/ghostdrive.png" height="120"></a></td>
+</tr>
+</table>
+
+<a href="https://github.com/robertheessels">Robert Heessels</a>,
+<a href="http://qxip.net/">Lorenzo Mangani</a>,
+<a href="https://nlnet.nl/">NLnet Foundation</a>,
+<a href="http://github.com/samliu">Sam Liu</a>,
+<a href="http://github.com/ddombrow">Daniel Dombrowsky</a>,
+<a href="http://github.com/vincentwoo">Vincent Woo</a>,
+<a href="http://github.com/coolaj86">AJ ONeal</a>,
+<a href="http://github.com/ottman">Bill Ottman</a>,
+<a href="http://github.com/mikewlange">Mike Lange</a>,
+<a href="http://github.com/ctrlplusb">Sean Matheson</a>,
+<a href="http://github.com/alanmimms">Alan Mimms</a>,
+<a href="https://github.com/dfreire">Dário Freire</a>,
+<a href="http://github.com/velua">John Williamson</a>,
+<a href="http://github.com/finwo">Robin Bron</a>,
+<a href="http://github.com/ElieMakhoul">Elie Makhoul</a>,
+<a href="http://github.com/mikestaub">Mike Staub</a>,
+<a href="http://github.com/bmatusiak">Bradley Matusiak</a>,
+<a href="https://github.com/sjuxax">Jeff Cook</a>,
+<a href="https://github.com/nmauersberg">Nico</a>,
+<a href="https://github.com/ajartille">Aaron Artille</a>,
+<a href="https://github.com/timjrobinson">Tim Robinson</a>,
+<a href="https://github.com/hibas123">Fabian Stamm</a>,
+<a href="https://twitter.com/mikestaub">Mike Staub</a>,
+<a href="https://hunterowens.com/">Hunter Owens</a>,
+<a href="https://github.com/JacobMillner">Jacob Millner</a>,
+<a href="https://github.com/b-lack">Gerrit Balindt</a>,
+<a href="https://github.com/gabriellemon">Gabriel Lemon</a>,
+<a href="https://github.com/murageyun">Murage Martin</a>,
+<a href="https://github.com/octalmage">Jason Stallings</a>
+</p>
+
+ - Join others in sponsoring code: https://www.patreon.com/gunDB !
+ - Ask questions: http://stackoverflow.com/questions/tagged/gun ?
+ - Found a bug? Report at: https://github.com/amark/gun/issues ;
+ - **Need help**? Chat with us: http://chat.gun.eco .
+
+### History
+
+[GUN](https://gun.eco) was created by [Mark Nadal](https://twitter.com/marknadal) in 2014 after he had spent 4 years trying to get his collaborative web app to scale up with traditional databases.
+
+<img width="250px" src="https://gun.eco/see/problem.png" align="left" title="pain point" style="margin: 0 1em 1em 0"> After he realized [Master-Slave database architecture causes one big bottleneck](https://gun.eco/distributed/matters.html), he (as a complete newbie outsider) naively decided **to question the status quo** and shake things up with controversial, heretical, and contrarian experiments:
+
+**The NoDB** - no master, no servers, no "single source of truth", not built with a real programming language or real hardware, no DevOps, no locking, not *just* SQL or NoSQL but both (**all** - graphs, documents, tables, key/value).
+
+The goal was to build a P2P database that could survive living inside **any** browser, and could correctly sync data between **any** device after assuming **any** offline-first activity.
+
+<img src="https://gun.eco/see/compare.png" title="comparison table">
+
+Technically, **GUN is a graph synchronization protocol** with a *lightweight embedded engine*, capable of doing *[20M+ API ops/sec](https://gun.eco/docs/Performance)* in **just ~9KB gzipped size**.
+
+## Documentation
+
+<table>
+  <tr>
+    <td style="border: 0;"><h3><a href="https://gun.eco/docs/API">API reference</a></h3></td>
+    <td style="border: 0;"><h3><a href="https://gun.eco/docs/Todo-Dapp">Tutorials</a></h3></td>
+    <td style="border: 0;"><h3><a href="https://github.com/amark/gun/tree/master/examples">Examples</a></h3></td>
+  </tr>
+  <tr>
+    <td style="border: 0;"><h3><a href="https://github.com/brysgo/graphql-gun">GraphQL</a></h3></td>
+    <td style="border: 0;"><h3><a href="https://github.com/PenguinMan98/electrontest">Electron</a></h3></td>
+    <td style="border: 0;"><h3><a href="https://gun.eco/docs/React-Native">React & Native</a></h3></td>
+  </tr>
+  <tr>
+    <td style="border: 0;"><h3><a href="https://github.com/sjones6/vue-gun">Vue</a></h3></td>
+    <td style="border: 0;"><h3><a href="https://gun.eco/docs/Svelte">Svelte</a></h3></td>
+    <td style="border: 0;"><h3><a href="https://github.com/Stefdv/gun-ui-lcd#syncing">Webcomponents</a></h3></td>
+  </tr>
+  <tr>
+    <td style="border: 0;"><h3><a href="https://gun.eco/docs/CAP-Theorem">CAP Theorem Tradeoffs</a></h3></td>
+    <td style="border: 0;"><h3><a href="https://gun.eco/distributed/matters.html">How Data Sync Works</a></h3></td>
+    <td style="border: 0;"><h3><a href="https://gun.eco/docs/Porting-GUN">How GUN is Built</a></h3></td>
+  </tr>
+  <tr>
+    <td style="border: 0;"><h3><a href="https://gun.eco/docs/Auth">Crypto Auth</a></h3></td>
+    <td style="border: 0;"><h3><a href="https://github.com/amark/gun/wiki/Awesome-GUN">Modules</a></h3></td>
+    <td style="border: 0;"><h3><a href="https://gun.eco/docs/Roadmap">Roadmap</a></h3></td>
+  </tr>
+</table>
+
+This would not be possible without **community contributors**, big shout out to:
+
+**[ajmeyghani](https://github.com/ajmeyghani) ([Learn GUN Basics with Diagrams](https://medium.com/@ajmeyghani/gundb-a-graph-database-in-javascript-3860a08d873c))**; **[anywhichway](https://github.com/anywhichway) ([Block Storage](https://github.com/anywhichway/gun-block))**; **[beebase](https://github.com/beebase) ([Quasar](https://github.com/beebase/gun-vuex-quasar))**; **[BrockAtkinson](https://github.com/BrockAtkinson) ([brunch config](https://github.com/BrockAtkinson/brunch-gun))**; **[Brysgo](https://github.com/brysgo) ([GraphQL](https://github.com/brysgo/graphql-gun))**; **[d3x0r](https://github.com/d3x0r) ([SQLite](https://github.com/d3x0r/gun-db))**; **[forrestjt](https://github.com/forrestjt) ([file.js](https://github.com/amark/gun/blob/master/lib/file.js))**; **[hillct](https://github.com/hillct) (Docker)**; **[JosePedroDias](https://github.com/josepedrodias) ([graph visualizer](http://acor.sl.pt:9966))**; **[JuniperChicago](https://github.com/JuniperChicago) ([cycle.js bindings](https://github.com/JuniperChicago/cycle-gun))**; **[jveres](https://github.com/jveres) ([todoMVC](https://github.com/jveres/todomvc))**; **[kristianmandrup](https://github.com/kristianmandrup) ([edge](https://github.com/kristianmandrup/gun-edge))**; **[Lightnet](https://github.com/Lightnet)** ([Awesome Vue User Examples](https://glitch.com/edit/#!/jsvuegunui?path=README.md:1:0) & [User Kitchen Sink Playground](https://gdb-auth-vue-node.glitch.me/)); **[lmangani](https://github.com/lmangani) ([Cytoscape Visualizer](https://github.com/lmangani/gun-scape), [Cassandra](https://github.com/lmangani/gun-cassandra), [Fastify](https://github.com/lmangani/fastify-gundb), [LetsEncrypt](https://github.com/lmangani/polyGun-letsencrypt))**; **[mhelander](https://github.com/mhelander) ([SEA](https://github.com/amark/gun/blob/master/sea.js))**; [omarzion](https://github.com/omarzion) ([Sticky Note App](https://github.com/omarzion/stickies)); [PsychoLlama](https://github.com/PsychoLlama) ([LevelDB](https://github.com/PsychoLlama/gun-level)); **[RangerMauve](https://github.com/RangerMauve) ([schema](https://github.com/gundb/gun-schema))**; **[robertheessels](https://github.com/swifty) ([gun-p2p-auth](https://github.com/swifty/gun-p2p-auth))**; **[rogowski](https://github.com/rogowski) (AXE)**; [sbeleidy](https://github.com/sbeleidy); **[sbiaudet](https://github.com/sbiaudet) ([C# Port](https://github.com/sbiaudet/cs-gun))**; **[Sean Matheson](https://github.com/ctrlplusb) ([Observable/RxJS/Most.js bindings](https://github.com/ctrlplusb/gun-most))**; **[Shadyzpop](https://github.com/Shadyzpop) ([React Native example](https://github.com/amark/gun/tree/master/examples/react-native))**; **[sjones6](https://github.com/sjones6) ([Flint](https://github.com/sjones6/gun-flint))**; RIP **[Stefdv](https://github.com/stefdv) (Polymer/web components)**; **[zrrrzzt](https://github.com/zrrrzzt) ([JWT Auth](https://gist.github.com/zrrrzzt/6f88dc3cedee4ee18588236756d2cfce))**; **[xmonader](https://github.com/xmonader) ([Python Port](https://github.com/xmonader/pygundb))**; 
+
+I am missing many others, apologies, will be adding them soon! This list is infinitely old & way out of date, if you want to be listed in it please make a PR! :)
+
+## Testing
+
+You will need to `npm install -g mocha` first. Then in the gun root folder run `npm test`. Tests will trigger persistent writes to the DB, so subsequent runs of the test will fail. You must clear the DB before running the tests again. This can be done by running `rm -rf *data*` command in the project directory.
+
+## Shims
+
+ > These are only needed for NodeJS & React Native, they shim the native Browser WebCrypto API.
+
+If you want to use [SEA](https://gun.eco/docs/SEA) for `User` auth and security, you will need to install:
+
+`npm install @peculiar/webcrypto --save`
+
+Please see [our React Native docs](https://gun.eco/docs/React-Native) for installation instructions!
+
+Then you can require [SEA](https://gun.eco/docs/SEA) without an error:
+
+```javascript
+GUN = require('gun/gun');
+SEA = require('gun/sea');
+```
+
+## Deploy
+
+ > Note: The default examples that get auto-deployed on `npm start` CDN-ify all GUN files, modules, & storage.
+ 
+ > Note: Moving forward, AXE will start to automatically cluster your peer into a shared DHT. You may want to disable this to run an isolated network.
+ 
+ > Note: When deploying a web application using GUN on a cloud provider, you may have to set `CI=false` in your `.env`. This prevents GUN-specific warnings from being treated as errors when deploying your app. You may also resolve this by modifying your webpack config to not try to build the GUN dependencies.
+
+To quickly spin up a GUN relay peer for your development team, utilize [Heroku](http://heroku.com), [Docker](http://docker.com), or any others listed below. Or some variant thereof [Dokku](http://dokku.viewdocs.io/dokku/), K8s, etc. ! Or use all of them so your relays are decentralized too!
+
+### Linux
+
+`SSH` into the home directory of a clean OS install with `sudo` ability. Set any environment variables you need (see below), then do:
+
+```bash
+curl -o- https://raw.githubusercontent.com/amark/gun/master/examples/install.sh | bash
+```
+
+ > Read [install.sh](https://github.com/amark/gun/blob/master/examples/install.sh) first!
+ > If `curl` is not found, *copy&paste* the contents of install.sh into your ssh.
+
+You can now safely `CTRL+A+D` to escape without stopping the peer. To stop everything `killall screen` or `killall node`.
+
+Environment variables may need to be set like `export HTTPS_CERT=~/cert.pem HTTPS_KEY=~/key.pem PORT=443`. You can also look at a sample [nginx](https://gun.eco/docs/nginx) config. For production deployments, you probably will want to use something like `pm2` or better to keep the peer alive after machine reboots.
+
+### [Dome](https://www.trydome.io/)
+[Deploy GUN in one-click](https://app.trydome.io/signup?package=gun) with [Dome](https://trydome.io) and receive a free trial:
+
+[![Deploy to Dome](https://trydome.io/button.svg)](https://app.trydome.io/signup?package=gun)
+
+### [Heroku](https://www.heroku.com/)
+
+[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy?template=https://github.com/amark/gun)
+
+ > Heroku deletes your data every 15 minutes, one way to fix this is by adding [cheap storage](https://gun.eco/docs/Using-Amazon-S3-for-Storage).
+
+Or:
+
+```bash
+git clone https://github.com/amark/gun.git
+cd gun
+heroku create
+git push -f heroku HEAD:master
+```
+
+Then visit the URL in the output of the 'heroku create' step, in a browser. Make sure to set any environment config vars in the settings tab.
+
+### [Zeet.co](https://www.zeet.co/)
+
+[![Deploy](https://deploy.zeet.co/gun.svg)](https://deploy.zeet.co/?url=https://github.com/amark/gun)
+
+Then visit the URL in the output of the 'now --npm' step, in your browser.
+
+### [Docker](https://www.docker.com/)
+
+ > Warning: Docker image is community contributed and may be old with missing security updates, please check version numbers to compare.
+
+[![Docker Automated build](https://img.shields.io/docker/automated/gundb/gun.svg)](https://hub.docker.com/r/gundb/gun/) [![](https://images.microbadger.com/badges/image/gundb/gun.svg)](https://microbadger.com/images/gundb/gun "Get your own image badge on microbadger.com") [![Docker Pulls](https://img.shields.io/docker/pulls/gundb/gun.svg)](https://hub.docker.com/r/gundb/gun/) [![Docker Stars](https://img.shields.io/docker/stars/gundb/gun.svg)](https://hub.docker.com/r/gundb/gun/)
+
+Pull from the [Docker Hub](https://hub.docker.com/r/gundb/gun/) [![](https://images.microbadger.com/badges/commit/gundb/gun.svg)](https://microbadger.com/images/gundb/gun). Or:
+
+```bash
+docker run -p 8765:8765 gundb/gun
+```
+
+Or build the [Docker](https://docs.docker.com/engine/installation/) image locally:
+
+```bash
+git clone https://github.com/amark/gun.git
+cd gun
+docker build -t myrepo/gundb:v1 .
+docker run -p 8765:8765 myrepo/gundb:v1
+```
+
+Or, if you prefer your Docker image with metadata labels (Linux/Mac only):
+
+```bash
+npm run docker
+docker run -p 8765:8765 username/gun:git
+```
+
+Then visit [http://localhost:8765](http://localhost:8765) in your browser.
 
 ## License
 
-Designed with ♥ by Mark Nadal, the gun team, and many amazing contributors.  Liberally licensed under [Zlib / MIT / Apache 2.0](https://github.com/amark/gun/blob/master/LICENSE.md).
+Designed with ♥ by Mark Nadal, the GUN team, and many amazing contributors.
 
-## Contributors
+Openly licensed under [Zlib / MIT / Apache 2.0](https://github.com/amark/gun/blob/master/LICENSE.md).
 
-Thanks to the following people who have contributed to GUN, via code, issues, or conversation (this list has quickly become tremendously behind! We'll probably turn this into a dedicated wiki page so you can add yourself):
+[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Famark%2Fgun.svg?size=large)](https://app.fossa.io/projects/git%2Bhttps%3A%2F%2Fgithub.com%2Famark%2Fgun?ref=badge_large)
 
-[agborkowski](https://github.com/agborkowski); [alexlafroscia](https://github.com/alexlafroscia); [anubiann00b](https://github.com/anubiann00b); [bromagosa](https://github.com/bromagosa); [coolaj86](https://github.com/coolaj86); [d-oliveros](https://github.com/d-oliveros), [danscan](https://github.com/danscan); **[forrestjt](https://github.com/forrestjt) ([file.js](https://github.com/amark/gun/blob/master/lib/file.js))**; [gedw99](https://github.com/gedw99); [HelloCodeMing](https://github.com/HelloCodeMing); **[JosePedroDias](https://github.com/josepedrodias) (graph visualizer)**; **[jveres](https://github.com/jveres) ([todoMVC](https://github.com/jveres/todomvc) [live demo](http://todos.loqali.com/))**; [ndarilek](https://github.com/ndarilek); [onetom](https://github.com/onetom); [phpnode](https://github.com/phpnode); [PsychoLlama](https://github.com/PsychoLlama); **[RangerMauve](https://github.com/RangerMauve) ([schema](https://github.com/gundb/gun-schema))**; [riston](https://github.com/riston); [rootsical](https://github.com/rootsical); [rrrene](https://github.com/rrrene); [ssr1ram](https://github.com/ssr1ram); [Xe](https://github.com/Xe); [zot](https://github.com/zot);
-[ayurmedia](https://github.com/ayurmedia);
-
-This list of contributors was manually compiled and alphabetically sorted. If we missed you, please submit an issue so we can get you added!
-
-## [Changelog](https://github.com/amark/gun/blob/master/CHANGELOG.md#03)
-
-Also see the current [Release List](https://github.com/amark/gun/releases) and [Tag List](https://github.com/amark/gun/tags) for quick access to relevant versions.
-
-==========================
-<a name="stay-up-to-date"></a>
-
-<a href="https://gitter.im/amark/gun"><img alt="Gitter channel" src="https://badges.gitter.im/Join%20Chat.svg" /></a>
-[![YouTube](https://img.shields.io/badge/You-Tube-red.svg)](https://www.youtube.com/channel/UCQAtpf-zi9Pp4__2nToOM8g) [![LinkedIn](https://img.shields.io/badge/Linked-In-blue.svg)](https://www.linkedin.com/company/gun-inc) [![Twitter Follow](https://img.shields.io/twitter/follow/databasegun.svg?style=social)](https://twitter.com/databasegun)
+[YouTube](https://www.youtube.com/channel/UCQAtpf-zi9Pp4__2nToOM8g) . [Twitter](https://twitter.com/marknadal)

RELEASE.md

@@ -0,0 +1,25 @@
+Every push or pull request will
+
+ - run the tests
+
+Every push to master will
+
+ - run the tests
+ - publish the latest docker image to dockerhub
+
+Creating a tag that starts with `v` will
+
+ - create a new github release
+ - publish the release to npm
+ - publish the release to dockerhub
+
+Creating a release from the github web interface will
+
+ - publish the release to npm
+ - publish the release to dockerhub
+
+Creating the release for version `0.2021.001` from the command line works as follows
+
+    git tag v0.2021.001
+    git push --tags
+

SECURITY.md

@@ -0,0 +1,47 @@
+# Security Policy
+
+## Introduction
+
+Security is our top priority. We are committed to ensuring that our project is as secure as possible for everyone who uses it. This document outlines our security policy and procedures for dealing with security issues.
+
+## Supported Versions
+
+We provide security updates for the following versions of our project:
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 0.2020.x| :white_check_mark: |
+| < 0.2020| :x:                |
+
+## Reporting a Vulnerability
+
+If you discover a vulnerability, we would like to know about it so we can take steps to address it as quickly as possible.
+
+### Report Format
+
+When reporting vulnerabilities, please include the following details:
+
+- Description of the vulnerability
+- Steps to reproduce the issue
+- Potential impact if left unaddressed
+- Suggested mitigation or resolution if any
+
+### Response Time
+
+We aim to confirm the receipt of your vulnerability report within 48 hours. Depending on the severity and complexity of the issue, we strive to investigate the issue and provide an initial response within a week.
+
+### Disclosure Policy
+
+If the vulnerability is confirmed, we will work on a fix and plan a release. We ask that you do not publicly disclose the issue until it has been addressed by us.
+
+## Security Practices
+
+We follow industry-standard security practices, including regular audits of the services and features we provide, to maintain the trust of our users.
+
+## Security Updates
+
+We will communicate any security updates through our standard communication channels, including our project's release notes and official website.
+
+## Conclusion
+
+We greatly value the work of security researchers and believe that responsible disclosure of vulnerabilities is a valuable contribution to the security of the Internet. We encourage users to contribute to the security of our project by reporting any security-related issues to us.

app.json

@@ -0,0 +1,18 @@
+{
+  "name": "gun-server",
+  "website": "http://gun.eco/",
+  "repository": "https://github.com/amark/gun",
+  "logo": "https://avatars3.githubusercontent.com/u/8811914",
+  "keywords": ["node", "gun", "gunDB", "database","graph","offline-first"],
+  "description": "Javascript, Offline-First Javascript Graph Database Server Peer",
+  "env": {
+    "NPM_CONFIG_PRODUCTION": {
+      "description": "If you do not want default features, set to \"true\".",
+      "value": "false"
+    },
+    "PEERS": {
+      "description": "Comma-separated list of peer urls to connect to",
+      "required": false
+    }
+  }
+}

as.js

@@ -0,0 +1,239 @@
+;(function(){
+	function as(el, gun, cb, opt){
+		el = $(el);
+		if(gun === as.gui && as.el && as.el.is(el)){ return }
+
+		opt = opt || {};
+		opt.match = opt.match || '{{ ';
+		opt.end = opt.end || ' }}';
+		;(function(){ // experimental
+			function nest(t, s,e, r, i,tmp,u){
+				if(r && !r.length){ return t||'' }
+				if(!t){ return [] }
+				e = e || s;
+				i = t.indexOf(s, i||0);
+				if(0 > i){ return [] }
+				tmp = t.indexOf(e, i+1);
+				if(!r){ return [t.slice(i+s.length, tmp)].concat(nest(t, s,e, r, tmp,tmp,u)) }
+				return t.slice(0,i)+r[0]+nest(t.slice(tmp+e.length), s,e, r.slice(1), 0,tmp,u);
+			}
+
+			/* experimental */
+			function template(tag, attr){
+				var html = (tag = $(tag))[0].outerHTML, sub, tmp;
+				if(html && (0 > html.indexOf(opt.match))){ return }
+				if(!attr){
+					$.each(tag[0].attributes, function(i,v){
+						if(!v){ return }
+						if(!nest(v.value, opt.match, opt.end).length){ return }
+						template(tag, v.name)
+					});
+					if((sub = tag.children()).length){
+						return sub.each(function(){ template(this) });
+					}
+				}
+				var data = [], plate = attr? tag.attr(attr) : tag.html();
+				tmp = nest(plate, opt.match, opt.end);
+				if(!tmp.length){ return }
+				$.each(tmp, function(pos, match){
+					var expr = match.split(' ');
+					var path = (expr[0]).split('.');
+					if(expr = expr.slice(1).join(' ')){
+						expr = new Function("_", "b", "return (_)" + expr);
+					}
+					var val = (expr && expr('')) || '';
+					data.push(val);
+					if(!attr){ tag.text(val) }
+
+					var ref = gun, sup = [], tmp;
+					if(tmp = tag.attr('name')){ sup.push(tmp) }
+					tag.parents("[name]").each(function(){
+						sup.push($(this).attr('name'));
+					});
+					$.each(path = sup.reverse().concat(path), function(i,v){
+						ref = ref.get(v);
+					});
+					ref.on(function(v){
+						v = data[pos] = expr? expr(v) : v;
+						var tmp = nest(plate, opt.match, opt.end, data);
+						if(attr){
+							tag.attr(attr, tmp);
+						} else {
+							tag.text(tmp);
+						}
+					});
+				});
+			}
+			template(el);
+
+		}());
+
+		as.gui = gun;
+		as.el = el;
+		if(el.data('as')){
+			el.html(el.data('as').fresh);
+		} else {
+			el.data('as', {
+				fresh: el.html()
+			})
+		}
+		el.find("[name]").each(function(){
+			if($(this).find("[name]").length){ return }
+			var name = $(this),
+				parents = name.parents("[name]"),
+				path = [],
+				ref = gun;
+
+			path.push(name.attr('name'));
+			parents.each(function(){
+				path.push($(this).attr('name'));
+			});
+			path = path.reverse();
+
+			path.forEach(function(key){
+				if('#' === key){
+					ref = ref.map()
+				} else {
+					ref = ref.get(key);
+				}
+			});
+			
+			var many = path.slice().reverse().indexOf('#'), model;
+			many = (0 < ++many)? many : false;
+			if(many){
+				model = name.closest("[name='#']");
+				model = model.data('model') || model.data('model', {$: model.clone(), on: model.parent(), has: {}}).hide().data('model');
+			} 
+
+			ref.get(function(at){
+				var data = at.put, key = at.get, gui = at.gun || at.$, ui = name, back;
+				if(model){
+					ui = model.has[(gui._).id];
+					if(!ui){
+						back = gui.back(many - 1);
+						ui = model.has[(back._).id];
+						if(!ui){
+							if(!(back._).get){ return }
+							ui = (model.has[(back._).id] = model.$.clone(true).prependTo(model.on));
+						}
+						ui = ui.find("[name='"+key+"']").first();
+						model.has[(gui._).id] = ui;
+					}
+				}
+				ui.data('gun', gui);
+				if(ui.data('was') === data){ return }
+				if(many && ui.is('.sort')){
+					var up = ui.closest("[name='#']");
+					var tmp = as.sort(data, up.parent().children().last());
+					tmp? up.insertAfter(tmp) : up.prependTo(up.parent());
+				}
+				if(as.lock === gui){ return }
+				if(!(data && data instanceof Object)){
+					(ui[0] && u === ui[0].value)? ui.text(data) : ui.val(data);
+				}
+				ui.data('was', data);
+				if(cb){
+					cb(data, key, ui);
+				}
+			});
+		});
+	}
+	as.wait = function(cb, wait, to){
+		return function(a,b,c){
+			var me = as.typing = this;
+			clearTimeout(to);
+			to = setTimeout(function(){
+				cb.call(me, a,b,c);
+				as.typing = me = false;
+			}, wait || 200);
+		}
+	}
+	as.sort = function sort(num, li){ return parseFloat(num) >= parseFloat($(li).find('.sort').text() || -Infinity)? li : sort(num, li.prev()) }
+	$(document).on('keyup', 'input, textarea, [contenteditable]', as.wait(function(){
+		var el = $(this);
+		var data = (el[0] && u === el[0].value)? el.text() : el.val();
+		var g = el.data('gun');
+		if(!g){ return }
+		as.lock = g;
+		g.put(data);
+	}, 99));
+	//$(document).on('submit', 'form', function(e){ e.preventDefault() });
+	var u;
+	window.as = as;
+	$.as = as;
+}());
+
+;(function(){
+	$(document).on('click', 'a, button', function(e){
+		var tmp = $(this).attr('href') || '';
+		if(0 === tmp.indexOf('http')){ return }
+		e.preventDefault();
+		r(tmp);
+	});
+	function r(href){
+		if(!href){ return }
+		if(href[0] == '#'){ href = href.slice(1) }
+		var h = href.split('/')[0];
+		$('.page').hide();
+		$('#' + h).show();
+		if(r.on === h){ return }
+		location.hash = href;
+		(r.page[h] || {on:function(){}}).on();
+		r.on = h;
+		return r;
+	};
+	r.page = function(h, cb){
+		r.page[h] = r.page[h] || {on: cb};
+		return r;
+	}
+	r.render = function(id, model, onto, data){
+		var $data = $(
+			$('#' + id).get(0) ||
+			$('.model').find(model).clone(true).attr('id', id).appendTo(onto)
+		);
+		$.each(data, function(field, val){
+			if($.isPlainObject(val)){ return }
+			$data.find("[name='" + field + "']").val(val).text(val);
+		});
+		return $data;
+	}
+	window.onhashchange = function(){ r(location.hash.slice(1)) };
+	$.as && ($.as.route = r);
+	if(window.as){
+		as.route = r;
+	} else {
+		$.route = r;
+	}
+}());
+
+;$(function(){
+	$('.page').not(':first').hide();
+	$.as.route(location.hash.slice(1));
+	$(JOY.start = JOY.start || function(){ $.as(document, gun, null, JOY.opt) });
+
+	if($('body').attr('peers')){ (console.warn || console.log)('Warning: Please upgrade <body peers=""> to https://github.com/eraeco/joydb#peers !') }
+
+});
+;(function(){ // need to isolate into separate module!
+	var joy = window.JOY = function(){};
+	joy.auth = function(a,b,cb,o){
+		if(!o){ o = cb ; cb = 0 }
+		if(o === true){
+			gun.user().create(a, b);
+			return;
+		}
+		gun.user().auth(a,b, cb,o);
+	}
+
+	var opt = joy.opt = window.CONFIG || {}, peers;
+	$('link[type=peer]').each(function(){ (peers || (peers = [])).push($(this).attr('href')) });
+	!window.gun && (opt.peers = opt.peers || peers || (function(){
+		(console.warn || console.log)('Warning: No peer provided, defaulting to DEMO peer. Do not run in production, or your data will be regularly wiped, reset, or deleted. For more info, check https://github.com/eraeco/joydb#peers !');
+		return ['https://gunjs.herokuapp.com/gun'];
+	}()));
+	window.gun = window.gun || Gun(opt);
+
+	gun.on('auth', function(ack){
+		console.log("Your namespace is publicly available at", ack.soul);
+	});
+}());

axe.js

@@ -0,0 +1,109 @@
+;(function(){
+
+	var sT = setTimeout || {}, u;
+  if(typeof window !== ''+u){ sT.window = window }
+	var AXE = (sT.window||'').AXE || function(){};
+  if(AXE.window = sT.window){ AXE.window.AXE = AXE }
+
+	var Gun = (AXE.window||'').GUN || require('./gun');
+	(Gun.AXE = AXE).GUN = AXE.Gun = Gun;
+
+  //if(!Gun.window){ try{ require('./lib/axe') }catch(e){} }
+  if(!Gun.window){ require('./lib/axe') }
+
+	Gun.on('opt', function(at){ start(at) ; this.to.next(at) }); // make sure to call the "next" middleware adapter.
+
+	function start(root){
+		if(root.axe){ return }
+		var opt = root.opt, peers = opt.peers;
+		if(false === opt.axe){ return }
+		if(!Gun.window){ return } // handled by ^ lib/axe.js
+		var w = Gun.window, lS = w.localStorage || opt.localStorage || {}, loc = w.location || opt.location || {}, nav = w.navigator || opt.navigator || {};
+		var axe = root.axe = {}, tmp, id;
+		var mesh = opt.mesh = opt.mesh || Gun.Mesh(root); // DAM!
+
+		tmp = peers[id = loc.origin + '/gun'] = peers[id] || {};
+		tmp.id = tmp.url = id; tmp.retry = tmp.retry || 0;
+		tmp = peers[id = 'http://localhost:8765/gun'] = peers[id] || {};
+		tmp.id = tmp.url = id; tmp.retry = tmp.retry || 0;
+		Gun.log.once("AXE", "AXE enabled: Trying to find network via (1) local peer (2) last used peers (3) a URL parameter, and last (4) hard coded peers.");
+		Gun.log.once("AXEWarn", "Warning: AXE is in alpha, use only for testing!");
+		var last = lS.peers || ''; if(last){ last += ' ' }
+		last += ((loc.search||'').split('peers=')[1]||'').split('&')[0];
+
+		root.on('bye', function(peer){
+			this.to.next(peer);
+			if(!peer.url){ return } // ignore WebRTC disconnects for now.
+			if(!nav.onLine){ peer.retry = 1 }
+			if(peer.retry){ return }
+			if(axe.fall){ delete axe.fall[peer.url || peer.id] }
+			(function next(){
+				if(!axe.fall){ setTimeout(next, 9); return } // not found yet
+				var fall = Object.keys(axe.fall||''), one = fall[(Math.random()*fall.length) >> 0];
+				if(!fall.length){ lS.peers = ''; one = 'https://gunjs.herokuapp.com/gun' } // out of peers
+				if(peers[one]){ next(); return } // already choose
+				mesh.hi(one);
+			}());
+		});
+
+		root.on('hi', function(peer){ // TEMPORARY! Try to connect all peers.
+			this.to.next(peer);
+			if(!peer.url){ return } // ignore WebRTC disconnects for now.
+			return; // DO NOT COMMIT THIS FEATURE YET! KEEP TESTING NETWORK PERFORMANCE FIRST!
+			(function next(){
+				if(!peer.wire){ return }
+				if(!axe.fall){ setTimeout(next, 9); return } // not found yet
+				var one = (next.fall = next.fall || Object.keys(axe.fall||'')).pop();
+				if(!one){ return }
+				setTimeout(next, 99);
+				mesh.say({dam: 'opt', opt: {peers: one}}, peer);
+			}());
+		});
+
+		function found(text){
+
+			axe.fall = {};
+			((text||'').match(/https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/ig)||[]).forEach(function(url){
+				axe.fall[url] = {url: url, id: url, retry: 0}; // RETRY
+			});
+			
+			return;
+
+			// TODO: Finish porting below? Maybe not.
+
+			Object.keys(last.peers||'').forEach(function(key){
+				tmp = peers[id = key] = peers[id] || {};
+				tmp.id = tmp.url = id;
+			});
+			tmp = peers[id = 'https://guntest.herokuapp.com/gun'] = peers[id] || {};
+			tmp.id = tmp.url = id;
+
+			var mesh = opt.mesh = opt.mesh || Gun.Mesh(root); // DAM!
+			mesh.way = function(msg){
+				if(root.$ === msg.$ || (msg._||'').via){
+					mesh.say(msg, opt.peers);
+					return;
+				}
+				var at = (msg.$||'')._;
+				if(!at){ mesh.say(msg, opt.peers); return }
+				if(msg.get){
+					if(at.axe){ return } // don't ask for it again!
+					at.axe = {};
+				}
+				mesh.say(msg, opt.peers);
+			}
+		}
+
+		if(last){ found(last); return }
+		try{ fetch(((loc.search||'').split('axe=')[1]||'').split('&')[0] || loc.axe || 'https://raw.githubusercontent.com/wiki/amark/gun/volunteer.dht.md').then(function(res){
+	  	return res.text()
+	  }).then(function(text){
+	  	found(lS.peers = text);
+	  }).catch(function(){
+	  	found(); // nothing
+	  })}catch(e){found()}
+	}
+
+	var empty = {}, yes = true;
+  try{ if(typeof module != ''+u){ module.exports = AXE } }catch(e){}
+}());

browser.js

@@ -0,0 +1,4 @@
+// if(!(typeof navigator == "undefined") && navigator.product == "ReactNative"){
+//     require("./lib/mobile.js");
+// }
+module.exports = require('./gun.js');

examples/Main.js

@@ -0,0 +1,217 @@
+import { render } from './iris/js/lib/preact.js';
+import { Router, route } from './iris/js/lib/preact-router.es.js';
+import { createHashHistory } from './iris/js/lib/history.production.min.js';
+import { Component } from './iris/js/lib/preact.js';
+import { Link } from './iris/js/lib/preact.match.js';
+
+import Helpers from './iris/js/Helpers.js';
+import { html } from './iris/js/Helpers.js';
+import QRScanner from './iris/js/QRScanner.js';
+import PeerManager from './iris/js/PeerManager.js';
+import Session from './iris/js/Session.js';
+import { translate as t } from './iris/js/Translation.js';
+
+import Settings from './iris/js/views/Settings.js';
+import LogoutConfirmation from './iris/js/views/LogoutConfirmation.js';
+import Chat from './iris/js/views/Chat.js';
+import Store from './iris/js/views/Store.js';
+import Checkout from './iris/js/views/Checkout.js';
+import Product from './iris/js/views/Product.js';
+import Login from './iris/js/views/Login.js';
+import Profile from './iris/js/views/Profile.js';
+import Group from './iris/js/views/Group.js';
+import Message from './iris/js/views/Message.js';
+import Follows from './iris/js/views/Follows.js';
+import Feed from './iris/js/views/Feed.js';
+import About from './iris/js/views/About.js';
+import Explorer from './iris/js/views/Explorer.js';
+import Contacts from './iris/js/views/Contacts.js';
+import Torrent from './iris/js/views/Torrent.js';
+
+import VideoCall from './iris/js/components/VideoCall.js';
+import Identicon from './iris/js/components/Identicon.js';
+import MediaPlayer from './iris/js/components/MediaPlayer.js';
+import Footer from './iris/js/components/Footer.js';
+import State from './iris/js/State.js';
+import Icons from './iris/js/Icons.js';
+
+const userAgent = navigator.userAgent.toLowerCase();
+const isElectron = (userAgent.indexOf(' electron/') > -1);
+if (!isElectron && ('serviceWorker' in navigator)) {
+  window.addEventListener('load', function() {
+    navigator.serviceWorker.register('iris/serviceworker.js')
+    .catch(function(err) {
+      // registration failed :(
+      console.log('ServiceWorker registration failed: ', err);
+    });
+  });
+}
+
+State.init();
+Session.init({autologin: true});
+PeerManager.init();
+
+Helpers.checkColorScheme();
+
+const APPLICATIONS = [ // TODO: move editable shortcuts to State.local gun
+  {url: '/', text: t('home'), icon: Icons.home},
+  {url: '/feed', text: t('feed'), icon: Icons.feed},
+  {url: '/media', text: t('media'), icon: Icons.play},
+  {url: '/settings', text: t('settings'), icon: Icons.settings},
+  {url: '/store', text: t('store'), icon: Icons.store},
+  {url: '/explorer', text: t('explorer'), icon: Icons.folder},
+  {url: '/chat', text: t('messages'), icon: Icons.chat},
+  // {url: '/store', text: t('store'), icon: Icons.store}, // restore when it works!
+  {},
+  {url: '../stats.html', text: 'Gun node stats'},
+  {url: '../iris/index.html', text: 'Iris', icon: html`<img src="iris/img/icon128.png" width=24/>`},
+  {url: '../infinite-scroll/index.html', text: 'Infinite scroll'},
+  {url: '../chat/index.html', text: 'Chat'},
+  {url: '../game/space.html', text: 'Space'},
+  {},
+  {url: 'https://gun.eco/docs/', text: 'Gun documentation'},
+  {url: 'https://examples.iris.to/components/', text: 'Iris web components'}
+];
+
+const HomeView = () => {
+  return html`
+  <div class="main-view">
+    <div class="centered-container public-messages-view">
+      <h1>Hello, world!</h1>
+      <p>Here you can find sample applications and utilities for <a href="https://github.com/amark/gun">GUN</a>.</p>
+      <p>If you need any help, please feel free to join the GUN community chat: <a href="http://chat.gun.eco">http://chat.gun.eco</a></p>
+      <a href="/explorer" class="msg"><div class="msg-content">
+        <b>Explorer</b>
+        <p>Explore the data saved on the GUN database. Open to the side while using an application and see the data change in real-time.</p>
+      </div></a>
+      <a class="msg" href="game/space.html"><div class="msg-content">
+        <div class="img-container"><img src="iris/img/space-game.jpg"/></div>
+        <b>Space</b>
+        <p>Spaceflight game. Open in 2 or more browser windows.</p>
+      </div></a>
+      <a class="msg" href="/iris/index.html"><div class="msg-content">
+        <div class="img-container"><img src="iris/img/screenshot.png"/></div>
+        <b>Iris</b>
+        <p>Decentralized Twitter/Instagram. Provides modular components that can be reused in other applications (including this one).</p>
+      </div></a>
+      <a native class="msg" href="/chat/index.html"><div class="msg-content">
+        <div class="img-container"><img src="iris/img/gun-chat.jpg"/></div>
+        <b>Chat</b>
+        <p>Shoutbox!</p>
+      </div></a>
+    </div>
+  </div>
+  `;
+};
+
+class MenuView extends Component {
+  componentDidMount() {
+    State.local.get('showMenu').on(showMenu => this.setState({showMenu}));
+  }
+
+  render() {
+    const pub = Session.getPubKey();
+    return html`
+      <div class="application-list ${this.state.showMenu ? 'menu-visible-xs' : ''}">
+        <a href="/profile/${pub}">
+          <span class="icon"><${Identicon} str=${pub} width=40/></span>
+          <span class="text" style="font-size: 1.2em;border:0;margin-left: 7px;"><iris-text user="${pub}" path="profile/name" editable="false"/></span>
+        </a>
+        <br/><br/>
+        ${APPLICATIONS.map(a => {
+          if (a.url) {
+            return html`
+              <a href=${a.url}>
+                <span class="icon">${a.icon || Icons.circle}</span>
+                <span class="text">${a.text}</span>
+              </a>`;
+          } else {
+            return html`<br/><br/>`;
+          }
+        })}
+      </div>
+    `;
+  }
+};
+
+class Main extends Component {
+  constructor() {
+    super();
+    this.showMenu = false;
+  }
+
+  componentDidMount() {
+    State.local.get('loggedIn').on(loggedIn => this.setState({loggedIn}));
+  }
+
+  handleRoute(e) {
+    let activeRoute = e.url;
+    if (!activeRoute && window.location.hash) {
+      return route(window.location.hash.replace('#', '')); // bubblegum fix back navigation
+    }
+    document.title = 'Iris';
+    if (activeRoute && activeRoute.length > 1) { document.title += ' - ' + Helpers.capitalize(activeRoute.replace('/', '')); }
+    State.local.get('activeRoute').put(activeRoute);
+    QRScanner.cleanupScanner();
+  }
+
+  onClickOverlay() {
+    if (this.state.showMenu) {
+      this.setState({showMenu: false});
+    }
+  }
+
+  toggleMenu(show) {
+    this.setState({showMenu: typeof show === 'undefined' ? !this.state.showMenu : show});
+  }
+
+  render() {
+    const content = this.state.loggedIn ? html`
+      <div class="visible-xs-flex" style="border-bottom:var(--sidebar-border-right)">
+        <svg onClick=${() => State.local.get('showMenu').put(this.showMenu = !this.showMenu)} style="padding: 5px;cursor:pointer;" viewBox="0 -53 384 384" width="40px"><path d="m368 154.667969h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m368 32h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/><path d="m368 277.332031h-352c-8.832031 0-16-7.167969-16-16s7.167969-16 16-16h352c8.832031 0 16 7.167969 16 16s-7.167969 16-16 16zm0 0"/></svg>
+      </div>
+      <section class="main" style="flex-direction: row;">
+        <${MenuView}/>
+        <div style="flex: 3; display: flex">
+          <${Router} history=${createHashHistory()} onChange=${e => this.handleRoute(e)}>
+            <${HomeView} path="/"/>
+            <${Feed} path="/feed"/>
+            <${Feed} path="/search/:term?/:type?"/>
+            <${Feed} path="/media" index="media"/>
+            <${Login} path="/login"/>
+            <${Chat} path="/chat/:id?"/>
+            <${Message} path="/post/:hash"/>
+            <${Torrent} path="/torrent/:id"/>
+            <${About} path="/about"/>
+            <${Settings} path="/settings"/>
+            <${LogoutConfirmation} path="/logout"/>
+            <${Profile} path="/profile/:id?" tab="profile"/>
+            <${Profile} path="/replies/:id?" tab="replies"/>
+            <${Profile} path="/likes/:id?" tab="likes"/>
+            <${Profile} path="/media/:id" tab="media"/>
+            <${Group} path="/group/:id?"/>
+            <${Store} path="/store/:store?"/>
+            <${Checkout} path="/checkout/:store?"/>
+            <${Product} path="/product/:product/:store"/>
+            <${Product} path="/product/new" store=Session.getPubKey()/>
+            <${Explorer} path="/explorer/:node"/>
+            <${Explorer} path="/explorer"/>
+            <${Follows} path="/follows/:id"/>
+            <${Follows} followers=${true} path="/followers/:id"/>
+            <${Contacts} path="/contacts"/>
+          </${Router}>
+        </div>
+      </section>
+      <${VideoCall}/>
+    ` : '';
+    return html`
+      <div id="main-content">
+        ${content}
+      </div>
+    `;
+  }
+}
+
+render(html`<${Main}/>`, document.body);
+
+$('body').css('opacity', 1); // use opacity because setting focus on display: none elements fails

examples/angular/.angular-cli.json

@@ -0,0 +1,58 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "project": {
+    "name": "angular"
+  },
+  "apps": [
+    {
+      "root": "src",
+      "outDir": "dist",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.ts",
+      "polyfills": "polyfills.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.app.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
+    }
+  ],
+  "e2e": {
+    "protractor": {
+      "config": "./protractor.conf.js"
+    }
+  },
+  "lint": [
+    {
+      "project": "src/tsconfig.app.json",
+      "exclude": "**/node_modules/**"
+    },
+    {
+      "project": "src/tsconfig.spec.json"
+    },
+    {
+      "project": "e2e/tsconfig.e2e.json"
+    }
+  ],
+  "test": {
+    "karma": {
+      "config": "./karma.conf.js"
+    }
+  },
+  "defaults": {
+    "styleExt": "css",
+    "component": {}
+  }
+}

examples/angular/.editorconfig

@@ -0,0 +1,13 @@
+# Editor configuration, see http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

examples/angular/.gitignore

@@ -0,0 +1,42 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+testem.log
+/typings
+
+# e2e
+/e2e/*.js
+/e2e/*.map
+
+# System Files
+.DS_Store
+Thumbs.db

examples/angular/README.md

@@ -0,0 +1,28 @@
+# Angular
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive/pipe/service/class/module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `-prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+Before running the tests make sure you are serving the app via `ng serve`.
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

examples/angular/e2e/app.e2e-spec.ts

@@ -0,0 +1,14 @@
+import { AngularPage } from './app.po';
+
+describe('angular App', () => {
+  let page: AngularPage;
+
+  beforeEach(() => {
+    page = new AngularPage();
+  });
+
+  it('should display message saying app works', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('app works!');
+  });
+});

examples/angular/e2e/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, element, by } from 'protractor';
+
+export class AngularPage {
+  navigateTo() {
+    return browser.get('/');
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h1')).getText();
+  }
+}

examples/angular/e2e/tsconfig.e2e.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es5",
+    "types":[
+      "jasmine",
+      "node"
+    ]
+  }
+}

examples/angular/example_package.json

@@ -0,0 +1,51 @@
+{
+  "name": "angular",
+  "version": "0.0.0",
+  "license": "MIT",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "^4.1.0",
+    "@angular/compiler": "^4.1.0",
+    "@angular/core": "^4.1.0",
+    "@angular/forms": "^4.1.0",
+    "@angular/http": "^4.1.0",
+    "@angular/platform-browser": "^4.1.0",
+    "@angular/platform-browser-dynamic": "^4.1.0",
+    "@angular/router": "^4.1.0",
+    "core-js": "^2.4.1",
+    "express-http-proxy": "^1.0.1",
+    "gun": "https://github.com/amark/gun.git#master",
+    "ngx-pipes": "^2.0.5",
+    "rxjs": "^5.3.0",
+    "underscore": "^1.8.3",
+    "zone.js": "^0.8.9"
+  },
+  "devDependencies": {
+    "@angular/cli": "1.0.0",
+    "@angular/compiler-cli": "^4.1.0",
+    "@types/jasmine": "2.5.38",
+    "@types/node": "~6.0.60",
+    "@types/underscore": "^1.8.0",
+    "codelyzer": "^2.1.1",
+    "jasmine-core": "^2.6.1",
+    "jasmine-spec-reporter": "^4.0.0",
+    "karma": "^1.6.0",
+    "karma-chrome-launcher": "~2.0.0",
+    "karma-cli": "~1.0.1",
+    "karma-coverage-istanbul-reporter": "^1.2.0",
+    "karma-jasmine": "~1.1.0",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.1.0",
+    "ts-node": "^3.0.2",
+    "tslint": "~4.5.0",
+    "typescript": "^2.3.2"
+  }
+}

examples/angular/karma.conf.js

@@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage-istanbul-reporter'),
+      require('@angular/cli/plugins/karma')
+    ],
+    client:{
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['@angular/cli']
+    },
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
+    },
+    angularCli: {
+      environment: 'dev'
+    },
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'coverage-istanbul']
+              : ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};

examples/angular/protractor.conf.js

@@ -0,0 +1,30 @@
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './e2e/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    'browserName': 'chrome'
+  },
+  directConnect: true,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  beforeLaunch: function() {
+    require('ts-node').register({
+      project: 'e2e/tsconfig.e2e.json'
+    });
+  },
+  onPrepare() {
+    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  }
+};

examples/angular/server.js

@@ -0,0 +1,20 @@
+var port = process.env.OPENSHIFT_NODEJS_PORT || process.env.VCAP_APP_PORT || process.env.PORT || process.argv[2] || 8765;
+var host = process.env.OPENSHIFT_NODEJS_HOST || process.env.VCAP_APP_HOST || process.env.HOST || 'localhost';
+
+var express = require('express');
+var proxy = require('express-http-proxy');
+var http = require('http');
+var app = express();
+var server = http.createServer(app);
+
+var Gun = require('gun');
+var gun = Gun({
+	file: 'data.json',
+	web: server
+});
+
+app.use(Gun.serve);
+app.use(proxy(host + ':4200'));
+server.listen(port);
+
+console.log('Server started on port ' + port + ' with /gun');

examples/angular/src/app/app.component.css

@@ -0,0 +1,7 @@
+html, body { font-size: 14pt; padding: 10px 2.5%;}
+.hide { display: none; }
+form .who { width: 10%; }
+form .what { width: 80%; }
+ul { list-style: none; padding: 0; }
+ul .when {color: #555; font-size: 12pt; float: right; display: none; }
+li:hover .when {display: inline;}

examples/angular/src/app/app.component.html

@@ -0,0 +1,13 @@
+<div>
+
+  <form (ngSubmit)="add()">
+    <input type="text" [(ngModel)]="newTodo" name="newTodo" placeholder="New TODO">
+    <button type="submit" *ngIf="newTodo" [disabled]="newTodo?.trim().length === 0">Add</button>
+  </form>
+  <br />
+  <ul>
+    <li *ngFor="let todo of todos$ | async | pairs" (click)="delete(todo[0])">{{todo[1]}}</li>
+  </ul>
+  <button (click)="sub()" *ngIf="!todosSub">Log in console</button>
+  <button (click)="unsub()" *ngIf="!!todosSub">Stop logging</button>
+</div>

examples/angular/src/app/app.component.spec.ts

@@ -0,0 +1,32 @@
+import { TestBed, async } from '@angular/core/testing';
+
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  }));
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});

examples/angular/src/app/app.component.ts

@@ -0,0 +1,44 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
+import Gun from 'gun/gun';
+
+import { GunDb } from 'app/gun.service';
+import { on$ } from 'app/gun.helper';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent implements OnInit {
+  newTodo = '';
+
+  todos = this.db.gun.get('todos');
+  todos$: Observable<string[]> = on$(this.todos);
+
+  todosSub: Subscription;
+
+  constructor(private db: GunDb) { }
+
+  ngOnInit() { }
+
+  add() {
+    if (this.newTodo) {
+      this.todos.get(Gun.text.random()).put(this.newTodo);
+      this.newTodo = '';
+    }
+  }
+
+  delete(key: string) {
+    this.todos.get(key).put(null);
+  }
+
+  sub() {
+    this.todosSub = this.todos$.subscribe(v => console.log(v));
+  }
+
+  unsub() {
+    this.todosSub.unsubscribe();
+  }
+}

examples/angular/src/app/app.module.ts

@@ -0,0 +1,24 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule, Injectable } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { HttpModule } from '@angular/http';
+import { Observable } from 'rxjs/Observable';
+import { NgPipesModule } from 'ngx-pipes';
+
+import { AppComponent } from './app.component';
+import { GunDb } from 'app/gun.service';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    FormsModule,
+    HttpModule,
+    NgPipesModule
+  ],
+  providers: [GunDb],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

examples/angular/src/app/gun.helper.ts

@@ -0,0 +1,30 @@
+import { Observable } from 'rxjs/Observable';
+import { Gun } from 'gun/gun';
+import { pick } from 'underscore';
+
+export function on$(node, cleanup = true): Observable<any> {
+    return Observable.fromEventPattern(
+        h => {
+            // there is no way to off() an on() until at least one value is triggered
+            // so that we can access the event listener to off() it
+            const signal = { stop: false };
+            node.on((data, key, at, ev) => {
+                if (signal.stop) {
+                    ev.off();
+                } else {
+                    // modifying data directly does not seem to work...
+                    h(cleanup ? pick(data, (v, k, o) => v !== null && k !== '_') : data);
+                }
+            });
+            return signal;
+        },
+        (h, signal) => { signal.stop = true; }
+    );
+}
+
+export function val$(node): Observable<any> {
+    return new Observable(o => node.val(v => {
+        o.next(v);
+        o.complete();
+    }));
+}

examples/angular/src/app/gun.service.ts

@@ -0,0 +1,7 @@
+import { NgModule, Injectable } from '@angular/core';
+import Gun from 'gun/gun';
+
+@Injectable()
+export class GunDb {
+    readonly gun = Gun(location.origin + '/gun');
+}

examples/angular/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

examples/angular/src/environments/environment.ts

@@ -0,0 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `.angular-cli.json`.
+
+export const environment = {
+  production: false
+};

examples/angular/src/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Angular</title>
+  <base href="/">
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root>Loading...</app-root>
+</body>
+</html>

examples/angular/src/main.ts

@@ -0,0 +1,16 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+import 'rxjs/add/operator/startWith';
+import 'rxjs/add/operator/map';
+
+import 'rxjs/add/observable/fromEventPattern';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule);

examples/angular/src/polyfills.ts

@@ -0,0 +1,68 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/set';
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/** IE10 and IE11 requires the following to support `@angular/animation`. */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.

examples/angular/src/styles.css

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

examples/angular/src/test.ts

@@ -0,0 +1,32 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/long-stack-trace-zone';
+import 'zone.js/dist/proxy.js';
+import 'zone.js/dist/sync-test';
+import 'zone.js/dist/jasmine-patch';
+import 'zone.js/dist/async-test';
+import 'zone.js/dist/fake-async-test';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+// Unfortunately there's no typing for the `__karma__` variable. Just declare it as any.
+declare var __karma__: any;
+declare var require: any;
+
+// Prevent Karma from running prematurely.
+__karma__.loaded = function () {};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
+// Finally, start Karma to run the tests.
+__karma__.start();

examples/angular/src/tsconfig.app.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "module": "es2015",
+    "baseUrl": "",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts"
+  ]
+}

examples/angular/src/tsconfig.spec.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/spec",
+    "module": "commonjs",
+    "target": "es5",
+    "baseUrl": "",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

examples/angular/src/typings.d.ts

@@ -0,0 +1,5 @@
+/* SystemJS module definition */
+declare var module: NodeModule;
+interface NodeModule {
+  id: string;
+}

examples/angular/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "baseUrl": "src",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2016",
+      "dom"
+    ]
+  }
+}

examples/angular/tslint.json

@@ -0,0 +1,116 @@
+{
+  "rulesDirectory": [
+    "node_modules/codelyzer"
+  ],
+  "rules": {
+    "callable-types": true,
+    "class-name": true,
+    "comment-format": [
+      true,
+      "check-space"
+    ],
+    "curly": true,
+    "eofline": true,
+    "forin": true,
+    "import-blacklist": [true, "rxjs"],
+    "import-spacing": true,
+    "indent": [
+      true,
+      "spaces"
+    ],
+    "interface-over-type-literal": true,
+    "label-position": true,
+    "max-line-length": [
+      true,
+      140
+    ],
+    "member-access": false,
+    "member-ordering": [
+      true,
+      "static-before-instance",
+      "variables-before-functions"
+    ],
+    "no-arg": true,
+    "no-bitwise": true,
+    "no-console": [
+      true,
+      "debug",
+      "info",
+      "time",
+      "timeEnd",
+      "trace"
+    ],
+    "no-construct": true,
+    "no-debugger": true,
+    "no-duplicate-variable": true,
+    "no-empty": false,
+    "no-empty-interface": true,
+    "no-eval": true,
+    "no-inferrable-types": [true, "ignore-params"],
+    "no-shadowed-variable": true,
+    "no-string-literal": false,
+    "no-string-throw": true,
+    "no-switch-case-fall-through": true,
+    "no-trailing-whitespace": true,
+    "no-unused-expression": true,
+    "no-use-before-declare": true,
+    "no-var-keyword": true,
+    "object-literal-sort-keys": false,
+    "one-line": [
+      true,
+      "check-open-brace",
+      "check-catch",
+      "check-else",
+      "check-whitespace"
+    ],
+    "prefer-const": true,
+    "quotemark": [
+      true,
+      "single"
+    ],
+    "radix": true,
+    "semicolon": [
+      "always"
+    ],
+    "triple-equals": [
+      true,
+      "allow-null-check"
+    ],
+    "typedef-whitespace": [
+      true,
+      {
+        "call-signature": "nospace",
+        "index-signature": "nospace",
+        "parameter": "nospace",
+        "property-declaration": "nospace",
+        "variable-declaration": "nospace"
+      }
+    ],
+    "typeof-compare": true,
+    "unified-signatures": true,
+    "variable-name": false,
+    "whitespace": [
+      true,
+      "check-branch",
+      "check-decl",
+      "check-operator",
+      "check-separator",
+      "check-type"
+    ],
+
+    "directive-selector": [true, "attribute", "app", "camelCase"],
+    "component-selector": [true, "element", "app", "kebab-case"],
+    "use-input-property-decorator": true,
+    "use-output-property-decorator": true,
+    "use-host-property-decorator": true,
+    "no-input-rename": true,
+    "no-output-rename": true,
+    "use-life-cycle-interface": true,
+    "use-pipe-transform-interface": true,
+    "component-class-suffix": true,
+    "directive-class-suffix": true,
+    "no-access-missing-member": true,
+    "templates-use-public": true,
+    "invoke-injectable": true
+  }
+}

examples/axe.html

@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
+  <title>Testing AXE</title>
+</head>
+
+<body>
+<h3 id="pid"></h3>
+  <script src="../gun.js"></script>
+  <script src="../axe.js"></script>
+  <script src="../lib/radix.js"></script>
+  <script src="../lib/webrtc.js"></script>
+  <!-- <script src="../sea.js"></script> -->
+  <script>
+  var pid = location.hash.slice(1);
+
+  var opt = ({
+    peers: [`${location.origin}/gun`]
+  });
+
+  if (pid) { opt.pid = pid; }
+
+  Gun.on('opt', function(ctx) {
+    this.to.next(ctx);
+    ctx.on('hi', function(opt) {
+//       console.log('HI!! PEER', new Date(), opt.pid);
+        setTimeout(function() {
+            document.getElementById('pid').innerHTML = gun._.opt.pid;
+        });
+    });
+//     if (pid) {
+//     ctx.on('out', function(msg) {
+//       msg.pid = pid;
+//       this.to.next(msg);
+//     });
+//     }
+  });
+
+  var gun = Gun(opt);
+  //var user = gun.user();
+  </script>
+</body>
+</html>

examples/basic/chat.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<ul id='list'></ul>
+<form id='form'>
+  <input id='who' placeholder='name'>
+  <input id='what' placeholder='say'>
+  <input type='submit' value='send'>
+</form>
+<script src="../../../gun/gun.js"></script>
+<script src="../../../gun/axe.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/emojione@4.0.0/lib/js/emojione.min.js"></script>
+<script>
+gun = GUN(), chat = gun.get("note" + location.hash.replace('#','/')), view = document;
+form.onsubmit = (eve) => { chat.set(who.value+': '+what.value), eve.preventDefault(what.value = "") }
+chat.map().on(function show(data, id){
+  (view.line = view.getElementById(id) || view.createElement("li")).id = id;
+  list.appendChild(view.line).innerText = emojione.shortnameToUnicode(data);
+  window.scroll(0, list.offsetHeight);
+  (list.beep = new SpeechSynthesisUtterance()).text = "new";
+  list.beep.rate = 10, list.beep.pitch = 2, window.speechSynthesis.speak(list.beep);
+});
+</script>

examples/basic/emoji.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<p>Moved to <a href="./chat.html">./chat.html</a>!</p>

examples/basic/meet.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+
+<center>must press play or unmute on new videos to accept meeting</center>
+<center id="videos">
+<video id="me" width="100%" controls autoplay playsinline muted></video>
+</center>
+<center>Stream <select id="select"><option id="from">from</option></select></center>
+
+<script src="../jquery.js"></script>
+<script src="../../../gun/gun.js"></script>
+<script src="../../../gun/sea.js"></script>
+<script src="../../../gun/lib/webrtc.js"></script>
+
+<script>;(async function(){
+streams = {}, gun = Gun(location.origin + '/gun'); //gun = GUN();
+mesh = gun.back('opt.mesh');
+
+(await (me.stream = navigator.mediaDevices).enumerateDevices()).forEach((device,i) => {
+  if('videoinput' !== device.kind){ return }
+  var opt = $(from).clone().prependTo('select').get(0);
+  $(opt).text(opt.id = device.label || 'Camera '+i);
+  opt.value = device.deviceId;
+});
+
+$('select').on('change', async eve => { $(from).text('Off'); // update label
+  if('Off' == select.value){ return me.srcObject.getTracks()[0].stop() }
+  mesh.hi(me.srcObject = await me.stream.getUserMedia({ audio: true,
+    video: (select.value && {deviceId: {exact: select.value}}) || {facingMode: "environment"}
+  }));
+});
+
+gun.on('rtc', async function(eve){ var ui, src;
+  console.log("?RTC?", eve.peer && eve.peer.connectionState, eve);
+  if(!(src = eve.streams)){ return }
+  ui = $('#v'+(src=src[0]).id).get(0) || $(me).clone().attr('id', 'v'+src.id).prependTo('#videos').get(0); // reuse or create video element
+  ui.srcObject = src;
+});
+}());</script>

examples/basic/note.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<style>html, body, textarea { width: 100%; height: 100%; padding: 0; margin: 0; }</style>
+<textarea id="view" placeholder="write here..."></textarea>
+<script src="../../../gun/gun.js"></script><script>
+	gun = GUN(location.origin + '/gun');
+	note = gun.get('note').get(location.hash.replace('#','')||1);
+	view.oninput = () => { note.put(view.value) };
+	note.on((data) => { view.value = data });
+</script>

examples/basic/paste.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<p>Moved to <a href="./note.html">./note.html</a>!</p>

examples/basic/poll.html

@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+
+	<script src="../jquery.js"></script>
+	<script src="../../../gun/gun.js"></script>
+	<script src="../../../gun/sea.js"></script>
+	<!-- script src="../../../gun/axe.js"></script -->
+	<script> // main init!
+	var app = {
+		view: $, // replace with not jquery!
+		data: GUN('http://localhost:8765/gun'), // peer-to-peer database!
+	};
+	app.user = app.data.user().recall({sessionStorage: true});
+	</script>
+
+</head>
+<body>
+
+<div id="login" class="center pad">
+	<style>
+	#login input {
+		max-width: 6em;
+	}
+	</style>
+	<form id="sign" onsubmit="app.login(event)">
+	  <input id="alias" placeholder="username" class="jot rim">
+	  <input id="pass" type="password" placeholder="passphrase" class="jot rim">
+	  <input id="in" type="submit" value="sign in" class="green whitet act gap sap rim">
+	  <input id="up" type="button" value="sign up" onclick="app.register()" class="act gap sap rim">
+	</form>
+	<script>
+	app.login = function(eve){
+		if(app.error(eve)){ return }
+	  app.data.user().auth(
+	  	app.view('#alias').val(),
+	  	app.view('#pass').val(),
+	  	app.error
+	  );
+	};
+
+	app.register = function(eve){
+	  app.data.user().create(
+	  	app.view('#alias').val(),
+	  	app.view('#pass').val(),
+	  	app.login
+	  );
+	};
+
+	app.data.on('auth', function(eve){
+	  app.view('#sign').hide(); // hide login form upon logging in.
+	});
+	</script>
+</div>
+
+<div id="poll" class="pad">
+	<style>
+	#poll {
+		display: flex;
+		flex-wrap: wrap;
+	}
+	#poll div {
+		margin: 1%;
+		width: 100%;
+	}
+	</style>
+	<script>
+	(window.onhashchange = async function(){
+		app.poll = app.data.get(location.hash.slice(1));
+		app.poll.map().on(function(data, id){
+			app.render(id = 'p'+String.hash(id), '.q', '#poll', data).css({order: data.how}).data('as',{$:this});
+			console.log("poll?", id, data);
+		});
+	})();
+	app.render = function(id, model, onto, data){
+		var ui = $(
+			$('#'+id).get(0) ||
+			$('.model').find(model).clone(true).attr('id', id).appendTo(onto)
+		);
+		$.each(data, function(field, val){
+			if($.isPlainObject(val)){ return }
+			ui.find("[name='" + field + "']").val(val).text(val);
+		});
+		return ui;
+	}
+	</script>
+	<div class="model">
+		<div class="q">
+			<span name="what"></span>
+		</div>
+	</div>
+</div>
+
+<div id="make" class="pad">
+	<style>
+	#make #add {
+		border-radius: 100%;
+    width: 2em;
+    height: 2em;
+    line-height: 0em;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+	}
+	</style>
+	<button id="add" onclick="app.add()" class="green whitet act">+</button>
+	<span class="hint">add new title, text, question...</span>
+	<script>
+	app.add = async function(){
+		if(app.error(app.user)){ return }
+		var tmp = await (app.poll = app.poll || app.data.get(location.hash.slice(1)));
+		if(!tmp){ app.poll = app.user.get('poll').set({}) }
+		app.poll.set({how: tmp = Object.keys(tmp||'').length || 1, what: "Question " + tmp });
+		if(!location.hash){ location.hash = (await app.poll)._['#'] }
+	}
+</script>
+</div>
+
+<span id="error">
+	<span id="err"></span>
+	<script>
+	app.error = function(eve){
+		app.view('#err').text('').hide();
+		if(!eve){ return }
+		if(eve.preventDefault){
+			eve.preventDefault();
+			return;
+		}
+		if(eve._ && !eve.is){ eve = {err: "Not signed in!"} }
+		if(!eve.err){ return }
+		app.view('#err').text(eve.err).show();
+		return true;
+	}
+	</script>
+</span>
+
+<style>
+#error { position: fixed; top: 0; width: 100%; text-align: center; background: white; }
+</style>
+<link rel="stylesheet" href="../style.css"/>
+<style>
+@import url('https://fonts.googleapis.com/css?family=Oxygen');
+html, body { font-family: "Oxygen", sans-serif; }
+</style>
+</body>
+</html>

examples/basic/post.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+
+<h1>Posts</h1>
+
+<form id="sign">
+  <input id="alias" placeholder="username">
+  <input id="pass" type="password" placeholder="passphrase">
+  <input id="in" type="submit" value="sign in">
+  <input id="up" type="button" value="sign up">
+</form>
+
+<form id="said">
+  <input id="say" placeholder="write here...">
+  <input id="speak" type="submit" value="say">
+</form>
+
+<ul></ul>
+
+<script src="../jquery.js"></script>
+<script src="../../../gun/gun.js"></script>
+<script src="../../../gun/sea.js"></script>
+<script src="../../../gun/axe.js"></script>
+
+<script>
+gun = GUN(), user = gun.user().recall({sessionStorage: true});
+
+$('#sign').on('submit', login);
+$('#up').on('click', () => { user.create($('#alias').val(), $('#pass').val(), login) });
+function login(eve){
+  eve.preventDefault();
+  user.auth($('#alias').val(), $('#pass').val());
+};
+
+gun.on('auth', () => { $('#sign').hide(), user.get('said').map().on(show) });
+function show(data, id){
+  return ($('#' + id).get(0) || $('<li>').attr('id', id).prependTo('ul')).text(data);
+};
+
+$('#said').on('submit', (eve) => {
+  eve.preventDefault();
+  if(!user.is){ return }
+  user.get('said').set($('#say').val());
+  $('#say').val("");
+});
+</script>

examples/basic/private.html

@@ -0,0 +1,235 @@
+<!DOCTYPE html>
+<style>
+  html, body {
+    background: rgb(245, 245, 245);
+    margin: 0;
+    padding: 0;
+  }
+  div {
+    position: relative;
+    overflow: hidden;
+  }
+  #top {
+    background: #283e4a;
+    height: 52px;
+    width: 100%;
+  }
+  .box {
+    border-radius: 3px;
+    box-shadow: 0px 0px 3px #777;
+    background: white;
+    max-width: 36em;
+    margin: 0 auto;
+    min-height: 10em;
+    margin-bottom: 0.5em;
+  }
+  .color {
+    background: #2977b5;
+    height: 7em;
+    width: 100%;
+  }
+  .pad {
+    margin: 1em;
+  }
+  .none { display: none; }
+  input {
+    font-size: 1em;
+    margin: 0.1em;
+  }
+</style>
+<div id="top">
+  <center>
+    <input id="search" placeholder="search by pub or DID">
+  </center>
+</div>
+
+<div class="box">
+  <div class="color"></div>
+  <div class="pad">
+    <form id="sign">
+      <h1>Login</h1>
+      <input id="alias" placeholder="username">
+      <input id="pass" type="password" placeholder="passphrase">
+      <input id="in" type="submit" value="sign in">
+      <input id="up" type="button" value="sign up">
+    </form>
+
+
+    <form id="profile" class="none">
+      <h1>Profile</h1>
+      <p>Data is privately encrypted by default. "+" to grant access, "x" to revoke access.</p>
+      <input id="name" placeholder="name"> <button>+</button><br/>
+      <input id="born" placeholder="born"> <button>+</button><br/>
+      <input id="edu" placeholder="education"> <button>+</button><br/>
+      <input id="skills" placeholder="skills"> <button>+</button><br/>
+    </form>
+  </div>
+</div>
+
+<div class="box"><div class="pad">
+  Public Key: <input id="pub">
+</div></div>
+
+<script src="../jquery.js"></script>
+<script src="../../../gun/gun.js"></script>
+<script src="../../../gun/sea.js"></script>
+
+<script>
+
+// extend SEA functions to base64 encode encrypted data
+// workaround for https://github.com/amark/gun/issues/783
+
+(() => {
+  const _encrypt = SEA.encrypt;
+  SEA.encrypt = function(...args) {
+    return _encrypt.apply(this, args).then(enc => btoa(JSON.stringify(enc)));
+  }
+
+  const _decrypt = SEA.decrypt;
+  SEA.decrypt = function(data, ...args) {
+    try     { data = JSON.parse(atob(data)); }
+    finally { return _decrypt.apply(this, [data, ...args]); }
+  }
+})();
+
+// override User functions to fix several issues
+// see https://github.com/amark/gun/issues/808
+
+SEA.Gun.User.prototype.grant = function grant(to, cb) {
+  const gun  = this;       const user = gun.back(-1).user();
+  const pair = user._.sea; let   path = '';
+
+  gun.back(at => { if (at.has) { path += at.get; } });
+
+  (async () => {
+    let enc, sec;
+
+    if (sec = await user.get('trust').get(pair.pub).get(path).then()) {
+      sec = await SEA.decrypt(sec, pair);
+
+    } else {
+      sec = SEA.random(24).toString();
+      enc = await SEA.encrypt(sec, pair);
+
+      user.get('trust').get(pair.pub).get(path).put(enc);
+    }
+
+    let pub  = to.get('pub') .then();
+    let epub = to.get('epub').then();
+
+    pub = await pub; epub = await epub;
+
+    const dh = await SEA.secret (epub, pair);
+    enc      = await SEA.encrypt(sec,  dh);
+
+    // if pub is not already in trust, first put an empty node
+    // workaround for https://github.com/amark/gun/issues/844
+
+    if (!await user.get('trust').get(pub).then()) {
+      await user.get('trust').get(pub).get(path).put({}).then();
+    }
+
+    user.get('trust').get(pub).get(path).put(enc, cb);
+  })();
+
+  return gun;
+}
+
+SEA.Gun.User.prototype.secret = function(data, cb) {
+  const gun  = this;       const user = gun.back(-1).user();
+  const pair = user._.sea; let   path = '';
+
+  gun.back(at => { if (at.has) { path += at.get; } });
+
+  (async () => {
+    let enc, sec;
+
+    if (sec = await user.get('trust').get(pair.pub).get(path).then()) {
+      sec = await SEA.decrypt(sec, pair);
+
+    } else {
+      sec = SEA.random(24).toString();
+      enc = await SEA.encrypt(sec, pair);
+
+      user.get('trust').get(pair.pub).get(path).put(enc);
+    }
+
+    enc = await SEA.encrypt(data, sec);
+    gun.put(enc, cb);
+  })();
+
+  return gun;
+}
+
+var gun = Gun('http://localhost:8765/gun');
+var user = gun.user();
+var LI = {};
+
+user.recall({sessionStorage: true});
+
+$('#up').on('click', function(e){
+	user.create($('#alias').val(), $('#pass').val());
+});
+
+$('#sign').on('submit', function(e){
+	e.preventDefault();
+	user.auth($('#alias').val(), $('#pass').val());
+});
+
+gun.on('auth', function(){
+  $('#sign').hide();
+	$('#profile').show();
+  var pub = user._.sea.pub;
+  $('#pub').val(pub);
+  return;
+  $("#search").val(pub).trigger('blur');
+});
+
+$('#profile input').on('keyup', function(e){
+  if(!user.is){ return }
+  var id = LI.busy = $(this).attr('id');
+  user.get('profile').get(id).secret($(this).val());
+}).on('blur', function(){ LI.busy = false })
+
+$('#profile button').on('click', async function(e){
+  e.preventDefault();
+	if(!user.is){ return }
+  var b = $(this);
+  var id = b.prev().attr('id');
+  var pub = prompt("What is the Public Key or DID you want to give read access to?");
+  var to = gun.user(pub);
+  var who = await to.get('alias').then();
+  if(!confirm("You want to give access to " + who + "?")){ return }
+  user.get('profile').get(id).grant(to);
+});
+
+$('#search').on('blur', function(e){
+  var s = LI.search = $(this).val();
+  var find = gun.user(s);
+  find.get('profile').on(function(data, key, at, ev){
+    if(s !== LI.search){
+      ev.off();
+      return;
+    }
+
+    Gun.node.is(data, async (enc, id) => {
+      if (id === LI.busy) { return; }
+
+      const pair = user._.sea;
+      let key, val;
+
+      if (key =
+        await find.get('trust').get(pair.pub).get(id + 'profile').then()) {
+        const mix = await Gun.SEA.secret(await find.get('epub').then(), pair);
+
+        key = await Gun.SEA.decrypt(key, mix);
+        val = await Gun.SEA.decrypt(enc, key);
+
+        // decode encrypted data to show 'SEA{...}'
+      } else { val = JSON.parse(atob(enc)); }
+
+      $('#' + id).val(val);
+    });
+  });
+});
+</script>

examples/basic/schedule.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
+  <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
+</head>
+<body>
+  
+<h1><button id="left">&larr;</button> <span id="date"></span> Schedule <button id="right">&rarr;</button></h1>
+
+<form id="add">
+  <style>input[type="number"]{ width: 4em; }</style>
+  <input id="what" placeholder="What?">
+  <input id="where" placeholder="Where?">
+  <input type="number" id="hour"><script>hour.value = new Date().getHours() % 12 || 12</script> :
+  <input type="number" id="min" value="0">
+  <select id="ampm">
+    <option value="">am</option>
+    <option value="1">pm</option>
+    <script>ampm.children[new Date().getHours() < 12? 0 : 1].selected='selected'</script>
+  </select>
+  <input id="id" type="hidden">
+  <input id="go" type="submit" value="add">
+  <div id="err"></div>
+</form>
+
+<style>
+  .none { display: none; }
+  p, ul, li { list-style-type: none; margin: 0; padding: 0; }
+</style>
+
+<ul></ul>
+
+<div class="model none">
+  <li>
+    <b class="when"></b>
+    <span class="what"></span>
+    <u class="where"></u>
+    <span class="sort none">0</span>
+    <button class="edit"><</button>
+  </li>
+</div>
+
+<script src="../jquery.js"></script>
+<script src="../../../gun/gun.js"></script>
+<script src="../../../gun/nts.js"></script>
+<script src="../../../gun/lib/webrtc.js"></script>
+
+<script>
+var name = 'schedule/' + location.hash.slice(1);
+var gun = Gun(location.origin + '/gun');
+//var gun = Gun('http://localhost:8765/gun');
+//var gun = Gun();
+
+$('#add').on('submit', function(event){
+  event.preventDefault();
+  event = {};
+  if(!schedule.on){ return err.innerText = "No date!" }
+  event.when = new Date(schedule.on.getFullYear(), schedule.on.getMonth(), schedule.on.getDate(), hour.value % 12 + (ampm.value? 12 : 0), min.value).getTime();
+  if(!(event.what = what.value)){ return err.innerText = "No description!" }
+  if(!(event.where = where.value)){ return err.innerText = "No location!" }
+  var day = gun.get(name+now(event.when));
+  day.get(id.value || String.random(9)).put(event);
+  what.value = where.value = id.value = err.innerText = '';
+  go.value = 'add';
+  schedule(event.when);
+});
+
+function schedule(ms){
+  var day = new Date(ms);
+  if(schedule.on && schedule.on.toLocaleDateString() === day.toLocaleDateString()){ return } schedule.on = day;
+  $('#date').text(day.getFullYear()+' '+ day.toString().split(' ')[1] +' '+day.getDate());
+  day = gun.get(name+now(ms));
+  $('ul').empty();
+  day.map().on(UI);
+}
+schedule(+new Date());
+
+$('#left').on('click', function(){ schedule(+new Date(schedule.on.getFullYear(), schedule.on.getMonth(), schedule.on.getDate() - 1)) });
+$('#right').on('click', function(){ schedule(+new Date(schedule.on.getFullYear(), schedule.on.getMonth(), schedule.on.getDate() + 1)) });
+
+function UI(event, id){
+  if(!event){ return }
+  var when = new Date(event.when);
+  if(schedule.on && when.toLocaleDateString() !== schedule.on.toLocaleDateString()){ return }
+  var ul = $('ul')
+  var li = $("#cal-" + id)[0]; // grab if exists
+  if(!li){
+    li = $('.model li').clone(true) // else create it
+      .attr('id', 'cal-' + id);
+  } 
+  li = (UI.last = sort(event.when, ul.children('li').last())[0])? $(li).insertAfter(UI.last) : $(li).prependTo(ul);
+  li.find('.what').text(event.what);
+  li.find('.where').text(event.where);
+  li.find('.sort').text(event.when);
+  li.find('.edit').val(id);
+
+  var time = when.toLocaleTimeString();
+  li.find('.when').text(time.split(':').slice(0,2).join(':') + time.slice(-2));
+};
+
+$(document).on('click', '.edit', function(){
+  go.value = 'update';
+  id.value = this.value;
+  what.value = $(this).parent().find('.what').text();
+  where.value = $(this).parent().find('.where').text();
+  var when = new Date(parseFloat($(this).parent().find('.sort').text()));
+  hour.value = when.getHours() % 12 || 12;
+  min.value = when.getMinutes();
+  ampm.value = when.getHours() < 12? '' : 1;
+  what.focus();
+});
+
+function now(t){
+  return new Date(t || Gun.state()).toLocaleDateString().split('/').reverse().join('/')
+}
+
+function sort(num, li){ return parseFloat(num) >= parseFloat($(li).find('.sort').text() || -Infinity)? li : sort(num, li.prev()) }
+</script>
+</body>
+</html>

examples/basic/screen.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+
+<video id="video" width="100%"></video>
+<center>
+  <button id="record">Record</button>
+  <button id="play">Play</button>
+</center>
+
+<script src="../jquery.js"></script>
+<script src="../../../gun/gun.js"></script>
+
+<script>
+var gun = Gun(location.origin + '/gun');
+var record = {recorder: null, recording: false};
+
+$('#record').on('click', ()=>{
+  if(!record.ing){ return record.stream() }
+  $('#record').text("Record");
+  if(record.ing.stop){ record.ing.stop() }
+  record.ing = false;
+})
+
+record.stream = function(){
+  navigator.mediaDevices.getDisplayMedia({ video: true }).then(stream => {
+    var chunks = []; // we have a stream, we can record it
+    record.ing = new MediaRecorder(stream);
+    record.ing.ondataavailable = eve => chunks.push(eve.data);
+    record.ing.onstop = eve => record.save(new Blob(chunks));
+    record.ing.start()
+    $('#record').text("End");
+  }, err => { console.log(err) });
+}
+
+record.save = function(data){
+  record.file = record.file || new FileReader();
+  record.file.readAsDataURL(data); 
+  record.file.onloadend = function(){
+    var b64 = record.file.result;
+    b64 = "data:video/webm" + b64.slice(b64.indexOf(';'));
+    gun.get('test').get('screen').put(b64);
+  }
+}
+
+$('#play').on('click', ()=>{
+  if(record.playing){
+    $('#play').text("Play")
+    $('#video').get(0).stop();
+    record.playing = false;
+    return;
+  }
+  $('#play').text("Stop");
+  record.playing = true;
+  gun.get('test').get('screen').once((data)=>{
+    if(!data){ return }
+    $('#video').get(0).src = data;
+    $('#video').get(0).play()
+  })
+})
+</script>

examples/basic/stream.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+
+<center>
+  <img id="img" width="100%"><br/>
+  Stream <select id="select"><option id="from">from</option></select>
+  add <input id="pass" placeholder="password" type="password">
+  resolution <input id="res" value="240" step="32" max="1080" type="number" style="width:3em;">
+  or <input id="upload" type="file">
+</center>
+<video id="video" width="100%" controls autoplay style="display: none;"></video>
+<canvas id="canvas" width="0" style="display: none;"></canvas>
+
+<script src="../jquery.js"></script>
+<script src="../../../gun/gun.js"></script>
+<script src="../../../gun/sea.js"></script>
+<script src="../../../gun/lib/webrtc.js"></script>
+
+<script>;(async function(){
+gun = Gun(location.origin + '/gun'); //gun = GUN();
+
+stream = canvas.getContext('2d'), stream.from = navigator.mediaDevices;
+
+(await stream.from.enumerateDevices()).forEach((device,i) => {
+  if('videoinput' !== device.kind){ return }
+  var opt = $(from).clone().prependTo('select').get(0);
+  $(opt).text(opt.id = device.label || 'Camera '+i);
+  opt.value = device.deviceId;
+});
+
+$('select').on('change', async eve => { $(from).text('Off'); // update label
+  if('Off' == select.value){ return video.srcObject.getTracks()[0].stop() }
+  video.srcObject = await stream.from.getUserMedia({ audio: false,
+    video: (select.value && {deviceId: {exact: select.value}}) || {facingMode: "environment"}
+  });
+});
+$('#upload').on('change', async eve => { console.log("Check ./upload.html") })
+
+setInterval(async tmp => {
+  if(!(video.srcObject||'').active){ return }
+  var size = parseInt(res.value);
+  stream.drawImage(video, 0,0,
+    canvas.width = size || video.videoWidth * 0.1,
+    canvas.height = (size * (video.videoHeight/video.videoWidth)) || video.videoHeight * 0.1
+  );
+  var b64 = canvas.toDataURL('image/jpeg');
+  if(pass.value){ b64 = await SEA.encrypt(b64, pass.value) }
+  gun.get('test').get('video').put(b64);
+}, 99);
+
+gun.get('test').get('video').on(async data => {
+  if(pass.value){ data = await SEA.decrypt(data, pass.value) }
+  img.src = data; // Beware: Some browsers memory leak fast src updates.
+});
+
+// === AUDIO STREAMING WITH FADE-IN/OUT ===
+const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+const mic = await stream.from.getUserMedia({ audio: true });
+const src = audioCtx.createMediaStreamSource(mic);
+const proc = audioCtx.createScriptProcessor(2048, 1, 1);
+
+src.connect(proc);
+proc.connect(audioCtx.destination);
+
+proc.onaudioprocess = async e => {
+  const input = e.inputBuffer.getChannelData(0);
+  const output = new Float32Array(input.length);
+  const fade = 128;
+
+  for (let i = 0; i < fade; i++) {
+    output[i] = input[i] * (i / fade); // fade in
+  }
+  for (let i = fade; i < input.length - fade; i++) {
+    output[i] = input[i]; // middle
+  }
+  for (let i = input.length - fade; i < input.length; i++) {
+    output[i] = input[i] * ((input.length - i) / fade); // fade out
+  }
+
+  const int16 = new Int16Array(output.length);
+  for (let i = 0; i < output.length; i++) {
+    int16[i] = Math.max(-32768, Math.min(32767, output[i] * 32768));
+  }
+
+  let b64 = btoa(String.fromCharCode(...new Uint8Array(int16.buffer)));
+  if(pass.value){ b64 = await SEA.encrypt(b64, pass.value) }
+  gun.get('test').get('audio').put(b64);
+};
+
+gun.get('test').get('audio').on(async data => {
+  if(!data) return;
+  if(pass.value){ data = await SEA.decrypt(data, pass.value) }
+  const bin = atob(data);
+  const bytes = new Uint8Array(bin.length);
+  for(let i=0; i<bin.length; i++){ bytes[i] = bin.charCodeAt(i) }
+  const buf = audioCtx.createBuffer(1, bytes.length / 2, 44100);
+  const chan = buf.getChannelData(0);
+  for(let i=0; i<chan.length; i++){
+    const s = (bytes[i*2+1] << 8) | bytes[i*2];
+    chan[i] = (s > 32767 ? s - 65536 : s) / 32768;
+  }
+  const player = audioCtx.createBufferSource();
+  player.buffer = buf;
+  player.connect(audioCtx.destination);
+  player.start();
+});
+
+}());</script>

examples/basic/tables.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+
+<h1>Tables</h1>
+
+<form id="sign">
+  <input id="alias" placeholder="username">
+  <input id="pass" type="password" placeholder="passphrase">
+  <input id="in" type="submit" value="sign in">
+  <input id="up" type="button" value="sign up">
+</form>
+
+<button id="tadd">+ table</button>
+<ul></ul><br/>
+
+<div id="table"></div>
+<button id="radd">+ row</button>
+<button id="cadd">+ col</button>
+
+<style>
+div {
+  position: relative;
+  overflow: hidden;
+}
+.cell {
+  width: 5em;
+  height: 5em;
+  border: 1px solid black;
+  float: left;
+}
+.item {
+  float: left;
+  min-width: 5em;
+}
+</style>
+<div class="model" style="display: none;">
+  <div class="item"></div>
+  <div class="cell"></div>
+  <div class="row"></div>
+</div>
+
+<script src="https://cdn.jsdelivr.net/npm/gun/examples/jquery.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gun/gun.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gun/sea.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gun/lib/open.js"></script>
+
+<script>
+//var gun = Gun(['http://localhost:8080/gun']);
+var gun = Gun();
+var user = gun.user();
+
+$('#up').on('click', function(e){
+	user.create($('#alias').val(), $('#pass').val());
+});
+
+$('#sign').on('submit', function(e){
+	e.preventDefault();
+	user.auth($('#alias').val(), $('#pass').val());
+});
+
+user.recall({sessionStorage: true});
+
+gun.on('auth', function(){
+	$('#sign').hide();
+	user.get('tables').map().once(list);
+});
+
+$('#tadd').on('click', function(e){
+  if(!user.is){ return alert("login first") }
+  var cell = user.get('cells').set({what: "Edit me!", sort: 1});
+  var row = user.get('rows').set({sort: 1});
+  row.get('cells').set(cell);
+  var name = prompt("What do you want to call this table?")
+  var table = user.get('tables').set({name: name});
+  table.get('rows').set(row);
+  choose(table);
+});
+
+$(document).on('click', '.item', function(){
+  choose($(this).data('$'));
+});
+
+function choose(table){
+  choose.table = table;
+  table.open(render);
+}
+
+function render(data){
+  console.log(data);
+  $('#table').empty(); // BAD! Write DOM-diffing!
+  Gun.obj.map(data.rows, function(row, id){
+    var $r = grab(id, '.model .row', '#table');
+    Gun.obj.map(row.cells, function(cell, id){
+      var $c = grab(id, '.model .cell', $r);
+      $c.text(cell.what);
+    });
+  });
+}
+
+$(document).on('click', '.cell', function(e){
+  var id = $(this).data('id'), ref = gun.get(id);
+  var what = prompt("What should be in this cell?");
+  ref.get('what').put(what);
+});
+
+$('#radd').on('click', function(){
+  if(!user.is){ return alert("login first") }
+  choose.table.get('rows').set();
+
+  var cell = user.get('cells').set({what: "Edit me!", sort: 1});
+  var row = user.get('rows').set({sort: 1});
+  row.get('cells').set(cell);
+  choose.table.get('rows').set(row);
+});
+
+$('#cadd').on('click', function(){
+  if(!user.is){ return alert("login first") }
+  choose.table.get('rows').map().once(function(){
+    var cell = user.get('cells').set({what: "Edit me!", sort: 1});
+    this.get('cells').set(cell);
+  });
+});
+
+function grab(id, $model, $to){
+  var did = btoa(id).replace(/[\+\-\=\.]/ig,'');
+  return $('#' + did).get(0) || $($model).clone(true, true).attr('id', did).appendTo($to).data('id', id);
+};
+
+function list(table, id, $model, $to){
+  var li = grab(id, '.model .item', 'ul');
+  $(li).text(table.name).data('$', this);
+};
+</script>

examples/basic/upload.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+
+<div class="model" style="display: none;">
+  <video width="100%" controls autoplay></video>
+  <audio width="100%" controls autoplay></audio>
+  <img style="max-width: 100%;">
+</div>
+<center>
+  <p>Drag & drop videos, songs, or images! <input id="upload" type="file" multiple></p>
+</center>
+
+<script src="../../../gun/lib/yson.js"></script>
+<script src="../../../gun/gun.js"></script>
+<script src="../../../gun/lib/dom.js"></script>
+<script src="../../../gun/lib/upload.js"></script>
+
+<script>
+gun = GUN(location.origin + '/gun');
+
+$('html, #upload').upload(function resize(eve, up){
+  if(up){ return up.shrink(eve, resize, 1024) }
+  var b64 = (eve.base64 || ((eve.event || eve).target || eve).result || eve); // which one? try all!
+  gun.get('test').get((eve.id+(new Date).getUTCSeconds()) % 60).put(b64); // limit uploads to 1 of 60 slots.
+});
+
+gun.get('test').map().once(function(data){
+  if("string" != typeof data){ return }
+  var type = data.split(';')[0], ui;
+  if(type.indexOf('image') + 1){ ui = $("img").get(0) }
+  if(type.indexOf('video') + 1){ ui = $('video').get(0) }
+  if(type.indexOf('audio') + 1){ ui = $('audio').get(0) }
+  if(!ui){ return }
+  $(ui).clone().prependTo('center').get(0).src = data;
+});
+</script>

examples/basic/user.html

@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<p>Moved to <a href="./post.html">./post.html</a>!</p>

examples/basic/video.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+
+<video id="video" width="100%" controls autoplay></video>
+<center>
+  <input id="pass" placeholder="password">
+  Record <button class="record">Camera</button> or <button class="record">Screen</button>
+</center>
+
+<script src="../jquery.js"></script>
+<script src="../../../gun/gun.js"></script>
+<script src="../../../gun/sea.js"></script>
+
+<script>
+var gun = Gun(location.origin + '/gun');
+
+gun.get('test').get('video').on(async function(data){
+  if($('#pass').val()){ data = await SEA.decrypt(data, $('#pass').val()) }
+  $('#video').get(0).src = data;
+})
+
+$('.record').on('click', function(){
+  if(record.ing){
+    if(record.ing.stop){ record.ing.stop() }
+    $(this).text(record.type);
+    record.ing = false;
+    return;
+  }
+  record(record.type = $(this).text());
+  $(this).text("End");
+})
+
+function record(type){
+  if('Camera' === type){
+    navigator.getMedia({ video: true, audio: true }, load, error);
+  }
+  if('Screen' === type){
+    navigator.mediaDevices.getDisplayMedia({ video: true, audio: true }).then(load, error);
+  }
+  function load(media){
+    var chunks = [];
+    record.ing = new MediaRecorder(media);
+    record.ing.ondataavailable = function(eve){ chunks.push(eve.data) }
+    record.ing.onstop = function(eve){record.save(new Blob(chunks)) }
+    record.ing.start();
+  }
+  function error(err){ console.log(err) }
+}
+
+record.save = function(data){
+  record.file = record.file || new FileReader();
+  record.file.readAsDataURL(data); 
+  record.file.onloadend = async function(){
+    var b64 = record.file.result, pass;
+    b64 = $('#video').get(0).src = "data:video/webm" + b64.slice(b64.indexOf(';'));
+    if($('#pass').val()){ b64 = await SEA.encrypt(b64, $('#pass').val()) }
+    gun.get('test').get('video').put(b64);
+  }
+}
+
+navigator.getMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia
+  || navigator.mozGetUserMedia || navigator.msGetUserMedia);
+</script>

examples/chat/index.html

@@ -1,65 +1,213 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<script src="../../gun.js"></script>
-	</head>
-	<body>
+  <title>Converse</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
+  <link rel="stylesheet" type="text/css" href="/style.css">
+  <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
   <style>
-			html, body { font-size: 14pt; }
-			.hide { display: none; }
-			form .who { width: 10%; }
-			form .what { width: 80%; }
-			ul { list-style: none; padding: 0; }
-			ul .when {color: #555; font-size: 12pt; float: right; display: none; }
-			li:hover .when {display: inline;}
-		</style>
-		<ul><li class="hide">
-			<b class="who"></b>:
-			<span class="what"></span>
-			<u class="hide sort">0</u>
-			<i class="when">0</i>
-		</li></ul>
-		<form>
-			<input class="who" placeholder="alias">
-			<input class="what" placeholder="message">
-			<button>send</button>
-		</form>
-		<script>
-			var $ = function(s, e){ return (e || document).querySelector(s) } // make native look like jQuery.
-			;(function(){var H=HTMLElement,C=H.prototype; // jQuery chaining replacement!
-				for(var i in C){(function(j,i){if(j&&j!=i){
-					try{C[j]=C[j]||C[i]}catch(e){C[j]=function(){return this[i]}}
-				}}(i.replace(/[A-Z](.*)/g,''),i));
-			}}());
-			$.sort = function(g, e){ return (g > ($('.sort', e)[$.text] || -Infinity))? e : $.sort(g, e.previousSibling) }
-			$.text = document.body.textContent? 'textContent' : 'innerText'; // because browsers are stupid.
-		</script>
-		<script>
-			($.model = $('ul li').clone(true)).removeAttribute('class');
-			var gun = Gun(location.origin + '/gun');
-			var chat = gun.get('example/chat/data');
-			chat.map().val(function(msg, field){
-				var $ul = $('ul'), $last = $.sort(field, $ul.last()), $msg;
-				($msg = $("#msg-" + field) || $ul.insertBefore($.model.clone(true), $last.next())).id = 'msg-' + field;
-				$('.who', $msg)[$.text] = msg.who;
-				$('.what', $msg)[$.text] = msg.what;
-				$('.when', $msg)[$.text] = new Date(msg.when).toLocaleString().toLowerCase();
-				$('.sort', $msg)[$.text] = field;
-				if(document.body.scrollHeight - (window.scrollY + window.innerHeight) <= $last.scrollHeight + 50){
-					window.scrollTo(0, document.body.scrollHeight);
+    .chat__heading {
+      position: fixed;
+      text-align: center;
+      z-index: 1;
+      width: 100%;
+      margin-top: 0;
+      margin-bottom: 0;
     }
+
+    .chat__form-container {
+      display: flex;
+      justify-content: center;
+      width: 100%;
+      padding: 10px 20px;
+      position: fixed;
+      z-index: 1;
+      bottom: 0;
+    }
+
+    .chat__form {
+      display: flex;
+      justify-content: center;
+      height: 50px;
+      background-color: white;
+      border: 2px solid white;
+      max-width: 900px;
+      width: 100%;
+      border-radius: 5px;
+    }
+
+    .chat__name-input {
+      flex: 1;
+      padding: 10px;
+    }
+
+    .chat__message-input {
+      flex: 5;
+      padding: 10px;
+    }
+
+    .chat__submit {
+      padding: 10px;
+      color: white;
+      border-radius: 5px;
+    }
+
+    .chat__submit:hover::after {
+      background-color: rgba(0,0,0,0.2);
+    }
+
+    .chat__submit:focus::after {
+      background-color: rgba(0,0,0,0.2);
+    }
+
+    .chat__submit::after {
+      content: '';
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      left: 0;
+      top: 0;
+      border-radius: 5px;
+      transition: background-color 0.3s;
+      background-color: rgba(0,0,0,0);
+    }
+
+    .chat__message-list {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex: 1;
+      overflow-y: auto;
+      padding: 60px 20px;
+      width: 100%;
+      background-color: rgba(0, 0, 0, 0.2);
+      min-height: 100vh;
+    }
+
+    .chat__message {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: 10px;
+      padding: 10px;
+      border-radius: 5px;
+      width: 100%;
+      position: relative;
+      max-width: 900px;
+    }
+
+    .chat__name {
+      margin-right: 20px;
+    }
+
+    .chat__when {
+      position: absolute;
+      top: 0;
+      right: 2em;
+      padding: 10px;
+      background: rgba(100%, 100%, 100%, 0.9);
+      opacity: 0;
+      border-radius: 5px;
+    }
+
+    .chat__message:hover .chat__when {
+      opacity: 1;
+      right: 0em;
+    }
+
+    @media (max-width: 567px) {
+      .chat__heading {
+        font-size: 30px;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="chat hue2 page">
+    <h2 id='title' class="chat__heading hue2 whitet">Have a Conversation...</h2>
+    <ul class="chat__message-list">
+      <li class="none"></li>
+    </ul>
+
+    <div class="chat__form-container hue2">
+      <form class="chat__form">
+        <label for="name-input" class="visually-hidden">Name</label>
+        <input id="name-input" class="chat__name-input" placeholder="Name"></input>
+        <label for="message-input" class="visually-hidden">Message</label>
+        <input id="message-input" class="chat__message-input" placeholder="Write a message..."></input>
+        <button class="chat__submit say hue2">say</button>
+      </form>
+    </div>
+
+    <div class="model">
+      <li class="chat__message white huet2 box">
+        <b class="chat__name"></b>
+        <p class="chat__message-text"></p>
+        <span class="sort none">0</span>
+        <div class="chat__when"></div>
+      </li>
+    </div>
+  </div>
+
+  <script src="/jquery.js"></script>
+  <script src="/gun.js"></script>
+  <script src="/gun/nts.js"></script>
+  <script>
+    var gun = Gun(location.origin + '/gun');
+    var chat = gun.get('converse/' + location.hash.slice(1));
+
+    $(".chat__submit").on('click', submit);
+    $(".chat_form").on('keydown', enter);
+    function enter(e) {
+      if (e.which !== 13) { return }
+      submit(e);
+    }
+    function submit(e) {
+      e.preventDefault();
+
+      var msg = { when: Gun.state() };
+
+      msg.who = $('.chat__name-input').val();
+      if (!msg.who) {
+        msg.who = 'user' + String.random(3);
+        $('.chat__name-input').val(msg.who);
+      }
+
+      msg.what = $('.chat__message-input').val();
+      if (!msg.what) { return }
+
+      chat.set(msg);
+      $('.chat__message-input').val('').focus();
+    }
+
+    chat.map().once(function (msg, id) {
+      if (!msg) { return }
+      var messageList = $('.chat__message-list');
+      var last = sort(msg.when, messageList.children('li').last());
+
+      var li = $("#msg-" + id)[0]; // grab if exists
+      if (!li) {
+        li = $('.model li').clone(true) // else create it
+          .attr('id', 'msg-' + id)
+          .insertAfter(last);
+      }
+
+      // bind the message data into the UI
+      li = $(li);
+      li.find('.chat__name').text(msg.who);
+      li.find('.chat__message-text').text(msg.what);
+      li.find('.sort').text(msg.when);
+
+      var time = new Date(msg.when);
+      li.find('.chat__when').text(time.toDateString() + ', ' + time.toLocaleTimeString());
+
+      $('html, body').stop(true, true)
+        .animate({ scrollTop: messageList.height() });
     });
-			$('.who', $('form')).value = (document.cookie.match(/alias\=(.*?)(\&|$|\;)/i)||[])[1]||'';
-			$('.what', $('form')).focus();
-			$('form').onsubmit = function(e){
-				var msg = {when: Gun.time.is()};
-				document.cookie = ('alias=' + (msg.who = $('.who', this).value || 'user' + Gun.text.random(6)));
-				msg.what = $('.what', this).value || '';
-				if(msg.what){ chat.path(msg.when + '_' + Gun.text.random(4)).put(msg) }
-				$('.what', this).value = '';
-				return (e && e.preventDefault()), false;
-			};
+
+    function sort(num, li) { return parseFloat(num) >= parseFloat($(li).find('.sort').text() || -Infinity) ? li : sort(num, li.prev()) }
   </script>
 </body>
+
 </html>

examples/chat/spam.js

@@ -1,10 +0,0 @@
-function spam(){
-	spam.start = true; spam.lock = false;
-	if(spam.count >= 100){ return }
-	var $f = $('form');
-	$('.what', $f).value = ++spam.count;
-	$f.onsubmit();
-	setTimeout(spam, 0);
-}; spam.count = 0; spam.lock = true;
-
-alert("ADD THIS LINE TO THE TOP OF THE MAP.VAL CALLBACK: `if(!spam.lock && !spam.start){ spam() }`");

examples/chat/user.html

@@ -0,0 +1,22 @@
+<script src="/gun.js"></script>
+<!--
+<script src="/gun/lib/cryptomodules.js" type="text/javascript"></script>
+<script src="/gun/sea.js"></script>
+-->
+<script>
+	var gun = Gun(location.origin+'/gun');
+	var user = gun.user && gun.user();
+	if(user){
+		// 1st: call create. 2nd call auth. After that, call recall
+		// user.create('dude', 'my secret').then(function(ack) { console.log('created ack:', ack) });
+		// user.recall().then(function(ack){
+		// 	if (!ack || !ack.sea){
+		// 		console.log('user.recall not bootstrapping...');
+		// 		user.auth('dude', 'my secret', {pin: 'PIN'}).then(function(user) { console.log('authenticated user:', user) });
+		// 		// user.auth('dude', 'my secret', {pin: 'PIN', newpass: 'my new secret'}).then(function(user) { console.log('authenticated user:', user) });
+		// 	} else {
+		// 		console.log('user.recall authenticated user:', ack.alias);
+		// 	}
+		// });
+	}
+</script>

examples/contact/index.html

@@ -0,0 +1,330 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link rel="stylesheet" type="text/css" href="../style.css">
+	</head>
+	<body>
+		<div id="sign" class="hue page">
+			<style>
+				input, button {
+					margin: 1em 0;
+					padding: 1em;
+				}
+				.or {
+					display: inline-block;
+					width: 15%;
+				}
+			</style>
+			<form id="inup" class="sign pad center">
+				<div class="loud">Welcome,</div>
+				<div class="mid row col">
+					<input name="alias" class="huet jot sap" placeholder="alias">
+					Enter your public username.
+				</div>
+				<div class="mid row col">
+					<input name="pass" class="huet jot sap" type="password" placeholder="passphrase">
+					And a long private passphrase.
+				</div>
+				<div class="mid row col go">
+					<button class="huet sap act symbol">sign in</button>
+					<div class="or">or</div>
+					<button class="huet sap act symbol">sign up</button>
+				</div>
+				<a href="info">more info</a>
+			</form>
+		</div id="sign">
+		
+		<div id="people" class="hue2 page">
+			<ul name="users" class="pad">
+				<h3>Here is a list of people:</h3>
+				<li name="#">
+					<!-- <h3 name="."></h3> -->
+					<ul>
+						<a href="person" name="#" class="whitet act">
+							<li>
+								<span name="who">
+									<b name="name"></b>
+								</span>
+								<i>~</i><i name="alias" class="sort"></i>
+								<input name="pub">
+							</li>
+						</a>
+					</ul>
+				</li>
+			</ul>
+		</div id="people">
+		
+		<div id="converse" class="page">
+			<ul>
+			</ul>
+			<div class="model">
+				<li class="msg">
+					<span name="fro">Alias</span>: <span name="what"></span>
+				</li>
+			</div>
+			<form>
+				<input placeholder="to" name="to">
+				<textarea name="what"></textarea>
+				<input type="submit" value="submit">
+				<div class="status"></div>
+			</form>
+		</div id="converse">
+		
+		<div id="person" class="hue3 page">
+			<style>
+				#person .back {
+					position: absolute;
+					top: 0.3em;
+					left: 0.5em;
+					width: 2em;
+					height: 2em;
+					z-index: 99999;
+				}
+			</style>
+			<a href="people" class="whitet act back">&#8592</a>
+			<div class="pad">
+				<div name="who">
+					<!-- img src="" -->
+					<h2 name="name" contenteditable="true">Name</h2>
+					<i name="born"></i>
+					<span name="bio" contenteditable="true">bio</span>
+					<form id="say" class="center none">
+						<input class="jot" placeholder="Say something!" style="width: 80%;">
+						<input type="submit" id="speak" class="huet2 sap act symbol" style="min-width: 5em; width: 10%;" value="speak">
+					</form>
+					<div>
+						<ul name="said">
+							<li name="#" class="sit sort shade rim"><div name="what" class="rim"></div></li>
+						</ul>
+					</div>
+				</div>
+				<input name="pub">
+			</div>
+		</div id="person">
+
+		<div id="info" class="page">
+			<p>A mysterious new example app has appeared! It is not finished/ready yet.</p>
+		</div id="info">
+		
+		<div id="tell" class="center">
+			<style>
+				#tell {
+					position: fixed;
+					top: 0;
+					left: 0;
+					right: 0;
+					height: 0;
+					overflow: visible;
+				}
+				#tell p {
+					top: -2em;
+					width: 50%;
+					border: solid #222 0.2em;
+					border-top: none;
+					padding: 1%;
+					opacity: 0;
+					visibility: hidden;
+					transition: visibility 2s, all 1s ease-in;
+				}
+				#tell .notify {
+					top: 0em;
+					opacity: 0.8;
+					visibility: visible;
+					transition: visibility 0s, all 0.25s ease-out;
+				}
+			</style>
+			<p class="mid black">Hello world!</p>
+		</div>
+
+		<!-- script src="/Users/mark/Dropbox/Public/gun/db/examples/jquery.js"></script>
+		<script src="/Users/mark/Dropbox/Public/gun/db/gun.js"></script>
+		<script src="/Users/mark/Dropbox/Public/gun/db/lib/cryptomodules.js"></script>
+		<script src="/Users/mark/Dropbox/Public/gun/db/sea.js"></script>
+		<script src="/Users/mark/Dropbox/Public/gun/db/as.js"></script -->
+
+		<script src="/jquery.js"></script>
+		<script src="/gun.js"></script>
+		<script src="/gun/sea.js"></script>
+		<script src="/gun/as.js"></script>
+		<script src="/gun/nts.js"></script>
+		<script>
+			// Check out the interactive tutorial
+			// for how to build a simplified version
+			// of this example: https://scrimba.com/c/c2gBgt4
+			var gun = Gun(location.origin+'/gun');
+			var app = gun.get('example/contacts/7');
+			var user = gun.user();
+			var c = window.c = {};
+			(function(){
+				c.hash = location.hash.slice(1);
+				gun.on('auth', function(at){
+					if('sign' === c.hash){ c.hash = '' }
+					as.route(c.hash || 'people');
+				});
+				gun.on('secure', function(at){
+					/* enforce some rules about shared app level data */
+					if(!at.put || !at.put.users){ return }
+					var no;
+					Gun.node.is(at.put.users, function(val, key){
+						Gun.SEA.verify(val, false, function(val){
+						//Gun.SEA.read(val, false, function(val){
+							if('~@'+key === Gun.val.link.is(val)){ return }
+							no = true;
+						})
+						if(no){ return no }
+					});
+					if(no){ return }
+					this.to.next(at);
+				});
+				$(document).on('keyup', "form.sign input:first", as.wait(function(){
+					/*
+					var form = $(this).closest('form'), data = {alias: $(this).val()};
+					if(!data.alias || data.alias.length < 5){
+						return;
+					}
+					var exist = gun.path('alias').path(data.alias);
+					exist.get(function(at){
+						form.find('.or').addClass('none');
+						form.find('button:first').toggleClass('none', at.put? false : true);
+						form.find('button:last').toggleClass('none', at.put? true : false);
+					});
+					*/
+				})).on('click','form.sign button:last', function(){
+					var but = $(this), form = $(this).closest('form'), data = {alias: form.find('input:first').val(), pass: form.find('input:last').val()};
+					data.born = Gun.time.is();
+					if(!data.alias || data.alias.length < 5){
+						c.tell("Alias needs to be longer than 5 characters.");
+						return;
+					}
+					if(!data.pass || data.pass.length < 9){
+						c.tell("Passphrase needs to be longer than 9 characters.");
+						return;
+					}
+					but.addClass('pulse');
+					data.alias = data.alias.toLowerCase();
+					user.create(data.alias, data.pass, function(ack){
+						if(!ack.wait){ but.removeClass('pulse') }
+						if(ack.err){ c.tell(ack.err); return }
+						if(ack.pub){
+							gun.get('users').get(data.alias).put(gun.get('~@'+data.alias));
+						}
+						session(data);
+						user.auth(data.alias, data.pass);
+					});
+				}).on('click','form.sign button:first', become);
+				function become(){
+					var form = $('#sign').find('form'), data = {alias: form.find('input:first').val(), pass: form.find('input:last').val()};
+					data.alias = data.alias || sessionStorage.alias;
+					data.pass = data.pass || sessionStorage.tmp;
+					if(!data.alias || data.alias.length < 5){
+						c.tell("Alias needs to be longer than 5 characters.");
+						return;
+					}
+					if(!data.pass || data.pass.length < 9){
+						c.tell("Passphrase needs to be longer than 9 characters.");
+						return;
+					}
+					var but = form.find('button:first');
+					but.addClass('pulse');
+					data.alias = data.alias.toLowerCase();
+					user.auth(data.alias, data.pass, function(ack){
+						if(!ack.wait){ but.removeClass('pulse') }
+						if(ack.err){ c.tell(ack.err); return }
+						session(data);
+					});
+				}
+				if(!location.hash){
+					as.route('sign');
+				}
+				if(!window.sessionStorage){ window.sessionStorage = {clear:function(){}} }
+				if(sessionStorage.tmp){
+					become();
+				}
+				function session(data){
+					if(!sessionStorage){ return }
+					sessionStorage.alias = data.alias;
+					sessionStorage.tmp = data.pass;
+				}
+				c.tell = function(what, n){
+					var e = $('#tell').find('p');
+					e.addClass('notify').text(what);
+					clearTimeout(c.tell.to);
+					c.tell.to = setTimeout(function(){e.removeClass('notify')}, n || 2500);
+				}
+			}());
+			(function(){
+				$(document).on('submit', '#say', function(e){
+					e.preventDefault();
+					user.get('who').get('said').set({
+						what: $(this).find('.jot').val()
+					});
+					$(this).find('.jot').val('');
+				});
+			}());
+			as.route.page('sign', function(){
+				$(document.forms.inup.alias).focus();
+			});
+			as.route.page('people', function(){
+				if(!user.is){ return as.route('sign') }
+				as('#people', gun, function(data, key, el){
+					if('pub' !== key){ return }
+					el.closest('a').attr('href', '#person/' + data);
+				});
+			});
+			as.route.page('person', function(){
+				if(!user.is){ return as.route('sign') }
+				var pub = location.hash.split('/').slice(-1)[0];
+				(pub === user._.pub? $('#say').show() : $('#say').hide());
+				as('#person', window.PUB = gun.get('~'+pub));
+			});
+
+
+
+
+
+
+
+			(function(converse){
+				as.route.page('converse', function(){
+					if(!c.me){ return as.route('sign') }
+					converse.lock = false;
+					var alias = location.hash.split('/').slice(-1);
+					$('#converse form').find('input:first').val(alias);
+					function inbox(msg, id){
+						if(!sign.verify(msg.pub, msg.what, msg.sig)){ return }
+						msg.fro = (msg.to === c.me.alias? alias : c.me.alias);
+						as.route.render(id, '.msg', $('#converse ul'), msg);
+					}
+					sign.is(alias, function(acc){
+						sign.is(c.me.alias).path('msgs').path(acc.pub).map(inbox);
+					}).path('msgs').path(c.me.pub).map(inbox);
+				});
+				$(document).on('submit', '#converse form', function(e){
+					e.preventDefault();
+					if(converse.lock){ return console.log('message sending already') }
+					converse.lock = true; // prevent duplicate sends.
+					var form = $(this), msg = {};
+					msg.to = form.find('input:first').val();
+					msg.what = form.find('textarea').val();
+					sign.is(msg.to, function(to){
+						if(!priv){
+							form.find('.status').text("Failed to send. Please sign in again.");
+							converse.lock = false;
+							return;
+						}
+						msg.sig = sign.sig(msg.what, priv);
+						msg.pub = c.me.pub;
+						msg.when = Gun.time.is();
+						console.log("sending msg", msg);
+						sign.is(c.me.alias).path('msgs').path(to.pub).set(gun.put(msg));
+						converse.lock = false;
+					}, function(){
+						form.attr('disabled', false).find('.status').text(msg.to + " cannot be found! Alias is case sensitive.");
+						converse.lock = false;
+					});
+				});
+			}({}));
+		//}());</script>
+	</body>
+</html>

examples/docs.html

@@ -0,0 +1,379 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- always start with these two lines to set a clean baseline for different devices -->
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" type="text/css" href="style.css">
+<script src="jquery.js"></script>
+
+<title>Docs</title>
+</head>
+<body class="black whitet">
+<style>
+	/*
+		Choose white text on a black background so you can add color in.
+		Pick your favorite font and choose a font size.
+	*/
+	@import url('https://fonts.googleapis.com/css?family=Oxygen');
+	html, body {
+		font-family: "Oxygen", sans-serif;
+	}
+
+	[contenteditable]:focus {
+		outline: none;
+	}
+
+	.meta-on, div:hover, ul:hover, ol:hover, li:hover, p:hover, span:hover, form:hover, button:hover, input:hover, textarea:hover, img:hover {
+		outline: 1px solid;
+		animation: meta-on 3s infinite;
+		transition: none !important;
+	} @keyframes meta-on {
+	  0%   {outline-color: magenta;}
+	  33% {outline-color: cyan;}
+	  66%  {outline-color: yellow;}
+	  100% {outline-color: magenta;}
+	}
+</style>
+
+<div class="hold full hue2">
+	<div id="page" class="max focus gap" style="margin-top: 9%;"></div>
+</div>
+
+<script src="../../gun/gun.js"></script>
+<script src="../../gun/lib/monotype.js"></script>
+<script src="../../gun/lib/meta.js"></script>
+<script src="../../gun/lib/normalize.js"></script>
+<script async src="../../gun/lib/fun.js"></script>
+
+<script async src="../../gun/lib/wave.js"></script>
+<!-- script async src="https://edide.io/music.lib"></script -->
+
+<script>
+var gun = Gun();
+var page = {};
+//var gun = Gun(['https://guntest.herokuapp.com/gun', 'http://localhost:8765/gun']);
+
+;(window.onhashchange = function(){
+	var file = (location.hash||'').slice(1);
+	var S = +new Date;
+	$('#page').empty().attr('contenteditable', 'false');
+	gun.get('test/gun/docs/'+file).get('what').map().on(function render(data, i, msg, eve){
+		var tmp = page[i] || '';
+		var last = Gun.state.is(gun._.root.graph[msg.put['#']], i);
+		if(last < tmp.last){ return }
+	//});
+		//if(window.LOCK){ return }
+		var p = $('#page').children().get(i);
+		if(!p){
+			$('#page').append('<p>');
+			setTimeout(function(){ render(data, i, msg, eve) },0);
+			return;
+		}
+		var DBG = {s: +new Date};
+		var r = monotype(p);
+		DBG.mono = +new Date;
+		var safe = $.normalize(data);
+		DBG.norm = +new Date;
+		p.outerHTML = data;
+		DBG.html = +new Date;
+		r.restore();
+		DBG.rest = +new Date;
+		//console.log("mono:", DBG.mono - DBG.s, "norm:", DBG.norm - DBG.mono, 'html:', DBG.html - DBG.norm, 'rest:', DBG.rest - DBG.html, ':::', msg, eve);
+	});
+})();
+
+
+window.requestAnimationFrame = window.requestAnimationFrame || setTimeout;
+window.requestAnimationFrame(function frame(){
+	window.requestAnimationFrame(frame, 16);
+	
+}, 16);
+
+document.execCommand('defaultParagraphSeparator', false, 'p');
+meta.edit({
+	name: "Edit",
+	combo: ['E'],
+	use: function(eve){
+		console.log('on');
+	}, on: function(eve){
+		if($(eve.target).closest('p').length){ return }
+		var edit = this;
+		setTimeout(function(){ meta.flip(false) },1);
+		edit.init();
+		$(document).on('keydown.tmp', '[contenteditable]', function(eve){
+			if(eve.which != 13){ return }
+			eve.preventDefault();
+			var r = window.getSelection().getRangeAt(0);
+			var c = r.commonAncestorContainer, p;
+      r.deleteContents();
+      var p = c.splitText? $(c.splitText(r.startOffset)).parent() : $(c);
+      var n = $("<"+p.get(0).tagName+">"), f;
+      p.contents().each(function(){
+      	if(this === c){ return f = true }
+      	if(!f){ return }
+      	n.append(this);
+      });
+      p.after(n);
+      edit.select(n.get(0));
+      // make sure we re-save & sync each changed paragraph.
+      edit.save(p);
+      p.nextAll().each(function(){
+      	edit.save(this);
+      });
+		}).on('keyup.tmp', '[contenteditable]', function(eve){
+			//$('#debug').val(doc.html());
+			var p = $(window.getSelection().anchorNode).closest('p'), tmp;
+			(tmp = page[p.index()] || (page[p.index()] = {})).last = (+new Date) + 99;
+			clearTimeout(tmp.to); tmp.to = setTimeout(function(){
+			var DBG = {s: +new Date};
+			var r = monotype(p);
+			DBG.m = +new Date;
+			var html = p.html() || '';
+			DBG.g = +new Date;
+			if(!html && !p.prev().length && !p.next().length && !$('#page').html()){
+				edit.init();
+			}
+			DBG.i = +new Date;
+			var safe = $.normalize(html);
+			DBG.n = +new Date;
+			p.html(safe);
+			DBG.h = +new Date;
+			r.restore();
+			DBG.r = +new Date;
+			edit.save(p);
+			DBG.p = +new Date;
+			//console.log("save:", DBG.p - DBG.r, "rest:", DBG.r - DBG.h, "html:", DBG.h - DBG.n, "norm:", DBG.n - DBG.i, 'init:', DBG.i - DBG.g, 'grab:', DBG.g - DBG.m, 'mono:', DBG.m - DBG.s);
+		},50)});
+	},
+	up: function(){
+		console.log("UP");
+		$('[contenteditable=true]').off('.tmp');
+	},
+	init: function(){
+		var edit = this;
+		var doc = $('#page').attr('contenteditable', 'true');
+		if(!doc.text()){
+			doc.html('<p class="loud crack"></p>');
+		}
+		edit.select(doc.children().first().get(0));
+	},
+	save: function(p){
+		p = $(p);
+		var i = p.index();// = Array.prototype.indexOf.call(parent.children, child);
+		var file = (location.hash||'').slice(1);
+		var data = (p.get(0)||{}).outerHTML||'';
+		//data = $.normalize(data); // GOOD TO DO SECURITY ON SENDING SIDE TOO!!!
+		window.LOCK = true;
+		gun.get('test/gun/docs/'+file).get('what').get(i).put(data);
+		window.LOCK = false;
+	},
+	select: function(p){
+		var s = window.getSelection(),
+		r = document.createRange();
+		if(p.innerHTML){
+      r.setStart(p, 0);
+			r.collapse(true);
+			s.removeAllRanges();
+			s.addRange(r);
+			return;
+		}
+		p.innerHTML = '\u00a0';
+		r.selectNodeContents(p);
+		s.removeAllRanges();
+		s.addRange(r);
+		document.execCommand('delete', false, null);
+	}
+});
+
+;(function(){
+
+	meta.edit({name: "Design", combo: ['D']});
+	meta.edit({name: "Fill", combo: ['D','F'], // TODO!
+		use: function(eve){},
+		on: function(eve){
+			var on = meta.tap();
+			meta.ask('Color name, code, or URL?', function(color){
+				on.css('background', color);
+			}, true);
+		},
+		up: function(eve){}
+	});
+
+	meta.edit({name: "Add", combo: ['D','A']});
+	meta.edit({name: "Row", combo: ['D','A', 'R'],
+    on: function(eve){
+			meta.tap().append('<div style="min-height: 9em; padding: 2%;">');
+    }
+	});
+	meta.edit({name: "Columns", combo: ['D','A','C'],
+    on: function(eve){
+			var on = meta.tap().addClass('center'), tmp, c;
+			var html = '<div class="unit col" style="min-height: 9em; padding: 2%;"></div>';
+			if(!on.children('.col').length){ html += html }
+			c = (tmp = on.append(html).children('.col')).length;
+			tmp.each(function(){
+	    	$(this).css('width', (100/c)+'%');
+			})
+    }
+	});
+	meta.edit({name: "Text", combo: ['D','A','T'],
+    on: function(eve){
+    	var tag = $('<p>text</p>');
+			meta.tap().append(tag);
+			tag.focus();
+    }
+	});
+	meta.edit({name: "Delete", combo: ['D','A','D'],
+    on: function(eve){
+    	meta.tap().remove();
+    }
+	});
+
+	meta.edit({name: "Turn", combo: ['D','T']});
+	meta.edit({name: "Size", combo: ['D','S']});
+	meta.edit({name: "X", combo: ['D','S','X'],
+		on: function(eve){
+			var on = this.a = meta.tap().addClass('meta-on'), was = on.width();
+			$(document).on('mousemove.tmp', function(eve){
+				var be = was + ((eve.pageX||0) - was);
+				on.css({'max-width': be, width: '100%'});
+			});
+			meta.ask('Width in px, %, or other unit?', function(w){
+				if(!w){ return }
+				on.css({'max-width': w, width: '100%'});
+			}, true);
+		}, up: function(){
+			$(document).off('mousemove.tmp');
+			this.a.removeClass('meta-on');
+		}
+	});
+	meta.edit({name: "Y", combo: ['D','S','Y'],
+		//on: function(eve){ console.log('on Y') },
+		on: function(eve){ console.log('use Y')
+			var on = this.a = meta.tap().addClass('meta-on'), was = on.height();
+			$(document).on('mousemove.tmp', function(eve){
+				var be = was + ((eve.pageY||0) - was);
+				on.css({'min-height': be});
+			})
+		}, up: function(){ console.log('up Y')
+			$(document).off('mousemove.tmp');
+			this.a.removeClass('meta-on');
+		}
+	});
+}());
+
+;(function(){
+	var logic = {};
+
+	meta.edit({name: "Logic", combo: ['L']});
+
+	meta.edit({name: "Symbol", combo: ['L','S'],
+    on: function(eve){
+    	console.log(1);
+    }
+	});
+	meta.edit({name: "Action", combo: ['L','A'],
+    on: function(eve){
+    	console.log(2);
+    }
+	});
+	meta.edit({name: "Data", combo: ['L','D'],
+    on: function(eve){
+    	console.log(3);
+    }
+	});
+}());
+
+;(function(){
+	var song = {};
+	// TODO:
+	// 1. Manually OR automatically load music.js API, dependencies, and modules. - FINE for now
+	// 2. only export music API, not meta, not dom, not mouselock system, not UI/html, etc. better module isolation and export.
+	// 3. `var wave = Wave('a').play()` // also on `Music.now`
+	// defaults... instrument: pure tones, volume curve: |\_ , speed curve: 0.5
+	// 4. `wave.blur(0.5).itch(0.5);`
+	// 5. wave.long(2); // how long in seconds each note plays, optionally: wave.pace(60) is bpm
+	// 6. wave.loud(0.5); // 0% to 100% volume loudness of device output.
+	// 7. wave.vary(0.5); // slows down or speeds up wiggle per harmonic
+	// 8:
+	// wave structure, does ToneJS allow us to change the sine wave smoothness/type continuously or is it a pre-fixed type?
+	// wave structure: /\/\/, |_|, /|/, \|\| do some research with ToneJS whether these are dynamic or fixed
+	// wave.itch(); // changes the shape of the wiggle from smooth sine to square or triangle
+	// wave.blur(220hz); // blur may not apply/work on pure notes other than filtering them.
+
+	meta.edit({name: "Music", combo: ['M']});
+
+	meta.edit({name: "Play", combo: ['M','P'],
+    on: function(eve){
+    	// TODO: We still need to add to meta API ability to change name.
+    	if(song.play){
+				music.stop();
+				song.play = false;
+				return;
+    	}
+    	song.play = true;
+    	music.stop();
+    	setTimeout(function(){
+				song.now = wave($('#page').text()).play();
+    	},250);
+    }
+	});
+
+	meta.edit({name: "Blur", combo: ['M','B'],
+    on: function(eve){
+			$(document).on('mousemove.tmp', function(eve){
+				var x = eve.pageX;
+				song.now.loud(x/$('body').innerWidth());
+			});
+    },
+    up: function(){
+    	$(document).off('.tmp');
+  	}
+	});
+
+	$(document).on('keydown', function(eve){
+		if(eve.which === music.which){ return }
+		music.play(String.fromCharCode(music.which = eve.which));
+	});
+
+}());
+;(function(){
+/*
+	Edit
+		Bold
+		Italic
+		Link
+		?
+			Left
+			Middle
+			Right
+			Justify
+		?
+			Small
+			Normal
+			Header
+			Title
+	Design
+		Add
+			Row
+			Column
+			Text
+			Delete
+		Turn
+		Grab
+		Size
+			X
+			Y
+		Fill
+	Logic
+		Symbol
+		Action
+		Data
+*/
+/*
+
+*/
+}());
+</script>
+</body>
+</html>

examples/express.js

@@ -1,20 +1,17 @@
-console.log("If modules not found, run `npm install` in /example folder!"); // git subtree push -P examples heroku master // OR // git subtree split -P examples master && git push heroku [['HASH']]:master --force
-var port = process.env.OPENSHIFT_NODEJS_PORT || process.env.VCAP_APP_PORT || process.env.PORT || process.argv[2] || 80;
-
+console.log("If module not found, install express globally `npm i express -g`!");
+var port    = process.env.OPENSHIFT_NODEJS_PORT || process.env.VCAP_APP_PORT || process.env.PORT || process.argv[2] || 8765;
 var express = require('express');
+var Gun     = require('..');
+require('../axe');
+
 var app    = express();
+app.use(Gun.serve);
+app.use(express.static(__dirname));
 
-var Gun = require('gun');
-var gun = Gun({
-	file: 'data.json',
-	s3: {
-		key: '', // AWS Access Key
-		secret: '', // AWS Secret Token
-		bucket: '' // The bucket you want to save into
-	}
-});
+var server = app.listen(port);
+var gun = Gun({	file: 'data', web: server });
 
-gun.wsp(app);
-app.use(express.static(__dirname)).listen(port);
+global.Gun = Gun; /// make global to `node --inspect` - debug only
+global.gun = gun; /// make global to `node --inspect` - debug only
 
 console.log('Server started on port ' + port + ' with /gun');

examples/game/furball.html

@@ -0,0 +1,439 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- always start with these two lines to set a clean baseline for different devices -->
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" type="text/css" href="../style.css">
+<!-- link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/gun/examples/style.css" -->
+<script src="https://cdn.jsdelivr.net/npm/gun/examples/jquery.js"></script>
+
+<title>Furball</title>
+</head>
+<body class="black whitet">
+<style>
+	/*
+		Choose white text on a black background so you can add color in.
+		Pick your favorite font and choose a font size.
+	*/
+	@import url('https://fonts.googleapis.com/css?family=Mali');
+	html, body {
+		font-family: "Mali", sans-serif;
+	}
+
+	.huef {
+	  background: #4D79D8;
+	  -webkit-animation: huef 9s infinite;
+	  animation: huef 9s infinite;
+	} @keyframes huef {
+	  0%   {background-color: #4D79D8;}
+	  25%  {background-color: #33cc33;}
+	  50%  {background-color: #f2b919;}
+	  75%  {background-color: #ea3224;}
+	  100% {background-color: #4D79D8;}
+	} @-webkit-keyframes huef {
+	  0%   {background-color: #4D79D8;}
+	  25%  {background-color: #33cc33;}
+	  50%  {background-color: #f2b919;}
+	  75%  {background-color: #ea3224;}
+	  100% {background-color: #4D79D8;}
+	}
+
+	button, input {
+		padding: 1em;
+		background: transparent;
+		border: 1px solid white;
+		border-radius: 1.5em;
+		color: white;
+		margin: 0.5em;
+		margin-bottom: 0;
+		cursor: pointer;
+	}
+	button:hover, input:hover {
+		background: white;
+		color: black;
+		transform: scale(1.1);
+	}
+
+	.air { padding-top: 9%; }
+	.yak button { font-size: 80%; }
+
+	.wag {
+	  -webkit-animation: wag 3s infinite;
+	  animation: wag 3s infinite;
+	} @keyframes wag {
+	  0%   {transform: rotate(0deg);}
+	  50%  {transform: rotate(-1deg);}
+	  100% {transform: rotate(0deg);}
+	}
+
+	@keyframes print {
+	  0% { overflow: hidden; height: 0vh; }
+	  99% { overflow: hidden; height: 100vh; }
+	  100% { overflow: visible; height: auto; }
+	}
+	input {
+		outline: none;
+	}
+	</style>
+</style>
+
+<!-- for educational sites, consider starting with a nice full screen welcome message -->
+<div class="home hold full huef center air">
+	<div class="focus row">
+		<p><i>Neon ERA presents</i></p>
+		<p class="shout wag">Furball Forces</p>
+		<!-- just like in real life, say who you are and give a concise reason why you add value to someone's life and then make a call to action, if they want to learn more they can always scroll to learn more -->
+		<div>
+			<!-- a class="unit hold" href="#fullscreen"><button>WATCH TRAILER</button></a -->
+			<a class="unit yak" href="#choose"><button>PLAY GAME</button></a>
+		</div>
+	</div>
+	<div class="focus center row leak">
+		<!-- just like in real life, looking pretty attracts attention, so show off and look glamorous! -->
+		<img class="unit blink" src="file:///Users/mark/Pictures/supercatdog.png" style="min-width: 10em; width: 80%;">
+	</div>
+	<script>location.hash = ''</script>
+	<script src="https://cdn.jsdelivr.net/npm/gun/lib/fun.js"></script>
+	<script>;(function(){
+		// OPTIONAL MUSIC:
+		$('.home button').on('click', function(){
+			if(window.screen.height > window.screen.width){ return }
+			$('body').append("<div id='audio' onclick='$(this).remove();'><iframe width='0' height='0' src='https://www.youtube-nocookie.com/embed/LLPoZGX0qZk?autoplay=1' frameborder='0'></iframe></div>");
+		})
+	}());
+	</script>
+	<style>#audio { padding: 0.5em; position: fixed; bottom: 0; left: 0; } #audio:before { content: '\25BA'; } #audio:hover:before { content: '\25FC'; }</style>
+</div>
+
+<div id="choose" class="hold full hue4 center air">
+	<div class="focus row">
+		<p class="shout wag fur">Choose Team:</p>
+		<div>
+			<a class="unit yak" href="#automecha"><button style="background: white; color: black;">#AutoMecha</button></a>
+			<a class="unit yak" href="#cyberninjas"><button style="background: black; color: white; border-color: black;">#CyberNinjas</button></a>
+		</div>
+	</div>
+	<div class="focus center row leak">
+		<img class="unit blink" src="file:///Users/mark/Pictures/supercatdog.png" style="transform: scaleX(-1); filter: invert(1); min-width: 10em; width: 80%;">
+	</div>
+</div>
+
+<div id="cyberninjas" class="hold full black">
+	<style>
+	#cyberninjas:target .story {
+	  animation: print 3s steps(50, end);
+	}
+	</style>
+	<div class="story pad">
+		<p class="loud crack">Episode 1: Waking</p>
+		<p>"How long until they're online?"</p>
+		<p>"We're copying the soul files, almost done."</p>
+		<p>"Monsters are on the bridge, we do not have time!"</p>
+		<p>"The new body is printing now, it'll be able to outrun them all, just hold on."</p>
+		<p>"It won't know where to run! We're risking ruining the whole resistance, I need to talk to it now."</p>
+		<p>"95% done." The voice behind the glass turns to the soul in the body, "My cub, can you hear me?"</p>
+		<p>...</p>
+		<a class="unit yak" href="#cyberninjas2"><button>Reply "Yes, Mom?"</button></a>
+	</div>
+	<script>
+	;(function(){
+		$('#cyberninjas a').on('click', function(){
+			$('#hud .life').removeClass('down');
+		});
+	}());
+	</script>
+</div>
+
+<div id="cyberninjas2" class="hold full red">
+	<style>
+	#cyberninjas2:target .story {
+	  animation: print 3s steps(50, end);
+	}
+	
+	#hud {
+		opacity: 0.4;
+		font-family: 'Audiowide', cursive;
+		z-index: 999999999999;
+		transition: all 3s;
+	}
+	#hud .life {
+		position: fixed;
+		left: 50%;
+		bottom: 0px;
+		padding: 0.25em 1em 0.1em;
+		border-radius: 0.5em 0.5em 0 0;
+		transform: translateX(-50%);
+		background: black;
+		text-shadow: 0em -0.125em 0.75em white;
+	}
+	#hud .score {
+		position: fixed;
+		left: 50%;
+		top: 0px;
+		padding: 0.1em 1em 0.25em;
+		border-radius: 0 0 0.5em 0.5em;
+		transform: translateX(-50%);
+		background: black;
+		text-shadow: 0em 0.1em 0.75em white;
+	}
+	#hud .down {
+		bottom: -2em !important;
+	}
+	#hud .up {
+		top: -2em !important;
+	}
+	</style>
+	<div id="hud">
+		<div class="score shade up">
+			SCORE: <span id="hudscore">0</span>%
+		</div>
+		<div class="life shade down">
+			LIFE: <span id="hudlife">50</span>%
+		</div>
+	</div>
+	<div class="story pad">
+		<p>A fire explodes in the room behind the glass as an AutoMecha blows the door open.</p>
+		<p>The floor shakes and the bed crashes through the wall, flying out of the building.</p>
+		<p class="center">"Mom!!!"</p>
+		<p>There is a total free fall from 10 levels up, water down below.</p>
+		<p>...</p>
+		<a class="unit yak" href="#cyberninjas3"><button>Dive or Die</button></a>
+	</div>
+	<script>
+	;(function(){
+		$('#cyberninjas2 a').on('click', function(){
+			$('#hudlife').text($('#hudlife').data().is = 50);
+		});
+	}());
+	</script>
+</div>
+
+<div id="cyberninjas3" class="hold full blue">
+	<style>
+	@import url('https://fonts.googleapis.com/css?family=Audiowide');
+
+	#cyberninjas3:target .story {
+	  animation: print 3s steps(50, end);
+	}
+	</style>
+	<div class="story pad">
+		<p>The water splashes, swelling and swirling all around.</p>
+		<p>...</p>
+		<p class="center">Rapidly tap to swim up to air:</p>
+		<a class="unit yak"><button>Swim</button></a>
+	</div>
+	<script>
+	;(function(){
+		var go, life = $('#hudlife').data();
+		$('#cyberninjas3 a').on('click', function(){
+			$('#hudlife').text(life.is += 5);
+			if(100 <= life.is){
+				location.hash = 'cyberninjas4';
+				clearInterval(go);
+				go = false;
+				return;
+			}
+			if(go){ return }
+			go = setInterval(function(){
+				if(0 >= life.is){
+					location.hash = 'cyberninjas2';
+					$('#hudlife').text(life.is = 50);
+					clearInterval(go);
+					go = false;
+					return;
+				}
+				$('#hudlife').text(life.is -= 5);
+			}, 1000); // 1 second
+		});
+	}());
+	</script>
+</div>
+
+<div id="cyberninjas4" class="hold full black">
+	<style>
+	#cyberninjas4:target .story {
+	  animation: print 3s steps(50, end);
+	}
+	</style>
+	<div class="story pad">
+		<p class="loud crack">Episode 2: Who Am I?</p>
+		<p>"Grab on!" A voice calls out from the darkness.</p>
+		<p>A life vest hits the water and floats within arm's distance.</p>
+		<p>The shivering body is pulled up onto the boat.</p>
+		<p>"Wow, you're heavier than you look. Are you OK? What's your name?"</p>
+		<p>...</p>
+		<p class="center">Write your reply & hit enter:</p>
+		<form class="center">
+			<input class="loud" style="width: 60%;">
+		</form>
+	</div>
+	<script>
+	;(function(){
+		$('form').on('submit', function(eve){ eve.preventDefault() });
+		$('#cyberninjas4').on('submit', function(){
+			var name = $(this).find('input').val();
+			if(!name.length){ return }
+			$('.story-name').text(' '+(window.NAME = name));
+			$('#hud .score').removeClass('up');
+			location.hash = 'cyberninjas5';
+		})
+	}());
+	</script>
+</div>
+
+<div id="cyberninjas5" class="hold full green">
+	<style>
+	#cyberninjas5:target .story {
+	  animation: print 3s steps(50, end);
+	}
+	</style>
+	<div class="story pad">
+		<p>"Well<span class="story-name"></span>, it's a miracle you did not die in the building explosion or from that fall."</p>
+		<p>"What is going on? What happened?"</p>
+		<p>"You can't remember? Your brain must be knocked up pretty hard."</p>
+		<p>"No, I was mid copy into this body and now my memories are glitching."</p>
+		<p>"Woah, you're one of those pro elite AREION revolutionaries? All flesh & blood! Dense, too. I would've assumed they were stealing AutoMecha tech for that instead."</p>
+		<p>"I was about to be told vital data for the resistance, but then they blew up the build--"</p>
+		<p>...</p>
+		<p>"Hey, what's the matter?"</p>
+		<p>"My mom. She was in there. I need to go back. Please, help me and tell me everything you know."</p>
+		<p>"I'm so sorry. I can only get so close with the boat, you're gonna have to jump over a lot of broken bits. You ready?"</p>
+		<p>...</p>
+		<a class="unit yak" href="#cyberninjas6"><button>GO!</button></a>
+	</div>
+</div>
+
+<div id="cyberninjas6" class="hold full green">
+	<style>
+	#cyberninjas6:target .story {
+	  animation: print 3s steps(50, end);
+	}
+	</style>
+	<div class="story pad">
+		<p class="center">... to be continued ...</p>
+		<div id="player" style="position: fixed; width: 1em; height: 1em; background: white; left: 50%; top: 50%; border-radius: 100%;"></div>
+		<!-- jumping game ? like offline dinosaur ? -->
+	</div>
+	<script src="../../../gun/lib/meta.js"></script>
+	<script>
+	;(function(){
+		var p = $('#player');
+		p.x = 50;
+		p.y = 50;
+		meta.edit({
+			name: "Up",
+			combo: ["W"],
+			on: function(){
+				console.log("up");
+				this.to = this.to || setInterval(this.on, 100);
+				$("html, body").stop().animate({ scrollTop: $(window).scrollTop()-100 }, 100);
+				p.css({top: --p.y +'%'});
+			},
+			use: function(){},
+			up: function(){ clearTimeout(this.to); this.to = 0 }
+		});
+		meta.edit({
+			name: "Left",
+			combo: ["A"],
+			on: function(){ 
+				console.log("left");
+				this.to = this.to || setInterval(this.on, 100);
+				p.css({left: --p.x +'%'});
+			},
+			use: function(){},
+			up: function(){ clearTimeout(this.to); this.to = 0 }
+		});
+		meta.edit({
+			name: "Down",
+			combo: ["S"],
+			on: function on(){
+				console.log("down");
+				this.to = this.to || setInterval(this.on, 100);
+				$("html, body").stop().animate({ scrollTop: $(window).scrollTop()+100 }, 100);
+				p.css({top: ++p.y +'%'});
+			},
+			use: function(){},
+			up: function(){ clearTimeout(this.to); this.to = 0 }
+		});
+		meta.edit({
+			name: "Right",
+			combo: ["D"],
+			on: function(){
+				console.log("right");
+				this.to = this.to || setInterval(this.on, 100);
+				p.css({left: ++p.x +'%'});
+			},
+			use: function(){},
+			up: function(){ clearTimeout(this.to); this.to = 0 }
+		});
+		meta.edit({
+			name: "Jump",
+			combo: [32],
+			on: function(){ console.log("jump") },
+			use: function(){},
+			up: function(){}
+		});
+		meta.edit({
+			name: "Crouch",
+			combo: [16],
+			on: function(){ console.log("crouch") },
+			use: function(){},
+			up: function(){}
+		});
+		meta.edit({
+			name: "Use",
+			combo: ["E"],
+			on: function(){ console.log("use") },
+			use: function(){},
+			up: function(){}
+		});
+		meta.edit({
+			name: "Fire",
+			combo: ["F"],
+			on: function(){ console.log("fire") },
+			use: function(){},
+			up: function(){}
+		});
+		meta.edit({
+			name: "Switch",
+			combo: [9],
+			on: function(){ console.log("Switch") },
+			use: function(){},
+			up: function(){}
+		});
+		window.requestAnimationFrame = window.requestAnimationFrame || setTimeout;
+		window.requestAnimationFrame(function frame(){
+			window.requestAnimationFrame(frame, 16);
+
+		}, 16);
+	}());
+	</script>
+</div>
+
+<div id="automecha" class="hold full white blackt">
+	<style>
+	#automecha:target .story {
+	  animation: print 3s steps(50, end);
+	}
+	</style>
+	<div class="story pad">
+		<p class="loud crack">Episode 1: Training</p>
+		<p>...</p>
+	</div>
+</div>
+
+
+<div class="hold black center">
+	<div class="pad">
+		<div class="left">
+			<p class="loud">For <i>You</i>,</p>
+			<p>Crafted with love, <span class="redt">♥</span> by ERA.</p>
+		</div>
+	</div>
+	<div>
+		<img src="https://era.eco/media/world.png" class="row">
+	</div>
+</div>
+
+</body>
+</html>

examples/game/nts.html

@@ -0,0 +1,19 @@
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	</head>
+	<body style="text-align: center;">
+		<h1 id="when" style="font-size: 7vw; margin-top: 43vh; font-family: monospace;"></h1>
+	</body>
+	<script src="/gun.js"></script>
+	<script src="/gun/nts.js"></script>
+	<script>
+		window.gun = Gun(location.origin+'/gun');
+		requestAnimationFrame(function now(){
+			requestAnimationFrame(now);
+			var time = new Date(Gun.state());
+			var print = time.toLocaleString() +' '+ (time.getMilliseconds()/1000).toFixed(3).slice(1);
+			when.innerHTML = print;
+		});
+	</script>
+</html>

examples/game/space.html

@@ -0,0 +1,281 @@
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	</head>
+	<div id="area">
+		<div id="me" class="ship">
+			<div class="laser"></div>
+		</div>
+	</div>
+	<p id="debug" style="position: fixed; bottom: 0px; color: white; height: 1em;"></p>
+	<script src="../jquery.js"></script>
+	<script src="../../../gun/gun.js"></script>
+	<!-- script src="../../../gun/nts.js"></script -->
+	<script src="../../../gun/lib/webrtc.js"></script>
+	<script>
+		// Thanks to https://github.com/dmcinnes/HTML5-Asteroids
+		//var gun = Gun();
+		var gun = GUN(location.origin + '/gun');
+		var game = {gun: gun.get('example/game/space'), area: {}, ships: {}};
+		game.keys = {38: 'up', 37: 'left', 39: 'right', 40: 'down', 32: 'space'};
+		$(document).on('keydown', function(e){
+			//e.preventDefault();
+			var key = e.keyCode, me;
+			game.keys[key = game.keys[key]] = true;
+			if(!(me = game.me)){ return }
+			me.last = game.now;
+			if('space' === key){ game.shoot(game.me) }
+		});
+		$(document).on('keyup', function(e){
+			//e.preventDefault();
+			game.sync();
+			game.keys[game.keys[e.keyCode]] = false;
+		});
+		game.shoot = function(ship, when){
+			if(!ship || ship.l){ return }
+			if(!when && ship.gun && ship.data){
+				ship.data.l = game.now;
+				game.sync(true);
+				return;
+			}
+			if(when + 250 < game.now){ return }
+			ship.l = true;
+			ship.$.children('.laser').show();
+			setTimeout(function(){
+				ship.$.children('.laser').hide();
+				setTimeout(function(){
+					ship.l = false;
+				}, 250);
+			}, 250 - (game.now - when));
+		}
+		game.ship = function(d, el){
+			if(!d){ // spawn our ship
+				var id = String.random(1, 'abcdefghijklmno');
+				game.me = game.ships[id] = {data: d = {id: id, t: game.now}};
+				game.me.gun = game.gun.get('players').get(d.id).put(d);
+				return;
+			}
+			if(!d.id){ return }
+		  if(!game.ships[d.id]){
+				game.ships[d.id] = {};
+		  }
+		  var s = game.ships[d.id];
+			s.t = d.t || (d.t = 0);
+		  s.x = d.x || (d.x = game.area.x * Math.random());
+			s.y = d.y || (d.y = game.area.y * Math.random());
+			s.r = d.r || (d.r = 0);
+			s.vx = d.vx || (d.vx = 0);
+			s.vy = d.vy || (d.vy = 0);
+			s.vr = d.vr || (d.vr = 0);
+			s.ax = s.ax || 0;
+			s.ay = s.ay || 0;
+			s.ar = s.ar || 0;
+		  s.data = d;
+			s.$ = s.$ || (s.gun? ($('#me'))
+			: $('#me').clone(true).attr('id', d.id).appendTo('#area'));
+			if(!s.l){
+				game.shoot(s, d.l);
+			}
+			s.frame = s.frame || function(t, now){
+				if(s.gun){
+					s.fly(t, now);
+				}
+				if(s.calc(t, now)){ return }
+				s.draw();
+			}
+			var keys = game.keys;
+			var area = game.area;
+			s.fly = s.fly || function(t, now){
+				if(keys.left){
+		      s.r += -6;
+		    } else
+		    if(keys.right) {
+		      s.r += 6;
+		    }
+		    if(keys.up){
+		      var rad = ((s.r - 90) * Math.PI)/180;
+		      s.ax = 0.0001 * Math.cos(rad);
+		      s.ay = 0.0001 * Math.sin(rad);
+		    } else {
+		      s.ax = 0;
+		      s.ay = 0;
+		    }
+
+		    Object.keys(game.ships).forEach(function(key, ship){
+		    	ship = game.ships[key];
+		    	if(ship.gun){ return }
+		    	if(!ship.l){ return }
+		    	if(ship.x-50 <= s.x && s.x <= ship.x+50
+		    	&& ship.y-50 <= s.y && s.y <= ship.y+50){
+		    		s.data.t = -1;
+		    		game.sync(true);
+		    		s.boom = true;
+		    	}
+		    });
+
+		    s.vx += s.ax * t;
+		    s.x += s.vx * t;
+		    s.vy += s.ay * t;
+		    s.y += s.vy * t;
+		    var data = s.data;
+		    if(!data){ return }
+		    data.r = s.r;
+		    data.vx = s.vx;
+		    data.x = s.x;
+		    data.vy = s.vy;
+		    data.y = s.y;
+		    if(data.t < 0){ return }
+		    data.t = now;
+		    s.t = data.t;
+			}
+			s.calc = s.calc || function(t, now){
+		    var d = s.data;
+		    var dt = (now - d.t) || 0;
+		    if(dt > 30 * 1000){
+		    	delete game.ships[d.id];
+		    	s.$.remove();
+		    	return true;
+		    }
+		    if(!d){ return }
+		    var speed = Math.sqrt(d.vx * d.vx + d.vy * d.vy);
+		    if(speed > 0.15){
+		    	s.vy = d.vy = d.vy / speed * 0.15;
+		    	s.vx = d.vx = d.vx / speed * 0.15;
+		    }
+		    s.x = d.x + d.vx * dt;
+		    s.y = d.y + d.vy * dt;
+
+		    s.x = s.x % area.x;
+		    if(s.x < 0){
+		      s.x += area.x;
+		    }
+		    s.y = s.y % area.y;
+		    if(s.y < 0){
+		      s.y += area.y;
+		    }
+			}
+			s.draw = s.draw || function(){
+		    s.css = 'rotate('+s.r+'deg)';
+		    s.$.css({left: s.x, top: s.y, transform: s.css});
+		  }
+			return s;
+		}
+		game.sync = function(shoot){
+			var me = game.me;
+			if(!me || me.boom){ return }
+			var keys = game.keys;
+			if(shoot || keys.up || keys.right || keys.left || keys.down){
+				var data = {};
+				Object.keys(me.data).forEach(function(k){ data[k] = me.data[k] }); // 1 layer clone.
+				data.x = data.x / game.area.x;
+				data.y = data.y / game.area.y;
+				me.gun.put(data);
+			}
+		}
+		game.frame = window.requestAnimationFrame || setTimeout;
+		game.resize = function(){
+			game.area.x = $('#area').innerWidth();
+			game.area.y = $('#area').innerHeight();
+		}
+		$(window).on('resize', game.resize);
+		game.start = function(){
+			game.now = Gun.state();
+			game.resize();
+			game.ship();
+			game.gun.get('players').map().on(function(data, id){
+				data = JSON.parse(JSON.stringify(data)); // clone object, this is bad perf tho.
+				data.x = data.x * game.area.x;
+				data.y = data.y * game.area.y;
+				data.id = data.id || id;
+				game.ship(data);
+			});
+			var frame = game.frame, ships = game.ships;
+			var last = game.now, now, diff, delta;
+			setInterval(game.sync, 99);
+			frame(function next(t){
+				frame(next, 1000/60);
+		    now = game.now = Gun.state();
+		    diff = now - last;
+		    last = now;
+		    Object.keys(ships).forEach(function(key, ship){
+		    	ship = ships[key];
+		    	if(!ship.frame){ return }
+					ship.frame(diff, now);
+		    });
+			}, 1000/60);
+		}
+		$(function(){
+			game.start();
+		});
+
+		// test WebRTC
+		gun.on('hi', function(peer){
+			console.log("hi!", peer);
+			if(peer.url){ return }
+			var peers = gun.back('opt.peers');
+			Object.keys(peers).forEach(function(id, peer){
+				peer = peers[id];
+				if(!peer.url || !peer.wire){ return }
+				peer.wire._send = peer.wire.send;
+				peer.wire.send = send;
+				var tmp = 'GOBBLE GOBBLE: Not sending any non-WebRTC messages to ' + peer.url;
+				console.log(tmp);
+				$('#debug').text(tmp);
+			});
+		});
+		function send(raw){
+			if(!raw){ return }
+			if(raw.indexOf('rtc') >= 0){
+				if(!this._send){ return }
+				return this._send(raw);
+			}
+		}
+	</script>
+	<style>
+		html, body {
+			margin: 0;
+			padding: 0;
+			background: #111;
+		}
+		html, body, div {
+			position: relative;
+		}
+		#area {
+		  width: 95%;
+		  width: 1024px;
+		  height: 768px;
+		  margin: 0 auto;
+		  background: black;
+		  overflow: hidden;
+		}
+		.ship {
+			position: absolute;
+			width: 0px;
+			height: 0px;
+			border-left: 5px solid transparent;
+			border-right: 5px solid transparent;
+			border-bottom: 15px solid red;
+			transform-origin: 50% 50%;
+			color: white;
+		}
+		#me {
+			border-bottom: 15px solid limegreen;
+		}
+		.boom {
+			border: 1vmax dotted yellow;
+			border-bottom: 1vmax dotted yellow;
+			height: 5vmax;
+			width: 1vmax;
+		}
+		.laser {
+			display: none;
+			position: relative;
+			background: transparent;
+			border: 2px dotted yellow;
+			height: 100px;
+			width: 100px;
+			top: -50px;
+			left: -50px;
+		}
+	</style>
+</html>

examples/game/win.html

@@ -0,0 +1,331 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- always start with these two lines to set a clean baseline for different devices -->
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="stylesheet" type="text/css" href="../style.css">
+<!-- link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/gun/examples/style.css" -->
+<script src="https://cdn.jsdelivr.net/npm/gun/examples/jquery.js"></script>
+
+<title>Win</title>
+</head>
+<body class="black whitet">
+<style>
+	/*
+		Choose white text on a black background so you can add color in.
+		Pick your favorite font and choose a font size.
+	*/
+	@import url('https://fonts.googleapis.com/css?family=Montserrat');
+	html, body {
+		font-family: "Montserrat", sans-serif;
+	}
+
+	button, input {
+		padding: 1em;
+		background: transparent;
+		border: 1px solid white;
+		border-radius: 1.5em;
+		color: white;
+		margin: 0.5em;
+		margin-bottom: 0;
+		cursor: pointer;
+	}
+	button:hover, input:hover {
+		background: white;
+		color: black;
+		transform: scale(1.1);
+	}
+
+	.air { padding-top: 9%; }
+	.yak button { font-size: 80%; }
+	.wag {
+	  -webkit-animation: wag 3s infinite;
+	  animation: wag 3s infinite;
+	} @keyframes wag {
+	  0%   {transform: rotate(0deg);}
+	  50%  {transform: rotate(-1deg);}
+	  100% {transform: rotate(0deg);}
+	}
+	</style>
+</style>
+
+<!-- for educational sites, consider starting with a nice full screen welcome message -->
+<div class="home hold full huef center air">
+	<div class="focus row">
+		<p><i>how to</i></p>
+		<p class="shout wag">Win at Life!</p>
+		<p><i>success, fame, power.</i></p>
+		<p><i>sex, ethics, & integrity.</i></p>
+		<!-- just like in real life, say who you are and give a concise reason why you add value to someone's life and then make a call to action, if they want to learn more they can always scroll to learn more -->
+		<div>
+			<!-- a class="unit hold" href="#fullscreen"><button>WATCH TRAILER</button></a -->
+			<a class="unit yak gap" href="#breathe"><button>PLAY GAME</button></a>
+		</div>
+	</div>
+	<div class="focus center row leak">
+		<!-- just like in real life, looking pretty attracts attention, so show off and look glamorous! -->
+		<img class="unit blink" src="" style="min-width: 10em; width: 80%;">
+	</div>
+	<script>location.hash = ''</script>
+	<script src="https://cdn.jsdelivr.net/npm/gun/lib/fun.js"></script>
+</div>
+
+<div id="breathe" class="hold full green">
+	<style>
+	</style>
+	<div class="story pad">
+		<p class="loud crack">Step 1: Breathe</p>
+		<a class="unit yak" href="#water"><button>Yupe</button></a>
+	</div>
+	<script>
+	</script>
+</div>
+
+<div id="water" class="hold full blue">
+	<style>
+	</style>
+	<div class="story pad">
+		<p class="loud crack">Step 2: Drink Water</p>
+		<p></p>
+		<a class="unit yak" href="#eat"><button>Next</button></a>
+	</div>
+	<script>
+	</script>
+</div>
+
+<div id="eat" class="hold full red">
+	<style>
+	</style>
+	<div class="story pad">
+		<p class="loud crack">Step 3: Eat Once a Day</p>
+		<p>If you do not want to be eaten, do not eat things that would not want to be eaten.</p>
+		<a class="unit yak" href="#babies"><button>Got It</button></a>
+	</div>
+	<script>
+	</script>
+</div>
+
+<div id="babies" class="hold full red">
+	<style>
+	</style>
+	<div class="story pad">
+		<p class="loud crack">Step 4: Babymaking* 😉</p>
+		<p>Find a willing player.</p>
+		<p><small> * This does not always make babies.</small></p>
+		<a class="unit yak" href="#make"><button>How?</button></a>
+	</div>
+	<script>
+	</script>
+</div>
+
+<div id="make" class="hold full hue">
+	<style>
+	</style>
+	<div class="story pad">
+		<p class="loud crack">Step 5: Make Dance</p>
+		<p>Moving your body is how you express your thoughts.</p>
+		<p>What you do with your body is what others will come to know you for. So do well.</p>
+		<p>You can make art, songs, or stories; You can make science, tools, or discoveries.</p>
+		<p>Who are you?</p>
+		<a class="unit yak" href="#science"><button>I am a Scientist!</button></a>
+		<a class="unit yak" href="#art"><button>I am an Artist!</button></a>
+	</div>
+	<script>
+	</script>
+</div>
+
+<div id="science" class="hold full hue">
+	<div class="story pad">
+		<p class="loud crack">Science: Knowing Games</p>
+		<p>If you must win one game, it should be the game of making games.</p>
+		<p>If you can make any game, then you will know how to win any game.</p>
+		<a class="unit yak" href="#games"><button>Games?</button></a>
+	</div>
+	<script>
+	</script>
+</div>
+
+<div id="games" class="hold full hue">
+	<div class="story pad">
+		<p>Games have goals and play.</p>
+		<p>Play is a safe space to try new dances.</p>
+		<p>Goals try to get players to do a type of dance.</p>
+		<a class="unit yak" href="#swim"><button>Start</button></a>
+	</div>
+	<script>
+	</script>
+</div>
+
+<div id="swim" class="hold full blue">
+	<style>
+	@import url('https://fonts.googleapis.com/css?family=Audiowide');
+	#hud {
+		opacity: 0.4;
+		font-family: 'Audiowide', cursive;
+		z-index: 999999999999;
+		transition: all 3s;
+	}
+	#hud .life {
+		position: fixed;
+		left: 50%;
+		bottom: 0px;
+		padding: 0.25em 1em 0.1em;
+		border-radius: 0.5em 0.5em 0 0;
+		transform: translateX(-50%);
+		background: black;
+		text-shadow: 0em -0.125em 0.75em white;
+	}
+	#hud .score {
+		position: fixed;
+		left: 50%;
+		top: 0px;
+		padding: 0.1em 1em 0.25em;
+		border-radius: 0 0 0.5em 0.5em;
+		transform: translateX(-50%);
+		background: black;
+		text-shadow: 0em 0.1em 0.75em white;
+	}
+	#hud .down {
+		bottom: -2em !important;
+	}
+	#hud .up {
+		top: -2em !important;
+	}
+	</style>
+	<div class="story pad">
+		<p>The simplest goal is to not "die" in the game.</p>
+		<p>Oh look, you've fallen into water and cannot breathe.</p>
+		<p>If you do not push the button to swim to the top, you'll lose the game.</p>
+		<a class="unit yak"><button>Swim</button></a>
+	</div>
+	<div id="hud">
+		<div class="score shade up">
+			SCORE: <span id="hudscore">0</span>%
+		</div>
+		<div class="life shade down">
+			LIFE: <span id="hudlife">100</span>%
+		</div>
+	</div>
+	<script>
+	;(function(){
+		var go, life = $('#hudlife').data();
+		$(window).on('hashchange', function(){
+			if(location.hash != '#swim'){ return }
+			$('#hudlife').text($('#hudlife').data().is = 100);
+			$('#hud .life').removeClass('down');
+			go = setInterval(function(){
+				if(0 >= life.is){
+					location.hash = 'die';
+					clearInterval(go);
+					go = false;
+					return;
+				}
+				$('#hudlife').text(life.is -= 1);
+			}, 100);
+		})
+		$('#swim a').on('click', function(){
+			$('#hudlife').text((life.is += 5) < 100? life.is : 100);
+			if(100 <= life.is){
+				location.hash = 'won';
+				clearInterval(go);
+				go = false;
+				return;
+			}
+		});
+	}());
+	</script>
+</div>
+
+<div id="won" class="hold full hue">
+	<div class="story pad">
+		<p>You won your first game! 🎉</p>
+		<p>See? I told you breathing is important.</p>
+		<p>You also learned the most basic dance: rapid poking.</p>
+		<p>The goal of the next game is to make the game you just won.</p>
+		<a class="unit yak" href="#won" style="z-index: 999999;"><button>Make</button></a>
+	</div>
+	<script src="https://cdn.jsdelivr.net/gh/amark/gun/lib/meta.js"></script>
+	<script>
+		meta.edit({name: "Add", combo: ['A']});
+		meta.edit({
+			name: "Timer",
+			combo: ['A','T'],
+			on: function(){
+				console.log("up");
+				this.to = this.to || setInterval(this.on, 100);
+				$("html, body").stop().animate({ scrollTop: $(window).scrollTop()-100 }, 100);
+				p.css({top: --p.y +'%'});
+			},
+			use: function(){},
+			up: function(){ clearTimeout(this.to); this.to = 0 }
+		});
+		meta.edit({
+			name: "Delete",
+			combo: ['A','D'],
+			on: function(){
+				$(meta.tap.on).remove();
+			},
+			use: function(){},
+			up: function(){}
+		});
+		meta.edit({
+			name: "Button",
+			combo: ['A','B'],
+			on: function(){
+				$(meta.tap.on).append("<a class='unit yak'><button>Button</button></a>")
+			},
+			use: function(){},
+			up: function(){}
+		});
+		meta.edit({
+			name: "Edit",
+			combo: ['E'],
+			on: function(){
+				$('body').attr('contenteditable', 'true' == $('body').attr('contenteditable')? false : true);
+			},
+			use: function(){},
+			up: function(){ }
+		});
+	</script>
+	<script>
+		window.requestAnimationFrame(function frame(){
+			return;
+			window.requestAnimationFrame(frame);
+			if(location.hash != '#won'){ return }
+			var p = $('#won a').offset();
+			var bx = p.left, by = p.top, mx = meta.tap.x, my = meta.tap.y;
+			bx = mx - bx; by = my - by;
+			var d = Math.sqrt(bx*bx + by*by);
+				console.log(bx, by, mx, my, d);
+			if(d > 250){ return }
+			$('#won a').css({position: 'fixed', left: bx + (Math.random()*100), top: by + (Math.random()*100)});
+		})
+	</script>
+</div>
+
+<div id="rules" class="hold full white blackt">
+	<style>
+	</style>
+	<div class="story pad">
+		<p class="loud crack">Bend these Rules if it is more Moral to do so</p>
+		<p></p>
+		<a class="unit yak" href="#water"><button>Next</button></a>
+	</div>
+	<script>
+	</script>
+</div>
+
+<div id="die" class="hold full red">
+	<style>
+	</style>
+	<div class="story pad">
+		<p class="loud crack">GAME OVER</p>
+		<p></p>
+		<a class="unit yak" href="#make"><button>Start Over</button></a>
+	</div>
+	<script>
+	</script>
+</div>
+
+</body>
+</html>

examples/hapi.js

@@ -0,0 +1,58 @@
+console.log("If module not found, install hapi globally `npm i hapi inert -g`!")
+
+const Hapi  = require('hapi')
+const Inert = require('inert')
+const Gun   = require('..')
+
+const server = new Hapi.Server({
+  port: 8765,
+  host: 'localhost',
+  routes: {
+    files: {
+      relativeTo: require('path').join(__dirname, '..')
+    }
+  }
+})
+
+async function runtime() {
+  
+  const db = new Gun({
+    web: server.listener,
+    file: 'data.json'
+  })
+
+  await server.register(Inert)
+
+  server.route({
+    method: 'GET',
+    path: '/gun.js',
+    handler: {
+      file:  'gun.min.js'
+    }
+  })
+
+  server.route({
+    method: 'GET',
+    path: '/gun/nts.js',
+    handler: {
+      file:  'nts.js'
+    }
+  })
+
+  server.route({
+    method: 'GET',
+    path: '/{param*}',
+    handler: {
+      directory: {
+        path: __dirname,
+        redirectToSlash: true,
+        index: true
+      }
+    }
+  })
+
+  await server.start()
+  console.log('Server running at:', server.info.uri)
+}
+
+runtime()

examples/hello-world.js

@@ -1,18 +0,0 @@
-var Gun = require('gun');
-var gun = Gun({
-  s3: {
-    key: '', // AWS Access Key
-    secret: '', // AWS Secret Token
-    bucket: '' // The bucket you want to save into
-  }
-});
-gun.put({ hello: 'world' }).key('my/first/data');
-
-var http = require('http');
-http.createServer(function(req, res){
-  gun.get('my/first/data', function(err, data){
-    res.writeHead(200, {'Content-Type': 'application/json'});
-    res.end(JSON.stringify(data));
-  });
-}).listen(1337, '127.0.0.1');
-console.log('Server running at http://127.0.0.1:1337/');

examples/http.js

@@ -1,32 +1,34 @@
-'use strict';
-var path = require('path');
-var http = require('http');
-var fs = require('fs');
-
-var port = process.env.OPENSHIFT_NODEJS_PORT || process.env.VCAP_APP_PORT || process.env.PORT || process.argv[2] || 80;
-var ip = process.env.OPENSHIFT_NODEJS_IP || '127.0.0.1';
-
-var Gun = require('gun');
-var gun = Gun({ 
-	file: 'data.json',
-	s3: {
-		key: '', // AWS Access Key
-		secret: '', // AWS Secret Token
-		bucket: '' // The bucket you want to save into
+;(function(){
+	var cluster = require('cluster');
+	if(cluster.isMaster){
+	  return cluster.fork() && cluster.on('exit',function(){ cluster.fork(); require('../lib/crashed') });
 	}
-});
 
-var server = http.createServer(function(req, res){
-	if(gun.wsp.server(req, res)){ 
-		return; // filters gun requests!
+	var fs = require('fs'), env = process.env;
+	var GUN = require('../'); // require('gun');
+	var opt = {
+		port: env.PORT || process.argv[2] || 8765,
+		peers: env.PEERS && env.PEERS.split(',') || []
+	};
+
+	if(fs.existsSync((opt.home = require('os').homedir())+'/cert.pem')){
+		env.HTTPS_KEY = env.HTTPS_KEY || opt.home+'/key.pem';
+		env.HTTPS_CERT = env.HTTPS_CERT || opt.home+'/cert.pem';
+	}
+	if(env.HTTPS_KEY){
+		opt.port = 443;
+		opt.key = fs.readFileSync(env.HTTPS_KEY);
+		opt.cert = fs.readFileSync(env.HTTPS_CERT);
+		opt.server = require('https').createServer(opt, GUN.serve(__dirname));
+		require('http').createServer(function(req, res){
+			res.writeHead(301, {"Location": "https://"+req.headers['host']+req.url });
+			res.end();
+		}).listen(80);
+	} else {
+		opt.server = require('http').createServer(GUN.serve(__dirname));
 	}
-	fs.createReadStream(path.join(__dirname, req.url)).on('error',function(){ // static files!
-		res.writeHead(200, {'Content-Type': 'text/html'});
-		res.end(fs.readFileSync(path.join(__dirname, 'index.html'))); // or default to index
-	}).pipe(res); // stream
-});
-gun.wsp(server);
-server.listen(port, ip);
-
-console.log('Server started on port ' + port + ' with /gun');
 
+	var gun = GUN({web: opt.server.listen(opt.port), peers: opt.peers});
+	console.log('Relay peer started on port ' + opt.port + ' with /gun');
+	module.exports = gun;
+}());

examples/https.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+cd ~
+git clone https://github.com/acmesh-official/acme.sh.git
+cd ~/acme.sh
+./acme.sh --install -m $EMAIL
+
+bash ~/acme.sh/acme.sh --issue -d $DOMAIN -w $WEB
+bash ~/acme.sh/acme.sh --install-cert -d $DOMAIN --key-file ~/key.pem --fullchain-file ~/cert.pem --reloadcmd "service relay force-reload"

examples/index.html

@@ -1,23 +1,4 @@
-<html>
-  <head>
-    <title>gun examples</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </head>
-  
-	<body>
-		<h1>Examples Directory <button style="float: right;" onclick="localStorage.clear()">Clear Local Storage</button></h1>
-		<style>
-			iframe {
-				width: 100%;
-				height: 50%;
-				border: none;
-				border-top: ridge 2em skyblue;
-			}
-		</style>
-		<a href="/todo/index.html"><iframe src="/todo/index.html"></iframe></a>
-		<a href="/json/index.html"><iframe src="/json/index.html"></iframe></a>
-		<a href="/chat/index.html"><iframe src="/chat/index.html"></iframe></a>
-		<script src="../gun.js"></script>
-	</body>
-</html>
+<!DOCTYPE html>
+<p>This is the examples folder.
+<p>The most basic example is <a href="./basic/note.html">./basic/note.html</a>!</p>
+<p>Home page temporarily disabled.</p>

examples/infinite-scroll/ScrollWindow.js

@@ -0,0 +1,116 @@
+const DEFAULT_OPTIONS = {
+  size: 20,
+  stickTo: 'top',
+};
+
+class ScrollWindow {
+  constructor(gunNode, opts = {}) {
+    this.opts = Object.assign(DEFAULT_OPTIONS, opts);
+    this.elements = new Map();
+    this.node = gunNode;
+    this.center = this.opts.startAt;
+    this.updateSubscriptions();
+  }
+
+  updateSubscriptions() {
+    this.upSubscription && this.upSubscription.off();
+    this.downSubscription && this.downSubscription.off();
+
+    const subscribe = params => {
+      this.node.get({ '.': params}).map().on((val, key, a, eve) => {
+        if (params['-']) {
+          this.downSubscription = eve;
+        } else {
+          this.upSubscription = eve;
+        }
+        this._addElement(key, val);
+      });
+    };
+
+    if (this.center) {
+      subscribe({ '>': this.center, '<': '\uffff' });
+      subscribe({'<': this.center, '>' : '', '-': true});
+    } else {
+      subscribe({ '<': '\uffff', '>': '', '-': this.opts.stickTo === 'top' });
+    }
+  }
+
+  _getSortedKeys() {
+    this.sortedKeys = this.sortedKeys || [...this.elements.keys()].sort();
+    return this.sortedKeys;
+  }
+
+  _upOrDown(n, up) {
+    this.opts.stickTo = null;
+    const keys = this._getSortedKeys();
+    n = n || (keys.length / 2);
+    n = up ? n : -n;
+    const half = Math.floor(keys.length / 2);
+    const newMiddleIndex = Math.max(Math.min(half + n, keys.length - 1), 0);
+    if (this.center !== keys[newMiddleIndex]) {
+      this.center = keys[newMiddleIndex];
+      this.updateSubscriptions();
+    }
+    return this.center;
+  }
+
+  up(n) {
+    return this._upOrDown(n, true);
+  }
+
+  down(n) {
+    return this._upOrDown(n, false);
+  }
+
+  _topOrBottom(top) {
+    this.opts.stickTo = top ? 'top' : 'bottom';
+    this.center = null;
+    this.updateSubscriptions();
+  }
+
+  top() {
+    this._topOrBottom(true);
+  }
+
+  bottom() {
+    this._topOrBottom(false);
+  }
+
+  _addElement(key, val) {
+    if (!val || this.elements.has(key)) return;
+    const add = () => {
+      this.elements.set(key, val);
+      this.sortedKeys = [...this.elements.keys()].sort();
+      const sortedElements = this.sortedKeys.map(k => this.elements.get(k));
+      this.opts.onChange && this.opts.onChange(sortedElements);
+    };
+    const keys = this._getSortedKeys();
+    if (keys.length < this.opts.size) {
+      add();
+    } else {
+      if (this.opts.stickTo === 'top' && key > keys[0]) {
+        this.elements.delete(keys[0]);
+        add();
+      } else if (this.opts.stickTo === 'bottom' && key < keys[keys.length - 1]) {
+        this.elements.delete(keys[keys.length - 1]);
+        add();
+      } else if (this.center) {
+        if (keys.indexOf(this.center) < (keys.length / 2)) {
+          if (key < keys[keys.length - 1]) {
+            this.elements.delete(keys[keys.length - 1]);
+            add();
+          }
+        } else {
+          if (key > keys[0]) {
+            delete this.elements.delete(keys[0]);
+            add();
+          }
+        }
+      }
+    }
+  }
+
+  getElements() {
+    return this.elements;
+  }
+}

examples/infinite-scroll/index.html

@@ -0,0 +1,30 @@
+<html>
+  <head>
+    <title>Infinite scroll example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
+    <link rel="stylesheet" type="text/css" href="./style.css">
+    <script src="/jquery.js"></script>
+    <script src="/gun.js"></script>
+    <script src="./ScrollWindow.js"></script>
+  </head>
+
+  <body>
+    <header>
+      <form id="generate">
+        <input type="text" id="number" placeholder="Number of posts"/>
+        <button>Generate</button>
+      </form>
+      <div id="top-buttons">
+        <button id="top">Top</button>
+      </div>
+    </header>
+
+    <div id="top-sentinel" style="padding-top: 0px;"></div>
+    <div id="container"></div>
+    <div id="bottom-sentinel" style="padding-top: 0px;"></div>
+
+    <button id="bottom">Bottom</button>
+
+    <script src="./index.js"></script>
+  </body>
+</html>

examples/infinite-scroll/index.js

@@ -0,0 +1,167 @@
+const gun = new Gun();
+
+const size = 20;
+const gunNode = gun.get('posts');
+
+function debounce(func, wait, immediate) {
+  var timeout;
+  return function() {
+    var context = this, args = arguments;
+    var later = function() {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    var callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+};
+
+let topSentinelPreviousY = 0;
+let topSentinelPreviousRatio = 0;
+let bottomSentinelPreviousY = 0;
+let bottomSentinelPreviousRatio = 0;
+let previousUpIndex = previousDownIndex = -1;
+
+const render = elements => {
+  const t = new Date();
+  elements.reverse().forEach((data, j) => {
+    var date = new Date(data.date);
+    $('#date' + j).text(date.toLocaleDateString() + ' ' + date.toLocaleTimeString());
+    $('#text' + j).text(data.text);
+    $('#img' + j).attr('src', '');
+    $('#img' + j).attr('src', _getCatImg(date.getTime()));
+    $('#post' + j).css({visibility: 'visible'});
+  });
+  console.log('rendering took', new Date().getTime() - t.getTime(), 'ms');
+  window.onRender && window.onRender(elements);
+};
+
+const onChange = debounce(render, 20);
+
+const scroller = new ScrollWindow(gunNode, {size, stickTo: 'top', onChange});
+
+const initList = () => {
+  for (var n = 0; n < size; n++) {
+    var el = $("<div>").addClass('post').attr('id', 'post' + n).css({visibility: 'hidden'});
+    el.append($('<b>').attr('id', 'date' + n));
+    el.append($('<span>').attr('id', 'text' + n));
+    el.append($('<img>').attr('id', 'img' + n).attr('height', 100).attr('width', 100));
+    $('#container').append(el);
+  }
+}
+
+const _getCatImg = (n) => {
+  const url = "https://source.unsplash.com/collection/139386/100x100/?sig=";
+  return url + n % 999999;
+};
+
+const getNumFromStyle = numStr => Number(numStr.substring(0, numStr.length - 2));
+
+const adjustPaddings = isScrollDown => {
+  const container = document.getElementById("container");
+  const currentPaddingTop = getNumFromStyle(container.style.paddingTop);
+  const currentPaddingBottom = getNumFromStyle(container.style.paddingBottom);
+  const remPaddingsVal = 198 * (size / 2); // TODO: calculate actual element heights
+  if (isScrollDown) {
+    container.style.paddingTop = currentPaddingTop + remPaddingsVal + "px";
+    container.style.paddingBottom = currentPaddingBottom === 0 ? "0px" : currentPaddingBottom - remPaddingsVal + "px";
+  } else {
+    container.style.paddingBottom = currentPaddingBottom + remPaddingsVal + "px";
+    if (currentPaddingTop === 0) {
+      $(window).scrollTop($('#post0').offset().top + remPaddingsVal);
+    } else {
+      container.style.paddingTop = currentPaddingTop - remPaddingsVal + "px";
+    }
+  }
+}
+
+const topSentCallback = entry => {
+  const container = document.getElementById("container");
+
+  const currentY = entry.boundingClientRect.top;
+  const currentRatio = entry.intersectionRatio;
+  const isIntersecting = entry.isIntersecting;
+
+  // conditional check for Scrolling up
+  if (
+    currentY > topSentinelPreviousY &&
+    isIntersecting &&
+    currentRatio >= topSentinelPreviousRatio &&
+    scroller.center !== previousUpIndex && // stop if no new results were received
+    scroller.opts.stickTo !== 'top'
+  ) {
+    previousUpIndex = scroller.center;
+    adjustPaddings(false);
+    scroller.up(size / 2);
+  }
+  topSentinelPreviousY = currentY;
+  topSentinelPreviousRatio = currentRatio;
+}
+
+const botSentCallback = entry => {
+  const currentY = entry.boundingClientRect.top;
+  const currentRatio = entry.intersectionRatio;
+  const isIntersecting = entry.isIntersecting;
+
+  // conditional check for Scrolling down
+  if (
+    currentY < bottomSentinelPreviousY &&
+    currentRatio > bottomSentinelPreviousRatio &&
+    isIntersecting &&
+    scroller.center !== previousDownIndex &&  // stop if no new results were received
+    scroller.opts.stickTo !== 'bottom'
+  ) {
+    previousDownIndex = scroller.center;
+    adjustPaddings(true);
+    scroller.down(size / 2);
+  }
+  bottomSentinelPreviousY = currentY;
+  bottomSentinelPreviousRatio = currentRatio;
+}
+
+const initIntersectionObserver = () => {
+  const options = {
+    //rootMargin: '190px',
+  }
+
+  const callback = entries => {
+    entries.forEach(entry => {
+      if (entry.target.id === 'post0') {
+        topSentCallback(entry);
+      } else if (entry.target.id === `post${size - 1}`) {
+        botSentCallback(entry);
+      }
+    });
+  }
+
+  var observer = new IntersectionObserver(callback, options); // TODO: It's possible to quickly scroll past the sentinels without them firing. Top and bottom sentinels should extend to page top & bottom?
+  observer.observe(document.querySelector("#post0"));
+  observer.observe(document.querySelector(`#post${size - 1}`));
+}
+
+initList(size);
+initIntersectionObserver();
+
+$('#top').click(() => {
+  scroller.top();
+  $('#container').css({'padding-top': 0, 'padding-bottom': 0});
+  $(document.body).animate({ scrollTop: 0 }, 500);
+});
+$('#bottom').click(() => {
+  scroller.bottom();
+  $('#container').css({'padding-top': 0, 'padding-bottom': 0});
+  $(document.body).animate({ scrollTop: $("#container").height() }, 500);
+});
+
+$('#generate').submit(e => {
+  e.preventDefault();
+  const day = 24 * 60 * 60 * 1000;
+  const year = 365 * day;
+  const n = Number($('#number').val());
+  for (let i = 0; i < n; i++) {
+    const d = new Date(40 * year + i * day).toISOString();
+    gunNode.get(d).put({text: 'Hello world!', date: d});
+  }
+});

examples/infinite-scroll/style.css

@@ -0,0 +1,77 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  padding-top: 65px;
+}
+
+header {
+  background: rgba(255,255,255,0.75);
+  padding: 15px;
+}
+
+header {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+}
+
+#bottom {
+  position: fixed;
+  right: 15px;
+  bottom: 15px;
+}
+
+input {
+  border: 0;
+  background-color: #efefef;
+  padding: 15px;
+  border-radius: 50px;
+}
+
+button {
+  background-color: #4a4f9d;
+  border: 0;
+  padding: 15px;
+  color: white;
+  border-radius: 50px;
+}
+
+input, button {
+  outline: none;
+  opacity: 1;
+}
+
+input:focus, button:focus, button:hover {
+  opacity: 0.8;
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+#top-buttons, form {
+  display: inline-block;
+  margin: 0;
+}
+
+#top-buttons {
+  float: right;
+}
+
+.post {
+  margin: 15px;
+  padding: 15px;
+  background-color: #9de1fe;
+  border-radius: 5px;
+}
+
+.post b {
+  margin-right: 5;
+}
+
+.post img {
+  display: block;
+  margin: 10px 0;
+}

examples/install.sh

@@ -3,25 +3,51 @@
 # README
 # This will install nodejs and npm on your system,
 # should work on most places other than Windows.
+# For it to run on boot as a server, a recent OS is needed.
+# Set any environment variables before you run this,
+# like `export RAD=false` to disable storage, or
+# pass file paths of `HTTPS_CERT` & `HTTPS_KEY`, etc.
 # Copy paste and run each line into your terminal.
 # If you are on Windows, http://nodejs.org/download/ has
-# a installer that will automatically do it for you.
+# an installer that will automatically do it for you.
+# curl -o- https://raw.githubusercontent.com/amark/gun/master/examples/install.sh | bash
+# wget -O - https://raw.githubusercontent.com/amark/gun/master/examples/install.sh | bash
 
 #debian/ubuntu
+cd ~
+apt-get install sudo -y
 sudo apt-get update -y
-sudo apt-get install curl git git-core -y
+sudo apt-get install curl git git-core systemd -y
+sudo apt-get install systemctl -y
 #fedora/openSUSE
 sudo yum check-update -y
-sudo yum install curl git git-core -y
+sudo yum install curl git git-core systemd -y
+sudo yum install systemctl -y
+
+#screen -S install # You can safely CTRL+A+D to escape without stopping the process. `screen -R install` to resume. Stop all with `killall screen`. Note: May need to `sudo apt-get install screen`
 
 # install nodejs
-git clone http://github.com/isaacs/nave.git
-sudo ./nave/nave.sh usemain stable
+git clone https://github.com/isaacs/nave.git
+./nave/nave.sh usemain stable
+
 # If you just want nodejs and npm but not gun, stop here.
-
-npm install gun
-
-# to run the gun examples:
-cd ./node_modules/gun/examples
+#npm install gun@latest
+#cd ./node_modules/gun
+mkdir node_modules
+git clone https://github.com/amark/gun.git
+cd gun
+git checkout .
+git pull
+git checkout master
+git checkout $VERSION
+git pull
 npm install .
-sudo /usr/local/bin/node ./express.js 80 # change `80` to `8080` for development purposes.
+
+cp ./examples/relay.service /lib/systemd/system/relay.service
+echo $PWD >> /lib/systemd/system/relay.service
+echo "fs.file-max = 999999" >> /etc/sysctl.conf
+ulimit -u unlimited
+sysctl -p /etc/sysctl.conf
+systemctl daemon-reload
+systemctl enable relay
+systemctl restart relay

examples/iris

@@ -0,0 +1 @@
+../node_modules/iris-messenger/src

examples/json/index.html

@@ -34,10 +34,12 @@
 			document.onkeyup = function(e){
 				if(!e || !e.target){ return } // ignore if no element!
 				if(!e.target.attributes.contenteditable){ return } // ignore if element content isn't editable!
+				console.log("save to", e.target.previousElementSibling.innerHTML, ":", e.target.innerHTML);
 				ref.path(clean(e.target.previousElementSibling.innerHTML)) // grab the label, which is in the previous element.
 				   .put( clean(e.target.innerHTML) ); // insert the value of the text in the current element.
 			}
-			ref.on(function(data){
+			ref.on(function(json){
+				var data = Gun.obj.copy(json); // make a snapshot!
 				delete data._; // skip meta data!
 				for(var field in data){
 					var val = String(data[field]), id = field.replace(/[^A-z]/ig, ''), elem; // make data safe.
@@ -56,7 +58,7 @@
 				color: skyblue;
 				background: transparent;
 				text-decoration: none;
-				cursor: poiner;
+				cursor: pointer;
 			}
 			ul, li {
 				list-style-type: none;

examples/move/index.html

@@ -0,0 +1,210 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <!--
+      HELP WANTED!
+      Build decentralized Open Source Uber/Lyft!
+      Need people with experience on:
+       - Leaflet API, zoom and tile coordinates for subscribing to surrounding area.
+       - Creating cute little driving icons that animate with heading/direction.
+    -->
+    <title>Move by Neon ERA</title>
+    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
+		<meta charset="utf-8">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.0.3/dist/leaflet.css"/>
+    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.0.3/dist/leaflet.js"></script>
+  </head>
+  <body>
+    <div id="map"></div>
+    <a id="share" class="hide"><div class="stick button">Request Ride</div></a>
+    <div id="link" class="hide">
+      <p>Copy and Paste this URL to your friends to share your location:</p>
+      <center>
+        <p id="follow">Location sharing not available!</p>
+      </center>
+      <p><b>Note</b>: Location may not sync when your device's screen is off or the tab is out of focus. You'd need to install this as an app for that to work.</p>
+      <center>
+        <a id="close"><div class="button">Close</div></a>
+      </center>
+    </div>
+    <textarea style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 5em;" id="debug"></textarea>
+    <style>
+      html, body, #map {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        font-family: Arial;
+        font-size: 16pt;
+        z-index: 1;
+      }
+      .stick {
+        position: absolute;
+        bottom: 1em;
+        right: 1em;
+      }
+      .button {
+        display: inline-block;
+        padding: 1em;
+        opacity: .5;
+        background: blue;
+        color: white;
+        z-index: 7;
+        transition: .25s all;
+      }
+      .button:hover {
+        opacity: 1;
+      }
+      .hide {
+        display: none;
+      }
+      #link {
+        position: absolute;
+        padding: 1em;
+        top: 2em;
+        left: 2em;
+        right: 2em;
+        bottom: 2em;
+        background: white;
+        overflow: scroll;
+        z-index: 9;
+      }
+      #follow {
+        background: #EEE;
+        padding: .5em;
+        word-wrap: break-word;
+      }
+    </style>
+    <script src="/jquery.js"></script>
+    <script src="/gun.js"></script>
+    <script>
+      function Where(opt, cb){
+        // a small wrapper around Leaflet for map tracking.
+        var where = {};
+        where.opt = opt || {};
+        where.opt.zoom = where.opt.zoom || {};
+        where.opt.err = where.opt.err || function(){};
+
+        where.map = L.map('map', { zoom: where.opt.zoom.level });
+
+        where.opt.tile = where.opt.tile || L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
+          maxZoom: where.opt.zoom.max,
+          minZoom: where.opt.zoom.min,
+          detectRetina: true,
+          attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        });
+        where.map.addLayer(where.opt.tile);
+
+        L.GridLayer.DebugCoords = L.GridLayer.extend({
+            createTile: function (coords) {
+                var tile = document.createElement('div');
+                tile.innerHTML = [coords.z, coords.x, coords.y].join(', ');
+                tile.style.outline = '1px solid black';
+                return tile;
+            }
+        });
+        L.gridLayer.debugCoords = function(opts) {
+            return new L.GridLayer.DebugCoords(opts);
+        };
+        where.map.addLayer( L.gridLayer.debugCoords() );
+
+        where.opt.zoom.ing = where.opt.zoom.ing || function(){
+          where.opt.zoom.level = where.map.getZoom();
+        }
+        where.map.on('zoomstart', where.opt.zoom.ing, where.opt.err);
+        where.map.on('zoomend', where.opt.zoom.ing, where.opt.err);
+        where.map.on('zoomlevelschange', where.opt.zoom.ing, where.opt.err);
+
+        where.update = function(latlng){
+          if((+new Date) - where.update.last < 400){
+            clearTimeout(where.update.to);
+            where.update.to = setTimeout(function(){
+              where.update(latlng);
+            });
+            return;
+          }
+          var z = 12;
+          var x = lng2tile(latlng.lng, z);
+          var y = lat2tile(latlng.lat, z);
+          console.log(x, y); //
+          where.map.setView(latlng, where.opt.zoom.level, {animate: true});
+          where.marker = where.marker || L.marker().setLatLng(latlng).addTo(where.map);
+          where.marker.setLatLng(latlng).update();
+          where.update.last = (+new Date);
+        }
+
+        if(where.opt.track){
+          where.map.on('locationfound', function(pos){
+            where.update(pos.latlng);
+            where.opt.track(pos);
+          });
+
+          where.map.locate({
+            setView: true,
+            zoom: where.opt.zoom.level,
+            watch: where.opt.continuous || true,
+            timeout: where.opt.timeout || 10000,
+            maximumAge: where.opt.maximumAge || 0,
+            enableHighAccuracy: where.opt.enableHighAccuracy || false
+          });
+        }
+
+        function lng2tile(lng,z) { return (Math.floor((lng+180)/360*Math.pow(2,z))) }
+        function lat2tile(lat,z)  { return (Math.floor((1-Math.log(Math.tan(lat*Math.PI/180) + 1/Math.cos(lat*Math.PI/180))/Math.PI)/2 *Math.pow(2,z))) }
+
+        return where;
+      }
+    </script>
+    <script>
+      ;(function(){
+        // the actual GPS tracking app!
+        var gun = Gun(location.origin + '/gun');
+        var gps = {};
+        gps.opt = {
+          continuous: true, // get location just once uses `getCurrentPosition()` while continuously uses `watchPosition()`
+          enableHighAccuracy: true, // HighAccuracy uses more resources, https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions
+          timeout: 5000, // have this long to get data before erring.
+          maximumAge: 0, // set to 0 to actually track.
+          zoom: {max: 18, level: 13, min: 12}
+        }
+        function start(){
+          gps.follow = (window.location.hash || '').slice(1);
+          if(gps.follow){
+            gps.where = gps.where || Where(gps.opt);
+            gps.ref = gun.get('gps/' + gps.follow);
+            gps.ref.on(function(latlng){
+              //$('#debug').value = 'track ' + JSON.stringify(latlng);
+              gps.where.update(latlng);
+            });
+            $('#share').addClass("hide");
+          } else {
+            document.cookie = 'gps=' + (gps.track = (document.cookie.match(/gps\=(.*?)(\&|$|\;)/i)||[])[1] || String.random(5)); // trick with cookies!
+            gps.ref = gun.get('gps/' + gps.track);
+            gps.opt.track = function(pos){
+              pos = pos.latlng;
+              if(gps.follow
+              || Gun.state() - gps.when < 1000
+              || gps.last && gps.last.lat == pos.lat && gps.last.lng == pos.lng){
+                return; // throttle!
+              }
+              gps.when = Gun.state();
+              gps.ref.put(gps.last = pos);
+              //$('#debug').value = JSON.stringify(gps.last);
+            }
+            gps.where = gps.where || Where(gps.opt);
+            $('#follow').text((location.origin + location.pathname) + '#' + gps.track);
+            $('#share').removeClass("hide");
+            $('#share').on('click', function(){
+              $('#link').toggleClass("hide");
+            });
+            $('#close').on('click', function(){
+              $('#link').toggleClass("hide");
+            });
+          }
+        }
+        start();
+        window.onhashchange = start;
+      }());
+    </script>
+  </body>
+</html>

examples/package.json

@@ -1,17 +0,0 @@
-{
-	"name": "examples",
-	"main": "http.js",
-	"description": "Example gun apps"
-,	"version": "0.0.3"
-,	"engines": {
-		"node": "~>0.10.x"
-	}
-,	"dependencies": {
-		"express": "~>4.13.4",
-		"gun": "~>0.3.0"
-	}
-,	"scripts": {
-        "start": "node http.js",
-        "test": "mocha"
-    }
-}

examples/party.html

@@ -0,0 +1,758 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Party by Neon ERA</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link rel="stylesheet" type="text/css" href="./style.css">
+		<link href="https://fonts.googleapis.com/css?family=Raleway:100" rel="stylesheet">
+		<link href="https://fonts.googleapis.com/css?family=Caveat" rel="stylesheet">
+		<style>
+			.write {
+				font-family: 'Caveat', sans-serif;
+			}
+			.shout {
+				font-size: 36pt;
+				font-size: 6.5vmax;
+			}
+			.edit {
+				border-bottom: 1px dashed white;
+				cursor: pointer;
+			}
+			.back {
+				position: absolute;
+				top: 0.5%;
+				left: 0.5em;
+				width: 2em;
+				height: 2em;
+				z-index: 99999;
+			}
+		</style>
+		<script src="./jquery.js"></script>
+		<script src="../../gun/gun.js"></script>
+		<script src="../../gun/sea.js"></script>
+		<script src="../../gun/as.js"></script>
+		<script src="../../gun/nts.js"></script>
+		<script src="../../gun/lib/time.js"></script>
+		<script src="../../gun/lib/upload.js"></script>
+		<script>
+			;(() => {
+				function S(){};
+				window.S = S;
+				try{localStorage.clear();//sessionStorage.clear();
+				}catch(e){}
+				S.gun = Gun(location.host? location.origin+'/gun' : 'http://localhost:8765/gun');
+				//S.gun = Gun('http://localhost:8765/gun');
+				//S.gun = Gun();
+				S.app = S.gun.get('examples/social/2');
+				S.user = S.gun.user();
+				S.tell = (what, n) => {
+					var e = $('#tell').find('p');
+					e.addClass('notify').text(what);
+					clearTimeout(S.tell.to);
+					S.tell.to = setTimeout(() => { e.removeClass('notify') }, n || 2500);
+					return what;
+				}
+				this.S = S;
+			})();
+		</script>
+	</head>
+	<body class="whitet black">
+
+		<div id="hi" class="hue page">
+			<style>
+				#hi input {
+					padding: 0.4em 0.8em;
+					font-size: 1.5em;
+					margin-left: 2%;
+					margin-bottom: 2%;
+				}
+				#hi .faces img {
+					w-idth: 5%;
+					width: 3em;
+					width: 7vh;
+				}
+				#hi .ton {
+					border-radius: 1em;
+					font-size: 150%;
+					font-size: 2.25vmax;
+					margin: 0 0.5em 0 0.5em;
+					background: transparent;
+					border: 1px solid white;
+					color: white;
+					font-family: 'Raleway', sans-serif;
+				}
+				#hi .ton:hover {
+					background: white;
+					color: black;
+				}
+			</style>
+			<div class="loud write shout rim">Join the Private Party!</div>
+			<div id="faces" class="flush faces">
+				<div class="right" style="max-width: 30em;">
+					<a href="chrome://extensions" target="_blank"><button class="ton">Install Now</button></a>
+					<a href="#"><button class="ton">How It Works</button></a>
+					<!-- input id="halias" class="write jot sap" placeholder="username">
+					<input id="hpass" type="password" class="write jot sap" placeholder="passphrase" -->
+					<script>
+						$.as.route.page('hi', () => {
+							$('#hpass').on('focus', () => {
+								var alias = $("#halias").val();
+								if(!alias){ return }
+								$('#alias').val(alias);
+								$.as.route('sign');
+								$('#pass').focus();
+							});
+							setTimeout(() => { 
+								$('#halias').focus();
+								window.faces('#faces', 100);
+								window.faces('#faces2', 40);
+							},1);
+						});
+						if(!location.hash){
+							$.as.route('hi');
+						}
+					</script>
+				</div>
+			</div>
+			<script>
+				;(window.faces = function faces(id, lim, i){
+					//return
+					if(!$('#hi').is(':visible')){ return }
+					if(!id){ return }
+					if(!faces.on){ faces.on = id }
+					if(faces.on != id){
+						faces.was = faces.was || {};
+						if(faces.was[id]){ return }
+						(faces.next = faces.next || []).push([faces.was[id] = id, lim]);
+						return;
+					}
+					if(i >= (lim || 100)){
+						faces.on = null;
+						var tmp = faces.next && faces.next.shift();
+						tmp && faces(tmp[0], tmp[1]);
+						return;
+					}
+					$.ajax({
+					  url: 'https://randomuser.me/api/',
+					  dataType: 'json',
+					  success: (data) => {
+					    faces(id, lim || 100, (i || 0) + 1);
+					    if(!data || !data.results){ return }
+					    var tmp = data.results[0];
+					 		if(!tmp || !(tmp = tmp.picture)){ return }
+					  	tmp = tmp.thumbnail;
+					  	if(!tmp || faces[tmp]){ return }
+					  	faces[tmp] = true;
+					  	tmp = $('<img>').attr('src', tmp).fadeIn().appendTo(id || '#faces');
+					  	
+					  	tmp = tmp.offset(); 
+					  	var r = Math.random() * 30;
+					  	window.fun && window.fun({x: tmp.left - r, y: tmp.top - $(window).scrollTop() - r});
+					  }
+					});
+					return faces;
+				});
+			</script>
+			<div class="pad ditch">
+				<p class="loud"><i>Your friend has invited you to add a privacy extension to your browser:</i></p>
+				<p> - Decrypts your friends' messages across any site!</p>
+				<p> - Stops tech monopolies from selling your private data to advertisers.</p>
+				<p> - Gives you ownership and control over all your data online.</p>
+				<p> - Creates a searchable history of your posts, friends, and more!</p>
+			</div>
+			<div id="faces2" class="flush faces"></div>
+			<div class="pad ditch">
+				<p class="loud"><i>Express your thoughts & connect with the world around you!</i></p>
+				<p> - Discover new relationships.</p>
+				<p> - Keep up with friends and news in realtime.</p>
+				<p> - Watch fun videos and photos from people who share.</p>
+				<p> - But this time, you own it: fully decentralized.</p>
+			</div>
+			<div class="pad ditch" style="margin-top: 1em;">
+				<p><span class="loud write shout">Welcome,</span><!-- span class="write loud">, you are currently connected to <b id="peers" class="huet4">2</b> peers. <b>Why not try to sign up or log in?</b></span --></p>
+				<p> - Your identity is created here, by you. Not on a server.</p>
+				<p> - It uses secure <a href="https://gun.eco/docs/Cartoon-Cryptography">cryptographic</a> methods to protect you.</p>
+				<p> - Only you have access to it, meaning even we cannot reset your password!</p>
+				<p> - For added security, you can freely <a href="https://github.com/amark/gun">download</a> and run it on your own computer.</p>
+			</div>
+			<div class="black">
+				<div class="pad huet">
+					<div class="write center">Crafted with <span class="redt">♥</span> by <span class="loud">era</span>.</div> 
+				</div>
+			</div>
+		</div>
+
+		<div id="sign" class="hue page">
+			<style>
+				#sign input, button {
+					margin: 0.2em 0;
+					padding: 0.5em 1em;
+				}
+				#sign .sign {
+					font-size: 30pt;
+				}
+				#sign .pow {
+					margin: 0em 0;
+					padding: 0em 1em;
+					background: transparent;
+					border-bottom: none;
+					text-align: center;
+					font-size: 5vmax;
+					color: white;
+				}
+				#sign .act {
+					padding: 0.7em 1em;
+					width: 5em;
+				}
+				#sign .tos {
+					font-size: 10pt;
+				}
+			</style>
+			<form id="inup" class="pad center">
+				<div class="shout write">Welcome,</div>
+				<div class="mid row col">
+					<input id="alias" class="write sign jot sap" placeholder="username">
+				</div>
+				<div class="mid row col">
+					<input id="pass" class="write sign jot sap" type="password" placeholder="passphrase">
+				</div>
+				<div class="mid row col go">
+					<input id="in" type="submit" class="huet sap act symbol" value="sign in">
+  				<input id="up" type="button" class="huet sap act symbol" value="or up">
+				</div>
+				<span class="tos">By logging in or up, you agree to the <a href="https://github.com/amark/gun/blob/master/LICENSE.md" class="tos" target="_blank">Terms of Service</a>.</span>
+				<p class="tos"><a href="#forgot">Forgot password?</a></p>
+			</form>
+			<script>
+				;(() => {
+					S.route = location.hash.slice(1);
+					$('#up').on('click', (e) => {
+						var form = check();
+						if(!form){ return }
+						$("#up").addClass('pulse');
+						S.user.create(form.alias, form.pass, (ack) => {
+							if(!ack.wait){ $("#up").removeClass('pulse') }
+							if(ack.err){ return S.tell(ack.err) }
+							check.up = true;
+							S.user.auth(form.alias, form.pass);
+						});
+					});
+					$('#inup').on('submit', (e) => {
+						var form = check();
+						if(!form){ return }
+						$("#in").addClass('pulse');
+						S.user.auth(form.alias, form.pass, (ack) => {
+							if(!ack.wait){ $("#in").removeClass('pulse') }
+							if(ack.err){ return S.tell(ack.err) }
+						});
+					});
+					$('#pass').on('focus', () => {
+						$('#alias').addClass('pow');
+					});
+					$('#alias').on('focus', () => {
+						$('#alias').removeClass('pow');
+					});
+					$.as.route.page('sign', () => {
+						if(!$('#alias').val()){
+							setTimeout(() => { $('#alias').focus() },1);
+						}
+					});
+					var check = () => {
+						var form = {alias: ($('#alias').val()||'').toLowerCase(), pass: $("#pass").val()||''};
+						if(6 > form.alias.length){
+							S.tell("Your username needs to be longer than 5 letters.");
+							return;
+						}
+						if(9 > form.pass.length){ 
+							S.tell("Your passphrase needs to be longer than 9 letters.");
+							return;
+						}
+						return form;
+					}
+					S.gun.on('auth', (ack) => {
+						if('hi' === S.route){ S.route = '' }
+						if('sign' === S.route){ S.route = '' }
+						if(check.up){ S.route = 'settings' }
+						$.as.route(S.route = S.route || 'draft');
+					});
+					S.user.recall({sessionStorage: 1});
+				})();	
+			</script>
+		</div>
+
+		<div id="forgot" class="hue3 page">
+			<style>
+				#forgot .fill {
+					padding: 0.5em;
+				}
+			</style>
+			<a href="#sign" class="act back">&larr;</a>
+			<div class="pad">
+				<p class="shout write">Forgot Password</p>
+				<form>
+					<ul class="rim">
+						<li><input class="alias fill sap jot" placeholder="username"></li>				
+						<li>
+							<p>What was your first pet's name, the type of animal they were, and your favorite quirk about them? <span class="pet let"></span> <span class="pet length"></span>
+							<input class="pet fill sap jot" placeholder='"Bubbles was a goldfish, he played dead a lot." or "Fluffy is a cat, but she eats vegetables."'></p>
+						</li>
+						<li>
+							<p>Where was your first kiss? Describe what they looked like. <span class="kiss let"></span> <span class="kiss length"></span>
+							<input class="kiss fill sap jot" placeholder='"I kissed Alice in a tree, she was a redhead." or "Bob kissed me at the movies, he had green eyes."'></p>
+						</li>
+						<li class="loud write help"></li>
+						<li class="center rim sit"><input type="submit" class="fill huet3 sap act symbol" value="go" style="width: 4em;"></li>
+					</ul>
+				</form>
+				<script>
+					$.as.route.page('forgot', () => {
+						var _ = $('#forgot'), alias;
+						$('.alias',_).on('blur', () => {
+							alias = $('.alias',_).val();
+							if(!alias){ return }
+							$('.pet.length',_).val('');
+							$('.kiss.length',_).val('');
+							S.gun.get('alias/'+alias).once().map()
+								.get('settings').once(add);
+						}).focus();
+						var add = (set) => {
+							if(!set){ return }
+							var tmp;
+							(tmp = $('.pet.length',_)).text(tmp.text() +' '+ set.pet);
+							(tmp = $('.kiss.length',_)).text(tmp.text() +' '+ set.kiss);
+						}
+						$('.jot.pet',_).on('keyup', function(){ $('.pet.let',_).text(this.value.length + ' /') });
+						$('.jot.kiss',_).on('keyup', function(){ $('.kiss.let',_).text(this.value.length + ' /') });
+						$('form',_).on('submit', () => {
+							alias = alias || $('.alias',_).val();
+							if(!alias){ return S.tell("You need a username.") }
+							$('.act',_).addClass('pulse');
+							S.gun.get('alias/' + alias)
+								.once().map()
+								.get('settings')
+								.get('recover')
+								.once(recover);
+						});
+						var recover = async (data) => {
+							$('.act',_).removeClass('pulse');
+							var pet = $('.jot.pet',_).val();
+							var kiss = $('.jot.kiss',_).val();
+							var hint;
+							try{ hint = await Gun.SEA.decrypt(data, await Gun.SEA.work(pet, kiss));
+							}catch(e){}
+							if(!hint){ return S.tell("Nope. Try again!") }
+							$('.write.help',_).text(hint);
+						}
+					});
+				</script>
+			</div>
+		</div>
+		
+		<div id="settings" class="hue2 page">
+			<style>
+				#settings .fill {
+					padding: 0.5em;
+				}
+				#facedrop img {
+					vertical-align: middle;
+					border-radius: 100%;
+				}
+			</style>
+			<a href="#draft" class="act back">&larr;</a>
+			<div class="pad">
+				<p class="shout write">Settings</p>
+				<p>Your username is <i name="alias"></i>.</p>
+				<p id="facedrop">
+					Drop in a new profile photo: <img class="none">
+				</p>
+				<form id="recovery">
+					<p><b>Because no server can reset your password, you must fill out a "forgot password" recovery form.</b>
+					We recommend you use simple, grammatically correct, memorable sentences for your answers.
+					Keep each sentence less than 50 letters so that it will be easy for you to reconstruct -
+					the length of your reply will be stored as a hint to help.</p>
+					<ol class="rim">
+						<li>
+							<p>What was your first pet's name, the type of animal they were, and your favorite quirk about them? <span class="pet"></span>
+							<input id="pet" class="fill sap jot" placeholder='"Bubbles was a goldfish, he played dead a lot." or "Fluffy is a cat, but she eats vegetables."'></p>
+						</li>
+						<li>
+							<p>Where was your first kiss? Describe what they looked like. <span class="kiss"></span>
+							<input id="kiss" class="fill sap jot" placeholder='"I kissed Alice in a tree, she was a redhead." or "Bob kissed me at the movies, he had green eyes."'></p>
+						</li>
+						<li>
+							<p>The reminder of what your password is:</p>
+							<input id="pw-reminder" type="password" class="fill sap jot" placeholder='"Hint: Usual password + name of this app!"'></p>
+						</li>
+						<li class="center rim sit">
+							<input type="submit" class="fill huet2 sap act symbol" value="set" style="width: 4em;">
+						</li>
+					</ol>
+				</form>
+				<form id="reset">
+					<style>
+						#settings .thin {
+							max-width: 15em;
+							margin-right: 0.1em;
+							margin-bottom: 0.1em;
+						}
+					</style>
+					<p>We recommend you use a memorable and grammatically correct sentence as your passphrase.
+					Then write it down on paper and store it some place safe that will be easy for you to find. Here are some tips:</p>
+					<ul class="rim">
+						<li> - What gives you purpose and meaning in your life?</li>
+						<li> - Say something nice about an important person in your life.</li>
+						<li> - If you could work on your hobby full time, what goals would you have?</li>
+						<li> - Try to combine all of them into a rhyme, or something funny that makes you laugh.</li>
+						<li class="center rim">
+							<input id="oldpass" type="password" class="center thin fill sap jot" placeholder="old passphrase">
+							<input id="newpass" type="password" class="center thin fill sap jot" placeholder="new passphrase">
+							<input id="oldnew" type="submit" class="fill huet2 sap act symbol" value="change" style="width: 5em;"></li>
+						<li> - <i>Ex, "Uncle Ben taught me to fight for what is right, I might have a spider bite."</i></li>
+						<li> - <i>Ex, "I am quite better than the Dark Knight, despite any Kryptonite."</i></li>
+						<li> - <i>Ex, "Give me a cause for these claws, I have no paws and no laws."</i></li>
+						<li> - <i>Ex, "My suite is made of red supplements, with hidden jet compartments."</i></li>
+					</ul>
+				</form>
+				<p>You are currently connected to <i>2</i> peers.</p>
+				
+			</div>
+			<script>
+				$.as.route.page('settings', () => {
+					if(!S.user.is){ return $.as.route('hi') }
+					$.as('#settings', S.user);
+					
+					;(() => {
+						$('#pet').on('keyup', function(){ $('.pet').text(this.value.length + ' letters.') });
+						$('#kiss').on('keyup', function(){ $('.kiss').text(this.value.length + ' letters.') });
+						
+						S.user.get('settings').get('pet').on(function(l){ $('#pet').val(Gun.text.random(l, '*')) });
+						S.user.get('settings').get('kiss').on(function(l){ $('#kiss').val(Gun.text.random(l, '*')) });
+						
+						$('#recovery').on('submit', async (e) => {
+							var pet = $('#pet').val();
+							var kiss = $('#kiss').val();
+							var reminder = $('#pw-reminder').val(); // NOTE: THIS IS TEMPORARY!
+							if(!pet){ return S.tell("Please fill out the pet question!") }
+							if(!kiss){ return S.tell("Please fill out the first kiss question!") }
+							if(!reminder){ return S.tell("You need a password reminder.") } // NOTE: THIS IS TEMPORARY!
+							if(1+pet.indexOf('*') || 1+kiss.indexOf('*')){ return S.tell("Your answer should not have '*' in it.") }
+							$('#recovery .act').addClass('pulse');
+							var recover = await Gun.SEA.encrypt(reminder, await Gun.SEA.work(pet, kiss));
+							// NOTE: We are currently doing this manually, in the future we want to
+							// just automatically log the user back in based off the security questions
+							// rather than only giving them a "reminder" of what theirold  password is.
+							S.user.get('settings').put({
+								recover: recover,
+								pet: pet.length,
+								kiss: kiss.length
+							}, (ack) => {
+								$('#recovery .act').removeClass('pulse');
+								S.tell(ack.err || "Saved!");
+								$('#pw-reminder').val(''); // NOTE: THIS IS TEMPORARY!
+							});
+						});
+					})();
+					
+					
+					;(() => {
+						$('#reset').on('submit', (e) => {
+							var old = $('#oldpass').val();
+							var pass = $('#newpass').val() || '';
+							if(9 > pass.length){ return S.tell("Your passphrase needs to be longer than 9 letters.") }
+							if(!S.user.is){ return S.tell("You need to be logged in to do that.") }
+							$('#oldnew').addClass('pulse');
+							S.user.auth(S.user.is.alias, old, (ack) => {
+								$('#oldnew').removeClass('pulse');
+								S.tell(ack.err || "Saved!");
+								$('#oldpass, #newpass').val('');
+							}, {change: pass});
+						});
+					})();
+
+					;(async () => {
+						$('#settings').upload(function resize(e, up){
+							if(e.err){ return }
+							$('#settings').addClass('pulse');
+							if(up){ return up.shrink(e, resize, 64) }
+							$('#settings').removeClass('pulse');
+							$("#facedrop img").attr('src', e.base64).removeClass('none');
+							S.user.get('who').get('face').get('small').put(e.base64);
+						});
+						var img = await S.user.get('who').get('face').get('small').then();
+						if(img){ $('#facedrop img').attr('src', img).removeClass('none') }
+					})();
+				});
+			</script>
+		</div>
+		
+		<div id="out" class="hue page">
+			<script>
+				$.as.route.page('out', () => {
+					S.user.leave();
+					setTimeout(() => $.as.route('hi'), 1);
+				});
+			</script>
+		</div>
+
+		<div id="draft" class="hue page">
+			<style>
+				.draft {
+
+				}
+				#speak {
+					overflow: visible;
+					margin-bottom: 2em;
+				}
+	      #speak .draft:empty:not(:focus):before{
+	        content:attr(data-text);
+	      }
+				#speak input {
+					position: absolute;
+					bottom: -1.4em;
+					right: -2%;
+					width: auto;
+					color: white;
+					padding: 0.3em 1em;
+					background: transparent;
+					border: 1px solid white;
+					border-radius: 1em;
+					transition: all 0.2s ease-in;
+				}
+				#speak input:hover {
+					background: white;
+					color: #33cc33;
+				}
+				#draft ul .face {
+					float: left;
+					border-radius: 100%;
+					vertical-align: middle;
+					height: 1.5em;
+					margin-right: 2%;
+				}
+				#draft ul, #draft li {
+					overflow: visible;
+				}
+				#draft .what {
+				}
+				#draft .spoke {
+				}
+			</style>
+			<p class="pad">Welcome!</p>
+			<!--
+				People:
+				- stare
+				- scroll
+				- tap
+				- type
+				- talk
+				- take
+			-->
+			<form id="speak" class="mid row col">
+				<div id="d0" class="draft spoke gap tint sap editable" contenteditable="true" style="min-height: 1em;" data-text="Express yourself..."></div>
+				<input type="submit" class="sap hide" value="speak!">
+			</form>
+			<ul class="mid row col">
+			</ul>
+			<div class="model">
+				<li class="spoke tint sap gully">
+					<div class="gap"><span class="sort none"></span><img class="face act none"><b class="name"></b><div class="what"></div></div>
+				</li>
+			</div>
+			<div style="height: 10%;"></div>
+			<script>
+				$.as.route.page('draft', () => {
+					if(!S.user.is){ return $.as.route('hi') }
+					$('#speak').on('keyup', (e) => {
+						var say = $('#speak .draft').text();
+						if(!say){
+							$('#speak input').addClass('hide');
+							return;
+						}
+						$('#speak input').removeClass('hide');
+					});
+					window.user = S.user;
+					$('#speak').on('submit', (e) => {
+						var say = $('#speak .draft').text(); //.text(); // NO NO NO NO NO
+						if(!say){ return }
+						console.log('save!', say);
+						var ref = S.user.get('who').get('all').set({what: say, when: Gun.state()});
+						//ref.get('by').put(S.user.get('who'));
+						//S.user.get('who').get('said').time(ref);
+						S.user.get('who').get('said').set(ref);
+						//S.gun.get('@').time(ref);
+						$('#speak .draft').text('');
+					});
+					//S.gun.get('@').time(async (data, key, time) => {
+					S.user.get('who').get('said').map().once(async (data, key, time) => {
+						//var ref = S.gun.get(data), tmp;
+						//var said = await ref.then();
+						key = key.replace(/[^A-Za-z]/ig,'');
+						var tmp, said = data, time = said.when;
+						var $li = $($('#'+key)[0] || $('#draft .model .spoke').clone(true,true).attr('id', key)[(tmp = $.as.sort(time, $('#draft ul').children('li').first()))[0]?'insertBefore':'appendTo'](tmp[0] || '#draft ul'));
+						tmp = said.what;
+						if(tmp && tmp.ct){
+							tmp = JSON.stringify(tmp);
+							setTimeout(async function(){
+								tmp = await SEA.decrypt(said.what, S.user._.sea);
+								$li.find('.what').text(tmp);
+							}, 750);
+						}
+						$li.find('.what').text(tmp); // NORMALIAZE!!!
+						var by = S.user.get('who');// ref.get('by');
+						by.get('face').get('small').on(data => {
+							$li.find('.face').attr('src', data).removeClass('none');
+						});
+						by.get('name').on(data => {
+							data && $li.find('b').text(data);
+						});
+						$li.find('.sort').text(time);
+						var time = new Date(time);
+						$li.find('i').text(time.toDateString() + ', ' + time.toLocaleTimeString());
+						return;
+						var who = ref.get('by');
+						var face = await who.get('face').get('small').then();
+						if(face){
+							$li.find('.face').attr('src', face).removeClass('none');
+						}
+					});
+					$(document).on('click', '#speak .act.face', (eve) => {
+						
+					});
+				});
+			</script>
+		</div>
+
+		<div id="contacts" class="hue2 page">
+			<style>
+				#contacts ul .face {
+					float: left;
+					border-radius: 100%;
+					vertical-align: middle;
+					height: 2.5em;
+					margin-right: 5%;
+				}
+				#contacts ul, #contacts li {
+					overflow: visible;
+				}
+				#contacts .who {
+					display: inline-block;
+					margin-right: 2%;
+					min-width: 250px;
+					width: 15em;
+					text-align: left;
+					padding: 2%;
+					vertical-align: middle;
+				}
+				#contacts .what {
+				}
+				#contacts .spoke {
+				}
+			</style>
+			<p class="pad">Contacts</p>
+			<ul class="mid row col center">
+			</ul>
+			<div class="model">
+				<li class="who tint sap gully">
+					<div class="gap">
+						<span class="sort none"></span>
+						<img class="face act none" crossOrigin="Anonymous">
+						<big class="name"></big><br/>
+						<i class="alias"></i><br/>
+						<small>FB ID:</small> <span class="fbid"></span>
+					</div>
+				</li>
+			</div>
+			<div style="height: 10%;"></div>
+			<script>
+				$.as.route.page('contacts', () => {
+					if(!S.user.is){ return $.as.route('sign') }
+					//S.gun.get('@').time(async (data, key, time) => {
+
+					// TODO: BUG!! switch from `on` to `once` to get Martti's {_} empty object bug.
+					var $ul = $('#contacts ul');
+					S.user.get('old').get('fb').map().on(async function(data){
+						console.log('contact:', data);
+						var key = data.fbid, tmp;
+						if(!key){ return }
+						var $li = $($('#fbid'+key)[0] || $('#contacts .model .who').clone(true,true).attr('id', 'fbid'+key)[(tmp = $.as.sort(data.name||1, $ul.children('li').first()))[0]?'insertBefore':'appendTo'](tmp[0] || $ul));
+
+						$li.find('.name').text(data.name);
+						$li.find('.alias').text(data.alias);
+						$li.find('.fbid').text(data.fbid);
+						tmp = $li.find('img').attr('src', data.face || data.tmp);
+						if(!data.face){
+							var ref = this;
+							$.fn.upload.shrink(data.tmp, function(b64){
+								ref.get('face').put(b64);
+							}, 100); 
+						}
+						$('html, body').stop(true, true).animate({scrollTop: $ul.height()});
+					});
+					function img2b64(img, cb){
+						var c = document.createElement('canvas');
+						var ctx = c.getContext("2d");
+						ctx.drawImage(img, 10, 10);
+						cb(c.toDataURL());
+					}
+				});
+			</script>
+		</div>
+
+		<div id="tell" class="center">
+			<style>
+				#tell {
+					position: fixed;
+					top: 0;
+					left: 0;
+					right: 0;
+					height: 0;
+					overflow: visible;
+				}
+				#tell p {
+					top: -2em;
+					width: 50%;
+					border: solid #222 0.2em;
+					border-top: none;
+					padding: 1%;
+					opacity: 0;
+					visibility: hidden;
+					transition: visibility 2s, all 1s ease-in;
+				}
+				#tell .notify {
+					top: 0em;
+					opacity: 0.8;
+					visibility: visible;
+					transition: visibility 0s, all 0.25s ease-out;
+				}
+			</style>
+			<p class="mid black">Hello world!</p>
+		</div>
+		<!-- textarea id='debug' class="no-ne" style="position: fixed; bottom: 0; left: 0; width: 25%; height: 30%"></textarea -->
+		
+		<script>
+			$.as.route.page('person', () => {
+				if(!user.is){ return $.as.route('hi') }
+				var pub = location.hash.split('/').slice(-1)[0];
+				(pub === user._.pub? $('#say').show() : $('#say').hide());
+				as('#person', window.PUB = gun.get('pub/'+pub));
+			});
+
+			$(document).upload(function resize(e, up){
+				if(e.err){ return }
+				var m = $($("#d"+e.id)[0] || $('#d0').clone(true,true).attr('id', 'd'+e.id).css('backgroundImage', '').appendTo('#draft')).addClass('pulse');
+				if(up){ return up.shrink(e, resize, 1000) }
+				//console.log(e.id, e.base64);
+				m.removeClass('pulse').css({
+					backgroundImage: 'url(' + e.base64 + ')',
+					backgroundRepeat: 'no-repeat',
+					backgroundPosition: 'center',
+					backgroundSize: 'cover'
+				});
+			});
+		</script>
+		<script async src="../../gun/lib/fun.js"></script>
+		<script async src="../../gun/lib/normalize.js"></script>
+		<script async src="../../gun/lib/monotype.js"></script>
+		<script async src="../../gun/lib/meta.js"></script>
+	</body>
+</html>

examples/react-native/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["module:metro-react-native-babel-preset"]
+}

examples/react-native/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

examples/react-native/.flowconfig

@@ -0,0 +1,70 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+
+; Ignore polyfills
+.*/Libraries/polyfills/.*
+
+; Ignore metro
+.*/node_modules/metro/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow/
+node_modules/react-native/flow-github/
+
+[options]
+emoji=true
+
+esproposal.optional_chaining=enable
+esproposal.nullish_coalescing=enable
+
+module.system=haste
+module.system.haste.use_name_reducers=true
+# get basename
+module.system.haste.name_reducers='^.*/\([a-zA-Z0-9$_.-]+\.js\(\.flow\)?\)$' -> '\1'
+# strip .js or .js.flow suffix
+module.system.haste.name_reducers='^\(.*\)\.js\(\.flow\)?$' -> '\1'
+# strip .ios suffix
+module.system.haste.name_reducers='^\(.*\)\.ios$' -> '\1'
+module.system.haste.name_reducers='^\(.*\)\.android$' -> '\1'
+module.system.haste.name_reducers='^\(.*\)\.native$' -> '\1'
+module.system.haste.paths.blacklist=.*/__tests__/.*
+module.system.haste.paths.blacklist=.*/__mocks__/.*
+module.system.haste.paths.blacklist=<PROJECT_ROOT>/node_modules/react-native/Libraries/Animated/src/polyfills/.*
+module.system.haste.paths.whitelist=<PROJECT_ROOT>/node_modules/react-native/Libraries/.*
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+module.file_ext=.native.js
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FlowFixMeProps
+suppress_type=$FlowFixMeState
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(<VERSION>\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+[version]
+^0.78.0

examples/react-native/.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text

examples/react-native/.gitignore

@@ -0,0 +1,56 @@
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+
+# node.js
+#
+node_modules/
+npm-debug.log
+yarn-error.log
+
+# BUCK
+buck-out/
+\.buckd/
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use fastlane to re-generate the
+# screenshots whenever they are needed.
+# For more information about the recommended setup visit:
+# https://docs.fastlane.tools/best-practices/source-control/
+
+*/fastlane/report.xml
+*/fastlane/Preview.html
+*/fastlane/screenshots
+
+# Bundle artifact
+*.jsbundle

examples/react-native/.watchmanconfig

@@ -0,0 +1 @@
+{}

examples/react-native/README.md

@@ -0,0 +1,18 @@
+# Gun on react-native!
+---
+### running the demo
+1. do `yarn install` on the directory of the demo `examples/react-native`
+2. run the demo with `react-native run-ios` or `react-native run-android`
+
+### debugging
+i would recommend using [react-native-debugger](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools) but you can use chrome's debugger as well
+
+- ios: `cmd+D` then `Debug JS Remotely` 
+- android: `cmd+M` then `Debug JS Remotely`
+
+now you have access to the gun globals on the console which are
+`gun` -> the root gun
+`user` -> the gun user
+---
+# how it all of this is done
+since react-native doesnt provide the crypto module that we desire the most and all of the packages are incompatible with react-native/sea, and so to get `sea.js` working we use a webview(react-native browser) and bridge the crypto module from that browser to the global `window` and thats exactly what `webview-crypto` does, thanks to [webview-crypto repo](https://github.com/saulshanabrook/webview-crypto), the webview-crypto provided in this repo is somewhat the same but modified to get it working and mostly compatible with sea/react-native (even though there is a polyfiller for that but it just doesnt work ;/).