1.0.285

fix(core): update
1.0.284
2024-02-05 13:12:27 +01:00 · 2024-02-05 13:12:26 +01:00 · 2024-02-05 13:11:06 +01:00 · 2024-02-05 13:11:05 +01:00 · 2024-02-05 10:07:50 +01:00 · 2024-02-05 10:07:49 +01:00
28 changed files with 2288 additions and 111 deletions
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@design.estate/dees-catalog",
-  "version": "1.0.249",
+  "version": "1.0.285",
  "private": false,
  "description": "website for lossless.com",
  "main": "dist_ts_web/index.js",
@ -16,7 +16,7 @@
  "license": "MIT",
  "dependencies": {
    "@design.estate/dees-domtools": "^2.0.57",
-    "@design.estate/dees-element": "^2.0.33",
+    "@design.estate/dees-element": "^2.0.34",
    "@design.estate/dees-wcctools": "^1.0.87",
    "@fortawesome/fontawesome-svg-core": "^6.5.1",
    "@fortawesome/free-brands-svg-icons": "^6.5.1",
@ -26,18 +26,23 @@
    "@push.rocks/smartpromise": "^4.0.3",
    "@push.rocks/smartstring": "^4.0.13",
    "@tsclass/tsclass": "^4.0.46",
+    "@webcontainer/api": "^1.1.9",
+    "apexcharts": "^3.45.2",
    "highlight.js": "11.9.0",
    "ibantools": "^4.3.9",
-    "pdfjs-dist": "^4.0.379"
+    "monaco-editor": "^0.45.0",
+    "pdfjs-dist": "^4.0.379",
+    "xterm": "^5.3.0",
+    "xterm-addon-fit": "^0.8.0"
  },
  "devDependencies": {
    "@git.zone/tsbuild": "^2.1.72",
    "@git.zone/tsbundle": "^2.0.15",
    "@git.zone/tstest": "^1.0.86",
-    "@git.zone/tswatch": "^2.0.21",
+    "@git.zone/tswatch": "^2.0.23",
    "@push.rocks/projectinfo": "^5.0.2",
    "@push.rocks/tapbundle": "^5.0.15",
-    "@types/node": "^20.11.5"
+    "@types/node": "^20.11.16"
  },
  "files": [
    "ts/**/*",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -9,8 +9,8 @@ dependencies:
    specifier: ^2.0.57
    version: 2.0.57
  '@design.estate/dees-element':
-    specifier: ^2.0.33
-    version: 2.0.33
+    specifier: ^2.0.34
+    version: 2.0.34
  '@design.estate/dees-wcctools':
    specifier: ^1.0.87
    version: 1.0.87
@ -38,15 +38,30 @@ dependencies:
  '@tsclass/tsclass':
    specifier: ^4.0.46
    version: 4.0.46
+  '@webcontainer/api':
+    specifier: ^1.1.9
+    version: 1.1.9
+  apexcharts:
+    specifier: ^3.45.2
+    version: 3.45.2
  highlight.js:
    specifier: 11.9.0
    version: 11.9.0
  ibantools:
    specifier: ^4.3.9
    version: 4.3.9
+  monaco-editor:
+    specifier: ^0.45.0
+    version: 0.45.0
  pdfjs-dist:
    specifier: ^4.0.379
    version: 4.0.379
+  xterm:
+    specifier: ^5.3.0
+    version: 5.3.0
+  xterm-addon-fit:
+    specifier: ^0.8.0
+    version: 0.8.0(xterm@5.3.0)

 devDependencies:
  '@git.zone/tsbuild':
@ -57,10 +72,10 @@ devDependencies:
    version: 2.0.15
  '@git.zone/tstest':
    specifier: ^1.0.86
-    version: 1.0.86(@types/node@20.11.5)(sinon@17.0.1)
+    version: 1.0.86(@types/node@20.11.16)(sinon@17.0.1)
  '@git.zone/tswatch':
-    specifier: ^2.0.21
-    version: 2.0.21(@types/node@20.11.5)
+    specifier: ^2.0.23
+    version: 2.0.23(@types/node@20.11.16)
  '@push.rocks/projectinfo':
    specifier: ^5.0.2
    version: 5.0.2
@ -68,8 +83,8 @@ devDependencies:
    specifier: ^5.0.15
    version: 5.0.15(sinon@17.0.1)
  '@types/node':
-    specifier: ^20.11.5
-    version: 20.11.5
+    specifier: ^20.11.16
+    version: 20.11.16

 packages:

@ -253,13 +268,13 @@ packages:
      - supports-color
    dev: false

-  /@design.estate/dees-element@2.0.33:
-    resolution: {integrity: sha512-04M1pXOtslQ5F806njna2UGlgOuzyYZPr3KR7bFk+Pf8fCu3oWign1+Ey8hkD/p1BdCOHKFMoQJViNwWzu20jg==}
+  /@design.estate/dees-element@2.0.34:
+    resolution: {integrity: sha512-4S5liIPTezEyFen6N6LBpSoYqHe05wvKJw/597SMyjgnvtW+e30MFdN+QTYY428xnKcIVId+tMVlJRZzSf0orw==}
    dependencies:
      '@design.estate/dees-domtools': 2.0.57
      '@push.rocks/isounique': 1.0.5
      '@push.rocks/smartrx': 3.0.7
-      lit: 3.1.1
+      lit: 3.1.2
    transitivePeerDependencies:
      - supports-color
    dev: false
@ -268,7 +283,7 @@ packages:
    resolution: {integrity: sha512-bZh7brZDRriN4RbLjMriSh588TryIVZbB5gKDuf+YdZDPjm0AAlCp/nOiyvho3ITA8SERbgIIiqWVf0LbgFyoQ==}
    dependencies:
      '@design.estate/dees-domtools': 2.0.57
-      '@design.estate/dees-element': 2.0.33
+      '@design.estate/dees-element': 2.0.34
      '@push.rocks/smartdelay': 3.0.5
      lit: 3.1.1
    transitivePeerDependencies:
@ -555,13 +570,13 @@ packages:
      - supports-color
    dev: true

-  /@git.zone/tsrun@1.2.46(@types/node@20.11.5):
+  /@git.zone/tsrun@1.2.46(@types/node@20.11.16):
    resolution: {integrity: sha512-8miFVBle9Mnjx+uPGI/P+EuWcIOXWjBAkdjN5IYbdp5Ytt4xQODCLh4JSnC9h56UeU1nUxCAxZeJs2e9TXrivA==}
    hasBin: true
    dependencies:
      '@push.rocks/smartfile': 10.0.41
      '@push.rocks/smartshell': 3.0.3
-      ts-node: 10.9.2(@types/node@20.11.5)(typescript@5.1.6)
+      ts-node: 10.9.2(@types/node@20.11.16)(typescript@5.1.6)
      typescript: 5.1.6
    transitivePeerDependencies:
      - '@swc/core'
@ -569,13 +584,13 @@ packages:
      - '@types/node'
    dev: true

-  /@git.zone/tstest@1.0.86(@types/node@20.11.5)(sinon@17.0.1):
+  /@git.zone/tstest@1.0.86(@types/node@20.11.16)(sinon@17.0.1):
    resolution: {integrity: sha512-ec95MNeA21L+ob+lvLVCmwPTTC1BY+v/JHLYZ9DOZ9+9buLgx+cJ7VkwGBJCnlWJtqEtJosUrFKTih36iNuT3g==}
    hasBin: true
    dependencies:
      '@api.global/typedserver': 3.0.20
      '@git.zone/tsbundle': 2.0.15
-      '@git.zone/tsrun': 1.2.46(@types/node@20.11.5)
+      '@git.zone/tsrun': 1.2.46(@types/node@20.11.16)
      '@push.rocks/consolecolor': 2.0.1
      '@push.rocks/smartbrowser': 2.0.6
      '@push.rocks/smartdelay': 3.0.5
@ -598,16 +613,16 @@ packages:
      - utf-8-validate
    dev: true

-  /@git.zone/tswatch@2.0.21(@types/node@20.11.5):
-    resolution: {integrity: sha512-7Q0I0dIZD+ApR4MWeykvf+cYk+I6t1Re+jhAj8xrLqZBetvWv9C315jG6Brx96DEYz4th6EvyVUONQkLndBI4w==}
+  /@git.zone/tswatch@2.0.23(@types/node@20.11.16):
+    resolution: {integrity: sha512-ADloBDzuyyOjzDLwOVx+5lBEKJdx+r58Qat+oCDOOlRMwDOJcjI4qQOU8PVzFYCh7otraia6aNeXWXfKgKA92g==}
    hasBin: true
    dependencies:
-      '@api.global/typedserver': 3.0.19
+      '@api.global/typedserver': 3.0.20
      '@git.zone/tsbundle': 2.0.15
-      '@git.zone/tsrun': 1.2.46(@types/node@20.11.5)
+      '@git.zone/tsrun': 1.2.46(@types/node@20.11.16)
      '@push.rocks/early': 4.0.4
      '@push.rocks/lik': 6.0.12
-      '@push.rocks/smartchok': 1.0.23
+      '@push.rocks/smartchok': 1.0.32
      '@push.rocks/smartcli': 4.0.8
      '@push.rocks/smartdelay': 3.0.5
      '@push.rocks/smartlog': 3.0.3
@ -618,7 +633,9 @@ packages:
      - '@swc/core'
      - '@swc/wasm'
      - '@types/node'
+      - bufferutil
      - supports-color
+      - utf-8-validate
    dev: true

  /@isaacs/cliui@8.0.2:
@ -656,11 +673,21 @@ packages:
  /@lit-labs/ssr-dom-shim@1.1.2:
    resolution: {integrity: sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==}

+  /@lit-labs/ssr-dom-shim@1.2.0:
+    resolution: {integrity: sha512-yWJKmpGE6lUURKAaIltoPIE/wrbY3TEkqQt+X0m+7fQNnAv0keydnYvbiJFP1PnMhizmIWRWOG5KLhYyc/xl+g==}
+    dev: false
+
  /@lit/reactive-element@2.0.3:
    resolution: {integrity: sha512-e067EuTNNgOHm1tZcc0Ia7TCzD/9ZpoPegHKgesrGK6pSDRGkGDAQbYuQclqLPIoJ9eC8Kb9mYtGryWcM5AywA==}
    dependencies:
      '@lit-labs/ssr-dom-shim': 1.1.2

+  /@lit/reactive-element@2.0.4:
+    resolution: {integrity: sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.2.0
+    dev: false
+
  /@mapbox/node-pre-gyp@1.0.11:
    resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
    hasBin: true
@ -849,6 +876,15 @@ packages:
      chokidar: 3.5.3
    dev: true

+  /@push.rocks/smartchok@1.0.32:
+    resolution: {integrity: sha512-bBJ4UX3jjItZo0mdDxQcDdRqbuIyCeDo4XXvkX2yLqkHJHFxQbL2lTDrX4l7cTaQ7361AYSsvOsBkZyPvCN6mg==}
+    dependencies:
+      '@push.rocks/lik': 6.0.12
+      '@push.rocks/smartpromise': 4.0.3
+      '@push.rocks/smartrx': 3.0.7
+      '@tempfix/watcher': 2.3.0
+    dev: true
+
  /@push.rocks/smartcli@4.0.8:
    resolution: {integrity: sha512-B4F3nqq7ko8tev1wxGdFnh/zSDDP8Q9LpEOb3wTf0jayyhYetFQ7n6zi4J9fhXYBKPkJSyQEBoOfRmgJyeLHkA==}
    dependencies:
@ -1555,8 +1591,8 @@ packages:
      type-detect: 4.0.8
    dev: true

-  /@sinonjs/commons@3.0.0:
-    resolution: {integrity: sha512-jXBtWAF4vmdNmZgD5FoKsVLv3rPgDnLgPbU84LIJ3otV44vJlDRokVng5v8NFJdCf/da9legHcKaRuZs4L7faA==}
+  /@sinonjs/commons@3.0.1:
+    resolution: {integrity: sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==}
    dependencies:
      type-detect: 4.0.8
    dev: true
@ -1564,7 +1600,7 @@ packages:
  /@sinonjs/fake-timers@11.2.2:
    resolution: {integrity: sha512-G2piCSxQ7oWOxwGSAyFHfPIsyeJGXYtc6mFbnFA+kRXkiEnTl8c/8jul2S329iFBnDI9HGoeWWAZvuvOkZccgw==}
    dependencies:
-      '@sinonjs/commons': 3.0.0
+      '@sinonjs/commons': 3.0.1
    dev: true

  /@sinonjs/samsam@8.0.0:
@ -1590,6 +1626,12 @@ packages:
      defer-to-connect: 2.0.1
    dev: true

+  /@tempfix/watcher@2.3.0:
+    resolution: {integrity: sha512-a2qVQffcrnetehvwsN+LdipxQ6jejwZLgAvS9/91+C0gP4CKyikY01c0tSs0I4tSL7qHdCw1Fx0quLw+A9uyLA==}
+    dependencies:
+      stubborn-fs: 1.2.5
+    dev: true
+
  /@tsclass/tsclass@3.0.48:
    resolution: {integrity: sha512-hC65UvDlp9qvsl6OcIZXz0JNiWZ0gyzsTzbXpg215sGxopgbkOLCr6E0s4qCTnweYm95gt2AdY95uP7M7kExaQ==}
    dependencies:
@ -1620,7 +1662,7 @@ packages:
  /@types/accepts@1.3.7:
    resolution: {integrity: sha512-Pay9fq2lM2wXPWbteBsRAGiWH2hig4ZE2asK+mm7kUzlxRTfL961rj89I6zV/E3PcIkDqyuBEcMxFT7rccugeQ==}
    dependencies:
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
    dev: true

  /@types/babel__code-frame@7.0.6:
@ -1631,7 +1673,7 @@ packages:
    resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
    dependencies:
      '@types/connect': 3.4.38
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
    dev: true

  /@types/buffer-json@2.0.3:
@ -1657,21 +1699,21 @@ packages:
  /@types/clean-css@4.2.11:
    resolution: {integrity: sha512-Y8n81lQVTAfP2TOdtJJEsCoYl1AnOkqDqMvXb9/7pfgZZ7r8YrEyurrAvAoAjHOGXKRybay+5CsExqIH6liccw==}
    dependencies:
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
      source-map: 0.6.1
    dev: true

  /@types/co-body@6.1.3:
    resolution: {integrity: sha512-UhuhrQ5hclX6UJctv5m4Rfp52AfG9o9+d9/HwjxhVB5NjXxr5t9oKgJxN8xRHgr35oo8meUEHUPFWiKg6y71aA==}
    dependencies:
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
      '@types/qs': 6.9.11
    dev: true

  /@types/connect@3.4.38:
    resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
    dependencies:
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
    dev: true

  /@types/content-disposition@0.5.8:
@ -1692,13 +1734,13 @@ packages:
      '@types/connect': 3.4.38
      '@types/express': 4.17.21
      '@types/keygrip': 1.0.6
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
    dev: true

  /@types/cors@2.8.17:
    resolution: {integrity: sha512-8CGDvrBj1zgo2qE+oS3pOCyYNqCPryMWY2bGfwA0dcfopWGgxs+78df0Rs3rc9THP4JkOhLsAa+15VdpAqkcUA==}
    dependencies:
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
    dev: true

  /@types/debounce@1.2.4:
@ -1718,7 +1760,7 @@ packages:
  /@types/express-serve-static-core@4.17.41:
    resolution: {integrity: sha512-OaJ7XLaelTgrvlZD8/aa0vvvxZdUmlCn6MtWeB7TkiKW70BQLc9XEPpDLPdbo52ZhXUCrznlWdCHWxJWtdyajA==}
    dependencies:
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
      '@types/qs': 6.9.11
      '@types/range-parser': 1.2.7
      '@types/send': 0.17.4
@ -1736,21 +1778,21 @@ packages:
  /@types/from2@2.3.5:
    resolution: {integrity: sha512-giavnjf3kNlJnE+HpZA1CQ3UKHxgehzsTuIMGda8pGMbOiLYGVNADEskey44OZcADHm/HOoBany8IV+0x28XFw==}
    dependencies:
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
    dev: true

  /@types/fs-extra@11.0.4:
    resolution: {integrity: sha512-yTbItCNreRooED33qjunPthRcSjERP1r4MqCZc7wv0u2sUkzTFp45tgUfS5+r7FrZPdmCCNflLhVSP/o+SemsQ==}
    dependencies:
      '@types/jsonfile': 6.1.4
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
    dev: true

  /@types/glob@8.1.0:
    resolution: {integrity: sha512-IO+MJPVhoqz+28h1qLAcBEH2+xHMK6MTyHJc7MTnnYb6wsoLR29POVGJ7LycmVXIqyy/4/2ShP5sUwTXuOwb/w==}
    dependencies:
      '@types/minimatch': 5.1.2
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
    dev: true

  /@types/hast@3.0.3:
@ -1805,7 +1847,7 @@ packages:
  /@types/jsonfile@6.1.4:
    resolution: {integrity: sha512-D5qGUYwjvnNNextdU59/+fI+spnwtTFmyQP0h+PfIOSkNfpU6AOICUOkm4i0OnSk+NyjdPJrxCDro0sJsWlRpQ==}
    dependencies:
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
    dev: true

  /@types/keygrip@1.0.6:
@ -1828,7 +1870,7 @@ packages:
      '@types/http-errors': 2.0.4
      '@types/keygrip': 1.0.6
      '@types/koa-compose': 3.2.8
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
    dev: true

  /@types/mdast@4.0.3:
@ -1864,8 +1906,8 @@ packages:
    resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
    dev: false

-  /@types/node@20.11.5:
-    resolution: {integrity: sha512-g557vgQjUUfN76MZAN/dt1z3dzcUsimuysco0KeluHgrPdJXkP/XdAURgyO2W9fZWHRtRBiVKzKn8vyOAwlG+w==}
+  /@types/node@20.11.16:
+    resolution: {integrity: sha512-gKb0enTmRCzXSSUJDq6/sPcqrfCv2mkkG6Jt/clpn5eiCbKTY+SgZUxo+p8ZKMof5dCp9vHQUAB7wOUTod22wQ==}
    dependencies:
      undici-types: 5.26.5

@ -1896,7 +1938,7 @@ packages:
    resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==}
    dependencies:
      '@types/mime': 1.3.5
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
    dev: true

  /@types/serve-static@1.15.5:
@ -1904,7 +1946,7 @@ packages:
    dependencies:
      '@types/http-errors': 2.0.4
      '@types/mime': 3.0.4
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
    dev: true

  /@types/shortid@0.0.29:
@ -1934,7 +1976,7 @@ packages:
  /@types/through2@2.0.41:
    resolution: {integrity: sha512-ryQ0tidWkb1O1JuYvWKyMLYEtOWDqF5mHerJzKz/gQpoAaJq2l/dsMPBF0B5BNVT34rbARYJ5/tsZwLfUi2kwQ==}
    dependencies:
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16

  /@types/trusted-types@2.0.7:
    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
@ -1972,20 +2014,20 @@ packages:
  /@types/ws@7.4.7:
    resolution: {integrity: sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==}
    dependencies:
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
    dev: true

  /@types/ws@8.5.10:
    resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==}
    dependencies:
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
    dev: true

  /@types/yauzl@2.10.3:
    resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
    requiresBuild: true
    dependencies:
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
    dev: true
    optional: true

