v3.52.1

changelog.md

@@ -1,5 +1,59 @@
 # Changelog
 
+## 2026-04-03 - 3.52.1 - fix(dees-modal)
+refine modal styling, spacing, and animations for a cleaner overlay presentation
+
+- Adjust modal entrance and exit transitions with updated transform, opacity, and timing values
+- Refresh heading and action button styling with tighter spacing, smaller controls, and improved theme-aware colors
+- Update tile shadow, margins, and content scrollbar styling to improve modal visual polish and readability
+
+## 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
+
+- Replace custom card containers with dees-tile in code input, richtext editor, shopping product card, and terminal preview components
+- Move toolbars and footers into dees-tile header/footer slots for more consistent structure and spacing
+- Update hover, focus, and selected state styling to target dees-tile parts while preserving existing component behavior
+
+## 2026-04-03 - 3.51.1 - fix(repo)
+no changes to commit
+
+
+## 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
+
+- 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.52.1",
   "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.49.2',
+  version: '3.52.1',
   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');
+        const allButtons = elementArg.querySelectorAll('dees-button');
-        buttons.forEach(button => {
+        allButtons.forEach((button: any) => {
-          const text = button.textContent?.trim();
+          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

@@ -4,57 +4,98 @@ export const chartAreaStyles = [
     cssManager.defaultStyles,
     css`
       :host {
+        display: block;
+        height: 400px;
         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 {
+      dees-tile {
-        position: relative;
+        height: 100%;
-        width: 100%;
-        height: 400px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 8px;
-        overflow: hidden;
       }
-
+      .chartHeader {
-      .chartTitle {
+        display: flex;
-        position: absolute;
+        align-items: center;
-        top: 0;
+        height: 32px;
-        left: 0;
+        padding: 0 8px 0 16px;
-        width: 100%;
+      }
-        text-align: left;
+      .chartLabel {
-        padding: 16px 24px;
+        flex: 1;
-        z-index: 10;
         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;
-        top: 0px;
+        inset: 0 0 4px 0;
-        left: 0px;
-        bottom: 0px;
-        right: 0px;
-        padding: 44px 16px 16px 0px;
-        overflow: hidden;
-        background: transparent; /* Ensure container doesn't override chart background */
       }
-      
+      .statsBar {
-      /* ApexCharts theme overrides */
+        height: 32px;
-      .apexcharts-canvas {
+        padding: 0 16px;
-        background: transparent !important;
+        display: flex;
+        align-items: center;
+        gap: 24px;
+        width: 100%;
+        box-sizing: border-box;
       }
-      
+      .statsSeries {
-      .apexcharts-inner {
+        display: flex;
-        background: transparent !important;
+        align-items: center;
+        gap: 8px;
       }
-      
+      .statsSeries + .statsSeries {
-      .apexcharts-graphical {
+        padding-left: 24px;
-        background: transparent !important;
+        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+      .statsColor {
+        width: 8px;
+        height: 8px;
+        border-radius: 2px;
+        flex-shrink: 0;
+      }
+      .statsName {
+        font-weight: 500;
+        font-size: 11px;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+        margin-right: 4px;
+      }
+      .statsItem {
+        font-size: 11px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+      }
+      .statsItem strong {
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+      }
+      .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-area/template.ts

@@ -1,12 +1,31 @@
 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`
-        <div class="mainbox">
+        <dees-tile>
-          <div class="chartTitle">${component.label}</div>
+          <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>
-        </div>
+          ${component.seriesStats.length > 0 ? html`
+            <div slot="footer" class="statsBar">
+              ${component.seriesStats.map(s => html`
+                <div class="statsSeries">
+                  <span class="statsColor" style="background:${s.color}"></span>
+                  <span class="statsName">${s.name}</span>
+                  <span class="statsItem">latest <strong>${component.yAxisFormatter(s.latest)}</strong></span>
+                  <span class="statsItem">min <strong>${component.yAxisFormatter(s.min)}</strong></span>
+                  <span class="statsItem">max <strong>${component.yAxisFormatter(s.max)}</strong></span>
+                  <span class="statsItem">avg <strong>${component.yAxisFormatter(s.avg)}</strong></span>
+                </div>
+              `)}
+            </div>
+          ` : ''}
+        </dees-tile>
       `;
-  
 };

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-chart/dees-chart-log/dees-chart-log.ts

@@ -13,6 +13,7 @@ import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-chart-log.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
 import { DeesServiceLibLoader, type IXtermSearchAddon, CDN_BASE, CDN_VERSIONS } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 // Type imports (no runtime overhead)
 import type { Terminal } from 'xterm';
@@ -103,30 +104,20 @@ export class DeesChartLog extends DeesElement {
     css`
       :host {
         display: block;
+        height: 400px;
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
         color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
       }
 
-      .mainbox {
+      dees-tile {
-        position: relative;
+        height: 100%;
-        width: 100%;
-        height: 400px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 8px;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
       }
 
       .header {
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
         padding: 8px 12px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         display: flex;
         align-items: center;
         gap: 12px;
-        flex-shrink: 0;
         flex-wrap: wrap;
       }
 
@@ -241,10 +232,10 @@ export class DeesChartLog extends DeesElement {
       }
 
       .terminal-container {
-        flex: 1;
+        position: absolute;
+        inset: 0;
         overflow: hidden;
         padding: 8px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
       }
 
       .terminal-container .xterm {
@@ -262,14 +253,15 @@ export class DeesChartLog extends DeesElement {
       }
 
       .metrics-bar {
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+        height: 32px;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        padding: 0 12px;
-        padding: 6px 12px;
         display: flex;
+        align-items: center;
         gap: 16px;
         font-size: 11px;
         font-weight: 500;
-        flex-shrink: 0;
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .metric {
@@ -323,8 +315,8 @@ export class DeesChartLog extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="mainbox">
+      <dees-tile .heading=${this.label}>
-        <div class="header">
+        <div slot="header" class="header">
           <div class="title">${this.label}</div>
           <div class="search-box">
             <input
@@ -367,7 +359,7 @@ export class DeesChartLog extends DeesElement {
 
         ${this.showMetrics
           ? html`
-              <div class="metrics-bar">
+              <div slot="footer" class="metrics-bar">
                 <span class="metric error">errors: ${this.metrics.error}</span>
                 <span class="metric warn">warns: ${this.metrics.warn}</span>
                 <span class="metric info">info: ${this.metrics.info}</span>
@@ -377,7 +369,7 @@ export class DeesChartLog extends DeesElement {
               </div>
             `
           : ''}
-      </div>
+      </dees-tile>
     `;
   }
 

ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts

@@ -17,6 +17,7 @@ import * as smartstring from '@push.rocks/smartstring';
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { DeesServiceLibLoader } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -55,32 +56,20 @@ export class DeesDataviewCodebox extends DeesElement {
           height: 100%;
           box-sizing: border-box;
         }
-        .mainbox {
+        dees-tile {
-          position: relative;
-          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
-          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
-          background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-          border-radius: 6px;
-          overflow: hidden;
-          display: flex;
-          flex-direction: column;
           height: 100%;
-          box-sizing: border-box;
+          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         }
 
         .appbar {
-          position: relative;
           color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-          background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
-          border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
           height: 32px;
           display: flex;
           font-size: 13px;
           line-height: 32px;
           justify-content: center;
           align-items: center;
-          flex-shrink: 0;
+          padding: 0 16px;
         }
 
         .appbar .fileName {
@@ -91,18 +80,16 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .bottomBar {
-          position: relative;
           color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-          background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
-          border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
           height: 28px;
-          font-size: 12px;
+          font-size: 11px;
           line-height: 28px;
           display: flex;
           justify-content: flex-end;
-          align-items: stretch;
+          align-items: center;
-          overflow: hidden;
+          padding: 0 16px;
-          flex-shrink: 0;
+          width: 100%;
+          box-sizing: border-box;
         }
 
         .spacesLabel {
@@ -201,8 +188,7 @@ export class DeesDataviewCodebox extends DeesElement {
           color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         }
       </style>
-      <div
+      <dees-tile
-        class="mainbox"
         @contextmenu="${(eventArg: MouseEvent) => {
           DeesContextmenu.openContextMenuWithOptions(eventArg, [
             {
@@ -215,7 +201,7 @@ export class DeesDataviewCodebox extends DeesElement {
           ]);
         }}"
       >
-        <div class="appbar">
+        <div slot="header" class="appbar">
           <div class="fileName">index.ts</div>
         </div>
         <div class="codegrid">
@@ -230,11 +216,11 @@ export class DeesDataviewCodebox extends DeesElement {
           </div>
           <pre><code></code></pre>
         </div>
-        <div class="bottomBar">
+        <div slot="footer" class="bottomBar">
           <div class="spacesLabel">Spaces: 2</div>
           <div class="languageLabel">${this.progLang}</div>
         </div>
-      </div>
+      </dees-tile>
     `;
   }
 

ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts

@@ -17,6 +17,7 @@ import {
 import * as tsclass from '@tsclass/tsclass';
 import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -40,35 +41,28 @@ export class DeesDataviewStatusobject extends DeesElement {
         font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
       }
 
-      .mainbox {
+      dees-tile {
-        border-radius: 8px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        box-shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-        min-height: 48px;
         color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
         cursor: default;
-        overflow: hidden;
       }
 
       .heading {
-        display: grid;
+        display: flex;
         align-items: center;
-        grid-template-columns: 48px auto 100px;
+        gap: 8px;
-        height: 56px;
+        height: 32px;
         padding: 0 16px;
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
 
       h1 {
         display: block;
-        margin: 0px;
+        margin: 0;
-        padding: 0px 12px;
+        padding: 0;
         font-size: 14px;
         font-weight: 500;
         letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        flex: 1;
       }
 
       .statusdot {
@@ -82,13 +76,13 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       .copyMain {
-        font-size: 12px;
+        font-size: 11px;
         font-weight: 500;
         background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
         border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         text-align: center;
-        padding: 6px 12px;
+        padding: 4px 10px;
-        border-radius: 6px;
+        border-radius: 4px;
         color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
         user-select: none;
         cursor: pointer;
@@ -122,63 +116,70 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       .detail {
-        min-height: 60px;
+        display: flex;
         align-items: center;
-        display: grid;
+        gap: 10px;
-        grid-template-columns: 48px auto;
+        height: 36px;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 14.9%)')};
-        transition: background-color 0.15s ease;
         padding: 0 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')};
+        transition: background-color 0.15s ease;
         cursor: context-menu;
       }
 
-      .detail:hover {
+      .detail:last-child {
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+        border-bottom: none;
       }
 
-      .detail:active {
+      .detail:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.04)', 'hsl(217.2 91.2% 59.8% / 0.06)')};
+      }
+
+      .detail .statusdot {
+        margin: 0;
+        flex-shrink: 0;
       }
 
       .detail .detailsText {
-        padding: 12px;
+        display: flex;
-        word-break: break-all;
+        align-items: baseline;
+        flex: 1;
+        min-width: 0;
       }
 
       .detail .detailsText .label {
         font-size: 12px;
         font-weight: 500;
         color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
-        margin-bottom: 2px;
         letter-spacing: -0.01em;
-      }
+        white-space: nowrap;
-
-      .detail .detailsText .value {
-        font-size: 14px;
-        font-family: 'Intel One Mono', 'Geist Mono', monospace;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
-        line-height: 1.5;
-      }
-
-      .bottomBar {
-        position: relative;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        height: 28px;
-        font-size: 12px;
-        line-height: 28px;
-        display: flex;
-        justify-content: flex-end;
-        align-items: stretch;
-        overflow: hidden;
         flex-shrink: 0;
       }
 
-      .bottomBar .statusLabel {
+      .detail .detailsText .value {
-        padding: 0 16px;
+        font-size: 13px;
+        font-family: 'Intel One Mono', 'Geist Mono', monospace;
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        margin-left: auto;
+        text-align: right;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .bottomBar {
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        height: 28px;
+        font-size: 11px;
+        line-height: 28px;
         display: flex;
+        justify-content: flex-end;
         align-items: center;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .bottomBar .statusLabel {
         font-weight: 500;
       }
     `,
@@ -186,15 +187,15 @@ export class DeesDataviewStatusobject extends DeesElement {
 
   render(): TemplateResult {
     return html`
-      <div class="mainbox">
+      <dees-tile>
-        <div class="heading">
+        <div slot="header" class="heading">
           <div class="statusdot ${this.statusObject?.combinedStatus}"></div>
           <h1>${this.statusObject?.name || 'No status object assigned'}</h1>
           <div class="copyMain" @click=${this.handleCopyAsJson}>Copy JSON</div>
         </div>
         ${this.statusObject?.details?.map((detailArg) => {
           return html`
-            <div 
+            <div
               class="detail"
               @contextmenu=${(event: MouseEvent) => {
                 event.preventDefault();
@@ -224,19 +225,19 @@ export class DeesDataviewStatusobject extends DeesElement {
               }}
             >
               <div class="statusdot ${detailArg.status}"></div>
-              <div class="detailsText">
+              <span class="detailsText">
-                <div class="label">${detailArg.name}</div>
+                <span class="label">${detailArg.name}</span>
-                <div class="value">${detailArg.value}</div>
+                <span class="value">${detailArg.value}</span>
-              </div>
+              </span>
             </div>
           `;
         })}
-        <div class="bottomBar">
+        <div slot="footer" class="bottomBar">
           <div class="statusLabel">${this.statusObject?.lastUpdated
             ? `Last updated: ${new Date(this.statusObject.lastUpdated).toLocaleString()}`
             : ''}</div>
         </div>
-      </div>
+      </dees-tile>
     `;
   }
 

ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts

@@ -18,6 +18,7 @@ import '../../00group-utility/dees-icon/dees-icon.js';
 import '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import '../../00group-button/dees-button/dees-button.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -179,22 +180,12 @@ export class DeesStatsGrid extends DeesElement {
         width: 100%;
       }
 
-      /* Tile Base Styles */
+      /* Tile Base Styles — frame provided by dees-tile, hover via ::part */
-      .stats-tile {
+      .stats-tile::part(outer) {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
-        border-radius: var(--border-radius);
-        padding: var(--tile-padding);
         transition: all var(--transition-duration) ease;
-        cursor: default;
-        position: relative;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
       }
 
-      .stats-tile:hover {
+      .stats-tile:hover::part(outer) {
-        background: ${cssManager.bdTheme('#fafafa', '#0d0d0d')};
         border-color: ${cssManager.bdTheme('#d0d0d0', '#2a2a2a')};
       }
 
@@ -202,17 +193,18 @@ export class DeesStatsGrid extends DeesElement {
         cursor: pointer;
       }
 
-      .stats-tile.clickable:hover {
+      .stats-tile.clickable:hover::part(outer) {
         transform: translateY(-1px);
         box-shadow: 0 2px 6px ${cssManager.bdTheme('rgba(0,0,0,0.03)', 'rgba(0,0,0,0.15)')};
       }
 
-      /* Tile Header */
+      /* Tile Header — slotted into dees-tile header */
       .tile-header {
         display: flex;
         justify-content: space-between;
-        align-items: flex-start;
+        align-items: center;
-        margin-bottom: var(--header-spacing);
+        padding: 0 12px;
+        height: 28px;
         flex-shrink: 0;
       }
 
@@ -232,12 +224,12 @@ export class DeesStatsGrid extends DeesElement {
         flex-shrink: 0;
       }
 
-      /* Tile Content */
+      /* Tile Content — slotted into dees-tile content area */
       .tile-content {
-        min-height: var(--content-min-height);
         display: flex;
         flex-direction: column;
-        flex: 1;
+        padding: 12px;
+        min-height: var(--content-min-height);
       }
 
       .tile-value {
@@ -261,9 +253,10 @@ export class DeesStatsGrid extends DeesElement {
       .tile-description {
         font-size: var(--label-font-size);
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        margin-top: var(--description-spacing);
         letter-spacing: -0.01em;
-        flex-shrink: 0;
+        padding: 0 12px;
+        height: 24px;
+        line-height: 24px;
       }
 
       /* Gauge Styles */
@@ -882,27 +875,27 @@ export class DeesStatsGrid extends DeesElement {
     const columnSpan = tile.columnSpan && tile.columnSpan > 1 ? tile.columnSpan : undefined;
 
     return html`
-      <div
+      <dees-tile
         class="stats-tile ${clickable ? 'clickable' : ''}"
         style="${columnSpan ? `grid-column: span ${columnSpan}` : ''}"
         @click=${clickable ? () => this.handleTileAction(tile.actions![0], tile) : undefined}
         @contextmenu=${hasActions ? (e: MouseEvent) => this.showContextMenu(e, tile) : undefined}
       >
-        <div class="tile-header">
+        <div slot="header" class="tile-header">
           <h3 class="tile-title">${tile.title}</h3>
           ${tile.icon ? html`
             <dees-icon class="tile-icon" .icon=${tile.icon} size="small"></dees-icon>
           ` : ''}
         </div>
-        
+
         <div class="tile-content">
           ${this.renderTileContent(tile)}
         </div>
-        
+
         ${tile.description && tile.type !== 'trend' ? html`
-          <div class="tile-description">${tile.description}</div>
+          <div slot="footer" class="tile-description">${tile.description}</div>
         ` : ''}
-      </div>
+      </dees-tile>
     `;
   }
 

ts_web/elements/00group-dataview/dees-table/dees-table.ts

@@ -15,6 +15,7 @@ import {
 } from './data.js';
 import { compileLucenePredicate } from './lucene.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 export type { Column, ITableAction, ITableActionDataArg, TDisplayFunction } from './types.js';
 
@@ -221,9 +222,8 @@ export class DeesTable<T> extends DeesElement {
     );
     (this as any)._lastViewData = viewData;
     return html`
-      <div class="mainbox">
+      <dees-tile>
-        <!-- the heading part -->
+        <div slot="header" class="header">
-        <div class="header">
           <div class="headingContainer">
             <div class="heading heading1">${this.label || this.heading1}</div>
             <div class="heading heading2">${this.heading2}</div>
@@ -496,7 +496,7 @@ export class DeesTable<T> extends DeesElement {
               </div>
             `
           : html` <div class="noDataSet">No data set!</div> `}
-        <div class="footer">
+        <div slot="footer" class="footer">
           <div class="tableStatistics">
             ${this.data.length} ${this.dataName || 'data rows'} (total) |
             ${this.selectedDataRow ? '# ' + `${this.data.indexOf(this.selectedDataRow) + 1}` : `No`}
@@ -528,7 +528,7 @@ export class DeesTable<T> extends DeesElement {
             })}
           </div>
         </div>
-      </div>
+      </dees-tile>
     `;
   }
 

ts_web/elements/00group-dataview/dees-table/styles.ts

@@ -12,17 +12,11 @@ export const tableStyles: CSSResult[] = [
         width: 100%;
       }
 
-      .mainbox {
+      dees-tile {
         color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
         font-family: ${cssGeistFontFamily};
         font-weight: 400;
         font-size: 14px;
-        display: block;
-        width: 100%;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 8px;
-        overflow: hidden;
         cursor: default;
       }
 
@@ -30,30 +24,31 @@ export const tableStyles: CSSResult[] = [
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 16px 24px;
+        padding: 0 16px;
-        min-height: 64px;
+        height: 40px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
       }
 
       .headingContainer {
         flex: 1;
+        display: flex;
+        align-items: baseline;
       }
 
       .heading {
-        line-height: 1.5;
+        line-height: 1;
       }
 
       .heading1 {
-        font-size: 18px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        letter-spacing: -0.025em;
-      }
-      
-      .heading2 {
         font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        letter-spacing: -0.01em;
+      }
+
+      .heading2 {
+        font-size: 12px;
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        margin-top: 2px;
+        margin-left: 8px;
       }
 
       .headingSeparation {
@@ -70,14 +65,14 @@ export const tableStyles: CSSResult[] = [
       .headerAction {
         display: flex;
         align-items: center;
-        gap: 6px;
+        gap: 4px;
-        padding: 6px 12px;
+        padding: 4px 10px;
-        font-size: 14px;
+        font-size: 12px;
         font-weight: 500;
         color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
         background: transparent;
         border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
+        border-radius: 4px;
         cursor: pointer;
         transition: all 0.15s ease;
       }
@@ -199,7 +194,7 @@ export const tableStyles: CSSResult[] = [
       }
       
       tbody tr:hover {
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.5)', 'hsl(0 0% 14.9% / 0.5)')};
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.06)', 'hsl(217.2 91.2% 59.8% / 0.08)')};
       }
       
       /* Column hover effect for better traceability */
@@ -214,7 +209,7 @@ export const tableStyles: CSSResult[] = [
         bottom: 0;
         left: 0;
         right: 0;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.3)', 'hsl(0 0% 14.9% / 0.3)')};
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.04)', 'hsl(217.2 91.2% 59.8% / 0.05)')};
         opacity: 0;
         pointer-events: none;
         transition: opacity 0.15s ease;
@@ -238,15 +233,19 @@ export const tableStyles: CSSResult[] = [
         border-top: none;
       }
       
-      :host([show-grid]) th:first-child,
-      :host([show-grid]) td:first-child {
-        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-      }
-      
       :host([show-grid]) tbody tr:first-child td {
         border-top: none;
       }
 
+      /* Remove edge borders that would double with tile frame */
+      :host([show-grid]) th:last-child,
+      :host([show-grid]) td:last-child {
+        border-right: none;
+      }
+      :host([show-grid]) tbody tr:last-child td {
+        border-bottom: none;
+      }
+
       /* Sticky Actions column (right pinned) */
       thead th.actionsCol,
       tbody td.actionsCol {
@@ -261,7 +260,7 @@ export const tableStyles: CSSResult[] = [
       }
       
       tbody tr.selected {
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.12)')};
       }
 
       tbody tr.hasAttachment {
@@ -269,10 +268,11 @@ export const tableStyles: CSSResult[] = [
       }
 
       th {
-        height: 48px;
+        height: 36px;
-        padding: 12px 24px;
+        padding: 8px 16px;
         text-align: left;
         font-weight: 500;
+        font-size: 12px;
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
         letter-spacing: -0.01em;
       }
@@ -282,8 +282,9 @@ export const tableStyles: CSSResult[] = [
       }
       
       td {
-        padding: 12px 24px;
+        padding: 8px 16px;
         vertical-align: middle;
+        font-size: 13px;
         color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
       }
       
@@ -293,18 +294,23 @@ export const tableStyles: CSSResult[] = [
       
       th:first-child,
       td:first-child {
-        padding-left: 24px;
+        padding-left: 16px;
       }
       
       th:last-child,
       td:last-child {
-        padding-right: 24px;
+        padding-right: 16px;
       }
       
       :host([show-vertical-lines]) th:last-child,
       :host([show-vertical-lines]) td:last-child {
         border-right: none;
       }
+
+      /* Default bottom border on last row removed — tile frame handles it */
+      :host(:not([show-horizontal-lines])) tbody tr:last-child {
+        border-bottom: none;
+      }
       
       .innerCellContainer {
         position: relative;
@@ -389,12 +395,12 @@ export const tableStyles: CSSResult[] = [
         display: flex;
         align-items: center;
         justify-content: space-between;
-        height: 52px;
+        height: 32px;
-        padding: 0 24px;
+        padding: 0 16px;
-        font-size: 14px;
+        font-size: 11px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
+        width: 100%;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        box-sizing: border-box;
       }
 
       .tableStatistics {
@@ -409,9 +415,10 @@ export const tableStyles: CSSResult[] = [
       .footerActions .footerAction {
         display: flex;
         align-items: center;
-        gap: 6px;
+        gap: 4px;
-        padding: 6px 12px;
+        padding: 2px 8px;
         font-weight: 500;
+        font-size: 11px;
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
         border-radius: 6px;
         cursor: pointer;

ts_web/elements/00group-input/dees-input-code/dees-input-code.ts

@@ -12,6 +12,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 import '../../00group-layout/dees-label/dees-label.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 import '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
 import { DeesWorkspaceMonaco } from '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
 
@@ -105,24 +106,16 @@ export class DeesInputCode extends DeesInputBase<string> {
         min-height: 0;
       }
 
-      .code-container {
+      dees-tile {
-        display: flex;
-        flex-direction: column;
         flex: 1;
         min-height: 0;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
-        overflow: hidden;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
       }
 
       .toolbar {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 8px 12px;
+        padding: 4px 12px;
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         gap: 8px;
       }
 
@@ -256,8 +249,8 @@ export class DeesInputCode extends DeesInputBase<string> {
       </style>
       <div class="input-wrapper">
         <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
-        <div class="code-container">
+        <dees-tile>
-          <div class="toolbar">
+          <div slot="header" class="toolbar">
             <div class="toolbar-left">
               <div class="language-selector">
                 <button
@@ -322,7 +315,7 @@ export class DeesInputCode extends DeesInputBase<string> {
               @content-change=${this.handleContentChange}
             ></dees-workspace-monaco>
           </div>
-        </div>
+        </dees-tile>
       </div>
     `;
   }

ts_web/elements/00group-input/dees-input-richtext/component.ts

@@ -16,6 +16,7 @@ import {
 
 import type { Editor } from '@tiptap/core';
 import { DeesServiceLibLoader, type ITiptapBundle } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {

ts_web/elements/00group-input/dees-input-richtext/styles.ts

@@ -23,22 +23,15 @@ export const richtextStyles = [
         color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
       }
 
-      .editor-container {
+      dees-tile {
-        display: flex;
+        min-height: 200px;
-        flex-direction: column;
-        min-height: ${cssManager.bdTheme('200px', '200px')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        overflow: hidden;
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       }
 
-      .editor-container:hover {
+      dees-tile:hover::part(outer) {
         border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
       }
 
-      .editor-container.focused {
+      dees-tile.focused::part(outer) {
         border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
         box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
       }
@@ -47,9 +40,7 @@ export const richtextStyles = [
         display: flex;
         flex-wrap: wrap;
         gap: 4px;
-        padding: 8px 12px;
+        padding: 4px 12px;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         align-items: center;
         position: relative;
       }
@@ -199,14 +190,15 @@ export const richtextStyles = [
       }
 
       .editor-footer {
-        padding: 8px 12px;
+        padding: 0 12px;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
+        height: 28px;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        font-size: 11px;
-        font-size: 12px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
         display: flex;
         justify-content: space-between;
         align-items: center;
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .word-count {

ts_web/elements/00group-input/dees-input-richtext/template.ts

@@ -5,8 +5,8 @@ export const renderRichtext = (component: DeesInputRichtext): TemplateResult =>
       return html`
         <div class="input-wrapper">
           ${component.label ? html`<label class="label">${component.label}</label>` : ''}
-          <div class="editor-container ${component.editor?.isFocused ? 'focused' : ''}" style="--min-height: ${component.minHeight}px">
+          <dees-tile class="${component.editor?.isFocused ? 'focused' : ''}" style="--min-height: ${component.minHeight}px">
-            <div class="editor-toolbar">
+            <div slot="header" class="editor-toolbar">
               ${component.renderToolbar()}
               <div class="link-input ${component.showLinkInput ? 'show' : ''}">
                 <input type="url" placeholder="Enter URL..." @keydown=${component.handleLinkInputKeydown} />
@@ -20,14 +20,14 @@ export const renderRichtext = (component: DeesInputRichtext): TemplateResult =>
             <div class="editor-content"></div>
             ${component.showWordCount
               ? html`
-                  <div class="editor-footer">
+                  <div slot="footer" class="editor-footer">
                     <span class="word-count">${component.wordCount} word${component.wordCount !== 1 ? 's' : ''}</span>
                   </div>
                 `
               : ''}
-          </div>
+          </dees-tile>
           ${component.description ? html`<div class="description">${component.description}</div>` : ''}
         </div>
       `;
-  
+
 };

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-layout/dees-tile/dees-tile.demo.ts

@@ -0,0 +1,67 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import './dees-tile.js';
+
+export const demoFunc = () => {
+  return html`
+    <dees-demowrapper>
+      <style>
+        ${css`
+          .demoBox {
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+            padding: 40px;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .tile-demo-content {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+            font-size: 13px;
+          }
+          .footer-stats {
+            display: flex;
+            align-items: center;
+            gap: 24px;
+            font-size: 11px;
+            width: 100%;
+          }
+          .footer-stats .stat {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+          }
+          .footer-stats .stat strong {
+            color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <dees-tile heading="Simple Tile" style="height: 200px;">
+          <div class="tile-demo-content">Content area with rounded corners</div>
+        </dees-tile>
+
+        <dees-tile heading="Tile with Footer" style="height: 200px;">
+          <div class="tile-demo-content">Content goes here</div>
+          <div slot="footer" class="footer-stats">
+            <span class="stat">latest <strong>42</strong></span>
+            <span class="stat">min <strong>12</strong></span>
+            <span class="stat">max <strong>87</strong></span>
+            <span class="stat">avg <strong>45.3</strong></span>
+          </div>
+        </dees-tile>
+
+        <dees-tile style="height: 200px;">
+          <div slot="header" style="display:flex;align-items:center;gap:12px;width:100%;">
+            <span style="font-weight:500;">Custom Header</span>
+            <input type="text" placeholder="Search..." style="flex:1;max-width:200px;padding:2px 8px;border:1px solid;border-radius:4px;font-size:12px;background:transparent;color:inherit;border-color:inherit;">
+          </div>
+          <div class="tile-demo-content">Custom header slot with search input</div>
+        </dees-tile>
+      </div>
+    </dees-demowrapper>
+  `;
+};

ts_web/elements/00group-layout/dees-tile/dees-tile.ts

@@ -0,0 +1,139 @@
+import {
+  customElement,
+  DeesElement,
+  html,
+  css,
+  cssManager,
+  property,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { demoFunc } from './dees-tile.demo.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
+import { themeDefaultStyles } from '../../00theme.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-tile': DeesTile;
+  }
+}
+
+/**
+ * dees-tile — the unified "rounded on rounded" tile frame.
+ *
+ * RESPONSIBILITIES (what this component owns):
+ *  1. Outer card — border, border-radius, background, overflow clipping
+ *  2. Flex column layout — stacking header / content / footer vertically
+ *  3. Content inset — the rounded inner area with border-top and border-bottom
+ *  4. Default heading — styled 32px heading text when no slot="header" is provided
+ *  5. Footer visibility — auto-hides footer area when slot="footer" is empty
+ *
+ * NOT RESPONSIBILITIES (what consumer components own):
+ *  - Header/footer height, padding, font-size, colors when using custom slots
+ *  - Content layout (absolute, flex, grid — consumer decides)
+ *  - Any semantic meaning of header/footer content
+ *
+ * The header and footer slots are BARE containers (just flex-shrink: 0).
+ * The slotted content fully controls its own appearance.
+ * Only the default heading fallback (.tile-heading) carries tile-level styling.
+ */
+@customElement('dees-tile')
+export class DeesTile extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Layout'];
+
+  @property({ type: String })
+  accessor heading: string = '';
+
+  @state()
+  accessor hasFooter: boolean = false;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        font-family: ${cssGeistFontFamily};
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+      }
+
+      /* --- The frame --- */
+      .tile-outer {
+        position: relative;
+        flex: 1;
+        min-height: 0;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 8px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+
+      /* --- Header: bare container, only the default heading gets styled --- */
+      .tile-header {
+        flex-shrink: 0;
+      }
+
+      .tile-heading {
+        height: 32px;
+        line-height: 32px;
+        padding: 0 16px;
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+      }
+
+      /* --- Content: the rounded inset --- */
+      .tile-content {
+        flex: 1;
+        position: relative;
+        border-radius: 8px;
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
+        overflow: hidden;
+      }
+
+      .tile-content.no-footer {
+        border-bottom: none;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      /* --- Footer: bare container, consumer styles the slotted content --- */
+      .tile-footer {
+        flex-shrink: 0;
+      }
+
+      .tile-footer.hidden {
+        display: none;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="tile-outer" part="outer">
+        <div class="tile-header" part="header">
+          <slot name="header">
+            <div class="tile-heading">${this.heading}</div>
+          </slot>
+        </div>
+        <div class="tile-content ${!this.hasFooter ? 'no-footer' : ''}" part="content">
+          <slot></slot>
+        </div>
+        <div class="tile-footer ${!this.hasFooter ? 'hidden' : ''}" part="footer">
+          <slot name="footer" @slotchange=${this.onFooterSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  private onFooterSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+}

ts_web/elements/00group-layout/dees-tile/index.ts

@@ -0,0 +1 @@
+export * from './dees-tile.js';

ts_web/elements/00group-layout/index.ts

@@ -6,3 +6,4 @@ export * from './dees-label/index.js';
 export * from './dees-pagination/index.js';
 export * from './dees-panel/index.js';
 export * from './dees-stepper/index.js';
+export * from './dees-tile/index.js';

ts_web/elements/00group-overlay/dees-modal/dees-modal.ts

@@ -21,6 +21,7 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesWindowLayer } from '../dees-windowlayer/dees-windowlayer.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 import { themeDefaultStyles } from '../../00theme.js';
 
 declare global {
@@ -128,8 +129,7 @@ export class DeesModal extends DeesElement {
       /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         font-family: ${cssGeistFontFamily};
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        will-change: transform;
       }
       .modalContainer {
         display: flex;
@@ -142,106 +142,112 @@ export class DeesModal extends DeesElement {
         align-items: center;
         justify-content: center;
       }
-      .modal {
+      dees-tile {
-        will-change: transform;
+        will-change: transform, opacity;
-        transform: translateY(0px) scale(0.95);
+        transform: translateY(8px) scale(0.98);
         opacity: 0;
         min-height: 120px;
-        max-height: calc(100vh - 40px);
+        max-height: calc(100vh - 80px);
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
-        border-radius: 6px;
+        margin: 40px;
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-        transition: all 0.2s ease;
-        overflow: hidden;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
-        margin: 20px;
-        display: flex;
-        flex-direction: column;
         overscroll-behavior: contain;
       }
 
+      dees-tile::part(outer) {
+        box-shadow:
+          0 0 0 1px ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 100% / 0.03)')},
+          0 8px 40px ${cssManager.bdTheme('hsl(0 0% 0% / 0.12)', 'hsl(0 0% 0% / 0.5)')},
+          0 2px 8px ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 0% / 0.25)')};
+      }
+
       /* Width variations */
-      .modal.width-small {
+      dees-tile.width-small {
         width: 380px;
       }
 
-      .modal.width-medium {
+      dees-tile.width-medium {
         width: 560px;
       }
 
-      .modal.width-large {
+      dees-tile.width-large {
         width: 800px;
       }
 
-      .modal.width-fullscreen {
+      dees-tile.width-fullscreen {
         width: calc(100vw - 40px);
         height: calc(100vh - 40px);
         max-height: calc(100vh - 40px);
       }
 
       @media (max-width: 768px) {
-        .modal {
+        dees-tile {
           width: calc(100vw - 40px) !important;
           max-width: none !important;
         }
-        
+
-        /* Allow full height on mobile when content needs it */
         .modalContainer {
           padding: 10px;
         }
-        
+
-        .modal {
+        dees-tile {
           margin: 10px;
           max-height: calc(100vh - 20px);
         }
-        
+
-        /* Full screen mode on mobile */
+        dees-tile.mobile-fullscreen {
-        .modal.mobile-fullscreen {
           width: 100vw !important;
           height: 100vh !important;
           max-height: 100vh !important;
           margin: 0;
+        }
+
+        dees-tile.mobile-fullscreen::part(outer) {
           border-radius: 0;
           border: none;
         }
       }
 
-      .modal.show {
+      dees-tile.show {
         opacity: 1;
-        transform: translateY(0px) scale(1);
+        transform: translateY(0) scale(1);
       }
 
-      .modal.show.predestroy {
+      dees-tile.show.predestroy {
         opacity: 0;
-        transform: translateY(10px) scale(1);
+        transform: translateY(6px) scale(0.98);
+        transition: transform 0.15s ease-in, opacity 0.15s ease-in;
       }
 
-      .modal .heading {
+      .heading {
-        height: 40px;
+        height: 36px;
-        min-height: 40px;
-        font-family: ${cssGeistFontFamily};
         display: flex;
         align-items: center;
-        justify-content: space-between;
+        padding: 0 8px 0 16px;
-        padding: 0 12px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         position: relative;
-        flex-shrink: 0;
       }
 
-      .modal .heading .header-buttons {
+      .heading .heading-text {
+        flex: 1;
+        font-weight: 500;
+        font-size: 13px;
+        letter-spacing: -0.01em;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .heading .header-buttons {
         display: flex;
         align-items: center;
-        gap: 4px;
+        gap: 2px;
-        position: absolute;
+        flex-shrink: 0;
-        right: 8px;
+        margin-left: 8px;
-        top: 50%;
-        transform: translateY(-50%);
       }
 
-      .modal .heading .header-button {
+      .heading .header-button {
-        width: 28px;
+        width: 24px;
-        height: 28px;
+        height: 24px;
         border-radius: 4px;
         display: flex;
         align-items: center;
@@ -249,89 +255,85 @@ export class DeesModal extends DeesElement {
         cursor: pointer;
         transition: all 0.15s ease;
         background: transparent;
-        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
       }
 
-      .modal .heading .header-button:hover {
+      .heading .header-button:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        background: ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 12%)')};
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
       }
 
-      .modal .heading .header-button:active {
+      .heading .header-button:active {
-        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 15%)')};
       }
 
-      .modal .heading .header-button dees-icon {
+      .heading .header-button dees-icon {
-        width: 16px;
+        width: 14px;
-        height: 16px;
+        height: 14px;
         display: block;
       }
 
-      .modal .heading .heading-text {
+      .content {
-        flex: 1;
-        text-align: center;
-        font-weight: 600;
-        font-size: 14px;
-        line-height: 40px;
-        padding: 0 40px;
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
-      }
-
-      .modal .content {
-        flex: 1;
         overflow-y: auto;
         overflow-x: hidden;
         overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')} transparent;
       }
-      .modal .bottomButtons {
+      .bottomButtons {
         display: flex;
         flex-direction: row;
-        border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         justify-content: flex-end;
-        gap: 8px;
+        align-items: center;
-        padding: 8px;
+        gap: 0;
-        flex-shrink: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
-      .modal .bottomButtons .bottomButton {
+      .bottomButtons .bottomButton {
-        padding: 8px 16px;
+        padding: 0 16px;
-        border-radius: 4px;
+        height: 100%;
-        line-height: 16px;
         text-align: center;
-        font-size: 14px;
+        font-size: 12px;
         font-weight: 500;
         cursor: pointer;
         user-select: none;
         transition: all 0.15s ease;
-        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
+        background: transparent;
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+        border: none;
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
         white-space: nowrap;
+        display: flex;
+        align-items: center;
       }
 
-      .modal .bottomButtons .bottomButton:hover {
+      .bottomButtons .bottomButton:first-child {
-        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
+        border-left: none;
-        border-color: ${cssManager.bdTheme('#d1d5db', '#52525b')};
-      }
-      .modal .bottomButtons .bottomButton:active {
-        background: ${cssManager.bdTheme('#e5e7eb', '#52525b')};
-      }
-      .modal .bottomButtons .bottomButton:last-child {
-        border-right: none;
       }
 
-      .modal .bottomButtons .bottomButton.primary {
+      .bottomButtons .bottomButton:hover {
-        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')};
-        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
-        color: #ffffff;
       }
-      .modal .bottomButtons .bottomButton.primary:hover {
+
-        background: ${cssManager.bdTheme('#2563eb', '#2563eb')};
+      .bottomButtons .bottomButton:active {
-        border-color: ${cssManager.bdTheme('#2563eb', '#2563eb')};
+        background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 13%)')};
       }
-      .modal .bottomButtons .bottomButton.primary:active {
+
-        background: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
+      .bottomButtons .bottomButton.primary {
-        border-color: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
+        font-weight: 600;
+      }
+
+      .bottomButtons .bottomButton.primary:hover {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
+        color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
+      }
+
+      .bottomButtons .bottomButton.primary:active {
+        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.12)', 'hsl(213.1 93.9% 67.8% / 0.12)')};
       }
     `,
   ];
@@ -345,13 +347,13 @@ export class DeesModal extends DeesElement {
 
     return html`
       <style>
-        ${customWidth ? `.modal { width: ${customWidth}; }` : ''}
+        ${customWidth ? `dees-tile { width: ${customWidth}; }` : ''}
-        ${maxWidthStyle ? `.modal { max-width: ${maxWidthStyle}; }` : ''}
+        ${maxWidthStyle ? `dees-tile { max-width: ${maxWidthStyle}; }` : ''}
-        ${minWidthStyle ? `.modal { min-width: ${minWidthStyle}; }` : ''}
+        ${minWidthStyle ? `dees-tile { min-width: ${minWidthStyle}; }` : ''}
       </style>
       <div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}">
-        <div class="modal ${widthClass} ${mobileFullscreenClass}">
+        <dees-tile class="${widthClass} ${mobileFullscreenClass}">
-          <div class="heading">
+          <div slot="header" class="heading">
             <div class="heading-text">${this.heading}</div>
             <div class="header-buttons">
               ${this.showHelpButton ? html`
@@ -368,7 +370,7 @@ export class DeesModal extends DeesElement {
           </div>
           <div class="content" style="padding: ${this.contentPadding}px;">${this.content}</div>
           ${this.menuOptions.length > 0 ? html`
-            <div class="bottomButtons">
+            <div slot="footer" class="bottomButtons">
               ${this.menuOptions.map(
                 (actionArg, index) => html`
                   <div class="bottomButton ${index === this.menuOptions.length - 1 ? 'primary' : ''} ${actionArg.name === 'OK' ? 'ok' : ''}" @click=${() => {
@@ -378,7 +380,7 @@ export class DeesModal extends DeesElement {
               )}
             </div>
           ` : ''}
-        </div>
+        </dees-tile>
       </div>
     `;
   }
@@ -388,8 +390,8 @@ export class DeesModal extends DeesElement {
     super.firstUpdated(_changedProperties);
     const domtools = await this.domtoolsPromise;
     await domtools.convenience.smartdelay.delayFor(30);
-    const modal = this.shadowRoot!.querySelector('.modal');
+    const tile = this.shadowRoot!.querySelector('dees-tile');
-    modal!.classList.add('show');
+    tile!.classList.add('show');
   }
 
   public async handleOutsideClick(eventArg: MouseEvent) {
@@ -402,8 +404,8 @@ export class DeesModal extends DeesElement {
 
   public async destroy() {
     const domtools = await this.domtoolsPromise;
-    const modal = this.shadowRoot!.querySelector('.modal');
+    const tile = this.shadowRoot!.querySelector('dees-tile');
-    modal!.classList.add('predestroy');
+    tile!.classList.add('predestroy');
     await domtools.convenience.smartdelay.delayFor(200);
     document.body.removeChild(this);
     await this.windowLayer.destroy();

ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts

@@ -9,6 +9,7 @@ import {
 } from '@design.estate/dees-element';
 import { demoFunc } from './dees-shopping-productcard.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -61,28 +62,20 @@ export class DeesShoppingProductcard extends DeesElement {
         display: block;
       }
 
-      .product-card {
+      dees-tile {
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 11.8%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 8px;
-        overflow: hidden;
-        transition: all 0.2s ease;
-        display: flex;
-        flex-direction: column;
         height: 100%;
-        position: relative;
       }
 
-      .product-card:hover {
+      dees-tile:hover::part(outer) {
         border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
         box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
       }
 
-      .product-card.selectable {
+      dees-tile.selectable {
         cursor: pointer;
       }
 
-      .product-card.selected {
+      dees-tile.selected::part(outer) {
         border-color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
         box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.1)', 'hsl(213.1 93.9% 67.8% / 0.1)')};
       }
@@ -143,36 +136,48 @@ export class DeesShoppingProductcard extends DeesElement {
         transform: scale(1);
       }
 
-      .product-content {
+      .product-header-bar {
-        padding: 16px;
         display: flex;
-        flex-direction: column;
+        align-items: center;
-        gap: 12px;
+        justify-content: space-between;
-        flex: 1;
+        height: 32px;
+        padding: 0 16px;
+        gap: 8px;
       }
-      
+
-      .product-header {
+      .product-name {
-        display: flex;
+        font-size: 14px;
-        flex-direction: column;
+        font-weight: 500;
-        gap: 4px;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       .product-category {
-        font-size: 12px;
+        font-size: 11px;
         font-weight: 500;
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        line-height: 1.3;
+        white-space: nowrap;
-      }
+        flex-shrink: 0;
-      
-      .product-name {
-        font-size: 16px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        line-height: 1.4;
       }
 
+      .product-body {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .product-content {
+        padding: 12px 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        flex: 1;
+      }
+      
       .product-description {
         font-size: 13px;
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
@@ -185,8 +190,9 @@ export class DeesShoppingProductcard extends DeesElement {
         align-items: center;
         justify-content: space-between;
         gap: 16px;
-        padding-top: 12px;
+        padding: 12px 16px;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .product-price {
@@ -248,66 +254,68 @@ export class DeesShoppingProductcard extends DeesElement {
     };
 
     return html`
-      <div 
+      <dees-tile
-        class="product-card ${this.selectable ? 'selectable' : ''} ${this.selected ? 'selected' : ''}"
+        class="${this.selectable ? 'selectable' : ''} ${this.selected ? 'selected' : ''}"
         @click=${this.handleCardClick}
       >
-        <div class="product-image">
+        <div slot="header" class="product-header-bar">
-          ${imageUrl ? html`
+          <span class="product-name">${name}</span>
-            <img src="${imageUrl}" alt="${name}">
+          ${category ? html`<span class="product-category">${category}</span>` : ''}
-          ` : html`
-            <dees-icon .icon=${iconName}></dees-icon>
-          `}
-          ${this.selectable ? html`
-            <div 
-              class="selection-checkbox ${this.selected ? 'checked' : ''}"
-              @click=${(e: Event) => {
-                e.stopPropagation();
-                this.handleSelectionToggle();
-              }}
-            >
-              <dees-icon .icon=${'lucide:check'}></dees-icon>
-            </div>
-          ` : ''}
         </div>
-        <div class="product-content">
+        <div class="product-body">
-          <div class="product-header">
+          <div class="product-image">
-            ${category ? html`<div class="product-category">${category}</div>` : ''}
+            ${imageUrl ? html`
-            <div class="product-name">${name}</div>
+              <img src="${imageUrl}" alt="${name}">
-          </div>
+            ` : html`
-          ${description ? html`
+              <dees-icon .icon=${iconName}></dees-icon>
-            <div class="product-description">${description}</div>
+            `}
-          ` : ''}
+            ${this.selectable ? html`
-          <div class="stock-status ${inStock ? 'in-stock' : 'out-of-stock'}">
+              <div
-            <dees-icon .icon=${inStock ? 'lucide:check-circle' : 'lucide:x-circle'}></dees-icon>
+                class="selection-checkbox ${this.selected ? 'checked' : ''}"
-            ${stockText}
+                @click=${(e: Event) => {
-          </div>
+                  e.stopPropagation();
-          <div class="product-footer">
+                  this.handleSelectionToggle();
-            <div class="product-price">
-              <span class="price-current">${formatPrice(price)}</span>
-              ${originalPrice && originalPrice > price ? html`
-                <span class="price-original">${formatPrice(originalPrice)}</span>
-              ` : ''}
-            </div>
-            ${this.showQuantitySelector ? html`
-              <dees-input-quantityselector
-                .value=${this.quantity}
-                @changeSubject=${(e: CustomEvent) => {
-                  this.quantity = e.detail.getValue();
-                  this.dispatchEvent(new CustomEvent('quantityChange', {
-                    detail: { 
-                      quantity: this.quantity,
-                      productData: this.productData 
-                    },
-                    bubbles: true,
-                    composed: true
-                  }));
                 }}
-              ></dees-input-quantityselector>
+              >
+                <dees-icon .icon=${'lucide:check'}></dees-icon>
+              </div>
             ` : ''}
           </div>
+          <div class="product-content">
+            ${description ? html`
+              <div class="product-description">${description}</div>
+            ` : ''}
+            <div class="stock-status ${inStock ? 'in-stock' : 'out-of-stock'}">
+              <dees-icon .icon=${inStock ? 'lucide:check-circle' : 'lucide:x-circle'}></dees-icon>
+              ${stockText}
+            </div>
+          </div>
         </div>
-      </div>
+        <div slot="footer" class="product-footer">
+          <div class="product-price">
+            <span class="price-current">${formatPrice(price)}</span>
+            ${originalPrice && originalPrice > price ? html`
+              <span class="price-original">${formatPrice(originalPrice)}</span>
+            ` : ''}
+          </div>
+          ${this.showQuantitySelector ? html`
+            <dees-input-quantityselector
+              .value=${this.quantity}
+              @changeSubject=${(e: CustomEvent) => {
+                this.quantity = e.detail.getValue();
+                this.dispatchEvent(new CustomEvent('quantityChange', {
+                  detail: {
+                    quantity: this.quantity,
+                    productData: this.productData
+                  },
+                  bubbles: true,
+                  composed: true
+                }));
+              }}
+            ></dees-input-quantityselector>
+          ` : ''}
+        </div>
+      </dees-tile>
     `;
   }
 

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,16 +707,15 @@ 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.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)`;
     
     // Add close button to terminal
     terminal.addEventListener('close', () => this.closeTerminal());

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

@@ -11,6 +11,7 @@ import type { Terminal } from 'xterm';
 import type { FitAddon } from 'xterm-addon-fit';
 import { themeDefaultStyles } from '../../00theme.js';
 import { DeesServiceLibLoader } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -68,27 +69,19 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
         height: 200px;
       }
 
-      .terminal-preview {
+      dees-tile {
         height: 100%;
-        border-radius: 8px;
-        overflow: hidden;
-        background: ${cssManager.bdTheme('#ffffff', '#000000')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
-        display: flex;
-        flex-direction: column;
       }
 
       .terminal-header {
         display: flex;
         align-items: center;
         gap: 8px;
-        padding: 8px 12px;
+        padding: 0 12px;
-        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 10%)')};
+        height: 32px;
         font-size: 12px;
         font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
         color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
-        flex-shrink: 0;
       }
 
       .terminal-header-icon {
@@ -262,15 +255,15 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="terminal-preview">
+      <dees-tile>
-        <div class="terminal-header">
+        <div slot="header" class="terminal-header">
           <span class="terminal-header-icon">$</span>
           <span class="terminal-header-command">${this.command || 'Waiting...'}</span>
         </div>
         <div class="terminal-container">
           <div id="xterm-container"></div>
         </div>
-      </div>
+      </dees-tile>
     `;
   }
 

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
+   * Load TradingView Lightweight Charts from CDN
-   * @returns Promise resolving to ApexCharts constructor
+   * @returns Promise resolving to Lightweight Charts bundle
    */
-  public async loadApexCharts(): Promise<typeof ApexChartsType> {
+  public async loadLightweightCharts(): Promise<ILightweightChartsBundle> {
-    if (this.apexChartsLib) {
+    if (this.lightweightChartsLib) {
-      return this.apexChartsLib;
+      return this.lightweightChartsLib;
     }
 
-    if (this.apexChartsLoadingPromise) {
+    if (this.lightweightChartsLoadingPromise) {
-      return this.apexChartsLoadingPromise;
+      return this.lightweightChartsLoadingPromise;
     }
 
-    this.apexChartsLoadingPromise = (async () => {
+    this.lightweightChartsLoadingPromise = (async () => {
-      const url = `${CDN_BASE}/apexcharts@${CDN_VERSIONS.apexcharts}/+esm`;
+      const url = `${CDN_BASE}/lightweight-charts@${CDN_VERSIONS.lightweightCharts}/+esm`;
       const module = await import(/* @vite-ignore */ url);
 
-      this.apexChartsLib = module.default;
+      this.lightweightChartsLib = {
-      return this.apexChartsLib!;
+        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':
+      case 'lightweightCharts':
-        return this.apexChartsLib !== null;
+        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;