!!! Please pay attention to the following points when writing the readme: !!!
* Give a short rundown of components and a few points abputspecific features on each.
* Try to list all components in a summary.
* Then list all components with a short description.

## Chart Components

### dees-chart-area
- Fully functional area chart component using ApexCharts
- Displays time-series data with gradient fills
- Responsive with ResizeObserver (debounced to prevent flicker)
- Fixed: Chart now properly respects container boundaries on initial render
- Overflow prevention with proper CSS containment
- Enhanced demo features:
  - Multiple dataset examples (System Usage, Network Traffic, Sales Analytics)
  - Real-time data simulation with automatic updates
  - Dynamic dataset switching
  - Customizable Y-axis formatters (percentages, currency, units)
  - Data randomization for testing
  - Manual data point addition
- Properties:
  - `label`: Chart title
  - `series`: ApexAxisChartSeries data
  - `yAxisFormatter`: Custom Y-axis label formatter function
- Methods:
  - `updateSeries()`: Update chart data
  - `appendData()`: Add new data points to existing series
- Demo uses global reference to access chart element (window.__demoChartElement)

### dees-chart-log  
- Server log viewer component (not a chart despite the name)
- Terminal-style interface with monospace font
- Supports log levels: debug, info, warn, error, success
- Features:
  - Auto-scroll toggle
  - Clear logs button
  - Colored log levels
  - Timestamp with milliseconds
  - Source labels for log entries
  - Maximum 1000 entries (configurable)
  - Light/dark theme support
- Demo includes realistic server log simulation
- Note: In demos, buttons use `@clicked` event (not `@click`)
- Demo uses global reference to access log element (window.__demoLogElement)

## UI Components

### dees-button-group
- Groups multiple buttons together with a unified background
- Properties:
  - `label`: Optional label text displayed before the buttons
  - `direction`: 'horizontal' | 'vertical' layout
- Features:
  - Light/dark theme support
  - Flexible layout with proper spacing
  - Works with all button types (normal, highlighted, success, danger)
- Use cases:
  - View mode selectors
  - Action grouping
  - Navigation options
  - Filter controls

## Form Components

### dees-input-radio
- Radio button component with proper group behavior
- Properties:
  - `name`: Group name for mutually exclusive selection
  - `key`: Unique identifier for the radio option
  - `value`: Boolean indicating selection state
  - `label`: Display label
- Features:
  - Automatic group management (radios with same name are mutually exclusive)
  - Cannot be deselected by clicking (proper radio behavior)
  - Form integration: Radio groups are collected by name, value is the selected radio's key
  - Works both inside and outside forms
  - Supports disabled state
- Fixed: Radio buttons now properly deselect others in the group on first click
- Note: When using in forms, set both `name` (for grouping) and `key` (for the value)

## WYSIWYG Editor Architecture

### Recent Refactoring (2025-06-24)

The WYSIWYG editor has been refactored to improve maintainability and separation of concerns:

#### New Handler Classes

1. **WysiwygBlockOperations** (`wysiwyg.blockoperations.ts`)
   - Manages all block-related operations
   - Methods: createBlock, insertBlockAfter, removeBlock, findBlock, focusBlock, etc.
   - Centralized block manipulation logic

2. **WysiwygInputHandler** (`wysiwyg.inputhandler.ts`)
   - Handles all input events for blocks
   - Manages block content updates based on type
   - Detects block type transformations
   - Handles slash commands
   - Manages auto-save with debouncing

3. **WysiwygKeyboardHandler** (`wysiwyg.keyboardhandler.ts`)
   - Handles all keyboard events
   - Manages formatting shortcuts (Cmd/Ctrl + B/I/U/K)
   - Handles special keys: Tab, Enter, Backspace
   - Manages slash menu navigation

4. **WysiwygDragDropHandler** (`wysiwyg.dragdrophandler.ts`)
   - Manages drag and drop operations
   - Tracks drag state
   - Handles visual feedback during drag
   - Manages block reordering

5. **WysiwygModalManager** (`wysiwyg.modalmanager.ts`)
   - Static methods for showing modals
   - Language selection for code blocks
   - Block settings modal
   - Reusable modal patterns

#### Main Component Updates

The main `DeesInputWysiwyg` component now:
- Instantiates handler classes in `connectedCallback`
- Delegates complex operations to appropriate handlers
- Maintains cleaner, more focused code
- Better separation of concerns

#### Benefits
- Reduced main component size from 1100+ lines
- Each handler class is focused on a single responsibility
- Easier to test individual components
- Better code organization
- Improved maintainability

#### Fixed Issues
- Enter key no longer duplicates content in new blocks
- Removed problematic `setBlockContents()` method
- Content is now managed directly through DOM properties
- Better timing for block creation and focus

#### Notes
- Some old methods remain in the main component for backwards compatibility
- These can be removed in a future cleanup once all references are updated
- The refactoring maintains all existing functionality