feat(widgets): add modular widget system for schedule and common inputs (#213)

* feat(widgets): add modular widget system for schedule and common inputs

Add 15 new reusable widgets following the widget registry pattern:
- schedule-picker: composite widget for enable/mode/time configuration
- day-selector: checkbox group for days of the week
- time-range: paired start/end time inputs with validation
- text-input, number-input, textarea: enhanced text inputs
- toggle-switch, radio-group, select-dropdown: selection widgets
- slider, color-picker, date-picker: specialized inputs
- email-input, url-input, password-input: validated string inputs

Refactor schedule.html to use the new schedule-picker widget instead
of inline JavaScript. Add x-widget support in plugin_config.html for
all new widgets so plugins can use them via schema configuration.

Fix form submission for checkboxes by using hidden input pattern to
ensure unchecked state is properly sent via JSON-encoded forms.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(widgets): improve security, validation, and form binding across widgets

- Fix XSS vulnerability: escapeHtml now escapes quotes in all widget fallbacks
- color-picker: validate presets with isValidHex(), use data attributes
- date-picker: add placeholder attribute support
- day-selector: use options.name for hidden input form binding
- password-input: implement requireUppercase/Number/Special validation
- radio-group: fix value injection using this.value instead of interpolation
- schedule-picker: preserve day values when disabling (don't clear times)
- select-dropdown: remove undocumented searchable/icons options
- text-input: apply patternMessage via setCustomValidity
- time-range: use options.name for hidden inputs
- toggle-switch: preserve configured color from data attribute
- url-input: combine browser and custom protocol validation
- plugin_config: add widget support for boolean/number types, pass name to day-selector
- schedule: handle null config gracefully, preserve explicit mode setting

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(widgets): validate day-selector input, consistent minLength default, escape JSON quotes

- day-selector: filter incoming selectedDays to only valid entries in DAYS array
  (prevents invalid persisted values from corrupting UI/state)
- password-input: use default minLength of 8 when not explicitly set
  (fixes inconsistency between render() and onInput() strength meter baseline)
- plugin_config.html: escape single quotes in JSON hidden input values
  (prevents broken attributes when JSON contains single quotes)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat(widgets): add global notification widget, consolidate duplicated code

- Create notification.js widget with toast-style notifications
- Support for success, error, warning, info types
- Auto-dismiss with configurable duration
- Stacking support with max notifications limit
- Accessible with aria-live and role="alert"
- Update base.html to load notification widget early
- Replace duplicate showNotification in raw_json.html
- Simplify fonts.html fallback notification
- Net reduction of ~66 lines of duplicated code

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(widgets): escape options.name in all widgets, validate day-selector format

Security fixes:
- Escape options.name attribute in all 13 widgets to prevent injection
- Affected: color-picker, date-picker, email-input, number-input,
  password-input, radio-group, select-dropdown, slider, text-input,
  textarea, toggle-switch, url-input

Defensive coding:
- day-selector: validate format option exists in DAY_LABELS before use
- Falls back to 'long' format for unsupported/invalid format values

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(plugins): add type="button" to control buttons, add debug logging

- Add type="button" attribute to refresh, update-all, and restart buttons
  to prevent potential form submission behavior
- Add console logging to diagnose button click issues:
  - Log when event listeners are attached (and whether buttons found)
  - Log when handler functions are called

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(widgets): improve security and validation across widget inputs

- color-picker.js: Add sanitizeHex() to validate hex values before HTML
  interpolation, ensuring only safe #rrggbb strings are used
- day-selector.js: Escape inputName in hidden input name attribute
- number-input.js: Sanitize and escape currentValue in input element
- password-input.js: Validate minLength as non-negative integer, clamp
  invalid values to default of 8
- slider.js: Add null check for input element before accessing value
- text-input.js: Clear custom validity before checkValidity() to avoid
  stale errors, re-check after setting pattern message
- url-input.js: Normalize allowedProtocols to array, filter to valid
  protocol strings, and escape before HTML interpolation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(widgets): add defensive fallback for DAY_LABELS lookup in day-selector

Extract labelMap with fallback before loop to ensure safe access even if
format validation somehow fails.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat(widgets): add timezone-selector widget with IANA timezone dropdown

- Create timezone-selector.js widget with comprehensive IANA timezone list
- Group timezones by region (US & Canada, Europe, Asia, etc.)
- Show current UTC offset for each timezone
- Display live time preview for selected timezone
- Update general.html to use timezone-selector instead of text input
- Add script tag to base.html for widget loading

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(ui): suppress on-demand status notification on page load

Change loadOnDemandStatus(true) to loadOnDemandStatus(false) during
initPluginsPage() to prevent the "on-demand status refreshed"
notification from appearing every time a tab is opened or the page
is navigated. The notification should only appear on explicit user
refresh.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* style(ui): soften notification close button appearance

Replace blocky FontAwesome X icon with a cleaner SVG that has rounded
stroke caps. Make the button circular, slightly transparent by default,
and add smooth hover transitions for a more polished look.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(widgets): multiple security and validation improvements

- color-picker.js: Ensure presets is always an array before map/filter
- number-input.js: Guard against undefined options parameter
- number-input.js: Sanitize and escape min/max/step HTML attributes
- text-input.js: Clear custom validity in onInput to unblock form submit
- timezone-selector.js: Replace legacy Europe/Belfast with Europe/London
- url-input.js: Use RFC 3986 scheme pattern for protocol validation
- general.html: Use |tojson filter to escape timezone value safely

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor(url-input): centralize RFC 3986 protocol validation

Extract protocol normalization into reusable normalizeProtocols()
helper function that validates against RFC 3986 scheme pattern.
Apply consistently in render, validate, and onInput to ensure
protocols like "git+ssh", "android-app" are properly handled
everywhere. Also lowercase protocol comparison in isValidUrl().

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(timezone-selector): use hidden input for form submission

Replace direct select name attribute with a hidden input pattern to
ensure timezone value is always properly serialized in form submissions.
The hidden input is synced on change and setValue calls. This matches
the pattern used by other widgets and ensures HTMX json-enc properly
captures the value.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(general): preserve timezone dropdown value after save

Add inline script to sync the timezone select with the hidden input
value after form submission. This prevents the dropdown from visually
resetting to the old value while the save has actually succeeded.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(widgets): preserve timezone selection across form submission

Use before-request handler to capture the selected timezone value
before HTMX processes the form, then restore it in after-request.
This is more robust than reading from the hidden input which may
also be affected by form state changes.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(widgets): add HTMX protection to timezone selector

Add global HTMX event listeners in the timezone-selector widget
that preserve the selected value across any form submissions.
This is more robust than form-specific handlers as it protects
the widget regardless of how/where forms are submitted.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* debug(widgets): add logging and prevent timezone widget re-init

Add debug logging and guards to prevent the timezone widget from
being re-initialized after it's already rendered. This should help
diagnose why the dropdown is reverting after save.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* debug: add console logging to timezone HTMX protection

* debug: add onChange logging to trace timezone selection

* fix(widgets): use selectedIndex to force visual update in timezone dropdown

The browser's select.value setter sometimes doesn't trigger a visual
update when optgroup elements are present. Using selectedIndex instead
forces the browser to correctly update the visible selection.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(widgets): force browser repaint on timezone dropdown restore

Adding display:none/reflow/display:'' pattern to force browser to
visually update the select element after changing selectedIndex.
Increased timeout to 50ms for reliability.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* chore(widgets): remove debug logging from timezone selector

Clean up console.log statements that were used for debugging the
timezone dropdown visual update issue.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(ui): improve HTMX after-request handler in general settings

- Parse xhr.responseText with JSON.parse in try/catch instead of
  using nonstandard responseJSON property
- Check xhr.status for 2xx success range
- Show error notification for non-2xx responses
- Default to safe fallback values if JSON parsing fails

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(widgets): add input sanitization and timezone validation

- Sanitize minLength/maxLength in text-input.js to prevent attribute
  injection (coerce to integers, validate range)
- Update Europe/Kiev to Europe/Kyiv (canonical IANA identifier)
- Validate timezone currentValue against TIMEZONE_GROUPS before rendering

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(ui): correct error message fallback in HTMX after-request handler

Initialize message to empty string so error responses can use the
fallback 'Failed to save settings' when no server message is provided.
Previously, the truthy default 'Settings saved' would always be used.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(widgets): add constraint normalization and improve value validation

- text-input: normalize minLength/maxLength so maxLength >= minLength
- timezone-selector: validate setValue input against TIMEZONE_GROUPS
- timezone-selector: sync hidden input to actual selected value
- timezone-selector: preserve empty selections across HTMX requests

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix(widgets): simplify HTMX restore using select.value and dispatch change event

Replace selectedIndex manipulation with direct value assignment for cleaner
placeholder handling, and dispatch change event to refresh timezone preview.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Chuck <chuck@example.com>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

.gitignore

@@ -40,3 +40,7 @@ htmlcov/
 # See docs/MULTI_ROOT_WORKSPACE_SETUP.md for details
 plugins/*
 !plugins/.gitkeep
+
+# Binary files and backups
+bin/pixlet/
+config/backups/

web_interface/static/v3/js/widgets/color-picker.js

@@ -0,0 +1,259 @@
+/**
+ * LEDMatrix Color Picker Widget
+ *
+ * Color selection with preview and hex/RGB input.
+ *
+ * Schema example:
+ * {
+ *   "backgroundColor": {
+ *     "type": "string",
+ *     "x-widget": "color-picker",
+ *     "x-options": {
+ *       "showHexInput": true,
+ *       "showPreview": true,
+ *       "presets": ["#ff0000", "#00ff00", "#0000ff", "#ffffff", "#000000"],
+ *       "format": "hex"  // "hex", "rgb", "rgba"
+ *     }
+ *   }
+ * }
+ *
+ * @module ColorPickerWidget
+ */
+
+(function() {
+    'use strict';
+
+    const base = window.BaseWidget ? new window.BaseWidget('ColorPicker', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    function isValidHex(hex) {
+        return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(hex);
+    }
+
+    function normalizeHex(hex) {
+        if (!hex) return '#000000';
+        hex = String(hex).trim();
+        if (!hex.startsWith('#')) hex = '#' + hex;
+        // Expand 3-digit hex
+        if (hex.length === 4) {
+            hex = '#' + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
+        }
+        return hex.toLowerCase();
+    }
+
+    /**
+     * Sanitize and validate a hex color, returning a safe 7-char #rrggbb string.
+     * Falls back to #000000 for any invalid input.
+     */
+    function sanitizeHex(value) {
+        const normalized = normalizeHex(value);
+        // Validate it's exactly #rrggbb format with valid hex chars
+        if (/^#[0-9a-f]{6}$/.test(normalized)) {
+            return normalized;
+        }
+        return '#000000';
+    }
+
+    const DEFAULT_PRESETS = [
+        '#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff',
+        '#ffff00', '#00ffff', '#ff00ff', '#808080', '#ffa500'
+    ];
+
+    window.LEDMatrixWidgets.register('color-picker', {
+        name: 'Color Picker Widget',
+        version: '1.0.0',
+
+        render: function(container, config, value, options) {
+            const fieldId = sanitizeId(options.fieldId || container.id || 'color_picker');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+            const showHexInput = xOptions.showHexInput !== false;
+            const showPreview = xOptions.showPreview !== false;
+            // Ensure presets is always an array to prevent crashes on .map()
+            const presets = Array.isArray(xOptions.presets) ? xOptions.presets : DEFAULT_PRESETS;
+            const disabled = xOptions.disabled === true;
+
+            const currentValue = sanitizeHex(value);
+
+            let html = `<div id="${fieldId}_widget" class="color-picker-widget" data-field-id="${fieldId}">`;
+
+            // Main color picker row
+            html += '<div class="flex items-center gap-3">';
+
+            // Native color input
+            html += `
+                <input type="color"
+                       id="${fieldId}_color"
+                       value="${currentValue}"
+                       ${disabled ? 'disabled' : ''}
+                       onchange="window.LEDMatrixWidgets.getHandlers('color-picker').onColorChange('${fieldId}')"
+                       class="w-12 h-10 rounded cursor-pointer border border-gray-300 ${disabled ? 'opacity-50 cursor-not-allowed' : ''}">
+            `;
+
+            // Hex input
+            if (showHexInput) {
+                html += `
+                    <div class="flex items-center">
+                        <span class="text-gray-400 mr-1">#</span>
+                        <input type="text"
+                               id="${fieldId}_hex"
+                               value="${currentValue.substring(1)}"
+                               maxlength="6"
+                               ${disabled ? 'disabled' : ''}
+                               onchange="window.LEDMatrixWidgets.getHandlers('color-picker').onHexChange('${fieldId}')"
+                               oninput="window.LEDMatrixWidgets.getHandlers('color-picker').onHexInput('${fieldId}')"
+                               class="w-20 px-2 py-1 text-sm font-mono rounded border border-gray-300 focus:border-blue-500 focus:ring-blue-500 ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} text-black uppercase">
+                    </div>
+                `;
+            }
+
+            // Preview box
+            if (showPreview) {
+                html += `
+                    <div id="${fieldId}_preview"
+                         class="w-20 h-10 rounded border border-gray-300 shadow-inner"
+                         style="background-color: ${currentValue};">
+                    </div>
+                `;
+            }
+
+            html += '</div>';
+
+            // Hidden input for form submission
+            html += `<input type="hidden" id="${fieldId}_input" name="${escapeHtml(options.name || fieldId)}" value="${currentValue}">`;
+
+            // Preset colors - only render valid hex colors
+            if (Array.isArray(presets) && presets.length > 0) {
+                const validPresets = (Array.isArray(presets) ? presets : []).map(p => normalizeHex(p)).filter(p => isValidHex(p));
+                if (validPresets.length > 0) {
+                    html += `
+                        <div class="flex flex-wrap gap-1 mt-3">
+                            <span class="text-xs text-gray-400 w-full mb-1">Quick colors:</span>
+                    `;
+                    for (const normalized of validPresets) {
+                        html += `
+                            <button type="button"
+                                    ${disabled ? 'disabled' : ''}
+                                    data-color="${escapeHtml(normalized)}"
+                                    onclick="window.LEDMatrixWidgets.getHandlers('color-picker').onPresetClick('${fieldId}', this.dataset.color)"
+                                    class="w-6 h-6 rounded border border-gray-300 hover:scale-110 transition-transform ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}"
+                                    style="background-color: ${escapeHtml(normalized)};"
+                                    title="${escapeHtml(normalized)}">
+                            </button>
+                        `;
+                    }
+                    html += '</div>';
+                }
+            }
+
+            // Error message area
+            html += `<div id="${fieldId}_error" class="text-sm text-red-600 mt-1 hidden"></div>`;
+
+            html += '</div>';
+
+            container.innerHTML = html;
+        },
+
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            return input ? input.value : '';
+        },
+
+        setValue: function(fieldId, value) {
+            const safeId = sanitizeId(fieldId);
+            const sanitized = sanitizeHex(value);
+
+            const colorInput = document.getElementById(`${safeId}_color`);
+            const hexInput = document.getElementById(`${safeId}_hex`);
+            const preview = document.getElementById(`${safeId}_preview`);
+            const hidden = document.getElementById(`${safeId}_input`);
+
+            if (colorInput) colorInput.value = sanitized;
+            if (hexInput) hexInput.value = sanitized.substring(1);
+            if (preview) preview.style.backgroundColor = sanitized;
+            if (hidden) hidden.value = sanitized;
+        },
+
+        handlers: {
+            onColorChange: function(fieldId) {
+                const safeId = sanitizeId(fieldId);
+                const colorInput = document.getElementById(`${safeId}_color`);
+                const value = sanitizeHex(colorInput?.value);
+
+                const widget = window.LEDMatrixWidgets.get('color-picker');
+                widget.setValue(fieldId, value);
+                triggerChange(fieldId, value);
+            },
+
+            onHexChange: function(fieldId) {
+                const safeId = sanitizeId(fieldId);
+                const hexInput = document.getElementById(`${safeId}_hex`);
+                const errorEl = document.getElementById(`${safeId}_error`);
+
+                const rawValue = '#' + (hexInput?.value || '000000');
+                const normalized = normalizeHex(rawValue);
+
+                if (!isValidHex(normalized)) {
+                    if (errorEl) {
+                        errorEl.textContent = 'Invalid hex color';
+                        errorEl.classList.remove('hidden');
+                    }
+                    return;
+                }
+
+                if (errorEl) {
+                    errorEl.classList.add('hidden');
+                }
+
+                // Use sanitized value for setting
+                const sanitized = sanitizeHex(normalized);
+                const widget = window.LEDMatrixWidgets.get('color-picker');
+                widget.setValue(fieldId, sanitized);
+                triggerChange(fieldId, sanitized);
+            },
+
+            onHexInput: function(fieldId) {
+                const safeId = sanitizeId(fieldId);
+                const hexInput = document.getElementById(`${safeId}_hex`);
+
+                if (hexInput) {
+                    // Filter to only valid hex characters
+                    hexInput.value = hexInput.value.replace(/[^0-9A-Fa-f]/g, '').toUpperCase();
+                }
+            },
+
+            onPresetClick: function(fieldId, color) {
+                const sanitized = sanitizeHex(color);
+                const widget = window.LEDMatrixWidgets.get('color-picker');
+                widget.setValue(fieldId, sanitized);
+                triggerChange(fieldId, sanitized);
+            }
+        }
+    });
+
+    console.log('[ColorPickerWidget] Color picker widget registered');
+})();

web_interface/static/v3/js/widgets/date-picker.js

@@ -0,0 +1,194 @@
+/**
+ * LEDMatrix Date Picker Widget
+ *
+ * Date selection with optional min/max constraints.
+ *
+ * Schema example:
+ * {
+ *   "startDate": {
+ *     "type": "string",
+ *     "format": "date",
+ *     "x-widget": "date-picker",
+ *     "x-options": {
+ *       "min": "2024-01-01",
+ *       "max": "2025-12-31",
+ *       "placeholder": "Select date",
+ *       "clearable": true
+ *     }
+ *   }
+ * }
+ *
+ * @module DatePickerWidget
+ */
+
+(function() {
+    'use strict';
+
+    const base = window.BaseWidget ? new window.BaseWidget('DatePicker', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    window.LEDMatrixWidgets.register('date-picker', {
+        name: 'Date Picker Widget',
+        version: '1.0.0',
+
+        render: function(container, config, value, options) {
+            const fieldId = sanitizeId(options.fieldId || container.id || 'date_picker');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+            const min = xOptions.min || config.minimum || '';
+            const max = xOptions.max || config.maximum || '';
+            const placeholder = xOptions.placeholder || '';
+            const clearable = xOptions.clearable === true;
+            const disabled = xOptions.disabled === true;
+            const required = xOptions.required === true;
+
+            const currentValue = value || '';
+
+            let html = `<div id="${fieldId}_widget" class="date-picker-widget" data-field-id="${fieldId}">`;
+
+            html += '<div class="flex items-center">';
+
+            html += `
+                <div class="relative flex-1">
+                    <input type="date"
+                           id="${fieldId}_input"
+                           name="${escapeHtml(options.name || fieldId)}"
+                           value="${escapeHtml(currentValue)}"
+                           ${min ? `min="${escapeHtml(min)}"` : ''}
+                           ${max ? `max="${escapeHtml(max)}"` : ''}
+                           ${placeholder ? `placeholder="${escapeHtml(placeholder)}"` : ''}
+                           ${disabled ? 'disabled' : ''}
+                           ${required ? 'required' : ''}
+                           onchange="window.LEDMatrixWidgets.getHandlers('date-picker').onChange('${fieldId}')"
+                           class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} text-black pr-10">
+                    <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
+                        <i class="fas fa-calendar-alt text-gray-400"></i>
+                    </div>
+                </div>
+            `;
+
+            if (clearable && !disabled) {
+                html += `
+                    <button type="button"
+                            id="${fieldId}_clear"
+                            onclick="window.LEDMatrixWidgets.getHandlers('date-picker').onClear('${fieldId}')"
+                            class="ml-2 inline-flex items-center px-2 py-2 text-gray-400 hover:text-gray-600 ${currentValue ? '' : 'hidden'}"
+                            title="Clear">
+                        <i class="fas fa-times"></i>
+                    </button>
+                `;
+            }
+
+            html += '</div>';
+
+            // Date constraint info
+            if (min || max) {
+                let constraintText = '';
+                if (min && max) {
+                    constraintText = `${min} to ${max}`;
+                } else if (min) {
+                    constraintText = `From ${min}`;
+                } else {
+                    constraintText = `Until ${max}`;
+                }
+                html += `<div class="text-xs text-gray-400 mt-1">${escapeHtml(constraintText)}</div>`;
+            }
+
+            // Error message area
+            html += `<div id="${fieldId}_error" class="text-sm text-red-600 mt-1 hidden"></div>`;
+
+            html += '</div>';
+
+            container.innerHTML = html;
+        },
+
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            return input ? input.value : '';
+        },
+
+        setValue: function(fieldId, value) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            const clearBtn = document.getElementById(`${safeId}_clear`);
+
+            if (input) {
+                input.value = value || '';
+            }
+            if (clearBtn) {
+                clearBtn.classList.toggle('hidden', !value);
+            }
+        },
+
+        validate: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            const errorEl = document.getElementById(`${safeId}_error`);
+
+            if (!input) return { valid: true, errors: [] };
+
+            const isValid = input.checkValidity();
+
+            if (errorEl) {
+                if (!isValid) {
+                    errorEl.textContent = input.validationMessage;
+                    errorEl.classList.remove('hidden');
+                    input.classList.add('border-red-500');
+                } else {
+                    errorEl.classList.add('hidden');
+                    input.classList.remove('border-red-500');
+                }
+            }
+
+            return { valid: isValid, errors: isValid ? [] : [input.validationMessage] };
+        },
+
+        handlers: {
+            onChange: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('date-picker');
+                const safeId = sanitizeId(fieldId);
+                const clearBtn = document.getElementById(`${safeId}_clear`);
+                const value = widget.getValue(fieldId);
+
+                if (clearBtn) {
+                    clearBtn.classList.toggle('hidden', !value);
+                }
+
+                widget.validate(fieldId);
+                triggerChange(fieldId, value);
+            },
+
+            onClear: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('date-picker');
+                widget.setValue(fieldId, '');
+                triggerChange(fieldId, '');
+            }
+        }
+    });
+
+    console.log('[DatePickerWidget] Date picker widget registered');
+})();

web_interface/static/v3/js/widgets/day-selector.js