@ -2084,11 +2126,19 @@ packages:
      - utf-8-validate
    dev: true

+  /@webcontainer/api@1.1.9:
+    resolution: {integrity: sha512-Sp6PV0K9D/3f8fSbCubqhfmBFH8XbngZCBOCF+aExyGqnz2etmw+KYvbQ/JxYvYX5KPaSxM+asFQwoP2RHl5cg==}
+    dev: false
+
  /@xmldom/xmldom@0.8.10:
    resolution: {integrity: sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==}
    engines: {node: '>=10.0.0'}
    dev: true

+  /@yr/monotone-cubic-spline@1.0.3:
+    resolution: {integrity: sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==}
+    dev: false
+
  /abbrev@1.1.1:
    resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
    requiresBuild: true
@ -2202,6 +2252,18 @@ packages:
      picomatch: 2.3.1
    dev: true

+  /apexcharts@3.45.2:
+    resolution: {integrity: sha512-PpuM4sJWy70sUh5U1IFn1m1p45MdHSChLUNnqEoUUUHSU2IHZugFrsVNhov1S8Q0cvfdrCRCvdBtHGSs6PSAWQ==}
+    dependencies:
+      '@yr/monotone-cubic-spline': 1.0.3
+      svg.draggable.js: 2.2.2
+      svg.easing.js: 2.0.0
+      svg.filter.js: 2.0.2
+      svg.pathmorphing.js: 0.1.3
+      svg.resize.js: 1.4.3
+      svg.select.js: 3.0.1
+    dev: false
+
  /aproba@2.0.0:
    resolution: {integrity: sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==}
    requiresBuild: true
@ -3048,7 +3110,7 @@ packages:
    dependencies:
      '@types/cookie': 0.4.1
      '@types/cors': 2.8.17
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
      accepts: 1.3.8
      base64id: 2.0.0
      cookie: 0.4.2
@ -4324,6 +4386,14 @@ packages:
      '@lit/reactive-element': 2.0.3
      lit-html: 3.1.1

+  /lit-element@4.0.4:
+    resolution: {integrity: sha512-98CvgulX6eCPs6TyAIQoJZBCQPo80rgXR+dVBs61cstJXqtI+USQZAbA4gFHh6L/mxBx9MrgPLHLsUgDUHAcCQ==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.2.0
+      '@lit/reactive-element': 2.0.4
+      lit-html: 3.1.2
+    dev: false
+
  /lit-html@1.4.1:
    resolution: {integrity: sha512-B9btcSgPYb1q4oSOb/PrOT6Z/H+r6xuNzfH4lFli/AWhYwdtrgQkQWBbIc6mdnf6E2IL3gDXdkkqNktpU0OZQA==}
    dev: true
@ -4333,6 +4403,12 @@ packages:
    dependencies:
      '@types/trusted-types': 2.0.7

+  /lit-html@3.1.2:
+    resolution: {integrity: sha512-3OBZSUrPnAHoKJ9AMjRL/m01YJxQMf+TMHanNtTHG68ubjnZxK0RFl102DPzsw4mWnHibfZIBJm3LWCZ/LmMvg==}
+    dependencies:
+      '@types/trusted-types': 2.0.7
+    dev: false
+
  /lit@3.1.1:
    resolution: {integrity: sha512-hF1y4K58+Gqrz+aAPS0DNBwPqPrg6P04DuWK52eMkt/SM9Qe9keWLcFgRcEKOLuDlRZlDsDbNL37Vr7ew1VCuw==}
    dependencies:
@ -4340,6 +4416,14 @@ packages:
      lit-element: 4.0.3
      lit-html: 3.1.1

+  /lit@3.1.2:
+    resolution: {integrity: sha512-VZx5iAyMtX7CV4K8iTLdCkMaYZ7ipjJZ0JcSdJ0zIdGxxyurjIn7yuuSxNBD7QmjvcNJwr0JS4cAdAtsy7gZ6w==}
+    dependencies:
+      '@lit/reactive-element': 2.0.4
+      lit-element: 4.0.4
+      lit-html: 3.1.2
+    dev: false
+
  /locate-path@3.0.0:
    resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==}
    engines: {node: '>=6'}
@ -5095,6 +5179,10 @@ packages:
      yargs-unparser: 1.6.0
    dev: true

