v3.41.2

.gitignore

@@ -16,4 +16,5 @@ node_modules/
 dist/
 dist_*/
 
-# custom
+# custom
+.playwright-mcp/

changelog.md

@@ -1,5 +1,151 @@
 # Changelog
 
+## 2026-01-28 - 3.41.2 - fix(dees-pdf-viewer)
+account for devicePixelRatio when setting canvas dimensions and scale 2D context to render crisp PDF pages and thumbnails on high-DPI displays
+
+- Multiply canvas.width and canvas.height by window.devicePixelRatio (dpr) and use Math.floor to set the actual pixel buffer size
+- Call ctx.scale(dpr, dpr) so drawing is rendered at device pixels while keeping CSS display size unchanged
+- Apply the same high-DPI adjustments to both main page rendering and thumbnail generation
+- Keep canvas.style.width and canvas.style.height set to viewport dimensions to preserve layout
+
+## 2026-01-27 - 3.41.1 - fix(dataview-codebox)
+fix dees-dataview codebox layout to ensure full-height, proper flex behavior and scrolling; bump internal dependencies
+
+- Updated CSS in ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts: added height:100%, box-sizing, display:flex and flex-direction:column on container, set flex-shrink on header elements, made code grid overflow:auto with flex:1 and min-height:0 to prevent overflow issues.
+- Bumped dependencies in package.json: @design.estate/dees-domtools from ^2.3.7 to ^2.3.8 and @design.estate/dees-element from ^2.1.5 to ^2.1.6.
+- Non-breaking visual/layout fix — suitable for a patch release.
+
+## 2026-01-27 - 3.41.0 - feat(docs)
+document new media & tile components and expand Workspace/IDE component docs; update component count to 90+
+
+- Updated README component count from 70+ to 90+.
+- Added Media & Tile components documentation (DeesTilePdf, DeesTileImage, DeesTileAudio, DeesTileVideo, DeesTileNote, DeesTileFolder, DeesPreview, DeesPdfViewer, DeesImageViewer, DeesAudioViewer, DeesVideoViewer).
+- Expanded Workspace/IDE documentation and introduced workspace subcomponents (DeesWorkspace, DeesWorkspaceMonaco, DeesWorkspaceDiffEditor, DeesWorkspaceFiletree, DeesWorkspaceTerminal, DeesWorkspaceTerminalPreview, DeesWorkspaceMarkdown, DeesWorkspaceMarkdownoutlet, DeesWorkspaceBottombar).
+- Enhanced Contextmenu docs to demonstrate nested submenus and programmatic API usage.
+- Added ITileFolderItem interface example for tile folder items.
+
+## 2026-01-27 - 3.40.0 - feat(dees-tile)
+unify tile badge styling and markup; replace component-specific badge classes with shared tile-badge classes and update related imports/tests
+
+- Add shared badge styles: .tile-badge-corner, .tile-badge-topright, .tile-badge and layout rules in dees-tile-shared/styles.ts
+- Update tile components (audio, video, image, folder, note, pdf) to use new badge markup and remove duplicated badge CSS
+- Shift badge positioning when a tile label is present (.tile-container:has(.tile-label))
+- Remove older per-component badge rules (duration-badge, item-count-badge, dimension-badge, note-language/note-line-indicator, preview-page-indicator) and replace with unified classes
+- Update tests to import dees-contextmenu and dees-dashboardgrid from new 00group-overlay / 00group-layout paths to reflect folder reorganization
+
+## 2026-01-27 - 3.39.1 - fix(dees-tile-note)
+use horizontal pointer position to scroll note body by computing percentage from clientX and element width instead of clientY and height
+
+- Changed ts_web/elements/00group-media/dees-tile-note/component.ts: use x = e.clientX - rect.left and percentage = x / rect.width to drive scrollTop calculation instead of using vertical coordinates
+- Fixes incorrect scroll mapping where vertical mouse position was used for horizontal scrolling interaction
+
+## 2026-01-27 - 3.39.0 - feat(components)
+add large set of new UI components and demos, reorganize groups, and bump a few dependencies
+
+- Add Media viewers: dees-image-viewer, dees-audio-viewer, dees-video-viewer, DeesPdf/DeesPdfViewer and related PDF utilities (CanvasPool, PdfManager) and demos
+- Introduce dees-preview composite that auto-detects content and delegates to appropriate viewers
+- New Tile system (DeesTileBase) and tile components: dees-tile-pdf, dees-tile-image, dees-tile-audio, dees-tile-video, dees-tile-note, dees-tile-folder plus demos
+- Add dashboard/grid system: dees-dashboardgrid with drag/resize, collision resolution, layout helpers, demos and utilities
+- Data view additions: dees-table with lucene-like query parser, column utilities, and dees-statsgrid enhancements (including cpuCores visualization)
+- New feedback & overlay components: dees-toast, dees-actionbar, dees-progressbar, dees-spinner, dees-badge and supporting demos/interfaces
+- Many layout and utility components added or improved: dees-panel, dees-chips, dees-heading, dees-label, dees-pagination, dees-stepper, and associated demos
+- Refactor project structure: components organized into 00group-* directories and demo metadata migrated from demoGroup to demoGroups (string[]); many import path updates to match new grouping
+- Deprecations/notes: dees-pdf-preview and legacy dees-pdf marked as deprecated in favor of new viewers/tiles
+- Dependency bumps in package.json: @design.estate/dees-wcctools -> ^3.8.0, @git.zone/tstest -> ^3.1.8
+
+## 2026-01-26 - 3.38.0 - feat(appui)
+add app shell and bottom bar APIs, new input components, and update README component listings and docs
+
+- README: updated components count (80+ → 70+), reorganized categories (added App Shell / Pre-built Templates, renamed Workspace/IDE) and improved typography
+- Document listing: added DeesActionbar, DeesInputToggle, DeesInputCode, DeesAppuiBottombar and other component entries
+- Menu item interface: added closeable and onClose properties for dismissible menu items
+- IViewDefinition: expanded content type to accept element constructors and async content, added badgeVariant and cache flags
+- New interfaces added: IBottomBarWidget, IBottomBarAction, IViewActivationContext to support bottom bar widgets/actions and view activation context
+
+## 2026-01-25 - 3.37.1 - fix(editor)
+fix monaco/editor layout, update dev deps, simplify watch script and remove Playwright snapshots
+
+- Make dees-input-code host and inner wrappers flex so Monaco editor grows to fill available height (set flex, min-height and height:100% where needed).
+- Set dees-workspace-monaco and editor-wrapper to stretch so the embedded Monaco editor fills the component.
+- Bump dev dependencies: @git.zone/tsbuild -> ^4.1.2, @git.zone/tsbundle -> ^2.8.3, @git.zone/tstest -> ^3.1.7, @git.zone/tswatch -> ^3.0.1; also bump @types/node -> ^25.0.10 and lucide -> ^0.563.0.
+- Change npm script: watch from "tswatch element" to "tswatch" and add @git.zone/tswatch preset in npmextra.json.
+- Add .playwright-mcp/ to .gitignore and remove many Playwright screenshot/test artifact PNGs to keep repo tidy.
+
+## 2026-01-13 - 3.37.0 - feat(dees-button,dees-statsgrid)
+add unified icon property and icon-position support to dees-button; add partition and disk tile types to dees-statsgrid
+
+- dees-button: introduce icon (string) and iconPosition ('left'|'right') properties; extractLightDom() migrates legacy <dees-icon> slotted usage into properties and supports icon-only buttons
+- dees-button: render left/right icon, hide text for icon-only size; preserve backward compatibility for old type mappings
+- Demo updates: convert iconFA attributes to new icon syntax (e.g. 'fa:plus', 'lucide:Search') and add new icon-via-property examples and event logging
+- dees-statsgrid: add IPartitionData and IDiskData interfaces and new tile types 'partition' and 'disk' with rendering, styles and thresholds (usage, filesystem, mountpoint, capacity, iops, health)
+- dees-statsgrid.demo: add Disk & Storage demo panel with sample partition and disk tiles and configuration notes
+- misc: added/updated many demo images and metadata to reflect new icon/tile features
+
+## 2026-01-12 - 3.36.0 - feat(dees-chart-log)
+add xterm search addon support and enhance chart log demo with structured/raw (Docker-like) logs and themeable styles
+
+- Add IXtermSearchAddon and IXtermSearchAddonBundle types and integrate xterm-addon-search loading in DeesServiceLibLoader with caching and preload support
+- Expose new types in services index and add xtermAddonSearch version to CDN_VERSIONS
+- Enhance dees-chart-log demo: separate structured and raw (docker) log panels, add Docker/ANSI log templates, start/stop controls for each simulation, and raw log writing
+- Switch demo styling to cssManager theme-aware CSS, and import css helpers from dees-element
+- Add many .playwright-mcp PNG assets used by demos/tests
+
+## 2026-01-12 - 3.35.1 - fix(dees-statsgrid)
+center CPU core bars when they occupy less than ~66% of the tile and switch bar fills to absolute positioning for correct alignment and smoother transitions
+
+- Add .cpu-cores-bars.centered CSS rule to horizontally center the bars when appropriate.
+- Compute shouldCenter by estimating max bars width (cores * 24px + gaps) and comparing to estimated tile content width (accounts for columnSpan, minTileWidth, gap and ~32px padding), using a 66.6% threshold.
+- Change .cpu-core-bar-container to position: relative and .cpu-core-bar-fill to position: absolute (bottom:0; left:0; right:0) to ensure correct vertical alignment and smoother height transitions.
+
+## 2026-01-12 - 3.35.0 - feat(dees-statsgrid)
+add cpuCores tile type with column spanning, rendering, demo and docs
+
+- Introduce ICpuCore and coresData on IStatsTile to represent per-core usage
+- Implement renderCpuCores with responsive vertical bars, color thresholds (low/medium/high) and average usage header
+- Add columnSpan support for tiles and apply it to grid items (style grid-column: span N)
+- Add demo entries (8/16/32 core examples), Randomize grid action and updated demo layout
+- Document StatsGrid enhancements in readme.hints.md (usage examples and available tile types)
+- Bump devDependencies (@git.zone/tsbuild, @git.zone/tsbundle, @types/node), simplify build script to use tsbundle, and add @git.zone/tsbundle config in npmextra.json
+
+## 2026-01-12 - 3.34.1 - fix(deps)
+move @design.estate/dees-wcctools from devDependencies to dependencies
+
+- Promoted @design.estate/dees-wcctools@^3.7.1 to runtime dependencies so it will be installed in production builds.
+
+## 2026-01-07 - 3.34.0 - feat(dees-input-toggle)
+Add DeesInputToggle component (toggle switch) with demo and exports; integrate into inputs and DeesForm
+
+- New UI input component: ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.ts — toggle switch with pointer drag, keyboard support, value syncing and DeesInputBase integration.
+- Interactive demo added: ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts demonstrating usage, batch operations and event handling.
+- Module exports updated: added ts_web/elements/00group-input/dees-input-toggle/index.ts and exported from ts_web/elements/00group-input/index.ts.
+- DeesForm integration: imported DeesInputToggle and added it to the form components array and input union types in ts_web/elements/00group-form/dees-form/dees-form.ts
+
+## 2026-01-06 - 3.33.0 - feat(dees-statsgrid)
+add multiPercentage tile type to stats grid
+
+- Add new 'multiPercentage' type to IStatsTile (percentages: [{label, value, color?}])
+- Implement renderMultiPercentage() to render up to 3 percentage items with label, value and colored progress bars
+- Add CSS styles for multi-percentage layout, bars, labels and values
+- Update demo to replace 'Error Rate' tile with a 'Resource Usage' multiPercentage example (CPU, Memory, Disk)
+- Change is additive and backward-compatible with existing tile types
+
+## 2026-01-04 - 3.32.0 - feat(demo)
+add demoGroup metadata to components and update related dependencies
+
+- Add public static demoGroup properties to many components to categorize demos (groups added: App UI, Button, Chart, Data View, Form, Input, PDF, Simple, Workspace).
+- Bump package deps/devDeps: @design.estate/dees-domtools -> ^2.3.7, @design.estate/dees-element -> ^2.1.5, @design.estate/dees-wcctools -> ^3.7.1.
+- Clean up package.json deps (removed duplicate entries and removed 'lit' dependency).
+- Refactor dees-pdf-viewer to use consolidated directives import (directives.keyed and directives.repeat) instead of separate keyed/repeat imports.
+
+## 2026-01-04 - 3.31.0 - feat(dees-input-list)
+enhance drag-and-drop reordering for dees-input-list and migrate tests to chromium runner
+
+- Add rich drag state to dees-input-list: dragStartY, dragCurrentY, targetIndex, itemHeight and originalItemRects for accurate hit detection.
+- Introduce bound global drag handlers and centralized global drag end/cleanup logic (handleGlobalDragOver / handleGlobalDragEnd).
+- Improve drag visuals and animations: 'dragging', 'move-up', 'move-down' transforms, box-shadow, and smoother transitions; prevent hover styling while dragging.
+- Move reorder logic away from per-item drop to global drag end to avoid race/positioning issues and ensure consistent reflow and cleanup.
+- Migrate many browser test files to chromium-specific variants (added *.chromium.ts) and remove duplicate browser test counterparts.
+
 ## 2026-01-04 - 3.30.1 - fix(dees-statsgrid)
 refine spacing, sizing, and colors in dees-statsgrid for a tighter, more compact appearance
 

npmextra.json

