v3.4.0

feat(dees-appui-base): overhaul AppUI core: replace simple view rendering with a full-featured ViewRegistry (caching, hide/show lifecycle, async lazy-loading), introduce view lifecycle hooks and activation context, add activity log API/component, remove built-in router and state manager, and update configuration interfaces and demos
v3.3.3
2025-12-19 13:54:37 +00:00 · 2025-12-19 13:54:37 +00:00 · 2025-12-19 12:37:54 +00:00 · 2025-12-19 12:37:54 +00:00 · 2025-12-19 12:36:12 +00:00 · 2025-12-19 12:36:12 +00:00
39 changed files with 2768 additions and 1414 deletions
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,29 @@
 # Changelog

+## 2025-12-19 - 3.4.0 - feat(dees-appui-base)
+overhaul AppUI core: replace simple view rendering with a full-featured ViewRegistry (caching, hide/show lifecycle, async lazy-loading), introduce view lifecycle hooks and activation context, add activity log API/component, remove built-in router and state manager, and update configuration interfaces and demos
+
+- Removed files: app.router.ts and state.manager.ts — routing and state-persistence internals were removed (breaking).
+- ViewRegistry rewritten: supports cached instances, activate/deactivate lifecycle, canDeactivate checks, async content loading, parameterized routes, and legacy renderView kept as deprecated compatibility.
+- New interfaces added/changed: IViewActivationContext, IViewLifecycle, IActivityEntry, IActivityLogAPI, IViewLifecycleEvent; IViewDefinition.content now accepts async loaders and a cache flag; IMainMenuConfig and ITab expanded (logo, groups, badges).
+- Activity log: dees-appui-activitylog now implements IActivityLogAPI and exposes reactive entries; demo and readme updated with usage and examples.
+- App config changed: routing and statePersistence config entries removed/adjusted; defaultView moved into IAppConfig; view change and lifecycle event shapes changed (breaking).
+- Demos and documentation: dees-appui-base demo and readme added/updated to showcase new lifecycle hooks, secondary menu behavior, activity log and new APIs.
+
+## 2025-12-19 - 3.3.3 - fix(tests)
+update test imports to new dees-input-wysiwyg paths
+
+- Updated imports in test/test.wysiwyg-registry.both.ts to point to ts_web/elements/00group-input/dees-input-wysiwyg/*
+- Aligns test references with relocated WYSIWYG block handlers and block registration module; no behavior changes to implementation
+
+## 2025-12-19 - 3.3.2 - fix(build)
+update build config, bump dependencies, and adjust test import paths after element reorganization
+
+- npmextra.json: renamed gitzone entry to @git.zone/cli, moved tsdoc key to @git.zone/tsdoc, added @ship.zone/szci entry and added release registries + accessLevel
+- package.json: bumped @design.estate/dees-wcctools ^2.0.1 -> ^3.1.0, lucide ^0.560.0 -> ^0.562.0, @git.zone/tsbuild ^3.1.2 -> ^4.0.2, @types/node ^25.0.0 -> ^25.0.3
+- tests: updated import paths to follow reorganized source layout (wysiwyg files moved under elements/00group-input/dees-input-wysiwyg and dees-contextmenu moved to elements/dees-contextmenu/dees-contextmenu.js); updated BlockRegistry and blockregistration import paths
+- Purpose: align tests and build metadata with refactored element file locations and updated tool/dependency versions
+
 ## 2025-12-11 - 3.3.1 - fix(dees-pdf-viewer)
 Scroll active PDF thumbnail into view after rendering and on page changes; update dependency versions

--- a/npmextra.json
+++ b/npmextra.json
@@ -1,5 +1,5 @@
 {
-  "gitzone": {
+  "@git.zone/cli": {
    "projectType": "wcc",
    "module": {
      "githost": "code.foss.global",
@@ -35,13 +35,19 @@
        "Modern Web",
        "Frontend Development"
      ]
+    },
+    "release": {
+      "registries": [
+        "https://verdaccio.lossless.digital",
+        "https://registry.npmjs.org"
+      ],
+      "accessLevel": "public"
    }
  },
-  "npmci": {
-    "npmGlobalTools": [],
-    "npmAccessLevel": "public"
-  },
-  "tsdoc": {
+  "@git.zone/tsdoc": {
    "legal": "\n## License and Legal Information\n\nThis repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. \n\n**Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.\n\n### Trademarks\n\nThis project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.\n\n### Company Information\n\nTask Venture Capital GmbH  \nRegistered at District court Bremen HRB 35230 HB, Germany\n\nFor any legal inquiries or if you require further information, please contact us via email at hello@task.vc.\n\nBy using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.\n"
+  },
+  "@ship.zone/szci": {
+    "npmGlobalTools": []
  }
 }
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@design.estate/dees-catalog",
-  "version": "3.3.1",
+  "version": "3.4.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",
@@ -18,7 +18,7 @@
  "dependencies": {
    "@design.estate/dees-domtools": "^2.3.6",
    "@design.estate/dees-element": "^2.1.3",
-    "@design.estate/dees-wcctools": "^2.0.1",
+    "@design.estate/dees-wcctools": "^3.1.0",
    "@fortawesome/fontawesome-svg-core": "^7.1.0",
    "@fortawesome/free-brands-svg-icons": "^7.1.0",
    "@fortawesome/free-regular-svg-icons": "^7.1.0",
@@ -38,20 +38,20 @@
    "highlight.js": "11.11.1",
    "ibantools": "^4.5.1",
    "lit": "^3.3.1",
-    "lucide": "^0.560.0",
+    "lucide": "^0.562.0",
    "monaco-editor": "0.52.2",
    "pdfjs-dist": "^4.10.38",
    "xterm": "^5.3.0",
    "xterm-addon-fit": "^0.8.0"
  },
  "devDependencies": {
-    "@git.zone/tsbuild": "^3.1.2",
+    "@git.zone/tsbuild": "^4.0.2",
    "@git.zone/tsbundle": "^2.6.3",
    "@git.zone/tstest": "^3.1.3",
    "@git.zone/tswatch": "^2.3.13",
    "@push.rocks/projectinfo": "^5.0.2",
    "@push.rocks/tapbundle": "^6.0.3",
-    "@types/node": "^25.0.0"
+    "@types/node": "^25.0.3"
  },
  "files": [
    "ts/**/*",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,8 +15,8 @@ importers:
        specifier: ^2.1.3
        version: 2.1.3
      '@design.estate/dees-wcctools':
-        specifier: ^2.0.1
-        version: 2.0.1
+        specifier: ^3.1.0
+        version: 3.1.0
      '@fortawesome/fontawesome-svg-core':
        specifier: ^7.1.0
        version: 7.1.0
@@ -75,8 +75,8 @@ importers:
        specifier: ^3.3.1
        version: 3.3.1
      lucide:
-        specifier: ^0.560.0
-        version: 0.560.0
+        specifier: ^0.562.0
+        version: 0.562.0
      monaco-editor:
        specifier: 0.52.2
        version: 0.52.2
@@ -91,8 +91,8 @@ importers:
        version: 0.8.0(xterm@5.3.0)
    devDependencies:
      '@git.zone/tsbuild':
-        specifier: ^3.1.2
-        version: 3.1.2
+        specifier: ^4.0.2
+        version: 4.0.2
      '@git.zone/tsbundle':
        specifier: ^2.6.3
        version: 2.6.3
@@ -109,8 +109,8 @@ importers:
        specifier: ^6.0.3
        version: 6.0.3(socks@2.8.7)
      '@types/node':
-        specifier: ^25.0.0
-        version: 25.0.0
+        specifier: ^25.0.3
+        version: 25.0.3

 packages:

@@ -350,8 +350,8 @@ packages:
  '@design.estate/dees-wcctools@1.3.0':
    resolution: {integrity: sha512-+yd8c1gTIKNRQYCvG0xu6Am8dHsRm7ymluX2gnoBQN4aFOpZgIBi/v9CvGyPhTD1p/VRouIBz1wsUCejnwrFCA==}

-  '@design.estate/dees-wcctools@2.0.1':
-    resolution: {integrity: sha512-1DaQtvoMmD+uH9cjSrL4szk7h0nbBlT/ZBmz+qvWCOqzZXE3wPOAdgASZ73NeQlehLx4KGbfJTCG15DSB0W3LQ==}
+  '@design.estate/dees-wcctools@3.1.0':
+    resolution: {integrity: sha512-EZsgvZZ736PORt8FkHvzKzsmsHDkYOngcWfL1eBEutT3HBQq4PW5X6PVWSHXFzbhI6rt3O07GJHEIa+xU2mSkQ==}

  '@emnapi/core@1.7.1':
    resolution: {integrity: sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg==}
@@ -541,16 +541,16 @@ packages:
    resolution: {integrity: sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==}
    engines: {node: '>=6'}

-  '@git.zone/tsbuild@3.1.2':
-    resolution: {integrity: sha512-K0u840Qo0WEhvcpAtktvdBX6KEXjelU32o820WzcK7dMA7dd2YV+mPOEYfbmWLcdtFJkrjkigQq5fpLhTN4oKQ==}
+  '@git.zone/tsbuild@4.0.2':
+    resolution: {integrity: sha512-LcRlFnDbcUe53Pdoob585iXq9TAT90TyEaYl/wml/etFoPeBX+oQLm6GryejUPXrUP7i1opyTonadkQN1OyXOA==}
    hasBin: true

  '@git.zone/tsbundle@2.6.3':
    resolution: {integrity: sha512-YD1qMYA/4eOuF57V0ccR+xo6ww1+QOYFA2K5gBPFBDNh9VdfvWxxDhOUybja8lT9PVMoli8PHG5WA5tKJkdXIQ==}
    hasBin: true

-  '@git.zone/tspublish@1.10.3':
-    resolution: {integrity: sha512-o2/jvNsdLC8SRdH1kQ7JjNOQNu9el0FpJ/QOW3mgiC5C9reuTp18iU4kijsVVLgvw4KZv6Z289SoKPh3HPsS0g==}
+  '@git.zone/tspublish@1.11.0':
+    resolution: {integrity: sha512-dkgaDBTzZJ53lAV72r7OW/W7l/KqpkncFuPojr11JO35OKAbjjDhZbAwPv4oGX9NplyXrhC5VJRPNX/orqNTHA==}
    hasBin: true

  '@git.zone/tsrun@2.0.0':
@@ -815,6 +815,9 @@ packages:
  '@push.rocks/mongodump@1.1.0':
    resolution: {integrity: sha512-kW0ZUGyf1e4nwloVwBQjNId+MzgTcNS834C+RxH21i1NqyOubbpWZtJtPP+K+s35nSJRyCTy3ICfBMdDBTAm2w==}

+  '@push.rocks/npmextra@5.3.3':
+    resolution: {integrity: sha512-snLpSHwaQ5OXlZzF1KX/FY71W5LwajjBzor82Vue0smjEPnSeUPY5/JcVdMwtdprdJe13pc/EQQuIiL/zw4/yg==}
+
  '@push.rocks/projectinfo@5.0.2':
    resolution: {integrity: sha512-zzieCal6jwR++o+fDl8gMpWkNV2cGEsbT96vCNZu/H9kr0iqRmapOiA4DFadkhOnhlDqvRr6TPaXESu2YUbI8Q==}

@@ -873,6 +876,9 @@ packages:
  '@push.rocks/smartexit@1.0.23':
    resolution: {integrity: sha512-WmwKYcwbHBByoABhHHB+PAjr5475AtD/xBh1mDcqPrFsOOUOZq3BBUdpq25wI3ccu/SZB5IwaimiVzadls6HkA==}

+  '@push.rocks/smartexit@1.1.0':
+    resolution: {integrity: sha512-GD8VLIbxQuwvhPXwK4eH162XAYSj+M3wGKWGNO3i1iY4bj8P3BARcgsWx6/ntN3aCo5ygWtrevrfD5iecYY2Ng==}
+
  '@push.rocks/smartexpect@2.5.0':
    resolution: {integrity: sha512-yoyuCoQ3tTiAriuvF+/09fNbVfFnacudL2SwHSzPhX/ugaE7VTSWXQ9A34eKOWvil0MPyDcOY36fVZDxvrPd8A==}

@@ -891,9 +897,15 @@ packages:
  '@push.rocks/smartfile@13.1.0':
    resolution: {integrity: sha512-bSjH9vHl6l1nbe/gcSi4PcutFcTHUCVkMuQGGTVtn1cOgCuOXIHV04uhOXrZoKvlcSxxoiq8THolFt65lqn7cg==}

+  '@push.rocks/smartfile@13.1.2':
+    resolution: {integrity: sha512-DaEhwmnGEpX4coeeToaw4cZe3pNBhH7CY1iGr+d3pIXihozREvzzAR9/0i2r7bUXXL5+Lgy8YYIk5ZS+fwxMKA==}
+
  '@push.rocks/smartfs@1.2.0':
    resolution: {integrity: sha512-1R47jJZwX869z7DYgKeAZKTU1SbGnM7W/ZmgsI7AkQQhiascNqY3/gF4V5kIprmuf1WhpRbCbZyum8s7J1LDdg==}

+  '@push.rocks/smartfs@1.3.1':
+    resolution: {integrity: sha512-ZSduVS8tM+/erbyCTvRRvc9gLWwbpqN5xdIIkMr+gub7fowSeJb7tR2rnGwySa63DyimU0q2KTp79VV9YqGLeg==}
+
  '@push.rocks/smartguard@3.1.0':
    resolution: {integrity: sha512-J23q84f1O+TwFGmd4lrO9XLHUh2DaLXo9PN/9VmTWYzTkQDv5JehmifXVI0esophXcCIfbdIu6hbt7/aHlDF4A==}

@@ -1804,8 +1816,8 @@ packages:
  '@types/node-forge@1.3.14':
    resolution: {integrity: sha512-mhVF2BnD4BO+jtOp7z1CdzaK4mbuK0LLQYAvdOLqHTavxFNq4zA1EmYkpnFjP8HOUzedfQkRnp0E2ulSAYSzAw==}

-  '@types/node@25.0.0':
-    resolution: {integrity: sha512-rl78HwuZlaDIUSeUKkmogkhebA+8K1Hy7tddZuJ3D0xV8pZSfsYGTsliGUol1JPzu9EKnTxPC4L1fiWouStRew==}
+  '@types/node@25.0.3':
+    resolution: {integrity: sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA==}

  '@types/parse5@6.0.3':
    resolution: {integrity: sha512-SuT16Q1K51EAVPz1K29DJ/sXjhSQ0zjvsypYJ6tlwVsRV9jwW5Adq2ch8Dq8kDBCkYnELS7N7VNCSB5nC56t/g==}
@@ -3315,8 +3327,8 @@ packages:
  lucide@0.555.0:
    resolution: {integrity: sha512-R7BkO2/XRpMADcMIRn1UOZOvirxr2Z6s/R82k0EUK71ZXXrlRbvkVwTAIf+9DRApeyH+zNMIGfiUdmrOhoAygQ==}

-  lucide@0.560.0:
-    resolution: {integrity: sha512-w7++Pwdz0NxxMtC4ugLmsy66Ar95HnDIMjzJZdHl0kQKIHto3icgI+lbOZMlovZ1Mo4RGITWGhYn1ro7hcY/UA==}
+  lucide@0.562.0:
+    resolution: {integrity: sha512-k1Fb8ZMnRQovWRlea7Jr0b9UKA29IM7/cu79+mJrhVohvA2YC/Ti3Sk+G+h/SIu3IlrKT4RAbWMHUBBQd1O6XA==}

  make-dir@3.1.0:
    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
@@ -5397,7 +5409,7 @@ snapshots:
      - supports-color
      - vue

-  '@design.estate/dees-wcctools@2.0.1':
+  '@design.estate/dees-wcctools@3.1.0':
    dependencies:
      '@design.estate/dees-domtools': 2.3.6
      '@design.estate/dees-element': 2.1.3
@@ -5525,13 +5537,14 @@ snapshots:
    dependencies:
      '@fortawesome/fontawesome-common-types': 7.1.0

-  '@git.zone/tsbuild@3.1.2':
+  '@git.zone/tsbuild@4.0.2':
    dependencies:
-      '@git.zone/tspublish': 1.10.3
+      '@git.zone/tspublish': 1.11.0
      '@push.rocks/early': 4.0.4
      '@push.rocks/smartcli': 4.0.19
      '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartfile': 11.2.7
