v3.41.0

- Updated import paths in dees-panel, dees-pdf, dees-progressbar, dees-searchbar, dees-shopping-productcard, dees-simple-appdash, dees-speechbubble, dees-statsgrid, dees-table, dees-toast, dees-updater, and dees-windowlayer to use consistent directory structure.
- Created index.ts files for various components to streamline imports and improve modularity.
- Ensured all imports point to the correct subdirectory structure, enhancing maintainability and readability of the codebase.

.gitignore

@@ -3,7 +3,6 @@
 # artifacts
 coverage/
 public/
-pages/
 
 # installs
 node_modules/
@@ -18,3 +17,4 @@ dist/
 dist_*/
 
 # custom
+.playwright-mcp/

.gitlab-ci.yml

@@ -1,128 +0,0 @@
-# gitzone ci_default
-image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-
-cache:
-  paths:
-    - .npmci_cache/
-  key: '$CI_BUILD_STAGE'
-
-stages:
-  - security
-  - test
-  - release
-  - metadata
-
-before_script:
-  - pnpm install -g pnpm
-  - pnpm install -g @shipzone/npmci
-  - npmci npm prepare
-
-# ====================
-# security stage
-# ====================
-# ====================
-# security stage
-# ====================
-auditProductionDependencies:
-  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-  stage: security
-  script:
-     - npmci command npm config set registry https://registry.npmjs.org
-     - npmci command pnpm audit --audit-level=high --prod
-  tags:
-    - lossless
-    - docker
-  allow_failure: true
-
-auditDevDependencies:
-  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-  stage: security
-  script:
-    - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command pnpm audit --audit-level=high --dev
-  tags:
-    - lossless
-    - docker
-  allow_failure: true
-
-# ====================
-# test stage
-# ====================
-
-testStable:
-  stage: test
-  script:
-    - npmci node install stable
-    - npmci npm install
-    - npmci npm test
-  coverage: /\d+.?\d+?\%\s*coverage/
-  tags:
-    - docker
-
-testBuild:
-  stage: test
-  script:
-    - npmci node install stable
-    - npmci npm install
-    - npmci npm build
-  coverage: /\d+.?\d+?\%\s*coverage/
-  tags:
-    - docker
-
-release:
-  stage: release
-  script:
-    - npmci node install stable
-    - npmci npm publish
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-# ====================
-# metadata stage
-# ====================
-codequality:
-  stage: metadata
-  allow_failure: true
-  only:
-    - tags
-  script:
-    - npmci command npm install -g typescript
-    - npmci npm prepare
-    - npmci npm install
-  tags:
-    - lossless
-    - docker
-    - priv
-
-trigger:
-  stage: metadata
-  script:
-    - npmci trigger
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-pages:
-  stage: metadata
-  script:
-    - npmci node install stable
-    - npmci npm install
-    - npmci command npm run buildDocs
-  tags:
-    - lossless
-    - docker
-    - notpriv
-  only:
-    - tags
-  artifacts:
-    expire_in: 1 week
-    paths:
-      - public
-  allow_failure: true

npmextra.json

@@ -1,18 +1,66 @@
 {
-  "gitzone": {
+  "@git.zone/cli": {
     "projectType": "wcc",
     "module": {
-      "githost": "gitlab.com",
+      "githost": "code.foss.global",
       "gitscope": "design.estate",
       "gitrepo": "dees-catalog",
-      "description": "a webcomponents catalog for handling daily stuff on the web",
+      "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
       "npmPackagename": "@design.estate/dees-catalog",
       "license": "MIT",
-      "projectDomain": "design.estate"
+      "projectDomain": "design.estate",
+      "keywords": [
+        "Web Components",
+        "User Interface",
+        "UI Library",
+        "Component Library",
+        "JavaScript",
+        "TypeScript",
+        "Dynamic Components",
+        "Modular Architecture",
+        "Reusable Components",
+        "Web Development",
+        "Application UI",
+        "Custom Elements",
+        "Shadow DOM",
+        "UI Elements",
+        "Dashboard Interfaces",
+        "Form Handling",
+        "Data Display",
+        "Visualization",
+        "Charting",
+        "Interactive Components",
+        "Responsive Design",
+        "Web Applications",
+        "Modern Web",
+        "Frontend Development"
+      ]
+    },
+    "release": {
+      "registries": [
+        "https://verdaccio.lossless.digital",
+        "https://registry.npmjs.org"
+      ],
+      "accessLevel": "public"
     }
   },
-  "npmci": {
-    "npmGlobalTools": [],
-    "npmAccessLevel": "public"
+  "@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": []
+  },
+  "@git.zone/tsbundle": {
+    "bundles": [
+      {
+        "from": "./ts_web/index.ts",
+        "to": "./dist_bundle/bundle.js",
+        "outputMode": "bundle",
+        "bundler": "esbuild"
+      }
+    ]
+  },
+  "@git.zone/tswatch": {
+    "preset": "element"
   }
 }

package.json

@@ -1,48 +1,55 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.0.286",
+  "version": "3.41.0",
   "private": false,
-  "description": "website for lossless.com",
+  "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",
   "typings": "dist_ts_web/index.d.ts",
   "type": "module",
   "scripts": {
-    "test": "tstest test/ --web",
-    "build": "tsbuild element --allowimplicitany && tsbundle element --production",
-    "watch": "tswatch element",
-    "buildDocs": "tsdoc"
+    "test": "tstest test/ --web --verbose --timeout 30 --logfile",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle",
+    "watch": "tswatch",
+    "buildDocs": "tsdoc",
+    "postinstall": "node scripts/update-monaco-version.cjs"
   },
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.57",
-    "@design.estate/dees-element": "^2.0.34",
-    "@design.estate/dees-wcctools": "^1.0.87",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@design.estate/dees-domtools": "^2.3.7",
+    "@design.estate/dees-element": "^2.1.5",
+    "@design.estate/dees-wcctools": "^3.8.0",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-brands-svg-icons": "^7.1.0",
+    "@fortawesome/free-regular-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@push.rocks/smarti18n": "^1.0.4",
-    "@push.rocks/smartpromise": "^4.0.3",
-    "@push.rocks/smartstring": "^4.0.13",
-    "@tsclass/tsclass": "^4.0.46",
-    "@webcontainer/api": "^1.1.9",
-    "apexcharts": "^3.45.2",
-    "highlight.js": "11.9.0",
-    "ibantools": "^4.3.9",
-    "monaco-editor": "^0.45.0",
-    "pdfjs-dist": "^4.0.379",
+    "@push.rocks/smartpromise": "^4.2.0",
+    "@push.rocks/smartstring": "^4.1.0",
+    "@tempfix/webcontainer__api": "1.6.1",
+    "@tiptap/core": "^2.23.0",
+    "@tiptap/extension-link": "^2.23.0",
+    "@tiptap/extension-text-align": "^2.23.0",
+    "@tiptap/extension-typography": "^2.23.0",
+    "@tiptap/extension-underline": "^2.23.0",
+    "@tiptap/starter-kit": "^2.23.0",
+    "@tsclass/tsclass": "^9.3.0",
+    "apexcharts": "^5.3.6",
+    "highlight.js": "11.11.1",
+    "ibantools": "^4.5.1",
+    "lucide": "^0.563.0",
+    "monaco-editor": "0.55.1",
+    "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^2.1.72",
-    "@git.zone/tsbundle": "^2.0.15",
-    "@git.zone/tstest": "^1.0.86",
-    "@git.zone/tswatch": "^2.0.23",
+    "@git.zone/tsbuild": "^4.1.2",
+    "@git.zone/tsbundle": "^2.8.3",
+    "@git.zone/tstest": "^3.1.8",
+    "@git.zone/tswatch": "^3.0.1",
     "@push.rocks/projectinfo": "^5.0.2",
-    "@push.rocks/tapbundle": "^5.0.15",
-    "@types/node": "^20.11.16"
+    "@types/node": "^25.0.10"
   },
   "files": [
     "ts/**/*",
@@ -58,5 +65,32 @@
   ],
   "browserslist": [
     "last 1 chrome versions"
-  ]
+  ],
+  "keywords": [
+    "Web Components",
+    "User Interface",
+    "UI Library",
+    "Component Library",
+    "JavaScript",
+    "TypeScript",
+    "Dynamic Components",
+    "Modular Architecture",
+    "Reusable Components",
+    "Web Development",
+    "Application UI",
+    "Custom Elements",
+    "Shadow DOM",
+    "UI Elements",
+    "Dashboard Interfaces",
+    "Form Handling",
+    "Data Display",
+    "Visualization",
+    "Charting",
+    "Interactive Components",
+    "Responsive Design",
+    "Web Applications",
+    "Modern Web",
+    "Frontend Development"
+  ],
+  "packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
 }

readme.info.md

@@ -0,0 +1,80 @@
+# Contributor Information
+
+This reference consolidates the helper notes previously split across `codex.md` and `CLAUDE.md`. Use it to get oriented quickly when working on `@design.estate/dees-catalog`, a TypeScript/Lit web-components library that ships themed UI building blocks for modern web applications.
+
+## Project Snapshot
+- Package: `@design.estate/dees-catalog`
+- Description: Comprehensive catalog of reusable web components with cohesive design, advanced form inputs, data displays, and layout scaffolding.
+- Entry points: builds ship to `dist_ts_web/` (ES modules) and `dist_bundle/` (browser bundle); demos live in `html/`.
+- Type system: strict TypeScript targeting modern browsers (see `tsconfig.json`).
+
+## Repository Layout
+- `ts_web/` – TypeScript source
+  - `elements/` – component implementations (`00*.ts` shared utilities, `dees-*.ts` components, `*.demo.ts` demos)
+  - `pages/` – showcase pages aggregating demos
+  - `index.ts` – main export surface
+- `html/` – demo entry point bootstrapping bundles
+- `dist_bundle/`, `dist_ts_web/`, `dist_watch/` – build outputs (production, module, and watch bundles)
+- `test/` – browser/node tests powered by `@push.rocks/tapbundle`
+- `scripts/` – maintenance utilities (e.g., Monaco version sync postinstall)
+
+## Build & Development Commands
+All workflows use pnpm (see `package.json`).
+
+```bash
+pnpm install           # install dependencies
+pnpm run build         # tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild
+pnpm run watch         # tswatch element (development watch/dev server)
+pnpm test              # tstest test/ --web --verbose --timeout 30 --logfile
+pnpm run buildDocs     # tsdoc (generates docs)
+tsx test/test.file.ts  # run a specific test file (file must be named test.*)
+```
+
+`postinstall` runs `node scripts/update-monaco-version.cjs` to sync the Monaco editor version, so keep the script intact when updating dependencies.
+
+## Testing Guidelines
+- Framework: `@push.rocks/tapbundle` with smartexpect assertions. Always review https://code.foss.global/push.rocks/smartexpect/raw/branch/master/readme.md when adding tests.
+- Import pattern:
+  ```typescript
+  import { tap, expect } from '@push.rocks/tapbundle';
+  ```
+- Test naming: `test.*.both.ts` for dual runtime, `.node.ts` for Node-only, `.browser.ts` for browser-only suites.
+- Prefer `pnpm test` for full runs; use `tsx` for focused debugging. Type-check failing tests with `tsc --noEmit`.
+- Logs live under `.nogit/testlogs/`; put ad-hoc debug artefacts in `.nogit/debug/`.
+
+## Component Architecture
+- **Base pattern**: Components extend `DeesElement` from `@design.estate/dees-element`, use Lit decorators (`@customElement`, `@property`), and combine `cssManager.defaultStyles` with component styles. Rendering happens via Lit `html` templates; demos sit on a static `demo` property referencing a `.demo.ts` module.
+- **Theming**: `cssManager.bdTheme(light, dark)` selects theme-aware values. Shared palettes live in `ts_web/elements/00colors.ts`.
+- **Z-index management**: Overlays consult the registry in `ts_web/elements/00zindex.ts` (`ZIndexRegistry`) to coordinate stacking.
+- **Component families**:
+  - Core UI (`dees-button`, `dees-badge`, `dees-icon`, …) focus on consistent theming and interactions.
+  - Form inputs (`dees-form`, `dees-input-*`) build on `DeesInputBase` and communicate through subjects/events for validation.
+  - Layout shells (`dees-appui-*`) orchestrate responsive app frames with centralized event rebroadcasts.
+  - Data views (`dees-table`, `dees-dataview-*`, `dees-statsgrid`) handle large datasets with virtualisation and chart integrations.
+  - Overlays (`dees-modal`, `dees-contextmenu`, `dees-toast`) respect the z-index registry and use shared window-layer utilities.
+- **WYSIWYG editor**: `dees-input-wysiwyg` coordinates specialized handler classes (`WysiwygInputHandler`, `WysiwygKeyboardHandler`, drag/drop & modal managers) and global menus (`DeesSlashMenu`, `DeesFormattingMenu`). Rendering is imperative to preserve caret focus.
+
+## Implementation Guidelines
+- Import external modules through `ts_web/elements/00plugins.ts`: `import * as plugins from './plugins.ts';` then reference `plugins.moduleName`.
+- When creating new components:
+  1. Extend `DeesElement` and decorate with `@customElement('dees-component')`.
+  2. Support theming, slots, and accessibility; provide meaningful default styles.
+  3. Expose a `.demo.ts` for the component and re-export via `elements/index.ts`.
+- Form components must implement `getValue()` / `setValue()` and emit through `changeSubject` while honoring `disabled` and `required` states.
+- Overlay components retrieve z-indices from the registry, register/unregister on show/hide, and use `DeesWindowLayer` for backdrops when appropriate.
+- Avoid simplifying away functionality; prefer small, targeted changes and keep compatibility with existing APIs.
+
+## Common Patterns & Pitfalls
+- Focus management: schedule DOM updates with `requestAnimationFrame` inside interactive editors to avoid focus loss.
+- Event handling: stop propagation where nested interactive elements coexist; mix pointer and keyboard handling for accessibility.
+- Performance: heavy blocks/components may load lazily; charts use debounced observers, tables rely on virtual scrolling. Watch bundle size when adding dependencies.
+
+## Documentation & Demos
+- `readme.md` surfaces component overviews; demos in `.demo.ts` illustrate real usage.
+- Update this `readme.info.md` when architectural patterns or workflows change so contributors stay in sync.
+
+## Recent Highlights
+- Z-index registry overhaul enables dynamic stacking control across overlays.
+- WYSIWYG refactor separated block handlers for maintainability.
+- Dashboard grid enhancements added live drag-and-drop previews and overlap fixes.
+- Monaco editor integration now reads the installed version at build time.

readme.playbook.md

@@ -0,0 +1,784 @@
+# UI Components Playbook
+
+This playbook provides comprehensive guidance for creating and maintaining UI components in the @design.estate/dees-catalog library. Follow these patterns and best practices to ensure consistency, maintainability, and quality.
+
+## Table of Contents
+
+1. [Component Creation Checklist](#component-creation-checklist)
+2. [Architectural Patterns](#architectural-patterns)
+3. [Component Types and Base Classes](#component-types-and-base-classes)
+4. [Theming System](#theming-system)
+5. [Event Handling](#event-handling)
+6. [State Management](#state-management)
+7. [Form Components](#form-components)
+8. [Overlay Components](#overlay-components)
+9. [Complex Components](#complex-components)
+10. [Performance Optimization](#performance-optimization)
+11. [Focus Management](#focus-management)
+12. [Demo System](#demo-system)
+13. [Common Pitfalls and Anti-patterns](#common-pitfalls-and-anti-patterns)
+14. [Code Examples](#code-examples)
+
+## Component Creation Checklist
+
+When creating a new component, follow this checklist:
+
+- [ ] Choose the appropriate base class (`DeesElement` or `DeesInputBase`)
+- [ ] Use `@customElement('dees-componentname')` decorator
+- [ ] Implement consistent theming with `cssManager.bdTheme()`
+- [ ] Create demo function in separate `.demo.ts` file
+- [ ] Export component from `ts_web/elements/index.ts`
+- [ ] Use proper TypeScript types and interfaces (prefix with `I` for interfaces, `T` for types)
+- [ ] Implement proper event handling with bubbling and composition
+- [ ] Consider mobile responsiveness
+- [ ] Add focus states for accessibility
+- [ ] Clean up resources in `destroy()` method
+- [ ] Follow lowercase naming convention for files
+- [ ] Add z-index registry support if it's an overlay component
+
+## Architectural Patterns
+
+### Base Component Structure
+
+```typescript
+import { customElement, property, state, css, TemplateResult, html } from '@design.estate/dees-element';
+import { DeesElement } from '@design.estate/dees-element';
+import * as cssManager from './00colors.js';
+import * as demoFunc from './dees-componentname.demo.js';
+
+@customElement('dees-componentname')
+export class DeesComponentName extends DeesElement {
+  // Static demo reference
+  public static demo = demoFunc.demoFunc;
+
+  // Public properties (reactive, can be set via attributes)
+  @property({ type: String })
+  public label: string = '';
+
+  @property({ type: Boolean, reflect: true })
+  public disabled: boolean = false;
+
+  // Internal state (reactive, but not exposed as attributes)
+  @state()
+  private internalState: string = '';
+
+  // Static styles with theme support
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+      }
+    `
+  ];
+
+  // Render method
+  public render(): TemplateResult {
+    return html`
+      <div class="main-container">
+        <!-- Component content -->
+      </div>
+    `;
+  }
+
+  // Lifecycle methods
+  public connectedCallback() {
+    super.connectedCallback();
+    // Setup that needs DOM access
+  }
+
+  public async firstUpdated() {
+    // One-time initialization after first render
+  }
+
+  // Cleanup
+  public destroy() {
+    // Clean up listeners, observers, registrations
+    super.destroy();
+  }
+}
+```
+
+### Advanced Patterns
+
+#### 1. Separation of Concerns (Complex Components)
+
+For complex components like WYSIWYG editors, separate concerns into handler classes:
+
+```typescript
+export class DeesComplexComponent extends DeesElement {
+  // Orchestrator pattern - main component coordinates handlers
+  private inputHandler: InputHandler;
+  private stateHandler: StateHandler;
+  private renderHandler: RenderHandler;
+
+  constructor() {
+    super();
+    this.inputHandler = new InputHandler(this);
+    this.stateHandler = new StateHandler(this);
+    this.renderHandler = new RenderHandler(this);
+  }
+}
+```
+
+#### 2. Singleton Pattern (Global Components)
+
+For global UI elements like menus:
+
+```typescript
+export class DeesGlobalMenu extends DeesElement {
+  private static instance: DeesGlobalMenu;
+
+  public static getInstance(): DeesGlobalMenu {
+    if (!DeesGlobalMenu.instance) {
+      DeesGlobalMenu.instance = new DeesGlobalMenu();
+      document.body.appendChild(DeesGlobalMenu.instance);
+    }
+    return DeesGlobalMenu.instance;
+  }
+}
+```
+
+#### 3. Registry Pattern (Z-Index Management)
+
+Use centralized registries for global state:
+
+```typescript
+class ComponentRegistry {
+  private static instance: ComponentRegistry;
+  private registry = new WeakMap<HTMLElement, number>();
+  
+  public register(element: HTMLElement, value: number) {
+    this.registry.set(element, value);
+  }
+  
+  public unregister(element: HTMLElement) {
+    this.registry.delete(element);
+  }
+}
+```
+
+## Component Types and Base Classes
+
+### Standard Component (extends DeesElement)
+
+Use for most UI components:
+- Buttons, badges, icons
+- Layout components
+- Data display components
+- Overlay components
+
+### Form Input Component (extends DeesInputBase)
+
+Use for all form inputs:
+- Text inputs, dropdowns, checkboxes
+- Date pickers, file uploads
+- Rich text editors
+
+**Required implementations:**
+```typescript
+export class DeesInputCustom extends DeesInputBase<ValueType> {
+  // Required: Get current value
+  public getValue(): ValueType {
+    return this.value;
+  }
+
+  // Required: Set value programmatically
+  public setValue(value: ValueType): void {
+    this.value = value;
+    this.changeSubject.next(this); // Notify form
+  }
+
+  // Optional: Custom validation
+  public async validate(): Promise<boolean> {
+    // Custom validation logic
+    return true;
+  }
+}
+```
+
+## Theming System
+
+### DO: Use Theme Functions
+
+Always use `cssManager.bdTheme()` for colors that change between themes:
+
+```typescript
+// ✅ CORRECT
+background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+color: ${cssManager.bdTheme('#000000', '#ffffff')};
+border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333333')};
+
+// ❌ INCORRECT
+background: #ffffff; // Hard-coded color
+color: var(--custom-color); // Custom CSS variable
+```
+
+### DO: Use Consistent Color Values
+
+Reference shared color constants when possible:
+
+```typescript
+// From 00colors.ts
+background: ${cssManager.bdTheme(colors.bright.background, colors.dark.background)};
+```
+
+## Event Handling
+
+### DO: Dispatch Custom Events Properly
+
+```typescript
+// ✅ CORRECT - Events bubble and cross shadow DOM
+this.dispatchEvent(new CustomEvent('dees-componentname-change', {
+  detail: { value: this.value },
+  bubbles: true,
+  composed: true
+}));
+
+// ❌ INCORRECT - Event won't propagate properly
+this.dispatchEvent(new CustomEvent('change', {
+  detail: { value: this.value }
+  // Missing bubbles and composed
+}));
+```
+
+### DO: Use Event Delegation
+
+For dynamic content, use event delegation:
+
+```typescript
+// ✅ CORRECT - Single listener for all items
+this.addEventListener('click', (e: MouseEvent) => {
+  const item = (e.target as HTMLElement).closest('.item');
+  if (item) {
+    this.handleItemClick(item);
+  }
+});
+
+// ❌ INCORRECT - Multiple listeners
+this.items.forEach(item => {
+  item.addEventListener('click', () => this.handleItemClick(item));
+});
+```
+
+## State Management
+
+### DO: Use Appropriate Property Decorators
+
+```typescript
+// Public API - use @property
+@property({ type: String })
+public label: string;
+
+// Internal state - use @state
+@state()
+private isLoading: boolean = false;
+
+// Reflect to attribute when needed
+@property({ type: Boolean, reflect: true })
+public disabled: boolean = false;
+```
+
+### DON'T: Manipulate State in Render
+
+```typescript
+// ❌ INCORRECT - Side effects in render
+public render() {
+  this.counter++; // Don't modify state
+  return html`<div>${this.counter}</div>`;
+}
+
+// ✅ CORRECT - Pure render function
+public render() {
+  return html`<div>${this.counter}</div>`;
+}
+```
+
+## Form Components
+
+### DO: Extend DeesInputBase
+
+All form inputs must extend the base class:
+
+```typescript
+export class DeesInputNew extends DeesInputBase<string> {
+  // Inherits: key, label, value, required, disabled, validationState
+}
+```
+
+### DO: Emit Changes Consistently
+
+```typescript
+private handleInput(e: Event) {
+  this.value = (e.target as HTMLInputElement).value;
+  this.changeSubject.next(this); // Notify form system
+}
+```
+
+### DO: Support Standard Form Properties
+
+```typescript
+// All form inputs should support:
+@property() public key: string;
+@property() public label: string;
+@property() public required: boolean = false;
+@property() public disabled: boolean = false;
+@property() public validationState: 'valid' | 'warn' | 'invalid';
+```
+
+## Overlay Components
+
+### DO: Use Z-Index Registry
+
+Never hardcode z-index values:
+
+```typescript
+// ✅ CORRECT
+import { zIndexRegistry } from './00zindex.js';
+
+public async show() {
+  this.modalZIndex = zIndexRegistry.getNextZIndex();
+  zIndexRegistry.register(this, this.modalZIndex);
+  this.style.zIndex = `${this.modalZIndex}`;
+}
+
+public async hide() {
+  zIndexRegistry.unregister(this);
+}
+
+// ❌ INCORRECT
+public async show() {
+  this.style.zIndex = '9999'; // Hardcoded z-index
+}
+```
+
+### DO: Use Window Layers
+
+For modal backdrops:
+
+```typescript
+import { DeesWindowLayer } from './dees-windowlayer.js';
+
+private windowLayer: DeesWindowLayer;
+
+public async show() {
+  this.windowLayer = new DeesWindowLayer();
+  this.windowLayer.zIndex = zIndexRegistry.getNextZIndex();
+  document.body.append(this.windowLayer);
+}
+```
+
+## Complex Components
+
+### DO: Use Handler Classes
+
+For complex logic, separate into specialized handlers:
+
+```typescript
+// wysiwyg/handlers/input.handler.ts
+export class InputHandler {
+  constructor(private component: DeesInputWysiwyg) {}
+  
+  public handleInput(event: InputEvent) {
+    // Specialized input handling
+  }
+}
+
+// Main component orchestrates
+export class DeesInputWysiwyg extends DeesInputBase {
+  private inputHandler = new InputHandler(this);
+}
+```
+
+### DO: Use Programmatic Rendering
+
+For performance-critical updates that shouldn't trigger re-renders:
+
+```typescript
+// ✅ CORRECT - Direct DOM manipulation when needed
+private updateBlockContent(blockId: string, content: string) {
+  const blockElement = this.shadowRoot.querySelector(`#${blockId}`);
+  if (blockElement) {
+    blockElement.textContent = content; // Direct update
+  }
+}
+
+// ❌ INCORRECT - Triggering full re-render
+private updateBlockContent(blockId: string, content: string) {
+  this.blocks.find(b => b.id === blockId).content = content;
+  this.requestUpdate(); // Unnecessary re-render
+}
+```
+
+## Performance Optimization
+
+### DO: Debounce Expensive Operations
+
+```typescript
+private resizeTimeout: number;
+
+private handleResize = () => {
+  clearTimeout(this.resizeTimeout);
+  this.resizeTimeout = window.setTimeout(() => {
+    this.updateLayout();
+  }, 250);
+};
+```
+
+### DO: Use Observers Efficiently
+
+```typescript
+// Clean up observers
+public disconnectedCallback() {
+  super.disconnectedCallback();
+  this.resizeObserver?.disconnect();
+  this.mutationObserver?.disconnect();
+}
+```
+
+### DO: Implement Virtual Scrolling
+
+For large lists:
+
+```typescript
+// Only render visible items
+private getVisibleItems() {
+  const scrollTop = this.scrollContainer.scrollTop;
+  const containerHeight = this.scrollContainer.clientHeight;
+  const itemHeight = 50;
+  
+  const startIndex = Math.floor(scrollTop / itemHeight);
+  const endIndex = Math.ceil((scrollTop + containerHeight) / itemHeight);
+  
+  return this.items.slice(startIndex, endIndex);
+}
+```
+
+## Focus Management
+
+### DO: Handle Focus Timing
+
+```typescript
+// ✅ CORRECT - Wait for render
+async focusInput() {
+  await this.updateComplete;
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  this.inputElement?.focus();
+}
+
+// ❌ INCORRECT - Focus too early
+focusInput() {
+  this.inputElement?.focus(); // Element might not exist
+}
+```
+
+### DO: Prevent Focus Loss
+
+```typescript
+// For global menus
+constructor() {
+  super();
+  // Prevent focus loss when clicking menu
+  this.addEventListener('mousedown', (e) => {
+    e.preventDefault();
+  });
+}
+```
+
+### DO: Implement Blur Debouncing
+
+```typescript
+private blurTimeout: number;
+
+private handleBlur = () => {
+  clearTimeout(this.blurTimeout);
+  this.blurTimeout = window.setTimeout(() => {
+    // Check if truly blurred
+    if (!this.contains(document.activeElement)) {
+      this.handleTrueBlur();
+    }
+  }, 100);
+};
+```
+
+## Demo System
+
+### DO: Create Comprehensive Demos
+
+Every component needs a demo:
+
+```typescript
+// dees-button.demo.ts
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <dees-button>Default Button</dees-button>
+  <dees-button type="primary">Primary Button</dees-button>
+  <dees-button type="danger" disabled>Disabled Danger</dees-button>
+`;
+
+// In component file
+import * as demoFunc from './dees-button.demo.js';
+
+export class DeesButton extends DeesElement {
+  public static demo = demoFunc.demoFunc;
+}
+```
+
+### DO: Include All Variants
+
+Show all component states and variations in demos:
+- Default state
+- Different types/variants
+- Disabled state
+- Loading state
+- Error states
+- Edge cases (long text, empty content)
+
+## Common Pitfalls and Anti-patterns
+
+### ❌ DON'T: Hardcode Z-Index Values
+
+```typescript
+// ❌ WRONG
+this.style.zIndex = '9999';
+
+// ✅ CORRECT
+this.style.zIndex = `${zIndexRegistry.getNextZIndex()}`;
+```
+
+### ❌ DON'T: Skip Base Classes
+
+```typescript
+// ❌ WRONG - Form input without base class
+export class DeesInputCustom extends DeesElement {
+  // Missing standard form functionality
+}
+
+// ✅ CORRECT
+export class DeesInputCustom extends DeesInputBase<string> {
+  // Inherits all form functionality
+}
+```
+
+### ❌ DON'T: Forget Theme Support
+
+```typescript
+// ❌ WRONG
+background-color: #ffffff;
+color: #000000;
+
+// ✅ CORRECT
+background-color: ${cssManager.bdTheme('#ffffff', '#09090b')};
+color: ${cssManager.bdTheme('#000000', '#ffffff')};
+```
+
+### ❌ DON'T: Create Components Without Demos
+
+```typescript
+// ❌ WRONG
+export class DeesComponent extends DeesElement {
+  // No demo property
+}
+
+// ✅ CORRECT
+export class DeesComponent extends DeesElement {
+  public static demo = demoFunc.demoFunc;
+}
+```
+
+### ❌ DON'T: Emit Non-Bubbling Events
+
+```typescript
+// ❌ WRONG
+this.dispatchEvent(new CustomEvent('change', {
+  detail: this.value
+}));
+
+// ✅ CORRECT
+this.dispatchEvent(new CustomEvent('change', {
+  detail: this.value,
+  bubbles: true,
+  composed: true
+}));
+```
+
+### ❌ DON'T: Skip Cleanup
+
+```typescript
+// ❌ WRONG
+public connectedCallback() {
+  window.addEventListener('resize', this.handleResize);
+}
+
+// ✅ CORRECT
+public connectedCallback() {
+  super.connectedCallback();
+  window.addEventListener('resize', this.handleResize);
+}
+
+public disconnectedCallback() {
+  super.disconnectedCallback();
+  window.removeEventListener('resize', this.handleResize);
+}
+```
+
+### ❌ DON'T: Use Inline Styles for Theming
+
+```typescript
+// ❌ WRONG
+<div style="background-color: ${this.darkMode ? '#000' : '#fff'}">
+
+// ✅ CORRECT
+<div class="themed-container">
+// In styles:
+.themed-container {
+  background-color: ${cssManager.bdTheme('#ffffff', '#000000')};
+}
+```
+
+### ❌ DON'T: Forget Mobile Responsiveness
+
+```typescript
+// ❌ WRONG
+:host {
+  width: 800px; // Fixed width
+}
+
+// ✅ CORRECT
+:host {
+  width: 100%;
+  max-width: 800px;
+}
+
+@media (max-width: 768px) {
+  :host {
+    /* Mobile adjustments */
+  }
+}
+```
+
+## Code Examples
+
+### Example: Creating a New Button Variant
+
+```typescript
+// dees-special-button.ts
+import { customElement, property, css, html } from '@design.estate/dees-element';
+import { DeesElement } from '@design.estate/dees-element';
+import * as cssManager from './00colors.js';
+import * as demoFunc from './dees-special-button.demo.js';
+
+@customElement('dees-special-button')
+export class DeesSpecialButton extends DeesElement {
+  public static demo = demoFunc.demoFunc;
+
+  @property({ type: String })
+  public text: string = 'Click me';
+
+  @property({ type: Boolean, reflect: true })
+  public loading: boolean = false;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: inline-block;
+      }
+
+      .button {
+        padding: 8px 16px;
+        background: ${cssManager.bdTheme('#0066ff', '#0044cc')};
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+
+      .button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(0,0,0,0.3)')};
+      }
+
+      :host([loading]) .button {
+        opacity: 0.7;
+        cursor: not-allowed;
+      }
+    `
+  ];
+
+  public render() {
+    return html`
+      <button class="button" ?disabled=${this.loading} @click=${this.handleClick}>
+        ${this.loading ? html`<dees-spinner size="small"></dees-spinner>` : this.text}
+      </button>
+    `;
+  }
+
+  private handleClick() {
+    this.dispatchEvent(new CustomEvent('special-click', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+}
+```
+
+### Example: Creating a Form Input
+
+```typescript
+// dees-input-special.ts
+export class DeesInputSpecial extends DeesInputBase<string> {
+  public static demo = demoFunc.demoFunc;
+
+  public render() {
+    return html`
+      <dees-label .label=${this.label} .required=${this.required}>
+        <input
+          type="text"
+          .value=${this.value || ''}
+          ?disabled=${this.disabled}
+          @input=${this.handleInput}
+          @blur=${this.handleBlur}
+        />
+      </dees-label>
+    `;
+  }
+
+  private handleInput(e: Event) {
+    this.value = (e.target as HTMLInputElement).value;
+    this.changeSubject.next(this);
+  }
+
+  private handleBlur() {
+    this.dispatchEvent(new CustomEvent('blur', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  public getValue(): string {
+    return this.value;
+  }
+
+  public setValue(value: string): void {
+    this.value = value;
+    this.changeSubject.next(this);
+  }
+}
+```
+
+## Summary
+
+This playbook represents the collective wisdom and patterns found in the @design.estate/dees-catalog component library. Following these guidelines will help you create components that are:
+
+- **Consistent**: Following established patterns
+- **Maintainable**: Easy to understand and modify
+- **Performant**: Optimized for real-world use
+- **Accessible**: Usable by everyone
+- **Theme-aware**: Supporting light and dark modes
+- **Well-integrated**: Working seamlessly with the component ecosystem
+
+Remember: When in doubt, look at existing components for examples. The codebase itself is the best documentation of these patterns in action.

scripts/update-monaco-version.cjs

@@ -0,0 +1,44 @@
+#!/usr/bin/env node
+const fs = require('fs');
+const path = require('path');
+
+const projectRoot = path.resolve(__dirname, '..');
+
+function resolveMonacoPackageJson() {
+  try {
+    const resolvedPath = require.resolve('monaco-editor/package.json', {
+      paths: [projectRoot],
+    });
+    return resolvedPath;
+  } catch (error) {
+    console.error('[dees-workspace] Unable to resolve monaco-editor/package.json');
+    throw error;
+  }
+}
+
+function getMonacoVersion() {
+  const monacoPackagePath = resolveMonacoPackageJson();
+  const monacoPackage = require(monacoPackagePath);
+  if (!monacoPackage.version) {
+    throw new Error('[dees-workspace] monaco-editor/package.json does not expose a version field');
+  }
+  return monacoPackage.version;
+}
+
+function writeVersionModule(version) {
+  const targetDir = path.join(projectRoot, 'ts_web', 'elements', '00group-workspace', 'dees-workspace-monaco');
+  fs.mkdirSync(targetDir, { recursive: true });
+  const targetFile = path.join(targetDir, 'version.ts');
+  const fileContent = `// Auto-generated by scripts/update-monaco-version.cjs\nexport const MONACO_VERSION = '${version}';\n`;
+  fs.writeFileSync(targetFile, fileContent, 'utf8');
+  console.log(`[dees-workspace] Wrote ${path.relative(projectRoot, targetFile)} with monaco-editor@${version}`);
+}
+
+try {
+  const version = getMonacoVersion();
+  writeVersionModule(version);
+} catch (error) {
+  console.error('[dees-workspace] Failed to update Monaco version module.');
+  console.error(error instanceof Error ? error.message : error);
+  process.exitCode = 1;
+}

test/test.chromium.ts

@@ -1,6 +1,6 @@
-import { tap, expect, webhelpers } from '@push.rocks/tapbundle';
+import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';
 
-import * as deesCatalog from '../ts_web';
+import * as deesCatalog from '../ts_web/index.js';
 
 tap.test('should create a working button', async () => {
   const button: deesCatalog.DeesButton = await webhelpers.fixture(
@@ -9,4 +9,4 @@ tap.test('should create a working button', async () => {
   expect(button).toBeInstanceOf(deesCatalog.DeesButton);
 });
 
-tap.start();
+export default tap.start();

test/test.contextmenu-demo.chromium.ts

@@ -0,0 +1,35 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
+import { demoFunc } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.demo.js';
+
+tap.test('should render context menu demo', async () => {
+  // Create demo container
+  const demoContainer = document.createElement('div');
+  document.body.appendChild(demoContainer);
+  
+  // Render the demo
+  const demoContent = demoFunc();
+  
+  // Create a temporary element to hold the rendered template
+  const tempDiv = document.createElement('div');
+  tempDiv.innerHTML = demoContent.strings.join('');
+  
+  // Check that panels are rendered
+  const panels = tempDiv.querySelectorAll('dees-panel');
+  expect(panels.length).toEqual(4);
+  
+  // Check panel headings
+  expect(panels[0].getAttribute('heading')).toEqual('Basic Context Menu with Nested Submenus');
+  expect(panels[1].getAttribute('heading')).toEqual('Component-Specific Context Menu');
+  expect(panels[2].getAttribute('heading')).toEqual('Advanced Context Menu Example');
+  expect(panels[3].getAttribute('heading')).toEqual('Static Context Menu (Always Visible)');
+  
+  // Check that static context menu exists
+  const staticMenu = tempDiv.querySelector('dees-contextmenu');
+  expect(staticMenu).toBeTruthy();
+  
+  // Clean up
+  demoContainer.remove();
+});
+
+export default tap.start();

test/test.contextmenu-nested-close.chromium.ts

@@ -0,0 +1,93 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
+
+tap.test('should close all parent menus when clicking action in nested submenu', async () => {
+  let actionCalled = false;
+  
+  // Create a test element
+  const testDiv = document.createElement('div');
+  testDiv.style.width = '300px';
+  testDiv.style.height = '300px';
+  testDiv.style.background = '#f0f0f0';
+  testDiv.innerHTML = 'Right-click for nested menu test';
+  document.body.appendChild(testDiv);
+  
+  // Simulate right-click to open context menu
+  const contextMenuEvent = new MouseEvent('contextmenu', {
+    clientX: 150,
+    clientY: 150,
+    bubbles: true,
+    cancelable: true
+  });
+  
+  // Open context menu with nested structure
+  DeesContextmenu.openContextMenuWithOptions(contextMenuEvent, [
+    {
+      name: 'Parent Item',
+      iconName: 'folder',
+      action: async () => {}, // Parent items with submenus need an action
+      submenu: [
+        {
+          name: 'Child Item',
+          iconName: 'file',
+          action: async () => {
+            actionCalled = true;
+            console.log('Child action called');
+          }
+        },
+        {
+          name: 'Another Child',
+          iconName: 'fileText',
+          action: async () => console.log('Another child')
+        }
+      ]
+    },
+    {
+      name: 'Regular Item',
+      iconName: 'box',
+      action: async () => console.log('Regular item')
+    }
+  ]);
+  
+  // Wait for main menu to appear
+  await new Promise(resolve => setTimeout(resolve, 150));
+  
+  // Check main menu exists
+  const mainMenu = document.querySelector('dees-contextmenu');
+  expect(mainMenu).toBeInstanceOf(DeesContextmenu);
+  
+  // Hover over "Parent Item" to trigger submenu
+  const parentItem = mainMenu!.shadowRoot!.querySelector('.menuitem');
+  expect(parentItem).toBeTruthy();
+  parentItem!.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+  
+  // Wait for submenu to appear
+  await new Promise(resolve => setTimeout(resolve, 300));
+  
+  // Check submenu exists
+  const allMenus = document.querySelectorAll('dees-contextmenu');
+  expect(allMenus.length).toEqual(2); // Main menu and submenu
+  
+  const submenu = allMenus[1];
+  expect(submenu).toBeTruthy();
+  
+  // Click on "Child Item" in submenu
+  const childItem = submenu.shadowRoot!.querySelector('.menuitem');
+  expect(childItem).toBeTruthy();
+  childItem!.click();
+  
+  // Wait for menus to close (windowLayer destruction takes 300ms + context menu 100ms)
+  await new Promise(resolve => setTimeout(resolve, 600));
+  
+  // Verify action was called
+  expect(actionCalled).toEqual(true);
+  
+  // Verify all menus are closed
+  const remainingMenus = document.querySelectorAll('dees-contextmenu');
+  expect(remainingMenus.length).toEqual(0);
+  
+  // Clean up
+  testDiv.remove();
+});
+
+export default tap.start();

test/test.contextmenu-shadowdom.chromium.ts

@@ -0,0 +1,71 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
+import { DeesElement, customElement, html } from '@design.estate/dees-element';
+
+// Create a test element with shadow DOM
+@customElement('test-shadow-element')
+class TestShadowElement extends DeesElement {
+  public getContextMenuItems() {
+    return [
+      { name: 'Shadow Item 1', iconName: 'box', action: async () => console.log('Shadow 1') },
+      { name: 'Shadow Item 2', iconName: 'package', action: async () => console.log('Shadow 2') }
+    ];
+  }
+  
+  render() {
+    return html`
+      <div style="padding: 40px; background: #eee; border-radius: 8px;">
+        <h3>Shadow DOM Content</h3>
+        <p>Right-click anywhere inside this shadow DOM</p>
+      </div>
+    `;
+  }
+}
+
+tap.test('should show context menu when right-clicking inside shadow DOM', async () => {
+  // Create the shadow DOM element
+  const shadowElement = document.createElement('test-shadow-element');
+  document.body.appendChild(shadowElement);
+  
+  // Wait for element to be ready
+  await shadowElement.updateComplete;
+  
+  // Get the content inside shadow DOM
+  const shadowContent = shadowElement.shadowRoot!.querySelector('div');
+  expect(shadowContent).toBeTruthy();
+  
+  // Simulate right-click on content inside shadow DOM
+  const contextMenuEvent = new MouseEvent('contextmenu', {
+    clientX: 100,
+    clientY: 100,
+    bubbles: true,
+    cancelable: true,
+    composed: true // Important for shadow DOM
+  });
+  
+  shadowContent!.dispatchEvent(contextMenuEvent);
+  
+  // Wait for context menu to appear
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if context menu is created
+  const contextMenu = document.querySelector('dees-contextmenu');
+  expect(contextMenu).toBeInstanceOf(DeesContextmenu);
+  
+  // Check if menu items from shadow element are rendered
+  const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
+  expect(menuItems.length).toBeGreaterThanOrEqual(2);
+  
+  // Check menu item text
+  const menuTexts = Array.from(menuItems).map(item => 
+    item.querySelector('.menuitem-text')?.textContent
+  );
+  expect(menuTexts).toContain('Shadow Item 1');
+  expect(menuTexts).toContain('Shadow Item 2');
+  
+  // Clean up
+  contextMenu!.remove();
+  shadowElement.remove();
+});
+
+export default tap.start();

test/test.contextmenu.chromium.ts

@@ -0,0 +1,77 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
+
+tap.test('should show context menu with nested submenu', async () => {
+  // Create a test element with context menu items
+  const testDiv = document.createElement('div');
+  testDiv.style.width = '200px';
+  testDiv.style.height = '200px';
+  testDiv.style.background = '#eee';
+  testDiv.innerHTML = 'Right-click me';
+  
+  // Add getContextMenuItems method
+  (testDiv as any).getContextMenuItems = () => {
+    return [
+      {
+        name: 'Change Type',
+        iconName: 'type',
+        submenu: [
+          { name: 'Paragraph', iconName: 'text', action: () => console.log('Paragraph') },
+          { name: 'Heading 1', iconName: 'heading1', action: () => console.log('Heading 1') },
+          { name: 'Heading 2', iconName: 'heading2', action: () => console.log('Heading 2') },
+          { divider: true },
+          { name: 'Code Block', iconName: 'fileCode', action: () => console.log('Code') },
+          { name: 'Quote', iconName: 'quote', action: () => console.log('Quote') }
+        ]
+      },
+      { divider: true },
+      {
+        name: 'Delete',
+        iconName: 'trash2',
+        action: () => console.log('Delete')
+      }
+    ];
+  };
+  
+  document.body.appendChild(testDiv);
+  
+  // Simulate right-click
+  const contextMenuEvent = new MouseEvent('contextmenu', {
+    clientX: 100,
+    clientY: 100,
+    bubbles: true,
+    cancelable: true
+  });
+  
+  testDiv.dispatchEvent(contextMenuEvent);
+  
+  // Wait for context menu to appear
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if context menu is created
+  const contextMenu = document.querySelector('dees-contextmenu');
+  expect(contextMenu).toBeInstanceOf(DeesContextmenu);
+  
+  // Check if menu items are rendered
+  const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
+  expect(menuItems.length).toEqual(2); // "Change Type" and "Delete"
+  
+  // Hover over "Change Type" to trigger submenu
+  const changeTypeItem = menuItems[0] as HTMLElement;
+  changeTypeItem.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+  
+  // Wait for submenu to appear
+  await new Promise(resolve => setTimeout(resolve, 300));
+  
+  // Check if submenu is created
+  const submenus = document.querySelectorAll('dees-contextmenu');
+  expect(submenus.length).toEqual(2); // Main menu and submenu
+  
+  // Clean up
+  contextMenu!.remove();
+  const submenu = submenus[1];
+  if (submenu) submenu.remove();
+  testDiv.remove();
+});
+
+export default tap.start();

test/test.dashboardgrid-layout.node.ts

@@ -0,0 +1,28 @@
+import { tap, expect } from '@git.zone/tstest/tapbundle';
+
+import {
+  resolveWidgetPlacement,
+  collectCollisions,
+} from '../ts_web/elements/00group-layout/dees-dashboardgrid/layout.ts';
+import type { DashboardWidget } from '../ts_web/elements/00group-layout/dees-dashboardgrid/types.ts';
+
+tap.test('dashboardgrid does not overlap widgets after swap attempt', async () => {
+  const widgets: DashboardWidget[] = [
+    { id: 'w0', x: 6, y: 5, w: 1, h: 3 },
+    { id: 'w1', x: 6, y: 1, w: 1, h: 3 },
+    { id: 'w2', x: 3, y: 0, w: 2, h: 2 },
+    { id: 'w3', x: 9, y: 0, w: 1, h: 2 },
+    { id: 'w4', x: 4, y: 3, w: 1, h: 2 },
+  ];
+
+  const placement = resolveWidgetPlacement(widgets, 'w0', { x: 6, y: 3 }, 12);
+  expect(placement).toBeTruthy();
+
+  const layout = placement!.widgets;
+  for (const widget of layout) {
+    const collisions = collectCollisions(layout, widget, widget.x, widget.y, widget.w, widget.h);
+    expect(collisions).toBeEmptyArray();
+  }
+});
+
+export default tap.start();

test/test.shadow-dom-containment.chromium.ts

@@ -0,0 +1,183 @@
+import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
+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 ===');
+
+  // Wait for custom element to be defined
+  await customElements.whenDefined('dees-wysiwyg-block');
+
+  // Create a WYSIWYG block component - set properties BEFORE attaching to DOM
+  const block = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
+
+  // Set the block data before attaching to DOM so firstUpdated() sees them
+  block.block = {
+    id: 'test-1',
+    type: 'paragraph',
+    content: 'Hello world test content'
+  };
+
+  block.handlers = {
+    onInput: () => {},
+    onKeyDown: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
+    onCompositionStart: () => {},
+    onCompositionEnd: () => {}
+  };
+
+  // Now attach to DOM and wait for render
+  document.body.appendChild(block);
+  await block.updateComplete;
+  // Wait for firstUpdated to populate the container
+  await new Promise(resolve => setTimeout(resolve, 50));
+  
+  // Get the paragraph element inside Shadow DOM
+  const container = block.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const paragraphBlock = container?.querySelector('.block.paragraph') as HTMLElement;
+  
+  expect(paragraphBlock).toBeTruthy();
+  console.log('Found paragraph block:', paragraphBlock);
+  console.log('Paragraph text content:', paragraphBlock.textContent);
+  
+  // Focus the paragraph
+  paragraphBlock.focus();
+  
+  // Manually set cursor position
+  const textNode = paragraphBlock.firstChild;
+  if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+    const range = document.createRange();
+    const selection = window.getSelection();
+    
+    // Set cursor at position 11 (after "Hello world")
+    range.setStart(textNode, 11);
+    range.setEnd(textNode, 11);
+    
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    
+    console.log('Set cursor at position 11');
+    
+    // Test the containment check
+    console.log('\n--- Testing containment ---');
+    const currentSelection = window.getSelection();
+    if (currentSelection && currentSelection.rangeCount > 0) {
+      const selRange = currentSelection.getRangeAt(0);
+      console.log('Selection range:', {
+        startContainer: selRange.startContainer,
+        startOffset: selRange.startOffset,
+        containerText: selRange.startContainer.textContent
+      });
+      
+      // Test regular contains (should fail across Shadow DOM)
+      const regularContains = paragraphBlock.contains(selRange.startContainer);
+      console.log('Regular contains:', regularContains);
+      
+      // Test Shadow DOM-aware contains
+      const shadowDOMContains = WysiwygSelection.containsAcrossShadowDOM(paragraphBlock, selRange.startContainer);
+      console.log('Shadow DOM contains:', shadowDOMContains);
+      
+      // Since we're setting selection within the same shadow DOM, both should be true
+      expect(regularContains).toBeTrue();
+      expect(shadowDOMContains).toBeTrue();
+    }
+    
+    // Test getSplitContent
+    console.log('\n--- Testing getSplitContent ---');
+    const splitResult = block.getSplitContent();
+    console.log('Split result:', splitResult);
+    
+    expect(splitResult).toBeTruthy();
+    if (splitResult) {
+      console.log('Before:', JSON.stringify(splitResult.before));
+      console.log('After:', JSON.stringify(splitResult.after));
+      
+      // Expected split at position 11
+      expect(splitResult.before).toEqual('Hello world');
+      expect(splitResult.after).toEqual(' test content');
+    }
+  }
+
+  // Clean up
+  document.body.removeChild(block);
+});
+
+tap.test('Shadow DOM containment across different shadow roots', async () => {
+  console.log('=== Testing Cross Shadow Root Containment ===');
+  
+  // Create parent component with WYSIWYG editor
+  const parentDiv = document.createElement('div');
+  parentDiv.innerHTML = `
+    <dees-input-wysiwyg>
+      <dees-wysiwyg-block></dees-wysiwyg-block>
+    </dees-input-wysiwyg>
+  `;
+  document.body.appendChild(parentDiv);
+  
+  // Wait for components to be ready
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  const wysiwygInput = parentDiv.querySelector('dees-input-wysiwyg') as any;
+  const blockElement = wysiwygInput?.shadowRoot?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  
+  if (blockElement) {
+    // Set block data
+    blockElement.block = {
+      id: 'test-2',
+      type: 'paragraph',
+      content: 'Cross shadow DOM test'
+    };
+    
+    blockElement.handlers = {
+      onInput: () => {},
+      onKeyDown: () => {},
+      onFocus: () => {},
+      onBlur: () => {},
+      onCompositionStart: () => {},
+      onCompositionEnd: () => {}
+    };
+    
+    await blockElement.updateComplete;
+    
+    // Get the paragraph inside the nested shadow DOM
+    const container = blockElement.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+    const paragraphBlock = container?.querySelector('.block.paragraph') as HTMLElement;
+    
+    if (paragraphBlock) {
+      console.log('Found nested paragraph block');
+      
+      // Focus and set selection
+      paragraphBlock.focus();
+      const textNode = paragraphBlock.firstChild;
+      if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+        const range = document.createRange();
+        range.setStart(textNode, 5);
+        range.setEnd(textNode, 5);
+        
+        const selection = window.getSelection();
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+        
+        // Test containment from parent's perspective
+        const selRange = selection?.getRangeAt(0);
+        if (selRange) {
+          // This should fail because it crosses shadow DOM boundary
+          const regularContains = wysiwygInput.contains(selRange.startContainer);
+          console.log('Parent regular contains:', regularContains);
+          expect(regularContains).toBeFalse();
+          
+          // This should work with our Shadow DOM-aware method
+          const shadowDOMContains = WysiwygSelection.containsAcrossShadowDOM(wysiwygInput, selRange.startContainer);
+          console.log('Parent shadow DOM contains:', shadowDOMContains);
+          expect(shadowDOMContains).toBeTrue();
+        }
+      }
+    }
+  }
+  
+  // Clean up
+  document.body.removeChild(parentDiv);
+});
+
+export default tap.start();

test/test.tabs-indicator.chromium.ts

@@ -0,0 +1,146 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import * as deesCatalog from '../ts_web/index.js';
+
+tap.test('tabs indicator positioning - detailed measurements', async () => {
+  // Create tabs element with different length labels
+  const tabsElement = new deesCatalog.DeesAppuiTabs();
+  tabsElement.tabs = [
+    { key: 'Home', iconName: 'lucide:home', action: () => {} },
+    { key: 'Analytics Dashboard', iconName: 'lucide:lineChart', action: () => {} },
+    { key: 'User Settings', iconName: 'lucide:settings', action: () => {} },
+  ];
+  
+  document.body.appendChild(tabsElement);
+  await tabsElement.updateComplete;
+  
+  // Wait for fonts and indicator initialization
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  // Get all elements
+  const shadowRoot = tabsElement.shadowRoot;
+  const wrapper = shadowRoot.querySelector('.tabs-wrapper') as HTMLElement;
+  const container = shadowRoot.querySelector('.tabsContainer') as HTMLElement;
+  const tabs = shadowRoot.querySelectorAll('.tab');
+  const firstTab = tabs[0] as HTMLElement;
+  const firstContent = firstTab.querySelector('.tab-content') as HTMLElement;
+  const indicator = shadowRoot.querySelector('.tabIndicator') as HTMLElement;
+  
+  // Verify all elements exist
+  expect(wrapper).toBeInstanceOf(HTMLElement);
+  expect(container).toBeInstanceOf(HTMLElement);
+  expect(firstTab).toBeInstanceOf(HTMLElement);
+  expect(firstContent).toBeInstanceOf(HTMLElement);
+  expect(indicator).toBeInstanceOf(HTMLElement);
+  
+  // Get all measurements
+  const wrapperRect = wrapper.getBoundingClientRect();
+  const containerRect = container.getBoundingClientRect();
+  const tabRect = firstTab.getBoundingClientRect();
+  const contentRect = firstContent.getBoundingClientRect();
+  const indicatorRect = indicator.getBoundingClientRect();
+  
+  console.log('\n=== DETAILED MEASUREMENTS ===');
+  console.log('Document body left:', document.body.getBoundingClientRect().left);
+  console.log('Wrapper left:', wrapperRect.left);
+  console.log('Container left:', containerRect.left);
+  console.log('Tab left:', tabRect.left);
+  console.log('Content left:', contentRect.left);
+  console.log('Indicator left (actual):', indicatorRect.left);
+  
+  console.log('\n=== RELATIVE POSITIONS ===');
+  console.log('Container padding (container - wrapper):', containerRect.left - wrapperRect.left);
+  console.log('Tab position in container:', tabRect.left - containerRect.left);
+  console.log('Content position in tab:', contentRect.left - tabRect.left);
+  console.log('Content relative to wrapper:', contentRect.left - wrapperRect.left);
+  console.log('Indicator relative to wrapper (actual):', indicatorRect.left - wrapperRect.left);
+  
+  console.log('\n=== WIDTHS ===');
+  console.log('Tab width:', tabRect.width);
+  console.log('Content width:', contentRect.width);
+  console.log('Indicator width:', indicatorRect.width);
+  
+  console.log('\n=== STYLES (what we set) ===');
+  console.log('Indicator style.left:', indicator.style.left);
+  console.log('Indicator style.width:', indicator.style.width);
+  
+  console.log('\n=== CALCULATIONS ===');
+  const expectedIndicatorLeft = contentRect.left - wrapperRect.left - 4; // We subtract 4 to center
+  const expectedIndicatorWidth = contentRect.width + 8; // We add 8 in the code
+  console.log('Expected indicator left:', expectedIndicatorLeft);
+  console.log('Expected indicator width:', expectedIndicatorWidth);
+  console.log('Actual indicator left (from style):', parseFloat(indicator.style.left));
+  console.log('Actual indicator width (from style):', parseFloat(indicator.style.width));
+  
+  console.log('\n=== VISUAL ALIGNMENT CHECK ===');
+  const tabCenter = tabRect.left + (tabRect.width / 2);
+  const contentCenter = contentRect.left + (contentRect.width / 2);
+  const indicatorCenter = indicatorRect.left + (indicatorRect.width / 2);
+  
+  console.log('Tab center:', tabCenter);
+  console.log('Content center:', contentCenter);
+  console.log('Indicator center:', indicatorCenter);
+  console.log('Content offset from tab center:', contentCenter - tabCenter);
+  console.log('Indicator offset from content center:', indicatorCenter - contentCenter);
+  console.log('Indicator offset from tab center:', indicatorCenter - tabCenter);
+  console.log('---');
+  console.log('Indicator extends left of content by:', contentRect.left - indicatorRect.left);
+  console.log('Indicator extends right of content by:', (indicatorRect.left + indicatorRect.width) - (contentRect.left + contentRect.width));
+  
+  // Check if icons are rendering
+  const icon = firstContent.querySelector('dees-icon');
+  console.log('\n=== ICON CHECK ===');
+  console.log('Icon element found:', icon ? 'YES' : 'NO');
+  if (icon) {
+    const iconRect = icon.getBoundingClientRect();
+    console.log('Icon width:', iconRect.width);
+    console.log('Icon height:', iconRect.height);
+    console.log('Icon visible:', iconRect.width > 0 && iconRect.height > 0 ? 'YES' : 'NO');
+  }
+  
+  // Verify indicator is visible
+  expect(indicator.style.opacity).toEqual('1');
+  
+  // Verify positioning calculations
+  expect(parseFloat(indicator.style.left)).toBeCloseTo(expectedIndicatorLeft, 1);
+  expect(parseFloat(indicator.style.width)).toBeCloseTo(expectedIndicatorWidth, 1);
+  
+  // Verify visual centering on content (should be perfectly centered)
+  expect(Math.abs(indicatorCenter - contentCenter)).toBeLessThan(1);
+  
+  document.body.removeChild(tabsElement);
+});
+
+tap.test('tabs indicator should move when tab is clicked', async () => {
+  // Create tabs element
+  const tabsElement = new deesCatalog.DeesAppuiTabs();
+  tabsElement.tabs = [
+    { key: 'Home', iconName: 'lucide:home', action: () => {} },
+    { key: 'Analytics', iconName: 'lucide:barChart', action: () => {} },
+    { key: 'Settings', iconName: 'lucide:settings', action: () => {} },
+  ];
+  
+  document.body.appendChild(tabsElement);
+  await tabsElement.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  const shadowRoot = tabsElement.shadowRoot;
+  const tabs = shadowRoot.querySelectorAll('.tab');
+  const indicator = shadowRoot.querySelector('.tabIndicator') as HTMLElement;
+  
+  // Get initial position
+  const initialLeft = parseFloat(indicator.style.left);
+  
+  // Click second tab
+  (tabs[1] as HTMLElement).click();
+  await tabsElement.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Position should have changed
+  const newLeft = parseFloat(indicator.style.left);
+  expect(newLeft).not.toEqual(initialLeft);
+  expect(newLeft).toBeGreaterThan(initialLeft);
+  
+  document.body.removeChild(tabsElement);
+});
+
+export default tap.start();

test/test.wysiwyg-basic.chromium.ts

@@ -0,0 +1,9 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+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();
+  expect(editor).toBeInstanceOf(DeesInputWysiwyg);
+});
+
+export default tap.start();

test/test.wysiwyg-blockmovement.chromium.ts

@@ -0,0 +1,85 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg block movement during drag', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Block 1' },
+    { id: 'block2', type: 'paragraph', content: 'Block 2' },
+    { id: 'block3', type: 'paragraph', content: 'Block 3' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
+  
+  // Start dragging block 1
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: () => {},
+      setDragImage: () => {}
+    },
+    clientY: 50,
+    preventDefault: () => {},
+  } as any;
+  
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  // Wait for dragging class
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Verify drag state
+  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
+  
+  // Check that drag height was calculated
+  console.log('Checking drag height...');
+  const dragHandler = element.dragDropHandler as any;
+  console.log('draggedBlockHeight:', dragHandler.draggedBlockHeight);
+  console.log('draggedBlockContentHeight:', dragHandler.draggedBlockContentHeight);
+  
+  // Manually call updateBlockPositions to simulate drag movement
+  console.log('Simulating drag movement...');
+  const updateBlockPositions = dragHandler.updateBlockPositions.bind(dragHandler);
+  
+  // Simulate dragging down past block 2
+  const block2 = editorContent.querySelector('[data-block-id="block2"]') as HTMLElement;
+  const block2Rect = block2.getBoundingClientRect();
+  const dragToY = block2Rect.bottom + 10;
+  
+  console.log('Dragging to Y position:', dragToY);
+  updateBlockPositions(dragToY);
+  
+  // Check if blocks have moved
+  await new Promise(resolve => setTimeout(resolve, 50));
+  
+  const blocks = Array.from(editorContent.querySelectorAll('.block-wrapper'));
+  console.log('Block states after drag:');
+  blocks.forEach((block, i) => {
+    const classes = block.className;
+    const offset = (block as HTMLElement).style.getPropertyValue('--drag-offset');
+    console.log(`Block ${i}: classes="${classes}", offset="${offset}"`);
+  });
+  
+  // Check that at least one block has move class
+  const movedUpBlocks = editorContent.querySelectorAll('.block-wrapper.move-up');
+  const movedDownBlocks = editorContent.querySelectorAll('.block-wrapper.move-down');
+  console.log('Moved up blocks:', movedUpBlocks.length);
+  console.log('Moved down blocks:', movedDownBlocks.length);
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+export default tap.start();

test/test.wysiwyg-blocks-debug.chromium.ts

@@ -0,0 +1,69 @@
+import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';
+
+import * as deesCatalog from '../ts_web/index.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/00group-input/dees-input-wysiwyg/wysiwyg.blockregistration.js';
+
+tap.test('Debug: should create empty wysiwyg block component', async () => {
+  try {
+    console.log('Creating DeesWysiwygBlock...');
+    const block: DeesWysiwygBlock = await webhelpers.fixture(
+      webhelpers.html`<dees-wysiwyg-block></dees-wysiwyg-block>`
+    );
+    console.log('Block created:', block);
+    expect(block).toBeDefined();
+    expect(block).toBeInstanceOf(DeesWysiwygBlock);
+    console.log('Initial block property:', block.block);
+    console.log('Initial handlers property:', block.handlers);
+  } catch (error) {
+    console.error('Error creating block:', error);
+    throw error;
+  }
+});
+
+tap.test('Debug: should set properties step by step', async () => {
+  try {
+    console.log('Step 1: Creating component...');
+    const block: DeesWysiwygBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
+    expect(block).toBeDefined();
+    
+    console.log('Step 2: Setting handlers...');
+    block.handlers = {
+      onInput: () => console.log('onInput'),
+      onKeyDown: () => console.log('onKeyDown'),
+      onFocus: () => console.log('onFocus'),
+      onBlur: () => console.log('onBlur'),
+      onCompositionStart: () => console.log('onCompositionStart'),
+      onCompositionEnd: () => console.log('onCompositionEnd')
+    };
+    console.log('Handlers set:', block.handlers);
+    
+    console.log('Step 3: Setting block data...');
+    block.block = {
+      id: 'test-block',
+      type: 'divider',
+      content: ' '
+    };
+    console.log('Block set:', block.block);
+    
+    console.log('Step 4: Appending to body...');
+    document.body.appendChild(block);
+    
+    console.log('Step 5: Waiting for update...');
+    await block.updateComplete;
+    console.log('Update complete');
+    
+    console.log('Step 6: Checking shadowRoot...');
+    expect(block.shadowRoot).toBeDefined();
+    console.log('ShadowRoot exists');
+    
+  } catch (error) {
+    console.error('Error in step-by-step test:', error);
+    throw error;
+  }
+});
+
+export default tap.start();

test/test.wysiwyg-blocks.chromium.ts

@@ -0,0 +1,240 @@
+import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';
+
+import * as deesCatalog from '../ts_web/index.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/00group-input/dees-input-wysiwyg/wysiwyg.blockregistration.js';
+
+tap.test('BlockRegistry should have registered handlers', async () => {
+  // Test divider handler
+  const dividerHandler = BlockRegistry.getHandler('divider');
+  expect(dividerHandler).toBeDefined();
+  expect(dividerHandler?.type).toEqual('divider');
+
+  // Test paragraph handler
+  const paragraphHandler = BlockRegistry.getHandler('paragraph');
+  expect(paragraphHandler).toBeDefined();
+  expect(paragraphHandler?.type).toEqual('paragraph');
+
+  // Test heading handlers
+  const heading1Handler = BlockRegistry.getHandler('heading-1');
+  expect(heading1Handler).toBeDefined();
+  expect(heading1Handler?.type).toEqual('heading-1');
+
+  const heading2Handler = BlockRegistry.getHandler('heading-2');
+  expect(heading2Handler).toBeDefined();
+  expect(heading2Handler?.type).toEqual('heading-2');
+
+  const heading3Handler = BlockRegistry.getHandler('heading-3');
+  expect(heading3Handler).toBeDefined();
+  expect(heading3Handler?.type).toEqual('heading-3');
+
+  // Test that getAllTypes returns all registered types
+  const allTypes = BlockRegistry.getAllTypes();
+  expect(allTypes).toContain('divider');
+  expect(allTypes).toContain('paragraph');
+  expect(allTypes).toContain('heading-1');
+  expect(allTypes).toContain('heading-2');
+  expect(allTypes).toContain('heading-3');
+});
+
+tap.test('should render divider block using handler', async () => {
+  // Wait for custom element to be defined
+  await customElements.whenDefined('dees-wysiwyg-block');
+
+  // Create element and set properties BEFORE attaching to DOM
+  const dividerBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
+
+  // Set required handlers
+  dividerBlock.handlers = {
+    onInput: () => {},
+    onKeyDown: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
+    onCompositionStart: () => {},
+    onCompositionEnd: () => {}
+  };
+
+  // Set a divider block
+  dividerBlock.block = {
+    id: 'test-divider',
+    type: 'divider',
+    content: ' '
+  };
+
+  // Attach to DOM and wait for render
+  document.body.appendChild(dividerBlock);
+  await dividerBlock.updateComplete;
+  // Wait for firstUpdated to populate the container
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  // Check that the divider is rendered
+  const dividerElement = dividerBlock.shadowRoot?.querySelector('.block.divider');
+  expect(dividerElement).toBeTruthy();
+  expect(dividerElement?.getAttribute('tabindex')).toEqual('0');
+
+  // Check for the hr element (divider uses <hr> not .divider-icon)
+  const hr = dividerBlock.shadowRoot?.querySelector('hr');
+  expect(hr).toBeTruthy();
+
+  // Clean up
+  document.body.removeChild(dividerBlock);
+});
+
+tap.test('should render paragraph block using handler', async () => {
+  // Wait for custom element to be defined
+  await customElements.whenDefined('dees-wysiwyg-block');
+
+  // Create element and set properties BEFORE attaching to DOM
+  const paragraphBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
+
+  // Set required handlers
+  paragraphBlock.handlers = {
+    onInput: () => {},
+    onKeyDown: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
+    onCompositionStart: () => {},
+    onCompositionEnd: () => {},
+    onMouseUp: () => {}
+  };
+
+  // Set a paragraph block
+  paragraphBlock.block = {
+    id: 'test-paragraph',
+    type: 'paragraph',
+    content: 'Test paragraph content'
+  };
+
+  // Attach to DOM and wait for render
+  document.body.appendChild(paragraphBlock);
+  await paragraphBlock.updateComplete;
+  // Wait for firstUpdated to populate the container
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  // Check that the paragraph is rendered
+  const paragraphElement = paragraphBlock.shadowRoot?.querySelector('.block.paragraph');
+  expect(paragraphElement).toBeTruthy();
+  expect(paragraphElement?.getAttribute('contenteditable')).toEqual('true');
+  expect(paragraphElement?.textContent).toEqual('Test paragraph content');
+
+  // Clean up
+  document.body.removeChild(paragraphBlock);
+});
+
+tap.test('should render heading blocks using handler', async () => {
+  // Wait for custom element to be defined
+  await customElements.whenDefined('dees-wysiwyg-block');
+
+  // Test heading-1 - set properties BEFORE attaching to DOM
+  const heading1Block = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
+
+  heading1Block.handlers = {
+    onInput: () => {},
+    onKeyDown: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
+    onCompositionStart: () => {},
+    onCompositionEnd: () => {},
+    onMouseUp: () => {}
+  };
+
+  heading1Block.block = {
+    id: 'test-h1',
+    type: 'heading-1',
+    content: 'Heading 1 Test'
+  };
+
+  document.body.appendChild(heading1Block);
+  await heading1Block.updateComplete;
+  // Wait for firstUpdated to populate the container
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  const h1Element = heading1Block.shadowRoot?.querySelector('.block.heading-1');
+  expect(h1Element).toBeTruthy();
+  expect(h1Element?.textContent).toEqual('Heading 1 Test');
+
+  // Clean up heading-1
+  document.body.removeChild(heading1Block);
+
+  // Test heading-2 - set properties BEFORE attaching to DOM
+  const heading2Block = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
+
+  heading2Block.handlers = {
+    onInput: () => {},
+    onKeyDown: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
+    onCompositionStart: () => {},
+    onCompositionEnd: () => {},
+    onMouseUp: () => {}
+  };
+
+  heading2Block.block = {
+    id: 'test-h2',
+    type: 'heading-2',
+    content: 'Heading 2 Test'
+  };
+
+  document.body.appendChild(heading2Block);
+  await heading2Block.updateComplete;
+  // Wait for firstUpdated to populate the container
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  const h2Element = heading2Block.shadowRoot?.querySelector('.block.heading-2');
+  expect(h2Element).toBeTruthy();
+  expect(h2Element?.textContent).toEqual('Heading 2 Test');
+
+  // Clean up heading-2
+  document.body.removeChild(heading2Block);
+});
+
+tap.test('paragraph block handler methods should work', async () => {
+  // Wait for custom element to be defined
+  await customElements.whenDefined('dees-wysiwyg-block');
+
+  // Create element and set properties BEFORE attaching to DOM
+  const paragraphBlock = document.createElement('dees-wysiwyg-block') as DeesWysiwygBlock;
+
+  // Set required handlers
+  paragraphBlock.handlers = {
+    onInput: () => {},
+    onKeyDown: () => {},
+    onFocus: () => {},
+    onBlur: () => {},
+    onCompositionStart: () => {},
+    onCompositionEnd: () => {},
+    onMouseUp: () => {}
+  };
+
+  paragraphBlock.block = {
+    id: 'test-methods',
+    type: 'paragraph',
+    content: 'Initial content'
+  };
+
+  document.body.appendChild(paragraphBlock);
+  await paragraphBlock.updateComplete;
+  // Wait for firstUpdated to populate the container
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  // Test getContent
+  const content = paragraphBlock.getContent();
+  expect(content).toEqual('Initial content');
+
+  // Test setContent
+  paragraphBlock.setContent('Updated content');
+  await paragraphBlock.updateComplete;
+  expect(paragraphBlock.getContent()).toEqual('Updated content');
+
+  // Test that the DOM is updated
+  const paragraphElement = paragraphBlock.shadowRoot?.querySelector('.block.paragraph');
+  expect(paragraphElement?.textContent).toEqual('Updated content');
+
+  // Clean up
+  document.body.removeChild(paragraphBlock);
+});
+
+export default tap.start();

test/test.wysiwyg-blocktype-change.chromium.ts

@@ -0,0 +1,98 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
+
+tap.test('should change block type via context menu', async () => {
+  // Create WYSIWYG editor with a paragraph
+  const wysiwygEditor = new DeesInputWysiwyg();
+  wysiwygEditor.value = '<p>This is a test paragraph</p>';
+  document.body.appendChild(wysiwygEditor);
+  
+  // Wait for editor to be ready
+  await wysiwygEditor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Get the first block
+  const firstBlock = wysiwygEditor.blocks[0];
+  expect(firstBlock.type).toEqual('paragraph');
+  
+  // Get the block element
+  const firstBlockWrapper = wysiwygEditor.shadowRoot!.querySelector('.block-wrapper');
+  expect(firstBlockWrapper).toBeTruthy();
+  
+  const blockComponent = firstBlockWrapper!.querySelector('dees-wysiwyg-block') as any;
+  expect(blockComponent).toBeTruthy();
+  await blockComponent.updateComplete;
+  
+  // Get the editable content inside the block's shadow DOM
+  const editableBlock = blockComponent.shadowRoot!.querySelector('.block');
+  expect(editableBlock).toBeTruthy();
+  
+  // Simulate right-click on the editable block
+  const contextMenuEvent = new MouseEvent('contextmenu', {
+    clientX: 200,
+    clientY: 200,
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+  
+  editableBlock!.dispatchEvent(contextMenuEvent);
+  
+  // Wait for context menu to appear
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if context menu is created
+  const contextMenu = document.querySelector('dees-contextmenu');
+  expect(contextMenu).toBeInstanceOf(DeesContextmenu);
+  
+  // Find "Change Type" menu item
+  const menuItems = Array.from(contextMenu!.shadowRoot!.querySelectorAll('.menuitem'));
+  const changeTypeItem = menuItems.find(item => 
+    item.querySelector('.menuitem-text')?.textContent?.trim() === 'Change Type'
+  );
+  expect(changeTypeItem).toBeTruthy();
+  
+  // Hover over "Change Type" to trigger submenu
+  changeTypeItem!.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+  
+  // Wait for submenu to appear
+  await new Promise(resolve => setTimeout(resolve, 300));
+  
+  // Check if submenu is created
+  const allMenus = document.querySelectorAll('dees-contextmenu');
+  expect(allMenus.length).toEqual(2);
+  
+  const submenu = allMenus[1];
+  const submenuItems = Array.from(submenu.shadowRoot!.querySelectorAll('.menuitem'));
+  
+  // Find "Heading 1" option
+  const heading1Item = submenuItems.find(item => 
+    item.querySelector('.menuitem-text')?.textContent?.trim() === 'Heading 1'
+  );
+  expect(heading1Item).toBeTruthy();
+  
+  // Click on "Heading 1"
+  (heading1Item as HTMLElement).click();
+  
+  // Wait for menu to close and block to update
+  await new Promise(resolve => setTimeout(resolve, 300));
+  
+  // Verify block type has changed
+  expect(wysiwygEditor.blocks[0].type).toEqual('heading-1');
+  
+  // Verify DOM has been updated
+  const updatedBlockComponent = wysiwygEditor.shadowRoot!
+    .querySelector('.block-wrapper')!
+    .querySelector('dees-wysiwyg-block') as any;
+  
+  await updatedBlockComponent.updateComplete;
+  
+  const updatedBlock = updatedBlockComponent.shadowRoot!.querySelector('.block');
+  expect(updatedBlock?.classList.contains('heading-1')).toEqual(true);
+  
+  // Clean up
+  wysiwygEditor.remove();
+});
+
+export default tap.start();

test/test.wysiwyg-contextmenu.chromium.ts

@@ -0,0 +1,68 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+import { DeesContextmenu } from '../ts_web/elements/00group-overlay/dees-contextmenu/dees-contextmenu.js';
+
+tap.test('should show context menu on WYSIWYG blocks', async () => {
+  // Create WYSIWYG editor
+  const wysiwygEditor = new DeesInputWysiwyg();
+  wysiwygEditor.value = '<p>Test paragraph</p><h1>Test heading</h1>';
+  document.body.appendChild(wysiwygEditor);
+  
+  // Wait for editor to be ready
+  await wysiwygEditor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Get the first block element
+  const firstBlockWrapper = wysiwygEditor.shadowRoot!.querySelector('.block-wrapper');
+  expect(firstBlockWrapper).toBeTruthy();
+  
+  const blockComponent = firstBlockWrapper!.querySelector('dees-wysiwyg-block') as any;
+  expect(blockComponent).toBeTruthy();
+  
+  // Wait for block to be ready
+  await blockComponent.updateComplete;
+  
+  // Get the editable content inside the block's shadow DOM
+  const editableBlock = blockComponent.shadowRoot!.querySelector('.block');
+  expect(editableBlock).toBeTruthy();
+  
+  // Simulate right-click on the editable block
+  const contextMenuEvent = new MouseEvent('contextmenu', {
+    clientX: 200,
+    clientY: 200,
+    bubbles: true,
+    cancelable: true,
+    composed: true // Important for shadow DOM
+  });
+  
+  editableBlock!.dispatchEvent(contextMenuEvent);
+  
+  // Wait for context menu to appear
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if context menu is created
+  const contextMenu = document.querySelector('dees-contextmenu');
+  expect(contextMenu).toBeInstanceOf(DeesContextmenu);
+  
+  // Check if menu items from WYSIWYG block are rendered
+  const menuItems = contextMenu!.shadowRoot!.querySelectorAll('.menuitem');
+  const menuTexts = Array.from(menuItems).map(item => 
+    item.querySelector('.menuitem-text')?.textContent?.trim()
+  );
+  
+  // Should have "Change Type" and "Delete Block" items
+  expect(menuTexts).toContain('Change Type');
+  expect(menuTexts).toContain('Delete Block');
+  
+  // Check if "Change Type" has submenu indicator
+  const changeTypeItem = Array.from(menuItems).find(item => 
+    item.querySelector('.menuitem-text')?.textContent?.trim() === 'Change Type'
+  );
+  expect(changeTypeItem?.classList.contains('has-submenu')).toEqual(true);
+  
+  // Clean up
+  contextMenu!.remove();
+  wysiwygEditor.remove();
+});
+
+export default tap.start();

test/test.wysiwyg-dragdrop-simple.chromium.ts

@@ -0,0 +1,95 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drag handler initialization', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  // Wait for element to be ready
+  await element.updateComplete;
+  
+  // Check that drag handler is initialized
+  expect(element.dragDropHandler).toBeTruthy();
+  
+  // Set initial content with multiple blocks
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'First paragraph' },
+    { id: 'block2', type: 'paragraph', content: 'Second paragraph' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  // Check that editor content ref exists
+  console.log('editorContentRef:', element.editorContentRef);
+  expect(element.editorContentRef).toBeTruthy();
+  
+  // Check that blocks are rendered
+  const blockWrappers = element.shadowRoot!.querySelectorAll('.block-wrapper');
+  console.log('Number of block wrappers:', blockWrappers.length);
+  expect(blockWrappers.length).toEqual(2);
+  
+  // Check drag handles
+  const dragHandles = element.shadowRoot!.querySelectorAll('.drag-handle');
+  console.log('Number of drag handles:', dragHandles.length);
+  expect(dragHandles.length).toEqual(2);
+  
+  // Clean up
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg drag start behavior', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const dragHandle = element.shadowRoot!.querySelector('.drag-handle') as HTMLElement;
+  expect(dragHandle).toBeTruthy();
+  
+  // Check that drag handle has draggable attribute
+  console.log('Drag handle draggable:', dragHandle.draggable);
+  expect(dragHandle.draggable).toBeTrue();
+  
+  // Test drag handler state before drag
+  console.log('Initial drag state:', element.dragDropHandler.dragState);
+  expect(element.dragDropHandler.dragState.draggedBlockId).toBeNull();
+  
+  // Try to manually call handleDragStart
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {
+        console.log('setData called with:', type, data);
+      },
+      setDragImage: (img: any, x: number, y: number) => {
+        console.log('setDragImage called');
+      }
+    },
+    clientY: 100,
+    preventDefault: () => {},
+  } as any;
+  
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  // Check drag state after drag start
+  console.log('Drag state after start:', element.dragDropHandler.dragState);
+  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+export default tap.start();

test/test.wysiwyg-dragdrop-visual.chromium.ts

@@ -0,0 +1,133 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drag visual feedback - block movement', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Block 1' },
+    { id: 'block2', type: 'paragraph', content: 'Block 2' },
+    { id: 'block3', type: 'paragraph', content: 'Block 3' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
+  
+  // Manually start drag
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {},
+      setDragImage: (img: any, x: number, y: number) => {}
+    },
+    clientY: 50,
+    preventDefault: () => {},
+  } as any;
+  
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  // Wait for dragging class
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Check dragging state
+  console.log('Block 1 classes:', block1.className);
+  console.log('Editor content classes:', editorContent.className);
+  expect(block1.classList.contains('dragging')).toBeTrue();
+  expect(editorContent.classList.contains('dragging')).toBeTrue();
+  
+  // Check drop indicator exists
+  const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement;
+  console.log('Drop indicator:', dropIndicator);
+  expect(dropIndicator).toBeTruthy();
+  
+  // Test block movement calculation
+  console.log('Testing updateBlockPositions...');
+  
+  // Access private method for testing
+  const updateBlockPositions = element.dragDropHandler['updateBlockPositions'].bind(element.dragDropHandler);
+  
+  // Simulate dragging to different position
+  updateBlockPositions(150); // Move down
+  
+  // Check if blocks have move classes
+  const blocks = Array.from(editorContent.querySelectorAll('.block-wrapper'));
+  console.log('Block classes after move:');
+  blocks.forEach((block, i) => {
+    console.log(`Block ${i}:`, block.className, 'transform:', (block as HTMLElement).style.getPropertyValue('--drag-offset'));
+  });
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg drop indicator positioning', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Paragraph 1' },
+    { id: 'block2', type: 'heading-2', content: 'Heading 2' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  
+  // Start dragging first block
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {},
+      setDragImage: (img: any, x: number, y: number) => {}
+    },
+    clientY: 50,
+    preventDefault: () => {},
+  } as any;
+  
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  // Wait for initialization
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Get drop indicator
+  const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement;
+  expect(dropIndicator).toBeTruthy();
+  
+  // Check initial display state
+  console.log('Drop indicator initial display:', dropIndicator.style.display);
+  
+  // Trigger updateBlockPositions to see drop indicator
+  const updateBlockPositions = element.dragDropHandler['updateBlockPositions'].bind(element.dragDropHandler);
+  updateBlockPositions(100);
+  
+  // Check drop indicator position
+  console.log('Drop indicator after update:');
+  console.log('- display:', dropIndicator.style.display);
+  console.log('- top:', dropIndicator.style.top);
+  console.log('- height:', dropIndicator.style.height);
+  
+  expect(dropIndicator.style.display).toEqual('block');
+  expect(dropIndicator.style.top).toBeTruthy();
+  expect(dropIndicator.style.height).toBeTruthy();
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+export default tap.start();

test/test.wysiwyg-dragdrop.chromium.ts

@@ -0,0 +1,145 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drag and drop should work correctly', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+
+  // Wait for element to be ready
+  await element.updateComplete;
+
+  // Set initial content with multiple blocks
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'First paragraph' },
+    { id: 'block2', type: 'heading-2', content: 'Test Heading' },
+    { id: 'block3', type: 'paragraph', content: 'Second paragraph' },
+  ];
+  element.renderBlocksProgrammatically();
+
+  await element.updateComplete;
+  // Wait for nested block components to also complete their updates
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  // Check that blocks are rendered
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  expect(editorContent).toBeTruthy();
+
+  const blockWrappers = editorContent.querySelectorAll('.block-wrapper');
+  expect(blockWrappers.length).toEqual(3);
+
+  // Test drag handles exist for non-divider blocks
+  const dragHandles = editorContent.querySelectorAll('.drag-handle');
+  expect(dragHandles.length).toEqual(3);
+
+  // Get references to specific blocks
+  const firstBlock = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
+  const secondBlock = editorContent.querySelector('[data-block-id="block2"]') as HTMLElement;
+  const firstDragHandle = firstBlock.querySelector('.drag-handle') as HTMLElement;
+
+  expect(firstBlock).toBeTruthy();
+  expect(secondBlock).toBeTruthy();
+  expect(firstDragHandle).toBeTruthy();
+
+  // Verify drag drop handler exists
+  expect(element.dragDropHandler).toBeTruthy();
+  expect(element.dragDropHandler.dragState).toBeTruthy();
+
+  // Test drag initialization - synthetic DragEvents may not fully work in all browsers
+  console.log('Testing drag initialization...');
+
+  // Create drag event
+  const dragStartEvent = new DragEvent('dragstart', {
+    dataTransfer: new DataTransfer(),
+    clientY: 100,
+    bubbles: true
+  });
+
+  // Simulate drag start
+  firstDragHandle.dispatchEvent(dragStartEvent);
+
+  // Wait for setTimeout in drag start
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  // Note: Synthetic DragEvents may not fully initialize drag state in all test environments
+  // The test verifies the structure and that events can be dispatched
+  console.log('Drag state after start:', element.dragDropHandler.dragState.draggedBlockId);
+
+  // Test drag end cleanup
+  const dragEndEvent = new DragEvent('dragend', {
+    bubbles: true
+  });
+
+  document.dispatchEvent(dragEndEvent);
+
+  // Wait for cleanup
+  await new Promise(resolve => setTimeout(resolve, 150));
+
+  // Clean up
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg drag and drop visual feedback', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Block 1' },
+    { id: 'block2', type: 'paragraph', content: 'Block 2' },
+    { id: 'block3', type: 'paragraph', content: 'Block 3' },
+  ];
+  element.renderBlocksProgrammatically();
+
+  await element.updateComplete;
+  // Wait for nested block components to also complete their updates
+  await new Promise(resolve => setTimeout(resolve, 50));
+
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  const block1 = editorContent.querySelector('[data-block-id="block1"]') as HTMLElement;
+  const dragHandle1 = block1.querySelector('.drag-handle') as HTMLElement;
+  
+  // Start dragging block 1
+  const dragStartEvent = new DragEvent('dragstart', {
+    dataTransfer: new DataTransfer(),
+    clientY: 50,
+    bubbles: true
+  });
+  
+  dragHandle1.dispatchEvent(dragStartEvent);
+  
+  // Wait for dragging class
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Simulate dragging down
+  const dragOverEvent = new DragEvent('dragover', {
+    dataTransfer: new DataTransfer(),
+    clientY: 150, // Move down past block 2
+    bubbles: true,
+    cancelable: true
+  });
+  
+  // Trigger the global drag over handler
+  element.dragDropHandler['handleGlobalDragOver'](dragOverEvent);
+  
+  // Check that transform is applied to dragged block
+  const transform = block1.style.transform;
+  console.log('Dragged block transform:', transform);
+  expect(transform).toContain('translateY');
+  
+  // Check drop indicator position
+  const dropIndicator = editorContent.querySelector('.drop-indicator') as HTMLElement;
+  if (dropIndicator) {
+    const indicatorStyle = dropIndicator.style;
+    console.log('Drop indicator position:', indicatorStyle.top, 'display:', indicatorStyle.display);
+  }
+  
+  // Clean up
+  document.body.removeChild(element);
+});
+
+export default tap.start();

test/test.wysiwyg-dragissue.chromium.ts

@@ -0,0 +1,124 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drag full flow without await', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  // Mock drag event
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {
+        console.log('setData:', type, data);
+      },
+      setDragImage: (img: any, x: number, y: number) => {
+        console.log('setDragImage');
+      }
+    },
+    clientY: 100,
+    preventDefault: () => {},
+  } as any;
+  
+  console.log('Starting drag...');
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  console.log('Drag started');
+  
+  // Check immediate state
+  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
+  
+  // Instead of await with setTimeout, use a done callback
+  return new Promise<void>((resolve) => {
+    console.log('Setting up delayed check...');
+    
+    // Use regular setTimeout
+    setTimeout(() => {
+      console.log('In setTimeout callback');
+      
+      try {
+        const block1 = element.shadowRoot!.querySelector('[data-block-id="block1"]') as HTMLElement;
+        const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+        
+        console.log('Block has dragging class:', block1?.classList.contains('dragging'));
+        console.log('Editor has dragging class:', editorContent?.classList.contains('dragging'));
+        
+        // Clean up
+        element.dragDropHandler.handleDragEnd();
+        document.body.removeChild(element);
+        
+        resolve();
+      } catch (error) {
+        console.error('Error in setTimeout:', error);
+        throw error;
+      }
+    }, 50);
+  });
+});
+
+tap.test('identify the crash point', async () => {
+  console.log('Test started');
+  
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  console.log('Element created');
+  await element.updateComplete;
+  
+  console.log('Setting blocks');
+  element.blocks = [{ id: 'block1', type: 'paragraph', content: 'Test' }];
+  element.renderBlocksProgrammatically();
+  
+  console.log('Waiting for update');
+  await element.updateComplete;
+  
+  console.log('Creating mock event');
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: () => {},
+      setDragImage: () => {}
+    },
+    clientY: 100,
+    preventDefault: () => {},
+  } as any;
+  
+  console.log('Calling handleDragStart');
+  element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+  
+  console.log('handleDragStart completed');
+  
+  // Try different wait methods
+  console.log('About to wait...');
+  
+  // Method 1: Direct promise
+  await Promise.resolve();
+  console.log('Promise.resolve completed');
+  
+  // Method 2: setTimeout 0
+  await new Promise(resolve => setTimeout(resolve, 0));
+  console.log('setTimeout 0 completed');
+  
+  // Method 3: requestAnimationFrame
+  await new Promise(resolve => requestAnimationFrame(() => resolve(undefined)));
+  console.log('requestAnimationFrame completed');
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+  console.log('Cleanup completed');
+});
+
+export default tap.start();

test/test.wysiwyg-dropindicator.chromium.ts

@@ -0,0 +1,108 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg drop indicator creation', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  // Check editorContentRef
+  console.log('editorContentRef exists:', !!element.editorContentRef);
+  console.log('editorContentRef tagName:', element.editorContentRef?.tagName);
+  expect(element.editorContentRef).toBeTruthy();
+  
+  // Check initial state - no drop indicator
+  let dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
+  console.log('Drop indicator before drag:', dropIndicator);
+  expect(dropIndicator).toBeFalsy();
+  
+  // Manually call createDropIndicator
+  try {
+    console.log('Calling createDropIndicator...');
+    element.dragDropHandler['createDropIndicator']();
+    console.log('createDropIndicator succeeded');
+  } catch (error) {
+    console.error('Error creating drop indicator:', error);
+    throw error;
+  }
+  
+  // Check drop indicator was created
+  dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
+  console.log('Drop indicator after creation:', dropIndicator);
+  console.log('Drop indicator parent:', dropIndicator?.parentElement?.className);
+  expect(dropIndicator).toBeTruthy();
+  expect(dropIndicator!.style.display).toEqual('none');
+  
+  // Clean up
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg drag initialization with drop indicator', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  // Mock drag event
+  const mockDragEvent = {
+    dataTransfer: {
+      effectAllowed: '',
+      setData: (type: string, data: string) => {
+        console.log('setData:', type, data);
+      },
+      setDragImage: (img: any, x: number, y: number) => {
+        console.log('setDragImage');
+      }
+    },
+    clientY: 100,
+    preventDefault: () => {},
+  } as any;
+  
+  console.log('Starting drag...');
+  
+  try {
+    element.dragDropHandler.handleDragStart(mockDragEvent, element.blocks[0]);
+    console.log('Drag start succeeded');
+  } catch (error) {
+    console.error('Error during drag start:', error);
+    throw error;
+  }
+  
+  // Wait for async operations
+  await new Promise(resolve => setTimeout(resolve, 20));
+  
+  // Check drop indicator exists
+  const dropIndicator = element.shadowRoot!.querySelector('.drop-indicator');
+  console.log('Drop indicator after drag start:', dropIndicator);
+  expect(dropIndicator).toBeTruthy();
+  
+  // Check drag state
+  console.log('Drag state:', element.dragDropHandler.dragState);
+  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
+  
+  // Clean up
+  element.dragDropHandler.handleDragEnd();
+  document.body.removeChild(element);
+});
+
+export default tap.start();

test/test.wysiwyg-eventlisteners.chromium.ts

@@ -0,0 +1,114 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.js';
+
+// Initialize the element
+DeesInputWysiwyg;
+
+tap.test('wysiwyg global event listeners', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const block1 = element.shadowRoot!.querySelector('[data-block-id="block1"]') as HTMLElement;
+  console.log('Block 1 found:', !!block1);
+  
+  // Set up drag state manually without using handleDragStart
+  element.dragDropHandler['draggedBlockId'] = 'block1';
+  element.dragDropHandler['draggedBlockElement'] = block1;
+  element.dragDropHandler['initialMouseY'] = 100;
+  
+  // Create drop indicator manually
+  element.dragDropHandler['createDropIndicator']();
+  
+  // Test adding global event listeners
+  console.log('Adding event listeners...');
+  const handleGlobalDragOver = element.dragDropHandler['handleGlobalDragOver'];
+  const handleGlobalDragEnd = element.dragDropHandler['handleGlobalDragEnd'];
+  
+  try {
+    document.addEventListener('dragover', handleGlobalDragOver);
+    console.log('dragover listener added');
+    
+    document.addEventListener('dragend', handleGlobalDragEnd);
+    console.log('dragend listener added');
+  } catch (error) {
+    console.error('Error adding event listeners:', error);
+    throw error;
+  }
+  
+  // Test firing a dragover event
+  console.log('Creating dragover event...');
+  const dragOverEvent = new Event('dragover', {
+    bubbles: true,
+    cancelable: true
+  });
+  Object.defineProperty(dragOverEvent, 'clientY', { value: 150 });
+  
+  console.log('Dispatching dragover event...');
+  document.dispatchEvent(dragOverEvent);
+  console.log('dragover event dispatched');
+  
+  // Clean up
+  document.removeEventListener('dragover', handleGlobalDragOver);
+  document.removeEventListener('dragend', handleGlobalDragEnd);
+  
+  document.body.removeChild(element);
+});
+
+tap.test('wysiwyg setTimeout in drag start', async () => {
+  const element = document.createElement('dees-input-wysiwyg');
+  document.body.appendChild(element);
+  
+  await element.updateComplete;
+  
+  // Set initial content
+  element.blocks = [
+    { id: 'block1', type: 'paragraph', content: 'Test block' },
+  ];
+  element.renderBlocksProgrammatically();
+  
+  await element.updateComplete;
+  
+  const block1 = element.shadowRoot!.querySelector('[data-block-id="block1"]') as HTMLElement;
+  const editorContent = element.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
+  
+  // Set drag state
+  element.dragDropHandler['draggedBlockId'] = 'block1';
+  element.dragDropHandler['draggedBlockElement'] = block1;
+  
+  console.log('Testing setTimeout callback...');
+  
+  // Test the setTimeout callback directly
+  try {
+    if (block1) {
+      console.log('Adding dragging class to block...');
+      block1.classList.add('dragging');
+      console.log('Block classes:', block1.className);
+    }
+    if (editorContent) {
+      console.log('Adding dragging class to editor...');
+      editorContent.classList.add('dragging');
+      console.log('Editor classes:', editorContent.className);
+    }
+  } catch (error) {
+    console.error('Error in setTimeout callback:', error);
+    throw error;
+  }
+  
+  expect(block1.classList.contains('dragging')).toBeTrue();
+  expect(editorContent.classList.contains('dragging')).toBeTrue();
+  
+  // Clean up
+  document.body.removeChild(element);
+});
+
+export default tap.start();

test/test.wysiwyg-keyboard.chromium.ts

@@ -0,0 +1,329 @@
+import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
+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(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import multiple blocks
+  editor.importBlocks([
+    { id: 'block-1', type: 'paragraph', content: 'First paragraph' },
+    { id: 'block-2', type: 'paragraph', content: 'Second paragraph' },
+    { id: 'block-3', type: 'paragraph', content: 'Third paragraph' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Focus first block at end
+  const firstBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="block-1"]');
+  const firstBlockComponent = firstBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const firstBlockContainer = firstBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const firstParagraph = firstBlockContainer?.querySelector('.block.paragraph') as HTMLElement;
+  
+  // Focus and set cursor at end of first block
+  firstParagraph.focus();
+  const textNode = firstParagraph.firstChild;
+  if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+    const range = document.createRange();
+    const selection = window.getSelection();
+    range.setStart(textNode, textNode.textContent?.length || 0);
+    range.setEnd(textNode, textNode.textContent?.length || 0);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }
+  
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Press ArrowRight to move to second block
+  const arrowRightEvent = new KeyboardEvent('keydown', {
+    key: 'ArrowRight',
+    code: 'ArrowRight',
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+  
+  firstParagraph.dispatchEvent(arrowRightEvent);
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  // Check if second block is focused
+  const secondBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="block-2"]');
+  const secondBlockComponent = secondBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const secondBlockContainer = secondBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const secondParagraph = secondBlockContainer?.querySelector('.block.paragraph') as HTMLElement;
+  
+  // Check if the second paragraph has focus
+  const activeElement = secondBlockComponent.shadowRoot?.activeElement;
+  expect(activeElement).toEqual(secondParagraph);
+  
+  console.log('Arrow navigation test complete');
+});
+
+tap.test('Keyboard: Backspace merges blocks', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import two blocks
+  editor.importBlocks([
+    { id: 'merge-1', type: 'paragraph', content: 'First' },
+    { id: 'merge-2', type: 'paragraph', content: 'Second' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Focus second block at beginning
+  const secondBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="merge-2"]');
+  const secondBlockComponent = secondBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const secondBlockContainer = secondBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const secondParagraph = secondBlockContainer?.querySelector('.block.paragraph') as HTMLElement;
+  
+  // Focus and set cursor at beginning
+  secondParagraph.focus();
+  const textNode = secondParagraph.firstChild;
+  if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+    const range = document.createRange();
+    const selection = window.getSelection();
+    range.setStart(textNode, 0);
+    range.setEnd(textNode, 0);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }
+  
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Press Backspace to merge with previous block
+  const backspaceEvent = new KeyboardEvent('keydown', {
+    key: 'Backspace',
+    code: 'Backspace',
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+  
+  secondParagraph.dispatchEvent(backspaceEvent);
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  // Check if blocks were merged
+  expect(editor.blocks.length).toEqual(1);
+  expect(editor.blocks[0].content).toContain('First');
+  expect(editor.blocks[0].content).toContain('Second');
+  
+  console.log('Backspace merge test complete');
+});
+
+tap.test('Keyboard: Delete key on non-editable blocks', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import blocks including a divider
+  editor.importBlocks([
+    { id: 'para-1', type: 'paragraph', content: 'Before divider' },
+    { id: 'div-1', type: 'divider', content: '' },
+    { id: 'para-2', type: 'paragraph', content: 'After divider' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Focus the divider block
+  const dividerBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="div-1"]');
+  const dividerBlockComponent = dividerBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const dividerBlockContainer = dividerBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const dividerElement = dividerBlockContainer?.querySelector('.block.divider') as HTMLElement;
+  
+  // Non-editable blocks need to be focused differently
+  dividerElement?.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Press Delete to remove the divider
+  const deleteEvent = new KeyboardEvent('keydown', {
+    key: 'Delete',
+    code: 'Delete',
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+  
+  dividerElement.dispatchEvent(deleteEvent);
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  // Check if divider was removed
+  expect(editor.blocks.length).toEqual(2);
+  expect(editor.blocks.find(b => b.type === 'divider')).toBeUndefined();
+  
+  console.log('Delete key on non-editable block test complete');
+});
+
+tap.test('Keyboard: Tab key in code block', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+
+  // Import a code block
+  editor.importBlocks([
+    { id: 'code-1', type: 'code', content: 'function test() {', metadata: { language: 'javascript' } }
+  ]);
+
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // Focus code block - code blocks use .code-editor instead of .block.code
+  const codeBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="code-1"]');
+  const codeBlockComponent = codeBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const codeBlockContainer = codeBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const codeElement = codeBlockContainer?.querySelector('.code-editor') as HTMLElement;
+
+  expect(codeElement).toBeTruthy();
+
+  // Focus and set cursor at end
+  codeElement.focus();
+  const textNode = codeElement.firstChild;
+  if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+    const range = document.createRange();
+    const selection = window.getSelection();
+    range.setStart(textNode, textNode.textContent?.length || 0);
+    range.setEnd(textNode, textNode.textContent?.length || 0);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }
+
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // Press Tab to insert spaces
+  const tabEvent = new KeyboardEvent('keydown', {
+    key: 'Tab',
+    code: 'Tab',
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+
+  codeElement.dispatchEvent(tabEvent);
+  await new Promise(resolve => setTimeout(resolve, 200));
+
+  // Check if spaces were inserted
+  const updatedContent = codeElement.textContent || '';
+  expect(updatedContent).toContain('  '); // Tab should insert 2 spaces
+
+  console.log('Tab in code block test complete');
+});
+
+tap.test('Keyboard: ArrowUp/Down navigation', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+
+  // Import multiple blocks
+  editor.importBlocks([
+    { id: 'nav-1', type: 'paragraph', content: 'First line' },
+    { id: 'nav-2', type: 'paragraph', content: 'Second line' },
+    { id: 'nav-3', type: 'paragraph', content: 'Third line' }
+  ]);
+
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // Verify blocks were created
+  expect(editor.blocks.length).toEqual(3);
+
+  // Focus second block
+  const secondBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="nav-2"]');
+  const secondBlockComponent = secondBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const secondBlockContainer = secondBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const secondParagraph = secondBlockContainer?.querySelector('.block.paragraph') as HTMLElement;
+
+  expect(secondParagraph).toBeTruthy();
+  secondParagraph.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // Verify keyboard handler exists
+  expect(editor.keyboardHandler).toBeTruthy();
+
+  // Press ArrowUp - event is dispatched (focus change may not occur in synthetic events)
+  const arrowUpEvent = new KeyboardEvent('keydown', {
+    key: 'ArrowUp',
+    code: 'ArrowUp',
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+
+  secondParagraph.dispatchEvent(arrowUpEvent);
+  await new Promise(resolve => setTimeout(resolve, 200));
+
+  // Get first block references
+  const firstBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="nav-1"]');
+  const firstBlockComponent = firstBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const firstBlockContainer = firstBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const firstParagraph = firstBlockContainer?.querySelector('.block.paragraph') as HTMLElement;
+
+  expect(firstParagraph).toBeTruthy();
+
+  // Note: Synthetic keyboard events don't reliably trigger native browser focus changes
+  // in automated tests. The handler is invoked but focus may not actually move.
+  // This test verifies the structure exists and events can be dispatched.
+
+  console.log('ArrowUp/Down navigation test complete');
+});
+
+tap.test('Keyboard: Formatting shortcuts', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import a paragraph
+  editor.importBlocks([
+    { id: 'format-1', type: 'paragraph', content: 'Test formatting' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Focus and select text
+  const blockWrapper = editor.shadowRoot?.querySelector('[data-block-id="format-1"]');
+  const blockComponent = blockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const blockContainer = blockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const paragraph = blockContainer?.querySelector('.block.paragraph') as HTMLElement;
+  
+  paragraph.focus();
+  
+  // Select "formatting"
+  const textNode = paragraph.firstChild;
+  if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+    const range = document.createRange();
+    const selection = window.getSelection();
+    range.setStart(textNode, 5); // After "Test "
+    range.setEnd(textNode, 15); // After "formatting"
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }
+  
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Press Cmd/Ctrl+B for bold
+  const boldEvent = new KeyboardEvent('keydown', {
+    key: 'b',
+    code: 'KeyB',
+    metaKey: true, // Use metaKey for Mac, ctrlKey for Windows/Linux
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+  
+  paragraph.dispatchEvent(boldEvent);
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  // Check if bold was applied
+  const content = paragraph.innerHTML;
+  expect(content).toContain('<strong>') || expect(content).toContain('<b>');
+  
+  console.log('Formatting shortcuts test complete');
+});
+
+export default tap.start();

test/test.wysiwyg-phase3.chromium.ts

@@ -0,0 +1,152 @@
+import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
+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(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import a quote block
+  editor.importBlocks([
+    { id: 'quote-1', type: 'quote', content: 'This is a famous quote' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if quote block was rendered
+  const quoteBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="quote-1"]');
+  const quoteBlockComponent = quoteBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  expect(quoteBlockComponent).toBeTruthy();
+  
+  const quoteContainer = quoteBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const quoteElement = quoteContainer?.querySelector('.block.quote') as HTMLElement;
+  expect(quoteElement).toBeTruthy();
+  expect(quoteElement?.textContent).toEqual('This is a famous quote');
+  
+  // Check if styles are applied (border-left for quote)
+  const computedStyle = window.getComputedStyle(quoteElement);
+  expect(computedStyle.borderLeftStyle).toEqual('solid');
+  expect(computedStyle.fontStyle).toEqual('italic');
+});
+
+tap.test('Phase 3: Code block should render and handle tab correctly', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+
+  // Import a code block
+  editor.importBlocks([
+    { id: 'code-1', type: 'code', content: 'const x = 42;', metadata: { language: 'javascript' } }
+  ]);
+
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // Check if code block was rendered - code blocks use .code-editor instead of .block.code
+  const codeBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="code-1"]');
+  const codeBlockComponent = codeBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const codeContainer = codeBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const codeElement = codeContainer?.querySelector('.code-editor') as HTMLElement;
+
+  expect(codeElement).toBeTruthy();
+  expect(codeElement?.textContent).toEqual('const x = 42;');
+
+  // Check if language selector is shown
+  const languageSelector = codeContainer?.querySelector('.language-selector') as HTMLSelectElement;
+  expect(languageSelector).toBeTruthy();
+  expect(languageSelector?.value).toEqual('javascript');
+
+  // Check if monospace font is applied - code-editor is a <code> element
+  const computedStyle = window.getComputedStyle(codeElement);
+  // Font family may vary by platform, so just check it contains something
+  expect(computedStyle.fontFamily).toBeTruthy();
+});
+
+tap.test('Phase 3: List block should render correctly', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import a list block
+  editor.importBlocks([
+    { id: 'list-1', type: 'list', content: 'First item\nSecond item\nThird item' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if list block was rendered
+  const listBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="list-1"]');
+  const listBlockComponent = listBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const listContainer = listBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const listElement = listContainer?.querySelector('.block.list') as HTMLElement;
+  
+  expect(listElement).toBeTruthy();
+  
+  // Check if list items were created
+  const listItems = listElement?.querySelectorAll('li');
+  expect(listItems?.length).toEqual(3);
+  expect(listItems?.[0].textContent).toEqual('First item');
+  expect(listItems?.[1].textContent).toEqual('Second item');
+  expect(listItems?.[2].textContent).toEqual('Third item');
+  
+  // Check if it's an unordered list by default
+  const ulElement = listElement?.querySelector('ul');
+  expect(ulElement).toBeTruthy();
+});
+
+tap.test('Phase 3: Quote block split should work', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import a quote block
+  editor.importBlocks([
+    { id: 'quote-split', type: 'quote', content: 'To be or not to be' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Get the quote block
+  const quoteBlockWrapper = editor.shadowRoot?.querySelector('[data-block-id="quote-split"]');
+  const quoteBlockComponent = quoteBlockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const quoteContainer = quoteBlockComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const quoteElement = quoteContainer?.querySelector('.block.quote') as HTMLElement;
+  
+  // Focus and set cursor after "To be"
+  quoteElement.focus();
+  const textNode = quoteElement.firstChild;
+  if (textNode && textNode.nodeType === Node.TEXT_NODE) {
+    const range = document.createRange();
+    const selection = window.getSelection();
+    range.setStart(textNode, 5); // After "To be"
+    range.setEnd(textNode, 5);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+    
+    await new Promise(resolve => setTimeout(resolve, 100));
+    
+    // Press Enter to split
+    const enterEvent = new KeyboardEvent('keydown', {
+      key: 'Enter',
+      code: 'Enter',
+      bubbles: true,
+      cancelable: true,
+      composed: true
+    });
+    
+    quoteElement.dispatchEvent(enterEvent);
+    await new Promise(resolve => setTimeout(resolve, 200));
+    
+    // Check if split happened correctly
+    expect(editor.blocks.length).toEqual(2);
+    expect(editor.blocks[0].content).toEqual('To be');
+    expect(editor.blocks[1].content).toEqual(' or not to be');
+    expect(editor.blocks[1].type).toEqual('paragraph'); // New block should be paragraph
+  }
+});
+
+export default tap.start();

test/test.wysiwyg-registry.both.ts

@@ -0,0 +1,112 @@
+import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';
+
+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/00group-input/dees-input-wysiwyg/wysiwyg.blockregistration.js';
+
+tap.test('BlockRegistry should register and retrieve handlers', async () => {
+  // Test divider handler
+  const dividerHandler = BlockRegistry.getHandler('divider');
+  expect(dividerHandler).toBeDefined();
+  expect(dividerHandler).toBeInstanceOf(DividerBlockHandler);
+  expect(dividerHandler?.type).toEqual('divider');
+
+  // Test paragraph handler
+  const paragraphHandler = BlockRegistry.getHandler('paragraph');
+  expect(paragraphHandler).toBeDefined();
+  expect(paragraphHandler).toBeInstanceOf(ParagraphBlockHandler);
+  expect(paragraphHandler?.type).toEqual('paragraph');
+
+  // Test heading handlers
+  const heading1Handler = BlockRegistry.getHandler('heading-1');
+  expect(heading1Handler).toBeDefined();
+  expect(heading1Handler).toBeInstanceOf(HeadingBlockHandler);
+  expect(heading1Handler?.type).toEqual('heading-1');
+
+  const heading2Handler = BlockRegistry.getHandler('heading-2');
+  expect(heading2Handler).toBeDefined();
+  expect(heading2Handler).toBeInstanceOf(HeadingBlockHandler);
+  expect(heading2Handler?.type).toEqual('heading-2');
+
+  const heading3Handler = BlockRegistry.getHandler('heading-3');
+  expect(heading3Handler).toBeDefined();
+  expect(heading3Handler).toBeInstanceOf(HeadingBlockHandler);
+  expect(heading3Handler?.type).toEqual('heading-3');
+});
+
+tap.test('Block handlers should render content correctly', async () => {
+  const testBlock = {
+    id: 'test-1',
+    type: 'paragraph' as const,
+    content: 'Test paragraph content'
+  };
+
+  const handler = BlockRegistry.getHandler('paragraph');
+  expect(handler).toBeDefined();
+
+  if (handler) {
+    const rendered = handler.render(testBlock, false);
+    // The render() method returns the HTML template structure
+    // Content is set later in setup()
+    expect(rendered).toContain('contenteditable="true"');
+    expect(rendered).toContain('data-block-type="paragraph"');
+    expect(rendered).toContain('data-block-id="test-1"');
+    expect(rendered).toContain('class="block paragraph"');
+  }
+});
+
+tap.test('Divider handler should render correctly', async () => {
+  const dividerBlock = {
+    id: 'test-divider',
+    type: 'divider' as const,
+    content: ' '
+  };
+
+  const handler = BlockRegistry.getHandler('divider');
+  expect(handler).toBeDefined();
+
+  if (handler) {
+    const rendered = handler.render(dividerBlock, false);
+    expect(rendered).toContain('class="block divider"');
+    expect(rendered).toContain('tabindex="0"');
+    expect(rendered).toContain('<hr>');
+    expect(rendered).toContain('data-block-id="test-divider"');
+  }
+});
+
+tap.test('Heading handlers should render with correct levels', async () => {
+  const headingBlock = {
+    id: 'test-h1',
+    type: 'heading-1' as const,
+    content: 'Test Heading'
+  };
+
+  const handler = BlockRegistry.getHandler('heading-1');
+  expect(handler).toBeDefined();
+
+  if (handler) {
+    const rendered = handler.render(headingBlock, false);
+    // The render() method returns the HTML template structure
+    // Content is set later in setup()
+    expect(rendered).toContain('class="block heading-1"');
+    expect(rendered).toContain('contenteditable="true"');
+    expect(rendered).toContain('data-block-id="test-h1"');
+    expect(rendered).toContain('data-block-type="heading-1"');
+  }
+});
+
+tap.test('getAllTypes should return all registered types', async () => {
+  const allTypes = BlockRegistry.getAllTypes();
+  expect(allTypes).toContain('divider');
+  expect(allTypes).toContain('paragraph');
+  expect(allTypes).toContain('heading-1');
+  expect(allTypes).toContain('heading-2');
+  expect(allTypes).toContain('heading-3');
+  expect(allTypes.length).toBeGreaterThanOrEqual(5);
+});
+
+export default tap.start();

test/test.wysiwyg-selection-highlight.chromium.ts

@@ -0,0 +1,158 @@
+import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
+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(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import various block types
+  editor.importBlocks([
+    { id: 'para-1', type: 'paragraph', content: 'This is a paragraph' },
+    { id: 'heading-1', type: 'heading-1', content: 'This is a heading' },
+    { id: 'quote-1', type: 'quote', content: 'This is a quote' },
+    { id: 'code-1', type: 'code', content: 'const x = 42;' },
+    { id: 'list-1', type: 'list', content: 'Item 1\nItem 2' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Test paragraph highlighting
+  console.log('Testing paragraph highlighting...');
+  const paraWrapper = editor.shadowRoot?.querySelector('[data-block-id="para-1"]');
+  const paraComponent = paraWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const paraContainer = paraComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const paraElement = paraContainer?.querySelector('.block.paragraph') as HTMLElement;
+  
+  // Focus paragraph to select it
+  paraElement.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if paragraph has selected class
+  const paraHasSelected = paraElement.classList.contains('selected');
+  console.log('Paragraph has selected class:', paraHasSelected);
+  
+  // Check computed styles
+  const paraStyle = window.getComputedStyle(paraElement);
+  console.log('Paragraph background:', paraStyle.background);
+  console.log('Paragraph box-shadow:', paraStyle.boxShadow);
+  
+  // Test heading highlighting
+  console.log('\nTesting heading highlighting...');
+  const headingWrapper = editor.shadowRoot?.querySelector('[data-block-id="heading-1"]');
+  const headingComponent = headingWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const headingContainer = headingComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const headingElement = headingContainer?.querySelector('.block.heading-1') as HTMLElement;
+  
+  // Focus heading to select it
+  headingElement.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if heading has selected class
+  const headingHasSelected = headingElement.classList.contains('selected');
+  console.log('Heading has selected class:', headingHasSelected);
+  
+  // Check computed styles
+  const headingStyle = window.getComputedStyle(headingElement);
+  console.log('Heading background:', headingStyle.background);
+  console.log('Heading box-shadow:', headingStyle.boxShadow);
+  
+  // Test quote highlighting
+  console.log('\nTesting quote highlighting...');
+  const quoteWrapper = editor.shadowRoot?.querySelector('[data-block-id="quote-1"]');
+  const quoteComponent = quoteWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const quoteContainer = quoteComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const quoteElement = quoteContainer?.querySelector('.block.quote') as HTMLElement;
+  
+  // Focus quote to select it
+  quoteElement.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check if quote has selected class
+  const quoteHasSelected = quoteElement.classList.contains('selected');
+  console.log('Quote has selected class:', quoteHasSelected);
+  
+  // Test code highlighting - code blocks use .code-editor instead of .block.code
+  console.log('\nTesting code highlighting...');
+  const codeWrapper = editor.shadowRoot?.querySelector('[data-block-id="code-1"]');
+  const codeComponent = codeWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const codeContainer = codeComponent?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const codeElement = codeContainer?.querySelector('.code-editor') as HTMLElement;
+  const codeBlockContainer = codeContainer?.querySelector('.code-block-container') as HTMLElement;
+
+  // Focus code to select it
+  codeElement.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // For code blocks, the selection is on the container, not the editor
+  const codeHasSelected = codeBlockContainer?.classList.contains('selected');
+  console.log('Code container has selected class:', codeHasSelected);
+
+  // Focus back on paragraph and check if others are deselected
+  console.log('\nFocusing back on paragraph...');
+  paraElement.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+
+  // Check that only paragraph is selected
+  expect(paraElement.classList.contains('selected')).toBeTrue();
+  expect(headingElement.classList.contains('selected')).toBeFalse();
+  expect(quoteElement.classList.contains('selected')).toBeFalse();
+  // Code blocks use different selection structure
+  expect(codeBlockContainer?.classList.contains('selected') || false).toBeFalse();
+  
+  console.log('Selection highlighting test complete');
+});
+
+tap.test('Selected class should toggle correctly when clicking between blocks', async () => {
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import two blocks
+  editor.importBlocks([
+    { id: 'block-1', type: 'paragraph', content: 'First block' },
+    { id: 'block-2', type: 'paragraph', content: 'Second block' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Get both blocks
+  const block1Wrapper = editor.shadowRoot?.querySelector('[data-block-id="block-1"]');
+  const block1Component = block1Wrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const block1Container = block1Component?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const block1Element = block1Container?.querySelector('.block.paragraph') as HTMLElement;
+  
+  const block2Wrapper = editor.shadowRoot?.querySelector('[data-block-id="block-2"]');
+  const block2Component = block2Wrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const block2Container = block2Component?.shadowRoot?.querySelector('.wysiwyg-block-container') as HTMLElement;
+  const block2Element = block2Container?.querySelector('.block.paragraph') as HTMLElement;
+  
+  // Initially neither should be selected
+  expect(block1Element.classList.contains('selected')).toBeFalse();
+  expect(block2Element.classList.contains('selected')).toBeFalse();
+  
+  // Click on first block
+  block1Element.click();
+  block1Element.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // First block should be selected
+  expect(block1Element.classList.contains('selected')).toBeTrue();
+  expect(block2Element.classList.contains('selected')).toBeFalse();
+  
+  // Click on second block
+  block2Element.click();
+  block2Element.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Second block should be selected, first should not
+  expect(block1Element.classList.contains('selected')).toBeFalse();
+  expect(block2Element.classList.contains('selected')).toBeTrue();
+  
+  console.log('Toggle test complete');
+});
+
+export default tap.start();

test/test.wysiwyg-selection-simple.chromium.ts

@@ -0,0 +1,62 @@
+import { expect, tap, webhelpers } from '@git.zone/tstest/tapbundle';
+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(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import two blocks
+  editor.importBlocks([
+    { id: 'para-1', type: 'paragraph', content: 'First paragraph' },
+    { id: 'head-1', type: 'heading-1', content: 'First heading' }
+  ]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 500));
+  
+  // Get paragraph element
+  const paraWrapper = editor.shadowRoot?.querySelector('[data-block-id="para-1"]');
+  const paraComponent = paraWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const paraBlock = paraComponent?.shadowRoot?.querySelector('.block.paragraph') as HTMLElement;
+  
+  // Get heading element
+  const headWrapper = editor.shadowRoot?.querySelector('[data-block-id="head-1"]');
+  const headComponent = headWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const headBlock = headComponent?.shadowRoot?.querySelector('.block.heading-1') as HTMLElement;
+  
+  console.log('Found elements:', {
+    paraBlock: !!paraBlock,
+    headBlock: !!headBlock
+  });
+  
+  // Focus paragraph
+  paraBlock.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check classes
+  console.log('Paragraph classes:', paraBlock.className);
+  console.log('Heading classes:', headBlock.className);
+  
+  // Check isSelected property
+  console.log('Paragraph component isSelected:', paraComponent.isSelected);
+  console.log('Heading component isSelected:', headComponent.isSelected);
+  
+  // Focus heading
+  headBlock.focus();
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check classes again
+  console.log('\nAfter focusing heading:');
+  console.log('Paragraph classes:', paraBlock.className);
+  console.log('Heading classes:', headBlock.className);
+  console.log('Paragraph component isSelected:', paraComponent.isSelected);
+  console.log('Heading component isSelected:', headComponent.isSelected);
+  
+  // Check that heading is selected
+  expect(headBlock.classList.contains('selected')).toBeTrue();
+  expect(paraBlock.classList.contains('selected')).toBeFalse();
+});
+
+export default tap.start();

test/test.wysiwyg-split.chromium.ts

@@ -0,0 +1,98 @@
+import { tap, expect, webhelpers } from '@git.zone/tstest/tapbundle';
+
+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
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import a test paragraph
+  editor.importBlocks([{
+    id: 'test-para-1',
+    type: 'paragraph',
+    content: 'Hello World'
+  }]);
+  
+  await editor.updateComplete;
+  
+  // Wait for blocks to render
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Get the block wrapper and component
+  const blockWrapper = editor.shadowRoot?.querySelector('[data-block-id="test-para-1"]');
+  expect(blockWrapper).toBeDefined();
+  
+  const blockComponent = blockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  expect(blockComponent).toBeDefined();
+  expect(blockComponent.block.type).toEqual('paragraph');
+  
+  // Wait for block to render
+  await blockComponent.updateComplete;
+  
+  // Test getSplitContent
+  console.log('Testing getSplitContent...');
+  const splitResult = blockComponent.getSplitContent();
+  console.log('Split result:', splitResult);
+  
+  // Since we haven't set cursor position, it might return null or split at start
+  // This is just to test if the method is callable
+  expect(typeof blockComponent.getSplitContent).toEqual('function');
+});
+
+tap.test('should handle Enter key press in paragraph', async () => {
+  // Create the wysiwyg editor
+  const editor: DeesInputWysiwyg = await webhelpers.fixture(
+    webhelpers.html`<dees-input-wysiwyg></dees-input-wysiwyg>`
+  );
+  
+  // Import a test paragraph
+  editor.importBlocks([{
+    id: 'test-enter-1',
+    type: 'paragraph',
+    content: 'First part|Second part' // | marks where we'll simulate cursor
+  }]);
+  
+  await editor.updateComplete;
+  await new Promise(resolve => setTimeout(resolve, 100));
+  
+  // Check initial state
+  expect(editor.blocks.length).toEqual(1);
+  expect(editor.blocks[0].content).toEqual('First part|Second part');
+  
+  // Get the block element
+  const blockWrapper = editor.shadowRoot?.querySelector('[data-block-id="test-enter-1"]');
+  const blockComponent = blockWrapper?.querySelector('dees-wysiwyg-block') as DeesWysiwygBlock;
+  const blockElement = blockComponent.shadowRoot?.querySelector('.block.paragraph') as HTMLDivElement;
+  
+  expect(blockElement).toBeDefined();
+  
+  // Set content without the | marker
+  blockElement.textContent = 'First partSecond part';
+  
+  // Focus the block
+  blockElement.focus();
+  
+  // Create and dispatch Enter key event
+  const enterEvent = new KeyboardEvent('keydown', {
+    key: 'Enter',
+    code: 'Enter',
+    bubbles: true,
+    cancelable: true,
+    composed: true
+  });
+  
+  // Dispatch the event
+  blockElement.dispatchEvent(enterEvent);
+  
+  // Wait for processing
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  // Check if block was split (this might not work perfectly in test environment)
+  console.log('Blocks after Enter:', editor.blocks.length);
+  console.log('Block contents:', editor.blocks.map(b => b.content));
+});
+
+export default tap.start();

ts_web/00_commitinfo_data.ts

@@ -1,8 +1,8 @@
 /**
- * autocreated commitinfo by @pushrocks/commitinfo
+ * autocreated commitinfo by @push.rocks/commitinfo
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.0.286',
-  description: 'website for lossless.com'
+  version: '3.41.0',
+  description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

ts_web/elements/00fonts.ts

@@ -0,0 +1,53 @@
+import { unsafeCSS } from '@design.estate/dees-element';
+
+/**
+ * Geist Sans font family - Main font for the design system
+ * Already available in the environment, no need to load
+ */
+export const geistSansFont = 'Geist Sans';
+
+/**
+ * Intel One Mono font family - Monospace font for code and technical content
+ * Already available in the environment, no need to load
+ */
+export const intelOneMonoFont = 'Intel One Mono';
+
+/**
+ * Complete font family stacks with fallbacks
+ */
+export const geistFontFamily = `'${geistSansFont}', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif`;
+
+export const monoFontFamily = `'${intelOneMonoFont}', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace`;
+
+/**
+ * CSS-ready font family values using unsafeCSS
+ * Use these in component styles
+ */
+export const cssGeistFontFamily = unsafeCSS(geistFontFamily);
+export const cssMonoFontFamily = unsafeCSS(monoFontFamily);
+
+/**
+ * Cal Sans font for headings - Display font
+ * May need to be loaded separately
+ */
+export const calSansFont = 'Cal Sans';
+export const calSansFontFamily = `'${calSansFont}', ${geistFontFamily}`;
+export const cssCalSansFontFamily = unsafeCSS(calSansFontFamily);
+
+/**
+ * Roboto Slab font for special content - Serif font
+ * May need to be loaded separately
+ */
+export const robotoSlabFont = 'Roboto Slab';
+export const robotoSlabFontFamily = `'${robotoSlabFont}', Georgia, serif`;
+export const cssRobotoSlabFontFamily = unsafeCSS(robotoSlabFontFamily);
+
+/**
+ * Base font styles that can be applied to components
+ */
+export const baseFontStyles = unsafeCSS(`
+  font-family: ${geistFontFamily};
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: 'cv11', 'tnum', 'cv05' 1;
+`);

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

@@ -0,0 +1,45 @@
+import { html, cssManager } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import type { DeesAppuiActivitylog } from './dees-appui-activitylog.js';
+
+export const demoFunc = () => {
+  // Create the activity log element
+  const activityLog = document.createElement('dees-appui-activitylog') as DeesAppuiActivitylog;
+
+  // 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>
+  `;
+};

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

@@ -0,0 +1,589 @@
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+import type { IActivityEntry, IActivityLogAPI } from '../../interfaces/appconfig.js';
+import { demoFunc } from './dees-appui-activitylog.demo.js';
+import { themeDefaultStyles } from '../../00theme.js';
+
+@customElement('dees-appui-activitylog')
+export class DeesAppuiActivitylog extends DeesElement implements IActivityLogAPI {
+  // STATIC
+  public static demo = demoFunc;
+  public static demoGroups = ['App UI'];
+
+  // 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 = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        /* CSS Variables aligned with secondary menu */
+        --activitylog-bg: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        --activitylog-fg: ${cssManager.bdTheme('#525252', '#a3a3a3')};
+        --activitylog-fg-muted: ${cssManager.bdTheme('#737373', '#737373')};
+        --activitylog-fg-active: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        --activitylog-border: ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        --activitylog-hover: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+        --activitylog-accent: ${cssManager.bdTheme('#78716c', '#b5a99a')};
+
+        color: var(--activitylog-fg);
+        position: relative;
+        display: block;
+        width: 100%;
+        height: 100%;
+        background: var(--activitylog-bg);
+        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+        border-left: 1px solid var(--activitylog-border);
+        cursor: default;
+        overflow: hidden;
+      }
+
+      .maincontainer {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        height: 100%;
+        width: 280px;
+      }
+
+      /* Header with streaming indicator */
+      .topbar {
+        position: absolute;
+        top: 0px;
+        height: 48px;
+        width: 100%;
+        padding: 0px 12px;
+        background: var(--activitylog-bg);
+        border-bottom: 1px solid var(--activitylog-border);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        box-sizing: border-box;
+      }
+
+      .topbar .heading {
+        font-weight: 600;
+        font-size: 14px;
+        color: var(--activitylog-fg-active);
+      }
+
+      .live-indicator {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 10px;
+        font-weight: 500;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: var(--activitylog-fg-muted);
+      }
+
+      .live-indicator .dot {
+        width: 6px;
+        height: 6px;
+        background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
+        border-radius: 50%;
+        animation: pulse 2s ease-in-out infinite;
+      }
+
+      @keyframes pulse {
+        0%, 100% { opacity: 0.5; transform: scale(0.9); }
+        50% { opacity: 1; transform: scale(1.1); }
+      }
+
+      /* Activity container */
+      .activityContainer {
+        position: absolute;
+        top: 48px;
+        bottom: 48px;
+        width: 100%;
+        padding: 8px 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: ${cssManager.bdTheme('#d4d4d4', '#333333')} transparent;
+      }
+
+      .activityContainer::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .activityContainer::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .activityContainer::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('#d4d4d4', '#333333')};
+        border-radius: 3px;
+      }
+
+      .activityContainer::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('#a3a3a3', '#525252')};
+      }
+
+      .empty-state {
+        font-size: 13px;
+        text-align: center;
+        padding: 40px 16px;
+        color: var(--activitylog-fg-muted);
+      }
+
+      /* Date separator - warm taupe styling */
+      .date-separator {
+        padding: 12px 12px 6px;
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: var(--activitylog-accent);
+        position: sticky;
+        top: 0;
+        z-index: 1;
+        background: var(--activitylog-bg);
+      }
+
+      /* Activity entry - modern stacked layout */
+      .activityentry {
+        font-size: 12px;
+        padding: 8px 12px;
+        margin: 2px 4px;
+        border-radius: 6px;
+        transition: background 0.15s ease;
+        display: flex;
+        align-items: flex-start;
+        gap: 10px;
+        line-height: 1.4;
+        animation: fadeIn 0.2s ease-out;
+      }
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+          transform: translateY(-2px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .activityentry:hover {
+        background: var(--activitylog-hover);
+      }
+
+      .activity-icon {
+        width: 28px;
+        height: 28px;
+        border-radius: 6px;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        font-size: 13px;
+        color: var(--activitylog-fg-muted);
+        margin-top: 1px;
+      }
+
+      .activity-icon.login {
+        background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.08)', 'rgba(34, 197, 94, 0.12)')};
+        color: ${cssManager.bdTheme('#16a34a', '#4ade80')};
+      }
+
+      .activity-icon.logout {
+        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.08)', 'rgba(239, 68, 68, 0.12)')};
+        color: ${cssManager.bdTheme('#dc2626', '#f87171')};
+      }
+
+      .activity-icon.view {
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.08)', 'rgba(59, 130, 246, 0.12)')};
+        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
+      }
+
+      .activity-icon.create {
+        background: ${cssManager.bdTheme('rgba(168, 85, 247, 0.08)', 'rgba(168, 85, 247, 0.12)')};
+        color: ${cssManager.bdTheme('#9333ea', '#c084fc')};
+      }
+
+      .activity-icon.update {
+        background: ${cssManager.bdTheme('rgba(251, 146, 60, 0.08)', 'rgba(251, 146, 60, 0.12)')};
+        color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
+      }
+
+      .activity-icon.delete {
+        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.08)', 'rgba(239, 68, 68, 0.12)')};
+        color: ${cssManager.bdTheme('#dc2626', '#f87171')};
+      }
+
+      .activity-icon.custom {
+        background: ${cssManager.bdTheme('rgba(100, 116, 139, 0.08)', 'rgba(100, 116, 139, 0.12)')};
+        color: ${cssManager.bdTheme('#475569', '#94a3b8')};
+      }
+
+      .activity-content {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      .activity-header {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .activity-user {
+        font-weight: 600;
+        font-size: 12px;
+        color: var(--activitylog-fg-active);
+      }
+
+      .activity-separator {
+        color: var(--activitylog-fg-muted);
+        font-size: 10px;
+      }
+
+      .timestamp {
+        color: var(--activitylog-fg-muted);
+        font-weight: 400;
+        font-size: 11px;
+        font-variant-numeric: tabular-nums;
+        font-family: 'Geist Mono', monospace;
+      }
+
+      .activity-message {
+        color: var(--activitylog-fg);
+        font-size: 12px;
+        line-height: 1.5;
+        word-break: break-word;
+      }
+
+      /* Search box - refined styling */
+      .searchbox {
+        position: absolute;
+        bottom: 0px;
+        width: 100%;
+        height: 48px;
+        background: var(--activitylog-bg);
+        border-top: 1px solid var(--activitylog-border);
+        padding: 8px 12px;
+        box-sizing: border-box;
+      }
+
+      .search-wrapper {
+        position: relative;
+        width: 100%;
+        height: 32px;
+      }
+
+      .search-icon {
+        position: absolute;
+        left: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: var(--activitylog-fg-muted);
+        font-size: 13px;
+        pointer-events: none;
+        transition: color 0.15s ease;
+      }
+
+      .searchbox input {
+        color: var(--activitylog-fg-active);
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.04)')};
+        width: 100%;
+        height: 100%;
+        border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.08)')};
+        border-radius: 6px;
+        padding: 0 12px 0 34px;
+        font-family: 'Geist Sans', sans-serif;
+        font-size: 12px;
+        transition: all 0.15s ease;
+      }
+
+      .searchbox input::placeholder {
+        color: var(--activitylog-fg-muted);
+      }
+
+      .searchbox input:focus {
+        outline: none;
+        border-color: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.02)', 'rgba(255, 255, 255, 0.06)')};
+      }
+
+      .search-wrapper:has(input:focus) .search-icon {
+        color: var(--activitylog-fg);
+      }
+    `,
+  ];
+
+  // RENDER
+  public render(): TemplateResult {
+    const filteredEntries = this.getFilteredEntries();
+    const groupedEntries = this.groupEntriesByDate(filteredEntries);
+
+    return html`
+      ${domtools.elementBasic.styles}
+      <style></style>
+      <div class="maincontainer">
+        <div class="topbar">
+          <div class="heading">Activity Log</div>
+          ${filteredEntries.length > 0
+            ? html`<div class="live-indicator"><span class="dot"></span>Live</div>`
+            : ''}
+        </div>
+        <div class="activityContainer">
+          ${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..."
+              .value=${this.searchQuery}
+              @input=${this.handleSearchInput}
+            />
+          </div>
+        </div>
+      </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)}
+      >
+        <div class="activity-icon ${entry.type}">
+          <dees-icon .icon=${iconName}></dees-icon>
+        </div>
+        <div class="activity-content">
+          <div class="activity-header">
+            <span class="activity-user">${entry.user}</span>
+            <span class="activity-separator">·</span>
+            <span class="timestamp">${timeStr}</span>
+          </div>
+          <div class="activity-message">${entry.message}</div>
+        </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 = '';
+        },
+      },
+    ]);
+  }
+}

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

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

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

@@ -0,0 +1,490 @@
+import {
+  DeesElement,
+  type TemplateResult,
+  customElement,
+  property,
+  state,
+  html,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import * as interfaces from '../../interfaces/index.js';
+import * as plugins from '../../00plugins.js';
+import { demoFunc } from './demo.js';
+import { appuiAppbarStyles } from './styles.js';
+import { renderAppuiAppbar } from './template.js';
+
+// Import required components
+import '../../00group-utility/dees-icon/dees-icon.js';
+import '../../00group-utility/dees-windowcontrols/dees-windowcontrols.js';
+import '../dees-appui-profiledropdown/dees-appui-profiledropdown.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-appui-appbar': DeesAppuiBar;
+  }
+}
+
+@customElement('dees-appui-appbar')
+export class DeesAppuiBar extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['App UI'];
+
+  // INSTANCE PROPERTIES
+  @property({ type: Array })
+  accessor menuItems: interfaces.IAppBarMenuItem[] = [];
+
+  @property({ type: String })
+  accessor breadcrumbs: string = '';
+
+  @property({ type: String })
+  accessor breadcrumbSeparator: string = ' > ';
+
+  @property({ type: Boolean })
+  accessor showWindowControls: boolean = true;
+
+
+  @property({ type: Object })
+  accessor user: {
+    name: string;
+    email?: string;
+    avatar?: string;
+    status?: 'online' | 'offline' | 'busy' | 'away';
+  } | undefined = undefined;
+
+  @property({ type: Array })
+  accessor profileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];
+
+  @property({ type: Boolean })
+  accessor showSearch: boolean = false;
+
+  // Activity log toggle
+  @property({ type: Boolean })
+  accessor showActivityLogToggle: boolean = false;
+
+  @property({ type: Number })
+  accessor activityLogCount: number = 0;
+
+  @property({ type: Boolean })
+  accessor activityLogActive: boolean = false;
+
+  // STATE
+  @state()
+  accessor activeMenu: string | null = null;
+
+  @state()
+  accessor openDropdowns: Set<string> = new Set();
+
+  @state()
+  accessor focusedItem: string | null = null;
+
+  @state()
+  accessor focusedDropdownItem: number = -1;
+
+  @state()
+  accessor isProfileDropdownOpen: boolean = false;
+
+  public static styles = appuiAppbarStyles;
+
+  // INSTANCE
+  public render(): TemplateResult {
+    return renderAppuiAppbar(this);
+  }
+
+
+
+  public renderMenuItems(): TemplateResult {
+    return html`
+      ${this.menuItems.map((item, index) => this.renderMenuItem(item, `menu-${index}`))}
+    `;
+  }
+
+  private renderMenuItem(item: interfaces.IAppBarMenuItem, itemId: string): TemplateResult {
+    if ('divider' in item && item.divider) {
+      return html`<div class="dropdown-divider"></div>`;
+    }
+
+    const menuItem = item as interfaces.IAppBarMenuItemRegular;
+    const isActive = this.activeMenu === itemId;
+    const hasSubmenu = menuItem.submenu && menuItem.submenu.length > 0;
+
+    return html`
+      <div
+        class="menuItem ${isActive ? 'active' : ''}"
+        ?disabled=${menuItem.disabled}
+        tabindex="${menuItem.disabled ? -1 : 0}"
+        data-item-id="${itemId}"
+        @click=${() => this.handleMenuClick(menuItem, itemId)}
+        @keydown=${(e: KeyboardEvent) => this.handleMenuKeydown(e, menuItem, itemId)}
+        role="menuitem"
+        aria-haspopup="${hasSubmenu}"
+        aria-expanded="${isActive}"
+      >
+        ${menuItem.iconName ? html`<dees-icon .icon="${`lucide:${menuItem.iconName}`}"></dees-icon>` : ''}
+        ${menuItem.name}
+        ${hasSubmenu ? this.renderDropdown(menuItem.submenu, itemId, isActive) : ''}
+      </div>
+    `;
+  }
+
+  private renderDropdown(items: interfaces.IAppBarMenuItem[], parentId: string, isOpen: boolean): TemplateResult {
+    return html`
+      <div 
+        class="dropdown ${isOpen ? 'open' : ''}" 
+        @click=${(e: Event) => e.stopPropagation()}
+        @keydown=${(e: KeyboardEvent) => this.handleDropdownKeydown(e, items, parentId)}
+        tabindex="${isOpen ? 0 : -1}"
+        role="menu"
+      >
+        ${items.map((item, index) => this.renderDropdownItem(item, `${parentId}-${index}`))}
+      </div>
+    `;
+  }
+
+  private renderDropdownItem(item: interfaces.IAppBarMenuItem, itemId: string): TemplateResult {
+    if ('divider' in item && item.divider) {
+      return html`<div class="dropdown-divider"></div>`;
+    }
+
+    const menuItem = item as interfaces.IAppBarMenuItemRegular;
+    const itemIndex = parseInt(itemId.split('-').pop() || '0');
+    const isFocused = this.focusedDropdownItem === itemIndex;
+    
+    return html`
+      <div
+        class="dropdown-item ${isFocused ? 'focused' : ''}"
+        ?disabled=${menuItem.disabled}
+        @click=${() => this.handleDropdownItemClick(menuItem)}
+        @mouseenter=${() => this.focusedDropdownItem = itemIndex}
+        role="menuitem"
+        tabindex="${menuItem.disabled ? -1 : 0}"
+      >
+        ${menuItem.iconName ? html`<dees-icon .icon="${`lucide:${menuItem.iconName}`}"></dees-icon>` : ''}
+        <span>${menuItem.name}</span>
+        ${menuItem.shortcut ? html`<span class="shortcut">${menuItem.shortcut}</span>` : ''}
+      </div>
+    `;
+  }
+
+  public renderBreadcrumbs(): TemplateResult {
+    if (!this.breadcrumbs) {
+      return html``;
+    }
+
+    const parts = this.breadcrumbs.split(this.breadcrumbSeparator);
+    return html`
+      ${parts.map((part, index) => html`
+        ${index > 0 ? html`<span class="breadcrumb-separator">${this.breadcrumbSeparator}</span>` : ''}
+        <span 
+          class="breadcrumb-item" 
+          @click=${() => this.handleBreadcrumbClick(part, index)}
+        >
+          ${part}
+        </span>
+      `)}
+    `;
+  }
+
+  public renderAccountSection(): TemplateResult {
+    return html`
+      ${this.showSearch ? html`
+        <dees-icon
+          class="search-icon"
+          .icon=${'lucide:search'}
+          @click=${this.handleSearchClick}
+        ></dees-icon>
+      ` : ''}
+      ${this.user ? html`
+        <div style="position: relative;">
+          <div class="user-info" @click=${this.handleUserClick}>
+            <div class="user-avatar">
+              ${this.user.avatar ? 
+                html`<img src="${this.user.avatar}" alt="${this.user.name}">` : 
+                html`${this.user.name.charAt(0).toUpperCase()}`
+              }
+              ${this.user.status ? html`
+                <div class="user-status ${this.user.status}"></div>
+              ` : ''}
+            </div>
+            <span>${this.user.name}</span>
+          </div>
+          <dees-appui-profiledropdown
+            .user=${this.user}
+            .menuItems=${this.profileMenuItems}
+            .isOpen=${this.isProfileDropdownOpen}
+            .position=${'top-right'}
+            @menu-select=${(e: CustomEvent) => this.handleProfileMenuSelect(e)}
+          ></dees-appui-profiledropdown>
+        </div>
+      ` : ''}
+      ${this.showActivityLogToggle ? html`
+        <div
+          class="activity-toggle ${this.activityLogActive ? 'active' : ''}"
+          @click=${this.handleActivityToggle}
+          title="Activity Log"
+        >
+          <dees-icon .icon=${'lucide:activity'}></dees-icon>
+          ${this.activityLogCount > 0 ? html`
+            <span class="activity-badge">${this.activityLogCount > 99 ? '99+' : this.activityLogCount}</span>
+          ` : ''}
+        </div>
+      ` : ''}
+    `;
+  }
+
+  // Event handlers
+  private handleMenuClick(item: interfaces.IAppBarMenuItemRegular, itemId: string) {
+    if (item.disabled) return;
+
+    if (item.submenu && item.submenu.length > 0) {
+      // Toggle dropdown
+      if (this.activeMenu === itemId) {
+        this.activeMenu = null;
+      } else {
+        this.activeMenu = itemId;
+      }
+    } else {
+      // Execute action
+      this.activeMenu = null;
+      if (item.action) {
+        item.action();
+      }
+      this.dispatchEvent(new CustomEvent('menu-select', { 
+        detail: { item },
+        bubbles: true,
+        composed: true 
+      }));
+    }
+  }
+
+  private handleDropdownItemClick(item: interfaces.IAppBarMenuItemRegular) {
+    if (item.disabled) return;
+
+    this.activeMenu = null;
+    if (item.action) {
+      item.action();
+    }
+    this.dispatchEvent(new CustomEvent('menu-select', { 
+      detail: { item },
+      bubbles: true,
+      composed: true 
+    }));
+  }
+
+  private handleMenuKeydown(e: KeyboardEvent, item: interfaces.IAppBarMenuItemRegular, itemId: string) {
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        this.handleMenuClick(item, itemId);
+        break;
+      case 'ArrowDown':
+        if (item.submenu && this.activeMenu === itemId) {
+          e.preventDefault();
+          // Focus first non-disabled item in dropdown
+          this.focusedDropdownItem = 0;
+          const firstValidItem = this.findNextValidItem(item.submenu, -1, 1);
+          if (firstValidItem !== -1) {
+            this.focusedDropdownItem = firstValidItem;
+            // Focus the dropdown element
+            setTimeout(() => {
+              const dropdown = this.renderRoot.querySelector('.dropdown.open');
+              if (dropdown) {
+                (dropdown as HTMLElement).focus();
+              }
+            }, 0);
+          }
+        }
+        break;
+      case 'Escape':
+        this.activeMenu = null;
+        this.focusedDropdownItem = -1;
+        break;
+      case 'Tab':
+        // Let default tab navigation work but close dropdown
+        if (this.activeMenu === itemId) {
+          this.activeMenu = null;
+          this.focusedDropdownItem = -1;
+        }
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        this.focusNextMenuItem(itemId, 1);
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        this.focusNextMenuItem(itemId, -1);
+        break;
+    }
+  }
+
+  private handleBreadcrumbClick(breadcrumb: string, index: number) {
+    this.dispatchEvent(new CustomEvent('breadcrumb-navigate', { 
+      detail: { breadcrumb, index },
+      bubbles: true,
+      composed: true 
+    }));
+  }
+
+  private handleSearchClick() {
+    this.dispatchEvent(new CustomEvent('search-click', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleActivityToggle() {
+    this.dispatchEvent(new CustomEvent('activity-toggle', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleUserClick() {
+    this.isProfileDropdownOpen = !this.isProfileDropdownOpen;
+    
+    // Also emit the event for backward compatibility
+    this.dispatchEvent(new CustomEvent('user-menu-open', { 
+      bubbles: true,
+      composed: true 
+    }));
+  }
+
+  private handleProfileMenuSelect(e: CustomEvent) {
+    this.isProfileDropdownOpen = false;
+    
+    // Re-emit the event
+    this.dispatchEvent(new CustomEvent('profile-menu-select', { 
+      detail: e.detail,
+      bubbles: true,
+      composed: true 
+    }));
+  }
+
+  // Lifecycle
+  async connectedCallback() {
+    await super.connectedCallback();
+    // Add global click listener to close dropdowns
+    this.addEventListener('click', this.handleGlobalClick);
+    document.addEventListener('click', this.handleDocumentClick);
+  }
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    document.removeEventListener('click', this.handleDocumentClick);
+  }
+
+  private handleGlobalClick = (e: Event) => {
+    // Prevent closing when clicking inside
+    e.stopPropagation();
+  }
+
+  private handleDocumentClick = () => {
+    // Close all dropdowns when clicking outside
+    this.activeMenu = null;
+    this.focusedDropdownItem = -1;
+    // Note: Profile dropdown handles its own outside clicks
+  }
+
+  private handleDropdownKeydown(e: KeyboardEvent, items: interfaces.IAppBarMenuItem[], _parentId: string) {
+    const validItems = items.filter(item => !('divider' in item && item.divider));
+    
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        const nextIndex = this.findNextValidItem(items, this.focusedDropdownItem, 1);
+        if (nextIndex !== -1) {
+          this.focusedDropdownItem = nextIndex;
+        }
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        const prevIndex = this.findNextValidItem(items, this.focusedDropdownItem, -1);
+        if (prevIndex !== -1) {
+          this.focusedDropdownItem = prevIndex;
+        }
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (this.focusedDropdownItem !== -1) {
+          const focusedItem = validItems[this.focusedDropdownItem];
+          if (focusedItem && 'action' in focusedItem && !focusedItem.disabled) {
+            this.handleDropdownItemClick(focusedItem as interfaces.IAppBarMenuItemRegular);
+          }
+        }
+        break;
+      case 'Home':
+        e.preventDefault();
+        const firstIndex = this.findNextValidItem(items, -1, 1);
+        if (firstIndex !== -1) {
+          this.focusedDropdownItem = firstIndex;
+        }
+        break;
+      case 'End':
+        e.preventDefault();
+        const lastIndex = this.findNextValidItem(items, items.length, -1);
+        if (lastIndex !== -1) {
+          this.focusedDropdownItem = lastIndex;
+        }
+        break;
+      case 'Escape':
+        e.preventDefault();
+        this.activeMenu = null;
+        this.focusedDropdownItem = -1;
+        // Return focus to menu item
+        const menuItem = this.renderRoot.querySelector(`.menuItem.active`);
+        if (menuItem) {
+          (menuItem as HTMLElement).focus();
+        }
+        break;
+    }
+  }
+
+  private findNextValidItem(items: interfaces.IAppBarMenuItem[], currentIndex: number, direction: number): number {
+    let index = currentIndex + direction;
+    
+    while (index >= 0 && index < items.length) {
+      const item = items[index];
+      // Skip dividers and disabled items
+      if (!('divider' in item && item.divider) && !('disabled' in item && item.disabled)) {
+        return index;
+      }
+      index += direction;
+    }
+    
+    return -1;
+  }
+
+  private focusNextMenuItem(currentItemId: string, direction: number) {
+    const menuItems = Array.from(this.renderRoot.querySelectorAll('.menuItem'));
+    const currentIndex = menuItems.findIndex(item => item.getAttribute('data-item-id') === currentItemId);
+    
+    if (currentIndex === -1) return;
+    
+    let nextIndex = currentIndex + direction;
+    
+    // Wrap around
+    if (nextIndex < 0) {
+      nextIndex = menuItems.length - 1;
+    } else if (nextIndex >= menuItems.length) {
+      nextIndex = 0;
+    }
+    
+    // Find next non-disabled item
+    let attempts = 0;
+    while (attempts < menuItems.length) {
+      const nextItem = menuItems[nextIndex] as HTMLElement;
+      if (!nextItem.hasAttribute('disabled')) {
+        nextItem.focus();
+        // Close current dropdown if open
+        if (this.activeMenu) {
+          this.activeMenu = null;
+          this.focusedDropdownItem = -1;
+        }
+        break;
+      }
+      nextIndex = (nextIndex + direction + menuItems.length) % menuItems.length;
+      attempts++;
+    }
+  }
+}

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

@@ -0,0 +1,212 @@
+import { html, css } from '@design.estate/dees-element';
+import type { DeesAppuiBar } from './component.js';
+import type { IAppBarMenuItem } from '../../interfaces/appbarmenuitem.js';
+import '@design.estate/dees-wcctools/demotools';
+import './component.js';
+
+export const demoFunc = () => {
+  // Sample menu items with various configurations
+  // Note: Following standard desktop UI patterns, top-level menu items don't have icons
+  // Icons are only used in dropdown menu items for better visual hierarchy
+  const menuItems: IAppBarMenuItem[] = [
+    {
+      name: 'File',
+      action: async () => {}, // No-op action for menu with submenu
+      submenu: [
+        { name: 'New File', shortcut: 'Cmd+N', iconName: 'file-plus', action: async () => console.log('New file') },
+        { name: 'Open...', shortcut: 'Cmd+O', iconName: 'folder-open', action: async () => console.log('Open') },
+        { name: 'Open Recent', action: async () => {}, submenu: [
+          { name: 'project-alpha.ts', action: async () => console.log('Open recent 1') },
+          { name: 'config.json', action: async () => console.log('Open recent 2') },
+          { name: 'readme.md', action: async () => console.log('Open recent 3') },
+        ]},
+        { divider: true },
+        { name: 'Save', shortcut: 'Cmd+S', iconName: 'save', action: async () => console.log('Save') },
+        { name: 'Save As...', shortcut: 'Cmd+Shift+S', action: async () => console.log('Save as'), disabled: true },
+        { divider: true },
+        { name: 'Exit', shortcut: 'Cmd+Q', action: async () => console.log('Exit') },
+      ]
+    },
+    {
+      name: 'Edit',
+      action: async () => {}, // No-op action for menu with submenu
+      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') },
+        { divider: true },
+        { name: 'Find', shortcut: 'Cmd+F', iconName: 'search', action: async () => console.log('Find') },
+        { name: 'Replace', shortcut: 'Cmd+H', action: async () => console.log('Replace') },
+      ]
+    },
+    {
+      name: 'View',
+      action: async () => {}, // No-op action for menu with submenu
+      submenu: [
+        { name: 'Toggle Fullscreen', shortcut: 'F11', iconName: 'expand', action: async () => console.log('Fullscreen') },
+        { name: 'Zoom In', shortcut: 'Cmd++', iconName: 'zoom-in', action: async () => console.log('Zoom in') },
+        { name: 'Zoom Out', shortcut: 'Cmd+-', iconName: 'zoom-out', action: async () => console.log('Zoom out') },
+        { name: 'Reset Zoom', shortcut: 'Cmd+0', action: async () => console.log('Reset zoom') },
+        { divider: true },
+        { 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') },
+      ]
+    },
+    {
+      name: 'Help',
+      action: async () => {}, // No-op action for menu with submenu
+      submenu: [
+        { name: 'Documentation', iconName: 'book', action: async () => console.log('Documentation') },
+        { name: 'Release Notes', iconName: 'file-text', 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') },
+      ]
+    }
+  ];
+
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const appbar = elementArg.querySelector('#appbar') as DeesAppuiBar;
+      
+      // Set up status toggle
+      const statusButtons = elementArg.querySelectorAll('.status-toggle dees-button');
+      statusButtons[0].addEventListener('click', () => {
+        appbar.user = { ...appbar.user, status: 'online' };
+      });
+      statusButtons[1].addEventListener('click', () => {
+        appbar.user = { ...appbar.user, status: 'busy' };
+      });
+      statusButtons[2].addEventListener('click', () => {
+        appbar.user = { ...appbar.user, status: 'away' };
+      });
+      statusButtons[3].addEventListener('click', () => {
+        appbar.user = { ...appbar.user, status: 'offline' };
+      });
+      
+      // Set up window controls toggle
+      const windowControlsButton = elementArg.querySelector('.window-controls-toggle dees-button');
+      windowControlsButton.addEventListener('click', () => {
+        appbar.showWindowControls = !appbar.showWindowControls;
+      });
+      
+      // Set up breadcrumb buttons
+      const breadcrumbButtons = elementArg.querySelectorAll('.breadcrumb-toggle dees-button');
+      breadcrumbButtons[0].addEventListener('click', () => {
+        appbar.breadcrumbs = 'Home > Documents > Projects > MyApp > src > index.ts';
+      });
+      breadcrumbButtons[1].addEventListener('click', () => {
+        appbar.breadcrumbs = 'Dashboard';
+      });
+    }}>
+      <style>
+        ${css`
+        .demo-container {
+          height: 600px;
+          width: 100%;
+          background: #1a1a1a;
+          display: flex;
+          flex-direction: column;
+        }
+        
+        .content {
+          flex: 1;
+          padding: 20px;
+          color: #ccc;
+        }
+        
+        .controls {
+          padding: 20px;
+          display: flex;
+          gap: 16px;
+          flex-wrap: wrap;
+        }
+        
+        .control-group {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+        
+        .control-group label {
+          font-size: 12px;
+          color: #888;
+        }
+      `}
+    </style>
+    
+    <div class="demo-container">
+      <dees-appui-appbar
+        id="appbar"
+        .menuItems=${menuItems}
+        .breadcrumbs=${'Project > src > components > AppBar.ts'}
+        .breadcrumbSeparator=${' > '}
+        .showWindowControls=${true}
+        .showSearch=${true}
+        .theme=${'dark'}
+        .user=${{
+          name: 'John Doe',
+          status: 'online' as 'online' | 'offline' | 'busy' | 'away'
+        }}
+        @menu-select=${(e: CustomEvent) => console.log('Menu selected:', e.detail.item)}
+        @breadcrumb-navigate=${(e: CustomEvent) => console.log('Breadcrumb clicked:', e.detail)}
+        @search-click=${() => console.log('Search clicked')}
+        @user-menu-open=${() => console.log('User menu clicked')}
+      ></dees-appui-appbar>
+      
+      <div class="content">
+        <h2>App Bar Demo</h2>
+        <p>This demo shows various features of the app bar component:</p>
+        <ul>
+          <li>Dynamic menu items with icons, shortcuts, and submenus</li>
+          <li>Breadcrumb navigation</li>
+          <li>User account section with status indicator</li>
+          <li>Search icon</li>
+          <li>Window controls (platform-specific)</li>
+          <li>Dark/light theme support</li>
+          <li>Keyboard navigation (Tab, Enter, Escape)</li>
+          <li>Custom events for all interactions</li>
+        </ul>
+      </div>
+      
+      <div class="controls">
+        <div class="control-group">
+          <label>Theme</label>
+          <dees-button-group class="theme-toggle">
+            <dees-button>Dark</dees-button>
+            <dees-button>Light</dees-button>
+          </dees-button-group>
+        </div>
+        
+        <div class="control-group">
+          <label>User Status</label>
+          <dees-button-group class="status-toggle">
+            <dees-button>Online</dees-button>
+            <dees-button>Busy</dees-button>
+            <dees-button>Away</dees-button>
+            <dees-button>Offline</dees-button>
+          </dees-button-group>
+        </div>
+        
+        <div class="control-group">
+          <label>Window Controls</label>
+          <dees-button-group class="window-controls-toggle">
+            <dees-button>Toggle</dees-button>
+          </dees-button-group>
+        </div>
+        
+        <div class="control-group">
+          <label>Breadcrumbs</label>
+          <dees-button-group class="breadcrumb-toggle">
+            <dees-button>Long Path</dees-button>
+            <dees-button>Short Path</dees-button>
+          </dees-button-group>
+        </div>
+      </div>
+    </div>
+    </dees-demowrapper>
+  `;
+};

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

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

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

@@ -0,0 +1,286 @@
+import { css, cssManager } from '@design.estate/dees-element';
+
+export const appuiAppbarStyles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        /* CSS Variables for theming */
+        --appbar-height: 40px;
+        --appbar-font-size: 12px;
+        
+        display: block;
+        position: relative;
+        width: 100%;
+        height: var(--appbar-height);
+        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
+        font-size: var(--appbar-font-size);
+        display: grid;
+        grid-template-columns: auto 1fr auto;
+        -webkit-app-region: drag;
+        user-select: none;
+      }
+
+      .menus {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 0 8px;
+        cursor: default;
+      }
+
+      .menuItem {
+        position: relative;
+        line-height: 24px;
+        padding: 0px 12px;
+        margin: 8px 0px;
+        border-radius: 4px;
+        -webkit-app-region: no-drag;
+        transition: all 0.2s ease;
+        cursor: default;
+        outline: none;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      /* Optional: Style for menu items with icons (not typically used for top-level items) */
+      .menuItem dees-icon {
+        font-size: 14px;
+        opacity: 0.8;
+      }
+
+      .menuItem:hover {
+        background: ${cssManager.bdTheme('#00000010', '#ffffff20')};
+        color: ${cssManager.bdTheme('#000000', '#ffffff')};
+      }
+
+      .menuItem.active {
+        background: ${cssManager.bdTheme('#00000020', '#ffffff30')};
+        color: ${cssManager.bdTheme('#000000', '#ffffff')};
+      }
+
+      .menuItem[disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      .menuItem:focus-visible {
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('#00000080', '#ffffff80')};
+      }
+
+
+      /* Dropdown styles */
+      .dropdown {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        min-width: 200px;
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        border-radius: 4px;
+        box-shadow: ${cssManager.bdTheme('0 4px 12px rgba(0, 0, 0, 0.15)', '0 4px 12px rgba(0, 0, 0, 0.3)')};
+        margin-top: 4px;
+        z-index: 1000;
+        opacity: 0;
+        transform: translateY(-10px);
+        transition: opacity 0.2s, transform 0.2s;
+        pointer-events: none;
+      }
+
+      .dropdown.open {
+        opacity: 1;
+        transform: translateY(0);
+        pointer-events: auto;
+      }
+
+      .dropdown-item {
+        padding: 8px 16px;
+        cursor: default;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        transition: background 0.1s;
+      }
+
+      .dropdown-item:hover,
+      .dropdown-item.focused {
+        background: ${cssManager.bdTheme('#00000010', '#ffffff20')};
+      }
+
+      .dropdown-divider {
+        height: 1px;
+        background: ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        margin: 4px 0;
+      }
+
+      .dropdown-item[disabled] {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      .dropdown-item .shortcut {
+        margin-left: auto;
+        opacity: 0.6;
+        font-size: 11px;
+      }
+
+      /* Breadcrumbs */
+      .breadcrumbs {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        padding: 0 16px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .breadcrumb-item {
+        color: ${cssManager.bdTheme('#00000080', '#ffffff80')};
+        cursor: default;
+        transition: color 0.2s;
+      }
+
+      .breadcrumb-item:hover {
+        color: ${cssManager.bdTheme('#000000', '#ffffff')};
+      }
+
+      .breadcrumb-separator {
+        margin: 0 8px;
+        opacity: 0.5;
+      }
+
+      /* Account section */
+      .account {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding: 0 16px;
+        gap: 12px;
+      }
+
+      .search-icon {
+        cursor: default;
+        opacity: 0.7;
+        transition: opacity 0.2s;
+      }
+
+      .search-icon:hover {
+        opacity: 1;
+      }
+
+      .user-info {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        cursor: default;
+        padding: 4px 8px;
+        border-radius: 4px;
+        transition: background 0.2s;
+      }
+
+      .user-info:hover {
+        background: ${cssManager.bdTheme('#00000010', '#ffffff20')};
+      }
+
+      .user-avatar {
+        position: relative;
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('#00000020', '#ffffff30')};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        font-weight: bold;
+      }
+
+      .user-avatar img {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        object-fit: cover;
+      }
+
+      .user-status {
+        position: absolute;
+        bottom: -2px;
+        right: -2px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        border: 2px solid ${cssManager.bdTheme('#ffffff', '#000000')};
+      }
+
+      .user-status.online {
+        background: #4caf50;
+      }
+
+      .user-status.offline {
+        background: #757575;
+      }
+
+      .user-status.busy {
+        background: #f44336;
+      }
+
+      .user-status.away {
+        background: #ff9800;
+      }
+
+      /* Activity log toggle button */
+      .activity-toggle {
+        display: flex;
+        align-items: center;
+        gap: 2px;
+        height: 28px;
+        padding: 0 8px;
+        border-radius: 6px;
+        cursor: default;
+        -webkit-app-region: no-drag;
+        color: ${cssManager.bdTheme('#00000060', '#ffffff60')};
+        border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
+        transition: all 0.15s ease;
+      }
+
+      .activity-toggle:hover {
+        background: ${cssManager.bdTheme('#00000010', '#ffffff15')};
+        color: ${cssManager.bdTheme('#000000', '#ffffff')};
+        border-color: transparent;
+      }
+
+      .activity-toggle.active {
+        background: ${cssManager.bdTheme('#00000015', '#ffffff20')};
+        color: ${cssManager.bdTheme('#000000', '#ffffff')};
+        border-color: transparent;
+      }
+
+      .activity-toggle dees-icon {
+        font-size: 14px;
+      }
+
+      .activity-badge {
+        position: relative;
+        margin-left: 4px;
+        min-width: 16px;
+        height: 16px;
+        padding: 0 4px;
+        background: ${cssManager.bdTheme('#525252', '#525252')};
+        color: #fafafa;
+        font-size: 10px;
+        font-weight: 600;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+      }
+    `,
+  ];
+

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

@@ -0,0 +1,18 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesAppuiBar } from './component.js';
+
+export const renderAppuiAppbar = (component: DeesAppuiBar): TemplateResult => {
+      return html`
+        <div class="menus">
+          ${component.showWindowControls ? html`<dees-windowcontrols></dees-windowcontrols>` : ''}
+          ${component.renderMenuItems()}
+        </div>
+        <div class="breadcrumbs">
+          ${component.renderBreadcrumbs()}
+        </div>
+        <div class="account">
+          ${component.renderAccountSection()}
+        </div>
+      `;
+  
+};

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

@@ -0,0 +1,210 @@
+import { html } from '@design.estate/dees-element';
+import type { DeesAppuiBottombar } from './dees-appui-bottombar.js';
+import '@design.estate/dees-wcctools/demotools';
+
+export const demoFunc = () => {
+  return html`
+    <dees-demowrapper>
+      <style>
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          background: #1a1a1a;
+        }
+
+        .demo-section {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+
+        .demo-label {
+          font-size: 12px;
+          color: #737373;
+          font-family: 'Geist Sans', sans-serif;
+        }
+
+        .demo-bottombar-wrapper {
+          border: 1px solid hsl(0 0% 20%);
+          border-radius: 4px;
+          overflow: hidden;
+        }
+      </style>
+      <div class="demo-container">
+        <div class="demo-section">
+          <div class="demo-label">Bottom bar with status widgets and actions</div>
+          <div class="demo-bottombar-wrapper">
+            <dees-appui-bottombar
+              id="demo-bottombar"
+            ></dees-appui-bottombar>
+          </div>
+        </div>
+
+        <div class="demo-section">
+          <div class="demo-label">Controls</div>
+          <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+            <button onclick="addSuccessWidget()">Add Success Widget</button>
+            <button onclick="addWarningWidget()">Add Warning Widget</button>
+            <button onclick="addErrorWidget()">Add Error Widget</button>
+            <button onclick="addLoadingWidget()">Add Loading Widget</button>
+            <button onclick="addRightWidget()">Add Right Widget</button>
+            <button onclick="addAction()">Add Action</button>
+            <button onclick="clearAll()">Clear All</button>
+          </div>
+        </div>
+      </div>
+      <script type="module">
+        const bottombar = document.getElementById('demo-bottombar');
+
+        // Wait for component to initialize
+        await bottombar.updateComplete;
+
+        // Add initial widgets
+        bottombar.addWidget({
+          id: 'status',
+          iconName: 'lucide:activity',
+          label: 'System Online',
+          status: 'success',
+          tooltip: 'All systems operational',
+          onClick: () => console.log('Status clicked'),
+          contextMenuItems: [
+            { name: 'View Details', iconName: 'lucide:info', action: () => alert('System details') },
+            { divider: true },
+            { name: 'Refresh Status', iconName: 'lucide:refreshCw', action: () => alert('Refreshing...') },
+          ],
+        });
+
+        bottombar.addWidget({
+          id: 'notifications',
+          iconName: 'lucide:bell',
+          label: '3 notifications',
+          status: 'warning',
+          tooltip: 'You have unread notifications',
+          onClick: () => console.log('Notifications clicked'),
+        });
+
+        bottombar.addWidget({
+          id: 'version',
+          iconName: 'lucide:gitBranch',
+          label: 'v1.2.3',
+          tooltip: 'Current version',
+          position: 'right',
+          onClick: () => console.log('Version clicked'),
+        });
+
+        // Add initial actions
+        bottombar.addAction({
+          id: 'settings',
+          iconName: 'lucide:settings',
+          tooltip: 'Settings',
+          position: 'right',
+          onClick: () => alert('Settings clicked'),
+        });
+
+        bottombar.addAction({
+          id: 'help',
+          iconName: 'lucide:helpCircle',
+          tooltip: 'Help',
+          position: 'right',
+          onClick: () => alert('Help clicked'),
+        });
+
+        // Demo control functions
+        let widgetCounter = 0;
+        let actionCounter = 0;
+
+        window.addSuccessWidget = () => {
+          widgetCounter++;
+          bottombar.addWidget({
+            id: 'success-' + widgetCounter,
+            iconName: 'lucide:checkCircle',
+            label: 'Success ' + widgetCounter,
+            status: 'success',
+            tooltip: 'Success widget',
+            onClick: () => bottombar.removeWidget('success-' + widgetCounter),
+          });
+        };
+
+        window.addWarningWidget = () => {
+          widgetCounter++;
+          bottombar.addWidget({
+            id: 'warning-' + widgetCounter,
+            iconName: 'lucide:alertTriangle',
+            label: 'Warning ' + widgetCounter,
+            status: 'warning',
+            tooltip: 'Warning widget',
+            onClick: () => bottombar.removeWidget('warning-' + widgetCounter),
+          });
+        };
+
+        window.addErrorWidget = () => {
+          widgetCounter++;
+          bottombar.addWidget({
+            id: 'error-' + widgetCounter,
+            iconName: 'lucide:xCircle',
+            label: 'Error ' + widgetCounter,
+            status: 'error',
+            tooltip: 'Error widget',
+            onClick: () => bottombar.removeWidget('error-' + widgetCounter),
+          });
+        };
+
+        window.addLoadingWidget = () => {
+          widgetCounter++;
+          const id = 'loading-' + widgetCounter;
+          bottombar.addWidget({
+            id: id,
+            iconName: 'lucide:loader2',
+            label: 'Loading...',
+            status: 'active',
+            loading: true,
+            tooltip: 'Loading in progress',
+          });
+
+          // Simulate completion after 3 seconds
+          setTimeout(() => {
+            bottombar.updateWidget(id, {
+              iconName: 'lucide:check',
+              label: 'Done!',
+              status: 'success',
+              loading: false,
+            });
+          }, 3000);
+        };
+
+        window.addRightWidget = () => {
+          widgetCounter++;
+          bottombar.addWidget({
+            id: 'right-' + widgetCounter,
+            iconName: 'lucide:info',
+            label: 'Right ' + widgetCounter,
+            position: 'right',
+            onClick: () => bottombar.removeWidget('right-' + widgetCounter),
+          });
+        };
+
+        window.addAction = () => {
+          actionCounter++;
+          bottombar.addAction({
+            id: 'action-' + actionCounter,
+            iconName: 'lucide:zap',
+            tooltip: 'Action ' + actionCounter,
+            onClick: () => {
+              alert('Action ' + actionCounter + ' clicked');
+              bottombar.removeAction('action-' + actionCounter);
+            },
+          });
+        };
+
+        window.clearAll = () => {
+          bottombar.clearWidgets();
+          bottombar.clearActions();
+          widgetCounter = 0;
+          actionCounter = 0;
+        };
+      </script>
+    </dees-demowrapper>
+  `;
+};

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

@@ -0,0 +1,315 @@
+import {
+  DeesElement,
+  type TemplateResult,
+  customElement,
+  html,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
+import type {
+  IBottomBarWidget,
+  IBottomBarAction,
+  IBottomBarAPI,
+} from '../../interfaces/appconfig.js';
+import { demoFunc } from './dees-appui-bottombar.demo.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-appui-bottombar': DeesAppuiBottombar;
+  }
+}
+
+@customElement('dees-appui-bottombar')
+export class DeesAppuiBottombar extends DeesElement implements IBottomBarAPI {
+  public static demo = demoFunc;
+  public static demoGroups = ['App UI'];
+
+  // INSTANCE PROPERTIES
+  @state()
+  accessor widgets: IBottomBarWidget[] = [];
+
+  @state()
+  accessor actions: IBottomBarAction[] = [];
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        height: 24px;
+        flex-shrink: 0;
+        user-select: none;
+      }
+
+      .bottom-bar {
+        height: 24px;
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+        gap: 4px;
+        background: ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 6%)')};
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 85%)', 'hsl(0 0% 15%)')};
+        font-size: 11px;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+      }
+
+      .widget {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 2px 6px;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: background 0.15s ease, color 0.15s ease;
+        white-space: nowrap;
+      }
+
+      .widget:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+      }
+
+      .widget dees-icon {
+        flex-shrink: 0;
+      }
+
+      .widget-separator {
+        width: 1px;
+        height: 14px;
+        background: ${cssManager.bdTheme('hsl(0 0% 80%)', 'hsl(0 0% 20%)')};
+        margin: 0 4px;
+      }
+
+      /* Status colors matching dees-workspace-bottombar */
+      .widget.active {
+        color: ${cssManager.bdTheme('hsl(210 100% 45%)', 'hsl(210 100% 60%)')};
+      }
+
+      .widget.success {
+        color: ${cssManager.bdTheme('hsl(142 70% 35%)', 'hsl(142 70% 50%)')};
+      }
+
+      .widget.warning {
+        color: ${cssManager.bdTheme('hsl(38 92% 45%)', 'hsl(38 92% 55%)')};
+      }
+
+      .widget.error {
+        color: ${cssManager.bdTheme('hsl(0 70% 50%)', 'hsl(0 70% 60%)')};
+      }
+
+      @keyframes spin {
+        from { transform: rotate(0deg); }
+        to { transform: rotate(360deg); }
+      }
+
+      .spinning {
+        animation: spin 1s linear infinite;
+      }
+
+      .spacer {
+        flex: 1;
+      }
+
+      .action-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        border-radius: 3px;
+        cursor: pointer;
+        transition: background 0.15s ease;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+      }
+
+      .action-button:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 88%)', 'hsl(0 0% 12%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 80%)')};
+      }
+
+      .action-button.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .action-button.disabled:hover {
+        background: transparent;
+        color: ${cssManager.bdTheme('hsl(0 0% 40%)', 'hsl(0 0% 60%)')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const leftWidgets = this.widgets
+      .filter(w => w.position !== 'right')
+      .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+    const rightWidgets = this.widgets
+      .filter(w => w.position === 'right')
+      .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+    const leftActions = this.actions.filter(a => a.position === 'left');
+    const rightActions = this.actions.filter(a => a.position !== 'left');
+
+    return html`
+      <div class="bottom-bar">
+        <!-- Left actions -->
+        ${leftActions.map(action => this.renderAction(action))}
+
+        <!-- Left widgets -->
+        ${leftWidgets.map((widget, index) => html`
+          ${index > 0 || leftActions.length > 0 ? html`<div class="widget-separator"></div>` : ''}
+          ${this.renderWidget(widget)}
+        `)}
+
+        <div class="spacer"></div>
+
+        <!-- Right widgets -->
+        ${rightWidgets.map((widget, index) => html`
+          ${this.renderWidget(widget)}
+          ${index < rightWidgets.length - 1 || rightActions.length > 0 ? html`<div class="widget-separator"></div>` : ''}
+        `)}
+
+        <!-- Right actions -->
+        ${rightActions.map(action => this.renderAction(action))}
+      </div>
+    `;
+  }
+
+  private renderWidget(widget: IBottomBarWidget): TemplateResult {
+    const statusClass = widget.status && widget.status !== 'idle' ? widget.status : '';
+    const iconName = widget.iconName
+      ? (widget.iconName.startsWith('lucide:') ? widget.iconName : `lucide:${widget.iconName}`)
+      : '';
+
+    return html`
+      <div
+        class="widget ${statusClass}"
+        title="${widget.tooltip || ''}"
+        @click=${() => widget.onClick?.()}
+        @contextmenu=${(e: MouseEvent) => this.handleWidgetContextMenu(e, widget)}
+      >
+        ${iconName ? html`
+          <dees-icon
+            .icon=${iconName}
+            iconSize="12"
+            class="${widget.loading ? 'spinning' : ''}"
+          ></dees-icon>
+        ` : ''}
+        ${widget.label ? html`<span>${widget.label}</span>` : ''}
+      </div>
+    `;
+  }
+
+  private renderAction(action: IBottomBarAction): TemplateResult {
+    const iconName = action.iconName.startsWith('lucide:')
+      ? action.iconName
+      : `lucide:${action.iconName}`;
+
+    return html`
+      <div
+        class="action-button ${action.disabled ? 'disabled' : ''}"
+        title="${action.tooltip || ''}"
+        @click=${() => !action.disabled && action.onClick?.()}
+      >
+        <dees-icon
+          .icon=${iconName}
+          iconSize="12"
+        ></dees-icon>
+      </div>
+    `;
+  }
+
+  private async handleWidgetContextMenu(e: MouseEvent, widget: IBottomBarWidget): Promise<void> {
+    if (!widget.contextMenuItems || widget.contextMenuItems.length === 0) return;
+
+    e.preventDefault();
+
+    const menuItems: Parameters<typeof DeesContextmenu.openContextMenuWithOptions>[1] = [];
+
+    for (const item of widget.contextMenuItems) {
+      if (item.divider) {
+        menuItems.push({ divider: true });
+      } else {
+        menuItems.push({
+          name: item.name,
+          iconName: item.iconName,
+          action: async () => { await item.action(); },
+          disabled: item.disabled,
+        });
+      }
+    }
+
+    await DeesContextmenu.openContextMenuWithOptions(e, menuItems);
+  }
+
+  // ==========================================
+  // API METHODS (implements IBottomBarAPI)
+  // ==========================================
+
+  /**
+   * Add a widget to the bottom bar
+   */
+  public addWidget(widget: IBottomBarWidget): void {
+    // Remove existing widget with same ID if present
+    this.widgets = this.widgets.filter(w => w.id !== widget.id);
+    this.widgets = [...this.widgets, widget];
+  }
+
+  /**
+   * Update an existing widget by ID
+   */
+  public updateWidget(id: string, update: Partial<IBottomBarWidget>): void {
+    this.widgets = this.widgets.map(w =>
+      w.id === id ? { ...w, ...update } : w
+    );
+  }
+
+  /**
+   * Remove a widget by ID
+   */
+  public removeWidget(id: string): void {
+    this.widgets = this.widgets.filter(w => w.id !== id);
+  }
+
+  /**
+   * Get a widget by ID
+   */
+  public getWidget(id: string): IBottomBarWidget | undefined {
+    return this.widgets.find(w => w.id === id);
+  }
+
+  /**
+   * Clear all widgets
+   */
+  public clearWidgets(): void {
+    this.widgets = [];
+  }
+
+  /**
+   * Add an action button
+   */
+  public addAction(action: IBottomBarAction): void {
+    this.actions = this.actions.filter(a => a.id !== action.id);
+    this.actions = [...this.actions, action];
+  }
+
+  /**
+   * Remove an action by ID
+   */
+  public removeAction(id: string): void {
+    this.actions = this.actions.filter(a => a.id !== id);
+  }
+
+  /**
+   * Clear all actions
+   */
+  public clearActions(): void {
+    this.actions = [];
+  }
+}

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

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

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

@@ -0,0 +1,165 @@
+import * as interfaces from '../../interfaces/index.js';
+
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import '../dees-appui-tabs/dees-appui-tabs.js';
+import type { DeesAppuiTabs } from '../dees-appui-tabs/dees-appui-tabs.js';
+import { themeDefaultStyles } from '../../00theme.js';
+
+@customElement('dees-appui-maincontent')
+export class DeesAppuiMaincontent extends DeesElement {
+  public static demo = () => html`
+    <dees-appui-maincontent
+      .tabs=${[
+        { key: 'Overview', iconName: 'lucide:home', action: () => console.log('Overview') },
+        { key: 'Details', iconName: 'lucide:file', action: () => console.log('Details') },
+        { key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings') },
+      ]}
+    >
+      <div slot="content" style="padding: 40px; color: #ccc;">
+        <h1>Main Content Area</h1>
+        <p>This is where your application content goes.</p>
+      </div>
+    </dees-appui-maincontent>
+  `;
+  public static demoGroups = ['App UI'];
+
+  // INSTANCE
+  @property({
+    type: Array,
+  })
+  accessor tabs: interfaces.IMenuItem[] = [
+    { key: '⚠️ Please set tabs', action: () => console.warn('No tabs configured for maincontent') },
+  ];
+
+  @property({ type: Object })
+  accessor selectedTab: interfaces.IMenuItem | null = null;
+
+  @property({ type: Boolean })
+  accessor showTabs: boolean = true;
+
+  @property({ type: Boolean })
+  accessor tabsAutoHide: boolean = false;
+
+  @property({ type: Number })
+  accessor tabsAutoHideThreshold: number = 0;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
+      :host {
+        color: ${cssManager.bdTheme('#333', '#fff')};
+        display: grid;
+        grid-template-rows: auto 1fr;
+        width: 100%;
+        height: 100%;
+        background: ${cssManager.bdTheme('#ffffff', '#161616')};
+      }
+
+      .maincontainer {
+        display: contents;
+      }
+
+      .topbar {
+        display: grid;
+        grid-template-rows: 1fr;
+        overflow: hidden;
+        user-select: none;
+        transition: grid-template-rows 0.3s ease;
+      }
+
+      .topbar > * {
+        min-height: 0;
+      }
+
+      .content-area {
+        overflow: auto;
+        min-height: 0;
+        overscroll-behavior: contain;
+      }
+
+      :host([notabs]) .topbar {
+        grid-template-rows: 0fr;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="maincontainer">
+        <div class="topbar">
+          <dees-appui-tabs
+            .tabs=${this.tabs}
+            .selectedTab=${this.selectedTab}
+            .showTabIndicator=${true}
+            .tabStyle=${'horizontal'}
+            .autoHide=${this.tabsAutoHide}
+            .autoHideThreshold=${this.tabsAutoHideThreshold}
+            @tab-select=${(e: CustomEvent) => this.handleTabSelect(e)}
+            @tab-close=${(e: CustomEvent) => this.handleTabClose(e)}
+          ></dees-appui-tabs>
+        </div>
+        <div class="content-area">
+          <slot></slot>
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  private handleTabSelect(e: CustomEvent) {
+    this.selectedTab = e.detail.tab;
+
+    // Re-emit the event
+    this.dispatchEvent(new CustomEvent('tab-select', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleTabClose(e: CustomEvent) {
+    // Re-emit the event
+    this.dispatchEvent(new CustomEvent('tab-close', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  updated(changedProperties: Map<string | number | symbol, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('showTabs')) {
+      if (this.showTabs) {
+        this.removeAttribute('notabs');
+      } else {
+        this.setAttribute('notabs', '');
+      }
+    }
+  }
+
+  async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+    await super.firstUpdated(_changedProperties);
+    // Apply initial notabs state
+    if (!this.showTabs) {
+      this.setAttribute('notabs', '');
+    }
+    // Tab selection is now handled by the dees-appui-tabs component
+    // But we need to ensure the tabs component is ready
+    const tabsComponent = this.shadowRoot.querySelector('dees-appui-tabs') as DeesAppuiTabs;
+    if (tabsComponent) {
+      await tabsComponent.updateComplete;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,50 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <style>
+    .demo-mainmenu-container {
+      display: flex;
+      height: 100%;
+      background: #1a1a1a;
+      border-radius: 8px;
+    }
+    .demo-mainmenu-container .spacer {
+      flex: 1;
+      background: #0f0f0f;
+    }
+  </style>
+  <div class="demo-mainmenu-container">
+    <dees-appui-mainmenu
+      .logoIcon=${'lucide:box'}
+      .logoText=${'Acme App'}
+      .menuGroups=${[
+        {
+          tabs: [
+            { key: 'Dashboard', iconName: 'lucide:home', action: () => console.log('Dashboard') },
+            { key: 'Inbox', iconName: 'lucide:inbox', action: () => console.log('Inbox') },
+          ]
+        },
+        {
+          name: 'Workspace',
+          tabs: [
+            { key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects') },
+            { key: 'Tasks', iconName: 'lucide:checkSquare', action: () => console.log('Tasks') },
+            { key: 'Documents', iconName: 'lucide:fileText', action: () => console.log('Documents') },
+          ]
+        },
+        {
+          name: 'Analytics',
+          tabs: [
+            { key: 'Reports', iconName: 'lucide:barChart3', action: () => console.log('Reports') },
+            { key: 'Insights', iconName: 'lucide:lightbulb', action: () => console.log('Insights') },
+          ]
+        }
+      ]}
+      .bottomTabs=${[
+        { key: 'Settings', iconName: 'lucide:settings', action: () => console.log('Settings') },
+        { key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help') },
+      ]}
+    ></dees-appui-mainmenu>
+    <div class="spacer"></div>
+  </div>
+`;

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

@@ -0,0 +1,506 @@
+import * as plugins from '../../00plugins.js';
+import * as interfaces from '../../interfaces/index.js';
+import { zIndexLayers } from '../../00zindex.js';
+
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
+import { demoFunc } from './dees-appui-mainmenu.demo.js';
+import { themeDefaultStyles } from '../../00theme.js';
+
+/**
+ * the most left menu
+ * usually used as organization selector
+ */
+@customElement('dees-appui-mainmenu')
+export class DeesAppuiMainmenu extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['App UI'];
+
+  // INSTANCE
+
+  // Logo properties
+  @property({ type: String })
+  accessor logoIcon: string = '';
+
+  @property({ type: String })
+  accessor logoText: string = '';
+
+  // Menu groups (new way)
+  @property({ type: Array })
+  accessor menuGroups: interfaces.IMenuGroup[] = [];
+
+  // Bottom tabs (pinned to bottom)
+  @property({ type: Array })
+  accessor bottomTabs: interfaces.IMenuItem[] = [];
+
+  // Legacy tabs property (for backward compatibility)
+  @property({ type: Array })
+  accessor tabs: interfaces.IMenuItem[] = [];
+
+  @property()
+  accessor selectedTab: interfaces.IMenuItem;
+
+  @property({ type: Boolean, reflect: true })
+  accessor collapsed: boolean = false;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
+      :host {
+        --menu-width-expanded: 200px;
+        --menu-width-collapsed: 56px;
+        --tooltip-bg: ${cssManager.bdTheme('#18181b', '#fafafa')};
+        --tooltip-fg: ${cssManager.bdTheme('#fafafa', '#18181b')};
+        position: relative;
+        display: block;
+        height: 100%;
+      }
+
+      .mainContainer {
+        color: ${cssManager.bdTheme('#666', '#ccc')};
+        z-index: ${zIndexLayers.fixed.appBar};
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        width: var(--menu-width-expanded);
+        height: 100%;
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        user-select: none;
+        border-right: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+        transition: width 0.25s ease;
+      }
+
+      :host([collapsed]) .mainContainer {
+        width: var(--menu-width-collapsed);
+      }
+
+      /* Floating collapse toggle button */
+      .collapse-toggle {
+        position: absolute;
+        right: -12px;
+        top: 24px;
+        transform: translateY(-50%);
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
+        border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#3f3f46')};
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        cursor: pointer;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${cssManager.bdTheme('#737373', '#a1a1aa')};
+        opacity: 0;
+        transition: opacity 0.2s ease, background 0.15s ease;
+        padding: 0;
+      }
+
+      .collapse-toggle:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#3f3f46')};
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+      }
+
+      :host(:hover) .collapse-toggle {
+        opacity: 1;
+      }
+
+      .collapse-toggle dees-icon {
+        font-size: 14px;
+      }
+
+      /* Logo Section */
+      .logoSection {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        height: 48px;
+        padding: 0 14px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        flex-shrink: 0;
+        box-sizing: border-box;
+      }
+
+      .logoSection .logoIcon {
+        font-size: 22px;
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        flex-shrink: 0;
+      }
+
+      .logoSection .logoText {
+        flex: 1;
+        font-size: 15px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition: opacity 0.2s ease, width 0.25s ease;
+      }
+
+      :host([collapsed]) .logoSection {
+        justify-content: center;
+        padding: 0;
+        gap: 0;
+      }
+
+      :host([collapsed]) .logoSection .logoText {
+        display: none;
+      }
+
+      /* Middle Section (scrollable) */
+      .menuSection {
+        flex: 1;
+        overflow-y: auto;
+        overflow-x: hidden;
+        overscroll-behavior: contain;
+        padding: 8px 0;
+      }
+
+      .menuSection::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .menuSection::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .menuSection::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+        border-radius: 3px;
+      }
+
+      .menuSection::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.25)', 'rgba(255, 255, 255, 0.25)')};
+      }
+
+      /* Menu Group */
+      .menuGroup {
+        padding: 0 8px;
+        margin-bottom: 8px;
+      }
+
+      .menuGroup:last-child {
+        margin-bottom: 0;
+      }
+
+      .groupHeader {
+        padding: 8px 12px 6px;
+        font-size: 11px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#737373', '#737373')};
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        white-space: nowrap;
+        overflow: hidden;
+        transition: opacity 0.2s ease, max-height 0.25s ease;
+        max-height: 30px;
+      }
+
+      :host([collapsed]) .groupHeader {
+        opacity: 0;
+        max-height: 0;
+        padding: 0;
+        margin: 0;
+      }
+
+      .groupTabs {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      :host([collapsed]) .menuGroup {
+        padding: 0 4px;
+      }
+
+      /* Tab Item */
+      .tab {
+        position: relative;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px 12px;
+        font-size: 13px;
+        font-weight: 500;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme('#525252', '#a3a3a3')};
+      }
+
+      .tab:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.06)')};
+        color: ${cssManager.bdTheme('#262626', '#e5e5e5')};
+      }
+
+      .tab:active {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+      }
+
+      .tab.selectedTab {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.06)', 'rgba(255, 255, 255, 0.08)')};
+        color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+      }
+
+      .tab.selectedTab::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 3px;
+        height: 16px;
+        background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
+        border-radius: 0 2px 2px 0;
+      }
+
+      .tab dees-icon {
+        font-size: 18px;
+        opacity: 0.85;
+        flex-shrink: 0;
+      }
+
+      .tab.selectedTab dees-icon {
+        opacity: 1;
+      }
+
+      .tab .tabLabel {
+        flex: 1;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        transition: opacity 0.2s ease, width 0.25s ease;
+      }
+
+      /* Collapsed tab styles */
+      :host([collapsed]) .tab {
+        justify-content: center;
+        padding: 10px;
+        gap: 0;
+      }
+
+      :host([collapsed]) .tab .tabLabel {
+        opacity: 0;
+        width: 0;
+        position: absolute;
+      }
+
+      :host([collapsed]) .tab.selectedTab::before {
+        left: -4px;
+      }
+
+      /* Tooltip for collapsed state */
+      .tab-tooltip {
+        position: absolute;
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        margin-left: 12px;
+        padding: 6px 12px;
+        background: var(--tooltip-bg);
+        color: var(--tooltip-fg);
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        white-space: nowrap;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.15s ease;
+        z-index: 1000;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      }
+
+      .tab-tooltip::before {
+        content: '';
+        position: absolute;
+        left: -4px;
+        top: 50%;
+        transform: translateY(-50%);
+        border: 4px solid transparent;
+        border-right-color: var(--tooltip-bg);
+      }
+
+      :host([collapsed]) .tab:hover .tab-tooltip {
+        opacity: 1;
+        transition-delay: 1s;
+      }
+
+      /* Badge styles */
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 18px;
+        height: 18px;
+        padding: 0 6px;
+        font-size: 11px;
+        font-weight: 600;
+        border-radius: 9px;
+        margin-left: auto;
+      }
+
+      .badge.default {
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        color: ${cssManager.bdTheme('#3f3f46', '#a1a1aa')};
+      }
+
+      .badge.success {
+        background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
+        color: ${cssManager.bdTheme('#166534', '#4ade80')};
+      }
+
+      .badge.warning {
+        background: ${cssManager.bdTheme('#fef3c7', '#451a03')};
+        color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+      }
+
+      .badge.error {
+        background: ${cssManager.bdTheme('#fee2e2', '#450a0a')};
+        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+      }
+
+      :host([collapsed]) .badge {
+        display: none;
+      }
+
+      /* Bottom Section */
+      .bottomSection {
+        flex-shrink: 0;
+        padding: 8px;
+        border-top: 1px solid ${cssManager.bdTheme('#e5e5e5', '#1a1a1a')};
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+
+      :host([collapsed]) .bottomSection {
+        padding: 8px 4px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    // Get all tabs for selection (from groups or legacy tabs)
+    const allTabs = this.getAllTabs();
+
+    return html`
+      <div class="mainContainer" @contextmenu=${(eventArg: MouseEvent) => {
+        DeesContextmenu.openContextMenuWithOptions(eventArg, [{
+          name: 'app settings',
+          action: async () => {},
+          iconName: 'gear',
+        }])
+      }}>
+        ${this.logoIcon || this.logoText ? html`
+          <div class="logoSection">
+            ${this.logoIcon ? html`<dees-icon class="logoIcon" .icon="${this.logoIcon}"></dees-icon>` : ''}
+            ${this.logoText ? html`<span class="logoText">${this.logoText}</span>` : ''}
+          </div>
+        ` : ''}
+
+        <div class="menuSection">
+          ${this.menuGroups.length > 0 ? this.renderMenuGroups() : this.renderLegacyTabs()}
+        </div>
+
+        ${this.bottomTabs.length > 0 ? html`
+          <div class="bottomSection">
+            ${this.bottomTabs.map((tabArg) => this.renderTab(tabArg))}
+          </div>
+        ` : ''}
+      </div>
+      <button class="collapse-toggle" @click="${() => this.toggleCollapse()}">
+        <dees-icon .icon="${this.collapsed ? 'lucide:chevronRight' : 'lucide:chevronLeft'}"></dees-icon>
+      </button>
+    `;
+  }
+
+  private renderMenuGroups(): TemplateResult {
+    return html`
+      ${this.menuGroups.map((group) => html`
+        <div class="menuGroup">
+          ${group.name ? html`<div class="groupHeader">${group.name}</div>` : ''}
+          <div class="groupTabs">
+            ${group.items.map((tabArg) => this.renderTab(tabArg))}
+          </div>
+        </div>
+      `)}
+    `;
+  }
+
+  private renderLegacyTabs(): TemplateResult {
+    return html`
+      <div class="menuGroup">
+        <div class="groupTabs">
+          ${this.tabs.map((tabArg) => this.renderTab(tabArg))}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderTab(tabArg: interfaces.IMenuItem): TemplateResult {
+    return html`
+      <div
+        class="tab ${tabArg === this.selectedTab ? 'selectedTab' : ''}"
+        @click="${() => {
+          this.updateTab(tabArg);
+        }}"
+      >
+        <dees-icon .icon="${tabArg.iconName || ''}"></dees-icon>
+        <span class="tabLabel">${tabArg.key}</span>
+        ${tabArg.badge !== undefined ? html`
+          <span class="badge ${tabArg.badgeVariant || 'default'}">${tabArg.badge}</span>
+        ` : ''}
+        <span class="tab-tooltip">${tabArg.key}</span>
+      </div>
+    `;
+  }
+
+  private getAllTabs(): interfaces.IMenuItem[] {
+    if (this.menuGroups.length > 0) {
+      const groupTabs = this.menuGroups.flatMap(group => group.items);
+      return [...groupTabs, ...this.bottomTabs];
+    }
+    return [...this.tabs, ...this.bottomTabs];
+  }
+
+  updateTab(tabArg: interfaces.IMenuItem) {
+    this.selectedTab = tabArg;
+    this.selectedTab.action();
+
+    // Emit tab-select event
+    this.dispatchEvent(new CustomEvent('tab-select', {
+      detail: { tab: tabArg },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  firstUpdated() {
+    const allTabs = this.getAllTabs();
+    if (allTabs.length > 0) {
+      this.updateTab(allTabs[0]);
+    }
+  }
+
+  public toggleCollapse(): void {
+    this.collapsed = !this.collapsed;
+    this.dispatchEvent(new CustomEvent('collapse-change', {
+      detail: { collapsed: this.collapsed },
+      bubbles: true,
+      composed: true
+    }));
+  }
+}

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

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

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

@@ -0,0 +1,407 @@
+import * as plugins from '../../00plugins.js';
+import { zIndexLayers } from '../../00zindex.js';
+
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+import { themeDefaultStyles } from '../../00theme.js';
+
+@customElement('dees-appui-profiledropdown')
+export class DeesAppuiProfileDropdown extends DeesElement {
+  public static demo = () => html`
+    <dees-appui-profiledropdown
+      .user=${{
+        name: 'John Doe',
+        email: 'john.doe@example.com',
+        avatar: 'https://randomuser.me/api/portraits/men/1.jpg',
+        status: 'online' as 'online'
+      }}
+      .menuItems=${[
+        { name: 'Profile Settings', iconName: 'user', action: async () => console.log('Profile') },
+        { name: 'Account', iconName: 'settings', action: async () => console.log('Account') },
+        { 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') }
+      ]}
+      .isOpen=${true}
+    ></dees-appui-profiledropdown>
+  `;
+  public static demoGroups = ['App UI'];
+
+  @property({ type: Object })
+  accessor user: {
+    name: string;
+    email?: string;
+    avatar?: string;
+    status?: 'online' | 'offline' | 'busy' | 'away';
+  } | undefined = undefined;
+
+  @property({ type: Array })
+  accessor menuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];
+
+  @property({ type: Boolean, reflect: true })
+  accessor isOpen: boolean = false;
+
+  @property({ type: String })
+  accessor position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
+      :host {
+        display: block;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        pointer-events: none;
+      }
+
+      .dropdown {
+        position: absolute;
+        min-width: 220px;
+        background: ${cssManager.bdTheme('#ffffff', '#000000')};
+        border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        border-radius: 4px;
+        box-shadow: ${cssManager.bdTheme(
+          '0 4px 12px rgba(0, 0, 0, 0.15)',
+          '0 4px 12px rgba(0, 0, 0, 0.3)'
+        )};
+        z-index: ${zIndexLayers.overlay.dropdown};
+        opacity: 0;
+        transform: scale(0.95) translateY(-10px);
+        transition: opacity 0.2s, transform 0.2s;
+        pointer-events: none;
+        overflow: hidden;
+        font-size: 12px;
+      }
+
+      :host([isopen]) .dropdown {
+        opacity: 1;
+        transform: scale(1) translateY(0);
+        pointer-events: auto;
+      }
+      
+      .backdrop {
+        display: none;
+      }
+
+      /* Position variants */
+      .dropdown.top-right {
+        top: 100%;
+        right: 0;
+        margin-top: 4px;
+      }
+
+      .dropdown.top-left {
+        top: 100%;
+        left: 0;
+        margin-top: 8px;
+      }
+
+      .dropdown.bottom-right {
+        bottom: 100%;
+        right: 0;
+        margin-bottom: 8px;
+      }
+
+      .dropdown.bottom-left {
+        bottom: 100%;
+        left: 0;
+        margin-bottom: 8px;
+      }
+
+      /* User section */
+      .user-section {
+        padding: 12px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e0e0e0', '#202020')};
+      }
+
+      .user-info {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      .user-avatar {
+        position: relative;
+        width: 36px;
+        height: 36px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 14px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#666', '#999')};
+        overflow: hidden;
+      }
+
+      .user-avatar img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .user-status {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        border: 2px solid ${cssManager.bdTheme('#ffffff', '#000000')};
+      }
+
+      .user-status.online {
+        background: #4caf50;
+      }
+
+      .user-status.offline {
+        background: #757575;
+      }
+
+      .user-status.busy {
+        background: #f44336;
+      }
+
+      .user-status.away {
+        background: #ff9800;
+      }
+
+      .user-details {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .user-name {
+        font-size: 13px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#000', '#fff')};
+        line-height: 1.2;
+        margin: 0;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .user-email {
+        font-size: 11px;
+        color: ${cssManager.bdTheme('#666', '#999')};
+        margin-top: 2px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      /* Menu section */
+      .menu-section {
+        padding: 4px 0;
+      }
+
+      .menu-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        cursor: default;
+        transition: background 0.1s;
+        color: ${cssManager.bdTheme('#333', '#ccc')};
+        font-size: 12px;
+        line-height: 1;
+        user-select: none;
+      }
+
+      .menu-item:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.04)', 'rgba(255, 255, 255, 0.08)')};
+      }
+
+      .menu-item:active {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.08)', 'rgba(255, 255, 255, 0.12)')};
+      }
+
+      .menu-item dees-icon {
+        font-size: 14px;
+        opacity: 0.7;
+      }
+
+      .menu-item-text {
+        flex: 1;
+      }
+
+      .menu-shortcut {
+        font-size: 11px;
+        color: ${cssManager.bdTheme('#999', '#666')};
+        margin-left: auto;
+        opacity: 0.7;
+      }
+
+      .menu-divider {
+        height: 1px;
+        background: ${cssManager.bdTheme('#e0e0e0', '#202020')};
+        margin: 4px 0;
+      }
+
+      /* Backdrop for mobile */
+      @media (max-width: 768px) {
+        .backdrop {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(0, 0, 0, 0.3);
+          z-index: ${zIndexLayers.backdrop.dropdown};
+          opacity: 0;
+          transition: opacity 0.2s;
+          display: none;
+        }
+
+        :host([isopen]) .backdrop {
+          display: block;
+          opacity: 1;
+          pointer-events: auto;
+        }
+
+        .dropdown {
+          position: fixed;
+          top: 50%;
+          left: 50%;
+          right: auto;
+          bottom: auto;
+          transform: translate(-50%, -50%) scale(0.95);
+          margin: 0;
+          max-width: calc(100vw - 32px);
+          max-height: calc(100vh - 32px);
+          overflow-y: auto;
+          overscroll-behavior: contain;
+        }
+
+        :host([isopen]) .dropdown {
+          transform: translate(-50%, -50%) scale(1);
+        }
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="backdrop" @click=${() => this.close()}></div>
+      <div class="dropdown ${this.position}">
+        ${this.user ? html`
+          <div class="user-section">
+            <div class="user-info">
+              <div class="user-avatar">
+                ${this.user.avatar 
+                  ? html`<img src="${this.user.avatar}" alt="${this.user.name}">`
+                  : this.getInitials(this.user.name)
+                }
+                ${this.user.status ? html`
+                  <div class="user-status ${this.user.status}"></div>
+                ` : ''}
+              </div>
+              <div class="user-details">
+                <div class="user-name">${this.user.name}</div>
+                ${this.user.email ? html`
+                  <div class="user-email">${this.user.email}</div>
+                ` : ''}
+              </div>
+            </div>
+          </div>
+        ` : ''}
+        
+        <div class="menu-section">
+          ${this.menuItems.map(item => this.renderMenuItem(item))}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderMenuItem(item: plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true }): TemplateResult {
+    if ('divider' in item && item.divider) {
+      return html`<div class="menu-divider"></div>`;
+    }
+
+    const menuItem = item as plugins.tsclass.website.IMenuItem & { iconName?: string; shortcut?: string };
+    return html`
+      <div class="menu-item" @click=${() => this.handleMenuClick(menuItem)}>
+        ${menuItem.iconName ? html`
+          <dees-icon .icon="${`lucide:${menuItem.iconName}`}"></dees-icon>
+        ` : ''}
+        <span class="menu-item-text">${menuItem.name}</span>
+        ${menuItem.shortcut ? html`
+          <span class="menu-shortcut">${menuItem.shortcut}</span>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  private getInitials(name: string): string {
+    return name
+      .split(' ')
+      .map(part => part[0])
+      .join('')
+      .toUpperCase()
+      .slice(0, 2);
+  }
+
+  private async handleMenuClick(item: plugins.tsclass.website.IMenuItem & { iconName?: string; shortcut?: string }) {
+    await item.action();
+    this.close();
+    
+    // Emit menu-select event
+    this.dispatchEvent(new CustomEvent('menu-select', {
+      detail: { item },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  public open() {
+    this.isOpen = true;
+  }
+
+  public close() {
+    this.isOpen = false;
+  }
+
+  public toggle() {
+    this.isOpen = !this.isOpen;
+  }
+
+  // Handle clicks outside the dropdown
+  async connectedCallback() {
+    await super.connectedCallback();
+    this.handleOutsideClick = this.handleOutsideClick.bind(this);
+    document.addEventListener('click', this.handleOutsideClick);
+  }
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    document.removeEventListener('click', this.handleOutsideClick);
+  }
+
+  private handleOutsideClick(event: MouseEvent) {
+    if (this.isOpen && !this.contains(event.target as Node)) {
+      // Check if the click is on the parent element (which contains the profile button)
+      const parentElement = this.parentElement;
+      if (parentElement && parentElement.contains(event.target as Node)) {
+        // Don't close if clicking within the parent element (e.g., on the profile button)
+        return;
+      }
+      this.close();
+    }
+  }
+}

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

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

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

@@ -0,0 +1,113 @@
+import { html } from '@design.estate/dees-element';
+import type * as interfaces from '../../interfaces/index.js';
+
+export const demoFunc = () => html`
+  <style>
+    .demo-secondarymenu-container {
+      display: flex;
+      height: 100%;
+      background: #1a1a1a;
+      border-radius: 8px;
+    }
+    .demo-secondarymenu-container .spacer {
+      flex: 1;
+      background: #0f0f0f;
+      padding: 20px;
+      color: #a3a3a3;
+      font-family: 'Geist Sans', sans-serif;
+    }
+    .demo-secondarymenu-container .spacer h3 {
+      color: #fafafa;
+      margin-top: 0;
+    }
+    .demo-secondarymenu-container .spacer code {
+      background: #27272a;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 12px;
+    }
+    .demo-secondarymenu-container .spacer ul {
+      line-height: 1.8;
+    }
+  </style>
+  <div class="demo-secondarymenu-container">
+    <dees-appui-secondarymenu
+      .heading=${'Projects'}
+      .groups=${[
+        // Group 1: Tab items (default behavior)
+        {
+          name: 'Navigation',
+          iconName: 'lucide:compass',
+          items: [
+            { key: 'Dashboard', iconName: 'lucide:layoutDashboard', action: () => console.log('Dashboard clicked'), badge: 3, badgeVariant: 'warning' },
+            { key: 'Projects', iconName: 'lucide:folder', action: () => console.log('Projects clicked'), badge: 'new', badgeVariant: 'success' },
+            { key: 'Analytics', iconName: 'lucide:barChart2', action: () => console.log('Analytics clicked') },
+          ] as interfaces.ISecondaryMenuItemTab[]
+        },
+        // Group 2: Actions
+        {
+          name: 'Actions',
+          iconName: 'lucide:zap',
+          items: [
+            { type: 'action', key: 'Create New', iconName: 'lucide:plus', action: () => alert('Create New clicked!') },
+            { type: 'action', key: 'Import Data', iconName: 'lucide:upload', action: () => alert('Import Data clicked!') },
+            { type: 'divider' },
+            { type: 'action', key: 'Delete All', iconName: 'lucide:trash2', variant: 'danger', confirmMessage: 'Are you sure you want to delete all items?', action: () => alert('Deleted!') },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        // Group 3: Filters
+        {
+          name: 'Filters',
+          iconName: 'lucide:filter',
+          items: [
+            { type: 'header', label: 'Status' },
+            { type: 'filter', key: 'Show Active', iconName: 'lucide:checkCircle', active: true, onToggle: (active) => console.log('Show Active:', active) },
+            { type: 'filter', key: 'Show Archived', iconName: 'lucide:archive', active: false, onToggle: (active) => console.log('Show Archived:', active) },
+            { type: 'divider' },
+            { type: 'multiFilter', key: 'Categories', iconName: 'lucide:tag', collapsed: false, options: [
+              { key: 'frontend', label: 'Frontend', checked: true, iconName: 'lucide:monitor' },
+              { key: 'backend', label: 'Backend', checked: true, iconName: 'lucide:server' },
+              { key: 'devops', label: 'DevOps', checked: false, iconName: 'lucide:cloud' },
+              { key: 'design', label: 'Design', checked: false, iconName: 'lucide:palette' },
+            ], onChange: (keys) => console.log('Selected categories:', keys) },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        // Group 4: Links and misc
+        {
+          name: 'Resources',
+          iconName: 'lucide:bookOpen',
+          collapsed: true,
+          items: [
+            { type: 'header', label: 'Documentation' },
+            { type: 'link', key: 'API Reference', iconName: 'lucide:fileText', href: 'https://api.example.com/docs' },
+            { type: 'link', key: 'User Guide', iconName: 'lucide:book', href: 'https://docs.example.com/guide' },
+            { type: 'divider' },
+            { type: 'header', label: 'Support' },
+            { type: 'link', key: 'Help Center', iconName: 'lucide:helpCircle', href: '/help', external: false },
+            { type: 'link', key: 'GitHub Issues', iconName: 'lucide:github', href: 'https://github.com/example/issues' },
+          ] as interfaces.ISecondaryMenuItem[]
+        }
+      ] as interfaces.ISecondaryMenuGroup[]}
+      @item-select=${(e: CustomEvent) => console.log('Tab selected:', e.detail)}
+      @action-click=${(e: CustomEvent) => console.log('Action clicked:', e.detail)}
+      @filter-toggle=${(e: CustomEvent) => console.log('Filter toggled:', e.detail)}
+      @multifilter-change=${(e: CustomEvent) => console.log('Multi-filter changed:', e.detail)}
+      @link-click=${(e: CustomEvent) => console.log('Link clicked:', e.detail)}
+    ></dees-appui-secondarymenu>
+    <div class="spacer">
+      <h3>Secondary Menu Demo</h3>
+      <p>This demo showcases all 8 item types:</p>
+      <ul>
+        <li><code>tab</code> - Selectable items (Navigation group)</li>
+        <li><code>action</code> - Blue actions (Actions group)</li>
+        <li><code>action</code> with <code>variant: 'danger'</code> - Red danger action</li>
+        <li><code>filter</code> - Checkbox toggles (Filters group)</li>
+        <li><code>multiFilter</code> - Collapsible multi-select (Categories)</li>
+        <li><code>divider</code> - Visual separators</li>
+        <li><code>header</code> - Section labels</li>
+        <li><code>link</code> - External/internal links (Resources group)</li>
+      </ul>
+      <p>Try the collapse toggle on the left edge!</p>
+    </div>
+  </div>
+`;

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

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

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

@@ -0,0 +1,306 @@
+import { html, cssManager, css, DeesElement, customElement, state } from '@design.estate/dees-element';
+import * as interfaces from '../../interfaces/index.js';
+import type { DeesAppuiTabs } from './dees-appui-tabs.js';
+
+// Interactive demo component for closeable tabs
+@customElement('demo-closeable-tabs')
+class DemoCloseableTabs extends DeesElement {
+  @state()
+  accessor tabs: interfaces.IMenuItem[] = [
+    { key: 'Main', iconName: 'lucide:home', action: () => console.log('Main clicked') },
+  ];
+
+  @state()
+  accessor tabCounter: number = 0;
+
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+      .controls {
+        display: flex;
+        gap: 8px;
+        margin-top: 16px;
+      }
+      button {
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
+        border: 1px solid ${cssManager.bdTheme('rgba(59, 130, 246, 0.3)', 'rgba(59, 130, 246, 0.3)')};
+        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+        padding: 8px 16px;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 13px;
+        transition: all 0.15s ease;
+      }
+      button:hover {
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.2)')};
+      }
+      .info {
+        margin-top: 16px;
+        padding: 12px 16px;
+        background: ${cssManager.bdTheme('rgba(0,0,0,0.02)', 'rgba(255,255,255,0.02)')};
+        border-radius: 6px;
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+    `
+  ];
+
+  private addTab() {
+    this.tabCounter++;
+    const tabKey = `Document ${this.tabCounter}`;
+    this.tabs = [
+      ...this.tabs,
+      {
+        key: tabKey,
+        iconName: 'lucide:file',
+        action: () => console.log(`${tabKey} clicked`),
+        closeable: true,
+        onClose: () => this.removeTab(tabKey)
+      }
+    ];
+  }
+
+  private removeTab(tabKey: string) {
+    this.tabs = this.tabs.filter(t => t.key !== tabKey);
+  }
+
+  render() {
+    return html`
+      <dees-appui-tabs
+        .tabs=${this.tabs}
+        @tab-close=${(e: CustomEvent) => this.removeTab(e.detail.tab.key)}
+      ></dees-appui-tabs>
+      <div class="controls">
+        <button @click=${() => this.addTab()}>+ Add New Tab</button>
+      </div>
+      <div class="info">
+        Click the X button on tabs to close them. The "Main" tab is not closeable.
+        <br>Current tabs: ${this.tabs.length}
+      </div>
+    `;
+  }
+}
+
+// Interactive demo for auto-hide feature
+@customElement('demo-autohide-tabs')
+class DemoAutoHideTabs extends DeesElement {
+  @state()
+  accessor tabs: interfaces.IMenuItem[] = [
+    { key: 'Tab 1', iconName: 'lucide:file', action: () => console.log('Tab 1') },
+    { key: 'Tab 2', iconName: 'lucide:file', action: () => console.log('Tab 2') },
+  ];
+
+  @state()
+  accessor autoHide: boolean = true;
+
+  @state()
+  accessor threshold: number = 1;
+
+  static styles = [
+    css`
+      :host {
+        display: block;
+      }
+      .tabs-container {
+        min-height: 60px;
+        border: 1px dashed ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .tabs-container dees-appui-tabs {
+        width: 100%;
+      }
+      .placeholder {
+        color: ${cssManager.bdTheme('#a1a1aa', '#71717a')};
+        font-size: 13px;
+        font-style: italic;
+      }
+      .controls {
+        display: flex;
+        gap: 8px;
+        margin-top: 16px;
+        flex-wrap: wrap;
+      }
+      button {
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
+        border: 1px solid ${cssManager.bdTheme('rgba(59, 130, 246, 0.3)', 'rgba(59, 130, 246, 0.3)')};
+        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+        padding: 8px 16px;
+        border-radius: 6px;
+        cursor: pointer;
+        font-size: 13px;
+        transition: all 0.15s ease;
+      }
+      button:hover {
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.2)', 'rgba(59, 130, 246, 0.2)')};
+      }
+      button.danger {
+        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.1)', 'rgba(239, 68, 68, 0.1)')};
+        border-color: ${cssManager.bdTheme('rgba(239, 68, 68, 0.3)', 'rgba(239, 68, 68, 0.3)')};
+        color: ${cssManager.bdTheme('#ef4444', '#f87171')};
+      }
+      button.danger:hover {
+        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.2)', 'rgba(239, 68, 68, 0.2)')};
+      }
+      .info {
+        margin-top: 16px;
+        padding: 12px 16px;
+        background: ${cssManager.bdTheme('rgba(0,0,0,0.02)', 'rgba(255,255,255,0.02)')};
+        border-radius: 6px;
+        font-size: 13px;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      }
+    `
+  ];
+
+  private tabCounter = 2;
+
+  private addTab() {
+    this.tabCounter++;
+    this.tabs = [...this.tabs, {
+      key: `Tab ${this.tabCounter}`,
+      iconName: 'lucide:file',
+      action: () => console.log(`Tab ${this.tabCounter}`)
+    }];
+  }
+
+  private removeLastTab() {
+    if (this.tabs.length > 0) {
+      this.tabs = this.tabs.slice(0, -1);
+    }
+  }
+
+  private clearTabs() {
+    this.tabs = [];
+  }
+
+  render() {
+    const shouldHide = this.autoHide && this.tabs.length <= this.threshold;
+
+    return html`
+      <div class="tabs-container">
+        ${shouldHide
+          ? html`<span class="placeholder">Tabs hidden (${this.tabs.length} tabs ≤ threshold ${this.threshold})</span>`
+          : html`<dees-appui-tabs
+              .tabs=${this.tabs}
+              .autoHide=${this.autoHide}
+              .autoHideThreshold=${this.threshold}
+            ></dees-appui-tabs>`
+        }
+      </div>
+      <div class="controls">
+        <button @click=${() => this.addTab()}>+ Add Tab</button>
+        <button class="danger" @click=${() => this.removeLastTab()}>- Remove Tab</button>
+        <button class="danger" @click=${() => this.clearTabs()}>Clear All</button>
+        <button @click=${() => { this.threshold = 0; }}>Threshold: 0</button>
+        <button @click=${() => { this.threshold = 1; }}>Threshold: 1</button>
+        <button @click=${() => { this.threshold = 2; }}>Threshold: 2</button>
+      </div>
+      <div class="info">
+        Auto-hide: ${this.autoHide ? 'ON' : 'OFF'} | Threshold: ${this.threshold} | Tabs: ${this.tabs.length}
+        <br>Tabs will hide when count ≤ threshold.
+      </div>
+    `;
+  }
+}
+
+export const demoFunc = () => {
+  const horizontalTabs: interfaces.IMenuItem[] = [
+    { key: 'Home', iconName: 'lucide:home', action: () => console.log('Home clicked') },
+    { key: 'Analytics Dashboard', iconName: 'lucide:lineChart', action: () => console.log('Analytics clicked') },
+    { key: 'Reports', iconName: 'lucide:fileText', action: () => console.log('Reports clicked') },
+    { key: 'User Settings', iconName: 'lucide:settings', action: () => console.log('Settings clicked') },
+    { key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help clicked') },
+  ];
+
+  const verticalTabs: interfaces.IMenuItem[] = [
+    { key: 'Profile', iconName: 'lucide:user', action: () => console.log('Profile clicked') },
+    { key: 'Security', iconName: 'lucide:shield', action: () => console.log('Security clicked') },
+    { key: 'Notifications', iconName: 'lucide:bell', action: () => console.log('Notifications clicked') },
+    { key: 'Integrations', iconName: 'lucide:link', action: () => console.log('Integrations clicked') },
+    { key: 'Advanced', iconName: 'lucide:code', action: () => console.log('Advanced clicked') },
+  ];
+
+  const noIndicatorTabs: interfaces.IMenuItem[] = [
+    { key: 'All', action: () => console.log('All clicked') },
+    { key: 'Active', action: () => console.log('Active clicked') },
+    { key: 'Completed', action: () => console.log('Completed clicked') },
+    { key: 'Archived', action: () => console.log('Archived clicked') },
+  ];
+
+  const demoContent = (text: string) => html`
+    <div style="padding: 24px; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};">
+      ${text}
+    </div>
+  `;
+
+  return html`
+    <style>
+      .demo-container {
+        display: flex;
+        flex-direction: column;
+        gap: 32px;
+        padding: 48px;
+        background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
+        min-height: 100vh;
+      }
+
+      .section {
+        background: ${cssManager.bdTheme('#ffffff', '#18181b')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-radius: 8px;
+        padding: 24px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      }
+
+      .section-title {
+        font-size: 18px;
+        font-weight: 600;
+        margin-bottom: 16px;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+
+      .two-column {
+        display: grid;
+        grid-template-columns: 200px 1fr;
+        gap: 24px;
+        align-items: start;
+      }
+    </style>
+    <div class="demo-container">
+      <div class="section">
+        <div class="section-title">Horizontal Tabs with Animated Indicator</div>
+        <dees-appui-tabs .tabs=${horizontalTabs}></dees-appui-tabs>
+        ${demoContent('Select a tab to see the smooth sliding animation of the indicator. The indicator automatically adjusts its width to match the tab content with minimal padding.')}
+      </div>
+
+      <div class="section">
+        <div class="section-title">Closeable Tabs (Browser-style)</div>
+        <demo-closeable-tabs></demo-closeable-tabs>
+      </div>
+
+      <div class="section">
+        <div class="section-title">Auto-hide Tabs</div>
+        <demo-autohide-tabs></demo-autohide-tabs>
+      </div>
+
+      <div class="section">
+        <div class="section-title">Vertical Tabs Layout</div>
+        <div class="two-column">
+          <dees-appui-tabs .tabStyle=${'vertical'} .tabs=${verticalTabs}></dees-appui-tabs>
+          ${demoContent('Vertical tabs work great for settings pages and navigation menus. The animated indicator smoothly transitions between selections.')}
+        </div>
+      </div>
+
+      <div class="section">
+        <div class="section-title">Without Indicator</div>
+        <dees-appui-tabs .showTabIndicator=${false} .tabs=${noIndicatorTabs}></dees-appui-tabs>
+        ${demoContent('Tabs can also be used without the animated indicator by setting showTabIndicator to false.')}
+      </div>
+    </div>
+  `;
+};

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

@@ -0,0 +1,596 @@
+import * as interfaces from '../../interfaces/index.js';
+
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  state,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-appui-tabs.demo.js';
+import { themeDefaultStyles } from '../../00theme.js';
+
+@customElement('dees-appui-tabs')
+export class DeesAppuiTabs extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['App UI'];
+
+  // INSTANCE
+  @property({
+    type: Array,
+  })
+  accessor tabs: interfaces.IMenuItem[] = [];
+
+  @property({ type: Object })
+  accessor selectedTab: interfaces.IMenuItem | null = null;
+
+  @property({ type: Boolean })
+  accessor showTabIndicator: boolean = true;
+
+  @property({ type: String })
+  accessor tabStyle: 'horizontal' | 'vertical' = 'horizontal';
+
+  @property({ type: Boolean })
+  accessor autoHide: boolean = false;
+
+  @property({ type: Number })
+  accessor autoHideThreshold: number = 0;
+
+  // Scroll state for fade indicators
+  @state()
+  private accessor canScrollLeft: boolean = false;
+
+  @state()
+  private accessor canScrollRight: boolean = false;
+
+  private resizeObserver: ResizeObserver | null = null;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
+      :host {
+        display: block;
+        position: relative;
+        width: 100%;
+        min-width: 0;
+        overflow: hidden;
+      }
+
+      .tabs-wrapper {
+        position: relative;
+        min-width: 0;
+      }
+
+      .tabs-wrapper.horizontal-wrapper {
+        height: 48px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        box-sizing: border-box;
+        overflow: hidden;
+      }
+
+      /* Scroll fade indicators */
+      .scroll-fade {
+        position: absolute;
+        top: 0;
+        bottom: 1px;
+        width: 48px;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        z-index: 10;
+      }
+
+      .scroll-fade-left {
+        left: 0;
+        background: linear-gradient(to right,
+          ${cssManager.bdTheme('#ffffff', '#161616')} 0%,
+          ${cssManager.bdTheme('rgba(255,255,255,0)', 'rgba(22,22,22,0)')} 100%);
+      }
+
+      .scroll-fade-right {
+        right: 0;
+        background: linear-gradient(to left,
+          ${cssManager.bdTheme('#ffffff', '#161616')} 0%,
+          ${cssManager.bdTheme('rgba(255,255,255,0)', 'rgba(22,22,22,0)')} 100%);
+      }
+
+      .scroll-fade.visible {
+        opacity: 1;
+      }
+
+      .tabsContainer {
+        position: relative;
+        user-select: none;
+        min-width: 0;
+      }
+
+      .tabsContainer.horizontal {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        overflow-x: auto;
+        overflow-y: hidden;
+        overscroll-behavior: contain;
+        scrollbar-width: thin;
+        scrollbar-color: transparent transparent;
+        height: 100%;
+        padding: 0 16px;
+        gap: 4px;
+      }
+
+      /* Show scrollbar on hover */
+      .tabs-wrapper:hover .tabsContainer.horizontal {
+        scrollbar-color: ${cssManager.bdTheme('rgba(0,0,0,0.2)', 'rgba(255,255,255,0.2)')} transparent;
+      }
+
+      .tabsContainer.horizontal::-webkit-scrollbar {
+        height: 4px;
+      }
+
+      .tabsContainer.horizontal::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .tabsContainer.horizontal::-webkit-scrollbar-thumb {
+        background: transparent;
+        border-radius: 2px;
+        transition: background 0.2s ease;
+      }
+
+      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('rgba(0,0,0,0.2)', 'rgba(255,255,255,0.2)')};
+      }
+
+      .tabs-wrapper:hover .tabsContainer.horizontal::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('rgba(0,0,0,0.35)', 'rgba(255,255,255,0.35)')};
+      }
+
+      .tabsContainer.vertical {
+        display: flex;
+        flex-direction: column;
+        padding: 8px;
+        font-size: 14px;
+        gap: 2px;
+        position: relative;
+        background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
+        border-radius: 8px;
+      }
+
+      .tab {
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        white-space: nowrap;
+        cursor: pointer;
+        transition: color 0.15s ease;
+        font-weight: 500;
+        position: relative;
+        z-index: 2;
+      }
+
+      .horizontal .tab {
+        padding: 0 16px;
+        height: 100%;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        position: relative;
+        border-radius: 6px 6px 0 0;
+        transition: background-color 0.15s ease;
+      }
+      
+      .horizontal .tab:not(:last-child)::after {
+        content: '';
+        position: absolute;
+        right: -2px;
+        top: 50%;
+        transform: translateY(-50%);
+        height: 20px;
+        width: 1px;
+        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        opacity: 0.5;
+      }
+      
+      .horizontal .tab .tab-content {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .vertical .tab {
+        padding: 10px 16px;
+        border-radius: 6px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        transition: all 0.15s ease;
+      }
+
+      .tab:hover {
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+      
+      .horizontal .tab:hover {
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.03)')};
+      }
+      
+      .horizontal .tab:hover::after,
+      .horizontal .tab:hover + .tab::after {
+        opacity: 0;
+      }
+
+      .vertical .tab:hover {
+        background: ${cssManager.bdTheme('rgba(244, 244, 245, 0.5)', 'rgba(39, 39, 42, 0.5)')};
+      }
+
+      .horizontal .tab.selectedTab {
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+      
+      .horizontal .tab.selectedTab::after,
+      .horizontal .tab.selectedTab + .tab::after {
+        opacity: 0;
+      }
+
+      .vertical .tab.selectedTab {
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+
+      .tab dees-icon {
+        font-size: 16px;
+      }
+
+      .tabIndicator {
+        position: absolute;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        opacity: 0;
+      }
+      
+      .tabIndicator.no-transition {
+        transition: none;
+      }
+
+      .tabs-wrapper .tabIndicator {
+        height: 3px;
+        bottom: 0;
+        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        border-radius: 3px 3px 0 0;
+        z-index: 3;
+      }
+
+      .vertical-wrapper {
+        position: relative;
+      }
+
+      .vertical-wrapper .tabIndicator {
+        left: 8px;
+        right: 8px;
+        border-radius: 6px;
+        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
+        z-index: 1;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      }
+
+      /* Close button */
+      .tab-close {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 16px;
+        height: 16px;
+        border-radius: 4px;
+        margin-left: 8px;
+        opacity: 0.4;
+        transition: opacity 0.15s, background 0.15s;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+      }
+
+      .tab:hover .tab-close {
+        opacity: 0.7;
+      }
+
+      .tab-close:hover {
+        opacity: 1;
+        background: ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
+        color: ${cssManager.bdTheme('#ef4444', '#f87171')};
+      }
+
+      .tab.selectedTab .tab-close {
+        opacity: 0.5;
+      }
+
+      .tab.selectedTab:hover .tab-close {
+        opacity: 0.8;
+      }
+
+      .tab.selectedTab .tab-close:hover {
+        opacity: 1;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    // Auto-hide when enabled and tab count is at or below threshold
+    if (this.autoHide && this.tabs.length <= this.autoHideThreshold) {
+      return html``;
+    }
+    return html`
+      ${this.renderTabsWrapper()}
+    `;
+  }
+
+  private renderTabsWrapper(): TemplateResult {
+    const isHorizontal = this.tabStyle === 'horizontal';
+    const wrapperClass = isHorizontal ? 'tabs-wrapper horizontal-wrapper' : 'vertical-wrapper';
+    const containerClass = `tabsContainer ${this.tabStyle}`;
+
+    if (isHorizontal) {
+      return html`
+        <div class="${wrapperClass}">
+          <div class="scroll-fade scroll-fade-left ${this.canScrollLeft ? 'visible' : ''}"></div>
+          <div class="${containerClass}" @scroll=${this.handleScroll}>
+            ${this.tabs.map(tab => this.renderTab(tab, isHorizontal))}
+          </div>
+          <div class="scroll-fade scroll-fade-right ${this.canScrollRight ? 'visible' : ''}"></div>
+          ${this.showTabIndicator ? html`<div class="tabIndicator"></div>` : ''}
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="${wrapperClass}">
+        <div class="${containerClass}">
+          ${this.tabs.map(tab => this.renderTab(tab, isHorizontal))}
+        </div>
+        ${this.showTabIndicator ? html`<div class="tabIndicator"></div>` : ''}
+      </div>
+    `;
+  }
+
+  private renderTab(tab: interfaces.IMenuItem, isHorizontal: boolean): TemplateResult {
+    const isSelected = tab === this.selectedTab;
+    const classes = `tab ${isSelected ? 'selectedTab' : ''}`;
+
+    const closeButton = tab.closeable ? html`
+      <span class="tab-close" @click="${(e: Event) => this.closeTab(e, tab)}">
+        <dees-icon .icon=${'lucide:x'} style="font-size: 12px;"></dees-icon>
+      </span>
+    ` : '';
+
+    const content = isHorizontal ? html`
+      <span class="tab-content">
+        ${this.renderTabIcon(tab)}
+        ${tab.key}
+      </span>
+      ${closeButton}
+    ` : html`
+      ${this.renderTabIcon(tab)}
+      ${tab.key}
+      ${closeButton}
+    `;
+
+    return html`
+      <div
+        class="${classes}"
+        @click="${() => this.selectTab(tab)}"
+      >
+        ${content}
+      </div>
+    `;
+  }
+
+  private renderTabIcon(tab: interfaces.IMenuItem): TemplateResult | '' {
+    return tab.iconName ? html`<dees-icon .icon=${tab.iconName}></dees-icon>` : '';
+  }
+
+  private selectTab(tabArg: interfaces.IMenuItem) {
+    this.selectedTab = tabArg;
+    tabArg.action();
+
+    // Scroll selected tab into view
+    requestAnimationFrame(() => {
+      this.scrollTabIntoView(tabArg);
+    });
+
+    // Emit tab-select event
+    this.dispatchEvent(new CustomEvent('tab-select', {
+      detail: { tab: tabArg },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private closeTab(e: Event, tab: interfaces.IMenuItem) {
+    e.stopPropagation();  // Don't select tab when closing
+
+    // Call the tab's onClose callback if defined
+    if (tab.onClose) {
+      tab.onClose();
+    }
+
+    // Also emit event for parent components
+    this.dispatchEvent(new CustomEvent('tab-close', {
+      detail: { tab },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  firstUpdated() {
+    if (this.tabs && this.tabs.length > 0) {
+      this.selectTab(this.tabs[0]);
+    }
+
+    // Set up ResizeObserver for scroll state updates
+    this.setupResizeObserver();
+
+    // Initial scroll state check
+    requestAnimationFrame(() => {
+      this.updateScrollState();
+    });
+  }
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+
+  private setupResizeObserver() {
+    if (this.tabStyle !== 'horizontal') return;
+
+    this.resizeObserver = new ResizeObserver(() => {
+      this.updateScrollState();
+    });
+
+    const container = this.shadowRoot?.querySelector('.tabsContainer.horizontal');
+    if (container) {
+      this.resizeObserver.observe(container);
+    }
+  }
+
+  private handleScroll = () => {
+    this.updateScrollState();
+  };
+
+  private updateScrollState() {
+    const container = this.shadowRoot?.querySelector('.tabsContainer.horizontal') as HTMLElement;
+    if (!container) return;
+
+    const scrollLeft = container.scrollLeft;
+    const scrollWidth = container.scrollWidth;
+    const clientWidth = container.clientWidth;
+
+    // Small threshold to account for rounding
+    const threshold = 2;
+
+    this.canScrollLeft = scrollLeft > threshold;
+    this.canScrollRight = scrollLeft < scrollWidth - clientWidth - threshold;
+  }
+
+  private scrollTabIntoView(tab: interfaces.IMenuItem) {
+    if (this.tabStyle !== 'horizontal') return;
+
+    const tabIndex = this.tabs.indexOf(tab);
+    if (tabIndex === -1) return;
+
+    const container = this.shadowRoot?.querySelector('.tabsContainer.horizontal') as HTMLElement;
+    const tabElement = container?.querySelector(`.tab:nth-child(${tabIndex + 1})`) as HTMLElement;
+
+    if (tabElement && container) {
+      const containerRect = container.getBoundingClientRect();
+      const tabRect = tabElement.getBoundingClientRect();
+
+      // Check if tab is fully visible
+      const isFullyVisible =
+        tabRect.left >= containerRect.left &&
+        tabRect.right <= containerRect.right;
+
+      if (!isFullyVisible) {
+        tabElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+      }
+    }
+  }
+
+  async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('tabs') && this.tabs && this.tabs.length > 0 && !this.selectedTab) {
+      this.selectTab(this.tabs[0]);
+    }
+
+    if (changedProperties.has('selectedTab') || changedProperties.has('tabs')) {
+      await this.updateComplete;
+      // Wait for fonts to load on first update
+      if (!this.indicatorInitialized && document.fonts) {
+        await document.fonts.ready;
+      }
+      requestAnimationFrame(() => {
+        this.updateTabIndicator();
+        this.updateScrollState();
+      });
+    }
+  }
+
+  private indicatorInitialized = false;
+
+  private updateTabIndicator() {
+    if (!this.shouldShowIndicator()) return;
+
+    const selectedTabElement = this.getSelectedTabElement();
+    if (!selectedTabElement) return;
+
+    const indicator = this.getIndicatorElement();
+    if (!indicator) return;
+
+    this.handleInitialTransition(indicator);
+    
+    if (this.tabStyle === 'horizontal') {
+      this.updateHorizontalIndicator(indicator, selectedTabElement);
+    } else {
+      this.updateVerticalIndicator(indicator, selectedTabElement);
+    }
+
+    indicator.style.opacity = '1';
+  }
+
+  private shouldShowIndicator(): boolean {
+    return this.selectedTab && this.showTabIndicator && this.tabs.includes(this.selectedTab);
+  }
+
+  private getSelectedTabElement(): HTMLElement | null {
+    const selectedIndex = this.tabs.indexOf(this.selectedTab);
+    const isHorizontal = this.tabStyle === 'horizontal';
+    const selector = isHorizontal 
+      ? `.tabs-wrapper .tabsContainer .tab:nth-child(${selectedIndex + 1})`
+      : `.vertical-wrapper .tabsContainer .tab:nth-child(${selectedIndex + 1})`;
+      
+    return this.shadowRoot.querySelector(selector);
+  }
+
+  private getIndicatorElement(): HTMLElement | null {
+    return this.shadowRoot.querySelector('.tabIndicator');
+  }
+
+  private handleInitialTransition(indicator: HTMLElement): void {
+    if (!this.indicatorInitialized) {
+      indicator.classList.add('no-transition');
+      this.indicatorInitialized = true;
+      
+      setTimeout(() => {
+        indicator.classList.remove('no-transition');
+      }, 50);
+    }
+  }
+
+  private updateHorizontalIndicator(indicator: HTMLElement, tabElement: HTMLElement): void {
+    const tabContent = tabElement.querySelector('.tab-content') as HTMLElement;
+    if (!tabContent) return;
+
+    const wrapperRect = indicator.parentElement.getBoundingClientRect();
+    const contentRect = tabContent.getBoundingClientRect();
+    
+    const contentLeft = contentRect.left - wrapperRect.left;
+    const indicatorWidth = contentRect.width + 8;
+    const indicatorLeft = contentLeft - 4;
+    
+    indicator.style.width = `${indicatorWidth}px`;
+    indicator.style.left = `${indicatorLeft}px`;
+  }
+
+  private updateVerticalIndicator(indicator: HTMLElement, tabElement: HTMLElement): void {
+    const tabsContainer = this.shadowRoot.querySelector('.vertical-wrapper .tabsContainer') as HTMLElement;
+    if (!tabsContainer) return;
+    
+    indicator.style.top = `${tabElement.offsetTop + tabsContainer.offsetTop}px`;
+    indicator.style.height = `${tabElement.clientHeight}px`;
+  }
+}

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

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

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

@@ -0,0 +1,843 @@
+import { html, css, DeesElement, customElement, state } from '@design.estate/dees-element';
+import type { DeesAppui } from './dees-appui.js';
+import type { IAppConfig, IViewActivationContext } from '../../interfaces/appconfig.js';
+import type * as interfaces from '../../interfaces/index.js';
+import '@design.estate/dees-wcctools/demotools';
+import '../../00group-dataview/dees-statsgrid/dees-statsgrid.js';
+import type { IStatsTile } from '../../00group-dataview/dees-statsgrid/dees-statsgrid.js';
+
+// Demo view component with lifecycle hooks
+@customElement('demo-dashboard-view')
+class DemoDashboardView extends DeesElement {
+  @state()
+  accessor activated: boolean = false;
+
+  private ctx: IViewActivationContext;
+
+  private statsTiles: IStatsTile[] = [
+    {
+      id: 'users',
+      title: 'Active Users',
+      value: 1234,
+      type: 'number',
+      icon: 'lucide:users',
+      description: 'Online now',
+      color: '#22c55e'
+    },
+    {
+      id: 'api-calls',
+      title: 'API Calls',
+      value: 45200,
+      type: 'trend',
+      icon: 'lucide:activity',
+      description: '+12% from last hour',
+      color: '#3b82f6',
+      trendData: [32000, 35000, 38000, 41000, 39000, 42000, 45200]
+    },
+    {
+      id: 'health',
+      title: 'System Health',
+      value: 99.9,
+      unit: '%',
+      type: 'gauge',
+      icon: 'lucide:heart-pulse',
+      description: 'All systems operational',
+      color: '#10b981',
+      gaugeOptions: {
+        min: 0,
+        max: 100,
+        thresholds: [
+          { value: 80, color: '#ef4444' },
+          { value: 95, color: '#f59e0b' },
+          { value: 100, color: '#10b981' }
+        ]
+      }
+    },
+    {
+      id: 'response',
+      title: 'Avg Response',
+      value: 127,
+      unit: 'ms',
+      type: 'number',
+      icon: 'lucide:timer',
+      description: '-15ms from yesterday',
+      color: '#8b5cf6'
+    },
+    {
+      id: 'resources',
+      title: 'Resource Usage',
+      value: '',
+      type: 'multiPercentage',
+      icon: 'lucide:server',
+      percentages: [
+        { label: 'CPU', value: 67, color: '#3b82f6' },
+        { label: 'Memory', value: 84, color: '#8b5cf6' },
+        { label: 'Disk', value: 45, color: '#10b981' }
+      ]
+    },
+    {
+      id: 'requests',
+      title: 'Requests/sec',
+      value: 1850,
+      type: 'trend',
+      icon: 'lucide:zap',
+      description: 'Current throughput',
+      color: '#06b6d4',
+      trendData: [1200, 1400, 1350, 1600, 1750, 1680, 1850]
+    }
+  ];
+
+  onActivate(context: IViewActivationContext) {
+    this.ctx = context;
+    this.activated = true;
+    console.log('Dashboard activated with context:', context);
+
+    // Set view-specific secondary menu with new item types
+    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') },
+            { type: 'divider' },
+            { type: 'action', key: 'Refresh Data', iconName: 'lucide:refreshCw', action: () => alert('Refreshing dashboard data...') },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        {
+          name: 'Filters',
+          iconName: 'lucide:filter',
+          items: [
+            { type: 'header', label: 'Time Range' },
+            { type: 'filter', key: 'Live Updates', iconName: 'lucide:radio', active: true, onToggle: (active) => console.log('Live updates:', active) },
+            { type: 'filter', key: 'Show Archived', iconName: 'lucide:archive', active: false, onToggle: (active) => console.log('Show archived:', active) },
+            { type: 'divider' },
+            { type: 'multiFilter', key: 'Data Sources', iconName: 'lucide:database', options: [
+              { key: 'api', label: 'API Server', checked: true, iconName: 'lucide:server' },
+              { key: 'web', label: 'Web Traffic', checked: true, iconName: 'lucide:globe' },
+              { key: 'mobile', label: 'Mobile App', checked: false, iconName: 'lucide:smartphone' },
+            ], onChange: (keys) => console.log('Data sources:', keys) },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        {
+          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') },
+            { type: 'divider' },
+            { type: 'link', key: 'Analytics Docs', iconName: 'lucide:externalLink', href: 'https://docs.example.com/analytics' },
+          ] as interfaces.ISecondaryMenuItem[]
+        }
+      ]
+    });
+
+    // 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; }
+        dees-statsgrid {
+          margin-bottom: 32px;
+        }
+
+        .ctx-actions {
+          margin-top: 32px;
+          padding: 24px;
+          background: rgba(255,255,255,0.02);
+          border: 1px solid rgba(255,255,255,0.08);
+          border-radius: 8px;
+        }
+        .ctx-actions h2 { color: #fafafa; font-size: 16px; font-weight: 600; margin-bottom: 16px; }
+        .button-grid {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+        }
+        .ctx-btn {
+          background: rgba(59, 130, 246, 0.1);
+          border: 1px solid rgba(59, 130, 246, 0.3);
+          color: #60a5fa;
+          padding: 8px 16px;
+          border-radius: 6px;
+          cursor: pointer;
+          font-size: 13px;
+          transition: all 0.15s ease;
+        }
+        .ctx-btn:hover {
+          background: rgba(59, 130, 246, 0.2);
+          border-color: rgba(59, 130, 246, 0.5);
+        }
+        .ctx-btn.danger {
+          background: rgba(239, 68, 68, 0.1);
+          border-color: rgba(239, 68, 68, 0.3);
+          color: #f87171;
+        }
+        .ctx-btn.danger:hover {
+          background: rgba(239, 68, 68, 0.2);
+          border-color: rgba(239, 68, 68, 0.5);
+        }
+        .ctx-btn.success {
+          background: rgba(34, 197, 94, 0.1);
+          border-color: rgba(34, 197, 94, 0.3);
+          color: #4ade80;
+        }
+        .ctx-btn.success:hover {
+          background: rgba(34, 197, 94, 0.2);
+          border-color: rgba(34, 197, 94, 0.5);
+        }
+      </style>
+      <h1>Dashboard</h1>
+      <p>Welcome back! Here's an overview of your system.</p>
+      <dees-statsgrid
+        .tiles=${this.statsTiles}
+        @tile-action=${(e: CustomEvent) => console.log('Tile action:', e.detail)}
+      ></dees-statsgrid>
+
+      <div class="ctx-actions">
+        <h2>Context Actions (ctx.appui)</h2>
+        <div class="button-grid">
+          <button class="ctx-btn" @click=${() => this.ctx?.appui.setMainMenuVisible(false)}>Hide Main Menu</button>
+          <button class="ctx-btn success" @click=${() => this.ctx?.appui.setMainMenuVisible(true)}>Show Main Menu</button>
+          <button class="ctx-btn" @click=${() => this.ctx?.appui.setSecondaryMenuVisible(false)}>Hide Secondary Menu</button>
+          <button class="ctx-btn success" @click=${() => this.ctx?.appui.setSecondaryMenuVisible(true)}>Show Secondary Menu</button>
+          <button class="ctx-btn" @click=${() => this.ctx?.appui.setContentTabsVisible(false)}>Hide Content Tabs</button>
+          <button class="ctx-btn success" @click=${() => this.ctx?.appui.setContentTabsVisible(true)}>Show Content Tabs</button>
+          <button class="ctx-btn" @click=${() => this.ctx?.appui.setMainMenuCollapsed(true)}>Collapse Main Menu</button>
+          <button class="ctx-btn success" @click=${() => this.ctx?.appui.setMainMenuCollapsed(false)}>Expand Main Menu</button>
+          <button class="ctx-btn" @click=${() => this.ctx?.appui.setBreadcrumbs(['Dashboard', 'Overview', 'Stats'])}>Set Breadcrumbs</button>
+          <button class="ctx-btn" @click=${() => this.ctx?.appui.navigateToView('projects')}>Go to Projects</button>
+          <button class="ctx-btn" @click=${() => this.ctx?.appui.navigateToView('settings', { section: 'security' })}>Go to Settings/Security</button>
+          <button class="ctx-btn" @click=${() => this.ctx?.appui.activityLog.add({ type: 'custom', user: 'Demo User', message: 'Button clicked from ctx!', iconName: 'lucide:mouse-pointer-click' })}>Add Activity Entry</button>
+          <button class="ctx-btn" @click=${() => this.ctx?.appui.setMainMenuBadge('tasks', 99)}>Set Tasks Badge to 99</button>
+          <button class="ctx-btn danger" @click=${() => this.ctx?.appui.clearMainMenuBadge('tasks')}>Clear Tasks Badge</button>
+          <button class="ctx-btn" @click=${() => this.ctx?.appui.setContentTabsAutoHide(true, 1)}>Auto-hide Tabs (≤1)</button>
+          <button class="ctx-btn danger" @click=${() => this.ctx?.appui.setContentTabsAutoHide(false)}>Disable Auto-hide</button>
+          <button class="ctx-btn success" @click=${() => this.addCloseableTab()}>Add Closeable Tab</button>
+        </div>
+      </div>
+    `;
+  }
+
+  private tabCounter = 0;
+
+  private addCloseableTab() {
+    if (!this.ctx) return;
+    this.tabCounter++;
+    const tabKey = `Tab ${this.tabCounter}`;
+    this.ctx.appui.addContentTab({
+      key: tabKey,
+      iconName: 'lucide:file',
+      action: () => console.log(`Selected ${tabKey}`),
+      closeable: true,
+      onClose: () => {
+        this.ctx?.appui.removeContentTab(tabKey);
+      }
+    });
+  }
+}
+
+// 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: DeesAppui;
+
+  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',
+          iconName: 'lucide:folder',
+          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') },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        {
+          name: 'Quick Actions',
+          iconName: 'lucide:zap',
+          items: [
+            { type: 'action', key: 'New Project', iconName: 'lucide:folderPlus', action: () => alert('Create new project') },
+            { type: 'action', key: 'Import', iconName: 'lucide:download', action: () => alert('Import project') },
+            { type: 'divider' },
+            { type: 'link', key: 'Templates', iconName: 'lucide:layoutTemplate', href: 'https://templates.example.com' },
+          ] as interfaces.ISecondaryMenuItem[]
+        }
+      ]
+    });
+
+    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: 'Views',
+          iconName: 'lucide:eye',
+          items: [
+            { key: 'All Tasks', 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') },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        {
+          name: 'Filters',
+          iconName: 'lucide:filter',
+          items: [
+            { type: 'header', label: 'Priority' },
+            { type: 'multiFilter', key: 'Priority', iconName: 'lucide:flag', options: [
+              { key: 'high', label: 'High', checked: true, iconName: 'lucide:alertCircle' },
+              { key: 'medium', label: 'Medium', checked: true, iconName: 'lucide:minusCircle' },
+              { key: 'low', label: 'Low', checked: false, iconName: 'lucide:circle' },
+            ], onChange: (keys) => console.log('Priority filter:', keys) },
+            { type: 'divider' },
+            { type: 'header', label: 'Options' },
+            { type: 'filter', key: 'Show Subtasks', iconName: 'lucide:listTree', active: true, onToggle: (active) => console.log('Show subtasks:', active) },
+            { type: 'filter', key: 'Show Completed', iconName: 'lucide:checkSquare', active: false, onToggle: (active) => console.log('Show completed:', active) },
+          ] as interfaces.ISecondaryMenuItem[]
+        },
+        {
+          name: 'Actions',
+          iconName: 'lucide:zap',
+          items: [
+            { type: 'action', key: 'Add Task', iconName: 'lucide:plus', action: () => alert('Add new task') },
+            { type: 'action', key: 'Import Tasks', iconName: 'lucide:upload', action: () => alert('Import tasks') },
+            { type: 'divider' },
+            { type: 'action', key: 'Clear Completed', iconName: 'lucide:trash2', variant: 'danger', confirmMessage: 'Delete all completed tasks?', action: () => alert('Cleared completed tasks') },
+          ] as interfaces.ISecondaryMenuItem[]
+        }
+      ]
+    });
+
+    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 = () => {
+  // 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: 'Help & Support', iconName: 'helpCircle', action: async () => console.log('Help') },
+        { divider: true },
+        { name: 'Sign Out', iconName: 'logOut', action: async () => console.log('Sign out') }
+      ]
+    },
+
+    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']
+    },
+
+    defaultView: 'dashboard',
+
+    bottomBar: {
+      visible: true,
+      widgets: [
+        {
+          id: 'status',
+          iconName: 'lucide:activity',
+          label: 'System Online',
+          status: 'success',
+          tooltip: 'All systems operational',
+          onClick: () => console.log('Status clicked'),
+        },
+        {
+          id: 'notifications',
+          iconName: 'lucide:bell',
+          label: '3 notifications',
+          status: 'warning',
+          tooltip: 'You have unread notifications',
+          onClick: () => console.log('Notifications clicked'),
+        },
+        {
+          id: 'version',
+          iconName: 'lucide:gitBranch',
+          label: 'v1.2.3',
+          position: 'right',
+          tooltip: 'Current version',
+        },
+      ],
+      actions: [
+        {
+          id: 'terminal',
+          iconName: 'lucide:terminal',
+          tooltip: 'Open Terminal',
+          position: 'right',
+          onClick: () => console.log('Terminal clicked'),
+        },
+      ],
+    },
+
+    onViewChange: (viewId, view) => {
+      console.log(`View changed to: ${viewId} (${view.name})`);
+    },
+
+    onSearch: (query) => {
+      console.log('Search query:', query);
+    }
+  };
+
+  // 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;';
+
+  const appuiElement = document.createElement('dees-appui') as DeesAppui;
+  containerElement.appendChild(appuiElement);
+
+  // Initialize after element is connected
+  setTimeout(async () => {
+    await appuiElement.updateComplete;
+
+    // Configure using the unified API
+    appuiElement.configure(appConfig);
+
+    // 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>
+      ${containerElement}
+    </dees-demowrapper>
+  `;
+};

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

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

ts_web/elements/00group-appui/dees-appui/readme.md

@@ -0,0 +1,823 @@
+# DeesAppui
+
+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 { DeesAppui } from '@design.estate/dees-catalog';
+
+@customElement('my-app')
+class MyApp extends DeesElement {
+  private appui: DeesAppui;
+
+  async firstUpdated() {
+    this.appui = this.shadowRoot.querySelector('dees-appui');
+
+    // Configure with views and menu
+    this.appui.configure({
+      branding: { logoIcon: 'lucide:box', logoText: 'My App' },
+      views: [
+        { 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></dees-appui>`;
+  }
+}
+```
+
+## Architecture Overview
+
+The DeesAppui shell consists of several interconnected components:
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│  AppBar (dees-appui-appbar)                                         │
+│  ├── Menus (File, Edit, View...)                                    │
+│  ├── Breadcrumbs                                                    │
+│  ├── User Profile + Dropdown                                        │
+│  └── Activity Log Toggle                                            │
+├─────────────┬───────────────────────────────────┬───────────────────┤
+│ Main Menu   │  Content Area                     │  Activity Log     │
+│ (collapsed/ │  ├── Content Tabs                 │  (slide panel)    │
+│  expanded)  │  │   (closable, from tables/lists)│                   │
+│             │  └── View Container               │                   │
+│ ┌─────────┐ │      └── Active View              │                   │
+│ │ 🏠 Home │ ├─────────────────────────────────┐ │                   │
+│ │ 📁 Files│ │ Secondary Menu                  │ │                   │
+│ │ ⚙ Settings ├── Collapsible Groups            │ │                   │
+│ │         │ │   ├── Item 1                    │ │                   │
+│ └─────────┘ │   ├── Item 2 (with badge)       │ │                   │
+│             │   └── Item 3                    │ │                   │
+└─────────────┴─────────────────────────────────┴───────────────────────┘
+```
+
+---
+
+## 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');
+
+// Visibility control
+appui.setMainMenuCollapsed(true);     // Collapse to icon-only sidebar
+appui.setMainMenuVisible(false);       // Hide completely
+
+// Badges
+appui.setMainMenuBadge('inbox', 12);
+appui.clearMainMenuBadge('inbox');
+```
+
+---
+
+## Secondary Menu API 📋
+
+The secondary menu is a contextual sidebar that appears next to the main content area. It supports **collapsible groups** with icons and badges, making it perfect for:
+
+- **Settings pages** (grouped settings categories)
+- **File browsers** (folder trees)
+- **Project navigation** (grouped by category)
+- **Documentation** (chapters/sections)
+
+### Collapsible Groups
+
+Groups can be collapsed/expanded by clicking the group header. The state is visually indicated with an icon rotation.
+
+```typescript
+// Set secondary menu with collapsible groups
+appui.setSecondaryMenu({
+  heading: 'Settings',
+  groups: [
+    {
+      name: 'Account',
+      iconName: 'lucide:user',        // Group icon
+      collapsed: false,                // Initial state (default: false)
+      items: [
+        { key: 'profile', iconName: 'lucide:user', action: () => showProfile() },
+        { key: 'security', iconName: 'lucide:shield', badge: '!', badgeVariant: 'warning', action: () => showSecurity() },
+        { key: 'billing', iconName: 'lucide:credit-card', action: () => showBilling() }
+      ]
+    },
+    {
+      name: 'Preferences',
+      iconName: 'lucide:settings',
+      collapsed: true,                 // Start collapsed
+      items: [
+        { key: 'notifications', iconName: 'lucide:bell', action: () => {} },
+        { key: 'appearance', iconName: 'lucide:palette', action: () => {} },
+        { key: 'language', iconName: 'lucide:globe', action: () => {} }
+      ]
+    }
+  ]
+});
+```
+
+### Secondary Menu Item Properties
+
+```typescript
+interface ISecondaryMenuItem {
+  key: string;                    // Unique identifier
+  iconName?: string;              // Icon (e.g., 'lucide:user')
+  action: () => void;             // Click handler
+  badge?: string | number;        // Badge text/count
+  badgeVariant?: 'default' | 'success' | 'warning' | 'error';
+}
+
+interface ISecondaryMenuGroup {
+  name: string;                   // Group name (shown in header)
+  iconName?: string;              // Group icon
+  collapsed?: boolean;            // Initial collapsed state
+  items: ISecondaryMenuItem[];    // Items in this group
+}
+```
+
+### Updating Secondary Menu
+
+```typescript
+// Update a specific group
+appui.updateSecondaryMenuGroup('Account', {
+  items: [...newItems]
+});
+
+// Add item to a group
+appui.addSecondaryMenuItem('Account', {
+  key: 'api-keys',
+  iconName: 'lucide:key',
+  action: () => showApiKeys()
+});
+
+// Selection (highlights the item)
+appui.setSecondaryMenuSelection('profile');
+
+// Visibility control
+appui.setSecondaryMenuCollapsed(true);   // Collapse panel
+appui.setSecondaryMenuVisible(false);     // Hide completely
+
+// Clear
+appui.clearSecondaryMenu();
+```
+
+### View-Specific Secondary Menus
+
+Each view can define its own secondary menu that appears when the view is activated:
+
+```typescript
+// In view definition
+{
+  id: 'settings',
+  name: 'Settings',
+  content: 'my-settings-view',
+  secondaryMenu: [
+    {
+      name: 'General',
+      items: [
+        { key: 'account', iconName: 'lucide:user', action: () => {} },
+        { key: 'security', iconName: 'lucide:shield', action: () => {} }
+      ]
+    }
+  ]
+}
+
+// Or set dynamically in view's onActivate hook
+onActivate(context: IViewActivationContext) {
+  context.appui.setSecondaryMenu({
+    heading: 'Project Files',
+    groups: [...]
+  });
+}
+```
+
+---
+
+## Content Tabs API 📑
+
+Content tabs appear above the main view content. They're designed for **opening multiple items** from tables, lists, or other data sources—similar to browser tabs or IDE editor tabs.
+
+### Common Use Cases
+
+- **Table row details** - Click a row to open it as a tab
+- **Document editing** - Open multiple documents
+- **Entity inspection** - View customer, order, product details
+- **Multi-file editing** - Edit multiple configuration files
+
+### Closable Tabs
+
+Tabs can be closable, allowing users to open items, work with them, and close when done:
+
+```typescript
+// Set initial tabs
+appui.setContentTabs([
+  { key: 'overview', iconName: 'lucide:home', action: () => showOverview() },
+  { key: 'activity', iconName: 'lucide:activity', action: () => showActivity() }
+]);
+
+// Add a closable tab when user clicks a table row
+table.addEventListener('row-click', (e) => {
+  const item = e.detail.item;
+
+  appui.addContentTab({
+    key: `item-${item.id}`,
+    label: item.name,                      // Display label
+    iconName: 'lucide:file',
+    closable: true,                        // Allow closing
+    action: () => showItemDetails(item)
+  });
+
+  // Select the new tab
+  appui.selectContentTab(`item-${item.id}`);
+});
+
+// Handle tab close
+appui.addEventListener('tab-close', (e) => {
+  const tabKey = e.detail.key;
+  // Cleanup resources if needed
+  console.log(`Tab ${tabKey} closed`);
+});
+```
+
+### Tab Management
+
+```typescript
+// Add/remove tabs
+appui.addContentTab({
+  key: 'debug',
+  iconName: 'lucide:bug',
+  closable: true,
+  action: () => {}
+});
+appui.removeContentTab('debug');
+
+// Select tab
+appui.selectContentTab('preview');
+
+// Get current tab
+const current = appui.getSelectedContentTab();
+
+// Visibility control
+appui.setContentTabsVisible(false);        // Hide tab bar
+
+// Auto-hide when only one tab
+appui.setContentTabsAutoHide(true, 1);     // Hide when ≤ 1 tab
+```
+
+### Opening Items from Tables/Lists
+
+A common pattern is opening table rows as closable tabs:
+
+```typescript
+@customElement('my-customers-view')
+class MyCustomersView extends DeesElement {
+  private appui: DeesAppui;
+
+  onActivate(context: IViewActivationContext) {
+    this.appui = context.appui;
+
+    // Set base tabs
+    this.appui.setContentTabs([
+      { key: 'list', label: 'All Customers', iconName: 'lucide:users', action: () => this.showList() }
+    ]);
+  }
+
+  render() {
+    return html`
+      <dees-table
+        .data=${this.customers}
+        @row-dblclick=${this.openCustomerTab}
+      ></dees-table>
+    `;
+  }
+
+  openCustomerTab(e: CustomEvent) {
+    const customer = e.detail.item;
+    const tabKey = `customer-${customer.id}`;
+
+    // Check if tab already exists
+    const existingTab = this.appui.getSelectedContentTab();
+    if (existingTab?.key === tabKey) {
+      return; // Already viewing this customer
+    }
+
+    // Add new closable tab
+    this.appui.addContentTab({
+      key: tabKey,
+      label: customer.name,
+      iconName: 'lucide:user',
+      closable: true,
+      action: () => this.showCustomerDetails(customer)
+    });
+
+    this.appui.selectContentTab(tabKey);
+  }
+
+  showCustomerDetails(customer: Customer) {
+    // Render customer details
+    this.currentView = html`<customer-details .customer=${customer}></customer-details>`;
+  }
+
+  showList() {
+    this.currentView = html`<dees-table ...></dees-table>`;
+  }
+}
+```
+
+---
+
+## Activity Log API 📊
+
+The activity log is a slide-out panel on the right side showing user actions and system events.
+
+### Activity Log Toggle
+
+The appbar includes a toggle button with a badge showing the entry count:
+
+```typescript
+// Control visibility
+appui.setActivityLogVisible(true);     // Show panel
+appui.toggleActivityLog();             // Toggle state
+const isVisible = appui.getActivityLogVisible();
+
+// The toggle button automatically shows entry count
+// Add entries and the badge updates automatically
+```
+
+### Adding Entries
+
+```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 entries (e.g., from backend)
+appui.activityLog.addMany([...entries]);
+
+// Clear all entries
+appui.activityLog.clear();
+
+// Query entries
+const entries = appui.activityLog.getEntries();
+const filtered = appui.activityLog.filter({ user: 'John', type: 'create' });
+const searched = appui.activityLog.search('invoice');
+```
+
+### Activity Entry Types
+
+Each type has a default icon that can be overridden:
+
+| Type | Default Icon | Use Case |
+|------|--------------|----------|
+| `login` | `lucide:log-in` | User sign-in |
+| `logout` | `lucide:log-out` | User sign-out |
+| `view` | `lucide:eye` | Page/item viewed |
+| `create` | `lucide:plus` | New item created |
+| `update` | `lucide:pencil` | Item modified |
+| `delete` | `lucide:trash` | Item deleted |
+| `custom` | `lucide:activity` | Custom events |
+
+---
+
+## 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: DeesAppui;           // 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 { DeesAppui, IViewActivationContext } from '@design.estate/dees-catalog';
+
+@customElement('my-app')
+class MyApp extends DeesElement {
+  private appui: DeesAppui;
+
+  async firstUpdated() {
+    this.appui = this.shadowRoot.querySelector('dees-appui');
+
+    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></dees-appui>`;
+  }
+}
+
+// View with lifecycle hooks
+@customElement('crm-settings')
+class CrmSettings extends DeesElement {
+  private appui: DeesAppui;
+
+  onActivate(context: IViewActivationContext) {
+    this.appui = context.appui;
+
+    // Set secondary menu for settings
+    this.appui.setSecondaryMenu({
+      heading: 'Settings',
+      groups: [
+        {
+          name: 'Account',
+          iconName: 'lucide:user',
+          items: [
+            { key: 'profile', iconName: 'lucide:user', action: () => this.showSection('profile') },
+            { key: 'security', iconName: 'lucide:shield', action: () => this.showSection('security') }
+          ]
+        },
+        {
+          name: 'Preferences',
+          iconName: 'lucide:settings',
+          collapsed: true,
+          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
+- `ISecondaryMenuItem` - Secondary menu item
+- `IMenuItem` - Tab/menu item definition

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

@@ -0,0 +1,402 @@
+import { html, render, type TemplateResult } from '@design.estate/dees-element';
+import type {
+  IViewDefinition,
+  IViewActivationContext,
+  IViewLifecycle,
+  TDeesAppui
+} 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: TDeesAppui | null = null;
+
+  /**
+   * Set the appui reference for view activation context
+   */
+  public setAppuiRef(appui: TDeesAppui): void {
+    this.appui = appui;
+  }
+
+  /**
+   * Register a single view
+   */
+  public register(view: IViewDefinition): void {
+    if (this.views.has(view.id)) {
+      console.warn(`View with id "${view.id}" already registered. Overwriting.`);
+    }
+    this.views.set(view.id, view);
+  }
+
+  /**
+   * Register multiple views
+   */
+  public registerAll(views: IViewDefinition[]): void {
+    views.forEach((view) => this.register(view));
+  }
+
+  /**
+   * Get a view definition by ID
+   */
+  public get(viewId: string): IViewDefinition | undefined {
+    return this.views.get(viewId);
+  }
+
+  /**
+   * Get all registered view IDs
+   */
+  public getViewIds(): string[] {
+    return Array.from(this.views.keys());
+  }
+
+  /**
+   * Get all views
+   */
+  public getAll(): IViewDefinition[] {
+    return Array.from(this.views.values());
+  }
+
+  /**
+   * Get route for a view
+   */
+  public getRoute(viewId: string): string {
+    const view = this.views.get(viewId);
+    return view?.route || view?.id || '';
+  }
+
+  /**
+   * Find view by route (supports parameterized routes like 'settings/:section')
+   */
+  public findByRoute(route: string): { view: IViewDefinition; params: Record<string, string> } | undefined {
+    for (const view of this.views.values()) {
+      const viewRoute = view.route || view.id;
+      const params = this.matchRoute(viewRoute, route);
+      if (params !== null) {
+        return { view, params };
+      }
+    }
+    return undefined;
+  }
+
+  /**
+   * 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);
+    if (!view) {
+      console.error(`View "${viewId}" not found in registry`);
+      return null;
+    }
+
+    // For legacy compatibility, clear container
+    container.innerHTML = '';
+
+    let element: HTMLElement;
+    const content = view.content;
+
+    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 {
+        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 "${viewId}"`);
+      return null;
+    }
+
+    container.appendChild(element);
+    this.instances.set(viewId, element);
+    this.currentViewId = viewId;
+
+    return element;
+  }
+
+  /**
+   * Get currently active view ID
+   */
+  public getCurrentViewId(): string | null {
+    return this.currentViewId;
+  }
+
+  /**
+   * Get cached instance of a view
+   */
+  public getInstance(viewId: string): HTMLElement | undefined {
+    return this.instances.get(viewId);
+  }
+
+  /**
+   * Clear 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;
+  }
+
+  /**
+   * Unregister a view
+   */
+  public unregister(viewId: string): boolean {
+    this.clearInstance(viewId);
+    return this.views.delete(viewId);
+  }
+
+  /**
+   * Clear the registry
+   */
+  public clear(): void {
+    this.views.clear();
+    this.clearInstances();
+  }
+
+  /**
+   * Check if a view is registered
+   */
+  public has(viewId: string): boolean {
+    return this.views.has(viewId);
+  }
+
+  /**
+   * Get the number of registered views
+   */
+  public get size(): number {
+    return this.views.size;
+  }
+}

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

@@ -0,0 +1,215 @@
+import { html, css } from '@design.estate/dees-element';
+import '../00group-button/dees-button/dees-button.js';
+import '../../00group-layout/dees-panel/dees-panel.js';
+import '@design.estate/dees-wcctools/demotools';
+
+export const demoFunc = () => html`
+  <dees-demowrapper>
+    <style>
+      ${css`
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          max-width: 800px;
+          margin: 0 auto;
+        }
+
+        .demo-buttons {
+          display: flex;
+          gap: 16px;
+          flex-wrap: wrap;
+        }
+      `}
+    </style>
+
+    <div class="demo-container">
+      <dees-panel .title=${'Mobile Navigation'} .subtitle=${'Shadcn-style slide-in navigation menu with icons'}>
+        <div class="demo-buttons">
+          <dees-button 
+            @click=${async () => {
+              const { DeesMobilenavigation } = await import('./dees-mobilenavigation.js');
+              DeesMobilenavigation.createAndShow([
+                {
+                  name: 'Dashboard',
+                  iconName: 'lucide:layout-dashboard',
+                  action: async (nav) => {
+                    console.log('Navigate to dashboard');
+                  },
+                },
+                {
+                  name: 'Profile',
+                  iconName: 'lucide:user',
+                  action: async (nav) => {
+                    console.log('Navigate to profile');
+                  },
+                },
+                {
+                  name: 'Messages',
+                  iconName: 'lucide:mail',
+                  action: async (nav) => {
+                    console.log('Navigate to messages');
+                  },
+                },
+                {
+                  name: 'Settings',
+                  iconName: 'lucide:settings',
+                  action: async (nav) => {
+                    console.log('Navigate to settings');
+                  },
+                },
+                { divider: true } as any,
+                {
+                  name: 'Help & Support',
+                  iconName: 'lucide:help-circle',
+                  action: async (nav) => {
+                    console.log('Show help');
+                  },
+                },
+                {
+                  name: 'Sign Out',
+                  iconName: 'lucide:log-out',
+                  action: async (nav) => {
+                    console.log('Sign out');
+                  },
+                },
+              ]);
+            }}
+          >
+            Open Navigation Menu
+          </dees-button>
+
+          <dees-button 
+            type="secondary"
+            @click=${async () => {
+              const { DeesMobilenavigation } = await import('./dees-mobilenavigation.js');
+              const nav = await DeesMobilenavigation.createAndShow([
+                {
+                  name: 'New Document',
+                  iconName: 'lucide:file-plus',
+                  action: async () => console.log('New document'),
+                },
+                {
+                  name: 'Upload File',
+                  iconName: 'lucide:upload',
+                  action: async () => console.log('Upload file'),
+                },
+                {
+                  name: 'Download',
+                  iconName: 'lucide:download',
+                  action: async () => console.log('Download'),
+                },
+                { divider: true } as any,
+                {
+                  name: 'Share',
+                  iconName: 'lucide:share-2',
+                  action: async () => console.log('Share'),
+                },
+                {
+                  name: 'Export',
+                  iconName: 'lucide:export',
+                  action: async () => console.log('Export'),
+                },
+              ]);
+              nav.heading = 'File Actions';
+            }}
+          >
+            File Actions Menu
+          </dees-button>
+
+          <dees-button 
+            type="outline"
+            @click=${async () => {
+              const { DeesMobilenavigation } = await import('./dees-mobilenavigation.js');
+              const nav = await DeesMobilenavigation.createAndShow([
+                {
+                  name: 'Cut',
+                  iconName: 'lucide:scissors',
+                  action: async () => console.log('Cut'),
+                },
+                {
+                  name: 'Copy',
+                  iconName: 'lucide:copy',
+                  action: async () => console.log('Copy'),
+                },
+                {
+                  name: 'Paste',
+                  iconName: 'lucide:clipboard',
+                  action: async () => console.log('Paste'),
+                },
+                { divider: true } as any,
+                {
+                  name: 'Select All',
+                  iconName: 'lucide:square-check',
+                  action: async () => console.log('Select all'),
+                },
+                {
+                  name: 'Find',
+                  iconName: 'lucide:search',
+                  action: async () => console.log('Find'),
+                },
+                {
+                  name: 'Replace',
+                  iconName: 'lucide:replace',
+                  action: async () => console.log('Replace'),
+                },
+              ]);
+              nav.heading = 'Edit';
+            }}
+          >
+            Edit Menu
+          </dees-button>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Features'} .subtitle=${'Modern shadcn-inspired mobile navigation'}>
+        <div style="padding: 16px;">
+          <ul style="margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 8px;">
+            <li>Smooth slide-in animation from the right</li>
+            <li>Z-index registry integration for proper stacking</li>
+            <li>Backdrop blur with window layer</li>
+            <li>Support for icons using Lucide icons</li>
+            <li>Menu item dividers for grouping</li>
+            <li>Staggered animation for menu items</li>
+            <li>Responsive design that adapts to mobile screens</li>
+            <li>Clean, modern shadcn-style aesthetics</li>
+            <li>Dark/light theme support</li>
+            <li>Singleton pattern ensures only one instance</li>
+          </ul>
+        </div>
+      </dees-panel>
+
+      <dees-panel .title=${'Code Example'} .subtitle=${'How to use the mobile navigation'}>
+        <div style="padding: 16px; background: var(--background-secondary); border-radius: 8px;">
+          <pre style="margin: 0; font-family: monospace; font-size: 13px; line-height: 1.6;"><code>import { DeesMobilenavigation } from '@design.estate/dees-catalog';
+
+DeesMobilenavigation.createAndShow([
+  {
+    name: 'Dashboard',
+    iconName: 'lucide:layout-dashboard',
+    action: async (nav) => {
+      console.log('Navigate to dashboard');
+    },
+  },
+  {
+    name: 'Settings',
+    iconName: 'lucide:settings',
+    action: async (nav) => {
+      console.log('Navigate to settings');
+    },
+  },
+  { divider: true },
+  {
+    name: 'Sign Out',
+    iconName: 'lucide:log-out',
+    action: async (nav) => {
+      console.log('Sign out');
+    },
+  },
+]);</code></pre>
+        </div>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
+`;

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

@@ -0,0 +1,360 @@
+import * as plugins from '../../00plugins.js';
+import { zIndexRegistry } from '../../00zindex.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
+import {
+  cssManager,
+  css,
+  type CSSResult,
+  customElement,
+  DeesElement,
+  domtools,
+  html,
+  property,
+  state,
+} from '@design.estate/dees-element';
+import { DeesWindowLayer } from '../../00group-overlay/dees-windowlayer/dees-windowlayer.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+import { themeDefaultStyles } from '../../00theme.js';
+
+@customElement('dees-mobilenavigation')
+export class DeesMobilenavigation extends DeesElement {
+  // STATIC
+  public static demoGroups = ['App UI'];
+  public static demo = () => html`
+    <dees-button @click=${() => {
+      DeesMobilenavigation.createAndShow([
+        {
+          name: 'Dashboard',
+          iconName: 'lucide:layout-dashboard',
+          action: async (deesMobileNav) => {
+            console.log('Navigate to dashboard');
+            return null;
+          },
+        },
+        {
+          name: 'Profile',
+          iconName: 'lucide:user',
+          action: async (deesMobileNav) => {
+            console.log('Navigate to profile');
+            return null;
+          },
+        },
+        {
+          name: 'Settings',
+          iconName: 'lucide:settings',
+          action: async (deesMobileNav) => {
+            console.log('Navigate to settings');
+            return null;
+          },
+        },
+        { divider: true } as any,
+        {
+          name: 'Help',
+          iconName: 'lucide:help-circle',
+          action: async (deesMobileNav) => {
+            console.log('Show help');
+            return null;
+          },
+        },
+        {
+          name: 'Sign Out',
+          iconName: 'lucide:log-out',
+          action: async (deesMobileNav) => {
+            console.log('Sign out');
+            return null;
+          },
+        },
+      ]);
+    }}>Open Mobile Navigation</dees-button>
+  `;
+
+  private static singletonRef: DeesMobilenavigation;
+  public static async createAndShow(menuItemsArg: plugins.tsclass.website.IMenuItem<DeesMobilenavigation>[]) {
+    if (!this.singletonRef) {
+      this.singletonRef = new DeesMobilenavigation();
+      document.body.append(this.singletonRef);
+      await this.singletonRef.init();
+    }
+    this.singletonRef.menuItems = menuItemsArg;
+    await this.singletonRef.readyDeferred.promise;
+    this.singletonRef.show();
+    return this.singletonRef;
+  }
+
+  // INSTANCE
+  @property({
+    type: String,
+  })
+  accessor heading: string = `Menu`;
+
+  @property({
+    type: Array,
+  })
+  accessor menuItems: plugins.tsclass.website.IMenuItem[] = [];
+
+  @state()
+  accessor mobileNavZIndex: number = 1000;
+
+  readyDeferred: plugins.smartpromise.Deferred<any> = domtools.plugins.smartpromise.defer();
+
+  constructor() {
+    super();
+    /* this.init().then(() => {
+      this.show();
+    }); */
+  }
+
+  /**
+   * inits the mobile navigation
+   */
+  public async init() {
+    await this.updateComplete;
+    this.readyDeferred.resolve();
+  }
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
+      :host {
+        font-family: ${cssGeistFontFamily};
+      }
+
+      .main {
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        will-change: transform;
+        position: fixed;
+        height: 100vh;
+        width: 100%;
+        max-width: 320px;
+        transform: translateX(100%);
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        z-index: var(--z-index);
+        opacity: 0;
+        right: 0px;
+        top: 0px;
+        bottom: 0px;
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border-left: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        pointer-events: none;
+        box-shadow: ${cssManager.bdTheme(
+          '-20px 0 25px -5px rgba(0, 0, 0, 0.1), -10px 0 10px -5px rgba(0, 0, 0, 0.04)',
+          '-20px 0 25px -5px rgba(0, 0, 0, 0.3), -10px 0 10px -5px rgba(0, 0, 0, 0.2)'
+        )};
+        display: flex;
+        flex-direction: column;
+      }
+
+      .main.show {
+        pointer-events: all;
+        transform: translateX(0px);
+        opacity: 1;
+      }
+
+      .header {
+        padding: 24px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+      }
+
+      .heading {
+        font-size: 18px;
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        margin: 0;
+      }
+
+      .menu-container {
+        flex: 1;
+        overflow-y: auto;
+        padding: 8px;
+      }
+
+      .menuItem {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px 16px;
+        margin-bottom: 2px;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        position: relative;
+        user-select: none;
+      }
+
+      .menuItem:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+
+      .menuItem:active {
+        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+        transform: scale(0.98);
+      }
+
+      .menuItem dees-icon {
+        flex-shrink: 0;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        transition: color 0.15s ease;
+      }
+
+      .menuItem:hover dees-icon {
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+
+      .menuItem-text {
+        flex: 1;
+        letter-spacing: -0.01em;
+      }
+
+      .menuItem-divider {
+        height: 1px;
+        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        margin: 8px 16px;
+      }
+
+      /* Mobile responsiveness */
+      @media (max-width: 400px) {
+        .main {
+          max-width: 100vw;
+          width: 85vw;
+        }
+      }
+
+      /* Animation for menu items */
+      @keyframes slideInRight {
+        from {
+          opacity: 0;
+          transform: translateX(20px);
+        }
+        to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      .main.show .menuItem {
+        animation: slideInRight 0.3s ease-out forwards;
+        animation-delay: calc(var(--item-index, 0) * 0.05s);
+        opacity: 0;
+      }
+
+      /* Scrollbar styling */
+      .menu-container::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .menu-container::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .menu-container::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
+        border-radius: 3px;
+      }
+
+      .menu-container::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('#d1d5db', '#52525b')};
+      }
+    `,
+  ];
+
+  public render() {
+    return html`
+      <style>
+        .main {
+          --z-index: ${this.mobileNavZIndex};
+        }
+      </style>
+      <div class="main">
+        <div class="header">
+          <h2 class="heading">${this.heading}</h2>
+        </div>
+        <div class="menu-container">
+          ${this.menuItems.map((menuItem, index) => {
+            if ('divider' in menuItem && menuItem.divider) {
+              return html`<div class="menuItem-divider"></div>`;
+            }
+            return html`
+              <div
+                class="menuItem"
+                style="--item-index: ${index}"
+                @click="${() => {
+                  this.hide();
+                  menuItem.action(this);
+                }}"
+              >
+                ${menuItem.iconName ? html`
+                  <dees-icon .icon=${menuItem.iconName} size="20"></dees-icon>
+                ` : ''}
+                <span class="menuItem-text">${menuItem.name}</span>
+              </div>
+            `;
+          })}
+        </div>
+      </div>
+    `;
+  }
+
+  private windowLayer: DeesWindowLayer;
+
+  /**
+   * inits the show
+   */
+  public async show() {
+    const domtools = await this.domtoolsPromise;
+    const main = this.shadowRoot.querySelector('.main');
+    
+    // Create window layer first (it will get its own z-index)
+    if (!this.windowLayer) {
+      this.windowLayer = await DeesWindowLayer.createAndShow({
+        blur: true,
+      });
+      this.windowLayer.addEventListener('click', () => {
+        this.hide();
+      });
+    } else {
+      document.body.append(this.windowLayer);
+      await this.windowLayer.show();
+    }
+    
+    // Get z-index for mobile nav (will be above window layer)
+    this.mobileNavZIndex = zIndexRegistry.getNextZIndex();
+    zIndexRegistry.register(this, this.mobileNavZIndex);
+
+    await domtools.convenience.smartdelay.delayFor(10);
+    main.classList.add('show');
+  }
+
+  /**
+   * inits the hide function
+   */
+  public async hide() {
+    const domtools = await this.domtoolsPromise;
+    const main = this.shadowRoot.querySelector('.main');
+    main.classList.remove('show');
+    
+    // Unregister from z-index registry
+    zIndexRegistry.unregister(this);
+    
+    if (this.windowLayer) {
+      await this.windowLayer.destroy();
+    }
+  }
+
+  async disconnectedCallback() {
+    super.disconnectedCallback();
+    
+    // Cleanup
+    zIndexRegistry.unregister(this);
+    
+    if (this.windowLayer) {
+      await this.windowLayer.destroy();
+    }
+  }
+}

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

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

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

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

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

@@ -16,12 +16,13 @@ export class DeesButtonExit extends DeesElement {
   public static demo = () => html`
     <dees-button-exit></dees-button-exit>
   `;
+  public static demoGroups = ['Button'];
 
   // INSTANCE
   @property({
     type: Number
   })
-  public size: number = 24;
+  accessor size: number = 24;
 
   public styles = [
     cssManager.defaultStyles,

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

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

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

@@ -0,0 +1,114 @@
+import { html, css } from '@design.estate/dees-element';
+
+export const demoFunc = () => {
+  return html`
+    <style>
+      ${css`
+        .demoBox {
+          background: #000000;
+          padding: 40px;
+          min-height: 100vh;
+          box-sizing: border-box;
+        }
+
+        .demo-section {
+          margin-bottom: 32px;
+        }
+
+        .demo-title {
+          color: #fff;
+          font-size: 20px;
+          font-weight: 600;
+          margin-bottom: 16px;
+          font-family: 'Geist Sans', sans-serif;
+        }
+
+        .demo-description {
+          color: #999;
+          font-size: 14px;
+          margin-bottom: 24px;
+          font-family: 'Geist Sans', sans-serif;
+        }
+      `}
+    </style>
+    <div class="demoBox">
+      <div class="demo-section">
+        <h2 class="demo-title">Basic Button Groups</h2>
+        <p class="demo-description">Button groups without labels for simple grouping</p>
+        
+        <dees-button-group>
+          <dees-button>Option 1</dees-button>
+          <dees-button>Option 2</dees-button>
+          <dees-button>Option 3</dees-button>
+        </dees-button-group>
+      </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Labeled Button Groups</h2>
+        <p class="demo-description">Button groups with descriptive labels</p>
+        
+        <dees-button-group label="View Mode:">
+          <dees-button type="highlighted">Grid</dees-button>
+          <dees-button>List</dees-button>
+          <dees-button>Cards</dees-button>
+        </dees-button-group>
+      </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Multiple Groups</h2>
+        <p class="demo-description">Multiple button groups used together</p>
+        
+        <div style="display: flex; gap: 16px; flex-wrap: wrap;">
+          <dees-button-group label="Dataset:">
+            <dees-button type="highlighted">System</dees-button>
+            <dees-button>Network</dees-button>
+            <dees-button>Sales</dees-button>
+          </dees-button-group>
+          
+          <dees-button-group label="Time Range:">
+            <dees-button>1H</dees-button>
+            <dees-button type="highlighted">24H</dees-button>
+            <dees-button>7D</dees-button>
+            <dees-button>30D</dees-button>
+          </dees-button-group>
+          
+          <dees-button-group label="Actions:">
+            <dees-button>Refresh</dees-button>
+            <dees-button>Export</dees-button>
+          </dees-button-group>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Vertical Button Groups</h2>
+        <p class="demo-description">Button groups with vertical layout</p>
+        
+        <div style="display: flex; gap: 24px;">
+          <dees-button-group direction="vertical" label="Navigation:">
+            <dees-button>Dashboard</dees-button>
+            <dees-button type="highlighted">Analytics</dees-button>
+            <dees-button>Reports</dees-button>
+            <dees-button>Settings</dees-button>
+          </dees-button-group>
+          
+          <dees-button-group direction="vertical">
+            <dees-button>Add Item</dees-button>
+            <dees-button>Edit Item</dees-button>
+            <dees-button>Delete Item</dees-button>
+          </dees-button-group>
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h2 class="demo-title">Mixed Button Types</h2>
+        <p class="demo-description">Different button types within groups</p>
+        
+        <dees-button-group label="Status:">
+          <dees-button type="success">Active</dees-button>
+          <dees-button>Pending</dees-button>
+          <dees-button type="danger">Inactive</dees-button>
+        </dees-button-group>
+      </div>
+    </div>
+  `;
+};

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

@@ -0,0 +1,87 @@
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  property,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-button-group.demo.js';
+import { themeDefaultStyles } from '../../00theme.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-button-group': DeesButtonGroup;
+  }
+}
+
+@customElement('dees-button-group')
+export class DeesButtonGroup extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Button'];
+
+  @property()
+  accessor label: string = '';
+
+  @property()
+  accessor direction: 'horizontal' | 'vertical' = 'horizontal';
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
+      :host {
+        display: inline-block;
+      }
+
+      .button-group {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        padding: 8px;
+        background: ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
+        border-radius: 6px;
+      }
+
+      .button-group.vertical {
+        flex-direction: column;
+        align-items: stretch;
+      }
+
+      .label {
+        color: ${cssManager.bdTheme('#666', '#999')};
+        font-size: 12px;
+        font-family: 'Geist Sans', sans-serif;
+        margin-right: 8px;
+        white-space: nowrap;
+      }
+
+      .button-group.vertical .label {
+        margin-right: 0;
+        margin-bottom: 8px;
+      }
+
+      ::slotted(*) {
+        margin: 0 !important;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="button-group ${this.direction}">
+        ${this.label ? html`<span class="label">${this.label}</span>` : ''}
+        <slot></slot>
+      </div>
+    `;
+  }
+}

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

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

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

@@ -0,0 +1,461 @@
+import { html, css, cssManager, domtools } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import '../../00group-layout/dees-panel/dees-panel.js';
+import '../../00group-form/dees-form/dees-form.js';
+import '../../00group-form/dees-form-submit/dees-form-submit.js';
+import '../../00group-input/dees-input-text/dees-input-text.js';
+import '../../00group-utility/dees-icon/dees-icon.js';
+import type { DeesButton } from '../dees-button/dees-button.js';
+
+export const demoFunc = () => html`
+  <style>
+    ${css`
+      .demo-container {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+        padding: 24px;
+        max-width: 1200px;
+        margin: 0 auto;
+      }
+      
+      dees-panel {
+        margin-bottom: 24px;
+      }
+      
+      dees-panel:last-child {
+        margin-bottom: 0;
+      }
+      
+      .button-group {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
+      
+      .vertical-group {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        max-width: 300px;
+      }
+      
+      .horizontal-group {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        flex-wrap: wrap;
+      }
+      
+      .demo-output {
+        margin-top: 16px;
+        padding: 12px;
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+        border-radius: 6px;
+        font-size: 14px;
+        font-family: monospace;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+      }
+      
+      .icon-row {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin: 8px 0;
+      }
+      
+      .code-snippet {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
+        padding: 8px 12px;
+        border-radius: 4px;
+        font-family: monospace;
+        font-size: 13px;
+        display: inline-block;
+        margin: 4px 0;
+      }
+    `}
+  </style>
+  
+  <div class="demo-container">
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Log button clicks for demo purposes
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button) => {
+        button.addEventListener('clicked', () => {
+          const type = button.getAttribute('type') || 'default';
+          console.log(`Button variant clicked: ${type}`);
+        });
+      });
+    }}>
+      <dees-panel .title=${'1. Button Variants'} .subtitle=${'Different visual styles for various use cases'}>
+        <div class="button-group">
+          <dees-button type="default">Default</dees-button>
+          <dees-button type="secondary">Secondary</dees-button>
+          <dees-button type="destructive">Destructive</dees-button>
+          <dees-button type="outline">Outline</dees-button>
+          <dees-button type="ghost">Ghost</dees-button>
+          <dees-button type="link">Link Button</dees-button>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate size differences programmatically
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button) => {
+        button.addEventListener('clicked', () => {
+          const size = button.getAttribute('size') || 'default';
+          console.log(`Button size: ${size}`);
+        });
+      });
+    }}>
+      <dees-panel .title=${'2. Button Sizes'} .subtitle=${'Multiple sizes for different contexts and use cases'}>
+        <div class="button-group">
+          <dees-button size="sm">Small Button</dees-button>
+          <dees-button size="default">Default Size</dees-button>
+          <dees-button size="lg">Large Button</dees-button>
+          <dees-button size="icon" type="outline" .text=${'🚀'}></dees-button>
+        </div>
+        
+        <div class="button-group" style="margin-top: 16px;">
+          <dees-button size="sm" type="secondary">Small Secondary</dees-button>
+          <dees-button size="default" type="destructive">Default Destructive</dees-button>
+          <dees-button size="lg" type="outline">Large Outline</dees-button>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Track icon button clicks
+      const iconButtons = elementArg.querySelectorAll('dees-button');
+      iconButtons.forEach((button) => {
+        button.addEventListener('clicked', () => {
+          const hasIcon = button.querySelector('dees-icon');
+          if (hasIcon) {
+            const iconName = hasIcon.getAttribute('iconFA') || 'unknown';
+            console.log(`Icon button clicked: ${iconName}`);
+          }
+        });
+      });
+    }}>
+      <dees-panel .title=${'3. Buttons with Icons'} .subtitle=${'Combining icons with text for enhanced visual communication'}>
+        <div class="icon-row">
+          <dees-button>
+            <dees-icon icon="fa:plus"></dees-icon>
+            Add Item
+          </dees-button>
+          <dees-button type="destructive">
+            <dees-icon icon="fa:trash"></dees-icon>
+            Delete
+          </dees-button>
+          <dees-button type="outline">
+            <dees-icon icon="lucide:Download"></dees-icon>
+            Download
+          </dees-button>
+        </div>
+
+        <div class="icon-row">
+          <dees-button type="secondary" size="sm">
+            <dees-icon icon="fa:gear"></dees-icon>
+            Settings
+          </dees-button>
+          <dees-button type="ghost">
+            <dees-icon icon="fa:caretLeft"></dees-icon>
+            Back
+          </dees-button>
+          <dees-button type="ghost">
+            Next
+            <dees-icon icon="fa:caretRight"></dees-icon>
+          </dees-button>
+        </div>
+
+        <div class="icon-row">
+          <dees-button size="icon" type="default">
+            <dees-icon icon="fa:plus"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="secondary">
+            <dees-icon icon="fa:gear"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="outline">
+            <dees-icon icon="lucide:Search"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="ghost">
+            <dees-icon icon="lucide:MoreVertical"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="destructive">
+            <dees-icon icon="fa:trash"></dees-icon>
+          </dees-button>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Track icon property button clicks
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button) => {
+        button.addEventListener('clicked', () => {
+          const icon = button.getAttribute('icon') || 'none';
+          const position = button.getAttribute('iconPosition') || 'left';
+          console.log(`Icon property button: icon=${icon}, position=${position}`);
+        });
+      });
+    }}>
+      <dees-panel .title=${'4. Icons via Property'} .subtitle=${'Simplified icon syntax using the icon property'}>
+        <div class="icon-row">
+          <dees-button icon="fa:plus">Add Item</dees-button>
+          <dees-button type="destructive" icon="fa:trash">Delete</dees-button>
+          <dees-button type="outline" icon="lucide:Download">Download</dees-button>
+        </div>
+
+        <div class="icon-row">
+          <dees-button type="secondary" size="sm" icon="fa:gear">Settings</dees-button>
+          <dees-button type="ghost" icon="fa:caretLeft">Back</dees-button>
+          <dees-button type="ghost" icon="fa:caretRight" iconPosition="right">Next</dees-button>
+        </div>
+
+        <div class="icon-row">
+          <dees-button size="icon" type="default" icon="fa:plus"></dees-button>
+          <dees-button size="icon" type="secondary" icon="lucide:Settings"></dees-button>
+          <dees-button size="icon" type="outline" icon="lucide:Search"></dees-button>
+          <dees-button size="icon" type="ghost" icon="lucide:MoreVertical"></dees-button>
+          <dees-button size="icon" type="destructive" icon="fa:trash"></dees-button>
+        </div>
+
+        <div style="margin-top: 16px;">
+          <div class="code-snippet">
+            &lt;dees-button icon="fa:plus"&gt;Add Item&lt;/dees-button&gt;<br>
+            &lt;dees-button icon="fa:caretRight" iconPosition="right"&gt;Next&lt;/dees-button&gt;
+          </div>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Demonstrate status changes
+      const pendingButton = elementArg.querySelector('dees-button[status="pending"]');
+      const successButton = elementArg.querySelector('dees-button[status="success"]');
+      const errorButton = elementArg.querySelector('dees-button[status="error"]');
+      
+      // Simulate status changes
+      if (pendingButton) {
+        setTimeout(() => {
+          console.log('Pending button is showing loading state');
+        }, 1000);
+      }
+      
+      if (successButton) {
+        successButton.addEventListener('clicked', () => {
+          console.log('Success state button clicked');
+        });
+      }
+      
+      if (errorButton) {
+        errorButton.addEventListener('clicked', () => {
+          console.log('Error state button clicked');
+        });
+      }
+    }}>
+      <dees-panel .title=${'5. Button States'} .subtitle=${'Different states to indicate button status and loading conditions'}>
+        <div class="button-group">
+          <dees-button status="normal">Normal</dees-button>
+          <dees-button status="pending">Processing...</dees-button>
+          <dees-button status="success">Success!</dees-button>
+          <dees-button status="error">Error!</dees-button>
+          <dees-button disabled>Disabled</dees-button>
+        </div>
+        
+        <div class="button-group" style="margin-top: 16px;">
+          <dees-button type="secondary" status="pending" size="sm">Small Loading</dees-button>
+          <dees-button type="outline" status="pending">Default Loading</dees-button>
+          <dees-button type="destructive" status="pending" size="lg">Large Loading</dees-button>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Set up click handlers with the output element
+      const output = elementArg.querySelector('#click-output');
+      
+      const clickMeBtn = elementArg.querySelector('dees-button:first-of-type');
+      const dataBtn = elementArg.querySelector('dees-button[type="secondary"]');
+      const asyncBtn = elementArg.querySelector('dees-button[type="destructive"]');
+      
+      if (clickMeBtn && output) {
+        clickMeBtn.addEventListener('clicked', () => {
+          output.textContent = `Clicked: Default button at ${new Date().toLocaleTimeString()}`;
+        });
+      }
+      
+      if (dataBtn && output) {
+        dataBtn.addEventListener('clicked', (e: CustomEvent) => {
+          output.textContent = `Clicked: Secondary button with data: ${e.detail.data}`;
+        });
+      }
+      
+      if (asyncBtn && output) {
+        asyncBtn.addEventListener('clicked', async () => {
+          output.textContent = 'Processing...';
+          await domtools.plugins.smartdelay.delayFor(2000);
+          output.textContent = 'Action completed!';
+        });
+      }
+    }}>
+      <dees-panel .title=${'6. Event Handling'} .subtitle=${'Interactive examples with click event handling'}>
+        <div class="button-group">
+          <dees-button>Click Me</dees-button>
+          <dees-button type="secondary" .eventDetailData=${'custom-data-123'}>
+            Click with Data
+          </dees-button>
+          <dees-button type="destructive">Async Action</dees-button>
+        </div>
+        
+        <div id="click-output" class="demo-output">
+          <em>Click a button to see the result...</em>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Set up form submission handling
+      const form = elementArg.querySelector('dees-form');
+      const output = elementArg.querySelector('#form-output');
+      
+      if (form && output) {
+        form.addEventListener('formData', (e: CustomEvent) => {
+          output.innerHTML = '<strong>Form submitted with data:</strong><br>' + 
+            JSON.stringify(e.detail.data, null, 2);
+        });
+      }
+      
+      // Track non-submit button clicks
+      const draftBtn = elementArg.querySelector('dees-button[type="secondary"]');
+      const cancelBtn = elementArg.querySelector('dees-button[type="ghost"]');
+      
+      if (draftBtn) {
+        draftBtn.addEventListener('clicked', () => {
+          console.log('Save Draft clicked');
+        });
+      }
+      
+      if (cancelBtn) {
+        cancelBtn.addEventListener('clicked', () => {
+          console.log('Cancel clicked');
+        });
+      }
+    }}>
+      <dees-panel .title=${'7. Form Integration'} .subtitle=${'Buttons working within forms with automatic spacing'}>
+        <dees-form>
+          <dees-input-text label="Name" key="name" required></dees-input-text>
+          <dees-input-text label="Email" key="email" type="email" required></dees-input-text>
+          <dees-input-text label="Message" key="message" isMultiline></dees-input-text>
+          
+          <dees-button type="secondary">Save Draft</dees-button>
+          <dees-button type="ghost">Cancel</dees-button>
+          <dees-form-submit>Submit Form</dees-form-submit>
+        </dees-form>
+        
+        <div id="form-output" class="demo-output" style="white-space: pre-wrap;">
+          <em>Submit the form to see the data...</em>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Log legacy type mappings
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach((button) => {
+        const type = button.getAttribute('type');
+        if (type) {
+          console.log(`Legacy type "${type}" is supported for backward compatibility`);
+        }
+      });
+    }}>
+      <dees-panel .title=${'8. Backward Compatibility'} .subtitle=${'Old button types are automatically mapped to new variants'}>
+        <div class="button-group">
+          <dees-button type="normal">Normal → Default</dees-button>
+          <dees-button type="highlighted">Highlighted → Destructive</dees-button>
+          <dees-button type="discreet">Discreet → Outline</dees-button>
+          <dees-button type="big">Big → Large Size</dees-button>
+        </div>
+        
+        <p style="margin-top: 16px; font-size: 14px; color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};">
+          These legacy type values are maintained for backward compatibility but we recommend using the new variant system.
+        </p>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Track action group clicks
+      const actionGroup = elementArg.querySelectorAll('.vertical-group')[0];
+      const dangerGroup = elementArg.querySelectorAll('.vertical-group')[1];
+      
+      if (actionGroup) {
+        const buttons = actionGroup.querySelectorAll('dees-button');
+        buttons.forEach((button, index) => {
+          button.addEventListener('clicked', () => {
+            const action = ['Save Changes', 'Discard', 'Help'][index];
+            console.log(`Action group: ${action} clicked`);
+          });
+        });
+      }
+      
+      if (dangerGroup) {
+        const buttons = dangerGroup.querySelectorAll('dees-button');
+        buttons.forEach((button, index) => {
+          button.addEventListener('clicked', () => {
+            const action = ['Delete Account', 'Archive Data', 'Not Available'][index];
+            if (index !== 2) { // Skip disabled button
+              console.log(`Danger zone: ${action} clicked`);
+            }
+          });
+        });
+      }
+    }}>
+      <dees-panel .title=${'9. Advanced Examples'} .subtitle=${'Complex button configurations and real-world use cases'}>
+        <div class="horizontal-group">
+          <div class="vertical-group">
+            <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Action Group</h4>
+            <dees-button type="default" size="sm">
+              <dees-icon icon="lucide:Save"></dees-icon>
+              Save Changes
+            </dees-button>
+            <dees-button type="secondary" size="sm">
+              <dees-icon icon="lucide:Undo2"></dees-icon>
+              Discard
+            </dees-button>
+            <dees-button type="ghost" size="sm">
+              <dees-icon icon="lucide:HelpCircle"></dees-icon>
+              Help
+            </dees-button>
+          </div>
+
+          <div class="vertical-group">
+            <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Danger Zone</h4>
+            <dees-button type="destructive" size="sm">
+              <dees-icon icon="fa:trash"></dees-icon>
+              Delete Account
+            </dees-button>
+            <dees-button type="outline" size="sm">
+              <dees-icon icon="lucide:Archive"></dees-icon>
+              Archive Data
+            </dees-button>
+            <dees-button type="ghost" size="sm" disabled>
+              <dees-icon icon="lucide:Ban"></dees-icon>
+              Not Available
+            </dees-button>
+          </div>
+        </div>
+        
+        <div style="margin-top: 24px;">
+          <h4 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 500;">Code Example:</h4>
+          <div class="code-snippet">
+            &lt;dees-button type="default" size="sm" icon="lucide:Save" @clicked="\${handleClick}"&gt;<br>
+            &nbsp;&nbsp;Save Changes<br>
+            &lt;/dees-button&gt;
+          </div>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+  </div>
+`;

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

@@ -0,0 +1,467 @@
+import {
+  customElement,
+  html,
+  DeesElement,
+  property,
+  type TemplateResult,
+  cssManager,
+  css,
+  type CSSResult,
+  unsafeCSS,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-button.demo.js';
+import { themeDefaultStyles } from '../../00theme.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-button': DeesButton;
+  }
+}
+
+@customElement('dees-button')
+export class DeesButton extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Button'];
+
+  @property({
+    reflect: true,
+    hasChanged() {
+      return true;
+    }
+  })
+  accessor text: string;
+
+  @property()
+  accessor eventDetailData: string;
+
+  @property({
+    type: Boolean,
+    reflect: true,
+  })
+  accessor disabled = false;
+
+  @property({
+    type: Boolean
+  })
+  accessor isHidden = false;
+
+  @property({
+    type: String
+  })
+  accessor type: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link' | 'normal' | 'highlighted' | 'discreet' | 'big' = 'default';
+
+  @property({
+    type: String
+  })
+  accessor size: 'default' | 'sm' | 'lg' | 'icon' = 'default';
+
+  @property({
+    type: String
+  })
+  accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+
+  @property({
+    type: Boolean,
+    reflect: true
+  })
+  accessor insideForm: boolean = false;
+
+  @property({ type: String, reflect: true })
+  accessor icon: string;
+
+  @property({ type: String, reflect: true })
+  accessor iconPosition: 'left' | 'right' = 'left';
+
+  constructor() {
+    super();
+  }
+
+  public async connectedCallback() {
+    await super.connectedCallback();
+    // Auto-detect if inside a form
+    if (!this.insideForm && this.closest('dees-form')) {
+      this.insideForm = true;
+    }
+  }
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
+      :host {
+        display: inline-block;
+        box-sizing: border-box;
+        font-family: inherit;
+      }
+      :host([hidden]) {
+        display: none;
+      }
+
+      /* Form spacing styles */
+      :host([inside-form]) {
+        margin-bottom: 16px;
+      }
+      
+      :host([inside-form]:last-child) {
+        margin-bottom: 0;
+      }
+      
+      dees-form[horizontal-layout] :host([inside-form]) {
+        display: inline-block;
+        margin-right: 16px;
+        margin-bottom: 0;
+      }
+      
+      dees-form[horizontal-layout] :host([inside-form]:last-child) {
+        margin-right: 0;
+      }
+
+      .button {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        white-space: nowrap;
+        border-radius: 6px;
+        font-weight: 500;
+        transition: all 0.15s ease;
+        cursor: pointer;
+        user-select: none;
+        outline: none;
+        letter-spacing: -0.01em;
+        gap: 8px;
+      }
+
+      /* Size variants */
+      .button.size-default {
+        height: 36px;
+        padding: 0 16px;
+        font-size: 14px;
+      }
+
+      .button.size-sm {
+        height: 32px;
+        padding: 0 12px;
+        font-size: 13px;
+      }
+
+      .button.size-lg {
+        height: 44px;
+        padding: 0 24px;
+        font-size: 16px;
+      }
+
+      .button.size-icon {
+        height: 36px;
+        width: 36px;
+        padding: 0;
+      }
+
+      /* Default variant */
+      .button.default {
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 11.8%)')};
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
+        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+      }
+
+      .button.default:hover:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 10.2%)')};
+        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 85%)', 'hsl(215 20.2% 20%)')};
+      }
+
+      .button.default:active:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 9%)')};
+      }
+
+      /* Destructive variant */
+      .button.destructive {
+        background: hsl(0 84.2% 60.2%);
+        color: hsl(0 0% 98%);
+        border: 1px solid transparent;
+      }
+
+      .button.destructive:hover:not(.disabled) {
+        background: hsl(0 84.2% 56.2%);
+      }
+
+      .button.destructive:active:not(.disabled) {
+        background: hsl(0 84.2% 52.2%);
+      }
+
+      /* Outline variant */
+      .button.outline {
+        background: transparent;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 21.8%)')};
+      }
+
+      .button.outline:hover:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 85%)', 'hsl(215 20.2% 26.8%)')};
+      }
+
+      .button.outline:active:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 13.8%)')};
+      }
+
+      /* Secondary variant */
+      .button.secondary {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        border: 1px solid transparent;
+      }
+
+      .button.secondary:hover:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 13.8%)')};
+      }
+
+      .button.secondary:active:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(214.3 31.8% 85%)', 'hsl(215 20.2% 11.8%)')};
+      }
+
+      /* Ghost variant */
+      .button.ghost {
+        background: transparent;
+        color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        border: 1px solid transparent;
+      }
+
+      .button.ghost:hover:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+      }
+
+      .button.ghost:active:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 13.8%)')};
+      }
+
+      /* Link variant */
+      .button.link {
+        background: transparent;
+        color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(213.1 93.9% 67.8%)')};
+        border: none;
+        text-decoration: underline;
+        text-decoration-color: transparent;
+        height: auto;
+        padding: 0;
+      }
+
+      .button.link:hover:not(.disabled) {
+        text-decoration-color: currentColor;
+      }
+
+      /* Status states */
+      .button.pending,
+      .button.success,
+      .button.error {
+        pointer-events: none;
+        padding-left: 36px; /* Space for spinner */
+      }
+      
+      .button.size-sm.pending,
+      .button.size-sm.success,
+      .button.size-sm.error {
+        padding-left: 32px;
+      }
+      
+      .button.size-lg.pending,
+      .button.size-lg.success,
+      .button.size-lg.error {
+        padding-left: 44px;
+      }
+
+      .button.pending {
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(213.1 93.9% 67.8% / 0.2)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(213.1 93.9% 67.8%)')};
+        border: 1px solid transparent;
+      }
+
+      .button.success {
+        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3% / 0.2)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(142.1 70.6% 45.3%)')};
+        border: 1px solid transparent;
+      }
+
+      .button.error {
+        background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 62.8% 70.6% / 0.2)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 62.8% 70.6%)')};
+        border: 1px solid transparent;
+      }
+
+      /* Disabled state */
+      .button.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+
+      /* Hidden state */
+      .button.hidden {
+        display: none;
+      }
+
+      /* Focus state */
+      .button:focus-visible {
+        outline: 2px solid ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(213.1 93.9% 67.8%)')};
+        outline-offset: 2px;
+      }
+
+      /* Loading spinner */
+      dees-spinner {
+        position: absolute;
+        left: 10px;
+        width: 16px;
+        height: 16px;
+      }
+      
+      .button.size-sm dees-spinner {
+        left: 8px;
+        width: 14px;
+        height: 14px;
+      }
+      
+      .button.size-lg dees-spinner {
+        left: 14px;
+        width: 18px;
+        height: 18px;
+      }
+      
+      /* Icon sizing within buttons */
+      .button dees-icon {
+        width: 16px;
+        height: 16px;
+        flex-shrink: 0;
+      }
+      
+      .button.size-sm dees-icon {
+        width: 14px;
+        height: 14px;
+      }
+      
+      .button.size-lg dees-icon {
+        width: 18px;
+        height: 18px;
+      }
+
+      /* Text alignment */
+      .textbox {
+        display: flex;
+        align-items: center;
+      }
+
+    `,
+  ];
+
+  /**
+   * Extracts icon and text from light DOM and sets properties
+   */
+  private extractLightDom(): void {
+    const iconElement = this.querySelector('dees-icon') as any;
+
+    // Get all text content from light DOM
+    const textContent = Array.from(this.childNodes)
+      .filter(node => node.nodeType === Node.TEXT_NODE)
+      .map(node => node.textContent?.trim())
+      .filter(Boolean)
+      .join(' ');
+
+    if (textContent && !this.text) {
+      this.text = textContent;
+    }
+
+    if (iconElement) {
+      // Get icon value
+      const iconValue = iconElement.icon || iconElement.getAttribute('icon') ||
+                        (iconElement.iconFA ? `fa:${iconElement.iconFA}` : null);
+
+      if (iconValue) {
+        // Determine position based on DOM order
+        const children = Array.from(this.childNodes);
+        const iconIndex = children.indexOf(iconElement);
+        const textNodes = children.filter(node =>
+          node.nodeType === Node.TEXT_NODE && node.textContent?.trim()
+        );
+
+        if (textNodes.length > 0) {
+          const firstTextIndex = children.indexOf(textNodes[0]);
+          this.iconPosition = iconIndex < firstTextIndex ? 'left' : 'right';
+        }
+
+        // Set the icon property
+        this.icon = iconValue;
+      }
+
+      // Remove the light DOM icon element
+      iconElement.remove();
+    }
+
+    // Clear all remaining light DOM
+    this.innerHTML = '';
+  }
+
+  public render(): TemplateResult {
+    // Map old types to new types for backward compatibility
+    const typeMap: {[key: string]: string} = {
+      'normal': 'default',
+      'highlighted': 'destructive',
+      'discreet': 'outline',
+      'big': 'default' // Will use size instead
+    };
+
+    const actualType = typeMap[this.type] || this.type;
+    const actualSize = this.type === 'big' ? 'lg' : this.size;
+
+    const leftIcon = this.iconPosition === 'left' && this.icon
+      ? html`<dees-icon .icon=${this.icon}></dees-icon>`
+      : '';
+    const rightIcon = this.iconPosition === 'right' && this.icon
+      ? html`<dees-icon .icon=${this.icon}></dees-icon>`
+      : '';
+
+    // For icon-only buttons, hide the textbox
+    const isIconOnly = actualSize === 'icon' && this.icon;
+
+    return html`
+      <div
+        class="button ${this.isHidden ? 'hidden' : ''} ${actualType} size-${actualSize} ${this.status} ${this.disabled
+          ? 'disabled'
+          : ''}"
+        @click="${this.dispatchClick}"
+      >
+        ${this.status === 'normal' ? html``: html`
+          <dees-spinner
+            .bnw=${true}
+            status="${this.status}"
+            size="${actualSize === 'sm' ? 14 : actualSize === 'lg' ? 18 : 16}"
+          ></dees-spinner>
+        `}
+        ${leftIcon}
+        ${isIconOnly ? '' : html`<div class="textbox">${this.text || 'Button'}</div>`}
+        ${rightIcon}
+      </div>
+    `;
+  }
+
+  public async dispatchClick() {
+    if (this.disabled) {
+      return;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('clicked', {
+        detail: {
+          data: this.eventDetailData,
+        },
+        bubbles: true,
+      })
+    );
+  }
+
+  public async firstUpdated() {
+    // Extract light DOM content (icon + text) and set as properties
+    this.extractLightDom();
+  }
+}

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

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

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

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

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

@@ -0,0 +1,672 @@
+import {
+  DeesElement,
+  customElement,
+  property,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './demo.js';
+import { chartAreaStyles } from './styles.js';
+import { renderChartArea } from './template.js';
+
+import type ApexCharts from 'apexcharts';
+import { DeesServiceLibLoader } from '../../../services/index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-area': DeesChartArea;
+  }
+}
+
+@customElement('dees-chart-area')
+export class DeesChartArea extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Chart'];
+
+  // instance
+  @state()
+  accessor chart: ApexCharts;
+
+  @property()
+  accessor label: string = 'Untitled Chart';
+
+  @property({ type: Array })
+  accessor series: ApexAxisChartSeries = [];
+
+  // Override getter to return internal chart data
+  get chartSeries(): ApexAxisChartSeries {
+    return this.internalChartData.length > 0 ? this.internalChartData : this.series;
+  }
+
+  @property({ attribute: false })
+  accessor yAxisFormatter: (value: number) => string = (val) => `${val} Mbps`;
+
+  @property({ type: Number })
+  accessor rollingWindow: number = 0; // 0 means no rolling window
+
+  @property({ type: Boolean })
+  accessor realtimeMode: boolean = false;
+
+  @property({ type: String })
+  accessor yAxisScaling: 'fixed' | 'dynamic' | 'percentage' = 'dynamic';
+
+  @property({ type: Number })
+  accessor yAxisMax: number = 100; // Used when yAxisScaling is 'fixed' or 'percentage'
+
+  @property({ type: Number })
+  accessor autoScrollInterval: number = 1000; // Auto-scroll interval in milliseconds (0 to disable)
+
+  private resizeObserver: ResizeObserver;
+  private resizeTimeout: number;
+  private internalChartData: ApexAxisChartSeries = [];
+  private autoScrollTimer: number | null = null;
+  private readonly DEBUG_RESIZE = false; // Set to true to enable resize debugging
+  
+  // Chart color schemes
+  private readonly CHART_COLORS = {
+    dark: [
+      'hsl(217.2 91.2% 59.8%)', // Blue
+      'hsl(173.4 80.4% 40%)',   // Teal
+      'hsl(280.3 87.4% 66.7%)', // Purple
+      'hsl(24.6 95% 53.1%)',    // Orange
+    ],
+    light: [
+      'hsl(222.2 47.4% 51.2%)', // Blue (shadcn primary)
+      'hsl(142.1 76.2% 36.3%)', // Green (shadcn success)
+      'hsl(280.3 47.7% 50.2%)', // Purple (muted)
+      'hsl(20.5 90.2% 48.2%)',  // Orange (shadcn destructive variant)
+    ]
+  };
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+
+    this.resizeObserver = new ResizeObserver((entries) => {
+      // Debounce resize calls to prevent excessive updates
+      if (this.resizeTimeout) {
+        clearTimeout(this.resizeTimeout);
+      }
+      
+      this.resizeTimeout = window.setTimeout(() => {
+        // Simply resize if we have a chart, since we're only observing the mainbox
+        if (this.chart) {
+          // Log resize event for debugging
+          if (this.DEBUG_RESIZE && entries.length > 0) {
+            const entry = entries[0];
+            console.log('DeesChartArea - Resize detected:', {
+              width: entry.contentRect.width,
+              height: entry.contentRect.height
+            });
+          }
+          this.resizeChart();
+        }
+      }, 100); // 100ms debounce
+    });
+    
+    // Note: ResizeObserver is now set up after chart initialization in firstUpdated()
+    // to ensure proper timing and avoid race conditions
+    
+    this.registerGarbageFunction(async () => {
+      if (this.resizeTimeout) {
+        clearTimeout(this.resizeTimeout);
+      }
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
+      this.stopAutoScroll();
+      
+      // Critical: Destroy chart instance to prevent memory leak
+      if (this.chart) {
+        try {
+          this.chart.destroy();
+          this.chart = null;
+        } catch (error) {
+          console.error('Error destroying chart:', error);
+        }
+      }
+    });
+  }
+  
+  public async connectedCallback() {
+    super.connectedCallback();
+    
+    // Trigger resize when element is connected to DOM
+    // This helps with dynamically added charts
+    if (this.chart) {
+      // Wait a frame for layout to settle
+      await new Promise(resolve => requestAnimationFrame(resolve));
+      await this.resizeChart();
+    }
+  }
+
+  public static styles = chartAreaStyles;
+
+  public render(): TemplateResult {
+    return renderChartArea(this);
+  }
+
+
+
+  public async firstUpdated() {
+    await this.domtoolsPromise;
+
+    // Load ApexCharts from CDN
+    const ApexChartsLib = await DeesServiceLibLoader.getInstance().loadApexCharts();
+
+    // Wait for next animation frame to ensure layout is complete
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    
+    // Get actual dimensions of the container
+    const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
+    const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
+    
+    if (!mainbox || !chartContainer) {
+      console.error('Chart containers not found');
+      return;
+    }
+    
+    // Calculate initial dimensions
+    const styleChartContainer = window.getComputedStyle(chartContainer);
+    const paddingTop = parseInt(styleChartContainer.paddingTop, 10);
+    const paddingBottom = parseInt(styleChartContainer.paddingBottom, 10);
+    const paddingLeft = parseInt(styleChartContainer.paddingLeft, 10);
+    const paddingRight = parseInt(styleChartContainer.paddingRight, 10);
+    
+    const initialWidth = mainbox.clientWidth - paddingLeft - paddingRight;
+    const initialHeight = mainbox.offsetHeight - paddingTop - paddingBottom;
+    
+    // Use provided series data or default demo data
+    const chartSeries = this.series.length > 0 ? this.series : [
+      {
+        name: 'cpu',
+        data: [
+          { x: '2025-01-15T03:00:00', y: 25 },
+          { x: '2025-01-15T07:00:00', y: 30 },
+          { x: '2025-01-15T11:00:00', y: 20 },
+          { x: '2025-01-15T15:00:00', y: 35 },
+          { x: '2025-01-15T19:00:00', y: 25 },
+        ],
+      },
+      {
+        name: 'memory',
+        data: [
+          { x: '2025-01-15T03:00:00', y: 10 },
+          { x: '2025-01-15T07:00:00', y: 12 },
+          { x: '2025-01-15T11:00:00', y: 10 },
+          { x: '2025-01-15T15:00:00', y: 30 },
+          { x: '2025-01-15T19:00:00', y: 40 },
+        ],
+      },
+    ];
+    
+    // Store internal data
+    this.internalChartData = chartSeries;
+    
+    // Get current theme
+    const isDark = !this.goBright;
+    const theme = isDark ? 'dark' : 'light';
+    
+    var options: ApexCharts.ApexOptions = {
+      series: chartSeries,
+      chart: {
+        width: initialWidth || 100, // Use actual width or fallback
+        height: initialHeight || 100, // Use actual height or fallback
+        type: 'area',
+        background: 'transparent', // Transparent background to inherit from container
+        toolbar: {
+          show: false, // This line disables the toolbar
+        },
+        animations: {
+          enabled: !this.realtimeMode, // Disable animations in realtime mode
+          speed: 400,
+          animateGradually: {
+            enabled: false, // Disable gradual animation for cleaner updates
+            delay: 0
+          },
+          dynamicAnimation: {
+            enabled: !this.realtimeMode,
+            speed: 350
+          }
+        },
+        zoom: {
+          enabled: false, // Disable zoom for cleaner interaction
+        },
+        selection: {
+          enabled: false, // Disable selection
+        },
+      },
+      dataLabels: {
+        enabled: false,
+      },
+      stroke: {
+        width: 2,
+        curve: 'smooth',
+      },
+      xaxis: {
+        type: 'datetime', // Time-series data
+        labels: {
+          format: 'HH:mm:ss', // Time formatting with seconds
+          datetimeUTC: false,
+          style: {
+            colors: [isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)'], // Label color
+            fontSize: '12px',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+            fontWeight: '400',
+          },
+        },
+        axisBorder: {
+          show: false, // Hide x-axis border
+        },
+        axisTicks: {
+          show: false, // Hide x-axis ticks
+        },
+      },
+      yaxis: {
+        min: 0,
+        max: this.yAxisScaling === 'dynamic' ? undefined : this.yAxisMax,
+        labels: {
+          formatter: this.yAxisFormatter,
+          style: {
+            colors: [isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)'], // Label color
+            fontSize: '12px',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+            fontWeight: '400',
+          },
+        },
+        axisBorder: {
+          show: false, // Hide y-axis border
+        },
+        axisTicks: {
+          show: false, // Hide y-axis ticks
+        },
+      },
+      tooltip: {
+        shared: true, // Enables the tooltip to display across series
+        intersect: false, // Allows hovering anywhere on the chart
+        followCursor: true, // Makes tooltip follow mouse even between points
+        x: {
+          format: 'dd/MM/yy HH:mm',
+        },
+        custom: ({ series, dataPointIndex, w }: any) => {
+          // Iterate through each series and get its value
+          // Note: We can't access component instance here, so we'll use w.config.theme.mode
+          const currentTheme = w.config.theme.mode;
+          const isDarkMode = currentTheme === 'dark';
+          const bgColor = isDarkMode ? 'hsl(0 0% 9%)' : 'hsl(0 0% 100%)';
+          const textColor = isDarkMode ? 'hsl(0 0% 95%)' : 'hsl(0 0% 9%)';
+          const borderColor = isDarkMode ? 'hsl(0 0% 14.9%)' : 'hsl(0 0% 89.8%)';
+          
+          // Get formatter from chart config
+          const formatter = w.config.yaxis[0]?.labels?.formatter || ((val: number) => val.toString());
+          
+          let tooltipContent = `<div style="padding: 12px; background: ${bgColor}; color: ${textColor}; border-radius: 6px; box-shadow: 0 2px 8px 0 hsl(0 0% 0% / ${isDarkMode ? '0.2' : '0.1'}); border: 1px solid ${borderColor};font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 12px;">`;
+
+          series.forEach((s: number[], index: number) => {
+            const label = w.globals.seriesNames[index]; // Get series label
+            const value = s[dataPointIndex]; // Get value at data point
+            const color = w.globals.colors[index];
+            const formattedValue = formatter(value);
+            tooltipContent += `<div style="display: flex; align-items: center; gap: 8px; margin: ${index > 0 ? '6px' : '0'} 0;">
+              <span style="display: inline-block; width: 10px; height: 10px; background: ${color}; border-radius: 2px;"></span>
+              <span style="font-weight: 500;">${label}:</span>
+              <span style="margin-left: auto; font-weight: 600;">${formattedValue}</span>
+            </div>`;
+          });
+
+          tooltipContent += `</div>`;
+          return tooltipContent;
+        },
+      },
+      grid: {
+        xaxis: {
+          lines: {
+            show: false, // Hide vertical grid lines for cleaner look
+          },
+        },
+        yaxis: {
+          lines: {
+            show: true,
+          },
+        },
+        borderColor: isDark ? 'hsl(0 0% 14.9%)' : 'hsl(0 0% 94%)', // Very subtle grid lines
+        strokeDashArray: 0, // Solid line
+        padding: {
+          top: 10,
+          right: 20,
+          bottom: 10,
+          left: 20,
+        },
+      },
+      fill: {
+        type: 'gradient', // Gradient fill for the area
+        gradient: {
+          shade: isDark ? 'dark' : 'light',
+          type: 'vertical',
+          shadeIntensity: 0.1,
+          opacityFrom: isDark ? 0.2 : 0.3,
+          opacityTo: 0,
+          stops: [0, 100],
+        },
+      },
+      colors: isDark ? this.CHART_COLORS.dark : this.CHART_COLORS.light,
+      theme: {
+        mode: theme,
+      },
+    };
+    
+    try {
+      this.chart = new ApexChartsLib(this.shadowRoot.querySelector('.chartContainer'), options);
+      await this.chart.render();
+      
+      // Give the chart a moment to fully initialize before resizing
+      await new Promise(resolve => setTimeout(resolve, 100));
+      await this.resizeChart();
+      
+      // Ensure resize observer is watching the mainbox
+      const mainbox = this.shadowRoot.querySelector('.mainbox');
+      if (mainbox && this.resizeObserver) {
+        // Disconnect any previous observations
+        this.resizeObserver.disconnect();
+        // Start observing the mainbox
+        this.resizeObserver.observe(mainbox);
+        if (this.DEBUG_RESIZE) {
+          console.log('DeesChartArea - ResizeObserver attached to mainbox');
+        }
+      }
+    } catch (error) {
+      console.error('Failed to initialize chart:', error);
+      // Optionally, you could set an error state here
+      // this.chartState = 'error';
+      // this.errorMessage = 'Failed to initialize chart';
+    }
+  }
+
+  public async updated(changedProperties: Map<string, any>) {
+    super.updated(changedProperties);
+    
+    // Update chart theme when goBright changes
+    if (changedProperties.has('goBright') && this.chart) {
+      await this.updateChartTheme();
+    }
+    
+    // Update chart if series data changes
+    if (changedProperties.has('series') && this.chart && this.series.length > 0) {
+      await this.updateSeries(this.series);
+    }
+    
+    // Update y-axis formatter if it changes
+    if (changedProperties.has('yAxisFormatter') && this.chart) {
+      await this.chart.updateOptions({
+        yaxis: {
+          labels: {
+            formatter: this.yAxisFormatter,
+          },
+        },
+      });
+    }
+    
+    // Handle realtime mode changes
+    if (changedProperties.has('realtimeMode') && this.chart) {
+      await this.chart.updateOptions({
+        chart: {
+          animations: {
+            enabled: !this.realtimeMode,
+            speed: 400,
+            animateGradually: {
+              enabled: false,
+              delay: 0
+            },
+            dynamicAnimation: {
+              enabled: !this.realtimeMode,
+              speed: 350
+            }
+          }
+        }
+      });
+      
+      // Start/stop auto-scroll based on realtime mode
+      if (this.realtimeMode && this.rollingWindow > 0 && this.autoScrollInterval > 0) {
+        this.startAutoScroll();
+      } else {
+        this.stopAutoScroll();
+      }
+    }
+    
+    // Handle auto-scroll interval changes
+    if (changedProperties.has('autoScrollInterval') && this.chart) {
+      this.stopAutoScroll();
+      if (this.realtimeMode && this.rollingWindow > 0 && this.autoScrollInterval > 0) {
+        this.startAutoScroll();
+      }
+    }
+    
+    // Handle y-axis scaling changes
+    if ((changedProperties.has('yAxisScaling') || changedProperties.has('yAxisMax')) && this.chart) {
+      await this.chart.updateOptions({
+        yaxis: {
+          min: 0,
+          max: this.yAxisScaling === 'dynamic' ? undefined : this.yAxisMax
+        }
+      });
+    }
+  }
+
+  public async updateSeries(newSeries: ApexAxisChartSeries, animate: boolean = true) {
+    if (!this.chart) {
+      return;
+    }
+    
+    try {
+      // Store the new data first
+      this.internalChartData = newSeries;
+      
+      // Handle rolling window if enabled
+      if (this.rollingWindow > 0 && this.realtimeMode) {
+        const now = Date.now();
+        const cutoffTime = now - this.rollingWindow;
+        
+        // Filter data to only include points within the rolling window
+        const filteredSeries = newSeries.map(series => ({
+          name: series.name,
+          data: (series.data as any[]).filter(point => {
+            if (typeof point === 'object' && point !== null && 'x' in point) {
+              return new Date(point.x).getTime() > cutoffTime;
+            }
+            return false;
+          })
+        }));
+        
+        // Only update if we have data
+        if (filteredSeries.some(s => s.data.length > 0)) {
+          // Handle y-axis scaling first
+          if (this.yAxisScaling === 'dynamic') {
+            const allValues = filteredSeries.flatMap(s => (s.data as any[]).map(d => d.y));
+            if (allValues.length > 0) {
+              const maxValue = Math.max(...allValues);
+              const dynamicMax = Math.ceil(maxValue * 1.1);
+              await this.chart.updateOptions({
+                yaxis: {
+                  min: 0,
+                  max: dynamicMax
+                }
+              }, false, false);
+            }
+          }
+          
+          await this.chart.updateSeries(filteredSeries, false);
+        }
+      } else {
+        await this.chart.updateSeries(newSeries, animate);
+      }
+    } catch (error) {
+      console.error('Failed to update chart series:', error);
+    }
+  }
+  
+  // Update just the x-axis for smooth scrolling in realtime mode
+  // Public for advanced usage in demos, but typically handled automatically
+  public async updateTimeWindow() {
+    if (!this.chart || this.rollingWindow <= 0) {
+      return;
+    }
+    
+    const now = Date.now();
+    const cutoffTime = now - this.rollingWindow;
+    
+    await this.chart.updateOptions({
+      xaxis: {
+        min: cutoffTime,
+        max: now,
+        labels: {
+          format: 'HH:mm:ss',
+          datetimeUTC: false,
+          style: {
+            colors: [!this.goBright ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)'],
+            fontSize: '12px',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+            fontWeight: '400',
+          },
+        },
+        tickAmount: 6,
+      }
+    }, false, false);
+  }
+
+  public async appendData(newData: { data: any[] }[]) {
+    if (!this.chart) {
+      return;
+    }
+    
+    // Use ApexCharts' appendData method for smoother real-time updates
+    this.chart.appendData(newData);
+  }
+  
+  public async updateOptions(options: ApexCharts.ApexOptions, redrawPaths?: boolean, animate?: boolean) {
+    if (!this.chart) {
+      return;
+    }
+    
+    return this.chart.updateOptions(options, redrawPaths, animate);
+  }
+
+  public async resizeChart() {
+    if (!this.chart) {
+      return;
+    }
+    
+    if (this.DEBUG_RESIZE) {
+      console.log('DeesChartArea - resizeChart called');
+    }
+    
+    try {
+      const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
+      const chartContainer: HTMLDivElement = this.shadowRoot.querySelector('.chartContainer');
+      
+      if (!mainbox || !chartContainer) {
+        return;
+      }
+
+      // Force layout recalculation
+      void mainbox.offsetHeight;
+
+      // Get computed style of the element
+      const styleChartContainer = window.getComputedStyle(chartContainer);
+
+      // Extract padding values
+      const paddingTop = parseInt(styleChartContainer.paddingTop, 10);
+      const paddingBottom = parseInt(styleChartContainer.paddingBottom, 10);
+      const paddingLeft = parseInt(styleChartContainer.paddingLeft, 10);
+      const paddingRight = parseInt(styleChartContainer.paddingRight, 10);
+
+      // Calculate the actual width and height to use, subtracting padding
+      const actualWidth = mainbox.clientWidth - paddingLeft - paddingRight;
+      const actualHeight = mainbox.offsetHeight - paddingTop - paddingBottom;
+      
+      // Validate dimensions
+      if (actualWidth > 0 && actualHeight > 0) {
+        if (this.DEBUG_RESIZE) {
+          console.log('DeesChartArea - Updating chart dimensions:', {
+            width: actualWidth,
+            height: actualHeight
+          });
+        }
+        
+        await this.chart.updateOptions({
+          chart: {
+            width: actualWidth,
+            height: actualHeight,
+          },
+        }, true, false); // Redraw paths but don't animate
+      }
+    } catch (error) {
+      console.error('Failed to resize chart:', error);
+    }
+  }
+  
+  /**
+   * Manually trigger a chart resize. Useful when automatic detection doesn't work.
+   * This is a convenience method that can be called from outside the component.
+   */
+  public async forceResize() {
+    await this.resizeChart();
+  }
+  
+  private startAutoScroll() {
+    if (this.autoScrollTimer) {
+      return; // Already running
+    }
+    
+    this.autoScrollTimer = window.setInterval(() => {
+      this.updateTimeWindow();
+    }, this.autoScrollInterval);
+  }
+  
+  private stopAutoScroll() {
+    if (this.autoScrollTimer) {
+      window.clearInterval(this.autoScrollTimer);
+      this.autoScrollTimer = null;
+    }
+  }
+  
+  private async updateChartTheme() {
+    if (!this.chart) {
+      return;
+    }
+    
+    const isDark = !this.goBright;
+    const theme = isDark ? 'dark' : 'light';
+    
+    await this.chart.updateOptions({
+      theme: {
+        mode: theme,
+      },
+      colors: isDark ? this.CHART_COLORS.dark : this.CHART_COLORS.light,
+      xaxis: {
+        labels: {
+          style: {
+            colors: [isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)'],
+          },
+        },
+      },
+      yaxis: {
+        labels: {
+          style: {
+            colors: [isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)'],
+          },
+        },
+      },
+      grid: {
+        borderColor: isDark ? 'hsl(0 0% 14.9%)' : 'hsl(0 0% 94%)',
+      },
+      fill: {
+        gradient: {
+          shade: isDark ? 'dark' : 'light',
+          opacityFrom: isDark ? 0.2 : 0.3,
+        },
+      },
+    });
+  }
+}

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

@@ -0,0 +1,484 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { DeesChartArea } from './component.js';
+import '@design.estate/dees-wcctools/demotools';
+import './component.js';
+
+export const demoFunc = () => {
+  // Initial dataset values
+  const initialDatasets = {
+    system: {
+      label: 'System Usage (%)',
+      series: [
+        {
+          name: 'CPU',
+          data: [
+            { x: new Date(Date.now() - 300000).toISOString(), y: 25 },
+            { x: new Date(Date.now() - 240000).toISOString(), y: 30 },
+            { x: new Date(Date.now() - 180000).toISOString(), y: 28 },
+            { x: new Date(Date.now() - 120000).toISOString(), y: 35 },
+            { x: new Date(Date.now() - 60000).toISOString(), y: 32 },
+            { x: new Date().toISOString(), y: 38 },
+          ],
+        },
+        {
+          name: 'Memory',
+          data: [
+            { x: new Date(Date.now() - 300000).toISOString(), y: 45 },
+            { x: new Date(Date.now() - 240000).toISOString(), y: 48 },
+            { x: new Date(Date.now() - 180000).toISOString(), y: 46 },
+            { x: new Date(Date.now() - 120000).toISOString(), y: 52 },
+            { x: new Date(Date.now() - 60000).toISOString(), y: 50 },
+            { x: new Date().toISOString(), y: 55 },
+          ],
+        },
+      ],
+    },
+  };
+  
+  const initialFormatters = {
+    system: (val: number) => `${val}%`,
+  };
+  
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Get the chart elements
+      const chartElement = elementArg.querySelector('#main-chart') as DeesChartArea;
+      const connectionsChartElement = elementArg.querySelector('#connections-chart') as DeesChartArea;
+      let intervalId: number;
+      let connectionsIntervalId: number;
+      let currentDataset = 'system';
+
+      // Y-axis formatters for different datasets
+      const formatters = {
+        system: (val: number) => `${val}%`,
+        network: (val: number) => `${val} Mbps`,
+        sales: (val: number) => `$${val.toLocaleString()}`,
+      };
+      
+      // Time window configuration (in milliseconds)
+      const TIME_WINDOW = 2 * 60 * 1000; // 2 minutes
+      const UPDATE_INTERVAL = 1000; // 1 second
+      const DATA_POINT_INTERVAL = 5000; // Show data points every 5 seconds
+      
+      // Store previous values for smooth transitions
+      let previousValues = {
+        cpu: 30,
+        memory: 50,
+        download: 150,
+        upload: 30,
+        connections: 150
+      };
+
+      // Generate initial data points for time window
+      const generateInitialData = (baseValue: number, variance: number, interval: number = DATA_POINT_INTERVAL) => {
+        const data = [];
+        const now = Date.now();
+        const pointCount = Math.floor(TIME_WINDOW / interval);
+        
+        for (let i = pointCount; i >= 0; i--) {
+          const timestamp = new Date(now - (i * interval)).toISOString();
+          const value = baseValue + (Math.random() - 0.5) * variance;
+          data.push({ x: timestamp, y: Math.round(value) });
+        }
+        return data;
+      };
+      
+      // Different datasets to showcase
+      const datasets = {
+        system: {
+          label: 'System Usage (%)',
+          series: [
+            {
+              name: 'CPU',
+              data: generateInitialData(previousValues.cpu, 10),
+            },
+            {
+              name: 'Memory',
+              data: generateInitialData(previousValues.memory, 8),
+            },
+          ],
+        },
+        network: {
+          label: 'Network Traffic (Mbps)',
+          series: [
+            {
+              name: 'Download',
+              data: generateInitialData(previousValues.download, 30),
+            },
+            {
+              name: 'Upload',
+              data: generateInitialData(previousValues.upload, 10),
+            },
+          ],
+        },
+        sales: {
+          label: 'Sales Analytics',
+          series: [
+            {
+              name: 'Revenue',
+              data: [
+                { x: '2025-01-01', y: 45000 },
+                { x: '2025-01-02', y: 52000 },
+                { x: '2025-01-03', y: 48000 },
+                { x: '2025-01-04', y: 61000 },
+                { x: '2025-01-05', y: 58000 },
+                { x: '2025-01-06', y: 65000 },
+              ],
+            },
+            {
+              name: 'Profit',
+              data: [
+                { x: '2025-01-01', y: 12000 },
+                { x: '2025-01-02', y: 14000 },
+                { x: '2025-01-03', y: 11000 },
+                { x: '2025-01-04', y: 18000 },
+                { x: '2025-01-05', y: 16000 },
+                { x: '2025-01-06', y: 20000 },
+              ],
+            },
+          ],
+        },
+      };
+
+      // Generate smooth value transitions
+      const getNextValue = (current: number, min: number, max: number, maxChange: number = 5) => {
+        // Add some randomness but keep it close to current value
+        const change = (Math.random() - 0.5) * maxChange * 2;
+        let newValue = current + change;
+        
+        // Apply some "pressure" to move towards center of range
+        const center = (min + max) / 2;
+        const pressure = (center - newValue) * 0.1;
+        newValue += pressure;
+        
+        // Ensure within bounds
+        newValue = Math.max(min, Math.min(max, newValue));
+        return Math.round(newValue);
+      };
+
+      // Track time of last data point
+      let lastDataPointTime = Date.now();
+      let connectionsLastUpdate = Date.now();
+      
+      // Add real-time data
+      const addRealtimeData = () => {
+        if (!chartElement) return;
+        
+        const now = Date.now();
+        
+        // Only add new data point every DATA_POINT_INTERVAL
+        const shouldAddPoint = (now - lastDataPointTime) >= DATA_POINT_INTERVAL;
+        
+        if (shouldAddPoint) {
+          lastDataPointTime = now;
+          const newTimestamp = new Date(now).toISOString();
+          
+          // Generate smooth transitions for new values
+          if (currentDataset === 'system') {
+            // Generate new values
+            previousValues.cpu = getNextValue(previousValues.cpu, 20, 50, 3);
+            previousValues.memory = getNextValue(previousValues.memory, 40, 70, 2);
+            
+            // Get current data and add new points
+            const currentSeries = chartElement.chartSeries.map((series, index) => ({
+              name: series.name,
+              data: [
+                ...(series.data as Array<{x: any; y: any}>),
+                index === 0 
+                  ? { x: newTimestamp, y: previousValues.cpu }
+                  : { x: newTimestamp, y: previousValues.memory }
+              ]
+            }));
+            
+            chartElement.updateSeries(currentSeries, false);
+            
+          } else if (currentDataset === 'network') {
+            // Generate new values
+            previousValues.download = getNextValue(previousValues.download, 100, 200, 10);
+            previousValues.upload = getNextValue(previousValues.upload, 20, 50, 5);
+            
+            // Get current data and add new points
+            const currentSeries = chartElement.chartSeries.map((series, index) => ({
+              name: series.name,
+              data: [
+                ...(series.data as Array<{x: any; y: any}>),
+                index === 0 
+                  ? { x: newTimestamp, y: previousValues.download }
+                  : { x: newTimestamp, y: previousValues.upload }
+              ]
+            }));
+            
+            chartElement.updateSeries(currentSeries, false);
+          }
+        }
+      };
+
+      // Update connections chart data
+      const updateConnections = () => {
+        if (!connectionsChartElement) return;
+        
+        const now = Date.now();
+        const newTimestamp = new Date(now).toISOString();
+        
+        // Generate new connections value with discrete changes
+        const change = Math.floor(Math.random() * 21) - 10; // -10 to +10 connections
+        previousValues.connections = Math.max(50, Math.min(300, previousValues.connections + change));
+        
+        // Get current data and add new point
+        const currentSeries = connectionsChartElement.chartSeries;
+        const newData = [{
+          name: currentSeries[0]?.name || 'Connections',
+          data: [
+            ...(currentSeries[0]?.data as Array<{x: any; y: any}> || []),
+            { x: newTimestamp, y: previousValues.connections }
+          ]
+        }];
+        
+        connectionsChartElement.updateSeries(newData, false);
+      };
+
+      // Switch dataset
+      const switchDataset = (name: string) => {
+        currentDataset = name;
+        const dataset = datasets[name];
+        chartElement.label = dataset.label;
+        chartElement.series = dataset.series;
+        chartElement.yAxisFormatter = formatters[name];
+        
+        // Set appropriate y-axis scaling
+        if (name === 'system') {
+          chartElement.yAxisScaling = 'percentage';
+          chartElement.yAxisMax = 100;
+        } else if (name === 'network') {
+          chartElement.yAxisScaling = 'dynamic';
+        } else {
+          chartElement.yAxisScaling = 'dynamic';
+        }
+        
+        // Reset last data point time to get fresh data immediately
+        lastDataPointTime = Date.now() - DATA_POINT_INTERVAL;
+      };
+
+      // Start/stop real-time updates
+      const startRealtime = () => {
+        if (!intervalId && (currentDataset === 'system' || currentDataset === 'network')) {
+          chartElement.realtimeMode = true;
+          // Only add data every 5 seconds, chart auto-scrolls independently
+          intervalId = window.setInterval(() => addRealtimeData(), DATA_POINT_INTERVAL);
+        }
+        
+        // Start connections updates
+        if (!connectionsIntervalId) {
+          connectionsChartElement.realtimeMode = true;
+          // Update connections every second
+          connectionsIntervalId = window.setInterval(() => updateConnections(), UPDATE_INTERVAL);
+        }
+      };
+
+      const stopRealtime = () => {
+        if (intervalId) {
+          window.clearInterval(intervalId);
+          intervalId = null;
+          chartElement.realtimeMode = false;
+        }
+        
+        // Stop connections updates
+        if (connectionsIntervalId) {
+          window.clearInterval(connectionsIntervalId);
+          connectionsIntervalId = null;
+          connectionsChartElement.realtimeMode = false;
+        }
+      };
+
+      // Randomize current data (spike/drop simulation)
+      const randomizeData = () => {
+        if (currentDataset === 'system') {
+          // Simulate CPU/Memory spike
+          previousValues.cpu = Math.random() > 0.5 ? 85 : 25;
+          previousValues.memory = Math.random() > 0.5 ? 80 : 45;
+        } else if (currentDataset === 'network') {
+          // Simulate network traffic spike
+          previousValues.download = Math.random() > 0.5 ? 250 : 100;
+          previousValues.upload = Math.random() > 0.5 ? 80 : 20;
+        }
+        
+        // Also spike connections
+        previousValues.connections = Math.random() > 0.5 ? 280 : 80;
+        
+        // Force immediate update by resetting timers
+        lastDataPointTime = 0;
+        connectionsLastUpdate = 0;
+      };
+
+      // Wire up button click handlers
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach(button => {
+        const text = button.textContent?.trim();
+        if (text === 'System Usage') {
+          button.addEventListener('click', () => switchDataset('system'));
+        } else if (text === 'Network Traffic') {
+          button.addEventListener('click', () => switchDataset('network'));
+        } else if (text === 'Sales Data') {
+          button.addEventListener('click', () => switchDataset('sales'));
+        } else if (text === 'Start Live') {
+          button.addEventListener('click', () => startRealtime());
+        } else if (text === 'Stop Live') {
+          button.addEventListener('click', () => stopRealtime());
+        } else if (text === 'Spike Values') {
+          button.addEventListener('click', () => randomizeData());
+        }
+      });
+      
+      // Update button states based on current dataset
+      const updateButtonStates = () => {
+        const buttons = elementArg.querySelectorAll('dees-button');
+        buttons.forEach(button => {
+          const text = button.textContent?.trim();
+          if (text === 'System Usage') {
+            button.type = currentDataset === 'system' ? 'highlighted' : 'normal';
+          } else if (text === 'Network Traffic') {
+            button.type = currentDataset === 'network' ? 'highlighted' : 'normal';
+          } else if (text === 'Sales Data') {
+            button.type = currentDataset === 'sales' ? 'highlighted' : 'normal';
+          }
+        });
+      };
+      
+      // Configure main chart with rolling window
+      chartElement.rollingWindow = TIME_WINDOW;
+      chartElement.realtimeMode = false; // Will be enabled when starting live updates
+      chartElement.yAxisScaling = 'percentage'; // Initial system dataset uses percentage
+      chartElement.yAxisMax = 100;
+      chartElement.autoScrollInterval = 1000; // Auto-scroll every second
+      
+      // Set initial time window
+      setTimeout(() => {
+        chartElement.updateTimeWindow();
+      }, 100);
+      
+      // Update button states when dataset changes
+      const originalSwitchDataset = switchDataset;
+      const switchDatasetWithButtonUpdate = (name: string) => {
+        originalSwitchDataset(name);
+        updateButtonStates();
+      };
+      
+      // Replace switchDataset with the one that updates buttons
+      buttons.forEach(button => {
+        const text = button.textContent?.trim();
+        if (text === 'System Usage') {
+          button.removeEventListener('click', () => switchDataset('system'));
+          button.addEventListener('click', () => switchDatasetWithButtonUpdate('system'));
+        } else if (text === 'Network Traffic') {
+          button.removeEventListener('click', () => switchDataset('network'));
+          button.addEventListener('click', () => switchDatasetWithButtonUpdate('network'));
+        } else if (text === 'Sales Data') {
+          button.removeEventListener('click', () => switchDataset('sales'));
+          button.addEventListener('click', () => switchDatasetWithButtonUpdate('sales'));
+        }
+      });
+      
+      // Initialize connections chart with data
+      if (connectionsChartElement) {
+        const initialConnectionsData = generateInitialData(previousValues.connections, 30, UPDATE_INTERVAL);
+        connectionsChartElement.series = [{
+          name: 'Connections',
+          data: initialConnectionsData
+        }];
+        
+        // Configure connections chart
+        connectionsChartElement.rollingWindow = TIME_WINDOW;
+        connectionsChartElement.realtimeMode = false; // Will be enabled when starting live updates
+        connectionsChartElement.yAxisScaling = 'fixed';
+        connectionsChartElement.yAxisMax = 350;
+        connectionsChartElement.autoScrollInterval = 1000; // Auto-scroll every second
+        
+        // Set initial time window
+        setTimeout(() => {
+          connectionsChartElement.updateTimeWindow();
+        }, 100);
+      }
+    }}>
+      <style>
+        ${css`
+        .demoBox {
+          position: relative;
+          background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+          height: 100%;
+          width: 100%;
+          padding: 40px;
+          box-sizing: border-box;
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+        }
+        
+        .controls {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 12px;
+          margin-bottom: 8px;
+        }
+        
+        .chart-container {
+          flex: 1;
+          min-height: 400px;
+        }
+        
+        .info {
+          color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+          font-size: 12px;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Geist Sans', sans-serif;
+          text-align: center;
+          margin-top: 8px;
+        }
+      `}
+    </style>
+    <div class="demoBox">
+      <div class="controls">
+        <dees-button-group label="Dataset:">
+          <dees-button type="highlighted">System Usage</dees-button>
+          <dees-button>Network Traffic</dees-button>
+          <dees-button>Sales Data</dees-button>
+        </dees-button-group>
+        
+        <dees-button-group label="Real-time:">
+          <dees-button>Start Live</dees-button>
+          <dees-button>Stop Live</dees-button>
+        </dees-button-group>
+        
+        <dees-button-group label="Actions:">
+          <dees-button>Spike Values</dees-button>
+        </dees-button-group>
+      </div>
+      
+      <div class="chart-container">
+        <dees-chart-area
+          id="main-chart"
+          .label=${initialDatasets.system.label}
+          .series=${initialDatasets.system.series}
+          .yAxisFormatter=${initialFormatters.system}
+        ></dees-chart-area>
+      </div>
+      
+      <div class="chart-container" style="margin-top: 20px;">
+        <dees-chart-area
+          id="connections-chart"
+          .label=${'Active Connections'}
+          .series=${[{
+            name: 'Connections',
+            data: [] as Array<{x: any; y: any}>
+          }]}
+          .yAxisFormatter=${(val: number) => `${val}`}
+        ></dees-chart-area>
+      </div>
+      
+      <div class="info">
+        Real-time monitoring with 2-minute rolling window • 
+        Updates every second with smooth value transitions • 
+        Click 'Spike Values' to simulate load spikes
+      </div>
+    </div>
+    </dees-demowrapper>
+  `;
+};

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

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

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

@@ -0,0 +1,60 @@
+import { css, cssManager } from '@design.estate/dees-element';
+
+export const chartAreaStyles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        font-weight: 400;
+        font-size: 14px;
+      }
+      .mainbox {
+        position: relative;
+        width: 100%;
+        height: 400px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .chartTitle {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        text-align: left;
+        padding: 16px 24px;
+        z-index: 10;
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 63.9%)')};
+      }
+      .chartContainer {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        bottom: 0px;
+        right: 0px;
+        padding: 44px 16px 16px 0px;
+        overflow: hidden;
+        background: transparent; /* Ensure container doesn't override chart background */
+      }
+      
+      /* ApexCharts theme overrides */
+      .apexcharts-canvas {
+        background: transparent !important;
+      }
+      
+      .apexcharts-inner {
+        background: transparent !important;
+      }
+      
+      .apexcharts-graphical {
+        background: transparent !important;
+      }
+    `,
+  ];
+

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

@@ -0,0 +1,12 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesChartArea } from './component.js';
+
+export const renderChartArea = (component: DeesChartArea): TemplateResult => {
+      return html`
+        <div class="mainbox">
+          <div class="chartTitle">${component.label}</div>
+          <div class="chartContainer"></div>
+        </div>
+      `;
+  
+};

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

@@ -0,0 +1,277 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { DeesChartLog } from '../dees-chart-log/dees-chart-log.js';
+import '@design.estate/dees-wcctools/demotools';
+
+export const demoFunc = () => {
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      // Get the log elements
+      const structuredLog = elementArg.querySelector('#structured-log') as DeesChartLog;
+      const rawLog = elementArg.querySelector('#raw-log') as DeesChartLog;
+      let structuredIntervalId: number;
+      let rawIntervalId: number;
+
+      const serverSources = ['Server', 'Database', 'API', 'Auth', 'Cache', 'Queue', 'WebSocket', 'Scheduler'];
+
+      const logTemplates = {
+        debug: [
+          'Loading module: {{module}}',
+          'Cache hit for key: {{key}}',
+          'SQL query executed in {{time}}ms',
+          'Request headers: {{headers}}',
+          'Environment variable loaded: {{var}}',
+        ],
+        info: [
+          'Request received: {{method}} {{path}}',
+          'User {{userId}} authenticated successfully',
+          'Processing job {{jobId}} from queue',
+          'Scheduled task "{{task}}" started',
+          'WebSocket connection established from {{ip}}',
+        ],
+        warn: [
+          'Slow query detected: {{query}} ({{time}}ms)',
+          'Memory usage at {{percent}}%',
+          'Rate limit approaching for IP {{ip}}',
+          'Deprecated API endpoint called: {{endpoint}}',
+          'Certificate expires in {{days}} days',
+        ],
+        error: [
+          'Database connection lost: {{error}}',
+          'Failed to process request: {{error}}',
+          'Authentication failed for user {{user}}',
+          'File not found: {{path}}',
+          'Service unavailable: {{service}}',
+        ],
+        success: [
+          'Server started successfully on port {{port}}',
+          'Database migration completed',
+          'Backup completed: {{size}} MB',
+          'SSL certificate renewed',
+          'Health check passed: all systems operational',
+        ],
+      };
+
+      // Docker-like raw log lines with ANSI colors
+      const dockerLogTemplates = [
+        '\x1b[90m2024-01-15T10:23:45.123Z\x1b[0m \x1b[36mINFO\x1b[0m  [nginx] GET /api/health 200 - 2ms',
+        '\x1b[90m2024-01-15T10:23:45.456Z\x1b[0m \x1b[33mWARN\x1b[0m  [redis] Connection pool running low: 3/10',
+        '\x1b[90m2024-01-15T10:23:45.789Z\x1b[0m \x1b[31mERROR\x1b[0m [mongodb] Query timeout after 30000ms',
+        '\x1b[90m2024-01-15T10:23:46.012Z\x1b[0m \x1b[36mINFO\x1b[0m  [app] Processing batch job #{{jobId}}',
+        '\x1b[90m2024-01-15T10:23:46.345Z\x1b[0m \x1b[32mOK\x1b[0m    [health] All services healthy',
+        '\x1b[90m2024-01-15T10:23:46.678Z\x1b[0m \x1b[36mINFO\x1b[0m  [kafka] Message consumed from topic: events',
+        '\x1b[90m2024-01-15T10:23:47.001Z\x1b[0m \x1b[35mDEBUG\x1b[0m [grpc] Request received: GetUser(id={{userId}})',
+        '\x1b[90m2024-01-15T10:23:47.234Z\x1b[0m \x1b[31mERROR\x1b[0m [auth] Token validation failed: expired',
+        '\x1b[90m2024-01-15T10:23:47.567Z\x1b[0m \x1b[33mWARN\x1b[0m  [rate-limit] IP {{ip}} approaching rate limit',
+        '\x1b[90m2024-01-15T10:23:47.890Z\x1b[0m \x1b[36mINFO\x1b[0m  [websocket] Client connected: session={{session}}',
+        // Multi-line log entry like stack traces
+        '\x1b[31mError: Connection refused\x1b[0m\n    at TcpConnection.connect (/app/node_modules/pg/lib/connection.js:12:15)\n    at Pool.connect (/app/node_modules/pg/lib/pool.js:45:23)\n    at async DatabaseService.query (/app/src/db/service.ts:89:12)',
+      ];
+
+      const generateRandomLog = () => {
+        const levels: Array<'debug' | 'info' | 'warn' | 'error' | 'success'> = ['debug', 'info', 'warn', 'error', 'success'];
+        const weights = [0.2, 0.5, 0.15, 0.1, 0.05];
+
+        const random = Math.random();
+        let cumulative = 0;
+        let level: typeof levels[0] = 'info';
+
+        for (let i = 0; i < weights.length; i++) {
+          cumulative += weights[i];
+          if (random < cumulative) {
+            level = levels[i];
+            break;
+          }
+        }
+
+        const source = serverSources[Math.floor(Math.random() * serverSources.length)];
+        const templates = logTemplates[level];
+        const template = templates[Math.floor(Math.random() * templates.length)];
+
+        // Replace placeholders with random values
+        const message = template
+          .replace('{{module}}', ['express', 'mongoose', 'redis', 'socket.io'][Math.floor(Math.random() * 4)])
+          .replace('{{key}}', 'user:' + Math.floor(Math.random() * 1000))
+          .replace('{{time}}', String(Math.floor(Math.random() * 500) + 50))
+          .replace('{{headers}}', 'Content-Type: application/json, Authorization: Bearer ...')
+          .replace('{{var}}', ['NODE_ENV', 'DATABASE_URL', 'API_KEY', 'PORT'][Math.floor(Math.random() * 4)])
+          .replace('{{method}}', ['GET', 'POST', 'PUT', 'DELETE'][Math.floor(Math.random() * 4)])
+          .replace('{{path}}', ['/api/users', '/api/auth/login', '/api/products', '/health'][Math.floor(Math.random() * 4)])
+          .replace('{{userId}}', String(Math.floor(Math.random() * 10000)))
+          .replace('{{jobId}}', 'job_' + Math.random().toString(36).substring(2, 11))
+          .replace('{{task}}', ['cleanup', 'backup', 'report-generation', 'cache-refresh'][Math.floor(Math.random() * 4)])
+          .replace('{{ip}}', `192.168.1.${Math.floor(Math.random() * 255)}`)
+          .replace('{{query}}', 'SELECT * FROM users WHERE ...')
+          .replace('{{percent}}', String(Math.floor(Math.random() * 30) + 70))
+          .replace('{{endpoint}}', '/api/v1/legacy')
+          .replace('{{days}}', String(Math.floor(Math.random() * 30) + 1))
+          .replace('{{error}}', ['ECONNREFUSED', 'ETIMEDOUT', 'ENOTFOUND'][Math.floor(Math.random() * 3)])
+          .replace('{{user}}', 'user_' + Math.floor(Math.random() * 1000))
+          .replace('{{service}}', ['Redis', 'MongoDB', 'ElasticSearch'][Math.floor(Math.random() * 3)])
+          .replace('{{port}}', String(3000 + Math.floor(Math.random() * 10)))
+          .replace('{{size}}', String(Math.floor(Math.random() * 500) + 100));
+
+        structuredLog.addLog(level, message, source);
+      };
+
+      const generateDockerLog = () => {
+        const template = dockerLogTemplates[Math.floor(Math.random() * dockerLogTemplates.length)];
+        const now = new Date().toISOString();
+
+        const logLine = template
+          .replace(/2024-01-15T10:23:\d{2}\.\d{3}Z/g, now)
+          .replace('{{jobId}}', String(Math.floor(Math.random() * 10000)))
+          .replace('{{userId}}', String(Math.floor(Math.random() * 10000)))
+          .replace('{{ip}}', `192.168.1.${Math.floor(Math.random() * 255)}`)
+          .replace('{{session}}', Math.random().toString(36).substring(2, 11));
+
+        rawLog.writelnRaw(logLine);
+      };
+
+      const startStructuredSimulation = () => {
+        if (!structuredIntervalId) {
+          const scheduleNext = () => {
+            generateRandomLog();
+            const nextDelay = Math.random() * 2000 + 500;
+            structuredIntervalId = window.setTimeout(() => {
+              if (structuredIntervalId) {
+                scheduleNext();
+              }
+            }, nextDelay);
+          };
+          scheduleNext();
+        }
+      };
+
+      const stopStructuredSimulation = () => {
+        if (structuredIntervalId) {
+          window.clearTimeout(structuredIntervalId);
+          structuredIntervalId = null;
+        }
+      };
+
+      const startRawSimulation = () => {
+        if (!rawIntervalId) {
+          const scheduleNext = () => {
+            generateDockerLog();
+            const nextDelay = Math.random() * 1000 + 200;
+            rawIntervalId = window.setTimeout(() => {
+              if (rawIntervalId) {
+                scheduleNext();
+              }
+            }, nextDelay);
+          };
+          scheduleNext();
+        }
+      };
+
+      const stopRawSimulation = () => {
+        if (rawIntervalId) {
+          window.clearTimeout(rawIntervalId);
+          rawIntervalId = null;
+        }
+      };
+
+      // Wire up button click handlers
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach(button => {
+        const text = button.textContent?.trim();
+        switch (text) {
+          case 'Add Structured Log':
+            button.addEventListener('click', () => generateRandomLog());
+            break;
+          case 'Start Structured':
+            button.addEventListener('click', () => startStructuredSimulation());
+            break;
+          case 'Stop Structured':
+            button.addEventListener('click', () => stopStructuredSimulation());
+            break;
+          case 'Add Docker Log':
+            button.addEventListener('click', () => generateDockerLog());
+            break;
+          case 'Start Docker':
+            button.addEventListener('click', () => startRawSimulation());
+            break;
+          case 'Stop Docker':
+            button.addEventListener('click', () => stopRawSimulation());
+            break;
+        }
+      });
+    }}>
+      <style>
+        ${css`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 5%)')};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+          .section {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+          }
+          .section-title {
+            color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+            font-size: 14px;
+            font-weight: 600;
+            font-family: 'Geist Sans', sans-serif;
+          }
+          .section-description {
+            color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+            font-size: 12px;
+            font-family: 'Geist Sans', sans-serif;
+          }
+          .controls {
+            display: flex;
+            gap: 10px;
+            flex-wrap: wrap;
+          }
+        `}
+      </style>
+    <div class="demoBox">
+      <!-- Structured Logs Section -->
+      <div class="section">
+        <div class="section-title">Structured Logs (ILogEntry)</div>
+        <div class="section-description">
+          Structured log entries with level, message, and source. Supports search and keyword highlighting.
+        </div>
+        <div class="controls">
+          <dees-button>Add Structured Log</dees-button>
+          <dees-button>Start Structured</dees-button>
+          <dees-button>Stop Structured</dees-button>
+        </div>
+        <dees-chart-log
+          id="structured-log"
+          .label=${'Production Server Logs'}
+          .highlightKeywords=${['error', 'failed', 'timeout']}
+          .showMetrics=${true}
+        ></dees-chart-log>
+      </div>
+
+      <!-- Raw Logs Section -->
+      <div class="section">
+        <div class="section-title">Raw Logs (Docker/Container Style)</div>
+        <div class="section-description">
+          Raw log output with ANSI escape sequences for real Docker/container logs.
+        </div>
+        <div class="controls">
+          <dees-button>Add Docker Log</dees-button>
+          <dees-button>Start Docker</dees-button>
+          <dees-button>Stop Docker</dees-button>
+        </div>
+        <dees-chart-log
+          id="raw-log"
+          .label=${'Docker Container Logs'}
+          .mode=${'raw'}
+          .showMetrics=${false}
+        ></dees-chart-log>
+      </div>
+    </div>
+    </dees-demowrapper>
+  `;
+};

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

@@ -0,0 +1,925 @@
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  property,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { demoFunc } from './dees-chart-log.demo.js';
+import { themeDefaultStyles } from '../../00theme.js';
+import { DeesServiceLibLoader, type IXtermSearchAddon, CDN_BASE, CDN_VERSIONS } from '../../../services/index.js';
+
+// Type imports (no runtime overhead)
+import type { Terminal } from 'xterm';
+import type { FitAddon } from 'xterm-addon-fit';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-log': DeesChartLog;
+  }
+}
+
+export interface ILogEntry {
+  timestamp: string;
+  level: 'debug' | 'info' | 'warn' | 'error' | 'success';
+  message: string;
+  source?: string;
+}
+
+export interface ILogMetrics {
+  debug: number;
+  info: number;
+  warn: number;
+  error: number;
+  success: number;
+  total: number;
+  rate: number; // logs per second (rolling average)
+}
+
+@customElement('dees-chart-log')
+export class DeesChartLog extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Chart', 'Workspace'];
+
+  @property()
+  accessor label: string = 'Server Logs';
+
+  @property({ type: String })
+  accessor mode: 'structured' | 'raw' = 'structured';
+
+  @property({ type: Array })
+  accessor logEntries: ILogEntry[] = [];
+
+  @property({ type: Boolean })
+  accessor autoScroll: boolean = true;
+
+  @property({ type: Number })
+  accessor maxEntries: number = 10000;
+
+  @property({ type: Array })
+  accessor highlightKeywords: string[] = [];
+
+  @property({ type: Boolean })
+  accessor showMetrics: boolean = true;
+
+  @state()
+  accessor searchQuery: string = '';
+
+  @state()
+  accessor filterMode: boolean = false;
+
+  @state()
+  accessor metrics: ILogMetrics = { debug: 0, info: 0, warn: 0, error: 0, success: 0, total: 0, rate: 0 };
+
+  @state()
+  accessor terminalReady: boolean = false;
+
+  // Buffer of all log entries for filter mode
+  private logBuffer: ILogEntry[] = [];
+
+  // Track trailing hidden entries count for live updates in filter mode
+  private trailingHiddenCount: number = 0;
+
+  // xterm instances
+  private terminal: Terminal | null = null;
+  private fitAddon: FitAddon | null = null;
+  private searchAddon: IXtermSearchAddon | null = null;
+  private resizeObserver: ResizeObserver | null = null;
+  private terminalThemeSubscription: any = null;
+  private domtoolsInstance: any = null;
+
+  // Rate calculation
+  private rateBuffer: number[] = [];
+  private rateInterval: ReturnType<typeof setInterval> | null = null;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+      }
+
+      .mainbox {
+        position: relative;
+        width: 100%;
+        height: 400px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 8px;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .header {
+        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+        padding: 8px 12px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-shrink: 0;
+        flex-wrap: wrap;
+      }
+
+      .title {
+        font-weight: 500;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        white-space: nowrap;
+      }
+
+      .search-box {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        flex: 1;
+        min-width: 150px;
+        max-width: 300px;
+      }
+
+      .search-box input {
+        flex: 1;
+        padding: 4px 8px;
+        font-size: 12px;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 4px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        outline: none;
+      }
+
+      .search-box input:focus {
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+      }
+
+      .search-box input::placeholder {
+        color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+      }
+
+      .search-nav {
+        display: flex;
+        gap: 2px;
+      }
+
+      .search-nav button {
+        padding: 4px 6px;
+        font-size: 11px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 3px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        cursor: pointer;
+        line-height: 1;
+      }
+
+      .search-nav button:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+      }
+
+      .filter-toggle {
+        padding: 4px 8px;
+        font-size: 11px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 4px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        cursor: pointer;
+        transition: all 0.15s;
+        white-space: nowrap;
+      }
+
+      .filter-toggle:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+      }
+
+      .filter-toggle.active {
+        background: ${cssManager.bdTheme('hsl(45 93% 47%)', 'hsl(45 93% 47%)')};
+        border-color: ${cssManager.bdTheme('hsl(45 93% 47%)', 'hsl(45 93% 47%)')};
+        color: hsl(0 0% 9%);
+      }
+
+      .controls {
+        display: flex;
+        gap: 6px;
+        margin-left: auto;
+      }
+
+      .control-button {
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 4px;
+        padding: 4px 10px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 500;
+        transition: all 0.15s;
+      }
+
+      .control-button:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 20%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 25%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+      }
+
+      .control-button.active {
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+        color: white;
+      }
+
+      .terminal-container {
+        flex: 1;
+        overflow: hidden;
+        padding: 8px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+      }
+
+      .terminal-container .xterm {
+        height: 100%;
+      }
+
+      .loading-state {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        font-style: italic;
+        font-size: 13px;
+      }
+
+      .metrics-bar {
+        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        padding: 6px 12px;
+        display: flex;
+        gap: 16px;
+        font-size: 11px;
+        font-weight: 500;
+        flex-shrink: 0;
+      }
+
+      .metric {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+
+      .metric::before {
+        content: '';
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+      }
+
+      .metric.error::before {
+        background: hsl(0 84.2% 60.2%);
+      }
+
+      .metric.warn::before {
+        background: hsl(25 95% 53%);
+      }
+
+      .metric.info::before {
+        background: hsl(222.2 47.4% 51.2%);
+      }
+
+      .metric.success::before {
+        background: hsl(142.1 76.2% 36.3%);
+      }
+
+      .metric.debug::before {
+        background: hsl(0 0% 63.9%);
+      }
+
+      .metric.rate {
+        margin-left: auto;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+      }
+
+      .metric.rate::before {
+        display: none;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    domtools.elementBasic.setup();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        <div class="header">
+          <div class="title">${this.label}</div>
+          <div class="search-box">
+            <input
+              type="text"
+              placeholder="Search logs..."
+              .value=${this.searchQuery}
+              @input=${(e: InputEvent) => this.handleSearchInput(e)}
+              @keydown=${(e: KeyboardEvent) => this.handleSearchKeydown(e)}
+            />
+            <div class="search-nav">
+              <button @click=${() => this.searchPrevious()} title="Previous match">↑</button>
+              <button @click=${() => this.searchNext()} title="Next match">↓</button>
+            </div>
+            <button
+              class="filter-toggle ${this.filterMode ? 'active' : ''}"
+              @click=${() => this.toggleFilterMode()}
+              title="${this.filterMode ? 'Switch to highlight mode' : 'Switch to filter mode'}"
+            >
+              ${this.filterMode ? 'Filter' : 'Highlight'}
+            </button>
+          </div>
+          <div class="controls">
+            <button
+              class="control-button ${this.autoScroll ? 'active' : ''}"
+              @click=${() => this.toggleAutoScroll()}
+            >
+              Auto Scroll
+            </button>
+            <button class="control-button" @click=${() => this.clearLogs()}>
+              Clear
+            </button>
+          </div>
+        </div>
+
+        <div class="terminal-container">
+          ${!this.terminalReady
+            ? html`<div class="loading-state">Loading terminal...</div>`
+            : ''}
+        </div>
+
+        ${this.showMetrics
+          ? html`
+              <div class="metrics-bar">
+                <span class="metric error">errors: ${this.metrics.error}</span>
+                <span class="metric warn">warns: ${this.metrics.warn}</span>
+                <span class="metric info">info: ${this.metrics.info}</span>
+                <span class="metric success">success: ${this.metrics.success}</span>
+                <span class="metric debug">debug: ${this.metrics.debug}</span>
+                <span class="metric rate">${this.metrics.rate.toFixed(1)} logs/sec</span>
+              </div>
+            `
+          : ''}
+      </div>
+    `;
+  }
+
+  public async firstUpdated() {
+    this.domtoolsInstance = await this.domtoolsPromise;
+    await this.initializeTerminal();
+
+    // Process any initial log entries
+    if (this.logEntries.length > 0) {
+      for (const entry of this.logEntries) {
+        this.writeLogEntry(entry);
+      }
+    }
+  }
+
+  private async initializeTerminal() {
+    const libLoader = DeesServiceLibLoader.getInstance();
+
+    const [xtermBundle, fitBundle, searchBundle] = await Promise.all([
+      libLoader.loadXterm(),
+      libLoader.loadXtermFitAddon(),
+      libLoader.loadXtermSearchAddon(),
+    ]);
+
+    // Inject xterm CSS into shadow root (needed because shadow DOM doesn't inherit from document.head)
+    await this.injectXtermStylesIntoShadow();
+
+    this.terminal = new xtermBundle.Terminal({
+      cursorBlink: false,
+      disableStdin: true,
+      fontSize: 12,
+      fontFamily: "'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace",
+      theme: this.getTerminalTheme(),
+      scrollback: this.maxEntries,
+      convertEol: true,
+    });
+
+    this.fitAddon = new fitBundle.FitAddon();
+    this.searchAddon = new searchBundle.SearchAddon();
+
+    this.terminal.loadAddon(this.fitAddon);
+    this.terminal.loadAddon(this.searchAddon);
+
+    const container = this.shadowRoot!.querySelector('.terminal-container') as HTMLElement;
+    this.terminal.open(container);
+
+    // Fit after a small delay to ensure proper sizing
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    this.fitAddon.fit();
+
+    // Set up resize observer
+    this.resizeObserver = new ResizeObserver(() => {
+      this.fitAddon?.fit();
+    });
+    this.resizeObserver.observe(container);
+
+    // Subscribe to theme changes
+    this.terminalThemeSubscription = this.domtoolsInstance.themeManager.themeObservable.subscribe(() => {
+      if (this.terminal) {
+        this.terminal.options.theme = this.getTerminalTheme();
+      }
+    });
+
+    // Start rate calculation interval
+    this.rateInterval = setInterval(() => this.calculateRate(), 1000);
+
+    this.terminalReady = true;
+  }
+
+  private getTerminalTheme() {
+    const isDark = this.domtoolsInstance?.themeManager?.isDarkMode ?? true;
+    return isDark
+      ? {
+          background: '#0a0a0a',
+          foreground: '#e0e0e0',
+          cursor: '#e0e0e0',
+          selectionBackground: '#404040',
+          black: '#000000',
+          red: '#ff5555',
+          green: '#50fa7b',
+          yellow: '#f1fa8c',
+          blue: '#6272a4',
+          magenta: '#ff79c6',
+          cyan: '#8be9fd',
+          white: '#f8f8f2',
+          brightBlack: '#6272a4',
+          brightRed: '#ff6e6e',
+          brightGreen: '#69ff94',
+          brightYellow: '#ffffa5',
+          brightBlue: '#d6acff',
+          brightMagenta: '#ff92df',
+          brightCyan: '#a4ffff',
+          brightWhite: '#ffffff',
+        }
+      : {
+          background: '#ffffff',
+          foreground: '#333333',
+          cursor: '#333333',
+          selectionBackground: '#add6ff',
+          black: '#000000',
+          red: '#cd3131',
+          green: '#00bc00',
+          yellow: '#949800',
+          blue: '#0451a5',
+          magenta: '#bc05bc',
+          cyan: '#0598bc',
+          white: '#555555',
+          brightBlack: '#666666',
+          brightRed: '#cd3131',
+          brightGreen: '#14ce14',
+          brightYellow: '#b5ba00',
+          brightBlue: '#0451a5',
+          brightMagenta: '#bc05bc',
+          brightCyan: '#0598bc',
+          brightWhite: '#a5a5a5',
+        };
+  }
+
+  /**
+   * Inject xterm CSS styles into shadow root
+   * This is needed because shadow DOM doesn't inherit styles from document.head
+   */
+  private async injectXtermStylesIntoShadow(): Promise<void> {
+    const styleId = 'xterm-shadow-styles';
+    if (this.shadowRoot!.getElementById(styleId)) {
+      return; // Already injected
+    }
+
+    const cssUrl = `${CDN_BASE}/xterm@${CDN_VERSIONS.xterm}/css/xterm.css`;
+    const response = await fetch(cssUrl);
+    const cssText = await response.text();
+
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = cssText;
+    this.shadowRoot!.appendChild(style);
+  }
+
+  // =====================
+  // Structured Log Methods
+  // =====================
+
+  /**
+   * Add a single structured log entry
+   */
+  public addLog(level: ILogEntry['level'], message: string, source?: string) {
+    const entry: ILogEntry = {
+      timestamp: new Date().toISOString(),
+      level,
+      message,
+      source,
+    };
+
+    // Add to buffer
+    this.logBuffer.push(entry);
+    if (this.logBuffer.length > this.maxEntries) {
+      this.logBuffer.shift();
+    }
+
+    // Handle display based on filter mode
+    if (!this.filterMode || !this.searchQuery) {
+      // No filtering - show all entries
+      this.writeLogEntry(entry);
+    } else if (this.entryMatchesFilter(entry)) {
+      // Entry matches filter - reset trailing count and write entry
+      this.trailingHiddenCount = 0;
+      this.writeLogEntry(entry);
+    } else {
+      // Entry doesn't match - update trailing placeholder
+      this.updateTrailingPlaceholder();
+    }
+
+    this.updateMetrics(entry.level);
+  }
+
+  /**
+   * Add multiple structured log entries
+   */
+  public updateLog(entries?: ILogEntry[]) {
+    if (!entries) return;
+    for (const entry of entries) {
+      // Add to buffer
+      this.logBuffer.push(entry);
+      if (this.logBuffer.length > this.maxEntries) {
+        this.logBuffer.shift();
+      }
+
+      // Handle display based on filter mode
+      if (!this.filterMode || !this.searchQuery) {
+        // No filtering - show all entries
+        this.writeLogEntry(entry);
+      } else if (this.entryMatchesFilter(entry)) {
+        // Entry matches filter - reset trailing count and write entry
+        this.trailingHiddenCount = 0;
+        this.writeLogEntry(entry);
+      } else {
+        // Entry doesn't match - update trailing placeholder
+        this.updateTrailingPlaceholder();
+      }
+
+      this.updateMetrics(entry.level);
+    }
+  }
+
+  /**
+   * Update the trailing hidden placeholder in real-time
+   * Clears the last line if a placeholder already exists, then writes updated count
+   */
+  private updateTrailingPlaceholder() {
+    if (!this.terminal) return;
+
+    if (this.trailingHiddenCount > 0) {
+      // Clear the previous placeholder line (move up, clear line, move to start)
+      this.terminal.write('\x1b[1A\x1b[2K\r');
+    }
+
+    this.trailingHiddenCount++;
+    this.writeHiddenPlaceholder(this.trailingHiddenCount);
+
+    if (this.autoScroll) {
+      this.terminal.scrollToBottom();
+    }
+  }
+
+  /**
+   * Check if a log entry matches the current filter
+   */
+  private entryMatchesFilter(entry: ILogEntry): boolean {
+    if (!this.searchQuery) return true;
+    const query = this.searchQuery.toLowerCase();
+    return (
+      entry.message.toLowerCase().includes(query) ||
+      entry.level.toLowerCase().includes(query) ||
+      (entry.source?.toLowerCase().includes(query) ?? false)
+    );
+  }
+
+  private writeLogEntry(entry: ILogEntry) {
+    if (!this.terminal) return;
+
+    const formatted = this.formatLogEntry(entry);
+    this.terminal.writeln(formatted);
+
+    if (this.autoScroll) {
+      this.terminal.scrollToBottom();
+    }
+  }
+
+  private formatLogEntry(entry: ILogEntry): string {
+    const timestamp = this.formatTimestamp(entry.timestamp);
+    const levelColors: Record<ILogEntry['level'], string> = {
+      debug: '\x1b[90m', // Gray
+      info: '\x1b[36m', // Cyan
+      warn: '\x1b[33m', // Yellow
+      error: '\x1b[31m', // Red
+      success: '\x1b[32m', // Green
+    };
+    const reset = '\x1b[0m';
+    const dim = '\x1b[2m';
+
+    const levelStr = `${levelColors[entry.level]}[${entry.level.toUpperCase().padEnd(7)}]${reset}`;
+    const sourceStr = entry.source ? `${dim}[${entry.source}]${reset} ` : '';
+    const messageStr = this.applyHighlights(entry.message);
+
+    return `${dim}${timestamp}${reset} ${levelStr} ${sourceStr}${messageStr}`;
+  }
+
+  private formatTimestamp(isoString: string): string {
+    const date = new Date(isoString);
+    return date.toLocaleTimeString('en-US', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      fractionalSecondDigits: 3,
+    } as Intl.DateTimeFormatOptions);
+  }
+
+  private applyHighlights(text: string): string {
+    // Collect all keywords to highlight
+    const keywords = [...this.highlightKeywords];
+
+    // In filter mode, also highlight the search query
+    if (this.filterMode && this.searchQuery) {
+      keywords.push(this.searchQuery);
+    }
+
+    if (keywords.length === 0) return text;
+
+    let result = text;
+    for (const keyword of keywords) {
+      // Escape regex special characters
+      const escaped = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      const regex = new RegExp(`(${escaped})`, 'gi');
+      // Yellow background, black text for highlights
+      result = result.replace(regex, '\x1b[43m\x1b[30m$1\x1b[0m');
+    }
+    return result;
+  }
+
+  // =====================
+  // Raw Log Methods
+  // =====================
+
+  /**
+   * Write raw data to the terminal (for Docker logs, etc.)
+   */
+  public writeRaw(data: string) {
+    if (!this.terminal) return;
+    this.terminal.write(data);
+    this.recordLogEvent();
+
+    if (this.autoScroll) {
+      this.terminal.scrollToBottom();
+    }
+  }
+
+  /**
+   * Write a raw line to the terminal
+   */
+  public writelnRaw(line: string) {
+    if (!this.terminal) return;
+    this.terminal.writeln(line);
+    this.recordLogEvent();
+
+    if (this.autoScroll) {
+      this.terminal.scrollToBottom();
+    }
+  }
+
+  // =====================
+  // Search Methods
+  // =====================
+
+  private handleSearchInput(e: InputEvent) {
+    const input = e.target as HTMLInputElement;
+    const newQuery = input.value;
+    const queryChanged = this.searchQuery !== newQuery;
+    this.searchQuery = newQuery;
+
+    if (this.filterMode && queryChanged) {
+      // Re-render with filtered logs
+      this.reRenderFilteredLogs();
+    } else if (this.searchQuery) {
+      // Just highlight/search in current view
+      this.searchAddon?.findNext(this.searchQuery);
+    }
+  }
+
+  private handleSearchKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter') {
+      if (e.shiftKey) {
+        this.searchPrevious();
+      } else {
+        this.searchNext();
+      }
+    } else if (e.key === 'Escape') {
+      this.searchQuery = '';
+      (e.target as HTMLInputElement).value = '';
+    }
+  }
+
+  /**
+   * Search for a query in the terminal
+   */
+  public search(query: string): void {
+    this.searchQuery = query;
+    this.searchAddon?.findNext(query);
+  }
+
+  /**
+   * Find next search match
+   */
+  public searchNext(): void {
+    if (this.searchQuery) {
+      this.searchAddon?.findNext(this.searchQuery);
+    }
+  }
+
+  /**
+   * Find previous search match
+   */
+  public searchPrevious(): void {
+    if (this.searchQuery) {
+      this.searchAddon?.findPrevious(this.searchQuery);
+    }
+  }
+
+  // =====================
+  // Control Methods
+  // =====================
+
+  private toggleAutoScroll() {
+    this.autoScroll = !this.autoScroll;
+    if (this.autoScroll && this.terminal) {
+      this.terminal.scrollToBottom();
+    }
+  }
+
+  /**
+   * Toggle between filter mode and highlight mode
+   */
+  private toggleFilterMode() {
+    this.filterMode = !this.filterMode;
+    this.reRenderFilteredLogs();
+  }
+
+  /**
+   * Re-render logs based on current filter state
+   * In filter mode: show matching logs with placeholders for hidden entries
+   * In highlight mode: show all logs
+   */
+  private reRenderFilteredLogs() {
+    if (!this.terminal) return;
+
+    // Clear terminal and re-render
+    this.terminal.clear();
+
+    // Reset trailing count for fresh render
+    this.trailingHiddenCount = 0;
+
+    if (!this.filterMode || !this.searchQuery) {
+      // No filtering - show all entries
+      for (const entry of this.logBuffer) {
+        const formatted = this.formatLogEntry(entry);
+        this.terminal.writeln(formatted);
+      }
+    } else {
+      // Filter mode with placeholders for hidden entries
+      let hiddenCount = 0;
+
+      for (const entry of this.logBuffer) {
+        if (this.entryMatchesFilter(entry)) {
+          // Output placeholder for hidden entries if any
+          if (hiddenCount > 0) {
+            this.writeHiddenPlaceholder(hiddenCount);
+            hiddenCount = 0;
+          }
+          // Output the matching entry
+          const formatted = this.formatLogEntry(entry);
+          this.terminal.writeln(formatted);
+        } else {
+          hiddenCount++;
+        }
+      }
+
+      // Handle trailing hidden entries
+      if (hiddenCount > 0) {
+        this.writeHiddenPlaceholder(hiddenCount);
+        // Store trailing count for live updates
+        this.trailingHiddenCount = hiddenCount;
+      }
+    }
+
+    if (this.autoScroll) {
+      this.terminal.scrollToBottom();
+    }
+  }
+
+  /**
+   * Write a placeholder line showing how many log entries are hidden by filter
+   */
+  private writeHiddenPlaceholder(count: number) {
+    const dim = '\x1b[2m';
+    const reset = '\x1b[0m';
+    const text = count === 1
+      ? `[1 log line hidden by filter ...]`
+      : `[${count} log lines hidden by filter ...]`;
+    this.terminal?.writeln(`${dim}${text}${reset}`);
+  }
+
+  /**
+   * Clear all logs and reset metrics
+   */
+  public clearLogs() {
+    this.terminal?.clear();
+    this.logBuffer = [];
+    this.trailingHiddenCount = 0;
+    this.resetMetrics();
+  }
+
+  /**
+   * Scroll to the bottom of the log
+   */
+  public scrollToBottom() {
+    this.terminal?.scrollToBottom();
+  }
+
+  // =====================
+  // Metrics Methods
+  // =====================
+
+  private updateMetrics(level: ILogEntry['level']) {
+    this.metrics = {
+      ...this.metrics,
+      [level]: this.metrics[level] + 1,
+      total: this.metrics.total + 1,
+    };
+    this.recordLogEvent();
+  }
+
+  private recordLogEvent() {
+    this.rateBuffer.push(Date.now());
+  }
+
+  private calculateRate() {
+    const now = Date.now();
+    // Keep only events from the last 10 seconds
+    this.rateBuffer = this.rateBuffer.filter((t) => now - t < 10000);
+    const rate = this.rateBuffer.length / 10;
+
+    if (rate !== this.metrics.rate) {
+      this.metrics = { ...this.metrics, rate };
+    }
+  }
+
+  private resetMetrics() {
+    this.metrics = { debug: 0, info: 0, warn: 0, error: 0, success: 0, total: 0, rate: 0 };
+    this.rateBuffer = [];
+  }
+
+  // =====================
+  // Lifecycle
+  // =====================
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+
+    if (this.terminalThemeSubscription) {
+      this.terminalThemeSubscription.unsubscribe();
+    }
+
+    if (this.rateInterval) {
+      clearInterval(this.rateInterval);
+    }
+
+    if (this.terminal) {
+      this.terminal.dispose();
+    }
+  }
+}

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

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

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

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

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

@@ -0,0 +1,199 @@
+import { html, cssManager } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+  <style>
+    .demoWrapper {
+      box-sizing: border-box;
+      position: relative;
+      width: 100%;
+      min-height: 100vh;
+      padding: 48px;
+      background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
+      display: flex;
+      flex-direction: column;
+      gap: 32px;
+    }
+    
+    .section {
+      max-width: 900px;
+      width: 100%;
+      margin: 0 auto;
+    }
+    
+    .section-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 16px;
+      color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+    }
+    
+    .section-description {
+      font-size: 14px;
+      color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+      margin-bottom: 16px;
+    }
+  </style>
+  <div class="demoWrapper">
+    <div class="section">
+      <div class="section-title">TypeScript Code Example</div>
+      <div class="section-description">A comprehensive TypeScript code example with various syntax highlighting.</div>
+      <dees-dataview-codebox proglang="typescript">
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  isActive: boolean;
+}
+
+class UserService {
+  private users: User[] = [];
+  
+  constructor(private apiUrl: string) {
+    console.log('UserService initialized');
+  }
+  
+  async getUsers(): Promise<User[]> {
+    try {
+      const response = await fetch(this.apiUrl);
+      const data = await response.json();
+      return data.users;
+    } catch (error) {
+      console.error('Failed to fetch users:', error);
+      return [];
+    }
+  }
+  
+  addUser(user: User): void {
+    this.users.push(user);
+  }
+}
+
+// Usage example
+const service = new UserService('https://api.example.com/users');
+const users = await service.getUsers();
+console.log('Found users:', users.length);
+      </dees-dataview-codebox>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">JavaScript Example</div>
+      <div class="section-description">Modern JavaScript with ES6+ features.</div>
+      <dees-dataview-codebox proglang="javascript">
+// Array manipulation examples
+const numbers = [1, 2, 3, 4, 5];
+const doubled = numbers.map(n => n * 2);
+const filtered = numbers.filter(n => n > 3);
+
+// Object destructuring
+const user = { name: 'John', age: 30, city: 'New York' };
+const { name, age } = user;
+
+// Promise handling
+const fetchData = async (url) => {
+  const response = await fetch(url);
+  return response.json();
+};
+
+// Modern syntax
+const greet = (name = 'World') => \`Hello, \${name}!\`;
+console.log(greet('ShadCN'));
+      </dees-dataview-codebox>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">Python Example</div>
+      <div class="section-description">Python code with classes and type hints.</div>
+      <dees-dataview-codebox proglang="python">
+from typing import List, Optional
+import asyncio
+
+class DataProcessor:
+    """A simple data processor class"""
+    
+    def __init__(self, name: str):
+        self.name = name
+        self.data: List[dict] = []
+    
+    async def process_data(self, items: List[dict]) -> List[dict]:
+        """Process data items asynchronously"""
+        results = []
+        for item in items:
+            # Simulate async processing
+            await asyncio.sleep(0.1)
+            results.append({
+                'id': item.get('id'),
+                'processed': True,
+                'processor': self.name
+            })
+        return results
+    
+    def get_summary(self) -> dict:
+        return {
+            'processor': self.name,
+            'items_processed': len(self.data)
+        }
+
+# Usage
+processor = DataProcessor("Main")
+data = await processor.process_data([{'id': 1}, {'id': 2}])
+      </dees-dataview-codebox>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">CSS Example</div>
+      <div class="section-description">Modern CSS with custom properties and animations. Note the shorter language label.</div>
+      <dees-dataview-codebox proglang="css">
+/* Modern CSS with custom properties */
+:root {
+  --primary-color: #3b82f6;
+  --secondary-color: #10b981;
+  --background: #ffffff;
+  --text-color: #09090b;
+  --border-radius: 6px;
+}
+
+.card {
+  background: var(--background);
+  border: 1px solid #e5e7eb;
+  border-radius: var(--border-radius);
+  padding: 24px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease;
+}
+
+.card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+      </dees-dataview-codebox>
+    </div>
+    
+    <div class="section">
+      <div class="section-title">JSON Example</div>
+      <div class="section-description">JSON configuration with proper formatting.</div>
+      <dees-dataview-codebox proglang="json">
+{
+  "name": "@design.estate/dees-catalog",
+  "version": "1.10.7",
+  "description": "A comprehensive catalog of web components",
+  "main": "dist_ts_web/index.js",
+  "type": "module",
+  "scripts": {
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
+    "watch": "tswatch element",
+    "test": "tstest test/ --web --verbose"
+  },
+  "dependencies": {
+    "@design.estate/dees-element": "^2.0.45",
+    "highlight.js": "^11.9.0"
+  }
+}
+      </dees-dataview-codebox>
+    </div>
+  </div>
+`

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

@@ -8,13 +8,15 @@ import {
   state,
   cssManager,
 } from '@design.estate/dees-element';
+import { cssGeistFontFamily, cssMonoFontFamily } from '../../00fonts.js';
 
-import hlight from 'highlight.js';
+import type { HLJSApi } from 'highlight.js';
 
 import * as smartstring from '@push.rocks/smartstring';
 
 import * as domtools from '@design.estate/dees-domtools';
-import { DeesContextmenu } from './dees-contextmenu.js';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
+import { DeesServiceLibLoader } from '../../../services/index.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -25,15 +27,16 @@ declare global {
 @customElement('dees-dataview-codebox')
 export class DeesDataviewCodebox extends DeesElement {
   public static demo = demoFunc;
+  public static demoGroups = ['Data View', 'Workspace'];
 
   @property()
-  public progLang: string = 'typescript';
+  accessor progLang: string = 'typescript';
 
   @property({
     type: String,
     reflect: true,
   })
-  public codeToDisplay: string = '';
+  accessor codeToDisplay: string = '';
 
   constructor() {
     super();
@@ -48,27 +51,27 @@ export class DeesDataviewCodebox extends DeesElement {
           display: block;
           text-align: left;
           font-size: 16px;
-          font-family: 'Roboto', 'Inter', sans-serif;
+          font-family: ${cssGeistFontFamily};
         }
         .mainbox {
           position: relative;
-          color: ${this.goBright ? '#333333' : '#ffffff'};
-          border-top: 1px solid ${this.goBright ? '#ffffff' : '#333333'};
-          box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.5)'};
-          background: ${this.goBright ? '#ffffff' : '#191919'};
-          border-radius: 16px;
+          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+          border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+          background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+          border-radius: 6px;
           overflow: hidden;
         }
 
         .appbar {
           position: relative;
-          color: ${cssManager.bdTheme('#333', '#ccc')};
-          background: ${cssManager.bdTheme('#ffffff', '#161616')};
-          border-bottom: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
-          height: 24px;
+          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+          background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
+          border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          height: 32px;
           display: flex;
-          font-size: 12px;
-          line-height: 24px;
+          font-size: 13px;
+          line-height: 32px;
           justify-content: center;
           align-items: center;
         }
@@ -81,31 +84,38 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .bottomBar {
-          color: ${cssManager.bdTheme('#333', '#ccc')};
-          background: ${cssManager.bdTheme('#ffffff', '#161616')};
-          border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#222222')};
-          height: 24px;
+          position: relative;
+          color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+          background: ${cssManager.bdTheme('#f9fafb', '#18181b')};
+          border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+          height: 28px;
           font-size: 12px;
-          line-height: 24px;
-          text-align: right;
-          padding-right: 100px;
+          line-height: 28px;
+          display: flex;
+          justify-content: flex-end;
+          align-items: stretch;
+          overflow: hidden;
+        }
+
+        .spacesLabel {
+          padding: 0 16px;
+          display: flex;
+          align-items: center;
         }
 
         .languageLabel {
-          color: ${cssManager.bdTheme('#333', '#ccc')};
+          color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
           font-size: 12px;
-          line-height: 24px;
-          z-index: 10;
-          background: #6596ff20;
-          display: inline-block;
-          position: absolute;
-          bottom: 0px;
-          right: 0px;
-          padding: 0px 16px 0px 8px;
+          line-height: 28px;
+          background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
+          padding: 0px 16px;
+          font-weight: 500;
+          display: flex;
+          align-items: center;
         }
 
         .hljs-keyword {
-          color: #ff65ec;
+          color: ${cssManager.bdTheme('#dc2626', '#f87171')};
         }
 
         .codegrid {
@@ -115,10 +125,10 @@ export class DeesDataviewCodebox extends DeesElement {
         }
 
         .lineNumbers {
-          color: ${this.goBright ? '#acacac' : '#666666'};
-          padding: 30px 16px 0px 0px;
+          color: ${cssManager.bdTheme('#71717a', '#52525b')};
+          padding: 24px 16px 0px 0px;
           text-align: right;
-          border-right: 1px solid ${this.goBright ? '#eaeaea' : '#222222'};
+          border-right: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
         }
 
         .lineCounter:last-child {
@@ -128,11 +138,11 @@ export class DeesDataviewCodebox extends DeesElement {
         pre {
           overflow-x: auto;
           margin: 0px;
-          padding: 30px 40px;
+          padding: 24px 24px;
         }
 
         code {
-          font-weight: ${this.goBright ? '400' : '300'};
+          font-weight: 400;
           padding: 0px;
           margin: 0px;
         }
@@ -142,27 +152,43 @@ export class DeesDataviewCodebox extends DeesElement {
         .lineNumbers {
           line-height: 1.4em;
           font-weight: 200;
-          font-family: 'Intel One Mono', 'monospace';
+          font-family: ${cssMonoFontFamily};
         }
 
         .hljs-string {
-          color: #ffa465;
+          color: ${cssManager.bdTheme('#059669', '#10b981')};
         }
 
         .hljs-built_in {
-          color: #65ff6a;
+          color: ${cssManager.bdTheme('#8b5cf6', '#a78bfa')};
         }
 
         .hljs-function {
-          color: ${this.goBright ? '#2765DF' : '#6596ff'};
+          color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
         }
 
         .hljs-params {
-          color: ${this.goBright ? '#3DB420' : '#65d5ff'};
+          color: ${cssManager.bdTheme('#0891b2', '#06b6d4')};
         }
 
         .hljs-comment {
-          color: ${this.goBright ? '#EF9300' : '#ffd765'};
+          color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        }
+
+        .hljs-number {
+          color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
+        }
+
+        .hljs-literal {
+          color: ${cssManager.bdTheme('#dc2626', '#f87171')};
+        }
+
+        .hljs-attr {
+          color: ${cssManager.bdTheme('#8b5cf6', '#a78bfa')};
+        }
+
+        .hljs-variable {
+          color: ${cssManager.bdTheme('#09090b', '#fafafa')};
         }
       </style>
       <div
@@ -180,9 +206,7 @@ export class DeesDataviewCodebox extends DeesElement {
         }}"
       >
         <div class="appbar">
-          <dees-windowcontrols type="mac" position="left"></dees-windowcontrols>
           <div class="fileName">index.ts</div>
-          <dees-windowcontrols type="mac" position="right"></dees-windowcontrols>
         </div>
         <div class="codegrid">
           <div class="lineNumbers">
@@ -197,15 +221,15 @@ export class DeesDataviewCodebox extends DeesElement {
           <pre><code></code></pre>
         </div>
         <div class="bottomBar">
-          Spaces: 2
+          <div class="spacesLabel">Spaces: 2</div>
           <div class="languageLabel">${this.progLang}</div>
         </div>
       </div>
     `;
   }
 
-  @state()
   private codeToDisplayStore = '';
+  private highlightJs: HLJSApi | null = null;
 
   public async updated(_changedProperties) {
     super.updated(_changedProperties);
@@ -227,11 +251,17 @@ export class DeesDataviewCodebox extends DeesElement {
       this.codeToDisplay = this.codeToDisplayStore;
     }
     await domtools.plugins.smartdelay.delayFor(0);
+
+    // Load highlight.js from CDN if not already loaded
+    if (!this.highlightJs) {
+      this.highlightJs = await DeesServiceLibLoader.getInstance().loadHighlightJs();
+    }
+
     const localCodeNode = this.shadowRoot.querySelector('code');
-    const html = hlight.highlight(this.codeToDisplayStore, {
+    const highlightedHtml = this.highlightJs.highlight(this.codeToDisplayStore, {
       language: this.progLang,
       ignoreIllegals: true,
     });
-    localCodeNode.innerHTML = html.value;
+    localCodeNode.innerHTML = highlightedHtml.value;
   }
 }

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

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

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

@@ -0,0 +1,164 @@
+import { html, cssManager } from '@design.estate/dees-element';
+import * as tsclass from '@tsclass/tsclass';
+
+export const demoFunc = () => html` <style>
+    .demo {
+      background: ${cssManager.bdTheme('#f5f5f5', '#0a0a0a')};
+      display: block;
+      content: '';
+      padding: 40px;
+    }
+    
+    .demo-grid {
+      display: grid;
+      gap: 24px;
+      max-width: 800px;
+      margin: 0 auto;
+    }
+    
+    .demo-section {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    
+    .demo-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+      margin-bottom: 8px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+    
+    .demo-note {
+      font-size: 12px;
+      color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+      margin-bottom: 24px;
+      text-align: center;
+      font-style: italic;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    }
+  </style>
+  <div class="demo">
+    <div class="demo-note">
+      Right-click on any detail row to copy the value, key, or key:value combination
+    </div>
+    <div class="demo-grid">
+      <div class="demo-section">
+        <div class="demo-title">Service Health Status</div>
+        <dees-dataview-statusobject
+          .statusObject=${{
+            id: '1',
+            name: 'API Gateway Service',
+            combinedStatus: 'ok',
+            combinedStatusText: 'All systems operational',
+            details: [
+              {
+                name: 'Response Time',
+                value: '45ms (avg)',
+                status: 'ok',
+                statusText: 'Within normal range',
+              },
+              {
+                name: 'Uptime',
+                value: '99.99% (30 days)',
+                status: 'ok',
+                statusText: 'Excellent uptime',
+              },
+              {
+                name: 'Active Connections',
+                value: '1,234 / 10,000',
+                status: 'ok',
+                statusText: 'Normal load',
+              },
+              {
+                name: 'SSL Certificate',
+                value: 'Valid until 2024-12-31',
+                status: 'ok',
+                statusText: 'Certificate valid',
+              },
+            ],
+          } as tsclass.code.IStatusObject}
+        >
+        </dees-dataview-statusobject>
+      </div>
+      
+      <div class="demo-section">
+        <div class="demo-title">Database Cluster Status</div>
+        <dees-dataview-statusobject
+          .statusObject=${{
+            id: '2',
+            name: 'PostgreSQL Cluster',
+            combinedStatus: 'partly_ok',
+            combinedStatusText: 'Minor issues detected',
+            details: [
+              {
+                name: 'Primary Node',
+                value: 'db-primary-01 (healthy)',
+                status: 'ok',
+                statusText: 'Operating normally',
+              },
+              {
+                name: 'Replica Lag',
+                value: '2.5 seconds',
+                status: 'partly_ok',
+                statusText: 'Slightly elevated',
+              },
+              {
+                name: 'Disk Usage',
+                value: '78% (312GB / 400GB)',
+                status: 'partly_ok',
+                statusText: 'Approaching threshold',
+              },
+              {
+                name: 'Connection Pool',
+                value: '89 / 100 connections',
+                status: 'ok',
+                statusText: 'Within limits',
+              },
+            ],
+          } as tsclass.code.IStatusObject}
+        >
+        </dees-dataview-statusobject>
+      </div>
+      
+      <div class="demo-section">
+        <div class="demo-title">Build Pipeline Status</div>
+        <dees-dataview-statusobject
+          .statusObject=${{
+            id: '3',
+            name: 'CI/CD Pipeline',
+            combinedStatus: 'not_ok',
+            combinedStatusText: 'Build failure',
+            details: [
+              {
+                name: 'Last Build',
+                value: 'Build #1234 - Failed',
+                status: 'not_ok',
+                statusText: 'Test failures',
+              },
+              {
+                name: 'Failed Tests',
+                value: '3 tests failed: auth.spec.ts, user.spec.ts, api.spec.ts',
+                status: 'not_ok',
+                statusText: 'Unit test failures',
+              },
+              {
+                name: 'Code Coverage',
+                value: '82.5% (target: 85%)',
+                status: 'partly_ok',
+                statusText: 'Below target',
+              },
+              {
+                name: 'Build Duration',
+                value: '12m 34s',
+                status: 'ok',
+                statusText: 'Normal duration',
+              },
+            ],
+          } as tsclass.code.IStatusObject}
+        >
+        </dees-dataview-statusobject>
+      </div>
+    </div>
+  </div>`;

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

@@ -0,0 +1,255 @@
+import * as colors from '../../00colors.js';
+import * as plugins from '../../00plugins.js';
+
+import { demoFunc } from './dees-dataview-statusobject.demo.js';
+import {
+  DeesElement,
+  html,
+  customElement,
+  type TemplateResult,
+  property,
+  state,
+  cssManager,
+  css,
+  type CSSResult,
+} from '@design.estate/dees-element';
+
+import * as tsclass from '@tsclass/tsclass';
+import { DeesContextmenu } from '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
+import { themeDefaultStyles } from '../../00theme.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-dataview-statusobject': DeesDataviewStatusobject;
+  }
+}
+
+@customElement('dees-dataview-statusobject')
+export class DeesDataviewStatusobject extends DeesElement {
+  public static demo = demoFunc;
+  public static demoGroups = ['Data View'];
+
+  @property({ type: Object }) accessor statusObject: tsclass.code.IStatusObject;
+
+  public static styles = [
+    themeDefaultStyles,
+    cssManager.defaultStyles,
+    css`
+      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
+      :host {
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+      }
+
+      .mainbox {
+        border-radius: 8px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        box-shadow: 0 1px 3px 0 hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
+        min-height: 48px;
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        cursor: default;
+        overflow: hidden;
+      }
+
+      .heading {
+        display: grid;
+        align-items: center;
+        grid-template-columns: 48px auto 100px;
+        height: 56px;
+        padding: 0 16px;
+        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+      }
+
+      h1 {
+        display: block;
+        margin: 0px;
+        padding: 0px 12px;
+        font-size: 14px;
+        font-weight: 500;
+        letter-spacing: -0.01em;
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+      }
+
+      .statusdot {
+        height: 10px;
+        width: 10px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+        margin: auto;
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(0 0% 63.9% / 0.2)', 'hsl(0 0% 45.1% / 0.2)')};
+        transition: all 0.2s ease;
+      }
+
+      .copyMain {
+        font-size: 12px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 14.9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        text-align: center;
+        padding: 6px 12px;
+        border-radius: 6px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        user-select: none;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .copyMain:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+      }
+
+      .copyMain:active {
+        background: ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 14.9%)')};
+        transform: scale(0.98);
+      }
+
+      .statusdot.ok {
+        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.2)', 'hsl(142.1 70.6% 45.3% / 0.2)')};
+      }
+
+      .statusdot.not_ok {
+        background: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.2)', 'hsl(0 72.2% 50.6% / 0.2)')};
+      }
+
+      .statusdot.partly_ok {
+        background: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(25 95% 53% / 0.2)', 'hsl(25 95% 63% / 0.2)')};
+      }
+
+      .detail {
+        min-height: 60px;
+        align-items: center;
+        display: grid;
+        grid-template-columns: 48px auto;
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 94%)', 'hsl(0 0% 14.9%)')};
+        transition: background-color 0.15s ease;
+        padding-right: 16px;
+        cursor: context-menu;
+      }
+
+      .detail:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+      }
+
+      .detail:active {
+        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
+      }
+
+      .detail .detailsText {
+        padding: 12px;
+        word-break: break-all;
+      }
+
+      .detail .detailsText .label {
+        font-size: 12px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')}
+        margin-bottom: 2px;
+        letter-spacing: -0.01em;
+      }
+
+      .detail .detailsText .value {
+        font-size: 14px;
+        font-family: 'Intel One Mono', 'Geist Mono', monospace;
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        line-height: 1.5;
+      }
+    `,
+  ];
+
+  render(): TemplateResult {
+    return html`
+      <div class="mainbox">
+        <div class="heading">
+          <div class="statusdot ${this.statusObject?.combinedStatus}"></div>
+          <h1>${this.statusObject?.name || 'No status object assigned'}</h1>
+          <div class="copyMain" @click=${this.handleCopyAsJson}>Copy JSON</div>
+        </div>
+        ${this.statusObject?.details?.map((detailArg) => {
+          return html`
+            <div 
+              class="detail"
+              @contextmenu=${(event: MouseEvent) => {
+                event.preventDefault();
+                DeesContextmenu.openContextMenuWithOptions(event, [
+                  {
+                    name: 'Copy Value',
+                    iconName: 'lucide:copy',
+                    action: async () => {
+                      await this.copyToClipboard(detailArg.value, 'Value');
+                    },
+                  },
+                  {
+                    name: 'Copy Key',
+                    iconName: 'lucide:key',
+                    action: async () => {
+                      await this.copyToClipboard(detailArg.name, 'Key');
+                    },
+                  },
+                  {
+                    name: 'Copy Key:Value',
+                    iconName: 'lucide:copy-plus',
+                    action: async () => {
+                      await this.copyToClipboard(`${detailArg.name}: ${detailArg.value}`, 'Key:Value');
+                    },
+                  },
+                ]);
+              }}
+            >
+              <div class="statusdot ${detailArg.status}"></div>
+              <div class="detailsText">
+                <div class="label">${detailArg.name}</div>
+                <div class="value">${detailArg.value}</div>
+              </div>
+            </div>
+          `;
+        })}
+      </div>
+    `;
+  }
+
+  async firstUpdated() {}
+
+  private async copyToClipboard(text: string, type: string = 'Text') {
+    try {
+      await navigator.clipboard.writeText(text);
+      console.log(`${type} copied to clipboard`);
+      // You could add visual feedback here if needed
+    } catch (err) {
+      console.error(`Failed to copy ${type}:`, err);
+    }
+  }
+
+  private async handleCopyAsJson() {
+    if (!this.statusObject) return;
+    
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(this.statusObject, null, 2));
+      
+      // Show feedback
+      const button = this.shadowRoot.querySelector('.copyMain') as HTMLElement;
+      const originalText = button.textContent;
+      button.textContent = 'Copied!';
+      
+      // Apply success styles based on theme
+      const isDark = !this.goBright;
+      button.style.background = isDark ? 'hsl(142.1 70.6% 45.3% / 0.1)' : 'hsl(142.1 76.2% 36.3% / 0.1)';
+      button.style.borderColor = isDark ? 'hsl(142.1 70.6% 45.3%)' : 'hsl(142.1 76.2% 36.3%)';
+      button.style.color = isDark ? 'hsl(142.1 70.6% 45.3%)' : 'hsl(142.1 76.2% 36.3%)';
+      
+      setTimeout(() => {
+        button.textContent = originalText;
+        button.style.background = '';
+        button.style.borderColor = '';
+        button.style.color = '';
+      }, 1500);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  }
+}

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

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

ts_web/elements/00group-dataview/dees-statsgrid/dees-statsgrid.demo.ts

@@ -0,0 +1,744 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import '../../00group-layout/dees-panel/dees-panel.js';
+import type { IStatsTile, ICpuCore, IPartitionData, IDiskData } from '../dees-statsgrid/dees-statsgrid.js';
+
+// Helper function to generate random CPU core data
+const generateCpuCores = (count: number): ICpuCore[] => {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i,
+    usage: Math.round(Math.random() * 100),
+    label: `${i}`,
+  }));
+};
+
+export const demoFunc = () => {
+  return html`
+  <dees-demowrapper>
+    <style>
+      ${css`
+        .demo-container {
+          display: flex;
+          flex-direction: column;
+          gap: 24px;
+          padding: 24px;
+          max-width: 1400px;
+          margin: 0 auto;
+        }
+        
+        dees-panel {
+          margin-bottom: 24px;
+        }
+        
+        dees-panel:last-child {
+          margin-bottom: 0;
+        }
+        
+        .tile-config {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+          gap: 16px;
+          margin-top: 16px;
+        }
+        
+        .config-section {
+          padding: 16px;
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+          border-radius: 6px;
+        }
+        
+        .config-title {
+          font-size: 14px;
+          font-weight: 600;
+          margin-bottom: 8px;
+          color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        }
+        
+        .config-description {
+          font-size: 13px;
+          color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
+        }
+        
+        .code-block {
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 11.8%)')};
+          border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(215 20.2% 16.8%)')};
+          border-radius: 6px;
+          padding: 16px;
+          font-family: monospace;
+          font-size: 13px;
+          overflow-x: auto;
+          white-space: pre;
+        }
+      `}
+    </style>
+    
+    <div class="demo-container">
+      <dees-panel .title=${'1. Comprehensive Dashboard'} .subtitle=${'Full-featured stats grid with various tile types, actions, and Lucide icons'}>
+        <dees-statsgrid
+          .tiles=${[
+            {
+              id: 'revenue',
+              title: 'Total Revenue',
+              value: 125420,
+              unit: '$',
+              type: 'number',
+              icon: 'lucide:dollar-sign',
+              description: '+12.5% from last month',
+              actions: [
+                {
+                  name: 'View Details',
+                  iconName: 'lucide:trending-up',
+                  action: async () => {
+                    const output = document.querySelector('#action-output');
+                    if (output) {
+                      output.textContent = 'Viewing revenue details: $125,420 (+12.5%)';
+                    }
+                  }
+                },
+                {
+                  name: 'Export Data',
+                  iconName: 'lucide:download',
+                  action: async () => {
+                    const output = document.querySelector('#action-output');
+                    if (output) {
+                      output.textContent = 'Exporting revenue data to CSV...';
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              id: 'users',
+              title: 'Active Users',
+              value: 3847,
+              type: 'number',
+              icon: 'lucide:users',
+              description: '324 new this week',
+              actions: [
+                {
+                  name: 'View User List',
+                  iconName: 'lucide:list',
+                  action: async () => {
+                    const output = document.querySelector('#action-output');
+                    if (output) {
+                      output.textContent = 'Opening user list...';
+                    }
+                  }
+                }
+              ]
+            },
+            {
+              id: 'cpu',
+              title: 'CPU Usage',
+              value: 73,
+              unit: '%',
+              type: 'gauge',
+              icon: 'lucide:cpu',
+              gaugeOptions: {
+                min: 0,
+                max: 100,
+                thresholds: [
+                  { value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
+                  { value: 60, color: 'hsl(45.4 93.4% 47.5%)' },
+                  { value: 80, color: 'hsl(0 84.2% 60.2%)' }
+                ]
+              }
+            },
+            {
+              id: 'storage',
+              title: 'Storage Used',
+              value: 65,
+              type: 'percentage',
+              icon: 'lucide:hard-drive',
+              description: '650 GB of 1 TB',
+            },
+            {
+              id: 'latency',
+              title: 'Response Time',
+              value: 142,
+              unit: 'ms',
+              type: 'trend',
+              icon: 'lucide:activity',
+              trendData: [150, 145, 148, 142, 138, 140, 135, 145, 142],
+              description: 'P95'
+            },
+            {
+              id: 'uptime',
+              title: 'System Uptime',
+              value: '99.95%',
+              type: 'text',
+              icon: 'lucide:check-circle',
+              color: 'hsl(142.1 76.2% 36.3%)',
+              description: 'Last 30 days'
+            }
+          ]}
+          .gridActions=${[
+            {
+              name: 'Refresh',
+              iconName: 'lucide:refresh-cw',
+              action: async () => {
+                const grid = document.querySelector('dees-statsgrid');
+                if (grid) {
+                  grid.style.opacity = '0.5';
+                  setTimeout(() => {
+                    grid.style.opacity = '1';
+                  }, 300);
+                }
+              }
+            },
+            {
+              name: 'Export',
+              iconName: 'lucide:share',
+              action: async () => {
+                const output = document.querySelector('#action-output');
+                if (output) {
+                  output.textContent = 'Exporting dashboard report...';
+                }
+              }
+            },
+            {
+              name: 'Settings',
+              iconName: 'lucide:settings',
+              action: async () => {
+                const output = document.querySelector('#action-output');
+                if (output) {
+                  output.textContent = 'Opening dashboard settings...';
+                }
+              }
+            }
+          ]}
+          .minTileWidth=${250}
+          .gap=${16}
+        ></dees-statsgrid>
+        
+        <div id="action-output" style="margin-top: 16px; padding: 12px; background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')}; border-radius: 6px; font-size: 14px; font-family: monospace; color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};">
+          <em>Click on tile actions or grid actions to see the result...</em>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'2. Tile Types'} .subtitle=${'Different visualization types available in the stats grid'}>
+        <dees-statsgrid
+          .tiles=${[
+            {
+              id: 'number-example',
+              title: 'Number Tile',
+              value: 42195,
+              unit: '$',
+              type: 'number',
+              icon: 'lucide:hash',
+              description: 'Simple numeric display'
+            },
+            {
+              id: 'gauge-example',
+              title: 'Gauge Tile',
+              value: 68,
+              unit: '%',
+              type: 'gauge',
+              icon: 'lucide:gauge',
+              gaugeOptions: {
+                min: 0,
+                max: 100,
+                thresholds: [
+                  { value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
+                  { value: 50, color: 'hsl(45.4 93.4% 47.5%)' },
+                  { value: 80, color: 'hsl(0 84.2% 60.2%)' }
+                ]
+              }
+            },
+            {
+              id: 'percentage-example',
+              title: 'Percentage Tile',
+              value: 78,
+              type: 'percentage',
+              icon: 'lucide:percent',
+              description: 'Progress bar visualization'
+            },
+            {
+              id: 'trend-example',
+              title: 'Trend Tile',
+              value: 892,
+              unit: 'ops/s',
+              type: 'trend',
+              icon: 'lucide:trending-up',
+              trendData: [720, 750, 780, 795, 810, 835, 850, 865, 880, 892],
+              description: 'avg'
+            },
+            {
+              id: 'text-example',
+              title: 'Text Tile',
+              value: 'Operational',
+              type: 'text',
+              icon: 'lucide:info',
+              color: 'hsl(142.1 76.2% 36.3%)',
+              description: 'Status display'
+            }
+          ]}
+          .minTileWidth=${280}
+          .gap=${16}
+        ></dees-statsgrid>
+        
+        <div class="tile-config">
+          <div class="config-section">
+            <div class="config-title">Configuration Options</div>
+            <div class="config-description">
+              Each tile type supports different properties:
+              <ul style="margin: 8px 0; padding-left: 20px;">
+                <li><strong>Number:</strong> value, unit, color, description</li>
+                <li><strong>Gauge:</strong> value, unit, gaugeOptions (min, max, thresholds)</li>
+                <li><strong>Percentage:</strong> value (0-100), color, description</li>
+                <li><strong>Trend:</strong> value, unit, trendData array, description</li>
+                <li><strong>Text:</strong> value (string), color, description</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'3. Grid Configurations'} .subtitle=${'Different layout options and responsive behavior'}>
+        <h4 style="margin: 0 0 16px 0; font-size: 16px; font-weight: 600;">Compact Layout (180px tiles)</h4>
+        <dees-statsgrid
+          .tiles=${[
+            { id: '1', title: 'Orders', value: 156, type: 'number', icon: 'lucide:shopping-cart' },
+            { id: '2', title: 'Revenue', value: 8420, unit: '$', type: 'number', icon: 'lucide:dollar-sign' },
+            { id: '3', title: 'Users', value: 423, type: 'number', icon: 'lucide:users' },
+            { id: '4', title: 'Growth', value: 12.5, unit: '%', type: 'number', icon: 'lucide:trending-up', color: 'hsl(142.1 76.2% 36.3%)' }
+          ]}
+          .minTileWidth=${180}
+          .gap=${12}
+        ></dees-statsgrid>
+        
+        <h4 style="margin: 24px 0 16px 0; font-size: 16px; font-weight: 600;">Spacious Layout (320px tiles)</h4>
+        <dees-statsgrid
+          .tiles=${[
+            {
+              id: 'spacious1',
+              title: 'Monthly Revenue',
+              value: 184500,
+              unit: '$',
+              type: 'number',
+              icon: 'lucide:credit-card',
+              description: 'Total revenue this month'
+            },
+            {
+              id: 'spacious2',
+              title: 'Customer Satisfaction',
+              value: 94,
+              type: 'percentage',
+              icon: 'lucide:smile',
+              description: 'Based on 1,234 reviews'
+            },
+            {
+              id: 'spacious3',
+              title: 'Server Response',
+              value: 98,
+              unit: 'ms',
+              type: 'trend',
+              icon: 'lucide:server',
+              trendData: [105, 102, 100, 99, 98, 98, 97, 98],
+              description: 'avg response time'
+            }
+          ]}
+          .minTileWidth=${320}
+          .gap=${20}
+        ></dees-statsgrid>
+      </dees-panel>
+      
+      <dees-panel .title=${'4. CPU Cores Visualization'} .subtitle=${'Vertical bar visualization for multi-core CPU usage with column spanning'}>
+        <dees-statsgrid
+          id="cpu-cores-grid"
+          .tiles=${[
+            {
+              id: 'cpu-cores-8',
+              title: 'CPU Cores (8-core)',
+              value: 0,
+              type: 'cpuCores',
+              icon: 'lucide:cpu',
+              columnSpan: 2,
+              coresData: generateCpuCores(8),
+              description: 'Intel i7 - 8 cores'
+            },
+            {
+              id: 'memory',
+              title: 'Memory Usage',
+              value: 68,
+              type: 'percentage',
+              icon: 'lucide:database',
+              description: '13.6 GB of 20 GB'
+            },
+            {
+              id: 'cpu-cores-16',
+              title: 'CPU Cores (16-core)',
+              value: 0,
+              type: 'cpuCores',
+              icon: 'lucide:cpu',
+              columnSpan: 2,
+              coresData: generateCpuCores(16),
+              description: 'AMD Ryzen 9 - 16 cores'
+            },
+            {
+              id: 'network',
+              title: 'Network I/O',
+              value: 245,
+              unit: 'MB/s',
+              type: 'trend',
+              icon: 'lucide:network',
+              trendData: [200, 220, 235, 240, 238, 245],
+              description: 'throughput'
+            },
+            {
+              id: 'cpu-cores-32',
+              title: 'Server CPU (32-core)',
+              value: 0,
+              type: 'cpuCores',
+              icon: 'lucide:server',
+              columnSpan: 3,
+              coresData: generateCpuCores(32),
+              description: 'AMD EPYC - 32 cores'
+            },
+            {
+              id: 'disk',
+              title: 'Disk Usage',
+              value: 42,
+              type: 'percentage',
+              icon: 'lucide:hard-drive',
+              description: '420 GB of 1 TB'
+            }
+          ]}
+          .gridActions=${[
+            {
+              name: 'Randomize',
+              iconName: 'lucide:shuffle',
+              action: async () => {
+                const grid = document.querySelector('#cpu-cores-grid') as any;
+                if (!grid) return;
+                const tiles = grid.tiles.map((tile: any) => {
+                  if (tile.type === 'cpuCores' && tile.coresData) {
+                    return {
+                      ...tile,
+                      coresData: tile.coresData.map((core: any) => ({
+                        ...core,
+                        usage: Math.round(Math.random() * 100)
+                      }))
+                    };
+                  }
+                  return tile;
+                });
+                grid.tiles = tiles;
+              }
+            }
+          ]}
+          .minTileWidth=${250}
+          .gap=${16}
+        ></dees-statsgrid>
+      </dees-panel>
+
+      <dees-panel .title=${'5. Interactive Features'} .subtitle=${'Tiles with actions and real-time updates'}>
+        <dees-statsgrid
+          id="interactive-grid"
+          .tiles=${[
+            {
+              id: 'live-cpu',
+              title: 'Live CPU',
+              value: 45,
+              unit: '%',
+              type: 'gauge',
+              icon: 'lucide:cpu',
+              gaugeOptions: {
+                min: 0,
+                max: 100,
+                thresholds: [
+                  { value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
+                  { value: 60, color: 'hsl(45.4 93.4% 47.5%)' },
+                  { value: 80, color: 'hsl(0 84.2% 60.2%)' }
+                ]
+              }
+            },
+            {
+              id: 'live-requests',
+              title: 'Requests/sec',
+              value: 892,
+              type: 'trend',
+              icon: 'lucide:activity',
+              trendData: [850, 860, 870, 880, 885, 890, 892]
+            },
+            {
+              id: 'live-memory',
+              title: 'Memory Usage',
+              value: 62,
+              type: 'percentage',
+              icon: 'lucide:database'
+            },
+            {
+              id: 'counter',
+              title: 'Event Counter',
+              value: 0,
+              type: 'number',
+              icon: 'lucide:zap',
+              actions: [
+                {
+                  name: 'Increment',
+                  iconName: 'lucide:plus',
+                  action: async () => {
+                    const grid = document.querySelector('#interactive-grid') as any;
+                    if (!grid) return;
+                    const tile = grid.tiles.find((t: any) => t.id === 'counter');
+                    tile.value = typeof tile.value === 'number' ? tile.value + 1 : 1;
+                    grid.tiles = [...grid.tiles];
+                  }
+                },
+                {
+                  name: 'Reset',
+                  iconName: 'lucide:rotate-ccw',
+                  action: async () => {
+                    const grid = document.querySelector('#interactive-grid') as any;
+                    if (!grid) return;
+                    const tile = grid.tiles.find((t: any) => t.id === 'counter');
+                    tile.value = 0;
+                    grid.tiles = [...grid.tiles];
+                  }
+                }
+              ]
+            }
+          ]}
+          .gridActions=${[
+            {
+              name: 'Start Live Updates',
+              iconName: 'lucide:play',
+              action: async function() {
+                // Toggle live updates
+                if (!(window as any).liveUpdateInterval) {
+                  (window as any).liveUpdateInterval = setInterval(() => {
+                    const grid = document.querySelector('#interactive-grid') as any;
+                    if (grid) {
+                      const tiles = [...grid.tiles];
+                      
+                      // Update CPU gauge
+                      const cpuTile = tiles.find(t => t.id === 'live-cpu');
+                      cpuTile.value = Math.max(0, Math.min(100, cpuTile.value + (Math.random() * 20 - 10)));
+                      
+                      // Update requests trend
+                      const requestsTile = tiles.find(t => t.id === 'live-requests');
+                      const newValue = requestsTile.value + Math.round(Math.random() * 50 - 25);
+                      requestsTile.value = Math.max(800, newValue);
+                      requestsTile.trendData = [...requestsTile.trendData.slice(1), requestsTile.value];
+                      
+                      // Update memory percentage
+                      const memoryTile = tiles.find(t => t.id === 'live-memory');
+                      memoryTile.value = Math.max(0, Math.min(100, memoryTile.value + (Math.random() * 10 - 5)));
+                      
+                      grid.tiles = tiles;
+                    }
+                  }, 1000);
+                  
+                  this.name = 'Stop Live Updates';
+                  this.iconName = 'lucide:pause';
+                } else {
+                  clearInterval((window as any).liveUpdateInterval);
+                  (window as any).liveUpdateInterval = null;
+                  this.name = 'Start Live Updates';
+                  this.iconName = 'lucide:play';
+                }
+              }
+            }
+          ]}
+          .minTileWidth=${250}
+          .gap=${16}
+        ></dees-statsgrid>
+      </dees-panel>
+      
+      <dees-panel .title=${'6. Code Example'} .subtitle=${'How to implement a stats grid with TypeScript'}>
+        <div class="code-block">${`const tiles: IStatsTile[] = [
+  {
+    id: 'revenue',
+    title: 'Total Revenue',
+    value: 125420,
+    unit: '$',
+    type: 'number',
+    icon: 'lucide:dollar-sign',
+    description: '+12.5% from last month',
+    actions: [
+      {
+        name: 'View Details',
+        iconName: 'lucide:trending-up',
+        action: async () => {
+          console.log('View revenue details');
+        }
+      }
+    ]
+  },
+  {
+    id: 'cpu',
+    title: 'CPU Usage',
+    value: 73,
+    unit: '%',
+    type: 'gauge',
+    icon: 'lucide:cpu',
+    gaugeOptions: {
+      min: 0,
+      max: 100,
+      thresholds: [
+        { value: 0, color: 'hsl(142.1 76.2% 36.3%)' },
+        { value: 60, color: 'hsl(45.4 93.4% 47.5%)' },
+        { value: 80, color: 'hsl(0 84.2% 60.2%)' }
+      ]
+    }
+  }
+];
+
+// Render the stats grid
+html\`
+  <dees-statsgrid
+    .tiles=\${tiles}
+    .minTileWidth=\${250}
+    .gap=\${16}
+    .gridActions=\${[
+      {
+        name: 'Refresh',
+        iconName: 'lucide:refresh-cw',
+        action: async () => console.log('Refresh')
+      }
+    ]}
+  ></dees-statsgrid>
+\`;`}</div>
+      </dees-panel>
+
+      <dees-panel .title=${'7. Disk & Storage Tiles'} .subtitle=${'Partition and physical disk visualization tiles'}>
+        <dees-statsgrid
+          .tiles=${[
+            {
+              id: 'root-partition',
+              title: 'Root Partition',
+              value: 0,
+              type: 'partition',
+              icon: 'lucide:folder-root',
+              partitionData: {
+                used: 698_341_425_152,      // ~650 GB
+                total: 1_073_741_824_000,   // ~1 TB
+                filesystem: 'ext4',
+                mountPoint: '/'
+              }
+            },
+            {
+              id: 'home-partition',
+              title: 'Home Partition',
+              value: 0,
+              type: 'partition',
+              icon: 'lucide:home',
+              partitionData: {
+                used: 214_748_364_800,      // ~200 GB
+                total: 536_870_912_000,     // ~500 GB
+                filesystem: 'ext4',
+                mountPoint: '/home'
+              }
+            },
+            {
+              id: 'data-partition',
+              title: 'Data Partition',
+              value: 0,
+              type: 'partition',
+              icon: 'lucide:database',
+              partitionData: {
+                used: 1_932_735_283_200,    // ~1.8 TB (90% - critical)
+                total: 2_147_483_648_000,   // ~2 TB
+                filesystem: 'xfs',
+                mountPoint: '/data'
+              }
+            },
+            {
+              id: 'nvme-ssd',
+              title: 'Primary NVMe',
+              value: 0,
+              type: 'disk',
+              icon: 'lucide:hard-drive',
+              columnSpan: 2,
+              diskData: {
+                capacity: 2_000_000_000_000,  // 2 TB
+                model: 'Samsung 990 Pro',
+                type: 'nvme',
+                iops: {
+                  read: 7450,
+                  write: 6900
+                },
+                health: 98
+              }
+            },
+            {
+              id: 'sata-ssd',
+              title: 'Secondary SSD',
+              value: 0,
+              type: 'disk',
+              icon: 'lucide:hard-drive',
+              diskData: {
+                capacity: 1_000_000_000_000,  // 1 TB
+                model: 'Crucial MX500',
+                type: 'ssd',
+                iops: {
+                  read: 560,
+                  write: 510
+                },
+                health: 85
+              }
+            },
+            {
+              id: 'hdd-storage',
+              title: 'Backup HDD',
+              value: 0,
+              type: 'disk',
+              icon: 'lucide:archive',
+              diskData: {
+                capacity: 8_000_000_000_000,  // 8 TB
+                model: 'Seagate IronWolf',
+                type: 'hdd',
+                iops: {
+                  read: 210,
+                  write: 195
+                },
+                health: 42
+              }
+            }
+          ]}
+          .minTileWidth=${280}
+          .gap=${16}
+        ></dees-statsgrid>
+
+        <div class="tile-config">
+          <div class="config-section">
+            <div class="config-title">Partition Tile Properties</div>
+            <div class="config-description">
+              <ul style="margin: 8px 0; padding-left: 20px;">
+                <li><strong>partitionData.used:</strong> Used space in bytes (auto-formatted)</li>
+                <li><strong>partitionData.total:</strong> Total capacity in bytes</li>
+                <li><strong>partitionData.filesystem:</strong> Filesystem type (ext4, xfs, ntfs)</li>
+                <li><strong>partitionData.mountPoint:</strong> Mount point path (optional)</li>
+              </ul>
+              Color thresholds: Normal (&lt;75%), Warning (75-90%), Critical (&gt;90%)
+            </div>
+          </div>
+          <div class="config-section">
+            <div class="config-title">Disk Tile Properties</div>
+            <div class="config-description">
+              <ul style="margin: 8px 0; padding-left: 20px;">
+                <li><strong>diskData.capacity:</strong> Total capacity in bytes</li>
+                <li><strong>diskData.model:</strong> Disk model name (optional)</li>
+                <li><strong>diskData.type:</strong> Disk type: 'ssd', 'hdd', or 'nvme'</li>
+                <li><strong>diskData.iops:</strong> Read/write IOPS (optional)</li>
+                <li><strong>diskData.health:</strong> Health percentage 0-100 (optional)</li>
+              </ul>
+              Health thresholds: Good (70-100%), Warning (30-70%), Critical (&lt;30%)
+            </div>
+          </div>
+        </div>
+      </dees-panel>
+    </div>
+
+    <script>
+      // Cleanup live updates on page unload
+      window.addEventListener('beforeunload', () => {
+        if ((window as any).liveUpdateInterval) {
+          clearInterval((window as any).liveUpdateInterval);
+        }
+      });
+    </script>
+  </dees-demowrapper>
+  `;
+};

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

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