v3.48.2

changelog.md

@@ -1,5 +1,234 @@
 # Changelog
 
+## 2026-03-12 - 3.48.2 - fix(repo)
+no changes to commit
+
+
+## 2026-03-12 - 3.48.1 - fix(repo)
+no changes to commit
+
+
+## 2026-03-12 - 3.48.0 - feat(dataview)
+add an S3 browser component with column and list views, file preview, editing, and object management
+
+- introduces a new dees-s3-browser module with shared interfaces, utilities, demo, and exports
+- supports browsing S3-style prefixes in both column and list layouts with breadcrumb navigation
+- adds file preview with text editing, download, and delete actions
+- includes create, rename, move, delete, upload, and drag-and-drop handling for files and folders
+- adds optional live change stream integration with refresh indicators
+
+## 2026-03-11 - 3.47.2 - fix(deps)
+bump @design.estate/dees-domtools and @design.estate/dees-element dependencies
+
+- update @design.estate/dees-domtools from ^2.3.9 to ^2.5.1
+- update @design.estate/dees-element from ^2.2.1 to ^2.2.2
+
+## 2026-03-11 - 3.47.1 - fix(dees-statsgrid)
+add tablet breakpoint to render stats grid as three columns
+
+- Added cssManager.cssForTablet rule to set .stats-grid grid-template-columns: repeat(3, 1fr).
+- Improves responsive layout on tablet devices for dees-statsgrid tiles.
+- Change made in ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts
+
+## 2026-03-11 - 3.47.0 - feat(dees-statsgrid)
+add container-responsive behavior and responsive CSS to dees-statsgrid; bump @design.estate/dees-element dependency to ^2.2.1
+
+- Added @containerResponsive decorator and import to dees-statsgrid
+- Added cssManager.cssForPhablet and cssManager.cssForPhone responsive style blocks to adjust layout, spacing and font sizes on smaller viewports
+- Bumped dependency @design.estate/dees-element from ^2.1.6 to ^2.2.1
+
+## 2026-03-10 - 3.46.1 - fix(dees-appui)
+add min-height: 0 to mainmenu and secondarymenu to prevent unintended container height and fix layout stacking
+
+- Modified ts_web/elements/00group-appui/dees-appui/dees-appui.ts: added min-height: 0 to .maingrid > dees-appui-mainmenu and .maingrid > dees-appui-secondarymenu
+- Fixes layout issues where children or flexbox-derived min-height could cause menu containers to expand and interfere with z-index stacking
+
+## 2026-03-10 - 3.46.0 - feat(dees-tile)
+unify tile metadata into a consistent bottom info bar and add PDF file-size display
+
+- Introduce renderBottomBar() hook in DeesTileBase and remove per-component bottom badges/labels in favor of a unified info bar.
+- Implement renderBottomBar in audio, video, image, folder, note and pdf tiles to show label, counts, dimensions, duration, language/line info and page counts.
+- PDF tile: add fileSize state, attempt to read download info and display formatted file size in the info bar; show currentPreviewPage/pageCount when hovering.
+- Styling changes: replace legacy badges/labels with .tile-info-bar (.info-label, .info-detail, .info-spacer); adjust padding, font sizing, z-index, and remove hover translate for clickable tiles.
+- PDF demo and styles: use cssManager theming for demo colors and adjust preview padding.
+- Bump devDependencies: @git.zone/tswatch -> ^3.3.0 and @types/node -> ^25.4.0
+
+## 2026-03-10 - 3.45.1 - fix(dees-appui)
+substitute route params into URL hash when navigating
+
+- Replaces :param placeholders in view.route with provided params before updating the URL hash.
+- Ensures window.history.pushState is called with the resolved route so URLs do not contain literal parameter tokens.
+
+## 2026-03-10 - 3.45.0 - feat(dees-form)
+register new input components (tags, list, wysiwyg, richtext) and emit change notification for richtext updates
+
+- Added imports and registration of DeesInputTags, DeesInputList, DeesInputWysiwyg, and DeesInputRichtext in dees-form
+- Extended TFormInputElement union type to include the new input components
+- DeesInputRichtext now calls changeSubject.next(this.value) in the editor onUpdate handler to propagate changes
+
+## 2026-03-10 - 3.44.0 - feat(appui-tabs)
+add support for left/right tab action buttons and content tab action APIs
+
+- Introduce ITabAction interface and add actionsLeft/actionsRight properties to dees-appui-tabs, dees-appui-maincontent, and dees-appui.
+- Render action buttons with new styles and renderActions() helper, including disabled state and click handlers; wire actions into tab components.
+- Add public clear() on dees-appui-tabs and improve tab selection logic to reset selection when tabs become empty or when the selected tab is removed.
+- Expose setContentTabActionsLeft and setContentTabActionsRight on the DeesAppui programmatic API and update interfaces/appconfig accordingly.
+- Update demos to showcase action buttons, add clear-all behavior, and adjust layout/styling for action areas.
+
+## 2026-03-09 - 3.43.4 - fix(media)
+remove deprecated dees-pdf and dees-pdf-preview components and bump several dependencies
+
+- Removed deprecated PDF components and related demos/styles: ts_web/elements/00group-media/dees-pdf/* and ts_web/elements/00group-media/dees-pdf-preview/*
+- Removed exports for dees-pdf and dees-pdf-preview from ts_web/elements/00group-media/index.ts (public API removal)
+- Dependency upgrades: @design.estate/dees-domtools → ^2.3.9, apexcharts → ^5.10.3, lucide → ^0.577.0, @fortawesome/* → ^7.2.0
+- DevDependency upgrades: @git.zone/tsbuild → ^4.3.0, @git.zone/tsbundle → ^2.9.1, @git.zone/tstest → ^3.3.2, @git.zone/tswatch → ^3.2.5, @types/node → ^25.3.5
+- Updated ts_web/services/versions.ts to align CDN/version constants (apexcharts, tiptap → 2.27.2, fontawesome)
+
+## 2026-02-24 - 3.43.3 - fix(dees-table)
+use lucide icon identifier for Search action in dees-table
+
+- Replaced iconName 'magnifyingGlass' with 'lucide:Search' in ts_web/elements/00group-dataview/dees-table/dees-table.ts
+- Updates the icon identifier for the header 'Search' action; no functional behavior changed
+
+## 2026-02-21 - 3.43.2 - fix(dees-chart-log)
+avoid duplicate log entries, optimize incremental updates, enforce maxEntries, and respect filters when writing logs
+
+- Prevent property-bound logEntries from duplicating entries already present in logBuffer by deduplicating on timestamp|message
+- Call updateMetrics() when replaying or appending log entries so metrics stay accurate
+- Skip processing entirely when the incoming logEntries array is unchanged
+- Optimize append-only updates by writing only the new tail entries instead of full re-render
+- Enforce maxEntries when appending to the logBuffer to maintain buffer size
+- Respect filterMode and searchQuery when deciding whether to write appended entries to the terminal
+
+## 2026-02-21 - 3.43.1 - fix(dees-chart-log)
+replay buffered log entries when terminal becomes ready and sync logEntries updates to re-render filtered logs
+
+- Replay entries stored in logBuffer after terminal initialization to avoid losing entries that arrived early
+- Add updated() lifecycle hook to copy logEntries into logBuffer and call reRenderFilteredLogs when terminalReady
+- Call super.updated(changedProperties) to preserve base class behavior
+
+## 2026-02-17 - 3.43.0 - feat(dees-form)
+add layout styles to dees-form and standardize demo input grouping
+
+- Add static CSS to dees-form: default column layout with gap and support for [horizontal-layout] (row wrapping, alignment and gap).
+- Remove inline <style> from dees-form render to centralize styling.
+- Simplify dees-input-base styles by removing host margins and making spacing container-driven.
+- Update multiple demo files to wrap related inputs in a new .input-group container and include .input-group CSS for consistent vertical spacing.
+
+## 2026-02-16 - 3.42.2 - fix(dees-chart-area)
+add ApexAxisChartSeries type to dees-chart-area component to improve typing for ApexCharts series data
+
+- Introduces ApexAxisChartSeries type alias with support for number arrays, [x,y] tuples, and object {x,y,...} series entries
+- Type-only change — no runtime or API behavior modified
+- File changed: ts_web/elements/00group-chart/dees-chart-area/component.ts
+
+## 2026-02-16 - 3.42.1 - fix(dees-table)
+Guard against undefined action.type in dees-table by using optional chaining and update several dependencies
+
+- Use optional chaining (action.type?.includes(...)) in ts_web/elements/.../dees-table.ts to prevent runtime errors when action.type is undefined
+- Bump dependency apexcharts from ^5.3.6 to ^5.5.0
+- Bump dependency lucide from ^0.563.0 to ^0.564.0
+- Bump devDependency @git.zone/tswatch from ^3.0.1 to ^3.1.0
+- Bump devDependency @types/node from ^25.0.10 to ^25.2.3
+
+## 2026-02-02 - 3.42.0 - feat(dees-form-submit)
+forward button properties to internal dees-button, use property bindings, add demo and styles
+
+- Added forwarded properties: type, size, icon, iconPosition (with defaults) and preserved text/status/disabled
+- Changed template to use property bindings (.prop) for dees-button instead of string attributes
+- Switched internal event handler to listen for dees-button's @clicked event (was @click)
+- Added component styles (:host display and dees-button width:100%) and improved layout
+- Expanded demo with multiple usage examples (basic, icons, types, sizes, states, and a form context)
+
+## 2026-02-02 - 3.41.6 - fix(dees-simple-appdash)
+respect selectedView when loading initial view, falling back to the first tab
+
+- firstUpdated now loads this.selectedView if set, otherwise loads the first view tab
+- Prevents always loading the first tab and preserves a previously selected view on initial render
+
+## 2026-02-01 - 3.41.5 - fix(dees-service-lib-loader)
+prevent horizontal scrollbar by offsetting xterm WidthCache measurement container
+
+- Injects additional CSS into DeesServiceLibLoader to move xterm.js WidthCache measurement div off-screen horizontally (selector: body > div[style*="top: -50000px"][style*="width: 50000px"])
+- Fixes root cause where xterm creates a large-width measurement container (width: 50000px) on document.body that expands scrollWidth and causes a horizontal scrollbar
+- Change applied in ts_web/services/DeesServiceLibLoader.ts by concatenating the fix CSS into the injected stylesheet
+
+## 2026-01-29 - 3.41.4 - fix()
+no changes
+
+- No files changed in this commit; no code or documentation modified
+- No release required
+
+## 2026-01-29 - 3.41.3 - fix(dees-pdf-viewer)
+use in-memory PDF data for download and print; add robust print wrapper, cleanup and error handling
+
+- Download and Print now use pdfDocument.getData() to create Blob URLs so in-memory PDFs (pdf.js) can be saved/printed.
+- Print flow now opens an HTML wrapper with an iframe to allow onafterprint handling, auto-close, popup-fallback and timed cleanup of Blob URLs.
+- Added try/catch logging, URL.revokeObjectURL calls and safety timeouts to avoid resource leaks.
+- Removed context menu items that relied on the raw PDF URL (Open in New Tab, Copy PDF URL); Download/Print actions now await the async handlers.
+
+## 2026-01-28 - 3.41.2 - fix(dees-pdf-viewer)
+account for devicePixelRatio when setting canvas dimensions and scale 2D context to render crisp PDF pages and thumbnails on high-DPI displays
+
+- Multiply canvas.width and canvas.height by window.devicePixelRatio (dpr) and use Math.floor to set the actual pixel buffer size
+- Call ctx.scale(dpr, dpr) so drawing is rendered at device pixels while keeping CSS display size unchanged
+- Apply the same high-DPI adjustments to both main page rendering and thumbnail generation
+- Keep canvas.style.width and canvas.style.height set to viewport dimensions to preserve layout
+
+## 2026-01-27 - 3.41.1 - fix(dataview-codebox)
+fix dees-dataview codebox layout to ensure full-height, proper flex behavior and scrolling; bump internal dependencies
+
+- Updated CSS in ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts: added height:100%, box-sizing, display:flex and flex-direction:column on container, set flex-shrink on header elements, made code grid overflow:auto with flex:1 and min-height:0 to prevent overflow issues.
+- Bumped dependencies in package.json: @design.estate/dees-domtools from ^2.3.7 to ^2.3.8 and @design.estate/dees-element from ^2.1.5 to ^2.1.6.
+- Non-breaking visual/layout fix — suitable for a patch release.
+
+## 2026-01-27 - 3.41.0 - feat(docs)
+document new media & tile components and expand Workspace/IDE component docs; update component count to 90+
+
+- Updated README component count from 70+ to 90+.
+- Added Media & Tile components documentation (DeesTilePdf, DeesTileImage, DeesTileAudio, DeesTileVideo, DeesTileNote, DeesTileFolder, DeesPreview, DeesPdfViewer, DeesImageViewer, DeesAudioViewer, DeesVideoViewer).
+- Expanded Workspace/IDE documentation and introduced workspace subcomponents (DeesWorkspace, DeesWorkspaceMonaco, DeesWorkspaceDiffEditor, DeesWorkspaceFiletree, DeesWorkspaceTerminal, DeesWorkspaceTerminalPreview, DeesWorkspaceMarkdown, DeesWorkspaceMarkdownoutlet, DeesWorkspaceBottombar).
+- Enhanced Contextmenu docs to demonstrate nested submenus and programmatic API usage.
+- Added ITileFolderItem interface example for tile folder items.
+
+## 2026-01-27 - 3.40.0 - feat(dees-tile)
+unify tile badge styling and markup; replace component-specific badge classes with shared tile-badge classes and update related imports/tests
+
+- Add shared badge styles: .tile-badge-corner, .tile-badge-topright, .tile-badge and layout rules in dees-tile-shared/styles.ts
+- Update tile components (audio, video, image, folder, note, pdf) to use new badge markup and remove duplicated badge CSS
+- Shift badge positioning when a tile label is present (.tile-container:has(.tile-label))
+- Remove older per-component badge rules (duration-badge, item-count-badge, dimension-badge, note-language/note-line-indicator, preview-page-indicator) and replace with unified classes
+- Update tests to import dees-contextmenu and dees-dashboardgrid from new 00group-overlay / 00group-layout paths to reflect folder reorganization
+
+## 2026-01-27 - 3.39.1 - fix(dees-tile-note)
+use horizontal pointer position to scroll note body by computing percentage from clientX and element width instead of clientY and height
+
+- Changed ts_web/elements/00group-media/dees-tile-note/component.ts: use x = e.clientX - rect.left and percentage = x / rect.width to drive scrollTop calculation instead of using vertical coordinates
+- Fixes incorrect scroll mapping where vertical mouse position was used for horizontal scrolling interaction
+
+## 2026-01-27 - 3.39.0 - feat(components)
+add large set of new UI components and demos, reorganize groups, and bump a few dependencies
+
+- Add Media viewers: dees-image-viewer, dees-audio-viewer, dees-video-viewer, DeesPdf/DeesPdfViewer and related PDF utilities (CanvasPool, PdfManager) and demos
+- Introduce dees-preview composite that auto-detects content and delegates to appropriate viewers
+- New Tile system (DeesTileBase) and tile components: dees-tile-pdf, dees-tile-image, dees-tile-audio, dees-tile-video, dees-tile-note, dees-tile-folder plus demos
+- Add dashboard/grid system: dees-dashboardgrid with drag/resize, collision resolution, layout helpers, demos and utilities
+- Data view additions: dees-table with lucene-like query parser, column utilities, and dees-statsgrid enhancements (including cpuCores visualization)
+- New feedback & overlay components: dees-toast, dees-actionbar, dees-progressbar, dees-spinner, dees-badge and supporting demos/interfaces
+- Many layout and utility components added or improved: dees-panel, dees-chips, dees-heading, dees-label, dees-pagination, dees-stepper, and associated demos
+- Refactor project structure: components organized into 00group-* directories and demo metadata migrated from demoGroup to demoGroups (string[]); many import path updates to match new grouping
+- Deprecations/notes: dees-pdf-preview and legacy dees-pdf marked as deprecated in favor of new viewers/tiles
+- Dependency bumps in package.json: @design.estate/dees-wcctools -> ^3.8.0, @git.zone/tstest -> ^3.1.8
+
+## 2026-01-26 - 3.38.0 - feat(appui)
+add app shell and bottom bar APIs, new input components, and update README component listings and docs
+
+- README: updated components count (80+ → 70+), reorganized categories (added App Shell / Pre-built Templates, renamed Workspace/IDE) and improved typography
+- Document listing: added DeesActionbar, DeesInputToggle, DeesInputCode, DeesAppuiBottombar and other component entries
+- Menu item interface: added closeable and onClose properties for dismissible menu items
+- IViewDefinition: expanded content type to accept element constructors and async content, added badgeVariant and cache flags
+- New interfaces added: IBottomBarWidget, IBottomBarAction, IViewActivationContext to support bottom bar widgets/actions and view activation context
+
 ## 2026-01-25 - 3.37.1 - fix(editor)
 fix monaco/editor layout, update dev deps, simplify watch script and remove Playwright snapshots
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.37.1",
+  "version": "3.48.2",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -16,13 +16,13 @@
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.3.7",
+    "@design.estate/dees-domtools": "^2.5.1",
-    "@design.estate/dees-element": "^2.1.5",
+    "@design.estate/dees-element": "^2.2.2",
-    "@design.estate/dees-wcctools": "^3.7.1",
+    "@design.estate/dees-wcctools": "^3.8.0",
-    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
-    "@fortawesome/free-brands-svg-icons": "^7.1.0",
+    "@fortawesome/free-brands-svg-icons": "^7.2.0",
-    "@fortawesome/free-regular-svg-icons": "^7.1.0",
+    "@fortawesome/free-regular-svg-icons": "^7.2.0",
-    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
     "@push.rocks/smarti18n": "^1.0.4",
     "@push.rocks/smartpromise": "^4.2.0",
     "@push.rocks/smartstring": "^4.1.0",
@@ -34,22 +34,22 @@
     "@tiptap/extension-underline": "^2.23.0",
     "@tiptap/starter-kit": "^2.23.0",
     "@tsclass/tsclass": "^9.3.0",
-    "apexcharts": "^5.3.6",
+    "apexcharts": "^5.10.3",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
-    "lucide": "^0.563.0",
+    "lucide": "^0.577.0",
     "monaco-editor": "0.55.1",
     "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^4.1.2",
+    "@git.zone/tsbuild": "^4.3.0",
-    "@git.zone/tsbundle": "^2.8.3",
+    "@git.zone/tsbundle": "^2.9.1",
-    "@git.zone/tstest": "^3.1.7",
+    "@git.zone/tstest": "^3.3.2",
-    "@git.zone/tswatch": "^3.0.1",
+    "@git.zone/tswatch": "^3.3.0",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@types/node": "^25.0.10"
+    "@types/node": "^25.4.0"
   },
   "files": [
     "ts/**/*",

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)

