feat: Phase 1 complete + Task 2.1 User Stats Widget

Phase 1 Foundation:
- DashboardManager: Complete orchestrator for all Epic 1 systems (572 lines)
- WidgetBase: Common utilities for widget development (498 lines)

Task 2.1 User Stats Widget:
- Extracted and refactored from renderUserStats()
- Clean vanilla JS implementation (408 lines)
- Editable stat values with live updates
- Progress bars with configurable colors
- User portrait, name, and level display
- Classic D&D stats (STR/DEX/CON/INT/WIS/CHA) with +/- buttons
- Fully configurable (show/hide sections, visible stats)
- Mobile-responsive with layout adjustments
- No jQuery dependencies

Dashboard Manager features:
- Widget lifecycle management (add/remove/update)
- Tab coordination with TabManager
- Drag/drop and resize integration
- Edit mode management
- Layout persistence (save/load/export/import)
- Auto-save with debouncing
- Event-driven architecture

Epic 2 progress: 1/4 core widgets complete

src/systems/dashboard/dashboardManager.js

@@ -0,0 +1,773 @@
+/**
+ * Dashboard Manager
+ *
+ * Orchestrates the complete dashboard system by integrating:
+ * - GridEngine (positioning)
+ * - WidgetRegistry (widget definitions)
+ * - TabManager (multi-tab support)
+ * - DragDropHandler (drag widgets)
+ * - ResizeHandler (resize widgets)
+ * - EditModeManager (edit/view modes)
+ * - LayoutPersistence (save/load)
+ *
+ * Provides high-level API for widget and tab management.
+ */
+
+import { GridEngine } from './gridEngine.js';
+import { WidgetRegistry } from './widgetRegistry.js';
+import { TabManager } from './tabManager.js';
+import { DragDropHandler } from './dragDrop.js';
+import { ResizeHandler } from './resizeHandler.js';
+import { EditModeManager } from './editModeManager.js';
+import { LayoutPersistence } from './layoutPersistence.js';
+
+/**
+ * @typedef {Object} DashboardConfig
+ * @property {number} columns - Grid column count (default: 12)
+ * @property {number} rowHeight - Grid row height in pixels (default: 80)
+ * @property {number} gap - Gap between widgets in pixels (default: 12)
+ * @property {number} debounceMs - Auto-save debounce delay (default: 500)
+ * @property {Function} onSave - Callback when layout saved
+ * @property {Function} onLoad - Callback when layout loaded
+ * @property {Function} onError - Callback on errors
+ */
+
+/**
+ * DashboardManager - Complete dashboard system orchestrator
+ */
+export class DashboardManager {
+    /**
+     * @param {HTMLElement} container - Main dashboard container element
+     * @param {DashboardConfig} config - Configuration options
+     */
+    constructor(container, config = {}) {
+        if (!container) {
+            throw new Error('[DashboardManager] Container element is required');
+        }
+
+        this.container = container;
+        this.config = {
+            columns: config.columns || 12,
+            rowHeight: config.rowHeight || 80,
+            gap: config.gap || 12,
+            debounceMs: config.debounceMs || 500,
+            onSave: config.onSave,
+            onLoad: config.onLoad,
+            onError: config.onError,
+            ...config
+        };
+
+        // Dashboard state
+        this.currentTabId = null;
+        this.widgets = new Map(); // widgetId => { widget data, element, tab }
+        this.defaultLayout = null;
+
+        // System instances
+        this.gridEngine = null;
+        this.registry = null;
+        this.tabManager = null;
+        this.dragHandler = null;
+        this.resizeHandler = null;
+        this.editManager = null;
+        this.persistence = null;
+
+        // Container elements
+        this.gridContainer = null;
+        this.tabContainer = null;
+
+        this.changeListeners = new Set();
+
+        console.log('[DashboardManager] Initialized');
+    }
+
+    /**
+     * Initialize all dashboard systems
+     */
+    async init() {
+        console.log('[DashboardManager] Initializing systems...');
+
+        // Create container structure
+        this.createContainerStructure();
+
+        // Initialize Grid Engine
+        this.gridEngine = new GridEngine({
+            columns: this.config.columns,
+            rowHeight: this.config.rowHeight,
+            gap: this.config.gap,
+            container: this.gridContainer
+        });
+
+        // Initialize Widget Registry
+        this.registry = new WidgetRegistry();
+
+        // Initialize Tab Manager
+        this.tabManager = new TabManager({
+            onTabChange: (tabId) => this.onTabChange(tabId),
+            onTabCreate: (tab) => this.onTabCreate(tab),
+            onTabDelete: (tabId) => this.onTabDelete(tabId),
+            onTabRename: (tabId, newName) => this.onTabRename(tabId, newName),
+            onTabReorder: (fromIndex, toIndex) => this.onTabReorder(fromIndex, toIndex)
+        });
+
+        // Initialize Drag & Drop
+        this.dragHandler = new DragDropHandler(this.gridEngine, {
+            showGrid: true,
+            enableSnap: true
+        });
+
+        // Initialize Resize Handler
+        this.resizeHandler = new ResizeHandler(this.gridEngine, {
+            minWidth: 2,
+            minHeight: 2,
+            maxWidth: this.config.columns,
+            maxHeight: 10
+        });
+
+        // Initialize Edit Mode Manager
+        this.editManager = new EditModeManager({
+            container: this.container,
+            onSave: () => this.handleEditSave(),
+            onCancel: (originalLayout) => this.handleEditCancel(originalLayout),
+            onWidgetAdd: (type) => this.addWidget(type),
+            onWidgetDelete: (widgetId) => this.removeWidget(widgetId),
+            onWidgetSettings: (widgetId) => this.openWidgetSettings(widgetId)
+        });
+
+        // Initialize Layout Persistence
+        this.persistence = new LayoutPersistence({
+            debounceMs: this.config.debounceMs,
+            onSave: (layout) => {
+                console.log('[DashboardManager] Layout saved');
+                if (this.config.onSave) this.config.onSave(layout);
+            },
+            onLoad: (layout) => {
+                console.log('[DashboardManager] Layout loaded');
+                if (this.config.onLoad) this.config.onLoad(layout);
+            },
+            onError: (error) => {
+                console.error('[DashboardManager] Error:', error);
+                if (this.config.onError) this.config.onError(error);
+            }
+        });
+
+        // Try to load saved layout
+        await this.loadLayout();
+
+        console.log('[DashboardManager] All systems initialized');
+        this.notifyChange('initialized');
+    }
+
+    /**
+     * Create dashboard container structure
+     */
+    createContainerStructure() {
+        // Clear container
+        this.container.innerHTML = '';
+
+        // Create tab container
+        this.tabContainer = document.createElement('div');
+        this.tabContainer.className = 'rpg-dashboard-tabs';
+        this.tabContainer.id = 'rpg-dashboard-tabs';
+        this.container.appendChild(this.tabContainer);
+
+        // Create grid container
+        this.gridContainer = document.createElement('div');
+        this.gridContainer.className = 'rpg-dashboard-grid';
+        this.gridContainer.id = 'rpg-dashboard-grid';
+        this.gridContainer.style.position = 'relative';
+        this.gridContainer.style.minHeight = '600px';
+        this.container.appendChild(this.gridContainer);
+    }
+
+    /**
+     * Add a new widget to the dashboard
+     * @param {string} type - Widget type (must be registered)
+     * @param {string} [tabId] - Tab ID (default: current tab)
+     * @param {Object} [config] - Widget configuration
+     * @returns {string} Widget ID
+     */
+    addWidget(type, tabId = null, config = {}) {
+        const targetTabId = tabId || this.currentTabId;
+        if (!targetTabId) {
+            throw new Error('[DashboardManager] No tab selected');
+        }
+
+        // Get widget definition from registry
+        const definition = this.registry.get(type);
+        if (!definition) {
+            throw new Error(`[DashboardManager] Widget type "${type}" not registered`);
+        }
+
+        // Generate unique widget ID
+        const widgetId = `widget-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+
+        // Find available position in grid
+        const position = this.findAvailablePosition(definition.defaultSize);
+
+        // Create widget data
+        const widget = {
+            id: widgetId,
+            type,
+            x: position.x,
+            y: position.y,
+            w: definition.defaultSize.w,
+            h: definition.defaultSize.h,
+            config: config || {}
+        };
+
+        // Add to tab
+        const tab = this.tabManager.getTab(targetTabId);
+        if (!tab) {
+            throw new Error(`[DashboardManager] Tab "${targetTabId}" not found`);
+        }
+
+        if (!tab.widgets) {
+            tab.widgets = [];
+        }
+        tab.widgets.push(widget);
+
+        // Render widget if on current tab
+        if (targetTabId === this.currentTabId) {
+            this.renderWidget(widget, definition);
+        }
+
+        // Trigger auto-save
+        this.triggerAutoSave();
+
+        console.log(`[DashboardManager] Added widget: ${widgetId} (${type}) to tab: ${targetTabId}`);
+        this.notifyChange('widgetAdded', { widgetId, type, tabId: targetTabId });
+
+        return widgetId;
+    }
+
+    /**
+     * Remove a widget from the dashboard
+     * @param {string} widgetId - Widget ID to remove
+     */
+    removeWidget(widgetId) {
+        // Find widget in current tab
+        const tab = this.tabManager.getTab(this.currentTabId);
+        if (!tab || !tab.widgets) {
+            console.warn(`[DashboardManager] Widget ${widgetId} not found in current tab`);
+            return;
+        }
+
+        const index = tab.widgets.findIndex(w => w.id === widgetId);
+        if (index === -1) {
+            console.warn(`[DashboardManager] Widget ${widgetId} not found`);
+            return;
+        }
+
+        // Get widget element and definition
+        const widgetData = this.widgets.get(widgetId);
+        if (widgetData) {
+            // Call widget cleanup
+            const definition = this.registry.get(widgetData.widget.type);
+            if (definition && definition.onRemove) {
+                definition.onRemove(widgetData.element, widgetData.widget.config);
+            }
+
+            // Destroy drag/resize handlers
+            this.dragHandler.destroyWidget(widgetData.element);
+            this.resizeHandler.destroyWidget(widgetData.element);
+
+            // Remove element
+            widgetData.element.remove();
+
+            // Remove from map
+            this.widgets.delete(widgetId);
+        }
+
+        // Remove from tab
+        tab.widgets.splice(index, 1);
+
+        // Trigger auto-save
+        this.triggerAutoSave();
+
+        console.log(`[DashboardManager] Removed widget: ${widgetId}`);
+        this.notifyChange('widgetRemoved', { widgetId });
+    }
+
+    /**
+     * Update a widget's configuration
+     * @param {string} widgetId - Widget ID
+     * @param {Object} updates - Configuration updates
+     */
+    updateWidget(widgetId, updates) {
+        const widgetData = this.widgets.get(widgetId);
+        if (!widgetData) {
+            console.warn(`[DashboardManager] Widget ${widgetId} not found`);
+            return;
+        }
+
+        // Update widget config
+        Object.assign(widgetData.widget.config, updates);
+
+        // Get widget definition
+        const definition = this.registry.get(widgetData.widget.type);
+
+        // Call onConfigChange if defined
+        if (definition && definition.onConfigChange) {
+            definition.onConfigChange(widgetData.element, widgetData.widget.config);
+        }
+
+        // Re-render widget
+        this.renderWidgetContent(widgetData.element, widgetData.widget, definition);
+
+        // Trigger auto-save
+        this.triggerAutoSave();
+
+        console.log(`[DashboardManager] Updated widget: ${widgetId}`);
+        this.notifyChange('widgetUpdated', { widgetId, updates });
+    }
+
+    /**
+     * Render a single widget
+     * @param {Object} widget - Widget data
+     * @param {Object} definition - Widget definition
+     */
+    renderWidget(widget, definition) {
+        // Create widget element
+        const element = document.createElement('div');
+        element.className = 'rpg-widget';
+        element.id = `widget-${widget.id}`;
+        element.dataset.widgetId = widget.id;
+        element.dataset.widgetType = widget.type;
+
+        // Position widget using grid engine
+        const pos = this.gridEngine.getPixelPosition(widget);
+        element.style.position = 'absolute';
+        element.style.left = `${pos.left}px`;
+        element.style.top = `${pos.top}px`;
+        element.style.width = `${pos.width}px`;
+        element.style.height = `${pos.height}px`;
+
+        // Add to grid
+        this.gridContainer.appendChild(element);
+
+        // Render widget content
+        this.renderWidgetContent(element, widget, definition);
+
+        // Initialize drag & drop
+        this.dragHandler.initWidget(element, widget, (updated, newX, newY) => {
+            widget.x = newX;
+            widget.y = newY;
+            this.repositionWidget(element, widget);
+            this.triggerAutoSave();
+        });
+
+        // Initialize resize
+        this.resizeHandler.initWidget(element, widget, (updated, newW, newH, newX, newY) => {
+            widget.w = newW;
+            widget.h = newH;
+            widget.x = newX;
+            widget.y = newY;
+            this.repositionWidget(element, widget);
+
+            // Call onResize if defined
+            if (definition.onResize) {
+                definition.onResize(element, newW, newH);
+            }
+
+            this.triggerAutoSave();
+        }, {
+            minW: definition.minSize.w,
+            minH: definition.minSize.h
+        });
+
+        // Add edit mode controls
+        if (this.editManager) {
+            this.editManager.addWidgetControls(element, widget.id);
+        }
+
+        // Store widget data
+        this.widgets.set(widget.id, {
+            widget,
+            element,
+            definition,
+            tabId: this.currentTabId
+        });
+    }
+
+    /**
+     * Render widget content (called by widget render function)
+     * @param {HTMLElement} element - Widget element
+     * @param {Object} widget - Widget data
+     * @param {Object} definition - Widget definition
+     */
+    renderWidgetContent(element, widget, definition) {
+        // Clear existing content (except resize handles and controls)
+        const handles = element.querySelector('.resize-handles');
+        const controls = element.querySelector('.widget-edit-controls');
+        element.innerHTML = '';
+        if (handles) element.appendChild(handles);
+        if (controls) element.appendChild(controls);
+
+        // Call widget render function
+        if (definition && definition.render) {
+            definition.render(element, widget.config || {});
+        }
+    }
+
+    /**
+     * Reposition widget element
+     * @param {HTMLElement} element - Widget element
+     * @param {Object} widget - Widget data
+     */
+    repositionWidget(element, widget) {
+        const pos = this.gridEngine.getPixelPosition(widget);
+        element.style.left = `${pos.left}px`;
+        element.style.top = `${pos.top}px`;
+        element.style.width = `${pos.width}px`;
+        element.style.height = `${pos.height}px`;
+    }
+
+    /**
+     * Find available position for new widget
+     * @param {Object} size - Widget size { w, h }
+     * @returns {Object} Position { x, y }
+     */
+    findAvailablePosition(size) {
+        // Simple algorithm: try to place at top-left, move right, then down
+        const tab = this.tabManager.getTab(this.currentTabId);
+        const widgets = tab?.widgets || [];
+
+        for (let y = 0; y < 20; y++) {
+            for (let x = 0; x <= this.config.columns - size.w; x++) {
+                const position = { x, y };
+                const testWidget = { ...position, w: size.w, h: size.h };
+
+                // Check if position is free
+                const hasCollision = widgets.some(w =>
+                    this.gridEngine.detectCollision(testWidget, [w])
+                );
+
+                if (!hasCollision) {
+                    return position;
+                }
+            }
+        }
+
+        // Fallback: place at bottom
+        const maxY = Math.max(...widgets.map(w => w.y + w.h), 0);
+        return { x: 0, y: maxY };
+    }
+
+    /**
+     * Create a new tab
+     * @param {string} name - Tab name
+     * @returns {string} Tab ID
+     */
+    createTab(name) {
+        const tabId = this.tabManager.createTab(name);
+        this.triggerAutoSave();
+        return tabId;
+    }
+
+    /**
+     * Switch to a different tab
+     * @param {string} tabId - Tab ID to switch to
+     */
+    switchTab(tabId) {
+        this.tabManager.switchTab(tabId);
+    }
+
+    /**
+     * Handle tab change event
+     * @param {string} tabId - New active tab ID
+     */
+    onTabChange(tabId) {
+        console.log(`[DashboardManager] Switching to tab: ${tabId}`);
+        this.currentTabId = tabId;
+
+        // Clear grid
+        this.clearGrid();
+
+        // Render all widgets in this tab
+        const tab = this.tabManager.getTab(tabId);
+        if (tab && tab.widgets) {
+            tab.widgets.forEach(widget => {
+                const definition = this.registry.get(widget.type);
+                if (definition) {
+                    this.renderWidget(widget, definition);
+                }
+            });
+        }
+
+        this.notifyChange('tabChanged', { tabId });
+    }
+
+    /**
+     * Handle tab creation
+     */
+    onTabCreate(tab) {
+        console.log(`[DashboardManager] Tab created: ${tab.id}`);
+        this.triggerAutoSave();
+    }
+
+    /**
+     * Handle tab deletion
+     */
+    onTabDelete(tabId) {
+        console.log(`[DashboardManager] Tab deleted: ${tabId}`);
+        this.triggerAutoSave();
+    }
+
+    /**
+     * Handle tab rename
+     */
+    onTabRename(tabId, newName) {
+        console.log(`[DashboardManager] Tab renamed: ${tabId} -> ${newName}`);
+        this.triggerAutoSave();
+    }
+
+    /**
+     * Handle tab reorder
+     */
+    onTabReorder(fromIndex, toIndex) {
+        console.log(`[DashboardManager] Tabs reordered: ${fromIndex} -> ${toIndex}`);
+        this.triggerAutoSave();
+    }
+
+    /**
+     * Clear all widgets from grid
+     */
+    clearGrid() {
+        // Destroy all widgets
+        this.widgets.forEach((widgetData, widgetId) => {
+            const definition = this.registry.get(widgetData.widget.type);
+            if (definition && definition.onRemove) {
+                definition.onRemove(widgetData.element, widgetData.widget.config);
+            }
+            this.dragHandler.destroyWidget(widgetData.element);
+            this.resizeHandler.destroyWidget(widgetData.element);
+            widgetData.element.remove();
+        });
+
+        this.widgets.clear();
+    }
+
+    /**
+     * Enter edit mode
+     */
+    enterEditMode() {
+        this.editManager.enterEditMode();
+    }
+
+    /**
+     * Exit edit mode
+     * @param {boolean} save - Whether to save changes
+     */
+    exitEditMode(save = false) {
+        this.editManager.exitEditMode(save);
+    }
+
+    /**
+     * Handle edit mode save
+     */
+    handleEditSave() {
+        console.log('[DashboardManager] Edit mode saved');
+        this.triggerAutoSave();
+    }
+
+    /**
+     * Handle edit mode cancel
+     */
+    handleEditCancel(originalLayout) {
+        console.log('[DashboardManager] Edit mode cancelled');
+        // Could restore original layout here if needed
+    }
+
+    /**
+     * Open widget settings dialog
+     * @param {string} widgetId - Widget ID
+     */
+    openWidgetSettings(widgetId) {
+        const widgetData = this.widgets.get(widgetId);
+        if (!widgetData) return;
+
+        const definition = this.registry.get(widgetData.widget.type);
+        if (definition && definition.getConfig) {
+            // Get config schema
+            const configSchema = definition.getConfig();
+            // TODO: Show config dialog
+            console.log('[DashboardManager] Widget settings:', widgetId, configSchema);
+        }
+    }
+
+    /**
+     * Get current dashboard configuration
+     * @returns {Object} Dashboard configuration
+     */
+    getDashboardConfig() {
+        return {
+            version: 2,
+            gridConfig: {
+                columns: this.config.columns,
+                rowHeight: this.config.rowHeight,
+                gap: this.config.gap
+            },
+            tabs: this.tabManager.getTabs().map(tab => ({
+                id: tab.id,
+                name: tab.name,
+                widgets: tab.widgets || []
+            }))
+        };
+    }
+
+    /**
+     * Apply dashboard configuration
+     * @param {Object} config - Dashboard configuration
+     */
+    applyDashboardConfig(config) {
+        console.log('[DashboardManager] Applying dashboard config');
+
+        // Clear existing
+        this.clearGrid();
+        this.tabManager.deleteAllTabs();
+
+        // Create tabs
+        config.tabs.forEach(tabConfig => {
+            this.tabManager.createTab(tabConfig.name, tabConfig.id);
+            const tab = this.tabManager.getTab(tabConfig.id);
+            tab.widgets = tabConfig.widgets || [];
+        });
+
+        // Switch to first tab
+        if (config.tabs.length > 0) {
+            this.switchTab(config.tabs[0].id);
+        }
+
+        this.notifyChange('configApplied', { config });
+    }
+
+    /**
+     * Save current layout
+     * @param {boolean} immediate - Skip debounce
+     */
+    async saveLayout(immediate = false) {
+        const config = this.getDashboardConfig();
+        await this.persistence.saveLayout(config, immediate);
+    }
+
+    /**
+     * Load saved layout
+     */
+    async loadLayout() {
+        try {
+            const saved = await this.persistence.loadLayout();
+            if (saved) {
+                this.applyDashboardConfig(saved);
+            } else if (this.defaultLayout) {
+                console.log('[DashboardManager] No saved layout, using default');
+                this.applyDashboardConfig(this.defaultLayout);
+            }
+        } catch (error) {
+            console.error('[DashboardManager] Failed to load layout:', error);
+            if (this.defaultLayout) {
+                this.applyDashboardConfig(this.defaultLayout);
+            }
+        }
+    }
+
+    /**
+     * Export layout as JSON
+     * @param {string} filename - Export filename
+     */
+    exportLayout(filename = 'dashboard-layout.json') {
+        const config = this.getDashboardConfig();
+        this.persistence.exportLayout(config, filename);
+    }
+
+    /**
+     * Import layout from JSON file
+     * @param {File} file - JSON file
+     */
+    async importLayout(file) {
+        const config = await this.persistence.importLayout(file);
+        this.applyDashboardConfig(config);
+        await this.saveLayout(true);
+    }
+
+    /**
+     * Reset to default layout
+     */
+    async resetLayout() {
+        if (!this.defaultLayout) {
+            console.warn('[DashboardManager] No default layout defined');
+            return;
+        }
+
+        await this.persistence.resetToDefault(this.defaultLayout);
+        this.applyDashboardConfig(this.defaultLayout);
+    }
+
+    /**
+     * Set default layout
+     * @param {Object} layout - Default layout configuration
+     */
+    setDefaultLayout(layout) {
+        this.defaultLayout = layout;
+    }
+
+    /**
+     * Trigger auto-save
+     */
+    triggerAutoSave() {
+        const config = this.getDashboardConfig();
+        this.persistence.saveLayout(config).catch(err => {
+            console.error('[DashboardManager] Auto-save failed:', err);
+        });
+    }
+
+    /**
+     * Register change listener
+     * @param {Function} callback - Callback function (event, data) => void
+     */
+    onChange(callback) {
+        this.changeListeners.add(callback);
+    }
+
+    /**
+     * Unregister change listener
+     * @param {Function} callback - Callback to remove
+     */
+    offChange(callback) {
+        this.changeListeners.delete(callback);
+    }
+
+    /**
+     * Notify change listeners
+     * @private
+     */
+    notifyChange(event, data) {
+        this.changeListeners.forEach(callback => {
+            try {
+                callback(event, data);
+            } catch (error) {
+                console.error('[DashboardManager] Error in change listener:', error);
+            }
+        });
+    }
+
+    /**
+     * Destroy dashboard and cleanup
+     */
+    destroy() {
+        console.log('[DashboardManager] Destroying dashboard');
+
+        // Clear grid
+        this.clearGrid();
+
+        // Destroy systems
+        if (this.editManager) this.editManager.destroy();
+        if (this.dragHandler) this.dragHandler.destroy();
+        if (this.persistence) this.persistence.destroy();
+
+        // Clear listeners
+        this.changeListeners.clear();
+
+        // Clear container
+        this.container.innerHTML = '';
+    }
+}

src/systems/dashboard/widgetBase.js

@@ -0,0 +1,472 @@
+/**
+ * Widget Base Utilities
+ *
+ * Provides common utilities for widget development:
+ * - Standard widget HTML structure
+ * - Editable field handlers
+ * - Configuration UI helpers
+ * - Event listener management
+ */
+
+/**
+ * Create standard widget container structure
+ * @param {Object} options - Widget options
+ * @param {string} options.title - Widget title
+ * @param {string} options.icon - Widget icon (emoji or FontAwesome class)
+ * @param {string} options.content - Widget content HTML
+ * @param {string} [options.headerClass] - Additional header CSS class
+ * @param {string} [options.contentClass] - Additional content CSS class
+ * @returns {string} Widget HTML
+ */
+export function createWidgetContainer({ title, icon, content, headerClass = '', contentClass = '' }) {
+    return `
+        <div class="rpg-widget-container">
+            <div class="rpg-widget-header ${headerClass}">
+                <span class="rpg-widget-icon">${icon}</span>
+                <span class="rpg-widget-title">${title}</span>
+            </div>
+            <div class="rpg-widget-content ${contentClass}">
+                ${content}
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * Create editable field with auto-save
+ * @param {Object} options - Field options
+ * @param {string} options.value - Field value
+ * @param {string} options.field - Field name (for data-field attribute)
+ * @param {string} [options.placeholder] - Placeholder text
+ * @param {string} [options.className] - Additional CSS class
+ * @param {Function} [options.onSave] - Callback when field saved
+ * @returns {string} Editable field HTML
+ */
+export function createEditableField({ value, field, placeholder = '', className = '', onSave }) {
+    const dataAttr = onSave ? `data-on-save="true"` : '';
+    return `
+        <span class="rpg-editable ${className}"
+              contenteditable="true"
+              data-field="${field}"
+              ${dataAttr}
+              title="Click to edit">${value}</span>
+    `;
+}
+
+/**
+ * Attach editable field handlers to a container
+ * @param {HTMLElement} container - Container element
+ * @param {Function} onFieldChange - Callback (fieldName, newValue) => void
+ */
+export function attachEditableHandlers(container, onFieldChange) {
+    if (!container) return;
+
+    // Find all editable fields
+    const editableFields = container.querySelectorAll('[contenteditable="true"]');
+
+    editableFields.forEach(field => {
+        // Store original value
+        let originalValue = field.textContent.trim();
+
+        // Focus event - select all text
+        field.addEventListener('focus', (e) => {
+            originalValue = e.target.textContent.trim();
+
+            // Select all text
+            const range = document.createRange();
+            range.selectNodeContents(e.target);
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(range);
+        });
+
+        // Blur event - save changes
+        field.addEventListener('blur', (e) => {
+            const newValue = e.target.textContent.trim();
+            const fieldName = e.target.dataset.field;
+
+            if (newValue !== originalValue && newValue !== '') {
+                console.log(`[WidgetBase] Field changed: ${fieldName} = ${newValue}`);
+                if (onFieldChange) {
+                    onFieldChange(fieldName, newValue);
+                }
+            } else if (newValue === '') {
+                // Restore original if empty
+                e.target.textContent = originalValue;
+            }
+        });
+
+        // Enter key - blur to save
+        field.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                e.target.blur();
+            }
+            // Escape key - cancel edit
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                e.target.textContent = originalValue;
+                e.target.blur();
+            }
+        });
+
+        // Prevent paste with formatting
+        field.addEventListener('paste', (e) => {
+            e.preventDefault();
+            const text = (e.clipboardData || window.clipboardData).getData('text/plain');
+            document.execCommand('insertText', false, text);
+        });
+    });
+}
+
+/**
+ * Create progress bar HTML
+ * @param {Object} options - Progress bar options
+ * @param {string} options.label - Label text
+ * @param {number} options.value - Current value (0-100)
+ * @param {string} [options.gradient] - CSS gradient for bar
+ * @param {boolean} [options.editable] - Whether value is editable
+ * @param {string} [options.field] - Field name for editable value
+ * @returns {string} Progress bar HTML
+ */
+export function createProgressBar({ label, value, gradient, editable = false, field = '' }) {
+    const barStyle = gradient ? `background: ${gradient}` : '';
+    const valueHtml = editable
+        ? `<span class="rpg-stat-value rpg-editable-stat" contenteditable="true" data-field="${field}" title="Click to edit">${value}%</span>`
+        : `<span class="rpg-stat-value">${value}%</span>`;
+
+    return `
+        <div class="rpg-stat-row">
+            <span class="rpg-stat-label">${label}:</span>
+            <div class="rpg-stat-bar" style="${barStyle}">
+                <div class="rpg-stat-fill" style="width: ${100 - value}%"></div>
+            </div>
+            ${valueHtml}
+        </div>
+    `;
+}
+
+/**
+ * Update progress bar value
+ * @param {HTMLElement} container - Container element
+ * @param {string} field - Field name
+ * @param {number} newValue - New value (0-100)
+ */
+export function updateProgressBar(container, field, newValue) {
+    const valueSpan = container.querySelector(`[data-field="${field}"]`);
+    const fillDiv = valueSpan?.parentElement.querySelector('.rpg-stat-fill');
+
+    if (valueSpan) {
+        valueSpan.textContent = `${newValue}%`;
+    }
+    if (fillDiv) {
+        fillDiv.style.width = `${100 - newValue}%`;
+    }
+}
+
+/**
+ * Create icon button
+ * @param {Object} options - Button options
+ * @param {string} options.icon - FontAwesome icon class or emoji
+ * @param {string} [options.label] - Button label
+ * @param {string} [options.className] - Additional CSS class
+ * @param {string} [options.title] - Tooltip text
+ * @returns {string} Button HTML
+ */
+export function createIconButton({ icon, label = '', className = '', title = '' }) {
+    const isFontAwesome = icon.startsWith('fa-');
+    const iconHtml = isFontAwesome
+        ? `<i class="${icon}"></i>`
+        : `<span class="rpg-emoji-icon">${icon}</span>`;
+
+    return `
+        <button class="rpg-icon-btn ${className}" title="${title}">
+            ${iconHtml}
+            ${label ? `<span>${label}</span>` : ''}
+        </button>
+    `;
+}
+
+/**
+ * Create toggle switch
+ * @param {Object} options - Toggle options
+ * @param {string} options.id - Toggle ID
+ * @param {string} options.label - Toggle label
+ * @param {boolean} options.checked - Initial checked state
+ * @param {Function} [options.onChange] - Change callback
+ * @returns {string} Toggle HTML
+ */
+export function createToggle({ id, label, checked = false, onChange }) {
+    return `
+        <label class="rpg-toggle-label">
+            <input type="checkbox" id="${id}" ${checked ? 'checked' : ''}>
+            <span class="rpg-toggle-slider"></span>
+            <span class="rpg-toggle-text">${label}</span>
+        </label>
+    `;
+}
+
+/**
+ * Attach toggle handler
+ * @param {HTMLElement} container - Container element
+ * @param {string} toggleId - Toggle input ID
+ * @param {Function} onChange - Callback (checked) => void
+ */
+export function attachToggleHandler(container, toggleId, onChange) {
+    const toggle = container.querySelector(`#${toggleId}`);
+    if (!toggle) return;
+
+    toggle.addEventListener('change', (e) => {
+        if (onChange) {
+            onChange(e.target.checked);
+        }
+    });
+}
+
+/**
+ * Create select dropdown
+ * @param {Object} options - Select options
+ * @param {string} options.id - Select ID
+ * @param {Array<{value: string, label: string}>} options.options - Options array
+ * @param {string} [options.selected] - Selected value
+ * @param {string} [options.className] - Additional CSS class
+ * @returns {string} Select HTML
+ */
+export function createSelect({ id, options, selected = '', className = '' }) {
+    const optionsHtml = options.map(opt =>
+        `<option value="${opt.value}" ${opt.value === selected ? 'selected' : ''}>${opt.label}</option>`
+    ).join('');
+
+    return `
+        <select id="${id}" class="rpg-select ${className}">
+            ${optionsHtml}
+        </select>
+    `;
+}
+
+/**
+ * Attach select handler
+ * @param {HTMLElement} container - Container element
+ * @param {string} selectId - Select element ID
+ * @param {Function} onChange - Callback (value) => void
+ */
+export function attachSelectHandler(container, selectId, onChange) {
+    const select = container.querySelector(`#${selectId}`);
+    if (!select) return;
+
+    select.addEventListener('change', (e) => {
+        if (onChange) {
+            onChange(e.target.value);
+        }
+    });
+}
+
+/**
+ * Create configuration section
+ * @param {Object} options - Config options
+ * @param {string} options.title - Section title
+ * @param {string} options.content - Section content HTML
+ * @param {boolean} [options.collapsible] - Whether section is collapsible
+ * @param {boolean} [options.collapsed] - Initial collapsed state
+ * @returns {string} Config section HTML
+ */
+export function createConfigSection({ title, content, collapsible = false, collapsed = false }) {
+    if (!collapsible) {
+        return `
+            <div class="rpg-config-section">
+                <h4 class="rpg-config-title">${title}</h4>
+                <div class="rpg-config-content">
+                    ${content}
+                </div>
+            </div>
+        `;
+    }
+
+    return `
+        <div class="rpg-config-section ${collapsed ? 'collapsed' : ''}">
+            <h4 class="rpg-config-title rpg-collapsible">
+                ${title}
+                <i class="fa-solid fa-chevron-${collapsed ? 'down' : 'up'}"></i>
+            </h4>
+            <div class="rpg-config-content" style="${collapsed ? 'display: none;' : ''}">
+                ${content}
+            </div>
+        </div>
+    `;
+}
+
+/**
+ * Attach collapsible section handlers
+ * @param {HTMLElement} container - Container element
+ */
+export function attachCollapsibleHandlers(container) {
+    const collapsibles = container.querySelectorAll('.rpg-collapsible');
+
+    collapsibles.forEach(header => {
+        header.addEventListener('click', () => {
+            const section = header.parentElement;
+            const content = section.querySelector('.rpg-config-content');
+            const icon = header.querySelector('i');
+
+            const isCollapsed = section.classList.toggle('collapsed');
+
+            if (isCollapsed) {
+                content.style.display = 'none';
+                icon.className = 'fa-solid fa-chevron-down';
+            } else {
+                content.style.display = 'block';
+                icon.className = 'fa-solid fa-chevron-up';
+            }
+        });
+    });
+}
+
+/**
+ * Debounce function for auto-save
+ * @param {Function} func - Function to debounce
+ * @param {number} wait - Wait time in ms
+ * @returns {Function} Debounced function
+ */
+export function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+/**
+ * Safe number parser with fallback
+ * @param {string|number} value - Value to parse
+ * @param {number} fallback - Fallback value
+ * @param {number} [min] - Minimum value
+ * @param {number} [max] - Maximum value
+ * @returns {number} Parsed number
+ */
+export function parseNumber(value, fallback, min = -Infinity, max = Infinity) {
+    const num = typeof value === 'string' ? parseInt(value, 10) : value;
+    if (isNaN(num)) return fallback;
+    return Math.max(min, Math.min(max, num));
+}
+
+/**
+ * Create loading spinner
+ * @param {string} [text] - Loading text
+ * @returns {string} Loading spinner HTML
+ */
+export function createLoadingSpinner(text = 'Loading...') {
+    return `
+        <div class="rpg-loading-spinner">
+            <i class="fa-solid fa-spinner fa-spin"></i>
+            <span>${text}</span>
+        </div>
+    `;
+}
+
+/**
+ * Create empty state message
+ * @param {Object} options - Empty state options
+ * @param {string} options.icon - Icon (emoji or FA class)
+ * @param {string} options.message - Message text
+ * @param {string} [options.action] - Optional action button HTML
+ * @returns {string} Empty state HTML
+ */
+export function createEmptyState({ icon, message, action = '' }) {
+    const isFontAwesome = icon.startsWith('fa-');
+    const iconHtml = isFontAwesome
+        ? `<i class="${icon}"></i>`
+        : `<span class="rpg-emoji-icon">${icon}</span>`;
+
+    return `
+        <div class="rpg-empty-state">
+            <div class="rpg-empty-icon">${iconHtml}</div>
+            <p class="rpg-empty-message">${message}</p>
+            ${action}
+        </div>
+    `;
+}
+
+/**
+ * Escape HTML to prevent XSS
+ * @param {string} unsafe - Unsafe string
+ * @returns {string} Escaped string
+ */
+export function escapeHtml(unsafe) {
+    return unsafe
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+}
+
+/**
+ * Format number with commas
+ * @param {number} num - Number to format
+ * @returns {string} Formatted number
+ */
+export function formatNumber(num) {
+    return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+}
+
+/**
+ * Truncate text with ellipsis
+ * @param {string} text - Text to truncate
+ * @param {number} maxLength - Maximum length
+ * @returns {string} Truncated text
+ */
+export function truncateText(text, maxLength) {
+    if (text.length <= maxLength) return text;
+    return text.slice(0, maxLength - 3) + '...';
+}
+
+/**
+ * Create responsive grid for items
+ * @param {Array<string>} items - Array of item HTML
+ * @param {number} [columns] - Number of columns (auto if not specified)
+ * @param {string} [gap] - Gap size (CSS value)
+ * @returns {string} Grid HTML
+ */
+export function createGrid(items, columns = null, gap = '12px') {
+    const gridStyle = columns
+        ? `grid-template-columns: repeat(${columns}, 1fr); gap: ${gap};`
+        : `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: ${gap};`;
+
+    return `
+        <div class="rpg-grid" style="display: grid; ${gridStyle}">
+            ${items.join('')}
+        </div>
+    `;
+}
+
+/**
+ * Create card component
+ * @param {Object} options - Card options
+ * @param {string} options.title - Card title
+ * @param {string} options.content - Card content
+ * @param {string} [options.icon] - Optional icon
+ * @param {string} [options.footer] - Optional footer HTML
+ * @param {string} [options.className] - Additional CSS class
+ * @returns {string} Card HTML
+ */
+export function createCard({ title, content, icon = '', footer = '', className = '' }) {
+    const iconHtml = icon ? `<span class="rpg-card-icon">${icon}</span>` : '';
+    const footerHtml = footer ? `<div class="rpg-card-footer">${footer}</div>` : '';
+
+    return `
+        <div class="rpg-card ${className}">
+            <div class="rpg-card-header">
+                ${iconHtml}
+                <h5 class="rpg-card-title">${title}</h5>
+            </div>
+            <div class="rpg-card-body">
+                ${content}
+            </div>
+            ${footerHtml}
+        </div>
+    `;
+}

