v3.3.0

changelog.md

@@ -1,5 +1,85 @@
 # 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
+
+- Introduce App UI components: dees-appui-appbar, dees-appui-mainmenu, dees-appui-mainselector, dees-appui-maincontent, dees-appui-activitylog, dees-appui-profiledropdown, dees-appui-tabs, dees-appui-base, dees-appui-view (templates, styles and demos included).
+- Add a comprehensive set of input components: dees-input-text, dees-input-checkbox, dees-input-dropdown, dees-input-fileupload, dees-input-datepicker, dees-input-phone, dees-input-iban, dees-input-quantityselector, dees-input-list, dees-input-typelist, dees-input-tags, dees-input-multitoggle, dees-input-radiogroup, dees-input-richtext and supporting demos/styles/templates.
+- Add form primitives and integration: dees-form and dees-form-submit with validation, collection and demo pages showcasing usage.
+- Add button family and utilities: dees-button (with updated variants, sizes, status handling and demo), dees-button-group and dees-button-exit.
+- Add charting components: dees-chart-area (ApexCharts integration) and dees-chart-log (log viewer) plus rich demo scenarios and realtime features.
+- Add data display components: dees-dataview-codebox (highlight.js integration) and dees-dataview-statusobject with copy/context behaviours and demos.
+- Add editor tooling: dees-editor (Monaco loader/version management), dees-editor-markdown and dees-editor-markdownoutlet; also TipTap-based richtext input with toolbar and link handling.
+- Add global utilities and infra: dees-toast (programmatic toast API and containers), z-index registry and theme/font helpers (fonts, color tokens), plus many styles and accessibility/keyboard improvements across components.
+- Export and index updates: new group exports added to ts_web/elements index and many index.ts files to expose the new components and demos.
+- Extensive demos and showcase pages added (input-showcase, component demos) to illustrate integration, keyboard navigation, theming and form flows.
+
 ## 2025-12-06 - 2.0.6 - fix(dees-input-richtext)
 Initialize editor and link input element references in firstUpdated to ensure they exist before editor initialization.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "2.0.6",
+  "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"

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
+        specifier: ^2.3.5
-        version: 2.2.3
+        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':
+  '@git.zone/tswatch@2.3.5':
-    resolution: {integrity: sha512-BKyVYXWOjVL+eUcnwjfTKFhUsEBHpgpSv5rbuZYOhmVp9BcglWaEswuAstGEISkCioizUcHiZkpJVPXO99sLHQ==}
+    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':
+  '@push.rocks/smartwatch@6.1.1':
-    resolution: {integrity: sha512-uuWUlTo0l5LWOWoOuTMG7zzxpUNKBcyqoB+zyQ24NHTtSYNcaUJtaQzTO2gxMXr5sqiZDkohlThS0KvsBc3g7w==}
+    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

readme.hints.md

@@ -681,3 +681,123 @@ According to Lit's documentation (https://lit.dev/docs/components/decorators/#de
 - Manual testing of key components verified
 - No regressions detected
 - 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

ts_web/00_commitinfo_data.ts

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

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

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

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

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

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

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

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

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

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

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

ts_web/elements/00group-appui/dees-appui-base/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);
+    }
+  }
+}

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

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

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

