v3.55.4

changelog.md

@@ -1,5 +1,102 @@
 # Changelog
 
+## 2026-04-04 - 3.55.4 - fix(chart)
+align ECharts components with theme tokens and load the full ECharts ESM bundle
+
+- replace hardcoded chart colors with centralized themeDefaults-based ECharts theme helpers across bar, donut, gauge, and radar components
+- improve donut label styling to use theme-aware text colors
+- switch CDN loading to the pre-built echarts.esm.min.js bundle so all chart types and components are available
+
+## 2026-04-04 - 3.55.3 - fix(theme)
+align component styles with shared theme CSS variables
+
+- replace hardcoded bdTheme color usages across chart, dataview, input, layout, modal, media, simple, and workspace components with shared --dees-* theme tokens
+- add themeDefaultStyles to components and style modules that were not yet inheriting the shared theme defaults
+- standardize hover, border, background, text, and scrollbar colors for more consistent theming across the catalog
+
+## 2026-04-04 - 3.55.2 - fix(dees-simple-appdash,dees-simple-login)
+migrate app dashboard and login styles to shared theme CSS variables
+
+- Replaces hardcoded bdTheme color values with --dees-* design tokens across dashboard and login components
+- Aligns backgrounds, borders, text, hover, active, and scrollbar colors with the shared theming system
+
+## 2026-04-04 - 3.55.1 - fix(appui)
+replace hardcoded app UI theme colors with shared dees CSS variables
+
+- Standardizes app UI component styling on shared --dees-* theme tokens across app bar, menus, tabs, main content, and bottom bar
+- Removes remaining hardcoded light/dark color values in favor of centralized background, border, text, badge, tooltip, scrollbar, and accent variables
+
+## 2026-04-04 - 3.55.0 - feat(theme)
+centralize theme CSS tokens in theme defaults and add missing interactive color variables
+
+- Refactors theme CSS variables to derive light and dark values from the shared themeDefaults token map instead of hardcoded color literals.
+- Adjusts dark background token values so secondary and tertiary surfaces align more consistently with the dark UI palette.
+- Adds new theme variables for interactive states, focus ring, tooltip, link, code, selection, and scrollbar styling.
+
+## 2026-04-04 - 3.54.0 - feat(media)
+rename media tile components to thumbnail components and add shared thumbnail base exports
+
+- Replaces dees-tile-* media component exports and implementations with dees-thumbnail-* counterparts for audio, image, video, note, folder, and pdf previews.
+- Introduces a shared DeesThumbnailBase and shared thumbnail styles for consistent sizing, hover overlays, loading states, error states, and lazy-loading behavior.
+- Updates the media index to export the new thumbnail component modules.
+- Includes a small layout cleanup in dees-dataview-codebox by removing forced full-height and absolute grid positioning.
+
+## 2026-04-03 - 3.53.0 - feat(dees-pdf-viewer)
+add configurable sidebar position support
+
+- introduces a sidebarPosition property with left and right options
+- updates viewer layout and footer alignment when the sidebar is displayed on the right
+
+## 2026-04-03 - 3.52.5 - fix(dees-pdf-viewer)
+add top scroll offset when navigating to a page in the PDF viewer
+
+- Subtracts 16px from the calculated scroll target so the selected page is not flush against the top edge of the viewer.
+- Improves page navigation positioning in the dees-pdf-viewer component.
+
+## 2026-04-03 - 3.52.4 - fix(appui-maincontent)
+adjust main content background theme colors
+
+- Update the main content background from pure white/near-black to softer light and dark theme values.
+
+## 2026-04-03 - 3.52.3 - fix(input-richtext)
+resolve rich text editor initialization and layout issues by bundling Tiptap locally and anchoring editor containers
+
+- Switch Tiptap imports from CDN URLs to bundled npm packages to avoid duplicate ProseMirror instances
+- Update rich text, code, dataview, and terminal preview containers to use absolute inset positioning for stable full-size layouts
+- Trigger a component update after rich text editor initialization and improve ProseMirror wrapping behavior
+
+## 2026-04-03 - 3.52.2 - fix(chart-log, simple-appdash)
+align terminal and dashboard theming with brightness mode and improve app dashboard scroll presentation
+
+- Update dees-chart-log to refresh the terminal theme when goBright changes and derive dark mode directly from the brightness setting.
+- Refine dees-simple-appdash control bar colors, borders, and shadow gradients for better light and dark theme consistency.
+- Expand the app dashboard demo with recent activity content to showcase scrollable layout behavior.
+
+## 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
 

package.json

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

pnpm-lock.yaml

@@ -62,6 +62,9 @@ importers:
       '@tsclass/tsclass':
         specifier: ^9.5.0
         version: 9.5.0
+      echarts:
+        specifier: ^5.6.0
+        version: 5.6.0
       highlight.js:
         specifier: 11.11.1
         version: 11.11.1
@@ -2534,6 +2537,9 @@ packages:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
 
+  echarts@5.6.0:
+    resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -3936,6 +3942,9 @@ packages:
   tslib@1.14.1:
     resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==}
 
+  tslib@2.3.0:
+    resolution: {integrity: sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==}
+
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
@@ -4149,6 +4158,9 @@ packages:
   zod@3.25.76:
     resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
 
+  zrender@5.6.1:
+    resolution: {integrity: sha512-OFXkDJKcrlx5su2XbzJvj/34Q3m6PvyCZkVPHGYpcCJ52ek4U/ymZyfuV1nKE23AyBJ51E/6Yr0mhZ7xGTO4ag==}
+
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -7671,6 +7683,11 @@ snapshots:
       es-errors: 1.3.0
       gopd: 1.2.0
 
+  echarts@5.6.0:
+    dependencies:
+      tslib: 2.3.0
+      zrender: 5.6.1
+
   emoji-regex@8.0.0: {}
 
   end-of-stream@1.4.5:
@@ -9510,6 +9527,8 @@ snapshots:
 
   tslib@1.14.1: {}
 
+  tslib@2.3.0: {}
+
   tslib@2.8.1: {}
 
   tsx@4.21.0:
@@ -9699,4 +9718,8 @@ snapshots:
 
   zod@3.25.76: {}
 
+  zrender@5.6.1:
+    dependencies:
+      tslib: 2.3.0
+
   zwitch@2.0.4: {}

ts_web/00_commitinfo_data.ts

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

ts_web/elements/00group-appui/dees-appui-appbar/styles.ts

