v3.0.0

changelog.md

@@ -1,5 +1,42 @@
 # Changelog
 
+## 2025-12-08 - 3.0.0 - BREAKING CHANGE(dees-appui-secondarymenu)
+Add SecondaryMenu component and replace Mainselector with new SecondaryMenu in AppUI
+
+- Add dees-appui-secondarymenu component: collapsible groups, badges, dynamic heading, context menu and legacy flat-options support
+- Introduce interfaces ISecondaryMenuItem and ISecondaryMenuGroup under elements/interfaces
+- Replace dees-appui-mainselector usage with dees-appui-secondarymenu in DeesAppuiBase (props/events updated: secondarymenuGroups, secondarymenuHeading, secondarymenuOptions, item-select / secondarymenu-item-select)
+- Remove dees-appui-mainselector implementation and its index export; update group exports and imports to expose secondarymenu
+- Update demos and pages to showcase the new SecondaryMenu and adjust import paths for grouped components
+- Bump devDependency @git.zone/tswatch to ^2.3.1
+
+## 2025-12-08 - 2.0.7 - fix(structure)
+Add many new UI components, input controls, charts, editors, and demos
+
+- Introduce App UI components: dees-appui-appbar, dees-appui-mainmenu, dees-appui-mainselector, dees-appui-maincontent, dees-appui-activitylog, dees-appui-profiledropdown, dees-appui-tabs, dees-appui-base, dees-appui-view (templates, styles and demos included).
+- Add a comprehensive set of input components: dees-input-text, dees-input-checkbox, dees-input-dropdown, dees-input-fileupload, dees-input-datepicker, dees-input-phone, dees-input-iban, dees-input-quantityselector, dees-input-list, dees-input-typelist, dees-input-tags, dees-input-multitoggle, dees-input-radiogroup, dees-input-richtext and supporting demos/styles/templates.
+- Add form primitives and integration: dees-form and dees-form-submit with validation, collection and demo pages showcasing usage.
+- Add button family and utilities: dees-button (with updated variants, sizes, status handling and demo), dees-button-group and dees-button-exit.
+- Add charting components: dees-chart-area (ApexCharts integration) and dees-chart-log (log viewer) plus rich demo scenarios and realtime features.
+- Add data display components: dees-dataview-codebox (highlight.js integration) and dees-dataview-statusobject with copy/context behaviours and demos.
+- Add editor tooling: dees-editor (Monaco loader/version management), dees-editor-markdown and dees-editor-markdownoutlet; also TipTap-based richtext input with toolbar and link handling.
+- Add global utilities and infra: dees-toast (programmatic toast API and containers), z-index registry and theme/font helpers (fonts, color tokens), plus many styles and accessibility/keyboard improvements across components.
+- Export and index updates: new group exports added to ts_web/elements index and many index.ts files to expose the new components and demos.
+- Extensive demos and showcase pages added (input-showcase, component demos) to illustrate integration, keyboard navigation, theming and form flows.
+
+## 2025-12-06 - 2.0.6 - fix(dees-input-richtext)
+Initialize editor and link input element references in firstUpdated to ensure they exist before editor initialization.
+
+- Assign editorElement from shadowRoot.querySelector('.editor-content') in firstUpdated.
+- Assign linkInputElement from shadowRoot.querySelector('.link-input input') in firstUpdated.
+- Call initializeEditor() after DOM references are set to avoid undefined-element runtime errors.
+
+## 2025-12-06 - 2.0.5 - fix(build)
+Bump devDependencies: update @git.zone/tsbundle and @git.zone/tswatch to patched versions
+
+- Update @git.zone/tsbundle from ^2.6.2 to ^2.6.3
+- Update @git.zone/tswatch from ^2.2.2 to ^2.2.3
+
 ## 2025-12-06 - 2.0.4 - fix(imports)
 Normalize and fix relative import paths for web components to ensure correct module resolution
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "2.0.4",
+  "version": "3.0.0",
   "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",
