feat(components): add large set of new UI components and demos, reorganize groups, and bump a few dependencies

changelog.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 2026-01-27 - 3.39.0 - feat(components)
+add large set of new UI components and demos, reorganize groups, and bump a few dependencies
+
+- Add Media viewers: dees-image-viewer, dees-audio-viewer, dees-video-viewer, DeesPdf/DeesPdfViewer and related PDF utilities (CanvasPool, PdfManager) and demos
+- Introduce dees-preview composite that auto-detects content and delegates to appropriate viewers
+- New Tile system (DeesTileBase) and tile components: dees-tile-pdf, dees-tile-image, dees-tile-audio, dees-tile-video, dees-tile-note, dees-tile-folder plus demos
+- Add dashboard/grid system: dees-dashboardgrid with drag/resize, collision resolution, layout helpers, demos and utilities
+- Data view additions: dees-table with lucene-like query parser, column utilities, and dees-statsgrid enhancements (including cpuCores visualization)
+- New feedback & overlay components: dees-toast, dees-actionbar, dees-progressbar, dees-spinner, dees-badge and supporting demos/interfaces
+- Many layout and utility components added or improved: dees-panel, dees-chips, dees-heading, dees-label, dees-pagination, dees-stepper, and associated demos
+- Refactor project structure: components organized into 00group-* directories and demo metadata migrated from demoGroup to demoGroups (string[]); many import path updates to match new grouping
+- Deprecations/notes: dees-pdf-preview and legacy dees-pdf marked as deprecated in favor of new viewers/tiles
+- Dependency bumps in package.json: @design.estate/dees-wcctools -> ^3.8.0, @git.zone/tstest -> ^3.1.8
+
 ## 2026-01-26 - 3.38.0 - feat(appui)
 add app shell and bottom bar APIs, new input components, and update README component listings and docs
 

package.json

