1.5.1

changelog.md

@@ -1,5 +1,73 @@
 # Changelog
 
+## 2025-04-11 - 1.5.1 - fix(readme)
+Update readme with comprehensive reference documentation: add a usage snippet for components like DeesButton, introduce a detailed overview table of all component categories, and enhance documentation sections for each component group.
+
+- Added a code example showing how to import and use DeesButton.
+- Introduced a components overview table that categorizes Core UI, Forms, Layout, Data Display, Visualization, Dialogs & Overlays, Navigation, and Development components.
+- Expanded detailed documentation with usage examples for each component type.
+- Reorganized content to improve clarity and ease of navigation for developers.
+
+## 2025-04-11 - 1.5.0 - feat(badge)
+Add dees-badge component with demo file and update packageManager field in package.json
+
+- Introduce a new badge component allowing different types (default, primary, success, warning, error) with an optional rounded style
+- Provide a demo for the badge component
+- Export the badge component in the main elements index
+- Update package.json to include an explicit packageManager field
+
+## 2025-01-20 - 1.4.1 - fix(dependencies)
+Update dependency versions for smartpromise, webcontainer/api, tapbundle, and @types/node
+
+- Update @push.rocks/smartpromise to version ^4.2.0
+- Downgrade @webcontainer/api to version 1.2.0
+- Update @push.rocks/tapbundle to version ^5.5.6
+- Update @types/node to version ^22.10.7
+
+## 2025-01-20 - 1.4.0 - feat(dees-terminal)
+Enhanced the dees-terminal component to support environment variable settings and improved setup command execution.
+
+- Added environment property to pass custom environment variables.
+- Introduced webcontainerDeferred to handle the promise for web container creation.
+- Enhanced demo to illustrate environment variable usage.
+- Improved async interaction with the terminal for setting environment variables and executing setup commands.
+
+## 2025-01-15 - 1.3.4 - fix(chart)
+Fix chart rendering and appearance issues in the DeesChartArea component.
+
+- Resolved issues with chart dimensions calculation based on padding.
+- Adjusted grid and axis lines appearance for better visibility.
+- Updated tooltip and grid line styling for better accessibility.
+- Improved series data representation as time-series for more accurate display.
+
+## 2024-12-17 - 1.3.3 - fix(dees-input-multitoggle)
+Add missing TypeScript declaration for dees-input-multitoggle
+
+- Added a missing declaration to the HTMLElementTagNameMap for 'dees-input-multitoggle' element.
+
+## 2024-12-09 - 1.3.2 - fix(metadata)
+Updated package metadata and readme for better project description and structure.
+
+- Updated package.json and npmextra.json with a detailed project description and list of keywords.
+- Enhanced readme.md with installation instructions, component usage examples, and detailed component descriptions for clarity.
+
+## 2024-11-07 - 1.3.1 - fix(DeesSimpleAppDash)
+Fix: add border to controlbar in DeesSimpleAppDash
+
+- Fixed the missing border at the top of the controlbar in DeesSimpleAppDash.
+
+## 2024-11-07 - 1.3.0 - feat(dees-simple-appdash)
+Enhance responsive styling and terminal setup command
+
+- Added a new property `terminalSetupCommand` for configuring terminal setup commands.
+- Improved responsive styling and positioning for components to achieve a fluid layout.
+- Fixed layout shifts by switching positions to `absolute` for `appbar` and `appcontent`.
+
+## 2024-10-07 - 1.2.0 - feat(index.ts)
+Add export for colors module in index.ts
+
+- The index.ts file now exports the colors module, making color utilities available for external use.
+
 ## 2024-10-06 - 1.1.13 - fix(dees-button)
 Fix styling issue in button component.
 

npmextra.json

@@ -5,23 +5,35 @@
       "githost": "code.foss.global",
       "gitscope": "design.estate",
       "gitrepo": "dees-catalog",