@@ -0,0 +1,258 @@
+/**
+ * LEDMatrix Day Selector Widget
+ *
+ * Reusable checkbox group for selecting days of the week.
+ * Can be used by any plugin via x-widget: "day-selector" in their schema.
+ *
+ * Schema example:
+ * {
+ *   "active_days": {
+ *     "type": "array",
+ *     "x-widget": "day-selector",
+ *     "items": { "enum": ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"] },
+ *     "x-options": {
+ *       "format": "short",      // "short" (Mon) or "long" (Monday)
+ *       "layout": "horizontal", // "horizontal" or "vertical"
+ *       "selectAll": true       // Show "Select All" toggle
+ *     }
+ *   }
+ * }
+ *
+ * @module DaySelectorWidget
+ */
+
+(function() {
+    'use strict';
+
+    const DAYS = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
+
+    const DAY_LABELS = {
+        short: {
+            monday: 'Mon',
+            tuesday: 'Tue',
+            wednesday: 'Wed',
+            thursday: 'Thu',
+            friday: 'Fri',
+            saturday: 'Sat',
+            sunday: 'Sun'
+        },
+        long: {
+            monday: 'Monday',
+            tuesday: 'Tuesday',
+            wednesday: 'Wednesday',
+            thursday: 'Thursday',
+            friday: 'Friday',
+            saturday: 'Saturday',
+            sunday: 'Sunday'
+        }
+    };
+
+    // Use BaseWidget utilities if available
+    const base = window.BaseWidget ? new window.BaseWidget('DaySelector', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    window.LEDMatrixWidgets.register('day-selector', {
+        name: 'Day Selector Widget',
+        version: '1.0.0',
+
+        /**
+         * Render the day selector widget
+         * @param {HTMLElement} container - Container element
+         * @param {Object} config - Schema configuration
+         * @param {Array} value - Array of selected day names
+         * @param {Object} options - Additional options (fieldId, pluginId)
+         */
+        render: function(container, config, value, options) {
+            const fieldId = sanitizeId(options.fieldId || container.id || 'day_selector');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+            const requestedFormat = xOptions.format || 'long';
+            // Validate format exists in DAY_LABELS, default to 'long' if not
+            const format = DAY_LABELS.hasOwnProperty(requestedFormat) ? requestedFormat : 'long';
+            const layout = xOptions.layout || 'horizontal';
+            const showSelectAll = xOptions.selectAll !== false;
+
+            // Normalize value to array and filter to only valid days
+            const rawDays = Array.isArray(value) ? value : [];
+            const selectedDays = rawDays.filter(day => DAYS.includes(day));
+            const inputName = options.name || fieldId;
+
+            // Build HTML
+            let html = `<div id="${fieldId}_widget" class="day-selector-widget" data-field-id="${fieldId}">`;
+
+            // Hidden input to store the value as JSON array
+            html += `<input type="hidden" id="${fieldId}_data" name="${escapeHtml(inputName)}" value='${escapeHtml(JSON.stringify(selectedDays))}'>`;
+
+            // Select All toggle
+            if (showSelectAll) {
+                const allSelected = selectedDays.length === DAYS.length;
+                html += `
+                    <div class="mb-2">
+                        <label class="inline-flex items-center cursor-pointer">
+                            <input type="checkbox"
+                                   id="${fieldId}_select_all"
+                                   ${allSelected ? 'checked' : ''}
+                                   onchange="window.LEDMatrixWidgets.getHandlers('day-selector').onSelectAll('${fieldId}', this.checked)"
+                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                            <span class="ml-2 text-sm font-medium text-gray-700">Select All</span>
+                        </label>
+                    </div>
+                `;
+            }
+
+            // Day checkboxes
+            const containerClass = layout === 'horizontal'
+                ? 'flex flex-wrap gap-3'
+                : 'space-y-2';
+
+            html += `<div class="${containerClass}">`;
+
+            // Get the validated label map (guaranteed to exist due to format validation above)
+            const labelMap = DAY_LABELS[format] || DAY_LABELS.long;
+
+            for (const day of DAYS) {
+                const isChecked = selectedDays.includes(day);
+                const label = labelMap[day] || day;
+
+                html += `
+                    <label class="inline-flex items-center cursor-pointer">
+                        <input type="checkbox"
+                               id="${fieldId}_${day}"
+                               data-day="${day}"
+                               ${isChecked ? 'checked' : ''}
+                               onchange="window.LEDMatrixWidgets.getHandlers('day-selector').onChange('${fieldId}')"
+                               class="day-checkbox h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                        <span class="ml-1 text-sm text-gray-700">${escapeHtml(label)}</span>
+                    </label>
+                `;
+            }
+
+            html += '</div></div>';
+
+            container.innerHTML = html;
+        },
+
+        /**
+         * Get current selected days
+         * @param {string} fieldId - Field ID
+         * @returns {Array} Array of selected day names
+         */
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const widget = document.getElementById(`${safeId}_widget`);
+            if (!widget) return [];
+
+            const selectedDays = [];
+            const checkboxes = widget.querySelectorAll('.day-checkbox:checked');
+            checkboxes.forEach(cb => {
+                selectedDays.push(cb.dataset.day);
+            });
+
+            return selectedDays;
+        },
+
+        /**
+         * Set selected days
+         * @param {string} fieldId - Field ID
+         * @param {Array} days - Array of day names to select
+         */
+        setValue: function(fieldId, days) {
+            const safeId = sanitizeId(fieldId);
+            const widget = document.getElementById(`${safeId}_widget`);
+            if (!widget) return;
+
+            // Filter to only valid days
+            const rawDays = Array.isArray(days) ? days : [];
+            const selectedDays = rawDays.filter(day => DAYS.includes(day));
+
+            // Update checkboxes
+            DAYS.forEach(day => {
+                const checkbox = document.getElementById(`${safeId}_${day}`);
+                if (checkbox) {
+                    checkbox.checked = selectedDays.includes(day);
+                }
+            });
+
+            // Update hidden input
+            const hiddenInput = document.getElementById(`${safeId}_data`);
+            if (hiddenInput) {
+                hiddenInput.value = JSON.stringify(selectedDays);
+            }
+
+            // Update select all checkbox
+            const selectAllCheckbox = document.getElementById(`${safeId}_select_all`);
+            if (selectAllCheckbox) {
+                selectAllCheckbox.checked = selectedDays.length === DAYS.length;
+            }
+        },
+
+        handlers: {
+            /**
+             * Handle individual day checkbox change
+             * @param {string} fieldId - Field ID
+             */
+            onChange: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('day-selector');
+                const selectedDays = widget.getValue(fieldId);
+
+                // Update hidden input
+                const safeId = sanitizeId(fieldId);
+                const hiddenInput = document.getElementById(`${safeId}_data`);
+                if (hiddenInput) {
+                    hiddenInput.value = JSON.stringify(selectedDays);
+                }
+
+                // Update select all checkbox state
+                const selectAllCheckbox = document.getElementById(`${safeId}_select_all`);
+                if (selectAllCheckbox) {
+                    selectAllCheckbox.checked = selectedDays.length === DAYS.length;
+                }
+
+                // Trigger change event
+                triggerChange(fieldId, selectedDays);
+            },
+
+            /**
+             * Handle select all toggle
+             * @param {string} fieldId - Field ID
+             * @param {boolean} selectAll - Whether to select all
+             */
+            onSelectAll: function(fieldId, selectAll) {
+                const widget = window.LEDMatrixWidgets.get('day-selector');
+                widget.setValue(fieldId, selectAll ? DAYS.slice() : []);
+
+                // Trigger change event
+                triggerChange(fieldId, selectAll ? DAYS.slice() : []);
+            }
+        }
+    });
+
+    // Expose DAYS constant for external use
+    window.LEDMatrixWidgets.get('day-selector').DAYS = DAYS;
+    window.LEDMatrixWidgets.get('day-selector').DAY_LABELS = DAY_LABELS;
+
+    console.log('[DaySelectorWidget] Day selector widget registered');
+})();

web_interface/static/v3/js/widgets/email-input.js

@@ -0,0 +1,172 @@
+/**
+ * LEDMatrix Email Input Widget
+ *
+ * Email input with validation and common domain suggestions.
+ *
+ * Schema example:
+ * {
+ *   "email": {
+ *     "type": "string",
+ *     "format": "email",
+ *     "x-widget": "email-input",
+ *     "x-options": {
+ *       "placeholder": "user@example.com",
+ *       "showIcon": true
+ *     }
+ *   }
+ * }
+ *
+ * @module EmailInputWidget
+ */
+
+(function() {
+    'use strict';
+
+    const base = window.BaseWidget ? new window.BaseWidget('EmailInput', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    window.LEDMatrixWidgets.register('email-input', {
+        name: 'Email Input Widget',
+        version: '1.0.0',
+
+        render: function(container, config, value, options) {
+            const fieldId = sanitizeId(options.fieldId || container.id || 'email_input');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+            const placeholder = xOptions.placeholder || 'email@example.com';
+            const showIcon = xOptions.showIcon !== false;
+            const disabled = xOptions.disabled === true;
+            const required = xOptions.required === true;
+
+            const currentValue = value || '';
+
+            let html = `<div id="${fieldId}_widget" class="email-input-widget" data-field-id="${fieldId}">`;
+
+            html += '<div class="relative">';
+
+            if (showIcon) {
+                html += `
+                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                        <i class="fas fa-envelope text-gray-400"></i>
+                    </div>
+                `;
+            }
+
+            html += `
+                <input type="email"
+                       id="${fieldId}_input"
+                       name="${escapeHtml(options.name || fieldId)}"
+                       value="${escapeHtml(currentValue)}"
+                       placeholder="${escapeHtml(placeholder)}"
+                       ${disabled ? 'disabled' : ''}
+                       ${required ? 'required' : ''}
+                       onchange="window.LEDMatrixWidgets.getHandlers('email-input').onChange('${fieldId}')"
+                       oninput="window.LEDMatrixWidgets.getHandlers('email-input').onInput('${fieldId}')"
+                       class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 ${showIcon ? 'pl-10' : ''} ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} text-black placeholder:text-gray-400">
+            `;
+
+            html += '</div>';
+
+            // Validation indicator
+            html += `
+                <div id="${fieldId}_valid" class="text-sm text-green-600 mt-1 hidden">
+                    <i class="fas fa-check-circle mr-1"></i>Valid email format
+                </div>
+            `;
+
+            // Error message area
+            html += `<div id="${fieldId}_error" class="text-sm text-red-600 mt-1 hidden"></div>`;
+
+            html += '</div>';
+
+            container.innerHTML = html;
+        },
+
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            return input ? input.value : '';
+        },
+
+        setValue: function(fieldId, value) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            if (input) {
+                input.value = value || '';
+                this.handlers.onInput(fieldId);
+            }
+        },
+
+        validate: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            const errorEl = document.getElementById(`${safeId}_error`);
+            const validEl = document.getElementById(`${safeId}_valid`);
+
+            if (!input) return { valid: true, errors: [] };
+
+            const value = input.value;
+            const isValid = input.checkValidity() && (!value || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value));
+
+            if (errorEl && validEl) {
+                if (!isValid && value) {
+                    errorEl.textContent = 'Please enter a valid email address';
+                    errorEl.classList.remove('hidden');
+                    validEl.classList.add('hidden');
+                    input.classList.add('border-red-500');
+                    input.classList.remove('border-green-500');
+                } else if (isValid && value) {
+                    errorEl.classList.add('hidden');
+                    validEl.classList.remove('hidden');
+                    input.classList.remove('border-red-500');
+                    input.classList.add('border-green-500');
+                } else {
+                    errorEl.classList.add('hidden');
+                    validEl.classList.add('hidden');
+                    input.classList.remove('border-red-500', 'border-green-500');
+                }
+            }
+
+            return { valid: isValid, errors: isValid ? [] : ['Invalid email format'] };
+        },
+
+        handlers: {
+            onChange: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('email-input');
+                widget.validate(fieldId);
+                triggerChange(fieldId, widget.getValue(fieldId));
+            },
+
+            onInput: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('email-input');
+                // Validate on input for real-time feedback
+                widget.validate(fieldId);
+            }
+        }
+    });
+
+    console.log('[EmailInputWidget] Email input widget registered');
+})();

web_interface/static/v3/js/widgets/notification.js

@@ -0,0 +1,278 @@
+/**
+ * LEDMatrix Notification Widget
+ *
+ * Global notification/toast system for displaying messages to users.
+ * Consolidates all notification functionality into a single widget.
+ *
+ * Usage:
+ *   window.showNotification('Message here', 'success');
+ *   window.showNotification('Error occurred', 'error');
+ *   window.LEDMatrixWidgets.get('notification').show('Custom message', { type: 'warning', duration: 5000 });
+ *
+ * Types: success, error, warning, info (default)
+ *
+ * @module NotificationWidget
+ */
+
+(function() {
+    'use strict';
+
+    // Ensure LEDMatrixWidgets registry exists
+    if (typeof window.LEDMatrixWidgets === 'undefined') {
+        console.error('[NotificationWidget] LEDMatrixWidgets registry not found. Load registry.js first.');
+        return;
+    }
+
+    // Configuration
+    const CONFIG = {
+        containerId: 'notifications',
+        defaultDuration: 4000,
+        fadeOutDuration: 300,
+        maxNotifications: 5,
+        position: 'top-right' // top-right, top-left, bottom-right, bottom-left
+    };
+
+    // Type-specific styling
+    const TYPE_STYLES = {
+        success: {
+            bg: 'bg-green-500',
+            icon: 'fa-check-circle',
+            label: 'Success'
+        },
+        error: {
+            bg: 'bg-red-500',
+            icon: 'fa-exclamation-circle',
+            label: 'Error'
+        },
+        warning: {
+            bg: 'bg-yellow-500',
+            icon: 'fa-exclamation-triangle',
+            label: 'Warning'
+        },
+        info: {
+            bg: 'bg-blue-500',
+            icon: 'fa-info-circle',
+            label: 'Info'
+        }
+    };
+
+    // Track active notifications
+    let activeNotifications = [];
+    let notificationCounter = 0;
+
+    /**
+     * Get or create the notifications container
+     * @returns {HTMLElement} Container element
+     */
+    function getContainer() {
+        let container = document.getElementById(CONFIG.containerId);
+
+        if (!container) {
+            container = document.createElement('div');
+            container.id = CONFIG.containerId;
+            container.className = 'fixed top-4 right-4 z-50 space-y-2 pointer-events-none';
+            container.setAttribute('aria-live', 'polite');
+            container.setAttribute('aria-label', 'Notifications');
+            document.body.appendChild(container);
+        }
+
+        return container;
+    }
+
+    /**
+     * Escape HTML to prevent XSS
+     * @param {string} text - Text to escape
+     * @returns {string} Escaped text
+     */
+    function escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML;
+    }
+
+    /**
+     * Remove a notification by ID
+     * @param {string} notificationId - Notification ID
+     * @param {boolean} immediate - Skip fade animation
+     */
+    function removeNotification(notificationId, immediate = false) {
+        const notification = document.getElementById(notificationId);
+        if (!notification) return;
+
+        if (immediate) {
+            notification.remove();
+        } else {
+            notification.style.transition = `opacity ${CONFIG.fadeOutDuration}ms, transform ${CONFIG.fadeOutDuration}ms`;
+            notification.style.opacity = '0';
+            notification.style.transform = 'translateX(100%)';
+
+            setTimeout(() => {
+                notification.remove();
+            }, CONFIG.fadeOutDuration);
+        }
+
+        // Remove from tracking array
+        activeNotifications = activeNotifications.filter(id => id !== notificationId);
+    }
+
+    /**
+     * Show a notification
+     * @param {string} message - Message to display
+     * @param {Object|string} options - Options object or type string
+     * @returns {string} Notification ID (for manual dismissal)
+     */
+    function showNotification(message, options = {}) {
+        // Handle legacy call signature: showNotification(message, type)
+        if (typeof options === 'string') {
+            options = { type: options };
+        }
+
+        const type = options.type || 'info';
+        const duration = options.duration !== undefined ? options.duration : CONFIG.defaultDuration;
+        const showIcon = options.showIcon !== false;
+        const dismissible = options.dismissible !== false;
+
+        const style = TYPE_STYLES[type] || TYPE_STYLES.info;
+        const container = getContainer();
+        const notificationId = `notification_${++notificationCounter}`;
+
+        // Enforce max notifications limit
+        while (activeNotifications.length >= CONFIG.maxNotifications) {
+            removeNotification(activeNotifications[0], true);
+        }
+
+        // Create notification element
+        const notification = document.createElement('div');
+        notification.id = notificationId;
+        notification.className = `${style.bg} text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 pointer-events-auto transform transition-all duration-300 ease-out`;
+        notification.style.opacity = '0';
+        notification.style.transform = 'translateX(100%)';
+        notification.setAttribute('role', 'alert');
+
+        // Build content
+        let html = '';
+
+        if (showIcon) {
+            html += `<i class="fas ${style.icon} flex-shrink-0"></i>`;
+        }
+
+        html += `<span class="flex-1 text-sm">${escapeHtml(message)}</span>`;
+
+        if (dismissible) {
+            html += `
+                <button type="button"
+                        onclick="window.LEDMatrixWidgets.get('notification').dismiss('${notificationId}')"
+                        class="flex-shrink-0 ml-2 w-5 h-5 flex items-center justify-center rounded-full opacity-70 hover:opacity-100 hover:bg-white hover:bg-opacity-20 transition-all duration-150"
+                        aria-label="Dismiss notification">
+                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                </button>
+            `;
+        }
+
+        notification.innerHTML = html;
+        container.appendChild(notification);
+        activeNotifications.push(notificationId);
+
+        // Trigger animation (need to wait for DOM update)
+        requestAnimationFrame(() => {
+            notification.style.opacity = '1';
+            notification.style.transform = 'translateX(0)';
+        });
+
+        // Auto-dismiss (0 = no auto-dismiss)
+        if (duration > 0) {
+            setTimeout(() => {
+                removeNotification(notificationId);
+            }, duration);
+        }
+
+        // Log for debugging
+        console.log(`[${type.toUpperCase()}]`, message);
+
+        return notificationId;
+    }
+
+    /**
+     * Clear all active notifications
+     */
+    function clearAll() {
+        const ids = [...activeNotifications];
+        ids.forEach(id => removeNotification(id, true));
+    }
+
+    // Register the widget
+    window.LEDMatrixWidgets.register('notification', {
+        name: 'Notification Widget',
+        version: '1.0.0',
+
+        /**
+         * Show a notification
+         * @param {string} message - Message to display
+         * @param {Object} options - Configuration options
+         * @param {string} options.type - Notification type: success, error, warning, info
+         * @param {number} options.duration - Auto-dismiss duration in ms (0 = no auto-dismiss)
+         * @param {boolean} options.showIcon - Show type icon (default: true)
+         * @param {boolean} options.dismissible - Show dismiss button (default: true)
+         * @returns {string} Notification ID
+         */
+        show: showNotification,
+
+        /**
+         * Dismiss a specific notification
+         * @param {string} notificationId - Notification ID to dismiss
+         */
+        dismiss: function(notificationId) {
+            removeNotification(notificationId);
+        },
+
+        /**
+         * Clear all notifications
+         */
+        clearAll: clearAll,
+
+        /**
+         * Get active notification count
+         * @returns {number} Number of active notifications
+         */
+        getActiveCount: function() {
+            return activeNotifications.length;
+        },
+
+        // Widget interface methods (for consistency with other widgets)
+        render: function() {
+            // Notification widget doesn't render into a container
+            // It manages its own container
+            getContainer();
+        },
+
+        getValue: function() {
+            return activeNotifications.length;
+        },
+
+        setValue: function() {
+            // No-op for notification widget
+        },
+
+        handlers: {
+            dismiss: function(notificationId) {
+                removeNotification(notificationId);
+            }
+        }
+    });
+
+    // Global shorthand function (backwards compatible with existing code)
+    window.showNotification = function(message, type = 'info') {
+        return showNotification(message, { type: type });
+    };
+
+    // Initialize container on load
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', getContainer);
+    } else {
+        getContainer();
+    }
+
+    console.log('[NotificationWidget] Notification widget registered');
+})();

web_interface/static/v3/js/widgets/number-input.js

@@ -0,0 +1,242 @@
+/**
+ * LEDMatrix Number Input Widget
+ *
+ * Enhanced number input with min/max/step, formatting, and increment buttons.
+ *
+ * Schema example:
+ * {
+ *   "brightness": {
+ *     "type": "number",
+ *     "x-widget": "number-input",
+ *     "minimum": 0,
+ *     "maximum": 100,
+ *     "x-options": {
+ *       "step": 5,
+ *       "prefix": null,
+ *       "suffix": "%",
+ *       "showButtons": true,
+ *       "format": "integer"  // "integer", "decimal", "percent"
+ *     }
+ *   }
+ * }
+ *
+ * @module NumberInputWidget
+ */
+
+(function() {
+    'use strict';
+
+    const base = window.BaseWidget ? new window.BaseWidget('NumberInput', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    window.LEDMatrixWidgets.register('number-input', {
+        name: 'Number Input Widget',
+        version: '1.0.0',
+
+        render: function(container, config, value, options) {
+            // Guard against undefined options
+            options = options || {};
+            const fieldId = sanitizeId(options.fieldId || container.id || 'number_input');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+
+            // Sanitize min/max as valid numbers or null
+            const rawMin = config.minimum !== undefined ? config.minimum : (xOptions.min !== undefined ? xOptions.min : null);
+            const rawMax = config.maximum !== undefined ? config.maximum : (xOptions.max !== undefined ? xOptions.max : null);
+            const min = (rawMin !== null && Number.isFinite(Number(rawMin))) ? Number(rawMin) : null;
+            const max = (rawMax !== null && Number.isFinite(Number(rawMax))) ? Number(rawMax) : null;
+
+            // Sanitize step - must be a positive number or 'any'
+            const rawStep = xOptions.step || (config.type === 'integer' ? 1 : 'any');
+            const step = (rawStep === 'any' || (Number.isFinite(Number(rawStep)) && Number(rawStep) > 0))
+                ? (rawStep === 'any' ? 'any' : Number(rawStep))
+                : 1;
+            const prefix = xOptions.prefix || '';
+            const suffix = xOptions.suffix || '';
+            const showButtons = xOptions.showButtons !== false;
+            const disabled = xOptions.disabled === true;
+            const placeholder = xOptions.placeholder || '';
+
+            // Sanitize currentValue - ensure it's a safe numeric string or empty
+            const rawValue = value !== null && value !== undefined ? value : '';
+            const currentValue = rawValue === '' ? '' : (isNaN(Number(rawValue)) ? '' : String(Number(rawValue)));
+
+            // Escape values for safe HTML attribute interpolation
+            const safeMin = min !== null ? escapeHtml(String(min)) : '';
+            const safeMax = max !== null ? escapeHtml(String(max)) : '';
+            const safeStep = escapeHtml(String(step));
+
+            let html = `<div id="${fieldId}_widget" class="number-input-widget" data-field-id="${fieldId}" data-min="${safeMin}" data-max="${safeMax}" data-step="${safeStep}">`;
+
+            html += '<div class="flex items-center">';
+
+            if (prefix) {
+                html += `<span class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-md">${escapeHtml(prefix)}</span>`;
+            }
+
+            if (showButtons && !disabled) {
+                html += `
+                    <button type="button"
+                            onclick="window.LEDMatrixWidgets.getHandlers('number-input').onDecrement('${fieldId}')"
+                            class="inline-flex items-center px-3 py-2 text-gray-600 bg-gray-100 border border-r-0 border-gray-300 hover:bg-gray-200 ${prefix ? '' : 'rounded-l-md'}">
+                        <i class="fas fa-minus text-xs"></i>
+                    </button>
+                `;
+            }
+
+            const inputRoundedClass = showButtons || prefix || suffix ? '' : 'rounded-md';
+
+            html += `
+                <input type="number"
+                       id="${fieldId}_input"
+                       name="${escapeHtml(options.name || fieldId)}"
+                       value="${escapeHtml(currentValue)}"
+                       placeholder="${escapeHtml(placeholder)}"
+                       ${min !== null ? `min="${safeMin}"` : ''}
+                       ${max !== null ? `max="${safeMax}"` : ''}
+                       step="${safeStep}"
+                       ${disabled ? 'disabled' : ''}
+                       onchange="window.LEDMatrixWidgets.getHandlers('number-input').onChange('${fieldId}')"
+                       oninput="window.LEDMatrixWidgets.getHandlers('number-input').onInput('${fieldId}')"
+                       class="form-input w-24 text-center ${inputRoundedClass} border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} text-black placeholder:text-gray-400">
+            `;
+
+            if (showButtons && !disabled) {
+                html += `
+                    <button type="button"
+                            onclick="window.LEDMatrixWidgets.getHandlers('number-input').onIncrement('${fieldId}')"
+                            class="inline-flex items-center px-3 py-2 text-gray-600 bg-gray-100 border border-l-0 border-gray-300 hover:bg-gray-200 ${suffix ? '' : 'rounded-r-md'}">
+                        <i class="fas fa-plus text-xs"></i>
+                    </button>
+                `;
+            }
+
+            if (suffix) {
+                html += `<span class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-100 border border-l-0 border-gray-300 rounded-r-md">${escapeHtml(suffix)}</span>`;
+            }
+
+            html += '</div>';
+
+            // Range indicator if min/max specified
+            if (min !== null || max !== null) {
+                const rangeText = min !== null && max !== null
+                    ? `${min} - ${max}`
+                    : (min !== null ? `Min: ${min}` : `Max: ${max}`);
+                html += `<div class="text-xs text-gray-400 mt-1">${escapeHtml(rangeText)}</div>`;
+            }
+
+            // Error message area
+            html += `<div id="${fieldId}_error" class="text-sm text-red-600 mt-1 hidden"></div>`;
+
+            html += '</div>';
+
+            container.innerHTML = html;
+        },
+
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            if (!input || input.value === '') return null;
+            const num = parseFloat(input.value);
+            return isNaN(num) ? null : num;
+        },
+
+        setValue: function(fieldId, value) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            if (input) {
+                input.value = value !== null && value !== undefined ? value : '';
+            }
+        },
+
+        validate: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            const errorEl = document.getElementById(`${safeId}_error`);
+
+            if (!input) return { valid: true, errors: [] };
+
+            const isValid = input.checkValidity();
+
+            if (errorEl) {
+                if (!isValid) {
+                    errorEl.textContent = input.validationMessage;
+                    errorEl.classList.remove('hidden');
+                    input.classList.add('border-red-500');
+                } else {
+                    errorEl.classList.add('hidden');
+                    input.classList.remove('border-red-500');
+                }
+            }
+
+            return { valid: isValid, errors: isValid ? [] : [input.validationMessage] };
+        },
+
+        handlers: {
+            onChange: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('number-input');
+                widget.validate(fieldId);
+                triggerChange(fieldId, widget.getValue(fieldId));
+            },
+
+            onInput: function(fieldId) {
+                // Real-time input handling if needed
+            },
+
+            onIncrement: function(fieldId) {
+                const safeId = sanitizeId(fieldId);
+                const widget = document.getElementById(`${safeId}_widget`);
+                const input = document.getElementById(`${safeId}_input`);
+                if (!input || !widget) return;
+
+                const step = parseFloat(widget.dataset.step) || 1;
+                const max = widget.dataset.max !== '' ? parseFloat(widget.dataset.max) : Infinity;
+                const current = parseFloat(input.value) || 0;
+                const newValue = Math.min(current + step, max);
+
+                input.value = newValue;
+                this.onChange(fieldId);
+            },
+
+            onDecrement: function(fieldId) {
+                const safeId = sanitizeId(fieldId);
+                const widget = document.getElementById(`${safeId}_widget`);
+                const input = document.getElementById(`${safeId}_input`);
+                if (!input || !widget) return;
+
+                const step = parseFloat(widget.dataset.step) || 1;
+                const min = widget.dataset.min !== '' ? parseFloat(widget.dataset.min) : -Infinity;
+                const current = parseFloat(input.value) || 0;
+                const newValue = Math.max(current - step, min);
+
+                input.value = newValue;
+                this.onChange(fieldId);
+            }
+        }
+    });
+
+    console.log('[NumberInputWidget] Number input widget registered');
+})();

