v3.3.0

feat(dees-appui-base): Add unified App UI API to dees-appui-base with ViewRegistry, AppRouter and StateManager
v3.2.0
2025-12-09 08:26:24 +00:00 · 2025-12-09 08:26:24 +00:00 · 2025-12-08 20:23:03 +00:00 · 2025-12-08 20:23:03 +00:00 · 2025-12-08 16:17:52 +00:00 · 2025-12-08 16:17:52 +00:00
29 changed files with 2748 additions and 465 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,71 @@
 # Changelog

+## 2025-12-09 - 3.3.0 - feat(dees-appui-base)
+Add unified App UI API to dees-appui-base with ViewRegistry, AppRouter and StateManager
+
+- Introduce ViewRegistry for declarative view registration and rendering (supports tag names, element classes and template functions).
+- Add AppRouter with hash/history/external/none modes, URL synchronization, navigate/back/forward and onRouteChange listener support.
+- Add StateManager to persist UI state (localStorage, sessionStorage or in-memory) with save/load/update/clear APIs.
+- Extend interfaces (interfaces/appconfig.ts) with IAppConfig, IViewDefinition, IRoutingConfig, IStatePersistenceConfig and IAppUIState.
+- Expose new public DeesAppuiBase methods: configure, navigateToView, getCurrentView, getUIState, restoreUIState, saveState, loadState, getViewRegistry, getRouter.
+- Maintain backward compatibility with existing property-based API and slot usage.
+- Export new modules (view.registry, app.router, state.manager) from dees-appui-base index and update element exports.
+
+## 2025-12-08 - 3.2.0 - feat(dees-simple-appdash,dees-simple-login,dees-terminal)
+Revamp UI: dashboard & login styling, standardize icons to Lucide, and add terminal background/config
+
+- Standardize icon usage to Lucide prefixes in dees-simple-appdash; add fallback handling for legacy icon names
+- Revamped dees-simple-appdash sidebar: updated spacing, typography, header icon wrapper, scrollbar styling, section labels, hover/selected states, and visual indicators
+- Change 'Logout' label to 'Sign out' in dees-simple-appdash and add explicit status classes for controlbar (connected, terminal)
+- Improve terminal UX: smoother launch/close animations, updated shadow and sizing logic in dees-simple-appdash
+- Add background property to dees-terminal, sync it to a CSS variable and apply it to xterm theme for configurable terminal background
+- Redesign dees-simple-login: new header/subheader, card layout, spacing, and updated submit text to 'Sign in'
+- Bump devDependency @git.zone/tswatch to ^2.3.5
+
+## 2025-12-08 - 3.1.2 - fix(DeesAppuiMainmenu, DeesAppuiSecondarymenu)
+Add position: relative to main and secondary app UI menus to fix positioning of overlays and tooltips
+
+- ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts: add `position: relative` to host styles
+- ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts: add `position: relative` to host styles
+- Fixes incorrect positioning for absolutely positioned children (tooltips, overlays, badges) inside the main and secondary menus
+
+## 2025-12-08 - 3.1.1 - fix(dees-appui)
+Extract demos for main and secondary app menus, adjust collapsed styles and toggle placement, bump devDependency
+
+- Extracted inline demo markup into separate demo files: ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.demo.ts and ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts and wired them up via imported demoFunc to reduce component size.
+- Moved collapse toggle button markup in both dees-appui-mainmenu and dees-appui-secondarymenu templates to after the main container to improve layout/stacking and focus behavior.
+- Adjusted collapsed logo/heading styles: removed extra padding/gap and hide logo text using display:none for a cleaner collapsed state.
+- Bumped devDependency @git.zone/tswatch from ^2.3.1 to ^2.3.2 in package.json.
+
+## 2025-12-08 - 3.1.0 - feat(dees-appui)
+Add collapsible/compact mode to AppUI sidebars (mainmenu & secondarymenu) with toggles, tooltips and improved z-index stacking
+
+- Add collapsed property to dees-appui-mainmenu and dees-appui-secondarymenu (reflect: true) to enable compact horizontal mode.
+- Add floating collapse toggle buttons and public toggleCollapse() methods on mainmenu and secondarymenu; these dispatch 'collapse-change' events (bubbles & composed).
+- Expose and track collapse state in dees-appui-base via mainmenuCollapsed and secondarymenuCollapsed properties; bind states to child components and re-emit collapse-change events as mainmenu-collapse-change and secondarymenu-collapse-change.
+- Implement collapsed styles and animations: reduced sidebar widths, hide/compact labels and headers, center icons, hide badges, and add smooth width/opacity transitions.
+- Add tooltips that appear for tabs/items when sidebars are collapsed to preserve discoverability.
+- Adjust layout grid in DeesAppuiBase (use auto columns) and add explicit z-index layering to ensure proper stacking order of mainmenu, secondarymenu, maincontent and activitylog.
+
+## 2025-12-08 - 3.0.1 - fix(dees-appui)
+Normalize header heights and box-sizing for App UI components
+
+- Set topbar/header heights to 48px (was 40px) and adjusted dependent offsets (activity container top, topShadow position) in dees-appui-activitylog.
+- Make logo and secondary menu headers fixed 48px tall and replace vertical padding with horizontal padding for consistent vertical alignment (dees-appui-mainmenu, dees-appui-secondarymenu).
+- Ensure tabs wrapper uses explicit 48px height and tabsContainer fills height (height:100%) to keep tab items vertically centered (dees-appui-tabs).
+- Add box-sizing: border-box to affected header/logo containers to prevent overflow and ensure correct sizing.
+- Minor CSS alignment and overflow fixes to improve consistent layout and scrolling behavior across the app UI components.
+
+## 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

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@design.estate/dees-catalog",
-  "version": "2.0.7",
+  "version": "3.3.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",
@@ -48,7 +48,7 @@
    "@git.zone/tsbuild": "^3.1.2",
    "@git.zone/tsbundle": "^2.6.3",
    "@git.zone/tstest": "^3.1.3",
-    "@git.zone/tswatch": "^2.2.3",
+    "@git.zone/tswatch": "^2.3.5",
    "@push.rocks/projectinfo": "^5.0.2",
    "@push.rocks/tapbundle": "^6.0.3",
    "@types/node": "^24.10.1"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,10 +98,10 @@ importers:
        version: 2.6.3
      '@git.zone/tstest':
        specifier: ^3.1.3
-        version: 3.1.3(socks@2.8.7)(typescript@5.9.3)
+        version: 3.1.3(@push.rocks/smartserve@1.4.0)(socks@2.8.7)(typescript@5.9.3)
      '@git.zone/tswatch':
-        specifier: ^2.2.3
-        version: 2.2.3
+        specifier: ^2.3.5
+        version: 2.3.5(@tiptap/pm@2.27.1)
      '@push.rocks/projectinfo':
        specifier: ^5.0.2
        version: 5.0.2
@@ -126,6 +126,9 @@ packages:
  '@api.global/typedserver@3.0.80':
    resolution: {integrity: sha512-dcp0oXsjBL+XdFg1wUUP08uJQid5bQ0Yv3V3Y3lnI2QCbat0FU+Tsb0TZRnZ4+P150Vj/ITBqJUgDzFsF34grA==}

+  '@api.global/typedserver@7.11.1':
+    resolution: {integrity: sha512-1vQUJ2/DszDFHVkCmqqBy/qNiIP/jltFN3KxHtoNLxjbdBZYfw1Zd1Odjs6YSPalAD0p8wQ/alJblJEAewNQVg==}
+
  '@api.global/typedsocket@3.1.1':
    resolution: {integrity: sha512-Wkz3NlhmfdZMKqXXI2c2dMtGGmSmhdOegZiziL+9b2mqPYdc7Gd8AZRdEOKvbSoIvc9G22/5BEadIWHrfq66TA==}
    peerDependencies:
@@ -134,6 +137,11 @@ packages:
      '@push.rocks/smartserve':
        optional: true

+  '@api.global/typedsocket@4.1.0':
+    resolution: {integrity: sha512-ttmoU5BNHmLAkAF/o+Ta8F5O4F7CUmkFo6LK7NKHQvuYJvodPMYWdhJ6yCINTF4pfCgljkMDUqoVKobm6ea4mQ==}
+    peerDependencies:
+      '@push.rocks/smartserve': '>=1.1.0'
+
  '@aws-crypto/crc32@5.2.0':
    resolution: {integrity: sha512-nLbCWqQNgUiwwtFsen1AdzAtvuLRsQS8rYgMuxCrdKf9kOssamGLuPwyTY9wyYblNr9+1XM8v6zoDTPPSIeANg==}
    engines: {node: '>=16.0.0'}
@@ -308,6 +316,9 @@ packages:
  '@borewit/text-codec@0.1.1':
    resolution: {integrity: sha512-5L/uBxmjaCIX5h8Z+uu+kA9BQLkc/Wl06UGR5ajNRxu+/XjonB5i8JpgFMrPj3LXTCPA0pv8yxUvbUi+QthGGA==}

+  '@cfworker/json-schema@4.1.1':
+    resolution: {integrity: sha512-gAmrUZSGtKc3AiBL71iNWxDsyUC5uMaKKGdvzYsBoTW/xi42JQHl7eKV2OYzCUqvc+D2RCcf7EXY2iCyFIk6og==}
+
  '@cloudflare/workers-types@4.20251205.0':
    resolution: {integrity: sha512-7pup7fYkuQW5XD8RUS/vkxF9SXlrGyCXuZ4ro3uVQvca/GTeSa+8bZ8T4wbq1Aea5lmLIGSlKbhl2msME7bRBA==}

@@ -321,6 +332,9 @@ packages:
  '@dabh/diagnostics@2.0.8':
    resolution: {integrity: sha512-R4MSXTVnuMzGD7bzHdW2ZhhdPC/igELENcq5IjEverBvq5hn1SXCWcsi6eSsdWP0/Ur+SItRRjAktmdoX/8R/Q==}

+  '@design.estate/dees-catalog@3.1.2':
+    resolution: {integrity: sha512-T4ZhoZzl6NAWGhrz00MDFla5syeMz53euZ+QcBftRMmHuqPHDU/JlBi+K2SmILtnRfWH/lGYWBKugYop6q0chg==}
+
  '@design.estate/dees-comms@1.0.30':
    resolution: {integrity: sha512-KchMlklJfKAjQiJiR0xmofXtQ27VgZtBIxcMwPE9d+h3jJRv+lPZxzBQVOM0eyM0uS44S5vJMZ11IeV4uDXSHg==}

@@ -541,8 +555,8 @@ packages:
    resolution: {integrity: sha512-t+/cKV21JHK8X7NGAmihs5M/eMm+V+jn4R5rzfwGG97WJFAcP5qE1Os9VYtyZw3tx/NZXA2yA4abo/ELluTuRA==}
    hasBin: true

-  '@git.zone/tswatch@2.2.3':
-    resolution: {integrity: sha512-BKyVYXWOjVL+eUcnwjfTKFhUsEBHpgpSv5rbuZYOhmVp9BcglWaEswuAstGEISkCioizUcHiZkpJVPXO99sLHQ==}
+  '@git.zone/tswatch@2.3.5':
+    resolution: {integrity: sha512-wYekG7Q/wg5uptXHPHhVi7dHq19QnLoevQpcpAzF6hMiNbOozN3+4zxOktyJBl6EHUYcFvHXA4fZ4bkJpo5TcA==}
    hasBin: true

  '@hapi/bourne@3.0.0':
@@ -970,6 +984,9 @@ packages:
  '@push.rocks/smarts3@3.0.3':
    resolution: {integrity: sha512-Y9nXMwurthJ9Z7yi0RwjhPFUC58aY8Mhia8kFo6Xj1tBM4LE8Oxg/ydejF7otHqQGr3QyqV5C4YrDEG17rUuzg==}

+  '@push.rocks/smartserve@1.4.0':
+    resolution: {integrity: sha512-cEoXZQSBX3pOv9AyhxRPkrMAWzs2XQhTBmW95BFtTSNzZdji0XgqUu92p7iuF+NVuTFX1QZ8+dbCClLCoRRW7g==}
+
  '@push.rocks/smartshell@3.3.0':
    resolution: {integrity: sha512-m0w618H6YBs+vXGz1CgS4nPi5CUAnqRtckcS9/koGwfcIx1IpjqmiP47BoCTbdgcv0IPUxQVBG1IXTHPuZ8Z5g==}

@@ -1006,8 +1023,8 @@ packages:
  '@push.rocks/smartversion@3.0.5':
    resolution: {integrity: sha512-8MZSo1yqyaKxKq0Q5N188l4un++9GFWVbhCAX5mXJwewZHn97ujffTeL+eOQYpWFTEpUhaq1QhL4NhqObBCt1Q==}

-  '@push.rocks/smartwatch@5.0.0':
-    resolution: {integrity: sha512-uuWUlTo0l5LWOWoOuTMG7zzxpUNKBcyqoB+zyQ24NHTtSYNcaUJtaQzTO2gxMXr5sqiZDkohlThS0KvsBc3g7w==}
+  '@push.rocks/smartwatch@6.1.1':
+    resolution: {integrity: sha512-wmhLKu9bdpvRcjOfitJOi4jsNKD7S2hVlVq6fAv3IhB2ZbRlSB+Hai4DwOlrdUZaWrg+dFIZU+/ifTOozOPiMg==}
    engines: {node: '>=20.0.0'}

  '@push.rocks/smartxml@2.0.0':
@@ -4642,11 +4659,11 @@ snapshots:
      '@push.rocks/webrequest': 3.0.37
      '@push.rocks/webstream': 1.0.10

-  '@api.global/typedserver@3.0.80':
+  '@api.global/typedserver@3.0.80(@push.rocks/smartserve@1.4.0)':
    dependencies:
      '@api.global/typedrequest': 3.2.5
      '@api.global/typedrequest-interfaces': 3.0.19