+      '@push.rocks/smartfile': 13.1.2
+      '@push.rocks/smartfs': 1.3.1
      '@push.rocks/smartlog': 3.1.10
      '@push.rocks/smartpath': 6.0.0
      '@push.rocks/smartpromise': 4.2.3
@@ -5566,16 +5579,18 @@ snapshots:
      - '@swc/helpers'
      - supports-color

-  '@git.zone/tspublish@1.10.3':
+  '@git.zone/tspublish@1.11.0':
    dependencies:
      '@push.rocks/consolecolor': 2.0.3
+      '@push.rocks/npmextra': 5.3.3
      '@push.rocks/smartcli': 4.0.19
      '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartfile': 11.2.7
+      '@push.rocks/smartfile': 13.1.2
+      '@push.rocks/smartfs': 1.3.1
      '@push.rocks/smartlog': 3.1.10
      '@push.rocks/smartnpm': 2.0.6
      '@push.rocks/smartpath': 6.0.0
-      '@push.rocks/smartrequest': 4.4.2
+      '@push.rocks/smartrequest': 5.0.1
      '@push.rocks/smartshell': 3.3.0
    transitivePeerDependencies:
      - '@nuxt/kit'
@@ -5700,7 +5715,7 @@ snapshots:
      '@jest/schemas': 29.6.3
      '@types/istanbul-lib-coverage': 2.0.6
      '@types/istanbul-reports': 3.0.4
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3
      '@types/yargs': 17.0.35
      chalk: 4.1.2

@@ -6010,7 +6025,7 @@ snapshots:
      '@push.rocks/smartbucket': 3.3.10
      '@push.rocks/smartcache': 1.0.18
      '@push.rocks/smartenv': 5.0.13
-      '@push.rocks/smartexit': 1.0.23
+      '@push.rocks/smartexit': 1.1.0
      '@push.rocks/smartfile': 11.2.7
      '@push.rocks/smartjson': 5.2.0
      '@push.rocks/smartpath': 6.0.0
@@ -6055,6 +6070,23 @@ snapshots:
      - snappy
      - socks

+  '@push.rocks/npmextra@5.3.3':
+    dependencies:
+      '@push.rocks/qenv': 6.1.3
+      '@push.rocks/smartfile': 11.2.7
+      '@push.rocks/smartjson': 5.2.0
+      '@push.rocks/smartlog': 3.1.10
+      '@push.rocks/smartpath': 6.0.0
+      '@push.rocks/smartpromise': 4.2.3
+      '@push.rocks/smartrx': 3.0.10
+      '@push.rocks/taskbuffer': 3.5.0
+      '@tsclass/tsclass': 9.3.0
+    transitivePeerDependencies:
+      - '@nuxt/kit'
+      - react
+      - supports-color
+      - vue
+
  '@push.rocks/projectinfo@5.0.2':
    dependencies:
      '@push.rocks/smartfile': 10.0.41
@@ -6073,7 +6105,7 @@ snapshots:
  '@push.rocks/smartarchive@4.2.4':
    dependencies:
      '@push.rocks/smartdelay': 3.0.5
-      '@push.rocks/smartfile': 13.1.0
+      '@push.rocks/smartfile': 13.1.2
      '@push.rocks/smartpath': 6.0.0
      '@push.rocks/smartpromise': 4.2.3
      '@push.rocks/smartrequest': 4.4.2
@@ -6247,6 +6279,13 @@ snapshots:
      '@push.rocks/smartpromise': 4.2.3
      tree-kill: 1.2.2

+  '@push.rocks/smartexit@1.1.0':
+    dependencies:
+      '@push.rocks/lik': 6.2.2
+      '@push.rocks/smartdelay': 3.0.5
+      '@push.rocks/smartpromise': 4.2.3
+      tree-kill: 1.2.2
+
  '@push.rocks/smartexpect@2.5.0':
    dependencies:
      '@push.rocks/smartdelay': 3.0.5
@@ -6314,10 +6353,31 @@ snapshots:
      glob: 11.1.0
      js-yaml: 4.1.1

+  '@push.rocks/smartfile@13.1.2':
+    dependencies:
+      '@push.rocks/lik': 6.2.2
+      '@push.rocks/smartdelay': 3.0.5
+      '@push.rocks/smartfile-interfaces': 1.0.7
+      '@push.rocks/smartfs': 1.3.1
+      '@push.rocks/smarthash': 3.2.6
+      '@push.rocks/smartjson': 5.2.0
+      '@push.rocks/smartmime': 2.0.4
+      '@push.rocks/smartpath': 6.0.0
+      '@push.rocks/smartpromise': 4.2.3
+      '@push.rocks/smartrequest': 4.4.2
+      '@push.rocks/smartstream': 3.2.5
+      '@types/js-yaml': 4.0.9
+      glob: 11.1.0
+      js-yaml: 4.1.1
+
  '@push.rocks/smartfs@1.2.0':
    dependencies:
      '@push.rocks/smartpath': 6.0.0

+  '@push.rocks/smartfs@1.3.1':
+    dependencies:
+      '@push.rocks/smartpath': 6.0.0
+
  '@push.rocks/smartguard@3.1.0':
    dependencies:
      '@push.rocks/smartpromise': 4.2.3
@@ -6745,17 +6805,20 @@ snapshots:
    transitivePeerDependencies:
      - '@aws-sdk/credential-providers'
      - '@mongodb-js/zstd'
+      - '@nuxt/kit'
      - aws-crt
      - bare-abort-controller
      - bufferutil
      - gcp-metadata
      - kerberos
      - mongodb-client-encryption
+      - react
      - react-native-b4a
      - snappy
      - socks
      - supports-color
      - utf-8-validate
+      - vue

  '@push.rocks/taskbuffer@3.5.0':
    dependencies:
@@ -7503,18 +7566,18 @@ snapshots:

  '@types/accepts@1.3.7':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/babel__code-frame@7.0.6': {}

  '@types/bn.js@5.2.0':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/body-parser@1.19.6':
    dependencies:
      '@types/connect': 3.4.38
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/buffer-json@2.0.3': {}

@@ -7531,17 +7594,17 @@ snapshots:

  '@types/clean-css@4.2.11':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3
      source-map: 0.6.1

  '@types/co-body@6.1.3':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3
      '@types/qs': 6.14.0

  '@types/connect@3.4.38':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/content-disposition@0.5.9': {}

@@ -7552,11 +7615,11 @@ snapshots:
      '@types/connect': 3.4.38
      '@types/express': 5.0.6
      '@types/keygrip': 1.0.6
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/cors@2.8.19':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/debounce@1.2.4': {}

@@ -7568,7 +7631,7 @@ snapshots:

  '@types/dns-packet@5.6.5':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/elliptic@6.4.18':
    dependencies:
@@ -7576,7 +7639,7 @@ snapshots:

  '@types/express-serve-static-core@5.1.0':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3
      '@types/qs': 6.14.0
      '@types/range-parser': 1.2.7
      '@types/send': 1.2.1
@@ -7589,17 +7652,17 @@ snapshots:

  '@types/from2@2.3.6':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/fs-extra@11.0.4':
    dependencies:
      '@types/jsonfile': 6.1.4
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/glob@8.1.0':
    dependencies:
      '@types/minimatch': 5.1.2
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/hast@3.0.4':
    dependencies:
@@ -7633,7 +7696,7 @@ snapshots:

  '@types/jsonfile@6.1.4':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/keygrip@1.0.6': {}

@@ -7650,7 +7713,7 @@ snapshots:
      '@types/http-errors': 2.0.5
      '@types/keygrip': 1.0.6
      '@types/koa-compose': 3.2.9
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/linkify-it@5.0.0': {}

@@ -7673,9 +7736,9 @@ snapshots:

  '@types/node-forge@1.3.14':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

-  '@types/node@25.0.0':
+  '@types/node@25.0.3':
    dependencies:
      undici-types: 7.16.0

@@ -7693,18 +7756,18 @@ snapshots:

  '@types/s3rver@3.7.4':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/semver@7.7.1': {}

  '@types/send@1.2.1':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/serve-static@2.2.0':
    dependencies:
      '@types/http-errors': 2.0.5
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/sinon-chai@3.2.12':
    dependencies:
@@ -7723,11 +7786,11 @@ snapshots:

  '@types/tar-stream@3.1.4':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/through2@2.0.41':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/triple-beam@1.3.5': {}

@@ -7753,11 +7816,11 @@ snapshots:

  '@types/ws@7.4.7':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/ws@8.18.1':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3

  '@types/yargs-parser@21.0.3': {}

@@ -7767,7 +7830,7 @@ snapshots:

  '@types/yauzl@2.10.3':
    dependencies:
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3
    optional: true

  '@ungap/structured-clone@1.3.0': {}
@@ -8403,7 +8466,7 @@ snapshots:
  engine.io@6.6.4:
    dependencies:
      '@types/cors': 2.8.19
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3
      accepts: 1.3.8
      base64id: 2.0.0
      cookie: 0.7.2
@@ -9139,7 +9202,7 @@ snapshots:
  jest-util@29.7.0:
    dependencies:
      '@jest/types': 29.6.3
-      '@types/node': 25.0.0
+      '@types/node': 25.0.3
      chalk: 4.1.2
      ci-info: 3.9.0
      graceful-fs: 4.2.11
@@ -9348,7 +9411,7 @@ snapshots:

  lucide@0.555.0: {}

-  lucide@0.560.0: {}
+  lucide@0.562.0: {}

  make-dir@3.1.0:
    dependencies:
--- a/readme.md
+++ b/readme.md
@@ -582,78 +582,58 @@ Submit button component specifically designed for `DeesForm`.
 ### Layout Components

 #### `DeesAppuiBase`
-Base container component for application layout structure with integrated appbar, menu system, and content areas.
+A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, and view management.
+
+> **Full API Documentation**: See [ts_web/elements/00group-appui/dees-appui-base/readme.md](./ts_web/elements/00group-appui/dees-appui-base/readme.md) for complete documentation including all programmatic APIs, view lifecycle hooks, and TypeScript interfaces.
+
+**Quick Start:**

 ```typescript
-<dees-appui-base
-  // Appbar configuration
-  .appbarMenuItems=${[
-    {
-      name: 'File',
-      action: async () => {},  // No-op for parent menu items
-      submenu: [
-        { name: 'New File', shortcut: 'Cmd+N', iconName: 'file-plus', action: async () => {} },
-        { name: 'Open...', shortcut: 'Cmd+O', iconName: 'folder-open', action: async () => {} },
-        { divider: true },
-        { name: 'Save', shortcut: 'Cmd+S', iconName: 'save', action: async () => {} }
-      ]
-    },
-    {
-      name: 'Edit',
-      action: async () => {},
-      submenu: [
-        { name: 'Undo', shortcut: 'Cmd+Z', iconName: 'undo', action: async () => {} },
-        { name: 'Redo', shortcut: 'Cmd+Shift+Z', iconName: 'redo', action: async () => {} }
-      ]
-    }
-  ]}
-  .appbarBreadcrumbs=${'Dashboard > Overview'}
-  .appbarTheme=${'dark'}
-  .appbarUser=${{ name: 'John Doe', status: 'online' }}
-  .appbarShowSearch=${true}
-  .appbarShowWindowControls=${true}
-  
-  // Main menu configuration (left sidebar)
-  .mainmenuTabs=${[
-    { key: 'dashboard', iconName: 'lucide:home', action: () => {} },
-    { key: 'projects', iconName: 'lucide:folder', action: () => {} },
-    { key: 'settings', iconName: 'lucide:settings', action: () => {} }
-  ]}
-  .mainmenuSelectedTab=${selectedTab}
-  
-  // Selector configuration (second sidebar)
-  .mainselectorOptions=${[
-    { key: 'Overview', action: () => {} },
-    { key: 'Components', action: () => {} },
-    { key: 'Services', action: () => {} }
-  ]}
-  .mainselectorSelectedOption=${selectedOption}
-  
-  // Main content tabs
-  .maincontentTabs=${[
-    { key: 'tab1', iconName: 'lucide:file', action: () => {} }
-  ]}
-  
-  // Event handlers
-  @appbar-menu-select=${(e) => handleMenuSelect(e.detail)}
-  @appbar-breadcrumb-navigate=${(e) => handleBreadcrumbNav(e.detail)}
-  @appbar-search-click=${() => handleSearch()}
-  @appbar-user-menu-open=${() => handleUserMenu()}
-  @mainmenu-tab-select=${(e) => handleTabSelect(e.detail)}
-  @mainselector-option-select=${(e) => handleOptionSelect(e.detail)}
->
-  <div slot="maincontent">
-    <!-- Your main application content goes here -->
-  </div>
-</dees-appui-base>
+import { html, DeesElement, customElement } from '@design.estate/dees-element';
+import { DeesAppuiBase } from '@design.estate/dees-catalog';
+
+@customElement('my-app')
+class MyApp extends DeesElement {
+  private appui: DeesAppuiBase;
+
+  async firstUpdated() {
+    this.appui = this.shadowRoot.querySelector('dees-appui-base');
+
+    // Configure with views and menu
+    this.appui.configure({
+      branding: { logoIcon: 'lucide:box', logoText: 'My App' },
+      views: [
+        { id: 'dashboard', name: 'Dashboard', iconName: 'lucide:home', content: 'my-dashboard' },
+        { id: 'settings', name: 'Settings', iconName: 'lucide:settings', content: 'my-settings' },
+      ],
+      mainMenu: {
+        sections: [{ name: 'Main', views: ['dashboard', 'settings'] }]
+      },
+      defaultView: 'dashboard'
+    });
+  }
+
+  render() {
+    return html`<dees-appui-base></dees-appui-base>`;
+  }
+}
 ```

-Key Features:
- **Integrated Layout System**: Automatically arranges appbar, sidebars, and content area
- **Centralized Configuration**: Pass properties to all child components from one place
- **Event Propagation**: All child component events are re-emitted for easy handling
- **Responsive Grid**: Uses CSS Grid for flexible, responsive layout
- **Slot Support**: Main content area supports custom content via slots
+**Key Features:**
+- **Configure API**: Single `configure()` method for complete app setup
+- **View Management**: Automatic view caching, lazy loading, and lifecycle hooks
+- **Programmatic APIs**: Full control over AppBar, Main Menu, Secondary Menu, Content Tabs, and Activity Log
+- **View Lifecycle Hooks**: `onActivate()`, `onDeactivate()`, and `canDeactivate()` for view components
+- **Hash-based Routing**: Automatic URL synchronization with view navigation
+- **RxJS Observables**: `viewChanged$` and `viewLifecycle$` for reactive programming
+- **TypeScript-first**: Typed `IViewActivationContext` passed to views on activation
+
+**Programmatic APIs include:**
+- `navigateToView(viewId, params?)` - Navigate between views
+- `setAppBarMenus()`, `setBreadcrumbs()`, `setUser()` - Control the app bar
+- `setMainMenu()`, `setMainMenuSelection()`, `setMainMenuBadge()` - Control main navigation
+- `setSecondaryMenu()`, `setContentTabs()` - Control view-specific UI
+- `activityLog.add()`, `activityLog.addMany()`, `activityLog.clear()` - Manage activity entries

 #### `DeesAppuiMainmenu`
 Main navigation menu component for application-wide navigation.