web_interface/static/v3/js/widgets/password-input.js

@@ -0,0 +1,313 @@
+/**
+ * LEDMatrix Password Input Widget
+ *
+ * Password input with show/hide toggle and strength indicator.
+ *
+ * Schema example:
+ * {
+ *   "password": {
+ *     "type": "string",
+ *     "x-widget": "password-input",
+ *     "x-options": {
+ *       "placeholder": "Enter password",
+ *       "showToggle": true,
+ *       "showStrength": false,
+ *       "minLength": 8,
+ *       "requireUppercase": false,
+ *       "requireNumber": false,
+ *       "requireSpecial": false
+ *     }
+ *   }
+ * }
+ *
+ * @module PasswordInputWidget
+ */
+
+(function() {
+    'use strict';
+
+    const base = window.BaseWidget ? new window.BaseWidget('PasswordInput', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    function calculateStrength(password, options) {
+        if (!password) return { score: 0, label: '', color: 'gray' };
+
+        let score = 0;
+        const minLength = options.minLength || 8;
+
+        // Length check
+        if (password.length >= minLength) score += 1;
+        if (password.length >= minLength + 4) score += 1;
+        if (password.length >= minLength + 8) score += 1;
+
+        // Character variety
+        if (/[a-z]/.test(password)) score += 1;
+        if (/[A-Z]/.test(password)) score += 1;
+        if (/[0-9]/.test(password)) score += 1;
+        if (/[^a-zA-Z0-9]/.test(password)) score += 1;
+
+        // Normalize to 0-4 scale
+        const normalizedScore = Math.min(4, Math.floor(score / 2));
+
+        const levels = [
+            { label: 'Very Weak', color: 'red' },
+            { label: 'Weak', color: 'orange' },
+            { label: 'Fair', color: 'yellow' },
+            { label: 'Good', color: 'lime' },
+            { label: 'Strong', color: 'green' }
+        ];
+
+        return {
+            score: normalizedScore,
+            ...levels[normalizedScore]
+        };
+    }
+
+    window.LEDMatrixWidgets.register('password-input', {
+        name: 'Password Input Widget',
+        version: '1.0.0',
+
+        render: function(container, config, value, options) {
+            const fieldId = sanitizeId(options.fieldId || container.id || 'password_input');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+            const placeholder = xOptions.placeholder || 'Enter password';
+            const showToggle = xOptions.showToggle !== false;
+            const showStrength = xOptions.showStrength === true;
+            // Validate and sanitize minLength as a non-negative integer
+            const rawMinLength = xOptions.minLength !== undefined ? parseInt(xOptions.minLength, 10) : 8;
+            const sanitizedMinLength = (Number.isFinite(rawMinLength) && Number.isInteger(rawMinLength) && rawMinLength >= 0) ? rawMinLength : 8;
+            const requireUppercase = xOptions.requireUppercase === true;
+            const requireNumber = xOptions.requireNumber === true;
+            const requireSpecial = xOptions.requireSpecial === true;
+            const disabled = xOptions.disabled === true;
+            const required = xOptions.required === true;
+
+            const currentValue = value || '';
+
+            let html = `<div id="${fieldId}_widget" class="password-input-widget" data-field-id="${fieldId}" data-min-length="${sanitizedMinLength}" data-require-uppercase="${requireUppercase}" data-require-number="${requireNumber}" data-require-special="${requireSpecial}">`;
+
+            html += '<div class="relative">';
+
+            html += `
+                <input type="password"
+                       id="${fieldId}_input"
+                       name="${escapeHtml(options.name || fieldId)}"
+                       value="${escapeHtml(currentValue)}"
+                       placeholder="${escapeHtml(placeholder)}"
+                       ${sanitizedMinLength > 0 ? `minlength="${sanitizedMinLength}"` : ''}
+                       ${disabled ? 'disabled' : ''}
+                       ${required ? 'required' : ''}
+                       onchange="window.LEDMatrixWidgets.getHandlers('password-input').onChange('${fieldId}')"
+                       oninput="window.LEDMatrixWidgets.getHandlers('password-input').onInput('${fieldId}')"
+                       class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 pr-10 ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} text-black placeholder:text-gray-400">
+            `;
+
+            if (showToggle && !disabled) {
+                html += `
+                    <button type="button"
+                            id="${fieldId}_toggle"
+                            onclick="window.LEDMatrixWidgets.getHandlers('password-input').onToggle('${fieldId}')"
+                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600"
+                            title="Show/hide password">
+                        <i id="${fieldId}_icon" class="fas fa-eye"></i>
+                    </button>
+                `;
+            }
+
+            html += '</div>';
+
+            // Strength indicator
+            if (showStrength) {
+                const strength = calculateStrength(currentValue, xOptions);
+                html += `
+                    <div id="${fieldId}_strength" class="mt-2 ${currentValue ? '' : 'hidden'}">
+                        <div class="flex gap-1 mb-1">
+                            <div class="h-1 flex-1 rounded bg-gray-200">
+                                <div id="${fieldId}_bar0" class="h-full rounded ${strength.score >= 1 ? 'bg-' + strength.color + '-500' : ''}" style="width: ${strength.score >= 1 ? '100%' : '0'}"></div>
+                            </div>
+                            <div class="h-1 flex-1 rounded bg-gray-200">
+                                <div id="${fieldId}_bar1" class="h-full rounded ${strength.score >= 2 ? 'bg-' + strength.color + '-500' : ''}" style="width: ${strength.score >= 2 ? '100%' : '0'}"></div>
+                            </div>
+                            <div class="h-1 flex-1 rounded bg-gray-200">
+                                <div id="${fieldId}_bar2" class="h-full rounded ${strength.score >= 3 ? 'bg-' + strength.color + '-500' : ''}" style="width: ${strength.score >= 3 ? '100%' : '0'}"></div>
+                            </div>
+                            <div class="h-1 flex-1 rounded bg-gray-200">
+                                <div id="${fieldId}_bar3" class="h-full rounded ${strength.score >= 4 ? 'bg-' + strength.color + '-500' : ''}" style="width: ${strength.score >= 4 ? '100%' : '0'}"></div>
+                            </div>
+                        </div>
+                        <span id="${fieldId}_strength_label" class="text-xs text-gray-500">${strength.label}</span>
+                    </div>
+                `;
+            }
+
+            // Error message area
+            html += `<div id="${fieldId}_error" class="text-sm text-red-600 mt-1 hidden"></div>`;
+
+            html += '</div>';
+
+            container.innerHTML = html;
+        },
+
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            return input ? input.value : '';
+        },
+
+        setValue: function(fieldId, value) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            if (input) {
+                input.value = value || '';
+                this.handlers.onInput(fieldId);
+            }
+        },
+
+        validate: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            const errorEl = document.getElementById(`${safeId}_error`);
+            const widget = document.getElementById(`${safeId}_widget`);
+
+            if (!input) return { valid: true, errors: [] };
+
+            const errors = [];
+            let isValid = input.checkValidity();
+
+            if (!isValid) {
+                errors.push(input.validationMessage);
+            } else if (input.value && widget) {
+                // Check custom validation requirements
+                const requireUppercase = widget.dataset.requireUppercase === 'true';
+                const requireNumber = widget.dataset.requireNumber === 'true';
+                const requireSpecial = widget.dataset.requireSpecial === 'true';
+
+                if (requireUppercase && !/[A-Z]/.test(input.value)) {
+                    isValid = false;
+                    errors.push('Password must contain at least one uppercase letter');
+                }
+                if (requireNumber && !/[0-9]/.test(input.value)) {
+                    isValid = false;
+                    errors.push('Password must contain at least one number');
+                }
+                if (requireSpecial && !/[^a-zA-Z0-9]/.test(input.value)) {
+                    isValid = false;
+                    errors.push('Password must contain at least one special character');
+                }
+            }
+
+            if (errorEl) {
+                if (!isValid && errors.length > 0) {
+                    errorEl.textContent = errors[0];
+                    errorEl.classList.remove('hidden');
+                    input.classList.add('border-red-500');
+                } else {
+                    errorEl.classList.add('hidden');
+                    input.classList.remove('border-red-500');
+                }
+            }
+
+            return { valid: isValid, errors };
+        },
+
+        handlers: {
+            onChange: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('password-input');
+                widget.validate(fieldId);
+                triggerChange(fieldId, widget.getValue(fieldId));
+            },
+
+            onInput: function(fieldId) {
+                const safeId = sanitizeId(fieldId);
+                const input = document.getElementById(`${safeId}_input`);
+                const strengthEl = document.getElementById(`${safeId}_strength`);
+                const strengthLabel = document.getElementById(`${safeId}_strength_label`);
+                const widget = document.getElementById(`${safeId}_widget`);
+
+                if (strengthEl && input) {
+                    const value = input.value;
+                    const minLength = parseInt(widget?.dataset.minLength || '8', 10);
+
+                    if (value) {
+                        strengthEl.classList.remove('hidden');
+                        const strength = calculateStrength(value, { minLength });
+
+                        // Update bars
+                        const colors = {
+                            red: 'bg-red-500',
+                            orange: 'bg-orange-500',
+                            yellow: 'bg-yellow-500',
+                            lime: 'bg-lime-500',
+                            green: 'bg-green-500'
+                        };
+                        const colorClass = colors[strength.color] || 'bg-gray-300';
+
+                        for (let i = 0; i < 4; i++) {
+                            const bar = document.getElementById(`${safeId}_bar${i}`);
+                            if (bar) {
+                                // Remove all color classes
+                                bar.className = 'h-full rounded';
+                                if (i < strength.score) {
+                                    bar.classList.add(colorClass);
+                                    bar.style.width = '100%';
+                                } else {
+                                    bar.style.width = '0';
+                                }
+                            }
+                        }
+
+                        if (strengthLabel) {
+                            strengthLabel.textContent = strength.label;
+                        }
+                    } else {
+                        strengthEl.classList.add('hidden');
+                    }
+                }
+            },
+
+            onToggle: function(fieldId) {
+                const safeId = sanitizeId(fieldId);
+                const input = document.getElementById(`${safeId}_input`);
+                const icon = document.getElementById(`${safeId}_icon`);
+
+                if (input && icon) {
+                    if (input.type === 'password') {
+                        input.type = 'text';
+                        icon.classList.remove('fa-eye');
+                        icon.classList.add('fa-eye-slash');
+                    } else {
+                        input.type = 'password';
+                        icon.classList.remove('fa-eye-slash');
+                        icon.classList.add('fa-eye');
+                    }
+                }
+            }
+        }
+    });
+
+    console.log('[PasswordInputWidget] Password input widget registered');
+})();

web_interface/static/v3/js/widgets/radio-group.js

@@ -0,0 +1,139 @@
+/**
+ * LEDMatrix Radio Group Widget
+ *
+ * Exclusive option selection with radio buttons.
+ *
+ * Schema example:
+ * {
+ *   "displayMode": {
+ *     "type": "string",
+ *     "x-widget": "radio-group",
+ *     "enum": ["auto", "manual", "scheduled"],
+ *     "x-options": {
+ *       "layout": "vertical",  // "vertical", "horizontal"
+ *       "labels": {
+ *         "auto": "Automatic",
+ *         "manual": "Manual Control",
+ *         "scheduled": "Scheduled"
+ *       },
+ *       "descriptions": {
+ *         "auto": "System decides when to display",
+ *         "manual": "You control when content shows",
+ *         "scheduled": "Display at specific times"
+ *       }
+ *     }
+ *   }
+ * }
+ *
+ * @module RadioGroupWidget
+ */
+
+(function() {
+    'use strict';
+
+    const base = window.BaseWidget ? new window.BaseWidget('RadioGroup', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    window.LEDMatrixWidgets.register('radio-group', {
+        name: 'Radio Group Widget',
+        version: '1.0.0',
+
+        render: function(container, config, value, options) {
+            const fieldId = sanitizeId(options.fieldId || container.id || 'radio_group');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+            const enumValues = config.enum || xOptions.options || [];
+            const layout = xOptions.layout || 'vertical';
+            const labels = xOptions.labels || {};
+            const descriptions = xOptions.descriptions || {};
+            const disabled = xOptions.disabled === true;
+
+            const currentValue = value !== null && value !== undefined ? String(value) : '';
+
+            const containerClass = layout === 'horizontal' ? 'flex flex-wrap gap-4' : 'space-y-3';
+
+            let html = `<div id="${fieldId}_widget" class="radio-group-widget ${containerClass}" data-field-id="${fieldId}">`;
+
+            for (const optValue of enumValues) {
+                const optId = `${fieldId}_${sanitizeId(String(optValue))}`;
+                const label = labels[optValue] || String(optValue).replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                const description = descriptions[optValue] || '';
+                const isChecked = String(optValue) === currentValue;
+
+                html += `
+                    <label class="flex items-start cursor-pointer ${disabled ? 'opacity-50' : ''}">
+                        <div class="flex items-center h-5">
+                            <input type="radio"
+                                   id="${optId}"
+                                   name="${escapeHtml(options.name || fieldId)}"
+                                   value="${escapeHtml(String(optValue))}"
+                                   ${isChecked ? 'checked' : ''}
+                                   ${disabled ? 'disabled' : ''}
+                                   onchange="window.LEDMatrixWidgets.getHandlers('radio-group').onChange('${fieldId}', this.value)"
+                                   class="h-4 w-4 text-blue-600 border-gray-300 focus:ring-blue-500 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}">
+                        </div>
+                        <div class="ml-3">
+                            <span class="text-sm font-medium text-gray-900">${escapeHtml(label)}</span>
+                            ${description ? `<p class="text-xs text-gray-500">${escapeHtml(description)}</p>` : ''}
+                        </div>
+                    </label>
+                `;
+            }
+
+            html += '</div>';
+
+            container.innerHTML = html;
+        },
+
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const widget = document.getElementById(`${safeId}_widget`);
+            if (!widget) return '';
+
+            const checked = widget.querySelector('input[type="radio"]:checked');
+            return checked ? checked.value : '';
+        },
+
+        setValue: function(fieldId, value) {
+            const safeId = sanitizeId(fieldId);
+            const widget = document.getElementById(`${safeId}_widget`);
+            if (!widget) return;
+
+            const radios = widget.querySelectorAll('input[type="radio"]');
+            radios.forEach(radio => {
+                radio.checked = radio.value === String(value);
+            });
+        },
+
+        handlers: {
+            onChange: function(fieldId, value) {
+                triggerChange(fieldId, value);
+            }
+        }
+    });
+
+    console.log('[RadioGroupWidget] Radio group widget registered');
+})();

web_interface/static/v3/js/widgets/schedule-picker.js

