@design.estate/dees-catalog 3.48.5 → 3.49.1

package/license

@@ -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.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "3.48.5",
+  "version": "3.49.1",
   "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",
+    "apexcharts": "^5.10.4",
     "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": [

package/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.

package/ts_web/00_commitinfo_data.ts

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

package/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;

package/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);

package/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

package/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>
     `;
   }

package/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;
       });
       

package/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;
     }

package/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;

package/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`;

package/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';
 

package/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);

package/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);
         });
       }
       

package/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';

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

@@ -37,7 +37,7 @@ export class DeesChartArea extends DeesElement {
 
   // instance
   @state()
-  accessor chart: ApexCharts;
+  accessor chart!: ApexCharts;
 
   @property()
   accessor label: string = 'Untitled Chart';
@@ -68,8 +68,8 @@ export class DeesChartArea extends DeesElement {
   @property({ type: Number })
   accessor autoScrollInterval: number = 1000; // Auto-scroll interval in milliseconds (0 to disable)
 
-  private resizeObserver: ResizeObserver;
-  private resizeTimeout: number;
+  private resizeObserver!: ResizeObserver;
+  private resizeTimeout!: number;
   private internalChartData: ApexAxisChartSeries = [];
   private autoScrollTimer: number | null = null;
   private readonly DEBUG_RESIZE = false; // Set to true to enable resize debugging
@@ -132,7 +132,7 @@ export class DeesChartArea extends DeesElement {
       if (this.chart) {
         try {
           this.chart.destroy();
-          this.chart = null;
+          this.chart = null as any;
         } catch (error) {
           console.error('Error destroying chart:', error);
         }
@@ -170,14 +170,14 @@ export class DeesChartArea extends DeesElement {
     await new Promise(resolve => requestAnimationFrame(resolve));
     
     // Get actual dimensions of the container
-    const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
-    const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
-    
+    const mainbox: HTMLDivElement | null = this.shadowRoot!.querySelector('.mainbox');
+    const chartContainer: HTMLDivElement | null = this.shadowRoot!.querySelector('.chartContainer');
+
     if (!mainbox || !chartContainer) {
       console.error('Chart containers not found');
       return;
     }
-    
+
     // Calculate initial dimensions
     const styleChartContainer = window.getComputedStyle(chartContainer);
     const paddingTop = parseInt(styleChartContainer.paddingTop, 10);
@@ -368,7 +368,7 @@ export class DeesChartArea extends DeesElement {
     };
     
     try {
-      this.chart = new ApexChartsLib(this.shadowRoot.querySelector('.chartContainer'), options);
+      this.chart = new ApexChartsLib(this.shadowRoot!.querySelector('.chartContainer')!, options);
       await this.chart.render();
       
       // Give the chart a moment to fully initialize before resizing
@@ -376,7 +376,7 @@ export class DeesChartArea extends DeesElement {
       await this.resizeChart();
       
       // Ensure resize observer is watching the mainbox
-      const mainbox = this.shadowRoot.querySelector('.mainbox');
+      const mainbox = this.shadowRoot!.querySelector('.mainbox');
       if (mainbox && this.resizeObserver) {
         // Disconnect any previous observations
         this.resizeObserver.disconnect();
@@ -572,9 +572,9 @@ export class DeesChartArea extends DeesElement {
     }
     
     try {
-      const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
-      const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
-      
+      const mainbox: HTMLDivElement | null = this.shadowRoot!.querySelector('.mainbox');
+      const chartContainer: HTMLDivElement | null = this.shadowRoot!.querySelector('.chartContainer');
+
       if (!mainbox || !chartContainer) {
         return;
       }

package/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') {

package/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'];
 

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

@@ -203,7 +203,7 @@ export class DeesDataviewCodebox extends DeesElement {
       </style>
       <div
         class="mainbox"
-        @contextmenu="${(eventArg) => {
+        @contextmenu="${(eventArg: MouseEvent) => {
           DeesContextmenu.openContextMenuWithOptions(eventArg, [
             {
               name: 'About',
@@ -241,7 +241,7 @@ export class DeesDataviewCodebox extends DeesElement {
   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 +267,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;
   }
 }

package/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: [

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

@@ -29,7 +29,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,
@@ -128,7 +128,7 @@ export class DeesDataviewStatusobject extends DeesElement {
         grid-template-columns: 48px auto;
         border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 14.9%)')};
         transition: background-color 0.15s ease;
-        padding-right: 16px;
+        padding: 0 16px;
         cursor: context-menu;
       }
 
@@ -148,7 +148,7 @@ export class DeesDataviewStatusobject extends DeesElement {
       .detail .detailsText .label {
         font-size: 12px;
         font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
         margin-bottom: 2px;
         letter-spacing: -0.01em;
       }
@@ -159,6 +159,28 @@ export class DeesDataviewStatusobject extends DeesElement {
         color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
         line-height: 1.5;
       }
+
+      .bottomBar {
+        position: relative;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        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%)')};
+        height: 28px;
+        font-size: 12px;
+        line-height: 28px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: stretch;
+        overflow: hidden;
+        flex-shrink: 0;
+      }
+
+      .bottomBar .statusLabel {
+        padding: 0 16px;
+        display: flex;
+        align-items: center;
+        font-weight: 500;
+      }
     `,
   ];
 
@@ -209,6 +231,11 @@ export class DeesDataviewStatusobject extends DeesElement {
             </div>
           `;
         })}
+        <div class="bottomBar">
+          <div class="statusLabel">${this.statusObject?.lastUpdated
+            ? `Last updated: ${new Date(this.statusObject.lastUpdated).toLocaleString()}`
+            : ''}</div>
+        </div>
       </div>
     `;
   }
@@ -232,7 +259,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!';
       

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

@@ -878,7 +878,7 @@ 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`