1.4.1

changelog.md

@@ -1,5 +1,52 @@
 # Changelog
 
+## 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
 

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",
-        "HTML"
+        "UI Elements",
+        "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.2.0",
+  "version": "1.4.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/free-brands-svg-icons": "^6.6.0",
-    "@fortawesome/free-regular-svg-icons": "^6.6.0",
-    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@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",
-    "highlight.js": "11.10.0",
+    "apexcharts": "^4.3.0",
+    "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
-    "monaco-editor": "^0.52.0",
-    "pdfjs-dist": "^4.6.82",
+    "monaco-editor": "^0.52.2",
+    "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",
-    "@types/node": "^22.7.4"
+    "@push.rocks/tapbundle": "^5.5.6",
+    "@types/node": "^22.10.7"
   },
   "files": [
     "ts/**/*",
@@ -62,15 +62,27 @@
   "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",
-    "HTML"
+    "UI Elements",
+    "Dashboard Interfaces",
+    "Form Handling",
+    "Data Display",
+    "Visualization",
+    "Charting",
+    "Interactive Components",
+    "Responsive Design",
+    "Web Applications",
+    "Modern Web",
+    "Frontend Development"
   ]
 }

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,199 @@
-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
+
+### Overview
+
+The `@design.estate/dees-catalog` is a powerful library that offers a suite of dynamic components designed for building sophisticated web applications. This library leverages modern web standards such as Web Components, and programming languages like JavaScript and TypeScript to provide developers with modular and reusable components. These components enhance the development workflow by offering ready-to-use solutions for UI design and interactivity, enabling developers to create intricate and functional applications efficiently.
+
+Below, we will explore the diverse range of components available, demonstrating their integration and usage thoroughly within real-world scenarios. Each example will be crafted in TypeScript to ensure type safety and maintainable code. Let's navigate through the components by examining their setups, features, and potential applications in a comprehensive manner.
+
+### Getting Started with Components
+
+To use these components, you first need to import them into your project. Depending on your development environment, you might be using a module bundler that supports ES modules. In such cases, importing components is straightforward as demonstrated below:
+
+```typescript
+import {
+  DeesButton,
+  DeesModal,
+  DeesTable,
+  DeesAppuiBase,
+  DeesForm,
+  DeesInputText,
+  DeesAppuiMainmenu,
+  DeesAppuiMainselector
+} from '@design.estate/dees-catalog';
+```
+
+### Button Component: `DeesButton`
+
+`DeesButton` is a versatile button component that can be configured for various UI needs such as form submissions, navigation actions, or interactive interfaces. It supports multiple styles including normal, highlighted, discreet, and status-based variations (e.g., pending, success, error).
+
+#### Example Usage
+
+```typescript
+import { DeesButton } from '@design.estate/dees-catalog';
+
+// Create a simple button
+const submitButton = document.createElement('dees-button');
+submitButton.text = 'Submit';
+submitButton.type = 'highlighted';
+
+// Add functionality
+submitButton.addEventListener('clicked', () => {
+  console.log('Submit button clicked!');
+});
+document.body.appendChild(submitButton);
+
+// Handling status change
+async function handleFormSubmission() {
+  submitButton.status = 'pending';
+  try {
+    await simulateNetworkRequest();
+    submitButton.status = 'success';
+  } catch {
+    submitButton.status = 'error';
+  }
+}
+
+function simulateNetworkRequest() {
+  return new Promise(resolve => setTimeout(resolve, 2000));
+}
+
+submitButton.addEventListener('clicked', handleFormSubmission);
+```
+
+### Modal Component: `DeesModal`
+
+The `DeesModal` component is used to display content in an overlay. It is suitable for scenarios like alerts, dialog boxes, or interactive user forms. The modal can be highly customized with different header, content, and footer components.
+
+#### Example Usage
+
+```typescript
+import { DeesModal } from '@design.estate/dees-catalog';
+import { html } from '@design.estate/dees-element';
+
+// Creating a modal
+const modalContent = html`<p>Welcome to our platform</p>`;
+const modal = DeesModal.createAndShow({
+  heading: 'Welcome',
+  content: modalContent,
+  menuOptions: [
+    { name: 'Close', action: () => modal.destroy() },
+    { name: 'Proceed', action: () => console.log('Proceeding') }
+  ]
+});
+```
+
+### Form Handling With `DeesForm`
+
+The `DeesForm` and its related input elements simplify form creation and handling. The form component integrates validation, submission, and data collection functions.
+
+#### Creating a Form
+
+```typescript
+import {
+  DeesForm,
+  DeesInputText,
+  DeesFormSubmit,
+  DeesInputDropdown
+} from '@design.estate/dees-catalog';
+
+const registrationForm = document.createElement('dees-form');
+
+const nameInput = document.createElement('dees-input-text');
+nameInput.label = 'Name';
+nameInput.required = true;
+
+const roleSelect = document.createElement('dees-input-dropdown');
+roleSelect.label = 'Role';
+roleSelect.options = [
+  { option: 'Admin', key: 'admin' },
+  { option: 'Editor', key: 'editor' }
+];
+
+const submitButton = document.createElement('dees-form-submit');
+submitButton.text = 'Register';
+
+registrationForm.appendChild(nameInput);
+registrationForm.appendChild(roleSelect);
+registrationForm.appendChild(submitButton);
+
+registrationForm.addEventListener('formData', event => {
+  console.log('Form Data:', event.detail.data);
+});
+
+document.body.appendChild(registrationForm);
+```
+
+### Data Presentation with `DeesTable`
+
+The `DeesTable` component allows for effective data management and presentation through dynamic tables. It supports features such as sorting, selecting, and action-triggering from table items.
+
+#### Displaying a Data Table
+
+```typescript
+import { DeesTable } from '@design.estate/dees-catalog';
+
+const data = [
+  { name: 'Alice', status: 'Active' },
+  { name: 'Bob', status: 'Inactive' }
+];
+
+const table = new DeesTable();
+table.heading1 = 'User Table';
+table.data = data;
+
+document.body.appendChild(table);
+
+// Custom Actions and Row Selection
+table.addEventListener('rowSelected', (event) => console.log(event.detail));
+```
+
+### Structural Components
+
+`DeesAppuiBase`, along with components such as `DeesAppuiMainmenu` and `DeesAppuiMainselector`, provide the scaffolding needed for application UIs, particularly dashboards.
+
+#### Setting Up an Application Layout
+
+```typescript
+import { DeesAppuiBase } from '@design.estate/dees-catalog';
+
+const appBase = document.createElement('dees-appui-base');
+document.body.appendChild(appBase);
+```
+
+### Data Visualization with ApexCharts
+
+`DeesChartArea` provides easy integration with ApexCharts for creating detailed visualizations.
+
+#### Implementing a Chart
+
+```typescript
+import { DeesChartArea } from '@design.estate/dees-catalog';
+
+// Create and configure a chart
+const chart = new DeesChartArea();
+document.body.appendChild(chart);
+
+chart.chart.updateSeries([
+  { name: 'Sales', data: [20, 40, 30, 50] }
+]);
+```
+
+### Customization and Extensibility
+
+The `@design.estate/dees-catalog` is built for extensibility and customization. You can extend components, integrate custom events, and style them as per your requirements. This ensures that your application remains unique and tailored to your audience.
+
+The library not only saves development time by providing ready-made components but also enhances maintainability through its clean interfaces and TypeScript support, making your code robust and type-safe. With the library's expansive set of features, building modern web applications has never been easier. Enjoy the blend of simplicity and power that `@design.estate/dees-catalog` brings to the table.
 
 ## License and Legal Information
 

