From d03a88afb8738949955eb54a5c032c20316a1bc6 Mon Sep 17 00:00:00 2001
From: "Scott J. Miles" <sjmiles@google.com>
Date: Fri, 4 Apr 2014 16:24:26 -0700
Subject: [PATCH] factor out designer-element, factor in x-* elements

---
 .htaccess                                     |   3 +
 .../designer-element/assets}/code.png         | Bin
 .../designer-element/assets}/design.png       | Bin
 .../designer-element/designer-element.html    | 259 ++++++++++
 .../designer-element/designer.html            |   4 +-
 elements/x-binding/x-binding.html             |  24 +
 elements/x-designable/grid.png                | Bin 0 -> 2854 bytes
 elements/x-designable/x-designable.html       | 456 ++++++++++++++++++
 elements/x-designer/x-designer.html           | 161 +++++++
 .../x-dom-serializer/x-dom-serializer.html    | 281 +++++++++++
 elements/x-editors/x-editors.html             | 317 ++++++++++++
 elements/x-file-document/x-file-document.html |  47 ++
 .../assets/ic_chevron_left_darkreg.png        | Bin 0 -> 3014 bytes
 .../x-inspector/assets/ic_delete_darkreg.png  | Bin 0 -> 2978 bytes
 .../x-inspector/assets/ic_home_darkreg.png    | Bin 0 -> 3108 bytes
 .../x-inspector/assets/ic_refresh_darkreg.png | Bin 0 -> 4062 bytes
 elements/x-inspector/demo.html                |  33 ++
 elements/x-inspector/reflection.js            | 125 +++++
 elements/x-inspector/x-inspector.css          |  57 +++
 elements/x-inspector/x-inspector.html         | 111 +++++
 elements/x-meta/x-meta.html                   | 150 ++++++
 elements/x-palette/x-palette.html             | 155 ++++++
 .../x-property-inspector/assets/link_dark.png | Bin 0 -> 3484 bytes
 elements/x-property-inspector/demo.html       | 130 +++++
 .../x-property-editor.html                    | 177 +++++++
 .../x-property-inspector.html                 | 214 ++++++++
 elements/x-tree/x-tree.html                   | 106 ++++
 index.html                                    | 267 +---------
 28 files changed, 2825 insertions(+), 252 deletions(-)
 create mode 100644 .htaccess
 rename {assets => elements/designer-element/assets}/code.png (100%)
 rename {assets => elements/designer-element/assets}/design.png (100%)
 create mode 100644 elements/designer-element/designer-element.html
 rename designer.html => elements/designer-element/designer.html (74%)
 create mode 100644 elements/x-binding/x-binding.html
 create mode 100644 elements/x-designable/grid.png
 create mode 100644 elements/x-designable/x-designable.html
 create mode 100644 elements/x-designer/x-designer.html
 create mode 100644 elements/x-dom-serializer/x-dom-serializer.html
 create mode 100644 elements/x-editors/x-editors.html
 create mode 100644 elements/x-file-document/x-file-document.html
 create mode 100644 elements/x-inspector/assets/ic_chevron_left_darkreg.png
 create mode 100644 elements/x-inspector/assets/ic_delete_darkreg.png
 create mode 100644 elements/x-inspector/assets/ic_home_darkreg.png
 create mode 100644 elements/x-inspector/assets/ic_refresh_darkreg.png
 create mode 100644 elements/x-inspector/demo.html
 create mode 100644 elements/x-inspector/reflection.js
 create mode 100644 elements/x-inspector/x-inspector.css
 create mode 100644 elements/x-inspector/x-inspector.html
 create mode 100644 elements/x-meta/x-meta.html
 create mode 100644 elements/x-palette/x-palette.html
 create mode 100644 elements/x-property-inspector/assets/link_dark.png
 create mode 100644 elements/x-property-inspector/demo.html
 create mode 100644 elements/x-property-inspector/x-property-editor.html
 create mode 100644 elements/x-property-inspector/x-property-inspector.html
 create mode 100644 elements/x-tree/x-tree.html

diff --git a/.htaccess b/.htaccess
new file mode 100644
index 00000000..67635880
--- /dev/null
+++ b/.htaccess
@@ -0,0 +1,3 @@
+Options +FollowSymLinks
+RewriteEngine On
+RewriteRule ^components/(.*)$ ../components/$1
\ No newline at end of file
diff --git a/assets/code.png b/elements/designer-element/assets/code.png
similarity index 100%
rename from assets/code.png
rename to elements/designer-element/assets/code.png
diff --git a/assets/design.png b/elements/designer-element/assets/design.png
similarity index 100%
rename from assets/design.png
rename to elements/designer-element/assets/design.png
diff --git a/elements/designer-element/designer-element.html b/elements/designer-element/designer-element.html
new file mode 100644
index 00000000..7ec06b2d
--- /dev/null
+++ b/elements/designer-element/designer-element.html
@@ -0,0 +1,259 @@
+<link rel="import" href="../../components/polymer-elements/elements.html">
+<link rel="import" href="../../components/polymer-ui-elements/elements.html">
+
+<link rel="import" href="../../components/code-mirror/code-mirror.html">
+<link rel="import" href="../../components/github-elements/github-elements.html">
+
+<link rel="import" href="../x-dom-serializer/x-dom-serializer.html">
+
+<link rel="import" href="../x-inspector/x-inspector.html">
+<link rel="import" href="../x-file-document/x-file-document.html">
+
+<polymer-element name="designer-element">
+<template>
+
+  <style>
+
+    iframe {
+      width: 100%;
+      height: 100%;
+      border: none;
+    }
+
+    #appbar {
+      xbackground: #4285f4;
+    }
+
+    #viewSelector {
+      padding: 4px;
+      background: #E0E0E0;
+      border-radius: 2px;
+      margin-left: 8px;
+    }
+
+    #inspector {
+      position: relative;
+      width: 350px;
+      border-left: 1px solid silver;
+      transition: width 0.3s;
+      box-shadow: -5px 0 8px rgba(0, 0, 0, 0.14);
+    }
+
+    #inspector.maximized {
+      width: 0;
+      border: 0;
+    }
+
+    #frameContainer {
+      height: 100%;
+      z-index: 0;
+    }
+
+  </style>
+
+  <polymer-layout vertical></polymer-layout>
+
+  <polymer-ui-toolbar id="appbar" theme="polymer-ui-light-theme">
+    <polymer-ui-icon-button icon="maximize" on-tap="{{fullscreenAction}}"></polymer-ui-icon-button>
+    <polymer-selector id="viewSelector" selected="{{selected}}">
+      <polymer-ui-icon-button src="assets/design.png" name="design"></polymer-ui-icon-button>
+      <polymer-ui-icon-button src="assets/code.png" name="code"></polymer-ui-icon-button>
+    </polymer-selector>
+    <polymer-ui-icon-button icon="add" on-tap="{{saveAction}}"></polymer-ui-icon-button>
+    <polymer-ui-icon-button icon="shortcut" on-click="{{shareAction}}"></polymer-ui-icon-button>
+  </polymer-ui-toolbar>
+
+  <polymer-ui-pages flex selected="{{selected}}">
+    <section name="design">
+      <polymer-flex-layout></polymer-flex-layout>
+      <div id="frameContainer" flex>
+        <iframe id="frame" src="designer.html" on-load="{{designWindowLoaded}}"></iframe>
+      </div>
+      <x-inspector id="inspector" on-delete-element="{{deleteElement}}" on-parent-element="{{selectParentElement}}" on-bind-property="{{applyPropertyBinding}}"></x-inspector>
+    </section>
+    <section name="code">
+      <polymer-layout></polymer-layout>
+      <code-mirror id="code" flex></code-mirror>
+    </section>
+  </polymer-ui-pages>
+
+  <x-dom-serializer id="serializer"></x-dom-serializer>
+
+  <github-element id="github" token="{{githubToken}}" on-files-loaded="{{documentLoaded}}" on-files-saved="{{documentSaved}}" on-token-changed="{{tokenChangeHandler}}"></github-element>
+
+</template>
+<script>
+
+  Polymer('designer-element', {
+    selected: 'design',
+    remoteHtml: '',
+    fileName: 'designer.html',
+    githubUser: 'designer-polymer',
+    githubToken: '77777d8808da580cd6134b7390b5fd306c66d1d6',
+    ready: function() {
+      document.addEventListener('keydown', 
+          this.KeydownAndPromptForUnload.bind(this, window));
+      this.firstLoad = true;
+    },
+    designWindowLoaded: function() {
+      this.$.frame.style.display = null;
+      window.designWindow = this.$.frame.contentWindow;
+      designWindow.addEventListener('designer-ready', this.designerReady.bind(this));
+      designWindow.addEventListener('design-change', this.designChange.bind(this));
+      designWindow.document.addEventListener('keydown', 
+          this.KeydownAndPromptForUnload.bind(this, designWindow));
+    },
+    KeydownAndPromptForUnload: function(w, e) {
+      // backspace
+      if (e.keyCode == 8) {
+        w.onbeforeunload = function() {
+          return ' ';
+        }
+        setTimeout(function() {
+          w.onbeforeunload = null;
+        }, 0);
+      }
+    },
+    designerReady: function(event) {
+      //console.log('designerReady');
+      this.designer = event.target;
+      this.designer.loadLinks(window.metadata, function() {
+        if (this.firstLoad) {
+          this.firstLoad = false;
+          this.loadRemoteContent();
+          return;
+        }
+        if (this.pendingHtml) {
+          this.loadHtml(this.pendingHtml);
+          this.pendingHtml = null;
+        } else {
+          var tag = Platform.flags.element;
+          if (tag) {
+            this.designer.createElement(tag);
+          }
+        }
+      }.bind(this));
+    },
+    designChange: function(event) {
+      this.$.inspector.sourceElement = this.designer.selected;
+      this.$.inspector.update();
+    },
+    deleteElement: function(event) {
+      this.designer.deleteElement();
+    },
+    selectParentElement: function(event) {
+      this.designer.selectParentElement();
+    },
+    selectedChanged: function() {
+      if (this.selected == 'code') {
+        this.designToCode();
+        this.$.code.refresh();
+        this.async('prepareCode')
+      } else {
+        this.$.frame.style.display = 'none';
+        this.codeToDesign();
+      }
+    },
+    // TODO(sorvell): probably should factor this code setup to be elsewhere
+    prepareCode: function() {
+      this.$.code.focus();
+      // fold style tag
+      var cm = this.$.code.mirror;
+      var c = cm.getSearchCursor('<style>');
+      if (c.find()) {
+        var l = c.pos.from.line;
+        cm.foldCode(l);
+        cm.setSelection({line: l})
+        cm.execCommand('goLineDown');
+        cm.execCommand('goLineStart');
+      }
+    },
+    get html() {
+      return this.$.serializer.dumpElement(this.designer.$.canvas);
+    },
+    designToCode: function() {
+      this.$.code.mirror.setValue(this.html);
+    },
+    codeToDesign: function() {
+      this.pendingHtml = this.$.code.mirror.getValue();
+      this.reloadDesigner();
+    },
+    reloadDesigner: function() {
+      //this.$.frame.onload = this.designWindowLoaded.bind(this);
+      designWindow.location.reload();
+    },
+    fullscreenAction: function() {
+      this.maximized = !this.maximized;
+    },
+    maximizedChanged: function() {
+      this.designer.maximized = this.maximized;
+      this.$.inspector.classList.toggle('maximized', this.maximized);
+    },
+    applyPropertyBinding: function(event, detail) {
+      this.designer.applyPropertyBinding(
+          detail.obj, detail.name, detail.path);  
+    },
+    saveAction: function() {
+      var options = {};
+      options[this.fileName] = {content: this.html};
+      if (this.fileId) {
+        this.$.github.update(this.fileId, 'designer', true, options);
+      } else {
+        this.$.github.save('designer', true, options);
+      }
+    },
+    shareAction: function() {
+      this.sharing = true;
+      // must open window immediately so that it opens in a tab, not a window
+      this.shareWindow = window.open(this.getGistUrl());
+      this.saveAction();
+    },
+    share: function() {
+      if (this.fileId && this.shareWindow) {
+        this.shareWindow.location.href = this.getGistUrl();
+      }
+    },
+    loadRemoteContent: function() {
+      var id = window.location.hash.replace('#', '');
+      if (id) {
+        this.fileId = id;
+        this.$.github.load(id);
+      }
+    },
+    documentLoaded: function(event, detail) {
+      var doc = detail && detail[this.fileName];
+      if (doc) {
+        this.remoteHtml = doc.content;
+      }
+    },
+    documentSaved: function(event, detail) {
+      this.fileId = detail.id; 
+      if (this.sharing) {
+        this.sharing = false;
+        this.share();
+      }
+    },
+    remoteHtmlChanged: function() {
+      //console.log(this.remoteHtml);
+      this.loadHtml(this.remoteHtml);
+    },
+    loadHtml: function(html) {
+      this.designer.loadHtml(html);
+    },
+    tokenChangeHandler: function() {
+      this.$.github.cancel();
+      // make login work
+      /*
+      this.async(function() {
+        this.$.github.style.position = 'static';
+      });
+      */
+    },
+    getGistUrl: function() {
+      return 'https://gist.github.com/' + this.githubUser + '/' + this.fileId;
+    }
+  });
+
+</script>
+</polymer-element>
+
diff --git a/designer.html b/elements/designer-element/designer.html
similarity index 74%
rename from designer.html
rename to elements/designer-element/designer.html
index 075bd05e..438ab38f 100644
--- a/designer.html
+++ b/elements/designer-element/designer.html
@@ -4,8 +4,8 @@
 
   <title>Polymer Designer</title>
 
