v3.36.0

changelog.md

@@ -1,5 +1,70 @@
 # Changelog
 
+## 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,15 @@
   },
   "@ship.zone/szci": {
     "npmGlobalTools": []
+  },
+  "@git.zone/tsbundle": {
+    "bundles": [
+      {
+        "from": "./ts_web/index.ts",
+        "to": "./dist_bundle/bundle.js",
+        "outputMode": "bundle",
+        "bundler": "esbuild"
+      }
+    ]
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.30.1",
+  "version": "3.36.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -8,7 +8,7 @@
   "type": "module",
   "scripts": {
     "test": "tstest test/ --web --verbose --timeout 30 --logfile",
-    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle",
     "watch": "tswatch element",
     "buildDocs": "tsdoc",
     "postinstall": "node scripts/update-monaco-version.cjs"
@@ -16,8 +16,9 @@
   "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.7",
+    "@design.estate/dees-element": "^2.1.5",
+    "@design.estate/dees-wcctools": "^3.7.1",
     "@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,11 +34,9 @@
     "@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",
     "monaco-editor": "0.55.1",
     "pdfjs-dist": "^4.10.38",
@@ -44,13 +44,12 @@
     "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/tsbuild": "^4.1.0",
+    "@git.zone/tsbundle": "^2.8.1",
     "@git.zone/tstest": "^3.1.4",
     "@git.zone/tswatch": "^2.3.13",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@types/node": "^25.0.3"
+    "@types/node": "^25.0.6"
   },
   "files": [
     "ts/**/*",

readme.hints.md

@@ -910,4 +910,67 @@ 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
+
+## 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

ts_web/00_commitinfo_data.ts

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

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

@@ -20,6 +20,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroup = 'App UI';
 
   // INSTANCE PROPERTIES
   @state()

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

@@ -28,6 +28,7 @@ declare global {
 @customElement('dees-appui-appbar')
 export class DeesAppuiBar extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'App UI';
 
   // INSTANCE PROPERTIES
   @property({ type: Array })

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

@@ -26,6 +26,7 @@ declare global {
 @customElement('dees-appui-bottombar')
 export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
   public static demo = demoFunc;
+  public static demoGroup = '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 demoGroup = 'App UI';
 
   // INSTANCE
   @property({

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

@@ -22,6 +22,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 @customElement('dees-appui-mainmenu')
 export class DeesAppuiMainmenu extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = '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 demoGroup = 'App UI';
 
   @property({ type: Object })
   accessor user: {

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

@@ -33,6 +33,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 @customElement('dees-appui-secondarymenu')
 export class DeesAppuiSecondarymenu extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = '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 demoGroup = '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 '../../dees-statsgrid/dees-statsgrid.js';
+import type { IStatsTile } from '../../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 demoGroup = 'App UI';
 
   // ==========================================
   // REACTIVE OBSERVABLES (RxJS Subjects)

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 demoGroup = '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 demoGroup = 'Button';
 
   @property()
   accessor label: string = '';

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 demoGroup = 'Button';
 
   @property({
     reflect: true,

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 demoGroup = '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

@@ -27,6 +27,7 @@ declare global {
 @customElement('dees-dataview-codebox')
 export class DeesDataviewCodebox extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'Data View';
 
   @property()
   accessor progLang: string = 'typescript';

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

@@ -27,6 +27,7 @@ declare global {
 @customElement('dees-dataview-statusobject')
 export class DeesDataviewStatusobject extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'Data View';
 
   @property({ type: Object }) accessor statusObject: tsclass.code.IStatusObject;
 

ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts

@@ -19,6 +19,7 @@ declare global {
 @customElement('dees-form-submit')
 export class DeesFormSubmit extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'Form';
 
   @property({
     type: Boolean,

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

@@ -19,6 +19,7 @@ import { DeesInputFileupload } from '../../00group-input/dees-input-fileupload/i
 import { DeesInputIban } from '../../00group-input/dees-input-iban/dees-input-iban.js';
 import { DeesInputMultitoggle } from '../../00group-input/dees-input-multitoggle/dees-input-multitoggle.js';
 import { DeesInputPhone } from '../../00group-input/dees-input-phone/dees-input-phone.js';
+import { DeesInputToggle } from '../../00group-input/dees-input-toggle/dees-input-toggle.js';
 import { DeesInputTypelist } from '../../00group-input/dees-input-typelist/dees-input-typelist.js';
 import { DeesFormSubmit } from '../dees-form-submit/dees-form-submit.js';
 import { DeesTable } from '../../dees-table/index.js';
@@ -37,6 +38,7 @@ const FORM_INPUT_TYPES = [
   DeesInputQuantitySelector,
   DeesInputRadiogroup,
   DeesInputText,
+  DeesInputToggle,
   DeesInputTypelist,
   DeesTable,
 ];
@@ -53,6 +55,7 @@ export type TFormInputElement =
   | DeesInputQuantitySelector
   | DeesInputRadiogroup
   | DeesInputText
+  | DeesInputToggle
   | DeesInputTypelist
   | DeesTable<any>;
 
@@ -65,6 +68,7 @@ declare global {
 @customElement('dees-form')
 export class DeesForm extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'Form';
 
   public name: string = 'myform';
   public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();

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

@@ -21,6 +21,7 @@ declare global {
 export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
 

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

@@ -54,6 +54,7 @@ export class DeesInputCode extends DeesInputBase<string> {
       .value=${'const greeting: string = "Hello World";\nconsole.log(greeting);'}
     ></dees-input-code>
   `;
+  public static demoGroup = 'Input';
 
   // INSTANCE
   @property({ type: String })

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

@@ -22,6 +22,7 @@ declare global {
 @customElement('dees-input-datepicker')
 export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   @property({ type: String })
   accessor value: string = '';

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

@@ -22,6 +22,7 @@ declare global {
 @customElement('dees-input-dropdown')
 export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
 

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

@@ -21,6 +21,7 @@ declare global {
 @customElement('dees-input-fileupload')
 export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   @property({ attribute: false })
   accessor value: File[] = [];

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

@@ -17,6 +17,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 export class DeesInputIban extends DeesInputBase<DeesInputIban> {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
   @state()

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

@@ -23,6 +23,7 @@ declare global {
 export class DeesInputList extends DeesInputBase<DeesInputList> {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
   @property({ type: Array })
@@ -64,6 +65,26 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
   @state()
   accessor dragOverIndex: number = -1;
 
+  // Enhanced drag state for interactive reordering
+  @state()
+  accessor dragStartY: number = 0;
+
+  @state()
+  accessor dragCurrentY: number = 0;
+
+  @state()
+  accessor targetIndex: number = -1;
+
+  @state()
+  accessor itemHeight: number = 0;
+
+  // Bound event handlers for cleanup
+  private boundHandleGlobalDragOver: ((e: DragEvent) => void) | null = null;
+  private boundHandleGlobalDragEnd: (() => void) | null = null;
+
+  // Store original item positions for accurate hit detection (before transforms)
+  private originalItemRects: DOMRect[] = [];
+
   public static styles = [
     themeDefaultStyles,
     ...DeesInputBase.baseStyles,
@@ -113,7 +134,7 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
         padding: 12px 16px;
         border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        transition: all 0.15s ease;
+        transition: transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease;
         position: relative;
         overflow: hidden; /* Prevent animation from affecting scroll bounds */
       }
@@ -122,20 +143,31 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
         border-bottom: none;
       }
 
-      .list-item:hover:not(.disabled) {
+      .list-items:not(.is-dragging) .list-item:hover:not(.disabled) {
         background: ${cssManager.bdTheme('hsl(0 0% 97.5%)', 'hsl(0 0% 6.9%)')};
       }
 
+      /* Dragging item - follows cursor */
       .list-item.dragging {
-        opacity: 0.4;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 10.8%)')};
+        position: relative;
+        z-index: 100;
+        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 12%)')};
+        box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(0, 0, 0, 0.4)')};
+        border-radius: 6px;
+        transition: box-shadow 0.15s ease, background 0.15s ease;
       }
 
-      .list-item.drag-over {
-        background: ${cssManager.bdTheme('hsl(210 40% 93.1%)', 'hsl(215 20.2% 13.8%)')};
-        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+      /* Items that need to move up to make space */
+      .list-item.move-up {
+        transform: translateY(calc(-1 * var(--item-height, 48px)));
       }
 
+      /* Items that need to move down to make space */
+      .list-item.move-down {
+        transform: translateY(var(--item-height, 48px));
+      }
+
+
       .drag-handle {
         display: flex;
         align-items: center;
@@ -313,27 +345,9 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
         background: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 34.9%)')};
       }
 
-      /* Animation for adding/removing items */
-      @keyframes slideIn {
-        from {
-          opacity: 0;
-          transform: translateY(-10px);
-        }
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      .list-item {
-        animation: slideIn 0.2s ease;
-      }
-
-      /* Override any inherited contain/content-visibility that might cause scrolling issues */
-      .list-items, .list-item {
-        content-visibility: visible !important;
-        contain: none !important;
-        contain-intrinsic-size: auto !important;
+      /* Disable transitions during drop to prevent flash */
+      .list-items.dropping .list-item {
+        transition: none !important;
       }
     `,
   ];
@@ -347,12 +361,11 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
           <div class="list-items">
             ${this.value.length > 0 ? this.value.map((item, index) => html`
               <div
-                class="list-item ${this.draggedIndex === index ? 'dragging' : ''} ${this.dragOverIndex === index ? 'drag-over' : ''}"
+                class="list-item ${this.draggedIndex === index ? 'dragging' : ''}"
                 draggable="${this.sortable && !this.disabled}"
                 @dragstart=${(e: DragEvent) => this.handleDragStart(e, index)}
                 @dragend=${this.handleDragEnd}
                 @dragover=${(e: DragEvent) => this.handleDragOver(e, index)}
-                @dragleave=${this.handleDragLeave}
                 @drop=${(e: DragEvent) => this.handleDrop(e, index)}
               >
                 ${this.sortable && !this.disabled ? html`
@@ -547,48 +560,313 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
     return confirm(message);
   }
 
-  // Drag and drop handlers
+  // Drag and drop handlers - Interactive implementation
   private handleDragStart(e: DragEvent, index: number) {
     if (!this.sortable || this.disabled) return;
-    
+
     this.draggedIndex = index;
+    this.targetIndex = index;
     e.dataTransfer!.effectAllowed = 'move';
     e.dataTransfer!.setData('text/plain', index.toString());
+
+    // Hide the default drag image
+    const emptyImg = new Image();
+    emptyImg.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=';
+    e.dataTransfer!.setDragImage(emptyImg, 0, 0);
+
+    // Store initial mouse position
+    this.dragStartY = e.clientY;
+    this.dragCurrentY = e.clientY;
+
+    // Measure item height and store all original positions before any transforms
+    const listItems = this.shadowRoot?.querySelector('.list-items');
+    const allItems = Array.from(listItems?.querySelectorAll('.list-item') || []) as HTMLElement[];
+
+    if (allItems[index]) {
+      this.itemHeight = allItems[index].offsetHeight;
+    }
+
+    // Store original positions for accurate hit detection (before any transforms are applied)
+    this.originalItemRects = allItems.map(item => item.getBoundingClientRect());
+
+    // Add class to container
+    listItems?.classList.add('is-dragging');
+
+    // Set up global event listeners
+    this.boundHandleGlobalDragOver = this.handleGlobalDragOver.bind(this);
+    this.boundHandleGlobalDragEnd = this.handleGlobalDragEnd.bind(this);
+    document.addEventListener('dragover', this.boundHandleGlobalDragOver);
+    document.addEventListener('dragend', this.boundHandleGlobalDragEnd);
+  }
+
+  private handleGlobalDragOver(e: DragEvent) {
+    e.preventDefault();
+    if (this.draggedIndex === -1) return;
+
+    this.dragCurrentY = e.clientY;
+
+    // Calculate which position the item should move to
+    const listItems = this.shadowRoot?.querySelector('.list-items');
+    if (!listItems) return;
+
+    const items = Array.from(listItems.querySelectorAll('.list-item')) as HTMLElement[];
+    const draggedElement = items[this.draggedIndex];
+    if (!draggedElement) return;
+
+    // Apply transform to dragged item
+    const deltaY = this.dragCurrentY - this.dragStartY;
+    draggedElement.style.transform = `translateY(${deltaY}px)`;
+
+    // Calculate the dragged item's current center position
+    const draggedRect = this.originalItemRects[this.draggedIndex];
+    if (!draggedRect) return;
+    const draggedCenter = draggedRect.top + draggedRect.height / 2 + deltaY;
+
+    // Determine target index: swap when dragged item's center crosses another item's center
+    // Account for items that have already shifted (their visual position changed)
+    let newTargetIndex = this.draggedIndex;
+
+    for (let i = 0; i < items.length; i++) {
+      if (i === this.draggedIndex) continue;
+
+      const rect = this.originalItemRects[i];
+      if (!rect) continue;
+
+      // Adjust item center based on whether it has shifted
+      let itemCenter = rect.top + rect.height / 2;
+
+      // If item has moved, use its shifted position
+      if (items[i].classList.contains('move-up')) {
+        itemCenter -= this.itemHeight;
+      } else if (items[i].classList.contains('move-down')) {
+        itemCenter += this.itemHeight;
+      }
+
+      if (draggedCenter < itemCenter && i < this.draggedIndex) {
+        newTargetIndex = i;
+        break;
+      } else if (draggedCenter > itemCenter && i > this.draggedIndex) {
+        newTargetIndex = i;
+      }
+    }
+
+    // Update target index and apply move classes
+    if (newTargetIndex !== this.targetIndex) {
+      this.targetIndex = newTargetIndex;
+      this.updateItemPositions(items);
+    }
+  }
+
+  private updateItemPositions(items: HTMLElement[]) {
+    const draggedIdx = this.draggedIndex;
+    const targetIdx = this.targetIndex;
+
+    // Set CSS variable for item height
+    const listItems = this.shadowRoot?.querySelector('.list-items') as HTMLElement;
+    if (listItems) {
+      listItems.style.setProperty('--item-height', `${this.itemHeight}px`);
+    }
+
+    items.forEach((item, i) => {
+      if (i === draggedIdx) return; // Skip dragged item
+
+      item.classList.remove('move-up', 'move-down');
+      item.style.setProperty('--item-height', `${this.itemHeight}px`);
+
+      if (draggedIdx < targetIdx) {
+        // Dragging down: items between draggedIdx and targetIdx move up
+        if (i > draggedIdx && i <= targetIdx) {
+          item.classList.add('move-up');
+        }
+      } else if (draggedIdx > targetIdx) {
+        // Dragging up: items between targetIdx and draggedIdx move down
+        if (i >= targetIdx && i < draggedIdx) {
+          item.classList.add('move-down');
+        }
+      }
+    });
+  }
+
+  private handleGlobalDragEnd() {
+    // Clean up event listeners
+    if (this.boundHandleGlobalDragOver) {
+      document.removeEventListener('dragover', this.boundHandleGlobalDragOver);
+      this.boundHandleGlobalDragOver = null;
+    }
+    if (this.boundHandleGlobalDragEnd) {
+      document.removeEventListener('dragend', this.boundHandleGlobalDragEnd);
+      this.boundHandleGlobalDragEnd = null;
+    }
+
+    const listItems = this.shadowRoot?.querySelector('.list-items');
+    const items = listItems?.querySelectorAll('.list-item') as NodeListOf<HTMLElement>;
+    const draggedElement = items?.[this.draggedIndex];
+
+    // If no reorder needed, animate back and clean up
+    if (this.draggedIndex === -1 || this.targetIndex === -1 || this.draggedIndex === this.targetIndex) {
+      // Animate dragged item back to original position
+      if (draggedElement && this.draggedIndex !== -1) {
+        draggedElement.style.transition = 'transform 0.15s ease';
+        draggedElement.style.transform = 'translateY(0)';
+
+        let handled = false;
+        const onReturn = () => {
+          if (handled) return;
+          handled = true;
+          draggedElement.removeEventListener('transitionend', onReturn);
+          this.cleanupDragState(listItems, items);
+        };
+
+        draggedElement.addEventListener('transitionend', onReturn, { once: true });
+        setTimeout(onReturn, 200);
+      } else {
+        this.cleanupDragState(listItems, items);
+      }
+      return;
+    }
+
+    // Calculate final position for dragged item
+    const draggedRect = this.originalItemRects[this.draggedIndex];
+    const targetRect = this.originalItemRects[this.targetIndex];
+
+    if (!draggedRect || !targetRect || !draggedElement) {
+      this.cleanupDragState(listItems, items);
+      return;
+    }
+
+    // Calculate where dragged item needs to go
+    let finalY: number;
+    if (this.targetIndex > this.draggedIndex) {
+      // Moving down: go to bottom of target
+      finalY = targetRect.bottom - draggedRect.bottom;
+    } else {
+      // Moving up: go to top of target
+      finalY = targetRect.top - draggedRect.top;
+    }
+
+    // Animate dragged item to final position
+    draggedElement.style.transition = 'transform 0.15s ease';
+    draggedElement.style.transform = `translateY(${finalY}px)`;
+
+    // After animation completes, update data
+    let handled = false;
+    const onTransitionEnd = () => {
+      if (handled) return;
+      handled = true;
+      draggedElement.removeEventListener('transitionend', onTransitionEnd);
+
+      // Disable all transitions
+      listItems?.classList.add('dropping');
+
+      // Force reflow so dropping class takes effect immediately
+      void (listItems as HTMLElement)?.offsetHeight;
+
+      // Clean up all element state
+      items?.forEach(item => {
+        item.classList.remove('move-up', 'move-down', 'dragging');
+        item.style.removeProperty('transform');
+        item.style.removeProperty('transition');
+      });
+
+      // Update data
+      const newValue = [...this.value];
+      const [draggedItem] = newValue.splice(this.draggedIndex, 1);
+      newValue.splice(this.targetIndex, 0, draggedItem);
+      this.value = newValue;
+      this.emitChange();
+
+      // Reset state
+      this.draggedIndex = -1;
+      this.dragOverIndex = -1;
+      this.targetIndex = -1;
+      this.dragStartY = 0;
+      this.dragCurrentY = 0;
+      this.originalItemRects = [];
+
+      // After render, ensure no animation then re-enable transitions
+      this.updateComplete.then(() => {
+        // Set inline transition:none on fresh elements
+        const freshItems = this.shadowRoot?.querySelectorAll('.list-item') as NodeListOf<HTMLElement>;
+        freshItems?.forEach(item => {
+          item.style.transition = 'none';
+        });
+
+        // Force reflow
+        void (this.shadowRoot?.querySelector('.list-items') as HTMLElement)?.offsetHeight;
+
+        // Now re-enable transitions
+        requestAnimationFrame(() => {
+          freshItems?.forEach(item => {
+            item.style.removeProperty('transition');
+          });
+          listItems?.classList.remove('dropping', 'is-dragging');
+        });
+      });
+    };
+
+    draggedElement.addEventListener('transitionend', onTransitionEnd, { once: true });
+
+    // Fallback timeout in case transitionend doesn't fire
+    setTimeout(onTransitionEnd, 200);
+  }
+
+  private cleanupDragState(listItems: Element | null | undefined, items: NodeListOf<HTMLElement> | undefined) {
+    listItems?.classList.add('dropping');
+
+    // Force reflow so dropping class takes effect immediately
+    void (listItems as HTMLElement)?.offsetHeight;
+
+    items?.forEach(item => {
+      item.classList.remove('move-up', 'move-down', 'dragging');
+      item.style.removeProperty('transform');
+      item.style.removeProperty('transition');
+    });
+
+    this.draggedIndex = -1;
+    this.dragOverIndex = -1;
+    this.targetIndex = -1;
+    this.dragStartY = 0;
+    this.dragCurrentY = 0;
+    this.originalItemRects = [];
+
+    this.updateComplete.then(() => {
+      const freshItems = this.shadowRoot?.querySelectorAll('.list-item') as NodeListOf<HTMLElement>;
+      freshItems?.forEach(item => {
+        item.style.transition = 'none';
+      });
+
+      void (this.shadowRoot?.querySelector('.list-items') as HTMLElement)?.offsetHeight;
+
+      requestAnimationFrame(() => {
+        freshItems?.forEach(item => {
+          item.style.removeProperty('transition');
+        });
+        listItems?.classList.remove('dropping', 'is-dragging');
+      });
+    });
   }
 
   private handleDragEnd() {
-    this.draggedIndex = -1;
-    this.dragOverIndex = -1;
+    // This is called by the native dragend on the element
+    // The actual cleanup is done in handleGlobalDragEnd
+    this.handleGlobalDragEnd();
   }
 
   private handleDragOver(e: DragEvent, index: number) {
     if (!this.sortable || this.disabled) return;
-    
     e.preventDefault();
     e.dataTransfer!.dropEffect = 'move';
-    this.dragOverIndex = index;
+    // We handle positioning in handleGlobalDragOver now
   }
 
   private handleDragLeave() {
-    this.dragOverIndex = -1;
+    // No longer needed for visual feedback - handled by transform
   }
 
   private handleDrop(e: DragEvent, dropIndex: number) {
     if (!this.sortable || this.disabled) return;
-    
     e.preventDefault();
-    const draggedIndex = parseInt(e.dataTransfer!.getData('text/plain'));
-    
-    if (draggedIndex !== dropIndex) {
-      const newValue = [...this.value];
-      const [draggedItem] = newValue.splice(draggedIndex, 1);
-      newValue.splice(dropIndex, 0, draggedItem);
-      this.value = newValue;
-      this.emitChange();
-    }
-    
-    this.draggedIndex = -1;
-    this.dragOverIndex = -1;
+    // The actual reorder happens in handleGlobalDragEnd
   }
 
   private emitChange() {

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

@@ -22,6 +22,7 @@ declare global {
 @customElement('dees-input-multitoggle')
 export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
 
   @property()

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

@@ -22,6 +22,7 @@ declare global {
 export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
   @state()

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

@@ -13,6 +13,7 @@ declare global {
 @customElement('dees-input-quantityselector')
 export class DeesInputQuantitySelector extends DeesInputBase<DeesInputQuantitySelector> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
 

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

@@ -21,6 +21,7 @@ type RadioOption = string | { option: string; key: string; payload?: any };
 @customElement('dees-input-radiogroup')
 export class DeesInputRadiogroup extends DeesInputBase<string | object> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
 

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

@@ -28,6 +28,7 @@ declare global {
 @customElement('dees-input-richtext')
 export class DeesInputRichtext extends DeesInputBase<string> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
   @property({

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

@@ -22,6 +22,7 @@ declare global {
 export class DeesInputTags extends DeesInputBase<DeesInputTags> {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
   @property({ type: Array })

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

@@ -22,6 +22,7 @@ declare global {
 @customElement('dees-input-text')
 export class DeesInputText extends DeesInputBase {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   // INSTANCE
   @property({

ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts

@@ -0,0 +1,310 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import '../../dees-panel/dees-panel.js';
+import type { DeesInputToggle } from './dees-input-toggle.js';
+
+export const demoFunc = () => html`
+  <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+    // Example of programmatic interaction
+    const toggleAllOnBtn = elementArg.querySelector('#toggle-all-on');
+    const toggleAllOffBtn = elementArg.querySelector('#toggle-all-off');
+    const featureToggles = elementArg.querySelectorAll('.feature-toggles dees-input-toggle');
+
+    if (toggleAllOnBtn && toggleAllOffBtn) {
+      toggleAllOnBtn.addEventListener('click', () => {
+        featureToggles.forEach((toggle: DeesInputToggle) => {
+          if (!toggle.disabled && !toggle.required) {
+            toggle.value = true;
+          }
+        });
+      });
+
+      toggleAllOffBtn.addEventListener('click', () => {
+        featureToggles.forEach((toggle: DeesInputToggle) => {
+          if (!toggle.disabled && !toggle.required) {
+            toggle.value = false;
+          }
+        });
+      });
+    }
+  }}>
+    <style>
+      ${css`
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          max-width: 1200px;
+          margin: 0 auto;
+        }
+
+        dees-panel {
+          margin-bottom: 24px;
+        }
+
+        dees-panel:last-child {
+          margin-bottom: 0;
+        }
+
+        .toggle-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
+        .horizontal-toggles {
+          display: flex;
+          gap: 32px;
+          flex-wrap: wrap;
+        }
+
+        .interactive-section {
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+          border-radius: 8px;
+          padding: 16px;
+          margin-top: 16px;
+        }
+
+        .output-text {
+          font-family: monospace;
+          font-size: 13px;
+          color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(210 40% 80%)')};
+          padding: 8px;
+          background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
+          border-radius: 4px;
+          min-height: 24px;
+        }
+
+        .settings-section {
+          background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+          border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+          border-radius: 8px;
+          padding: 20px;
+        }
+
+        .button-group {
+          display: flex;
+          gap: 8px;
+          margin-bottom: 16px;
+        }
+
+        .feature-toggles {
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
+          border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
+          border-radius: 6px;
+          padding: 16px;
+        }
+
+        .section-title {
+          font-size: 16px;
+          font-weight: 600;
+          margin-bottom: 16px;
+          color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        }
+
+        .drag-hint {
+          font-size: 12px;
+          color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+          margin-top: 8px;
+          font-style: italic;
+        }
+      `}
+    </style>
+
+    <div class="demo-container">
+      <dees-panel .title=${'Basic Toggle'} .subtitle=${'Simple on/off toggle switch with drag support'}>
+        <div class="toggle-group">
+          <dees-input-toggle
+            .label=${'Enable feature'}
+            .value=${false}
+            .key=${'basic'}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Active toggle'}
+            .value=${true}
+            .key=${'active'}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'With description'}
+            .value=${false}
+            .description=${'This toggle has additional helper text explaining its purpose'}
+            .key=${'withDesc'}
+          ></dees-input-toggle>
+        </div>
+        <p class="drag-hint">Tip: You can drag the toggle knob to switch states</p>
+      </dees-panel>
+
+      <dees-panel .title=${'Toggle States'} .subtitle=${'Different toggle states and configurations'}>
+        <div class="toggle-group">
+          <dees-input-toggle
+            .label=${'Default (off)'}
+            .value=${false}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Enabled (on)'}
+            .value=${true}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Disabled (off)'}
+            .value=${false}
+            .disabled=${true}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Disabled (on)'}
+            .value=${true}
+            .disabled=${true}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Required (always on)'}
+            .value=${true}
+            .required=${true}
+            .description=${'This toggle cannot be turned off'}
+          ></dees-input-toggle>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Toggles arranged horizontally for compact interfaces'}>
+        <div class="horizontal-toggles">
+          <dees-input-toggle
+            .label=${'WiFi'}
+            .value=${true}
+            .layoutMode=${'horizontal'}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Bluetooth'}
+            .value=${false}
+            .layoutMode=${'horizontal'}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'GPS'}
+            .value=${true}
+            .layoutMode=${'horizontal'}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'NFC'}
+            .value=${false}
+            .layoutMode=${'horizontal'}
+          ></dees-input-toggle>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Settings Example'} .subtitle=${'Toggles in a typical settings context'}>
+        <div class="settings-section">
+          <h4 class="section-title">Notification Settings</h4>
+
+          <div class="toggle-group">
+            <dees-input-toggle
+              .label=${'Push notifications'}
+              .value=${true}
+              .description=${'Receive push notifications on your device'}
+              .key=${'push'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Email notifications'}
+              .value=${true}
+              .description=${'Get important updates via email'}
+              .key=${'email'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Sound'}
+              .value=${false}
+              .description=${'Play a sound for notifications'}
+              .key=${'sound'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Vibration'}
+              .value=${true}
+              .description=${'Vibrate for notifications'}
+              .key=${'vibration'}
+            ></dees-input-toggle>
+          </div>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Feature Toggles'} .subtitle=${'Batch operations on multiple toggles'}>
+        <div class="button-group">
+          <dees-button id="toggle-all-on" type="secondary">Enable All</dees-button>
+          <dees-button id="toggle-all-off" type="secondary">Disable All</dees-button>
+        </div>
+
+        <div class="feature-toggles">
+          <div class="toggle-group">
+            <dees-input-toggle
+              .label=${'Dark Mode'}
+              .value=${true}
+              .key=${'darkMode'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Auto-save'}
+              .value=${true}
+              .key=${'autoSave'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Spell check'}
+              .value=${false}
+              .key=${'spellCheck'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Developer mode'}
+              .value=${false}
+              .key=${'devMode'}
+            ></dees-input-toggle>
+
+            <dees-input-toggle
+              .label=${'Beta features'}
+              .value=${false}
+              .key=${'beta'}
+            ></dees-input-toggle>
+          </div>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Interactive Example'} .subtitle=${'Toggle to see value changes in real-time'}>
+        <div class="toggle-group">
+          <dees-input-toggle
+            .label=${'Airplane mode'}
+            .value=${false}
+            @newValue=${(event: CustomEvent) => {
+              const output = document.querySelector('#airplane-output');
+              if (output) {
+                output.textContent = `Airplane mode: ${event.detail ? 'ON' : 'OFF'}`;
+              }
+            }}
+          ></dees-input-toggle>
+
+          <dees-input-toggle
+            .label=${'Do not disturb'}
+            .value=${false}
+            @newValue=${(event: CustomEvent) => {
+              const output = document.querySelector('#dnd-output');
+              if (output) {
+                output.textContent = `Do not disturb: ${event.detail ? 'ENABLED' : 'DISABLED'}`;
+              }
+            }}
+          ></dees-input-toggle>
+        </div>
+
+        <div class="interactive-section">
+          <div id="airplane-output" class="output-text">Airplane mode: OFF</div>
+          <div id="dnd-output" class="output-text" style="margin-top: 8px;">Do not disturb: DISABLED</div>
+        </div>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
+`;

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

@@ -0,0 +1,372 @@
+import {
+  customElement,
+  type TemplateResult,
+  property,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+import { demoFunc } from './dees-input-toggle.demo.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
+import { themeDefaultStyles } from '../../00theme.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-toggle': DeesInputToggle;
+  }
+}
+
+@customElement('dees-input-toggle')
+export class DeesInputToggle extends DeesInputBase<DeesInputToggle> {
+  // STATIC
+  public static demo = demoFunc;
+  public static demoGroup = 'Input';
+
+  // INSTANCE
+
+  @property({ type: Boolean, reflect: true })
+  accessor value: boolean = false;
+
+  /**
+   * Knob position tracking (0 = off, maxTravel = on)
+   */
+  private currentX = 0;
+
+  /**
+   * Drag state
+   */
+  private isDragging = false;
+  private hasDragged = false;
+  private startX = 0;
+
+  // Toggle dimensions
+  private readonly trackWidth = 36;
+  private readonly trackHeight = 20;
+  private readonly knobSize = 14;
+  private readonly padding = 2;
+  private readonly maxTravel = 16; // trackWidth - knobSize - (padding * 2) - border
+
+  constructor() {
+    super();
+    this.labelPosition = 'right'; // Toggle defaults to label on the right
+  }
+
+  public static styles = [
+    themeDefaultStyles,
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        position: relative;
+        cursor: default;
+        font-family: ${cssGeistFontFamily};
+      }
+
+      .maincontainer {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: 8px;
+        cursor: pointer;
+        user-select: none;
+        transition: all 0.15s ease;
+      }
+
+      .toggle-track {
+        position: relative;
+        flex-shrink: 0;
+        height: 20px;
+        width: 36px;
+        border-radius: 10px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        overflow: hidden;
+        transition: all 0.15s ease;
+        margin-top: 1px;
+      }
+
+      .maincontainer:hover .toggle-track {
+        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+      }
+
+      :host([value]) .toggle-track {
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+      }
+
+      .toggle-track:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
+      }
+
+      .toggle-knob {
+        position: absolute;
+        top: 2px;
+        width: 14px;
+        height: 14px;
+        border-radius: 7px;
+        background: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+        transition: left 0.15s ease, background 0.15s ease;
+        touch-action: none;
+      }
+
+      .toggle-knob.dragging {
+        transition: background 0.15s ease;
+      }
+
+      :host([value]) .toggle-knob {
+        background: white;
+      }
+
+      /* Disabled state */
+      .maincontainer.disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+
+      .toggle-track.disabled {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+
+      /* Required state (locked on) */
+      :host([required][value]) .toggle-track {
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 61.2%)', 'hsl(217.2 91.2% 49.8%)')};
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 61.2%)', 'hsl(217.2 91.2% 49.8%)')};
+        cursor: not-allowed;
+      }
+
+      :host([required][value]) .toggle-knob {
+        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 70%)')};
+      }
+
+      /* Label */
+      .label-container {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        flex: 1;
+      }
+
+      .toggle-label {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 20px;
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        transition: color 0.15s ease;
+        letter-spacing: -0.01em;
+      }
+
+      .maincontainer:hover .toggle-label {
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+      }
+
+      .maincontainer.disabled:hover .toggle-label {
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+      }
+
+      /* Description */
+      .description-text {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        line-height: 1.5;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="input-wrapper">
+        <div class="maincontainer ${this.disabled ? 'disabled' : ''}" @click="${this.handleClick}">
+          <div
+            class="toggle-track ${this.disabled ? 'disabled' : ''}"
+            tabindex="${this.disabled ? '-1' : '0'}"
+            @keydown="${this.handleKeydown}"
+          >
+            <div
+              class="toggle-knob"
+              style="left: ${this.padding + this.currentX}px;"
+              @pointerdown="${this.onPointerDown}"
+              @pointermove="${this.onPointerMove}"
+              @pointerup="${this.onPointerUp}"
+              @pointercancel="${this.onPointerUp}"
+            ></div>
+          </div>
+          <div class="label-container">
+            ${this.label ? html`<div class="toggle-label">${this.label}</div>` : ''}
+            ${this.description ? html`<div class="description-text">${this.description}</div>` : ''}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  public async firstUpdated(_changedProperties: Map<PropertyKey, unknown>) {
+    await super.firstUpdated(_changedProperties);
+    // Initialize knob position based on initial value
+    if (this.required && !this.value) {
+      this.value = true;
+    }
+    this.currentX = this.value ? this.maxTravel : 0;
+    this.requestUpdate();
+  }
+
+  /**
+   * Click handler - toggles the value
+   */
+  private async handleClick(event: MouseEvent) {
+    if (this.isDragging || this.hasDragged) {
+      event.stopPropagation();
+      event.preventDefault();
+      return;
+    }
+
+    if (this.disabled) {
+      return;
+    }
+
+    if (this.required) {
+      // Bounce animation for required toggles
+      this.currentX = this.maxTravel;
+      this.requestUpdate();
+      await new Promise((r) => setTimeout(r, 10));
+      this.currentX = this.maxTravel - 3;
+      this.requestUpdate();
+      await domtools.plugins.smartdelay.delayFor(150);
+      this.currentX = this.maxTravel;
+      this.requestUpdate();
+      return;
+    }
+
+    event.stopPropagation();
+    event.preventDefault();
+
+    this.value = !this.value;
+    this.currentX = this.value ? this.maxTravel : 0;
+    this.requestUpdate();
+
+    this.dispatchEvent(
+      new CustomEvent('newValue', {
+        detail: this.value,
+        bubbles: true,
+      })
+    );
+    this.changeSubject.next(this);
+
+    domtools.plugins.smartdelay.delayFor(0).then(() => {
+      this.hasDragged = false;
+    });
+  }
+
+  /**
+   * Pointer down - start dragging
+   */
+  private onPointerDown(event: PointerEvent) {
+    if (this.required || this.disabled) {
+      return;
+    }
+
+    this.isDragging = true;
+    this.startX = event.clientX - this.currentX;
+    (event.target as HTMLElement).setPointerCapture(event.pointerId);
+  }
+
+  /**
+   * Pointer move - track drag position
+   */
+  private onPointerMove(event: PointerEvent) {
+    if (!this.isDragging) return;
+    const newX = event.clientX - this.startX;
+    this.hasDragged = true;
+
+    const toggleKnob = this.shadowRoot?.querySelector('.toggle-knob') as HTMLDivElement;
+    if (toggleKnob) {
+      toggleKnob.classList.add('dragging');
+    }
+
+    this.currentX = Math.max(0, Math.min(newX, this.maxTravel));
+    this.requestUpdate();
+  }
+
+  /**
+   * Pointer up - complete drag and snap to nearest side
+   */
+  private onPointerUp(event: PointerEvent) {
+    if (!this.isDragging) return;
+    (event.target as HTMLElement).releasePointerCapture(event.pointerId);
+    this.isDragging = false;
+
+    if (!this.hasDragged) {
+      return;
+    }
+
+    const toggleKnob = this.shadowRoot?.querySelector('.toggle-knob') as HTMLDivElement;
+    if (toggleKnob) {
+      toggleKnob.classList.remove('dragging');
+    }
+
+    // Snap to nearest side based on midpoint
+    const midpoint = this.maxTravel / 2;
+    this.value = this.currentX > midpoint;
+    this.currentX = this.value ? this.maxTravel : 0;
+    this.requestUpdate();
+
+    this.dispatchEvent(
+      new CustomEvent('newValue', {
+        detail: this.value,
+        bubbles: true,
+      })
+    );
+    this.changeSubject.next(this);
+
+    domtools.plugins.smartdelay.delayFor(0).then(() => {
+      this.hasDragged = false;
+    });
+  }
+
+  /**
+   * Sync knob position when value is changed externally
+   */
+  updated(changedProperties: Map<string, any>): void {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has('value') &&
+      !this.isDragging &&
+      !this.hasDragged
+    ) {
+      this.currentX = this.value ? this.maxTravel : 0;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Keyboard support
+   */
+  private handleKeydown(event: KeyboardEvent) {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      this.handleClick(event as unknown as MouseEvent);
+    }
+  }
+
+  // DeesInputBase interface implementation
+  public getValue(): boolean {
+    return this.value;
+  }
+
+  public setValue(valueArg: boolean): void {
+    this.value = valueArg;
+  }
+
+  public focus(): void {
+    const track = this.shadowRoot?.querySelector('.toggle-track');
+    if (track) {
+      (track as HTMLElement).focus();
+    }
+  }
+}

ts_web/elements/00group-input/dees-input-toggle/index.ts

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

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

@@ -16,6 +16,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 @customElement('dees-input-typelist')
 export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
 
   // INSTANCE

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

@@ -39,6 +39,7 @@ declare global {
 @customElement('dees-input-wysiwyg')
 export class DeesInputWysiwyg extends DeesInputBase<string> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   @property({ type: String })
   accessor value: string = '';

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

@@ -15,6 +15,7 @@ export * from './dees-input-richtext/index.js';
 export * from './dees-input-searchselect/index.js';
 export * from './dees-input-tags/index.js';
 export * from './dees-input-text/index.js';
+export * from './dees-input-toggle/index.js';
 export * from './dees-input-typelist/index.js';
 export * from './dees-input-wysiwyg.js';
 export * from './profilepicture/dees-input-profilepicture.js';

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

@@ -25,6 +25,7 @@ export type ProfileShape = 'square' | 'round';
 @customElement('dees-input-profilepicture')
 export class DeesInputProfilePicture extends DeesInputBase<DeesInputProfilePicture> {
   public static demo = demoFunc;
+  public static demoGroup = 'Input';
 
   @property({ type: String })
   accessor value: string = ''; // Base64 encoded image or URL

ts_web/elements/00group-pdf/dees-pdf-preview/component.ts

@@ -15,6 +15,7 @@ declare global {
 @customElement('dees-pdf-preview')
 export class DeesPdfPreview extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'PDF';
   public static styles = previewStyles;
 
   @property({ type: String })

ts_web/elements/00group-pdf/dees-pdf-viewer/component.ts

@@ -1,6 +1,4 @@
-import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
-import { keyed } from 'lit/directives/keyed.js';
-import { repeat } from 'lit/directives/repeat.js';
+import { DeesElement, property, html, customElement, type TemplateResult, directives } from '@design.estate/dees-element';
 import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
 import { viewerStyles } from './styles.js';
 import { demo as demoFunc } from './demo.js';
@@ -17,6 +15,7 @@ type RenderState = 'idle' | 'loading' | 'rendering-main' | 'rendering-thumbs' |
 @customElement('dees-pdf-viewer')
 export class DeesPdfViewer extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroup = 'PDF';
   public static styles = viewerStyles;
 
   @property({ type: String })
@@ -196,8 +195,8 @@ export class DeesPdfViewer extends DeesElement {
                 </button>
               </div>
               <div class="sidebar-content">
-                ${keyed(this.documentId, html`
-                  ${repeat(
+                ${directives.keyed(this.documentId, html`
+                  ${directives.repeat(
                     this.thumbnailData,
                     (item) => item.page,
                     (item) => html`
@@ -224,7 +223,7 @@ export class DeesPdfViewer extends DeesElement {
               </div>
             ` : html`
               <div class="pages-container">
-                ${repeat(
+                ${directives.repeat(
                   this.pageData,
                   (item) => item.page,
                   (item) => html`

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

@@ -21,6 +21,7 @@ declare global {
 export class DeesPdf extends DeesElement {
   // DEMO
   public static demo = () => html` <dees-pdf></dees-pdf> `;
+  public static demoGroup = 'PDF';
 
   // INSTANCE
 

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

@@ -33,6 +33,7 @@ export interface IView {
 export class DeesSimpleAppDash extends DeesElement {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroup = 'Simple';
   // INSTANCE
 
   @property()

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

@@ -20,7 +20,8 @@ declare global {
 @customElement('dees-simple-login')
 export class DeesSimpleLogin extends DeesElement {
   // STATIC
-  public static demo = demoFunc
+  public static demo = demoFunc;
+  public static demoGroup = 'Simple';
   // INSTANCE
 
   @property()

ts_web/elements/00group-workspace/dees-workspace-diff-editor/dees-workspace-diff-editor.ts

@@ -31,6 +31,7 @@ export class DeesWorkspaceDiffEditor extends DeesElement {
       .filePath=${'/demo/example.ts'}
     ></dees-workspace-diff-editor>
   `;
+  public static demoGroup = 'Workspace';
 
   // INSTANCE
   public diffEditorDeferred = domtools.plugins.smartpromise.defer<monaco.editor.IStandaloneDiffEditor>();

ts_web/elements/00group-workspace/dees-workspace-filetree/dees-workspace-filetree.ts

@@ -37,6 +37,7 @@ export class DeesWorkspaceFiletree extends DeesElement {
       <dees-workspace-filetree></dees-workspace-filetree>
     </div>
   `;
+  public static demoGroup = 'Workspace';
 
   // INSTANCE
   @property({ type: Object })

ts_web/elements/00group-workspace/dees-workspace-markdown/dees-workspace-markdown.ts

@@ -23,6 +23,7 @@ declare global {
 @customElement('dees-workspace-markdown')
 export class DeesWorkspaceMarkdown extends DeesElement {
   public static demo = () => html`<dees-workspace-markdown></dees-workspace-markdown>`;
+  public static demoGroup = 'Workspace';
 
   public static styles = [
     themeDefaultStyles,

ts_web/elements/00group-workspace/dees-workspace-markdownoutlet/dees-workspace-markdownoutlet.ts

@@ -19,6 +19,7 @@ declare global {
 export class DeesWorkspaceMarkdownoutlet extends DeesElement {
   // DEMO
   public static demo = demoFunc;
+  public static demoGroup = 'Workspace';
 
   public static styles = [
     themeDefaultStyles,

ts_web/elements/00group-workspace/dees-workspace-monaco/dees-workspace-monaco.ts

@@ -23,6 +23,7 @@ declare global {
 export class DeesWorkspaceMonaco extends DeesElement {
   // DEMO
   public static demo = () => html`<dees-workspace-monaco></dees-workspace-monaco>`;
+  public static demoGroup = 'Workspace';
 
   // STATIC
   public static monacoDeferred: ReturnType<typeof domtools.plugins.smartpromise.defer>;

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

@@ -39,6 +39,7 @@ export class DeesWorkspaceTerminalPreview extends DeesElement {
       ]}
     ></dees-workspace-terminal-preview>
   `;
+  public static demoGroup = 'Workspace';
 
   /**
    * The command being displayed (shown in header)

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

@@ -37,6 +37,7 @@ export class DeesWorkspaceTerminal extends DeesElement {
     const env = new WebContainerEnvironment();
     return html`<dees-workspace-terminal .executionEnvironment=${env}></dees-workspace-terminal>`;
   };
+  public static demoGroup = 'Workspace';
 
   // INSTANCE
   private resizeObserver: ResizeObserver;

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

@@ -197,6 +197,7 @@ testSmartPromise();
       </dees-demowrapper>
     `;
   };
+  public static demoGroup = 'Workspace';
 
   // INSTANCE
   @property({ type: Object })

ts_web/elements/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 type { IStatsTile, ICpuCore } 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',

ts_web/elements/dees-statsgrid/dees-statsgrid.ts

@@ -24,28 +24,47 @@ declare global {
   }
 }
 
+export interface ICpuCore {
+  id: string | number;
+  usage: number; // 0-100
+  label?: string;
+}
+
 export interface IStatsTile {
   id: string;
   title: string;
   value: number | string;
   unit?: string;
-  type: 'number' | 'gauge' | 'percentage' | 'trend' | 'text';
-  
+  type: 'number' | 'gauge' | 'percentage' | 'trend' | 'text' | 'multiPercentage' | 'cpuCores';
+
+  // Layout options
+  columnSpan?: number; // Number of columns to span (default: 1)
+
   // For gauge type
   gaugeOptions?: {
     min: number;
     max: number;
     thresholds?: Array<{value: number; color: string}>;
   };
-  
+
   // For trend type
   trendData?: number[];
-  
+
+  // For multiPercentage type
+  percentages?: Array<{
+    label: string;
+    value: number;
+    color?: string;
+  }>;
+
+  // For cpuCores type
+  coresData?: ICpuCore[];
+
   // Visual customization
   color?: string;
   icon?: string;
   description?: string;
-  
+
   // Tile-specific actions
   actions?: plugins.tsclass.website.IMenuItem[];
 }
@@ -191,7 +210,6 @@ export class DeesStatsGrid extends DeesElement {
         min-height: var(--content-min-height);
         display: flex;
         flex-direction: column;
-        justify-content: center;
         flex: 1;
       }
 
@@ -274,6 +292,9 @@ export class DeesStatsGrid extends DeesElement {
       .percentage-wrapper {
         width: 100%;
         position: relative;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
       }
 
       .percentage-value {
@@ -291,6 +312,7 @@ export class DeesStatsGrid extends DeesElement {
         background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
         border-radius: 3px;
         overflow: hidden;
+        margin-top: auto;
       }
 
       .percentage-fill {
@@ -300,12 +322,176 @@ export class DeesStatsGrid extends DeesElement {
         border-radius: 3px;
       }
 
+      /* Multi Percentage Styles */
+      .multi-percentage-wrapper {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+      }
+
+      .multi-percentage-items {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        margin-top: auto;
+      }
+
+      .multi-percentage-item {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+      }
+
+      .multi-percentage-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: baseline;
+      }
+
+      .multi-percentage-label {
+        font-size: 11px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        letter-spacing: -0.01em;
+      }
+
+      .multi-percentage-value {
+        font-size: 13px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        letter-spacing: -0.01em;
+      }
+
+      .multi-percentage-bar {
+        width: 100%;
+        height: 4px;
+        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        border-radius: 2px;
+        overflow: hidden;
+      }
+
+      .multi-percentage-fill {
+        height: 100%;
+        background: ${cssManager.bdTheme('#333333', '#e0e0e0')};
+        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        border-radius: 2px;
+      }
+
+      /* CPU Cores Styles */
+      .cpu-cores-wrapper {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 80px;
+      }
+
+      .cpu-cores-header {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+        margin-bottom: 12px;
+      }
+
+      .cpu-cores-value {
+        font-size: var(--value-font-size);
+        font-weight: 600;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        line-height: 1.1;
+        letter-spacing: -0.025em;
+      }
+
+      .cpu-cores-unit {
+        font-size: var(--unit-font-size);
+        font-weight: 400;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        letter-spacing: -0.01em;
+      }
+
+      .cpu-cores-label {
+        font-size: var(--label-font-size);
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        letter-spacing: -0.01em;
+        margin-left: auto;
+      }
+
+      .cpu-cores-bars {
+        display: flex;
+        align-items: flex-end;
+        gap: 3px;
+        flex: 1;
+        min-height: 60px;
+        padding: 4px 0;
+      }
+
+      .cpu-cores-bars.centered {
+        justify-content: center;
+      }
+
+      .cpu-core-bar-container {
+        flex: 1;
+        min-width: 6px;
+        max-width: 24px;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .cpu-core-bar-wrapper {
+        flex: 1;
+        width: 100%;
+        background: ${cssManager.bdTheme('#e8e8e8', '#1a1a1a')};
+        border-radius: 2px;
+        position: relative;
+        overflow: hidden;
+        min-height: 40px;
+      }
+
+      .cpu-core-bar-fill {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: 100%;
+        background: ${cssManager.bdTheme('#666666', '#888888')};
+        transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
+        border-radius: 2px 2px 0 0;
+      }
+
+      .cpu-core-bar-fill.low {
+        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
+      }
+
+      .cpu-core-bar-fill.medium {
+        background: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
+      }
+
+      .cpu-core-bar-fill.high {
+        background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 84.2% 60.2%)')};
+      }
+
+      .cpu-core-label {
+        font-size: 9px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: 100%;
+      }
+
       /* Trend Styles */
       .trend-container {
         width: 100%;
         display: flex;
         flex-direction: column;
         gap: 8px;
+        flex: 1;
       }
 
       .trend-header {
@@ -341,6 +527,7 @@ export class DeesStatsGrid extends DeesElement {
         width: 100%;
         height: 28px;
         position: relative;
+        margin-top: auto;
       }
 
       .trend-svg {
@@ -420,10 +607,12 @@ export class DeesStatsGrid extends DeesElement {
   private renderTile(tile: IStatsTile): TemplateResult {
     const hasActions = tile.actions && tile.actions.length > 0;
     const clickable = hasActions && tile.actions.length === 1;
+    const columnSpan = tile.columnSpan && tile.columnSpan > 1 ? tile.columnSpan : undefined;
 
     return html`
-      <div 
+      <div
         class="stats-tile ${clickable ? 'clickable' : ''}"
+        style="${columnSpan ? `grid-column: span ${columnSpan}` : ''}"
         @click=${clickable ? () => this.handleTileAction(tile.actions![0], tile) : undefined}
         @contextmenu=${hasActions ? (e: MouseEvent) => this.showContextMenu(e, tile) : undefined}
       >
@@ -464,6 +653,12 @@ export class DeesStatsGrid extends DeesElement {
       case 'trend':
         return this.renderTrend(tile);
 
+      case 'multiPercentage':
+        return this.renderMultiPercentage(tile);
+
+      case 'cpuCores':
+        return this.renderCpuCores(tile);
+
       case 'text':
         return html`
           <div class="text-value" style="${tile.color ? `color: ${tile.color}` : ''}">
@@ -595,6 +790,92 @@ export class DeesStatsGrid extends DeesElement {
     `;
   }
 
+  private renderMultiPercentage(tile: IStatsTile): TemplateResult {
+    if (!tile.percentages || tile.percentages.length === 0) {
+      return html`<div class="tile-value">${tile.value}</div>`;
+    }
+
+    // Limit to 3 percentages
+    const items = tile.percentages.slice(0, 3);
+
+    return html`
+      <div class="multi-percentage-wrapper">
+        <div class="multi-percentage-items">
+          ${items.map(item => {
+            const percentage = Math.min(100, Math.max(0, item.value));
+            return html`
+              <div class="multi-percentage-item">
+                <div class="multi-percentage-header">
+                  <span class="multi-percentage-label">${item.label}</span>
+                  <span class="multi-percentage-value">${percentage}%</span>
+                </div>
+                <div class="multi-percentage-bar">
+                  <div
+                    class="multi-percentage-fill"
+                    style="width: ${percentage}%; ${item.color ? `background: ${item.color}` : ''}"
+                  ></div>
+                </div>
+              </div>
+            `;
+          })}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderCpuCores(tile: IStatsTile): TemplateResult {
+    if (!tile.coresData || tile.coresData.length === 0) {
+      return html`<div class="tile-value">${tile.value}</div>`;
+    }
+
+    const cores = tile.coresData;
+    const avgUsage = Math.round(cores.reduce((sum, core) => sum + core.usage, 0) / cores.length);
+
+    // Determine color class based on usage
+    const getColorClass = (usage: number): string => {
+      if (usage < 50) return 'low';
+      if (usage < 80) return 'medium';
+      return 'high';
+    };
+
+    // Calculate if bars should be centered (when they take up less than 66.6% of available width)
+    // Max bar width = cores * 24px + (cores - 1) * 3px gap
+    const maxBarsWidth = cores.length * 24 + (cores.length - 1) * 3;
+    // Estimate tile content width based on columnSpan and minTileWidth (subtract padding)
+    const columnSpan = tile.columnSpan || 1;
+    const estimatedTileWidth = (this.minTileWidth * columnSpan) + ((columnSpan - 1) * this.gap) - 32; // 32px for padding
+    const shouldCenter = maxBarsWidth < estimatedTileWidth * 0.666;
+
+    return html`
+      <div class="cpu-cores-wrapper">
+        <div class="cpu-cores-header">
+          <span class="cpu-cores-value">${avgUsage}</span>
+          <span class="cpu-cores-unit">%</span>
+          <span class="cpu-cores-label">${cores.length} cores</span>
+        </div>
+        <div class="cpu-cores-bars ${shouldCenter ? 'centered' : ''}">
+          ${cores.map(core => {
+            const usage = Math.min(100, Math.max(0, core.usage));
+            const colorClass = getColorClass(usage);
+            return html`
+              <div class="cpu-core-bar-container" title="Core ${core.label || core.id}: ${usage}%">
+                <div class="cpu-core-bar-wrapper">
+                  <div
+                    class="cpu-core-bar-fill ${colorClass}"
+                    style="height: ${usage}%"
+                  ></div>
+                </div>
+                ${cores.length <= 16 ? html`
+                  <span class="cpu-core-label">${core.label || core.id}</span>
+                ` : ''}
+              </div>
+            `;
+          })}
+        </div>
+      </div>
+    `;
+  }
+
   private async handleGridAction(action: plugins.tsclass.website.IMenuItem) {
     if (action.action) {
       await action.action();

ts_web/services/DeesServiceLibLoader.ts

@@ -25,6 +25,24 @@ export interface IXtermFitAddonBundle {
   FitAddon: typeof FitAddon;
 }
 
+/**
+ * Bundle type for xterm-addon-search
+ * SearchAddon is loaded from CDN, so we use a minimal interface
+ */
+export interface IXtermSearchAddonBundle {
+  SearchAddon: new () => IXtermSearchAddon;
+}
+
+/**
+ * Minimal interface for xterm SearchAddon
+ */
+export interface IXtermSearchAddon {
+  activate(terminal: Terminal): void;
+  dispose(): void;
+  findNext(term: string, searchOptions?: { regex?: boolean; wholeWord?: boolean; caseSensitive?: boolean; incremental?: boolean }): boolean;
+  findPrevious(term: string, searchOptions?: { regex?: boolean; wholeWord?: boolean; caseSensitive?: boolean; incremental?: boolean }): boolean;
+}
+
 /**
  * Bundle type for Tiptap editor and extensions
  */
@@ -56,6 +74,7 @@ export class DeesServiceLibLoader {
   // Cached library references
   private xtermLib: IXtermBundle | null = null;
   private xtermFitAddonLib: IXtermFitAddonBundle | null = null;
+  private xtermSearchAddonLib: IXtermSearchAddonBundle | null = null;
   private highlightJsLib: HLJSApi | null = null;
   private apexChartsLib: typeof ApexChartsType | null = null;
   private tiptapLib: ITiptapBundle | null = null;
@@ -63,6 +82,7 @@ export class DeesServiceLibLoader {
   // Loading promises to prevent duplicate concurrent loads
   private xtermLoadingPromise: Promise<IXtermBundle> | null = null;
   private xtermFitAddonLoadingPromise: Promise<IXtermFitAddonBundle> | null = null;
+  private xtermSearchAddonLoadingPromise: Promise<IXtermSearchAddonBundle> | null = null;
   private highlightJsLoadingPromise: Promise<HLJSApi> | null = null;
   private apexChartsLoadingPromise: Promise<typeof ApexChartsType> | null = null;
   private tiptapLoadingPromise: Promise<ITiptapBundle> | null = null;
@@ -134,6 +154,32 @@ export class DeesServiceLibLoader {
     return this.xtermFitAddonLoadingPromise;
   }
 
+  /**
+   * Load xterm-addon-search from CDN
+   * @returns Promise resolving to SearchAddon class
+   */
+  public async loadXtermSearchAddon(): Promise<IXtermSearchAddonBundle> {
+    if (this.xtermSearchAddonLib) {
+      return this.xtermSearchAddonLib;
+    }
+
+    if (this.xtermSearchAddonLoadingPromise) {
+      return this.xtermSearchAddonLoadingPromise;
+    }
+
+    this.xtermSearchAddonLoadingPromise = (async () => {
+      const url = `${CDN_BASE}/xterm-addon-search@${CDN_VERSIONS.xtermAddonSearch}/+esm`;
+      const module = await import(/* @vite-ignore */ url);
+
+      this.xtermSearchAddonLib = {
+        SearchAddon: module.SearchAddon,
+      };
+      return this.xtermSearchAddonLib;
+    })();
+
+    return this.xtermSearchAddonLoadingPromise;
+  }
+
   /**
    * Inject xterm CSS styles into the document head
    */
@@ -257,6 +303,7 @@ export class DeesServiceLibLoader {
     await Promise.all([
       this.loadXterm(),
       this.loadXtermFitAddon(),
+      this.loadXtermSearchAddon(),
       this.loadHighlightJs(),
       this.loadApexCharts(),
       this.loadTiptap(),
@@ -266,12 +313,14 @@ export class DeesServiceLibLoader {
   /**
    * Check if a specific library is already loaded
    */
-  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'highlightJs' | 'apexCharts' | 'tiptap'): boolean {
+  public isLoaded(library: 'xterm' | 'xtermFitAddon' | 'xtermSearchAddon' | 'highlightJs' | 'apexCharts' | 'tiptap'): boolean {
     switch (library) {
       case 'xterm':
         return this.xtermLib !== null;
       case 'xtermFitAddon':
         return this.xtermFitAddonLib !== null;
+      case 'xtermSearchAddon':
+        return this.xtermSearchAddonLib !== null;
       case 'highlightJs':
         return this.highlightJsLib !== null;
       case 'apexCharts':

ts_web/services/index.ts

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

ts_web/services/versions.ts

@@ -5,6 +5,7 @@
 export const CDN_VERSIONS = {
   xterm: '5.3.0',
   xtermAddonFit: '0.8.0',
+  xtermAddonSearch: '0.13.0',
   highlightJs: '11.11.1',
   apexcharts: '5.3.6',
   tiptap: '2.23.0',