npm - pear-electron - Versions diffs - 0.0.1 - Mend

pear-electron 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/decal.html ADDED Viewed

@@ -0,0 +1,733 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <script>
+    document.querySelector('html').classList.add(process.platform)
+    const runtime = Pear[Pear.constructor.UI]
+    window.DECAL = runtime[runtime.constructor.DECAL]
+  </script>
+  <link rel="stylesheet" href="./fonts.css">
+  <style>
+    body {
+      user-select: none;
+      background: #151517;
+      margin:0;
+      padding: 0;
+      border: 0.5px solid rgba(0, 0, 0, 0);
+      box-sizing: border-box;
+      border-radius: 8px;
+      font-family:'overpass-mono';
+      overflow: hidden;
+      -webkit-font-smoothing: antialiased;
+    }
+    a:visited, a:active, a {
+      color: #95E6CB;
+      outline: none;
+    }
+    #bar {
+      background: #151517;
+      height: 50px;
+      padding-top: 12px;
+      padding-right: 8px;
+      padding-left: 8px;
+      margin-left: auto;
+      margin-right: auto;
+      border-radius: none;
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+      color: #FFF;
+      white-space: nowrap;
+      box-sizing: border-box;
+      position: relative;
+      z-index: 2;
+      width: calc(100vw + 2px);
+      left: -2px;
+      top: -2px;
+    }
+    #bar > * {
+      -webkit-app-region: no-drag;
+    }
+    #win-ctrl {
+      display: none;
+    }
+    #window-controls {
+      -webkit-app-region: drag;
+      padding: 0;
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+      white-space: nowrap;
+      position: fixed;
+      z-index: 100;
+      width: 100%;
+      left: 0;
+      top: 0;
+    }
+    pear-ctrl[data-platform=darwin] {
+      margin-top: 22px;
+      margin-left: 12px;
+    }
+    .dialog pear-ctrl[data-platform=darwin] {
+      margin-top: -32px;
+    }
+    .dialog.darwin #bar {
+      background: rgba(0, 0, 0, 0);
+      display: block;
+    }
+  </style>
+</head>
+<body>
+  <div id="window-controls"><pear-ctrl></pear-ctrl></div>
+  <style>
+    /* windows styles, every selector *MUST* be preceded by .win32 */
+    .win32 #win-ctrl {
+      float: right;
+      margin-left: .6em;
+      margin-top: 0.22em;
+      border-spacing: 0.3em 0;
+    }
+    .win32 #win-ctrl > .win-ctrl {
+      opacity: 0.8;
+      height: 24px;
+      width: 24px;
+      display: table-cell;
+      vertical-align: middle;
+      text-align: center;
+    }
+    .win32 #win-ctrl > .win-ctrl:hover {
+      opacity: 1;
+    }
+    .win32 #bar {
+      width: calc(100vw + 8px);
+      left: -4px;
+    }
+    #win-ctrl.max #win-max  {
+       display: none;
+    }
+    #win-ctrl.max #win-restore  {
+       display: table-cell;
+    }
+    #win-ctrl #win-restore  {
+       display: none;
+    }
+  </style>
+  <template id="decal-dialog-tmpl">
+    <style>
+     #dialog {
+       width: 500px;
+       height: 340px;
+       position: absolute;
+       top: 40px;
+       left: 0px;
+       background-color: #25262C;
+       padding: 35px;
+       font-family: "Inter", sans-serif;
+       z-index: 99;
+     }
+     #header {
+       color: #FFFFFF;
+       font-size: 18px;
+       margin-left: 50px;
+     }
+     #p1 {
+       color: #FFFFFF;
+       margin-top: 30px;
+       margin-bottom: 5px;
+       font-size: 14px;
+       font-weight: 400;
+     }
+     #key {
+       color:#B0D944;
+       font-size: 14px;
+       font-weight: 600;
+       margin-top: 0px;
+       margin-bottom: 25px;
+     }
+     #p2 {
+       color: #ACB1BB;
+       font-size: 14px;
+       font-weight: 400;
+     }
+     #p2 > span {
+       color: #FFFFFF;
+       font-weight: 600;
+     }
+     input {
+       display: block;
+       padding: 16px 16px 16px 16px;
+       border: 2px solid #4A4E56;
+       color: #5E636D;
+       background-color: #202126;
+       width: 90%;
+       font-size: 14px;
+       border-radius: 8px;
+       margin-top: 25px;
+       outline: none;
+     }
+     #cancel, #confirm {
+       border: 2px solid #4A4E56;
+       color: #FFFFFF;
+       font-weight: 600;
+       background-color: #202126;
+       border-radius: 8px;
+       font-size: 16px;
+       width: 48%;
+       height: 55px;
+     }
+     #confirm.green-confirm, #cancel {
+       cursor: pointer;
+     }
+     #cancel {
+       margin-right: 2%;
+     }
+     #logo {
+       float: left;
+     }
+     #confirm {
+       background-color: #4A4E56;
+       color: #8C919D;
+     }
+     .green-confirm {
+       color: #B0D944 !important;
+       background-color: #222E02 !important;
+       border: 2px solid #B0D944 !important;
+     }
+     #error {
+       color: #FF6161;
+       font-size: 12px;
+       margin-bottom: 30px;
+       visibility: hidden;
+     }
+     .show {
+       visibility: visible !important;
+     }
+    </style>
+    <div id="dialog">
+      <svg id="logo" width="36" height="37" viewBox="0 0 36 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path d="M17.7632 2.75H19.3421V5.7125H17.7632V2.75Z" fill="#B0D944"/>
+        <path d="M16.9737 6.65V7.25H15.3947V8H21.7105V7.25H20.1316V6.0875H18.5526V6.65H16.9737Z" fill="#B0D944"/>
+        <path d="M23.2895 8.375H18.5526V8.9375H13.8158V10.2875H23.2895V8.375Z" fill="#B0D944"/>
+        <path d="M24.8684 10.6625H18.5526V11.225H12.2368V12.575H24.8684V10.6625Z" fill="#B0D944"/>
+        <path d="M24.8684 12.95H18.5526V13.5125H12.2368V14.8625H24.8684V12.95Z" fill="#B0D944"/>
+        <path d="M26.4474 15.2375H18.5526V15.8H10.6579V17.15H26.4474V15.2375Z" fill="#B0D944"/>
+        <path d="M26.4474 17.525H18.5526V18.0875H10.6579V19.4375H26.4474V17.525Z" fill="#B0D944"/>
+        <path d="M28.0263 19.8125H18.5526V20.375H9.07895V21.725H28.0263V19.8125Z" fill="#B0D944"/>
+        <path d="M29.6053 22.1H18.5526V22.6625H7.5V24.0125H29.6053V22.1Z" fill="#B0D944"/>
+        <path d="M29.6053 24.3875H18.5526V24.95H7.5V26.3H29.6053V24.3875Z" fill="#B0D944"/>
+        <path d="M29.6053 26.675H18.5526V27.2375H7.5V28.5875H29.6053V26.675Z" fill="#B0D944"/>
+        <path d="M26.4474 28.9625H18.5526V29.525H10.6579V30.875H26.4474V28.9625Z" fill="#B0D944"/>
+        <path d="M23.2895 31.25H18.5526V31.8125H13.8158V32.75H23.2895V31.25Z" fill="#B0D944"/>
+        <path d="M19.5 24.7143L27.75 20L36 24.7143V25.5627C36 30.6414 32.6333 35.1048 27.75 36.5C22.8667 35.1048 19.5 30.6414 19.5 25.5627V24.7143Z" fill="#E44B44"/>
+        <path d="M27.75 25.1562V29.5562M27.75 32.3062V32.3172" stroke="#391C20" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+      <h1 id="header"></h1>
+      <p id="p1"></p>
+      <p id="key"></p>
+      <p id="p2"></p>
+      <input type="text"></input>
+      <p id="error">Please, enter TRUST (uppercase) </p>
+      <button id="cancel">Cancel</button>
+      <button id="confirm">Confirm</button>
+    </div>
+  </template>
+  <script type="module">
+    class DecalDialog extends HTMLElement {
+      constructor () {
+        super()
+        const template = document.querySelector('#decal-dialog-tmpl').content
+        this.root = this.attachShadow({mode: 'open'})
+        this.root.appendChild(template.cloneNode(true))
+        this.confirm = this.root.querySelector('#confirm')
+        this.cancel = this.root.querySelector('#cancel')
+        this.input = this.root.querySelector('input')
+        this.error = this.root.querySelector('#error')
+        this.header = this.root.querySelector('#header')
+        this.p1 = this.root.querySelector('#p1')
+        this.p2 = this.root.querySelector('#p2')
+        this.key = null
+        this.ipc = null
+        this.cancel.addEventListener('click', async () => {
+          await Pear.Window.self.close()
+        })
+      }
+      #update () {
+        this.header.innerText = this.dataset.header
+        this.p1.innerText = this.dataset.p1
+        this.p2.innerHTML = this.dataset.p2
+        this.input.placeholder = this.dataset.placeholder
+      }
+      get options () {
+        return this.dataset
+      }
+      set options (opts) {
+        Object.assign(this.dataset, opts)
+        this.#update()
+      }
+      setLink (link) {
+        this.root.querySelector('#key').innerText = link
+      }
+    }
+    class TrustDialog extends DecalDialog {
+      constructor () {
+        super()
+        this.input.addEventListener('keyup', this.#onKeyup.bind(this))
+        this.confirm.addEventListener('click', this.#onClick.bind(this))
+      }
+      async #permit () {
+        await this.ipc.permit({ key: this.key })
+        await this.ipc.restart({ id: this.gid })
+      }
+      #onKeyup (event) {
+        const value = event.target.value
+        if (value === 'TRUST') {
+          this.confirm.classList.add('green-confirm')
+        } else {
+          this.confirm.classList.remove('green-confirm')
+        }
+        if (value === 'trust') {
+          this.error.classList.add('show')
+        } else {
+          this.error.classList.remove('show')
+        }
+      }
+      async #onClick () {
+          if (this.input.value === 'TRUST') await this.#permit()
+      }
+    }
+    class PasswordDialog extends DecalDialog {
+      constructor () {
+        super()
+        this.input.type = 'password'
+        this.input.addEventListener('keyup', this.#onKeyup.bind(this))
+        this.confirm.addEventListener('click', this.#onClick.bind(this))
+      }
+      async #permit () {
+        const password = this.input.value
+        const hypercoreid = DECAL['hypercore-id-encoding']
+        const t = await this.ipc.permit({ key: this.key, password })
+        await this.ipc.restart({ id: this.gid })
+      }
+      #onKeyup (event) {
+        const value = event.target.value
+        if (value.length > 0) {
+          this.confirm.classList.add('green-confirm')
+        } else {
+          this.confirm.classList.remove('green-confirm')
+        }
+      }
+      async #onClick () {
+        if (this.input.value.length > 0) await this.#permit()
+      }
+    }
+    customElements.define('trust-dialog', TrustDialog)
+    customElements.define('password-dialog', PasswordDialog)
+  </script>
+  <div id="bar">
+    <div id="win-ctrl">
+      <div id="win-min" class="win-ctrl">
+        <svg width="18" height="2" viewBox="0 0 18 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0 0.5625C0 0.28125 0.246094 0 0.5625 0H17.4375C17.7188 0 18 0.28125 18 0.5625C18 0.878906 17.7188 1.125 17.4375 1.125H0.5625C0.246094 1.125 0 0.878906 0 0.5625Z" fill="white"/>
+        </svg>
+      </div>
+      <div id="win-max" class="win-ctrl">
+        <svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M0 2.625C0 1.39453 0.984375 0.375 2.25 0.375H15.75C16.9805 0.375 18 1.39453 18 2.625V13.875C18 15.1406 16.9805 16.125 15.75 16.125H2.25C0.984375 16.125 0 15.1406 0 13.875V2.625ZM1.125 2.625V6H16.875V2.625C16.875 2.02734 16.3477 1.5 15.75 1.5H2.25C1.61719 1.5 1.125 2.02734 1.125 2.625ZM1.125 7.125V13.875C1.125 14.5078 1.61719 15 2.25 15H15.75C16.3477 15 16.875 14.5078 16.875 13.875V7.125H1.125Z" fill="white"/>
+        </svg>
+      </div>
+      <div id="win-restore" class="win-ctrl">
+        <svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M15.1875 1.375H7.3125C6.36328 1.375 5.625 2.14844 5.625 3.0625V3.625H4.5V3.0625C4.5 1.51562 5.73047 0.25 7.3125 0.25H15.1875C16.7344 0.25 18 1.51562 18 3.0625V10.9375C18 12.5195 16.7344 13.75 15.1875 13.75H14.625V12.625H15.1875C16.1016 12.625 16.875 11.8867 16.875 10.9375V3.0625C16.875 2.14844 16.1016 1.375 15.1875 1.375ZM11.25 4.75C12.4805 4.75 13.5 5.76953 13.5 7V16C13.5 17.2656 12.4805 18.25 11.25 18.25H2.25C0.984375 18.25 0 17.2656 0 16V7C0 5.76953 0.984375 4.75 2.25 4.75H11.25ZM11.25 5.875H2.25C1.61719 5.875 1.125 6.40234 1.125 7V9.25H12.375V7C12.375 6.40234 11.8477 5.875 11.25 5.875ZM2.25 17.125H11.25C11.8477 17.125 12.375 16.6328 12.375 16V10.375H1.125V16C1.125 16.6328 1.61719 17.125 2.25 17.125Z" fill="white"/>
+        </svg>
+      </div>
+      <div id="win-close" class="win-ctrl">
+        <svg id="win-close" width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14.8906 0.550781C15.1016 0.339844 15.4883 0.339844 15.6992 0.550781C15.9102 0.761719 15.9102 1.14844 15.6992 1.35938L8.77344 8.25L15.6992 15.1758C15.9102 15.3867 15.9102 15.7734 15.6992 15.9844C15.4883 16.1953 15.1016 16.1953 14.8906 15.9844L8 9.05859L1.07422 15.9844C0.863281 16.1953 0.476562 16.1953 0.265625 15.9844C0.0546875 15.7734 0.0546875 15.3867 0.265625 15.1758L7.19141 8.25L0.265625 1.35938C0.0546875 1.14844 0.0546875 0.761719 0.265625 0.550781C0.476562 0.339844 0.863281 0.339844 1.07422 0.550781L8 7.47656L14.8906 0.550781Z" fill="white"/>
+        </svg>
+      </div>
+    </div>
+    <script type="module">
+      document.querySelector('#bar').addEventListener('dblclick', async (evt) => {
+        if (evt.target !== evt.currentTarget) return
+        if (await Pear.Window.self.isMaximized()) await Pear.Window.self.restore()
+        else await Pear.Window.self.maximize()
+      })
+      if (process.platform === 'win32') {
+        document.querySelector('#win-min').addEventListener('click', async () => { await Pear.Window.self.minimize() })
+        document.querySelector('#win-max').addEventListener('click', async () => {
+          await Pear.Window.self.maximize()
+          document.querySelector('#win-ctrl').classList.add('max')
+        })
+        document.querySelector('#win-restore').addEventListener('click', async () => {
+          await Pear.Window.self.restore()
+          document.querySelector('#win-ctrl').classList.remove('max')
+        })
+      }
+    </script>
+  </div>
+  <decal-report>
+    <span slot="headline"></span>
+    <span slot="tagline"></span>
+    <span slot="cta"></span>
+    <template id="decal-report-tmpl">
+      <style>
+        #status {
+          display: none;
+          color: white;
+          padding: 2em;
+        }
+        #headline {
+          font-weight: 700;
+          font-family: 'overpass';
+          font-size: 2em;
+          margin-top: 20vh;
+          margin-bottom: 0.6em;
+        }
+        #tagline {
+          font-family: 'Open Sans';
+          font-size: .875em;
+          font-weight: 400;
+          margin-bottom: 2em;
+        }
+        #cta {
+          font-family: 'Open Sans';
+          cursor: pointer;
+          border-radius: 8px;
+          height: 44px;
+          box-sizing: border-box;
+          display: inline-block;
+          font-weight: 700;
+          font-size: 14px;
+          padding: 28px;
+          margin-top: 24px;
+          color: rgba(29, 110, 83, 1);
+          background: #95E6CB;
+          backdrop-filter: blur(48px);
+          width: auto;
+          line-height: 0;
+          border: none;
+          outline: none;
+          letter-spacing: 0.6px;
+        }
+      </style>
+      <div id="status">
+        <div id="headline">
+          <slot name="headline">HEADLINE</slot>
+        </div>
+        <div id="tagline">
+          <slot name="tagline">TAGLINE</slot>
+        </div>
+        <button id="cta"><slot name="cta">CTA</slot></button>
+      </div>
+    </template>
+    <script type="module">
+      customElements.define('decal-report', class extends HTMLElement {
+        ipc = DECAL.ipc
+        status = null
+        static get observedAttributes() { return ['show', 'action'] }
+        attributeChangedCallback(name, prior, value) {
+          if (name === 'show') {
+            if (value) this.shadowRoot.querySelector('#status').style.display = 'block'
+            else this.shadowRoot.querySelector('#status').style.display = ''
+          }
+          if (name === 'action') {
+            const cta = this.shadowRoot.querySelector('#cta')
+            const code = (value === 'reload') ? 64 : 0
+            const handler = (value === 'quit' || value === 'reload') ?
+              () => Pear.exit(code) :
+              () => {}
+            cta.addEventListener('click', handler)
+          }
+        }
+        show (type) { this.setAttribute("show", type) }
+        hide () { this.setAttribute("show", "") }
+        async subscribe (ipc, loader) {
+          this.ipc = ipc
+          for await (const report of ipc.reports()) {
+            this.status = report
+            this.gid = Pear.Window.self.id
+            loader.hide()
+            const { type, headline, tagline, cta, key, encrypted } = this.status
+            if (type === 'update' && this.status.version?.force) {
+              await loader.updating(this.status.version)
+              continue
+            }
+            if (type === 'permissionRequired') {
+              const permitDialog = encrypted ? document.createElement('password-dialog') : document.createElement('trust-dialog')
+              const ctrl = document.createElement('pear-ctrl')
+              ctrl.dataset.maximizable = false
+              document.documentElement.classList.add('dialog')
+              document.body.appendChild(ctrl)
+              const trustOpts =  {
+                header: 'Unknown app',
+                p1: 'This application has not been run before:',
+                p2: 'Type <span>TRUST</span> to continue if you know it is safe to open and to prevent showing this dialog again. <span> Only open trusted sources.</span>',
+                placeholder: 'Type TRUST to confirm'
+              }
+              const passwordOpts =  {
+                header: 'Encrypted app',
+                p1: 'This application is encrypted:',
+                p2: 'Type the password',
+                placeholder: 'Password'
+              }
+              permitDialog.options = encrypted ? passwordOpts : trustOpts
+              document.body.appendChild(permitDialog)
+              const hypercoreid = DECAL['hypercore-id-encoding']
+              const z32 = hypercoreid.encode(key)
+              permitDialog.setLink(`pear://${z32}`)
+              permitDialog.key = key
+              permitDialog.ipc = ipc
+              await this.ipc.setSize({ id: this.gid, width: 560, height: 450 })
+              await this.ipc.detachMainView({ id: this.gid })
+              continue
+            }
+            this.querySelector('[slot="headline"]').innerHTML = headline.content
+            this.querySelector('[slot="tagline"]').innerHTML = tagline.content
+            this.querySelector('[slot="cta"]').innerHTML = cta.content
+            this.setAttribute("action", cta.action)
+            await this.ipc.detachMainView({ id: this.gid })
+            const winctrl = document.getElementById('windows-controls')
+            if (!winctrl) {
+              const div = document.createElement('div')
+              div.id = 'windows-controls'
+              div.appendChild(document.createElement('pear-ctrl'))
+              document.body.prepend(div)
+            }
+            this.show(type)
+            await this.ipc.detachMainView({ id: this.gid })
+          }
+        }
+        constructor () {
+          super()
+          this.ipc = DECAL.ipc
+          const template = document.querySelector('#decal-report-tmpl').content
+          this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true))
+        }
+      })
+    </script>
+  </decal-report>
+  <decal-loader>
+    <span slot="update-length"></span>
+    <span slot="when"></span>
+    <template id="decal-loader-tmpl">
+      <style>
+        #loader {
+          display: none;
+        }
+        #loader {
+          position: absolute;
+          left: 0;
+          right: 0;
+          width: 100%;
+          text-align: center;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+        #logo {
+          animation: beat 1.1s infinite normal;
+          transform-origin: center;
+          display: block;
+          margin: auto;
+        }
+        @keyframes beat {
+          15% {
+            transform: scale(1.12);
+          }
+          30% {
+            transform: scale(1.0);
+          }
+          43% {
+            transform: scale(1.05);
+          }
+          67% {
+            transform: scale(1.0);
+          }
+        }
+        #update {
+          display: none;
+          margin: 0 auto;
+          margin-bottom: -4em;
+          color: #fff;
+          padding: 8px;
+          position: fixed;
+          bottom: 0;
+          left: 0;
+          font-size: 0.9em;
+          padding-bottom: 6em;
+          padding-left: 3em;
+          width: 50%;
+          min-width: 600px;
+          transform: translateY(140%);
+        }
+        #update h2 {
+          margin-bottom: .5rem;
+        }
+        #update th {
+          font-weight: bold;
+          text-align: left;
+        }
+        #update td:first-child {
+          text-align: right;
+        }
+        #update td:nth-child(2) {
+          text-align: left;
+        }
+      </style>
+      <div id="loader">
+        <svg id="logo" width="102" height="146" viewBox="0 0 102 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g clip-path="url(#clip0_8912_10861)">
+            <path d="M47.4056 0.838379H54.5943V15.0361H47.4056V0.838379Z" fill="#B0D944"/>
+            <path d="M43.8113 19.5305V22.406H36.6226V26.0004H65.3774V22.406H58.1887V16.8347H51V19.5305H43.8113Z" fill="#B0D944"/>
+            <path d="M72.5662 27.7974H51V30.4931H29.4339V36.963H72.5662V27.7974Z" fill="#B0D944"/>
+            <path d="M79.7548 38.7593H51V41.455H22.2451V47.9249H79.7548V38.7593Z" fill="#B0D944"/>
+            <path d="M79.7548 49.7219H51V52.4177H22.2451V58.8875H79.7548V49.7219Z" fill="#B0D944"/>
+            <path d="M86.9436 60.6846H51V63.3803H15.0565V69.8502H86.9436V60.6846Z" fill="#B0D944"/>
+            <path d="M86.9436 71.6481H51V74.3438H15.0565V80.8137H86.9436V71.6481Z" fill="#B0D944"/>
+            <path d="M94.1323 82.61H51V85.3058H7.86774V91.7756H94.1323V82.61Z" fill="#B0D944"/>
+            <path d="M101.321 93.5726H51V96.2684H0.679016V102.738H101.321V93.5726Z" fill="#B0D944"/>
+            <path d="M101.321 104.536H51V107.232H0.679016V113.702H101.321V104.536Z" fill="#B0D944"/>
+            <path d="M101.321 115.499H51V118.195H0.679016V124.664H101.321V115.499Z" fill="#B0D944"/>
+            <path d="M86.9436 126.461H51V129.156H15.0565V135.626H86.9436V126.461Z" fill="#B0D944"/>
+            <path d="M72.5662 137.424H51V140.12H29.4339V144.613H72.5662V137.424Z" fill="#B0D944"/>
+          </g>
+          <defs>
+            <clipPath id="clip0_8912_10861">
+              <rect width="100.642" height="145.571" fill="white" transform="translate(0.679016 0.214233)"/>
+            </clipPath>
+          </defs>
+        </svg>
+        <table id="update">
+          <tr>
+              <th colspan="2" style="color: #95E6CB;">Auto Updating to <slot name="update-length"></slot>...</th>
+          </tr>
+          <tr id=hint>
+            <td colspan="2" style="text-align:left!important;text-indent:.2em">Application(s) will restart <slot name="when">after update</slot></th>
+          </tr>
+      </table>
+      </div>
+    </template>
+    <script type="module">
+      customElements.define('decal-loader', class extends HTMLElement {
+        #updating = false
+        async updating ({ force, key, length, fork, current }) {
+          if (!force) return
+          this.#updating = true
+          this.querySelector('[slot="update-length"]').innerHTML = length
+          this.shadowRoot.querySelector('#update').style.display = 'block'
+          this.show()
+          await this.ipc.detachMainView({ id: Pear.Window.self.id })
+        }
+        show () {
+          this.shadowRoot.querySelector('#loader').style.display = 'block'
+          document.getElementById('bar').style.display = 'block'
+        }
+        hide () {
+          this.shadowRoot.querySelector('#loader').style.display = 'none'
+          document.getElementById('bar').style.display = 'none'
+        }
+        async restart () {
+          let countdown = 3000
+          while (countdown > 0) {
+            this.querySelector('[slot="when"]').innerText = `in ${countdown/1000} seconds`
+            await new Promise((resolve) => setTimeout(resolve, 1000))
+            countdown -= 1000
+          }
+          this.querySelector('[slot="when"]').innerText = 'as of now!'
+          await this.ipc.restart()
+        }
+        async start (ipc, config) {
+          this.show()
+          this.ipc = ipc
+          await ipc.afterViewLoaded({ id: Pear.Window.self.id })
+          if (this.#updating) return true
+          this.hide()
+          const ctrl = document.querySelector('#window-controls pear-ctrl')
+          ctrl.remove()
+          document.getElementById('window-controls').remove()
+          await ctrl.closing
+          await ipc.attachMainView({ id: Pear.Window.self.id })
+        }
+        constructor () {
+          super()
+          const template = document.querySelector('#decal-loader-tmpl').content
+          this.attachShadow({mode: 'open'}).appendChild(template.cloneNode(true))
+        }
+      })
+    </script>
+  </decal-loader>
+  <script type="module">
+    const { message, messages } = Pear
+    const ipc = DECAL.ipc
+    const loader = document.querySelector('decal-loader')
+    const report = document.querySelector('decal-report')
+    report.subscribe(ipc, loader)
+    process.on('exit', (code) => {
+      const actuallyARefresh = code === undefined
+      if (actuallyARefresh) return
+      Pear.exit(code)
+    })
+    async function start () {
+      const win32CloseListener = process.platform === 'win32' ? () => Pear.exit(0) : null
+      if (process.platform === 'win32') document.querySelector('#win-close').addEventListener('click', win32CloseListener)
+      let config = Pear.config
+      if (process.platform === 'win32') {
+        const close = document.querySelector('#win-close')
+        close.removeEventListener('click', win32CloseListener)
+        close.addEventListener('click', async () => {
+          await Pear.Window.self.close()
+        })
+      }
+      const updating = await loader.start(ipc, config)
+      if (updating) return
+    }
+    start().catch(console.error)
+  </script>
+</body>
+</html>