@@ -12,8 +12,8 @@ export const appuiAppbarStyles = [
         position: relative;
         width: 100%;
         height: var(--appbar-height);
-        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
-        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        border-bottom: 1px solid var(--dees-color-border-default);
+        background: var(--dees-color-bg-primary);
         color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
         font-size: var(--appbar-font-size);
         display: grid;
@@ -78,8 +78,8 @@ export const appuiAppbarStyles = [
         top: 100%;
         left: 0;
         min-width: 200px;
-        background: ${cssManager.bdTheme('#ffffff', '#000000')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
         box-shadow: ${cssManager.bdTheme('0 4px 12px rgba(0, 0, 0, 0.15)', '0 4px 12px rgba(0, 0, 0, 0.3)')};
         margin-top: 4px;
@@ -112,7 +112,7 @@ export const appuiAppbarStyles = [
 
       .dropdown-divider {
         height: 1px;
-        background: ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        background: var(--dees-color-border-default);
         margin: 4px 0;
       }
 
@@ -215,7 +215,7 @@ export const appuiAppbarStyles = [
         width: 8px;
         height: 8px;
         border-radius: 50%;
-        border: 2px solid ${cssManager.bdTheme('#ffffff', '#000000')};
+        border: 2px solid var(--dees-color-bg-primary);
       }
 
       .user-status.online {

ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts

@@ -52,10 +52,10 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
         align-items: center;
         padding: 0 8px;
         gap: 4px;
-        background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')};
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
+        background: var(--dees-color-bg-tertiary);
+        border-top: 1px solid var(--dees-color-border-default);
         font-size: 11px;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+        color: var(--dees-color-text-muted);
       }
 
       .widget {
@@ -70,8 +70,8 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
       }
 
       .widget:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
       }
 
       .widget dees-icon {
@@ -81,7 +81,7 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
       .widget-separator {
         width: 1px;
         height: 14px;
-        background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-border-strong);
         margin: 0 4px;
       }
 
@@ -124,12 +124,12 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
         border-radius: 3px;
         cursor: pointer;
         transition: background 0.15s ease;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+        color: var(--dees-color-text-muted);
       }
 
       .action-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
       }
 
       .action-button.disabled {
@@ -139,7 +139,7 @@ export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
 
       .action-button.disabled:hover {
         background: transparent;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+        color: var(--dees-color-text-muted);
       }
     `,
   ];

ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts

@@ -63,14 +63,13 @@ export class DeesAppuiMaincontent extends DeesElement {
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        color: var(--dees-color-text-secondary);
         display: grid;
         grid-template-rows: auto 1fr;
         width: 100%;
         height: 100%;
-        background: ${cssManager.bdTheme('#ffffff', '#161616')};
+        background: var(--dees-color-bg-secondary);
       }
 
       .maincontainer {

ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts

@@ -55,28 +55,27 @@ export class DeesAppuiMainmenu extends DeesElement {
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         --menu-width-expanded: 200px;
         --menu-width-collapsed: 56px;
-        --tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        --tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        --tooltip-bg: var(--dees-color-tooltip-bg);
+        --tooltip-fg: var(--dees-color-tooltip-fg);
         position: relative;
         display: block;
         height: 100%;
       }
 
       .mainContainer {
-        color: ${cssManager.bdTheme('#666', '#ccc')};
+        color: var(--dees-color-text-secondary);
         z-index: ${zIndexLayers.fixed.appBar};
         display: flex;
         flex-direction: column;
         position: relative;
         width: var(--menu-width-expanded);
         height: 100%;
-        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        background: var(--dees-color-bg-secondary);
         user-select: none;
-        border-right: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        border-right: 1px solid var(--dees-color-border-subtle);
         font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
         transition: width 0.25s ease;
       }
@@ -94,23 +93,23 @@ export class DeesAppuiMainmenu extends DeesElement {
         width: 24px;
         height: 24px;
         border-radius: 50%;
-        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
-        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-strong);
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         cursor: pointer;
         z-index: 10;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
+        color: var(--dees-color-text-muted);
         opacity: 0;
         transition: opacity 0.2s ease, background 0.15s ease;
         padding: 0;
       }
 
       .collapse-toggle:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        background: var(--dees-color-bg-tertiary);
+        color: var(--dees-color-text-primary);
       }
 
       :host(:hover) .collapse-toggle {
@@ -128,14 +127,14 @@ export class DeesAppuiMainmenu extends DeesElement {
         gap: 10px;
         height: 48px;
         padding: 0 14px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        border-bottom: 1px solid var(--dees-color-border-subtle);
         flex-shrink: 0;
         box-sizing: border-box;
       }
 
       .logoSection .logoIcon {
         font-size: 22px;
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        color: var(--dees-color-text-primary);
         flex-shrink: 0;
       }
 
@@ -143,7 +142,7 @@ export class DeesAppuiMainmenu extends DeesElement {
         flex: 1;
         font-size: 15px;
         font-weight: 600;
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        color: var(--dees-color-text-primary);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -178,12 +177,12 @@ export class DeesAppuiMainmenu extends DeesElement {
       }
 
       .menuSection::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+        background: var(--dees-color-scrollbar-thumb);
         border-radius: 3px;
       }
 
       .menuSection::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
+        background: var(--dees-color-scrollbar-thumb-hover);
       }
 
       /* Menu Group */
@@ -200,7 +199,7 @@ export class DeesAppuiMainmenu extends DeesElement {
         padding: 8px 12px 6px;
         font-size: 11px;
         font-weight: 600;
-        color: ${cssManager.bdTheme('#737373', '#737373')};
+        color: var(--dees-color-text-muted);
         text-transform: uppercase;
         letter-spacing: 0.5px;
         white-space: nowrap;
@@ -238,21 +237,21 @@ export class DeesAppuiMainmenu extends DeesElement {
         border-radius: 6px;
         cursor: pointer;
         transition: all 0.15s ease;
-        color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
+        color: var(--dees-color-text-secondary);
       }
 
       .tab:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+        background: var(--dees-color-hover);
         color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
       }
 
       .tab:active {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+        background: var(--dees-color-active);
       }
 
       .tab.selectedTab {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        background: var(--dees-color-active);
+        color: var(--dees-color-text-primary);
       }
 
       .tab.selectedTab::before {
@@ -263,7 +262,7 @@ export class DeesAppuiMainmenu extends DeesElement {
         transform: translateY(-50%);
         width: 3px;
         height: 16px;
-        background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        background: var(--dees-color-text-primary);
         border-radius: 0 2px 2px 0;
       }
 
@@ -353,23 +352,23 @@ export class DeesAppuiMainmenu extends DeesElement {
       }
 
       .badge.default {
-        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
-        color: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
+        background: var(--dees-color-badge-default-bg);
+        color: var(--dees-color-badge-default-fg);
       }
 
       .badge.success {
-        background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
-        color: ${cssManager.bdTheme('#166534', '#4ade80')};
+        background: var(--dees-color-badge-success-bg);
+        color: var(--dees-color-badge-success-fg);
       }
 
       .badge.warning {
-        background: ${cssManager.bdTheme('#fef3c7', '#451a03')};
-        color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+        background: var(--dees-color-badge-warning-bg);
+        color: var(--dees-color-badge-warning-fg);
       }
 
       .badge.error {
-        background: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
-        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+        background: var(--dees-color-badge-error-bg);
+        color: var(--dees-color-badge-error-fg);
       }
 
       :host([collapsed]) .badge {
@@ -380,7 +379,7 @@ export class DeesAppuiMainmenu extends DeesElement {
       .bottomSection {
         flex-shrink: 0;
         padding: 8px;
-        border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        border-top: 1px solid var(--dees-color-border-subtle);
         display: flex;
         flex-direction: column;
         gap: 2px;

ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts

@@ -73,30 +73,29 @@ export class DeesAppuiSecondarymenu extends DeesElement {
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         --sidebar-width-expanded: 240px;
         --sidebar-width-collapsed: 56px;
-        --sidebar-bg: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
-        --sidebar-fg: ${cssManager.bdTheme('#525252', '#a3a3a3')};
-        --sidebar-fg-muted: ${cssManager.bdTheme('#737373', '#737373')};
-        --sidebar-fg-active: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-        --sidebar-border: ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
-        --sidebar-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
-        --sidebar-active: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
-        --sidebar-accent: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-        --tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
-        --tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        --sidebar-bg: var(--dees-color-bg-secondary);
+        --sidebar-fg: var(--dees-color-text-secondary);
+        --sidebar-fg-muted: var(--dees-color-text-muted);
+        --sidebar-fg-active: var(--dees-color-text-primary);
+        --sidebar-border: var(--dees-color-border-subtle);
+        --sidebar-hover: var(--dees-color-hover);
+        --sidebar-active: var(--dees-color-active);
+        --sidebar-accent: var(--dees-color-text-primary);
+        --tooltip-bg: var(--dees-color-tooltip-bg);
+        --tooltip-fg: var(--dees-color-tooltip-fg);
 
         /* Badge colors */
-        --badge-default-bg: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
-        --badge-default-fg: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
-        --badge-success-bg: ${cssManager.bdTheme('#dcfce7', '#14532d')};
-        --badge-success-fg: ${cssManager.bdTheme('#166534', '#4ade80')};
-        --badge-warning-bg: ${cssManager.bdTheme('#fef3c7', '#451a03')};
-        --badge-warning-fg: ${cssManager.bdTheme('#92400e', '#fbbf24')};
-        --badge-error-bg: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
-        --badge-error-fg: ${cssManager.bdTheme('#991b1b', '#f87171')};
+        --badge-default-bg: var(--dees-color-badge-default-bg);
+        --badge-default-fg: var(--dees-color-badge-default-fg);
+        --badge-success-bg: var(--dees-color-badge-success-bg);
+        --badge-success-fg: var(--dees-color-badge-success-fg);
+        --badge-warning-bg: var(--dees-color-badge-warning-bg);
+        --badge-warning-fg: var(--dees-color-badge-warning-fg);
+        --badge-error-bg: var(--dees-color-badge-error-bg);
+        --badge-error-fg: var(--dees-color-badge-error-fg);
 
         /* Action colors */
         --action-primary: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
@@ -136,23 +135,23 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         width: 24px;
         height: 24px;
         border-radius: 50%;
-        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
-        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-strong);
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
         cursor: pointer;
         z-index: 10;
         display: flex;
         align-items: center;
         justify-content: center;
-        color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
+        color: var(--dees-color-text-muted);
         opacity: 0;
         transition: opacity 0.2s ease, background 0.15s ease;
         padding: 0;
       }
 
       .collapse-toggle:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        background: var(--dees-color-bg-tertiary);
+        color: var(--dees-color-text-primary);
       }
 
       :host(:hover) .collapse-toggle {
@@ -215,12 +214,12 @@ export class DeesAppuiSecondarymenu extends DeesElement {
       }
 
       .menuSection::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+        background: var(--dees-color-scrollbar-thumb);
         border-radius: 3px;
       }
 
       .menuSection::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
+        background: var(--dees-color-scrollbar-thumb-hover);
       }
 
       /* Menu Group */
@@ -261,7 +260,7 @@ export class DeesAppuiSecondarymenu extends DeesElement {
         gap: 8px;
         font-size: 11px;
         font-weight: 600;
-        color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
+        color: var(--dees-color-text-warm);
         text-transform: uppercase;
         letter-spacing: 0.5px;
         white-space: nowrap;
@@ -270,13 +269,13 @@ export class DeesAppuiSecondarymenu extends DeesElement {
 
       .groupHeader .groupTitle dees-icon {
         font-size: 16px;
-        color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
+        color: var(--dees-color-text-warm);
       }
 
       .groupHeader .chevron {
         font-size: 12px;
         transition: transform 0.2s ease;
-        color: ${cssManager.bdTheme('#78716c', '#b5a99a')};
+        color: var(--dees-color-text-warm);
       }
 
       .groupHeader.collapsed .chevron {

ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts

@@ -60,7 +60,6 @@ export class DeesAppuiTabs extends DeesElement {
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         display: block;
         position: relative;
@@ -76,7 +75,7 @@ export class DeesAppuiTabs extends DeesElement {
 
       .tabs-wrapper.horizontal-wrapper {
         height: 48px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-bottom: 1px solid var(--dees-color-border-default);
         box-sizing: border-box;
         overflow: hidden;
         display: flex;
@@ -133,13 +132,13 @@ export class DeesAppuiTabs extends DeesElement {
       .tab-actions.left {
         padding-left: 12px;
         padding-right: 8px;
-        border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-right: 1px solid var(--dees-color-border-default);
       }
 
       .tab-actions.right {
         padding-right: 12px;
         padding-left: 8px;
-        border-left: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-left: 1px solid var(--dees-color-border-default);
       }
 
       .tab-action-button {
@@ -152,17 +151,17 @@ export class DeesAppuiTabs extends DeesElement {
         cursor: pointer;
         transition: background 0.15s ease, color 0.15s ease;
         background: transparent;
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        color: var(--dees-color-text-muted);
         flex-shrink: 0;
       }
 
       .tab-action-button:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.06)')};
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        background: var(--dees-color-active);
+        color: var(--dees-color-text-primary);
       }
 
       .tab-action-button:active {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+        background: var(--dees-color-pressed);
       }
 
       .tab-action-button.disabled {
@@ -172,7 +171,7 @@ export class DeesAppuiTabs extends DeesElement {
 
       .tab-action-button.disabled:hover {
         background: transparent;
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        color: var(--dees-color-text-muted);
       }
 
       .tab-action-button dees-icon {
@@ -237,12 +236,12 @@ export class DeesAppuiTabs extends DeesElement {
         font-size: 14px;
         gap: 2px;
         position: relative;
-        background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
+        background: var(--dees-color-bg-tertiary);
         border-radius: 8px;
       }
 
       .tab {
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        color: var(--dees-color-text-muted);
         white-space: nowrap;
         cursor: pointer;
         transition: color 0.15s ease;
@@ -270,7 +269,7 @@ export class DeesAppuiTabs extends DeesElement {
         transform: translateY(-50%);
         height: 20px;
         width: 1px;
-        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        background: var(--dees-color-border-default);
         opacity: 0.5;
       }
       
@@ -291,11 +290,11 @@ export class DeesAppuiTabs extends DeesElement {
       }
 
       .tab:hover {
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: var(--dees-color-text-primary);
       }
       
       .horizontal .tab:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.03)')};
+        background: var(--dees-color-hover);
       }
       
       .horizontal .tab:hover::after,
@@ -308,7 +307,7 @@ export class DeesAppuiTabs extends DeesElement {
       }
 
       .horizontal .tab.selectedTab {
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: var(--dees-color-text-primary);
       }
       
       .horizontal .tab.selectedTab::after,
@@ -317,7 +316,7 @@ export class DeesAppuiTabs extends DeesElement {
       }
 
       .vertical .tab.selectedTab {
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: var(--dees-color-text-primary);
       }
 
       .tab dees-icon {
@@ -337,7 +336,7 @@ export class DeesAppuiTabs extends DeesElement {
       .tabs-wrapper .tabIndicator {
         height: 3px;
         bottom: 0;
-        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        background: var(--dees-color-accent-primary);
         border-radius: 3px 3px 0 0;
         z-index: 3;
       }
@@ -350,7 +349,7 @@ export class DeesAppuiTabs extends DeesElement {
         left: 8px;
         right: 8px;
         border-radius: 6px;
-        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
+        background: var(--dees-color-bg-primary);
         z-index: 1;
         box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
       }
@@ -366,7 +365,7 @@ export class DeesAppuiTabs extends DeesElement {
         margin-left: 8px;
         opacity: 0.4;
         transition: opacity 0.15s, background 0.15s;
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        color: var(--dees-color-text-muted);
       }
 
       .tab:hover .tab-close {
@@ -375,8 +374,8 @@ export class DeesAppuiTabs extends DeesElement {
 
       .tab-close:hover {
         opacity: 1;
-        background: ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
-        color: ${cssManager.bdTheme('#ef4444', '#f87171')};
+        background: var(--dees-color-pressed);
+        color: var(--dees-color-accent-error);
       }
 
       .tab.selectedTab .tab-close {

ts_web/elements/00group-appui/dees-appui/dees-appui.ts

@@ -184,12 +184,11 @@ export class DeesAppui extends DeesElement {
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
         position: absolute;
         height: 100%;
         width: 100%;
-        background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
+        background: var(--dees-color-bg-tertiary);
       }
       .maingrid {
         position: absolute;

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

@@ -13,6 +13,7 @@ import { renderChartArea } from './template.js';
 
 import type { IChartApi, ISeriesApi, UTCTimestamp, MouseEventParams } from 'lightweight-charts';
 import { DeesServiceLibLoader, type ILightweightChartsBundle } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 export type ChartSeriesConfig = {
   name?: string;
@@ -33,6 +34,12 @@ export class DeesChartArea extends DeesElement {
   @state()
   accessor chart: IChartApi | null = null;
 
+  @state()
+  accessor seriesStats: Array<{ name: string; latest: number; min: number; max: number; avg: number; color: string }> = [];
+
+  @state()
+  accessor isFullPage: boolean = false;
+
   @property()
   accessor label: string = 'Untitled Chart';
 
@@ -163,8 +170,8 @@ export class DeesChartArea extends DeesElement {
         attributionLogo: false,
       },
       grid: {
-        vertLines: { visible: false },
-        horzLines: { color: isDark ? 'hsl(0 0% 14.9%)' : 'hsl(0 0% 94%)' },
+        vertLines: { color: isDark ? 'hsl(0 0% 8.5%)' : 'hsl(0 0% 95.5%)' },
+        horzLines: { color: isDark ? 'hsl(0 0% 8.5%)' : 'hsl(0 0% 95.5%)' },
       },
     } as any);
 
@@ -172,7 +179,7 @@ export class DeesChartArea extends DeesElement {
     for (const [, api] of this.seriesApis) {
       const color = colors[idx % colors.length];
       api.applyOptions({
-        topColor: this.hslToRgba(color, isDark ? 0.2 : 0.3),
+        topColor: this.hslToRgba(color, isDark ? 0.4 : 0.5),
         bottomColor: this.hslToRgba(color, 0),
         lineColor: color,
       });
@@ -194,7 +201,7 @@ export class DeesChartArea extends DeesElement {
     chartSeries.forEach((s, index) => {
       const color = colors[index % colors.length];
       const api = this.chart!.addSeries(this.lcBundle!.AreaSeries, {
-        topColor: this.hslToRgba(color, isDark ? 0.2 : 0.3),
+        topColor: this.hslToRgba(color, isDark ? 0.4 : 0.5),
         bottomColor: this.hslToRgba(color, 0),
         lineColor: color,
         lineWidth: 2,
@@ -218,6 +225,23 @@ export class DeesChartArea extends DeesElement {
 
       this.seriesApis.set(s.name || `series-${index}`, api);
     });
+    this.computeStats(chartSeries);
+  }
+
+  private computeStats(chartSeries: ChartSeriesConfig) {
+    const isDark = !this.goBright;
+    const colors = this.getSeriesColors(isDark);
+    this.seriesStats = chartSeries.map((s, index) => {
+      const values = s.data.map(d => d.y);
+      if (values.length === 0) {
+        return { name: s.name || `series-${index}`, latest: 0, min: 0, max: 0, avg: 0, color: colors[index % colors.length] };
+      }
+      const latest = values[values.length - 1];
+      const min = Math.min(...values);
+      const max = Math.max(...values);
+      const avg = Math.round((values.reduce((sum, v) => sum + v, 0) / values.length) * 100) / 100;
+      return { name: s.name || `series-${index}`, latest, min, max, avg, color: colors[index % colors.length] };
+    });
   }
 
   private updatePriceLines(name: string, api: ISeriesApi<any>, data: Array<{ x: any; y: number }>, color: string) {
@@ -348,8 +372,8 @@ export class DeesChartArea extends DeesElement {
           attributionLogo: false,
         },
         grid: {
-          vertLines: { visible: false },
-          horzLines: { color: isDark ? 'hsl(0 0% 14.9%)' : 'hsl(0 0% 94%)' },
+          vertLines: { color: isDark ? 'hsl(0 0% 8.5%)' : 'hsl(0 0% 95.5%)' },
+          horzLines: { color: isDark ? 'hsl(0 0% 8.5%)' : 'hsl(0 0% 95.5%)' },
         },
         rightPriceScale: {
           borderVisible: false,
@@ -468,6 +492,7 @@ export class DeesChartArea extends DeesElement {
             api.setData(this.convertDataToLC(filtered));
             this.updatePriceLines(name, api, filtered, colors[index % colors.length]);
           });
+          this.computeStats(newSeries);
         }
 
         try {
@@ -505,6 +530,7 @@ export class DeesChartArea extends DeesElement {
             api.setData(this.convertDataToLC(s.data));
             this.updatePriceLines(name, api, s.data, colors[index % colors.length]);
           });
+          this.computeStats(newSeries);
         }
       }
     } catch (error) {
@@ -554,6 +580,29 @@ export class DeesChartArea extends DeesElement {
     await this.resizeChart();
   }
 
+  public toggleFullPage() {
+    this.isFullPage = !this.isFullPage;
+    if (this.isFullPage) {
+      this.style.position = 'fixed';
+      this.style.inset = '0';
+      this.style.zIndex = '10000';
+      this.style.height = '100vh';
+      this.style.padding = '0';
+      document.body.style.overflow = 'hidden';
+    } else {
+      this.style.position = '';
+      this.style.inset = '';
+      this.style.zIndex = '';
+      this.style.height = '';
+      this.style.padding = '';
+      document.body.style.overflow = '';
+    }
+    // Give LC a tick to resize
+    requestAnimationFrame(() => {
+      this.chart?.timeScale().fitContent();
+    });
+  }
+
   private startAutoScroll() {
     if (this.autoScrollTimer) return;
     this.autoScrollTimer = window.setInterval(() => {

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

@@ -1,41 +1,91 @@
 import { css, cssManager } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
 
 export const chartAreaStyles = [
+    themeDefaultStyles,
     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%)')};
+        color: var(--dees-color-text-primary);
         font-size: 14px;
       }
-      .mainbox {
-        position: relative;
-        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;
+      dees-tile {
+        height: 100%;
       }
-      .chartTitle {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        text-align: left;
-        padding: 16px 24px;
-        z-index: 10;
+      .chartHeader {
+        display: flex;
+        align-items: center;
+        height: 32px;
+        padding: 0 8px 0 16px;
+      }
+      .chartLabel {
+        flex: 1;
         font-size: 14px;
         font-weight: 500;
         letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-secondary);
+      }
+      .expandBtn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        border: none;
+        border-radius: 4px;
+        background: transparent;
+        cursor: pointer;
+        color: var(--dees-color-text-muted);
+        transition: all 0.15s ease;
+        padding: 0;
+      }
+      .expandBtn:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
       }
       .chartContainer {
         position: absolute;
-        top: 44px;
-        left: 0;
-        bottom: 0;
-        right: 0;
+        inset: 0 0 4px 0;
+      }
+      .statsBar {
+        height: 32px;
+        padding: 0 16px;
+        display: flex;
+        align-items: center;
+        gap: 24px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+      .statsSeries {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .statsSeries + .statsSeries {
+        padding-left: 24px;
+        border-left: 1px solid var(--dees-color-border-default);
+      }
+      .statsColor {
+        width: 8px;
+        height: 8px;
+        border-radius: 2px;
+        flex-shrink: 0;
+      }
+      .statsName {
+        font-weight: 500;
+        font-size: 11px;
+        color: var(--dees-color-text-secondary);
+        margin-right: 4px;
+      }
+      .statsItem {
+        font-size: 11px;
+        color: var(--dees-color-text-muted);
+      }
+      .statsItem strong {
+        color: var(--dees-color-text-primary);
       }
       .lw-tooltip {
         position: absolute;

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">
-          <div class="chartTitle">${component.label}</div>
+        <dees-tile>
+          <div slot="header" class="chartHeader">
+            <span class="chartLabel">${component.label}</span>
+            <button class="expandBtn" @click=${() => component.toggleFullPage()} title="${component.isFullPage ? 'Exit full page' : 'Full page'}">
+              <dees-icon .icon=${component.isFullPage ? 'lucide:Minimize2' : 'lucide:Maximize2'} .iconSize=${14}></dees-icon>
+            </button>
+          </div>
           <div class="chartContainer"></div>
-        </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-bar/component.ts

@@ -0,0 +1,142 @@
+import {
+  customElement,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
+import { demoFunc } from './demo.js';
+import { barStyles } from './styles.js';
+import { renderChartBar } from './template.js';
+import { getEchartsSeriesColors, getThemeColors } from '../dees-chart-echarts-theme.js';
+
+export interface IBarSeriesItem {
+  name: string;
+  data: number[];
+  color?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-bar': DeesChartBar;
+  }
+}
+
+@customElement('dees-chart-bar')
+export class DeesChartBar extends DeesChartEchartsBase {
+  public static demo = demoFunc;
+  public static demoGroups = ['Chart'];
+
+  @property({ type: Array })
+  accessor categories: string[] = [];
+
+  @property({ type: Array })
+  accessor series: IBarSeriesItem[] = [];
+
+  @property({ type: Boolean })
+  accessor horizontal: boolean = false;
+
+  @property({ type: Boolean })
+  accessor stacked: boolean = false;
+
+  @property({ type: Boolean })
+  accessor showLegend: boolean = true;
+
+  @property({ attribute: false })
+  accessor valueFormatter: (value: number) => string = (val) => `${val}`;
+
+  public static styles = barStyles;
+
+  public render(): TemplateResult {
+    return renderChartBar(this);
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (
+      this.chartInstance &&
+      (changedProperties.has('categories') ||
+        changedProperties.has('series') ||
+        changedProperties.has('horizontal') ||
+        changedProperties.has('stacked') ||
+        changedProperties.has('showLegend'))
+    ) {
+      this.updateChart();
+    }
+  }
+
+  protected buildOption(): Record<string, any> {
+    const colors = getThemeColors(this.goBright);
+    const seriesColors = getEchartsSeriesColors(this.goBright);
+    const formatter = this.valueFormatter;
+
+    const categoryAxis: Record<string, any> = {
+      type: 'category',
+      data: this.categories,
+      axisLine: { lineStyle: { color: colors.borderStrong } },
+      axisLabel: { color: colors.textMuted },
+    };
+
+    const valueAxis: Record<string, any> = {
+      type: 'value',
+      axisLine: { show: false },
+      axisLabel: {
+        color: colors.textMuted,
+        formatter: (val: number) => formatter(val),
+      },
+      splitLine: { lineStyle: { color: colors.borderSubtle } },
+    };
+
+    const seriesData = this.series.map((s, index) => ({
+      name: s.name,
+      type: 'bar' as const,
+      data: s.data,
+      stack: this.stacked ? 'total' : undefined,
+      itemStyle: {
+        color: s.color || seriesColors[index % seriesColors.length],
+        borderRadius: this.stacked ? [0, 0, 0, 0] : this.horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0],
+      },
+      barMaxWidth: 40,
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 6,
+          shadowColor: 'rgba(0, 0, 0, 0.15)',
+        },
+      },
+    }));
+
+    // For stacked bars, round the top corners of the last visible series
+    if (this.stacked && seriesData.length > 0) {
+      const last = seriesData[seriesData.length - 1];
+      last.itemStyle.borderRadius = this.horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0];
+    }
+
+    return {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: { type: 'shadow' },
+        formatter: (params: any) => {
+          const items = Array.isArray(params) ? params : [params];
+          let result = `<strong>${items[0].axisValueLabel}</strong><br/>`;
+          for (const p of items) {
+            result += `${p.marker} ${p.seriesName}: <strong>${formatter(p.value)}</strong><br/>`;
+          }
+          return result;
+        },
+      },
+      legend: this.showLegend && this.series.length > 1
+        ? { bottom: 8, itemWidth: 10, itemHeight: 10 }
+        : { show: false },
+      grid: {
+        left: 16,
+        right: 16,
+        top: 16,
+        bottom: this.showLegend && this.series.length > 1 ? 40 : 16,
+        containLabel: true,
+      },
+      xAxis: this.horizontal ? valueAxis : categoryAxis,
+      yAxis: this.horizontal ? categoryAxis : valueAxis,
+      series: seriesData,
+    };
+  }
+}

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

@@ -0,0 +1,120 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { DeesChartBar } from './component.js';
+import '@design.estate/dees-wcctools/demotools';
+import './component.js';
+
+export const demoFunc = () => {
+  const endpointCategories = ['/api/users', '/api/orders', '/api/products', '/api/auth', '/api/search'];
+  const endpointSeries = [
+    { name: 'GET', data: [1240, 890, 720, 2100, 560] },
+    { name: 'POST', data: [320, 450, 180, 890, 40] },
+    { name: 'PUT', data: [90, 210, 150, 30, 10] },
+  ];
+
+  const regionCategories = ['US-East', 'US-West', 'EU', 'Asia', 'Other'];
+  const regionSeries = [
+    { name: 'Requests', data: [4500, 3200, 2800, 1900, 600] },
+  ];
+
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const vertChart = elementArg.querySelector('#vert-chart') as DeesChartBar;
+      const horizChart = elementArg.querySelector('#horiz-chart') as DeesChartBar;
+      const stackChart = elementArg.querySelector('#stack-chart') as DeesChartBar;
+
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button: any) => {
+        const text = button.text?.trim();
+        if (text === 'Randomize') {
+          button.addEventListener('click', () => {
+            vertChart.series = endpointSeries.map((s) => ({
+              ...s,
+              data: s.data.map((v) => Math.round(v * (0.5 + Math.random()))),
+            }));
+            horizChart.series = regionSeries.map((s) => ({
+              ...s,
+              data: s.data.map((v) => Math.round(v * (0.5 + Math.random()))),
+            }));
+            stackChart.series = endpointSeries.map((s) => ({
+              ...s,
+              data: s.data.map((v) => Math.round(v * (0.5 + Math.random()))),
+            }));
+          });
+        }
+      });
+    }}>
+      <style>
+        ${css`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .chartRow {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 24px;
+          }
+          .controls {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 8px;
+          }
+          .info {
+            color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+            font-size: 12px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Geist Sans', sans-serif;
+            text-align: center;
+            margin-top: 8px;
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <div class="controls">
+          <dees-button-group label="Actions:">
+            <dees-button>Randomize</dees-button>
+          </dees-button-group>
+        </div>
+
+        <div class="chartRow">
+          <dees-chart-bar
+            id="vert-chart"
+            .label=${'Requests by Endpoint'}
+            .categories=${endpointCategories}
+            .series=${endpointSeries}
+            .valueFormatter=${(val: number) => `${val} req`}
+          ></dees-chart-bar>
+
+          <dees-chart-bar
+            id="horiz-chart"
+            .label=${'Traffic by Region'}
+            .categories=${regionCategories}
+            .series=${regionSeries}
+            .horizontal=${true}
+            .valueFormatter=${(val: number) => `${(val / 1000).toFixed(1)}k`}
+          ></dees-chart-bar>
+        </div>
+
+        <dees-chart-bar
+          id="stack-chart"
+          .label=${'Stacked: Requests by Endpoint'}
+          .categories=${endpointCategories}
+          .series=${endpointSeries}
+          .stacked=${true}
+          .valueFormatter=${(val: number) => `${val} req`}
+        ></dees-chart-bar>
+
+        <div class="info">
+          Bar chart with vertical, horizontal, and stacked modes •
+          Click 'Randomize' to update data with animation
+        </div>
+      </div>
+    </dees-demowrapper>
+  `;
+};

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

@@ -0,0 +1,7 @@
+import { css } from '@design.estate/dees-element';
+import { echartsBaseStyles } from '../dees-chart-echarts-styles.js';
+
+export const barStyles = [
+  ...echartsBaseStyles,
+  css``,
+];

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

@@ -0,0 +1,13 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesChartBar } from './component.js';
+
+export const renderChartBar = (component: DeesChartBar): TemplateResult => {
+  return html`
+    <dees-tile>
+      <div slot="header" class="chartHeader">
+        <span class="chartLabel">${component.label}</span>
+      </div>
+      <div class="chartContainer"></div>
+    </dees-tile>
+  `;
+};

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

@@ -0,0 +1,132 @@
+import {
+  customElement,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
+import { demoFunc } from './demo.js';
+import { donutStyles } from './styles.js';
+import { renderChartDonut } from './template.js';
+import { getEchartsSeriesColors, getThemeColors } from '../dees-chart-echarts-theme.js';
+
+export interface IDonutDataItem {
+  name: string;
+  value: number;
+  color?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-donut': DeesChartDonut;
+  }
+}
+
+@customElement('dees-chart-donut')
+export class DeesChartDonut extends DeesChartEchartsBase {
+  public static demo = demoFunc;
+  public static demoGroups = ['Chart'];
+
+  @property({ type: Array })
+  accessor data: IDonutDataItem[] = [];
+
+  @property({ type: Boolean })
+  accessor showLegend: boolean = true;
+
+  @property({ type: Boolean })
+  accessor showLabels: boolean = true;
+
+  @property({ type: String })
+  accessor innerRadiusPercent: string = '55%';
+
+  @property({ attribute: false })
+  accessor valueFormatter: (value: number) => string = (val) => `${val}`;
+
+  public static styles = donutStyles;
+
+  public render(): TemplateResult {
+    return renderChartDonut(this);
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (
+      this.chartInstance &&
+      (changedProperties.has('data') ||
+        changedProperties.has('showLegend') ||
+        changedProperties.has('showLabels') ||
+        changedProperties.has('innerRadiusPercent'))
+    ) {
+      this.updateChart();
+    }
+  }
+
+  protected buildOption(): Record<string, any> {
+    const colors = getThemeColors(this.goBright);
+    const seriesColors = getEchartsSeriesColors(this.goBright);
+    const data = this.data.map((item, index) => ({
+      name: item.name,
+      value: item.value,
+      itemStyle: item.color ? { color: item.color } : { color: seriesColors[index % seriesColors.length] },
+    }));
+
+    const formatter = this.valueFormatter;
+
+    return {
+      tooltip: {
+        trigger: 'item',
+        formatter: (params: any) => {
+          return `${params.marker} ${params.name}: <strong>${formatter(params.value)}</strong> (${params.percent}%)`;
+        },
+      },
+      legend: this.showLegend
+        ? {
+            orient: 'vertical',
+            right: 16,
+            top: 'center',
+            itemWidth: 10,
+            itemHeight: 10,
+            itemGap: 12,
+            formatter: (name: string) => {
+              const item = this.data.find((d) => d.name === name);
+              return item ? `${name}  ${formatter(item.value)}` : name;
+            },
+          }
+        : { show: false },
+      series: [
+        {
+          type: 'pie',
+          radius: [this.innerRadiusPercent, '85%'],
+          center: this.showLegend ? ['35%', '50%'] : ['50%', '50%'],
+          avoidLabelOverlap: true,
+          itemStyle: {
+            borderRadius: 4,
+            borderColor: 'transparent',
+            borderWidth: 2,
+          },
+          label: this.showLabels
+            ? {
+                show: true,
+                formatter: '{b}: {d}%',
+                fontSize: 11,
+                color: colors.textSecondary,
+                textBorderColor: 'transparent',
+              }
+            : { show: false },
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.2)',
+            },
+            label: {
+              show: true,
+              fontWeight: 'bold',
+            },
+          },
+          data,
+        },
+      ],
+    };
+  }
+}

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

@@ -0,0 +1,127 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { DeesChartDonut } from './component.js';
+import '@design.estate/dees-wcctools/demotools';
+import './component.js';
+
+export const demoFunc = () => {
+  const diskData = [
+    { name: 'Documents', value: 42 },
+    { name: 'Media', value: 28 },
+    { name: 'Applications', value: 15 },
+    { name: 'System', value: 10 },
+    { name: 'Other', value: 5 },
+  ];
+
+  const statusData = [
+    { name: 'Healthy', value: 156 },
+    { name: 'Warning', value: 23 },
+    { name: 'Critical', value: 8 },
+    { name: 'Unknown', value: 3 },
+  ];
+
+  const trafficData = [
+    { name: 'API', value: 45200 },
+    { name: 'Static Assets', value: 23100 },
+    { name: 'WebSocket', value: 12800 },
+    { name: 'GraphQL', value: 8900 },
+  ];
+
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const diskChart = elementArg.querySelector('#disk-chart') as DeesChartDonut;
+      const statusChart = elementArg.querySelector('#status-chart') as DeesChartDonut;
+      const trafficChart = elementArg.querySelector('#traffic-chart') as DeesChartDonut;
+
+      // Wire up buttons
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button: any) => {
+        const text = button.text?.trim();
+        if (text === 'Randomize') {
+          button.addEventListener('click', () => {
+            diskChart.data = diskData.map((d) => ({
+              ...d,
+              value: Math.round(d.value * (0.5 + Math.random())),
+            }));
+            statusChart.data = statusData.map((d) => ({
+              ...d,
+              value: Math.round(d.value * (0.3 + Math.random() * 1.4)),
+            }));
+            trafficChart.data = trafficData.map((d) => ({
+              ...d,
+              value: Math.round(d.value * (0.5 + Math.random())),
+            }));
+          });
+        }
+      });
+    }}>
+      <style>
+        ${css`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .chartRow {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 24px;
+          }
+          .controls {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 8px;
+          }
+          .info {
+            color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+            font-size: 12px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Geist Sans', sans-serif;
+            text-align: center;
+            margin-top: 8px;
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <div class="controls">
+          <dees-button-group label="Actions:">
+            <dees-button>Randomize</dees-button>
+          </dees-button-group>
+        </div>
+
+        <div class="chartRow">
+          <dees-chart-donut
+            id="disk-chart"
+            .label=${'Disk Usage (GB)'}
+            .data=${diskData}
+            .valueFormatter=${(val: number) => `${val} GB`}
+          ></dees-chart-donut>
+
+          <dees-chart-donut
+            id="status-chart"
+            .label=${'Service Status'}
+            .data=${statusData}
+            .valueFormatter=${(val: number) => `${val} services`}
+            .innerRadiusPercent=${'0%'}
+          ></dees-chart-donut>
+        </div>
+
+        <dees-chart-donut
+          id="traffic-chart"
+          .label=${'Traffic Distribution'}
+          .data=${trafficData}
+          .valueFormatter=${(val: number) => `${(val / 1000).toFixed(1)}k req`}
+        ></dees-chart-donut>
+
+        <div class="info">
+          Donut chart with configurable inner radius (set to 0% for full pie) •
+          Click 'Randomize' to update data with animation
+        </div>
+      </div>
+    </dees-demowrapper>
+  `;
+};

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

@@ -0,0 +1,11 @@
+import { css, cssManager } from '@design.estate/dees-element';
+import { echartsBaseStyles } from '../dees-chart-echarts-styles.js';
+
+export const donutStyles = [
+  ...echartsBaseStyles,
+  css`
+    :host {
+      height: 360px;
+    }
+  `,
+];

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

@@ -0,0 +1,13 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesChartDonut } from './component.js';
+
+export const renderChartDonut = (component: DeesChartDonut): TemplateResult => {
+  return html`
+    <dees-tile>
+      <div slot="header" class="chartHeader">
+        <span class="chartLabel">${component.label}</span>
+      </div>
+      <div class="chartContainer"></div>
+    </dees-tile>
+  `;
+};

ts_web/elements/00group-chart/dees-chart-echarts-base.ts

@@ -0,0 +1,107 @@
+import {
+  DeesElement,
+  property,
+  html,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { DeesServiceLibLoader, type IEchartsBundle, type IEchartsInstance } from '../../services/index.js';
+import { getEchartsThemeOptions } from './dees-chart-echarts-theme.js';
+import '../00group-layout/dees-tile/dees-tile.js';
+
+/**
+ * Abstract base class for ECharts-based chart components.
+ * Handles library loading, chart lifecycle, resize observation, and theme switching.
+ * Subclasses implement `buildOption()` to define their chart configuration.
+ */
+export abstract class DeesChartEchartsBase extends DeesElement {
+  @property()
+  accessor label: string = 'Untitled Chart';
+
+  protected chartInstance: IEchartsInstance | null = null;
+  protected echartsBundle: IEchartsBundle | null = null;
+  private resizeObserver: ResizeObserver | null = null;
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+    this.registerGarbageFunction(async () => {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+        this.resizeObserver = null;
+      }
+      if (this.chartInstance) {
+        try {
+          this.chartInstance.dispose();
+          this.chartInstance = null;
+        } catch (e) {
+          console.error('Error disposing ECharts instance:', e);
+        }
+      }
+    });
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <dees-tile>
+        <div slot="header" class="chartHeader">
+          <span class="chartLabel">${this.label}</span>
+        </div>
+        <div class="chartContainer"></div>
+      </dees-tile>
+    `;
+  }
+
+  public async firstUpdated() {
+    await this.domtoolsPromise;
+    this.echartsBundle = await DeesServiceLibLoader.getInstance().loadEcharts();
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    const chartContainer = this.shadowRoot!.querySelector('.chartContainer') as HTMLDivElement;
+    if (!chartContainer) return;
+
+    try {
+      this.chartInstance = this.echartsBundle.init(chartContainer);
+      this.updateChart();
+
+      this.resizeObserver = new ResizeObserver(() => {
+        this.chartInstance?.resize();
+      });
+      this.resizeObserver.observe(chartContainer);
+    } catch (error) {
+      console.error('Failed to initialize ECharts:', error);
+    }
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('goBright') && this.chartInstance) {
+      this.applyTheme();
+    }
+  }
+
+  protected abstract buildOption(): Record<string, any>;
+
+  protected updateChart(): void {
+    if (!this.chartInstance) return;
+    const themeOptions = getEchartsThemeOptions(this.goBright);
+    const chartOption = this.buildOption();
+    // Merge theme defaults with chart-specific options
+    const merged = {
+      ...themeOptions,
+      ...chartOption,
+      textStyle: { ...themeOptions.textStyle, ...(chartOption.textStyle || {}) },
+      tooltip: { ...themeOptions.tooltip, ...(chartOption.tooltip || {}) },
+    };
+    this.chartInstance.setOption(merged, true);
+  }
+
+  protected applyTheme(): void {
+    this.updateChart();
+  }
+
+  public async forceResize(): Promise<void> {
+    this.chartInstance?.resize();
+  }
+}

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

@@ -0,0 +1,36 @@
+import { css, cssManager } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../00theme.js';
+
+export const echartsBaseStyles = [
+  themeDefaultStyles,
+  cssManager.defaultStyles,
+  css`
+    :host {
+      display: block;
+      height: 400px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+      color: var(--dees-color-text-primary);
+      font-size: 14px;
+    }
+    dees-tile {
+      height: 100%;
+    }
+    .chartHeader {
+      display: flex;
+      align-items: center;
+      height: 32px;
+      padding: 0 8px 0 16px;
+    }
+    .chartLabel {
+      flex: 1;
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: -0.01em;
+      color: var(--dees-color-text-secondary);
+    }
+    .chartContainer {
+      position: absolute;
+      inset: 0;
+    }
+  `,
+];

ts_web/elements/00group-chart/dees-chart-echarts-theme.ts

@@ -0,0 +1,72 @@
+/**
+ * Shared theme utilities for ECharts-based chart components.
+ * Uses the centralized themeDefaults tokens so chart colors stay in sync
+ * with the rest of the dees-catalog design system.
+ *
+ * ECharts renders on <canvas> and cannot read CSS custom properties,
+ * so we reference the TypeScript source-of-truth (themeDefaults) directly.
+ */
+
+import { themeDefaults } from '../00theme.js';
+
+const light = themeDefaults.colors.light;
+const dark = themeDefaults.colors.dark;
+
+const SERIES_COLORS = {
+  dark: [
+    dark.accentPrimary,       // blue
+    'hsl(173.4 80.4% 40%)',   // teal (no token yet)
+    'hsl(280.3 87.4% 66.7%)', // purple (no token yet)
+    dark.accentWarning,       // orange/amber
+    dark.accentSuccess,       // green
+    dark.accentError,         // rose/red
+  ],
+  light: [
+    light.accentPrimary,
+    'hsl(142.1 76.2% 36.3%)',  // teal (no token yet)
+    'hsl(280.3 47.7% 50.2%)',  // purple (no token yet)
+    light.accentWarning,
+    light.accentSuccess,
+    light.accentError,
+  ],
+};
+
+export function getEchartsSeriesColors(goBright: boolean): string[] {
+  return goBright ? SERIES_COLORS.light : SERIES_COLORS.dark;
+}
+
+export function getEchartsThemeOptions(goBright: boolean): Record<string, any> {
+  const colors = goBright ? light : dark;
+  return {
+    backgroundColor: 'transparent',
+    textStyle: {
+      color: colors.textSecondary,
+      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+      fontSize: 12,
+    },
+    color: goBright ? SERIES_COLORS.light : SERIES_COLORS.dark,
+    tooltip: {
+      backgroundColor: colors.bgPrimary,
+      borderColor: colors.borderDefault,
+      textStyle: {
+        color: colors.textPrimary,
+        fontSize: 12,
+      },
+      confine: true,
+    },
+    legend: {
+      textStyle: {
+        color: colors.textSecondary,
+        fontSize: 12,
+      },
+    },
+  };
+}
+
+/**
+ * Helper to get the resolved theme colors object for use in buildOption().
+ * Components can use this instead of hardcoding dark/light color values.
+ */
+export function getThemeColors(goBright: boolean) {
+  return goBright ? light : dark;
+}

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

@@ -0,0 +1,161 @@
+import {
+  customElement,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
+import { demoFunc } from './demo.js';
+import { gaugeStyles } from './styles.js';
+import { renderChartGauge } from './template.js';
+import { getEchartsSeriesColors, getThemeColors } from '../dees-chart-echarts-theme.js';
+
+export interface IGaugeThreshold {
+  value: number;
+  color: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-gauge': DeesChartGauge;
+  }
+}
+
+@customElement('dees-chart-gauge')
+export class DeesChartGauge extends DeesChartEchartsBase {
+  public static demo = demoFunc;
+  public static demoGroups = ['Chart'];
+
+  @property({ type: Number })
+  accessor value: number = 0;
+
+  @property({ type: Number })
+  accessor min: number = 0;
+
+  @property({ type: Number })
+  accessor max: number = 100;
+
+  @property({ type: String })
+  accessor unit: string = '%';
+
+  @property({ type: Array })
+  accessor thresholds: IGaugeThreshold[] = [];
+
+  @property({ type: Boolean })
+  accessor showTicks: boolean = true;
+
+  public static styles = gaugeStyles;
+
+  public render(): TemplateResult {
+    return renderChartGauge(this);
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (
+      this.chartInstance &&
+      (changedProperties.has('value') ||
+        changedProperties.has('min') ||
+        changedProperties.has('max') ||
+        changedProperties.has('unit') ||
+        changedProperties.has('thresholds') ||
+        changedProperties.has('showTicks'))
+    ) {
+      this.updateChart();
+    }
+  }
+
+  protected buildOption(): Record<string, any> {
+    const colors = getThemeColors(this.goBright);
+    const seriesColors = getEchartsSeriesColors(this.goBright);
+    const primaryColor = seriesColors[0];
+
+    // Build axis line color stops from thresholds
+    let axisLineColors: Array<[number, string]>;
+    if (this.thresholds.length > 0) {
+      const sorted = [...this.thresholds].sort((a, b) => a.value - b.value);
+      axisLineColors = sorted.map((t) => [
+        (t.value - this.min) / (this.max - this.min),
+        t.color,
+      ]);
+      // Ensure we end at 1
+      if (axisLineColors[axisLineColors.length - 1][0] < 1) {
+        axisLineColors.push([1, sorted[sorted.length - 1].color]);
+      }
+    } else {
+      axisLineColors = [[1, primaryColor]];
+    }
+
+    return {
+      series: [
+        {
+          type: 'gauge',
+          min: this.min,
+          max: this.max,
+          startAngle: 220,
+          endAngle: -40,
+          progress: {
+            show: true,
+            width: 14,
+            roundCap: true,
+          },
+          pointer: {
+            show: true,
+            length: '60%',
+            width: 5,
+            itemStyle: {
+              color: 'auto',
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              width: 14,
+              color: axisLineColors,
+              opacity: 0.3,
+            },
+          },
+          axisTick: {
+            show: this.showTicks,
+            distance: -20,
+            length: 6,
+            lineStyle: {
+              color: colors.borderStrong,
+              width: 1,
+            },
+          },
+          splitLine: {
+            show: this.showTicks,
+            distance: -24,
+            length: 10,
+            lineStyle: {
+              color: colors.textMuted,
+              width: 2,
+            },
+          },
+          axisLabel: {
+            show: this.showTicks,
+            distance: 30,
+            color: colors.textMuted,
+            fontSize: 11,
+          },
+          detail: {
+            valueAnimation: true,
+            fontSize: 28,
+            fontWeight: 600,
+            offsetCenter: [0, '65%'],
+            color: colors.textPrimary,
+            formatter: `{value}${this.unit}`,
+          },
+          title: {
+            show: false,
+          },
+          data: [
+            {
+              value: this.value,
+            },
+          ],
+        },
+      ],
+    };
+  }
+}

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

@@ -0,0 +1,125 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { DeesChartGauge } from './component.js';
+import '@design.estate/dees-wcctools/demotools';
+import './component.js';
+
+export const demoFunc = () => {
+  const defaultThresholds = [
+    { value: 60, color: 'hsl(142 76% 36%)' },
+    { value: 80, color: 'hsl(38 92% 50%)' },
+    { value: 100, color: 'hsl(0 72% 50%)' },
+  ];
+
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const cpuGauge = elementArg.querySelector('#cpu-gauge') as DeesChartGauge;
+      const memGauge = elementArg.querySelector('#mem-gauge') as DeesChartGauge;
+      const slaGauge = elementArg.querySelector('#sla-gauge') as DeesChartGauge;
+
+      let animInterval: number | null = null;
+
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button: any) => {
+        const text = button.text?.trim();
+        if (text === 'Animate') {
+          button.addEventListener('click', () => {
+            if (animInterval) return;
+            animInterval = window.setInterval(() => {
+              cpuGauge.value = Math.round(30 + Math.random() * 60);
+              memGauge.value = Math.round(40 + Math.random() * 50);
+              slaGauge.value = Math.round((95 + Math.random() * 5) * 100) / 100;
+            }, 2000);
+          });
+        } else if (text === 'Stop') {
+          button.addEventListener('click', () => {
+            if (animInterval) {
+              window.clearInterval(animInterval);
+              animInterval = null;
+            }
+          });
+        } else if (text === 'Spike') {
+          button.addEventListener('click', () => {
+            cpuGauge.value = 95;
+            memGauge.value = 88;
+            slaGauge.value = 96.5;
+          });
+        }
+      });
+    }}>
+      <style>
+        ${css`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .gaugeRow {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            gap: 24px;
+          }
+          .controls {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 8px;
+          }
+          .info {
+            color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+            font-size: 12px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Geist Sans', sans-serif;
+            text-align: center;
+            margin-top: 8px;
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <div class="controls">
+          <dees-button-group label="Actions:">
+            <dees-button>Animate</dees-button>
+            <dees-button>Stop</dees-button>
+            <dees-button>Spike</dees-button>
+          </dees-button-group>
+        </div>
+
+        <div class="gaugeRow">
+          <dees-chart-gauge
+            id="cpu-gauge"
+            .label=${'CPU Usage'}
+            .value=${42}
+            .unit=${'%'}
+            .thresholds=${defaultThresholds}
+          ></dees-chart-gauge>
+
+          <dees-chart-gauge
+            id="mem-gauge"
+            .label=${'Memory Usage'}
+            .value=${67}
+            .unit=${'%'}
+            .thresholds=${defaultThresholds}
+          ></dees-chart-gauge>
+
+          <dees-chart-gauge
+            id="sla-gauge"
+            .label=${'SLA Uptime'}
+            .value=${99.8}
+            .min=${95}
+            .max=${100}
+            .unit=${'%'}
+            .showTicks=${true}
+          ></dees-chart-gauge>
+        </div>
+
+        <div class="info">
+          Gauge chart with animated value transitions and threshold coloring •
+          Click 'Animate' for live updates, 'Spike' to simulate high load
+        </div>
+      </div>
+    </dees-demowrapper>
+  `;
+};

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

