74 changed files with 2459 additions and 8947 deletions
--- a/.env
+++ b/.env
@ -1,2 +0,0 @@
-git remote | grep codeberg || git remote add codeberg git@codeberg.org:xrsh/xrsh-com.git
-git remote | grep c-frame  || git remote add c-frame git@github.com:c-frame/xrsh-com.git
--- a/.forgejo/workflows/mirror_to_c-frame.yaml
+++ b/.forgejo/workflows/mirror_to_c-frame.yaml
@ -13,7 +13,7 @@ jobs:
      - run: "echo \"${{ secrets.SSHKEY_APPS }}\" > ~/.ssh/id_rsa" 
      - run: ssh-keyscan github.com >> ~/.ssh/known_hosts   # see https://gist.github.com/vikpe/34454d69fe03a9617f2b009cc3ba200b
      - run: chmod 600 -R ~/.ssh
-      - run: git remote add github git@github.com:c-frame/xrsh-com.git
+      - run: git remote add github git@github.com:coderofsalvation/xrsh-apps 
      - run: git push github main
      # *todo* trigger deploy at website
      #- run: git clone git@github.com:coderofsalvation/xrsh xrsh.github # now push empty commit to deploy website
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +0,0 @@
-com/isoterminal/mnt/hook.d
-com/isoterminal/mnt/console*
-com/isoterminal/mnt/dev/*
--- a/README.awk
+++ b/README.awk
@ -1,41 +0,0 @@
-#!/usr/bin/env -S awk -f
-# a no-nonsense source-to-markdown generator which scans for:
-#
-# /**
-#  * # foo
-#  *
-#  * this is markdown $(cat bar.md)
-#  */
-#
-#  var foo; //  comment with 2 leading spaces is markdown too $(date)
-#
-# easily refactorable to hash-based languages (py/bash/perl/lua e.g.) 
-# by changing the regexes
-#
-
-BEGIN{
-  # printf README.md until '# Component List'
-  system("grep -B9999 '# Component List' README.md")
-  print ""
-}
-
-/\$(?![\(|"])/           { cmd=$0; 
-                           gsub(/^.*\$\(/,"",cmd); 
-                           gsub(/\).*/,"",cmd);
-                           cmd | getline stdout; close(cmd);
-                           sub(/\$\(.*\)/,stdout);
-                         } 
-/\/\*\*/                 { doc=1; sub(/^.*\/\*/,""); }
-doc && /\*\//            { doc=0;
-                           sub(/[[:space:]]*\*\/.*/,"");
-                           sub(/^[[:space:]]*\*[[:space:]]?/,"");
-                           print
-                         }
-doc && /^[[:space:]]*\*/ { sub(/^[[:space:]]*\*[[:space:]]?/,""); 
-                           print 
-                         }
-#!doc && /\/\/  /         { sub(".*//  ",""); 
-#                           sub("# ","\n# ");
-#                           sub("> ","\n> ");
-#                           print
-#                         }
--- a/README.md
+++ b/README.md
@ -1,256 +1,13 @@
 # XRshell apps & components

-<img src='https://codeberg.org/xrsh/xrsh/media/branch/main/xrsh.svg' width="25%"/>
+<img src='https://github.com/coderofsalvation/xrshell/raw/main/src/assets/logo.svg' width="25%"/>

-This is a library of useful AFRAME components used in [XRSH](https://xrsh.isvery.ninja) [or in any AFRAME app].<br>
-Characteristics:
-
-* selfcontained 
-* auto-loading of dependencies (via [AFRAME.utils.require()](com/require.js) see this [example](com/example/helloworld.js))
+This is a library of useful AFRAME components which can be used in any AFRAME app, which are higher-level than usual (and used in [XRSH](https://coderofsalvation.github.io/xrsh):

 # Usage

 ```html
-<script src="https://codeberg.org/xrsh/xrsh-com/com/require.js"/>
-<script src="https://codeberg.org/xrsh/xrsh-com/com/example/helloworld.js"/>
+<script src="https://coderofsalvation.github.io/xrsh/src/com/example/helloworld.js"/>

 <a-entity helloworld="foo:1" class="cubes" name="box">  
 ```
-
-See component list below
-
-> this README.md is generated by running `echo "$(./README.awk com/*.js)" > README.md`
-
-## Credits
-
-This project is partially funded through [NGI0 Entrust](https://nlnet.nl/entrust), a fund established by [NLnet](https://nlnet.nl) with financial support from the European Commission's [Next Generation Internet](https://ngi.eu) program. Learn more at the [NLnet project page](https://nlnet.nl/project/xrsh).
-
-[<img src="https://nlnet.nl/logo/banner.png" alt="NLnet foundation logo" width="20%" />](https://nlnet.nl)
-[<img src="https://nlnet.nl/image/logos/NGI0_tag.svg" alt="NGI Zero Logo" width="20%" />](https://nlnet.nl/entrust)
-
-# Component List
-
-
-## [data_events](com/data_events.js)
-
-allows components to react to data changes 
-
-```html 
- <script>
-   AFRAME.registerComponent('mycom',{
-     init: function(){ this.data.foo = 1 }, 
-     event: {
-       foo:   (e) => alert("I was updated!")
-     }
-   })
- </script>
-
- <a-entity mycom data_events/>
-```
-
-
-
-## [html-as-texture-in-xr](com/html-as-texture-in-xr.js)
-
-shows domid **only** in immersive mode 
-(wrapper around [aframe-htmlmesh](https://ada.is/aframe-htmlmesh/)
-
-It also sets class 'XR' to the (HTML) body-element in immersive mode.
-This allows CSS (in [dom component](com/dom.js)) to visually update accordingly.
-
-> depends on [AFRAME.utils.require](com/require.js)
-
-```html 
- <style type="text/css">
-   .XR #foo { color:red; }
- </style>
-
- <a-entity html-as-texture-in-xr="domid: #foo">
-   <b id="foo">hello</b>
- </a-entitiy>
-```
-
-| property     | type               |
-|--------------|--------------------|
-| `domid`      | `string`           |
-
-| event        | target     | info                                 |
-|--------------|------------|--------------------------------------|
-| `3D`         | a-scene    | fired when going into immersive mode |
-| `2D`         | a-scene    | fired when leaving immersive mode    |
-
-
-
-## [isoterminal](com/isoterminal.js)
-
-Renders a windowed terminal in both (non)immersive mode.
-It displays an interactive javascript console or boots into 
-a Linux ISO image (via WASM).
-
-```html 
-  <a-entity isoterminal="iso: xrsh.iso" position="0 1.6 -0.3"></a-entity>
-```
-
-> depends on [AFRAME.utils.require](com/require.js)
-
-| property          | type      | default                | info |
-|-------------------|-----------|------------------------|------|
-| `iso`             | `string`  | https`//forgejo.isvery.ninja/assets/xrsh-buildroot/main/xrsh.iso" | |
-| `overlayfs`       | `string`  | ''     | zip URL/file to autoextract on top of filesystem |
-| `width`           | `number`  |  800   ||
-| `height`          | `number`  |  600   ||
-| `depth`           | `number`  |  0.03  ||
-| `lineHeight`      | `number`  |  18    ||
-| `bootMenu`        | `string`  |  ""    | character to auto-enter in bootMenu  |
-| `bootMenuURL`     | `string`  |  ""    | character to auto-enter in bootMenu when URL has fragment (#foo.zip e.g.) |
-| `padding`         | `number`  |  18    | |
-| `maximized`       | `boolean` | false  | |
-| `minimized`       | `boolean` | false  | |
-| `muteUntilPrompt` | `boolean` | true   | mute stdout until a prompt is detected in ISO |
-| `HUD`             | `boolean` | false  | link to camera movement |
-| `transparent`     | `boolean` | false  | heavy, needs good gpu |
-| `memory`          | `number`  | 60     | VM memory (in MB) [NOTE` quest or smartphone webworker might crash > 40mb ] |
-| `bufferLatency`   | `number`  | 1      | in ms` bufferlatency from webworker to term (batch-update every char to texture) |
-| `debug`           | `boolean` | false  | |
-| `emulator`        | `string`  | fbterm | terminal emulator |
-
-> for more info see [xrsh.isvery.ninja](https://xrsh.isvery.ninja)
-
-Component design:
-```
-                  css/html template                                                                                
-                                                                                                                    
-                    ┌─────────┐   ┌────────────┐                  exit-AR                                
-           ┌───────►│ com/dom ┼──►│ com/window ├───────────────── exit-VR  ◄─┐                           
-           │        └─────────┘   └───────────┬┘                             │                           
-           │                                  │                              │                           
-┌──────────┴────────┐                         │   ┌───────────┐    ┌─────────────────────────────┐
-│  com/isoterminal  ├────────────────────────────►│com/term.js│    │com/html-as-texture-in-XR.js │
-└────────┬─┬────────┘                         │   └──┬─────┬▲─┘    └─────────────────────────────┘
-         │ │        ┌────────┐             ┌──▼──────▼──────┐                     ││        │                       
-         │ └───────►│ plane  ├─────►text───┼►div#isoterminal│◄────────────────── enter-VR   │                       
-         │          └────────┘             └────────────────┘                    enter-AR ◄─┘                       
-         │                                   │                                                     
-         │                                   │                                                                   
-         │                             ISOTerminal.js                                                                   
-         │                ┌───────────────────────────┐           
-         │                │ com/isoterminal/worker.js ├            
-         │                └──────────────┌────────────┤            
-         │                     │         │ v86.js     │            
-         │                     │         │ feat/*.js  │            
-         │                     │         │ libv86.js  │            
-         │                     │         └────────────┘            
-         │                     │         
-         └─────────────────────┘    
-                                                                                                                    
-NOTE: For convenience reasons, events are forwarded between com/isoterminal.js, worker.js and ISOTerminal
-      Instead of a melting pot of different functionnames, events are flowing through everything (ISOTerminal.emit())
-```       
-
-
-## [launcher](com/launcher.js)
-
-displays app (icons) in 2D and 3D handmenu (enduser can launch desktop-like 'apps')
-
-```html
-<a-entity launcher>
-  <a-entity launch="component: helloworld; foo: bar"><a-entity>
-</a-entity>
- 
-```
-
-| property     | type               | example                                                                                |
-|--------------|--------------------|----------------------------------------------------------------------------------------|
-| `attach`     | `selector`         | hand or object to attach menu to                                                       |
-| `registries` | `array` of strings | `<a-entity launcher="registers: https://foo.com/index.json, ./index.json"/>`           |
-
-| event        | target | info                                                                                               |
-|--------------|-------------------------------------------------------------------------------------------------------------|
-| `launcher`   | an app | when pressing an app icon, `launcher` event will be send to the respective app                     |
-
-There a multiple ways of letting the launcher know that an app can be launched:
-
-1. any AFRAME component with an `launcher`-event + manifest is automatically added:
- 
- ```javascript
- AFRAME.registerComponent('foo',{
-   events:{
-     launcher: function(){ ...launch something... }
-   },
-   manifest:{ // HTML5 manifesto JSON object
-     // https://www.w3.org/TR/appmanifest/ 
-   }
- }
- ```
-
-2. dynamically in javascript   
-
-```javascript
-window.launcher.register({
-  name:"foo",
-  icon: "https://.../optional_icon.png" 
-  description: "lorem ipsum",
-  cb: () => alert("foo")
-})
-//window.launcher.unregister('foo')
-```
-
-
-
-Restore the pose.
-
-
-## [pastedrop](com/pastedrop.js)
-
-detects user copy/paste and file dragdrop action
-and clipboard functions
-
-```html 
-  <a-entity pastedrop/>
-```
-
-| event        | target | info                                                                                               |
-|--------------|--------|------------------------------------------|
-| `pasteFile`  | self   | always translates input to a File object |
-
-
-Restore the pose.
-
-
-## [require](com/require('').js)
-
-automatically requires dependencies or missing components
-
-```javascript
-await AFRAME.utils.require( this.dependencies )               (*) autoload missing components
-await AFRAME.utils.require( this.el.getAttributeNames() )     (*) autoload missing components
-await AFRAME.utils.require({foo: "https://foo.com/aframe/components/foo.js"},this)
-await AFRAME.utils.require(["./app/foo.js","foo.css"],this)
-```
-
-> (*) = prefixes baseURL AFRAME.utils.require.baseURL ('./com/' e.g.)
-
-
-## [window](com/window.js)
-
-wraps a draggable window around a dom id or [dom](com/dom.js) component.
-
-```html 
-  <a-entity window="dom: #mydiv"/>
-```
-
-> depends on [AFRAME.utils.require](com/require.js)
-
-| property         | type      | default                | info |
-|------------------|-----------|------------------------|------|
-| `title`          |`string`   | ""                     |      |
-| `width`          |`string`   |                        |      |
-| `height`         |`string`   | 260px                  |      |
-| `uid`            |`string`   |                        |      |
-| `attach`         |`selector` |                        |      |
-| `dom`            |`selector` |                        |      |
-| `max`            |`boolean`  | false                  |      |
-| `min`            |`boolean`  | false                  |      |
-| `x`              |`string`   | "center"               |      |
-| `y`              |`string`   | "center"               |      |
-| `class`          |`array`    | []                     |      |
--- a/com.refactor/aframe-inspector.js
+++ b/com.refactor/aframe-inspector.js
@ -0,0 +1,75 @@
+AFRAME.registerComponent('aframe-inspector', {
+  schema: { 
+    foo: { type:"string"}
+  },
+
+  init: function () { 
+    document.querySelector('a-scene').setAttribute("inspector","url: https://cdn.jsdelivr.net/gh/aframevr/aframe-inspector@master/dist/aframe-inspector.min.js")
+  },
+
+  requires:{ },
+
+  events:{
+
+    // component events
+    ready:         function(e){ },
+
+    launcher:      function(e){ 
+      $('[inspector]').components.inspector.openInspector()
+    },
+
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "short_name": "inspector",
+    "name": "AFRAME inspector",
+    "icons": [
+      {
+        "src": "https://css.gg/list-tree.svg",
+        "type": "image/svg+xml",
+        "sizes": "512x512"
+      }
+    ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "shortcuts": [
+      {
+        "name": "What is the latest news?",
+        "cli":{
+          "usage":  "helloworld <type> [options]",
+          "example": "helloworld news",
+          "args":{
+            "--latest": {type:"string"}
+          }
+        },
+        "short_name": "Today",
+        "description": "View weather information for today",
+        "url": "/today?source=pwa",
+        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "use CTRL+ALT+i to launch inspector",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Helloworld application 
+
+This is a help file which describes the application.
+It will be rendered thru troika text, and will contain
+headers based on non-punctualized lines separated by linebreaks,
+in above's case "\nHelloworld application\n" will qualify as header.
+    `
+  }
+
+});
+
--- a/com.refactor/isoterminal.js
+++ b/com.refactor/isoterminal.js
@ -0,0 +1,182 @@
+AFRAME.registerComponent('isoterminal', {
+  schema: {
+    cols: { type: 'number', default: 120 },
+    rows: { type: 'number', default: 50 },
+    transparent: { type:'boolean', default:false } // need good gpu
+  },
+
+  init: function(){
+    this.el.object3D.visible = false
+  },
+
+  requires:{
+    html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
+    winboxjs:    "https://unpkg.com/winbox@0.2.82/dist/winbox.bundle.min.js",     // deadsimple windows: https://nextapps-de.github.io/winbox
+    winboxcss:   "https://unpkg.com/winbox@0.2.82/dist/css/winbox.min.css",       //
+    xtermcss:    "https://unpkg.com/xterm@3.12.0/dist/xterm.css",
+    xtermjs:     "https://unpkg.com/xterm@3.12.0/dist/xterm.js",
+    axterm:      "https://unpkg.com/aframe-xterm-component/aframe-xterm-component.js"
+  },
+
+  dom: {
+    scale:   3,
+    events:  ['click','keydown'],
+    html:    (me) => `<div></div>`,
+
+    css:     (me) => `.isoterminal{
+                overflow:hidden;
+              }`
+  },
+
+  createTerminal: function(){
+    this.el.object3D.visible = true
+
+    const term = this.term = new Terminal({
+      allowTransparency: this.data.transparent,
+      cursorBlink: true,
+      disableStdin: false,
+      rows: this.data.rows,
+      cols: this.data.cols,
+      fontSize: 16
+    })
+
+    term.open(this.el.dom)
+    this.canvas = this.el.dom.querySelector('.xterm-text-layer')
+    this.canvas.id = 'terminal-' + (terminalInstance++)
+    this.canvasContext = this.canvas.getContext('2d')
+
+    this.cursorCanvas = this.el.dom.querySelector('.xterm-cursor-layer')
+
+    //this.el.setAttribute('material', `transparent: ${this.data.transparent?'true':'false'}; src: #${this.canvas.id}` )
+
+    term.on('refresh', () => {
+      console.log("refresh")
+    })
+
+    term.on('data', (data) => {
+      this.el.emit('xterm-data', data)
+    })
+
+    this.el.addEventListener('click', () => {
+      term.focus()
+    })
+
+    const message = 'Hello from \x1B[1;3;31mWebVR\x1B[0m !\r\n$ '
+    term.write(message)
+  },
+
+  events:{
+
+    // combined AFRAME+DOM reactive events
+    click:   function(e){ }, //
+    keydown: function(e){ }, //
+
+    // reactive events for this.data updates
+    myvalue: function(e){ this.el.dom.querySelector('b').innerText = this.data.myvalue },
+
+    ready: function( ){
+      this.el.dom.style.display = 'none'
+    },
+
+    launcher:  function(){
+      this.el.dom.style.display = ''
+      this.createTerminal()
+
+      new WinBox( this.manifest.iso + ' ' + this.manifest.name, {
+        width: window.innerWidth*0.8, 
+        height: window.innerHeight*0.8,
+        x:"center",
+        y:"center",
+        id:  this.el.uid, // important hint for html-mesh
+        root: document.querySelector("#overlay"),
+        mount: this.el.dom,
+        onclose: () => {
+          if( !confirm('do you want to kill this virtual machine and all its processes?') ) return true
+          this.el.dom.style.display = 'none'
+          return false
+        }
+      });
+
+    },
+
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "iso": "linux-x64-4.15.iso",
+    "short_name": "ISOTerm",
+    "name": "terminal",
+    "icons": [
+      {
+        "src": "https://css.gg/terminal.svg",
+        "type": "image/svg+xml",
+        "sizes": "512x512"
+      }
+    ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "shortcuts": [
+      {
+        "name": "What is the latest news?",
+        "cli":{
+          "usage":  "helloworld <type> [options]",
+          "example": "helloworld news",
+          "args":{
+            "--latest": {type:"string"}
+          }
+        },
+        "short_name": "Today",
+        "description": "View weather information for today",
+        "url": "/today?source=pwa",
+        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "Hello world information",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Helloworld application
+
+This is a help file which describes the application.
+It will be rendered thru troika text, and will contain
+headers based on non-punctualized lines separated by linebreaks,
+in above's case "\nHelloworld application\n" will qualify as header.
+    `
+  }
+
+});
+
+AFRAME.registerComponent('xterm-shell', {
+  dependencies: ['xterm'],
+  init: function() {
+    const message = 'Run \x1B[1;3;31m\'node server.js\'\x1B[0m to open a shell\r\n'
+    const xterm = this.el.components['xterm']
+
+    xterm.write(message)
+
+    const socket = new WebSocket('ws://localhost:8080/')
+
+    // Listen on data, write it to the terminal
+    socket.onmessage = ({data}) => {
+      xterm.write(data)
+    }
+
+    socket.onclose = () => {
+      xterm.write('\r\nConnection closed.\r\n')
+    }
+
+    // Listen on user input, send it to the connection
+    this.el.addEventListener('xterm-data', ({detail}) => {
+      socket.send(detail)
+    })
+  }
+})
--- a/com.refactor/load.js
+++ b/com.refactor/load.js
@ -0,0 +1,111 @@
+AFRAME.registerComponent('load', {
+  schema: { 
+    foo: { type:"string"}
+  },
+
+  init: function () {
+    this.el.object3D.visible = false
+
+    //this.el.innerHTML = ` `
+  },
+
+  requires:{
+    // somecomponent:        "https://unpkg.com/some-aframe-component/mycom.min.js"
+  },
+
+  events:{
+
+    // component events
+    somecomponent: function( ){ console.log("component requirement mounted") },
+    ready:         function(e){ console.log("requires are loaded") },
+
+    launcher:      function(e){ 
+      this.filedialog( (data) => {
+        if( data.match(/<html/) && confirm('reload new XR shell environment?') ){
+          return document.write(data)
+        }
+        if( data.match(/<a-/) ){
+          let el = document.createElement('a-entity')
+          el.innerHTML = data
+          AFRAME.scenes[0].appendChild(el)
+        }
+      })
+    },
+
+
+  },
+
+  filedialog: function(onDone){
+    if( !this.fileEl ){
+      let el = this.fileEl = document.createElement('input')
+      el.type = "file"
+      el.addEventListener('change', (e) =>{
+        var file = e.target.files[0];
+        if (!file) {
+          return;
+        }
+        var reader = new FileReader();
+        reader.onload = function(e) {
+          var contents = e.target.result;
+          onDone(contents)
+        };
+        reader.readAsText(file);
+      })
+      document.body.appendChild(el)
+    }
+    this.fileEl.click()
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "short_name": "Hello world",
+    "name": "Hello world",
+    "icons": [
+      {
+        "src": "https://css.gg/arrow-up-r.svg",
+        "type": "image/svg+xml",
+        "sizes": "512x512"
+      }
+    ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "shortcuts": [
+      {
+        "name": "What is the latest news?",
+        "cli":{
+          "usage":  "helloworld <type> [options]",
+          "example": "helloworld news",
+          "args":{
+            "--latest": {type:"string"}
+          }
+        },
+        "short_name": "Today",
+        "description": "View weather information for today",
+        "url": "/today?source=pwa",
+        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "Hello world information",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Helloworld application 
+
+This is a help file which describes the application.
+It will be rendered thru troika text, and will contain
+headers based on non-punctualized lines separated by linebreaks,
+in above's case "\nHelloworld application\n" will qualify as header.
+    `
+  }
+
+});
+
--- a/com.refactor/manual.js
+++ b/com.refactor/manual.js
@ -0,0 +1,130 @@
+AFRAME.registerComponent('manual', {
+  schema: { 
+    foo: { type:"string"}
+  },
+
+  init: function () {  
+    // requires are loaded
+    this.el.addEventListener('ready', () => this.el.dom.style.display = 'none' )
+  },
+
+  requires:{
+    html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",     // html to AFRAME
+    winboxjs:    "https://unpkg.com/winbox@0.2.82/dist/winbox.bundle.min.js",        // deadsimple windows: https://nextapps-de.github.io/winbox
+    winboxcss:   "https://unpkg.com/winbox@0.2.82/dist/css/winbox.min.css",          // deadsimple windows: https://nextapps-de.github.io/winbox
+  },
+
+  dom: {
+    scale:   3,
+    events:  ['click','keydown'],
+    html:    (me) => `<div>
+
+                  <h1>Welcome to XRSHell</h1>
+                  <br>
+                  <!-- <img src="https://i.imgur.com/BW22wrb.png"/> -->
+                  <br><br>
+                  The <b>xrsh</b> (xrshell) brings the <a href="https://en.wikipedia.org/wiki/Free_and_open-source_software" target="_blank">FOSS</a>- and <a href="https://en.wikipedia.org/wiki/Linux" target="_blank">Linux</a>-soul to <a href="https://en.wikipedia.org/wiki/WebXR" target="_blank">WebXR</a>, promoting the use of (interactive text) terminal and user-provided operating systems inside WebXR.
+                  <br><br>Technically, <b>xrsh</b> is a bundle of freshly created re-usable FOSS WebXR components.<br>These provide a common filesystem interface for interacting with WebXR, offering the well-known linux/unix toolchain including a commandline to invoke, store, edit and run WebXR utilities - regardless of their implementation.
+                  <br><br>Think of it as termux for the VR/AR headset browser, which can be used to e.g. livecode (using terminal auto-completion!) for XR component (registries).                
+
+                  <br>
+                  <ul>
+                    <li><a href="https://forgejo.isvery.ninja/xrsh" target="_blank">source xrsh</a></li>
+                    <li><a href="https://forgejo.isvery.ninja/xrsh-apps" target="_blank">source xrsh apps</a></li>
+                    <li><a href="https://forgejo.isvery.ninja/xrsh-media" target="_blank">roadmap meeting recordings</a></li>
+                  </ul>
+
+                      </div>`,
+    css:     (me) => `.manual > div { padding:11px }`
+  },
+
+  events:{
+
+    // component events
+    html:     function( ){ console.log("html-mesh requirement mounted") },
+
+    // combined AFRAME+DOM reactive events
+    click:   function(e){ }, // 
+    keydown: function(e){ }, // 
+
+    // reactive events for this.data updates 
+    myvalue: function(e){ this.el.dom.querySelector('b').innerText = this.data.myvalue },
+
+    launcher:  function(){
+      new WinBox( this.manifest.name, { 
+        width: '70%',
+        height: '70%',
+        x:"center",
+        y:"center",
+        id:  this.el.uid, // important hint for html-mesh  
+        root: document.querySelector("#overlay"),
+        mount: this.el.dom,
+        onclose: () => { this.el.dom.style.display = 'none'; return false; }
+      });
+      this.el.dom.style.display = ''
+      this.el.setAttribute("xrf", document.location.search || "https://coderofsalvation.github.io/xrsh-media/assets/background.glb")
+      // navigate with: AFRAME.XRF.navigator.to("https://xrfragment.org/index.glb")
+    },
+
+    DOMready: function( ){ 
+      this.el.dom.style.display = 'none'
+      console.log("this.el.dom has been added to DOM")
+      this.data.myvalue = 1
+      setInterval( () => this.data.myvalue++, 100 )
+    }
+
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "short_name": "XRSH Manual",
+    "name": "XRSH Manual",
+    "icons": [
+      {
+        "src": "https://css.gg/coffee.svg",
+        "type": "image/svg+xml",
+        "sizes": "512x512"
+      }
+    ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "shortcuts": [
+      {
+        "name": "What is the latest news?",
+        "cli":{
+          "usage":  "helloworld <type> [options]",
+          "example": "helloworld news",
+          "args":{
+            "--latest": {type:"string"}
+          }
+        },
+        "short_name": "Today",
+        "description": "View weather information for today",
+        "url": "/today?source=pwa",
+        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "Hello world information",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Helloworld application 
+
+This is a help file which describes the application.
+It will be rendered thru troika text, and will contain
+headers based on non-punctualized lines separated by linebreaks,
+in above's case "\nHelloworld application\n" will qualify as header.
+    `
+  }
+
+});
+
--- a/com.refactor/vconsole.js
+++ b/com.refactor/vconsole.js
@ -0,0 +1,95 @@
+AFRAME.registerComponent('vconsole', {
+  schema: { 
+    foo: { type:"string"}
+  },
+
+  init: function () {  
+      //AFRAME.XRF.navigator.to("https://coderofsalvation.github.io/xrsh-media/assets/background.glb")
+    document.head.innerHTML += `
+      <style type="text/css">
+        .vc-mask   { display: none !important }
+        .vc-switch { display: none !important }
+        .vc-panel  {
+          right:unset !important;
+          width:100%;
+          max-width:600px;
+          z-index:100 !important;
+        }
+      </style>
+    `
+  },
+
+  requires:{
+    vconsole:        "https://unpkg.com/vconsole@latest/dist/vconsole.min.js"
+  },
+
+  events:{
+
+    // requires are loaded
+    ready: function(e){
+      this.vConsole = new window.VConsole() 
+      document.querySelector('.vc-mask').remove()
+      document.querySelector('.vc-switch').remove()
+    },
+
+    launcher: function(){
+      if( !this.vConsole ) return 
+      let panel = document.querySelector('.vc-panel') 
+      if( panel.style.display == 'none' ) this.vConsole.show()
+      else this.vConsole.hide()
+    },
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "short_name": "Hello world",
+    "name": "Hello world",
+    "icons": [
+      {
+        "src": "https://css.gg/border-bottom.svg",
+        "type": "image/svg+xml",
+        "sizes": "512x512"
+      }
+    ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "shortcuts": [
+      {
+        "name": "What is the latest news?",
+        "cli":{
+          "usage":  "helloworld <type> [options]",
+          "example": "helloworld news",
+          "args":{
+            "--latest": {type:"string"}
+          }
+        },
+        "short_name": "Today",
+        "description": "View weather information for today",
+        "url": "/today?source=pwa",
+        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "Hello world information",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Helloworld application 
+
+This is a help file which describes the application.
+It will be rendered thru troika text, and will contain
+headers based on non-punctualized lines separated by linebreaks,
+in above's case "\nHelloworld application\n" will qualify as header.
+    `
+  }
+
+});
+
--- a/com/cast.js
+++ b/com/cast.js
@ -4,8 +4,11 @@ AFRAME.registerComponent('cast', {
  },

  requires:     {
-    dom:      "com/dom.js",
-    window:   "com/window.js",
+    dom:         "./com/dom.js",                                                  // interpret .dom object
+    xd:          "./com/xd.js",                                                   // allow switching between 2D/3D 
+    html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
+    winboxjs:    "https://unpkg.com/winbox@0.2.82/dist/winbox.bundle.min.js",     // deadsimple windows: https://nextapps-de.github.io/winbox
+    winboxcss:   "https://unpkg.com/winbox@0.2.82/dist/css/winbox.min.css",       // 
  },

  dom: {
@ -20,7 +23,7 @@ AFRAME.registerComponent('cast', {

  init: function () { },

-  etInstallables: function(){
+  getInstallables: function(){
    const installed   = document.querySelector('[launcher]').components.launcher.system.getLaunchables() 
    return this.data.comps.map( (c) => {
      return installed[c] ? null : c
@ -34,54 +37,77 @@ AFRAME.registerComponent('cast', {
      if( this.el.sceneEl.renderer.xr.isPresenting ){
        this.el.sceneEl.exitVR() // *FIXME* we need a gui 
      }
-      this.el.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
-      // instance this component
-      this.el.setAttribute("dom","")
-    },
-
-    DOMready: function(){
-      this.setupCast();
-      this.el.setAttribute("html-as-texture-in-xr", `domid: #${this.el.uid}; faceuser: true`)
-    },
-
+      const el = document.querySelector('body');
+      const cropTarget = await CropTarget.fromElement(el);
+      const stream = await navigator.mediaDevices.getDisplayMedia();
+      const [track] = stream.getVideoTracks();
+      this.track = track
+      this.stream = stream
+      this.createWindow()
+    }
  },

-  setupCast: async function(){
+  createWindow: async function(){
    let s = await AFRAME.utils.require(this.requires)

-    const video = this.el.dom.querySelector('video')
+    // instance this component
+    const instance = this.el.cloneNode(false)
+    this.el.sceneEl.appendChild( instance )
+    instance.setAttribute("dom",      "")
+    instance.setAttribute("xd",       "")  // allows flipping between DOM/WebGL when toggling XD-button
+    instance.setAttribute("visible",  AFRAME.utils.XD() == '3D' ? 'true' : 'false' )
+    instance.setAttribute("position", AFRAME.utils.XD.getPositionInFrontOfCamera(0.5) )
+    instance.setAttribute("grabbable","")
+    instance.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
+    instance.track = this.track
+    instance.stream = this.stream 

-    video.addEventListener( "loadedmetadata", () => {
+    const setupWindow = () => {
+      instance.dom.style.display = 'none'

-      let width  = Math.round(window.innerWidth*0.4) 
-      let factor = width / video.videoWidth
-      let height = Math.round( video.videoHeight * factor)
+      const video = instance.dom.querySelector('video')
+      video.addEventListener( "loadedmetadata", function () {
+        let width  = Math.round(window.innerWidth*0.4) 
+        let factor = width / this.videoWidth
+        let height = Math.round(this.videoHeight * factor)
+        new WinBox("Casting Tab",{ 
+          width, 
+          height,
+          x:"center",
+          y:"center",
+          id:  instance.uid, // important hint for html-mesh  
+          root: document.querySelector("#overlay"),
+          mount: instance.dom,
+          onclose: () => { instance.dom.style.display = 'none'; return false; },
+          oncreate: () => {

-      const createVideoTexture = () => {
-        const texture = new THREE.VideoTexture( video );
-        texture.colorSpace = THREE.SRGBColorSpace;
-        const geometry = new THREE.PlaneGeometry( 16, 9 );
-        geometry.scale( 0.2, 0.2, 0.2 );
-        const material = new THREE.MeshBasicMaterial( { map: texture } );
-        const mesh = new THREE.Mesh( geometry, material );
-        mesh.lookAt( AFRAME.scenes[0].camera.position );
-        this.el.object3D.add(mesh)
-      }
+  //          instance.setAttribute("html",`html:#${instance.uid}; cursor:#cursor`)
+          }
+        });
+        instance.dom.style.display = '' // show

-      createVideoTexture.apply(this)
-      //this.el.setAttribute("window", `title: casting tab; uid: ${this.el.uid}; attach: #overlay; dom: #${this.el.dom.id}; width:${width}; height: ${height}`)
-    })
+        // hint grabbable's obb-collider to track the window-object 
+        instance.components['obb-collider'].data.trackedObject3D = 'components.html.el.object3D.children.0'
+        instance.components['obb-collider'].update() 
+      })
+      video.srcObject = instance.stream 
+      video.play()

-    const el = document.querySelector('body');
-    const cropTarget = await CropTarget.fromElement(el);
-    const stream = await navigator.mediaDevices.getDisplayMedia();
-    const [track] = stream.getVideoTracks();
-    this.track = track
-    this.stream = stream
-
-    video.srcObject = this.stream 
-    video.play()
+      this.createVideoTexture.apply(instance)
+    }
+    setTimeout( () => setupWindow(), 10 ) // give new components time to init
+  },

+  createVideoTexture: function(){
+    console.dir(this)
+    const texture = new THREE.VideoTexture( video );
+    texture.colorSpace = THREE.SRGBColorSpace;
+    const geometry = new THREE.PlaneGeometry( 16, 9 );
+    geometry.scale( 0.2, 0.2, 0.2 );
+    const material = new THREE.MeshBasicMaterial( { map: texture } );
+    const mesh = new THREE.Mesh( geometry, material );
+    mesh.lookAt( this.sceneEl.camera.position );
+    this.object3D.add(mesh)
  },

  manifest: { // HTML5 manifest to identify app to xrsh
@ -90,7 +116,6 @@ AFRAME.registerComponent('cast', {
    "icons": [
      {
        "src": "https://css.gg/cast.svg",
-        "src": "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNMjAgNkg0VjhIMlY2QzIgNC44OTU0MyAyLjg5NTQzIDQgNCA0SDIwQzIxLjEwNDYgNCAyMiA0Ljg5NTQzIDIyIDZWMThDMjIgMTkuMTA0NiAyMS4xMDQ2IDIwIDIwIDIwSDE1VjE4SDIwVjZaIgogICAgZmlsbD0iY3VycmVudENvbG9yIgogIC8+CiAgPHBhdGgKICAgIGQ9Ik0yIDEzQzUuODY1OTkgMTMgOSAxNi4xMzQgOSAyMEg3QzcgMTcuMjM4NiA0Ljc2MTQyIDE1IDIgMTVWMTNaIgogICAgZmlsbD0iY3VycmVudENvbG9yIgogIC8+CiAgPHBhdGggZD0iTTIgMTdDMy42NTY4NSAxNyA1IDE4LjM0MzEgNSAyMEgyVjE3WiIgZmlsbD0iY3VycmVudENvbG9yIiAvPgogIDxwYXRoCiAgICBkPSJNMiA5QzguMDc1MTMgOSAxMyAxMy45MjQ5IDEzIDIwSDExQzExIDE1LjAyOTQgNi45NzA1NiAxMSAyIDExVjlaIgogICAgZmlsbD0iY3VycmVudENvbG9yIgogIC8+Cjwvc3ZnPg==",
        "type": "image/svg+xml",
        "sizes": "512x512"
      }
--- a/com/control/gaze-touch-to-click.js
+++ b/com/control/gaze-touch-to-click.js
--- a/com/control/no-look-controls-in-xr.js
+++ b/com/control/no-look-controls-in-xr.js
--- a/com/control/patch-look-controls.js
+++ b/com/control/patch-look-controls.js
--- a/com/control/pinch-to-teleport.js
+++ b/com/control/pinch-to-teleport.js
@ -17,9 +17,7 @@ window.AFRAME.registerComponent('pinch-to-teleport', {
      pos.x += direction.x 
      pos.z += direction.z
      // set the new position
-      if( !this.data.rig ){
-        this.data.rig.setAttribute("position", pos);
-      }
+      this.data.rig.setAttribute("position", pos);
      // !!! NOTE - it would be more efficient to do the
      // position change on the players THREE.Object:
      // `player.object3D.position.add(direction)`
--- a/com/control/pressable.js
+++ b/com/control/pressable.js
@ -0,0 +1,72 @@
+// this makes WebXR hand controls able to click things (by touching it)
+
+AFRAME.registerComponent('pressable', {
+    schema: {
+        pressDistance: {
+            default: 0.01
+        }
+    },
+    init: function() {
+        this.worldPosition = new THREE.Vector3();
+        this.fingerWorldPosition = new THREE.Vector3();
+        this.raycaster = new THREE.Raycaster()
+        this.handEls = document.querySelectorAll('[hand-tracking-controls]');
+        this.pressed = false;
+        this.distance = -1
+        // we throttle by distance, to support scenes with loads of clickable objects (far away)
+        this.tick = this.throttleByDistance( () => this.detectPress() )
+    },
+    throttleByDistance: function(f){
+        return function(){
+           if( this.distance < 0 ) return f() // first call
+           if( !f.tid ){
+             let x = this.distance
+             let y = x*(x*0.05)*1000 // parabolic curve
+             f.tid = setTimeout( function(){
+               f.tid = null
+               f()
+             }, y )
+           }
+        }
+    },
+    detectPress: function(){
+        var handEls = this.handEls;
+        var handEl;
+        let minDistance = 5
+
+        // compensate for xrf-get AFRAME component (which references non-reparented buffergeometries from the 3D model)
+        let object3D = this.el.object3D.child || this.el.object3D
+
+        for (var i = 0; i < handEls.length; i++) {
+            handEl = handEls[i];
+            let indexTipPosition  = handEl.components['hand-tracking-controls'].indexTipPosition
+            // Apply the relative position to the parent's world position 
+            handEl.object3D.updateMatrixWorld();
+            handEl.object3D.getWorldPosition( this.fingerWorldPosition )
+            this.fingerWorldPosition.add( indexTipPosition )
+
+            this.raycaster.far = this.data.pressDistance
+            // Create a direction vector (doesnt matter because it is supershort for 'touch' purposes)
+            const direction = new THREE.Vector3(1.0,0,0);
+            this.raycaster.set(this.fingerWorldPosition, direction)
+            intersects = this.raycaster.intersectObjects([object3D],true)
+
+            object3D.getWorldPosition(this.worldPosition)
+      
+            distance    = this.fingerWorldPosition.distanceTo(this.worldPosition)
+            minDistance = distance < minDistance ? distance : minDistance 
+
+            if (intersects.length ){
+              if( !this.pressed ){
+                this.el.emit('pressedstarted');
+                this.el.emit('click');
+                this.pressed = setTimeout( () => {
+                  this.el.emit('pressedended');
+                  this.pressed = null 
+                },300)
+              }
+            }
+        }
+        this.distance = minDistance
+    }
+});
--- a/com/control/wearable.js
+++ b/com/control/wearable.js
@ -0,0 +1,26 @@
+window.AFRAME.registerComponent('xrf-wear', {
+  schema:{
+    el: {type:"selector"}, 
+    position: {type:"vec3"}, 
+    rotation: {type:"vec3"} 
+  }, 
+  init: function(){
+    $('a-scene').addEventListener('enter-vr', (e) => this.wear(e) )
+    $('a-scene').addEventListener('exit-vr',  (e) => this.unwear(e) )
+  }, 
+  wear: function(){
+    if( !this.wearable ){
+      let d = this.data
+      this.wearable = new THREE.Group()
+      this.el.object3D.children.map( (c) => this.wearable.add(c) )
+      this.wearable.position.set( d.position.x,  d.position.y,  d.position.z)
+      this.wearable.rotation.set( d.rotation.x,  d.rotation.y,  d.rotation.z)
+    }
+    this.data.el.object3D.add(this.wearable)
+  }, 
+  unwear: function(){
+    this.data.el.remove(this.wearable)
+    this.wearable.children.map( (c) => this.el.object3D.add(c) )
+    delete this.wearable
+  }
+})
--- a/com/controlattach.js
+++ b/com/controlattach.js
@ -1,85 +0,0 @@
-/*
- *Usage:
- *        <a-entity  controlattach="el: #leftHand; class: foo"></a-entity>
- *        <a-entity id="leftHand">
- *          <a-entity class="foo" position="0 0 0" rotation="0 0 0" scale="0 0 0"></a-entity>
- *        <a-entity>
- *
- * NOTE: you can hint different position/rotation-offsets by adding controller-specific entities to the target:
- *
- *        <a-entity id="leftHand">
- *          <a-entity class="foo" position="0 0 0" rotation="0 0 0" scale="0 0 0"></a-entity>
- *          <a-entity class="foo hand-tracking-controls" position="0 0 0" rotation="0 0 0" scale="0 0 0"></a-entity>
- *        <a-entity>
- *
- * The controllernames are hinted by the 'controllermodelready' event:
- *
- *  'hand-tracking-controls',
- *  'meta-touch-controls',
- *  'valve-index-controls',
- *  'logitech-mx-ink-controls',
- *  'windows-motion-controls',
- *  'hp-mixed-reality-controls',
- *  'generic-tracked-controller-controls',
- *  'pico-controls',
- *  (and more in the future)
- */
-
-AFRAME.registerComponent('controlattach', {
-  schema:{
-    el: {type:"selector"},
-    class: {type:"string"}
-  }, 
-  init: function(){
-    if( !this.data.el ) return console.warn(`controlattach.js: cannot find ${this.data.el}`)
-    this.controllers = {}
-    this.remember()
-    this.data.el.addEventListener('controllermodelready',  this.bindPlaceHolders.bind(this,["controllermodelready"]) )
-    this.data.el.addEventListener('controllerconnected',   this.bindPlaceHolders.bind(this,["controllerconnected"] ) )
-  },
-
-  bindPlaceHolders: function(type,e){
-    let controllerName = e.detail.name
-    let selector       =  `.${this.data.class}.${controllerName}`
-    let placeholder    = this.data.el.querySelector(selector)
-    if( !placeholder ){
-      placeholder = this.data.el.querySelector(`.${this.data.class}`)
-      console.warn(`controlattach.js: '${selector}' not found, fallback to default`)
-    }
-    if( !placeholder ) return console.warn("controlattach.js: could not find placeholder to attach to")
-    this.attachPlaceHolder(type,e,placeholder, controllerName)
-  },
-
-  attachPlaceHolder: function(type, el, placeholder, controllerName){
-    this.el.object3DMap = {} // unsync THREE <-> AFRAME entity
-    // these are handled by the placeholder entity
-    this.obj.position.set(0,0,0);
-    this.obj.rotation.set(0,0,0);
-    this.obj.scale.set(1,1,1);
-
-    if( controllerName != 'hand-tracking-controls' ){
-      // re-add for controller-models which don't re-add children ('meta-touch-controls' e.g.)
-      if( this.data.el.getObject3D("mesh") ){
-        this.data.el.getObject3D("mesh").add(placeholder.object3D)
-      }
-    }
-    placeholder.object3D.add( this.obj )
-  },
-
-  detach: function(){
-    this.el.setObject3D( this.obj.uuid, this.obj )
-    this.el.object3D.position.copy( this.position )
-    this.el.object3D.rotation.copy( this.rotation )
-    this.el.object3D.scale.copy( this.scale )
-  },
-
-  remember: function(){
-    this.obj      = this.el.object3D
-    this.position = this.el.object3D.position.clone()
-    this.rotation = this.el.object3D.rotation.clone()
-    this.scale    = this.el.object3D.scale.clone()
-    this.parent   = this.el.object3D.parent
-  }
-
-})
-
--- a/com/data2event.js
+++ b/com/data2event.js
@ -1,5 +1,5 @@
-/**
- * ## [data_events](com/data_events.js)
+/*
+ * ## data_events
 *
 * allows components to react to data changes 
 *
@ -18,33 +18,29 @@
 *
 */

-if( !AFRAME.components.data2event ){
+AFRAME.registerComponent('data2event',{

-  AFRAME.registerComponent('data2event',{
-
-    init: function(){
-      setTimeout( () => {
-        for( let i in this.el.components ){
-          let com = this.el.components[i]
-          if( typeof com.data == 'object' ){
-            com.data = this.reactify( this.el, com.data)
-          }
+  init: function(){
+    setTimeout( () => {
+      for( let i in this.el.components ){
+        let com = this.el.components[i]
+        if( typeof com.data == 'object' ){
+          com.data = this.reactify( this.el, com.data)
        }
-      },50)
-    },
+      }
+    },50)
+  },

-    reactify: function(el,data){
-      return new Proxy(data, {
-        get(me,k,v)  { 
-          return me[k]
-        },
-        set(me,k,v){
-          me[k] = v
-          el.emit(k,{el,k,v})
-        }
-      })
-    },
+  reactify: function(el,data){
+    return new Proxy(data, {
+      get(me,k,v)  { 
+        return me[k]
+      },
+      set(me,k,v){
+        me[k] = v
+        el.emit(k,{el,k,v})
+      }
+    })
+  },

-  })
-
-}
+})
--- a/com/dom.js
+++ b/com/dom.js
@ -1,5 +1,5 @@
 /*
- * ## [dom](com/dom.js)
+ * ## dom
 *
 * instances reactive DOM component from AFRAME component's `dom` metadata 
 *
@ -32,106 +32,105 @@
 * | `DOMready`   | self   | fired when dom component (`this.dom`) is created                                                   |
 */

-if( !AFRAME.components.dom ){
+AFRAME.registerComponent('dom',{

-  AFRAME.registerComponent('dom',{
-
-    init: function(){
-      Object.values(this.el.components)
-      .map( (c) => {
-        if( c.dom && c.attrName != "dom"){ 
-          this.dom = c.dom
-          this.com = c
-        }
-      })
-      if( !this.dom || !this.com){
-        return console.warn('dom.js did not find a .dom object inside component')
+  init: function(){
+    Object.values(this.el.components)
+    .map( (c) => {
+      if( c.dom && c.attrName != "dom"){ 
+        this.dom = c.dom
+        this.com = c
      }
+    })
+    if( !this.dom || !this.com){
+      return console.warn('dom.js did not find a .dom object inside component')
+    }

-      this
-      .ensureOverlay()
-      .createReactiveDOMElement()
-      .assignUniqueID()
-      .addCSS()
-      .scaleDOMvsXR()
-      .triggerKeyboardForInputs()
+    this
+    .ensureOverlay()
+    .addCSS()
+    .createReactiveDOMElement()
+    .assignUniqueID()
+    .scaleDOMvsXR()
+    .triggerKeyboardForInputs()
+    .stubRequestAnimationFrame()

-      document.querySelector('#overlay').appendChild(this.el.dom)
-      this.el.emit('DOMready',{el: this.el.dom})
-    },
+    document.querySelector('#overlay').appendChild(this.el.dom)
+    this.el.emit('DOMready',{el: this.el.dom})
+  },

-    ensureOverlay: function(){
-      // ensure overlay
-      let overlay = document.querySelector('#overlay')
-      if( !overlay ){
-        overlay = document.createElement('div')
-        overlay.id = "overlay"
-        overlay.setAttribute('style','position:fixed;top:0px;left:0px;right:0px;bottom:0px;pointer-events:none')
-        document.body.appendChild(overlay)
-        document.head.innerHTML += `
-          <style type="text/css">#overlay * { pointer-events:all }</style>
-        `
-        //  sceneEl.setAttribute("webxr","overlayElement:#overlay")
+  ensureOverlay: function(){
+    // ensure overlay
+    let overlay = document.querySelector('#overlay')
+    if( !overlay ){
+      overlay = document.createElement('div')
+      overlay.id = "overlay"
+      overlay.setAttribute('style','position:fixed;top:0px;left:0px;right:0px;bottom:0px')
+      document.body.appendChild(overlay)
+      //  sceneEl.setAttribute("webxr","overlayElement:#overlay")
+    }
+    return this
+  },
+
+  reactify: function(el,data){
+    return new Proxy(data, {
+      get(me,k,v)  { 
+        return me[k]
+      },
+      set(me,k,v){
+        me[k] = v
+        el.emit(k,{el,k,v})
      }
-      return this
-    },
+    })
+  },

-    reactify: function(el,data){
-      return new Proxy(data, {
-        get(me,k,v)  { 
-          return me[k]
-        },
-        set(me,k,v){
-          me[k] = v
-          el.emit(k,{el,k,v})
-        }
-      })
-    },
+  // creates el.dom  (the 2D DOM object)
+  createReactiveDOMElement: function(){
+    this.el.dom = document.createElement('div')
+    this.el.dom.innerHTML = this.dom.html(this)
+    this.el.dom.className = this.dom.attrName 
+    this.com.data = this.reactify( this.el, this.com.data )
+    if( this.dom.events ) this.dom.events.map( (e) => this.el.dom.addEventListener(e, (ev) => this.el.emit(e,ev) ) )
+    this.el.dom = this.el.dom.children[0]
+    return this
+  },

-    // creates el.dom  (the 2D DOM object)
-    createReactiveDOMElement: function(){
-      this.el.dom = document.createElement('div')
-      this.el.dom.innerHTML = this.dom.html(this)
-      this.el.dom.className = this.dom.attrName 
-      this.com.data = this.reactify( this.el, this.com.data )
-      this.el.dom = this.el.dom.children[0]
-      if( this.dom.events ){ 
-        this.dom.events.map( (e) => {
-          this.el.dom.addEventListener(e, (ev) => this.el.emit(e,ev)  )
-        })
+  assignUniqueID: function(){
+    // assign unique app id so it's easy to reference (by html-mesh component e.g.)
+    if( !this.el.uid ) this.el.uid = this.el.dom.id = '_'+String(Math.random()).substr(10)
+    return this
+  },
+
+  addCSS: function(){
+    if( this.dom.css && !document.head.querySelector(`style#${this.com.attrName}`) ){
+      document.head.innerHTML += `<style id="${this.com.attrName}">${this.dom.css(this)}</style>`
+    }
+    return this
+  },
+
+  scaleDOMvsXR: function(){
+    if( this.dom.scale ) this.el.setAttribute('scale',`${this.dom.scale} ${this.dom.scale} ${this.dom.scale}`)
+    return this
+  },
+
+  triggerKeyboardForInputs: function(){
+    // https://developer.oculus.com/documentation/web/webxr-keyboard ;
+    [...this.el.dom.querySelectorAll('[type=text]')].map( (input) => {
+      let triggerKeyboard = function(){
+        this.focus()
+        console.log("focus")
      }
-      return this
-    },
+      input.addEventListener('click', triggerKeyboard )
+    })
+    return this
+  },

-    assignUniqueID: function(){
-      // assign unique app id so it's easy to reference (by html-mesh component e.g.)
-      if( !this.el.uid ) this.el.uid = this.el.dom.id = '_'+String(Math.random()).substr(10)
-      return this
-    },
+  stubRequestAnimationFrame: function(){
+    // stub, because WebXR with overrule this (it will not call the callback as expected in immersive mode)
+    const requestAnimationFrame = window.requestAnimationFrame
+    window.requestAnimationFrame = (cb) => {
+      setTimeout( cb, 25 )
+    }
+  }

-    addCSS: function(){
-      if( this.dom.css && !document.head.querySelector(`style#${this.com.attrName}`) ){
-        document.head.innerHTML += `<style id="${this.com.attrName}">${this.dom.css(this)}</style>`
-      }
-      return this
-    },
-
-    scaleDOMvsXR: function(){
-      if( this.dom.scale ) this.el.setAttribute('scale',`${this.dom.scale} ${this.dom.scale} ${this.dom.scale}`)
-      return this
-    },
-
-    triggerKeyboardForInputs: function(){
-      // https://developer.oculus.com/documentation/web/webxr-keyboard ;
-      [...this.el.dom.querySelectorAll('[type=text]')].map( (input) => {
-        let triggerKeyboard = function(){
-          this.focus()
-          console.log("focus")
-        }
-        input.addEventListener('click', triggerKeyboard )
-      })
-      return this
-    },
-
-  })
-}
+})
--- a/com/example/helloworld-html.js
+++ b/com/example/helloworld-html.js
@ -0,0 +1,107 @@
+AFRAME.registerComponent('helloworld-html', {
+  schema: { 
+    foo: { type:"string"}
+  },
+
+  init: function () {  
+
+    this.el.addEventListener('ready', () => this.el.dom.style.display = 'none' )
+  },
+
+  requires:{
+    html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
+  },
+
+  dom: {
+    scale:   1,
+    events:  ['click'],
+    html:    (me) => `<div>
+                        <div class="pad"> helloworld-html: ${me.data.foo} <b>${me.data.myvalue}</b></span>
+                      </div>`,
+
+    css:     (me) => `.helloworld-html {
+                color: var(--xrsh-light-gray); /* see index.css */
+              }`,
+  },
+
+  events:{
+
+    // combined AFRAME+DOM reactive events
+    keydown: function(e){ }, // 
+    click:    function(e){ 
+      console.dir(e)
+    }, // 
+
+    // reactive events for this.data updates 
+    myvalue: function(e){ this.el.dom.querySelector('b').innerText = this.data.myvalue },
+
+
+    ready: function( ){ 
+      this.el.dom.style.display = 'none'
+      console.log("this.el.dom has been added to DOM")
+      this.el.dom.children[0].id = this.el.uid  // important hint for html-mesh
+      this.data.myvalue = 1
+      setInterval( () => this.data.myvalue++, 100 )
+    },
+
+    launcher:  function(){ 
+      this.el.dom.style.display = ''
+      console.log("launcher") 
+    },
+
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "short_name": "Hello world",
+    "name": "Hello world",
+    "icons": [
+      {
+        "src": "https://css.gg/browser.svg",
+        "src": "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNCA4QzQuNTUyMjggOCA1IDcuNTUyMjggNSA3QzUgNi40NDc3MiA0LjU1MjI4IDYgNCA2QzMuNDQ3NzIgNiAzIDYuNDQ3NzIgMyA3QzMgNy41NTIyOCAzLjQ0NzcyIDggNCA4WiIKICAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAvPgogIDxwYXRoCiAgICBkPSJNOCA3QzggNy41NTIyOCA3LjU1MjI4IDggNyA4QzYuNDQ3NzIgOCA2IDcuNTUyMjggNiA3QzYgNi40NDc3MiA2LjQ0NzcyIDYgNyA2QzcuNTUyMjggNiA4IDYuNDQ3NzIgOCA3WiIKICAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAvPgogIDxwYXRoCiAgICBkPSJNMTAgOEMxMC41NTIzIDggMTEgNy41NTIyOCAxMSA3QzExIDYuNDQ3NzIgMTAuNTUyMyA2IDEwIDZDOS40NDc3MSA2IDkgNi40NDc3MiA5IDdDOSA3LjU1MjI4IDkuNDQ3NzEgOCAxMCA4WiIKICAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAvPgogIDxwYXRoCiAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNMyAzQzEuMzQzMTUgMyAwIDQuMzQzMTUgMCA2VjE4QzAgMTkuNjU2OSAxLjM0MzE1IDIxIDMgMjFIMjFDMjIuNjU2OSAyMSAyNCAxOS42NTY5IDI0IDE4VjZDMjQgNC4zNDMxNSAyMi42NTY5IDMgMjEgM0gzWk0yMSA1SDNDMi40NDc3MiA1IDIgNS40NDc3MiAyIDZWOUgyMlY2QzIyIDUuNDQ3NzIgMjEuNTUyMyA1IDIxIDVaTTIgMThWMTFIMjJWMThDMjIgMTguNTUyMyAyMS41NTIzIDE5IDIxIDE5SDNDMi40NDc3MiAxOSAyIDE4LjU1MjMgMiAxOFoiCiAgICBmaWxsPSJjdXJyZW50Q29sb3IiCiAgLz4KPC9zdmc+",
+        "type": "image/svg+xml",
+        "sizes": "512x512"
+      }
+    ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "shortcuts": [
+      {
+        "name": "What is the latest news?",
+        "cli":{
+          "usage":  "helloworld <type> [options]",
+          "example": "helloworld news",
+          "args":{
+            "--latest": {type:"string"}
+          }
+        },
+        "short_name": "Today",
+        "description": "View weather information for today",
+        "url": "/today?source=pwa",
+        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "Hello world information",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Helloworld application 
+
+This is a help file which describes the application.
+It will be rendered thru troika text, and will contain
+headers based on non-punctualized lines separated by linebreaks,
+in above's case "\nHelloworld application\n" will qualify as header.
+    `
+  }
+
+});
+
--- a/com/example/helloworld-htmlform.js
+++ b/com/example/helloworld-htmlform.js
@ -1,113 +1,102 @@
-AFRAME.registerComponent('helloworld-window', {
+AFRAME.registerComponent('helloworld-htmlform', {
  schema: { 
    foo: { type:"string"}
  },

-  init: function () {
-
-  },
+  init: function () {},

  requires:{
-    window:   "com/window.js",
-    reactive: "com/data2event.js"
+    html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
+    winboxjs:    "https://unpkg.com/winbox@0.2.82/dist/winbox.bundle.min.js",     // deadsimple windows: https://nextapps-de.github.io/winbox
+    winboxcss:   "https://unpkg.com/winbox@0.2.82/dist/css/winbox.min.css",       // deadsimple windows: https://nextapps-de.github.io/winbox
  },

  dom: {
-    scale:   0.66,
+    scale:   1,
    events:  ['click','input'],
    html:    (me) => `<div class="htmlform">
                        <fieldset>
-                          <legend>Welcome to XR Shell</legend>
-                          A free offline-first morphable<br>
-                          environment which provides <br>
-                          <span id="myvalue"></span>&nbsp; XR-friendly shells.<br>
-                          <ol>
-                            <li>check the <a href="/" target="_blank">website</a></li> 
-                            <li>check the <a href="https://forgejo.isvery.ninja/xrsh/xrsh-buildroot/src/branch/main/buildroot-v86/board/v86/rootfs_overlay/root/manual.md" target="_blank">manual</a></li> 
-                          </ol>
+                          <legend>Colour</legend>
+                          <input type="radio" id="color-red" name="color" value="red" checked><label for="color-red"> Red</label><br>
+                          <input type="radio" id="color-blue" name="color" value="blue"><label for="color-blue"> Blue</label><br>
                        </fieldset>
-                        <br>
                        <fieldset>
-                          <legend>Icons</legend>
-                          <input type="radio" id="small" name="icons" value="0.8" checked style=""><label for="small" style="margin-right:15px;">Small</label>
-                          <input type="radio" id="big"   name="icons" value="1.5"><label for="big">Big</label><br>
+                          <legend>Material:</legend>
+                          <input id="material-wireframe" type="checkbox" name="wireframe"><label for="material-wireframe"> Wireframe</label><br>
                        </fieldset>
-                        <!--
                        <fieldset>
                          <legend>Size</legend>
                          <input type="range" min="0.1" max="2" value="1" step="0.01" id="myRange" style="background-color: transparent;">
                        </fieldset>
                        <button>hello <span id="myvalue"></span></button>
-                        -->
                      </div>`,

-    css:     (me) => `.htmlform { padding:11px; }
-                      `
+    css:     (me) => `.htmlform { padding:11px; }`

  },

  events:{

    // component events
-    window:     function( ){ console.log("window component mounted") },
+    html:     function( ){ console.log("html-mesh requirement mounted") },

    // combined AFRAME+DOM reactive events
-    click: function(e){ console.dir(e) }, // 
+    click: function(e){ }, // 
    input: function(e){
      if( !e.detail.target                 ) return
      if(  e.detail.target.id == 'myRange' ) this.data.myvalue = e.detail.target.value // reactive demonstration
-      if(  e.detail.target.name == 'cmenu' ) document.querySelector(".iconmenu").style.display = e.detail.target.value == 'on' ? '' : 'none';
-      if(  e.detail.target.name == 'icons' ){ 
-        document.querySelector('[launcher]').object3D.getObjectByProperty("HTMLMesh").scale.setScalar( e.detail.target.value )
-        document.querySelector('.iconmenu').style.transform = e.detail.target.value == '0.8' ? 'scale(1)' : 'scale(1.33)' 
-      }
-      console.dir(e.detail)
    },

    // reactive events for this.data updates 
    myvalue: function(e){ this.el.dom.querySelector('#myvalue').innerText = this.data.myvalue },

    launcher: async function(){
-      if( !this.el.getAttribute("dom") ){
-        let s = await AFRAME.utils.require(this.requires)
+      let s = await AFRAME.utils.require(this.requires)

-        // instance this component
-        this.el.setAttribute("dom", "")
-        this.el.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
-      }else{
-        // toggle visibility
-        this.el.winbox[ this.el.winbox.min ? 'restore' : 'minimize' ]()
+      // instance this component
+      const instance = this.el.cloneNode(false)
+      this.el.sceneEl.appendChild( instance )
+      instance.setAttribute("dom",      "")
+      instance.setAttribute("xd",       "")  // allows flipping between DOM/WebGL when toggling XD-button
+      instance.setAttribute("visible",  AFRAME.utils.XD() == '3D' ? 'true' : 'false' )
+      instance.setAttribute("position", AFRAME.utils.XD.getPositionInFrontOfCamera(0.5) )
+      instance.setAttribute("grabbable","")
+      instance.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
+
+      const setupWindow = () => {
+        const com = instance.components['helloworld-htmlform']
+        instance.dom.style.display = 'none'
+        new WinBox("Hello World",{ 
+          width: 250,
+          height: 340,
+          x:"center",
+          y:"center",
+          id:  instance.uid, // important hint for html-mesh  
+          root: document.querySelector("#overlay"),
+          mount: instance.dom,
+          onclose: () => { instance.dom.style.display = 'none'; return false; },
+          oncreate: () => instance.setAttribute("html",`html:#${instance.uid}; cursor:#cursor`)
+        });
+        instance.dom.style.display = AFRAME.utils.XD() == '3D' ? 'none' : '' // show/hide
+
+        // hint grabbable's obb-collider to track the window-object 
+        instance.components['obb-collider'].data.trackedObject3D = 'components.html.el.object3D.children.0'
+        instance.components['obb-collider'].update() 
+
+        // data2event demo
+        instance.setAttribute("data2event","")
+        com.data.myvalue = 1
+        com.data.foo     = `instance ${instance.uid}: `
+        setInterval( () => com.data.myvalue++, 500 )
      }
+
+      setTimeout( () => setupWindow(), 10 ) // give new components time to init
    },

-    DOMready: function(){
-      this.el.setAttribute("window", `title: XRSH; uid: ${this.el.uid}; attach: #overlay; dom: #${this.el.dom.id}; class: no-min, no-max; width:250; height: 360`)
-
-      // data2event demo
-      this.el.setAttribute("data2event","")
-      this.data.myvalue = 1001
-      this.data.foo     = `this.el ${this.el.uid}: `
-      setInterval( () => this.data.myvalue++, 500 )
-
-      // if you want your launch-icon to stick around after 
-      // closing the window, then register it manually 
-      window.launcher.register({
-        component: "helloworld-window",
-        ...this.manifest,
-        icon: this.manifest.icons[0].src,
-        cb: () => {
-          const el = document.createElement("a-entity")
-          el.setAttribute("helloworld-window","")
-          el.setAttribute("pressable","")
-          el.setAttribute("position","0 1.6 0")
-          AFRAME.scenes[0].appendChild(el)
-          setTimeout( () => el.emit('launcher',null,false), 100 )
-        }
-      })
-    },
-
-    "window.oncreate": function(){
-      this.el.setAttribute("html-as-texture-in-xr", `domid: .winbox#${this.el.uid}; faceuser: true`)
+    ready: function( ){ 
+      this.el.dom.style.display = 'none'
+      console.log("this.el.dom has been added to DOM")
+      this.data.myvalue = 1
    }

  },
--- a/com/example/helloworld-iframe.js
+++ b/com/example/helloworld-iframe.js
@ -0,0 +1,154 @@
+AFRAME.registerComponent('helloworld-iframe', {
+  schema: { 
+    url: { type:"string"}
+  },
+
+  init: function(){},
+
+  requires:{
+    html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
+    winboxjs:    "https://unpkg.com/winbox@0.2.82/dist/winbox.bundle.min.js",     // deadsimple windows: https://nextapps-de.github.io/winbox
+    winboxcss:   "https://unpkg.com/winbox@0.2.82/dist/css/winbox.min.css",       // 
+  },
+
+  dom: {
+    scale:   3,
+    events:  ['click','keydown'],
+    html:    (me) => `<div class="relative">
+                        <span id="warning">
+                          <b>Unfortunately,</b><br><br>
+                          The browser does not allow IFRAME rendering<br>
+                          in immersive mode (for security reasons).<br><br>
+                        </span>  
+                        <iframe src=""></iframe>
+                      </div>`,
+
+    css:     (me) => `
+      .XR #overlay .winbox.iframe{ 
+        visibility: visible; 
+        position:relative;
+      } /* don't hide in XR mode */
+      .winbox.iframe > .wb-body  { background:#FFF !important; 
+                                   overflow-y: hidden;
+                                   overflow-x: hidden;
+                                 }
+      .winbox.iframe iframe      { z-index:10;    }
+      .winbox.iframe #warning    { position:absolute; z-index:9; top:100px; left:20px; width:100%; height:50px; color:black; display:none; }
+    `
+  },
+
+  events:{
+
+    // combined AFRAME+DOM reactive events
+    click:   function(e){ }, // 
+    keydown: function(e){ }, // 
+
+    // reactive updates (data2event.js)
+    url: function(e){ 
+      this.el.dom.querySelector('iframe').src = this.data.url
+      console.dir(this.el.dom.querySelector('iframe'))
+    },
+
+    launcher: async function(){
+      let URL = this.data.url || prompt('enter URL to display','https://fabien.benetou.fr/Wiki/Wiki')
+      if( !URL ) return
+
+      this.createWindow()
+    },
+
+    createWindow: function(){
+      let s = await AFRAME.utils.require(this.requires)
+
+      // instance this component
+      const instance = this.el.cloneNode(false)
+      this.el.sceneEl.appendChild( instance )
+      instance.setAttribute("dom",       "")
+      instance.setAttribute("data2event","")
+      instance.setAttribute("visible",  AFRAME.utils.XD() == '3D' ? 'true' : 'false' )
+      instance.setAttribute("position", AFRAME.utils.XD.getPositionInFrontOfCamera(1.39) )
+      instance.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
+
+      this.el.sceneEl.addEventListener('3D', () => {
+        instance.dom.querySelector('#warning').style.display = 'block' // show warning
+      })
+
+      const setupWindow = () => {
+        const com = instance.components['helloworld-iframe']
+        instance.dom.style.display = 'none'
+        new WinBox( this.manifest.short_name+" "+URL,{ 
+          width: Math.round(window.innerWidth*0.6),
+          height: Math.round(window.innerHeight*0.6),
+          class:["iframe"],
+          x:"center",
+          y:"center",
+          id:  instance.uid, // important hint for html-mesh  
+          root: document.querySelector("#overlay"),
+          mount: instance.dom,
+          onclose: () => { instance.dom.style.display = 'none'; return false; },
+          oncreate: () => {
+            com.data.url = URL
+            instance.setAttribute("html",`html:#${instance.uid}; cursor:#cursor`)
+          }
+        });
+        instance.dom.style.display = ''
+      }
+
+      setTimeout( () => setupWindow(), 10 ) // give new components time to init
+    },
+
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "short_name": "Iframe",
+    "name": "Hello world IFRAME window",
+    "icons": [
+      {
+        "src": "https://css.gg/browse.svg",
+        "src": "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNCA4QzQuNTUyMjggOCA1IDcuNTUyMjggNSA3QzUgNi40NDc3MiA0LjU1MjI4IDYgNCA2QzMuNDQ3NzIgNiAzIDYuNDQ3NzIgMyA3QzMgNy41NTIyOCAzLjQ0NzcyIDggNCA4WiIKICAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAvPgogIDxwYXRoCiAgICBkPSJNOCA3QzggNy41NTIyOCA3LjU1MjI4IDggNyA4QzYuNDQ3NzIgOCA2IDcuNTUyMjggNiA3QzYgNi40NDc3MiA2LjQ0NzcyIDYgNyA2QzcuNTUyMjggNiA4IDYuNDQ3NzIgOCA3WiIKICAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAvPgogIDxwYXRoCiAgICBkPSJNMTAgOEMxMC41NTIzIDggMTEgNy41NTIyOCAxMSA3QzExIDYuNDQ3NzIgMTAuNTUyMyA2IDEwIDZDOS40NDc3MSA2IDkgNi40NDc3MiA5IDdDOSA3LjU1MjI4IDkuNDQ3NzEgOCAxMCA4WiIKICAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAvPgogIDxwYXRoCiAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNMyAzQzEuMzQzMTUgMyAwIDQuMzQzMTUgMCA2VjE4QzAgMTkuNjU2OSAxLjM0MzE1IDIxIDMgMjFIMjFDMjIuNjU2OSAyMSAyNCAxOS42NTY5IDI0IDE4VjZDMjQgNC4zNDMxNSAyMi42NTY5IDMgMjEgM0gzWk0yMSA1SDNDMi40NDc3MiA1IDIgNS40NDc3MiAyIDZWOUgyMlY2QzIyIDUuNDQ3NzIgMjEuNTUyMyA1IDIxIDVaTTIgMThWMTFIMjJWMThDMjIgMTguNTUyMyAyMS41NTIzIDE5IDIxIDE5SDNDMi40NDc3MiAxOSAyIDE4LjU1MjMgMiAxOFoiCiAgICBmaWxsPSJjdXJyZW50Q29sb3IiCiAgLz4KPC9zdmc+",
+        "type": "image/svg+xml",
+        "sizes": "512x512"
+      }
+    ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "shortcuts": [
+      {
+        "name": "What is the latest news?",
+        "cli":{
+          "usage":  "helloworld <type> [options]",
+          "example": "helloworld news",
+          "args":{
+            "--latest": {type:"string"}
+          }
+        },
+        "short_name": "Today",
+        "description": "View weather information for today",
+        "url": "/today?source=pwa",
+        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "Hello world information",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Helloworld application 
+
+This is a help file which describes the application.
+It will be rendered thru troika text, and will contain
+headers based on non-punctualized lines separated by linebreaks,
+in above's case "\nHelloworld application\n" will qualify as header.
+    `
+  }
+
+});
+
--- a/com/example/helloworld-window.js
+++ b/com/example/helloworld-window.js
@ -0,0 +1,136 @@
+AFRAME.registerComponent('helloworld-window', {
+  schema: { 
+    foo: { type:"string", "default":"foo"}
+  },
+
+  requires:     {
+    dom:         "./com/dom.js",                                                  // interpret .dom object
+    xd:          "./com/dom.js",                                                  // allow switching between 2D/3D 
+    html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
+    winboxjs:    "https://unpkg.com/winbox@0.2.82/dist/winbox.bundle.min.js",     // deadsimple windows: https://nextapps-de.github.io/winbox
+    winboxcss:   "https://unpkg.com/winbox@0.2.82/dist/css/winbox.min.css",       // 
+  },
+
+  init: function(){ },
+
+  dom: {
+    scale:   0.8,
+    events:  ['click','keydown'],
+    html:    (me) => `<div>
+                        <div class="pad"> <span>${me.data.foo}</span> <b>${me.data.myvalue}</b></span>
+                      </div>`,
+
+    css:    (me) =>  `.helloworld-window div.pad { padding:11px; }`
+  },
+
+  events:{
+
+    // combined AFRAME+DOM reactive events
+    click:   function(e){ }, // 
+    keydown: function(e){ }, // 
+
+    // reactive events for this.data updates (data2event.js)
+    myvalue: function(e){ this.el.dom.querySelector('b').innerText    = this.data.myvalue },
+    foo:     function(e){ this.el.dom.querySelector('span').innerText = this.data.foo },
+
+    launcher: async function(){
+      let s = await AFRAME.utils.require(this.requires)
+
+      // instance this component
+      const instance = this.el.cloneNode(false)
+      this.el.sceneEl.appendChild( instance )
+      instance.setAttribute("dom",      "")
+      instance.setAttribute("xd",       "")  // allows flipping between DOM/WebGL when toggling XD-button
+      instance.setAttribute("visible",  AFRAME.utils.XD() == '3D' ? 'true' : 'false' )
+      instance.setAttribute("position", AFRAME.utils.XD.getPositionInFrontOfCamera(0.5) )
+      instance.setAttribute("grabbable","")
+      instance.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
+
+      const setupWindow = () => {
+        const com = instance.components['helloworld-window']
+        instance.dom.style.display = 'none'
+
+        new WinBox("Hello World",{ 
+          width: 250,
+          height: 150,
+          x:"center",
+          y:"center",
+          id:  instance.uid, // important hint for html-mesh  
+          root: document.querySelector("#overlay"),
+          mount: instance.dom,
+          onclose: () => { instance.dom.style.display = 'none'; return false; },
+          oncreate: () => instance.setAttribute("html",`html:#${instance.uid}; cursor:#cursor`)
+        });
+        instance.dom.style.display = '' // show
+
+        // hint grabbable's obb-collider to track the window-object 
+        instance.components['obb-collider'].data.trackedObject3D = 'components.html.el.object3D.children.0'
+        instance.components['obb-collider'].update() 
+
+        // data2event demo
+        instance.setAttribute("data2event","")
+        com.data.myvalue = 1
+        com.data.foo     = `instance ${instance.uid}: `
+        setInterval( () => com.data.myvalue++, 500 )
+      }
+
+      setTimeout( () => setupWindow(), 10 ) // give new components time to init
+
+    },
+
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "short_name": "window",
+    "name": "Hello world window",
+    "icons": [
+      {
+        "src": "https://css.gg/browser.svg",
+        "src": "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNCA4QzQuNTUyMjggOCA1IDcuNTUyMjggNSA3QzUgNi40NDc3MiA0LjU1MjI4IDYgNCA2QzMuNDQ3NzIgNiAzIDYuNDQ3NzIgMyA3QzMgNy41NTIyOCAzLjQ0NzcyIDggNCA4WiIKICAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAvPgogIDxwYXRoCiAgICBkPSJNOCA3QzggNy41NTIyOCA3LjU1MjI4IDggNyA4QzYuNDQ3NzIgOCA2IDcuNTUyMjggNiA3QzYgNi40NDc3MiA2LjQ0NzcyIDYgNyA2QzcuNTUyMjggNiA4IDYuNDQ3NzIgOCA3WiIKICAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAvPgogIDxwYXRoCiAgICBkPSJNMTAgOEMxMC41NTIzIDggMTEgNy41NTIyOCAxMSA3QzExIDYuNDQ3NzIgMTAuNTUyMyA2IDEwIDZDOS40NDc3MSA2IDkgNi40NDc3MiA5IDdDOSA3LjU1MjI4IDkuNDQ3NzEgOCAxMCA4WiIKICAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAvPgogIDxwYXRoCiAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNMyAzQzEuMzQzMTUgMyAwIDQuMzQzMTUgMCA2VjE4QzAgMTkuNjU2OSAxLjM0MzE1IDIxIDMgMjFIMjFDMjIuNjU2OSAyMSAyNCAxOS42NTY5IDI0IDE4VjZDMjQgNC4zNDMxNSAyMi42NTY5IDMgMjEgM0gzWk0yMSA1SDNDMi40NDc3MiA1IDIgNS40NDc3MiAyIDZWOUgyMlY2QzIyIDUuNDQ3NzIgMjEuNTUyMyA1IDIxIDVaTTIgMThWMTFIMjJWMThDMjIgMTguNTUyMyAyMS41NTIzIDE5IDIxIDE5SDNDMi40NDc3MiAxOSAyIDE4LjU1MjMgMiAxOFoiCiAgICBmaWxsPSJjdXJyZW50Q29sb3IiCiAgLz4KPC9zdmc+",
+        "type": "image/svg+xml",
+        "sizes": "512x512"
+      }
+    ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "shortcuts": [
+      {
+        "name": "What is the latest news?",
+        "cli":{
+          "usage":  "helloworld <type> [options]",
+          "example": "helloworld news",
+          "args":{
+            "--latest": {type:"string"}
+          }
+        },
+        "short_name": "Today",
+        "description": "View weather information for today",
+        "url": "/today?source=pwa",
+        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "Hello world information",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Helloworld application 
+
+This is a help file which describes the application.
+It will be rendered thru troika text, and will contain
+headers based on non-punctualized lines separated by linebreaks,
+in above's case "\nHelloworld application\n" will qualify as header.
+    `
+  }
+
+});
+
--- a/com/example/helloworld.js
+++ b/com/example/helloworld.js
@ -0,0 +1,94 @@
+AFRAME.registerComponent('helloworld', {
+  schema: { 
+    wireframe: { type:"boolean", "default":false},
+    text: {type:"string","default":"hello world"}
+  },
+
+  dependencies: ['data2event'],
+
+  init: async function() {
+    this.el.object3D.visible = false
+
+    await AFRAME.utils.require(this.dependencies)
+    this.el.setAttribute("data2event","")
+    this.el.setAttribute("grabbable","")
+
+    this.el.innerHTML = `
+       <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
+       <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
+       <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
+       <a-entity position="0 1.8 -3" scale="10 10 10" text="value: ${this.data.text}; align:center; color:#888"></a-entity>
+    `
+  },
+
+  events:{
+
+    launcher:      function(e){ 
+      this.el.object3D.visible = !this.el.object3D.visible 
+      clearInterval(this.interval)
+      this.interval            = setInterval( () => {
+        this.data.wireframe = !this.data.wireframe
+      }, 500  )
+    },
+
+    // reactive this.data value demo 
+    wireframe:function( ){ 
+      this.el.object3D.traverse( (obj) => obj.material && (obj.material.wireframe = this.data.wireframe) )
+    }
+
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "short_name": "Hello world",
+    "name": "Hello world",
+    "icons": [
+      {
+        "src": "https://css.gg/shape-hexagon.svg",
+        "src": "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNNiAxNS4yMzQ4TDEyIDE4LjU2ODFMMTggMTUuMjM0OFY4Ljc2NTIxTDEyIDUuNDMxODhMNiA4Ljc2NTIxVjE1LjIzNDhaTTEyIDJMMyA3VjE3TDEyIDIyTDIxIDE3VjdMMTIgMloiCiAgICBmaWxsPSJjdXJyZW50Q29sb3IiCiAgLz4KPC9zdmc+",
+        "type": "image/svg+xml",
+        "sizes": "512x512"
+      }
+    ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "shortcuts": [
+      {
+        "name": "What is the latest news?",
+        "cli":{
+          "usage":  "helloworld <type> [options]",
+          "example": "helloworld news",
+          "args":{
+            "--latest": {type:"string"}
+          }
+        },
+        "short_name": "Today",
+        "description": "View weather information for today",
+        "url": "/today?source=pwa",
+        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "Hello world information",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Helloworld application 
+
+This is a help file which describes the application.
+It will be rendered thru troika text, and will contain
+headers based on non-punctualized lines separated by linebreaks,
+in above's case "\nHelloworld application\n" will qualify as header.
+    `
+  }
+
+});
+
--- a/com/html-as-texture-in-xr.js
+++ b/com/html-as-texture-in-xr.js
@ -1,154 +0,0 @@
-/**
- * ## [html-as-texture-in-xr](com/html-as-texture-in-xr.js)
- *
- * shows domid **only** in immersive mode 
- * (wrapper around [aframe-htmlmesh](https://ada.is/aframe-htmlmesh/)
- *
- * It also sets class 'XR' to the (HTML) body-element in immersive mode.
- * This allows CSS (in [dom component](com/dom.js)) to visually update accordingly.
- *
- * > depends on [AFRAME.utils.require](com/require.js)
- *
- * ```html 
- *  <style type="text/css">
- *    .XR #foo { color:red; }
- *  </style>
- *
- *  <a-entity html-as-texture-in-xr="domid: #foo">
- *    <b id="foo">hello</b>
- *  </a-entitiy>
- * ```
- *
- * | property     | type               |
- * |--------------|--------------------|
- * | `domid`      | `string`           |
- *
- * | event        | target     | info                                 |
- * |--------------|------------|--------------------------------------|
- * | `3D`         | a-scene    | fired when going into immersive mode |
- * | `2D`         | a-scene    | fired when leaving immersive mode    |
- *
- */
-
-if( !AFRAME.components['html-as-texture-in-xr'] ){
-
-  AFRAME.registerComponent('html-as-texture-in-xr', {
-    schema: {
-      domid:       { type:"string"},
-      doublesided: {type: "boolean", default: true},
-      faceuser:    { type: "boolean", default: false}
-    },
-
-    dependencies:{
-      html:          "com/lib/aframe-html.js"
-    },
-
-    init: async function () { 
-      let el = document.querySelector(this.data.domid)
-      if( ! el ){
-        return console.error("html-as-texture-in-xr: cannot get dom element "+this.data.domid)
-      }
-      let s = await AFRAME.utils.require(this.dependencies)
-
-      this.forwardClickToMesh();
-
-      this.el.sceneEl.addEventListener('enter-vr', () => this.enableDoubleSided() )
-
-      this.el.setAttribute("html",`html: ${this.data.domid}; cursor:#cursor; `)
-      this.el.setAttribute("visible",  AFRAME.utils.XD() == '3D' ? 'true' : 'false' )
-      if( this.data.faceuser ){
-        this.el.setAttribute("position", AFRAME.utils.XD.getPositionInFrontOfCamera(0.4) )
-      }
-    },
-
-    forwardClickToMesh: function(){
-      // monkeypatch: forward click to mesh
-      const handle = AFRAME.components['html'].Component.prototype.handle
-      AFRAME.components['html'].Component.prototype.handle = function(type,evt){
-
-        if( !this.el.sceneEl.renderer.xr.isPresenting                        ) return // ignore events in desktop mode 
-        if( this.el.sceneEl.renderer.xr.isPresenting && type.match(/^mouse/) ) return // ignore mouse-events in XR
-
-        if( type == 'click' && evt.detail.length && evt.detail[0].uv ){
-          const mesh = this.el.object3D.children[0] 
-          const uv = evt.detail[0].uv;
-          const _pointer = new THREE.Vector2();
-          const _event = { type: '', data: _pointer };
-          _event.type = type;
-          _event.data.set( uv.x, 1 - uv.y );
-          mesh.dispatchEvent( _event );
-        }
-        return handle.apply(this,[type,evt])
-      }
-
-    },
-
-    enableDoubleSided: function(){
-      // enable doubleside
-      this.el.object3D.traverse( (o) => {
-        if( o.constructor && String(o.constructor).match(/HTMLMesh/) ){
-          o.material.side = THREE.DoubleSide
-        }
-      })
-    }
-
-  });
-
-  AFRAME.utils.XD = function(){
-    return document.body.classList.contains('XR') ? '3D' : '2D'
-  }
-
-  AFRAME.utils.XD.toggle = function(state){
-      state = state != undefined ? state : state || !document.body.className.match(/XR/)
-      document.body.classList[ state ? 'add' : 'remove'](['XR'])
-      AFRAME.scenes[0].emit( state ? '3D' : '2D')
-    }
-
-  AFRAME.utils.XD.getPositionInFrontOfCamera = function(distance){
-    const camera = AFRAME.scenes[0].camera;
-    let pos = new THREE.Vector3()
-    let direction = new THREE.Vector3();
-    // Get camera's forward direction (without rotation)
-    camera.getWorldDirection(direction);
-    camera.getWorldPosition(pos)
-    direction.normalize();
-    // Scale the direction by 1 meter
-    if( !distance ) distance = 1.5
-    direction.multiplyScalar(distance);
-    // Add the camera's position to the scaled direction to get the target point
-    pos.add(direction);
-    return pos
-  }
-
-  AFRAME.registerSystem('html-as-texture-in-xr',{
-
-    init: function(){
-      this.sceneEl.addEventListener('enter-vr',() => AFRAME.utils.XD.toggle(true) )
-      this.sceneEl.addEventListener('exit-vr', () => AFRAME.utils.XD.toggle(false) )
-      this.sceneEl.addEventListener('2D', () => this.showElements(false) )
-      this.sceneEl.addEventListener('3D', () => this.showElements(true) )
-
-      document.head.innerHTML += `<style type="text/css">
-        .XR #toggle_overlay{
-          background: transparent;
-          color: #3aacff;
-        }
-
-        /*
-        .XR #overlay{
-          visibility: hidden;
-        }
-        */
-      </style>`
-
-    },
-
-    showElements: function(state){
-      let els = [...document.querySelectorAll('[html-as-texture-in-xr]')]
-      els     = els.filter( (el) => el != this.el ? el : null ) // filter out self
-      els.map( (el) => el.setAttribute("visible", state ? true : false  ) )
-    }
-
-  })
-
-}
--- a/com/isoterminal.js
+++ b/com/isoterminal.js
@ -1,543 +1,406 @@
-/** 
- * ## [isoterminal](com/isoterminal.js)
- *
- * Renders a windowed terminal in both (non)immersive mode.
- * It displays an interactive javascript console or boots into 
- * a Linux ISO image (via WASM).
- *
- * ```html 
- *   <a-entity isoterminal="iso: xrsh.iso" position="0 1.6 -0.3"></a-entity>
- * ```
- *
- * > depends on [AFRAME.utils.require](com/require.js)
- *
- * | property          | type      | default                | info |
- * |-------------------|-----------|------------------------|------|
- * | `title`           | `string`  | 'xrsh.iso' | window title |
- * | `iso`             | `string`  | https`//forgejo.isvery.ninja/assets/xrsh-buildroot/main/xrsh.iso" | |
- * | `overlayfs`       | `string`  | ''     | zip URL/file to autoextract on top of filesystem |
- * | `width`           | `number`  |  800   ||
- * | `height`          | `number`  |  600   ||
- * | `depth`           | `number`  |  0.03  ||
- * | `lineHeight`      | `number`  |  18    ||
- * | `bootMenu`        | `string`  |  ""    | character to auto-enter in bootMenu  |
- * | `bootMenuURL`     | `string`  |  ""    | character to auto-enter in bootMenu when URL has fragment (#foo.zip e.g.) |
- * | `padding`         | `number`  |  18    | |
- * | `maximized`       | `boolean` | false  | |
- * | `minimized`       | `boolean` | false  | |
- * | `muteUntilPrompt` | `boolean` | true   | mute stdout until a prompt is detected in ISO |
- * | `HUD`             | `boolean` | false  | link to camera movement |
- * | `transparent`     | `boolean` | false  | heavy, needs good gpu |
- * | `memory`          | `number`  | 60     | VM memory (in MB) [NOTE` quest or smartphone webworker might crash > 40mb ] |
- * | `bufferLatency`   | `number`  | 1      | in ms` bufferlatency from webworker to term (batch-update every char to texture) |
- * | `debug`           | `boolean` | false  | |
- * | `emulator`        | `string`  | fbterm | terminal emulator |
- *
- * > for more info see [xrsh.isvery.ninja](https://xrsh.isvery.ninja)
- *
- * Component design:
- * ```
- *                   css/html template                                                                                
- *                                                                                                                     
- *                     ┌─────────┐   ┌────────────┐                  exit-AR                                
- *            ┌───────►│ com/dom ┼──►│ com/window ├───────────────── exit-VR  ◄─┐                           
- *            │        └─────────┘   └───────────┬┘                             │                           
- *            │                                  │                              │                           
- * ┌──────────┴────────┐                         │   ┌───────────┐    ┌─────────────────────────────┐
- * │  com/isoterminal  ├────────────────────────────►│com/term.js│    │com/html-as-texture-in-XR.js │
- * └────────┬─┬────────┘                         │   └──┬─────┬▲─┘    └─────────────────────────────┘
- *          │ │        ┌────────┐             ┌──▼──────▼──────┐                     ││        │                       
- *          │ └───────►│ plane  ├─────►text───┼►div#isoterminal│◄────────────────── enter-VR   │                       
- *          │          └────────┘             └────────────────┘                    enter-AR ◄─┘                       
- *          │                                   │                                                     
- *          │                                   │                                                                   
- *          │                             ISOTerminal.js                                                                   
- *          │                ┌───────────────────────────┐           
- *          │                │ com/isoterminal/worker.js ├            
- *          │                └──────────────┌────────────┤            
- *          │                     │         │ v86.js     │            
- *          │                     │         │ feat/*.js  │            
- *          │                     │         │ libv86.js  │            
- *          │                     │         └────────────┘            
- *          │                     │         
- *          └─────────────────────┘    
- *                                                                                                                     
- * NOTE: For convenience reasons, events are forwarded between com/isoterminal.js, worker.js and ISOTerminal
- *       Instead of a melting pot of different functionnames, events are flowing through everything (ISOTerminal.emit())
- * ```       
- */ 
+AFRAME.registerComponent('isoterminal', {
+  schema: {
+    iso:    { type:"string", "default":"com/isoterminal/xrsh.iso" },
+    cols:   { type: 'number',"default": 120 },
+    rows:   { type: 'number',"default": 30 },
+    padding:{ type: 'number',"default": 18 },
+    transparent: { type:'boolean', "default":false } // need good gpu
+  },

-if( typeof AFRAME != 'undefined '){
+  init: function(){
+    this.el.object3D.visible = false
+  },

-  AFRAME.registerComponent('isoterminal', {
-    schema: {
-      iso:            { type:"string", "default":"https://forgejo.isvery.ninja/assets/xrsh-buildroot/main/xrsh.iso" },
-      overlayfs:      { type:"string"},
-      title:          { type:"string", "default":"xrsh.iso"},
-      width:          { type: 'number',"default": 800 },
-      height:         { type: 'number',"default": 600 },
-      depth:          { type: 'number',"default": 0.03 },
-      lineHeight:     { type: 'number',"default": 18 },
-      bootOnFragment: { type: 'string',"default": "nothing" },
-      bootMenu:       { type: 'string', "default": '' }, // show bootMenu if empty, or autosend key to bootMenu (key '1' e.g.)
-      bootMenuURL:    { type: 'string', "default": '' }, // show bootMenu if empty, or autosend key to bootMenu (key '1' e.g.)
-      padding:        { type: 'number',"default": 18 },
-      maximized:      { type: 'boolean',"default":false},
-      minimized:      { type: 'boolean',"default":false},
-      muteUntilPrompt:{ type: 'boolean',"default":true},     // mute stdout until a prompt is detected in ISO
-      HUD:            { type: 'boolean',"default":false},    // link to camera movement 
-      transparent:    { type:'boolean', "default":false },   // need good gpu
-      memory:         { type: 'number',  "default":60  },    // VM memory (in MB) [NOTE: quest or smartphone might crash > 40mb ]
-      bufferLatency:  { type: 'number', "default":1  },      // in ms: bufferlatency from webworker to xterm (batch-update every char to texture)
-      debug:          { type: 'boolean', "default":false },
-      emulator:       { type: 'string', "default": "fbterm" }// terminal emulator
-    },
+  requires:{
+    'window':    "com/window.js",
+    xtermjs:     "https://unpkg.com/@xterm/xterm@5.5.0/lib/xterm.js",
+    xtermcss:    "https://unpkg.com/@xterm/xterm@5.5.0/css/xterm.css",
+    v86:         "com/isoterminal/libv86.js"
+    //axterm:      "https://unpkg.com/aframe-xterm-component/aframe-xterm-component.js"
+  },

-    init: function(){
-      this.el.object3D.visible = false
-      if( window.innerWidth < this.data.width ){
-        this.data.maximized = true
-      }
+  dom: {
+    scale:   0.7,
+    events:  ['click','keydown'],
+    html:    (me) => `<div class="isoterminal"></div>`,

-      this.calculateDimension()
-      this.initHud()
-      this.setupPasteDrop()
-      this.setupEvents()
+    css:     (me) => `.isoterminal{
+                        padding: ${me.com.data.padding}px;
+                        width:100%;
+                        height:100%;
+                      }
+                      .isoterminal *{
+                         white-space: pre;
+                         font-size: 14px;
+                         font-family: Liberation Mono,DejaVu Sans Mono,Courier New,monospace;
+                         font-weight:700;
+                         display:inline;
+                         overflow: hidden;
+                      }

-      fetch(this.data.iso,{method: 'HEAD'})
-      .then( (res) => {
-        if( res.status != 200 ) throw 'not found'
+                      .isoterminal style{ display:none }
+
+                      .wb-body:has(> .isoterminal){ 
+                        background: #000c; 
+                        overflow:hidden;
+                      }
+
+                      .isoterminal div{ display:block; }
+                      .isoterminal span{ display: inline }
+
+                      @keyframes fade {
+                          from { opacity: 1.0; }
+                          50% { opacity: 0.5; }
+                          to { opacity: 1.0; }
+                      }                                                                                                                                                                                                                                  
+
+                      @-webkit-keyframes fade {
+                          from { opacity: 1.0; }
+                          50% { opacity: 0.5; }
+                          to { opacity: 1.0; }
+                      }
+
+                      .blink {
+                        animation:fade 1000ms infinite;
+                        -webkit-animation:fade 1000ms infinite;
+                      }
+                      `
+  },
+
+  toUint8Array: function(str) {
+    // Create a new Uint8Array with the same length as the input string
+    const uint8Array = new Uint8Array(str.length);
+    
+    // Iterate over the string and populate the Uint8Array
+    for (let i = 0; i < str.length; i++) {
+        uint8Array[i] = str.charCodeAt(i);
+    }
+    return uint8Array;
+  },
+
+  runISO: function(dom,instance){
+    //var term = new Terminal()
+    //term.open(dom)
+    //term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')``
+
+
+    var emulator = window.emulator = dom.emulator = new V86({
+      wasm_path:        "com/isoterminal/v86.wasm",
+      memory_size:      32 * 1024 * 1024,
+      vga_memory_size:  2 * 1024 * 1024,
+      serial_container_xtermjs: dom,
+      //screen_container: dom, //this.canvas.parentElement,
+      bios: {
+        url: "com/isoterminal/bios/seabios.bin",
+      },
+      vga_bios: {
+        url: "com/isoterminal/bios/vgabios.bin",
+      },
+      network_relay_url: "wss://relay.widgetry.org/",
+      cdrom: {
+        url: this.data.iso,
+      },
+      cmdline: "rw root=host9p rootfstype=9p rootflags=trans=virtio,cache=loose modules=virtio_pci tsc=reliable init_on_free=on",
+      bzimage:{
+        url: "com/isoterminal/images/buildroot-bzimage.bin"
+      },
+      //bzimage_initrd_from_filesystem: true,
+      //filesystem: {
+      //          baseurl: "com/isoterminal/v86/images/alpine-rootfs-flat",
+      //          basefs:  "com/isoterminal/v86/images/alpine-fs.json",
+      //      },
+      //screen_dummy: true,
+      //disable_jit: false,
+      filesystem: {},
+      autostart: true,
+    });
+
+    const loading = [
+      'loading quantum bits and bytes',
+      'preparing quantum flux capacitors',
+      'crunching peanuts and chakras',
+      'preparing parallel universe',
+      'loading quantum state fluctuations',
+      'preparing godmode',
+      'loading cat pawns and cuteness',
+      'beaming up scotty',
+      'still faster than Windows update',
+      'loading a microlinux',
+      'figuring out meaning of life',
+      'asking LLM why men have nipples',
+      'Aligning your chakras now',
+      'Breathing in good vibes',
+      'Finding inner peace soon',
+      'Centering your Zen energy',
+      'Awakening third eye powers',
+      'Tuning into the universe',
+      'Balancing your cosmic karma',
+      'Stretching time and space',
+      'Recharging your soul battery',
+      'Transcending earthly limits'
+    ]
+
+    let motd = "\n\r"
+    motd += "[38;5;57m  " + ' ____  _____________  _________ ___ ___   ' + "\n\r"
+    motd += "[38;5;93m  " + ' \\   \\/  /\\______   \\/   _____//   |   \\  ' + "\n\r"  
+    motd += "[38;5;93m  " + '  \\     /  |       _/\\_____  \\/    ~    \\ ' + "\n\r"
+    motd += "[38;5;129m " + '   /     \\  |    |   \\/        \\    Y    / ' + "\n\r"
+    motd += "[38;5;165m " + '  /___/\\  \\ |____|_  /_______  /\\___|_  /  ' + "\n\r"
+    motd += "[38;5;201m " + '        \\_/        \\/        \\/       \\/   ' + "\n\r"
+    motd += "                                                                 \n\r"
+    motd += `${loading[ Math.floor(Math.random()*1000) % loading.length-1 ]}, please wait..\n\r\n\r`
+    motd += "\033[0m" 
+
+    const files = [
+      "com/isoterminal/mnt/js",
+      "com/isoterminal/mnt/jsh",
+      "com/isoterminal/mnt/confirm",
+      "com/isoterminal/mnt/prompt",
+      "com/isoterminal/mnt/alert",
+      "com/isoterminal/mnt/profile",
+      "com/isoterminal/mnt/motd",
+    ]
+
+    emulator.bus.register("emulator-started", async () => {
+      emulator.serial_adapter.term.element.querySelector('.xterm-viewport').style.background = 'transparent'
+      emulator.serial_adapter.term.clear()
+      emulator.serial_adapter.term.write(motd)
+
+      emulator.create_file("motd", this.toUint8Array(motd) )
+      emulator.create_file("js", this.toUint8Array(`#!/bin/sh
+        cat /mnt/motd 
+        cat > /dev/null 
+      `))
+
+      let p = files.map( (f) => fetch(f) )
+      Promise.all(p)
+      .then( (files) => {
+        files.map( (f) => {
+          f.arrayBuffer().then( (buf) => {
+            emulator.create_file( f.url.replace(/.*mnt\//,''), new Uint8Array(buf) )
+          })
+        })
      })
-      .catch( (e) => {
-        console.warn(this.data.iso+" could not be loaded, loading fallback ISO URL:")
-        console.warn(this.schema.iso.default)
-        this.data.iso = this.schema.iso.default
-      })
-      .finally( () => this.initTerminal(true) )
-    },

-    requires:{
-      com:           "com/dom.js",
-      window:        "com/window.js",
-      pastedrop:     "com/pastedrop.js",
-      v86:           "com/isoterminal/libv86.js",
-      // allow xrsh to selfcontain scene + itself
-      xhook:         "com/lib/xhook.min.js",
-      //selfcontain:   "com/selfcontainer.js",
-      // html to texture
-      htmlinxr:      "com/html-as-texture-in-xr.js",
-      // isoterminal global features
-      PromiseWorker: "com/isoterminal/PromiseWorker.js",
-      ISOTerminal:   "com/isoterminal/ISOTerminal.js",
-      localforage:   "com/isoterminal/localforage.js",
-    },
+      //emulator.serial0_send('chmod +x /mnt/js')
+      //emulator.serial0_send()
+      let line = ''
+      let ready = false
+      emulator.add_listener("serial0-output-byte", async (byte) => {
+          var chr = String.fromCharCode(byte);
+          if(chr < " " && chr !== "\n" && chr !== "\t" || chr > "~")
+          {
+              return;
+          }

-    dom: {
-      scale: 0.66,
-      events:  ['click','keydown'],
-      html:    (me) => `<div class="isoterminal">
-                          <input type="file" id="pastedrop" style="position:absolute; left:-9999px;opacity:0"></input>
-                          <div id="term" tabindex="0"></div>
-                        </div>`,
+          if(chr === "\n")
+          {
+              var new_line = line;
+              line = "";
+          }
+          else if(chr >= " " && chr <= "~")
+          {
+              line += chr;
+          }

-      css:     (me) => `
+          //if(!ran_command && line.endsWith("~% "))
+          //{
+          //    ran_command = true;
+          //    emulator.serial0_send("chmod +x /mnt/test-i386\n");
+          //    emulator.serial0_send("/mnt/test-i386 > /mnt/result\n");
+          //    emulator.serial0_send("echo test fini''shed\n");
+          //}
+          //console.dir({line,new_line})
+          if( !ready && line.match(/^(\/ #|~%)/) ){
+            instance.dom.classList.remove('blink')
+            // set environment
+            let env = ['export BROWSER=1']
+            for ( let i in document.location ){
+              if( typeof document.location[i] == 'string' )
+                env.push( 'export '+String(i).toUpperCase()+'="'+document.location[i]+'"')
+            }
+            env.map( (e) => emulator.serial0_send(`echo '${e}' >> /mnt/profile\n`) )
+            let boot = `source /mnt/profile`
+            // exec hash as extra boot cmd
+            if( document.location.hash.length > 1 ){ 
+              boot += `&& cmd='${decodeURI(document.location.hash.substr(1))}' && $cmd`
+            }
+            emulator.serial0_send(boot+"\n")
+            instance.winbox.maximize()
+            emulator.serial_adapter.term.focus()
+            ready = true
+              //emulator.serial0_send("root\n")
+              //emulator.serial0_send("mv /mnt/js . && chmod +x js\n")
+          }
+      });    

-                        .isoterminal{
-                          padding: ${me.com.data.padding}px;
-                          margin-top:-60px;
-                          padding-bottom:60px;
-                          width:100%;
-                          height:99%;
-                          resize: both;
-                          overflow: hidden;
-                        }
-                        @font-face {
-                          font-family: 'Cousine';
-                          font-style: normal;
-                          font-weight: 400;
-                          src: url(./com/isoterminal/assets/Cousine.ttf) format('truetype');
-                        }
-                        @font-face {
-                          font-family: 'Cousine';
-                          font-style: normal;
-                          font-weight: 700;
-                          src: url(./com/isoterminal/assets/CousineBold.ttf) format('truetype');
-                        }
+      // unix to js device
+      emulator.add_listener("9p-write-end", async (opts) => {
+        const decoder = new TextDecoder('utf-8');

-                        .isoterminal *{
-                            outline:none;
-                            box-shadow:none;
-                        }
-
-                        .term {
-                            font-family: 'Cousine';
-                            line-height: ${me.com.data.lineHeight}px;
-                            font-weight: normal;
-                            font-variant-ligatures: none;
-                            color: #f0f0f0;
-                            overflow: hidden;
-                            white-space: nowrap;
-                        }
-
-                        .term_content a {
-                            color: inherit;
-                            text-decoration: underline;
-                            color:#2AFF;
-                        }
-                        
-                        .term_content a span{
-                            text-shadow: 0px 0px 10px #F07A;
-                        }
-
-                        .term_content a:hover {
-                            color: inherit;
-                            text-decoration: underline;
-                            animation:fade 1000ms infinite;
-                            -webkit-animation:fade 1000ms infinite;
-                        }
-
-                        .term_cursor {
-                            color: #000000;
-                            background: #70f;
-                            animation:fade 1000ms infinite; 
-                            -webkit-animation:fade 1000ms infinite;
-                        }
-
-                        .term_char_size {
-                            display: inline-block;
-                            visibility: hidden;
-                            position: absolute;
-                            top: 0px;
-                            left: -1000px;
-                            padding: 0px;
-                        }
-
-                        .term_textarea {
-                            position: absolute;
-                            top: 0px;
-                            left: 0px;
-                            width: 0px;
-                            height: 0px;
-                            padding: 0px;
-                            border: 0px;
-                            margin: 0px;
-                            opacity: 0;
-                            resize: none;
-                        }
-
-                        .term_scrollbar { background: transparent url(images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; height: 100%; }
-                        .term_track { background: transparent url(images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
-                        .term_thumb { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
-                        .term_thumb .term_end { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
-                        .noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
-
-                        .isoterminal style{ display:none }
-
-                        blink{ 
-                          border:none;
-                          padding:none;
-                        }
-
-                        #overlay .winbox:has(> .isoterminal){ 
-                          background:transparent;
-                          box-shadow:none;
-                        }
-
-                        .XR .cursor {
-                          animation:none;
-                          -webkit-animation:none;
-                        }
-
-                        .winbox#${me.el.uid} .wb-header{
-                          background: var(--xrsh-black) !important;
-                        }
-
-                        .wb-body:has(> .isoterminal){
-                          background: var(--xrsh-black);
-                          overflow:hidden;
-                        }
-
-                        .XR .isoterminal{
-                          background: #000 !important;
-                        }
-
-                        .isoterminal *{
-                          font-size: 14px;
-                          font-family: "Cousine",Liberation Mono,DejaVu Sans Mono,Courier New,monospace;
-                          font-weight:500 !important;
-                          text-shadow: 0px 0px 10px #F075;
-                        }
-
-                        @keyframes fade {
-                            from { opacity: 1.0; }
-                            50% { opacity: 0.5; }
-                            to { opacity: 1.0; }
-                        }                                                                                                                                                                                                                                  
-
-                        @-webkit-keyframes fade {
-                            from { opacity: 1.0; }
-                            50% { opacity: 0.5; }
-                            to { opacity: 1.0; }
-                        }
-
-                        .blink{
-                          animation:fade 1000ms infinite;
-                          -webkit-animation:fade 1000ms infinite;
-                        }
-
-                        `
-    },
-
-    initTerminal: async function(singleton){
-
-      // why not latest xterm or v3.12 with builtin-canvas support?
-      // first versions used 1.5.4, a typescript rewrite which:
-      // * acts weird with oculus browser keyboard (does not repaint properly after typing)
-      // * does not use canvas anymore [which would be ideal for THREE.js texture]
-      // * does not allow switching between dom/canvas
-      // * only allows a standalone WebGL addon (conflicts with THREE)
-      // * heavily dependent on requestAnimationFrame (conflicts with THREE)
-      // * typescript-rewrite results in ~300k lib (instead of 96k)
-      // * v3.12 had slightly better performance but still very heavy
-      //
-      await AFRAME.utils.require(this.requires)
-
-      let features = { // ISOTerminal plugins
-        boot:           "com/isoterminal/feat/boot.js",
-        javascript:     "com/isoterminal/feat/javascript.js",
-        jsconsole:      "com/isoterminal/feat/jsconsole.js",
-        remotekeyboard: "com/isoterminal/feat/remotekeyboard.js",
-        indexhtml:      "com/isoterminal/feat/index.html.js",
-        indexjs:        "com/isoterminal/feat/index.js.js",
-        pastedropFeat:  "com/isoterminal/feat/pastedrop.js",
-        httpfs:         "com/isoterminal/feat/httpfs.js",
-        autorestore:    "com/isoterminal/feat/autorestore.js",
-      }
-      if( document.location.hash.match(/#test/) || this.data.debug ){
-        features['tests'] = "tests/index.js"
-      }
-      if( this.data.emulator == 'fbterm' ){
-        features['fbtermjs'] = "com/isoterminal/term.js"
-        features['fbterm']   = "com/isoterminal/feat/term.js"
-      }
-      await AFRAME.utils.require(features)
-      // this one extends autorestore.js
-      await AFRAME.utils.require({remotestorage:  "com/isoterminal/feat/remotestorage.js"})
-
-      this.el.setAttribute("selfcontainer","")
-
-      // *DISABLED* instance this component 
-      // rason: we only need one term for now (more = too cpu heavy)
-      let instance 
-      if( singleton ){
-        instance = this.el
-      }else{
-        if( this.instance ){
-          const el = document.querySelector('.isoterminal')
-          return console.warn('TODO: allow multiple terminals for future beefy devices(see v86 examples)')
+        if ( opts[0] == 'js' ){
+          const buf = await emulator.read_file("dev/browser/js")
+          const script = decoder.decode(buf)
+          try{
+            let res = (new Function(`return ${script}`))()
+            if( res && typeof res != 'string' ) res = JSON.stringify(res,null,2)
+            emulator.create_file( "dev/browser/js", this.toUint8Array( res || '' ) )
+          }catch(e){ 
+            console.dir(e)
+            emulator.create_file("dev/browser/js", this.toUint8Array( `[e] `+String(e.stack) ) )
+          }
        }
-        instance = this.instance = this.el.cloneNode(false)
-        this.el.sceneEl.appendChild( instance )
+      })
+    
+    });
+
+  },
+
+  events:{
+
+    // combined AFRAME+DOM reactive events
+    click:   function(e){ }, //
+    keydown: function(e){ },
+
+    // reactive events for this.data updates
+    myvalue: function(e){ this.el.dom.querySelector('b').innerText = this.data.myvalue },
+
+    ready: function( ){
+      this.el.dom.style.display = 'none'
+    },
+
+    launcher: async function(){
+      if( this.instance ){
+        const el = document.querySelector('.isoterminal')
+        return console.warn('TODO: allow multiple terminals (see v86 examples)')
      }

-      // init isoterminal
-      this.term = new ISOTerminal(instance,this.data)
+      let s = await AFRAME.utils.require(this.requires)
+      // instance this component
+      const instance = this.instance = this.el.cloneNode(false)
+      this.el.sceneEl.appendChild( instance )

      instance.addEventListener('DOMready', () => {
-        this.term.emit('term_init', {instance, aEntity:this})
-        //instance.winbox.resize(720,380)
-        let size = `width: ${this.data.width}; height: ${this.data.height}`
-        instance.setAttribute("window", `title: ${this.data.title}; uid: ${instance.uid}; attach: #overlay; dom: #${instance.dom.id}; ${size}; min: ${this.data.minimized}; max: ${this.data.maximized}; class: no-full, no-min, no-close, no-max, no-resize; grabbable: components.html.el.object3D.children.${this.el.children.length}`)
+        this.runISO(instance.dom, instance)
+        instance.setAttribute("window", `title: ${this.data.iso}; uid: ${instance.uid}; attach: #overlay; dom: #${instance.dom.id}`)
      })

      instance.addEventListener('window.oncreate', (e) => {
        instance.dom.classList.add('blink')
-        // canvas to texture texture
-        instance.setAttribute("html-as-texture-in-xr", `domid: .winbox#${instance.uid}; faceuser: true`)
-
-        // run iso
-        let opts = {dom:instance.dom}
-        for( let i in this.data ) opts[i] = this.data[i]
-        opts.cols = this.cols
-        opts.rows = this.rows
-        this.term.start(opts)
-      })
-
-      instance.setAttribute("dom",    "")
-      instance.setAttribute("pastedrop",  "")
-
-
-      // *REMOVE* make a boot-plugin mechanism in feat/term.js
-      this.term.addEventListener('enable-console', () => {
-        instance.dom.classList.remove('blink')
-      })
-
-      this.term.addEventListener('ready', (e) => {
-        instance.dom.classList.remove('blink')
-        this.term.emit('status',"running")
-      })
-
-      this.term.addEventListener('status', function(e){
-        let msg = e.detail
-        const w = instance.winbox
-        if(!w) return
-        w.titleBak = w.titleBak || w.title
-        w.setTitle( `${w.titleBak} [${msg}]` )
      })

      instance.addEventListener('window.onclose', (e) => {
        if( !confirm('do you want to kill this virtual machine and all its processes?') ) e.halt = true
      })

-      const resize = (w,h) => { }
+      const resize = (w,h) => {
+        if( instance.dom.emulator && instance.dom.emulator.serial_adapter ){
+          setTimeout( () => {
+            this.autoResize(instance.dom.emulator.serial_adapter.term,instance,-5)
+          },500) // wait for resize anim
+        }
+      }
      instance.addEventListener('window.onresize', resize )
      instance.addEventListener('window.onmaximize', resize )

-      const focus = (e) => {
+      instance.setAttribute("dom",      "")
+      instance.setAttribute("xd",       "")  // allows flipping between DOM/WebGL when toggling XD-button
+      instance.setAttribute("visible",  AFRAME.utils.XD() == '3D' ? 'true' : 'false' )
+      instance.setAttribute("position", AFRAME.utils.XD.getPositionInFrontOfCamera(0.5) )

-        if( event.target == document.activeElement ){
-          // if we're already focused, the keyboard is already triggerend
-          // therefore we blur() the element for correctness 
-          // which allows the WebXR keyboard dissappear if implemented at all
-          // [Meta Quest 2 does not do this]
-          event.target.blur()
-        }
-
-        // calculate distance between thumb and indexfinger to detect pinch
-        // which should prevent focus-event (annoying to have keyboard popping up during pinch)
-        if( e.detail?.withEl?.components['hand-tracking-controls'] ){
-          const hand = e.detail.withEl.components['hand-tracking-controls']
-          const thumb = hand.bones.find( (b) => b.name == 'thumb-tip' )
-          const diff  = thumb.position.distanceTo(hand.indexTipPosition)
-          if( diff < 0.02) return // pinching! don't trigger keyboard (focus)
-        }
-        this.el.emit('focus',e.detail)
-      }
-
-      this.el.addEventListener('obbcollisionstarted', focus )
-      this.el.sceneEl.addEventListener('exit-vr', focus )
-      this.el.sceneEl.addEventListener('exit-ar', focus )
+      const focus = () => document.querySelector('canvas.a-canvas').focus()
+      instance.addEventListener('obbcollisionstarted', focus )
+      this.el.sceneEl.addEventListener('enter-vr', focus )

      instance.object3D.quaternion.copy( AFRAME.scenes[0].camera.quaternion ) // face towards camera
-    },
-
-    initHud: function(){
-      if( AFRAME.utils.device.isMobile() ) this.data.HUD = true 
-      if( this.data.HUD ){
-        document.querySelector('[camera]').appendChild( this.el )
-        this.el.setAttribute("position","0 -0.03 -0.4")
-      }
-    },
-
-    setupPasteDrop: function(){
-      this.el.addEventListener('pasteFile', (e) => {
-        e.preventDefault()                 // prevent bubbling up to window (which is triggering this initially)
-        if( !this.term.pasteFile ) return  // skip if feat/pastedrop.js is not loaded 
-        this.term.pasteFile(e.detail) 
-      })
-      return this
-    },
-
-    calculateDimension: function(){
-      if( this.data.width == -1  ) this.data.width = document.body.offsetWidth;
-      if( this.data.height == -1 ) this.data.height = Math.floor( document.body.offsetHeight - 30 )
-      if( this.data.height > this.data.width ) this.data.height = this.data.width // mobile smartphone fix
-      this.data.width -= this.data.padding*2
-      this.data.height -= this.data.padding*2
-      this.cols = Math.floor(this.data.width/this.data.lineHeight*2)-1
-      this.rows = Math.floor( (this.data.height*0.93)/this.data.lineHeight)-1
-    },
-
-    setupEvents: function(){
-      this.el.addEventListener('exec', (e) => this.term.exec( e.detail ) )
-      this.el.addEventListener('hook', (e) => this.term.hook( e.detail[0], e.detail[1] ) )
-      this.el.addEventListener('send', (e) => this.term.send( e.detail[0], e.detail[1] || 0 ) )
-      this.el.addEventListener('create_file', async (e) => await this.term.worker.create_file( e.detail[0], e.detail[1] ) )
-      this.el.addEventListener('create_file_from_url', async (e) => await this.term.worker.create_file_from_url( e.detail[0], e.detail[1] ) )
-      this.el.addEventListener('update_file', async (e) => await this.term.worker.update_file( e.detail[0], e.detail[1] ) )
-      this.el.addEventListener('append_file', async (e) => await this.term.worker.append_file( e.detail[0], e.detail[1] ) )
-      this.el.addEventListener('read_file',   async (e) => { 
-        const buf = await this.term.worker.read_file( e.detail[0] )
-        const str = new TextDecoder().decode(buf)
-        if( typeof e.detail[1] == 'function' ) e.detail[1](str,buf)
-        else console.log(str)
-      })
-    },
-
-    events:{
-
-      // combined AFRAME+DOM reactive events
-      click:   function(e){ }, //
-      keydown: function(e){ },
-
-      // reactive events for this.data updates
-      myvalue: function(e){ this.el.dom.querySelector('b').innerText = this.data.myvalue },
-
-      launcher: async function(){
-        if( !this.term.instance ){
-          this.initTerminal()
-        }else{
-          // toggle visibility
-          this.el.winbox[ this.el.winbox.min ? 'restore' : 'minimize' ]()
-        }
-      }
-
-    },
-
-    manifest: { // HTML5 manifest to identify app to xrsh
-      "iso": "linux-x64-4.15.iso",
-      "short_name": "ISOTerm",
-      "name": "terminal",
-      "icons": [
-        {
-          "src": "https://css.gg/terminal.svg",
-          "src": "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNS4wMzMzIDE0LjgyODRMNi40NDc1MSAxNi4yNDI2TDEwLjY5MDIgMTJMNi40NDc1MSA3Ljc1NzMzTDUuMDMzMyA5LjE3MTU1TDcuODYxNzIgMTJMNS4wMzMzIDE0LjgyODRaIgogICAgZmlsbD0iY3VycmVudENvbG9yIgogIC8+CiAgPHBhdGggZD0iTTE1IDE0SDExVjE2SDE1VjE0WiIgZmlsbD0iY3VycmVudENvbG9yIiAvPgogIDxwYXRoCiAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNMiAyQzAuODk1NDMxIDIgMCAyLjg5NTQzIDAgNFYyMEMwIDIxLjEwNDYgMC44OTU0MyAyMiAyIDIySDIyQzIzLjEwNDYgMjIgMjQgMjEuMTA0NiAyNCAyMFY0QzI0IDIuODk1NDMgMjMuMTA0NiAyIDIyIDJIMlpNMjIgNEgyTDIgMjBIMjJWNFoiCiAgICBmaWxsPSJjdXJyZW50Q29sb3IiCiAgLz4KPC9zdmc+",
-          "type": "image/svg+xml",
-          "sizes": "512x512"
-        }
-      ],
-      "id": "/?source=pwa",
-      "start_url": "/?source=pwa",
-      "background_color": "#3367D6",
-      "display": "standalone",
-      "scope": "/",
-      "theme_color": "#3367D6",
-      "shortcuts": [
-        /*
-        {
-          "name": "What is the latest news?",
-          "cli":{
-            "usage":  "helloworld <type> [options]",
-            "example": "helloworld news",
-            "args":{
-              "--latest": {type:"string"}
-            }
-          },
-          "short_name": "Today",
-          "description": "View weather information for today",
-          "url": "/today?source=pwa",
-          "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
-        }
-        */
-      ],
-      "description": "Runs an .iso file",
-      "screenshots": [
-        {
-          "src": "/images/screenshot1.png",
-          "type": "image/png",
-          "sizes": "540x720",
-          "form_factor": "narrow"
-        }
-      ],
-      "help":`
-  XRSH application
-
-  This is a help file which describes the application.
-  It will be rendered thru troika text, and will contain
-  headers based on non-punctualized lines separated by linebreaks,
-  in above's case "\nHelloworld application\n" will qualify as header.
-      `
    }

-  });
-}
+  },
+
+  autoResize: function(term,instance,rowoffset){
+    if( !term.element ) return
+
+    const defaultScrollWidth = 24;
+    const MINIMUM_COLS = 2;
+    const MINIMUM_ROWS = 2;
+
+    const dims = term._core._renderService.dimensions;
+    const scrollbarWidth = (term.options.scrollback === 0
+      ? 0
+      : (term.options.overviewRuler?.width || defaultScrollWidth ));
+
+    const parentElementStyle = window.getComputedStyle(instance.dom);
+    const parentElementHeight = parseInt(parentElementStyle.getPropertyValue('height'));
+    const parentElementWidth = Math.max(0, parseInt(parentElementStyle.getPropertyValue('width')));
+    const elementStyle = window.getComputedStyle(term.element);
+    const elementPadding = {
+      top: parseInt(elementStyle.getPropertyValue('padding-top')),
+      bottom: parseInt(elementStyle.getPropertyValue('padding-bottom')),
+      right: parseInt(elementStyle.getPropertyValue('padding-right')),
+      left: parseInt(elementStyle.getPropertyValue('padding-left'))
+    };
+    const elementPaddingVer = elementPadding.top + elementPadding.bottom;
+    const elementPaddingHor = elementPadding.right + elementPadding.left;
+    const availableHeight = parentElementHeight - elementPaddingVer;
+    const availableWidth = parentElementWidth - elementPaddingHor - scrollbarWidth;
+    const geometry = {
+      cols: Math.max(MINIMUM_COLS, Math.floor(availableWidth / dims.css.cell.width)),
+      rows: Math.max(MINIMUM_ROWS, Math.floor(availableHeight / dims.css.cell.height))
+    };
+    term.resize(geometry.cols, geometry.rows + (rowoffset||0) );
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "iso": "linux-x64-4.15.iso",
+    "short_name": "ISOTerm",
+    "name": "terminal",
+    "icons": [
+      {
+        "src": "https://css.gg/terminal.svg",
+        "src": "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBkPSJNNS4wMzMzIDE0LjgyODRMNi40NDc1MSAxNi4yNDI2TDEwLjY5MDIgMTJMNi40NDc1MSA3Ljc1NzMzTDUuMDMzMyA5LjE3MTU1TDcuODYxNzIgMTJMNS4wMzMzIDE0LjgyODRaIgogICAgZmlsbD0iY3VycmVudENvbG9yIgogIC8+CiAgPHBhdGggZD0iTTE1IDE0SDExVjE2SDE1VjE0WiIgZmlsbD0iY3VycmVudENvbG9yIiAvPgogIDxwYXRoCiAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNMiAyQzAuODk1NDMxIDIgMCAyLjg5NTQzIDAgNFYyMEMwIDIxLjEwNDYgMC44OTU0MyAyMiAyIDIySDIyQzIzLjEwNDYgMjIgMjQgMjEuMTA0NiAyNCAyMFY0QzI0IDIuODk1NDMgMjMuMTA0NiAyIDIyIDJIMlpNMjIgNEgyTDIgMjBIMjJWNFoiCiAgICBmaWxsPSJjdXJyZW50Q29sb3IiCiAgLz4KPC9zdmc+",
+        "type": "image/svg+xml",
+        "sizes": "512x512"
+      }
+    ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "shortcuts": [
+      {
+        "name": "What is the latest news?",
+        "cli":{
+          "usage":  "helloworld <type> [options]",
+          "example": "helloworld news",
+          "args":{
+            "--latest": {type:"string"}
+          }
+        },
+        "short_name": "Today",
+        "description": "View weather information for today",
+        "url": "/today?source=pwa",
+        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "Hello world information",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Helloworld application
+
+This is a help file which describes the application.
+It will be rendered thru troika text, and will contain
+headers based on non-punctualized lines separated by linebreaks,
+in above's case "\nHelloworld application\n" will qualify as header.
+    `
+  }
+
+});
--- a/com/isoterminal/ISOTerminal.js
+++ b/com/isoterminal/ISOTerminal.js
@ -1,360 +0,0 @@
-function ISOTerminal(instance,opts){
-  // create a neutral isoterminal object which can be decorated
-  // with prototype functions and has addListener() and dispatchEvent()
-  let obj      = new EventTarget()
-  obj.instance = instance
-  obj.opts     = opts 
-  // register default event listeners (enable file based features like isoterminal/jsconsole.js e.g.)
-  for( let event in ISOTerminal.listener )
-    for( let cb in ISOTerminal.listener[event] )
-      obj.addEventListener( event, ISOTerminal.listener[event][cb] )
-  // compose object with functions
-  for( let i in ISOTerminal.prototype ) obj[i] = ISOTerminal.prototype[i]
-  obj.emit('init')
-  instance.sceneEl.emit("isoterminal_init",{})
-  return obj
-}
-
-ISOTerminal.prototype.emit = function(event,data,sender){
-  data = data || false 
-  const evObj = new CustomEvent(event, {detail: data} )
-  // forward event to worker/instance/AFRAME element or component-function
-  // this feels complex, but actually keeps event- and function-names more concise in codebase
-  let fire = () => {
-    this.dispatchEvent( evObj )
-    if( sender !=  "instance" && this.instance                    ) this.instance.dispatchEvent(evObj)
-    if( sender !=  "worker"   && this.worker                      ) this.worker.postMessage({event,data}, PromiseWorker.prototype.getTransferable(data) )
-    if( sender !== undefined  && typeof this[event] == 'function' ) this[event].apply(this, data && data.push ? data : [data] )
-  }
-  if( event.match(/^serial/) ){
-    this.preventFrameDrop( fire )
-  }else fire()
-}
-
-ISOTerminal.addEventListener = (event,cb) => {
-  ISOTerminal.listener = ISOTerminal.listener || {}
-  ISOTerminal.listener[event] = ISOTerminal.listener[event] || []
-  ISOTerminal.listener[event].push(cb)
-}
-
-ISOTerminal.prototype.exec = function(opts){
-  const shellscript = opts[0];
-  const cb = opts[1];
-  let cmd = `printf "\n\r"; { sh<<EOF\n ${shellscript}; \nEOF\n} &> /mnt/exec;\n` 
-  console.log(cmd)
-  if( cb ){
-    window.cb = cb
-    cmd += `js 'document.querySelector("[isoterminal]").emit("read_file", ["exec", window.cb ])';\n`
-  }
-  this.send( cmd, 1 )
-}
-
-ISOTerminal.prototype.hook = function(hookname,args){
-  let cmd = `{ type hook || source /etc/profile.sh; }; hook ${hookname} "${args.join('" "')}"`
-  this.exec([cmd])
-}
-
-ISOTerminal.prototype.serial_input = 0; // can be set to 0,1,2,3 to define stdinput tty (xterm plugin)
-
-ISOTerminal.prototype.send = function(str, ttyNr){
-  if( ttyNr == undefined) ttyNr = this.serial_input
-  if( (this.emulator || this.worker) && this.ready ){
-    if( ttyNr == undefined ){
-      if( this.emulator.serial_adapter ){
-        this.emulator.serial_adapter.term.paste(str)
-      }else this.emulator.keyboard_send_text(str) // vga screen
-    }else{
-      this.convert.toUint8Array( str ).map( (c) => {
-        this.preventFrameDrop( 
-          () => {
-            this.worker.postMessage({event:`serial${ttyNr}-input`,data:c})
-          }
-        )
-      })
-    }  
-  }else{
-    this.emit('serial-output-string', str)
-  }
-}
-
-ISOTerminal.prototype.convert = {
-
-  arrayBufferToBase64: function(buffer){
-      let binary = '';
-      const bytes = new Uint8Array(buffer);
-      const len = bytes.byteLength;
-      for (let i = 0; i < len; i++) binary += String.fromCharCode(bytes[i]);
-      return btoa(binary);
-  },
-
-  base64ToArrayBuffer: function(base64) {
-      const binaryString = atob(base64);
-      const len = binaryString.length;
-      const bytes = new Uint8Array(len);
-
-      for (let i = 0; i < len; i++) {
-          bytes[i] = binaryString.charCodeAt(i);
-      }
-      return bytes.buffer;
-  },
-
-  toUint8Array: function(str) {
-    str = String(str) || String("")
-    // Create a new Uint8Array with the same length as the input string
-    const uint8Array = new Uint8Array(str.length);
-    
-    // Iterate over the string and populate the Uint8Array
-    for (let i = 0; i < str.length; i++) {
-        uint8Array[i] = str.charCodeAt(i);
-    }
-    return uint8Array;
-  },
-
-  Uint8ArrayToString: function(arr){
-    const decoder = new TextDecoder('utf-8'); // Specify encoding
-    return decoder.decode(arr);
-  }
-}
-
-ISOTerminal.prototype.start = function(opts){
-
-  let me = this
-  this.opts = {...this.opts, ...opts}
-  let image = {}
-  if( opts.iso.match(/\.iso$/) ) image.cdrom   = { url: opts.iso }
-  if( opts.iso.match(/\.bin$/) ) image.bzimage = { url: opts.iso }
-
-  opts = { ...image,
-    uart1:true, // /dev/ttyS1
-    uart2:true, // /dev/ttyS2
-    uart3:true, // /dev/ttyS3
-    wasm_path:        "v86.wasm",
-    memory_size:      opts.memory * 1024 * 1024,
-    vga_memory_size:  2 * 1024 * 1024,
-    //screen_container: opts.dom,
-    //serial_container: opts.dom,
-    bios: {
-      url: "bios/seabios.bin",
-    },
-    vga_bios: {
-      url: "bios/vgabios.bin",
-      //urg|: "com/isoterminal/bios/VGABIOS-lgpl-latest.bin",
-    },
-    cmdline: "rw root=host9p rootfstype=9p rootflags=trans=virtio,cache=loose modules=virtio_pci tsc=reliable init_on_freg|=on vga=ask", //vga=0x122",
-    net_device:{
-      //type:"ne2k",
-      relay_url:"fetch" 
-      //relay_url:"wss://relay.widgetry.org/"
-
-      //local_http: true,
-      //type:"virtio",
-      //relay_url:"fetch",
-      //cors_proxy: "https://corsproxy.io/"
-    },
-    //bzimage_initrd_from_filesystem: true,
-    //filesystem: {
-    //          baseurl: "com/isoterminal/v86/images/alpine-rootfs-flat",
-    //          basefs:  "com/isoterminal/v86/images/alpine-fs.json",
-    //      },
-    //screen_dummy: true,
-    //disable_jit: false,
-    overlayfs: this.opts.overlayfs,
-    filesystem: {},
-    autostart: true,
-    prompt: this.opts.prompt,
-    debug: this.opts.debug ? true : false
-  };
-
-  this
-  .setupWorker(opts)
-  .startVM(opts)
-}
-
-ISOTerminal.prototype.setupWorker = function(opts){
-
-  if( typeof window.PromiseWorker == 'undefined' ) return this
-
-  /*
-   * the WebWorker (which runs v86)
-   *
-   */
-  this.worker = new PromiseWorker( "com/isoterminal/worker.js", (cb,event,data) => {
-    if( !data.promiseId ) this.emit(event,data,"worker")  // forward event to world
-    this.preventFrameDrop( cb(event,data) )
-  })
-
-  return this
-}
-
-ISOTerminal.prototype.getLoaderMsg = function(){
-
-  const loading = [
-    'loading quantum bits and bytes',
-    'preparing quantum flux capacitors',
-    'crunching peanuts and chakras',
-    'preparing parallel universe',
-    'loading quantum state fluctuations',
-    'preparing godmode',
-    'loading cat pawns and cuteness',
-    'beaming up scotty',
-    'still faster than Windows update',
-    'loading a microlinux',
-    'figuring out meaning of life',
-    'Aligning your chakras now',
-    'Breathing in good vibes',
-    'Finding inner peace soon',
-    'Centering your Zen energy',
-    'Awakening third eye powers',
-    'Tuning into the universe',
-    'Balancing your cosmic karma',
-    'Stretching time and space',
-    'Recharging your soul battery',
-    'Transcending earthly limits'
-  ]
-
-  const empower    = [
-    "FOSS gives users control over their software, offering freedom to modify and share",
-    "Feeling powerless? FOSS escapes a mindset known as learned helplessness",
-    "FOSS breaks this cycle by showing that anyone can learn and contribute",
-    "Proprietary software can make users dependent, but FOSS offers real choices",
-    "FOSS communities provide support and encourage users to develop new skills",
-    "FOSS empowers users to customize and improve their tools",
-    "Engaging with FOSS helps build confidence and self-reliance in tech",
-    "FOSS shows that anyone can shape the digital world with curiosity and effort",
-    "Linux can revive old computers, extending their life and reduces e-waste",
-    "Many lightweight Linux distributions run smoothly on older hardware",
-    "Installing Linux on aging devices keeps them functional instead of sending them to the landfill",
-    "Linux uses fewer resources, making it ideal for reusing older machines",
-    "By using Linux, you can avoid buying new hardware, cutting down on tech waste",
-    "Instead of discarding slow devices, Linux can bring them back to life",
-    "Linux supports a wide range of devices, helping to prevent e-waste",
-    "Open-source drivers in Linux enable compatibility with old peripherals, reducing the need for replacements",
-    "Free Linux software helps users avoid planned obsolescence in commercial products",
-    "Switching to Linux promotes sustainability by reducing demand for new gadgets and lowering e-waste"
-  ]
-
-  let motd = `
-\r[38;5;57m. .  ____  _____________  ________. ._. ._. . . 
-\r[38;5;93m. . .\\   \\/  /\\______   \\/   _____//   |   \\. . 
-\r[38;5;93m. . . \\     /  |       _/\\_____  \\/    ~    \\ . 
-\r[38;5;129m. . . /     \\  |    |   \\/        \\    Y    / . 
-\r[38;5;165m. . ./___/\\  \\ |____|_  /_______  /\\___|_  /. . 
-\r[38;5;201m. . . . . .\\_/. . . . \\/ . . . .\\/ . . _ \\/ . . 
-\r[38;5;165m▬▬▬▬▬▬▬▬ [38;5;51mhttps://xrsh.isvery.ninja[38;5;165m ▬▬▬▬▬▬▬▬▬▬▬▬
-\r[38;5;165mlocal-first, polyglot, unixy WebXR IDE & runtime
-\r[38;5;57m
-\rcredits
-\r------- 
-\r[38;5;51mhttps://www.w3.org/TR/webxr
-\rhttps://xrfragment.org 
-\rhttps://threejs.org 
-\rhttps://aframe.org 
-\rhttps://busybox.net
-\rhttps://buildroot.org
-\rfediverse: @lvk@mastodon.online @utopiah@mastodon.pirateparty.be @nlnet@nlnet.nl 
-\r`
-
-  const text_color = "\r[38;5;129m" 
-  const text_reset = "\033[0m"
-  const loadmsg    = "\n\r"+loading[ Math.floor(Math.random()*1000) % loading.length ] + "..please wait \n\n\r"
-  const empowermsg = "\n\r"+text_reset+'"'+empower[ Math.floor(Math.random()*1000) % empower.length ] + '"\n\r'
-  return { motd, text_color, text_reset, loadmsg, empowermsg}
-}
-
-ISOTerminal.prototype.startVM = function(opts){
-
-  this.v86opts = opts
-
-  this.addEventListener('emulator-started', async (e) => {
-    if( this.boot.fromImage ) return this.emit('serial-output-string', "\r[!] downloading session...please wait\n\r[!] this could take a while depending on your connection..\n\r")
-
-    let line = ''
-    this.ready = false
-
-    this.addEventListener(`serial0-output-string`, async (e) => {
-      const str = e.detail
-
-      // lets scan for a prompt so we can send a 'ready' event to the world
-      if( !this.ready && str.match(/\n(\/ #|~ #|~%|\[.*\]>)/) ) this.postBoot()
-
-      if( this.ready || !this.opts.muteUntilPrompt ) this.emit('serial-output-string', e.detail )
-    })
-  });
-
-  let msglib = this.getLoaderMsg()
-  let msg = msglib.motd
-
-  this.emit('serial-output-string', msg)
-  this.emit('bootMenu',{bootMenu: this.opts.bootMenu, bootMenuURL: this.opts.bootMenuURL })
-}
-
-ISOTerminal.prototype.bootISO = function(){
-  const getImage = (str) => decodeURIComponent( 
-    str.match(/\&img=/) ? str.replace(/.*img=/,'').replace(/\&.*/,'') : '' 
-  )
-  let msglib = this.getLoaderMsg()
-  this.emit('status',msglib.loadmsg)
-  let msg = "\n\r" + msglib.empowermsg + msglib.text_color + msglib.loadmsg + msglib.text_reset
-  this.emit('serial-output-string', msg)
-  if( getImage(this.boot.hash) ){
-    this.boot.fromImage = true 
-  }
-  this.emit('runISO',{...this.v86opts, bufferLatency: this.opts.bufferLatency, img: getImage(this.boot.hash) })
-}
-
-
-ISOTerminal.prototype.postBoot = function(cb){
-  this.emit('postReady',{})
-  this.ready = true
-  setTimeout( () => {
-    this.emit('ready',{})
-    if( cb ) cb()
-  }, 500 )
-}
-
-// this is allows (unsophisticated) outputbuffering
-ISOTerminal.prototype.bufferOutput = function(byte,cb,latency){
-  const resetBuffer = () => ({str:""})
-  this.buffer = this.buffer || resetBuffer()
-  this.buffer.str += String.fromCharCode(byte)
-  if( !this.buffer.id ){ 
-    cb(this.buffer.str)                   // send out leading call
-    this.buffer = resetBuffer()
-    this.buffer.id = setTimeout( () => {  // accumulate succesive calls 
-      if( this.buffer.str ) cb(this.buffer.str)
-      this.buffer = resetBuffer()
-    }, this.latency || 250)
-  }
-}
-
-
-//ISOTerminal.prototype.bufferOutput = function(byte, cb, latency, buffer) {
-//  const str = String.fromCharCode(byte);
-//  //if (str === '\r' || str === '\n' || str.charCodeAt(0) < 32 || str.charCodeAt(0) === 127) {
-//  //  cb(str);
-//  //} else if (str === '\x1b') { // ESC
-//  //  buffer.esc = true;
-//  //} else if (buffer.esc) {
-//  //  cb('\x1b' + str);
-//  //  buffer.esc = false;
-//  //} else {
-//    buffer.str = (buffer.str || '') + str;
-//    if (Date.now() - (buffer.timestamp || 0) >= latency) {
-//    console.log(buffer.str)
-//      cb(buffer.str);
-//      buffer.str = '';
-//      buffer.timestamp = Date.now();
-//    }
-//  //}
-//}
-
-ISOTerminal.prototype.preventFrameDrop = function(cb){
-  // don't let workers cause framerate dropping
-  const xr = this.instance.sceneEl.renderer.xr
-  if( xr.isPresenting ){
-    xr.getSession().requestAnimationFrame(cb)
-  }else{
-    window.requestAnimationFrame(cb)
-  }
-}
-
--- a/com/isoterminal/PromiseWorker.js
+++ b/com/isoterminal/PromiseWorker.js
@ -1,77 +0,0 @@
-/*
- * This is basically a Javascript Proxy for 'new Worker()' 
- * which allows calling worker-functions via promises.
- *
- * It's basically comlink without the fat.
- *
- * const w = new PromiseWorker("worker.js", (cb,event_or_fn,data) => {
- *   cb(event_or_fn,data) // decorate/ratelimit/hooks here
- * })
- * w.foo().then( console.dir )
- *
- * in worker.js define a function: this.foo = () => return {foo:"Bar"}
- */
-
-function PromiseWorker(file, onmessage){
-
-  let proxy
-  const worker = new Worker(file)
-
-  worker.onmessage = (e) => {           // handle messages originating from worker
-    const {event,data} = e.data         // this is worker.onmessage(...)
-    const cb = (event,data) => () => {  //
-      if( data.promiseId ){             //
-        proxy.resolver(data)             // forward to promise resolver 
-      }
-    }
-    onmessage(cb,event,data)
-  }
-
-  return proxy = new Proxy(this,{
-    get(me,k){
-      if( k.match(/(postMessage|onmessage)/) ) return worker[k].bind(worker)
-      if( k.match(/(resolver|promise)/)      ) return this[k].bind(this)
-      // promisify postMessage(...) call
-      return function(){
-        return this.promise(me,{event: k, data: [...arguments] })
-      }
-    },
-
-    promise(me,msg){
-      if( typeof msg != 'object' || !msg.event || !msg.data ){ 
-        throw 'worker.promise({event:..,data:..}) did not receive correct msg : '+JSON.stringify(msg)
-      }
-      this.resolvers = this.resolvers || {last:1,pending:{}}
-      msg.data.promiseId = this.resolvers.last++
-      // Send id and task to WebWorker
-      let dataTransferable = PromiseWorker.prototype.getTransferable(msg.data)
-      worker.postMessage(msg, dataTransferable )
-      return new Promise( resolve => this.resolvers.pending[ msg.data.promiseId ] = resolve );
-    },
-
-    resolver(data){
-      if( !data || !data.promiseId ) throw 'promiseId not given'
-      this.resolvers.pending[ data.promiseId ](data.result);
-      delete this.resolvers.pending[ data.promiseId ]; // Prevent memory leak
-    }
-
-  })
-
-}
-
-PromiseWorker.prototype.getTransferable = function(data){
-  let objs = []
-  function isTransferable(obj) {
-    return obj instanceof ArrayBuffer ||
-           obj instanceof MessagePort ||
-           obj instanceof ImageBitmap ||
-           (typeof OffscreenCanvas !== 'undefined' && obj instanceof OffscreenCanvas) ||
-           (typeof ReadableStream !== 'undefined' && obj instanceof ReadableStream) ||
-           (typeof WritableStream !== 'undefined' && obj instanceof WritableStream) ||
-           (typeof TransformStream !== 'undefined' && obj instanceof TransformStream);
-  }
-  for( var i in data ){
-    if( isTransferable(data[i]) ) objs.push(data[i])
-  }
-  return objs.length ? objs : undefined
-}
--- a/com/isoterminal/assets/Cousine.ttf
+++ b/com/isoterminal/assets/Cousine.ttf
--- a/com/isoterminal/assets/CousineBold.ttf
+++ b/com/isoterminal/assets/CousineBold.ttf
@ -1,16 +0,0 @@
--2024-09-23 17:49:04--  https://fonts.gstatic.com/s/cousine/v27/d6lNkaiiRdih4SpP9Z8K6T4.ttf
-Resolving fonts.gstatic.com (fonts.gstatic.com)... 142.250.180.195, 2a00:1450:400d:806::2003
-Connecting to fonts.gstatic.com (fonts.gstatic.com)|142.250.180.195|:443... connected.
-HTTP request sent, awaiting response... 200 OK
-Length: 287924 (281K) [font/ttf]
-Saving to: ‘d6lNkaiiRdih4SpP9Z8K6T4.ttf’
-
-     0K .......... .......... .......... .......... .......... 17% 2.31M 0s
-    50K .......... .......... .......... .......... .......... 35% 1.91M 0s
-   100K .......... .......... .......... .......... .......... 53% 9.09M 0s
-   150K .......... .......... .......... .......... .......... 71% 3.03M 0s
-   200K .......... .......... .......... .......... .......... 88% 3.40M 0s
-   250K .......... .......... .......... .                    100% 12.4M=0.09s
-
-2024-09-23 17:49:05 (3.23 MB/s) - ‘d6lNkaiiRdih4SpP9Z8K6T4.ttf’ saved [287924/287924]
-
--- a/com/isoterminal/feat/9pfs_utils.js
+++ b/com/isoterminal/feat/9pfs_utils.js
@ -1,109 +0,0 @@
-let emulator    = this.emulator
-let me          = this
-
-emulator.fs9p.update_file = async function(file,data){
-    const convert = ISOTerminal.prototype.convert
-
-    const p = this.SearchPath(file);
-
-    if(p.id === -1)
-    {
-        return emulator.create_file(file,data)
-    }
-    
-    const inode = this.GetInode(p.id);
-    const buf   = typeof data == 'string' ? convert.toUint8Array(data) : data || ""
-    if( buf.length == 0 ) return new Promise( (resolve,reject) => resolve(data) )
-
-    try{
-      await this.Write(p.id,0, buf.length, buf )
-      // update inode
-      inode.size = buf.length
-      const now = Math.round(Date.now() / 1000);
-      inode.atime = inode.mtime = now;
-      return new Promise( (resolve,reject) => resolve(buf) )
-    }catch(e){
-      console.error({file,data})
-      return new Promise( (resolve,reject) => reject(e) )
-    }
-}
-
-emulator.fs9p.create_file_from_url = async function(file,url){
-  const convert = ISOTerminal.prototype.convert
-  return fetch(url)
-  .then( (res) => res.arrayBuffer() )
-  .then( (buf) => {
-    let arr = new Uint8Array(buf)
-    return emulator.create_file(file, arr )
-  })
-  .catch( (e) => {
-    emulator.create_file(file, new Uint8Array()  ) // empty file so at least other processes can check for error (v86 has no retcodes for fs9p)
-    console.error(e)
-  })
-}
-
-emulator.fs9p.append_file = async function(file,data){
-    const convert = ISOTerminal.prototype.convert
-
-    const p = this.SearchPath(file);
-
-    if(p.id === -1)
-    {
-        return Promise.resolve(null);
-    }
-    
-    const inode = this.GetInode(p.id);
-    const buf   = typeof data == 'string' ? convert.toUint8Array(data) : data
-    await this.Write(p.id, inode.size, buf.length, buf )
-    // update inode
-    inode.size = inode.size + buf.length
-    const now = Math.round(Date.now() / 1000);
-    inode.atime = inode.mtime = now;
-    return new Promise( (resolve,reject) => resolve(buf) )
-
-}
-
-emulator.fs9p.read_file_world = async function(file){
-    const p = this.SearchPath(file);
-
-    if(p.id === -1)
-    {
-        return Promise.resolve(null);
-    }
-
-    const inode = this.GetInode(p.id);
-    const perms = this.parseFilePermissions(inode.mode)
-    
-    if( !perms.world.read ){
-        return Promise.resolve(null);
-    }
-
-    return this.Read(p.id, 0, inode.size);
-}
-
-emulator.fs9p.parseFilePermissions = function(permissionInt) {
-    // Convert the permission integer to octal
-    const octalPermissions = permissionInt.toString(8);
-
-    // Extract the permission bits (last 3 digits in octal)
-    const permissionBits = octalPermissions.slice(-3);
-
-
-    function parsePermission(digit) {
-        const num = parseInt(digit, 10);
-
-        return {
-            read: Boolean(num & 4),  // 4 = read
-            write: Boolean(num & 2), // 2 = write
-            execute: Boolean(num & 1) // 1 = execute
-        };
-    }
-    // Decode the permissions
-    const permissions = {
-        owner: parsePermission(permissionBits[0]),
-        group: parsePermission(permissionBits[1]),
-        world: parsePermission(permissionBits[2]),
-    };
-
-    return permissions;
-}
--- a/com/isoterminal/feat/autorestore.js
+++ b/com/isoterminal/feat/autorestore.js
@ -1,106 +0,0 @@
-// this is restoring state to/from the v86 emulator
-// however instead of passing the huge blob between webworker/browser 
-// we transfer it via localforage as a base64 string
-
-if( typeof emulator != 'undefined' ){
-  // inside worker-thread
-  importScripts("localforage.js")  // we don't instance it again here (just use its functions)
-  
-  this.restore_state = async function(data){ 
-    // fastforward instance state
-    this.opts.muteUntilPrompt = false
-    this.ready                = true 
-
-    return new Promise( (resolve,reject) => {
-      localforage.getItem("state", async (err,stateBase64) => {
-        if( stateBase64 && !err ){
-          state = ISOTerminal.prototype.convert.base64ToArrayBuffer( stateBase64 )
-          await emulator.restore_state(state)
-          console.log("restored state")
-        }else return reject("worker.js: emulator.restore_state (could not get state from localforage)")
-        resolve()
-      })
-    })
-  }
-  this.save_state = async function(){ 
-    return new Promise( async (resolve,reject ) => {
-      console.log("saving session")
-      let state = await emulator.save_state()
-      localforage.setDriver([
-        localforage.INDEXEDDB,
-        localforage.WEBSQL,
-        localforage.LOCALSTORAGE
-      ])
-      .then( () => {
-        localforage.setItem("state", ISOTerminal.prototype.convert.arrayBufferToBase64(state) )
-        console.log("state saved")
-        resolve()
-      })
-      .catch( reject )
-    })
-  }
-
-
-}else{
-  // inside browser-thread
-  ISOTerminal.addEventListener('emulator-started', function(e){
-    this.autorestore(e)
-    this.emit("autorestore-installed")
-  })
-
-  ISOTerminal.prototype.restore = async function(e){
-
-    const onGetItem = (err,stateBase64) => {
-      const askConfirm = () => {
-        if( window.localStorage.getItem("restorestate") == "true" ) return true
-        try{
-          const scene = document.querySelector('a-scene');
-          if( scene.is('ar-mode') ) scene.exitAR()
-          if( scene.is('vr-mode') ) scene.exitVR()
-        }catch(e){}
-        return confirm( "Continue old session?" )
-      }
-
-      if( stateBase64 && !err && document.location.hash.length < 2 && askConfirm() ){
-        this.noboot = true // see feat/boot.js
-        try{
-          this.worker.restore_state()
-          .then( () => {
-            // simulate / fastforward boot events
-            this.postBoot( () => {
-              // force redraw terminal issue
-              this.send("l")
-              setTimeout( () => this.send("l"), 200 )
-              //this.send("12")
-              this.emit("exec",["source /etc/profile.sh; hook wakeup\n"])
-              this.emit("restored")
-            })
-          })
-        }catch(e){ console.error(e) }
-      }
-    }
-
-    const doRestore = () => {
-
-      localforage.getItem("state", (err,stateBase64) => onGetItem(err,stateBase64) )
-
-      window.addEventListener("beforeunload", function (e) {
-        var confirmationMessage = "Sure you want to leave?\nTIP: enter 'save' to continue this session later";
-        (e || window.event).returnValue = confirmationMessage; //Gecko + IE
-        return confirmationMessage;                            //Webkit, Safari, Chrome
-      });
-
-    }
-
-    localforage.setDriver([
-      localforage.INDEXEDDB,
-      localforage.WEBSQL,
-      localforage.LOCALSTORAGE
-    ])
-    .then( () => doRestore() )
-
-  }
-
-  ISOTerminal.prototype.autorestore = ISOTerminal.prototype.restore // alias to launch during boot
-
-}
--- a/com/isoterminal/feat/boot.js
+++ b/com/isoterminal/feat/boot.js
@ -1,86 +0,0 @@
-ISOTerminal.addEventListener('ready', function(e){
-  setTimeout( () => this.boot(), 50 ) // allow other features/plugins to settle first (autorestore.js e.g.)
-})
-
-ISOTerminal.prototype.bootMenu = function(e){
-  this.boot.menu.selected = false // reset
-  const autobootURL = e && e.detail.bootMenuURL && document.location.hash.length > 1
-  const autoboot    = e && e.detail.bootMenu || autobootURL
-  if( !autoboot ){
-
-    let msg = '\n\r'
-    this.boot.menu.map( (m) => {
-      msg += `\r[36m${m.key})[0m ${m.title(this.opts)}\n`
-    })
-    msg += `\n\r[36menter choice>[0m `
-    this.send(msg)
-
-  }else{ // autoboot
-    if( this.term ){
-      this.term.handler( String(e.detail.bootMenu || e.detail.bootMenuURL).charAt(0) )
-      this.term.handler("\n")
-    }
-  }
-}
-
-ISOTerminal.addEventListener('bootMenu', function(e){this.bootMenu(e) })
-
-ISOTerminal.prototype.boot = async function(e){
-  // set environment
-  let env = [
-    `export LINES=${this.opts.rows}`,
-    `export COLUMNS=${this.opts.cols}`,
-    'export BROWSER=1',
-  ]
-  for ( let i in document.location ){
-    if( typeof document.location[i] == 'string' && !String(i).match(/(hash|search)/) ){
-      env.push( 'export '+String(i).toUpperCase()+'="'+decodeURIComponent( document.location[i]+'"') )
-    }
-  }
-
-  // we export the cached hash/query (because they might be gone due to remotestorage plugin)
-  if( this.boot.hash.charAt(2) == '&' ){ // strip bootoption
-    this.boot.hashExBoot = `#` + this.boot.hash.substr(3)
-  }
-  env.push( 'export HASH="'+decodeURIComponent( this.boot.hashExBoot || this.boot.hash )   +'"' )
-  env.push( 'export QUERY="'+decodeURIComponent( this.boot.query ) +'"' )
-  await this.worker.create_file("profile.browser", this.convert.toUint8Array( env.join('\n') ) )
-
-  if( this.serial_input == 0 ){
-    if( !this.noboot ){
-      this.send("source /etc/profile # \\o/ FOSS powa!\n")
-    }
-  }
-
-}
-
-ISOTerminal.prototype.boot.fromImage = false 
-ISOTerminal.prototype.boot.menu = []
-ISOTerminal.prototype.boot.hash = document.location.hash
-ISOTerminal.prototype.boot.query = document.location.search
-
-// here REPL's can be defined
-
-// REPL: iso
-if( typeof window.PromiseWorker != 'undefined' ){ // if xrsh v86 is able to run in  in worker 
-  ISOTerminal.prototype.boot.menu.push(
-    {
-      key: "1",
-      title: (opts) => `boot [31m${String(opts.iso || "").replace(/.*\//,'')}[0m Linux ❤️ `,
-      init: function(){ 
-
-        // hack to notify href clicks
-        Term.prototype.href = (a) => {
-          if( a.href ){
-            this.exec(`source /etc/profile.sh; hook href "${a.href}"`)
-          }
-          return false
-        }
-
-        this.bootISO() 
-      },
-      keyHandler: function(ch){ this.send(ch) }  // send to v86 webworker
-    }
-  )
-}
-
--- a/com/isoterminal/feat/httpfs.js
+++ b/com/isoterminal/feat/httpfs.js
@ -1,56 +0,0 @@
-if( typeof emulator != 'undefined' ){
-
-}else{
-
-  ISOTerminal.addEventListener('ready', function(e){
-
-    function getMimeType(file) {
-      const mimeTypes = {
-        jpg: 'image/jpeg',
-        jpeg: 'image/jpeg',
-        png: 'image/png',
-        mp4: 'video/mp4',
-        gif: 'image/gif',
-      };
-
-      const extension = file.split('.').pop().toLowerCase();
-      return mimeTypes[extension] || 'application/octet-stream'; // Fallback
-    }
-
-    // listen for http request to the filesystem ( file://host/path )
-    xhook.before( (request,callback) => {
-      console.log(request.url)
-      if (request.url.match(/^\/mnt\/.*/) ){
-        let response
-        let file     = request.url.replace(/^\/mnt\//,'')
-        let mimetype = getMimeType(file)
-        this.worker.read_file_world(file)
-        .then( (data) => {
-          if( data == null ) throw `/mnt/${file} does not exist in ISO filesystem`
-          let blob     = new Blob( [data], {type: getMimeType(file) })  // wrap Uint8Array into array
-          response = {
-              headers: new Headers({ 'Content-Type': getMimeType(file) }),
-              data,
-              url: file,
-              status: 200,
-              blob: () => new Promise( (resolve,reject) => resolve(blob) ),
-              arrayBuffer: blob.arrayBuffer
-          }
-          console.log("serving from iso filesystem: "+file)
-          console.log("*TODO* large files being served partially")
-          callback(response)
-        })
-        .catch( (e) => {
-            console.error(e)
-          response = new Response()
-          response.status = 404
-          callback(response)
-        })
-        return
-      }else{
-        callback()
-      }
-    })
-
-  })
-}   
--- a/com/isoterminal/feat/index.html.js
+++ b/com/isoterminal/feat/index.html.js
@ -1,42 +0,0 @@
-
-if( typeof emulator != 'undefined' ){
-  // inside worker-thread
-
-  this.listenIndexHTML = () => {
-    const file = "dev/browser/html"
-    emulator.readFromPipe( file, async (data) => {
-      const buf = await emulator.read_file( file )
-      const decoder = new TextDecoder('utf-8');
-      const html = decoder.decode(buf).replace(/^#!\/bin\/html/,'') // remove leftover shebangs if any
-      try{
-        this.postMessage({event:'runHTML',data:[html]})
-      }catch(e){ 
-        console.error(file)
-        console.error(e)
-      }
-    })
-  }
-    
-
-}else{
-  // inside browser-thread
-  
-  ISOTerminal.addEventListener('emulator-started', function(){
-    this.addEventListener('ready', async () => {
-      this.worker.listenIndexHTML()
-    })
-  })
-  
-  ISOTerminal.prototype.runHTML = function(html){
-    let $scene = document.querySelector("a-scene")
-    let $root = document.querySelector("a-entity#root")
-    if( !$root ){                          
-      $root = document.createElement("a-entity")
-      $root.id = "root"               
-      $scene.appendChild($root)
-    }                                                            
-    console.log(html)
-    $root.innerHTML = html
-  }
-
-}
--- a/com/isoterminal/feat/index.js.js
+++ b/com/isoterminal/feat/index.js.js
@ -1,30 +0,0 @@
-if( typeof emulator != 'undefined' ){
-  // inside worker-thread
-
-  // unix to js device
-  this.emulator.readFromPipe( 'dev/browser/js', async (data) => {
-    const buf = await emulator.read_file("dev/browser/js")
-    const decoder = new TextDecoder('utf-8');
-    const js = decoder.decode(buf).replace(/^#!\/bin\/js/,'') // remove leftover shebangs if any
-    try{
-      this.postMessage({event:'runJavascript',data:[js]})
-    }catch(e){ 
-      console.error(e)
-    }
-  })
-    
-
-}else{
-  // inside browser-thread
-
-  ISOTerminal.prototype.runJavascript = function(js){
-    let $root = document.querySelector("script#root")
-    if( !$root ){                          
-      $root = document.createElement("script")
-      $root.id = "root"               
-      document.body.appendChild($root)
-    }                                                            
-    $root.innerHTML = js
-  }
-
-}
--- a/com/isoterminal/feat/javascript.js
+++ b/com/isoterminal/feat/javascript.js
@ -1,71 +0,0 @@
-if( typeof emulator != 'undefined' ){
-  // inside worker-thread
-
-  // unix to js device
-  emulator.readFromPipe( 'dev/browser/js', async (data) => {
-    const convert = ISOTerminal.prototype.convert
-    const buf     = await this.emulator.read_file("dev/browser/js")
-    const script  = convert.Uint8ArrayToString(buf)
-    let PID=null
-    try{
-      if( script.match(/^PID/) ){ 
-        PID = script.match(/^PID=([0-9]+);/)[1] 
-      }
-      this.postMessage({event:'javascript-eval',data:{script,PID}})
-    }catch(e){ 
-      console.error(e)
-    }
-  })
-
-}else{
-  // inside browser-thread
- 
-
-  /* 
-   * here we're going to execute javascript in the browser,
-   * both a terrible and great idea depending on a corporate vs personal computing angle.
-   *
-   * if a function-string gets evaluated, and it returns a promise..then we assume async.
-   */
-  ISOTerminal.addEventListener('javascript-eval', async function(e){
-    const {script,PID} = e.detail
-    let res;
-    let error = false;
-
-    const output = (res,PID) => {
-      if( res && typeof res != 'string' ) res = JSON.stringify(res,null,2)
-      // update output to 9p with PID as filename (in /mnt/run)
-      if( PID ){
-        this.worker.update_file(`run/${PID}.exit`, error ? "1" : "0")
-        this.worker.update_file(`run/${PID}`, this.convert.toUint8Array(res) )
-      }
-    }
-
-    try{
-      let f = new Function(`${script}`);
-      res = f();
-      if( res && typeof res.then == 'function' ){ // if we got a promise
-        res.then( (res) => output(res,PID) )
-        res.catch( (e)  => output(e,PID) )
-      }else{ // normal sync function
-        output(res,PID)
-      }
-    }catch(err){
-      error = true
-      console.error(err)
-      console.dir(err)
-      res = "error: "+err.toString()
-
-      // try to figure out line *FIXME*
-      let line = err.stack.split("\n").find(e => e.includes("<anonymous>:") || e.includes("Function:"));
-      if( line ){
-        let lineIndex = (line.includes("<anonymous>:") && line.indexOf("<anonymous>:") + "<anonymous>:".length) ||  (line.includes("Function:") && line.indexOf("Function:") + "Function:".length);
-        let lnr = +line.substring(lineIndex, lineIndex + 1) - 2
-        res += script.split("\n")[lnr-1]
-      }else console.dir(script)
-      console.error(res)
-      output(res,PID)
-    }
-  })
-
-}
--- a/com/isoterminal/feat/jsconsole.js
+++ b/com/isoterminal/feat/jsconsole.js
@ -1,109 +0,0 @@
-ISOTerminal.prototype.redirectConsole = function(handler){
-   const log  = console._log = console.log;
-   const dir  = console._dir = console.dir;
-   const err  = console._error = console.error;
-   const warn = console._warn = console.warn;
-   const addLineFeeds = (str) => typeof str == 'string' ? str.replace(/\n/g,"\r\n") : str
-
-   console.log = (...args)=>{
-       const textArg = args[0];
-       handler( addLineFeeds(textArg) );
-       log.apply(log, args);
-   };
-   console.error = (...args)=>{
-       const textArg = args[0]
-       handler( addLineFeeds(textArg), '\x1b[31merror\x1b[0m');
-       err.apply(log, args);
-   };
-   console.dir = (...args)=>{
-       const textArg = args[0]
-       let str = JSON.stringify(textArg,null,2)+'\n'
-       handler( addLineFeeds(str) )
-       dir.apply(log, args);
-   };
-   console.warn = (...args)=>{
-       const textArg = args[0]
-       handler( addLineFeeds(textArg),'\x1b[38;5;208mwarn\x1b[0m');
-       err.apply(log, args);
-   };
-
-}
-
-ISOTerminal.prototype.enableConsole = function(opts){
-
-  opts = opts || {stdout:false}
-
-  this.redirectConsole( (str,prefix) => {
-    let _str = typeof str == 'string' ? str : JSON.stringify(str)
-    let finalStr = "";
-    prefix = prefix ? prefix+' ' : ''
-    String(_str).trim().split("\n").map( (line) => {
-      finalStr += `${opts.stdout ? '' : "\x1b[38;5;165m/dev/browser: \x1b[0m"}`+prefix+line+'\n'
-    })
-    if( opts.stdout ){
-      this.emit('serial-output-string', finalStr, "worker")
-    }else this.emit('append_file', ["/dev/browser/console",finalStr])
-    this.lastStr = finalStr
-  })
-
-  window.addEventListener('error', function(event) {
-    if( event.filename ){
-      console.error(event.filename+":"+event.lineno+":"+event.colno)
-      console.error(event.message);
-      console.error(event.error);
-    }else console.error(event)
-  });
-
-  window.addEventListener('unhandledrejection', function(event) {
-    console.error(event);
-  });
-
-  if( opts.stdout ){
-    window.menu = () => this.bootMenu()
-    this.emit('serial-output-string', "\n\n\r☑ initialized javascript console\n");
-    this.emit('serial-output-string', "\r☑ please use these functions to print:\n");
-    this.emit('serial-output-string', "\r└☑ console.log(\"foo\")\n");
-    this.emit('serial-output-string', "\r└☑ console.warn(\"foo\")\n");
-    this.emit('serial-output-string', "\r└☑ console.dir({foo:12})\n");
-    this.emit('serial-output-string', "\r└☑ console.error(\"foo\")\n");
-    this.emit('serial-output-string', "\r\n");
-    this.emit('serial-output-string', "\rtype 'menu()' to return to mainmenu");
-    this.emit('serial-output-string', "\r\n");
-  }
-}
-
-ISOTerminal.addEventListener('emulator-started', function(){
-  this.enableConsole()
-})
-
-ISOTerminal.addEventListener('init', function(){
-  this.addEventListener('enable-console', function(opts){
-    this.enableConsole(opts.detail)
-  })
-
-  // REPL: jsconsole
-  ISOTerminal.prototype.boot.menu.push(
-    {
-      key: "j",
-      title: (opts) => "just give me an javascript-console in WebXR instantly",
-      init: function(){ 
-        this.prompt = "\r[36m>[0m "
-        this.emit('enable-console',{stdout:true})
-        this.emit('status',"javascript console")
-        this.console = ""
-        setTimeout( () => {
-          this.send(this.prompt)
-        }, 100 )
-      },
-      keyHandler: function(ch){ 
-        this.send(ch)
-      },
-      cmdHandler: function(cmd){
-        this.send("\n\r")
-        eval(cmd)
-        setTimeout( () => this.send(this.prompt) ,10)  // because worker vs terminal
-      }
-    }
-  )
-
-})
--- a/com/isoterminal/feat/pastedrop.js
+++ b/com/isoterminal/feat/pastedrop.js
@ -1,48 +0,0 @@
-if( typeof emulator != 'undefined' ){
-  // inside worker-thread
-
-}else{
-  // inside browser-thread
-  //
-  ISOTerminal.prototype.pasteWriteFile = async function(data,type,filename){
-    this.pasteWriteFile.fileCount = this.pasteWriteFile.fileCount || 0
-    const file = `clipboard/`+ ( filename || `user-paste-${this.pasteWriteFile.fileCount}`)
-    await this.worker.create_file(file, data ) 
-    // run the xrsh hook
-    this.hook("clipboard", [ `/mnt/${file}`, type ] )
-    console.log("clipboard paste: /mnt/"+file)
-    this.pasteWriteFile.fileCount += 1
-  }
-
-  ISOTerminal.prototype.pasteFile = async function(data){
-    const {type,item,pastedText} = data
-    if( pastedText){
-      // the terminal handles this (pastes text)
-      // this.pasteWriteFile( this.convert.toUint8Array(pastedText) ,type, null, true)
-    }else{
-      const file = item.getAsFile();
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const arr = new Uint8Array(e.target.result)
-        this.pasteWriteFile( arr, type, file.name ); // or use readAsDataURL for images
-      };
-      reader.readAsArrayBuffer(file);
-    }
-  }
-
-  ISOTerminal.prototype.pasteInit = function(opts){
-      // bind upload input
-      const {instance, aEntity} = opts
-      const el = aEntity.el.dom.querySelector('#pastedrop') // upload input
-      el.addEventListener('change', (e) => {
-        const file = el.files[0];
-        const item = {...file, getAsFile: () => file } // pasteFile-event works with File objets
-        const data = { item, type: file.type }
-        this.emit( 'pasteFile', data, "worker" ) // impersonate as worker (as worker cannot handle File objet)
-      })
-  }
-
-  ISOTerminal.addEventListener('init', function(){
-    this.addEventListener('term_init', (opts) => this.pasteInit(opts.detail) )
-  })
-}
--- a/com/isoterminal/feat/remotekeyboard.js
+++ b/com/isoterminal/feat/remotekeyboard.js
@ -1,96 +0,0 @@
-ISOTerminal.prototype.enableRemoteKeyboard = function(opts){
-
-    let service = {
-      ready: false,
-      reset: (service) => {
-        service.ip = localStorage.getItem("keyboardIP") || ""
-        service.ip = service.ip.trim()
-        service.state = "need-ip"
-        service.attempts = 0
-      },
-      init: function init( mainmenu ){ 
-        this.emit('status',"")
-        this.emit('enable-console',{stdout:true})
-        service.reset(service)
-        setTimeout( () => {
-          const clearScreen = "[1;1H[2J\r"
-          this.send(clearScreen);
-          this.send(`\n\rfor instructions\n\rsee ${document.location.origin}/index.html#Remote%20keyboard\n\n\r`)
-          this.send("enter 'm' for mainmenu\n\n\r")
-          this.send("[36mkeyboard ip-address> [0m")
-          // autofill ip
-          if( service.ip ){
-            for( let i = 0; i < service.ip.length; i++ ) this.send(service.ip.charAt(i))
-          }
-        }, 100 )
-      },
-      server: (term) => {
-        try{
-          service.addr = `wss://${service.ip}:9090/`;
-          service.ws = new WebSocket(service.addr)
-          service.ws.addEventListener("error", console.error )
-          service.ws.addEventListener("open", (e) => {
-            if( service.state == 'listening' ){
-              this.send(`\n\rconnected! \\o/\n\r`)
-              this.bootMenu() 
-            }
-            service.state = 'receiving'
-          })
-          service.ws.addEventListener("close", () => {
-            service.attempts += 1
-            if( service.attempts > 3 && service.state == 'listening'){
-              service.reset(service)
-              this.send(`\n\roops..I did not detect any connection :/\n\r`)
-              localStorage.setItem("keyboardIP","") // reset ip 
-              this.bootMenu()
-            }else setTimeout( () => service.server(term), 1000 ) // retry connection
-          }) // retry on EOF
-          service.ws.onmessage = function(event) {
-              if( !event.data ) return
-              event.data.arrayBuffer().then( (buf) => {
-                const arr   = new Uint8Array(buf)
-                let string = Array.from(arr, byte => String.fromCharCode(byte)).join('')
-                term.term.handler(string)
-                service.state = 'receiving'
-                localStorage.setItem("keyboardIP",service.ip) // save ip for later
-              })
-          };
-        }catch(e){
-          console.error(e)
-          service.reset(service)
-          localStorage.setItem("keyboardIP","") // reset ip 
-          this.bootMenu()
-        }
-      }
-    }
-
-  // initialize REPL 
-  ISOTerminal.prototype.boot.menu.push(
-    {
-      key: "k",
-      title: (opts) => "connect a remote keyboard",
-      init: service.init,
-      keyHandler: function(ch){
-        this.send(ch)
-        if( service.state == 'need-ip'){
-          if( ch == 'm'){
-            this.send("\n\r")
-            this.bootMenu()
-          }else if( ch == '\n' || ch == '\r'){
-            service.server(this)
-            service.state = 'listening'
-            this.send("\n\rconnecting to "+service.addr)
-          }else{
-            service.ip = ch == '\b' ? service.ip.substr(0,this.service.ip.length-1) 
-                                    : service.ip + ch 
-          }
-        }
-      }
-    }
-  )
-}
-
-ISOTerminal.addEventListener('init', function(){
-  this.enableRemoteKeyboard()
-})
-
--- a/com/isoterminal/feat/remotestorage.js
+++ b/com/isoterminal/feat/remotestorage.js
@ -1,365 +0,0 @@
-/* Remote storage feature
- *
- * NOTE: this feature extends the localstorage functions.
- *       this file can be excluded without crippling the 
- *       core localstorage mechanism.
- */
-
-// see https://remotestorage.io/rs.js/docs/data-modules/
-ISOTerminal.prototype.remoteStorageModule = { 
-  name: 'xrsh', 
-  builder: function(privateClient, publicClient) {
-    return {
-      exports: {
-        add: function(data,opts) {
-          if( !data || !opts.filename || !opts.mimetype) throw 'webxr.add() needs filedata + filename + mimetype'
-          const client = opts.client = opts.public ? publicClient : privateClient;
-          return client.storeFile(opts.mimetype, opts.filename,data)
-        },
-
-        getListing: function(a,opts){
-          opts = opts || {}
-          const client = opts.public ? publicClient : privateClient;
-          return client.getListing(a)
-        },
-
-        getFile: function(file,opts){
-          opts = opts || {}
-          const client = opts.public ? publicClient : privateClient;
-          return client.getFile(file)
-        },
-
-        remove: function(file,opts){
-          opts = opts || {}
-          const client = opts.public ? publicClient : privateClient;
-          return client.remove(file)
-        }
-
-      }
-    }
-  }
-};
-
-// this is the HTML which we append to the remotestorage widget: 
-// https://remotestorage.io/rs.js/docs/getting-started/connect-widget.html
-const _rs_widget_html = `
-  <div class="form" id="remote">
-    <select class="remote" id="states"></select>
-    <button id="save">save</button>
-    &nbsp;
-    <a class="btn remote" href="https://inspektor.5apps.com/?path=xrsh%2F" style="background:#888" target="_blank">filemanager</a>
-    <div id="result"></div>
-  </div>
-  <div class="form" id="local" style="position:relative">
-    <hr>
-    <div class="header">WebBrowser session:</div>
-    <div style="text-align:right">
-      <button id="saveLocal">save</button>
-      <button id="restoreLocal">restore</button>
-    </div>
-  </div>
-  <!-- disabled for now -->
-  <div class="form" id="local" style="position:relative; display:none">
-    <hr>
-    <div class="header">File session:</div>
-    <div style="text-align:right">
-      <button id="saveLocalFile">save file</button>
-      <button id="restoreLocalFile">import file</button>
-    </div>
-  </div>
-
-  <style type="text/css">
-    #remotestorage-widget{
-      position:fixed;
-      top:0;
-      right:0;
-    }
-    #remotestorage-widget h1, 
-    #remotestorage-widget h2, 
-    #remotestorage-widget h3, 
-    #remotestorage-widget h4, 
-    #remotestorage-widget h5{
-      color:#222;
-    } 
-    #remotestorage-widget .rs-widget{
-      margin:25px;
-    }
-    #remotestorage-widget .rs-closed .form{
-      display:none !important;
-    }
-    #remotestorage-widget .form select#states{
-      padding: 5px;
-      margin-top: 10px;
-      margin-right: 10px;
-      border-radius: 5px;
-    }
-    #remotestorage-widget .form #result{
-      padding-top:10px;
-    }
-    #remotestorage-widget .form select,
-    #remotestorage-widget .form button,
-    #remotestorage-widget .form a{
-      height:35px;
-      margin-bottom:0;
-    }
-    #remotestorage-widget *{
-      font-size:15px;
-    }
-    #remotestorage-widget div.header{
-      position:absolute;
-      display:inline;
-      top:15px;
-      left:0;
-      font-weight:bold;
-    }
-    #remotestorage-widget .form .btn {
-      text-decoration: none;
-      color: white;
-      margin-top: 10px;
-      margin-bottom: 10px;
-      display: inline-block;
-      line-height: 15px;
-    }
-    #remotestorage-widget .form{
-      margin-top:10px;
-    }
-    #remotestorage-widget .btn:hover, 
-    #remotestorage-widget button:hover {
-      background:#CCC;
-    }
-  </style>
-`
-
-const widgetForm = function(opts){
-  let   el = document.querySelector("#remotestorage-widget select#states")
-  const $widget = document.querySelector("#remotestorage-widget .rs-widget")
-  const $result = document.querySelector("#remotestorage-widget #result")
-  if( !el ){
-
-    let div = document.createElement('div')
-    div.innerHTML = _rs_widget_html
-    $widget.appendChild(div)
-    $widget.querySelector("h3").innerText = "Click here to connect your storage"
-
-    el = $widget.querySelector("select#states")
-    el.addEventListener('change', () => {
-      if( el.options.selectedIndex == 0 ) return; // ignore default option
-      this.remoteStorage.widget.filename = el.value
-      opts.status = "loading..."
-      $widget.classList.add(["blink"])
-      this.remoteStorage.xrsh.getFile(el.value)
-      .then( (data,err) => {
-        this.restore({remotestorage:true, data:data.data})
-      })
-    })
-
-    this.setupStorageListeners($widget,opts)
-  }
-
-  this.updateStorageForm(el,$widget,$result,opts)
-}
-
-ISOTerminal.prototype.remoteStorageWidget = function(){
-  if( this.remoteStorageWidget.installed ) return // only do once
-  let apis = {
-    //dropbox: "ce876ce",
-    //googledrive: "c3983c3"
-  } 
-  const modules = [ this.remoteStorageModule ]
-  const remoteStorage = this.remoteStorage = new RemoteStorage({logging: true, modules })
-  remoteStorage.setApiKeys(apis)
-
-  remoteStorage.on('not-connected',   (e) => { 
-    this.remoteStorage.connected = false 
-    this.remoteStorage.widget.form({show:false})
-  })
-  remoteStorage.on('ready',           (e) => { })
-  remoteStorage.on('connected',       (e) => { 
-    this.remoteStorage.connected = true 
-    this.remoteStorage.widget.form({update:true,show:true})
-  })
-
-  remoteStorage.access.claim( `xrsh`, 'rw');           // our data dir
-  remoteStorage.caching.enable( `/xrsh/` )             // local-first, remotestorage-second
-  remoteStorage.caching.enable( `/public/xrsh/` )      // local-first, remotestorage-second
-
-  // create widget
-  let opts = {}
-  opts.modalBackdrop = false
-  opts.leaveOpen     = false
-  const widget = remoteStorage.widget = new window.Widget(remoteStorage, opts)
-  widget.attach();
-  widget.form = widgetForm.bind(this)
-
-  this.remoteStorageWidget.installed = true
-}
-
-ISOTerminal.prototype.setupStorageListeners = function($widget,opts){
-
-  this.addEventListener("ready", () => {
-    opts.loading = false 
-    opts.status = "session loaded"
-  })
-
-  // setup events
-  $widget.querySelector("button#save").addEventListener("click", () => {
-    this.save({remotestorage:true}) 
-  })
-  $widget.querySelector("button#saveLocal").addEventListener("click", async () => {
-    if( confirm("save current session?") ){
-      $widget.classList.add(['blink'])
-      await this.worker.save_state()
-      $widget.classList.remove(['blink'])
-      alert("succesfully saved session")
-    }
-  })
-  $widget.querySelector("button#restoreLocal").addEventListener("click", async () => {
-    this.restore({localstorage:true})
-  })
-  $widget.querySelector("button#saveLocalFile").addEventListener("click", () => {
-    alert("saveFile")
-  })
-  $widget.querySelector("button#restoreLocalFile").addEventListener("click", () => {
-    alert("saveFile")
-  })
-  $widget.addEventListener("click", () => this.remoteStorage.widget.open() )
-  this.addEventListener("restored", () => this.remoteStorage.widget.form({loading:false, status:"session restored"}) )
-}
-
-ISOTerminal.prototype.updateStorageForm = function(el,$widget,$result,opts){
-
-  if( typeof opts.show != 'undefined' ){
-    $widget.querySelector('.form#remote').style.display = opts.show ? 'block' : 'none' 
-  }
-  
-  if( typeof opts.status != 'undefined'){
-    $result.innerText = opts.status
-  }
-
-  if( opts.public ){
-    const link = this.remoteStorage.remote.href + '/public/xrsh/' + this.remoteStorage.widget.filename 
-    const linkWebView = document.location.href.replace(/(\?|#).*/,'') + `#1&img=${link}` 
-    $result.innerHTML += `<br><a class="btn" href="${linkWebView}" target="_blank">public weblink</a>`
-  }
-
-  if( typeof opts.loading != 'undefined' ){
-      $widget.classList[ opts.loading ? 'add' : 'remove' ](["blink"]) 
-  }
-
-  if( opts.update ){
-
-    const createOption = (opt) => {
-      let option = document.createElement("option")
-      option.value = opt.value
-      option.innerText = opt.name || opt.value
-      el.appendChild(option)
-    }
-
-    el.innerHTML = ''
-    createOption({value:"-- snapshots --"})
-    this.remoteStorage.xrsh.getListing()
-    .then( (data,err) => {
-      for( let file in data ){
-        createOption({value:file})
-      }
-    })
-
-  }
-}
-
-const requireFiles = () => AFRAME.utils.require({remotestorageWidget:"assets/aframe-remotestorage.min.js"})
-const getForage    = () => localforage.setDriver([
-                            localforage.INDEXEDDB,
-                            localforage.WEBSQL,
-                            localforage.LOCALSTORAGE
-                          ])
-
-// we extend the autorestore feature at the init-event 
-ISOTerminal.addEventListener('init', function(e){
-
-  const decorateSave = () => {
-
-    let localSave = this.save
-
-    this.save = async (opts) => {
-      requireFiles()
-      .then( getForage )
-      .then( async () => {
-       
-        if( opts.localstorage ){
-          this.save.localstorage(opts) // default behaviour
-        }
-
-        this.remoteStorageWidget()
-
-        if( opts.remotestorage ){
-          this.remoteStorage.widget.open() // force open dialog
-
-          let filename = String(this.remoteStorage.widget.filename || "snapshot").replace(/\.bin/,'')
-          filename = prompt("please name your snapshot:", filename )
-          filename = filename.replace(/\.bin*/,'') + '.bin'
-
-          // make it public or not (disabled for now as it does not work flawlessly)
-          const public = false // confirm('create a public link?') 
-          this.remoteStorage.widget.filename = filename
-
-          this.remoteStorage.widget.form({loading:true,status: "saving.."})  
-
-          await this.worker.save_state()
-          localforage.getItem("state", async (err,stateBase64) => {
-            this.remoteStorage.xrsh.add( stateBase64, {filename, mimetype: 'application/x-v86-base64', public})
-            .then( () => {
-              console.log("saved to remotestorage") 
-              setTimeout( 
-                () => this.remoteStorage.widget.form({update:true, loading:false, status:"saved succesfully", public})
-              ,500 )
-            })
-            .catch( console.error )
-          })
-        }
-
-      })
-    }
-    this.save.localstorage = localSave 
-  }
-
-  const decorateRestore = () => {
-
-    let localRestore = this.restore 
-
-    this.restore = async (opts) => {
-      requireFiles()
-      .then( getForage )
-      .then( async () => {
-
-        document.querySelector("#remotestorage-widget .rs-widget").classList.add(['blink'])
-        if( opts.localstorage ){
-          this.restore.localstorage.apply(this,opts) // default behaviour
-        }
-        if( opts.remotestorage ){
-          localforage.setItem( "state", opts.data )
-          .then( () => this.restore.localstorage.call(this,opts) ) // now trigger default behaviour
-        }
-
-      })
-    }
-    this.restore.localstorage = localRestore
-    this.autorestore = this.restore // reroute automapping
-  }
-
-  // decorate save() and restore() of autorestore.js after it's declared (hence the setTimeout)
-  this.addEventListener('autorestore-installed', () => {
-    decorateSave()
-    decorateRestore()
-  })
-
-})
-
-// decorate autorestore
-const autorestoreLocalStorage = ISOTerminal.prototype.autorestore;
-ISOTerminal.prototype.autorestore = function(data){
-  requireFiles().then( async () => {
-    this.remoteStorageWidget()
-  })
-}
-
--- a/com/isoterminal/feat/screenbuttons.js
+++ b/com/isoterminal/feat/screenbuttons.js
@ -1,13 +0,0 @@
-ISOTerminal.addEventListener('ready', function(){
-  this.screenButtonsCreate()
-})
-
-ISOTerminal.prototype.screenButtonsCreate = function(){
-  let el = document.createElement("a-plane")
-  el.setAttribute("height","1")
-  el.setAttribute("width","1")
-  el.setAttribute("scale","0.1 0.07 1")
-  el.setAttribute("position", "-0.326 -0.270 0")
-  this.instance.appendChild(el)
-}
-
--- a/com/isoterminal/feat/term.js
+++ b/com/isoterminal/feat/term.js
@ -1,120 +0,0 @@
-ISOTerminal.addEventListener('init', function(){
-  this.TermInit()
-})
-
-ISOTerminal.prototype.TermInit = function(){
-
-  const setupTerm = (opts) => {
-    if( !opts ) return
-    const {instance, aEntity} = opts
-    const el = aEntity.el.dom.querySelector('#term')
-    opts.termOpts = {
-      cols: aEntity.cols, 
-      rows: aEntity.rows,
-      el_or_id: el,
-      scrollback: aEntity.rows*3, 
-      fontSize: null,
-      //rainbow: [Term.COLOR_MAGENTA, Term.COLOR_CYAN ],
-      isWebXRKeyboard: () => AFRAME.scenes[0].renderer.xr.isPresenting  && AFRAME.scenes[0].renderer.xr.getSession().isSystemKeyboardSupported, // naive way
-      //map: {
-      //  'ArrowRight': { ch: false, ctrl: '\x1b\x66' },  // this triggers ash-shell forward-word
-      //  'ArrowLeft':  { ch: false, ctrl: '\x1b\x62' }   //                         backward-word
-      //}
-    }
-
-    // patch Term-class
-    Term.prototype.move_textarea = function(){} /* *TODO* *FIXME* does not work in winbox */
-
-    Term.prototype.keyDownHandler = function(original){
-      return function (e){
-        if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
-          return true; // bubble up to pasteHandler (see pastedrop.js)
-        }
-        original.apply(this,[e])
-      }
-    }( Term.prototype.keyDownHandler )
-
-    this.term = new Term( opts.termOpts )
-    Term.prototype.href = (a) => true
-    this.term.colors = [
-        /* normal */
-        "#000000",
-        "#2FA",
-        "#7700ff",
-        "#555555",
-        "#0000ff",
-        "#aa00aa",
-        "#ff00aa",
-        "#aaaaaa",
-        /* bright */
-        "#555555",
-        "#ff5555",
-        "#2CF",
-        "#aa00ff",
-        "#5555ff",
-        "#ff55ff",
-        "#55ffff",
-        "#ffffff" 
-    ];
-    this.term.open(el)
-    this.term.el = el
-
-
-    // this is the default REPL
-    // please do not edit or replace this
-    // but instead extend/override ISOTerminal.prototype.boot.menu
-    // as demonstrated in index.html
-    this.term.setKeyHandler( (ch) => {
-      let erase     = false
-      const isEnter = ch == '\n' || ch == '\r'
-      if( ch == '\x7F' ){
-        ch = "\b \b" // why does write() not just support \x7F ?
-        erase = true
-      }
-      if( this.boot.menu.selected ){
-        this.boot.menu.selected.keyHandler.call(this,ch) 
-        if( isEnter ){ 
-          if( this.boot.menu.selected.cmdHandler ){
-            this.boot.menu.selected.cmdHandler.call(this,this.lastCmd)
-          }
-          this.lastCmd = ""
-        }
-      }else if( isEnter ){ 
-        let menuitem = this.boot.menu.find( (m) => m.key == this.lastChar )
-        if( menuitem ){
-          this.boot.menu.selected = menuitem
-          this.lastCmd = ""
-          menuitem.init.call(this, () => {
-            this.term.write("\n\r")
-            this.bootMenu() 
-          })
-        }
-      }else{
-        ch.split("").map( (ch) => this.term.write( ch ) )
-      }
-      if( !erase ){
-        this.lastChar = ch
-        this.lastCmd  = this.lastCmd ? this.lastCmd + ch : ch
-      }else this.lastCmd = this.lastCmd ? this.lastCmd.substr(0, this.lastCmd.length-1) : ""
-    })
-
-    aEntity.el.addEventListener('focus', () => {
-      let textarea = el.querySelector("textarea")
-      textarea.focus()
-      if( document.activeElement != textarea ) textarea.focus() 
-    })
-    aEntity.el.addEventListener('serial-output-string', (e) => {
-      let msg = e.detail
-      this.term.write(msg)
-    })
-    //aEntity.term.emit('initTerm',this)
-    //aEntity.el.addEventListener('focus', () => this.vt100.focus() )
-
-    //aEntity.el.addEventListener('serial-output-string', (e) => {
-    //  this.vt100.write(e.detail)
-    //})
-
-  }
-
-  this.addEventListener('term_init', (opts) => setupTerm(opts.detail) )
-}
--- a/com/isoterminal/images/buildroot-bzimage.bin
+++ b/com/isoterminal/images/buildroot-bzimage.bin
--- a/com/isoterminal/localforage.js
+++ b/com/isoterminal/localforage.js
--- a/com/isoterminal/mnt/alert
+++ b/com/isoterminal/mnt/alert
@ -0,0 +1,2 @@
+#!/bin/sh
+jsh alert "$1"
--- a/com/isoterminal/mnt/confirm
+++ b/com/isoterminal/mnt/confirm
@ -0,0 +1,10 @@
+#!/bin/sh
+test -f /mnt/V86 && {
+  jsh confirm $1 $2 
+}
+
+test -f /mnt/V86 || {
+  read -p "$(printf "\033[0m")[?] [38;5;165m$1 [y/n] $(printf "\033[0m")" y
+  test $y = y && echo true && exit
+  echo false
+}
--- a/com/isoterminal/mnt/gui
+++ b/com/isoterminal/mnt/gui
@ -0,0 +1,7 @@
+PS3="Enter a number: "
+
+select character in Sheldon Leonard Penny Howard Raj
+do
+    echo "Selected character: $character"
+    echo "Selected number: $REPLY"
+done
--- a/com/isoterminal/mnt/js
+++ b/com/isoterminal/mnt/js
@ -1,31 +1,5 @@
 #!/bin/sh
-PID=$$
-test -z "$1" && { echo "Usage: js 'somefunction(1)'"; exit 0; }
+flock /dev/browser/js -c "echo '$*' > /dev/browser/js; cat /dev/browser/js"

-test -n "$BROWSER" || { alert warning "/dev/browser not active (are you running outside of v86?)"; }
-javascript="$*"
-
-# if we are run as shebang, use the file as input
-test -f "$1" && {
-  javascript="args = String('$*').split(' '); $(cat $1 | tail +2)"
-}
-
-# below is not ideal
-# first I tried /dev/ttyS* https://github.com/copy/v86/issues/530
-# and differentiate processes by prefixing output by PID's 
-# to parse it later with AWK, but it was very hairy
-
-OUTPUT=/mnt/$PID
-echo -n "PID=$PID; $javascript" > /dev/browser/js
-sleep 0.1
-test -f $OUTPUT && {
-  cat $OUTPUT
-  rm $OUTPUT
-}
-
-
-# should we use flock, an awesome way to make processes read/write the same file
-# while preventing 1001 concurrency issues?
-# attempt:
-#
-# flock /dev/browser/js -c "echo \"$javascript\" > /dev/browser/js"
+# we use flock, an awesome way to make processes read/write the same file
+# whilr preventing 1001 concurrency issues
--- a/com/isoterminal/mnt/jsh
+++ b/com/isoterminal/mnt/jsh
@ -3,42 +3,15 @@
 #         
 # 'jsh prompt question answer' executes: js prompt('question','answer') )

-source /mnt/profile.sh
-
 to_js(){
  printf "%s(" "$1"
  shift
  for arg in "$@"; do
-    case "$arg" in
-      (*[\.0-9]*) 
-        printf '%s,' "$arg"
-        ;;
-      (*)
-	printf '"%s",' "$arg"
-        ;;
-    esac
+    printf '"%s",' "$arg"
  done
  printf ")\n"
 }

-# run argument as js
-test -z "$1" || {
-  func=$(to_js "$@")
-  func=${func/,)/)}
-  js "return $func"
-  hook "$@"
-  exit 0
-}
-
-# otherwise start repl
-echo "jsh> type 'exit' or CTRL-C to quit"
-echo "jsh> HINT: to run alert('foo') outside this REPL, run 'jsh alert foo'"
-echo "jsh>"
-while true; do
-  echo -n -e "\n$(printf "\033[0m")jsh> $(printf "\033[0m")"
-  read line
-  test "$line" = exit && exit
-  js "$line"
-done
-
-
+func=$(to_js "$@")
+func=${func/,)/)}
+/mnt/js "$func"
--- a/com/isoterminal/mnt/motd
+++ b/com/isoterminal/mnt/motd
@ -5,12 +5,11 @@
 [38;5;129m _ _   /     \  |    |   \/        \    Y    / _ _ _ _ _ _ _
 [38;5;165m . .  /___/\  \ |____|_  /_______  /\___|_  /. . . . . . . .
 [38;5;201m . . . . . .\_/. . . . \/ . . . .\/ . . _ \/ . . . . . . . .
-[38;5;165m ▬▬▬▬ https://xrsh.isvery.ninja ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+[38;5;165m ▬ ▬ ▬ https://xrsh.isvery.ninja ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬ ▬
+[38;5;93m . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 

- [38;5;165mOpen, local-first, unix hackable & selfcontained XR apps.
+ [38;5;165mOpen, local-first, hackable & selfcontained XR apps.

- credits:  NLnet           | @nlnet@nlnet.nl https://nlnet.nl/project
-           all FOSS devs   | copy.sh (v86) aframe.io (AFRAME)
-           Leon van Kammen | @lvk@mastodon.online
-           Fabien Benetou  | @utopiah@mastodon.pirateparty.be 
+ credits:  all FOSS devs | @lvk@mastodon.online 
+           copy.sh (v86) | @utopiah@mastodon.pirateparty.be 

--- a/com/isoterminal/mnt/profile
+++ b/com/isoterminal/mnt/profile
@ -1,41 +1,29 @@
-# source URL data from v86 (file created by v86 during boot)
-test -f /mnt/profile.browser && source /mnt/profile.browser
+install_xrsh(){
+  chmod +x /mnt/confirm /mnt/prompt /mnt/alert /mnt/js*

-# source xrsh env
-source /mnt/profile.xrsh
+  setup_browser_dev(){
+    mkdir -p /mnt/dev/browser
+    touch /mnt/dev/browser/js
+    touch /mnt/dev/browser/html
+    ln -s /mnt/dev/browser /dev/browser
+    test -f /etc/profile && rm /etc/profile
+    ln -s /mnt/profile /etc/profile
+  }

-# source shell functions
-source /mnt/profile.sh
-
-# source js functions 
-./.profile.js
-
-## forward not-found commands to javascript (via jsh)
-command_not_found_handle(){
-  echo "[!] '$1' not found, did you mean $1(...) (javascript?)"
-  test -n "$ONBOARDING" && echo "[i] type 'help' for handy commands"
-  test -n "$ONBOARDING" || help
+  setup_browser_dev
 }

-help(){
-  echo ""
-  echo 'TIPS'
-  echo '----'
-  echo 'js run                ' "type 'js 'alert(\"hello\")'"
-  echo 'js console.log:       ' "type 'console document.baseURI"
-  echo 'js function as cmd:   ' "type 'alias $1=\"jsh $1\"' to run '$1 yo' as $1('yo')"
-  echo 'js inspect:           ' "type 'js \"return document.baseURI\"'"
-  echo 'js console disable:   ' "type 'echo 0 > /dev/browser/console.tty' to enable"
-  echo 'js capture console:   ' "type 'tail -f /dev/browser/console'"
-  echo 'jsh<->sh hooks:       ' "type 'chmod +x ~/hook.d/*/* && alert helloworld'"
-  echo 'include file into page' "type 'require <url.js|css>'"
-  echo 'create AFRAME a-entity' "type 'a_entity <componentname> [...]"
-  ONBOARDING=1
+test -d /dev/browser || install_xrsh
+
+test -f /mnt/V86 && {
+  mount -a
+  udhcpc 1>>/var/log/network.log 2>>/var/log/network.log & 
+  echo 0 > /proc/sys/kernel/printk
 }

 resize
-test $HOSTNAME = localhost || clear
+#clear 
 cat /mnt/motd
-export PATH=$PATH:/mnt:~/bin
-export PS1="\n\[\033[38;5;57m\]x\[\033[38;5;93m\]r\[\033[38;5;129m\]s\[\033[38;5;165m\]h \[\033[38;5;201m\]# \[\033[0m\]"
+export PATH=$PATH:/mnt
+export PS1="\n[38;5;57mx[38;5;93mr[38;5;129ms[38;5;165mh [38;5;201m# \033[0m"

--- a/com/isoterminal/mnt/profile.js
+++ b/com/isoterminal/mnt/profile.js
@ -1,6 +0,0 @@
-#!/bin/js
-
-window.helloworld = function(){
-  alert("hello world")
-  return "hello world"
-}
--- a/com/isoterminal/mnt/profile.sh
+++ b/com/isoterminal/mnt/profile.sh
@ -1,57 +0,0 @@
-hook(){
-  test -z "$1" && { echo "usage: hook <cmd_or_jsfunction> [args]"; return 0; } 
-  cmd=$1
-  shift 
-  test -d ~/hook.d/$cmd && {
-    find ~/hook.d/$cmd/ -type f -executable | while read hook; do 
-      { $hook "$@" || true; } |  awk '{ gsub(/\/root\/\//,"",$1); $1 = sprintf("%-40s", $1)} 1'
-    done
-  }
-}
-
-alert(){
-  test -z "$1" && { echo "usage: alert <title> <message>"; return 0; } 
-  title=$1
-  test -z "$1" || shift
-  msg="$*"
-  printf "[38;5;165m%s \033[0m%s\n" "$title" "$msg"
-  hook alert $title "$msg" 
-}
-
-confirm(){
-  test -z "$1" && { echo "usage: confirm <question>"; return 0; } 
-  read -p "$(printf "\033[0m")[?] [38;5;165m$1 [y/n] $(printf "\033[0m")" y
-  test $y = y && echo true && return 0
-  test $y = y || echo false 
-  hook confirm $1 $y
-}
-
-prompt(){
-  test -z "$1" && { echo "usage: prompt <question> [answer_default]"; return 0; } 
-  test -n "$2" && answer="[$2] " && answer_fallback="$2"
-  read -p "$(printf "\033[0m")[?] [38;5;165m$1: $answer $(printf "\033[0m")" answer
-  test -z "$answer" && answer="$answer_fallback"
-  echo "$answer"
-  hook prompt $1 $answer
-}
-
-console(){
-  js 'return '$1
-}
-
-require(){
-  file=$(basename "$1")
-  js '(async () => {
-    await AFRAME.utils.require({"'$file'": "'$1'"})
-  })()'
-}
-
-a_entity(){
-  code="let el = document.createElement('a-entity')"
-  for i in "$@"; do 
-    code="$code;\nel.setAttribute('$i','')\n"; 
-  done
-  code="document.querySelector('a-scene').appendChild(el)"
-  echo "$code"
-  js "$code"
-}
--- a/com/isoterminal/mnt/profile.xrsh
+++ b/com/isoterminal/mnt/profile.xrsh
@ -1,63 +0,0 @@
-#!/bin/sh
-
-test -d /dev/browser || {
-
-  setup_binaries(){
-    for bin in /mnt/js* /mnt/v86pipe /mnt/xrsh; do 
-      chmod +x $bin
-      ln -s $bin /bin/.
-    done
-  }
-
-  setup_links(){
-    ln -s /mnt/profile ~/.profile
-    ln -s /mnt/profile.js ~/.profile.js
-    ln -s /mnt/profile.browser ~/.profile.browser
-    ln -s /mnt/profile.sh ~/.profile.sh
-    ln -s /mnt/motd ~/.motd 
-    ln -s ~/.profile.js ~/index.js
-    chmod +x ~/.profile.js
-  }
-
-  setup_browser_dev(){
-    mkdir -p /mnt/dev/browser
-    touch /mnt/dev/browser/js
-    touch /mnt/console.tty
-    ln -s /mnt/dev/browser /dev/browser
-    # emulator.write_file() only writes to /mnt/. :(
-    # should be in /proc, but v86 gives 'no such file or dir' when creating it there
-    ln -s /mnt/console.tty /dev/browser/console.tty 
-    echo 1 > /dev/browser/console.tty
-    touch /mnt/console    && ln -s /mnt/console /dev/browser/console
-    touch /mnt/index.html && ln -s /mnt/index.html /dev/browser/index.html
-    ln -s /dev/browser/index.html ~/index.html
-
-    test -f /etc/profile && rm /etc/profile
-    ln -s /mnt/profile /etc/profile
-  }
-
-  setup_hook_dirs(){ # see /mnt/hook for usage
-    mkdir ~/bin
-    mkdir -p ~/hook.d/alert  
-    echo -e "#!/bin/sh\necho hook.d/alert/yo: yo \$*"                                   > ~/hook.d/alert/yo 
-    echo -e "#!/bin/js\nstr = \"hook.d/alert/yo.js yo \"+args.slice(1).join(' ')\nalert(str)\nreturn str" > ~/hook.d/alert/yo.js
-    echo -e "#!/usr/bin/env lua\nprint(\"hook.d/alert/yo.lua: yo \" .. arg[1])"         > ~/hook.d/alert/yo.lua
-    echo -e "#!/usr/bin/awk -f\nBEGIN{\n\tprint \"hook.d/alert/yo.awk: yo \" ARGV[1]\n}" > ~/hook.d/alert/yo.awk
-    echo -e "#!/bin/sh\necho hello \$*"                                                 > ~/bin/hello 
-    chmod +x ~/bin/hello
-  }
-
-  setup_network(){
-    test -n "$BROWSER" || return 0
-    #mount -a
-    udhcpc 1>>/var/log/network.log 2>>/var/log/network.log & 
-    echo 0 > /proc/sys/kernel/printk
-  }
-
-  setup_binaries
-  setup_browser_dev
-  setup_hook_dirs
-  setup_links
-  setup_network
-
-}
--- a/com/isoterminal/mnt/prompt
+++ b/com/isoterminal/mnt/prompt
@ -0,0 +1,9 @@
+#!/bin/sh
+test -f /mnt/V86 && {
+  jsh prompt "$1" "$2" 
+}
+
+test -f /mnt/V86 || {
+  read -p "$(printf "\033[0m")[?] [38;5;165m$1: $(printf "\033[0m")" answer
+  echo "$answer"
+}
--- a/com/isoterminal/mnt/test.awk
+++ b/com/isoterminal/mnt/test.awk
@ -0,0 +1,26 @@
+#!/bin/awk -f
+
+BEGIN {
+    for (i = 1; i < ARGC; i++) {
+        options[i] = ARGV[i]
+    }
+    ARGC = 0
+    selected = 1
+    n = length(options)
+
+    while (1) {
+	printf "\r                                              "
+        for (i = 1; i <= n; i++) {
+            if (i == selected) 
+                printf "\033[44m%s\033[0m ", options[i]
+            else 
+                printf "%s ", options[i]
+        }
+        if (c == 0) {
+            getline dir < "/dev/stdin"
+	    print dir
+            if (dir == "up" && selected > 1) selected--
+            if (dir == "down" && selected < n) selected++
+        }
+    }
+}
--- a/com/isoterminal/mnt/v86pipe
+++ b/com/isoterminal/mnt/v86pipe
@ -1,30 +0,0 @@
-#!/bin/sh
-#
-# this daemon allows 'tail -f' on v86 files (which don't persist inode when updated
-# via javascript)
-# more info see: https://github.com/copy/v86/issues/1140
-#
-# Hopefully as V86 (or my understanding of it) matures, this will be no longer needed
-
-test -z $2 && { echo "usage: v86pipe <logfile> <namedpipe>"; exit 0; }
-
-# Start reading from the last line in the log file
-last_size=0
-LOG_FILE=$1
-LOG_PIPE=$2
-
-test -f $LOG_FILE || touch $LOG_FILE
-test -p $LOG_PIPE || mkfifo $LOG_PIPE
-
-while true; do
-    # Get the current size of the file using wc -c (count bytes)
-    current_size=$(wc -c < $LOG_FILE)
-    test $current_size = $last_size || {
-      cat $LOG_FILE > $LOG_PIPE
-      truncate -s 0 $LOG_FILE
-    }
-    last_size=$current_size
-
-    # Sleep for a moment to avoid excessive CPU usage
-    sleep 0.2
-done
--- a/com/isoterminal/term.js
+++ b/com/isoterminal/term.js
--- a/com/isoterminal/worker.js
+++ b/com/isoterminal/worker.js
@ -1,134 +0,0 @@
-importScripts("libv86.js");
-importScripts("ISOTerminal.js")  // we don't instance it again here (just use its functions)
-
-this.runISO = async function(opts){
-  this.opts = opts
- if( opts.debug ) console.dir(opts)
-
-  if( opts.cdrom   && !opts.cdrom.url.match(/^http/) ) opts.cdrom.url   = "../../"+opts.cdrom.url 
-  if( opts.bzimage && !opts.cdrom.url.match(/^http/) ) opts.bzimage.url = "../../"+opts.bzimage.url 
-
-  let emulator = this.emulator = new V86(opts); 
-  console.log("[worker.js] started emulator")
-
-  // event forwarding
-  emulator.buf0 = {}
-  emulator.buf1 = {}
-  emulator.buf2 = {}
-
-  emulator.add_listener("serial0-output-byte", function(byte){
-    ISOTerminal.prototype.bufferOutput(byte, (str) => { // we buffer to prevent framerate dropping
-      if( !str ) return
-      this.postMessage({event:"serial0-output-string",data:str});
-    }, opts.bufferLatency, emulator.buf0 )
-  }.bind(this));
-
-  emulator.add_listener("serial1-output-byte", function(byte){
-    ISOTerminal.prototype.bufferOutput(byte, (str) => { // we buffer to prevent framerate dropping
-      if( !str ) return
-      this.postMessage({event:"serial1-output-string",data:str});
-    }, opts.bufferLatency, emulator.buf1 )
-  }.bind(this));
-
-  emulator.add_listener("serial2-output-byte", function(byte){
-    ISOTerminal.prototype.bufferOutput(byte, (str) => { // we buffer to prevent framerate dropping
-      if( !str ) return
-      this.postMessage({event:"serial2-output-string",data:str});
-    }, opts.bufferLatency, emulator.buf2 )
-  }.bind(this));
-
-  emulator.add_listener("emulator-started", function(){
-    importScripts("feat/9pfs_utils.js")
-    this.postMessage({event:"emulator-started",data:false});
-    if( opts.img ) this.restoreImage(opts)
-  }.bind(this));
-
-  /* 
-   * forward events/functions so non-worker world can reach them
-   */
- 
-  // stripping '/mnt' is needed (the 9p mounted fs does not know about this)
-  const stripMountDir  = (arr) => {
-    arr[0] = String(arr[0]).replace(/^\/mnt/,'')
-    return arr
-  }
-  this.create_file          = async function(){ return emulator.create_file.apply(emulator, stripMountDir(arguments[0]) ) }
-  this.create_file_from_url = async function(){ return emulator.fs9p.create_file_from_url.apply(emulator, stripMountDir(arguments[0]) ) }
-  this.read_file            = async function(){ return emulator.read_file.apply(emulator, stripMountDir(arguments[0]) )   }
-  this.read_file_world      = async function(){ return emulator.fs9p.read_file_world.apply(emulator.fs9p, stripMountDir(arguments[0]) )   }
-  this.append_file          = async function(){ emulator.fs9p.append_file.apply(emulator.fs9p, stripMountDir(arguments[0])) }
-  this.update_file          = async function(){ emulator.fs9p.update_file.apply(emulator.fs9p, stripMountDir(arguments[0])) }
-
-  // filename will be read from 9pfs: "/mnt/"+filename
-  emulator.readFromPipe = function(filename,cb){
-    emulator.add_listener("9p-write-end", async (opts) => {
-      if ( opts[0] == filename.replace(/.*\//,'') ){
-        cb()
-      }
-    })
-  }
-
-  importScripts("feat/javascript.js")
-  importScripts("feat/index.html.js")
-  importScripts("feat/autorestore.js")
-
-  if( opts.overlayfs ) await this.addOverlayFS(opts)
-
-}
-/* 
- * forward events/functions so non-worker world can reach them
- */
-
-this['serial0-input'] = function(c){ emulator.bus.send( 'serial0-input', c) } // to /dev/ttyS0
-this['serial1-input'] = function(c){ emulator.bus.send( 'serial1-input', c) } // to /dev/ttyS1
-this['serial2-input'] = function(c){ emulator.bus.send( 'serial2-input', c) } // to /dev/ttyS2
-
-this.onmessage = async function(e){
-  let {event,data} = e.data
-  if( this[event] ){
-    if( this.opts?.debug ) console.log(`[worker.js] this.${event}(${JSON.stringify(data).substr(0,60)})`)
-    try{
-      let result = await this[event](data)
-      if( data.promiseId ){ // auto-callback to ISOTerminal.worker.promise(...)
-        this.postMessage({event,data: {...data,result}})
-      } 
-    }catch(e){
-      if( data.promiseId ){ // auto-callback to ISOTerminal.worker.promise(...)
-        this.postMessage({event,data: {...data,error:e}})
-      } 
-    }
-  }
-}
-
-this.addOverlayFS = async function(opts){
-  return new Promise( (resolve,reject) => {
-    // OVERLAY FS *FIXME*
-    if( opts.overlayfs ){
-      fetch(opts.overlayfs)
-      .then( (f) => {
-        f.arrayBuffer().then( (buf) => {
-          let filename = opts.overlayfs.match(/\.zip$/) ? 'overlayfs.zip' : '.env' 
-          this.emulator.create_file( filename, new Uint8Array(buf) )
-        })
-      })
-    }
-  })
-}
-
-this.restoreImage = function(opts){
-
-  this.postMessage({event:"serial0-output-string",data:`\n\r[!] loading session image:\n\r[!] ${opts.img}\n\r[!] please wait...internet speed matters here..\n`})
-
-  fetch( opts.img )
-  .then( (res) => {
-    this.postMessage({event:"serial0-output-string",data:`\r[v] image downloaded..restoring..\n\r`})
-    return res
-  })
-  .then( (res) => res.arrayBuffer() )
-  .then( async (buf) => {
-    await this.emulator.restore_state(buf) 
-    this.postMessage({event:"serial0-output-string",data:`[v] restored\n\r`})
-
-  })
-  .catch( console.error )
-}
--- a/com/isoterminal/xrsh.iso
+++ b/com/isoterminal/xrsh.iso
@ -0,0 +1 @@
+buildroot.iso
--- a/com/launcher.js
+++ b/com/launcher.js
@ -1,55 +1,20 @@
-/** 
- * ## [launcher](com/launcher.js)
+/*
+ * ## launcher
 *
- * displays app (icons) in 2D and 3D handmenu (enduser can launch desktop-like 'apps')
+ * displays app (icons) for enduser to launch
 *
- * They can be temporary processes (icon disappears after component is removed) or permanent icons 
- * when registered via .register({...})
- *
- * ```html
- * <a-entity launcher>
- *   <a-entity launch="component: helloworld; foo: bar"><a-entity>
- * </a-entity>
- *  
+ * ```javascript
+ *  <a-entity app="app/launcher.js"/>
 * ```
 *
 * | property     | type               | example                                                                                |
 * |--------------|--------------------|----------------------------------------------------------------------------------------|
- * | `attach`     | `selector`         | hand or object to attach menu to                                                       |
- * | `registries` | `array` of strings | `<a-entity launcher="registers: https://foo.com/index.json, ./index.json"/>`           |
+ * | `registries` | `array` of strings | <a-entity app="app/launcher.js; registers: https://foo.com/index.json, ./index.json"/> |
 *
 * | event        | target | info                                                                                               |
 * |--------------|-------------------------------------------------------------------------------------------------------------|
 * | `launcher`   | an app | when pressing an app icon, `launcher` event will be send to the respective app                     |
- *
- * There a multiple ways of letting the launcher know that an app can be launched:
- *
- * 1. any AFRAME component with an `launcher`-event + manifest is automatically added:
-*  
-*  ```javascript
-*  AFRAME.registerComponent('foo',{
-*    events:{
-*      launcher: function(){ ...launch something... }
-*    },
-*    manifest:{ // HTML5 manifesto JSON object
-*      // https://www.w3.org/TR/appmanifest/ 
-*    }
-*  }
-*  ```
-*
-* 2. dynamically in javascript   
-*
-* ```javascript
-* window.launcher.register({
-*   name:"foo",
-*   icon: "https://.../optional_icon.png" 
-*   description: "lorem ipsum",
-*   cb: () => alert("foo")
-* })
-* //window.launcher.unregister('foo')
-* ```
-* 
-*/
+ */

 AFRAME.registerComponent('launch', { // use this component to auto-launch component
  init: function(){ 
@ -61,6 +26,12 @@ AFRAME.registerComponent('launch', { // use this component to auto-launch compon

 AFRAME.registerComponent('launcher', {
  schema: {
+    attach: { type:"selector"},
+    padding: { type:"number","default":0.15},
+    fingerTip: {type:"selector"},
+    fingerDistance: {type:"number", "default":0.25},
+    rescale: {type:"number","default":0.4},
+    open: { type:"boolean", "default":true},
    colors: { type:"array", "default": [
      '#4C73FE',
      '#554CFE',
@ -71,40 +42,57 @@ AFRAME.registerComponent('launcher', {
      '#333333',
    ]},
    paused: { type:"boolean","default":false},
+    cols:   { type:"number", "default": 5 }
  },

-  requires:{
-    dom:         "com/dom.js",
-    htmlinxr:    "com/html-as-texture-in-xr.js",
-    data2events: "com/data2event.js"
-  },
+  dependencies:['dom'],

  init: async function () {
-    this.el.object3D.visible = false;
-    await AFRAME.utils.require(this.requires)
    this.worldPosition = new THREE.Vector3()

+    await AFRAME.utils.require({
+      html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
+      dom:         "./com/dom.js",
+      data2events: "./com/data2event.js"
+    })
+
    this.el.setAttribute("dom","")
-    this.el.setAttribute("pressable","")
-    this.el.sceneEl.addEventListener('enter-vr', () => this.centerMenu() )
-    this.el.sceneEl.addEventListener('enter-ar', () => this.centerMenu() )
+    this.el.setAttribute("noxd","ignore") // hint to XD.js that we manage ourselve concerning 2D/3D switching
    this.render()
+
+    if( this.data.attach ){
+      this.el.object3D.visible = false
+      if( this.isHand(this.data.attach) ){
+        this.data.attach.addEventListener('model-loaded', () => {
+          this.ready = true
+          this.attachMenu() 
+        })
+        // add button
+        this.menubutton = this.createMenuButton()
+        this.menubutton.object3D.visible = false
+        this.data.attach.appendChild( this.menubutton )
+      }else this.data.attach.appendChild(this.el)
+    }
+
+  },
+
+  isHand: (el) => {
+    return el.getAttributeNames().filter( (n) => n.match(/^hand-tracking/) ? n : null ).length ? true : false
  },

  dom: {
-    scale:   0.8,
+    scale:   3,
    events:  ['click'],
    html:    (me) => `<div class="iconmenu">loading components..</div>`,
-    css:     (me) => `
-              .iconmenu {
+    css:     (me) => `.iconmenu {
                z-index: 1000;
                display: flex;
                flex-direction: row;
                align-items: flex-start;
                height: 50px;
-                width:764px;
                overflow:hidden;
                position: fixed;
+                right: 162px;
                bottom: 10px;
                left:20px;
                background: transparent;
@ -125,8 +113,6 @@ AFRAME.registerComponent('launcher', {
                border-top: 2px solid #BBB;
                border-bottom: 2px solid #BBB;
                font-size:18px;
-                color: #777;
-                line-height: 7px;
              }

              .iconmenu > button:first-child {
@ -143,10 +129,6 @@ AFRAME.registerComponent('launcher', {
                padding-top:13px;
              }

-              .iconmenu > button:only-child{
-                border-radius:5px 5px 5px 5px;
-              }
-
              .iconmenu > button > img {
                transform: translate(0px,-14px);
                opacity:0.5;
@ -161,11 +143,15 @@ AFRAME.registerComponent('launcher', {
  },

  events:{
-
-    click: function(e){ },
-
-    DOMready: function(){
-      this.el.setAttribute("html-as-texture-in-xr", `domid: #${this.el.dom.id}; faceuser: false`)
+    open: function(){
+      this.preventAccidentalButtonPresses()
+      if( this.data.open ){
+        this.el.setAttribute("animation",`dur: 200; property: scale; from: 0 0 1; to: ${this.data.rescale} ${this.data.rescale} ${this.data.rescale}`)
+        this.menubutton.object3D.visible = false
+      }else{
+        this.el.setAttribute("animation",`dur: 200; property: scale; from: ${this.data.rescale} ${this.data.rescale} ${this.data.rescale}; to: 0 0 1`)
+        this.menubutton.object3D.visible = true
+      }
    }
  },

@ -174,70 +160,136 @@ AFRAME.registerComponent('launcher', {
    setTimeout( () => this.data.paused = false, 500 ) // prevent menubutton press collide with animated buttons
  },

+  createMenuButton: function(colo){
+    let aentity = document.createElement('a-entity')
+    aentity.setAttribute("mixin","menubutton")
+    aentity.addEventListener('obbcollisionstarted', this.onpress )
+    aentity.addEventListener('obbcollisionended', this.onreleased )
+    return aentity
+  },
+
  render: async function(els){
    if( !this.el.dom ) return // too early (dom.js component not ready)

+    let requires = [] 
+    let i        = 0 
+    let j        = 0
    let colors   = this.data.colors 
-    const add2D = (launchCom,manifest) => {
+    const add2D = (launchCom,el,manifest) => {
      let btn    = document.createElement('button')
-      let iconDefault = "data:image/svg+xml;base64,PHN2ZwogIHdpZHRoPSIyNCIKICBoZWlnaHQ9IjI0IgogIHZpZXdCb3g9IjAgMCAyNCAyNCIKICBmaWxsPSJub25lIgogIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKPgogIDxwYXRoCiAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNMjAuMTcwMiAzTDIwLjE2NjMgMy4wMDQ1M0MyMS43NDU4IDMuMDkwODQgMjMgNC4zOTg5NiAyMyA2VjE4QzIzIDE5LjY1NjkgMjEuNjU2OSAyMSAyMCAyMUg0QzIuMzQzMTUgMjEgMSAxOS42NTY5IDEgMThWNkMxIDQuMzQzMTUgMi4zNDMxNSAzIDQgM0gyMC4xNzAyWk0xMC40NzY0IDVIMTYuNDc2NEwxMy4wODkgOUg3LjA4ODk5TDEwLjQ3NjQgNVpNNS4wODg5OSA5TDguNDc2NDQgNUg0QzMuNDQ3NzIgNSAzIDUuNDQ3NzIgMyA2VjlINS4wODg5OVpNMyAxMVYxOEMzIDE4LjU1MjMgMy40NDc3MiAxOSA0IDE5SDIwQzIwLjU1MjMgMTkgMjEgMTguNTUyMyAyMSAxOFYxMUgzWk0yMSA5VjZDMjEgNS40NDc3MSAyMC41NTIzIDUgMjAgNUgxOC40NzY0TDE1LjA4OSA5SDIxWiIKICAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAvPgo8L3N2Zz4="
-      let html    = manifest?.icons?.length > 0 || !manifest.name ? `<img src='${manifest.icons[0].src || iconDefault}' title='${manifest.name}: ${manifest.description}'/>` : ""
-      if( manifest.name && !html ) html = `${manifest.short_name || manifest.name}`
-      btn.innerHTML = html 
-
-      btn.addEventListener('click', (e) => {
-        launchCom.launcher()
-        e.stopPropagation()
-        // visual feedback to user
-        btn.style.filter = "brightness(0.5)"
-        this.el.components.html.rerender()
-        setTimeout(  () => {
-          btn.style.filter = "brightness(1)"
-          this.el.components.html.rerender()
-        }, 500 )
-        return false
-      })
+      btn.innerHTML = `${ manifest?.icons?.length > 0  
+                             ? `<img src='${manifest.icons[0].src}' title='${manifest.name}: ${manifest.description}'/>` 
+                             : `${manifest.short_name}`
+                      }`
+      btn.addEventListener('click', () => el.emit('launcher',{}) )
      this.el.dom.appendChild(btn)
    }

+    const add3D = (launchCom,el,manifest) => {
+      let aentity = document.createElement('a-entity')
+      let atext   = document.createElement('a-entity')
+      let padding = this.data.padding
+      if( (i % this.data.cols) == 0 ) j++
+      aentity.setAttribute("mixin","menuitem")
+      aentity.setAttribute("position",`${padding+(i++ % this.data.cols) * padding} ${j*padding} 0`)
+      if( !aentity.getAttribute("material")){
+        aentity.setAttribute('material',`side: double; color: ${colors[ i % colors.length]}`)
+      }
+      aentity.addEventListener('obbcollisionstarted', this.onpress )
+      aentity.addEventListener('obbcollisionended', this.onreleased )
+      atext.setAttribute("text",`value: ${manifest.short_name}; align: baseline; anchor: align; align:center; wrapCount:7`)
+      atext.setAttribute("scale","0.1 0.1 0.1")
+      aentity.appendChild(atext)
+      this.el.appendChild(aentity)
+      aentity.launchCom = launchCom
+      return aentity
+    }
+
    // finally render them!
    this.el.dom.innerHTML = '' // clear
-    els = els || this.system.launchables
+    els = els || this.system.components
    els.map( (c) => {
-      const manifest           = c.manifest
+      const launchComponentKey = c.getAttributeNames().shift()
+      const launchCom          = c.components[ launchComponentKey ]
+      if( !launchCom ) return console.warn(`could not find component '${launchComponentKey}' (forgot to include script-tag?)`)
+      const manifest           = launchCom.manifest
      if( manifest ){
-        add2D(c,manifest)
+        add2D(launchCom,c,manifest)
+        add3D(launchCom,c,manifest)
      }
    })

-    this.centerMenu();
-
  },

-  centerMenu: function(){
-    // center along x-axis
-    this.el.object3D.traverse( (o) => {
-      if( o.constructor && String(o.constructor).match(/HTMLMesh/) ){
-        this.setOriginToMiddle(o, this.el.object3D, {x:true})
-        o.position.z = 0.012 // position a bit before the grab-line
-        o.position.y = -0.01 // position a bit before the grab-line
+  onpress: function(e){
+    const launcher = document.querySelector('[launcher]').components.launcher
+    if( launcher.data.paused                           ) return // prevent accidental pressed due to animation
+    if( e.detail.withEl.computedMixinStr == 'menuitem' ) return // dont react to menuitems touching eachother
+
+    // if user press menu button toggle menu
+    if( launcher && !launcher.data.open && e.srcElement.computedMixinStr == 'menubutton' ){
+      return (launcher.data.open = true)
+    }
+    if( launcher && !launcher.data.open ) return // dont process menuitems when menu is closed
+    let el = e.srcElement
+    if(!el) return
+    el.object3D.traverse( (o) => {
+      if( o.material && o.material.color ){
+        if( !o.material.colorOriginal ) o.material.colorOriginal = o.material.color.clone() 
+        o.material.color.r *= 0.3
+        o.material.color.g *= 0.3
+        o.material.color.b *= 0.3
      }
    })
-    this.el.object3D.visible = true // ensure visibility
+    if( el.launchCom ){
+      console.log("launcher.js: launching "+el.launchCom.el.getAttributeNames().shift())
+      launcher.preventAccidentalButtonPresses()
+      el.launchCom.el.emit('launcher') // launch component!
+      this.data.open = false // close to prevent infinite loop of clicks when leaving immersive mode
+    }
  },

-  setOriginToMiddle: function(fromObject, toObject, axis) {
-    var boxFrom = new THREE.Box3().setFromObject(fromObject);
-    var boxTo   = new THREE.Box3().setFromObject(toObject);
-    var center = new THREE.Vector3();
-    if( !toObject.positionOriginal ) toObject.positionOriginal = toObject.position.clone()
-    center.x = axis.x ? - (boxFrom.max.x/2) : 0
-    center.y = axis.y ? - (boxFrom.max.y/2) : 0
-    center.z = axis.z ? - (boxFrom.max.z/2) : 0
-    toObject.position.copy( toObject.positionOriginal )
-    toObject.position.sub(center);
+  onreleased: function(e){
+    if( e.detail.withEl.computedMixinStr == 'menuitem' ) return // dont react to menuitems touching eachother
+    let el = e.srcElement
+    el.object3D.traverse( (o) => {
+      if( o.material && o.material.color ){
+        if( o.material.colorOriginal ) o.material.color = o.material.colorOriginal.clone() 
+      }
+    })
  },

+  attachMenu: function(){
+    if( this.el.parentNode != this.data.attach ){
+      this.el.object3D.visible = true
+      let armature = this.data.attach.object3D.getObjectByName('Armature') 
+      if( !armature ) return console.warn('cannot find armature')
+      this.data.attach.object3D.children[0].add(this.el.object3D)
+      this.el.object3D.scale.x = this.data.rescale
+      this.el.object3D.scale.y = this.data.rescale
+      this.el.object3D.scale.z = this.data.rescale
+
+      // add obb-collider to index finger-tip
+      let aentity = document.createElement('a-entity')
+      trackedObject3DVariable = 'parentNode.components.hand-tracking-controls.bones.9';
+      this.data.fingerTip.appendChild(aentity)
+      aentity.setAttribute('obb-collider', {trackedObject3D: trackedObject3DVariable, size: 0.015});
+
+      if( this.isHand(this.data.attach) ){
+        // shortly show and hide menu into palm (hint user)
+        setTimeout( () => { this.data.open = false }, 1500 )
+      }
+    }
+  },
+
+  tick: function(){
+    if( this.ready && this.data.open ){
+      let indexTipPosition = document.querySelector('#right-hand[hand-tracking-controls]').components['hand-tracking-controls'].indexTipPosition
+      this.el.object3D.getWorldPosition(this.worldPosition)
+      const lookingAtPalm = this.data.attach.components['hand-tracking-controls'].wristObject3D.rotation.z > 2.0 
+      if( !lookingAtPalm ){ this.data.open = false }
+    }
+  },

  manifest: { // HTML5 manifest to identify app to xrsh
    "short_name": "launcher",
@ -297,81 +349,35 @@ in above's case "\nHelloworld application\n" will qualify as header.
 AFRAME.registerSystem('launcher',{

  init: function(){
-    this.launchables = []
-    this.dom         = []
-    this.registered  = []
+    this.components = []
    // observe HTML changes in <a-scene>
    observer = new MutationObserver( (a,b) => this.getLaunchables(a,b) )
    observer.observe( this.sceneEl, {characterData: false, childList: true, attributes: false});
-
-    window.launcher = this
-    this.getLaunchables()
-  },
-
-  register: function(launchable){
-    try{
-      let {name, description, cb} = launchable
-      const exist = this.registered.find( (r) => r.manifest.name == name )
-      if( exist ) return // already registered
-      this.registered.push({ 
-        manifest: {name, description, icons: launchable.icon ? [{src:launchable.icon}] : [] },
-        launcher: cb 
-      })
-    }catch(e){
-      console.error('AFRAME.systems.launcher.register({ name, description, icon, cb }) got invalid obj')
-      console.error(e)
-    }
-
-    this.getLaunchables()
-  },
-
-  unregister: function(launchableName){
-    this.registered = this.registered.filter( (l) => l.name != launchableName )
  },

  getLaunchables: function(mutationsList,observer){
    let searchEvent = 'launcher'
    let els         = [...this.sceneEl.getElementsByTagName("*")]
    let seen        = {}
-    this.launchables = [
-      /* 
-       * {
-       *   manifest: {...}
-       *   launcher: () => ....
-       * }
-       */ 
-    ];

-    // collect manually registered launchables
-    this.registered.map( (launchable) => {
-      if( launchable.component ) seen[ launchable.component ] = true
-      this.launchables.push(launchable) 
-    })
-
-    // collect launchables in aframe dom elements
-    this.dom = els.filter( (el) => {
+    this.components = els.filter( (el) => {
      let hasEvent = false
      if( el.components ){
        for( let i in el.components ){
          if( el.components[i].events && el.components[i].events[searchEvent] && !seen[i] ){
-            let com = hasEvent = seen[i] = el.components[i]
-            let alreadyAdded = this.launchables.find( (l) => l.manifest.name == com.manifest.name )
-            if( !alreadyAdded ){
-              com.launcher = () => com.el.emit('launcher',null,false) // important: no bubble
-              this.launchables.push({manifest: com.manifest, launcher: com.launcher})
-            }
+            hasEvent = seen[i] = true
          }
        } 
      }
      return hasEvent ? el : null 
    })
    this.updateLauncher()
-    return this.launchables
+    return seen
  },

  updateLauncher: function(){
    let launcher = document.querySelector('[launcher]')
-    if( launcher && launcher.components.launcher) launcher.components.launcher.render()
+    if( launcher ) launcher.components['launcher'].render()
  }

 })
--- a/com/lib/aframe-html.js
+++ b/com/lib/aframe-html.js
@ -1,682 +0,0 @@
-
-;
-(function (three) {
-	'use strict';
-
-	// This is a copy of https://github.com/mrdoob/three.js/blob/0403020848c26a9605eb91c99a949111ad4a532e/examples/jsm/interactive/HTMLMesh.js
-
-	class HTMLMesh extends three.Mesh {
-
-		constructor( dom ) {
-
-			const texture = new HTMLTexture( dom );
-
-			const geometry = new three.PlaneGeometry( texture.image.width * 0.001, texture.image.height * 0.001 );
-			const material = new three.MeshBasicMaterial( { map: texture, toneMapped: false, transparent: true } );
-
-			super( geometry, material );
-
-			function onEvent( event ) {
-
-				material.map.dispatchDOMEvent( event );
-
-			}
-
-			this.addEventListener( 'mousedown', onEvent );
-			this.addEventListener( 'mousemove', onEvent );
-			this.addEventListener( 'mouseup', onEvent );
-			this.addEventListener( 'click', onEvent );
-
-			this.dispose = function () {
-
-				geometry.dispose();
-				material.dispose();
-
-				material.map.dispose();
-
-				canvases.delete( dom );
-
-				this.removeEventListener( 'mousedown', onEvent );
-				this.removeEventListener( 'mousemove', onEvent );
-				this.removeEventListener( 'mouseup', onEvent );
-				this.removeEventListener( 'click', onEvent );
-
-			};
-
-		}
-
-	}
-
-	class HTMLTexture extends three.CanvasTexture {
-
-		constructor( dom ) {
-
-			super( html2canvas( dom ) );
-
-			this.dom = dom;
-
-			this.anisotropy = 16;
-			this.encoding = three.sRGBEncoding;
-			this.minFilter = three.LinearFilter;
-			this.magFilter = three.LinearFilter;
-
-			// Create an observer on the DOM, and run html2canvas update in the next loop
-			const observer = new MutationObserver( () => {
-
-				if ( ! this.scheduleUpdate ) {
-
-					// ideally should use xr.requestAnimationFrame, here setTimeout to avoid passing the renderer
-					this.scheduleUpdate = setTimeout( () => this.update(), 16 );
-
-				}
-
-			} );
-
-			const config = { attributes: true, childList: true, subtree: true, characterData: true };
-			observer.observe( dom, config );
-
-			this.observer = observer;
-
-		}
-
-		dispatchDOMEvent( event ) {
-
-			if ( event.data ) {
-
-				htmlevent( this.dom, event.type, event.data.x, event.data.y );
-
-			}
-
-		}
-
-		update() {
-
-			this.image = html2canvas( this.dom );
-			this.needsUpdate = true;
-
-			this.scheduleUpdate = null;
-
-		}
-
-		dispose() {
-
-			if ( this.observer ) {
-
-				this.observer.disconnect();
-
-			}
-
-			this.scheduleUpdate = clearTimeout( this.scheduleUpdate );
-
-			super.dispose();
-
-		}
-
-	}
-
-
-	//
-
-	const canvases = new WeakMap();
-
-	function html2canvas( element ) {
-
-		const range = document.createRange();
-		const color = new three.Color();
-
-		function Clipper( context ) {
-
-			const clips = [];
-			let isClipping = false;
-
-			function doClip() {
-
-				if ( isClipping ) {
-
-					isClipping = false;
-					context.restore();
-
-				}
-
-				if ( clips.length === 0 ) return;
-
-				let minX = - Infinity, minY = - Infinity;
-				let maxX = Infinity, maxY = Infinity;
-
-				for ( let i = 0; i < clips.length; i ++ ) {
-
-					const clip = clips[ i ];
-
-					minX = Math.max( minX, clip.x );
-					minY = Math.max( minY, clip.y );
-					maxX = Math.min( maxX, clip.x + clip.width );
-					maxY = Math.min( maxY, clip.y + clip.height );
-
-				}
-
-				context.save();
-				context.beginPath();
-				context.rect( minX, minY, maxX - minX, maxY - minY );
-				context.clip();
-
-				isClipping = true;
-
-			}
-
-			return {
-
-				add: function ( clip ) {
-
-					clips.push( clip );
-					doClip();
-
-				},
-
-				remove: function () {
-
-					clips.pop();
-					doClip();
-
-				}
-
-			};
-
-		}
-
-		function drawText( style, x, y, string ) {
-
-			if ( string !== '' ) {
-
-				if ( style.textTransform === 'uppercase' ) {
-
-					string = string.toUpperCase();
-
-				}
-
-				context.font = style.fontWeight + ' ' + style.fontSize + ' ' + style.fontFamily;
-				context.textBaseline = 'top';
-				context.fillStyle = style.color;
-				context.fillText( string, x, y + parseFloat( style.fontSize ) * 0.1 );
-
-			}
-
-		}
-
-		function buildRectPath( x, y, w, h, r ) {
-
-			if ( w < 2 * r ) r = w / 2;
-			if ( h < 2 * r ) r = h / 2;
-
-			context.beginPath();
-			context.moveTo( x + r, y );
-			context.arcTo( x + w, y, x + w, y + h, r );
-			context.arcTo( x + w, y + h, x, y + h, r );
-			context.arcTo( x, y + h, x, y, r );
-			context.arcTo( x, y, x + w, y, r );
-			context.closePath();
-
-		}
-
-		function drawBorder( style, which, x, y, width, height ) {
-
-			const borderWidth = style[ which + 'Width' ];
-			const borderStyle = style[ which + 'Style' ];
-			const borderColor = style[ which + 'Color' ];
-
-			if ( borderWidth !== '0px' && borderStyle !== 'none' && borderColor !== 'transparent' && borderColor !== 'rgba(0, 0, 0, 0)' ) {
-
-				context.strokeStyle = borderColor;
-				context.lineWidth = parseFloat( borderWidth );
-				context.beginPath();
-				context.moveTo( x, y );
-				context.lineTo( x + width, y + height );
-				context.stroke();
-
-			}
-
-		}
-
-		function drawElement( element, style ) {
-
-			let x = 0, y = 0, width = 0, height = 0;
-
-			if ( element.nodeType === Node.TEXT_NODE ) {
-
-				// text
-
-				range.selectNode( element );
-
-				const rect = range.getBoundingClientRect();
-
-				x = rect.left - offset.left - 0.5;
-				y = rect.top - offset.top - 0.5;
-				width = rect.width;
-				height = rect.height;
-
-				drawText( style, x, y, element.nodeValue.trim() );
-
-			} else if ( element.nodeType === Node.COMMENT_NODE ) {
-
-				return;
-
-			} else if ( element instanceof HTMLCanvasElement ) {
-
-				// Canvas element
-				if ( element.style.display === 'none' ) return;
-
-				const rect = element.getBoundingClientRect();
-
-				x = rect.left - offset.left - 0.5;
-				y = rect.top - offset.top - 0.5;
-
-			        context.save();
-				const dpr = window.devicePixelRatio;
-				context.scale( 1 / dpr, 1 / dpr );
-				context.drawImage( element, x, y );
-				context.restore();
-
-			} else if ( element instanceof HTMLImageElement ) {
-
-				if ( element.style.display === 'none' ) return;
-
-				const rect = element.getBoundingClientRect();
-
-				x = rect.left - offset.left - 0.5;
-				y = rect.top - offset.top - 0.5;
-				width = rect.width;
-				height = rect.height;
-
-				context.drawImage( element, x, y, width, height );
-
-			} else {
-
-				if ( element.style.display === 'none' ) return;
-
-				const rect = element.getBoundingClientRect();
-
-				x = rect.left - offset.left - 0.5;
-				y = rect.top - offset.top - 0.5;
-				width = rect.width;
-				height = rect.height;
-
-				style = window.getComputedStyle( element );
-
-				// Get the border of the element used for fill and border
-
-				buildRectPath( x, y, width, height, parseFloat( style.borderRadius ) );
-
-				const backgroundColor = style.backgroundColor;
-
-				if ( backgroundColor !== 'transparent' && backgroundColor !== 'rgba(0, 0, 0, 0)' ) {
-
-					context.fillStyle = backgroundColor;
-					context.fill();
-
-				}
-
-				// If all the borders match then stroke the round rectangle
-
-				const borders = [ 'borderTop', 'borderLeft', 'borderBottom', 'borderRight' ];
-
-				let match = true;
-				let prevBorder = null;
-
-				for ( const border of borders ) {
-
-					if ( prevBorder !== null ) {
-
-						match = ( style[ border + 'Width' ] === style[ prevBorder + 'Width' ] ) &&
-						( style[ border + 'Color' ] === style[ prevBorder + 'Color' ] ) &&
-						( style[ border + 'Style' ] === style[ prevBorder + 'Style' ] );
-
-					}
-
-					if ( match === false ) break;
-
-					prevBorder = border;
-
-				}
-
-				if ( match === true ) {
-
-					// They all match so stroke the rectangle from before allows for border-radius
-
-					const width = parseFloat( style.borderTopWidth );
-
-					if ( style.borderTopWidth !== '0px' && style.borderTopStyle !== 'none' && style.borderTopColor !== 'transparent' && style.borderTopColor !== 'rgba(0, 0, 0, 0)' ) {
-
-						context.strokeStyle = style.borderTopColor;
-						context.lineWidth = width;
-						context.stroke();
-
-					}
-
-				} else {
-
-					// Otherwise draw individual borders
-
-					drawBorder( style, 'borderTop', x, y, width, 0 );
-					drawBorder( style, 'borderLeft', x, y, 0, height );
-					drawBorder( style, 'borderBottom', x, y + height, width, 0 );
-					drawBorder( style, 'borderRight', x + width, y, 0, height );
-
-				}
-
-				if ( element instanceof HTMLInputElement ) {
-
-					let accentColor = style.accentColor;
-
-					if ( accentColor === undefined || accentColor === 'auto' ) accentColor = style.color;
-
-					color.set( accentColor );
-
-					const luminance = Math.sqrt( 0.299 * ( color.r ** 2 ) + 0.587 * ( color.g ** 2 ) + 0.114 * ( color.b ** 2 ) );
-					const accentTextColor = luminance < 0.5 ? 'white' : '#111111';
-
-					if ( element.type === 'radio' ) {
-
-						buildRectPath( x, y, width, height, height );
-
-						context.fillStyle = 'white';
-						context.strokeStyle = accentColor;
-						context.lineWidth = 1;
-						context.fill();
-						context.stroke();
-
-						if ( element.checked ) {
-
-							buildRectPath( x + 2, y + 2, width - 4, height - 4, height );
-
-							context.fillStyle = accentColor;
-							context.strokeStyle = accentTextColor;
-							context.lineWidth = 2;
-							context.fill();
-							context.stroke();
-
-						}
-
-					}
-
-					if ( element.type === 'checkbox' ) {
-
-						buildRectPath( x, y, width, height, 2 );
-
-						context.fillStyle = element.checked ? accentColor : 'white';
-						context.strokeStyle = element.checked ? accentTextColor : accentColor;
-						context.lineWidth = 1;
-						context.stroke();
-						context.fill();
-
-						if ( element.checked ) {
-
-							const currentTextAlign = context.textAlign;
-
-							context.textAlign = 'center';
-
-							const properties = {
-								color: accentTextColor,
-								fontFamily: style.fontFamily,
-								fontSize: height + 'px',
-								fontWeight: 'bold'
-							};
-
-							drawText( properties, x + ( width / 2 ), y, '✔' );
-
-							context.textAlign = currentTextAlign;
-
-						}
-
-					}
-
-					if ( element.type === 'range' ) {
-
-						const [ min, max, value ] = [ 'min', 'max', 'value' ].map( property => parseFloat( element[ property ] ) );
-						const position = ( ( value - min ) / ( max - min ) ) * ( width - height );
-
-						buildRectPath( x, y + ( height / 4 ), width, height / 2, height / 4 );
-						context.fillStyle = accentTextColor;
-						context.strokeStyle = accentColor;
-						context.lineWidth = 1;
-						context.fill();
-						context.stroke();
-
-						buildRectPath( x, y + ( height / 4 ), position + ( height / 2 ), height / 2, height / 4 );
-						context.fillStyle = accentColor;
-						context.fill();
-
-						buildRectPath( x + position, y, height, height, height / 2 );
-						context.fillStyle = accentColor;
-						context.fill();
-
-					}
-
-					if ( element.type === 'color' || element.type === 'text' || element.type === 'number' ) {
-
-						clipper.add( { x: x, y: y, width: width, height: height } );
-
-						drawText( style, x + parseInt( style.paddingLeft ), y + parseInt( style.paddingTop ), element.value );
-
-						clipper.remove();
-
-					}
-
-				}
-
-			}
-
-			/*
-			// debug
-			context.strokeStyle = '#' + Math.random().toString( 16 ).slice( - 3 );
-			context.strokeRect( x - 0.5, y - 0.5, width + 1, height + 1 );
-			*/
-
-			const isClipping = style.overflow === 'auto' || style.overflow === 'hidden';
-
-			if ( isClipping ) clipper.add( { x: x, y: y, width: width, height: height } );
-
-			for ( let i = 0; i < element.childNodes.length; i ++ ) {
-
-				drawElement( element.childNodes[ i ], style );
-
-			}
-
-			if ( isClipping ) clipper.remove();
-
-		}
-
-		const offset = element.getBoundingClientRect();
-
-		let canvas = canvases.get( element );
-
-		if ( canvas === undefined ) {
-
-			canvas = document.createElement( 'canvas' );
-			canvas.width = offset.width;
-			canvas.height = offset.height;
-			canvases.set( element, canvas );
-
-		}
-
-		const context = canvas.getContext( '2d'/*, { alpha: false }*/ );
-
-		const clipper = new Clipper( context );
-
-		// console.time( 'drawElement' );
-
-		context.clearRect(0, 0, canvas.width, canvas.height);
-
-		drawElement( element );
-
-		// console.timeEnd( 'drawElement' );
-
-		return canvas;
-
-	}
-
-	function htmlevent( element, event, x, y ) {
-
-		const mouseEventInit = {
-			clientX: ( x * element.offsetWidth ) + element.offsetLeft,
-			clientY: ( y * element.offsetHeight ) + element.offsetTop,
-			view: element.ownerDocument.defaultView
-		};
-
-		// TODO: Find out why this is added. Keep commented out when this file is updated
-		// window.dispatchEvent( new MouseEvent( event, mouseEventInit ) );
-
-		const rect = element.getBoundingClientRect();
-
-		x = x * rect.width + rect.left;
-		y = y * rect.height + rect.top;
-
-		function traverse( element ) {
-
-			if ( element.nodeType !== Node.TEXT_NODE && element.nodeType !== Node.COMMENT_NODE ) {
-
-				const rect = element.getBoundingClientRect();
-
-				if ( x > rect.left && x < rect.right && y > rect.top && y < rect.bottom ) {
-
-					element.dispatchEvent( new MouseEvent( event, mouseEventInit ) );
-
-					if ( element instanceof HTMLInputElement && element.type === 'range' && ( event === 'mousedown' || event === 'click' ) ) {
-
-						const [ min, max ] = [ 'min', 'max' ].map( property => parseFloat( element[ property ] ) );
-
-						const width = rect.width;
-						const offsetX = x - rect.x;
-						const proportion = offsetX / width;
-						element.value = min + ( max - min ) * proportion;
-						element.dispatchEvent( new InputEvent( 'input', { bubbles: true } ) );
-
-					}
-
-				}
-
-				for ( let i = 0; i < element.childNodes.length; i ++ ) {
-
-					traverse( element.childNodes[ i ] );
-
-				}
-
-			}
-
-		}
-
-		traverse( element );
-
-	}
-
-	/* jshint esversion: 9, -W097 */
-
-	const schemaHTML = {
-		html: {
-			type: 'selector',
-		},
-		cursor: {
-			type: 'selector',
-		}
-	};
-
-	{
-		schemaHTML.html.description = `HTML element to use.`;
-		schemaHTML.cursor.description = `Visual indicator for where the user is currently pointing`;
-	}
-
-	const _pointer = new THREE.Vector2();
-	const _event = { type: '', data: _pointer };
-	AFRAME.registerComponent('html', {
-		schema: schemaHTML,
-		init() {
-			this.rerender = this.rerender.bind(this);
-			this.handle = this.handle.bind(this);
-			this.onClick = e => this.handle('click', e);
-			this.onMouseLeave = e => this.handle('mouseleave', e);
-			this.onMouseEnter = e => this.handle('mouseenter', e);
-			this.onMouseUp = e => this.handle('mouseup', e);
-			this.onMouseDown = e => this.handle('mousedown', e);
-			this.mouseMoveDetail = {
-				detail: {
-					cursorEl: null,
-					intersection: null
-				}
-			};
-		},
-		play() {
-			this.el.addEventListener('click', this.onClick);
-			this.el.addEventListener('mouseleave', this.onMouseLeave);
-			this.el.addEventListener('mouseenter', this.onMouseEnter);
-			this.el.addEventListener('mouseup', this.onMouseUp);
-			this.el.addEventListener('mousedown', this.onMouseDown);
-		},
-		pause() {
-			this.el.removeEventListener('click', this.onClick);
-			this.el.removeEventListener('mouseleave', this.onMouseLeave);
-			this.el.removeEventListener('mouseenter', this.onMouseEnter);
-			this.el.removeEventListener('mouseup', this.onMouseUp);
-			this.el.removeEventListener('mousedown', this.onMouseDown);
-		},
-		update() {
-			this.remove();
-			if (!this.data.html) return;
-			const mesh = new HTMLMesh(this.data.html);
-			this.el.setObject3D('html', mesh);
-			this.data.html.addEventListener('input', this.rerender);
-			this.data.html.addEventListener('change', this.rerender);
-			this.cursor = this.data.cursor ? this.data.cursor.object3D : null;
-		},
-		tick() {
-			if (this.activeRaycaster) {
-				const intersection = this.activeRaycaster.components.raycaster.getIntersection(this.el);
-				this.mouseMoveDetail.detail.cursorEl = this.activeRaycaster;
-				this.mouseMoveDetail.detail.intersection = intersection;
-				this.handle('mousemove', this.mouseMoveDetail);
-			}
-		},
-		handle(type, evt) {
-			const intersection = evt.detail.intersection;
-			const raycaster = evt.detail.cursorEl;
-			if (type === 'mouseenter') {
-				this.activeRaycaster = raycaster;
-			}
-			if (type === 'mouseleave' && this.activeRaycaster === raycaster) {
-				this.activeRaycaster = null;
-			}
-			if (this.cursor) this.cursor.visible = false;
-			if (intersection) {
-				const mesh = this.el.getObject3D('html');
-				const uv = intersection.uv;
-				_event.type = type;
-				_event.data.set( uv.x, 1 - uv.y );
-				mesh.dispatchEvent( _event );
-
-				if (this.cursor) {
-					this.cursor.visible = true;
-					this.cursor.parent.worldToLocal(this.cursor.position.copy(intersection.point));
-				}
-			}
-		},
-		rerender() {
-			const mesh = this.el.getObject3D('html');
-			if (mesh && !mesh.material.map.scheduleUpdate) {
-				mesh.material.map.scheduleUpdate = setTimeout( () => mesh.material.map.update(), 16 );
-			}
-		},
-		remove() {
-			const mesh = this.el.getObject3D('html');
-			if (mesh) {
-				this.el.removeObject3D('html');
-				this.data.html.removeEventListener('input', this.rerender);
-				this.data.html.removeEventListener('change', this.rerender);
-				mesh.dispose();
-			}
-			this.activeRaycaster = null;
-			this.mouseMoveDetail.detail.cursorEl = null;
-			this.mouseMoveDetail.detail.intersection = null;
-			this.cursor = null;
-		},
-	});
-
-})(THREE);
-
-
--- a/com/lib/xhook.min.js
+++ b/com/lib/xhook.min.js
--- a/com/paste.js
+++ b/com/paste.js
@ -0,0 +1,179 @@
+AFRAME.registerComponent('paste', {
+  schema: { 
+    foo: { type:"string"}
+  },
+
+  init: function () {
+    this.el.object3D.visible = false
+    //this.el.innerHTML = ` `
+  },
+
+  requires:{
+    osbutton:              "com/osbutton.js"
+  },
+
+  events:{
+
+    // component events
+    somecomponent: function( ){ console.log("component requirement mounted") },
+    ready:         function(e){ console.log("requires are loaded") },
+
+    launcher:      function(e){ 
+      const paste = () => {
+        navigator.clipboard.readText()
+        .then( (base64) => {
+          let mimetype  = base64.replace(/;base64,.*/,'')
+          let data = base64.replace(/.*;base64,/,'')
+          let type = this.textHeuristic(data)
+          console.log("type="+type)
+          switch( this.textHeuristic(data) ){
+            case "aframe":    this.insertAFRAME(data); break;
+            default:          this.insertText(data); break;
+          }
+          this.count += 1
+        })
+      }
+
+      navigator.permissions.query({ name: 'clipboard-read' })
+      .then( (permission) => {
+        if( permission.state != 'granted' ){
+          this.el.sceneEl.exitVR()
+          setTimeout( () => paste(), 500 )
+          return
+        }else paste()
+      })
+    },
+
+  },
+
+  textHeuristic: function(text){
+    // Script type identification clues
+    const bashClues   = ["|", "if ", "fi", "cat"];
+    const htmlClues   = ["/>", "href=", "src="];
+    const aframeClues = ["<a-entity", "/>", "position="];
+    const jsClues     = ["var ", "let ", "function ", "setTimeout","console."];
+    // Count occurrences of clues for each script type
+    const bashCount = bashClues.reduce((acc, clue) => acc + (text.includes(clue) ? 1 : 0), 0);
+    const htmlCount = htmlClues.reduce((acc, clue) => acc + (text.includes(clue) ? 1 : 0), 0);
+    const aframeCount = aframeClues.reduce((acc, clue) => acc + (text.includes(clue) ? 1 : 0), 0);
+    const jsCount = jsClues.reduce((acc, clue) => acc + (text.includes(clue) ? 1 : 0), 0);
+
+    // Identify the script with the most clues or return unknown if inconclusive
+    const maxCount = Math.max(bashCount, htmlCount, jsCount, aframeCount);
+    if (maxCount === 0) {
+      return "unknown";
+    } else if (bashCount === maxCount) {
+      return "bash";
+    } else if (htmlCount === maxCount) {
+      return "html";
+    } else if (jsCount === maxCount) {
+      return "javascript";
+    } else {
+      return "aframe";
+    }
+  },
+
+  insertAFRAME: function(data){
+    let scene = document.createElement('a-entity')
+    scene.id = "embedAframe"
+    scene.innerHTML = data
+    let el = document.createElement('a-text')
+    el.setAttribute("value",data)
+    el.setAttribute("color","white")
+    el.setAttribute("align","center")
+    el.setAttribute("anchor","align")
+    let osbutton = this.wrapOSButton(el,"aframe",data)
+    AFRAME.scenes[0].appendChild(osbutton)
+    console.log(data)
+  },
+
+  insertText: function(data){
+    let el = document.createElement('a-text')
+    el.setAttribute("value",data)
+    el.setAttribute("color","white")
+    el.setAttribute("align","center")
+    el.setAttribute("anchor","align")
+    let osbutton = this.wrapOSButton(el,"text",data)
+    AFRAME.scenes[0].appendChild(osbutton)
+    console.log(data)
+  },
+
+  wrapOSButton: function(el,type,data){
+    let osbutton = document.createElement('a-entity')
+    let height   = type == 'aframe' ? 0.3 : 0.1
+    let depth    = type == 'aframe' ? 0.3 : 0.05
+    osbutton.setAttribute("osbutton",`width:0.3; height: ${height}; depth: ${depth}; color:blue `)
+    osbutton.appendChild(el)
+    osbutton.object3D.position.copy( this.getPositionInFrontOfCamera() )
+    return osbutton
+  },
+
+  getPositionInFrontOfCamera: function(distance){
+    const camera = this.el.sceneEl.camera;
+    let pos = new THREE.Vector3()
+    let direction = new THREE.Vector3();
+    // Get camera's forward direction (without rotation)
+    camera.getWorldDirection(direction);
+    camera.getWorldPosition(pos)
+    direction.normalize();
+    // Scale the direction by 1 meter
+    if( !distance ) distance = 1.5
+    direction.multiplyScalar(distance);
+    // Add the camera's position to the scaled direction to get the target point
+    pos.add(direction);
+    return pos
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "short_name": "Paste",
+    "name": "Paste",
+    "icons": [
+      {
+        "src": "https://css.gg/clipboard.svg",
+        "type": "image/svg+xml",
+        "sizes": "512x512"
+      }
+    ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "shortcuts": [
+      {
+        "name": "What is the latest news?",
+        "cli":{
+          "usage":  "helloworld <type> [options]",
+          "example": "helloworld news",
+          "args":{
+            "--latest": {type:"string"}
+          }
+        },
+        "short_name": "Today",
+        "description": "View weather information for today",
+        "url": "/today?source=pwa",
+        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "Paste the clipboard",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Helloworld application 
+
+This is a help file which describes the application.
+It will be rendered thru troika text, and will contain
+headers based on non-punctualized lines separated by linebreaks,
+in above's case "\nHelloworld application\n" will qualify as header.
+    `
+  }
+
+});
+
--- a/com/pastedrop.js
+++ b/com/pastedrop.js
@ -1,130 +0,0 @@
-/** 
- * ## [pastedrop](com/pastedrop.js)
- *
- * detects user copy/paste and file dragdrop action
- * and clipboard functions
- *
- * ```html 
- *   <a-entity pastedrop/>
- * ```
- *
- * | event        | target | info                                                                                               |
- * |--------------|--------|------------------------------------------|
- * | `pasteFile`  | self   | always translates input to a File object |
- */
-
-AFRAME.registerComponent('pastedrop', {
-  schema: { 
-    foo: { type:"string"}
-  },
-
-  init: function () {
-
-    window.addEventListener('paste', this.onPaste.bind(this) )
-
-    document.body.addEventListener('dragover',(e) => e.preventDefault() ) 
-    document.body.addEventListener('drop',  this.onDrop.bind(this) )
-  },
-
-  initClipboard: function(){
-    navigator.permissions.query({ name: 'clipboard-read' })
-    .then( (permission) => {
-      if( permission.state != 'granted' ){
-        this.el.sceneEl.exitVR()
-        setTimeout( () => this.paste(), 500 )
-        return
-      }else this.paste()
-    })
-  },
-
-  getClipboard: function(){
-    navigator.clipboard.readText()
-    .then( async (base64) => {
-      let mimetype  = base64.replace(/;base64,.*/,'')
-      let data = base64.replace(/.*;base64,/,'')
-      let type = this.textHeuristic(data)
-      const term = document.querySelector('[isoterminal]').components.isoterminal.term
-        this.el.emit('pasteFile',{}) /*TODO* data incompatible */
-     })
-  },
-
-  onDrop: function(e){
-    e.preventDefault()
-    this.onPaste({...e, type: "paste", clipboardData: e.dataTransfer})
-  },
-
-  onPaste: function(e){
-    if( e.type != "paste" ) return
-
-    const clipboardData = e.clipboardData || navigator.clipboard;
-    const items = clipboardData.items;
-
-    for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      const type = item.type;
-
-      // Check if the item is a file
-      if (item.kind === "file") {
-        this.el.emit('pasteFile',{item,type})
-      } else if (type === "text/plain") {
-        const pastedText = clipboardData.getData("text/plain");
-        const newType = "text" // let /root/hook.d/mimetype/text further decide whether this is text/plain (or something else)
-        this.el.emit('pasteFile',{item,type:newType,pastedText})
-      }
-    }
-  },
-
-
-  manifest: { // HTML5 manifest to identify app to xrsh
-    "short_name": "Paste",
-    "name": "Paste",
-    "icons": [
-      {
-        "src": "https://css.gg/clipboard.svg",
-        "type": "image/svg+xml",
-        "sizes": "512x512"
-      }
-    ],
-    "id": "/?source=pwa",
-    "start_url": "/?source=pwa",
-    "background_color": "#3367D6",
-    "display": "standalone",
-    "scope": "/",
-    "theme_color": "#3367D6",
-    "shortcuts": [
-      {
-        "name": "What is the latest news?",
-        "cli":{
-          "usage":  "helloworld <type> [options]",
-          "example": "helloworld news",
-          "args":{
-            "--latest": {type:"string"}
-          }
-        },
-        "short_name": "Today",
-        "description": "View weather information for today",
-        "url": "/today?source=pwa",
-        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
-      }
-    ],
-    "description": "Paste the clipboard",
-    "screenshots": [
-      {
-        "src": "/images/screenshot1.png",
-        "type": "image/png",
-        "sizes": "540x720",
-        "form_factor": "narrow"
-      }
-    ],
-    "help":`
-Helloworld application 
-
-This is a help file which describes the application.
-It will be rendered thru troika text, and will contain
-headers based on non-punctualized lines separated by linebreaks,
-in above's case "\nHelloworld application\n" will qualify as header.
-    `
-  }
-
-});
-
--- a/com/pressable.js
+++ b/com/pressable.js
@ -1,84 +0,0 @@
-// this makes WebXR hand controls able to click things (by touching it)
-
-AFRAME.registerComponent('pressable', {
-    schema: {
-      pressDistance: { default: 0.008 },
-      pressDuration: { default: 300 },
-      immersiveOnly: { default: true } 
-    },
-    init: function() {
-        this.worldPosition = new THREE.Vector3();
-        this.raycaster = new THREE.Raycaster()
-        this.handEls = document.querySelectorAll('[hand-tracking-controls]');
-        this.pressed = false;
-        this.distance = -1
-        // we throttle by distance, to support scenes with loads of clickable objects (far away)
-        this.tick = this.throttleByDistance( () => this.detectPress() )
-        this.el.addEventListener("raycaster-intersected", (e) => {
-          if( !this.data || (this.data.immersiveOnly && !this.el.sceneEl.renderer.xr.isPresenting) ) return
-          this.el.emit('click', e.detail ) 
-        })
-
-    },
-    throttleByDistance: function(f){
-        return function(){
-           if( this.distance < 0 ) return f() // first call
-           if( !f.tid ){
-             let x = this.distance
-             let y = x*(x*0.05)*1000 // parabolic curve
-             f.tid = setTimeout( function(){
-               f.tid = null
-               f()
-             }, y )
-           }
-        }
-  },
-  detectPress: function(){
-    if( !this.el.sceneEl.renderer.xr.isPresenting ) return // ignore events in desktop mode 
-
-    if( this.handEls.length == 0 ){
-      this.handEls = document.querySelectorAll('[hand-tracking-controls]');
-    }
-    var handEls = this.handEls;
-    var handEl;
-    let minDistance = 5
-
-    // compensate for an object inside a group 
-    let object3D = this.el.object3D.type == "Group" ? this.el.object3D.children[0] : this.el.object3D
-    if( !object3D ) return
-
-    for (var i = 0; i < handEls.length; i++) {
-      handEl = handEls[i];
-      let indexTip  = handEl.components['hand-tracking-controls'] ?
-        handEl.components['hand-tracking-controls'].indexTipPosition :
-        false 
-      if( ! indexTip ) return // nothing to do here 
-
-      this.raycaster.far = this.data.pressDistance
-
-      // Create a direction vector to negative Z
-      const direction = new THREE.Vector3(0,0,-1.0);
-      direction.normalize()
-      this.raycaster.set(indexTip, direction)
-      intersects = this.raycaster.intersectObjects([object3D],true)
-
-      object3D.getWorldPosition(this.worldPosition)
-      distance    = indexTip.distanceTo(this.worldPosition)
-      minDistance = distance < minDistance ? distance : minDistance 
-
-      if (intersects.length ){
-        this.i = this.i || 0;
-        if( !this.pressed ){
-          this.el.emit('pressedstarted', intersects);
-          this.el.emit('click', {intersection: intersects[0]});
-          this.pressed = setTimeout( () => {
-            this.el.emit('pressedended', intersects);
-            this.pressed = null 
-          }, this.data.pressDuration )
-        }
-      }
-    }
-    this.distance = minDistance
-  },
-
-});
--- a/com/require.js
+++ b/com/require.js
@ -1,21 +1,17 @@
-/**
- * ## [require](com/require('').js)
- *
- * automatically requires dependencies or missing components
- * 
- * ```javascript
- * await AFRAME.utils.require( this.dependencies )               (*) autoload missing components
- * await AFRAME.utils.require( this.el.getAttributeNames() )     (*) autoload missing components
- * await AFRAME.utils.require({foo: "https://foo.com/aframe/components/foo.js"},this)
- * await AFRAME.utils.require(["./app/foo.js","foo.css"],this)
- * ```
- * 
- * > (*) = prefixes baseURL AFRAME.utils.require.baseURL ('./com/' e.g.)
- */ 
+// usage: 
+//
+// await AFRAME.utils.require( this.dependencies )               (*) autoload missing components
+// await AFRAME.utils.require( this.el.getAttributeNames() )     (*) autoload missing components
+// await AFRAME.utils.require({foo: "https://foo.com/aframe/components/foo.js"},this)
+// await AFRAME.utils.require(["./app/foo.js","foo.css"],this)
+// 
+// (*) = prefixes baseURL AFRAME.utils.require.baseURL ('./com/' e.g.)
+//
 AFRAME.utils.require = function(arr_or_obj,opts){
  opts            = opts || {}
  let i           = 0
  let deps        = []
+  AFRAME.required = AFRAME.required || {}
  let packagesArr = arr_or_obj.map ? arr_or_obj : Object.values(arr_or_obj)

  const parseURI = function(uri){
@ -35,8 +31,8 @@ AFRAME.utils.require = function(arr_or_obj,opts){
      }

      // prevent duplicate requests
-      if( AFRAME.utils.require.required[id] ) return // already loaded before
-      AFRAME.utils.require.required[id] = true
+      if( AFRAME.required[id] ) return // already loaded before
+      AFRAME.required[id] = true

      if( !document.body.querySelector(`script#${id}`) &&
          !document.body.querySelector(`link#${id}`) ){
@ -71,41 +67,4 @@ AFRAME.utils.require = function(arr_or_obj,opts){
  return Promise.all(deps)
 }

-AFRAME.utils.require.required   = {}
-
 AFRAME.utils.require.baseURL = './com/'
-
-
-//// this component will scan the DOM for missing components and lazy load them
-//AFRAME.registerSystem('require',{
-//
-//  init: function(){
-//    this.components = []
-//    // observe HTML changes in <a-scene>
-//    observer = new MutationObserver( (a,b) => this.getMissingComponents(a,b) )
-//    observer.observe( this.sceneEl, {characterData: false, childList: true, attributes: false});
-//  },
-//
-//  getMissingComponents: function(mutationsList,observer){
-//    let els         = [...this.sceneEl.getElementsByTagName("*")]
-//    let seen        = []
-//
-//    els.map( async (el) => {
-//      let attrs    = el.getAttributeNames()
-//                       .filter( (a) => a.match(/(^aframe-injected|^data-aframe|^id$|^class$|^on)/) ? null : a )
-//      for( let attr in attrs ){
-//        let component = attrs[attr]
-//        if( el.components && !el.components[component] ){
-//          console.info(`require.js: lazy-loading missing <${el.tagName.toLowerCase()} ${component} ... > (TODO: fix selectors in schema)`)
-//          // require && remount
-//          try{
-//            await AFRAME.utils.require([component])
-//            el.removeAttribute(component)
-//            el.setAttribute(component, el.getAttribute(component) )
-//          }catch(e){ } // give up, normal AFRAME behaviour follows
-//        }
-//      }
-//    })
-//  }
-//
-//})
--- a/com/selfcontainer.js
+++ b/com/selfcontainer.js
@ -34,23 +34,16 @@ AFRAME.registerComponent('selfcontainer', {

  installProxyServer: function(){
    if( !window.store ) window.store = {}
-
    // selfcontain every webrequest to store (and serve if stored)
    let curry = function(me){
      return function(request, response, cb){
-
        let data = request ? window.store[ request.url ] || false : false 
        if( data ){ // return inline version
-          console.log('selfcontainer.js: serving '+request.url+' from cache')
+          console.log('selfcontained cache: '+request.url)
          let res = new Response()
          res[ data.binary ? 'data' : 'text' ] = data.binary ? () => me.convert.base64ToArrayBuffer(data.text) : data.text 
          cb(res)
        }else{
-
-          // never cache requests to filesystem or zip/sh packages
-          if( request.url.match(/(^\/mnt\/|\.zip$|\.sh$)/) ) return cb(response)
-
-          console.log("selfcontainer.js: caching "+request.url)
          if( response.text ){
            data = {text: response.text}
          }else{
--- a/com/wearable.js
+++ b/com/wearable.js
@ -1,56 +0,0 @@
-AFRAME.registerComponent('wearable', {
-  schema:{
-    el: {type:"selector"},
-    controlPos: {type:"vec3"}, 
-    controlRot: {type:"vec3"},
-    handPos: {type:"vec3"}, 
-    handRot: {type:"vec3"} 
-  }, 
-  init: function(){
-    this.remember()
-
-    if( !this.data.el ) return console.warn(`wear.js: cannot find ${this.data.el}`)
-    this.data.el.object3D.name = 'wearable'
-
-    // hand vs controller multi attach-heuristics (intended to survived AFRAME updates)
-    this.data.el.addEventListener('controllermodelready',  this.attachWhatEverController.bind(this) ) // downside: no model yet
-    this.data.el.addEventListener('model-loaded',          this.attachWhatEverController.bind(this) ) // downside: only called once [model not added yet]
-    this.el.sceneEl.addEventListener('controllersupdated', this.attachWhatEverController.bind(this) ) // downside: only called when switching [no model yet]
-  },
-
-  attachWhatEverController: function(e){
-    setTimeout( () => { // needed because the events are called before the model was added via add())
-      let wrist = false 
-      let hand  =  this.data.el.components['hand-tracking-controls']
-      if( hand && hand.controllerPresent ) wrist = hand.wristObject3D
-      this.attach( wrist || this.data.el.object3D)
-      this.update( wrist ? 'hand' : 'control')
-    },100)
-  },
-
-  attach: function(target){
-    if( this.target && target.uuid == this.target.uuid ) return// already attached 
-    target.add(this.el.object3D )
-    this.target = target
-  },
-
-  detach: function(){
-    this.parent.add(this.el.object3D) 
-    this.el.object3D.position.copy( this.position )
-    this.el.object3D.rotation.copy( this.rotation )
-  },
-
-  remember: function(){
-    this.position = this.el.object3D.position.clone()
-    this.rotation = this.el.object3D.rotation.clone()
-    this.parent   = this.el.object3D.parent
-  },
-
-  update: function(type){
-    let position = type == 'hand' ? this.data.handPos : this.data.controlPos
-    let rotation = type == 'hand' ? this.data.handRot : this.data.controlRot
-    this.el.object3D.position.copy( position )
-    this.el.object3D.rotation.set( rotation.x, rotation.y, rotation.z )
-  }
-
-})
--- a/com/window.js
+++ b/com/window.js
@ -1,49 +1,20 @@
-/** 
- * ## [window](com/window.js)
- *
- * wraps a draggable window around a dom id or [dom](com/dom.js) component.
- *
- * ```html 
- *   <a-entity window="dom: #mydiv"/>
- * ```
- *
- * > depends on [AFRAME.utils.require](com/require.js)
- *
- * | property         | type      | default                | info |
- * |------------------|-----------|------------------------|------|
- * | `title`          |`string`   | ""                     |      |
- * | `width`          |`string`   |                        |      |
- * | `height`         |`string`   | 260px                  |      |
- * | `uid`            |`string`   |                        |      |
- * | `attach`         |`selector` |                        |      |
- * | `dom`            |`selector` |                        |      |
- * | `max`            |`boolean`  | false                  |      |
- * | `min`            |`boolean`  | false                  |      |
- * | `x`              |`string`   | "center"               |      |
- * | `y`              |`string`   | "center"               |      |
- * | `class`          |`array`    | []                     |      |
- */
-
 AFRAME.registerComponent('window', {
  schema:{
-    title:     {type:'string',"default":"title"},
-    width:     {type:'string'}, // wrap
-    height:    {type:'string',"default":'260px'},
-    uid:       {type:'string'},
-    attach:    {type:'selector'},
-    grabbable: {type:'string', "default":"components.html.el.object3D.children.0"},
-    dom:       {type:'selector'},
-    max:       {type:'boolean',"default":false},
-    min:       {type:'boolean',"default":false},
-    x:         {type:'string',"default":"center"},
-    y:         {type:'string',"default":"center"},
-    "class":   {type:'array',"default":[]},
-    autoresize:{type:'bool', "default": false}
+    title: {type:'string',"default":"title"},
+    width: {type:'string'}, // wrap
+    height: {type:'string',"default":'260px'},
+    uid:    {type:'string'},
+    attach: {type:'selector'},
+    dom:    {type:'selector'},
+    x:      {type:'string',"default":"center"},
+    y:      {type:'string',"default":"center"}
  },

  dependencies:{
    dom:         "com/dom.js",
-    winboxjs:    "assets/winbox.bundle.min.js",     // deadsimple windows: https://nextapps-de.github.io/winbox
+    html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
+    winboxjs:    "https://unpkg.com/winbox@0.2.82/dist/winbox.bundle.min.js",     // deadsimple windows: https://nextapps-de.github.io/winbox
+    //winboxcss:   "https://unpkg.com/winbox@0.2.82/dist/css/winbox.min.css",       // main theme
  },

  init: function(){
@ -53,14 +24,9 @@ AFRAME.registerComponent('window', {
  setupWindow: async function(){
    await AFRAME.utils.require(this.dependencies)
    if( !this.el.dom ) return console.error('window element requires dom-component as dependency')
-    this.el.addEventListener('close', () => {
-      close()
-      this.el.winbox.close()
-    })

    this.el.dom.style.display = 'none'
    let winbox = this.el.winbox = new WinBox( this.data.title, {
-      class: this.data.class,
      height:this.data.height,
      width:this.data.width,
      x: this.data.x,
@ -68,92 +34,33 @@ AFRAME.registerComponent('window', {
      id:  this.data.uid || String(Math.random()).substr(4), // important hint for html-mesh
      root: this.data.attach || document.body,
      mount: this.data.dom,
-      max: this.data.max,
-      min: this.data.min,
      onresize: () => this.el.emit('window.onresize',{}),
      onmaximize: () => this.el.emit('window.onmaximize',{}),
-      oncreate: (e) => {
+      oncreate: () => {
        this.el.emit('window.oncreate',{})
        // resize after the dom content has been rendered & updated 
        setTimeout( () => {
-          if( !this.data.max && this.data.autoresize ) winbox.resize( this.el.dom.offsetWidth+'px', this.el.dom.offsetHeight+'px' )
+          winbox.resize( this.el.dom.offsetWidth+'px', this.el.dom.offsetHeight+'px' )
+          setTimeout( () => this.el.setAttribute("html",`html:#${this.data.uid}; cursor:#cursor`), 1000)
          // hint grabbable's obb-collider to track the window-object
-          this.el.components['obb-collider'].data.trackedObject3D = this.data.grabbable
+          this.el.components['obb-collider'].data.trackedObject3D = 'components.html.el.object3D.children.0'
          this.el.components['obb-collider'].update()
        },1000)
-
-        this.patchButtons(e)
      },
-      onminimize: this.onminimize,
-      onrestore: this.onrestore,
-      onclose: this.onclose.bind(this),
-       
+      onclose: () => {
+        let e = {halt:false}
+        this.el.emit('window.onclose',e)
+        if( e.halt ) return true 
+        this.data.dom.style.display = 'none';
+        this.data.dom.parentElement.remove()
+        debugger
+        this.el.parentElement.remove( this.el )
+        return false
+      },
    });
    this.data.dom.style.display = '' // show

    this.el.setAttribute("grabbable","")

-    if( this.el.object3D.position.x == 0 && 
-        this.el.object3D.position.y == 0 && 
-        this.el.object3D.position.z == 0 ){ // position next to previous window
-      var els = [...document.querySelectorAll('[window]')]
-      if( els.length < 2 ) return
-      let current = els[ els.length-1 ]
-      let last    = els[ els.length-2 ]
-      AFRAME.utils.positionObjectNextToNeighbor( current.object3D , last.object3D, 0.02 )
-    }
-  },
-
-  show: function(state){
-    this.el.dom.closest('.winbox').style.display = state ? '' : 'none'
-  },
-
-  onminimize: function(e){
-    if( AFRAME.scenes[0].renderer.xr.isPresenting ){
-      this.window.style.display = 'none'
-    }
-  },
-
-  onrestore: function(e){
-    if( AFRAME.scenes[0].renderer.xr.isPresenting ){
-      this.window.style.display = ''
-    }
-  },
-
-  onclose: function(){
-    let e = {halt:false}
-    this.el.emit('window.onclose',e)
-    if( e.halt ) return true 
-    this.data.dom.style.display = 'none';
-    if( this.el.parentNode ) this.el.remove() //parentElement.remove( this.el )
-    this.data.dom.parentElement.remove()
-    return false
-  },
-
-
-  // the buttons don't work in XR because HTMLMesh does not understand onclick on divs
-  patchButtons: function(e){
-    let wEl = e.mount;
-    let controls = [...wEl.closest(".winbox").querySelectorAll(".wb-control span")]
-    controls.map( (c) => {
-      if( c.className.match(/wb-(close|min)/) ){
-        let btn = document.createElement("button")
-        btn.className = `xr xr-${c.className}`
-        btn.innerText = c.className == "wb-close" ? "x" : "_"
-        btn.addEventListener("click", (e) => {  } )// this will bubble up (to click ancestor in XR)
-        c.appendChild(btn)
-      }
-    })
  }
-
 })
-
-AFRAME.utils.positionObjectNextToNeighbor = function positionObjectNextToNeighbor(object, lastNeighbor = null, margin ){
-  if( lastNeighbor == null || object == null) return
-  // *FIXME* this could be more sophisticated :)
-  object.position.x = lastNeighbor.position.x + margin 
-  object.position.y = lastNeighbor.position.y - margin 
-  object.position.z = lastNeighbor.position.z + margin
-}
-
-
--- a/com/xd.js
+++ b/com/xd.js
@ -0,0 +1,111 @@
+AFRAME.registerComponent('xd', {
+  schema: {
+    foo: { type:"string"}
+  },
+
+  init: function () {
+    if( Object.keys(this.el.components).length > 1 ) return // we collect a-entities which wish to be toggled in this.showElements()
+
+    this.el.sceneEl.addEventListener('enter-vr',() => this.toggle(true) )
+    this.el.sceneEl.addEventListener('exit-vr', () => this.toggle(false) )
+    this.el.sceneEl.addEventListener('2D', () => this.showElements(false) )
+    this.el.sceneEl.addEventListener('3D', () => this.showElements(true) )
+
+    // toggle immersive with ESCAPE
+    document.body.addEventListener('keydown', (e) => e.key == 'Escape' && this.toggle() )
+
+    document.head.innerHTML += `<style type="text/css">
+      .XR #toggle_overlay{
+        background: transparent;
+        color: #3aacff;
+      }
+
+      .XR #overlay{
+        visibility: hidden;
+      }
+    </style>`
+
+    this.events.launcher = () => this.toggle()
+  },
+
+  showElements: function(state){
+    let els = [...document.querySelectorAll('[xd]')]
+    els     = els.filter( (el) => el != this.el ? el : null ) // filter out self
+    els.map( (el) => el.setAttribute("visible", state ? "true" : false  ) )
+  },
+
+  // draw a button so we can toggle apps between 2D / XR
+  toggle: function(state){
+    state = state != undefined ? state : state || !document.body.className.match(/XR/)
+    document.body.classList[ state ? 'add' : 'remove'](['XR'])
+    AFRAME.scenes[0].emit( state ? '3D' : '2D')
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "short_name": "XD",
+    "name": "2D/3D switcher",
+    "icons": [],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "category":"system",
+    "shortcuts": [
+      {
+        "name": "What is the latest news?",
+        "cli":{
+          "usage":  "helloworld <type> [options]",
+          "example": "helloworld news",
+          "args":{
+            "--latest": {type:"string"}
+          }
+        },
+        "short_name": "Today",
+        "description": "View weather information for today",
+        "url": "/today?source=pwa",
+        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "use ESC-key to toggle between 2D / 3D",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Helloworld application
+
+This is a help file which describes the application.
+It will be rendered thru troika text, and will contain
+headers based on non-punctualized lines separated by linebreaks,
+in above's case "\nHelloworld application\n" will qualify as header.
+    `
+  }
+
+});
+
+AFRAME.utils.XD = function(){
+  return document.body.classList.contains('XR') ? '3D' : '2D'
+}
+
+
+AFRAME.utils.XD.getPositionInFrontOfCamera = function(distance){
+  const camera = AFRAME.scenes[0].camera;
+  let pos = new THREE.Vector3()
+  let direction = new THREE.Vector3();
+  // Get camera's forward direction (without rotation)
+  camera.getWorldDirection(direction);
+  camera.getWorldPosition(pos)
+  direction.normalize();
+  // Scale the direction by 1 meter
+  if( !distance ) distance = 1.5
+  direction.multiplyScalar(distance);
+  // Add the camera's position to the scaled direction to get the target point
+  pos.add(direction);
+  return pos
+}
--- a/com/xrfragments.js
+++ b/com/xrfragments.js
@ -0,0 +1,81 @@
+AFRAME.registerComponent('xrfragments', {
+  schema: { 
+    url: { type:"string"}
+  },
+
+  init: function () {  
+  },
+
+  events:{
+
+    launcher: async function(){
+      let url = prompt('enter URL to glb/fbx/json/obj/usdz asset', 'https://xrfragment.org/index.glb')
+      if( !url ) return
+      await AFRAME.utils.require({
+        xrfragments: "https://xrfragment.org/dist/xrfragment.aframe.js",
+      }) 
+
+      // remove objects which are marked to be removed from scene (with noxrf)
+      let els = [...document.querySelectorAll('[noxrf]') ]
+      els.map( (el) => el.remove() )
+
+      if( !this.el.getAttribute("xrf") ){
+        this.el.setAttribute("xrf", url )
+        let ARbutton = document.querySelector('.a-enter-ar-button')
+        if( ARbutton ){  
+          ARbutton.addEventListener('click', () => {
+            AFRAME.XRF.reset() 
+          })
+        }
+      }else AFRAME.XRF.navigator.to(url)
+    }
+
+  },
+
+  manifest: { // HTML5 manifest to identify app to xrsh
+    "short_name": "XRF",
+    "name": "XR Fragment URL",
+    "icons": [ ],
+    "id": "/?source=pwa",
+    "start_url": "/?source=pwa",
+    "background_color": "#3367D6",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#3367D6",
+    "shortcuts": [
+      {
+        "name": "What is the latest news?",
+        "cli":{
+          "usage":  "helloworld <type> [options]",
+          "example": "helloworld news",
+          "args":{
+            "--latest": {type:"string"}
+          }
+        },
+        "short_name": "Today",
+        "description": "View weather information for today",
+        "url": "/today?source=pwa",
+        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
+      }
+    ],
+    "description": "Hello world information",
+    "screenshots": [
+      {
+        "src": "/images/screenshot1.png",
+        "type": "image/png",
+        "sizes": "540x720",
+        "form_factor": "narrow"
+      }
+    ],
+    "help":`
+Helloworld application 
+
+This is a help file which describes the application.
+It will be rendered thru troika text, and will contain
+headers based on non-punctualized lines separated by linebreaks,
+in above's case "\nHelloworld application\n" will qualify as header.
+    `
+  }
+
+});
+