From 635e4ff220714ad49b1e8a0a43410f627ef77c39 Mon Sep 17 00:00:00 2001
From: dmc <david.mark.clements@gmail.com>
Date: Wed, 14 Feb 2024 02:15:19 +0100
Subject: [PATCH] tweaks

---
 index.html      | 85 ++++++++++++++++++++++++++++++-------------------
 lib/devtools.js |  5 +++
 2 files changed, 58 insertions(+), 32 deletions(-)

diff --git a/index.html b/index.html
index 3253a22..c5d9f53 100644
--- a/index.html
+++ b/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>
diff --git a/lib/devtools.js b/lib/devtools.js
index b24fc70..0d528c7 100644
--- a/lib/devtools.js
+++ b/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%;
           }