diff --git a/README.md b/README.md
index d5c5adcd..c016159b 100644
--- a/README.md
+++ b/README.md
@@ -4,3 +4,5 @@ neoprene
 Experimental Super Spy Stuff
 
 ![](http://www.glydeamerica.com/wp-content/uploads/2013/08/top_secret.gif)
+
+https://gist.github.com/sjmiles/c10a0d3ee33371b18b16
diff --git a/neoprene/polymer/features/template.html b/neoprene/polymer/features/template.html
index ad924a47..f4f3aca8 100644
--- a/neoprene/polymer/features/template.html
+++ b/neoprene/polymer/features/template.html
@@ -18,7 +18,7 @@
     },
     stampTemplate: function(template) {
       this._stampTemplate(template || this._template, this.root);
-      if (window.CustomElements) {
+      if (window.CustomElements && window.CustomElements.upgradeSubtree) {
         CustomElements.upgradeSubtree(this.root);
       }
     },
diff --git a/projects/mail/app-xplat.html b/projects/mail/app-xplat.html
new file mode 100644
index 00000000..9aa09bfe
--- /dev/null
+++ b/projects/mail/app-xplat.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html>
+<head>
+
+  <title>WheeMail</title>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script src="../../perf-lib/perf.js"></script>
+  
+  <script src="../../../../components-git/webcomponentsjs/HTMLImports.js"></script>
+  <script src="../../../../components-git/webcomponentsjs/CustomElements.js"></script>
+  
+  <link rel="import" href="src/elements.html">
+  <link rel="stylesheet" href="src/app.css">
+
+  <link rel="import" href="assets/icons.html">
+  <link rel="import" href="assets/data.html">
+
+  <script>
+    //Polymer.log.events = true;
+  </script>    
+
+</head>
+<body fullbleed vertical layout>
+
+  <script>console.perf();</script>
+
+  <x-app flex></x-app>
+
+  <script>console.perfEnd();</script>
+
+</body>
+</html>
diff --git a/projects/mail/app.html b/projects/mail/app.html
index 66643450..b768d046 100644
--- a/projects/mail/app.html
+++ b/projects/mail/app.html
@@ -2,142 +2,30 @@
 <html>
 <head>
 
-  <script src="../../perf-lib/perf.js"></script>
-
-  <meta charset="utf-8">
   <title>WheeMail</title>
 
+  <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-  <link rel="import" href="../../neoprene/polymer.html">
-  <link rel="import" href="../../neoprene/elements/x-overlay.html">
-  <link rel="import" href="../../neoprene/elements/x-icon.html">
-  <link rel="import" href="../../neoprene/elements/x-icon-button.html">
-  <link rel="import" href="../../neoprene/elements/x-toolbar.html">
-  <link rel="import" href="../../neoprene/elements/x-pages.html">
-  <link rel="import" href="../../neoprene/elements/x-selector.html">
-  <link rel="import" href="../../neoprene/elements/x-search-input.html">
-  <link rel="import" href="../../neoprene/elements/x-drop-button.html">
-  <link rel="import" href="../../neoprene/elements/x-repeater.html">
-  <link rel="import" href="../../neoprene/elements/paper-button.html">
+  <script src="../../perf-lib/perf.js"></script>
 
-  <link rel="import" href="elements/elements.html">
+  <link rel="import" href="src/elements.html">
+  <link rel="stylesheet" href="src/app.css">
 
   <link rel="import" href="assets/icons.html">
   <link rel="import" href="assets/data.html">
 
-  <link rel="stylesheet" href="app.css">
+  <script>
+    //Polymer.log.events = true;
+  </script>    
 
 </head>
 <body fullbleed vertical layout>
 
   <script>console.perf();</script>
 
-  <script>
-    //Polymer.log.events = true;
-  </script>    
-
   <x-app flex></x-app>
 
-  <style>
-
-    x-app {
-      display: block;
-    }
-
-    x-app > #otherBars {
-      margin-right: 16px;
-    }
-
-    x-app > #columns {
-      margin-left: 32px;  
-      overflow: hidden;
-    }
-
-    x-app #leftColumn {
-      width: 200px; 
-      margin-right: 8px;
-    }
-
-    x-app #selector > [selected] {
-      background-color: #FAF0E8 !important;
-    }
-
-    x-app #reader {
-      padding: 24px;
-    }
-
-  </style>
-  <template>
-
-    <!-- appbar -->
-    <x-appbar></x-appbar>
-
-    <!-- other bars -->
-    <div id="otherBars">
-      <x-mailbar id="mailbar"></x-mailbar>
-      <x-composebar></x-composebar>
-    </div>
-
-    <!-- columns -->
-    <div id="columns" flex horizontal layout>
-
-      <!-- left column -->
-      <div id="leftColumn" vertical layout>
-        <x-repeater id="labels" kind="x-label"></x-repeater>
-        <x-contactbar></x-contactbar>
-        <x-repeater id="contacts" kind="x-contact-item" flex scroll></x-repeater>
-      </div>
-
-      <!-- main column -->   
-      <x-pages id="pages" flex vertical layout>
-        <x-selector id="selector" flex scroll>
-          <x-repeater id="mail" kind="x-item"></x-repeater>
-        </x-selector>
-        <div id="reader" flex>And now for something completely different...</div>
-      </x-pages>
-
-    </div>
-
-  </template>
-  <script>
-
-    Polymer({
-
-      name: 'x-app',
-
-      hostAttributes: 'vertical layout',
-
-      listeners: {
-        'reader.click': 'mailListAction',
-        'mailbar-back': 'mailListAction',
-        'selected': 'selectedAction'
-      },
-
-      created: function() {
-        this.$.mail.items = data.items;
-        this.$.labels.items = data.items.slice(0, 10);
-        this.$.contacts.items = data.items.slice(20, 35);
-        this.selectedPage = 0;
-      },
-
-      selectedAction: function(e) {
-        this.selectedPage = 1;
-      },
-
-      mailListAction: function(e) {
-        this.selectedPage = 0;
-      },
-
-      set selectedPage(page) {
-        this.$.mailbar.selected = page;
-        this.$.pages.selected = page;
-      }
-
-    });
-
-  </script>
-
   <script>console.perfEnd();</script>
 
 </body>