-  <script src="components/platform/platform.js"></script>
-  <link rel="import" href="components/x-designer/x-designer.html">
+  <script src="../../components/platform-dev/platform.js"></script>
+  <link rel="import" href="../x-designer/x-designer.html">
 
   <style>
     body {
diff --git a/elements/x-binding/x-binding.html b/elements/x-binding/x-binding.html
new file mode 100644
index 00000000..a66cc6e1
--- /dev/null
+++ b/elements/x-binding/x-binding.html
@@ -0,0 +1,24 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<script>
+  (function() {
+   function getBinding(element, name) {
+      if (arguments.length === 1) {
+        name = arguments[0].name;
+        element = arguments[0].obj;
+      }
+      if (element && element.bindings_) {
+        var binding = element.bindings_[name];
+        if (binding) {
+          return binding.path;
+        }
+      }
+    }
+    window.Bindings = {
+      getBinding: getBinding
+    }
+  })();
+</script>
\ No newline at end of file
diff --git a/elements/x-designable/grid.png b/elements/x-designable/grid.png
new file mode 100644
index 0000000000000000000000000000000000000000..14882d8f9dc48c8ccb59f6c5ce29432dc5a70b87
GIT binary patch
literal 2854
zcmV+>3)%FEP)<h;3K|Lk000e1NJLTq0015U0015c1^@s6J20-I00009a7bBm000ie
z000ie0hKEb8vp<bPiaF#P*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-oy)XH-+^7Crag
z^g>IBfRsybQWXdwQbLP>6p<z>Aqfylh#{fb6;Z(vMMVS~$e@S=j*ftg6;Uh<iVD~V
z<RPMtgQJLw%KPDaqifc@_vX$1wbwr9tn;0-&j-K=43<bUQ8j=JsX`tR;Dg7+#^K~H
zK!FM*Z~zbpvt%K2{UZSY_<lS*D<Z%Lz5oGu(+dayz)hRLFdT>f59&ghTmgWD0l;*T
zI7<kC6aYYajzXpYKt=(8otP$50H6c_V9R4-;{Z@C0AMG7=F<Rxo%or10RUT+Ar%3j
zkpLhQWr#!oXgdI`&sK^>09Y^p6lP1rIRMx#05C~cW=H_Aw*bJ-5DT&Z2n+x)QHX^p
z00esgV8|mQcmRZ%02D^@S3L16t`O%c004NIvOKvYIYoh62rY33S640`D9%Y2D-<?i
z0%4j!F2Z@488U%158(66005wo6%pWr^Zj_v4zAA5HjcIqUoGmt2LB>rV&neh&#Q1i
z007~1e$oCcFS8neI|hJl{-P!B1ZZ9hpmq0)X0i`JwE&>$+E?>%_<lS*MWK+n+1cgf
z<k(8YLR(?VSAG6x!e78w{cQPuJpA|d;J)G{fihizM+Erb!p!tcr5w+a34~(Y=8s4G
zw+sLL9n&JjNn*KJDiq^U5^;`1nvC-@r6P$!k}1U{(*I=Q-z@tBKHoI}uxdU5dyy@u
zU1J0GOD7Ombim^G008p4Z^6_k2m^p<gW=D2|L;HjN1!DDfM!XOaR2~bL?kX$%CkSm
z2mk;?pn)o|K^yeJ7%adB9Ki+L!3+FgHiSYX#KJ-lLJDMn9CBbOtb#%)hRv`YDqt_v
zKpix|QD}yfa1JiQRk#j4a1Z)n2%f<xynzV>LC6RbVIkUx0b+_+BaR3cnT7Zv!AJxW
zizFb)h!jyGOOZ85F;a?DAXP{m@;!0_Ifq<Ex{*7`05XF7hP+2Hl!3BQJ=6@fL%FCo
z8iYoo3(#bAF`ADSpqtQgv>H8(HlgRxt7s3}k3K`kFu>>-2Q$QMFfPW!La{h336o>X
zu_CMttHv6zR;&ZNiS=X8v3CR#fknUxHUxJ<AYmRsNLWl*PS{AOARHt#5!wki2?K;t
z!Y3k=s7tgax)J%r7-BLphge7~Bi0g+6E6^Zh(p9TBoc{3GAFr^0!gu?RMHaCM$&Fl
zBk3%un>0uoBa_M6WNWeqIg~6QE69c9o#eyhGvpiOA@W-aonk<7r1(?fC{oI5N*U!4
z<uv66WtcKSRim0x-Ke2d5jBrmLam{;Qm;{ms1r1GnmNsb7D-E`t)i9F8fX`2_i3-_
zbh;7Ul^#x)&{xvS=|||7=mYe33=M`AgU5(xC>fg=2N-7=cNnjjOr{yriy6mMFgG#l
znCF=fnQv8CDz++o6_Lscl}eQ+l^ZHARH>?_s@|##Rr6KLRFA1%Q+=*RRWnoLsR`7U
zt5vF<Q0r40Q)j6=sE4X&sBct1q<&fbi3VB2Ov6t@q*0);U*o*SAPZv|vv@2aYYnT0
zb%8a+Cb7-ge0D0knEf5Qi#@8Tp*ce{N;6lpQuCB%KL_KOarm5cP6_8Ir<e17iry6O
zDdH&`rZh~sF=bq9s+O0QSgS~@QL9Jmy*94xr=6y~MY~!1fet~(N+(<=M`w@D1)b+p
z*;C!83a1uLJv#NSE~;y#8=<>IcfW3@?wFpwUVxrVZ>QdQz32KIeJ}k~{cZZE^+ya?
z2D1z#2HOnI7(B%_ac?{wFUQ;QQA1tBKtrWrm0_3Rgps+?Jfqb{jYbcQX~taRB;#$y
zZN{S}1|}gUOHJxc?wV3fxuz+mJ4`!F$IZ;mqRrNsHJd##*D~ju=bP7?-?v~|cv>vB
zsJ6IeNwVZxrdjT`yl#bBIa#GxRa#xMMy;K#CDyyGyQdMSxlWT#tDe?p!?5wT$+oGt
z8L;Kp2HUQ-ZMJ=3XJQv;x5ci*?vuTfeY$;({XGW_huIFR9a<fJbF^|4I#xQ~n$Dc=
zKYhjYmgz5NSkDm8*fZm{6U!;YX`NG>(?@3)XSs8O^N5RyOM=TTmp(3=8^+zpz2r)C
z^>JO{deZfso3oq3?Wo(Y?l$ge?uXo;%ru`Vo>?<<(8I_>;8Eq#KMS9gFl*neeosSB
zfoHYnBQIkwkyowPu(zdms`p{<7e4kra-ZWq<2*OsGTvEV%s0Td$hXT+!*8Bnh2KMe
zBmZRodjHV?r+_5^X9J0WL4jKW`}lf%A-|44I@@LTvf1rHjG(ze6+w@Jt%Bvjts!X0
z?2xS?_ve_-k<Mujg;0Lz*3buG=3$G&ehepthlN*$KaOySSQ^nWmo<0M+(UEUMEXRQ
zMBbZcF;6+KElM>iKB_KiJlZ$9G`c^=E@oNG)mWWaNo-3TIW8)$Hg0Ub-~8?KhvJ>$
z3*&nim@mj(aCxE5!t{lw7O5^0EIO7zOo&c6l<+|iDySBWCGrz@C5{St!X3hAA}`T4
z(TLbXTq+(;@<=L8dXnssyft|w#WSTW<++3>sgS%(4NTpeI-VAqb|7ssJvzNHgOZVu
zaYCvgO_R1~>SyL=cFU|~g|hy|Zi}}s9+d~lYqOB71z9Z$wnC=pR9Yz4DhIM>Wmjgu
z&56o6maCpC&F##y%G;1PobR9i?GnNg;gYtchD%p19a!eQtZF&3JaKv33gZ<8D~47E
ztUS1iwkmDaPpj=$m#%)jCVEY4fnLGNg2A-`YwHVD3gv};>)hAvT~AmqS>Lr``i7kw
zJ{5_It`yrBmlc25DBO7E8;5VoznR>Ww5hAaxn$2~(q`%A-YuS64wkBy=9dm`4cXeX
z4c}I@?e+FW+b@^RDBHV(wnMq2zdX3SWv9u`%{xC-q*U}&`cyXV(%rRT*Z6MH?i+i&
z_B8C(+grT%{XWUQ+f@NoP1R=AW&26{v-dx)iK^-Nmiuj8txj!m?Z*Ss1N{dh4z}01
z)YTo*JycSU)+_5r4#yw9{+;i4Ee$peRgIj+;v;ZGdF1K$3E%e~4LaI(jC-u%2h$&R
z9cLXcYC@Xwnns&bn)_Q~Te?roKGD|d-g^8;+aC{{G(1^(O7m37Y1-+6)01cN&y1aw
zoqc{T`P^XJqPBbIW6s}d4{z_f5Om?vMgNQEJG?v2T=KYd^0M3I6IZxbny)%vZR&LD
zJpPl@Psh8QyPB@KTx+@RdcC!KX7}kEo;S|j^u2lU7XQ}Oo;f|;z4Ll+_r>@1-xl3|
zawq-H%e&ckC+@AhPrP6BK<z=<L*0kfKU@CX*zeqbYQT4(^U>T#_XdT7&;F71j}Joy
zkC~6lh7E@6o;W@^IpRNZ{ptLtL(gQ-CY~4mqW;US7Zxvm_|@yz&e53Bp_lTPlfP|z
zrTyx_>lv@x#=^!PzR7qqF<$gm`|ZJZ+;<)Cqu&ot<a{81DF0~rvGr5Xr~8u`lav1h
z1DNytV>2z=0000WV@Og>004R=004l4008;_004mL004C`008P>0026e000+nl3&F}
z0000{Nkl<Zc-mrcC|m3>5SYQCY_Y@t|Nj{X;qrC2sj6<&;!%r7EgmKom#@1`5GO6X
zLREF6aXf1AsKuiekCt4caXf1AsKq15VgLXD0RR630FZs$oVO5Ae*gdg07*qoM6N<$
Ef;P5IzyJUM

literal 0
HcmV?d00001

diff --git a/elements/x-designable/x-designable.html b/elements/x-designable/x-designable.html
new file mode 100644
index 00000000..a84044d4
--- /dev/null
+++ b/elements/x-designable/x-designable.html
@@ -0,0 +1,456 @@
+<link rel="import" href="../../components/polymer/polymer.html">
+
+<polymer-element name="x-designable" designer attributes="selected" on-keydown="{{keydown}}" on-pointerdown="{{pointerDown}}" on-pointerup="{{pointerUp}}" on-trackstart="{{trackStart}}" on-track="{{track}}" on-trackend="{{trackEnd}}">
+  <template>
+    <style>
+      :host {
+        position: relative;
+        outline: none;
+        background-image: url(grid.png);
+        -webkit-user-select: none
+      }
+    </style>
+    <content></content>
+  </template>
+  <script>
+  (function() {
+
+    // turn on binding reflection;
+    Platform.enableBindingsReflection = true;
+
+    Polymer('x-designable', {
+      grid: 10,
+      selected: null,
+      ready: function() {
+        this.meta = document.createElement('x-meta');
+      },
+      // communication
+      notify: function() {
+        this.fire('design-change', this);
+      },
+      // state
+      selectedChanged: function(old) {
+        this.classFollows(this.selected, old, 'selected-element');
+        if (this.selected) {
+          this.ruleForElement(this.selected);
+        }
+        this.notify();
+      },
+      // commands
+      deleteElement: function() {
+        var e = this.selected;
+        if (e && e !== this) {
+          //if (e === this.$.designElement) {
+          //  this.clearElement();
+          //} else {
+            e.parentNode.removeChild(e);
+            forSubtree(e, this.removeElementRule.bind(this));
+            this.selected = null;
+          //}
+        }
+      },
+      selectParentElement: function() {
+        var e = this.selected;
+        if (e && e.parentNode) {
+          e = e.parentNode;
+          if (e === this) {
+            e = null;
+          }
+          this.selected = e;
+        }
+      },
+      update: function() {
+        this.marshalNodeReferences(this);
+      },
+      //
+      // abstracted drag API
+      //
+      // `track` events are triggered at the source of the drag, so 
+      // any object that wants to support dragging 'designable' objects
+      // implements the 'track' events but delegates the work to 
+      // callbacks that 'drag' populates on the drag object (dragInfo).
+      //
+      // drag-sources are x-pallete and x-designable
+      //
+      drag: function(dragInfo) {
+        // TODO(sjmiles): store in instance variable?
+        this.dragInfo = dragInfo;
+        // drag avatar
+        // TODO(sjmiles): if this is an element from the design-canvas, it's immediately
+        // pulled out of it's original context
+        if (dragInfo.element.parentNode != this) {
+          this.appendChild(dragInfo.element);
+        }
+        //
+        // calculate a starting origin in the frame of 'this'
+        var local = this.getBoundingClientRect();
+        // TODO(sjmiles): why the conditional?
+        var origin = dragInfo.origin; // || dragInfo.element.getBoundingClientRect();
+        dragInfo.start = {x: origin.left - local.left, y: origin.top - local.top};
+        //console.log(origin, dragInfo.start, local);
+        //
+        // contextualize utility method
+        var snap = this.snap.bind(this);
+        var ruleForElement = this.ruleForElement.bind(this);
+        // attach drag handler to the dragInfo
+        dragInfo.drag = function(event) {
+          var p = snap(
+            this.start.x + event.dx,
+            this.start.y + event.dy
+          );
+          var rule = ruleForElement(this.element);
+          rule.style.left = p.x + 'px';
+          rule.style.top = p.y + 'px';
+        };
+      },
+      drop: function(element, event) {
+        this.style.overflow = 'hidden';
+        var container = this.findContainer(element, event.target);
+        if (container && this.canContain(container, element)) {
+          // don't manipulate parentNode if not necessary
+          var sameParent = (container === element.parentNode);
+          if (!sameParent) {
+            // install element in container
+            container.appendChild(element);
+          }
+          this.decorateElement(element);
+          // ideally we only notify one change on drop
+          // the selection changing will cause a notify
+          // if the selection is not changing, but we
+          // did change the hierarchy, notify manually
+          if (!sameParent && this.selected === element) {
+            this.notify();
+          }
+          this.selected = element;
+          return true;
+        }
+      },
+      //
+      decorateElement: function(element) {
+        var s = this.ruleForElement(element).style;
+        s.pointerEvents = null;
+        s.transition = null;
+        s.webkitTransition = null;
+        // designer is absolutely positioned, ad-hoc
+        s.position = 'absolute';
+        if (element.parentNode !== this) {
+          s.left = s.top = s.position = '';
+        }
+        var self = this;
+        function decorate(element) {
+          self.applyUniqueId(element);
+          self.ruleForElement(element);
+        }
+        Array.prototype.filter.call(element.children, function(c) {
+            return ['style'].indexOf(c.localName) < 0;
+          }).forEach(decorate);
+      },
+      // stuffs required for making binding to work, ad-hoc
+      applyUniqueId: function(node) {
+        if (!node.id) {
+          node.id = this.makeUniqueId(this, node.localName
+            .replace(/^g-/, '').replace(/-/g, '_'));
+        }
+      },
+      makeUniqueId: function(node, id, suffix) {
+        var uId = id + (suffix || '');
+        // TODO(sorvell): why the polyfill intrusion?
+        var query = window.ShadowDOMPolyfill ? node.impl.querySelector :
+          node.querySelector;
+        var scope = window.ShadowDOMPolyfill ? document.body : node;
+        return query.call(scope, '#' + uId) ?
+          this.makeUniqueId(node, id, suffix ? ++suffix : 1) :
+          uId;
+      },
+      applyPropertyBinding: function(target, name, path) {
+        if (name === 'textContent') {
+          if (path) {
+            target.textContent = ' ';
+            target = target.firstChild;
+          } else {
+            target.firstChild.unbind(name);
+          }
+        } else {
+          this.unbindElementProperty(target, name);
+          target.removeAttribute(name);
+        }
+        if (path) {
+          target.bind(name, new PathObserver(this, path));
+        }
+      },
+      // Node.bind no longer provides unbinding but we need this concept
+      // here so we unbind by closing the bound observer.
+      unbindElementProperty: function(target, name) {
+        if (target.bindings_ && target.bindings_[name]) {
+          target.bindings_[name].close();
+          target.bindings_[name] = null;
+        }
+      },
+      // events
+      keydown: function(event) {
+        switch(event.keyCode) {
+          case 27:
+            this.selectParentElement();
+            break;
+          case 8:
+          case 46:
+            if (!this.nodeIsEditor(event.target)) {
+              this.deleteElement();
+              event.preventDefault();
+            }
+            break;
+        }
+      },
+      pointerDown: function(e) {
+        //this.dragDisabled = e.altKey;
+      },
+      pointerUp: function(e) {
+        if (this.dragInfo && !this.dragInfo.dropped) {
+          this.dragInfo.dropped = this.drop(this.dragInfo.element, e);
+        } else {
+          this.selected = e.target;
+        }
+        this.dragInfo = null;
+        //var focusNode = nodeIsEditor(this.selected) ? this.selected : this;
+        //focusNode.focus();
+      },
+      trackStart: function(event) {
+        // it's nobody else's event
+        event.stopPropagation();
+        //console.dir(event);
+        // acquire target
+        if (this.dragDisabled) {
+          return;
+        }
+        var elt = this.findDraggableElement(event.target);
+        if (elt) {
+          var dragInfo = this.createDragObject(elt);
+          //
+          var px = event.pageX - dragInfo.origin.left;
+          if (px < 4 || px > dragInfo.origin.width -4) {
+            console.log(px);
+            return;
+          }
+          //
+          this.makeElementDraggable(elt);
+          //
+          this.drag(dragInfo);
+          this.selected = elt;
+          //Platform.flush();
+        }
+      },
+      track: function(event) {
+        if (this.dragInfo && this.dragInfo.drag) {
+          this.dragInfo.drag(event);
+        }
+      },
+      trackEnd: function(event) {
+        if (this.dragInfo) {
+          event.stopPropagation();
+          //this.drop(this.dragInfo.element, event);
+          // TODO(sorvell): delete if we drag out of canvas area
+          // we'll need to refine this when dragging onto the tree becomes
+          // supported.
+          this.deleteElement();
+          this.dragInfo = null;
+        }
+      },
+      // utility
+      makeElementDraggable: function(element) {
+        var s = this.ruleForElement(element).style;
+        s.position = 'absolute';
+        s.pointerEvents = 'none';
+        s.transition = 'none';
+        s.webkitTransition = 'none';
+        // show elements
+        this.style.overflow = null;
+      },
+      findContainer: function(element, container) {
+        while (container) {
+          if (container === this || element !== container && container.meta && container.meta.isContainer) {
+            return container;
+          }
+          container = container.parentNode;
+        }
+      },
+      canContain: function(container, element) {
+        var filter = container.meta && container.meta.childFilter;
+        return (!filter || filter(elt));
+      },
+      findDraggableElement: function(target) {
+        // nominal target
+        var elt = target;
+        // try to match selection on drag
+        if (this.selected) {
+          while (elt && elt !== this && elt !== this.selected) {
+            elt = elt.parentNode;
+          }
+        }
+        // when no selection match, auto-select top-level element
+        if (elt !== this.selected) {
+          // nominal target
+          elt = target;
+          // find top level parent
+          while (elt && elt.parentNode !== this) {
+            elt = elt.parentNode;
+          }
+        }
+        // don't drag designer itself
+        if (elt === this) {
+          elt = null;
+        }
+        // return result
+        return elt;
+      },
+      createDragObject: function(elt) {
+        var rect = elt.getBoundingClientRect();
+        return {
+          origin: rect,
+          element: elt
+        };
+      },
+      snap: function(inX, inY) {
+        return {
+          x: Math.round(inX / this.grid) * this.grid,
+          y: Math.round(inY / this.grid) * this.grid
+        }
+      },
+      nodeIsEditor: function(node) {
+        return (node.meta && node.meta.isEditor) || this.editorElements[node.localName];
+      },
+      editorElements: {input: 1, select: 1, textarea: 1},
+      loadHtml: function(html) {
+        // TODO(sorvell): what should we bind to? for right now, we bind
+        // to 'this', but we should bind to some element that we're designing...
+        var template = document.createElement('template');
+        template.bindingDelegate = this.syntax;
+        template.innerHTML = html;
+        this.sanitizeContent(template.content);
+        this.innerHTML = '';
+        // make imports go...
+        this.loadElementImports(template.content, function() {
+          this.appendChild(template.createInstance(this));
+          executeScriptsInScope(this);
+          this.meta.ensureMeta(this);
+          this.update();
+          this.notify();
+        }.bind(this));
+      },
+      sanitizeContent: function(element) {
+        // remove imports so that we don't have to keep track of them
+        var imports = element.querySelectorAll('link[rel=import]').array();
+        imports.forEach(function(i) {
+          i.remove();
+        });
+      },
+      loadElementImports: function(element, callback) {
+        var pending = 1;
+        var receive = function() {
+          pending--;
+          checkDone();
+        }
+        var checkDone = function() {
+          if (pending == 0 && callback) {
+            callback();
+          }
+        };
+        var n$ = element.querySelectorAll('*');
+        for (var i=0, l=n$.length, n, m; (i<l) && (n=n$[i]); i++) {
+          m = this.meta.byId(n.localName);
+          if (m && !m.importsLoaded) {
+            pending++;
+            m.loadImports(receive);
+          }
+        }
+        receive();
+      },
+      setupStyleElement: function() {
+        var s = this.querySelector('style');
+        if (!s) {
+          s = document.createElement('style');
+          s.textContent = ' ';
+          this.insertBefore(s, this.firstElementChild);
+        }
+        this.styleElement = s;
+      },
+      ruleForElement: function(element) {
+        return element.__styleRule || (element.__styleRule = 
+            this.findElementRule(element));
+      },
+      findElementRule: function(element) {
+        if (!this.styleElement) {
+          this.setupStyleElement();
+        }
+        if (!element.id) {
+          this.applyUniqueId(element);
+        }
+        var re = new RegExp('#' + element.id + '(\\s|{)');
+        var sheet = this.styleElement.sheet;
+        var rules = sheet.cssRules;
+        var i = this.indexOfRule(rules, '#' + element.id);
+        if (i < 0) {
+          i = rules.length;
+        }
+        if (!rules[i]) {
+          sheet.insertRule('#' + element.id + '{' + element.style.cssText + '}',
+            i);
+        }
+        element.style.cssText = '';
+        return rules[i];
+      },
+      removeElementRule: function(element) {
+        var sheet = this.styleElement.sheet, rules = sheet.cssRules;
+        var i = this.indexOfRule(rules, '#' + element.id);
+        if (i >= 0) {
+          sheet.deleteRule(i);
+        }
+      },
+      indexOfRule: function(rules, selector) {
+        for (var i=0, l=rules.length; i < l; i++) {
+          if (rules[i].selectorText == selector) {
+            return i;
+          }
+        }
+        return -1;
+      }
+    });
+
+    function executeScriptsInScope(scope) {
+      // make scripts go....
+      var s$ = scope.querySelectorAll('script:not([src])');
+      for (var i=0, l=s$.length, s; (i<l) && (s=s$[i]); i++) {
+        replaceAndExecuteScript(s);
+      }
+    }
+
+    function replaceAndExecuteScript(script) {
+      var newScript = document.createElement('script');
+      script.parentNode.replaceChild(newScript, script);
+      newScript.textContent = script.textContent;
+    }
+
+    function cssTextFromStyle(style) {
+      var sheet = style && style.sheet;
+      if (sheet) {
+        var rules = sheet.cssRules;
+        for (var i=0, css=[]; i < rules.length; i++) {
+          css.push(rules[i].cssText);
+        }
+        return css.join('\n\n');
+      }
+    }
+
+    function forSubtree(element, callback) {
+      if (callback) {
+        callback(element);
+        var element = element.firstElementChild;
+        while (element) {
+          forSubtree(element, callback);
+          element = element.nextElementSibling;
+        }
+      }
+    }
+    
+  })();
+  </script>
+</polymer-element>
\ No newline at end of file
diff --git a/elements/x-designer/x-designer.html b/elements/x-designer/x-designer.html
new file mode 100644
index 00000000..e5ec742a
--- /dev/null
+++ b/elements/x-designer/x-designer.html
@@ -0,0 +1,161 @@
+<link rel="import" href="../../components/polymer-layout/polymer-layout.html">
+<link rel="import" href="../../components/polymer-flex-layout/polymer-flex-layout.html">
+<link rel="import" href="../../components/polymer-ui-splitter/polymer-ui-splitter.html">
+<link rel="import" href="../x-designable/x-designable.html">
+<link rel="import" href="../x-palette/x-palette.html">
+<link rel="import" href="../x-tree/x-tree.html">
+
+<polymer-element name="x-designer" attributes="selected maximized">
+  <template>
+    <style>
+      :host {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        outline: 0;
+      }
+      #canvas {
+        background-color: white;
+        -webkit-transition: left 0.4s;
+        transition: left 0.4s;
+        /*overflow: hidden;*/
+        z-index: 1;
+      }
+      #tools {
+        width: 284px;
+        z-index: 1;
+        box-shadow: 5px 0 8px rgba(0, 0, 0, 0.16);
+        transition: width 0.3s;
+      }
+      #tools.maximized {
+        width: 0;
+      }
+      #palette {
+        -webkit-transition: left 0.4s;
+        transition: left 0.4s;
+      }
+      #tree {
+        height: 300px;
+        overflow: hidden;
+      }
+      #canvas:not(.maximized) .selected-element {
+        outline: solid 10px rgba(72, 154, 254, 0.20);
+        outline-offset: -2px;
+      }
+    </style>
+
+    <x-meta id="meta" categories="{{elements}}"></x-meta>
+
+    <polymer-flex-layout></polymer-flex-layout>
+    <section id="tools">
+      <polymer-flex-layout vertical></polymer-flex-layout>
+      <x-palette flex id="palette" elements="{{elements}}" canvas="{{$.canvas}}" on-palette-drag="{{paletteDrag}}" on-palette-create-drag-object="{{paletteCreateDragObject}}"></x-palette>
+      <polymer-ui-splitter direction="down"></polymer-ui-splitter>
+      <x-tree id="tree" canvas="{{$.canvas}}" selected="{{selected}}"></x-tree>
+    </section>
+    <x-designable flex id="canvas" tabIndex="-1" selected="{{selected}}" on-design-change="{{designChange}}"></x-designable>
+
+  </template>
+  <script>
+  (function() {
+    Polymer('x-designer', {
+      maximized: false,
+      selectedTab: 'design',
+      ready: function() {
+        this.fire('designer-ready');
+      },
+      paletteDrag: function(event, drag) {
+        this.$.canvas.drag(drag);
+      },
+      paletteCreateDragObject: function(event, detail) {
+        detail.element = this.createElement(detail.tag);
+        this.$.canvas.makeElementDraggable(detail.element);
+      },
+      designChange: function() {
+        this.$.canvas.update();
+        this.$.tree.update();
+      },
+      createElement: function(tag) {
+        var meta = this.$.meta.byId(tag);
+        var element = meta.createElement();
+        this.$.canvas.appendChild(element);
+        this.$.canvas.decorateElement(element);
+        //this.selected = element;
+        return element;
+      },
+      deleteElement: function() {
+        this.$.canvas.deleteElement();
+      },
+      selectParentElement: function() {
+        this.$.canvas.selectParentElement();
+      },
+      maximizedChanged: function() {
+        this.$.tools.classList.toggle('maximized', this.maximized);
+        this.$.canvas.classList.toggle('maximized', this.maximized);
+        this.$.canvas.dragDisabled = this.maximized;
+      },
+      inspectTarget: function(event) {
+        var t = event.target;
+        if (t) {
+          if (t === this.$.canvas) {
+            this.selected = null;
+          } else {
+            // don't allow selection within a node with meta.hideSubtree
+            var n = t;
+            while (n) {
+              if (n.meta && n.meta.hideSubtree) {
+                t = n;
+                break;
+              }
+              n = n.parentNode;
+            }
+            this.selected = t;
+          }
+          Platform.flush();
+        }
+      },
+      loadLinks: function(urls, callback) {
+        Polymer.import(urls, callback);
+      },
+      loadHtml: function(html) {
+        this.$.canvas.loadHtml(html);
+      },
+      applyPropertyBinding: function(obj, name, path) {
+        this.$.canvas.applyPropertyBinding(obj, name, path);
+      }
+      /*applySource: function(source) {
+        this.$.designElement = this.$.designElement.applySource(source);
+      },
+      sourceApplied: function(event, node) {
+        this.$.meta.ensureMeta(node);
+        // reselect selection
+        if (this.selected && this.selected.id) {
+          var selected = this.$.canvas.querySelector('#' + this.selected.id);
+        }
+        this.selected = selected || this.$.designElement;
+      },
+      publishElement: function(source) {
+        this.$.publisher.publishElement(source);
+      },
+      dumpPreviewSource: function(source) {
+        var n = this.$.designElement.elementAttributes.name;
+        source = source + '\n<' + n + '></' + n + '>';
+        return source;
+      },
+      previewElement: function(source) {
+        this.$.preview.open(this.dumpPreviewSource(source));
+      },
+      previewElementSource: function(source) {
+        this.$.preview.openSource(this.dumpPreviewSource(source));
+      },
+      clearElement: function() {
+        Platform.flush();
+        this.applySource(this.$.designElement.defaultSource);
+      }
+      */
+    });
+  })();
+  </script>
+</polymer-element>
diff --git a/elements/x-dom-serializer/x-dom-serializer.html b/elements/x-dom-serializer/x-dom-serializer.html
new file mode 100644
index 00000000..8eca285e
--- /dev/null
+++ b/elements/x-dom-serializer/x-dom-serializer.html
@@ -0,0 +1,281 @@
+<link rel="import" href="../../components/polymer/polymer.html">
+<link rel="import" href="../x-binding/x-binding.html"></link>
+
+<polymer-element name="x-serializer">
+  <script>
+    Polymer('x-serializer', {
+      tab: '  ',
+      attributesBlacklist: ['style', 'tabindex', 'role'],
+      dumpTag: function(node, indent) {
+        if (node.dumpTag) {
+          return node.dumpTag(this.dumpTab, indent, this.tab);
+        }
+        if (node.nodeType == Node.TEXT_NODE) {
+          return this.dumpTextNode(node, indent);
+        }
+        var html = '';
+        html += indent + '<' + node.localName;
+        var attributes = this.dumpAttributes(node);
+        Object.keys(attributes).forEach(function(k) {
+          var v = attributes[k];
+          if (v !== null && v !== undefined) {
+            // json properties can contain " so surround them with '
+            var sep = typeof v === 'string' && v.indexOf('"') >= 0 ? '\'' : '"';
+            html += ' ' + k + (v !== '' ? '=' + sep + v + sep: '');
+          }
+        })
+        html += '>';
+        var end = {input: 1}[node.localName] ? '\n' : '</' + node.localName + '>\n';
+        if (node.meta && node.meta.hideSubtree) {
+          html += end;
+        } else {
+          var root = node.content || node;
+          if (root.firstElementChild) {
+            Array.prototype.forEach.call(root.children, function(c, i) {
+              if (i == 0) {
+                html += '\n';
+              }
+              html += this.dumpTag(c, indent + this.tab);
+            }, this);
+            html += indent + end;
+          } else {
+            html += root.firstChild ? this.dumpTextNode(root.firstChild, indent)
+               + end : end;
+          }
+        }
+        return html;
+      },
+      dumpAttributes: function(node) {
+        var p$ = Reflection.properties(node);
+        var attributes = {};
+        p$.forEach(function(p) {
+          var v = p.value, n = p.name, binding = Bindings.getBinding(node, n);
+          if (n == 'textContent') {
+            return;
+          }
+          if (node.publish && node.publish[n] === undefined) {
+            return;
+          }
+          if (binding) {
+            v = '{{ ' + binding + ' }}';
+          } else if (!((v || v === 0) && (typeof v === 'string' || typeof v === 'number' ||
+              typeof v === 'boolean'))) {
+            v = null;
+          }
+          if (v != null) {
+            attributes[n.toLowerCase()] = v;
+          }
+        });
+        for (var i=0, a, n; (a = node.attributes[i]); i++) {
+          n = a.name.toLowerCase();
+          if (attributes[n] === undefined) {
+            attributes[n] = a.value;
+          }
+        }
+        this.filterAttributes(attributes);
+        return attributes;
+      },
+      // special handling for certain attributes: style, class
+      filterAttributes: function(attributes) {
+        for (var i in attributes) {
+          if (this.attributesBlacklist.indexOf(i) >= 0 || i.match(/^aria/)) {
+            attributes[i] = null;
+          }
+        }
+        var v = attributes['class'];
+        v = v ? v.replace(/selected-element/g, '') : null;
+        if (v && (v.trim() == 'selected')) {
+          v = '';
+        }
+        attributes['class'] = v || null;
+      },
+      dumpTextNode: function(node) {
+        var binding = Bindings.getBinding(node, 'textContent');
+        return binding ? '{{ ' + binding + ' }}' : node.textContent;
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-dom-serializer" extends="x-serializer">
+  <script>
+    Polymer('x-dom-serializer', {
+      //elementBlackList: ['style'],
+      elementBlackList: [],
+      propertyBlackList: null,
+      ready: function() {
+        var node = document.createElement('x-serializer-blacklist');
+        this.propertyBlackList = Object.keys(node.__proto__);
+      },
+      dumpElement: function(node, indent) {
+        var html = '', indent = indent || '';
+        if (!node.querySelector('link[rel=import]')) {
+          html+= this.dumpImports(node, indent);
+        }
+        html += this.dumpChildren(node, indent);
+        //var name = ''; //node.elementAttributes.name || '';
+        //
+        // resolve properties to attributes before dumping
+        //var proto = this.dumpProto(node, indent + this.tab + this.tab);
+        //var script = 'Polymer(\'' + name +'\', ' + proto + ');';
+        //html += indent + '<polymer-element' + this.dumpElementAttributes(node) +
+        //  '>\n' + indent + this.tab + '<template>\n';
+        //
+        //html += indent + this.dumpStyle(node, indent + this.tab + this.tab);
+        //
+        //html += indent + this.tab + '</template>\n' +
+          //indent + this.tab +'<script>\n' +
+          //indent + this.tab + this.tab + script + '\n' +
+          //indent + this.tab +'</s' + 'cript>\n'+
+          //indent + '</polymer-element>';
+        return html;
+      },
+      dumpChildren: function(node, indent) {
+        var children = '', indent = indent || '';
+        Array.prototype.forEach.call(node.children, function(c) {
+          if (this.elementBlackList.indexOf(c.localName) < 0) {
+            children += this.dumpTag(c, indent);
+          }
+        }, this);
+        return children || (indent + '\n');
+      },
+      dumpTextNode: function(node, indent) {
+        if (node.parentNode.localName === 'style') {
+          var style = node.parentNode;
+          return this.cssTextFromSheet(style, style.sheet, indent);
+        } else {
+          return this.super(arguments);
+        }
+      },
+      dumpElementAttributes: function(node) {
+        var html = '';
+        if (node.elementAttributes) {
+          Object.keys(node.elementAttributes).forEach(function(a) {
+            html += ' ' + a + '="' + node.elementAttributes[a] + '"';
+          });
+        }
+        return html;
+      },
+      dumpProto: function(node, indent) {
+        var dump = '{\n';
+        var props = Object.keys(node.__proto__).filter(function(p) {
+          return (this.propertyBlackList.indexOf(p) < 0);
+        }, this);
+        if (!props.length) {
+          dump += indent + this.tab;
+        }
+        props.forEach(function(k, i) {
+          var value = node.__proto__[k], nodeValue = node[k];
+          dump += indent + this.tab + k + ': ';
+          if (typeof value == 'function') {
+            dump += value.toString();
+          } else {
+            dump += (typeof value == 'string' ? '\'' + nodeValue +
+              '\'' : nodeValue);
+          }
+          dump += (i <  props.length-1 ? ',\n' : '');
+        }, this);
+        dump += '\n' + indent + '}';
+        return dump;
+      },
+      /*
+      dumpStyle: function(node, startIndent) {
+        var css = startIndent + '<style>\n';
+        var style = node.querySelector('style');
+        if (style && style.sheet) {
+          css += this.cssTextFromSheet(node, style.sheet, startIndent, this.tab)
+            || '';
+        }
+        var tab = this.tab;
+        function subtree(root, indent) {
+          var e = root.firstElementChild;
+          while (e) {
+            var parts = e.hasAttribute('style') ?
+              e.getAttribute('style').split(';') : null;
+            if (parts && e.id) {
+              css += indent + '#' + e.id + ' {\n';
+              parts.forEach(function(p) {
+                if (p) {
+                  p = p.trim();
+                  if (p === 'position: absolute') {
+                    p = p + ' !important';
+                  }
+                  css += indent + tab + p.trim() + ';\n';
+                }
+              });
+              css += indent + '}' + '\n';
+            }
+            if (e.firstElementChild) {
+              subtree(e, indent);
+            }
+            e = e.nextElementSibling;
+          }
+        }
+        subtree(node, (startIndent || '') + this.tab);
+        css += startIndent + '</style>\n';
+        return css;
+      },
+      */
+      cssTextFromSheet: function(node, sheet, indent) {
+        if (sheet) {
+          var rules = sheet.cssRules;
+          var css = [indent];
+          for (var i=0, r; i < rules.length; i++) {
+            if (!(this.ignoreSelector(node, rules[i].selectorText))) {
+              r = this.dumpRule(rules[i], indent + this.tab);
+              if (r) {
+                css.push(r);
+              }
+            }
+          }
+          css.push('');
+          return css.join('\n');
+        }
+        return '';
+      },
+      // ignore id selectors
+      ignoreSelector: function (node, selector) {
+        //return selector.match(/^#[^, ]*$/) && node.querySelector(selector);
+      },
+      dumpRule: function(rule, indent) {
+        if (!rule.style.cssText) {
+          return null;
+        }
+        indent = indent || '';
+        // format
+        var css = indent + rule.selectorText + ' {\n' +
+            rule.style.cssText.replace(/([^;]*);\s*:?/g, indent + this.tab + 
+            '$1;\n') + 
+            indent + '}';
+        return css;
+      },
+      dumpImports: function(element, indent) {
+        var n$ = element.querySelectorAll('*');
+        var imports = [], metas=[];
+        for (var i=0, l=n$.length, n, m; (i<l) && (n=n$[i]); i++) {
+          m = n.meta;
+          if (m && metas.indexOf(m) < 0) {
+            metas.push(m);
+            var f = m.getImports().content.cloneNode(true);
+            imports = imports.concat(f.querySelectorAll('link[rel=import]').array());
+          }
+        }
+        var href = window.location.origin + window.location.pathname;
+        var d = document.createElement('div'), urls=[];
+        for (var i=0, l=imports.length, n, h; (i<l) && (n=imports[i]); i++) {
+          h = n.href.replace(href, '').replace('components', '..');
+          if (urls.indexOf(h) < 0) {
+            urls.push(h);
+            n.setAttribute('href', h);
+            d.appendChild(n);
+            d.appendChild(document.createTextNode('\n'));
+          }
+        }
+        return d.innerHTML;
+      }
+    });
+  </script>
+</polymer-element>
+
+<!-- this element exists to generate a property black list for polymer-element -->
+<polymer-element name="x-serializer-blacklist" noscript></polymer-element>
diff --git a/elements/x-editors/x-editors.html b/elements/x-editors/x-editors.html
new file mode 100644
index 00000000..26bff970
--- /dev/null
+++ b/elements/x-editors/x-editors.html
@@ -0,0 +1,317 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<link rel="import" href="../../components/polymer/polymer.html">
+
+<polymer-element name="x-abstract-editor" attributes="value">
+  <script>
+    Polymer('x-abstract-editor', {
+      value: '',
+      meta: null,
+      workingValue: null,
+      valueChanged: function() {
+        this.workingValue = this.value;
+      },
+      commit: function() {
+        this.value = this.format(this.workingValue);
+        // it's critical to have an event from the editor UI so we know when
+        // a user has changed a value, vs some other form of alteration
+        // for the same reason, we float our own changed event
+        this.fire('editor-value-changed');
+      },
+      format: function(value) {
+        return value;
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-string-editor" extends="x-abstract-editor">
+  <template>
+    <style>
+      :host {
+        display: inline-block;
+        width: 95%;
+      }
+      input {
+        border: 1px solid #e4e4e4;
+        border-top-color: #cecece;
+        color: #333;
+        background: #fff;
+        padding: 9px 8px;
+        margin: 0;
+        width: 100%;
+        font: inherit;
+        box-sizing: border-box;
+        -moz-box-sizing: border-box;
+        /* -webkit-user-select: all;
+        -moz-user-select: all;
+        user-select: all; */
+      }
+      input:focus {
+        outline: 1px solid #448afd;
+      }
+      input:invalid {
+        outline: 1px solid #d84437;
+      }
+      input:active {
+        background: #ededed;
+      }
+    </style>
+    <input id="input" type="{{type}}" value="{{workingValue}}" autocapitalize="off"
+      autocorrect="off" on-change="{{commit}}">
+  </template>
+  <script>
+    Polymer('x-string-editor', {
+      type: 'text',
+      focus: function() {
+        this.$.input.focus();
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-number-editor" extends="x-string-editor">
+<script>
+    Polymer('x-number-editor', {
+      format: function(value) {
+        return Number(value);
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-color-editor" extends="x-string-editor">
+  <script>
+    Polymer('x-color-editor', {
+      type: 'color',
+      ready: function() {
+        // TODO(sjmiles): box-sizing: border-box doesn't play nice with color inputs
+        // TODO(sjmiles): is there a way to effect these styles via stylesheet?
+        this.$.input.style.boxSizing = 'content-box';
+        this.$.input.style.width = '95%';
+        this.$.input.style.padding = '5px';
+        // TODO(dfreedm): Workaround for http://crbug.com/234801, colorpicker
+        // does not update swatch when in shadowdom because of focus issues
+        this.$.input.tabindex = -1;
+      },
+      valueChanged: function() {
+        this.workingValue = toHex(this.value);
+      },
+      format: function(value) {
+        return toHex(value);
+      }
+    });
+    function toHex(color) {
+      if (!color || color.substr(0, 1) === "#") {
+        return color;
+      }
+      var nums = /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/i.exec(color);
+      if (nums) {
+        var r = parseInt(nums[2], 10).toString(16),
+            g = parseInt(nums[3], 10).toString(16),
+            b = parseInt(nums[4], 10).toString(16);
+        return "#"+ (
+          (r.length == 1 ? r + "0" : r) +
+          (g.length == 1 ? g + "0" : g) +
+          (b.length == 1 ? b + "0" : b)
+        );
+      }
+    }
+  </script>
+</polymer-element>
+
+<polymer-element name="x-boolean-editor" extends="x-abstract-editor">
+  <template>
+    <style>
+      input {
+        font: inherit;
+      }
+    </style>
+    <input id="input" type="checkbox" checked="{{workingValue}}" on-change="{{inputChange}}">
+  </template>
+  <script>
+    Polymer('x-boolean-editor', {
+      inputChange: function(event) {
+        this.workingValue = event.target.checked;
+        this.commit();
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-select-editor" extends="x-abstract-editor" attributes="options">
+  <template>
+    <style>
+      :host {
+        display: inline-block;
+        width: 95%;
+        position: relative;
+      }
+      select {
+        margin-left: 0;
+        margin-right: 0;
+        width: 100%; 
+        font: inherit;
+        -webkit-user-select: all; 
+        -moz-user-select: all;
+        user-select: all;
+      }
+    </style>
+    <select id="select" on-change="{{selectChange}}"></select>
+  </template>
+  <script>
+    // TODO(sorvell): Template repeat functions specially inside a select
+    // by using <option template repeat="{{options}}">{{}}</option>
+    // However, this creates an extra space in the select; see
+    // due to https://github.com/toolkitchen/mdv/issues/56.
+    // For that reason, we're manually iterating these nodes.
+    Polymer('x-select-editor', {
+      metaChanged: function() {
+        this.options = this.meta.options || [];
+        // allow template to generate options before setting value
+        this.asyncMethod(function() {
+          this.$.select.value = this.workingValue;
+        });
+      },
+      optionsChanged: function() {
+        this.$.select.value = this.workingValue;
+        this.$.select.textContent = '';
+        this.options.forEach(function(o) {
+          var option = document.createElement('option');
+          option.textContent = o;
+          this.$.select.appendChild(option);
+        }, this);
+        /*
+        this.asyncMethod(function() {
+          if (this.workingValue !== this.$.select.value) {
+            this.selectChange();
+          }
+        });
+        */
+      },
+      selectChange: function() {
+        this.workingValue = this.$.select.value;
+        this.commit();
+      },
+      focus: function() {
+        this.$.select.focus();
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-text-editor" extends="x-abstract-editor">
+  <template>
+    <style>
+      textarea {
+        padding: 6px;
+        margin: 0;
+        width: 95%; 
+        /* -webkit-user-select: all; 
+        -moz-user-select: all;
+        user-select: all; */
+        overflow: auto; 
+        vertical-align: middle;
+      }
+    </style>
+    <textarea id="input" on-change="{{commit}}" rows="10"></textarea>
+  </template>
+  <script>
+    Polymer('x-text-editor', {
+      workingValueChanged: function() {
+        this.$.input.textContent = this.workingValue;
+      },
+      commit: function() {
+        this.workingValue = this.$.input.value;
+        this.super();
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-json-editor" extends="x-text-editor">
+  <template>
+    <shadow></shadow>
+  </template>
+  <script>
+    Polymer('x-json-editor', {
+      workingValueChanged: function() {
+        this.$.input.textContent = JSON.stringify(this.workingValue);
+      },
+      format: function(value) {
+        return JSON.parse(this.workingValue);
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-range-editor" extends="x-abstract-editor" attributes="min max step defaultValue">
+  <template>
+    <style>
+      :host {
+        display: inline-block;
+        width: 95%;
+        position: relative;
+      }
+      input {
+        padding: 7px 6px 8px;
+        margin: 0;
+        width: 95%; 
+        box-sizing: border-box;
+        vertical-align: middle;
+        -webkit-user-select: all; 
+        -moz-user-select: all;
+        user-select: all;
+      }
+    </style>
+    <input id="input" type="range" value="{{workingValue}}" min="{{min}}" max="{{max}}" step="{{step}}" on-change="{{commit}}">
+  </template>
+  <script>
+    Polymer('x-range-editor', {
+      min: 0,
+      max: 1,
+      step: 0.1,
+      defaultValue: 0,
+      metaChanged: function() {
+        if (this.meta) {
+          this.min = this.meta.min;
+          this.max = this.meta.max;
+          this.step = this.meta.step;
+          this.defaultValue = this.meta.defaultvalue;
+        }
+      },
+      defaultValueChanged: function() {
+        if (this.workingValue === null || this.workingValue === '') {
+          this.workingValue = this.defaultValue || this.min || 0;
+        }
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-speech-editor" extends="x-string-editor">
+  <script>
+    Polymer('x-speech-editor', {
+      ready: function() {
+        this.$.input.setAttribute('x-webkit-speech');
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-compound-editor" extends="x-abstract-editor">
+  <template>
+    <x-string-editor style="width: 90px;"></x-string-editor>
+    <x-select-editor style="width: 70px;" options="{{options}}"></x-select-editor>
+    <x-range-editor style="width: 100px;"></x-range-editor>
+  </template>
+  <script>
+    Polymer('x-compound-editor', {
+      options: ['px', 'pt', '%', 'em', 'rem', '']
+    });
+  </script>
+</polymer-element>
+
diff --git a/elements/x-file-document/x-file-document.html b/elements/x-file-document/x-file-document.html
new file mode 100644
index 00000000..b28b9beb
--- /dev/null
+++ b/elements/x-file-document/x-file-document.html
@@ -0,0 +1,47 @@
+<link rel="import" href="../../components/polymer/polymer.html">
+<link rel="import" href="../../components/polymer-ajax/polymer-ajax.html">
+
+<polymer-element name="x-file-document" attributes="text fileName root">
+  <template>
+    <polymer-ajax id="post" method="POST" on-polymer-complete="{{postComplete}}"></polymer-ajax>
+    <polymer-ajax id="get" handleAs="text" response="{{text}}" on-polymer-complete="{{getComplete}}"></polymer-ajax>
+  </template>
+  <script>
+    Polymer('x-file-document', {
+      root: '',
+      fileName: '',
+      text: null,
+      fileNameChanged: function() {
+        //console.log(this.fileName);
+        this.fetch();
+      },
+      get url() {
+        return this.root + this.fileName;
+      },
+      fetch: function() {
+        this.$.get.url = this.url;
+        this.$.get.go();
+      },
+      getComplete: function(event) {
+        event.stopPropagation();
+        this.fire('file-document-loaded');
+      },
+      save: function() {
+        this.$.post.xhrArgs = {
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded'
+          }
+        };
+        this.$.post.url = this.url;
+        this.$.post.params = {
+          html: this.text
+        };
+        this.$.post.go();
+      },
+      postComplete: function(event) {
+        event.stopPropagation();
+        this.fire('file-document-saved');
+      }
+    });
+  </script>
+</polymer-element>
diff --git a/elements/x-inspector/assets/ic_chevron_left_darkreg.png b/elements/x-inspector/assets/ic_chevron_left_darkreg.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e6d70f39bc1458ce08be355dc5535382375ad70
GIT binary patch
literal 3014
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
IM6N<$f?MjGmH+?%

literal 0
HcmV?d00001

diff --git a/elements/x-inspector/assets/ic_delete_darkreg.png b/elements/x-inspector/assets/ic_delete_darkreg.png
new file mode 100644
index 0000000000000000000000000000000000000000..f173a054268b5871d501f1376f860d0b518353bf
GIT binary patch
literal 2978
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
Y03|gziA3_a?*IS*07*qoM6N<$f(Pq`O8@`>

literal 0
HcmV?d00001

diff --git a/elements/x-inspector/assets/ic_home_darkreg.png b/elements/x-inspector/assets/ic_home_darkreg.png
new file mode 100644
index 0000000000000000000000000000000000000000..fce00f38b10cb7529ddf2d8bbff7c0b3a1d48e73
GIT binary patch
literal 3108
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

literal 0
HcmV?d00001

diff --git a/elements/x-inspector/assets/ic_refresh_darkreg.png b/elements/x-inspector/assets/ic_refresh_darkreg.png
new file mode 100644
index 0000000000000000000000000000000000000000..5eb96c8c4dff8645387e9e0286bb894330cb4a00
GIT binary patch
literal 4062
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
Q^#A|>07*qoM6N<$f;<j_6#xJL

literal 0
HcmV?d00001

diff --git a/elements/x-inspector/demo.html b/elements/x-inspector/demo.html
new file mode 100644
index 00000000..43a00071
--- /dev/null
+++ b/elements/x-inspector/demo.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<html>
+  <head>
+    <title>list</title>
+    <meta name="viewport" content="width=device-width">
+    <script src="../platform/platform.js"></script>
+    <link rel="import" href="x-inspector.html">
+    <style>
+      x-inspector {
+        display: block;
+        height: 500px;
+        width: 300px;
+        position: relative;
+      }
+    </style>
+  </head>
+  <body>
+    <div>Hi</div>
+    <br><br>
+    <x-inspector></x-inspector>
+    <script>
+      document.addEventListener('WebComponentsReady', function() {
+        var inspector = document.querySelector('x-inspector');
+        inspector.sourceElement = document.querySelector('div');
+      });
+    </script>
+   </body>
+</html>
diff --git a/elements/x-inspector/reflection.js b/elements/x-inspector/reflection.js
new file mode 100644
index 00000000..39e0453e
--- /dev/null
+++ b/elements/x-inspector/reflection.js
@@ -0,0 +1,125 @@
+/*
+ * Copyright 2013 The Polymer Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style
+ * license that can be found in the LICENSE file.
+ */
+
+(function() {
+
+function reflect(element, name, meta) {
+  return {
+    obj: element,
+    name: name,
+    value: element[name],
+    meta: meta && meta[name]
+  };
+}
+
+function reflectProperty(element, name, meta) {
+  try {
+    if (name[0] === '_' || name[name.length-1] === '_') {
+      return;
+    }
+    if (element.publish && element.publish[name] === undefined) {
+      return;
+    }
+    var v = element[name];
+    if (v !== null
+        && v !== undefined
+        && typeof v !== 'function'
+        && typeof v !== 'object'
+        //&& element.propertyIsEnumerable(k)
+        && !reflectProperty.blacklist[name]) {
+      var prop = reflect(element, name, meta);
+    }
+  } catch(x) {
+    // squelch
+  }
+  return prop;
+}
+
+reflectProperty.blacklist = {
+  EVENT_PREFIX: 1, 
+  DELEGATES: 1, 
+  PUBLISHED: 1,
+  INSTANCE_ATTRIBUTES: 1, 
+  PolymerBase: 1, 
+  STYLE_SCOPE_ATTRIBUTE: 1
+};
+
+if (!window.designWindow) {
+  designWindow = window;
+}
+
+function reflectProperties(element) {
+  var props = [];
+  if (element) {
+    var found = {};
+    var meta = element.meta && element.meta.properties;
+    var hep = designWindow.HTMLElement.prototype;
+    var hiep = designWindow.HTMLInputElement.prototype;
+    // TODO(sjmiles): beware alternate-window `p` that will != window.HTMLElement.prototype
+    var p = element.__proto__;
+    while (p && !p.hasOwnProperty('PolymerBase') && p != hep && p != hiep) {
+      var k = Object.keys(p);
+      k.forEach(function(k) {
+        if (found[k]) {
+          return;
+        }
+        var prop = reflectProperty(element, k, meta);
+        if (prop) {
+          props.push(prop);
+          found[k] = true;
+        }
+      });
+      p = p.__proto__;
+    }
+    //
+    var more = [];
+    if (!element.firstElementChild) {
+      more.push('textContent');
+    }
+    more.push('id');
+    var whitelist = {};
+    //
+    meta && Object.keys(meta).forEach(function(n) {
+      if (!found[n] && more.indexOf(n) === -1) {
+        more.push(n);
+        whitelist[n] = true;
+      }
+    });
+    //
+    more.forEach(function(k) {
+      var v = element[k];
+      if ((typeof v !== 'function' && typeof v !== 'object') || whitelist[k]) {
+        props.push(reflect(element, k, meta));
+      }
+    });
+  }
+  return props;
+}
+
+function reflectObject(obj, meta) {
+  var props = [];
+  if (obj && meta) {
+    Object.keys(meta).forEach(function(name) {
+      props.push(reflect(obj, name, meta));
+    });
+  }
+  return props;
+}
+
+function reflectStyles(element, meta) {
+  if (element) {
+    //return reflectObject(element.style, meta);
+    return reflectObject(element.__styleRule.style, meta);
+  }
+}
+
+window.Reflection = {
+  properties: reflectProperties,
+  styles: reflectStyles,
+  object: reflectObject
+};
+
+})();
diff --git a/elements/x-inspector/x-inspector.css b/elements/x-inspector/x-inspector.css
new file mode 100644
index 00000000..21efa62b
--- /dev/null
+++ b/elements/x-inspector/x-inspector.css
@@ -0,0 +1,57 @@
+/*
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+*/
+
+:host {
+  Xborder: 1px solid silver;
+}
+
+#header {
+  background-color: #E0E0E0;
+  border-bottom: 1px solid silver;
+  padding: 4px;
+  height: 44px;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#crumbList {
+  display: inline-block;
+  width: 80%;
+  vertical-align: middle;
+  overflow: hidden;
+  float: left;
+  font-size: 0.8em;
+}
+
+#deleteIcon {
+  float: right;
+}
+
+#interior {
+  position: absolute;
+  top: 62px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 8px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+g-icon-button {
+  vertical-align: middle;
+}
+
+tk-property-inspector[hidden=true] {
+  display: none !important;
+}
+
+g-icon-button[hidden=true] {
+  width: 0 !important;
+  padding: 0 !important;
+  visibility: hidden !important;
+}
diff --git a/elements/x-inspector/x-inspector.html b/elements/x-inspector/x-inspector.html
new file mode 100644
index 00000000..410fb633
--- /dev/null
+++ b/elements/x-inspector/x-inspector.html
@@ -0,0 +1,111 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<link rel="import" href="../../components/polymer-ui-icon-button/polymer-ui-icon-button.html">
+<link rel="import" href="../x-property-inspector/x-property-inspector.html">
+<link rel="import" href="../x-meta/x-meta.html">
+<script src="reflection.js"></script>
+
+<polymer-element name="x-style-inspector" attributes="sourceElement">
+  <template>
+    <template repeat="{{properties}}">
+      <x-property-inspector property="{{}}" nobind></x-property-inspector>
+    </template>
+    <x-meta id="meta">
+      <property name="backgroundColor" kind="color"></property>
+      <property name="opacity" kind="range" min="0" max="1" step="0.1" defaultvalue="1"></property>
+      <property name="border"></property>
+      <property name="padding"></property>
+      <property name="margin"></property>
+      <property name="display"></property>
+      <property name="left"></property>
+      <property name="top"></property>
+      <property name="width"></property>
+      <property name="height"></property>
+      <!-- <property name="test" kind="tk-compound-editor"></property> -->
+    </x-meta>
+  </template>
+  <script>
+    Polymer('x-style-inspector', {
+      properties: null,
+      sourceElementChanged: function() {
+        this.properties = Reflection.styles(this.sourceElement,
+          this.$.meta.properties);
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-inspector" attributes="sourceElement">
+  <template>
+    <link rel="stylesheet" href="x-inspector.css">
+    <div id="header">
+      <div id="crumbList">
+        <template repeat="{{crumbs}}">
+          <polymer-ui-icon-button src="assets/ic_chevron_left_darkreg.png" on-click="{{selectParentElement}}" hidden="{{top}}"></polymer-ui-icon-button>
+          <b>{{name}}</b>
+        </template>
+      </div>
+      <polymer-ui-icon-button id="deleteIcon" src="assets/ic_delete_darkreg.png" on-click="{{deleteElement}}"></polymer-ui-icon-button>
+    </div>
+    <div id="interior">
+      <template repeat="{{properties}}">
+        <x-property-inspector property="{{}}" hidden="{{meta.hidden}}"></x-property-inspector>
+      </template>
+      <x-style-inspector sourceElement="{{sourceElement}}"></x-style-inspector>
+    </div>
+    <x-meta id="meta"></x-meta>
+  </template>
+  <script>
+    Polymer('x-inspector', {
+      sourceElement: null,
+      properties: null,
+      crumbs: [],
+      sourceElementChanged: function() {
+        this.update();
+      },
+      update: function() {
+        // meta-data attached here
+        if (this.sourceElement) {
+          this.properties = Reflection.properties(this.sourceElement);
+          this.crumbs = this.listCrumbs();
+        } else {
+          this.name = '';
+          this.properties = [];
+          this.crumbs = [];
+        }
+        // right-align crumbs
+        this.async(function() {
+          this.$.crumbList.scrollLeft = 1e4;
+        });
+      },
+      listCrumbs: function() {
+        var crumbs = [];
+        var elt = this.sourceElement;
+        if (elt.hasAttribute('designer')) {
+          return [{
+            name: 'component',
+            top: true
+          }]
+        }
+        var crumb = {};
+        while (elt && !elt.hasAttribute('designer')) {
+          crumb = {
+            name: elt.localName
+          };
+          crumbs.unshift(crumb);
+          elt = elt.parentNode;
+        }
+        return crumbs;
+      },
+      deleteElement: function() {
+        this.fire('delete-element');
+      },
+      selectParentElement: function() {
+        this.fire('parent-element');
+      }
+    });
+  </script>
+</polymer-element>
\ No newline at end of file
diff --git a/elements/x-meta/x-meta.html b/elements/x-meta/x-meta.html
new file mode 100644
index 00000000..e281f443
--- /dev/null
+++ b/elements/x-meta/x-meta.html
@@ -0,0 +1,150 @@
+<link rel="import" href="../../components/polymer/polymer.html">
+
+<polymer-element name="x-meta" attributes="label isContainer isHidden list map categories shouldPrepend hideSubtree isEditor">
+  <script>
+    Polymer('x-meta', {
+      // shared data
+      list: [],
+      map: {},
+      categories: [],
+      pathMap: {},
+      // instance properties
+      alwaysPrepare: true,
+      isContainer: false,
+      isHidden: false,
+      properties: null,
+      shouldPrepend: false,
+      hideSubtree: false,
+      isEditor: false,
+      ready: function() {
+        if (this.id && this.id !== 'meta') {
+          this.resolveImportPath();
+          this.resolveCategory();
+          this.idChanged();
+        }
+        this.updateProperties();
+      },
+      enteredView: function() {
+        this.updateProperties();
+      },
+      resolveImportPath: function() {
+        this.importPath = (this.ownerDocument.baseURI || '').split('/').slice(0,-1).join('/');
+      },
+      resolveCategory: function() {
+        this.category =  this.getAttribute('group');
+        if (!this.category) {
+          // TODO(sjmiles): hack, add metadata instead
+          if (this.id.indexOf('polymer-ui-') >= 0) {
+            this.category = 'Polymer UI';
+          } else if (this.id.indexOf('polymer-') >= 0) {
+            this.category = 'Polymer';
+          } else {
+            this.category = this.importPath.split('/').slice(0, -1).join('/');
+          }
+        }
+        // add to path category collation as needed
+        var pm = this.pathMap[this.category];
+        if (!pm) {
+          pm = this.pathMap[this.category] = {
+            name: this.category.split('/').pop(),
+            list: []
+          }
+          this.categories.push(pm);
+        }
+        this.categories.sort(function(a, b) {
+          var an = a.name.toLowerCase(), bn = b.name.toLowerCase();
+          return an == bn ? 0 : an < bn ? -1 : 1;
+        });
+        /*
+        console.group('categories');
+        this.categories.forEach(function(c) {console.log(c.name);});
+        console.groupEnd('categories');
+        */
+      },
+      idChanged: function(inOld) {
+        this.unregister(this, inOld);
+        if (this.id && this.id !== 'meta') {
+          this.register(this);
+        }
+      },
+      register: function(meta) {
+        if (meta.id) {
+          // add to id map
+          this.map[meta.id] = meta;
+          // pre|append to id list
+          if (meta.shouldPrepend) {
+            this.list.unshift(meta);
+          } else {
+            this.list.push(meta);
+          }
+          // add to path category collation
+          this.pathMap[this.category].list.push(meta);
+        }
+      },
+      unregister: function(meta, id) {
+        if (id) {
+          delete this.map[id || meta.id];
+          var i = this.list.indexOf(meta);
+          if (i >= 0) {
+            this.list.splice(i, 1);
+          }
+        }
+      },
+      byId: function(id) {
+        return this.map[id];
+      },
+      updateProperties: function() {
+        var props = {};
+        var ps = this.querySelectorAll('property');
+        ps && Array.prototype.forEach.call(ps, function(p) {
+          var o = {};
+          Array.prototype.forEach.call(p.attributes, function(a) {
+            var v = a.value;
+            v = v.indexOf(',') > 0 ? v.split(',') : v;
+            o[a.name] = v;
+          });
+          props[o.name] = o;
+        });
+        this.properties = props;
+      },
+      // TODO(sjmiles): functions below here don't necessarily belong
+      // in this object
+      get archetype() {
+        return this.querySelector('template');
+      },
+      createElement: function() {
+        if (!this.importsLoaded) {
+          this.loadImports();
+        }
+        if (this.archetype) {
+          var node = this.archetype.createInstance().querySelector('*');
+        } else {
+          node = document.createElement(this.id);
+        }
+        this.ensureMeta(node);
+        return node;
+      },
+      ensureMeta: function(node) {
+        node.meta = node.meta || this.byId(node.localName);
+        Array.prototype.forEach.call(node.children, function(n) {
+          this.ensureMeta(n);
+        }, this);
+      },
+      getImports: function() {
+        var t = this.querySelector('#imports');
+        // resolve urls in template.
+        Platform.urlResolver.resolveTemplate(t);
+        return t;
+      },
+      loadImports: function(callback) {
+        this.importsLoaded = true;
+        var t = this.getImports();
+        if (t) {
+          Polymer.importElements(t.content.cloneNode(true), callback);
+        } else if (callback) {
+          callback();
+        }
+      }
+    });
+  </script>
+</polymer-element>
diff --git a/elements/x-palette/x-palette.html b/elements/x-palette/x-palette.html
new file mode 100644
index 00000000..ae6200c4
--- /dev/null
+++ b/elements/x-palette/x-palette.html
@@ -0,0 +1,155 @@
+<link rel="import" href="../../components/polymer-ui-icon/polymer-ui-icon.html">
+<link rel="import" href="../../components/polymer-ui-menu/polymer-ui-menu.html">
+<link rel="import" href="../../components/polymer-ui-menu-item/polymer-ui-menu-item.html">
+<link rel="import" href="../../components/polymer-ui-submenu-item/polymer-ui-submenu-item.html">
+<link rel="import" href="../x-meta/x-meta.html">
+
+<polymer-element name="x-palette" attributes="canvas drag">
+  <template>
+    <style>
+      :host {
+        position: relative;
+      }
+      #title {
+        height: 54px;
+        line-height: 54px;
+        font-size: 1.5px;
+        padding-left: 22px;
+        background-color: #E0E0E0;
+        border-bottom: 1px solid #E1E1E1;
+      }
+      #list {
+        background-color: #F2F2F2;
+        position: absolute;
+        top: 0;
+        right: 0px;
+        left: 0px;
+        bottom: 0px;
+        overflow-y: auto;
+        -webkit-overflow-scrolling: touch;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+      }
+      .item {
+        Xfont-size: 15px;
+        Xmargin: 10px 6px 10px 10px;
+        font-weight: bold;
+        cursor: pointer;
+        padding: 12px;
+        margin: 4px 0;
+        background-color: white;
+        border: 1px solid #D3D2D2;
+        border-radius: 5px;
+        -webkit-transition: border 0.5s;
+      }
+      .group-item {
+        font-weight: 500;
+      }
+      .group-item.palette-selected {
+        color: #4285f4;
+      }
+      .simple-item {
+        height: 40px;
+        line-height: 40px;
+        opacity: 0.7;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        color: #000;
+        white-space: nowrap;
+      }
+      .stage{
+        background: url('stage.png');
+        color: white;
+      }
+      .grill {
+        background: url('grill.png');
+        color: white;
+      }
+      .satin {
+        background: url('satin.png');
+        color: white;
+      }
+      .bluefog {
+        background: url('bluefog.png');
+        color: white;
+      }
+      [ishidden] {
+        display: none;
+      }
+      [loaded] {
+        Xborder: 1px solid green;
+      }
+    </style>
+
+    <x-meta id="meta" categories="{{categories}}"></x-meta>
+
+    <div id="list" on-trackstart="{{trackStart}}" on-track="{{track}}" on-trackend="{{trackEnd}}">
+
+      <polymer-ui-menu selectedClass="palette-selected">
+
+        <template repeat="{{categories}}"
+
+          <polymer-ui-submenu-item class="group-item" label="{{name}}">
+
+            <template repeat="{{list}}">
+              <div class="simple-item" tag="{{id}}" loaded?="{{importsLoaded}}" ishidden?="{{isHidden}}">{{label}} <span style="font-size: 0.5em">({{category}})</span></div>
+            </template>
+
+          </polymer-ui-submenu-item>
+
+        </template>
+
+      </polymer-ui-menu>
+
+    </div>
+
+  </template>
+
+  <script>
+    Polymer('x-palette', {
+      categories: null,
+      ready: function() {
+      },
+      trackStart: function(event) {
+        event.stopPropagation();
+        var tag = event.target.getAttribute('tag');
+        if (tag) {
+          this.drag = this.createDragObject(tag, event);
+          this.fire('palette-drag', this.drag);
+        }
+      },
+      track: function(event) {
+        event.stopPropagation();
+        if (this.drag && this.drag.drag) {
+          this.drag.drag(event);
+        }
+      },
+      trackEnd: function(event) {
+        event.stopPropagation();
+        if (this.drag) {
+          if (!this.drag.dropped) {
+            this.drop(this.drag);
+          }
+          this.drag = null;
+        }
+      },
+      drop: function(drag) {
+        // dropping here sends the item to the bitbucket
+        drag.element.parentNode.removeChild(drag.element);
+      },
+      createDragObject: function(tag, event) {
+        var meta = this.$.meta.byId(tag);
+        var e = event || {};
+        //
+        var elt = this.fire('palette-create-drag-object', {tag: tag}).detail.element;
+        return {
+          origin: {left: e.pageX - 24, top: e.pageY - 24},
+          element: elt
+        };
+      }
+    });
+  </script>
+
+</polymer-element>
diff --git a/elements/x-property-inspector/assets/link_dark.png b/elements/x-property-inspector/assets/link_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf521cf22d902c1b4c09c34f7eed481f2a4495ea
GIT binary patch
literal 3484
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
KMNUMnLSTZ}YKxix

literal 0
HcmV?d00001

diff --git a/elements/x-property-inspector/demo.html b/elements/x-property-inspector/demo.html
new file mode 100644
index 00000000..aa4f0f1b
--- /dev/null
+++ b/elements/x-property-inspector/demo.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>polymer-flex-layout</title>
+  <script src="../../polymer/polymer.js"></script>
+  <link rel="import" href="polymer-flex-layout.html">
+  <link rel="import" href="polymer-flex-panel.html">
+  <style>
+    body {
+      font-size: 20px;
+    }
+
+    flex-css, flex-container, flex-nonvisual {
+      height: 300px;
+    }
+  </style>
+</head>
+<body>
+  <polymer-element name="flex-css">
+    <template>
+      <link rel="stylesheet" href="polymer-flex-layout.css">
+      <style>
+        div {
+          box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          border: 2px solid #ccc;
+        }
+      </style>
+      <div class="flexbox" flex>
+        <div>Hi I'm some content</div>
+        <div class="flexbox column" flex>
+          <div class="flexbox align-center">
+            <h3>Title</h3>
+            <button>hello</button>
+          </div>
+          <div class="flexbox" flex>
+            <div flex>Main content</div>
+            <div>Sidebar content</div>
+          </div>
+          <div>Some more stuffs...</div>
+          <div class="flexbox justify-end">
+            <b>Footer</b>
+          </div>
+        </div>
+        <div>A last bit, like a panel</div>
+      </div>
+    </template>
+    <script>
+      Polymer('flex-css', {
+        ready: function() {
+          this.classList.add('flexbox');
+        }
+      });
+    </script>
+  </polymer-element>
+
+  <polymer-element name="flex-container" noscript extends="polymer-flex-panel">
+    <template>
+      <style>
+        div, polymer-flex-panel {
+          box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          border: 2px solid #ccc;
+        }
+      </style>
+      <div>Hi I'm some content</div>
+      <polymer-flex-panel vertical flex>
+        <polymer-flex-panel align="center">
+          <h3>Title</h3>
+          <button>hello</button>
+        </polymer-flex-panel>
+        <polymer-flex-panel flex>
+          <div flex>Main content</div>
+          <div>Sidebar content</div>
+        </polymer-flex-panel>
+        <div>Some more stuffs...</div>
+        <polymer-flex-panel justify="end">
+          <b>Footer</b>
+        </polymer-flex-panel>
+      </polymer-flex-panel>
+      <div>A last bit, like a panel</div>
+    </template>
+  </polymer-element>
+  
+  <polymer-element name="flex-nonvisual" noscript>
+    <template>
+      <style>
+        div {
+          box-sizing: border-box;
+          -moz-box-sizing: border-box;
+          border: 2px solid #ccc;
+        }
+      </style>
+      <polymer-flex-layout></polymer-flex-layout>
+      <div flex>
+        <polymer-flex-layout></polymer-flex-layout>
+        <div>Hi I'm some content</div>
+        <div flex>
+          <polymer-flex-layout vertical></polymer-flex-layout>
+          <div>
+            <polymer-flex-layout align="center"></polymer-flex-layout>
+            <h3>Title</h3>
+            <button>hello</button>
+          </div>
+          <div flex>
+            <polymer-flex-layout></polymer-flex-layout>
+            <div flex>Main content</div>
+            <div>Sidebar content</div>
+          </div>
+          <div>Some more stuffs...</div>
+          <div>
+            <polymer-flex-layout justify="end"></polymer-flex-layout>
+            <b>Footer</b>
+          </div>
+        </div>
+        <div>A last bit, like a panel</div>
+      </div>
+    </template>
+  </polymer-element>
+
+  <h3>polymer-flex-layout.css</h3>
+  <flex-css></flex-css>
+  <br>
+  <h3>polymer-flex-panel element</h3>
+  <flex-container></flex-container>
+  <br>
+  <h3>polymer-flex-layout element</h3>
+  <flex-nonvisual></flex-nonvisual>
+</body>
+</html>
diff --git a/elements/x-property-inspector/x-property-editor.html b/elements/x-property-inspector/x-property-editor.html
new file mode 100644
index 00000000..8ca7bf3c
--- /dev/null
+++ b/elements/x-property-inspector/x-property-editor.html
@@ -0,0 +1,177 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<link rel="import" href="../../components/polymer/polymer.html">
+<link rel="import" href="../x-editors/x-editors.html">
+
+<polymer-element name="x-property-editor" attributes="editorTag">
+  <template>
+    <style>
+      :host {
+        display: block;
+        white-space: nowrap;
+      }
+    </style>
+    <content></content>
+  </template>
+  <script>
+    Polymer('x-property-editor', {
+      meta: null,
+      metaChanged: function(type) {
+        // create polymorphic editor
+        this.editor = document.createElement(this.meta.editorTag);
+        this.appendChild(this.editor);
+        // bind propertyValue to property
+        var p = this.meta.property;
+        this.bindProperty('propertyValue', new PathObserver(p.obj, p.name));
+        // bind this.editor.value to propertyValue
+        // (imperative form of <editor value="{{editorValue}}">)
+        this.editor.bindProperty('value', new PathObserver(this, 'propertyValue'));
+        // update editor meta from property
+        this.updateEditorMeta();
+      },
+      updateEditorMeta: function() {
+        if (this.editor) {
+          this.editor.meta = this.meta.property.meta || {};
+          this.editor.meta.obj = this.meta.property.obj;
+        }
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-binding-editor" extends="x-abstract-editor">
+  <template>
+    <style>
+      :host {
+        display: block;
+        white-space: nowrap;
+      }
+    </style>
+    <x-id-select-editor id="idSelect" style="width: 112px;" options="{{elements}}" value="{{target}}" on-editor-value-changed="{{editorValueChanged}}" ></x-id-select-editor>
+    <!-- <x-select-editor style="width: 145px;" options="{{properties}}"></x-select-editor> -->
+    <x-string-editor style="width: 161px;" value="{{workingValue}}" on-editor-value-changed="{{editorValueChanged}}" ></x-string-editor>
+  </template>
+  <script>
+    Polymer('x-binding-editor', {
+      target: null,
+      meta: null,
+      metaChanged: function() {
+        this.$.idSelect.meta = {obj: this.meta.property.obj };
+        this.value = this.meta.binding || '';
+      },
+      editorValueChanged: function(event) {
+        event.stopPropagation();
+        this.commit();
+      },
+      format: function(value) {
+        var path = [];
+        if (this.target == this.meta.property.obj.id) {
+          this.target = '';
+        }
+        if (this.target) {
+          path.push('$', this.target);
+        }
+        if (value) {
+          path.push(value);
+        }
+        path = path.join('.');
+        return path;
+      },
+      valueChanged: function() {
+        if (this.value[0] == '$') {
+          var values = this.value.splice ? this.value.slice(0) : 
+              this.value.split('.');
+          values.shift(); // remove $
+          this.target = values.shift() // get object id
+          this.workingValue = values.join('.');
+        } else {
+          this.workingValue = this.value;
+        }
+      },
+      commit: function() {
+        this.super();
+        //console.log('binding-editor.bind-property: %s - %s', this.meta.property.name, this.value);
+        this.fire('bind-property', {
+          obj: this.meta.property.obj,
+          name: this.meta.property.name,
+          path: this.value
+        });
+      },
+      /* commit an empty binding value when detached */
+      unbind: function() {
+        this.fire('bind-property', {
+          obj: this.meta.property.obj,
+          name: this.meta.property.name,
+          path: ''
+        });
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-id-select-editor" extends="x-select-editor">
+  <template>
+    <shadow></shadow>
+  </template>
+  <script>
+    Polymer('x-id-select-editor', {
+      root: null,
+      idPrefix: '',
+      metaChanged: function() {
+        this.super();
+        this.root = this.findRoot(this.meta.obj);
+      },
+      rootChanged: function() {
+        this.buildOptions();
+      },
+      findRoot: function(node) {
+        while (node && node.id !== 'canvas') {
+          node = node.parentNode;
+        }
+        return node;
+      },
+      buildOptions: function() {
+        var o = [''];
+        if (this.root) {
+          var pre = this.idPrefix;
+          Array.prototype.forEach.call(this.root.querySelectorAll('[id]'), 
+            function(n) {
+              o.push(pre + n.id);
+            });
+        }
+        this.options = o;
+      },
+      get selectedNode() {
+        return this.root && this.value 
+            && this.root.querySelector('#' + this.value);
+      }
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-target-select-editor" extends="x-id-select-editor">
+  <script>
+    Polymer('x-target-select-editor', {
+      idPrefix: '#'
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-action-editor" extends="x-abstract-editor">
+  <template>
+    <button touch-action="none" on-pointerup="{{buttonClick}}">{{meta.label}}</button>
+  </template>
+  <script>
+    Polymer('x-action-editor', {
+      buttonClick: function() {
+        var action = this.meta.action;
+        if (this.meta.obj[action]) {
+          this.meta.obj[action]();
+        }
+      }
+    });
+  </script>
+</polymer-element>
diff --git a/elements/x-property-inspector/x-property-inspector.html b/elements/x-property-inspector/x-property-inspector.html
new file mode 100644
index 00000000..dc3e3133
--- /dev/null
+++ b/elements/x-property-inspector/x-property-inspector.html
@@ -0,0 +1,214 @@
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<link rel="import" href="x-property-editor.html">
+<link rel="import" href="../x-binding/x-binding.html">
+<link rel="import" href="../../components/polymer-animation/polymer-animation.html">
+
+<polymer-element name="x-property-inspector" attributes="property nobind" 
+    on-editor-value-changed="{{valueChangedEvent}}">
+  <template>
+    <style>
+      :host {
+        display: block;
+        white-space: nowrap;
+        margin-bottom: 1rem;
+      }
+      .property-name {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        color: #919191;
+        font-weight: bold;
+        margin-bottom: 1em;
+      }
+      #container {
+        display: inline-block;
+        width: 92%;
+      }
+      polymer-ui-icon#icon {
+        opacity: 0.3;
+        vertical-align: middle;
+      }
+      #iconContainer {
+        position: relative;
+        left: -10px;
+        padding: 10px;
+        display: inline-block;
+        vertical-align: middle;
+        cursor: pointer;
+      }
+      
+      #icon.binding {
+        opacity: 0.6;
+        border-radius: 12px;
+        background-color: lightblue;
+        -webkit-box-shadow: 0px 0px 14px 3px lightblue;
+      }
+      [nodisplay] {
+        display: none !important;
+      }
+    </style>
+    <div class="property-name">{{property.name}}:</div>
+    <span id="container"><content></content></span>
+    <div id="iconContainer" on-click="{{linkTap}}" nodisplay?="{{nobind}}">
+      <polymer-ui-icon id="icon" src="assets/link_dark.png" size="16"></polymer-ui-icon>
+    </div>  
+    <x-flip-out id="animOut" target="{{$.container}}" on-polymer-animation-end="{{animOutComplete}}"></x-flip-out>
+    <x-flip-in id="animIn" target="{{$.container}}"></x-flip-in>
+  </template>
+  <script>
+    Polymer('x-property-inspector', {
+      property: null,
+      editor: null,
+      propertyValue: null,
+      bindingMode: null,
+      binding: null,
+      nobind: false,
+      editorTags: {
+        'boolean': 'x-boolean-editor',
+        'string': 'x-string-editor',
+        'number': 'x-number-editor',
+        'select': 'x-select-editor',
+        'color': 'x-color-editor',
+        'text': 'x-text-editor',
+        'json': 'x-json-editor',
+        'id-select': 'x-id-select-editor',
+        'target-select': 'x-target-select-editor',
+        'speech': 'x-speech-editor',
+        'range': 'x-range-editor',
+        any: 'x-string-editor'
+      },
+      propertyChanged: function() {
+        // discover binding
+        this.binding = Bindings.getBinding(this.property);
+        // special handling for textContent
+        if (this.property.name == 'textContent') {
+          this.binding = Bindings.getBinding(this.property.obj.firstChild,
+            this.property.name);
+        }
+        // discover editorTag
+        var type = (this.property.meta || 0).kind || typeof this.property.value;
+        this.editorTag = this.editorTags[type || typeof this.property.value] 
+            || type;
+        // update binding mode
+        this.updateBindingMode();
+      },
+      updateBindingMode: function() {
+        this.bindingMode = Boolean(this.binding);
+      },
+      bindingModeChanged: function(old) {
+        if (old && this.editor) {
+          this.editor.unbind();
+        }
+        this.$.icon.classList.toggle('binding', this.bindingMode);
+        this.makeEditor(this.bindingMode ? 'x-binding-editor' 
+            : 'x-property-editor');
+      },
+      makeEditor: function(tag) {
+        this.editor = document.createElement(tag);
+        this.editor.cancelUnbindAll();
+        this.editor.meta = {
+          property: this.property,
+          editorTag: this.editorTag,
+          binding: this.binding
+        };
+      },
+      editorChanged: function(inOld) {
+        if (inOld) {
+          inOld.parentNode.removeChild(inOld);
+        }
+        this.appendChild(this.editor);
+      },
+      // it's critical to have an event from the editor UI so we know when
+      // a user has changed a value vs some other form of alteration
+      // for the same reason, we float our own changed event
+      valueChangedEvent: function(event) {
+        event.stopPropagation();
+        this.fire('property-changed');
+      },
+      linkTap: function() {
+        // start animation
+        this.$.animOut.play();
+        //this.animOutComplete();
+      },
+      animOutComplete: function() {
+        // after the first animation, effect the changes
+        this.$.container.selected = this.bindingMode ? 1 : 0;
+        this.bindingMode = !this.bindingMode;
+        // we are animating, flush now
+        Platform.flush();
+        // ending animation
+        this.$.animIn.play();
+      }
+    });
+  </script>
+</polymer-element>
+
+<!-- <polymer-element name="x-flip-out" extends="polymer-animation">
+  <template>
+    <polymer-animation-keyframe>
+      <polymer-animation-prop name="transform" value="perspective(400px) translateZ(0px) rotateX(0deg) scale(1)"></polymer-animation-prop>
+    </polymer-animation-keyframe>
+    <polymer-animation-keyframe>
+      <polymer-animation-prop name="transform" value="perspective(400px) translateZ(0px) rotateX(90deg) scale(1)"></polymer-animation-prop>
+    </polymer-animation-keyframe>
+  </template>
+  <script>
+    Polymer('x-flip-out', {
+      duration: 0.2,
+      fillMode: 'none',
+      easing: 'ease-in'
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-flip-in" extends="polymer-animation">
+  <template>
+    <polymer-animation-keyframe>
+      <polymer-animation-prop name="transform" value="perspective(400px) translateZ(0px) rotateY(270deg) scale(1)"></polymer-animation-prop>
+    </polymer-animation-keyframe>
+    <polymer-animation-keyframe>
+      <polymer-animation-prop name="transform" value="perspective(400px) translateZ(0px) rotateY(360deg) scale(1)"></polymer-animation-prop>
+    </polymer-animation-keyframe>
+  </template>
+  <script>
+    Polymer('x-flip-in', {
+      easing: 'ease-out'
+    });
+  </script>
+</polymer-element> -->
+
+ <polymer-element name="x-flip-out" extends="polymer-animation">
+  <script>
+    Polymer('x-flip-out', {
+      duration: 0.2,
+      fillMode: 'none',
+      keyframes: [{
+        easing: 'ease-in',
+        offset: 0,
+        transform: 'perspective(400px) translateZ(0px) rotateX(0deg) scale(1)'
+      }, {
+        offset: 1,
+        transform: 'perspective(400px) translateZ(0px) rotateX(90deg) scale(1)'
+      }]
+    });
+  </script>
+</polymer-element>
+
+<polymer-element name="x-flip-in" extends="x-flip-out">
+  <script>
+     Polymer('x-flip-in', {
+      keyframes: [{
+        easing: 'ease-out',
+        offset: 0,
+        transform: 'perspective(400px) translateZ(0px) rotateY(270deg) scale(1)'
+      }, {
+        offset: 1,
+        transform: 'perspective(400px) translateZ(0px) rotateY(360deg) scale(1)'
+      }]
+    });
+  </script>
+</polymer-element> 
+
diff --git a/elements/x-tree/x-tree.html b/elements/x-tree/x-tree.html
new file mode 100644
index 00000000..9e9f2b3a
--- /dev/null
+++ b/elements/x-tree/x-tree.html
@@ -0,0 +1,106 @@
+<link rel="import" href="../../components/polymer/polymer.html">
+
+<polymer-element name="x-tree" attributes="canvas selected">
+  <template>
+    <style>
+      :host {
+        position: relative;
+      }
+      #title {
+        height: 40px;
+        line-height: 40px;
+        background-color: #E0E0E0;
+        padding: 0 12px;
+        font-size: 16px;
+      }
+      #interior {
+        border: 1px solid silver;
+        position: absolute;
+        top: 40px;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+        cursor: pointer;
+      }
+      #caption {
+        color: blue;
+      }
+      id {
+        font-style: italic;
+        color: #804C00;
+      }
+      #tree {
+        display: inline-block;
+        padding: 8px;
+      }
+      #tree div {
+        padding: 4px;
+        white-space: nowrap;
+      }
+      .selected {
+        background: rgba(72, 154, 254, 0.20);
+      }
+    </style>
+    <div id="title">Elements</div>
+    <div id="interior" touch-action="auto">
+      <div id="tree">
+        <template repeat="{{components}}">
+          <div class="{{selected}}" on-tap="{{selectAction}}" style="padding-left: {{indent}}px"><span>{{name}}<id>{{id}}</id><span id="caption">{{text}}</span></span></div>
+        </template>
+      </div>
+    </div>
+  </template>
+  <script>
+  (function() {
+    Polymer('x-tree', {
+      components: null,
+      canvas: null,
+      canvasChanged: function() {
+        this.update();
+      },
+      update: function() {
+        var selected = this.selected;
+        var tabsize = 32;
+        var components = this.components = [];
+        function subtree(root, indent) {
+          var e = root.firstElementChild;
+          while (e) {
+            if (elementBlackList.indexOf(e.localName) < 0) {
+              var text = e.children.length == 0 ? e.textContent.trim() : '';
+              if (text) {
+                if (text.length > 12) {
+                  text = text.slice(0, 12) + "...";
+                }
+                text = ' "' + text + '"';
+              }
+              components.push({
+                indent: indent,
+                name: e.localName,
+                element: e,
+                id: e.id ? ' #' + e.id + '': '',
+                text: text,
+                selected: (e == selected) ? 'selected' : ''
+              });
+              if (!(e.meta && e.meta.hideSubtree)) {
+                subtree(e, indent + tabsize);
+              }
+            }
+            e = e.nextElementSibling;
+          }
+        }
+        subtree(this.canvas, 4);
+      },
+      selectAction: function(event, detail, sender) {
+        if (sender) {
+          this.selected = sender.templateInstance.model.element;
+          Platform.flush();
+        }
+      }
+    });
+    
+    var elementBlackList = ['style'];
+  })();
+  </script>
+</polymer-element>
diff --git a/index.html b/index.html
index 0b1c1f63..6d36b14a 100644
--- a/index.html
+++ b/index.html
@@ -1,26 +1,27 @@
 <!doctype html>
 <html>
 <head>
+
   <title>Designer</title>
-  <script src="components/platform/platform.js"></script>
-  <link rel="import" href="components/polymer-elements/elements.html">
-  <link rel="import" href="components/polymer-ui-elements/elements.html">
-  <link rel="import" href="components/code-mirror/code-mirror.html">
-  <link rel="import" href="components/github-elements/github-elements.html">
-  <link rel="import" href="components/x-dom-serializer/x-dom-serializer.html">
-  <link rel="import" href="components/x-inspector/x-inspector.html">
-  <link rel="import" href="components/x-file-document/x-file-document.html">
+
+  <script src="components/platform-dev/platform.js"></script>
+
+  <link rel="import" href="elements/designer-element/designer-element.html">
+
   <style>
+
     html {
       position: relative;
       height: 100%;
     }
+
     body {
       font-family: 'Helvetica Neue', Helvetica, Roboto, Arial;
       height: 100%;
       margin: 0;
       overflow: hidden;
     }
+
     designer-element {
       display: block;
       position: absolute;
@@ -30,258 +31,24 @@
       left: 0;
       overflow: hidden;
     }
+
   </style>
+
 </head>
 <body>
+
   <script>
     var metadata = [
       /* 'components/core-elements/metadata.html', */
-      'components/paper-elements/metadata.html',
-      'components/polymer-elements/metadata.html',
-      'components/polymer-ui-elements/metadata.html',
-      'components/more-elements/metadata.html',
-      'components/polytype/metadata.html'
+      '../../components/paper-elements/metadata.html',
+      '../../components/polymer-elements/metadata.html',
+      '../../components/polymer-ui-elements/metadata.html',
+      '../../components/more-elements/metadata.html',
+      '../../components/polytype/metadata.html'
     ];
   </script>
 
   <designer-element id="designer"></designer-element>
 
-  <polymer-element name="designer-element">
-    <template>
-
-      <style>
-        iframe {
-          width: 100%;
-          height: 100%;
-          border: none;
-        }
-        #appbar {
-          xbackground: #4285f4;
-        }
-        #viewSelector {
-          padding: 4px;
-          background: #E0E0E0;
-          border-radius: 2px;
-          margin-left: 8px;
-        }
-        #inspector {
-          position: relative;
-          width: 350px;
-          border-left: 1px solid silver;
-          transition: width 0.3s;
-          box-shadow: -5px 0 8px rgba(0, 0, 0, 0.14);
-        }
-        #inspector.maximized {
-          width: 0;
-          border: 0;
-        }
-        #frameContainer {
-          height: 100%;
-          z-index: 0;
-        }
-      </style>
-
-      <polymer-layout vertical></polymer-layout>
-
-      <polymer-ui-toolbar id="appbar" theme="polymer-ui-light-theme">
-        <!-- <polymer-ui-icon-button icon="menu"></polymer-ui-icon-button> -->
-        <polymer-ui-icon-button icon="maximize" on-tap="{{fullscreenAction}}"></polymer-ui-icon-button>
-        <polymer-selector id="viewSelector" selected="{{selected}}">
-          <polymer-ui-icon-button src="assets/design.png" name="design"></polymer-ui-icon-button>
-          <polymer-ui-icon-button src="assets/code.png" name="code"></polymer-ui-icon-button>
-        </polymer-selector>
-        <polymer-ui-icon-button icon="add" on-tap="{{saveAction}}"></polymer-ui-icon-button>
-        <polymer-ui-icon-button icon="shortcut" on-click="{{shareAction}}"></polymer-ui-icon-button>
-      </polymer-ui-toolbar>
-
-      <polymer-ui-pages flex selected="{{selected}}">
-        <section name="design">
-          <polymer-flex-layout></polymer-flex-layout>
-          <div id="frameContainer" flex>
-            <iframe id="frame" src="designer.html" on-load="{{designWindowLoaded}}"></iframe>
-          </div>
-          <x-inspector id="inspector" on-delete-element="{{deleteElement}}" on-parent-element="{{selectParentElement}}" on-bind-property="{{applyPropertyBinding}}"></x-inspector>
-        </section>
-        <section name="code">
-          <polymer-layout></polymer-layout>
-          <code-mirror id="code" flex></code-mirror>
-        </section>
-      </polymer-ui-pages>
-      <x-dom-serializer id="serializer"></x-dom-serializer>
-      <github-element id="github" token="{{githubToken}}" on-files-loaded="{{documentLoaded}}" on-files-saved="{{documentSaved}}" on-token-changed="{{tokenChangeHandler}}"></github-element>
-    </template>
-
-    <script>
-      Polymer('designer-element', {
-        selected: 'design',
-        remoteHtml: '',
-        fileName: 'designer.html',
-        githubUser: 'designer-polymer',
-        githubToken: '77777d8808da580cd6134b7390b5fd306c66d1d6',
-        ready: function() {
-          document.addEventListener('keydown', 
-              this.KeydownAndPromptForUnload.bind(this, window));
-          this.firstLoad = true;
-        },
-        designWindowLoaded: function() {
-          this.$.frame.style.display = null;
-          window.designWindow = this.$.frame.contentWindow;
-          designWindow.addEventListener('designer-ready', this.designerReady.bind(this));
-          designWindow.addEventListener('design-change', this.designChange.bind(this));
-          designWindow.document.addEventListener('keydown', 
-              this.KeydownAndPromptForUnload.bind(this, designWindow));
-        },
-        KeydownAndPromptForUnload: function(w, e) {
-          // backspace
-          if (e.keyCode == 8) {
-            w.onbeforeunload = function() {
-              return ' ';
-            }
-            setTimeout(function() {
-              w.onbeforeunload = null;
-            }, 0);
-          }
-        },
-        designerReady: function(event) {
-          //console.log('designerReady');
-          this.designer = event.target;
-          this.designer.loadLinks(window.metadata, function() {
-            if (this.firstLoad) {
-              this.firstLoad = false;
-              this.loadRemoteContent();
-              return;
-            }
-            if (this.pendingHtml) {
-              this.loadHtml(this.pendingHtml);
-              this.pendingHtml = null;
-            } else {
-              var tag = Platform.flags.element;
-              if (tag) {
-                this.designer.createElement(tag);
-              }
-            }
-          }.bind(this));
-        },
-        designChange: function(event) {
-          this.$.inspector.sourceElement = this.designer.selected;
-          this.$.inspector.update();
-        },
-        deleteElement: function(event) {
-          this.designer.deleteElement();
-        },
-        selectParentElement: function(event) {
-          this.designer.selectParentElement();
-        },
-        selectedChanged: function() {
-          if (this.selected == 'code') {
-            this.designToCode();
-            this.$.code.refresh();
-            this.async('prepareCode')
-          } else {
-            this.$.frame.style.display = 'none';
-            this.codeToDesign();
-          }
-        },
-        // TODO(sorvell): probably should factor this code setup to be elsewhere
-        prepareCode: function() {
-          this.$.code.focus();
-          // fold style tag
-          var cm = this.$.code.mirror;
-          var c = cm.getSearchCursor('<style>');
-          if (c.find()) {
-            var l = c.pos.from.line;
-            cm.foldCode(l);
-            cm.setSelection({line: l})
-            cm.execCommand('goLineDown');
-            cm.execCommand('goLineStart');
-          }
-        },
-        get html() {
-          return this.$.serializer.dumpElement(this.designer.$.canvas);
-        },
-        designToCode: function() {
-          this.$.code.mirror.setValue(this.html);
-        },
-        codeToDesign: function() {
-          this.pendingHtml = this.$.code.mirror.getValue();
-          this.reloadDesigner();
-        },
-        reloadDesigner: function() {
-          //this.$.frame.onload = this.designWindowLoaded.bind(this);
-          designWindow.location.reload();
-        },
-        fullscreenAction: function() {
-          this.maximized = !this.maximized;
-        },
-        maximizedChanged: function() {
-          this.designer.maximized = this.maximized;
-          this.$.inspector.classList.toggle('maximized', this.maximized);
-        },
-        applyPropertyBinding: function(event, detail) {
-          this.designer.applyPropertyBinding(
-              detail.obj, detail.name, detail.path);  
-        },
-        saveAction: function() {
-          var options = {};
-          options[this.fileName] = {content: this.html};
-          if (this.fileId) {
-            this.$.github.update(this.fileId, 'designer', true, options);
-          } else {
-            this.$.github.save('designer', true, options);
-          }
-        },
-        shareAction: function() {
-          this.sharing = true;
-          // must open window immediately so that it opens in a tab, not a window
-          this.shareWindow = window.open(this.getGistUrl());
-          this.saveAction();
-        },
-        share: function() {
-          if (this.fileId && this.shareWindow) {
-            this.shareWindow.location.href = this.getGistUrl();
-          }
-        },
-        loadRemoteContent: function() {
-          var id = window.location.hash.replace('#', '');
-          if (id) {
-            this.fileId = id;
-            this.$.github.load(id);
-          }
-        },
-        documentLoaded: function(event, detail) {
-          var doc = detail && detail[this.fileName];
-          if (doc) {
-            this.remoteHtml = doc.content;
-          }
-        },
-        documentSaved: function(event, detail) {
-          this.fileId = detail.id; 
-          if (this.sharing) {
-            this.sharing = false;
-            this.share();
-          }
-        },
-        remoteHtmlChanged: function() {
-          //console.log(this.remoteHtml);
-          this.loadHtml(this.remoteHtml);
-        },
-        loadHtml: function(html) {
-          this.designer.loadHtml(html);
-        },
-        tokenChangeHandler: function() {
-          this.$.github.cancel();
-          // make login work
-          /*
-          this.async(function() {
-            this.$.github.style.position = 'static';
-          });
-          */
-        },
-        getGistUrl: function() {
-          return 'https://gist.github.com/' + this.githubUser + '/' + this.fileId;
-        }
-      });
-    </script>
-  </polymer-element>
 </body>
 </html>