v3.1.1

- 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.

changelog.md

@@ -1,5 +1,337 @@
 # Changelog
 
+## 2025-12-08 - 3.1.1 - fix(dees-appui)
+Extract demos for main and secondary app menus, adjust collapsed styles and toggle placement, bump devDependency
+
+- Extracted inline demo markup into separate demo files: ts_web/elements/00group-appui/dees-appui-mainmenu/dees-appui-mainmenu.demo.ts and ts_web/elements/00group-appui/dees-appui-secondarymenu/dees-appui-secondarymenu.demo.ts and wired them up via imported demoFunc to reduce component size.
+- Moved collapse toggle button markup in both dees-appui-mainmenu and dees-appui-secondarymenu templates to after the main container to improve layout/stacking and focus behavior.
+- Adjusted collapsed logo/heading styles: removed extra padding/gap and hide logo text using display:none for a cleaner collapsed state.
+- Bumped devDependency @git.zone/tswatch from ^2.3.1 to ^2.3.2 in package.json.
+
+## 2025-12-08 - 3.1.0 - feat(dees-appui)
+Add collapsible/compact mode to AppUI sidebars (mainmenu & secondarymenu) with toggles, tooltips and improved z-index stacking
+
+- Add collapsed property to dees-appui-mainmenu and dees-appui-secondarymenu (reflect: true) to enable compact horizontal mode.
+- Add floating collapse toggle buttons and public toggleCollapse() methods on mainmenu and secondarymenu; these dispatch 'collapse-change' events (bubbles & composed).
+- Expose and track collapse state in dees-appui-base via mainmenuCollapsed and secondarymenuCollapsed properties; bind states to child components and re-emit collapse-change events as mainmenu-collapse-change and secondarymenu-collapse-change.
+- Implement collapsed styles and animations: reduced sidebar widths, hide/compact labels and headers, center icons, hide badges, and add smooth width/opacity transitions.
+- Add tooltips that appear for tabs/items when sidebars are collapsed to preserve discoverability.
+- Adjust layout grid in DeesAppuiBase (use auto columns) and add explicit z-index layering to ensure proper stacking order of mainmenu, secondarymenu, maincontent and activitylog.
+
+## 2025-12-08 - 3.0.1 - fix(dees-appui)
+Normalize header heights and box-sizing for App UI components
+
+- Set topbar/header heights to 48px (was 40px) and adjusted dependent offsets (activity container top, topShadow position) in dees-appui-activitylog.
+- Make logo and secondary menu headers fixed 48px tall and replace vertical padding with horizontal padding for consistent vertical alignment (dees-appui-mainmenu, dees-appui-secondarymenu).
+- Ensure tabs wrapper uses explicit 48px height and tabsContainer fills height (height:100%) to keep tab items vertically centered (dees-appui-tabs).
+- Add box-sizing: border-box to affected header/logo containers to prevent overflow and ensure correct sizing.
+- Minor CSS alignment and overflow fixes to improve consistent layout and scrolling behavior across the app UI components.
+
+## 2025-12-08 - 3.0.0 - BREAKING CHANGE(dees-appui-secondarymenu)
+Add SecondaryMenu component and replace Mainselector with new SecondaryMenu in AppUI
+
+- Add dees-appui-secondarymenu component: collapsible groups, badges, dynamic heading, context menu and legacy flat-options support
+- Introduce interfaces ISecondaryMenuItem and ISecondaryMenuGroup under elements/interfaces
+- Replace dees-appui-mainselector usage with dees-appui-secondarymenu in DeesAppuiBase (props/events updated: secondarymenuGroups, secondarymenuHeading, secondarymenuOptions, item-select / secondarymenu-item-select)
+- Remove dees-appui-mainselector implementation and its index export; update group exports and imports to expose secondarymenu
+- Update demos and pages to showcase the new SecondaryMenu and adjust import paths for grouped components
+- Bump devDependency @git.zone/tswatch to ^2.3.1
+
+## 2025-12-08 - 2.0.7 - fix(structure)
+Add many new UI components, input controls, charts, editors, and demos
+
+- Introduce App UI components: dees-appui-appbar, dees-appui-mainmenu, dees-appui-mainselector, dees-appui-maincontent, dees-appui-activitylog, dees-appui-profiledropdown, dees-appui-tabs, dees-appui-base, dees-appui-view (templates, styles and demos included).
+- Add a comprehensive set of input components: dees-input-text, dees-input-checkbox, dees-input-dropdown, dees-input-fileupload, dees-input-datepicker, dees-input-phone, dees-input-iban, dees-input-quantityselector, dees-input-list, dees-input-typelist, dees-input-tags, dees-input-multitoggle, dees-input-radiogroup, dees-input-richtext and supporting demos/styles/templates.
+- Add form primitives and integration: dees-form and dees-form-submit with validation, collection and demo pages showcasing usage.
+- Add button family and utilities: dees-button (with updated variants, sizes, status handling and demo), dees-button-group and dees-button-exit.
+- Add charting components: dees-chart-area (ApexCharts integration) and dees-chart-log (log viewer) plus rich demo scenarios and realtime features.
+- Add data display components: dees-dataview-codebox (highlight.js integration) and dees-dataview-statusobject with copy/context behaviours and demos.
+- Add editor tooling: dees-editor (Monaco loader/version management), dees-editor-markdown and dees-editor-markdownoutlet; also TipTap-based richtext input with toolbar and link handling.
+- Add global utilities and infra: dees-toast (programmatic toast API and containers), z-index registry and theme/font helpers (fonts, color tokens), plus many styles and accessibility/keyboard improvements across components.
+- Export and index updates: new group exports added to ts_web/elements index and many index.ts files to expose the new components and demos.
+- Extensive demos and showcase pages added (input-showcase, component demos) to illustrate integration, keyboard navigation, theming and form flows.
+
+## 2025-12-06 - 2.0.6 - fix(dees-input-richtext)
+Initialize editor and link input element references in firstUpdated to ensure they exist before editor initialization.
+
+- Assign editorElement from shadowRoot.querySelector('.editor-content') in firstUpdated.
+- Assign linkInputElement from shadowRoot.querySelector('.link-input input') in firstUpdated.
+- Call initializeEditor() after DOM references are set to avoid undefined-element runtime errors.
+
+## 2025-12-06 - 2.0.5 - fix(build)
+Bump devDependencies: update @git.zone/tsbundle and @git.zone/tswatch to patched versions
+
+- Update @git.zone/tsbundle from ^2.6.2 to ^2.6.3
+- Update @git.zone/tswatch from ^2.2.2 to ^2.2.3
+
+## 2025-12-06 - 2.0.4 - fix(imports)
+Normalize and fix relative import paths for web components to ensure correct module resolution
+
+- Replaced numerous './<component>.js' imports with explicit '../<component>/<component>.js' paths across many elements and demos to fix module resolution.
+- Updated imports for core shared components such as dees-icon, dees-panel, dees-contextmenu, dees-windowlayer, dees-windowcontrols and several app-ui components (appbar, maincontent, mainselector, activitylog, mobilenavigation, modal, pdf, profilepicture, statsgrid, etc.).
+- No runtime behavior changes — this is a refactor to import paths to address build/bundling and resolution issues.
+
+## 2025-12-03 - 2.0.3 - fix(dependencies)
+Bump dependencies and developer tooling versions
+
+- Upgrade lucide from ^0.553.0 to ^0.555.0
+- Bump @git.zone/tsbuild from ^3.1.0 to ^3.1.2
+- Bump @git.zone/tsbundle from ^2.5.2 to ^2.6.2
+- Bump @git.zone/tstest from ^2.8.1 to ^3.1.3
+- Bump @git.zone/tswatch from ^2.2.1 to ^2.2.2
+- Upgrade @types/node from ^22.0.0 to ^24.10.1
+- Patch release: increment package version to 2.0.3
+
+## 2025-11-30 - 2.0.2 - fix(dees-stepper)
+Make step validation abortable and cancel active step listeners when navigating
+
+- Extend IStep.validationFunc signature to accept an optional AbortSignal so validation handlers can be cancelled.
+- Store an AbortController on the selected step and pass its signal into validationFunc when invoked.
+- Abort the step's AbortController when navigating to the previous or next step to cancel any active listeners or async operations.
+
+## 2025-11-30 - 2.0.1 - fix(dees-stepper)
+Improve dees-stepper visual style and transitions
+
+- Smooth animation: extend .step transition duration and use a cubic-bezier curve for smoother motion.
+- Add .step.entrance class with a shorter easing for entrance animations to keep entrance timing distinct.
+- Visual tweaks: reduce border-radius from 18px to 12px and increase inner content padding to 32px.
+- Color and border updates: adjust background and border colors for light/dark themes to more consistent values.
+- Shadow simplification: replace theme-dependent heavy shadows with a single subtle shadow (0 8px 32px rgba(0,0,0,0.4)).
+- Remove selected-state border/box-shadow overrides (selection visuals simplified).
+- Remove background-clip: padding-box to simplify rendering.
+
+## 2025-11-17 - 2.0.0 - BREAKING CHANGE(decorators)
+Migrate to TC39 standard decorators (accessor) across components, update tsconfig and bump dependencies
+
+- Replaced experimental decorator-backed class fields with the TC39-compatible "accessor" form across ~69 web component files (properties and state fields) to follow Lit 3.x recommendations.
+- Updated tsconfig.json to remove experimentalDecorators and useDefineForClassFields, aligning compiler settings with the standard decorators migration.
+- Fixed optional/nullable fields to explicit `Type | undefined = undefined` where necessary to preserve runtime behavior and typing.
+- Adjusted/remove usages of some non-reactive decorators/@query patterns to be compatible with the new decorator model (notable changes in a few components).
+- Bumped several dependencies and devDependencies (examples: @design.estate/dees-domtools, @design.estate/dees-element, @design.estate/dees-wcctools, @git.zone/tsbuild, @git.zone/tstest, apexcharts, lucide).
+- Added migration notes and testing summary to readme.hints.md documenting the TC39 decorators migration and verification steps.
+
+## 2025-10-23 - 1.12.6 - fix(dependencies)
+Bump FontAwesome to ^7.1.0 and add local claude settings
+
+- Updated @fortawesome packages (@fortawesome/fontawesome-svg-core, @fortawesome/free-brands-svg-icons, @fortawesome/free-regular-svg-icons, @fortawesome/free-solid-svg-icons) to ^7.1.0 in package.json
+- Added .claude/settings.local.json to configure local Claude/tooling permissions for repository operations
+
+## 2025-09-23 - 1.12.5 - fix(ci)
+Add local permissions settings for development
+
+- Adds a new local settings file: .claude/settings.local.json
+- Provides explicit permission entries for development tasks (allow running pnpm scripts, reading files, searching/replacing patterns, activating project, and helper tooling)
+- Intended for local dev environment to enable tool automation without changing repository code
+
+## 2025-09-20 - 1.12.4 - fix(ci)
+Add local assistant settings to enable permitted dev tooling commands
+
+- Add a local assistant settings file to configure allowed development tooling commands.
+- Allows running pnpm scripts, file read/search/replace operations and other local project helper actions.
+- Local configuration only — does not change library code or public API.
+
+## 2025-09-19 - 1.12.3 - fix(dees-input-fileupload)
+Show selected files inside dropzone and improve file upload UX
+
+- Render the selected file list inside the dropzone container so files are displayed inline with the drop area
+- Add dropzone--has-files class and styles to visually indicate when files are present
+- Avoid opening the file selector when clicking on the browse button or inside the file list (prevents accidental re-opening)
+- Refine file list and file-row styles (sizes, paddings, border radius, hover/background behavior and thumbnail/icon sizes) for a more compact and consistent appearance
+- Simplify empty-state handling by returning an empty template when no files are present (file list is only rendered when files exist)
+
+## 2025-09-18 - 1.12.2 - fix(dees-input-wysiwyg)
+Integrate output format preview into WYSIWYG demo; update plan and add local dev settings
+
+- Wire output format preview into the WYSIWYG demo (ts_web/elements/dees-input-wysiwyg.demo.ts) by calling setupOutputFormatDemo(editors.meeting, editors.recipe) so HTML/Markdown preview controls are initialized.
+- Update readme.plan.md: mark the Output Formats review tasks as completed and document that preview controls were added.
+- Add a local settings file to allow running local tooling tasks (grants permission for pnpm run scripts and related local commands).
+- No library API or runtime component behavior changed — this is a demo/documentation and local-settings update.
+
+## 2025-09-18 - 1.12.1 - fix(ci)
+Add local settings to allow running pnpm scripts and enable dev chat permission
+
+- Add a repository-local settings file granting permission to run pnpm scripts (Bash(pnpm run:*)) for development tooling.
+- Enable the mcp__zen__chat permission for local dev workflows.
+
+## 2025-09-18 - 1.12.0 - feat(dees-stepper)
+Revamp dees-stepper: modern styling, new steps and improved navigation/validation
+
+- Visual refresh for dees-stepper: updated card shapes, shadows, refined borders and stronger selected-state visuals for a modern shadcn-inspired look
+- Improved transitions and animations (transform, box-shadow, filter) for smoother step selection and show/hide behavior
+- Expanded default/demo steps: replaced small sample with a richer multi-step flow (Account Setup, Profile Details, Contact Information, Team Size, Goals, Brand Preferences, Integrations, Review & Launch)
+- Enhanced step interactions: safer goNext/goBack handling with boundary checks and reset of validation flags to avoid stale validation state
+- Better toolbar/controls placement for stepper demo (spacing, counters, accessible back control) and improved keyboard/UX affordances
+- Minor documentation and meta updates: readme.plan.md extended with dees-stepper plan items and added .claude/settings.local.json
+
+## 2025-09-18 - 1.11.8 - fix(ci)
+Add local tool permissions config to allow running pnpm scripts and enable mcp__zen__chat
+
+- Add local settings file to grant permission to run pnpm scripts (Bash(pnpm run:*))
+- Enable mcp__zen__chat permission in local tool settings
+
+## 2025-09-16 - 1.11.7 - fix(readme)
+Expand README with comprehensive component documentation, examples and developer guide; add local Claude settings
+
+- Expanded README substantially: installation, component overview, detailed component docs, usage examples, demos and developer guidance
+- Updated many example snippets and API usage examples (icons, inputs, editor, forms, overlays, charts, etc.) to be more explicit and consistent
+- Added .claude/settings.local.json to configure local Claude permissions for repository tooling
+- No runtime or library code changes — documentation and demo content only
+
+## 2025-09-16 - 1.11.6 - fix(dees-table)
+Improve Lucene range comparisons, pin monaco-editor to 0.52.2, and add local dev metadata
+
+- Fix lucene inRange behavior to correctly compare homogeneous types (strings, numbers, dates) and fall back to string comparison when needed (ts_web/elements/dees-table/lucene.ts).
+- Pin monaco-editor to 0.52.2 in package.json to avoid a breaking upgrade regression observed with ^0.53.0.
+- Add local development/tooling metadata and conveniences: .claude/settings.local.json (tool permissions) and .serena/ memory files (done_checklist, project_overview, style_and_conventions, suggested_commands).
+- Minor housekeeping: update project dev docs / memories to capture build/test/checklist guidance.
+
+## 2025-09-16 - 1.11.5 - fix(ci)
+Add local Claude agent settings for CI tooling
+
+- Add .claude/settings.local.json to configure local Claude agent permissions
+- Allow Bash commands matching pnpm run:* and the mcp__zen__chat permission for development tooling
+
+## 2025-09-10 - 1.11.4 - fix(readme)
+Rewrite and expand README with Quick Start, feature highlights, demos and usage examples; add local Claude settings file
+
+- Completely rewritten and reorganized README: added Quick Start, component highlights, usage examples, demos, development workflow, troubleshooting and links.
+- Added .claude/settings.local.json with local Claude permission configuration.
+
+## 2025-09-08 - 1.11.3 - fix(dees-input-list)
+Prevent list animations from affecting scroll bounds and fix content-visibility issues in dees-input-list; add local developer settings
+
+- dees-input-list: add overflow:hidden to list items to prevent animations from altering scroll bounds and causing visual/scroll glitches
+- dees-input-list: force content-visibility/contain to visible/none to avoid unexpected scrolling/layout issues when items animate
+- Add .claude/settings.local.json with local developer permissions (allows running pnpm scripts via Claude-local tooling)
+
+## 2025-09-07 - 1.11.2 - fix(DeesFormSubmit)
+Make form submit robust by locating nearest dees-form via closest(); add local CLAUDE settings
+
+- Fix: DeesFormSubmit.submit now walks up the DOM with closest('dees-form') to find and call gatherAndDispatch on the parent form. This fixes cases where the submit button is slotted or not a direct child of the form.
+- Chore: Add .claude/settings.local.json to permit running pnpm scripts in the local CLAUDE environment (allows Bash(pnpm run:*)).
+
+## 2025-09-06 - 1.11.1 - fix(dees-input-text)
+Normalize Lucide icon names for password toggle
+
+- Updated password visibility toggle icons in dees-input-text from 'lucide:eye'/'lucide:eye-off' to 'lucide:Eye'/'lucide:EyeOff' to match Lucide exports and avoid missing icon rendering.
+
+## 2025-09-05 - 1.11.0 - feat(dees-icon)
+Add full icon list and improve dees-icon demo with copy-all functionality and UI tweaks
+
+- Added readme.icons.md containing 1900+ icon identifiers (FontAwesome + Lucide) for easy reference and tooling
+- Enhanced ts_web/elements/dees-icon.demo.ts: added a 'Copy All Icon Names' button that copies prefixed icon names (fa:..., lucide:...) to the clipboard and shows temporary feedback
+- Updated demo presentation: prefixed displayed icon names (fa: / lucide:), improved search-container spacing and added button styling for better UX
+- Changes are documentation/demo only — no production runtime component logic changed
+
+## 2025-09-05 - 1.10.12 - fix(dees-simple-appdash)
+Fix icon rendering in dees-simple-appdash to respect provided icon strings
+
+- dees-simple-appdash: stop forcing a 'lucide:' prefix when rendering view icons — use the icon string as provided.
+- Prevents incorrect/missing icons when the iconName already includes a library prefix (e.g. 'fa:' or 'lucide:').
+
+## 2025-09-05 - 1.10.11 - fix(dees-simple-appdash)
+Bump deps and fix dees-simple-appdash icon binding and terminal sizing
+
+- Updated runtime dependencies: @design.estate/dees-element -> ^2.1.2, @design.estate/dees-wcctools -> ^1.1.1, @fortawesome/* -> ^7.0.1, apexcharts -> ^5.3.4, lucide -> ^0.542.0 (compatibility/security/stability updates)
+- Updated dev tooling: @git.zone/tsbuild -> ^2.6.8, @git.zone/tstest -> ^2.3.6, @git.zone/tswatch -> ^2.2.1
+- Fix: dees-simple-appdash — use proper string interpolation for lucide icon properties (prevents incorrect icon rendering)
+- Fix: dees-simple-appdash — enforce terminal maxWidth/maxHeight to avoid overflow and improve layout stability
+- Cosmetic: small style/behavior tweaks to dees-simple-appdash (logout/terminal/wifi icon bindings corrected)
+
+## 2025-06-29 - 1.10.10 - improve(dees-dashboardgrid, dees-input-wysiwyg)
+Enhanced dashboard grid component with advanced spacing and layout features inspired by gridstack.js
+
+Dashboard Grid improvements:
+- Improved margin system supporting uniform or individual margins (top, right, bottom, left)
+- Added collision detection to prevent widget overlap during drag operations
+- Implemented auto-positioning for new widgets to find first available space
+- Added compact() method to eliminate gaps and compress layout vertically or horizontally
+- Enhanced resize constraints with minW, maxW, minH, maxH support
+- Added optional grid lines visualization for better layout understanding
+- Improved resize handles with better visibility and hover states
+- Added RTL (right-to-left) layout support
+- Implemented cellHeightUnit option supporting 'px', 'em', 'rem', or 'auto' (square cells)
+- Added configurable animation with enableAnimation property
+- Enhanced demo with interactive controls for testing all features
+- Better calculation of widget positions accounting for margins between cells
+- Added findAvailablePosition() for intelligent widget placement
+- Improved drag and resize calculations for pixel-perfect positioning
+
+WYSIWYG editor drag and drop fixes:
+- Fixed drop indicator positioning to properly account for block margins
+- Added defensive checks in drag event handlers to prevent potential crashes
+- Improved updateBlockPositions with null checks and error handling
+- Updated drop indicator calculation to use simplified margin approach
+- Fixed drop indicator height to match the exact space occupied by dragged blocks
+- Improved drop indicator positioning algorithm to accurately show where blocks will land
+- Simplified visual block position calculations accounting for CSS transforms
+- Enhanced margin calculation to use correct values based on block type (16px for paragraphs, 24px for headings, 20px for code/quotes)
+- Fixed index calculation issue when dragging blocks downward by adjusting target index for excluded dragged block
+
+## 2025-06-28 - 1.10.9 - feat(dees-dashboardgrid)
+Add new dashboard grid component with drag-and-drop and resize capabilities
+
+- Created dees-dashboardgrid component for building flexible dashboard layouts
+- Features drag-and-drop functionality for rearranging widgets
+- Includes resize handles for adjusting widget dimensions
+- Supports configurable grid properties (columns, cell height, gap)
+- Provides widget locking and editable mode controls
+- Styled with shadcn design principles
+- No external dependencies - built with native browser APIs
+- Emits events for widget movements and resizes
+- Includes comprehensive demo with sample dashboard widgets
+
+## 2025-06-27 - 1.10.8 - feat(ui-components)
+Update multiple components with shadcn-aligned styling and improved animations
+
+- Updated dees-modal with shadcn colors, borders, and subtle shadows
+- Updated dees-chips with shadcn styling and fixed selection logic bug
+- Updated dees-dataview-codebox with shadcn syntax highlighting colors and responsive label layout
+- Updated dees-input-multitoggle with transparent blue indicator and smooth animations
+- Updated dees-appui-tabs with animated sliding indicator for both horizontal and vertical layouts
+- Fixed indicator positioning to be perfectly centered on tab content
+- Indicator width is content width + 8px for minimal visual padding
+- Fixed tab content centering by using consistent padding (12px → 16px on all sides)
+- Fixed icon rendering by correcting property name from .iconName to .icon
+- Added visual separators between tabs for better distinction
+- Added subtle hover backgrounds for improved interactivity
+- Refactored tabs component code for better maintainability and elegance
+- Updated dees-appui-activitylog with shadcn-aligned styling:
+  - Updated background and text colors to match shadcn palette
+  - Enhanced topbar with better spacing and typography
+  - Improved activity entries with subtle hover states and better spacing
+  - Added activity type icons with color-coded backgrounds (login, logout, view, create, update)
+  - Added date separators ("Today", "Yesterday") for better temporal organization
+  - Enhanced streaming indicators with animated pulse effect
+  - Redesigned searchbox with modern input styling, search icon, and focus states
+  - Added custom scrollbar styling for consistency
+  - Updated timestamps to be more subtle with tabular number formatting
+  - Refined shadow effects for better visual hierarchy
+  - Added subtle box shadow to component for depth
+  - Added fade-in animation for new activity entries
+  - Improved user name highlighting with better typography
+  - Updated context menu with more relevant actions
+- Improved overall spacing and visual consistency across components
+
+## 2025-06-27 - 1.10.1 - fix(modal)
+Improve modal overscroll behavior by adding 'overscroll-behavior: contain' to content container
+
+- Added 'overscroll-behavior: contain' to .modal .content to ensure proper scroll containment
+- Applied overscroll-behavior in modal container for enhanced responsiveness on mobile and desktop
+
+## 2025-06-26 - 1.10.0 - feat(dees-modal)
+Add mobileFullscreen option to modals for full-screen mobile support
+
+- Introduced a new boolean property 'mobileFullscreen' in ts_web/elements/dees-modal.ts
+- Updated modal CSS under the media query to apply 'mobile-fullscreen' class, allowing full viewport modals on mobile devices
+- Extended modal style rules to include adjustments for margin, border-radius, and maximum heights on smaller screens
+
+## 2025-06-26 - 1.9.9 - fix(dees-input-multitoggle, dees-input-typelist)
+Replace dynamic import with static import for demo functions in dees-input-multitoggle and dees-input-typelist
+
+- Converted `await import('./dees-input-multitoggle.demo.js')` to a direct static import.
+- Converted `await import('./dees-input-typelist.demo.js')` to a direct static import to improve build performance and clarity.
+
 ## 2025-06-26 - 1.9.8 - fix(deps, windowlayer)
 Update dependency versions and adjust dees-windowlayer CSS to add pointer-events fix
 
@@ -52,7 +384,7 @@ Add dees-searchbar component with live search and filter demo
 ## 2025-04-22 - 1.6.0 - feat(documentation/dees-heading)
 Add codex documentation overview and dees-heading component demo
 
-- Introduce 'codex.md' to provide a high-level overview of project layout, component patterns, and build workflow
+- Introduce contributor overview doc (`codex.md`, now consolidated into `readme.info.md`) to provide a high-level overview of project layout, component patterns, and build workflow
 - Add and update dees-heading component with demo to support multiple heading levels and horizontal rule styles
 - Update component export index to include dees-heading
 

codex.md

@@ -1,43 +0,0 @@
-# Codex: Project Overview and Codebase Structure
-
-## Project Overview
-- Package: `@design.estate/dees-catalog`
-- Focus: Web Components library providing UI elements and layouts for modern web apps.
-
-## Directory Layout
-- ts_web/: TypeScript source files
-  - elements/: Individual Web Component definitions
-  - pages/: Page-level templates for composite layouts
-- html/: Demo/app entry point loading the bundled scripts
-- dist_bundle/: Bundled browser JS and source maps
-- dist_ts_web/: ES module outputs for TypeScript/web consumers
-- dist_watch/: Watch-mode development bundle with live reload
-- test/: Browser-based tests using `@push.rocks/tapbundle`
-
-## Component Patterns
-- Each component in ts_web/elements/:
-  - Decorated with `@customElement('tag-name')`
-  - Extends `DeesElement` from `@design.estate/dees-element`
-  - Uses `@property` for reactive, reflected attributes
-  - Defines `static styles = [cssManager.defaultStyles, css`...`]`
-  - Implements `render()` returning a Lit `html` template with slots or markup
-  - Exposes a demo via `public static demo` linking to `.demo.ts` files
-
-## Build & Development Workflow
-- Install dependencies: `npm install` or `pnpm install`
-- Build production bundle: `npm run build`
-- Start dev watch mode: `npm run watch`
-- Run tests: `npm test` (launches browser fixtures)
-
-## Theming & Utilities
-- Default global styles via `cssManager.defaultStyles`
-- Theme-aware values with `cssManager.bdTheme(light, dark)`
-- DOM utilities set up in `html/index.ts` using `@design.estate/dees-domtools`
-
-## Documentation
-- `readme.md` provides an overview of all components and basic usage
-- Live examples in `.demo.ts` files
-  accessible via component `demo` static property
-
-## Updates to this file
-If you have pattern insisights or general changes to the codebase, please update this file.

package.json

@@ -1,55 +1,57 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.9.8",
+  "version": "3.1.1",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
   "type": "module",
   "scripts": {
-    "test": "tstest test/ --web --verbose --timeout 30",
+    "test": "tstest test/ --web --verbose --timeout 30 --logfile",
     "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild",
     "watch": "tswatch element",
-    "buildDocs": "tsdoc"
+    "buildDocs": "tsdoc",
+    "postinstall": "node scripts/update-monaco-version.cjs"
   },
   "author": "Lossless GmbH",
   "license": "MIT",
   "dependencies": {
-    "@design.estate/dees-domtools": "^2.3.3",
-    "@design.estate/dees-element": "^2.0.45",
-    "@design.estate/dees-wcctools": "^1.0.101",
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-brands-svg-icons": "^6.7.2",
-    "@fortawesome/free-regular-svg-icons": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@design.estate/dees-domtools": "^2.3.6",
+    "@design.estate/dees-element": "^2.1.3",
+    "@design.estate/dees-wcctools": "^1.2.1",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-brands-svg-icons": "^7.1.0",
+    "@fortawesome/free-regular-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@push.rocks/smarti18n": "^1.0.4",
     "@push.rocks/smartpromise": "^4.2.0",
-    "@push.rocks/smartstring": "^4.0.15",
+    "@push.rocks/smartstring": "^4.1.0",
     "@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.2.0",
+    "@tsclass/tsclass": "^9.3.0",
     "@webcontainer/api": "1.2.0",
-    "apexcharts": "^4.7.0",
+    "apexcharts": "^5.3.6",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
-    "lucide": "^0.523.0",
-    "monaco-editor": "^0.52.2",
+    "lit": "^3.3.1",
+    "lucide": "^0.555.0",
+    "monaco-editor": "0.52.2",
     "pdfjs-dist": "^4.10.38",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^2.6.4",
-    "@git.zone/tsbundle": "^2.5.1",
-    "@git.zone/tstest": "^2.3.1",
-    "@git.zone/tswatch": "^2.1.2",
+    "@git.zone/tsbuild": "^3.1.2",
+    "@git.zone/tsbundle": "^2.6.3",
+    "@git.zone/tstest": "^3.1.3",
+    "@git.zone/tswatch": "^2.3.2",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/tapbundle": "^6.0.3",
-    "@types/node": "^22.0.0"
+    "@types/node": "^24.10.1"
   },
   "files": [
     "ts/**/*",

