v3.51.0

changelog.md

@@ -1,5 +1,26 @@
 # Changelog
 
+## 2026-04-03 - 3.51.0 - feat(chart-area)
+replace ApexCharts with Lightweight Charts for area chart rendering
+
+- switch chart dependency and CDN loader from apexcharts to lightweight-charts
+- update dees-chart-area styling and tooltip support for the new chart engine
+- adjust appdash terminal overlay sizing with automatic height
+
+## 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
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.50.0",
+  "version": "3.51.0",
   "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",
@@ -34,7 +34,7 @@
     "@tiptap/extension-underline": "^2.23.0",
     "@tiptap/starter-kit": "^2.23.0",
     "@tsclass/tsclass": "^9.5.0",
-    "apexcharts": "^5.10.4",
+    "lightweight-charts": "^5.1.0",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
     "lucide": "^0.577.0",

pnpm-lock.yaml

@@ -62,15 +62,15 @@ importers:
       '@tsclass/tsclass':
         specifier: ^9.5.0
         version: 9.5.0
-      apexcharts:
-        specifier: ^5.10.4
-        version: 5.10.4
       highlight.js:
         specifier: 11.11.1
         version: 11.11.1
       ibantools:
         specifier: ^4.5.1
         version: 4.5.1
+      lightweight-charts:
+        specifier: ^5.1.0
+        version: 5.1.0
       lucide:
         specifier: ^0.577.0
         version: 0.577.0
@@ -2648,6 +2648,9 @@ packages:
     resolution: {integrity: sha512-CGnyrvbhPlWYMngksqrSSUT1BAVP49dZocrHuK0SvtR0D5TMs5wP0o3j7jexDJW01KSadjBp1M/71o/KR3nD1w==}
     engines: {node: '>=18'}
 
+  fancy-canvas@2.1.0:
+    resolution: {integrity: sha512-nifxXJ95JNLFR2NgRV4/MxVP45G9909wJTEKz5fg/TZS20JJZA6hfgRVh/bC9bwl2zBtBNcYPjiBE4njQHVBwQ==}
+
   fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
 
@@ -2996,6 +2999,9 @@ packages:
     resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
     engines: {node: '>=0.10.0'}
 
+  lightweight-charts@5.1.0:
+    resolution: {integrity: sha512-jEAYR4ODYeyNZcWUigsoLTl52rbPmgXnvd5FLIv/ZoA/2sSDw63YKnef8n4yhzum7W926yHeFwlm7ididKb7YQ==}
+
   lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
@@ -7810,6 +7816,8 @@ snapshots:
 
   fake-indexeddb@6.2.5: {}
 
+  fancy-canvas@2.1.0: {}
+
   fast-deep-equal@3.1.3: {}
 
   fast-fifo@1.3.2: {}
@@ -8229,6 +8237,10 @@ snapshots:
 
   kind-of@6.0.3: {}
 
+  lightweight-charts@5.1.0:
+    dependencies:
+      fancy-canvas: 2.1.0
+
   lines-and-columns@1.2.4: {}
 
   linkify-it@5.0.0:

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '3.50.0',
+  version: '3.51.0',
   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/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-area/styles.ts