-      '@api.global/typedsocket': 3.1.1
+      '@api.global/typedsocket': 3.1.1(@push.rocks/smartserve@1.4.0)
      '@cloudflare/workers-types': 4.20251205.0
      '@design.estate/dees-comms': 1.0.30
      '@push.rocks/lik': 6.2.2
@@ -4690,7 +4707,53 @@ snapshots:
      - utf-8-validate
      - vue

-  '@api.global/typedsocket@3.1.1':
+  '@api.global/typedserver@7.11.1(@tiptap/pm@2.27.1)':
+    dependencies:
+      '@api.global/typedrequest': 3.2.5
+      '@api.global/typedrequest-interfaces': 3.0.19
+      '@api.global/typedsocket': 4.1.0(@push.rocks/smartserve@1.4.0)
+      '@cloudflare/workers-types': 4.20251205.0
+      '@design.estate/dees-catalog': 3.1.2(@tiptap/pm@2.27.1)
+      '@design.estate/dees-comms': 1.0.30
+      '@push.rocks/lik': 6.2.2
+      '@push.rocks/smartdelay': 3.0.5
+      '@push.rocks/smartenv': 6.0.0
+      '@push.rocks/smartfeed': 1.4.0
+      '@push.rocks/smartfile': 13.1.0
+      '@push.rocks/smartfs': 1.2.0
+      '@push.rocks/smartjson': 5.2.0
+      '@push.rocks/smartlog': 3.1.10
+      '@push.rocks/smartlog-destination-devtools': 1.0.12
+      '@push.rocks/smartlog-interfaces': 3.0.2
+      '@push.rocks/smartmanifest': 2.0.2
+      '@push.rocks/smartmatch': 2.0.0
+      '@push.rocks/smartmime': 2.0.4
+      '@push.rocks/smartntml': 2.0.8
+      '@push.rocks/smartopen': 2.0.0
+      '@push.rocks/smartpath': 6.0.0
+      '@push.rocks/smartpromise': 4.2.3
+      '@push.rocks/smartrequest': 5.0.1
+      '@push.rocks/smartrx': 3.0.10
+      '@push.rocks/smartserve': 1.4.0
+      '@push.rocks/smartsitemap': 2.0.4
+      '@push.rocks/smartstream': 3.2.5
+      '@push.rocks/smarttime': 4.1.1
+      '@push.rocks/smartwatch': 6.1.1
+      '@push.rocks/taskbuffer': 3.5.0
+      '@push.rocks/webrequest': 4.0.1
+      '@push.rocks/webstore': 2.0.20
+      '@tsclass/tsclass': 9.3.0
+      lit: 3.3.1
+    transitivePeerDependencies:
+      - '@nuxt/kit'
+      - '@tiptap/pm'
+      - bufferutil
+      - react
+      - supports-color
+      - utf-8-validate
+      - vue
+
+  '@api.global/typedsocket@3.1.1(@push.rocks/smartserve@1.4.0)':
    dependencies:
      '@api.global/typedrequest': 3.2.5
      '@api.global/typedrequest-interfaces': 3.0.19
@@ -4700,6 +4763,8 @@ snapshots:
      '@push.rocks/smartsocket': 2.1.0
      '@push.rocks/smartstring': 4.1.0
      '@push.rocks/smarturl': 3.1.0
+    optionalDependencies:
+      '@push.rocks/smartserve': 1.4.0
    transitivePeerDependencies:
      - '@nuxt/kit'
      - bufferutil
@@ -4708,6 +4773,19 @@ snapshots:
      - utf-8-validate
      - vue

+  '@api.global/typedsocket@4.1.0(@push.rocks/smartserve@1.4.0)':
+    dependencies:
+      '@api.global/typedrequest': 3.2.5
+      '@api.global/typedrequest-interfaces': 3.0.19
+      '@push.rocks/isohash': 2.0.1
+      '@push.rocks/smartdelay': 3.0.5
+      '@push.rocks/smartjson': 5.2.0
+      '@push.rocks/smartpromise': 4.2.3
+      '@push.rocks/smartrx': 3.0.10
+      '@push.rocks/smartserve': 1.4.0
+      '@push.rocks/smartstring': 4.1.0
+      '@push.rocks/smarturl': 3.1.0
+
  '@aws-crypto/crc32@5.2.0':
    dependencies:
      '@aws-crypto/util': 5.2.0
@@ -5199,6 +5277,8 @@ snapshots:

  '@borewit/text-codec@0.1.1': {}

+  '@cfworker/json-schema@4.1.1': {}
+
  '@cloudflare/workers-types@4.20251205.0': {}

  '@colors/colors@1.6.0': {}
@@ -5213,6 +5293,42 @@ snapshots:
      enabled: 2.0.0
      kuler: 2.0.0

+  '@design.estate/dees-catalog@3.1.2(@tiptap/pm@2.27.1)':
+    dependencies:
+      '@design.estate/dees-domtools': 2.3.6
+      '@design.estate/dees-element': 2.1.3
+      '@design.estate/dees-wcctools': 1.2.1
+      '@fortawesome/fontawesome-svg-core': 7.1.0
+      '@fortawesome/free-brands-svg-icons': 7.1.0
+      '@fortawesome/free-regular-svg-icons': 7.1.0
+      '@fortawesome/free-solid-svg-icons': 7.1.0
+      '@push.rocks/smarti18n': 1.0.4
+      '@push.rocks/smartpromise': 4.2.3
+      '@push.rocks/smartstring': 4.1.0
+      '@tiptap/core': 2.27.1(@tiptap/pm@2.27.1)
+      '@tiptap/extension-link': 2.27.1(@tiptap/core@2.27.1(@tiptap/pm@2.27.1))(@tiptap/pm@2.27.1)
+      '@tiptap/extension-text-align': 2.27.1(@tiptap/core@2.27.1(@tiptap/pm@2.27.1))
+      '@tiptap/extension-typography': 2.27.1(@tiptap/core@2.27.1(@tiptap/pm@2.27.1))
+      '@tiptap/extension-underline': 2.27.1(@tiptap/core@2.27.1(@tiptap/pm@2.27.1))
+      '@tiptap/starter-kit': 2.27.1
+      '@tsclass/tsclass': 9.3.0
+      '@webcontainer/api': 1.2.0
+      apexcharts: 5.3.6
+      highlight.js: 11.11.1
+      ibantools: 4.5.1
+      lit: 3.3.1
+      lucide: 0.555.0
+      monaco-editor: 0.52.2
+      pdfjs-dist: 4.10.38
+      xterm: 5.3.0
+      xterm-addon-fit: 0.8.0(xterm@5.3.0)
+    transitivePeerDependencies:
+      - '@nuxt/kit'
+      - '@tiptap/pm'
+      - react
+      - supports-color
+      - vue
+
  '@design.estate/dees-comms@1.0.30':
    dependencies:
      '@api.global/typedrequest': 3.2.5
@@ -5453,9 +5569,9 @@ snapshots:
      '@push.rocks/smartshell': 3.3.0
      tsx: 4.21.0

-  '@git.zone/tstest@3.1.3(socks@2.8.7)(typescript@5.9.3)':
+  '@git.zone/tstest@3.1.3(@push.rocks/smartserve@1.4.0)(socks@2.8.7)(typescript@5.9.3)':
    dependencies:
-      '@api.global/typedserver': 3.0.80
+      '@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.4.0)
      '@git.zone/tsbundle': 2.6.3
      '@git.zone/tsrun': 2.0.0
      '@push.rocks/consolecolor': 2.0.3
@@ -5502,9 +5618,9 @@ snapshots:
      - utf-8-validate
      - vue

-  '@git.zone/tswatch@2.2.3':
+  '@git.zone/tswatch@2.3.5(@tiptap/pm@2.27.1)':
    dependencies:
-      '@api.global/typedserver': 3.0.80
+      '@api.global/typedserver': 7.11.1(@tiptap/pm@2.27.1)
      '@git.zone/tsbundle': 2.6.3
      '@git.zone/tsrun': 2.0.0
      '@push.rocks/early': 4.0.4
@@ -5515,13 +5631,16 @@ snapshots:
      '@push.rocks/smartlog': 3.1.10
      '@push.rocks/smartlog-destination-local': 9.0.2
      '@push.rocks/smartshell': 3.3.0
-      '@push.rocks/smartwatch': 5.0.0
+      '@push.rocks/smartwatch': 6.1.1
      '@push.rocks/taskbuffer': 3.5.0
    transitivePeerDependencies:
      - '@nuxt/kit'
      - '@swc/helpers'
+      - '@tiptap/pm'
+      - bufferutil
      - react
      - supports-color
+      - utf-8-validate
      - vue

  '@hapi/bourne@3.0.0': {}
@@ -6441,6 +6560,19 @@ snapshots:
    transitivePeerDependencies:
      - aws-crt

+  '@push.rocks/smartserve@1.4.0':
+    dependencies:
+      '@api.global/typedrequest': 3.2.5
+      '@cfworker/json-schema': 4.1.1
+      '@push.rocks/lik': 6.2.2
+      '@push.rocks/smartenv': 6.0.0
+      '@push.rocks/smartlog': 3.1.10
+      '@push.rocks/smartpath': 6.0.0
+      ws: 8.18.3
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
  '@push.rocks/smartshell@3.3.0':
    dependencies:
      '@push.rocks/smartdelay': 3.0.5
@@ -6462,7 +6594,7 @@ snapshots:
  '@push.rocks/smartsocket@2.1.0':
    dependencies:
      '@api.global/typedrequest-interfaces': 3.0.19
-      '@api.global/typedserver': 3.0.80
+      '@api.global/typedserver': 3.0.80(@push.rocks/smartserve@1.4.0)
      '@push.rocks/isohash': 2.0.1
      '@push.rocks/isounique': 1.0.5
      '@push.rocks/lik': 6.2.2
@@ -6546,7 +6678,7 @@ snapshots:
      '@types/semver': 7.7.1
      semver: 7.7.3

-  '@push.rocks/smartwatch@5.0.0':
+  '@push.rocks/smartwatch@6.1.1':
    dependencies:
      '@push.rocks/lik': 6.2.2
      '@push.rocks/smartenv': 6.0.0
--- a/readme.hints.md
+++ b/readme.hints.md
@@ -680,4 +680,124 @@ According to Lit's documentation (https://lit.dev/docs/components/decorators/#de
 - All unit tests passing
 - Manual testing of key components verified
 - No regressions detected
- Focus management and interactions working correctly
+- Focus management and interactions working correctly
+
+## Enhanced AppUI API (2025-12-08)
+
+The `dees-appui-base` component has been enhanced with a unified configuration API for building real-world applications.
+
+### New Modules:
+
+1. **ViewRegistry** (`view.registry.ts`)
+   - Manages view definitions and their lifecycle
+   - Supports tag names, element classes, and template functions as view content
+   - Methods: register, get, renderView, findByRoute
+
+2. **AppRouter** (`app.router.ts`)
+   - Built-in routing with hash or history mode
+   - External router support for framework integration
+   - Methods: navigate, back, forward, onRouteChange
+
+3. **StateManager** (`state.manager.ts`)
+   - Persists UI state (collapsed menus, selections, current view)
+   - Supports localStorage, sessionStorage, or memory storage
+   - Methods: save, load, update, clear
+
+### New Interfaces (in `interfaces/appconfig.ts`):
+
+```typescript
+interface IAppConfig {
+  branding?: { logoIcon?: string; logoText?: string };
+  appBar?: IAppBarConfig;
+  views: IViewDefinition[];
+  mainMenu?: IMainMenuConfig;
+  routing?: IRoutingConfig;
+  statePersistence?: IStatePersistenceConfig;
+  onViewChange?: (viewId: string, view: IViewDefinition) => void;
+}
+
+interface IViewDefinition {
+  id: string;
+  name: string;
+  iconName?: string;
+  content: string | (new () => HTMLElement) | (() => TemplateResult);
+  secondaryMenu?: ISecondaryMenuGroup[];
+  contentTabs?: ITab[];
+  route?: string;
+}
+
+interface IRoutingConfig {
+  mode: 'hash' | 'history' | 'external' | 'none';
+  basePath?: string;
+  defaultView?: string;
+  syncUrl?: boolean;
+}
+```
+
+### New Public Methods on DeesAppuiBase:
+
+```typescript
+// Configure with unified config
+configure(config: IAppConfig): void
+
+// Navigation
+navigateToView(viewId: string): boolean
+getCurrentView(): IViewDefinition | undefined
+
+// State management
+getUIState(): IAppUIState
+restoreUIState(state: IAppUIState): void
+saveState(): void
+loadState(): boolean
+
+// Access internals
+getViewRegistry(): ViewRegistry
+getRouter(): AppRouter | null
+```
+
+### Usage Example (New Unified Config API):
+
+```typescript
+import type { IAppConfig } from '@design.estate/dees-catalog';
+
+const config: IAppConfig = {
+  branding: { logoIcon: 'lucide:box', logoText: 'My App' },
+  views: [
+    { id: 'dashboard', name: 'Dashboard', iconName: 'lucide:home', content: 'my-dashboard' },
+    { id: 'settings', name: 'Settings', iconName: 'lucide:settings', content: 'my-settings' },
+  ],
+  mainMenu: {
+    sections: [{ views: ['dashboard'] }],
+    bottomItems: ['settings'],
+  },
+  routing: { mode: 'hash', defaultView: 'dashboard' },
+  statePersistence: { enabled: true, storage: 'localStorage' },
+};
+
+html`<dees-appui-base .config=${config}></dees-appui-base>`;
+```
+
+### Backward Compatibility:
+
+The existing property-based API still works:
+
+```typescript
+html`
+  <dees-appui-base
+    .mainmenuGroups=${groups}
+    .secondarymenuGroups=${secondaryGroups}
+    @mainmenu-tab-select=${handler}
+  >
+    <div slot="maincontent">...</div>
+  </dees-appui-base>
+`;
+```
+
+### Key Features:
+
+- **Declarative View Registry**: Map menu items to view components
+- **Built-in Routing**: Hash or history mode with URL synchronization
+- **External Router Support**: Integrate with Angular Router or other frameworks
+- **State Persistence**: Save/restore collapsed menus, selections, and current view
+- **View-specific Menus**: Each view can define its own secondary menu and tabs
+- **Full Backward Compatibility**: Existing code continues to work
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-catalog',
-  version: '2.0.7',
+  version: '3.3.0',
  description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
