v3.51.2

fix(ui): standardize tile-based layouts across input, product card, and terminal preview components
feat(dataview): integrate dees-tile component for improved layout and styling
2026-04-03 12:37:57 +00:00 · 2026-04-03 12:37:57 +00:00 · 2026-04-03 12:08:06 +00:00 · 2026-04-03 11:59:34 +00:00 · 2026-04-03 11:49:58 +00:00 · 2026-04-03 10:45:40 +00:00
111 changed files with 6818 additions and 1989 deletions
--- a/.smartconfig.json
+++ b/.smartconfig.json
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
  "json.schemas": [
    {
-      "fileMatch": ["/npmextra.json"],
+      "fileMatch": ["/.smartconfig.json"],
      "schema": {
        "type": "object",
        "properties": {
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,103 @@
 # Changelog

+## 2026-04-03 - 3.51.2 - fix(ui)
+standardize tile-based layouts across input, product card, and terminal preview components
+
+- Replace custom card containers with dees-tile in code input, richtext editor, shopping product card, and terminal preview components
+- Move toolbars and footers into dees-tile header/footer slots for more consistent structure and spacing
+- Update hover, focus, and selected state styling to target dees-tile parts while preserving existing component behavior
+
+## 2026-04-03 - 3.51.1 - fix(repo)
+no changes to commit
+
+
+## 2026-04-03 - 3.51.0 - feat(chart-area)
+replace ApexCharts with Lightweight Charts for area chart rendering
+
+- switch chart dependency and CDN loader from apexcharts to lightweight-charts
+- update dees-chart-area styling and tooltip support for the new chart engine
+- adjust appdash terminal overlay sizing with automatic height
+
+## 2026-04-02 - 3.50.2 - fix(chart,dashboardgrid demos)
+use dees-button text property consistently in demo interactions and update dataset button highlighting reliably
+
+- Replaces textContent reads with the component text property when wiring demo button handlers.
+- Updates the chart area demo to refresh dataset button highlight states directly on click without redundant listener replacement logic.
+- Uses the button text property when toggling dashboard edit mode labels.
+
+## 2026-04-02 - 3.50.1 - fix(appdash)
+use banner height CSS variable for terminal layout and expose terminal resize handling
+
+- Removes manual terminal top offset updates in the app dashboard and relies on the shared --banner-area-height CSS variable instead.
+- Drops fixed max-width and max-height calculations so the terminal can size more reliably within its container.
+- Makes the workspace terminal resize handler public to support external resize coordination.
+
+## 2026-04-02 - 3.50.0 - feat(dees-simple-appdash)
+add global message banners with actions and dismissal support
+
+- introduces typed global message APIs and public methods to add, remove, and clear banners
+- renders info, success, warning, and error banners with optional icons and action buttons
+- adjusts app content and terminal positioning to account for banner height dynamically
+- updates the demo to showcase dismissible and actionable global messages
+
+## 2026-04-02 - 3.49.2 - fix(dees-input-list)
+refine dees-input-list spacing and simplify the add item action button
+
+- reduce list item, input, helper text, and empty state sizing for a more compact layout
+- replace the add action from dees-button to a native icon-only button and remove the unused button import
+- simplify add-input styling by removing bordered focus treatment and using a minimal inline input appearance
+
+## 2026-04-01 - 3.49.1 - fix(ts_web)
+resolve TypeScript nullability and event typing issues across web components
+
+- adds explicit non-null assertions and nullable types to component properties, shadowRoot queries, and modal references
+- normalizes demo and component event listeners by casting generic Event objects to CustomEvent where needed
+- guards optional form, dropdown, menu, and DOM interactions to prevent invalid access under stricter TypeScript checks
+- updates tsconfig to include Node types for the web build environment
+
+## 2026-03-18 - 3.49.0 - feat(dataview-statusobject)
+add last updated footer to status object and refresh demo data
+
+- Render a bottom bar that shows the status object's lastUpdated timestamp when available.
+- Adjust detail row padding to keep spacing consistent with the new footer layout.
+- Update demo status objects to include lastUpdated examples for current, hourly, and daily timestamps.
+- Bump @tsclass/tsclass from ^9.3.0 to ^9.5.0.
+
+## 2026-03-14 - 3.48.5 - fix(repo)
+no changes to commit
+
+
+## 2026-03-14 - 3.48.4 - fix(storage-browser)
+rename S3-specific storage browser interfaces to generic storage types
+
+- Replaces IS3DataProvider, IS3Object, and IS3ChangeEvent with generic storage interface names across storage browser components
+- Updates demo provider naming and user-facing demo text from S3 browser to Storage browser
+- Aligns interface and utility comments with storage-agnostic terminology
+
+## 2026-03-14 - 3.48.3 - fix(dataview)
+rename dees-s3-browser exports and custom elements to dees-storage-browser
+
+- Replaces the dees-s3-browser module path with dees-storage-browser in dataview exports
+- Renames the main custom element from dees-s3-browser to dees-storage-browser
+- Renames related columns, keys, preview, demo, interfaces, and utility entry points under the new storage-browser module
+
+## 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

--- a/9
+++ b/9
@@ -1,4 +1,4 @@
-Copyright (c) 2020 Lossless GmbH (hello@lossless.com)
+Copyright (c) 2020 Task Venture Capital GmbH (hello@task.vc)

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -8,10 +8,7 @@ copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:

 The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software. You agree to being mentioned
-as reference by Lossless GmbH. This includes the use of your entity logos
-or profile picture by Lossless GmbH on websites and readme's, also on third party
-pages like gitlab.com or github.com.
+copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
@@ -19,4 +16,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@design.estate/dees-catalog",
-  "version": "3.47.2",
+  "version": "3.51.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,8 +16,8 @@
  "author": "Lossless GmbH",
  "license": "MIT",
  "dependencies": {
-    "@design.estate/dees-domtools": "^2.5.1",
-    "@design.estate/dees-element": "^2.2.2",
+    "@design.estate/dees-domtools": "^2.5.4",
+    "@design.estate/dees-element": "^2.2.4",
    "@design.estate/dees-wcctools": "^3.8.0",
    "@fortawesome/fontawesome-svg-core": "^7.2.0",
    "@fortawesome/free-brands-svg-icons": "^7.2.0",
@@ -33,8 +33,8 @@
    "@tiptap/extension-typography": "^2.23.0",
    "@tiptap/extension-underline": "^2.23.0",
    "@tiptap/starter-kit": "^2.23.0",
-    "@tsclass/tsclass": "^9.3.0",
-    "apexcharts": "^5.10.3",
+    "@tsclass/tsclass": "^9.5.0",
+    "lightweight-charts": "^5.1.0",
    "highlight.js": "11.11.1",
    "ibantools": "^4.5.1",
    "lucide": "^0.577.0",
@@ -44,12 +44,12 @@
    "xterm-addon-fit": "^0.8.0"
  },
  "devDependencies": {
-    "@git.zone/tsbuild": "^4.3.0",
-    "@git.zone/tsbundle": "^2.9.1",
-    "@git.zone/tstest": "^3.3.2",
-    "@git.zone/tswatch": "^3.3.0",
-    "@push.rocks/projectinfo": "^5.0.2",
-    "@types/node": "^25.4.0"
+    "@git.zone/tsbuild": "^4.4.0",
+    "@git.zone/tsbundle": "^2.10.0",
+    "@git.zone/tstest": "^3.6.3",
+    "@git.zone/tswatch": "^3.3.2",
+    "@push.rocks/projectinfo": "^5.1.0",
+    "@types/node": "^25.5.0"
  },
  "files": [
    "ts/**/*",
@@ -60,7 +60,7 @@
    "dist_ts_web/**/*",
    "assets/**/*",
    "cli.js",
-    "npmextra.json",
+    ".smartconfig.json",
    "readme.md"
  ],
  "browserslist": [
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/readme.md
+++ b/readme.md
@@ -58,13 +58,13 @@ For developers working on this library, please refer to the [UI Components Playb
 | **Core UI** | [`DeesButton`](#deesbutton), [`DeesButtonExit`](#deesbuttonexit), [`DeesButtonGroup`](#deesbuttongroup), [`DeesBadge`](#deesbadge), [`DeesChips`](#deeschips), [`DeesHeading`](#deesheading), [`DeesHint`](#deeshint), [`DeesIcon`](#deesicon), [`DeesLabel`](#deeslabel), [`DeesPanel`](#deespanel), [`DeesSearchbar`](#deessearchbar), [`DeesSpinner`](#deesspinner), [`DeesToast`](#deestoast), [`DeesWindowcontrols`](#deeswindowcontrols), [`DeesActionbar`](#deesactionbar) |
 | **Forms** | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputToggle`](#deesinputtoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputList`](#deesinputlist), [`DeesInputProfilepicture`](#deesinputprofilepicture), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesInputCode`](#deesinputcode), [`DeesFormSubmit`](#deesformsubmit) |
 | **App Shell (Layout)** | [`DeesAppui`](#deesappui-️), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiBottombar`](#deesappuibottombar), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
-| **Data Display** | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination) |
+| **Data Display** | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination), [`DeesStorageBrowser`](#deesstorgebrowser) |
 | **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) |
 | **Workspace / IDE** | [`DeesWorkspace`](#deesworkspace), [`DeesWorkspaceMonaco`](#deesworkspacemonaco), [`DeesWorkspaceDiffEditor`](#deesworkspacediffeditor), [`DeesWorkspaceFiletree`](#deesworkspacefiletree), [`DeesWorkspaceTerminal`](#deesworkspaceterminal), [`DeesWorkspaceTerminalPreview`](#deesworkspaceterminalpreview), [`DeesWorkspaceMarkdown`](#deesworkspacemarkdown), [`DeesWorkspaceMarkdownoutlet`](#deesworkspacemarkdownoutlet), [`DeesWorkspaceBottombar`](#deesworkspacebottombar) |
-| **Theming** | [`DeesTheme`](#deestheme) |
+| **Theming** | [`DeesTheme`](#deestheme), [`DeesUpdater`](#deesupdater) |
 | **Pre-built Templates** | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
 | **Shopping** | [`DeesShoppingProductcard`](#deesshoppingproductcard) |

@@ -1780,7 +1780,7 @@ interface ITileFolderItem {

 ## License and Legal Information

-This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./license) file.

 **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

@@ -1792,9 +1792,11 @@ Use of these trademarks must comply with Task Venture Capital GmbH's Trademark G

 ### Company Information

-Task Venture Capital GmbH
+Task Venture Capital GmbH  
 Registered at District Court Bremen HRB 35230 HB, Germany

 For any legal inquiries or further information, please contact us via email at hello@task.vc.

 By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
+
+By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-catalog',
-  version: '3.47.2',
+  version: '3.51.2',
  description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
--- a/ts_web/elements/00group-appui/dees-appui-appbar/component.ts
+++ b/ts_web/elements/00group-appui/dees-appui-appbar/component.ts
@@ -122,7 +122,7 @@ export class DeesAppuiBar extends DeesElement {
      >
        ${menuItem.iconName ? html`<dees-icon .icon="${`lucide:${menuItem.iconName}`}"></dees-icon>` : ''}
        ${menuItem.name}
-        ${hasSubmenu ? this.renderDropdown(menuItem.submenu, itemId, isActive) : ''}
+        ${hasSubmenu ? this.renderDropdown(menuItem.submenu!, itemId, isActive) : ''}
      </div>
    `;
  }
--- a/ts_web/elements/00group-appui/dees-appui-appbar/demo.ts
+++ b/ts_web/elements/00group-appui/dees-appui-appbar/demo.ts
@@ -75,21 +75,21 @@ export const demoFunc = () => {
      // Set up status toggle
      const statusButtons = elementArg.querySelectorAll('.status-toggle dees-button');
      statusButtons[0].addEventListener('click', () => {
-        appbar.user = { ...appbar.user, status: 'online' };
+        appbar.user = { ...appbar.user!, status: 'online' };
      });
      statusButtons[1].addEventListener('click', () => {
-        appbar.user = { ...appbar.user, status: 'busy' };
+        appbar.user = { ...appbar.user!, status: 'busy' };
      });
      statusButtons[2].addEventListener('click', () => {
-        appbar.user = { ...appbar.user, status: 'away' };
+        appbar.user = { ...appbar.user!, status: 'away' };
      });
      statusButtons[3].addEventListener('click', () => {
-        appbar.user = { ...appbar.user, status: 'offline' };
+        appbar.user = { ...appbar.user!, status: 'offline' };
      });
      
      // Set up window controls toggle
      const windowControlsButton = elementArg.querySelector('.window-controls-toggle dees-button');
-      windowControlsButton.addEventListener('click', () => {
+      windowControlsButton!.addEventListener('click', () => {
        appbar.showWindowControls = !appbar.showWindowControls;
      });
      
--- a/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts
+++ b/ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts
@@ -165,7 +165,7 @@ export class DeesAppuiMaincontent extends DeesElement {
    }
    // Tab selection is now handled by the dees-appui-tabs component
    // But we need to ensure the tabs component is ready
-    const tabsComponent = this.shadowRoot.querySelector('dees-appui-tabs') as DeesAppuiTabs;
+    const tabsComponent = this.shadowRoot!.querySelector('dees-appui-tabs') as DeesAppuiTabs;
    if (tabsComponent) {
      await tabsComponent.updateComplete;
    }
--- a/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts
+++ b/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts
@@ -46,7 +46,7 @@ export class DeesAppuiMainmenu extends DeesElement {
  accessor tabs: interfaces.IMenuItem[] = [];

  @property()
-  accessor selectedTab: interfaces.IMenuItem;
+  accessor selectedTab!: interfaces.IMenuItem;

  @property({ type: Boolean, reflect: true })
  accessor collapsed: boolean = false;
--- a/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
+++ b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
@@ -663,21 +663,21 @@ export class DeesAppuiTabs extends DeesElement {
  }

  private shouldShowIndicator(): boolean {
-    return this.selectedTab && this.showTabIndicator && this.tabs.includes(this.selectedTab);
+    return !!this.selectedTab && this.showTabIndicator && this.tabs.includes(this.selectedTab);
  }

  private getSelectedTabElement(): HTMLElement | null {
-    const selectedIndex = this.tabs.indexOf(this.selectedTab);
+    const selectedIndex = this.tabs.indexOf(this.selectedTab!);
    const isHorizontal = this.tabStyle === 'horizontal';
-    const selector = isHorizontal 
+    const selector = isHorizontal
      ? `.tabs-wrapper .tabsContainer .tab:nth-child(${selectedIndex + 1})`
      : `.vertical-wrapper .tabsContainer .tab:nth-child(${selectedIndex + 1})`;
-      
-    return this.shadowRoot.querySelector(selector);
+
+    return this.shadowRoot!.querySelector(selector);
  }

  private getIndicatorElement(): HTMLElement | null {
-    return this.shadowRoot.querySelector('.tabIndicator');
+    return this.shadowRoot!.querySelector('.tabIndicator');
  }

  private handleInitialTransition(indicator: HTMLElement): void {
@@ -695,7 +695,7 @@ export class DeesAppuiTabs extends DeesElement {
    const tabContent = tabElement.querySelector('.tab-content') as HTMLElement;
    if (!tabContent) return;

-    const wrapperRect = indicator.parentElement.getBoundingClientRect();
+    const wrapperRect = indicator.parentElement!.getBoundingClientRect();
    const contentRect = tabContent.getBoundingClientRect();
    
    const contentLeft = contentRect.left - wrapperRect.left;
@@ -707,7 +707,7 @@ export class DeesAppuiTabs extends DeesElement {
  }

  private updateVerticalIndicator(indicator: HTMLElement, tabElement: HTMLElement): void {
-    const tabsContainer = this.shadowRoot.querySelector('.vertical-wrapper .tabsContainer') as HTMLElement;
+    const tabsContainer = this.shadowRoot!.querySelector('.vertical-wrapper .tabsContainer') as HTMLElement;
    if (!tabsContainer) return;
    
    indicator.style.top = `${tabElement.offsetTop + tabsContainer.offsetTop}px`;
--- a/ts_web/elements/00group-appui/dees-appui/dees-appui.demo.ts
+++ b/ts_web/elements/00group-appui/dees-appui/dees-appui.demo.ts
@@ -12,7 +12,7 @@ class DemoDashboardView extends DeesElement {
  @state()
  accessor activated: boolean = false;

-  private ctx: IViewActivationContext;
+  private ctx!: IViewActivationContext;

  private statsTiles: IStatsTile[] = [
    {
@@ -267,7 +267,7 @@ class DemoSettingsView extends DeesElement {
  @state()
  accessor hasChanges: boolean = false;

-  private appui: DeesAppui;
+  private appui!: DeesAppui;

  onActivate(context: IViewActivationContext) {
    this.appui = context.appui as any;
--- a/ts_web/elements/00group-appui/dees-appui/dees-appui.ts
+++ b/ts_web/elements/00group-appui/dees-appui/dees-appui.ts
@@ -1037,7 +1037,7 @@ export class DeesAppui extends DeesElement {
    if (!config.mainMenu?.sections) return [];

    return config.mainMenu.sections.map((section) => ({
-      name: section.name,
+      name: section.name || '',
      items: section.views
        .map((viewId) => {
          const view = this.viewRegistry.get(viewId);
--- a/ts_web/elements/00group-appui/dees-appui/view.registry.ts
+++ b/ts_web/elements/00group-appui/dees-appui/view.registry.ts
@@ -173,7 +173,7 @@ export class ViewRegistry {
    }

    // Check for cached instance
-    let element = shouldCache ? this.instances.get(viewId) : undefined;
+    let element: HTMLElement | null | undefined = shouldCache ? this.instances.get(viewId) : undefined;

    if (element) {
      // Reuse cached instance - just show it
--- a/ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.demo.ts
+++ b/ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.demo.ts
@@ -1,5 +1,5 @@
 import { html, css } from '@design.estate/dees-element';
-import '../00group-button/dees-button/dees-button.js';
+import '../../00group-button/dees-button/dees-button.js';
 import '../../00group-layout/dees-panel/dees-panel.js';
 import '@design.estate/dees-wcctools/demotools';

--- a/ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.ts
+++ b/ts_web/elements/00group-appui/dees-mobilenavigation/dees-mobilenavigation.ts
@@ -301,15 +301,15 @@ export class DeesMobilenavigation extends DeesElement {
    `;
  }

-  private windowLayer: DeesWindowLayer;
+  private windowLayer!: DeesWindowLayer;

  /**
   * inits the show
   */
  public async show() {
    const domtools = await this.domtoolsPromise;
-    const main = this.shadowRoot.querySelector('.main');
-    
+    const main = this.shadowRoot!.querySelector('.main');
+
    // Create window layer first (it will get its own z-index)
    if (!this.windowLayer) {
      this.windowLayer = await DeesWindowLayer.createAndShow({
@@ -328,7 +328,7 @@ export class DeesMobilenavigation extends DeesElement {
    zIndexRegistry.register(this, this.mobileNavZIndex);

    await domtools.convenience.smartdelay.delayFor(10);
-    main.classList.add('show');
+    main!.classList.add('show');
  }

  /**
@@ -336,8 +336,8 @@ export class DeesMobilenavigation extends DeesElement {
   */
  public async hide() {
    const domtools = await this.domtoolsPromise;
-    const main = this.shadowRoot.querySelector('.main');
-    main.classList.remove('show');
+    const main = this.shadowRoot!.querySelector('.main');
+    main!.classList.remove('show');
    
    // Unregister from z-index registry
    zIndexRegistry.unregister(this);
--- a/ts_web/elements/00group-button/dees-button/dees-button.demo.ts
+++ b/ts_web/elements/00group-button/dees-button/dees-button.demo.ts
@@ -288,8 +288,8 @@ export const demoFunc = () => html`
      }
      
      if (dataBtn && output) {
-        dataBtn.addEventListener('clicked', (e: CustomEvent) => {
-          output.textContent = `Clicked: Secondary button with data: ${e.detail.data}`;
+        dataBtn.addEventListener('clicked', (e: Event) => {
+          output.textContent = `Clicked: Secondary button with data: ${(e as CustomEvent).detail.data}`;
        });
      }
      
@@ -322,9 +322,9 @@ export const demoFunc = () => html`
      const output = elementArg.querySelector('#form-output');
      
      if (form && output) {
-        form.addEventListener('formData', (e: CustomEvent) => {
-          output.innerHTML = '<strong>Form submitted with data:</strong><br>' + 
-            JSON.stringify(e.detail.data, null, 2);
+        form.addEventListener('formData', (e: Event) => {
+          output.innerHTML = '<strong>Form submitted with data:</strong><br>' +
+            JSON.stringify((e as CustomEvent).detail.data, null, 2);
        });
      }
      
--- a/ts_web/elements/00group-button/dees-button/dees-button.ts
+++ b/ts_web/elements/00group-button/dees-button/dees-button.ts
@@ -31,10 +31,10 @@ export class DeesButton extends DeesElement {
      return true;
    }
  })
-  accessor text: string;
+  accessor text!: string;

  @property()
-  accessor eventDetailData: string;
+  accessor eventDetailData!: string;

  @property({
    type: Boolean,
@@ -69,7 +69,7 @@ export class DeesButton extends DeesElement {
  accessor insideForm: boolean = false;

  @property({ type: String, reflect: true })
-  accessor icon: string;
+  accessor icon!: string;

  @property({ type: String, reflect: true })
  accessor iconPosition: 'left' | 'right' = 'left';
--- a/ts_web/elements/00group-chart/dees-chart-area/component.ts
+++ b/ts_web/elements/00group-chart/dees-chart-area/component.ts
--- a/ts_web/elements/00group-chart/dees-chart-area/demo.ts
+++ b/ts_web/elements/00group-chart/dees-chart-area/demo.ts
@@ -44,8 +44,8 @@ export const demoFunc = () => {
      // Get the chart elements
      const chartElement = elementArg.querySelector('#main-chart') as DeesChartArea;
      const connectionsChartElement = elementArg.querySelector('#connections-chart') as DeesChartArea;
-      let intervalId: number;
-      let connectionsIntervalId: number;
+      let intervalId: number | null;
+      let connectionsIntervalId: number | null;
      let currentDataset = 'system';

      // Y-axis formatters for different datasets
@@ -71,7 +71,7 @@ export const demoFunc = () => {

      // Generate initial data points for time window
      const generateInitialData = (baseValue: number, variance: number, interval: number = DATA_POINT_INTERVAL) => {
-        const data = [];
+        const data: Array<{ x: string; y: number }> = [];
        const now = Date.now();
        const pointCount = Math.floor(TIME_WINDOW / interval);
        
@@ -240,10 +240,10 @@ export const demoFunc = () => {
      // Switch dataset
      const switchDataset = (name: string) => {
        currentDataset = name;
-        const dataset = datasets[name];
+        const dataset = (datasets as Record<string, any>)[name];
        chartElement.label = dataset.label;
        chartElement.series = dataset.series;
-        chartElement.yAxisFormatter = formatters[name];
+        chartElement.yAxisFormatter = (formatters as Record<string, any>)[name];
        
        // Set appropriate y-axis scaling
        if (name === 'system') {
@@ -310,30 +310,11 @@ export const demoFunc = () => {
        connectionsLastUpdate = 0;
      };

-      // Wire up button click handlers
-      const buttons = elementArg.querySelectorAll('dees-button');
-      buttons.forEach(button => {
-        const text = button.textContent?.trim();
-        if (text === 'System Usage') {
-          button.addEventListener('click', () => switchDataset('system'));
-        } else if (text === 'Network Traffic') {
-          button.addEventListener('click', () => switchDataset('network'));
-        } else if (text === 'Sales Data') {
-          button.addEventListener('click', () => switchDataset('sales'));
-        } else if (text === 'Start Live') {
-          button.addEventListener('click', () => startRealtime());
-        } else if (text === 'Stop Live') {
-          button.addEventListener('click', () => stopRealtime());
-        } else if (text === 'Spike Values') {
-          button.addEventListener('click', () => randomizeData());
-        }
-      });
-      
      // Update button states based on current dataset
      const updateButtonStates = () => {
-        const buttons = elementArg.querySelectorAll('dees-button');
-        buttons.forEach(button => {
-          const text = button.textContent?.trim();
+        const allButtons = elementArg.querySelectorAll('dees-button');
+        allButtons.forEach((button: any) => {
+          const text = button.text?.trim();
          if (text === 'System Usage') {
            button.type = currentDataset === 'system' ? 'highlighted' : 'normal';
          } else if (text === 'Network Traffic') {
@@ -343,41 +324,38 @@ export const demoFunc = () => {
          }
        });
      };
-      
+
+      // Wire up button click handlers
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button: any) => {
+        const text = button.text?.trim();
+        if (text === 'System Usage') {
+          button.addEventListener('click', () => { switchDataset('system'); updateButtonStates(); });
+        } else if (text === 'Network Traffic') {
+          button.addEventListener('click', () => { switchDataset('network'); updateButtonStates(); });
+        } else if (text === 'Sales Data') {
+          button.addEventListener('click', () => { switchDataset('sales'); updateButtonStates(); });
+        } else if (text === 'Start Live') {
+          button.addEventListener('click', () => startRealtime());
+        } else if (text === 'Stop Live') {
+          button.addEventListener('click', () => stopRealtime());
+        } else if (text === 'Spike Values') {
+          button.addEventListener('click', () => randomizeData());
+        }
+      });
+
      // Configure main chart with rolling window
      chartElement.rollingWindow = TIME_WINDOW;
      chartElement.realtimeMode = false; // Will be enabled when starting live updates
      chartElement.yAxisScaling = 'percentage'; // Initial system dataset uses percentage
      chartElement.yAxisMax = 100;
      chartElement.autoScrollInterval = 1000; // Auto-scroll every second
-      
+
      // Set initial time window
      setTimeout(() => {
        chartElement.updateTimeWindow();
      }, 100);
      
-      // Update button states when dataset changes
-      const originalSwitchDataset = switchDataset;
-      const switchDatasetWithButtonUpdate = (name: string) => {
-        originalSwitchDataset(name);
-        updateButtonStates();
-      };
-      
-      // Replace switchDataset with the one that updates buttons
-      buttons.forEach(button => {
-        const text = button.textContent?.trim();
-        if (text === 'System Usage') {
-          button.removeEventListener('click', () => switchDataset('system'));
-          button.addEventListener('click', () => switchDatasetWithButtonUpdate('system'));
-        } else if (text === 'Network Traffic') {
-          button.removeEventListener('click', () => switchDataset('network'));
-          button.addEventListener('click', () => switchDatasetWithButtonUpdate('network'));
-        } else if (text === 'Sales Data') {
-          button.removeEventListener('click', () => switchDataset('sales'));
-          button.addEventListener('click', () => switchDatasetWithButtonUpdate('sales'));
-        }
-      });
-      
      // Initialize connections chart with data
      if (connectionsChartElement) {
        const initialConnectionsData = generateInitialData(previousValues.connections, 30, UPDATE_INTERVAL);
--- a/ts_web/elements/00group-chart/dees-chart-area/styles.ts
+++ b/ts_web/elements/00group-chart/dees-chart-area/styles.ts
@@ -4,57 +4,67 @@ export const chartAreaStyles = [
    cssManager.defaultStyles,
    css`
      :host {
+        display: block;
+        height: 400px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
-        font-weight: 400;
        font-size: 14px;
      }
-      .mainbox {
-        position: relative;
-        width: 100%;
-        height: 400px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 8px;
-        overflow: hidden;
-      }
-
-      .chartTitle {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        text-align: left;
-        padding: 16px 24px;
-        z-index: 10;
-        font-size: 14px;
-        font-weight: 500;
-        letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+      dees-tile {
+        height: 100%;
      }
      .chartContainer {
        position: absolute;
-        top: 0px;
-        left: 0px;
-        bottom: 0px;
-        right: 0px;
-        padding: 44px 16px 16px 0px;
-        overflow: hidden;
-        background: transparent; /* Ensure container doesn't override chart background */
+        inset: 0;
      }
-      
-      /* ApexCharts theme overrides */
-      .apexcharts-canvas {
-        background: transparent !important;
+      .statsBar {
+        height: 32px;
+        padding: 0 16px;
+        display: flex;
+        align-items: center;
+        gap: 24px;
+        width: 100%;
+        box-sizing: border-box;
      }
-      
-      .apexcharts-inner {
-        background: transparent !important;
+      .statsSeries {
+        display: flex;
+        align-items: center;
+        gap: 8px;
      }
-      
-      .apexcharts-graphical {
-        background: transparent !important;
+      .statsSeries + .statsSeries {
+        padding-left: 24px;
+        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+      .statsColor {
+        width: 8px;
+        height: 8px;
+        border-radius: 2px;
+        flex-shrink: 0;
+      }
+      .statsName {
+        font-weight: 500;
+        font-size: 11px;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+        margin-right: 4px;
+      }
+      .statsItem {
+        font-size: 11px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+      }
+      .statsItem strong {
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+      }
+      .lw-tooltip {
+        position: absolute;
+        z-index: 100;
+        pointer-events: none;
+        padding: 12px;
+        border-radius: 6px;
+        border: 1px solid;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        font-size: 12px;
+        box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+        min-width: 140px;
      }
    `,
  ];
-
--- a/ts_web/elements/00group-chart/dees-chart-area/template.ts
+++ b/ts_web/elements/00group-chart/dees-chart-area/template.ts
@@ -3,10 +3,22 @@ import type { DeesChartArea } from './component.js';

 export const renderChartArea = (component: DeesChartArea): TemplateResult => {
      return html`
-        <div class="mainbox">
-          <div class="chartTitle">${component.label}</div>
+        <dees-tile .heading=${component.label}>
          <div class="chartContainer"></div>
-        </div>
+          ${component.seriesStats.length > 0 ? html`
+            <div slot="footer" class="statsBar">
+              ${component.seriesStats.map(s => html`
+                <div class="statsSeries">
+                  <span class="statsColor" style="background:${s.color}"></span>
+                  <span class="statsName">${s.name}</span>
+                  <span class="statsItem">latest <strong>${component.yAxisFormatter(s.latest)}</strong></span>
+                  <span class="statsItem">min <strong>${component.yAxisFormatter(s.min)}</strong></span>
+                  <span class="statsItem">max <strong>${component.yAxisFormatter(s.max)}</strong></span>
+                  <span class="statsItem">avg <strong>${component.yAxisFormatter(s.avg)}</strong></span>
+                </div>
+              `)}
+            </div>
+          ` : ''}
+        </dees-tile>
      `;
-  
 };
--- a/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts
+++ b/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.demo.ts
@@ -8,8 +8,8 @@ export const demoFunc = () => {
      // Get the log elements
      const structuredLog = elementArg.querySelector('#structured-log') as DeesChartLog;
      const rawLog = elementArg.querySelector('#raw-log') as DeesChartLog;
-      let structuredIntervalId: number;
-      let rawIntervalId: number;
+      let structuredIntervalId: number | null;
+      let rawIntervalId: number | null;

      const serverSources = ['Server', 'Database', 'API', 'Auth', 'Cache', 'Queue', 'WebSocket', 'Scheduler'];

@@ -174,7 +174,7 @@ export const demoFunc = () => {
      // Wire up button click handlers
      const buttons = elementArg.querySelectorAll('dees-button');
      buttons.forEach(button => {
-        const text = button.textContent?.trim();
+        const text = (button as any).text?.trim();
        switch (text) {
          case 'Add Structured Log':
            button.addEventListener('click', () => generateRandomLog());
--- a/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
+++ b/ts_web/elements/00group-chart/dees-chart-log/dees-chart-log.ts
@@ -13,6 +13,7 @@ import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-chart-log.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
 import { DeesServiceLibLoader, type IXtermSearchAddon, CDN_BASE, CDN_VERSIONS } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';

 // Type imports (no runtime overhead)
 import type { Terminal } from 'xterm';
@@ -103,30 +104,20 @@ export class DeesChartLog extends DeesElement {
    css`
      :host {
        display: block;
+        height: 400px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
      }

-      .mainbox {
-        position: relative;
-        width: 100%;
-        height: 400px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 8px;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
+      dees-tile {
+        height: 100%;
      }

      .header {
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
        padding: 8px 12px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        display: flex;
        align-items: center;
        gap: 12px;
-        flex-shrink: 0;
        flex-wrap: wrap;
      }

@@ -241,10 +232,10 @@ export class DeesChartLog extends DeesElement {
      }

      .terminal-container {
-        flex: 1;
+        position: absolute;
+        inset: 0;
        overflow: hidden;
        padding: 8px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
      }

      .terminal-container .xterm {
@@ -262,14 +253,15 @@ export class DeesChartLog extends DeesElement {
      }

      .metrics-bar {
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        padding: 6px 12px;
+        height: 32px;
+        padding: 0 12px;
        display: flex;
+        align-items: center;
        gap: 16px;
        font-size: 11px;
        font-weight: 500;
-        flex-shrink: 0;
+        width: 100%;
+        box-sizing: border-box;
      }

      .metric {
@@ -323,8 +315,8 @@ export class DeesChartLog extends DeesElement {

  public render(): TemplateResult {
    return html`
-      <div class="mainbox">
-        <div class="header">
+      <dees-tile .heading=${this.label}>
+        <div slot="header" class="header">
          <div class="title">${this.label}</div>
          <div class="search-box">
            <input
@@ -367,7 +359,7 @@ export class DeesChartLog extends DeesElement {

        ${this.showMetrics
          ? html`
-              <div class="metrics-bar">
+              <div slot="footer" class="metrics-bar">
                <span class="metric error">errors: ${this.metrics.error}</span>
                <span class="metric warn">warns: ${this.metrics.warn}</span>
                <span class="metric info">info: ${this.metrics.info}</span>
@@ -377,7 +369,7 @@ export class DeesChartLog extends DeesElement {
              </div>
            `
          : ''}
-      </div>
+      </dees-tile>
    `;
  }

--- a/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts
+++ b/ts_web/elements/00group-dataview/dees-dataview-codebox/dees-dataview-codebox.ts
@@ -17,6 +17,7 @@ import * as smartstring from '@push.rocks/smartstring';
 import * as domtools from '@design.estate/dees-domtools';
 import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { DeesServiceLibLoader } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';

 declare global {
  interface HTMLElementTagNameMap {
@@ -55,32 +56,20 @@ export class DeesDataviewCodebox extends DeesElement {
          height: 100%;
          box-sizing: border-box;
        }
-        .mainbox {
-          position: relative;
-          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
-          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
-          background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-          border-radius: 6px;
-          overflow: hidden;
-          display: flex;
-          flex-direction: column;
+        dees-tile {
          height: 100%;
-          box-sizing: border-box;
+          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
        }

        .appbar {
-          position: relative;
          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-          background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
-          border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
          height: 32px;
          display: flex;
          font-size: 13px;
          line-height: 32px;
          justify-content: center;
          align-items: center;
-          flex-shrink: 0;
+          padding: 0 16px;
        }

        .appbar .fileName {
@@ -91,18 +80,16 @@ export class DeesDataviewCodebox extends DeesElement {
        }

        .bottomBar {
-          position: relative;
          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
-          background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
-          border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
          height: 28px;
-          font-size: 12px;
+          font-size: 11px;
          line-height: 28px;
          display: flex;
          justify-content: flex-end;
-          align-items: stretch;
-          overflow: hidden;
-          flex-shrink: 0;
+          align-items: center;
+          padding: 0 16px;
+          width: 100%;
+          box-sizing: border-box;
        }

        .spacesLabel {
@@ -201,9 +188,8 @@ export class DeesDataviewCodebox extends DeesElement {
          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
        }
      </style>
-      <div
-        class="mainbox"
-        @contextmenu="${(eventArg) => {
+      <dees-tile
+        @contextmenu="${(eventArg: MouseEvent) => {
          DeesContextmenu.openContextMenuWithOptions(eventArg, [
            {
              name: 'About',
@@ -215,7 +201,7 @@ export class DeesDataviewCodebox extends DeesElement {
          ]);
        }}"
      >
-        <div class="appbar">
+        <div slot="header" class="appbar">
          <div class="fileName">index.ts</div>
        </div>
        <div class="codegrid">
@@ -230,18 +216,18 @@ export class DeesDataviewCodebox extends DeesElement {
          </div>
          <pre><code></code></pre>
        </div>
-        <div class="bottomBar">
+        <div slot="footer" class="bottomBar">
          <div class="spacesLabel">Spaces: 2</div>
          <div class="languageLabel">${this.progLang}</div>
        </div>
-      </div>
+      </dees-tile>
    `;
  }

  private codeToDisplayStore = '';
  private highlightJs: HLJSApi | null = null;

-  public async updated(_changedProperties) {
+  public async updated(_changedProperties: Map<string, any>) {
    super.updated(_changedProperties);
    console.log('highlighting now');
    console.log(this.childNodes);
@@ -267,11 +253,11 @@ export class DeesDataviewCodebox extends DeesElement {
      this.highlightJs = await DeesServiceLibLoader.getInstance().loadHighlightJs();
    }

-    const localCodeNode = this.shadowRoot.querySelector('code');
+    const localCodeNode = this.shadowRoot!.querySelector('code');
    const highlightedHtml = this.highlightJs.highlight(this.codeToDisplayStore, {
      language: this.progLang,
      ignoreIllegals: true,
    });
-    localCodeNode.innerHTML = highlightedHtml.value;
+    localCodeNode!.innerHTML = highlightedHtml.value;
  }
 }
--- a/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.demo.ts
+++ b/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.demo.ts
@@ -50,6 +50,7 @@ export const demoFunc = () => html` <style>
          .statusObject=${{
            id: '1',
            name: 'API Gateway Service',
+            lastUpdated: Date.now(),
            combinedStatus: 'ok',
            combinedStatusText: 'All systems operational',
            details: [
@@ -89,6 +90,7 @@ export const demoFunc = () => html` <style>
          .statusObject=${{
            id: '2',
            name: 'PostgreSQL Cluster',
+            lastUpdated: Date.now() - 3600000,
            combinedStatus: 'partly_ok',
            combinedStatusText: 'Minor issues detected',
            details: [
@@ -128,6 +130,7 @@ export const demoFunc = () => html` <style>
          .statusObject=${{
            id: '3',
            name: 'CI/CD Pipeline',
+            lastUpdated: Date.now() - 86400000,
            combinedStatus: 'not_ok',
            combinedStatusText: 'Build failure',
            details: [
--- a/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts
+++ b/ts_web/elements/00group-dataview/dees-dataview-statusobject/dees-dataview-statusobject.ts
@@ -17,6 +17,7 @@ import {
 import * as tsclass from '@tsclass/tsclass';
 import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';

 declare global {
  interface HTMLElementTagNameMap {
@@ -29,7 +30,7 @@ export class DeesDataviewStatusobject extends DeesElement {
  public static demo = demoFunc;
  public static demoGroups = ['Data View'];

-  @property({ type: Object }) accessor statusObject: tsclass.code.IStatusObject;
+  @property({ type: Object }) accessor statusObject!: tsclass.code.IStatusObject;

  public static styles = [
    themeDefaultStyles,
@@ -40,35 +41,28 @@ export class DeesDataviewStatusobject extends DeesElement {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
      }

-      .mainbox {
-        border-radius: 8px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        box-shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
-        min-height: 48px;
+      dees-tile {
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
        cursor: default;
-        overflow: hidden;
      }

      .heading {
-        display: grid;
+        display: flex;
        align-items: center;
-        grid-template-columns: 48px auto 100px;
-        height: 56px;
+        gap: 8px;
+        height: 32px;
        padding: 0 16px;
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }

      h1 {
        display: block;
-        margin: 0px;
-        padding: 0px 12px;
+        margin: 0;
+        padding: 0;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.01em;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        flex: 1;
      }

      .statusdot {
@@ -82,13 +76,13 @@ export class DeesDataviewStatusobject extends DeesElement {
      }

      .copyMain {
-        font-size: 12px;
+        font-size: 11px;
        font-weight: 500;
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        text-align: center;
-        padding: 6px 12px;
-        border-radius: 6px;
+        padding: 4px 10px;
+        border-radius: 4px;
        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
        user-select: none;
        cursor: pointer;
@@ -122,57 +116,86 @@ export class DeesDataviewStatusobject extends DeesElement {
      }

      .detail {
-        min-height: 60px;
+        display: flex;
        align-items: center;
-        display: grid;
-        grid-template-columns: 48px auto;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 14.9%)')};
+        gap: 10px;
+        height: 36px;
+        padding: 0 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')};
        transition: background-color 0.15s ease;
-        padding-right: 16px;
        cursor: context-menu;
      }

-      .detail:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+      .detail:last-child {
+        border-bottom: none;
      }

-      .detail:active {
-        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+      .detail:hover {
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.04)', 'hsl(217.2 91.2% 59.8% / 0.06)')};
+      }
+
+      .detail .statusdot {
+        margin: 0;
+        flex-shrink: 0;
      }

      .detail .detailsText {
-        padding: 12px;
-        word-break: break-all;
+        display: flex;
+        align-items: baseline;
+        flex: 1;
+        min-width: 0;
      }

      .detail .detailsText .label {
        font-size: 12px;
        font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}
-        margin-bottom: 2px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
        letter-spacing: -0.01em;
+        white-space: nowrap;
+        flex-shrink: 0;
      }

      .detail .detailsText .value {
-        font-size: 14px;
+        font-size: 13px;
        font-family: 'Intel One Mono', 'Geist Mono', monospace;
        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
-        line-height: 1.5;
+        margin-left: auto;
+        text-align: right;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .bottomBar {
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        height: 28px;
+        font-size: 11px;
+        line-height: 28px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding: 0 16px;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      .bottomBar .statusLabel {
+        font-weight: 500;
      }
    `,
  ];

  render(): TemplateResult {
    return html`
-      <div class="mainbox">
-        <div class="heading">
+      <dees-tile>
+        <div slot="header" class="heading">
          <div class="statusdot ${this.statusObject?.combinedStatus}"></div>
          <h1>${this.statusObject?.name || 'No status object assigned'}</h1>
          <div class="copyMain" @click=${this.handleCopyAsJson}>Copy JSON</div>
        </div>
        ${this.statusObject?.details?.map((detailArg) => {
          return html`
-            <div 
+            <div
              class="detail"
              @contextmenu=${(event: MouseEvent) => {
                event.preventDefault();
@@ -202,14 +225,19 @@ export class DeesDataviewStatusobject extends DeesElement {
              }}
            >
              <div class="statusdot ${detailArg.status}"></div>
-              <div class="detailsText">
-                <div class="label">${detailArg.name}</div>
-                <div class="value">${detailArg.value}</div>
-              </div>
+              <span class="detailsText">
+                <span class="label">${detailArg.name}</span>
+                <span class="value">${detailArg.value}</span>
+              </span>
            </div>
          `;
        })}
-      </div>
+        <div slot="footer" class="bottomBar">
+          <div class="statusLabel">${this.statusObject?.lastUpdated
+            ? `Last updated: ${new Date(this.statusObject.lastUpdated).toLocaleString()}`
+            : ''}</div>
+        </div>
+      </dees-tile>
    `;
  }

@@ -232,7 +260,7 @@ export class DeesDataviewStatusobject extends DeesElement {
      await navigator.clipboard.writeText(JSON.stringify(this.statusObject, null, 2));
      
      // Show feedback
-      const button = this.shadowRoot.querySelector('.copyMain') as HTMLElement;
+      const button = this.shadowRoot!.querySelector('.copyMain') as HTMLElement;
      const originalText = button.textContent;
      button.textContent = 'Copied!';
      
--- a/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts
+++ b/ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.ts
@@ -18,6 +18,7 @@ import '../../00group-utility/dees-icon/dees-icon.js';
 import '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
 import '../../00group-button/dees-button/dees-button.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';

 declare global {
  interface HTMLElementTagNameMap {
@@ -179,22 +180,12 @@ export class DeesStatsGrid extends DeesElement {
        width: 100%;
      }

-      /* Tile Base Styles */
-      .stats-tile {
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
-        border-radius: var(--border-radius);
-        padding: var(--tile-padding);
+      /* Tile Base Styles — frame provided by dees-tile, hover via ::part */
+      .stats-tile::part(outer) {
        transition: all var(--transition-duration) ease;
-        cursor: default;
-        position: relative;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
      }

-      .stats-tile:hover {
-        background: ${cssManager.bdTheme('#fafafa', '#0d0d0d')};
+      .stats-tile:hover::part(outer) {
        border-color: ${cssManager.bdTheme('#d0d0d0', '#2a2a2a')};
      }

@@ -202,17 +193,18 @@ export class DeesStatsGrid extends DeesElement {
        cursor: pointer;
      }

-      .stats-tile.clickable:hover {
+      .stats-tile.clickable:hover::part(outer) {
        transform: translateY(-1px);
        box-shadow: 0 2px 6px ${cssManager.bdTheme('rgba(0,0,0,0.03)', 'rgba(0,0,0,0.15)')};
      }

-      /* Tile Header */
+      /* Tile Header — slotted into dees-tile header */
      .tile-header {
        display: flex;
        justify-content: space-between;
-        align-items: flex-start;
-        margin-bottom: var(--header-spacing);
+        align-items: center;
+        padding: 0 12px;
+        height: 28px;
        flex-shrink: 0;
      }

@@ -232,12 +224,12 @@ export class DeesStatsGrid extends DeesElement {
        flex-shrink: 0;
      }

-      /* Tile Content */
+      /* Tile Content — slotted into dees-tile content area */
      .tile-content {
-        min-height: var(--content-min-height);
        display: flex;
        flex-direction: column;
-        flex: 1;
+        padding: 12px;
+        min-height: var(--content-min-height);
      }

      .tile-value {
@@ -261,9 +253,10 @@ export class DeesStatsGrid extends DeesElement {
      .tile-description {
        font-size: var(--label-font-size);
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        margin-top: var(--description-spacing);
        letter-spacing: -0.01em;
-        flex-shrink: 0;
+        padding: 0 12px;
+        height: 24px;
+        line-height: 24px;
      }

      /* Gauge Styles */
@@ -878,31 +871,31 @@ export class DeesStatsGrid extends DeesElement {

  private renderTile(tile: IStatsTile): TemplateResult {
    const hasActions = tile.actions && tile.actions.length > 0;
-    const clickable = hasActions && tile.actions.length === 1;
+    const clickable = hasActions && tile.actions!.length === 1;
    const columnSpan = tile.columnSpan && tile.columnSpan > 1 ? tile.columnSpan : undefined;

    return html`
-      <div
+      <dees-tile
        class="stats-tile ${clickable ? 'clickable' : ''}"
        style="${columnSpan ? `grid-column: span ${columnSpan}` : ''}"
        @click=${clickable ? () => this.handleTileAction(tile.actions![0], tile) : undefined}
        @contextmenu=${hasActions ? (e: MouseEvent) => this.showContextMenu(e, tile) : undefined}
      >
-        <div class="tile-header">
+        <div slot="header" class="tile-header">
          <h3 class="tile-title">${tile.title}</h3>
          ${tile.icon ? html`
            <dees-icon class="tile-icon" .icon=${tile.icon} size="small"></dees-icon>
          ` : ''}
        </div>
-        
+
        <div class="tile-content">
          ${this.renderTileContent(tile)}
        </div>
-        
+
        ${tile.description && tile.type !== 'trend' ? html`
-          <div class="tile-description">${tile.description}</div>
+          <div slot="footer" class="tile-description">${tile.description}</div>
        ` : ''}
-      </div>
+      </dees-tile>
    `;
  }

--- a/ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-browser.demo.ts
+++ b/ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-browser.demo.ts
@@ -0,0 +1,156 @@
+import { html } from '@design.estate/dees-element';
+import type { IStorageDataProvider, IStorageObject } from './interfaces.js';
+import './dees-storage-browser.js';
+
+// Mock in-memory storage data provider for demo purposes
+class MockStorageDataProvider implements IStorageDataProvider {
+  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 Storage 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: IStorageObject[]; prefixes: string[] }> {
+    const pfx = prefix || '';
+    const objects: IStorageObject[] = [];
+    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-storage-browser
+      .dataProvider=${new MockStorageDataProvider()}
+      .bucketName=${'demo-bucket'}
+    ></dees-storage-browser>
+  </div>
+`;
--- a/ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-browser.ts
+++ b/ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-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-storage-browser.demo.js';
+import type { IStorageDataProvider, IStorageChangeEvent } from './interfaces.js';
+import './dees-storage-columns.js';
+import './dees-storage-keys.js';
+import './dees-storage-preview.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-storage-browser': DeesStorageBrowser;
+  }
+}
+
+type TViewType = 'columns' | 'keys';
+
+@customElement('dees-storage-browser')
+export class DeesStorageBrowser extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Data View'];
+
+  @property({ type: Object })
+  public accessor dataProvider: IStorageDataProvider | 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: IStorageChangeEvent) => 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: IStorageChangeEvent) => {
+        this.handleChange(event);
+      });
+      this.isStreamConnected = true;
+    } catch (error) {
+      console.warn('[StorageBrowser] 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: IStorageChangeEvent) {
+    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-storage-columns
+                    .dataProvider=${this.dataProvider}
+                    .bucketName=${this.bucketName}
+                    .currentPrefix=${this.currentPrefix}
+                    .refreshKey=${this.refreshKey}
+                    @key-selected=${this.handleKeySelected}
+                    @navigate=${this.handleNavigate}
+                  ></dees-storage-columns>
+                `
+              : html`
+                  <dees-storage-keys
+                    .dataProvider=${this.dataProvider}
+                    .bucketName=${this.bucketName}
+                    .currentPrefix=${this.currentPrefix}
+                    .refreshKey=${this.refreshKey}
+                    @key-selected=${this.handleKeySelected}
+                    @navigate=${this.handleNavigate}
+                  ></dees-storage-keys>
+                `}
+          </div>
+
+          ${this.selectedKey
+            ? html`
+                <div
+                  class="resize-divider ${this.isResizingPreview ? 'active' : ''}"
+                  @mousedown=${this.startPreviewResize}
+                ></div>
+                <div class="preview-panel">
+                  <dees-storage-preview
+                    .dataProvider=${this.dataProvider}
+                    .bucketName=${this.bucketName}
+                    .objectKey=${this.selectedKey}
+                    @object-deleted=${this.handleObjectDeleted}
+                  ></dees-storage-preview>
+                </div>
+              `
+            : ''}
+        </div>
+      </div>
+    `;
+  }
+}
--- a/ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-columns.ts
+++ b/ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-columns.ts
--- a/ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-keys.ts
+++ b/ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-keys.ts
--- a/ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-preview.ts
+++ b/ts_web/elements/00group-dataview/dees-storage-browser/dees-storage-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 { IStorageDataProvider } from './interfaces.js';
+import { formatSize, getFileName } from './utilities.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-storage-preview': DeesStoragePreview;
+  }
+}
+
+@customElement('dees-storage-preview')
+export class DeesStoragePreview extends DeesElement {
+  @property({ type: Object })
+  public accessor dataProvider: IStorageDataProvider | 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>
+    `;
+  }
+}
--- a/ts_web/elements/00group-dataview/dees-storage-browser/index.ts
+++ b/ts_web/elements/00group-dataview/dees-storage-browser/index.ts
@@ -0,0 +1,6 @@
+export * from './dees-storage-browser.js';
+export * from './dees-storage-columns.js';
+export * from './dees-storage-keys.js';
+export * from './dees-storage-preview.js';
+export * from './interfaces.js';
+export { formatSize, formatCount, getFileName, validateMove, getParentPrefix, getContentType, getDefaultContent, getPathSegments } from './utilities.js';
--- a/ts_web/elements/00group-dataview/dees-storage-browser/interfaces.ts
+++ b/ts_web/elements/00group-dataview/dees-storage-browser/interfaces.ts
@@ -0,0 +1,37 @@
+/**
+ * Storage Data Provider interface - implement this to connect the storage browser to your backend
+ */
+
+export interface IStorageObject {
+  key: string;
+  size?: number;
+  lastModified?: string;
+  isPrefix?: boolean;
+}
+
+export interface IStorageChangeEvent {
+  type: 'add' | 'modify' | 'delete';
+  key: string;
+  bucket: string;
+  size?: number;
+  lastModified?: Date;
+}
+
+export interface IStorageDataProvider {
+  listObjects(bucket: string, prefix?: string, delimiter?: string): Promise<{ objects: IStorageObject[]; 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: IStorageObject[];
+  prefixes: string[];
+  selectedItem: string | null;
+  width: number;
+}
--- a/ts_web/elements/00group-dataview/dees-storage-browser/utilities.ts
+++ b/ts_web/elements/00group-dataview/dees-storage-browser/utilities.ts
@@ -0,0 +1,120 @@
+/**
+ * Shared utilities for Storage 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;
+}
--- a/ts_web/elements/00group-dataview/dees-table/dees-table.ts
+++ b/ts_web/elements/00group-dataview/dees-table/dees-table.ts
@@ -15,6 +15,7 @@ import {
 } from './data.js';
 import { compileLucenePredicate } from './lucene.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';

 export type { Column, ITableAction, ITableActionDataArg, TDisplayFunction } from './types.js';

@@ -52,12 +53,12 @@ export class DeesTable<T> extends DeesElement {
  @property({
    type: String,
  })
-  accessor key: string;
+  accessor key!: string;

  @property({
    type: String,
  })
-  accessor label: string;
+  accessor label!: string;

  @property({
    type: Boolean,
@@ -83,7 +84,7 @@ export class DeesTable<T> extends DeesElement {
    type: String,
    reflect: true,
  })
-  accessor dataName: string;
+  accessor dataName!: string;


  @property({
@@ -127,7 +128,7 @@ export class DeesTable<T> extends DeesElement {
  @property({
    type: Object,
  })
-  accessor selectedDataRow: T;
+  accessor selectedDataRow!: T;

  @property({
    type: Array,
@@ -221,9 +222,8 @@ export class DeesTable<T> extends DeesElement {
    );
    (this as any)._lastViewData = viewData;
    return html`
-      <div class="mainbox">
-        <!-- the heading part -->
-        <div class="header">
+      <dees-tile>
+        <div slot="header" class="header">
          <div class="headingContainer">
            <div class="heading heading1">${this.label || this.heading1}</div>
            <div class="heading heading2">${this.heading2}</div>
@@ -359,7 +359,7 @@ export class DeesTable<T> extends DeesElement {
                      if (elementArg.tagName === 'TR') {
                        return elementArg;
                      } else {
-                        return getTr(elementArg.parentElement);
+                        return getTr(elementArg.parentElement!);
                      }
                    };
                    return html`
@@ -393,8 +393,8 @@ export class DeesTable<T> extends DeesElement {
                        }}
                        @drop=${async (eventArg: DragEvent) => {
                          eventArg.preventDefault();
-                          const newFiles = [];
-                          for (const file of Array.from(eventArg.dataTransfer.files)) {
+                          const newFiles: File[] = [];
+                          for (const file of Array.from(eventArg.dataTransfer!.files)) {
                            this.files.push(file);
                            newFiles.push(file);
                            this.requestUpdate();
@@ -496,7 +496,7 @@ export class DeesTable<T> extends DeesElement {
              </div>
            `
          : html` <div class="noDataSet">No data set!</div> `}
-        <div class="footer">
+        <div slot="footer" class="footer">
          <div class="tableStatistics">
            ${this.data.length} ${this.dataName || 'data rows'} (total) |
            ${this.selectedDataRow ? '# ' + `${this.data.indexOf(this.selectedDataRow) + 1}` : `No`}
@@ -528,7 +528,7 @@ export class DeesTable<T> extends DeesElement {
            })}
          </div>
        </div>
-      </div>
+      </dees-tile>
    `;
  }

@@ -548,8 +548,8 @@ export class DeesTable<T> extends DeesElement {
          type: ['header'],
          actionFunc: async () => {
            console.log('open search');
-            const searchGrid = this.shadowRoot.querySelector('.searchGrid');
-            searchGrid.classList.toggle('hidden');
+            const searchGrid = this.shadowRoot!.querySelector('.searchGrid');
+            searchGrid!.classList.toggle('hidden');
          }
        });
        console.log(this.dataActions);
@@ -609,7 +609,7 @@ export class DeesTable<T> extends DeesElement {
    const domtools = await this.domtoolsPromise;
    await domtools.convenience.smartdelay.delayFor(0);
    // Get the table element
-    const table = this.shadowRoot.querySelector('table');
+    const table = this.shadowRoot!.querySelector('table');
    if (!table) return;

    // Get the first row's cells to measure the widths
@@ -718,7 +718,7 @@ export class DeesTable<T> extends DeesElement {
    if (!this._rowIdMap.has(key)) {
      this._rowIdMap.set(key, String(++this._rowIdCounter));
    }
-    return this._rowIdMap.get(key);
+    return this._rowIdMap.get(key)!;
  }

  private isRowSelected(row: T): boolean {
@@ -818,7 +818,7 @@ export class DeesTable<T> extends DeesElement {
        input.blur();
      }
      if (saveArg) {
-        itemArg[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
+        (itemArg as any)[key] = input.value as any; // Convert string to T (you might need better type casting depending on your data structure)
        this.changeSubject.next(this);
      }
      input.remove();
--- a/ts_web/elements/00group-dataview/dees-table/styles.ts
+++ b/ts_web/elements/00group-dataview/dees-table/styles.ts
@@ -12,17 +12,11 @@ export const tableStyles: CSSResult[] = [
        width: 100%;
      }

-      .mainbox {
+      dees-tile {
        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
        font-family: ${cssGeistFontFamily};
        font-weight: 400;
        font-size: 14px;
-        display: block;
-        width: 100%;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 8px;
-        overflow: hidden;
        cursor: default;
      }

@@ -30,30 +24,31 @@ export const tableStyles: CSSResult[] = [
        display: flex;
        justify-content: space-between;
        align-items: center;
-        padding: 16px 24px;
-        min-height: 64px;
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        padding: 0 16px;
+        height: 40px;
      }

      .headingContainer {
        flex: 1;
+        display: flex;
+        align-items: baseline;
      }

      .heading {
-        line-height: 1.5;
+        line-height: 1;
      }

      .heading1 {
-        font-size: 18px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        letter-spacing: -0.025em;
-      }
-      
-      .heading2 {
        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        letter-spacing: -0.01em;
+      }
+
+      .heading2 {
+        font-size: 12px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        margin-top: 2px;
+        margin-left: 8px;
      }

      .headingSeparation {
@@ -70,14 +65,14 @@ export const tableStyles: CSSResult[] = [
      .headerAction {
        display: flex;
        align-items: center;
-        gap: 6px;
-        padding: 6px 12px;
-        font-size: 14px;
+        gap: 4px;
+        padding: 4px 10px;
+        font-size: 12px;
        font-weight: 500;
        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
        background: transparent;
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
+        border-radius: 4px;
        cursor: pointer;
        transition: all 0.15s ease;
      }
@@ -199,7 +194,7 @@ export const tableStyles: CSSResult[] = [
      }
      
      tbody tr:hover {
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.5)', 'hsl(0 0% 14.9% / 0.5)')};
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.06)', 'hsl(217.2 91.2% 59.8% / 0.08)')};
      }
      
      /* Column hover effect for better traceability */
@@ -214,7 +209,7 @@ export const tableStyles: CSSResult[] = [
        bottom: 0;
        left: 0;
        right: 0;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.3)', 'hsl(0 0% 14.9% / 0.3)')};
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.04)', 'hsl(217.2 91.2% 59.8% / 0.05)')};
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
@@ -238,15 +233,19 @@ export const tableStyles: CSSResult[] = [
        border-top: none;
      }
      
-      :host([show-grid]) th:first-child,
-      :host([show-grid]) td:first-child {
-        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-      }
-      
      :host([show-grid]) tbody tr:first-child td {
        border-top: none;
      }

+      /* Remove edge borders that would double with tile frame */
+      :host([show-grid]) th:last-child,
+      :host([show-grid]) td:last-child {
+        border-right: none;
+      }
+      :host([show-grid]) tbody tr:last-child td {
+        border-bottom: none;
+      }
+
      /* Sticky Actions column (right pinned) */
      thead th.actionsCol,
      tbody td.actionsCol {
@@ -261,7 +260,7 @@ export const tableStyles: CSSResult[] = [
      }
      
      tbody tr.selected {
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.12)')};
      }

      tbody tr.hasAttachment {
@@ -269,10 +268,11 @@ export const tableStyles: CSSResult[] = [
      }

      th {
-        height: 48px;
-        padding: 12px 24px;
+        height: 36px;
+        padding: 8px 16px;
        text-align: left;
        font-weight: 500;
+        font-size: 12px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
        letter-spacing: -0.01em;
      }
@@ -282,8 +282,9 @@ export const tableStyles: CSSResult[] = [
      }
      
      td {
-        padding: 12px 24px;
+        padding: 8px 16px;
        vertical-align: middle;
+        font-size: 13px;
        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
      }
      
@@ -293,18 +294,23 @@ export const tableStyles: CSSResult[] = [
      
      th:first-child,
      td:first-child {
-        padding-left: 24px;
+        padding-left: 16px;
      }
      
      th:last-child,
      td:last-child {
-        padding-right: 24px;
+        padding-right: 16px;
      }
      
      :host([show-vertical-lines]) th:last-child,
      :host([show-vertical-lines]) td:last-child {
        border-right: none;
      }
+
+      /* Default bottom border on last row removed — tile frame handles it */
+      :host(:not([show-horizontal-lines])) tbody tr:last-child {
+        border-bottom: none;
+      }
      
      .innerCellContainer {
        position: relative;
@@ -389,12 +395,12 @@ export const tableStyles: CSSResult[] = [
        display: flex;
        align-items: center;
        justify-content: space-between;
-        height: 52px;
-        padding: 0 24px;
-        font-size: 14px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        height: 32px;
+        padding: 0 16px;
+        font-size: 11px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+        width: 100%;
+        box-sizing: border-box;
      }

      .tableStatistics {
@@ -409,9 +415,10 @@ export const tableStyles: CSSResult[] = [
      .footerActions .footerAction {
        display: flex;
        align-items: center;
-        gap: 6px;
-        padding: 6px 12px;
+        gap: 4px;
+        padding: 2px 8px;
        font-weight: 500;
+        font-size: 11px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
        border-radius: 6px;
        cursor: pointer;
--- a/ts_web/elements/00group-dataview/index.ts
+++ b/ts_web/elements/00group-dataview/index.ts
@@ -3,3 +3,4 @@ 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-storage-browser/index.js';
--- a/ts_web/elements/00group-feedback/dees-progressbar/dees-progressbar.ts
+++ b/ts_web/elements/00group-feedback/dees-progressbar/dees-progressbar.ts
@@ -89,7 +89,7 @@ export class DeesProgressbar extends DeesElement {
  }

  public async updatePercentage() {
-    const progressBarFill = this.shadowRoot.querySelector('.progressBarFill') as HTMLElement;
+    const progressBarFill = this.shadowRoot!.querySelector('.progressBarFill') as HTMLElement;
    progressBarFill.style.width = `${this.percentage}%`;
  }

--- a/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts
+++ b/ts_web/elements/00group-form/dees-form-submit/dees-form-submit.ts
@@ -30,7 +30,7 @@ export class DeesFormSubmit extends DeesElement {
  accessor disabled = false;

  @property({ type: String })
-  accessor text: string;
+  accessor text!: string;

  @property({ type: String })
  accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
@@ -42,7 +42,7 @@ export class DeesFormSubmit extends DeesElement {
  accessor size: 'sm' | 'default' | 'lg' | 'icon' | 'small' | 'normal' | 'large' = 'default';

  @property({ type: String })
-  accessor icon: string;
+  accessor icon!: string;

  @property({ type: String })
  accessor iconPosition: 'left' | 'right' = 'left';
--- a/ts_web/elements/00group-form/dees-form/dees-form.demo.ts
+++ b/ts_web/elements/00group-form/dees-form/dees-form.demo.ts
@@ -57,10 +57,10 @@ export const demoFunc = () => html`
      const outputDiv = elementArg.querySelector('.form-output');
      
      if (form && outputDiv) {
-        form.addEventListener('formData', async (eventArg: CustomEvent) => {
+        form.addEventListener('formData', (async (eventArg: CustomEvent) => {
          const data = eventArg.detail.data;
          console.log('Form submitted with data:', data);
-          
+
          // Show processing state
          form.setStatus('pending', 'Processing your registration...');
          outputDiv.innerHTML = `<strong>Submitted Data:</strong>\n${JSON.stringify(data, null, 2)}`;
@@ -75,7 +75,7 @@ export const demoFunc = () => html`
          await domtools.plugins.smartdelay.delayFor(2000);
          form.reset();
          outputDiv.innerHTML = '<em>Form has been reset</em>';
-        });
+        }) as unknown as EventListener);
        
        // Track individual field changes
        const inputs = form.querySelectorAll('dees-input-text, dees-input-dropdown, dees-input-checkbox');
@@ -158,14 +158,14 @@ export const demoFunc = () => html`
        console.log('Horizontal form layout active');
        
        // Monitor filter changes
-        form.addEventListener('formData', (event: CustomEvent) => {
+        form.addEventListener('formData', ((event: CustomEvent) => {
          const filters = event.detail.data;
          console.log('Filter applied:', filters);
-          
+
          // Simulate search
          const resultsCount = Math.floor(Math.random() * 100) + 1;
          console.log(`Found ${resultsCount} results with filters:`, filters);
-        });
+        }) as unknown as EventListener);
        
        // Setup real-time filter updates
        const inputs = form.querySelectorAll('[key]');
@@ -224,7 +224,7 @@ export const demoFunc = () => html`
      const statusDiv = elementArg.querySelector('#status-display');
      
      if (form) {
-        form.addEventListener('formData', async (eventArg: CustomEvent) => {
+        form.addEventListener('formData', (async (eventArg: CustomEvent) => {
          const data = eventArg.detail.data;
          console.log('Advanced form data:', data);
          
@@ -252,7 +252,7 @@ export const demoFunc = () => html`
          }
          
          console.log('Form data logged:', data);
-        });
+        }) as unknown as EventListener);
        
        // Monitor file uploads
        const fileUpload = form.querySelector('dees-input-fileupload');
--- a/ts_web/elements/00group-form/dees-form/dees-form.ts
+++ b/ts_web/elements/00group-form/dees-form/dees-form.ts
@@ -135,13 +135,14 @@ export class DeesForm extends DeesElement {
  }

  public getFormElements(): Array<TFormInputElement> {
-    return Array.from(this.children).filter((child) =>
+    // Use querySelectorAll('*') to find form inputs nested inside wrapper elements (e.g. <div>)
+    return Array.from(this.querySelectorAll('*')).filter((child) =>
      FORM_INPUT_TYPES.includes(child.constructor as any)
    ) as unknown as TFormInputElement[];
  }

  public getSubmitButton(): DeesFormSubmit | undefined {
-    return Array.from(this.children).find(
+    return Array.from(this.querySelectorAll('*')).find(
      (child) => child instanceof DeesFormSubmit
    ) as DeesFormSubmit;
  }
@@ -155,8 +156,9 @@ export class DeesForm extends DeesElement {
        requiredOK = false;
      }
    }
-    if (this.getSubmitButton()) {
-      this.getSubmitButton().disabled = !requiredOK;
+    const submitButton = this.getSubmitButton();
+    if (submitButton) {
+      submitButton.disabled = !requiredOK;
    }
  }

@@ -199,6 +201,7 @@ export class DeesForm extends DeesElement {
  ) {
    const inputChildren = this.getFormElements();
    const submitButton = this.getSubmitButton();
+    if (!submitButton) return;

    switch (visualStateArg) {
      case 'normal':
@@ -239,7 +242,6 @@ export class DeesForm extends DeesElement {
   */
  reset() {
    const inputChildren = this.getFormElements();
-    const submitButton = this.getSubmitButton();

    for (const inputChild of inputChildren) {
      inputChild.value = null;
--- a/ts_web/elements/00group-input/dees-input-base/dees-input-base.ts
+++ b/ts_web/elements/00group-input/dees-input-base/dees-input-base.ts
@@ -31,10 +31,10 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
   * Common properties for all inputs
   */
  @property({ type: String })
-  accessor key: string;
+  accessor key!: string;

  @property({ type: String })
-  accessor label: string;
+  accessor label!: string;

  @property({ type: Boolean })
  accessor required: boolean = false;
@@ -43,7 +43,7 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
  accessor disabled: boolean = false;

  @property({ type: String })
-  accessor description: string;
+  accessor description!: string;

  /**
   * Common styles for all input components
--- a/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts
+++ b/ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts
@@ -215,7 +215,7 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
  }

  public focus(): void {
-    const checkboxDiv = this.shadowRoot.querySelector('.checkbox');
+    const checkboxDiv = this.shadowRoot!.querySelector('.checkbox');
    if (checkboxDiv) {
      (checkboxDiv as any).focus();
    }
--- a/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts
+++ b/ts_web/elements/00group-input/dees-input-code/dees-input-code.ts
@@ -12,6 +12,7 @@ import { themeDefaultStyles } from '../../00theme.js';
 import { DeesModal } from '../../00group-overlay/dees-modal/dees-modal.js';
 import '../../00group-utility/dees-icon/dees-icon.js';
 import '../../00group-layout/dees-label/dees-label.js';
+import '../../00group-layout/dees-tile/dees-tile.js';
 import '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';
 import { DeesWorkspaceMonaco } from '../../00group-workspace/dees-workspace-monaco/dees-workspace-monaco.js';

@@ -105,24 +106,16 @@ export class DeesInputCode extends DeesInputBase<string> {
        min-height: 0;
      }

-      .code-container {
-        display: flex;
-        flex-direction: column;
+      dees-tile {
        flex: 1;
        min-height: 0;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
-        overflow: hidden;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
      }

      .toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        padding: 4px 12px;
        gap: 8px;
      }

@@ -256,8 +249,8 @@ export class DeesInputCode extends DeesInputBase<string> {
      </style>
      <div class="input-wrapper">
        <dees-label .label=${this.label} .description=${this.description} .required=${this.required}></dees-label>
-        <div class="code-container">
-          <div class="toolbar">
+        <dees-tile>
+          <div slot="header" class="toolbar">
            <div class="toolbar-left">
              <div class="language-selector">
                <button
@@ -322,7 +315,7 @@ export class DeesInputCode extends DeesInputBase<string> {
              @content-change=${this.handleContentChange}
            ></dees-workspace-monaco>
          </div>
-        </div>
+        </dees-tile>
      </div>
    `;
  }
@@ -610,20 +603,20 @@ export class DeesInputCode extends DeesInputBase<string> {
        {
          name: 'Cancel',
          action: async (modalRef) => {
-            await modalRef.destroy();
+            await modalRef!.destroy();
          },
        },
        {
          name: 'Save & Close',
          action: async (modalRef) => {
            // Get the editor content from the modal
-            modalEditorElement = modalRef.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
+            modalEditorElement = modalRef!.shadowRoot?.querySelector('dees-workspace-monaco') as DeesWorkspaceMonaco;
            if (modalEditorElement) {
              const editor = await modalEditorElement.editorDeferred.promise;
              const newValue = editor.getValue();
              this.setValue(newValue);
            }
-            await modalRef.destroy();
+            await modalRef!.destroy();
          },
        },
      ],
--- a/ts_web/elements/00group-input/dees-input-datepicker/demo.ts
+++ b/ts_web/elements/00group-input/dees-input-datepicker/demo.ts
@@ -47,9 +47,9 @@ export const demoFunc = () => html`
      const datePicker = elementArg.querySelector('dees-input-datepicker');
      
      if (datePicker) {
-        datePicker.addEventListener('change', (event: CustomEvent) => {
+        datePicker.addEventListener('change', ((event: CustomEvent) => {
          console.log('Basic date selected:', (event.target as DeesInputDatepicker).value);
-        });
+        }) as EventListener);
      }
    }}>
      <dees-panel .title=${'Basic Date Picker'} .subtitle=${'Simple date selection without time'}>
@@ -66,17 +66,17 @@ export const demoFunc = () => html`
      const appointmentPicker = elementArg.querySelector('dees-input-datepicker[label="Appointment"]');
      
      if (dateTimePicker) {
-        dateTimePicker.addEventListener('change', (event: CustomEvent) => {
+        dateTimePicker.addEventListener('change', ((event: CustomEvent) => {
          const value = (event.target as DeesInputDatepicker).value;
          console.log('24h format datetime:', value);
-        });
+        }) as EventListener);
      }
      
      if (appointmentPicker) {
-        appointmentPicker.addEventListener('change', (event: CustomEvent) => {
+        appointmentPicker.addEventListener('change', ((event: CustomEvent) => {
          const value = (event.target as DeesInputDatepicker).value;
          console.log('12h format datetime:', value);
-        });
+        }) as EventListener);
      }
    }}>
      <dees-panel .title=${'Date and Time Selection'} .subtitle=${'Date pickers with time selection in different formats'}>
@@ -102,14 +102,14 @@ export const demoFunc = () => html`
      const timezonePickers = elementArg.querySelectorAll('dees-input-datepicker');
      
      timezonePickers.forEach((picker) => {
-        picker.addEventListener('change', (event: CustomEvent) => {
+        picker.addEventListener('change', ((event: CustomEvent) => {
          const target = event.target as DeesInputDatepicker;
          console.log(`${target.label} value:`, target.value);
          const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
          if (input) {
            console.log(`${target.label} formatted:`, input.value);
          }
-        });
+        }) as EventListener);
      });
    }}>
      <dees-panel .title=${'Timezone Support'} .subtitle=${'Date and time selection with timezone awareness'}>
@@ -140,7 +140,7 @@ export const demoFunc = () => html`
      
      if (futureDatePicker) {
        // Show the min/max constraints in action
-        futureDatePicker.addEventListener('change', (event: CustomEvent) => {
+        futureDatePicker.addEventListener('change', ((event: CustomEvent) => {
          const value = (event.target as DeesInputDatepicker).value;
          if (value) {
            const selectedDate = new Date(value);
@@ -148,7 +148,7 @@ export const demoFunc = () => html`
            const daysDiff = Math.floor((selectedDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
            console.log(`Selected date is ${daysDiff} days from today`);
          }
-        });
+        }) as EventListener);
      }
    }}>
      <dees-panel .title=${'Date Range Constraints'} .subtitle=${'Limit selectable dates with min and max values'}>
@@ -171,14 +171,14 @@ export const demoFunc = () => html`
      
      const datePickers = elementArg.querySelectorAll('dees-input-datepicker');
      datePickers.forEach((picker) => {
-        picker.addEventListener('change', (event: CustomEvent) => {
+        picker.addEventListener('change', ((event: CustomEvent) => {
          const target = event.target as DeesInputDatepicker;
          // Log the formatted value that's displayed in the input
          const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
          if (input) {
            console.log(`${target.label} format:`, input.value);
          }
-        });
+        }) as EventListener);
      });
    }}>
      <dees-panel .title=${'Date Formats'} .subtitle=${'Different date display formats for various regions'}>
@@ -268,7 +268,7 @@ export const demoFunc = () => html`
    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
      // Generate weekend dates for the current month
      const generateWeekends = () => {
-        const weekends = [];
+        const weekends: string[] = [];
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth();
@@ -286,7 +286,7 @@ export const demoFunc = () => html`
      
      const picker = elementArg.querySelector('dees-input-datepicker');
      if (picker) {
-        picker.disabledDates = generateWeekends();
+        (picker as DeesInputDatepicker).disabledDates = generateWeekends();
        console.log('Disabled weekend dates for current month');
      }
    }}>
@@ -344,7 +344,7 @@ export const demoFunc = () => html`
      
      const picker = elementArg.querySelector('dees-input-datepicker');
      if (picker) {
-        picker.events = sampleEvents;
+        (picker as DeesInputDatepicker).events = sampleEvents;
        console.log('Calendar events loaded:', sampleEvents);
      }
    }}>
@@ -371,7 +371,7 @@ export const demoFunc = () => html`
      const output = elementArg.querySelector('#event-output');
      
      if (picker && output) {
-        picker.addEventListener('change', (event: CustomEvent) => {
+        picker.addEventListener('change', ((event: CustomEvent) => {
          const target = event.target as DeesInputDatepicker;
          const value = target.value;
          if (value) {
@@ -379,16 +379,16 @@ export const demoFunc = () => html`
            // Get the formatted value from the input element
            const input = target.shadowRoot?.querySelector('.date-input') as HTMLInputElement;
            const formattedValue = input?.value || 'N/A';
-            output.innerHTML = `
+            (output as HTMLElement).innerHTML = `
              <strong>Event triggered!</strong><br>
              ISO Value: ${value}<br>
              Formatted: ${formattedValue}<br>
              Date object: ${date.toLocaleString()}
            `;
          } else {
-            output.innerHTML = '<em>Date cleared</em>';
+            (output as HTMLElement).innerHTML = '<em>Date cleared</em>';
          }
-        });
+        }) as EventListener);
        
        picker.addEventListener('blur', () => {
          console.log('Datepicker lost focus');
--- a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts
@@ -56,16 +56,16 @@ export const demoFunc = () => html`
      
      // Log when country changes
      if (countryDropdown) {
-        countryDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        countryDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
          console.log('Country selected:', event.detail);
-        });
+        }) as EventListener);
      }
      
      // Log when role changes
      if (roleDropdown) {
-        roleDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        roleDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
          console.log('Role selected:', event.detail);
-        });
+        }) as EventListener);
      }
    }}>
      <dees-panel .title=${'1. Basic Dropdowns'} .subtitle=${'Standard dropdown with search functionality and various options'}>
@@ -103,9 +103,9 @@ export const demoFunc = () => html`
      const priorityDropdown = elementArg.querySelector('dees-input-dropdown');
      
      if (priorityDropdown) {
-        priorityDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        priorityDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
          console.log(`Priority changed to: ${event.detail.option}`);
-        });
+        }) as EventListener);
      }
    }}>
      <dees-panel .title=${'2. Without Search'} .subtitle=${'Dropdown with search functionality disabled for simpler selection'}>
@@ -128,10 +128,10 @@ export const demoFunc = () => html`
      
      // Log all changes from horizontal dropdowns
      dropdowns.forEach((dropdown) => {
-        dropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        dropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
          const label = dropdown.getAttribute('label');
          console.log(`${label}: ${event.detail.option}`);
-        });
+        }) as EventListener);
      });
    }}>
      <dees-panel .title=${'3. Horizontal Layout'} .subtitle=${'Multiple dropdowns in a horizontal layout for compact forms'}>
@@ -216,9 +216,9 @@ export const demoFunc = () => html`
      const dropdown = elementArg.querySelector('dees-input-dropdown');
      
      if (dropdown) {
-        dropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        dropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
          console.log('Bottom dropdown selected:', event.detail);
-        });
+        }) as EventListener);
        
        // Note: The dropdown automatically detects available space
        // and opens upward when near the bottom of the viewport
@@ -248,16 +248,16 @@ export const demoFunc = () => html`
        output.innerHTML = '<em>Select a product to see details...</em>';
        
        // Handle dropdown changes
-        dropdown.addEventListener('change', (event: CustomEvent) => {
+        dropdown.addEventListener('change', ((event: CustomEvent) => {
          if (event.detail.value) {
-            output.innerHTML = `
+            (output as HTMLElement).innerHTML = `
              <strong>Selected:</strong> ${event.detail.value.option}<br>
              <strong>Key:</strong> ${event.detail.value.key}<br>
              <strong>Price:</strong> $${event.detail.value.payload?.price || 'N/A'}<br>
              <strong>Features:</strong> ${event.detail.value.payload?.features?.join(', ') || 'N/A'}
            `;
          }
-        });
+        }) as EventListener);
      }
    }}>
      <dees-panel .title=${'6. Event Handling & Payload'} .subtitle=${'Dropdown with payload data and change event handling'}>
@@ -281,20 +281,20 @@ export const demoFunc = () => html`
      const frameworkDropdown = elementArg.querySelector('dees-input-dropdown[key="framework"]');
      
      if (form) {
-        form.addEventListener('formData', (event: CustomEvent) => {
+        form.addEventListener('formData', ((event: CustomEvent) => {
          console.log('Form submitted with data:', event.detail.data);
-        });
+        }) as EventListener);
      }
      
      if (projectTypeDropdown && frameworkDropdown) {
        // Filter frameworks based on project type
-        projectTypeDropdown.addEventListener('selectedOption', (event: CustomEvent) => {
+        projectTypeDropdown.addEventListener('selectedOption', ((event: CustomEvent) => {
          const selectedType = event.detail.key;
          console.log(`Project type changed to: ${selectedType}`);
-          
+
          // In a real app, you could filter the framework options based on project type
          // For demo purposes, we just log the change
-        });
+        }) as EventListener);
      }
    }}>
      <dees-panel .title=${'7. Form Integration'} .subtitle=${'Dropdown working within a form with validation'}>
--- a/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts
+++ b/ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts
@@ -30,14 +30,14 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
  accessor options: { option: string; key: string; payload?: any }[] = [];

  @property()
-  accessor selectedOption: { option: string; key: string; payload?: any } = null;
+  accessor selectedOption: { option: string; key: string; payload?: any } | null = null;

  // Add value property for form compatibility
  public get value() {
    return this.selectedOption;
  }

-  public set value(val: { option: string; key: string; payload?: any }) {
+  public set value(val: { option: string; key: string; payload?: any } | null) {
    this.selectedOption = val;
  }

@@ -372,7 +372,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
    
    if (this.isOpened) {
      // Check available space and set position
-      const selectedBox = this.shadowRoot.querySelector('.selectedBox') as HTMLElement;
+      const selectedBox = this.shadowRoot!.querySelector('.selectedBox') as HTMLElement;
      const rect = selectedBox.getBoundingClientRect();
      const spaceBelow = window.innerHeight - rect.bottom;
      const spaceAbove = rect.top;
@@ -382,7 +382,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
      
      // Focus search input if present
      await this.updateComplete;
-      const searchInput = this.shadowRoot.querySelector('.search input') as HTMLInputElement;
+      const searchInput = this.shadowRoot!.querySelector('.search input') as HTMLInputElement;
      if (searchInput) {
        searchInput.focus();
      }
@@ -455,7 +455,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
    }
  }

-  public getValue(): { option: string; key: string; payload?: any } {
+  public getValue(): { option: string; key: string; payload?: any } | null {
    return this.selectedOption;
  }

--- a/ts_web/elements/00group-input/dees-input-fileupload/component.ts
+++ b/ts_web/elements/00group-input/dees-input-fileupload/component.ts
@@ -48,7 +48,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
  accessor maxFiles: number = 0; // 0 means no limit

  @property({ type: String, reflect: true })
-  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null;
+  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' | null = null;

  accessor validationMessage: string = '';

@@ -266,7 +266,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
      return;
    }
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
-      this.dropArea!.addEventListener(eventName, this.handleDragEvent);
+      this.dropArea!.addEventListener(eventName, this.handleDragEvent as unknown as EventListener);
    });
  }

@@ -275,7 +275,7 @@ export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
      return;
    }
    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
-      this.dropArea!.removeEventListener(eventName, this.handleDragEvent);
+      this.dropArea!.removeEventListener(eventName, this.handleDragEvent as unknown as EventListener);
    });
  }

--- a/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts
+++ b/ts_web/elements/00group-input/dees-input-iban/dees-input-iban.ts
@@ -60,7 +60,7 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {

  public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
    super.firstUpdated(_changedProperties);
-    const deesInputText = this.shadowRoot.querySelector('dees-input-text') as any;
+    const deesInputText = this.shadowRoot!.querySelector('dees-input-text') as any;
    if (deesInputText && deesInputText.changeSubject) {
      deesInputText.changeSubject.subscribe(() => {
        this.changeSubject.next(this);
@@ -81,8 +81,10 @@ export class DeesInputIban extends DeesInputBase<DeesInputIban> {
      }
    }
    this.enteredIbanIsValid = ibantools.isValidIBAN(this.enteredString.replace(/ /g, ''));
-    const deesInputText = this.shadowRoot.querySelector('dees-input-text');
-    deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`;
+    const deesInputText = this.shadowRoot!.querySelector('dees-input-text') as any;
+    if (deesInputText) {
+      deesInputText.validationText = `IBAN is valid: ${this.enteredIbanIsValid}`;
+    }
  }

  public getValue(): string {
--- a/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts
+++ b/ts_web/elements/00group-input/dees-input-list/dees-input-list.ts
@@ -9,7 +9,6 @@ import {
 } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.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';

@@ -130,13 +129,13 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
      .list-item {
        display: flex;
        align-items: center;
-        gap: 8px;
-        padding: 12px 16px;
+        gap: 6px;
+        padding: 6px 10px;
        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
        transition: transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease;
        position: relative;
-        overflow: hidden; /* Prevent animation from affecting scroll bounds */
+        overflow: hidden;
      }

      .list-item:last-of-type {
@@ -181,8 +180,8 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
      }

      .drag-handle dees-icon {
-        width: 16px;
-        height: 16px;
+        width: 14px;
+        height: 14px;
      }

      .item-content {
@@ -195,15 +194,15 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
      .item-text {
        flex: 1;
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        font-size: 14px;
-        line-height: 20px;
+        font-size: 13px;
+        line-height: 18px;
        word-break: break-word;
      }

      .item-edit-input {
        flex: 1;
-        padding: 4px 8px;
-        font-size: 14px;
+        padding: 3px 6px;
+        font-size: 13px;
        font-family: inherit;
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
        border: 1px solid ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
@@ -222,8 +221,8 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
        display: flex;
        align-items: center;
        justify-content: center;
-        width: 28px;
-        height: 28px;
+        width: 24px;
+        height: 24px;
        border-radius: 4px;
        background: transparent;
        border: none;
@@ -262,34 +261,29 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
      }

      .action-button dees-icon {
-        width: 14px;
-        height: 14px;
+        width: 13px;
+        height: 13px;
      }

      .add-item-container {
        display: flex;
-        gap: 8px;
-        padding: 12px 16px;
+        gap: 6px;
+        padding: 6px 10px;
        background: ${cssManager.bdTheme('hsl(0 0% 97.5%)', 'hsl(0 0% 6.9%)')};
        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }

      .add-input {
        flex: 1;
-        padding: 8px 12px;
-        font-size: 14px;
+        padding: 4px 8px;
+        font-size: 13px;
+        line-height: 18px;
        font-family: inherit;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 4px;
+        background: transparent;
+        border: none;
        outline: none;
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        transition: all 0.15s ease;
-      }
-
-      .add-input:focus {
-        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
-        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
+        min-width: 0;
      }

      .add-input::placeholder {
@@ -302,29 +296,54 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
      }

      .add-button {
-        padding: 8px 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        transition: all 0.15s ease;
+        flex-shrink: 0;
+      }
+
+      .add-button:hover:not(:disabled) {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+      }
+
+      .add-button:disabled {
+        opacity: 0.3;
+        cursor: default;
+      }
+
+      .add-button dees-icon {
+        width: 14px;
+        height: 14px;
      }

      .empty-state {
-        padding: 32px 16px;
+        padding: 16px 10px;
        text-align: center;
        color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
-        font-size: 14px;
-        font-style: italic;
+        font-size: 13px;
      }

      .validation-message {
        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
-        font-size: 13px;
-        margin-top: 6px;
-        line-height: 1.5;
+        font-size: 12px;
+        margin-top: 4px;
+        line-height: 1.4;
      }

      .description {
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        font-size: 13px;
-        margin-top: 6px;
-        line-height: 1.5;
+        font-size: 12px;
+        margin-top: 4px;
+        line-height: 1.4;
      }

      /* Scrollbar styling */
@@ -429,13 +448,13 @@ export class DeesInputList extends DeesInputBase<DeesInputList> {
                @keydown=${this.handleAddKeyDown}
                ?disabled=${this.disabled}
              />
-              <dees-button
+              <button
                class="add-button"
                @click=${this.addItem}
                ?disabled=${!this.inputValue.trim()}
              >
-                <dees-icon .icon=${'lucide:plus'}></dees-icon> Add
-              </dees-button>
+                <dees-icon .icon=${'lucide:plus'}></dees-icon>
+              </button>
            </div>
          ` : ''}
        </div>
--- a/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts
+++ b/ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts
@@ -211,9 +211,9 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
  private indicatorInitialized = false;

  public async setIndicator() {
-    const indicator: HTMLDivElement = this.shadowRoot.querySelector('.indicator');
+    const indicator: HTMLDivElement | null = this.shadowRoot!.querySelector('.indicator');
    const selectedIndex = this.options.indexOf(this.selectedOption);
-    
+
    // If no valid selection, hide indicator
    if (selectedIndex === -1 || !indicator) {
      if (indicator) {
@@ -221,8 +221,8 @@ export class DeesInputMultitoggle extends DeesInputBase<DeesInputMultitoggle> {
      }
      return;
    }
-    
-    const option: HTMLDivElement = this.shadowRoot.querySelector(
+
+    const option: HTMLDivElement | null = this.shadowRoot!.querySelector(
      `.option:nth-child(${selectedIndex + 2})`
    );
    
--- a/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts
+++ b/ts_web/elements/00group-input/dees-input-phone/dees-input-phone.ts
@@ -67,7 +67,7 @@ export class DeesInputPhone extends DeesInputBase<DeesInputPhone> {
    }
    
    // Subscribe to the inner input's changes
-    const innerInput = this.shadowRoot.querySelector('dees-input-text') as any;
+    const innerInput = this.shadowRoot!.querySelector('dees-input-text') as any;
    if (innerInput && innerInput.changeSubject) {
      innerInput.changeSubject.subscribe(() => {
        this.changeSubject.next(this);
--- a/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.ts
+++ b/ts_web/elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.ts
@@ -35,7 +35,7 @@ export class DeesInputRadiogroup extends DeesInputBase<string | object> {
  accessor direction: 'vertical' | 'horizontal' = 'vertical';

  @property({ type: String, reflect: true })
-  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null;
+  accessor validationState: 'valid' | 'invalid' | 'warn' | 'pending' | null = null;

  // Form compatibility
  public get value() {
@@ -346,15 +346,15 @@ export class DeesInputRadiogroup extends DeesInputBase<string | object> {
  }

  private focusNextOption() {
-    const radioCircles = Array.from(this.shadowRoot.querySelectorAll('.radio-circle'));
-    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot.activeElement);
+    const radioCircles = Array.from(this.shadowRoot!.querySelectorAll('.radio-circle'));
+    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot!.activeElement);
    const nextIndex = (currentIndex + 1) % radioCircles.length;
    (radioCircles[nextIndex] as HTMLElement).focus();
  }

  private focusPreviousOption() {
-    const radioCircles = Array.from(this.shadowRoot.querySelectorAll('.radio-circle'));
-    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot.activeElement);
+    const radioCircles = Array.from(this.shadowRoot!.querySelectorAll('.radio-circle'));
+    const currentIndex = radioCircles.findIndex(el => el === this.shadowRoot!.activeElement);
    const prevIndex = currentIndex <= 0 ? radioCircles.length - 1 : currentIndex - 1;
    (radioCircles[prevIndex] as HTMLElement).focus();
  }
--- a/ts_web/elements/00group-input/dees-input-richtext/component.ts
+++ b/ts_web/elements/00group-input/dees-input-richtext/component.ts
@@ -16,6 +16,7 @@ import {

 import type { Editor } from '@tiptap/core';
 import { DeesServiceLibLoader, type ITiptapBundle } from '../../../services/index.js';
+import '../../00group-layout/dees-tile/dees-tile.js';

 declare global {
  interface HTMLElementTagNameMap {
@@ -58,11 +59,11 @@ export class DeesInputRichtext extends DeesInputBase<string> {
  @state()
  accessor wordCount: number = 0;

-  private editorElement: HTMLElement;
-  private linkInputElement: HTMLInputElement;
+  private editorElement!: HTMLElement;
+  private linkInputElement!: HTMLInputElement;
  private tiptapBundle: ITiptapBundle | null = null;

-  public editor: Editor;
+  public editor!: Editor;

  public static styles = richtextStyles;

@@ -235,8 +236,8 @@ export class DeesInputRichtext extends DeesInputBase<string> {
    // Load Tiptap from CDN
    this.tiptapBundle = await DeesServiceLibLoader.getInstance().loadTiptap();

-    this.editorElement = this.shadowRoot.querySelector('.editor-content');
-    this.linkInputElement = this.shadowRoot.querySelector('.link-input input');
+    this.editorElement = this.shadowRoot!.querySelector('.editor-content')!;
+    this.linkInputElement = this.shadowRoot!.querySelector('.link-input input')!;
    this.initializeEditor();
  }

--- a/ts_web/elements/00group-input/dees-input-richtext/styles.ts
+++ b/ts_web/elements/00group-input/dees-input-richtext/styles.ts
@@ -23,22 +23,15 @@ export const richtextStyles = [
        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
      }

-      .editor-container {
-        display: flex;
-        flex-direction: column;
-        min-height: ${cssManager.bdTheme('200px', '200px')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        overflow: hidden;
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      dees-tile {
+        min-height: 200px;
      }

-      .editor-container:hover {
+      dees-tile:hover::part(outer) {
        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
      }

-      .editor-container.focused {
+      dees-tile.focused::part(outer) {
        border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
      }
@@ -47,9 +40,7 @@ export const richtextStyles = [
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        padding: 4px 12px;
        align-items: center;
        position: relative;
      }
@@ -199,14 +190,15 @@ export const richtextStyles = [
      }

      .editor-footer {
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        font-size: 12px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        padding: 0 12px;
+        height: 28px;
+        font-size: 11px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
        display: flex;
        justify-content: space-between;
        align-items: center;
+        width: 100%;
+        box-sizing: border-box;
      }

      .word-count {
--- a/ts_web/elements/00group-input/dees-input-richtext/template.ts
+++ b/ts_web/elements/00group-input/dees-input-richtext/template.ts
@@ -5,8 +5,8 @@ export const renderRichtext = (component: DeesInputRichtext): TemplateResult =>
      return html`
        <div class="input-wrapper">
          ${component.label ? html`<label class="label">${component.label}</label>` : ''}
-          <div class="editor-container ${component.editor?.isFocused ? 'focused' : ''}" style="--min-height: ${component.minHeight}px">
-            <div class="editor-toolbar">
+          <dees-tile class="${component.editor?.isFocused ? 'focused' : ''}" style="--min-height: ${component.minHeight}px">
+            <div slot="header" class="editor-toolbar">
              ${component.renderToolbar()}
              <div class="link-input ${component.showLinkInput ? 'show' : ''}">
                <input type="url" placeholder="Enter URL..." @keydown=${component.handleLinkInputKeydown} />
@@ -20,14 +20,14 @@ export const renderRichtext = (component: DeesInputRichtext): TemplateResult =>
            <div class="editor-content"></div>
            ${component.showWordCount
              ? html`
-                  <div class="editor-footer">
+                  <div slot="footer" class="editor-footer">
                    <span class="word-count">${component.wordCount} word${component.wordCount !== 1 ? 's' : ''}</span>
                  </div>
                `
              : ''}
-          </div>
+          </dees-tile>
          ${component.description ? html`<div class="description">${component.description}</div>` : ''}
        </div>
      `;
-  
+
 };
--- a/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-text/dees-input-text.demo.ts
@@ -73,9 +73,9 @@ export const demoFunc = () => html`
      const inputs = elementArg.querySelectorAll('dees-input-text');
      
      inputs.forEach((input: DeesInputText) => {
-        input.addEventListener('changeSubject', (event: CustomEvent) => {
+        input.addEventListener('changeSubject', ((event: CustomEvent) => {
          console.log(`Input "${input.label}" changed to:`, input.getValue());
-        });
+        }) as EventListener);
        
        input.addEventListener('blur', () => {
          console.log(`Input "${input.label}" lost focus`);
@@ -271,7 +271,8 @@ export const demoFunc = () => html`
      // Track password visibility toggles
      const passwordInputs = elementArg.querySelectorAll('dees-input-text[isPasswordBool]');
      
-      passwordInputs.forEach((input: DeesInputText) => {
+      passwordInputs.forEach((_input) => {
+        const input = _input as DeesInputText;
        // Monitor for toggle button clicks within shadow DOM
        const checkToggle = () => {
          const inputEl = input.shadowRoot?.querySelector('input');
@@ -316,10 +317,10 @@ export const demoFunc = () => html`
      
      if (dynamicInput && output) {
        // Update output on every change
-        dynamicInput.addEventListener('changeSubject', (event: CustomEvent) => {
+        dynamicInput.addEventListener('changeSubject', ((event: CustomEvent) => {
          const value = (event.detail as DeesInputText).getValue();
          output.textContent = `Current value: "${value}"`;
-        });
+        }) as EventListener);
        
        // Also track focus/blur events
        dynamicInput.addEventListener('focus', () => {
--- a/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts
+++ b/ts_web/elements/00group-input/dees-input-text/dees-input-text.ts
@@ -47,7 +47,7 @@ export class DeesInputText extends DeesInputBase {
    type: Boolean,
    reflect: true,
  })
-  accessor validationState: 'valid' | 'warn' | 'invalid';
+  accessor validationState!: 'valid' | 'warn' | 'invalid';

  @property({
    reflect: true,
@@ -55,7 +55,7 @@ export class DeesInputText extends DeesInputBase {
  accessor validationText: string = '';

  @property({})
-  accessor validationFunction: (value: string) => boolean;
+  accessor validationFunction!: (value: string) => boolean;

  public static styles = [
    themeDefaultStyles,
@@ -274,12 +274,12 @@ export class DeesInputText extends DeesInputBase {
  }

  public async focus() {
-    const textInput = this.shadowRoot.querySelector('input');
-    textInput.focus();
+    const textInput = this.shadowRoot!.querySelector('input');
+    textInput!.focus();
  }

  public async blur() {
-    const textInput = this.shadowRoot.querySelector('input');
-    textInput.blur();
+    const textInput = this.shadowRoot!.querySelector('input');
+    textInput!.blur();
  }
 }
--- a/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts
+++ b/ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.demo.ts
@@ -12,17 +12,19 @@ export const demoFunc = () => html`

    if (toggleAllOnBtn && toggleAllOffBtn) {
      toggleAllOnBtn.addEventListener('click', () => {
-        featureToggles.forEach((toggle: DeesInputToggle) => {
-          if (!toggle.disabled && !toggle.required) {
-            toggle.value = true;
+        featureToggles.forEach((toggle) => {
+          const t = toggle as unknown as DeesInputToggle;
+          if (!t.disabled && !t.required) {
+            t.value = true;
          }
        });
      });

      toggleAllOffBtn.addEventListener('click', () => {
-        featureToggles.forEach((toggle: DeesInputToggle) => {
-          if (!toggle.disabled && !toggle.required) {
-            toggle.value = false;
+        featureToggles.forEach((toggle) => {
+          const t = toggle as unknown as DeesInputToggle;
+          if (!t.disabled && !t.required) {
+            t.value = false;
          }
        });
      });
@@ -280,10 +282,10 @@ export const demoFunc = () => html`
          <dees-input-toggle
            .label=${'Airplane mode'}
            .value=${false}
-            @newValue=${(event: CustomEvent) => {
+            @newValue=${(event: Event) => {
              const output = document.querySelector('#airplane-output');
              if (output) {
-                output.textContent = `Airplane mode: ${event.detail ? 'ON' : 'OFF'}`;
+                output.textContent = `Airplane mode: ${(event as CustomEvent).detail ? 'ON' : 'OFF'}`;
              }
            }}
          ></dees-input-toggle>
@@ -291,10 +293,10 @@ export const demoFunc = () => html`
          <dees-input-toggle
            .label=${'Do not disturb'}
            .value=${false}
-            @newValue=${(event: CustomEvent) => {
+            @newValue=${(event: Event) => {
              const output = document.querySelector('#dnd-output');
              if (output) {
-                output.textContent = `Do not disturb: ${event.detail ? 'ENABLED' : 'DISABLED'}`;
+                output.textContent = `Do not disturb: ${(event as CustomEvent).detail ? 'ENABLED' : 'DISABLED'}`;
              }
            }}
          ></dees-input-toggle>
--- a/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts
+++ b/ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts
@@ -156,7 +156,7 @@ export class DeesInputTypelist extends DeesInputBase<DeesInputTypelist> {
        <dees-label .label=${this.label} .description=${this.description}></dees-label>
        <div class="mainbox">
          <div class="tags" @click=${() => {
-            this.shadowRoot.querySelector('input').focus();
+            this.shadowRoot!.querySelector('input')!.focus();
          }}>
            ${this.value.length === 0
              ? html`<div class="notags">No tags yet</div>`
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/heading.block.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/heading.block.ts
@@ -200,15 +200,16 @@ export class HeadingBlockHandler extends BaseBlockHandler {
    const wysiwygBlock = (headingBlock.getRootNode() as ShadowRoot).host as any;
    if (wysiwygBlock) {
      const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
      (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
-          this.selectionHandler = null;
+        if (self.selectionHandler) {
+          document.removeEventListener('selectionchange', self.selectionHandler);
+          self.selectionHandler = null;
        }
        if (originalDisconnectedCallback) {
          await originalDisconnectedCallback.call(wysiwygBlock);
        }
-      }.bind(this);
+      };
    }
  }
  
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/list.block.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/list.block.ts
@@ -213,15 +213,16 @@ export class ListBlockHandler extends BaseBlockHandler {
    const wysiwygBlock = (listBlock.getRootNode() as ShadowRoot).host as any;
    if (wysiwygBlock) {
      const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
      (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
-          this.selectionHandler = null;
+        if (self.selectionHandler) {
+          document.removeEventListener('selectionchange', self.selectionHandler);
+          self.selectionHandler = null;
        }
        if (originalDisconnectedCallback) {
          await originalDisconnectedCallback.call(wysiwygBlock);
        }
-      }.bind(this);
+      };
    }
  }
  
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/paragraph.block.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/paragraph.block.ts
@@ -193,15 +193,16 @@ export class ParagraphBlockHandler extends BaseBlockHandler {
    const wysiwygBlock = element.closest('dees-wysiwyg-block');
    if (wysiwygBlock) {
      const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
      (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
-          this.selectionHandler = null;
+        if (self.selectionHandler) {
+          document.removeEventListener('selectionchange', self.selectionHandler);
+          self.selectionHandler = null;
        }
        if (originalDisconnectedCallback) {
          await originalDisconnectedCallback.call(wysiwygBlock);
        }
-      }.bind(this);
+      };
    }
  }
  
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/quote.block.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/quote.block.ts
@@ -192,15 +192,16 @@ export class QuoteBlockHandler extends BaseBlockHandler {
    const wysiwygBlock = (quoteBlock.getRootNode() as ShadowRoot).host as any;
    if (wysiwygBlock) {
      const originalDisconnectedCallback = (wysiwygBlock as any).disconnectedCallback;
+      const self = this;
      (wysiwygBlock as any).disconnectedCallback = async function() {
-        if (this.selectionHandler) {
-          document.removeEventListener('selectionchange', this.selectionHandler);
-          this.selectionHandler = null;
+        if (self.selectionHandler) {
+          document.removeEventListener('selectionchange', self.selectionHandler);
+          self.selectionHandler = null;
        }
        if (originalDisconnectedCallback) {
          await originalDisconnectedCallback.call(wysiwygBlock);
        }
-      }.bind(this);
+      };
    }
  }
  
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-formatting-menu.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-formatting-menu.ts
@@ -188,36 +188,39 @@ export class DeesFormattingMenu extends DeesElement {
  
  public firstUpdated(): void {
    // Set up event delegation for the menu
-    this.shadowRoot?.addEventListener('mousedown', (e: MouseEvent) => {
+    this.shadowRoot!.addEventListener('mousedown', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
      const menu = this.shadowRoot?.querySelector('.formatting-menu');
-      if (menu && menu.contains(e.target as Node)) {
+      if (menu && menu.contains(mouseEvent.target as Node)) {
        // Prevent focus loss
-        e.preventDefault();
-        e.stopPropagation();
+        mouseEvent.preventDefault();
+        mouseEvent.stopPropagation();
      }
    });
-    
-    this.shadowRoot?.addEventListener('click', (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
+
+    this.shadowRoot!.addEventListener('click', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
+      const target = mouseEvent.target as HTMLElement;
      const button = target.closest('.format-button') as HTMLElement;
-      
+
      if (button) {
-        e.preventDefault();
-        e.stopPropagation();
-        
+        mouseEvent.preventDefault();
+        mouseEvent.stopPropagation();
+
        const command = button.getAttribute('data-command');
        if (command) {
          this.applyFormat(command);
        }
      }
    });
-    
-    this.shadowRoot?.addEventListener('focus', (e: FocusEvent) => {
+
+    this.shadowRoot!.addEventListener('focus', (e: Event) => {
+      const focusEvent = e as FocusEvent;
      const menu = this.shadowRoot?.querySelector('.formatting-menu');
-      if (menu && menu.contains(e.target as Node)) {
+      if (menu && menu.contains(focusEvent.target as Node)) {
        // Prevent menu from taking focus
-        e.preventDefault();
-        e.stopPropagation();
+        focusEvent.preventDefault();
+        focusEvent.stopPropagation();
      }
    }, true); // Use capture phase
  }
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts
@@ -77,7 +77,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
  @state()
  accessor selectedText: string = '';

-  public editorContentRef: HTMLDivElement;
+  public editorContentRef!: HTMLDivElement;
  public isComposing: boolean = false;
  
  // Handler instances
@@ -144,7 +144,7 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
    // No global selection listener needed
    
    // Listen for custom selection events from blocks
-    this.addEventListener('block-text-selected', (e: CustomEvent) => {
+    this.addEventListener('block-text-selected', ((e: CustomEvent) => {
      
      if (!this.slashMenu.visible && e.detail.hasSelection && e.detail.text.length > 0) {
        this.selectedText = e.detail.text;
@@ -164,8 +164,8 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
          );
        }
      }
-    });
-    
+    }) as EventListener);
+
    // Hide formatting menu when clicking outside
    document.addEventListener('mousedown', (e) => {
      // Check if click is on the formatting menu itself
@@ -896,14 +896,14 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
          {
            name: 'Cancel',
            action: async (modal) => {
-              modal.destroy();
+              modal!.destroy();
              resolve(null);
            }
          },
          {
            name: 'Add Link',
            action: async (modal) => {
-              modal.destroy();
+              modal!.destroy();
              resolve(linkUrl);
            }
          }
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-slash-menu.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-slash-menu.ts
@@ -216,46 +216,50 @@ export class DeesSlashMenu extends DeesElement {
  
  public firstUpdated(): void {
    // Set up event delegation
-    this.shadowRoot?.addEventListener('mousedown', (e: MouseEvent) => {
+    this.shadowRoot!.addEventListener('mousedown', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
      const menu = this.shadowRoot?.querySelector('.slash-menu');
-      if (menu && menu.contains(e.target as Node)) {
+      if (menu && menu.contains(mouseEvent.target as Node)) {
        // Prevent focus loss
-        e.preventDefault();
-        e.stopPropagation();
+        mouseEvent.preventDefault();
+        mouseEvent.stopPropagation();
      }
    });
-    
-    this.shadowRoot?.addEventListener('click', (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
+
+    this.shadowRoot!.addEventListener('click', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
+      const target = mouseEvent.target as HTMLElement;
      const menuItem = target.closest('.slash-menu-item') as HTMLElement;
-      
+
      if (menuItem) {
-        e.preventDefault();
-        e.stopPropagation();
-        
+        mouseEvent.preventDefault();
+        mouseEvent.stopPropagation();
+
        const itemType = menuItem.getAttribute('data-item-type');
        if (itemType) {
          this.selectItem(itemType);
        }
      }
    });
-    
-    this.shadowRoot?.addEventListener('mouseenter', (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
+
+    this.shadowRoot!.addEventListener('mouseenter', (e: Event) => {
+      const mouseEvent = e as MouseEvent;
+      const target = mouseEvent.target as HTMLElement;
      const menuItem = target.closest('.slash-menu-item') as HTMLElement;
-      
+
      if (menuItem) {
        const index = parseInt(menuItem.getAttribute('data-item-index') || '0', 10);
        this.selectedIndex = index;
      }
    }, true); // Use capture phase
-    
-    this.shadowRoot?.addEventListener('focus', (e: FocusEvent) => {
+
+    this.shadowRoot!.addEventListener('focus', (e: Event) => {
+      const focusEvent = e as FocusEvent;
      const menu = this.shadowRoot?.querySelector('.slash-menu');
-      if (menu && menu.contains(e.target as Node)) {
+      if (menu && menu.contains(focusEvent.target as Node)) {
        // Prevent menu from taking focus
-        e.preventDefault();
-        e.stopPropagation();
+        focusEvent.preventDefault();
+        focusEvent.stopPropagation();
      }
    }, true); // Use capture phase
  }
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.ts
@@ -33,13 +33,13 @@ export class DeesWysiwygBlock extends DeesElement {
    }
  }
  @property({ type: Object })
-  accessor block: IBlock;
+  accessor block!: IBlock;

  @property({ type: Boolean })
  accessor isSelected: boolean = false;

  @property({ type: Object })
-  accessor handlers: IBlockEventHandlers;
+  accessor handlers!: IBlockEventHandlers;

  @property({ type: Object })
  accessor wysiwygComponent: any; // Reference to parent dees-input-wysiwyg
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.dragdrophandler.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.dragdrophandler.ts
@@ -105,10 +105,10 @@ export class WysiwygDragDropHandler {
  handleDragEnd(): void {
    // Clean up visual state
    const allBlocks = this.component.editorContentRef.querySelectorAll('.block-wrapper');
-    allBlocks.forEach((block: HTMLElement) => {
-      block.classList.remove('dragging', 'move-up', 'move-down');
-      block.style.removeProperty('--drag-offset');
-      block.style.removeProperty('transform');
+    allBlocks.forEach((block) => {
+      (block as HTMLElement).classList.remove('dragging', 'move-up', 'move-down');
+      (block as HTMLElement).style.removeProperty('--drag-offset');
+      (block as HTMLElement).style.removeProperty('transform');
    });
    
    // Remove dragging class from editor
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.keyboardhandler.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.keyboardhandler.ts
@@ -704,17 +704,17 @@ export class WysiwygKeyboardHandler {
      const rect = range.getBoundingClientRect();
      
      // Get the container element
-      let container = range.commonAncestorContainer;
+      let container: Node = range.commonAncestorContainer;
      if (container.nodeType === Node.TEXT_NODE) {
-        container = container.parentElement;
+        container = container.parentElement!;
      }
-      
+
      // Get the top position of the container
      const containerRect = (container as Element).getBoundingClientRect();
-      
+
      // Check if we're near the top (within 5px tolerance for line height variations)
      const isNearTop = rect.top - containerRect.top < 5;
-      
+
      // For single-line content, also check if we're at the beginning
      if (container.textContent && !container.textContent.includes('\n')) {
        const cursorPos = WysiwygSelection.getCursorPositionInElement(container as Element, ...shadowRoots);
@@ -740,11 +740,11 @@ export class WysiwygKeyboardHandler {
      const rect = range.getBoundingClientRect();
      
      // Get the container element
-      let container = range.commonAncestorContainer;
+      let container: Node = range.commonAncestorContainer;
      if (container.nodeType === Node.TEXT_NODE) {
-        container = container.parentElement;
+        container = container.parentElement!;
      }
-      
+
      // Get the bottom position of the container
      const containerRect = (container as Element).getBoundingClientRect();
      
--- a/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.modalmanager.ts
+++ b/ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.modalmanager.ts
@@ -72,7 +72,7 @@ export class WysiwygModalManager {
          {
            name: 'Cancel',
            action: async (modal) => {
-              modal.destroy();
+              modal!.destroy();
              resolve(null);
            }
          }
@@ -158,7 +158,7 @@ export class WysiwygModalManager {
        {
          name: 'Done',
          action: async (modal) => {
-            modal.destroy();
+            modal!.destroy();
          }
        }
      ]
--- a/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.demo.ts
+++ b/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.demo.ts
@@ -56,10 +56,10 @@ export const demoFunc = () => html`
      const roundProfile = elementArg.querySelector('dees-input-profilepicture[shape="round"]');
      
      if (roundProfile) {
-        roundProfile.addEventListener('change', (event: CustomEvent) => {
+        roundProfile.addEventListener('change', ((event: CustomEvent) => {
          const target = event.target as DeesInputProfilePicture;
          console.log('Round profile picture changed:', target.value?.substring(0, 50) + '...');
-        });
+        }) as EventListener);
      }
    }}>
      <dees-panel .title=${'Profile Picture Input'} .subtitle=${'Basic usage with round and square shapes'}>
@@ -85,10 +85,10 @@ export const demoFunc = () => html`
      // Different sizes demo
      const profiles = elementArg.querySelectorAll('dees-input-profilepicture');
      profiles.forEach((profile) => {
-        profile.addEventListener('change', (event: CustomEvent) => {
+        profile.addEventListener('change', ((event: CustomEvent) => {
          const target = event.target as DeesInputProfilePicture;
          console.log(`Profile (size ${target.size}) changed`);
-        });
+        }) as EventListener);
      });
    }}>
      <dees-panel .title=${'Size Variations'} .subtitle=${'Profile pictures in different sizes'}>
@@ -122,15 +122,15 @@ export const demoFunc = () => html`
      if (prefilledProfile) {
        prefilledProfile.value = sampleImageUrl;
        
-        prefilledProfile.addEventListener('change', (event: CustomEvent) => {
+        prefilledProfile.addEventListener('change', ((event: CustomEvent) => {
          const target = event.target as DeesInputProfilePicture;
          const output = elementArg.querySelector('#prefilled-output');
          if (output) {
-            output.textContent = target.value ? 
-              `Image data: ${target.value.substring(0, 80)}...` : 
+            output.textContent = target.value ?
+              `Image data: ${target.value.substring(0, 80)}...` :
              'No image selected';
          }
-        });
+        }) as EventListener);
      }
    }}>
      <dees-panel .title=${'Pre-filled and Value Binding'} .subtitle=${'Profile picture with initial value and change tracking'}>
--- a/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts
+++ b/ts_web/elements/00group-input/profilepicture/dees-input-profilepicture.ts
@@ -436,10 +436,10 @@ export class DeesInputProfilePicture extends DeesInputBase<DeesInputProfilePictu
    this.modalInstance.outputSize = this.outputSize;
    this.modalInstance.outputQuality = this.outputQuality;
    
-    this.modalInstance.addEventListener('save', (event: CustomEvent) => {
+    this.modalInstance.addEventListener('save', ((event: CustomEvent) => {
      this.value = event.detail.croppedImage;
      this.changeSubject.next(this);
-    });
+    }) as EventListener);
    
    document.body.appendChild(this.modalInstance);
  }
--- a/ts_web/elements/00group-layout/dees-chips/dees-chips.ts
+++ b/ts_web/elements/00group-layout/dees-chips/dees-chips.ts
@@ -41,7 +41,7 @@ export class DeesChips extends DeesElement {
  accessor selectableChips: Tag[] = [];

  @property()
-  accessor selectedChip: Tag = null;
+  accessor selectedChip: Tag | null = null;

  @property({
    type: Array,
--- a/ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.demo.ts
+++ b/ts_web/elements/00group-layout/dees-dashboardgrid/dees-dashboardgrid.demo.ts
@@ -1,5 +1,6 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import type { DeesDashboardgrid } from './dees-dashboardgrid.js';
+import type { LayoutDirection } from './types.js';
 import '@design.estate/dees-wcctools/demotools';

 export const demoFunc = () => {
@@ -102,7 +103,7 @@ export const demoFunc = () => {

      const buttons = elementArg.querySelectorAll('dees-button');
      buttons.forEach(button => {
-        const text = button.textContent?.trim();
+        const text = (button as any).text?.trim();

        switch (text) {
          case 'Toggle Animation':
@@ -146,7 +147,7 @@ export const demoFunc = () => {
          case 'Toggle Edit Mode':
            button.addEventListener('click', () => {
              grid.editable = !grid.editable;
-              button.textContent = grid.editable ? 'Lock Grid' : 'Unlock Grid';
+              (button as any).text = grid.editable ? 'Lock Grid' : 'Unlock Grid';
            });
            break;
          case 'Reset Layout':
@@ -160,7 +161,7 @@ export const demoFunc = () => {
      });

      // Enhanced logging for reflow events
-      let lastPlaceholderPosition = null;
+      let lastPlaceholderPosition: Record<string, string> | null = null;
      let moveEventCounter = 0;

      // Helper function to log grid state
@@ -231,25 +232,28 @@ export const demoFunc = () => {
      // Log initial state
      logGridState('Initial Grid State');

-      grid.addEventListener('widget-move', (e: CustomEvent) => {
+      grid.addEventListener('widget-move', (e: Event) => {
+        const detail = (e as CustomEvent).detail;
        logGridState('Widget Move', {
-          widget: e.detail.widget,
-          displaced: e.detail.displaced,
-          swappedWith: e.detail.swappedWith
+          widget: detail.widget,
+          displaced: detail.displaced,
+          swappedWith: detail.swappedWith
        });
      });

-      grid.addEventListener('widget-resize', (e: CustomEvent) => {
+      grid.addEventListener('widget-resize', (e: Event) => {
+        const detail = (e as CustomEvent).detail;
        logGridState('Widget Resize', {
-          widget: e.detail.widget,
-          displaced: e.detail.displaced,
-          swappedWith: e.detail.swappedWith
+          widget: detail.widget,
+          displaced: detail.displaced,
+          swappedWith: detail.swappedWith
        });
      });

-      grid.addEventListener('widget-remove', (e: CustomEvent) => {
+      grid.addEventListener('widget-remove', (e: Event) => {
+        const detail = (e as CustomEvent).detail;
        logGridState('Widget Remove', {
-          removedWidget: e.detail.widget
+          removedWidget: detail.widget
        });
        updateStatus();
      });
@@ -312,7 +316,7 @@ export const demoFunc = () => {

      // Log compact operations
      const originalCompact = grid.compact.bind(grid);
-      grid.compact = (direction?: string) => {
+      grid.compact = (direction?: LayoutDirection) => {
        console.group('🗜️ Compacting Grid');
        console.log('Direction:', direction || 'vertical');
        logGridState('Before Compact');
--- a/ts_web/elements/00group-layout/dees-label/dees-label.ts
+++ b/ts_web/elements/00group-layout/dees-label/dees-label.ts
@@ -32,7 +32,7 @@ export class DeesLabel extends DeesElement {
    type: String,
    reflect: true,
  })
-  accessor description: string;
+  accessor description!: string;

  @property({
    type: Boolean,
--- a/ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts
+++ b/ts_web/elements/00group-layout/dees-stepper/dees-stepper.ts
@@ -45,7 +45,7 @@ export class DeesStepper extends DeesElement {
  @property({
    type: Object,
  })
-  accessor selectedStep: IStep;
+  accessor selectedStep!: IStep;

  constructor() {
    super();
@@ -214,19 +214,19 @@ export class DeesStepper extends DeesElement {
    this.setScrollStatus();
    // Remove entrance class after initial animation completes
    await this.domtools.convenience.smartdelay.delayFor(350);
-    this.shadowRoot.querySelector('.step.entrance')?.classList.remove('entrance');
+    this.shadowRoot!.querySelector('.step.entrance')?.classList.remove('entrance');
  }

  public async updated() {
    this.setScrollStatus();
  }

-  public scroller: typeof domtools.plugins.SweetScroll.prototype;
+  public scroller!: typeof domtools.plugins.SweetScroll.prototype;

  public async setScrollStatus() {
-    const stepperContainer: HTMLElement = this.shadowRoot.querySelector('.stepperContainer');
-    const firstStepElement: HTMLElement = this.shadowRoot.querySelector('.step');
-    const selectedStepElement: HTMLElement = this.shadowRoot.querySelector('.selected');
+    const stepperContainer = this.shadowRoot!.querySelector('.stepperContainer') as HTMLElement;
+    const firstStepElement = this.shadowRoot!.querySelector('.step') as HTMLElement;
+    const selectedStepElement = this.shadowRoot!.querySelector('.selected') as HTMLElement;
    if (!selectedStepElement) {
      return;
    }
@@ -278,7 +278,7 @@ export class DeesStepper extends DeesElement {
    this.selectedStep = previousStep;
    await this.domtoolsPromise;
    await this.domtools.convenience.smartdelay.delayFor(100);
-    this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot.querySelector('.selected'));
+    this.selectedStep.onReturnToStepFunc?.(this, this.shadowRoot!.querySelector('.selected') as HTMLElement);
  }

  public goNext() {
--- a/ts_web/elements/00group-layout/dees-tile/dees-tile.demo.ts
+++ b/ts_web/elements/00group-layout/dees-tile/dees-tile.demo.ts
@@ -0,0 +1,67 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import './dees-tile.js';
+
+export const demoFunc = () => {
+  return html`
+    <dees-demowrapper>
+      <style>
+        ${css`
+          .demoBox {
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+            padding: 40px;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .tile-demo-content {
+            position: absolute;
+            inset: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
+            font-size: 13px;
+          }
+          .footer-stats {
+            display: flex;
+            align-items: center;
+            gap: 24px;
+            font-size: 11px;
+            width: 100%;
+          }
+          .footer-stats .stat {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+          }
+          .footer-stats .stat strong {
+            color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <dees-tile heading="Simple Tile" style="height: 200px;">
+          <div class="tile-demo-content">Content area with rounded corners</div>
+        </dees-tile>
+
+        <dees-tile heading="Tile with Footer" style="height: 200px;">
+          <div class="tile-demo-content">Content goes here</div>
+          <div slot="footer" class="footer-stats">
+            <span class="stat">latest <strong>42</strong></span>
+            <span class="stat">min <strong>12</strong></span>
+            <span class="stat">max <strong>87</strong></span>
+            <span class="stat">avg <strong>45.3</strong></span>
+          </div>
+        </dees-tile>
+
+        <dees-tile style="height: 200px;">
+          <div slot="header" style="display:flex;align-items:center;gap:12px;width:100%;">
+            <span style="font-weight:500;">Custom Header</span>
+            <input type="text" placeholder="Search..." style="flex:1;max-width:200px;padding:2px 8px;border:1px solid;border-radius:4px;font-size:12px;background:transparent;color:inherit;border-color:inherit;">
+          </div>
+          <div class="tile-demo-content">Custom header slot with search input</div>
+        </dees-tile>
+      </div>
+    </dees-demowrapper>
+  `;
+};
--- a/ts_web/elements/00group-layout/dees-tile/dees-tile.ts
+++ b/ts_web/elements/00group-layout/dees-tile/dees-tile.ts
@@ -0,0 +1,139 @@
+import {
+  customElement,
+  DeesElement,
+  html,
+  css,
+  cssManager,
+  property,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import { demoFunc } from './dees-tile.demo.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
+import { themeDefaultStyles } from '../../00theme.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-tile': DeesTile;
+  }
+}
+
+/**
+ * dees-tile — the unified "rounded on rounded" tile frame.
+ *
+ * RESPONSIBILITIES (what this component owns):
+ *  1. Outer card — border, border-radius, background, overflow clipping
+ *  2. Flex column layout — stacking header / content / footer vertically
+ *  3. Content inset — the rounded inner area with border-top and border-bottom
+ *  4. Default heading — styled 32px heading text when no slot="header" is provided
+ *  5. Footer visibility — auto-hides footer area when slot="footer" is empty
+ *
+ * NOT RESPONSIBILITIES (what consumer components own):
+ *  - Header/footer height, padding, font-size, colors when using custom slots
+ *  - Content layout (absolute, flex, grid — consumer decides)
+ *  - Any semantic meaning of header/footer content
+ *
+ * The header and footer slots are BARE containers (just flex-shrink: 0).
+ * The slotted content fully controls its own appearance.
+ * Only the default heading fallback (.tile-heading) carries tile-level styling.
+ */
+@customElement('dees-tile')
+export class DeesTile extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Layout'];
+
+  @property({ type: String })
+  accessor heading: string = '';
+
+  @state()
+  accessor hasFooter: boolean = false;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        font-family: ${cssGeistFontFamily};
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+      }
+
+      /* --- The frame --- */
+      .tile-outer {
+        position: relative;
+        flex: 1;
+        min-height: 0;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 8px;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+
+      /* --- Header: bare container, only the default heading gets styled --- */
+      .tile-header {
+        flex-shrink: 0;
+      }
+
+      .tile-heading {
+        height: 32px;
+        line-height: 32px;
+        padding: 0 16px;
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+      }
+
+      /* --- Content: the rounded inset --- */
+      .tile-content {
+        flex: 1;
+        position: relative;
+        border-radius: 8px;
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 93%)', 'hsl(0 0% 11%)')};
+        overflow: hidden;
+      }
+
+      .tile-content.no-footer {
+        border-bottom: none;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      /* --- Footer: bare container, consumer styles the slotted content --- */
+      .tile-footer {
+        flex-shrink: 0;
+      }
+
+      .tile-footer.hidden {
+        display: none;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="tile-outer" part="outer">
+        <div class="tile-header" part="header">
+          <slot name="header">
+            <div class="tile-heading">${this.heading}</div>
+          </slot>
+        </div>
+        <div class="tile-content ${!this.hasFooter ? 'no-footer' : ''}" part="content">
+          <slot></slot>
+        </div>
+        <div class="tile-footer ${!this.hasFooter ? 'hidden' : ''}" part="footer">
+          <slot name="footer" @slotchange=${this.onFooterSlotChange}></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  private onFooterSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    this.hasFooter = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+}
--- a/ts_web/elements/00group-layout/dees-tile/index.ts
+++ b/ts_web/elements/00group-layout/dees-tile/index.ts
@@ -0,0 +1 @@
+export * from './dees-tile.js';
--- a/ts_web/elements/00group-layout/index.ts
+++ b/ts_web/elements/00group-layout/index.ts
@@ -6,3 +6,4 @@ export * from './dees-label/index.js';
 export * from './dees-pagination/index.js';
 export * from './dees-panel/index.js';
 export * from './dees-stepper/index.js';
+export * from './dees-tile/index.js';
--- a/ts_web/elements/00group-media/dees-pdf-shared/utils.ts
+++ b/ts_web/elements/00group-media/dees-pdf-shared/utils.ts
@@ -21,9 +21,9 @@ export function throttle<T extends (...args: any[]) => any>(
 ): (...args: Parameters<T>) => void {
  let inThrottle: boolean;

-  return function executedFunction(...args: Parameters<T>) {
+  return (...args: Parameters<T>) => {
    if (!inThrottle) {
-      func.apply(this, args);
+      func(...args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
--- a/ts_web/elements/00group-media/dees-tile-pdf/demo.ts
+++ b/ts_web/elements/00group-media/dees-tile-pdf/demo.ts
@@ -7,7 +7,7 @@ export const demo = () => {
  ];

  const generateGridItems = (count: number) => {
-    const items = [];
+    const items: ReturnType<typeof html>[] = [];
    for (let i = 0; i < count; i++) {
      const pdfUrl = samplePdfs[i % samplePdfs.length];
      items.push(html`
--- a/ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.ts
+++ b/ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.ts
@@ -130,7 +130,7 @@ export class DeesContextmenu extends DeesElement {
    type: Array,
  })
  accessor menuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean; submenu?: (plugins.tsclass.website.IMenuItem & { shortcut?: string; disabled?: boolean } | { divider: true })[]; divider?: never } | { divider: true })[] = [];
-  windowLayer: DeesWindowLayer;
+  windowLayer!: DeesWindowLayer;
  
  private submenu: DeesContextmenu | null = null;
  private submenuTimeout: any = null;
@@ -278,7 +278,7 @@ export class DeesContextmenu extends DeesElement {
  }
  
  private handleKeydown = (event: KeyboardEvent) => {
-    const menuItems = Array.from(this.shadowRoot.querySelectorAll('.menuitem:not(.disabled)'));
+    const menuItems = Array.from(this.shadowRoot!.querySelectorAll('.menuitem:not(.disabled)'));
    const currentIndex = menuItems.findIndex(item => item.matches(':hover'));
    
    switch (event.key) {
@@ -352,7 +352,7 @@ export class DeesContextmenu extends DeesElement {
    if (!menuItem.submenu || menuItem.submenu.length === 0) return;
    
    // Find the menu item element
-    const menuItems = Array.from(this.shadowRoot.querySelectorAll('.menuitem'));
+    const menuItems = Array.from(this.shadowRoot!.querySelectorAll('.menuitem'));
    const menuItemElement = menuItems.find(el => el.querySelector('.menuitem-text')?.textContent === menuItem.name) as HTMLElement;
    if (!menuItemElement) return;
    
--- a/ts_web/elements/00group-overlay/dees-modal/dees-modal.demo.ts
+++ b/ts_web/elements/00group-overlay/dees-modal/dees-modal.demo.ts
@@ -49,7 +49,7 @@ export const demoFunc = () => html`
            heading: 'With Help Button',
            showHelpButton: true,
            onHelp: async () => {
-              const helpModal = await DeesModal.createAndShow({
+              await DeesModal.createAndShow({
                heading: 'Help',
                width: 'small',
                showCloseButton: true,
@@ -60,7 +60,7 @@ export const demoFunc = () => html`
                `,
                menuOptions: [{
                  name: 'Got it',
-                  action: async (modal) => modal.destroy()
+                  action: async (modal) => modal!.destroy()
                }],
              });
            },
@@ -70,7 +70,7 @@ export const demoFunc = () => html`
            `,
            menuOptions: [{
              name: 'OK',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }],
          });
        }}>With Help Button</dees-button>
@@ -85,7 +85,7 @@ export const demoFunc = () => html`
            `,
            menuOptions: [{
              name: 'Close',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }],
          });
        }}>No Close Button</dees-button>
@@ -101,7 +101,7 @@ export const demoFunc = () => html`
            `,
            menuOptions: [{
              name: 'Done',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }],
          });
        }}>Both Buttons</dees-button>
@@ -116,7 +116,7 @@ export const demoFunc = () => html`
            `,
            menuOptions: [{
              name: 'Close',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }],
          });
        }}>Clean Header</dees-button>
@@ -136,10 +136,10 @@ export const demoFunc = () => html`
            `,
            menuOptions: [{
              name: 'Cancel',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }, {
              name: 'OK',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }],
          });
        }}>Small Modal</dees-button>
@@ -157,10 +157,10 @@ export const demoFunc = () => html`
            `,
            menuOptions: [{
              name: 'Cancel',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }, {
              name: 'Sign Up',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }],
          });
        }}>Medium Modal</dees-button>
@@ -181,10 +181,10 @@ export const demoFunc = () => html`
            `,
            menuOptions: [{
              name: 'Cancel',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }, {
              name: 'Save',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }],
          });
        }}>Large Modal</dees-button>
@@ -207,10 +207,10 @@ export const demoFunc = () => html`
            `,
            menuOptions: [{
              name: 'Save',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }, {
              name: 'Cancel',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }],
          });
        }}>Fullscreen Modal</dees-button>
@@ -230,7 +230,7 @@ export const demoFunc = () => html`
            `,
            menuOptions: [{
              name: 'Close',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }],
          });
        }}>Custom 700px</dees-button>
@@ -245,7 +245,7 @@ export const demoFunc = () => html`
            `,
            menuOptions: [{
              name: 'Got it',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }],
          });
        }}>Max Width 600px</dees-button>
@@ -260,7 +260,7 @@ export const demoFunc = () => html`
            `,
            menuOptions: [{
              name: 'OK',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }],
          });
        }}>Min Width 400px</dees-button>
@@ -279,13 +279,13 @@ export const demoFunc = () => html`
            `,
            menuOptions: [{
              name: 'Delete',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }, {
              name: 'Cancel',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }, {
              name: 'Save Changes',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }],
          });
        }}>Three Buttons</dees-button>
@@ -298,7 +298,7 @@ export const demoFunc = () => html`
            `,
            menuOptions: [{
              name: 'Acknowledge',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }],
          });
        }}>Single Button</dees-button>
@@ -322,10 +322,10 @@ export const demoFunc = () => html`
            `,
            menuOptions: [{
              name: 'Discard All Changes',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }, {
              name: 'Save and Continue Editing',
-              action: async (modal) => modal.destroy()
+              action: async (modal) => modal!.destroy()
            }],
          });
        }}>Long Labels</dees-button>
@@ -347,7 +347,7 @@ export const demoFunc = () => html`
          `,
          menuOptions: [{
            name: 'Close',
-            action: async (modal) => modal.destroy()
+            action: async (modal) => modal!.destroy()
          }],
        });
      }}>Test Responsive</dees-button>
--- a/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
+++ b/ts_web/elements/00group-overlay/dees-modal/dees-modal.ts
@@ -85,7 +85,7 @@ export class DeesModal extends DeesElement {
  accessor heading = '';

  @state({})
-  accessor content: TemplateResult;
+  accessor content!: TemplateResult;

  @state({})
  accessor menuOptions: plugins.tsclass.website.IMenuItem<DeesModal>[] = [];
@@ -94,10 +94,10 @@ export class DeesModal extends DeesElement {
  accessor width: 'small' | 'medium' | 'large' | 'fullscreen' | number = 'medium';

  @property({ type: Number })
-  accessor maxWidth: number;
+  accessor maxWidth!: number;

  @property({ type: Number })
-  accessor minWidth: number;
+  accessor minWidth!: number;

  @property({ type: Boolean })
  accessor showCloseButton: boolean = true;
@@ -106,7 +106,7 @@ export class DeesModal extends DeesElement {
  accessor showHelpButton: boolean = false;

  @property({ attribute: false })
-  accessor onHelp: () => void | Promise<void>;
+  accessor onHelp!: () => void | Promise<void>;

  @property({ type: Boolean })
  accessor mobileFullscreen: boolean = false;
@@ -383,18 +383,18 @@ export class DeesModal extends DeesElement {
    `;
  }

-  private windowLayer: DeesWindowLayer;
+  private windowLayer!: DeesWindowLayer;
  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
    super.firstUpdated(_changedProperties);
    const domtools = await this.domtoolsPromise;
    await domtools.convenience.smartdelay.delayFor(30);
-    const modal = this.shadowRoot.querySelector('.modal');
-    modal.classList.add('show');
+    const modal = this.shadowRoot!.querySelector('.modal');
+    modal!.classList.add('show');
  }

  public async handleOutsideClick(eventArg: MouseEvent) {
    eventArg.stopPropagation();
-    const modalContainer = this.shadowRoot.querySelector('.modalContainer');
+    const modalContainer = this.shadowRoot!.querySelector('.modalContainer');
    if (eventArg.target === modalContainer) {
      await this.destroy();
    }
@@ -402,8 +402,8 @@ export class DeesModal extends DeesElement {

  public async destroy() {
    const domtools = await this.domtoolsPromise;
-    const modal = this.shadowRoot.querySelector('.modal');
-    modal.classList.add('predestroy');
+    const modal = this.shadowRoot!.querySelector('.modal');
+    modal!.classList.add('predestroy');
    await domtools.convenience.smartdelay.delayFor(200);
    document.body.removeChild(this);
    await this.windowLayer.destroy();
--- a/ts_web/elements/00group-overlay/dees-speechbubble/dees-speechbubble.ts
+++ b/ts_web/elements/00group-overlay/dees-speechbubble/dees-speechbubble.ts
@@ -42,7 +42,7 @@ export class DeesSpeechbubble extends DeesElement {
    speechbubble.manifested = true;
    windowLayer.appendChild(speechbubble);
    windowLayer.style.pointerEvents = 'none';
-    (windowLayer.shadowRoot.querySelector('.windowOverlay') as HTMLElement).style.pointerEvents = 'none';
+    (windowLayer.shadowRoot!.querySelector('.windowOverlay') as HTMLElement).style.pointerEvents = 'none';
    return speechbubble;
  }

@@ -50,13 +50,13 @@ export class DeesSpeechbubble extends DeesElement {
  @property({
    type: Object,
  })
-  accessor reffedElement: HTMLElement;
+  accessor reffedElement!: HTMLElement;

  @property({
    type: String,
    reflect: true,
  })
-  accessor text: string;
+  accessor text!: string;

  @property({
    type: Boolean,
@@ -73,7 +73,7 @@ export class DeesSpeechbubble extends DeesElement {
  })
  accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';

-  public windowLayer: DeesWindowLayer;
+  public windowLayer!: DeesWindowLayer;

  constructor() {
    super();
@@ -189,7 +189,7 @@ export class DeesSpeechbubble extends DeesElement {
    }
    if (this.manifested) {
      await this.updatePosition();
-      (this.shadowRoot.querySelector('.maincontainer') as HTMLElement).style.opacity = '1';
+      (this.shadowRoot!.querySelector('.maincontainer') as HTMLElement).style.opacity = '1';
    } else {
      // lets make sure we instrument it
      let speechbubble: DeesSpeechbubble;
@@ -227,7 +227,7 @@ export class DeesSpeechbubble extends DeesElement {
  public async show() {}

  public async destroy() {
-    (this.shadowRoot.querySelector('.maincontainer') as HTMLElement).style.opacity = '0';
+    (this.shadowRoot!.querySelector('.maincontainer') as HTMLElement).style.opacity = '0';
    this.windowLayer.destroy();
  }
 }
--- a/ts_web/elements/00group-runtime/environments/WebContainerEnvironment.ts
+++ b/ts_web/elements/00group-runtime/environments/WebContainerEnvironment.ts
@@ -132,7 +132,7 @@ export class WebContainerEnvironment implements IExecutionEnvironment {
    const watcher = this.container!.fs.watch(
      path,
      { recursive: options?.recursive ?? false },
-      callback
+      callback as (event: 'rename' | 'change', filename: string | Uint8Array) => void
    );
    return {
      stop: () => watcher.close(),
--- a/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.demo.ts
+++ b/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.demo.ts
@@ -109,14 +109,14 @@ export const demoFunc = () => html`

      <dees-panel .title=${'Interactive Shopping Cart'} .subtitle=${'Product cards with dynamic cart calculation'} .runAfterRender=${async (elementArg: HTMLElement) => {
        const products = [
-          { id: 'laptop', element: null, data: { name: 'MacBook Pro 14"', category: 'Computers', description: 'M3 Pro chip with 18GB RAM', price: 1999, originalPrice: 2199, iconName: 'lucide:laptop' }},
-          { id: 'ipad', element: null, data: { name: 'iPad Air', category: 'Tablets', description: '10.9" Liquid Retina display', price: 599, iconName: 'lucide:tablet' }},
-          { id: 'keyboard', element: null, data: { name: 'Magic Keyboard', category: 'Accessories', description: 'Wireless keyboard with Touch ID', price: 149, iconName: 'lucide:keyboard' }}
+          { id: 'laptop', element: null as DeesShoppingProductcard | null, data: { name: 'MacBook Pro 14"', category: 'Computers', description: 'M3 Pro chip with 18GB RAM', price: 1999, originalPrice: 2199, iconName: 'lucide:laptop' }},
+          { id: 'ipad', element: null as DeesShoppingProductcard | null, data: { name: 'iPad Air', category: 'Tablets', description: '10.9" Liquid Retina display', price: 599, iconName: 'lucide:tablet' }},
+          { id: 'keyboard', element: null as DeesShoppingProductcard | null, data: { name: 'Magic Keyboard', category: 'Accessories', description: 'Wireless keyboard with Touch ID', price: 149, iconName: 'lucide:keyboard' }}
        ];

        const updateCartSummary = () => {
          let total = 0;
-          const items = [];
+          const items: string[] = [];
          
          products.forEach(product => {
            const element = elementArg.querySelector(`#${product.id}`) as DeesShoppingProductcard;
@@ -216,8 +216,8 @@ export const demoFunc = () => html`
              const output = document.querySelector('#selection-output');
              if (output) {
                const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
-                const selectedProducts = [];
-                selectedCards.forEach((card: DeesShoppingProductcard) => {
+                const selectedProducts: string[] = [];
+                (selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
                  if (card.selected) {
                    selectedProducts.push(card.productData.name);
                  }
@@ -243,8 +243,8 @@ export const demoFunc = () => html`
              const output = document.querySelector('#selection-output');
              if (output) {
                const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
-                const selectedProducts = [];
-                selectedCards.forEach((card: DeesShoppingProductcard) => {
+                const selectedProducts: string[] = [];
+                (selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
                  if (card.selected) {
                    selectedProducts.push(card.productData.name);
                  }
@@ -271,8 +271,8 @@ export const demoFunc = () => html`
              const output = document.querySelector('#selection-output');
              if (output) {
                const selectedCards = document.querySelectorAll('dees-shopping-productcard[selectable]');
-                const selectedProducts = [];
-                selectedCards.forEach((card: DeesShoppingProductcard) => {
+                const selectedProducts: string[] = [];
+                (selectedCards as NodeListOf<DeesShoppingProductcard>).forEach((card) => {
                  if (card.selected) {
                    selectedProducts.push(card.productData.name);
                  }
--- a/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts
+++ b/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts
@@ -9,6 +9,7 @@ import {
 } from '@design.estate/dees-element';
 import { demoFunc } from './dees-shopping-productcard.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-layout/dees-tile/dees-tile.js';

 declare global {
  interface HTMLElementTagNameMap {
@@ -61,28 +62,20 @@ export class DeesShoppingProductcard extends DeesElement {
        display: block;
      }

-      .product-card {
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 11.8%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 8px;
-        overflow: hidden;
-        transition: all 0.2s ease;
-        display: flex;
-        flex-direction: column;
+      dees-tile {
        height: 100%;
-        position: relative;
      }

-      .product-card:hover {
+      dees-tile:hover::part(outer) {
        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
        box-shadow: 0 4px 6px -1px hsl(0 0% 0% / 0.1), 0 2px 4px -2px hsl(0 0% 0% / 0.1);
      }

-      .product-card.selectable {
+      dees-tile.selectable {
        cursor: pointer;
      }

-      .product-card.selected {
+      dees-tile.selected::part(outer) {
        border-color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.1)', 'hsl(213.1 93.9% 67.8% / 0.1)')};
      }
@@ -143,36 +136,48 @@ export class DeesShoppingProductcard extends DeesElement {
        transform: scale(1);
      }

-      .product-content {
-        padding: 16px;
+      .product-header-bar {
        display: flex;
-        flex-direction: column;
-        gap: 12px;
-        flex: 1;
+        align-items: center;
+        justify-content: space-between;
+        height: 32px;
+        padding: 0 16px;
+        gap: 8px;
      }
-      
-      .product-header {
-        display: flex;
-        flex-direction: column;
-        gap: 4px;
+
+      .product-name {
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
      }

      .product-category {
-        font-size: 12px;
+        font-size: 11px;
        font-weight: 500;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
        text-transform: uppercase;
        letter-spacing: 0.05em;
-        line-height: 1.3;
-      }
-      
-      .product-name {
-        font-size: 16px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        line-height: 1.4;
+        white-space: nowrap;
+        flex-shrink: 0;
      }

+      .product-body {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .product-content {
+        padding: 12px 16px;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        flex: 1;
+      }
+      
      .product-description {
        font-size: 13px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
@@ -185,8 +190,9 @@ export class DeesShoppingProductcard extends DeesElement {
        align-items: center;
        justify-content: space-between;
        gap: 16px;
-        padding-top: 12px;
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        padding: 12px 16px;
+        width: 100%;
+        box-sizing: border-box;
      }

      .product-price {
@@ -248,66 +254,68 @@ export class DeesShoppingProductcard extends DeesElement {
    };

    return html`
-      <div 
-        class="product-card ${this.selectable ? 'selectable' : ''} ${this.selected ? 'selected' : ''}"
+      <dees-tile
+        class="${this.selectable ? 'selectable' : ''} ${this.selected ? 'selected' : ''}"
        @click=${this.handleCardClick}
      >
-        <div class="product-image">
-          ${imageUrl ? html`
-            <img src="${imageUrl}" alt="${name}">
-          ` : html`
-            <dees-icon .icon=${iconName}></dees-icon>
-          `}
-          ${this.selectable ? html`
-            <div 
-              class="selection-checkbox ${this.selected ? 'checked' : ''}"
-              @click=${(e: Event) => {
-                e.stopPropagation();
-                this.handleSelectionToggle();
-              }}
-            >
-              <dees-icon .icon=${'lucide:check'}></dees-icon>
-            </div>
-          ` : ''}
+        <div slot="header" class="product-header-bar">
+          <span class="product-name">${name}</span>
+          ${category ? html`<span class="product-category">${category}</span>` : ''}
        </div>
-        <div class="product-content">
-          <div class="product-header">
-            ${category ? html`<div class="product-category">${category}</div>` : ''}
-            <div class="product-name">${name}</div>
-          </div>
-          ${description ? html`
-            <div class="product-description">${description}</div>
-          ` : ''}
-          <div class="stock-status ${inStock ? 'in-stock' : 'out-of-stock'}">
-            <dees-icon .icon=${inStock ? 'lucide:check-circle' : 'lucide:x-circle'}></dees-icon>
-            ${stockText}
-          </div>
-          <div class="product-footer">
-            <div class="product-price">
-              <span class="price-current">${formatPrice(price)}</span>
-              ${originalPrice && originalPrice > price ? html`
-                <span class="price-original">${formatPrice(originalPrice)}</span>
-              ` : ''}
-            </div>
-            ${this.showQuantitySelector ? html`
-              <dees-input-quantityselector
-                .value=${this.quantity}
-                @changeSubject=${(e: CustomEvent) => {
-                  this.quantity = e.detail.getValue();
-                  this.dispatchEvent(new CustomEvent('quantityChange', {
-                    detail: { 
-                      quantity: this.quantity,
-                      productData: this.productData 
-                    },
-                    bubbles: true,
-                    composed: true
-                  }));
+        <div class="product-body">
+          <div class="product-image">
+            ${imageUrl ? html`
+              <img src="${imageUrl}" alt="${name}">
+            ` : html`
+              <dees-icon .icon=${iconName}></dees-icon>
+            `}
+            ${this.selectable ? html`
+              <div
+                class="selection-checkbox ${this.selected ? 'checked' : ''}"
+                @click=${(e: Event) => {
+                  e.stopPropagation();
+                  this.handleSelectionToggle();
                }}
-              ></dees-input-quantityselector>
+              >
+                <dees-icon .icon=${'lucide:check'}></dees-icon>
+              </div>
            ` : ''}
          </div>
+          <div class="product-content">
+            ${description ? html`
+              <div class="product-description">${description}</div>
+            ` : ''}
+            <div class="stock-status ${inStock ? 'in-stock' : 'out-of-stock'}">
+              <dees-icon .icon=${inStock ? 'lucide:check-circle' : 'lucide:x-circle'}></dees-icon>
+              ${stockText}
+            </div>
+          </div>
        </div>
-      </div>
+        <div slot="footer" class="product-footer">
+          <div class="product-price">
+            <span class="price-current">${formatPrice(price)}</span>
+            ${originalPrice && originalPrice > price ? html`
+              <span class="price-original">${formatPrice(originalPrice)}</span>
+            ` : ''}
+          </div>
+          ${this.showQuantitySelector ? html`
+            <dees-input-quantityselector
+              .value=${this.quantity}
+              @changeSubject=${(e: CustomEvent) => {
+                this.quantity = e.detail.getValue();
+                this.dispatchEvent(new CustomEvent('quantityChange', {
+                  detail: {
+                    quantity: this.quantity,
+                    productData: this.productData
+                  },
+                  bubbles: true,
+                  composed: true
+                }));
+              }}
+            ></dees-input-quantityselector>
+          ` : ''}
+        </div>
+      </dees-tile>
    `;
  }

--- a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts
+++ b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts
@@ -1,5 +1,5 @@
 import { html, DeesElement, customElement, css, cssManager } from '@design.estate/dees-element';
-import type { IView } from './dees-simple-appdash.js';
+import type { IView, IGlobalMessage } from './dees-simple-appdash.js';
 import '../../00group-form/dees-form/dees-form.js';
 import '../../00group-input/dees-input-text/dees-input-text.js';
 import '../../00group-input/dees-input-checkbox/dees-input-checkbox.js';
@@ -263,6 +263,44 @@ export const demoFunc = () => html`
    <dees-simple-appdash
      name="My Application"
      terminalSetupCommand="echo 'Welcome to the terminal!'"
+      .globalMessages=${[
+        {
+          id: 'update',
+          type: 'info',
+          message: 'A new version (v3.50.0) is available with performance improvements and bug fixes.',
+          dismissible: true,
+          actions: [
+            {
+              name: 'Update Now',
+              iconName: 'lucide:download',
+              action: () => alert('Updating...'),
+            },
+            {
+              name: 'Release Notes',
+              action: () => alert('Opening release notes...'),
+            },
+          ],
+        },
+        {
+          id: 'maintenance',
+          type: 'warning',
+          message: 'Scheduled maintenance window: April 5, 2026 02:00–06:00 UTC. Some services may be temporarily unavailable.',
+          dismissible: true,
+        },
+        {
+          id: 'critical',
+          type: 'error',
+          message: 'Your SSL certificate expires in 3 days. Renew now to avoid service disruption.',
+          dismissible: false,
+          actions: [
+            {
+              name: 'Renew Certificate',
+              iconName: 'lucide:shieldCheck',
+              action: () => alert('Renewing certificate...'),
+            },
+          ],
+        },
+      ] as IGlobalMessage[]}
      .viewTabs=${[
        {
          name: 'Dashboard',
--- a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
+++ b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
@@ -29,6 +29,23 @@ export interface IView {
  element: DeesElement['constructor']['prototype'];
 }

+export type TGlobalMessageType = 'info' | 'success' | 'warning' | 'error';
+
+export interface IGlobalMessageAction {
+  name: string;
+  iconName?: string;
+  action: () => void | Promise<void>;
+}
+
+export interface IGlobalMessage {
+  id: string;
+  type: TGlobalMessageType;
+  message: string;
+  dismissible?: boolean;
+  icon?: string;
+  actions?: IGlobalMessageAction[];
+}
+
@customElement('dees-simple-appdash')
 export class DeesSimpleAppDash extends DeesElement {
  // STATIC
@@ -45,8 +62,14 @@ export class DeesSimpleAppDash extends DeesElement {
  @property({ type: String })
  accessor terminalSetupCommand: string = `echo "Terminal ready"`;

+  @property({ type: Array })
+  accessor globalMessages: IGlobalMessage[] = [];
+
  @state()
-  accessor selectedView: IView;
+  accessor selectedView!: IView;
+
+  @state()
+  accessor _activeMessages: IGlobalMessage[] = [];


  public static styles = [
@@ -327,6 +350,170 @@ export class DeesSimpleAppDash extends DeesElement {
      .control.status-terminal dees-icon {
        color: hsl(45 90% 55%);
      }
+
+      /* Global Message Banners */
+      .messageBannerArea {
+        position: absolute;
+        top: 0;
+        left: 240px;
+        right: 0;
+        z-index: 3;
+        display: flex;
+        flex-direction: column;
+        transition: height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .messageBanner {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px 16px;
+        font-size: 13px;
+        font-family: 'Geist Sans', sans-serif;
+        font-weight: 500;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
+        animation: bannerSlideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+      }
+
+      .messageBanner.dismissing {
+        animation: bannerSlideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+      }
+
+      @keyframes bannerSlideDown {
+        from {
+          opacity: 0;
+          transform: translateY(-100%);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      @keyframes bannerSlideUp {
+        from {
+          opacity: 1;
+          transform: translateY(0);
+        }
+        to {
+          opacity: 0;
+          transform: translateY(-100%);
+        }
+      }
+
+      .messageBanner dees-icon {
+        font-size: 16px;
+        flex-shrink: 0;
+      }
+
+      .messageBanner-text {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .messageBanner-actions {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        flex-shrink: 0;
+      }
+
+      .messageBanner-action {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 4px 12px;
+        border-radius: 4px;
+        cursor: default;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.01em;
+        transition: all 0.15s ease;
+        white-space: nowrap;
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 100% / 0.1)')};
+        color: inherit;
+      }
+
+      .messageBanner-action:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.15)', 'hsl(0 0% 100% / 0.18)')};
+      }
+
+      .messageBanner-action:active {
+        transform: scale(0.97);
+      }
+
+      .messageBanner-action dees-icon {
+        font-size: 13px;
+      }
+
+      .messageBanner-dismiss {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 24px;
+        border-radius: 4px;
+        cursor: default;
+        opacity: 0.5;
+        transition: all 0.15s ease;
+      }
+
+      .messageBanner-dismiss:hover {
+        opacity: 1;
+        background: hsl(0 0% 0% / 0.1);
+      }
+
+      /* Message type: info */
+      .messageBanner-info {
+        background: ${cssManager.bdTheme('hsl(210 100% 97%)', 'hsl(210 50% 10%)')};
+        color: ${cssManager.bdTheme('hsl(210 70% 30%)', 'hsl(210 70% 80%)')};
+        border-left: 3px solid #0084ff;
+      }
+      .messageBanner-info dees-icon {
+        color: #0084ff;
+      }
+
+      /* Message type: success */
+      .messageBanner-success {
+        background: ${cssManager.bdTheme('hsl(142 70% 97%)', 'hsl(142 30% 10%)')};
+        color: ${cssManager.bdTheme('hsl(142 50% 25%)', 'hsl(142 50% 80%)')};
+        border-left: 3px solid #22c55e;
+      }
+      .messageBanner-success dees-icon {
+        color: #22c55e;
+      }
+
+      /* Message type: warning */
+      .messageBanner-warning {
+        background: ${cssManager.bdTheme('hsl(38 90% 97%)', 'hsl(38 40% 10%)')};
+        color: ${cssManager.bdTheme('hsl(38 60% 25%)', 'hsl(38 60% 80%)')};
+        border-left: 3px solid #f59e0b;
+      }
+      .messageBanner-warning dees-icon {
+        color: #f59e0b;
+      }
+
+      /* Message type: error */
+      .messageBanner-error {
+        background: ${cssManager.bdTheme('hsl(0 70% 97%)', 'hsl(0 40% 10%)')};
+        color: ${cssManager.bdTheme('hsl(0 60% 30%)', 'hsl(0 60% 80%)')};
+        border-left: 3px solid #ef4444;
+      }
+      .messageBanner-error dees-icon {
+        color: #ef4444;
+      }
+
+      .messageBanner-dismiss:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.08)', 'hsl(0 0% 100% / 0.1)')};
+      }
+
+      .appcontent {
+        top: var(--banner-area-height, 0px);
+        height: calc(100% - 24px - var(--banner-area-height, 0px));
+      }
    `,
  ];

@@ -369,6 +556,34 @@ export class DeesSimpleAppDash extends DeesElement {
            </div>
          </div>
        </div>
+        ${this._activeMessages.length > 0 ? html`
+        <div class="messageBannerArea">
+          ${this._activeMessages.map(msg => html`
+            <div
+              class="messageBanner messageBanner-${msg.type}"
+              data-message-id="${msg.id}"
+            >
+              <dees-icon .icon="${this.getMessageIcon(msg)}"></dees-icon>
+              <span class="messageBanner-text">${msg.message}</span>
+              ${msg.actions?.length ? html`
+                <div class="messageBanner-actions">
+                  ${msg.actions.map(a => html`
+                    <div class="messageBanner-action" @click=${() => a.action()}>
+                      ${a.iconName ? html`<dees-icon .icon="${a.iconName.includes(':') ? a.iconName : `lucide:${a.iconName}`}"></dees-icon>` : ''}
+                      <span>${a.name}</span>
+                    </div>
+                  `)}
+                </div>
+              ` : ''}
+              ${msg.dismissible !== false ? html`
+                <div class="messageBanner-dismiss" @click=${() => this.removeMessage(msg.id)}>
+                  <dees-icon .icon="${'lucide:x'}"></dees-icon>
+                </div>
+              ` : ''}
+            </div>
+          `)}
+        </div>
+      ` : ''}
        <div class="appcontent">
          <!-- Content goes here -->
        </div>
@@ -386,7 +601,7 @@ export class DeesSimpleAppDash extends DeesElement {
    `;
  }

-  public async firstUpdated(_changedProperties): Promise<void> {
+  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
    const domtools = await this.domtoolsPromise;
    super.firstUpdated(_changedProperties);
    if (this.viewTabs && this.viewTabs.length > 0) {
@@ -394,8 +609,88 @@ export class DeesSimpleAppDash extends DeesElement {
      await this.loadView(viewToLoad);
    }
  }
+
+  public willUpdate(changedProperties: Map<string, unknown>) {
+    if (changedProperties.has('globalMessages')) {
+      // Sync globalMessages property into _activeMessages
+      // Keep any messages added via addMessage() that aren't in globalMessages
+      const propertyIds = new Set(this.globalMessages.map(m => m.id));
+      const existingIds = new Set(this._activeMessages.map(m => m.id));
+
+      // Add new messages from property that aren't already active
+      const newMessages = this.globalMessages.filter(m => !existingIds.has(m.id));
+
+      // Keep messages added via API (those not in globalMessages are kept as-is)
+      // Remove messages that were in the previous globalMessages but are no longer
+      const previousGlobalMessages = (changedProperties.get('globalMessages') as IGlobalMessage[]) || [];
+      const previousIds = new Set(previousGlobalMessages.map(m => m.id));
+      const removedIds = new Set([...previousIds].filter(id => !propertyIds.has(id)));
+
+      this._activeMessages = [
+        ...this._activeMessages.filter(m => !removedIds.has(m.id)),
+        ...newMessages,
+      ];
+    }
+  }
+
+  public updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+    this.updateBannerOffset();
+  }
+
+  private updateBannerOffset() {
+    requestAnimationFrame(() => {
+      const bannerArea = this.shadowRoot?.querySelector('.messageBannerArea') as HTMLElement;
+      const maincontainer = this.shadowRoot?.querySelector('.maincontainer') as HTMLElement;
+      const height = bannerArea ? bannerArea.offsetHeight : 0;
+      maincontainer?.style.setProperty('--banner-area-height', `${height}px`);
+    });
+  }
+
+  private getMessageIcon(msg: IGlobalMessage): string {
+    if (msg.icon) return msg.icon;
+    const defaults: Record<TGlobalMessageType, string> = {
+      info: 'lucide:info',
+      success: 'lucide:circleCheck',
+      warning: 'lucide:triangleAlert',
+      error: 'lucide:circleX',
+    };
+    return defaults[msg.type];
+  }
+
+  public addMessage(message: Omit<IGlobalMessage, 'id'> & { id?: string }): string {
+    const id = message.id || `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    const fullMessage: IGlobalMessage = {
+      dismissible: true,
+      ...message,
+      id,
+    };
+    this._activeMessages = [...this._activeMessages, fullMessage];
+    return id;
+  }
+
+  public removeMessage(id: string): void {
+    const bannerEl = this.shadowRoot?.querySelector(`[data-message-id="${id}"]`) as HTMLElement;
+    if (bannerEl) {
+      bannerEl.classList.add('dismissing');
+      bannerEl.addEventListener('animationend', () => {
+        this._activeMessages = this._activeMessages.filter(m => m.id !== id);
+        this.dispatchEvent(new CustomEvent('message-dismiss', {
+          detail: { id },
+          bubbles: true,
+          composed: true,
+        }));
+      }, { once: true });
+    } else {
+      this._activeMessages = this._activeMessages.filter(m => m.id !== id);
+    }
+  }
+
+  public clearMessages(): void {
+    this._activeMessages = [];
+  }
  
-  public currentTerminal: DeesWorkspaceTerminal;
+  public currentTerminal: DeesWorkspaceTerminal | null = null;
  public async launchTerminal() {
    const domtools = await this.domtoolsPromise;
    if (this.currentTerminal) {
@@ -404,7 +699,7 @@ export class DeesSimpleAppDash extends DeesElement {
      return;
    }

-    const maincontainer = this.shadowRoot.querySelector('.maincontainer');
+    const maincontainer = this.shadowRoot!.querySelector('.maincontainer')! as HTMLElement;
    const { DeesWorkspaceTerminal } = await import('../../00group-workspace/dees-workspace-terminal/dees-workspace-terminal.js');
    const terminal = new DeesWorkspaceTerminal();
    terminal.setupCommand = this.terminalSetupCommand;
@@ -412,16 +707,15 @@ export class DeesSimpleAppDash extends DeesElement {
    maincontainer.appendChild(terminal);
    terminal.style.position = 'absolute';
    terminal.style.zIndex = '10';
-    terminal.style.top = '0px';
+    terminal.style.top = 'var(--banner-area-height, 0px)';
    terminal.style.left = '240px';
    terminal.style.right = '0px';
+    terminal.style.height = 'auto';
    terminal.style.bottom = '24px';
    terminal.style.opacity = '0';
    terminal.style.transform = 'translateY(8px) scale(0.99)';
    terminal.style.transition = 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)';
    terminal.style.boxShadow = '0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)';
-    terminal.style.maxWidth = `calc(${maincontainer.clientWidth}px -240px)`;
-    terminal.style.maxHeight = `calc(${maincontainer.clientHeight}px - 24px)`;
    
    // Add close button to terminal
    terminal.addEventListener('close', () => this.closeTerminal());
@@ -444,9 +738,9 @@ export class DeesSimpleAppDash extends DeesElement {
  }


-  private currentView: DeesElement;
+  private currentView!: DeesElement;
  public async loadView(viewArg: IView) {
-    const appcontent = this.shadowRoot.querySelector('.appcontent');
+    const appcontent = this.shadowRoot!.querySelector('.appcontent')!;
    const view = new viewArg.element();
    if (this.currentView) {
      this.currentView.remove();
--- a/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts
+++ b/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts
@@ -141,15 +141,15 @@ export class DeesSimpleLogin extends DeesElement {
  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
    super.firstUpdated(_changedProperties);
    
-    const form = this.shadowRoot.querySelector('dees-form') as any;
+    const form = this.shadowRoot!.querySelector('dees-form') as any;
    if (form) {
-      form.addEventListener('formData', (event: CustomEvent) => {
+      form.addEventListener('formData', ((event: CustomEvent) => {
        this.dispatchEvent(new CustomEvent('login', { 
          detail: event.detail, 
          bubbles: true, 
          composed: true 
        }));
-      });
+      }) as EventListener);
    }
  }

@@ -158,9 +158,9 @@ export class DeesSimpleLogin extends DeesElement {
   */
  public async switchToSlottedContent() {
    const domtools = await this.domtoolsPromise;
-    const loginDiv: HTMLDivElement = this.shadowRoot.querySelector('.login');
-    const loginContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.loginContainer');
-    const slotContainerDiv: HTMLDivElement = this.shadowRoot.querySelector('.slotContainer');
+    const loginDiv = this.shadowRoot!.querySelector('.login') as HTMLDivElement;
+    const loginContainerDiv = this.shadowRoot!.querySelector('.loginContainer') as HTMLDivElement;
+    const slotContainerDiv = this.shadowRoot!.querySelector('.slotContainer') as HTMLDivElement;
    loginDiv.style.opacity = '0';
    loginDiv.style.transform = 'translateY(20px)';
    loginContainerDiv.style.pointerEvents = 'none';
--- a/ts_web/elements/00group-utility/dees-icon/dees-icon.demo.ts
+++ b/ts_web/elements/00group-utility/dees-icon/dees-icon.demo.ts
@@ -15,7 +15,7 @@ export const demoFunc = () => {
    .filter(key => {
      // Skip utility functions and focus on icon components (first letter is uppercase)
      const isUppercaseFirst = key[0] === key[0].toUpperCase() && key[0] !== key[0].toLowerCase();
-      const isFunction = typeof lucideIcons[key] === 'function';
+      const isFunction = typeof (lucideIcons as any)[key] === 'function';
      const notUtility = !['createElement', 'createIcons', 'default'].includes(key);
      return isFunction && isUppercaseFirst && notUtility;
    })
@@ -63,7 +63,7 @@ export const demoFunc = () => {
  const searchIcons = (event: InputEvent) => {
    const searchTerm = (event.target as HTMLInputElement).value.toLowerCase().trim();
    // Get the demo container first, then search within it
-    const demoContainer = (event.target as HTMLElement).closest('.demoContainer');
+    const demoContainer = (event.target as HTMLElement).closest('.demoContainer')!;
    const containers = demoContainer.querySelectorAll('.iconContainer');
    
    containers.forEach(container => {
@@ -79,7 +79,7 @@ export const demoFunc = () => {
    });
    
    // Update counts - search within demoContainer
-    demoContainer.querySelectorAll('.section-container').forEach(section => {
+    demoContainer!.querySelectorAll('.section-container').forEach(section => {
      const visibleIcons = section.querySelectorAll('.iconContainer:not(.hidden)').length;
      const countElement = section.querySelector('.icon-count');
      if (countElement) {
--- a/ts_web/elements/00group-utility/dees-icon/dees-icon.ts
+++ b/ts_web/elements/00group-utility/dees-icon/dees-icon.ts
@@ -208,7 +208,7 @@ export class DeesIcon extends DeesElement {
  accessor icon: IconWithPrefix | undefined = undefined;

  @property({ type: Number })
-  accessor iconSize: number;
+  accessor iconSize!: number;

  @property({ type: String })
  accessor color: string = 'currentColor';
@@ -292,13 +292,13 @@ export class DeesIcon extends DeesElement {
      const pascalCaseName = iconName.charAt(0).toUpperCase() + iconName.slice(1);
      
      // Check if the icon exists in lucideIcons
-      if (!lucideIcons[pascalCaseName]) {
+      if (!(lucideIcons as any)[pascalCaseName]) {
        console.warn(`Lucide icon '${pascalCaseName}' not found in lucideIcons object`);
        return '';
      }
-      
+
      // Use the exact pattern from Lucide documentation
-      const svgElement = createElement(lucideIcons[pascalCaseName], {
+      const svgElement = createElement((lucideIcons as any)[pascalCaseName], {
        color: this.color,
        size: this.iconSize,
        strokeWidth: this.strokeWidth
@@ -404,9 +404,9 @@ export class DeesIcon extends DeesElement {
          // Convert to PascalCase
          const pascalCaseName = name.charAt(0).toUpperCase() + name.slice(1);
          
-          if (lucideIcons[pascalCaseName]) {
+          if ((lucideIcons as any)[pascalCaseName]) {
            // Use the documented pattern from Lucide docs
-            const svgElement = createElement(lucideIcons[pascalCaseName], {
+            const svgElement = createElement((lucideIcons as any)[pascalCaseName], {
              color: this.color,
              size: this.iconSize,
              strokeWidth: this.strokeWidth
--- a/ts_web/elements/00group-utility/dees-updater/dees-updater.ts
+++ b/ts_web/elements/00group-utility/dees-updater/dees-updater.ts
@@ -33,12 +33,12 @@ export class DeesUpdater extends DeesElement {
  @property({
    type: String,
  })
-  accessor currentVersion: string;
+  accessor currentVersion!: string;

  @property({
    type: String,
  })
-  accessor updatedVersion: string;
+  accessor updatedVersion!: string;

  constructor() {
    super();
@@ -107,7 +107,7 @@ export class DeesUpdater extends DeesElement {
  }

  public async destroy() {
-    this.parentElement.removeChild(this);
+    this.parentElement!.removeChild(this);
  }

  private windowLayerClicked() {}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Juergen Kunz	9d0f6da905	v3.51.2 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-03 12:37:57 +00:00
Juergen Kunz	42fd0b276e	fix(ui): standardize tile-based layouts across input, product card, and terminal preview components	2026-04-03 12:37:57 +00:00
Juergen Kunz	23d672040c	feat(dataview): integrate dees-tile component for improved layout and styling	2026-04-03 12:08:06 +00:00
Juergen Kunz	24f96788d5	feat(statsgrid): integrate dees-tile component for enhanced tile structure and styling	2026-04-03 11:59:34 +00:00
Juergen Kunz	6e5def5708	feat(layout): introduce dees-tile component for unified tile layout	2026-04-03 11:49:58 +00:00
Juergen Kunz	472132e8cf	v3.51.1 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-03 10:45:40 +00:00
Juergen Kunz	e062f5046e	fix(repo): no changes to commit	2026-04-03 10:45:39 +00:00
Juergen Kunz	f2d3fc28f8	fix(chart-area): update grid line colors for improved visibility in dark mode	2026-04-03 10:43:50 +00:00
Juergen Kunz	7295bfcf92	feat(chart-area): add series statistics display and computation for chart data	2026-04-03 10:35:52 +00:00
Juergen Kunz	ad732a3e68	v3.51.0 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-03 10:11:38 +00:00
Juergen Kunz	b38bd28360	feat(chart-area): replace ApexCharts with Lightweight Charts for area chart rendering	2026-04-03 10:11:38 +00:00
Juergen Kunz	99a531ee74	v3.50.2 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-02 19:43:16 +00:00
Juergen Kunz	1a3a5e5454	fix(chart,dashboardgrid demos): use dees-button text property consistently in demo interactions and update dataset button highlighting reliably	2026-04-02 19:43:16 +00:00
Juergen Kunz	5cf8161735	fix(dees-chart-area): optimize series update handling and y-axis scaling logic	2026-04-02 19:31:03 +00:00
Juergen Kunz	46d9cdc741	v3.50.1 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-02 19:13:31 +00:00
Juergen Kunz	c13f319474	fix(appdash): use banner height CSS variable for terminal layout and expose terminal resize handling	2026-04-02 19:13:31 +00:00
Juergen Kunz	c0ac8f593a	v3.50.0 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-02 19:03:32 +00:00
Juergen Kunz	c52854f902	feat(dees-simple-appdash): add global message banners with actions and dismissal support	2026-04-02 19:03:32 +00:00
Juergen Kunz	c3b0f0df1f	v3.49.2 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-02 16:08:59 +00:00
Juergen Kunz	cbc0bbcad4	fix(dees-input-list): refine dees-input-list spacing and simplify the add item action button	2026-04-02 16:08:59 +00:00
Juergen Kunz	8d3a1783fd	v3.49.1 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-04-01 05:00:21 +00:00
Juergen Kunz	af1f660486	fix(ts_web): resolve TypeScript nullability and event typing issues across web components	2026-04-01 05:00:21 +00:00
Juergen Kunz	b1c8a7446e	Update README and codebase with new components and fixes - Added `DeesStorageBrowser` to the Data Display section in README. - Included `DeesUpdater` in the Theming section of README. - Corrected the path to the LICENSE file in the README. - Updated company information section for clarity in README. - Modified `getFormElements` and `getSubmitButton` methods in `DeesForm` to use `querySelectorAll` for better input selection. - Updated `apexcharts` version from `5.10.3` to `5.10.4` in versions service.	2026-04-01 04:30:10 +00:00
Juergen Kunz	7e991396e9	feat(config): rename npmextra.json to .smartconfig.json for project setup and configuration	2026-04-01 04:29:55 +00:00
Juergen Kunz	25cbf9bfdd	v3.49.0 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-03-18 15:28:21 +00:00
Juergen Kunz	4d8ba1fefc	feat(dataview-statusobject): add last updated footer to status object and refresh demo data	2026-03-18 15:28:21 +00:00
Juergen Kunz	42317459ff	v3.48.5 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-03-14 17:39:34 +00:00
Juergen Kunz	932db338c6	fix(repo): no changes to commit	2026-03-14 17:39:34 +00:00
Juergen Kunz	bc4b87b83a	v3.48.4 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-03-14 17:10:20 +00:00
Juergen Kunz	eb055e7214	fix(storage-browser): rename S3-specific storage browser interfaces to generic storage types	2026-03-14 17:10:20 +00:00
Juergen Kunz	c55eb948fe	v3.48.3 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-03-14 16:29:46 +00:00
Juergen Kunz	35779209ea	fix(dataview): rename dees-s3-browser exports and custom elements to dees-storage-browser	2026-03-14 16:29:46 +00:00
Juergen Kunz	8c6738ea15	v3.48.2 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-03-12 20:11:52 +00:00
Juergen Kunz	e7da1d8b44	fix(repo): no changes to commit	2026-03-12 20:11:52 +00:00
Juergen Kunz	358d82e7fa	v3.48.1 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-03-12 20:04:12 +00:00
Juergen Kunz	6452e05e1d	fix(repo): no changes to commit	2026-03-12 20:04:12 +00:00
Juergen Kunz	07b536ea9a	v3.48.0 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2026-03-12 15:18:52 +00:00
Juergen Kunz	3fcb0cbf89	feat(dataview): add an S3 browser component with column and list views, file preview, editing, and object management	2026-03-12 15:18:52 +00:00