@@ -18,7 +18,7 @@
   "dependencies": {
     "@design.estate/dees-domtools": "^2.3.7",
     "@design.estate/dees-element": "^2.1.5",
-    "@design.estate/dees-wcctools": "^3.7.1",
+    "@design.estate/dees-wcctools": "^3.8.0",
     "@fortawesome/fontawesome-svg-core": "^7.1.0",
     "@fortawesome/free-brands-svg-icons": "^7.1.0",
     "@fortawesome/free-regular-svg-icons": "^7.1.0",
@@ -46,7 +46,7 @@
   "devDependencies": {
     "@git.zone/tsbuild": "^4.1.2",
     "@git.zone/tsbundle": "^2.8.3",
-    "@git.zone/tstest": "^3.1.7",
+    "@git.zone/tstest": "^3.1.8",
     "@git.zone/tswatch": "^3.0.1",
     "@push.rocks/projectinfo": "^5.0.2",
     "@types/node": "^25.0.10"

pnpm-lock.yaml

@@ -15,8 +15,8 @@ importers:
         specifier: ^2.1.5
         version: 2.1.5
       '@design.estate/dees-wcctools':
-        specifier: ^3.7.1
+        specifier: ^3.8.0
-        version: 3.7.1
+        version: 3.8.0
       '@fortawesome/fontawesome-svg-core':
         specifier: ^7.1.0
         version: 7.1.0
@@ -94,8 +94,8 @@ importers:
         specifier: ^2.8.3
         version: 2.8.3
       '@git.zone/tstest':
-        specifier: ^3.1.7
+        specifier: ^3.1.8
-        version: 3.1.7(@push.rocks/smartserve@2.0.1)(socks@2.8.7)(typescript@5.9.3)
+        version: 3.1.8(@push.rocks/smartserve@2.0.1)(socks@2.8.7)(typescript@5.9.3)
       '@git.zone/tswatch':
         specifier: ^3.0.1
         version: 3.0.1(@tiptap/pm@2.27.2)
@@ -340,6 +340,9 @@ packages:
   '@cloudflare/workers-types@4.20260124.0':
     resolution: {integrity: sha512-h6TJlew6AtGuEXFc+k5ifalk+tg3fkg0lla6XbMAb2AKKfJGwlFNTwW2xyT/Ha92KY631CIJ+Ace08DPdFohdA==}
 
+  '@cloudflare/workers-types@4.20260127.0':
+    resolution: {integrity: sha512-4M1HLcWViSdT/pAeDGEB5x5P3sqW7UIi34QrBRnxXbqjAY9if8vBU/lWRWnM+UqKzxWGB2LYjEVOzZrp0jZL+w==}
+
   '@configvault.io/interfaces@1.0.17':
     resolution: {integrity: sha512-bEcCUR2VBDJsTin8HQh8Uw/mlYl2v8A3jMIaQ+MTB9Hrqd6CZL2dL7iJdWyFl/3EIX+LDxWFR+Oq7liIq7w+1Q==}
 
@@ -355,8 +358,8 @@ packages:
   '@design.estate/dees-element@2.1.5':
     resolution: {integrity: sha512-czUOFvBiUKi34I+/keDRDc71fuORZS0NfbSuD2jJ4D1ODiTPjaZ6A6SkdQ2QqCEzVsx73XF99Pu8pxPnaOLnHg==}
 
-  '@design.estate/dees-wcctools@3.7.1':
+  '@design.estate/dees-wcctools@3.8.0':
-    resolution: {integrity: sha512-BiNWghUoC05RTQOGVCTK+wis6d18LyLY+2p8vHC0q2OBw9hrPoY8k9EplpQgY40MvP0sTXWUwaa7VPXra8ASjA==}
+    resolution: {integrity: sha512-CC14iVKUrguzD9jIrdPBd9fZ4egVJEZMxl5y8iy0l7WLumeoYvGsoXj5INVkRPLRVLqziIdi4Je1hXqHt2NU+g==}
 
   '@emnapi/core@1.8.1':
     resolution: {integrity: sha512-AvT9QFpxK0Zd8J0jopedNm+w/2fIzvtPKPjqyw9jwvBaReTTqPBk9Hixaz7KbjimP+QNz605/XnjFcDAL2pqBg==}
@@ -559,8 +562,8 @@ packages:
     resolution: {integrity: sha512-NEcnsjvlC1o3Z6SS3VhKCf6Ev+Sh4EAinmggslrIR/ppMrvjDbXNFXoyr3PB+GLeSAR0JRZ1fGvVYjpEzjBdIg==}
     hasBin: true
 
-  '@git.zone/tstest@3.1.7':
+  '@git.zone/tstest@3.1.8':
-    resolution: {integrity: sha512-YCDA+65LJhoY3WJxrNduKlpGf37aq4bFe+fdRqE0dZ2W1f7j3sUunBaBzckShSHKRjkMdPZKr0W0sXFXUK/PcA==}
+    resolution: {integrity: sha512-nmiLGeOkKMkLDyIk5BUBLx5ExskFbKHKlPdrWCARPVFkU4cAAiuIyJWVfLwISoS0TO/zSInLqArPwIc76yvaNw==}
     hasBin: true
 
   '@git.zone/tswatch@3.0.1':
@@ -851,8 +854,8 @@ packages:
   '@push.rocks/smartbucket@3.3.10':
     resolution: {integrity: sha512-0H2MioALspC8Aj0Q1FPCs2w4k2u9oJg7Q5yM8+1TZo7aRfrdxgM5HQ7z3apUaqC3ZEDewW6vSlttjHFHhMEC3A==}
 
-  '@push.rocks/smartbucket@4.3.1':
+  '@push.rocks/smartbucket@4.4.1':
-    resolution: {integrity: sha512-fMA8w98/E+usaaLkLm6wDj1XSpR0shTtG8AxTdwWIlH1YemQj/aCf4wReezDxUFVoUpC3HMzzV2RTFtQvHndeQ==}
+    resolution: {integrity: sha512-68GFLgJKW+LXvuN+yuV8O/FozGMecraoT+PkI5whdRPFe7N3u2iYIHWAUjvQvVU4ygpdJv0kih2JDf5k3PYycw==}
 
   '@push.rocks/smartbuffer@3.0.5':
     resolution: {integrity: sha512-pWYF08Mn8s/KF/9nHRk7pZPzuMjmYVQay2c5gGexdayxn1W4eCSYYhWH73vR2JBfGeGq/izbRNuUuEaIEeTIKA==}
@@ -1927,8 +1930,8 @@ packages:
   asynckit@0.4.0:
     resolution: {integrity: sha1-x57Zf380y48robyXkLzDZkdLS3k=}
 
-  axios@1.13.2:
+  axios@1.13.3:
-    resolution: {integrity: sha512-VPk9ebNqPcy5lRGuSlKx752IlDatOjT9paPlm8A7yOuW2Fbvp4X3JznJtT4f0GzGLLiWE9W8onz51SqLYwzGaA==}
+    resolution: {integrity: sha512-ERT8kdX7DZjtUm7IitEyV7InTHAF42iJuMArIiDIV5YtPanJkgw4hw5Dyg9fh0mihdWNn1GKaeIWErfe56UQ1g==}
 
   b4a@1.7.3:
     resolution: {integrity: sha512-5Q2mfq2WfGuFp3uS//0s6baOJLMoVduPYVeNmDYxu5OUA1/cBfvr2RIS7vi62LdNj/urk1hfmj867I3qt6uZ7Q==}
@@ -1952,8 +1955,8 @@ packages:
       bare-abort-controller:
         optional: true
 
-  bare-fs@4.5.2:
+  bare-fs@4.5.3:
-    resolution: {integrity: sha512-veTnRzkb6aPHOvSKIOy60KzURfBdUflr5VReI+NSaPL6xf+XLdONQgZgpYvUuZLVQ8dCqxpBAudaOM1+KpAUxw==}
+    resolution: {integrity: sha512-9+kwVx8QYvt3hPWnmb19tPnh38c6Nihz8Lx3t0g9+4GoIf3/fTgYwM4Z6NxgI+B9elLQA7mLE9PpqcWtOMRDiQ==}
     engines: {bare: '>=1.16.0'}
     peerDependencies:
       bare-buffer: '*'
@@ -4048,7 +4051,7 @@ snapshots:
       '@api.global/typedrequest': 3.2.5
       '@api.global/typedrequest-interfaces': 3.0.19
       '@api.global/typedsocket': 3.1.1(@push.rocks/smartserve@2.0.1)
-      '@cloudflare/workers-types': 4.20260124.0
+      '@cloudflare/workers-types': 4.20260127.0
       '@design.estate/dees-comms': 1.0.30
       '@push.rocks/lik': 6.2.2
       '@push.rocks/smartchok': 1.2.0
@@ -4719,6 +4722,8 @@ snapshots:
 
   '@cloudflare/workers-types@4.20260124.0': {}
 
+  '@cloudflare/workers-types@4.20260127.0': {}
+
   '@configvault.io/interfaces@1.0.17':
     dependencies:
       '@api.global/typedrequest-interfaces': 3.0.19
@@ -4727,7 +4732,7 @@ snapshots:
     dependencies:
       '@design.estate/dees-domtools': 2.3.7
       '@design.estate/dees-element': 2.1.5
-      '@design.estate/dees-wcctools': 3.7.1
+      '@design.estate/dees-wcctools': 3.8.0
       '@fortawesome/fontawesome-svg-core': 7.1.0
       '@fortawesome/free-brands-svg-icons': 7.1.0
       '@fortawesome/free-regular-svg-icons': 7.1.0
@@ -4803,7 +4808,7 @@ snapshots:
       - supports-color
       - vue
 
-  '@design.estate/dees-wcctools@3.7.1':
+  '@design.estate/dees-wcctools@3.8.0':
     dependencies:
       '@design.estate/dees-domtools': 2.3.7
       '@design.estate/dees-element': 2.1.5
@@ -5002,7 +5007,7 @@ snapshots:
       '@push.rocks/smartshell': 3.3.0
       tsx: 4.21.0
 
-  '@git.zone/tstest@3.1.7(@push.rocks/smartserve@2.0.1)(socks@2.8.7)(typescript@5.9.3)':
+  '@git.zone/tstest@3.1.8(@push.rocks/smartserve@2.0.1)(socks@2.8.7)(typescript@5.9.3)':
     dependencies:
       '@api.global/typedserver': 3.0.80(@push.rocks/smartserve@2.0.1)
       '@git.zone/tsbundle': 2.8.3
@@ -5572,7 +5577,7 @@ snapshots:
     transitivePeerDependencies:
       - aws-crt
 
-  '@push.rocks/smartbucket@4.3.1':
+  '@push.rocks/smartbucket@4.4.1':
     dependencies:
       '@aws-sdk/client-s3': 3.975.0
       '@push.rocks/smartmime': 2.0.4
@@ -6023,7 +6028,7 @@ snapshots:
 
   '@push.rocks/smarts3@3.0.3':
     dependencies:
-      '@push.rocks/smartbucket': 4.3.1
+      '@push.rocks/smartbucket': 4.4.1
       '@push.rocks/smartfs': 1.3.1
       '@push.rocks/smartpath': 6.0.0
       '@push.rocks/smartxml': 2.0.0
@@ -7112,7 +7117,7 @@ snapshots:
     dependencies:
       '@peculiar/x509': 1.14.3
       asn1js: 3.0.7
-      axios: 1.13.2(debug@4.4.3)
+      axios: 1.13.3(debug@4.4.3)
       debug: 4.4.3
       node-forge: 1.3.3
     transitivePeerDependencies:
@@ -7171,7 +7176,7 @@ snapshots:
 
   asynckit@0.4.0: {}
 
-  axios@1.13.2(debug@4.4.3):
+  axios@1.13.3(debug@4.4.3):
     dependencies:
       follow-redirects: 1.15.11(debug@4.4.3)
       form-data: 4.0.5
@@ -7187,7 +7192,7 @@ snapshots:
 
   bare-events@2.8.2: {}
 
-  bare-fs@4.5.2:
+  bare-fs@4.5.3:
     dependencies:
       bare-events: 2.8.2
       bare-path: 3.0.0
@@ -9403,7 +9408,7 @@ snapshots:
       pump: 3.0.3
       tar-stream: 3.1.7
     optionalDependencies:
-      bare-fs: 4.5.2
+      bare-fs: 4.5.3
       bare-path: 3.0.0
     transitivePeerDependencies:
       - bare-abort-controller

readme.hints.md

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

ts_web/00_commitinfo_data.ts

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

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

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

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

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

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

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

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

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

@@ -11,7 +11,7 @@ import {
   css,
   cssManager,
 } from '@design.estate/dees-element';
-import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { demoFunc } from './dees-appui-mainmenu.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
 
@@ -22,7 +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';
+  public static demoGroups = ['App UI'];
 
   // INSTANCE
 

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

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

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

@@ -1,8 +1,8 @@
 import * as plugins from '../../00plugins.js';
 import * as interfaces from '../../interfaces/index.js';
 
-import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
-import '../../dees-icon/dees-icon.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 
 import {
   DeesElement,
@@ -33,7 +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';
+  public static demoGroups = ['App UI'];
 
   // INSTANCE
 

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

@@ -18,7 +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';
+  public static demoGroups = ['App UI'];
 
   // INSTANCE
   @property({

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

@@ -3,8 +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 '../../00group-dataview/dees-statsgrid/dees-statsgrid.js';
-import type { IStatsTile } from '../../dees-statsgrid/dees-statsgrid.js';
+import type { IStatsTile } from '../../00group-dataview/dees-statsgrid/dees-statsgrid.js';
 
 // Demo view component with lifecycle hooks
 @customElement('demo-dashboard-view')

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,10 +1,10 @@
 import { html, css, cssManager, domtools } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../../dees-panel/dees-panel.js';
+import '../../00group-layout/dees-panel/dees-panel.js';
 import '../../00group-form/dees-form/dees-form.js';
 import '../../00group-form/dees-form-submit/dees-form-submit.js';
 import '../../00group-input/dees-input-text/dees-input-text.js';
-import '../../dees-icon/dees-icon.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 import type { DeesButton } from '../dees-button/dees-button.js';
 
 export const demoFunc = () => html`

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

@@ -23,7 +23,7 @@ declare global {
 @customElement('dees-button')
 export class DeesButton extends DeesElement {
   public static demo = demoFunc;
-  public static demoGroup = 'Button';
+  public static demoGroups = ['Button'];
 
   @property({
     reflect: true,

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

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

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

@@ -44,7 +44,7 @@ export interface ILogMetrics {
 @customElement('dees-chart-log')
 export class DeesChartLog extends DeesElement {
   public static demo = demoFunc;
-  public static demoGroup = 'Chart';
+  public static demoGroups = ['Chart', 'Workspace'];
 
   @property()
   accessor label: string = 'Server Logs';

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

@@ -15,7 +15,7 @@ import type { HLJSApi } from 'highlight.js';
 import * as smartstring from '@push.rocks/smartstring';
 
 import * as domtools from '@design.estate/dees-domtools';
-import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { DeesServiceLibLoader } from '../../../services/index.js';
 
 declare global {
@@ -27,7 +27,7 @@ declare global {
 @customElement('dees-dataview-codebox')
 export class DeesDataviewCodebox extends DeesElement {
   public static demo = demoFunc;
-  public static demoGroup = 'Data View';
+  public static demoGroups = ['Data View', 'Workspace'];
 
   @property()
   accessor progLang: string = 'typescript';
@@ -206,9 +206,7 @@ export class DeesDataviewCodebox extends DeesElement {
         }}"
       >
         <div class="appbar">
-          <dees-windowcontrols type="mac" position="left"></dees-windowcontrols>
           <div class="fileName">index.ts</div>
-          <dees-windowcontrols type="mac" position="right"></dees-windowcontrols>
         </div>
         <div class="codegrid">
           <div class="lineNumbers">

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

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

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

@@ -1,6 +1,6 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../dees-panel/dees-panel.js';
+import '../../00group-layout/dees-panel/dees-panel.js';
 import type { IStatsTile, ICpuCore, IPartitionData, IDiskData } from '../dees-statsgrid/dees-statsgrid.js';
 
 // Helper function to generate random CPU core data

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

@@ -1,6 +1,6 @@
 import { demoFunc } from './dees-statsgrid.demo.js';
-import * as plugins from '../00plugins.js';
+import * as plugins from '../../00plugins.js';
-import { cssGeistFontFamily } from '../00fonts.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
 import {
   customElement,
   html,
@@ -13,10 +13,10 @@ import {
 } from '@design.estate/dees-element';
 import type { TemplateResult } from '@design.estate/dees-element';
 
-import '../dees-icon/dees-icon.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
-import '../dees-contextmenu/dees-contextmenu.js';
+import '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
-import '../00group-button/dees-button/dees-button.js';
+import '../../00group-button/dees-button/dees-button.js';
-import { themeDefaultStyles } from '../00theme.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -96,6 +96,7 @@ export interface IStatsTile {
 @customElement('dees-statsgrid')
 export class DeesStatsGrid extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['Data View'];
 
   @property({ type: Array })
   accessor tiles: IStatsTile[] = [];

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

@@ -1,5 +1,5 @@
 import { type ITableAction } from './dees-table.js';
-import * as plugins from '../00plugins.js';
+import * as plugins from '../../00plugins.js';
 import { html, css, cssManager } from '@design.estate/dees-element';
 
 interface ITableDemoData {

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

@@ -1,10 +1,10 @@
-import * as plugins from '../00plugins.js';
+import * as plugins from '../../00plugins.js';
 import { demoFunc } from './dees-table.demo.js';
 import { customElement, html, DeesElement, property, type TemplateResult, directives } from '@design.estate/dees-element';
 
-import { DeesContextmenu } from '../dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import * as domtools from '@design.estate/dees-domtools';
-import { type TIconKey } from '../dees-icon/dees-icon.js';
+import { type TIconKey } from '../../00group-utility/dees-icon/dees-icon.js';
 import { tableStyles } from './styles.js';
 import type { Column, ITableAction, ITableActionDataArg, TDisplayFunction } from './types.js';
 import {
@@ -14,7 +14,7 @@ import {
   getViewData as getViewDataFn,
 } from './data.js';
 import { compileLucenePredicate } from './lucene.js';
-import { themeDefaultStyles } from '../00theme.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 export type { Column, ITableAction, ITableActionDataArg, TDisplayFunction } from './types.js';
 
@@ -30,6 +30,7 @@ declare global {
 @customElement('dees-table')
 export class DeesTable<T> extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['Data View'];
 
   // INSTANCE
   @property({

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

@@ -1,6 +1,6 @@
 import { cssManager, css, type CSSResult } from '@design.estate/dees-element';
-import { cssGeistFontFamily } from '../00fonts.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
-import { themeDefaultStyles } from '../00theme.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 export const tableStyles: CSSResult[] = [
   themeDefaultStyles,

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

@@ -1,5 +1,5 @@
 import type { TemplateResult } from '@design.estate/dees-element';
-import type { TIconKey } from '../dees-icon/dees-icon.js';
+import type { TIconKey } from '../../00group-utility/dees-icon/dees-icon.js';
 
 export interface ITableActionDataArg<T> {
   item: T;

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

@@ -1,3 +1,5 @@
 // Data View Components
 export * from './dees-dataview-codebox/index.js';
 export * from './dees-dataview-statusobject/index.js';
+export * from './dees-table/index.js';
+export * from './dees-statsgrid/index.js';

ts_web/elements/00group-feedback/dees-actionbar/dees-actionbar.ts

@@ -7,8 +7,8 @@ import {
   state,
   cssManager,
 } from '@design.estate/dees-element';
-import { themeDefaultStyles } from '../00theme.js';
+import { themeDefaultStyles } from '../../00theme.js';
-import '../dees-icon/dees-icon.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 import type {
   IActionBarOptions,
   IActionBarResult,
@@ -25,6 +25,7 @@ declare global {
 @customElement('dees-actionbar')
 export class DeesActionbar extends DeesElement {
   // STATIC
+  public static demoGroups = ['Feedback', 'Overlay'];
   public static demo = () => {
     const getActionbar = (e: Event) => {
       const button = e.currentTarget as HTMLElement;

ts_web/elements/00group-feedback/dees-badge/dees-badge.ts

@@ -11,7 +11,7 @@ import {
 
 import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-badge.demo.js';
-import { themeDefaultStyles } from '../00theme.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -22,6 +22,7 @@ declare global {
 @customElement('dees-badge')
 export class DeesBadge extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['Feedback'];
 
   @property({ type: String })
   accessor type: 'default' | 'primary' | 'success' | 'warning' | 'error' = 'default';

ts_web/elements/00group-feedback/dees-hint/dees-hint.ts

@@ -11,7 +11,7 @@ import {
 
 import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-hint.demo.js';
-import { themeDefaultStyles } from '../00theme.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -22,6 +22,7 @@ declare global {
 @customElement('dees-hint')
 export class DeesHint extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['Feedback'];
 
   @property({ type: String })
   accessor type: 'info' | 'warn' | 'error' | 'critical' = 'info';

ts_web/elements/00group-feedback/dees-progressbar/dees-progressbar.ts

@@ -1,5 +1,5 @@
-import * as plugins from '../00plugins.js';
+import * as plugins from '../../00plugins.js';
-import * as colors from '../00colors.js';
+import * as colors from '../../00colors.js';
 import { demoFunc } from './dees-progressbar.demo.js';
 import {
   customElement,
@@ -16,12 +16,13 @@ import {
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
-import { themeDefaultStyles } from '../00theme.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 @customElement('dees-progressbar')
 export class DeesProgressbar extends DeesElement {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroups = ['Feedback'];
 
   // INSTANCE
   @property({

ts_web/elements/00group-feedback/dees-spinner/dees-spinner.ts

@@ -11,7 +11,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
-import { themeDefaultStyles } from '../00theme.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -21,6 +21,7 @@ declare global {
 
 @customElement('dees-spinner')
 export class DeesSpinner extends DeesElement {
+  public static demoGroups = ['Feedback'];
   public static demo = () => html`
     <dees-spinner></dees-spinner>
     <dees-spinner status="success"></dees-spinner>

ts_web/elements/00group-feedback/dees-toast/dees-toast.demo.ts

@@ -1,6 +1,6 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import { DeesToast } from '../dees-toast/dees-toast.js';
-import '../00group-button/dees-button/dees-button.js';
+import '../../00group-button/dees-button/dees-button.js';
 
 export const demoFunc = () => html`
     <style>

ts_web/elements/00group-feedback/dees-toast/dees-toast.ts

@@ -1,10 +1,10 @@
 import { customElement, DeesElement, type TemplateResult, html, css, property, cssManager } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
-import { zIndexLayers } from '../00zindex.js';
+import { zIndexLayers } from '../../00zindex.js';
 import { demoFunc } from './dees-toast.demo.js';
-import { cssGeistFontFamily } from '../00fonts.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
-import { themeDefaultStyles } from '../00theme.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -26,6 +26,7 @@ export interface IToastOptions {
 export class DeesToast extends DeesElement {
   // STATIC
   public static demo = demoFunc;
+  public static demoGroups = ['Feedback', 'Overlay'];
 
   private static toastContainers = new Map<ToastPosition, HTMLDivElement>();
 

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

@@ -0,0 +1,7 @@
+// Feedback Components
+export * from './dees-actionbar/index.js';
+export * from './dees-badge/index.js';
+export * from './dees-hint/index.js';
+export * from './dees-progressbar/index.js';
+export * from './dees-spinner/index.js';
+export * from './dees-toast/index.js';

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

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

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

@@ -22,7 +22,7 @@ import { DeesInputPhone } from '../../00group-input/dees-input-phone/dees-input-
 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';
+import { DeesTable } from '../../00group-dataview/dees-table/index.js';
 import { demoFunc } from './dees-form.demo.js';
 
 // Unified set for form input types
@@ -68,7 +68,7 @@ declare global {
 @customElement('dees-form')
 export class DeesForm extends DeesElement {
   public static demo = demoFunc;
-  public static demoGroup = 'Form';
+  public static demoGroups = ['Form'];
 
   public name: string = 'myform';
   public changeSubject = new domtools.plugins.smartrx.rxjs.Subject();

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

@@ -1,6 +1,6 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../../dees-panel/dees-panel.js';
+import '../../00group-layout/dees-panel/dees-panel.js';
 import type { DeesInputCheckbox } from '../dees-input-checkbox/dees-input-checkbox.js';
 import '../../00group-button/dees-button/dees-button.js';
 

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

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

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

@@ -9,9 +9,9 @@ import {
   state,
 } from '@design.estate/dees-element';
 import { themeDefaultStyles } from '../../00theme.js';
-import { DeesModal } from '../../dees-modal/dees-modal.js';
+import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js';
-import '../../dees-icon/dees-icon.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
-import '../../dees-label/dees-label.js';
+import '../../00group-layout/dees-label/dees-label.js';
 import '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
 import { DeesWorkspaceMonaco } from '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
 
@@ -54,7 +54,7 @@ export class DeesInputCode extends DeesInputBase<string> {
       .value=${'const greeting: string = "Hello World";\nconsole.log(greeting);'}
     ></dees-input-code>
   `;
-  public static demoGroup = 'Input';
+  public static demoGroups = ['Input', 'Workspace'];
 
   // INSTANCE
   @property({ type: String })

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

@@ -9,8 +9,8 @@ import { demoFunc } from './demo.js';
 import { datepickerStyles } from './styles.js';
 import { renderDatepicker } from './template.js';
 import type { IDateEvent } from './types.js';
-import '../../dees-icon/dees-icon.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
-import '../../dees-label/dees-label.js';
+import '../../00group-layout/dees-label/dees-label.js';
 
 
 declare global {
@@ -22,7 +22,7 @@ declare global {
 @customElement('dees-input-datepicker')
 export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
   public static demo = demoFunc;
-  public static demoGroup = 'Input';
+  public static demoGroups = ['Input'];
 
   @property({ type: String })
   accessor value: string = '';

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

@@ -1,6 +1,6 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../../dees-panel/dees-panel.js';
+import '../../00group-layout/dees-panel/dees-panel.js';
 import './component.js';
 import type { DeesInputDatepicker } from './component.js';
 

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

@@ -1,6 +1,6 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../../dees-panel/dees-panel.js';
+import '../../00group-layout/dees-panel/dees-panel.js';
 import '../../00group-form/dees-form/dees-form.js';
 import '../../00group-form/dees-form-submit/dees-form-submit.js';
 

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

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

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

@@ -1,8 +1,8 @@
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
 import { demoFunc } from './demo.js';
 import { fileuploadStyles } from './styles.js';
-import '../../dees-icon/dees-icon.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
-import '../../dees-label/dees-label.js';
+import '../../00group-layout/dees-label/dees-label.js';
 
 import {
   customElement,
@@ -21,7 +21,7 @@ declare global {
 @customElement('dees-input-fileupload')
 export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
   public static demo = demoFunc;
-  public static demoGroup = 'Input';
+  public static demoGroups = ['Input'];
 
   @property({ attribute: false })
   accessor value: File[] = [];

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../../dees-panel/dees-panel.js';
+import '../../00group-layout/dees-panel/dees-panel.js';
 import '../../00group-form/dees-form/dees-form.js';
 import '../dees-input-text/dees-input-text.js';
 import '../../00group-form/dees-form-submit/dees-form-submit.js';

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

@@ -8,7 +8,7 @@ import {
   type TemplateResult,
 } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
-import '../../dees-icon/dees-icon.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 import '../../00group-button/dees-button/dees-button.js';
 import { demoFunc } from './dees-input-list.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
@@ -23,7 +23,7 @@ declare global {
 export class DeesInputList extends DeesInputBase<DeesInputList> {
   // STATIC
   public static demo = demoFunc;
-  public static demoGroup = 'Input';
+  public static demoGroups = ['Input'];
 
   // INSTANCE
   @property({ type: Array })

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

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

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

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

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

@@ -1,5 +1,5 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
-import '../../dees-shopping-productcard/dees-shopping-productcard.js';
+import '../../00group-simple/dees-shopping-productcard/dees-shopping-productcard.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>

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

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

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

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

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

@@ -21,7 +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';
+  public static demoGroups = ['Input'];
 
   // INSTANCE
 

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

@@ -3,7 +3,7 @@ import { demoFunc } from './demo.js';
 import { richtextStyles } from './styles.js';
 import { renderRichtext } from './template.js';
 import type { IToolbarButton } from './types.js';
-import '../../dees-icon/dees-icon.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 
 import {
   customElement,
@@ -28,7 +28,7 @@ declare global {
 @customElement('dees-input-richtext')
 export class DeesInputRichtext extends DeesInputBase<string> {
   public static demo = demoFunc;
-  public static demoGroup = 'Input';
+  public static demoGroups = ['Input'];
 
   // INSTANCE
   @property({

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

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

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

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

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

@@ -8,7 +8,7 @@ import {
   type TemplateResult,
 } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
-import '../../dees-icon/dees-icon.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 import { demoFunc } from './dees-input-tags.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
 
@@ -22,7 +22,7 @@ declare global {
 export class DeesInputTags extends DeesInputBase<DeesInputTags> {
   // STATIC
   public static demo = demoFunc;
-  public static demoGroup = 'Input';
+  public static demoGroups = ['Input'];
 
   // INSTANCE
   @property({ type: Array })

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

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

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

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

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

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

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

@@ -22,7 +22,7 @@ declare global {
 export class DeesInputToggle extends DeesInputBase<DeesInputToggle> {
   // STATIC
   public static demo = demoFunc;
-  public static demoGroup = 'Input';
+  public static demoGroups = ['Input'];
 
   // INSTANCE
 

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

@@ -16,7 +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';
+  public static demoGroups = ['Input'];
 
 
   // INSTANCE

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

@@ -1,6 +1,6 @@
 import { html, css, type TemplateResult } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../dees-panel/dees-panel.js';
+import '../00group-layout/dees-panel/dees-panel.js';
 import type { DeesInputWysiwyg } from './dees-input-wysiwyg/dees-input-wysiwyg.js';
 import type { IBlock } from './dees-input-wysiwyg/wysiwyg.types.js';
 

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

@@ -1,6 +1,6 @@
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
 import { demoFunc } from '../dees-input-wysiwyg.demo.js';
-import { DeesModal } from '../../dees-modal/dees-modal.js';
+import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js';
 
 import {
   customElement,
@@ -39,7 +39,7 @@ declare global {
 @customElement('dees-input-wysiwyg')
 export class DeesInputWysiwyg extends DeesInputBase<string> {
   public static demo = demoFunc;
-  public static demoGroup = 'Input';
+  public static demoGroups = ['Input', 'Workspace'];
 
   @property({ type: String })
   accessor value: string = '';

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

@@ -8,7 +8,7 @@ import {
   state,
 } from '@design.estate/dees-element';
 import { zIndexRegistry } from '../../00zindex.js';
-import '../../dees-icon/dees-icon.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 
 import { type ISlashMenuItem } from './wysiwyg.types.js';
 import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';

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

@@ -14,7 +14,7 @@ import { WysiwygSelection } from './wysiwyg.selection.js';
 import { BlockRegistry, type IBlockEventHandlers } from './blocks/index.js';
 import './wysiwyg.blockregistration.js';
 import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
-import '../../dees-contextmenu/dees-contextmenu.js';
+import '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { themeDefaultStyles } from '../../00theme.js';
 
 declare global {

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

@@ -1,5 +1,5 @@
 import { html, type TemplateResult, cssManager } from '@design.estate/dees-element';
-import { DeesModal } from '../../dees-modal/dees-modal.js';
+import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js';
 import { type IBlock } from './wysiwyg.types.js';
 import { WysiwygShortcuts } from './wysiwyg.shortcuts.js';
 import { PROGRAMMING_LANGUAGES } from './wysiwyg.constants.js';

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

@@ -1,6 +1,6 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../../dees-panel/dees-panel.js';
+import '../../00group-layout/dees-panel/dees-panel.js';
 import './dees-input-profilepicture.js';
 import type { DeesInputProfilePicture } from './dees-input-profilepicture.js';
 

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

@@ -8,8 +8,8 @@ import {
   type TemplateResult,
 } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
-import '../../dees-icon/dees-icon.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
-import '../../dees-label/dees-label.js';
+import '../../00group-layout/dees-label/dees-label.js';
 import { ProfilePictureModal } from './profilepicture.modal.js';
 import { demoFunc } from './dees-input-profilepicture.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
@@ -25,7 +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';
+  public static demoGroups = ['Input'];
 
   @property({ type: String })
   accessor value: string = ''; // Base64 encoded image or URL

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

@@ -11,10 +11,10 @@ import {
 import * as colors from '../../00colors.js';
 import { cssGeistFontFamily } from '../../00fonts.js';
 import { zIndexRegistry } from '../../00zindex.js';
-import '../../dees-icon/dees-icon.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
 import '../../00group-button/dees-button/dees-button.js';
-import '../../dees-windowlayer/dees-windowlayer.js';
+import '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
-import { DeesWindowLayer } from '../../dees-windowlayer/dees-windowlayer.js';
+import { DeesWindowLayer } from '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
 import { ImageCropper } from './profilepicture.cropper.js';
 import type { ProfileShape } from './dees-input-profilepicture.js';
 import { themeDefaultStyles } from '../../00theme.js';

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

@@ -12,7 +12,7 @@ import {
 
 import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-chips.demo.js';
-import { themeDefaultStyles } from '../00theme.js';
+import { themeDefaultStyles } from '../../00theme.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -25,6 +25,7 @@ type Tag = { key: string; value: string };
 @customElement('dees-chips')
 export class DeesChips extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['Layout'];
 
   @property()
   accessor selectionMode: 'none' | 'single' | 'multiple' = 'single';

ts_web/elements/00group-layout/dees-dashboardgrid/contextmenu.ts

@@ -1,7 +1,7 @@
 import type { DashboardWidget } from './types.js';
-import { DeesContextmenu } from '../dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import type { DeesDashboardgrid } from './dees-dashboardgrid.js';
-import * as plugins from '../00plugins.js';
+import * as plugins from '../../00plugins.js';
 
 export interface WidgetContextMenuOptions {
   widget: DashboardWidget;

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

@@ -7,8 +7,8 @@ import {
   type TemplateResult,
 } from '@design.estate/dees-element';
 
-import '../dees-icon/dees-icon.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
-import '../dees-contextmenu/dees-contextmenu.js';
+import '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { demoFunc } from './dees-dashboardgrid.demo.js';
 import { dashboardGridStyles } from './styles.js';
 import {
@@ -68,6 +68,7 @@ type ResizeState = {
 @customElement('dees-dashboardgrid')
 export class DeesDashboardgrid extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['Layout'];
   public static styles = dashboardGridStyles;
 
   @property({ type: Array })