ts_web/00_commitinfo_data.ts

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

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">
-      <div class="chartTitle">${this.label}</div>
-      <div class="chartContainer"></div>
-    </div> `;
+    return html`
+      <div class="mainbox">
+        <div class="chartTitle">${this.label}</div>
+        <div class="chartContainer"></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: {
-          stroke: {
-            width: 1,
-            color: '#444',
+        type: 'datetime', // Time-series data
+        labels: {
+          format: 'hh:mm A', // Time formatting
+          style: {
+            colors: '#9e9e9e', // Label color
+            fontSize: '12px',
           },
         },
-        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',
-        ],
+        axisBorder: {
+          show: false, // Hide x-axis border
+        },
+        axisTicks: {
+          show: false, // Hide x-axis ticks
+        },
       },
       yaxis: {
-        crosshairs: {
-          stroke: {
-            width: 1,
-            color: '#444',
+        min: 0,
+        labels: {
+          formatter: function (val: number) {
+            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
-        strokeDashArray: 2, // Solid line
+        borderColor: '#333', // Set the color of the grid lines
+        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 paddingBottom = parseInt(style.paddingBottom, 10);
-    const paddingLeft = parseInt(style.paddingLeft, 10);
-    const paddingRight = parseInt(style.paddingRight, 10);
+    const paddingTop = parseInt(styleChartContainer.paddingTop, 10);
+    const paddingBottom = parseInt(styleChartContainer.paddingBottom, 10);
+    const paddingLeft = parseInt(styleChartContainer.paddingLeft, 10);
+    const paddingRight = parseInt(styleChartContainer.paddingRight, 10);
 
     // Calculate the actual width and height to use, subtracting padding
-    const actualWidth = element.clientWidth - paddingLeft - paddingRight;
-    const actualHeight = element.clientHeight - paddingTop - paddingBottom;
+    const actualWidth = mainbox.clientWidth - paddingLeft - paddingRight;
+    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;
-        top: 0;
+        position: absolute;
+        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)) {
-            resolve();
+            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,
+      }
+    }});
+  }
 }