readme.md

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

test/test.contextmenu-demo.chromium.ts

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

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

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

test/test.contextmenu-shadowdom.chromium.ts

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

test/test.contextmenu.chromium.ts

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

test/test.dashboardgrid-layout.node.ts

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

test/test.pdf-text-selection.chromium.ts

@@ -0,0 +1,79 @@
+import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
+import * as deesCatalog from '../ts_web/index.js';
+
+tap.test('PDF viewer should render text layer', async () => {
+  const viewer = await webhelpers.fixture(
+    webhelpers.html`
+      <dees-pdf-viewer
+        pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+        initialZoom="page-fit"
+        style="height: 600px; width: 100%;"
+      ></dees-pdf-viewer>
+    `
+  ) as deesCatalog.DeesPdfViewer;
+
+  // Wait for PDF to load and render
+  await new Promise(resolve => setTimeout(resolve, 5000));
+  await viewer.updateComplete;
+
+  expect(viewer.totalPages).toBeGreaterThan(0);
+
+  const textLayer = viewer.shadowRoot?.querySelector('.text-layer[data-page="1"]');
+  expect(textLayer).toBeTruthy();
+
+  const textSpans = textLayer?.querySelectorAll('span');
+  expect(textSpans?.length).toBeGreaterThan(0);
+  console.log(`Text layer has ${textSpans?.length} spans`);
+});
+
+tap.test('Text should be selectable', async () => {
+  const viewer = await webhelpers.fixture(
+    webhelpers.html`
+      <dees-pdf-viewer
+        pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+        initialZoom="page-fit"
+        style="height: 600px; width: 100%;"
+      ></dees-pdf-viewer>
+    `
+  ) as deesCatalog.DeesPdfViewer;
+
+  // Wait for PDF to load and render
+  await new Promise(resolve => setTimeout(resolve, 5000));
+
+  const textLayer = viewer.shadowRoot?.querySelector('.text-layer[data-page="1"]');
+  const firstSpan = textLayer?.querySelector('span') as HTMLElement;
+
+  if (firstSpan?.textContent) {
+    const range = document.createRange();
+    const textNode = firstSpan.firstChild;
+    if (textNode) {
+      range.setStart(textNode, 0);
+      range.setEnd(textNode, Math.min(5, textNode.textContent?.length || 0));
+      const selection = window.getSelection();
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+      expect(selection?.toString().length).toBeGreaterThan(0);
+      console.log('Selected text:', selection?.toString());
+    }
+  }
+});
+
+tap.test('endOfContent element exists for selection boundary', async () => {
+  const viewer = await webhelpers.fixture(
+    webhelpers.html`
+      <dees-pdf-viewer
+        pdfUrl="https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf"
+        initialZoom="page-fit"
+        style="height: 600px; width: 100%;"
+      ></dees-pdf-viewer>
+    `
+  ) as deesCatalog.DeesPdfViewer;
+
+  // Wait for PDF to load and render
+  await new Promise(resolve => setTimeout(resolve, 5000));
+
+  const endOfContent = viewer.shadowRoot?.querySelector('.text-layer[data-page="1"] .endOfContent');
+  expect(endOfContent).toBeTruthy();
+});
+
+export default tap.start();

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

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

test/test.wysiwyg-contextmenu.chromium.ts

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

ts_web/00_commitinfo_data.ts

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

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