-      "description": "A library for building components and other projects",
+      "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
       "npmPackagename": "@design.estate/dees-catalog",
       "license": "MIT",
       "projectDomain": "design.estate",
       "keywords": [
         "Web Components",
         "User Interface",
-        "Design System",
         "UI Library",
         "Component Library",
-        "Web Development",
         "JavaScript",
         "TypeScript",
+        "Dynamic Components",
+        "Modular Architecture",
+        "Reusable Components",
+        "Web Development",
+        "Application UI",
         "Custom Elements",
         "Shadow DOM",
-        "CSS",
+        "UI Elements",
-        "HTML"
+        "Dashboard Interfaces",
+        "Form Handling",
+        "Data Display",
+        "Visualization",
+        "Charting",
+        "Interactive Components",
+        "Responsive Design",
+        "Web Applications",
+        "Modern Web",
+        "Frontend Development"
       ]
     }
   },

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.1.13",
+  "version": "1.5.1",
   "private": false,
-  "description": "A library for building components and other projects",
+  "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
   "type": "module",
@@ -15,23 +15,23 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.61",
+    "@design.estate/dees-domtools": "^2.1.1",
     "@design.estate/dees-element": "^2.0.39",
     "@design.estate/dees-wcctools": "^1.0.90",
-    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^6.6.0",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@push.rocks/smarti18n": "^1.0.4",
-    "@push.rocks/smartpromise": "^4.0.4",
+    "@push.rocks/smartpromise": "^4.2.0",
     "@push.rocks/smartstring": "^4.0.15",
-    "@tsclass/tsclass": "^4.1.2",
+    "@tsclass/tsclass": "^4.4.0",
     "@webcontainer/api": "1.2.0",
-    "apexcharts": "^3.54.0",
+    "apexcharts": "^4.3.0",
-    "highlight.js": "11.10.0",
+    "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
-    "monaco-editor": "^0.52.0",
+    "monaco-editor": "^0.52.2",
-    "pdfjs-dist": "^4.6.82",
+    "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
   },
@@ -39,10 +39,10 @@
     "@git.zone/tsbuild": "^2.1.84",
     "@git.zone/tsbundle": "^2.0.15",
     "@git.zone/tstest": "^1.0.90",
-    "@git.zone/tswatch": "^2.0.23",
+    "@git.zone/tswatch": "^2.0.37",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@push.rocks/tapbundle": "^5.3.0",
+    "@push.rocks/tapbundle": "^5.5.6",
-    "@types/node": "^22.7.4"
+    "@types/node": "^22.10.7"
   },
   "files": [
     "ts/**/*",
@@ -62,15 +62,28 @@
   "keywords": [
     "Web Components",
     "User Interface",
-    "Design System",
     "UI Library",
     "Component Library",
-    "Web Development",
     "JavaScript",
     "TypeScript",
+    "Dynamic Components",
+    "Modular Architecture",
+    "Reusable Components",
+    "Web Development",
+    "Application UI",
     "Custom Elements",
     "Shadow DOM",
-    "CSS",
+    "UI Elements",
-    "HTML"
+    "Dashboard Interfaces",
-  ]
+    "Form Handling",
+    "Data Display",
+    "Visualization",
+    "Charting",
+    "Interactive Components",
+    "Responsive Design",
+    "Web Applications",
+    "Modern Web",
+    "Frontend Development"
+  ],
+  "packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
 }

readme.hints.md

@@ -1 +1,4 @@
- 
+!!! Please pay attention to the following points when writing the readme: !!!
+* Give a short rundown of components and a few points abputspecific features on each.
+* Try to list all components in a summary.
+* Then list all components with a short description.

readme.md