--- a/test/test.contextmenu-demo.browser.ts
+++ b/test/test.contextmenu-demo.browser.ts
@@ -1,6 +1,6 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
-import { demoFunc } from '../ts_web/elements/dees-contextmenu.demo.js';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
+import { demoFunc } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.demo.js';

 tap.test('should render context menu demo', async () => {
  // Create demo container
--- a/test/test.contextmenu-nested-close.browser.ts
+++ b/test/test.contextmenu-nested-close.browser.ts
@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';

 tap.test('should close all parent menus when clicking action in nested submenu', async () => {
  let actionCalled = false;
--- a/test/test.contextmenu-shadowdom.browser.ts
+++ b/test/test.contextmenu-shadowdom.browser.ts
@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';
 import { DeesElement, customElement, html } from '@design.estate/dees-element';

 // Create a test element with shadow DOM
--- a/test/test.contextmenu.browser.ts
+++ b/test/test.contextmenu.browser.ts
@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';

 tap.test('should show context menu with nested submenu', async () => {
  // Create a test element with context menu items
--- a/test/test.shadow-dom-containment.browser.ts
+++ b/test/test.shadow-dom-containment.browser.ts
@@ -1,6 +1,6 @@
 import { expect, tap, webhelpers } from '@push.rocks/tapbundle';
-import { DeesWysiwygBlock } from '../ts_web/elements/wysiwyg/dees-wysiwyg-block.js';
-import { WysiwygSelection } from '../ts_web/elements/wysiwyg/wysiwyg.selection.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';
+import { WysiwygSelection } from '../ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.selection.js';

 tap.test('Shadow DOM containment should work correctly', async () => {
  console.log('=== Testing Shadow DOM Containment ===');
--- a/test/test.wysiwyg-basic.browser.ts
+++ b/test/test.wysiwyg-basic.browser.ts
@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';

 tap.test('should create wysiwyg editor', async () => {
  const editor = new DeesInputWysiwyg();
--- a/test/test.wysiwyg-blockmovement.browser.ts
+++ b/test/test.wysiwyg-blockmovement.browser.ts
@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';

 // Initialize the element
 DeesInputWysiwyg;
--- a/test/test.wysiwyg-blocks-debug.browser.ts
+++ b/test/test.wysiwyg-blocks-debug.browser.ts
@@ -1,11 +1,11 @@
 import { tap, expect, webhelpers } from '@push.rocks/tapbundle';

 import * as deesCatalog from '../ts_web/index.js';
-import { BlockRegistry } from '../ts_web/elements/wysiwyg/blocks/block.registry.js';
-import { DeesWysiwygBlock } from '../ts_web/elements/wysiwyg/dees-wysiwyg-block.js';
+import { BlockRegistry } from '../ts_web/elements/00group-input/dees-input-wysiwyg/blocks/block.registry.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';

 // Import block registration to ensure handlers are registered
-import '../ts_web/elements/wysiwyg/wysiwyg.blockregistration.js';
+import '../ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.blockregistration.js';

 tap.test('Debug: should create empty wysiwyg block component', async () => {
  try {
--- a/test/test.wysiwyg-blocks.browser.ts
+++ b/test/test.wysiwyg-blocks.browser.ts
@@ -1,11 +1,11 @@
 import { tap, expect, webhelpers } from '@push.rocks/tapbundle';

 import * as deesCatalog from '../ts_web/index.js';
-import { BlockRegistry } from '../ts_web/elements/wysiwyg/blocks/block.registry.js';
-import { DeesWysiwygBlock } from '../ts_web/elements/wysiwyg/dees-wysiwyg-block.js';
+import { BlockRegistry } from '../ts_web/elements/00group-input/dees-input-wysiwyg/blocks/block.registry.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';

 // Import block registration to ensure handlers are registered
-import '../ts_web/elements/wysiwyg/wysiwyg.blockregistration.js';
+import '../ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.blockregistration.js';

 tap.test('BlockRegistry should have registered handlers', async () => {
  // Test divider handler
--- a/test/test.wysiwyg-blocktype-change.browser.ts
+++ b/test/test.wysiwyg-blocktype-change.browser.ts
@@ -1,6 +1,6 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';

 tap.test('should change block type via context menu', async () => {
  // Create WYSIWYG editor with a paragraph
--- a/test/test.wysiwyg-contextmenu.browser.ts
+++ b/test/test.wysiwyg-contextmenu.browser.ts
@@ -1,6 +1,6 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
-import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu/dees-contextmenu.js';

 tap.test('should show context menu on WYSIWYG blocks', async () => {
  // Create WYSIWYG editor
--- a/test/test.wysiwyg-dragdrop-simple.browser.ts
+++ b/test/test.wysiwyg-dragdrop-simple.browser.ts
@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';

 // Initialize the element
 DeesInputWysiwyg;
--- a/test/test.wysiwyg-dragdrop-visual.browser.ts
+++ b/test/test.wysiwyg-dragdrop-visual.browser.ts
@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';

 // Initialize the element
 DeesInputWysiwyg;
--- a/test/test.wysiwyg-dragdrop.browser.ts
+++ b/test/test.wysiwyg-dragdrop.browser.ts
@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';

 // Initialize the element
 DeesInputWysiwyg;
--- a/test/test.wysiwyg-dragissue.browser.ts
+++ b/test/test.wysiwyg-dragissue.browser.ts
@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';

 // Initialize the element
 DeesInputWysiwyg;
--- a/test/test.wysiwyg-dropindicator.browser.ts
+++ b/test/test.wysiwyg-dropindicator.browser.ts
@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';

 // Initialize the element
 DeesInputWysiwyg;
--- a/test/test.wysiwyg-eventlisteners.browser.ts
+++ b/test/test.wysiwyg-eventlisteners.browser.ts
@@ -1,5 +1,5 @@
 import { expect, tap } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';

 // Initialize the element
 DeesInputWysiwyg;
--- a/test/test.wysiwyg-keyboard.browser.ts
+++ b/test/test.wysiwyg-keyboard.browser.ts
@@ -1,6 +1,6 @@
 import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
-import { DeesWysiwygBlock } from '../ts_web/elements/wysiwyg/dees-wysiwyg-block.js';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';

 tap.test('Keyboard: Arrow navigation between blocks', async () => {
  const editor: DeesInputWysiwyg = await webhelpers.fixture(
--- a/test/test.wysiwyg-phase3.browser.ts
+++ b/test/test.wysiwyg-phase3.browser.ts
@@ -1,6 +1,6 @@
 import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
-import { DeesWysiwygBlock } from '../ts_web/elements/wysiwyg/dees-wysiwyg-block.js';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';

 tap.test('Phase 3: Quote block should render and work correctly', async () => {
  const editor: DeesInputWysiwyg = await webhelpers.fixture(
--- a/test/test.wysiwyg-registry.both.ts
+++ b/test/test.wysiwyg-registry.both.ts
@@ -1,12 +1,12 @@
 import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';

-import { BlockRegistry } from '../ts_web/elements/wysiwyg/blocks/block.registry.js';
-import { DividerBlockHandler } from '../ts_web/elements/wysiwyg/blocks/content/divider.block.js';
-import { ParagraphBlockHandler } from '../ts_web/elements/wysiwyg/blocks/text/paragraph.block.js';
-import { HeadingBlockHandler } from '../ts_web/elements/wysiwyg/blocks/text/heading.block.js';
+import { BlockRegistry } from '../ts_web/elements/00group-input/dees-input-wysiwyg/blocks/block.registry.js';
+import { DividerBlockHandler } from '../ts_web/elements/00group-input/dees-input-wysiwyg/blocks/content/divider.block.js';
+import { ParagraphBlockHandler } from '../ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/paragraph.block.js';
+import { HeadingBlockHandler } from '../ts_web/elements/00group-input/dees-input-wysiwyg/blocks/text/heading.block.js';

 // Import block registration to ensure handlers are registered
-import '../ts_web/elements/wysiwyg/wysiwyg.blockregistration.js';
+import '../ts_web/elements/00group-input/dees-input-wysiwyg/wysiwyg.blockregistration.js';

 tap.test('BlockRegistry should register and retrieve handlers', async () => {
  // Test divider handler
--- a/test/test.wysiwyg-selection-highlight.browser.ts
+++ b/test/test.wysiwyg-selection-highlight.browser.ts
@@ -1,6 +1,6 @@
 import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
-import { DeesWysiwygBlock } from '../ts_web/elements/wysiwyg/dees-wysiwyg-block.js';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';

 tap.test('Selection highlighting should work consistently for all block types', async () => {
  const editor: DeesInputWysiwyg = await webhelpers.fixture(
--- a/test/test.wysiwyg-selection-simple.browser.ts
+++ b/test/test.wysiwyg-selection-simple.browser.ts
@@ -1,6 +1,6 @@
 import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
-import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
-import { DeesWysiwygBlock } from '../ts_web/elements/wysiwyg/dees-wysiwyg-block.js';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';

 tap.test('Selection highlighting basic test', async () => {
  const editor: DeesInputWysiwyg = await webhelpers.fixture(
--- a/test/test.wysiwyg-split.browser.ts
+++ b/test/test.wysiwyg-split.browser.ts
@@ -1,7 +1,7 @@
 import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';

-import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
-import { DeesWysiwygBlock } from '../ts_web/elements/wysiwyg/dees-wysiwyg-block.js';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesWysiwygBlock } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-wysiwyg-block.js';

 tap.test('should split paragraph content on Enter key', async () => {
  // Create the wysiwyg editor
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-catalog',
-  version: '3.3.1',
+  version: '3.4.0',
  description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }
--- a/ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts
+++ b/ts_web/elements/00group-appui/dees-appui-activitylog/dees-appui-activitylog.ts
@@ -1,4 +1,3 @@
-import * as plugins from '../../00plugins.js';
 import {
  DeesElement,
  type TemplateResult,
@@ -7,32 +6,74 @@ import {
  html,
  css,
  cssManager,
+  state,
 } from '@design.estate/dees-element';

 import * as domtools from '@design.estate/dees-domtools';
 import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
 import '../../dees-icon/dees-icon.js';
+import '@design.estate/dees-wcctools/demotools';
+import type { IActivityEntry, IActivityLogAPI } from '../../interfaces/appconfig.js';

@customElement('dees-appui-activitylog')
-export class DeesAppuiActivitylog extends DeesElement {
+export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI {
  // STATIC
-  public static demo = () => html`
-    <style>
-      .demo-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 600px;
-        background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
-        padding: 32px;
-      }
-    </style>
-    <div class="demo-container">
-      <dees-appui-activitylog></dees-appui-activitylog>
-    </div>
-  `;
+  public static demo = () => {
+    // Create the activity log element
+    const activityLog = document.createElement('dees-appui-activitylog') as DeesAppuiActivitylog;

-  // INSTANCE
+    // Add demo entries after the element is connected
+    setTimeout(() => {
+      activityLog.addMany([
+        { type: 'login', user: 'John Doe', message: 'logged in from Chrome on macOS' },
+        { type: 'create', user: 'John Doe', message: 'created a new project "Frontend App"' },
+        { type: 'update', user: 'Jane Smith', message: 'updated API documentation' },
+        { type: 'view', user: 'John Doe', message: 'viewed dashboard analytics' },
+        { type: 'delete', user: 'Admin', message: 'removed deprecated endpoint' },
+        { type: 'custom', user: 'System', message: 'scheduled backup completed', iconName: 'lucide:database' },
+        { type: 'logout', user: 'Alice Brown', message: 'logged out' },
+        { type: 'create', user: 'Jane Smith', message: 'created invoice #1234' },
+      ]);
+
+      // Subscribe to updates
+      activityLog.entries$.subscribe((entries) => {
+        console.log('Activity log updated:', entries.length, 'entries');
+      });
+    }, 100);
+
+    return html`
+      <dees-demowrapper>
+        <style>
+          .demo-container {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 600px;
+            background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
+            padding: 32px;
+          }
+        </style>
+        <div class="demo-container">
+          ${activityLog}
+        </div>
+      </dees-demowrapper>
+    `;
+  };
+
+  // INSTANCE PROPERTIES
+  @state()
+  accessor entries: IActivityEntry[] = [];
+
+  @state()
+  accessor searchQuery: string = '';
+
+  @state()
+  accessor filterCriteria: { user?: string; type?: IActivityEntry['type'] } = {};
+
+  // RxJS Subject for reactive updates
+  public entries$ = new domtools.plugins.smartrx.rxjs.Subject<IActivityEntry[]>();
+
+  // STYLES
  public static styles = [
    cssManager.defaultStyles,
    css`
@@ -90,24 +131,32 @@ export class DeesAppuiActivitylog extends DeesElement {
        scrollbar-width: thin;
        scrollbar-color: ${cssManager.bdTheme('#e5e7eb', '#27272a')} transparent;
      }
-      
+
      .activityContainer::-webkit-scrollbar {
        width: 6px;
      }
-      
+
      .activityContainer::-webkit-scrollbar-track {
        background: transparent;
      }
-      
+
      .activityContainer::-webkit-scrollbar-thumb {
        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
        border-radius: 3px;
      }
-      
+
      .activityContainer::-webkit-scrollbar-thumb:hover {
        background: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
      }

+      .empty-state {
+        font-size: 13px;
+        text-align: center;
+        padding: 32px 16px;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        font-family: 'Geist Sans', sans-serif;
+      }
+
      .streamingIndicator {
        font-size: 11px;
        text-align: center;
@@ -122,7 +171,7 @@ export class DeesAppuiActivitylog extends DeesElement {
        justify-content: center;
        gap: 8px;
      }
-      
+
      .streamingIndicator::before {
        content: '';
        width: 6px;
@@ -131,15 +180,24 @@ export class DeesAppuiActivitylog extends DeesElement {
        border-radius: 50%;
        animation: pulse 2s ease-in-out infinite;
      }
-      
+
      @keyframes pulse {
        0%, 100% { opacity: 0.4; transform: scale(0.8); }
        50% { opacity: 1; transform: scale(1.2); }
      }

-      .streamingIndicator.bottom {
-        padding-top: 8px;
-        padding-bottom: 16px;
+      .date-separator {
+        padding: 12px 16px 8px;
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        background: ${cssManager.bdTheme('#f9fafb', '#09090b')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        position: sticky;
+        top: 0;
+        z-index: 1;
      }

      .activityentry {
@@ -154,7 +212,7 @@ export class DeesAppuiActivitylog extends DeesElement {
        line-height: 1.4;
        animation: fadeIn 0.3s ease-out;
      }
-      
+
      @keyframes fadeIn {
        from {
          opacity: 0;
@@ -182,7 +240,7 @@ export class DeesAppuiActivitylog extends DeesElement {
        flex-shrink: 0;
        min-width: 45px;
      }
-      
+
      .activity-icon {
        width: 28px;
        height: 28px;
@@ -194,55 +252,51 @@ export class DeesAppuiActivitylog extends DeesElement {
        flex-shrink: 0;
        font-size: 14px;
      }
-      
+
      .activity-icon.login {
        background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.1)', 'rgba(34, 197, 94, 0.1)')};
        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
      }
-      
+
      .activity-icon.logout {
        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.1)', 'rgba(239, 68, 68, 0.1)')};
        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
      }
-      
+
      .activity-icon.view {
        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
        color: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
      }
-      
+
      .activity-icon.create {
        background: ${cssManager.bdTheme('rgba(168, 85, 247, 0.1)', 'rgba(168, 85, 247, 0.1)')};
        color: ${cssManager.bdTheme('#9333ea', '#a855f7')};
      }
-      
+
      .activity-icon.update {
        background: ${cssManager.bdTheme('rgba(251, 146, 60, 0.1)', 'rgba(251, 146, 60, 0.1)')};
        color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
      }
-      
+
+      .activity-icon.delete {
+        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.1)', 'rgba(239, 68, 68, 0.1)')};
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+
+      .activity-icon.custom {
+        background: ${cssManager.bdTheme('rgba(100, 116, 139, 0.1)', 'rgba(100, 116, 139, 0.1)')};
+        color: ${cssManager.bdTheme('#475569', '#94a3b8')};
+      }
+
      .activity-text {
        flex: 1;
        color: ${cssManager.bdTheme('#18181b', '#e4e4e7')};
      }
-      
+
      .activity-user {
        font-weight: 600;
        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
      }
-      
-      .date-separator {
-        padding: 12px 16px 8px;
-        font-size: 11px;
-        font-weight: 600;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
-        background: ${cssManager.bdTheme('#f9fafb', '#09090b')};
-        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#18181b')};
-        position: sticky;
-        top: 0;
-        z-index: 1;
-      }

      .searchbox {
        position: absolute;
@@ -253,13 +307,13 @@ export class DeesAppuiActivitylog extends DeesElement {
        border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
        padding: 8px;
      }
-      
+
      .search-wrapper {
        position: relative;
        width: 100%;
        height: 32px;
      }
-      
+
      .search-icon {
        position: absolute;
        left: 10px;
@@ -270,7 +324,7 @@ export class DeesAppuiActivitylog extends DeesElement {
        pointer-events: none;
        transition: color 0.15s ease;
      }
-      
+
      .searchbox input {
        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
@@ -293,7 +347,7 @@ export class DeesAppuiActivitylog extends DeesElement {
        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
        box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
      }
-      
+
      .searchbox input:focus ~ .search-icon,
      .search-wrapper:has(input:focus) .search-icon {
        color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
@@ -311,7 +365,7 @@ export class DeesAppuiActivitylog extends DeesElement {
        pointer-events: none;
        opacity: 0.8;
      }
-      
+
      .topShadow {
        position: absolute;
        width: 100%;
@@ -327,7 +381,11 @@ export class DeesAppuiActivitylog extends DeesElement {
    `,
  ];

+  // RENDER
  public render(): TemplateResult {
+    const filteredEntries = this.getFilteredEntries();
+    const groupedEntries = this.groupEntriesByDate(filteredEntries);
+
    return html`
      ${domtools.elementBasic.styles}
      <style></style>
@@ -336,173 +394,28 @@ export class DeesAppuiActivitylog extends DeesElement {
          <div class="heading">Activity Log</div>
        </div>
        <div class="activityContainer">
-          <div class="streamingIndicator">Live Updates</div>
-          
-          <div class="date-separator">Today</div>
-          
-          <div class="activityentry" @contextmenu=${async eventArg => {
-            DeesContextmenu.openContextMenuWithOptions(eventArg, [
-              {
-                name: 'Copy activity',
-                action: async () => {},
-              },
-              {
-                name: 'View details',
-                action: async () => {},
-              },
-              {
-                name: 'Filter by user',
-                action: async () => {},
-              },
-            ]);
-          }}>
-            <span class="timestamp">22:20</span>
-            <div class="activity-icon logout">
-              <dees-icon .icon=${'lucide:logOut'}></dees-icon>
-            </div>
-            <div class="activity-text">
-              <span class="activity-user">Max Mustermann</span> logged out
-            </div>
-          </div>
-          
-          <div class="activityentry">
-            <span class="timestamp">22:19</span>
-            <div class="activity-icon update">
-              <dees-icon .icon=${'lucide:checkCircle'}></dees-icon>
-            </div>
-            <div class="activity-text">
-              <span class="activity-user">Max Mustermann</span> approved a payment
-            </div>
-          </div>
-          
-          <div class="activityentry">
-            <span class="timestamp">22:18</span>
-            <div class="activity-icon view">
-              <dees-icon .icon=${'lucide:archive'}></dees-icon>
-            </div>
-            <div class="activity-text">
-              <span class="activity-user">Max Mustermann</span> archived an invoice
-            </div>
-          </div>
-          
-          <div class="activityentry">
-            <span class="timestamp">22:17</span>
-            <div class="activity-icon login">
-              <dees-icon .icon=${'lucide:logIn'}></dees-icon>
-            </div>
-            <div class="activity-text">
-              <span class="activity-user">Max Mustermann</span> logged in
-            </div>
-          </div>
-          
-          <div class="activityentry">
-            <span class="timestamp">22:16</span>
-            <div class="activity-icon logout">
-              <dees-icon .icon=${'lucide:logOut'}></dees-icon>
-            </div>
-            <div class="activity-text">
-              <span class="activity-user">Max Mustermann</span> logged out
-            </div>
-          </div>
-          
-          <div class="activityentry">
-            <span class="timestamp">22:15</span>
-            <div class="activity-icon update">
-              <dees-icon .icon=${'lucide:key'}></dees-icon>
-            </div>
-            <div class="activity-text">
-              <span class="activity-user">Max Mustermann</span> changed password
-            </div>
-          </div>
-          
-          <div class="activityentry">
-            <span class="timestamp">22:14</span>
-            <div class="activity-icon create">
-              <dees-icon .icon=${'lucide:userPlus'}></dees-icon>
-            </div>
-            <div class="activity-text">
-              <span class="activity-user">Max Mustermann</span> added a new user
-            </div>
-          </div>
-          
-          <div class="activityentry">
-            <span class="timestamp">22:13</span>
-            <div class="activity-icon view">
-              <dees-icon .icon=${'lucide:messageCircle'}></dees-icon>
-            </div>
-            <div class="activity-text">
-              <span class="activity-user">Max Mustermann</span> contacted support
-            </div>
-          </div>
-          
-          <div class="date-separator">Yesterday</div>
-          
-          <div class="activityentry">
-            <span class="timestamp">18:45</span>
-            <div class="activity-icon update">
-              <dees-icon .icon=${'lucide:trash2'}></dees-icon>
-            </div>
-            <div class="activity-text">
-              <span class="activity-user">Max Mustermann</span> deleted an invoice
-            </div>
-          </div>
-          
-          <div class="activityentry">
-            <span class="timestamp">17:30</span>
-            <div class="activity-icon login">
-              <dees-icon .icon=${'lucide:logIn'}></dees-icon>
-            </div>
-            <div class="activity-text">
-              <span class="activity-user">Max Mustermann</span> logged in
-            </div>
-          </div>
-          
-          <div class="activityentry">
-            <span class="timestamp">16:15</span>
-            <div class="activity-icon logout">
-              <dees-icon .icon=${'lucide:logOut'}></dees-icon>
-            </div>
-            <div class="activity-text">
-              <span class="activity-user">Max Mustermann</span> logged out
-            </div>
-          </div>
-          
-          <div class="activityentry">
-            <span class="timestamp">14:20</span>
-            <div class="activity-icon view">
-              <dees-icon .icon=${'lucide:barChart'}></dees-icon>
-            </div>
-            <div class="activity-text">
-              <span class="activity-user">Max Mustermann</span> viewed reports
-            </div>
-          </div>
-          
-          <div class="activityentry">
-            <span class="timestamp">13:45</span>
-            <div class="activity-icon create">
-              <dees-icon .icon=${'lucide:send'}></dees-icon>
-            </div>
-            <div class="activity-text">
-              <span class="activity-user">Max Mustermann</span> sent an invoice
-            </div>
-          </div>
-          
-          <div class="activityentry">
-            <span class="timestamp">13:30</span>
-            <div class="activity-icon create">
-              <dees-icon .icon=${'lucide:filePlus'}></dees-icon>
-            </div>
-            <div class="activity-text">
-              <span class="activity-user">Max Mustermann</span> created a new invoice
-            </div>
-          </div>
-          
-          <div class="streamingIndicator bottom">Loading History</div>
+          ${filteredEntries.length > 0
+            ? html`<div class="streamingIndicator">Live Updates</div>`
+            : ''}
+
+          ${filteredEntries.length === 0
+            ? html`<div class="empty-state">No activity entries</div>`
+            : groupedEntries.map(
+                (group) => html`
+                  <div class="date-separator">${group.label}</div>
+                  ${group.entries.map((entry) => this.renderActivityEntry(entry))}
+                `
+              )}
        </div>
        <div class="searchbox">
          <div class="search-wrapper">
            <dees-icon class="search-icon" .icon=${'lucide:search'}></dees-icon>
-            <input type="text" placeholder="Search activities, users..." />
+            <input
+              type="text"
+              placeholder="Search activities, users..."
+              .value=${this.searchQuery}
+              @input=${this.handleSearchInput}
+            />
          </div>
        </div>
        <div class="topShadow"></div>
@@ -510,4 +423,205 @@ export class DeesAppuiActivitylog extends DeesElement {
      </div>
    `;
  }
+
+  private renderActivityEntry(entry: IActivityEntry): TemplateResult {
+    const timestamp = entry.timestamp || new Date();
+    const timeStr = this.formatTime(timestamp);
+    const iconName = entry.iconName || this.getIconForType(entry.type);
+
+    return html`
+      <div
+        class="activityentry"
+        @contextmenu=${(e: MouseEvent) => this.handleContextMenu(e, entry)}
+      >
+        <span class="timestamp">${timeStr}</span>
+        <div class="activity-icon ${entry.type}">
+          <dees-icon .icon=${iconName}></dees-icon>
+        </div>
+        <div class="activity-text">
+          <span class="activity-user">${entry.user}</span> ${entry.message}
+        </div>
+      </div>
+    `;
+  }
+
+  // API METHODS
+  public add(entry: IActivityEntry): void {
+    const newEntry: IActivityEntry = {
+      ...entry,
+      id: entry.id || this.generateId(),
+      timestamp: entry.timestamp || new Date(),
+    };
+    this.entries = [newEntry, ...this.entries];
+    this.entries$.next(this.entries);
+  }
+
+  public addMany(entries: IActivityEntry[]): void {
+    const newEntries = entries.map((entry) => ({
+      ...entry,
+      id: entry.id || this.generateId(),
+      timestamp: entry.timestamp || new Date(),
+    }));
+    this.entries = [...newEntries.reverse(), ...this.entries];
+    this.entries$.next(this.entries);
+  }
+
+  public clear(): void {
+    this.entries = [];
+    this.entries$.next(this.entries);
+  }
+
+  public getEntries(): IActivityEntry[] {
+    return [...this.entries];
+  }
+
+  public filter(criteria: { user?: string; type?: IActivityEntry['type'] }): IActivityEntry[] {
+    return this.entries.filter((entry) => {
+      if (criteria.user && entry.user !== criteria.user) return false;
+      if (criteria.type && entry.type !== criteria.type) return false;
+      return true;
+    });
+  }
+
+  public search(query: string): IActivityEntry[] {
+    const lowerQuery = query.toLowerCase();
+    return this.entries.filter(
+      (entry) =>
+        entry.message.toLowerCase().includes(lowerQuery) ||
+        entry.user.toLowerCase().includes(lowerQuery)
+    );
+  }
+
+  // PRIVATE HELPERS
+  private generateId(): string {
+    return `activity-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  private getFilteredEntries(): IActivityEntry[] {
+    let result = this.entries;
+
+    if (this.searchQuery) {
+      const lowerQuery = this.searchQuery.toLowerCase();
+      result = result.filter(
+        (entry) =>
+          entry.message.toLowerCase().includes(lowerQuery) ||
+          entry.user.toLowerCase().includes(lowerQuery)
+      );
+    }
+
+    if (this.filterCriteria.user || this.filterCriteria.type) {
+      result = result.filter((entry) => {
+        if (this.filterCriteria.user && entry.user !== this.filterCriteria.user) return false;
+        if (this.filterCriteria.type && entry.type !== this.filterCriteria.type) return false;
+        return true;
+      });
+    }
+
+    return result;
+  }
+
+  private groupEntriesByDate(
+    entries: IActivityEntry[]
+  ): Array<{ label: string; entries: IActivityEntry[] }> {
+    const groups: Map<string, IActivityEntry[]> = new Map();
+    const today = new Date();
+    const yesterday = new Date(today);
+    yesterday.setDate(yesterday.getDate() - 1);
+
+    for (const entry of entries) {
+      const date = entry.timestamp || new Date();
+      let label: string;
+
+      if (this.isSameDay(date, today)) {
+        label = 'Today';
+      } else if (this.isSameDay(date, yesterday)) {
+        label = 'Yesterday';
+      } else {
+        label = date.toLocaleDateString('en-US', {
+          month: 'short',
+          day: 'numeric',
+          year: date.getFullYear() !== today.getFullYear() ? 'numeric' : undefined,
+        });
+      }
+
+      if (!groups.has(label)) {
+        groups.set(label, []);
+      }
+      groups.get(label)!.push(entry);
+    }
+
+    return Array.from(groups.entries()).map(([label, entries]) => ({
+      label,
+      entries,
+    }));
+  }
+
+  private isSameDay(date1: Date, date2: Date): boolean {
+    return (
+      date1.getFullYear() === date2.getFullYear() &&
+      date1.getMonth() === date2.getMonth() &&
+      date1.getDate() === date2.getDate()
+    );
+  }
+
+  private formatTime(date: Date): string {
+    return date.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    });
+  }
+
+  private getIconForType(type: IActivityEntry['type']): string {
+    const icons: Record<IActivityEntry['type'], string> = {
+      login: 'lucide:logIn',
+      logout: 'lucide:logOut',
+      view: 'lucide:eye',
+      create: 'lucide:plus',
+      update: 'lucide:edit',
+      delete: 'lucide:trash2',
+      custom: 'lucide:activity',
+    };
+    return icons[type] || icons.custom;
+  }
+
+  private handleSearchInput(e: InputEvent): void {
+    const target = e.target as HTMLInputElement;
+    this.searchQuery = target.value;
+  }
+
+  private handleContextMenu(e: MouseEvent, entry: IActivityEntry): void {
+    e.preventDefault();
+    DeesContextmenu.openContextMenuWithOptions(e, [
+      {
+        name: 'Copy activity',
+        iconName: 'lucide:copy',
+        action: async () => {
+          await navigator.clipboard.writeText(`${entry.user} ${entry.message}`);
+        },
+      },
+      {
+        name: 'Filter by user',
+        iconName: 'lucide:user',
+        action: async () => {
+          this.filterCriteria = { user: entry.user };
+        },
+      },
+      {
+        name: 'Filter by type',
+        iconName: 'lucide:filter',
+        action: async () => {
+          this.filterCriteria = { type: entry.type };
+        },
+      },
+      {
+        name: 'Clear filters',
+        iconName: 'lucide:x',
+        action: async () => {
+          this.filterCriteria = {};
+          this.searchQuery = '';
+        },
+      },
+    ]);
+  }
 }
--- a/ts_web/elements/00group-appui/dees-appui-base/app.router.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/app.router.ts
@@ -1,271 +0,0 @@
-import type { IRoutingConfig, IViewDefinition } from '../../interfaces/appconfig.js';
-import type { ViewRegistry } from './view.registry.js';
-
-export type TRouteChangeCallback = (viewId: string, params?: Record<string, string>) => void;
-
-/**
- * Router for managing view navigation and URL synchronization
- */
-export class AppRouter {
-  private config: Required<Omit<IRoutingConfig, 'notFound'>> & Pick<IRoutingConfig, 'notFound'>;
-  private viewRegistry: ViewRegistry;
-  private listeners: Set<TRouteChangeCallback> = new Set();
-  private currentViewId: string | null = null;
-  private isInitialized: boolean = false;
-
-  constructor(config: IRoutingConfig, viewRegistry: ViewRegistry) {
-    this.config = {
-      mode: config.mode,
-      basePath: config.basePath || '',
-      defaultView: config.defaultView || '',
-      syncUrl: config.syncUrl ?? true,
-      notFound: config.notFound,
-    };
-    this.viewRegistry = viewRegistry;
-  }
-
-  /**
-   * Initialize the router
-   */
-  public init(): void {
-    if (this.isInitialized) return;
-
-    if (this.config.mode === 'hash') {
-      window.addEventListener('hashchange', this.handleHashChange);
-      // Check initial hash
-      const initialView = this.getViewFromHash();
-      if (initialView) {
-        this.navigate(initialView, { source: 'initial' });
-      } else if (this.config.defaultView) {
-        this.navigate(this.config.defaultView, { source: 'initial' });
-      }
-    } else if (this.config.mode === 'history') {
-      window.addEventListener('popstate', this.handlePopState);
-      // Check initial path
-      const initialView = this.getViewFromPath();
-      if (initialView) {
-        this.navigate(initialView, { source: 'initial' });
-      } else if (this.config.defaultView) {
-        this.navigate(this.config.defaultView, { source: 'initial' });
-      }
-    } else if (this.config.mode === 'none' && this.config.defaultView) {
-      this.navigate(this.config.defaultView, { source: 'initial' });
-    }
-    // For 'external' mode, we don't set up listeners - the external router handles it
-
-    this.isInitialized = true;
-  }
-
-  /**
-   * Navigate to a view by ID
-   */
-  public navigate(
-    viewId: string,
-    options: {
-      source?: 'navigation' | 'popstate' | 'initial' | 'programmatic';
-      replace?: boolean;
-      params?: Record<string, string>;
-    } = {}
-  ): boolean {
-    const { source = 'programmatic', replace = false, params } = options;
-
-    const view = this.viewRegistry.get(viewId);
-    if (!view) {
-      console.warn(`Cannot navigate to unknown view: ${viewId}`);
-      if (this.config.notFound) {
-        if (typeof this.config.notFound === 'function') {
-          this.config.notFound();
-        } else {
-          return this.navigate(this.config.notFound, { source, replace: true });
-        }
-      }
-      return false;
-    }
-
-    const previousViewId = this.currentViewId;
-    this.currentViewId = viewId;
-
-    // Update URL if configured
-    if (this.config.syncUrl && this.config.mode !== 'none' && this.config.mode !== 'external') {
-      this.updateUrl(view, replace);
-    }
-
-    // Notify listeners
-    this.notifyListeners(viewId, params);
-
-    return true;
-  }
-
-  /**
-   * Navigate back in history
-   */
-  public back(): void {
-    if (this.config.mode === 'hash' || this.config.mode === 'history') {
-      window.history.back();
-    }
-  }
-
-  /**
-   * Navigate forward in history
-   */
-  public forward(): void {
-    if (this.config.mode === 'hash' || this.config.mode === 'history') {
-      window.history.forward();
-    }
-  }
-
-  /**
-   * Get current view ID
-   */
-  public getCurrentViewId(): string | null {
-    return this.currentViewId;
-  }
-
-  /**
-   * Add a route change listener
-   */
-  public onRouteChange(callback: TRouteChangeCallback): () => void {
-    this.listeners.add(callback);
-    return () => this.listeners.delete(callback);
-  }
-
-  /**
-   * Handle external navigation (for external router mode)
-   */
-  public handleExternalNavigation(viewId: string, params?: Record<string, string>): void {
-    if (this.config.mode !== 'external') {
-      console.warn('handleExternalNavigation should only be used in external mode');
-    }
-
-    const previousViewId = this.currentViewId;
-    this.currentViewId = viewId;
-    this.notifyListeners(viewId, params);
-  }
-
-  /**
-   * Sync state with URL (for external router integration)
-   */
-  public syncWithUrl(): string | null {
-    if (this.config.mode === 'hash') {
-      return this.getViewFromHash();
-    } else if (this.config.mode === 'history') {
-      return this.getViewFromPath();
-    }
-    return null;
-  }
-
-  /**
-   * Get the current route from the URL
-   */
-  public getCurrentRoute(): string {
-    if (this.config.mode === 'hash') {
-      return window.location.hash.slice(1) || '';
-    } else if (this.config.mode === 'history') {
-      let path = window.location.pathname;
-      if (this.config.basePath && path.startsWith(this.config.basePath)) {
-        path = path.slice(this.config.basePath.length);
-      }
-      return path.replace(/^\//, '');
-    }
-    return '';
-  }
-
-  /**
-   * Build a URL for a view
-   */
-  public buildUrl(viewId: string): string {
-    const view = this.viewRegistry.get(viewId);
-    const route = view?.route || viewId;
-
-    if (this.config.mode === 'hash') {
-      return `#${route}`;
-    } else if (this.config.mode === 'history') {
-      return `${this.config.basePath}/${route}`;
-    }
-    return '';
-  }
-
-  /**
-   * Destroy the router
-   */
-  public destroy(): void {
-    if (this.config.mode === 'hash') {
-      window.removeEventListener('hashchange', this.handleHashChange);
-    } else if (this.config.mode === 'history') {
-      window.removeEventListener('popstate', this.handlePopState);
-    }
-    this.listeners.clear();
-    this.isInitialized = false;
-  }
-
-  // Private methods
-
-  private handleHashChange = (): void => {
-    const viewId = this.getViewFromHash();
-    if (viewId && viewId !== this.currentViewId) {
-      this.navigate(viewId, { source: 'popstate' });
-    }
-  };
-
-  private handlePopState = (): void => {
-    const viewId = this.getViewFromPath();
-    if (viewId && viewId !== this.currentViewId) {
-      this.navigate(viewId, { source: 'popstate' });
-    }
-  };
-
-  private getViewFromHash(): string | null {
-    const hash = window.location.hash.slice(1); // Remove #
-    if (!hash) return null;
-
-    // Try to find view by route
-    const view = this.viewRegistry.findByRoute(hash);
-    return view?.id || null;
-  }
-
-  private getViewFromPath(): string | null {
-    let path = window.location.pathname;
-
-    // Remove base path if configured
-    if (this.config.basePath) {
-      if (path.startsWith(this.config.basePath)) {
-        path = path.slice(this.config.basePath.length);
-      }
-    }
-
-    // Remove leading slash
-    path = path.replace(/^\//, '');
-
-    if (!path) return null;
-
-    const view = this.viewRegistry.findByRoute(path);
-    return view?.id || null;
-  }
-
-  private updateUrl(view: IViewDefinition, replace: boolean): void {
-    const route = view.route || view.id;
-
-    if (this.config.mode === 'hash') {
-      const newHash = `#${route}`;
-      if (replace) {
-        window.history.replaceState(null, '', newHash);
-      } else {
-        window.history.pushState(null, '', newHash);
-      }
-    } else if (this.config.mode === 'history') {
-      const basePath = this.config.basePath || '';
-      const newPath = `${basePath}/${route}`;
-      if (replace) {
-        window.history.replaceState({ viewId: view.id }, '', newPath);
-      } else {
-        window.history.pushState({ viewId: view.id }, '', newPath);
-      }
-    }
-  }
-
-  private notifyListeners(viewId: string, params?: Record<string, string>): void {
-    for (const listener of this.listeners) {
-      listener(viewId, params);
-    }
-  }
-}
--- a/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.demo.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.demo.ts
@@ -1,238 +1,608 @@
-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 { html, css, DeesElement, customElement, state } from '@design.estate/dees-element';
+import type { DeesAppuiBase } from './dees-appui-base.js';
+import type { IAppConfig, IViewActivationContext } from '../../interfaces/appconfig.js';
 import '@design.estate/dees-wcctools/demotools';

+// Demo view component with lifecycle hooks
+@customElement('demo-dashboard-view')
+class DemoDashboardView extends DeesElement {
+  @state()
+  accessor activated: boolean = false;
+
+  onActivate(context: IViewActivationContext) {
+    this.activated = true;
+    console.log('Dashboard activated with context:', context);
+
+    // Set view-specific secondary menu
+    context.appui.setSecondaryMenu({
+      heading: 'Dashboard',
+      groups: [
+        {
+          name: 'Quick Access',
+          iconName: 'lucide:zap',
+          items: [
+            { key: 'overview', iconName: 'layoutDashboard', action: () => console.log('Overview') },
+            { key: 'recent', iconName: 'clock', badge: 5, action: () => console.log('Recent') },
+          ]
+        },
+        {
+          name: 'Analytics',
+          iconName: 'lucide:barChart3',
+          items: [
+            { key: 'metrics', iconName: 'activity', action: () => console.log('Metrics') },
+            { key: 'reports', iconName: 'fileText', badge: 'new', badgeVariant: 'success', action: () => console.log('Reports') },
+          ]
+        }
+      ]
+    });
+
+    // Set content tabs for dashboard
+    context.appui.setContentTabs([
+      { key: 'Overview', iconName: 'lucide:layoutDashboard', action: () => console.log('Overview tab') },
+      { key: 'Analytics', iconName: 'lucide:barChart', action: () => console.log('Analytics tab') },
+      { key: 'Reports', iconName: 'lucide:fileText', action: () => console.log('Reports tab') },
+    ]);
+  }
+
+  onDeactivate() {
+    this.activated = false;
+    console.log('Dashboard deactivated');
+  }
+
+  render() {
+    return html`
+      <style>
+        :host {
+          display: block;
+          padding: 40px;
+          color: #a3a3a3;
+          font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
+        }
+        h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 8px; }
+        p { color: #737373; margin-bottom: 32px; }
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(3, 1fr);
+          gap: 16px;
+        }
+        .card {
+          background: rgba(255,255,255,0.03);
+          border: 1px solid rgba(255,255,255,0.08);
+          border-radius: 8px;
+          padding: 20px;
+        }
+        .card h3 { color: #fafafa; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
+        .metric { font-size: 32px; font-weight: 700; color: #fafafa; }
+        .status { display: inline-block; padding: 2px 8px; border-radius: 9px; font-size: 12px; }
+        .status.active { background: #14532d; color: #4ade80; }
+      </style>
+      <h1>Dashboard</h1>
+      <p>Welcome back! Here's an overview of your system.</p>
+      <div class="grid">
+        <div class="card">
+          <h3>Active Users</h3>
+          <div class="metric">1,234</div>
+          <span class="status active">Online</span>
+        </div>
+        <div class="card">
+          <h3>API Calls</h3>
+          <div class="metric">45.2K</div>
+          <p style="color: #4ade80; font-size: 12px; margin: 0;">+12% from last hour</p>
+        </div>
+        <div class="card">
+          <h3>System Health</h3>
+          <div class="metric">99.9%</div>
+          <p style="color: #737373; font-size: 12px; margin: 0;">All systems operational</p>
+        </div>
+      </div>
+    `;
+  }
+}
+
+// Settings view with route params and canDeactivate guard
+@customElement('demo-settings-view')
+class DemoSettingsView extends DeesElement {
+  @state()
+  accessor section: string = 'general';
+
+  @state()
+  accessor hasChanges: boolean = false;
+
+  private appui: DeesAppuiBase;
+
+  onActivate(context: IViewActivationContext) {
+    this.appui = context.appui as any;
+    console.log('Settings activated with params:', context.params);
+
+    if (context.params?.section) {
+      this.section = context.params.section;
+    }
+
+    // Set settings-specific secondary menu
+    context.appui.setSecondaryMenu({
+      heading: 'Settings',
+      groups: [
+        {
+          name: 'Account',
+          iconName: 'lucide:user',
+          items: [
+            { key: 'general', iconName: 'settings', action: () => this.showSection('general') },
+            { key: 'profile', iconName: 'user', action: () => this.showSection('profile') },
+            { key: 'security', iconName: 'shield', action: () => this.showSection('security') },
+          ]
+        },
+        {
+          name: 'Preferences',
+          iconName: 'lucide:sliders',
+          items: [
+            { key: 'notifications', iconName: 'bell', badge: 3, action: () => this.showSection('notifications') },
+            { key: 'appearance', iconName: 'palette', action: () => this.showSection('appearance') },
+          ]
+        }
+      ]
+    });
+
+    context.appui.setSecondaryMenuSelection(this.section);
+
+    // Clear content tabs for settings
+    context.appui.setContentTabs([]);
+  }
+
+  onDeactivate() {
+    console.log('Settings deactivated');
+    this.hasChanges = false;
+  }
+
+  canDeactivate(): boolean | string {
+    if (this.hasChanges) {
+      return 'You have unsaved changes. Leave anyway?';
+    }
+    return true;
+  }
+
+  showSection(section: string) {
+    this.section = section;
+    this.appui?.setSecondaryMenuSelection(section);
+  }
+
+  simulateChange() {
+    this.hasChanges = true;
+  }
+
+  render() {
+    return html`
+      <style>
+        :host {
+          display: block;
+          padding: 40px;
+          color: #a3a3a3;
+          font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
+        }
+        h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 8px; }
+        p { color: #737373; margin-bottom: 24px; }
+        .section-name {
+          background: rgba(255,255,255,0.05);
+          border: 1px solid rgba(255,255,255,0.1);
+          border-radius: 8px;
+          padding: 24px;
+          font-size: 18px;
+          color: #fafafa;
+          margin-bottom: 16px;
+        }
+        .actions {
+          display: flex;
+          gap: 12px;
+        }
+        button {
+          background: #3b82f6;
+          color: white;
+          border: none;
+          padding: 8px 16px;
+          border-radius: 6px;
+          cursor: pointer;
+          font-size: 14px;
+        }
+        button:hover {
+          background: #2563eb;
+        }
+        .warning {
+          color: #fbbf24;
+          font-size: 13px;
+          margin-top: 16px;
+        }
+      </style>
+      <h1>Settings</h1>
+      <p>Manage your account and application preferences.</p>
+      <div class="section-name">
+        Current section: <strong>${this.section}</strong>
+      </div>
+      <div class="actions">
+        <button @click=${() => this.simulateChange()}>Make Changes</button>
+      </div>
+      ${this.hasChanges ? html`<p class="warning">You have unsaved changes. Navigation will prompt for confirmation.</p>` : ''}
+    `;
+  }
+}
+
+// Projects view
+@customElement('demo-projects-view')
+class DemoProjectsView extends DeesElement {
+  onActivate(context: IViewActivationContext) {
+    context.appui.setSecondaryMenu({
+      heading: 'Projects',
+      groups: [
+        {
+          name: 'My Projects',
+          items: [
+            { key: 'active', iconName: 'folder', badge: 3, action: () => console.log('Active') },
+            { key: 'archived', iconName: 'archive', action: () => console.log('Archived') },
+            { key: 'shared', iconName: 'users', badge: 2, badgeVariant: 'warning', action: () => console.log('Shared') },
+          ]
+        }
+      ]
+    });
+
+    context.appui.setContentTabs([
+      { key: 'Grid', iconName: 'lucide:grid', action: () => console.log('Grid view') },
+      { key: 'List', iconName: 'lucide:list', action: () => console.log('List view') },
+      { key: 'Board', iconName: 'lucide:kanban', action: () => console.log('Board view') },
+    ]);
+  }
+
+  render() {
+    return html`
+      <style>
+        :host {
+          display: block;
+          padding: 40px;
+          color: #a3a3a3;
+          font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
+        }
+        h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 24px; }
+        .projects {
+          display: grid;
+          grid-template-columns: repeat(2, 1fr);
+          gap: 16px;
+        }
+        .project {
+          background: rgba(255,255,255,0.03);
+          border: 1px solid rgba(255,255,255,0.08);
+          border-radius: 8px;
+          padding: 20px;
+          cursor: pointer;
+          transition: border-color 0.2s;
+        }
+        .project:hover {
+          border-color: rgba(255,255,255,0.2);
+        }
+        .project h3 { color: #fafafa; margin: 0 0 8px 0; font-size: 16px; }
+        .project p { color: #737373; margin: 0; font-size: 13px; }
+        .badge {
+          display: inline-block;
+          background: #14532d;
+          color: #4ade80;
+          padding: 2px 8px;
+          border-radius: 9px;
+          font-size: 11px;
+          margin-left: 8px;
+        }
+      </style>
+      <h1>Projects</h1>
+      <div class="projects">
+        <div class="project">
+          <h3>Frontend App <span class="badge">Active</span></h3>
+          <p>React-based dashboard application</p>
+        </div>
+        <div class="project">
+          <h3>API Server <span class="badge">Active</span></h3>
+          <p>Node.js REST API backend</p>
+        </div>
+        <div class="project">
+          <h3>Mobile App <span class="badge">Active</span></h3>
+          <p>React Native iOS/Android app</p>
+        </div>
+        <div class="project">
+          <h3>Documentation</h3>
+          <p>Technical documentation site</p>
+        </div>
+      </div>
+    `;
+  }
+}
+
+// Tasks view showing inline template content
+@customElement('demo-tasks-view')
+class DemoTasksView extends DeesElement {
+  onActivate(context: IViewActivationContext) {
+    context.appui.setSecondaryMenu({
+      heading: 'Tasks',
+      groups: [
+        {
+          name: 'Filters',
+          items: [
+            { key: 'all', iconName: 'list', badge: 12, action: () => console.log('All') },
+            { key: 'today', iconName: 'calendar', badge: 3, action: () => console.log('Today') },
+            { key: 'upcoming', iconName: 'clock', action: () => console.log('Upcoming') },
+            { key: 'completed', iconName: 'checkCircle', action: () => console.log('Completed') },
+          ]
+        }
+      ]
+    });
+
+    context.appui.setContentTabs([
+      { key: 'List', iconName: 'lucide:list', action: () => console.log('List') },
+      { key: 'Calendar', iconName: 'lucide:calendar', action: () => console.log('Calendar') },
+    ]);
+  }
+
+  render() {
+    return html`
+      <style>
+        :host {
+          display: block;
+          padding: 40px;
+          color: #a3a3a3;
+          font-family: 'Geist Sans', 'Inter', -apple-system, sans-serif;
+        }
+        h1 { color: #fafafa; font-weight: 600; font-size: 24px; margin-bottom: 24px; }
+        .task-list {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+        .task {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          background: rgba(255,255,255,0.03);
+          border: 1px solid rgba(255,255,255,0.08);
+          border-radius: 8px;
+          padding: 12px 16px;
+        }
+        .checkbox {
+          width: 18px;
+          height: 18px;
+          border: 2px solid #525252;
+          border-radius: 4px;
+          cursor: pointer;
+        }
+        .task-text { color: #fafafa; flex: 1; }
+        .due-date { color: #737373; font-size: 12px; }
+        .priority {
+          padding: 2px 8px;
+          border-radius: 4px;
+          font-size: 11px;
+        }
+        .priority.high { background: #450a0a; color: #f87171; }
+        .priority.medium { background: #451a03; color: #fbbf24; }
+      </style>
+      <h1>Tasks</h1>
+      <div class="task-list">
+        <div class="task">
+          <div class="checkbox"></div>
+          <span class="task-text">Review pull request #42</span>
+          <span class="due-date">Today</span>
+          <span class="priority high">High</span>
+        </div>
+        <div class="task">
+          <div class="checkbox"></div>
+          <span class="task-text">Update documentation</span>
+          <span class="due-date">Tomorrow</span>
+          <span class="priority medium">Medium</span>
+        </div>
+        <div class="task">
+          <div class="checkbox"></div>
+          <span class="task-text">Write unit tests</span>
+          <span class="due-date">Dec 20</span>
+        </div>
+      </div>
+    `;
+  }
+}
+
 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') },
-        ]},
+  // App configuration using the new unified API
+  const appConfig: IAppConfig = {
+    branding: {
+      logoIcon: 'lucide:box',
+      logoText: 'Acme App'
+    },
+
+    appBar: {
+      menuItems: [
+        {
+          name: 'File',
+          action: async () => {},
+          submenu: [
+            { name: 'New Project', shortcut: 'Cmd+N', iconName: 'filePlus', action: async () => console.log('New') },
+            { name: 'Open...', shortcut: 'Cmd+O', iconName: 'folderOpen', action: async () => console.log('Open') },
+            { 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') },
+            ]},
+            { divider: true },
+            { name: 'Save All', shortcut: 'Cmd+S', iconName: 'save', action: async () => console.log('Save') },
+          ]
+        },
+        {
+          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 Activity Log', shortcut: 'Cmd+Shift+A', action: async () => console.log('Toggle activity') },
+          ]
+        },
+        {
+          name: 'Help',
+          action: async () => {},
+          submenu: [
+            { name: 'Documentation', iconName: 'book', action: async () => console.log('Docs') },
+            { name: 'Keyboard Shortcuts', iconName: 'keyboard', shortcut: 'Cmd+/', action: async () => console.log('Shortcuts') },
+            { divider: true },
+            { name: 'About', iconName: 'info', action: async () => console.log('About') },
+          ]
+        }
+      ],
+      breadcrumbs: 'Dashboard',
+      showWindowControls: true,
+      showSearch: true,
+      user: {
+        name: 'Jane Smith',
+        email: 'jane.smith@example.com',
+        status: 'online'
+      },
+      profileMenuItems: [
+        { name: 'Profile', iconName: 'user', action: async () => console.log('Profile') },
+        { name: 'Account Settings', iconName: 'settings', action: async () => console.log('Settings') },
        { divider: true },
-        { name: 'Save All', shortcut: 'Cmd+Shift+S', iconName: 'save', action: async () => console.log('Save all') },
+        { name: 'Help & Support', iconName: 'helpCircle', action: async () => console.log('Help') },
        { divider: true },
-        { name: 'Close Project', action: async () => console.log('Close project') },
+        { name: 'Sign Out', iconName: 'logOut', action: async () => console.log('Sign out') }
      ]
    },
-    {
-      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') },
-      ]
+
+    views: [
+      {
+        id: 'dashboard',
+        name: 'Dashboard',
+        iconName: 'lucide:home',
+        content: 'demo-dashboard-view',
+        route: 'dashboard'
+      },
+      {
+        id: 'projects',
+        name: 'Projects',
+        iconName: 'lucide:folder',
+        content: 'demo-projects-view',
+        route: 'projects',
+        badge: 3
+      },
+      {
+        id: 'tasks',
+        name: 'Tasks',
+        iconName: 'lucide:checkSquare',
+        content: 'demo-tasks-view',
+        route: 'tasks',
+        badge: 12
+      },
+      {
+        id: 'settings',
+        name: 'Settings',
+        iconName: 'lucide:settings',
+        content: 'demo-settings-view',
+        route: 'settings/:section?'
+      },
+    ],
+
+    mainMenu: {
+      sections: [
+        { name: 'Main', views: ['dashboard'] },
+        { name: 'Workspace', views: ['projects', 'tasks'] },
+      ],
+      bottomItems: ['settings']
    },
-    {
-      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') },
-      ]
+
+    defaultView: 'dashboard',
+
+    onViewChange: (viewId, view) => {
+      console.log(`View changed to: ${viewId} (${view.name})`);
    },
-    {
-      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') },
-      ]
+
+    onSearch: (query) => {
+      console.log('Search query:', query);
    }
-  ];
+  };

-  // 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') },
-      ]
-    }
-  ];
+  // Use a container element to properly initialize the demo
+  const containerElement = document.createElement('div');
+  containerElement.className = 'demo-container';
+  containerElement.style.cssText = 'position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden;';

-  // 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') },
-  ];
+  const appuiElement = document.createElement('dees-appui-base') as DeesAppuiBase;
+  containerElement.appendChild(appuiElement);

-  // 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') },
-      ]
-    }
-  ];
+  // Initialize after element is connected
+  setTimeout(async () => {
+    await appuiElement.updateComplete;

-  // 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') },
-  ];
+    // Configure using the unified API
+    appuiElement.configure(appConfig);

-  // 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') }
-  ];
+    // Add demo activity entries
+    setTimeout(() => {
+      appuiElement.activityLog.addMany([
+        {
+          type: 'login',
+          user: 'Jane Smith',
+          message: 'logged in from Chrome on macOS'
+        },
+        {
+          type: 'create',
+          user: 'Jane Smith',
+          message: 'created project "Frontend App"'
+        },
+        {
+          type: 'update',
+          user: 'John Doe',
+          message: 'updated API documentation'
+        },
+        {
+          type: 'view',
+          user: 'Jane Smith',
+          message: 'viewed dashboard analytics'
+        },
+        {
+          type: 'delete',
+          user: 'Admin',
+          message: 'removed deprecated endpoint'
+        },
+        {
+          type: 'custom',
+          user: 'System',
+          message: 'scheduled backup completed',
+          iconName: 'lucide:database'
+        }
+      ]);
+    }, 500);
+
+    // Subscribe to view changes
+    appuiElement.viewChanged$.subscribe((event) => {
+      console.log('View changed event:', event);
+      // Update breadcrumbs based on view
+      appuiElement.setBreadcrumbs(event.view.name);
+    });
+
+    // Subscribe to lifecycle events
+    appuiElement.viewLifecycle$.subscribe((event) => {
+      console.log('Lifecycle event:', event.type, event.viewId);
+    });
+
+    // Demo: Dynamically update a badge after 5 seconds
+    setTimeout(() => {
+      appuiElement.setMainMenuBadge('tasks', 15);
+      appuiElement.activityLog.add({
+        type: 'update',
+        user: 'System',
+        message: 'new tasks added'
+      });
+    }, 5000);
+  }, 0);

  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>
+      ${containerElement}
    </dees-demowrapper>
  `;
-};
+};
--- a/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/dees-appui-base.ts
--- a/ts_web/elements/00group-appui/dees-appui-base/index.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/index.ts
@@ -1,4 +1,2 @@
 export * from './dees-appui-base.js';
 export * from './view.registry.js';
-export * from './app.router.js';
-export * from './state.manager.js';
--- a/ts_web/elements/00group-appui/dees-appui-base/readme.md
+++ b/ts_web/elements/00group-appui/dees-appui-base/readme.md
@@ -0,0 +1,560 @@
+# DeesAppuiBase
+
+A comprehensive application shell component providing a complete UI framework with navigation, menus, activity logging, and view management.
+
+## Quick Start
+
+```typescript
+import { html, DeesElement, customElement } from '@design.estate/dees-element';
+import { DeesAppuiBase } from '@design.estate/dees-catalog';
+
+@customElement('my-app')
+class MyApp extends DeesElement {
+  private appui: DeesAppuiBase;
+
+  async firstUpdated() {
+    this.appui = this.shadowRoot.querySelector('dees-appui-base');
+
+    // Configure with views and menu
+    this.appui.configure({
+      branding: { logoIcon: 'lucide:box', logoText: 'My App' },
+      views: [
+        { id: 'dashboard', name: 'Dashboard', iconName: 'lucide:home', content: 'my-dashboard' },
+        { id: 'settings', name: 'Settings', iconName: 'lucide:settings', content: 'my-settings' },
+      ],
+      mainMenu: {
+        sections: [{ name: 'Main', views: ['dashboard', 'settings'] }]
+      },
+      defaultView: 'dashboard'
+    });
+  }
+
+  render() {
+    return html`<dees-appui-base></dees-appui-base>`;
+  }
+}
+```
+
+## Configuration API
+
+### `configure(config: IAppConfig)`
+
+Configure the entire application shell with a single configuration object.
+
+```typescript
+interface IAppConfig {
+  branding?: IBrandingConfig;
+  appBar?: IAppBarConfig;
+  views: IViewDefinition[];
+  mainMenu?: IMainMenuConfig;
+  defaultView?: string;
+  activityLog?: IActivityLogConfig;
+  onViewChange?: (viewId: string, view: IViewDefinition) => void;
+  onSearch?: (query: string) => void;
+}
+```
+
+### View Definition
+
+```typescript
+interface IViewDefinition {
+  id: string;                           // Unique identifier
+  name: string;                         // Display name
+  iconName?: string;                    // Icon (e.g., 'lucide:home')
+  content:                              // View content
+    | string                            // Tag name ('my-component')
+    | (new () => HTMLElement)           // Class constructor
+    | (() => TemplateResult)            // Template function
+    | (() => Promise<...>);             // Async for lazy loading
+  secondaryMenu?: ISecondaryMenuGroup[];
+  contentTabs?: ITab[];
+  route?: string;                       // URL route (default: id)
+  badge?: string | number;
+  cache?: boolean;                      // Cache view instance (default: true)
+}
+```
+
+---
+
+## Programmatic APIs
+
+### App Bar API
+
+Control the top application bar.
+
+```typescript
+// Set menu items (File, Edit, View, etc.)
+appui.setAppBarMenus([
+  {
+    name: 'File',
+    submenu: [
+      { name: 'New', shortcut: 'Cmd+N', action: () => {} },
+      { name: 'Save', shortcut: 'Cmd+S', action: () => {} },
+    ]
+  }
+]);
+
+// Update single menu
+appui.updateAppBarMenu('File', { submenu: [...newItems] });
+
+// Breadcrumbs
+appui.setBreadcrumbs('Dashboard > Settings > Profile');
+appui.setBreadcrumbs(['Dashboard', 'Settings', 'Profile']);
+
+// User profile
+appui.setUser({
+  name: 'John Doe',
+  email: 'john@example.com',
+  avatar: '/avatars/john.png',
+  status: 'online'  // 'online' | 'offline' | 'busy' | 'away'
+});
+
+appui.setProfileMenuItems([
+  { name: 'Profile', iconName: 'lucide:user', action: () => {} },
+  { divider: true },
+  { name: 'Sign Out', iconName: 'lucide:log-out', action: () => {} }
+]);
+
+// Search
+appui.setSearchVisible(true);
+appui.onSearch((query) => console.log('Search:', query));
+
+// Window controls (for Electron/Tauri apps)
+appui.setWindowControlsVisible(false);
+```
+
+### Main Menu API (Left Sidebar)
+
+Control the main navigation menu.
+
+```typescript
+// Set entire menu
+appui.setMainMenu({
+  logoIcon: 'lucide:box',
+  logoText: 'My App',
+  groups: [
+    {
+      name: 'Main',
+      tabs: [
+        { key: 'dashboard', iconName: 'lucide:home', action: () => {} },
+        { key: 'inbox', iconName: 'lucide:inbox', badge: 5, action: () => {} },
+      ]
+    }
+  ],
+  bottomTabs: [
+    { key: 'settings', iconName: 'lucide:settings', action: () => {} }
+  ]
+});
+
+// Update specific group
+appui.updateMainMenuGroup('Main', { tabs: [...newTabs] });
+
+// Add/remove items
+appui.addMainMenuItem('Main', { key: 'tasks', iconName: 'lucide:check', action: () => {} });
+appui.removeMainMenuItem('Main', 'tasks');
+
+// Selection
+appui.setMainMenuSelection('dashboard');
+appui.setMainMenuCollapsed(true);
+
+// Badges
+appui.setMainMenuBadge('inbox', 12);
+appui.clearMainMenuBadge('inbox');
+```
+
+### Secondary Menu API
+
+Views can control the secondary (contextual) menu.
+
+```typescript
+// Set menu
+appui.setSecondaryMenu({
+  heading: 'Settings',
+  groups: [
+    {
+      name: 'Account',
+      items: [
+        { key: 'profile', iconName: 'lucide:user', action: () => {} },
+        { key: 'security', iconName: 'lucide:shield', action: () => {} },
+      ]
+    }
+  ]
+});
+
+// Update group
+appui.updateSecondaryMenuGroup('Account', { items: newItems });
+
+// Add item
+appui.addSecondaryMenuItem('Account', {
+  key: 'notifications',
+  iconName: 'lucide:bell',
+  action: () => {}
+});
+
+// Selection
+appui.setSecondaryMenuSelection('profile');
+
+// Clear
+appui.clearSecondaryMenu();
+```
+
+### Content Tabs API
+
+Control tabs in the main content area.
+
+```typescript
+// Set tabs
+appui.setContentTabs([
+  { key: 'code', iconName: 'lucide:code', action: () => {} },
+  { key: 'preview', iconName: 'lucide:eye', action: () => {} }
+]);
+
+// Add/remove
+appui.addContentTab({ key: 'debug', iconName: 'lucide:bug', action: () => {} });
+appui.removeContentTab('debug');
+
+// Select
+appui.selectContentTab('preview');
+
+// Get current
+const current = appui.getSelectedContentTab();
+```
+
+### Activity Log API
+
+Add activity entries to the right-side activity log.
+
+```typescript
+// Add single entry
+appui.activityLog.add({
+  type: 'create',       // 'login' | 'logout' | 'view' | 'create' | 'update' | 'delete' | 'custom'
+  user: 'John Doe',
+  message: 'created a new invoice',
+  iconName: 'lucide:file-plus',  // Optional custom icon
+  data: { invoiceId: '123' }     // Optional metadata
+});
+
+// Add multiple
+appui.activityLog.addMany([...entries]);
+
+// Clear
+appui.activityLog.clear();
+
+// Query
+const entries = appui.activityLog.getEntries();
+const filtered = appui.activityLog.filter({ user: 'John', type: 'create' });
+const searched = appui.activityLog.search('invoice');
+```
+
+### Navigation API
+
+Navigate between views programmatically.
+
+```typescript
+// Navigate to view
+await appui.navigateToView('settings');
+await appui.navigateToView('settings', { section: 'profile' });
+
+// Get current view
+const current = appui.getCurrentView();
+
+// Subscribe to view changes
+appui.viewChanged$.subscribe((event) => {
+  console.log(`Navigated to: ${event.viewId}`);
+});
+
+// Subscribe to lifecycle events
+appui.viewLifecycle$.subscribe((event) => {
+  if (event.type === 'activated') {
+    console.log(`View ${event.viewId} activated`);
+  }
+});
+```
+
+---
+
+## View Lifecycle Hooks
+
+Views can implement lifecycle hooks to respond to activation/deactivation.
+
+```typescript
+import { DeesElement, customElement } from '@design.estate/dees-element';
+import type { IViewActivationContext, IViewLifecycle } from '@design.estate/dees-catalog';
+
+@customElement('my-settings-view')
+class MySettingsView extends DeesElement implements IViewLifecycle {
+  /**
+   * Called when view is activated (displayed)
+   * Receives typed context with appui reference
+   */
+  async onActivate(context: IViewActivationContext) {
+    const { appui, viewId, params } = context;
+
+    // Set view-specific secondary menu
+    appui.setSecondaryMenu({
+      heading: 'Settings',
+      groups: [{ name: 'Options', items: [...] }]
+    });
+
+    // Set view-specific tabs
+    appui.setContentTabs([...]);
+
+    // Load data based on route params
+    if (params?.section) {
+      await this.loadSection(params.section);
+    }
+  }
+
+  /**
+   * Called when view is deactivated (hidden)
+   */
+  onDeactivate() {
+    this.cleanup();
+  }
+
+  /**
+   * Called before navigation away
+   * Return false or a message string to block navigation
+   */
+  canDeactivate(): boolean | string {
+    if (this.hasUnsavedChanges) {
+      return 'You have unsaved changes. Leave anyway?';
+    }
+    return true;
+  }
+}
+```
+
+### IViewActivationContext
+
+```typescript
+interface IViewActivationContext {
+  appui: DeesAppuiBase;           // Reference to the app shell
+  viewId: string;                  // The view ID being activated
+  params?: Record<string, string>; // Route parameters
+}
+```
+
+---
+
+## Routing
+
+Routes are automatically registered from view definitions using `domtools.router`.
+
+```typescript
+const views = [
+  { id: 'dashboard', route: 'dashboard', ... },
+  { id: 'settings', route: 'settings/:section?', ... },  // Parameterized
+  { id: 'user', route: 'users/:id', ... },
+];
+
+// URL: #dashboard → navigates to dashboard view
+// URL: #settings/profile → navigates to settings with params.section = 'profile'
+// URL: #users/123 → navigates to user with params.id = '123'
+```
+
+### Hash-based Routing
+
+The router uses hash-based routing by default (`#viewId`). URLs are automatically synchronized when navigating via `navigateToView()`.
+
+---
+
+## View Caching
+
+Views are cached by default. When navigating away and back, the same DOM element is reused (hidden/shown) rather than destroyed and recreated.
+
+```typescript
+// Disable caching for a specific view
+{
+  id: 'reports',
+  name: 'Reports',
+  content: 'my-reports-view',
+  cache: false  // Always recreate this view
+}
+```
+
+---
+
+## Lazy Loading
+
+Use async content functions for lazy loading views.
+
+```typescript
+{
+  id: 'analytics',
+  name: 'Analytics',
+  content: async () => {
+    const module = await import('./views/analytics.js');
+    return module.AnalyticsView;
+  }
+}
+```
+
+---
+
+## RxJS Observables
+
+The component exposes RxJS Subjects for reactive programming.
+
+```typescript
+// View lifecycle events
+appui.viewLifecycle$.subscribe((event) => {
+  // event.type: 'loading' | 'activated' | 'deactivated' | 'loaded' | 'loadError'
+  // event.viewId: string
+  // event.element?: HTMLElement
+  // event.params?: Record<string, string>
+  // event.error?: unknown
+});
+
+// View change events
+appui.viewChanged$.subscribe((event) => {
+  // event.viewId: string
+  // event.view: IViewDefinition
+  // event.previousView?: IViewDefinition
+  // event.params?: Record<string, string>
+});
+```
+
+---
+
+## Complete Example
+
+```typescript
+import { html, DeesElement, customElement } from '@design.estate/dees-element';
+import { DeesAppuiBase, IViewActivationContext } from '@design.estate/dees-catalog';
+
+@customElement('my-app')
+class MyApp extends DeesElement {
+  private appui: DeesAppuiBase;
+
+  async firstUpdated() {
+    this.appui = this.shadowRoot.querySelector('dees-appui-base');
+
+    this.appui.configure({
+      branding: {
+        logoIcon: 'lucide:briefcase',
+        logoText: 'CRM Pro'
+      },
+
+      appBar: {
+        menuItems: [
+          { name: 'File', submenu: [...] },
+          { name: 'Edit', submenu: [...] }
+        ],
+        showSearch: true,
+        user: { name: 'Jane Smith', status: 'online' }
+      },
+
+      views: [
+        {
+          id: 'dashboard',
+          name: 'Dashboard',
+          iconName: 'lucide:home',
+          content: 'crm-dashboard',
+          route: 'dashboard'
+        },
+        {
+          id: 'contacts',
+          name: 'Contacts',
+          iconName: 'lucide:users',
+          content: 'crm-contacts',
+          route: 'contacts',
+          badge: 42
+        },
+        {
+          id: 'settings',
+          name: 'Settings',
+          iconName: 'lucide:settings',
+          content: 'crm-settings',
+          route: 'settings/:section?'
+        }
+      ],
+
+      mainMenu: {
+        sections: [
+          { name: 'Main', views: ['dashboard', 'contacts'] }
+        ],
+        bottomItems: ['settings']
+      },
+
+      defaultView: 'dashboard',
+
+      onViewChange: (viewId, view) => {
+        console.log(`Navigated to: ${view.name}`);
+      },
+
+      onSearch: (query) => {
+        console.log(`Search: ${query}`);
+      }
+    });
+
+    // Load activity from backend
+    const activities = await fetch('/api/activities').then(r => r.json());
+    this.appui.activityLog.addMany(activities);
+  }
+
+  render() {
+    return html`<dees-appui-base></dees-appui-base>`;
+  }
+}
+
+// View with lifecycle hooks
+@customElement('crm-settings')
+class CrmSettings extends DeesElement {
+  private appui: DeesAppuiBase;
+
+  onActivate(context: IViewActivationContext) {
+    this.appui = context.appui;
+
+    // Set secondary menu for settings
+    this.appui.setSecondaryMenu({
+      heading: 'Settings',
+      groups: [
+        {
+          name: 'Account',
+          items: [
+            { key: 'profile', iconName: 'lucide:user', action: () => this.showSection('profile') },
+            { key: 'security', iconName: 'lucide:shield', action: () => this.showSection('security') }
+          ]
+        },
+        {
+          name: 'Preferences',
+          items: [
+            { key: 'notifications', iconName: 'lucide:bell', action: () => this.showSection('notifications') }
+          ]
+        }
+      ]
+    });
+
+    // Navigate to section from URL params
+    if (context.params?.section) {
+      this.showSection(context.params.section);
+    }
+  }
+
+  showSection(section: string) {
+    this.appui.setSecondaryMenuSelection(section);
+    // ... load section content
+  }
+}
+```
+
+---
+
+## TypeScript Types
+
+All interfaces are exported from `@design.estate/dees-catalog`:
+
+- `IAppConfig` - Main configuration
+- `IViewDefinition` - View definition
+- `IViewActivationContext` - Context passed to `onActivate`
+- `IViewLifecycle` - Lifecycle hooks interface
+- `IViewLifecycleEvent` - Lifecycle event for rxjs Subject
+- `IViewChangeEvent` - View change event
+- `IAppUser` - User configuration
+- `IActivityEntry` - Activity log entry
+- `IActivityLogAPI` - Activity log methods
+- `IAppBarMenuItem` - App bar menu item
+- `IMainMenuConfig` - Main menu configuration
+- `ISecondaryMenuGroup` - Secondary menu group
+- `ITab` - Tab definition
--- a/ts_web/elements/00group-appui/dees-appui-base/state.manager.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/state.manager.ts
@@ -1,185 +0,0 @@
-import type { IStatePersistenceConfig, IAppUIState } from '../../interfaces/appconfig.js';
-
-/**
- * Manager for persisting and restoring UI state
- */
-export class StateManager {
-  private config: Required<IStatePersistenceConfig>;
-  private memoryStorage: Map<string, string> = new Map();
-
-  constructor(config: IStatePersistenceConfig = { enabled: false }) {
-    this.config = {
-      enabled: config.enabled,
-      storageKey: config.storageKey || 'dees-appui-state',
-      storage: config.storage || 'localStorage',
-      persist: {
-        mainMenuCollapsed: true,
-        secondaryMenuCollapsed: true,
-        selectedView: true,
-        secondaryMenuSelection: true,
-        collapsedGroups: true,
-        ...config.persist,
-      },
-    };
-  }
-
-  /**
-   * Check if state persistence is enabled
-   */
-  public isEnabled(): boolean {
-    return this.config.enabled;
-  }
-
-  /**
-   * Save current UI state
-   */
-  public save(state: Partial<IAppUIState>): void {
-    if (!this.config.enabled) return;
-
-    const existingState = this.load() || {};
-    const newState: IAppUIState = {
-      ...existingState,
-      timestamp: Date.now(),
-    };
-
-    // Only save what's configured
-    if (this.config.persist.selectedView && state.currentViewId !== undefined) {
-      newState.currentViewId = state.currentViewId;
-    }
-    if (this.config.persist.mainMenuCollapsed && state.mainMenuCollapsed !== undefined) {
-      newState.mainMenuCollapsed = state.mainMenuCollapsed;
-    }
-    if (this.config.persist.secondaryMenuCollapsed && state.secondaryMenuCollapsed !== undefined) {
-      newState.secondaryMenuCollapsed = state.secondaryMenuCollapsed;
-    }
-    if (this.config.persist.secondaryMenuSelection && state.secondaryMenuSelectedKey !== undefined) {
-      newState.secondaryMenuSelectedKey = state.secondaryMenuSelectedKey;
-    }
-    if (this.config.persist.collapsedGroups && state.collapsedGroups !== undefined) {
-      newState.collapsedGroups = state.collapsedGroups;
-    }
-
-    this.setItem(this.config.storageKey, JSON.stringify(newState));
-  }
-
-  /**
-   * Load persisted UI state
-   */
-  public load(): IAppUIState | null {
-    if (!this.config.enabled) return null;
-
-    try {
-      const data = this.getItem(this.config.storageKey);
-      if (!data) return null;
-      return JSON.parse(data) as IAppUIState;
-    } catch (e) {
-      console.warn('Failed to load UI state:', e);
-      return null;
-    }
-  }
-
-  /**
-   * Clear persisted state
-   */
-  public clear(): void {
-    this.removeItem(this.config.storageKey);
-  }
-
-  /**
-   * Check if state exists
-   */
-  public hasState(): boolean {
-    return this.getItem(this.config.storageKey) !== null;
-  }
-
-  /**
-   * Get state age in milliseconds
-   */
-  public getStateAge(): number | null {
-    const state = this.load();
-    if (!state?.timestamp) return null;
-    return Date.now() - state.timestamp;
-  }
-
-  /**
-   * Update specific state properties
-   */
-  public update(updates: Partial<IAppUIState>): void {
-    const currentState = this.load() || {};
-    this.save({ ...currentState, ...updates });
-  }
-
-  /**
-   * Get the storage key being used
-   */
-  public getStorageKey(): string {
-    return this.config.storageKey;
-  }
-
-  // Storage abstraction methods
-
-  private getItem(key: string): string | null {
-    switch (this.config.storage) {
-      case 'localStorage':
-        try {
-          return localStorage.getItem(key);
-        } catch {
-          return null;
-        }
-      case 'sessionStorage':
-        try {
-          return sessionStorage.getItem(key);
-        } catch {
-          return null;
-        }
-      case 'memory':
-        return this.memoryStorage.get(key) || null;
-      default:
-        return null;
-    }
-  }
-
-  private setItem(key: string, value: string): void {
-    switch (this.config.storage) {
-      case 'localStorage':
-        try {
-          localStorage.setItem(key, value);
-        } catch (e) {
-          console.warn('Failed to save to localStorage:', e);
-        }
-        break;
-      case 'sessionStorage':
-        try {
-          sessionStorage.setItem(key, value);
-        } catch (e) {
-          console.warn('Failed to save to sessionStorage:', e);
-        }
-        break;
-      case 'memory':
-        this.memoryStorage.set(key, value);
-        break;
-    }
-  }
-
-  private removeItem(key: string): void {
-    switch (this.config.storage) {
-      case 'localStorage':
-        try {
-          localStorage.removeItem(key);
-        } catch {
-          // Ignore
-        }
-        break;
-      case 'sessionStorage':
-        try {
-          sessionStorage.removeItem(key);
-        } catch {
-          // Ignore
-        }
-        break;
-      case 'memory':
-        this.memoryStorage.delete(key);
-        break;
-    }
-  }
-}
--- a/ts_web/elements/00group-appui/dees-appui-base/view.registry.ts
+++ b/ts_web/elements/00group-appui/dees-appui-base/view.registry.ts
@@ -1,13 +1,31 @@
 import { html, render, type TemplateResult } from '@design.estate/dees-element';
-import type { IViewDefinition } from '../../interfaces/appconfig.js';
+import type {
+  IViewDefinition,
+  IViewActivationContext,
+  IViewLifecycle,
+  TDeesAppuiBase
+} from '../../interfaces/appconfig.js';

 /**
 * Registry for managing views and their lifecycle
+ *
+ * Key features:
+ * - View caching with hide/show pattern (not destroy/create)
+ * - Async content loading support (lazy loading)
+ * - View lifecycle hooks (onActivate, onDeactivate, canDeactivate)
 */
 export class ViewRegistry {
  private views: Map<string, IViewDefinition> = new Map();
  private instances: Map<string, HTMLElement> = new Map();
  private currentViewId: string | null = null;
+  private appui: TDeesAppuiBase | null = null;
+
+  /**
+   * Set the appui reference for view activation context
+   */
+  public setAppuiRef(appui: TDeesAppuiBase): void {
+    this.appui = appui;
+  }

  /**
   * Register a single view
@@ -56,20 +74,222 @@ export class ViewRegistry {
  }

  /**
-   * Find view by route
+   * Find view by route (supports parameterized routes like 'settings/:section')
   */
-  public findByRoute(route: string): IViewDefinition | undefined {
+  public findByRoute(route: string): { view: IViewDefinition; params: Record<string, string> } | undefined {
    for (const view of this.views.values()) {
      const viewRoute = view.route || view.id;
-      if (viewRoute === route) {
-        return view;
+      const params = this.matchRoute(viewRoute, route);
+      if (params !== null) {
+        return { view, params };
      }
    }
    return undefined;
  }

  /**
-   * Render a view's content into a container
+   * Match a route pattern against an actual route
+   * Returns params if matched, null otherwise
+   */
+  private matchRoute(pattern: string, route: string): Record<string, string> | null {
+    const patternParts = pattern.split('/');
+    const routeParts = route.split('/');
+
+    // Check for optional trailing param (ends with ?)
+    const hasOptionalParam = patternParts.length > 0 &&
+      patternParts[patternParts.length - 1].endsWith('?');
+
+    if (hasOptionalParam) {
+      // Allow route to be shorter by 1
+      if (routeParts.length < patternParts.length - 1 || routeParts.length > patternParts.length) {
+        return null;
+      }
+    } else if (patternParts.length !== routeParts.length) {
+      return null;
+    }
+
+    const params: Record<string, string> = {};
+
+    for (let i = 0; i < patternParts.length; i++) {
+      let part = patternParts[i];
+      const isOptional = part.endsWith('?');
+      if (isOptional) {
+        part = part.slice(0, -1);
+      }
+
+      if (part.startsWith(':')) {
+        // This is a parameter
+        const paramName = part.slice(1);
+        if (routeParts[i] !== undefined) {
+          params[paramName] = routeParts[i];
+        } else if (!isOptional) {
+          return null;
+        }
+      } else if (routeParts[i] !== part) {
+        return null;
+      }
+    }
+
+    return params;
+  }
+
+  /**
+   * Check if navigation away from current view is allowed
+   */
+  public async canLeaveCurrentView(): Promise<boolean | string> {
+    if (!this.currentViewId) return true;
+
+    const instance = this.instances.get(this.currentViewId);
+    if (!instance) return true;
+
+    const lifecycle = instance as unknown as IViewLifecycle;
+    if (typeof lifecycle.canDeactivate === 'function') {
+      return await lifecycle.canDeactivate();
+    }
+
+    return true;
+  }
+
+  /**
+   * Activate a view - handles caching, lifecycle, and rendering
+   */
+  public async activateView(
+    viewId: string,
+    container: HTMLElement,
+    params?: Record<string, string>
+  ): Promise<HTMLElement | null> {
+    const view = this.views.get(viewId);
+    if (!view) {
+      console.error(`View "${viewId}" not found in registry`);
+      return null;
+    }
+
+    // Check if caching is enabled for this view (default: true)
+    const shouldCache = view.cache !== false;
+
+    // Deactivate current view
+    if (this.currentViewId && this.currentViewId !== viewId) {
+      await this.deactivateView(this.currentViewId);
+    }
+
+    // Check for cached instance
+    let element = shouldCache ? this.instances.get(viewId) : undefined;
+
+    if (element) {
+      // Reuse cached instance - just show it
+      element.style.display = '';
+    } else {
+      // Create new instance
+      element = await this.createViewElement(view);
+      if (!element) {
+        console.error(`Failed to create element for view "${viewId}"`);
+        return null;
+      }
+
+      // Add to container
+      container.appendChild(element);
+
+      // Cache if enabled
+      if (shouldCache) {
+        this.instances.set(viewId, element);
+      }
+    }
+
+    this.currentViewId = viewId;
+
+    // Call onActivate lifecycle hook
+    await this.callOnActivate(element, viewId, params);
+
+    return element;
+  }
+
+  /**
+   * Deactivate a view (hide and call lifecycle hook)
+   */
+  private async deactivateView(viewId: string): Promise<void> {
+    const instance = this.instances.get(viewId);
+    if (!instance) return;
+
+    // Call onDeactivate lifecycle hook
+    const lifecycle = instance as unknown as IViewLifecycle;
+    if (typeof lifecycle.onDeactivate === 'function') {
+      await lifecycle.onDeactivate();
+    }
+
+    // Hide the element
+    instance.style.display = 'none';
+  }
+
+  /**
+   * Create a view element from its definition (supports async content)
+   */
+  private async createViewElement(view: IViewDefinition): Promise<HTMLElement | null> {
+    let content = view.content;
+
+    // Handle async content (lazy loading)
+    if (typeof content === 'function' &&
+        !(content.prototype instanceof HTMLElement) &&
+        content.constructor.name === 'AsyncFunction') {
+      try {
+        content = await (content as () => Promise<string | (new () => HTMLElement) | (() => TemplateResult)>)();
+      } catch (error) {
+        console.error(`Failed to load async content for view "${view.id}":`, error);
+        return null;
+      }
+    }
+
+    let element: HTMLElement;
+
+    if (typeof content === 'string') {
+      // Tag name string
+      element = document.createElement(content);
+    } else if (typeof content === 'function') {
+      // Check if it's a class constructor or template function
+      if (content.prototype instanceof HTMLElement) {
+        // Element class constructor
+        element = new (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 = (content as () => TemplateResult)();
+        render(template, wrapper);
+        element = wrapper;
+      }
+    } else {
+      console.error(`Invalid content type for view "${view.id}"`);
+      return null;
+    }
+
+    // Add view ID as data attribute for debugging
+    element.dataset.viewId = view.id;
+
+    return element;
+  }
+
+  /**
+   * Call onActivate lifecycle hook on a view element
+   */
+  private async callOnActivate(
+    element: HTMLElement,
+    viewId: string,
+    params?: Record<string, string>
+  ): Promise<void> {
+    const lifecycle = element as unknown as IViewLifecycle;
+    if (typeof lifecycle.onActivate === 'function') {
+      const context: IViewActivationContext = {
+        appui: this.appui!,
+        viewId,
+        params,
+      };
+      await lifecycle.onActivate(context);
+    }
+  }
+
+  /**
+   * Legacy method - renders view without caching
+   * @deprecated Use activateView instead
   */
  public renderView(viewId: string, container: HTMLElement): HTMLElement | null {
    const view = this.views.get(viewId);
@@ -78,25 +298,22 @@ export class ViewRegistry {
      return null;
    }

-    // Clear container
+    // For legacy compatibility, clear container
    container.innerHTML = '';

    let element: HTMLElement;
+    const content = view.content;

-    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)();
+    if (typeof content === 'string') {
+      element = document.createElement(content);
+    } else if (typeof content === 'function') {
+      if ((content as any).prototype instanceof HTMLElement) {
+        element = new (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)();
+        const template = (content as () => TemplateResult)();
        render(template, wrapper);
        element = wrapper;
      }
@@ -126,10 +343,29 @@ export class ViewRegistry {
    return this.instances.get(viewId);
  }

+  /**
+   * Clear a specific cached instance
+   */
+  public clearInstance(viewId: string): void {
+    const instance = this.instances.get(viewId);
+    if (instance && instance.parentNode) {
+      instance.parentNode.removeChild(instance);
+    }
+    this.instances.delete(viewId);
+    if (this.currentViewId === viewId) {
+      this.currentViewId = null;
+    }
+  }
+
  /**
   * Clear all instances
   */
  public clearInstances(): void {
+    for (const [viewId, instance] of this.instances) {
+      if (instance.parentNode) {
+        instance.parentNode.removeChild(instance);
+      }
+    }
    this.instances.clear();
    this.currentViewId = null;
  }
@@ -138,7 +374,7 @@ export class ViewRegistry {
   * Unregister a view
   */
  public unregister(viewId: string): boolean {
-    this.instances.delete(viewId);
+    this.clearInstance(viewId);
    return this.views.delete(viewId);
  }

@@ -147,8 +383,7 @@ export class ViewRegistry {
   */
  public clear(): void {
    this.views.clear();
-    this.instances.clear();
-    this.currentViewId = null;
+    this.clearInstances();
  }

  /**
--- a/ts_web/elements/interfaces/appconfig.ts
+++ b/ts_web/elements/interfaces/appconfig.ts
@@ -2,6 +2,39 @@ import type { TemplateResult } from '@design.estate/dees-element';
 import type { IAppBarMenuItem } from './appbarmenuitem.js';
 import type { ITab } from './tab.js';
 import type { ISecondaryMenuGroup } from './secondarymenu.js';
+import type { IMenuGroup } from './menugroup.js';
+
+// Forward declaration for circular reference
+export type TDeesAppuiBase = HTMLElement & {
+  setAppBarMenus: (menus: IAppBarMenuItem[]) => void;
+  updateAppBarMenu: (name: string, update: Partial<IAppBarMenuItem>) => void;
+  setBreadcrumbs: (breadcrumbs: string | string[]) => void;
+  setUser: (user: IAppUser | undefined) => void;
+  setProfileMenuItems: (items: IAppBarMenuItem[]) => void;
+  setSearchVisible: (visible: boolean) => void;
+  setWindowControlsVisible: (visible: boolean) => void;
+  setMainMenu: (config: IMainMenuConfig) => void;
+  updateMainMenuGroup: (groupName: string, update: Partial<IMenuGroup>) => void;
+  addMainMenuItem: (groupName: string, tab: ITab) => void;
+  removeMainMenuItem: (groupName: string, tabKey: string) => void;
+  setMainMenuSelection: (tabKey: string) => void;
+  setMainMenuCollapsed: (collapsed: boolean) => void;
+  setMainMenuBadge: (tabKey: string, badge: string | number) => void;
+  clearMainMenuBadge: (tabKey: string) => void;
+  setSecondaryMenu: (config: { heading?: string; groups: ISecondaryMenuGroup[] }) => void;
+  updateSecondaryMenuGroup: (groupName: string, update: Partial<ISecondaryMenuGroup>) => void;
+  addSecondaryMenuItem: (groupName: string, item: ISecondaryMenuGroup['items'][0]) => void;
+  setSecondaryMenuSelection: (itemKey: string) => void;
+  clearSecondaryMenu: () => void;
+  setContentTabs: (tabs: ITab[]) => void;
+  addContentTab: (tab: ITab) => void;
+  removeContentTab: (tabKey: string) => void;
+  selectContentTab: (tabKey: string) => void;
+  getSelectedContentTab: () => ITab | undefined;
+  activityLog: IActivityLogAPI;
+  navigateToView: (viewId: string, params?: Record<string, string>) => Promise<boolean>;
+  getCurrentView: () => IViewDefinition | undefined;
+};

 /**
 * User configuration for the app bar
@@ -13,6 +46,69 @@ export interface IAppUser {
  status?: 'online' | 'offline' | 'busy' | 'away';
 }

+/**
+ * Activity entry for the activity log
+ */
+export interface IActivityEntry {
+  /** Unique identifier (auto-generated if not provided) */
+  id?: string;
+  /** Timestamp (auto-set to now if not provided) */
+  timestamp?: Date;
+  /** Activity type for icon styling */
+  type: 'login' | 'logout' | 'view' | 'create' | 'update' | 'delete' | 'custom';
+  /** User who performed the action */
+  user: string;
+  /** Activity message */
+  message: string;
+  /** Optional custom icon (overrides type-based icon) */
+  iconName?: string;
+  /** Optional additional data */
+  data?: Record<string, unknown>;
+}
+
+/**
+ * Activity log programmatic API
+ */
+export interface IActivityLogAPI {
+  /** Add a single activity entry */
+  add: (entry: IActivityEntry) => void;
+  /** Add multiple activity entries */
+  addMany: (entries: IActivityEntry[]) => void;
+  /** Clear all entries */
+  clear: () => void;
+  /** Get all entries */
+  getEntries: () => IActivityEntry[];
+  /** Filter entries */
+  filter: (criteria: { user?: string; type?: IActivityEntry['type'] }) => IActivityEntry[];
+  /** Search entries by message */
+  search: (query: string) => IActivityEntry[];
+}
+
+/**
+ * View activation context passed to onActivate lifecycle hook
+ */
+export interface IViewActivationContext {
+  /** Reference to the DeesAppuiBase instance */
+  appui: TDeesAppuiBase;
+  /** The view ID being activated */
+  viewId: string;
+  /** Route parameters if any */
+  params?: Record<string, string>;
+}
+
+/**
+ * View lifecycle hooks interface
+ * Views can implement these methods to receive lifecycle notifications
+ */
+export interface IViewLifecycle {
+  /** Called when view is activated (displayed) */
+  onActivate?: (context: IViewActivationContext) => void | Promise<void>;
+  /** Called when view is deactivated (hidden) */
+  onDeactivate?: () => void | Promise<void>;
+  /** Called before navigation away - return false or message to block */
+  canDeactivate?: () => boolean | string | Promise<boolean | string>;
+}
+
 /**
 * View definition for the view registry
 */
@@ -23,17 +119,29 @@ export interface IViewDefinition {
  name: string;
  /** Optional icon */
  iconName?: string;
-  /** The view content - can be a tag name, element class, or template function */
-  content: string | (new () => HTMLElement) | (() => TemplateResult);
+  /**
+   * The view content - can be:
+   * - Tag name string (e.g., 'my-dashboard')
+   * - Element class constructor
+   * - Template function returning TemplateResult
+   * - Async function returning any of the above (for lazy loading)
+   */
+  content:
+    | string
+    | (new () => HTMLElement)
+    | (() => TemplateResult)
+    | (() => Promise<string | (new () => HTMLElement) | (() => TemplateResult)>);
  /** Secondary menu items specific to this view */
  secondaryMenu?: ISecondaryMenuGroup[];
  /** Content tabs specific to this view */
  contentTabs?: ITab[];
-  /** Optional route path (defaults to id) */
+  /** Optional route path (defaults to id). Supports params like 'settings/:section' */
  route?: string;
  /** Badge to show on menu item */
  badge?: string | number;
  badgeVariant?: 'default' | 'success' | 'warning' | 'error';
+  /** Whether to cache this view instance (default: true) */
+  cache?: boolean;
 }

 /**
@@ -50,10 +158,18 @@ export interface IMainMenuSection {
 * Main menu configuration
 */
 export interface IMainMenuConfig {
-  /** Menu sections with view references */
+  /** Logo icon */
+  logoIcon?: string;
+  /** Logo text */
+  logoText?: string;
+  /** Menu groups with tabs */
+  groups?: IMenuGroup[];
+  /** Menu sections with view references (alternative to groups) */
  sections?: IMainMenuSection[];
-  /** Bottom pinned items (view IDs) */
+  /** Bottom pinned items (view IDs or tabs) */
  bottomItems?: string[];
+  /** Bottom tabs */
+  bottomTabs?: ITab[];
 }

 /**
@@ -77,47 +193,13 @@ export interface IBrandingConfig {
  logoText?: string;
 }

-/**
- * Routing configuration
- */
-export interface IRoutingConfig {
-  /** Routing mode */
-  mode: 'hash' | 'history' | 'external' | 'none';
-  /** Base path for history mode */
-  basePath?: string;
-  /** Default view ID to show on startup */
-  defaultView?: string;
-  /** Sync URL on view change */
-  syncUrl?: boolean;
-  /** Handle 404s - show view ID or callback */
-  notFound?: string | (() => void);
-}
-
-/**
- * State persistence configuration
- */
-export interface IStatePersistenceConfig {
-  /** Enable state persistence */
-  enabled: boolean;
-  /** Storage key prefix */
-  storageKey?: string;
-  /** Storage type */
-  storage?: 'localStorage' | 'sessionStorage' | 'memory';
-  /** What to persist */
-  persist?: {
-    mainMenuCollapsed?: boolean;
-    secondaryMenuCollapsed?: boolean;
-    selectedView?: boolean;
-    secondaryMenuSelection?: boolean;
-    collapsedGroups?: boolean;
-  };
-}
-
 /**
 * Activity log configuration
 */
 export interface IActivityLogConfig {
-  enabled?: boolean;
+  /** Whether activity log is visible */
+  visible?: boolean;
+  /** Width of activity log panel */
  width?: number;
 }

@@ -137,46 +219,15 @@ export interface IAppConfig {
  /** Main menu structure */
  mainMenu?: IMainMenuConfig;

-  /** Routing configuration */
-  routing?: IRoutingConfig;
-
-  /** State persistence configuration */
-  statePersistence?: IStatePersistenceConfig;
+  /** Default view ID to show on startup */
+  defaultView?: string;

  /** Activity log configuration */
  activityLog?: IActivityLogConfig;

-  /** Event callbacks (optional shorthand) */
+  /** Event callbacks */
  onViewChange?: (viewId: string, view: IViewDefinition) => void;
-  onSearch?: () => void;
-}
-
-/**
- * Serialized UI state for persistence
- */
-export interface IAppUIState {
-  /** Current view ID */
-  currentViewId?: string;
-  /** Main menu collapsed state */
-  mainMenuCollapsed?: boolean;
-  /** Secondary menu collapsed state */
-  secondaryMenuCollapsed?: boolean;
-  /** Selected secondary menu item key */
-  secondaryMenuSelectedKey?: string;
-  /** Collapsed group names in secondary menu */
-  collapsedGroups?: string[];
-  /** Timestamp of last save */
-  timestamp?: number;
-}
-
-/**
- * Route change event detail
- */
-export interface IRouteChangeEvent {
-  viewId: string;
-  previousViewId: string | null;
-  params?: Record<string, string>;
-  source: 'navigation' | 'popstate' | 'initial' | 'programmatic';
+  onSearch?: (query: string) => void;
 }

 /**
@@ -186,4 +237,16 @@ export interface IViewChangeEvent {
  viewId: string;
  view: IViewDefinition;
  previousView?: IViewDefinition;
+  params?: Record<string, string>;
+}
+
+/**
+ * View lifecycle event (for rxjs Subject)
+ */
+export interface IViewLifecycleEvent {
+  type: 'activated' | 'deactivated' | 'loading' | 'loaded' | 'loadError';
+  viewId: string;
+  element?: HTMLElement;
+  params?: Record<string, string>;
+  error?: unknown;
 }
--- a/ts_web/elements/interfaces/tab.ts
+++ b/ts_web/elements/interfaces/tab.ts
@@ -2,4 +2,6 @@ export interface ITab {
  key: string;
  iconName?: string;
  action: () => void;
+  badge?: string | number;
+  badgeVariant?: 'default' | 'success' | 'warning' | 'error';
 }
Author	SHA1	Message	Date
Juergen Kunz	9175799ec6	v3.4.0 Some checks failed Default (tags) / security (push) Failing after 14s Details Default (tags) / test (push) Failing after 14s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-19 13:54:37 +00:00
Juergen Kunz	eeb863b197	feat(dees-appui-base): overhaul AppUI core: replace simple view rendering with a full-featured ViewRegistry (caching, hide/show lifecycle, async lazy-loading), introduce view lifecycle hooks and activation context, add activity log API/component, remove built-in router and state manager, and update configuration interfaces and demos	2025-12-19 13:54:37 +00:00
Juergen Kunz	e697419843	v3.3.3 Some checks failed Default (tags) / security (push) Failing after 16s Details Default (tags) / test (push) Failing after 14s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-19 12:37:54 +00:00
Juergen Kunz	a69f504c2f	fix(tests): update test imports to new dees-input-wysiwyg paths	2025-12-19 12:37:54 +00:00
Juergen Kunz	2d1d9d901b	v3.3.2 Some checks failed Default (tags) / security (push) Failing after 16s Details Default (tags) / test (push) Failing after 14s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-19 12:36:12 +00:00
Juergen Kunz	811ec492d8	fix(build): update build config, bump dependencies, and adjust test import paths after element reorganization	2025-12-19 12:36:12 +00:00