+  /monaco-editor@0.45.0:
+    resolution: {integrity: sha512-mjv1G1ZzfEE3k9HZN0dQ2olMdwIfaeAAjFiwNprLfYNRSz7ctv9XuCT7gPtBGrMUeV1/iZzYKj17Khu1hxoHOA==}
+    dev: false
+
  /ms@2.0.0:
    resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=}
    dev: true
@ -5147,10 +5235,10 @@ packages:
    engines: {node: '>= 0.6'}
    dev: true

-  /nise@5.1.7:
-    resolution: {integrity: sha512-wWtNUhkT7k58uvWTB/Gy26eA/EJKtPZFVAhEilN5UYVmmGRYOURbejRUyKm0Uu9XVEW7K5nBOZfR8VMB4QR2RQ==}
+  /nise@5.1.9:
+    resolution: {integrity: sha512-qOnoujW4SV6e40dYxJOb3uvuoPHtmLzIk4TFo+j0jPJoC+5Z9xja5qH5JZobEPsa8+YYphMrOSwnrshEhG2qww==}
    dependencies:
-      '@sinonjs/commons': 3.0.0
+      '@sinonjs/commons': 3.0.1
      '@sinonjs/fake-timers': 11.2.2
      '@sinonjs/text-encoding': 0.7.2
      just-extend: 6.2.0
@ -5994,11 +6082,11 @@ packages:
  /sinon@17.0.1:
    resolution: {integrity: sha512-wmwE19Lie0MLT+ZYNpDymasPHUKTaZHUH/pKEubRXIzySv9Atnlw+BUMGCzWgV7b7wO+Hw6f1TEOr0IUnmU8/g==}
    dependencies:
-      '@sinonjs/commons': 3.0.0
+      '@sinonjs/commons': 3.0.1
      '@sinonjs/fake-timers': 11.2.2
      '@sinonjs/samsam': 8.0.0
      diff: 5.1.0
-      nise: 5.1.7
+      nise: 5.1.9
      supports-color: 7.2.0
    dev: true

@ -6228,6 +6316,10 @@ packages:
    resolution: {integrity: sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==}
    dev: true

+  /stubborn-fs@1.2.5:
+    resolution: {integrity: sha512-H2N9c26eXjzL/S/K+i/RHHcFanE74dptvvjM8iwzwbVcWY/zjBbgRqF3K0DY4+OD+uTTASTBvDoxPDaPN02D7g==}
+    dev: true
+
  /supports-color@5.5.0:
    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
    engines: {node: '>=4'}
@ -6249,6 +6341,60 @@ packages:
      has-flag: 4.0.0
    dev: true