@@ -0,0 +1,11 @@
+import { css } from '@design.estate/dees-element';
+import { echartsBaseStyles } from '../dees-chart-echarts-styles.js';
+
+export const gaugeStyles = [
+  ...echartsBaseStyles,
+  css`
+    :host {
+      height: 320px;
+    }
+  `,
+];

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

@@ -0,0 +1,13 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesChartGauge } from './component.js';
+
+export const renderChartGauge = (component: DeesChartGauge): TemplateResult => {
+  return html`
+    <dees-tile>
+      <div slot="header" class="chartHeader">
+        <span class="chartLabel">${component.label}</span>
+      </div>
+      <div class="chartContainer"></div>
+    </dees-tile>
+  `;
+};

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,37 +104,27 @@ 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%)')};
+        color: var(--dees-color-text-primary);
       }
 
-      .mainbox {
-        position: relative;
-        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;
+      dees-tile {
+        height: 100%;
       }
 
       .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;
       }
 
       .title {
         font-weight: 500;
         font-size: 14px;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        color: var(--dees-color-text-primary);
         white-space: nowrap;
       }
 
@@ -150,10 +141,10 @@ export class DeesChartLog extends DeesElement {
         flex: 1;
         padding: 4px 8px;
         font-size: 12px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        background: var(--dees-color-bg-primary);
+        color: var(--dees-color-text-primary);
         outline: none;
       }
 
