feat(dees-appui-base): overhaul AppUI core: replace simple view rendering with a full-featured ViewRegistry (caching, hide/show lifecycle, async lazy-loading), introduce view lifecycle hooks and activation context, add activity log API/component, remove built-in router and state manager, and update configuration interfaces and demos

readme.md

@@ -582,78 +582,58 @@ Submit button component specifically designed for `DeesForm`.
 ### Layout Components
 
 #### `DeesAppuiBase`
-Base container component for application layout structure with integrated appbar, menu system, and content areas.
+A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, and view management.
+
+> **Full API Documentation**: See [ts_web/elements/00group-appui/dees-appui-base/readme.md](./ts_web/elements/00group-appui/dees-appui-base/readme.md) for complete documentation including all programmatic APIs, view lifecycle hooks, and TypeScript interfaces.
+
+**Quick Start:**
 
 ```typescript
-<dees-appui-base
-  // Appbar configuration
-  .appbarMenuItems=${[
-    {
-      name: 'File',
-      action: async () => {},  // No-op for parent menu items
-      submenu: [
-        { name: 'New File', shortcut: 'Cmd+N', iconName: 'file-plus', action: async () => {} },
-        { name: 'Open...', shortcut: 'Cmd+O', iconName: 'folder-open', action: async () => {} },
-        { divider: true },
-        { name: 'Save', shortcut: 'Cmd+S', iconName: 'save', action: async () => {} }
-      ]
-    },
-    {
-      name: 'Edit',
-      action: async () => {},
-      submenu: [
-        { name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => {} },
-        { name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => {} }
-      ]
-    }
-  ]}
-  .appbarBreadcrumbs=${'Dashboard > Overview'}
-  .appbarTheme=${'dark'}
-  .appbarUser=${{ name: 'John Doe', status: 'online' }}
-  .appbarShowSearch=${true}
-  .appbarShowWindowControls=${true}
-  
-  // Main menu configuration (left sidebar)
-  .mainmenuTabs=${[
-    { key: 'dashboard', iconName: 'lucide:home', action: () => {} },
-    { key: 'projects', iconName: 'lucide:folder', action: () => {} },
-    { key: 'settings', iconName: 'lucide:settings', action: () => {} }
-  ]}
-  .mainmenuSelectedTab=${selectedTab}
-  
-  // Selector configuration (second sidebar)
-  .mainselectorOptions=${[
-    { key: 'Overview', action: () => {} },
-    { key: 'Components', action: () => {} },
-    { key: 'Services', action: () => {} }
-  ]}
-  .mainselectorSelectedOption=${selectedOption}
-  
-  // Main content tabs
-  .maincontentTabs=${[
-    { key: 'tab1', iconName: 'lucide:file', action: () => {} }
-  ]}
-  
-  // Event handlers
-  @appbar-menu-select=${(e) => handleMenuSelect(e.detail)}
-  @appbar-breadcrumb-navigate=${(e) => handleBreadcrumbNav(e.detail)}
-  @appbar-search-click=${() => handleSearch()}
-  @appbar-user-menu-open=${() => handleUserMenu()}
-  @mainmenu-tab-select=${(e) => handleTabSelect(e.detail)}
-  @mainselector-option-select=${(e) => handleOptionSelect(e.detail)}
->
-  <div slot="maincontent">
-    <!-- Your main application content goes here -->
-  </div>
-</dees-appui-base>
+import { html, DeesElement, customElement } from '@design.estate/dees-element';
+import { DeesAppuiBase } from '@design.estate/dees-catalog';
+
+@customElement('my-app')
+class MyApp extends DeesElement {
+  private appui: DeesAppuiBase;
+
+  async firstUpdated() {
+    this.appui = this.shadowRoot.querySelector('dees-appui-base');
+
+    // Configure with views and menu
+    this.appui.configure({
+      branding: { logoIcon: 'lucide:box', logoText: 'My App' },
+      views: [
+        { id: 'dashboard', name: 'Dashboard', iconName: 'lucide:home', content: 'my-dashboard' },
+        { id: 'settings', name: 'Settings', iconName: 'lucide:settings', content: 'my-settings' },
+      ],
+      mainMenu: {
+        sections: [{ name: 'Main', views: ['dashboard', 'settings'] }]
+      },
+      defaultView: 'dashboard'
+    });
+  }
+
+  render() {
+    return html`<dees-appui-base></dees-appui-base>`;
+  }
+}
 ```
 
-Key Features:
-- **Integrated Layout System**: Automatically arranges appbar, sidebars, and content area
-- **Centralized Configuration**: Pass properties to all child components from one place
-- **Event Propagation**: All child component events are re-emitted for easy handling
-- **Responsive Grid**: Uses CSS Grid for flexible, responsive layout
-- **Slot Support**: Main content area supports custom content via slots
+**Key Features:**
+- **Configure API**: Single `configure()` method for complete app setup
+- **View Management**: Automatic view caching, lazy loading, and lifecycle hooks
+- **Programmatic APIs**: Full control over AppBar, Main Menu, Secondary Menu, Content Tabs, and Activity Log
+- **View Lifecycle Hooks**: `onActivate()`, `onDeactivate()`, and `canDeactivate()` for view components
+- **Hash-based Routing**: Automatic URL synchronization with view navigation
+- **RxJS Observables**: `viewChanged$` and `viewLifecycle$` for reactive programming
+- **TypeScript-first**: Typed `IViewActivationContext` passed to views on activation
+
+**Programmatic APIs include:**
+- `navigateToView(viewId, params?)` - Navigate between views
+- `setAppBarMenus()`, `setBreadcrumbs()`, `setUser()` - Control the app bar
+- `setMainMenu()`, `setMainMenuSelection()`, `setMainMenuBadge()` - Control main navigation
+- `setSecondaryMenu()`, `setContentTabs()` - Control view-specific UI
+- `activityLog.add()`, `activityLog.addMany()`, `activityLog.clear()` - Manage activity entries
 
 #### `DeesAppuiMainmenu`
 Main navigation menu component for application-wide navigation.