tweaks

index.html

@@ -182,34 +182,19 @@
 
     pear-ctrl[data-platform="darwin"] {
       margin-top: 16px;
+      margin-left: 8px;
     }
 
     system-status,
-    docs-viewer,
-    developer-tooling {
+    docs-viewer {
       position: relative;
       top: 156px
     }
 
-   #version {
-    position: fixed;
-    top: 96vh;
-    font-size: .6rem;
-    background: #1a1a1a;
-    color: white;
-    opacity: 1;
-    padding: 8px;
-    padding-top: 0px;
-    padding-bottom: 0px;
-    transition: top 0.3s;
-    border-radius: .35rem;
-    border: 1px solid #3a4816;
-   }
-
-   #version:hover {
-    top: 92vh;
-    transition: top 0.3s;
-   }
+    developer-tooling {
+      position: relative;
+      top: 96px
+    }
 
     a:visited,
     a:active,
@@ -287,19 +272,55 @@
     </section>
     <script type='module' src='./lib/docs-viewer.js'></script>
     <section>
-      <div class="col"><developer-tooling></devtools></div>
+      <div class="col"><developer-tooling></developer-tooling></div>
     </section>
-    <section id="version">
-      <p id="platform-version"></p>
-      <p id="app-version"></p>
-    </section>
-    <script>
-      const { versions } = Pear
-      process.env.WS_NO_BUFFER_UTIL = false // ws buffer-util opt-out
-      versions().then(({ app, platform }) => {
-        document.querySelector('#platform-version').innerText = `Pear Runtime ${platform.fork}.${platform.length}.${platform.key}`
-        document.querySelector('#app-version').innerText = `Pear Rtm App ${app.fork}.${app.length}.${app.key}`
+    <script type="module">
+      customElements.define('pear-version', class extends HTMLElement {
+        constructor () {
+          super()
+          this.template = document.createElement('template')
+          this.template.innerHTML = `
+            <style>
+              :host > div {
+                position: fixed;
+                top: 96vh;
+                font-size: .6rem;
+                background: #1a1a1a;
+                color: white;
+                opacity: 1;
+                padding: 8px;
+                padding-top: 0px;
+                padding-bottom: 0px;
+                border-radius: .35rem;
+                border: 1px solid #3a4816;
+                transition: top 0.3s;
+                display: block;
+              }
+
+              :host > div:hover {
+                top: 92vh;
+                transition: top 0.3s;
+              }
+            </style>
+            <div>
+              <p id="platform-version"></p>
+              <p id="app-version"></p>
+            </div>
+          `
+          this.root = this.attachShadow({ mode: 'open' })
+
+          Pear.versions().then(({ app, platform }) => {
+            this.root.appendChild(this.template.content.cloneNode(true))
+            this.root.querySelector('#platform-version').innerText = `Pear Runtime ${platform.fork}.${platform.length}.${platform.key}`
+            this.root.querySelector('#app-version').innerText = `Pear Rtm App ${app.fork}.${app.length}.${app.key}`
+          })
+        }
       })
+
+    </script>
+    <pear-version></pear-version>
+    <script>
+      process.env.WS_NO_BUFFER_UTIL = false // ws buffer-util opt-out
     </script>
     <script type='module' src='./lib/devtools.js'></script>
   </app-router>

lib/devtools.js

@@ -15,6 +15,11 @@ customElements.define('developer-tooling', class extends HTMLElement {
     this.template.innerHTML = `
       <div>
         <style>
+          :host > div {
+            padding-bottom: 4rem;
+            font-size: .9em;
+          }
+
           #add-key-input {
             width: 100%;
           }