readme.appui-architecture.md

@@ -1,513 +0,0 @@
-# Building Applications with dees-appui Architecture
-
-## Overview
-
-The dees-appui system provides a comprehensive framework for building desktop-style web applications with a consistent layout, navigation, and view management system. This document outlines the architecture and best practices for building applications using these components.
-
-## Core Architecture
-
-### Component Hierarchy
-
-```
-dees-appui-base
-├── dees-appui-appbar (top menu bar)
-├── dees-appui-mainmenu (left sidebar - primary navigation)
-├── dees-appui-mainselector (second sidebar - contextual navigation)
-├── dees-appui-maincontent (main content area)
-│   └── dees-appui-view (view container)
-│       └── dees-appui-tabs (tab navigation within views)
-└── dees-appui-activitylog (right sidebar - optional)
-```
-
-### View-Based Architecture
-
-The system is built around the concept of **Views** - self-contained modules that represent different sections of your application. Each view can have:
-
-- Its own tabs for sub-navigation
-- Menu items for the selector (contextual navigation)
-- Content areas with dynamic loading
-- State management
-- Event handling
-
-## Implementation Plan
-
-### Phase 1: Application Shell Setup
-
-```typescript
-// app-shell.ts
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import type { IAppView } from '@design.estate/dees-catalog';
-
-@customElement('my-app-shell')
-export class MyAppShell extends LitElement {
-  @property({ type: Array })
-  views: IAppView[] = [];
-
-  @property({ type: String })
-  activeViewId: string = '';
-
-  render() {
-    const activeView = this.views.find(v => v.id === this.activeViewId);
-    
-    return html`
-      <dees-appui-base
-        .appbarMenuItems=${this.getAppBarMenuItems()}
-        .appbarBreadcrumbs=${this.getBreadcrumbs()}
-        .appbarTheme=${'dark'}
-        .appbarUser=${{ name: 'User', status: 'online' }}
-        .mainmenuTabs=${this.getMainMenuTabs()}
-        .mainselectorOptions=${activeView?.menuItems || []}
-        @mainmenu-tab-select=${this.handleMainMenuSelect}
-        @mainselector-option-select=${this.handleSelectorSelect}
-      >
-        <dees-appui-view
-          slot="maincontent"
-          .viewConfig=${activeView}
-          @view-tab-select=${this.handleViewTabSelect}
-        ></dees-appui-view>
-      </dees-appui-base>
-    `;
-  }
-}
-```
-
-### Phase 2: View Definition
-
-```typescript
-// views/dashboard-view.ts
-export const dashboardView: IAppView = {
-  id: 'dashboard',
-  name: 'Dashboard',
-  description: 'System overview and metrics',
-  iconName: 'home',
-  tabs: [
-    {
-      key: 'overview',
-      iconName: 'chart-line',
-      action: () => console.log('Overview selected'),
-      content: () => html`
-        <dashboard-overview></dashboard-overview>
-      `
-    },
-    {
-      key: 'metrics',
-      iconName: 'tachometer-alt',
-      action: () => console.log('Metrics selected'),
-      content: () => html`
-        <dashboard-metrics></dashboard-metrics>
-      `
-    },
-    {
-      key: 'alerts',
-      iconName: 'bell',
-      action: () => console.log('Alerts selected'),
-      content: () => html`
-        <dashboard-alerts></dashboard-alerts>
-      `
-    }
-  ],
-  menuItems: [
-    { key: 'Time Range', action: () => showTimeRangeSelector() },
-    { key: 'Refresh Rate', action: () => showRefreshSettings() },
-    { key: 'Export Data', action: () => exportDashboardData() }
-  ]
-};
-```
-
-### Phase 3: View Management System
-
-```typescript
-// services/view-manager.ts
-export class ViewManager {
-  private views: Map<string, IAppView> = new Map();
-  private activeView: IAppView | null = null;
-  private viewCache: Map<string, any> = new Map();
-
-  registerView(view: IAppView) {
-    this.views.set(view.id, view);
-  }
-
-  async activateView(viewId: string) {
-    const view = this.views.get(viewId);
-    if (!view) throw new Error(`View ${viewId} not found`);
-
-    // Deactivate current view
-    if (this.activeView) {
-      await this.deactivateView(this.activeView.id);
-    }
-
-    // Activate new view
-    this.activeView = view;
-    
-    // Update navigation
-    this.updateMainSelector(view.menuItems);
-    this.updateBreadcrumbs(view);
-    
-    // Load view data if needed
-    if (!this.viewCache.has(viewId)) {
-      await this.loadViewData(view);
-    }
-    
-    return view;
-  }
-
-  private async loadViewData(view: IAppView) {
-    // Implement lazy loading of view data
-    const viewData = await import(`./views/${view.id}/data.js`);
-    this.viewCache.set(view.id, viewData);
-  }
-}
-```
-
-### Phase 4: Navigation Integration
-
-```typescript
-// navigation/app-navigation.ts
-export class AppNavigation {
-  constructor(
-    private viewManager: ViewManager,
-    private appShell: MyAppShell
-  ) {}
-
-  setupMainMenu(): ITab[] {
-    return [
-      {
-        key: 'dashboard',
-        iconName: 'home',
-        action: () => this.navigateToView('dashboard')
-      },
-      {
-        key: 'projects',
-        iconName: 'folder',
-        action: () => this.navigateToView('projects')
-      },
-      {
-        key: 'analytics',
-        iconName: 'chart-bar',
-        action: () => this.navigateToView('analytics')
-      },
-      {
-        key: 'settings',
-        iconName: 'cog',
-        action: () => this.navigateToView('settings')
-      }
-    ];
-  }
-
-  async navigateToView(viewId: string) {
-    const view = await this.viewManager.activateView(viewId);
-    this.appShell.activeViewId = viewId;
-    
-    // Update URL
-    window.history.pushState(
-      { viewId }, 
-      view.name, 
-      `/${viewId}`
-    );
-  }
-
-  handleBrowserNavigation() {
-    window.addEventListener('popstate', (event) => {
-      if (event.state?.viewId) {
-        this.navigateToView(event.state.viewId);
-      }
-    });
-  }
-}
-```
-
-### Phase 5: Dynamic View Loading
-
-```typescript
-// views/view-loader.ts
-export class ViewLoader {
-  private loadedViews: Set<string> = new Set();
-
-  async loadView(viewId: string): Promise<IAppView> {
-    if (this.loadedViews.has(viewId)) {
-      return this.getViewConfig(viewId);
-    }
-
-    // Dynamic import
-    const viewModule = await import(`./views/${viewId}/index.js`);
-    const viewConfig = viewModule.default as IAppView;
-    
-    // Register custom elements if needed
-    if (viewModule.registerElements) {
-      await viewModule.registerElements();
-    }
-    
-    this.loadedViews.add(viewId);
-    return viewConfig;
-  }
-
-  async preloadViews(viewIds: string[]) {
-    const promises = viewIds.map(id => this.loadView(id));
-    await Promise.all(promises);
-  }
-}
-```
-
-## Best Practices
-
-### 1. View Organization
-
-```
-src/
-├── views/
-│   ├── dashboard/
-│   │   ├── index.ts          # View configuration
-│   │   ├── data.ts           # Data fetching/management
-│   │   ├── components/       # View-specific components
-│   │   │   ├── dashboard-overview.ts
-│   │   │   ├── dashboard-metrics.ts
-│   │   │   └── dashboard-alerts.ts
-│   │   └── styles.ts         # View-specific styles
-│   ├── projects/
-│   │   └── ...
-│   └── settings/
-│       └── ...
-├── services/
-│   ├── view-manager.ts
-│   ├── navigation.ts
-│   └── state-manager.ts
-└── app-shell.ts
-```
-
-### 2. State Management
-
-```typescript
-// services/state-manager.ts
-export class StateManager {
-  private viewStates: Map<string, any> = new Map();
-
-  saveViewState(viewId: string, state: any) {
-    this.viewStates.set(viewId, {
-      ...this.getViewState(viewId),
-      ...state,
-      lastUpdated: Date.now()
-    });
-  }
-
-  getViewState(viewId: string): any {
-    return this.viewStates.get(viewId) || {};
-  }
-
-  // Persist to localStorage
-  persistState() {
-    const serialized = JSON.stringify(
-      Array.from(this.viewStates.entries())
-    );
-    localStorage.setItem('app-state', serialized);
-  }
-
-  restoreState() {
-    const saved = localStorage.getItem('app-state');
-    if (saved) {
-      const entries = JSON.parse(saved);
-      this.viewStates = new Map(entries);
-    }
-  }
-}
-```
-
-### 3. View Communication
-
-```typescript
-// events/view-events.ts
-export class ViewEventBus {
-  private eventTarget = new EventTarget();
-
-  emit(eventName: string, detail: any) {
-    this.eventTarget.dispatchEvent(
-      new CustomEvent(eventName, { detail })
-    );
-  }
-
-  on(eventName: string, handler: (detail: any) => void) {
-    this.eventTarget.addEventListener(eventName, (e: CustomEvent) => {
-      handler(e.detail);
-    });
-  }
-
-  // Cross-view communication
-  sendMessage(fromView: string, toView: string, message: any) {
-    this.emit('view-message', {
-      from: fromView,
-      to: toView,
-      message
-    });
-  }
-}
-```
-
-### 4. Responsive Design
-
-```typescript
-// views/responsive-view.ts
-export const createResponsiveView = (config: IAppView): IAppView => {
-  return {
-    ...config,
-    tabs: config.tabs.map(tab => ({
-      ...tab,
-      content: () => html`
-        <div class="view-content ${getDeviceClass()}">
-          ${tab.content()}
-        </div>
-      `
-    }))
-  };
-};
-
-function getDeviceClass(): string {
-  const width = window.innerWidth;
-  if (width < 768) return 'mobile';
-  if (width < 1024) return 'tablet';
-  return 'desktop';
-}
-```
-
-### 5. Performance Optimization
-
-```typescript
-// optimization/lazy-components.ts
-export const lazyComponent = (
-  importFn: () => Promise<any>,
-  componentName: string
-) => {
-  let loaded = false;
-  
-  return () => {
-    if (!loaded) {
-      importFn().then(() => {
-        loaded = true;
-      });
-      return html`<dees-spinner></dees-spinner>`;
-    }
-    
-    return html`<${componentName}></${componentName}>`;
-  };
-};
-
-// Usage in view
-tabs: [
-  {
-    key: 'heavy-component',
-    content: lazyComponent(
-      () => import('./components/heavy-component.js'),
-      'heavy-component'
-    )
-  }
-]
-```
-
-## Advanced Features
-
-### 1. View Permissions
-
-```typescript
-interface IAppViewWithPermissions extends IAppView {
-  requiredPermissions?: string[];
-  visibleTo?: (user: User) => boolean;
-}
-
-class PermissionManager {
-  canAccessView(view: IAppViewWithPermissions, user: User): boolean {
-    if (view.visibleTo) {
-      return view.visibleTo(user);
-    }
-    
-    if (view.requiredPermissions) {
-      return view.requiredPermissions.every(
-        perm => user.permissions.includes(perm)
-      );
-    }
-    
-    return true;
-  }
-}
-```
-
-### 2. View Lifecycle Hooks
-
-```typescript
-interface IAppViewLifecycle extends IAppView {
-  onActivate?: () => Promise<void>;
-  onDeactivate?: () => Promise<void>;
-  onTabChange?: (oldTab: string, newTab: string) => void;
-  onDestroy?: () => void;
-}
-```
-
-### 3. Dynamic Menu Generation
-
-```typescript
-class DynamicMenuBuilder {
-  buildMainMenu(views: IAppView[], user: User): ITab[] {
-    return views
-      .filter(view => this.canShowInMenu(view, user))
-      .map(view => ({
-        key: view.id,
-        iconName: view.iconName || 'file',
-        action: () => this.navigation.navigateToView(view.id)
-      }));
-  }
-
-  buildSelectorMenu(view: IAppView, context: any): ISelectionOption[] {
-    const baseItems = view.menuItems || [];
-    const contextItems = this.getContextualItems(view, context);
-    
-    return [...baseItems, ...contextItems];
-  }
-}
-```
-
-## Migration Strategy
-
-For existing applications:
-
-1. **Identify Views**: Map existing routes/pages to views
-2. **Extract Components**: Move page-specific components into view folders
-3. **Define View Configs**: Create IAppView configurations
-4. **Update Navigation**: Replace existing routing with view navigation
-5. **Migrate State**: Move page state to ViewManager
-6. **Test & Optimize**: Ensure smooth transitions and performance
-
-## Example Application Structure
-
-```typescript
-// main.ts
-import { ViewManager } from './services/view-manager.js';
-import { AppNavigation } from './services/navigation.js';
-import { dashboardView } from './views/dashboard/index.js';
-import { projectsView } from './views/projects/index.js';
-import { settingsView } from './views/settings/index.js';
-
-const app = new MyAppShell();
-const viewManager = new ViewManager();
-const navigation = new AppNavigation(viewManager, app);
-
-// Register views
-viewManager.registerView(dashboardView);
-viewManager.registerView(projectsView);
-viewManager.registerView(settingsView);
-
-// Setup navigation
-app.views = [dashboardView, projectsView, settingsView];
-navigation.setupMainMenu();
-navigation.handleBrowserNavigation();
-
-// Initial navigation
-navigation.navigateToView('dashboard');
-
-document.body.appendChild(app);
-```
-
-This architecture provides:
-- **Modularity**: Each view is self-contained
-- **Scalability**: Easy to add new views
-- **Performance**: Lazy loading and caching
-- **Consistency**: Unified navigation and layout
-- **Flexibility**: Customizable per view
-- **Maintainability**: Clear separation of concerns