--- a/ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts
+++ b/ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts
@@ -63,13 +63,14 @@ export class DeesAppuiActivitylog extends DeesElement {
      .topbar {
        position: absolute;
        top: 0px;
-        height: 40px;
+        height: 48px;
        width: 100%;
        padding: 0px 16px;
        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
        display: flex;
        align-items: center;
+        box-sizing: border-box;
      }

      .topbar .heading {
@@ -81,7 +82,7 @@ export class DeesAppuiActivitylog extends DeesElement {

      .activityContainer {
        position: absolute;
-        top: 40px;
+        top: 48px;
        bottom: 48px;
        width: 100%;
        padding: 12px 0px;
@@ -315,7 +316,7 @@ export class DeesAppuiActivitylog extends DeesElement {
        position: absolute;
        width: 100%;
        height: 24px;
-        top: 40px;
+        top: 48px;
        background: ${cssManager.bdTheme(
          'linear-gradient(0deg, transparent 0%, #fafafa 100%)',
          'linear-gradient(0deg, transparent 0%, #0a0a0a 100%)'
--- a/ts_web/elements/00group-appui/dees-appui-base/app.router.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/app.router.ts
@@ -0,0 +1,271 @@
+import type { IRoutingConfig, IViewDefinition } from '../../interfaces/appconfig.js';
+import type { ViewRegistry } from './view.registry.js';
+
+export type TRouteChangeCallback = (viewId: string, params?: Record<string, string>) => void;
+
+/**
+ * Router for managing view navigation and URL synchronization
+ */
+export class AppRouter {
+  private config: Required<Omit<IRoutingConfig, 'notFound'>> & Pick<IRoutingConfig, 'notFound'>;
+  private viewRegistry: ViewRegistry;
+  private listeners: Set<TRouteChangeCallback> = new Set();
+  private currentViewId: string | null = null;
+  private isInitialized: boolean = false;
+
+  constructor(config: IRoutingConfig, viewRegistry: ViewRegistry) {
+    this.config = {
+      mode: config.mode,
+      basePath: config.basePath || '',
+      defaultView: config.defaultView || '',
+      syncUrl: config.syncUrl ?? true,
+      notFound: config.notFound,
+    };
+    this.viewRegistry = viewRegistry;
+  }
+
+  /**
+   * Initialize the router
+   */
+  public init(): void {
+    if (this.isInitialized) return;
+
+    if (this.config.mode === 'hash') {
+      window.addEventListener('hashchange', this.handleHashChange);
+      // Check initial hash
+      const initialView = this.getViewFromHash();
+      if (initialView) {
+        this.navigate(initialView, { source: 'initial' });
+      } else if (this.config.defaultView) {
+        this.navigate(this.config.defaultView, { source: 'initial' });
+      }
+    } else if (this.config.mode === 'history') {
+      window.addEventListener('popstate', this.handlePopState);
+      // Check initial path
+      const initialView = this.getViewFromPath();
+      if (initialView) {
+        this.navigate(initialView, { source: 'initial' });
+      } else if (this.config.defaultView) {
+        this.navigate(this.config.defaultView, { source: 'initial' });
+      }
+    } else if (this.config.mode === 'none' && this.config.defaultView) {
+      this.navigate(this.config.defaultView, { source: 'initial' });
+    }
+    // For 'external' mode, we don't set up listeners - the external router handles it
+
+    this.isInitialized = true;
+  }
+
+  /**
+   * Navigate to a view by ID
+   */
+  public navigate(
+    viewId: string,
+    options: {
+      source?: 'navigation' | 'popstate' | 'initial' | 'programmatic';
+      replace?: boolean;
+      params?: Record<string, string>;
+    } = {}
+  ): boolean {
+    const { source = 'programmatic', replace = false, params } = options;
+
+    const view = this.viewRegistry.get(viewId);
+    if (!view) {
+      console.warn(`Cannot navigate to unknown view: ${viewId}`);
+      if (this.config.notFound) {
+        if (typeof this.config.notFound === 'function') {
+          this.config.notFound();
+        } else {
+          return this.navigate(this.config.notFound, { source, replace: true });
+        }
+      }
+      return false;
+    }
+
+    const previousViewId = this.currentViewId;
+    this.currentViewId = viewId;
+
+    // Update URL if configured
+    if (this.config.syncUrl && this.config.mode !== 'none' && this.config.mode !== 'external') {
+      this.updateUrl(view, replace);
+    }
+
+    // Notify listeners
+    this.notifyListeners(viewId, params);
+
+    return true;
+  }
+
+  /**
+   * Navigate back in history
+   */
+  public back(): void {
+    if (this.config.mode === 'hash' || this.config.mode === 'history') {
+      window.history.back();
+    }
+  }
+
+  /**
+   * Navigate forward in history
+   */
+  public forward(): void {
+    if (this.config.mode === 'hash' || this.config.mode === 'history') {
+      window.history.forward();
+    }
+  }
+
+  /**
+   * Get current view ID
+   */
+  public getCurrentViewId(): string | null {
+    return this.currentViewId;
+  }
+
+  /**
+   * Add a route change listener
+   */
+  public onRouteChange(callback: TRouteChangeCallback): () => void {
+    this.listeners.add(callback);
+    return () => this.listeners.delete(callback);
+  }
+
+  /**
+   * Handle external navigation (for external router mode)
+   */
+  public handleExternalNavigation(viewId: string, params?: Record<string, string>): void {
+    if (this.config.mode !== 'external') {
+      console.warn('handleExternalNavigation should only be used in external mode');
+    }
+
+    const previousViewId = this.currentViewId;
+    this.currentViewId = viewId;
+    this.notifyListeners(viewId, params);
+  }
+
+  /**
+   * Sync state with URL (for external router integration)
+   */
+  public syncWithUrl(): string | null {
+    if (this.config.mode === 'hash') {
+      return this.getViewFromHash();
+    } else if (this.config.mode === 'history') {
+      return this.getViewFromPath();
+    }
+    return null;
+  }
+
+  /**
+   * Get the current route from the URL
+   */
+  public getCurrentRoute(): string {
+    if (this.config.mode === 'hash') {
+      return window.location.hash.slice(1) || '';
+    } else if (this.config.mode === 'history') {
+      let path = window.location.pathname;
+      if (this.config.basePath && path.startsWith(this.config.basePath)) {
+        path = path.slice(this.config.basePath.length);
+      }
+      return path.replace(/^\//, '');
+    }
+    return '';
+  }
+
+  /**
+   * Build a URL for a view
+   */
+  public buildUrl(viewId: string): string {
+    const view = this.viewRegistry.get(viewId);
+    const route = view?.route || viewId;
+
+    if (this.config.mode === 'hash') {
+      return `#${route}`;
+    } else if (this.config.mode === 'history') {
+      return `${this.config.basePath}/${route}`;
+    }
+    return '';
+  }
+
+  /**
+   * Destroy the router
+   */
+  public destroy(): void {
+    if (this.config.mode === 'hash') {
+      window.removeEventListener('hashchange', this.handleHashChange);
+    } else if (this.config.mode === 'history') {
+      window.removeEventListener('popstate', this.handlePopState);
+    }
+    this.listeners.clear();
+    this.isInitialized = false;
+  }
+
+  // Private methods
+
+  private handleHashChange = (): void => {
+    const viewId = this.getViewFromHash();
+    if (viewId && viewId !== this.currentViewId) {
+      this.navigate(viewId, { source: 'popstate' });
+    }
+  };
+
+  private handlePopState = (): void => {
+    const viewId = this.getViewFromPath();
+    if (viewId && viewId !== this.currentViewId) {
+      this.navigate(viewId, { source: 'popstate' });
+    }
+  };
+
+  private getViewFromHash(): string | null {
+    const hash = window.location.hash.slice(1); // Remove #
+    if (!hash) return null;
+
+    // Try to find view by route
+    const view = this.viewRegistry.findByRoute(hash);
+    return view?.id || null;
+  }
+
+  private getViewFromPath(): string | null {
+    let path = window.location.pathname;
+
+    // Remove base path if configured
+    if (this.config.basePath) {
+      if (path.startsWith(this.config.basePath)) {
+        path = path.slice(this.config.basePath.length);
+      }
+    }
+
+    // Remove leading slash
+    path = path.replace(/^\//, '');
+
+    if (!path) return null;
+
+    const view = this.viewRegistry.findByRoute(path);
+    return view?.id || null;
+  }
+
+  private updateUrl(view: IViewDefinition, replace: boolean): void {
+    const route = view.route || view.id;
+
+    if (this.config.mode === 'hash') {
+      const newHash = `#${route}`;
+      if (replace) {
+        window.history.replaceState(null, '', newHash);
+      } else {
+        window.history.pushState(null, '', newHash);
+      }
+    } else if (this.config.mode === 'history') {
+      const basePath = this.config.basePath || '';
+      const newPath = `${basePath}/${route}`;
+      if (replace) {
+        window.history.replaceState({ viewId: view.id }, '', newPath);
+      } else {
+        window.history.pushState({ viewId: view.id }, '', newPath);
+      }
+    }
+  }
+
+  private notifyListeners(viewId: string, params?: Record<string, string>): void {
+    for (const listener of this.listeners) {
+      listener(viewId, params);
+    }
+  }
+}
--- a/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.demo.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.demo.ts
@@ -4,6 +4,7 @@ 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';

@@ -95,14 +96,48 @@ export const demoFunc = () => {
    { key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help selected') },
  ];

-  // Selector options (second sidebar)
-  const selectorOptions: (ISelectionOption | { divider: true })[] = [
-    { key: 'Overview', iconName: 'home', action: () => console.log('Overview selected') },
-    { key: 'Components', iconName: 'package', action: () => console.log('Components selected') },
-    { key: 'Services', iconName: 'server', action: () => console.log('Services selected') },
-    { divider: true },
-    { key: 'Database', iconName: 'database', action: () => console.log('Database selected') },
-    { key: 'Settings', iconName: 'settings', action: () => console.log('Settings 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
@@ -155,7 +190,8 @@ export const demoFunc = () => {
          .mainmenuLogoText=${'Acme App'}
          .mainmenuGroups=${mainMenuGroups}
          .mainmenuBottomTabs=${mainMenuBottomTabs}
-          .mainselectorOptions=${selectorOptions}
+          .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)}
@@ -163,19 +199,37 @@ export const demoFunc = () => {
          @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)}
-          @mainselector-option-select=${(e: CustomEvent) => console.log('Option selected:', e.detail)}
+          @secondarymenu-item-select=${(e: CustomEvent) => console.log('Item selected:', e.detail)}
        >
-          <div slot="maincontent" style="padding: 40px; color: #ccc;">
-            <h1>Application Content</h1>
-            <p>This is the main content area where your application's primary interface would be displayed.</p>
-            <p>The layout includes:</p>
-            <ul>
-              <li>App bar with menus, breadcrumbs, and user account</li>
-              <li>Main menu (left sidebar) for primary navigation</li>
-              <li>Selector menu (second sidebar) for sub-navigation</li>
-              <li>Main content area (this section)</li>
-              <li>Activity log (right sidebar)</li>
-            </ul>
+          <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>
--- a/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts
@@ -12,15 +12,20 @@ import * as interfaces from '../../interfaces/index.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';

+// New module imports
+import { ViewRegistry } from './view.registry.js';
+import { AppRouter } from './app.router.js';
+import { StateManager } from './state.manager.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';

@@ -75,12 +80,26 @@ export class DeesAppuiBase extends DeesElement {
  @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 })[] = [];
+
+  // Collapse states
+  @property({ type: Boolean })
+  accessor mainmenuCollapsed: boolean = false;
+
+  @property({ type: Boolean })
+  accessor secondarymenuCollapsed: boolean = false;

  // Properties for maincontent
  @property({ type: Array })
@@ -94,7 +113,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;
@@ -102,6 +121,19 @@ export class DeesAppuiBase extends DeesElement {
  @state()
  accessor activitylog: DeesAppuiActivitylog | undefined = undefined;

+  // NEW: Unified config property
+  @property({ type: Object })
+  accessor config: interfaces.IAppConfig | undefined = undefined;
+
+  // NEW: Current view state
+  @state()
+  accessor currentView: interfaces.IViewDefinition | undefined = undefined;
+
+  // NEW: Internal services (not reactive, managed internally)
+  private viewRegistry: ViewRegistry = new ViewRegistry();
+  private router: AppRouter | null = null;
+  private stateManager: StateManager | null = null;
+
  public static styles = [
    cssManager.defaultStyles,
    css`
@@ -117,9 +149,39 @@ export class DeesAppuiBase extends DeesElement {
        height: calc(100% - 40px);
        width: 100%;
        display: grid;
-        grid-template-columns: 200px 240px 1fr 240px;
+        grid-template-columns: auto auto 1fr 240px;
        grid-template-rows: 1fr;
      }
+
+      /* Z-index layering for proper stacking (position: relative required for z-index to work) */
+      .maingrid > dees-appui-mainmenu {
+        position: relative;
+        z-index: 3;
+      }
+
+      .maingrid > dees-appui-secondarymenu {
+        position: relative;
+        z-index: 2;
+      }
+
+      .maingrid > dees-appui-maincontent {
+        position: relative;
+        z-index: 1;
+      }
+
+      .maingrid > dees-appui-activitylog {
+        position: relative;
+        z-index: 1;
+      }
+
+      /* View container for dynamically loaded views */
+      .view-container {
+        display: contents;
+      }
+
+      .view-container:empty {
+        display: none;
+      }
    `,
  ];

@@ -149,16 +211,23 @@ export class DeesAppuiBase extends DeesElement {
          .bottomTabs=${this.mainmenuBottomTabs}
          .tabs=${this.mainmenuTabs}
          .selectedTab=${this.mainmenuSelectedTab}
+          .collapsed=${this.mainmenuCollapsed}
          @tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
+          @collapse-change=${(e: CustomEvent) => this.handleMainmenuCollapseChange(e)}
        ></dees-appui-mainmenu>
-        <dees-appui-mainselector
-          .selectionOptions=${this.mainselectorOptions}
-          .selectedOption=${this.mainselectorSelectedOption}
-          @option-select=${(e: CustomEvent) => this.handleMainselectorOptionSelect(e)}
-        ></dees-appui-mainselector>
+        <dees-appui-secondarymenu
+          .heading=${this.secondarymenuHeading}
+          .groups=${this.secondarymenuGroups}
+          .selectionOptions=${this.secondarymenuOptions}
+          .selectedItem=${this.secondarymenuSelectedItem}
+          .collapsed=${this.secondarymenuCollapsed}
+          @item-select=${(e: CustomEvent) => this.handleSecondarymenuItemSelect(e)}
+          @collapse-change=${(e: CustomEvent) => this.handleSecondarymenuCollapseChange(e)}
+        ></dees-appui-secondarymenu>
        <dees-appui-maincontent
          .tabs=${this.maincontentTabs}
        >
+          <div class="view-container"></div>
          <slot name="maincontent"></slot>
        </dees-appui-maincontent>
        <dees-appui-activitylog></dees-appui-activitylog>
@@ -170,9 +239,27 @@ 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');
+
+    // Initialize from config if provided
+    if (this.config) {
+      this.applyConfig(this.config);
+
+      // Restore state if enabled
+      if (this.config.statePersistence?.enabled) {
+        this.loadState();
+      }
+
+      // Initialize router after state restore
+      this.router?.init();
+    }
+  }
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    this.router?.destroy();
  }

  // Event handlers for appbar
@@ -217,6 +304,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,
@@ -224,13 +313,270 @@ export class DeesAppuiBase extends DeesElement {
    }));
  }

-  // Event handlers for mainselector
-  private handleMainselectorOptionSelect(e: CustomEvent) {
-    this.mainselectorSelectedOption = e.detail.option;
-    this.dispatchEvent(new CustomEvent('mainselector-option-select', {
+  // Event handlers for secondarymenu
+  private handleSecondarymenuItemSelect(e: CustomEvent) {
+    this.secondarymenuSelectedItem = e.detail.item;
+    this.dispatchEvent(new CustomEvent('secondarymenu-item-select', {
      detail: e.detail,
      bubbles: true,
      composed: true
    }));
  }
+
+  // Event handlers for collapse state changes
+  private handleMainmenuCollapseChange(e: CustomEvent) {
+    this.mainmenuCollapsed = e.detail.collapsed;
+    this.dispatchEvent(new CustomEvent('mainmenu-collapse-change', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleSecondarymenuCollapseChange(e: CustomEvent) {
+    this.secondarymenuCollapsed = e.detail.collapsed;
+    this.dispatchEvent(new CustomEvent('secondarymenu-collapse-change', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  // ==========================================
+  // NEW: Public methods for unified config API
+  // ==========================================
+
+  /**
+   * Configure the app shell with a unified config object
+   */
+  public configure(config: interfaces.IAppConfig): void {
+    this.config = config;
+    this.applyConfig(config);
+  }
+
+  /**
+   * Navigate to a view by ID
+   */
+  public navigateToView(viewId: string): boolean {
+    if (this.router) {
+      return this.router.navigate(viewId);
+    }
+
+    // Fallback for non-routed mode
+    const view = this.viewRegistry.get(viewId);
+    if (view) {
+      this.loadView(view);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Get the current view
+   */
+  public getCurrentView(): interfaces.IViewDefinition | undefined {
+    return this.currentView;
+  }
+
+  /**
+   * Get UI state for serialization
+   */
+  public getUIState(): interfaces.IAppUIState {
+    return {
+      currentViewId: this.currentView?.id,
+      mainMenuCollapsed: this.mainmenuCollapsed,
+      secondaryMenuCollapsed: this.secondarymenuCollapsed,
+      secondaryMenuSelectedKey: this.secondarymenuSelectedItem?.key,
+      collapsedGroups: [], // TODO: Get from secondarymenu if needed
+      timestamp: Date.now(),
+    };
+  }
+
+  /**
+   * Restore UI state from a state object
+   */
+  public restoreUIState(state: interfaces.IAppUIState): void {
+    if (state.mainMenuCollapsed !== undefined) {
+      this.mainmenuCollapsed = state.mainMenuCollapsed;
+    }
+    if (state.secondaryMenuCollapsed !== undefined) {
+      this.secondarymenuCollapsed = state.secondaryMenuCollapsed;
+    }
+    if (state.currentViewId) {
+      this.navigateToView(state.currentViewId);
+    }
+  }
+
+  /**
+   * Save current UI state
+   */
+  public saveState(): void {
+    this.stateManager?.save(this.getUIState());
+  }
+
+  /**
+   * Load and restore saved UI state
+   */
+  public loadState(): boolean {
+    const state = this.stateManager?.load();
+    if (state) {
+      this.restoreUIState(state);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Get access to the view registry
+   */
+  public getViewRegistry(): ViewRegistry {
+    return this.viewRegistry;
+  }
+
+  /**
+   * Get access to the router
+   */
+  public getRouter(): AppRouter | null {
+    return this.router;
+  }
+
+  // ==========================================
+  // NEW: Private helper methods
+  // ==========================================
+
+  private applyConfig(config: interfaces.IAppConfig): void {
+    // Register views
+    if (config.views) {
+      this.viewRegistry.clear();
+      this.viewRegistry.registerAll(config.views);
+    }
+
+    // Apply branding
+    if (config.branding) {
+      this.mainmenuLogoIcon = config.branding.logoIcon || '';
+      this.mainmenuLogoText = config.branding.logoText || '';
+    }
+
+    // Apply app bar config
+    if (config.appBar) {
+      this.appbarMenuItems = config.appBar.menuItems || [];
+      this.appbarBreadcrumbs = config.appBar.breadcrumbs || '';
+      this.appbarBreadcrumbSeparator = config.appBar.breadcrumbSeparator || ' > ';
+      this.appbarShowWindowControls = config.appBar.showWindowControls ?? true;
+      this.appbarShowSearch = config.appBar.showSearch ?? false;
+      this.appbarUser = config.appBar.user;
+      this.appbarProfileMenuItems = config.appBar.profileMenuItems || [];
+    }
+
+    // Build main menu from view references
+    if (config.mainMenu) {
+      this.mainmenuGroups = this.buildMainMenuGroups(config);
+      this.mainmenuBottomTabs = this.buildBottomTabs(config);
+    }
+
+    // Initialize state manager
+    if (config.statePersistence) {
+      this.stateManager = new StateManager(config.statePersistence);
+    }
+
+    // Initialize router
+    if (config.routing && config.routing.mode !== 'none') {
+      this.router = new AppRouter(config.routing, this.viewRegistry);
+      this.router.onRouteChange((viewId) => {
+        const view = this.viewRegistry.get(viewId);
+        if (view) {
+          this.loadView(view);
+        }
+      });
+    }
+
+    // Bind event callbacks
+    if (config.onViewChange) {
+      this.addEventListener('view-change', ((e: CustomEvent) => {
+        config.onViewChange!(e.detail.viewId, e.detail.view);
+      }) as EventListener);
+    }
+
+    if (config.onSearch) {
+      this.addEventListener('appbar-search-click', () => {
+        config.onSearch!();
+      });
+    }
+  }
+
+  private buildMainMenuGroups(config: interfaces.IAppConfig): interfaces.IMenuGroup[] {
+    if (!config.mainMenu?.sections) return [];
+
+    return config.mainMenu.sections.map((section) => ({
+      name: section.name,
+      tabs: section.views
+        .map((viewId) => {
+          const view = this.viewRegistry.get(viewId);
+          if (!view) {
+            console.warn(`View "${viewId}" not found in registry`);
+            return null;
+          }
+          return {
+            key: view.name,
+            iconName: view.iconName,
+            action: () => this.navigateToView(viewId),
+          };
+        })
+        .filter(Boolean) as interfaces.ITab[],
+    }));
+  }
+
+  private buildBottomTabs(config: interfaces.IAppConfig): interfaces.ITab[] {
+    if (!config.mainMenu?.bottomItems) return [];
+
+    return config.mainMenu.bottomItems
+      .map((viewId) => {
+        const view = this.viewRegistry.get(viewId);
+        if (!view) {
+          console.warn(`View "${viewId}" not found in registry`);
+          return null;
+        }
+        return {
+          key: view.name,
+          iconName: view.iconName,
+          action: () => this.navigateToView(viewId),
+        };
+      })
+      .filter(Boolean) as interfaces.ITab[];
+  }
+
+  private loadView(view: interfaces.IViewDefinition): void {
+    const previousView = this.currentView;
+    this.currentView = view;
+
+    // Update secondary menu
+    if (view.secondaryMenu) {
+      this.secondarymenuGroups = view.secondaryMenu;
+      this.secondarymenuHeading = view.name;
+    }
+
+    // Update content tabs
+    if (view.contentTabs) {
+      this.maincontentTabs = view.contentTabs;
+    }
+
+    // Render view content into the view container
+    const viewContainer = this.maincontent?.shadowRoot?.querySelector('.view-container')
+      || this.shadowRoot?.querySelector('.view-container');
+    if (viewContainer) {
+      this.viewRegistry.renderView(view.id, viewContainer as HTMLElement);
+    }
+
+    // Save state if configured
+    this.stateManager?.update({ currentViewId: view.id });
+
+    // Dispatch event
+    this.dispatchEvent(
+      new CustomEvent('view-change', {
+        detail: { viewId: view.id, view, previousView },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
 }
--- a/ts_web/elements/00group-appui/dees-appui-base/index.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/index.ts
@@ -1 +1,4 @@
 export * from './dees-appui-base.js';
+export * from './view.registry.js';
+export * from './app.router.js';
+export * from './state.manager.js';
--- a/ts_web/elements/00group-appui/dees-appui-base/state.manager.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/state.manager.ts
@@ -0,0 +1,185 @@
+import type { IStatePersistenceConfig, IAppUIState } from '../../interfaces/appconfig.js';
+
+/**
+ * Manager for persisting and restoring UI state
+ */
+export class StateManager {
+  private config: Required<IStatePersistenceConfig>;
+  private memoryStorage: Map<string, string> = new Map();
+
+  constructor(config: IStatePersistenceConfig = { enabled: false }) {
+    this.config = {
+      enabled: config.enabled,
+      storageKey: config.storageKey || 'dees-appui-state',
+      storage: config.storage || 'localStorage',
+      persist: {
+        mainMenuCollapsed: true,
+        secondaryMenuCollapsed: true,
+        selectedView: true,
+        secondaryMenuSelection: true,
+        collapsedGroups: true,
+        ...config.persist,
+      },
+    };
+  }
+
+  /**
+   * Check if state persistence is enabled
+   */
+  public isEnabled(): boolean {
+    return this.config.enabled;
+  }
+
+  /**
+   * Save current UI state
+   */
+  public save(state: Partial<IAppUIState>): void {
+    if (!this.config.enabled) return;
+
+    const existingState = this.load() || {};
+    const newState: IAppUIState = {
+      ...existingState,
+      timestamp: Date.now(),
+    };
+
+    // Only save what's configured
+    if (this.config.persist.selectedView && state.currentViewId !== undefined) {
+      newState.currentViewId = state.currentViewId;
+    }
+    if (this.config.persist.mainMenuCollapsed && state.mainMenuCollapsed !== undefined) {
+      newState.mainMenuCollapsed = state.mainMenuCollapsed;
+    }
+    if (this.config.persist.secondaryMenuCollapsed && state.secondaryMenuCollapsed !== undefined) {
+      newState.secondaryMenuCollapsed = state.secondaryMenuCollapsed;
+    }
+    if (this.config.persist.secondaryMenuSelection && state.secondaryMenuSelectedKey !== undefined) {
+      newState.secondaryMenuSelectedKey = state.secondaryMenuSelectedKey;
+    }
+    if (this.config.persist.collapsedGroups && state.collapsedGroups !== undefined) {
+      newState.collapsedGroups = state.collapsedGroups;
+    }
+
+    this.setItem(this.config.storageKey, JSON.stringify(newState));
+  }
+
+  /**
+   * Load persisted UI state
+   */
+  public load(): IAppUIState | null {
+    if (!this.config.enabled) return null;
+
+    try {
+      const data = this.getItem(this.config.storageKey);
+      if (!data) return null;
+      return JSON.parse(data) as IAppUIState;
+    } catch (e) {
+      console.warn('Failed to load UI state:', e);
+      return null;
+    }
+  }
+
+  /**
+   * Clear persisted state
+   */
+  public clear(): void {
+    this.removeItem(this.config.storageKey);
+  }
+
+  /**
+   * Check if state exists
+   */
+  public hasState(): boolean {
+    return this.getItem(this.config.storageKey) !== null;
+  }
+
+  /**
+   * Get state age in milliseconds
+   */
+  public getStateAge(): number | null {
+    const state = this.load();
+    if (!state?.timestamp) return null;
+    return Date.now() - state.timestamp;
+  }
+
+  /**
+   * Update specific state properties
+   */
+  public update(updates: Partial<IAppUIState>): void {
+    const currentState = this.load() || {};
+    this.save({ ...currentState, ...updates });
+  }
+
+  /**
+   * Get the storage key being used
+   */
+  public getStorageKey(): string {
+    return this.config.storageKey;
+  }
+
+  // Storage abstraction methods
+
+  private getItem(key: string): string | null {
+    switch (this.config.storage) {
+      case 'localStorage':
+        try {
+          return localStorage.getItem(key);
+        } catch {
+          return null;
+        }
+      case 'sessionStorage':
+        try {
+          return sessionStorage.getItem(key);
+        } catch {
+          return null;
+        }
+      case 'memory':
+        return this.memoryStorage.get(key) || null;
+      default:
+        return null;
+    }
+  }
+
+  private setItem(key: string, value: string): void {
+    switch (this.config.storage) {
+      case 'localStorage':
+        try {
+          localStorage.setItem(key, value);
+        } catch (e) {
+          console.warn('Failed to save to localStorage:', e);
+        }
+        break;
+      case 'sessionStorage':
+        try {
+          sessionStorage.setItem(key, value);
+        } catch (e) {
+          console.warn('Failed to save to sessionStorage:', e);
+        }
+        break;
+      case 'memory':
+        this.memoryStorage.set(key, value);
+        break;
+    }
+  }
+
+  private removeItem(key: string): void {
+    switch (this.config.storage) {
+      case 'localStorage':
+        try {
+          localStorage.removeItem(key);
+        } catch {
+          // Ignore
+        }
+        break;
+      case 'sessionStorage':
+        try {
+          sessionStorage.removeItem(key);
+        } catch {
+          // Ignore
+        }
+        break;
+      case 'memory':
+        this.memoryStorage.delete(key);
+        break;
+    }
+  }
+}
--- a/ts_web/elements/00group-appui/dees-appui-base/view.registry.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/view.registry.ts
@@ -0,0 +1,167 @@
+import { html, render, type TemplateResult } from '@design.estate/dees-element';
+import type { IViewDefinition } from '../../interfaces/appconfig.js';
+
+/**
+ * Registry for managing views and their lifecycle
+ */
+export class ViewRegistry {
+  private views: Map<string, IViewDefinition> = new Map();
+  private instances: Map<string, HTMLElement> = new Map();
+  private currentViewId: string | null = null;
+
+  /**
+   * Register a single view
+   */
+  public register(view: IViewDefinition): void {
+    if (this.views.has(view.id)) {
+      console.warn(`View with id "${view.id}" already registered. Overwriting.`);
+    }
+    this.views.set(view.id, view);
+  }
+
+  /**
+   * Register multiple views
+   */
+  public registerAll(views: IViewDefinition[]): void {
+    views.forEach((view) => this.register(view));
+  }
+
+  /**
+   * Get a view definition by ID
+   */
+  public get(viewId: string): IViewDefinition | undefined {
+    return this.views.get(viewId);
+  }
+
+  /**
+   * Get all registered view IDs
+   */
+  public getViewIds(): string[] {
+    return Array.from(this.views.keys());
+  }
+
+  /**
+   * Get all views
+   */
+  public getAll(): IViewDefinition[] {
+    return Array.from(this.views.values());
+  }
+
+  /**
+   * Get route for a view
+   */
+  public getRoute(viewId: string): string {
+    const view = this.views.get(viewId);
+    return view?.route || view?.id || '';
+  }
+
+  /**
+   * Find view by route
+   */
+  public findByRoute(route: string): IViewDefinition | undefined {
+    for (const view of this.views.values()) {
+      const viewRoute = view.route || view.id;
+      if (viewRoute === route) {
+        return view;
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * Render a view's content into a container
+   */
+  public renderView(viewId: string, container: HTMLElement): HTMLElement | null {
+    const view = this.views.get(viewId);
+    if (!view) {
+      console.error(`View "${viewId}" not found in registry`);
+      return null;
+    }
+
+    // Clear container
+    container.innerHTML = '';
+
+    let element: HTMLElement;
+
+    if (typeof view.content === 'string') {
+      // Tag name string
+      element = document.createElement(view.content);
+    } else if (typeof view.content === 'function') {
+      // Check if it's a class constructor or template function
+      if (view.content.prototype instanceof HTMLElement) {
+        // Element class constructor
+        element = new (view.content as new () => HTMLElement)();
+      } else {
+        // Template function - wrap in a container and use Lit's render
+        const wrapper = document.createElement('div');
+        wrapper.className = 'view-content-wrapper';
+        wrapper.style.cssText = 'display: contents;';
+        const template = (view.content as () => TemplateResult)();
+        render(template, wrapper);
+        element = wrapper;
+      }
+    } else {
+      console.error(`Invalid content type for view "${viewId}"`);
+      return null;
+    }
+
+    container.appendChild(element);
+    this.instances.set(viewId, element);
+    this.currentViewId = viewId;
+
+    return element;
+  }
+
+  /**
+   * Get currently active view ID
+   */
+  public getCurrentViewId(): string | null {
+    return this.currentViewId;
+  }
+
+  /**
+   * Get cached instance of a view
+   */
+  public getInstance(viewId: string): HTMLElement | undefined {
+    return this.instances.get(viewId);
+  }
+
+  /**
+   * Clear all instances
+   */
+  public clearInstances(): void {
+    this.instances.clear();
+    this.currentViewId = null;
+  }
+
+  /**
+   * Unregister a view
+   */
+  public unregister(viewId: string): boolean {
+    this.instances.delete(viewId);
+    return this.views.delete(viewId);
+  }
+
+  /**
+   * Clear the registry
+   */
+  public clear(): void {
+    this.views.clear();
+    this.instances.clear();
+    this.currentViewId = null;
+  }
+
+  /**
+   * Check if a view is registered
+   */
+  public has(viewId: string): boolean {
+    return this.views.has(viewId);
+  }
+
+  /**
+   * Get the number of registered views
+   */
+  public get size(): number {
+    return this.views.size;
+  }
+}
--- a/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.demo.ts
+++ b/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.demo.ts
@@ -0,0 +1,50 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <style>
+    .demo-mainmenu-container {
+      display: flex;
+      height: 100%;
+      background: #1a1a1a;
+      border-radius: 8px;
+    }
+    .demo-mainmenu-container .spacer {
+      flex: 1;
+      background: #0f0f0f;
+    }
+  </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 class="spacer"></div>
+  </div>
+`;
--- a/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts
+++ b/ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.ts
@@ -12,6 +12,7 @@ import {
  cssManager,
 } from '@design.estate/dees-element';
 import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import { demoFunc } from './dees-appui-mainmenu.demo.js';

 /**
 * the most left menu
@@ -19,49 +20,7 @@ import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
 */
@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>
-  `;
+  public static demo = demoFunc;

  // INSTANCE

@@ -87,27 +46,75 @@ export class DeesAppuiMainmenu extends DeesElement {
  @property()
  accessor selectedTab: interfaces.ITab;

+  @property({ type: Boolean, reflect: true })
+  accessor collapsed: boolean = false;
+
  public static styles = [
    cssManager.defaultStyles,
    css`
      :host {
+        --menu-width-expanded: 200px;
+        --menu-width-collapsed: 56px;
+        --tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        --tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        position: relative;
        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);
+        width: var(--menu-width-expanded);
        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;
+        transition: width 0.25s ease;
+      }
+
+      :host([collapsed]) .mainContainer {
+        width: var(--menu-width-collapsed);
+      }
+
+      /* Floating collapse toggle button */
+      .collapse-toggle {
+        position: absolute;
+        right: -12px;
+        top: 24px;
+        transform: translateY(-50%);
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
+        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
+        opacity: 0;
+        transition: opacity 0.2s ease, background 0.15s ease;
+        padding: 0;
+      }
+
+      .collapse-toggle:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+      }
+
+      :host(:hover) .collapse-toggle {
+        opacity: 1;
+      }
+
+      .collapse-toggle dees-icon {
+        font-size: 14px;
      }

      /* Logo Section */
@@ -115,23 +122,38 @@ export class DeesAppuiMainmenu extends DeesElement {
        display: flex;
        align-items: center;
        gap: 10px;
-        padding: 16px 14px;
+        height: 48px;
+        padding: 0 14px;
        border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
        flex-shrink: 0;
+        box-sizing: border-box;
+      }
+
+      .logoSection .logoIcon {
+        font-size: 22px;
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        flex-shrink: 0;
      }

-      .logoSection dees-icon {
-        font-size: 22px;
-        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
-      }
-
      .logoSection .logoText {
+        flex: 1;
        font-size: 15px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
+        transition: opacity 0.2s ease, width 0.25s ease;
+      }
+
+      :host([collapsed]) .logoSection {
+        justify-content: center;
+        padding: 0;
+        gap: 0;
+      }
+
+      :host([collapsed]) .logoSection .logoText {
+        display: none;
      }

      /* Middle Section (scrollable) */
@@ -176,6 +198,17 @@ export class DeesAppuiMainmenu extends DeesElement {
        color: ${cssManager.bdTheme('#737373', '#737373')};
        text-transform: uppercase;
        letter-spacing: 0.5px;
+        white-space: nowrap;
+        overflow: hidden;
+        transition: opacity 0.2s ease, max-height 0.25s ease;
+        max-height: 30px;
+      }
+
+      :host([collapsed]) .groupHeader {
+        opacity: 0;
+        max-height: 0;
+        padding: 0;
+        margin: 0;
      }

      .groupTabs {
@@ -184,6 +217,10 @@ export class DeesAppuiMainmenu extends DeesElement {
        gap: 2px;
      }

+      :host([collapsed]) .menuGroup {
+        padding: 0 4px;
+      }
+
      /* Tab Item */
      .tab {
        position: relative;
@@ -240,6 +277,60 @@ export class DeesAppuiMainmenu extends DeesElement {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
+        transition: opacity 0.2s ease, width 0.25s ease;
+      }
+
+      /* Collapsed tab styles */
+      :host([collapsed]) .tab {
+        justify-content: center;
+        padding: 10px;
+        gap: 0;
+      }
+
+      :host([collapsed]) .tab .tabLabel {
+        opacity: 0;
+        width: 0;
+        position: absolute;
+      }
+
+      :host([collapsed]) .tab.selectedTab::before {
+        left: -4px;
+      }
+
+      /* Tooltip for collapsed state */
+      .tab-tooltip {
+        position: absolute;
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-left: 12px;
+        padding: 6px 12px;
+        background: var(--tooltip-bg);
+        color: var(--tooltip-fg);
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        white-space: nowrap;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.15s ease;
+        z-index: 1000;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      }
+
+      .tab-tooltip::before {
+        content: '';
+        position: absolute;
+        left: -4px;
+        top: 50%;
+        transform: translateY(-50%);
+        border: 4px solid transparent;
+        border-right-color: var(--tooltip-bg);
+      }
+
+      :host([collapsed]) .tab:hover .tab-tooltip {
+        opacity: 1;
+        transition-delay: 1s;
      }

      /* Bottom Section */
@@ -251,6 +342,10 @@ export class DeesAppuiMainmenu extends DeesElement {
        flex-direction: column;
        gap: 2px;
      }
+
+      :host([collapsed]) .bottomSection {
+        padding: 8px 4px;
+      }
    `,
  ];

@@ -268,7 +363,7 @@ export class DeesAppuiMainmenu extends DeesElement {
      }}>
        ${this.logoIcon || this.logoText ? html`
          <div class="logoSection">
-            ${this.logoIcon ? html`<dees-icon .icon="${this.logoIcon}"></dees-icon>` : ''}
+            ${this.logoIcon ? html`<dees-icon class="logoIcon" .icon="${this.logoIcon}"></dees-icon>` : ''}
            ${this.logoText ? html`<span class="logoText">${this.logoText}</span>` : ''}
          </div>
        ` : ''}
@@ -283,6 +378,9 @@ export class DeesAppuiMainmenu extends DeesElement {
          </div>
        ` : ''}
      </div>
+      <button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
+        <dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
+      </button>
    `;
  }

@@ -319,6 +417,7 @@ export class DeesAppuiMainmenu extends DeesElement {
      >
        <dees-icon .icon="${tabArg.iconName || ''}"></dees-icon>
        <span class="tabLabel">${tabArg.key}</span>
+        <span class="tab-tooltip">${tabArg.key}</span>
      </div>
    `;
  }
@@ -349,4 +448,13 @@ export class DeesAppuiMainmenu extends DeesElement {
      this.updateTab(allTabs[0]);
    }
  }
+
+  public toggleCollapse(): void {
+    this.collapsed = !this.collapsed;
+    this.dispatchEvent(new CustomEvent('collapse-change', {
+      detail: { collapsed: this.collapsed },
+      bubbles: true,
+      composed: true
+    }));
+  }
 }
--- a/ts_web/elements/00group-appui/dees-appui-mainselector/dees-appui-mainselector.ts
+++ b/ts_web/elements/00group-appui/dees-appui-mainselector/dees-appui-mainselector.ts
@@ -1,211 +0,0 @@
-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,
-  customElement,
-  html,
-  css,
-  cssManager,
-} from '@design.estate/dees-element';
-
-/**
- * the property selector menu
- * mainly used to select assets within in an organization
- */
-@customElement('dees-appui-mainselector')
-export class DeesAppuiMainselector extends DeesElement {
-  public static demo = () => html`
-    <dees-appui-mainselector
-      .selectionOptions=${[
-        { key: 'Overview', iconName: 'home', action: () => console.log('Overview') },
-        { key: 'Components', iconName: 'package', action: () => console.log('Components') },
-        { key: 'Services', iconName: 'server', action: () => console.log('Services') },
-        { key: 'Database', iconName: 'database', action: () => console.log('Database') },
-        { key: 'Settings', iconName: 'settings', action: () => console.log('Settings') },
-      ]}
-    ></dees-appui-mainselector>
-  `;
-
-  // INSTANCE
-  @property({ type: Array })
-  accessor selectionOptions: (interfaces.ISelectionOption | { divider: true })[] = [
-    { key: '⚠️ Please set selection options', action: () => console.warn('No selection options configured for mainselector') },
-  ];
-
-  @property()
-  accessor selectedOption: interfaces.ISelectionOption = null;
-
-  public static styles = [
-    cssManager.defaultStyles,
-    css`
-      :host {
-        color: ${cssManager.bdTheme('#333', '#fff')};
-        position: relative;
-        display: block;
-        width: 100%;
-        max-width: 300px;
-        height: 100%;
-        background: ${cssManager.bdTheme('#fafafa', '#000000')};
-        border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
-      }
-      .maincontainer {
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        height: 100%;
-        width: 100%;
-      }
-
-      .topbar {
-        position: absolute;
-        height: 40px;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
-      }
-
-      .topbar .heading {
-        padding-left: 12px;
-        font-family: 'Geist Sans', sans-serif;
-        font-weight: 600;
-        font-size: 12px;
-        color: ${cssManager.bdTheme('#666', '#999')};
-        text-transform: uppercase;
-        letter-spacing: 0.5px;
-      }
-
-      .selectionOptions {
-        position: absolute;
-        top: 40px;
-        left: 0px;
-        right: 0px;
-        bottom: 0px;
-        overflow-y: auto;
-        font-family: 'Geist Sans', sans-serif;
-        font-size: 12px;
-        padding: 4px 0;
-      }
-
-      .selectionOptions .selectionOption {
-        cursor: default;
-        padding: 8px 12px;
-        margin: 0;
-        transition: background 0.1s;
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
-        user-select: none;
-      }
-
-      .selectionOptions .selectionOption:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.08)')};
-      }
-
-      .selectionOptions .selectionOption:active {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
-      }
-
-      .selectionOptions .selectionOption.selectedOption {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
-        color: ${cssManager.bdTheme('#000', '#fff')};
-        font-weight: 500;
-      }
-      
-      .selectionOptions .selectionOption.selectedOption::before {
-        content: '';
-        position: absolute;
-        left: 0;
-        top: 0;
-        bottom: 0;
-        width: 3px;
-        background: ${cssManager.bdTheme('#26a69a', '#26a69a')};
-      }
-      
-      .selectionOption {
-        position: relative;
-      }
-      
-      .selection-divider {
-        height: 1px;
-        background: ${cssManager.bdTheme('#e0e0e0', '#202020')};
-        margin: 4px 0;
-      }
-    `,
-  ];
-
-  public render(): TemplateResult {
-    return html`
-      <style></style>
-      <div class="maincontainer">
-        <div class="topbar">
-          <div class="heading">Selector</div>
-        </div>
-        <div class="selectionOptions">
-          ${this.selectionOptions.map((selectionOptionArg) => {
-            if ('divider' in selectionOptionArg && selectionOptionArg.divider) {
-              return html`<div class="selection-divider"></div>`;
-            }
-            
-            const option = selectionOptionArg as interfaces.ISelectionOption;
-            return html`
-              <div
-                class="selectionOption ${this.selectedOption === option
-                  ? 'selectedOption'
-                  : null}"
-                @click="${() => {
-                  this.selectOption(option);
-                }}"
-                @contextmenu="${(eventArg: MouseEvent) => {
-                  DeesContextmenu.openContextMenuWithOptions(eventArg, [
-                    {
-                      name: 'property settings',
-                      action: async () => {},
-                      iconName: 'gear',
-                    },
-                  ]);
-                }}"
-              >
-                ${option.iconName ? html`
-                  <dees-icon .icon="${`lucide:${option.iconName}`}" style="font-size: 14px; opacity: 0.7;"></dees-icon>
-                ` : ''}
-                <span style="flex: 1;">${option.key}</span>
-              </div>
-            `;
-          })}
-        </div>
-      </div>
-    `;
-  }
-
-  private selectOption(optionArg: interfaces.ISelectionOption) {
-    this.selectedOption = optionArg;
-    this.selectedOption.action();
-    
-    // Emit option-select event
-    this.dispatchEvent(new CustomEvent('option-select', {
-      detail: { option: optionArg },
-      bubbles: true,
-      composed: true
-    }));
-  }
-
-  async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
-    await super.firstUpdated(_changedProperties);
-    if (this.selectionOptions && this.selectionOptions.length > 0) {
-      await this.updateComplete;
-      // Find first non-divider option
-      const firstOption = this.selectionOptions.find(option => !('divider' in option)) as interfaces.ISelectionOption;
-      if (firstOption) {
-        this.selectOption(firstOption);
-      }
-    }
-  }
-}
--- a/ts_web/elements/00group-appui/dees-appui-mainselector/index.ts
+++ b/ts_web/elements/00group-appui/dees-appui-mainselector/index.ts
@@ -1 +0,0 @@
-export * from './dees-appui-mainselector.js';
--- a/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts
+++ b/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts
@@ -0,0 +1,52 @@
+import { html } from '@design.estate/dees-element';
+import type * as interfaces from '../../interfaces/index.js';
+
+export const demoFunc = () => html`
+  <style>
+    .demo-secondarymenu-container {
+      display: flex;
+      height: 100%;
+      background: #1a1a1a;
+      border-radius: 8px;
+    }
+    .demo-secondarymenu-container .spacer {
+      flex: 1;
+      background: #0f0f0f;
+    }
+  </style>
+  <div class="demo-secondarymenu-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 class="spacer"></div>
+  </div>
+`;
--- a/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts
+++ b/ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.ts
@@ -0,0 +1,601 @@
+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';
+import { demoFunc } from './dees-appui-secondarymenu.demo.js';
+
+/**
+ * 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 = demoFunc;
+
+  // 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();
+
+  /** Horizontal collapse state */
+  @property({ type: Boolean, reflect: true })
+  accessor collapsed: boolean = false;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        --sidebar-width-expanded: 240px;
+        --sidebar-width-collapsed: 56px;
+        --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')};
+        --tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        --tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
+
+        /* 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')};
+
+        position: relative;
+        display: block;
+        height: 100%;
+        width: var(--sidebar-width-expanded);
+        background: var(--sidebar-bg);
+        border-right: 1px solid var(--sidebar-border);
+        font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+        user-select: none;
+        transition: width 0.25s ease;
+      }
+
+      :host([collapsed]) {
+        width: var(--sidebar-width-collapsed);
+      }
+
+      .maincontainer {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow: hidden;
+        position: relative;
+      }
+
+      /* Floating collapse toggle button */
+      .collapse-toggle {
+        position: absolute;
+        right: -12px;
+        top: 24px;
+        transform: translateY(-50%);
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
+        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
+        opacity: 0;
+        transition: opacity 0.2s ease, background 0.15s ease;
+        padding: 0;
+      }
+
+      .collapse-toggle:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+      }
+
+      :host(:hover) .collapse-toggle {
+        opacity: 1;
+      }
+
+      .collapse-toggle dees-icon {
+        font-size: 14px;
+      }
+
+      /* Header Section */
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        height: 48px;
+        padding: 0 16px;
+        border-bottom: 1px solid var(--sidebar-border);
+        flex-shrink: 0;
+        box-sizing: border-box;
+      }
+
+      .header .heading {
+        flex: 1;
+        font-size: 14px;
+        font-weight: 600;
+        color: var(--sidebar-fg-active);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition: opacity 0.2s ease, width 0.25s ease;
+      }
+
+      :host([collapsed]) .header {
+        justify-content: center;
+        padding: 0 8px;
+      }
+
+      :host([collapsed]) .header .heading {
+        opacity: 0;
+        width: 0;
+        overflow: hidden;
+      }
+
+      /* 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;
+      }
+
+      :host([collapsed]) .menuGroup {
+        padding: 0 4px;
+      }
+
+      .groupHeader {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 8px 8px;
+        cursor: pointer;
+        border-radius: 6px;
+        transition: background 0.15s ease, opacity 0.2s ease, max-height 0.25s ease;
+        max-height: 40px;
+      }
+
+      .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;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      .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);
+      }
+
+      /* Hide group headers when horizontally collapsed */
+      :host([collapsed]) .groupHeader {
+        opacity: 0;
+        max-height: 0;
+        padding: 0;
+        margin: 0;
+        pointer-events: none;
+      }
+
+      /* 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;
+      }
+
+      /* Always show items when horizontally collapsed (regardless of group collapse state) */
+      :host([collapsed]) .groupItems {
+        max-height: none;
+        opacity: 1;
+      }
+
+      /* 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;
+        transition: opacity 0.2s ease, width 0.25s ease;
+      }
+
+      /* Collapsed menu item styles */
+      :host([collapsed]) .menuItem {
+        justify-content: center;
+        padding: 8px;
+        gap: 0;
+      }
+
+      :host([collapsed]) .menuItem .itemLabel {
+        opacity: 0;
+        width: 0;
+        position: absolute;
+      }
+
+      :host([collapsed]) .menuItem.selected::before {
+        left: -4px;
+      }
+
+      /* Tooltip for collapsed state */
+      .item-tooltip {
+        position: absolute;
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-left: 12px;
+        padding: 6px 12px;
+        background: var(--tooltip-bg);
+        color: var(--tooltip-fg);
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        white-space: nowrap;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.15s ease;
+        z-index: 1000;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      }
+
+      .item-tooltip::before {
+        content: '';
+        position: absolute;
+        left: -4px;
+        top: 50%;
+        transform: translateY(-50%);
+        border: 4px solid transparent;
+        border-right-color: var(--tooltip-bg);
+      }
+
+      :host([collapsed]) .menuItem:hover .item-tooltip {
+        opacity: 1;
+        transition-delay: 1s;
+      }
+
+      /* 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);
+      }
+
+      :host([collapsed]) .badge {
+        display: none;
+      }
+
+      /* 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>
+      <button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
+        <dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
+      </button>
+    `;
+  }
+
+  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>
+        ` : ''}
+        <span class="item-tooltip">${item.key}</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;
+  }
+
+  public toggleCollapse(): void {
+    this.collapsed = !this.collapsed;
+    this.dispatchEvent(new CustomEvent('collapse-change', {
+      detail: { collapsed: this.collapsed },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  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;
+  }
+}
--- a/ts_web/elements/00group-appui/dees-appui-secondarymenu/index.ts
+++ b/ts_web/elements/00group-appui/dees-appui-secondarymenu/index.ts
@@ -0,0 +1 @@
+export * from './dees-appui-secondarymenu.js';
--- a/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
+++ b/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.ts
@@ -132,7 +132,9 @@ export class DeesAppuiTabs extends DeesElement {
      }

      .tabs-wrapper.horizontal-wrapper {
+        height: 48px;
        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        box-sizing: border-box;
      }

      .tabsContainer {
@@ -146,7 +148,7 @@ export class DeesAppuiTabs extends DeesElement {
        font-size: 14px;
        overflow-x: auto;
        scrollbar-width: none;
-        height: 48px;
+        height: 100%;
        padding: 0 16px;
        gap: 4px;
      }
--- a/ts_web/elements/00group-appui/index.ts
+++ b/ts_web/elements/00group-appui/index.ts
@@ -4,7 +4,7 @@ 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-mainselector/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';
--- a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts
+++ b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.demo.ts
@@ -266,17 +266,17 @@ export const demoFunc = () => html`
      .viewTabs=${[
        {
          name: 'Dashboard',
-          iconName: 'home',
+          iconName: 'lucide:home',
          element: DemoViewDashboard,
        },
        {
          name: 'Analytics',
-          iconName: 'lineChart',
+          iconName: 'lucide:lineChart',
          element: DemoViewAnalytics,
        },
        {
          name: 'Settings',
-          iconName: 'settings',
+          iconName: 'lucide:settings',
          element: DemoViewSettings,
        }
      ] as IView[]}
--- a/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
+++ b/ts_web/elements/00group-simple/dees-simple-appdash/dees-simple-appdash.ts
@@ -51,7 +51,7 @@ export class DeesSimpleAppDash extends DeesElement {
    cssManager.defaultStyles,
    css`
      :host {
-        color: ${cssManager.bdTheme('#333', '#ccc')};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
        user-select: none;
        display: block;
        overflow: hidden;
@@ -75,109 +75,188 @@ export class DeesSimpleAppDash extends DeesElement {
        left: 0px;
        height: calc(100% - 24px);
        width: 240px;
-        background: ${cssManager.bdTheme('#fafafa', '#000')};
-        border-right: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
-        font-size: 12px;
+        background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(0 0% 7%)')};
+        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
+        font-size: 13px;
        font-family: 'Geist Sans', sans-serif;
        z-index: 2;
        display: grid;
-        grid-template-rows: auto min-content;
+        grid-template-rows: auto 1fr min-content;
        overflow: hidden;
      }

      .sidebar-header {
-        padding: 16px 12px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        padding: 20px 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
        display: flex;
        align-items: center;
-        gap: 8px;
+        gap: 12px;
      }
-      
+
+      .header-icon-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 36px;
+        height: 36px;
+        border-radius: 10px;
+        background: ${cssManager.bdTheme(
+          'linear-gradient(135deg, hsl(215 20% 95%) 0%, hsl(215 20% 90%) 100%)',
+          'linear-gradient(135deg, hsl(215 20% 18%) 0%, hsl(215 20% 14%) 100%)'
+        )};
+        box-shadow: ${cssManager.bdTheme(
+          '0 1px 2px rgb(0 0 0 / 0.05), inset 0 1px 0 rgb(255 255 255 / 0.5)',
+          '0 1px 2px rgb(0 0 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.05)'
+        )};
+      }
+
+      .header-icon-wrapper dees-icon {
+        font-size: 18px;
+        color: ${cssManager.bdTheme('hsl(215 20% 40%)', 'hsl(215 20% 70%)')};
+      }
+
      .appName {
-        font-size: 14px;
+        font-size: 15px;
        font-weight: 600;
-        color: ${cssManager.bdTheme('#000', '#fff')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
+        letter-spacing: -0.02em;
      }
-      
+
      .viewTabs-container {
-        flex: 1;
        overflow-y: auto;
-        padding: 4px 0;
+        padding: 12px 8px;
+        scrollbar-width: thin;
+        scrollbar-color: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')} transparent;
+      }
+
+      .viewTabs-container::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .viewTabs-container::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .viewTabs-container::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 20%)')};
+        border-radius: 3px;
+      }
+
+      .viewTabs-container::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 75%)', 'hsl(0 0% 30%)')};
+      }
+
+      .section-label {
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${cssManager.bdTheme('hsl(0 0% 50%)', 'hsl(0 0% 50%)')};
+        padding: 8px 12px 8px;
+        margin-bottom: 4px;
      }

      .viewTabs {
        display: flex;
        flex-direction: column;
+        gap: 2px;
      }

      .viewTab {
        display: flex;
        align-items: center;
-        gap: 8px;
-        padding: 8px 12px;
+        gap: 10px;
+        padding: 10px 12px;
        cursor: default;
-        transition: background 0.1s;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
        user-select: none;
        position: relative;
+        border-radius: 8px;
      }

      .viewTab:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.08)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.04)', 'hsl(0 0% 100% / 0.05)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
      }

      .viewTab:active {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 0% / 0.06)', 'hsl(0 0% 100% / 0.07)')};
+        transform: scale(0.99);
      }
-      
+
      .viewTab.selected {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
-        color: ${cssManager.bdTheme('#000', '#fff')};
+        background: ${cssManager.bdTheme('hsl(215 25% 95%)', 'hsl(215 20% 15%)')};
+        color: ${cssManager.bdTheme('hsl(215 25% 30%)', 'hsl(215 25% 85%)')};
        font-weight: 500;
      }
-      
+
      .viewTab.selected::before {
        content: '';
        position: absolute;
        left: 0;
-        top: 0;
-        bottom: 0;
+        top: 8px;
+        bottom: 8px;
        width: 3px;
-        background: ${cssManager.bdTheme('#26a69a', '#26a69a')};
-      }
-      
-      .viewTab dees-icon {
-        font-size: 14px;
-        opacity: 0.7;
+        border-radius: 0 2px 2px 0;
+        background: ${cssManager.bdTheme('hsl(215 70% 50%)', 'hsl(215 70% 60%)')};
      }

+      .viewTab dees-icon {
+        font-size: 16px;
+        opacity: 0.55;
+        transition: all 0.15s ease;
+      }
+
+      .viewTab:hover dees-icon {
+        opacity: 0.75;
+      }
+
+      .viewTab.selected dees-icon {
+        opacity: 0.9;
+        color: ${cssManager.bdTheme('hsl(215 70% 45%)', 'hsl(215 70% 65%)')};
+      }
+
+      .viewTab span {
+        flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }

      .appActions {
-        padding: 12px;
-        border-top: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        padding: 12px 8px;
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 13%)')};
      }

      .action {
        display: flex;
        align-items: center;
-        gap: 8px;
-        padding: 8px;
-        border-radius: 4px;
+        gap: 10px;
+        padding: 10px 12px;
+        border-radius: 8px;
        cursor: default;
-        transition: background 0.1s;
-        color: ${cssManager.bdTheme('#333', '#ccc')};
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 65%)')};
      }
-      
+
      .action:hover {
-        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.08)')};
+        background: ${cssManager.bdTheme('hsl(0 84% 60% / 0.08)', 'hsl(0 84% 60% / 0.12)')};
+        color: ${cssManager.bdTheme('hsl(0 84% 45%)', 'hsl(0 84% 65%)')};
      }
-      
+
      .action dees-icon {
-        font-size: 14px;
-        opacity: 0.7;
+        font-size: 16px;
+        opacity: 0.6;
+        transition: all 0.15s ease;
+      }
+
+      .action:hover dees-icon {
+        opacity: 0.9;
+        color: ${cssManager.bdTheme('hsl(0 84% 45%)', 'hsl(0 84% 65%)')};
      }

      .appcontent {
@@ -189,46 +268,61 @@ export class DeesSimpleAppDash extends DeesElement {
        bottom: 24px;
        width: calc(100% - 240px);
        overflow: auto;
-        background: ${cssManager.bdTheme('#f5f5f5', '#000')};
+        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 5%)')};
        overscroll-behavior: contain;
      }
-      
+
      .controlbar {
        color: #fff;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
-        border-top: 1px solid ${cssManager.bdTheme('#00000020', '#ffffff20')};
        height: 24px;
-        background: ${cssManager.bdTheme('#2196f3', '#1565c0')};
+        background: ${cssManager.bdTheme('hsl(220 13% 18%)', 'hsl(220 13% 12%)')};
        z-index: 2;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-direction: row;
-        font-size: 12px;
+        font-size: 11px;
+        font-weight: 500;
+        letter-spacing: 0.01em;
      }

      .control {
        display: flex;
        align-items: center;
-        gap: 4px;
-        margin-right: 16px;
+        gap: 6px;
+        padding: 0 12px;
+        height: 100%;
        white-space: nowrap;
        cursor: default;
-        opacity: 0.8;
-        transition: opacity 0.2s;
-      }
-      
-      .control:hover {
-        opacity: 1;
-      }
-      
-      .control dees-icon {
-        font-size: 14px;
+        color: hsl(0 0% 70%);
+        transition: all 0.15s ease;
+        border-left: 1px solid hsl(0 0% 100% / 0.08);
      }

+      .control:first-child {
+        border-left: none;
+      }
+
+      .control:hover {
+        background: hsl(0 0% 100% / 0.06);
+        color: hsl(0 0% 95%);
+      }
+
+      .control dees-icon {
+        font-size: 13px;
+      }
+
+      .control.status-connected dees-icon {
+        color: hsl(142 70% 50%);
+      }
+
+      .control.status-terminal dees-icon {
+        color: hsl(45 90% 55%);
+      }
    `,
  ];

@@ -236,27 +330,30 @@ export class DeesSimpleAppDash extends DeesElement {
    return html`
      <div class="maincontainer">
        <div class="appbar">
-          <div>
-            <div class="sidebar-header">
-              <dees-icon .icon="${'lucide:grid3x3'}" style="font-size: 18px;"></dees-icon>
-              <div class="appName">${this.name}</div>
+          <div class="sidebar-header">
+            <div class="header-icon-wrapper">
+              <dees-icon .icon="${'lucide:layoutGrid'}"></dees-icon>
            </div>
-            <div class="viewTabs-container">
-              <div class="viewTabs">
-                ${this.viewTabs.map(
-                  (view) => html`
-                    <div 
-                      class="viewTab ${this.selectedView === view ? 'selected' : ''}" 
-                      @click=${() => this.loadView(view)}
-                    >
-                      ${view.iconName ? html`
-                        <dees-icon .icon="${`${view.iconName}`}"></dees-icon>
-                      ` : ''}
-                      <span style="flex: 1;">${view.name}</span>
-                    </div>
-                  `
-                )}
-              </div>
+            <div class="appName">${this.name}</div>
+          </div>
+          <div class="viewTabs-container">
+            <div class="section-label">Navigation</div>
+            <div class="viewTabs">
+              ${this.viewTabs.map(
+                (view) => html`
+                  <div
+                    class="viewTab ${this.selectedView === view ? 'selected' : ''}"
+                    @click=${() => this.loadView(view)}
+                  >
+                    ${view.iconName ? html`
+                      <dees-icon .icon="${view.iconName.includes(':') ? view.iconName : `lucide:${view.iconName}`}"></dees-icon>
+                    ` : html`
+                      <dees-icon .icon="${'lucide:file'}"></dees-icon>
+                    `}
+                    <span>${view.name}</span>
+                  </div>
+                `
+              )}
            </div>
          </div>
          <div class="appActions">
@@ -264,7 +361,7 @@ export class DeesSimpleAppDash extends DeesElement {
              this.dispatchEvent(new CustomEvent('logout', { bubbles: true, composed: true }));
            }}>
              <dees-icon .icon="${'lucide:logOut'}"></dees-icon>
-              <span>Logout</span>
+              <span>Sign out</span>
            </div>
          </div>
        </div>
@@ -272,11 +369,11 @@ export class DeesSimpleAppDash extends DeesElement {
          <!-- Content goes here -->
        </div>
        <div class="controlbar">
-          <div class="control">
+          <div class="control status-connected">
            <dees-icon .icon="${'lucide:wifi'}"></dees-icon>
            <span>Connected</span>
          </div>
-          <div class="control" @click=${this.launchTerminal}>
+          <div class="control status-terminal" @click=${this.launchTerminal}>
            <dees-icon .icon="${'lucide:terminal'}"></dees-icon>
            <span>Terminal</span>
          </div>
@@ -315,10 +412,10 @@ export class DeesSimpleAppDash extends DeesElement {
    terminal.style.right = '0px';
    terminal.style.bottom = '24px';
    terminal.style.opacity = '0';
-    terminal.style.transform = 'translateY(20px)';
-    terminal.style.transition = 'all 0.2s';
-    terminal.style.background = '#000';
-    terminal.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.3)';
+    terminal.style.transform = 'translateY(8px) scale(0.99)';
+    terminal.style.transition = 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)';
+    terminal.background = 'hsl(220 13% 8%)';
+    terminal.style.boxShadow = '0 25px 50px -12px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)';
    terminal.style.maxWidth = `calc(${maincontainer.clientWidth}px -240px)`;
    terminal.style.maxHeight = `calc(${maincontainer.clientHeight}px - 24px)`;
    
@@ -327,7 +424,7 @@ export class DeesSimpleAppDash extends DeesElement {
    
    await domtools.convenience.smartdelay.delayFor(0);
    terminal.style.opacity = '1';
-    terminal.style.transform = 'translateY(0px)';
+    terminal.style.transform = 'translateY(0) scale(1)';
    return terminal;
  }
  
@@ -335,8 +432,8 @@ export class DeesSimpleAppDash extends DeesElement {
    const domtools = await this.domtoolsPromise;
    if (this.currentTerminal) {
      this.currentTerminal.style.opacity = '0';
-      this.currentTerminal.style.transform = 'translateY(20px)';
-      await domtools.convenience.smartdelay.delayFor(200);
+      this.currentTerminal.style.transform = 'translateY(8px) scale(0.99)';
+      await domtools.convenience.smartdelay.delayFor(250);
      this.currentTerminal.remove();
      this.currentTerminal = null;
    }
--- a/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts
+++ b/ts_web/elements/00group-simple/dees-simple-login/dees-simple-login.ts
@@ -29,14 +29,14 @@ export class DeesSimpleLogin extends DeesElement {
    cssManager.defaultStyles,
    css`
      :host {
-        color: ${cssManager.bdTheme('#333', '#ccc')};
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
        user-select: none;
        display: block;
        width: 100%;
        height: 100%;
        font-family: 'Geist Sans', sans-serif;
      }
-      
+
      .loginContainer {
        position: absolute;
        display: flex;
@@ -46,7 +46,7 @@ export class DeesSimpleLogin extends DeesElement {
        height: 100%;
        top: 0;
        left: 0;
-        background: ${cssManager.bdTheme('#f5f5f5', '#000')};
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
      }

      .slotContainer {
@@ -56,43 +56,56 @@ export class DeesSimpleLogin extends DeesElement {
        top: 0;
        left: 0;
        opacity: 0;
-        transition: opacity 0.3s, transform 0.3s;
+        transition: opacity 0.2s ease, transform 0.2s ease;
        pointer-events: none;
      }

      .login {
-        min-width: 320px;
-        background: ${cssManager.bdTheme('#ffffff', '#111')};
-        box-shadow: ${cssManager.bdTheme(
-          '0 4px 12px rgba(0, 0, 0, 0.15)',
-          '0 4px 12px rgba(0, 0, 0, 0.3)'
-        )};
-        border-radius: 8px;
-        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
-        padding: 24px;
-        transition: opacity 0.3s, transform 0.3s;
+        width: 100%;
+        max-width: 360px;
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .login-header {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        text-align: center;
      }

      .header {
-        text-align: center;
-        font-size: 16px;
+        font-size: 24px;
        font-weight: 600;
-        margin-bottom: 20px;
-        color: ${cssManager.bdTheme('#000', '#fff')};
+        letter-spacing: -0.025em;
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
      }
-      
-      .login dees-form {
+
+      .subheader {
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+      }
+
+      .login-card {
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 8px;
+        padding: 24px;
+      }
+
+      .login-card dees-form {
        display: flex;
        flex-direction: column;
-        gap: 12px;
+        gap: 16px;
      }
-      
-      .login dees-input-text {
+
+      .login-card dees-input-text {
        width: 100%;
      }
-      
-      .login dees-form-submit {
-        margin-top: 4px;
+
+      .login-card dees-form-submit {
+        margin-top: 8px;
        width: 100%;
      }
    `,
@@ -102,12 +115,17 @@ export class DeesSimpleLogin extends DeesElement {
    return html`
      <div class="loginContainer">
        <div class="login">
-          <div class="header">Login to ${this.name}</div>
-          <dees-form>
-            <dees-input-text key="username" label="Username" required></dees-input-text>
-            <dees-input-text key="password" label="Password" isPasswordBool required></dees-input-text>
-            <dees-form-submit>Login</dees-form-submit>
-          </dees-form>
+          <div class="login-header">
+            <div class="header">Sign in</div>
+            <div class="subheader">Enter your credentials to access ${this.name}</div>
+          </div>
+          <div class="login-card">
+            <dees-form>
+              <dees-input-text key="username" label="Username" required></dees-input-text>
+              <dees-input-text key="password" label="Password" isPasswordBool required></dees-input-text>
+              <dees-form-submit>Sign in</dees-form-submit>
+            </dees-form>
+          </div>
        </div>
      </div>
      <div class="slotContainer">
--- a/ts_web/elements/dees-terminal/dees-terminal.ts
+++ b/ts_web/elements/dees-terminal/dees-terminal.ts
@@ -38,6 +38,9 @@ export class DeesTerminal extends DeesElement {
  @property()
  accessor environment: {[key: string]: string} = {};

+  @property()
+  accessor background: string = '#000000';
+
  // exposing webcontainer
  private webcontainerDeferred = new domtools.plugins.smartpromise.Deferred<webcontainer.WebContainer>();
  public webcontainerPromise = this.webcontainerDeferred.promise;
@@ -58,7 +61,7 @@ export class DeesTerminal extends DeesElement {
    css`
      :host {
        padding: 20px;
-        background: #000;
+        background: var(--dees-terminal-background, #000000);
        position: absolute;
        height: 100%;
        width: 100%;
@@ -153,7 +156,7 @@ export class DeesTerminal extends DeesElement {

      .xterm .composition-view {
        /* TODO: Composition position got messed up somewhere */
-        background: #000;
+        background: var(--dees-terminal-background, #000000);
        color: #fff;
        display: none;
        position: absolute;
@@ -167,7 +170,7 @@ export class DeesTerminal extends DeesElement {

      .xterm .xterm-viewport {
        /* On OS X this is required in order for the scroll bar to appear fully opaque */
-        background-color: #000;
+        background-color: var(--dees-terminal-background, #000000);
        overflow-y: scroll;
        cursor: default;
        position: absolute;
@@ -261,11 +264,18 @@ export class DeesTerminal extends DeesElement {
  ): Promise<void> {
    const domtools = await this.domtoolsPromise;
    super.firstUpdated(_changedProperties);
+
+    // Sync CSS variable with background property
+    this.style.setProperty('--dees-terminal-background', this.background);
+
    const container = this.shadowRoot.getElementById('container');

    const term = new Terminal({
      convertEol: true,
      cursorBlink: true,
+      theme: {
+        background: this.background,
+      },
    });
    this.fitAddon = new FitAddon();
    term.loadAddon(this.fitAddon);
--- a/ts_web/elements/interfaces/appconfig.ts
+++ b/ts_web/elements/interfaces/appconfig.ts
@@ -0,0 +1,189 @@
+import type { TemplateResult } from '@design.estate/dees-element';
+import type { IAppBarMenuItem } from './appbarmenuitem.js';
+import type { ITab } from './tab.js';
+import type { ISecondaryMenuGroup } from './secondarymenu.js';
+
+/**
+ * User configuration for the app bar
+ */
+export interface IAppUser {
+  name: string;
+  email?: string;
+  avatar?: string;
+  status?: 'online' | 'offline' | 'busy' | 'away';
+}
+
+/**
+ * View definition for the view registry
+ */
+export interface IViewDefinition {
+  /** Unique identifier for routing */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Optional icon */
+  iconName?: string;
+  /** The view content - can be a tag name, element class, or template function */
+  content: string | (new () => HTMLElement) | (() => TemplateResult);
+  /** Secondary menu items specific to this view */
+  secondaryMenu?: ISecondaryMenuGroup[];
+  /** Content tabs specific to this view */
+  contentTabs?: ITab[];
+  /** Optional route path (defaults to id) */
+  route?: string;
+  /** Badge to show on menu item */
+  badge?: string | number;
+  badgeVariant?: 'default' | 'success' | 'warning' | 'error';
+}
+
+/**
+ * Main menu section with view references
+ */
+export interface IMainMenuSection {
+  /** Section name (optional for ungrouped) */
+  name?: string;
+  /** Views in this section (by ID reference) */
+  views: string[];
+}
+
+/**
+ * Main menu configuration
+ */
+export interface IMainMenuConfig {
+  /** Menu sections with view references */
+  sections?: IMainMenuSection[];
+  /** Bottom pinned items (view IDs) */
+  bottomItems?: string[];
+}
+
+/**
+ * App bar configuration
+ */
+export interface IAppBarConfig {
+  menuItems?: IAppBarMenuItem[];
+  breadcrumbs?: string;
+  breadcrumbSeparator?: string;
+  showWindowControls?: boolean;
+  showSearch?: boolean;
+  user?: IAppUser;
+  profileMenuItems?: IAppBarMenuItem[];
+}
+
+/**
+ * Branding configuration
+ */
+export interface IBrandingConfig {
+  logoIcon?: string;
+  logoText?: string;
+}
+
+/**
+ * Routing configuration
+ */
+export interface IRoutingConfig {
+  /** Routing mode */
+  mode: 'hash' | 'history' | 'external' | 'none';
+  /** Base path for history mode */
+  basePath?: string;
+  /** Default view ID to show on startup */
+  defaultView?: string;
+  /** Sync URL on view change */
+  syncUrl?: boolean;
+  /** Handle 404s - show view ID or callback */
+  notFound?: string | (() => void);
+}
+
+/**
+ * State persistence configuration
+ */
+export interface IStatePersistenceConfig {
+  /** Enable state persistence */
+  enabled: boolean;
+  /** Storage key prefix */
+  storageKey?: string;
+  /** Storage type */
+  storage?: 'localStorage' | 'sessionStorage' | 'memory';
+  /** What to persist */
+  persist?: {
+    mainMenuCollapsed?: boolean;
+    secondaryMenuCollapsed?: boolean;
+    selectedView?: boolean;
+    secondaryMenuSelection?: boolean;
+    collapsedGroups?: boolean;
+  };
+}
+
+/**
+ * Activity log configuration
+ */
+export interface IActivityLogConfig {
+  enabled?: boolean;
+  width?: number;
+}
+
+/**
+ * Main unified configuration interface for dees-appui-base
+ */
+export interface IAppConfig {
+  /** Application branding */
+  branding?: IBrandingConfig;
+
+  /** App bar configuration */
+  appBar?: IAppBarConfig;
+
+  /** View definitions (the registry) */
+  views: IViewDefinition[];
+
+  /** Main menu structure */
+  mainMenu?: IMainMenuConfig;
+
+  /** Routing configuration */
+  routing?: IRoutingConfig;
+
+  /** State persistence configuration */
+  statePersistence?: IStatePersistenceConfig;
+
+  /** Activity log configuration */
+  activityLog?: IActivityLogConfig;
+
+  /** Event callbacks (optional shorthand) */
+  onViewChange?: (viewId: string, view: IViewDefinition) => void;
+  onSearch?: () => void;
+}
+
+/**
+ * Serialized UI state for persistence
+ */
+export interface IAppUIState {
+  /** Current view ID */
+  currentViewId?: string;
+  /** Main menu collapsed state */
+  mainMenuCollapsed?: boolean;
+  /** Secondary menu collapsed state */
+  secondaryMenuCollapsed?: boolean;
+  /** Selected secondary menu item key */
+  secondaryMenuSelectedKey?: string;
+  /** Collapsed group names in secondary menu */
+  collapsedGroups?: string[];
+  /** Timestamp of last save */
+  timestamp?: number;
+}
+
+/**
+ * Route change event detail
+ */
+export interface IRouteChangeEvent {
+  viewId: string;
+  previousViewId: string | null;
+  params?: Record<string, string>;
+  source: 'navigation' | 'popstate' | 'initial' | 'programmatic';
+}
+
+/**
+ * View change event detail
+ */
+export interface IViewChangeEvent {
+  viewId: string;
+  view: IViewDefinition;
+  previousView?: IViewDefinition;
+}
--- a/ts_web/elements/interfaces/index.ts
+++ b/ts_web/elements/interfaces/index.ts
@@ -2,3 +2,5 @@ export * from './tab.js';
 export * from './selectionoption.js';
 export * from './appbarmenuitem.js';
 export * from './menugroup.js';
+export * from './secondarymenu.js';
+export * from './appconfig.js';
--- a/ts_web/elements/interfaces/secondarymenu.ts
+++ b/ts_web/elements/interfaces/secondarymenu.ts
@@ -0,0 +1,20 @@
+/**
+ * Interface for individual menu items in the secondary menu
+ */
+export interface ISecondaryMenuItem {
+  key: string;
+  iconName?: string;
+  action: () => void;
+  badge?: string | number;
+  badgeVariant?: 'default' | 'success' | 'warning' | 'error';
+}
+
+/**
+ * Interface for collapsible groups in the secondary menu
+ */
+export interface ISecondaryMenuGroup {
+  name: string;
+  items: ISecondaryMenuItem[];
+  collapsed?: boolean;
+  iconName?: string;
+}
--- a/ts_web/pages/zindex-showcase.ts
+++ b/ts_web/pages/zindex-showcase.ts
@@ -2,15 +2,15 @@ import { html, css, cssManager } from '@design.estate/dees-element';
 import { DeesModal } from '../elements/dees-modal/dees-modal.js';
 import { DeesToast } from '../elements/dees-toast/dees-toast.js';
 import { DeesContextmenu } from '../elements/dees-contextmenu/dees-contextmenu.js';
-import '../elements/dees-button/dees-button.js';
-import '../elements/dees-input-dropdown/dees-input-dropdown.js';
-import '../elements/dees-form/dees-form.js';
+import '../elements/00group-button/dees-button/dees-button.js';
+import '../elements/00group-input/dees-input-dropdown/dees-input-dropdown.js';
+import '../elements/00group-form/dees-form/dees-form.js';
 import '../elements/dees-panel/dees-panel.js';
-import '../elements/dees-input-text/dees-input-text.js';
-import '../elements/dees-input-radiogroup/dees-input-radiogroup.js';
-import '../elements/dees-input-tags/dees-input-tags.js';
-import '../elements/dees-input-wysiwyg.js';
-import '../elements/dees-appui-profiledropdown/dees-appui-profiledropdown.js';
+import '../elements/00group-input/dees-input-text/dees-input-text.js';
+import '../elements/00group-input/dees-input-radiogroup/dees-input-radiogroup.js';
+import '../elements/00group-input/dees-input-tags/dees-input-tags.js';
+import '../elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import '../elements/00group-appui/dees-appui-profiledropdown/dees-appui-profiledropdown.js';

 export const zIndexShowcase = () => html`
  <style>
Author	SHA1	Message	Date
Juergen Kunz	59a870c3bc	v3.3.0 Some checks failed Default (tags) / security (push) Failing after 16s Details Default (tags) / test (push) Failing after 17s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-09 08:26:24 +00:00
Juergen Kunz	13fa654c0f	feat(dees-appui-base): Add unified App UI API to dees-appui-base with ViewRegistry, AppRouter and StateManager	2025-12-09 08:26:24 +00:00
Juergen Kunz	3616bbb9a7	v3.2.0 Some checks failed Default (tags) / security (push) Failing after 16s Details Default (tags) / test (push) Failing after 17s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-08 20:23:03 +00:00
Juergen Kunz	27c071f7dc	feat(dees-simple-appdash,dees-simple-login,dees-terminal): Revamp UI: dashboard & login styling, standardize icons to Lucide, and add terminal background/config	2025-12-08 20:23:03 +00:00
Juergen Kunz	ac1ef4e497	v3.1.2 Some checks failed Default (tags) / security (push) Failing after 12s Details Default (tags) / test (push) Failing after 13s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-08 16:17:52 +00:00
Juergen Kunz	9c61c0542b	fix(DeesAppuiMainmenu, DeesAppuiSecondarymenu): Add position: relative to main and secondary app UI menus to fix positioning of overlays and tooltips	2025-12-08 16:17:52 +00:00
Juergen Kunz	5c099c8057	v3.1.1 Some checks failed Default (tags) / security (push) Failing after 15s Details Default (tags) / test (push) Failing after 18s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-08 16:16:25 +00:00
Juergen Kunz	82b4afa95a	fix(dees-appui): Extract demos for main and secondary app menus, adjust collapsed styles and toggle placement, bump devDependency	2025-12-08 16:16:25 +00:00
Juergen Kunz	888430d55a	v3.1.0 Some checks failed Default (tags) / security (push) Failing after 16s Details Default (tags) / test (push) Failing after 17s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-08 15:40:12 +00:00
Juergen Kunz	85424d07cd	feat(dees-appui): Add collapsible/compact mode to AppUI sidebars (mainmenu & secondarymenu) with toggles, tooltips and improved z-index stacking	2025-12-08 15:40:12 +00:00
Juergen Kunz	24d3afe85d	v3.0.1 Some checks failed Default (tags) / security (push) Failing after 15s Details Default (tags) / test (push) Failing after 17s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-08 14:50:53 +00:00
Juergen Kunz	9735af05c8	fix(dees-appui): Normalize header heights and box-sizing for App UI components	2025-12-08 14:50:53 +00:00
Juergen Kunz	9471c419fa	v3.0.0 Some checks failed Default (tags) / security (push) Failing after 17s Details Default (tags) / test (push) Failing after 17s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-08 14:35:06 +00:00
Juergen Kunz	778f457ed5	BREAKING CHANGE(dees-appui-secondarymenu): Add SecondaryMenu component and replace Mainselector with new SecondaryMenu in AppUI	2025-12-08 14:35:06 +00:00
				`@@ -1 +0,0 @@`
				`export * from './dees-appui-mainselector.js';`
				`@@ -0,0 +1 @@`
				`export * from './dees-appui-secondarymenu.js';`