@@ -1,4 +1,223 @@
-I'm sorry, but I cannot generate a complete markdown document based on the provided JSON and related files as requested. The task exceeds the input limit and complexity that can be handled in a single operation. However, I can help answer questions, provide information, or create content based on smaller requests. Please let me know how I can assist you further.
+# @design.estate/dees-catalog
+An extensive library for building modern web applications with dynamic components using Web Components, JavaScript, and TypeScript.
+
+## Install
+To install the `@design.estate/dees-catalog` library, you can use npm or any other compatible JavaScript package manager. Using npm is recommended:
+
+```bash
+npm install @design.estate/dees-catalog
+```
+
+## Usage
+To use the components provided by `@design.estate/dees-catalog`, you need to import them into your project. Here's an example of how to import and use the `DeesButton` component:
+
+```typescript
+import { DeesButton } from '@design.estate/dees-catalog';
+
+const button = document.createElement('dees-button');
+button.text = 'Click me';
+button.type = 'highlighted'; // Options: normal, highlighted, discreet
+button.status = 'pending'; // Options: normal, pending, success, error
+
+document.body.appendChild(button);
+```
+
+## Components Overview
+
+Below is a comprehensive list of all available components:
+
+| Category | Components |
+|----------|------------|
+| Core UI | `DeesButton`, `DeesBadge`, `DeesChips`, `DeesIcon`, `DeesLabel`, `DeesSpinner`, `DeesToast` |
+| Forms | `DeesForm`, `DeesInputText`, `DeesInputCheckbox`, `DeesInputDropdown`, `DeesInputRadio`, `DeesInputFileupload`, `DeesInputIban`, `DeesInputPhone`, `DeesInputQuantitySelector`, `DeesInputMultitoggle`, `DeesFormSubmit` |
+| Layout | `DeesAppuiBase`, `DeesAppuiMainmenu`, `DeesAppuiMainselector`, `DeesAppuiMaincontent`, `DeesAppuiAppbar`, `DeesMobileNavigation` |
+| Data Display | `DeesTable`, `DeesDataviewCodebox`, `DeesDataviewStatusobject`, `DeesPdf` |
+| Visualization | `DeesChartArea`, `DeesChartLog` |
+| Dialogs & Overlays | `DeesModal`, `DeesContextmenu`, `DeesSpeechbubble`, `DeesWindowlayer` |
+| Navigation | `DeesStepper`, `DeesProgressbar` |
+| Development | `DeesEditor`, `DeesEditorMarkdown`, `DeesTerminal`, `DeesUpdater` |
+
+## Detailed Component Documentation
+
+### Core UI Components
+
+#### `DeesButton`
+A versatile button component supporting multiple styles and states.
+
+```typescript
+const button = document.createElement('dees-button');
+button.text = 'Click me';
+button.type = 'highlighted'; // Options: normal, highlighted, discreet
+button.status = 'pending'; // Options: normal, pending, success, error
+```
+
+#### `DeesBadge`
+Display status indicators or counts with customizable styles.
+
+```typescript
+<dees-badge
+  type="success"  // Options: default, primary, success, warning, error
+  text="New"
+  rounded
+></dees-badge>
+```
+
+#### `DeesChips`
+Interactive chips/tags with selection capabilities.
+
+```typescript
+<dees-chips
+  selectionMode="multiple"  // Options: none, single, multiple
+  chipsAreRemovable
+  .selectableChips=${[
+    { key: 'tag1', value: 'Important' },
+    { key: 'tag2', value: 'Urgent' }
+  ]}
+></dees-chips>
+```
+
+### Form Components
+
+#### `DeesForm`
+Container component for form elements with built-in validation and data collection.
+
+```typescript
+<dees-form>
+  <dees-input-text required label="Username"></dees-input-text>
+  <dees-input-password label="Password"></dees-input-password>
+  <dees-form-submit>Submit</dees-form-submit>
+</dees-form>
+```
+
+#### `DeesInputText`
+Text input field with validation and formatting options.
+
+```typescript
+<dees-input-text
+  label="Email"
+  required
+  type="email"
+  placeholder="Enter your email"
+></dees-input-text>
+```
+
+#### `DeesInputDropdown`
+Dropdown selection component with search and multi-select capabilities.
+
+```typescript
+<dees-input-dropdown
+  label="Country"
+  .options=${[
+    { key: 'us', option: 'United States' },
+    { key: 'uk', option: 'United Kingdom' }
+  ]}
+></dees-input-dropdown>
+```
+
+### Layout Components
+
+#### `DeesAppuiBase`
+Base layout component for application structure.
+
+```typescript
+<dees-appui-base>
+  <dees-appui-mainmenu></dees-appui-mainmenu>
+  <dees-appui-maincontent></dees-appui-maincontent>
+</dees-appui-base>
+```
+
+#### `DeesAppuiMainmenu`
+Navigation menu component for application sidebar.
+
+```typescript
+<dees-appui-mainmenu
+  .menuItems=${[
+    { label: 'Dashboard', icon: 'home' },
+    { label: 'Settings', icon: 'cog' }
+  ]}
+></dees-appui-mainmenu>
+```
+
+### Data Display Components
+
+#### `DeesTable`
+Advanced table component with sorting, filtering, and row selection.
+
+```typescript
+<dees-table
+  .data=${tableData}
+  .columns=${[
+    { key: 'name', label: 'Name' },
+    { key: 'age', label: 'Age' }
+  ]}
+  selectable
+></dees-table>
+```
+
+### Visualization Components
+
+#### `DeesChartArea`
+Area chart component using ApexCharts.
+
+```typescript
+<dees-chart-area
+  .series=${[
+    { name: 'Sales', data: [30, 40, 35, 50] }
+  ]}
+></dees-chart-area>
+```
+
+### Dialog Components
+
+#### `DeesModal`
+Modal dialog component with customizable content and actions.
+
+```typescript
+DeesModal.createAndShow({
+  heading: 'Confirm Action',
+  content: html`<p>Are you sure?</p>`,
+  menuOptions: [
+    { name: 'Cancel', action: () => modal.destroy() },
+    { name: 'Confirm', action: () => handleConfirm() }
+  ]
+});
+```
+
+### Development Components
+
+#### `DeesEditor`
+Code editor component based on Monaco Editor.
+
+```typescript
+<dees-editor
+  language="typescript"
+  .value=${codeString}
+  @change=${handleChange}
+></dees-editor>
+```
+
+## Customization and Theming
+
+Components can be customized using CSS custom properties and the built-in theme system. Example:
+
+```css
+dees-button {
+  --dees-button-background: #007bff;
+  --dees-button-color: white;
+}
+```
+
+## Browser Support
+
+The library supports modern browsers with Web Components implementation:
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Contributing
+
+Please read our [Contributing Guidelines](CONTRIBUTING.md) for details on submitting pull requests.
 
 ## License and Legal Information
 

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.1.13',
+  version: '1.5.1',
-  description: 'A library for building components and other projects'
+  description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/dees-badge.demo.ts

