feat(dees-chart-area): add full page toggle control for chart area

changelog.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 2026-04-03 - 3.52.0 - feat(dees-chart-area)
+add full page toggle control for chart area
+
+- adds a header action to expand and collapse the chart area into a full page view
+- updates chart area styling for the custom header, label, and expand button
+- resizes the chart after toggling full page mode by fitting the visible time scale
+
 ## 2026-04-03 - 3.51.2 - fix(ui)
 standardize tile-based layouts across input, product card, and terminal preview components
 

ts_web/00_commitinfo_data.ts

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

@@ -580,6 +580,29 @@ export class DeesChartArea extends DeesElement {
     await this.resizeChart();
   }
 
+  public toggleFullPage() {
+    this.isFullPage = !this.isFullPage;
+    if (this.isFullPage) {
+      this.style.position = 'fixed';
+      this.style.inset = '0';
+      this.style.zIndex = '10000';
+      this.style.height = '100vh';
+      this.style.padding = '0';
+      document.body.style.overflow = 'hidden';
+    } else {
+      this.style.position = '';
+      this.style.inset = '';
+      this.style.zIndex = '';
+      this.style.height = '';
+      this.style.padding = '';
+      document.body.style.overflow = '';
+    }
+    // Give LC a tick to resize
+    requestAnimationFrame(() => {
+      this.chart?.timeScale().fitContent();
+    });
+  }
+
   private startAutoScroll() {
     if (this.autoScrollTimer) return;
     this.autoScrollTimer = window.setInterval(() => {

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

@@ -13,6 +13,37 @@ export const chartAreaStyles = [
       dees-tile {
         height: 100%;
       }
+      .chartHeader {
+        display: flex;
+        align-items: center;
+        height: 32px;
+        padding: 0 8px 0 16px;
+      }
+      .chartLabel {
+        flex: 1;
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+      }
+      .expandBtn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border: none;
+        border-radius: 4px;
+        background: transparent;
+        cursor: pointer;
+        color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
+        transition: all 0.15s ease;
+        padding: 0;
+      }
+      .expandBtn:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 12%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+      }
       .chartContainer {
         position: absolute;
         inset: 0 0 4px 0;

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

@@ -1,9 +1,16 @@
 import { html, type TemplateResult } from '@design.estate/dees-element';
 import type { DeesChartArea } from './component.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 
 export const renderChartArea = (component: DeesChartArea): TemplateResult => {
       return html`
-        <dees-tile .heading=${component.label}>
+        <dees-tile>
+          <div slot="header" class="chartHeader">
+            <span class="chartLabel">${component.label}</span>
+            <button class="expandBtn" @click=${() => component.toggleFullPage()} title="${component.isFullPage ? 'Exit full page' : 'Full page'}">
+              <dees-icon .icon=${component.isFullPage ? 'lucide:Minimize2' : 'lucide:Maximize2'} .iconSize=${14}></dees-icon>
+            </button>
+          </div>
           <div class="chartContainer"></div>
           ${component.seriesStats.length > 0 ? html`
             <div slot="footer" class="statsBar">