@@ -0,0 +1,542 @@
+/**
+ * LEDMatrix Schedule Picker Widget
+ *
+ * Composite widget combining enable toggle, mode switch (global/per-day),
+ * and time range configurations. Composes day-selector and time-range widgets.
+ *
+ * Can be used standalone in schedule.html or by plugins via x-widget: "schedule-picker".
+ *
+ * Schema example:
+ * {
+ *   "schedule": {
+ *     "type": "object",
+ *     "x-widget": "schedule-picker",
+ *     "x-options": {
+ *       "showModeToggle": true,     // Allow switching global/per-day
+ *       "showEnableToggle": true,   // Show enabled checkbox
+ *       "compactMode": false,       // Compact layout for embedded use
+ *       "defaultMode": "global"     // Default mode: "global" or "per_day"
+ *     }
+ *   }
+ * }
+ *
+ * API-compatible output format:
+ * {
+ *   enabled: boolean,
+ *   mode: "global" | "per_day",
+ *   start_time: "HH:MM",           // if global mode
+ *   end_time: "HH:MM",             // if global mode
+ *   days: {                        // if per_day mode
+ *     monday: { enabled: boolean, start_time: "HH:MM", end_time: "HH:MM" },
+ *     ...
+ *   }
+ * }
+ *
+ * @module SchedulePickerWidget
+ */
+
+(function() {
+    'use strict';
+
+    const DAYS = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
+
+    const DAY_LABELS = {
+        monday: 'Monday',
+        tuesday: 'Tuesday',
+        wednesday: 'Wednesday',
+        thursday: 'Thursday',
+        friday: 'Friday',
+        saturday: 'Saturday',
+        sunday: 'Sunday'
+    };
+
+    // Use BaseWidget utilities if available
+    const base = window.BaseWidget ? new window.BaseWidget('SchedulePicker', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    /**
+     * Generate default schedule config
+     */
+    function getDefaultSchedule() {
+        const days = {};
+        DAYS.forEach(day => {
+            days[day] = {
+                enabled: true,
+                start_time: '07:00',
+                end_time: '23:00'
+            };
+        });
+        return {
+            enabled: false,
+            mode: 'global',
+            start_time: '07:00',
+            end_time: '23:00',
+            days: days
+        };
+    }
+
+    /**
+     * Merge user value with defaults
+     */
+    function normalizeSchedule(value) {
+        const defaults = getDefaultSchedule();
+        if (!value || typeof value !== 'object') {
+            return defaults;
+        }
+
+        const schedule = {
+            enabled: value.enabled === true,
+            mode: value.mode === 'per_day' ? 'per_day' : 'global',
+            start_time: value.start_time || defaults.start_time,
+            end_time: value.end_time || defaults.end_time,
+            days: {}
+        };
+
+        // Merge days
+        DAYS.forEach(day => {
+            const dayConfig = (value.days && value.days[day]) || defaults.days[day];
+            schedule.days[day] = {
+                enabled: dayConfig.enabled !== false,
+                start_time: dayConfig.start_time || defaults.days[day].start_time,
+                end_time: dayConfig.end_time || defaults.days[day].end_time
+            };
+        });
+
+        return schedule;
+    }
+
+    window.LEDMatrixWidgets.register('schedule-picker', {
+        name: 'Schedule Picker Widget',
+        version: '1.0.0',
+
+        /**
+         * Render the schedule picker widget
+         * @param {HTMLElement} container - Container element
+         * @param {Object} config - Schema configuration
+         * @param {Object} value - Schedule configuration object
+         * @param {Object} options - Additional options (fieldId, pluginId)
+         */
+        render: function(container, config, value, options) {
+            const fieldId = sanitizeId(options.fieldId || container.id || 'schedule');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+            const showModeToggle = xOptions.showModeToggle !== false;
+            const showEnableToggle = xOptions.showEnableToggle !== false;
+            const compactMode = xOptions.compactMode === true;
+
+            const schedule = normalizeSchedule(value);
+
+            let html = `<div id="${fieldId}_widget" class="schedule-picker-widget" data-field-id="${fieldId}">`;
+
+            // Hidden inputs for API-compatible form submission
+            html += this._renderHiddenInputs(fieldId, schedule);
+
+            // Enable toggle
+            if (showEnableToggle) {
+                html += `
+                    <div class="bg-blue-50 rounded-lg p-4 mb-4">
+                        <label class="flex items-center cursor-pointer">
+                            <input type="checkbox"
+                                   id="${fieldId}_enabled"
+                                   ${schedule.enabled ? 'checked' : ''}
+                                   onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onEnabledChange('${fieldId}', this.checked)"
+                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                            <span class="ml-2 text-sm font-medium text-gray-900">Enable Schedule</span>
+                        </label>
+                        <p class="mt-1 text-sm text-gray-600">When enabled, the display will only operate during specified hours.</p>
+                    </div>
+                `;
+            }
+
+            // Mode selection
+            if (showModeToggle) {
+                html += `
+                    <div class="bg-gray-50 rounded-lg p-4 mb-4">
+                        <h3 class="text-md font-medium text-gray-900 mb-4">Schedule Mode</h3>
+                        <div class="space-y-3">
+                            <label class="flex items-center cursor-pointer">
+                                <input type="radio"
+                                       name="${fieldId}_mode"
+                                       value="global"
+                                       id="${fieldId}_mode_global"
+                                       ${schedule.mode === 'global' ? 'checked' : ''}
+                                       onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onModeChange('${fieldId}', 'global')"
+                                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
+                                <span class="ml-2 text-sm font-medium text-gray-900">Global Schedule</span>
+                            </label>
+                            <p class="ml-6 text-sm text-gray-600">Use the same start and end time for all days of the week</p>
+
+                            <label class="flex items-center cursor-pointer mt-4">
+                                <input type="radio"
+                                       name="${fieldId}_mode"
+                                       value="per_day"
+                                       id="${fieldId}_mode_per_day"
+                                       ${schedule.mode === 'per_day' ? 'checked' : ''}
+                                       onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onModeChange('${fieldId}', 'per_day')"
+                                       class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
+                                <span class="ml-2 text-sm font-medium text-gray-900">Per-Day Schedule</span>
+                            </label>
+                            <p class="ml-6 text-sm text-gray-600">Set different times for each day of the week</p>
+                        </div>
+                    </div>
+                `;
+            }
+
+            // Global schedule section
+            const globalDisplay = schedule.mode === 'global' ? 'block' : 'none';
+            html += `
+                <div id="${fieldId}_global_section" class="bg-gray-50 rounded-lg p-4 mb-4" style="display: ${globalDisplay};">
+                    <h3 class="text-md font-medium text-gray-900 mb-4">Global Times</h3>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                        <div class="form-group">
+                            <label for="${fieldId}_global_start" class="block text-sm font-medium text-gray-700">Start Time</label>
+                            <input type="time"
+                                   id="${fieldId}_global_start"
+                                   value="${escapeHtml(schedule.start_time)}"
+                                   onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onGlobalTimeChange('${fieldId}')"
+                                   class="form-control mt-1">
+                            <p class="mt-1 text-sm text-gray-600">When to start displaying content (HH:MM)</p>
+                        </div>
+                        <div class="form-group">
+                            <label for="${fieldId}_global_end" class="block text-sm font-medium text-gray-700">End Time</label>
+                            <input type="time"
+                                   id="${fieldId}_global_end"
+                                   value="${escapeHtml(schedule.end_time)}"
+                                   onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onGlobalTimeChange('${fieldId}')"
+                                   class="form-control mt-1">
+                            <p class="mt-1 text-sm text-gray-600">When to stop displaying content (HH:MM)</p>
+                        </div>
+                    </div>
+                </div>
+            `;
+
+            // Per-day schedule section
+            const perDayDisplay = schedule.mode === 'per_day' ? 'block' : 'none';
+            html += `
+                <div id="${fieldId}_perday_section" style="display: ${perDayDisplay};">
+                    <h3 class="text-md font-medium text-gray-900 mb-4">Day-Specific Times</h3>
+                    <div class="bg-gray-50 rounded-lg p-4">
+                        <div class="overflow-x-auto">
+                            <table class="min-w-full divide-y divide-gray-200">
+                                <thead>
+                                    <tr class="bg-gray-100">
+                                        <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">Day</th>
+                                        <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">Enabled</th>
+                                        <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">Start</th>
+                                        <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">End</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="bg-white divide-y divide-gray-200">
+            `;
+
+            // Render each day row
+            DAYS.forEach(day => {
+                const dayConfig = schedule.days[day];
+                const disabled = !dayConfig.enabled;
+                const disabledClass = disabled ? 'bg-gray-100' : '';
+
+                html += `
+                    <tr class="hover:bg-gray-50" id="${fieldId}_row_${day}">
+                        <td class="px-3 py-2 whitespace-nowrap">
+                            <span class="text-sm font-medium text-gray-900">${escapeHtml(DAY_LABELS[day])}</span>
+                        </td>
+                        <td class="px-3 py-2 whitespace-nowrap">
+                            <input type="checkbox"
+                                   id="${fieldId}_${day}_enabled"
+                                   ${dayConfig.enabled ? 'checked' : ''}
+                                   onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onDayEnabledChange('${fieldId}', '${day}', this.checked)"
+                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
+                        </td>
+                        <td class="px-3 py-2 whitespace-nowrap">
+                            <input type="time"
+                                   id="${fieldId}_${day}_start"
+                                   value="${escapeHtml(dayConfig.start_time)}"
+                                   ${disabled ? 'disabled' : ''}
+                                   onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onDayTimeChange('${fieldId}', '${day}')"
+                                   class="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 ${disabledClass}">
+                        </td>
+                        <td class="px-3 py-2 whitespace-nowrap">
+                            <input type="time"
+                                   id="${fieldId}_${day}_end"
+                                   value="${escapeHtml(dayConfig.end_time)}"
+                                   ${disabled ? 'disabled' : ''}
+                                   onchange="window.LEDMatrixWidgets.getHandlers('schedule-picker').onDayTimeChange('${fieldId}', '${day}')"
+                                   class="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 ${disabledClass}">
+                        </td>
+                    </tr>
+                `;
+            });
+
+            html += `
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            `;
+
+            html += '</div>';
+
+            container.innerHTML = html;
+        },
+
+        /**
+         * Render hidden inputs for form submission
+         * These match the existing API format
+         */
+        _renderHiddenInputs: function(fieldId, schedule) {
+            let html = '';
+
+            // Enabled state (hidden input ensures value is always sent, even when checkbox is unchecked)
+            html += `<input type="hidden" id="${fieldId}_enabled_hidden" name="enabled" value="${schedule.enabled}">`;
+
+            // Mode indicator (for the widget to track internally)
+            html += `<input type="hidden" id="${fieldId}_mode_value" name="mode" value="${schedule.mode}">`;
+
+            // Global times (used when mode is global)
+            html += `<input type="hidden" id="${fieldId}_start_time_hidden" name="start_time" value="${escapeHtml(schedule.start_time)}">`;
+            html += `<input type="hidden" id="${fieldId}_end_time_hidden" name="end_time" value="${escapeHtml(schedule.end_time)}">`;
+
+            // Per-day values (used when mode is per_day)
+            DAYS.forEach(day => {
+                const dayConfig = schedule.days[day];
+                html += `<input type="hidden" id="${fieldId}_${day}_enabled_hidden" name="${day}_enabled" value="${dayConfig.enabled}">`;
+                html += `<input type="hidden" id="${fieldId}_${day}_start_hidden" name="${day}_start" value="${escapeHtml(dayConfig.start_time)}">`;
+                html += `<input type="hidden" id="${fieldId}_${day}_end_hidden" name="${day}_end" value="${escapeHtml(dayConfig.end_time)}">`;
+            });
+
+            return html;
+        },
+
+        /**
+         * Get current schedule value
+         * @param {string} fieldId - Field ID
+         * @returns {Object} Schedule configuration object
+         */
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const widget = document.getElementById(`${safeId}_widget`);
+            if (!widget) return getDefaultSchedule();
+
+            const enabledCheckbox = document.getElementById(`${safeId}_enabled`);
+            const modeGlobal = document.getElementById(`${safeId}_mode_global`);
+            const globalStart = document.getElementById(`${safeId}_global_start`);
+            const globalEnd = document.getElementById(`${safeId}_global_end`);
+
+            const schedule = {
+                enabled: enabledCheckbox ? enabledCheckbox.checked : false,
+                mode: (modeGlobal && modeGlobal.checked) ? 'global' : 'per_day',
+                start_time: globalStart ? globalStart.value : '07:00',
+                end_time: globalEnd ? globalEnd.value : '23:00',
+                days: {}
+            };
+
+            DAYS.forEach(day => {
+                const dayEnabled = document.getElementById(`${safeId}_${day}_enabled`);
+                const dayStart = document.getElementById(`${safeId}_${day}_start`);
+                const dayEnd = document.getElementById(`${safeId}_${day}_end`);
+
+                schedule.days[day] = {
+                    enabled: dayEnabled ? dayEnabled.checked : true,
+                    start_time: dayStart ? dayStart.value : '07:00',
+                    end_time: dayEnd ? dayEnd.value : '23:00'
+                };
+            });
+
+            return schedule;
+        },
+
+        /**
+         * Set schedule value
+         * @param {string} fieldId - Field ID
+         * @param {Object} value - Schedule configuration object
+         */
+        setValue: function(fieldId, value) {
+            const safeId = sanitizeId(fieldId);
+            const schedule = normalizeSchedule(value);
+
+            // Set enabled
+            const enabledCheckbox = document.getElementById(`${safeId}_enabled`);
+            if (enabledCheckbox) enabledCheckbox.checked = schedule.enabled;
+
+            // Set mode
+            const modeGlobal = document.getElementById(`${safeId}_mode_global`);
+            const modePerDay = document.getElementById(`${safeId}_mode_per_day`);
+            if (modeGlobal) modeGlobal.checked = schedule.mode === 'global';
+            if (modePerDay) modePerDay.checked = schedule.mode === 'per_day';
+
+            // Set global times
+            const globalStart = document.getElementById(`${safeId}_global_start`);
+            const globalEnd = document.getElementById(`${safeId}_global_end`);
+            if (globalStart) globalStart.value = schedule.start_time;
+            if (globalEnd) globalEnd.value = schedule.end_time;
+
+            // Set per-day values
+            DAYS.forEach(day => {
+                const dayConfig = schedule.days[day];
+                const dayEnabled = document.getElementById(`${safeId}_${day}_enabled`);
+                const dayStart = document.getElementById(`${safeId}_${day}_start`);
+                const dayEnd = document.getElementById(`${safeId}_${day}_end`);
+
+                if (dayEnabled) dayEnabled.checked = dayConfig.enabled;
+                if (dayStart) {
+                    dayStart.value = dayConfig.start_time;
+                    dayStart.disabled = !dayConfig.enabled;
+                    dayStart.classList.toggle('bg-gray-100', !dayConfig.enabled);
+                }
+                if (dayEnd) {
+                    dayEnd.value = dayConfig.end_time;
+                    dayEnd.disabled = !dayConfig.enabled;
+                    dayEnd.classList.toggle('bg-gray-100', !dayConfig.enabled);
+                }
+            });
+
+            // Update visibility
+            this.handlers.onModeChange(fieldId, schedule.mode);
+
+            // Update hidden inputs
+            this._updateHiddenInputs(fieldId);
+        },
+
+        /**
+         * Update all hidden inputs to match current state
+         */
+        _updateHiddenInputs: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const schedule = this.getValue(fieldId);
+
+            // Enabled
+            const enabledHidden = document.getElementById(`${safeId}_enabled_hidden`);
+            if (enabledHidden) enabledHidden.value = schedule.enabled;
+
+            // Mode
+            const modeHidden = document.getElementById(`${safeId}_mode_value`);
+            if (modeHidden) modeHidden.value = schedule.mode;
+
+            // Global times
+            const startHidden = document.getElementById(`${safeId}_start_time_hidden`);
+            const endHidden = document.getElementById(`${safeId}_end_time_hidden`);
+            if (startHidden) startHidden.value = schedule.start_time;
+            if (endHidden) endHidden.value = schedule.end_time;
+
+            // Per-day values
+            DAYS.forEach(day => {
+                const dayConfig = schedule.days[day];
+                const enabledHidden = document.getElementById(`${safeId}_${day}_enabled_hidden`);
+                const startHidden = document.getElementById(`${safeId}_${day}_start_hidden`);
+                const endHidden = document.getElementById(`${safeId}_${day}_end_hidden`);
+
+                if (enabledHidden) enabledHidden.value = dayConfig.enabled;
+                if (startHidden) startHidden.value = dayConfig.start_time;
+                if (endHidden) endHidden.value = dayConfig.end_time;
+            });
+        },
+
+        handlers: {
+            /**
+             * Handle enabled toggle change
+             */
+            onEnabledChange: function(fieldId, enabled) {
+                const widget = window.LEDMatrixWidgets.get('schedule-picker');
+                widget._updateHiddenInputs(fieldId);
+                triggerChange(fieldId, widget.getValue(fieldId));
+            },
+
+            /**
+             * Handle mode switch
+             */
+            onModeChange: function(fieldId, mode) {
+                const safeId = sanitizeId(fieldId);
+                const globalSection = document.getElementById(`${safeId}_global_section`);
+                const perDaySection = document.getElementById(`${safeId}_perday_section`);
+
+                if (globalSection) globalSection.style.display = mode === 'global' ? 'block' : 'none';
+                if (perDaySection) perDaySection.style.display = mode === 'per_day' ? 'block' : 'none';
+
+                const widget = window.LEDMatrixWidgets.get('schedule-picker');
+                widget._updateHiddenInputs(fieldId);
+                triggerChange(fieldId, widget.getValue(fieldId));
+            },
+
+            /**
+             * Handle global time change
+             */
+            onGlobalTimeChange: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('schedule-picker');
+                widget._updateHiddenInputs(fieldId);
+                triggerChange(fieldId, widget.getValue(fieldId));
+            },
+
+            /**
+             * Handle day enabled change
+             */
+            onDayEnabledChange: function(fieldId, day, enabled) {
+                const safeId = sanitizeId(fieldId);
+                const dayStart = document.getElementById(`${safeId}_${day}_start`);
+                const dayEnd = document.getElementById(`${safeId}_${day}_end`);
+
+                if (dayStart) {
+                    dayStart.disabled = !enabled;
+                    dayStart.classList.toggle('bg-gray-100', !enabled);
+                    // Set default value only when enabling and input is empty
+                    if (enabled && !dayStart.value) {
+                        dayStart.value = '07:00';
+                    }
+                }
+
+                if (dayEnd) {
+                    dayEnd.disabled = !enabled;
+                    dayEnd.classList.toggle('bg-gray-100', !enabled);
+                    // Set default value only when enabling and input is empty
+                    if (enabled && !dayEnd.value) {
+                        dayEnd.value = '23:00';
+                    }
+                }
+
+                const widget = window.LEDMatrixWidgets.get('schedule-picker');
+                widget._updateHiddenInputs(fieldId);
+                triggerChange(fieldId, widget.getValue(fieldId));
+            },
+
+            /**
+             * Handle day time change
+             */
+            onDayTimeChange: function(fieldId, day) {
+                const widget = window.LEDMatrixWidgets.get('schedule-picker');
+                widget._updateHiddenInputs(fieldId);
+                triggerChange(fieldId, widget.getValue(fieldId));
+            }
+        }
+    });
+
+    // Expose constants for external use
+    window.LEDMatrixWidgets.get('schedule-picker').DAYS = DAYS;
+    window.LEDMatrixWidgets.get('schedule-picker').DAY_LABELS = DAY_LABELS;
+    window.LEDMatrixWidgets.get('schedule-picker').getDefaultSchedule = getDefaultSchedule;
+    window.LEDMatrixWidgets.get('schedule-picker').normalizeSchedule = normalizeSchedule;
+
+    console.log('[SchedulePickerWidget] Schedule picker widget registered');
+})();

web_interface/static/v3/js/widgets/select-dropdown.js

@@ -0,0 +1,128 @@
+/**
+ * LEDMatrix Select Dropdown Widget
+ *
+ * Enhanced dropdown select with custom labels.
+ *
+ * Schema example:
+ * {
+ *   "theme": {
+ *     "type": "string",
+ *     "x-widget": "select-dropdown",
+ *     "enum": ["light", "dark", "auto"],
+ *     "x-options": {
+ *       "placeholder": "Select a theme...",
+ *       "labels": {
+ *         "light": "Light Mode",
+ *         "dark": "Dark Mode",
+ *         "auto": "System Default"
+ *       }
+ *     }
+ *   }
+ * }
+ *
+ * @module SelectDropdownWidget
+ */
+
+(function() {
+    'use strict';
+
+    const base = window.BaseWidget ? new window.BaseWidget('SelectDropdown', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    window.LEDMatrixWidgets.register('select-dropdown', {
+        name: 'Select Dropdown Widget',
+        version: '1.0.0',
+
+        render: function(container, config, value, options) {
+            const fieldId = sanitizeId(options.fieldId || container.id || 'select');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+            const enumValues = config.enum || xOptions.options || [];
+            const placeholder = xOptions.placeholder || 'Select...';
+            const labels = xOptions.labels || {};
+            const icons = xOptions.icons || {};
+            const disabled = xOptions.disabled === true;
+            const required = xOptions.required === true;
+
+            const currentValue = value !== null && value !== undefined ? String(value) : '';
+
+            let html = `<div id="${fieldId}_widget" class="select-dropdown-widget" data-field-id="${fieldId}">`;
+
+            html += `
+                <select id="${fieldId}_input"
+                        name="${escapeHtml(options.name || fieldId)}"
+                        ${disabled ? 'disabled' : ''}
+                        ${required ? 'required' : ''}
+                        onchange="window.LEDMatrixWidgets.getHandlers('select-dropdown').onChange('${fieldId}')"
+                        class="form-select w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} text-black">
+            `;
+
+            // Placeholder option
+            if (placeholder && !required) {
+                html += `<option value="" ${!currentValue ? 'selected' : ''}>${escapeHtml(placeholder)}</option>`;
+            }
+
+            // Options
+            for (const optValue of enumValues) {
+                const label = labels[optValue] || String(optValue).replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+                const isSelected = String(optValue) === currentValue;
+                html += `<option value="${escapeHtml(String(optValue))}" ${isSelected ? 'selected' : ''}>${escapeHtml(label)}</option>`;
+            }
+
+            html += '</select>';
+
+            // Error message area
+            html += `<div id="${fieldId}_error" class="text-sm text-red-600 mt-1 hidden"></div>`;
+
+            html += '</div>';
+
+            container.innerHTML = html;
+        },
+
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            return input ? input.value : '';
+        },
+
+        setValue: function(fieldId, value) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            if (input) {
+                input.value = value !== null && value !== undefined ? String(value) : '';
+            }
+        },
+
+        handlers: {
+            onChange: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('select-dropdown');
+                triggerChange(fieldId, widget.getValue(fieldId));
+            }
+        }
+    });
+
+    console.log('[SelectDropdownWidget] Select dropdown widget registered');
+})();

web_interface/static/v3/js/widgets/slider.js

@@ -0,0 +1,173 @@
+/**
+ * LEDMatrix Slider Widget
+ *
+ * Range slider with value display and optional tick marks.
+ *
+ * Schema example:
+ * {
+ *   "volume": {
+ *     "type": "number",
+ *     "x-widget": "slider",
+ *     "minimum": 0,
+ *     "maximum": 100,
+ *     "x-options": {
+ *       "step": 5,
+ *       "showValue": true,
+ *       "showMinMax": true,
+ *       "suffix": "%",
+ *       "color": "blue"  // "blue", "green", "red", "purple"
+ *     }
+ *   }
+ * }
+ *
+ * @module SliderWidget
+ */
+
+(function() {
+    'use strict';
+
+    const base = window.BaseWidget ? new window.BaseWidget('Slider', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    const COLOR_CLASSES = {
+        blue: 'accent-blue-600',
+        green: 'accent-green-600',
+        red: 'accent-red-600',
+        purple: 'accent-purple-600',
+        amber: 'accent-amber-500'
+    };
+
+    window.LEDMatrixWidgets.register('slider', {
+        name: 'Slider Widget',
+        version: '1.0.0',
+
+        render: function(container, config, value, options) {
+            const fieldId = sanitizeId(options.fieldId || container.id || 'slider');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+            const min = config.minimum !== undefined ? config.minimum : (xOptions.min !== undefined ? xOptions.min : 0);
+            const max = config.maximum !== undefined ? config.maximum : (xOptions.max !== undefined ? xOptions.max : 100);
+            const step = xOptions.step || 1;
+            const showValue = xOptions.showValue !== false;
+            const showMinMax = xOptions.showMinMax !== false;
+            const suffix = xOptions.suffix || '';
+            const prefix = xOptions.prefix || '';
+            const color = xOptions.color || 'blue';
+            const disabled = xOptions.disabled === true;
+
+            const currentValue = value !== null && value !== undefined ? value : min;
+            const colorClass = COLOR_CLASSES[color] || COLOR_CLASSES.blue;
+
+            let html = `<div id="${fieldId}_widget" class="slider-widget" data-field-id="${fieldId}" data-prefix="${escapeHtml(prefix)}" data-suffix="${escapeHtml(suffix)}">`;
+
+            // Value display above slider
+            if (showValue) {
+                html += `
+                    <div class="flex justify-center mb-2">
+                        <span id="${fieldId}_value" class="text-lg font-semibold text-gray-700">
+                            ${escapeHtml(prefix)}${currentValue}${escapeHtml(suffix)}
+                        </span>
+                    </div>
+                `;
+            }
+
+            // Slider
+            html += `
+                <input type="range"
+                       id="${fieldId}_input"
+                       name="${escapeHtml(options.name || fieldId)}"
+                       value="${currentValue}"
+                       min="${min}"
+                       max="${max}"
+                       step="${step}"
+                       ${disabled ? 'disabled' : ''}
+                       oninput="window.LEDMatrixWidgets.getHandlers('slider').onInput('${fieldId}')"
+                       onchange="window.LEDMatrixWidgets.getHandlers('slider').onChange('${fieldId}')"
+                       class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer ${colorClass} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}">
+            `;
+
+            // Min/Max labels
+            if (showMinMax) {
+                html += `
+                    <div class="flex justify-between mt-1">
+                        <span class="text-xs text-gray-400">${escapeHtml(prefix)}${min}${escapeHtml(suffix)}</span>
+                        <span class="text-xs text-gray-400">${escapeHtml(prefix)}${max}${escapeHtml(suffix)}</span>
+                    </div>
+                `;
+            }
+
+            html += '</div>';
+
+            container.innerHTML = html;
+        },
+
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            if (!input) return null;
+            const num = parseFloat(input.value);
+            return isNaN(num) ? null : num;
+        },
+
+        setValue: function(fieldId, value) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            const valueEl = document.getElementById(`${safeId}_value`);
+            const widget = document.getElementById(`${safeId}_widget`);
+
+            if (input) {
+                input.value = value !== null && value !== undefined ? value : input.min;
+            }
+            if (valueEl && widget && input) {
+                const prefix = widget.dataset.prefix || '';
+                const suffix = widget.dataset.suffix || '';
+                valueEl.textContent = `${prefix}${input.value}${suffix}`;
+            }
+        },
+
+        handlers: {
+            onInput: function(fieldId) {
+                const safeId = sanitizeId(fieldId);
+                const input = document.getElementById(`${safeId}_input`);
+                const valueEl = document.getElementById(`${safeId}_value`);
+                const widget = document.getElementById(`${safeId}_widget`);
+
+                if (valueEl && input && widget) {
+                    const prefix = widget.dataset.prefix || '';
+                    const suffix = widget.dataset.suffix || '';
+                    valueEl.textContent = `${prefix}${input.value}${suffix}`;
+                }
+            },
+
+            onChange: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('slider');
+                triggerChange(fieldId, widget.getValue(fieldId));
+            }
+        }
+    });
+
+    console.log('[SliderWidget] Slider widget registered');
+})();

web_interface/static/v3/js/widgets/text-input.js