+  /svg.draggable.js@2.2.2:
+    resolution: {integrity: sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
+  /svg.easing.js@2.0.0:
+    resolution: {integrity: sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
+  /svg.filter.js@2.0.2:
+    resolution: {integrity: sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
+  /svg.js@2.7.1:
+    resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==}
+    dev: false
+
+  /svg.pathmorphing.js@0.1.3:
+    resolution: {integrity: sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
+  /svg.resize.js@1.4.3:
+    resolution: {integrity: sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+      svg.select.js: 2.1.2
+    dev: false
+
+  /svg.select.js@2.1.2:
+    resolution: {integrity: sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
+  /svg.select.js@3.0.1:
+    resolution: {integrity: sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==}
+    engines: {node: '>= 0.8.0'}
+    dependencies:
+      svg.js: 2.7.1
+    dev: false
+
  /sweet-scroll@4.0.0:
    resolution: {integrity: sha512-mR6fRsAQANtm3zpzhUE73KAOt2aT4ZsWzNSggiEsSqdO6Zh4gM7ioJG81EngrZEl0XAc3ZvzEfhxggOoEBc8jA==}
    dev: false
@ -6364,7 +6510,7 @@ packages:
    resolution: {integrity: sha512-AqTiAOLcj85xS7vQ8QkAV41hPDIJ71XJB4RCUrzo/1GM2CQwhkJGaf9Hgr7BOugMRpgGUrqRg/DrBDl4H40+8g==}
    dev: false

-  /ts-node@10.9.2(@types/node@20.11.5)(typescript@5.1.6):
+  /ts-node@10.9.2(@types/node@20.11.16)(typescript@5.1.6):
    resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==}
    hasBin: true
    peerDependencies:
@ -6383,7 +6529,7 @@ packages:
      '@tsconfig/node12': 1.0.11
      '@tsconfig/node14': 1.0.3
      '@tsconfig/node16': 1.0.4
-      '@types/node': 20.11.5
+      '@types/node': 20.11.16
      acorn: 8.11.3
      acorn-walk: 8.3.2
      arg: 4.1.3
@ -6871,6 +7017,18 @@ packages:
    engines: {node: '>=0.4.0'}
    dev: true

+  /xterm-addon-fit@0.8.0(xterm@5.3.0):
+    resolution: {integrity: sha512-yj3Np7XlvxxhYF/EJ7p3KHaMt6OdwQ+HDu573Vx1lRXsVxOcnVJs51RgjZOouIZOczTsskaS+CpXspK81/DLqw==}
+    peerDependencies:
+      xterm: ^5.0.0
+    dependencies:
+      xterm: 5.3.0
+    dev: false
+
+  /xterm@5.3.0:
+    resolution: {integrity: sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==}
+    dev: false
+
  /y18n@4.0.3:
    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
    dev: true
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-catalog',
-  version: '1.0.249',
+  version: '1.0.285',
  description: 'website for lossless.com'
 }
--- a/ts_web/elements/00colors.ts
+++ b/ts_web/elements/00colors.ts
@ -1,11 +1,13 @@
 export const dark = {
  blue: '#0050b9',
  blueActive: '#0069f2',
+  blueMuted: '#012452',
  text: '#ffffff',
 }

 export const bright = {
  blue: '#0050b9',
  blueActive: '#0069f2',
+  blueMuted: '#0069f2',
  text: '#333333',
 }
--- a/ts_web/elements/dees-appui-activitylog.ts
+++ b/ts_web/elements/dees-appui-activitylog.ts
@ -0,0 +1,239 @@
+import * as plugins from './00plugins.js';
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { DeesContextmenu } from './dees-contextmenu.js';
+
+@customElement('dees-appui-activitylog')
+export class DeesAppuiActivitylog extends DeesElement {
+  // STATIC
+  public static demo = () => html`<dees-appui-activitylog></dees-appui-activitylog>`;
+
+  // INSTANCE
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        color: #fff;
+        position: relative;
+        display: block;
+        width: 100%;
+        max-width: 300px;
+        height: 100%;
+        background: #111c28;
+        font-family: 'Intel One Mono', sans-serif;
+        border-left: 1px solid #202020;
+        cursor: default;
+      }
+      .maincontainer {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        height: 100%;
+        width: 100%;
+      }
+
+      .topbar {
+        position: absolute;
+        top: 0px;
+        height: 32px;
+        width: 100%;
+        padding: 0px 12px 0px 12px;
+        background: #0e151f;
+      }
+
+      .topbar .heading {
+        text-align: left;
+        line-height: 24px;
+        padding-top: 8px;
+        font-weight: 500;
+        font-size: 14px;
+        font-family: 'Roboto', 'Inter', sans-serif;
+      }
+
+      .activityContainer {
+        position: absolute;
+        top: 32px;
+        bottom: 40px;
+        width: 100%;
+        padding: 8px 0px;
+        overflow-y: scroll;
+
+      }
+
+      .streamingIndicator {
+        font-size: 12px;
+        text-align: center;
+        padding-top: 16px;
+        color: #888
+      }
+
+      .streamingIndicator.bottom {
+        padding-top: 0px;
+        padding-bottom: 16px;
+      }
+
+      .activityentry {
+        min-height: 30px;
+        font-size: 12px;
+        padding: 8px 16px;
+        border-bottom: 1px dotted #ffffff20;
+      }
+
+      .activityentry:last-of-type {
+        border-bottom: 1px solid #ffffff00;
+      }
+
+      .activityentry:hover {
+        background: #00000080;
+      }
+
+      .timestamp {
+        color: #ff8787;
+      }
+
+      .searchbox {
+        position: absolute;
+        bottom: 0px;
+        width: 100%;
+        height: 40px;
+        background: #0e151f;
+      }
+      .searchbox input {
+        color: #fff;
+        background: none;
+        width: 100%;
+        height: 40px;
+        line-height: 32px;
+        border: none;
+        padding: 4px 12px;
+        font-family: 'Intel One Mono', sans-serif;
+      }
+
+      .searchbox input:focus {
+        outline: none;
+      }
+
+      .bottomShadow {
+        position: absolute;
+        width: 100%;
+        height: 32px;
+        bottom: 40px;
+        background: linear-gradient(180deg, #111c2800 0%, #0e151f 100%);
+        pointer-events: none;
+      }
+      .topShadow {
+        position: absolute;
+        width: 100%;
+        height: 32px;
+        top: 32px;
+        background: linear-gradient(0deg, #111c2800 0%, #0e151f 100%);
+        pointer-events: none;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style></style>
+      <div class="maincontainer">
+        <div class="topbar">
+          <div class="heading">Activity Log</div>
+        </div>
+        <div class="activityContainer">
+          <div class="streamingIndicator">streaming...</div>
+          <div class="activityentry" @contextmenu=${async eventArg => {
+            DeesContextmenu.openContextMenuWithOptions(eventArg, [
+              {
+                name: 'app settings',
+                action: async () => {},
+              },
+              {
+                name: 'account settings',
+                action: async () => {},
+              },
+              {
+                name: 'logout',
+                action: async () => {},
+              },
+            ]);
+          }}>
+            <span class="timestamp">22:01:</span> Max Mustermann logged in
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:02:</span> Max Mustermann viewed an invoice
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:03:</span> Max Mustermann added a new contact
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:04:</span> Max Mustermann updated account settings
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:05:</span> Max Mustermann logged out
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:06:</span> Max Mustermann logged in
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:07:</span> Max Mustermann created a new invoice
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:08:</span> Max Mustermann sent an invoice
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:09:</span> Max Mustermann viewed reports
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:10:</span> Max Mustermann logged out
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:11:</span> Max Mustermann logged in
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:12:</span> Max Mustermann deleted an invoice
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:13:</span> Max Mustermann contacted support
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:14:</span> Max Mustermann added a new user
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:15:</span> Max Mustermann changed password
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:16:</span> Max Mustermann logged out
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:17:</span> Max Mustermann logged in
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:18:</span> Max Mustermann archived an invoice
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:19:</span> Max Mustermann approved a payment
+          </div>
+          <div class="activityentry">
+            <span class="timestamp">22:20:</span> Max Mustermann logged out
+          </div>
+          <div class="streamingIndicator bottom">loading more...</div>
+        </div>
+        <div class="searchbox">
+          <input type="text" placeholder="Search" />
+        </div>
+        <div class="topShadow"></div>
+        <div class="bottomShadow"></div>
+      </div>
+    `;
+  }
+}
--- a/ts_web/elements/dees-appui-appbar.ts
+++ b/ts_web/elements/dees-appui-appbar.ts
@ -0,0 +1,77 @@
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+@customElement('dees-appui-appbar')
+export class DeesAppuiBar extends DeesElement {
+  public static demo = () => html`<dees-appui-appbar></dees-appui-appbar>`;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+        height: 100%;
+        width: 100%;
+        height: 40px;
+        border-bottom: 1px solid #202020;
+        background: #000000;
+        color: #ffffff80;
+        font-size: 12px;
+        display: grid;
+        grid-template-columns:  ${cssManager.cssGridColumns(3, 20)};
+        -webkit-app-region: drag;
+      }
+
+      .menus {
+        display: flex;
+        padding-left: 8px;
+        cursor: default;
+      }
+
+      .menuItem {
+        line-height: 24px;
+        padding: 0px 8px;
+        margin: 8px 0px;
+        border-radius: 4px;
+        -webkit-app-region: no-drag;
+      }
+
+      .menuItem:hover {
+        background: #ffffff20;
+      }
+
+      .breadcrumbs {
+        height: 24px;
+        line-height: 24px;
+        margin: 8px;
+        border-radius: 8px;
+        text-align: center;
+      }
+    `,
+  ];
+
+  // INSTANCE
+  public render(): TemplateResult {
+    return html`
+      <div class="menus">
+        <dees-windowcontrols></dees-windowcontrols>
+        <div class="menuItem">File</div>
+        <div class="menuItem">View</div>
+        <div class="menuItem">Help</div>
+        <div class="menuItem">Terminal</div>
+      </div>
+      <div class="breadcrumbs">
+        tool:social.io > org:design.estate > prop:lossless.com
+      </div>
+      <div class="account"></div>
+    `;
+  }
+}
--- a/ts_web/elements/dees-appui-base.ts
+++ b/ts_web/elements/dees-appui-base.ts
@ -0,0 +1,47 @@
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+@customElement('dees-appui-base')
+export class DeesAppuiBase extends DeesElement {
+  public static demo = () => html`<dees-appui-base></dees-appui-base>`;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+      }
+      .maingrid {
+        position: absolute;
+        top: 40px;
+        height: calc(100% - 40px);
+        width: 100%;
+        display: grid;
+        grid-template-columns: 60px 240px auto 240px;
+      }
+    `,
+  ];
+
+  // INSTANCE
+  public render(): TemplateResult {
+    return html`
+      <style></style>
+      <dees-appui-appbar></dees-appui-appbar>
+      <div class="maingrid">
+        <dees-appui-mainmenu></dees-appui-mainmenu>
+        <dees-appui-mainselector></dees-appui-mainselector>
+        <dees-appui-maincontent></dees-appui-maincontent>
+        <dees-appui-activitylog></dees-appui-activitylog>
+      </div>
+    `;
+  }
+}
--- a/ts_web/elements/dees-appui-maincontent.ts
+++ b/ts_web/elements/dees-appui-maincontent.ts
@ -0,0 +1,161 @@
+import * as interfaces from './interfaces/index.js';
+
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+
+@customElement('dees-appui-maincontent')
+export class DeesAppuiMaincontent extends DeesElement {
+  public static demo = () => html`<dees-appui-maincontent></dees-appui-maincontent>`;
+
+  // INSTANCE
+  @property({
+    type: Array,
+  })
+  public tabs: interfaces.ITab[] = [
+    { key: 'option 1', action: () => {} },
+    { key: 'a very long option', action: () => {} },
+    { key: 'reminder: set your tabs', action: () => {} },
+    { key: 'option 4', action: () => {} },
+  ];
+
+  @property()
+  public selectedTab = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        color: #fff;
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: #161616;
+      }
+      .maincontainer {
+        position: absolute;
+        height: 100%;
+        right: 0px;
+        top: 0px;
+        width: 100%;
+      }
+
+      .topbar {
+        position: absolute;
+        width: 100%;
+        background: #000000;
+        user-select: none;
+      }
+
+      .topbar .tabsContainer {
+        padding-top: 20px;
+        padding-bottom: 0px;
+        position: relative;
+        z-index: 1;
+        display: grid;
+        margin-left: 24px;
+        font-size: 14px;
+      }
+
+      .topbar .tabsContainer .tab {
+        color: #a0a0a0;
+        white-space: nowrap;
+        margin-right: 30px;
+        padding-top: 4px;
+        padding-bottom: 12px;
+        transition: color 0.1s;
+      }
+
+      .topbar .tabsContainer .tab:hover {
+        color: #ffffff;
+      }
+
+      .topbar .tabsContainer .tab.selectedTab {
+        color: #e0e0e0;
+      }
+
+      .topbar .tabIndicator {
+        position: absolute;
+        z-index: 0;
+        left: 40px;
+        bottom: 0px;
+        height: 40px;
+        width: 40px;
+        background: #161616;
+        transition: all 0.1s;
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+        border-top: 1px solid #444444;
+      }
+
+      .mainicon {
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+        .topbar .tabsContainer {
+          grid-template-columns: repeat(${this.tabs.length}, min-content);
+        }
+      </style>
+      <div class="maincontainer">
+        <div class="topbar">
+          <div class="tabsContainer">
+            ${this.tabs.map((tabArg) => {
+              return html`
+                <div
+                  class="tab ${tabArg === this.selectedTab ? 'selectedTab' : null}"
+                  @click="${() => {
+                    this.selectedTab = tabArg;
+                    this.updateTabIndicator();
+                    tabArg.action();
+                  }}"
+                >
+                  ${tabArg.key}
+                </div>
+              `;
+            })}
+          </div>
+          <div class="tabIndicator"></div>
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * updates the indicator
+   */
+  private updateTabIndicator() {
+    let selectedTab = this.selectedTab;
+    const tabIndex = this.tabs.indexOf(selectedTab);
+    const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(
+      `.tabsContainer .tab:nth-child(${tabIndex + 1})`
+    );
+    const tabsContainer: HTMLElement = this.shadowRoot.querySelector('.tabsContainer');
+    const marginLeft = parseInt(window.getComputedStyle(tabsContainer).getPropertyValue("margin-left"));
+    const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
+    tabIndicator.style.width = selectedTabElement.clientWidth + 24 + 'px';
+    tabIndicator.style.left = selectedTabElement.offsetLeft + marginLeft - 12 + 'px';
+  }
+
+  private updateTab(tabArg: interfaces.ITab) {
+    this.selectedTab = tabArg;
+    this.updateTabIndicator();
+    this.selectedTab.action();
+  }
+
+  firstUpdated() {
+    this.updateTab(this.tabs[0]);
+  }
+}
--- a/ts_web/elements/dees-appui-mainmenu.ts
+++ b/ts_web/elements/dees-appui-mainmenu.ts
@ -0,0 +1,142 @@
+import * as plugins from './00plugins.js';
+import * as interfaces from './interfaces/index.js';
+
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import { DeesContextmenu } from './dees-contextmenu.js';
+
+/**
+ * the most left menu
+ * usually used as organization selector
+ */
+@customElement('dees-appui-mainmenu')
+export class DeesAppuiMainmenu extends DeesElement {
+  public static demo = () => html`<dees-appui-mainmenu></dees-appui-mainmenu>`;
+
+  // INSTANCE
+
+  // INSTANCE
+  @property()
+  public tabs: interfaces.ITab[] = [
+    { key: 'option 1', iconName: 'building', action: () => {} },
+    { key: 'option 2', iconName: 'building', action: () => {} },
+    { key: 'option 3', iconName: 'building', action: () => {} },
+    { key: 'option 4', iconName: 'building', action: () => {} },
+  ];
+
+  @property()
+  public selectedTab: interfaces.ITab;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      .mainContainer {
+        --menuSize: 60px;
+        color: #ccc;
+        z-index: 10;
+        display: block;
+        position: relative;
+        width: var(--menuSize);
+        height: 100%;
+        background: #000000;
+        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+        user-select: none;
+        border-right: 1px solid #202020;
+      }
+
+      .tabsContainer {
+      }
+
+      .tab {
+        padding-top: 18px;
+        font-size: 24px;
+        width: var(--menuSize);
+        height: var(--menuSize);
+        text-align: center;
+        transition: color 0.1s, background 0.2s;
+      }
+
+      .tab:hover {
+        background: rgba(255, 255, 255, 0.15);
+      }
+
+      .tab.selectedTab {
+        color: #fff;
+        background: rgba(255, 255, 255, 0.1);
+      }
+
+      .tabIndicator {
+        opacity: 0;
+        background: #4e729a;
+        position: absolute;
+        width: 5px;
+        height: calc((var(--menuSize) / 3) * 2);
+        left: 0px;
+        top: calc(var(--menuSize) - (((var(--menuSize) / 3) * 2) / 2));
+        border-top-right-radius: 7px;
+        border-bottom-right-radius: 7px;
+        transition: all 0.1s;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainContainer" @contextmenu=${(eventArg) => {
+        DeesContextmenu.openContextMenuWithOptions(eventArg, [{
+          name: 'app settings',
+          action: async () => {},
+          iconName: 'gear',
+        }])
+      }}>
+        <div class="tabsContainer">
+          ${this.tabs.map((tabArg) => {
+            return html`
+              <div
+                class="tab ${tabArg === this.selectedTab ? 'selectedTab' : null}"
+                @click="${() => {
+                  this.updateTab(tabArg);
+                }}"
+              >
+                <dees-icon iconFA="${tabArg.iconName as any}"></dees-icon>
+              </div>
+            `;
+          })}
+        </div>
+        <div class="tabIndicator"></div>
+      </div>
+    `;
+  }
+
+  private async updateTabIndicator() {
+    let selectedTab = this.selectedTab;
+    if (!selectedTab) {
+      selectedTab = this.tabs[0];
+    }
+    const tabIndex = this.tabs.indexOf(selectedTab);
+    const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(
+      `.tabsContainer .tab:nth-child(${tabIndex + 1})`
+    );
+    const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
+    const offsetTop = selectedTabElement.offsetTop;
+    tabIndicator.style.opacity = `1`;
+    tabIndicator.style.top = `calc(${offsetTop}px + (var(--menuSize) / 6))`;
+  }
+
+  updateTab(tabArg: interfaces.ITab) {
+    this.selectedTab = tabArg;
+    this.updateTabIndicator();
+    this.selectedTab.action();
+  }
+
+  firstUpdated() {
+    this.updateTab(this.tabs[0]);
+  }
+}
--- a/ts_web/elements/dees-appui-mainselector.ts
+++ b/ts_web/elements/dees-appui-mainselector.ts
@ -0,0 +1,160 @@
+import * as plugins from './00plugins.js';
+import * as interfaces from './interfaces/index.js';
+
+import { DeesContextmenu } from './dees-contextmenu.js';
+
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+/**
+ * the property selector menu
+ * mainly used to select assets within in an organization
+ */
+@customElement('dees-appui-mainselector')
+export class DeesAppuiMainselector extends DeesElement {
+  public static demo = () => html`<dees-appui-mainselector></dees-appui-mainselector>`;
+
+  // INSTANCE
+  @property()
+  public selectionOptions: interfaces.ISelectionOption[] = [
+    {
+      key: 'Overview',
+      action: () => {},
+    },
+    {
+      key: 'option 1',
+      action: () => {},
+    },
+    { key: 'option 2', action: () => {} },
+    { key: 'option 3', action: () => {} },
+    { key: 'option 4', action: () => {} },
+  ];
+
+  @property()
+  public selectedOption: interfaces.ISelectionOption = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        color: #fff;
+        position: relative;
+        display: block;
+        width: 100%;
+        max-width: 300px;
+        height: 100%;
+        background: #000000;
+        border-right: 1px solid #222222;
+      }
+      .maincontainer {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        height: 100%;
+        width: 100%;
+      }
+
+      .topbar {
+        position: absolute;
+        height: 32px;
+        width: 100%;
+      }
+
+      .topbar .heading {
+        padding-left: 16px;
+        padding-top: 8px;
+        line-height: 24px;
+        font-family: 'Roboto', 'Inter', sans-serif;
+        font-weight: 600;
+        font-size: 14px;
+      }
+
+      .selectionOptions {
+        position: absolute;
+        top: 32px;
+        padding-top: 8px;
+        left: 0px;
+        width: 100%;
+        font-family: 'Roboto', 'Inter', sans-serif;
+        font-size: 14px;
+      }
+
+      .selectionOptions .selectionOption {
+        cursor: default;
+        margin-left: 16px;
+        margin-right: 16px;
+        padding-top: 8px;
+        padding-bottom: 8px;
+        border-top: 1px dotted #303030;
+        border-left: 0px solid rgba(0, 0, 0, 0);
+        transition: all 0.1s;
+      }
+
+      .selectionOptions .selectionOption:hover {
+        border-left: 2px solid #26a69a50;
+        padding-left: 8px;
+      }
+
+      .selectionOptions .selectionOption:first-child {
+        border-top: 1px solid rgba(0, 0, 0, 0);
+      }
+
+      .selectionOptions .selectionOption.selectedOption {
+        border-left: 4px solid #26a69a;
+        padding-left: 10px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <style></style>
+      <div class="maincontainer">
+        <div class="topbar">
+          <div class="heading">Properties</div>
+        </div>
+        <div class="selectionOptions">
+          ${this.selectionOptions.map((selectionOptionArg) => {
+            return html`
+              <div
+                class="selectionOption ${this.selectedOption === selectionOptionArg
+                  ? 'selectedOption'
+                  : null}"
+                @click="${() => {
+                  this.selectOption(selectionOptionArg);
+                }}"
+                @contextmenu="${(eventArg: MouseEvent) => {
+                  DeesContextmenu.openContextMenuWithOptions(eventArg, [
+                    {
+                      name: 'property settings',
+                      action: async () => {},
+                      iconName: 'gear',
+                    },
+                  ]);
+                }}"
+              >
+                ${selectionOptionArg.key}
+              </div>
+            `;
+          })}
+        </div>
+      </div>
+    `;
+  }
+
+  private selectOption(optionArg: interfaces.ISelectionOption) {
+    this.selectedOption = optionArg;
+    this.selectedOption.action();
+  }
+
+  firstUpdated() {
+    this.selectOption(this.selectionOptions[0]);
+  }
+}
--- a/ts_web/elements/dees-chart-area.demo.ts
+++ b/ts_web/elements/dees-chart-area.demo.ts
@ -0,0 +1,21 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => {
+  return html`
+    <style>
+      .demoBox {
+        position: relative;
+        background: #000000;
+        height: 100%;
+        width: 100%;
+        padding: 40px;
+        box-sizing: border-box;
+      }
+    </style>
+    <div class="demoBox">
+      <dees-chart-area
+        .label=${'System Usage'}
+      ></dees-chart-area>
+    </div>
+  `;
+};
--- a/ts_web/elements/dees-chart-area.ts
+++ b/ts_web/elements/dees-chart-area.ts
@ -0,0 +1,214 @@
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  property,
+  state,
+  type CSSResult,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-chart-area.demo.js';
+
+import ApexCharts from 'apexcharts';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-area': DeesChartArea;
+  }
+}
+
+@customElement('dees-chart-area')
+export class DeesChartArea extends DeesElement {
+  public static demo = demoFunc;
+
+  // instance
+  @state()
+  public chart: ApexCharts;
+
+  @property()
+  public label: string = 'Untitled Chart';
+
+  private resizeObserver: ResizeObserver;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (let entry of entries) {
+        if (entry.target.classList.contains('mainbox')) {
+          this.resizeChart(); // Call resizeChart when the .mainbox size changes
+        }
+      }
+    });
+    this.registerStartupFunction(async () => {
+      this.updateComplete.then(() => {
+        const mainbox = this.shadowRoot.querySelector('.mainbox');
+        if (mainbox) {
+          this.resizeObserver.observe(mainbox); // Start observing the .mainbox element
+        }
+      });
+    });
+    this.registerGarbageFunction(async () => {
+      this.resizeObserver.disconnect();
+    })
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        font-family: 'Roboto', sans-serif;
+        color: #ccc;
+        font-weight: 600;
+        font-size: 12px;
+      }
+      .mainbox {
+        position: relative;
+        width: 100%;
+        height: 400px;
+        background: #222;
+        border-radius: 8px;
+      }
+
+      .chartTitle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        padding-top: 16px;
+      }
+      .chartContainer {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        bottom: 0px;
+        right: 0px;
+        padding: 32px 16px 16px 0px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html` <div class="mainbox">
+      <div class="chartTitle">${this.label}</div>
+      <div class="chartContainer"></div>
+    </div> `;
+  }
+
+  public async firstUpdated() {
+    const domtoolsInstance = await this.domtoolsPromise;
+    var options: ApexCharts.ApexOptions = {
+      series: [
+        {
+          name: 'cpu',
+          data: [31, 40, 28, 51, 42, 109, 100],
+        },
+        {
+          name: 'memory',
+          data: [11, 32, 45, 32, 34, 52, 41],
+        },
+      ],
+      chart: {
+        width: 0, // Adjusted for responsive width
+        height: 0, // Adjusted for responsive height
+        type: 'area',
+        toolbar: {
+          show: false, // This line disables the toolbar
+        },
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      stroke: {
+        width: 1,
+        curve: 'smooth',
+      },
+      xaxis: {
+        crosshairs: {
+          stroke: {
+            width: 1,
+            color: '#444',
+          },
+        },
+        type: 'datetime',
+        categories: [
+          '2018-09-19T00:00:00.000Z',
+          '2018-09-19T01:30:00.000Z',
+          '2018-09-19T02:30:00.000Z',
+          '2018-09-19T03:30:00.000Z',
+          '2018-09-19T04:30:00.000Z',
+          '2018-09-19T05:30:00.000Z',
+          '2018-09-19T06:30:00.000Z',
+        ],
+      },
+      yaxis: {
+        crosshairs: {
+          stroke: {
+            width: 1,
+            color: '#444',
+          },
+        },
+      },
+      tooltip: {
+        x: {
+          format: 'dd/MM/yy HH:mm',
+        },
+      },
+      grid: {
+        xaxis: {
+          lines: {
+            show: true, // This enables the grid lines along the x-axis
+          },
+        },
+        yaxis: {
+          lines: {
+            show: true,
+          },
+        },
+        borderColor: '#666', // Set the color of the grid lines
+        strokeDashArray: 2, // Solid line
+        row: {
+          colors: [], // This can be used to alternate the shading of the horizontal rows
+          opacity: 0.1,
+        },
+        column: {
+          colors: [], // For vertical column bands, not needed here but available for customization
+          opacity: 0.1,
+        },
+      },
+    };
+    this.chart = new ApexCharts(this.shadowRoot.querySelector('.chartContainer'), options);
+    await this.chart.render();
+    await this.resizeChart();
+  }
+
+  public async resizeChart() {
+    const element = this.shadowRoot.querySelector('.chartContainer');
+
+    // Get computed style of the element
+    const style = window.getComputedStyle(element);
+
+    // Extract padding values
+    const paddingTop = parseInt(style.paddingTop, 10);
+    const paddingBottom = parseInt(style.paddingBottom, 10);
+    const paddingLeft = parseInt(style.paddingLeft, 10);
+    const paddingRight = parseInt(style.paddingRight, 10);
+
+    // Calculate the actual width and height to use, subtracting padding
+    const actualWidth = element.clientWidth - paddingLeft - paddingRight;
+    const actualHeight = element.clientHeight - paddingTop - paddingBottom;
+
+    await this.chart.updateOptions({
+      chart: {
+        width: actualWidth,
+        height: actualHeight,
+      },
+    });
+  }
+}
--- a/ts_web/elements/dees-chart-log.demo.ts
+++ b/ts_web/elements/dees-chart-log.demo.ts
@ -0,0 +1,20 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => {
+  return html`
+    <style>
+      .demoBox {
+        position: relative;
+        background: #000000;
+        height: 100%;
+        width: 100%;
+        padding: 40px;
+      }
+    </style>
+    <div class="demoBox">
+      <dees-chart-log
+        .label=${'Event Log'}
+      ></dees-chart-log>
+    </div>
+  `;
+};
--- a/ts_web/elements/dees-chart-log.ts
+++ b/ts_web/elements/dees-chart-log.ts
@ -0,0 +1,89 @@
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  property,
+  state,
+  type CSSResult,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-chart-log.demo.js';
+
+import ApexCharts from 'apexcharts';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-log': DeesChartLog;
+  }
+}
+
+@customElement('dees-chart-log')
+export class DeesChartLog extends DeesElement {
+  public static demo = demoFunc;
+
+  // instance
+  @state()
+  public chart: ApexCharts;
+
+  @property()
+  public label: string = 'Untitled Chart';
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        font-family: 'Roboto', sans-serif;
+        color: #ccc;
+        font-weight: 600;
+        font-size: 12px;
+      }
+      .mainbox {
+        position: relative;
+        width: 100%;
+        height: 400px;
+        background: #222;
+        border-radius: 8px;
+        padding: 32px 16px 16px 0px;
+      }
+
+      .chartTitle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        text-align: center;
+        padding-top: 16px;
+      }
+      .chartContainer {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html` <div class="mainbox">
+      <div class="chartTitle">${this.label}</div>
+      <div class="chartContainer"></div>
+    </div> `;
+  }
+
+  public async firstUpdated() {
+    const domtoolsInstance = await this.domtoolsPromise;
+    
+  }
+
+  public async updateLog() {
+    
+  }
+}
--- a/ts_web/elements/dees-editor-markdown.ts
+++ b/ts_web/elements/dees-editor-markdown.ts
@ -0,0 +1,98 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+  domtools
+} from '@design.estate/dees-element';
+
+const deferred = domtools.plugins.smartpromise.defer();
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-editormarkdown': DeesEditorMarkdown;
+  }
+}
+
+@customElement('dees-editormarkdown')
+export class DeesEditorMarkdown extends DeesElement {
+  public static demo = () => html`<dees-editormarkdown></dees-editormarkdown>`;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      .gridcontainer {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        display: grid;
+        grid-template-columns: 60% 40%;
+      }
+      .editorContainer {
+        position: relative;
+      }
+      .outletContainer {
+        background: #111;
+        color: #fff;
+        font-family: 'Roboto Slab';
+        padding: 20px;
+        overflow-y: scroll;
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      <div class="gridcontainer">
+        <div class="editorContainer">
+          <dees-editor
+            .language=${'markdown'}
+            .content=${`# a test content
+
+This is test content that is of longer form an hopefully starts to wrap when I need it. And yes, it does perfectly. nice.
+
+Test | Hello
+--- | ---
+Yeah | So good
+
+This is real asset I think. Why would we want to leave that on the table? Can you tell my that?
+
+Why are we here?
+
+Do you know?
+
+> note:
+There is something going on.
+
+\`\`\`typescript
+const hello = 'yes'
+\`\`\`
+`}
+            wordWrap="bounded"
+          ></dees-editor>
+        </div>
+        <div class="outletContainer">
+          <dees-editormarkdownoutlet></dees-editormarkdownoutlet>
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(_changedPropertiesArg) {
+    await super.firstUpdated(_changedPropertiesArg);
+    const editor = this.shadowRoot.querySelector('dees-editor');
+    
+    // lets care about wiring the markdown stuff.
+    const markdownOutlet = this.shadowRoot.querySelector('dees-editormarkdownoutlet');
+    const smartmarkdownInstance = new domtools.plugins.smartmarkdown.SmartMarkdown();
+    const mdParsedResult = await smartmarkdownInstance.getMdParsedResultFromMarkdown('loading...')
+    editor.contentSubject.subscribe(async contentArg => {
+      await mdParsedResult.updateFromMarkdownString(contentArg)
+      const html = mdParsedResult.html;
+      markdownOutlet.updateHtmlText(html);
+    })
+  }
+}
--- a/ts_web/elements/dees-editor-markdownoutlet.ts
+++ b/ts_web/elements/dees-editor-markdownoutlet.ts
@ -0,0 +1,42 @@
+import { customElement, DeesElement, html, type TemplateResult } from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-editormarkdownoutlet': DeesEditorMarkdownOutlet;
+  }
+}
+
+@customElement('dees-editormarkdownoutlet')
+export class DeesEditorMarkdownOutlet extends DeesElement {
+  // DEMO
+  public static demo = () => html`<dees-editormarkdownoutlet></dees-editormarkdownoutlet>`;
+
+  // INSTANCE
+  private outlet: HTMLElement;
+
+  public render(): TemplateResult {
+    return html`
+      <div class="outlet markdown-body">
+        <h1>Hi there</h1>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    await super.firstUpdated(_changedProperties);
+    const styleElement = document.createElement('style');
+    const cssText = await (
+      await fetch('https://unpkg.com/github-markdown-css@5.1.0/github-markdown-dark.css')
+    ).text();
+    styleElement.textContent = cssText;
+    this.shadowRoot.append(styleElement);
+  }
+
+  public async updateHtmlText(htmlTextArg: string) {
+    await this.updateComplete;
+    if (!this.outlet) {
+      this.outlet = this.shadowRoot.querySelector('.outlet');
+    }
+    this.outlet.innerHTML = htmlTextArg;
+  }
+}
--- a/ts_web/elements/dees-editor.ts
+++ b/ts_web/elements/dees-editor.ts
@ -0,0 +1,126 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+import type * as monaco from 'monaco-editor';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-editor': DeesEditor;
+  }
+}
+
+@customElement('dees-editor')
+export class DeesEditor extends DeesElement {
+  // DEMO
+  public static demo = () => html` <dees-editor></dees-editor> `;
+
+  // STATIC
+  public static monacoDeferred: ReturnType<typeof domtools.plugins.smartpromise.defer>;
+
+  // INSTANCE
+  public editorDeferred = domtools.plugins.smartpromise.defer<monaco.editor.IStandaloneCodeEditor>();
+  public language = 'typescript';
+
+  @property({
+    type: String
+  })
+  public content = "function hello() {\n\talert('Hello world!');\n}";
+
+  @property({
+    type: Object
+  })
+  public contentSubject = new domtools.plugins.smartrx.rxjs.Subject<string>();
+
+  @property({
+    type: Boolean
+  })
+  public wordWrap: monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] = 'off';
+
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      #container {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        <div id="container"></div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ): Promise<void> {
+    super.firstUpdated(_changedProperties);
+    const container = this.shadowRoot.getElementById('container');
+
+    if (!DeesEditor.monacoDeferred) {
+      DeesEditor.monacoDeferred = domtools.plugins.smartpromise.defer();
+      const scriptUrl = `https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/loader.js`;
+      const script = document.createElement('script');
+      script.src = scriptUrl;
+      script.onload = () => {
+        DeesEditor.monacoDeferred.resolve();
+      };
+      document.head.appendChild(script);
+    }
+    await DeesEditor.monacoDeferred.promise;
+
+    (window as any).require.config({
+      paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor/min/vs' },
+    });
+    (window as any).require(['vs/editor/editor.main'], async () => {
+      const editor = ((window as any).monaco.editor as typeof monaco.editor).create(container, {
+        value: this.content,
+        language: this.language,
+        theme: 'vs-dark',
+        useShadowDOM: true,
+        fontSize: 16,
+        automaticLayout: true,
+        wordWrap: this.wordWrap
+      });
+      this.editorDeferred.resolve(editor);
+    });
+    const css = await (
+      await fetch('https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/editor/editor.main.css')
+    ).text();
+    const styleElement = document.createElement('style');
+    styleElement.textContent = css;
+    this.shadowRoot.append(styleElement);
+
+
+    // editor is setup let do the rest
+    const editor = await this.editorDeferred.promise;
+    editor.onDidChangeModelContent(async eventArg => {
+      this.contentSubject.next(editor.getValue());
+    });
+    this.contentSubject.next(editor.getValue());
+  }
+}
--- a/ts_web/elements/dees-form.ts
+++ b/ts_web/elements/dees-form.ts
@ -101,6 +101,10 @@ export class DeesForm extends DeesElement {
    }
  }

+  /**
+   * collects the form data
+   * @returns
+   */
  public async collectFormData() {
    const children = this.getFormElements();
    const valueObject: { [key: string]: string | number | boolean | any[] } = {};
--- a/ts_web/elements/dees-icon.ts
+++ b/ts_web/elements/dees-icon.ts
@ -52,10 +52,12 @@ import {
  faFileInvoiceDollar as faFileInvoiceDollarSolid,
  faGear as faGearSolid,
  faGrip as faGripSolid,
+  faMagnifyingGlass as faMagnifyingGlassSolid,
  faMessage as faMessageSolid,
  faMoneyCheckDollar as faMoneyCheckDollarSolid,
  faMugHot as faMugHotSolid,
  faMinus as faMinusSolid,
+  faNetworkWired as faNetworkWiredSolid,
  faPaperclip as faPaperclipSolid,
  faPaste as faPasteSolid,
  faPenToSquare as faPenToSquareSolid,
@ -65,6 +67,7 @@ import {
  faUsers as faUsersSolid,
  faShare as faShareSolid,
  faSun as faSunSolid,
+  faTerminal as faTerminalSolid,
  faTrash as faTrashSolid,
  faTrashCan as faTrashCanSolid,
  faWallet as faWalletSolid,
@ -97,11 +100,13 @@ export const faIcons = {
  fileInvoiceDoller: faFileInvoiceDollarSolid,
  gear: faGearSolid,
  grip: faGripSolid,
+  magnifyingGlass: faMagnifyingGlassSolid,
  message: faMessageRegular,
  messageSolid: faMessageSolid,
  moneyCheckDollar: faMoneyCheckDollarSolid,
  mugHot: faMugHotSolid,
  minus: faMinusSolid,
+  networkWired: faNetworkWiredSolid,
  paperclip: faPaperclipSolid,
  paste: faPasteRegular,
  pasteSolid: faPasteSolid,
@ -112,6 +117,7 @@ export const faIcons = {
  share: faShareSolid,
  sun: faSunRegular,
  sunSolid: faSunSolid,
+  terminal: faTerminalSolid,
  trash: faTrashSolid,
  trashSolid: faTrashSolid,
  trashCan: faTrashCanRegular,
--- a/ts_web/elements/dees-simple-appdash.demo.ts
+++ b/ts_web/elements/dees-simple-appdash.demo.ts
@ -1,5 +1,21 @@
 import { html } from '@design.estate/dees-element';
+import type { IView } from './dees-simple-appdash.js';

 export const demoFunc = () => html`
-  <dees-simple-appdash>Hello there</dees-simple-appdash>
+  <dees-simple-appdash
+    .viewTabs=${[
+      {
+        name: 'View 1',
+        element: null,
+      },
+      {
+        name: 'View 2',
+        element: null,
+      },
+      {
+        name: 'View 3',
+        element: null,
+      }
+    ] as IView[]}
+  >Hello there</dees-simple-appdash>
 `;
--- a/ts_web/elements/dees-simple-appdash.ts
+++ b/ts_web/elements/dees-simple-appdash.ts
@ -1,4 +1,6 @@
 import { demoFunc } from './dees-simple-appdash.demo.js';
+import * as colors from './00colors.js';
+
 import {
  customElement,
  html,
@ -10,7 +12,9 @@ import {
  unsafeCSS,
  type CSSResult,
  state,
+  domtools,
 } from '@design.estate/dees-element';
+import { DeesTerminal } from './dees-terminal.js';

 declare global {
  interface HTMLElementTagNameMap {
@ -18,6 +22,11 @@ declare global {
  }
 }

+export interface IView {
+  name: string;
+  element: DeesElement['constructor']['prototype'];
+}
+
@customElement('dees-simple-appdash')
 export class DeesSimpleAppDash extends DeesElement {
  // STATIC
@ -27,42 +36,147 @@ export class DeesSimpleAppDash extends DeesElement {
  @property()
  public name = 'Dees Simple Login';

+  @property()
+  public viewTabs: IView[] = [];
+
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        color: ${cssManager.bdTheme('#333', '#ccc')};
        user-select: none;
+        display: block;
+        position: relative;
+        height: 100%;
      }
-      .appbar {
+
+      .maincontainer {
        position: absolute;
-        top: 0;
-        height: 40px;
        width: 100%;
-        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
-        border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#333')};
+        height: 100%;
+        top: 0px;
+        left: 0px;
+        overflow: hidden;
+      }
+
+      .appbar {
+        position: fixed;
+        top: 0;
+        height: 32px;
+        width: 100%;
+        background: ${cssManager.bdTheme('#eeeeeb', '#222')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#ccc', '#ffffff10')};
        font-size: 14px;
-        line-height: 40px;
+        line-height: 32px;
        font-family: 'Roboto', 'Inter', sans-serif;
        padding: 0px 16px;
+        z-index: 2;
+        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.8);
+        display: grid;
+        grid-template-columns: min-content 1fr auto;
      }
+
+      .appbar .viewTabs {
+        padding: 0px 16px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+      }
+
+      .viewTab {
+        padding: 0px 8px;
+      }
+
+      .viewTab:hover {
+        background: ${cssManager.bdTheme(colors.bright.blue, colors.dark.blue)};
+        color: ${cssManager.bdTheme('#000', '#fff')};
+      }
+
+      .viewTab:active {
+        background: ${cssManager.bdTheme(colors.bright.blueActive, colors.dark.blueActive)};
+        color: ${cssManager.bdTheme('#000', '#fff')};
+      }
+
+      .appName {
+        white-space: nowrap;
+      }
+
+      .appActions {
+        display: flex;
+      }
+
+      .appActions .action {
+      }
+      .appActions .action:hover {
+        color: ${cssManager.bdTheme('#000', '#fff')};
+      }
+
      .appcontent {
-        position: absolute;
-        top: 40px;
-        bottom: 0;
+        z-index: 1;
+        position: fixed;
+        top: 32px;
+        height: calc(100vh - 32px - 24px);
+        bottom: 24px;
        width: 100%;
+        overflow: auto;
        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
      }
+
+      .controlbar {
+        color: #fff;
+        position: absolute;
+        bottom: 0px;
+        left: 0px;
+        width: 100%;
+        height: 24px;
+        background: ${cssManager.bdTheme(colors.bright.blueMuted, colors.dark.blueMuted)};
+        z-index: 2;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        flex-direction: row;
+      }
+
+      .control {
+        width: min-content;
+        margin-right: 16px;
+        font-size: 12px;
+        white-space: nowrap;
+      }
    `,
  ];

  public render(): TemplateResult {
    return html`
-      <div class="appbar">
-        configvault v1.2.3
-      </div>
-      <div class="appcontent">
-        <slot></slot>
+      <div class="maincontainer">
+        <div class="appbar">
+          <div class="appName">${this.name}</div>
+          <div class="viewTabs">
+            ${this.viewTabs.map(
+              (view) => html`
+                <div class="viewTab" @click=${() => {
+                  this.loadView(view);
+                }}>${view.name}</div>
+              `
+            )}
+          </div>
+          <div class="appActions">
+            <div class="action" @click=${() => {
+              this.dispatchEvent(new CustomEvent('logout'));
+            }}>Logout</div>
+          </div>
+        </div>
+        <div class="appcontent">
+          
+        </div>
+        <div class="controlbar">
+          <div class="control">
+            <dees-icon .iconFA=${'networkWired'}></dees-icon>
+          </div>
+          <div class="control" @click=${this.launchTerminal}>
+            <dees-icon .iconFA=${'terminal'}></dees-icon>
+          </div>
+        </div>
      </div>
    `;
  }
@ -70,5 +184,35 @@ export class DeesSimpleAppDash extends DeesElement {
  public async firstUpdated(_changedProperties): Promise<void> {
    const domtools = await this.domtoolsPromise;
    super.firstUpdated(_changedProperties);
+    await this.loadView(this.viewTabs[0]);
+  }
+
+  public async launchTerminal() {
+    const maincontainer = this.shadowRoot.querySelector('.maincontainer');
+    const terminal = new DeesTerminal();
+    maincontainer.appendChild(terminal);
+    terminal.style.position = 'absolute';
+    terminal.style.zIndex = '1';
+    terminal.style.top = '32px';
+    terminal.style.left = '0px';
+    terminal.style.right = '0px';
+    terminal.style.bottom = '24px';
+    terminal.style.opacity = '0';
+    terminal.style.transform = 'translateY(20px)';
+    terminal.style.transition = 'all 0.2s';
+    await domtools.plugins.smartdelay.delayFor(0);
+    terminal.style.opacity = '1';
+    terminal.style.transform = 'translateY(0px)';
+  }
+
+  private currentView: DeesElement;
+  public async loadView(viewArg: IView) {
+    const appcontent = this.shadowRoot.querySelector('.appcontent');
+    const view = new viewArg.element();
+    if (this.currentView) {
+      this.currentView.remove();
+    }
+    appcontent.appendChild(view);
+    this.currentView = view;
  }
 }
--- a/ts_web/elements/dees-simple-login.ts
+++ b/ts_web/elements/dees-simple-login.ts
@ -42,7 +42,18 @@ export class DeesSimpleLogin extends DeesElement {
        align-items: center; /* aligns vertically */
        width: 100%;
        height: 100%;
+        top: 0px;
+        left: 0px;
      }
+
+      .slotContainer {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+      }
+
      .login {
        min-width: 320px;
        min-height: 100px;
@ -92,7 +103,6 @@ export class DeesSimpleLogin extends DeesElement {
    const submit = this.shadowRoot.querySelector('dees-form-submit');
    form.addEventListener('formData', (event: CustomEvent) => {
      this.dispatchEvent(new CustomEvent('login', { detail: event.detail }));
-      // this.switchToSlottedContent();
    });
  }

--- a/ts_web/elements/dees-table.ts
+++ b/ts_web/elements/dees-table.ts
@ -117,12 +117,21 @@ export class DeesTable<T> extends DeesElement {
  public changeSubject = new domtools.plugins.smartrx.rxjs.Subject<DeesTable<T>>();
  // end dees-form compatibility -----------------------------------------

+  /**
+   * What does a row of data represent?
+   */
  @property({
    type: String,
    reflect: true,
  })
  public dataName: string;

+
+  @property({
+    type: Boolean,
+  })
+  searchable: boolean = true;
+
  @property({
    type: Array,
  })
@ -169,9 +178,9 @@ export class DeesTable<T> extends DeesElement {
        display: block;
        width: 100%;
        min-height: 50px;
-        background: ${cssManager.bdTheme('#ffffff', '#333333')};
+        background: ${cssManager.bdTheme('#ffffff', '#222222')};
        border-radius: 3px;
-        border-top: 1px solid ${cssManager.bdTheme('#fff', '#444')};
+        border-top: 1px solid ${cssManager.bdTheme('#fff', '#ffffff10')};
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3);
        overflow-x: auto;
        cursor: default;
@ -199,15 +208,20 @@ export class DeesTable<T> extends DeesElement {

      .headingSeparation {
        margin-top: 7px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#bcbcbc')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#bcbcbc', '#444444')};
      }

      .headerActions {
+        user-select: none;
+        display: flex;
+        flex-direction: row;
        margin-left: auto;
      }
      .headerAction {
        display: flex;
+        flex-direction: row;
        color: ${cssManager.bdTheme('#333', '#ccc')};
+        margin-left: 16px;
      }

      .headerAction:hover {
@ -219,9 +233,21 @@ export class DeesTable<T> extends DeesElement {
      }

      .searchGrid {
+        background: ${cssManager.bdTheme('#fff', '#111111')};
        display: grid;
        grid-gap: 16px;
        grid-template-columns: 1fr 200px;
+        margin-top: 16px;
+        padding: 0px 16px;
+        border-top: 1px solid ${cssManager.bdTheme('#fff', '#ffffff20')};
+        border-radius: 8px;
+      }
+
+      .searchGrid.hidden {
+        height: 0px;
+        opacity: 0;
+        overflow: hidden;
+        margin-top: 0px;
      }

      table,
@ -311,20 +337,20 @@ export class DeesTable<T> extends DeesElement {
        font-weight: inherit;
        padding: 0px 6px;
      }
-
-      .action {
-        margin: -4px 0px;
-        padding: 10px;
-        line-height: 34px;
-        height: 34px;
-        size: 16px;
-        display: inline-block;
-        border-radius: 8px;
-      }
-
-      .action:first-child {
+      .actionsContainer {
+        display: flex;
+        flex-direction: row;
+        height: 24px;
+        transform: translateY(-4px);
        margin-left: -6px;
-        width: min-content;
+      }
+      .action {
+        position: relative;
+        padding: 8px 10px;
+        line-height: 24px;
+        height: 32px;
+        size: 16px;
+        border-radius: 8px;
      }

      .action:hover {
@ -415,7 +441,7 @@ export class DeesTable<T> extends DeesElement {
          </div>
        </div>
        <div class="headingSeparation"></div>
-        <div class="searchGrid">
+        <div class="searchGrid hidden">
          <dees-input-text
            .label=${'lucene syntax search'}
            .description=${`
@ -425,10 +451,12 @@ export class DeesTable<T> extends DeesElement {
              name: "john" AND age: 18
              \`\`\`
              
-            `}></dees-input-text>
+            `}
+          ></dees-input-text>
          <dees-input-multitoggle
            .label=${'search mode'}
            .options=${['table', 'data', 'server']}
+            .selectedOption=${'table'}
            .description=${`
              There are three basic modes:
              
@ -565,22 +593,28 @@ export class DeesTable<T> extends DeesElement {
                            return html`
                              <td>
                                <div class="innerCellContainer">
-                                  ${this.getActionsForType('inRow').map(
-                                    (actionArg) => html`<div
-                                      class="action"
-                                      @click=${() =>
-                                        actionArg.actionFunc({
-                                          item: itemArg,
-                                          table: this,
-                                        })}
-                                    >
-                                      ${actionArg.iconName
-                                        ? html`
-                                            <dees-icon .iconFA=${actionArg.iconName}></dees-icon>
-                                          `
-                                        : actionArg.name}
-                                    </div>`
-                                  )}
+                                  <div class="actionsContainer">
+                                    ${this.getActionsForType('inRow').map(
+                                      (actionArg) => html`
+                                        <div
+                                          class="action"
+                                          @click=${() =>
+                                            actionArg.actionFunc({
+                                              item: itemArg,
+                                              table: this,
+                                            })}
+                                        >
+                                          ${actionArg.iconName
+                                            ? html`
+                                                <dees-icon
+                                                  .iconFA=${actionArg.iconName}
+                                                ></dees-icon>
+                                              `
+                                            : actionArg.name}
+                                        </div>
+                                      `
+                                    )}
+                                  </div>
                                </div>
                              </td>
                            `;
@ -629,11 +663,30 @@ export class DeesTable<T> extends DeesElement {
    `;
  }

-  public async firstUpdated() {}
+  public async firstUpdated() {
+    
+  }

  public async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
    super.updated(changedProperties);
    this.determineColumnWidths();
+    if (this.searchable) {
+      const existing = this.dataActions.find((actionArg) => actionArg.type.includes('header') && actionArg.name === 'Search');
+      if (!existing) {
+        this.dataActions.unshift({
+          name: 'Search',
+          iconName: 'magnifyingGlass',
+          type: ['header'],
+          actionFunc: async () => {
+            console.log('open search');
+            const searchGrid = this.shadowRoot.querySelector('.searchGrid');
+            searchGrid.classList.toggle('hidden');
+          }
+        });
+        console.log(this.dataActions);
+        this.requestUpdate();
+      };
+    }
  }

  public async determineColumnWidths() {
@ -654,7 +707,7 @@ export class DeesTable<T> extends DeesElement {
      const width = window.getComputedStyle(cell).width;
      if (cell.textContent.includes('Actions')) {
        const neededWidth =
-          this.dataActions.filter((actionArg) => actionArg.type.includes('inRow')).length * 35;
+          this.dataActions.filter((actionArg) => actionArg.type.includes('inRow')).length * 36;
        cell.style.width = `${Math.max(neededWidth, 68)}px`;
      } else {
        cell.style.width = width;
--- a/ts_web/elements/dees-terminal.ts
+++ b/ts_web/elements/dees-terminal.ts
@ -0,0 +1,320 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+import * as webcontainer from '@webcontainer/api';
+
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-terminal': DeesTerminal;
+  }
+}
+
+@customElement('dees-terminal')
+export class DeesTerminal extends DeesElement {
+  public static demo = () => html` <dees-terminal></dees-terminal> `;
+
+  // INSTANCE
+  private resizeObserver: ResizeObserver;
+
+  @property()
+  public setupCommand = `pnpm install @git.zone/tsbuild && clear && echo 'welcome'`;
+
+  constructor() {
+    super();
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        // Handle the resize event
+        console.log(`Terminal Resized`);
+        this.handleResize();
+      }
+    });
+  }
+
+  public static styles = [
+    domtools.elementBasic.staticStyles,
+    css`
+      :host {
+        padding: 20px;
+        background: #000;
+        position: absolute;
+        height: 100%;
+        width: 100%;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      #container {
+        position: absolute;
+        height: calc(100% - 40px);
+        width: calc(100% - 40px);
+      }
+      /**
+      * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+      * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+      * https://github.com/chjj/term.js
+      * @license MIT
+      *
+      * Permission is hereby granted, free of charge, to any person obtaining a copy
+      * of this software and associated documentation files (the "Software"), to deal
+      * in the Software without restriction, including without limitation the rights
+      * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+      * copies of the Software, and to permit persons to whom the Software is
+      * furnished to do so, subject to the following conditions:
+      *
+      * The above copyright notice and this permission notice shall be included in
+      * all copies or substantial portions of the Software.
+      *
+      * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+      * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+      * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+      * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+      * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+      * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+      * THE SOFTWARE.
+      *
+      * Originally forked from (with the author's permission):
+      *   Fabrice Bellard's javascript vt100 for jslinux:
+      *   http://bellard.org/jslinux/
+      *   Copyright (c) 2011 Fabrice Bellard
+      *   The original design remains. The terminal itself
+      *   has been extended to include xterm CSI codes, among
+      *   other features.
+      */
+
+      /**
+      *  Default styles for xterm.js
+      */
+
+      .xterm {
+        font-feature-settings: 'liga' 0;
+        position: relative;
+        user-select: none;
+        -ms-user-select: none;
+        -webkit-user-select: none;
+      }
+
+      .xterm.focus,
+      .xterm:focus {
+        outline: none;
+      }
+
+      .xterm .xterm-helpers {
+        position: absolute;
+        top: 0;
+        /**
+          * The z-index of the helpers must be higher than the canvases in order for
+          * IMEs to appear on top.
+          */
+        z-index: 5;
+      }
+
+      .xterm .xterm-helper-textarea {
+        padding: 0;
+        border: 0;
+        margin: 0;
+        /* Move textarea out of the screen to the far left, so that the cursor is not visible */
+        position: absolute;
+        opacity: 0;
+        left: -9999em;
+        top: 0;
+        width: 0;
+        height: 0;
+        z-index: -5;
+        /** Prevent wrapping so the IME appears against the textarea at the correct position */
+        white-space: nowrap;
+        overflow: hidden;
+        resize: none;
+      }
+
+      .xterm .composition-view {
+        /* TODO: Composition position got messed up somewhere */
+        background: #000;
+        color: #fff;
+        display: none;
+        position: absolute;
+        white-space: nowrap;
+        z-index: 1;
+      }
+
+      .xterm .composition-view.active {
+        display: block;
+      }
+
+      .xterm .xterm-viewport {
+        /* On OS X this is required in order for the scroll bar to appear fully opaque */
+        background-color: #000;
+        overflow-y: scroll;
+        cursor: default;
+        position: absolute;
+        right: 0;
+        left: 0;
+        top: 0;
+        bottom: 0;
+      }
+
+      .xterm .xterm-screen {
+        position: relative;
+      }
+
+      .xterm .xterm-screen canvas {
+        position: absolute;
+        left: 0;
+        top: 0;
+      }
+
+      .xterm .xterm-scroll-area {
+        visibility: hidden;
+      }
+
+      .xterm-char-measure-element {
+        display: inline-block;
+        visibility: hidden;
+        position: absolute;
+        top: 0;
+        left: -9999em;
+        line-height: normal;
+      }
+
+      .xterm {
+        cursor: text;
+      }
+
+      .xterm.enable-mouse-events {
+        /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+        cursor: default;
+      }
+
+      .xterm.xterm-cursor-pointer {
+        cursor: pointer;
+      }
+
+      .xterm.column-select.focus {
+        /* Column selection mode */
+        cursor: crosshair;
+      }
+
+      .xterm .xterm-accessibility,
+      .xterm .xterm-message {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        z-index: 10;
+        color: transparent;
+      }
+
+      .xterm .live-region {
+        position: absolute;
+        left: -9999px;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+      }
+
+      .xterm-dim {
+        opacity: 0.5;
+      }
+
+      .xterm-underline {
+        text-decoration: underline;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        <div id="container"></div>
+      </div>
+    `;
+  }
+
+  private fitAddon: FitAddon;
+  public async firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ): Promise<void> {
+    const domtools = await this.domtoolsPromise;
+    super.firstUpdated(_changedProperties);
+    const container = this.shadowRoot.getElementById('container');
+
+    const term = new Terminal({
+      convertEol: true,
+      cursorBlink: true,
+    });
+    this.fitAddon = new FitAddon();
+    term.loadAddon(this.fitAddon);
+
+    // Open the terminal in #terminal-container
+    term.open(container);
+
+    // Make the terminal's size and geometry fit the size of #terminal-container
+    this.fitAddon.fit();
+
+    term.write(`dees-terminal custom terminal. \r\n$ `);
+
+    // lets start the webcontainer
+    // Call only once
+    const webcontainerInstance = await webcontainer.WebContainer.boot();
+    const shellProcess = await webcontainerInstance.spawn('jsh');
+    shellProcess.output.pipeTo(
+      new WritableStream({
+        write(data) {
+          term.write(data);
+        },
+      })
+    );
+    const input = shellProcess.input.getWriter();
+    term.onData((data) => {
+      input.write(data);
+    });
+    await this.waitForPrompt(term, '~/');
+    input.write(this.setupCommand);
+    input.write(`\n`);
+  }
+
+  async connectedCallback(): Promise<void> {
+    await super.connectedCallback();
+    this.resizeObserver.observe(this);
+  }
+
+  async disconnectedCallback(): Promise<void> {
+    this.resizeObserver.unobserve(this);
+    await super.disconnectedCallback();
+  }
+
+  handleResize() {
+    this.fitAddon.fit();
+  }
+
+  private async waitForPrompt(term: Terminal, prompt: string): Promise<void> {
+    return new Promise<void>((resolve) => {
+      const checkPrompt = () => {
+        const lines = term.buffer.active;
+        for (let i = 0; i < lines.length; i++) {
+          const line = lines.getLine(i);
+          if (line && line.translateToString().includes(prompt)) {
+            resolve();
+            return;
+          }
+        }
+        setTimeout(checkPrompt, 100); // check every 100 ms
+      };
+  
+      checkPrompt();
+    });
+  }
+}
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@ -1,9 +1,20 @@
+export * from './dees-appui-activitylog.js';
+export * from './dees-appui-appbar.js';
+export * from './dees-appui-base.js';
+export * from './dees-appui-maincontent.js';
+export * from './dees-appui-mainmenu.js';
+export * from './dees-appui-mainselector.js';
 export * from './dees-button-exit.js';
 export * from './dees-button.js';
+export * from './dees-chart-area.js';
+export * from './dees-chart-log.js';
 export * from './dees-chips.js';
 export * from './dees-contextmenu.js';
 export * from './dees-dataview-codebox.js';
 export * from './dees-dataview-statusobject.js';
+export * from './dees-editor.js';
+export * from './dees-editor-markdown.js';
+export * from './dees-editor-markdownoutlet.js';
 export * from './dees-form-submit.js';
 export * from './dees-form.js';
 export * from './dees-hint.js';
@ -29,6 +40,7 @@ export * from './dees-speechbubble.js';
 export * from './dees-spinner.js';
 export * from './dees-stepper.js';
 export * from './dees-table.js';
+export * from './dees-terminal.js';
 export * from './dees-toast.js';
 export * from './dees-updater.js';
 export * from './dees-windowcontrols.js';
--- a/ts_web/elements/interfaces/index.ts
+++ b/ts_web/elements/interfaces/index.ts
@ -0,0 +1,2 @@
+export * from './tab.js';
+export * from './selectionoption.js';
--- a/ts_web/elements/interfaces/selectionoption.ts
+++ b/ts_web/elements/interfaces/selectionoption.ts
@ -0,0 +1,4 @@
+export interface ISelectionOption {
+  key: string;
+  action: () => void;
+}
--- a/ts_web/elements/interfaces/tab.ts
+++ b/ts_web/elements/interfaces/tab.ts
@ -0,0 +1,5 @@
+export interface ITab {
+  key: string;
+  iconName?: string;
+  action: () => void;
+}
Author	SHA1	Message	Date
Philipp Kunz	55e601b806	1.0.285	2024-02-05 13:12:27 +01:00
Philipp Kunz	45952914ba	fix(core): update	2024-02-05 13:12:26 +01:00
Philipp Kunz	5f83b01f0e	1.0.284	2024-02-05 13:11:06 +01:00
Philipp Kunz	c03563f2fc	fix(core): update	2024-02-05 13:11:05 +01:00
Philipp Kunz	edf50d2f8d	1.0.283	2024-02-05 10:07:50 +01:00
Philipp Kunz	d0789ab279	fix(core): update	2024-02-05 10:07:49 +01:00
Philipp Kunz	55bac1bf7b	1.0.282	2024-02-03 14:49:26 +01:00
Philipp Kunz	2957121473	fix(core): update	2024-02-03 14:49:25 +01:00
Philipp Kunz	020a1bfb75	1.0.281	2024-02-03 14:42:47 +01:00
Philipp Kunz	bb246c4f8e	fix(core): update	2024-02-03 14:42:46 +01:00
Philipp Kunz	cf258a8d59	1.0.280	2024-02-03 14:42:21 +01:00
Philipp Kunz	38b4df1ce3	fix(core): update	2024-02-03 14:42:20 +01:00
Philipp Kunz	2f7fdc16c7	1.0.279	2024-02-03 12:44:12 +01:00
Philipp Kunz	f4b426bc7f	fix(core): update	2024-02-03 12:44:12 +01:00
Philipp Kunz	9577cc9ebf	1.0.278	2024-02-03 11:26:16 +01:00
Philipp Kunz	be5124217a	fix(core): update	2024-02-03 11:26:15 +01:00
Philipp Kunz	d029a6c346	1.0.277	2024-01-24 12:18:38 +01:00
Philipp Kunz	69bb03dcdf	fix(core): update	2024-01-24 12:18:37 +01:00
Philipp Kunz	5eb2f4cebc	1.0.276	2024-01-24 00:59:11 +01:00
Philipp Kunz	c021a84788	fix(core): update	2024-01-24 00:59:11 +01:00
Philipp Kunz	321ce99338	1.0.275	2024-01-22 22:30:45 +01:00
Philipp Kunz	6cfe89645c	fix(core): update	2024-01-22 22:30:44 +01:00
Philipp Kunz	11f900beeb	1.0.274	2024-01-22 20:51:51 +01:00
Philipp Kunz	39ca21e57c	fix(core): update	2024-01-22 20:51:50 +01:00
Philipp Kunz	87872191e2	1.0.273	2024-01-22 19:40:09 +01:00
Philipp Kunz	2d3fd74333	fix(core): update	2024-01-22 19:40:08 +01:00
Philipp Kunz	eebe898dcc	1.0.272	2024-01-22 19:27:54 +01:00
Philipp Kunz	ca73d00f68	fix(core): update	2024-01-22 19:27:54 +01:00
Philipp Kunz	14bdc46073	1.0.271	2024-01-22 19:27:31 +01:00
Philipp Kunz	bf04ce6a8f	fix(core): update	2024-01-22 19:27:30 +01:00
Philipp Kunz	9dc6dab3a5	1.0.270	2024-01-22 19:23:23 +01:00
Philipp Kunz	a21a3b6918	fix(core): update	2024-01-22 19:23:22 +01:00
Philipp Kunz	6ae21d73aa	1.0.269	2024-01-22 18:39:31 +01:00
Philipp Kunz	941871991f	fix(core): update	2024-01-22 18:39:31 +01:00
Philipp Kunz	497c38f426	1.0.268	2024-01-22 18:30:36 +01:00
Philipp Kunz	bfaa1623d9	fix(core): update	2024-01-22 18:30:35 +01:00
Philipp Kunz	5ffa5a2adc	1.0.267	2024-01-22 18:30:01 +01:00
Philipp Kunz	16d1375e47	fix(core): update	2024-01-22 18:30:00 +01:00
Philipp Kunz	30eda34f37	1.0.266	2024-01-22 17:32:58 +01:00
Philipp Kunz	2cc7eb1ead	fix(core): update	2024-01-22 17:32:58 +01:00
Philipp Kunz	64f5bee801	1.0.265	2024-01-22 17:29:53 +01:00
Philipp Kunz	9d57f983dd	fix(core): update	2024-01-22 17:29:53 +01:00
Philipp Kunz	8ccd21df36	1.0.264	2024-01-22 17:25:55 +01:00
Philipp Kunz	c22c994d12	fix(core): update	2024-01-22 17:25:55 +01:00
Philipp Kunz	01369444b7	1.0.263	2024-01-22 17:22:33 +01:00
Philipp Kunz	4beb15f70c	fix(core): update	2024-01-22 17:22:33 +01:00
Philipp Kunz	30170bcd2e	1.0.262	2024-01-22 17:12:59 +01:00
Philipp Kunz	f29a8de504	fix(core): update	2024-01-22 17:12:58 +01:00
Philipp Kunz	965ab02315	1.0.261	2024-01-22 01:29:28 +01:00
Philipp Kunz	991784eae6	fix(core): update	2024-01-22 01:29:27 +01:00
Philipp Kunz	b474b7986c	1.0.260	2024-01-22 01:26:13 +01:00
Philipp Kunz	98542252cb	fix(core): update	2024-01-22 01:26:13 +01:00
Philipp Kunz	0d78deadf2	1.0.259	2024-01-22 01:11:29 +01:00
Philipp Kunz	5108f47e56	fix(core): update	2024-01-22 01:11:28 +01:00
Philipp Kunz	7d4e5f2ca7	1.0.258	2024-01-22 00:59:26 +01:00
Philipp Kunz	c0ad0f4570	fix(core): update	2024-01-22 00:59:25 +01:00
Philipp Kunz	d56eb602a9	1.0.257	2024-01-21 22:37:39 +01:00
Philipp Kunz	f1c791eb12	fix(core): update	2024-01-21 22:37:39 +01:00
Philipp Kunz	e872188be7	1.0.256	2024-01-21 17:14:16 +01:00
Philipp Kunz	2d712e78b0	fix(core): update	2024-01-21 17:14:15 +01:00
Philipp Kunz	ebeecd0686	1.0.255	2024-01-21 14:25:03 +01:00
Philipp Kunz	1d09f994c6	fix(core): update	2024-01-21 14:25:02 +01:00
Philipp Kunz	686c3714fc	1.0.254	2024-01-21 14:14:57 +01:00
Philipp Kunz	e29086036c	fix(core): update	2024-01-21 14:14:57 +01:00
Philipp Kunz	78e24aa720	1.0.253	2024-01-21 13:57:46 +01:00
Philipp Kunz	7c8876c835	fix(core): update	2024-01-21 13:57:46 +01:00
Philipp Kunz	2222fb1e01	1.0.252	2024-01-21 13:57:27 +01:00
Philipp Kunz	46b30a1ef0	fix(core): update	2024-01-21 13:57:26 +01:00
Philipp Kunz	d49d5f70ef	1.0.251	2024-01-21 13:36:48 +01:00
Philipp Kunz	76a950e2ba	fix(core): update	2024-01-21 13:36:47 +01:00
Philipp Kunz	077aba5e58	1.0.250	2024-01-21 13:27:29 +01:00
Philipp Kunz	857362423f	fix(core): update	2024-01-21 13:27:29 +01:00