1.12.6

feat(dees-pdf-viewer): improve input handling and remove unused variables

CLAUDE.md

@@ -1,174 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-@design.estate/dees-catalog is a comprehensive web components library built with TypeScript and LitElement. It provides a large collection of UI components for building modern web applications with consistent design and behavior.
-
-## Build and Development Commands
-
-```bash
-# Install dependencies
-pnpm install
-
-# Build the project
-pnpm run build
-# This runs: tsbuild tsfolders --allowimplicitany && tsbundle element --production --bundler esbuild
-
-# Run development watch mode
-pnpm run watch
-# This runs: tswatch element
-
-# Run tests (browser tests)
-pnpm test
-# This runs: tstest test/ --web --verbose --timeout 30 --logfile
-
-# Run a specific test file
-tsx test/test.wysiwyg-basic.browser.ts --verbose
-
-# Build documentation
-pnpm run buildDocs
-```
-
-### Testing Notes
-- Test files follow the pattern: `test.*.browser.ts`, `test.*.node.ts`, or `test.*.both.ts`
-- Browser tests run in a headless browser environment
-- Use `--logfile` option to store logs in `.nogit/testlogs/`
-- For debugging, create files in `.nogit/debug/` and run with `tsx`
-
-## Architecture Overview
-
-### Component Structure
-The library is organized into several categories:
-
-1. **Core UI Components** (`dees-button`, `dees-badge`, `dees-icon`, etc.)
-   - Basic building blocks with consistent theming
-   - All support light/dark themes via `cssManager.bdTheme()`
-
-2. **Form Components** (`dees-form`, `dees-input-*`)
-   - Complete form system with validation
-   - Base class `DeesInputBase` provides common functionality
-   - Form data collection via `DeesForm` container
-
-3. **Layout Components** (`dees-appui-*`)
-   - Application shell components
-   - `DeesAppuiBase` orchestrates the entire layout
-   - Grid-based responsive design
-
-4. **Data Display** (`dees-table`, `dees-dataview-*`, `dees-statsgrid`)
-   - Complex data visualization components
-   - Interactive tables with sorting/filtering
-   - Chart components using ApexCharts
-
-5. **Overlays** (`dees-modal`, `dees-contextmenu`, `dees-toast`)
-   - Managed by central z-index registry
-   - Window layer system for proper stacking
-
-### Key Architectural Patterns
-
-#### Z-Index Management
-All overlay components use a centralized z-index registry system:
-- Definition in `ts_web/elements/00zindex.ts`
-- Dynamic z-index assignment via `ZIndexRegistry` class
-- Components get z-index from registry when showing
-- Ensures proper stacking order (dropdowns above modals, etc.)
-
-#### Theme System
-- All components support light/dark themes
-- Use `cssManager.bdTheme(lightValue, darkValue)` for theme-aware colors
-- Consistent color palette defined in `00colors.ts`
-
-#### Component Demo System
-- Each component has a static `demo` property
-- Demo functions in separate `.demo.ts` files
-- Showcase pages aggregate demos (e.g., `input-showcase.ts`)
-
-#### WYSIWYG Editor Architecture
-The WYSIWYG editor uses a sophisticated architecture with separated concerns:
-- **Main Component**: `dees-input-wysiwyg.ts` - Orchestrates the editor
-- **Handler Classes**:
-  - `WysiwygInputHandler` - Handles text input and block transformations
-  - `WysiwygKeyboardHandler` - Manages keyboard shortcuts and navigation
-  - `WysiwygDragDropHandler` - Manages block reordering
-  - `WysiwygModalManager` - Shows configuration modals
-  - `WysiwygBlockOperations` - Core block manipulation logic
-- **Global Menus**: 
-  - `DeesSlashMenu` and `DeesFormattingMenu` render globally to avoid focus issues
-  - Singleton pattern ensures single instance
-- **Programmatic Rendering**: Uses manual DOM manipulation to prevent focus loss
-
-### Component Communication
-- Custom events for parent-child communication
-- Form components emit standardized events (`change`, `blur`, etc.)
-- Complex components like `DeesAppuiBase` re-emit child events
-
-### Build System
-- TypeScript compilation with decorators support
-- Web component bundling with esbuild
-- Element exports in `ts_web/elements/index.ts`
-- Distribution builds in `dist_ts_web/`
-
-## Important Implementation Details
-
-### When Creating New Components
-1. Extend `DeesElement` from `@design.estate/dees-element`
-2. Use `@customElement('dees-componentname')` decorator
-3. Implement theme support with `cssManager.bdTheme()`
-4. Create a demo function in a separate `.demo.ts` file
-5. Export from `elements/index.ts`
-
-### Form Input Components
-1. Extend `DeesInputBase` for form inputs
-2. Implement `getValue()` and `setValue()` methods
-3. Use `changeSubject.next(this)` to emit changes
-4. Support `disabled` and `required` properties
-
-### Overlay Components
-1. Import z-index from `00zindex.ts`
-2. Get z-index from registry when showing: `zIndexRegistry.getNextZIndex()`
-3. Register/unregister with the registry
-4. Use `DeesWindowLayer` for backdrop if needed
-
-### Testing Components
-1. Create test files in `test/` directory
-2. Use `@git.zone/tstest` with tap-bundle
-3. Test in browser environment for web components
-4. Use proper async/await for component lifecycle
-
-## Common Patterns and Pitfalls
-
-### Focus Management
-- WYSIWYG editor uses programmatic rendering to prevent focus loss
-- Use `requestAnimationFrame` for timing-sensitive focus operations
-- Avoid reactive re-renders during user input
-
-### Event Handling
-- Prevent event bubbling in nested interactive components
-- Use `pointer-events: none/auto` for click-through behavior
-- Handle both mouse and keyboard events for accessibility
-
-### Performance Considerations
-- Large components (editor, terminal) use lazy loading
-- Charts use debounced resize observers
-- Tables implement virtual scrolling for large datasets
-
-## File Organization
-```
-ts_web/
-├── elements/           # All component files
-│   ├── 00*.ts         # Shared utilities (colors, z-index, plugins)
-│   ├── dees-*.ts      # Component implementations
-│   ├── dees-*.demo.ts # Component demos
-│   ├── interfaces/    # Shared TypeScript interfaces
-│   ├── helperclasses/ # Utility classes (FormController)
-│   └── wysiwyg/       # WYSIWYG editor subsystem
-├── pages/             # Demo showcase pages
-└── index.ts           # Main export file
-```
-
-## Recent Major Changes
-- Z-Index Registry System (2025-12-24): Dynamic stacking order management
-- WYSIWYG Refactoring (2025-06-24): Complete architecture overhaul with separated concerns
-- Form System Enhancement: Unified validation and data collection
-- Theme System: Consistent light/dark theme support across all components

changelog.md

@@ -1,5 +1,72 @@
 # Changelog
 
+## 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
 
@@ -207,7 +274,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,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "1.11.6",
+  "version": "1.12.6",
   "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",
@@ -10,18 +10,19 @@
     "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.1.2",
-    "@design.estate/dees-wcctools": "^1.1.1",
-    "@fortawesome/fontawesome-svg-core": "^7.0.1",
-    "@fortawesome/free-brands-svg-icons": "^7.0.1",
-    "@fortawesome/free-regular-svg-icons": "^7.0.1",
-    "@fortawesome/free-solid-svg-icons": "^7.0.1",
+    "@design.estate/dees-wcctools": "^1.2.0",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-brands-svg-icons": "^7.1.0",
+    "@fortawesome/free-regular-svg-icons": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
     "@push.rocks/smarti18n": "^1.0.4",
     "@push.rocks/smartpromise": "^4.2.0",
     "@push.rocks/smartstring": "^4.1.0",
@@ -36,6 +37,7 @@
     "apexcharts": "^5.3.5",
     "highlight.js": "11.11.1",
     "ibantools": "^4.5.1",
+    "lit": "^3.3.1",
     "lucide": "^0.544.0",
     "monaco-editor": "0.52.2",
     "pdfjs-dist": "^4.10.38",

pnpm-lock.yaml

@@ -15,20 +15,20 @@ importers:
         specifier: ^2.1.2
         version: 2.1.2
       '@design.estate/dees-wcctools':
-        specifier: ^1.1.1
-        version: 1.1.1
+        specifier: ^1.2.0
+        version: 1.2.0
       '@fortawesome/fontawesome-svg-core':
-        specifier: ^7.0.1
-        version: 7.0.1
+        specifier: ^7.1.0
+        version: 7.1.0
       '@fortawesome/free-brands-svg-icons':
-        specifier: ^7.0.1
-        version: 7.0.1
+        specifier: ^7.1.0
+        version: 7.1.0
       '@fortawesome/free-regular-svg-icons':
-        specifier: ^7.0.1
-        version: 7.0.1
+        specifier: ^7.1.0
+        version: 7.1.0
       '@fortawesome/free-solid-svg-icons':
-        specifier: ^7.0.1
-        version: 7.0.1
+        specifier: ^7.1.0
+        version: 7.1.0
       '@push.rocks/smarti18n':
         specifier: ^1.0.4
         version: 1.0.4
@@ -71,6 +71,9 @@ importers:
       ibantools:
         specifier: ^4.5.1
         version: 4.5.1
+      lit:
+        specifier: ^3.3.1
+        version: 3.3.1
       lucide:
         specifier: ^0.544.0
         version: 0.544.0
@@ -450,8 +453,8 @@ packages:
   '@design.estate/dees-element@2.1.2':
     resolution: {integrity: sha512-ZiwvE411RJPHaYio26asQLnSmtJ6G1HRLYWbxW/HvCMbFtrcrXysP1y4PQ9KjdNfiQ4yoWPjTtwYMJjLE0NcbA==}
 
-  '@design.estate/dees-wcctools@1.1.1':
-    resolution: {integrity: sha512-oT0gPQ9suaCi0D2jNHPjE0ugn0xUm43yPfQt7vQgrOZZ6EOQ3zWkYVOp8NbGOVwKTvMvZKyjdDmqJG4NFHPvcg==}
+  '@design.estate/dees-wcctools@1.2.0':
+    resolution: {integrity: sha512-E01IPNzGJ1TtCxsBiJAaDkIkveu1VwDv24CLfBt+UzjJnZGOJqDKYJlgE3XV1aBs4G/cI5bQ8j8rGqdGwp2FCg==}
 
   '@emnapi/core@1.4.3':
     resolution: {integrity: sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g==}
@@ -771,24 +774,24 @@ packages:
   '@esm-bundle/chai@4.3.4-fix.0':
     resolution: {integrity: sha512-26SKdM4uvDWlY8/OOOxSB1AqQWeBosCX3wRYUZO7enTAj03CtVxIiCimYVG2WpULcyV51qapK4qTovwkUr5Mlw==}
 
-  '@fortawesome/fontawesome-common-types@7.0.1':
-    resolution: {integrity: sha512-0VpNtO5cNe1/HQWMkl4OdncYK/mv9hnBte0Ew0n6DMzmo3Q3WzDFABHm6LeNTipt5zAyhQ6Ugjiu8aLaEjh1gg==}
+  '@fortawesome/fontawesome-common-types@7.1.0':
+    resolution: {integrity: sha512-l/BQM7fYntsCI//du+6sEnHOP6a74UixFyOYUyz2DLMXKx+6DEhfR3F2NYGE45XH1JJuIamacb4IZs9S0ZOWLA==}
     engines: {node: '>=6'}
 
-  '@fortawesome/fontawesome-svg-core@7.0.1':
-    resolution: {integrity: sha512-x0cR55ILVqFpUioSMf6ebpRCMXMcheGN743P05W2RB5uCNpJUqWIqW66Lap8PfL/lngvjTbZj0BNSUweIr/fHQ==}
+  '@fortawesome/fontawesome-svg-core@7.1.0':
+    resolution: {integrity: sha512-fNxRUk1KhjSbnbuBxlWSnBLKLBNun52ZBTcs22H/xEEzM6Ap81ZFTQ4bZBxVQGQgVY0xugKGoRcCbaKjLQ3XZA==}
     engines: {node: '>=6'}
 
-  '@fortawesome/free-brands-svg-icons@7.0.1':
-    resolution: {integrity: sha512-6xPmn5SrND/GM0+W33E77x05+aDn6RpR02eWd8eLdN0IxY0vXa5yU/ugaAKloOVxiG9w2330TSRsbJYL6c57Ow==}
+  '@fortawesome/free-brands-svg-icons@7.1.0':
+    resolution: {integrity: sha512-9byUd9bgNfthsZAjBl6GxOu1VPHgBuRUP9juI7ZoM98h8xNPTCTagfwUFyYscdZq4Hr7gD1azMfM9s5tIWKZZA==}
     engines: {node: '>=6'}
 
-  '@fortawesome/free-regular-svg-icons@7.0.1':
-    resolution: {integrity: sha512-4V9fHbHjcx9Qu4O99AM5B4zuEDfB4zajk1I77hEzOxPN00f8g3484Aeq6WpfFcmookvjLE3Pr71Dhf/lqw7tbA==}
+  '@fortawesome/free-regular-svg-icons@7.1.0':
+    resolution: {integrity: sha512-0e2fdEyB4AR+e6kU4yxwA/MonnYcw/CsMEP9lH82ORFi9svA6/RhDyhxIv5mlJaldmaHLLYVTb+3iEr+PDSZuQ==}
     engines: {node: '>=6'}
 
-  '@fortawesome/free-solid-svg-icons@7.0.1':
-    resolution: {integrity: sha512-esKuSrl1WMOTMDLNt38i16VfLe/gRZt2ZAJ3Yw7slfs7sj583MKqNFqO57zmhknk1Sya6f9Wys89aCzIJkcqlg==}
+  '@fortawesome/free-solid-svg-icons@7.1.0':
+    resolution: {integrity: sha512-Udu3K7SzAo9N013qt7qmm22/wo2hADdheXtBfxFTecp+ogsc0caQNRKEb7pkvvagUGOpG9wJC1ViH6WXs8oXIA==}
     engines: {node: '>=6'}
 
   '@git.zone/tsbuild@2.6.8':
@@ -853,15 +856,9 @@ packages:
   '@leichtgewicht/ip-codec@2.0.5':
     resolution: {integrity: sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==}
 
-  '@lit-labs/ssr-dom-shim@1.3.0':
-    resolution: {integrity: sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ==}
-
   '@lit-labs/ssr-dom-shim@1.4.0':
     resolution: {integrity: sha512-ficsEARKnmmW5njugNYKipTm4SFnbik7CXtoencDZzmzo/dQ+2Q0bgkzJuoJP20Aj0F+izzJjOqsnkd6F/o1bw==}
 
-  '@lit/reactive-element@2.1.0':
-    resolution: {integrity: sha512-L2qyoZSQClcBmq0qajBVbhYEcG6iK0XfLn66ifLe/RfC0/ihpc+pl0Wdn8bJ8o+hj38cG0fGXRgSS20MuXn7qA==}
-
   '@lit/reactive-element@2.1.1':
     resolution: {integrity: sha512-N+dm5PAYdQ8e6UlywyyrgI2t++wFGXfHx+dSJ1oBrg6FAxUj40jId++EaRm80MKX5JnlH1sBsyZ5h0bcZKemCg==}
 
@@ -3850,9 +3847,6 @@ packages:
   linkifyjs@4.3.1:
     resolution: {integrity: sha512-DRSlB9DKVW04c4SUdGvKK5FR6be45lTU9M76JnngqPeeGDqPwYc0zdUErtsNVMtxPXgUWV4HbXbnC4sNyBxkYg==}
 
-  lit-element@4.2.0:
-    resolution: {integrity: sha512-MGrXJVAI5x+Bfth/pU9Kst1iWID6GHDLEzFEnyULB/sFiRLgkd8NPK/PeeXxktA3T6EIIaq8U3KcbTU5XFcP2Q==}
-
   lit-element@4.2.1:
     resolution: {integrity: sha512-WGAWRGzirAgyphK2urmYOV72tlvnxw7YfyLDgQ+OZnM9vQQBQnumQ7jUJe6unEzwGU3ahFOjuz1iz1jjrpCPuw==}
 
@@ -3862,9 +3856,6 @@ packages:
   lit-html@3.3.1:
     resolution: {integrity: sha512-S9hbyDu/vs1qNrithiNyeyv64c9yqiW9l+DBgI18fL+MTvOtWoFR0FWiyq1TxaYef5wNlpEmzlXoBlZEO+WjoA==}
 
-  lit@3.3.0:
-    resolution: {integrity: sha512-DGVsqsOIHBww2DqnuZzW7QsuCdahp50ojuDaBPC7jUDRpYoH0z7kHBBYZewRzer75FwtrkmkKk7iOAwSaWdBmw==}
-
   lit@3.3.1:
     resolution: {integrity: sha512-Ksr/8L3PTapbdXJCk+EJVB78jDodUMaP54gD24W186zGRARvwrsPfS60wae/SSCTCNZVPd1chXqio1qHQmu4NA==}
 
@@ -6466,7 +6457,7 @@ snapshots:
       '@push.rocks/websetup': 3.0.19
       '@push.rocks/webstore': 2.0.20
       lenis: 1.3.4
-      lit: 3.3.0
+      lit: 3.3.1
       sweet-scroll: 4.0.0
     transitivePeerDependencies:
       - '@nuxt/kit'
@@ -6486,7 +6477,7 @@ snapshots:
       - supports-color
       - vue
 
-  '@design.estate/dees-wcctools@1.1.1':
+  '@design.estate/dees-wcctools@1.2.0':
     dependencies:
       '@design.estate/dees-domtools': 2.3.3
       '@design.estate/dees-element': 2.1.2
@@ -6671,23 +6662,23 @@ snapshots:
     dependencies:
       '@types/chai': 4.3.20
 
-  '@fortawesome/fontawesome-common-types@7.0.1': {}
+  '@fortawesome/fontawesome-common-types@7.1.0': {}
 
-  '@fortawesome/fontawesome-svg-core@7.0.1':
+  '@fortawesome/fontawesome-svg-core@7.1.0':
     dependencies:
-      '@fortawesome/fontawesome-common-types': 7.0.1
+      '@fortawesome/fontawesome-common-types': 7.1.0
 
-  '@fortawesome/free-brands-svg-icons@7.0.1':
+  '@fortawesome/free-brands-svg-icons@7.1.0':
     dependencies:
-      '@fortawesome/fontawesome-common-types': 7.0.1
+      '@fortawesome/fontawesome-common-types': 7.1.0
 
-  '@fortawesome/free-regular-svg-icons@7.0.1':
+  '@fortawesome/free-regular-svg-icons@7.1.0':
     dependencies:
-      '@fortawesome/fontawesome-common-types': 7.0.1
+      '@fortawesome/fontawesome-common-types': 7.1.0
 
-  '@fortawesome/free-solid-svg-icons@7.0.1':
+  '@fortawesome/free-solid-svg-icons@7.1.0':
     dependencies:
-      '@fortawesome/fontawesome-common-types': 7.0.1
+      '@fortawesome/fontawesome-common-types': 7.1.0
 
   '@git.zone/tsbuild@2.6.8':
     dependencies:
@@ -6864,14 +6855,8 @@ snapshots:
 
   '@leichtgewicht/ip-codec@2.0.5': {}
 
-  '@lit-labs/ssr-dom-shim@1.3.0': {}
-
   '@lit-labs/ssr-dom-shim@1.4.0': {}
 
-  '@lit/reactive-element@2.1.0':
-    dependencies:
-      '@lit-labs/ssr-dom-shim': 1.3.0
-
   '@lit/reactive-element@2.1.1':
     dependencies:
       '@lit-labs/ssr-dom-shim': 1.4.0
@@ -6992,7 +6977,7 @@ snapshots:
   '@open-wc/scoped-elements@3.0.5':
     dependencies:
       '@open-wc/dedupe-mixin': 1.4.0
-      lit: 3.3.0
+      lit: 3.3.1
 
   '@open-wc/semantic-dom-diff@0.20.1':
     dependencies:
@@ -7006,7 +6991,7 @@ snapshots:
   '@open-wc/testing-helpers@3.0.1':
     dependencies:
       '@open-wc/scoped-elements': 3.0.5
-      lit: 3.3.0
+      lit: 3.3.1
       lit-html: 3.3.0
 
   '@open-wc/testing@4.0.0':
@@ -10987,12 +10972,6 @@ snapshots:
 
   linkifyjs@4.3.1: {}
 
-  lit-element@4.2.0:
-    dependencies:
-      '@lit-labs/ssr-dom-shim': 1.3.0
-      '@lit/reactive-element': 2.1.0
-      lit-html: 3.3.0
-
   lit-element@4.2.1:
     dependencies:
       '@lit-labs/ssr-dom-shim': 1.4.0
@@ -11007,12 +10986,6 @@ snapshots:
     dependencies:
       '@types/trusted-types': 2.0.7
 
-  lit@3.3.0:
-    dependencies:
-      '@lit/reactive-element': 2.1.0
-      lit-element: 4.2.0
-      lit-html: 3.3.0
-
   lit@3.3.1:
     dependencies:
       '@lit/reactive-element': 2.1.1

pnpm-workspace.yaml

@@ -1,2 +1,4 @@
 onlyBuiltDependencies:
+  - esbuild
+  - mongodb-memory-server
   - puppeteer

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.

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.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();

ts_web/00_commitinfo_data.ts

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

ts_web/elements/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.js';
+import '../dees-windowcontrols.js';
+import '../dees-appui-profiledropdown.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -73,259 +73,16 @@ export class DeesAppuiBar extends DeesElement {
   @state()
   private 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/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/dees-appui-appbar/index.ts

@@ -0,0 +1,3 @@
+export * from './component.js';
+export { appuiAppbarStyles } from './styles.js';
+export { renderAppuiAppbar } from './template.js';

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

@@ -10,7 +10,7 @@ import {
 } 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.js';
+import type { DeesAppuiBar } from './dees-appui-appbar/index.js';
 import type { DeesAppuiMainmenu } from './dees-appui-mainmenu.js';
 import type { DeesAppuiMainselector } from './dees-appui-mainselector.js';
 import type { DeesAppuiMaincontent } from './dees-appui-maincontent.js';
@@ -18,7 +18,7 @@ import type { DeesAppuiActivitylog } from './dees-appui-activitylog.js';
 import { demoFunc } from './dees-appui-base.demo.js';
 
 // Import child components
-import './dees-appui-appbar.js';
+import './dees-appui-appbar/index.js';
 import './dees-appui-mainmenu.js';
 import './dees-appui-mainselector.js';
 import './dees-appui-maincontent.js';

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

@@ -1,16 +1,15 @@
 import {
   DeesElement,
-  css,
-  cssManager,
   customElement,
-  html,
   property,
   state,
   type TemplateResult,
 } from '@design.estate/dees-element';
 
 import * as domtools from '@design.estate/dees-domtools';
-import { demoFunc } from './dees-chart-area.demo.js';
+import { demoFunc } from './demo.js';
+import { chartAreaStyles } from './styles.js';
+import { renderChartArea } from './template.js';
 
 import ApexCharts from 'apexcharts';
 
@@ -141,73 +140,14 @@ export class DeesChartArea extends DeesElement {
     }
   }
 