@@ -0,0 +1,244 @@
+/**
+ * LEDMatrix Text Input Widget
+ *
+ * Enhanced text input with validation, placeholder, and pattern support.
+ *
+ * Schema example:
+ * {
+ *   "username": {
+ *     "type": "string",
+ *     "x-widget": "text-input",
+ *     "x-options": {
+ *       "placeholder": "Enter username",
+ *       "pattern": "^[a-zA-Z0-9_]+$",
+ *       "patternMessage": "Only letters, numbers, and underscores allowed",
+ *       "minLength": 3,
+ *       "maxLength": 20,
+ *       "prefix": "@",
+ *       "suffix": null,
+ *       "clearable": true
+ *     }
+ *   }
+ * }
+ *
+ * @module TextInputWidget
+ */
+
+(function() {
+    'use strict';
+
+    const base = window.BaseWidget ? new window.BaseWidget('TextInput', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    window.LEDMatrixWidgets.register('text-input', {
+        name: 'Text Input Widget',
+        version: '1.0.0',
+
+        render: function(container, config, value, options) {
+            const fieldId = sanitizeId(options.fieldId || container.id || 'text_input');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+            const placeholder = xOptions.placeholder || '';
+            const pattern = xOptions.pattern || '';
+            const patternMessage = xOptions.patternMessage || 'Invalid format';
+
+            // Sanitize minLength/maxLength - must be finite non-negative integers
+            const rawMinLength = parseInt(xOptions.minLength, 10);
+            const rawMaxLength = parseInt(xOptions.maxLength, 10);
+            let minLength = (Number.isFinite(rawMinLength) && rawMinLength >= 0 && rawMinLength <= 10000000)
+                ? rawMinLength : null;
+            let maxLength = (Number.isFinite(rawMaxLength) && rawMaxLength >= 0 && rawMaxLength <= 10000000)
+                ? rawMaxLength : null;
+
+            // Normalize constraints: ensure maxLength >= minLength when both are set
+            if (minLength !== null && maxLength !== null && maxLength < minLength) {
+                maxLength = minLength;
+            }
+
+            const prefix = xOptions.prefix || '';
+            const suffix = xOptions.suffix || '';
+            const clearable = xOptions.clearable === true;
+            const disabled = xOptions.disabled === true;
+
+            const currentValue = value !== null && value !== undefined ? String(value) : '';
+
+            let html = `<div id="${fieldId}_widget" class="text-input-widget" data-field-id="${fieldId}" data-pattern-message="${escapeHtml(patternMessage)}">`;
+
+            // Container for prefix/input/suffix layout
+            const hasAddons = prefix || suffix || clearable;
+            if (hasAddons) {
+                html += '<div class="flex items-center">';
+                if (prefix) {
+                    html += `<span class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-100 border border-r-0 border-gray-300 rounded-l-md">${escapeHtml(prefix)}</span>`;
+                }
+            }
+
+            const roundedClass = hasAddons
+                ? (prefix && suffix ? '' : (prefix ? 'rounded-r-md' : 'rounded-l-md'))
+                : 'rounded-md';
+
+            html += `
+                <input type="text"
+                       id="${fieldId}_input"
+                       name="${escapeHtml(options.name || fieldId)}"
+                       value="${escapeHtml(currentValue)}"
+                       placeholder="${escapeHtml(placeholder)}"
+                       ${pattern ? `pattern="${escapeHtml(pattern)}"` : ''}
+                       ${minLength !== null ? `minlength="${minLength}"` : ''}
+                       ${maxLength !== null ? `maxlength="${maxLength}"` : ''}
+                       ${disabled ? 'disabled' : ''}
+                       onchange="window.LEDMatrixWidgets.getHandlers('text-input').onChange('${fieldId}')"
+                       oninput="window.LEDMatrixWidgets.getHandlers('text-input').onInput('${fieldId}')"
+                       class="form-input flex-1 ${roundedClass} border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} text-black placeholder:text-gray-400">
+            `;
+
+            if (clearable && !disabled) {
+                html += `
+                    <button type="button"
+                            id="${fieldId}_clear"
+                            onclick="window.LEDMatrixWidgets.getHandlers('text-input').onClear('${fieldId}')"
+                            class="inline-flex items-center px-2 text-gray-400 hover:text-gray-600 ${currentValue ? '' : 'hidden'}"
+                            title="Clear">
+                        <i class="fas fa-times"></i>
+                    </button>
+                `;
+            }
+
+            if (suffix) {
+                html += `<span class="inline-flex items-center px-3 text-sm text-gray-500 bg-gray-100 border border-l-0 border-gray-300 rounded-r-md">${escapeHtml(suffix)}</span>`;
+            }
+
+            if (hasAddons) {
+                html += '</div>';
+            }
+
+            // Validation message area
+            html += `<div id="${fieldId}_error" class="text-sm text-red-600 mt-1 hidden"></div>`;
+
+            // Character count if maxLength specified
+            if (maxLength !== null) {
+                html += `<div id="${fieldId}_count" class="text-xs text-gray-400 mt-1 text-right">${currentValue.length}/${maxLength}</div>`;
+            }
+
+            html += '</div>';
+
+            container.innerHTML = html;
+        },
+
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            return input ? input.value : '';
+        },
+
+        setValue: function(fieldId, value) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            if (input) {
+                input.value = value !== null && value !== undefined ? String(value) : '';
+                this.handlers.onInput(fieldId);
+            }
+        },
+
+        validate: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            const errorEl = document.getElementById(`${safeId}_error`);
+            const widget = document.getElementById(`${safeId}_widget`);
+
+            if (!input) return { valid: true, errors: [] };
+
+            // Clear any prior custom validity to avoid stale errors
+            input.setCustomValidity('');
+
+            let isValid = input.checkValidity();
+            let errorMessage = input.validationMessage;
+
+            // Use custom pattern message if pattern mismatch
+            if (!isValid && input.validity.patternMismatch && widget) {
+                const patternMessage = widget.dataset.patternMessage;
+                if (patternMessage) {
+                    errorMessage = patternMessage;
+                    input.setCustomValidity(patternMessage);
+                    // Re-check validity with custom message set
+                    isValid = input.checkValidity();
+                }
+            }
+
+            if (errorEl) {
+                if (!isValid) {
+                    errorEl.textContent = errorMessage;
+                    errorEl.classList.remove('hidden');
+                    input.classList.add('border-red-500');
+                } else {
+                    errorEl.classList.add('hidden');
+                    input.classList.remove('border-red-500');
+                }
+            }
+
+            return { valid: isValid, errors: isValid ? [] : [errorMessage] };
+        },
+
+        handlers: {
+            onChange: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('text-input');
+                widget.validate(fieldId);
+                triggerChange(fieldId, widget.getValue(fieldId));
+            },
+
+            onInput: function(fieldId) {
+                const safeId = sanitizeId(fieldId);
+                const input = document.getElementById(`${safeId}_input`);
+                const clearBtn = document.getElementById(`${safeId}_clear`);
+                const countEl = document.getElementById(`${safeId}_count`);
+
+                // Clear any stale custom validity to allow form submission after user fixes input
+                if (input && input.validity.customError) {
+                    input.setCustomValidity('');
+                }
+
+                if (clearBtn) {
+                    clearBtn.classList.toggle('hidden', !input.value);
+                }
+
+                if (countEl && input) {
+                    const maxLength = input.maxLength;
+                    if (maxLength > 0) {
+                        countEl.textContent = `${input.value.length}/${maxLength}`;
+                    }
+                }
+            },
+
+            onClear: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('text-input');
+                widget.setValue(fieldId, '');
+                triggerChange(fieldId, '');
+            }
+        }
+    });
+
+    console.log('[TextInputWidget] Text input widget registered');
+})();

web_interface/static/v3/js/widgets/textarea.js

@@ -0,0 +1,180 @@
+/**
+ * LEDMatrix Textarea Widget
+ *
+ * Multi-line text input with character count and resize options.
+ *
+ * Schema example:
+ * {
+ *   "description": {
+ *     "type": "string",
+ *     "x-widget": "textarea",
+ *     "x-options": {
+ *       "rows": 4,
+ *       "placeholder": "Enter description...",
+ *       "maxLength": 500,
+ *       "resize": "vertical",  // "none", "vertical", "horizontal", "both"
+ *       "showCount": true
+ *     }
+ *   }
+ * }
+ *
+ * @module TextareaWidget
+ */
+
+(function() {
+    'use strict';
+
+    const base = window.BaseWidget ? new window.BaseWidget('Textarea', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    const RESIZE_CLASSES = {
+        none: 'resize-none',
+        vertical: 'resize-y',
+        horizontal: 'resize-x',
+        both: 'resize'
+    };
+
+    window.LEDMatrixWidgets.register('textarea', {
+        name: 'Textarea Widget',
+        version: '1.0.0',
+
+        render: function(container, config, value, options) {
+            const fieldId = sanitizeId(options.fieldId || container.id || 'textarea');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+            const rows = xOptions.rows || 4;
+            const placeholder = xOptions.placeholder || '';
+            const maxLength = xOptions.maxLength || config.maxLength || null;
+            const minLength = xOptions.minLength || config.minLength || 0;
+            const resize = xOptions.resize || 'vertical';
+            const showCount = xOptions.showCount !== false && maxLength;
+            const disabled = xOptions.disabled === true;
+
+            const currentValue = value !== null && value !== undefined ? String(value) : '';
+            const resizeClass = RESIZE_CLASSES[resize] || RESIZE_CLASSES.vertical;
+
+            let html = `<div id="${fieldId}_widget" class="textarea-widget" data-field-id="${fieldId}">`;
+
+            html += `
+                <textarea id="${fieldId}_input"
+                          name="${escapeHtml(options.name || fieldId)}"
+                          rows="${rows}"
+                          placeholder="${escapeHtml(placeholder)}"
+                          ${maxLength ? `maxlength="${maxLength}"` : ''}
+                          ${minLength ? `minlength="${minLength}"` : ''}
+                          ${disabled ? 'disabled' : ''}
+                          onchange="window.LEDMatrixWidgets.getHandlers('textarea').onChange('${fieldId}')"
+                          oninput="window.LEDMatrixWidgets.getHandlers('textarea').onInput('${fieldId}')"
+                          class="form-textarea w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 ${resizeClass} ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} text-black placeholder:text-gray-400">${escapeHtml(currentValue)}</textarea>
+            `;
+
+            // Character count
+            if (showCount) {
+                html += `
+                    <div class="flex justify-end mt-1">
+                        <span id="${fieldId}_count" class="text-xs text-gray-400">${currentValue.length}/${maxLength}</span>
+                    </div>
+                `;
+            }
+
+            // Error message area
+            html += `<div id="${fieldId}_error" class="text-sm text-red-600 mt-1 hidden"></div>`;
+
+            html += '</div>';
+
+            container.innerHTML = html;
+        },
+
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            return input ? input.value : '';
+        },
+
+        setValue: function(fieldId, value) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            if (input) {
+                input.value = value !== null && value !== undefined ? String(value) : '';
+                this.handlers.onInput(fieldId);
+            }
+        },
+
+        validate: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            const errorEl = document.getElementById(`${safeId}_error`);
+
+            if (!input) return { valid: true, errors: [] };
+
+            const isValid = input.checkValidity();
+
+            if (errorEl) {
+                if (!isValid) {
+                    errorEl.textContent = input.validationMessage;
+                    errorEl.classList.remove('hidden');
+                    input.classList.add('border-red-500');
+                } else {
+                    errorEl.classList.add('hidden');
+                    input.classList.remove('border-red-500');
+                }
+            }
+
+            return { valid: isValid, errors: isValid ? [] : [input.validationMessage] };
+        },
+
+        handlers: {
+            onChange: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('textarea');
+                widget.validate(fieldId);
+                triggerChange(fieldId, widget.getValue(fieldId));
+            },
+
+            onInput: function(fieldId) {
+                const safeId = sanitizeId(fieldId);
+                const input = document.getElementById(`${safeId}_input`);
+                const countEl = document.getElementById(`${safeId}_count`);
+
+                if (countEl && input) {
+                    const maxLength = input.maxLength;
+                    if (maxLength > 0) {
+                        countEl.textContent = `${input.value.length}/${maxLength}`;
+                        // Change color when near limit
+                        if (input.value.length >= maxLength * 0.9) {
+                            countEl.classList.remove('text-gray-400');
+                            countEl.classList.add('text-amber-500');
+                        } else {
+                            countEl.classList.remove('text-amber-500');
+                            countEl.classList.add('text-gray-400');
+                        }
+                    }
+                }
+            }
+        }
+    });
+
+    console.log('[TextareaWidget] Textarea widget registered');
+})();

web_interface/static/v3/js/widgets/time-range.js

@@ -0,0 +1,375 @@
+/**
+ * LEDMatrix Time Range Widget
+ *
+ * Reusable paired start/end time inputs with validation.
+ * Can be used by any plugin via x-widget: "time-range" in their schema.
+ *
+ * Schema example:
+ * {
+ *   "quiet_hours": {
+ *     "type": "object",
+ *     "x-widget": "time-range",
+ *     "properties": {
+ *       "start_time": { "type": "string", "format": "time" },
+ *       "end_time": { "type": "string", "format": "time" }
+ *     },
+ *     "x-options": {
+ *       "allowOvernight": true,    // Allow end < start (overnight schedules)
+ *       "showDuration": false,     // Show calculated duration
+ *       "disabled": false,         // Start disabled
+ *       "startLabel": "Start",     // Custom label for start time
+ *       "endLabel": "End"          // Custom label for end time
+ *     }
+ *   }
+ * }
+ *
+ * @module TimeRangeWidget
+ */
+
+(function() {
+    'use strict';
+
+    // Use BaseWidget utilities if available
+    const base = window.BaseWidget ? new window.BaseWidget('TimeRange', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    function showError(container, message) {
+        if (base) {
+            base.showError(container, message);
+        } else {
+            clearError(container);
+            const errorEl = document.createElement('div');
+            errorEl.className = 'widget-error text-sm text-red-600 mt-2';
+            errorEl.textContent = message;
+            container.appendChild(errorEl);
+        }
+    }
+
+    function clearError(container) {
+        if (base) {
+            base.clearError(container);
+        } else {
+            const errorEl = container.querySelector('.widget-error');
+            if (errorEl) errorEl.remove();
+        }
+    }
+
+    /**
+     * Parse time string to minutes since midnight
+     * @param {string} timeStr - Time in HH:MM format
+     * @returns {number} Minutes since midnight, or -1 if invalid
+     */
+    function parseTimeToMinutes(timeStr) {
+        if (!timeStr || typeof timeStr !== 'string') return -1;
+        const match = timeStr.match(/^(\d{1,2}):(\d{2})$/);
+        if (!match) return -1;
+        const hours = parseInt(match[1], 10);
+        const minutes = parseInt(match[2], 10);
+        if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) return -1;
+        return hours * 60 + minutes;
+    }
+
+    /**
+     * Calculate duration between two times
+     * @param {string} startTime - Start time HH:MM
+     * @param {string} endTime - End time HH:MM
+     * @param {boolean} allowOvernight - Whether overnight is allowed
+     * @returns {string} Duration string
+     */
+    function calculateDuration(startTime, endTime, allowOvernight) {
+        const startMinutes = parseTimeToMinutes(startTime);
+        const endMinutes = parseTimeToMinutes(endTime);
+
+        if (startMinutes < 0 || endMinutes < 0) return '';
+
+        let durationMinutes;
+        if (endMinutes >= startMinutes) {
+            durationMinutes = endMinutes - startMinutes;
+        } else if (allowOvernight) {
+            durationMinutes = (24 * 60 - startMinutes) + endMinutes;
+        } else {
+            return 'Invalid range';
+        }
+
+        const hours = Math.floor(durationMinutes / 60);
+        const minutes = durationMinutes % 60;
+
+        if (hours === 0) return `${minutes}m`;
+        if (minutes === 0) return `${hours}h`;
+        return `${hours}h ${minutes}m`;
+    }
+
+    window.LEDMatrixWidgets.register('time-range', {
+        name: 'Time Range Widget',
+        version: '1.0.0',
+
+        /**
+         * Render the time range widget
+         * @param {HTMLElement} container - Container element
+         * @param {Object} config - Schema configuration
+         * @param {Object} value - Object with start_time and end_time
+         * @param {Object} options - Additional options (fieldId, pluginId)
+         */
+        render: function(container, config, value, options) {
+            const fieldId = sanitizeId(options.fieldId || container.id || 'time_range');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+            const allowOvernight = xOptions.allowOvernight !== false;
+            const showDuration = xOptions.showDuration === true;
+            const disabled = xOptions.disabled === true;
+            const startLabel = xOptions.startLabel || 'Start Time';
+            const endLabel = xOptions.endLabel || 'End Time';
+
+            // Normalize value
+            const startTime = (value && value.start_time) || '07:00';
+            const endTime = (value && value.end_time) || '23:00';
+
+            const disabledAttr = disabled ? 'disabled' : '';
+            const disabledClass = disabled ? 'bg-gray-100 cursor-not-allowed' : '';
+            const inputName = options.name || fieldId;
+
+            let html = `<div id="${fieldId}_widget" class="time-range-widget" data-field-id="${fieldId}" data-allow-overnight="${allowOvernight}">`;
+
+            // Hidden inputs for form submission
+            html += `<input type="hidden" id="${fieldId}_start_time" name="${inputName}_start_time" value="${escapeHtml(startTime)}">`;
+            html += `<input type="hidden" id="${fieldId}_end_time" name="${inputName}_end_time" value="${escapeHtml(endTime)}">`;
+
+            html += `<div class="grid grid-cols-1 md:grid-cols-2 gap-4">`;
+
+            // Start time input
+            html += `
+                <div class="form-group">
+                    <label for="${fieldId}_start_input" class="block text-sm font-medium text-gray-700">${escapeHtml(startLabel)}</label>
+                    <input type="time"
+                           id="${fieldId}_start_input"
+                           value="${escapeHtml(startTime)}"
+                           ${disabledAttr}
+                           onchange="window.LEDMatrixWidgets.getHandlers('time-range').onChange('${fieldId}')"
+                           class="form-control mt-1 ${disabledClass}">
+                </div>
+            `;
+
+            // End time input
+            html += `
+                <div class="form-group">
+                    <label for="${fieldId}_end_input" class="block text-sm font-medium text-gray-700">${escapeHtml(endLabel)}</label>
+                    <input type="time"
+                           id="${fieldId}_end_input"
+                           value="${escapeHtml(endTime)}"
+                           ${disabledAttr}
+                           onchange="window.LEDMatrixWidgets.getHandlers('time-range').onChange('${fieldId}')"
+                           class="form-control mt-1 ${disabledClass}">
+                </div>
+            `;
+
+            html += '</div>';
+
+            // Duration display
+            if (showDuration) {
+                const duration = calculateDuration(startTime, endTime, allowOvernight);
+                html += `
+                    <div id="${fieldId}_duration" class="mt-2 text-sm text-gray-500">
+                        Duration: <span class="font-medium">${escapeHtml(duration)}</span>
+                    </div>
+                `;
+            }
+
+            html += '</div>';
+
+            container.innerHTML = html;
+        },
+
+        /**
+         * Get current time range value
+         * @param {string} fieldId - Field ID
+         * @returns {Object} Object with start_time and end_time
+         */
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const startInput = document.getElementById(`${safeId}_start_input`);
+            const endInput = document.getElementById(`${safeId}_end_input`);
+
+            return {
+                start_time: startInput ? startInput.value : '',
+                end_time: endInput ? endInput.value : ''
+            };
+        },
+
+        /**
+         * Set time range value
+         * @param {string} fieldId - Field ID
+         * @param {Object} value - Object with start_time and end_time
+         */
+        setValue: function(fieldId, value) {
+            const safeId = sanitizeId(fieldId);
+            const startInput = document.getElementById(`${safeId}_start_input`);
+            const endInput = document.getElementById(`${safeId}_end_input`);
+            const startHidden = document.getElementById(`${safeId}_start_time`);
+            const endHidden = document.getElementById(`${safeId}_end_time`);
+
+            const startTime = (value && value.start_time) || '';
+            const endTime = (value && value.end_time) || '';
+
+            if (startInput) startInput.value = startTime;
+            if (endInput) endInput.value = endTime;
+            if (startHidden) startHidden.value = startTime;
+            if (endHidden) endHidden.value = endTime;
+
+            // Update duration if shown
+            this.handlers.updateDuration(fieldId);
+        },
+
+        /**
+         * Validate the time range
+         * @param {string} fieldId - Field ID
+         * @returns {Object} { valid: boolean, errors: Array }
+         */
+        validate: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const widget = document.getElementById(`${safeId}_widget`);
+            const value = this.getValue(fieldId);
+            const errors = [];
+
+            // Check for empty values
+            if (!value.start_time) {
+                errors.push('Start time is required');
+            }
+            if (!value.end_time) {
+                errors.push('End time is required');
+            }
+
+            // Validate time format
+            if (value.start_time && parseTimeToMinutes(value.start_time) < 0) {
+                errors.push('Invalid start time format');
+            }
+            if (value.end_time && parseTimeToMinutes(value.end_time) < 0) {
+                errors.push('Invalid end time format');
+            }
+
+            // Check for valid range if overnight not allowed
+            if (widget && errors.length === 0) {
+                const allowOvernight = widget.dataset.allowOvernight === 'true';
+                if (!allowOvernight) {
+                    const startMinutes = parseTimeToMinutes(value.start_time);
+                    const endMinutes = parseTimeToMinutes(value.end_time);
+                    if (endMinutes <= startMinutes) {
+                        errors.push('End time must be after start time');
+                    }
+                }
+            }
+
+            // Show/clear errors
+            if (widget) {
+                if (errors.length > 0) {
+                    showError(widget, errors[0]);
+                } else {
+                    clearError(widget);
+                }
+            }
+
+            return {
+                valid: errors.length === 0,
+                errors
+            };
+        },
+
+        /**
+         * Set disabled state
+         * @param {string} fieldId - Field ID
+         * @param {boolean} disabled - Whether to disable
+         */
+        setDisabled: function(fieldId, disabled) {
+            const safeId = sanitizeId(fieldId);
+            const startInput = document.getElementById(`${safeId}_start_input`);
+            const endInput = document.getElementById(`${safeId}_end_input`);
+
+            if (startInput) {
+                startInput.disabled = disabled;
+                startInput.classList.toggle('bg-gray-100', disabled);
+                startInput.classList.toggle('cursor-not-allowed', disabled);
+            }
+            if (endInput) {
+                endInput.disabled = disabled;
+                endInput.classList.toggle('bg-gray-100', disabled);
+                endInput.classList.toggle('cursor-not-allowed', disabled);
+            }
+        },
+
+        handlers: {
+            /**
+             * Handle time input change
+             * @param {string} fieldId - Field ID
+             */
+            onChange: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('time-range');
+                const value = widget.getValue(fieldId);
+                const safeId = sanitizeId(fieldId);
+
+                // Update hidden inputs
+                const startHidden = document.getElementById(`${safeId}_start_time`);
+                const endHidden = document.getElementById(`${safeId}_end_time`);
+                if (startHidden) startHidden.value = value.start_time;
+                if (endHidden) endHidden.value = value.end_time;
+
+                // Update duration
+                this.updateDuration(fieldId);
+
+                // Validate
+                widget.validate(fieldId);
+
+                // Trigger change event
+                triggerChange(fieldId, value);
+            },
+
+            /**
+             * Update duration display
+             * @param {string} fieldId - Field ID
+             */
+            updateDuration: function(fieldId) {
+                const safeId = sanitizeId(fieldId);
+                const durationEl = document.getElementById(`${safeId}_duration`);
+                if (!durationEl) return;
+
+                const widget = window.LEDMatrixWidgets.get('time-range');
+                const value = widget.getValue(fieldId);
+                const widgetEl = document.getElementById(`${safeId}_widget`);
+                const allowOvernight = widgetEl && widgetEl.dataset.allowOvernight === 'true';
+
+                const duration = calculateDuration(value.start_time, value.end_time, allowOvernight);
+                const spanEl = durationEl.querySelector('span');
+                if (spanEl) {
+                    spanEl.textContent = duration;
+                }
+            }
+        }
+    });
+
+    // Expose utility functions for external use
+    window.LEDMatrixWidgets.get('time-range').parseTimeToMinutes = parseTimeToMinutes;
+    window.LEDMatrixWidgets.get('time-range').calculateDuration = calculateDuration;
+
+    console.log('[TimeRangeWidget] Time range widget registered');
+})();