readme.hints.md

@@ -1,5 +1,5 @@
 !!! Please pay attention to the following points when writing the readme: !!!
-* Give a short rundown of components and a few points abputspecific features on each.
+* Give a short rundown of components and a few points abput specific features on each.
 * Try to list all components in a summary.
 * Then list all components with a short description.
 
@@ -605,3 +605,79 @@ z-index: ${zIndexLayers.overlay.modal};
 ```
 
 This system ensures proper stacking order for all overlay components and prevents z-index conflicts.
+
+## TC39 Standard Decorators Migration (2025-01-17)
+
+Successfully migrated from experimental TypeScript decorators to standard TC39 decorators as recommended by Lit 3.x documentation.
+
+### Migration Overview:
+
+#### 1. Changes Made:
+- **Added `accessor` keyword** to all `@property` and `@state` decorated fields across 69 component files
+- **Updated tsconfig.json**: Removed `experimentalDecorators: true` and `useDefineForClassFields: false`
+- **Fixed optional properties**: Changed `accessor prop?: Type` to `accessor prop: Type | undefined = undefined`
+- **Removed incompatible decorators**: Removed `@query` and non-reactive `@state` decorators from regular fields
+
+#### 2. Key Pattern Changes:
+
+**Before (Experimental Decorators):**
+```typescript
+@property({ type: String })
+public value: string = '';
+
+@property({ type: Boolean })
+public disabled?: boolean;
+```
+
+**After (Standard TC39 Decorators):**
+```typescript
+@property({ type: String })
+accessor value: string = '';
+
+@property({ type: Boolean })
+accessor disabled: boolean | undefined = undefined;
+```
+
+#### 3. Important Rules:
+- **@property and @state**: MUST use `accessor` keyword for reactive properties
+- **@query decorators**: Should NOT use `accessor` (they work with regular fields)
+- **Optional properties**: Cannot use `?` syntax with accessor, must use `| undefined = undefined`
+- **Private fields**: Non-reactive private fields should not use decorators
+
+#### 4. TypeScript Configuration:
+```json
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext"
+  }
+}
+```
+Note: `experimentalDecorators` defaults to false, and `useDefineForClassFields` defaults to true with ES2022 target.
+
+#### 5. Build Results:
+- ✅ Build successful with standard decorators
+- ✅ Tests passing (7/8 - same as before migration)
+- ✅ No bundle size changes reported
+- ✅ All components working correctly
+
+#### 6. Files Modified:
+- 69 component files with decorator updates
+- 16 files with optional property fixes
+- 3 files with @query decorator removals
+- tsconfig.json configuration update
+
+### Why This Migration:
+
+According to Lit's documentation (https://lit.dev/docs/components/decorators/#decorator-versions):
+- TC39 standard decorators are the future-proof approach
+- Provides better TypeScript integration
+- Aligns with JavaScript specification
+- While bundle sizes are slightly larger, the standardization benefits outweigh this
+
+### Testing:
+- All unit tests passing
+- Manual testing of key components verified
+- No regressions detected
+- Focus management and interactions working correctly

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.

readme.refactoring-summary.md

@@ -1,138 +0,0 @@
-# WYSIWYG Editor Refactoring Progress Summary
-
-## Latest Updates
-
-### Selection Highlighting Fix ✅
-- **Issue**: "Paragraphs are not highlighted consistently, headings are always highlighted"
-- **Root Cause**: The `shouldUpdate` method in `dees-wysiwyg-block.ts` was using a generic `.block` selector that would match the first element with that class, not necessarily the correct block element
-- **Solution**: Changed the selector to be more specific: `.block.${blockType}` which ensures the correct element is found for each block type
-- **Result**: All block types now highlight consistently when selected
-
-### Enter Key Block Creation Fix ✅
-- **Issue**: "When pressing enter and jumping to new block then typing something: The cursor is not at the beginning of the new block and there is content"
-- **Root Cause**: Block handlers were rendering content with template syntax `${block.content || ''}` in their render methods, which violates the static HTML principle
-- **Solution**: 
-  - Removed all `${block.content}` from render methods in paragraph, heading, quote, and code block handlers
-  - Content is now set programmatically in the setup() method only when needed
-  - Fixed `setCursorToStart` and `setCursorToEnd` to always find elements fresh instead of relying on cached `blockElement`
-- **Result**: New empty blocks remain truly empty, cursor positioning works correctly
-
-### Backspace Key Deletion Fix ✅
-- **Issue**: "After typing in a new block, pressing backspace deletes the whole block instead of just the last character"
-- **Root Cause**: 
-  1. `getCursorPositionInElement` was using `element.contains()` which doesn't work across Shadow DOM boundaries
-  2. The backspace handler was checking `block.content === ''` which only contains the stored content, not the actual DOM content
-- **Solution**:
-  1. Fixed `getCursorPositionInElement` to use `containsAcrossShadowDOM` for proper Shadow DOM support
-  2. Updated backspace handler to get actual content from DOM using `blockComponent.getContent()` instead of relying on stored `block.content`
-  3. Added debug logging to track cursor position and content state
-- **Result**: Backspace now correctly deletes individual characters instead of the whole block
-
-### Arrow Left Navigation Fix ✅
-- **Issue**: "When jumping to the previous block from the beginning of a block with arrow left, the cursor should be at the end of the previous block, not at the start"
-- **Root Cause**: Browser's default focus behavior places cursor at the beginning of contenteditable elements, overriding our cursor positioning
-- **Solution**: For 'end' position, set up the selection range BEFORE focusing the element:
-  1. Create a range pointing to the end of content
-  2. Apply the selection
-  3. Then focus the element (which preserves the existing selection)
-  4. Only use setCursorToEnd for empty blocks
-- **Result**: Arrow left navigation now correctly places cursor at the end of the previous block
-
-## Completed Phases
-
-### Phase 1: Infrastructure ✅
-- Created modular block handler architecture
-- Implemented `IBlockHandler` interface and `BaseBlockHandler` class
-- Created `BlockRegistry` for dynamic block type registration
-- Set up proper file structure under `blocks/` directory
-
-### Phase 2: Proof of Concept ✅
-- Successfully migrated divider block as the simplest example
-- Validated the architecture works correctly
-- Established patterns for block migration
-
-### Phase 3: Text Blocks ✅
-- **Paragraph Block**: Full editing support with text splitting, selection handling, and cursor tracking
-- **Heading Blocks**: All three heading levels (h1, h2, h3) with unified handler
-- **Quote Block**: Italic styling with border, full editing capabilities
-- **Code Block**: Monospace font, tab handling, plain text paste support
-- **List Block**: Bullet/numbered lists with proper list item management
-
-## Key Achievements
-
-### 1. Preserved Critical Knowledge
-- **Static Rendering**: Blocks use `innerHTML` in `firstUpdated` to prevent focus loss during typing
-- **Shadow DOM Selection**: Implemented `containsAcrossShadowDOM` utility for proper selection detection
-- **Cursor Position Tracking**: All editable blocks track cursor position across multiple events
-- **Content Splitting**: HTML-aware splitting using Range API preserves formatting
-- **Focus Management**: Microtask-based focus restoration ensures reliable cursor placement
-
-### 2. Enhanced Architecture
-- Each block type is now self-contained in its own file
-- Block handlers are dynamically registered and loaded
-- Common functionality is shared through base classes
-- Styles are co-located with their block handlers
-
-### 3. Maintained Functionality
-- All keyboard navigation works (arrows, backspace, delete, enter)
-- Text selection across Shadow DOM boundaries functions correctly
-- Block merging and splitting behave as before
-- IME (Input Method Editor) support is preserved
-- Formatting shortcuts (Cmd/Ctrl+B/I/U/K) continue to work
-
-## Code Organization
-
-```
-ts_web/elements/wysiwyg/
-├── dees-wysiwyg-block.ts (simplified main component)
-├── wysiwyg.selection.ts (Shadow DOM selection utilities)
-├── wysiwyg.blockregistration.ts (handler registration)
-└── blocks/
-    ├── index.ts (exports and registry)
-    ├── block.base.ts (base handler interface)
-    ├── decorative/
-    │   └── divider.block.ts
-    └── text/
-        ├── paragraph.block.ts
-        ├── heading.block.ts
-        ├── quote.block.ts
-        ├── code.block.ts
-        └── list.block.ts
-```
-
-## Next Steps
-
-### Phase 4: Media Blocks (In Progress)
-- Image block with upload/drag-drop support
-- YouTube block with video embedding
-- Attachment block for file uploads
-
-### Phase 5: Content Blocks
-- Markdown block with preview toggle
-- HTML block with raw HTML editing
-
-### Phase 6: Cleanup
-- Remove old code from main component
-- Optimize bundle size
-- Update documentation
-
-## Technical Improvements
-
-1. **Modularity**: Each block type is now completely self-contained
-2. **Extensibility**: New blocks can be added by creating a handler and registering it
-3. **Maintainability**: Files are smaller and focused on single responsibilities
-4. **Type Safety**: Strong TypeScript interfaces ensure consistent implementation
-5. **Performance**: No degradation in performance; potential for lazy loading in future
-
-## Migration Pattern
-
-For future block migrations, follow this pattern:
-
-1. Create block handler extending `BaseBlockHandler`
-2. Implement required methods: `render()`, `setup()`, `getStyles()`
-3. Add helper methods for cursor/content management
-4. Handle Shadow DOM selection properly using utilities
-5. Register handler in `wysiwyg.blockregistration.ts`
-6. Test all interactions (typing, selection, navigation)
-
-The refactoring has been successful in making the codebase more maintainable while preserving all the hard-won functionality and edge case handling from the original implementation.

readme.refactoring.md

@@ -1,82 +0,0 @@
-# WYSIWYG Editor Refactoring
-
-## Summary of Changes
-
-This refactoring cleaned up the wysiwyg editor implementation to fix focus, cursor position, and selection issues.
-
-### Phase 1: Code Organization
-
-#### 1. Removed Duplicate Code
-- Removed duplicate `handleBlockInput` method from main component (was already in inputHandler)
-- Removed duplicate `handleBlockKeyDown` method from main component (was already in keyboardHandler)
-- Consolidated all input handling in the respective handler classes
-
-#### 2. Simplified Focus Management
-- Removed complex `updated` lifecycle method that was trying to maintain focus
-- Simplified `handleBlockBlur` to not immediately close menus
-- Added `requestAnimationFrame` to focus operations for better timing
-- Removed `slashMenuOpenTime` tracking which was no longer needed
-
-#### 3. Fixed Slash Menu Behavior
-- Changed from `@mousedown` to `@click` events for better UX
-- Added proper event prevention to avoid focus loss
-- Menu now closes when clicking outside
-- Simplified the insertBlock method to close menu first
-
-### Phase 2: Cursor & Selection Fixes
-
-#### 4. Enhanced Cursor Position Management
-- Added `focusWithCursor()` method to block component for precise cursor positioning
-- Improved `handleSlashCommand` to preserve cursor position when menu opens
-- Added `getCaretCoordinates()` for accurate menu positioning based on cursor location
-- Updated `focusBlock()` to support numeric cursor positions
-
-#### 5. Fixed Selection Across Shadow DOM
-- Added custom `block-text-selected` event to communicate selections across shadow boundaries
-- Implemented `handleMouseUp()` in block component to detect selections
-- Updated main component to listen for selection events from blocks
-- Selection now works properly even with nested shadow DOMs
-
-#### 6. Improved Slash Menu Close Behavior
-- Added optional `clearSlash` parameter to `closeSlashMenu()`
-- Escape key now properly clears the slash command
-- Clicking outside clears the slash if menu is open
-- Selecting an item preserves content and just transforms the block
-
-### Technical Improvements
-
-#### Block Component (`dees-wysiwyg-block`)
-- Better focus management with immediate focus (removed unnecessary requestAnimationFrame)
-- Added cursor position control methods
-- Custom event dispatching for cross-shadow-DOM communication
-- Improved content handling for different block types
-
-#### Input Handler
-- Preserves cursor position when showing slash menu
-- Better caret coordinate calculation for menu positioning
-- Ensures focus stays in the block when menu appears
-
-#### Block Operations
-- Enhanced `focusBlock()` to support start/end/numeric positions
-- Better timing with requestAnimationFrame for focus operations
-
-### Key Benefits
-- Slash menu no longer causes focus or cursor position loss
-- Text selection works properly across shadow DOM boundaries
-- Cursor position is preserved when interacting with menus
-- Cleaner, more maintainable code structure
-- Better separation of concerns
-
-## Testing
-
-Use the test files in `.nogit/debug/`:
-- `test-slash-menu.html` - Tests slash menu focus behavior
-- `test-wysiwyg-formatting.html` - Tests text formatting
-
-## Known Issues Fixed
-- Slash menu disappearing immediately on first "/"
-- Focus lost when slash menu opens
-- Cursor position lost when typing "/"
-- Text selection not working properly
-- Selection events not propagating across shadow DOM
-- Duplicate event handling causing conflicts

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-editor] 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-editor] monaco-editor/package.json does not expose a version field');
+  }
+  return monacoPackage.version;
+}
+
+function writeVersionModule(version) {
+  const targetDir = path.join(projectRoot, 'ts_web', 'elements', 'dees-editor');
+  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-editor] Wrote ${path.relative(projectRoot, targetFile)} with monaco-editor@${version}`);
+}
+
+try {
+  const version = getMonacoVersion();
+  writeVersionModule(version);
+} catch (error) {
+  console.error('[dees-editor] Failed to update Monaco version module.');
+  console.error(error instanceof Error ? error.message : error);
+  process.exitCode = 1;
+}

