v3.50.2

changelog.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## 2026-04-02 - 3.50.2 - fix(chart,dashboardgrid demos)
+use dees-button text property consistently in demo interactions and update dataset button highlighting reliably
+
+- Replaces textContent reads with the component text property when wiring demo button handlers.
+- Updates the chart area demo to refresh dataset button highlight states directly on click without redundant listener replacement logic.
+- Uses the button text property when toggling dashboard edit mode labels.
+
+## 2026-04-02 - 3.50.1 - fix(appdash)
+use banner height CSS variable for terminal layout and expose terminal resize handling
+
+- Removes manual terminal top offset updates in the app dashboard and relies on the shared --banner-area-height CSS variable instead.
+- Drops fixed max-width and max-height calculations so the terminal can size more reliably within its container.
+- Makes the workspace terminal resize handler public to support external resize coordination.
+
+## 2026-04-02 - 3.50.0 - feat(dees-simple-appdash)
+add global message banners with actions and dismissal support
+
+- introduces typed global message APIs and public methods to add, remove, and clear banners
+- renders info, success, warning, and error banners with optional icons and action buttons
+- adjusts app content and terminal positioning to account for banner height dynamically
+- updates the demo to showcase dismissible and actionable global messages
+
 ## 2026-04-02 - 3.49.2 - fix(dees-input-list)
 refine dees-input-list spacing and simplify the add item action button
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.49.2",
+  "version": "3.50.2",
   "private": false,
   "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",

ts_web/00_commitinfo_data.ts

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

ts_web/elements/00group-chart/dees-chart-area/component.ts

