feat: Enhance dees-appui components with dynamic tab and menu configurations

- Updated dees-appui-mainmenu to accept dynamic tabs with actions and icons.
- Modified dees-appui-mainselector to support dynamic selection options.
- Introduced dees-appui-tabs for improved tab navigation with customizable styles.
- Added dees-appui-view to manage views with tabs and content dynamically.
- Implemented event dispatching for tab and option selections.
- Created a comprehensive architecture documentation for dees-appui system.
- Added demo implementations for dees-appui-base and other components.
- Improved responsiveness and user interaction feedback across components.

ts_web/elements/dees-appui-mainmenu.ts

@@ -18,17 +18,23 @@ import { DeesContextmenu } from './dees-contextmenu.js';
  */
 @customElement('dees-appui-mainmenu')
 export class DeesAppuiMainmenu extends DeesElement {
-  public static demo = () => html`<dees-appui-mainmenu></dees-appui-mainmenu>`;
+  public static demo = () => html`
+    <dees-appui-mainmenu
+      .tabs=${[
+        { key: 'Dashboard', iconName: 'home', action: () => console.log('Dashboard') },
+        { key: 'Projects', iconName: 'folder', action: () => console.log('Projects') },
+        { key: 'Analytics', iconName: 'lineChart', action: () => console.log('Analytics') },
+        { key: 'Settings', iconName: 'settings', action: () => console.log('Settings') },
+      ]}
+    ></dees-appui-mainmenu>
+  `;
 
   // INSTANCE
 
   // INSTANCE
-  @property()
+  @property({ type: Array })
   public tabs: interfaces.ITab[] = [
-    { key: 'option 1', iconName: 'building', action: () => {} },
-    { key: 'option 2', iconName: 'building', action: () => {} },
-    { key: 'option 3', iconName: 'building', action: () => {} },
-    { key: 'option 4', iconName: 'building', action: () => {} },
+    { key: '⚠️ Please set tabs', iconName: 'alertTriangle', action: () => console.warn('No tabs configured for mainmenu') },
   ];
 
   @property()
@@ -105,7 +111,7 @@ export class DeesAppuiMainmenu extends DeesElement {
                   this.updateTab(tabArg);
                 }}"
               >
-                <dees-icon iconFA="${tabArg.iconName as any}"></dees-icon>
+                <dees-icon .icon="${tabArg.iconName ? `lucide:${tabArg.iconName}` : ''}"></dees-icon>
               </div>
             `;
           })}
@@ -115,7 +121,7 @@ export class DeesAppuiMainmenu extends DeesElement {
     `;
   }
 
-  private async updateTabIndicator() {
+  private updateTabIndicator() {
     let selectedTab = this.selectedTab;
     if (!selectedTab) {
       selectedTab = this.tabs[0];
@@ -124,7 +130,12 @@ export class DeesAppuiMainmenu extends DeesElement {
     const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(
       `.tabsContainer .tab:nth-child(${tabIndex + 1})`
     );
+    
+    if (!selectedTabElement) return;
+    
     const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
+    if (!tabIndicator) return;
+    
     const offsetTop = selectedTabElement.offsetTop;
     tabIndicator.style.opacity = `1`;
     tabIndicator.style.top = `calc(${offsetTop}px + (var(--menuSize) / 6))`;
@@ -134,6 +145,13 @@ export class DeesAppuiMainmenu extends DeesElement {
     this.selectedTab = tabArg;
     this.updateTabIndicator();
     this.selectedTab.action();
+    
+    // Emit tab-select event
+    this.dispatchEvent(new CustomEvent('tab-select', {
+      detail: { tab: tabArg },
+      bubbles: true,
+      composed: true
+    }));
   }
 
   firstUpdated() {