1.0.283

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.267",
+  "version": "1.0.283",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",
@@ -27,6 +27,7 @@
     "@push.rocks/smartstring": "^4.0.13",
     "@tsclass/tsclass": "^4.0.46",
     "@webcontainer/api": "^1.1.8",
+    "apexcharts": "^3.45.2",
     "highlight.js": "11.9.0",
     "ibantools": "^4.3.9",
     "monaco-editor": "^0.45.0",

pnpm-lock.yaml

@@ -41,6 +41,9 @@ dependencies:
   '@webcontainer/api':
     specifier: ^1.1.8
     version: 1.1.8
+  apexcharts:
+    specifier: ^3.45.2
+    version: 3.45.2
   highlight.js:
     specifier: 11.9.0
     version: 11.9.0
@@ -2105,6 +2108,10 @@ packages:
     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
@@ -2218,6 +2225,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
@@ -6269,6 +6288,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

ts_web/00_commitinfo_data.ts

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

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

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

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

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]);
+  }
+}

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]);
+  }
+}

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]);
+  }
+}

ts_web/elements/dees-chart-area.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-area
+        .label=${'System Usage'}
+      ></dees-chart-area>
+    </div>
+  `;
+};

ts_web/elements/dees-chart-area.ts

@@ -0,0 +1,192 @@
+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';
+
+  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%;
+        max-width: 600px;
+        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;
+    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,
+      },
+    });
+  }
+}

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,90 @@
+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%;
+        max-width: 600px;
+        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-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[] } = {};

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

ts_web/elements/dees-simple-appdash.ts

@@ -22,6 +22,11 @@ declare global {
   }
 }
 
+export interface IView {
+  name: string;
+  element: DeesElement['constructor']['prototype'];
+}
+
 @customElement('dees-simple-appdash')
 export class DeesSimpleAppDash extends DeesElement {
   // STATIC
@@ -32,8 +37,7 @@ export class DeesSimpleAppDash extends DeesElement {
   public name = 'Dees Simple Login';
 
   @property()
-  public views: Array<{ name: string; icon: string; viewFunction: () => Promise<TemplateResult> }> =
+  public viewTabs: IView[] = [];
-    [];
 
   public static styles = [
     cssManager.defaultStyles,
@@ -45,6 +49,16 @@ export class DeesSimpleAppDash extends DeesElement {
         position: relative;
         height: 100%;
       }
+
+      .maincontainer {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0px;
+        left: 0px;
+        overflow: hidden;
+      }
+
       .appbar {
         position: fixed;
         top: 0;
@@ -62,6 +76,27 @@ export class DeesSimpleAppDash extends DeesElement {
         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;
       }
@@ -113,22 +148,34 @@ export class DeesSimpleAppDash extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="appbar">
+      <div class="maincontainer">
-        <div class="appName">${this.name}</div>
+        <div class="appbar">
-        <div class="viewTabs"></div>
+          <div class="appName">${this.name}</div>
-        <div class="appActions">
+          <div class="viewTabs">
-          <div class="action">Logout</div>
+            ${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>
+        <div class="appcontent">
-      <div class="appcontent">
+          
-        <slot></slot>
-      </div>
-      <div class="controlbar">
-        <div class="control">
-          <dees-icon .iconFA=${'networkWired'}></dees-icon>
         </div>
-        <div class="control" @click=${this.launchTerminal}>
+        <div class="controlbar">
-          <dees-icon .iconFA=${'terminal'}></dees-icon>
+          <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>
     `;
@@ -137,20 +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 appcontent = this.shadowRoot.querySelector('.appcontent');
+    const maincontainer = this.shadowRoot.querySelector('.maincontainer');
     const terminal = new DeesTerminal();
+    maincontainer.appendChild(terminal);
     terminal.style.position = 'absolute';
-    terminal.style.top = '0px';
+    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';
-    appcontent.appendChild(terminal);
     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;
+  }
 }

ts_web/elements/dees-simple-login.ts

@@ -103,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();
     });
   }
 

ts_web/elements/dees-terminal.ts

@@ -24,9 +24,21 @@ declare global {
 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();
-    domtools.DomTools.setupDomTools();
+    this.resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        // Handle the resize event
+        console.log(`Terminal Resized`);
+        this.handleResize();
+      }
+    });
   }
 
   public static styles = [
@@ -231,6 +243,7 @@ export class DeesTerminal extends DeesElement {
     `;
   }
 
+  private fitAddon: FitAddon;
   public async firstUpdated(
     _changedProperties: Map<string | number | symbol, unknown>
   ): Promise<void> {
@@ -242,14 +255,14 @@ export class DeesTerminal extends DeesElement {
       convertEol: true,
       cursorBlink: true,
     });
-    const fitAddon = new FitAddon();
+    this.fitAddon = new FitAddon();
-    term.loadAddon(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
-    fitAddon.fit();
+    this.fitAddon.fit();
 
     term.write(`dees-terminal custom terminal. \r\n$ `);
 
@@ -268,7 +281,40 @@ export class DeesTerminal extends DeesElement {
     term.onData((data) => {
       input.write(data);
     });
-    await domtools.convenience.smartdelay.delayFor(5000);
+    await this.waitForPrompt(term, '~/');
-    input.write(`pnpm add isomorphic-git @git.zone/tsbuild\n`);
+    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();
+    });
   }
 }

ts_web/elements/index.ts

@@ -1,5 +1,13 @@
+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';

ts_web/elements/interfaces/index.ts

@@ -0,0 +1,2 @@
+export * from './tab.js';
+export * from './selectionoption.js';

ts_web/elements/interfaces/selectionoption.ts

@@ -0,0 +1,4 @@
+export interface ISelectionOption {
+  key: string;
+  action: () => void;
+}

ts_web/elements/interfaces/tab.ts

@@ -0,0 +1,5 @@
+export interface ITab {
+  key: string;
+  iconName?: string;
+  action: () => void;
+}