@@ -10,8 +10,8 @@ import {
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
-import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import { 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({
@@ -53,6 +53,12 @@ export class DeesAppuiMaincontent extends DeesElement {
   @property({ type: Number })
   accessor tabsAutoHideThreshold: number = 0;
 
+  @property({ type: Array })
+  accessor tabActionsLeft: interfaces.ITabAction[] = [];
+
+  @property({ type: Array })
+  accessor tabActionsRight: interfaces.ITabAction[] = [];
+
   public static styles = [
     themeDefaultStyles,
     cssManager.defaultStyles,
@@ -106,6 +112,8 @@ export class DeesAppuiMaincontent extends DeesElement {
             .tabStyle=${'horizontal'}
             .autoHide=${this.tabsAutoHide}
             .autoHideThreshold=${this.tabsAutoHideThreshold}
+            .actionsLeft=${this.tabActionsLeft}
+            .actionsRight=${this.tabActionsRight}
             @tab-select=${(e: CustomEvent) => this.handleTabSelect(e)}
             @tab-close=${(e: CustomEvent) => this.handleTabClose(e)}
           ></dees-appui-tabs>

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.demo.ts

@@ -2,7 +2,7 @@ import { html, cssManager, css, DeesElement, customElement, state } from '@desig
 import * as interfaces from '../../interfaces/index.js';
 import type { DeesAppuiTabs } from './dees-appui-tabs.js';
 
-// Interactive demo component for closeable tabs
+// Interactive demo component for closeable tabs with action buttons
 @customElement('demo-closeable-tabs')
 class DemoCloseableTabs extends DeesElement {
   @state()
@@ -18,24 +18,6 @@ class DemoCloseableTabs extends DeesElement {
       :host {
         display: block;
       }
-      .controls {
-        display: flex;
-        gap: 8px;
-        margin-top: 16px;
-      }
-      button {
-        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
-        border: 1px solid ${cssManager.bdTheme('rgba(59, 130, 246, 0.3)', 'rgba(59, 130, 246, 0.3)')};
-        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
-        padding: 8px 16px;
-        border-radius: 6px;
-        cursor: pointer;
-        font-size: 13px;
-        transition: all 0.15s ease;
-      }
-      button:hover {
-        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.2)')};
-      }
       .info {
         margin-top: 16px;
         padding: 12px 16px;
@@ -66,17 +48,27 @@ class DemoCloseableTabs extends DeesElement {
     this.tabs = this.tabs.filter(t => t.key !== tabKey);
   }
 
+  private clearAll() {
+    const tabsEl = this.shadowRoot!.querySelector('dees-appui-tabs') as DeesAppuiTabs;
+    tabsEl?.clear();
+    this.tabs = [];
+    this.tabCounter = 0;
+  }
+
   render() {
+    const rightActions: interfaces.ITabAction[] = [
+      { id: 'add', iconName: 'lucide:plus', action: () => this.addTab(), tooltip: 'New Tab' },
+      { id: 'clear', iconName: 'lucide:trash2', action: () => this.clearAll(), tooltip: 'Clear All Tabs' },
+    ];
+
     return html`
       <dees-appui-tabs
         .tabs=${this.tabs}
+        .actionsRight=${rightActions}
         @tab-close=${(e: CustomEvent) => this.removeTab(e.detail.tab.key)}
       ></dees-appui-tabs>
-      <div class="controls">
-        <button @click=${() => this.addTab()}>+ Add New Tab</button>
-      </div>
       <div class="info">
-        Click the X button on tabs to close them. The "Main" tab is not closeable.
+        Click the X button on tabs to close them. Use the + button to add tabs and the trash button to clear all.
         <br>Current tabs: ${this.tabs.length}
       </div>
     `;
@@ -232,6 +224,16 @@ export const demoFunc = () => {
     { key: 'Archived', action: () => console.log('Archived clicked') },
   ];
 
+  const actionsLeft: interfaces.ITabAction[] = [
+    { id: 'back', iconName: 'lucide:arrowLeft', action: () => console.log('Back'), tooltip: 'Go Back' },
+  ];
+
+  const actionsRight: interfaces.ITabAction[] = [
+    { id: 'add', iconName: 'lucide:plus', action: () => console.log('Add tab'), tooltip: 'New Tab' },
+    { id: 'search', iconName: 'lucide:search', action: () => console.log('Search'), tooltip: 'Search Tabs' },
+    { id: 'disabled', iconName: 'lucide:lock', action: () => {}, tooltip: 'Disabled Action', disabled: true },
+  ];
+
   const demoContent = (text: string) => html`
     <div style="padding: 24px; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};">
       ${text}
@@ -279,7 +281,17 @@ export const demoFunc = () => {
       </div>
 
       <div class="section">
-        <div class="section-title">Closeable Tabs (Browser-style)</div>
+        <div class="section-title">Tabs with Action Buttons</div>
+        <dees-appui-tabs
+          .tabs=${horizontalTabs}
+          .actionsLeft=${actionsLeft}
+          .actionsRight=${actionsRight}
+        ></dees-appui-tabs>
+        ${demoContent('Action buttons can be placed on either side of the tab bar. They remain fixed while tabs scroll. The lock icon shows a disabled action.')}
+      </div>
+
+      <div class="section">
+        <div class="section-title">Closeable Tabs with Actions</div>
         <demo-closeable-tabs></demo-closeable-tabs>
       </div>
 

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({
@@ -41,6 +41,12 @@ export class DeesAppuiTabs extends DeesElement {
   @property({ type: Number })
   accessor autoHideThreshold: number = 0;
 
+  @property({ type: Array })
+  accessor actionsLeft: interfaces.ITabAction[] = [];
+
+  @property({ type: Array })
+  accessor actionsRight: interfaces.ITabAction[] = [];
+
   // Scroll state for fade indicators
   @state()
   private accessor canScrollLeft: boolean = false;
@@ -73,6 +79,8 @@ export class DeesAppuiTabs extends DeesElement {
         border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         box-sizing: border-box;
         overflow: hidden;
+        display: flex;
+        align-items: stretch;
       }
 
       /* Scroll fade indicators */
@@ -105,6 +113,72 @@ export class DeesAppuiTabs extends DeesElement {
         opacity: 1;
       }
 
+      .scroll-area {
+        position: relative;
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+        display: flex;
+      }
+
+      /* Tab action buttons */
+      .tab-actions {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        flex-shrink: 0;
+        padding: 0 4px;
+      }
+
+      .tab-actions.left {
+        padding-left: 12px;
+        padding-right: 8px;
+        border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+      }
+
+      .tab-actions.right {
+        padding-right: 12px;
+        padding-left: 8px;
+        border-left: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+      }
+
+      .tab-action-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: background 0.15s ease, color 0.15s ease;
+        background: transparent;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        flex-shrink: 0;
+      }
+
+      .tab-action-button:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.06)')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+
+      .tab-action-button:active {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+      }
+
+      .tab-action-button.disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+
+      .tab-action-button.disabled:hover {
+        background: transparent;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+      }
+
+      .tab-action-button dees-icon {
+        font-size: 16px;
+      }
+
       .tabsContainer {
         position: relative;
         user-select: none;
@@ -121,12 +195,14 @@ export class DeesAppuiTabs extends DeesElement {
         scrollbar-width: thin;
         scrollbar-color: transparent transparent;
         height: 100%;
+        width: 100%;
         padding: 0 16px;
         gap: 4px;
       }
 
       /* Show scrollbar on hover */
-      .tabs-wrapper:hover .tabsContainer.horizontal {
+      .tabs-wrapper:hover .tabsContainer.horizontal,
+      .scroll-area:hover .tabsContainer.horizontal {
         scrollbar-color: ${cssManager.bdTheme('rgba(0,0,0,0.2)', 'rgba(255,255,255,0.2)')} transparent;
       }
 
@@ -144,11 +220,13 @@ export class DeesAppuiTabs extends DeesElement {
         transition: background 0.2s ease;
       }
 
-      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb {
+      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb,
+      .scroll-area:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb {
         background: ${cssManager.bdTheme('rgba(0,0,0,0.2)', 'rgba(255,255,255,0.2)')};
       }
 
-      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb:hover {
+      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb:hover,
+      .scroll-area:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb:hover {
         background: ${cssManager.bdTheme('rgba(0,0,0,0.35)', 'rgba(255,255,255,0.35)')};
       }
 
@@ -331,13 +409,20 @@ export class DeesAppuiTabs extends DeesElement {
     const containerClass = `tabsContainer ${this.tabStyle}`;
 
     if (isHorizontal) {
+      const hasLeftActions = this.actionsLeft && this.actionsLeft.length > 0;
+      const hasRightActions = this.actionsRight && this.actionsRight.length > 0;
+
       return html`
         <div class="${wrapperClass}">
-          <div class="scroll-fade scroll-fade-left ${this.canScrollLeft ? 'visible' : ''}"></div>
+          ${hasLeftActions ? this.renderActions(this.actionsLeft, 'left') : ''}
-          <div class="${containerClass}" @scroll=${this.handleScroll}>
+          <div class="scroll-area">
-            ${this.tabs.map(tab => this.renderTab(tab, isHorizontal))}
+            <div class="scroll-fade scroll-fade-left ${this.canScrollLeft ? 'visible' : ''}"></div>
+            <div class="${containerClass}" @scroll=${this.handleScroll}>
+              ${this.tabs.map(tab => this.renderTab(tab, isHorizontal))}
+            </div>
+            <div class="scroll-fade scroll-fade-right ${this.canScrollRight ? 'visible' : ''}"></div>
           </div>
-          <div class="scroll-fade scroll-fade-right ${this.canScrollRight ? 'visible' : ''}"></div>
+          ${hasRightActions ? this.renderActions(this.actionsRight, 'right') : ''}
           ${this.showTabIndicator ? html`<div class="tabIndicator"></div>` : ''}
         </div>
       `;
@@ -353,6 +438,22 @@ export class DeesAppuiTabs extends DeesElement {
     `;
   }
 
+  private renderActions(actions: interfaces.ITabAction[], position: 'left' | 'right'): TemplateResult {
+    return html`
+      <div class="tab-actions ${position}">
+        ${actions.map(action => html`
+          <div
+            class="tab-action-button ${action.disabled ? 'disabled' : ''}"
+            title="${action.tooltip || action.id}"
+            @click=${() => !action.disabled && action.action()}
+          >
+            <dees-icon .icon=${action.iconName}></dees-icon>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
   private renderTab(tab: interfaces.IMenuItem, isHorizontal: boolean): TemplateResult {
     const isSelected = tab === this.selectedTab;
     const classes = `tab ${isSelected ? 'selectedTab' : ''}`;
@@ -406,6 +507,14 @@ export class DeesAppuiTabs extends DeesElement {
     }));
   }
 
+  /**
+   * Clear all tabs and reset selection.
+   */
+  public clear(): void {
+    this.tabs = [];
+    this.selectedTab = null;
+  }
+
   private closeTab(e: Event, tab: interfaces.IMenuItem) {
     e.stopPropagation();  // Don't select tab when closing
 
@@ -423,14 +532,9 @@ export class DeesAppuiTabs extends DeesElement {
   }
 
   firstUpdated() {
-    if (this.tabs && this.tabs.length > 0) {
+    // Tab selection is handled by updated() lifecycle
-      this.selectTab(this.tabs[0]);
-    }
-
-    // Set up ResizeObserver for scroll state updates
     this.setupResizeObserver();
 
-    // Initial scroll state check
     requestAnimationFrame(() => {
       this.updateScrollState();
     });
@@ -503,8 +607,24 @@ export class DeesAppuiTabs extends DeesElement {
   async updated(changedProperties: Map<string, any>) {
     super.updated(changedProperties);
 
-    if (changedProperties.has('tabs') && this.tabs && this.tabs.length > 0 && !this.selectedTab) {
+    if (changedProperties.has('tabs')) {
-      this.selectTab(this.tabs[0]);
+      if (!this.tabs || this.tabs.length === 0) {
+        // Tabs are empty => reset selection
+        if (this.selectedTab !== null) {
+          this.selectedTab = null;
+          this.dispatchEvent(new CustomEvent('tab-select', {
+            detail: { tab: null },
+            bubbles: true,
+            composed: true,
+          }));
+        }
+      } else if (this.selectedTab && !this.tabs.includes(this.selectedTab)) {
+        // Selected tab was removed => select first available
+        this.selectTab(this.tabs[0]);
+      } else if (!this.selectedTab) {
+        // Tabs exist but nothing selected => select first
+        this.selectTab(this.tabs[0]);
+      }
     }
 
     if (changedProperties.has('selectedTab') || changedProperties.has('tabs')) {

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)
@@ -143,6 +143,12 @@ export class DeesAppui extends DeesElement {
   @property({ type: Object })
   accessor maincontentSelectedTab: interfaces.IMenuItem | undefined = undefined;
 
+  @property({ type: Array })
+  accessor contentTabActionsLeft: interfaces.ITabAction[] = [];
+
+  @property({ type: Array })
+  accessor contentTabActionsRight: interfaces.ITabAction[] = [];
+
   // References to child components
   @state()
   accessor appbar: DeesAppuiBar | undefined = undefined;
@@ -213,11 +219,13 @@ export class DeesAppui extends DeesElement {
       .maingrid > dees-appui-mainmenu {
         position: relative;
         z-index: 3;
+        min-height: 0;
       }
 
       .maingrid > dees-appui-secondarymenu {
         position: relative;
         z-index: 2;
+        min-height: 0;
       }
 
       .maingrid > dees-appui-maincontent {
@@ -306,6 +314,8 @@ export class DeesAppui extends DeesElement {
           .showTabs=${this.maincontentTabsVisible}
           .tabsAutoHide=${this.contentTabsAutoHide}
           .tabsAutoHideThreshold=${this.contentTabsAutoHideThreshold}
+          .tabActionsLeft=${this.contentTabActionsLeft}
+          .tabActionsRight=${this.contentTabActionsRight}
           @tab-select=${(e: CustomEvent) => this.handleContentTabSelect(e)}
           @tab-close=${(e: CustomEvent) => this.handleContentTabClose(e)}
         >
@@ -699,6 +709,20 @@ export class DeesAppui extends DeesElement {
     return this.maincontentSelectedTab;
   }
 
+  /**
+   * Set content tab action buttons on the left side
+   */
+  public setContentTabActionsLeft(actions: interfaces.ITabAction[]): void {
+    this.contentTabActionsLeft = [...actions];
+  }
+
+  /**
+   * Set content tab action buttons on the right side
+   */
+  public setContentTabActionsRight(actions: interfaces.ITabAction[]): void {
+    this.contentTabActionsRight = [...actions];
+  }
+
   // ==========================================
   // PROGRAMMATIC API: ACTIVITY LOG
   // ==========================================
@@ -853,8 +877,13 @@ export class DeesAppui extends DeesElement {
     try {
       await this.loadView(view, params);
 
-      // Update URL hash
+      // Update URL hash (substitute params into route pattern)
-      const route = view.route || viewId;
+      let route = view.route || viewId;
+      if (params) {
+        for (const [key, val] of Object.entries(params)) {
+          route = route.replace(`:${key}`, val);
+        }
+      }
       const newHash = `#${route}`;
       if (window.location.hash !== newHash) {
         window.history.pushState({ viewId }, '', newHash);

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

@@ -12,6 +12,16 @@ import { chartAreaStyles } from './styles.js';
 import { renderChartArea } from './template.js';
 
 import type ApexCharts from 'apexcharts';
+
+type ApexAxisChartSeries = {
+  name?: string;
+  type?: string;
+  color?: string;
+  group?: string;
+  hidden?: boolean;
+  zIndex?: number;
+  data: (number | null)[] | { x: any; y: any; [key: string]: any }[] | [number, number | null][] | number[][];
+}[];
 import { DeesServiceLibLoader } from '../../../services/index.js';
 
 declare global {
@@ -23,7 +33,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';
@@ -385,11 +385,23 @@ export class DeesChartLog extends DeesElement {
     this.domtoolsInstance = await this.domtoolsPromise;
     await this.initializeTerminal();
 
-    // Process any initial log entries
+    // initializeTerminal() already replayed logBuffer (from addLog/updateLog).
-    if (this.logEntries.length > 0) {
+    // Now handle logEntries set via property binding before terminal was ready.
+    if (this.logEntries.length > 0 && this.logBuffer.length === 0) {
+      this.logBuffer = [...this.logEntries];
       for (const entry of this.logEntries) {
+        this.updateMetrics(entry.level);
         this.writeLogEntry(entry);
       }
+    } else if (this.logEntries.length > 0 && this.logBuffer.length > 0) {
+      const bufferSet = new Set(this.logBuffer.map(e => `${e.timestamp}|${e.message}`));
+      for (const entry of this.logEntries) {
+        if (!bufferSet.has(`${entry.timestamp}|${entry.message}`)) {
+          this.logBuffer.push(entry);
+          this.updateMetrics(entry.level);
+          this.writeLogEntry(entry);
+        }
+      }
     }
   }
 
@@ -445,6 +457,58 @@ export class DeesChartLog extends DeesElement {
     this.rateInterval = setInterval(() => this.calculateRate(), 1000);
 
     this.terminalReady = true;
+
+    // Replay any entries that arrived via updateLog()/addLog() before terminal was ready
+    for (const entry of this.logBuffer) {
+      this.writeLogEntry(entry);
+    }
+  }
+
+  public updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('logEntries') && this.terminalReady && this.logEntries.length > 0) {
+      const oldEntries: ILogEntry[] = changedProperties.get('logEntries') || [];
+      const newEntries = this.logEntries;
+
+      // Same content? Skip entirely.
+      if (
+        oldEntries.length === newEntries.length &&
+        oldEntries.length > 0 &&
+        oldEntries[oldEntries.length - 1].timestamp === newEntries[newEntries.length - 1].timestamp &&
+        oldEntries[oldEntries.length - 1].message === newEntries[newEntries.length - 1].message
+      ) {
+        return;
+      }
+
+      // Append-only? Write only the new tail entries incrementally.
+      if (
+        newEntries.length > oldEntries.length &&
+        oldEntries.length > 0 &&
+        oldEntries[oldEntries.length - 1].timestamp === newEntries[oldEntries.length - 1].timestamp &&
+        oldEntries[oldEntries.length - 1].message === newEntries[oldEntries.length - 1].message
+      ) {
+        const tailEntries = newEntries.slice(oldEntries.length);
+        for (const entry of tailEntries) {
+          this.logBuffer.push(entry);
+          this.updateMetrics(entry.level);
+
+          // Enforce maxEntries
+          if (this.logBuffer.length > this.maxEntries) {
+            this.logBuffer.shift();
+          }
+
+          // Respect filter mode
+          if (!this.filterMode || !this.searchQuery || this.entryMatchesFilter(entry)) {
+            this.writeLogEntry(entry);
+          }
+        }
+        return;
+      }
+
+      // Different content — full re-render
+      this.logBuffer = [...newEntries];
+      this.reRenderFilteredLogs();
+    }
   }
 
   private getTerminalTheme() {

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';
@@ -52,6 +52,8 @@ export class DeesDataviewCodebox extends DeesElement {
           text-align: left;
           font-size: 16px;
           font-family: ${cssGeistFontFamily};
+          height: 100%;
+          box-sizing: border-box;
         }
         .mainbox {
           position: relative;
@@ -61,6 +63,10 @@ export class DeesDataviewCodebox extends DeesElement {
           background: ${cssManager.bdTheme('#ffffff', '#09090b')};
           border-radius: 6px;
           overflow: hidden;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
+          box-sizing: border-box;
         }
 
         .appbar {
@@ -74,6 +80,7 @@ export class DeesDataviewCodebox extends DeesElement {
           line-height: 32px;
           justify-content: center;
           align-items: center;
+          flex-shrink: 0;
         }
 
         .appbar .fileName {
@@ -95,6 +102,7 @@ export class DeesDataviewCodebox extends DeesElement {
           justify-content: flex-end;
           align-items: stretch;
           overflow: hidden;
+          flex-shrink: 0;
         }
 
         .spacesLabel {
@@ -121,7 +129,9 @@ export class DeesDataviewCodebox extends DeesElement {
         .codegrid {
           display: grid;
           grid-template-columns: 50px auto;
-          overflow: hidden;
+          overflow: auto;
+          flex: 1;
+          min-height: 0;
         }
 
         .lineNumbers {
@@ -206,9 +216,7 @@ export class DeesDataviewCodebox extends DeesElement {
         }}"
       >
         <div class="appbar">
-          <dees-windowcontrols type="mac" position="left"></dees-windowcontrols>
           <div class="fileName">index.ts</div>
-          <dees-windowcontrols type="mac" position="right"></dees-windowcontrols>
         </div>
         <div class="codegrid">
           <div class="lineNumbers">

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

@@ -15,7 +15,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as tsclass from '@tsclass/tsclass';
-import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { themeDefaultStyles } from '../../00theme.js';
 
 declare global {
@@ -27,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-s3-browser/dees-s3-browser.demo.ts

@@ -0,0 +1,156 @@
+import { html } from '@design.estate/dees-element';
+import type { IS3DataProvider, IS3Object } from './interfaces.js';
+import './dees-s3-browser.js';
+
+// Mock in-memory S3 data provider for demo purposes
+class MockS3DataProvider implements IS3DataProvider {
+  private objects: Map<string, { content: string; contentType: string; size: number; lastModified: string }> = new Map();
+
+  constructor() {
+    const now = new Date().toISOString();
+    // Seed with sample data
+    this.objects.set('documents/readme.md', {
+      content: btoa('# Welcome\n\nThis is a demo S3 browser.\n'),
+      contentType: 'text/markdown',
+      size: 42,
+      lastModified: now,
+    });
+    this.objects.set('documents/config.json', {
+      content: btoa('{\n  "name": "demo",\n  "version": "1.0.0"\n}'),
+      contentType: 'application/json',
+      size: 48,
+      lastModified: now,
+    });
+    this.objects.set('documents/notes/todo.txt', {
+      content: btoa('Buy milk\nFix bug #42\nDeploy to production'),
+      contentType: 'text/plain',
+      size: 45,
+      lastModified: now,
+    });
+    this.objects.set('images/logo.png', {
+      content: btoa('fake-png-data'),
+      contentType: 'image/png',
+      size: 24500,
+      lastModified: now,
+    });
+    this.objects.set('images/banner.jpg', {
+      content: btoa('fake-jpg-data'),
+      contentType: 'image/jpeg',
+      size: 156000,
+      lastModified: now,
+    });
+    this.objects.set('scripts/deploy.sh', {
+      content: btoa('#!/bin/bash\necho "Deploying..."\n'),
+      contentType: 'text/plain',
+      size: 34,
+      lastModified: now,
+    });
+    this.objects.set('index.html', {
+      content: btoa('<!DOCTYPE html>\n<html>\n<body>\n  <h1>Hello World</h1>\n</body>\n</html>'),
+      contentType: 'text/html',
+      size: 72,
+      lastModified: now,
+    });
+    this.objects.set('styles.css', {
+      content: btoa('body { margin: 0; font-family: sans-serif; }'),
+      contentType: 'text/css',
+      size: 44,
+      lastModified: now,
+    });
+  }
+
+  async listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IS3Object[]; prefixes: string[] }> {
+    const pfx = prefix || '';
+    const objects: IS3Object[] = [];
+    const prefixes = new Set<string>();
+
+    for (const [key, data] of this.objects) {
+      if (!key.startsWith(pfx)) continue;
+      const rest = key.slice(pfx.length);
+
+      if (delimiter) {
+        const slashIndex = rest.indexOf(delimiter);
+        if (slashIndex >= 0) {
+          prefixes.add(pfx + rest.slice(0, slashIndex + 1));
+        } else {
+          objects.push({ key, size: data.size, lastModified: data.lastModified });
+        }
+      } else {
+        objects.push({ key, size: data.size, lastModified: data.lastModified });
+      }
+    }
+
+    return { objects, prefixes: Array.from(prefixes).sort() };
+  }
+
+  async getObject(bucket: string, key: string): Promise<{ content: string; contentType: string; size: number; lastModified: string }> {
+    const obj = this.objects.get(key);
+    if (!obj) throw new Error('Not found');
+    return { ...obj };
+  }
+
+  async putObject(bucket: string, key: string, base64Content: string, contentType: string): Promise<boolean> {
+    this.objects.set(key, {
+      content: base64Content,
+      contentType,
+      size: atob(base64Content).length,
+      lastModified: new Date().toISOString(),
+    });
+    return true;
+  }
+
+  async deleteObject(bucket: string, key: string): Promise<boolean> {
+    return this.objects.delete(key);
+  }
+
+  async deletePrefix(bucket: string, prefix: string): Promise<boolean> {
+    for (const key of this.objects.keys()) {
+      if (key.startsWith(prefix)) {
+        this.objects.delete(key);
+      }
+    }
+    return true;
+  }
+
+  async getObjectUrl(bucket: string, key: string): Promise<string> {
+    const obj = this.objects.get(key);
+    if (!obj) return '';
+    const blob = new Blob([Uint8Array.from(atob(obj.content), c => c.charCodeAt(0))], { type: obj.contentType });
+    return URL.createObjectURL(blob);
+  }
+
+  async moveObject(bucket: string, sourceKey: string, destKey: string): Promise<{ success: boolean; error?: string }> {
+    const obj = this.objects.get(sourceKey);
+    if (!obj) return { success: false, error: 'Source not found' };
+    this.objects.set(destKey, { ...obj, lastModified: new Date().toISOString() });
+    this.objects.delete(sourceKey);
+    return { success: true };
+  }
+
+  async movePrefix(bucket: string, sourcePrefix: string, destPrefix: string): Promise<{ success: boolean; movedCount?: number; error?: string }> {
+    let count = 0;
+    const toMove = Array.from(this.objects.entries()).filter(([k]) => k.startsWith(sourcePrefix));
+    for (const [key, data] of toMove) {
+      const newKey = destPrefix + key.slice(sourcePrefix.length);
+      this.objects.set(newKey, { ...data, lastModified: new Date().toISOString() });
+      this.objects.delete(key);
+      count++;
+    }
+    return { success: true, movedCount: count };
+  }
+}
+
+export const demoFunc = () => html`
+  <style>
+    .demo-container {
+      height: 600px;
+      padding: 16px;
+    }
+  </style>
+  <div class="demo-container">
+    <dees-s3-browser
+      .dataProvider=${new MockS3DataProvider()}
+      .bucketName=${'demo-bucket'}
+    ></dees-s3-browser>
+  </div>
+`;

ts_web/elements/00group-dataview/dees-s3-browser/dees-s3-browser.ts

@@ -0,0 +1,439 @@
+import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import { demoFunc } from './dees-s3-browser.demo.js';
+import type { IS3DataProvider, IS3ChangeEvent } from './interfaces.js';
+import './dees-s3-columns.js';
+import './dees-s3-keys.js';
+import './dees-s3-preview.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-s3-browser': DeesS3Browser;
+  }
+}
+
+type TViewType = 'columns' | 'keys';
+
+@customElement('dees-s3-browser')
+export class DeesS3Browser extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Data View'];
+
+  @property({ type: Object })
+  public accessor dataProvider: IS3DataProvider | null = null;
+
+  @property({ type: String })
+  public accessor bucketName: string = '';
+
+  /**
+   * Optional change stream subscription.
+   * Pass a function that takes a callback and returns an unsubscribe function.
+   */
+  @property({ type: Object })
+  public accessor onChangeEvent: ((callback: (event: IS3ChangeEvent) => void) => (() => void)) | null = null;
+
+  @state()
+  private accessor viewType: TViewType = 'columns';
+
+  @state()
+  private accessor currentPrefix: string = '';
+
+  @state()
+  private accessor selectedKey: string = '';
+
+  @state()
+  private accessor refreshKey: number = 0;
+
+  @state()
+  private accessor previewWidth: number = 700;
+
+  @state()
+  private accessor isResizingPreview: boolean = false;
+
+  @state()
+  private accessor recentChangeCount: number = 0;
+
+  @state()
+  private accessor isStreamConnected: boolean = false;
+
+  private changeUnsubscribe: (() => void) | null = null;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    themeDefaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .browser-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(0, 0, 0, 0.2)')};
+        border-radius: 8px;
+        margin-bottom: 16px;
+      }
+
+      .breadcrumb {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex: 1;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('#71717a', '#999')};
+      }
+
+      .breadcrumb-item {
+        cursor: pointer;
+        padding: 4px 8px;
+        border-radius: 4px;
+        transition: background 0.15s;
+      }
+
+      .breadcrumb-item:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+        color: ${cssManager.bdTheme('#18181b', '#fff')};
+      }
+
+      .breadcrumb-separator {
+        color: ${cssManager.bdTheme('#d4d4d8', '#555')};
+      }
+
+      .view-toggle {
+        display: flex;
+        gap: 4px;
+      }
+
+      .view-btn {
+        padding: 6px 12px;
+        background: transparent;
+        border: 1px solid ${cssManager.bdTheme('#d4d4d8', '#444')};
+        color: ${cssManager.bdTheme('#71717a', '#888')};
+        border-radius: 4px;
+        cursor: pointer;
+        font-size: 13px;
+        transition: all 0.15s;
+      }
+
+      .view-btn:hover {
+        border-color: ${cssManager.bdTheme('#a1a1aa', '#666')};
+        color: ${cssManager.bdTheme('#3f3f46', '#aaa')};
+      }
+
+      .view-btn.active {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+        border-color: ${cssManager.bdTheme('#a1a1aa', '#404040')};
+        color: ${cssManager.bdTheme('#18181b', '#e0e0e0')};
+      }
+
+      .content {
+        flex: 1;
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 0;
+        overflow: hidden;
+      }
+
+      .content.has-preview {
+        grid-template-columns: 1fr 4px var(--preview-width, 700px);
+      }
+
+      .resize-divider {
+        width: 4px;
+        background: transparent;
+        cursor: col-resize;
+        transition: background 0.2s;
+      }
+
+      .resize-divider:hover,
+      .resize-divider.active {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.2)')};
+      }
+
+      .main-view {
+        overflow: auto;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(0, 0, 0, 0.2)')};
+        border-radius: 8px;
+      }
+
+      .preview-panel {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(0, 0, 0, 0.2)')};
+        border-radius: 8px;
+        overflow: hidden;
+        margin-left: 12px;
+      }
+
+      @media (max-width: 1024px) {
+        .content,
+        .content.has-preview {
+          grid-template-columns: 1fr;
+        }
+
+        .preview-panel,
+        .resize-divider {
+          display: none;
+        }
+      }
+
+      .stream-status {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 11px;
+        color: ${cssManager.bdTheme('#71717a', '#888')};
+        margin-left: auto;
+        margin-right: 12px;
+      }
+
+      .stream-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('#a1a1aa', '#888')};
+      }
+
+      .stream-dot.connected {
+        background: #22c55e;
+      }
+
+      .change-indicator {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 8px;
+        background: rgba(245, 158, 11, 0.2);
+        border-radius: 4px;
+        font-size: 11px;
+        color: #f59e0b;
+        margin-right: 12px;
+      }
+
+      .change-indicator.pulse {
+        animation: pulse-orange 1s ease-in-out;
+      }
+
+      @keyframes pulse-orange {
+        0% { background: rgba(245, 158, 11, 0.4); }
+        100% { background: rgba(245, 158, 11, 0.2); }
+      }
+    `,
+  ];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    this.subscribeToChanges();
+  }
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    this.unsubscribeFromChanges();
+  }
+
+  /**
+   * Public method to trigger a refresh of child components
+   */
+  public refresh() {
+    this.refreshKey++;
+  }
+
+  private setViewType(type: TViewType) {
+    this.viewType = type;
+  }
+
+  private navigateToPrefix(prefix: string) {
+    this.currentPrefix = prefix;
+    this.selectedKey = '';
+  }
+
+  private handleKeySelected(e: CustomEvent) {
+    this.selectedKey = e.detail.key;
+  }
+
+  private handleNavigate(e: CustomEvent) {
+    this.navigateToPrefix(e.detail.prefix);
+  }
+
+  private handleObjectDeleted(e: CustomEvent) {
+    this.selectedKey = '';
+    this.refreshKey++;
+  }
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('bucketName')) {
+      this.selectedKey = '';
+      this.currentPrefix = '';
+      this.recentChangeCount = 0;
+      this.unsubscribeFromChanges();
+      this.subscribeToChanges();
+    }
+    if (changedProperties.has('onChangeEvent')) {
+      this.unsubscribeFromChanges();
+      this.subscribeToChanges();
+    }
+  }
+
+  private subscribeToChanges() {
+    if (!this.onChangeEvent) {
+      this.isStreamConnected = false;
+      return;
+    }
+
+    try {
+      this.changeUnsubscribe = this.onChangeEvent((event: IS3ChangeEvent) => {
+        this.handleChange(event);
+      });
+      this.isStreamConnected = true;
+    } catch (error) {
+      console.warn('[S3Browser] Failed to subscribe to changes:', error);
+      this.isStreamConnected = false;
+    }
+  }
+
+  private unsubscribeFromChanges() {
+    if (this.changeUnsubscribe) {
+      this.changeUnsubscribe();
+      this.changeUnsubscribe = null;
+    }
+    this.isStreamConnected = false;
+  }
+
+  private handleChange(event: IS3ChangeEvent) {
+    this.recentChangeCount++;
+    this.refreshKey++;
+  }
+
+  private startPreviewResize = (e: MouseEvent) => {
+    e.preventDefault();
+    this.isResizingPreview = true;
+    document.addEventListener('mousemove', this.handlePreviewResize);
+    document.addEventListener('mouseup', this.endPreviewResize);
+  };
+
+  private handlePreviewResize = (e: MouseEvent) => {
+    if (!this.isResizingPreview) return;
+    const contentEl = this.shadowRoot?.querySelector('.content');
+    if (!contentEl) return;
+    const containerRect = contentEl.getBoundingClientRect();
+    const newWidth = Math.min(Math.max(containerRect.right - e.clientX, 250), 1000);
+    this.previewWidth = newWidth;
+  };
+
+  private endPreviewResize = () => {
+    this.isResizingPreview = false;
+    document.removeEventListener('mousemove', this.handlePreviewResize);
+    document.removeEventListener('mouseup', this.endPreviewResize);
+  };
+
+  render() {
+    const breadcrumbParts = this.currentPrefix
+      ? this.currentPrefix.split('/').filter(Boolean)
+      : [];
+
+    return html`
+      <div class="browser-container">
+        <div class="toolbar">
+          <div class="breadcrumb">
+            <span
+              class="breadcrumb-item"
+              @click=${() => this.navigateToPrefix('')}
+            >
+              ${this.bucketName}
+            </span>
+            ${breadcrumbParts.map((part, index) => {
+              const prefix = breadcrumbParts.slice(0, index + 1).join('/') + '/';
+              return html`
+                <span class="breadcrumb-separator">/</span>
+                <span
+                  class="breadcrumb-item"
+                  @click=${() => this.navigateToPrefix(prefix)}
+                >
+                  ${part}
+                </span>
+              `;
+            })}
+          </div>
+
+          ${this.onChangeEvent ? html`
+            <div class="stream-status">
+              <span class="stream-dot ${this.isStreamConnected ? 'connected' : ''}"></span>
+              ${this.isStreamConnected ? 'Live' : 'Offline'}
+            </div>
+          ` : ''}
+          ${this.recentChangeCount > 0
+            ? html`
+                <div class="change-indicator pulse">
+                  ${this.recentChangeCount} change${this.recentChangeCount > 1 ? 's' : ''}
+                </div>
+              `
+            : ''}
+          <div class="view-toggle">
+            <button
+              class="view-btn ${this.viewType === 'columns' ? 'active' : ''}"
+              @click=${() => this.setViewType('columns')}
+            >
+              Columns
+            </button>
+            <button
+              class="view-btn ${this.viewType === 'keys' ? 'active' : ''}"
+              @click=${() => this.setViewType('keys')}
+            >
+              List
+            </button>
+          </div>
+        </div>
+
+        <div class="content ${this.selectedKey ? 'has-preview' : ''}" style="--preview-width: ${this.previewWidth}px">
+          <div class="main-view">
+            ${this.viewType === 'columns'
+              ? html`
+                  <dees-s3-columns
+                    .dataProvider=${this.dataProvider}
+                    .bucketName=${this.bucketName}
+                    .currentPrefix=${this.currentPrefix}
+                    .refreshKey=${this.refreshKey}
+                    @key-selected=${this.handleKeySelected}
+                    @navigate=${this.handleNavigate}
+                  ></dees-s3-columns>
+                `
+              : html`
+                  <dees-s3-keys
+                    .dataProvider=${this.dataProvider}
+                    .bucketName=${this.bucketName}
+                    .currentPrefix=${this.currentPrefix}
+                    .refreshKey=${this.refreshKey}
+                    @key-selected=${this.handleKeySelected}
+                    @navigate=${this.handleNavigate}
+                  ></dees-s3-keys>
+                `}
+          </div>
+
+          ${this.selectedKey
+            ? html`
+                <div
+                  class="resize-divider ${this.isResizingPreview ? 'active' : ''}"
+                  @mousedown=${this.startPreviewResize}
+                ></div>
+                <div class="preview-panel">
+                  <dees-s3-preview
+                    .dataProvider=${this.dataProvider}
+                    .bucketName=${this.bucketName}
+                    .objectKey=${this.selectedKey}
+                    @object-deleted=${this.handleObjectDeleted}
+                  ></dees-s3-preview>
+                </div>
+              `
+            : ''}
+        </div>
+      </div>
+    `;
+  }
+}

ts_web/elements/00group-dataview/dees-s3-browser/dees-s3-preview.ts

@@ -0,0 +1,540 @@
+import { customElement, html, css, cssManager, property, state, DeesElement } from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import type { IS3DataProvider } from './interfaces.js';
+import { formatSize, getFileName } from './utilities.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-s3-preview': DeesS3Preview;
+  }
+}
+
+@customElement('dees-s3-preview')
+export class DeesS3Preview extends DeesElement {
+  @property({ type: Object })
+  public accessor dataProvider: IS3DataProvider | null = null;
+
+  @property({ type: String })
+  public accessor bucketName: string = '';
+
+  @property({ type: String })
+  public accessor objectKey: string = '';
+
+  @state()
+  private accessor loading: boolean = false;
+
+  @state()
+  private accessor saving: boolean = false;
+
+  @state()
+  private accessor content: string = '';
+
+  @state()
+  private accessor originalTextContent: string = '';
+
+  @state()
+  private accessor hasChanges: boolean = false;
+
+  @state()
+  private accessor editing: boolean = false;
+
+  @state()
+  private accessor contentType: string = '';
+
+  @state()
+  private accessor fileSize: number = 0;
+
+  @state()
+  private accessor lastModified: string = '';
+
+  @state()
+  private accessor error: string = '';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    themeDefaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .preview-container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .preview-header {
+        padding: 12px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#333')};
+      }
+
+      .preview-title {
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 8px;
+        word-break: break-all;
+      }
+
+      .preview-meta {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16px;
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#71717a', '#888')};
+      }
+
+      .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .preview-content {
+        flex: 1;
+        overflow: hidden;
+      }
+
+      .preview-content dees-preview {
+        width: 100%;
+        height: 100%;
+      }
+
+      .preview-content.code-editor {
+        padding: 0;
+        overflow: hidden;
+      }
+
+      .preview-content.code-editor dees-input-code {
+        height: 100%;
+      }
+
+      .preview-actions {
+        padding: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#333')};
+        display: flex;
+        gap: 8px;
+      }
+
+      .action-btn {
+        flex: 1;
+        padding: 8px 16px;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.1)')};
+        border: 1px solid ${cssManager.bdTheme('#d4d4d8', '#404040')};
+        color: ${cssManager.bdTheme('#3f3f46', '#e0e0e0')};
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 13px;
+        transition: all 0.15s;
+      }
+
+      .action-btn:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.15)')};
+      }
+
+      .action-btn.danger {
+        background: rgba(239, 68, 68, 0.2);
+        border-color: #ef4444;
+        color: #f87171;
+      }
+
+      .action-btn.danger:hover {
+        background: rgba(239, 68, 68, 0.3);
+      }
+
+      .action-btn.primary {
+        background: rgba(59, 130, 246, 0.3);
+        border-color: #3b82f6;
+        color: #60a5fa;
+      }
+
+      .action-btn.primary:hover {
+        background: rgba(59, 130, 246, 0.4);
+      }
+
+      .action-btn.primary:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .action-btn.secondary {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.05)')};
+        border-color: ${cssManager.bdTheme('#d4d4d8', '#555')};
+        color: ${cssManager.bdTheme('#71717a', '#aaa')};
+      }
+
+      .action-btn.secondary:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.1)')};
+        color: ${cssManager.bdTheme('#18181b', '#fff')};
+      }
+
+      .unsaved-indicator {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 6px 10px;
+        background: rgba(251, 191, 36, 0.1);
+        border: 1px solid rgba(251, 191, 36, 0.3);
+        border-radius: 4px;
+        font-size: 12px;
+        color: #fbbf24;
+      }
+
+      .unsaved-dot {
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #fbbf24;
+      }
+
+      .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: ${cssManager.bdTheme('#a1a1aa', '#666')};
+        text-align: center;
+        padding: 24px;
+      }
+
+      .empty-state svg {
+        width: 48px;
+        height: 48px;
+        margin-bottom: 12px;
+        opacity: 0.5;
+      }
+
+      .loading-state {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: ${cssManager.bdTheme('#71717a', '#888')};
+      }
+
+      .error-state {
+        padding: 16px;
+        color: #f87171;
+        text-align: center;
+      }
+    `,
+  ];
+
+  updated(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('objectKey') || changedProperties.has('bucketName')) {
+      if (this.objectKey) {
+        this.loadObject();
+      } else {
+        this.content = '';
+        this.contentType = '';
+        this.error = '';
+        this.originalTextContent = '';
+        this.hasChanges = false;
+        this.editing = false;
+      }
+    }
+  }
+
+  private async loadObject() {
+    if (!this.objectKey || !this.bucketName || !this.dataProvider) return;
+
+    this.loading = true;
+    this.error = '';
+    this.hasChanges = false;
+    this.editing = false;
+
+    try {
+      const result = await this.dataProvider.getObject(this.bucketName, this.objectKey);
+      if (!result) {
+        this.error = 'Object not found';
+        this.loading = false;
+        return;
+      }
+      this.content = result.content || '';
+      this.contentType = result.contentType || '';
+      this.fileSize = result.size || 0;
+      this.lastModified = result.lastModified || '';
+
+      if (this.isText()) {
+        this.originalTextContent = this.getTextContent();
+      }
+    } catch (err) {
+      console.error('Error loading object:', err);
+      this.error = 'Failed to load object';
+    }
+
+    this.loading = false;
+  }
+
+  private formatDate(dateStr: string): string {
+    if (!dateStr) return '-';
+    const date = new Date(dateStr);
+    return date.toLocaleString();
+  }
+
+  private isImage(): boolean {
+    return this.contentType.startsWith('image/');
+  }
+
+  private isText(): boolean {
+    return (
+      this.contentType.startsWith('text/') ||
+      this.contentType === 'application/json' ||
+      this.contentType === 'application/xml' ||
+      this.contentType === 'application/javascript'
+    );
+  }
+
+  private getTextContent(): string {
+    try {
+      const binaryString = atob(this.content);
+      const bytes = new Uint8Array(binaryString.length);
+      for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+      }
+      return new TextDecoder('utf-8').decode(bytes);
+    } catch {
+      return 'Unable to decode content';
+    }
+  }
+
+  private async handleDownload() {
+    try {
+      const blob = new Blob([Uint8Array.from(atob(this.content), (c) => c.charCodeAt(0))], {
+        type: this.contentType,
+      });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = getFileName(this.objectKey);
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      console.error('Error downloading:', err);
+    }
+  }
+
+  private async handleDelete() {
+    if (!this.dataProvider) return;
+    if (!confirm(`Delete "${getFileName(this.objectKey)}"?`)) return;
+
+    try {
+      await this.dataProvider.deleteObject(this.bucketName, this.objectKey);
+      this.dispatchEvent(
+        new CustomEvent('object-deleted', {
+          detail: { key: this.objectKey },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    } catch (err) {
+      console.error('Error deleting object:', err);
+    }
+  }
+
+  private getLanguage(): string {
+    const ext = this.objectKey.split('.').pop()?.toLowerCase() || '';
+    const languageMap: Record<string, string> = {
+      ts: 'typescript',
+      tsx: 'typescript',
+      js: 'javascript',
+      jsx: 'javascript',
+      mjs: 'javascript',
+      cjs: 'javascript',
+      json: 'json',
+      html: 'html',
+      htm: 'html',
+      css: 'css',
+      scss: 'scss',
+      sass: 'scss',
+      less: 'less',
+      md: 'markdown',
+      markdown: 'markdown',
+      xml: 'xml',
+      yaml: 'yaml',
+      yml: 'yaml',
+      py: 'python',
+      rb: 'ruby',
+      go: 'go',
+      rs: 'rust',
+      java: 'java',
+      c: 'c',
+      cpp: 'cpp',
+      h: 'c',
+      hpp: 'cpp',
+      cs: 'csharp',
+      php: 'php',
+      sh: 'shell',
+      bash: 'shell',
+      zsh: 'shell',
+      sql: 'sql',
+      graphql: 'graphql',
+      gql: 'graphql',
+      dockerfile: 'dockerfile',
+      txt: 'plaintext',
+    };
+    return languageMap[ext] || 'plaintext';
+  }
+
+  private handleContentChange(event: CustomEvent) {
+    const newValue = event.detail as string;
+    this.hasChanges = newValue !== this.originalTextContent;
+  }
+
+  private handleEdit() {
+    this.editing = true;
+  }
+
+  private handleDiscard() {
+    const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
+    if (codeEditor) {
+      codeEditor.value = this.originalTextContent;
+    }
+    this.hasChanges = false;
+    this.editing = false;
+  }
+
+  private async handleSave() {
+    if (!this.hasChanges || this.saving || !this.dataProvider) return;
+
+    this.saving = true;
+
+    try {
+      const codeEditor = this.shadowRoot?.querySelector('dees-input-code') as any;
+      const currentContent = codeEditor?.value ?? '';
+
+      const encoder = new TextEncoder();
+      const bytes = encoder.encode(currentContent);
+      const base64Content = btoa(String.fromCharCode(...bytes));
+
+      const success = await this.dataProvider.putObject(
+        this.bucketName,
+        this.objectKey,
+        base64Content,
+        this.contentType
+      );
+
+      if (success) {
+        this.originalTextContent = currentContent;
+        this.hasChanges = false;
+        this.editing = false;
+        this.content = base64Content;
+      }
+    } catch (err) {
+      console.error('Error saving object:', err);
+    }
+
+    this.saving = false;
+  }
+
+  render() {
+    if (!this.objectKey) {
+      return html`
+        <div class="preview-container">
+          <div class="empty-state">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+              <polyline points="14 2 14 8 20 8" />
+            </svg>
+            <p>Select a file to preview</p>
+          </div>
+        </div>
+      `;
+    }
+
+    if (this.loading) {
+      return html`
+        <div class="preview-container">
+          <div class="loading-state">Loading...</div>
+        </div>
+      `;
+    }
+
+    if (this.error) {
+      return html`
+        <div class="preview-container">
+          <div class="error-state">${this.error}</div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="preview-container">
+        <div class="preview-header">
+          <div class="preview-title">${getFileName(this.objectKey)}</div>
+          <div class="preview-meta">
+            <span class="meta-item">${this.contentType}</span>
+            <span class="meta-item">${formatSize(this.fileSize)}</span>
+            <span class="meta-item">${this.formatDate(this.lastModified)}</span>
+            ${this.hasChanges ? html`
+              <span class="unsaved-indicator">
+                <span class="unsaved-dot"></span>
+                Unsaved changes
+              </span>
+            ` : ''}
+          </div>
+        </div>
+
+        <div class="preview-content ${this.editing ? 'code-editor' : ''}">
+          ${this.editing
+            ? html`
+                <dees-input-code
+                  .value=${this.originalTextContent}
+                  .language=${this.getLanguage()}
+                  height="100%"
+                  @content-change=${(e: CustomEvent) => this.handleContentChange(e)}
+                ></dees-input-code>
+              `
+            : this.isText()
+              ? html`
+                  <dees-preview
+                    .textContent=${this.originalTextContent}
+                    .filename=${getFileName(this.objectKey)}
+                    .language=${this.getLanguage()}
+                    .showToolbar=${true}
+                    .showFilename=${false}
+                  ></dees-preview>
+                `
+              : html`
+                  <dees-preview
+                    .base64=${this.content}
+                    .mimeType=${this.contentType}
+                    .filename=${getFileName(this.objectKey)}
+                    .showToolbar=${true}
+                    .showFilename=${false}
+                  ></dees-preview>
+                `
+          }
+        </div>
+
+        <div class="preview-actions">
+          ${this.editing
+            ? html`
+                <button class="action-btn secondary" @click=${this.handleDiscard}>
+                  ${this.hasChanges ? 'Discard' : 'Cancel'}
+                </button>
+                <button
+                  class="action-btn primary"
+                  @click=${this.handleSave}
+                  ?disabled=${this.saving || !this.hasChanges}
+                >
+                  ${this.saving ? 'Saving...' : 'Save'}
+                </button>
+              `
+            : html`
+                ${this.isText()
+                  ? html`<button class="action-btn" @click=${this.handleEdit}>Edit</button>`
+                  : ''}
+                <button class="action-btn" @click=${this.handleDownload}>Download</button>
+                <button class="action-btn danger" @click=${this.handleDelete}>Delete</button>
+              `
+          }
+        </div>
+      </div>
+    `;
+  }
+}

ts_web/elements/00group-dataview/dees-s3-browser/index.ts

@@ -0,0 +1,6 @@
+export * from './dees-s3-browser.js';
+export * from './dees-s3-columns.js';
+export * from './dees-s3-keys.js';
+export * from './dees-s3-preview.js';
+export * from './interfaces.js';
+export { formatSize, formatCount, getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';

ts_web/elements/00group-dataview/dees-s3-browser/interfaces.ts

@@ -0,0 +1,37 @@
+/**
+ * S3 Data Provider interface - implement this to connect the S3 browser to your backend
+ */
+
+export interface IS3Object {
+  key: string;
+  size?: number;
+  lastModified?: string;
+  isPrefix?: boolean;
+}
+
+export interface IS3ChangeEvent {
+  type: 'add' | 'modify' | 'delete';
+  key: string;
+  bucket: string;
+  size?: number;
+  lastModified?: Date;
+}
+
+export interface IS3DataProvider {
+  listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IS3Object[]; prefixes: string[] }>;
+  getObject(bucket: string, key: string): Promise<{ content: string; contentType: string; size: number; lastModified: string }>;
+  putObject(bucket: string, key: string, base64Content: string, contentType: string): Promise<boolean>;
+  deleteObject(bucket: string, key: string): Promise<boolean>;
+  deletePrefix(bucket: string, prefix: string): Promise<boolean>;
+  getObjectUrl(bucket: string, key: string): Promise<string>;
+  moveObject(bucket: string, sourceKey: string, destKey: string): Promise<{ success: boolean; error?: string }>;
+  movePrefix(bucket: string, sourcePrefix: string, destPrefix: string): Promise<{ success: boolean; movedCount?: number; error?: string }>;
+}
+
+export interface IColumn {
+  prefix: string;
+  objects: IS3Object[];
+  prefixes: string[];
+  selectedItem: string | null;
+  width: number;
+}

ts_web/elements/00group-dataview/dees-s3-browser/utilities.ts

@@ -0,0 +1,120 @@
+/**
+ * Shared utilities for S3 browser components
+ */
+
+export interface IMoveValidation {
+  valid: boolean;
+  error?: string;
+}
+
+/**
+ * Format a byte size into a human-readable string
+ */
+export function formatSize(bytes?: number): string {
+  if (bytes === undefined || bytes === null) return '-';
+  if (bytes === 0) return '0 B';
+
+  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  let size = bytes;
+  let unitIndex = 0;
+
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex++;
+  }
+
+  return `${size.toFixed(unitIndex > 0 ? 1 : 0)} ${units[unitIndex]}`;
+}
+
+/**
+ * Format a count into a compact human-readable string
+ */
+export function formatCount(count?: number): string {
+  if (count === undefined || count === null) return '';
+  if (count >= 1000000) return `${(count / 1000000).toFixed(1)}M`;
+  if (count >= 1000) return `${(count / 1000).toFixed(1)}K`;
+  return count.toString();
+}
+
+/**
+ * Extract the file name from a path
+ */
+export function getFileName(path: string): string {
+  const parts = path.replace(/\/$/, '').split('/');
+  return parts[parts.length - 1] || path;
+}
+
+/**
+ * Validates if a move operation is allowed
+ */
+export function validateMove(sourceKey: string, destPrefix: string): IMoveValidation {
+  if (sourceKey.endsWith('/')) {
+    if (destPrefix.startsWith(sourceKey)) {
+      return { valid: false, error: 'Cannot move a folder into itself' };
+    }
+  }
+
+  const sourceParent = getParentPrefix(sourceKey);
+  if (sourceParent === destPrefix) {
+    return { valid: false, error: 'Item is already in this location' };
+  }
+
+  return { valid: true };
+}
+
+/**
+ * Gets the parent prefix (directory) of a given key
+ */
+export function getParentPrefix(key: string): string {
+  const trimmed = key.endsWith('/') ? key.slice(0, -1) : key;
+  const lastSlash = trimmed.lastIndexOf('/');
+  return lastSlash >= 0 ? trimmed.substring(0, lastSlash + 1) : '';
+}
+
+/**
+ * Get content type from file extension
+ */
+export function getContentType(ext: string): string {
+  const contentTypes: Record<string, string> = {
+    json: 'application/json',
+    txt: 'text/plain',
+    html: 'text/html',
+    css: 'text/css',
+    js: 'application/javascript',
+    ts: 'text/typescript',
+    md: 'text/markdown',
+    xml: 'application/xml',
+    yaml: 'text/yaml',
+    yml: 'text/yaml',
+    csv: 'text/csv',
+  };
+  return contentTypes[ext] || 'application/octet-stream';
+}
+
+/**
+ * Get default content for a new file based on extension
+ */
+export function getDefaultContent(ext: string): string {
+  const defaults: Record<string, string> = {
+    json: '{\n  \n}',
+    html: '<!DOCTYPE html>\n<html>\n<head>\n  <title></title>\n</head>\n<body>\n  \n</body>\n</html>',
+    md: '# Title\n\n',
+    txt: '',
+  };
+  return defaults[ext] || '';
+}
+
+/**
+ * Parse a prefix into cumulative path segments
+ */
+export function getPathSegments(prefix: string): string[] {
+  if (!prefix) return [];
+  const parts = prefix.split('/').filter(p => p);
+  const segments: string[] = [];
+  let cumulative = '';
+  for (const part of parts) {
+    cumulative += part + '/';
+    segments.push(cumulative);
+  }
+  return segments;
+}

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,
@@ -10,13 +10,14 @@ import {
   css,
   unsafeCSS,
   cssManager,
+  containerResponsive,
 } 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 {
@@ -93,9 +94,11 @@ export interface IStatsTile {
   actions?: plugins.tsclass.website.IMenuItem[];
 }
 
+@containerResponsive()
 @customElement('dees-statsgrid')
 export class DeesStatsGrid extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['Data View'];
 
   @property({ type: Array })
   accessor tiles: IStatsTile[] = [];
@@ -800,6 +803,38 @@ export class DeesStatsGrid extends DeesElement {
         z-index: 1000;
       }
     `,
+    // Container-responsive: when this statsgrid is narrow
+    cssManager.cssForTablet(css`
+      .stats-grid {
+        grid-template-columns: repeat(3, 1fr);
+      }
+    `, this),
+    cssManager.cssForPhablet(css`
+      :host {
+        --tile-padding: 12px;
+        --value-font-size: 22px;
+        --title-font-size: 12px;
+        --grid-gap: 8px;
+      }
+      .stats-grid {
+        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+        gap: 8px;
+      }
+      .stats-tile {
+        grid-column: span 1 !important;
+      }
+    `, this),
+    cssManager.cssForPhone(css`
+      :host {
+        --tile-padding: 10px;
+        --value-font-size: 20px;
+        --header-spacing: 8px;
+      }
+      .stats-grid {
+        grid-template-columns: 1fr;
+        gap: 6px;
+      }
+    `, this),
   ];
 
   constructor() {

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({
@@ -231,7 +232,7 @@ export class DeesTable<T> extends DeesElement {
             ${directives.resolveExec(async () => {
               const resultArray: TemplateResult[] = [];
               for (const action of this.dataActions) {
-                if (!action.type.includes('header')) continue;
+                if (!action.type?.includes('header')) continue;
                 resultArray.push(
                   html`<div
                     class="headerAction"
@@ -449,7 +450,7 @@ export class DeesTable<T> extends DeesElement {
                               <td
                                 @dblclick=${(e: Event) => {
                                   const dblAction = this.dataActions.find((actionArg) =>
-                                    actionArg.type.includes('doubleClick')
+                                    actionArg.type?.includes('doubleClick')
                                   );
                                   if (this.editableFields.includes(editKey)) {
                                     this.handleCellEditing(e, itemArg, editKey);
@@ -505,7 +506,7 @@ export class DeesTable<T> extends DeesElement {
             ${directives.resolveExec(async () => {
               const resultArray: TemplateResult[] = [];
               for (const action of this.dataActions) {
-                if (!action.type.includes('footer')) continue;
+                if (!action.type?.includes('footer')) continue;
                 resultArray.push(
                   html`<div
                     class="footerAction"
@@ -539,11 +540,11 @@ export class DeesTable<T> extends DeesElement {
     super.updated(changedProperties);
     this.determineColumnWidths();
     if (this.searchable) {
-      const existing = this.dataActions.find((actionArg) => actionArg.type.includes('header') && actionArg.name === 'Search');
+      const existing = this.dataActions.find((actionArg) => actionArg.type?.includes('header') && actionArg.name === 'Search');
       if (!existing) {
         this.dataActions.unshift({
           name: 'Search',
-          iconName: 'magnifyingGlass',
+          iconName: 'lucide:Search',
           type: ['header'],
           actionFunc: async () => {
             console.log('open search');
@@ -622,7 +623,7 @@ export class DeesTable<T> extends DeesElement {
       const width = window.getComputedStyle(cell).width;
       if (cell.textContent.includes('Actions')) {
         const neededWidth =
-          this.dataActions.filter((actionArg) => actionArg.type.includes('inRow')).length * 36;
+          this.dataActions.filter((actionArg) => actionArg.type?.includes('inRow')).length * 36;
         cell.style.width = `${Math.max(neededWidth, 68)}px`;
       } else {
         cell.style.width = width;
@@ -794,7 +795,7 @@ export class DeesTable<T> extends DeesElement {
   getActionsForType(typeArg: ITableAction['type'][0]) {
     const actions: ITableAction[] = [];
     for (const action of this.dataActions) {
-      if (!action.type.includes(typeArg)) continue;
+      if (!action.type?.includes(typeArg)) continue;
       actions.push(action);
     }
     return actions;

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,6 @@
 // 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';
+export * from './dees-s3-browser/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.demo.ts

@@ -1,3 +1,85 @@
 import { html } from '@design.estate/dees-element';
 
-export const demoFunc = () => html`<dees-form-submit>Submit Form</dees-form-submit>`;
+export const demoFunc = () => html`
+  <style>
+    .demo-container {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      padding: 24px;
+    }
+    .demo-section {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+    .demo-section h3 {
+      margin: 0 0 8px 0;
+      font-size: 14px;
+      font-weight: 500;
+      color: #888;
+    }
+    .demo-row {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+  </style>
+  <div class="demo-container">
+    <div class="demo-section">
+      <h3>Basic Usage</h3>
+      <div class="demo-row">
+        <dees-form-submit>Submit Form</dees-form-submit>
+        <dees-form-submit text="With Text Property"></dees-form-submit>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>With Icons (inherited from DeesButton)</h3>
+      <div class="demo-row">
+        <dees-form-submit icon="lucide:send">Submit</dees-form-submit>
+        <dees-form-submit icon="lucide:save" iconPosition="left">Save Form</dees-form-submit>
+        <dees-form-submit icon="lucide:arrow-right" iconPosition="right">Continue</dees-form-submit>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>Button Types</h3>
+      <div class="demo-row">
+        <dees-form-submit type="highlighted" icon="lucide:send">Highlighted</dees-form-submit>
+        <dees-form-submit type="normal" icon="lucide:send">Normal</dees-form-submit>
+        <dees-form-submit type="discreet" icon="lucide:send">Discreet</dees-form-submit>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>Sizes</h3>
+      <div class="demo-row">
+        <dees-form-submit size="small" icon="lucide:send">Small</dees-form-submit>
+        <dees-form-submit size="normal" icon="lucide:send">Normal</dees-form-submit>
+        <dees-form-submit size="large" icon="lucide:send">Large</dees-form-submit>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>States</h3>
+      <div class="demo-row">
+        <dees-form-submit status="normal" icon="lucide:send">Normal</dees-form-submit>
+        <dees-form-submit status="pending" icon="lucide:send">Pending</dees-form-submit>
+        <dees-form-submit status="success" icon="lucide:check">Success</dees-form-submit>
+        <dees-form-submit status="error" icon="lucide:x">Error</dees-form-submit>
+        <dees-form-submit disabled icon="lucide:send">Disabled</dees-form-submit>
+      </div>
+    </div>
+
+    <div class="demo-section">
+      <h3>In a Form Context</h3>
+      <dees-form>
+        <dees-input-text label="Name" key="name"></dees-input-text>
+        <dees-input-text label="Email" key="email"></dees-input-text>
+        <dees-form-submit icon="lucide:send" type="highlighted">Submit Form</dees-form-submit>
+      </dees-form>
+    </div>
+  </div>
+`;

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

@@ -6,6 +6,7 @@ import {
   css,
   cssManager,
   property,
+  type TemplateResult,
 } from '@design.estate/dees-element';
 import type { DeesForm } from '../dees-form/dees-form.js';
 import { themeDefaultStyles } from '../../00theme.js';
@@ -19,40 +20,63 @@ 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,
+  // Properties forwarded to internal dees-button
-    reflect: true,
+  // =============================================
-  })
+
+  @property({ type: Boolean, reflect: true })
   accessor disabled = false;
 
-  @property({
+  @property({ type: String })
-    type: String,
-  })
   accessor text: string;
 
-  @property({
+  @property({ type: String })
-    type: String,
-  })
   accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
+  @property({ type: String, reflect: true })
+  accessor type: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'normal' | 'highlighted' | 'discreet' | 'big' = 'default';
+
+  @property({ type: String, reflect: true })
+  accessor size: 'sm' | 'default' | 'lg' | 'icon' | 'small' | 'normal' | 'large' = 'default';
+
+  @property({ type: String })
+  accessor icon: string;
+
+  @property({ type: String })
+  accessor iconPosition: 'left' | 'right' = 'left';
+
   constructor() {
     super();
   }
-  
-  public static styles = [themeDefaultStyles, cssManager.defaultStyles, css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
-    `];
 
-  public render() {
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+      dees-button {
+        width: 100%;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
     return html`
       <dees-button
-        status="${this.status}"
+        .status=${this.status}
-        @click="${this.submit}"
+        .type=${this.type}
-        ?disabled="${this.disabled}"
+        .size=${this.size}
+        .icon=${this.icon}
+        .iconPosition=${this.iconPosition}
+        .text=${this.text}
+        ?disabled=${this.disabled}
+        @clicked=${this.submit}
       >
-        ${this.text || html`<slot></slot>`}
+        <slot></slot>
       </dees-button>
     `;
   }

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

@@ -1,6 +1,7 @@
 import {
   customElement,
   html,
+  css,
   type TemplateResult,
   DeesElement,
   type CSSResult,
@@ -21,8 +22,12 @@ import { DeesInputMultitoggle } from '../../00group-input/dees-input-multitoggle
 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 { DeesInputTags } from '../../00group-input/dees-input-tags/dees-input-tags.js';
+import { DeesInputList } from '../../00group-input/dees-input-list/dees-input-list.js';
+import { DeesInputWysiwyg } from '../../00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesInputRichtext } from '../../00group-input/dees-input-richtext/component.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
@@ -40,6 +45,10 @@ const FORM_INPUT_TYPES = [
   DeesInputText,
   DeesInputToggle,
   DeesInputTypelist,
+  DeesInputTags,
+  DeesInputList,
+  DeesInputWysiwyg,
+  DeesInputRichtext,
   DeesTable,
 ];
 
@@ -57,6 +66,10 @@ export type TFormInputElement =
   | DeesInputText
   | DeesInputToggle
   | DeesInputTypelist
+  | DeesInputTags
+  | DeesInputList
+  | DeesInputWysiwyg
+  | DeesInputRichtext
   | DeesTable<any>;
 
 declare global {
@@ -68,7 +81,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();
@@ -81,13 +94,25 @@ export class DeesForm extends DeesElement {
   @property({ type: Boolean, reflect: true, attribute: 'horizontal-layout' })
   accessor horizontalLayout: boolean = false;
 
+  public static styles = [
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      :host([horizontal-layout]) {
+        flex-direction: row;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 16px;
+      }
+    `,
+  ];
+
   public render(): TemplateResult {
     return html`
-      <style>
-        :host {
-          display: contents;
-        }
-      </style>
       <slot></slot>
     `;
   }

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

@@ -54,37 +54,20 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
         /* CSS Variables for consistent spacing */
         :host {
           --dees-input-spacing-unit: 8px;
-          --dees-input-vertical-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
-          --dees-input-horizontal-gap: calc(var(--dees-input-spacing-unit) * 2); /* 16px */
           --dees-input-label-gap: var(--dees-input-spacing-unit); /* 8px */
         }
 
-        /* Default vertical stacking mode (for forms) */
+        /* Default block display with no margins - spacing is container-driven */
         :host {
           display: block;
           margin: 0;
-          margin-bottom: var(--dees-input-vertical-gap);
-        }
-
-        /* Last child in container should have no bottom margin */
-        :host(:last-child) {
-          margin-bottom: 0;
         }
 
         /* Horizontal layout mode - activated by attribute */
         :host([layout-mode="horizontal"]) {
           display: inline-block;
-          margin: 0;
-          margin-right: var(--dees-input-horizontal-gap);
-          margin-bottom: 0;
         }
 
-        :host([layout-mode="horizontal"]:last-child) {
-          margin-right: 0;
-        }
-
-        /* Auto mode - inherit from parent dees-form if present */
-
         /* Label position variations */
         :host([label-position="left"]) .input-wrapper {
           display: grid;

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';
 
@@ -31,6 +31,12 @@ export const demoFunc = () => html`
         flex-wrap: wrap;
       }
       
+      .input-group {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
       .spacer {
         height: 200px;
         display: flex;
@@ -63,30 +69,32 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
-        <dees-input-dropdown
+        <div class="input-group">
-          .label=${'Select Country'}
+          <dees-input-dropdown
-          .options=${[
+            .label=${'Select Country'}
-            { option: 'United States', key: 'us' },
+            .options=${[
-            { option: 'Canada', key: 'ca' },
+              { option: 'United States', key: 'us' },
-            { option: 'Germany', key: 'de' },
+              { option: 'Canada', key: 'ca' },
-            { option: 'France', key: 'fr' },
+              { option: 'Germany', key: 'de' },
-            { option: 'United Kingdom', key: 'uk' },
+              { option: 'France', key: 'fr' },
-            { option: 'Australia', key: 'au' },
+              { option: 'United Kingdom', key: 'uk' },
-            { option: 'Japan', key: 'jp' },
+              { option: 'Australia', key: 'au' },
-            { option: 'Brazil', key: 'br' }
+              { option: 'Japan', key: 'jp' },
-          ]}
+              { option: 'Brazil', key: 'br' }
-          .selectedOption=${{ option: 'United States', key: 'us' }}
+            ]}
-        ></dees-input-dropdown>
+            .selectedOption=${{ option: 'United States', key: 'us' }}
-        
+          ></dees-input-dropdown>
-        <dees-input-dropdown
+
-          .label=${'Select Role'}
+          <dees-input-dropdown
-          .options=${[
+            .label=${'Select Role'}
-            { option: 'Administrator', key: 'admin' },
+            .options=${[
-            { option: 'Editor', key: 'editor' },
+              { option: 'Administrator', key: 'admin' },
-            { option: 'Viewer', key: 'viewer' },
+              { option: 'Editor', key: 'editor' },
-            { option: 'Guest', key: 'guest' }
+              { option: 'Viewer', key: 'viewer' },
-          ]}
+              { option: 'Guest', key: 'guest' }
-        ></dees-input-dropdown>
+            ]}
+          ></dees-input-dropdown>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     
@@ -176,24 +184,26 @@ export const demoFunc = () => html`
       }
     }}>
       <dees-panel .title=${'4. States'} .subtitle=${'Different states and configurations'}>
-        <dees-input-dropdown
+        <div class="input-group">
-          .label=${'Required Field'}
+          <dees-input-dropdown
-          .required=${true}
+            .label=${'Required Field'}
-          .options=${[
+            .required=${true}
-            { option: 'Option A', key: 'a' },
+            .options=${[
-            { option: 'Option B', key: 'b' },
+              { option: 'Option A', key: 'a' },
-            { option: 'Option C', key: 'c' }
+              { option: 'Option B', key: 'b' },
-          ]}
+              { option: 'Option C', key: 'c' }
-        ></dees-input-dropdown>
+            ]}
-        
+          ></dees-input-dropdown>
-        <dees-input-dropdown
+
-          .label=${'Disabled Dropdown'}
+          <dees-input-dropdown
-          .disabled=${true}
+            .label=${'Disabled Dropdown'}
-          .options=${[
+            .disabled=${true}
-            { option: 'Cannot Select', key: 'disabled' }
+            .options=${[
-          ]}
+              { option: 'Cannot Select', key: 'disabled' }
-          .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
+            ]}
-        ></dees-input-dropdown>
+            .selectedOption=${{ option: 'Cannot Select', key: 'disabled' }}
+          ></dees-input-dropdown>
+        </div>
       </dees-panel>
     </dees-demowrapper>
     

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.demo.ts

@@ -13,6 +13,12 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .payment-group {
           display: flex;
           align-items: center;
@@ -24,16 +30,18 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic IBAN Input'} .subtitle=${'International Bank Account Number with automatic formatting'}>
-        <dees-input-iban 
+        <div class="input-group">
-          .label=${'Bank Account IBAN'} 
+          <dees-input-iban
-          .description=${'Enter your International Bank Account Number'}
+            .label=${'Bank Account IBAN'}
-        ></dees-input-iban>
+            .description=${'Enter your International Bank Account Number'}
-        
+          ></dees-input-iban>
-        <dees-input-iban 
+
-          .label=${'Verified IBAN'} 
+          <dees-input-iban
-          .description=${'This IBAN has been verified'}
+            .label=${'Verified IBAN'}
-          .value=${'DE89370400440532013000'}
+            .description=${'This IBAN has been verified'}
-        ></dees-input-iban>
+            .value=${'DE89370400440532013000'}
+          ></dees-input-iban>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Payment Information'} .subtitle=${'IBAN input with horizontal layout for payment forms'}>
@@ -53,18 +61,20 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'Validation & States'} .subtitle=${'Required fields and disabled states'}>
-        <dees-input-iban 
+        <div class="input-group">
-          .label=${'Payment Account'} 
+          <dees-input-iban
-          .description=${'Required for processing payments'}
+            .label=${'Payment Account'}
-          .required=${true}
+            .description=${'Required for processing payments'}
-        ></dees-input-iban>
+            .required=${true}
-        
+          ></dees-input-iban>
-        <dees-input-iban 
+
-          .label=${'Locked IBAN'} 
+          <dees-input-iban
-          .description=${'This IBAN cannot be changed'}
+            .label=${'Locked IBAN'}
-          .value=${'FR1420041010050500013M02606'}
+            .description=${'This IBAN cannot be changed'}
-          .disabled=${true}
+            .value=${'FR1420041010050500013M02606'}
-        ></dees-input-iban>
+            .disabled=${true}
+          ></dees-input-iban>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Bank Transfer Form'} .subtitle=${'Complete form example with IBAN validation'}>

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.demo.ts

@@ -13,6 +13,12 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .horizontal-group {
           display: flex;
           align-items: center;
@@ -24,18 +30,20 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Phone Input'} .subtitle=${'Automatic formatting for phone numbers'}>
-        <dees-input-phone 
+        <div class="input-group">
-          .label=${'Phone Number'} 
+          <dees-input-phone
-          .description=${'Enter your phone number with country code'}
+            .label=${'Phone Number'}
-          .value=${'5551234567'}
+            .description=${'Enter your phone number with country code'}
-        ></dees-input-phone>
+            .value=${'5551234567'}
-        
+          ></dees-input-phone>
-        <dees-input-phone 
+
-          .label=${'Contact Phone'} 
+          <dees-input-phone
-          .description=${'Required for account verification'}
+            .label=${'Contact Phone'}
-          .required=${true}
+            .description=${'Required for account verification'}
-          .placeholder=${'+1 (555) 000-0000'}
+            .required=${true}
-        ></dees-input-phone>
+            .placeholder=${'+1 (555) 000-0000'}
+          ></dees-input-phone>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Phone inputs arranged horizontally'}>
@@ -55,17 +63,19 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'International Numbers'} .subtitle=${'Supports formatting for numbers with country codes'}>
-        <dees-input-phone 
+        <div class="input-group">
-          .label=${'International Contact'} 
+          <dees-input-phone
-          .description=${'Automatically formats international numbers'}
+            .label=${'International Contact'}
-          .value=${'441234567890'}
+            .description=${'Automatically formats international numbers'}
-        ></dees-input-phone>
+            .value=${'441234567890'}
-        
+          ></dees-input-phone>
-        <dees-input-phone 
+
-          .label=${'Emergency Contact'} 
+          <dees-input-phone
-          .value=${'911'}
+            .label=${'Emergency Contact'}
-          .disabled=${true}
+            .value=${'911'}
-        ></dees-input-phone>
+            .disabled=${true}
+          ></dees-input-phone>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Form Integration'} .subtitle=${'Phone input as part of a contact form'}>

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>
@@ -14,6 +14,12 @@ export const demoFunc = () => html`
           margin: 0 auto;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .shopping-grid {
           display: grid;
           grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
@@ -60,17 +66,19 @@ export const demoFunc = () => html`
     
     <div class="demo-container">
       <dees-panel .title=${'Basic Quantity Selector'} .subtitle=${'Simple quantity input with increment/decrement buttons'}>
-        <dees-input-quantityselector
+        <div class="input-group">
-          .label=${'Quantity'}
+          <dees-input-quantityselector
-          .description=${'Select the desired quantity'}
+            .label=${'Quantity'}
-          .value=${1}
+            .description=${'Select the desired quantity'}
-        ></dees-input-quantityselector>
+            .value=${1}
-        
+          ></dees-input-quantityselector>
-        <dees-input-quantityselector
+
-          .label=${'Items in Cart'}
+          <dees-input-quantityselector
-          .description=${'Adjust the quantity of items'}
+            .label=${'Items in Cart'}
-          .value=${3}
+            .description=${'Adjust the quantity of items'}
-        ></dees-input-quantityselector>
+            .value=${3}
+          ></dees-input-quantityselector>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Shopping Cart'} .subtitle=${'Modern e-commerce product cards with interactive quantity selectors'} .runAfterRender=${async (elementArg: HTMLElement) => {
@@ -169,19 +177,21 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'Required & Disabled States'} .subtitle=${'Different states for validation and restrictions'}>
-        <dees-input-quantityselector
+        <div class="input-group">
-          .label=${'Number of Licenses'}
+          <dees-input-quantityselector
-          .description=${'Select how many licenses you need'}
+            .label=${'Number of Licenses'}
-          .required=${true}
+            .description=${'Select how many licenses you need'}
-          .value=${1}
+            .required=${true}
-        ></dees-input-quantityselector>
+            .value=${1}
-        
+          ></dees-input-quantityselector>
-        <dees-input-quantityselector
+
-          .label=${'Fixed Quantity'}
+          <dees-input-quantityselector
-          .description=${'This quantity cannot be changed'}
+            .label=${'Fixed Quantity'}
-          .disabled=${true}
+            .description=${'This quantity cannot be changed'}
-          .value=${5}
+            .disabled=${true}
-        ></dees-input-quantityselector>
+            .value=${5}
+          ></dees-input-quantityselector>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'Order Form'} .subtitle=${'Complete order form with quantity selection'}>

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>
@@ -23,6 +23,12 @@ export const demoFunc = () => html`
           margin-bottom: 0;
         }
         
+        .input-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
         .demo-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -60,20 +66,22 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'2. Horizontal Layout'} .subtitle=${'Radio groups with horizontal arrangement'}>
-        <dees-input-radiogroup
+        <div class="input-group">
-          .label=${'Do you agree with the terms?'}
+          <dees-input-radiogroup
-          .options=${['Yes', 'No', 'Maybe']}
+            .label=${'Do you agree with the terms?'}
-          .direction=${'horizontal'}
+            .options=${['Yes', 'No', 'Maybe']}
-          .selectedOption=${'Yes'}
+            .direction=${'horizontal'}
-        ></dees-input-radiogroup>
+            .selectedOption=${'Yes'}
-        
+          ></dees-input-radiogroup>
-        <dees-input-radiogroup
+
-          .label=${'Experience Level'}
+          <dees-input-radiogroup
-          .options=${['Beginner', 'Intermediate', 'Expert']}
+            .label=${'Experience Level'}
-          .direction=${'horizontal'}
+            .options=${['Beginner', 'Intermediate', 'Expert']}
-          .selectedOption=${'Intermediate'}
+            .direction=${'horizontal'}
-          .description=${'Select your experience level with web development'}
+            .selectedOption=${'Intermediate'}
-        ></dees-input-radiogroup>
+            .description=${'Select your experience level with web development'}
+          ></dees-input-radiogroup>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'3. Advanced Options'} .subtitle=${'Using object format with keys and payloads'}>
@@ -132,30 +140,32 @@ export const demoFunc = () => html`
       </dees-panel>
       
       <dees-panel .title=${'6. Settings Example'} .subtitle=${'Common patterns in application settings'}>
-        <dees-input-radiogroup
+        <div class="input-group">
-          .label=${'Theme Preference'}
+          <dees-input-radiogroup
-          .options=${[
+            .label=${'Theme Preference'}
-            { option: 'Light Theme', key: 'light', payload: 'light' },
+            .options=${[
-            { option: 'Dark Theme', key: 'dark', payload: 'dark' },
+              { option: 'Light Theme', key: 'light', payload: 'light' },
-            { option: 'System Default', key: 'system', payload: 'auto' }
+              { option: 'Dark Theme', key: 'dark', payload: 'dark' },
-          ]}
+              { option: 'System Default', key: 'system', payload: 'auto' }
-          .selectedOption=${'dark'}
+            ]}
-          .description=${'Choose how the application should appear'}
+            .selectedOption=${'dark'}
-        ></dees-input-radiogroup>
+            .description=${'Choose how the application should appear'}
-        
+          ></dees-input-radiogroup>
-        <dees-input-radiogroup
+
-          .label=${'Notification Frequency'}
+          <dees-input-radiogroup
-          .options=${['All Notifications', 'Important Only', 'None']}
+            .label=${'Notification Frequency'}
-          .selectedOption=${'Important Only'}
+            .options=${['All Notifications', 'Important Only', 'None']}
-          .description=${'Control how often you receive notifications'}
+            .selectedOption=${'Important Only'}
-        ></dees-input-radiogroup>
+            .description=${'Control how often you receive notifications'}
-        
+          ></dees-input-radiogroup>
-        <dees-input-radiogroup
+
-          .label=${'Language'}
+          <dees-input-radiogroup
-          .options=${['English', 'German', 'French', 'Spanish', 'Japanese']}
+            .label=${'Language'}
-          .selectedOption=${'English'}
+            .options=${['English', 'German', 'French', 'Spanish', 'Japanese']}
-          .direction=${'horizontal'}
+            .selectedOption=${'English'}
-        ></dees-input-radiogroup>
+            .direction=${'horizontal'}
+          ></dees-input-radiogroup>
+        </div>
       </dees-panel>
       
       <dees-panel .title=${'7. Form Integration'} .subtitle=${'Works seamlessly with dees-form'}>

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({
@@ -269,6 +269,7 @@ export class DeesInputRichtext extends DeesInputBase<string> {
       onUpdate: ({ editor }) => {
         this.value = editor.getHTML();
         this.updateWordCount();
+        this.changeSubject.next(this.value);
         this.dispatchEvent(
           new CustomEvent('input', {
             detail: { value: this.value },

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>