web_interface/static/v3/js/widgets/timezone-selector.js

@@ -0,0 +1,419 @@
+/**
+ * LEDMatrix Timezone Selector Widget
+ *
+ * Dropdown for selecting IANA timezone with grouped regions.
+ *
+ * Schema example:
+ * {
+ *   "timezone": {
+ *     "type": "string",
+ *     "x-widget": "timezone-selector",
+ *     "x-options": {
+ *       "showOffset": true,
+ *       "placeholder": "Select timezone..."
+ *     }
+ *   }
+ * }
+ *
+ * @module TimezoneSelectorWidget
+ */
+
+(function() {
+    'use strict';
+
+    const base = window.BaseWidget ? new window.BaseWidget('TimezoneSelector', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    // IANA timezone list grouped by region
+    const TIMEZONE_GROUPS = {
+        'US & Canada': [
+            { value: 'America/New_York', label: 'Eastern Time (New York)' },
+            { value: 'America/Chicago', label: 'Central Time (Chicago)' },
+            { value: 'America/Denver', label: 'Mountain Time (Denver)' },
+            { value: 'America/Phoenix', label: 'Mountain Time - Arizona (Phoenix)' },
+            { value: 'America/Los_Angeles', label: 'Pacific Time (Los Angeles)' },
+            { value: 'America/Anchorage', label: 'Alaska Time (Anchorage)' },
+            { value: 'Pacific/Honolulu', label: 'Hawaii Time (Honolulu)' },
+            { value: 'America/Detroit', label: 'Eastern Time (Detroit)' },
+            { value: 'America/Indiana/Indianapolis', label: 'Eastern Time (Indianapolis)' },
+            { value: 'America/Toronto', label: 'Eastern Time (Toronto)' },
+            { value: 'America/Vancouver', label: 'Pacific Time (Vancouver)' },
+            { value: 'America/Edmonton', label: 'Mountain Time (Edmonton)' },
+            { value: 'America/Winnipeg', label: 'Central Time (Winnipeg)' },
+            { value: 'America/Halifax', label: 'Atlantic Time (Halifax)' },
+            { value: 'America/St_Johns', label: 'Newfoundland Time (St. Johns)' }
+        ],
+        'Mexico & Central America': [
+            { value: 'America/Mexico_City', label: 'Mexico City' },
+            { value: 'America/Cancun', label: 'Cancun' },
+            { value: 'America/Tijuana', label: 'Tijuana' },
+            { value: 'America/Guatemala', label: 'Guatemala' },
+            { value: 'America/Costa_Rica', label: 'Costa Rica' },
+            { value: 'America/Panama', label: 'Panama' },
+            { value: 'America/El_Salvador', label: 'El Salvador' },
+            { value: 'America/Tegucigalpa', label: 'Honduras' },
+            { value: 'America/Managua', label: 'Nicaragua' },
+            { value: 'America/Belize', label: 'Belize' }
+        ],
+        'South America': [
+            { value: 'America/Sao_Paulo', label: 'Sao Paulo' },
+            { value: 'America/Buenos_Aires', label: 'Buenos Aires' },
+            { value: 'America/Santiago', label: 'Santiago' },
+            { value: 'America/Lima', label: 'Lima' },
+            { value: 'America/Bogota', label: 'Bogota' },
+            { value: 'America/Caracas', label: 'Caracas' },
+            { value: 'America/La_Paz', label: 'La Paz' },
+            { value: 'America/Montevideo', label: 'Montevideo' },
+            { value: 'America/Asuncion', label: 'Asuncion' },
+            { value: 'America/Guayaquil', label: 'Guayaquil' }
+        ],
+        'Europe': [
+            { value: 'Europe/London', label: 'London (GMT/BST)' },
+            { value: 'Europe/Dublin', label: 'Dublin' },
+            { value: 'Europe/Paris', label: 'Paris' },
+            { value: 'Europe/Berlin', label: 'Berlin' },
+            { value: 'Europe/Madrid', label: 'Madrid' },
+            { value: 'Europe/Rome', label: 'Rome' },
+            { value: 'Europe/Amsterdam', label: 'Amsterdam' },
+            { value: 'Europe/Brussels', label: 'Brussels' },
+            { value: 'Europe/Vienna', label: 'Vienna' },
+            { value: 'Europe/Zurich', label: 'Zurich' },
+            { value: 'Europe/Stockholm', label: 'Stockholm' },
+            { value: 'Europe/Oslo', label: 'Oslo' },
+            { value: 'Europe/Copenhagen', label: 'Copenhagen' },
+            { value: 'Europe/Helsinki', label: 'Helsinki' },
+            { value: 'Europe/Warsaw', label: 'Warsaw' },
+            { value: 'Europe/Prague', label: 'Prague' },
+            { value: 'Europe/Budapest', label: 'Budapest' },
+            { value: 'Europe/Athens', label: 'Athens' },
+            { value: 'Europe/Bucharest', label: 'Bucharest' },
+            { value: 'Europe/Sofia', label: 'Sofia' },
+            { value: 'Europe/Lisbon', label: 'Lisbon' },
+            { value: 'Europe/Moscow', label: 'Moscow' },
+            { value: 'Europe/Kyiv', label: 'Kyiv' },
+            { value: 'Europe/Istanbul', label: 'Istanbul' }
+        ],
+        'UK & Ireland': [
+            { value: 'Europe/London', label: 'London' },
+            { value: 'Europe/Dublin', label: 'Dublin' },
+            { value: 'Europe/London', label: 'Belfast' }  // Belfast uses Europe/London (canonical IANA identifier)
+        ],
+        'Asia': [
+            { value: 'Asia/Tokyo', label: 'Tokyo' },
+            { value: 'Asia/Seoul', label: 'Seoul' },
+            { value: 'Asia/Shanghai', label: 'Shanghai' },
+            { value: 'Asia/Hong_Kong', label: 'Hong Kong' },
+            { value: 'Asia/Taipei', label: 'Taipei' },
+            { value: 'Asia/Singapore', label: 'Singapore' },
+            { value: 'Asia/Kuala_Lumpur', label: 'Kuala Lumpur' },
+            { value: 'Asia/Bangkok', label: 'Bangkok' },
+            { value: 'Asia/Ho_Chi_Minh', label: 'Ho Chi Minh City' },
+            { value: 'Asia/Jakarta', label: 'Jakarta' },
+            { value: 'Asia/Manila', label: 'Manila' },
+            { value: 'Asia/Kolkata', label: 'India (Kolkata)' },
+            { value: 'Asia/Mumbai', label: 'Mumbai' },
+            { value: 'Asia/Dhaka', label: 'Dhaka' },
+            { value: 'Asia/Karachi', label: 'Karachi' },
+            { value: 'Asia/Dubai', label: 'Dubai' },
+            { value: 'Asia/Riyadh', label: 'Riyadh' },
+            { value: 'Asia/Jerusalem', label: 'Jerusalem' },
+            { value: 'Asia/Tehran', label: 'Tehran' },
+            { value: 'Asia/Kabul', label: 'Kabul' },
+            { value: 'Asia/Kathmandu', label: 'Kathmandu' },
+            { value: 'Asia/Colombo', label: 'Colombo' },
+            { value: 'Asia/Yangon', label: 'Yangon' }
+        ],
+        'Australia & Pacific': [
+            { value: 'Australia/Sydney', label: 'Sydney' },
+            { value: 'Australia/Melbourne', label: 'Melbourne' },
+            { value: 'Australia/Brisbane', label: 'Brisbane' },
+            { value: 'Australia/Perth', label: 'Perth' },
+            { value: 'Australia/Adelaide', label: 'Adelaide' },
+            { value: 'Australia/Darwin', label: 'Darwin' },
+            { value: 'Australia/Hobart', label: 'Hobart' },
+            { value: 'Pacific/Auckland', label: 'Auckland' },
+            { value: 'Pacific/Fiji', label: 'Fiji' },
+            { value: 'Pacific/Guam', label: 'Guam' },
+            { value: 'Pacific/Port_Moresby', label: 'Port Moresby' },
+            { value: 'Pacific/Noumea', label: 'Noumea' }
+        ],
+        'Africa': [
+            { value: 'Africa/Cairo', label: 'Cairo' },
+            { value: 'Africa/Johannesburg', label: 'Johannesburg' },
+            { value: 'Africa/Lagos', label: 'Lagos' },
+            { value: 'Africa/Nairobi', label: 'Nairobi' },
+            { value: 'Africa/Casablanca', label: 'Casablanca' },
+            { value: 'Africa/Algiers', label: 'Algiers' },
+            { value: 'Africa/Tunis', label: 'Tunis' },
+            { value: 'Africa/Accra', label: 'Accra' },
+            { value: 'Africa/Addis_Ababa', label: 'Addis Ababa' },
+            { value: 'Africa/Dar_es_Salaam', label: 'Dar es Salaam' }
+        ],
+        'Atlantic': [
+            { value: 'Atlantic/Reykjavik', label: 'Reykjavik (Iceland)' },
+            { value: 'Atlantic/Azores', label: 'Azores' },
+            { value: 'Atlantic/Cape_Verde', label: 'Cape Verde' },
+            { value: 'Atlantic/Bermuda', label: 'Bermuda' }
+        ],
+        'UTC': [
+            { value: 'UTC', label: 'UTC (Coordinated Universal Time)' },
+            { value: 'Etc/GMT', label: 'GMT (Greenwich Mean Time)' },
+            { value: 'Etc/GMT+0', label: 'GMT+0' },
+            { value: 'Etc/GMT-1', label: 'GMT-1 (UTC+1)' },
+            { value: 'Etc/GMT-2', label: 'GMT-2 (UTC+2)' },
+            { value: 'Etc/GMT+1', label: 'GMT+1 (UTC-1)' },
+            { value: 'Etc/GMT+2', label: 'GMT+2 (UTC-2)' }
+        ]
+    };
+
+    // Check if a timezone value exists in TIMEZONE_GROUPS
+    function isValidTimezone(value) {
+        if (!value || typeof value !== 'string') return false;
+        for (const timezones of Object.values(TIMEZONE_GROUPS)) {
+            for (const tz of timezones) {
+                if (tz.value === value) return true;
+            }
+        }
+        return false;
+    }
+
+    // Get current UTC offset for a timezone
+    function getTimezoneOffset(tz) {
+        try {
+            const now = new Date();
+            const formatter = new Intl.DateTimeFormat('en-US', {
+                timeZone: tz,
+                timeZoneName: 'shortOffset'
+            });
+            const parts = formatter.formatToParts(now);
+            const offsetPart = parts.find(p => p.type === 'timeZoneName');
+            return offsetPart ? offsetPart.value : '';
+        } catch (e) {
+            return '';
+        }
+    }
+
+    window.LEDMatrixWidgets.register('timezone-selector', {
+        name: 'Timezone Selector Widget',
+        version: '1.0.0',
+
+        render: function(container, config, value, options) {
+            const fieldId = sanitizeId(options.fieldId || container.id || 'timezone_selector');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+            const showOffset = xOptions.showOffset !== false;
+            const placeholder = xOptions.placeholder || 'Select timezone...';
+            const disabled = xOptions.disabled === true;
+
+            // Validate current value - must be a recognized timezone from TIMEZONE_GROUPS
+            const trimmedValue = (typeof value === 'string' && value.trim()) ? value.trim() : '';
+            const currentValue = isValidTimezone(trimmedValue) ? trimmedValue : '';
+
+            let html = `<div id="${fieldId}_widget" class="timezone-selector-widget" data-field-id="${fieldId}">`;
+
+            // Hidden input for form submission
+            html += `<input type="hidden" id="${fieldId}_data" name="${escapeHtml(options.name || fieldId)}" value="${escapeHtml(currentValue)}">`;
+
+            html += `
+                <select id="${fieldId}_input"
+                        ${disabled ? 'disabled' : ''}
+                        onchange="window.LEDMatrixWidgets.getHandlers('timezone-selector').onChange('${fieldId}')"
+                        class="form-select w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} text-black">
+            `;
+
+            // Placeholder option
+            html += `<option value="" ${!currentValue ? 'selected' : ''} disabled>${escapeHtml(placeholder)}</option>`;
+
+            // Build options grouped by region
+            for (const [groupName, timezones] of Object.entries(TIMEZONE_GROUPS)) {
+                html += `<optgroup label="${escapeHtml(groupName)}">`;
+
+                for (const tz of timezones) {
+                    const isSelected = currentValue === tz.value;
+                    let displayLabel = tz.label;
+
+                    // Add UTC offset if enabled
+                    if (showOffset) {
+                        const offset = getTimezoneOffset(tz.value);
+                        if (offset) {
+                            displayLabel = `${tz.label} (${offset})`;
+                        }
+                    }
+
+                    html += `<option value="${escapeHtml(tz.value)}" ${isSelected ? 'selected' : ''}>${escapeHtml(displayLabel)}</option>`;
+                }
+
+                html += '</optgroup>';
+            }
+
+            html += '</select>';
+
+            // Show current time in selected timezone
+            html += `<div id="${fieldId}_preview" class="text-sm text-gray-500 mt-2 ${currentValue ? '' : 'hidden'}">
+                <span class="font-medium">Current time:</span>
+                <span id="${fieldId}_time"></span>
+            </div>`;
+
+            html += '</div>';
+
+            container.innerHTML = html;
+
+            // Update time preview if value is set
+            if (currentValue) {
+                this.handlers.updateTimePreview(fieldId, currentValue);
+            }
+        },
+
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            return input ? input.value : '';
+        },
+
+        setValue: function(fieldId, value) {
+            const safeId = sanitizeId(fieldId);
+            const select = document.getElementById(`${safeId}_input`);
+            const hiddenInput = document.getElementById(`${safeId}_data`);
+
+            // Validate incoming value against known timezones
+            const requestedValue = (typeof value === 'string' && value.trim()) ? value.trim() : '';
+            const validValue = isValidTimezone(requestedValue) ? requestedValue : '';
+
+            if (select) {
+                // Only set to a value that exists in the select options
+                select.value = validValue;
+            }
+
+            // Read the actual selected value from the select element
+            const actualValue = select ? select.value : '';
+
+            if (hiddenInput) {
+                // Synchronize hidden input to the actual selected value
+                hiddenInput.value = actualValue;
+            }
+
+            this.handlers.updateTimePreview(fieldId, actualValue);
+        },
+
+        handlers: {
+            onChange: function(fieldId) {
+                const safeId = sanitizeId(fieldId);
+                const widget = window.LEDMatrixWidgets.get('timezone-selector');
+                const value = widget.getValue(fieldId);
+
+                // Update hidden input for form submission
+                const hiddenInput = document.getElementById(`${safeId}_data`);
+                if (hiddenInput) {
+                    hiddenInput.value = value;
+                }
+
+                widget.handlers.updateTimePreview(fieldId, value);
+                triggerChange(fieldId, value);
+            },
+
+            updateTimePreview: function(fieldId, timezone) {
+                const safeId = sanitizeId(fieldId);
+                const previewEl = document.getElementById(`${safeId}_preview`);
+                const timeEl = document.getElementById(`${safeId}_time`);
+
+                if (!previewEl || !timeEl) return;
+
+                if (!timezone) {
+                    previewEl.classList.add('hidden');
+                    return;
+                }
+
+                try {
+                    const now = new Date();
+                    const formatter = new Intl.DateTimeFormat('en-US', {
+                        timeZone: timezone,
+                        weekday: 'short',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit',
+                        hour12: true
+                    });
+                    timeEl.textContent = formatter.format(now);
+                    previewEl.classList.remove('hidden');
+                } catch (e) {
+                    previewEl.classList.add('hidden');
+                }
+            }
+        }
+    });
+
+    // Expose timezone data for external use
+    window.LEDMatrixWidgets.get('timezone-selector').TIMEZONE_GROUPS = TIMEZONE_GROUPS;
+
+    // HTMX form submission protection - preserve timezone selection across requests
+    // This handles cases where HTMX or other form handling might reset select values
+    (function setupHtmxProtection() {
+        let savedTimezoneValues = {};
+
+        // Before any HTMX request, save timezone select values (including empty selections)
+        document.body.addEventListener('htmx:beforeRequest', function(event) {
+            document.querySelectorAll('.timezone-selector-widget').forEach(function(widget) {
+                const fieldId = widget.dataset.fieldId;
+                if (fieldId) {
+                    const select = document.getElementById(fieldId + '_input');
+                    // Record value even if empty to preserve cleared selections
+                    savedTimezoneValues[fieldId] = select ? select.value : '';
+                }
+            });
+        });
+
+        // After any HTMX request, restore timezone select values
+        document.body.addEventListener('htmx:afterRequest', function(event) {
+            // Delay to ensure any DOM updates have completed
+            setTimeout(function() {
+                Object.keys(savedTimezoneValues).forEach(function(fieldId) {
+                    const select = document.getElementById(fieldId + '_input');
+                    const hidden = document.getElementById(fieldId + '_data');
+                    const savedValue = savedTimezoneValues[fieldId];
+
+                    // Check for undefined, not truthiness, so empty strings are restored
+                    if (select && savedValue !== undefined) {
+                        // Set value directly (handles empty string and placeholders correctly)
+                        select.value = savedValue;
+
+                        // Dispatch change event to trigger timezone preview update
+                        select.dispatchEvent(new Event('change'));
+
+                        // Force browser to repaint by temporarily modifying a style
+                        select.style.display = 'none';
+                        void select.offsetHeight;
+                        select.style.display = '';
+                    }
+                    if (hidden && savedValue !== undefined) {
+                        hidden.value = savedValue;
+                    }
+                });
+            }, 50);
+        });
+    })();
+
+    console.log('[TimezoneSelectorWidget] Timezone selector widget registered');
+})();

web_interface/static/v3/js/widgets/toggle-switch.js

@@ -0,0 +1,225 @@
+/**
+ * LEDMatrix Toggle Switch Widget
+ *
+ * Styled boolean toggle switch (more visual than checkbox).
+ *
+ * Schema example:
+ * {
+ *   "enabled": {
+ *     "type": "boolean",
+ *     "x-widget": "toggle-switch",
+ *     "x-options": {
+ *       "labelOn": "Enabled",
+ *       "labelOff": "Disabled",
+ *       "size": "medium",  // "small", "medium", "large"
+ *       "colorOn": "blue", // "blue", "green", "red", "purple"
+ *       "showLabels": true
+ *     }
+ *   }
+ * }
+ *
+ * @module ToggleSwitchWidget
+ */
+
+(function() {
+    'use strict';
+
+    const base = window.BaseWidget ? new window.BaseWidget('ToggleSwitch', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    const SIZE_CLASSES = {
+        small: {
+            track: 'w-8 h-4',
+            thumb: 'w-3 h-3',
+            translate: 'translate-x-4'
+        },
+        medium: {
+            track: 'w-11 h-6',
+            thumb: 'w-5 h-5',
+            translate: 'translate-x-5'
+        },
+        large: {
+            track: 'w-14 h-7',
+            thumb: 'w-6 h-6',
+            translate: 'translate-x-7'
+        }
+    };
+
+    const COLOR_CLASSES = {
+        blue: 'bg-blue-600',
+        green: 'bg-green-600',
+        red: 'bg-red-600',
+        purple: 'bg-purple-600',
+        amber: 'bg-amber-500'
+    };
+
+    window.LEDMatrixWidgets.register('toggle-switch', {
+        name: 'Toggle Switch Widget',
+        version: '1.0.0',
+
+        render: function(container, config, value, options) {
+            const fieldId = sanitizeId(options.fieldId || container.id || 'toggle');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+            const labelOn = xOptions.labelOn || 'On';
+            const labelOff = xOptions.labelOff || 'Off';
+            const size = xOptions.size || 'medium';
+            const colorOn = xOptions.colorOn || 'blue';
+            const showLabels = xOptions.showLabels !== false;
+            const disabled = xOptions.disabled === true;
+
+            const isChecked = value === true || value === 'true';
+            const sizeClass = SIZE_CLASSES[size] || SIZE_CLASSES.medium;
+            const colorClass = COLOR_CLASSES[colorOn] || COLOR_CLASSES.blue;
+
+            let html = `<div id="${fieldId}_widget" class="toggle-switch-widget flex items-center" data-field-id="${fieldId}" data-label-on="${escapeHtml(labelOn)}" data-label-off="${escapeHtml(labelOff)}" data-color="${colorOn}">`;
+
+            // Hidden checkbox for form submission
+            html += `<input type="hidden" id="${fieldId}_hidden" name="${escapeHtml(options.name || fieldId)}" value="${isChecked}">`;
+
+            html += `
+                <button type="button"
+                        id="${fieldId}_button"
+                        role="switch"
+                        aria-checked="${isChecked}"
+                        ${disabled ? 'disabled' : ''}
+                        onclick="window.LEDMatrixWidgets.getHandlers('toggle-switch').onToggle('${fieldId}')"
+                        class="relative inline-flex flex-shrink-0 ${sizeClass.track} border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${isChecked ? colorClass : 'bg-gray-200'} ${disabled ? 'opacity-50 cursor-not-allowed' : ''}">
+                    <span class="sr-only">Toggle</span>
+                    <span id="${fieldId}_thumb"
+                          class="pointer-events-none inline-block ${sizeClass.thumb} rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 ${isChecked ? sizeClass.translate : 'translate-x-0'}"></span>
+                </button>
+            `;
+
+            // Label
+            if (showLabels) {
+                html += `
+                    <span id="${fieldId}_label" class="ml-3 text-sm font-medium ${isChecked ? 'text-gray-900' : 'text-gray-500'}">
+                        ${escapeHtml(isChecked ? labelOn : labelOff)}
+                    </span>
+                `;
+            }
+
+            html += '</div>';
+
+            container.innerHTML = html;
+        },
+
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const hidden = document.getElementById(`${safeId}_hidden`);
+            return hidden ? hidden.value === 'true' : false;
+        },
+
+        setValue: function(fieldId, value) {
+            const safeId = sanitizeId(fieldId);
+            const isChecked = value === true || value === 'true';
+
+            const hidden = document.getElementById(`${safeId}_hidden`);
+            const button = document.getElementById(`${safeId}_button`);
+            const thumb = document.getElementById(`${safeId}_thumb`);
+            const label = document.getElementById(`${safeId}_label`);
+            const widget = document.getElementById(`${safeId}_widget`);
+
+            if (hidden) hidden.value = isChecked;
+
+            if (button) {
+                button.setAttribute('aria-checked', isChecked);
+                // Get color from widget data attribute (preferred) or scan button classes
+                const colorClasses = Object.values(COLOR_CLASSES);
+                let currentColor = 'bg-blue-600';
+
+                // First try to get from widget data attribute
+                if (widget && widget.dataset.color) {
+                    const configuredColor = COLOR_CLASSES[widget.dataset.color];
+                    if (configuredColor) {
+                        currentColor = configuredColor;
+                    }
+                } else {
+                    // Fall back to scanning button classes
+                    for (const cls of colorClasses) {
+                        if (button.classList.contains(cls)) {
+                            currentColor = cls;
+                            break;
+                        }
+                    }
+                }
+
+                if (isChecked) {
+                    button.classList.remove('bg-gray-200');
+                    button.classList.add(currentColor);
+                } else {
+                    button.classList.remove(...colorClasses);
+                    button.classList.add('bg-gray-200');
+                }
+            }
+
+            if (thumb) {
+                // Determine size from current translate class
+                const sizeKeys = Object.keys(SIZE_CLASSES);
+                for (const sizeKey of sizeKeys) {
+                    const sizeClass = SIZE_CLASSES[sizeKey];
+                    if (thumb.classList.contains(sizeClass.thumb)) {
+                        if (isChecked) {
+                            thumb.classList.remove('translate-x-0');
+                            thumb.classList.add(sizeClass.translate);
+                        } else {
+                            thumb.classList.remove(sizeClass.translate);
+                            thumb.classList.add('translate-x-0');
+                        }
+                        break;
+                    }
+                }
+            }
+
+            if (label) {
+                // Get labels from widget data attributes or default
+                const labelOn = widget?.dataset.labelOn || 'On';
+                const labelOff = widget?.dataset.labelOff || 'Off';
+                label.textContent = isChecked ? labelOn : labelOff;
+                if (isChecked) {
+                    label.classList.remove('text-gray-500');
+                    label.classList.add('text-gray-900');
+                } else {
+                    label.classList.remove('text-gray-900');
+                    label.classList.add('text-gray-500');
+                }
+            }
+        },
+
+        handlers: {
+            onToggle: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('toggle-switch');
+                const currentValue = widget.getValue(fieldId);
+                const newValue = !currentValue;
+                widget.setValue(fieldId, newValue);
+                triggerChange(fieldId, newValue);
+            }
+        }
+    });
+
+    console.log('[ToggleSwitchWidget] Toggle switch widget registered');
+})();

