1.0.286

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.279",
+  "version": "1.0.286",
   "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,7 +26,7 @@
     "@push.rocks/smartpromise": "^4.0.3",
     "@push.rocks/smartstring": "^4.0.13",
     "@tsclass/tsclass": "^4.0.46",
-    "@webcontainer/api": "^1.1.8",
+    "@webcontainer/api": "^1.1.9",
     "apexcharts": "^3.45.2",
     "highlight.js": "11.9.0",
     "ibantools": "^4.3.9",
@@ -39,10 +39,10 @@
     "@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/**/*",

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
@@ -39,8 +39,8 @@ dependencies:
     specifier: ^4.0.46
     version: 4.0.46
   '@webcontainer/api':
-    specifier: ^1.1.8
-    version: 1.1.8
+    specifier: ^1.1.9
+    version: 1.1.9
   apexcharts:
     specifier: ^3.45.2
     version: 3.45.2
@@ -72,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
@@ -83,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:
 
@@ -268,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
@@ -283,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:
@@ -570,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'
@@ -584,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
@@ -613,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
@@ -633,7 +633,9 @@ packages:
       - '@swc/core'
       - '@swc/wasm'
       - '@types/node'
+      - bufferutil
       - supports-color
+      - utf-8-validate
     dev: true
 
   /@isaacs/cliui@8.0.2:
@@ -671,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
@@ -864,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:
@@ -1570,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
@@ -1579,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:
@@ -1605,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:
@@ -1635,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:
@@ -1646,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:
@@ -1672,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:
@@ -1707,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:
@@ -1733,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
@@ -1751,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:
@@ -1820,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:
@@ -1843,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:
@@ -1879,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
 
@@ -1911,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:
@@ -1919,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:
@@ -1949,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==}
@@ -1987,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
 
@@ -2099,8 +2126,8 @@ packages:
       - utf-8-validate
     dev: true
 
-  /@webcontainer/api@1.1.8:
-    resolution: {integrity: sha512-m9WRj38oCoFPrqZOTeJcncPjnZ00FZUMq9YHEXxdhAoYhhQ69Rz4qK5p444cIPaMy2j8H7HcNLcAIwMGWnpMpw==}
+  /@webcontainer/api@1.1.9:
+    resolution: {integrity: sha512-Sp6PV0K9D/3f8fSbCubqhfmBFH8XbngZCBOCF+aExyGqnz2etmw+KYvbQ/JxYvYX5KPaSxM+asFQwoP2RHl5cg==}
     dev: false
 
   /@xmldom/xmldom@0.8.10:
@@ -3083,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
@@ -4359,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
@@ -4368,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:
@@ -4375,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'}
@@ -5186,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
@@ -6033,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
 
@@ -6267,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'}
@@ -6457,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:
@@ -6476,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

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.279',
+  version: '1.0.286',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-chart-area.demo.ts

@@ -9,10 +9,13 @@ export const demoFunc = () => {
         height: 100%;
         width: 100%;
         padding: 40px;
+        box-sizing: border-box;
       }
     </style>
     <div class="demoBox">
-      <dees-chart-area></dees-chart-area>
+      <dees-chart-area
+        .label=${'System Usage'}
+      ></dees-chart-area>
     </div>
   `;
 };

ts_web/elements/dees-chart-area.ts

@@ -5,6 +5,7 @@ import {
   customElement,
   html,
   property,
+  state,
   type CSSResult,
   type TemplateResult,
 } from '@design.estate/dees-element';
@@ -24,50 +25,117 @@ declare global {
 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`
-    .mainbox {
-      width: 600px;
-      height: 600px;
-      background: #222;
-      border-radius: 3px;
-      padding: 16px;
-      padding-top: 32px;
-    }
-  `];
+  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> `;
+    return html` <div class="mainbox">
+      <div class="chartTitle">${this.label}</div>
+      <div class="chartContainer"></div>
+    </div> `;
   }
 
   public async firstUpdated() {
-    var options = {
+    const domtoolsInstance = await this.domtoolsPromise;
+    var options: ApexCharts.ApexOptions = {
       series: [
         {
-          name: 'series1',
+          name: 'cpu',
           data: [31, 40, 28, 51, 42, 109, 100],
         },
         {
-          name: 'series2',
+          name: 'memory',
           data: [11, 32, 45, 32, 34, 52, 41],
         },
       ],
       chart: {
-        width: 560,
-        height: 540,
+        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',
@@ -79,14 +147,68 @@ export class DeesChartArea extends DeesElement {
           '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();
+  }
 
-    var chart = new ApexCharts(this.shadowRoot.querySelector('.mainbox'), options);
-    chart.render();
+  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,
+      },
+    });
   }
 }

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>
+  `;
+};

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() {
+    
+  }
+}

ts_web/elements/dees-editor.ts

@@ -50,7 +50,7 @@ export class DeesEditor extends DeesElement {
   }
 
   public static styles = [
-    domtools.elementBasic.staticStyles,
+    cssManager.defaultStyles,
     css`
       :host {
       }

ts_web/elements/dees-terminal.ts

@@ -42,7 +42,7 @@ export class DeesTerminal extends DeesElement {
   }
 
   public static styles = [
-    domtools.elementBasic.staticStyles,
+    cssManager.defaultStyles,
     css`
       :host {
         padding: 20px;

ts_web/elements/index.ts

@@ -7,6 +7,7 @@ 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';