test/test.contextmenu-demo.browser.ts

@@ -0,0 +1,35 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
+import { demoFunc } from '../ts_web/elements/dees-contextmenu.demo.js';
+
+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.browser.ts

@@ -0,0 +1,93 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/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
+  await new Promise(resolve => setTimeout(resolve, 200));
+  
+  // 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.browser.ts

@@ -0,0 +1,71 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/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.browser.ts

@@ -0,0 +1,77 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesContextmenu } from '../ts_web/elements/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 '@push.rocks/tapbundle';
+
+import {
+  resolveWidgetPlacement,
+  collectCollisions,
+} from '../ts_web/elements/dees-dashboardgrid/layout.ts';
+import type { DashboardWidget } from '../ts_web/elements/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.tabs-indicator.browser.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-blockmovement.browser.ts

@@ -0,0 +1,85 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/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);
+});
+
+tap.start();

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

@@ -0,0 +1,98 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
+
+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.browser.ts

@@ -0,0 +1,68 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/wysiwyg/dees-input-wysiwyg.js';
+import { DeesContextmenu } from '../ts_web/elements/dees-contextmenu.js';
+
+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.browser.ts

@@ -0,0 +1,95 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/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);
+});
+
+tap.start();

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

@@ -0,0 +1,133 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/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);
+});
+
+tap.start();

test/test.wysiwyg-dragdrop.browser.ts

@@ -0,0 +1,172 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/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;
+  
+  // 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();
+  
+  // Test drag initialization
+  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);
+  
+  // Check that drag state is initialized
+  expect(element.dragDropHandler.dragState.draggedBlockId).toEqual('block1');
+  
+  // Check that dragging class is applied
+  await new Promise(resolve => setTimeout(resolve, 20)); // Wait for setTimeout in drag start
+  expect(firstBlock.classList.contains('dragging')).toBeTrue();
+  expect(editorContent.classList.contains('dragging')).toBeTrue();
+  
+  // Test drop indicator creation
+  const dropIndicator = editorContent.querySelector('.drop-indicator');
+  expect(dropIndicator).toBeTruthy();
+  
+  // Simulate drag over
+  const dragOverEvent = new DragEvent('dragover', {
+    dataTransfer: new DataTransfer(),
+    clientY: 200,
+    bubbles: true,
+    cancelable: true
+  });
+  
+  document.dispatchEvent(dragOverEvent);
+  
+  // Check that blocks move out of the way
+  console.log('Checking block movements...');
+  const blocks = Array.from(editorContent.querySelectorAll('.block-wrapper'));
+  const hasMovedBlocks = blocks.some(block => 
+    block.classList.contains('move-up') || block.classList.contains('move-down')
+  );
+  
+  console.log('Blocks with move classes:', blocks.filter(block => 
+    block.classList.contains('move-up') || block.classList.contains('move-down')
+  ).length);
+  
+  // Test drag end
+  const dragEndEvent = new DragEvent('dragend', {
+    bubbles: true
+  });
+  
+  document.dispatchEvent(dragEndEvent);
+  
+  // Wait for cleanup
+  await new Promise(resolve => setTimeout(resolve, 150));
+  
+  // Check that drag state is cleaned up
+  expect(element.dragDropHandler.dragState.draggedBlockId).toBeNull();
+  expect(firstBlock.classList.contains('dragging')).toBeFalse();
+  expect(editorContent.classList.contains('dragging')).toBeFalse();
+  
+  // Check that drop indicator is removed
+  const dropIndicatorAfter = editorContent.querySelector('.drop-indicator');
+  expect(dropIndicatorAfter).toBeFalsy();
+  
+  // 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;
+  
+  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);
+});
+
+tap.start();

test/test.wysiwyg-dragissue.browser.ts

@@ -0,0 +1,124 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/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');
+});
+
+tap.start();

test/test.wysiwyg-dropindicator.browser.ts

@@ -0,0 +1,108 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/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);
+});
+
+tap.start();

test/test.wysiwyg-eventlisteners.browser.ts

@@ -0,0 +1,114 @@
+import { expect, tap } from '@git.zone/tstest/tapbundle';
+import { DeesInputWysiwyg } from '../ts_web/elements/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);
+});
+
+tap.start();

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '1.9.8',
+  version: '3.1.1',
   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.ts