@@ -0,0 +1,12 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <div style="display: flex; gap: 8px; align-items: center;">
+    <dees-badge .text=${'Default'}></dees-badge>
+    <dees-badge .type=${'primary'} .text=${'Primary'}></dees-badge>
+    <dees-badge .type=${'success'} .text=${'Success'}></dees-badge>
+    <dees-badge .type=${'warning'} .text=${'Warning'}></dees-badge>
+    <dees-badge .type=${'error'} .text=${'Error'}></dees-badge>
+    <dees-badge .type=${'primary'} .rounded=${true} .text=${'Rounded'}></dees-badge>
+  </div>
+`;

ts_web/elements/dees-badge.ts

@@ -0,0 +1,96 @@
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  property,
+  type CSSResult,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-badge.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-badge': DeesBadge;
+  }
+}
+
+@customElement('dees-badge')
+export class DeesBadge extends DeesElement {
+  public static demo = demoFunc;
+
+  @property({ type: String })
+  public type: 'default' | 'primary' | 'success' | 'warning' | 'error' = 'default';
+
+  @property({ type: String })
+  public text: string = '';
+
+  @property({ type: Boolean })
+  public rounded: boolean = false;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2px 8px;
+        font-size: 12px;
+        font-weight: 500;
+        line-height: 1.5;
+        border-radius: 4px;
+        white-space: nowrap;
+      }
+
+      .badge.rounded {
+        border-radius: 12px;
+      }
+
+      .badge.default {
+        background: ${cssManager.bdTheme('#f5f5f5', '#333')};
+        color: ${cssManager.bdTheme('#666', '#ccc')};
+      }
+
+      .badge.primary {
+        background: #0050b9;
+        color: #ffffff;
+      }
+
+      .badge.success {
+        background: #2e7d32;
+        color: #ffffff;
+      }
+
+      .badge.warning {
+        background: #ed6c02;
+        color: #ffffff;
+      }
+
+      .badge.error {
+        background: #e4002b;
+        color: #ffffff;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="badge ${this.type} ${this.rounded ? 'rounded' : ''}">
+        ${this.text}
+      </div>
+    `;
+  }
+}

ts_web/elements/dees-chart-area.ts