@@ -6,7 +6,6 @@ export const chartAreaStyles = [
       :host {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
         color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
-        font-weight: 400;
         font-size: 14px;
       }
       .mainbox {
@@ -18,7 +17,6 @@ export const chartAreaStyles = [
         border-radius: 8px;
         overflow: hidden;
       }
-
       .chartTitle {
         position: absolute;
         top: 0;
@@ -34,27 +32,22 @@ export const chartAreaStyles = [
       }
       .chartContainer {
         position: absolute;
-        top: 0px;
-        left: 0px;
-        bottom: 0px;
-        right: 0px;
-        padding: 44px 16px 16px 0px;
-        overflow: hidden;
-        background: transparent; /* Ensure container doesn't override chart background */
+        top: 44px;
+        left: 0;
+        bottom: 0;
+        right: 0;
       }
-      
-      /* ApexCharts theme overrides */
-      .apexcharts-canvas {
-        background: transparent !important;
-      }
-      
-      .apexcharts-inner {
-        background: transparent !important;
-      }
-      
-      .apexcharts-graphical {
-        background: transparent !important;
+      .lw-tooltip {
+        position: absolute;
+        z-index: 100;
+        pointer-events: none;
+        padding: 12px;
+        border-radius: 6px;
+        border: 1px solid;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        font-size: 12px;
+        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+        min-width: 140px;
       }
     `,
   ];
-

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.ts

@@ -644,11 +644,6 @@ export class DeesSimpleAppDash extends DeesElement {
       const maincontainer = this.shadowRoot?.querySelector('.maincontainer') as HTMLElement;
       const height = bannerArea ? bannerArea.offsetHeight : 0;
       maincontainer?.style.setProperty('--banner-area-height', `${height}px`);
-
-      // Keep terminal in sync with banner height
-      if (this.currentTerminal) {
-        this.currentTerminal.style.top = `${height}px`;
-      }
     });
   }
 
@@ -710,20 +705,17 @@ export class DeesSimpleAppDash extends DeesElement {
     terminal.setupCommand = this.terminalSetupCommand;
     this.currentTerminal = terminal;
     maincontainer.appendChild(terminal);
-    const bannerArea = this.shadowRoot?.querySelector('.messageBannerArea') as HTMLElement;
-    const bannerHeight = bannerArea ? bannerArea.offsetHeight : 0;
     terminal.style.position = 'absolute';
     terminal.style.zIndex = '10';
-    terminal.style.top = `${bannerHeight}px`;
+    terminal.style.top = 'var(--banner-area-height, 0px)';
     terminal.style.left = '240px';
     terminal.style.right = '0px';
+    terminal.style.height = 'auto';
     terminal.style.bottom = '24px';
     terminal.style.opacity = '0';
     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 - ${bannerHeight}px)`;
     
     // 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) {

ts_web/services/DeesServiceLibLoader.ts

@@ -4,7 +4,15 @@ import { CDN_BASE, CDN_VERSIONS } from './versions.js';
 import type { Terminal, ITerminalOptions } from 'xterm';
 import type { FitAddon } from 'xterm-addon-fit';
 import type { HLJSApi } from 'highlight.js';
-import type ApexChartsType from 'apexcharts';
+import type {
+  createChart as createChartType,
+  IChartApi,
+  ISeriesApi,
+  UTCTimestamp,
+  MouseEventParams,
+  DeepPartial,
+  TimeChartOptions,
+} from 'lightweight-charts';
 import type { Editor, EditorOptions } from '@tiptap/core';
 import type { StarterKitOptions } from '@tiptap/starter-kit';
 import type { UnderlineOptions } from '@tiptap/extension-underline';
@@ -43,6 +51,29 @@ export interface IXtermSearchAddon {
   findPrevious(term: string, searchOptions?: { regex?: boolean; wholeWord?: boolean; caseSensitive?: boolean; incremental?: boolean }): boolean;
 }
 
+/**
+ * Bundle type for TradingView Lightweight Charts
+ */
+export interface ILightweightChartsBundle {
+  createChart: typeof createChartType;
+  AreaSeries: any;
+  LineSeries: any;
+  ColorType: {
+    Solid: string;
+    VerticalGradient: string;
+  };
+  LineType: {
+    Simple: number;
+    WithSteps: number;
+    Curved: number;
+  };
+  CrosshairMode: {
+    Normal: number;
+    Magnet: number;
+    Hidden: number;
+  };
+}
+
 /**
  * Bundle type for Tiptap editor and extensions
  */
@@ -76,7 +107,7 @@ export class DeesServiceLibLoader {
   private xtermFitAddonLib: IXtermFitAddonBundle | null = null;
   private xtermSearchAddonLib: IXtermSearchAddonBundle | null = null;
   private highlightJsLib: HLJSApi | null = null;
-  private apexChartsLib: typeof ApexChartsType | null = null;
+  private lightweightChartsLib: ILightweightChartsBundle | null = null;
   private tiptapLib: ITiptapBundle | null = null;
 
   // Loading promises to prevent duplicate concurrent loads
@@ -84,7 +115,7 @@ export class DeesServiceLibLoader {
   private xtermFitAddonLoadingPromise: Promise<IXtermFitAddonBundle> | null = null;
   private xtermSearchAddonLoadingPromise: Promise<IXtermSearchAddonBundle> | null = null;
   private highlightJsLoadingPromise: Promise<HLJSApi> | null = null;
-  private apexChartsLoadingPromise: Promise<typeof ApexChartsType> | null = null;
+  private lightweightChartsLoadingPromise: Promise<ILightweightChartsBundle> | null = null;
   private tiptapLoadingPromise: Promise<ITiptapBundle> | null = null;
 
   private constructor() {}
@@ -235,27 +266,34 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
   }
 
   /**
-   * Load ApexCharts charting library from CDN
-   * @returns Promise resolving to ApexCharts constructor
+   * Load TradingView Lightweight Charts from CDN
+   * @returns Promise resolving to Lightweight Charts bundle
    */
-  public async loadApexCharts(): Promise<typeof ApexChartsType> {
-    if (this.apexChartsLib) {
-      return this.apexChartsLib;
+  public async loadLightweightCharts(): Promise<ILightweightChartsBundle> {
+    if (this.lightweightChartsLib) {
+      return this.lightweightChartsLib;
     }
 
-    if (this.apexChartsLoadingPromise) {
-      return this.apexChartsLoadingPromise;
+    if (this.lightweightChartsLoadingPromise) {
+      return this.lightweightChartsLoadingPromise;
     }
 
-    this.apexChartsLoadingPromise = (async () => {
-      const url = `${CDN_BASE}/apexcharts@${CDN_VERSIONS.apexcharts}/+esm`;
+    this.lightweightChartsLoadingPromise = (async () => {
+      const url = `${CDN_BASE}/lightweight-charts@${CDN_VERSIONS.lightweightCharts}/+esm`;
       const module = await import(/* @vite-ignore */ url);
 
-      this.apexChartsLib = module.default;
-      return this.apexChartsLib!;
+      this.lightweightChartsLib = {
+        createChart: module.createChart,
+        AreaSeries: module.AreaSeries,
+        LineSeries: module.LineSeries,
+        ColorType: module.ColorType,
+        LineType: module.LineType,
+        CrosshairMode: module.CrosshairMode,
+      };
+      return this.lightweightChartsLib;
     })();
 
-    return this.apexChartsLoadingPromise;
+    return this.lightweightChartsLoadingPromise;
   }
 
   /**
@@ -316,7 +354,7 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
       this.loadXtermFitAddon(),
       this.loadXtermSearchAddon(),
       this.loadHighlightJs(),
-      this.loadApexCharts(),
+      this.loadLightweightCharts(),
       this.loadTiptap(),
     ]);
   }
@@ -324,7 +362,7 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
   /**
    * Check if a specific library is already loaded
    */
-  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'xtermSearchAddon' | 'highlightJs' | 'apexCharts' | 'tiptap'): boolean {
+  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'xtermSearchAddon' | 'highlightJs' | 'lightweightCharts' | 'tiptap'): boolean {
     switch (library) {
       case 'xterm':
         return this.xtermLib !== null;
@@ -334,8 +372,8 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
         return this.xtermSearchAddonLib !== null;
       case 'highlightJs':
         return this.highlightJsLib !== null;
-      case 'apexCharts':
-        return this.apexChartsLib !== null;
+      case 'lightweightCharts':
+        return this.lightweightChartsLib !== null;
       case 'tiptap':
         return this.tiptapLib !== null;
       default:

ts_web/services/index.ts

@@ -1,3 +1,3 @@
 export { DeesServiceLibLoader } from './DeesServiceLibLoader.js';
-export type { IXtermBundle, IXtermFitAddonBundle, IXtermSearchAddonBundle, IXtermSearchAddon, ITiptapBundle } from './DeesServiceLibLoader.js';
+export type { IXtermBundle, IXtermFitAddonBundle, IXtermSearchAddonBundle, IXtermSearchAddon, ITiptapBundle, ILightweightChartsBundle } from './DeesServiceLibLoader.js';
 export { CDN_BASE, CDN_VERSIONS } from './versions.js';

ts_web/services/versions.ts

@@ -7,7 +7,7 @@ export const CDN_VERSIONS = {
   xtermAddonFit: '0.8.0',
   xtermAddonSearch: '0.13.0',
   highlightJs: '11.11.1',
-  apexcharts: '5.10.4',
+  lightweightCharts: '5.1.0',
   tiptap: '2.27.2',
   fontawesome: '7.2.0',
 } as const;