src/systems/dashboard/widgets/userStatsWidget.js

@@ -0,0 +1,430 @@
+/**
+ * User Stats Widget
+ *
+ * Displays user health/satiety/energy/hygiene/arousal bars,
+ * mood/conditions, and classic D&D stats (STR/DEX/CON/INT/WIS/CHA).
+ *
+ * Features:
+ * - Editable stat values with live update
+ * - Progress bars with customizable colors
+ * - User portrait and level display
+ * - Classic stats with +/- buttons
+ * - Mobile-responsive layout
+ */
+
+import { createProgressBar, attachEditableHandlers, parseNumber } from '../widgetBase.js';
+
+/**
+ * Register User Stats Widget
+ * @param {WidgetRegistry} registry - Widget registry instance
+ * @param {Object} dependencies - External dependencies
+ * @param {Function} dependencies.getContext - Get SillyTavern context
+ * @param {Function} dependencies.getUserAvatar - Get user avatar URL
+ * @param {Function} dependencies.getExtensionSettings - Get extension settings
+ * @param {Function} dependencies.onStatsChange - Callback when stats change
+ */
+export function registerUserStatsWidget(registry, dependencies) {
+    const {
+        getContext,
+        getUserAvatar,
+        getExtensionSettings,
+        onStatsChange
+    } = dependencies;
+
+    registry.register('userStats', {
+        name: 'User Stats',
+        icon: '❤️',
+        description: 'Health, energy, satiety bars and classic RPG stats',
+        minSize: { w: 4, h: 3 },
+        defaultSize: { w: 6, h: 4 },
+        requiresSchema: false,
+
+        /**
+         * Render widget content
+         * @param {HTMLElement} container - Widget container
+         * @param {Object} config - Widget configuration
+         */
+        render(container, config = {}) {
+            const settings = getExtensionSettings();
+            const stats = settings.userStats;
+            const classicStats = settings.classicStats;
+            const context = getContext();
+            const userName = context.name1;
+            const userPortrait = getUserAvatar();
+
+            // Merge default config with user config
+            const finalConfig = {
+                showClassicStats: true,
+                showMood: true,
+                showPortrait: true,
+                statBarGradient: true,
+                visibleStats: ['health', 'satiety', 'energy', 'hygiene', 'arousal'],
+                ...config
+            };
+
+            // Create gradient for stat bars
+            const gradient = finalConfig.statBarGradient
+                ? `linear-gradient(to right, ${settings.statBarColorLow}, ${settings.statBarColorHigh})`
+                : settings.statBarColorHigh;
+
+            // Build progress bars HTML
+            const progressBarsHtml = finalConfig.visibleStats.map(statName => {
+                const label = statName.charAt(0).toUpperCase() + statName.slice(1);
+                return createProgressBar({
+                    label,
+                    value: stats[statName],
+                    gradient,
+                    editable: true,
+                    field: statName
+                });
+            }).join('');
+
+            // Build classic stats HTML
+            const classicStatsHtml = finalConfig.showClassicStats ? `
+                <div class="rpg-stats-right">
+                    <div class="rpg-classic-stats">
+                        <div class="rpg-classic-stats-grid">
+                            ${['str', 'dex', 'con', 'int', 'wis', 'cha'].map(stat => `
+                                <div class="rpg-classic-stat" data-stat="${stat}">
+                                    <span class="rpg-classic-stat-label">${stat.toUpperCase()}</span>
+                                    <div class="rpg-classic-stat-buttons">
+                                        <button class="rpg-classic-stat-btn rpg-stat-decrease" data-stat="${stat}">−</button>
+                                        <span class="rpg-classic-stat-value">${classicStats[stat]}</span>
+                                        <button class="rpg-classic-stat-btn rpg-stat-increase" data-stat="${stat}">+</button>
+                                    </div>
+                                </div>
+                            `).join('')}
+                        </div>
+                    </div>
+                </div>
+            ` : '';
+
+            // Build mood section HTML
+            const moodHtml = finalConfig.showMood ? `
+                <div class="rpg-mood">
+                    <div class="rpg-mood-emoji rpg-editable" contenteditable="true" data-field="mood" title="Click to edit emoji">${stats.mood}</div>
+                    <div class="rpg-mood-conditions rpg-editable" contenteditable="true" data-field="conditions" title="Click to edit conditions">${stats.conditions}</div>
+                </div>
+            ` : '';
+
+            // Build portrait section HTML
+            const portraitHtml = finalConfig.showPortrait ? `
+                <div class="rpg-user-info-row">
+                    <img src="${userPortrait}" alt="${userName}" class="rpg-user-portrait" onerror="this.style.opacity='0.5';this.onerror=null;" />
+                    <span class="rpg-user-name">${userName}</span>
+                    <span style="opacity: 0.5;">|</span>
+                    <span class="rpg-level-label">LVL</span>
+                    <span class="rpg-level-value rpg-editable" contenteditable="true" data-field="level" title="Click to edit level">${settings.level}</span>
+                </div>
+            ` : '';
+
+            // Render complete HTML
+            const html = `
+                <div class="rpg-stats-content">
+                    <div class="rpg-stats-left">
+                        ${portraitHtml}
+                        <div class="rpg-stats-grid">
+                            ${progressBarsHtml}
+                        </div>
+                        ${moodHtml}
+                    </div>
+                    ${classicStatsHtml}
+                </div>
+            `;
+
+            container.innerHTML = html;
+
+            // Attach event handlers
+            attachEventHandlers(container, settings, onStatsChange);
+        },
+
+        /**
+         * Get configuration options
+         * @returns {Object} Configuration schema
+         */
+        getConfig() {
+            return {
+                showClassicStats: {
+                    type: 'boolean',
+                    label: 'Show Classic Stats (STR/DEX/etc)',
+                    default: true
+                },
+                showMood: {
+                    type: 'boolean',
+                    label: 'Show Mood & Conditions',
+                    default: true
+                },
+                showPortrait: {
+                    type: 'boolean',
+                    label: 'Show User Portrait',
+                    default: true
+                },
+                statBarGradient: {
+                    type: 'boolean',
+                    label: 'Use Gradient for Stat Bars',
+                    default: true
+                },
+                visibleStats: {
+                    type: 'multiselect',
+                    label: 'Visible Stats',
+                    default: ['health', 'satiety', 'energy', 'hygiene', 'arousal'],
+                    options: [
+                        { value: 'health', label: 'Health' },
+                        { value: 'satiety', label: 'Satiety' },
+                        { value: 'energy', label: 'Energy' },
+                        { value: 'hygiene', label: 'Hygiene' },
+                        { value: 'arousal', label: 'Arousal' }
+                    ]
+                }
+            };
+        },
+
+        /**
+         * Handle configuration changes
+         * @param {HTMLElement} container - Widget container
+         * @param {Object} newConfig - New configuration
+         */
+        onConfigChange(container, newConfig) {
+            // Re-render with new config
+            this.render(container, newConfig);
+        },
+
+        /**
+         * Handle widget resize
+         * @param {HTMLElement} container - Widget container
+         * @param {number} newW - New width
+         * @param {number} newH - New height
+         */
+        onResize(container, newW, newH) {
+            // Adjust layout based on size
+            const statsContent = container.querySelector('.rpg-stats-content');
+            if (!statsContent) return;
+
+            // Stack vertically on narrow widgets
+            if (newW < 5) {
+                statsContent.style.flexDirection = 'column';
+            } else {
+                statsContent.style.flexDirection = 'row';
+            }
+        }
+    });
+}
+
+/**
+ * Attach event handlers to widget
+ * @private
+ */
+function attachEventHandlers(container, settings, onStatsChange) {
+    // Handle editable stat value changes (health, satiety, etc.)
+    const editableStats = container.querySelectorAll('.rpg-editable-stat');
+    editableStats.forEach(field => {
+        const fieldName = field.dataset.field;
+        let originalValue = parseNumber(field.textContent.replace('%', '').trim(), 0, 0, 100);
+
+        field.addEventListener('focus', () => {
+            originalValue = parseNumber(field.textContent.replace('%', '').trim(), 0, 0, 100);
+            // Select all text
+            const range = document.createRange();
+            range.selectNodeContents(field);
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(range);
+        });
+
+        field.addEventListener('blur', () => {
+            const textValue = field.textContent.replace('%', '').trim();
+            const value = parseNumber(textValue, originalValue, 0, 100);
+
+            // Update display
+            field.textContent = `${value}%`;
+
+            // Update settings if changed
+            if (value !== originalValue) {
+                settings.userStats[fieldName] = value;
+
+                // Update the bar fill
+                const bar = field.parentElement.querySelector('.rpg-stat-fill');
+                if (bar) {
+                    bar.style.width = `${100 - value}%`;
+                }
+
+                // Trigger change callback
+                if (onStatsChange) {
+                    onStatsChange('userStats', fieldName, value);
+                }
+            }
+        });
+
+        field.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                field.blur();
+            }
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                field.textContent = `${originalValue}%`;
+                field.blur();
+            }
+        });
+
+        // Prevent paste with formatting
+        field.addEventListener('paste', (e) => {
+            e.preventDefault();
+            const text = (e.clipboardData || window.clipboardData).getData('text/plain');
+            document.execCommand('insertText', false, text);
+        });
+    });
+
+    // Handle mood emoji editing
+    const moodEmoji = container.querySelector('.rpg-mood-emoji.rpg-editable');
+    if (moodEmoji) {
+        let originalMood = moodEmoji.textContent.trim();
+
+        moodEmoji.addEventListener('focus', () => {
+            originalMood = moodEmoji.textContent.trim();
+            const range = document.createRange();
+            range.selectNodeContents(moodEmoji);
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(range);
+        });
+
+        moodEmoji.addEventListener('blur', () => {
+            const value = moodEmoji.textContent.trim() || '😐';
+            moodEmoji.textContent = value;
+
+            if (value !== originalMood) {
+                settings.userStats.mood = value;
+                if (onStatsChange) {
+                    onStatsChange('userStats', 'mood', value);
+                }
+            }
+        });
+
+        moodEmoji.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                moodEmoji.blur();
+            }
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                moodEmoji.textContent = originalMood;
+                moodEmoji.blur();
+            }
+        });
+    }
+
+    // Handle conditions editing
+    const moodConditions = container.querySelector('.rpg-mood-conditions.rpg-editable');
+    if (moodConditions) {
+        let originalConditions = moodConditions.textContent.trim();
+
+        moodConditions.addEventListener('focus', () => {
+            originalConditions = moodConditions.textContent.trim();
+            const range = document.createRange();
+            range.selectNodeContents(moodConditions);
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(range);
+        });
+
+        moodConditions.addEventListener('blur', () => {
+            const value = moodConditions.textContent.trim() || 'None';
+            moodConditions.textContent = value;
+
+            if (value !== originalConditions) {
+                settings.userStats.conditions = value;
+                if (onStatsChange) {
+                    onStatsChange('userStats', 'conditions', value);
+                }
+            }
+        });
+
+        moodConditions.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                moodConditions.blur();
+            }
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                moodConditions.textContent = originalConditions;
+                moodConditions.blur();
+            }
+        });
+    }
+
+    // Handle level editing
+    const levelValue = container.querySelector('.rpg-level-value.rpg-editable');
+    if (levelValue) {
+        let originalLevel = parseNumber(levelValue.textContent.trim(), 1, 1, 100);
+
+        levelValue.addEventListener('focus', () => {
+            originalLevel = parseNumber(levelValue.textContent.trim(), 1, 1, 100);
+            const range = document.createRange();
+            range.selectNodeContents(levelValue);
+            const selection = window.getSelection();
+            selection.removeAllRanges();
+            selection.addRange(range);
+        });
+
+        levelValue.addEventListener('blur', () => {
+            const value = parseNumber(levelValue.textContent.trim(), originalLevel, 1, 100);
+            levelValue.textContent = value;
+
+            if (value !== originalLevel) {
+                settings.level = value;
+                if (onStatsChange) {
+                    onStatsChange('level', null, value);
+                }
+            }
+        });
+
+        levelValue.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                levelValue.blur();
+            }
+            if (e.key === 'Escape') {
+                e.preventDefault();
+                levelValue.textContent = originalLevel;
+                levelValue.blur();
+            }
+        });
+    }
+
+    // Handle classic stat +/- buttons
+    const increaseButtons = container.querySelectorAll('.rpg-stat-increase');
+    const decreaseButtons = container.querySelectorAll('.rpg-stat-decrease');
+
+    increaseButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const statName = btn.dataset.stat;
+            const valueSpan = btn.parentElement.querySelector('.rpg-classic-stat-value');
+            const currentValue = parseNumber(valueSpan.textContent, 10, 1, 20);
+            const newValue = Math.min(20, currentValue + 1);
+
+            valueSpan.textContent = newValue;
+            settings.classicStats[statName] = newValue;
+
+            if (onStatsChange) {
+                onStatsChange('classicStats', statName, newValue);
+            }
+        });
+    });
+
+    decreaseButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const statName = btn.dataset.stat;
+            const valueSpan = btn.parentElement.querySelector('.rpg-classic-stat-value');
+            const currentValue = parseNumber(valueSpan.textContent, 10, 1, 20);
+            const newValue = Math.max(1, currentValue - 1);
+
+            valueSpan.textContent = newValue;
+            settings.classicStats[statName] = newValue;
+
+            if (onStatsChange) {
+                onStatsChange('classicStats', statName, newValue);
+            }
+        });
+    });
+}