-  public static styles = [
-    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;
-      }
-    `,
-  ];
+  public static styles = chartAreaStyles;
 
   public render(): TemplateResult {
-    return html`
-      <div class="mainbox">
-        <div class="chartTitle">${this.label}</div>
-        <div class="chartContainer"></div>
-      </div>
-    `;
+    return renderChartArea(this);
   }
 
+
+
   public async firstUpdated() {
     await this.domtoolsPromise;
     

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

@@ -1,6 +1,7 @@
 import { html, css, cssManager } from '@design.estate/dees-element';
-import type { DeesChartArea } from './dees-chart-area.js';
+import type { DeesChartArea } from './component.js';
 import '@design.estate/dees-wcctools/demotools';
+import './component.js';
 
 export const demoFunc = () => {
   // Initial dataset values

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

@@ -0,0 +1,3 @@
+export * from './component.js';
+export { chartAreaStyles } from './styles.js';
+export { renderChartArea } from './template.js';

ts_web/elements/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/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/dees-dashboardgrid.demo.ts

@@ -1,191 +0,0 @@
-import { html, css, cssManager } from '@design.estate/dees-element';
-import type { DeesDashboardgrid } from './dees-dashboardgrid.js';
-import '@design.estate/dees-wcctools/demotools';
-
-export const demoFunc = () => {
-  return html`
-    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
-      const grid = elementArg.querySelector('#dashboardGrid') as DeesDashboardgrid;
-      
-      // Set initial widgets
-      grid.widgets = [
-        {
-          id: 'metrics1',
-          x: 0,
-          y: 0,
-          w: 3,
-          h: 2,
-          title: 'Revenue',
-          icon: 'lucide:dollarSign',
-          content: html`
-            <div style="padding: 20px;">
-              <div style="font-size: 32px; font-weight: 700; color: ${cssManager.bdTheme('#09090b', '#fafafa')};">$124,563</div>
-              <div style="color: #22c55e; font-size: 14px; margin-top: 8px;">↑ 12.5% from last month</div>
-            </div>
-          `
-        },
-        {
-          id: 'metrics2',
-          x: 3,
-          y: 0,
-          w: 3,
-          h: 2,
-          title: 'Users',
-          icon: 'lucide:users',
-          content: html`
-            <div style="padding: 20px;">
-              <div style="font-size: 32px; font-weight: 700; color: ${cssManager.bdTheme('#09090b', '#fafafa')};">8,234</div>
-              <div style="color: #3b82f6; font-size: 14px; margin-top: 8px;">↑ 5.2% from last week</div>
-            </div>
-          `
-        },
-        {
-          id: 'chart1',
-          x: 6,
-          y: 0,
-          w: 6,
-          h: 4,
-          title: 'Analytics',
-          icon: 'lucide:lineChart',
-          content: html`
-            <div style="padding: 20px; height: 100%; display: flex; align-items: center; justify-content: center;">
-              <div style="text-align: center; color: #71717a;">
-                <dees-icon .icon=${'lucide:lineChart'} style="font-size: 48px; margin-bottom: 16px;"></dees-icon>
-                <div>Chart visualization area</div>
-              </div>
-            </div>
-          `
-        }
-      ];
-      
-      // Configure grid
-      grid.cellHeight = 80;
-      grid.margin = { top: 10, right: 10, bottom: 10, left: 10 };
-      grid.enableAnimation = true;
-      grid.showGridLines = false;
-      
-      let widgetCounter = 4;
-      
-      // Control buttons
-      const buttons = elementArg.querySelectorAll('dees-button');
-      buttons.forEach(button => {
-        const text = button.textContent?.trim();
-        
-        if (text === 'Toggle Animation') {
-          button.addEventListener('click', () => {
-            grid.enableAnimation = !grid.enableAnimation;
-          });
-        } else if (text === 'Toggle Grid Lines') {
-          button.addEventListener('click', () => {
-            grid.showGridLines = !grid.showGridLines;
-          });
-        } else if (text === 'Add Widget') {
-          button.addEventListener('click', () => {
-            const newWidget = {
-              id: `widget${widgetCounter++}`,
-              x: 0,
-              y: 0,
-              w: 3,
-              h: 2,
-              autoPosition: true,
-              title: `Widget ${widgetCounter - 1}`,
-              icon: 'lucide:package',
-              content: html`
-                <div style="padding: 20px; text-align: center;">
-                  <div style="color: #71717a;">New widget content</div>
-                  <div style="margin-top: 8px; font-size: 24px; font-weight: 600; color: ${cssManager.bdTheme('#09090b', '#fafafa')};">${Math.floor(Math.random() * 1000)}</div>
-                </div>
-              `
-            };
-            grid.addWidget(newWidget, true);
-          });
-        } else if (text === 'Compact Grid') {
-          button.addEventListener('click', () => {
-            grid.compact();
-          });
-        } else if (text === 'Toggle Edit Mode') {
-          button.addEventListener('click', () => {
-            grid.editable = !grid.editable;
-            button.textContent = grid.editable ? 'Lock Grid' : 'Unlock Grid';
-          });
-        }
-      });
-      
-      // Listen to grid events
-      grid.addEventListener('widget-move', (e: CustomEvent) => {
-        console.log('Widget moved:', e.detail.widget);
-      });
-      
-      grid.addEventListener('widget-resize', (e: CustomEvent) => {
-        console.log('Widget resized:', e.detail.widget);
-      });
-    }}>
-      <style>
-        ${css`
-          .demoBox {
-            position: relative;
-            background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
-            height: 100%;
-            width: 100%;
-            padding: 40px;
-            box-sizing: border-box;
-            display: flex;
-            flex-direction: column;
-            gap: 24px;
-          }
-          
-          .demo-controls {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 12px;
-          }
-          
-          .demo-controls dees-button {
-            flex-shrink: 0;
-          }
-          
-          .grid-container-wrapper {
-            flex: 1;
-            min-height: 600px;
-            position: relative;
-          }
-          
-          .info {
-            color: ${cssManager.bdTheme('#71717a', '#71717a')};
-            font-size: 12px;
-            font-family: 'Geist Sans', sans-serif;
-            text-align: center;
-          }
-        `}
-      </style>
-      <div class="demoBox">
-        <div class="demo-controls">
-          <dees-button-group label="Animation:">
-            <dees-button>Toggle Animation</dees-button>
-          </dees-button-group>
-          
-          <dees-button-group label="Display:">
-            <dees-button>Toggle Grid Lines</dees-button>
-          </dees-button-group>
-          
-          <dees-button-group label="Actions:">
-            <dees-button>Add Widget</dees-button>
-            <dees-button>Compact Grid</dees-button>
-          </dees-button-group>
-          
-          <dees-button-group label="Mode:">
-            <dees-button>Toggle Edit Mode</dees-button>
-          </dees-button-group>
-        </div>
-        
-        <div class="grid-container-wrapper">
-          <dees-dashboardgrid id="dashboardGrid"></dees-dashboardgrid>
-        </div>
-        
-        <div class="info">
-          Drag widgets to reposition • Resize from edges and corners • Add widgets with auto-positioning
-        </div>
-      </div>
-    </dees-demowrapper>
-  `;
-};

ts_web/elements/dees-dashboardgrid.ts

@@ -1,813 +0,0 @@
-import * as plugins from './00plugins.js';
-import {
-  DeesElement,
-  type TemplateResult,
-  property,
-  customElement,
-  html,
-  css,
-  cssManager,
-  state,
-} from '@design.estate/dees-element';
-
-import * as domtools from '@design.estate/dees-domtools';
-import './dees-icon.js';
-import { demoFunc } from './dees-dashboardgrid.demo.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-dashboardgrid': DeesDashboardgrid;
-  }
-}
-
-export interface IDashboardWidget {
-  id: string;
-  x: number;
-  y: number;
-  w: number;
-  h: number;
-  minW?: number;
-  minH?: number;
-  maxW?: number;
-  maxH?: number;
-  content: TemplateResult | string;
-  title?: string;
-  icon?: string;
-  noMove?: boolean;
-  noResize?: boolean;
-  locked?: boolean;
-  autoPosition?: boolean; // Auto-position widget in first available space
-}
-
-@customElement('dees-dashboardgrid')
-export class DeesDashboardgrid extends DeesElement {
-  // STATIC
-  public static demo = demoFunc;
-
-  // INSTANCE
-  @property({ type: Array })
-  public widgets: IDashboardWidget[] = [];
-
-  @property({ type: Number })
-  public cellHeight: number = 80;
-
-  @property({ type: Object })
-  public margin: number | { top?: number; right?: number; bottom?: number; left?: number } = 10;
-
-  @property({ type: Number })
-  public columns: number = 12;
-
-  @property({ type: Boolean })
-  public editable: boolean = true;
-  
-  @property({ type: Boolean, reflect: true })
-  public enableAnimation: boolean = true;
-  
-  @property({ type: String })
-  public cellHeightUnit: 'px' | 'em' | 'rem' | 'auto' = 'px';
-  
-  @property({ type: Boolean })
-  public rtl: boolean = false; // Right-to-left support
-  
-  @property({ type: Boolean })
-  public showGridLines: boolean = false;
-
-  @state()
-  private draggedWidget: IDashboardWidget | null = null;
-
-  @state()
-  private draggedElement: HTMLElement | null = null;
-
-  @state()
-  private dragOffsetX: number = 0;
-
-  @state()
-  private dragOffsetY: number = 0;
-  
-  @state()
-  private dragMouseX: number = 0;
-  
-  @state()
-  private dragMouseY: number = 0;
-  
-  @state()
-  private placeholderPosition: { x: number; y: number } | null = null;
-
-  @state()
-  private resizingWidget: IDashboardWidget | null = null;
-
-  @state()
-  private resizeStartW: number = 0;
-
-  @state()
-  private resizeStartH: number = 0;
-
-  @state()
-  private resizeStartX: number = 0;
-
-  @state()
-  private resizeStartY: number = 0;
-
-  public static styles = [
-    cssManager.defaultStyles,
-    css`
-      :host {
-        display: block;
-        width: 100%;
-        height: 100%;
-        position: relative;
-      }
-
-      .grid-container {
-        position: relative;
-        width: 100%;
-        min-height: 400px;
-        box-sizing: border-box;
-      }
-
-      .grid-widget {
-        position: absolute;
-        will-change: auto;
-      }
-      
-      :host([enableanimation]) .grid-widget {
-        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-
-      .grid-widget.dragging {
-        z-index: 1000;
-        transition: none !important;
-        opacity: 0.8;
-        cursor: grabbing;
-        pointer-events: none;
-        will-change: transform;
-      }
-      
-      .grid-widget.placeholder {
-        pointer-events: none;
-        z-index: 1;
-      }
-      
-      .grid-widget.placeholder .widget-content {
-        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
-        border: 2px dashed ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-        box-shadow: none;
-      }
-
-      .grid-widget.resizing {
-        transition: none !important;
-      }
-
-      .widget-content {
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        overflow: hidden;
-        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
-        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-        border-radius: 8px;
-        box-shadow: ${cssManager.bdTheme(
-          '0 1px 3px rgba(0, 0, 0, 0.1)',
-          '0 1px 3px rgba(0, 0, 0, 0.3)'
-        )};
-        transition: box-shadow 0.2s ease;
-      }
-
-      .grid-widget:hover .widget-content {
-        box-shadow: ${cssManager.bdTheme(
-          '0 4px 12px rgba(0, 0, 0, 0.15)',
-          '0 4px 12px rgba(0, 0, 0, 0.4)'
-        )};
-      }
-
-      .grid-widget.dragging .widget-content {
-        box-shadow: ${cssManager.bdTheme(
-          '0 16px 48px rgba(0, 0, 0, 0.25)',
-          '0 16px 48px rgba(0, 0, 0, 0.6)'
-        )};
-        transform: scale(1.05);
-      }
-
-      .widget-header {
-        padding: 12px 16px;
-        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 14px;
-        font-weight: 600;
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
-        background: ${cssManager.bdTheme('#f9fafb', '#0a0a0a')};
-        cursor: grab;
-        user-select: none;
-      }
-      
-      .widget-header:hover {
-        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
-      }
-      
-      .widget-header:active {
-        cursor: grabbing;
-      }
-
-      .widget-header.locked {
-        cursor: default;
-      }
-      
-      .widget-header.locked:hover {
-        background: ${cssManager.bdTheme('#f9fafb', '#0a0a0a')};
-      }
-
-      .widget-header dees-icon {
-        font-size: 16px;
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
-      }
-
-      .widget-body {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        overflow: auto;
-        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
-      }
-
-      .widget-body.has-header {
-        top: 45px;
-      }
-
-      /* Resize handles */
-      .resize-handle {
-        position: absolute;
-        background: transparent;
-        z-index: 10;
-      }
-
-      .resize-handle:hover {
-        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-        opacity: 0.3;
-      }
-
-      .resize-handle-e {
-        cursor: ew-resize;
-        width: 12px;
-        right: -6px;
-        top: 10%;
-        height: 80%;
-      }
-
-      .resize-handle-s {
-        cursor: ns-resize;
-        height: 12px;
-        width: 80%;
-        bottom: -6px;
-        left: 10%;
-      }
-
-      .resize-handle-se {
-        cursor: se-resize;
-        width: 20px;
-        height: 20px;
-        right: -2px;
-        bottom: -2px;
-        opacity: 0;
-        transition: opacity 0.2s ease;
-      }
-      
-      .resize-handle-se::after {
-        content: '';
-        position: absolute;
-        right: 4px;
-        bottom: 4px;
-        width: 6px;
-        height: 6px;
-        border-right: 2px solid ${cssManager.bdTheme('#71717a', '#71717a')};
-        border-bottom: 2px solid ${cssManager.bdTheme('#71717a', '#71717a')};
-      }
-
-      .grid-widget:hover .resize-handle-se {
-        opacity: 0.7;
-      }
-
-      .resize-handle-se:hover {
-        opacity: 1 !important;
-      }
-      
-      .resize-handle-se:hover::after {
-        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-      }
-
-      /* Placeholder */
-      .grid-placeholder {
-        position: absolute;
-        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-        opacity: 0.1;
-        border-radius: 8px;
-        border: 2px dashed ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
-        transition: all 0.2s ease;
-        pointer-events: none;
-      }
-
-      /* Empty state */
-      .empty-state {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 400px;
-        color: ${cssManager.bdTheme('#71717a', '#71717a')};
-        text-align: center;
-        padding: 32px;
-      }
-
-      .empty-state dees-icon {
-        font-size: 48px;
-        margin-bottom: 16px;
-        opacity: 0.5;
-      }
-      
-      /* Grid lines */
-      .grid-lines {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        pointer-events: none;
-        z-index: -1;
-      }
-      
-      .grid-line-vertical {
-        position: absolute;
-        top: 0;
-        bottom: 0;
-        width: 1px;
-        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-        opacity: 0.3;
-      }
-      
-      .grid-line-horizontal {
-        position: absolute;
-        left: 0;
-        right: 0;
-        height: 1px;
-        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
-        opacity: 0.3;
-      }
-    `,
-  ];
-
-  public render(): TemplateResult {
-    if (this.widgets.length === 0) {
-      return html`
-        <div class="empty-state">
-          <dees-icon .icon=${'lucide:layoutGrid'}></dees-icon>
-          <div>No widgets configured</div>
-          <div style="font-size: 14px; margin-top: 8px;">Add widgets to populate the dashboard</div>
-        </div>
-      `;
-    }
-
-    const margins = this.getMargins();
-    const maxY = Math.max(...this.widgets.map(w => w.y + w.h), 4);
-    const cellHeightValue = this.getCellHeight();
-    const gridHeight = maxY * cellHeightValue + (maxY + 1) * margins.vertical;
-
-    return html`
-      <div class="grid-container" style="height: ${gridHeight}px;">
-        ${this.showGridLines ? this.renderGridLines(gridHeight) : ''}
-        ${this.widgets.map(widget => this.renderWidget(widget))}
-        ${this.placeholderPosition && this.draggedWidget ? this.renderPlaceholder() : ''}
-      </div>
-    `;
-  }
-
-  private renderGridLines(gridHeight: number): TemplateResult {
-    const margins = this.getMargins();
-    const cellHeightValue = this.getCellHeight();
-    
-    // Convert margin to percentage for consistent calculation
-    const containerWidth = this.getBoundingClientRect().width;
-    const marginHorizontalPercent = (margins.horizontal / containerWidth) * 100;
-    
-    const cellWidth = (100 - marginHorizontalPercent * (this.columns + 1)) / this.columns;
-    
-    const verticalLines = [];
-    const horizontalLines = [];
-    
-    // Vertical lines
-    for (let i = 0; i <= this.columns; i++) {
-      const left = i * cellWidth + i * marginHorizontalPercent;
-      verticalLines.push(html`
-        <div class="grid-line-vertical" style="left: ${left}%;"></div>
-      `);
-    }
-    
-    // Horizontal lines
-    const numHorizontalLines = Math.ceil(gridHeight / (cellHeightValue + margins.vertical));
-    for (let i = 0; i <= numHorizontalLines; i++) {
-      const top = i * cellHeightValue + i * margins.vertical;
-      horizontalLines.push(html`
-        <div class="grid-line-horizontal" style="top: ${top}px;"></div>
-      `);
-    }
-    
-    return html`
-      <div class="grid-lines">
-        ${verticalLines}
-        ${horizontalLines}
-      </div>
-    `;
-  }
-
-  private renderWidget(widget: IDashboardWidget): TemplateResult {
-    const isDragging = this.draggedWidget?.id === widget.id;
-    const isResizing = this.resizingWidget?.id === widget.id;
-    const isLocked = widget.locked || !this.editable;
-
-    const margins = this.getMargins();
-    const cellHeightValue = this.getCellHeight();
-    
-    // Convert margin to percentage of container width for consistent calculation
-    const containerWidth = this.getBoundingClientRect().width;
-    const marginHorizontalPercent = (margins.horizontal / containerWidth) * 100;
-    
-    const cellWidth = (100 - marginHorizontalPercent * (this.columns + 1)) / this.columns;
-    
-    const left = widget.x * cellWidth + (widget.x + 1) * marginHorizontalPercent;
-    const top = widget.y * cellHeightValue + (widget.y + 1) * margins.vertical;
-    const width = widget.w * cellWidth + (widget.w - 1) * marginHorizontalPercent;
-    const height = widget.h * cellHeightValue + (widget.h - 1) * margins.vertical;
-    
-    // Apply transform when dragging for smooth movement
-    let transform = '';
-    if (isDragging && this.draggedElement) {
-      const containerRect = this.getBoundingClientRect();
-      const translateX = this.dragMouseX - containerRect.left - this.dragOffsetX - (left / 100 * containerRect.width);
-      const translateY = this.dragMouseY - containerRect.top - this.dragOffsetY - top;
-      transform = `transform: translate(${translateX}px, ${translateY}px);`;
-    }
-
-    return html`
-      <div 
-        class="grid-widget ${isDragging ? 'dragging' : ''} ${isResizing ? 'resizing' : ''}"
-        style="
-          ${this.rtl ? 'right' : 'left'}: ${left}%;
-          top: ${top}px;
-          width: ${width}%;
-          height: ${height}px;
-          ${transform}
-        "
-        data-widget-id="${widget.id}"
-      >
-        <div class="widget-content">
-          ${widget.title ? html`
-            <div 
-              class="widget-header ${isLocked ? 'locked' : ''}"
-              @mousedown=${!isLocked && !widget.noMove ? (e: MouseEvent) => this.startDrag(e, widget) : null}
-            >
-              ${widget.icon ? html`<dees-icon .icon=${widget.icon}></dees-icon>` : ''}
-              ${widget.title}
-            </div>
-          ` : ''}
-          <div class="widget-body ${widget.title ? 'has-header' : ''}">
-            ${widget.content}
-          </div>
-          ${!isLocked && !widget.noResize ? html`
-            <div class="resize-handle resize-handle-e" @mousedown=${(e: MouseEvent) => this.startResize(e, widget, 'e')}></div>
-            <div class="resize-handle resize-handle-s" @mousedown=${(e: MouseEvent) => this.startResize(e, widget, 's')}></div>
-            <div class="resize-handle resize-handle-se" @mousedown=${(e: MouseEvent) => this.startResize(e, widget, 'se')}></div>
-          ` : ''}
-        </div>
-      </div>
-    `;
-  }
-  
-  private renderPlaceholder(): TemplateResult {
-    if (!this.placeholderPosition || !this.draggedWidget) return html``;
-    
-    const margins = this.getMargins();
-    const cellHeightValue = this.getCellHeight();
-    
-    // Convert margin to percentage of container width for consistent calculation
-    const containerWidth = this.getBoundingClientRect().width;
-    const marginHorizontalPercent = (margins.horizontal / containerWidth) * 100;
-    
-    const cellWidth = (100 - marginHorizontalPercent * (this.columns + 1)) / this.columns;
-    
-    const left = this.placeholderPosition.x * cellWidth + (this.placeholderPosition.x + 1) * marginHorizontalPercent;
-    const top = this.placeholderPosition.y * cellHeightValue + (this.placeholderPosition.y + 1) * margins.vertical;
-    const width = this.draggedWidget.w * cellWidth + (this.draggedWidget.w - 1) * marginHorizontalPercent;
-    const height = this.draggedWidget.h * cellHeightValue + (this.draggedWidget.h - 1) * margins.vertical;
-    
-    return html`
-      <div 
-        class="grid-widget placeholder"
-        style="
-          ${this.rtl ? 'right' : 'left'}: ${left}%;
-          top: ${top}px;
-          width: ${width}%;
-          height: ${height}px;
-        "
-      >
-        <div class="widget-content"></div>
-      </div>
-    `;
-  }
-
-  private startDrag(e: MouseEvent, widget: IDashboardWidget) {
-    e.preventDefault();
-    this.draggedWidget = widget;
-    this.draggedElement = (e.currentTarget as HTMLElement).closest('.grid-widget') as HTMLElement;
-    
-    const rect = this.draggedElement.getBoundingClientRect();
-    
-    this.dragOffsetX = e.clientX - rect.left;
-    this.dragOffsetY = e.clientY - rect.top;
-    
-    // Initialize mouse position
-    this.dragMouseX = e.clientX;
-    this.dragMouseY = e.clientY;
-    
-    // Initialize placeholder at current widget position
-    this.placeholderPosition = { x: widget.x, y: widget.y };
-
-    document.addEventListener('mousemove', this.handleDrag);
-    document.addEventListener('mouseup', this.endDrag);
-    
-    this.requestUpdate();
-  }
-
-  private handleDrag = (e: MouseEvent) => {
-    if (!this.draggedWidget || !this.draggedElement) return;
-    
-    // Update mouse position for smooth dragging
-    this.dragMouseX = e.clientX;
-    this.dragMouseY = e.clientY;
-
-    const containerRect = this.getBoundingClientRect();
-    const margins = this.getMargins();
-    const cellHeightValue = this.getCellHeight();
-    
-    // Get widget position relative to grid container
-    const mouseX = e.clientX - containerRect.left - this.dragOffsetX;
-    const mouseY = e.clientY - containerRect.top - this.dragOffsetY;
-    
-    // Use pixel calculations for accuracy
-    const totalWidth = containerRect.width;
-    const totalMarginWidth = margins.horizontal * (this.columns + 1);
-    const availableWidth = totalWidth - totalMarginWidth;
-    const cellWidthPx = availableWidth / this.columns;
-    
-    // Calculate grid X position
-    // Account for the initial margin and then repeating pattern of cell+margin
-    let gridX = 0;
-    if (mouseX > margins.horizontal) {
-      const adjustedX = mouseX - margins.horizontal;
-      const cellPlusMargin = cellWidthPx + margins.horizontal;
-      gridX = Math.floor(adjustedX / cellPlusMargin + 0.5); // +0.5 for rounding to nearest
-    }
-    
-    // Calculate grid Y position  
-    let gridY = 0;
-    if (mouseY > margins.vertical) {
-      const adjustedY = mouseY - margins.vertical;
-      const cellPlusMargin = cellHeightValue + margins.vertical;
-      gridY = Math.floor(adjustedY / cellPlusMargin + 0.5); // +0.5 for rounding to nearest
-    }
-    
-    const clampedX = Math.max(0, Math.min(gridX, this.columns - this.draggedWidget.w));
-    const clampedY = Math.max(0, gridY);
-    
-    // Update placeholder position instead of widget position during drag
-    if (!this.placeholderPosition || 
-        clampedX !== this.placeholderPosition.x || 
-        clampedY !== this.placeholderPosition.y) {
-      const collision = this.checkCollision(this.draggedWidget, clampedX, clampedY);
-      if (!collision) {
-        this.placeholderPosition = { x: clampedX, y: clampedY };
-        this.requestUpdate();
-      }
-    }
-  };
-
-  private endDrag = () => {
-    // Apply final position from placeholder
-    if (this.draggedWidget && this.placeholderPosition) {
-      this.draggedWidget.x = this.placeholderPosition.x;
-      this.draggedWidget.y = this.placeholderPosition.y;
-      
-      this.dispatchEvent(new CustomEvent('widget-move', {
-        detail: { widget: this.draggedWidget },
-        bubbles: true,
-        composed: true,
-      }));
-    }
-    
-    // Clear drag state
-    this.draggedWidget = null;
-    this.draggedElement = null;
-    this.placeholderPosition = null;
-    this.dragMouseX = 0;
-    this.dragMouseY = 0;
-    
-    document.removeEventListener('mousemove', this.handleDrag);
-    document.removeEventListener('mouseup', this.endDrag);
-    
-    this.requestUpdate();
-  };
-
-  private startResize(e: MouseEvent, widget: IDashboardWidget, handle: string) {
-    e.preventDefault();
-    e.stopPropagation();
-    this.resizingWidget = widget;
-    this.resizeStartW = widget.w;
-    this.resizeStartH = widget.h;
-    this.resizeStartX = e.clientX;
-    this.resizeStartY = e.clientY;
-
-    const handleResize = (e: MouseEvent) => {
-      if (!this.resizingWidget) return;
-
-      const containerRect = this.getBoundingClientRect();
-      const margins = this.getMargins();
-      const cellHeightValue = this.getCellHeight();
-      const cellWidth = (containerRect.width - margins.horizontal * (this.columns + 1)) / this.columns;
-      
-      const deltaX = e.clientX - this.resizeStartX;
-      const deltaY = e.clientY - this.resizeStartY;
-      
-      if (handle.includes('e')) {
-        const newW = Math.round(this.resizeStartW + deltaX / (cellWidth + margins.horizontal));
-        const maxW = widget.maxW || (this.columns - this.resizingWidget.x);
-        this.resizingWidget.w = Math.max(widget.minW || 1, Math.min(newW, maxW));
-      }
-      
-      if (handle.includes('s')) {
-        const newH = Math.round(this.resizeStartH + deltaY / (cellHeightValue + margins.vertical));
-        const maxH = widget.maxH || Infinity;
-        this.resizingWidget.h = Math.max(widget.minH || 1, Math.min(newH, maxH));
-      }
-      
-      this.requestUpdate();
-      
-      this.dispatchEvent(new CustomEvent('widget-resize', {
-        detail: { widget: this.resizingWidget },
-        bubbles: true,
-        composed: true,
-      }));
-    };
-
-    const endResize = () => {
-      this.resizingWidget = null;
-      document.removeEventListener('mousemove', handleResize);
-      document.removeEventListener('mouseup', endResize);
-    };
-
-    document.addEventListener('mousemove', handleResize);
-    document.addEventListener('mouseup', endResize);
-  }
-
-
-  public removeWidget(widgetId: string) {
-    this.widgets = this.widgets.filter(w => w.id !== widgetId);
-  }
-
-  public updateWidget(widgetId: string, updates: Partial<IDashboardWidget>) {
-    this.widgets = this.widgets.map(w => 
-      w.id === widgetId ? { ...w, ...updates } : w
-    );
-  }
-
-  public getLayout(): Array<{ id: string; x: number; y: number; w: number; h: number }> {
-    return this.widgets.map(({ id, x, y, w, h }) => ({ id, x, y, w, h }));
-  }
-
-  public setLayout(layout: Array<{ id: string; x: number; y: number; w: number; h: number }>) {
-    this.widgets = this.widgets.map(widget => {
-      const layoutItem = layout.find(l => l.id === widget.id);
-      return layoutItem ? { ...widget, ...layoutItem } : widget;
-    });
-  }
-
-  public lockGrid() {
-    this.editable = false;
-  }
-
-  public unlockGrid() {
-    this.editable = true;
-  }
-
-  private getMargins(): { horizontal: number; vertical: number; top: number; right: number; bottom: number; left: number } {
-    if (typeof this.margin === 'number') {
-      return {
-        horizontal: this.margin,
-        vertical: this.margin,
-        top: this.margin,
-        right: this.margin,
-        bottom: this.margin,
-        left: this.margin,
-      };
-    }
-    
-    const margins = {
-      top: this.margin.top ?? 10,
-      right: this.margin.right ?? 10,
-      bottom: this.margin.bottom ?? 10,
-      left: this.margin.left ?? 10,
-    };
-    
-    return {
-      ...margins,
-      horizontal: (margins.left + margins.right) / 2,
-      vertical: (margins.top + margins.bottom) / 2,
-    };
-  }
-
-  private getCellHeight(): number {
-    if (this.cellHeightUnit === 'auto') {
-      // Calculate square cells based on container width
-      const containerWidth = this.getBoundingClientRect().width;
-      const margins = this.getMargins();
-      const cellWidth = (containerWidth - margins.horizontal * (this.columns + 1)) / this.columns;
-      return cellWidth;
-    }
-    
-    return this.cellHeight;
-  }
-
-  private checkCollision(widget: IDashboardWidget, newX: number, newY: number): boolean {
-    const widgets = this.widgets.filter(w => w.id !== widget.id);
-    
-    for (const other of widgets) {
-      if (newX < other.x + other.w &&
-          newX + widget.w > other.x &&
-          newY < other.y + other.h &&
-          newY + widget.h > other.y) {
-        return true;
-      }
-    }
-    
-    return false;
-  }
-
-  public addWidget(widget: IDashboardWidget, autoPosition = false) {
-    if (autoPosition || widget.autoPosition) {
-      // Find first available position
-      const position = this.findAvailablePosition(widget.w, widget.h);
-      widget.x = position.x;
-      widget.y = position.y;
-    }
-    
-    this.widgets = [...this.widgets, widget];
-  }
-
-  private findAvailablePosition(width: number, height: number): { x: number; y: number } {
-    // Try to find space starting from top-left
-    for (let y = 0; y < 100; y++) { // Reasonable limit
-      for (let x = 0; x <= this.columns - width; x++) {
-        const testWidget = { id: 'test', x, y, w: width, h: height, content: '' } as IDashboardWidget;
-        if (!this.checkCollision(testWidget, x, y)) {
-          return { x, y };
-        }
-      }
-    }
-
-    // If no space found, place at bottom
-    const maxY = Math.max(...this.widgets.map(w => w.y + w.h), 0);
-    return { x: 0, y: maxY };
-  }
-
-  public compact(direction: 'vertical' | 'horizontal' = 'vertical') {
-    const sortedWidgets = [...this.widgets].sort((a, b) => {
-      if (direction === 'vertical') {
-        if (a.y !== b.y) return a.y - b.y;
-        return a.x - b.x;
-      } else {
-        if (a.x !== b.x) return a.x - b.x;
-        return a.y - b.y;
-      }
-    });
-
-    for (const widget of sortedWidgets) {
-      if (widget.locked || widget.noMove) continue;
-      
-      if (direction === 'vertical') {
-        // Move up as far as possible
-        while (widget.y > 0 && !this.checkCollision(widget, widget.x, widget.y - 1)) {
-          widget.y--;
-        }
-      } else {
-        // Move left as far as possible
-        while (widget.x > 0 && !this.checkCollision(widget, widget.x - 1, widget.y)) {
-          widget.x--;
-        }
-      }
-    }
-
-    this.requestUpdate();
-  }
-}

ts_web/elements/dees-dashboardgrid/README.md

@@ -0,0 +1,47 @@
+# dees-dashboardgrid
+
+`<dees-dashboardgrid>` renders a configurable dashboard layout with draggable and resizable tiles. The component is now grouped in its own folder alongside supporting utilities and styles.
+
+## Key Features
+
+- Pointer-driven drag and resize interactions with keyboard fallbacks (arrow keys to move, `Shift` + arrows to resize).
+- Collision-aware placement that swaps compatible tiles or displaces blocking tiles into the next free slot.
+- Context menu (right-click on a tile header) that exposes destructive actions such as tile removal via `dees-contextmenu`.
+- Layout persistence helpers via `getLayout()`, `setLayout(...)`, and the `layout-change` event.
+- Responsive presets through the `layouts` map and `applyBreakpointLayout(...)` helper to hydrate per-breakpoint arrangements.
+
+## Public API Highlights
+
+| Property | Description |
+| --- | --- |
+| `widgets` | Array of tile descriptors (`DashboardWidget`). |
+| `columns` | Number of grid columns. |
+| `layouts` | Optional record of named layout definitions. |
+| `activeBreakpoint` | Name of the currently applied breakpoint layout. |
+| `editable` | Toggles drag/resize affordances. |
+
+| Method | Description |
+| --- | --- |
+| `addWidget(widget, autoPosition?)` | Adds a tile, optionally auto-placing it into the next free slot. |
+| `removeWidget(id)` | Removes a tile and emits `widget-remove`. |
+| `applyBreakpointLayout(name)` | Applies a layout from the `layouts` map. |
+| `getLayout()` / `setLayout(layout)` | Retrieve or apply persisted layouts. |
+| `compact(direction?)` | Densifies the grid vertically (default) or horizontally. |
+
+| Event | Detail payload |
+| --- | --- |
+| `widget-move` | `{ widget, displaced, swappedWith }` |
+| `widget-resize` | `{ widget, displaced, swappedWith }` |
+| `widget-remove` | `{ widget }` |
+| `layout-change` | `{ layout }` |
+
+## Usage Notes
+
+- **Right-click** a tile header to open the contextual menu and delete the tile.
+- When resizing, blocking tiles will automatically reflow into free space once the interaction completes.
+- Listen to `layout-change` to persist layouts to storage; rehydrate using `setLayout` or the `layouts` map.
+- For responsive dashboards, populate `grid.layouts = { base: [...], mobile: [...] }` and call `applyBreakpointLayout` based on your own breakpoint logic (see the co-located demo for an example).
+
+## Demo
+
+The updated `dees-dashboardgrid.demo.ts` showcases live breakpoint switching, layout persistence, and the context menu. Run the demo gallery to explore the interactions end-to-end.

ts_web/elements/dees-dashboardgrid/contextmenu.ts

@@ -0,0 +1,29 @@
+import type { DashboardWidget } from './types.js';
+import { DeesContextmenu } from '../dees-contextmenu.js';
+import type { DeesDashboardgrid } from './dees-dashboardgrid.js';
+import * as plugins from '../00plugins.js';
+
+export interface WidgetContextMenuOptions {
+  widget: DashboardWidget;
+  host: DeesDashboardgrid;
+  event: MouseEvent;
+}
+
+export const openWidgetContextMenu = ({
+  widget,
+  host,
+  event,
+}: WidgetContextMenuOptions) => {
+  const items: (plugins.tsclass.website.IMenuItem | { divider: true })[] = [
+    {
+      name: 'Delete tile',
+      iconName: 'lucide:trash2' as any,
+      action: async () => {
+        host.removeWidget(widget.id);
+        return null;
+      },
+    },
+  ];
+
+  DeesContextmenu.openContextMenuWithOptions(event, items as any);
+};

ts_web/elements/dees-dashboardgrid/dees-dashboardgrid.demo.ts

@@ -0,0 +1,405 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { DeesDashboardgrid } from './dees-dashboardgrid.js';
+import '@design.estate/dees-wcctools/demotools';
+
+export const demoFunc = () => {
+  return html`
+    <dees-demowrapper .runAfterRender=${async (elementArg: HTMLElement) => {
+      const grid = elementArg.querySelector('#dashboardGrid') as DeesDashboardgrid;
+
+      const seedWidgets = [
+        {
+          id: 'metrics1',
+          x: 0,
+          y: 0,
+          w: 3,
+          h: 2,
+          title: 'Revenue',
+          icon: 'lucide:dollarSign',
+          content: html`
+            <div style="padding: 20px;">
+              <div style="font-size: 32px; font-weight: 700; color: ${cssManager.bdTheme('#09090b', '#fafafa')};">$124,563</div>
+              <div style="color: #22c55e; font-size: 14px; margin-top: 8px;">↑ 12.5% from last month</div>
+            </div>
+          `,
+        },
+        {
+          id: 'metrics2',
+          x: 3,
+          y: 0,
+          w: 3,
+          h: 2,
+          title: 'Users',
+          icon: 'lucide:users',
+          content: html`
+            <div style="padding: 20px;">
+              <div style="font-size: 32px; font-weight: 700; color: ${cssManager.bdTheme('#09090b', '#fafafa')};">8,234</div>
+              <div style="color: #3b82f6; font-size: 14px; margin-top: 8px;">↑ 5.2% from last week</div>
+            </div>
+          `,
+        },
+        {
+          id: 'chart1',
+          x: 6,
+          y: 0,
+          w: 6,
+          h: 4,
+          title: 'Analytics',
+          icon: 'lucide:lineChart',
+          content: html`
+            <div style="padding: 20px; height: 100%; display: flex; align-items: center; justify-content: center;">
+              <div style="text-align: center; color: #71717a;">
+                <dees-icon .icon=${'lucide:lineChart'} style="font-size: 48px; margin-bottom: 16px;"></dees-icon>
+                <div>Chart visualization area</div>
+              </div>
+            </div>
+          `,
+        },
+      ];
+
+      grid.widgets = seedWidgets.map(widget => ({ ...widget }));
+      grid.cellHeight = 80;
+      grid.margin = { top: 10, right: 10, bottom: 10, left: 10 };
+      grid.enableAnimation = true;
+      grid.showGridLines = false;
+
+      const baseLayout = grid.getLayout().map(item => ({ ...item }));
+      const mobileLayout = grid.widgets.map((widget, index) => ({
+        id: widget.id,
+        x: 0,
+        y: index === 0 ? 0 : grid.widgets.slice(0, index).reduce((acc, prev) => acc + prev.h, 0),
+        w: grid.columns,
+        h: widget.h,
+      }));
+
+      grid.layouts = {
+        base: baseLayout,
+        mobile: mobileLayout,
+      };
+
+      const statusEl = elementArg.querySelector('#dashboardLayoutStatus') as HTMLElement;
+      const updateStatus = () => {
+        const layout = grid.getLayout();
+        statusEl.textContent = `Active breakpoint: ${grid.activeBreakpoint} • Tiles: ${layout.length}`;
+      };
+
+      const mediaQuery = window.matchMedia('(max-width: 768px)');
+      const handleBreakpoint = () => {
+        const target = mediaQuery.matches ? 'mobile' : 'base';
+        grid.applyBreakpointLayout(target);
+        updateStatus();
+      };
+      if (typeof mediaQuery.addEventListener === 'function') {
+        mediaQuery.addEventListener('change', handleBreakpoint);
+      } else {
+        (mediaQuery as MediaQueryList & {
+          addListener?: (listener: (this: MediaQueryList, ev: MediaQueryListEvent) => void) => void;
+        }).addListener?.(handleBreakpoint);
+      }
+      handleBreakpoint();
+
+      let widgetCounter = 4;
+
+      const buttons = elementArg.querySelectorAll('dees-button');
+      buttons.forEach(button => {
+        const text = button.textContent?.trim();
+
+        switch (text) {
+          case 'Toggle Animation':
+            button.addEventListener('click', () => {
+              grid.enableAnimation = !grid.enableAnimation;
+            });
+            break;
+          case 'Toggle Grid Lines':
+            button.addEventListener('click', () => {
+              grid.showGridLines = !grid.showGridLines;
+            });
+            break;
+          case 'Add Widget':
+            button.addEventListener('click', () => {
+              const newWidget = {
+                id: `widget${widgetCounter++}`,
+                x: 0,
+                y: 0,
+                w: 3,
+                h: 2,
+                autoPosition: true,
+                title: `Widget ${widgetCounter - 1}`,
+                icon: 'lucide:package',
+                content: html`
+                  <div style="padding: 20px; text-align: center;">
+                    <div style="color: #71717a;">New widget content</div>
+                    <div style="margin-top: 8px; font-size: 24px; font-weight: 600; color: ${cssManager.bdTheme('#09090b', '#fafafa')};">${Math.floor(
+                      Math.random() * 1000,
+                    )}</div>
+                  </div>
+                `,
+              };
+              grid.addWidget(newWidget, true);
+            });
+            break;
+          case 'Compact Grid':
+            button.addEventListener('click', () => {
+              grid.compact();
+            });
+            break;
+          case 'Toggle Edit Mode':
+            button.addEventListener('click', () => {
+              grid.editable = !grid.editable;
+              button.textContent = grid.editable ? 'Lock Grid' : 'Unlock Grid';
+            });
+            break;
+          case 'Reset Layout':
+            button.addEventListener('click', () => {
+              grid.applyBreakpointLayout(grid.activeBreakpoint);
+            });
+            break;
+          default:
+            break;
+        }
+      });
+
+      // Enhanced logging for reflow events
+      let lastPlaceholderPosition = null;
+      let moveEventCounter = 0;
+
+      // Helper function to log grid state
+      const logGridState = (eventName: string, details?: any) => {
+        const layout = grid.getLayout();
+        console.group(`🔄 ${eventName} [Event #${++moveEventCounter}]`);
+        console.log('Timestamp:', new Date().toISOString());
+        console.log('Grid Configuration:', {
+          columns: grid.columns,
+          cellHeight: grid.cellHeight,
+          margin: grid.margin,
+          editable: grid.editable,
+          activeBreakpoint: grid.activeBreakpoint
+        });
+        console.log('Current Layout:', layout);
+        console.log('Widget Count:', layout.length);
+        console.log('Grid Bounds:', {
+          totalWidgets: grid.widgets.length,
+          maxY: Math.max(...layout.map(w => w.y + w.h)),
+          occupied: layout.map(w => `${w.id}: (${w.x},${w.y}) ${w.w}x${w.h}`).join(', ')
+        });
+        if (details) {
+          console.log('Event Details:', details);
+        }
+        console.groupEnd();
+      };
+
+      // Monitor placeholder position changes using MutationObserver
+      const placeholderObserver = new MutationObserver(() => {
+        const placeholder = grid.shadowRoot?.querySelector('.placeholder') as HTMLElement;
+        if (placeholder) {
+          const currentPosition = {
+            left: placeholder.style.left,
+            top: placeholder.style.top,
+            width: placeholder.style.width,
+            height: placeholder.style.height
+          };
+
+          if (JSON.stringify(currentPosition) !== JSON.stringify(lastPlaceholderPosition)) {
+            console.group('📍 Placeholder Position Changed');
+            console.log('Previous:', lastPlaceholderPosition);
+            console.log('Current:', currentPosition);
+
+            // Extract grid coordinates from style
+            const gridInfo = grid.shadowRoot?.querySelector('.grid-container');
+            if (gridInfo) {
+              console.log('Grid Container Dimensions:', {
+                width: gridInfo.clientWidth,
+                height: gridInfo.clientHeight
+              });
+            }
+            console.groupEnd();
+            lastPlaceholderPosition = currentPosition;
+          }
+        }
+      });
+
+      // Start observing the shadow DOM for placeholder changes
+      if (grid.shadowRoot) {
+        placeholderObserver.observe(grid.shadowRoot, {
+          childList: true,
+          subtree: true,
+          attributes: true,
+          attributeFilter: ['style']
+        });
+      }
+
+      // Log initial state
+      logGridState('Initial Grid State');
+
+      grid.addEventListener('widget-move', (e: CustomEvent) => {
+        logGridState('Widget Move', {
+          widget: e.detail.widget,
+          displaced: e.detail.displaced,
+          swappedWith: e.detail.swappedWith
+        });
+      });
+
+      grid.addEventListener('widget-resize', (e: CustomEvent) => {
+        logGridState('Widget Resize', {
+          widget: e.detail.widget,
+          displaced: e.detail.displaced,
+          swappedWith: e.detail.swappedWith
+        });
+      });
+
+      grid.addEventListener('widget-remove', (e: CustomEvent) => {
+        logGridState('Widget Remove', {
+          removedWidget: e.detail.widget
+        });
+        updateStatus();
+      });
+
+      grid.addEventListener('layout-change', () => {
+        logGridState('Layout Change');
+        updateStatus();
+      });
+
+      // Monitor during drag/resize operations using pointer events
+      grid.addEventListener('pointerdown', (e: PointerEvent) => {
+        const isHeader = (e.target as HTMLElement).closest('.widget-header');
+        const isResizeHandle = (e.target as HTMLElement).closest('.resize-handle');
+
+        if (isHeader || isResizeHandle) {
+          console.group(`🎯 Interaction Started: ${isHeader ? 'Drag' : 'Resize'}`);
+          console.log('Target Widget:', (e.target as HTMLElement).closest('.widget')?.getAttribute('data-widget-id'));
+          console.log('Pointer Position:', { x: e.clientX, y: e.clientY });
+          console.groupEnd();
+
+          // Track pointer move during interaction
+          const handlePointerMove = (moveEvent: PointerEvent) => {
+            const widget = (e.target as HTMLElement).closest('.widget');
+            if (widget) {
+              console.log(`↔️ Pointer Move:`, {
+                widgetId: widget.getAttribute('data-widget-id'),
+                position: { x: moveEvent.clientX, y: moveEvent.clientY },
+                delta: {
+                  x: moveEvent.clientX - e.clientX,
+                  y: moveEvent.clientY - e.clientY
+                }
+              });
+            }
+          };
+
+          const handlePointerUp = () => {
+            console.group('🏁 Interaction Ended');
+            logGridState('Final State After Interaction');
+            console.groupEnd();
+            document.removeEventListener('pointermove', handlePointerMove);
+            document.removeEventListener('pointerup', handlePointerUp);
+          };
+
+          document.addEventListener('pointermove', handlePointerMove);
+          document.addEventListener('pointerup', handlePointerUp);
+        }
+      });
+
+      // Log when widgets are added
+      const originalAddWidget = grid.addWidget.bind(grid);
+      grid.addWidget = (widget: any, autoPosition?: boolean) => {
+        console.group('➕ Adding Widget');
+        console.log('New Widget:', widget);
+        console.log('Auto Position:', autoPosition);
+        const result = originalAddWidget(widget, autoPosition);
+        logGridState('After Widget Added');
+        console.groupEnd();
+        return result;
+      };
+
+      // Log compact operations
+      const originalCompact = grid.compact.bind(grid);
+      grid.compact = (direction?: string) => {
+        console.group('🗜️ Compacting Grid');
+        console.log('Direction:', direction || 'vertical');
+        logGridState('Before Compact');
+        const result = originalCompact(direction);
+        logGridState('After Compact');
+        console.groupEnd();
+        return result;
+      };
+
+      updateStatus();
+    }}>
+      <style>
+        ${css`
+          .demoBox {
+            position: relative;
+            background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
+            height: 100%;
+            width: 100%;
+            padding: 40px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+          }
+
+          .demo-controls {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 12px;
+          }
+
+          .demo-controls dees-button {
+            flex-shrink: 0;
+          }
+
+          .grid-container-wrapper {
+            flex: 1;
+            min-height: 600px;
+            position: relative;
+          }
+
+          .info {
+            color: ${cssManager.bdTheme('#71717a', '#71717a')};
+            font-size: 12px;
+            font-family: 'Geist Sans', sans-serif;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            gap: 6px;
+          }
+
+          #dashboardLayoutStatus {
+            font-weight: 600;
+            color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
+          }
+        `}
+      </style>
+      <div class="demoBox">
+        <div class="demo-controls">
+          <dees-button-group label="Animation:">
+            <dees-button>Toggle Animation</dees-button>
+          </dees-button-group>
+
+          <dees-button-group label="Display:">
+            <dees-button>Toggle Grid Lines</dees-button>
+          </dees-button-group>
+
+          <dees-button-group label="Actions:">
+            <dees-button>Add Widget</dees-button>
+            <dees-button>Compact Grid</dees-button>
+            <dees-button>Reset Layout</dees-button>
+          </dees-button-group>
+
+          <dees-button-group label="Mode:">
+            <dees-button>Toggle Edit Mode</dees-button>
+          </dees-button-group>
+        </div>
+
+        <div class="grid-container-wrapper">
+          <dees-dashboardgrid id="dashboardGrid"></dees-dashboardgrid>
+        </div>
+
+        <div class="info">
+          <div>Drag to reposition, resize from handles, or right-click a header to delete a tile.</div>
+          <div id="dashboardLayoutStatus"></div>
+        </div>
+      </div>
+    </dees-demowrapper>
+  `;
+};

ts_web/elements/dees-dashboardgrid/dees-dashboardgrid.ts

@@ -0,0 +1,796 @@
+import {
+  DeesElement,
+  customElement,
+  property,
+  state,
+  html,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import '../dees-icon.js';
+import '../dees-contextmenu.js';
+import { demoFunc } from './dees-dashboardgrid.demo.js';
+import { dashboardGridStyles } from './styles.js';
+import {
+  resolveMargins,
+  calculateCellMetrics,
+  calculateGridHeight,
+  findAvailablePosition,
+  compactLayout,
+  applyLayout,
+  resolveWidgetPlacement,
+  type PlacementResult,
+} from './layout.js';
+import {
+  computeGridCoordinates,
+  computeResizeDimensions,
+  type PointerPosition,
+} from './interaction.js';
+import { openWidgetContextMenu } from './contextmenu.js';
+import type {
+  DashboardWidget,
+  DashboardMargin,
+  DashboardResolvedMargins,
+  GridCellMetrics,
+  DashboardLayoutItem,
+  LayoutDirection,
+  CellHeightUnit,
+} from './types.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-dashboardgrid': DeesDashboardgrid;
+  }
+}
+
+type DragState = {
+  widgetId: string;
+  pointerId: number;
+  offsetX: number;
+  offsetY: number;
+  start: DashboardLayoutItem;
+  previousPosition: DashboardLayoutItem;
+  currentPointer: PointerPosition;
+  lastPlacement: PlacementResult | null;
+};
+
+type ResizeState = {
+  widgetId: string;
+  pointerId: number;
+  handler: 'e' | 's' | 'se';
+  startPointer: PointerPosition;
+  start: DashboardLayoutItem;
+  startWidth: number;
+  startHeight: number;
+  lastPlacement: PlacementResult | null;
+};
+
+@customElement('dees-dashboardgrid')
+export class DeesDashboardgrid extends DeesElement {
+  public static demo = demoFunc;
+  public static styles = dashboardGridStyles;
+
+  @property({ type: Array })
+  public widgets: DashboardWidget[] = [];
+
+  @property({ type: Number })
+  public cellHeight: number = 80;
+
+  @property({ type: Object })
+  public margin: DashboardMargin = 10;
+
+  @property({ type: Number })
+  public columns: number = 12;
+
+  @property({ type: Boolean })
+  public editable: boolean = true;
+
+  @property({ type: Boolean, reflect: true })
+  public enableAnimation: boolean = true;
+
+  @property({ type: String })
+  public cellHeightUnit: CellHeightUnit = 'px';
+
+  @property({ type: Boolean })
+  public rtl: boolean = false;
+
+  @property({ type: Boolean })
+  public showGridLines: boolean = false;
+
+  @property({ attribute: false })
+  public layouts?: Record<string, DashboardLayoutItem[]>;
+
+  @property({ type: String })
+  public activeBreakpoint: string = 'base';
+
+  @state()
+  private placeholderPosition: DashboardLayoutItem | null = null;
+
+  @state()
+  private metrics: GridCellMetrics | null = null;
+
+  @state()
+  private resolvedMargins: DashboardResolvedMargins | null = null;
+
+  @state()
+  private previewWidgets: DashboardWidget[] | null = null;
+
+  private containerBounds: DOMRect | null = null;
+  private dragState: DragState | null = null;
+  private resizeState: ResizeState | null = null;
+  private resizeObserver?: ResizeObserver;
+  private interactionActive = false;
+
+  public override async connectedCallback(): Promise<void> {
+    await super.connectedCallback();
+    this.computeMetrics();
+    this.observeResize();
+  }
+
+  public override async disconnectedCallback(): Promise<void> {
+    await super.disconnectedCallback();
+    this.disconnectResizeObserver();
+    this.releasePointerEvents();
+  }
+
+  protected updated(changed: Map<string, unknown>): void {
+    if (
+      changed.has('margin') ||
+      changed.has('columns') ||
+      changed.has('cellHeight') ||
+      changed.has('cellHeightUnit')
+    ) {
+      this.computeMetrics();
+    }
+
+    if (changed.has('widgets') && !this.interactionActive) {
+      this.notifyLayoutChange();
+    }
+  }
+
+  public render(): TemplateResult {
+    const baseWidgets = this.widgets;
+    if (baseWidgets.length === 0) {
+      return html`
+        <div class="empty-state">
+          <dees-icon .icon=${'lucide:layoutGrid'}></dees-icon>
+          <div>No widgets configured</div>
+          <div style="font-size: 14px; margin-top: 8px;">Add widgets to populate the dashboard</div>
+        </div>
+      `;
+    }
+
+    const metrics = this.ensureMetrics();
+    const margins = this.resolvedMargins ?? resolveMargins(this.margin);
+    const cellHeight = metrics.cellHeightPx;
+    const layoutForHeight = this.previewWidgets ?? this.widgets;
+    const gridHeight = calculateGridHeight(layoutForHeight, margins, cellHeight);
+    const previewMap = this.previewWidgets ? new Map(this.previewWidgets.map(widget => [widget.id, widget])) : null;
+
+    return html`
+      <div class="grid-container" style="height: ${gridHeight}px;">
+        ${this.showGridLines ? this.renderGridLines(metrics, gridHeight) : null}
+        ${baseWidgets.map(widget => this.renderWidget(widget, metrics, margins, previewMap))}
+        ${this.placeholderPosition ? this.renderPlaceholder(metrics, margins) : null}
+      </div>
+    `;
+  }
+
+  private renderGridLines(metrics: GridCellMetrics, gridHeight: number): TemplateResult {
+    const vertical: TemplateResult[] = [];
+    const horizontal: TemplateResult[] = [];
+    const cellPlusMarginX = metrics.cellWidthPx + metrics.marginHorizontalPx;
+    const cellPlusMarginY = metrics.cellHeightPx + metrics.marginVerticalPx;
+
+    for (let i = 0; i <= this.columns; i++) {
+      const leftPx = i * cellPlusMarginX + metrics.marginHorizontalPx;
+      const leftPercent = this.pxToPercent(leftPx, metrics.containerWidth);
+      vertical.push(html`<div class="grid-line-vertical" style="left: ${leftPercent}%;"></div>`);
+    }
+
+    const rows = Math.ceil(gridHeight / cellPlusMarginY);
+    for (let row = 0; row <= rows; row++) {
+      const top = row * cellPlusMarginY;
+      horizontal.push(html`<div class="grid-line-horizontal" style="top: ${top}px;"></div>`);
+    }
+
+    return html`
+      <div class="grid-lines">
+        ${vertical}
+        ${horizontal}
+      </div>
+    `;
+  }
+
+  private renderWidget(
+    widget: DashboardWidget,
+    metrics: GridCellMetrics,
+    margins: DashboardResolvedMargins,
+    previewMap: Map<string, DashboardWidget> | null,
+  ): TemplateResult {
+    const isDragging = this.dragState?.widgetId === widget.id;
+    const isResizing = this.resizeState?.widgetId === widget.id;
+    const isLocked = widget.locked || !this.editable;
+    const previewWidget = previewMap?.get(widget.id) ?? null;
+    const layoutForRender = isDragging ? widget : previewWidget ?? widget;
+    const rect = this.computeWidgetRect(layoutForRender, metrics, margins);
+
+    const sideProperty = this.rtl ? 'right' : 'left';
+    const sideValue = this.pxToPercent(rect.left, metrics.containerWidth);
+    const widthPercent = this.pxToPercent(rect.width, metrics.containerWidth);
+
+    let transform = '';
+    if (isDragging && this.dragState?.currentPointer) {
+      const pointer = this.dragState.currentPointer;
+      const bounds = this.containerBounds ?? this.getBoundingClientRect();
+      const translateX = pointer.clientX - bounds.left - this.dragState.offsetX - rect.left;
+      const translateY = pointer.clientY - bounds.top - this.dragState.offsetY - rect.top;
+      transform = `transform: translate(${translateX}px, ${translateY}px);`;
+    }
+
+    return html`
+      <div
+        class="grid-widget ${isDragging ? 'dragging' : ''} ${isResizing ? 'resizing' : ''}"
+        style="
+          ${sideProperty}: ${sideValue}%;
+          top: ${rect.top}px;
+          width: ${widthPercent}%;
+          height: ${rect.height}px;
+          ${transform}
+        "
+        data-widget-id=${widget.id}
+      >
+        <div class="widget-content">
+          ${widget.title
+            ? html`
+                <div
+                  class="widget-header ${isLocked ? 'locked' : ''}"
+                  @pointerdown=${!isLocked && !widget.noMove
+                    ? (evt: PointerEvent) => this.startDrag(evt, widget)
+                    : null}
+                  @contextmenu=${(evt: MouseEvent) => this.handleWidgetContextMenu(evt, widget)}
+                  tabindex=${!isLocked && !widget.noMove ? 0 : -1}
+                  @keydown=${(evt: KeyboardEvent) => this.handleHeaderKeydown(evt, widget)}
+                >
+                  ${widget.icon ? html`<dees-icon .icon=${widget.icon}></dees-icon>` : null}
+                  ${widget.title}
+                </div>
+              `
+            : null}
+          <div class="widget-body ${widget.title ? 'has-header' : ''}">
+            ${widget.content}
+          </div>
+          ${!isLocked && !widget.noResize
+            ? html`
+                <div
+                  class="resize-handle resize-handle-e"
+                  @pointerdown=${(evt: PointerEvent) => this.startResize(evt, widget, 'e')}
+                ></div>
+                <div
+                  class="resize-handle resize-handle-s"
+                  @pointerdown=${(evt: PointerEvent) => this.startResize(evt, widget, 's')}
+                ></div>
+                <div
+                  class="resize-handle resize-handle-se"
+                  @pointerdown=${(evt: PointerEvent) => this.startResize(evt, widget, 'se')}
+                ></div>
+              `
+            : null}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderPlaceholder(
+    metrics: GridCellMetrics,
+    margins: DashboardResolvedMargins,
+  ): TemplateResult {
+    if (!this.placeholderPosition) {
+      return html``;
+    }
+
+    const rect = this.computeWidgetRect(this.placeholderPosition, metrics, margins);
+    const sideProperty = this.rtl ? 'right' : 'left';
+    const sideValue = this.pxToPercent(rect.left, metrics.containerWidth);
+    const widthPercent = this.pxToPercent(rect.width, metrics.containerWidth);
+
+    return html`
+      <div
+        class="grid-widget placeholder"
+        style="
+          ${sideProperty}: ${sideValue}%;
+          top: ${rect.top}px;
+          width: ${widthPercent}%;
+          height: ${rect.height}px;
+        "
+      >
+        <div class="widget-content"></div>
+      </div>
+    `;
+  }
+
+  private startDrag(event: PointerEvent, widget: DashboardWidget): void {
+    if (!this.editable || widget.noMove || widget.locked) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const widgetElement = (event.currentTarget as HTMLElement).closest('.grid-widget') as HTMLElement | null;
+    if (!widgetElement) {
+      return;
+    }
+
+    const widgetRect = widgetElement.getBoundingClientRect();
+    this.containerBounds = this.getBoundingClientRect();
+    this.ensureMetrics();
+
+    this.dragState = {
+      widgetId: widget.id,
+      pointerId: event.pointerId,
+      offsetX: event.clientX - widgetRect.left,
+      offsetY: event.clientY - widgetRect.top,
+      start: { id: widget.id, x: widget.x, y: widget.y, w: widget.w, h: widget.h },
+      previousPosition: { id: widget.id, x: widget.x, y: widget.y, w: widget.w, h: widget.h },
+      currentPointer: { clientX: event.clientX, clientY: event.clientY },
+      lastPlacement: null,
+    };
+
+    this.interactionActive = true;
+    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+    document.addEventListener('pointermove', this.handleDragMove);
+    document.addEventListener('pointerup', this.handleDragEnd);
+
+    this.placeholderPosition = { id: widget.id, x: widget.x, y: widget.y, w: widget.w, h: widget.h };
+  }
+
+  private handleDragMove = (event: PointerEvent): void => {
+    if (!this.dragState) return;
+    const metrics = this.ensureMetrics();
+    const activeWidgets = this.widgets;
+    const widget = activeWidgets.find(item => item.id === this.dragState!.widgetId);
+    if (!widget) return;
+
+    event.preventDefault();
+
+    const previousPosition = this.dragState.previousPosition;
+
+    const coords = computeGridCoordinates({
+      pointer: { clientX: event.clientX, clientY: event.clientY },
+      containerRect: this.containerBounds ?? this.getBoundingClientRect(),
+      metrics,
+      columns: this.columns,
+      widget,
+      rtl: this.rtl,
+      dragOffsetX: this.dragState.offsetX,
+      dragOffsetY: this.dragState.offsetY,
+    });
+
+    const placement = resolveWidgetPlacement(
+      activeWidgets,
+      widget.id,
+      { x: coords.x, y: coords.y },
+      this.columns,
+      previousPosition,
+    );
+    if (placement) {
+      const updatedWidget = placement.widgets.find(item => item.id === widget.id);
+      this.dragState = {
+        ...this.dragState,
+        currentPointer: { clientX: event.clientX, clientY: event.clientY },
+        lastPlacement: placement,
+        previousPosition: updatedWidget
+          ? { id: updatedWidget.id, x: updatedWidget.x, y: updatedWidget.y, w: updatedWidget.w, h: updatedWidget.h }
+          : { id: widget.id, x: coords.x, y: coords.y, w: widget.w, h: widget.h },
+      };
+      this.previewWidgets = placement.widgets;
+      const previewWidget = placement.widgets.find(item => item.id === widget.id);
+      if (previewWidget) {
+        this.placeholderPosition = {
+          id: previewWidget.id,
+          x: previewWidget.x,
+          y: previewWidget.y,
+          w: previewWidget.w,
+          h: previewWidget.h,
+        };
+      } else {
+        this.placeholderPosition = { id: widget.id, x: coords.x, y: coords.y, w: widget.w, h: widget.h };
+      }
+    } else {
+      this.previewWidgets = null;
+      this.placeholderPosition = null;
+    }
+
+    this.requestUpdate();
+  };
+
+  private handleDragEnd = (event: PointerEvent): void => {
+    const dragState = this.dragState;
+    if (!dragState || event.pointerId !== dragState.pointerId) {
+      return;
+    }
+
+    const layoutSource = this.widgets;
+    this.previewWidgets = null;
+
+    // Always validate the final position, don't rely on lastPlacement from drag
+    const target = this.placeholderPosition ?? dragState.start;
+    const placement = resolveWidgetPlacement(
+      layoutSource,
+      dragState.widgetId,
+      { x: target.x, y: target.y },
+      this.columns,
+      dragState.previousPosition,
+    );
+
+    if (placement) {
+      // Verify that the placement doesn't result in overlapping widgets
+      const finalWidget = placement.widgets.find(w => w.id === dragState.widgetId);
+      if (finalWidget) {
+        const hasOverlap = placement.widgets.some(w => {
+          if (w.id === dragState.widgetId) return false;
+          return (
+            finalWidget.x < w.x + w.w &&
+            finalWidget.x + finalWidget.w > w.x &&
+            finalWidget.y < w.y + w.h &&
+            finalWidget.y + finalWidget.h > w.y
+          );
+        });
+
+        if (!hasOverlap) {
+          this.commitPlacement(placement, dragState.widgetId, 'widget-move');
+        } else {
+          // Return to start position if overlap detected
+          this.widgets = this.widgets.map(widget =>
+            widget.id === dragState.widgetId ? { ...widget, x: dragState.start.x, y: dragState.start.y } : widget,
+          );
+        }
+      }
+    } else {
+      // Return to start position if no valid placement
+      this.widgets = this.widgets.map(widget =>
+        widget.id === dragState.widgetId ? { ...widget, x: dragState.start.x, y: dragState.start.y } : widget,
+      );
+    }
+
+    this.placeholderPosition = null;
+    this.dragState = null;
+    this.interactionActive = false;
+    this.releasePointerEvents();
+  };
+
+  private startResize(event: PointerEvent, widget: DashboardWidget, handler: 'e' | 's' | 'se'): void {
+    if (!this.editable || widget.noResize || widget.locked) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    this.ensureMetrics();
+
+    this.resizeState = {
+      widgetId: widget.id,
+      pointerId: event.pointerId,
+      handler,
+      startPointer: { clientX: event.clientX, clientY: event.clientY },
+      start: { id: widget.id, x: widget.x, y: widget.y, w: widget.w, h: widget.h },
+      startWidth: widget.w,
+      startHeight: widget.h,
+      lastPlacement: null,
+    };
+
+    this.interactionActive = true;
+    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
+    document.addEventListener('pointermove', this.handleResizeMove);
+    document.addEventListener('pointerup', this.handleResizeEnd);
+
+    this.placeholderPosition = { id: widget.id, x: widget.x, y: widget.y, w: widget.w, h: widget.h };
+  }
+
+  private handleResizeMove = (event: PointerEvent): void => {
+    if (!this.resizeState) return;
+    const metrics = this.ensureMetrics();
+    const activeWidgets = this.widgets;
+    const widget = activeWidgets.find(item => item.id === this.resizeState!.widgetId);
+    if (!widget) return;
+
+    event.preventDefault();
+
+    const nextSize = computeResizeDimensions({
+      pointer: { clientX: event.clientX, clientY: event.clientY },
+      containerRect: this.containerBounds ?? this.getBoundingClientRect(),
+      metrics,
+      startWidth: this.resizeState.startWidth,
+      startHeight: this.resizeState.startHeight,
+      startPointer: this.resizeState.startPointer,
+      handler: this.resizeState.handler,
+      widget,
+      columns: this.columns,
+    });
+
+    const placement = resolveWidgetPlacement(
+      activeWidgets,
+      widget.id,
+      { x: widget.x, y: widget.y, w: nextSize.width, h: nextSize.height },
+      this.columns,
+      this.resizeState.start,
+    );
+
+    if (placement) {
+      this.resizeState = { ...this.resizeState, lastPlacement: placement };
+      this.previewWidgets = placement.widgets;
+      const previewWidget = placement.widgets.find(item => item.id === widget.id);
+      if (previewWidget) {
+        this.placeholderPosition = {
+          id: previewWidget.id,
+          x: previewWidget.x,
+          y: previewWidget.y,
+          w: previewWidget.w,
+          h: previewWidget.h,
+        };
+      } else {
+        this.placeholderPosition = {
+          id: widget.id,
+          x: widget.x,
+          y: widget.y,
+          w: nextSize.width,
+          h: nextSize.height,
+        };
+      }
+    } else {
+      this.previewWidgets = null;
+      this.placeholderPosition = null;
+    }
+
+    this.requestUpdate();
+  };
+
+  private handleResizeEnd = (event: PointerEvent): void => {
+    const resizeState = this.resizeState;
+    if (!resizeState || event.pointerId !== resizeState.pointerId) {
+      return;
+    }
+
+    const layoutSource = this.widgets;
+    this.previewWidgets = null;
+    const placement =
+      resizeState.lastPlacement ??
+      resolveWidgetPlacement(
+        layoutSource,
+        resizeState.widgetId,
+        {
+          x: this.placeholderPosition?.x ?? resizeState.start.x,
+          y: this.placeholderPosition?.y ?? resizeState.start.y,
+          w: this.placeholderPosition?.w ?? resizeState.start.w,
+          h: this.placeholderPosition?.h ?? resizeState.start.h,
+        },
+        this.columns,
+        resizeState.start,
+      );
+
+    if (placement) {
+      this.commitPlacement(placement, resizeState.widgetId, 'widget-resize');
+    } else {
+      this.widgets = this.widgets.map(widget =>
+        widget.id === resizeState.widgetId ? { ...widget, w: resizeState.start.w, h: resizeState.start.h } : widget,
+      );
+    }
+
+    this.placeholderPosition = null;
+    this.resizeState = null;
+    this.interactionActive = false;
+    this.releasePointerEvents();
+  };
+
+  private handleHeaderKeydown(event: KeyboardEvent, widget: DashboardWidget): void {
+    if (!this.editable || widget.noMove || widget.locked) {
+      return;
+    }
+
+    const key = event.key;
+    const isResize = event.shiftKey;
+    let placement: PlacementResult | null = null;
+
+    if (isResize && ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(key)) {
+      event.preventDefault();
+      const delta = key === 'ArrowRight' || key === 'ArrowDown' ? 1 : -1;
+
+      if (key === 'ArrowLeft' || key === 'ArrowRight') {
+        const maxWidth = widget.maxW ?? this.columns - widget.x;
+        const nextWidth = Math.max(widget.minW ?? 1, Math.min(maxWidth, widget.w + delta));
+        placement = resolveWidgetPlacement(
+          this.widgets,
+          widget.id,
+          { x: widget.x, y: widget.y, w: nextWidth, h: widget.h },
+          this.columns,
+        );
+      } else {
+        const maxHeight = widget.maxH ?? Number.POSITIVE_INFINITY;
+        const nextHeight = Math.max(widget.minH ?? 1, Math.min(maxHeight, widget.h + delta));
+        placement = resolveWidgetPlacement(
+          this.widgets,
+          widget.id,
+          { x: widget.x, y: widget.y, w: widget.w, h: nextHeight },
+          this.columns,
+        );
+      }
+
+      if (placement) {
+        this.commitPlacement(placement, widget.id, 'widget-resize');
+      }
+      return;
+    }
+
+    const moveMap: Record<string, { dx: number; dy: number }> = {
+      ArrowLeft: { dx: -1, dy: 0 },
+      ArrowRight: { dx: 1, dy: 0 },
+      ArrowUp: { dx: 0, dy: -1 },
+      ArrowDown: { dx: 0, dy: 1 },
+    };
+
+    const delta = moveMap[key];
+    if (!delta) {
+      return;
+    }
+
+    event.preventDefault();
+    const targetX = Math.max(0, Math.min(this.columns - widget.w, widget.x + delta.dx));
+    const targetY = Math.max(0, widget.y + delta.dy);
+
+    placement = resolveWidgetPlacement(this.widgets, widget.id, { x: targetX, y: targetY }, this.columns);
+    if (placement) {
+      this.commitPlacement(placement, widget.id, 'widget-move');
+    }
+  }
+
+  private handleWidgetContextMenu(event: MouseEvent, widget: DashboardWidget): void {
+    event.preventDefault();
+    event.stopPropagation();
+    openWidgetContextMenu({ widget, host: this, event });
+  }
+
+  private commitPlacement(result: PlacementResult, widgetId: string, type: 'widget-move' | 'widget-resize'): void {
+    this.previewWidgets = null;
+    this.widgets = result.widgets;
+    const subject = this.widgets.find(item => item.id === widgetId);
+    if (subject) {
+      this.dispatchEvent(
+        new CustomEvent(type, {
+          detail: {
+            widget: subject,
+            displaced: result.movedWidgets.filter(id => id !== widgetId),
+            swappedWith: result.swappedWith,
+          },
+          bubbles: true,
+          composed: true,
+        }),
+      );
+    }
+  }
+
+  public removeWidget(widgetId: string): void {
+    const target = this.widgets.find(widget => widget.id === widgetId);
+    if (!target) return;
+    this.widgets = this.widgets.filter(widget => widget.id !== widgetId);
+    this.dispatchEvent(
+      new CustomEvent('widget-remove', {
+        detail: { widget: target },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  public updateWidget(widgetId: string, updates: Partial<DashboardWidget>): void {
+    this.widgets = this.widgets.map(widget => (widget.id === widgetId ? { ...widget, ...updates } : widget));
+  }
+
+  public getLayout(): DashboardLayoutItem[] {
+    return this.widgets.map(({ id, x, y, w, h }) => ({ id, x, y, w, h }));
+  }
+
+  public setLayout(layout: DashboardLayoutItem[]): void {
+    this.widgets = applyLayout(this.widgets, layout);
+  }
+
+  public lockGrid(): void {
+    this.editable = false;
+  }
+
+  public unlockGrid(): void {
+    this.editable = true;
+  }
+
+  public addWidget(widget: DashboardWidget, autoPosition = false): void {
+    const nextWidget = { ...widget };
+    if (autoPosition || nextWidget.autoPosition) {
+      const position = findAvailablePosition(this.widgets, nextWidget.w, nextWidget.h, this.columns);
+      nextWidget.x = position.x;
+      nextWidget.y = position.y;
+    }
+
+    this.widgets = [...this.widgets, nextWidget];
+  }
+
+  public compact(direction: LayoutDirection = 'vertical'): void {
+    const nextWidgets = this.widgets.map(widget => ({ ...widget }));
+    compactLayout(nextWidgets, direction);
+    this.widgets = nextWidgets;
+  }
+
+  public applyBreakpointLayout(breakpoint: string): void {
+    this.activeBreakpoint = breakpoint;
+    const layout = this.layouts?.[breakpoint];
+    if (layout) {
+      this.setLayout(layout);
+    }
+  }
+
+  public notifyLayoutChange(): void {
+    this.dispatchEvent(
+      new CustomEvent('layout-change', {
+        detail: { layout: this.getLayout() },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  private ensureMetrics(): GridCellMetrics {
+    if (!this.metrics) {
+      this.computeMetrics();
+    }
+    return this.metrics!;
+  }
+
+  private computeMetrics(): void {
+    if (!this.isConnected) return;
+    const bounds = this.getBoundingClientRect();
+    this.containerBounds = bounds;
+    const margins = resolveMargins(this.margin);
+    this.resolvedMargins = margins;
+    this.metrics = calculateCellMetrics(bounds.width, this.columns, margins, this.cellHeight, this.cellHeightUnit);
+  }
+
+  private observeResize(): void {
+    if (this.resizeObserver) return;
+    this.resizeObserver = new ResizeObserver(() => {
+      this.computeMetrics();
+    });
+    this.resizeObserver.observe(this);
+  }
+
+  private disconnectResizeObserver(): void {
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = undefined;
+  }
+
+  private releasePointerEvents(): void {
+    document.removeEventListener('pointermove', this.handleDragMove);
+    document.removeEventListener('pointerup', this.handleDragEnd);
+    document.removeEventListener('pointermove', this.handleResizeMove);
+    document.removeEventListener('pointerup', this.handleResizeEnd);
+  }
+
+  private pxToPercent(value: number, container: number): number {
+    if (!container) return 0;
+    return Number(((value / container) * 100).toFixed(4));
+  }
+
+  private computeWidgetRect(
+    widget: Pick<DashboardWidget, 'x' | 'y' | 'w' | 'h'>,
+    metrics: GridCellMetrics,
+    margins: DashboardResolvedMargins,
+  ) {
+    const cellWidth = metrics.cellWidthPx;
+    const cellHeight = metrics.cellHeightPx;
+    const left = widget.x * (cellWidth + margins.horizontal) + margins.horizontal;
+    const top = widget.y * (cellHeight + margins.vertical) + margins.vertical;
+    const width = widget.w * cellWidth + Math.max(0, widget.w - 1) * margins.horizontal;
+    const height = widget.h * cellHeight + Math.max(0, widget.h - 1) * margins.vertical;
+
+    return { left, top, width, height };
+  }
+}

ts_web/elements/dees-dashboardgrid/index.ts

@@ -0,0 +1,2 @@
+export * from './dees-dashboardgrid.js';
+export * from './types.js';

ts_web/elements/dees-dashboardgrid/interaction.ts

@@ -0,0 +1,105 @@
+import type { DashboardWidget, GridCellMetrics } from './types.js';
+
+export interface PointerPosition {
+  clientX: number;
+  clientY: number;
+}
+
+export interface DragComputationArgs {
+  pointer: PointerPosition;
+  containerRect: DOMRect;
+  metrics: GridCellMetrics;
+  columns: number;
+  widget: DashboardWidget;
+  rtl: boolean;
+  dragOffsetX?: number;
+  dragOffsetY?: number;
+}
+
+export const computeGridCoordinates = ({
+  pointer,
+  containerRect,
+  metrics,
+  columns,
+  widget,
+  rtl,
+  dragOffsetX = 0,
+  dragOffsetY = 0,
+}: DragComputationArgs): { x: number; y: number } => {
+  const relativeX = pointer.clientX - containerRect.left - dragOffsetX;
+  const relativeY = pointer.clientY - containerRect.top - dragOffsetY;
+
+  const marginX = metrics.marginHorizontalPx;
+  const marginY = metrics.marginVerticalPx;
+  const cellWidth = metrics.cellWidthPx;
+  const cellHeight = metrics.cellHeightPx;
+
+  const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
+
+  const adjustedX = clamp(relativeX - marginX, 0, containerRect.width - marginX);
+  const adjustedY = clamp(relativeY - marginY, 0, Number.POSITIVE_INFINITY);
+
+  const cellPlusMarginX = cellWidth + marginX;
+  const cellPlusMarginY = cellHeight + marginY;
+
+  let gridX = Math.round(adjustedX / cellPlusMarginX);
+  if (rtl) {
+    gridX = columns - widget.w - gridX;
+  }
+  gridX = clamp(gridX, 0, columns - widget.w);
+
+  const gridY = clamp(Math.round(adjustedY / cellPlusMarginY), 0, Number.MAX_SAFE_INTEGER);
+
+  return { x: gridX, y: gridY };
+};
+
+export interface ResizeComputationArgs {
+  pointer: PointerPosition;
+  containerRect: DOMRect;
+  metrics: GridCellMetrics;
+  startWidth: number;
+  startHeight: number;
+  startPointer: PointerPosition;
+  handler: 'e' | 's' | 'se';
+  widget: DashboardWidget;
+  columns: number;
+}
+
+export const computeResizeDimensions = ({
+  pointer,
+  containerRect,
+  metrics,
+  startWidth,
+  startHeight,
+  startPointer,
+  handler,
+  widget,
+  columns,
+}: ResizeComputationArgs): { width: number; height: number } => {
+  const deltaX = pointer.clientX - startPointer.clientX;
+  const deltaY = pointer.clientY - startPointer.clientY;
+
+  let width = startWidth;
+  let height = startHeight;
+
+  const cellPlusMarginX = metrics.cellWidthPx + metrics.marginHorizontalPx;
+  const cellPlusMarginY = metrics.cellHeightPx + metrics.marginVerticalPx;
+
+  if (handler.includes('e')) {
+    const deltaCols = Math.round(deltaX / cellPlusMarginX);
+    width = startWidth + deltaCols;
+  }
+
+  if (handler.includes('s')) {
+    const deltaRows = Math.round(deltaY / cellPlusMarginY);
+    height = startHeight + deltaRows;
+  }
+
+  const clampedWidth = Math.max(widget.minW || 1, Math.min(width, widget.maxW || columns - widget.x));
+  const clampedHeight = Math.max(widget.minH || 1, Math.min(height, widget.maxH || Number.MAX_SAFE_INTEGER));
+
+  return {
+    width: clampedWidth,
+    height: clampedHeight,
+  };
+};

ts_web/elements/dees-dashboardgrid/layout.ts

@@ -0,0 +1,246 @@
+import type {
+  DashboardResolvedMargins,
+  DashboardMargin,
+  DashboardWidget,
+  DashboardLayoutItem,
+  GridCellMetrics,
+  LayoutDirection,
+} from './types.js';
+
+export const DEFAULT_MARGIN = 10;
+
+export const resolveMargins = (margin: DashboardMargin): DashboardResolvedMargins => {
+  if (typeof margin === 'number') {
+    return {
+      horizontal: margin,
+      vertical: margin,
+      top: margin,
+      right: margin,
+      bottom: margin,
+      left: margin,
+    };
+  }
+
+  const resolved = {
+    top: margin.top ?? DEFAULT_MARGIN,
+    right: margin.right ?? DEFAULT_MARGIN,
+    bottom: margin.bottom ?? DEFAULT_MARGIN,
+    left: margin.left ?? DEFAULT_MARGIN,
+  };
+
+  return {
+    ...resolved,
+    horizontal: (resolved.left + resolved.right) / 2,
+    vertical: (resolved.top + resolved.bottom) / 2,
+  };
+};
+
+export const calculateCellMetrics = (
+  containerWidth: number,
+  columns: number,
+  margins: DashboardResolvedMargins,
+  cellHeight: number,
+  cellHeightUnit: string,
+): GridCellMetrics => {
+  const totalMarginWidth = margins.horizontal * (columns + 1);
+  const availableWidth = Math.max(containerWidth - totalMarginWidth, 0);
+  const cellWidthPx = columns > 0 ? availableWidth / columns : 0;
+  const cellHeightPx = cellHeightUnit === 'auto' ? cellWidthPx : cellHeight;
+
+  return {
+    containerWidth,
+    cellWidthPx,
+    marginHorizontalPx: margins.horizontal,
+    cellHeightPx,
+    marginVerticalPx: margins.vertical,
+  };
+};
+
+export const calculateGridHeight = (
+  widgets: DashboardWidget[],
+  margins: DashboardResolvedMargins,
+  cellHeight: number,
+): number => {
+  if (widgets.length === 0) return 0;
+  const maxY = Math.max(...widgets.map(widget => widget.y + widget.h), 0);
+  return maxY * cellHeight + (maxY + 1) * margins.vertical;
+};
+
+const overlaps = (
+  widget: DashboardWidget,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+) => x < widget.x + widget.w && x + w > widget.x && y < widget.y + widget.h && y + h > widget.y;
+
+export const collectCollisions = (
+  widgets: DashboardWidget[],
+  target: DashboardWidget,
+  nextX: number,
+  nextY: number,
+  nextW: number = target.w,
+  nextH: number = target.h,
+): DashboardWidget[] => {
+  return widgets.filter(widget => {
+    if (widget.id === target.id) return false;
+    return overlaps(widget, nextX, nextY, nextW, nextH);
+  });
+};
+
+export const checkCollision = (
+  widgets: DashboardWidget[],
+  target: DashboardWidget,
+  nextX: number,
+  nextY: number,
+): boolean => collectCollisions(widgets, target, nextX, nextY).length > 0;
+
+export const cloneWidget = (widget: DashboardWidget): DashboardWidget => ({ ...widget });
+
+export const cloneWidgets = (widgets: DashboardWidget[]): DashboardWidget[] => widgets.map(cloneWidget);
+
+export const findAvailablePosition = (
+  widgets: DashboardWidget[],
+  width: number,
+  height: number,
+  columns: number,
+): { x: number; y: number } => {
+  for (let y = 0; y < 200; y++) {
+    for (let x = 0; x <= columns - width; x++) {
+      const isFree = !widgets.some(widget => overlaps(widget, x, y, width, height));
+      if (isFree) {
+        return { x, y };
+      }
+    }
+  }
+
+  const maxY = widgets.reduce((acc, widget) => Math.max(acc, widget.y + widget.h), 0);
+  return { x: 0, y: maxY };
+};
+
+export interface PlacementResult {
+  widgets: DashboardWidget[];
+  movedWidgets: string[];
+  swappedWith?: string;
+}
+
+export const resolveWidgetPlacement = (
+  widgets: DashboardWidget[],
+  widgetId: string,
+  next: { x: number; y: number; w?: number; h?: number },
+  columns: number,
+  previousPosition?: DashboardLayoutItem,
+): PlacementResult | null => {
+  const sourceWidgets = cloneWidgets(widgets);
+  const moving = sourceWidgets.find(widget => widget.id === widgetId);
+  const original = widgets.find(widget => widget.id === widgetId);
+  if (!moving || !original) {
+    return null;
+  }
+
+  const target = {
+    x: next.x,
+    y: next.y,
+    w: next.w ?? moving.w,
+    h: next.h ?? moving.h,
+  };
+
+  moving.x = target.x;
+  moving.y = target.y;
+  moving.w = target.w;
+  moving.h = target.h;
+
+  const collisions = collectCollisions(sourceWidgets, moving, target.x, target.y, target.w, target.h);
+
+  if (collisions.length === 0) {
+    return { widgets: sourceWidgets, movedWidgets: [moving.id] };
+  }
+
+  if (collisions.length === 1) {
+    const other = collisions[0];
+    if (!other.locked && !other.noMove && other.w === moving.w && other.h === moving.h) {
+      const otherClone = sourceWidgets.find(widget => widget.id === other.id);
+      if (otherClone) {
+        // Use the original position of the moving widget for a clean swap
+        // This prevents the "snapping together" issue where both widgets end up at the same position
+        const swapTarget = original;
+        const previousOtherPosition = { x: otherClone.x, y: otherClone.y };
+        otherClone.x = swapTarget.x;
+        otherClone.y = swapTarget.y;
+
+        const swapValid =
+          collectCollisions(sourceWidgets, moving, moving.x, moving.y, moving.w, moving.h).length === 0 &&
+          collectCollisions(sourceWidgets, otherClone, otherClone.x, otherClone.y, otherClone.w, otherClone.h).length === 0;
+
+        if (swapValid) {
+          return { widgets: sourceWidgets, movedWidgets: [moving.id, otherClone.id], swappedWith: otherClone.id };
+        }
+
+        otherClone.x = previousOtherPosition.x;
+        otherClone.y = previousOtherPosition.y;
+      }
+    }
+  }
+
+  // attempt displacement cascade
+  const movedIds = new Set<string>([moving.id]);
+  for (const offending of collisions) {
+    if (offending.locked || offending.noMove) {
+      return null;
+    }
+    const clone = sourceWidgets.find(widget => widget.id === offending.id);
+    if (!clone) continue;
+    const remaining = sourceWidgets.filter(widget => widget.id !== offending.id);
+    const position = findAvailablePosition(remaining, clone.w, clone.h, columns);
+    clone.x = position.x;
+    clone.y = position.y;
+    movedIds.add(clone.id);
+  }
+
+  // verify no overlaps remain
+  const verify = collectCollisions(sourceWidgets, moving, moving.x, moving.y, moving.w, moving.h);
+  if (verify.length > 0) {
+    return null;
+  }
+
+  return { widgets: sourceWidgets, movedWidgets: Array.from(movedIds) };
+};
+
+export const compactLayout = (
+  widgets: DashboardWidget[],
+  direction: LayoutDirection = 'vertical',
+) => {
+  const sorted = [...widgets].sort((a, b) => {
+    if (direction === 'vertical') {
+      if (a.y !== b.y) return a.y - b.y;
+      return a.x - b.x;
+    }
+
+    if (a.x !== b.x) return a.x - b.x;
+    return a.y - b.y;
+  });
+
+  for (const widget of sorted) {
+    if (widget.locked || widget.noMove) continue;
+
+    if (direction === 'vertical') {
+      while (widget.y > 0 && !checkCollision(widgets, widget, widget.x, widget.y - 1)) {
+        widget.y -= 1;
+      }
+    } else {
+      while (widget.x > 0 && !checkCollision(widgets, widget, widget.x - 1, widget.y)) {
+        widget.x -= 1;
+      }
+    }
+  }
+};
+
+export const applyLayout = (
+  widgets: DashboardWidget[],
+  layout: DashboardLayoutItem[],
+): DashboardWidget[] => {
+  return widgets.map(widget => {
+    const layoutItem = layout.find(item => item.id === widget.id);
+    return layoutItem ? { ...widget, ...layoutItem } : widget;
+  });
+};

ts_web/elements/dees-dashboardgrid/styles.ts

@@ -0,0 +1,249 @@
+import { css, cssManager } from '@design.estate/dees-element';
+
+export const dashboardGridStyles = [
+  cssManager.defaultStyles,
+  css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+        position: relative;
+      }
+
+      .grid-container {
+        position: relative;
+        width: 100%;
+        min-height: 400px;
+        box-sizing: border-box;
+      }
+
+      .grid-widget {
+        position: absolute;
+        will-change: auto;
+      }
+      
+      :host([enableanimation]) .grid-widget {
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .grid-widget.dragging {
+        z-index: 1000;
+        transition: none !important;
+        opacity: 0.8;
+        cursor: grabbing;
+        pointer-events: none;
+        will-change: transform;
+      }
+      
+      .grid-widget.placeholder {
+        pointer-events: none;
+        z-index: 1;
+      }
+      
+      .grid-widget.placeholder .widget-content {
+        background: ${cssManager.bdTheme('rgba(59, 130, 246, 0.1)', 'rgba(59, 130, 246, 0.1)')};
+        border: 2px dashed ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        box-shadow: none;
+      }
+
+      .grid-widget.resizing {
+        transition: none !important;
+      }
+
+      .widget-content {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        overflow: hidden;
+        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
+        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        border-radius: 8px;
+        box-shadow: ${cssManager.bdTheme(
+          '0 1px 3px rgba(0, 0, 0, 0.1)',
+          '0 1px 3px rgba(0, 0, 0, 0.3)'
+        )};
+        transition: box-shadow 0.2s ease;
+      }
+
+      .grid-widget:hover .widget-content {
+        box-shadow: ${cssManager.bdTheme(
+          '0 4px 12px rgba(0, 0, 0, 0.15)',
+          '0 4px 12px rgba(0, 0, 0, 0.4)'
+        )};
+      }
+
+      .grid-widget.dragging .widget-content {
+        box-shadow: ${cssManager.bdTheme(
+          '0 16px 48px rgba(0, 0, 0, 0.25)',
+          '0 16px 48px rgba(0, 0, 0, 0.6)'
+        )};
+        transform: scale(1.05);
+      }
+
+      .widget-header {
+        padding: 12px 16px;
+        border-bottom: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 14px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+        background: ${cssManager.bdTheme('#f9fafb', '#0a0a0a')};
+        cursor: grab;
+        user-select: none;
+      }
+      
+      .widget-header:hover {
+        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
+      }
+      
+      .widget-header:active {
+        cursor: grabbing;
+      }
+
+      .widget-header.locked {
+        cursor: default;
+      }
+      
+      .widget-header.locked:hover {
+        background: ${cssManager.bdTheme('#f9fafb', '#0a0a0a')};
+      }
+
+      .widget-header dees-icon {
+        font-size: 16px;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+      }
+
+      .widget-body {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        overflow: auto;
+        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
+      }
+
+      .widget-body.has-header {
+        top: 45px;
+      }
+
+      .resize-handle {
+        position: absolute;
+        background: transparent;
+        z-index: 10;
+      }
+
+      .resize-handle:hover {
+        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        opacity: 0.3;
+      }
+
+      .resize-handle-e {
+        cursor: ew-resize;
+        width: 12px;
+        right: -6px;
+        top: 10%;
+        height: 80%;
+      }
+
+      .resize-handle-s {
+        cursor: ns-resize;
+        height: 12px;
+        width: 80%;
+        bottom: -6px;
+        left: 10%;
+      }
+
+      .resize-handle-se {
+        cursor: se-resize;
+        width: 20px;
+        height: 20px;
+        right: -2px;
+        bottom: -2px;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+      }
+      
+      .resize-handle-se::after {
+        content: '';
+        position: absolute;
+        right: 4px;
+        bottom: 4px;
+        width: 6px;
+        height: 6px;
+        border-right: 2px solid ${cssManager.bdTheme('#71717a', '#71717a')};
+        border-bottom: 2px solid ${cssManager.bdTheme('#71717a', '#71717a')};
+      }
+
+      .grid-widget:hover .resize-handle-se {
+        opacity: 0.7;
+      }
+
+      .resize-handle-se:hover {
+        opacity: 1 !important;
+      }
+      
+      .resize-handle-se:hover::after {
+        border-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+      }
+
+      .grid-placeholder {
+        position: absolute;
+        background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        opacity: 0.1;
+        border-radius: 8px;
+        border: 2px dashed ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
+        transition: all 0.2s ease;
+        pointer-events: none;
+      }
+
+      .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 400px;
+        color: ${cssManager.bdTheme('#71717a', '#71717a')};
+        text-align: center;
+        padding: 32px;
+      }
+
+      .empty-state dees-icon {
+        font-size: 48px;
+        margin-bottom: 16px;
+        opacity: 0.5;
+      }
+      
+      .grid-lines {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        pointer-events: none;
+        z-index: -1;
+      }
+      
+      .grid-line-vertical {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 1px;
+        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        opacity: 0.3;
+      }
+      
+      .grid-line-horizontal {
+        position: absolute;
+        left: 0;
+        right: 0;
+        height: 1px;
+        background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
+        opacity: 0.3;
+      }
+  `,
+];

ts_web/elements/dees-dashboardgrid/types.ts

@@ -0,0 +1,53 @@
+import type { TemplateResult } from '@design.estate/dees-element';
+
+export type CellHeightUnit = 'px' | 'em' | 'rem' | 'auto';
+
+export interface DashboardMarginObject {
+  top?: number;
+  right?: number;
+  bottom?: number;
+  left?: number;
+}
+
+export type DashboardMargin = number | DashboardMarginObject;
+
+export interface DashboardResolvedMargins {
+  horizontal: number;
+  vertical: number;
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export interface DashboardLayoutItem {
+  id: string;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export interface DashboardWidget extends DashboardLayoutItem {
+  minW?: number;
+  minH?: number;
+  maxW?: number;
+  maxH?: number;
+  content: TemplateResult | string;
+  title?: string;
+  icon?: string;
+  noMove?: boolean;
+  noResize?: boolean;
+  locked?: boolean;
+  autoPosition?: boolean;
+}
+
+export type LayoutDirection = 'vertical' | 'horizontal';
+
+export interface GridCellMetrics {
+  containerWidth: number;
+  cellWidthPx: number;
+  marginHorizontalPx: number;
+  cellHeightPx: number;
+  marginVerticalPx: number;
+}

ts_web/elements/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';
 
@@ -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/dees-editor/index.ts

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

ts_web/elements/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/dees-form.ts

@@ -9,18 +9,18 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 
 import { DeesInputCheckbox } from './dees-input-checkbox.js';
-import { DeesInputDatepicker } from './dees-input-datepicker.js';
+import { DeesInputDatepicker } from './dees-input-datepicker/index.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 { DeesInputFileupload } from './dees-input-fileupload/index.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/dees-table.js';
+import { DeesTable } from './dees-table/index.js';
 import { demoFunc } from './dees-form.demo.js';
 
 // Unified set for form input types

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

@@ -0,0 +1,624 @@
+import {
+  customElement,
+  type TemplateResult,
+  property,
+  state,
+} from '@design.estate/dees-element';
+import { DeesInputBase } from '../dees-input-base.js';
+import { demoFunc } from './demo.js';
+import { datepickerStyles } from './styles.js';
+import { renderDatepicker } from './template.js';
+import type { IDateEvent } from './types.js';
+import '../dees-icon.js';
+import '../dees-label.js';
+
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-datepicker': DeesInputDatepicker;
+  }
+}
+
+@customElement('dees-input-datepicker')
+export class DeesInputDatepicker extends DeesInputBase<DeesInputDatepicker> {
+  public static demo = demoFunc;
+
+  @property({ type: String })
+  public value: string = '';
+
+  @property({ type: Boolean })
+  public enableTime: boolean = false;
+
+  @property({ type: String })
+  public timeFormat: '24h' | '12h' = '24h';
+
+  @property({ type: Number })
+  public minuteIncrement: number = 1;
+
+  @property({ type: String })
+  public dateFormat: string = 'YYYY-MM-DD';
+
+  @property({ type: String })
+  public minDate: string = '';
+
+  @property({ type: String })
+  public maxDate: string = '';
+
+  @property({ type: Array })
+  public disabledDates: string[] = [];
+
+  @property({ type: Number })
+  public weekStartsOn: 0 | 1 = 1; // Default to Monday
+
+  @property({ type: String })
+  public placeholder: string = 'YYYY-MM-DD';
+
+  @property({ type: Boolean })
+  public enableTimezone: boolean = false;
+
+  @property({ type: String })
+  public timezone: string = Intl.DateTimeFormat().resolvedOptions().timeZone;
+
+  @property({ type: Array })
+  public events: IDateEvent[] = [];
+
+  @state()
+  public isOpened: boolean = false;
+
+  @state()
+  public opensToTop: boolean = false;
+
+  @state()
+  public selectedDate: Date | null = null;
+
+  @state()
+  public viewDate: Date = new Date();
+
+  @state()
+  public selectedHour: number = 0;
+
+  @state()
+  public selectedMinute: number = 0;
+
+  public static styles = datepickerStyles;
+
+
+
+  public getTimezones(): { value: string; label: string }[] {
+    // Common timezones with their display names
+    return [
+      { value: 'UTC', label: 'UTC (Coordinated Universal Time)' },
+      { value: 'America/New_York', label: 'Eastern Time (US & Canada)' },
+      { value: 'America/Chicago', label: 'Central Time (US & Canada)' },
+      { value: 'America/Denver', label: 'Mountain Time (US & Canada)' },
+      { value: 'America/Los_Angeles', label: 'Pacific Time (US & Canada)' },
+      { value: 'America/Phoenix', label: 'Arizona' },
+      { value: 'America/Anchorage', label: 'Alaska' },
+      { value: 'Pacific/Honolulu', label: 'Hawaii' },
+      { value: 'Europe/London', label: 'London' },
+      { value: 'Europe/Paris', label: 'Paris' },
+      { value: 'Europe/Berlin', label: 'Berlin' },
+      { value: 'Europe/Moscow', label: 'Moscow' },
+      { value: 'Asia/Dubai', label: 'Dubai' },
+      { value: 'Asia/Kolkata', label: 'India Standard Time' },
+      { value: 'Asia/Shanghai', label: 'China Standard Time' },
+      { value: 'Asia/Tokyo', label: 'Tokyo' },
+      { value: 'Australia/Sydney', label: 'Sydney' },
+      { value: 'Pacific/Auckland', label: 'Auckland' },
+    ];
+  }
+
+  public render(): TemplateResult {
+    return renderDatepicker(this);
+  }
+
+
+
+  async connectedCallback() {
+    super.connectedCallback();
+    this.handleClickOutside = this.handleClickOutside.bind(this);
+  }
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    document.removeEventListener('click', this.handleClickOutside);
+  }
+
+  async firstUpdated() {
+    // Initialize with empty value if not set
+    if (!this.value) {
+      this.value = '';
+    }
+
+    // Initialize view date and selected time
+    if (this.value) {
+      try {
+        const date = new Date(this.value);
+        if (!isNaN(date.getTime())) {
+          this.selectedDate = date;
+          this.viewDate = new Date(date);
+          this.selectedHour = date.getHours();
+          this.selectedMinute = date.getMinutes();
+        }
+      } catch {
+        // Invalid date
+      }
+    } else {
+      const now = new Date();
+      this.viewDate = new Date(now);
+      this.selectedHour = now.getHours();
+      this.selectedMinute = 0;
+    }
+  }
+
+  public formatDate(isoString: string): string {
+    if (!isoString) return '';
+
+    try {
+      const date = new Date(isoString);
+      if (isNaN(date.getTime())) return '';
+
+      let formatted = this.dateFormat;
+      
+      // Basic date formatting
+      const day = date.getDate().toString().padStart(2, '0');
+      const month = (date.getMonth() + 1).toString().padStart(2, '0');
+      const year = date.getFullYear().toString();
+      
+      // Replace in correct order to avoid conflicts
+      formatted = formatted.replace('YYYY', year);
+      formatted = formatted.replace('YY', year.slice(-2));
+      formatted = formatted.replace('MM', month);
+      formatted = formatted.replace('DD', day);
+
+      // Time formatting if enabled
+      if (this.enableTime) {
+        const hours24 = date.getHours();
+        const hours12 = hours24 === 0 ? 12 : hours24 > 12 ? hours24 - 12 : hours24;
+        const minutes = date.getMinutes().toString().padStart(2, '0');
+        const ampm = hours24 >= 12 ? 'PM' : 'AM';
+
+        if (this.timeFormat === '12h') {
+          formatted += ` ${hours12}:${minutes} ${ampm}`;
+        } else {
+          formatted += ` ${hours24.toString().padStart(2, '0')}:${minutes}`;
+        }
+      }
+
+      // Timezone formatting if enabled
+      if (this.enableTimezone) {
+        const formatter = new Intl.DateTimeFormat('en-US', {
+          timeZoneName: 'short',
+          timeZone: this.timezone
+        });
+        const parts = formatter.formatToParts(date);
+        const tzPart = parts.find(part => part.type === 'timeZoneName');
+        if (tzPart) {
+          formatted += ` ${tzPart.value}`;
+        }
+      }
+
+      return formatted;
+    } catch {
+      return '';
+    }
+  }
+
+  private handleClickOutside = (event: MouseEvent) => {
+    const path = event.composedPath();
+    if (!path.includes(this)) {
+      this.isOpened = false;
+      document.removeEventListener('click', this.handleClickOutside);
+    }
+  };
+
+  public async toggleCalendar(): Promise<void> {
+    if (this.disabled) return;
+
+    this.isOpened = !this.isOpened;
+
+    if (this.isOpened) {
+      // Check available space and set position
+      const inputContainer = this.shadowRoot!.querySelector('.input-container') as HTMLElement;
+      const rect = inputContainer.getBoundingClientRect();
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      
+      // Determine if we should open upwards (approximate height of 400px)
+      this.opensToTop = spaceBelow < 400 && spaceAbove > spaceBelow;
+
+      // Add click outside listener
+      setTimeout(() => {
+        document.addEventListener('click', this.handleClickOutside);
+      }, 0);
+    } else {
+      document.removeEventListener('click', this.handleClickOutside);
+    }
+  }
+
+  public getDaysInMonth(): Date[] {
+    const year = this.viewDate.getFullYear();
+    const month = this.viewDate.getMonth();
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const days: Date[] = [];
+
+    // Adjust for week start
+    const startOffset = this.weekStartsOn === 1 
+      ? (firstDay.getDay() === 0 ? 6 : firstDay.getDay() - 1)
+      : firstDay.getDay();
+
+    // Add days from previous month
+    for (let i = startOffset; i > 0; i--) {
+      days.push(new Date(year, month, 1 - i));
+    }
+
+    // Add days of current month
+    for (let i = 1; i <= lastDay.getDate(); i++) {
+      days.push(new Date(year, month, i));
+    }
+
+    // Add days from next month to complete the grid (6 rows)
+    const remainingDays = 42 - days.length;
+    for (let i = 1; i <= remainingDays; i++) {
+      days.push(new Date(year, month + 1, i));
+    }
+
+    return days;
+  }
+
+  public isToday(date: Date): boolean {
+    const today = new Date();
+    return date.getDate() === today.getDate() &&
+           date.getMonth() === today.getMonth() &&
+           date.getFullYear() === today.getFullYear();
+  }
+
+  public isSelected(date: Date): boolean {
+    if (!this.selectedDate) return false;
+    return date.getDate() === this.selectedDate.getDate() &&
+           date.getMonth() === this.selectedDate.getMonth() &&
+           date.getFullYear() === this.selectedDate.getFullYear();
+  }
+
+  public isDisabled(date: Date): boolean {
+    // Check min date
+    if (this.minDate) {
+      const min = new Date(this.minDate);
+      if (date < min) return true;
+    }
+
+    // Check max date
+    if (this.maxDate) {
+      const max = new Date(this.maxDate);
+      if (date > max) return true;
+    }
+
+    // Check disabled dates
+    if (this.disabledDates && this.disabledDates.length > 0) {
+      return this.disabledDates.some(disabledStr => {
+        try {
+          const disabled = new Date(disabledStr);
+          return date.getDate() === disabled.getDate() &&
+                 date.getMonth() === disabled.getMonth() &&
+                 date.getFullYear() === disabled.getFullYear();
+        } catch {
+          return false;
+        }
+      });
+    }
+
+    return false;
+  }
+
+  public getEventsForDate(date: Date): IDateEvent[] {
+    if (!this.events || this.events.length === 0) return [];
+    
+    const dateStr = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
+    return this.events.filter(event => event.date === dateStr);
+  }
+
+  public selectDate(date: Date): void {
+    this.selectedDate = new Date(
+      date.getFullYear(),
+      date.getMonth(),
+      date.getDate(),
+      this.selectedHour,
+      this.selectedMinute
+    );
+    
+    this.value = this.formatValueWithTimezone(this.selectedDate);
+    this.changeSubject.next(this);
+    
+    if (!this.enableTime) {
+      this.isOpened = false;
+    }
+  }
+
+  public selectToday(): void {
+    const today = new Date();
+    this.selectedDate = today;
+    this.viewDate = new Date(today);
+    this.selectedHour = today.getHours();
+    this.selectedMinute = today.getMinutes();
+    
+    this.value = this.formatValueWithTimezone(this.selectedDate);
+    this.changeSubject.next(this);
+    
+    if (!this.enableTime) {
+      this.isOpened = false;
+    }
+  }
+
+  public clear(): void {
+    this.value = '';
+    this.selectedDate = null;
+    this.changeSubject.next(this);
+    this.isOpened = false;
+  }
+
+  public previousMonth(): void {
+    this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() - 1, 1);
+  }
+
+  public nextMonth(): void {
+    this.viewDate = new Date(this.viewDate.getFullYear(), this.viewDate.getMonth() + 1, 1);
+  }
+
+  public handleHourInput(e: InputEvent): void {
+    const input = e.target as HTMLInputElement;
+    let value = parseInt(input.value) || 0;
+    
+    if (this.timeFormat === '12h') {
+      value = Math.max(1, Math.min(12, value));
+      // Convert to 24h format
+      if (this.selectedHour >= 12 && value !== 12) {
+        this.selectedHour = value + 12;
+      } else if (this.selectedHour < 12 && value === 12) {
+        this.selectedHour = 0;
+      } else {
+        this.selectedHour = value;
+      }
+    } else {
+      this.selectedHour = Math.max(0, Math.min(23, value));
+    }
+    
+    this.updateSelectedDateTime();
+  }
+
+  public handleMinuteInput(e: InputEvent): void {
+    const input = e.target as HTMLInputElement;
+    let value = parseInt(input.value) || 0;
+    value = Math.max(0, Math.min(59, value));
+    
+    if (this.minuteIncrement && this.minuteIncrement > 1) {
+      value = Math.round(value / this.minuteIncrement) * this.minuteIncrement;
+    }
+    
+    this.selectedMinute = value;
+    this.updateSelectedDateTime();
+  }
+
+  public setAMPM(period: 'am' | 'pm'): void {
+    if (period === 'am' && this.selectedHour >= 12) {
+      this.selectedHour -= 12;
+    } else if (period === 'pm' && this.selectedHour < 12) {
+      this.selectedHour += 12;
+    }
+    this.updateSelectedDateTime();
+  }
+
+  private updateSelectedDateTime(): void {
+    if (this.selectedDate) {
+      this.selectedDate = new Date(
+        this.selectedDate.getFullYear(),
+        this.selectedDate.getMonth(),
+        this.selectedDate.getDate(),
+        this.selectedHour,
+        this.selectedMinute
+      );
+      this.value = this.formatValueWithTimezone(this.selectedDate);
+      this.changeSubject.next(this);
+    }
+  }
+
+  public handleTimezoneChange(e: Event): void {
+    const select = e.target as HTMLSelectElement;
+    this.timezone = select.value;
+    this.updateSelectedDateTime();
+  }
+
+  private formatValueWithTimezone(date: Date): string {
+    if (!this.enableTimezone) {
+      return date.toISOString();
+    }
+    
+    // Format the date with timezone offset
+    const formatter = new Intl.DateTimeFormat('en-US', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+      timeZone: this.timezone,
+      timeZoneName: 'short'
+    });
+    
+    const parts = formatter.formatToParts(date);
+    const dateParts: any = {};
+    parts.forEach(part => {
+      dateParts[part.type] = part.value;
+    });
+    
+    // Create ISO-like format with timezone
+    const isoString = `${dateParts.year}-${dateParts.month}-${dateParts.day}T${dateParts.hour}:${dateParts.minute}:${dateParts.second}`;
+    
+    // Get timezone offset
+    const tzOffset = this.getTimezoneOffset(date, this.timezone);
+    return `${isoString}${tzOffset}`;
+  }
+
+  private getTimezoneOffset(date: Date, timezone: string): string {
+    // Create a date in the target timezone
+    const tzDate = new Date(date.toLocaleString('en-US', { timeZone: timezone }));
+    const utcDate = new Date(date.toLocaleString('en-US', { timeZone: 'UTC' }));
+    
+    const offsetMinutes = (tzDate.getTime() - utcDate.getTime()) / (1000 * 60);
+    const hours = Math.floor(Math.abs(offsetMinutes) / 60);
+    const minutes = Math.abs(offsetMinutes) % 60;
+    const sign = offsetMinutes >= 0 ? '+' : '-';
+    
+    return `${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+  }
+
+  public handleKeydown(e: KeyboardEvent): void {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.toggleCalendar();
+    } else if (e.key === 'Escape' && this.isOpened) {
+      e.preventDefault();
+      this.isOpened = false;
+    }
+  }
+
+  public clearValue(e: Event): void {
+    e.stopPropagation();
+    this.value = '';
+    this.selectedDate = null;
+    this.changeSubject.next(this);
+  }
+
+  public handleManualInput(e: InputEvent): void {
+    const input = e.target as HTMLInputElement;
+    const inputValue = input.value.trim();
+    
+    if (!inputValue) {
+      // Clear the value if input is empty
+      this.value = '';
+      this.selectedDate = null;
+      return;
+    }
+
+    const parsedDate = this.parseManualDate(inputValue);
+    if (parsedDate && !isNaN(parsedDate.getTime())) {
+      // Update internal state without triggering re-render of input
+      this.value = parsedDate.toISOString();
+      this.selectedDate = parsedDate;
+      this.viewDate = new Date(parsedDate);
+      this.selectedHour = parsedDate.getHours();
+      this.selectedMinute = parsedDate.getMinutes();
+      this.changeSubject.next(this);
+    }
+  }
+
+  public handleInputBlur(e: FocusEvent): void {
+    const input = e.target as HTMLInputElement;
+    const inputValue = input.value.trim();
+    
+    if (!inputValue) {
+      this.value = '';
+      this.selectedDate = null;
+      this.changeSubject.next(this);
+      return;
+    }
+
+    const parsedDate = this.parseManualDate(inputValue);
+    if (parsedDate && !isNaN(parsedDate.getTime())) {
+      this.value = parsedDate.toISOString();
+      this.selectedDate = parsedDate;
+      this.viewDate = new Date(parsedDate);
+      this.selectedHour = parsedDate.getHours();
+      this.selectedMinute = parsedDate.getMinutes();
+      this.changeSubject.next(this);
+      // Update the input with formatted date
+      input.value = this.formatDate(this.value);
+    } else {
+      // Revert to previous valid value on blur if parsing failed
+      input.value = this.formatDate(this.value);
+    }
+  }
+
+  private parseManualDate(input: string): Date | null {
+    if (!input) return null;
+
+    // Split date and time parts if present
+    const parts = input.split(' ');
+    let datePart = parts[0];
+    let timePart = parts[1] || '';
+
+    let parsedDate: Date | null = null;
+
+    // Try different date formats
+    // Format 1: YYYY-MM-DD (ISO-like)
+    const isoMatch = datePart.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
+    if (isoMatch) {
+      const [_, year, month, day] = isoMatch;
+      parsedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+    }
+
+    // Format 2: DD.MM.YYYY (European)
+    if (!parsedDate) {
+      const euMatch = datePart.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})$/);
+      if (euMatch) {
+        const [_, day, month, year] = euMatch;
+        parsedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+      }
+    }
+
+    // Format 3: MM/DD/YYYY (US)
+    if (!parsedDate) {
+      const usMatch = datePart.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+      if (usMatch) {
+        const [_, month, day, year] = usMatch;
+        parsedDate = new Date(parseInt(year), parseInt(month) - 1, parseInt(day));
+      }
+    }
+
+    // If no date was parsed, return null
+    if (!parsedDate || isNaN(parsedDate.getTime())) {
+      return null;
+    }
+
+    // Parse time if present (HH:MM format)
+    if (timePart) {
+      const timeMatch = timePart.match(/^(\d{1,2}):(\d{2})$/);
+      if (timeMatch) {
+        const [_, hours, minutes] = timeMatch;
+        parsedDate.setHours(parseInt(hours));
+        parsedDate.setMinutes(parseInt(minutes));
+      }
+    } else if (!this.enableTime) {
+      // If time is not enabled and not provided, use current time
+      const now = new Date();
+      parsedDate.setHours(now.getHours());
+      parsedDate.setMinutes(now.getMinutes());
+      parsedDate.setSeconds(0);
+      parsedDate.setMilliseconds(0);
+    }
+
+    return parsedDate;
+  }
+
+  public getValue(): string {
+    return this.value;
+  }
+
+  public setValue(value: string): void {
+    this.value = value;
+    if (value) {
+      try {
+        const date = new Date(value);
+        if (!isNaN(date.getTime())) {
+          this.selectedDate = date;
+          this.viewDate = new Date(date);
+          this.selectedHour = date.getHours();
+          this.selectedMinute = date.getMinutes();
+        }
+      } catch {
+        // Invalid date
+      }
+    }
+  }
+}

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

@@ -1,8 +1,8 @@
 import { html, css } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
-import './dees-panel.js';
-import './dees-input-datepicker.js';
-import type { DeesInputDatepicker } from './dees-input-datepicker.js';
+import '../dees-panel.js';
+import './component.js';
+import type { DeesInputDatepicker } from './component.js';
 
 export const demoFunc = () => html`
   <style>

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

@@ -0,0 +1,4 @@
+export * from './component.js';
+export { datepickerStyles } from './styles.js';
+export { renderDatepicker } from './template.js';
+export type { IDateEvent } from './types.js';

ts_web/elements/dees-input-datepicker/styles.ts

@@ -0,0 +1,514 @@
+import { css, cssManager } from '@design.estate/dees-element';
+import { DeesInputBase } from '../dees-input-base.js';
+
+export const datepickerStyles = [
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      .input-container {
+        position: relative;
+        width: 100%;
+      }
+
+      .date-input {
+        width: 100%;
+        height: 40px;
+        padding: 0 12px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        border-radius: 6px;
+        font-size: 14px;
+        line-height: 1.5;
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+        cursor: pointer;
+        transition: all 0.2s ease;
+        outline: none;
+        font-family: inherit;
+      }
+
+      .date-input::placeholder {
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+      }
+
+      .date-input:hover:not(:disabled) {
+        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+      }
+
+      .date-input:focus,
+      .date-input.open {
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 11.2%)', 'hsl(210 20% 98%)')};
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')},
+                    0 0 0 4px ${cssManager.bdTheme('hsl(222.2 47.4% 11.2% / 0.1)', 'hsl(210 20% 98% / 0.1)')};
+      }
+
+      .date-input:disabled {
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+        cursor: not-allowed;
+        opacity: 0.5;
+      }
+
+      /* Icon container using flexbox for better positioning */
+      .icon-container {
+        position: absolute;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        padding: 0 12px;
+        pointer-events: none;
+      }
+
+      .icon-container > * {
+        pointer-events: auto;
+      }
+
+      .calendar-icon {
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+        pointer-events: none;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .clear-button {
+        width: 20px;
+        height: 20px;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+        transition: opacity 0.2s ease, background-color 0.2s ease;
+        padding: 0;
+        flex-shrink: 0;
+      }
+
+      .clear-button:hover {
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+      }
+
+      .clear-button:disabled {
+        display: none;
+      }
+
+      /* Calendar Popup Styles */
+      .calendar-popup {
+        will-change: transform, opacity;
+        pointer-events: none;
+        transition: all 0.2s ease;
+        opacity: 0;
+        transform: translateY(-4px);
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        box-shadow: ${cssManager.bdTheme(
+          '0 10px 15px -3px hsl(0 0% 0% / 0.1), 0 4px 6px -4px hsl(0 0% 0% / 0.1)',
+          '0 10px 15px -3px hsl(0 0% 0% / 0.2), 0 4px 6px -4px hsl(0 0% 0% / 0.2)'
+        )};
+        border-radius: 6px;
+        padding: 12px;
+        position: absolute;
+        user-select: none;
+        margin-top: 4px;
+        z-index: 50;
+        left: 0;
+        min-width: 280px;
+      }
+
+      .calendar-popup.top {
+        bottom: calc(100% + 4px);
+        top: auto;
+        margin-top: 0;
+        margin-bottom: 4px;
+        transform: translateY(4px);
+      }
+
+      .calendar-popup.bottom {
+        top: 100%;
+      }
+
+      .calendar-popup.show {
+        pointer-events: all;
+        transform: translateY(0);
+        opacity: 1;
+      }
+
+      /* Calendar Header */
+      .calendar-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 16px;
+        gap: 8px;
+      }
+
+      .month-year-display {
+        font-weight: 500;
+        font-size: 14px;
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+        flex: 1;
+        text-align: center;
+      }
+
+      .nav-button {
+        width: 28px;
+        height: 28px;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        border-radius: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+        transition: all 0.2s ease;
+      }
+
+      .nav-button:hover {
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+      }
+
+      .nav-button:active {
+        background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+      }
+
+      /* Weekday headers */
+      .weekdays {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 0;
+        margin-bottom: 4px;
+      }
+
+      .weekday {
+        text-align: center;
+        font-size: 12px;
+        font-weight: 400;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+        padding: 0 0 8px 0;
+      }
+
+      /* Days grid */
+      .days-grid {
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        gap: 2px;
+      }
+
+      .day {
+        aspect-ratio: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        border-radius: 6px;
+        font-size: 14px;
+        transition: all 0.2s ease;
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+        border: none;
+        width: 36px;
+        height: 36px;
+        background: transparent;
+      }
+
+      .day:hover:not(.disabled) {
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+      }
+
+      .day.other-month {
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+        opacity: 0.5;
+      }
+
+      .day.today {
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+        font-weight: 500;
+      }
+
+      .day.selected {
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 11.2%)', 'hsl(210 20% 98%)')};
+        color: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(222.2 47.4% 11.2%)')};
+        font-weight: 500;
+      }
+
+      .day.disabled {
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+        cursor: not-allowed;
+        opacity: 0.3;
+      }
+
+      /* Event indicators */
+      .day.has-event {
+        position: relative;
+      }
+
+      .event-indicator {
+        position: absolute;
+        bottom: 4px;
+        left: 50%;
+        transform: translateX(-50%);
+        display: flex;
+        gap: 2px;
+        justify-content: center;
+      }
+
+      .event-dot {
+        width: 4px;
+        height: 4px;
+        border-radius: 50%;
+        background: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+      }
+
+      .event-dot.info {
+        background: ${cssManager.bdTheme('hsl(211 70% 52%)', 'hsl(211 70% 62%)')};
+      }
+
+      .event-dot.warning {
+        background: ${cssManager.bdTheme('hsl(45 90% 45%)', 'hsl(45 90% 55%)')};
+      }
+
+      .event-dot.success {
+        background: ${cssManager.bdTheme('hsl(142 69% 45%)', 'hsl(142 69% 55%)')};
+      }
+
+      .event-dot.error {
+        background: ${cssManager.bdTheme('hsl(0 72% 51%)', 'hsl(0 72% 61%)')};
+      }
+
+      .event-count {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        min-width: 16px;
+        height: 16px;
+        padding: 0 4px;
+        background: ${cssManager.bdTheme('hsl(0 72% 51%)', 'hsl(0 72% 61%)')};
+        color: white;
+        border-radius: 8px;
+        font-size: 10px;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+      }
+
+      /* Tooltip for event details */
+      .event-tooltip {
+        position: absolute;
+        bottom: calc(100% + 8px);
+        left: 50%;
+        transform: translateX(-50%);
+        background: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 0%)')};
+        padding: 8px 12px;
+        border-radius: 6px;
+        font-size: 12px;
+        white-space: nowrap;
+        pointer-events: none;
+        opacity: 0;
+        transition: opacity 0.2s ease;
+        z-index: 10;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+      }
+
+      .event-tooltip::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        border: 4px solid transparent;
+        border-top-color: ${cssManager.bdTheme('hsl(0 0% 20%)', 'hsl(0 0% 90%)')};
+      }
+
+      .day.has-event:hover .event-tooltip {
+        opacity: 1;
+      }
+
+      /* Time selector */
+      .time-selector {
+        margin-top: 12px;
+        padding-top: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+      }
+
+      .time-selector-title {
+        font-size: 12px;
+        font-weight: 500;
+        margin-bottom: 8px;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+      }
+
+      .time-inputs {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+
+      .time-input {
+        width: 65px;
+        height: 36px;
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        border-radius: 6px;
+        padding: 0 12px;
+        font-size: 14px;
+        text-align: center;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')};
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+        transition: all 0.2s ease;
+      }
+
+      .time-input:hover {
+        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+      }
+
+      .time-input:focus {
+        outline: none;
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 11.2%)', 'hsl(210 20% 98%)')};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(222.2 47.4% 11.2% / 0.1)', 'hsl(210 20% 98% / 0.1)')};
+      }
+
+      .time-separator {
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+      }
+
+      .am-pm-selector {
+        display: flex;
+        gap: 4px;
+        margin-left: 8px;
+      }
+
+      .am-pm-button {
+        padding: 6px 12px;
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')};
+        border-radius: 6px;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+      }
+
+      .am-pm-button.selected {
+        background: ${cssManager.bdTheme('hsl(222.2 47.4% 11.2%)', 'hsl(210 20% 98%)')};
+        color: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(222.2 47.4% 11.2%)')};
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 11.2%)', 'hsl(210 20% 98%)')};
+      }
+
+      .am-pm-button:hover:not(.selected) {
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+      }
+
+      /* Action buttons */
+      .calendar-actions {
+        display: flex;
+        gap: 8px;
+        margin-top: 12px;
+        padding-top: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+      }
+
+      .action-button {
+        flex: 1;
+        height: 36px;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .today-button {
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+      }
+
+      .today-button:hover {
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+      }
+
+      .today-button:active {
+        background: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+      }
+
+      .clear-button {
+        background: transparent;
+        border: 1px solid transparent;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+      }
+
+      .clear-button:hover {
+        background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.1)', 'hsl(0 62.8% 30.6% / 0.1)')};
+        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
+      }
+
+      .clear-button:active {
+        background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.2)', 'hsl(0 62.8% 30.6% / 0.2)')};
+      }
+
+      /* Timezone selector */
+      .timezone-selector {
+        margin-top: 12px;
+        padding-top: 12px;
+        border-top: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+      }
+
+      .timezone-selector-title {
+        font-size: 12px;
+        font-weight: 500;
+        margin-bottom: 8px;
+        color: ${cssManager.bdTheme('hsl(220 8.9% 46.1%)', 'hsl(215 20.2% 65.1%)')};
+      }
+
+      .timezone-select {
+        width: 100%;
+        height: 36px;
+        border: 1px solid ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        border-radius: 6px;
+        padding: 0 12px;
+        font-size: 14px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(224 71.4% 4.1%)')};
+        color: ${cssManager.bdTheme('hsl(224 71.4% 4.1%)', 'hsl(210 20% 98%)')};
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .timezone-select:hover {
+        border-color: ${cssManager.bdTheme('hsl(214.3 31.8% 91.4%)', 'hsl(217.2 32.6% 17.5%)')};
+        background: ${cssManager.bdTheme('hsl(210 20% 98%)', 'hsl(215 27.9% 16.9%)')};
+      }
+
+      .timezone-select:focus {
+        outline: none;
+        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 11.2%)', 'hsl(210 20% 98%)')};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(222.2 47.4% 11.2% / 0.1)', 'hsl(210 20% 98% / 0.1)')};
+      }
+    `,
+  ];

ts_web/elements/dees-input-datepicker/template.ts

@@ -0,0 +1,179 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesInputDatepicker } from './component.js';
+
+export const renderDatepicker = (component: DeesInputDatepicker): TemplateResult => {
+      const monthNames = [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December'
+      ];
+
+      const weekDays = component.weekStartsOn === 1 
+        ? ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
+        : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+
+      const days = component.getDaysInMonth();
+      const isAM = component.selectedHour < 12;
+      const timezones = component.getTimezones();
+
+      return html`
+        <div class="input-wrapper">
+          <dees-label .label=${component.label} .description=${component.description} .required=${component.required}></dees-label>
+          <div class="input-container">
+            <input
+              type="text"
+              class="date-input ${component.isOpened ? 'open' : ''}"
+              .value=${component.formatDate(component.value)}
+              .placeholder=${component.placeholder}
+              ?disabled=${component.disabled}
+              @click=${component.toggleCalendar}
+              @keydown=${component.handleKeydown}
+              @input=${component.handleManualInput}
+              @blur=${component.handleInputBlur}
+              style="padding-right: ${component.value ? '64px' : '40px'}"
+            />
+            <div class="icon-container">
+              ${component.value && !component.disabled ? html`
+                <button class="clear-button" @click=${component.clearValue} title="Clear">
+                  <dees-icon icon="lucide:x" iconSize="14"></dees-icon>
+                </button>
+              ` : ''}
+              <dees-icon class="calendar-icon" icon="lucide:calendar" iconSize="16"></dees-icon>
+            </div>
+          
+            <!-- Calendar Popup -->
+            <div class="calendar-popup ${component.isOpened ? 'show' : ''} ${component.opensToTop ? 'top' : 'bottom'}">
+              <!-- Month/Year Navigation -->
+              <div class="calendar-header">
+                <button class="nav-button" @click=${component.previousMonth}>
+                  <dees-icon icon="lucide:chevronLeft" iconSize="16"></dees-icon>
+                </button>
+                <div class="month-year-display">
+                  ${monthNames[component.viewDate.getMonth()]} ${component.viewDate.getFullYear()}
+                </div>
+                <button class="nav-button" @click=${component.nextMonth}>
+                  <dees-icon icon="lucide:chevronRight" iconSize="16"></dees-icon>
+                </button>
+              </div>
+
+              <!-- Weekday Headers -->
+              <div class="weekdays">
+                ${weekDays.map(day => html`<div class="weekday">${day}</div>`)}
+              </div>
+
+              <!-- Days Grid -->
+              <div class="days-grid">
+                ${days.map(day => {
+                  const isToday = component.isToday(day);
+                  const isSelected = component.isSelected(day);
+                  const isOtherMonth = day.getMonth() !== component.viewDate.getMonth();
+                  const isDisabled = component.isDisabled(day);
+                  const dayEvents = component.getEventsForDate(day);
+                  const hasEvents = dayEvents.length > 0;
+                  const totalEventCount = dayEvents.reduce((sum, event) => sum + (event.count || 1), 0);
+
+                  return html`
+                    <div 
+                      class="day ${isOtherMonth ? 'other-month' : ''} ${isToday ? 'today' : ''} ${isSelected ? 'selected' : ''} ${isDisabled ? 'disabled' : ''} ${hasEvents ? 'has-event' : ''}"
+                      @click=${() => !isDisabled && component.selectDate(day)}
+                    >
+                      ${day.getDate()}
+                      ${hasEvents ? html`
+                        ${totalEventCount > 3 ? html`
+                          <div class="event-count">${totalEventCount}</div>
+                        ` : html`
+                          <div class="event-indicator">
+                            ${dayEvents.slice(0, 3).map(event => html`
+                              <div class="event-dot ${event.type || 'info'}"></div>
+                            `)}
+                          </div>
+                        `}
+                        ${dayEvents[0].title ? html`
+                          <div class="event-tooltip">
+                            ${dayEvents[0].title}
+                            ${totalEventCount > 1 ? html` (+${totalEventCount - 1} more)` : ''}
+                          </div>
+                        ` : ''}
+                      ` : ''}
+                    </div>
+                  `;
+                })}
+              </div>
+
+              <!-- Time Selector -->
+              ${component.enableTime ? html`
+                <div class="time-selector">
+                  <div class="time-selector-title">Time</div>
+                  <div class="time-inputs">
+                    <input 
+                      type="number" 
+                      class="time-input" 
+                      .value=${component.timeFormat === '12h' 
+                        ? (component.selectedHour === 0 ? 12 : component.selectedHour > 12 ? component.selectedHour - 12 : component.selectedHour).toString().padStart(2, '0')
+                        : component.selectedHour.toString().padStart(2, '0')}
+                      @input=${(e: InputEvent) => component.handleHourInput(e)}
+                      min="${component.timeFormat === '12h' ? 1 : 0}"
+                      max="${component.timeFormat === '12h' ? 12 : 23}"
+                    />
+                    <span class="time-separator">:</span>
+                    <input 
+                      type="number" 
+                      class="time-input" 
+                      .value=${component.selectedMinute.toString().padStart(2, '0')}
+                      @input=${(e: InputEvent) => component.handleMinuteInput(e)}
+                      min="0"
+                      max="59"
+                      step="${component.minuteIncrement || 1}"
+                    />
+                    ${component.timeFormat === '12h' ? html`
+                      <div class="am-pm-selector">
+                        <button 
+                          class="am-pm-button ${isAM ? 'selected' : ''}"
+                          @click=${() => component.setAMPM('am')}
+                        >
+                          AM
+                        </button>
+                        <button 
+                          class="am-pm-button ${!isAM ? 'selected' : ''}"
+                          @click=${() => component.setAMPM('pm')}
+                        >
+                          PM
+                        </button>
+                      </div>
+                    ` : ''}
+                  </div>
+                </div>
+              ` : ''}
+
+              <!-- Timezone Selector -->
+              ${component.enableTimezone ? html`
+                <div class="timezone-selector">
+                  <div class="timezone-selector-title">Timezone</div>
+                  <select 
+                    class="timezone-select" 
+                    .value=${component.timezone}
+                    @change=${(e: Event) => component.handleTimezoneChange(e)}
+                  >
+                    ${timezones.map(tz => html`
+                      <option value="${tz.value}" ?selected=${tz.value === component.timezone}>
+                        ${tz.label}
+                      </option>
+                    `)}
+                  </select>
+                </div>
+              ` : ''}
+
+              <!-- Action Buttons -->
+              <div class="calendar-actions">
+                <button class="action-button today-button" @click=${component.selectToday}>
+                  Today
+                </button>
+                <button class="action-button clear-button" @click=${component.clear}>
+                  Clear
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+  
+};

ts_web/elements/dees-input-datepicker/types.ts

@@ -0,0 +1,7 @@
+export interface IDateEvent {
+  date: string; // ISO date string (YYYY-MM-DD)
+  title?: string;
+  description?: string;
+  type?: 'info' | 'warning' | 'success' | 'error';
+  count?: number; // Number of events on this day
+}

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

@@ -1,204 +0,0 @@
-import { html, css, cssManager } from '@design.estate/dees-element';
-
-export const demoFunc = () => html`
-  <dees-demowrapper>
-    <style>
-      ${css`
-        .demo-container {
-          display: flex;
-          flex-direction: column;
-          gap: 24px;
-          padding: 24px;
-          max-width: 1200px;
-          margin: 0 auto;
-        }
-        
-        .upload-grid {
-          display: grid;
-          grid-template-columns: 1fr 1fr;
-          gap: 24px;
-        }
-        
-        @media (max-width: 768px) {
-          .upload-grid {
-            grid-template-columns: 1fr;
-          }
-        }
-        
-        .upload-box {
-          padding: 16px;
-          background: ${cssManager.bdTheme('#fff', '#2a2a2a')};
-          border-radius: 4px;
-          border: 1px solid ${cssManager.bdTheme('#e0e0e0', '#444')};
-        }
-        
-        .upload-box h4 {
-          margin-top: 0;
-          margin-bottom: 16px;
-          color: ${cssManager.bdTheme('#333', '#fff')};
-          font-size: 16px;
-        }
-        
-        .info-section {
-          margin-top: 32px;
-          padding: 16px;
-          background: ${cssManager.bdTheme('#fff3cd', '#332701')};
-          border: 1px solid ${cssManager.bdTheme('#ffeaa7', '#664400')};
-          border-radius: 4px;
-          color: ${cssManager.bdTheme('#856404', '#ffecb5')};
-        }
-      `}
-    </style>
-    
-    <div class="demo-container">
-      <dees-panel .title=${'1. Basic File Upload'} .subtitle=${'Simple file upload with drag and drop support'}>
-        <dees-input-fileupload
-          .label=${'Attachments'}
-          .description=${'Upload any files by clicking or dragging them here'}
-        ></dees-input-fileupload>
-        
-        <dees-input-fileupload
-          .label=${'Single File Only'}
-          .description=${'Only one file can be uploaded at a time'}
-          .multiple=${false}
-          .buttonText=${'Choose File'}
-        ></dees-input-fileupload>
-      </dees-panel>
-      
-      <dees-panel .title=${'2. File Type Restrictions'} .subtitle=${'Upload areas with specific file type requirements'}>
-        <div class="upload-grid">
-          <div class="upload-box">
-            <h4>Images Only</h4>
-            <dees-input-fileupload
-              .label=${'Profile Picture'}
-              .description=${'JPG, PNG or GIF (max 5MB)'}
-              .accept=${'image/jpeg,image/png,image/gif'}
-              .maxSize=${5 * 1024 * 1024}
-              .multiple=${false}
-              .buttonText=${'Select Image'}
-            ></dees-input-fileupload>
-          </div>
-          
-          <div class="upload-box">
-            <h4>Documents Only</h4>
-            <dees-input-fileupload
-              .label=${'Resume'}
-              .description=${'PDF or Word documents only'}
-              .accept=${".pdf,.doc,.docx,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"}
-              .buttonText=${'Select Document'}
-            ></dees-input-fileupload>
-          </div>
-        </div>
-      </dees-panel>
-      
-      <dees-panel .title=${'3. Validation & Limits'} .subtitle=${'File size limits and validation examples'}>
-        <dees-input-fileupload
-          .label=${'Small Files Only'}
-          .description=${'Maximum file size: 1MB'}
-          .maxSize=${1024 * 1024}
-          .buttonText=${'Upload Small File'}
-        ></dees-input-fileupload>
-        
-        <dees-input-fileupload
-          .label=${'Limited Upload'}
-          .description=${'Maximum 3 files, each up to 2MB'}
-          .maxFiles=${3}
-          .maxSize=${2 * 1024 * 1024}
-        ></dees-input-fileupload>
-        
-        <dees-input-fileupload
-          .label=${'Required Upload'}
-          .description=${'This field is required'}
-          .required=${true}
-        ></dees-input-fileupload>
-      </dees-panel>
-      
-      <dees-panel .title=${'4. States & Styling'} .subtitle=${'Different states and validation feedback'}>
-        <dees-input-fileupload
-          .label=${'Disabled Upload'}
-          .description=${'File upload is currently disabled'}
-          .disabled=${true}
-        ></dees-input-fileupload>
-        
-        <dees-input-fileupload
-          .label=${'Pre-filled Example'}
-          .description=${'Component with pre-loaded files'}
-          .value=${[
-            new File(['Hello World'], 'example.txt', { type: 'text/plain' }),
-            new File(['Test Data'], 'data.json', { type: 'application/json' })
-          ]}
-        ></dees-input-fileupload>
-      </dees-panel>
-      
-      <dees-panel .title=${'5. Form Integration'} .subtitle=${'Complete form with various file upload scenarios'}>
-        <dees-form>
-          <h3 style="margin-top: 0; margin-bottom: 24px; color: ${cssManager.bdTheme('#333', '#fff')};">Job Application Form</h3>
-          
-          <dees-input-text 
-            .label=${'Full Name'} 
-            .required=${true}
-            .key=${'fullName'}
-          ></dees-input-text>
-          
-          <dees-input-text 
-            .label=${'Email'} 
-            .inputType=${'email'} 
-            .required=${true}
-            .key=${'email'}
-          ></dees-input-text>
-          
-          <dees-input-fileupload
-            .label=${'Resume'}
-            .description=${'Required: PDF format only (max 10MB)'}
-            .required=${true}
-            .accept=${'application/pdf'}
-            .maxSize=${10 * 1024 * 1024}
-            .multiple=${false}
-            .key=${'resume'}
-          ></dees-input-fileupload>
-          
-          <dees-input-fileupload
-            .label=${'Portfolio'}
-            .description=${'Optional: Upload up to 5 work samples (images or PDFs, max 5MB each)'}
-            .accept=${'image/*,application/pdf'}
-            .maxFiles=${5}
-            .maxSize=${5 * 1024 * 1024}
-            .key=${'portfolio'}
-          ></dees-input-fileupload>
-          
-          <dees-input-fileupload
-            .label=${'References'}
-            .description=${'Upload reference letters (optional)'}
-            .accept=${".pdf,.doc,.docx"}
-            .key=${'references'}
-          ></dees-input-fileupload>
-          
-          <dees-input-text
-            .label=${'Additional Comments'}
-            .inputType=${'textarea'}
-            .description=${'Any additional information you would like to share'}
-            .key=${'comments'}
-          ></dees-input-text>
-          
-          <dees-form-submit .text=${'Submit Application'}></dees-form-submit>
-        </dees-form>
-        
-        <div class="info-section">
-          <h4 style="margin-top: 0;">Enhanced Features:</h4>
-          <ul style="margin: 0; padding-left: 20px;">
-            <li>Drag & drop with visual feedback</li>
-            <li>File type restrictions via accept attribute</li>
-            <li>File size validation with custom limits</li>
-            <li>Maximum file count restrictions</li>
-            <li>Image preview thumbnails</li>
-            <li>File type-specific icons</li>
-            <li>Clear all button for multiple files</li>
-            <li>Proper validation states and messages</li>
-            <li>Keyboard accessible</li>
-            <li>Single or multiple file modes</li>
-          </ul>
-        </div>
-      </dees-panel>
-    </div>
-  </dees-demowrapper>
-`;

ts_web/elements/dees-input-fileupload.ts

@@ -1,721 +0,0 @@
-import * as colors from './00colors.js';
-import * as plugins from './00plugins.js';
-
-import { DeesContextmenu } from './dees-contextmenu.js';
-import { DeesInputBase } from './dees-input-base.js';
-import { demoFunc } from './dees-input-fileupload.demo.js';
-
-import {
-  customElement,
-  DeesElement,
-  type TemplateResult,
-  property,
-  html,
-  css,
-  unsafeCSS,
-  cssManager,
-  type CSSResult,
-  domtools,
-} from '@design.estate/dees-element';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-input-fileupload': DeesInputFileupload;
-  }
-}
-
-@customElement('dees-input-fileupload')
-export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
-  public static demo = demoFunc;
-
-
-  @property({
-    attribute: false,
-  })
-  public value: File[] = [];
-
-  @property()
-  public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';
-
-  @property({ type: Boolean })
-  private isLoading: boolean = false;
-
-  @property({
-    type: String,
-  })
-  public buttonText: string = 'Upload File...';
-
-  @property({ type: String })
-  public accept: string = '';
-
-  @property({ type: Boolean })
-  public multiple: boolean = true;
-
-  @property({ type: Number })
-  public maxSize: number = 0; // 0 means no limit
-
-  @property({ type: Number })
-  public maxFiles: number = 0; // 0 means no limit
-
-  @property({ type: String, reflect: true })
-  public validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null;
-
-  constructor() {
-    super();
-  }
-
-  public static styles = [
-    ...DeesInputBase.baseStyles,
-    cssManager.defaultStyles,
-    css`
-      :host {
-        position: relative;
-        display: block;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
-      }
-
-      .hidden {
-        display: none;
-      }
-
-      .input-wrapper {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-
-      .maincontainer {
-        position: relative;
-        border-radius: 6px;
-        padding: 16px;
-        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(215 20.2% 11.8%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(215 20.2% 65.1%)', 'hsl(215 20.2% 35.1%)')};
-        transition: all 0.15s ease;
-      }
-
-      .maincontainer:hover {
-        border-color: ${cssManager.bdTheme('hsl(215 20.2% 55.1%)', 'hsl(215 20.2% 45.1%)')};
-      }
-
-      :host([disabled]) .maincontainer {
-        opacity: 0.5;
-        cursor: not-allowed;
-        pointer-events: none;
-      }
-
-      :host([validationState="invalid"]) .maincontainer {
-        border-color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
-      }
-
-      :host([validationState="valid"]) .maincontainer {
-        border-color: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3%)', 'hsl(142.1 76.2% 36.3%)')};
-      }
-
-      :host([validationState="warn"]) .maincontainer {
-        border-color: ${cssManager.bdTheme('hsl(45.4 93.4% 47.5%)', 'hsl(45.4 93.4% 47.5%)')};
-      }
-
-      .maincontainer::after {
-        top: 1px;
-        right: 1px;
-        left: 1px;
-        bottom: 1px;
-        transform: scale3d(0.98, 0.95, 1);
-        position: absolute;
-        content: '';
-        display: block;
-        border: 2px dashed transparent;
-        border-radius: 5px;
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-        pointer-events: none;
-        background: transparent;
-      }
-      
-      .maincontainer.dragOver {
-        border-color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
-        background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.05)', 'hsl(213.1 93.9% 67.8% / 0.05)')};
-      }
-      
-      .maincontainer.dragOver::after {
-        transform: scale3d(1, 1, 1);
-        border: 2px dashed ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
-      }
-
-      .uploadButton {
-        position: relative;
-        padding: 10px 20px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 7.8%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
-        text-align: center;
-        font-size: 14px;
-        font-weight: 500;
-        cursor: pointer;
-        transition: all 0.15s ease;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        line-height: 20px;
-      }
-
-      .uploadButton: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%)')};
-      }
-
-      .uploadButton:active {
-        background: ${cssManager.bdTheme('hsl(0 0% 91%)', 'hsl(0 0% 11%)')};
-      }
-
-      .uploadButton dees-icon {
-        font-size: 16px;
-      }
-
-      .files-container {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-        margin-bottom: 12px;
-      }
-
-      .uploadCandidate {
-        display: grid;
-        grid-template-columns: 40px 1fr auto;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20.2% 16.8%)')};
-        padding: 12px;
-        text-align: left;
-        border-radius: 6px;
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-        cursor: default;
-        transition: all 0.15s ease;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        position: relative;
-        overflow: hidden;
-      }
-
-      .uploadCandidate:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(215 20.2% 20.8%)')};
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
-      }
-
-      .uploadCandidate .icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 20px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-      }
-
-      .uploadCandidate.image-file .icon {
-        color: ${cssManager.bdTheme('hsl(142.1 70.6% 45.3%)', 'hsl(142.1 76.2% 36.3%)')};
-      }
-      
-      .uploadCandidate.pdf-file .icon {
-        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
-      }
-      
-      .uploadCandidate.doc-file .icon {
-        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
-      }
-
-      .uploadCandidate .info {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-        min-width: 0;
-      }
-      
-      .uploadCandidate .filename {
-        font-weight: 500;
-        font-size: 14px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      
-      .uploadCandidate .filesize {
-        font-size: 12px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-      }
-
-      .uploadCandidate .actions {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-
-      .remove-button {
-        width: 32px;
-        height: 32px;
-        border-radius: 4px;
-        background: transparent;
-        border: none;
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all 0.15s ease;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-      }
-
-      .remove-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.1)', 'hsl(0 62.8% 30.6% / 0.1)')};
-        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
-      }
-
-      .clear-all-button {
-        margin-bottom: 8px;
-        text-align: right;
-      }
-
-      .clear-all-button button {
-        background: none;
-        border: none;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        cursor: pointer;
-        font-size: 12px;
-        padding: 4px 8px;
-        border-radius: 4px;
-        transition: all 0.15s ease;
-      }
-
-      .clear-all-button button:hover {
-        background: ${cssManager.bdTheme('hsl(0 72.2% 50.6% / 0.1)', 'hsl(0 62.8% 30.6% / 0.1)')};
-        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
-      }
-
-      .validation-message {
-        font-size: 13px;
-        margin-top: 6px;
-        color: ${cssManager.bdTheme('hsl(0 72.2% 50.6%)', 'hsl(0 62.8% 30.6%)')};
-        line-height: 1.5;
-      }
-
-      .drop-hint {
-        text-align: center;
-        padding: 40px 20px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        font-size: 14px;
-      }
-
-      .drop-hint dees-icon {
-        font-size: 48px;
-        margin-bottom: 16px;
-        opacity: 0.2;
-      }
-
-      .image-preview {
-        width: 40px;
-        height: 40px;
-        object-fit: cover;
-        border-radius: 4px;
-      }
-
-      .description-text {
-        font-size: 13px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
-        margin-top: 6px;
-        line-height: 1.5;
-      }
-
-      /* Loading state styles */
-      .uploadButton.loading {
-        pointer-events: none;
-        opacity: 0.8;
-      }
-
-      .uploadButton .button-content {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-      }
-
-      .loading-spinner {
-        width: 16px;
-        height: 16px;
-        border: 2px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
-        border-top-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
-        border-radius: 50%;
-        animation: spin 0.6s linear infinite;
-      }
-
-      @keyframes spin {
-        to {
-          transform: rotate(360deg);
-        }
-      }
-
-      @keyframes pulse {
-        0% {
-          transform: scale(1);
-          opacity: 1;
-        }
-        50% {
-          transform: scale(1.02);
-          opacity: 0.9;
-        }
-        100% {
-          transform: scale(1);
-          opacity: 1;
-        }
-      }
-
-      .uploadButton.loading {
-        animation: pulse 1s ease-in-out infinite;
-      }
-    `,
-  ];
-
-  public render(): TemplateResult {
-    const hasFiles = this.value.length > 0;
-    const showClearAll = hasFiles && this.value.length > 1;
-    
-    return html`
-      <div class="input-wrapper">
-        ${this.label ? html`
-          <dees-label .label=${this.label}></dees-label>
-        ` : ''}
-        <div class="hidden">
-          <input 
-            type="file" 
-            ?multiple=${this.multiple}
-            accept="${this.accept}"
-          >
-        </div>
-        <div class="maincontainer ${this.state === 'dragOver' ? 'dragOver' : ''}">
-          ${hasFiles ? html`
-            ${showClearAll ? html`
-              <div class="clear-all-button">
-                <button @click=${this.clearAll}>Clear All</button>
-              </div>
-            ` : ''}
-            <div class="files-container">
-              ${this.value.map((fileArg) => {
-                const fileType = this.getFileType(fileArg);
-                const isImage = fileType === 'image';
-                return html`
-                  <div class="uploadCandidate ${fileType}-file">
-                    <div class="icon">
-                      ${isImage && this.canShowPreview(fileArg) ? html`
-                        <img class="image-preview" src="${URL.createObjectURL(fileArg)}" alt="${fileArg.name}">
-                      ` : html`
-                        <dees-icon .icon=${this.getFileIcon(fileArg)}></dees-icon>
-                      `}
-                    </div>
-                    <div class="info">
-                      <div class="filename" title="${fileArg.name}">${fileArg.name}</div>
-                      <div class="filesize">${this.formatFileSize(fileArg.size)}</div>
-                    </div>
-                    <div class="actions">
-                      <button 
-                        class="remove-button" 
-                        @click=${() => this.removeFile(fileArg)}
-                        title="Remove file"
-                      >
-                        <dees-icon .icon=${'lucide:x'}></dees-icon>
-                      </button>
-                    </div>
-                  </div>
-                `;
-              })}
-            </div>
-          ` : html`
-            <div class="drop-hint">
-              <dees-icon .icon=${'lucide:cloud-upload'}></dees-icon>
-              <div>Drag files here or click to browse</div>
-            </div>
-          `}
-          <div class="uploadButton ${this.isLoading ? 'loading' : ''}" @click=${this.openFileSelector}>
-            <div class="button-content">
-              ${this.isLoading ? html`
-                <div class="loading-spinner"></div>
-                <span>Opening...</span>
-              ` : html`
-                <dees-icon .icon=${'lucide:upload'}></dees-icon>
-                ${this.buttonText}
-              `}
-            </div>
-          </div>
-        </div>
-        ${this.description ? html`
-          <div class="description-text">${this.description}</div>
-        ` : ''}
-        ${this.validationState === 'invalid' && this.validationMessage ? html`
-          <div class="validation-message">${this.validationMessage}</div>
-        ` : ''}
-      </div>
-    `;
-  }
-
-  private validationMessage: string = '';
-
-  // Utility methods
-  private formatFileSize(bytes: number): string {
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-    if (bytes === 0) return '0 Bytes';
-    const i = Math.floor(Math.log(bytes) / Math.log(1024));
-    return Math.round(bytes / Math.pow(1024, i) * 100) / 100 + ' ' + sizes[i];
-  }
-
-  private getFileType(file: File): string {
-    const type = file.type.toLowerCase();
-    if (type.startsWith('image/')) return 'image';
-    if (type === 'application/pdf') return 'pdf';
-    if (type.includes('word') || type.includes('document')) return 'doc';
-    if (type.includes('sheet') || type.includes('excel')) return 'spreadsheet';
-    if (type.includes('presentation') || type.includes('powerpoint')) return 'presentation';
-    if (type.startsWith('video/')) return 'video';
-    if (type.startsWith('audio/')) return 'audio';
-    if (type.includes('zip') || type.includes('compressed')) return 'archive';
-    return 'file';
-  }
-
-  private getFileIcon(file: File): string {
-    const type = this.getFileType(file);
-    const iconMap = {
-      'image': 'lucide:image',
-      'pdf': 'lucide:file-text',
-      'doc': 'lucide:file-text',
-      'spreadsheet': 'lucide:table',
-      'presentation': 'lucide:presentation',
-      'video': 'lucide:video',
-      'audio': 'lucide:music',
-      'archive': 'lucide:archive',
-      'file': 'lucide:file'
-    };
-    return iconMap[type] || 'lucide:file';
-  }
-
-  private canShowPreview(file: File): boolean {
-    return file.type.startsWith('image/') && file.size < 5 * 1024 * 1024; // 5MB limit for previews
-  }
-
-  private validateFile(file: File): boolean {
-    // Check file size
-    if (this.maxSize > 0 && file.size > this.maxSize) {
-      this.validationMessage = `File "${file.name}" exceeds maximum size of ${this.formatFileSize(this.maxSize)}`;
-      this.validationState = 'invalid';
-      return false;
-    }
-
-    // Check file type
-    if (this.accept) {
-      const acceptedTypes = this.accept.split(',').map(s => s.trim());
-      let isAccepted = false;
-      
-      for (const acceptType of acceptedTypes) {
-        if (acceptType.startsWith('.')) {
-          // Extension check
-          if (file.name.toLowerCase().endsWith(acceptType.toLowerCase())) {
-            isAccepted = true;
-            break;
-          }
-        } else if (acceptType.endsWith('/*')) {
-          // MIME type wildcard check
-          const mimePrefix = acceptType.slice(0, -2);
-          if (file.type.startsWith(mimePrefix)) {
-            isAccepted = true;
-            break;
-          }
-        } else if (file.type === acceptType) {
-          // Exact MIME type check
-          isAccepted = true;
-          break;
-        }
-      }
-      
-      if (!isAccepted) {
-        this.validationMessage = `File type not accepted. Please upload: ${this.accept}`;
-        this.validationState = 'invalid';
-        return false;
-      }
-    }
-
-    return true;
-  }
-
-  public async openFileSelector() {
-    if (this.disabled || this.isLoading) return;
-    
-    // Set loading state
-    this.isLoading = true;
-    
-    const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
-    
-    // Set up a focus handler to detect when the dialog is closed without selection
-    const handleFocus = () => {
-      setTimeout(() => {
-        // Check if no file was selected
-        if (!inputFile.files || inputFile.files.length === 0) {
-          this.isLoading = false;
-        }
-        window.removeEventListener('focus', handleFocus);
-      }, 300);
-    };
-    
-    window.addEventListener('focus', handleFocus);
-    inputFile.click();
-  }
-
-  private removeFile(file: File) {
-    const index = this.value.indexOf(file);
-    if (index > -1) {
-      this.value.splice(index, 1);
-      this.requestUpdate();
-      this.validate();
-      this.changeSubject.next(this);
-    }
-  }
-
-  private clearAll() {
-    this.value = [];
-    this.requestUpdate();
-    this.validate();
-    this.changeSubject.next(this);
-  }
-
-  public async updateValue(eventArg: Event) {
-    const target: any = eventArg.target;
-    this.value = target.value;
-    this.changeSubject.next(this);
-  }
-
-  public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
-    super.firstUpdated(_changedProperties);
-    const inputFile: HTMLInputElement = this.shadowRoot.querySelector('input[type="file"]');
-    inputFile.addEventListener('change', async (event: Event) => {
-      const target = event.target as HTMLInputElement;
-      const newFiles = Array.from(target.files);
-      
-      // Always reset loading state when file dialog interaction completes
-      this.isLoading = false;
-      
-      await this.addFiles(newFiles);
-      // Reset the input value to allow selecting the same file again if needed
-      target.value = '';
-    });
-
-    // Handle drag and drop
-    const dropArea = this.shadowRoot.querySelector('.maincontainer');
-    const handlerFunction = async (eventArg: DragEvent) => {
-      eventArg.preventDefault();
-      eventArg.stopPropagation();
-      
-      switch (eventArg.type) {
-        case 'dragenter':
-        case 'dragover':
-          this.state = 'dragOver';
-          break;
-        case 'dragleave':
-          // Check if we're actually leaving the drop area
-          const rect = dropArea.getBoundingClientRect();
-          const x = eventArg.clientX;
-          const y = eventArg.clientY;
-          if (x <= rect.left || x >= rect.right || y <= rect.top || y >= rect.bottom) {
-            this.state = 'idle';
-          }
-          break;
-        case 'drop':
-          this.state = 'idle';
-          const files = Array.from(eventArg.dataTransfer.files);
-          await this.addFiles(files);
-          break;
-      }
-    };
-    
-    dropArea.addEventListener('dragenter', handlerFunction, false);
-    dropArea.addEventListener('dragleave', handlerFunction, false);
-    dropArea.addEventListener('dragover', handlerFunction, false);
-    dropArea.addEventListener('drop', handlerFunction, false);
-  }
-
-  private async addFiles(files: File[]) {
-    const filesToAdd: File[] = [];
-    
-    for (const file of files) {
-      if (this.validateFile(file)) {
-        filesToAdd.push(file);
-      }
-    }
-
-    if (filesToAdd.length === 0) return;
-
-    // Check max files limit
-    if (this.maxFiles > 0) {
-      const totalFiles = this.value.length + filesToAdd.length;
-      if (totalFiles > this.maxFiles) {
-        const allowedCount = this.maxFiles - this.value.length;
-        if (allowedCount <= 0) {
-          this.validationMessage = `Maximum ${this.maxFiles} files allowed`;
-          this.validationState = 'invalid';
-          return;
-        }
-        filesToAdd.splice(allowedCount);
-        this.validationMessage = `Only ${allowedCount} more file(s) can be added`;
-        this.validationState = 'warn';
-      }
-    }
-
-    // Add files
-    if (!this.multiple && filesToAdd.length > 0) {
-      this.value = [filesToAdd[0]];
-    } else {
-      this.value.push(...filesToAdd);
-    }
-
-    this.requestUpdate();
-    this.validate();
-    this.changeSubject.next(this);
-    
-    // Update button text
-    if (this.value.length > 0) {
-      this.buttonText = this.multiple ? 'Add more files' : 'Replace file';
-    }
-  }
-
-  public async validate(): Promise<boolean> {
-    this.validationMessage = '';
-    
-    if (this.required && this.value.length === 0) {
-      this.validationState = 'invalid';
-      this.validationMessage = 'Please select at least one file';
-      return false;
-    }
-    
-    // Validate all files
-    for (const file of this.value) {
-      if (!this.validateFile(file)) {
-        return false;
-      }
-    }
-    
-    this.validationState = 'valid';
-    return true;
-  }
-
-  public getValue(): File[] {
-    return this.value;
-  }
-
-  public setValue(value: File[]): void {
-    this.value = value;
-    this.requestUpdate();
-    if (value.length > 0) {
-      this.buttonText = this.multiple ? 'Add more files' : 'Replace file';
-    } else {
-      this.buttonText = 'Upload File...';
-    }
-  }
-
-  public updated(changedProperties: Map<string, any>) {
-    super.updated(changedProperties);
-    
-    if (changedProperties.has('value')) {
-      this.validate();
-    }
-  }
-}

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

@@ -0,0 +1,619 @@
+import { DeesInputBase } from '../dees-input-base.js';
+import { demoFunc } from './demo.js';
+import { fileuploadStyles } from './styles.js';
+import '../dees-icon.js';
+import '../dees-label.js';
+
+import {
+  customElement,
+  html,
+  property,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-fileupload': DeesInputFileupload;
+  }
+}
+
+@customElement('dees-input-fileupload')
+export class DeesInputFileupload extends DeesInputBase<DeesInputFileupload> {
+  public static demo = demoFunc;
+
+  @property({ attribute: false })
+  public value: File[] = [];
+
+  @state()
+  public state: 'idle' | 'dragOver' | 'dropped' | 'uploading' | 'completed' = 'idle';
+
+  @state()
+  public isLoading: boolean = false;
+
+  @property({ type: String })
+  public buttonText: string = 'Select files';
+
+  @property({ type: String })
+  public accept: string = '';
+
+  @property({ type: Boolean })
+  public multiple: boolean = true;
+
+  @property({ type: Number })
+  public maxSize: number = 0; // 0 means no limit
+
+  @property({ type: Number })
+  public maxFiles: number = 0; // 0 means no limit
+
+  @property({ type: String, reflect: true })
+  public validationState: 'valid' | 'invalid' | 'warn' | 'pending' = null;
+
+  public validationMessage: string = '';
+
+  private previewUrlMap: WeakMap<File, string> = new WeakMap();
+  private dropArea: HTMLElement | null = null;
+
+  public static styles = fileuploadStyles;
+
+  public render(): TemplateResult {
+    const acceptedSummary = this.getAcceptedSummary();
+    const metaEntries: string[] = [
+      this.multiple ? 'Multiple files supported' : 'Single file only',
+      this.maxSize > 0 ? `Max ${this.formatFileSize(this.maxSize)}` : 'No size limit',
+    ];
+
+    if (acceptedSummary) {
+      metaEntries.push(`Accepts ${acceptedSummary}`);
+    }
+
+    return html`
+      <div class="input-wrapper">
+        <dees-label
+          .label=${this.label}
+          .description=${this.description}
+          .required=${this.required}
+        ></dees-label>
+        <div
+          class="dropzone ${this.state === 'dragOver' ? 'dropzone--active' : ''} ${this.disabled ? 'dropzone--disabled' : ''} ${this.value.length > 0 ? 'dropzone--has-files' : ''}"
+          role="button"
+          tabindex=${this.disabled ? -1 : 0}
+          aria-disabled=${this.disabled}
+          aria-label=${`Select files${acceptedSummary ? ` (${acceptedSummary})` : ''}`}
+          @click=${this.handleDropzoneClick}
+          @keydown=${this.handleDropzoneKeydown}
+        >
+          <input
+            class="file-input"
+            style="position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; top: 0; left: 0; overflow: hidden;"
+            type="file"
+            ?multiple=${this.multiple}
+            accept=${this.accept || ''}
+            ?disabled=${this.disabled}
+            @change=${this.handleFileInputChange}
+            tabindex="-1"
+          />
+          <div class="dropzone__body">
+            <div class="dropzone__icon">
+              ${this.isLoading
+                ? html`<span class="dropzone__loader" aria-hidden="true"></span>`
+                : html`<dees-icon icon="lucide:FolderOpen"></dees-icon>`}
+            </div>
+            <div class="dropzone__content">
+              <span class="dropzone__headline">${this.buttonText || 'Select files'}</span>
+              <span class="dropzone__subline">
+                Drag and drop files here or
+                <button
+                  type="button"
+                  class="dropzone__browse"
+                  @click=${this.handleBrowseClick}
+                  ?disabled=${this.disabled}
+                >
+                  browse
+                </button>
+              </span>
+            </div>
+          </div>
+          <div class="dropzone__meta">
+            ${metaEntries.map((entry) => html`<span>${entry}</span>`)}
+          </div>
+          ${this.renderFileList()}
+        </div>
+        ${this.validationMessage
+          ? html`<div class="validation-message" aria-live="polite">${this.validationMessage}</div>`
+          : html``}
+      </div>
+    `;
+  }
+
+  private renderFileList(): TemplateResult {
+    if (this.value.length === 0) {
+      return html``;
+    }
+
+    return html`
+      <div class="file-list">
+        <div class="file-list__header">
+          <span>${this.value.length} file${this.value.length === 1 ? '' : 's'} selected</span>
+          ${this.value.length > 0
+            ? html`<button type="button" class="file-list__clear" @click=${this.handleClearAll}>Clear ${this.value.length > 1 ? 'all' : ''}</button>`
+            : html``}
+        </div>
+        <div class="file-list__items">
+          ${this.value.map((file) => this.renderFileRow(file))}
+        </div>
+      </div>
+    `;
+  }
+
+  private renderFileRow(file: File): TemplateResult {
+    const fileType = this.getFileType(file);
+    const previewUrl = this.canShowPreview(file) ? this.getPreviewUrl(file) : null;
+
+    return html`
+      <div class="file-row ${fileType}-file">
+        <div class="file-thumb" aria-hidden="true">
+          ${previewUrl
+            ? html`<img class="thumb-image" src=${previewUrl} alt=${`Preview of ${file.name}`}>`
+            : html`<dees-icon icon=${this.getFileIcon(file)}></dees-icon>`}
+        </div>
+        <div class="file-meta">
+          <div class="file-name" title=${file.name}>${file.name}</div>
+          <div class="file-details">
+            <span class="file-size">${this.formatFileSize(file.size)}</span>
+            ${fileType !== 'file' ? html`<span class="file-type">${fileType}</span>` : html``}
+          </div>
+        </div>
+        <div class="file-actions">
+          <button
+            type="button"
+            class="remove-button"
+            @click=${() => this.removeFile(file)}
+            aria-label=${`Remove ${file.name}`}
+          >
+            <dees-icon icon="lucide:X"></dees-icon>
+          </button>
+        </div>
+      </div>
+    `;
+  }
+
+  private handleFileInputChange = async (event: Event) => {
+    this.isLoading = false;
+    const target = event.target as HTMLInputElement;
+    const files = Array.from(target.files ?? []);
+    if (files.length > 0) {
+      await this.addFiles(files);
+    }
+    target.value = '';
+  };
+
+  private handleDropzoneClick = (event: MouseEvent) => {
+    if (this.disabled) {
+      return;
+    }
+    // Don't open file selector if clicking on the browse button or file list
+    if ((event.target as HTMLElement).closest('.dropzone__browse, .file-list')) {
+      return;
+    }
+    this.openFileSelector();
+  };
+
+  private handleBrowseClick = (event: MouseEvent) => {
+    if (this.disabled) {
+      return;
+    }
+    event.stopPropagation(); // Stop propagation to prevent double trigger
+    this.openFileSelector();
+  };
+
+  private handleDropzoneKeydown = (event: KeyboardEvent) => {
+    if (this.disabled) {
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.openFileSelector();
+    }
+  };
+
+  private handleClearAll = (event: MouseEvent) => {
+    event.preventDefault();
+    this.clearAll();
+  };
+
+  private handleDragEvent = async (event: DragEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.disabled) {
+      return;
+    }
+
+    if (event.type === 'dragenter' || event.type === 'dragover') {
+      if (event.dataTransfer) {
+        event.dataTransfer.dropEffect = 'copy';
+      }
+      this.state = 'dragOver';
+      return;
+    }
+
+    if (event.type === 'dragleave') {
+      if (!this.dropArea) {
+        this.state = 'idle';
+        return;
+      }
+      const rect = this.dropArea.getBoundingClientRect();
+      const { clientX = 0, clientY = 0 } = event;
+      if (clientX <= rect.left || clientX >= rect.right || clientY <= rect.top || clientY >= rect.bottom) {
+        this.state = 'idle';
+      }
+      return;
+    }
+
+    if (event.type === 'drop') {
+      this.state = 'idle';
+      const files = Array.from(event.dataTransfer?.files ?? []);
+      if (files.length > 0) {
+        await this.addFiles(files);
+      }
+    }
+  };
+
+  private attachDropListeners(): void {
+    if (!this.dropArea) {
+      return;
+    }
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+      this.dropArea!.addEventListener(eventName, this.handleDragEvent);
+    });
+  }
+
+  private detachDropListeners(): void {
+    if (!this.dropArea) {
+      return;
+    }
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+      this.dropArea!.removeEventListener(eventName, this.handleDragEvent);
+    });
+  }
+
+  private rebindInteractiveElements(): void {
+    const newDropArea = this.shadowRoot?.querySelector('.dropzone') as HTMLElement | null;
+
+    if (newDropArea !== this.dropArea) {
+      this.detachDropListeners();
+      this.dropArea = newDropArea;
+      this.attachDropListeners();
+    }
+  }
+
+  public formatFileSize(bytes: number): string {
+    const units = ['Bytes', 'KB', 'MB', 'GB'];
+    if (bytes === 0) return '0 Bytes';
+    const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+    const size = bytes / Math.pow(1024, exponent);
+    return `${Math.round(size * 100) / 100} ${units[exponent]}`;
+  }
+
+  public getFileType(file: File): string {
+    const type = file.type.toLowerCase();
+    if (type.startsWith('image/')) return 'image';
+    if (type === 'application/pdf') return 'pdf';
+    if (type.includes('word') || type.includes('document')) return 'doc';
+    if (type.includes('sheet') || type.includes('excel')) return 'spreadsheet';
+    if (type.includes('presentation') || type.includes('powerpoint')) return 'presentation';
+    if (type.startsWith('video/')) return 'video';
+    if (type.startsWith('audio/')) return 'audio';
+    if (type.includes('zip') || type.includes('compressed')) return 'archive';
+    return 'file';
+  }
+
+  public getFileIcon(file: File): string {
+    const fileType = this.getFileType(file);
+    const iconMap: Record<string, string> = {
+      image: 'lucide:FileImage',
+      pdf: 'lucide:FileText',
+      doc: 'lucide:FileText',
+      spreadsheet: 'lucide:FileSpreadsheet',
+      presentation: 'lucide:FileBarChart',
+      video: 'lucide:FileVideo',
+      audio: 'lucide:FileAudio',
+      archive: 'lucide:FileArchive',
+      file: 'lucide:File',
+    };
+    return iconMap[fileType] ?? 'lucide:File';
+  }
+
+  public canShowPreview(file: File): boolean {
+    return file.type.startsWith('image/') && file.size < 5 * 1024 * 1024;
+  }
+
+  private validateFile(file: File): boolean {
+    if (this.maxSize > 0 && file.size > this.maxSize) {
+      this.validationMessage = `File "${file.name}" exceeds the maximum size of ${this.formatFileSize(this.maxSize)}`;
+      this.validationState = 'invalid';
+      return false;
+    }
+
+    if (this.accept) {
+      const acceptedTypes = this.accept
+        .split(',')
+        .map((entry) => entry.trim())
+        .filter((entry) => entry.length > 0);
+
+      if (acceptedTypes.length > 0) {
+        let isAccepted = false;
+        for (const acceptType of acceptedTypes) {
+          if (acceptType.startsWith('.')) {
+            if (file.name.toLowerCase().endsWith(acceptType.toLowerCase())) {
+              isAccepted = true;
+              break;
+            }
+          } else if (acceptType.endsWith('/*')) {
+            const prefix = acceptType.slice(0, -2);
+            if (file.type.startsWith(prefix)) {
+              isAccepted = true;
+              break;
+            }
+          } else if (file.type === acceptType) {
+            isAccepted = true;
+            break;
+          }
+        }
+
+        if (!isAccepted) {
+          this.validationMessage = `File type not accepted. Allowed: ${acceptedTypes.join(', ')}`;
+          this.validationState = 'invalid';
+          return false;
+        }
+      }
+    }
+
+    return true;
+  }
+
+  private getPreviewUrl(file: File): string {
+    let url = this.previewUrlMap.get(file);
+    if (!url) {
+      url = URL.createObjectURL(file);
+      this.previewUrlMap.set(file, url);
+    }
+    return url;
+  }
+
+  private releasePreview(file: File): void {
+    const url = this.previewUrlMap.get(file);
+    if (url) {
+      URL.revokeObjectURL(url);
+      this.previewUrlMap.delete(file);
+    }
+  }
+
+  private getAcceptedSummary(): string | null {
+    if (!this.accept) {
+      return null;
+    }
+
+    const formatted = Array.from(
+      new Set(
+        this.accept
+          .split(',')
+          .map((token) => token.trim())
+          .filter((token) => token.length > 0)
+          .map((token) => this.formatAcceptToken(token))
+      )
+    ).filter(Boolean);
+
+    if (formatted.length === 0) {
+      return null;
+    }
+
+    if (formatted.length === 1) {
+      return formatted[0];
+    }
+
+    if (formatted.length === 2) {
+      return `${formatted[0]}, ${formatted[1]}`;
+    }
+
+    return `${formatted.slice(0, 2).join(', ')}…`;
+  }
+
+  private formatAcceptToken(token: string): string {
+    if (token === '*/*') {
+      return 'All files';
+    }
+
+    if (token.endsWith('/*')) {
+      const family = token.split('/')[0];
+      if (!family) {
+        return 'All files';
+      }
+      return `${family.charAt(0).toUpperCase()}${family.slice(1)} files`;
+    }
+
+    if (token.startsWith('.')) {
+      return token.slice(1).toUpperCase();
+    }
+
+    if (token.includes('pdf')) return 'PDF';
+    if (token.includes('zip')) return 'ZIP';
+    if (token.includes('json')) return 'JSON';
+    if (token.includes('msword')) return 'DOC';
+    if (token.includes('wordprocessingml')) return 'DOCX';
+    if (token.includes('excel')) return 'XLS';
+    if (token.includes('presentation')) return 'PPT';
+
+    const segments = token.split('/');
+    const lastSegment = segments.pop() ?? token;
+    return lastSegment.toUpperCase();
+  }
+
+  private attachLifecycleListeners(): void {
+    this.rebindInteractiveElements();
+  }
+
+  public firstUpdated(changedProperties: Map<string, unknown>) {
+    super.firstUpdated(changedProperties);
+    this.attachLifecycleListeners();
+  }
+
+  public updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+    if (changedProperties.has('value')) {
+      void this.validate();
+    }
+    this.rebindInteractiveElements();
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    this.detachDropListeners();
+    this.value.forEach((file) => this.releasePreview(file));
+    this.previewUrlMap = new WeakMap();
+    await super.disconnectedCallback();
+  }
+
+  public async openFileSelector() {
+    if (this.disabled || this.isLoading) {
+      return;
+    }
+
+    this.isLoading = true;
+
+    // Ensure we have the latest reference to the file input
+    const inputFile = this.shadowRoot?.querySelector('.file-input') as HTMLInputElement | null;
+
+    if (!inputFile) {
+      this.isLoading = false;
+      return;
+    }
+
+    const handleFocus = () => {
+      setTimeout(() => {
+        if (!inputFile.files || inputFile.files.length === 0) {
+          this.isLoading = false;
+        }
+        window.removeEventListener('focus', handleFocus);
+      }, 300);
+    };
+
+    window.addEventListener('focus', handleFocus);
+
+    // Click the input to open file selector
+    inputFile.click();
+  }
+
+  public removeFile(file: File) {
+    const index = this.value.indexOf(file);
+    if (index > -1) {
+      this.releasePreview(file);
+      this.value.splice(index, 1);
+      this.requestUpdate('value');
+      void this.validate();
+      this.changeSubject.next(this);
+    }
+  }
+
+  public clearAll() {
+    const existingFiles = [...this.value];
+    this.value = [];
+    existingFiles.forEach((file) => this.releasePreview(file));
+    this.requestUpdate('value');
+    void this.validate();
+    this.changeSubject.next(this);
+    this.buttonText = 'Select files';
+  }
+
+  public async updateValue(eventArg: Event) {
+    const target = eventArg.target as HTMLInputElement;
+    this.value = Array.from(target.files ?? []);
+    this.changeSubject.next(this);
+  }
+
+  public setValue(value: File[]): void {
+    this.value.forEach((file) => this.releasePreview(file));
+    this.value = value;
+    if (value.length > 0) {
+      this.buttonText = this.multiple ? 'Add more files' : 'Replace file';
+    } else {
+      this.buttonText = 'Select files';
+    }
+    this.requestUpdate('value');
+    void this.validate();
+  }
+
+  public getValue(): File[] {
+    return this.value;
+  }
+
+  private async addFiles(files: File[]) {
+    const filesToAdd: File[] = [];
+
+    for (const file of files) {
+      if (this.validateFile(file)) {
+        filesToAdd.push(file);
+      }
+    }
+
+    if (filesToAdd.length === 0) {
+      this.isLoading = false;
+      return;
+    }
+
+    if (this.maxFiles > 0) {
+      const totalFiles = this.value.length + filesToAdd.length;
+      if (totalFiles > this.maxFiles) {
+        const allowedCount = this.maxFiles - this.value.length;
+        if (allowedCount <= 0) {
+          this.validationMessage = `Maximum ${this.maxFiles} files allowed`;
+          this.validationState = 'invalid';
+          this.isLoading = false;
+          return;
+        }
+        filesToAdd.splice(allowedCount);
+        this.validationMessage = `Only ${allowedCount} more file(s) can be added`;
+        this.validationState = 'warn';
+      }
+    }
+
+    if (!this.multiple && filesToAdd.length > 0) {
+      this.value.forEach((file) => this.releasePreview(file));
+      this.value = [filesToAdd[0]];
+    } else {
+      this.value.push(...filesToAdd);
+    }
+
+    this.validationMessage = '';
+    this.validationState = null;
+    this.requestUpdate('value');
+    await this.validate();
+    this.changeSubject.next(this);
+    this.isLoading = false;
+
+    if (this.value.length > 0) {
+      this.buttonText = this.multiple ? 'Add more files' : 'Replace file';
+    } else {
+      this.buttonText = 'Select files';
+    }
+  }
+
+  public async validate(): Promise<boolean> {
+    this.validationMessage = '';
+
+    if (this.required && this.value.length === 0) {
+      this.validationState = 'invalid';
+      this.validationMessage = 'Please select at least one file';
+      return false;
+    }
+
+    for (const file of this.value) {
+      if (!this.validateFile(file)) {
+        return false;
+      }
+    }
+
+    this.validationState = this.value.length > 0 ? 'valid' : null;
+    return true;
+  }
+}

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

@@ -0,0 +1,159 @@
+import { css, cssManager, html } from '@design.estate/dees-element';
+import './component.js';
+import '../dees-panel.js';
+
+export const demoFunc = () => html`
+  <dees-demowrapper>
+    <style>
+      ${css`
+        .demo-shell {
+          display: flex;
+          flex-direction: column;
+          gap: 32px;
+          padding: 24px;
+          max-width: 1160px;
+          margin: 0 auto;
+        }
+
+        .demo-grid {
+          display: grid;
+          gap: 24px;
+        }
+
+        @media (min-width: 960px) {
+          .demo-grid--two {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+          }
+        }
+
+        .demo-stack {
+          display: flex;
+          flex-direction: column;
+          gap: 18px;
+        }
+
+        .demo-note {
+          margin-top: 16px;
+          padding: 16px;
+          border-radius: 12px;
+          border: 1px solid ${cssManager.bdTheme('hsl(217 91% 90%)', 'hsl(215 20% 26%)')};
+          background: ${cssManager.bdTheme('hsl(213 100% 97%)', 'hsl(215 20% 12%)')};
+          color: ${cssManager.bdTheme('hsl(215 25% 32%)', 'hsl(215 20% 82%)')};
+          font-size: 13px;
+          line-height: 1.55;
+        }
+
+        .demo-note strong {
+          color: ${cssManager.bdTheme('hsl(217 91% 45%)', 'hsl(213 93% 68%)')};
+          font-weight: 600;
+        }
+      `}
+    </style>
+
+    <div class="demo-shell">
+      <dees-panel
+        .title=${'Modern file uploader'}
+        .subtitle=${'Shadcn-inspired layout with drag & drop, previews and validation'}
+      >
+        <div class="demo-grid demo-grid--two">
+          <div class="demo-stack">
+            <dees-input-fileupload
+              .label=${'Attachments'}
+              .description=${'Upload supporting documents for your request'}
+              .accept=${'image/*,.pdf,.zip'}
+              .maxSize=${10 * 1024 * 1024}
+            ></dees-input-fileupload>
+
+            <dees-input-fileupload
+              .label=${'Brand assets'}
+              .description=${'Upload high-resolution imagery (JPG/PNG)'}
+              .accept=${'image/jpeg,image/png'}
+              .multiple=${false}
+              .maxSize=${5 * 1024 * 1024}
+              .buttonText=${'Select cover image'}
+            ></dees-input-fileupload>
+          </div>
+
+          <div class="demo-stack">
+            <dees-input-fileupload
+              .label=${'Audio uploads'}
+              .description=${'Share podcast drafts (MP3/WAV, max 25MB each)'}
+              .accept=${'audio/*'}
+              .maxSize=${25 * 1024 * 1024}
+            ></dees-input-fileupload>
+
+            <dees-input-fileupload
+              .label=${'Disabled example'}
+              .description=${'Uploader is disabled while moderation is pending'}
+              .disabled=${true}
+            ></dees-input-fileupload>
+          </div>
+        </div>
+      </dees-panel>
+
+      <dees-panel
+        .title=${'Form integration'}
+        .subtitle=${'Combine file uploads with the rest of the DEES form ecosystem'}
+      >
+        <div class="demo-grid">
+          <dees-form>
+            <div class="demo-stack">
+              <dees-input-text
+                .label=${'Project name'}
+                .description=${'How should we refer to this project internally?'}
+                .required=${true}
+                .key=${'projectName'}
+              ></dees-input-text>
+
+              <dees-input-text
+                .label=${'Contact email'}
+                .inputType=${'email'}
+                .required=${true}
+                .key=${'contactEmail'}
+              ></dees-input-text>
+
+              <dees-input-fileupload
+                .label=${'Statement of work'}
+                .description=${'Upload a signed statement of work (PDF, max 15MB)'}
+                .required=${true}
+                .accept=${'application/pdf'}
+                .maxSize=${15 * 1024 * 1024}
+                .multiple=${false}
+                .key=${'sow'}
+              ></dees-input-fileupload>
+
+              <dees-input-fileupload
+                .label=${'Creative references'}
+                .description=${'Optional. Upload up to five visual references'}
+                .accept=${'image/*'}
+                .maxFiles=${5}
+                .maxSize=${8 * 1024 * 1024}
+                .key=${'references'}
+              ></dees-input-fileupload>
+
+              <dees-input-text
+                .label=${'Notes'}
+                .description=${'Add optional context for reviewers'}
+                .inputType=${'textarea'}
+                .key=${'notes'}
+              ></dees-input-text>
+
+              <dees-form-submit .text=${'Submit briefing'}></dees-form-submit>
+            </div>
+          </dees-form>
+
+          <div class="demo-note">
+            <strong>Good to know:</strong>
+            <ul>
+              <li>Drag & drop highlights the dropzone and supports keyboard activation.</li>
+              <li>Accepted file types are summarised automatically from the <code>accept</code> attribute.</li>
+              <li>Image uploads show live previews generated via <code>URL.createObjectURL</code>.</li>
+              <li>File size and file-count limits surface inline validation messages.</li>
+              <li>The component stays compatible with <code>dees-form</code> value accessors.</li>
+            </ul>
+          </div>
+        </div>
+      </dees-panel>
+    </div>
+  </dees-demowrapper>
+`;

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

@@ -0,0 +1,2 @@
+export * from './component.js';
+export { fileuploadStyles } from './styles.js';

ts_web/elements/dees-input-fileupload/styles.ts

@@ -0,0 +1,313 @@
+import { css, cssManager } from '@design.estate/dees-element';
+import { DeesInputBase } from '../dees-input-base.js';
+
+export const fileuploadStyles = [
+  cssManager.defaultStyles,
+  ...DeesInputBase.baseStyles,
+  css`
+    :host {
+      position: relative;
+      display: block;
+    }
+
+
+    .input-wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .dropzone {
+      position: relative;
+      padding: 20px;
+      border-radius: 12px;
+      border: 1.5px dashed ${cssManager.bdTheme('hsl(215 16% 80%)', 'hsl(217 20% 25%)')};
+      background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 12%)')};
+      transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
+      cursor: pointer;
+      outline: none;
+    }
+
+    .dropzone:focus-visible {
+      box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(215 20% 12%)')},
+        0 0 0 4px ${cssManager.bdTheme('hsl(217 91% 60% / 0.5)', 'hsl(213 93% 68% / 0.4)')};
+      border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
+    }
+
+    .dropzone--active {
+      border-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
+      box-shadow: 0 12px 32px ${cssManager.bdTheme('rgba(15, 23, 42, 0.12)', 'rgba(0, 0, 0, 0.35)')};
+      background: ${cssManager.bdTheme('hsl(217 91% 60% / 0.06)', 'hsl(213 93% 68% / 0.12)')};
+    }
+
+    .dropzone--has-files {
+      background: ${cssManager.bdTheme('hsl(0 0% 99%)', 'hsl(215 20% 11%)')};
+    }
+
+    .dropzone--disabled {
+      opacity: 0.6;
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+
+    .dropzone__body {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .dropzone__icon {
+      width: 48px;
+      height: 48px;
+      border-radius: 16px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
+      background: ${cssManager.bdTheme('hsl(217 91% 60% / 0.12)', 'hsl(213 93% 68% / 0.12)')};
+      position: relative;
+      flex-shrink: 0;
+    }
+
+    .dropzone__icon dees-icon {
+      font-size: 22px;
+    }
+
+    .dropzone__loader {
+      width: 20px;
+      height: 20px;
+      border-radius: 999px;
+      border: 2px solid ${cssManager.bdTheme('rgba(15, 23, 42, 0.15)', 'rgba(255, 255, 255, 0.15)')};
+      border-top-color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
+      animation: loader-spin 0.6s linear infinite;
+    }
+
+    .dropzone__content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+    }
+
+    .dropzone__headline {
+      font-size: 15px;
+      font-weight: 600;
+      color: ${cssManager.bdTheme('hsl(222 47% 11%)', 'hsl(210 20% 96%)')};
+    }
+
+    .dropzone__subline {
+      font-size: 13px;
+      color: ${cssManager.bdTheme('hsl(215 16% 46%)', 'hsl(215 16% 70%)')};
+    }
+
+    .dropzone__browse {
+      appearance: none;
+      border: none;
+      background: none;
+      padding: 0;
+      margin-left: 4px;
+      color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
+      font-weight: 600;
+      cursor: pointer;
+      text-decoration: none;
+    }
+
+    .dropzone__browse:hover {
+      text-decoration: underline;
+    }
+
+    .dropzone__browse:disabled {
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    .dropzone__meta {
+      margin-top: 14px;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      font-size: 12px;
+      color: ${cssManager.bdTheme('hsl(215 16% 50%)', 'hsl(215 16% 72%)')};
+    }
+
+    .dropzone__meta span {
+      padding: 4px 10px;
+      border-radius: 999px;
+      background: ${cssManager.bdTheme('hsl(217 91% 95%)', 'hsl(213 93% 18%)')};
+      border: 1px solid ${cssManager.bdTheme('hsl(217 91% 90%)', 'hsl(213 93% 24%)')};
+    }
+
+    .file-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 1px solid ${cssManager.bdTheme('hsl(217 91% 90%)', 'hsl(213 93% 24%)')};
+    }
+
+    .file-list__header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 13px;
+      font-weight: 500;
+      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 68%)')};
+    }
+
+    .file-list__clear {
+      appearance: none;
+      border: none;
+      background: none;
+      color: ${cssManager.bdTheme('hsl(217 91% 60%)', 'hsl(213 93% 68%)')};
+      cursor: pointer;
+      font-weight: 500;
+      font-size: 13px;
+      padding: 0;
+    }
+
+    .file-list__clear:hover {
+      text-decoration: underline;
+    }
+
+    .file-list__items {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .file-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 12px;
+      background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.5)', 'hsl(215 20% 16% / 0.5)')};
+      border: 1px solid ${cssManager.bdTheme('hsl(213 27% 92%)', 'hsl(217 25% 26%)')};
+      border-radius: 8px;
+      transition: background 0.15s ease;
+    }
+
+    .file-row:hover {
+      background: ${cssManager.bdTheme('hsl(0 0% 100% / 0.8)', 'hsl(215 20% 16% / 0.8)')};
+    }
+
+    .file-thumb {
+      width: 36px;
+      height: 36px;
+      border-radius: 8px;
+      background: ${cssManager.bdTheme('hsl(214 31% 92%)', 'hsl(217 32% 18%)')};
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      flex-shrink: 0;
+    }
+
+    .file-thumb dees-icon {
+      font-size: 18px;
+      color: ${cssManager.bdTheme('hsl(215 16% 45%)', 'hsl(215 16% 70%)')};
+      display: block;
+      width: 18px;
+      height: 18px;
+      line-height: 1;
+      flex-shrink: 0;
+    }
+
+
+    .thumb-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .file-meta {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+    }
+
+    .file-name {
+      font-weight: 600;
+      font-size: 14px;
+      color: ${cssManager.bdTheme('hsl(222 47% 11%)', 'hsl(210 20% 96%)')};
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .file-details {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+      font-size: 12px;
+      color: ${cssManager.bdTheme('hsl(215 16% 46%)', 'hsl(215 16% 70%)')};
+    }
+
+    .file-size {
+      font-variant-numeric: tabular-nums;
+    }
+
+    .file-type {
+      padding: 2px 8px;
+      border-radius: 999px;
+      border: 1px solid ${cssManager.bdTheme('hsl(214 31% 86%)', 'hsl(217 32% 28%)')};
+      color: ${cssManager.bdTheme('hsl(215 16% 46%)', 'hsl(215 16% 70%)')};
+      text-transform: uppercase;
+      letter-spacing: 0.08em;
+      line-height: 1;
+    }
+
+    .file-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-left: auto;
+    }
+
+    .remove-button {
+      width: 28px;
+      height: 28px;
+      border-radius: 6px;
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
+      color: ${cssManager.bdTheme('hsl(215 16% 52%)', 'hsl(215 16% 68%)')};
+    }
+
+    .remove-button:hover {
+      background: ${cssManager.bdTheme('hsl(0 72% 50% / 0.08)', 'hsl(0 62% 32% / 0.15)')};
+      color: ${cssManager.bdTheme('hsl(0 72% 46%)', 'hsl(0 70% 70%)')};
+    }
+
+    .remove-button:active {
+      transform: scale(0.96);
+    }
+
+    .remove-button dees-icon {
+      display: block;
+      width: 14px;
+      height: 14px;
+      font-size: 14px;
+      line-height: 1;
+      flex-shrink: 0;
+    }
+
+    .validation-message {
+      font-size: 13px;
+      color: ${cssManager.bdTheme('hsl(0 72% 40%)', 'hsl(0 70% 68%)')};
+      line-height: 1.5;
+    }
+
+    @keyframes loader-spin {
+      to {
+        transform: rotate(360deg);
+      }
+    }
+  `,
+];

ts_web/elements/dees-input-richtext.ts

@@ -1,714 +0,0 @@
-import * as colors from './00colors.js';
-import { DeesInputBase } from './dees-input-base.js';
-import { demoFunc } from './dees-input-richtext.demo.js';
-import './dees-icon.js';
-
-import {
-  customElement,
-  type TemplateResult,
-  property,
-  html,
-  css,
-  cssManager,
-  state,
-  query,
-} from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
-
-import { Editor } from '@tiptap/core';
-import StarterKit from '@tiptap/starter-kit';
-import Underline from '@tiptap/extension-underline';
-import TextAlign from '@tiptap/extension-text-align';
-import Link from '@tiptap/extension-link';
-import Typography from '@tiptap/extension-typography';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-input-richtext': DeesInputRichtext;
-  }
-}
-
-interface IToolbarButton {
-  name: string;
-  icon?: string;
-  action?: () => void;
-  isActive?: () => boolean;
-  title: string;
-  isDivider?: boolean;
-}
-
-@customElement('dees-input-richtext')
-export class DeesInputRichtext extends DeesInputBase<string> {
-  public static demo = demoFunc;
-
-  // INSTANCE
-  @property({
-    type: String,
-    reflect: true,
-  })
-  public value: string = '';
-
-  @property({
-    type: String,
-  })
-  public placeholder: string = '';
-
-  @property({
-    type: Boolean,
-  })
-  public showWordCount: boolean = true;
-
-  @property({
-    type: Number,
-  })
-  public minHeight: number = 200;
-
-  @state()
-  private showLinkInput: boolean = false;
-
-  @state()
-  private wordCount: number = 0;
-
-  @query('.editor-content')
-  private editorElement: HTMLElement;
-
-  @query('.link-input input')
-  private linkInputElement: HTMLInputElement;
-
-  private editor: Editor;
-
-  public static styles = [
-    ...DeesInputBase.baseStyles,
-    cssManager.defaultStyles,
-    css`
-      :host {
-        display: block;
-        position: relative;
-        font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      }
-
-      .input-wrapper {
-        position: relative;
-      }
-
-      .label {
-        display: block;
-        margin-bottom: 8px;
-        font-size: 14px;
-        font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
-      }
-
-      .editor-container {
-        display: flex;
-        flex-direction: column;
-        min-height: ${cssManager.bdTheme('200px', '200px')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        overflow: hidden;
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-
-      .editor-container:hover {
-        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
-      }
-
-      .editor-container.focused {
-        border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
-        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
-      }
-
-      .editor-toolbar {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 4px;
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
-        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        align-items: center;
-        position: relative;
-      }
-
-      .toolbar-button {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 32px;
-        height: 32px;
-        border: none;
-        border-radius: 4px;
-        background: transparent;
-        cursor: pointer;
-        font-size: 14px;
-        font-weight: 500;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
-        transition: all 0.15s ease;
-        user-select: none;
-      }
-
-      .toolbar-button dees-icon {
-        width: 16px;
-        height: 16px;
-      }
-
-      .toolbar-button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-      }
-
-      .toolbar-button.active {
-        background: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-      }
-
-      .toolbar-button:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-
-      .toolbar-divider {
-        width: 1px;
-        height: 24px;
-        background: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        margin: 0 4px;
-      }
-
-      .editor-content {
-        flex: 1;
-        padding: 16px;
-        overflow-y: auto;
-        min-height: var(--min-height, 200px);
-      }
-
-      .editor-content .ProseMirror {
-        outline: none;
-        line-height: 1.6;
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
-        min-height: 100%;
-      }
-
-      .editor-content .ProseMirror p {
-        margin: 0.5em 0;
-      }
-
-      .editor-content .ProseMirror p:first-child {
-        margin-top: 0;
-      }
-
-      .editor-content .ProseMirror p:last-child {
-        margin-bottom: 0;
-      }
-
-      .editor-content .ProseMirror h1 {
-        font-size: 2em;
-        font-weight: bold;
-        margin: 1em 0 0.5em 0;
-        line-height: 1.2;
-      }
-
-      .editor-content .ProseMirror h2 {
-        font-size: 1.5em;
-        font-weight: bold;
-        margin: 1em 0 0.5em 0;
-        line-height: 1.3;
-      }
-
-      .editor-content .ProseMirror h3 {
-        font-size: 1.25em;
-        font-weight: bold;
-        margin: 1em 0 0.5em 0;
-        line-height: 1.4;
-      }
-
-      .editor-content .ProseMirror ul,
-      .editor-content .ProseMirror ol {
-        padding-left: 1.5em;
-        margin: 0.5em 0;
-      }
-
-      .editor-content .ProseMirror li {
-        margin: 0.25em 0;
-      }
-
-      .editor-content .ProseMirror blockquote {
-        border-left: 4px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        margin: 1em 0;
-        padding-left: 1em;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
-        font-style: italic;
-      }
-
-      .editor-content .ProseMirror code {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 3px;
-        padding: 0.2em 0.4em;
-        font-family: 'Intel One Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
-        font-size: 0.9em;
-        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
-      }
-
-      .editor-content .ProseMirror pre {
-        background: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(0 0% 3.9%)')};
-        border-radius: 6px;
-        padding: 1em;
-        margin: 1em 0;
-        overflow-x: auto;
-      }
-
-      .editor-content .ProseMirror pre code {
-        background: none;
-        color: inherit;
-        padding: 0;
-        border-radius: 0;
-      }
-
-      .editor-content .ProseMirror a {
-        color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
-        text-decoration: underline;
-        cursor: pointer;
-      }
-
-      .editor-content .ProseMirror a:hover {
-        color: ${cssManager.bdTheme('hsl(222.2 47.4% 41.2%)', 'hsl(217.2 91.2% 69.8%)')};
-      }
-
-      .editor-footer {
-        padding: 8px 12px;
-        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
-        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        font-size: 12px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-
-      .word-count {
-        font-weight: 500;
-      }
-
-      .link-input {
-        display: none;
-        position: absolute;
-        top: 100%;
-        left: 0;
-        right: 0;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
-        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-        padding: 12px;
-        z-index: 1000;
-      }
-
-      .link-input.show {
-        display: block;
-      }
-
-      .link-input input {
-        width: 100%;
-        padding: 8px 12px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 6px;
-        outline: none;
-        font-size: 14px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
-        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-
-      .link-input input:focus {
-        border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
-        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
-      }
-
-      .link-input-buttons {
-        display: flex;
-        gap: 8px;
-        margin-top: 8px;
-      }
-
-      .link-input-buttons button {
-        padding: 6px 12px;
-        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
-        border-radius: 4px;
-        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
-        cursor: pointer;
-        font-size: 12px;
-        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
-        transition: all 0.15s ease;
-        font-weight: 500;
-      }
-
-      .link-input-buttons button:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
-      }
-
-      .link-input-buttons button.primary {
-        background: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
-        color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
-        border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
-      }
-
-      .link-input-buttons button.primary:hover {
-        background: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
-        border-color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
-      }
-
-      .description {
-        margin-top: 8px;
-        font-size: 12px;
-        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
-        line-height: 1.4;
-      }
-
-      :host([disabled]) .editor-container {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
-
-      :host([disabled]) .toolbar-button,
-      :host([disabled]) .editor-content {
-        pointer-events: none;
-      }
-    `,
-  ];
-
-  public render(): TemplateResult {
-    return html`
-      <div class="input-wrapper">
-        ${this.label ? html`<label class="label">${this.label}</label>` : ''}
-        <div class="editor-container ${this.editor?.isFocused ? 'focused' : ''}" style="--min-height: ${this.minHeight}px">
-          <div class="editor-toolbar">
-            ${this.renderToolbar()}
-            <div class="link-input ${this.showLinkInput ? 'show' : ''}">
-              <input type="url" placeholder="Enter URL..." @keydown=${this.handleLinkInputKeydown} />
-              <div class="link-input-buttons">
-                <button class="primary" @click=${this.saveLink}>Save</button>
-                <button @click=${this.removeLink}>Remove</button>
-                <button @click=${this.hideLinkInput}>Cancel</button>
-              </div>
-            </div>
-          </div>
-          <div class="editor-content"></div>
-          ${this.showWordCount
-            ? html`
-                <div class="editor-footer">
-                  <span class="word-count">${this.wordCount} word${this.wordCount !== 1 ? 's' : ''}</span>
-                </div>
-              `
-            : ''}
-        </div>
-        ${this.description ? html`<div class="description">${this.description}</div>` : ''}
-      </div>
-    `;
-  }
-
-  private renderToolbar(): TemplateResult {
-    const buttons: IToolbarButton[] = this.getToolbarButtons();
-
-    return html`
-      ${buttons.map((button) => {
-        if (button.isDivider) {
-          return html`<div class="toolbar-divider"></div>`;
-        }
-        return html`
-          <button
-            class="toolbar-button ${button.isActive?.() ? 'active' : ''}"
-            @click=${button.action}
-            title=${button.title}
-            ?disabled=${this.disabled || !this.editor}
-          >
-            <dees-icon .icon=${button.icon}></dees-icon>
-          </button>
-        `;
-      })}
-    `;
-  }
-
-  private getToolbarButtons(): IToolbarButton[] {
-    if (!this.editor) return [];
-
-    return [
-      {
-        name: 'bold',
-        icon: 'lucide:bold',
-        title: 'Bold (Ctrl+B)',
-        action: () => this.editor.chain().focus().toggleBold().run(),
-        isActive: () => this.editor.isActive('bold'),
-      },
-      {
-        name: 'italic',
-        icon: 'lucide:italic',
-        title: 'Italic (Ctrl+I)',
-        action: () => this.editor.chain().focus().toggleItalic().run(),
-        isActive: () => this.editor.isActive('italic'),
-      },
-      {
-        name: 'underline',
-        icon: 'lucide:underline',
-        title: 'Underline (Ctrl+U)',
-        action: () => this.editor.chain().focus().toggleUnderline().run(),
-        isActive: () => this.editor.isActive('underline'),
-      },
-      {
-        name: 'strike',
-        icon: 'lucide:strikethrough',
-        title: 'Strikethrough',
-        action: () => this.editor.chain().focus().toggleStrike().run(),
-        isActive: () => this.editor.isActive('strike'),
-      },
-      { name: 'divider1', title: '', isDivider: true },
-      {
-        name: 'h1',
-        icon: 'lucide:heading1',
-        title: 'Heading 1',
-        action: () => this.editor.chain().focus().toggleHeading({ level: 1 }).run(),
-        isActive: () => this.editor.isActive('heading', { level: 1 }),
-      },
-      {
-        name: 'h2',
-        icon: 'lucide:heading2',
-        title: 'Heading 2',
-        action: () => this.editor.chain().focus().toggleHeading({ level: 2 }).run(),
-        isActive: () => this.editor.isActive('heading', { level: 2 }),
-      },
-      {
-        name: 'h3',
-        icon: 'lucide:heading3',
-        title: 'Heading 3',
-        action: () => this.editor.chain().focus().toggleHeading({ level: 3 }).run(),
-        isActive: () => this.editor.isActive('heading', { level: 3 }),
-      },
-      { name: 'divider2', title: '', isDivider: true },
-      {
-        name: 'bulletList',
-        icon: 'lucide:list',
-        title: 'Bullet List',
-        action: () => this.editor.chain().focus().toggleBulletList().run(),
-        isActive: () => this.editor.isActive('bulletList'),
-      },
-      {
-        name: 'orderedList',
-        icon: 'lucide:listOrdered',
-        title: 'Numbered List',
-        action: () => this.editor.chain().focus().toggleOrderedList().run(),
-        isActive: () => this.editor.isActive('orderedList'),
-      },
-      {
-        name: 'blockquote',
-        icon: 'lucide:quote',
-        title: 'Quote',
-        action: () => this.editor.chain().focus().toggleBlockquote().run(),
-        isActive: () => this.editor.isActive('blockquote'),
-      },
-      {
-        name: 'code',
-        icon: 'lucide:code',
-        title: 'Code',
-        action: () => this.editor.chain().focus().toggleCode().run(),
-        isActive: () => this.editor.isActive('code'),
-      },
-      {
-        name: 'codeBlock',
-        icon: 'lucide:fileCode',
-        title: 'Code Block',
-        action: () => this.editor.chain().focus().toggleCodeBlock().run(),
-        isActive: () => this.editor.isActive('codeBlock'),
-      },
-      { name: 'divider3', title: '', isDivider: true },
-      {
-        name: 'link',
-        icon: 'lucide:link',
-        title: 'Add Link',
-        action: () => this.toggleLink(),
-        isActive: () => this.editor.isActive('link'),
-      },
-      {
-        name: 'alignLeft',
-        icon: 'lucide:alignLeft',
-        title: 'Align Left',
-        action: () => this.editor.chain().focus().setTextAlign('left').run(),
-        isActive: () => this.editor.isActive({ textAlign: 'left' }),
-      },
-      {
-        name: 'alignCenter',
-        icon: 'lucide:alignCenter',
-        title: 'Align Center',
-        action: () => this.editor.chain().focus().setTextAlign('center').run(),
-        isActive: () => this.editor.isActive({ textAlign: 'center' }),
-      },
-      {
-        name: 'alignRight',
-        icon: 'lucide:alignRight',
-        title: 'Align Right',
-        action: () => this.editor.chain().focus().setTextAlign('right').run(),
-        isActive: () => this.editor.isActive({ textAlign: 'right' }),
-      },
-      { name: 'divider4', title: '', isDivider: true },
-      {
-        name: 'undo',
-        icon: 'lucide:undo',
-        title: 'Undo (Ctrl+Z)',
-        action: () => this.editor.chain().focus().undo().run(),
-      },
-      {
-        name: 'redo',
-        icon: 'lucide:redo',
-        title: 'Redo (Ctrl+Y)',
-        action: () => this.editor.chain().focus().redo().run(),
-      },
-    ];
-  }
-
-  public async firstUpdated() {
-    await this.updateComplete;
-    this.initializeEditor();
-  }
-
-  private initializeEditor(): void {
-    if (this.disabled) return;
-
-    this.editor = new Editor({
-      element: this.editorElement,
-      extensions: [
-        StarterKit.configure({
-          heading: {
-            levels: [1, 2, 3],
-          },
-        }),
-        Underline,
-        TextAlign.configure({
-          types: ['heading', 'paragraph'],
-        }),
-        Link.configure({
-          openOnClick: false,
-          HTMLAttributes: {
-            class: 'editor-link',
-          },
-        }),
-        Typography,
-      ],
-      content: this.value || (this.placeholder ? `<p>${this.placeholder}</p>` : ''),
-      onUpdate: ({ editor }) => {
-        this.value = editor.getHTML();
-        this.updateWordCount();
-        this.dispatchEvent(
-          new CustomEvent('input', {
-            detail: { value: this.value },
-            bubbles: true,
-            composed: true,
-          })
-        );
-        this.dispatchEvent(
-          new CustomEvent('change', {
-            detail: { value: this.value },
-            bubbles: true,
-            composed: true,
-          })
-        );
-      },
-      onSelectionUpdate: () => {
-        this.requestUpdate();
-      },
-      onFocus: () => {
-        this.requestUpdate();
-      },
-      onBlur: () => {
-        this.requestUpdate();
-      },
-    });
-
-    this.updateWordCount();
-  }
-
-  private updateWordCount(): void {
-    if (!this.editor) return;
-    const text = this.editor.getText();
-    this.wordCount = text.trim() ? text.trim().split(/\s+/).length : 0;
-  }
-
-  private toggleLink(): void {
-    if (!this.editor) return;
-
-    if (this.editor.isActive('link')) {
-      const href = this.editor.getAttributes('link').href;
-      this.showLinkInput = true;
-      requestAnimationFrame(() => {
-        if (this.linkInputElement) {
-          this.linkInputElement.value = href || '';
-          this.linkInputElement.focus();
-          this.linkInputElement.select();
-        }
-      });
-    } else {
-      this.showLinkInput = true;
-      requestAnimationFrame(() => {
-        if (this.linkInputElement) {
-          this.linkInputElement.value = '';
-          this.linkInputElement.focus();
-        }
-      });
-    }
-  }
-
-  private saveLink(): void {
-    if (!this.editor || !this.linkInputElement) return;
-
-    const url = this.linkInputElement.value;
-    if (url) {
-      this.editor.chain().focus().setLink({ href: url }).run();
-    }
-    this.hideLinkInput();
-  }
-
-  private removeLink(): void {
-    if (!this.editor) return;
-    this.editor.chain().focus().unsetLink().run();
-    this.hideLinkInput();
-  }
-
-  private hideLinkInput(): void {
-    this.showLinkInput = false;
-    this.editor?.commands.focus();
-  }
-
-  private handleLinkInputKeydown(e: KeyboardEvent): void {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      this.saveLink();
-    } else if (e.key === 'Escape') {
-      e.preventDefault();
-      this.hideLinkInput();
-    }
-  }
-
-  public setValue(value: string): void {
-    this.value = value;
-    if (this.editor && value !== this.editor.getHTML()) {
-      this.editor.commands.setContent(value);
-    }
-  }
-
-  public getValue(): string {
-    return this.value;
-  }
-
-  public clear(): void {
-    this.setValue('');
-  }
-
-  public focus(): void {
-    this.editor?.commands.focus();
-  }
-
-  public async disconnectedCallback(): Promise<void> {
-    await super.disconnectedCallback();
-    if (this.editor) {
-      this.editor.destroy();
-    }
-  }
-}

ts_web/elements/dees-input-richtext/component.ts

@@ -0,0 +1,384 @@
+import { DeesInputBase } from '../dees-input-base.js';
+import { demoFunc } from './demo.js';
+import { richtextStyles } from './styles.js';
+import { renderRichtext } from './template.js';
+import type { IToolbarButton } from './types.js';
+import '../dees-icon.js';
+
+import {
+  customElement,
+  type TemplateResult,
+  property,
+  html,
+  state,
+  query,
+} from '@design.estate/dees-element';
+
+import { Editor } from '@tiptap/core';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import Link from '@tiptap/extension-link';
+import Typography from '@tiptap/extension-typography';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-input-richtext': DeesInputRichtext;
+  }
+}
+
+
+
+@customElement('dees-input-richtext')
+export class DeesInputRichtext extends DeesInputBase<string> {
+  public static demo = demoFunc;
+
+  // INSTANCE
+  @property({
+    type: String,
+    reflect: true,
+  })
+  public value: string = '';
+
+  @property({
+    type: String,
+  })
+  public placeholder: string = '';
+
+  @property({
+    type: Boolean,
+  })
+  public showWordCount: boolean = true;
+
+  @property({
+    type: Number,
+  })
+  public minHeight: number = 200;
+
+  @state()
+  public showLinkInput: boolean = false;
+
+  @state()
+  public wordCount: number = 0;
+
+  @query('.editor-content')
+  private editorElement: HTMLElement;
+
+  @query('.link-input input')
+  private linkInputElement: HTMLInputElement;
+
+  public editor: Editor;
+
+  public static styles = richtextStyles;
+
+  public render(): TemplateResult {
+    return renderRichtext(this);
+  }
+
+
+
+  public renderToolbar(): TemplateResult {
+    const buttons: IToolbarButton[] = this.getToolbarButtons();
+
+    return html`
+      ${buttons.map((button) => {
+        if (button.isDivider) {
+          return html`<div class="toolbar-divider"></div>`;
+        }
+        return html`
+          <button
+            class="toolbar-button ${button.isActive?.() ? 'active' : ''}"
+            @click=${button.action}
+            title=${button.title}
+            ?disabled=${this.disabled || !this.editor}
+          >
+            <dees-icon .icon=${button.icon}></dees-icon>
+          </button>
+        `;
+      })}
+    `;
+  }
+
+  private getToolbarButtons(): IToolbarButton[] {
+    if (!this.editor) return [];
+
+    return [
+      {
+        name: 'bold',
+        icon: 'lucide:bold',
+        title: 'Bold (Ctrl+B)',
+        action: () => this.editor.chain().focus().toggleBold().run(),
+        isActive: () => this.editor.isActive('bold'),
+      },
+      {
+        name: 'italic',
+        icon: 'lucide:italic',
+        title: 'Italic (Ctrl+I)',
+        action: () => this.editor.chain().focus().toggleItalic().run(),
+        isActive: () => this.editor.isActive('italic'),
+      },
+      {
+        name: 'underline',
+        icon: 'lucide:underline',
+        title: 'Underline (Ctrl+U)',
+        action: () => this.editor.chain().focus().toggleUnderline().run(),
+        isActive: () => this.editor.isActive('underline'),
+      },
+      {
+        name: 'strike',
+        icon: 'lucide:strikethrough',
+        title: 'Strikethrough',
+        action: () => this.editor.chain().focus().toggleStrike().run(),
+        isActive: () => this.editor.isActive('strike'),
+      },
+      { name: 'divider1', title: '', isDivider: true },
+      {
+        name: 'h1',
+        icon: 'lucide:heading1',
+        title: 'Heading 1',
+        action: () => this.editor.chain().focus().toggleHeading({ level: 1 }).run(),
+        isActive: () => this.editor.isActive('heading', { level: 1 }),
+      },
+      {
+        name: 'h2',
+        icon: 'lucide:heading2',
+        title: 'Heading 2',
+        action: () => this.editor.chain().focus().toggleHeading({ level: 2 }).run(),
+        isActive: () => this.editor.isActive('heading', { level: 2 }),
+      },
+      {
+        name: 'h3',
+        icon: 'lucide:heading3',
+        title: 'Heading 3',
+        action: () => this.editor.chain().focus().toggleHeading({ level: 3 }).run(),
+        isActive: () => this.editor.isActive('heading', { level: 3 }),
+      },
+      { name: 'divider2', title: '', isDivider: true },
+      {
+        name: 'bulletList',
+        icon: 'lucide:list',
+        title: 'Bullet List',
+        action: () => this.editor.chain().focus().toggleBulletList().run(),
+        isActive: () => this.editor.isActive('bulletList'),
+      },
+      {
+        name: 'orderedList',
+        icon: 'lucide:listOrdered',
+        title: 'Numbered List',
+        action: () => this.editor.chain().focus().toggleOrderedList().run(),
+        isActive: () => this.editor.isActive('orderedList'),
+      },
+      {
+        name: 'blockquote',
+        icon: 'lucide:quote',
+        title: 'Quote',
+        action: () => this.editor.chain().focus().toggleBlockquote().run(),
+        isActive: () => this.editor.isActive('blockquote'),
+      },
+      {
+        name: 'code',
+        icon: 'lucide:code',
+        title: 'Code',
+        action: () => this.editor.chain().focus().toggleCode().run(),
+        isActive: () => this.editor.isActive('code'),
+      },
+      {
+        name: 'codeBlock',
+        icon: 'lucide:fileCode',
+        title: 'Code Block',
+        action: () => this.editor.chain().focus().toggleCodeBlock().run(),
+        isActive: () => this.editor.isActive('codeBlock'),
+      },
+      { name: 'divider3', title: '', isDivider: true },
+      {
+        name: 'link',
+        icon: 'lucide:link',
+        title: 'Add Link',
+        action: () => this.toggleLink(),
+        isActive: () => this.editor.isActive('link'),
+      },
+      {
+        name: 'alignLeft',
+        icon: 'lucide:alignLeft',
+        title: 'Align Left',
+        action: () => this.editor.chain().focus().setTextAlign('left').run(),
+        isActive: () => this.editor.isActive({ textAlign: 'left' }),
+      },
+      {
+        name: 'alignCenter',
+        icon: 'lucide:alignCenter',
+        title: 'Align Center',
+        action: () => this.editor.chain().focus().setTextAlign('center').run(),
+        isActive: () => this.editor.isActive({ textAlign: 'center' }),
+      },
+      {
+        name: 'alignRight',
+        icon: 'lucide:alignRight',
+        title: 'Align Right',
+        action: () => this.editor.chain().focus().setTextAlign('right').run(),
+        isActive: () => this.editor.isActive({ textAlign: 'right' }),
+      },
+      { name: 'divider4', title: '', isDivider: true },
+      {
+        name: 'undo',
+        icon: 'lucide:undo',
+        title: 'Undo (Ctrl+Z)',
+        action: () => this.editor.chain().focus().undo().run(),
+      },
+      {
+        name: 'redo',
+        icon: 'lucide:redo',
+        title: 'Redo (Ctrl+Y)',
+        action: () => this.editor.chain().focus().redo().run(),
+      },
+    ];
+  }
+
+  public async firstUpdated() {
+    await this.updateComplete;
+    this.initializeEditor();
+  }
+
+  private initializeEditor(): void {
+    if (this.disabled) return;
+
+    this.editor = new Editor({
+      element: this.editorElement,
+      extensions: [
+        StarterKit.configure({
+          heading: {
+            levels: [1, 2, 3],
+          },
+        }),
+        Underline,
+        TextAlign.configure({
+          types: ['heading', 'paragraph'],
+        }),
+        Link.configure({
+          openOnClick: false,
+          HTMLAttributes: {
+            class: 'editor-link',
+          },
+        }),
+        Typography,
+      ],
+      content: this.value || (this.placeholder ? `<p>${this.placeholder}</p>` : ''),
+      onUpdate: ({ editor }) => {
+        this.value = editor.getHTML();
+        this.updateWordCount();
+        this.dispatchEvent(
+          new CustomEvent('input', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+          })
+        );
+        this.dispatchEvent(
+          new CustomEvent('change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+          })
+        );
+      },
+      onSelectionUpdate: () => {
+        this.requestUpdate();
+      },
+      onFocus: () => {
+        this.requestUpdate();
+      },
+      onBlur: () => {
+        this.requestUpdate();
+      },
+    });
+
+    this.updateWordCount();
+  }
+
+  private updateWordCount(): void {
+    if (!this.editor) return;
+    const text = this.editor.getText();
+    this.wordCount = text.trim() ? text.trim().split(/\s+/).length : 0;
+  }
+
+  private toggleLink(): void {
+    if (!this.editor) return;
+
+    if (this.editor.isActive('link')) {
+      const href = this.editor.getAttributes('link').href;
+      this.showLinkInput = true;
+      requestAnimationFrame(() => {
+        if (this.linkInputElement) {
+          this.linkInputElement.value = href || '';
+          this.linkInputElement.focus();
+          this.linkInputElement.select();
+        }
+      });
+    } else {
+      this.showLinkInput = true;
+      requestAnimationFrame(() => {
+        if (this.linkInputElement) {
+          this.linkInputElement.value = '';
+          this.linkInputElement.focus();
+        }
+      });
+    }
+  }
+
+  public saveLink(): void {
+    if (!this.editor || !this.linkInputElement) return;
+
+    const url = this.linkInputElement.value;
+    if (url) {
+      this.editor.chain().focus().setLink({ href: url }).run();
+    }
+    this.hideLinkInput();
+  }
+
+  public removeLink(): void {
+    if (!this.editor) return;
+    this.editor.chain().focus().unsetLink().run();
+    this.hideLinkInput();
+  }
+
+  public hideLinkInput(): void {
+    this.showLinkInput = false;
+    this.editor?.commands.focus();
+  }
+
+  public handleLinkInputKeydown(e: KeyboardEvent): void {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      this.saveLink();
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      this.hideLinkInput();
+    }
+  }
+
+  public setValue(value: string): void {
+    this.value = value;
+    if (this.editor && value !== this.editor.getHTML()) {
+      this.editor.commands.setContent(value);
+    }
+  }
+
+  public getValue(): string {
+    return this.value;
+  }
+
+  public clear(): void {
+    this.setValue('');
+  }
+
+  public focus(): void {
+    this.editor?.commands.focus();
+  }
+
+  public async disconnectedCallback(): Promise<void> {
+    await super.disconnectedCallback();
+    if (this.editor) {
+      this.editor.destroy();
+    }
+  }
+}

ts_web/elements/dees-input-richtext/demo.ts

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

ts_web/elements/dees-input-richtext/index.ts

@@ -0,0 +1,4 @@
+export * from './component.js';
+export { richtextStyles } from './styles.js';
+export { renderRichtext } from './template.js';
+export type { IToolbarButton } from './types.js';

ts_web/elements/dees-input-richtext/styles.ts

@@ -0,0 +1,303 @@
+import { css, cssManager } from '@design.estate/dees-element';
+import { DeesInputBase } from '../dees-input-base.js';
+
+export const richtextStyles = [
+    ...DeesInputBase.baseStyles,
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+        font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      }
+
+      .input-wrapper {
+        position: relative;
+      }
+
+      .label {
+        display: block;
+        margin-bottom: 8px;
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+      }
+
+      .editor-container {
+        display: flex;
+        flex-direction: column;
+        min-height: ${cssManager.bdTheme('200px', '200px')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 6px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        overflow: hidden;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .editor-container:hover {
+        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
+      }
+
+      .editor-container.focused {
+        border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
+      }
+
+      .editor-toolbar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+        padding: 8px 12px;
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
+        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        align-items: center;
+        position: relative;
+      }
+
+      .toolbar-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 32px;
+        height: 32px;
+        border: none;
+        border-radius: 4px;
+        background: transparent;
+        cursor: pointer;
+        font-size: 14px;
+        font-weight: 500;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        transition: all 0.15s ease;
+        user-select: none;
+      }
+
+      .toolbar-button dees-icon {
+        width: 16px;
+        height: 16px;
+      }
+
+      .toolbar-button:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+      }
+
+      .toolbar-button.active {
+        background: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+      }
+
+      .toolbar-button:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .toolbar-divider {
+        width: 1px;
+        height: 24px;
+        background: ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        margin: 0 4px;
+      }
+
+      .editor-content {
+        flex: 1;
+        padding: 16px;
+        overflow-y: auto;
+        min-height: var(--min-height, 200px);
+      }
+
+      .editor-content .ProseMirror {
+        outline: none;
+        line-height: 1.6;
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        min-height: 100%;
+      }
+
+      .editor-content .ProseMirror p {
+        margin: 0.5em 0;
+      }
+
+      .editor-content .ProseMirror p:first-child {
+        margin-top: 0;
+      }
+
+      .editor-content .ProseMirror p:last-child {
+        margin-bottom: 0;
+      }
+
+      .editor-content .ProseMirror h1 {
+        font-size: 2em;
+        font-weight: bold;
+        margin: 1em 0 0.5em 0;
+        line-height: 1.2;
+      }
+
+      .editor-content .ProseMirror h2 {
+        font-size: 1.5em;
+        font-weight: bold;
+        margin: 1em 0 0.5em 0;
+        line-height: 1.3;
+      }
+
+      .editor-content .ProseMirror h3 {
+        font-size: 1.25em;
+        font-weight: bold;
+        margin: 1em 0 0.5em 0;
+        line-height: 1.4;
+      }
+
+      .editor-content .ProseMirror ul,
+      .editor-content .ProseMirror ol {
+        padding-left: 1.5em;
+        margin: 0.5em 0;
+      }
+
+      .editor-content .ProseMirror li {
+        margin: 0.25em 0;
+      }
+
+      .editor-content .ProseMirror blockquote {
+        border-left: 4px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        margin: 1em 0;
+        padding-left: 1em;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        font-style: italic;
+      }
+
+      .editor-content .ProseMirror code {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 3px;
+        padding: 0.2em 0.4em;
+        font-family: 'Intel One Mono', 'Fira Code', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+        font-size: 0.9em;
+        color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+      }
+
+      .editor-content .ProseMirror pre {
+        background: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 98%)', 'hsl(0 0% 3.9%)')};
+        border-radius: 6px;
+        padding: 1em;
+        margin: 1em 0;
+        overflow-x: auto;
+      }
+
+      .editor-content .ProseMirror pre code {
+        background: none;
+        color: inherit;
+        padding: 0;
+        border-radius: 0;
+      }
+
+      .editor-content .ProseMirror a {
+        color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
+        text-decoration: underline;
+        cursor: pointer;
+      }
+
+      .editor-content .ProseMirror a:hover {
+        color: ${cssManager.bdTheme('hsl(222.2 47.4% 41.2%)', 'hsl(217.2 91.2% 69.8%)')};
+      }
+
+      .editor-footer {
+        padding: 8px 12px;
+        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
+        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        font-size: 12px;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .word-count {
+        font-weight: 500;
+      }
+
+      .link-input {
+        display: none;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        right: 0;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 6px;
+        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+        padding: 12px;
+        z-index: 1000;
+      }
+
+      .link-input.show {
+        display: block;
+      }
+
+      .link-input input {
+        width: 100%;
+        padding: 8px 12px;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 6px;
+        outline: none;
+        font-size: 14px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .link-input input:focus {
+        border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(0 0% 9% / 0.05)', 'hsl(0 0% 98% / 0.05)')};
+      }
+
+      .link-input-buttons {
+        display: flex;
+        gap: 8px;
+        margin-top: 8px;
+      }
+
+      .link-input-buttons button {
+        padding: 6px 12px;
+        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
+        border-radius: 4px;
+        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
+        cursor: pointer;
+        font-size: 12px;
+        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
+        transition: all 0.15s ease;
+        font-weight: 500;
+      }
+
+      .link-input-buttons button:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
+      }
+
+      .link-input-buttons button.primary {
+        background: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+        color: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 98%)')};
+      }
+
+      .link-input-buttons button.primary:hover {
+        background: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+        border-color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 93.9%)')};
+      }
+
+      .description {
+        margin-top: 8px;
+        font-size: 12px;
+        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
+        line-height: 1.4;
+      }
+
+      :host([disabled]) .editor-container {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+
+      :host([disabled]) .toolbar-button,
+      :host([disabled]) .editor-content {
+        pointer-events: none;
+      }
+    `,
+  ];
+

ts_web/elements/dees-input-richtext/template.ts

@@ -0,0 +1,33 @@
+import { html, type TemplateResult } from '@design.estate/dees-element';
+import type { DeesInputRichtext } from './component.js';
+
+export const renderRichtext = (component: DeesInputRichtext): TemplateResult => {
+      return html`
+        <div class="input-wrapper">
+          ${component.label ? html`<label class="label">${component.label}</label>` : ''}
+          <div class="editor-container ${component.editor?.isFocused ? 'focused' : ''}" style="--min-height: ${component.minHeight}px">
+            <div class="editor-toolbar">
+              ${component.renderToolbar()}
+              <div class="link-input ${component.showLinkInput ? 'show' : ''}">
+                <input type="url" placeholder="Enter URL..." @keydown=${component.handleLinkInputKeydown} />
+                <div class="link-input-buttons">
+                  <button class="primary" @click=${component.saveLink}>Save</button>
+                  <button @click=${component.removeLink}>Remove</button>
+                  <button @click=${component.hideLinkInput}>Cancel</button>
+                </div>
+              </div>
+            </div>
+            <div class="editor-content"></div>
+            ${component.showWordCount
+              ? html`
+                  <div class="editor-footer">
+                    <span class="word-count">${component.wordCount} word${component.wordCount !== 1 ? 's' : ''}</span>
+                  </div>
+                `
+              : ''}
+          </div>
+          ${component.description ? html`<div class="description">${component.description}</div>` : ''}
+        </div>
+      `;
+  
+};

ts_web/elements/dees-input-richtext/types.ts

@@ -0,0 +1,8 @@
+export interface IToolbarButton {
+  name: string;
+  icon?: string;
+  action?: () => void;
+  isActive?: () => boolean;
+  title: string;
+  isDivider?: boolean;
+}

ts_web/elements/dees-input-wysiwyg.demo.ts

@@ -1,8 +1,8 @@
 import { html, css, type TemplateResult } from '@design.estate/dees-element';
 import '@design.estate/dees-wcctools/demotools';
 import './dees-panel.js';
-import type { DeesInputWysiwyg } from './dees-input-wysiwyg.js';
-import type { IBlock } from './wysiwyg/wysiwyg.types.js';
+import type { DeesInputWysiwyg } from './dees-input-wysiwyg/dees-input-wysiwyg.js';
+import type { IBlock } from './dees-input-wysiwyg/wysiwyg.types.js';
 
 interface IDemoEditor {
   basic: DeesInputWysiwyg;
@@ -250,6 +250,30 @@ const setupExportDemo = (container: HTMLElement, editor: DeesInputWysiwyg) => {
   }
 };
 
+const setupOutputFormatDemo = (
+  container: HTMLElement,
+  htmlEditor?: DeesInputWysiwyg,
+  markdownEditor?: DeesInputWysiwyg,
+) => {
+  const htmlBtn = container.querySelector('#btn-show-html-output') as HTMLButtonElement | null;
+  const htmlPreview = container.querySelector('#output-preview-html') as HTMLElement | null;
+  if (htmlBtn && htmlPreview && htmlEditor) {
+    htmlBtn.addEventListener('click', () => {
+      htmlPreview.textContent = htmlEditor.getValue();
+      htmlPreview.classList.add('visible');
+    });
+  }
+
+  const markdownBtn = container.querySelector('#btn-show-markdown-output') as HTMLButtonElement | null;
+  const markdownPreview = container.querySelector('#output-preview-markdown') as HTMLElement | null;
+  if (markdownBtn && markdownPreview && markdownEditor) {
+    markdownBtn.addEventListener('click', () => {
+      markdownPreview.textContent = markdownEditor.getValue();
+      markdownPreview.classList.add('visible');
+    });
+  }
+};
+
 const populateInitialContent = (editors: IDemoEditor) => {
   // Article editor content
   if (editors.article) {
@@ -359,7 +383,10 @@ export const demoFunc = (): TemplateResult => html`
     if (editors.exportDemo) {
       setupExportDemo(elementArg, editors.exportDemo);
     }
-    
+
+    // Setup output format preview buttons
+    setupOutputFormatDemo(elementArg, editors.meeting, editors.recipe);
+
     // Populate initial content
     populateInitialContent(editors);
     
@@ -488,11 +515,46 @@ export const demoFunc = (): TemplateResult => html`
 
       .output-grid {
         display: grid;
-        grid-template-columns: 1fr 1fr;
+        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
         gap: 24px;
         margin-top: 24px;
       }
 
+      .output-card {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .output-actions {
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      .output-preview {
+        display: none;
+        background: rgba(15, 23, 42, 0.04);
+        color: var(--dees-color-text, #0f172a);
+        border: 1px solid rgba(15, 23, 42, 0.1);
+        border-radius: 8px;
+        padding: 16px;
+        white-space: pre-wrap;
+        font-family: 'Geist Mono', 'Fira Code', monospace;
+        font-size: 13px;
+        max-height: 280px;
+        overflow: auto;
+      }
+
+      :host([theme='dark']) .output-preview {
+        background: rgba(250, 250, 250, 0.06);
+        border-color: rgba(250, 250, 250, 0.15);
+        color: var(--dees-color-text, #f4f4f5);
+      }
+
+      .output-preview.visible {
+        display: block;
+      }
+
       @media (max-width: 768px) {
         .output-grid {
           grid-template-columns: 1fr;
@@ -858,7 +920,7 @@ git merge feature-branch
         </p>
         
         <div class="output-grid">
-          <div>
+          <div class="output-card">
             <dees-input-wysiwyg 
               id="editor-meeting"
               label="Meeting Notes" 
@@ -866,9 +928,13 @@ git merge feature-branch
               outputFormat="html"
               value="<h2>Q4 Planning Meeting</h2><p><strong>Date:</strong> December 15, 2024<br><strong>Attendees:</strong> Product Team, Engineering, Design</p><h3>Agenda Items</h3><ol><li>Review Q3 achievements</li><li>Set Q4 objectives</li><li>Resource allocation</li><li>Timeline discussion</li></ol><h3>Key Decisions</h3><ul><li>Launch new dashboard feature by end of January</li><li>Increase engineering team by 2 developers</li><li>Implement weekly design reviews</li></ul><blockquote>&quot;Focus on user experience improvements based on Q3 feedback&quot; - Product Manager</blockquote><h3>Action Items</h3><ul><li>Sarah: Create detailed project timeline</li><li>Mike: Draft technical requirements</li><li>Lisa: Schedule user research sessions</li></ul><hr><p>Next meeting: January 5, 2025</p>"
             ></dees-input-wysiwyg>
+            <div class="output-actions">
+              <button id="btn-show-html-output" class="demo-button">Show HTML Output</button>
+            </div>
+            <pre id="output-preview-html" class="output-preview" aria-live="polite"></pre>
           </div>
           
-          <div>
+          <div class="output-card">
             <dees-input-wysiwyg 
               id="editor-recipe"
               label="Recipe Blog Post" 
@@ -927,6 +993,10 @@ Gradually blend in flour mixture, then stir in chocolate chips. Drop rounded tab
 
 **Yield:** About 5 dozen cookies"
             ></dees-input-wysiwyg>
+            <div class="output-actions">
+              <button id="btn-show-markdown-output" class="demo-button">Show Markdown Output</button>
+            </div>
+            <pre id="output-preview-markdown" class="output-preview" aria-live="polite"></pre>
           </div>
         </div>
       </dees-panel>
@@ -1066,4 +1136,4 @@ POST /api/v2/batch
       </dees-panel>
     </div>
   </dees-demowrapper>
-`;
+`;

ts_web/elements/dees-input-wysiwyg.ts

@@ -1,2 +1,3 @@
-// Re-export the modular component from the wysiwyg directory
-export { DeesInputWysiwyg } from './wysiwyg/dees-input-wysiwyg.js';
+// Re-export the component and related helpers from the dedicated subdirectory
+export { DeesInputWysiwyg } from './dees-input-wysiwyg/dees-input-wysiwyg.js';
+export * from './dees-input-wysiwyg/index.js';

ts_web/elements/dees-input-wysiwyg/dees-input-wysiwyg.ts

@@ -118,6 +118,17 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
   }
 
   async firstUpdated() {
+    if (this.value && this.value.trim().length > 0) {
+      const parsedBlocks =
+        this.outputFormat === 'html'
+          ? WysiwygConverters.parseHtmlToBlocks(this.value)
+          : WysiwygConverters.parseMarkdownToBlocks(this.value);
+
+      if (parsedBlocks.length > 0) {
+        this.blocks = parsedBlocks;
+      }
+    }
+
     this.updateValue();
     this.editorContentRef = this.shadowRoot!.querySelector('.editor-content') as HTMLDivElement;
     
@@ -988,4 +999,4 @@ export class DeesInputWysiwyg extends DeesInputBase<string> {
       this.history.saveCheckpoint(this.blocks, this.selectedBlockId, cursorPosition);
     }
   }
-}
+}

ts_web/elements/dees-input-wysiwyg/index.ts

@@ -15,4 +15,4 @@ export * from './wysiwyg.modalmanager.js';
 export * from './wysiwyg.history.js';
 export * from './dees-wysiwyg-block.js';
 export * from './dees-slash-menu.js';
-export * from './dees-formatting-menu.js';
+export * from './dees-formatting-menu.js';

ts_web/elements/dees-pdf-preview/component.ts

@@ -0,0 +1,537 @@
+import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
+import { PdfManager } from '../dees-pdf-shared/PdfManager.js';
+import { CanvasPool, type PooledCanvas } from '../dees-pdf-shared/CanvasPool.js';
+import { PerformanceMonitor, throttle } from '../dees-pdf-shared/utils.js';
+import { previewStyles } from './styles.js';
+import { demo as demoFunc } from './demo.js';
+import '../dees-icon.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'dees-pdf-preview': DeesPdfPreview;
+  }
+}
+
+@customElement('dees-pdf-preview')
+export class DeesPdfPreview extends DeesElement {
+  public static demo = demoFunc;
+  public static styles = previewStyles;
+
+  @property({ type: String })
+  public pdfUrl: string = '';
+
+  @property({ type: Number })
+  public currentPreviewPage: number = 1;
+
+  @property({ type: Boolean })
+  public clickable: boolean = true;
+
+  @property({ type: Number })
+  private pageCount: number = 0;
+
+  @property({ type: Boolean })
+  private loading: boolean = false;
+
+  @property({ type: Boolean })
+  private rendered: boolean = false;
+
+  @property({ type: Boolean })
+  private error: boolean = false;
+
+  @property({ type: Boolean })
+  private isHovering: boolean = false;
+
+  @property({ type: Boolean })
+  private isA4Format: boolean = true;
+
+  private renderPagesTask: Promise<void> | null = null;
+  private renderPagesQueued: boolean = false;
+
+  private observer: IntersectionObserver;
+  private pdfDocument: any;
+  private canvases: PooledCanvas[] = [];
+  private resizeObserver?: ResizeObserver;
+  private previewContainer: HTMLElement | null = null;
+  private stackElement: HTMLElement | null = null;
+  private loadedPdfUrl: string | null = null;
+
+  constructor() {
+    super();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <div
+        class="preview-container ${this.loading ? 'loading' : ''} ${this.error ? 'error' : ''} ${this.clickable ? 'clickable' : ''}"
+        @click=${this.handleClick}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+        @mousemove=${this.handleMouseMove}
+      >
+        ${this.loading ? html`
+          <div class="preview-loading">
+            <div class="preview-spinner"></div>
+            <div class="preview-text">Loading preview...</div>
+          </div>
+        ` : ''}
+
+        ${this.error ? html`
+          <div class="preview-error">
+            <dees-icon icon="lucide:FileX"></dees-icon>
+            <div class="preview-text">Failed to load PDF</div>
+          </div>
+        ` : ''}
+
+        ${!this.loading && !this.error ? html`
+          <div class="preview-stack ${!this.isA4Format ? 'non-a4' : ''}">
+            <canvas
+              class="preview-canvas"
+              data-page="${this.currentPreviewPage}"
+            ></canvas>
+          </div>
+
+          ${this.pageCount > 1 && this.isHovering ? html`
+            <div class="preview-page-indicator">
+              Page ${this.currentPreviewPage} of ${this.pageCount}
+            </div>
+          ` : ''}
+
+          ${this.pageCount > 0 && !this.isHovering ? html`
+            <div class="preview-info">
+              <dees-icon icon="lucide:FileText"></dees-icon>
+              <span class="preview-pages">${this.pageCount} page${this.pageCount > 1 ? 's' : ''}</span>
+            </div>
+          ` : ''}
+
+          ${this.clickable ? html`
+            <div class="preview-overlay">
+              <dees-icon icon="lucide:Eye"></dees-icon>
+              <span>View PDF</span>
+            </div>
+          ` : ''}
+        ` : ''}
+      </div>
+    `;
+  }
+
+  private handleMouseEnter() {
+    this.isHovering = true;
+  }
+
+  private handleMouseLeave() {
+    this.isHovering = false;
+    // Reset to first page when not hovering
+    if (this.currentPreviewPage !== 1) {
+      this.currentPreviewPage = 1;
+      void this.scheduleRenderPages();
+    }
+  }
+
+  private handleMouseMove(e: MouseEvent) {
+    if (!this.isHovering || this.pageCount <= 1) return;
+
+    const rect = this.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const width = rect.width;
+
+    // Calculate which page to show based on horizontal position
+    const percentage = Math.max(0, Math.min(1, x / width));
+    const newPage = Math.ceil(percentage * this.pageCount) || 1;
+
+    if (newPage !== this.currentPreviewPage) {
+      this.currentPreviewPage = newPage;
+      void this.scheduleRenderPages();
+    }
+  }
+
+  public async connectedCallback() {
+    await super.connectedCallback();
+    this.setupIntersectionObserver();
+    await this.updateComplete;
+    this.cacheElements();
+    this.setupResizeObserver();
+  }
+
+  public async disconnectedCallback() {
+    await super.disconnectedCallback();
+    this.cleanup();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    this.resizeObserver?.disconnect();
+    this.resizeObserver = undefined;
+  }
+
+  private setupIntersectionObserver() {
+    const options = {
+      root: null,
+      rootMargin: '200px',
+      threshold: 0.01,
+    };
+
+    this.observer = new IntersectionObserver(
+      throttle((entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting && !this.rendered && this.pdfUrl) {
+            this.loadAndRenderPreview();
+          } else if (!entry.isIntersecting && this.rendered) {
+            // Optional: Clear canvases when out of view for memory optimization
+            // this.clearCanvases();
+          }
+        }
+      }, 100),
+      options
+    );
+
+    this.observer.observe(this);
+  }
+
+  private async loadAndRenderPreview() {
+    if (this.rendered || this.loading) return;
+
+    this.loading = true;
+    this.error = false;
+    PerformanceMonitor.mark(`preview-load-${this.pdfUrl}`);
+
+    try {
+      this.pdfDocument = await PdfManager.loadDocument(this.pdfUrl);
+      this.pageCount = this.pdfDocument.numPages;
+      this.currentPreviewPage = 1;
+      this.loadedPdfUrl = this.pdfUrl;
+
+      // Force an update to ensure the canvas element is in the DOM
+      this.loading = false;
+      await this.updateComplete;
+      this.cacheElements();
+
+      // Now render the first page
+      await this.scheduleRenderPages();
+
+      this.rendered = true;
+
+      const duration = PerformanceMonitor.measure(`preview-render-${this.pdfUrl}`, `preview-load-${this.pdfUrl}`);
+      console.log(`PDF preview rendered in ${duration}ms`);
+    } catch (error) {
+      console.error('Failed to load PDF preview:', error);
+      this.error = true;
+      this.loading = false;
+    }
+  }
+
+  private scheduleRenderPages(): Promise<void> {
+    if (!this.pdfDocument) {
+      return Promise.resolve();
+    }
+
+    if (this.renderPagesTask) {
+      this.renderPagesQueued = true;
+      return this.renderPagesTask;
+    }
+
+    this.renderPagesTask = (async () => {
+      try {
+        await this.performRenderPages();
+      } catch (error) {
+        console.error('Failed to render PDF preview pages:', error);
+      }
+    })().finally(() => {
+      this.renderPagesTask = null;
+      if (this.renderPagesQueued) {
+        this.renderPagesQueued = false;
+        void this.scheduleRenderPages();
+      }
+    });
+
+    return this.renderPagesTask;
+  }
+
+  private async performRenderPages() {
+    if (!this.pdfDocument) return;
+
+    // Wait a frame to ensure DOM is ready
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
+    const canvas = this.shadowRoot?.querySelector('.preview-canvas') as HTMLCanvasElement;
+    if (!canvas) {
+      console.warn('Preview canvas not found in DOM');
+      return;
+    }
+
+    // Release old canvases
+    this.clearCanvases();
+
+    this.cacheElements();
+
+    // Get available size for the preview
+    const { availableWidth, availableHeight } = this.getAvailableSize();
+
+    try {
+      // Get the page to render
+      const pageNum = this.currentPreviewPage;
+      const page = await this.pdfDocument.getPage(pageNum);
+
+      // Calculate scale to fit within available area while keeping aspect ratio
+      // Use higher scale for sharper rendering
+      const initialViewport = page.getViewport({ scale: 1 });
+
+      // Check if this is standard paper format (A4 or US Letter)
+      const aspectRatio = initialViewport.height / initialViewport.width;
+
+      // Common paper format ratios
+      const a4PortraitRatio = 1.414; // 297mm / 210mm
+      const a4LandscapeRatio = 0.707; // 210mm / 297mm
+      const letterPortraitRatio = 1.294; // 11" / 8.5"
+      const letterLandscapeRatio = 0.773; // 8.5" / 11"
+
+      // Check for standard formats with 5% tolerance
+      const tolerance = 0.05;
+      const isA4Portrait = Math.abs(aspectRatio - a4PortraitRatio) < (a4PortraitRatio * tolerance);
+      const isA4Landscape = Math.abs(aspectRatio - a4LandscapeRatio) < (a4LandscapeRatio * tolerance);
+      const isLetterPortrait = Math.abs(aspectRatio - letterPortraitRatio) < (letterPortraitRatio * tolerance);
+      const isLetterLandscape = Math.abs(aspectRatio - letterLandscapeRatio) < (letterLandscapeRatio * tolerance);
+
+      // Consider it standard format if it matches A4 or US Letter
+      this.isA4Format = isA4Portrait || isA4Landscape || isLetterPortrait || isLetterLandscape;
+
+      // Debug logging
+      console.log(`PDF aspect ratio: ${aspectRatio.toFixed(3)}, standard format: ${this.isA4Format}`)
+
+      // Adjust available size for non-A4 documents (account for padding)
+      const adjustedWidth = this.isA4Format ? availableWidth : availableWidth - 24;
+      const adjustedHeight = this.isA4Format ? availableHeight : availableHeight - 24;
+
+      const scaleX = adjustedWidth > 0 ? adjustedWidth / initialViewport.width : 0;
+      const scaleY = adjustedHeight > 0 ? adjustedHeight / initialViewport.height : 0;
+      // Increase scale by 2x for sharper rendering, but limit to 3.0 max
+      const baseScale = Math.min(scaleX || 0.5, scaleY || scaleX || 0.5);
+      const renderScale = Math.min(baseScale * 2, 3.0);
+
+      if (!Number.isFinite(renderScale) || renderScale <= 0) {
+        page.cleanup?.();
+        return;
+      }
+
+      const viewport = page.getViewport({ scale: renderScale });
+
+      // Acquire canvas from pool
+      const pooledCanvas = CanvasPool.acquire(viewport.width, viewport.height);
+      this.canvases.push(pooledCanvas);
+
+      // Render to pooled canvas first
+      const renderContext = {
+        canvasContext: pooledCanvas.ctx,
+        viewport: viewport,
+      };
+
+      await page.render(renderContext).promise;
+
+      // Transfer to display canvas
+      // Set actual canvas resolution for sharpness
+      canvas.width = viewport.width;
+      canvas.height = viewport.height;
+
+      // Scale down display size to fit the container while keeping high resolution
+      // For A4, fill the container; for non-A4, respect padding
+      const displayWidth = adjustedWidth;
+      const displayHeight = (viewport.height / viewport.width) * adjustedWidth;
+
+      // If it fits height-wise better, scale by height instead
+      if (displayHeight > adjustedHeight) {
+        const altDisplayHeight = adjustedHeight;
+        const altDisplayWidth = (viewport.width / viewport.height) * adjustedHeight;
+        canvas.style.width = `${altDisplayWidth}px`;
+        canvas.style.height = `${altDisplayHeight}px`;
+      } else {
+        canvas.style.width = `${displayWidth}px`;
+        canvas.style.height = `${displayHeight}px`;
+      }
+
+      const ctx = canvas.getContext('2d');
+      if (ctx) {
+        // Enable image smoothing for better quality
+        ctx.imageSmoothingEnabled = true;
+        ctx.imageSmoothingQuality = 'high';
+        ctx.drawImage(pooledCanvas.canvas, 0, 0);
+      }
+
+      // Release page to free memory
+      page.cleanup();
+    } catch (error) {
+      console.error(`Failed to render page ${this.currentPreviewPage}:`, error);
+    }
+  }
+
+  private clearCanvases() {
+    // Release pooled canvases
+    for (const pooledCanvas of this.canvases) {
+      CanvasPool.release(pooledCanvas);
+    }
+    this.canvases = [];
+  }
+
+  private cleanup() {
+    this.clearCanvases();
+
+    if (this.pdfDocument) {
+      PdfManager.releaseDocument(this.loadedPdfUrl ?? this.pdfUrl);
+      this.pdfDocument = null;
+    }
+
+    this.renderPagesQueued = false;
+
+    this.pageCount = 0;
+    this.currentPreviewPage = 1;
+    this.isHovering = false;
+    this.isA4Format = true;
+    this.previewContainer = null;
+    this.stackElement = null;
+    this.loadedPdfUrl = null;
+    this.rendered = false;
+    this.loading = false;
+    this.error = false;
+  }
+
+  private handleClick() {
+    if (!this.clickable) return;
+
+    // Dispatch custom event for parent to handle
+    this.dispatchEvent(new CustomEvent('pdf-preview-click', {
+      detail: {
+        pdfUrl: this.pdfUrl,
+        pageCount: this.pageCount,
+      },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  public async updated(changedProperties: Map<PropertyKey, unknown>) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('pdfUrl') && this.pdfUrl) {
+      const previousUrl = changedProperties.get('pdfUrl') as string | undefined;
+      if (previousUrl) {
+        PdfManager.releaseDocument(previousUrl);
+      }
+      this.cleanup();
+      this.rendered = false;
+      this.currentPreviewPage = 1;
+
+      // Check if in viewport and render if so
+      if (this.observer) {
+        const rect = this.getBoundingClientRect();
+        if (rect.top < window.innerHeight && rect.bottom > 0) {
+          this.loadAndRenderPreview();
+        }
+      }
+    }
+
+    if (changedProperties.has('currentPreviewPage') && this.rendered) {
+      await this.scheduleRenderPages();
+    }
+  }
+
+  /**
+   * Provide context menu items for right-click functionality
+   */
+  public getContextMenuItems() {
+    const items: any[] = [];
+
+    // If clickable, add option to view the PDF
+    if (this.clickable) {
+      items.push({
+        name: 'View PDF',
+        iconName: 'lucide:Eye',
+        action: async () => {
+          this.handleClick();
+        }
+      });
+      items.push({ divider: true });
+    }
+
+    items.push(
+      {
+        name: 'Open PDF in New Tab',
+        iconName: 'lucide:ExternalLink',
+        action: async () => {
+          window.open(this.pdfUrl, '_blank');
+        }
+      },
+      { divider: true },
+      {
+        name: 'Copy PDF URL',
+        iconName: 'lucide:Copy',
+        action: async () => {
+          await navigator.clipboard.writeText(this.pdfUrl);
+        }
+      },
+      {
+        name: 'Download PDF',
+        iconName: 'lucide:Download',
+        action: async () => {
+          const link = document.createElement('a');
+          link.href = this.pdfUrl;
+          link.download = this.pdfUrl.split('/').pop() || 'document.pdf';
+          link.click();
+        }
+      }
+    );
+
+    // Add page count info as a disabled item
+    if (this.pageCount > 0) {
+      items.push(
+        { divider: true },
+        {
+          name: `${this.pageCount} page${this.pageCount > 1 ? 's' : ''}`,
+          iconName: 'lucide:FileText',
+          disabled: true,
+          action: async () => {}
+        }
+      );
+    }
+
+    return items;
+  }
+
+  private cacheElements() {
+    if (!this.previewContainer) {
+      this.previewContainer = this.shadowRoot?.querySelector('.preview-container') as HTMLElement;
+    }
+    if (!this.stackElement) {
+      this.stackElement = this.shadowRoot?.querySelector('.preview-stack') as HTMLElement;
+    }
+  }
+
+  private setupResizeObserver() {
+    if (!this.previewContainer || this.resizeObserver) return;
+
+    this.resizeObserver = new ResizeObserver(() => {
+      if (this.rendered && this.pdfDocument && !this.loading) {
+        void this.scheduleRenderPages();
+      }
+    });
+
+    this.resizeObserver.observe(this);
+  }
+
+  private getAvailableSize() {
+    if (!this.stackElement) {
+      // Try to get the stack element if it's not cached
+      this.stackElement = this.shadowRoot?.querySelector('.preview-stack') as HTMLElement;
+    }
+
+    if (!this.stackElement) {
+      // Fallback to default size if element not found
+      return {
+        availableWidth: 200,  // Full container width
+        availableHeight: 260, // Full container height
+      };
+    }
+
+    const rect = this.stackElement.getBoundingClientRect();
+    const availableWidth = Math.max(rect.width, 0) || 200;
+    const availableHeight = Math.max(rect.height, 0) || 260;
+
+    return { availableWidth, availableHeight };
+  }
+}