@@ -468,16 +468,16 @@ export class DeesChartArea extends DeesElement {
     if (!this.chart) {
       return;
     }
-    
+
     try {
       // Store the new data first
       this.internalChartData = newSeries;
-      
+
       // Handle rolling window if enabled
       if (this.rollingWindow > 0 && this.realtimeMode) {
         const now = Date.now();
         const cutoffTime = now - this.rollingWindow;
-        
+
         // Filter data to only include points within the rolling window
         const filteredSeries = newSeries.map(series => ({
           name: series.name,
@@ -488,25 +488,41 @@ export class DeesChartArea extends DeesElement {
             return false;
           })
         }));
-        
+
         // Only update if we have data
         if (filteredSeries.some(s => s.data.length > 0)) {
-          // Handle y-axis scaling first
+          // Build a single options update with series, x-axis window, and y-axis
+          const isDark = !this.goBright;
+          const options: ApexCharts.ApexOptions = {
+            series: filteredSeries,
+            xaxis: {
+              min: cutoffTime,
+              max: now,
+              labels: {
+                format: 'HH:mm:ss',
+                datetimeUTC: false,
+                style: {
+                  colors: [isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)'],
+                  fontSize: '12px',
+                  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+                  fontWeight: '400',
+                },
+              },
+              tickAmount: 6,
+            },
+          };
+
+          // Handle y-axis scaling
           if (this.yAxisScaling === 'dynamic') {
             const allValues = filteredSeries.flatMap(s => (s.data as any[]).map(d => d.y));
             if (allValues.length > 0) {
               const maxValue = Math.max(...allValues);
               const dynamicMax = Math.ceil(maxValue * 1.1);
-              await this.chart.updateOptions({
-                yaxis: {
-                  min: 0,
-                  max: dynamicMax
-                }
-              }, false, false);
+              options.yaxis = { min: 0, max: dynamicMax };
             }
           }
-          
-          await this.chart.updateSeries(filteredSeries, false);
+
+          await this.chart.updateOptions(options, false, false);
         }
       } else {
         await this.chart.updateSeries(newSeries, animate);

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

@@ -310,30 +310,11 @@ export const demoFunc = () => {
         connectionsLastUpdate = 0;
       };
 
-      // Wire up button click handlers
-      const buttons = elementArg.querySelectorAll('dees-button');
-      buttons.forEach(button => {
-        const text = button.textContent?.trim();
-        if (text === 'System Usage') {
-          button.addEventListener('click', () => switchDataset('system'));
-        } else if (text === 'Network Traffic') {
-          button.addEventListener('click', () => switchDataset('network'));
-        } else if (text === 'Sales Data') {
-          button.addEventListener('click', () => switchDataset('sales'));
-        } else if (text === 'Start Live') {
-          button.addEventListener('click', () => startRealtime());
-        } else if (text === 'Stop Live') {
-          button.addEventListener('click', () => stopRealtime());
-        } else if (text === 'Spike Values') {
-          button.addEventListener('click', () => randomizeData());
-        }
-      });
-      
       // Update button states based on current dataset
       const updateButtonStates = () => {
-        const buttons = elementArg.querySelectorAll('dees-button');
-        buttons.forEach(button => {
-          const text = button.textContent?.trim();
+        const allButtons = elementArg.querySelectorAll('dees-button');
+        allButtons.forEach((button: any) => {
+          const text = button.text?.trim();
           if (text === 'System Usage') {
             button.type = currentDataset === 'system' ? 'highlighted' : 'normal';
           } else if (text === 'Network Traffic') {
@@ -343,41 +324,38 @@ export const demoFunc = () => {
           }
         });
       };
-      
+
+      // Wire up button click handlers
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button: any) => {
+        const text = button.text?.trim();
+        if (text === 'System Usage') {
+          button.addEventListener('click', () => { switchDataset('system'); updateButtonStates(); });
+        } else if (text === 'Network Traffic') {
+          button.addEventListener('click', () => { switchDataset('network'); updateButtonStates(); });
+        } else if (text === 'Sales Data') {
+          button.addEventListener('click', () => { switchDataset('sales'); updateButtonStates(); });
+        } else if (text === 'Start Live') {
+          button.addEventListener('click', () => startRealtime());
+        } else if (text === 'Stop Live') {
+          button.addEventListener('click', () => stopRealtime());
+        } else if (text === 'Spike Values') {
+          button.addEventListener('click', () => randomizeData());
+        }
+      });
+
       // Configure main chart with rolling window
       chartElement.rollingWindow = TIME_WINDOW;
       chartElement.realtimeMode = false; // Will be enabled when starting live updates
       chartElement.yAxisScaling = 'percentage'; // Initial system dataset uses percentage
       chartElement.yAxisMax = 100;
       chartElement.autoScrollInterval = 1000; // Auto-scroll every second
-      
+
       // Set initial time window
       setTimeout(() => {
         chartElement.updateTimeWindow();
       }, 100);
       
-      // Update button states when dataset changes
-      const originalSwitchDataset = switchDataset;
-      const switchDatasetWithButtonUpdate = (name: string) => {
-        originalSwitchDataset(name);
-        updateButtonStates();
-      };
-      
-      // Replace switchDataset with the one that updates buttons
-      buttons.forEach(button => {
-        const text = button.textContent?.trim();
-        if (text === 'System Usage') {
-          button.removeEventListener('click', () => switchDataset('system'));
-          button.addEventListener('click', () => switchDatasetWithButtonUpdate('system'));
-        } else if (text === 'Network Traffic') {
-          button.removeEventListener('click', () => switchDataset('network'));
-          button.addEventListener('click', () => switchDatasetWithButtonUpdate('network'));
-        } else if (text === 'Sales Data') {
-          button.removeEventListener('click', () => switchDataset('sales'));
-          button.addEventListener('click', () => switchDatasetWithButtonUpdate('sales'));
-        }
-      });
-      
       // Initialize connections chart with data
       if (connectionsChartElement) {
         const initialConnectionsData = generateInitialData(previousValues.connections, 30, UPDATE_INTERVAL);

ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts

@@ -174,7 +174,7 @@ export const demoFunc = () => {
       // Wire up button click handlers
       const buttons = elementArg.querySelectorAll('dees-button');
       buttons.forEach(button => {
-        const text = button.textContent?.trim();
+        const text = (button as any).text?.trim();
         switch (text) {
           case 'Add Structured Log':
             button.addEventListener('click', () => generateRandomLog());

ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.demo.ts

@@ -103,7 +103,7 @@ export const demoFunc = () => {
 
       const buttons = elementArg.querySelectorAll('dees-button');
       buttons.forEach(button => {
-        const text = button.textContent?.trim();
+        const text = (button as any).text?.trim();
 
         switch (text) {
           case 'Toggle Animation':
@@ -147,7 +147,7 @@ export const demoFunc = () => {
           case 'Toggle Edit Mode':
             button.addEventListener('click', () => {
               grid.editable = !grid.editable;
-              button.textContent = grid.editable ? 'Lock Grid' : 'Unlock Grid';
+              (button as any).text = grid.editable ? 'Lock Grid' : 'Unlock Grid';
             });
             break;
           case 'Reset Layout':

ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts

@@ -1,5 +1,5 @@
 import { html, DeesElement, customElement, css, cssManager } from '@design.estate/dees-element';
-import type { IView } from './dees-simple-appdash.js';
+import type { IView, IGlobalMessage } from './dees-simple-appdash.js';
 import '../../00group-form/dees-form/dees-form.js';
 import '../../00group-input/dees-input-text/dees-input-text.js';
 import '../../00group-input/dees-input-checkbox/dees-input-checkbox.js';
@@ -263,6 +263,44 @@ export const demoFunc = () => html`
     <dees-simple-appdash
       name="My Application"
       terminalSetupCommand="echo 'Welcome to the terminal!'"
+      .globalMessages=${[
+        {
+          id: 'update',
+          type: 'info',
+          message: 'A new version (v3.50.0) is available with performance improvements and bug fixes.',
+          dismissible: true,
+          actions: [
+            {
+              name: 'Update Now',
+              iconName: 'lucide:download',
+              action: () => alert('Updating...'),
+            },
+            {
+              name: 'Release Notes',
+              action: () => alert('Opening release notes...'),
+            },
+          ],
+        },
+        {
+          id: 'maintenance',
+          type: 'warning',
+          message: 'Scheduled maintenance window: April 5, 2026 02:00–06:00 UTC. Some services may be temporarily unavailable.',
+          dismissible: true,
+        },
+        {
+          id: 'critical',
+          type: 'error',
+          message: 'Your SSL certificate expires in 3 days. Renew now to avoid service disruption.',
+          dismissible: false,
+          actions: [
+            {
+              name: 'Renew Certificate',
+              iconName: 'lucide:shieldCheck',
+              action: () => alert('Renewing certificate...'),
+            },
+          ],
+        },
+      ] as IGlobalMessage[]}
       .viewTabs=${[
         {
           name: 'Dashboard',

ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts

@@ -29,6 +29,23 @@ export interface IView {
   element: DeesElement['constructor']['prototype'];
 }
 
+export type TGlobalMessageType = 'info' | 'success' | 'warning' | 'error';
+
+export interface IGlobalMessageAction {
+  name: string;
+  iconName?: string;
+  action: () => void | Promise<void>;
+}
+
+export interface IGlobalMessage {
+  id: string;
+  type: TGlobalMessageType;
+  message: string;
+  dismissible?: boolean;
+  icon?: string;
+  actions?: IGlobalMessageAction[];
+}
+
 @customElement('dees-simple-appdash')
 export class DeesSimpleAppDash extends DeesElement {
   // STATIC
@@ -45,9 +62,15 @@ export class DeesSimpleAppDash extends DeesElement {
   @property({ type: String })
   accessor terminalSetupCommand: string = `echo "Terminal ready"`;
 
+  @property({ type: Array })
+  accessor globalMessages: IGlobalMessage[] = [];
+
   @state()
   accessor selectedView!: IView;
 
+  @state()
+  accessor _activeMessages: IGlobalMessage[] = [];
+
 
   public static styles = [
     themeDefaultStyles,
@@ -327,6 +350,170 @@ export class DeesSimpleAppDash extends DeesElement {
       .control.status-terminal dees-icon {
         color: hsl(45 90% 55%);
       }
+
+      /* Global Message Banners */
+      .messageBannerArea {
+        position: absolute;
+        top: 0;
+        left: 240px;
+        right: 0;
+        z-index: 3;
+        display: flex;
+        flex-direction: column;
+        transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .messageBanner {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px 16px;
+        font-size: 13px;
+        font-family: 'Geist Sans', sans-serif;
+        font-weight: 500;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
+        animation: bannerSlideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+      }
+
+      .messageBanner.dismissing {
+        animation: bannerSlideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+      }
+
+      @keyframes bannerSlideDown {
+        from {
+          opacity: 0;
+          transform: translateY(-100%);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes bannerSlideUp {
+        from {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        to {
+          opacity: 0;
+          transform: translateY(-100%);
+        }
+      }
+
+      .messageBanner dees-icon {
+        font-size: 16px;
+        flex-shrink: 0;
+      }
+
+      .messageBanner-text {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .messageBanner-actions {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex-shrink: 0;
+      }
+
+      .messageBanner-action {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 12px;
+        border-radius: 4px;
+        cursor: default;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.01em;
+        transition: all 0.15s ease;
+        white-space: nowrap;
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 100% / 0.1)')};
+        color: inherit;
+      }
+
+      .messageBanner-action:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.15)', 'hsl(0 0% 100% / 0.18)')};
+      }
+
+      .messageBanner-action:active {
+        transform: scale(0.97);
+      }
+
+      .messageBanner-action dees-icon {
+        font-size: 13px;
+      }
+
+      .messageBanner-dismiss {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        cursor: default;
+        opacity: 0.5;
+        transition: all 0.15s ease;
+      }
+
+      .messageBanner-dismiss:hover {
+        opacity: 1;
+        background: hsl(0 0% 0% / 0.1);
+      }
+
+      /* Message type: info */
+      .messageBanner-info {
+        background: ${cssManager.bdTheme('hsl(210 100% 97%)', 'hsl(210 50% 10%)')};
+        color: ${cssManager.bdTheme('hsl(210 70% 30%)', 'hsl(210 70% 80%)')};
+        border-left: 3px solid #0084ff;
+      }
+      .messageBanner-info dees-icon {
+        color: #0084ff;
+      }
+
+      /* Message type: success */
+      .messageBanner-success {
+        background: ${cssManager.bdTheme('hsl(142 70% 97%)', 'hsl(142 30% 10%)')};
+        color: ${cssManager.bdTheme('hsl(142 50% 25%)', 'hsl(142 50% 80%)')};
+        border-left: 3px solid #22c55e;
+      }
+      .messageBanner-success dees-icon {
+        color: #22c55e;
+      }
+
+      /* Message type: warning */
+      .messageBanner-warning {
+        background: ${cssManager.bdTheme('hsl(38 90% 97%)', 'hsl(38 40% 10%)')};
+        color: ${cssManager.bdTheme('hsl(38 60% 25%)', 'hsl(38 60% 80%)')};
+        border-left: 3px solid #f59e0b;
+      }
+      .messageBanner-warning dees-icon {
+        color: #f59e0b;
+      }
+
+      /* Message type: error */
+      .messageBanner-error {
+        background: ${cssManager.bdTheme('hsl(0 70% 97%)', 'hsl(0 40% 10%)')};
+        color: ${cssManager.bdTheme('hsl(0 60% 30%)', 'hsl(0 60% 80%)')};
+        border-left: 3px solid #ef4444;
+      }
+      .messageBanner-error dees-icon {
+        color: #ef4444;
+      }
+
+      .messageBanner-dismiss:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 100% / 0.1)')};
+      }
+
+      .appcontent {
+        top: var(--banner-area-height, 0px);
+        height: calc(100% - 24px - var(--banner-area-height, 0px));
+      }
     `,
   ];
 
@@ -369,6 +556,34 @@ export class DeesSimpleAppDash extends DeesElement {
             </div>
           </div>
         </div>
+        ${this._activeMessages.length > 0 ? html`
+        <div class="messageBannerArea">
+          ${this._activeMessages.map(msg => html`
+            <div
+              class="messageBanner messageBanner-${msg.type}"
+              data-message-id="${msg.id}"
+            >
+              <dees-icon .icon="${this.getMessageIcon(msg)}"></dees-icon>
+              <span class="messageBanner-text">${msg.message}</span>
+              ${msg.actions?.length ? html`
+                <div class="messageBanner-actions">
+                  ${msg.actions.map(a => html`
+                    <div class="messageBanner-action" @click=${() => a.action()}>
+                      ${a.iconName ? html`<dees-icon .icon="${a.iconName.includes(':') ? a.iconName : `lucide:${a.iconName}`}"></dees-icon>` : ''}
+                      <span>${a.name}</span>
+                    </div>
+                  `)}
+                </div>
+              ` : ''}
+              ${msg.dismissible !== false ? html`
+                <div class="messageBanner-dismiss" @click=${() => this.removeMessage(msg.id)}>
+                  <dees-icon .icon="${'lucide:x'}"></dees-icon>
+                </div>
+              ` : ''}
+            </div>
+          `)}
+        </div>
+      ` : ''}
         <div class="appcontent">
           <!-- Content goes here -->
         </div>
@@ -394,6 +609,86 @@ export class DeesSimpleAppDash extends DeesElement {
       await this.loadView(viewToLoad);
     }
   }
+
+  public willUpdate(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('globalMessages')) {
+      // Sync globalMessages property into _activeMessages
+      // Keep any messages added via addMessage() that aren't in globalMessages
+      const propertyIds = new Set(this.globalMessages.map(m => m.id));
+      const existingIds = new Set(this._activeMessages.map(m => m.id));
+
+      // Add new messages from property that aren't already active
+      const newMessages = this.globalMessages.filter(m => !existingIds.has(m.id));
+
+      // Keep messages added via API (those not in globalMessages are kept as-is)
+      // Remove messages that were in the previous globalMessages but are no longer
+      const previousGlobalMessages = (changedProperties.get('globalMessages') as IGlobalMessage[]) || [];
+      const previousIds = new Set(previousGlobalMessages.map(m => m.id));
+      const removedIds = new Set([...previousIds].filter(id => !propertyIds.has(id)));
+
+      this._activeMessages = [
+        ...this._activeMessages.filter(m => !removedIds.has(m.id)),
+        ...newMessages,
+      ];
+    }
+  }
+
+  public updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+    this.updateBannerOffset();
+  }
+
+  private updateBannerOffset() {
+    requestAnimationFrame(() => {
+      const bannerArea = this.shadowRoot?.querySelector('.messageBannerArea') as HTMLElement;
+      const maincontainer = this.shadowRoot?.querySelector('.maincontainer') as HTMLElement;
+      const height = bannerArea ? bannerArea.offsetHeight : 0;
+      maincontainer?.style.setProperty('--banner-area-height', `${height}px`);
+    });
+  }
+
+  private getMessageIcon(msg: IGlobalMessage): string {
+    if (msg.icon) return msg.icon;
+    const defaults: Record<TGlobalMessageType, string> = {
+      info: 'lucide:info',
+      success: 'lucide:circleCheck',
+      warning: 'lucide:triangleAlert',
+      error: 'lucide:circleX',
+    };
+    return defaults[msg.type];
+  }
+
+  public addMessage(message: Omit<IGlobalMessage, 'id'> & { id?: string }): string {
+    const id = message.id || `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const fullMessage: IGlobalMessage = {
+      dismissible: true,
+      ...message,
+      id,
+    };
+    this._activeMessages = [...this._activeMessages, fullMessage];
+    return id;
+  }
+
+  public removeMessage(id: string): void {
+    const bannerEl = this.shadowRoot?.querySelector(`[data-message-id="${id}"]`) as HTMLElement;
+    if (bannerEl) {
+      bannerEl.classList.add('dismissing');
+      bannerEl.addEventListener('animationend', () => {
+        this._activeMessages = this._activeMessages.filter(m => m.id !== id);
+        this.dispatchEvent(new CustomEvent('message-dismiss', {
+          detail: { id },
+          bubbles: true,
+          composed: true,
+        }));
+      }, { once: true });
+    } else {
+      this._activeMessages = this._activeMessages.filter(m => m.id !== id);
+    }
+  }
+
+  public clearMessages(): void {
+    this._activeMessages = [];
+  }
   
   public currentTerminal: DeesWorkspaceTerminal | null = null;
   public async launchTerminal() {
@@ -412,7 +707,7 @@ export class DeesSimpleAppDash extends DeesElement {
     maincontainer.appendChild(terminal);
     terminal.style.position = 'absolute';
     terminal.style.zIndex = '10';
-    terminal.style.top = '0px';
+    terminal.style.top = 'var(--banner-area-height, 0px)';
     terminal.style.left = '240px';
     terminal.style.right = '0px';
     terminal.style.bottom = '24px';
@@ -420,8 +715,6 @@ export class DeesSimpleAppDash extends DeesElement {
     terminal.style.transform = 'translateY(8px) scale(0.99)';
     terminal.style.transition = 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)';
     terminal.style.boxShadow = '0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)';
-    terminal.style.maxWidth = `calc(${maincontainer.clientWidth}px -240px)`;
-    terminal.style.maxHeight = `calc(${maincontainer.clientHeight}px - 24px)`;
     
     // Add close button to terminal
     terminal.addEventListener('close', () => this.closeTerminal());

ts_web/elements/00group-workspace/dees-workspace-terminal/dees-workspace-terminal.ts

@@ -106,11 +106,11 @@ export class DeesWorkspaceTerminal extends DeesElement {
     css`
       :host {
         background: ${cssManager.bdTheme('#ffffff', '#000000')};
-        position: absolute;
-        height: 100%;
-        width: 100%;
         display: flex;
         flex-direction: row;
+        box-sizing: border-box;
+        height: 100%;
+        width: 100%;
       }
 
       * {
@@ -596,7 +596,7 @@ export class DeesWorkspaceTerminal extends DeesElement {
     tab.terminal.focus();
   }
 
-  private handleResize(): void {
+  public handleResize(): void {
     if (this.activeTabId) {
       const tab = this.tabManager.getTab(this.activeTabId);
       if (tab) {