web_interface/static/v3/js/widgets/url-input.js

@@ -0,0 +1,250 @@
+/**
+ * LEDMatrix URL Input Widget
+ *
+ * URL input with validation and protocol handling.
+ *
+ * Schema example:
+ * {
+ *   "website": {
+ *     "type": "string",
+ *     "format": "uri",
+ *     "x-widget": "url-input",
+ *     "x-options": {
+ *       "placeholder": "https://example.com",
+ *       "showIcon": true,
+ *       "allowedProtocols": ["http", "https"],
+ *       "showPreview": true
+ *     }
+ *   }
+ * }
+ *
+ * @module UrlInputWidget
+ */
+
+(function() {
+    'use strict';
+
+    const base = window.BaseWidget ? new window.BaseWidget('UrlInput', '1.0.0') : null;
+
+    function escapeHtml(text) {
+        if (base) return base.escapeHtml(text);
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML.replace(/"/g, '"').replace(/'/g, ''');
+    }
+
+    function sanitizeId(id) {
+        if (base) return base.sanitizeId(id);
+        return String(id).replace(/[^a-zA-Z0-9_-]/g, '_');
+    }
+
+    function triggerChange(fieldId, value) {
+        if (base) {
+            base.triggerChange(fieldId, value);
+        } else {
+            const event = new CustomEvent('widget-change', {
+                detail: { fieldId, value },
+                bubbles: true,
+                cancelable: true
+            });
+            document.dispatchEvent(event);
+        }
+    }
+
+    // RFC 3986 scheme pattern: starts with letter, then letters/digits/+/./-
+    const RFC_SCHEME_PATTERN = /^[A-Za-z][A-Za-z0-9+.-]*$/;
+
+    /**
+     * Normalize and validate protocol list against RFC 3986 scheme pattern.
+     * Accepts schemes like "http", "https", "git+ssh", "android-app", etc.
+     * @param {Array|string} protocols - Protocol list (array or comma-separated string)
+     * @returns {Array} Normalized lowercase protocols, defaults to ['http', 'https']
+     */
+    function normalizeProtocols(protocols) {
+        let list = protocols;
+        if (typeof list === 'string') {
+            list = list.split(',').map(p => p.trim()).filter(p => p);
+        } else if (!Array.isArray(list)) {
+            return ['http', 'https'];
+        }
+        const normalized = list
+            .map(p => String(p).trim())
+            .filter(p => RFC_SCHEME_PATTERN.test(p))
+            .map(p => p.toLowerCase());
+        return normalized.length > 0 ? normalized : ['http', 'https'];
+    }
+
+    function isValidUrl(string, allowedProtocols) {
+        try {
+            const url = new URL(string);
+            if (allowedProtocols && allowedProtocols.length > 0) {
+                const protocol = url.protocol.replace(':', '').toLowerCase();
+                return allowedProtocols.includes(protocol);
+            }
+            return true;
+        } catch (_) {
+            return false;
+        }
+    }
+
+    window.LEDMatrixWidgets.register('url-input', {
+        name: 'URL Input Widget',
+        version: '1.0.0',
+
+        render: function(container, config, value, options) {
+            const fieldId = sanitizeId(options.fieldId || container.id || 'url_input');
+            const xOptions = config['x-options'] || config['x_options'] || {};
+            const placeholder = xOptions.placeholder || 'https://example.com';
+            const showIcon = xOptions.showIcon !== false;
+            const showPreview = xOptions.showPreview === true;
+            // Normalize allowedProtocols using RFC 3986 validation
+            const allowedProtocols = normalizeProtocols(xOptions.allowedProtocols);
+
+            const disabled = xOptions.disabled === true;
+            const required = xOptions.required === true;
+
+            const currentValue = value || '';
+
+            // Escape the protocols for safe HTML attribute interpolation
+            const escapedProtocols = escapeHtml(allowedProtocols.join(','));
+            let html = `<div id="${fieldId}_widget" class="url-input-widget" data-field-id="${fieldId}" data-protocols="${escapedProtocols}">`;
+
+            html += '<div class="relative">';
+
+            if (showIcon) {
+                html += `
+                    <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                        <i class="fas fa-link text-gray-400"></i>
+                    </div>
+                `;
+            }
+
+            html += `
+                <input type="url"
+                       id="${fieldId}_input"
+                       name="${escapeHtml(options.name || fieldId)}"
+                       value="${escapeHtml(currentValue)}"
+                       placeholder="${escapeHtml(placeholder)}"
+                       ${disabled ? 'disabled' : ''}
+                       ${required ? 'required' : ''}
+                       onchange="window.LEDMatrixWidgets.getHandlers('url-input').onChange('${fieldId}')"
+                       oninput="window.LEDMatrixWidgets.getHandlers('url-input').onInput('${fieldId}')"
+                       class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 ${showIcon ? 'pl-10' : ''} ${disabled ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} text-black placeholder:text-gray-400">
+            `;
+
+            html += '</div>';
+
+            // Preview link (if enabled and value exists)
+            if (showPreview) {
+                html += `
+                    <div id="${fieldId}_preview" class="mt-2 ${currentValue && isValidUrl(currentValue, allowedProtocols) ? '' : 'hidden'}">
+                        <a id="${fieldId}_preview_link"
+                           href="${escapeHtml(currentValue)}"
+                           target="_blank"
+                           rel="noopener noreferrer"
+                           class="text-sm text-blue-600 hover:text-blue-800 flex items-center">
+                            <i class="fas fa-external-link-alt mr-1 text-xs"></i>
+                            <span>Open link in new tab</span>
+                        </a>
+                    </div>
+                `;
+            }
+
+            // Error message area
+            html += `<div id="${fieldId}_error" class="text-sm text-red-600 mt-1 hidden"></div>`;
+
+            html += '</div>';
+
+            container.innerHTML = html;
+        },
+
+        getValue: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            return input ? input.value : '';
+        },
+
+        setValue: function(fieldId, value) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            if (input) {
+                input.value = value || '';
+                this.handlers.onInput(fieldId);
+            }
+        },
+
+        validate: function(fieldId) {
+            const safeId = sanitizeId(fieldId);
+            const input = document.getElementById(`${safeId}_input`);
+            const errorEl = document.getElementById(`${safeId}_error`);
+            const widget = document.getElementById(`${safeId}_widget`);
+
+            if (!input) return { valid: true, errors: [] };
+
+            const value = input.value;
+            const protocols = normalizeProtocols(widget?.dataset.protocols);
+
+            let isValid = true;
+            let errorMsg = '';
+
+            // First check browser validation (required, type, etc.)
+            if (!input.checkValidity()) {
+                isValid = false;
+                errorMsg = input.validationMessage;
+            } else if (value) {
+                // Then check custom protocol validation
+                if (!isValidUrl(value, protocols)) {
+                    isValid = false;
+                    errorMsg = `Please enter a valid URL (${protocols.join(', ')} only)`;
+                }
+            }
+
+            if (errorEl) {
+                if (!isValid) {
+                    errorEl.textContent = errorMsg;
+                    errorEl.classList.remove('hidden');
+                    input.classList.add('border-red-500');
+                } else {
+                    errorEl.classList.add('hidden');
+                    input.classList.remove('border-red-500');
+                }
+            }
+
+            return { valid: isValid, errors: isValid ? [] : [errorMsg] };
+        },
+
+        handlers: {
+            onChange: function(fieldId) {
+                const widget = window.LEDMatrixWidgets.get('url-input');
+                widget.validate(fieldId);
+                triggerChange(fieldId, widget.getValue(fieldId));
+            },
+
+            onInput: function(fieldId) {
+                const safeId = sanitizeId(fieldId);
+                const input = document.getElementById(`${safeId}_input`);
+                const previewEl = document.getElementById(`${safeId}_preview`);
+                const previewLink = document.getElementById(`${safeId}_preview_link`);
+                const widgetEl = document.getElementById(`${safeId}_widget`);
+
+                const value = input?.value || '';
+                const protocols = normalizeProtocols(widgetEl?.dataset.protocols);
+
+                if (previewEl && previewLink) {
+                    if (value && isValidUrl(value, protocols)) {
+                        previewLink.href = value;
+                        previewEl.classList.remove('hidden');
+                    } else {
+                        previewEl.classList.add('hidden');
+                    }
+                }
+
+                // Validate on input
+                const widget = window.LEDMatrixWidgets.get('url-input');
+                widget.validate(fieldId);
+            }
+        }
+    });
+
+    console.log('[UrlInputWidget] URL input widget registered');
+})();

web_interface/static/v3/plugins_manager.js

@@ -997,18 +997,27 @@ window.initPluginsPage = function() {
     const cancelOnDemandBtn = document.getElementById('cancel-on-demand');
     const onDemandForm = document.getElementById('on-demand-form');
     const onDemandModal = document.getElementById('on-demand-modal');
-    
+
+    console.log('[initPluginsPage] Setting up button listeners:', {
+        refreshBtn: !!refreshBtn,
+        updateAllBtn: !!updateAllBtn,
+        restartBtn: !!restartBtn
+    });
+
     if (refreshBtn) {
         refreshBtn.replaceWith(refreshBtn.cloneNode(true));
         document.getElementById('refresh-plugins-btn').addEventListener('click', refreshPlugins);
+        console.log('[initPluginsPage] Attached refreshPlugins listener');
     }
     if (updateAllBtn) {
         updateAllBtn.replaceWith(updateAllBtn.cloneNode(true));
         document.getElementById('update-all-plugins-btn').addEventListener('click', runUpdateAllPlugins);
+        console.log('[initPluginsPage] Attached runUpdateAllPlugins listener');
     }
     if (restartBtn) {
         restartBtn.replaceWith(restartBtn.cloneNode(true));
         document.getElementById('restart-display-btn').addEventListener('click', restartDisplay);
+        console.log('[initPluginsPage] Attached restartDisplay listener');
     }
     if (searchBtn) {
         searchBtn.replaceWith(searchBtn.cloneNode(true));
@@ -1044,7 +1053,8 @@ window.initPluginsPage = function() {
         onDemandModal.onclick = closeOnDemandModalOnBackdrop;
     }
 
-    loadOnDemandStatus(true);
+    // Load on-demand status silently (false = don't show notification)
+    loadOnDemandStatus(false);
     startOnDemandStatusPolling();
     
     window.pluginManager.initialized = true;
@@ -1675,6 +1685,7 @@ function startOnDemandStatusPolling() {
 window.loadOnDemandStatus = loadOnDemandStatus;
 
 function runUpdateAllPlugins() {
+    console.log('[runUpdateAllPlugins] Button clicked, checking for updates...');
     const button = document.getElementById('update-all-plugins-btn');
 
     if (!button) {
@@ -5008,10 +5019,11 @@ function handleUninstallSuccess(pluginId) {
 }
 
 function refreshPlugins() {
+    console.log('[refreshPlugins] Button clicked, refreshing plugins...');
     // Clear cache to force fresh data
     pluginStoreCache = null;
     cacheTimestamp = null;
-    
+
     loadInstalledPlugins();
     // Fetch latest metadata from GitHub when refreshing
     searchPluginStore(true);
@@ -5019,8 +5031,9 @@ function refreshPlugins() {
 }
 
 function restartDisplay() {
+    console.log('[restartDisplay] Button clicked, restarting display service...');
     showNotification('Restarting display service...', 'info');
-    
+
     fetch('/api/v3/system/action', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },

web_interface/templates/v3/base.html

@@ -2380,24 +2380,12 @@
                 },
 
                 showNotification(message, type = 'info') {
-                    const notifications = document.getElementById('notifications');
+                    // Use global notification widget
-                    const notification = document.createElement('div');
+                    if (typeof window.showNotification === 'function') {
-
+                        window.showNotification(message, type);
-                    const colors = {
+                    } else {
-                        success: 'bg-green-500',
+                        console.log(`[${type.toUpperCase()}]`, message);
-                        error: 'bg-red-500',
+                    }
-                        warning: 'bg-yellow-500',
-                        info: 'bg-blue-500'
-                    };
-
-                    notification.className = `px-4 py-3 rounded-md text-white text-sm ${colors[type] || colors.info}`;
-                    notification.textContent = message;
-
-                    notifications.appendChild(notification);
-
-                    setTimeout(() => {
-                        notification.remove();
-                    }, 5000);
                 },
 
                 escapeHtml(text) {
@@ -4291,26 +4279,19 @@
             });
         };
         
-        function showNotification(message, type = 'info') {
+        // showNotification is provided by notification.js widget
-            console.log(`[${type.toUpperCase()}]`, message);
+        // This fallback is only used if the widget hasn't loaded yet
-            
+        if (typeof window.showNotification !== 'function') {
-            // Create a simple toast notification
+            window.showNotification = function(message, type = 'info') {
-            const notification = document.createElement('div');
+                console.log(`[${type.toUpperCase()}]`, message);
-            notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 ${
+                const notification = document.createElement('div');
-                type === 'success' ? 'bg-green-500' :
+                notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 ${
-                type === 'error' ? 'bg-red-500' :
+                    type === 'success' ? 'bg-green-500' : type === 'error' ? 'bg-red-500' : 'bg-blue-500'
-                'bg-blue-500'
+                } text-white`;
-            } text-white`;
+                notification.textContent = message;
-            notification.textContent = message;
+                document.body.appendChild(notification);
-            
+                setTimeout(() => { notification.style.opacity = '0'; setTimeout(() => notification.remove(), 500); }, 3000);
-            document.body.appendChild(notification);
+            };
-            
-            // Fade out and remove after 3 seconds
-            setTimeout(() => {
-                notification.style.transition = 'opacity 0.5s';
-                notification.style.opacity = '0';
-                setTimeout(() => notification.remove(), 500);
-            }, 3000);
         }
 
         // Section toggle function - already defined earlier, but ensure it's not overwritten
@@ -4914,10 +4895,28 @@
     <!-- Widget Registry System -->
     <script src="{{ url_for('static', filename='v3/js/widgets/registry.js') }}" defer></script>
     <script src="{{ url_for('static', filename='v3/js/widgets/base-widget.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/notification.js') }}" defer></script>
     <script src="{{ url_for('static', filename='v3/js/widgets/file-upload.js') }}" defer></script>
     <script src="{{ url_for('static', filename='v3/js/widgets/checkbox-group.js') }}" defer></script>
     <script src="{{ url_for('static', filename='v3/js/widgets/custom-feeds.js') }}" defer></script>
     <script src="{{ url_for('static', filename='v3/js/widgets/array-table.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/day-selector.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/time-range.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/schedule-picker.js') }}" defer></script>
+    <!-- Basic input widgets -->
+    <script src="{{ url_for('static', filename='v3/js/widgets/text-input.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/number-input.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/textarea.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/select-dropdown.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/toggle-switch.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/radio-group.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/date-picker.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/slider.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/color-picker.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/email-input.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/url-input.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/password-input.js') }}" defer></script>
+    <script src="{{ url_for('static', filename='v3/js/widgets/timezone-selector.js') }}" defer></script>
     <script src="{{ url_for('static', filename='v3/js/widgets/plugin-loader.js') }}" defer></script>
     
     <!-- Legacy plugins_manager.js (for backward compatibility during migration) -->

web_interface/templates/v3/partials/fonts.html

@@ -231,38 +231,11 @@ function initializeFontsTab() {
         return;
     }
     
-    // Ensure showNotification function is available
+    // showNotification is provided by the notification widget (notification.js)
+    // Fallback only if widget hasn't loaded yet
     if (typeof window.showNotification !== 'function') {
         window.showNotification = function(message, type = 'info') {
-            // Try to use the base template's notification system first
+            console.log(`[${type.toUpperCase()}]`, message);
-            if (typeof window.app !== 'undefined' && window.app.showNotification) {
-                window.app.showNotification(message, type);
-                return;
-            }
-            
-            // Create notification element like in base template
-            const notifications = document.getElementById('notifications');
-            if (notifications) {
-                const notification = document.createElement('div');
-
-                const colors = {
-                    success: 'bg-green-500',
-                    error: 'bg-red-500',
-                    warning: 'bg-yellow-500',
-                    info: 'bg-blue-500'
-                };
-
-                notification.className = `px-4 py-3 rounded-md text-white text-sm ${colors[type] || colors.info}`;
-                notification.textContent = message;
-
-                notifications.appendChild(notification);
-
-                setTimeout(() => {
-                    notification.remove();
-                }, 5000);
-            } else {
-                console.log(`${type}: ${message}`);
-            }
         };
     }
 

web_interface/templates/v3/partials/general.html

@@ -8,7 +8,24 @@
           hx-ext="json-enc"
           hx-headers='{"Content-Type": "application/json"}'
           hx-swap="none"
-          hx-on:htmx:after-request="showNotification(event.detail.xhr.responseJSON?.message || 'Settings saved', event.detail.xhr.responseJSON?.status || 'success')"
+          hx-on:htmx:after-request="
+              var xhr = event.detail.xhr;
+              var isSuccess = xhr.status >= 200 && xhr.status < 300;
+              var message = '';
+              var status = 'success';
+              try {
+                  var data = JSON.parse(xhr.responseText);
+                  message = data.message || '';
+                  status = data.status || status;
+              } catch (e) {}
+              if (isSuccess) {
+                  message = message || 'Settings saved';
+              } else {
+                  message = message || 'Failed to save settings';
+                  status = 'error';
+              }
+              showNotification(message, status);
+          "
           class="space-y-6">
 
         <!-- Web Display Autostart -->
@@ -26,14 +43,39 @@
         <!-- Timezone -->
         <div class="form-group">
             <label for="timezone" class="block text-sm font-medium text-gray-700">Timezone</label>
-            <input type="text"
+            <div id="timezone_container" class="mt-1"></div>
-                   id="timezone"
+            <p class="mt-1 text-sm text-gray-600">Select your timezone for time-based features and scheduling.</p>
-                   name="timezone"
-                   value="{{ main_config.timezone or 'America/Chicago' }}"
-                   placeholder="e.g., America/Chicago"
-                   class="form-control">
-            <p class="mt-1 text-sm text-gray-600">IANA timezone, affects time-based features and scheduling.</p>
         </div>
+        <script>
+        (function() {
+            // Track if already initialized to prevent re-render
+            if (window.__timezoneWidgetInitialized) return;
+
+            function initTimezoneWidget() {
+                if (!window.LEDMatrixWidgets) { setTimeout(initTimezoneWidget, 50); return; }
+                var widget = window.LEDMatrixWidgets.get('timezone-selector');
+                if (!widget) { setTimeout(initTimezoneWidget, 50); return; }
+                var container = document.getElementById('timezone_container');
+                if (!container) return;
+
+                // Only render if container is empty (not already rendered)
+                if (container.children.length > 0) return;
+
+                widget.render(container, {
+                    'x-options': { showOffset: true, placeholder: 'Select your timezone...' }
+                }, {{ (main_config.timezone or "America/Chicago")|tojson }}, {
+                    fieldId: 'timezone',
+                    name: 'timezone'
+                });
+                window.__timezoneWidgetInitialized = true;
+            }
+            if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', initTimezoneWidget);
+            } else {
+                setTimeout(initTimezoneWidget, 50);
+            }
+        })();
+        </script>
 
         <!-- Location Information -->
         <div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-3 gap-4">

web_interface/templates/v3/partials/plugin_config.html

@@ -11,9 +11,68 @@
     {% set description = prop.description if prop.description else '' %}
     {% set field_type = prop.type if prop.type is string else (prop.type[0] if prop.type is iterable else 'string') %}
     
-    {# Handle nested objects recursively #}
+    {# Handle nested objects - check for widget first #}
-    {% if field_type == 'object' and prop.properties %}
+    {% if field_type == 'object' %}
-        {{ render_nested_section(key, prop, value, prefix, plugin_id) }}
+        {% set obj_widget = prop.get('x-widget') or prop.get('x_widget') %}
+        {% if obj_widget == 'schedule-picker' %}
+            {# Schedule picker widget - renders enable/mode/times UI #}
+            {% set obj_value = value if value is not none else {} %}
+            <div class="form-group mb-4">
+                <label class="block text-sm font-medium text-gray-700 mb-1">{{ label }}</label>
+                {% if description %}<p class="text-sm text-gray-500 mb-2">{{ description }}</p>{% endif %}
+                <div id="{{ field_id }}_container" class="schedule-picker-container mt-1"></div>
+                <input type="hidden" id="{{ field_id }}_data" name="{{ full_key }}" value='{{ (obj_value|tojson|safe)|replace("'", "&#39;") }}'>
+            </div>
+            <script>
+            (function() {
+                function initWidget() {
+                    if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
+                    var widget = window.LEDMatrixWidgets.get('schedule-picker');
+                    if (!widget) { setTimeout(initWidget, 50); return; }
+                    var container = document.getElementById('{{ field_id }}_container');
+                    if (!container) return;
+                    var value = {{ obj_value|tojson|safe }};
+                    var config = { 'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }} };
+                    widget.render(container, config, value, { fieldId: '{{ field_id }}', pluginId: '{{ plugin_id }}' });
+                }
+                if (document.readyState === 'loading') {
+                    document.addEventListener('DOMContentLoaded', initWidget);
+                } else {
+                    setTimeout(initWidget, 50);
+                }
+            })();
+            </script>
+        {% elif obj_widget == 'time-range' %}
+            {# Time range widget - renders start/end time inputs #}
+            {% set obj_value = value if value is not none else {} %}
+            <div class="form-group mb-4">
+                <label class="block text-sm font-medium text-gray-700 mb-1">{{ label }}</label>
+                {% if description %}<p class="text-sm text-gray-500 mb-2">{{ description }}</p>{% endif %}
+                <div id="{{ field_id }}_container" class="time-range-container mt-1"></div>
+                <input type="hidden" id="{{ field_id }}_data" name="{{ full_key }}" value='{{ (obj_value|tojson|safe)|replace("'", "&#39;") }}'>
+            </div>
+            <script>
+            (function() {
+                function initWidget() {
+                    if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
+                    var widget = window.LEDMatrixWidgets.get('time-range');
+                    if (!widget) { setTimeout(initWidget, 50); return; }
+                    var container = document.getElementById('{{ field_id }}_container');
+                    if (!container) return;
+                    var value = {{ obj_value|tojson|safe }};
+                    var config = { 'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }} };
+                    widget.render(container, config, value, { fieldId: '{{ field_id }}', pluginId: '{{ plugin_id }}' });
+                }
+                if (document.readyState === 'loading') {
+                    document.addEventListener('DOMContentLoaded', initWidget);
+                } else {
+                    setTimeout(initWidget, 50);
+                }
+            })();
+            </script>
+        {% elif prop.properties %}
+            {{ render_nested_section(key, prop, value, prefix, plugin_id) }}
+        {% endif %}
     {% else %}
         <div class="form-group mb-4">
             <label for="{{ field_id }}" class="block text-sm font-medium text-gray-700 mb-1">
@@ -24,16 +83,45 @@
             <p class="text-sm text-gray-500 mb-2">{{ description }}</p>
             {% endif %}
             
-            {# Boolean checkbox #}
+            {# Boolean - check for widget first #}
             {% if field_type == 'boolean' %}
+            {% set bool_widget = prop.get('x-widget') or prop.get('x_widget') %}
+            {% if bool_widget == 'toggle-switch' %}
+                {# Render toggle-switch widget #}
+                <div id="{{ field_id }}_container" class="toggle-switch-container"></div>
+                <script>
+                (function() {
+                    function initWidget() {
+                        if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
+                        var widget = window.LEDMatrixWidgets.get('toggle-switch');
+                        if (!widget) { setTimeout(initWidget, 50); return; }
+                        var container = document.getElementById('{{ field_id }}_container');
+                        if (!container) return;
+                        var value = {{ value|tojson|safe if value is not none else 'false' }};
+                        var config = {
+                            'type': 'boolean',
+                            'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }}
+                        };
+                        widget.render(container, config, value, { fieldId: '{{ field_id }}', name: '{{ full_key }}', pluginId: '{{ plugin_id }}' });
+                    }
+                    if (document.readyState === 'loading') {
+                        document.addEventListener('DOMContentLoaded', initWidget);
+                    } else {
+                        setTimeout(initWidget, 50);
+                    }
+                })();
+                </script>
+            {% else %}
+            {# Default checkbox #}
             <label class="flex items-center cursor-pointer">
-                <input type="checkbox" 
+                <input type="checkbox"
                        id="{{ field_id }}"
-                       name="{{ full_key }}" 
+                       name="{{ full_key }}"
                        {% if value %}checked{% endif %}
                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                 <span class="ml-2 text-sm text-gray-600">Enabled</span>
             </label>
+            {% endif %}
             
             {# Enum dropdown #}
             {% elif prop.enum %}
@@ -47,16 +135,47 @@
                 {% endfor %}
             </select>
             
-            {# Number input #}
+            {# Number input - check for widget first #}
             {% elif field_type in ['number', 'integer'] %}
-            <input type="number" 
+            {% set num_widget = prop.get('x-widget') or prop.get('x_widget') %}
+            {% if num_widget in ['slider', 'number-input'] %}
+                {# Render slider or number-input widget #}
+                <div id="{{ field_id }}_container" class="{{ num_widget }}-container"></div>
+                <script>
+                (function() {
+                    function initWidget() {
+                        if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
+                        var widget = window.LEDMatrixWidgets.get('{{ num_widget }}');
+                        if (!widget) { setTimeout(initWidget, 50); return; }
+                        var container = document.getElementById('{{ field_id }}_container');
+                        if (!container) return;
+                        var value = {{ value|tojson if value is not none else (prop.default|tojson if prop.default is defined else 'null') }};
+                        var config = {
+                            'type': '{{ field_type }}',
+                            'minimum': {{ prop.minimum|tojson if prop.minimum is defined else 'null' }},
+                            'maximum': {{ prop.maximum|tojson if prop.maximum is defined else 'null' }},
+                            'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }}
+                        };
+                        widget.render(container, config, value, { fieldId: '{{ field_id }}', name: '{{ full_key }}', pluginId: '{{ plugin_id }}' });
+                    }
+                    if (document.readyState === 'loading') {
+                        document.addEventListener('DOMContentLoaded', initWidget);
+                    } else {
+                        setTimeout(initWidget, 50);
+                    }
+                })();
+                </script>
+            {% else %}
+            {# Default number input #}
+            <input type="number"
                    id="{{ field_id }}"
-                   name="{{ full_key }}" 
+                   name="{{ full_key }}"
                    value="{{ value if value is not none else (prop.default if prop.default is defined else '') }}"
                    {% if prop.minimum is defined %}min="{{ prop.minimum }}"{% endif %}
                    {% if prop.maximum is defined %}max="{{ prop.maximum }}"{% endif %}
                    {% if field_type == 'integer' %}step="1"{% else %}step="any"{% endif %}
                    class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-white text-black placeholder:text-gray-500">
+            {% endif %}
             
             {# Array - check for file upload widget first (to avoid breaking static-image plugin), then checkbox-group, then array of objects #}
             {% elif field_type == 'array' %}
@@ -150,7 +269,7 @@
                     </div>
                     
                     <!-- Hidden input to store image data -->
-                    <input type="hidden" id="{{ field_id }}_images_data" name="{{ full_key }}" value='{{ array_value|tojson|safe }}'>
+                    <input type="hidden" id="{{ field_id }}_images_data" name="{{ full_key }}" value='{{ (array_value|tojson|safe)|replace("'", "&#39;") }}'>
                 </div>
             {% elif x_widget == 'checkbox-group' %}
                 {# Checkbox group widget for multi-select arrays with enum items #}
@@ -184,6 +303,29 @@
                 {# Sentinel hidden input with bracket notation to allow clearing array to [] when all unchecked #}
                 {# This ensures the field is always submitted, even when all checkboxes are unchecked #}
                 <input type="hidden" name="{{ full_key }}[]" value="">
+            {% elif x_widget == 'day-selector' %}
+                {# Day selector widget for selecting days of the week #}
+                {% set array_value = value if value is not none and value is iterable and value is not string else (prop.default if prop.default is defined and prop.default is iterable and prop.default is not string else []) %}
+                <div id="{{ field_id }}_container" class="day-selector-container mt-1"></div>
+                <script>
+                (function() {
+                    function initWidget() {
+                        if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
+                        var widget = window.LEDMatrixWidgets.get('day-selector');
+                        if (!widget) { setTimeout(initWidget, 50); return; }
+                        var container = document.getElementById('{{ field_id }}_container');
+                        if (!container) return;
+                        var value = {{ array_value|tojson|safe }};
+                        var config = { 'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }} };
+                        widget.render(container, config, value, { fieldId: '{{ field_id }}', pluginId: '{{ plugin_id }}', name: '{{ full_key }}' });
+                    }
+                    if (document.readyState === 'loading') {
+                        document.addEventListener('DOMContentLoaded', initWidget);
+                    } else {
+                        setTimeout(initWidget, 50);
+                    }
+                })();
+                </script>
             {% else %}
                 {# Check for custom-feeds widget first #}
                 {% set items_schema = prop.get('items') or {} %}
@@ -390,13 +532,46 @@
                 {% endif %}
             {% endif %}
             
-            {# Text input (default) #}
+            {# String/default field - check for widgets #}
             {% else %}
-            <input type="text" 
+            {% set str_widget = prop.get('x-widget') or prop.get('x_widget') %}
-                   id="{{ field_id }}"
+            {% set str_value = value if value is not none else (prop.default if prop.default is defined else '') %}
-                   name="{{ full_key }}" 
+            {% if str_widget in ['text-input', 'textarea', 'select-dropdown', 'toggle-switch', 'radio-group', 'date-picker', 'slider', 'color-picker', 'email-input', 'url-input', 'password-input'] %}
-                   value="{{ value if value is not none else (prop.default if prop.default is defined else '') }}"
+                {# Render widget container #}
-                   class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-white text-black placeholder:text-gray-500">
+                <div id="{{ field_id }}_container" class="{{ str_widget }}-container"></div>
+                <script>
+                (function() {
+                    function initWidget() {
+                        if (!window.LEDMatrixWidgets) { setTimeout(initWidget, 50); return; }
+                        var widget = window.LEDMatrixWidgets.get('{{ str_widget }}');
+                        if (!widget) { setTimeout(initWidget, 50); return; }
+                        var container = document.getElementById('{{ field_id }}_container');
+                        if (!container) return;
+                        var value = {{ str_value|tojson|safe }};
+                        var config = {
+                            'type': '{{ field_type }}',
+                            'enum': {{ (prop.enum or [])|tojson|safe }},
+                            'minimum': {{ prop.minimum|tojson if prop.minimum is defined else 'null' }},
+                            'maximum': {{ prop.maximum|tojson if prop.maximum is defined else 'null' }},
+                            'x-options': {{ (prop.get('x-options') or prop.get('x_options') or {})|tojson|safe }}
+                        };
+                        widget.render(container, config, value, { fieldId: '{{ field_id }}', name: '{{ full_key }}', pluginId: '{{ plugin_id }}' });
+                    }
+                    if (document.readyState === 'loading') {
+                        document.addEventListener('DOMContentLoaded', initWidget);
+                    } else {
+                        setTimeout(initWidget, 50);
+                    }
+                })();
+                </script>
+            {% else %}
+                {# Default text input #}
+                <input type="text"
+                       id="{{ field_id }}"
+                       name="{{ full_key }}"
+                       value="{{ str_value }}"
+                       class="form-input w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 bg-white text-black placeholder:text-gray-500">
+            {% endif %}
             {% endif %}
         </div>
     {% endif %}

web_interface/templates/v3/partials/plugins.html

@@ -7,13 +7,13 @@
     <!-- Plugin Controls -->
     <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
         <div class="flex items-center space-x-4">
-            <button id="refresh-plugins-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
+            <button type="button" id="refresh-plugins-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
                 <i class="fas fa-sync-alt mr-2"></i>Refresh Plugins
             </button>
-            <button id="update-all-plugins-btn" class="btn bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md flex items-center">
+            <button type="button" id="update-all-plugins-btn" class="btn bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md flex items-center">
                 <i class="fas fa-cloud-download-alt mr-2"></i>Check &amp; Update All
             </button>
-            <button id="restart-display-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
+            <button type="button" id="restart-display-btn" class="btn bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
                 <i class="fas fa-redo mr-2"></i>Restart Display
             </button>
         </div>

web_interface/templates/v3/partials/raw_json.html

@@ -312,28 +312,7 @@ function saveSecretsConfig() {
     }
 }
 
-// Global notification function
+// showNotification is provided by the notification widget (notification.js)
-function showNotification(message, type = 'info') {
+// No local definition needed - uses window.showNotification from the widget
-    const notifications = document.getElementById('notifications');
-    if (!notifications) return;
-    
-    const notification = document.createElement('div');
-    
-    const colors = {
-        success: 'bg-green-500',
-        error: 'bg-red-500',
-        warning: 'bg-yellow-500',
-        info: 'bg-blue-500'
-    };
-    
-    notification.className = `px-4 py-3 rounded-md text-white text-sm shadow-lg ${colors[type] || colors.info}`;
-    notification.innerHTML = `<i class="fas fa-${type === 'success' ? 'check' : type === 'error' ? 'times' : 'info'}-circle mr-2"></i>${message}`;
-    
-    notifications.appendChild(notification);
-    
-    setTimeout(() => {
-        notification.remove();
-    }, 5000);
-}
 </script>
 

web_interface/templates/v3/partials/schedule.html

@@ -4,135 +4,16 @@
         <p class="mt-1 text-sm text-gray-600">Configure when the LED matrix display should be active. You can set global hours or customize times for each day of the week.</p>
     </div>
 
-    <form hx-post="/api/v3/config/schedule"
+    <form id="schedule_form"
+          hx-post="/api/v3/config/schedule"
           hx-ext="json-enc"
           hx-headers='{"Content-Type": "application/json"}'
           hx-swap="none"
-          hx-on:htmx:after-request="showNotification(event.detail.xhr.responseJSON?.message || 'Schedule settings saved', event.detail.xhr.responseJSON?.status || 'success')"
+          hx-on:htmx:after-request="handleScheduleResponse(event)"
           class="space-y-6">
 
-        <!-- Enable Schedule -->
+        <!-- Schedule Picker Widget Container -->
-        <div class="bg-blue-50 rounded-lg p-4">
+        <div id="schedule_picker_container"></div>
-            <label class="flex items-center">
-                <input type="checkbox"
-                       name="enabled"
-                       id="schedule_enabled"
-                       {{ 'checked' if schedule_config.enabled else '' }}
-                       class="form-control h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
-                <span class="ml-2 text-sm font-medium text-gray-900">Enable Schedule</span>
-            </label>
-            <p class="mt-1 text-sm text-gray-600">When enabled, the display will only operate during specified hours.</p>
-        </div>
-
-        <!-- Schedule Mode Selection -->
-        <div class="bg-gray-50 rounded-lg p-4">
-            <h3 class="text-md font-medium text-gray-900 mb-4">Schedule Mode</h3>
-            <div class="space-y-3">
-                <label class="flex items-center">
-                    <input type="radio"
-                           name="mode"
-                           value="global"
-                           id="mode_global"
-                           {% if not schedule_config.get('days') %}checked{% endif %}
-                           onclick="toggleScheduleMode('global')"
-                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
-                    <span class="ml-2 text-sm font-medium text-gray-900">Global Schedule</span>
-                </label>
-                <p class="ml-6 text-sm text-gray-600">Use the same start and end time for all days of the week</p>
-
-                <label class="flex items-center mt-4">
-                    <input type="radio"
-                           name="mode"
-                           value="per_day"
-                           id="mode_per_day"
-                           {% if schedule_config.get('days') %}checked{% endif %}
-                           onclick="toggleScheduleMode('per_day')"
-                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300">
-                    <span class="ml-2 text-sm font-medium text-gray-900">Per-Day Schedule</span>
-                </label>
-                <p class="ml-6 text-sm text-gray-600">Set different times for each day of the week</p>
-            </div>
-        </div>
-
-        <!-- Global Schedule -->
-        <div id="global_schedule" class="bg-gray-50 rounded-lg p-4" style="display: {% if not schedule_config.get('days') %}block{% else %}none{% endif %};">
-            <h3 class="text-md font-medium text-gray-900 mb-4">Global Times</h3>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                <div class="form-group">
-                    <label for="start_time" class="block text-sm font-medium text-gray-700">Start Time</label>
-                    <input type="time"
-                           id="start_time"
-                           name="start_time"
-                           value="{{ schedule_config.start_time or '07:00' }}"
-                           class="form-control">
-                    <p class="mt-1 text-sm text-gray-600">When to start displaying content (HH:MM)</p>
-                </div>
-
-                <div class="form-group">
-                    <label for="end_time" class="block text-sm font-medium text-gray-700">End Time</label>
-                    <input type="time"
-                           id="end_time"
-                           name="end_time"
-                           value="{{ schedule_config.end_time or '23:00' }}"
-                           class="form-control">
-                    <p class="mt-1 text-sm text-gray-600">When to stop displaying content (HH:MM)</p>
-                </div>
-            </div>
-        </div>
-
-        <!-- Per-Day Schedule -->
-        <div id="per_day_schedule" class="space-y-3" style="display: {% if schedule_config.get('days') %}block{% else %}none{% endif %};">
-            <h3 class="text-md font-medium text-gray-900 mb-4">Day-Specific Times</h3>
-            
-            <div class="bg-gray-50 rounded-lg p-4">
-                <div class="overflow-x-auto">
-                    <table class="min-w-full divide-y divide-gray-200">
-                        <thead>
-                            <tr class="bg-gray-100">
-                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">Day</th>
-                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">Enabled</th>
-                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">Start</th>
-                                <th class="px-3 py-2 text-left text-xs font-semibold text-gray-700 uppercase">End</th>
-                            </tr>
-                        </thead>
-                        <tbody class="bg-white divide-y divide-gray-200">
-                            {% set days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'] %}
-                            {% for day in days %}
-                            <tr class="hover:bg-gray-50">
-                                <td class="px-3 py-2 whitespace-nowrap">
-                                    <span class="text-sm font-medium text-gray-900 capitalize">{{ day }}</span>
-                                </td>
-                                <td class="px-3 py-2 whitespace-nowrap">
-                                    <input type="checkbox"
-                                           name="{{ day }}_enabled"
-                                           id="{{ day }}_enabled"
-                                           {{ 'checked' if schedule_config.get('days', {}).get(day, {}).get('enabled', True) else '' }}
-                                           class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
-                                           onchange="toggleDaySchedule('{{ day }}', this.checked)">
-                                </td>
-                                <td class="px-3 py-2 whitespace-nowrap">
-                                    <input type="time"
-                                           id="{{ day }}_start"
-                                           name="{{ day }}_start"
-                                           value="{{ schedule_config.get('days', {}).get(day, {}).get('start_time', '07:00') }}"
-                                           class="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 {{ 'disabled bg-gray-100' if not schedule_config.get('days', {}).get(day, {}).get('enabled', True) else '' }}"
-                                           {{ 'disabled' if not schedule_config.get('days', {}).get(day, {}).get('enabled', True) else '' }}>
-                                </td>
-                                <td class="px-3 py-2 whitespace-nowrap">
-                                    <input type="time"
-                                           id="{{ day }}_end"
-                                           name="{{ day }}_end"
-                                           value="{{ schedule_config.get('days', {}).get(day, {}).get('end_time', '23:00') }}"
-                                           class="block w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 {{ 'disabled bg-gray-100' if not schedule_config.get('days', {}).get(day, {}).get('enabled', True) else '' }}"
-                                           {{ 'disabled' if not schedule_config.get('days', {}).get(day, {}).get('enabled', True) else '' }}>
-                                </td>
-                            </tr>
-                            {% endfor %}
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
 
         <!-- Submit Button -->
         <div class="flex justify-end">
@@ -146,55 +27,122 @@
 </div>
 
 <script>
-function toggleScheduleMode(mode) {
+(function() {
-    const globalSchedule = document.getElementById('global_schedule');
+    'use strict';
-    const perDaySchedule = document.getElementById('per_day_schedule');
-    
-    if (mode === 'global') {
-        globalSchedule.style.display = 'block';
-        perDaySchedule.style.display = 'none';
-    } else {
-        globalSchedule.style.display = 'none';
-        perDaySchedule.style.display = 'block';
-    }
-}
 
-function toggleDaySchedule(day, enabled) {
+    // Initialize schedule picker widget when DOM is ready
-    const startInput = document.getElementById(day + '_start');
+    function initSchedulePicker() {
-    const endInput = document.getElementById(day + '_end');
+        const container = document.getElementById('schedule_picker_container');
-    
+        if (!container) {
-    startInput.disabled = !enabled;
+            console.error('[Schedule] Container not found');
-    endInput.disabled = !enabled;
+            return;
-    
+        }
-    if (!enabled) {
-        startInput.value = '';
-        endInput.value = '';
-    } else {
-        // Set default values if empty
-        if (!startInput.value) startInput.value = '07:00';
-        if (!endInput.value) endInput.value = '23:00';
-    }
-}
 
-// Helper function for notifications (if not already defined globally)
+        // Check if widget registry is available
-function showNotification(message, type) {
+        if (typeof window.LEDMatrixWidgets === 'undefined') {
-    const colors = {
+            console.error('[Schedule] LEDMatrixWidgets registry not available');
-        success: 'bg-green-500',
+            return;
-        error: 'bg-red-500',
+        }
-        warning: 'bg-yellow-500',
+
-        info: 'bg-blue-500'
+        const widget = window.LEDMatrixWidgets.get('schedule-picker');
+        if (!widget) {
+            console.error('[Schedule] schedule-picker widget not registered');
+            return;
+        }
+
+        // Get schedule config from template data (injected by Jinja2)
+        // Default to empty object if null/undefined
+        const scheduleConfig = {{ schedule_config | tojson | safe }} || {};
+
+        // Determine mode: prefer explicit mode, then infer from days, then default to global
+        let mode = 'global';
+        if (scheduleConfig.mode) {
+            // Normalize mode value (handle both 'per_day' and 'per-day')
+            mode = scheduleConfig.mode.replace('-', '_');
+        } else if (scheduleConfig.days) {
+            mode = 'per_day';
+        }
+
+        // Convert flat config to nested format expected by widget
+        const widgetValue = {
+            enabled: scheduleConfig.enabled || false,
+            mode: mode,
+            start_time: scheduleConfig.start_time || '07:00',
+            end_time: scheduleConfig.end_time || '23:00',
+            days: scheduleConfig.days || {}
+        };
+
+        // If we have per-day data in the old flat format, convert it
+        if (!scheduleConfig.days) {
+            widgetValue.days = {};
+            const days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'];
+            days.forEach(function(day) {
+                widgetValue.days[day] = {
+                    enabled: true,
+                    start_time: '07:00',
+                    end_time: '23:00'
+                };
+            });
+        }
+
+        // Render the widget
+        widget.render(container, {
+            'x-options': {
+                showModeToggle: true,
+                showEnableToggle: true,
+                compactMode: false
+            }
+        }, widgetValue, {
+            fieldId: 'schedule'
+        });
+
+        console.log('[Schedule] Schedule picker widget initialized');
+    }
+
+    // Handle form submission response
+    window.handleScheduleResponse = function(event) {
+        const xhr = event.detail.xhr;
+        let response;
+        try {
+            response = JSON.parse(xhr.responseText);
+        } catch (e) {
+            response = { status: 'error', message: 'Invalid response from server' };
+        }
+
+        const message = response.message || (response.status === 'success' ? 'Schedule settings saved' : 'Error saving schedule');
+        const type = response.status || 'info';
+
+        // Use global notification function if available
+        if (typeof window.showNotification === 'function') {
+            window.showNotification(message, type);
+        } else {
+            // Fallback notification
+            const colors = {
+                success: 'bg-green-500',
+                error: 'bg-red-500',
+                warning: 'bg-yellow-500',
+                info: 'bg-blue-500'
+            };
+
+            const notification = document.createElement('div');
+            notification.className = 'fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 ' + (colors[type] || colors.info) + ' text-white';
+            notification.textContent = message;
+            document.body.appendChild(notification);
+
+            setTimeout(function() {
+                notification.style.transition = 'opacity 0.5s';
+                notification.style.opacity = '0';
+                setTimeout(function() { notification.remove(); }, 500);
+            }, 3000);
+        }
     };
-    
-    const notification = document.createElement('div');
-    notification.className = `fixed top-4 right-4 px-6 py-3 rounded-lg shadow-lg z-50 ${colors[type] || colors.info} text-white`;
-    notification.textContent = message;
-    document.body.appendChild(notification);
-    
-    setTimeout(() => {
-        notification.style.transition = 'opacity 0.5s';
-        notification.style.opacity = '0';
-        setTimeout(() => notification.remove(), 500);
-    }, 3000);
-}
-</script>
 
+    // Initialize when DOM is ready or if already loaded
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initSchedulePicker);
+    } else {
+        // Small delay to ensure widget scripts are loaded
+        setTimeout(initSchedulePicker, 50);
+    }
+})();
+</script>