@@ -49,5 +49,18 @@
   },
   "@ship.zone/szci": {
     "npmGlobalTools": []
+  },
+  "@git.zone/tsbundle": {
+    "bundles": [
+      {
+        "from": "./ts_web/index.ts",
+        "to": "./dist_bundle/bundle.js",
+        "outputMode": "bundle",
+        "bundler": "esbuild"
+      }
+    ]
+  },
+  "@git.zone/tswatch": {
+    "preset": "element"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.30.1",
+  "version": "3.41.2",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -8,16 +8,17 @@
   "type": "module",
   "scripts": {
     "test": "tstest test/ --web --verbose --timeout 30 --logfile",
-    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild",
-    "watch": "tswatch element",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle",
+    "watch": "tswatch",
     "buildDocs": "tsdoc",
     "postinstall": "node scripts/update-monaco-version.cjs"
   },
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.3.6",
-    "@design.estate/dees-element": "^2.1.3",
+    "@design.estate/dees-domtools": "^2.3.8",
+    "@design.estate/dees-element": "^2.1.6",
+    "@design.estate/dees-wcctools": "^3.8.0",
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "@fortawesome/free-brands-svg-icons": "^7.1.0",
     "@fortawesome/free-regular-svg-icons": "^7.1.0",
@@ -25,6 +26,7 @@
     "@push.rocks/smarti18n": "^1.0.4",
     "@push.rocks/smartpromise": "^4.2.0",
     "@push.rocks/smartstring": "^4.1.0",
+    "@tempfix/webcontainer__api": "1.6.1",
     "@tiptap/core": "^2.23.0",
     "@tiptap/extension-link": "^2.23.0",
     "@tiptap/extension-text-align": "^2.23.0",
@@ -32,25 +34,22 @@
     "@tiptap/extension-underline": "^2.23.0",
     "@tiptap/starter-kit": "^2.23.0",
     "@tsclass/tsclass": "^9.3.0",
-    "@tempfix/webcontainer__api": "1.6.1",
     "apexcharts": "^5.3.6",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
-    "lit": "^3.3.1",
-    "lucide": "^0.562.0",
+    "lucide": "^0.563.0",
     "monaco-editor": "0.55.1",
     "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
-    "@design.estate/dees-wcctools": "^3.4.0",
-    "@git.zone/tsbuild": "^4.0.2",
-    "@git.zone/tsbundle": "^2.6.3",
-    "@git.zone/tstest": "^3.1.4",
-    "@git.zone/tswatch": "^2.3.13",
+    "@git.zone/tsbuild": "^4.1.2",
+    "@git.zone/tsbundle": "^2.8.3",
+    "@git.zone/tstest": "^3.1.8",
+    "@git.zone/tswatch": "^3.0.1",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@types/node": "^25.0.3"
+    "@types/node": "^25.0.10"
   },
   "files": [
     "ts/**/*",

readme.hints.md

@@ -910,4 +910,201 @@ appui.getBottomBarVisible();
 ### Files:
 - `ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.ts` - Main component
 - `ts_web/elements/00group-appui/dees-appui-bottombar/dees-appui-bottombar.demo.ts` - Demo
-- `ts_web/elements/interfaces/appconfig.ts` - New interfaces added
+- `ts_web/elements/interfaces/appconfig.ts` - New interfaces added
+
+## Media Components (2026-01-26)
+
+New media viewer components and a unified preview composite component.
+
+### Directory: `ts_web/elements/00group-media/`
+
+#### dees-image-viewer
+- Image display with zoom, pan, fit, and download controls
+- Properties: `src`, `alt`, `fit` ('contain'|'cover'|'actual'), `showToolbar`
+- Features: mouse wheel zoom, click-drag pan, double-click toggle, checkerboard transparency background
+- Toolbar matches PDF viewer pattern (48px height, 32px buttons, 16px icons, 6px border-radius)
+
+#### dees-audio-viewer
+- Audio player with waveform visualization via Web Audio API
+- Properties: `src`, `title`, `artist`, `showWaveform`, `autoplay`, `loop`
+- Features: canvas waveform rendering, play/pause, seek, volume control, mute toggle, loop toggle
+- Uses `HTMLAudioElement` for playback, `AudioContext.decodeAudioData` for waveform data
+
+#### dees-video-viewer
+- Video player with custom overlay controls
+- Properties: `src`, `poster`, `showControls`, `autoplay`, `loop`, `muted`
+- Features: custom controls bar with gradient, seekbar, volume slider, fullscreen toggle, auto-hide controls, 16:9 aspect ratio
+
+### dees-preview (Composite Component)
+- Auto-detects content type and delegates to the appropriate viewer
+- Directory: `ts_web/elements/dees-preview/`
+- Properties: `url`, `file` (File object), `base64`, `textContent`, `contentType` (override), `language`, `mimeType`, `filename`, `showToolbar`, `showFilename`
+- Content type detection priority: explicit override → MIME type → file extension → fallback
+- Renders: image→DeesImageViewer, pdf→DeesPdfViewer, code→DeesDataviewCodebox, audio→DeesAudioViewer, video→DeesVideoViewer, text→pre, unknown→placeholder
+- Header bar with file type icon, filename, and type badge
+
+### dees-dataview-codebox modification
+- Removed `<dees-windowcontrols>` elements from the appbar (Step 1 of the plan)
+- Now shows clean centered filename title bar without fake window buttons
+
+### Icon Sizing Convention
+- All `dees-icon` elements in buttons need explicit `font-size: 16px` CSS rule
+- Toolbar buttons: 32px × 32px, border-radius: 6px
+- Placeholder/error icons: `font-size: 32px`
+- Pattern: `.button-class dees-icon { font-size: 16px; }`
+
+## Tile Component System (2026-01-27)
+
+A family of 200×260px content preview cards with a shared abstract base class. All tiles support lazy loading (IntersectionObserver with 200px margin), hover lift effect, click events, loading/error states, and three sizes (small: 150×195, default: 200×260, large: 250×325).
+
+### Architecture
+
+- **DeesTileBase** (`dees-tile-shared/DeesTileBase.ts`) — Abstract base class extending DeesElement
+  - Common properties: `clickable`, `loading`, `error`, `size`, `label`
+  - IntersectionObserver lazy loading via `onBecameVisible()` hook
+  - Click dispatch via `tile-click` CustomEvent (detail from `getTileClickDetail()`)
+  - Subclasses implement `renderTileContent(): TemplateResult`
+
+### Components
+
+| Tag | Class | Description |
+|-----|-------|-------------|
+| `dees-tile-pdf` | `DeesTilePdf` | PDF page thumbnail with hover-to-browse pages. Canvas-rendered via PDF.js/CanvasPool. |
+| `dees-tile-image` | `DeesTileImage` | Image thumbnail with `object-fit: cover`, dimension detection on load |
+| `dees-tile-audio` | `DeesTileAudio` | Music icon + mini waveform (AudioContext decode), duration badge |
+| `dees-tile-video` | `DeesTileVideo` | Auto-captured first frame, duration badge, hover muted auto-preview |
+| `dees-tile-note` | `DeesTileNote` | First ~12 lines of text in monospace, gradient fade, optional language badge |
+| `dees-tile-folder` | `DeesTileFolder` | 2×2 grid of mini-previews (thumbnails or type icons), item count badge |
+
+### Deprecations
+
+- `dees-pdf-preview` → Use `dees-tile-pdf` instead. Old tag still works as a thin wrapper with console warning.
+- `dees-pdf` deprecation comment updated to reference `DeesTilePdf`.
+
+### File Structure
+
+All tile components live in `ts_web/elements/00group-media/dees-tile-*/`:
+- `component.ts` — Main component class
+- `demo.ts` — Demo function
+- `index.ts` — Re-export
+- `styles.ts` — (PDF tile only) Component-specific styles
+- Shared base: `dees-tile-shared/{DeesTileBase,styles,index}.ts`
+
+### Interface: ITileFolderItem
+```typescript
+interface ITileFolderItem {
+  type: 'pdf' | 'image' | 'audio' | 'video' | 'note' | 'folder' | 'unknown';
+  thumbnailSrc?: string;
+  name: string;
+}
+```
+
+## StatsGrid Enhancements (2026-01-12)
+
+### Column Spanning
+
+Tiles can now span multiple columns using the `columnSpan` property. This is useful for wider visualizations like the CPU cores tile.
+
+```typescript
+const tile: IStatsTile = {
+  id: 'wide-tile',
+  title: 'Wide Tile',
+  value: 100,
+  type: 'cpuCores',
+  columnSpan: 2,  // Spans 2 columns
+  coresData: [...]
+};
+```
+
+Note: On smaller screens where only 1 column fits, tiles will automatically fall back to single column width.
+
+### CPU Cores Tile Type
+
+New tile type `cpuCores` for visualizing multi-core CPU usage with vertical bars:
+
+```typescript
+interface ICpuCore {
+  id: string | number;
+  usage: number;  // 0-100
+  label?: string;
+}
+
+const cpuTile: IStatsTile = {
+  id: 'cpu-cores',
+  title: 'CPU Cores',
+  value: 0,  // Not used, avg is calculated from coresData
+  type: 'cpuCores',
+  icon: 'lucide:cpu',
+  columnSpan: 2,  // Recommended for 8+ cores
+  coresData: [
+    { id: 0, usage: 45, label: '0' },
+    { id: 1, usage: 72, label: '1' },
+    // ... more cores
+  ],
+  description: 'Intel i7 - 8 cores'
+};
+```
+
+Features:
+- Vertical bars showing individual core usage
+- Color-coded: green (<50%), yellow (50-80%), red (>80%)
+- Shows average usage in header
+- Core labels shown for 16 or fewer cores
+- Tooltips show exact usage per core
+- Responsive: bars flex to fill available width
+
+### Available Tile Types:
+- `number` - Simple numeric display
+- `gauge` - Semi-circular gauge with thresholds
+- `percentage` - Progress bar (0-100%)
+- `trend` - Sparkline with recent data
+- `text` - Text value display
+- `multiPercentage` - Multiple progress bars
+- `cpuCores` - Vertical bar visualization for CPU cores
+
+## Component Group Taxonomy (2026-01-27)
+
+All components are organized into `00group-*` directories with 14 groups visible in the wcctools sidebar. The `demoGroups` property (plural, `string[]`) replaces the old `demoGroup` (singular). Components can belong to multiple groups.
+
+### Group Directories
+| Directory | Group Name | Count |
+|-----------|-----------|-------|
+| `00group-appui` | App UI | 10 |
+| `00group-button` | Button | 3 |
+| `00group-chart` | Chart | 2 |
+| `00group-dataview` | Data View | 4 |
+| `00group-feedback` | Feedback | 6 |
+| `00group-form` | Form | 2 |
+| `00group-input` | Input | 18 |
+| `00group-layout` | Layout | 7 |
+| `00group-media` | Media | 14 (viewers + PDF + tiles) |
+| `00group-overlay` | Overlay | 4 |
+| `00group-simple` | Simple | 3 |
+| `00group-utility` | Utility | 5 |
+| `00group-workspace` | Workspace | 9 |
+| `00group-runtime` | (internal) | - |
+
+### Multi-Group Components
+Some components appear in multiple groups via `demoGroups = ['Primary', 'Secondary']`:
+- `dees-chart-log`: Chart, Workspace
+- `dees-dataview-codebox`: Data View, Workspace
+- `dees-input-code`: Input, Workspace
+- `dees-input-wysiwyg`: Input, Workspace
+- `dees-form-submit`: Form, Button
+- `dees-preview`: Media, Data View
+- `dees-pdf*` / `dees-tile-pdf`: Media, PDF
+- `dees-stepper`: Layout, Form
+- `dees-label`: Layout, Input
+- `dees-toast`: Feedback, Overlay
+- `dees-actionbar`: Feedback, Overlay
+
+### Import Conventions
+- Within same group: `import '../sibling-component/file.js'`
+- Cross-group (from depth-2): `import '../../00group-X/component/file.js'`
+- Shared utilities: `import '../../00plugins.js'`, `import '../../00theme.js'`, etc.
+
+### Key Notes
+- The old `demoGroup` property (singular, string) is fully removed
+- All 79 components with demos use `demoGroups` (plural, string[])
+- `00group-pdf` no longer exists; PDF components are in `00group-media`
+- `dees-search` and `dees-tooltip` remain standalone (no demos)

readme.md

@@ -1,6 +1,6 @@
 # @design.estate/dees-catalog
 
-A comprehensive web components library built with TypeScript and LitElement, providing **80+ production-ready UI components** for building modern web applications with consistent design and behavior. 🚀
+A comprehensive web components library built with TypeScript and LitElement, providing **90+ production-ready UI components** for building modern web applications with consistent design and behavior. 🚀
 
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
 [![LitElement](https://img.shields.io/badge/LitElement-4.0+-orange.svg)](https://lit.dev/)
@@ -11,12 +11,15 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 
 ## ✨ Features
 
-- 🎨 **Consistent Design System** - Beautiful, cohesive components following modern UI/UX principles
-- 🌙 **Dark/Light Theme Support** - All components automatically adapt to your theme
-- ⌨️ **Keyboard Accessible** - Full keyboard navigation and ARIA support
-- 📱 **Responsive** - Mobile-first design that works across all screen sizes
-- 🔧 **TypeScript-First** - Fully typed APIs with excellent IDE support
-- 🧩 **Modular** - Use only what you need, tree-shakeable architecture
+- 🎨 **Consistent Design System** — Beautiful, cohesive components following modern UI/UX principles
+- 🌙 **Dark/Light Theme Support** — All components automatically adapt to your theme
+- ⌨️ **Keyboard Accessible** — Full keyboard navigation and ARIA support
+- 📱 **Responsive** — Mobile-first design that works across all screen sizes
+- 🔧 **TypeScript-First** — Fully typed APIs with excellent IDE support
+- 🧩 **Modular** — Use only what you need, tree-shakeable architecture
+- 🏗️ **Full App Shell** — `dees-appui` provides a complete application framework with menus, routing, activity log, and bottom bar
+- 🎬 **Media Components** — Rich tile-based previews for PDFs, images, audio, video, notes, and folders
+- 💻 **IDE Workspace** — Full workspace component with Monaco editor, file tree, terminal, and diff viewer
 
 ## 📦 Installation
 
@@ -52,16 +55,17 @@ For developers working on this library, please refer to the [UI Components Playb
 
 | Category | Components |
 |----------|------------|
-| **Core UI** | [`DeesButton`](#deesbutton), [`DeesButtonExit`](#deesbuttonexit), [`DeesButtonGroup`](#deesbuttongroup), [`DeesBadge`](#deesbadge), [`DeesChips`](#deeschips), [`DeesHeading`](#deesheading), [`DeesHint`](#deeshint), [`DeesIcon`](#deesicon), [`DeesLabel`](#deeslabel), [`DeesPanel`](#deespanel), [`DeesSearchbar`](#deessearchbar), [`DeesSpinner`](#deesspinner), [`DeesToast`](#deestoast), [`DeesWindowcontrols`](#deeswindowcontrols) |
-| **Forms** | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputList`](#deesinputlist), [`DeesInputProfilepicture`](#deesinputprofilepicture), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesFormSubmit`](#deesformsubmit) |
-| **Layout** | [`DeesAppui`](#deesappui), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
+| **Core UI** | [`DeesButton`](#deesbutton), [`DeesButtonExit`](#deesbuttonexit), [`DeesButtonGroup`](#deesbuttongroup), [`DeesBadge`](#deesbadge), [`DeesChips`](#deeschips), [`DeesHeading`](#deesheading), [`DeesHint`](#deeshint), [`DeesIcon`](#deesicon), [`DeesLabel`](#deeslabel), [`DeesPanel`](#deespanel), [`DeesSearchbar`](#deessearchbar), [`DeesSpinner`](#deesspinner), [`DeesToast`](#deestoast), [`DeesWindowcontrols`](#deeswindowcontrols), [`DeesActionbar`](#deesactionbar) |
+| **Forms** | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputToggle`](#deesinputtoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputList`](#deesinputlist), [`DeesInputProfilepicture`](#deesinputprofilepicture), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesInputCode`](#deesinputcode), [`DeesFormSubmit`](#deesformsubmit) |
+| **App Shell (Layout)** | [`DeesAppui`](#deesappui-️), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiBottombar`](#deesappuibottombar), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
 | **Data Display** | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination) |
+| **Media & Tiles** | [`DeesTilePdf`](#deestilepdf), [`DeesTileImage`](#deestileimage), [`DeesTileAudio`](#deestileaudio), [`DeesTileVideo`](#deestilevideo), [`DeesTileNote`](#deestilenote), [`DeesTileFolder`](#deestilefolder), [`DeesPreview`](#deespreview), [`DeesPdfViewer`](#deespdfviewer), [`DeesPdfPreview`](#deespdfpreview), [`DeesImageViewer`](#deesimageviewer), [`DeesAudioViewer`](#deesaudioviewer), [`DeesVideoViewer`](#deesvideoviewer) |
 | **Visualization** | [`DeesChartArea`](#deeschartarea), [`DeesChartLog`](#deeschartlog) |
 | **Dialogs & Overlays** | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) |
 | **Navigation** | [`DeesStepper`](#deesstepper), [`DeesProgressbar`](#deesprogressbar) |
-| **Development** | [`DeesEditor`](#deeseditor), [`DeesEditorMarkdown`](#deeseditormarkdown), [`DeesEditorMarkdownoutlet`](#deeseditormarkdownoutlet), [`DeesTerminal`](#deesterminal), [`DeesUpdater`](#deesupdater) |
+| **Workspace / IDE** | [`DeesWorkspace`](#deesworkspace), [`DeesWorkspaceMonaco`](#deesworkspacemonaco), [`DeesWorkspaceDiffEditor`](#deesworkspacediffeditor), [`DeesWorkspaceFiletree`](#deesworkspacefiletree), [`DeesWorkspaceTerminal`](#deesworkspaceterminal), [`DeesWorkspaceTerminalPreview`](#deesworkspaceterminalpreview), [`DeesWorkspaceMarkdown`](#deesworkspacemarkdown), [`DeesWorkspaceMarkdownoutlet`](#deesworkspacemarkdownoutlet), [`DeesWorkspaceBottombar`](#deesworkspacebottombar) |
 | **Theming** | [`DeesTheme`](#deestheme) |
-| **Auth & Utilities** | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
+| **Pre-built Templates** | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
 | **Shopping** | [`DeesShoppingProductcard`](#deesshoppingproductcard) |
 
 ---
@@ -117,14 +121,14 @@ Interactive chips/tags with selection capabilities.
 Display icons from FontAwesome and Lucide icon libraries with library prefixes.
 
 ```typescript
-// FontAwesome icons - use 'fa:' prefix
+// FontAwesome icons — use 'fa:' prefix
 <dees-icon
   icon="fa:check"       // FontAwesome icon with fa: prefix
   iconSize="24"         // Size in pixels
   color="#22c55e"       // Optional: custom color
 ></dees-icon>
 
-// Lucide icons - use 'lucide:' prefix
+// Lucide icons — use 'lucide:' prefix
 <dees-icon
   icon="lucide:menu"    // Lucide icon with lucide: prefix
   iconSize="24"         // Size in pixels
@@ -134,7 +138,7 @@ Display icons from FontAwesome and Lucide icon libraries with library prefixes.
 
 // Legacy API (deprecated but still supported)
 <dees-icon
-  iconFA="check"        // Without prefix - assumes FontAwesome
+  iconFA="check"        // Without prefix — assumes FontAwesome
 ></dees-icon>
 ```
 
@@ -287,6 +291,18 @@ Window control buttons (minimize, maximize, close) for desktop-like applications
 ></dees-windowcontrols>
 ```
 
+#### `DeesActionbar`
+Floating action bar for contextual actions.
+
+```typescript
+<dees-actionbar
+  .actions=${[
+    { icon: 'lucide:save', label: 'Save', action: () => handleSave() },
+    { icon: 'lucide:trash', label: 'Delete', action: () => handleDelete() }
+  ]}
+></dees-actionbar>
+```
+
 ---
 
 ### Form Components
@@ -331,6 +347,18 @@ Checkbox input component for boolean values.
 ></dees-input-checkbox>
 ```
 
+#### `DeesInputToggle`
+Toggle switch component for boolean on/off states.
+
+```typescript
+<dees-input-toggle
+  key="darkMode"
+  label="Enable Dark Mode"
+  .value=${true}
+  @change=${handleToggle}
+></dees-input-toggle>
+```
+
 #### `DeesInputDropdown`
 Dropdown selection component with search and filtering capabilities.
 
@@ -658,6 +686,19 @@ Advanced block-based editor with slash commands and rich content blocks.
 - Collaborative editing ready
 - Extensible block types
 
+#### `DeesInputCode`
+Code input component for editing source code with syntax highlighting.
+
+```typescript
+<dees-input-code
+  key="snippet"
+  label="Code Snippet"
+  .value=${codeString}
+  language="typescript"
+  @change=${handleCodeChange}
+></dees-input-code>
+```
+
 #### `DeesFormSubmit`
 Submit button component specifically designed for `DeesForm`.
 
@@ -670,10 +711,10 @@ Submit button component specifically designed for `DeesForm`.
 
 ---
 
-### Layout Components
+### App Shell (Layout) Components
 
-#### `DeesAppui`
-A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, and view management.
+#### `DeesAppui` 🏗️
+A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, bottom bar, and view management.
 
 > **Full API Documentation**: See [ts_web/elements/00group-appui/dees-appui/readme.md](./ts_web/elements/00group-appui/dees-appui/readme.md) for complete documentation including all programmatic APIs, view lifecycle hooks, and TypeScript interfaces.
 
@@ -690,7 +731,6 @@ class MyApp extends DeesElement {
   async firstUpdated() {
     this.appui = this.shadowRoot.querySelector('dees-appui');
 
-    // Configure with views and menu
     this.appui.configure({
       branding: { logoIcon: 'lucide:box', logoText: 'My App' },
       views: [
@@ -700,7 +740,13 @@ class MyApp extends DeesElement {
       mainMenu: {
         sections: [{ name: 'Main', views: ['dashboard', 'settings'] }]
       },
-      defaultView: 'dashboard'
+      defaultView: 'dashboard',
+      bottomBar: {
+        visible: true,
+        widgets: [
+          { id: 'status', iconName: 'lucide:activity', label: 'Online', status: 'success' }
+        ]
+      }
     });
   }
 
@@ -710,43 +756,123 @@ class MyApp extends DeesElement {
 }
 ```
 
-**Key Features:**
-- **Configure API**: Single `configure()` method for complete app setup
-- **View Management**: Automatic view caching, lazy loading, and lifecycle hooks
-- **Programmatic APIs**: Full control over AppBar, Main Menu, Secondary Menu, Content Tabs, and Activity Log
-- **View Lifecycle Hooks**: `onActivate()`, `onDeactivate()`, and `canDeactivate()` for view components
-- **Hash-based Routing**: Automatic URL synchronization with view navigation
-- **RxJS Observables**: `viewChanged$` and `viewLifecycle$` for reactive programming
-- **TypeScript-first**: Typed `IViewActivationContext` passed to views on activation
-- **Activity Log Toggle**: Built-in appbar button to show/hide activity panel with entry count badge
+**Architecture Overview:**
 
-**Programmatic APIs include:**
-- `navigateToView(viewId, params?)` - Navigate between views
-- `setAppBarMenus()`, `setBreadcrumbs()`, `setUser()` - Control the app bar
-- `setMainMenu()`, `setMainMenuSelection()`, `setMainMenuBadge()` - Control main navigation
-- `setMainMenuCollapsed()`, `setMainMenuVisible()` - Control main menu visibility
-- `setSecondaryMenu()`, `setSecondaryMenuCollapsed()`, `setSecondaryMenuVisible()` - Control secondary menu
-- `setContentTabs()`, `setContentTabsVisible()` - Control view-specific UI
-- `activityLog.add()`, `activityLog.addMany()`, `activityLog.clear()` - Manage activity entries
-- `setActivityLogVisible()`, `toggleActivityLog()`, `getActivityLogVisible()` - Control activity panel
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  AppBar (dees-appui-appbar)                                         │
+│  ├── Menus (File, Edit, View...)                                    │
+│  ├── Breadcrumbs                                                    │
+│  ├── User Profile + Dropdown                                        │
+│  └── Activity Log Toggle                                            │
+├─────────────┬───────────────────────────────────┬───────────────────┤
+│ Main Menu   │  Content Area                     │  Activity Log     │
+│ (collapsed/ │  ├── Content Tabs                 │  (slide panel)    │
+│  expanded)  │  │   (closable, from tables/lists)│                   │
+│             │  └── View Container               │                   │
+│ ┌─────────┐ │      └── Active View              │                   │
+│ │ 🏠 Home │ ├─────────────────────────────────┐ │                   │
+│ │ 📁 Files│ │ Secondary Menu                  │ │                   │
+│ │ ⚙ Set.. │ │  ├── Collapsible Groups         │ │                   │
+│ │         │ │  │   ├── Tabs / Actions          │ │                   │
+│ └─────────┘ │  │   ├── Filters / Links         │ │                   │
+│             │  │   └── Dividers / Headers       │ │                   │
+├─────────────┴──┴───────────────────────────────┴───────────────────┤
+│  Bottom Bar (dees-appui-bottombar) — 24px status bar                │
+│  ├── Status widgets (left/right)                                    │
+│  └── Action buttons (left/right)                                    │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**Configuration (`IAppConfig`):**
 
-**View Visibility Control:**
 ```typescript
-// In your view's onActivate hook
-onActivate(context: IViewActivationContext) {
-  // Hide secondary menu for a fullscreen view
-  context.appui.setSecondaryMenuVisible(false);
-
-  // Hide content tabs
-  context.appui.setContentTabsVisible(false);
-
-  // Collapse main menu to give more space
-  context.appui.setMainMenuCollapsed(true);
+interface IAppConfig {
+  branding?: { logoIcon?: string; logoText?: string };
+  appBar?: IAppBarConfig;
+  views: IViewDefinition[];
+  mainMenu?: IMainMenuConfig;
+  defaultView?: string;
+  activityLog?: IActivityLogConfig;
+  bottomBar?: IBottomBarConfig;
+  onViewChange?: (viewId: string, view: IViewDefinition) => void;
+  onSearch?: (query: string) => void;
 }
 ```
 
+**Key Features:**
+- 🔧 **Configure API** — Single `configure()` method for complete app setup
+- 📄 **View Management** — Automatic view caching, lazy loading, and lifecycle hooks (`onActivate`, `onDeactivate`, `canDeactivate`)
+- 🧭 **Hash-based Routing** — Automatic URL synchronization with view navigation and parameterized routes
+- 📊 **Activity Log** — Slide-out panel with stacked entries, date grouping, search, and filtering
+- 📌 **Bottom Status Bar** — Configurable widgets and actions with status colors and loading states
+- 🎯 **RxJS Observables** — `viewChanged$` and `viewLifecycle$` for reactive programming
+- 🏷️ **TypeScript-first** — Typed `IViewActivationContext` passed to views on activation
+
+**Programmatic APIs:**
+
+| Area | Methods |
+|------|---------|
+| **Navigation** | `navigateToView(viewId, params?)`, `getCurrentView()`, `getViewRegistry()` |
+| **App Bar** | `setAppBarMenus()`, `updateAppBarMenu()`, `setBreadcrumbs()`, `setUser()`, `setProfileMenuItems()`, `setSearchVisible()`, `onSearch()`, `setWindowControlsVisible()` |
+| **Main Menu** | `setMainMenu()`, `updateMainMenuGroup()`, `addMainMenuItem()`, `removeMainMenuItem()`, `setMainMenuSelection()`, `setMainMenuCollapsed()`, `setMainMenuVisible()`, `setMainMenuBadge()`, `clearMainMenuBadge()` |
+| **Secondary Menu** | `setSecondaryMenu()`, `updateSecondaryMenuGroup()`, `addSecondaryMenuItem()`, `setSecondaryMenuSelection()`, `setSecondaryMenuCollapsed()`, `setSecondaryMenuVisible()`, `clearSecondaryMenu()` |
+| **Content Tabs** | `setContentTabs()`, `addContentTab()`, `removeContentTab()`, `selectContentTab()`, `getSelectedContentTab()`, `setContentTabsVisible()`, `setContentTabsAutoHide()` |
+| **Activity Log** | `activityLog.add()`, `activityLog.addMany()`, `activityLog.clear()`, `activityLog.getEntries()`, `activityLog.filter()`, `activityLog.search()`, `setActivityLogVisible()`, `toggleActivityLog()`, `getActivityLogVisible()` |
+| **Bottom Bar** | `bottomBar.addWidget()`, `bottomBar.updateWidget()`, `bottomBar.removeWidget()`, `bottomBar.getWidget()`, `bottomBar.clearWidgets()`, `bottomBar.addAction()`, `bottomBar.removeAction()`, `bottomBar.clearActions()`, `setBottomBarVisible()`, `getBottomBarVisible()` |
+| **Observables** | `viewChanged$`, `viewLifecycle$` |
+
+**View Lifecycle Hooks:**
+
+```typescript
+import { DeesElement, customElement } from '@design.estate/dees-element';
+import type { IViewActivationContext, IViewLifecycle } from '@design.estate/dees-catalog';
+
+@customElement('my-settings-view')
+class MySettingsView extends DeesElement implements IViewLifecycle {
+  // Called when view becomes visible
+  async onActivate(context: IViewActivationContext) {
+    const { appui, viewId, params } = context;
+
+    // Set view-specific secondary menu
+    appui.setSecondaryMenu({
+      heading: 'Settings',
+      groups: [{ name: 'Options', items: [...] }]
+    });
+
+    // Control visibility of other shell parts
+    appui.setContentTabsVisible(false);
+    appui.setSecondaryMenuVisible(true);
+  }
+
+  // Called when navigating away
+  onDeactivate() { /* cleanup */ }
+
+  // Return false or a message string to block navigation
+  canDeactivate(): boolean | string {
+    if (this.hasUnsavedChanges) return 'You have unsaved changes. Leave anyway?';
+    return true;
+  }
+}
+```
+
+**Secondary Menu Item Types:**
+
+The secondary menu supports **8 distinct item types** for building rich contextual sidebars:
+
+| Type | Description |
+|------|-------------|
+| **Tab** (default) | Selectable item that stays highlighted |
+| **Action** | Executes on click without staying selected (blue styling) |
+| **Filter** | Checkbox toggle for filtering |
+| **MultiFilter** | Collapsible multi-select filter box |
+| **Divider** | Visual separator line |
+| **Header** | Non-interactive section label |
+| **Link** | Opens an external URL |
+| **Danger Action** | Red-styled action with optional confirmation |
+
 #### `DeesAppuiMainmenu`
-Main navigation menu component for application-wide navigation.
+Main navigation menu component for application-wide navigation. Supports collapsed (icon-only) mode.
 
 ```typescript
 <dees-appui-mainmenu
@@ -759,12 +885,12 @@ Main navigation menu component for application-wide navigation.
       ]
     }
   ]}
-  collapsed           // Optional: show collapsed version
+  collapsed           // Optional: show collapsed icon-only version
 ></dees-appui-mainmenu>
 ```
 
 #### `DeesAppuiSecondarymenu`
-Secondary navigation component for sub-section selection with collapsible groups and badges.
+Secondary navigation component for sub-section selection with collapsible groups, badges, and 8 item types.
 
 ```typescript
 <dees-appui-secondarymenu
@@ -806,28 +932,12 @@ Professional application bar component with hierarchical menus, breadcrumb navig
   .menuItems=${[
     {
       name: 'File',
-      action: async () => {},  // No-op for parent menu items
+      action: async () => {},
       submenu: [
-        {
-          name: 'New File',
-          shortcut: 'Cmd+N',
-          iconName: 'file-plus',
-          action: async () => handleNewFile()
-        },
-        {
-          name: 'Open...',
-          shortcut: 'Cmd+O',
-          iconName: 'folder-open',
-          action: async () => handleOpen()
-        },
-        { divider: true },  // Menu separator
-        {
-          name: 'Save',
-          shortcut: 'Cmd+S',
-          iconName: 'save',
-          action: async () => handleSave(),
-          disabled: true  // Disabled state
-        }
+        { name: 'New File', shortcut: 'Cmd+N', iconName: 'file-plus', action: async () => handleNewFile() },
+        { name: 'Open...', shortcut: 'Cmd+O', iconName: 'folder-open', action: async () => handleOpen() },
+        { divider: true },
+        { name: 'Save', shortcut: 'Cmd+S', iconName: 'save', action: async () => handleSave(), disabled: true }
       ]
     }
   ]}
@@ -849,12 +959,12 @@ Professional application bar component with hierarchical menus, breadcrumb navig
 ```
 
 **Key Features:**
-- **Hierarchical Menu System** - Top-level menus with dropdown submenus, icons, and keyboard shortcuts
-- **Keyboard Navigation** - Full keyboard support (Tab, Arrow keys, Enter, Escape)
-- **Breadcrumb Navigation** - Customizable breadcrumb trail with click events
-- **User Account Section** - Avatar with status indicator and profile dropdown
-- **Activity Log Toggle** - Button with badge count to show/hide activity panel
-- **Accessibility** - Full ARIA support with menubar roles
+- **Hierarchical Menu System** — Top-level menus with dropdown submenus, icons, and keyboard shortcuts
+- **Keyboard Navigation** — Full keyboard support (Tab, Arrow keys, Enter, Escape)
+- **Breadcrumb Navigation** — Customizable breadcrumb trail with click events
+- **User Account Section** — Avatar with status indicator and profile dropdown
+- **Activity Log Toggle** — Button with badge count to show/hide activity panel
+- **Accessibility** — Full ARIA support with menubar roles
 
 #### `DeesAppuiActivitylog`
 Real-time activity log panel for displaying user actions and system events.
@@ -886,6 +996,61 @@ activityLog.search('settings');        // Search by message
 - Animated slide-in/out panel
 - Theme-aware styling
 
+#### `DeesAppuiBottombar`
+A 24px fixed-height status bar at the bottom of the application shell. Supports status widgets and action buttons positioned left or right.
+
+```typescript
+// Configure via DeesAppui
+appui.configure({
+  bottomBar: {
+    visible: true,
+    widgets: [
+      {
+        id: 'status',
+        iconName: 'lucide:activity',
+        label: 'System Online',
+        status: 'success',       // 'idle' | 'active' | 'success' | 'warning' | 'error'
+        tooltip: 'All systems operational',
+        onClick: () => console.log('Status clicked'),
+      },
+      {
+        id: 'version',
+        iconName: 'lucide:gitBranch',
+        label: 'v1.2.3',
+        position: 'right',
+      }
+    ],
+    actions: [
+      {
+        id: 'terminal',
+        iconName: 'lucide:terminal',
+        tooltip: 'Open Terminal',
+        position: 'right',
+        onClick: () => console.log('Terminal clicked'),
+      }
+    ]
+  }
+});
+
+// Programmatic updates
+appui.bottomBar.addWidget({ id: 'build', iconName: 'lucide:hammer', label: 'Building...', loading: true, status: 'active' });
+appui.bottomBar.updateWidget('build', { label: 'Build complete', loading: false, status: 'success' });
+appui.bottomBar.removeWidget('build');
+
+appui.bottomBar.addAction({ id: 'refresh', iconName: 'lucide:refreshCw', onClick: () => location.reload() });
+appui.bottomBar.removeAction('refresh');
+
+appui.setBottomBarVisible(false);
+```
+
+**Key Features:**
+- Configurable status widgets with icons, labels, and colored status indicators
+- Loading spinner state for widgets
+- Contextual actions with icon buttons
+- Left/right positioning for both widgets and actions
+- Tooltips on hover
+- Context menu support per widget
+
 #### `DeesAppuiTabs`
 Reusable tab component with horizontal/vertical layout support.
 
@@ -1007,7 +1172,7 @@ A responsive grid component for displaying statistical data with various visuali
       value: 125420,
       unit: '$',
       type: 'number',
-      icon: 'faDollarSign',
+      icon: 'lucide:dollarSign',
       description: '+12.5% from last month',
       color: '#22c55e'
     },
@@ -1016,7 +1181,7 @@ A responsive grid component for displaying statistical data with various visuali
       title: 'CPU Usage',
       value: 73,
       type: 'gauge',
-      icon: 'faMicrochip',
+      icon: 'lucide:cpu',
       gaugeOptions: {
         min: 0, max: 100,
         thresholds: [
@@ -1032,8 +1197,22 @@ A responsive grid component for displaying statistical data with various visuali
       value: '1.2k',
       unit: '/min',
       type: 'trend',
-      icon: 'faServer',
+      icon: 'lucide:server',
       trendData: [45, 52, 38, 65, 72, 68, 75, 82, 79, 85, 88, 92]
+    },
+    {
+      id: 'cores',
+      title: 'CPU Cores',
+      value: 0,
+      type: 'cpuCores',
+      icon: 'lucide:cpu',
+      columnSpan: 2,
+      coresData: [
+        { id: 0, usage: 45, label: '0' },
+        { id: 1, usage: 72, label: '1' },
+        { id: 2, usage: 30, label: '2' },
+        { id: 3, usage: 88, label: '3' }
+      ]
     }
   ]}
   .minTileWidth=${250}
@@ -1041,6 +1220,8 @@ A responsive grid component for displaying statistical data with various visuali
 ></dees-statsgrid>
 ```
 
+**Tile Types:** `number`, `gauge`, `percentage`, `trend`, `text`, `multiPercentage`, `cpuCores`
+
 #### `DeesPagination`
 Pagination component for navigating through large datasets.
 
@@ -1056,6 +1237,146 @@ Pagination component for navigating through large datasets.
 
 ---
 
+### Media & Tile Components 🎬
+
+A rich collection of tile-based preview components for displaying media files in grids. All tiles share a consistent base class (`DeesTileBase`) with lazy loading via `IntersectionObserver`, hover interactions, click events, context menus, and three size variants (`small`, `default`, `large`).
+
+All tile badges use a unified styling system with label-awareness — when a `label` is set, bottom badges automatically shift up to avoid overlapping.
+
+#### `DeesTilePdf`
+PDF document tile with live page preview on hover.
+
+```typescript
+<dees-tile-pdf
+  pdfUrl="/documents/report.pdf"
+  label="Annual Report"
+  clickable
+  @tile-click=${handleClick}
+></dees-tile-pdf>
+```
+
+**Key Features:**
+- Renders first page as canvas preview
+- Hover to scrub through pages (mouse X position maps to page number)
+- Shows page count badge, hover page indicator
+- Detects A4/Letter vs non-standard aspect ratios
+
+#### `DeesTileImage`
+Image tile with lazy loading and dimension display.
+
+```typescript
+<dees-tile-image
+  src="/photos/landscape.jpg"
+  alt="Mountain landscape"
+  label="landscape.jpg"
+  clickable
+  @tile-click=${handleClick}
+></dees-tile-image>
+```
+
+**Key Features:**
+- Lazy loads image on scroll into view
+- Shows image dimensions on hover (e.g. "1920 × 1080")
+- Checkerboard background for transparent images
+
+#### `DeesTileAudio`
+Audio file tile with waveform visualization.
+
+```typescript
+<dees-tile-audio
+  src="/music/track.mp3"
+  title="Summer Vibes"
+  artist="DJ Example"
+  clickable
+  @tile-click=${handleClick}
+></dees-tile-audio>
+```
+
+**Key Features:**
+- Generates waveform visualization from audio data
+- Shows duration badge (e.g. "3:42")
+- Displays title and artist metadata
+- Play overlay on hover
+
+#### `DeesTileVideo`
+Video tile with thumbnail capture and hover preview.
+
+```typescript
+<dees-tile-video
+  src="/videos/intro.mp4"
+  poster="/thumbs/intro.jpg"
+  label="Introduction"
+  clickable
+  @tile-click=${handleClick}
+></dees-tile-video>
+```
+
+**Key Features:**
+- Auto-captures first frame as thumbnail (or uses provided `poster`)
+- Plays video preview on hover
+- Shows duration badge
+- Play button overlay
+
+#### `DeesTileNote`
+Code/text snippet tile with syntax-aware display.
+
+```typescript
+<dees-tile-note
+  title="config.ts"
+  language="TypeScript"
+  .content=${codeString}
+  clickable
+  @tile-click=${handleClick}
+></dees-tile-note>
+```
+
+**Key Features:**
+- Monospace font with line numbers
+- Language badge (top-right)
+- Scrollable content on hover (mouse X position controls scroll)
+- Line indicator badge while scrolling
+- Gradient fade at bottom
+
+#### `DeesTileFolder`
+Folder tile with 2×2 content preview grid.
+
+```typescript
+<dees-tile-folder
+  name="Project Assets"
+  .items=${[
+    { type: 'image', name: 'logo.png', thumbnailSrc: '/thumbs/logo.png' },
+    { type: 'pdf', name: 'spec.pdf' },
+    { type: 'audio', name: 'jingle.mp3' },
+    { type: 'video', name: 'demo.mp4' },
+  ]}
+  clickable
+  @tile-click=${handleClick}
+></dees-tile-folder>
+```
+
+**Key Features:**
+- 2×2 preview grid showing first 4 items (thumbnails or type icons)
+- Item count badge (e.g. "12 items")
+- Folder icon header with name
+- Supports: `pdf`, `image`, `audio`, `video`, `note`, `folder`, `unknown` types
+
+#### `DeesPreview`
+Unified preview component that auto-selects the right tile type based on content.
+
+#### `DeesPdfViewer` / `DeesPdfPreview`
+Full PDF viewing components with navigation controls.
+
+#### `DeesImageViewer`
+Full-screen image viewer with zoom and pan.
+
+#### `DeesAudioViewer`
+Audio playback component with waveform and controls.
+
+#### `DeesVideoViewer`
+Video playback component with standard controls.
+
+---
+
 ### Visualization Components
 
 #### `DeesChartArea`
@@ -1116,16 +1437,41 @@ DeesModal.createAndShow({
 ```
 
 #### `DeesContextmenu`
-Context menu component for right-click actions.
+Context menu component for right-click actions with nested submenu support.
 
 ```typescript
-<dees-contextmenu
-  .items=${[
-    { label: 'Edit', icon: 'edit', action: () => handleEdit() },
-    { label: 'Delete', icon: 'trash', action: () => handleDelete() }
-  ]}
-  position="right"
-></dees-contextmenu>
+// Programmatic usage
+DeesContextmenu.openContextMenuWithOptions(mouseEvent, [
+  {
+    name: 'Edit',
+    iconName: 'lucide:edit',
+    action: async () => handleEdit()
+  },
+  { divider: true },
+  {
+    name: 'More Options',
+    iconName: 'lucide:moreHorizontal',
+    submenu: [
+      { name: 'Duplicate', iconName: 'lucide:copy', action: async () => handleDuplicate() },
+      { name: 'Archive', iconName: 'lucide:archive', action: async () => handleArchive() },
+    ]
+  },
+  {
+    name: 'Delete',
+    iconName: 'lucide:trash2',
+    action: async () => handleDelete()
+  }
+]);
+
+// Component-based (implement getContextMenuItems on any element)
+class MyComponent extends DeesElement {
+  getContextMenuItems() {
+    return [
+      { name: 'View Details', iconName: 'lucide:eye', action: async () => { ... } },
+      { name: 'Edit', iconName: 'lucide:edit', action: async () => { ... } },
+    ];
+  }
+}
 ```
 
 #### `DeesSpeechbubble`
@@ -1189,7 +1535,7 @@ Progress indicator component for tracking completion status.
 Theme provider component that wraps children and provides CSS custom properties for consistent theming.
 
 ```typescript
-// Basic usage - wrap your app
+// Basic usage — wrap your app
 <dees-theme>
   <my-app></my-app>
 </dees-theme>
@@ -1217,76 +1563,71 @@ Theme provider component that wraps children and provides CSS custom properties
 
 ---
 
-### Development Components
+### Workspace / IDE Components 💻
 
-#### `DeesEditor`
-Code editor component with syntax highlighting and code completion, powered by Monaco Editor.
+A full-featured IDE workspace component suite for building browser-based code editors, terminal interfaces, and documentation viewers.
+
+#### `DeesWorkspace`
+Top-level workspace shell that composes editor, file tree, terminal, and bottom bar into an IDE-like layout.
 
 ```typescript
-<dees-editor
+<dees-workspace></dees-workspace>
+```
+
+#### `DeesWorkspaceMonaco`
+Monaco Editor integration for code editing with full IntelliSense, syntax highlighting, and language support.
+
+```typescript
+<dees-workspace-monaco
   .value=${code}
-  @change=${handleCodeChange}
   .language=${'typescript'}
-  .theme=${'vs-dark'}
-  .options=${{
-    lineNumbers: true,
-    minimap: { enabled: true },
-    autoClosingBrackets: 'always'
-  }}
-></dees-editor>
+  @change=${handleCodeChange}
+></dees-workspace-monaco>
 ```
 
-#### `DeesEditorMarkdown`
-Markdown editor component with live preview.
+#### `DeesWorkspaceDiffEditor`
+Side-by-side diff editor powered by Monaco for comparing file versions.
 
 ```typescript
-<dees-editor-markdown
-  .value=${markdown}
-  @change=${handleMarkdownChange}
-  .options=${{ preview: true, toolbar: true, spellcheck: true }}
-></dees-editor-markdown>
+<dees-workspace-diff-editor
+  .originalValue=${originalCode}
+  .modifiedValue=${modifiedCode}
+  .language=${'typescript'}
+></dees-workspace-diff-editor>
 ```
 
-#### `DeesEditorMarkdownoutlet`
-Markdown preview component for rendering markdown content.
+#### `DeesWorkspaceFiletree`
+File tree navigation component with expand/collapse, file icons, and selection.
 
 ```typescript
-<dees-editor-markdownoutlet
-  .markdown=${markdownContent}
-  .theme=${'github'}
-  allowHtml={false}
-></dees-editor-markdownoutlet>
+<dees-workspace-filetree
+  .files=${fileTreeData}
+  @file-select=${handleFileSelect}
+></dees-workspace-filetree>
 ```
 
-#### `DeesTerminal`
-Terminal emulator component for command-line interface.
+#### `DeesWorkspaceTerminal`
+Terminal emulator component powered by xterm.js.
 
 ```typescript
-<dees-terminal
-  .commands=${{
-    'echo': (args) => `Echo: ${args.join(' ')}`,
-    'help': () => 'Available commands: echo, help'
-  }}
-  .prompt=${'$'}
-  .welcomeMessage=${'Welcome! Type "help" for available commands.'}
-></dees-terminal>
+<dees-workspace-terminal></dees-workspace-terminal>
 ```
 
-#### `DeesUpdater`
-Component for managing application updates and version control.
+#### `DeesWorkspaceTerminalPreview`
+Terminal with integrated preview pane for output visualization.
 
-```typescript
-<dees-updater
-  .currentVersion=${'1.5.2'}
-  .checkInterval=${3600000}
-  .autoUpdate=${false}
-  @update-available=${handleUpdateAvailable}
-></dees-updater>
-```
+#### `DeesWorkspaceMarkdown`
+Markdown editor with live preview.
+
+#### `DeesWorkspaceMarkdownoutlet`
+Read-only markdown renderer for documentation display.
+
+#### `DeesWorkspaceBottombar`
+IDE-style bottom status bar for the workspace.
 
 ---
 
-### Auth & Utilities Components
+### Pre-built Templates
 
 #### `DeesSimpleAppdash`
 Simple application dashboard component for quick prototyping.
@@ -1360,6 +1701,8 @@ interface IMenuItem {
   action: () => void;
   badge?: string | number;
   badgeVariant?: 'default' | 'success' | 'warning' | 'error';
+  closeable?: boolean;
+  onClose?: () => void;
 }
 
 // Menu group interface for organized menus
@@ -1375,11 +1718,13 @@ interface IViewDefinition {
   id: string;
   name: string;
   iconName?: string;
-  content: string | HTMLElement | (() => TemplateResult);
+  content: string | (new () => HTMLElement) | (() => TemplateResult) | (() => Promise<any>);
   secondaryMenu?: ISecondaryMenuGroup[];
   contentTabs?: IMenuItem[];
   route?: string;
   badge?: string | number;
+  badgeVariant?: 'default' | 'success' | 'warning' | 'error';
+  cache?: boolean;
 }
 
 // Activity log entry
@@ -1392,6 +1737,43 @@ interface IActivityEntry {
   iconName?: string;
   data?: Record<string, unknown>;
 }
+
+// Bottom bar widget
+interface IBottomBarWidget {
+  id: string;
+  iconName?: string;
+  label?: string;
+  status?: 'idle' | 'active' | 'success' | 'warning' | 'error';
+  tooltip?: string;
+  loading?: boolean;
+  onClick?: () => void;
+  position?: 'left' | 'right';
+  order?: number;
+}
+
+// Bottom bar action button
+interface IBottomBarAction {
+  id: string;
+  iconName: string;
+  tooltip?: string;
+  onClick: () => void | Promise<void>;
+  disabled?: boolean;
+  position?: 'left' | 'right';
+}
+
+// View activation context (passed to onActivate)
+interface IViewActivationContext {
+  appui: DeesAppui;
+  viewId: string;
+  params?: Record<string, string>;
+}
+
+// Tile folder item (for DeesTileFolder)
+interface ITileFolderItem {
+  type: 'pdf' | 'image' | 'audio' | 'video' | 'note' | 'folder' | 'unknown';
+  thumbnailSrc?: string;
+  name: string;
+}
 ```
 
 ---

test/test.contextmenu-demo.chromium.ts

@@ -1,6 +1,6 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
-import { demoFunc } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.demo.js';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
+import { demoFunc } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.demo.js';
 
 tap.test('should render context menu demo', async () => {
   // Create demo container

test/test.contextmenu-nested-close.chromium.ts

@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
 
 tap.test('should close all parent menus when clicking action in nested submenu', async () => {
   let actionCalled = false;

test/test.contextmenu-shadowdom.chromium.ts

@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { DeesElement, customElement, html } from '@design.estate/dees-element';
 
 // Create a test element with shadow DOM

test/test.contextmenu.chromium.ts

@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
 
 tap.test('should show context menu with nested submenu', async () => {
   // Create a test element with context menu items

test/test.dashboardgrid-layout.node.ts

@@ -3,8 +3,8 @@ import { tap, expect } from '@git.zone/tstest/tapbundle';
 import {
   resolveWidgetPlacement,
   collectCollisions,
-} from '../ts_web/elements/dees-dashboardgrid/layout.ts';
-import type { DashboardWidget } from '../ts_web/elements/dees-dashboardgrid/types.ts';
+} from '../ts_web/elements/00group-layout/dees-dashboardgrid/layout.ts';
+import type { DashboardWidget } from '../ts_web/elements/00group-layout/dees-dashboardgrid/types.ts';
 
 tap.test('dashboardgrid does not overlap widgets after swap attempt', async () => {
   const widgets: DashboardWidget[] = [

test/test.wysiwyg-blocktype-change.chromium.ts

@@ -1,6 +1,6 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
 import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
 
 tap.test('should change block type via context menu', async () => {
   // Create WYSIWYG editor with a paragraph

test/test.wysiwyg-contextmenu.chromium.ts

@@ -1,6 +1,6 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
 import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
 
 tap.test('should show context menu on WYSIWYG blocks', async () => {
   // Create WYSIWYG editor

ts_web/00_commitinfo_data.ts

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

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

@@ -10,8 +10,8 @@ import {
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
-import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
-import '../../dees-icon/dees-icon.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 import type { IActivityEntry, IActivityLogAPI } from '../../interfaces/appconfig.js';
 import { demoFunc } from './dees-appui-activitylog.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
@@ -20,6 +20,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroups = ['App UI'];
 
   // INSTANCE PROPERTIES
   @state()

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

@@ -15,8 +15,8 @@ import { appuiAppbarStyles } from './styles.js';
 import { renderAppuiAppbar } from './template.js';
 
 // Import required components
-import '../../dees-icon/dees-icon.js';
-import '../../dees-windowcontrols/dees-windowcontrols.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+import '../../00group-utility/dees-windowcontrols/dees-windowcontrols.js';
 import '../dees-appui-profiledropdown/dees-appui-profiledropdown.js';
 
 declare global {
@@ -28,6 +28,7 @@ declare global {
 @customElement('dees-appui-appbar')
 export class DeesAppuiBar extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['App UI'];
 
   // INSTANCE PROPERTIES
   @property({ type: Array })

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

@@ -8,8 +8,8 @@ import {
   state,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import '../../dees-icon/dees-icon.js';
-import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import type {
   IBottomBarWidget,
   IBottomBarAction,
@@ -26,6 +26,7 @@ declare global {
 @customElement('dees-appui-bottombar')
 export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
   public static demo = demoFunc;
+  public static demoGroups = ['App UI'];
 
   // INSTANCE PROPERTIES
   @state()

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

@@ -31,6 +31,7 @@ export class DeesAppuiMaincontent extends DeesElement {
       </div>
     </dees-appui-maincontent>
   `;
+  public static demoGroups = ['App UI'];
 
   // INSTANCE
   @property({

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

@@ -11,7 +11,7 @@ import {
   css,
   cssManager,
 } from '@design.estate/dees-element';
-import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { demoFunc } from './dees-appui-mainmenu.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
 
@@ -22,6 +22,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 @customElement('dees-appui-mainmenu')
 export class DeesAppuiMainmenu extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['App UI'];
 
   // INSTANCE
 

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

@@ -35,6 +35,7 @@ export class DeesAppuiProfileDropdown extends DeesElement {
       .isOpen=${true}
     ></dees-appui-profiledropdown>
   `;
+  public static demoGroups = ['App UI'];
 
   @property({ type: Object })
   accessor user: {

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

@@ -1,8 +1,8 @@
 import * as plugins from '../../00plugins.js';
 import * as interfaces from '../../interfaces/index.js';
 
-import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
-import '../../dees-icon/dees-icon.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 
 import {
   DeesElement,
@@ -33,6 +33,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 @customElement('dees-appui-secondarymenu')
 export class DeesAppuiSecondarymenu extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['App UI'];
 
   // INSTANCE
 

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

@@ -18,6 +18,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 @customElement('dees-appui-tabs')
 export class DeesAppuiTabs extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['App UI'];
 
   // INSTANCE
   @property({

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

@@ -3,6 +3,8 @@ import type { DeesAppui } from './dees-appui.js';
 import type { IAppConfig, IViewActivationContext } from '../../interfaces/appconfig.js';
 import type * as interfaces from '../../interfaces/index.js';
 import '@design.estate/dees-wcctools/demotools';
+import '../../00group-dataview/dees-statsgrid/dees-statsgrid.js';
+import type { IStatsTile } from '../../00group-dataview/dees-statsgrid/dees-statsgrid.js';
 
 // Demo view component with lifecycle hooks
 @customElement('demo-dashboard-view')
@@ -12,6 +14,79 @@ class DemoDashboardView extends DeesElement {
 
   private ctx: IViewActivationContext;
 
+  private statsTiles: IStatsTile[] = [
+    {
+      id: 'users',
+      title: 'Active Users',
+      value: 1234,
+      type: 'number',
+      icon: 'lucide:users',
+      description: 'Online now',
+      color: '#22c55e'
+    },
+    {
+      id: 'api-calls',
+      title: 'API Calls',
+      value: 45200,
+      type: 'trend',
+      icon: 'lucide:activity',
+      description: '+12% from last hour',
+      color: '#3b82f6',
+      trendData: [32000, 35000, 38000, 41000, 39000, 42000, 45200]
+    },
+    {
+      id: 'health',
+      title: 'System Health',
+      value: 99.9,
+      unit: '%',
+      type: 'gauge',
+      icon: 'lucide:heart-pulse',
+      description: 'All systems operational',
+      color: '#10b981',
+      gaugeOptions: {
+        min: 0,
+        max: 100,
+        thresholds: [
+          { value: 80, color: '#ef4444' },
+          { value: 95, color: '#f59e0b' },
+          { value: 100, color: '#10b981' }
+        ]
+      }
+    },
+    {
+      id: 'response',
+      title: 'Avg Response',
+      value: 127,
+      unit: 'ms',
+      type: 'number',
+      icon: 'lucide:timer',
+      description: '-15ms from yesterday',
+      color: '#8b5cf6'
+    },
+    {
+      id: 'resources',
+      title: 'Resource Usage',
+      value: '',
+      type: 'multiPercentage',
+      icon: 'lucide:server',
+      percentages: [
+        { label: 'CPU', value: 67, color: '#3b82f6' },
+        { label: 'Memory', value: 84, color: '#8b5cf6' },
+        { label: 'Disk', value: 45, color: '#10b981' }
+      ]
+    },
+    {
+      id: 'requests',
+      title: 'Requests/sec',
+      value: 1850,
+      type: 'trend',
+      icon: 'lucide:zap',
+      description: 'Current throughput',
+      color: '#06b6d4',
+      trendData: [1200, 1400, 1350, 1600, 1750, 1680, 1850]
+    }
+  ];
+
   onActivate(context: IViewActivationContext) {
     this.ctx = context;
     this.activated = true;
@@ -83,21 +158,9 @@ class DemoDashboardView extends DeesElement {
         }
         h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 8px; }
         p { color: #737373; margin-bottom: 32px; }
-        .grid {
-          display: grid;
-          grid-template-columns: repeat(3, 1fr);
-          gap: 16px;
+        dees-statsgrid {
+          margin-bottom: 32px;
         }
-        .card {
-          background: rgba(255,255,255,0.03);
-          border: 1px solid rgba(255,255,255,0.08);
-          border-radius: 8px;
-          padding: 20px;
-        }
-        .card h3 { color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
-        .metric { font-size: 32px; font-weight: 700; color: #fafafa; }
-        .status { display: inline-block; padding: 2px 8px; border-radius: 9px; font-size: 12px; }
-        .status.active { background: #14532d; color: #4ade80; }
 
         .ctx-actions {
           margin-top: 32px;
@@ -147,23 +210,10 @@ class DemoDashboardView extends DeesElement {
       </style>
       <h1>Dashboard</h1>
       <p>Welcome back! Here's an overview of your system.</p>
-      <div class="grid">
-        <div class="card">
-          <h3>Active Users</h3>
-          <div class="metric">1,234</div>
-          <span class="status active">Online</span>
-        </div>
-        <div class="card">
-          <h3>API Calls</h3>
-          <div class="metric">45.2K</div>
-          <p style="color: #4ade80; font-size: 12px; margin: 0;">+12% from last hour</p>
-        </div>
-        <div class="card">
-          <h3>System Health</h3>
-          <div class="metric">99.9%</div>
-          <p style="color: #737373; font-size: 12px; margin: 0;">All systems operational</p>
-        </div>
-      </div>
+      <dees-statsgrid
+        .tiles=${this.statsTiles}
+        @tile-action=${(e: CustomEvent) => console.log('Tile action:', e.detail)}
+      ></dees-statsgrid>
 
       <div class="ctx-actions">
         <h2>Context Actions (ctx.appui)</h2>

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

@@ -39,6 +39,7 @@ declare global {
 @customElement('dees-appui')
 export class DeesAppui extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['App UI'];
 
   // ==========================================
   // REACTIVE OBSERVABLES (RxJS Subjects)

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

@@ -1,6 +1,6 @@
 import { html, css } from '@design.estate/dees-element';
 import '../00group-button/dees-button/dees-button.js';
-import '../dees-panel/dees-panel.js';
+import '../../00group-layout/dees-panel/dees-panel.js';
 import '@design.estate/dees-wcctools/demotools';
 
 export const demoFunc = () => html`

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

@@ -1,6 +1,6 @@
-import * as plugins from '../00plugins.js';
-import { zIndexRegistry } from '../00zindex.js';
-import { cssGeistFontFamily } from '../00fonts.js';
+import * as plugins from '../../00plugins.js';
+import { zIndexRegistry } from '../../00zindex.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
 import {
   cssManager,
   css,
@@ -12,13 +12,14 @@ import {
   property,
   state,
 } from '@design.estate/dees-element';
-import { DeesWindowLayer } from '../dees-windowlayer/dees-windowlayer.js';
-import '../dees-icon/dees-icon.js';
-import { themeDefaultStyles } from '../00theme.js';
+import { DeesWindowLayer } from '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 @customElement('dees-mobilenavigation')
 export class DeesMobilenavigation extends DeesElement {
   // STATIC
+  public static demoGroups = ['App UI'];
   public static demo = () => html`
     <dees-button @click=${() => {
       DeesMobilenavigation.createAndShow([

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

@@ -8,3 +8,4 @@ export * from './dees-appui-mainmenu/index.js';
 export * from './dees-appui-secondarymenu/index.js';
 export * from './dees-appui-profiledropdown/index.js';
 export * from './dees-appui-tabs/index.js';
+export * from './dees-mobilenavigation/index.js';

ts_web/elements/00group-button/dees-button-exit/dees-button-exit.ts

@@ -16,6 +16,7 @@ export class DeesButtonExit extends DeesElement {
   public static demo = () => html`
     <dees-button-exit></dees-button-exit>
   `;
+  public static demoGroups = ['Button'];
 
   // INSTANCE
   @property({

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

@@ -21,6 +21,7 @@ declare global {
 @customElement('dees-button-group')
 export class DeesButtonGroup extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['Button'];
 
   @property()
   accessor label: string = '';

ts_web/elements/00group-button/dees-button/dees-button.demo.ts

@@ -1,10 +1,10 @@
 import { html, css, cssManager, domtools } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../../dees-panel/dees-panel.js';
+import '../../00group-layout/dees-panel/dees-panel.js';
 import '../../00group-form/dees-form/dees-form.js';
 import '../../00group-form/dees-form-submit/dees-form-submit.js';
 import '../../00group-input/dees-input-text/dees-input-text.js';
-import '../../dees-icon/dees-icon.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 import type { DeesButton } from '../dees-button/dees-button.js';
 
 export const demoFunc = () => html`
@@ -142,54 +142,95 @@ export const demoFunc = () => html`
       <dees-panel .title=${'3. Buttons with Icons'} .subtitle=${'Combining icons with text for enhanced visual communication'}>
         <div class="icon-row">
           <dees-button>
-            <dees-icon iconFA="faPlus"></dees-icon>
+            <dees-icon icon="fa:plus"></dees-icon>
             Add Item
           </dees-button>
           <dees-button type="destructive">
-            <dees-icon iconFA="faTrash"></dees-icon>
+            <dees-icon icon="fa:trash"></dees-icon>
             Delete
           </dees-button>
           <dees-button type="outline">
-            <dees-icon iconFA="faDownload"></dees-icon>
+            <dees-icon icon="lucide:Download"></dees-icon>
             Download
           </dees-button>
         </div>
-        
+
         <div class="icon-row">
           <dees-button type="secondary" size="sm">
-            <dees-icon iconFA="faCog"></dees-icon>
+            <dees-icon icon="fa:gear"></dees-icon>
             Settings
           </dees-button>
           <dees-button type="ghost">
-            <dees-icon iconFA="faChevronLeft"></dees-icon>
+            <dees-icon icon="fa:caretLeft"></dees-icon>
             Back
           </dees-button>
           <dees-button type="ghost">
             Next
-            <dees-icon iconFA="faChevronRight"></dees-icon>
+            <dees-icon icon="fa:caretRight"></dees-icon>
           </dees-button>
         </div>
-        
+
         <div class="icon-row">
           <dees-button size="icon" type="default">
-            <dees-icon iconFA="faPlus"></dees-icon>
+            <dees-icon icon="fa:plus"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="secondary">
-            <dees-icon iconFA="faCog"></dees-icon>
+            <dees-icon icon="fa:gear"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="outline">
-            <dees-icon iconFA="faSearch"></dees-icon>
+            <dees-icon icon="lucide:Search"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="ghost">
-            <dees-icon iconFA="faEllipsisV"></dees-icon>
+            <dees-icon icon="lucide:MoreVertical"></dees-icon>
           </dees-button>
           <dees-button size="icon" type="destructive">
-            <dees-icon iconFA="faTrash"></dees-icon>
+            <dees-icon icon="fa:trash"></dees-icon>
           </dees-button>
         </div>
       </dees-panel>
     </dees-demowrapper>
-    
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Track icon property button clicks
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button) => {
+        button.addEventListener('clicked', () => {
+          const icon = button.getAttribute('icon') || 'none';
+          const position = button.getAttribute('iconPosition') || 'left';
+          console.log(`Icon property button: icon=${icon}, position=${position}`);
+        });
+      });
+    }}>
+      <dees-panel .title=${'4. Icons via Property'} .subtitle=${'Simplified icon syntax using the icon property'}>
+        <div class="icon-row">
+          <dees-button icon="fa:plus">Add Item</dees-button>
+          <dees-button type="destructive" icon="fa:trash">Delete</dees-button>
+          <dees-button type="outline" icon="lucide:Download">Download</dees-button>
+        </div>
+
+        <div class="icon-row">
+          <dees-button type="secondary" size="sm" icon="fa:gear">Settings</dees-button>
+          <dees-button type="ghost" icon="fa:caretLeft">Back</dees-button>
+          <dees-button type="ghost" icon="fa:caretRight" iconPosition="right">Next</dees-button>
+        </div>
+
+        <div class="icon-row">
+          <dees-button size="icon" type="default" icon="fa:plus"></dees-button>
+          <dees-button size="icon" type="secondary" icon="lucide:Settings"></dees-button>
+          <dees-button size="icon" type="outline" icon="lucide:Search"></dees-button>
+          <dees-button size="icon" type="ghost" icon="lucide:MoreVertical"></dees-button>
+          <dees-button size="icon" type="destructive" icon="fa:trash"></dees-button>
+        </div>
+
+        <div style="margin-top: 16px;">
+          <div class="code-snippet">
+            &lt;dees-button icon="fa:plus"&gt;Add Item&lt;/dees-button&gt;<br>
+            &lt;dees-button icon="fa:caretRight" iconPosition="right"&gt;Next&lt;/dees-button&gt;
+          </div>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+
     <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
       // Demonstrate status changes
       const pendingButton = elementArg.querySelector('dees-button[status="pending"]');
@@ -215,7 +256,7 @@ export const demoFunc = () => html`
         });
       }
     }}>
-      <dees-panel .title=${'4. Button States'} .subtitle=${'Different states to indicate button status and loading conditions'}>
+      <dees-panel .title=${'5. Button States'} .subtitle=${'Different states to indicate button status and loading conditions'}>
         <div class="button-group">
           <dees-button status="normal">Normal</dees-button>
           <dees-button status="pending">Processing...</dees-button>
@@ -260,7 +301,7 @@ export const demoFunc = () => html`
         });
       }
     }}>
-      <dees-panel .title=${'5. Event Handling'} .subtitle=${'Interactive examples with click event handling'}>
+      <dees-panel .title=${'6. Event Handling'} .subtitle=${'Interactive examples with click event handling'}>
         <div class="button-group">
           <dees-button>Click Me</dees-button>
           <dees-button type="secondary" .eventDetailData=${'custom-data-123'}>
@@ -303,7 +344,7 @@ export const demoFunc = () => html`
         });
       }
     }}>
-      <dees-panel .title=${'6. Form Integration'} .subtitle=${'Buttons working within forms with automatic spacing'}>
+      <dees-panel .title=${'7. Form Integration'} .subtitle=${'Buttons working within forms with automatic spacing'}>
         <dees-form>
           <dees-input-text label="Name" key="name" required></dees-input-text>
           <dees-input-text label="Email" key="email" type="email" required></dees-input-text>
@@ -330,7 +371,7 @@ export const demoFunc = () => html`
         }
       });
     }}>
-      <dees-panel .title=${'7. Backward Compatibility'} .subtitle=${'Old button types are automatically mapped to new variants'}>
+      <dees-panel .title=${'8. Backward Compatibility'} .subtitle=${'Old button types are automatically mapped to new variants'}>
         <div class="button-group">
           <dees-button type="normal">Normal → Default</dees-button>
           <dees-button type="highlighted">Highlighted → Destructive</dees-button>
@@ -371,36 +412,36 @@ export const demoFunc = () => html`
         });
       }
     }}>
-      <dees-panel .title=${'8. Advanced Examples'} .subtitle=${'Complex button configurations and real-world use cases'}>
+      <dees-panel .title=${'9. Advanced Examples'} .subtitle=${'Complex button configurations and real-world use cases'}>
         <div class="horizontal-group">
           <div class="vertical-group">
             <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Action Group</h4>
             <dees-button type="default" size="sm">
-              <dees-icon iconFA="faSave"></dees-icon>
+              <dees-icon icon="lucide:Save"></dees-icon>
               Save Changes
             </dees-button>
             <dees-button type="secondary" size="sm">
-              <dees-icon iconFA="faUndo"></dees-icon>
+              <dees-icon icon="lucide:Undo2"></dees-icon>
               Discard
             </dees-button>
             <dees-button type="ghost" size="sm">
-              <dees-icon iconFA="faQuestionCircle"></dees-icon>
+              <dees-icon icon="lucide:HelpCircle"></dees-icon>
               Help
             </dees-button>
           </div>
-          
+
           <div class="vertical-group">
             <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Danger Zone</h4>
             <dees-button type="destructive" size="sm">
-              <dees-icon iconFA="faTrash"></dees-icon>
+              <dees-icon icon="fa:trash"></dees-icon>
               Delete Account
             </dees-button>
             <dees-button type="outline" size="sm">
-              <dees-icon iconFA="faArchive"></dees-icon>
+              <dees-icon icon="lucide:Archive"></dees-icon>
               Archive Data
             </dees-button>
             <dees-button type="ghost" size="sm" disabled>
-              <dees-icon iconFA="faBan"></dees-icon>
+              <dees-icon icon="lucide:Ban"></dees-icon>
               Not Available
             </dees-button>
           </div>
@@ -409,8 +450,7 @@ export const demoFunc = () => html`
         <div style="margin-top: 24px;">
           <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Code Example:</h4>
           <div class="code-snippet">
-            &lt;dees-button type="default" size="sm" @clicked="\${handleClick}"&gt;<br>
-            &nbsp;&nbsp;&lt;dees-icon iconFA="faSave"&gt;&lt;/dees-icon&gt;<br>
+            &lt;dees-button type="default" size="sm" icon="lucide:Save" @clicked="\${handleClick}"&gt;<br>
             &nbsp;&nbsp;Save Changes<br>
             &lt;/dees-button&gt;
           </div>

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

@@ -23,6 +23,7 @@ declare global {
 @customElement('dees-button')
 export class DeesButton extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['Button'];
 
   @property({
     reflect: true,
@@ -67,6 +68,12 @@ export class DeesButton extends DeesElement {
   })
   accessor insideForm: boolean = false;
 
+  @property({ type: String, reflect: true })
+  accessor icon: string;
+
+  @property({ type: String, reflect: true })
+  accessor iconPosition: 'left' | 'right' = 'left';
+
   constructor() {
     super();
   }
@@ -339,9 +346,62 @@ export class DeesButton extends DeesElement {
         height: 18px;
       }
 
+      /* Text alignment */
+      .textbox {
+        display: flex;
+        align-items: center;
+      }
+
     `,
   ];
 
+  /**
+   * Extracts icon and text from light DOM and sets properties
+   */
+  private extractLightDom(): void {
+    const iconElement = this.querySelector('dees-icon') as any;
+
+    // Get all text content from light DOM
+    const textContent = Array.from(this.childNodes)
+      .filter(node => node.nodeType === Node.TEXT_NODE)
+      .map(node => node.textContent?.trim())
+      .filter(Boolean)
+      .join(' ');
+
+    if (textContent && !this.text) {
+      this.text = textContent;
+    }
+
+    if (iconElement) {
+      // Get icon value
+      const iconValue = iconElement.icon || iconElement.getAttribute('icon') ||
+                        (iconElement.iconFA ? `fa:${iconElement.iconFA}` : null);
+
+      if (iconValue) {
+        // Determine position based on DOM order
+        const children = Array.from(this.childNodes);
+        const iconIndex = children.indexOf(iconElement);
+        const textNodes = children.filter(node =>
+          node.nodeType === Node.TEXT_NODE && node.textContent?.trim()
+        );
+
+        if (textNodes.length > 0) {
+          const firstTextIndex = children.indexOf(textNodes[0]);
+          this.iconPosition = iconIndex < firstTextIndex ? 'left' : 'right';
+        }
+
+        // Set the icon property
+        this.icon = iconValue;
+      }
+
+      // Remove the light DOM icon element
+      iconElement.remove();
+    }
+
+    // Clear all remaining light DOM
+    this.innerHTML = '';
+  }
+
   public render(): TemplateResult {
     // Map old types to new types for backward compatibility
     const typeMap: {[key: string]: string} = {
@@ -350,10 +410,20 @@ export class DeesButton extends DeesElement {
       'discreet': 'outline',
       'big': 'default' // Will use size instead
     };
-    
+
     const actualType = typeMap[this.type] || this.type;
     const actualSize = this.type === 'big' ? 'lg' : this.size;
-    
+
+    const leftIcon = this.iconPosition === 'left' && this.icon
+      ? html`<dees-icon .icon=${this.icon}></dees-icon>`
+      : '';
+    const rightIcon = this.iconPosition === 'right' && this.icon
+      ? html`<dees-icon .icon=${this.icon}></dees-icon>`
+      : '';
+
+    // For icon-only buttons, hide the textbox
+    const isIconOnly = actualSize === 'icon' && this.icon;
+
     return html`
       <div
         class="button ${this.isHidden ? 'hidden' : ''} ${actualType} size-${actualSize} ${this.status} ${this.disabled
@@ -362,13 +432,15 @@ export class DeesButton extends DeesElement {
         @click="${this.dispatchClick}"
       >
         ${this.status === 'normal' ? html``: html`
-          <dees-spinner 
-            .bnw=${true} 
+          <dees-spinner
+            .bnw=${true}
             status="${this.status}"
             size="${actualSize === 'sm' ? 14 : actualSize === 'lg' ? 18 : 16}"
           ></dees-spinner>
         `}
-        <div class="textbox">${this.text || html`<slot>Button</slot>`}</div>
+        ${leftIcon}
+        ${isIconOnly ? '' : html`<div class="textbox">${this.text || 'Button'}</div>`}
+        ${rightIcon}
       </div>
     `;
   }
@@ -389,6 +461,7 @@ export class DeesButton extends DeesElement {
   }
 
   public async firstUpdated() {
-    // Don't set default text here as it interferes with slotted content
+    // Extract light DOM content (icon + text) and set as properties
+    this.extractLightDom();
   }
 }

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

@@ -23,6 +23,7 @@ declare global {
 @customElement('dees-chart-area')
 export class DeesChartArea extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['Chart'];
 
   // instance
   @state()

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

@@ -1,16 +1,18 @@
-import { html } from '@design.estate/dees-element';
+import { html, css, cssManager } from '@design.estate/dees-element';
 import type { DeesChartLog } from '../dees-chart-log/dees-chart-log.js';
 import '@design.estate/dees-wcctools/demotools';
 
 export const demoFunc = () => {
   return html`
     <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
-      // Get the log element
-      const logElement = elementArg.querySelector('dees-chart-log') as DeesChartLog;
-      let intervalId: number;
+      // Get the log elements
+      const structuredLog = elementArg.querySelector('#structured-log') as DeesChartLog;
+      const rawLog = elementArg.querySelector('#raw-log') as DeesChartLog;
+      let structuredIntervalId: number;
+      let rawIntervalId: number;
 
       const serverSources = ['Server', 'Database', 'API', 'Auth', 'Cache', 'Queue', 'WebSocket', 'Scheduler'];
-      
+
       const logTemplates = {
         debug: [
           'Loading module: {{module}}',
@@ -49,14 +51,30 @@ export const demoFunc = () => {
         ],
       };
 
+      // Docker-like raw log lines with ANSI colors
+      const dockerLogTemplates = [
+        '\x1b[90m2024-01-15T10:23:45.123Z\x1b[0m \x1b[36mINFO\x1b[0m  [nginx] GET /api/health 200 - 2ms',
+        '\x1b[90m2024-01-15T10:23:45.456Z\x1b[0m \x1b[33mWARN\x1b[0m  [redis] Connection pool running low: 3/10',
+        '\x1b[90m2024-01-15T10:23:45.789Z\x1b[0m \x1b[31mERROR\x1b[0m [mongodb] Query timeout after 30000ms',
+        '\x1b[90m2024-01-15T10:23:46.012Z\x1b[0m \x1b[36mINFO\x1b[0m  [app] Processing batch job #{{jobId}}',
+        '\x1b[90m2024-01-15T10:23:46.345Z\x1b[0m \x1b[32mOK\x1b[0m    [health] All services healthy',
+        '\x1b[90m2024-01-15T10:23:46.678Z\x1b[0m \x1b[36mINFO\x1b[0m  [kafka] Message consumed from topic: events',
+        '\x1b[90m2024-01-15T10:23:47.001Z\x1b[0m \x1b[35mDEBUG\x1b[0m [grpc] Request received: GetUser(id={{userId}})',
+        '\x1b[90m2024-01-15T10:23:47.234Z\x1b[0m \x1b[31mERROR\x1b[0m [auth] Token validation failed: expired',
+        '\x1b[90m2024-01-15T10:23:47.567Z\x1b[0m \x1b[33mWARN\x1b[0m  [rate-limit] IP {{ip}} approaching rate limit',
+        '\x1b[90m2024-01-15T10:23:47.890Z\x1b[0m \x1b[36mINFO\x1b[0m  [websocket] Client connected: session={{session}}',
+        // Multi-line log entry like stack traces
+        '\x1b[31mError: Connection refused\x1b[0m\n    at TcpConnection.connect (/app/node_modules/pg/lib/connection.js:12:15)\n    at Pool.connect (/app/node_modules/pg/lib/pool.js:45:23)\n    at async DatabaseService.query (/app/src/db/service.ts:89:12)',
+      ];
+
       const generateRandomLog = () => {
         const levels: Array<'debug' | 'info' | 'warn' | 'error' | 'success'> = ['debug', 'info', 'warn', 'error', 'success'];
-        const weights = [0.2, 0.5, 0.15, 0.1, 0.05]; // Weighted probability
-        
+        const weights = [0.2, 0.5, 0.15, 0.1, 0.05];
+
         const random = Math.random();
         let cumulative = 0;
         let level: typeof levels[0] = 'info';
-        
+
         for (let i = 0; i < weights.length; i++) {
           cumulative += weights[i];
           if (random < cumulative) {
@@ -68,7 +86,7 @@ export const demoFunc = () => {
         const source = serverSources[Math.floor(Math.random() * serverSources.length)];
         const templates = logTemplates[level];
         const template = templates[Math.floor(Math.random() * templates.length)];
-        
+
         // Replace placeholders with random values
         const message = template
           .replace('{{module}}', ['express', 'mongoose', 'redis', 'socket.io'][Math.floor(Math.random() * 4)])
@@ -92,17 +110,30 @@ export const demoFunc = () => {
           .replace('{{port}}', String(3000 + Math.floor(Math.random() * 10)))
           .replace('{{size}}', String(Math.floor(Math.random() * 500) + 100));
 
-        logElement.addLog(level, message, source);
+        structuredLog.addLog(level, message, source);
       };
 
-      const startSimulation = () => {
-        if (!intervalId) {
-          // Generate logs at random intervals between 500ms and 2500ms
+      const generateDockerLog = () => {
+        const template = dockerLogTemplates[Math.floor(Math.random() * dockerLogTemplates.length)];
+        const now = new Date().toISOString();
+
+        const logLine = template
+          .replace(/2024-01-15T10:23:\d{2}\.\d{3}Z/g, now)
+          .replace('{{jobId}}', String(Math.floor(Math.random() * 10000)))
+          .replace('{{userId}}', String(Math.floor(Math.random() * 10000)))
+          .replace('{{ip}}', `192.168.1.${Math.floor(Math.random() * 255)}`)
+          .replace('{{session}}', Math.random().toString(36).substring(2, 11));
+
+        rawLog.writelnRaw(logLine);
+      };
+
+      const startStructuredSimulation = () => {
+        if (!structuredIntervalId) {
           const scheduleNext = () => {
             generateRandomLog();
             const nextDelay = Math.random() * 2000 + 500;
-            intervalId = window.setTimeout(() => {
-              if (intervalId) {
+            structuredIntervalId = window.setTimeout(() => {
+              if (structuredIntervalId) {
                 scheduleNext();
               }
             }, nextDelay);
@@ -111,10 +142,32 @@ export const demoFunc = () => {
         }
       };
 
-      const stopSimulation = () => {
-        if (intervalId) {
-          window.clearTimeout(intervalId);
-          intervalId = null;
+      const stopStructuredSimulation = () => {
+        if (structuredIntervalId) {
+          window.clearTimeout(structuredIntervalId);
+          structuredIntervalId = null;
+        }
+      };
+
+      const startRawSimulation = () => {
+        if (!rawIntervalId) {
+          const scheduleNext = () => {
+            generateDockerLog();
+            const nextDelay = Math.random() * 1000 + 200;
+            rawIntervalId = window.setTimeout(() => {
+              if (rawIntervalId) {
+                scheduleNext();
+              }
+            }, nextDelay);
+          };
+          scheduleNext();
+        }
+      };
+
+      const stopRawSimulation = () => {
+        if (rawIntervalId) {
+          window.clearTimeout(rawIntervalId);
+          rawIntervalId = null;
         }
       };
 
@@ -122,49 +175,103 @@ export const demoFunc = () => {
       const buttons = elementArg.querySelectorAll('dees-button');
       buttons.forEach(button => {
         const text = button.textContent?.trim();
-        if (text === 'Add Single Log') {
-          button.addEventListener('click', () => generateRandomLog());
-        } else if (text === 'Start Simulation') {
-          button.addEventListener('click', () => startSimulation());
-        } else if (text === 'Stop Simulation') {
-          button.addEventListener('click', () => stopSimulation());
+        switch (text) {
+          case 'Add Structured Log':
+            button.addEventListener('click', () => generateRandomLog());
+            break;
+          case 'Start Structured':
+            button.addEventListener('click', () => startStructuredSimulation());
+            break;
+          case 'Stop Structured':
+            button.addEventListener('click', () => stopStructuredSimulation());
+            break;
+          case 'Add Docker Log':
+            button.addEventListener('click', () => generateDockerLog());
+            break;
+          case 'Start Docker':
+            button.addEventListener('click', () => startRawSimulation());
+            break;
+          case 'Stop Docker':
+            button.addEventListener('click', () => stopRawSimulation());
+            break;
         }
       });
     }}>
       <style>
-      .demoBox {
-        position: relative;
-        background: #000000;
-        height: 100%;
-        width: 100%;
-        padding: 40px;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-      }
-      .controls {
-        display: flex;
-        gap: 10px;
-        flex-wrap: wrap;
-      }
-      .info {
-        color: #888;
-        font-size: 12px;
-        font-family: 'Geist Sans', sans-serif;
-      }
-    </style>
+        ${css`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 5%)')};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .section {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+          }
+          .section-title {
+            color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+            font-size: 14px;
+            font-weight: 600;
+            font-family: 'Geist Sans', sans-serif;
+          }
+          .section-description {
+            color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+            font-size: 12px;
+            font-family: 'Geist Sans', sans-serif;
+          }
+          .controls {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+          }
+        `}
+      </style>
     <div class="demoBox">
-      <div class="controls">
-        <dees-button>Add Single Log</dees-button>
-        <dees-button>Start Simulation</dees-button>
-        <dees-button>Stop Simulation</dees-button>
+      <!-- Structured Logs Section -->
+      <div class="section">
+        <div class="section-title">Structured Logs (ILogEntry)</div>
+        <div class="section-description">
+          Structured log entries with level, message, and source. Supports search and keyword highlighting.
+        </div>
+        <div class="controls">
+          <dees-button>Add Structured Log</dees-button>
+          <dees-button>Start Structured</dees-button>
+          <dees-button>Stop Structured</dees-button>
+        </div>
+        <dees-chart-log
+          id="structured-log"
+          .label=${'Production Server Logs'}
+          .highlightKeywords=${['error', 'failed', 'timeout']}
+          .showMetrics=${true}
+        ></dees-chart-log>
+      </div>
+
+      <!-- Raw Logs Section -->
+      <div class="section">
+        <div class="section-title">Raw Logs (Docker/Container Style)</div>
+        <div class="section-description">
+          Raw log output with ANSI escape sequences for real Docker/container logs.
+        </div>
+        <div class="controls">
+          <dees-button>Add Docker Log</dees-button>
+          <dees-button>Start Docker</dees-button>
+          <dees-button>Stop Docker</dees-button>
+        </div>
+        <dees-chart-log
+          id="raw-log"
+          .label=${'Docker Container Logs'}
+          .mode=${'raw'}
+          .showMetrics=${false}
+        ></dees-chart-log>
       </div>
-      <div class="info">Simulating realistic server logs with various levels and sources</div>
-      <dees-chart-log
-        .label=${'Production Server Logs'}
-      ></dees-chart-log>
     </div>
     </dees-demowrapper>
   `;
-};
+};

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

@@ -15,7 +15,7 @@ import type { HLJSApi } from 'highlight.js';
 import * as smartstring from '@push.rocks/smartstring';
 
 import * as domtools from '@design.estate/dees-domtools';
-import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { DeesServiceLibLoader } from '../../../services/index.js';
 
 declare global {
@@ -27,6 +27,7 @@ declare global {
 @customElement('dees-dataview-codebox')
 export class DeesDataviewCodebox extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['Data View', 'Workspace'];
 
   @property()
   accessor progLang: string = 'typescript';
@@ -51,6 +52,8 @@ export class DeesDataviewCodebox extends DeesElement {
           text-align: left;
           font-size: 16px;
           font-family: ${cssGeistFontFamily};
+          height: 100%;
+          box-sizing: border-box;
         }
         .mainbox {
           position: relative;
@@ -60,6 +63,10 @@ export class DeesDataviewCodebox extends DeesElement {
           background: ${cssManager.bdTheme('#ffffff', '#09090b')};
           border-radius: 6px;
           overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          box-sizing: border-box;
         }
 
         .appbar {
@@ -73,6 +80,7 @@ export class DeesDataviewCodebox extends DeesElement {
           line-height: 32px;
           justify-content: center;
           align-items: center;
+          flex-shrink: 0;
         }
 
         .appbar .fileName {
@@ -94,6 +102,7 @@ export class DeesDataviewCodebox extends DeesElement {
           justify-content: flex-end;
           align-items: stretch;
           overflow: hidden;
+          flex-shrink: 0;
         }
 
         .spacesLabel {
@@ -120,7 +129,9 @@ export class DeesDataviewCodebox extends DeesElement {
         .codegrid {
           display: grid;
           grid-template-columns: 50px auto;
-          overflow: hidden;
+          overflow: auto;
+          flex: 1;
+          min-height: 0;
         }
 
         .lineNumbers {
@@ -205,9 +216,7 @@ export class DeesDataviewCodebox extends DeesElement {
         }}"
       >
         <div class="appbar">
-          <dees-windowcontrols type="mac" position="left"></dees-windowcontrols>
           <div class="fileName">index.ts</div>
-          <dees-windowcontrols type="mac" position="right"></dees-windowcontrols>
         </div>
         <div class="codegrid">
           <div class="lineNumbers">

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

@@ -15,7 +15,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as tsclass from '@tsclass/tsclass';
-import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { themeDefaultStyles } from '../../00theme.js';
 
 declare global {
@@ -27,6 +27,7 @@ declare global {
 @customElement('dees-dataview-statusobject')
 export class DeesDataviewStatusobject extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['Data View'];
 
   @property({ type: Object }) accessor statusObject: tsclass.code.IStatusObject;
 

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

@@ -1,7 +1,16 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../dees-panel/dees-panel.js';
-import type { IStatsTile } from '../dees-statsgrid/dees-statsgrid.js';
+import '../../00group-layout/dees-panel/dees-panel.js';
+import type { IStatsTile, ICpuCore, IPartitionData, IDiskData } from '../dees-statsgrid/dees-statsgrid.js';
+
+// Helper function to generate random CPU core data
+const generateCpuCores = (count: number): ICpuCore[] => {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i,
+    usage: Math.round(Math.random() * 100),
+    label: `${i}`,
+  }));
+};
 
 export const demoFunc = () => {
   return html`
@@ -334,7 +343,96 @@ export const demoFunc = () => {
         ></dees-statsgrid>
       </dees-panel>
       
-      <dees-panel .title=${'4. Interactive Features'} .subtitle=${'Tiles with actions and real-time updates'}>
+      <dees-panel .title=${'4. CPU Cores Visualization'} .subtitle=${'Vertical bar visualization for multi-core CPU usage with column spanning'}>
+        <dees-statsgrid
+          id="cpu-cores-grid"
+          .tiles=${[
+            {
+              id: 'cpu-cores-8',
+              title: 'CPU Cores (8-core)',
+              value: 0,
+              type: 'cpuCores',
+              icon: 'lucide:cpu',
+              columnSpan: 2,
+              coresData: generateCpuCores(8),
+              description: 'Intel i7 - 8 cores'
+            },
+            {
+              id: 'memory',
+              title: 'Memory Usage',
+              value: 68,
+              type: 'percentage',
+              icon: 'lucide:database',
+              description: '13.6 GB of 20 GB'
+            },
+            {
+              id: 'cpu-cores-16',
+              title: 'CPU Cores (16-core)',
+              value: 0,
+              type: 'cpuCores',
+              icon: 'lucide:cpu',
+              columnSpan: 2,
+              coresData: generateCpuCores(16),
+              description: 'AMD Ryzen 9 - 16 cores'
+            },
+            {
+              id: 'network',
+              title: 'Network I/O',
+              value: 245,
+              unit: 'MB/s',
+              type: 'trend',
+              icon: 'lucide:network',
+              trendData: [200, 220, 235, 240, 238, 245],
+              description: 'throughput'
+            },
+            {
+              id: 'cpu-cores-32',
+              title: 'Server CPU (32-core)',
+              value: 0,
+              type: 'cpuCores',
+              icon: 'lucide:server',
+              columnSpan: 3,
+              coresData: generateCpuCores(32),
+              description: 'AMD EPYC - 32 cores'
+            },
+            {
+              id: 'disk',
+              title: 'Disk Usage',
+              value: 42,
+              type: 'percentage',
+              icon: 'lucide:hard-drive',
+              description: '420 GB of 1 TB'
+            }
+          ]}
+          .gridActions=${[
+            {
+              name: 'Randomize',
+              iconName: 'lucide:shuffle',
+              action: async () => {
+                const grid = document.querySelector('#cpu-cores-grid') as any;
+                if (!grid) return;
+                const tiles = grid.tiles.map((tile: any) => {
+                  if (tile.type === 'cpuCores' && tile.coresData) {
+                    return {
+                      ...tile,
+                      coresData: tile.coresData.map((core: any) => ({
+                        ...core,
+                        usage: Math.round(Math.random() * 100)
+                      }))
+                    };
+                  }
+                  return tile;
+                });
+                grid.tiles = tiles;
+              }
+            }
+          ]}
+          .minTileWidth=${250}
+          .gap=${16}
+        ></dees-statsgrid>
+      </dees-panel>
+
+      <dees-panel .title=${'5. Interactive Features'} .subtitle=${'Tiles with actions and real-time updates'}>
         <dees-statsgrid
           id="interactive-grid"
           .tiles=${[
@@ -448,7 +546,7 @@ export const demoFunc = () => {
         ></dees-statsgrid>
       </dees-panel>
       
-      <dees-panel .title=${'5. Code Example'} .subtitle=${'How to implement a stats grid with TypeScript'}>
+      <dees-panel .title=${'6. Code Example'} .subtitle=${'How to implement a stats grid with TypeScript'}>
         <div class="code-block">${`const tiles: IStatsTile[] = [
   {
     id: 'revenue',
@@ -503,8 +601,136 @@ html\`
   ></dees-statsgrid>
 \`;`}</div>
       </dees-panel>
+
+      <dees-panel .title=${'7. Disk & Storage Tiles'} .subtitle=${'Partition and physical disk visualization tiles'}>
+        <dees-statsgrid
+          .tiles=${[
+            {
+              id: 'root-partition',
+              title: 'Root Partition',
+              value: 0,
+              type: 'partition',
+              icon: 'lucide:folder-root',
+              partitionData: {
+                used: 698_341_425_152,      // ~650 GB
+                total: 1_073_741_824_000,   // ~1 TB
+                filesystem: 'ext4',
+                mountPoint: '/'
+              }
+            },
+            {
+              id: 'home-partition',
+              title: 'Home Partition',
+              value: 0,
+              type: 'partition',
+              icon: 'lucide:home',
+              partitionData: {
+                used: 214_748_364_800,      // ~200 GB
+                total: 536_870_912_000,     // ~500 GB
+                filesystem: 'ext4',
+                mountPoint: '/home'
+              }
+            },
+            {
+              id: 'data-partition',
+              title: 'Data Partition',
+              value: 0,
+              type: 'partition',
+              icon: 'lucide:database',
+              partitionData: {
+                used: 1_932_735_283_200,    // ~1.8 TB (90% - critical)
+                total: 2_147_483_648_000,   // ~2 TB
+                filesystem: 'xfs',
+                mountPoint: '/data'
+              }
+            },
+            {
+              id: 'nvme-ssd',
+              title: 'Primary NVMe',
+              value: 0,
+              type: 'disk',
+              icon: 'lucide:hard-drive',
+              columnSpan: 2,
+              diskData: {
+                capacity: 2_000_000_000_000,  // 2 TB
+                model: 'Samsung 990 Pro',
+                type: 'nvme',
+                iops: {
+                  read: 7450,
+                  write: 6900
+                },
+                health: 98
+              }
+            },
+            {
+              id: 'sata-ssd',
+              title: 'Secondary SSD',
+              value: 0,
+              type: 'disk',
+              icon: 'lucide:hard-drive',
+              diskData: {
+                capacity: 1_000_000_000_000,  // 1 TB
+                model: 'Crucial MX500',
+                type: 'ssd',
+                iops: {
+                  read: 560,
+                  write: 510
+                },
+                health: 85
+              }
+            },
+            {
+              id: 'hdd-storage',
+              title: 'Backup HDD',
+              value: 0,
+              type: 'disk',
+              icon: 'lucide:archive',
+              diskData: {
+                capacity: 8_000_000_000_000,  // 8 TB
+                model: 'Seagate IronWolf',
+                type: 'hdd',
+                iops: {
+                  read: 210,
+                  write: 195
+                },
+                health: 42
+              }
+            }
+          ]}
+          .minTileWidth=${280}
+          .gap=${16}
+        ></dees-statsgrid>
+
+        <div class="tile-config">
+          <div class="config-section">
+            <div class="config-title">Partition Tile Properties</div>
+            <div class="config-description">
+              <ul style="margin: 8px 0; padding-left: 20px;">
+                <li><strong>partitionData.used:</strong> Used space in bytes (auto-formatted)</li>
+                <li><strong>partitionData.total:</strong> Total capacity in bytes</li>
+                <li><strong>partitionData.filesystem:</strong> Filesystem type (ext4, xfs, ntfs)</li>
+                <li><strong>partitionData.mountPoint:</strong> Mount point path (optional)</li>
+              </ul>
+              Color thresholds: Normal (&lt;75%), Warning (75-90%), Critical (&gt;90%)
+            </div>
+          </div>
+          <div class="config-section">
+            <div class="config-title">Disk Tile Properties</div>
+            <div class="config-description">
+              <ul style="margin: 8px 0; padding-left: 20px;">
+                <li><strong>diskData.capacity:</strong> Total capacity in bytes</li>
+                <li><strong>diskData.model:</strong> Disk model name (optional)</li>
+                <li><strong>diskData.type:</strong> Disk type: 'ssd', 'hdd', or 'nvme'</li>
+                <li><strong>diskData.iops:</strong> Read/write IOPS (optional)</li>
+                <li><strong>diskData.health:</strong> Health percentage 0-100 (optional)</li>
+              </ul>
+              Health thresholds: Good (70-100%), Warning (30-70%), Critical (&lt;30%)
+            </div>
+          </div>
+        </div>
+      </dees-panel>
     </div>
-    
+
     <script>
       // Cleanup live updates on page unload
       window.addEventListener('beforeunload', () => {