@@ -46,9 +46,9 @@
   },
   "devDependencies": {
     "@git.zone/tsbuild": "^3.1.2",
-    "@git.zone/tsbundle": "^2.6.2",
+    "@git.zone/tsbundle": "^2.6.3",
     "@git.zone/tstest": "^3.1.3",
-    "@git.zone/tswatch": "^2.2.2",
+    "@git.zone/tswatch": "^2.3.1",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^6.0.3",
     "@types/node": "^24.10.1"

ts_web/00_commitinfo_data.ts

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

ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts

@@ -1,4 +1,4 @@
-import * as plugins from '../00plugins.js';
+import * as plugins from '../../00plugins.js';
 import {
   DeesElement,
   type TemplateResult,
@@ -10,8 +10,8 @@ import {
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
-import { DeesContextmenu } from '../dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
-import '../dees-icon/dees-icon.js';
+import '../../dees-icon/dees-icon.js';
 
 @customElement('dees-appui-activitylog')
 export class DeesAppuiActivitylog extends DeesElement {

ts_web/elements/00group-appui/dees-appui-activitylog/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-activitylog.js';

ts_web/elements/00group-appui/dees-appui-appbar/component.ts

@@ -8,15 +8,15 @@ import {
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
-import * as interfaces from '../interfaces/index.js';
+import * as interfaces from '../../interfaces/index.js';
-import * as plugins from '../00plugins.js';
+import * as plugins from '../../00plugins.js';
 import { demoFunc } from './demo.js';
 import { appuiAppbarStyles } from './styles.js';
 import { renderAppuiAppbar } from './template.js';
 
 // Import required components
-import '../dees-icon/dees-icon.js';
+import '../../dees-icon/dees-icon.js';
-import '../dees-windowcontrols/dees-windowcontrols.js';
+import '../../dees-windowcontrols/dees-windowcontrols.js';
 import '../dees-appui-profiledropdown/dees-appui-profiledropdown.js';
 
 declare global {

ts_web/elements/00group-appui/dees-appui-appbar/demo.ts

@@ -1,6 +1,6 @@
 import { html, css } from '@design.estate/dees-element';
 import type { DeesAppuiBar } from './component.js';
-import type { IAppBarMenuItem } from '../interfaces/appbarmenuitem.js';
+import type { IAppBarMenuItem } from '../../interfaces/appbarmenuitem.js';
 import '@design.estate/dees-wcctools/demotools';
 import './component.js';
 

ts_web/elements/00group-appui/dees-appui-appbar/index.ts

@@ -0,0 +1 @@
+export * from './component.js';

ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.demo.ts

@@ -0,0 +1,238 @@
+import { html, css } from '@design.estate/dees-element';
+import type { DeesAppuiBase } from '../dees-appui-base/dees-appui-base.js';
+import type { IAppBarMenuItem } from '../../interfaces/appbarmenuitem.js';
+import type { ITab } from '../../interfaces/tab.js';
+import type { ISelectionOption } from '../../interfaces/selectionoption.js';
+import type { IMenuGroup } from '../../interfaces/menugroup.js';
+import type { ISecondaryMenuGroup } from '../../interfaces/secondarymenu.js';
+import * as plugins from '../../00plugins.js';
+import '@design.estate/dees-wcctools/demotools';
+
+export const demoFunc = () => {
+  // Menu items for the appbar
+  const menuItems: IAppBarMenuItem[] = [
+    {
+      name: 'File',
+      action: async () => {},
+      submenu: [
+        { name: 'New Project', shortcut: 'Cmd+N', iconName: 'filePlus', action: async () => console.log('New project') },
+        { name: 'Open Project...', shortcut: 'Cmd+O', iconName: 'folderOpen', action: async () => console.log('Open project') },
+        { name: 'Recent Projects', action: async () => {}, submenu: [
+          { name: 'my-app', action: async () => console.log('Open my-app') },
+          { name: 'component-lib', action: async () => console.log('Open component-lib') },
+          { name: 'api-server', action: async () => console.log('Open api-server') },
+        ]},
+        { divider: true },
+        { name: 'Save All', shortcut: 'Cmd+Shift+S', iconName: 'save', action: async () => console.log('Save all') },
+        { divider: true },
+        { name: 'Close Project', action: async () => console.log('Close project') },
+      ]
+    },
+    {
+      name: 'Edit',
+      action: async () => {},
+      submenu: [
+        { name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => console.log('Undo') },
+        { name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => console.log('Redo') },
+        { divider: true },
+        { name: 'Cut', shortcut: 'Cmd+X', iconName: 'scissors', action: async () => console.log('Cut') },
+        { name: 'Copy', shortcut: 'Cmd+C', iconName: 'copy', action: async () => console.log('Copy') },
+        { name: 'Paste', shortcut: 'Cmd+V', iconName: 'clipboard', action: async () => console.log('Paste') },
+      ]
+    },
+    {
+      name: 'View',
+      action: async () => {},
+      submenu: [
+        { name: 'Toggle Sidebar', shortcut: 'Cmd+B', action: async () => console.log('Toggle sidebar') },
+        { name: 'Toggle Terminal', shortcut: 'Cmd+J', iconName: 'terminal', action: async () => console.log('Toggle terminal') },
+        { divider: true },
+        { name: 'Zoom In', shortcut: 'Cmd++', iconName: 'zoomIn', action: async () => console.log('Zoom in') },
+        { name: 'Zoom Out', shortcut: 'Cmd+-', iconName: 'zoomOut', action: async () => console.log('Zoom out') },
+        { name: 'Reset Zoom', shortcut: 'Cmd+0', action: async () => console.log('Reset zoom') },
+      ]
+    },
+    {
+      name: 'Help',
+      action: async () => {},
+      submenu: [
+        { name: 'Documentation', iconName: 'book', action: async () => console.log('Documentation') },
+        { name: 'Release Notes', iconName: 'fileText', action: async () => console.log('Release notes') },
+        { divider: true },
+        { name: 'Report Issue', iconName: 'bug', action: async () => console.log('Report issue') },
+        { name: 'About', iconName: 'info', action: async () => console.log('About') },
+      ]
+    }
+  ];
+
+  // Main menu groups (left sidebar)
+  const mainMenuGroups: IMenuGroup[] = [
+    {
+      tabs: [
+        { key: 'Dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard selected') },
+        { key: 'Inbox', iconName: 'lucide:inbox', action: () => console.log('Inbox selected') },
+      ]
+    },
+    {
+      name: 'Workspace',
+      tabs: [
+        { key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects selected') },
+        { key: 'Tasks', iconName: 'lucide:checkSquare', action: () => console.log('Tasks selected') },
+        { key: 'Documents', iconName: 'lucide:fileText', action: () => console.log('Documents selected') },
+      ]
+    },
+    {
+      name: 'Analytics',
+      tabs: [
+        { key: 'Reports', iconName: 'lucide:barChart3', action: () => console.log('Reports selected') },
+        { key: 'Insights', iconName: 'lucide:lightbulb', action: () => console.log('Insights selected') },
+      ]
+    }
+  ];
+
+  // Main menu bottom tabs (pinned to bottom)
+  const mainMenuBottomTabs: ITab[] = [
+    { key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings selected') },
+    { key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help selected') },
+  ];
+
+  // Secondary menu groups (second sidebar with collapsible groups)
+  // These showcase the new shadcn-style design with badges and collapsible sections
+  const secondaryMenuGroups: ISecondaryMenuGroup[] = [
+    {
+      name: 'Quick Access',
+      iconName: 'lucide:zap',
+      items: [
+        { key: 'Overview', iconName: 'layoutDashboard', action: () => console.log('Overview selected') },
+        { key: 'Recent Activity', iconName: 'clock', action: () => console.log('Recent Activity selected'), badge: 5 },
+        { key: 'Favorites', iconName: 'star', action: () => console.log('Favorites selected') },
+      ]
+    },
+    {
+      name: 'Resources',
+      iconName: 'lucide:layers',
+      items: [
+        { key: 'Components', iconName: 'package', action: () => console.log('Components selected'), badge: 24 },
+        { key: 'Services', iconName: 'server', action: () => console.log('Services selected'), badge: 'new', badgeVariant: 'success' },
+        { key: 'APIs', iconName: 'globe', action: () => console.log('APIs selected'), badge: 3, badgeVariant: 'warning' },
+        { key: 'Webhooks', iconName: 'webhook', action: () => console.log('Webhooks selected') },
+      ]
+    },
+    {
+      name: 'Data Management',
+      iconName: 'lucide:database',
+      items: [
+        { key: 'Database', iconName: 'database', action: () => console.log('Database selected') },
+        { key: 'Storage', iconName: 'hardDrive', action: () => console.log('Storage selected'), badge: '85%', badgeVariant: 'warning' },
+        { key: 'Backups', iconName: 'archive', action: () => console.log('Backups selected'), badge: 'OK', badgeVariant: 'success' },
+      ]
+    },
+    {
+      name: 'System',
+      iconName: 'lucide:settings',
+      collapsed: true,
+      items: [
+        { key: 'Configuration', iconName: 'sliders', action: () => console.log('Configuration selected') },
+        { key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations selected'), badge: 2, badgeVariant: 'error' },
+        { key: 'Permissions', iconName: 'shield', action: () => console.log('Permissions selected') },
+        { key: 'Logs', iconName: 'fileText', action: () => console.log('Logs selected') },
+      ]
+    }
+  ];
+
+  // Main content tabs
+  const mainContentTabs: ITab[] = [
+    { key: 'Details', iconName: 'lucide:file', action: () => console.log('Details tab') },
+    { key: 'Logs', iconName: 'lucide:list', action: () => console.log('Logs tab') },
+    { key: 'Metrics', iconName: 'lucide:lineChart', action: () => console.log('Metrics tab') },
+  ];
+
+  // Profile menu items
+  const profileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [
+    { name: 'Profile Settings', iconName: 'user', action: async () => console.log('Profile settings') },
+    { name: 'Account', iconName: 'settings', action: async () => console.log('Account settings') },
+    { divider: true },
+    { name: 'Help & Support', iconName: 'helpCircle', action: async () => console.log('Help') },
+    { name: 'Keyboard Shortcuts', iconName: 'keyboard', shortcut: 'Cmd+K', action: async () => console.log('Shortcuts') },
+    { divider: true },
+    { name: 'Sign Out', iconName: 'logOut', action: async () => console.log('Sign out') }
+  ];
+
+  return html`
+    <dees-demowrapper>
+      <style>
+        ${css`
+        .demo-container {
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          width: 100%;
+          overflow: hidden;
+        }
+        
+      `}
+      </style>
+      
+      <div class="demo-container">
+        <dees-appui-base
+          .appbarMenuItems=${menuItems}
+          .appbarBreadcrumbs=${'Dashboard'}
+          .appbarUser=${{
+            name: 'Jane Smith',
+            email: 'jane.smith@example.com',
+            status: 'online' as 'online' | 'offline' | 'busy' | 'away'
+          }}
+          .appbarProfileMenuItems=${profileMenuItems}
+          .appbarShowWindowControls=${true}
+          .appbarShowSearch=${true}
+          .mainmenuLogoIcon=${'lucide:box'}
+          .mainmenuLogoText=${'Acme App'}
+          .mainmenuGroups=${mainMenuGroups}
+          .mainmenuBottomTabs=${mainMenuBottomTabs}
+          .secondarymenuHeading=${'Dashboard'}
+          .secondarymenuGroups=${secondaryMenuGroups}
+          .maincontentTabs=${mainContentTabs}
+          @appbar-menu-select=${(e: CustomEvent) => console.log('Menu selected:', e.detail)}
+          @appbar-breadcrumb-navigate=${(e: CustomEvent) => console.log('Breadcrumb:', e.detail)}
+          @appbar-search-click=${() => console.log('Search clicked')}
+          @appbar-user-menu-open=${() => console.log('User menu opened')}
+          @appbar-profile-menu-select=${(e: CustomEvent) => console.log('Profile menu selected:', e.detail)}
+          @mainmenu-tab-select=${(e: CustomEvent) => console.log('Tab selected:', e.detail)}
+          @secondarymenu-item-select=${(e: CustomEvent) => console.log('Item selected:', e.detail)}
+        >
+          <div slot="maincontent" style="padding: 40px; color: #a3a3a3; font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;">
+            <h1 style="color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 8px;">Welcome to Acme App</h1>
+            <p style="color: #737373; margin-bottom: 32px;">This demo showcases the AppUI component system with the new SecondaryMenu.</p>
+
+            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 32px;">
+              <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 20px;">
+                <h3 style="color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px;">SecondaryMenu Features</h3>
+                <ul style="margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.8;">
+                  <li>Collapsible groups with smooth animations</li>
+                  <li>Badge support (counts, status, variants)</li>
+                  <li>Dynamic heading from MainMenu selection</li>
+                  <li>shadcn-inspired modern design</li>
+                </ul>
+              </div>
+              <div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 20px;">
+                <h3 style="color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px;">Badge Variants</h3>
+                <div style="display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px;">
+                  <span style="background: #27272a; color: #a1a1aa; padding: 2px 8px; border-radius: 9px;">default</span>
+                  <span style="background: #14532d; color: #4ade80; padding: 2px 8px; border-radius: 9px;">success</span>
+                  <span style="background: #451a03; color: #fbbf24; padding: 2px 8px; border-radius: 9px;">warning</span>
+                  <span style="background: #450a0a; color: #f87171; padding: 2px 8px; border-radius: 9px;">error</span>
+                </div>
+              </div>
+            </div>
+
+            <p style="font-size: 13px; color: #525252;">
+              Try clicking items in the MainMenu (left) - the SecondaryMenu heading updates automatically.
+              Click group headers in the SecondaryMenu to collapse/expand sections.
+            </p>
+          </div>
+        </dees-appui-base>
+      </div>
+    </dees-demowrapper>
+  `;
+};

ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts

@@ -8,11 +8,11 @@ import {
   cssManager,
   state,
 } from '@design.estate/dees-element';
-import * as interfaces from '../interfaces/index.js';
+import * as interfaces from '../../interfaces/index.js';
-import * as plugins from '../00plugins.js';
+import * as plugins from '../../00plugins.js';
 import type { DeesAppuiBar } from '../dees-appui-appbar/index.js';
 import type { DeesAppuiMainmenu } from '../dees-appui-mainmenu/dees-appui-mainmenu.js';
-import type { DeesAppuiMainselector } from '../dees-appui-mainselector/dees-appui-mainselector.js';
+import type { DeesAppuiSecondarymenu } from '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
 import type { DeesAppuiMaincontent } from '../dees-appui-maincontent/dees-appui-maincontent.js';
 import type { DeesAppuiActivitylog } from '../dees-appui-activitylog/dees-appui-activitylog.js';
 import { demoFunc } from './dees-appui-base.demo.js';
@@ -20,7 +20,7 @@ import { demoFunc } from './dees-appui-base.demo.js';
 // Import child components
 import '../dees-appui-appbar/index.js';
 import '../dees-appui-mainmenu/dees-appui-mainmenu.js';
-import '../dees-appui-mainselector/dees-appui-mainselector.js';
+import '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
 import '../dees-appui-maincontent/dees-appui-maincontent.js';
 import '../dees-appui-activitylog/dees-appui-activitylog.js';
 
@@ -57,18 +57,37 @@ export class DeesAppuiBase extends DeesElement {
   accessor appbarShowSearch: boolean = false;
 
   // Properties for mainmenu
+  @property({ type: String })
+  accessor mainmenuLogoIcon: string = '';
+
+  @property({ type: String })
+  accessor mainmenuLogoText: string = '';
+
+  @property({ type: Array })
+  accessor mainmenuGroups: interfaces.IMenuGroup[] = [];
+
+  @property({ type: Array })
+  accessor mainmenuBottomTabs: interfaces.ITab[] = [];
+
   @property({ type: Array })
   accessor mainmenuTabs: interfaces.ITab[] = [];
 
   @property({ type: Object })
   accessor mainmenuSelectedTab: interfaces.ITab | undefined = undefined;
 
-  // Properties for mainselector
+  // Properties for secondarymenu
+  @property({ type: String })
+  accessor secondarymenuHeading: string = 'Menu';
+
   @property({ type: Array })
-  accessor mainselectorOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
+  accessor secondarymenuGroups: interfaces.ISecondaryMenuGroup[] = [];
 
   @property({ type: Object })
-  accessor mainselectorSelectedOption: interfaces.ISelectionOption | undefined = undefined;
+  accessor secondarymenuSelectedItem: interfaces.ISecondaryMenuItem | undefined = undefined;
+
+  /** Legacy support for flat options (backward compatibility) */
+  @property({ type: Array })
+  accessor secondarymenuOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
 
   // Properties for maincontent
   @property({ type: Array })
@@ -82,7 +101,7 @@ export class DeesAppuiBase extends DeesElement {
   accessor mainmenu: DeesAppuiMainmenu | undefined = undefined;
 
   @state()
-  accessor mainselector: DeesAppuiMainselector | undefined = undefined;
+  accessor secondarymenu: DeesAppuiSecondarymenu | undefined = undefined;
 
   @state()
   accessor maincontent: DeesAppuiMaincontent | undefined = undefined;
@@ -105,7 +124,8 @@ export class DeesAppuiBase extends DeesElement {
         height: calc(100% - 40px);
         width: 100%;
         display: grid;
-        grid-template-columns: 60px 240px 1fr 240px;
+        grid-template-columns: 200px 240px 1fr 240px;
+        grid-template-rows: 1fr;
       }
     `,
   ];
@@ -130,15 +150,21 @@ export class DeesAppuiBase extends DeesElement {
       ></dees-appui-appbar>
       <div class="maingrid">
         <dees-appui-mainmenu
+          .logoIcon=${this.mainmenuLogoIcon}
+          .logoText=${this.mainmenuLogoText}
+          .menuGroups=${this.mainmenuGroups}
+          .bottomTabs=${this.mainmenuBottomTabs}
           .tabs=${this.mainmenuTabs}
           .selectedTab=${this.mainmenuSelectedTab}
           @tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
         ></dees-appui-mainmenu>
-        <dees-appui-mainselector
+        <dees-appui-secondarymenu
-          .selectionOptions=${this.mainselectorOptions}
+          .heading=${this.secondarymenuHeading}
-          .selectedOption=${this.mainselectorSelectedOption}
+          .groups=${this.secondarymenuGroups}
-          @option-select=${(e: CustomEvent) => this.handleMainselectorOptionSelect(e)}
+          .selectionOptions=${this.secondarymenuOptions}
-        ></dees-appui-mainselector>
+          .selectedItem=${this.secondarymenuSelectedItem}
+          @item-select=${(e: CustomEvent) => this.handleSecondarymenuItemSelect(e)}
+        ></dees-appui-secondarymenu>
         <dees-appui-maincontent
           .tabs=${this.maincontentTabs}
         >
@@ -153,7 +179,7 @@ export class DeesAppuiBase extends DeesElement {
     // Get references to child components
     this.appbar = this.shadowRoot.querySelector('dees-appui-appbar');
     this.mainmenu = this.shadowRoot.querySelector('dees-appui-mainmenu');
-    this.mainselector = this.shadowRoot.querySelector('dees-appui-mainselector');
+    this.secondarymenu = this.shadowRoot.querySelector('dees-appui-secondarymenu');
     this.maincontent = this.shadowRoot.querySelector('dees-appui-maincontent');
     this.activitylog = this.shadowRoot.querySelector('dees-appui-activitylog');
   }
@@ -200,6 +226,8 @@ export class DeesAppuiBase extends DeesElement {
   // Event handlers for mainmenu
   private handleMainmenuTabSelect(e: CustomEvent) {
     this.mainmenuSelectedTab = e.detail.tab;
+    // Update secondary menu heading based on main menu selection
+    this.secondarymenuHeading = e.detail.tab.key;
     this.dispatchEvent(new CustomEvent('mainmenu-tab-select', {
       detail: e.detail,
       bubbles: true,
@@ -207,10 +235,10 @@ export class DeesAppuiBase extends DeesElement {
     }));
   }
 
-  // Event handlers for mainselector
+  // Event handlers for secondarymenu
-  private handleMainselectorOptionSelect(e: CustomEvent) {
+  private handleSecondarymenuItemSelect(e: CustomEvent) {
-    this.mainselectorSelectedOption = e.detail.option;
+    this.secondarymenuSelectedItem = e.detail.item;
-    this.dispatchEvent(new CustomEvent('mainselector-option-select', {
+    this.dispatchEvent(new CustomEvent('secondarymenu-item-select', {
       detail: e.detail,
       bubbles: true,
       composed: true

ts_web/elements/00group-appui/dees-appui-base/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-base.js';

ts_web/elements/00group-appui/dees-appui-maincontent/dees-appui-maincontent.ts

@@ -1,4 +1,4 @@
-import * as interfaces from '../interfaces/index.js';
+import * as interfaces from '../../interfaces/index.js';
 
 import {
   DeesElement,

ts_web/elements/00group-appui/dees-appui-maincontent/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-maincontent.js';

ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts

@@ -0,0 +1,352 @@
+import * as plugins from '../../00plugins.js';
+import * as interfaces from '../../interfaces/index.js';
+import { zIndexLayers } from '../../00zindex.js';
+
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+
+/**
+ * the most left menu
+ * usually used as organization selector
+ */
+@customElement('dees-appui-mainmenu')
+export class DeesAppuiMainmenu extends DeesElement {
+  public static demo = () => html`
+    <style>
+      .demo-mainmenu-container {
+        height: 500px;
+        background: #1a1a1a;
+        border-radius: 8px;
+        overflow: hidden;
+      }
+    </style>
+    <div class="demo-mainmenu-container">
+      <dees-appui-mainmenu
+        .logoIcon=${'lucide:box'}
+        .logoText=${'Acme App'}
+        .menuGroups=${[
+          {
+            tabs: [
+              { key: 'Dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard') },
+              { key: 'Inbox', iconName: 'lucide:inbox', action: () => console.log('Inbox') },
+            ]
+          },
+          {
+            name: 'Workspace',
+            tabs: [
+              { key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects') },
+              { key: 'Tasks', iconName: 'lucide:checkSquare', action: () => console.log('Tasks') },
+              { key: 'Documents', iconName: 'lucide:fileText', action: () => console.log('Documents') },
+            ]
+          },
+          {
+            name: 'Analytics',
+            tabs: [
+              { key: 'Reports', iconName: 'lucide:barChart3', action: () => console.log('Reports') },
+              { key: 'Insights', iconName: 'lucide:lightbulb', action: () => console.log('Insights') },
+            ]
+          }
+        ]}
+        .bottomTabs=${[
+          { key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings') },
+          { key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help') },
+        ]}
+      ></dees-appui-mainmenu>
+    </div>
+  `;
+
+  // INSTANCE
+
+  // Logo properties
+  @property({ type: String })
+  accessor logoIcon: string = '';
+
+  @property({ type: String })
+  accessor logoText: string = '';
+
+  // Menu groups (new way)
+  @property({ type: Array })
+  accessor menuGroups: interfaces.IMenuGroup[] = [];
+
+  // Bottom tabs (pinned to bottom)
+  @property({ type: Array })
+  accessor bottomTabs: interfaces.ITab[] = [];
+
+  // Legacy tabs property (for backward compatibility)
+  @property({ type: Array })
+  accessor tabs: interfaces.ITab[] = [];
+
+  @property()
+  accessor selectedTab: interfaces.ITab;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .mainContainer {
+        --menuWidth: 200px;
+        color: ${cssManager.bdTheme('#666', '#ccc')};
+        z-index: ${zIndexLayers.fixed.appBar};
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        width: var(--menuWidth);
+        height: 100%;
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        user-select: none;
+        border-right: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+      }
+
+      /* Logo Section */
+      .logoSection {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 16px 14px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        flex-shrink: 0;
+      }
+
+      .logoSection dees-icon {
+        font-size: 22px;
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+      }
+
+      .logoSection .logoText {
+        font-size: 15px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      /* Middle Section (scrollable) */
+      .menuSection {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 8px 0;
+      }
+
+      .menuSection::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .menuSection::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .menuSection::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+        border-radius: 3px;
+      }
+
+      .menuSection::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
+      }
+
+      /* Menu Group */
+      .menuGroup {
+        padding: 0 8px;
+        margin-bottom: 8px;
+      }
+
+      .menuGroup:last-child {
+        margin-bottom: 0;
+      }
+
+      .groupHeader {
+        padding: 8px 12px 6px;
+        font-size: 11px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#737373', '#737373')};
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .groupTabs {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      /* Tab Item */
+      .tab {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px 12px;
+        font-size: 13px;
+        font-weight: 500;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
+      }
+
+      .tab:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+        color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
+      }
+
+      .tab:active {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+      }
+
+      .tab.selectedTab {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+      }
+
+      .tab.selectedTab::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 16px;
+        background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        border-radius: 0 2px 2px 0;
+      }
+
+      .tab dees-icon {
+        font-size: 18px;
+        opacity: 0.85;
+        flex-shrink: 0;
+      }
+
+      .tab.selectedTab dees-icon {
+        opacity: 1;
+      }
+
+      .tab .tabLabel {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      /* Bottom Section */
+      .bottomSection {
+        flex-shrink: 0;
+        padding: 8px;
+        border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    // Get all tabs for selection (from groups or legacy tabs)
+    const allTabs = this.getAllTabs();
+
+    return html`
+      <div class="mainContainer" @contextmenu=${(eventArg: MouseEvent) => {
+        DeesContextmenu.openContextMenuWithOptions(eventArg, [{
+          name: 'app settings',
+          action: async () => {},
+          iconName: 'gear',
+        }])
+      }}>
+        ${this.logoIcon || this.logoText ? html`
+          <div class="logoSection">
+            ${this.logoIcon ? html`<dees-icon .icon="${this.logoIcon}"></dees-icon>` : ''}
+            ${this.logoText ? html`<span class="logoText">${this.logoText}</span>` : ''}
+          </div>
+        ` : ''}
+
+        <div class="menuSection">
+          ${this.menuGroups.length > 0 ? this.renderMenuGroups() : this.renderLegacyTabs()}
+        </div>
+
+        ${this.bottomTabs.length > 0 ? html`
+          <div class="bottomSection">
+            ${this.bottomTabs.map((tabArg) => this.renderTab(tabArg))}
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  private renderMenuGroups(): TemplateResult {
+    return html`
+      ${this.menuGroups.map((group) => html`
+        <div class="menuGroup">
+          ${group.name ? html`<div class="groupHeader">${group.name}</div>` : ''}
+          <div class="groupTabs">
+            ${group.tabs.map((tabArg) => this.renderTab(tabArg))}
+          </div>
+        </div>
+      `)}
+    `;
+  }
+
+  private renderLegacyTabs(): TemplateResult {
+    return html`
+      <div class="menuGroup">
+        <div class="groupTabs">
+          ${this.tabs.map((tabArg) => this.renderTab(tabArg))}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderTab(tabArg: interfaces.ITab): TemplateResult {
+    return html`
+      <div
+        class="tab ${tabArg === this.selectedTab ? 'selectedTab' : ''}"
+        @click="${() => {
+          this.updateTab(tabArg);
+        }}"
+      >
+        <dees-icon .icon="${tabArg.iconName || ''}"></dees-icon>
+        <span class="tabLabel">${tabArg.key}</span>
+      </div>
+    `;
+  }
+
+  private getAllTabs(): interfaces.ITab[] {
+    if (this.menuGroups.length > 0) {
+      const groupTabs = this.menuGroups.flatMap(group => group.tabs);
+      return [...groupTabs, ...this.bottomTabs];
+    }
+    return [...this.tabs, ...this.bottomTabs];
+  }
+
+  updateTab(tabArg: interfaces.ITab) {
+    this.selectedTab = tabArg;
+    this.selectedTab.action();
+
+    // Emit tab-select event
+    this.dispatchEvent(new CustomEvent('tab-select', {
+      detail: { tab: tabArg },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  firstUpdated() {
+    const allTabs = this.getAllTabs();
+    if (allTabs.length > 0) {
+      this.updateTab(allTabs[0]);
+    }
+  }
+}

ts_web/elements/00group-appui/dees-appui-mainmenu/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-mainmenu.js';

ts_web/elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.ts

@@ -1,5 +1,5 @@
-import * as plugins from '../00plugins.js';
+import * as plugins from '../../00plugins.js';
-import { zIndexLayers } from '../00zindex.js';
+import { zIndexLayers } from '../../00zindex.js';
 
 import {
   DeesElement,

ts_web/elements/00group-appui/dees-appui-profiledropdown/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-profiledropdown.js';

ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts

@@ -0,0 +1,486 @@
+import * as plugins from '../../00plugins.js';
+import * as interfaces from '../../interfaces/index.js';
+
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import '../../dees-icon/dees-icon.js';
+
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  state,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+/**
+ * Secondary navigation menu for sub-navigation within MainMenu views
+ * Supports collapsible groups, badges, and dynamic headings
+ */
+@customElement('dees-appui-secondarymenu')
+export class DeesAppuiSecondarymenu extends DeesElement {
+  public static demo = () => html`
+    <style>
+      .demo-container {
+        height: 500px;
+        display: flex;
+        background: #1a1a1a;
+        border-radius: 8px;
+        overflow: hidden;
+      }
+    </style>
+    <div class="demo-container">
+      <dees-appui-secondarymenu
+        .heading=${'Projects'}
+        .groups=${[
+          {
+            name: 'Active',
+            iconName: 'lucide:folder',
+            items: [
+              { key: 'Frontend App', iconName: 'code', action: () => console.log('Frontend'), badge: 3, badgeVariant: 'warning' },
+              { key: 'API Server', iconName: 'server', action: () => console.log('API'), badge: 'new', badgeVariant: 'success' },
+              { key: 'Database', iconName: 'database', action: () => console.log('Database') },
+            ]
+          },
+          {
+            name: 'Archived',
+            iconName: 'lucide:archive',
+            collapsed: true,
+            items: [
+              { key: 'Legacy System', iconName: 'box', action: () => console.log('Legacy') },
+              { key: 'Old API', iconName: 'server', action: () => console.log('Old API') },
+            ]
+          },
+          {
+            name: 'Settings',
+            iconName: 'lucide:settings',
+            items: [
+              { key: 'Configuration', iconName: 'sliders', action: () => console.log('Config') },
+              { key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations'), badge: 5, badgeVariant: 'error' },
+            ]
+          }
+        ] as interfaces.ISecondaryMenuGroup[]}
+        @item-select=${(e: CustomEvent) => console.log('Selected:', e.detail)}
+      ></dees-appui-secondarymenu>
+    </div>
+  `;
+
+  // INSTANCE
+
+  /** Dynamic heading - typically shows the selected MainMenu item */
+  @property({ type: String })
+  accessor heading: string = 'Menu';
+
+  /** Grouped items with collapse support */
+  @property({ type: Array })
+  accessor groups: interfaces.ISecondaryMenuGroup[] = [];
+
+  /** Legacy flat list support for backward compatibility */
+  @property({ type: Array })
+  accessor selectionOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
+
+  /** Currently selected item */
+  @property({ type: Object })
+  accessor selectedItem: interfaces.ISecondaryMenuItem | null = null;
+
+  /** Internal state for collapsed groups */
+  @state()
+  accessor collapsedGroups: Set<string> = new Set();
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        --sidebar-width: 240px;
+        --sidebar-bg: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        --sidebar-fg: ${cssManager.bdTheme('#525252', '#a3a3a3')};
+        --sidebar-fg-muted: ${cssManager.bdTheme('#737373', '#737373')};
+        --sidebar-fg-active: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        --sidebar-border: ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        --sidebar-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+        --sidebar-active: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+        --sidebar-accent: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+
+        /* Badge colors */
+        --badge-default-bg: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        --badge-default-fg: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
+        --badge-success-bg: ${cssManager.bdTheme('#dcfce7', '#14532d')};
+        --badge-success-fg: ${cssManager.bdTheme('#166534', '#4ade80')};
+        --badge-warning-bg: ${cssManager.bdTheme('#fef3c7', '#451a03')};
+        --badge-warning-fg: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+        --badge-error-bg: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
+        --badge-error-fg: ${cssManager.bdTheme('#991b1b', '#f87171')};
+
+        display: block;
+        height: 100%;
+        width: var(--sidebar-width);
+        background: var(--sidebar-bg);
+        border-right: 1px solid var(--sidebar-border);
+        font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+        user-select: none;
+      }
+
+      .maincontainer {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      /* Header Section */
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 16px 16px;
+        border-bottom: 1px solid var(--sidebar-border);
+        flex-shrink: 0;
+      }
+
+      .header .heading {
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--sidebar-fg-active);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      /* Scrollable Menu Section */
+      .menuSection {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 8px 0;
+      }
+
+      .menuSection::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .menuSection::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .menuSection::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+        border-radius: 3px;
+      }
+
+      .menuSection::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
+      }
+
+      /* Menu Group */
+      .menuGroup {
+        padding: 0 8px;
+        margin-bottom: 4px;
+      }
+
+      .groupHeader {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 8px;
+        cursor: pointer;
+        border-radius: 6px;
+        transition: background 0.15s ease;
+      }
+
+      .groupHeader:hover {
+        background: var(--sidebar-hover);
+      }
+
+      .groupHeader .groupTitle {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 11px;
+        font-weight: 600;
+        color: var(--sidebar-fg-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+      }
+
+      .groupHeader .groupTitle dees-icon {
+        font-size: 14px;
+        opacity: 0.7;
+      }
+
+      .groupHeader .chevron {
+        font-size: 12px;
+        transition: transform 0.2s ease;
+        color: var(--sidebar-fg-muted);
+      }
+
+      .groupHeader.collapsed .chevron {
+        transform: rotate(-90deg);
+      }
+
+      /* Group Items Container */
+      .groupItems {
+        overflow: hidden;
+        transition: max-height 0.25s ease, opacity 0.2s ease;
+        max-height: 500px;
+        opacity: 1;
+      }
+
+      .groupItems.collapsed {
+        max-height: 0;
+        opacity: 0;
+      }
+
+      /* Menu Item */
+      .menuItem {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 8px 12px;
+        margin: 2px 0;
+        font-size: 13px;
+        font-weight: 450;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: var(--sidebar-fg);
+      }
+
+      .menuItem:hover {
+        background: var(--sidebar-hover);
+        color: var(--sidebar-fg-active);
+      }
+
+      .menuItem:active {
+        background: var(--sidebar-active);
+      }
+
+      .menuItem.selected {
+        background: var(--sidebar-active);
+        color: var(--sidebar-fg-active);
+        font-weight: 500;
+      }
+
+      .menuItem.selected::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 16px;
+        background: var(--sidebar-accent);
+        border-radius: 0 2px 2px 0;
+      }
+
+      .menuItem dees-icon {
+        font-size: 16px;
+        opacity: 0.7;
+        flex-shrink: 0;
+      }
+
+      .menuItem.selected dees-icon {
+        opacity: 1;
+      }
+
+      .menuItem .itemLabel {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      /* Badge Styles */
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 18px;
+        height: 18px;
+        padding: 0 6px;
+        font-size: 10px;
+        font-weight: 600;
+        border-radius: 9px;
+        flex-shrink: 0;
+      }
+
+      .badge.default {
+        background: var(--badge-default-bg);
+        color: var(--badge-default-fg);
+      }
+
+      .badge.success {
+        background: var(--badge-success-bg);
+        color: var(--badge-success-fg);
+      }
+
+      .badge.warning {
+        background: var(--badge-warning-bg);
+        color: var(--badge-warning-fg);
+      }
+
+      .badge.error {
+        background: var(--badge-error-bg);
+        color: var(--badge-error-fg);
+      }
+
+      /* Divider */
+      .divider {
+        height: 1px;
+        background: var(--sidebar-border);
+        margin: 8px 12px;
+      }
+
+      /* Legacy options container */
+      .legacyOptions {
+        padding: 0 8px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="maincontainer">
+        <div class="header">
+          <span class="heading">${this.heading}</span>
+        </div>
+        <div class="menuSection">
+          ${this.groups.length > 0
+            ? this.renderGroups()
+            : this.renderLegacyOptions()}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderGroups(): TemplateResult {
+    return html`
+      ${this.groups.map((group) => html`
+        <div class="menuGroup">
+          <div
+            class="groupHeader ${this.collapsedGroups.has(group.name) ? 'collapsed' : ''}"
+            @click="${() => this.toggleGroup(group.name)}"
+          >
+            <span class="groupTitle">
+              ${group.iconName ? html`<dees-icon .icon="${group.iconName.startsWith('lucide:') ? group.iconName : `lucide:${group.iconName}`}"></dees-icon>` : ''}
+              ${group.name}
+            </span>
+            <dees-icon class="chevron" .icon="${'lucide:chevronDown'}"></dees-icon>
+          </div>
+          <div class="groupItems ${this.collapsedGroups.has(group.name) ? 'collapsed' : ''}">
+            ${group.items.map((item) => this.renderMenuItem(item, group))}
+          </div>
+        </div>
+      `)}
+    `;
+  }
+
+  private renderMenuItem(item: interfaces.ISecondaryMenuItem, group?: interfaces.ISecondaryMenuGroup): TemplateResult {
+    const isSelected = this.selectedItem?.key === item.key;
+    return html`
+      <div
+        class="menuItem ${isSelected ? 'selected' : ''}"
+        @click="${() => this.selectItem(item, group)}"
+        @contextmenu="${(e: MouseEvent) => this.handleContextMenu(e, item)}"
+      >
+        ${item.iconName ? html`<dees-icon .icon="${item.iconName.startsWith('lucide:') ? item.iconName : `lucide:${item.iconName}`}"></dees-icon>` : ''}
+        <span class="itemLabel">${item.key}</span>
+        ${item.badge !== undefined ? html`
+          <span class="badge ${item.badgeVariant || 'default'}">${item.badge}</span>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  private renderLegacyOptions(): TemplateResult {
+    return html`
+      <div class="legacyOptions">
+        ${this.selectionOptions.map((option) => {
+          if ('divider' in option && option.divider) {
+            return html`<div class="divider"></div>`;
+          }
+          const item = option as interfaces.ISelectionOption;
+          return this.renderMenuItem({
+            key: item.key,
+            iconName: item.iconName,
+            action: item.action,
+          });
+        })}
+      </div>
+    `;
+  }
+
+  private toggleGroup(groupName: string): void {
+    const newCollapsed = new Set(this.collapsedGroups);
+    if (newCollapsed.has(groupName)) {
+      newCollapsed.delete(groupName);
+    } else {
+      newCollapsed.add(groupName);
+    }
+    this.collapsedGroups = newCollapsed;
+  }
+
+  private selectItem(item: interfaces.ISecondaryMenuItem, group?: interfaces.ISecondaryMenuGroup): void {
+    this.selectedItem = item;
+    item.action();
+
+    this.dispatchEvent(new CustomEvent('item-select', {
+      detail: { item, group },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleContextMenu(event: MouseEvent, item: interfaces.ISecondaryMenuItem): void {
+    DeesContextmenu.openContextMenuWithOptions(event, [
+      {
+        name: 'View details',
+        action: async () => {},
+        iconName: 'lucide:eye',
+      },
+      {
+        name: 'Edit',
+        action: async () => {},
+        iconName: 'lucide:pencil',
+      },
+    ]);
+  }
+
+  async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    await super.firstUpdated(_changedProperties);
+
+    // Initialize collapsed state from group defaults
+    if (this.groups.length > 0) {
+      const initialCollapsed = new Set<string>();
+      this.groups.forEach(group => {
+        if (group.collapsed) {
+          initialCollapsed.add(group.name);
+        }
+      });
+      this.collapsedGroups = initialCollapsed;
+
+      // Auto-select first item if none selected
+      if (!this.selectedItem && this.groups[0]?.items.length > 0) {
+        this.selectItem(this.groups[0].items[0], this.groups[0]);
+      }
+    } else if (this.selectionOptions.length > 0) {
+      // Legacy mode: select first non-divider option
+      const firstOption = this.selectionOptions.find(opt => !('divider' in opt)) as interfaces.ISelectionOption;
+      if (firstOption && !this.selectedItem) {
+        this.selectItem({
+          key: firstOption.key,
+          iconName: firstOption.iconName,
+          action: firstOption.action,
+        });
+      }
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-appui-secondarymenu': DeesAppuiSecondarymenu;
+  }
+}

ts_web/elements/00group-appui/dees-appui-secondarymenu/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-secondarymenu.js';

ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts

@@ -1,4 +1,4 @@
-import * as interfaces from '../interfaces/index.js';
+import * as interfaces from '../../interfaces/index.js';
 
 import {
   DeesElement,

ts_web/elements/00group-appui/dees-appui-tabs/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-tabs.js';

ts_web/elements/00group-appui/dees-appui-view/dees-appui-view.ts

@@ -1,4 +1,4 @@
-import * as interfaces from '../interfaces/index.js';
+import * as interfaces from '../../interfaces/index.js';
 
 import {
   DeesElement,

ts_web/elements/00group-appui/dees-appui-view/index.ts

@@ -0,0 +1 @@
+export * from './dees-appui-view.js';

ts_web/elements/00group-appui/index.ts

@@ -0,0 +1,10 @@
+// App UI Components
+export * from './dees-appui-activitylog/index.js';
+export * from './dees-appui-appbar/index.js';
+export * from './dees-appui-base/index.js';
+export * from './dees-appui-maincontent/index.js';
+export * from './dees-appui-mainmenu/index.js';
+export * from './dees-appui-secondarymenu/index.js';
+export * from './dees-appui-profiledropdown/index.js';
+export * from './dees-appui-tabs/index.js';
+export * from './dees-appui-view/index.js';

ts_web/elements/00group-button/dees-button-exit/index.ts

@@ -0,0 +1 @@
+export * from './dees-button-exit.js';

ts_web/elements/00group-button/dees-button-group/index.ts

@@ -0,0 +1 @@
+export * from './dees-button-group.js';

ts_web/elements/00group-button/dees-button/dees-button.demo.ts

@@ -1,10 +1,10 @@
 import { html, css, cssManager, domtools } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../dees-panel/dees-panel.js';
+import '../../dees-panel/dees-panel.js';
-import '../dees-form/dees-form.js';
+import '../../00group-form/dees-form/dees-form.js';
-import '../dees-form-submit/dees-form-submit.js';
+import '../../00group-form/dees-form-submit/dees-form-submit.js';
-import '../dees-input-text/dees-input-text.js';
+import '../../00group-input/dees-input-text/dees-input-text.js';
-import '../dees-icon/dees-icon.js';
+import '../../dees-icon/dees-icon.js';
 import type { DeesButton } from '../dees-button/dees-button.js';
 
 export const demoFunc = () => html`

ts_web/elements/00group-button/dees-button/index.ts

@@ -0,0 +1 @@
+export * from './dees-button.js';

ts_web/elements/00group-button/index.ts

@@ -0,0 +1,4 @@
+// Button Components
+export * from './dees-button/index.js';
+export * from './dees-button-exit/index.js';
+export * from './dees-button-group/index.js';

ts_web/elements/00group-chart/dees-chart-area/index.ts

@@ -0,0 +1 @@
+export * from './component.js';

ts_web/elements/00group-chart/dees-chart-log/index.ts

@@ -0,0 +1 @@
+export * from './dees-chart-log.js';

ts_web/elements/00group-chart/index.ts

@@ -0,0 +1,3 @@
+// Chart Components
+export * from './dees-chart-area/index.js';
+export * from './dees-chart-log/index.js';

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

@@ -8,14 +8,14 @@ import {
   state,
   cssManager,
 } from '@design.estate/dees-element';
-import { cssGeistFontFamily, cssMonoFontFamily } from '../00fonts.js';
+import { cssGeistFontFamily, cssMonoFontFamily } from '../../00fonts.js';
 
 import hlight from 'highlight.js';
 
 import * as smartstring from '@push.rocks/smartstring';
 
 import * as domtools from '@design.estate/dees-domtools';
-import { DeesContextmenu } from '../dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -0,0 +1 @@
+export * from './dees-dataview-codebox.js';

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

@@ -1,5 +1,5 @@
-import * as colors from '../00colors.js';
+import * as colors from '../../00colors.js';
-import * as plugins from '../00plugins.js';
+import * as plugins from '../../00plugins.js';
 
 import { demoFunc } from './dees-dataview-statusobject.demo.js';
 import {
@@ -15,7 +15,7 @@ import {
 } from '@design.estate/dees-element';
 
 import * as tsclass from '@tsclass/tsclass';
-import { DeesContextmenu } from '../dees-contextmenu/dees-contextmenu.js';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -0,0 +1 @@
+export * from './dees-dataview-statusobject.js';

ts_web/elements/00group-dataview/index.ts

@@ -0,0 +1,3 @@
+// Data View Components
+export * from './dees-dataview-codebox/index.js';
+export * from './dees-dataview-statusobject/index.js';

ts_web/elements/00group-editor/dees-editor-markdown/index.ts

@@ -0,0 +1 @@
+export * from './dees-editor-markdown.js';

ts_web/elements/00group-editor/dees-editor-markdownoutlet/index.ts

@@ -0,0 +1 @@
+export * from './dees-editor-markdownoutlet.js';

ts_web/elements/00group-editor/dees-editor/index.ts

@@ -1,2 +1 @@
 export * from './dees-editor.js';
-export * from './version.js';

ts_web/elements/00group-editor/index.ts

@@ -0,0 +1,4 @@
+// Editor Components
+export * from './dees-editor/index.js';
+export * from './dees-editor-markdown/index.js';
+export * from './dees-editor-markdownoutlet/index.js';

ts_web/elements/00group-form/dees-form-submit/index.ts

@@ -0,0 +1 @@
+export * from './dees-form-submit.js';

ts_web/elements/00group-form/dees-form/dees-form.demo.ts

@@ -1,5 +1,5 @@
 import { html, css, domtools, cssManager } from '@design.estate/dees-element';
-import type { DeesForm } from '../dees-form/dees-form.js';
+import type { DeesForm } from './dees-form.js';
 import '@design.estate/dees-wcctools/demotools';
 
 export const demoFunc = () => html`

ts_web/elements/00group-form/dees-form/dees-form.ts

@@ -8,19 +8,19 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
-import { DeesInputCheckbox } from '../dees-input-checkbox/dees-input-checkbox.js';
+import { DeesInputCheckbox } from '../../00group-input/dees-input-checkbox/dees-input-checkbox.js';
-import { DeesInputDatepicker } from '../dees-input-datepicker/index.js';
+import { DeesInputDatepicker } from '../../00group-input/dees-input-datepicker/index.js';
-import { DeesInputText } from '../dees-input-text/dees-input-text.js';
+import { DeesInputText } from '../../00group-input/dees-input-text/dees-input-text.js';
-import { DeesInputQuantitySelector } from '../dees-input-quantityselector/dees-input-quantityselector.js';
+import { DeesInputQuantitySelector } from '../../00group-input/dees-input-quantityselector/dees-input-quantityselector.js';
-import { DeesInputRadiogroup } from '../dees-input-radiogroup/dees-input-radiogroup.js';
+import { DeesInputRadiogroup } from '../../00group-input/dees-input-radiogroup/dees-input-radiogroup.js';
-import { DeesInputDropdown } from '../dees-input-dropdown/dees-input-dropdown.js';
+import { DeesInputDropdown } from '../../00group-input/dees-input-dropdown/dees-input-dropdown.js';
-import { DeesInputFileupload } from '../dees-input-fileupload/index.js';
+import { DeesInputFileupload } from '../../00group-input/dees-input-fileupload/index.js';
-import { DeesInputIban } from '../dees-input-iban/dees-input-iban.js';
+import { DeesInputIban } from '../../00group-input/dees-input-iban/dees-input-iban.js';
-import { DeesInputMultitoggle } from '../dees-input-multitoggle/dees-input-multitoggle.js';
+import { DeesInputMultitoggle } from '../../00group-input/dees-input-multitoggle/dees-input-multitoggle.js';
-import { DeesInputPhone } from '../dees-input-phone/dees-input-phone.js';
+import { DeesInputPhone } from '../../00group-input/dees-input-phone/dees-input-phone.js';
-import { DeesInputTypelist } from '../dees-input-typelist/dees-input-typelist.js';
+import { DeesInputTypelist } from '../../00group-input/dees-input-typelist/dees-input-typelist.js';
 import { DeesFormSubmit } from '../dees-form-submit/dees-form-submit.js';
-import { DeesTable } from '../dees-table/index.js';
+import { DeesTable } from '../../dees-table/index.js';
 import { demoFunc } from './dees-form.demo.js';
 
 // Unified set for form input types

ts_web/elements/00group-form/dees-form/index.ts

@@ -0,0 +1 @@
+export * from './dees-form.js';

ts_web/elements/00group-form/index.ts

@@ -0,0 +1,3 @@
+// Form Components
+export * from './dees-form/index.js';
+export * from './dees-form-submit/index.js';

ts_web/elements/00group-input/dees-input-base/index.ts

@@ -0,0 +1 @@
+export * from './dees-input-base.js';

ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.demo.ts

@@ -1,8 +1,8 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../dees-panel/dees-panel.js';
+import '../../dees-panel/dees-panel.js';
 import type { DeesInputCheckbox } from '../dees-input-checkbox/dees-input-checkbox.js';
-import '../dees-button/dees-button.js';
+import '../../00group-button/dees-button/dees-button.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {

ts_web/elements/00group-input/dees-input-checkbox/dees-input-checkbox.ts

@@ -8,7 +8,7 @@ import {
 } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
 import { demoFunc } from './dees-input-checkbox.demo.js';
-import { cssGeistFontFamily } from '../00fonts.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
 
 declare global {
   interface HTMLElementTagNameMap {

ts_web/elements/00group-input/dees-input-checkbox/index.ts

@@ -0,0 +1 @@
+export * from './dees-input-checkbox.js';

ts_web/elements/00group-input/dees-input-datepicker/component.ts

@@ -9,8 +9,8 @@ import { demoFunc } from './demo.js';
 import { datepickerStyles } from './styles.js';
 import { renderDatepicker } from './template.js';
 import type { IDateEvent } from './types.js';
-import '../dees-icon/dees-icon.js';
+import '../../dees-icon/dees-icon.js';
-import '../dees-label/dees-label.js';
+import '../../dees-label/dees-label.js';
 
 
 declare global {

ts_web/elements/00group-input/dees-input-datepicker/demo.ts

@@ -1,6 +1,6 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../dees-panel/dees-panel.js';
+import '../../dees-panel/dees-panel.js';
 import './component.js';
 import type { DeesInputDatepicker } from './component.js';
 

ts_web/elements/00group-input/dees-input-datepicker/index.ts

@@ -0,0 +1 @@
+export * from './component.js';

ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.demo.ts

@@ -1,8 +1,8 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../dees-panel/dees-panel.js';
+import '../../dees-panel/dees-panel.js';
-import '../dees-form/dees-form.js';
+import '../../00group-form/dees-form/dees-form.js';
-import '../dees-form-submit/dees-form-submit.js';
+import '../../00group-form/dees-form-submit/dees-form-submit.js';
 
 export const demoFunc = () => html`
   <style>

ts_web/elements/00group-input/dees-input-dropdown/dees-input-dropdown.ts

@@ -10,7 +10,7 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-input-dropdown.demo.js';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
-import { cssGeistFontFamily } from '../00fonts.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
 
 declare global {
   interface HTMLElementTagNameMap {

ts_web/elements/00group-input/dees-input-dropdown/index.ts

@@ -0,0 +1 @@
+export * from './dees-input-dropdown.js';

ts_web/elements/00group-input/dees-input-fileupload/component.ts

@@ -1,8 +1,8 @@
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
 import { demoFunc } from './demo.js';
 import { fileuploadStyles } from './styles.js';
-import '../dees-icon/dees-icon.js';
+import '../../dees-icon/dees-icon.js';
-import '../dees-label/dees-label.js';
+import '../../dees-label/dees-label.js';
 
 import {
   customElement,

ts_web/elements/00group-input/dees-input-fileupload/demo.ts

@@ -1,6 +1,6 @@
 import { css, cssManager, html } from '@design.estate/dees-element';
 import './component.js';
-import '../dees-panel/dees-panel.js';
+import '../../dees-panel/dees-panel.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>

ts_web/elements/00group-input/dees-input-fileupload/index.ts

@@ -0,0 +1 @@
+export * from './component.js';

ts_web/elements/00group-input/dees-input-iban/index.ts

@@ -0,0 +1 @@
+export * from './dees-input-iban.js';

ts_web/elements/00group-input/dees-input-list/dees-input-list.demo.ts

@@ -1,9 +1,9 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import '../dees-panel/dees-panel.js';
+import '../../dees-panel/dees-panel.js';
-import '../dees-form/dees-form.js';
+import '../../00group-form/dees-form/dees-form.js';
 import '../dees-input-text/dees-input-text.js';
-import '../dees-form-submit/dees-form-submit.js';
+import '../../00group-form/dees-form-submit/dees-form-submit.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>

ts_web/elements/00group-input/dees-input-list/dees-input-list.ts

@@ -8,8 +8,8 @@ import {
   type TemplateResult,
 } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
-import '../dees-icon/dees-icon.js';
+import '../../dees-icon/dees-icon.js';
-import '../dees-button/dees-button.js';
+import '../../00group-button/dees-button/dees-button.js';
 import { demoFunc } from './dees-input-list.demo.js';
 
 declare global {

ts_web/elements/00group-input/dees-input-list/index.ts

@@ -0,0 +1 @@
+export * from './dees-input-list.js';

ts_web/elements/00group-input/dees-input-multitoggle/dees-input-multitoggle.ts

@@ -8,7 +8,7 @@ import {
 } from '@design.estate/dees-element';
 import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
 
-import * as colors from '../00colors.js'
+import * as colors from '../../00colors.js'
 
 import { demoFunc } from './dees-input-multitoggle.demo.js';
 

ts_web/elements/00group-input/dees-input-multitoggle/index.ts

@@ -0,0 +1 @@
+export * from './dees-input-multitoggle.js';

ts_web/elements/00group-input/dees-input-phone/index.ts

@@ -0,0 +1 @@
+export * from './dees-input-phone.js';

ts_web/elements/00group-input/dees-input-quantityselector/dees-input-quantityselector.demo.ts

@@ -1,5 +1,5 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
-import '../dees-shopping-productcard/dees-shopping-productcard.js';
+import '../../dees-shopping-productcard/dees-shopping-productcard.js';
 
 export const demoFunc = () => html`
   <dees-demowrapper>

ts_web/elements/00group-input/dees-input-quantityselector/index.ts

@@ -0,0 +1 @@
+export * from './dees-input-quantityselector.js';