@@ -0,0 +1,582 @@
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+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 { 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-secondarymenu/dees-appui-secondarymenu.js';
+import '../dees-appui-maincontent/dees-appui-maincontent.js';
+import '../dees-appui-activitylog/dees-appui-activitylog.js';
+
+@customElement('dees-appui-base')
+export class DeesAppuiBase extends DeesElement {
+  public static demo = demoFunc;
+
+  // Properties for appbar
+  @property({ type: Array })
+  accessor appbarMenuItems: interfaces.IAppBarMenuItem[] = [];
+
+  @property({ type: String })
+  accessor appbarBreadcrumbs: string = '';
+
+  @property({ type: String })
+  accessor appbarBreadcrumbSeparator: string = ' > ';
+
+  @property({ type: Boolean })
+  accessor appbarShowWindowControls: boolean = true;
+
+
+  @property({ type: Object })
+  accessor appbarUser: {
+    name: string;
+    email?: string;
+    avatar?: string;
+    status?: 'online' | 'offline' | 'busy' | 'away';
+  } | undefined = undefined;
+
+  @property({ type: Array })
+  accessor appbarProfileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];
+
+  @property({ type: Boolean })
+  accessor appbarShowSearch: boolean = false;
+
+  // Properties for mainmenu
+  @property({ type: String })
+  accessor mainmenuLogoIcon: string = '';
+
+  @property({ type: String })
+  accessor mainmenuLogoText: string = '';
+
+  @property({ type: Array })
+  accessor mainmenuGroups: interfaces.IMenuGroup[] = [];
+
+  @property({ type: Array })
+  accessor mainmenuBottomTabs: interfaces.ITab[] = [];
+
+  @property({ type: Array })
+  accessor mainmenuTabs: interfaces.ITab[] = [];
+
+  @property({ type: Object })
+  accessor mainmenuSelectedTab: interfaces.ITab | undefined = undefined;
+
+  // Properties for secondarymenu
+  @property({ type: String })
+  accessor secondarymenuHeading: string = 'Menu';
+
+  @property({ type: Array })
+  accessor secondarymenuGroups: interfaces.ISecondaryMenuGroup[] = [];
+
+  @property({ type: Object })
+  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 })
+  accessor maincontentTabs: interfaces.ITab[] = [];
+
+  // References to child components
+  @state()
+  accessor appbar: DeesAppuiBar | undefined = undefined;
+
+  @state()
+  accessor mainmenu: DeesAppuiMainmenu | undefined = undefined;
+
+  @state()
+  accessor secondarymenu: DeesAppuiSecondarymenu | undefined = undefined;
+
+  @state()
+  accessor maincontent: DeesAppuiMaincontent | undefined = undefined;
+
+  @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`
+      :host {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
+      }
+      .maingrid {
+        position: absolute;
+        top: 40px;
+        height: calc(100% - 40px);
+        width: 100%;
+        display: grid;
+        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;
+      }
+    `,
+  ];
+
+  // INSTANCE
+  public render(): TemplateResult {
+    return html`
+      <style></style>
+      <dees-appui-appbar
+        .menuItems=${this.appbarMenuItems}
+        .breadcrumbs=${this.appbarBreadcrumbs}
+        .breadcrumbSeparator=${this.appbarBreadcrumbSeparator}
+        .showWindowControls=${this.appbarShowWindowControls}
+        .user=${this.appbarUser}
+        .profileMenuItems=${this.appbarProfileMenuItems}
+        .showSearch=${this.appbarShowSearch}
+        @menu-select=${(e: CustomEvent) => this.handleAppbarMenuSelect(e)}
+        @breadcrumb-navigate=${(e: CustomEvent) => this.handleAppbarBreadcrumbNavigate(e)}
+        @search-click=${() => this.handleAppbarSearchClick()}
+        @user-menu-open=${() => this.handleAppbarUserMenuOpen()}
+        @profile-menu-select=${(e: CustomEvent) => this.handleAppbarProfileMenuSelect(e)}
+      ></dees-appui-appbar>
+      <div class="maingrid">
+        <dees-appui-mainmenu
+          .logoIcon=${this.mainmenuLogoIcon}
+          .logoText=${this.mainmenuLogoText}
+          .menuGroups=${this.mainmenuGroups}
+          .bottomTabs=${this.mainmenuBottomTabs}
+          .tabs=${this.mainmenuTabs}
+          .selectedTab=${this.mainmenuSelectedTab}
+          .collapsed=${this.mainmenuCollapsed}
+          @tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
+          @collapse-change=${(e: CustomEvent) => this.handleMainmenuCollapseChange(e)}
+        ></dees-appui-mainmenu>
+        <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>
+      </div>
+    `;
+  }
+
+  async firstUpdated() {
+    // Get references to child components
+    this.appbar = this.shadowRoot.querySelector('dees-appui-appbar');
+    this.mainmenu = this.shadowRoot.querySelector('dees-appui-mainmenu');
+    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
+  private handleAppbarMenuSelect(e: CustomEvent) {
+    this.dispatchEvent(new CustomEvent('appbar-menu-select', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleAppbarBreadcrumbNavigate(e: CustomEvent) {
+    this.dispatchEvent(new CustomEvent('appbar-breadcrumb-navigate', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleAppbarSearchClick() {
+    this.dispatchEvent(new CustomEvent('appbar-search-click', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleAppbarUserMenuOpen() {
+    this.dispatchEvent(new CustomEvent('appbar-user-menu-open', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleAppbarProfileMenuSelect(e: CustomEvent) {
+    this.dispatchEvent(new CustomEvent('appbar-profile-menu-select', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  // 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,
+      composed: true
+    }));
+  }
+
+  // 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,
+      })
+    );
+  }
+}

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

@@ -0,0 +1,4 @@
+export * from './dees-appui-base.js';
+export * from './view.registry.js';
+export * from './app.router.js';
+export * from './state.manager.js';

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;
+    }
+  }
+}

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;
+  }
+}

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

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

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

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

ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.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>
+`;

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

@@ -0,0 +1,460 @@
+import * as plugins from '../../00plugins.js';
+import * as interfaces from '../../interfaces/index.js';
+import { zIndexLayers } from '../../00zindex.js';
+
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import { demoFunc } from './dees-appui-mainmenu.demo.js';
+
+/**
+ * the most left menu
+ * usually used as organization selector
+ */
+@customElement('dees-appui-mainmenu')
+export class DeesAppuiMainmenu extends DeesElement {
+  public static demo = demoFunc;
+
+  // INSTANCE
+
+  // Logo properties
+  @property({ type: String })
+  accessor logoIcon: string = '';
+
+  @property({ type: String })
+  accessor logoText: string = '';
+
+  // Menu groups (new way)
+  @property({ type: Array })
+  accessor menuGroups: interfaces.IMenuGroup[] = [];
+
+  // Bottom tabs (pinned to bottom)
+  @property({ type: Array })
+  accessor bottomTabs: interfaces.ITab[] = [];
+
+  // Legacy tabs property (for backward compatibility)
+  @property({ type: Array })
+  accessor tabs: interfaces.ITab[] = [];
+
+  @property()
+  accessor selectedTab: interfaces.ITab;
+
+  @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 {
+        color: ${cssManager.bdTheme('#666', '#ccc')};
+        z-index: ${zIndexLayers.fixed.appBar};
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        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 */
+      .logoSection {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        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 .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) */
+      .menuSection {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        padding: 8px 0;
+      }
+
+      .menuSection::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .menuSection::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .menuSection::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+        border-radius: 3px;
+      }
+
+      .menuSection::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
+      }
+
+      /* Menu Group */
+      .menuGroup {
+        padding: 0 8px;
+        margin-bottom: 8px;
+      }
+
+      .menuGroup:last-child {
+        margin-bottom: 0;
+      }
+
+      .groupHeader {
+        padding: 8px 12px 6px;
+        font-size: 11px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#737373', '#737373')};
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        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 {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      :host([collapsed]) .menuGroup {
+        padding: 0 4px;
+      }
+
+      /* Tab Item */
+      .tab {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px 12px;
+        font-size: 13px;
+        font-weight: 500;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
+      }
+
+      .tab:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+        color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
+      }
+
+      .tab:active {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+      }
+
+      .tab.selectedTab {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+      }
+
+      .tab.selectedTab::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 16px;
+        background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        border-radius: 0 2px 2px 0;
+      }
+
+      .tab dees-icon {
+        font-size: 18px;
+        opacity: 0.85;
+        flex-shrink: 0;
+      }
+
+      .tab.selectedTab dees-icon {
+        opacity: 1;
+      }
+
+      .tab .tabLabel {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        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 */
+      .bottomSection {
+        flex-shrink: 0;
+        padding: 8px;
+        border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      :host([collapsed]) .bottomSection {
+        padding: 8px 4px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    // Get all tabs for selection (from groups or legacy tabs)
+    const allTabs = this.getAllTabs();
+
+    return html`
+      <div class="mainContainer" @contextmenu=${(eventArg: MouseEvent) => {
+        DeesContextmenu.openContextMenuWithOptions(eventArg, [{
+          name: 'app settings',
+          action: async () => {},
+          iconName: 'gear',
+        }])
+      }}>
+        ${this.logoIcon || this.logoText ? html`
+          <div class="logoSection">
+            ${this.logoIcon ? html`<dees-icon class="logoIcon" .icon="${this.logoIcon}"></dees-icon>` : ''}
+            ${this.logoText ? html`<span class="logoText">${this.logoText}</span>` : ''}
+          </div>
+        ` : ''}
+
+        <div class="menuSection">
+          ${this.menuGroups.length > 0 ? this.renderMenuGroups() : this.renderLegacyTabs()}
+        </div>
+
+        ${this.bottomTabs.length > 0 ? html`
+          <div class="bottomSection">
+            ${this.bottomTabs.map((tabArg) => this.renderTab(tabArg))}
+          </div>
+        ` : ''}
+      </div>
+      <button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
+        <dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
+      </button>
+    `;
+  }
+
+  private renderMenuGroups(): TemplateResult {
+    return html`
+      ${this.menuGroups.map((group) => html`
+        <div class="menuGroup">
+          ${group.name ? html`<div class="groupHeader">${group.name}</div>` : ''}
+          <div class="groupTabs">
+            ${group.tabs.map((tabArg) => this.renderTab(tabArg))}
+          </div>
+        </div>
+      `)}
+    `;
+  }
+
+  private renderLegacyTabs(): TemplateResult {
+    return html`
+      <div class="menuGroup">
+        <div class="groupTabs">
+          ${this.tabs.map((tabArg) => this.renderTab(tabArg))}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderTab(tabArg: interfaces.ITab): TemplateResult {
+    return html`
+      <div
+        class="tab ${tabArg === this.selectedTab ? 'selectedTab' : ''}"
+        @click="${() => {
+          this.updateTab(tabArg);
+        }}"
+      >
+        <dees-icon .icon="${tabArg.iconName || ''}"></dees-icon>
+        <span class="tabLabel">${tabArg.key}</span>
+        <span class="tab-tooltip">${tabArg.key}</span>
+      </div>
+    `;
+  }
+
+  private getAllTabs(): interfaces.ITab[] {
+    if (this.menuGroups.length > 0) {
+      const groupTabs = this.menuGroups.flatMap(group => group.tabs);
+      return [...groupTabs, ...this.bottomTabs];
+    }
+    return [...this.tabs, ...this.bottomTabs];
+  }
+
+  updateTab(tabArg: interfaces.ITab) {
+    this.selectedTab = tabArg;
+    this.selectedTab.action();
+
+    // Emit tab-select event
+    this.dispatchEvent(new CustomEvent('tab-select', {
+      detail: { tab: tabArg },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  firstUpdated() {
+    const allTabs = this.getAllTabs();
+    if (allTabs.length > 0) {
+      this.updateTab(allTabs[0]);
+    }
+  }
+
+  public toggleCollapse(): void {
+    this.collapsed = !this.collapsed;
+    this.dispatchEvent(new CustomEvent('collapse-change', {
+      detail: { collapsed: this.collapsed },
+      bubbles: true,
+      composed: true
+    }));
+  }
+}

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

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

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

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

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

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

ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.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>
+`;

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;
+  }
+}

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

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

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

@@ -1,4 +1,4 @@
-import * as interfaces from '../interfaces/index.js';
+import * as interfaces from '../../interfaces/index.js';
 
 import {
   DeesElement,
@@ -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;
       }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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