@@ -162,7 +153,7 @@ export class DeesChartLog extends DeesElement {
       }
 
       .search-box input::placeholder {
-        color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+        color: var(--dees-color-text-muted);
       }
 
       .search-nav {
@@ -173,35 +164,35 @@ export class DeesChartLog extends DeesElement {
       .search-nav button {
         padding: 4px 6px;
         font-size: 11px;
-        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%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 3px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         cursor: pointer;
         line-height: 1;
       }
 
       .search-nav button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
       .filter-toggle {
         padding: 4px 8px;
         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%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         cursor: pointer;
         transition: all 0.15s;
         white-space: nowrap;
       }
 
       .filter-toggle:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
       .filter-toggle.active {
@@ -217,11 +208,11 @@ export class DeesChartLog extends DeesElement {
       }
 
       .control-button {
-        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%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
         padding: 4px 10px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         cursor: pointer;
         font-size: 12px;
         font-weight: 500;
@@ -229,9 +220,9 @@ export class DeesChartLog extends DeesElement {
       }
 
       .control-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 25%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        border-color: var(--dees-color-border-strong);
+        color: var(--dees-color-text-primary);
       }
 
       .control-button.active {
@@ -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 {
@@ -256,20 +247,21 @@ export class DeesChartLog extends DeesElement {
         align-items: center;
         justify-content: center;
         height: 100%;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         font-style: italic;
         font-size: 13px;
       }
 
       .metrics-bar {
-        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%)')};
-        padding: 6px 12px;
+        height: 32px;
+        padding: 0 12px;
         display: flex;
+        align-items: center;
         gap: 16px;
         font-size: 11px;
         font-weight: 500;
-        flex-shrink: 0;
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .metric {
@@ -307,7 +299,7 @@ export class DeesChartLog extends DeesElement {
 
       .metric.rate {
         margin-left: auto;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
       }
 
       .metric.rate::before {
@@ -323,8 +315,8 @@ export class DeesChartLog extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="mainbox">
-        <div class="header">
+      <dees-tile .heading=${this.label}>
+        <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>
     `;
   }
 
@@ -466,6 +458,9 @@ export class DeesChartLog extends DeesElement {
 
   public updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
+    if (changedProperties.has('goBright') && this.terminal) {
+      this.terminal.options.theme = this.getTerminalTheme();
+    }
     if (changedProperties.has('logEntries') && this.terminalReady && this.logEntries.length > 0) {
       const oldEntries: ILogEntry[] = changedProperties.get('logEntries') || [];
       const newEntries = this.logEntries;
@@ -512,7 +507,7 @@ export class DeesChartLog extends DeesElement {
   }
 
   private getTerminalTheme() {
-    const isDark = this.domtoolsInstance?.themeManager?.isDarkMode ?? true;
+    const isDark = !this.goBright;
     return isDark
       ? {
           background: '#0a0a0a',

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

@@ -0,0 +1,130 @@
+import {
+  customElement,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import { DeesChartEchartsBase } from '../dees-chart-echarts-base.js';
+import { demoFunc } from './demo.js';
+import { radarStyles } from './styles.js';
+import { renderChartRadar } from './template.js';
+import { getEchartsSeriesColors, getThemeColors } from '../dees-chart-echarts-theme.js';
+
+export interface IRadarIndicator {
+  name: string;
+  max: number;
+}
+
+export interface IRadarSeriesItem {
+  name: string;
+  values: number[];
+  color?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-radar': DeesChartRadar;
+  }
+}
+
+@customElement('dees-chart-radar')
+export class DeesChartRadar extends DeesChartEchartsBase {
+  public static demo = demoFunc;
+  public static demoGroups = ['Chart'];
+
+  @property({ type: Array })
+  accessor indicators: IRadarIndicator[] = [];
+
+  @property({ type: Array })
+  accessor series: IRadarSeriesItem[] = [];
+
+  @property({ type: Boolean })
+  accessor showLegend: boolean = true;
+
+  @property({ type: Boolean })
+  accessor fillArea: boolean = true;
+
+  public static styles = radarStyles;
+
+  public render(): TemplateResult {
+    return renderChartRadar(this);
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (
+      this.chartInstance &&
+      (changedProperties.has('indicators') ||
+        changedProperties.has('series') ||
+        changedProperties.has('showLegend') ||
+        changedProperties.has('fillArea'))
+    ) {
+      this.updateChart();
+    }
+  }
+
+  protected buildOption(): Record<string, any> {
+    const colors = getThemeColors(this.goBright);
+    const seriesColors = getEchartsSeriesColors(this.goBright);
+
+    const seriesData = this.series.map((s, index) => {
+      const color = s.color || seriesColors[index % seriesColors.length];
+      return {
+        name: s.name,
+        value: s.values,
+        itemStyle: { color },
+        lineStyle: { color, width: 2 },
+        areaStyle: this.fillArea ? { color, opacity: 0.15 } : undefined,
+        symbol: 'circle',
+        symbolSize: 6,
+      };
+    });
+
+    return {
+      tooltip: {
+        trigger: 'item',
+      },
+      legend: this.showLegend && this.series.length > 1
+        ? { bottom: 8, itemWidth: 10, itemHeight: 10 }
+        : { show: false },
+      radar: {
+        indicator: this.indicators.map((ind) => ({
+          name: ind.name,
+          max: ind.max,
+        })),
+        shape: 'polygon',
+        splitNumber: 4,
+        axisName: {
+          color: colors.textSecondary,
+          fontSize: 11,
+        },
+        splitArea: {
+          areaStyle: {
+            color: [colors.bgTertiary, colors.bgSecondary],
+          },
+        },
+        splitLine: {
+          lineStyle: {
+            color: colors.borderDefault,
+          },
+        },
+        axisLine: {
+          lineStyle: {
+            color: colors.borderDefault,
+          },
+        },
+      },
+      series: [
+        {
+          type: 'radar',
+          data: seriesData,
+          emphasis: {
+            lineStyle: {
+              width: 3,
+            },
+          },
+        },
+      ],
+    };
+  }
+}

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

@@ -0,0 +1,119 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { DeesChartRadar } from './component.js';
+import '@design.estate/dees-wcctools/demotools';
+import './component.js';
+
+export const demoFunc = () => {
+  const indicators = [
+    { name: 'Latency', max: 100 },
+    { name: 'Throughput', max: 100 },
+    { name: 'Availability', max: 100 },
+    { name: 'Error Rate', max: 100 },
+    { name: 'Saturation', max: 100 },
+    { name: 'Security', max: 100 },
+  ];
+
+  const series = [
+    { name: 'Service A', values: [85, 90, 99, 12, 45, 78] },
+    { name: 'Service B', values: [70, 65, 95, 28, 60, 90] },
+  ];
+
+  const singleIndicators = [
+    { name: 'Speed', max: 10 },
+    { name: 'Reliability', max: 10 },
+    { name: 'Comfort', max: 10 },
+    { name: 'Safety', max: 10 },
+    { name: 'Cost', max: 10 },
+  ];
+
+  const singleSeries = [
+    { name: 'Rating', values: [8.5, 9.2, 7.0, 9.5, 6.0] },
+  ];
+
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const compChart = elementArg.querySelector('#comparison-chart') as DeesChartRadar;
+      const singleChart = elementArg.querySelector('#single-chart') as DeesChartRadar;
+
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button: any) => {
+        const text = button.text?.trim();
+        if (text === 'Randomize') {
+          button.addEventListener('click', () => {
+            compChart.series = series.map((s) => ({
+              ...s,
+              values: s.values.map(() => Math.round(20 + Math.random() * 80)),
+            }));
+            singleChart.series = singleSeries.map((s) => ({
+              ...s,
+              values: s.values.map(() => Math.round((2 + Math.random() * 8) * 10) / 10),
+            }));
+          });
+        }
+      });
+    }}>
+      <style>
+        ${css`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .chartRow {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 24px;
+          }
+          .controls {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 8px;
+          }
+          .info {
+            color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+            font-size: 12px;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Geist Sans', sans-serif;
+            text-align: center;
+            margin-top: 8px;
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <div class="controls">
+          <dees-button-group label="Actions:">
+            <dees-button>Randomize</dees-button>
+          </dees-button-group>
+        </div>
+
+        <div class="chartRow">
+          <dees-chart-radar
+            id="comparison-chart"
+            .label=${'Service Health Comparison'}
+            .indicators=${indicators}
+            .series=${series}
+          ></dees-chart-radar>
+
+          <dees-chart-radar
+            id="single-chart"
+            .label=${'Product Rating'}
+            .indicators=${singleIndicators}
+            .series=${singleSeries}
+            .fillArea=${true}
+          ></dees-chart-radar>
+        </div>
+
+        <div class="info">
+          Radar chart for multi-dimensional comparison •
+          Supports multiple overlay series and configurable fill •
+          Click 'Randomize' to update data
+        </div>
+      </div>
+    </dees-demowrapper>
+  `;
+};

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

@@ -0,0 +1,7 @@
+import { css } from '@design.estate/dees-element';
+import { echartsBaseStyles } from '../dees-chart-echarts-styles.js';
+
+export const radarStyles = [
+  ...echartsBaseStyles,
+  css``,
+];

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

@@ -0,0 +1,13 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesChartRadar } from './component.js';
+
+export const renderChartRadar = (component: DeesChartRadar): TemplateResult => {
+  return html`
+    <dees-tile>
+      <div slot="header" class="chartHeader">
+        <span class="chartLabel">${component.label}</span>
+      </div>
+      <div class="chartContainer"></div>
+    </dees-tile>
+  `;
+};

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

@@ -1,3 +1,7 @@
 // Chart Components
 export * from './dees-chart-area/index.js';
+export * from './dees-chart-bar/index.js';
+export * from './dees-chart-donut/index.js';
+export * from './dees-chart-gauge/index.js';
 export * from './dees-chart-log/index.js';
+export * from './dees-chart-radar/index.js';

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

@@ -2,6 +2,7 @@ import { demoFunc } from './dees-dataview-codebox.demo.js';
 import {
   DeesElement,
   html,
+  css,
   customElement,
   type TemplateResult,
   property,
@@ -9,6 +10,7 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import { cssGeistFontFamily, cssMonoFontFamily } from '../../00fonts.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 import type { HLJSApi } from 'highlight.js';
 
@@ -17,6 +19,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 {
@@ -38,6 +41,11 @@ export class DeesDataviewCodebox extends DeesElement {
   })
   accessor codeToDisplay: string = '';
 
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+  ];
+
   constructor() {
     super();
   }
@@ -52,35 +60,21 @@ export class DeesDataviewCodebox extends DeesElement {
           text-align: left;
           font-size: 16px;
           font-family: ${cssGeistFontFamily};
-          height: 100%;
           box-sizing: border-box;
         }
-        .mainbox {
-          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;
+        dees-tile {
+          color: var(--dees-color-text-primary);
         }
 
         .appbar {
-          position: relative;
-          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-          background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
-          border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          color: var(--dees-color-text-muted);
           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 +85,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')};
+          color: var(--dees-color-text-muted);
           height: 28px;
-          font-size: 12px;
+          font-size: 11px;
           line-height: 28px;
           display: flex;
           justify-content: flex-end;
-          align-items: stretch;
-          overflow: hidden;
-          flex-shrink: 0;
+          align-items: center;
+          padding: 0 16px;
+          width: 100%;
+          box-sizing: border-box;
         }
 
         .spacesLabel {
@@ -130,15 +122,13 @@ export class DeesDataviewCodebox extends DeesElement {
           display: grid;
           grid-template-columns: 50px auto;
           overflow: auto;
-          flex: 1;
-          min-height: 0;
         }
 
         .lineNumbers {
-          color: ${cssManager.bdTheme('#71717a', '#52525b')};
+          color: var(--dees-color-text-muted);
           padding: 24px 16px 0px 0px;
           text-align: right;
-          border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          border-right: 1px solid var(--dees-color-border-default);
         }
 
         .lineCounter:last-child {
@@ -201,8 +191,7 @@ export class DeesDataviewCodebox extends DeesElement {
           color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         }
       </style>
-      <div
-        class="mainbox"
+      <dees-tile
         @contextmenu="${(eventArg: MouseEvent) => {
           DeesContextmenu.openContextMenuWithOptions(eventArg, [
             {
@@ -215,7 +204,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 +219,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 {
-        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%)')};
+      dees-tile {
+        color: var(--dees-color-text-primary);
         cursor: default;
-        overflow: hidden;
       }
 
       .heading {
-        display: grid;
+        display: flex;
         align-items: center;
-        grid-template-columns: 48px auto 100px;
-        height: 56px;
+        gap: 8px;
+        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;
-        padding: 0px 12px;
+        margin: 0;
+        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: var(--dees-color-text-secondary);
+        flex: 1;
       }
 
       .statusdot {
@@ -82,23 +76,23 @@ 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%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         text-align: center;
-        padding: 6px 12px;
-        border-radius: 6px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        padding: 4px 10px;
+        border-radius: 4px;
+        color: var(--dees-color-text-muted);
         user-select: none;
         cursor: pointer;
         transition: all 0.15s ease;
       }
 
       .copyMain:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        background: var(--dees-color-hover);
+        border-color: var(--dees-color-border-strong);
+        color: var(--dees-color-text-primary);
       }
 
       .copyMain:active {
@@ -122,63 +116,70 @@ export class DeesDataviewStatusobject extends DeesElement {
       }
 
       .detail {
-        min-height: 60px;
+        display: flex;
         align-items: center;
-        display: grid;
-        grid-template-columns: 48px auto;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 14.9%)')};
-        transition: background-color 0.15s ease;
+        gap: 10px;
+        height: 36px;
         padding: 0 16px;
+        border-bottom: 1px solid var(--dees-color-border-subtle);
+        transition: background-color 0.15s ease;
         cursor: context-menu;
       }
 
-      .detail:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+      .detail:last-child {
+        border-bottom: none;
       }
 
-      .detail:active {
-        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+      .detail:hover {
+        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;
-        word-break: break-all;
+        display: flex;
+        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;
+        color: var(--dees-color-text-muted);
         letter-spacing: -0.01em;
-      }
-
-      .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;
+        white-space: nowrap;
         flex-shrink: 0;
       }
 
-      .bottomBar .statusLabel {
-        padding: 0 16px;
+      .detail .detailsText .value {
+        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: var(--dees-color-text-muted);
+        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">
-        <div class="heading">
+      <dees-tile>
+        <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">
-                <div class="label">${detailArg.name}</div>
-                <div class="value">${detailArg.value}</div>
-              </div>
+              <span class="detailsText">
+                <span class="label">${detailArg.name}</span>
+                <span class="value">${detailArg.value}</span>
+              </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 {
@@ -159,7 +160,7 @@ export class DeesStatsGrid extends DeesElement {
       .grid-title {
         font-size: 16px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        color: var(--dees-color-text-primary);
         letter-spacing: -0.01em;
       }
 
@@ -179,40 +180,31 @@ export class DeesStatsGrid extends DeesElement {
         width: 100%;
       }
 
-      /* Tile Base Styles */
-      .stats-tile {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
-        border-radius: var(--border-radius);
-        padding: var(--tile-padding);
+      /* Tile Base Styles — frame provided by dees-tile, hover via ::part */
+      .stats-tile::part(outer) {
         transition: all var(--transition-duration) ease;
-        cursor: default;
-        position: relative;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
       }
 
-      .stats-tile:hover {
-        background: ${cssManager.bdTheme('#fafafa', '#0d0d0d')};
-        border-color: ${cssManager.bdTheme('#d0d0d0', '#2a2a2a')};
+      .stats-tile:hover::part(outer) {
+        border-color: var(--dees-color-border-strong);
       }
 
       .stats-tile.clickable {
         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;
-        margin-bottom: var(--header-spacing);
+        align-items: center;
+        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 */
@@ -288,7 +281,7 @@ export class DeesStatsGrid extends DeesElement {
 
       .gauge-background {
         fill: none;
-        stroke: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        stroke: var(--dees-color-border-default);
         stroke-width: 6;
       }
 
@@ -336,7 +329,7 @@ export class DeesStatsGrid extends DeesElement {
       .percentage-bar {
         width: 100%;
         height: 6px;
-        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        background: var(--dees-color-border-default);
         border-radius: 3px;
         overflow: hidden;
         margin-top: auto;
@@ -344,7 +337,7 @@ export class DeesStatsGrid extends DeesElement {
 
       .percentage-fill {
         height: 100%;
-        background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
+        background: var(--dees-color-text-muted);
         transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
         border-radius: 3px;
       }
@@ -393,14 +386,14 @@ export class DeesStatsGrid extends DeesElement {
       .multi-percentage-bar {
         width: 100%;
         height: 4px;
-        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        background: var(--dees-color-border-default);
         border-radius: 2px;
         overflow: hidden;
       }
 
       .multi-percentage-fill {
         height: 100%;
-        background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
+        background: var(--dees-color-text-muted);
         transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
         border-radius: 2px;
       }
@@ -471,7 +464,7 @@ export class DeesStatsGrid extends DeesElement {
       .cpu-core-bar-wrapper {
         flex: 1;
         width: 100%;
-        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        background: var(--dees-color-border-default);
         border-radius: 2px;
         position: relative;
         overflow: hidden;
@@ -484,21 +477,21 @@ export class DeesStatsGrid extends DeesElement {
         left: 0;
         right: 0;
         width: 100%;
-        background: ${cssManager.bdTheme('#666666', '#888888')};
+        background: var(--dees-color-text-muted);
         transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
         border-radius: 2px 2px 0 0;
       }
 
       .cpu-core-bar-fill.low {
-        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
+        background: var(--dees-color-accent-success);
       }
 
       .cpu-core-bar-fill.medium {
-        background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
+        background: var(--dees-color-accent-warning);
       }
 
       .cpu-core-bar-fill.high {
-        background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 84.2% 60.2%)')};
+        background: var(--dees-color-accent-error);
       }
 
       .cpu-core-label {
@@ -538,24 +531,24 @@ export class DeesStatsGrid extends DeesElement {
       .partition-bar {
         width: 100%;
         height: 6px;
-        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        background: var(--dees-color-border-default);
         border-radius: 3px;
         overflow: hidden;
       }
 
       .partition-bar-fill {
         height: 100%;
-        background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
+        background: var(--dees-color-text-muted);
         transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
         border-radius: 3px;
       }
 
       .partition-bar-fill.warning {
-        background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
+        background: var(--dees-color-accent-warning);
       }
 
       .partition-bar-fill.critical {
-        background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 84.2% 60.2%)')};
+        background: var(--dees-color-accent-error);
       }
 
       .partition-stats {
@@ -702,7 +695,7 @@ export class DeesStatsGrid extends DeesElement {
       .disk-health-bar {
         width: 100%;
         height: 4px;
-        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        background: var(--dees-color-border-default);
         border-radius: 2px;
         overflow: hidden;
       }
@@ -778,7 +771,7 @@ export class DeesStatsGrid extends DeesElement {
 
       .trend-line {
         fill: none;
-        stroke: ${cssManager.bdTheme('#999999', '#666666')};
+        stroke: var(--dees-color-text-muted);
         stroke-width: 1.5;
         stroke-linejoin: round;
         stroke-linecap: round;
@@ -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">
-        <!-- the heading part -->
-        <div class="header">
+      <dees-tile>
+        <div slot="header" 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 {
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+      dees-tile {
+        color: var(--dees-color-text-primary);
         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;
-        min-height: 64px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        padding: 0 16px;
+        height: 40px;
       }
 
       .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: var(--dees-color-text-secondary);
+        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,22 +65,22 @@ export const tableStyles: CSSResult[] = [
       .headerAction {
         display: flex;
         align-items: center;
-        gap: 6px;
-        padding: 6px 12px;
-        font-size: 14px;
+        gap: 4px;
+        padding: 4px 10px;
+        font-size: 12px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         background: transparent;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
+        border: 1px solid var(--dees-color-border-default);
+        border-radius: 4px;
         cursor: pointer;
         transition: all 0.15s ease;
       }
 
       .headerAction:hover {
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        color: var(--dees-color-text-primary);
+        background: var(--dees-color-hover);
+        border-color: var(--dees-color-border-strong);
       }
 
       .headerAction dees-icon {
@@ -98,8 +93,8 @@ export const tableStyles: CSSResult[] = [
         grid-gap: 16px;
         grid-template-columns: 1fr max-content;
         padding: 16px 24px;
-        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(0 0% 3.9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-secondary);
+        border-bottom: 1px solid var(--dees-color-border-default);
         transition: all 0.2s ease;
       }
 
@@ -162,7 +157,7 @@ export const tableStyles: CSSResult[] = [
       
       thead {
         background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        border-bottom: 1px solid var(--dees-color-border-strong);
       }
       :host([sticky-header]) thead th {
         position: sticky;
@@ -177,7 +172,7 @@ export const tableStyles: CSSResult[] = [
       
       /* Default horizontal lines (bottom border only) */
       tbody tr {
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-bottom: 1px solid var(--dees-color-border-default);
       }
       
       tbody tr:last-child {
@@ -186,8 +181,8 @@ export const tableStyles: CSSResult[] = [
       
       /* Full horizontal lines when enabled */
       :host([show-horizontal-lines]) tbody tr {
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-top: 1px solid var(--dees-color-border-default);
+        border-bottom: 1px solid var(--dees-color-border-default);
       }
       
       :host([show-horizontal-lines]) tbody tr:first-child {
@@ -195,11 +190,11 @@ export const tableStyles: CSSResult[] = [
       }
       
       :host([show-horizontal-lines]) tbody tr:last-child {
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-bottom: 1px solid var(--dees-color-border-default);
       }
       
       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;
@@ -227,41 +222,45 @@ export const tableStyles: CSSResult[] = [
       
       /* Grid mode - shows both vertical and horizontal lines */
       :host([show-grid]) th {
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-left: none;
         border-top: none;
       }
       
       :host([show-grid]) td {
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-left: none;
         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 {
         position: sticky;
         right: 0;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        background: var(--dees-color-bg-primary);
       }
       thead th.actionsCol { z-index: 3; }
       tbody td.actionsCol {
         z-index: 1;
-        box-shadow: -1px 0 0 0 ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        box-shadow: -1px 0 0 0 var(--dees-color-border-default);
       }
       
       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,42 +268,49 @@ export const tableStyles: CSSResult[] = [
       }
 
       th {
-        height: 48px;
-        padding: 12px 24px;
+        height: 36px;
+        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;
       }
       
       :host([show-vertical-lines]) th {
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-right: 1px solid var(--dees-color-border-default);
       }
       
       td {
-        padding: 12px 24px;
+        padding: 8px 16px;
         vertical-align: middle;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        font-size: 13px;
+        color: var(--dees-color-text-primary);
       }
       
       :host([show-vertical-lines]) td {
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-right: 1px solid var(--dees-color-border-default);
       }
       
       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;
@@ -321,10 +327,10 @@ export const tableStyles: CSSResult[] = [
         height: calc(100% - 8px);
         padding: 0 12px;
         outline: none;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 6px;
         background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
         font-family: inherit;
         font-size: inherit;
         font-weight: inherit;
@@ -349,9 +355,9 @@ export const tableStyles: CSSResult[] = [
         padding: 6px 8px;
         font-size: 13px;
         border-radius: 6px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
       }
       .actionsContainer {
         display: flex;
@@ -389,12 +395,12 @@ export const tableStyles: CSSResult[] = [
         display: flex;
         align-items: center;
         justify-content: space-between;
-        height: 52px;
-        padding: 0 24px;
-        font-size: 14px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        height: 32px;
+        padding: 0 16px;
+        font-size: 11px;
+        color: var(--dees-color-text-muted);
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .tableStatistics {
@@ -409,9 +415,10 @@ export const tableStyles: CSSResult[] = [
       .footerActions .footerAction {
         display: flex;
         align-items: center;
-        gap: 6px;
-        padding: 6px 12px;
+        gap: 4px;
+        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 {
-        display: flex;
-        flex-direction: column;
+      dees-tile {
         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;
-        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%)')};
+        padding: 4px 12px;
         gap: 8px;
       }
 
@@ -149,16 +142,16 @@ export class DeesInputCode extends DeesInputBase<string> {
         padding: 4px 10px;
         font-size: 12px;
         font-weight: 500;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 12%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
         cursor: pointer;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        color: var(--dees-color-text-secondary);
         transition: all 0.15s ease;
       }
 
       .language-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
+        background: var(--dees-color-hover);
       }
 
       .language-dropdown {
@@ -166,8 +159,8 @@ export class DeesInputCode extends DeesInputBase<string> {
         top: 100%;
         left: 0;
         margin-top: 4px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 6px;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
         z-index: 100;
@@ -180,16 +173,16 @@ export class DeesInputCode extends DeesInputBase<string> {
         padding: 8px 12px;
         font-size: 12px;
         cursor: pointer;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        color: var(--dees-color-text-secondary);
         transition: background 0.15s ease;
       }
 
       .language-option:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 15%)')};
+        background: var(--dees-color-hover);
       }
 
       .language-option.selected {
-        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-active);
       }
 
       .toolbar-button {
@@ -202,18 +195,18 @@ export class DeesInputCode extends DeesInputBase<string> {
         border: none;
         border-radius: 4px;
         cursor: pointer;
-        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 60%)')};
+        color: var(--dees-color-text-muted);
         transition: all 0.15s ease;
       }
 
       .toolbar-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 15%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
       }
 
       .toolbar-button.active {
-        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        background: var(--dees-color-active);
+        color: var(--dees-color-text-secondary);
       }
 
       .toolbar-button.success {
@@ -221,9 +214,8 @@ export class DeesInputCode extends DeesInputBase<string> {
       }
 
       .editor-wrapper {
-        position: relative;
-        flex: 1;
-        min-height: 0;
+        position: absolute;
+        inset: 0;
       }
 
       dees-workspace-monaco {
@@ -234,7 +226,7 @@ export class DeesInputCode extends DeesInputBase<string> {
       .toolbar-divider {
         width: 1px;
         height: 20px;
-        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-border-default);
         margin: 0 4px;
       }
 
@@ -256,8 +248,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">
-          <div class="toolbar">
+        <dees-tile>
+          <div slot="header" class="toolbar">
             <div class="toolbar-left">
               <div class="language-selector">
                 <button
@@ -322,7 +314,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 {
@@ -238,6 +239,7 @@ export class DeesInputRichtext extends DeesInputBase<string> {
     this.editorElement = this.shadowRoot!.querySelector('.editor-content')!;
     this.linkInputElement = this.shadowRoot!.querySelector('.link-input input')!;
     this.initializeEditor();
+    this.requestUpdate();
   }
 
   private initializeEditor(): void {

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

@@ -1,7 +1,9 @@
 import { css, cssManager } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 export const richtextStyles = [
+    themeDefaultStyles,
     ...DeesInputBase.baseStyles,
     cssManager.defaultStyles,
     css`
@@ -20,25 +22,18 @@ export const richtextStyles = [
         margin-bottom: 8px;
         font-size: 14px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        color: var(--dees-color-text-primary);
       }
 
-      .editor-container {
-        display: flex;
-        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);
+      dees-tile {
+        min-height: 200px;
       }
 
-      .editor-container:hover {
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+      dees-tile:hover::part(outer) {
+        border-color: var(--dees-color-border-strong);
       }
 
-      .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 +42,7 @@ export const richtextStyles = [
         display: flex;
         flex-wrap: wrap;
         gap: 4px;
-        padding: 8px 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%)')};
+        padding: 4px 12px;
         align-items: center;
         position: relative;
       }
@@ -77,8 +70,8 @@ export const richtextStyles = [
       }
 
       .toolbar-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
       .toolbar-button.active {
@@ -94,22 +87,24 @@ export const richtextStyles = [
       .toolbar-divider {
         width: 1px;
         height: 24px;
-        background: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-border-default);
         margin: 0 4px;
       }
 
       .editor-content {
-        flex: 1;
+        position: absolute;
+        inset: 0;
         padding: 16px;
         overflow-y: auto;
-        min-height: var(--min-height, 200px);
       }
 
       .editor-content .ProseMirror {
         outline: none;
         line-height: 1.6;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
         min-height: 100%;
+        white-space: pre-wrap;
+        word-wrap: break-word;
       }
 
       .editor-content .ProseMirror p {
@@ -156,7 +151,7 @@ export const richtextStyles = [
       }
 
       .editor-content .ProseMirror blockquote {
-        border-left: 4px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-left: 4px solid var(--dees-color-border-default);
         margin: 1em 0;
         padding-left: 1em;
         color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
@@ -164,12 +159,12 @@ export const richtextStyles = [
       }
 
       .editor-content .ProseMirror code {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-tertiary);
         border-radius: 3px;
         padding: 0.2em 0.4em;
         font-family: 'Intel One Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
         font-size: 0.9em;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        color: var(--dees-color-text-primary);
       }
 
       .editor-content .ProseMirror pre {
@@ -199,14 +194,15 @@ export const richtextStyles = [
       }
 
       .editor-footer {
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        font-size: 12px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        padding: 0 12px;
+        height: 28px;
+        font-size: 11px;
+        color: var(--dees-color-text-muted);
         display: flex;
         justify-content: space-between;
         align-items: center;
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .word-count {
@@ -219,8 +215,8 @@ export const richtextStyles = [
         top: 100%;
         left: 0;
         right: 0;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 6px;
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
         padding: 12px;
@@ -234,12 +230,12 @@ export const richtextStyles = [
       .link-input input {
         width: 100%;
         padding: 8px 12px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 6px;
         outline: none;
         font-size: 14px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        background: var(--dees-color-bg-primary);
+        color: var(--dees-color-text-primary);
         transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
       }
 
@@ -256,19 +252,19 @@ export const richtextStyles = [
 
       .link-input-buttons button {
         padding: 6px 12px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 4px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        background: var(--dees-color-bg-primary);
         cursor: pointer;
         font-size: 12px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
         transition: all 0.15s ease;
         font-weight: 500;
       }
 
       .link-input-buttons button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
       .link-input-buttons button.primary {
@@ -289,7 +285,7 @@ export const richtextStyles = [
         line-height: 1.4;
       }
 
-      :host([disabled]) .editor-container {
+      :host([disabled]) dees-tile {
         opacity: 0.6;
         cursor: not-allowed;
       }

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">
-            <div class="editor-toolbar">
+          <dees-tile class="${component.editor?.isFocused ? 'focused' : ''}" style="--min-height: ${component.minHeight}px">
+            <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-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: var(--dees-color-text-primary);
+      }
+
+      /* --- The frame --- */
+      .tile-outer {
+        position: relative;
+        flex: 1;
+        min-height: 0;
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
+        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: var(--dees-color-text-secondary);
+      }
+
+      /* --- Content: the rounded inset --- */
+      .tile-content {
+        flex: 1;
+        position: relative;
+        border-radius: 8px;
+        border-top: 1px solid var(--dees-color-border-subtle);
+        border-bottom: 1px solid var(--dees-color-border-subtle);
+        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-media/dees-pdf-viewer/component.ts

@@ -3,6 +3,7 @@ import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
 import { viewerStyles } from './styles.js';
 import { demo as demoFunc } from './demo.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -33,6 +34,9 @@ export class DeesPdfViewer extends DeesElement {
   @property({ type: Boolean })
   accessor showSidebar: boolean = false;
 
+  @property({ type: String })
+  accessor sidebarPosition: 'left' | 'right' = 'left';
+
   @property({ type: Number })
   accessor currentPage: number = 1;
 
@@ -54,6 +58,9 @@ export class DeesPdfViewer extends DeesElement {
   @property({ type: Array })
   accessor pageData: Array<{page: number, rendered: boolean, rendering: boolean, textLayerRendered: boolean}> = [];
 
+  @property({ type: Number })
+  accessor pdfFileSize: number = 0;
+
   private pdfDocument: any;
   private renderState: RenderState = 'idle';
   private renderAbortController: AbortController | null = null;
@@ -85,9 +92,9 @@ export class DeesPdfViewer extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <div class="pdf-viewer ${this.showSidebar ? 'with-sidebar' : ''}">
+      <dees-tile class="${this.showSidebar ? 'with-sidebar' : ''} sidebar-${this.sidebarPosition}">
         ${this.showToolbar ? html`
-          <div class="toolbar">
+          <div slot="header" class="toolbar">
             <div class="toolbar-group">
               <button
                 class="toolbar-button"
@@ -240,7 +247,23 @@ export class DeesPdfViewer extends DeesElement {
             `}
           </div>
         </div>
-      </div>
+        <div slot="footer" class="pdf-footer">
+          <div class="pdf-footer-left">
+            <span class="pdf-footer-item">Zoom ${Math.round(this.currentZoom * 100)}%</span>
+            ${this.pdfFileSize > 0 ? html`
+              <span class="pdf-footer-item">${this.formatFileSize(this.pdfFileSize)}</span>
+            ` : ''}
+          </div>
+          <div class="pdf-footer-center" style="margin-left: ${this.showSidebar && this.sidebarPosition === 'left' ? '100px' : this.showSidebar && this.sidebarPosition === 'right' ? '-100px' : '0'}">
+            <span>Page ${this.currentPage} of ${this.totalPages}</span>
+          </div>
+          <div class="pdf-footer-right">
+            ${this.pdfUrl ? html`
+              <span class="pdf-footer-filename">${this.pdfUrl.split('/').pop()}</span>
+            ` : ''}
+          </div>
+        </div>
+      </dees-tile>
     `;
   }
 
@@ -305,6 +328,12 @@ export class DeesPdfViewer extends DeesElement {
     }
   }
 
+  private formatFileSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  }
+
   private async loadPdf() {
     this.loading = true;
     this.renderState = 'loading';
@@ -323,6 +352,14 @@ export class DeesPdfViewer extends DeesElement {
       this.currentPage = this.initialPage;
       this.resolveInitialViewportMode();
 
+      // Get file size
+      try {
+        const data = await this.pdfDocument.getData();
+        this.pdfFileSize = data.length;
+      } catch (e) {
+        this.pdfFileSize = 0;
+      }
+
       // Initialize thumbnail and page data arrays
       this.thumbnailData = Array.from({length: this.totalPages}, (_, i) => ({
         page: i + 1,
@@ -699,8 +736,8 @@ export class DeesPdfViewer extends DeesElement {
       const viewerRect = this.viewerMain.getBoundingClientRect();
       const currentScrollTop = this.viewerMain.scrollTop;
 
-      // Calculate the target scroll position
-      const targetScrollTop = currentScrollTop + (pageRect.top - viewerRect.top) - this.viewerMain.clientTop;
+      // Calculate the target scroll position (offset by 16px so page doesn't touch the top edge)
+      const targetScrollTop = currentScrollTop + (pageRect.top - viewerRect.top) - this.viewerMain.clientTop - 16;
 
       // Scroll to the calculated position
       if (smooth) {

ts_web/elements/00group-media/dees-pdf-viewer/demo.ts

@@ -3,8 +3,8 @@ import { html } from '@design.estate/dees-element';
 export const demo = () => html`
   <style>
     .demo-container {
-      padding: 40px;
-      background: #f5f5f5;
+      padding: 20px;
+      background: #000000;
     }
 
     .demo-section {
@@ -15,6 +15,7 @@ export const demo = () => html`
       margin-bottom: 20px;
       font-size: 18px;
       font-weight: 600;
+      color: #fafafa;
     }
 
     dees-pdf-viewer {

ts_web/elements/00group-media/dees-pdf-viewer/styles.ts

@@ -1,6 +1,8 @@
 import { css, cssManager } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
 
 export const viewerStyles = [
+  themeDefaultStyles,
   cssManager.defaultStyles,
   css`
     :host {
@@ -12,25 +14,47 @@ export const viewerStyles = [
       contain: layout style;
     }
 
-    .pdf-viewer {
-      width: 100%;
+    dees-tile {
       height: 100%;
-      display: flex;
-      flex-direction: column;
-      background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(215 20% 10%)')};
-      position: relative;
-      overflow: hidden;
+    }
+
+    .viewer-container::before,
+    .viewer-container::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      height: 8px;
+      z-index: 5;
+      pointer-events: none;
+    }
+
+    .viewer-container::before {
+      top: 0;
+      background: linear-gradient(
+        to bottom,
+        ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 0% / 0.4)')},
+        ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 0% / 0.12)')},
+        transparent
+      );
+    }
+
+    .viewer-container::after {
+      bottom: 0;
+      background: linear-gradient(
+        to top,
+        ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 0% / 0.4)')},
+        ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 0% / 0.12)')},
+        transparent
+      );
     }
 
     .toolbar {
-      height: 48px;
-      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 15%)')};
-      border-bottom: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
+      height: 40px;
       display: flex;
       align-items: center;
-      padding: 0 16px;
-      gap: 16px;
-      flex-shrink: 0;
+      padding: 0 12px;
+      gap: 12px;
     }
 
     .toolbar-group {
@@ -108,21 +132,27 @@ export const viewerStyles = [
     }
 
     .viewer-container {
-      flex: 1;
+      position: absolute;
+      inset: 0;
       display: flex;
       overflow: hidden;
-      position: relative;
-      min-height: 0;
     }
 
     .sidebar {
       width: 200px;
-      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 15%)')};
+      background: transparent;
       border-right: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
       display: flex;
       flex-direction: column;
       height: 100%;
       overflow: hidden;
+      order: 0;
+    }
+
+    .sidebar-right .sidebar {
+      border-right: none;
+      border-left: 1px solid ${cssManager.bdTheme('hsl(214 31% 91%)', 'hsl(217 25% 22%)')};
+      order: 1;
     }
 
     .sidebar-header {
@@ -334,5 +364,52 @@ export const viewerStyles = [
     .pdf-viewer.with-sidebar .viewer-main {
       margin-left: 0;
     }
+
+    .pdf-footer {
+      height: 28px;
+      padding: 0 16px;
+      display: flex;
+      align-items: center;
+      font-size: 11px;
+      color: var(--dees-color-text-muted);
+      width: 100%;
+      box-sizing: border-box;
+      position: relative;
+    }
+
+    .pdf-footer-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .pdf-footer-left .pdf-footer-item + .pdf-footer-item {
+      padding-left: 12px;
+      border-left: 1px solid var(--dees-color-border-default);
+    }
+
+    .pdf-footer-center {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      font-weight: 500;
+      transition: margin-left 0.15s ease;
+    }
+
+    .pdf-footer-right {
+      margin-left: auto;
+    }
+
+    .pdf-footer-item {
+      white-space: nowrap;
+    }
+
+    .pdf-footer-filename {
+      font-family: 'Intel One Mono', 'Geist Mono', monospace;
+      opacity: 0.7;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
   `,
 ];

ts_web/elements/00group-media/dees-thumbnail-audio/component.ts

@@ -8,22 +8,22 @@ import {
   type TemplateResult,
   type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-tile-audio': DeesTileAudio;
+    'dees-thumbnail-audio': DeesThumbnailAudio;
   }
 }
 
-@customElement('dees-tile-audio')
-export class DeesTileAudio extends DeesTileBase {
+@customElement('dees-thumbnail-audio')
+export class DeesThumbnailAudio extends DeesThumbnailBase {
   public static demo = demo;
   public static demoGroups = ['Media'];
   public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
     css`
       .audio-content {
         position: relative;

ts_web/elements/00group-media/dees-thumbnail-audio/demo.ts

@@ -26,51 +26,51 @@ export const demo = () => html`
     <div class="demo-section">
       <h3>Audio Tiles</h3>
       <div class="tile-row">
-        <dees-tile-audio
+        <dees-thumbnail-audio
           src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
           title="SoundHelix Song 1"
           artist="T. Schuerger"
           label="soundhelix-1.mp3"
           @tile-click=${(e: CustomEvent) => console.log('Audio clicked:', e.detail)}
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>
 
-        <dees-tile-audio
+        <dees-thumbnail-audio
           src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3"
           title="SoundHelix Song 2"
           artist="T. Schuerger"
           label="soundhelix-2.mp3"
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>
 
-        <dees-tile-audio
+        <dees-thumbnail-audio
           src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3"
           title="SoundHelix Song 3"
           label="soundhelix-3.mp3"
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>
       </div>
     </div>
 
     <div class="demo-section">
       <h3>Size Variants</h3>
       <div class="tile-row">
-        <dees-tile-audio
+        <dees-thumbnail-audio
           size="small"
           src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
           title="Small"
           label="small.mp3"
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>
 
-        <dees-tile-audio
+        <dees-thumbnail-audio
           src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
           title="Default"
           label="default.mp3"
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>
 
-        <dees-tile-audio
+        <dees-thumbnail-audio
           size="large"
           src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
           title="Large"
           label="large.mp3"
-        ></dees-tile-audio>
+        ></dees-thumbnail-audio>
       </div>
     </div>
   </div>

ts_web/elements/00group-media/dees-thumbnail-folder/component.ts

@@ -7,11 +7,11 @@ import {
   type TemplateResult,
   type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';
 
-export interface ITileFolderItem {
+export interface IThumbnailFolderItem {
   type: 'pdf' | 'image' | 'audio' | 'video' | 'note' | 'folder' | 'unknown';
   thumbnailSrc?: string;
   name: string;
@@ -29,16 +29,16 @@ const TYPE_ICON_MAP: Record<string, string> = {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-tile-folder': DeesTileFolder;
+    'dees-thumbnail-folder': DeesThumbnailFolder;
   }
 }
 
-@customElement('dees-tile-folder')
-export class DeesTileFolder extends DeesTileBase {
+@customElement('dees-thumbnail-folder')
+export class DeesThumbnailFolder extends DeesThumbnailBase {
   public static demo = demo;
   public static demoGroups = ['Media'];
   public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
     css`
       .folder-content {
         position: relative;
@@ -116,7 +116,7 @@ export class DeesTileFolder extends DeesTileBase {
   accessor name: string = '';
 
   @property({ attribute: false })
-  accessor items: ITileFolderItem[] = [];
+  accessor items: IThumbnailFolderItem[] = [];
 
   protected renderTileContent(): TemplateResult {
     const previewItems = this.items.slice(0, 4);

ts_web/elements/00group-media/dees-thumbnail-folder/demo.ts

@@ -1,8 +1,8 @@
 import { html } from '@design.estate/dees-element';
-import type { ITileFolderItem } from './component.js';
+import type { IThumbnailFolderItem } from './component.js';
 
 export const demo = () => {
-  const photosFolder: ITileFolderItem[] = [
+  const photosFolder: IThumbnailFolderItem[] = [
     { type: 'image', name: 'sunset.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=1' },
     { type: 'image', name: 'mountain.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=2' },
     { type: 'image', name: 'ocean.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=3' },
@@ -11,7 +11,7 @@ export const demo = () => {
     { type: 'image', name: 'desert.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=6' },
   ];
 
-  const projectFolder: ITileFolderItem[] = [
+  const projectFolder: IThumbnailFolderItem[] = [
     { type: 'note', name: 'README.md' },
     { type: 'note', name: 'package.json' },
     { type: 'folder', name: 'src' },
@@ -21,16 +21,16 @@ export const demo = () => {
     { type: 'image', name: 'logo.png', thumbnailSrc: 'https://picsum.photos/100/100?random=10' },
   ];
 
-  const mediaFolder: ITileFolderItem[] = [
+  const mediaFolder: IThumbnailFolderItem[] = [
     { type: 'video', name: 'intro.mp4' },
     { type: 'audio', name: 'background.mp3' },
     { type: 'image', name: 'thumbnail.jpg', thumbnailSrc: 'https://picsum.photos/200/200?random=20' },
     { type: 'pdf', name: 'storyboard.pdf' },
   ];
 
-  const emptyFolder: ITileFolderItem[] = [];
+  const emptyFolder: IThumbnailFolderItem[] = [];
 
-  const singleItemFolder: ITileFolderItem[] = [
+  const singleItemFolder: IThumbnailFolderItem[] = [
     { type: 'pdf', name: 'report.pdf' },
   ];
 
@@ -60,61 +60,61 @@ export const demo = () => {
       <div class="demo-section">
         <h3>Folder Tiles</h3>
         <div class="tile-row">
-          <dees-tile-folder
+          <dees-thumbnail-folder
             name="Photos"
             .items=${photosFolder}
             label="6 photos"
             @tile-click=${(e: CustomEvent) => console.log('Folder clicked:', e.detail)}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
 
-          <dees-tile-folder
+          <dees-thumbnail-folder
             name="my-project"
             .items=${projectFolder}
             label="Project files"
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
 
-          <dees-tile-folder
+          <dees-thumbnail-folder
             name="Media Assets"
             .items=${mediaFolder}
             label="Mixed media"
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
         </div>
       </div>
 
       <div class="demo-section">
         <h3>Edge Cases</h3>
         <div class="tile-row">
-          <dees-tile-folder
+          <dees-thumbnail-folder
             name="Empty Folder"
             .items=${emptyFolder}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
 
-          <dees-tile-folder
+          <dees-thumbnail-folder
             name="Single Item"
             .items=${singleItemFolder}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
         </div>
       </div>
 
       <div class="demo-section">
         <h3>Size Variants</h3>
         <div class="tile-row">
-          <dees-tile-folder
+          <dees-thumbnail-folder
             size="small"
             name="Small"
             .items=${photosFolder}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
 
-          <dees-tile-folder
+          <dees-thumbnail-folder
             name="Default"
             .items=${photosFolder}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
 
-          <dees-tile-folder
+          <dees-thumbnail-folder
             size="large"
             name="Large"
             .items=${photosFolder}
-          ></dees-tile-folder>
+          ></dees-thumbnail-folder>
         </div>
       </div>
     </div>

ts_web/elements/00group-media/dees-thumbnail-image/component.ts

@@ -8,22 +8,22 @@ import {
   type TemplateResult,
   type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-tile-image': DeesTileImage;
+    'dees-thumbnail-image': DeesThumbnailImage;
   }
 }
 
-@customElement('dees-tile-image')
-export class DeesTileImage extends DeesTileBase {
+@customElement('dees-thumbnail-image')
+export class DeesThumbnailImage extends DeesThumbnailBase {
   public static demo = demo;
   public static demoGroups = ['Media'];
   public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
     css`
       .image-wrapper {
         position: relative;

ts_web/elements/00group-media/dees-thumbnail-image/demo.ts

@@ -26,59 +26,59 @@ export const demo = () => html`
     <div class="demo-section">
       <h3>Image Tiles</h3>
       <div class="tile-row">
-        <dees-tile-image
+        <dees-thumbnail-image
           src="https://picsum.photos/800/600"
           alt="Landscape photo"
           label="landscape.jpg"
           @tile-click=${(e: CustomEvent) => console.log('Image clicked:', e.detail)}
-        ></dees-tile-image>
+        ></dees-thumbnail-image>
 
-        <dees-tile-image
+        <dees-thumbnail-image
           src="https://picsum.photos/400/400"
           alt="Square photo"
           label="square.png"
-        ></dees-tile-image>
+        ></dees-thumbnail-image>
 
-        <dees-tile-image
+        <dees-thumbnail-image
           src="https://picsum.photos/300/900"
           alt="Portrait photo"
           label="portrait.webp"
-        ></dees-tile-image>
+        ></dees-thumbnail-image>
       </div>
     </div>
 
     <div class="demo-section">
       <h3>Size Variants</h3>
       <div class="tile-row">
-        <dees-tile-image
+        <dees-thumbnail-image
           size="small"
           src="https://picsum.photos/200/200"
           alt="Small"
           label="small.jpg"
-        ></dees-tile-image>
+        ></dees-thumbnail-image>
 
-        <dees-tile-image
+        <dees-thumbnail-image
           src="https://picsum.photos/600/400"
           alt="Default"
           label="default.jpg"
-        ></dees-tile-image>
+        ></dees-thumbnail-image>
 
-        <dees-tile-image
+        <dees-thumbnail-image
           size="large"
           src="https://picsum.photos/1200/800"
           alt="Large"
           label="large.jpg"
-        ></dees-tile-image>
+        ></dees-thumbnail-image>
       </div>
     </div>
 
     <div class="demo-section">
       <h3>Error State (broken URL)</h3>
-      <dees-tile-image
+      <dees-thumbnail-image
         src="https://invalid-url-that-does-not-exist.example/image.png"
         alt="Broken"
         label="broken.png"
-      ></dees-tile-image>
+      ></dees-thumbnail-image>
     </div>
   </div>
 `;

ts_web/elements/00group-media/dees-thumbnail-image/index.ts

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

ts_web/elements/00group-media/dees-thumbnail-note/component.ts

@@ -8,22 +8,22 @@ import {
   type TemplateResult,
   type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-tile-note': DeesTileNote;
+    'dees-thumbnail-note': DeesThumbnailNote;
   }
 }
 
-@customElement('dees-tile-note')
-export class DeesTileNote extends DeesTileBase {
+@customElement('dees-thumbnail-note')
+export class DeesThumbnailNote extends DeesThumbnailBase {
   public static demo = demo;
   public static demoGroups = ['Media'];
   public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
     css`
       .note-content {
         position: relative;

ts_web/elements/00group-media/dees-thumbnail-note/demo.ts

@@ -72,63 +72,63 @@ Action Items:
       <div class="demo-section">
         <h3>Note Tiles</h3>
         <div class="tile-row">
-          <dees-tile-note
+          <dees-thumbnail-note
             title="component.ts"
             .content=${sampleCode}
             language="typescript"
             label="component.ts"
             @tile-click=${(e: CustomEvent) => console.log('Note clicked:', e.detail)}
-          ></dees-tile-note>
+          ></dees-thumbnail-note>
 
-          <dees-tile-note
+          <dees-thumbnail-note
             title="Meeting Notes"
             .content=${sampleText}
             label="meeting-notes.txt"
-          ></dees-tile-note>
+          ></dees-thumbnail-note>
 
-          <dees-tile-note
+          <dees-thumbnail-note
             title="package.json"
             .content=${sampleJson}
             language="json"
             label="package.json"
-          ></dees-tile-note>
+          ></dees-thumbnail-note>
         </div>
       </div>
 
       <div class="demo-section">
         <h3>Size Variants</h3>
         <div class="tile-row">
-          <dees-tile-note
+          <dees-thumbnail-note
             size="small"
             title="small.ts"
             .content=${sampleCode}
             language="ts"
             label="small.ts"
-          ></dees-tile-note>
+          ></dees-thumbnail-note>
 
-          <dees-tile-note
+          <dees-thumbnail-note
             title="default.ts"
             .content=${sampleCode}
             language="ts"
             label="default.ts"
-          ></dees-tile-note>
+          ></dees-thumbnail-note>
 
-          <dees-tile-note
+          <dees-thumbnail-note
             size="large"
             title="large.ts"
             .content=${sampleCode}
             language="ts"
             label="large.ts"
-          ></dees-tile-note>
+          ></dees-thumbnail-note>
         </div>
       </div>
 
       <div class="demo-section">
         <h3>Without Title</h3>
-        <dees-tile-note
+        <dees-thumbnail-note
           .content=${sampleText}
           label="untitled.txt"
-        ></dees-tile-note>
+        ></dees-thumbnail-note>
       </div>
     </div>
   `;

ts_web/elements/00group-media/dees-thumbnail-note/index.ts

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

ts_web/elements/00group-media/dees-thumbnail-pdf/component.ts

@@ -1,6 +1,6 @@
 import { property, state, html, customElement, type TemplateResult, type CSSResult } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
 import { CanvasPool, type PooledCanvas } from '../dees-pdf-shared/CanvasPool.js';
 import { PerformanceMonitor, throttle, formatFileSize } from '../dees-pdf-shared/utils.js';
@@ -9,15 +9,15 @@ import { demo as demoFunc } from './demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-tile-pdf': DeesTilePdf;
+    'dees-thumbnail-pdf': DeesThumbnailPdf;
   }
 }
 
-@customElement('dees-tile-pdf')
-export class DeesTilePdf extends DeesTileBase {
+@customElement('dees-thumbnail-pdf')
+export class DeesThumbnailPdf extends DeesThumbnailBase {
   public static demo = demoFunc;
   public static demoGroups = ['Media', 'PDF'];
-  public static styles = [...tileBaseStyles, tilePdfStyles] as any;
+  public static styles = [...thumbnailBaseStyles, tilePdfStyles] as any;
 
   @property({ type: String })
   accessor pdfUrl: string = '';

ts_web/elements/00group-media/dees-thumbnail-pdf/demo.ts

@@ -11,7 +11,7 @@ export const demo = () => {
     for (let i = 0; i < count; i++) {
       const pdfUrl = samplePdfs[i % samplePdfs.length];
       items.push(html`
-        <dees-tile-pdf
+        <dees-thumbnail-pdf
           pdfUrl="${pdfUrl}"
           clickable="true"
           grid-mode
@@ -19,7 +19,7 @@ export const demo = () => {
             console.log('PDF Tile clicked:', e.detail);
             alert(`PDF clicked: ${e.detail.pageCount} pages`);
           }}
-        ></dees-tile-pdf>
+        ></dees-thumbnail-pdf>
       `);
     }
     return items;
@@ -67,56 +67,56 @@ export const demo = () => {
     <div class="demo-container">
       <div class="demo-section">
         <h3>Single PDF Tile</h3>
-        <dees-tile-pdf
+        <dees-thumbnail-pdf
           pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
           clickable="true"
-        ></dees-tile-pdf>
+        ></dees-thumbnail-pdf>
       </div>
 
       <div class="demo-section">
         <h3>Different Sizes</h3>
         <div class="preview-row">
           <div class="preview-label">Small:</div>
-          <dees-tile-pdf
+          <dees-thumbnail-pdf
             size="small"
             pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
             clickable="true"
-          ></dees-tile-pdf>
+          ></dees-thumbnail-pdf>
         </div>
 
         <div class="preview-row">
           <div class="preview-label">Default:</div>
-          <dees-tile-pdf
+          <dees-thumbnail-pdf
             pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
             clickable="true"
-          ></dees-tile-pdf>
+          ></dees-thumbnail-pdf>
         </div>
 
         <div class="preview-row">
           <div class="preview-label">Large:</div>
-          <dees-tile-pdf
+          <dees-thumbnail-pdf
             size="large"
             pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
             clickable="true"
-          ></dees-tile-pdf>
+          ></dees-thumbnail-pdf>
         </div>
       </div>
 
       <div class="demo-section">
         <h3>With Label</h3>
-        <dees-tile-pdf
+        <dees-thumbnail-pdf
           pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
           clickable="true"
           label="Research Paper.pdf"
-        ></dees-tile-pdf>
+        ></dees-thumbnail-pdf>
       </div>
 
       <div class="demo-section">
         <h3>Non-Clickable</h3>
-        <dees-tile-pdf
+        <dees-thumbnail-pdf
           pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf"
           clickable="false"
-        ></dees-tile-pdf>
+        ></dees-thumbnail-pdf>
       </div>
 
       <div class="demo-section">

ts_web/elements/00group-media/dees-thumbnail-pdf/index.ts

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

ts_web/elements/00group-media/dees-thumbnail-shared/DeesThumbnailBase.ts

@@ -5,11 +5,11 @@ import {
   type TemplateResult,
   type CSSResult,
 } from '@design.estate/dees-element';
-import { tileBaseStyles } from './styles.js';
+import { thumbnailBaseStyles } from './styles.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 
-export abstract class DeesTileBase extends DeesElement {
-  public static styles: CSSResult[] = tileBaseStyles as any;
+export abstract class DeesThumbnailBase extends DeesElement {
+  public static styles: CSSResult[] = thumbnailBaseStyles as any;
 
   @property({ type: Boolean })
   accessor clickable: boolean = true;

ts_web/elements/00group-media/dees-thumbnail-shared/index.ts

@@ -0,0 +1,2 @@
+export { DeesThumbnailBase } from './DeesThumbnailBase.js';
+export { thumbnailBaseStyles } from './styles.js';

ts_web/elements/00group-media/dees-thumbnail-shared/styles.ts

@@ -1,6 +1,6 @@
 import { css, cssManager } from '@design.estate/dees-element';
 
-export const tileBaseStyles = [
+export const thumbnailBaseStyles = [
   cssManager.defaultStyles,
   css`
     :host {

ts_web/elements/00group-media/dees-thumbnail-video/component.ts

@@ -8,22 +8,22 @@ import {
   type TemplateResult,
   type CSSResult,
 } from '@design.estate/dees-element';
-import { DeesTileBase } from '../dees-tile-shared/DeesTileBase.js';
-import { tileBaseStyles } from '../dees-tile-shared/styles.js';
+import { DeesThumbnailBase } from '../dees-thumbnail-shared/DeesThumbnailBase.js';
+import { thumbnailBaseStyles } from '../dees-thumbnail-shared/styles.js';
 import { demo } from './demo.js';
 
 declare global {
   interface HTMLElementTagNameMap {
-    'dees-tile-video': DeesTileVideo;
+    'dees-thumbnail-video': DeesThumbnailVideo;
   }
 }
 
-@customElement('dees-tile-video')
-export class DeesTileVideo extends DeesTileBase {
+@customElement('dees-thumbnail-video')
+export class DeesThumbnailVideo extends DeesThumbnailBase {
   public static demo = demo;
   public static demoGroups = ['Media'];
   public static styles = [
-    ...tileBaseStyles,
+    ...thumbnailBaseStyles,
     css`
       .video-wrapper {
         position: relative;

ts_web/elements/00group-media/dees-thumbnail-video/demo.ts

@@ -26,54 +26,54 @@ export const demo = () => html`
     <div class="demo-section">
       <h3>Video Tiles</h3>
       <div class="tile-row">
-        <dees-tile-video
+        <dees-thumbnail-video
           src="https://www.w3schools.com/html/mov_bbb.mp4"
           label="bunny.mp4"
           @tile-click=${(e: CustomEvent) => console.log('Video clicked:', e.detail)}
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
 
-        <dees-tile-video
+        <dees-thumbnail-video
           src="https://www.w3schools.com/html/movie.mp4"
           poster="https://picsum.photos/400/300"
           label="movie.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
 
-        <dees-tile-video
+        <dees-thumbnail-video
           src="https://www.w3schools.com/html/mov_bbb.mp4"
           label="another-video.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
       </div>
     </div>
 
     <div class="demo-section">
       <h3>Size Variants</h3>
       <div class="tile-row">
-        <dees-tile-video
+        <dees-thumbnail-video
           size="small"
           src="https://www.w3schools.com/html/mov_bbb.mp4"
           label="small.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
 
-        <dees-tile-video
+        <dees-thumbnail-video
           src="https://www.w3schools.com/html/mov_bbb.mp4"
           label="default.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
 
-        <dees-tile-video
+        <dees-thumbnail-video
           size="large"
           src="https://www.w3schools.com/html/mov_bbb.mp4"
           label="large.mp4"
-        ></dees-tile-video>
+        ></dees-thumbnail-video>
       </div>
     </div>
 
     <div class="demo-section">
       <h3>With Poster Image</h3>
-      <dees-tile-video
+      <dees-thumbnail-video
         src="https://www.w3schools.com/html/movie.mp4"
         poster="https://picsum.photos/600/400"
         label="poster-video.mp4"
-      ></dees-tile-video>
+      ></dees-thumbnail-video>
     </div>
   </div>
 `;

ts_web/elements/00group-media/dees-thumbnail-video/index.ts

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

ts_web/elements/00group-media/dees-tile-shared/index.ts

@@ -1,2 +0,0 @@
-export { DeesTileBase } from './DeesTileBase.js';
-export { tileBaseStyles } from './styles.js';

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

@@ -8,11 +8,11 @@ export * from './dees-preview/index.js';
 export * from './dees-pdf-shared/index.js';
 export * from './dees-pdf-viewer/index.js';
 
-// Tile Components
-export * from './dees-tile-shared/index.js';
-export * from './dees-tile-pdf/index.js';
-export * from './dees-tile-image/index.js';
-export * from './dees-tile-audio/index.js';
-export * from './dees-tile-video/index.js';
-export * from './dees-tile-note/index.js';
-export * from './dees-tile-folder/index.js';
+// Thumbnail Components
+export * from './dees-thumbnail-shared/index.js';
+export * from './dees-thumbnail-pdf/index.js';
+export * from './dees-thumbnail-image/index.js';
+export * from './dees-thumbnail-audio/index.js';
+export * from './dees-thumbnail-video/index.js';
+export * from './dees-thumbnail-note/index.js';
+export * from './dees-thumbnail-folder/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')};
-        will-change: transform;
+        color: var(--dees-color-text-primary);
       }
       .modalContainer {
         display: flex;
@@ -142,106 +142,112 @@ export class DeesModal extends DeesElement {
         align-items: center;
         justify-content: center;
       }
-      .modal {
-        will-change: transform;
-        transform: translateY(0px) scale(0.95);
+      dees-tile {
+        will-change: transform, opacity;
+        transform: translateY(8px) scale(0.98);
         opacity: 0;
         min-height: 120px;
-        max-height: calc(100vh - 40px);
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border-radius: 6px;
-        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;
+        max-height: calc(100vh - 80px);
+        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
+        margin: 40px;
         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 */
-        .modal.mobile-fullscreen {
+
+        dees-tile.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 {
-        height: 40px;
-        min-height: 40px;
-        font-family: ${cssGeistFontFamily};
+      .heading {
+        height: 36px;
         display: flex;
         align-items: center;
-        justify-content: space-between;
-        padding: 0 12px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        padding: 0 8px 0 16px;
         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: var(--dees-color-text-secondary);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .heading .header-buttons {
         display: flex;
         align-items: center;
-        gap: 4px;
-        position: absolute;
-        right: 8px;
-        top: 50%;
-        transform: translateY(-50%);
+        gap: 2px;
+        flex-shrink: 0;
+        margin-left: 8px;
       }
 
-      .modal .heading .header-button {
-        width: 28px;
-        height: 28px;
+      .heading .header-button {
+        width: 24px;
+        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: var(--dees-color-text-muted);
       }
 
-      .modal .heading .header-button:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      .heading .header-button:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-secondary);
       }
 
-      .modal .heading .header-button:active {
-        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+      .heading .header-button:active {
+        background: ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 15%)')};
       }
 
-      .modal .heading .header-button dees-icon {
-        width: 16px;
-        height: 16px;
+      .heading .header-button dees-icon {
+        width: 14px;
+        height: 14px;
         display: block;
       }
 
-      .modal .heading .heading-text {
-        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;
+      .content {
         overflow-y: auto;
         overflow-x: hidden;
         overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
       }
-      .modal .bottomButtons {
+      .bottomButtons {
         display: flex;
         flex-direction: row;
-        border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         justify-content: flex-end;
-        gap: 8px;
-        padding: 8px;
-        flex-shrink: 0;
+        align-items: center;
+        gap: 0;
+        height: 36px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
-      .modal .bottomButtons .bottomButton {
-        padding: 8px 16px;
-        border-radius: 4px;
-        line-height: 16px;
+      .bottomButtons .bottomButton {
+        padding: 0 16px;
+        height: 100%;
         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')};
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        background: transparent;
+        border: none;
+        border-left: 1px solid var(--dees-color-border-subtle);
+        color: var(--dees-color-text-muted);
         white-space: nowrap;
+        display: flex;
+        align-items: center;
       }
 
-      .modal .bottomButtons .bottomButton:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
-        border-color: ${cssManager.bdTheme('#d1d5db', '#52525b')};
-      }
-      .modal .bottomButtons .bottomButton:active {
-        background: ${cssManager.bdTheme('#e5e7eb', '#52525b')};
-      }
-      .modal .bottomButtons .bottomButton:last-child {
-        border-right: none;
+      .bottomButtons .bottomButton:first-child {
+        border-left: none;
       }
 
-      .modal .bottomButtons .bottomButton.primary {
-        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-        color: #ffffff;
+      .bottomButtons .bottomButton:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
-      .modal .bottomButtons .bottomButton.primary:hover {
-        background: ${cssManager.bdTheme('#2563eb', '#2563eb')};
-        border-color: ${cssManager.bdTheme('#2563eb', '#2563eb')};
+
+      .bottomButtons .bottomButton:active {
+        background: ${cssManager.bdTheme('hsl(0 0% 92%)', 'hsl(0 0% 13%)')};
       }
-      .modal .bottomButtons .bottomButton.primary:active {
-        background: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
-        border-color: ${cssManager.bdTheme('#1d4ed8', '#1d4ed8')};
+
+      .bottomButtons .bottomButton.primary {
+        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}; }` : ''}
-        ${maxWidthStyle ? `.modal { max-width: ${maxWidthStyle}; }` : ''}
-        ${minWidthStyle ? `.modal { min-width: ${minWidthStyle}; }` : ''}
+        ${customWidth ? `dees-tile { width: ${customWidth}; }` : ''}
+        ${maxWidthStyle ? `dees-tile { max-width: ${maxWidthStyle}; }` : ''}
+        ${minWidthStyle ? `dees-tile { min-width: ${minWidthStyle}; }` : ''}
       </style>
       <div class="modalContainer" @click=${this.handleOutsideClick} style="z-index: ${this.modalZIndex}">
-        <div class="modal ${widthClass} ${mobileFullscreenClass}">
-          <div class="heading">
+        <dees-tile class="${widthClass} ${mobileFullscreenClass}">
+          <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');
-    modal!.classList.add('show');
+    const tile = this.shadowRoot!.querySelector('dees-tile');
+    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');
-    modal!.classList.add('predestroy');
+    const tile = this.shadowRoot!.querySelector('dees-tile');
+    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 {
-        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;
+      dees-tile {
         height: 100%;
-        position: relative;
       }
 
-      .product-card:hover {
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+      dees-tile:hover::part(outer) {
+        border-color: var(--dees-color-border-strong);
         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 {
-        padding: 16px;
+      .product-header-bar {
         display: flex;
-        flex-direction: column;
-        gap: 12px;
-        flex: 1;
+        align-items: center;
+        justify-content: space-between;
+        height: 32px;
+        padding: 0 16px;
+        gap: 8px;
       }
-      
-      .product-header {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
+
+      .product-name {
+        font-size: 14px;
+        font-weight: 500;
+        color: var(--dees-color-text-secondary);
+        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;
-      }
-      
-      .product-name {
-        font-size: 16px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        line-height: 1.4;
+        white-space: nowrap;
+        flex-shrink: 0;
       }
 
+      .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;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        padding: 12px 16px;
+        width: 100%;
+        box-sizing: border-box;
       }
 
       .product-price {
@@ -198,7 +204,7 @@ export class DeesShoppingProductcard extends DeesElement {
       .price-current {
         font-size: 20px;
         font-weight: 600;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        color: var(--dees-color-text-primary);
       }
 
       .price-original {
@@ -248,66 +254,68 @@ export class DeesShoppingProductcard extends DeesElement {
     };
 
     return html`
-      <div 
-        class="product-card ${this.selectable ? 'selectable' : ''} ${this.selected ? 'selected' : ''}"
+      <dees-tile
+        class="${this.selectable ? 'selectable' : ''} ${this.selected ? 'selected' : ''}"
         @click=${this.handleCardClick}
       >
-        <div class="product-image">
-          ${imageUrl ? html`
-            <img src="${imageUrl}" alt="${name}">
-          ` : 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 slot="header" class="product-header-bar">
+          <span class="product-name">${name}</span>
+          ${category ? html`<span class="product-category">${category}</span>` : ''}
         </div>
-        <div class="product-content">
-          <div class="product-header">
-            ${category ? html`<div class="product-category">${category}</div>` : ''}
-            <div class="product-name">${name}</div>
-          </div>
-          ${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 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
-                  }));
+        <div class="product-body">
+          <div class="product-image">
+            ${imageUrl ? html`
+              <img src="${imageUrl}" alt="${name}">
+            ` : 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-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

@@ -110,6 +110,48 @@ class DemoViewDashboard extends DeesElement {
           console.log('Tile action:', e.detail);
         }}
       ></dees-statsgrid>
+
+      <h2 style="margin-top: 40px;">Recent Activity</h2>
+      <p>Below is a log of recent system events and user activity to demonstrate scrollable content.</p>
+
+      ${[
+        { time: '2 min ago', event: 'User john@example.com logged in from 192.168.1.42', type: 'info' },
+        { time: '5 min ago', event: 'Deployment v3.52.1 completed successfully on production', type: 'success' },
+        { time: '12 min ago', event: 'Database backup finished — 2.4 GB compressed', type: 'info' },
+        { time: '18 min ago', event: 'SSL certificate renewed for api.example.com (expires 2027-04-03)', type: 'success' },
+        { time: '25 min ago', event: 'Memory usage spike on worker-03 (92%) — auto-scaled to 4 instances', type: 'warning' },
+        { time: '31 min ago', event: 'New user registration: sarah@company.io', type: 'info' },
+        { time: '45 min ago', event: 'Scheduled job "cleanup-temp-files" completed — removed 1,247 files', type: 'info' },
+        { time: '1 hour ago', event: 'API rate limit reached for client app-mobile-ios (429 responses)', type: 'warning' },
+        { time: '1.5 hours ago', event: 'CDN cache purged for /assets/* — 340 objects invalidated', type: 'info' },
+        { time: '2 hours ago', event: 'Failed login attempt for admin@example.com from 203.0.113.50 (blocked)', type: 'error' },
+        { time: '2.5 hours ago', event: 'Webhook delivery to https://hooks.slack.com succeeded (200 OK)', type: 'info' },
+        { time: '3 hours ago', event: 'Cron job "generate-reports" started — processing Q1 2026 data', type: 'info' },
+        { time: '3.5 hours ago', event: 'Load balancer health check: all 8 nodes healthy', type: 'success' },
+        { time: '4 hours ago', event: 'DNS propagation complete for new subdomain staging.example.com', type: 'success' },
+      ].map(item => html`
+        <div style="
+          display: flex;
+          align-items: baseline;
+          gap: 12px;
+          padding: 10px 0;
+          border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 90%)', 'hsl(0 0% 12%)')};
+          font-size: 13px;
+        ">
+          <span style="
+            flex-shrink: 0;
+            width: 100px;
+            font-size: 11px;
+            color: ${cssManager.bdTheme('hsl(0 0% 55%)', 'hsl(0 0% 45%)')};
+          ">${item.time}</span>
+          <span style="
+            color: ${item.type === 'error' ? cssManager.bdTheme('hsl(0 72% 50%)', 'hsl(0 72% 65%)') :
+              item.type === 'warning' ? cssManager.bdTheme('hsl(25 95% 50%)', 'hsl(25 95% 63%)') :
+              item.type === 'success' ? cssManager.bdTheme('hsl(142 70% 40%)', 'hsl(142 70% 55%)') :
+              cssManager.bdTheme('hsl(0 0% 30%)', 'hsl(0 0% 75%)')};
+          ">${item.event}</span>
+        </div>
+      `)}
     `;
   }
 }

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

@@ -76,9 +76,8 @@ export class DeesSimpleAppDash extends DeesElement {
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        color: var(--dees-color-text-primary);
         user-select: none;
         display: block;
         overflow: hidden;
@@ -102,8 +101,8 @@ export class DeesSimpleAppDash extends DeesElement {
         left: 0px;
         height: calc(100% - 24px);
         width: 240px;
-        background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(0 0% 7%)')};
-        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
+        background: var(--dees-color-bg-secondary);
+        border-right: 1px solid var(--dees-color-border-default);
         font-size: 13px;
         font-family: 'Geist Sans', sans-serif;
         z-index: 2;
@@ -114,7 +113,7 @@ export class DeesSimpleAppDash extends DeesElement {
 
       .sidebar-header {
         padding: 20px 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
+        border-bottom: 1px solid var(--dees-color-border-default);
         display: flex;
         align-items: center;
         gap: 12px;
@@ -127,25 +126,22 @@ export class DeesSimpleAppDash extends DeesElement {
         width: 36px;
         height: 36px;
         border-radius: 10px;
-        background: ${cssManager.bdTheme(
-          'linear-gradient(135deg, hsl(215 20% 95%) 0%, hsl(215 20% 90%) 100%)',
-          'linear-gradient(135deg, hsl(215 20% 18%) 0%, hsl(215 20% 14%) 100%)'
-        )};
+        background: var(--dees-color-bg-tertiary);
         box-shadow: ${cssManager.bdTheme(
-          '0 1px 2px rgb(0 0 0 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.5)',
-          '0 1px 2px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.05)'
+          '0 1px 2px rgb(0 0 0 / 0.05)',
+          '0 1px 2px rgb(0 0 0 / 0.2)'
         )};
       }
 
       .header-icon-wrapper dees-icon {
         font-size: 18px;
-        color: ${cssManager.bdTheme('hsl(215 20% 40%)', 'hsl(215 20% 70%)')};
+        color: var(--dees-color-text-primary);
       }
 
       .appName {
         font-size: 15px;
         font-weight: 600;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -156,7 +152,7 @@ export class DeesSimpleAppDash extends DeesElement {
         overflow-y: auto;
         padding: 12px 8px;
         scrollbar-width: thin;
-        scrollbar-color: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')} transparent;
+        scrollbar-color: var(--dees-color-scrollbar-thumb) transparent;
       }
 
       .viewTabs-container::-webkit-scrollbar {
@@ -168,12 +164,12 @@ export class DeesSimpleAppDash extends DeesElement {
       }
 
       .viewTabs-container::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
+        background: var(--dees-color-scrollbar-thumb);
         border-radius: 3px;
       }
 
       .viewTabs-container::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 75%)', 'hsl(0 0% 30%)')};
+        background: var(--dees-color-scrollbar-thumb-hover);
       }
 
       .section-label {
@@ -181,7 +177,7 @@ export class DeesSimpleAppDash extends DeesElement {
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+        color: var(--dees-color-text-muted);
         padding: 8px 12px 8px;
         margin-bottom: 4px;
       }
@@ -199,25 +195,25 @@ export class DeesSimpleAppDash extends DeesElement {
         padding: 10px 12px;
         cursor: default;
         transition: all 0.15s ease;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
+        color: var(--dees-color-text-secondary);
         user-select: none;
         position: relative;
         border-radius: 8px;
       }
 
       .viewTab:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.05)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        background: var(--dees-color-hover);
+        color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
       }
 
       .viewTab:active {
-        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 100% / 0.07)')};
+        background: var(--dees-color-active);
         transform: scale(0.99);
       }
 
       .viewTab.selected {
-        background: ${cssManager.bdTheme('hsl(215 25% 95%)', 'hsl(215 20% 15%)')};
-        color: ${cssManager.bdTheme('hsl(215 25% 30%)', 'hsl(215 25% 85%)')};
+        background: var(--dees-color-active);
+        color: var(--dees-color-text-primary);
         font-weight: 500;
       }
 
@@ -229,7 +225,7 @@ export class DeesSimpleAppDash extends DeesElement {
         bottom: 8px;
         width: 3px;
         border-radius: 0 2px 2px 0;
-        background: ${cssManager.bdTheme('hsl(215 70% 50%)', 'hsl(215 70% 60%)')};
+        background: var(--dees-color-text-primary);
       }
 
       .viewTab dees-icon {
@@ -243,8 +239,8 @@ export class DeesSimpleAppDash extends DeesElement {
       }
 
       .viewTab.selected dees-icon {
-        opacity: 0.9;
-        color: ${cssManager.bdTheme('hsl(215 70% 45%)', 'hsl(215 70% 65%)')};
+        opacity: 1;
+        color: var(--dees-color-text-primary);
       }
 
       .viewTab span {
@@ -256,7 +252,7 @@ export class DeesSimpleAppDash extends DeesElement {
 
       .appActions {
         padding: 12px 8px;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
+        border-top: 1px solid var(--dees-color-border-default);
       }
 
       .action {
@@ -267,7 +263,7 @@ export class DeesSimpleAppDash extends DeesElement {
         border-radius: 8px;
         cursor: default;
         transition: all 0.15s ease;
-        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
+        color: var(--dees-color-text-secondary);
       }
 
       .action:hover {
@@ -295,19 +291,55 @@ export class DeesSimpleAppDash extends DeesElement {
         bottom: 24px;
         width: calc(100% - 240px);
         overflow: auto;
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 5%)')};
+        background: var(--dees-color-bg-secondary);
         overscroll-behavior: contain;
       }
 
+      .appcontent::before {
+        content: '';
+        position: sticky;
+        top: 0;
+        left: 0;
+        right: 0;
+        display: block;
+        height: 8px;
+        margin-bottom: -8px;
+        z-index: 10;
+        pointer-events: none;
+        background: linear-gradient(
+          to bottom,
+          ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 0% / 0.4)')},
+          ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 0% / 0.12)')},
+          transparent
+        );
+      }
+
+      .controlbar::before {
+        content: '';
+        position: absolute;
+        top: -8px;
+        left: 240px;
+        right: 0;
+        height: 8px;
+        pointer-events: none;
+        background: linear-gradient(
+          to top,
+          ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 0% / 0.4)')},
+          ${cssManager.bdTheme('hsl(0 0% 0% / 0.03)', 'hsl(0 0% 0% / 0.12)')},
+          transparent
+        );
+      }
+
       .controlbar {
-        color: #fff;
+        color: var(--dees-color-text-muted);
         position: absolute;
         bottom: 0px;
         left: 0px;
         width: 100%;
         height: 24px;
-        background: ${cssManager.bdTheme('hsl(220 13% 18%)', 'hsl(220 13% 12%)')};
-        z-index: 2;
+        background: var(--dees-color-bg-tertiary);
+        border-top: 1px solid var(--dees-color-border-default);
+        z-index: 11;
         display: flex;
         justify-content: flex-end;
         align-items: center;
@@ -325,9 +357,10 @@ export class DeesSimpleAppDash extends DeesElement {
         height: 100%;
         white-space: nowrap;
         cursor: default;
-        color: hsl(0 0% 70%);
+        color: var(--dees-color-text-muted);
         transition: all 0.15s ease;
-        border-left: 1px solid hsl(0 0% 100% / 0.08);
+        border-left: 1px solid var(--dees-color-border-strong);
+
       }
 
       .control:first-child {
@@ -335,8 +368,8 @@ export class DeesSimpleAppDash extends DeesElement {
       }
 
       .control:hover {
-        background: hsl(0 0% 100% / 0.06);
-        color: hsl(0 0% 95%);
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
       }
 
       .control dees-icon {
@@ -344,11 +377,11 @@ export class DeesSimpleAppDash extends DeesElement {
       }
 
       .control.status-connected dees-icon {
-        color: hsl(142 70% 50%);
+        color: ${cssManager.bdTheme('hsl(142 70% 35%)', 'hsl(142 70% 50%)')};
       }
 
       .control.status-terminal dees-icon {
-        color: hsl(45 90% 55%);
+        color: ${cssManager.bdTheme('hsl(38 92% 45%)', 'hsl(38 92% 55%)')};
       }
 
       /* Global Message Banners */
@@ -371,7 +404,7 @@ export class DeesSimpleAppDash extends DeesElement {
         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%)')};
+        border-bottom: 1px solid var(--dees-color-border-default);
         animation: bannerSlideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
       }
 

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

@@ -31,9 +31,8 @@ export class DeesSimpleLogin extends DeesElement {
     themeDefaultStyles,
     cssManager.defaultStyles,
     css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
       :host {
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
         user-select: none;
         display: block;
         width: 100%;
@@ -50,7 +49,7 @@ export class DeesSimpleLogin extends DeesElement {
         height: 100%;
         top: 0;
         left: 0;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        background: var(--dees-color-bg-primary);
       }
 
       .slotContainer {
@@ -83,17 +82,17 @@ export class DeesSimpleLogin extends DeesElement {
         font-size: 24px;
         font-weight: 600;
         letter-spacing: -0.025em;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        color: var(--dees-color-text-primary);
       }
 
       .subheader {
         font-size: 14px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        color: var(--dees-color-text-muted);
       }
 
       .login-card {
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        background: var(--dees-color-bg-primary);
+        border: 1px solid var(--dees-color-border-default);
         border-radius: 8px;
         padding: 24px;
       }

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,41 +69,33 @@ 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;
-        background: ${cssManager.bdTheme('hsl(0 0% 96%)', 'hsl(0 0% 10%)')};
+        padding: 0 12px;
+        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;
+        color: var(--dees-color-text-muted);
       }
 
       .terminal-header-icon {
-        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+        color: var(--dees-color-text-muted);
       }
 
       .terminal-header-command {
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+        color: var(--dees-color-text-secondary);
         font-weight: 500;
       }
 
       .terminal-container {
-        flex: 1;
-        position: relative;
+        position: absolute;
+        inset: 0;
         padding: 8px;
       }
 
@@ -250,27 +243,27 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
       }
 
       .xterm .xterm-viewport::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 25%)')};
+        background: var(--dees-color-scrollbar-thumb);
         border-radius: 4px;
       }
 
       .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 70%)', 'hsl(0 0% 35%)')};
+        background: var(--dees-color-scrollbar-thumb-hover);
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <div class="terminal-preview">
-        <div class="terminal-header">
+      <dees-tile>
+        <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/00theme.ts

@@ -1,4 +1,4 @@
-import { css, type CSSResult } from '@design.estate/dees-element';
+import { css, cssManager, unsafeCSS, type CSSResult } from '@design.estate/dees-element';
 
 // ============================================
 // Theme Token Type Definitions
@@ -11,6 +11,7 @@ export interface IThemeColors {
   textPrimary: string;
   textSecondary: string;
   textMuted: string;
+  textWarm: string;
   borderDefault: string;
   borderSubtle: string;
   borderStrong: string;
@@ -18,6 +19,14 @@ export interface IThemeColors {
   accentSuccess: string;
   accentWarning: string;
   accentError: string;
+  badgeDefaultBg: string;
+  badgeDefaultFg: string;
+  badgeSuccessBg: string;
+  badgeSuccessFg: string;
+  badgeWarningBg: string;
+  badgeWarningFg: string;
+  badgeErrorBg: string;
+  badgeErrorFg: string;
 }
 
 export interface IThemeSpacing {
@@ -79,34 +88,52 @@ export interface ITheme {
 export const themeDefaults: ITheme = {
   colors: {
     light: {
-      bgPrimary: '#ffffff',
-      bgSecondary: '#fafafa',
-      bgTertiary: '#f4f4f5',
-      textPrimary: '#09090b',
-      textSecondary: '#374151',
-      textMuted: '#71717a',
-      borderDefault: '#e5e7eb',
-      borderSubtle: '#f4f4f5',
-      borderStrong: '#d1d5db',
+      bgPrimary: 'hsl(0 0% 100%)',    // #ffffff
+      bgSecondary: 'hsl(0 0% 98%)',   // #fafafa
+      bgTertiary: 'hsl(0 0% 96%)',    // #f5f5f5
+      textPrimary: 'hsl(0 0% 3.9%)',  // #0a0a0a
+      textSecondary: 'hsl(0 0% 20%)', // #333333
+      textMuted: 'hsl(0 0% 45%)',     // #737373
+      textWarm: '#78716c',            // warm stone
+      borderDefault: 'hsl(0 0% 89.8%)', // #e5e5e5
+      borderSubtle: 'hsl(0 0% 93%)',    // #ededed
+      borderStrong: 'hsl(0 0% 80%)',    // #cccccc
       accentPrimary: '#3b82f6',
       accentSuccess: '#22c55e',
       accentWarning: '#f59e0b',
       accentError: '#ef4444',
+      badgeDefaultBg: '#f4f4f5',
+      badgeDefaultFg: '#3f3f46',
+      badgeSuccessBg: '#dcfce7',
+      badgeSuccessFg: '#166534',
+      badgeWarningBg: '#fef3c7',
+      badgeWarningFg: '#92400e',
+      badgeErrorBg: '#fee2e2',
+      badgeErrorFg: '#991b1b',
     },
     dark: {
-      bgPrimary: '#09090b',
-      bgSecondary: '#0a0a0a',
-      bgTertiary: '#18181b',
-      textPrimary: '#fafafa',
-      textSecondary: '#d4d4d8',
-      textMuted: '#a1a1aa',
-      borderDefault: '#27272a',
-      borderSubtle: '#1a1a1a',
-      borderStrong: '#3f3f46',
+      bgPrimary: 'hsl(0 0% 3.9%)',    // #0a0a0a
+      bgSecondary: 'hsl(0 0% 3.9%)', // #0a0a0a (matches sidebar/tile in dark)
+      bgTertiary: 'hsl(0 0% 7%)',    // #121212
+      textPrimary: 'hsl(0 0% 98%)',   // #fafafa
+      textSecondary: 'hsl(0 0% 63.9%)', // #a3a3a3
+      textMuted: 'hsl(0 0% 55%)',       // #8c8c8c
+      textWarm: '#b5a99a',              // warm stone
+      borderDefault: 'hsl(0 0% 14.9%)', // #262626
+      borderSubtle: 'hsl(0 0% 11%)',     // #1c1c1c
+      borderStrong: 'hsl(0 0% 20%)',     // #333333
       accentPrimary: '#3b82f6',
       accentSuccess: '#22c55e',
       accentWarning: '#f59e0b',
       accentError: '#ef4444',
+      badgeDefaultBg: '#27272a',
+      badgeDefaultFg: '#a1a1aa',
+      badgeSuccessBg: '#14532d',
+      badgeSuccessFg: '#4ade80',
+      badgeWarningBg: '#451a03',
+      badgeWarningFg: '#fbbf24',
+      badgeErrorBg: '#450a0a',
+      badgeErrorFg: '#f87171',
     },
   },
   spacing: {
@@ -146,13 +173,17 @@ export const themeDefaults: ITheme = {
   },
 };
 
+// Shorthand aliases for CSS template usage
+const l = themeDefaults.colors.light;
+const d = themeDefaults.colors.dark;
+
 // ============================================
 // CSS Block for Component Import
 // ============================================
 
 /**
  * Default theme styles to be imported into every component's static styles array.
- * Provides CSS custom properties for spacing, radius, shadows, transitions, and control heights.
+ * Provides CSS custom properties for colors, spacing, radius, shadows, transitions, and control heights.
  *
  * Usage:
  * ```typescript
@@ -170,6 +201,93 @@ export const themeDefaults: ITheme = {
  */
 export const themeDefaultStyles: CSSResult = css`
   :host {
+    /* ========================================
+     * Colors — Background (from themeDefaults)
+     * ======================================== */
+    --dees-color-bg-primary: ${cssManager.bdTheme(l.bgPrimary, d.bgPrimary)};
+    --dees-color-bg-secondary: ${cssManager.bdTheme(l.bgSecondary, d.bgSecondary)};
+    --dees-color-bg-tertiary: ${cssManager.bdTheme(l.bgTertiary, d.bgTertiary)};
+
+    /* ========================================
+     * Colors — Text (from themeDefaults)
+     * ======================================== */
+    --dees-color-text-primary: ${cssManager.bdTheme(l.textPrimary, d.textPrimary)};
+    --dees-color-text-secondary: ${cssManager.bdTheme(l.textSecondary, d.textSecondary)};
+    --dees-color-text-muted: ${cssManager.bdTheme(l.textMuted, d.textMuted)};
+
+    /* ========================================
+     * Colors — Border (from themeDefaults)
+     * ======================================== */
+    --dees-color-border-default: ${cssManager.bdTheme(l.borderDefault, d.borderDefault)};
+    --dees-color-border-subtle: ${cssManager.bdTheme(l.borderSubtle, d.borderSubtle)};
+    --dees-color-border-strong: ${cssManager.bdTheme(l.borderStrong, d.borderStrong)};
+
+    /* ========================================
+     * Colors — Warm Text (from themeDefaults)
+     * ======================================== */
+    --dees-color-text-warm: ${cssManager.bdTheme(l.textWarm, d.textWarm)};
+
+    /* ========================================
+     * Colors — Accent (from themeDefaults)
+     * ======================================== */
+    --dees-color-accent-primary: ${cssManager.bdTheme(l.accentPrimary, d.accentPrimary)};
+    --dees-color-accent-success: ${cssManager.bdTheme(l.accentSuccess, d.accentSuccess)};
+    --dees-color-accent-warning: ${cssManager.bdTheme(l.accentWarning, d.accentWarning)};
+    --dees-color-accent-error: ${cssManager.bdTheme(l.accentError, d.accentError)};
+
+    /* ========================================
+     * Colors — Badge (from themeDefaults)
+     * ======================================== */
+    --dees-color-badge-default-bg: ${cssManager.bdTheme(l.badgeDefaultBg, d.badgeDefaultBg)};
+    --dees-color-badge-default-fg: ${cssManager.bdTheme(l.badgeDefaultFg, d.badgeDefaultFg)};
+    --dees-color-badge-success-bg: ${cssManager.bdTheme(l.badgeSuccessBg, d.badgeSuccessBg)};
+    --dees-color-badge-success-fg: ${cssManager.bdTheme(l.badgeSuccessFg, d.badgeSuccessFg)};
+    --dees-color-badge-warning-bg: ${cssManager.bdTheme(l.badgeWarningBg, d.badgeWarningBg)};
+    --dees-color-badge-warning-fg: ${cssManager.bdTheme(l.badgeWarningFg, d.badgeWarningFg)};
+    --dees-color-badge-error-bg: ${cssManager.bdTheme(l.badgeErrorBg, d.badgeErrorBg)};
+    --dees-color-badge-error-fg: ${cssManager.bdTheme(l.badgeErrorFg, d.badgeErrorFg)};
+
+    /* ========================================
+     * Colors — Interactive States
+     * ======================================== */
+    --dees-color-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+    --dees-color-active: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+    --dees-color-pressed: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
+
+    /* ========================================
+     * Colors — Focus Ring
+     * ======================================== */
+    --dees-color-focus-ring: ${cssManager.bdTheme('rgba(59, 130, 246, 0.4)', 'rgba(59, 130, 246, 0.4)')};
+
+    /* ========================================
+     * Colors — Tooltip (inverted contrast)
+     * ======================================== */
+    --dees-color-tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
+    --dees-color-tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
+
+    /* ========================================
+     * Colors — Link
+     * ======================================== */
+    --dees-color-link: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+    --dees-color-link-hover: ${cssManager.bdTheme('#2563eb', '#93bbfd')};
+
+    /* ========================================
+     * Colors — Code
+     * ======================================== */
+    --dees-color-code-bg: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')};
+    --dees-color-code-block-bg: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+
+    /* ========================================
+     * Colors — Selection
+     * ======================================== */
+    --dees-color-selection: ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.3)')};
+
+    /* ========================================
+     * Colors — Scrollbar
+     * ======================================== */
+    --dees-color-scrollbar-thumb: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+    --dees-color-scrollbar-thumb-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
+
     /* ========================================
      * Spacing Scale
      * ======================================== */

ts_web/services/DeesServiceLibLoader.ts

@@ -74,6 +74,28 @@ export interface ILightweightChartsBundle {
   };
 }
 
+/**
+ * Minimal type for an ECharts instance (loaded from CDN)
+ */
+export interface IEchartsInstance {
+  setOption(option: Record<string, any>, notMerge?: boolean): void;
+  resize(opts?: { width?: number; height?: number }): void;
+  dispose(): void;
+  on(eventName: string, handler: (...args: any[]) => void): void;
+  off(eventName: string, handler?: (...args: any[]) => void): void;
+  getOption(): Record<string, any>;
+  clear(): void;
+}
+
+/**
+ * Bundle type for Apache ECharts
+ */
+export interface IEchartsBundle {
+  init: (dom: HTMLElement, theme?: string | object | null, opts?: Record<string, any>) => IEchartsInstance;
+  dispose: (chart: IEchartsInstance | HTMLElement | string) => void;
+  getInstanceByDom: (dom: HTMLElement) => IEchartsInstance | undefined;
+}
+
 /**
  * Bundle type for Tiptap editor and extensions
  */
@@ -108,6 +130,7 @@ export class DeesServiceLibLoader {
   private xtermSearchAddonLib: IXtermSearchAddonBundle | null = null;
   private highlightJsLib: HLJSApi | null = null;
   private lightweightChartsLib: ILightweightChartsBundle | null = null;
+  private echartsLib: IEchartsBundle | null = null;
   private tiptapLib: ITiptapBundle | null = null;
 
   // Loading promises to prevent duplicate concurrent loads
@@ -116,6 +139,7 @@ export class DeesServiceLibLoader {
   private xtermSearchAddonLoadingPromise: Promise<IXtermSearchAddonBundle> | null = null;
   private highlightJsLoadingPromise: Promise<HLJSApi> | null = null;
   private lightweightChartsLoadingPromise: Promise<ILightweightChartsBundle> | null = null;
+  private echartsLoadingPromise: Promise<IEchartsBundle> | null = null;
   private tiptapLoadingPromise: Promise<ITiptapBundle> | null = null;
 
   private constructor() {}
@@ -296,6 +320,36 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
     return this.lightweightChartsLoadingPromise;
   }
 
+  /**
+   * Load Apache ECharts from CDN
+   * @returns Promise resolving to ECharts bundle
+   */
+  public async loadEcharts(): Promise<IEchartsBundle> {
+    if (this.echartsLib) {
+      return this.echartsLib;
+    }
+
+    if (this.echartsLoadingPromise) {
+      return this.echartsLoadingPromise;
+    }
+
+    this.echartsLoadingPromise = (async () => {
+      // Use the pre-built ESM bundle which includes all chart types and components.
+      // The +esm wrapper only exports the core without auto-registered chart types.
+      const url = `${CDN_BASE}/echarts@${CDN_VERSIONS.echarts}/dist/echarts.esm.min.js`;
+      const module = await import(/* @vite-ignore */ url);
+
+      this.echartsLib = {
+        init: module.init,
+        dispose: module.dispose,
+        getInstanceByDom: module.getInstanceByDom,
+      };
+      return this.echartsLib;
+    })();
+
+    return this.echartsLoadingPromise;
+  }
+
   /**
    * Load Tiptap rich text editor and extensions from CDN
    * @returns Promise resolving to Tiptap bundle with Editor and extensions
@@ -310,23 +364,16 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
     }
 
     this.tiptapLoadingPromise = (async () => {
-      const version = CDN_VERSIONS.tiptap;
-
-      // Load all Tiptap modules in parallel
-      const [
-        coreModule,
-        starterKitModule,
-        underlineModule,
-        textAlignModule,
-        linkModule,
-        typographyModule,
-      ] = await Promise.all([
-        import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/core@${version}/+esm`),
-        import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/starter-kit@${version}/+esm`),
-        import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/extension-underline@${version}/+esm`),
-        import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/extension-text-align@${version}/+esm`),
-        import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/extension-link@${version}/+esm`),
-        import(/* @vite-ignore */ `${CDN_BASE}/@tiptap/extension-typography@${version}/+esm`),
+      // Import directly from npm packages — bundled by esbuild into a single
+      // module graph. CDN loading caused duplicate ProseMirror instances because
+      // jsdelivr resolves each package's dependencies independently.
+      const [coreModule, starterKitModule, underlineModule, textAlignModule, linkModule, typographyModule] = await Promise.all([
+        import('@tiptap/core'),
+        import('@tiptap/starter-kit'),
+        import('@tiptap/extension-underline'),
+        import('@tiptap/extension-text-align'),
+        import('@tiptap/extension-link'),
+        import('@tiptap/extension-typography'),
       ]);
 
       this.tiptapLib = {
@@ -355,6 +402,7 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
       this.loadXtermSearchAddon(),
       this.loadHighlightJs(),
       this.loadLightweightCharts(),
+      this.loadEcharts(),
       this.loadTiptap(),
     ]);
   }
@@ -362,7 +410,7 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
   /**
    * Check if a specific library is already loaded
    */
-  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'xtermSearchAddon' | 'highlightJs' | 'lightweightCharts' | 'tiptap'): boolean {
+  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'xtermSearchAddon' | 'highlightJs' | 'lightweightCharts' | 'echarts' | 'tiptap'): boolean {
     switch (library) {
       case 'xterm':
         return this.xtermLib !== null;
@@ -374,6 +422,8 @@ body > div[style*="top: -50000px"][style*="width: 50000px"] {
         return this.highlightJsLib !== null;
       case 'lightweightCharts':
         return this.lightweightChartsLib !== null;
+      case 'echarts':
+        return this.echartsLib !== 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, ILightweightChartsBundle } from './DeesServiceLibLoader.js';
+export type { IXtermBundle, IXtermFitAddonBundle, IXtermSearchAddonBundle, IXtermSearchAddon, ITiptapBundle, ILightweightChartsBundle, IEchartsBundle, IEchartsInstance } from './DeesServiceLibLoader.js';
 export { CDN_BASE, CDN_VERSIONS } from './versions.js';

ts_web/services/versions.ts

@@ -7,6 +7,7 @@ export const CDN_VERSIONS = {
   xtermAddonFit: '0.8.0',
   xtermAddonSearch: '0.13.0',
   highlightJs: '11.11.1',
+  echarts: '5.6.0',
   lightweightCharts: '5.1.0',
   tiptap: '2.27.2',
   fontawesome: '7.2.0',