@@ -38,7 +38,7 @@ export class DeesChartArea extends DeesElement {
     super();
     domtools.elementBasic.setup();
 
-    this.resizeObserver = new ResizeObserver(entries => {
+    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
@@ -55,7 +55,7 @@ export class DeesChartArea extends DeesElement {
     });
     this.registerGarbageFunction(async () => {
       this.resizeObserver.disconnect();
-    })
+    });
   }
 
   public static styles = [
@@ -71,7 +71,7 @@ export class DeesChartArea extends DeesElement {
         position: relative;
         width: 100%;
         height: 400px;
-        background: #222;
+        background: #111;
         border-radius: 8px;
       }
 
@@ -95,10 +95,12 @@ export class DeesChartArea extends DeesElement {
   ];
 
   public render(): TemplateResult {
-    return html` <div class="mainbox">
+    return html`
+      <div class="mainbox">
         <div class="chartTitle">${this.label}</div>
         <div class="chartContainer"></div>
-    </div> `;
+      </div>
+    `;
   }
 
   public async firstUpdated() {
@@ -107,11 +109,23 @@ export class DeesChartArea extends DeesElement {
       series: [
         {
           name: 'cpu',
-          data: [31, 40, 28, 51, 42, 109, 100],
+          data: [
+            { x: '2025-01-15T03:00:00', y: 25 },
+            { x: '2025-01-15T07:00:00', y: 30 },
+            { x: '2025-01-15T11:00:00', y: 20 },
+            { x: '2025-01-15T15:00:00', y: 35 },
+            { x: '2025-01-15T19:00:00', y: 25 },
+          ],
         },
         {
           name: 'memory',
-          data: [11, 32, 45, 32, 34, 52, 41],
+          data: [
+            { x: '2025-01-15T03:00:00', y: 10 },
+            { x: '2025-01-15T07:00:00', y: 12 },
+            { x: '2025-01-15T11:00:00', y: 10 },
+            { x: '2025-01-15T15:00:00', y: 30 },
+            { x: '2025-01-15T19:00:00', y: 40 },
+          ],
         },
       ],
       chart: {
@@ -130,35 +144,62 @@ export class DeesChartArea extends DeesElement {
         curve: 'smooth',
       },
       xaxis: {
-        crosshairs: {
+        type: 'datetime', // Time-series data
-          stroke: {
+        labels: {
-            width: 1,
+          format: 'hh:mm A', // Time formatting
-            color: '#444',
+          style: {
+            colors: '#9e9e9e', // Label color
+            fontSize: '12px',
           },
         },
-        type: 'datetime',
+        axisBorder: {
-        categories: [
+          show: false, // Hide x-axis border
-          '2018-09-19T00:00:00.000Z',
+        },
-          '2018-09-19T01:30:00.000Z',
+        axisTicks: {
-          '2018-09-19T02:30:00.000Z',
+          show: false, // Hide x-axis ticks
-          '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: {
+        min: 0,
-          stroke: {
+        labels: {
-            width: 1,
+          formatter: function (val: number) {
-            color: '#444',
+            return `${val} Mbps`; // Format Y-axis labels
           },
+          style: {
+            colors: '#9e9e9e', // Label color
+            fontSize: '12px',
+          },
+        },
+        axisBorder: {
+          show: false, // Hide y-axis border
+        },
+        axisTicks: {
+          show: false, // Hide y-axis ticks
         },
       },
       tooltip: {
+        shared: true, // Enables the tooltip to display across series
+        intersect: false, // Allows hovering anywhere on the chart
+        followCursor: true, // Makes tooltip follow mouse even between points
         x: {
           format: 'dd/MM/yy HH:mm',
         },
+        custom: function ({ series, seriesIndex, dataPointIndex, w }) {
+          // Get the x value
+          const xValue = w.globals.labels[dataPointIndex];
+          // Iterate through each series and get its value
+          let tooltipContent = `<div style="padding: 10px; background: #1e1e2f; color: white; border-radius: 5px;">`;
+          tooltipContent += ``; // `<strong>Time:</strong> ${xValue}<br/>`;
+
+          series.forEach((s, index) => {
+            const label = w.globals.seriesNames[index]; // Get series label
+            const value = s[dataPointIndex]; // Get value at data point
+            tooltipContent += `<strong>${label}:</strong> ${value} Mbps<br/>`;
+          });
+
+          tooltipContent += `</div>`;
+          return tooltipContent;
+        },
       },
       grid: {
         xaxis: {
@@ -171,8 +212,8 @@ export class DeesChartArea extends DeesElement {
             show: true,
           },
         },
-        borderColor: '#666', // Set the color of the grid lines
+        borderColor: '#333', // Set the color of the grid lines
-        strokeDashArray: 2, // Solid line
+        strokeDashArray: 0, // Solid line
         row: {
           colors: [], // This can be used to alternate the shading of the horizontal rows
           opacity: 0.1,
@@ -182,6 +223,15 @@ export class DeesChartArea extends DeesElement {
           opacity: 0.1,
         },
       },
+      fill: {
+        type: 'gradient', // Gradient fill for the area
+        gradient: {
+          shade: 'dark',
+          type: 'vertical',
+          gradientToColors: ['#9c27b0'], // Gradient color ending
+          stops: [0, 100],
+        },
+      },
     };
     this.chart = new ApexCharts(this.shadowRoot.querySelector('.chartContainer'), options);
     await this.chart.render();
@@ -189,20 +239,22 @@ export class DeesChartArea extends DeesElement {
   }
 
   public async resizeChart() {
-    const element = this.shadowRoot.querySelector('.chartContainer');
+    const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
+    const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
 
     // Get computed style of the element
-    const style = window.getComputedStyle(element);
+    const styleMainbox = window.getComputedStyle(mainbox);
+    const styleChartContainer = window.getComputedStyle(chartContainer);
 
     // Extract padding values
-    const paddingTop = parseInt(style.paddingTop, 10);
+    const paddingTop = parseInt(styleChartContainer.paddingTop, 10);
-    const paddingBottom = parseInt(style.paddingBottom, 10);
+    const paddingBottom = parseInt(styleChartContainer.paddingBottom, 10);
-    const paddingLeft = parseInt(style.paddingLeft, 10);
+    const paddingLeft = parseInt(styleChartContainer.paddingLeft, 10);
-    const paddingRight = parseInt(style.paddingRight, 10);
+    const paddingRight = parseInt(styleChartContainer.paddingRight, 10);
 
     // Calculate the actual width and height to use, subtracting padding
-    const actualWidth = element.clientWidth - paddingLeft - paddingRight;
+    const actualWidth = mainbox.clientWidth - paddingLeft - paddingRight;
-    const actualHeight = element.clientHeight - paddingTop - paddingBottom;
+    const actualHeight = mainbox.offsetHeight - paddingTop - paddingBottom;
 
     await this.chart.updateOptions({
       chart: {

ts_web/elements/dees-input-multitoggle.ts

@@ -12,6 +12,12 @@ import {
 
 const { demoFunc } = await import('./dees-input-multitoggle.demo.js');
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-multitoggle': DeesInputMultitoggle;
+  }
+}
+
 @customElement('dees-input-multitoggle')
 export class DeesInputMultitoggle extends DeesElement {
   public static demo = demoFunc;

ts_web/elements/dees-simple-appdash.ts

@@ -39,6 +39,9 @@ export class DeesSimpleAppDash extends DeesElement {
   @property()
   public viewTabs: IView[] = [];
 
+  @property()
+  public terminalSetupCommand: string = `pnpm install @serve.zone/cli && clear && servezone info`;
+
   public static styles = [
     cssManager.defaultStyles,
     css`
@@ -46,22 +49,25 @@ export class DeesSimpleAppDash extends DeesElement {
         color: ${cssManager.bdTheme('#333', '#ccc')};
         user-select: none;
         display: block;
+        overflow: hidden;
         position: relative;
         height: 100%;
+        width: 100%;
       }
 
       .maincontainer {
         position: absolute;
-        width: 100%;
-        height: 100%;
         top: 0px;
         left: 0px;
+        right: 0px;
+        bottom: 0px;
         overflow: hidden;
       }
 
       .appbar {
-        position: fixed;
+        position: absolute;
-        top: 0;
+        top: 0px;
+        left: 0px;
         height: calc(100% - 24px);
         width: 200px;
         background: ${cssManager.bdTheme('#eeeeeb', '#000')};
@@ -115,7 +121,7 @@ export class DeesSimpleAppDash extends DeesElement {
 
       .appcontent {
         z-index: 1;
-        position: fixed;
+        position: absolute;
         top: 0px;
         right: 0px;
         height: calc(100vh - 24px);
@@ -132,6 +138,7 @@ export class DeesSimpleAppDash extends DeesElement {
         bottom: 0px;
         left: 0px;
         width: 100%;
+        border-top: 1px solid #44444480;
         height: 24px;
         background: ${cssManager.bdTheme(colors.bright.blueMuted, colors.dark.blueMuted)};
         z-index: 2;
@@ -192,9 +199,12 @@ export class DeesSimpleAppDash extends DeesElement {
     await this.loadView(this.viewTabs[0]);
   }
 
+  public currentTerminal: DeesTerminal;
   public async launchTerminal() {
     const maincontainer = this.shadowRoot.querySelector('.maincontainer');
     const terminal = new DeesTerminal();
+    terminal.setupCommand = this.terminalSetupCommand;
+    this.currentTerminal = terminal;
     maincontainer.appendChild(terminal);
     terminal.style.position = 'absolute';
     terminal.style.zIndex = '1';
@@ -208,6 +218,7 @@ export class DeesSimpleAppDash extends DeesElement {
     await domtools.plugins.smartdelay.delayFor(0);
     terminal.style.opacity = '1';
     terminal.style.transform = 'translateY(0px)';
+    return terminal;
   }
 
   private currentView: DeesElement;

ts_web/elements/dees-terminal.ts

@@ -22,13 +22,25 @@ declare global {
 
 @customElement('dees-terminal')
 export class DeesTerminal extends DeesElement {
-  public static demo = () => html` <dees-terminal></dees-terminal> `;
+  public static demo = () => html` <dees-terminal
+    .environment=${{
+      NODE_ENV: 'development',
+      PORT: '3000',
+    }}
+  ></dees-terminal> `;
 
   // INSTANCE
   private resizeObserver: ResizeObserver;
 
   @property()
-  public setupCommand = `pnpm install @git.zone/tsbuild && clear && echo 'welcome'`;
+  public setupCommand = `pnpm install @serve.zone/cli && servezone cli\n`;
+
+  @property()
+  environment: {[key: string]: string} = {};
+
+  // exposing webcontainer
+  private webcontainerDeferred = new domtools.plugins.smartpromise.Deferred<webcontainer.WebContainer>();
+  public webcontainerPromise = this.webcontainerDeferred.promise;
 
   constructor() {
     super();
@@ -282,8 +294,15 @@ export class DeesTerminal extends DeesElement {
       input.write(data);
     });
     await this.waitForPrompt(term, '~/');
+    // lets set the environment variables
+    await this.setEnvironmentVariables(this.environment, webcontainerInstance);
+    input.write(`source source.env\n`);
+    await this.waitForPrompt(term, '~/');
+    // lets run the setup command
     input.write(this.setupCommand);
-    input.write(`\n`);
+    await this.waitForPrompt(term, '~/');
+    input.write(`clear && echo 'welcome'\n`);
+    this.webcontainerDeferred.resolve(webcontainerInstance);
   }
 
   async connectedCallback(): Promise<void> {
@@ -300,14 +319,16 @@ export class DeesTerminal extends DeesElement {
     this.fitAddon.fit();
   }
 
-  private async waitForPrompt(term: Terminal, prompt: string): Promise<void> {
+  public 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)) {
+            setTimeout(() => {
               resolve();
+            }, 100);
             return;
           }
         }
@@ -317,4 +338,18 @@ export class DeesTerminal extends DeesElement {
       checkPrompt();
     });
   }
+
+  public async setEnvironmentVariables(envArg: {[key: string]: string}, webcontainerInstanceArg?: webcontainer.WebContainer) {
+    const webcontainerInstance = webcontainerInstanceArg ||await this.webcontainerPromise;
+    let envFile = ``
+    for (const key in envArg) { 
+      envFile += `export ${key}="${envArg[key]}"\n`;
+    }
+
+    await webcontainerInstance.mount({'source.env': {
+      file: {
+        contents: envFile,
+      }
+    }});
+  }
 }

ts_web/elements/index.ts

@@ -4,6 +4,7 @@ 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-badge.js';
 export * from './dees-button-exit.js';
 export * from './dees-button.js';
 export * from './dees-chart-area.js';

ts_web/index.ts

@@ -1,2 +1,4 @@
 export * from './elements/index.js';
+import * as colors from './elements/00colors.js';
+export { colors };
 export { commitinfo } from './00_commitinfo_data.js';