@@ -0,0 +1,513 @@
+import * as plugins from '../../00plugins.js';
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+import * as domtools from '@design.estate/dees-domtools';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
+import '../../dees-icon/dees-icon.js';
+
+@customElement('dees-appui-activitylog')
+export class DeesAppuiActivitylog extends DeesElement {
+  // STATIC
+  public static demo = () => html`
+    <style>
+      .demo-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 600px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
+        padding: 32px;
+      }
+    </style>
+    <div class="demo-container">
+      <dees-appui-activitylog></dees-appui-activitylog>
+    </div>
+  `;
+
+  // INSTANCE
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        position: relative;
+        display: block;
+        width: 100%;
+        max-width: 320px;
+        height: 100%;
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        font-family: 'Geist Mono', monospace;
+        border-left: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        cursor: default;
+        box-shadow: ${cssManager.bdTheme(
+          '-4px 0 12px rgba(0, 0, 0, 0.02)',
+          '-4px 0 12px rgba(0, 0, 0, 0.2)'
+        )};
+      }
+      .maincontainer {
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        height: 100%;
+        width: 100%;
+      }
+
+      .topbar {
+        position: absolute;
+        top: 0px;
+        height: 48px;
+        width: 100%;
+        padding: 0px 16px;
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        display: flex;
+        align-items: center;
+        box-sizing: border-box;
+      }
+
+      .topbar .heading {
+        font-weight: 600;
+        font-size: 14px;
+        font-family: 'Geist Sans', sans-serif;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+
+      .activityContainer {
+        position: absolute;
+        top: 48px;
+        bottom: 48px;
+        width: 100%;
+        padding: 12px 0px;
+        overflow-y: auto;
+        scrollbar-width: thin;
+        scrollbar-color: ${cssManager.bdTheme('#e5e7eb', '#27272a')} transparent;
+      }
+      
+      .activityContainer::-webkit-scrollbar {
+        width: 6px;
+      }
+      
+      .activityContainer::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      
+      .activityContainer::-webkit-scrollbar-thumb {
+        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-radius: 3px;
+      }
+      
+      .activityContainer::-webkit-scrollbar-thumb:hover {
+        background: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
+      }
+
+      .streamingIndicator {
+        font-size: 11px;
+        text-align: center;
+        padding: 16px;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        font-family: 'Geist Sans', sans-serif;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        font-weight: 500;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+      }
+      
+      .streamingIndicator::before {
+        content: '';
+        width: 6px;
+        height: 6px;
+        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        border-radius: 50%;
+        animation: pulse 2s ease-in-out infinite;
+      }
+      
+      @keyframes pulse {
+        0%, 100% { opacity: 0.4; transform: scale(0.8); }
+        50% { opacity: 1; transform: scale(1.2); }
+      }
+
+      .streamingIndicator.bottom {
+        padding-top: 8px;
+        padding-bottom: 16px;
+      }
+
+      .activityentry {
+        min-height: 36px;
+        font-size: 13px;
+        padding: 10px 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        transition: all 0.15s ease;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        line-height: 1.4;
+        animation: fadeIn 0.3s ease-out;
+      }
+      
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+          transform: translateY(-4px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
+      .activityentry:last-of-type {
+        border-bottom: none;
+      }
+
+      .activityentry:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+      }
+
+      .timestamp {
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        font-weight: 500;
+        font-size: 12px;
+        font-variant-numeric: tabular-nums;
+        flex-shrink: 0;
+        min-width: 45px;
+      }
+      
+      .activity-icon {
+        width: 28px;
+        height: 28px;
+        border-radius: 6px;
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        font-size: 14px;
+      }
+      
+      .activity-icon.login {
+        background: ${cssManager.bdTheme('rgba(34, 197, 94, 0.1)', 'rgba(34, 197, 94, 0.1)')};
+        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
+      }
+      
+      .activity-icon.logout {
+        background: ${cssManager.bdTheme('rgba(239, 68, 68, 0.1)', 'rgba(239, 68, 68, 0.1)')};
+        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
+      }
+      
+      .activity-icon.view {
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
+        color: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
+      }
+      
+      .activity-icon.create {
+        background: ${cssManager.bdTheme('rgba(168, 85, 247, 0.1)', 'rgba(168, 85, 247, 0.1)')};
+        color: ${cssManager.bdTheme('#9333ea', '#a855f7')};
+      }
+      
+      .activity-icon.update {
+        background: ${cssManager.bdTheme('rgba(251, 146, 60, 0.1)', 'rgba(251, 146, 60, 0.1)')};
+        color: ${cssManager.bdTheme('#ea580c', '#fb923c')};
+      }
+      
+      .activity-text {
+        flex: 1;
+        color: ${cssManager.bdTheme('#18181b', '#e4e4e7')};
+      }
+      
+      .activity-user {
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+      
+      .date-separator {
+        padding: 12px 16px 8px;
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        background: ${cssManager.bdTheme('#f9fafb', '#09090b')};
+        border-bottom: 1px solid ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+
+      .searchbox {
+        position: absolute;
+        bottom: 0px;
+        width: 100%;
+        height: 48px;
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border-top: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        padding: 8px;
+      }
+      
+      .search-wrapper {
+        position: relative;
+        width: 100%;
+        height: 32px;
+      }
+      
+      .search-icon {
+        position: absolute;
+        left: 10px;
+        top: 50%;
+        transform: translateY(-50%);
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        font-size: 14px;
+        pointer-events: none;
+        transition: color 0.15s ease;
+      }
+      
+      .searchbox input {
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+        width: 100%;
+        height: 100%;
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-radius: 6px;
+        padding: 0 12px 0 36px;
+        font-family: 'Geist Sans', sans-serif;
+        font-size: 13px;
+        transition: all 0.15s ease;
+      }
+
+      .searchbox input::placeholder {
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+      }
+
+      .searchbox input:focus {
+        outline: none;
+        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
+      }
+      
+      .searchbox input:focus ~ .search-icon,
+      .search-wrapper:has(input:focus) .search-icon {
+        color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+      }
+
+      .bottomShadow {
+        position: absolute;
+        width: 100%;
+        height: 24px;
+        bottom: 48px;
+        background: ${cssManager.bdTheme(
+          'linear-gradient(180deg, transparent 0%, #fafafa 100%)',
+          'linear-gradient(180deg, transparent 0%, #0a0a0a 100%)'
+        )};
+        pointer-events: none;
+        opacity: 0.8;
+      }
+      
+      .topShadow {
+        position: absolute;
+        width: 100%;
+        height: 24px;
+        top: 48px;
+        background: ${cssManager.bdTheme(
+          'linear-gradient(0deg, transparent 0%, #fafafa 100%)',
+          'linear-gradient(0deg, transparent 0%, #0a0a0a 100%)'
+        )};
+        pointer-events: none;
+        opacity: 0.8;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style></style>
+      <div class="maincontainer">
+        <div class="topbar">
+          <div class="heading">Activity Log</div>
+        </div>
+        <div class="activityContainer">
+          <div class="streamingIndicator">Live Updates</div>
+          
+          <div class="date-separator">Today</div>
+          
+          <div class="activityentry" @contextmenu=${async eventArg => {
+            DeesContextmenu.openContextMenuWithOptions(eventArg, [
+              {
+                name: 'Copy activity',
+                action: async () => {},
+              },
+              {
+                name: 'View details',
+                action: async () => {},
+              },
+              {
+                name: 'Filter by user',
+                action: async () => {},
+              },
+            ]);
+          }}>
+            <span class="timestamp">22:20</span>
+            <div class="activity-icon logout">
+              <dees-icon .icon=${'lucide:logOut'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> logged out
+            </div>
+          </div>
+          
+          <div class="activityentry">
+            <span class="timestamp">22:19</span>
+            <div class="activity-icon update">
+              <dees-icon .icon=${'lucide:checkCircle'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> approved a payment
+            </div>
+          </div>
+          
+          <div class="activityentry">
+            <span class="timestamp">22:18</span>
+            <div class="activity-icon view">
+              <dees-icon .icon=${'lucide:archive'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> archived an invoice
+            </div>
+          </div>
+          
+          <div class="activityentry">
+            <span class="timestamp">22:17</span>
+            <div class="activity-icon login">
+              <dees-icon .icon=${'lucide:logIn'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> logged in
+            </div>
+          </div>
+          
+          <div class="activityentry">
+            <span class="timestamp">22:16</span>
+            <div class="activity-icon logout">
+              <dees-icon .icon=${'lucide:logOut'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> logged out
+            </div>
+          </div>
+          
+          <div class="activityentry">
+            <span class="timestamp">22:15</span>
+            <div class="activity-icon update">
+              <dees-icon .icon=${'lucide:key'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> changed password
+            </div>
+          </div>
+          
+          <div class="activityentry">
+            <span class="timestamp">22:14</span>
+            <div class="activity-icon create">
+              <dees-icon .icon=${'lucide:userPlus'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> added a new user
+            </div>
+          </div>
+          
+          <div class="activityentry">
+            <span class="timestamp">22:13</span>
+            <div class="activity-icon view">
+              <dees-icon .icon=${'lucide:messageCircle'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> contacted support
+            </div>
+          </div>
+          
+          <div class="date-separator">Yesterday</div>
+          
+          <div class="activityentry">
+            <span class="timestamp">18:45</span>
+            <div class="activity-icon update">
+              <dees-icon .icon=${'lucide:trash2'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> deleted an invoice
+            </div>
+          </div>
+          
+          <div class="activityentry">
+            <span class="timestamp">17:30</span>
+            <div class="activity-icon login">
+              <dees-icon .icon=${'lucide:logIn'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> logged in
+            </div>
+          </div>
+          
+          <div class="activityentry">
+            <span class="timestamp">16:15</span>
+            <div class="activity-icon logout">
+              <dees-icon .icon=${'lucide:logOut'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> logged out
+            </div>
+          </div>
+          
+          <div class="activityentry">
+            <span class="timestamp">14:20</span>
+            <div class="activity-icon view">
+              <dees-icon .icon=${'lucide:barChart'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> viewed reports
+            </div>
+          </div>
+          
+          <div class="activityentry">
+            <span class="timestamp">13:45</span>
+            <div class="activity-icon create">
+              <dees-icon .icon=${'lucide:send'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> sent an invoice
+            </div>
+          </div>
+          
+          <div class="activityentry">
+            <span class="timestamp">13:30</span>
+            <div class="activity-icon create">
+              <dees-icon .icon=${'lucide:filePlus'}></dees-icon>
+            </div>
+            <div class="activity-text">
+              <span class="activity-user">Max Mustermann</span> created a new invoice
+            </div>
+          </div>
+          
+          <div class="streamingIndicator bottom">Loading History</div>
+        </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..." />
+          </div>
+        </div>
+        <div class="topShadow"></div>
+        <div class="bottomShadow"></div>
+      </div>
+    `;
+  }
+}

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

@@ -5,19 +5,19 @@ import {
   property,
   state,
   html,
-  css,
-  cssManager,
 } 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 './dees-appui-appbar.demo.js';
+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 './dees-icon.js';
-import './dees-windowcontrols.js';
-import './dees-appui-profiledropdown.js';
+import '../../dees-icon/dees-icon.js';
+import '../../dees-windowcontrols/dees-windowcontrols.js';
+import '../dees-appui-profiledropdown/dees-appui-profiledropdown.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -31,301 +31,58 @@ export class DeesAppuiBar extends DeesElement {
 
   // INSTANCE PROPERTIES
   @property({ type: Array })
-  public menuItems: interfaces.IAppBarMenuItem[] = [];
+  accessor menuItems: interfaces.IAppBarMenuItem[] = [];
 
   @property({ type: String })
-  public breadcrumbs: string = '';
+  accessor breadcrumbs: string = '';
 
   @property({ type: String })
-  public breadcrumbSeparator: string = ' > ';
+  accessor breadcrumbSeparator: string = ' > ';
 
   @property({ type: Boolean })
-  public showWindowControls: boolean = true;
+  accessor showWindowControls: boolean = true;
 
 
   @property({ type: Object })
-  public user?: {
+  accessor user: {
     name: string;
     email?: string;
     avatar?: string;
     status?: 'online' | 'offline' | 'busy' | 'away';
-  };
+  } | undefined = undefined;
 
   @property({ type: Array })
-  public profileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];
+  accessor profileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];
 
   @property({ type: Boolean })
-  public showSearch: boolean = false;
+  accessor showSearch: boolean = false;
 
   // STATE
   @state()
-  private activeMenu: string | null = null;
+  accessor activeMenu: string | null = null;
 
   @state()
-  private openDropdowns: Set<string> = new Set();
+  accessor openDropdowns: Set<string> = new Set();
 
   @state()
-  private focusedItem: string | null = null;
+  accessor focusedItem: string | null = null;
 
   @state()
-  private focusedDropdownItem: number = -1;
+  accessor focusedDropdownItem: number = -1;
 
   @state()
-  private isProfileDropdownOpen: boolean = false;
+  accessor isProfileDropdownOpen: boolean = false;
 
-  public static styles = [
-    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: ${cssManager.cssGridColumns(3, 20)};
-        -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;
-      }
-    `,
-  ];
+  public static styles = appuiAppbarStyles;
 
   // INSTANCE
   public render(): TemplateResult {
-    return html`
-      <div class="menus">
-        ${this.showWindowControls ? html`<dees-windowcontrols></dees-windowcontrols>` : ''}
-        ${this.renderMenuItems()}
-      </div>
-      <div class="breadcrumbs">
-        ${this.renderBreadcrumbs()}
-      </div>
-      <div class="account">
-        ${this.renderAccountSection()}
-      </div>
-    `;
+    return renderAppuiAppbar(this);
   }
 
-  private renderMenuItems(): TemplateResult {
+
+
+  public renderMenuItems(): TemplateResult {
     return html`
       ${this.menuItems.map((item, index) => this.renderMenuItem(item, `menu-${index}`))}
     `;
@@ -398,7 +155,7 @@ export class DeesAppuiBar extends DeesElement {
     `;
   }
 
-  private renderBreadcrumbs(): TemplateResult {
+  public renderBreadcrumbs(): TemplateResult {
     if (!this.breadcrumbs) {
       return html``;
     }
@@ -417,7 +174,7 @@ export class DeesAppuiBar extends DeesElement {
     `;
   }
 
-  private renderAccountSection(): TemplateResult {
+  public renderAccountSection(): TemplateResult {
     return html`
       ${this.showSearch ? html`
         <dees-icon 

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

@@ -1,7 +1,8 @@
 import { html, css } from '@design.estate/dees-element';
-import type { DeesAppuiBar } from './dees-appui-appbar.js';
-import type { IAppBarMenuItem } from './interfaces/appbarmenuitem.js';
+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

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,238 @@
+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: ${cssManager.cssGridColumns(3, 20)};
+        -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;
+      }
+    `,
+  ];
+

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-base/dees-appui-base.demo.ts

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

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

@@ -0,0 +1,298 @@
+import {
+  DeesElement,
+  type TemplateResult,
+  property,
+  customElement,
+  html,
+  css,
+  cssManager,
+  state,
+} from '@design.estate/dees-element';
+import * as interfaces from '../../interfaces/index.js';
+import * as plugins from '../../00plugins.js';
+import type { DeesAppuiBar } from '../dees-appui-appbar/index.js';
+import type { DeesAppuiMainmenu } from '../dees-appui-mainmenu/dees-appui-mainmenu.js';
+import type { DeesAppuiSecondarymenu } from '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
+import type { DeesAppuiMaincontent } from '../dees-appui-maincontent/dees-appui-maincontent.js';
+import type { DeesAppuiActivitylog } from '../dees-appui-activitylog/dees-appui-activitylog.js';
+import { demoFunc } from './dees-appui-base.demo.js';
+
+// Import child components
+import '../dees-appui-appbar/index.js';
+import '../dees-appui-mainmenu/dees-appui-mainmenu.js';
+import '../dees-appui-secondarymenu/dees-appui-secondarymenu.js';
+import '../dees-appui-maincontent/dees-appui-maincontent.js';
+import '../dees-appui-activitylog/dees-appui-activitylog.js';
+
+@customElement('dees-appui-base')
+export class DeesAppuiBase extends DeesElement {
+  public static demo = demoFunc;
+
+  // Properties for appbar
+  @property({ type: Array })
+  accessor appbarMenuItems: interfaces.IAppBarMenuItem[] = [];
+
+  @property({ type: String })
+  accessor appbarBreadcrumbs: string = '';
+
+  @property({ type: String })
+  accessor appbarBreadcrumbSeparator: string = ' > ';
+
+  @property({ type: Boolean })
+  accessor appbarShowWindowControls: boolean = true;
+
+
+  @property({ type: Object })
+  accessor appbarUser: {
+    name: string;
+    email?: string;
+    avatar?: string;
+    status?: 'online' | 'offline' | 'busy' | 'away';
+  } | undefined = undefined;
+
+  @property({ type: Array })
+  accessor appbarProfileMenuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];
+
+  @property({ type: Boolean })
+  accessor appbarShowSearch: boolean = false;
+
+  // Properties for mainmenu
+  @property({ type: String })
+  accessor mainmenuLogoIcon: string = '';
+
+  @property({ type: String })
+  accessor mainmenuLogoText: string = '';
+
+  @property({ type: Array })
+  accessor mainmenuGroups: interfaces.IMenuGroup[] = [];
+
+  @property({ type: Array })
+  accessor mainmenuBottomTabs: interfaces.ITab[] = [];
+
+  @property({ type: Array })
+  accessor mainmenuTabs: interfaces.ITab[] = [];
+
+  @property({ type: Object })
+  accessor mainmenuSelectedTab: interfaces.ITab | undefined = undefined;
+
+  // Properties for secondarymenu
+  @property({ type: String })
+  accessor secondarymenuHeading: string = 'Menu';
+
+  @property({ type: Array })
+  accessor secondarymenuGroups: interfaces.ISecondaryMenuGroup[] = [];
+
+  @property({ type: Object })
+  accessor secondarymenuSelectedItem: interfaces.ISecondaryMenuItem | undefined = undefined;
+
+  /** Legacy support for flat options (backward compatibility) */
+  @property({ type: Array })
+  accessor secondarymenuOptions: (interfaces.ISelectionOption | { divider: true })[] = [];
+
+  // Collapse states
+  @property({ type: Boolean })
+  accessor mainmenuCollapsed: boolean = false;
+
+  @property({ type: Boolean })
+  accessor secondarymenuCollapsed: boolean = false;
+
+  // Properties for maincontent
+  @property({ type: Array })
+  accessor maincontentTabs: interfaces.ITab[] = [];
+
+  // References to child components
+  @state()
+  accessor appbar: DeesAppuiBar | undefined = undefined;
+
+  @state()
+  accessor mainmenu: DeesAppuiMainmenu | undefined = undefined;
+
+  @state()
+  accessor secondarymenu: DeesAppuiSecondarymenu | undefined = undefined;
+
+  @state()
+  accessor maincontent: DeesAppuiMaincontent | undefined = undefined;
+
+  @state()
+  accessor activitylog: DeesAppuiActivitylog | undefined = undefined;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        background: ${cssManager.bdTheme('#f0f0f0', '#1a1a1a')};
+      }
+      .maingrid {
+        position: absolute;
+        top: 40px;
+        height: calc(100% - 40px);
+        width: 100%;
+        display: grid;
+        grid-template-columns: auto auto 1fr 240px;
+        grid-template-rows: 1fr;
+      }
+
+      /* Z-index layering for proper stacking (position: relative required for z-index to work) */
+      .maingrid > dees-appui-mainmenu {
+        position: relative;
+        z-index: 3;
+      }
+
+      .maingrid > dees-appui-secondarymenu {
+        position: relative;
+        z-index: 2;
+      }
+
+      .maingrid > dees-appui-maincontent {
+        position: relative;
+        z-index: 1;
+      }
+
+      .maingrid > dees-appui-activitylog {
+        position: relative;
+        z-index: 1;
+      }
+    `,
+  ];
+
+  // INSTANCE
+  public render(): TemplateResult {
+    return html`
+      <style></style>
+      <dees-appui-appbar
+        .menuItems=${this.appbarMenuItems}
+        .breadcrumbs=${this.appbarBreadcrumbs}
+        .breadcrumbSeparator=${this.appbarBreadcrumbSeparator}
+        .showWindowControls=${this.appbarShowWindowControls}
+        .user=${this.appbarUser}
+        .profileMenuItems=${this.appbarProfileMenuItems}
+        .showSearch=${this.appbarShowSearch}
+        @menu-select=${(e: CustomEvent) => this.handleAppbarMenuSelect(e)}
+        @breadcrumb-navigate=${(e: CustomEvent) => this.handleAppbarBreadcrumbNavigate(e)}
+        @search-click=${() => this.handleAppbarSearchClick()}
+        @user-menu-open=${() => this.handleAppbarUserMenuOpen()}
+        @profile-menu-select=${(e: CustomEvent) => this.handleAppbarProfileMenuSelect(e)}
+      ></dees-appui-appbar>
+      <div class="maingrid">
+        <dees-appui-mainmenu
+          .logoIcon=${this.mainmenuLogoIcon}
+          .logoText=${this.mainmenuLogoText}
+          .menuGroups=${this.mainmenuGroups}
+          .bottomTabs=${this.mainmenuBottomTabs}
+          .tabs=${this.mainmenuTabs}
+          .selectedTab=${this.mainmenuSelectedTab}
+          .collapsed=${this.mainmenuCollapsed}
+          @tab-select=${(e: CustomEvent) => this.handleMainmenuTabSelect(e)}
+          @collapse-change=${(e: CustomEvent) => this.handleMainmenuCollapseChange(e)}
+        ></dees-appui-mainmenu>
+        <dees-appui-secondarymenu
+          .heading=${this.secondarymenuHeading}
+          .groups=${this.secondarymenuGroups}
+          .selectionOptions=${this.secondarymenuOptions}
+          .selectedItem=${this.secondarymenuSelectedItem}
+          .collapsed=${this.secondarymenuCollapsed}
+          @item-select=${(e: CustomEvent) => this.handleSecondarymenuItemSelect(e)}
+          @collapse-change=${(e: CustomEvent) => this.handleSecondarymenuCollapseChange(e)}
+        ></dees-appui-secondarymenu>
+        <dees-appui-maincontent
+          .tabs=${this.maincontentTabs}
+        >
+          <slot name="maincontent"></slot>
+        </dees-appui-maincontent>
+        <dees-appui-activitylog></dees-appui-activitylog>
+      </div>
+    `;
+  }
+
+  async firstUpdated() {
+    // Get references to child components
+    this.appbar = this.shadowRoot.querySelector('dees-appui-appbar');
+    this.mainmenu = this.shadowRoot.querySelector('dees-appui-mainmenu');
+    this.secondarymenu = this.shadowRoot.querySelector('dees-appui-secondarymenu');
+    this.maincontent = this.shadowRoot.querySelector('dees-appui-maincontent');
+    this.activitylog = this.shadowRoot.querySelector('dees-appui-activitylog');
+  }
+
+  // Event handlers for appbar
+  private handleAppbarMenuSelect(e: CustomEvent) {
+    this.dispatchEvent(new CustomEvent('appbar-menu-select', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleAppbarBreadcrumbNavigate(e: CustomEvent) {
+    this.dispatchEvent(new CustomEvent('appbar-breadcrumb-navigate', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleAppbarSearchClick() {
+    this.dispatchEvent(new CustomEvent('appbar-search-click', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleAppbarUserMenuOpen() {
+    this.dispatchEvent(new CustomEvent('appbar-user-menu-open', {
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleAppbarProfileMenuSelect(e: CustomEvent) {
+    this.dispatchEvent(new CustomEvent('appbar-profile-menu-select', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  // Event handlers for mainmenu
+  private handleMainmenuTabSelect(e: CustomEvent) {
+    this.mainmenuSelectedTab = e.detail.tab;
+    // Update secondary menu heading based on main menu selection
+    this.secondarymenuHeading = e.detail.tab.key;
+    this.dispatchEvent(new CustomEvent('mainmenu-tab-select', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  // Event handlers for secondarymenu
+  private handleSecondarymenuItemSelect(e: CustomEvent) {
+    this.secondarymenuSelectedItem = e.detail.item;
+    this.dispatchEvent(new CustomEvent('secondarymenu-item-select', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  // Event handlers for collapse state changes
+  private handleMainmenuCollapseChange(e: CustomEvent) {
+    this.mainmenuCollapsed = e.detail.collapsed;
+    this.dispatchEvent(new CustomEvent('mainmenu-collapse-change', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  private handleSecondarymenuCollapseChange(e: CustomEvent) {
+    this.secondarymenuCollapsed = e.detail.collapsed;
+    this.dispatchEvent(new CustomEvent('secondarymenu-collapse-change', {
+      detail: e.detail,
+      bubbles: true,
+      composed: true
+    }));
+  }
+}

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

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

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

@@ -1,4 +1,4 @@
-import * as interfaces from './interfaces/index.js';
+import * as interfaces from '../../interfaces/index.js';
 
 import {
   DeesElement,
@@ -11,17 +11,17 @@ import {
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
-import './dees-appui-tabs.js';
-import type { DeesAppuiTabs } from './dees-appui-tabs.js';
+import '../dees-appui-tabs/dees-appui-tabs.js';
+import type { DeesAppuiTabs } from '../dees-appui-tabs/dees-appui-tabs.js';
 
 @customElement('dees-appui-maincontent')
 export class DeesAppuiMaincontent extends DeesElement {
   public static demo = () => html`
     <dees-appui-maincontent
       .tabs=${[
-        { key: 'Overview', iconName: 'home', action: () => console.log('Overview') },
-        { key: 'Details', iconName: 'file', action: () => console.log('Details') },
-        { key: 'Settings', iconName: 'cog', action: () => console.log('Settings') },
+        { 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;">
@@ -35,12 +35,12 @@ export class DeesAppuiMaincontent extends DeesElement {
   @property({
     type: Array,
   })
-  public tabs: interfaces.ITab[] = [
+  accessor tabs: interfaces.ITab[] = [
     { key: '⚠️ Please set tabs', action: () => console.warn('No tabs configured for maincontent') },
   ];
 
   @property({ type: Object })
-  public selectedTab: interfaces.ITab | null = null;
+  accessor selectedTab: interfaces.ITab | null = null;
 
   public static styles = [
     cssManager.defaultStyles,

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

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

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

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

@@ -1,5 +1,5 @@
-import * as plugins from './00plugins.js';
-import { zIndexLayers } from './00zindex.js';
+import * as plugins from '../../00plugins.js';
+import { zIndexLayers } from '../../00zindex.js';
 
 import {
   DeesElement,
@@ -36,21 +36,21 @@ export class DeesAppuiProfileDropdown extends DeesElement {
   `;
 
   @property({ type: Object })
-  public user?: {
+  accessor user: {
     name: string;
     email?: string;
     avatar?: string;
     status?: 'online' | 'offline' | 'busy' | 'away';
-  };
+  } | undefined = undefined;
 
   @property({ type: Array })
-  public menuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];
+  accessor menuItems: (plugins.tsclass.website.IMenuItem & { shortcut?: string } | { divider: true })[] = [];
 
   @property({ type: Boolean, reflect: true })
-  public isOpen: boolean = false;
+  accessor isOpen: boolean = false;
 
   @property({ type: String })
-  public position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';
+  accessor position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';
 
   public static styles = [
     cssManager.defaultStyles,

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

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

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

@@ -0,0 +1,52 @@
+import { html } from '@design.estate/dees-element';
+import type * as interfaces from '../../interfaces/index.js';
+
+export const demoFunc = () => html`
+  <style>
+    .demo-secondarymenu-container {
+      display: flex;
+      height: 100%;
+      background: #1a1a1a;
+      border-radius: 8px;
+    }
+    .demo-secondarymenu-container .spacer {
+      flex: 1;
+      background: #0f0f0f;
+    }
+  </style>
+  <div class="demo-secondarymenu-container">
+    <dees-appui-secondarymenu
+      .heading=${'Projects'}
+      .groups=${[
+        {
+          name: 'Active',
+          iconName: 'lucide:folder',
+          items: [
+            { key: 'Frontend App', iconName: 'code', action: () => console.log('Frontend'), badge: 3, badgeVariant: 'warning' },
+            { key: 'API Server', iconName: 'server', action: () => console.log('API'), badge: 'new', badgeVariant: 'success' },
+            { key: 'Database', iconName: 'database', action: () => console.log('Database') },
+          ]
+        },
+        {
+          name: 'Archived',
+          iconName: 'lucide:archive',
+          collapsed: true,
+          items: [
+            { key: 'Legacy System', iconName: 'box', action: () => console.log('Legacy') },
+            { key: 'Old API', iconName: 'server', action: () => console.log('Old API') },
+          ]
+        },
+        {
+          name: 'Settings',
+          iconName: 'lucide:settings',
+          items: [
+            { key: 'Configuration', iconName: 'sliders', action: () => console.log('Config') },
+            { key: 'Integrations', iconName: 'plug', action: () => console.log('Integrations'), badge: 5, badgeVariant: 'error' },
+          ]
+        }
+      ] as interfaces.ISecondaryMenuGroup[]}
+      @item-select=${(e: CustomEvent) => console.log('Selected:', e.detail)}
+    ></dees-appui-secondarymenu>
+    <div class="spacer"></div>
+  </div>
+`;

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

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

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

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

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

@@ -0,0 +1,453 @@
+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';
+
+@customElement('dees-appui-tabs')
+export class DeesAppuiTabs extends DeesElement {
+  public static demo = () => {
+    const horizontalTabs: interfaces.ITab[] = [
+      { 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.ITab[] = [
+      { 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.ITab[] = [
+      { 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}>
+            ${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.')}
+          </dees-appui-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}>
+            ${demoContent('Tabs can also be used without the animated indicator by setting showTabIndicator to false.')}
+          </dees-appui-tabs>
+        </div>
+      </div>
+    `;
+  };
+
+  // INSTANCE
+  @property({
+    type: Array,
+  })
+  accessor tabs: interfaces.ITab[] = [];
+
+  @property({ type: Object })
+  accessor selectedTab: interfaces.ITab | null = null;
+
+  @property({ type: Boolean })
+  accessor showTabIndicator: boolean = true;
+
+  @property({ type: String })
+  accessor tabStyle: 'horizontal' | 'vertical' = 'horizontal';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+        width: 100%;
+      }
+
+      .tabs-wrapper {
+        position: relative;
+      }
+
+      .tabs-wrapper.horizontal-wrapper {
+        height: 48px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        box-sizing: border-box;
+      }
+
+      .tabsContainer {
+        position: relative;
+        user-select: none;
+      }
+
+      .tabsContainer.horizontal {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        overflow-x: auto;
+        scrollbar-width: none;
+        height: 100%;
+        padding: 0 16px;
+        gap: 4px;
+      }
+
+      .tabsContainer.horizontal::-webkit-scrollbar {
+        display: none;
+      }
+
+      .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);
+      }
+
+      .content {
+        padding: 32px 24px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      ${this.renderTabsWrapper()}
+      <div class="content">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  private renderTabsWrapper(): TemplateResult {
+    const isHorizontal = this.tabStyle === 'horizontal';
+    const wrapperClass = isHorizontal ? 'tabs-wrapper horizontal-wrapper' : 'vertical-wrapper';
+    const containerClass = `tabsContainer ${this.tabStyle}`;
+
+    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.ITab, isHorizontal: boolean): TemplateResult {
+    const isSelected = tab === this.selectedTab;
+    const classes = `tab ${isSelected ? 'selectedTab' : ''}`;
+    
+    const content = isHorizontal ? html`
+      <span class="tab-content">
+        ${this.renderTabIcon(tab)}
+        ${tab.key}
+      </span>
+    ` : html`
+      ${this.renderTabIcon(tab)}
+      ${tab.key}
+    `;
+
+    return html`
+      <div
+        class="${classes}"
+        @click="${() => this.selectTab(tab)}"
+      >
+        ${content}
+      </div>
+    `;
+  }
+
+  private renderTabIcon(tab: interfaces.ITab): TemplateResult | '' {
+    return tab.iconName ? html`<dees-icon .icon=${tab.iconName}></dees-icon>` : '';
+  }
+
+  private selectTab(tabArg: interfaces.ITab) {
+    this.selectedTab = tabArg;
+    tabArg.action();
+    
+    // Emit tab-select event
+    this.dispatchEvent(new CustomEvent('tab-select', {
+      detail: { tab: tabArg },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
+  firstUpdated() {
+    if (this.tabs && this.tabs.length > 0) {
+      this.selectTab(this.tabs[0]);
+    }
+  }
+
+  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();
+      });
+    }
+  }
+
+  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-view/dees-appui-view.ts

@@ -1,4 +1,4 @@
-import * as interfaces from './interfaces/index.js';
+import * as interfaces from '../../interfaces/index.js';
 
 import {
   DeesElement,
@@ -11,8 +11,8 @@ import {
   state,
 } from '@design.estate/dees-element';
 
-import './dees-appui-tabs.js';
-import type { DeesAppuiTabs } from './dees-appui-tabs.js';
+import '../dees-appui-tabs/dees-appui-tabs.js';
+import type { DeesAppuiTabs } from '../dees-appui-tabs/dees-appui-tabs.js';
 
 export interface IAppViewTab extends interfaces.ITab {
   content?: TemplateResult | (() => TemplateResult);
@@ -35,17 +35,17 @@ export class DeesAppuiView extends DeesElement {
         id: 'demo-view',
         name: 'Demo View',
         description: 'A demonstration view',
-        iconName: 'home',
+        iconName: 'lucide:home',
         tabs: [
           {
             key: 'overview',
-            iconName: 'chart-line',
+            iconName: 'lucide:lineChart',
             action: () => console.log('Overview tab'),
             content: html`<div style="padding: 20px;">Overview Content</div>`
           },
           {
             key: 'details',
-            iconName: 'file-alt',
+            iconName: 'lucide:fileText',
             action: () => console.log('Details tab'),
             content: html`<div style="padding: 20px;">Details Content</div>`
           }
@@ -60,13 +60,13 @@ export class DeesAppuiView extends DeesElement {
 
   // INSTANCE
   @property({ type: Object })
-  public viewConfig: IAppView;
+  accessor viewConfig: IAppView;
 
   @state()
-  private selectedTab: IAppViewTab | null = null;
+  accessor selectedTab: IAppViewTab | null = null;
 
   @state()
-  private tabs: DeesAppuiTabs;
+  accessor tabs: DeesAppuiTabs;
 
   public static styles = [
     cssManager.defaultStyles,

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

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

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

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

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

@@ -21,7 +21,7 @@ export class DeesButtonExit extends DeesElement {
   @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.ts

@@ -22,10 +22,10 @@ export class DeesButtonGroup extends DeesElement {
   public static demo = demoFunc;
 
   @property()
-  public label: string = '';
+  accessor label: string = '';
 
   @property()
-  public direction: 'horizontal' | 'vertical' = 'horizontal';
+  accessor direction: 'horizontal' | 'vertical' = 'horizontal';
 
   constructor() {
     super();

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,421 @@
+import { html, css, cssManager, domtools } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import '../../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 '../../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 iconFA="faPlus"></dees-icon>
+            Add Item
+          </dees-button>
+          <dees-button type="destructive">
+            <dees-icon iconFA="faTrash"></dees-icon>
+            Delete
+          </dees-button>
+          <dees-button type="outline">
+            <dees-icon iconFA="faDownload"></dees-icon>
+            Download
+          </dees-button>
+        </div>
+        
+        <div class="icon-row">
+          <dees-button type="secondary" size="sm">
+            <dees-icon iconFA="faCog"></dees-icon>
+            Settings
+          </dees-button>
+          <dees-button type="ghost">
+            <dees-icon iconFA="faChevronLeft"></dees-icon>
+            Back
+          </dees-button>
+          <dees-button type="ghost">
+            Next
+            <dees-icon iconFA="faChevronRight"></dees-icon>
+          </dees-button>
+        </div>
+        
+        <div class="icon-row">
+          <dees-button size="icon" type="default">
+            <dees-icon iconFA="faPlus"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="secondary">
+            <dees-icon iconFA="faCog"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="outline">
+            <dees-icon iconFA="faSearch"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="ghost">
+            <dees-icon iconFA="faEllipsisV"></dees-icon>
+          </dees-button>
+          <dees-button size="icon" type="destructive">
+            <dees-icon iconFA="faTrash"></dees-icon>
+          </dees-button>
+        </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=${'4. 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=${'5. 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=${'6. 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=${'7. 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=${'8. 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 iconFA="faSave"></dees-icon>
+              Save Changes
+            </dees-button>
+            <dees-button type="secondary" size="sm">
+              <dees-icon iconFA="faUndo"></dees-icon>
+              Discard
+            </dees-button>
+            <dees-button type="ghost" size="sm">
+              <dees-icon iconFA="faQuestionCircle"></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 iconFA="faTrash"></dees-icon>
+              Delete Account
+            </dees-button>
+            <dees-button type="outline" size="sm">
+              <dees-icon iconFA="faArchive"></dees-icon>
+              Archive Data
+            </dees-button>
+            <dees-button type="ghost" size="sm" disabled>
+              <dees-icon iconFA="faBan"></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" @clicked="\${handleClick}"&gt;<br>
+            &nbsp;&nbsp;&lt;dees-icon iconFA="faSave"&gt;&lt;/dees-icon&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,391 @@
+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';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-button': DeesButton;
+  }
+}
+
+@customElement('dees-button')
+export class DeesButton extends DeesElement {
+  public static demo = demoFunc;
+
+  @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;
+
+  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 = [
+    cssManager.defaultStyles,
+    css`
+      :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;
+      }
+
+    `,
+  ];
+
+  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;
+    
+    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>
+        `}
+        <div class="textbox">${this.text || html`<slot>Button</slot>`}</div>
+      </div>
+    `;
+  }
+
+  public async dispatchClick() {
+    if (this.disabled) {
+      return;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('clicked', {
+        detail: {
+          data: this.eventDetailData,
+        },
+        bubbles: true,
+      })
+    );
+  }
+
+  public async firstUpdated() {
+    // Don't set default text here as it interferes with slotted content
+  }
+}

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,667 @@
+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 ApexCharts from 'apexcharts';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-chart-area': DeesChartArea;
+  }
+}
+
+@customElement('dees-chart-area')
+export class DeesChartArea extends DeesElement {
+  public static demo = demoFunc;
+
+  // 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;
+    
+    // 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 ApexCharts(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

@@ -1,6 +1,7 @@
-import { html, css } from '@design.estate/dees-element';
-import type { DeesChartArea } from './dees-chart-area.js';
+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
@@ -402,7 +403,7 @@ export const demoFunc = () => {
         ${css`
         .demoBox {
           position: relative;
-          background: #000000;
+          background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
           height: 100%;
           width: 100%;
           padding: 40px;
@@ -425,9 +426,9 @@ export const demoFunc = () => {
         }
         
         .info {
-          color: #666;
-          font-size: 11px;
-          font-family: 'Geist Sans', sans-serif;
+          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;
         }

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

@@ -1,5 +1,5 @@
 import { html } from '@design.estate/dees-element';
-import type { DeesChartLog } from './dees-chart-log.js';
+import type { DeesChartLog } from '../dees-chart-log/dees-chart-log.js';
 import '@design.estate/dees-wcctools/demotools';
 
 export const demoFunc = () => {

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

@@ -30,16 +30,16 @@ export class DeesChartLog extends DeesElement {
   public static demo = demoFunc;
 
   @property()
-  public label: string = 'Server Logs';
+  accessor label: string = 'Server Logs';
 
   @property({ type: Array })
-  public logEntries: ILogEntry[] = [];
+  accessor logEntries: ILogEntry[] = [];
 
   @property({ type: Boolean })
-  public autoScroll: boolean = true;
+  accessor autoScroll: boolean = true;
 
   @property({ type: Number })
-  public maxEntries: number = 1000;
+  accessor maxEntries: number = 1000;
 
   private logContainer: HTMLDivElement;
 
@@ -53,17 +53,17 @@ export class DeesChartLog extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        font-family: 'Geist Mono', 'Consolas', 'Monaco', monospace;
-        color: #ccc;
+        font-family: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
         font-size: 12px;
-        line-height: 1.4;
+        line-height: 1.5;
       }
       .mainbox {
         position: relative;
         width: 100%;
         height: 400px;
-        background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
-        border: 1px solid ${cssManager.bdTheme('#dee2e6', '#333')};
+        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;
@@ -71,9 +71,9 @@ export class DeesChartLog extends DeesElement {
       }
 
       .header {
-        background: ${cssManager.bdTheme('#e9ecef', '#1a1a1a')};
-        padding: 8px 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#dee2e6', '#333')};
+        background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+        padding: 12px 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
         display: flex;
         justify-content: space-between;
         align-items: center;
@@ -81,8 +81,10 @@ export class DeesChartLog extends DeesElement {
       }
 
       .title {
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#212529', '#fff')};
+        font-weight: 500;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       }
 
       .controls {
@@ -91,44 +93,48 @@ export class DeesChartLog extends DeesElement {
       }
 
       .control-button {
-        background: ${cssManager.bdTheme('#e9ecef', '#2a2a2a')};
-        border: 1px solid ${cssManager.bdTheme('#ced4da', '#444')};
-        border-radius: 4px;
-        padding: 4px 8px;
-        color: ${cssManager.bdTheme('#495057', '#ccc')};
+        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: 6px;
+        padding: 6px 12px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
         cursor: pointer;
-        font-size: 11px;
-        transition: all 0.2s;
+        font-size: 12px;
+        font-weight: 500;
+        transition: all 0.15s;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       }
 
       .control-button:hover {
-        background: ${cssManager.bdTheme('#dee2e6', '#3a3a3a')};
-        border-color: ${cssManager.bdTheme('#adb5bd', '#555')};
+        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%)')};
       }
 
       .control-button.active {
-        background: ${cssManager.bdTheme('#007bff', '#4a4a4a')};
-        color: ${cssManager.bdTheme('#fff', '#fff')};
+        background: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 93.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(0 0% 3.9%)')};
       }
 
       .logContainer {
         flex: 1;
         overflow-y: auto;
         overflow-x: hidden;
-        padding: 8px 16px;
+        padding: 16px;
         font-size: 12px;
       }
 
       .logEntry {
-        margin-bottom: 2px;
+        margin-bottom: 4px;
         display: flex;
         white-space: pre-wrap;
         word-break: break-all;
+        font-variant-numeric: tabular-nums;
       }
 
       .timestamp {
-        color: ${cssManager.bdTheme('#6c757d', '#666')};
-        margin-right: 8px;
+        color: ${cssManager.bdTheme('hsl(0 0% 63.9%)', 'hsl(0 0% 45.1%)')};
+        margin-right: 12px;
         flex-shrink: 0;
       }
 
@@ -143,38 +149,38 @@ export class DeesChartLog extends DeesElement {
       }
 
       .level.debug {
-        color: ${cssManager.bdTheme('#6c757d', '#999')};
-        background: ${cssManager.bdTheme('rgba(108, 117, 125, 0.1)', '#333')};
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 45.1% / 0.1)', 'hsl(0 0% 63.9% / 0.1)')};
       }
 
       .level.info {
-        color: ${cssManager.bdTheme('#0066cc', '#4a9eff')};
-        background: ${cssManager.bdTheme('rgba(0, 102, 204, 0.1)', 'rgba(74, 158, 255, 0.1)')};
+        color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
       }
 
       .level.warn {
-        color: ${cssManager.bdTheme('#ff8800', '#ffb84a')};
-        background: ${cssManager.bdTheme('rgba(255, 136, 0, 0.1)', 'rgba(255, 184, 74, 0.1)')};
+        color: ${cssManager.bdTheme('hsl(25 95% 53%)', 'hsl(25 95% 63%)')};
+        background: ${cssManager.bdTheme('hsl(25 95% 53% / 0.1)', 'hsl(25 95% 63% / 0.1)')};
       }
 
       .level.error {
-        color: ${cssManager.bdTheme('#dc3545', '#ff4a4a')};
-        background: ${cssManager.bdTheme('rgba(220, 53, 69, 0.1)', 'rgba(255, 74, 74, 0.1)')};
+        color: ${cssManager.bdTheme('hsl(0 84.2% 60.2%)', 'hsl(0 72.2% 50.6%)')};
+        background: ${cssManager.bdTheme('hsl(0 84.2% 60.2% / 0.1)', 'hsl(0 72.2% 50.6% / 0.1)')};
       }
 
       .level.success {
-        color: ${cssManager.bdTheme('#28a745', '#4aff88')};
-        background: ${cssManager.bdTheme('rgba(40, 167, 69, 0.1)', 'rgba(74, 255, 136, 0.1)')};
+        color: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3%)', 'hsl(142.1 70.6% 45.3%)')};
+        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.1)', 'hsl(142.1 70.6% 45.3% / 0.1)')};
       }
 
       .source {
-        color: ${cssManager.bdTheme('#6c757d', '#888')};
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
         margin-right: 8px;
         flex-shrink: 0;
       }
 
       .message {
-        color: ${cssManager.bdTheme('#212529', '#ddd')};
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
         flex: 1;
       }
 
@@ -183,7 +189,7 @@ export class DeesChartLog extends DeesElement {
         align-items: center;
         justify-content: center;
         height: 100%;
-        color: ${cssManager.bdTheme('#6c757d', '#666')};
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
         font-style: italic;
       }
 
@@ -193,16 +199,16 @@ export class DeesChartLog extends DeesElement {
       }
 
       .logContainer::-webkit-scrollbar-track {
-        background: ${cssManager.bdTheme('#e9ecef', '#1a1a1a')};
+        background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 10%)')};
       }
 
       .logContainer::-webkit-scrollbar-thumb {
-        background: ${cssManager.bdTheme('#adb5bd', '#444')};
+        background: ${cssManager.bdTheme('hsl(0 0% 70%)', 'hsl(0 0% 30%)')};
         border-radius: 4px;
       }
 
       .logContainer::-webkit-scrollbar-thumb:hover {
-        background: ${cssManager.bdTheme('#6c757d', '#555')};
+        background: ${cssManager.bdTheme('hsl(0 0% 60%)', 'hsl(0 0% 40%)')};
       }
     `,
   ];

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,14 @@ import {
   state,
   cssManager,
 } from '@design.estate/dees-element';
+import { cssGeistFontFamily, cssMonoFontFamily } from '../../00fonts.js';
 
 import hlight from 'highlight.js';
 
 import * as smartstring from '@push.rocks/smartstring';
 
 import * as domtools from '@design.estate/dees-domtools';
-import { DeesContextmenu } from './dees-contextmenu.js';
+import { DeesContextmenu } from '../../dees-contextmenu/dees-contextmenu.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -27,13 +28,13 @@ export class DeesDataviewCodebox extends DeesElement {
   public static demo = demoFunc;
 
   @property()
-  public progLang: string = 'typescript';
+  accessor progLang: string = 'typescript';
 
   @property({
     type: String,
     reflect: true,
   })
-  public codeToDisplay: string = '';
+  accessor codeToDisplay: string = '';
 
   constructor() {
     super();
@@ -48,27 +49,27 @@ export class DeesDataviewCodebox extends DeesElement {
           display: block;
           text-align: left;
           font-size: 16px;
-          font-family: 'Geist Sans', 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 +82,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 +123,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 +136,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 +150,43 @@ export class DeesDataviewCodebox extends DeesElement {
         .lineNumbers {
           line-height: 1.4em;
           font-weight: 200;
-          font-family: 'Intel One Mono', 'Geist 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
@@ -197,14 +221,13 @@ 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 = '';
 
   public async updated(_changedProperties) {

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,251 @@
+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 '../../dees-contextmenu/dees-contextmenu.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-dataview-statusobject': DeesDataviewStatusobject;
+  }
+}
+
+@customElement('dees-dataview-statusobject')
+export class DeesDataviewStatusobject extends DeesElement {
+  public static demo = demoFunc;
+
+  @property({ type: Object }) accessor statusObject: tsclass.code.IStatusObject;
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :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/index.ts

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

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

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

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

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

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

@@ -8,6 +8,7 @@ import {
   cssManager,
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
+import { MONACO_VERSION } from './version.js';
 
 import type * as monaco from 'monaco-editor';
 
@@ -32,17 +33,17 @@ export class DeesEditor extends DeesElement {
   @property({
     type: String
   })
-  public content = "function hello() {\n\talert('Hello world!');\n}";
+  accessor content = "function hello() {\n\talert('Hello world!');\n}";
 
   @property({
     type: Object
   })
-  public contentSubject = new domtools.plugins.smartrx.rxjs.Subject<string>();
+  accessor contentSubject = new domtools.plugins.smartrx.rxjs.Subject<string>();
 
   @property({
     type: Boolean
   })
-  public wordWrap: monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] = 'off';
+  accessor wordWrap: monaco.editor.IStandaloneEditorConstructionOptions['wordWrap'] = 'off';
 
   constructor() {
     super();
@@ -80,10 +81,11 @@ export class DeesEditor extends DeesElement {
   ): Promise<void> {
     super.firstUpdated(_changedProperties);
     const container = this.shadowRoot.getElementById('container');
+    const monacoCdnBase = `https://cdn.jsdelivr.net/npm/monaco-editor@${MONACO_VERSION}`;
 
     if (!DeesEditor.monacoDeferred) {
       DeesEditor.monacoDeferred = domtools.plugins.smartpromise.defer();
-      const scriptUrl = `https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/loader.js`;
+      const scriptUrl = `${monacoCdnBase}/min/vs/loader.js`;
       const script = document.createElement('script');
       script.src = scriptUrl;
       script.onload = () => {
@@ -94,7 +96,7 @@ export class DeesEditor extends DeesElement {
     await DeesEditor.monacoDeferred.promise;
 
     (window as any).require.config({
-      paths: { vs: 'https://cdn.jsdelivr.net/npm/monaco-editor/min/vs' },
+      paths: { vs: `${monacoCdnBase}/min/vs` },
     });
     (window as any).require(['vs/editor/editor.main'], async () => {
       const editor = ((window as any).monaco.editor as typeof monaco.editor).create(container, {
@@ -109,7 +111,7 @@ export class DeesEditor extends DeesElement {
       this.editorDeferred.resolve(editor);
     });
     const css = await (
-      await fetch('https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/editor/editor.main.css')
+      await fetch(`${monacoCdnBase}/min/vs/editor/editor.main.css`)
     ).text();
     const styleElement = document.createElement('style');
     styleElement.textContent = css;

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

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

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

@@ -0,0 +1,2 @@
+// Auto-generated by scripts/update-monaco-version.cjs
+export const MONACO_VERSION = '0.52.2';

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

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

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

@@ -7,7 +7,7 @@ import {
   cssManager,
   property,
 } from '@design.estate/dees-element';
-import type { DeesForm } from './dees-form.js';
+import type { DeesForm } from '../dees-form/dees-form.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -23,17 +23,17 @@ export class DeesFormSubmit extends DeesElement {
     type: Boolean,
     reflect: true,
   })
-  public disabled = false;
+  accessor disabled = false;
 
   @property({
     type: String,
   })
-  public text: string;
+  accessor text: string;
 
   @property({
     type: String,
   })
-  public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
+  accessor status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
   constructor() {
     super();
@@ -57,9 +57,10 @@ export class DeesFormSubmit extends DeesElement {
     if (this.disabled) {
       return;
     }
-    const parentElement: DeesForm = this.parentElement as DeesForm;
-    if (parentElement && parentElement.gatherAndDispatch) {
-      parentElement.gatherAndDispatch();
+    // Walk up the DOM tree to find the nearest dees-form element
+    const parentFormElement = this.closest('dees-form') as DeesForm;
+    if (parentFormElement && parentFormElement.gatherAndDispatch) {
+      parentFormElement.gatherAndDispatch();
     }
   }
 

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

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

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

@@ -0,0 +1,313 @@
+import { html, css, domtools, cssManager } from '@design.estate/dees-element';
+import type { DeesForm } from './dees-form.js';
+import '@design.estate/dees-wcctools/demotools';
+
+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;
+      }
+      
+      .form-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;
+        white-space: pre-wrap;
+      }
+      
+      .status-message {
+        margin-top: 16px;
+        padding: 12px;
+        border-radius: 6px;
+        font-size: 14px;
+      }
+      
+      .status-message.success {
+        background: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3% / 0.1)', 'hsl(142.1 70.6% 45.3% / 0.2)')};
+        color: ${cssManager.bdTheme('hsl(142.1 70.6% 35.3%)', 'hsl(142.1 70.6% 65.3%)')};
+      }
+      
+      .status-message.error {
+        background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.1)', 'hsl(0 72.2% 50.6% / 0.2)')};
+        color: ${cssManager.bdTheme('hsl(0 72.2% 40.6%)', 'hsl(0 72.2% 60.6%)')};
+      }
+    `}
+  </style>
+  
+  <div class="demo-container">
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const form = elementArg.querySelector('dees-form') as DeesForm;
+      const outputDiv = elementArg.querySelector('.form-output');
+      
+      if (form && outputDiv) {
+        form.addEventListener('formData', async (eventArg: CustomEvent) => {
+          const data = eventArg.detail.data;
+          console.log('Form submitted with data:', data);
+          
+          // Show processing state
+          form.setStatus('pending', 'Processing your registration...');
+          outputDiv.innerHTML = `<strong>Submitted Data:</strong>\n${JSON.stringify(data, null, 2)}`;
+          
+          // Simulate API call
+          await domtools.plugins.smartdelay.delayFor(2000);
+          
+          // Show success
+          form.setStatus('success', 'Registration completed successfully!');
+          
+          // Reset form after delay
+          await domtools.plugins.smartdelay.delayFor(2000);
+          form.reset();
+          outputDiv.innerHTML = '<em>Form has been reset</em>';
+        });
+        
+        // Track individual field changes
+        const inputs = form.querySelectorAll('dees-input-text, dees-input-dropdown, dees-input-checkbox');
+        inputs.forEach((input) => {
+          input.addEventListener('changeSubject', () => {
+            console.log('Field changed:', input.getAttribute('key'));
+          });
+        });
+      }
+    }}>
+      <dees-panel .heading="Complete Form Example" .description="A comprehensive form with various input types, validation, and form submission handling">
+        <dees-form>
+          <dees-input-text 
+            .required=${true} 
+            key="firstName" 
+            label="First Name"
+            .description=${'Your given name'}
+          ></dees-input-text>
+          
+          <dees-input-text 
+            .required=${true} 
+            key="lastName" 
+            label="Last Name"
+          ></dees-input-text>
+          
+          <dees-input-text 
+            .required=${true} 
+            key="email" 
+            label="Email Address"
+            .description=${'We will use this to contact you'}
+          ></dees-input-text>
+          
+          <dees-input-dropdown
+            .required=${true}
+            key="country"
+            .label=${'Country'}
+            .options=${[
+              { option: 'United States', key: 'us' },
+              { option: 'Canada', key: 'ca' },
+              { option: 'Germany', key: 'de' },
+              { option: 'France', key: 'fr' },
+              { option: 'United Kingdom', key: 'uk' },
+            ]}
+          ></dees-input-dropdown>
+          
+          <dees-input-text
+            .required=${true}
+            key="password"
+            label="Password"
+            isPasswordBool
+            .description=${'Minimum 8 characters'}
+          ></dees-input-text>
+          
+          <dees-input-checkbox
+            .required=${true}
+            key="terms"
+            label="I agree to the Terms and Conditions"
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox
+            key="newsletter"
+            label="Send me promotional emails"
+            .value=${true}
+          ></dees-input-checkbox>
+          
+          <dees-form-submit>Create Account</dees-form-submit>
+        </dees-form>
+        
+        <div class="form-output">
+          <em>Submit the form to see the collected data...</em>
+        </div>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const form = elementArg.querySelector('dees-form') as DeesForm;
+      
+      if (form) {
+        // Track horizontal layout behavior
+        console.log('Horizontal form layout active');
+        
+        // Monitor filter changes
+        form.addEventListener('formData', (event: CustomEvent) => {
+          const filters = event.detail.data;
+          console.log('Filter applied:', filters);
+          
+          // Simulate search
+          const resultsCount = Math.floor(Math.random() * 100) + 1;
+          console.log(`Found ${resultsCount} results with filters:`, filters);
+        });
+        
+        // Setup real-time filter updates
+        const inputs = form.querySelectorAll('[key]');
+        inputs.forEach((input) => {
+          input.addEventListener('changeSubject', async () => {
+            // Get current form data
+            const formData = await form.collectFormData();
+            console.log('Live filter update:', formData);
+          });
+        });
+      }
+    }}>
+      <dees-panel .heading="Horizontal Form Layout" .description="Compact form with inputs arranged horizontally - perfect for filters and quick forms">
+        <dees-form horizontal-layout>
+          <dees-input-text 
+            key="search" 
+            label="Search"
+            placeholder="Enter keywords..."
+          ></dees-input-text>
+          
+          <dees-input-dropdown
+            key="category"
+            .label=${'Category'}
+            .enableSearch=${false}
+            .options=${[
+              { option: 'All', key: 'all' },
+              { option: 'Products', key: 'products' },
+              { option: 'Services', key: 'services' },
+              { option: 'Support', key: 'support' },
+            ]}
+          ></dees-input-dropdown>
+          
+          <dees-input-dropdown
+            key="sort"
+            .label=${'Sort By'}
+            .enableSearch=${false}
+            .options=${[
+              { option: 'Newest', key: 'newest' },
+              { option: 'Popular', key: 'popular' },
+              { option: 'Price: Low to High', key: 'price_asc' },
+              { option: 'Price: High to Low', key: 'price_desc' },
+            ]}
+          ></dees-input-dropdown>
+          
+          <dees-input-checkbox
+            key="inStock"
+            label="In Stock Only"
+            .value=${true}
+          ></dees-input-checkbox>
+        </dees-form>
+      </dees-panel>
+    </dees-demowrapper>
+    
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const form = elementArg.querySelector('dees-form') as DeesForm;
+      const statusDiv = elementArg.querySelector('#status-display');
+      
+      if (form) {
+        form.addEventListener('formData', async (eventArg: CustomEvent) => {
+          const data = eventArg.detail.data;
+          console.log('Advanced form data:', data);
+          
+          // Show validation in progress
+          form.setStatus('pending', 'Validating your information...');
+          
+          // Simulate validation
+          await domtools.plugins.smartdelay.delayFor(1500);
+          
+          // Check IBAN validity (simple check)
+          if (data.iban && data.iban.length > 15) {
+            form.setStatus('success', 'Application submitted successfully!');
+            
+            if (statusDiv) {
+              statusDiv.className = 'status-message success';
+              statusDiv.textContent = '✓ Your application has been submitted. We will contact you soon.';
+            }
+          } else {
+            form.setStatus('error', 'Please check your IBAN');
+            
+            if (statusDiv) {
+              statusDiv.className = 'status-message error';
+              statusDiv.textContent = '✗ Invalid IBAN format. Please check and try again.';
+            }
+          }
+          
+          console.log('Form data logged:', data);
+        });
+        
+        // Monitor file uploads
+        const fileUpload = form.querySelector('dees-input-fileupload');
+        if (fileUpload) {
+          fileUpload.addEventListener('change', (event: any) => {
+            const files = event.detail?.files || [];
+            console.log(`${files.length} file(s) selected for upload`);
+          });
+        }
+      }
+    }}>
+      <dees-panel .heading="Advanced Form Features" .description="Form with specialized input types and complex validation">
+        <dees-form>
+          <dees-input-iban 
+            key="iban"
+            label="IBAN"
+            .required=${true}
+          ></dees-input-iban>
+          
+          <dees-input-phone
+            key="phone"
+            label="Phone Number"
+            .required=${true}
+          ></dees-input-phone>
+          
+          <dees-input-multitoggle
+            key="preferences"
+            .label=${'Notification Preferences'}
+            .options=${['Email', 'SMS', 'Push', 'In-App']}
+            .selectedOption=${'Email'}
+          ></dees-input-multitoggle>
+          
+          <dees-input-multiselect
+            key="interests"
+            .label=${'Areas of Interest'}
+            .options=${[
+              { option: 'Technology', key: 'tech' },
+              { option: 'Design', key: 'design' },
+              { option: 'Business', key: 'business' },
+              { option: 'Marketing', key: 'marketing' },
+              { option: 'Sales', key: 'sales' },
+            ]}
+          ></dees-input-multiselect>
+          
+          <dees-input-fileupload
+            key="documents"
+            .label=${'Upload Documents'}
+            .description=${'PDF, DOC, or DOCX files up to 10MB'}
+          ></dees-input-fileupload>
+          
+          <dees-form-submit>Submit Application</dees-form-submit>
+        </dees-form>
+        
+        <div id="status-display"></div>
+      </dees-panel>
+    </dees-demowrapper>
+  </div>
+`;

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

@@ -8,23 +8,25 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
-import { DeesInputCheckbox } from './dees-input-checkbox.js';
-import { DeesInputText } from './dees-input-text.js';
-import { DeesInputQuantitySelector } from './dees-input-quantityselector.js';
-import { DeesInputRadiogroup } from './dees-input-radiogroup.js';
-import { DeesInputDropdown } from './dees-input-dropdown.js';
-import { DeesInputFileupload } from './dees-input-fileupload.js';
-import { DeesInputIban } from './dees-input-iban.js';
-import { DeesInputMultitoggle } from './dees-input-multitoggle.js';
-import { DeesInputPhone } from './dees-input-phone.js';
-import { DeesInputTypelist } from './dees-input-typelist.js';
-import { DeesFormSubmit } from './dees-form-submit.js';
-import { DeesTable } from './dees-table.js';
+import { DeesInputCheckbox } from '../../00group-input/dees-input-checkbox/dees-input-checkbox.js';
+import { DeesInputDatepicker } from '../../00group-input/dees-input-datepicker/index.js';
+import { DeesInputText } from '../../00group-input/dees-input-text/dees-input-text.js';
+import { DeesInputQuantitySelector } from '../../00group-input/dees-input-quantityselector/dees-input-quantityselector.js';
+import { DeesInputRadiogroup } from '../../00group-input/dees-input-radiogroup/dees-input-radiogroup.js';
+import { DeesInputDropdown } from '../../00group-input/dees-input-dropdown/dees-input-dropdown.js';
+import { DeesInputFileupload } from '../../00group-input/dees-input-fileupload/index.js';
+import { DeesInputIban } from '../../00group-input/dees-input-iban/dees-input-iban.js';
+import { DeesInputMultitoggle } from '../../00group-input/dees-input-multitoggle/dees-input-multitoggle.js';
+import { DeesInputPhone } from '../../00group-input/dees-input-phone/dees-input-phone.js';
+import { DeesInputTypelist } from '../../00group-input/dees-input-typelist/dees-input-typelist.js';
+import { DeesFormSubmit } from '../dees-form-submit/dees-form-submit.js';
+import { DeesTable } from '../../dees-table/index.js';
 import { demoFunc } from './dees-form.demo.js';
 
 // Unified set for form input types
 const FORM_INPUT_TYPES = [
   DeesInputCheckbox,
+  DeesInputDatepicker,
   DeesInputDropdown,
   DeesInputFileupload,
   DeesInputIban,
@@ -39,6 +41,7 @@ const FORM_INPUT_TYPES = [
 
 export type TFormInputElement =
   | DeesInputCheckbox
+  | DeesInputDatepicker
   | DeesInputDropdown
   | DeesInputFileupload
   | DeesInputIban
@@ -69,7 +72,7 @@ export class DeesForm extends DeesElement {
    * When true, sets all child inputs to horizontal layout
    */
   @property({ type: Boolean, reflect: true, attribute: 'horizontal-layout' })
-  public horizontalLayout: boolean = false;
+  accessor horizontalLayout: boolean = false;
 
   public render(): TemplateResult {
     return html`

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

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

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

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

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

@@ -19,31 +19,31 @@ export abstract class DeesInputBase<T = any> extends DeesElement {
    * - auto: Detect from parent context
    */
   @property({ type: String })
-  public layoutMode: 'vertical' | 'horizontal' | 'auto' = 'auto';
+  accessor layoutMode: 'vertical' | 'horizontal' | 'auto' = 'auto';
 
   /**
    * Position of the label relative to the input
    */
   @property({ type: String })
-  public labelPosition: 'top' | 'left' | 'right' | 'none' = 'top';
+  accessor labelPosition: 'top' | 'left' | 'right' | 'none' = 'top';
 
   /**
    * Common properties for all inputs
    */
   @property({ type: String })
-  public key: string;
+  accessor key: string;
 
   @property({ type: String })
-  public label: string;
+  accessor label: string;
 
   @property({ type: Boolean })
-  public required: boolean = false;
+  accessor required: boolean = false;
 
   @property({ type: Boolean })
-  public disabled: boolean = false;
+  accessor disabled: boolean = false;
 
   @property({ type: String })
-  public description: string;
+  accessor description: string;
 
   /**
    * Common styles for all input components

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

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

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

@@ -0,0 +1,307 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import '@design.estate/dees-wcctools/demotools';
+import '../../dees-panel/dees-panel.js';
+import type { DeesInputCheckbox } from '../dees-input-checkbox/dees-input-checkbox.js';
+import '../../00group-button/dees-button/dees-button.js';
+
+export const demoFunc = () => html`
+  <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+    // Get all checkboxes for demo interactions
+    const checkboxes = elementArg.querySelectorAll('dees-input-checkbox');
+    
+    // Example of programmatic interaction
+    const selectAllBtn = elementArg.querySelector('#select-all-btn');
+    const clearAllBtn = elementArg.querySelector('#clear-all-btn');
+    
+    if (selectAllBtn && clearAllBtn) {
+      selectAllBtn.addEventListener('click', () => {
+        checkboxes.forEach((checkbox: DeesInputCheckbox) => {
+          if (!checkbox.disabled && checkbox.key?.startsWith('feature')) {
+            checkbox.value = true;
+          }
+        });
+      });
+      
+      clearAllBtn.addEventListener('click', () => {
+        checkboxes.forEach((checkbox: DeesInputCheckbox) => {
+          if (!checkbox.disabled && checkbox.key?.startsWith('feature')) {
+            checkbox.value = false;
+          }
+        });
+      });
+    }
+  }}>
+    <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;
+        }
+        
+        .checkbox-group {
+          display: flex;
+          flex-direction: column;
+          gap: 12px;
+        }
+        
+        .horizontal-checkboxes {
+          display: flex;
+          gap: 24px;
+          flex-wrap: wrap;
+        }
+        
+        .interactive-section {
+          background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(215 20.2% 16.8%)')};
+          border-radius: 8px;
+          padding: 16px;
+          margin-top: 16px;
+        }
+        
+        .output-text {
+          font-family: monospace;
+          font-size: 13px;
+          color: ${cssManager.bdTheme('hsl(215.3 25% 26.7%)', 'hsl(210 40% 80%)')};
+          padding: 8px;
+          background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
+          border-radius: 4px;
+          min-height: 24px;
+        }
+        
+        .form-section {
+          background: ${cssManager.bdTheme('hsl(0 0% 97%)', 'hsl(0 0% 7%)')};
+          border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+          border-radius: 8px;
+          padding: 20px;
+          margin-top: 16px;
+        }
+        
+        .button-group {
+          display: flex;
+          gap: 8px;
+          margin-bottom: 16px;
+        }
+        
+        .feature-list {
+          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;
+        }
+        
+        .section-title {
+          font-size: 16px;
+          font-weight: 600;
+          margin-bottom: 16px;
+          color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        }
+      `}
+    </style>
+    
+    <div class="demo-container">
+      <dees-panel .title=${'Basic Checkboxes'} .subtitle=${'Simple checkbox examples with various labels'}>
+        <div class="checkbox-group">
+          <dees-input-checkbox 
+            .label=${'I agree to the Terms and Conditions'} 
+            .value=${true}
+            .key=${'terms'}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Subscribe to newsletter'} 
+            .value=${false}
+            .key=${'newsletter'}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Enable notifications'} 
+            .value=${false}
+            .description=${'Receive email updates about your account'}
+            .key=${'notifications'}
+          ></dees-input-checkbox>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'Checkbox States'} .subtitle=${'Different checkbox states and configurations'}>
+        <div class="checkbox-group">
+          <dees-input-checkbox 
+            .label=${'Default state'} 
+            .value=${false}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Checked state'} 
+            .value=${true}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Disabled unchecked'} 
+            .value=${false}
+            .disabled=${true}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Disabled checked'} 
+            .value=${true}
+            .disabled=${true}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Required checkbox'} 
+            .required=${true}
+            .key=${'required'}
+          ></dees-input-checkbox>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'Horizontal Layout'} .subtitle=${'Checkboxes arranged horizontally for compact forms'}>
+        <div class="horizontal-checkboxes">
+          <dees-input-checkbox 
+            .label=${'Option A'} 
+            .value=${false}
+            .layoutMode=${'horizontal'}
+            .key=${'optionA'}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Option B'} 
+            .value=${true}
+            .layoutMode=${'horizontal'}
+            .key=${'optionB'}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Option C'} 
+            .value=${false}
+            .layoutMode=${'horizontal'}
+            .key=${'optionC'}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Option D'} 
+            .value=${true}
+            .layoutMode=${'horizontal'}
+            .key=${'optionD'}
+          ></dees-input-checkbox>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'Feature Selection Example'} .subtitle=${'Common use case for feature toggles with batch operations'}>
+        <div class="button-group">
+          <dees-button id="select-all-btn" type="secondary">Select All</dees-button>
+          <dees-button id="clear-all-btn" type="secondary">Clear All</dees-button>
+        </div>
+        
+        <div class="feature-list">
+          <div class="checkbox-group">
+            <dees-input-checkbox 
+              .label=${'Dark Mode Support'} 
+              .value=${true}
+              .key=${'feature1'}
+            ></dees-input-checkbox>
+            
+            <dees-input-checkbox 
+              .label=${'Email Notifications'} 
+              .value=${true}
+              .key=${'feature2'}
+            ></dees-input-checkbox>
+            
+            <dees-input-checkbox 
+              .label=${'Two-Factor Authentication'} 
+              .value=${false}
+              .key=${'feature3'}
+            ></dees-input-checkbox>
+            
+            <dees-input-checkbox 
+              .label=${'API Access'} 
+              .value=${true}
+              .key=${'feature4'}
+            ></dees-input-checkbox>
+            
+            <dees-input-checkbox 
+              .label=${'Advanced Analytics'} 
+              .value=${false}
+              .key=${'feature5'}
+            ></dees-input-checkbox>
+          </div>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'Privacy Settings Example'} .subtitle=${'Checkboxes in a typical form context'}>
+        <div class="form-section">
+          <h4 class="section-title">Privacy Preferences</h4>
+          
+          <div class="checkbox-group">
+            <dees-input-checkbox 
+              .label=${'Share analytics data'} 
+              .value=${true}
+              .description=${'Help us improve by sharing anonymous usage data'}
+            ></dees-input-checkbox>
+            
+            <dees-input-checkbox 
+              .label=${'Personalized recommendations'} 
+              .value=${true}
+              .description=${'Get suggestions based on your activity'}
+            ></dees-input-checkbox>
+            
+            <dees-input-checkbox 
+              .label=${'Marketing communications'} 
+              .value=${false}
+              .description=${'Receive promotional emails and special offers'}
+            ></dees-input-checkbox>
+            
+            <dees-input-checkbox 
+              .label=${'Third-party integrations'} 
+              .value=${false}
+              .description=${'Allow approved partners to access your data'}
+            ></dees-input-checkbox>
+          </div>
+        </div>
+      </dees-panel>
+      
+      <dees-panel .title=${'Interactive Example'} .subtitle=${'Click checkboxes to see value changes'}>
+        <div class="checkbox-group">
+          <dees-input-checkbox 
+            .label=${'Feature toggle'} 
+            .value=${false}
+            @changeSubject=${(event: CustomEvent) => {
+              const output = document.querySelector('#checkbox-output');
+              if (output && event.detail) {
+                const isChecked = event.detail.getValue();
+                output.textContent = `Feature is ${isChecked ? 'enabled' : 'disabled'}`;
+              }
+            }}
+          ></dees-input-checkbox>
+          
+          <dees-input-checkbox 
+            .label=${'Debug mode'} 
+            .value=${false}
+            @changeSubject=${(event: CustomEvent) => {
+              const output = document.querySelector('#debug-output');
+              if (output && event.detail) {
+                const isChecked = event.detail.getValue();
+                output.textContent = `Debug mode: ${isChecked ? 'ON' : 'OFF'}`;
+              }
+            }}
+          ></dees-input-checkbox>
+        </div>
+        
+        <div class="interactive-section">
+          <div id="checkbox-output" class="output-text">Feature is disabled</div>
+          <div id="debug-output" class="output-text" style="margin-top: 8px;">Debug mode: OFF</div>
+        </div>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
+`;

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

@@ -0,0 +1,226 @@
+import {
+  customElement,
+  type TemplateResult,
+  property,
+  html,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+import { demoFunc } from './dees-input-checkbox.demo.js';
+import { cssGeistFontFamily } from '../../00fonts.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-checkbox': DeesInputCheckbox;
+  }
+}
+
+@customElement('dees-input-checkbox')
+export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
+  // STATIC
+  public static demo = demoFunc;
+
+  // INSTANCE
+
+  @property({
+    type: Boolean,
+  })
+  accessor value: boolean = false;
+
+  @property({ type: Boolean })
+  accessor indeterminate: boolean = false;
+
+
+  constructor() {
+    super();
+    this.labelPosition = 'right'; // Checkboxes default to label on the right
+  }
+
+  public static styles = [
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
+        * {
+          box-sizing: border-box;
+        }
+
+        :host {
+          position: relative;
+          cursor: default;
+          font-family: ${cssGeistFontFamily};
+        }
+
+        .maincontainer {
+          display: inline-flex;
+          align-items: flex-start;
+          gap: 8px;
+          cursor: pointer;
+          user-select: none;
+          transition: all 0.15s ease;
+        }
+
+        .checkbox {
+          position: relative;
+          height: 18px;
+          width: 18px;
+          flex-shrink: 0;
+          border-radius: 4px;
+          border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+          background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+          transition: all 0.15s ease;
+          margin-top: 1px;
+        }
+
+        .maincontainer:hover .checkbox {
+          border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+        }
+
+        .checkbox.selected {
+          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%)')};
+        }
+
+        .checkbox:focus-visible {
+          outline: none;
+          box-shadow: 0 0 0 3px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.1)', 'hsl(217.2 91.2% 59.8% / 0.1)')};
+        }
+
+        /* Checkmark using Lucide icon style */
+        .checkbox .checkmark {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          opacity: 0;
+          transition: opacity 0.15s ease;
+        }
+
+        .checkbox.selected .checkmark {
+          opacity: 1;
+        }
+
+        .checkbox .checkmark svg {
+          width: 12px;
+          height: 12px;
+          stroke: white;
+          stroke-width: 3;
+        }
+
+        /* Disabled state */
+        .maincontainer.disabled {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+
+        .checkbox.disabled {
+          background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+          border-color: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        }
+
+        /* Label */
+        .label-container {
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+          flex: 1;
+        }
+
+        .checkbox-label {
+          font-size: 14px;
+          font-weight: 500;
+          line-height: 20px;
+          color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+          transition: color 0.15s ease;
+          letter-spacing: -0.01em;
+        }
+
+        .maincontainer:hover .checkbox-label {
+          color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+        }
+
+        .maincontainer.disabled:hover .checkbox-label {
+          color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
+        }
+
+        /* Description */
+        .description-text {
+          font-size: 12px;
+          color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+          line-height: 1.5;
+        }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="input-wrapper">
+        <div class="maincontainer ${this.disabled ? 'disabled' : ''}" @click="${this.toggleSelected}">
+          <div 
+            class="checkbox ${this.value ? 'selected' : ''} ${this.disabled ? 'disabled' : ''}" 
+            tabindex="${this.disabled ? '-1' : '0'}"
+            @keydown="${this.handleKeydown}"
+          >
+            ${this.value
+              ? html`
+                  <span class="checkmark">
+                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </span>
+                `
+              : this.indeterminate
+                ? html`
+                    <span class="checkmark">
+                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M5 12H19" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+                      </svg>
+                    </span>
+                  `
+                : html``}
+          </div>
+          <div class="label-container">
+            ${this.label ? html`<div class="checkbox-label">${this.label}</div>` : ''}
+            ${this.description ? html`<div class="description-text">${this.description}</div>` : ''}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  public async toggleSelected() {
+    if (this.disabled) {
+      return;
+    }
+    this.value = !this.value;
+    this.dispatchEvent(
+      new CustomEvent('newValue', {
+        detail: this.value,
+        bubbles: true,
+      })
+    );
+    this.changeSubject.next(this);
+  }
+
+  public getValue(): boolean {
+    return this.value;
+  }
+
+  public setValue(value: boolean): void {
+    this.value = value;
+  }
+
+  public focus(): void {
+    const checkboxDiv = this.shadowRoot.querySelector('.checkbox');
+    if (checkboxDiv) {
+      (checkboxDiv as any).focus();
+    }
+  }
+
+  private handleKeydown(event: KeyboardEvent) {
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      this.toggleSelected();
+    }
+  }
+}