diff --git a/projects/mail/elements/x-item.html b/projects/mail/elements/x-item.html
index 84619c26..51339cd5 100644
--- a/projects/mail/elements/x-item.html
+++ b/projects/mail/elements/x-item.html
@@ -67,6 +67,11 @@
       'box.click': 'click'
     },
 
+    bind: {
+      item: 'renderItem',
+      icon: 'box.icon'
+    },
+    
     created: function() {
       this.icon = 'box';
     },
@@ -76,18 +81,6 @@
       this.icon = (this.icon === 'box') ? 'checked' : 'box';
     },
 
-    set item(item) {
-      this.renderItem(item);
-    },
-
-    set icon(icon) {
-      this._icon = this.$.box.icon = icon;
-    },
-    
-    get icon() {
-      return this._icon;
-    },
-    
     renderItem: function(item) {
       this.$.wrapper.className = this.computeItemClass(item);
       this.$.from.textContent = item.from;
diff --git a/projects/mail/app.css b/projects/mail/src/app.css
similarity index 100%
rename from projects/mail/app.css
rename to projects/mail/src/app.css
diff --git a/projects/mail/src/elements.html b/projects/mail/src/elements.html
new file mode 100644
index 00000000..e173b14a
--- /dev/null
+++ b/projects/mail/src/elements.html
@@ -0,0 +1,15 @@
+<link rel="import" href="../../../neoprene/polymer.html">
+<link rel="import" href="../../../neoprene/elements/x-overlay.html">
+<link rel="import" href="../../../neoprene/elements/x-icon.html">
+<link rel="import" href="../../../neoprene/elements/x-icon-button.html">
+<link rel="import" href="../../../neoprene/elements/x-toolbar.html">
+<link rel="import" href="../../../neoprene/elements/x-pages.html">
+<link rel="import" href="../../../neoprene/elements/x-selector.html">
+<link rel="import" href="../../../neoprene/elements/x-search-input.html">
+<link rel="import" href="../../../neoprene/elements/x-drop-button.html">
+<link rel="import" href="../../../neoprene/elements/x-repeater.html">
+<link rel="import" href="../../../neoprene/elements/paper-button.html">
+
+<link rel="import" href="../elements/elements.html">
+
+<link rel="import" href="x-app.html">
diff --git a/projects/mail/src/x-app.html b/projects/mail/src/x-app.html
new file mode 100644
index 00000000..a36a9447
--- /dev/null
+++ b/projects/mail/src/x-app.html
@@ -0,0 +1,100 @@
+<style>
+
+  x-app {
+    display: block;
+  }
+
+  x-app > #otherBars {
+    margin-right: 16px;
+  }
+
+  x-app > #columns {
+    margin-left: 32px;  
+    overflow: hidden;
+  }
+
+  x-app #leftColumn {
+    width: 200px; 
+    margin-right: 8px;
+  }
+
+  x-app #selector > [selected] {
+    background-color: #FAF0E8 !important;
+  }
+
+  x-app #reader {
+    padding: 24px;
+  }
+
+</style>
+
+<template>
+
+  <!-- appbar -->
+  <x-appbar></x-appbar>
+
+  <!-- other bars -->
+  <div id="otherBars">
+    <x-mailbar id="mailbar"></x-mailbar>
+    <x-composebar></x-composebar>
+  </div>
+
+  <!-- columns -->
+  <div id="columns" flex horizontal layout>
+
+    <!-- left column -->
+    <div id="leftColumn" vertical layout>
+      <x-repeater id="labels" kind="x-label"></x-repeater>
+      <x-contactbar></x-contactbar>
+      <x-repeater id="contacts" kind="x-contact-item" flex scroll></x-repeater>
+    </div>
+
+    <!-- main column -->   
+    <x-pages id="pages" flex vertical layout>
+      <x-selector id="selector" flex scroll>
+        <x-repeater id="mail" kind="x-item"></x-repeater>
+      </x-selector>
+      <div id="reader" flex>And now for something completely different...</div>
+    </x-pages>
+
+  </div>
+
+</template>
+
+<script>
+
+  Polymer({
+
+    name: 'x-app',
+
+    hostAttributes: 'vertical layout',
+
+    listeners: {
+      'reader.click': 'mailListAction',
+      'mailbar-back': 'mailListAction',
+      'selected': 'selectedAction'
+    },
+
+    created: function() {
+      this.$.mail.items = data.items;
+      this.$.labels.items = data.items.slice(0, 10);
+      this.$.contacts.items = data.items.slice(20, 35);
+      this.selectedPage = 0;
+    },
+
+    selectedAction: function(e) {
+      this.selectedPage = 1;
+    },
+
+    mailListAction: function(e) {
+      this.selectedPage = 0;
+    },
+
+    set selectedPage(page) {
+      this.$.mailbar.selected = page;
+      this.$.pages.selected = page;
+    }
+
+  });
+
+</script>
diff --git a/projects/sampler/x.html b/projects/sampler/app-xplat.html
similarity index 100%
rename from projects/sampler/x.html
rename to projects/sampler/app-xplat.html
diff --git a/projects/sampler/index.html b/projects/sampler/app.html
similarity index 100%
rename from projects/sampler/index.html
rename to projects/sampler/app.html
