feat(appui): add app shell and bottom bar APIs, new input components, and update README component listings and docs

changelog.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 2026-01-26 - 3.38.0 - feat(appui)
+add app shell and bottom bar APIs, new input components, and update README component listings and docs
+
+- README: updated components count (80+ → 70+), reorganized categories (added App Shell / Pre-built Templates, renamed Workspace/IDE) and improved typography
+- Document listing: added DeesActionbar, DeesInputToggle, DeesInputCode, DeesAppuiBottombar and other component entries
+- Menu item interface: added closeable and onClose properties for dismissible menu items
+- IViewDefinition: expanded content type to accept element constructors and async content, added badgeVariant and cache flags
+- New interfaces added: IBottomBarWidget, IBottomBarAction, IViewActivationContext to support bottom bar widgets/actions and view activation context
+
 ## 2026-01-25 - 3.37.1 - fix(editor)
 fix monaco/editor layout, update dev deps, simplify watch script and remove Playwright snapshots
 

readme.md

@@ -1,6 +1,6 @@
 # @design.estate/dees-catalog
 
-A comprehensive web components library built with TypeScript and LitElement, providing **80+ production-ready UI components** for building modern web applications with consistent design and behavior. 🚀
+A comprehensive web components library built with TypeScript and LitElement, providing **70+ production-ready UI components** for building modern web applications with consistent design and behavior. 🚀
 
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue.svg)](https://www.typescriptlang.org/)
 [![LitElement](https://img.shields.io/badge/LitElement-4.0+-orange.svg)](https://lit.dev/)
@@ -11,12 +11,13 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 
 ## ✨ Features
 
-- 🎨 **Consistent Design System** - Beautiful, cohesive components following modern UI/UX principles
+- 🎨 **Consistent Design System** — Beautiful, cohesive components following modern UI/UX principles
-- 🌙 **Dark/Light Theme Support** - All components automatically adapt to your theme
+- 🌙 **Dark/Light Theme Support** — All components automatically adapt to your theme
-- ⌨️ **Keyboard Accessible** - Full keyboard navigation and ARIA support
+- ⌨️ **Keyboard Accessible** — Full keyboard navigation and ARIA support
-- 📱 **Responsive** - Mobile-first design that works across all screen sizes
+- 📱 **Responsive** — Mobile-first design that works across all screen sizes
-- 🔧 **TypeScript-First** - Fully typed APIs with excellent IDE support
+- 🔧 **TypeScript-First** — Fully typed APIs with excellent IDE support
-- 🧩 **Modular** - Use only what you need, tree-shakeable architecture
+- 🧩 **Modular** — Use only what you need, tree-shakeable architecture
+- 🏗️ **Full App Shell** — `dees-appui` provides a complete application framework with menus, routing, activity log, and bottom bar
 
 ## 📦 Installation
 
@@ -52,16 +53,16 @@ For developers working on this library, please refer to the [UI Components Playb
 
 | Category | Components |
 |----------|------------|
-| **Core UI** | [`DeesButton`](#deesbutton), [`DeesButtonExit`](#deesbuttonexit), [`DeesButtonGroup`](#deesbuttongroup), [`DeesBadge`](#deesbadge), [`DeesChips`](#deeschips), [`DeesHeading`](#deesheading), [`DeesHint`](#deeshint), [`DeesIcon`](#deesicon), [`DeesLabel`](#deeslabel), [`DeesPanel`](#deespanel), [`DeesSearchbar`](#deessearchbar), [`DeesSpinner`](#deesspinner), [`DeesToast`](#deestoast), [`DeesWindowcontrols`](#deeswindowcontrols) |
+| **Core UI** | [`DeesButton`](#deesbutton), [`DeesButtonExit`](#deesbuttonexit), [`DeesButtonGroup`](#deesbuttongroup), [`DeesBadge`](#deesbadge), [`DeesChips`](#deeschips), [`DeesHeading`](#deesheading), [`DeesHint`](#deeshint), [`DeesIcon`](#deesicon), [`DeesLabel`](#deeslabel), [`DeesPanel`](#deespanel), [`DeesSearchbar`](#deessearchbar), [`DeesSpinner`](#deesspinner), [`DeesToast`](#deestoast), [`DeesWindowcontrols`](#deeswindowcontrols), [`DeesActionbar`](#deesactionbar) |
-| **Forms** | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputList`](#deesinputlist), [`DeesInputProfilepicture`](#deesinputprofilepicture), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesFormSubmit`](#deesformsubmit) |
+| **Forms** | [`DeesForm`](#deesform), [`DeesInputText`](#deesinputtext), [`DeesInputCheckbox`](#deesinputcheckbox), [`DeesInputDropdown`](#deesinputdropdown), [`DeesInputRadiogroup`](#deesinputradiogroup), [`DeesInputFileupload`](#deesinputfileupload), [`DeesInputIban`](#deesinputiban), [`DeesInputPhone`](#deesinputphone), [`DeesInputQuantitySelector`](#deesinputquantityselector), [`DeesInputMultitoggle`](#deesinputmultitoggle), [`DeesInputToggle`](#deesinputtoggle), [`DeesInputTags`](#deesinputtags), [`DeesInputTypelist`](#deesinputtypelist), [`DeesInputList`](#deesinputlist), [`DeesInputProfilepicture`](#deesinputprofilepicture), [`DeesInputRichtext`](#deesinputrichtext), [`DeesInputWysiwyg`](#deesinputwysiwyg), [`DeesInputDatepicker`](#deesinputdatepicker), [`DeesInputSearchselect`](#deesinputsearchselect), [`DeesInputCode`](#deesinputcode), [`DeesFormSubmit`](#deesformsubmit) |
-| **Layout** | [`DeesAppui`](#deesappui), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
+| **App Shell (Layout)** | [`DeesAppui`](#deesappui-), [`DeesAppuiMainmenu`](#deesappuimainmenu), [`DeesAppuiSecondarymenu`](#deesappuisecondarymenu), [`DeesAppuiMaincontent`](#deesappuimaincontent), [`DeesAppuiAppbar`](#deesappuiappbar), [`DeesAppuiActivitylog`](#deesappuiactivitylog), [`DeesAppuiBottombar`](#deesappuibottombar), [`DeesAppuiProfiledropdown`](#deesappuiprofiledropdown), [`DeesAppuiTabs`](#deesappuitabs), [`DeesMobileNavigation`](#deesmobilenavigation), [`DeesDashboardGrid`](#deesdashboardgrid) |
 | **Data Display** | [`DeesTable`](#deestable), [`DeesDataviewCodebox`](#deesdataviewcodebox), [`DeesDataviewStatusobject`](#deesdataviewstatusobject), [`DeesPdf`](#deespdf), [`DeesStatsGrid`](#deesstatsgrid), [`DeesPagination`](#deespagination) |
 | **Visualization** | [`DeesChartArea`](#deeschartarea), [`DeesChartLog`](#deeschartlog) |
 | **Dialogs & Overlays** | [`DeesModal`](#deesmodal), [`DeesContextmenu`](#deescontextmenu), [`DeesSpeechbubble`](#deesspeechbubble), [`DeesWindowlayer`](#deeswindowlayer) |
 | **Navigation** | [`DeesStepper`](#deesstepper), [`DeesProgressbar`](#deesprogressbar) |
-| **Development** | [`DeesEditor`](#deeseditor), [`DeesEditorMarkdown`](#deeseditormarkdown), [`DeesEditorMarkdownoutlet`](#deeseditormarkdownoutlet), [`DeesTerminal`](#deesterminal), [`DeesUpdater`](#deesupdater) |
+| **Workspace / IDE** | [`DeesEditor`](#deeseditor), [`DeesTerminal`](#deesterminal), [`DeesUpdater`](#deesupdater) |
 | **Theming** | [`DeesTheme`](#deestheme) |
-| **Auth & Utilities** | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
+| **Pre-built Templates** | [`DeesSimpleAppdash`](#deessimpleappdash), [`DeesSimpleLogin`](#deessimplelogin) |
 | **Shopping** | [`DeesShoppingProductcard`](#deesshoppingproductcard) |
 
 ---
@@ -117,14 +118,14 @@ Interactive chips/tags with selection capabilities.
 Display icons from FontAwesome and Lucide icon libraries with library prefixes.
 
 ```typescript
-// FontAwesome icons - use 'fa:' prefix
+// FontAwesome icons — use 'fa:' prefix
 <dees-icon
   icon="fa:check"       // FontAwesome icon with fa: prefix
   iconSize="24"         // Size in pixels
   color="#22c55e"       // Optional: custom color
 ></dees-icon>
 
-// Lucide icons - use 'lucide:' prefix
+// Lucide icons — use 'lucide:' prefix
 <dees-icon
   icon="lucide:menu"    // Lucide icon with lucide: prefix
   iconSize="24"         // Size in pixels
@@ -134,7 +135,7 @@ Display icons from FontAwesome and Lucide icon libraries with library prefixes.
 
 // Legacy API (deprecated but still supported)
 <dees-icon
-  iconFA="check"        // Without prefix - assumes FontAwesome
+  iconFA="check"        // Without prefix — assumes FontAwesome
 ></dees-icon>
 ```
 
@@ -287,6 +288,18 @@ Window control buttons (minimize, maximize, close) for desktop-like applications
 ></dees-windowcontrols>
 ```
 
+#### `DeesActionbar`
+Floating action bar for contextual actions.
+
+```typescript
+<dees-actionbar
+  .actions=${[
+    { icon: 'lucide:save', label: 'Save', action: () => handleSave() },
+    { icon: 'lucide:trash', label: 'Delete', action: () => handleDelete() }
+  ]}
+></dees-actionbar>
+```
+
 ---
 
 ### Form Components
@@ -331,6 +344,18 @@ Checkbox input component for boolean values.
 ></dees-input-checkbox>
 ```
 
+#### `DeesInputToggle`
+Toggle switch component for boolean on/off states.
+
+```typescript
+<dees-input-toggle
+  key="darkMode"
+  label="Enable Dark Mode"
+  .value=${true}
+  @change=${handleToggle}
+></dees-input-toggle>
+```
+
 #### `DeesInputDropdown`
 Dropdown selection component with search and filtering capabilities.
 
@@ -658,6 +683,19 @@ Advanced block-based editor with slash commands and rich content blocks.
 - Collaborative editing ready
 - Extensible block types
 
+#### `DeesInputCode`
+Code input component for editing source code with syntax highlighting.
+
+```typescript
+<dees-input-code
+  key="snippet"
+  label="Code Snippet"
+  .value=${codeString}
+  language="typescript"
+  @change=${handleCodeChange}
+></dees-input-code>
+```
+
 #### `DeesFormSubmit`
 Submit button component specifically designed for `DeesForm`.
 
@@ -670,10 +708,10 @@ Submit button component specifically designed for `DeesForm`.
 
 ---
 
-### Layout Components
+### App Shell (Layout) Components
 
-#### `DeesAppui`
+#### `DeesAppui` 🏗️
-A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, and view management.
+A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, bottom bar, and view management.
 
 > **Full API Documentation**: See [ts_web/elements/00group-appui/dees-appui/readme.md](./ts_web/elements/00group-appui/dees-appui/readme.md) for complete documentation including all programmatic APIs, view lifecycle hooks, and TypeScript interfaces.
 
@@ -690,7 +728,6 @@ class MyApp extends DeesElement {
   async firstUpdated() {
     this.appui = this.shadowRoot.querySelector('dees-appui');
 
-    // Configure with views and menu
     this.appui.configure({
       branding: { logoIcon: 'lucide:box', logoText: 'My App' },
       views: [
@@ -700,7 +737,13 @@ class MyApp extends DeesElement {
       mainMenu: {
         sections: [{ name: 'Main', views: ['dashboard', 'settings'] }]
       },
-      defaultView: 'dashboard'
+      defaultView: 'dashboard',
+      bottomBar: {
+        visible: true,
+        widgets: [
+          { id: 'status', iconName: 'lucide:activity', label: 'Online', status: 'success' }
+        ]
+      }
     });
   }
 
@@ -710,43 +753,123 @@ class MyApp extends DeesElement {
 }
 ```
 
-**Key Features:**
+**Architecture Overview:**
-- **Configure API**: Single `configure()` method for complete app setup
-- **View Management**: Automatic view caching, lazy loading, and lifecycle hooks
-- **Programmatic APIs**: Full control over AppBar, Main Menu, Secondary Menu, Content Tabs, and Activity Log
-- **View Lifecycle Hooks**: `onActivate()`, `onDeactivate()`, and `canDeactivate()` for view components
-- **Hash-based Routing**: Automatic URL synchronization with view navigation
-- **RxJS Observables**: `viewChanged$` and `viewLifecycle$` for reactive programming
-- **TypeScript-first**: Typed `IViewActivationContext` passed to views on activation
-- **Activity Log Toggle**: Built-in appbar button to show/hide activity panel with entry count badge
 
-**Programmatic APIs include:**
+```
-- `navigateToView(viewId, params?)` - Navigate between views
+┌─────────────────────────────────────────────────────────────────────┐
-- `setAppBarMenus()`, `setBreadcrumbs()`, `setUser()` - Control the app bar
+│  AppBar (dees-appui-appbar)                                         │
-- `setMainMenu()`, `setMainMenuSelection()`, `setMainMenuBadge()` - Control main navigation
+│  ├── Menus (File, Edit, View...)                                    │
-- `setMainMenuCollapsed()`, `setMainMenuVisible()` - Control main menu visibility
+│  ├── Breadcrumbs                                                    │
-- `setSecondaryMenu()`, `setSecondaryMenuCollapsed()`, `setSecondaryMenuVisible()` - Control secondary menu
+│  ├── User Profile + Dropdown                                        │
-- `setContentTabs()`, `setContentTabsVisible()` - Control view-specific UI
+│  └── Activity Log Toggle                                            │
-- `activityLog.add()`, `activityLog.addMany()`, `activityLog.clear()` - Manage activity entries
+├─────────────┬───────────────────────────────────┬───────────────────┤
-- `setActivityLogVisible()`, `toggleActivityLog()`, `getActivityLogVisible()` - Control activity panel
+│ Main Menu   │  Content Area                     │  Activity Log     │
+│ (collapsed/ │  ├── Content Tabs                 │  (slide panel)    │
+│  expanded)  │  │   (closable, from tables/lists)│                   │
+│             │  └── View Container               │                   │
+│ ┌─────────┐ │      └── Active View              │                   │
+│ │ 🏠 Home │ ├─────────────────────────────────┐ │                   │
+│ │ 📁 Files│ │ Secondary Menu                  │ │                   │
+│ │ ⚙ Set.. │ │  ├── Collapsible Groups         │ │                   │
+│ │         │ │  │   ├── Tabs / Actions          │ │                   │
+│ └─────────┘ │  │   ├── Filters / Links         │ │                   │
+│             │  │   └── Dividers / Headers       │ │                   │
+├─────────────┴──┴───────────────────────────────┴───────────────────┤
+│  Bottom Bar (dees-appui-bottombar) — 24px status bar                │
+│  ├── Status widgets (left/right)                                    │
+│  └── Action buttons (left/right)                                    │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+**Configuration (`IAppConfig`):**
 
-**View Visibility Control:**
 ```typescript
-// In your view's onActivate hook
+interface IAppConfig {
-onActivate(context: IViewActivationContext) {
+  branding?: { logoIcon?: string; logoText?: string };
-  // Hide secondary menu for a fullscreen view
+  appBar?: IAppBarConfig;
-  context.appui.setSecondaryMenuVisible(false);
+  views: IViewDefinition[];
-
+  mainMenu?: IMainMenuConfig;
-  // Hide content tabs
+  defaultView?: string;
-  context.appui.setContentTabsVisible(false);
+  activityLog?: IActivityLogConfig;
-
+  bottomBar?: IBottomBarConfig;
-  // Collapse main menu to give more space
+  onViewChange?: (viewId: string, view: IViewDefinition) => void;
-  context.appui.setMainMenuCollapsed(true);
+  onSearch?: (query: string) => void;
 }
 ```
 
+**Key Features:**
+- 🔧 **Configure API** — Single `configure()` method for complete app setup
+- 📄 **View Management** — Automatic view caching, lazy loading, and lifecycle hooks (`onActivate`, `onDeactivate`, `canDeactivate`)
+- 🧭 **Hash-based Routing** — Automatic URL synchronization with view navigation and parameterized routes
+- 📊 **Activity Log** — Slide-out panel with stacked entries, date grouping, search, and filtering
+- 📌 **Bottom Status Bar** — Configurable widgets and actions with status colors and loading states
+- 🎯 **RxJS Observables** — `viewChanged$` and `viewLifecycle$` for reactive programming
+- 🏷️ **TypeScript-first** — Typed `IViewActivationContext` passed to views on activation
+
+**Programmatic APIs:**
+
+| Area | Methods |
+|------|---------|
+| **Navigation** | `navigateToView(viewId, params?)`, `getCurrentView()`, `getViewRegistry()` |
+| **App Bar** | `setAppBarMenus()`, `updateAppBarMenu()`, `setBreadcrumbs()`, `setUser()`, `setProfileMenuItems()`, `setSearchVisible()`, `onSearch()`, `setWindowControlsVisible()` |
+| **Main Menu** | `setMainMenu()`, `updateMainMenuGroup()`, `addMainMenuItem()`, `removeMainMenuItem()`, `setMainMenuSelection()`, `setMainMenuCollapsed()`, `setMainMenuVisible()`, `setMainMenuBadge()`, `clearMainMenuBadge()` |
+| **Secondary Menu** | `setSecondaryMenu()`, `updateSecondaryMenuGroup()`, `addSecondaryMenuItem()`, `setSecondaryMenuSelection()`, `setSecondaryMenuCollapsed()`, `setSecondaryMenuVisible()`, `clearSecondaryMenu()` |
+| **Content Tabs** | `setContentTabs()`, `addContentTab()`, `removeContentTab()`, `selectContentTab()`, `getSelectedContentTab()`, `setContentTabsVisible()`, `setContentTabsAutoHide()` |
+| **Activity Log** | `activityLog.add()`, `activityLog.addMany()`, `activityLog.clear()`, `activityLog.getEntries()`, `activityLog.filter()`, `activityLog.search()`, `setActivityLogVisible()`, `toggleActivityLog()`, `getActivityLogVisible()` |
+| **Bottom Bar** | `bottomBar.addWidget()`, `bottomBar.updateWidget()`, `bottomBar.removeWidget()`, `bottomBar.getWidget()`, `bottomBar.clearWidgets()`, `bottomBar.addAction()`, `bottomBar.removeAction()`, `bottomBar.clearActions()`, `setBottomBarVisible()`, `getBottomBarVisible()` |
+| **Observables** | `viewChanged$`, `viewLifecycle$` |
+
+**View Lifecycle Hooks:**
+
+```typescript
+import { DeesElement, customElement } from '@design.estate/dees-element';
+import type { IViewActivationContext, IViewLifecycle } from '@design.estate/dees-catalog';
+
+@customElement('my-settings-view')
+class MySettingsView extends DeesElement implements IViewLifecycle {
+  // Called when view becomes visible
+  async onActivate(context: IViewActivationContext) {
+    const { appui, viewId, params } = context;
+
+    // Set view-specific secondary menu
+    appui.setSecondaryMenu({
+      heading: 'Settings',
+      groups: [{ name: 'Options', items: [...] }]
+    });
+
+    // Control visibility of other shell parts
+    appui.setContentTabsVisible(false);
+    appui.setSecondaryMenuVisible(true);
+  }
+
+  // Called when navigating away
+  onDeactivate() { /* cleanup */ }
+
+  // Return false or a message string to block navigation
+  canDeactivate(): boolean | string {
+    if (this.hasUnsavedChanges) return 'You have unsaved changes. Leave anyway?';
+    return true;
+  }
+}
+```
+
+**Secondary Menu Item Types:**
+
+The secondary menu supports **8 distinct item types** for building rich contextual sidebars:
+
+| Type | Description |
+|------|-------------|
+| **Tab** (default) | Selectable item that stays highlighted |
+| **Action** | Executes on click without staying selected (blue styling) |
+| **Filter** | Checkbox toggle for filtering |
+| **MultiFilter** | Collapsible multi-select filter box |
+| **Divider** | Visual separator line |
+| **Header** | Non-interactive section label |
+| **Link** | Opens an external URL |
+| **Danger Action** | Red-styled action with optional confirmation |
+
 #### `DeesAppuiMainmenu`
-Main navigation menu component for application-wide navigation.
+Main navigation menu component for application-wide navigation. Supports collapsed (icon-only) mode.
 
 ```typescript
 <dees-appui-mainmenu
@@ -759,12 +882,12 @@ Main navigation menu component for application-wide navigation.
       ]
     }
   ]}
-  collapsed           // Optional: show collapsed version
+  collapsed           // Optional: show collapsed icon-only version
 ></dees-appui-mainmenu>
 ```
 
 #### `DeesAppuiSecondarymenu`
-Secondary navigation component for sub-section selection with collapsible groups and badges.
+Secondary navigation component for sub-section selection with collapsible groups, badges, and 8 item types.
 
 ```typescript
 <dees-appui-secondarymenu
@@ -806,28 +929,12 @@ Professional application bar component with hierarchical menus, breadcrumb navig
   .menuItems=${[
     {
       name: 'File',
-      action: async () => {},  // No-op for parent menu items
+      action: async () => {},
       submenu: [
-        {
+        { name: 'New File', shortcut: 'Cmd+N', iconName: 'file-plus', action: async () => handleNewFile() },
-          name: 'New File',
+        { name: 'Open...', shortcut: 'Cmd+O', iconName: 'folder-open', action: async () => handleOpen() },
-          shortcut: 'Cmd+N',
+        { divider: true },
-          iconName: 'file-plus',
+        { name: 'Save', shortcut: 'Cmd+S', iconName: 'save', action: async () => handleSave(), disabled: true }
-          action: async () => handleNewFile()
-        },
-        {
-          name: 'Open...',
-          shortcut: 'Cmd+O',
-          iconName: 'folder-open',
-          action: async () => handleOpen()
-        },
-        { divider: true },  // Menu separator
-        {
-          name: 'Save',
-          shortcut: 'Cmd+S',
-          iconName: 'save',
-          action: async () => handleSave(),
-          disabled: true  // Disabled state
-        }
       ]
     }
   ]}
@@ -849,12 +956,12 @@ Professional application bar component with hierarchical menus, breadcrumb navig
 ```
 
 **Key Features:**
-- **Hierarchical Menu System** - Top-level menus with dropdown submenus, icons, and keyboard shortcuts
+- **Hierarchical Menu System** — Top-level menus with dropdown submenus, icons, and keyboard shortcuts
-- **Keyboard Navigation** - Full keyboard support (Tab, Arrow keys, Enter, Escape)
+- **Keyboard Navigation** — Full keyboard support (Tab, Arrow keys, Enter, Escape)
-- **Breadcrumb Navigation** - Customizable breadcrumb trail with click events
+- **Breadcrumb Navigation** — Customizable breadcrumb trail with click events
-- **User Account Section** - Avatar with status indicator and profile dropdown
+- **User Account Section** — Avatar with status indicator and profile dropdown
-- **Activity Log Toggle** - Button with badge count to show/hide activity panel
+- **Activity Log Toggle** — Button with badge count to show/hide activity panel
-- **Accessibility** - Full ARIA support with menubar roles
+- **Accessibility** — Full ARIA support with menubar roles
 
 #### `DeesAppuiActivitylog`
 Real-time activity log panel for displaying user actions and system events.
@@ -886,6 +993,61 @@ activityLog.search('settings');        // Search by message
 - Animated slide-in/out panel
 - Theme-aware styling
 
+#### `DeesAppuiBottombar`
+A 24px fixed-height status bar at the bottom of the application shell. Supports status widgets and action buttons positioned left or right.
+
+```typescript
+// Configure via DeesAppui
+appui.configure({
+  bottomBar: {
+    visible: true,
+    widgets: [
+      {
+        id: 'status',
+        iconName: 'lucide:activity',
+        label: 'System Online',
+        status: 'success',       // 'idle' | 'active' | 'success' | 'warning' | 'error'
+        tooltip: 'All systems operational',
+        onClick: () => console.log('Status clicked'),
+      },
+      {
+        id: 'version',
+        iconName: 'lucide:gitBranch',
+        label: 'v1.2.3',
+        position: 'right',
+      }
+    ],
+    actions: [
+      {
+        id: 'terminal',
+        iconName: 'lucide:terminal',
+        tooltip: 'Open Terminal',
+        position: 'right',
+        onClick: () => console.log('Terminal clicked'),
+      }
+    ]
+  }
+});
+
+// Programmatic updates
+appui.bottomBar.addWidget({ id: 'build', iconName: 'lucide:hammer', label: 'Building...', loading: true, status: 'active' });
+appui.bottomBar.updateWidget('build', { label: 'Build complete', loading: false, status: 'success' });
+appui.bottomBar.removeWidget('build');
+
+appui.bottomBar.addAction({ id: 'refresh', iconName: 'lucide:refreshCw', onClick: () => location.reload() });
+appui.bottomBar.removeAction('refresh');
+
+appui.setBottomBarVisible(false);
+```
+
+**Key Features:**
+- Configurable status widgets with icons, labels, and colored status indicators
+- Loading spinner state for widgets
+- Contextual actions with icon buttons
+- Left/right positioning for both widgets and actions
+- Tooltips on hover
+- Context menu support per widget
+
 #### `DeesAppuiTabs`
 Reusable tab component with horizontal/vertical layout support.
 
@@ -1007,7 +1169,7 @@ A responsive grid component for displaying statistical data with various visuali
       value: 125420,
       unit: '$',
       type: 'number',
-      icon: 'faDollarSign',
+      icon: 'lucide:dollarSign',
       description: '+12.5% from last month',
       color: '#22c55e'
     },
@@ -1016,7 +1178,7 @@ A responsive grid component for displaying statistical data with various visuali
       title: 'CPU Usage',
       value: 73,
       type: 'gauge',
-      icon: 'faMicrochip',
+      icon: 'lucide:cpu',
       gaugeOptions: {
         min: 0, max: 100,
         thresholds: [
@@ -1032,8 +1194,22 @@ A responsive grid component for displaying statistical data with various visuali
       value: '1.2k',
       unit: '/min',
       type: 'trend',
-      icon: 'faServer',
+      icon: 'lucide:server',
       trendData: [45, 52, 38, 65, 72, 68, 75, 82, 79, 85, 88, 92]
+    },
+    {
+      id: 'cores',
+      title: 'CPU Cores',
+      value: 0,
+      type: 'cpuCores',
+      icon: 'lucide:cpu',
+      columnSpan: 2,
+      coresData: [
+        { id: 0, usage: 45, label: '0' },
+        { id: 1, usage: 72, label: '1' },
+        { id: 2, usage: 30, label: '2' },
+        { id: 3, usage: 88, label: '3' }
+      ]
     }
   ]}
   .minTileWidth=${250}
@@ -1041,6 +1217,8 @@ A responsive grid component for displaying statistical data with various visuali
 ></dees-statsgrid>
 ```
 
+**Tile Types:** `number`, `gauge`, `percentage`, `trend`, `text`, `multiPercentage`, `cpuCores`
+
 #### `DeesPagination`
 Pagination component for navigating through large datasets.
 
@@ -1189,7 +1367,7 @@ Progress indicator component for tracking completion status.
 Theme provider component that wraps children and provides CSS custom properties for consistent theming.
 
 ```typescript
-// Basic usage - wrap your app
+// Basic usage — wrap your app
 <dees-theme>
   <my-app></my-app>
 </dees-theme>
@@ -1217,7 +1395,7 @@ Theme provider component that wraps children and provides CSS custom properties
 
 ---
 
-### Development Components
+### Workspace / IDE Components
 
 #### `DeesEditor`
 Code editor component with syntax highlighting and code completion, powered by Monaco Editor.
@@ -1236,28 +1414,6 @@ Code editor component with syntax highlighting and code completion, powered by M
 ></dees-editor>
 ```
 
-#### `DeesEditorMarkdown`
-Markdown editor component with live preview.
-
-```typescript
-<dees-editor-markdown
-  .value=${markdown}
-  @change=${handleMarkdownChange}
-  .options=${{ preview: true, toolbar: true, spellcheck: true }}
-></dees-editor-markdown>
-```
-
-#### `DeesEditorMarkdownoutlet`
-Markdown preview component for rendering markdown content.
-
-```typescript
-<dees-editor-markdownoutlet
-  .markdown=${markdownContent}
-  .theme=${'github'}
-  allowHtml={false}
-></dees-editor-markdownoutlet>
-```
-
 #### `DeesTerminal`
 Terminal emulator component for command-line interface.
 
@@ -1286,7 +1442,7 @@ Component for managing application updates and version control.
 
 ---
 
-### Auth & Utilities Components
+### Pre-built Templates
 
 #### `DeesSimpleAppdash`
 Simple application dashboard component for quick prototyping.
@@ -1360,6 +1516,8 @@ interface IMenuItem {
   action: () => void;
   badge?: string | number;
   badgeVariant?: 'default' | 'success' | 'warning' | 'error';
+  closeable?: boolean;
+  onClose?: () => void;
 }
 
 // Menu group interface for organized menus
@@ -1375,11 +1533,13 @@ interface IViewDefinition {
   id: string;
   name: string;
   iconName?: string;
-  content: string | HTMLElement | (() => TemplateResult);
+  content: string | (new () => HTMLElement) | (() => TemplateResult) | (() => Promise<any>);
   secondaryMenu?: ISecondaryMenuGroup[];
   contentTabs?: IMenuItem[];
   route?: string;
   badge?: string | number;
+  badgeVariant?: 'default' | 'success' | 'warning' | 'error';
+  cache?: boolean;
 }
 
 // Activity log entry
@@ -1392,6 +1552,36 @@ interface IActivityEntry {
   iconName?: string;
   data?: Record<string, unknown>;
 }
+
+// Bottom bar widget
+interface IBottomBarWidget {
+  id: string;
+  iconName?: string;
+  label?: string;
+  status?: 'idle' | 'active' | 'success' | 'warning' | 'error';
+  tooltip?: string;
+  loading?: boolean;
+  onClick?: () => void;
+  position?: 'left' | 'right';
+  order?: number;
+}
+
+// Bottom bar action button
+interface IBottomBarAction {
+  id: string;
+  iconName: string;
+  tooltip?: string;
+  onClick: () => void | Promise<void>;
+  disabled?: boolean;
+  position?: 'left' | 'right';
+}
+
+// View activation context (passed to onActivate)
+interface IViewActivationContext {
+  appui: DeesAppui;
+  viewId: string;
+  params?: Record<string, string>;
+}
 ```
 
 ---

ts_web/00_commitinfo_data.ts

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