Release 2.8.2

.dockerignore

@@ -1,5 +1,6 @@
 *
 !package.json
+!package-lock.json
 !build/
 !build/**
 !src/

.github/copilot-instructions.md

@@ -3,6 +3,9 @@
 ## Versioning and releases
 
 - Treat `package.json` as the source of truth for the application version.
+- Keep `package.json`, `build/package.player.json`, and `build/package.web.json` on the same version number.
+- Keep dependency versions and package metadata in `package.json`, `package-lock.json`, `build/package.player.json`, and `build/package.web.json` aligned unless a dependency is intentionally omitted from a specific bundle.
+- When changing bundled library versions, update the About page source data from the same package metadata or vendored asset banner rather than hardcoding a fresh literal.
 - When the app version changes, update `CHANGELOG.md` in the same change.
 - Keep database migration versions aligned with the release they actually belong to.
 - If only part of a migration batch belongs to a newer release, split that batch into a separate migration entry instead of relabeling the earlier release.

.github/workflows/docker-publish.yml

@@ -7,17 +7,18 @@ on:
   workflow_dispatch:
 
 jobs:
-  build-and-push:
+  build-and-push-existing-registry:
     runs-on: ubuntu-latest
 
     strategy:
+      fail-fast: false
       matrix:
         include:
           - name: web
-            image: git.lzstealth.com/lzstealth/pulse-signage-web
+            repository: pulse-signage-web
             dockerfile: ./build/Dockerfile
           - name: player
-            image: git.lzstealth.com/lzstealth/pulse-signage-player
+            repository: pulse-signage-player
             dockerfile: ./build/Dockerfile.player
 
     steps:
@@ -27,7 +28,7 @@ jobs:
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
-      - name: Log in to container registry
+      - name: Log in to existing package registry
         uses: docker/login-action@v3
         with:
           registry: git.lzstealth.com
@@ -38,7 +39,8 @@ jobs:
         id: meta
         uses: docker/metadata-action@v5
         with:
-          images: ${{ matrix.image }}
+          images: |
+            git.lzstealth.com/lzstealth/${{ matrix.repository }}
           tags: |
             type=raw,value=latest
             type=ref,event=tag

CHANGELOG.md

@@ -2,6 +2,234 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.8.2 - 2026-08-16
+
+### Changed
+
+- Standardized update audit events on from/to changes and added readable table diffs for nested JSON, arrays, null values, and empty strings.
+- Standardized internal `src/data` imports on the `#src` alias.
+
+## 2.8.1 - 2026-08-16
+
+### Fixed
+
+- Prevented startup and runtime duplicate-key writes from consuming auto-increment values in permission, player, onboarding, settings, and relationship tables.
+- Prevented partial timetable schemas from being incorrectly treated as fully migrated during schema version detection.
+
+### Changed
+
+- Renamed the built-in administrator role key to `super-admin`, while allowing its display name and description to be edited without being overwritten on restart.
+
+## 2.8.0 - 2026-08-16
+
+### Added
+
+- Filtered audit-log CSV export with a dedicated `audit-log.export` permission.
+- Canvas Sizes as an individual Content audit category.
+- Audit events for slide, template, playlist, and screen changes.
+- Audit events for System Settings changes.
+- Administration audit events for user and role management.
+- Audit logging enablement, category selection, and request metadata controls.
+- The extensible audit event storage, retention setting, dedicated audit-log permission, and paginated viewer foundation.
+- A Defaults settings section for player and announcement defaults.
+- A configurable maximum active session limit that removes the oldest sessions first.
+- IP address and user-agent metadata to active sessions.
+- The option for users to sign out their other active sessions from My Account.
+- Persistent administrator-controlled account locking and unlocking.
+- Database-backed login rate limiting with configurable attempts, lockout duration, and tracking scope.
+- A permissions-gated System Settings page for announcement icon suggestions, media upload limits and MIME types, session lifetime, and password-change policies.
+- Configurable forced password changes for newly created users and administrator password resets.
+- The database foundation for key-based application settings, including typed defaults and validation.
+
+### Changed
+
+- Updated the API and database documentation and added the Docker publish status badge to the project README.
+- Renamed the audit export permission to `audit-log.allow`.
+- Made Content and Data Sources audit categories opt-in and excluded automatic data-source refreshes from audit logging.
+- Split Content audit logging into individual Slides, Templates, Playlists, Screens, and Announcements categories.
+- Renamed the System Settings audit category key from `settings` to `system-settings`.
+- Split audit administration events into separate Users and Roles categories.
+- Split RSS and API data-source refresh defaults.
+- Made the default announcement duration use a value and unit selector, matching announcement forms.
+- Replaced password strength presets with customizable length, category, and character requirements.
+- Session expiration now uses the configured system setting, and user and role administration is grouped under the Settings area.
+- Renamed the system settings permissions to the `system-settings.*` namespace and migrated existing role assignments.
+- Added numeric auto-increment identifiers to every table and retained natural or relationship keys as unique constraints.
+
+## 2.7.6 - 2026-08-15
+
+### Changed
+
+- The announcement icon picker now supports searching the full Bootstrap Icons catalog while still showing the curated suggestion set by default.
+
+### Fixed
+
+- The announcement Play/Stop button now refreshes after saving screen-group changes, so Play stays disabled until the announcement actually has targets again.
+
+## 2.7.5 - 2026-08-15
+
+### Changed
+
+- The About page now reads bundled library versions from package metadata and the vendored AdminLTE stylesheet.
+- AdminLTE is now reported as 4.3.1.
+- Animate.css is now reported as 4.1.1.
+- Bootstrap Icons is now reported as 1.13.1.
+- Cropper.js is now reported as 1.6.2.
+- Express is now reported as 5.2.1.
+- Handlebars is now reported as 4.7.8.
+- hls.js is now reported as 1.7.0.
+- Multer is now reported as 2.2.0.
+- MySQL2 is now reported as 3.23.3.
+- Sharp is now reported as 0.35.3.
+- TinyMCE is now reported from the vendored package metadata.
+- ws is now reported as 8.21.3.
+- The runtime and container images now target Node.js 26.
+
+## 2.7.4 - 2026-08-15
+
+### Added
+
+- A new About page.
+
+### Changed
+
+- Refreshed the vendored AdminLTE assets to 4.3.1.
+
+## 2.7.3 - 2026-08-15
+
+### Changed
+
+- The slide image cropper now warns that SVG and GIF files will be rasterized if they are edited, and it keeps the original file only when the full image remains selected.
+- The slide image upload flow now accepts PNG, JPG, GIF, WebP, and SVG images, while the WYSIWYG image uploader now matches that same allowlist.
+- TIFF is no longer accepted by the WYSIWYG image uploader.
+
+### Fixed
+
+- The player now preserves quoted custom font-family values from rich text content, so fonts with spaces such as Old London render correctly on screens.
+
+## 2.7.2 - 2026-08-14
+
+### Fixed
+
+- HTML and webpage region previews now normalize object-shaped content before rendering, so the player, thumbnails, and popup preview show the intended iframe content instead of leaking raw objects.
+- HTML and webpage preview iframes now size explicitly to the full region bounds in the player, thumbnails, and popup preview.
+
+## 2.7.1 - 2026-08-14
+
+### Changed
+
+- The player page now supports keyboard navigation with arrow keys to move between slides.
+
+## 2.7.0 - 2026-08-14
+
+### Added
+
+- The WYSIWYG editor now supports adding small images.
+
+### Changed
+
+- The WYSIWYG image insertion flow also received a small code cleanup to simplify the related helper logic.
+- The default table formatting has been applied.
+- Timetable regions now use the renamed helpers end to end in the editor and player, including timezone-aware rendering for timetable entry placeholders.
+
+## 2.6.27 - 2026-08-14
+
+### Fixed
+
+- Scheduled task intervals now display the most appropriate exact unit, such as seconds, minutes, hours, or days, while keeping the sort order numeric.
+
+## 2.6.26 - 2026-08-10
+
+### Changed
+
+- API sources and RSS feeds now accept hours as an update interval unit, and the list and background task scheduling paths now format and convert that unit correctly.
+
+## 2.6.25 - 2026-08-10
+
+### Fixed
+
+- Screen group edit now keeps the slug locked after creation, so existing screen group URLs remain stable.
+
+## 2.6.24 - 2026-08-10
+
+### Fixed
+
+- Deferred playlist updates now keep the current slide index when the next playlist snapshot is applied, so playback no longer jumps back to the first slide mid-cycle.
+
+## 2.6.23 - 2026-08-09
+
+### Fixed
+
+- Dashboard quick-action and kiosk-launcher cards now use row spacing instead of extra card padding, so the layout stays consistent at large widths.
+- API and RSS refresh jobs now notify affected player screens only when the refreshed data actually changes, so unchanged polls no longer trigger redundant player refreshes.
+
+## 2.6.22 - 2026-08-09
+
+### Changed
+
+- Startup now logs the previously detected schema version, the current app version, and whether pending migrations exist.
+
+### Fixed
+
+- Direct-to-URL player sessions now generate and persist a stable onboarding device id in session storage, so connected screens can still be moved and renamed independently without going through the onboarding flow first.
+- The connected-clients move action now tolerates rows that only have a live connection id, which keeps move operations working for screens that skipped onboarding.
+
+## 2.6.21 - 2026-08-09
+
+### Changed
+
+- Startup now logs the previously detected schema version, the current app version, and whether migrations are required.
+- The schema documentation now reflects the timetable table rename, the new `o_app_state` table, and startup version tracking.
+- Timetable timezone placeholders now use `tz` for the short zone name and `tz_long` for the full IANA zone.
+
+## 2.6.20 - 2026-08-09
+
+### Changed
+
+- Startup now logs the previously detected schema version, the current app version, and whether migrations are required.
+
+## 2.6.19 - 2026-08-09
+
+### Changed
+
+- Timetable editor helpers, routes, and table layout now use timetable-specific naming and tighter card/table styling.
+- Connected clients now sort by client identity fields instead of the old IP-based ordering assumption.
+
+## 2.6.18 - 2026-08-09
+
+### Changed
+
+- Timetable tables were renamed from the old `schedule` names to `timetable` names, and existing databases now rename those tables during migration.
+- The timetable group editor now uses timetable-specific naming in its shared helpers and keeps the entries table aligned with the standard admin card/table layout.
+
+## 2.6.17 - 2026-08-09
+
+### Changed
+
+- Existing timetable groups and entries are now migrated to Europe/London, and timetable dates are rewritten to UTC using that source timezone so the wall-clock meaning stays intact.
+
+### Fixed
+
+- New timetable groups now default to Europe/London so the timetable editor and saved data start from the same timezone assumption as the migrated rows.
+
+## 2.6.16 - 2026-08-09
+
+### Changed
+
+- Timetable groups now store an IANA time zone and render their entry datetimes in that timetable time zone, so schedules keep the same wall-clock meaning when they are edited from another country.
+
+### Fixed
+
+- Timetable entry date inputs now round-trip through the timetable time zone instead of the browser locale, so saving from Florida while targeting Germany keeps the intended local times.
+
+## 2.6.15 - 2026-08-08
+
+### Fixed
+
+- Slide update media sync on the player now removes uploads that were removed from the slide, so player storage stays aligned with the current slide content.
+- Routine player and player-bridge media upload/delete logs were removed to keep remote player and bridge operation quieter.
+- Background task descriptions no longer repeat the player slug when the task key already ends with that player name.
+
 ## 2.6.14 - 2026-08-08
 
 ### Fixed

README.md

@@ -1,5 +1,7 @@
 # Pulse Signage
 
+[![Publish Docker Image](https://git.lzstealth.com/lzstealth/pulse-signage/actions/workflows/docker-publish.yml/badge.svg?branch=main)](https://git.lzstealth.com/lzstealth/pulse-signage/actions?workflow=docker-publish.yml)
+
 Pulse Signage is a self-hosted digital signage platform for teams that want clear, reliable control over the content on every screen.
 
 It gives you one place to publish playlists, slides, announcements, and live updates without handing the workflow to a third-party service.

build/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:24-alpine
+FROM node:26-alpine
 
 WORKDIR /app
 
@@ -6,6 +6,7 @@ RUN apk add --no-cache chromium nss freetype harfbuzz ttf-freefont
 
 COPY build/package.web.json ./package.json
 RUN npm install --omit=dev --no-audit --no-fund
+COPY package-lock.json ./package-lock.json
 
 COPY src ./src
 COPY scripts ./scripts

build/Dockerfile.player

@@ -1,4 +1,4 @@
-FROM node:24-alpine
+FROM node:26-alpine
 
 WORKDIR /app
 
@@ -6,6 +6,7 @@ RUN apk add --no-cache ffmpeg
 
 COPY build/package.player.json ./package.json
 RUN npm install --omit=dev --no-audit --no-fund
+COPY package-lock.json ./package-lock.json
 
 COPY src ./src
 COPY scripts ./scripts

build/package.player.json

@@ -1,8 +1,11 @@
 {
   "name": "pulse-signage-player",
-  "version": "2.6.14",
+  "version": "2.8.2",
   "private": false,
   "description": "Pulse Signage player application bundle",
+  "engines": {
+    "node": ">=26.0.0"
+  },
   "main": "src/common.js",
   "scripts": {
     "start": "node -r dotenv/config src/player.js",
@@ -10,10 +13,10 @@
   },
   "dependencies": {
     "dotenv": "^17.4.2",
-    "express": "^4.21.2",
+    "express": "^5.2.1",
     "handlebars": "^4.7.8",
-    "hls.js": "^1.5.15",
+    "hls.js": "^1.7.0",
-    "mysql2": "^3.14.3",
+    "mysql2": "^3.23.3",
-    "ws": "^8.21.0"
+    "ws": "^8.21.3"
   }
 }

build/package.web.json

@@ -1,22 +1,25 @@
 {
   "name": "pulse-signage-web",
-  "version": "2.6.14",
+  "version": "2.8.2",
   "private": false,
   "description": "Pulse Signage web and bridge application bundle",
+  "engines": {
+    "node": ">=26.0.0"
+  },
   "main": "src/common.js",
   "scripts": {
     "start": "node -r dotenv/config src/web.js",
     "start:web": "node -r dotenv/config src/web.js"
   },
   "dependencies": {
-    "@sparticuz/chromium": "^137.0.0",
+    "@sparticuz/chromium": "^149.0.0",
     "dotenv": "^17.4.2",
-    "express": "^4.21.2",
+    "express": "^5.2.1",
     "handlebars": "^4.7.8",
     "multer": "^2.2.0",
-    "mysql2": "^3.14.3",
+    "mysql2": "^3.23.3",
-    "puppeteer-core": "^24.16.0",
+    "puppeteer-core": "^25.7.0",
     "sharp": "^0.35.3",
-    "ws": "^8.21.0"
+    "ws": "^8.21.3"
   }
 }

docker-compose/.env.example

@@ -17,10 +17,9 @@ PLAYER_PUBLIC_URL="http://localhost:8081"
 PLAYER_INTERNAL_URL="http://player:8081"
 
 # Web app bootstrap settings
-SESSION_MAX_AGE_DAYS=14
 DEFAULT_ADMIN_USERNAME="admin"
 DEFAULT_ADMIN_NAME="Admin"
-DEFAULT_ADMIN_PASSWORD="password123"
+DEFAULT_ADMIN_PASSWORD="password123!"
 
 # Bridge settings for the player-bridge service
 WEB_INTERNAL_URL="http://web:8080"

docker-compose/README.md

@@ -45,7 +45,6 @@ Key configuration:
 
 - `DB_HOST`, `DB_PORT`, `DB_NAME`, `DB_USER`, `DB_PASSWORD`
 - `PULSE_SIGNAGE_SHARED_SECRET`
-- `SESSION_MAX_AGE_DAYS`
 - `DEFAULT_ADMIN_USERNAME`
 - `DEFAULT_ADMIN_NAME`
 - `DEFAULT_ADMIN_PASSWORD`
@@ -122,7 +121,6 @@ Important values:
 - `PLAYER_INTERNAL_URL` - internal URL the web app uses for local player calls
 - `BRIDGE_INTERNAL_URL` - bridge URL the web app uses for player snapshot and command forwarding
 - `WEB_INTERNAL_URL` - internal URL the bridge uses to call the web app directly
-- `SESSION_MAX_AGE_DAYS` - dashboard session lifetime
 - `DEFAULT_ADMIN_*` - bootstrap admin account values
 - `PASSWORD_HASH_ITERATIONS` - password hashing cost
 - `MYSQL_ROOT_PASSWORD` - root password for the local MySQL container
@@ -167,7 +165,6 @@ Leave it blank only if you intentionally want to run without request signing in
 | `DB_USER` | web, player, bridge, mysql | Database user. |
 | `DB_PASSWORD` | web, player, bridge, mysql | Database password. |
 | `MYSQL_ROOT_PASSWORD` | mysql | Root password for the local MySQL container. |
-| `SESSION_MAX_AGE_DAYS` | web | Session cookie lifetime. |
 | `DEFAULT_ADMIN_USERNAME` | web | Bootstrap admin username. |
 | `DEFAULT_ADMIN_NAME` | web | Bootstrap admin display name. |
 | `DEFAULT_ADMIN_PASSWORD` | web | Bootstrap admin password. |

docker-compose/docker-compose.yml

@@ -16,7 +16,6 @@ services:
       DB_PASSWORD: ${DB_PASSWORD:-signage_password}
       PULSE_SIGNAGE_SHARED_SECRET: ${PULSE_SIGNAGE_SHARED_SECRET:-}
       BRIDGE_INTERNAL_URL: ${BRIDGE_INTERNAL_URL:-http://player-bridge:8090}
-      SESSION_MAX_AGE_DAYS: ${SESSION_MAX_AGE_DAYS:-14}
       DEFAULT_ADMIN_USERNAME: ${DEFAULT_ADMIN_USERNAME:-admin}
       DEFAULT_ADMIN_NAME: ${DEFAULT_ADMIN_NAME:-Admin}
       DEFAULT_ADMIN_PASSWORD: ${DEFAULT_ADMIN_PASSWORD:-password123}

docs/api.md

@@ -286,6 +286,8 @@ Response fields:
 - `id`
 - `name`
 - `fade_between_slides`
+- `skip_unavailable_rtmp`
+- `canvas_id`
 
 ### Slide
 
@@ -293,12 +295,9 @@ Response fields:
 - `title`
 - `body`
 - `duration_seconds`
-- `schedule_mode`
+- `use_video_duration`
-- `schedule_start_datetime`
+- `disable_audio`
-- `schedule_end_datetime`
+- `scheduleRules`
-- `schedule_start_time`
-- `schedule_end_time`
-- `schedule_days_json`
 - `media_url`
 - `media_type`
 - `kind`

docs/schema.md

@@ -3,7 +3,7 @@
 This app creates and maintains its schema at startup through `src/db/index.js`.
 The sections below summarize the current tables and their purpose.
 
-Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_at` and `modified_at` when a table supports auditing.
+Tables generally use a numeric auto-increment `id` primary key. The relationship table `d_announcement_screens` intentionally uses the composite `(announcement_id, screen_id)` primary key instead. Natural and relationship keys remain as unique constraints where needed. Timestamps are stored as `created_at` and `modified_at` when a table supports auditing.
 
 ## Admin
 
@@ -16,7 +16,7 @@ Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_
 
 ### `a_users`
 
-- `id`, `name`, `username`, `password_hash`, `password_salt`, `password_iterations`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `id`, `name`, `username`, `password_hash`, `password_salt`, `password_iterations`, `must_change_password`, `account_locked`, `created_at`, `created_by`, `modified_at`, `modified_by`
 - `username` is unique.
 
 ### `a_roles`
@@ -32,24 +32,24 @@ Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_
 
 ### `a_role_permissions`
 
-- `role_id`, `permission_id`, `created_at`, `modified_at`
+- `id`, `role_id`, `permission_id`, `created_at`, `modified_at`
 - Foreign keys:
         - `role_id` -> `a_roles.id`
         - `permission_id` -> `a_permissions.id`
-- Composite primary key: `(role_id, permission_id)`
+- Unique key: `(role_id, permission_id)`
 
 ### `a_user_roles`
 
-- `user_id`, `role_id`, `created_at`, `modified_at`
+- `id`, `user_id`, `role_id`, `created_at`, `modified_at`
 - Foreign keys:
         - `user_id` -> `a_users.id`
         - `role_id` -> `a_roles.id`
-- Composite primary key: `(user_id, role_id)`
+- Unique key: `(user_id, role_id)`
 
 ### `a_sessions`
 
-- `session_hash`, `user_id`, `expires_at`, `created_at`, `created_by`, `last_used_at`, `modified_by`
+- `id`, `session_hash`, `user_id`, `ip_address`, `user_agent`, `expires_at`, `created_at`, `created_by`, `last_used_at`, `modified_by`
-- `session_hash` is the primary key.
+- `session_hash` is unique.
 - Foreign key:
         - `user_id` -> `a_users.id`
 
@@ -116,11 +116,6 @@ Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_
 - `d_screens` - screen records and playlist assignment.
 - `d_onboarding_devices` - device-to-screen bindings and onboarded client names.
 
-## Announcements
-
-- `d_announcements` - announcement content and display metadata.
-- `d_announcement_screens` - announcement-to-screen assignments.
-
 ### `d_players`
 
 - `id`, `identifier`, `public_base_url`, `internal_base_url`, `last_seen_at`, `created_at`, `modified_at`
@@ -138,11 +133,20 @@ Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_
 
 ### `d_onboarding_devices`
 
-- `device_id`, `client_name`, `screen_id`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `id`, `device_id`, `client_name`, `screen_id`, `created_at`, `created_by`, `modified_at`, `modified_by`
-- `device_id` is the primary key.
+- `device_id` is unique.
 - Foreign key:
         - `screen_id` -> `d_screens.id` with `ON DELETE SET NULL`
 
+## Onboarding
+
+- The onboarding flow uses `d_onboarding_devices` to bind a device to a screen and persist the client name.
+
+## Announcements
+
+- `d_announcements` - announcement content and display metadata.
+- `d_announcement_screens` - announcement-to-screen assignments.
+
 ### `d_announcements`
 
 - `id`, `message`, `short_label`, `announcement_type`, `color_key`, `icon_key`, `duration_seconds`, `expires_at`, `created_at`, `created_by`, `modified_at`, `modified_by`
@@ -154,19 +158,15 @@ Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_
 - Foreign keys:
         - `announcement_id` -> `d_announcements.id` with `ON DELETE CASCADE`
         - `screen_id` -> `d_screens.id` with `ON DELETE CASCADE`
-- Composite primary key: `(announcement_id, screen_id)`
+- Unique key: `(announcement_id, screen_id)`
-
-## Onboarding
-
-- The onboarding flow uses `d_onboarding_devices` to bind a device to a screen and persist the client name.
 
 ## Integrations
 
 - `i_rss_feeds` - RSS feed definitions and refresh cadence.
 - `i_rss_feed_items` - cached RSS feed items.
 - `i_api_sources` - API source definitions and last response snapshot.
-- `i_schedule_groups` - grouped schedule definitions used by the schedule region.
+- `i_timetable_groups` - grouped timetable definitions used by the timetable region.
-- `i_schedule_entries` - dated entries that belong to a schedule group.
+- `i_timetable_entries` - dated entries that belong to a timetable group.
 
 ### `i_rss_feeds`
 
@@ -184,32 +184,53 @@ Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_
 
 - `id`, `name`, `api_url`, `auth_method`, `auth_username`, `auth_password`, `auth_bearer_token`, `auth_header_name`, `auth_header_value`, `items_path`, `update_interval_value`, `update_interval_unit`, `last_pulled_at`, `last_pull_error`, `last_response_status`, `last_response_content_type`, `last_response_json`, `created_at`, `created_by`, `modified_at`, `modified_by`
 
-### `i_schedule_groups`
+### `i_timetable_groups`
 
-- `id`, `name`, `short_description`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `id`, `name`, `short_description`, `timezone`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `timezone` defaults to `Europe/London`.
 
-### `i_schedule_entries`
+### `i_timetable_entries`
 
 - `id`, `schedule_group_id`, `title`, `short_description`, `start_datetime`, `end_datetime`, `created_at`, `created_by`, `modified_at`, `modified_by`
 - Foreign key:
-        - `schedule_group_id` -> `i_schedule_groups.id` with `ON DELETE CASCADE`
+        - `schedule_group_id` -> `i_timetable_groups.id` with `ON DELETE CASCADE`
 - Index:
         - `(schedule_group_id, start_datetime)`
 
 ## Operations
 
 - `o_background_tasks` - queue and history for background jobs.
+- `o_app_state` - generic app state and version markers stored as key/value pairs.
+- `o_app_settings` - administrator-configurable application settings stored by key.
+- `o_audit_events` - retained audit events for administrator activity and system changes.
 
 ### `o_background_tasks`
 
 - `id`, `task_key`, `task_type`, `title`, `category`, `status`, `payload_json`, `metadata_json`, `attempts`, `created_at`, `created_by`, `started_at`, `finished_at`, `error_message`
 - Indexed by `status`, `task_key`, and `task_type`.
 
+### `o_app_state`
+
+- `id`, `state_key`, `state_value`, `created_at`, `modified_at`
+- `state_key` is unique.
+- `schema_version` is stored here so startup can detect the previously recorded schema version before deciding whether migrations need to run.
+
+### `o_app_settings`
+
+- `id`, `setting_key`, `setting_value`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `setting_key` is unique.
+- Values are stored as JSON and validated against the application setting definitions in `src/data/app-settings.js`.
+
+### `o_audit_events`
+
+- `id`, `occurred_at`, `category`, `event_type`, `actor_user_id`, `target_type`, `target_id`, `target_label`, `ip_address`, `user_agent`, `details_json`
+- Indexed by occurrence time, category and event type, actor, and target.
+
 ## Notes
 
 - The schema is initialized with `CREATE TABLE IF NOT EXISTS`, so new installs can start from an empty database.
 - `src/db/bootstrap.js` seeds the canvas size defaults, default permissions, and the default administrator role.
-- The migration module stays in place for future releases, but this version treats the current schema as the install baseline.
+- `src/db/migrations.js` records the current schema version in `o_app_state` during startup so later launches can tell whether an update is happening.
 
 ```mermaid
 erDiagram
@@ -255,18 +276,25 @@ erDiagram
         }
         I_API_SOURCES {
         }
-        I_SCHEDULE_GROUPS {
+        I_TIMETABLE_GROUPS {
         }
-        I_SCHEDULE_ENTRIES {
+        I_TIMETABLE_ENTRIES {
+        }
+        O_APP_STATE {
+        }
+        O_APP_SETTINGS {
         }
         O_BACKGROUND_TASKS {
         }
+        O_AUDIT_EVENTS {
+        }
 
         A_USERS ||--o{ A_USER_ROLES : has
         A_ROLES ||--o{ A_USER_ROLES : assigned_to
         A_ROLES ||--o{ A_ROLE_PERMISSIONS : has
         A_PERMISSIONS ||--o{ A_ROLE_PERMISSIONS : granted_to
         A_USERS ||--o{ A_SESSIONS : owns
+        A_USERS ||--o{ O_AUDIT_EVENTS : acts
 
         C_CANVAS_SIZES ||--o{ C_TEMPLATES : used_by
         C_CANVAS_SIZES ||--o{ C_PLAYLISTS : used_by
@@ -282,5 +310,5 @@ erDiagram
         D_SCREENS ||--o{ D_ANNOUNCEMENT_SCREENS : receives
 
         I_RSS_FEEDS ||--o{ I_RSS_FEED_ITEMS : caches
-        I_SCHEDULE_GROUPS ||--o{ I_SCHEDULE_ENTRIES : contains
+        I_TIMETABLE_GROUPS ||--o{ I_TIMETABLE_ENTRIES : contains
 ```

package.json

@@ -1,8 +1,11 @@
 {
   "name": "pulse-signage",
-  "version": "2.6.14",
+  "version": "2.8.2",
   "private": false,
   "description": "Pulse Signage application with MySQL and media storage",
+  "engines": {
+    "node": ">=26.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "https://git.lzstealth.com/LZStealth/pulse-signage.git"
@@ -17,19 +20,19 @@
     "test": "node --test"
   },
   "dependencies": {
-    "@sparticuz/chromium": "^137.0.0",
+    "@sparticuz/chromium": "^149.0.0",
     "animate.css": "^4.1.1",
-    "bootstrap-icons": "1.11.3",
+    "bootstrap-icons": "1.13.1",
     "cropperjs": "^1.6.2",
     "dotenv": "^17.4.2",
-    "express": "^4.21.2",
+    "express": "^5.2.1",
     "handlebars": "^4.7.8",
-    "hls.js": "^1.5.15",
+    "hls.js": "^1.7.0",
     "multer": "^2.2.0",
-    "mysql2": "^3.14.3",
+    "mysql2": "^3.23.3",
-    "puppeteer-core": "^24.16.0",
+    "puppeteer-core": "^25.7.0",
     "sharp": "^0.35.3",
-    "ws": "^8.21.0"
+    "ws": "^8.21.3"
   },
   "devDependencies": {
     "nodemon": "^3.1.10"

src/auth.js

@@ -7,21 +7,55 @@ const PASSWORD_KEY_LENGTH = 32;
 const PASSWORD_DIGEST = 'sha256';
 const SESSION_BYTES = 32;
 
-function validatePasswordStrength(password) {
+function validatePasswordStrength(password, options) {
   const value = String(password || '');
+  const requirements = options && options.policy
+    ? getPasswordPolicyPreset(options.policy)
+    : {
+      minimumLength: Number(options && options.minimumLength) || 10,
+      minimumCategories: Number(options && options.minimumCategories) || 3,
+      requireLowercase: Boolean(options && options.requireLowercase),
+      requireUppercase: Boolean(options && options.requireUppercase),
+      requireNumber: Boolean(options && options.requireNumber),
+      requireSymbol: Boolean(options && options.requireSymbol)
+    };
   const hasLowercase = /[a-z]/.test(value);
   const hasUppercase = /[A-Z]/.test(value);
   const hasNumber = /[0-9]/.test(value);
   const hasSymbol = /[^A-Za-z0-9]/.test(value);
   const categoryCount = [hasLowercase, hasUppercase, hasNumber, hasSymbol].filter(Boolean).length;
 
-  if (value.length < 10 || categoryCount < 3) {
+  const missingRequiredCategory = requirements.requireLowercase && !hasLowercase
-    return 'Password must be at least 10 characters and include 3 of: uppercase, lowercase, number, and symbol.';
+    || requirements.requireUppercase && !hasUppercase
+    || requirements.requireNumber && !hasNumber
+    || requirements.requireSymbol && !hasSymbol;
+  if (value.length < requirements.minimumLength || categoryCount < requirements.minimumCategories || missingRequiredCategory) {
+    if (missingRequiredCategory) {
+      const requiredCategories = [];
+      if (requirements.requireLowercase) requiredCategories.push('lowercase');
+      if (requirements.requireUppercase) requiredCategories.push('uppercase');
+      if (requirements.requireNumber) requiredCategories.push('number');
+      if (requirements.requireSymbol) requiredCategories.push('symbol');
+      return `Password must be at least ${requirements.minimumLength} characters and include ${requiredCategories.join(', ')}.`;
+    }
+    if (requirements.minimumCategories === 4) {
+      return `Password must be at least ${requirements.minimumLength} characters and include uppercase, lowercase, number, and symbol.`;
+    }
+    return `Password must be at least ${requirements.minimumLength} characters and include ${requirements.minimumCategories} of: uppercase, lowercase, number, and symbol.`;
   }
 
   return '';
 }
 
+function getPasswordPolicyPreset(policy) {
+  const normalizedPolicy = String(policy || 'standard').trim().toLowerCase();
+  return normalizedPolicy === 'strict'
+    ? { minimumLength: 14, minimumCategories: 4 }
+    : normalizedPolicy === 'strong'
+      ? { minimumLength: 12, minimumCategories: 3 }
+      : { minimumLength: 10, minimumCategories: 3 };
+}
+
 function hashPassword(password, salt) {
   const safePassword = String(password || '');
   const safeSalt = salt || crypto.randomBytes(16).toString('hex');

src/common.js

@@ -27,7 +27,7 @@ const dbBootstrap = require('#src/db/bootstrap');
 const data = require('#src/data');
 const player = require('#src/player/render');
 const listQuery = require('#src/web/lib/list-query');
-const { fetchPlaylistCanvasId, fetchPlaylistCanvasSignature } = require('#src/web/lib/helpers');
+const { fetchPlaylistCanvasId } = require('#src/web/lib/helpers');
 
 module.exports = {
   createPool: dbCommon.createPool,
@@ -63,7 +63,6 @@ module.exports = {
   getSortDirectionQuery: listQuery.getSortDirectionQuery,
   fetchPlaylistById: data.fetchPlaylistById,
   fetchPlaylistCanvasId: fetchPlaylistCanvasId,
-  fetchPlaylistCanvasSignature: fetchPlaylistCanvasSignature,
   normalizeDisplayMode: data.normalizeDisplayMode,
   fetchTimetablesData: data.fetchTimetablesData,
   fetchTimetableGroupsPage: data.fetchTimetableGroupsPage,

src/data/announcement-icons.js

@@ -1,55 +1,69 @@
-const ANNOUNCEMENT_ICON_OPTIONS = [
+const fs = require('fs');
-  { value: 'megaphone-fill', label: 'Megaphone' },
+const path = require('path');
-  { value: 'megaphone', label: 'Megaphone outline' },
+
-  { value: 'bell-fill', label: 'Bell' },
+const BOOTSTRAP_ICON_CSS_PATH = path.join(__dirname, '..', 'web', 'public', 'adminlte', 'bootstrap-icons', 'css', 'bootstrap-icons.min.css');
-  { value: 'bell', label: 'Bell outline' },
+
-  { value: 'exclamation-triangle-fill', label: 'Warning' },
+const DEFAULT_ANNOUNCEMENT_ICON_KEYS = [
-  { value: 'exclamation-triangle', label: 'Warning outline' },
+  'megaphone-fill', 'megaphone', 'bell-fill', 'bell',
-  { value: 'info-circle-fill', label: 'Info' },
+  'exclamation-triangle-fill', 'exclamation-triangle', 'info-circle-fill', 'info-circle',
-  { value: 'info-circle', label: 'Info outline' },
+  'check-circle-fill', 'check-circle', 'lightbulb-fill', 'lightbulb',
-  { value: 'check-circle-fill', label: 'Success' },
+  'calendar-event-fill', 'calendar-event', 'clock-fill', 'clock',
-  { value: 'check-circle', label: 'Success outline' },
+  'wifi-off', 'wifi', 'hdd-network', 'hdd-network-fill',
-  { value: 'lightbulb-fill', label: 'Idea' },
+  'speaker-fill', 'speaker', 'shield-fill', 'shield',
-  { value: 'lightbulb', label: 'Idea outline' },
+  'collection-play-fill', 'collection-play', 'broadcast', 'broadcast-pin',
-  { value: 'calendar-event-fill', label: 'Calendar' },
+  'plug-fill', 'plug', 'lightning-charge-fill', 'lightning-charge',
-  { value: 'calendar-event', label: 'Calendar outline' },
+  'car-front-fill', 'car-front', 'lamp-fill', 'lamp',
-  { value: 'clock-fill', label: 'Clock' },
+  'envelope-fill', 'envelope', 'people-fill', 'people',
-  { value: 'clock', label: 'Clock outline' },
+  'browser-chrome', 'browser-edge', 'browser-firefox', 'browser-safari',
-  { value: 'wifi-off', label: 'Wi-Fi Offline' },
+  'cone', 'cone-striped', 'cup-straw', 'fire'
-  { value: 'wifi', label: 'Wi-Fi' },
-  { value: 'hdd-network', label: 'Network' },
-  { value: 'hdd-network-fill', label: 'Network fill' },
-  { value: 'speaker-fill', label: 'Speaker' },
-  { value: 'speaker', label: 'Speaker outline' },
-  { value: 'shield-fill', label: 'Shield' },
-  { value: 'shield', label: 'Shield outline' },
-  { value: 'collection-play-fill', label: 'Playlist' },
-  { value: 'collection-play', label: 'Playlist outline' },
-  { value: 'broadcast', label: 'Broadcast' },
-  { value: 'broadcast-pin', label: 'Broadcast pin' },
-  { value: 'plug-fill', label: 'Plug' },
-  { value: 'plug', label: 'Plug outline' },
-  { value: 'lightning-charge-fill', label: 'Urgent' },
-  { value: 'lightning-charge', label: 'Urgent outline' },
-  { value: 'car-front-fill', label: 'Car Front' },
-  { value: 'car-front', label: 'Car Front outline' },
-  { value: 'lamp-fill', label: 'Lamp' },
-  { value: 'lamp', label: 'Lamp outline' },
-  { value: 'envelope-fill', label: 'Message' },
-  { value: 'envelope', label: 'Message outline' },
-  { value: 'people-fill', label: 'Audience' },
-  { value: 'people', label: 'Audience outline' },
-  { value: 'browser-chrome', label: 'Browser Chrome' },
-  { value: 'browser-edge', label: 'Browser Edge' },
-  { value: 'browser-firefox', label: 'Browser Firefox' },
-  { value: 'browser-safari', label: 'Browser Safari' },
-  { value: 'cone', label: 'Cone' },
-  { value: 'cone-striped', label: 'Cone striped' },
-  { value: 'cup-straw', label: 'Cup straw' },
-  { value: 'fire', label: 'Fire' }
 ];
 
-const ANNOUNCEMENT_ICON_KEYS = ANNOUNCEMENT_ICON_OPTIONS.map(function (option) {
+function humanizeBootstrapIconLabel(iconKey) {
+  return String(iconKey || '')
+    .trim()
+    .replace(/[-_]+/g, ' ')
+    .replace(/\b\w/g, function (character) {
+      return character.toUpperCase();
+    });
+}
+
+function loadBootstrapIconCatalog() {
+  try {
+    const css = fs.readFileSync(BOOTSTRAP_ICON_CSS_PATH, 'utf8');
+    const keys = Array.from(new Set((css.match(/\.bi-([a-z0-9-]+)::?before/g) || []).map(function (match) {
+      return String(match || '')
+        .replace(/^\.bi-/, '')
+        .replace(/::?before$/, '')
+        .trim()
+        .toLowerCase();
+    }).filter(Boolean)));
+
+    return keys.map(function (value) {
+      return {
+        value: value,
+        label: humanizeBootstrapIconLabel(value)
+      };
+    }).sort(function (left, right) {
+      return left.value.localeCompare(right.value);
+    });
+  } catch (_error) {
+    return DEFAULT_ANNOUNCEMENT_ICON_KEYS.map(function (value) {
+      return { value: value, label: humanizeBootstrapIconLabel(value) };
+    });
+  }
+}
+
+const ANNOUNCEMENT_ICON_CATALOG = loadBootstrapIconCatalog();
+const ANNOUNCEMENT_ICON_OPTIONS = DEFAULT_ANNOUNCEMENT_ICON_KEYS.map(function (value) {
+  const catalogOption = ANNOUNCEMENT_ICON_CATALOG.find(function (option) {
+    return option.value === value;
+  });
+  return catalogOption || { value: value, label: humanizeBootstrapIconLabel(value) };
+});
+
+const ANNOUNCEMENT_ICON_KEYS = DEFAULT_ANNOUNCEMENT_ICON_KEYS.slice();
+
+const ANNOUNCEMENT_ICON_CATALOG_KEYS = ANNOUNCEMENT_ICON_CATALOG.map(function (option) {
   return option.value;
 });
 
@@ -58,17 +72,27 @@ const ANNOUNCEMENT_ICON_LABELS = ANNOUNCEMENT_ICON_OPTIONS.reduce(function (labe
   return labels;
 }, Object.create(null));
 
+ANNOUNCEMENT_ICON_CATALOG.forEach(function (option) {
+  if (!Object.prototype.hasOwnProperty.call(ANNOUNCEMENT_ICON_LABELS, option.value)) {
+    ANNOUNCEMENT_ICON_LABELS[option.value] = option.label;
+  }
+});
+
 const DEFAULT_ANNOUNCEMENT_ICON = 'megaphone-fill';
 
 function normalizeAnnouncementIcon(value) {
   const normalized = String(value || '').trim().toLowerCase();
-  return ANNOUNCEMENT_ICON_KEYS.includes(normalized) ? normalized : DEFAULT_ANNOUNCEMENT_ICON;
+  return ANNOUNCEMENT_ICON_CATALOG_KEYS.includes(normalized) ? normalized : DEFAULT_ANNOUNCEMENT_ICON;
 }
 
 module.exports = {
+  DEFAULT_ANNOUNCEMENT_ICON_KEYS,
   ANNOUNCEMENT_ICON_OPTIONS,
   ANNOUNCEMENT_ICON_KEYS,
+  ANNOUNCEMENT_ICON_CATALOG,
+  ANNOUNCEMENT_ICON_CATALOG_KEYS,
   ANNOUNCEMENT_ICON_LABELS,
   DEFAULT_ANNOUNCEMENT_ICON,
+  humanizeBootstrapIconLabel,
   normalizeAnnouncementIcon
 };

src/data/api-sources.js

@@ -11,7 +11,10 @@ const ITEMS_PATH_MAX_LENGTH = 255;
 
 function normalizeUpdateIntervalUnit(value) {
   const unit = String(value || '').trim().toLowerCase();
-  return unit === 'seconds' ? 'seconds' : 'minutes';
+  if (unit === 'seconds' || unit === 'minutes' || unit === 'hours') {
+    return unit;
+  }
+  return 'minutes';
 }
 
 function normalizeAuthMethod(value) {
@@ -19,10 +22,6 @@ function normalizeAuthMethod(value) {
   return ['basic', 'bearer', 'api_key_header'].includes(method) ? method : 'none';
 }
 
-function getItemsPath(source) {
-  return String(source && (source.items_path || source.itemsPath) || '').trim();
-}
-
 function buildAuthHeaders(source) {
   const method = normalizeAuthMethod(source && (source.auth_method || source.authMethod));
   const headers = {};

src/data/app-settings.js

@@ -0,0 +1,207 @@
+const { DEFAULT_ANNOUNCEMENT_ICON_KEYS } = require('./announcement-icons');
+
+const SETTING_DEFINITIONS = [
+  { key: 'app.name', type: 'string', defaultValue: 'Pulse Signage' },
+  { key: 'locale.timezone', type: 'string', defaultValue: 'Europe/London' },
+  { key: 'locale.language', type: 'string', defaultValue: 'en' },
+  { key: 'ui.theme', type: 'enum', values: ['dark', 'light', 'auto'], defaultValue: 'dark' },
+  { key: 'security.session_lifetime_days', type: 'integer', min: 1, defaultValue: 14 },
+  { key: 'security.allow_user_session_revocation', type: 'boolean', defaultValue: true },
+  { key: 'security.max_active_sessions', type: 'integer', min: 0, defaultValue: 0 },
+  { key: 'security.password_min_length', type: 'integer', min: 8, defaultValue: 10 },
+  { key: 'security.password_min_categories', type: 'integer', min: 1, defaultValue: 3 },
+  { key: 'security.password_require_lowercase', type: 'boolean', defaultValue: false },
+  { key: 'security.password_require_uppercase', type: 'boolean', defaultValue: false },
+  { key: 'security.password_require_number', type: 'boolean', defaultValue: false },
+  { key: 'security.password_require_symbol', type: 'boolean', defaultValue: false },
+  { key: 'security.require_password_change_for_new_users', type: 'boolean', defaultValue: true },
+  { key: 'security.require_password_change_after_admin_reset', type: 'boolean', defaultValue: true },
+  { key: 'security.login_max_attempts', type: 'integer', min: 1, defaultValue: 5 },
+  { key: 'security.login_lockout_minutes', type: 'integer', min: 1, defaultValue: 15 },
+  { key: 'security.login_rate_limit_scope', type: 'enum', values: ['both', 'username', 'ip'], defaultValue: 'both' },
+  { key: 'audit.enabled', type: 'boolean', defaultValue: true },
+  { key: 'audit.categories', type: 'string_array', defaultValue: ['authentication', 'security', 'sessions', 'users', 'roles', 'system-settings'] },
+  { key: 'audit.include_request_metadata', type: 'boolean', defaultValue: true },
+  { key: 'audit.retention_days', type: 'integer', min: 0, defaultValue: 180 },
+  { key: 'uploads.image_max_bytes', type: 'integer', min: 1, defaultValue: 100 * 1024 * 1024 },
+  { key: 'uploads.video_max_bytes', type: 'integer', min: 1, defaultValue: 1024 * 1024 * 1024 },
+  { key: 'uploads.wysiwyg_image_max_bytes', type: 'integer', min: 1, defaultValue: 2 * 1024 * 1024 },
+  { key: 'uploads.allowed_mime_types', type: 'string_array', defaultValue: ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml', 'video/mp4', 'video/webm', 'video/ogg'] },
+  { key: 'uploads.cleanup_days', type: 'integer', min: 0, defaultValue: 30 },
+  { key: 'uploads.optimize_images', type: 'boolean', defaultValue: true },
+  { key: 'announcements.default_icon', type: 'string', defaultValue: 'megaphone-fill' },
+  { key: 'announcements.default_duration_value', type: 'integer', min: 1, defaultValue: 10 },
+  { key: 'announcements.default_duration_unit', type: 'enum', values: ['seconds', 'minutes'], defaultValue: 'seconds' },
+  { key: 'announcements.suggested_icons', type: 'string_array', defaultValue: DEFAULT_ANNOUNCEMENT_ICON_KEYS.slice() },
+  { key: 'player.default_slide_duration_seconds', type: 'integer', min: 1, defaultValue: 10 },
+  { key: 'player.default_fade_between_slides', type: 'boolean', defaultValue: true },
+  { key: 'player.skip_unavailable_rtmp', type: 'boolean', defaultValue: true }
+  ,{ key: 'data-sources.rss_default_interval_value', type: 'integer', min: 1, defaultValue: 60 }
+  ,{ key: 'data-sources.rss_default_interval_unit', type: 'enum', values: ['seconds', 'minutes', 'hours'], defaultValue: 'minutes' }
+  ,{ key: 'data-sources.api_default_interval_value', type: 'integer', min: 1, defaultValue: 60 }
+  ,{ key: 'data-sources.api_default_interval_unit', type: 'enum', values: ['seconds', 'minutes', 'hours'], defaultValue: 'minutes' }
+];
+
+const DEFINITIONS_BY_KEY = new Map(SETTING_DEFINITIONS.map(function (definition) {
+  return [definition.key, definition];
+}));
+
+function cloneValue(value) {
+  if (Array.isArray(value)) {
+    return value.slice();
+  }
+  return value;
+}
+
+function getAppSettingDefinitions() {
+  return SETTING_DEFINITIONS.map(function (definition) {
+    return Object.assign({}, definition, {
+      values: definition.values ? definition.values.slice() : undefined,
+      defaultValue: cloneValue(definition.defaultValue)
+    });
+  });
+}
+
+function getDefaultAppSettings() {
+  return SETTING_DEFINITIONS.reduce(function (settings, definition) {
+    settings[definition.key] = cloneValue(definition.defaultValue);
+    return settings;
+  }, {});
+}
+
+function normalizeSettingValue(key, value) {
+  const definition = DEFINITIONS_BY_KEY.get(String(key || '').trim());
+  if (!definition) {
+    throw new Error('Unknown application setting: ' + key);
+  }
+
+  if (definition.type === 'string') {
+    return String(value == null ? '' : value).trim();
+  }
+
+  if (definition.type === 'integer') {
+    const normalized = Number(value);
+    if (!Number.isInteger(normalized) || normalized < definition.min) {
+      throw new Error('Invalid value for application setting: ' + definition.key);
+    }
+    return normalized;
+  }
+
+  if (definition.type === 'boolean') {
+    if (value === true || value === 1 || value === '1' || value === 'true') {
+      return true;
+    }
+    if (value === false || value === 0 || value === '0' || value === 'false') {
+      return false;
+    }
+    throw new Error('Invalid value for application setting: ' + definition.key);
+  }
+
+  if (definition.type === 'enum') {
+    const normalized = String(value == null ? '' : value).trim();
+    if (!definition.values.includes(normalized)) {
+      throw new Error('Invalid value for application setting: ' + definition.key);
+    }
+    return normalized;
+  }
+
+  if (definition.type === 'string_array') {
+    if (!Array.isArray(value)) {
+      throw new Error('Invalid value for application setting: ' + definition.key);
+    }
+    return Array.from(new Set(value.map(function (item) {
+      return String(item || '').trim();
+    }).filter(Boolean)));
+  }
+
+  throw new Error('Unsupported application setting type: ' + definition.type);
+}
+
+function normalizeAppSettings(settings) {
+  const input = settings && typeof settings === 'object' ? settings : {};
+  return SETTING_DEFINITIONS.reduce(function (normalized, definition) {
+    const value = Object.prototype.hasOwnProperty.call(input, definition.key)
+      ? input[definition.key]
+      : definition.defaultValue;
+    normalized[definition.key] = normalizeSettingValue(definition.key, value);
+    return normalized;
+  }, {});
+}
+
+function parseStoredValue(value) {
+  if (typeof value !== 'string') {
+    return value;
+  }
+  try {
+    return JSON.parse(value);
+  } catch (_error) {
+    return value;
+  }
+}
+
+async function fetchAppSettings(pool) {
+  const [rows] = await pool.query('SELECT id, setting_key, setting_value FROM o_app_settings ORDER BY setting_key');
+  const storedSettings = {};
+  (rows || []).forEach(function (row) {
+    const key = String(row && row.setting_key || '').trim();
+    if (DEFINITIONS_BY_KEY.has(key)) {
+      storedSettings[key] = parseStoredValue(row.setting_value);
+    }
+  });
+  return normalizeAppSettings(Object.assign({}, getDefaultAppSettings(), storedSettings));
+}
+
+async function saveAppSettings(pool, settings, modifiedBy) {
+  const inputSettings = settings && typeof settings === 'object' ? settings : {};
+  const normalizedSettings = normalizeAppSettings(inputSettings);
+  const connection = typeof pool.getConnection === 'function' ? await pool.getConnection() : pool;
+  const shouldRelease = connection !== pool;
+
+  try {
+    if (typeof connection.beginTransaction === 'function') {
+      await connection.beginTransaction();
+    }
+    for (const definition of SETTING_DEFINITIONS) {
+      if (!Object.prototype.hasOwnProperty.call(inputSettings, definition.key)) {
+        continue;
+      }
+      await connection.query(
+        `UPDATE o_app_settings
+            SET setting_value = ?, modified_by = ?
+          WHERE setting_key = ?`,
+        [JSON.stringify(normalizedSettings[definition.key]), modifiedBy || null, definition.key]
+      );
+      await connection.query(
+        `INSERT INTO o_app_settings (setting_key, setting_value, created_by, modified_by)
+         SELECT ?, ?, ?, ?
+          WHERE NOT EXISTS (
+            SELECT 1 FROM o_app_settings WHERE setting_key = ?
+          )`,
+        [definition.key, JSON.stringify(normalizedSettings[definition.key]), modifiedBy || null, modifiedBy || null, definition.key]
+      );
+    }
+    if (typeof connection.commit === 'function') {
+      await connection.commit();
+    }
+  } catch (error) {
+    if (typeof connection.rollback === 'function') {
+      await connection.rollback();
+    }
+    throw error;
+  } finally {
+    if (shouldRelease && typeof connection.release === 'function') {
+      connection.release();
+    }
+  }
+
+  return normalizedSettings;
+}
+
+module.exports = {
+  getAppSettingDefinitions,
+  getDefaultAppSettings,
+  normalizeSettingValue,
+  normalizeAppSettings,
+  fetchAppSettings,
+  saveAppSettings
+};

src/data/audit-log.js

@@ -0,0 +1,118 @@
+const AUDIT_EVENT_CATEGORIES = Object.freeze({
+  AUTHENTICATION: 'authentication',
+  SECURITY: 'security',
+  SESSIONS: 'sessions',
+  USERS: 'users',
+  ROLES: 'roles',
+  SETTINGS: 'system-settings',
+  SLIDES: 'slides',
+  TEMPLATES: 'templates',
+  PLAYLISTS: 'playlists',
+  SCREENS: 'screens',
+  ANNOUNCEMENTS: 'announcements',
+  CANVAS_SIZES: 'canvas-sizes',
+  API_SOURCES: 'api-sources',
+  RSS_FEEDS: 'rss-feeds',
+  TIMETABLES: 'timetables'
+});
+const AUDIT_CATEGORY_KEYS = Object.freeze(Object.values(AUDIT_EVENT_CATEGORIES));
+const AUDIT_CATEGORY_LABELS = Object.freeze({
+  authentication: 'Authentication',
+  security: 'Security',
+  sessions: 'Sessions',
+  users: 'Users',
+  roles: 'Roles',
+  'system-settings': 'System Settings',
+  slides: 'Slides',
+  templates: 'Templates',
+  playlists: 'Playlists',
+  screens: 'Screens',
+  announcements: 'Announcements',
+  'canvas-sizes': 'Canvas Sizes',
+  'api-sources': 'API Sources',
+  'rss-feeds': 'RSS Feeds',
+  timetables: 'Timetables'
+});
+const { fetchAppSettings } = require('./app-settings');
+
+function normalizeDetails(details) {
+  if (details === undefined || details === null) {
+    return null;
+  }
+  return JSON.stringify(details);
+}
+
+function buildAuditChanges(previousValues, nextValues) {
+  const previous = previousValues && typeof previousValues === 'object' ? previousValues : {};
+  const next = nextValues && typeof nextValues === 'object' ? nextValues : {};
+  const changes = {};
+  const keys = new Set(Object.keys(previous).concat(Object.keys(next)));
+
+  keys.forEach(function (key) {
+    if (JSON.stringify(previous[key]) !== JSON.stringify(next[key])) {
+      changes[key] = { from: previous[key], to: next[key] };
+    }
+  });
+
+  return changes;
+}
+
+function getRequestMetadata(req) {
+  const forwardedAddress = String(req && req.headers && req.headers['x-forwarded-for'] || '').split(',')[0].trim();
+  return {
+    ipAddress: forwardedAddress || String(req && req.ip || req && req.socket && req.socket.remoteAddress || '').trim() || null,
+    userAgent: String(req && req.headers && req.headers['user-agent'] || '').trim() || null
+  };
+}
+
+async function recordAuditEvent(pool, event) {
+  const input = event && typeof event === 'object' ? event : {};
+  const category = String(input.category || '').trim().toLowerCase();
+  const eventType = String(input.eventType || '').trim().toLowerCase();
+  if (!category || !eventType) {
+    throw new Error('Audit events require a category and event type.');
+  }
+
+  await pool.query(
+    `INSERT INTO o_audit_events
+      (category, event_type, actor_user_id, target_type, target_id, target_label, ip_address, user_agent, details_json)
+     VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+    [
+      category,
+      eventType,
+      Number.isInteger(Number(input.actorUserId)) && Number(input.actorUserId) > 0 ? Number(input.actorUserId) : null,
+      String(input.targetType || '').trim() || null,
+      String(input.targetId || '').trim() || null,
+      String(input.targetLabel || '').trim() || null,
+      String(input.ipAddress || '').trim() || null,
+      String(input.userAgent || '').trim() || null,
+      normalizeDetails(input.details)
+    ]
+  );
+}
+
+async function recordRequestAuditEvent(pool, req, event) {
+  try {
+    const settings = await fetchAppSettings(pool);
+    const category = String(event && event.category || '').trim().toLowerCase();
+    const enabledCategories = Array.isArray(settings['audit.categories']) ? settings['audit.categories'] : AUDIT_CATEGORY_KEYS;
+    if (!settings['audit.enabled'] || !enabledCategories.includes(category)) {
+      return;
+    }
+    const metadata = settings['audit.include_request_metadata'] ? getRequestMetadata(req) : {};
+    await recordAuditEvent(pool, Object.assign({}, event, metadata));
+  } catch (error) {
+    // Auditing must not turn a successful login or administration action into a failed request.
+    console.error('Unable to record audit event:', error.message);
+  }
+}
+
+module.exports = {
+  AUDIT_EVENT_CATEGORIES,
+  AUDIT_CATEGORY_KEYS,
+  AUDIT_CATEGORY_LABELS,
+  getRequestMetadata,
+  buildAuditChanges,
+  recordAuditEvent,
+  recordRequestAuditEvent
+};

src/data/index.js

@@ -4,7 +4,7 @@ const { fetchAdminData, fetchPlaylistsPage, fetchSlidesPage, fetchTemplatesPage,
 const { ANNOUNCEMENT_TYPES, ANNOUNCEMENT_COLORS, ANNOUNCEMENT_ICONS, DEFAULT_ANNOUNCEMENT_ICON, normalizeAnnouncementType, normalizeAnnouncementColor, normalizeAnnouncementIcon, fetchAnnouncementsPage, fetchAnnouncementById, fetchActiveAnnouncement, buildAnnouncementPayload } = require('./announcements');
 const { ANNOUNCEMENT_ICON_OPTIONS, ANNOUNCEMENT_ICON_LABELS } = require('./announcement-icons');
 const { fetchPlaylistById } = require('./playlists');
-const { normalizeDisplayMode, fetchTimetablesData, fetchTimetableGroupsPage, fetchTimetableGroupById, fetchTimetableEntriesByGroupId, buildTimetableGroupPayload } = require('./schedules');
+const { normalizeDisplayMode, fetchTimetablesData, fetchTimetableGroupsPage, fetchTimetableGroupById, fetchTimetableEntriesByGroupId, buildTimetableGroupPayload } = require('./timetables');
 const { fetchApiSourcesData, fetchApiSourcesPage, fetchApiSourceById, fetchApiSourceResponse, buildApiSourcePayload } = require('./api-sources');
 const { fetchRssFeedsData, fetchRssFeedsPage, fetchRssFeedById, fetchRssFeedItemsByFeedId, normalizeRssFeedItem, buildRssFeedPayload, fetchRssFeedItems, replaceRssFeedItems } = require('./rss-feeds');
 const { slugify, uniqueScreenSlug, fetchScreenById, fetchScreenEditData, fetchScreenPlayerUrls, fetchPlayerPublicBaseUrl, fetchScreenPlayerRecord, fetchPlayerRecordByIdentifier } = require('./screens');

src/data/player-registry.js

@@ -92,15 +92,19 @@ async function upsertPlayerRegistration(pool, options) {
     return null;
   }
 
+  await pool.query(
+    `UPDATE d_players
+        SET public_base_url = ?, internal_base_url = ?, last_seen_at = CURRENT_TIMESTAMP, modified_at = CURRENT_TIMESTAMP
+      WHERE identifier = ?`,
+    [publicBaseUrl || null, internalBaseUrl || null, identifier]
+  );
   await pool.query(
     `INSERT INTO d_players (identifier, public_base_url, internal_base_url, last_seen_at)
-     VALUES (?, ?, ?, CURRENT_TIMESTAMP)
+     SELECT ?, ?, ?, CURRENT_TIMESTAMP
-     ON DUPLICATE KEY UPDATE
+      WHERE NOT EXISTS (
-       public_base_url = VALUES(public_base_url),
+        SELECT 1 FROM d_players WHERE identifier = ?
-       internal_base_url = VALUES(internal_base_url),
+      )`,
-       last_seen_at = CURRENT_TIMESTAMP,
+    [identifier, publicBaseUrl || null, internalBaseUrl || null, identifier]
-       modified_at = CURRENT_TIMESTAMP`,
-    [identifier, publicBaseUrl || null, internalBaseUrl || null]
   );
 
   return resolvePlayerRegistration(pool, identifier);
@@ -116,14 +120,21 @@ async function recordPlayerHeartbeat(pool, options) {
   }
 
   await pool.query(
-    `INSERT INTO d_players (identifier, public_base_url, internal_base_url, last_seen_at)
+    `UPDATE d_players
-     VALUES (?, ?, ?, CURRENT_TIMESTAMP)
+        SET public_base_url = COALESCE(?, public_base_url),
-     ON DUPLICATE KEY UPDATE
+            internal_base_url = COALESCE(?, internal_base_url),
-       public_base_url = COALESCE(VALUES(public_base_url), public_base_url),
-       internal_base_url = COALESCE(VALUES(internal_base_url), internal_base_url),
             last_seen_at = CURRENT_TIMESTAMP,
-       modified_at = CURRENT_TIMESTAMP`,
+            modified_at = CURRENT_TIMESTAMP
-    [identifier, publicBaseUrl || null, internalBaseUrl || null]
+      WHERE identifier = ?`,
+    [publicBaseUrl || null, internalBaseUrl || null, identifier]
+  );
+  await pool.query(
+    `INSERT INTO d_players (identifier, public_base_url, internal_base_url, last_seen_at)
+     SELECT ?, ?, ?, CURRENT_TIMESTAMP
+      WHERE NOT EXISTS (
+        SELECT 1 FROM d_players WHERE identifier = ?
+      )`,
+    [identifier, publicBaseUrl || null, internalBaseUrl || null, identifier]
   );
 
   return resolvePlayerRegistration(pool, identifier);

src/data/qr-code.js

@@ -1,17 +1,6 @@
-const fs = require('fs');
 const path = require('path');
 const QRCodeStyling = require(path.join(__dirname, '..', 'web', 'public', 'vendor', 'qr-code-styling', 'qr-code-styling.js'));
 const QR_PNG_WIDTH = 2048;
-const QR_STYLING_SCRIPT_PATH = path.join(__dirname, '..', 'web', 'public', 'vendor', 'qr-code-styling', 'qr-code-styling.js');
-const SYSTEM_CHROMIUM_PATHS = [
-  process.env.PUPPETEER_EXECUTABLE_PATH,
-  process.env.CHROMIUM_PATH,
-  '/usr/bin/chromium',
-  '/usr/bin/chromium-browser',
-  '/usr/local/bin/chromium',
-  '/snap/bin/chromium'
-].filter(Boolean);
-let qrBrowserPromise = null;
 
 function escapeXml(value) {
   return String(value === undefined || value === null ? '' : value).replace(/[&<>"']/g, function (character) {
@@ -340,81 +329,6 @@ function buildQrStylingOptions(source) {
   };
 }
 
-function getQrBrowser() {
-  if (qrBrowserPromise) {
-    return qrBrowserPromise;
-  }
-
-  qrBrowserPromise = (async function () {
-    const puppeteer = require('puppeteer-core');
-    const chromiumModule = require('@sparticuz/chromium');
-    const chromium = chromiumModule && typeof chromiumModule.executablePath === 'function'
-      ? chromiumModule
-      : chromiumModule && chromiumModule.default && typeof chromiumModule.default.executablePath === 'function'
-        ? chromiumModule.default
-        : chromiumModule;
-    let executablePath = SYSTEM_CHROMIUM_PATHS.find(function (candidate) {
-      return fs.existsSync(candidate);
-    }) || '';
-    const usingSystemChromium = Boolean(executablePath);
-
-    if (!executablePath && chromium && typeof chromium.executablePath === 'function') {
-      executablePath = await chromium.executablePath();
-    }
-
-    if (!executablePath || !fs.existsSync(executablePath)) {
-      throw new Error('Chromium executable was not found.');
-    }
-
-    return puppeteer.launch({
-      args: usingSystemChromium
-        ? [
-            '--no-sandbox',
-            '--disable-setuid-sandbox',
-            '--disable-dev-shm-usage',
-            '--disable-gpu'
-          ]
-        : puppeteer.defaultArgs({
-            args: chromium && chromium.args ? chromium.args : [],
-            headless: 'shell'
-          }),
-      defaultViewport: usingSystemChromium
-        ? { width: QR_PNG_WIDTH, height: QR_PNG_WIDTH, deviceScaleFactor: 1 }
-        : chromium && chromium.defaultViewport ? chromium.defaultViewport : null,
-      executablePath: executablePath,
-      headless: usingSystemChromium ? true : 'shell'
-    });
-  })();
-
-  return qrBrowserPromise;
-}
-
-async function blobToDataUrl(blob) {
-  if (!blob) {
-    return '';
-  }
-
-  if (typeof blob === 'string') {
-    return blob;
-  }
-
-  if (typeof blob.arrayBuffer === 'function') {
-    const buffer = await blob.arrayBuffer();
-    const bytes = new Uint8Array(buffer);
-    let binary = '';
-    for (let index = 0; index < bytes.length; index += 1) {
-      binary += String.fromCharCode(bytes[index]);
-    }
-    return 'data:' + String(blob.type || 'image/png') + ';base64,' + Buffer.from(binary, 'binary').toString('base64');
-  }
-
-  if (typeof blob.text === 'function') {
-    return blob.text();
-  }
-
-  return '';
-}
-
 async function createStyledQrCodeDataUrl(value) {
   const source = value && typeof value === 'object' ? value : { value: value };
   const options = buildQrStylingOptions(source);
@@ -435,10 +349,6 @@ async function createStyledQrCodeSvg(value) {
   return renderStyledQrRawData(options, 'svg');
 }
 
-async function createQrCodeDataUrlPlain(value) {
-  return createStyledQrCodeDataUrl(value);
-}
-
 async function createQrCodeSvg(value) {
   return createStyledQrCodeSvg(value);
 }

src/data/rss-feeds.js

@@ -9,7 +9,10 @@ const URL_MAX_LENGTH = 1024;
 
 function normalizeUpdateIntervalUnit(value) {
   const unit = String(value || '').trim().toLowerCase();
-  return unit === 'seconds' ? 'seconds' : 'minutes';
+  if (unit === 'seconds' || unit === 'minutes' || unit === 'hours') {
+    return unit;
+  }
+  return 'minutes';
 }
 
 async function fetchRssFeedsData(pool) {

src/data/slides.js

@@ -6,38 +6,93 @@ const { parseJsonSafe, validateMaxLength } = require('./utils');
 const TITLE_MAX_LENGTH = 255;
 const { buildQrCodeContent } = require('./qr-code');
 
-const ALLOWED_RICH_TEXT_TAGS = ['b', 'strong', 'i', 'em', 'u', 'br', 'p', 'div', 'ul', 'ol', 'li'];
 const DEFAULT_FONT_SIZE = 32;
 
+const ALLOWED_RICH_TEXT_TAGS = ['a', 'b', 'blockquote', 'br', 'code', 'div', 'em', 'figure', 'figcaption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'li', 'ol', 'p', 'pre', 'span', 'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'];
+
+function sanitizeRichTextAttributes(tagName, attrText) {
+  const allowedAttributes = {
+    a: ['href', 'title', 'target', 'rel', 'class', 'style'],
+    blockquote: ['class', 'style'],
+    div: ['class', 'style'],
+    figure: ['class', 'style'],
+    figcaption: ['class', 'style'],
+    h1: ['class', 'style'],
+    h2: ['class', 'style'],
+    h3: ['class', 'style'],
+    h4: ['class', 'style'],
+    h5: ['class', 'style'],
+    h6: ['class', 'style'],
+    img: ['src', 'alt', 'title', 'width', 'height', 'class', 'style', 'loading', 'decoding'],
+    li: ['class', 'style'],
+    ol: ['class', 'style', 'start'],
+    p: ['class', 'style'],
+    pre: ['class', 'style'],
+    span: ['class', 'style'],
+    table: ['class', 'style'],
+    td: ['class', 'style', 'colspan', 'rowspan'],
+    th: ['class', 'style', 'colspan', 'rowspan', 'scope'],
+    tr: ['class', 'style'],
+    ul: ['class', 'style']
+  };
+  const allowed = allowedAttributes[tagName] || [];
+  if (!allowed.length) {
+    return '';
+  }
+
+  const attrs = [];
+  String(attrText || '').replace(/([a-zA-Z0-9:-]+)(?:\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>/=`]+)))?/g, (_full, key, _valuePart, doubleQuoted, singleQuoted, bareValue) => {
+    const lowerKey = String(key || '').toLowerCase();
+    if (!allowed.includes(lowerKey)) {
+      return '';
+    }
+
+    const value = doubleQuoted !== undefined ? doubleQuoted : singleQuoted !== undefined ? singleQuoted : bareValue !== undefined ? bareValue : '';
+    if (lowerKey === 'href' && /^(?:\s*javascript:|\s*data:)/i.test(String(value || ''))) {
+      return '';
+    }
+    if (lowerKey === 'style' && /(?:expression\s*\(|javascript:|url\s*\()/i.test(String(value || ''))) {
+      return '';
+    }
+    if (lowerKey === 'target') {
+      const targetValue = String(value || '').trim();
+      if (targetValue === '_blank') {
+        attrs.push(' target="_blank"');
+        if (!attrs.includes(' rel="noreferrer noopener"')) {
+          attrs.push(' rel="noreferrer noopener"');
+        }
+        return '';
+      }
+    }
+    attrs.push(' ' + lowerKey + '="' + String(value || '').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;') + '"');
+    return '';
+  });
+
+  return attrs.join('');
+}
+
 function sanitizeRichText(html) {
   let output = String(html || '');
   output = output.replace(/<script[\s\S]*?<\/script>/gi, '');
   output = output.replace(/<style[\s\S]*?<\/style>/gi, '');
   return output.replace(/<[^>]+>/g, (tag) => {
-    const match = tag.match(/^<\s*(\/?)\s*([a-z0-9]+)(?:\s[^>]*)?>$/i);
+    const match = tag.match(/^<\s*(\/?)\s*([a-z0-9]+)([\s\S]*?)(\/?)>$/i);
     if (!match) {
       return '';
     }
     const closing = Boolean(match[1]);
     const name = String(match[2] || '').toLowerCase();
+    const attrText = String(match[3] || '');
     if (!ALLOWED_RICH_TEXT_TAGS.includes(name)) {
       return '';
     }
-    if (name === 'br') {
+    if (closing) {
-      return '<br>';
+      return `</${name}>`;
     }
-    return closing ? `</${name}>` : `<${name}>`;
+    return `<${name}${sanitizeRichTextAttributes(name, attrText)}>`;
   });
 }
 
-function normalizePlainText(value) {
-  return String(value === undefined || value === null ? '' : value)
-    .replace(/<\s*br\s*\/?\s*>/gi, '\n')
-    .replace(/<[^>]*>/g, '')
-    .replace(/&nbsp;/gi, ' ')
-    .trim();
-}
-
 function stripEditorOnlyMarkup(value) {
   return String(value || '')
     .replace(/<pre[^>]*class="[^"]*api-region-sample-preview[^"]*"[^>]*>[\s\S]*?<\/pre>/gi, '')
@@ -308,6 +363,49 @@ async function buildTemplateContent(pool, template, body, filesByField, existing
         value: submitted === undefined ? String(current.value !== undefined ? current.value : current.text !== undefined ? current.text : '') : String(submitted || ''),
         timezone: timezoneValue === undefined || timezoneValue === null ? String(current.timezone || current.time_zone || '') : String(timezoneValue || '').trim()
       };
+    } else if (region.region_type === 'timetable') {
+      const current = existingContent && existingContent[region.region_key] && typeof existingContent[region.region_key] === 'object' ? existingContent[region.region_key] : {};
+      const suffix = '_' + region.id;
+      const generic = {};
+      const submittedText = body[`region_text_${region.id}`];
+      const normalizedText = submittedText === undefined ? String(current.text !== undefined ? current.text : current.value !== undefined ? current.value : '') : String(submittedText || '');
+
+      Object.keys(body || {}).forEach((key) => {
+        if (!key.startsWith('region_') || !key.endsWith(suffix)) {
+          return;
+        }
+
+        const field = key.slice('region_'.length, -suffix.length);
+        if (!field || field === 'type' || field === 'key' || field === 'name' || field === 'label') {
+          return;
+        }
+
+        generic[field] = body[key];
+      });
+
+      if (Object.prototype.hasOwnProperty.call(generic, 'timetable_display_mode')) {
+        generic.display_mode = generic.timetable_display_mode;
+        delete generic.timetable_display_mode;
+      }
+
+      if (Object.prototype.hasOwnProperty.call(generic, 'timetable_max_items')) {
+        generic.max_items = generic.timetable_max_items;
+        delete generic.timetable_max_items;
+      }
+
+      Object.keys(current).forEach((key) => {
+        if (generic[key] === undefined) {
+          generic[key] = current[key];
+        }
+      });
+
+      delete generic.timetable_display_mode;
+      delete generic.timetable_max_items;
+
+      generic.text = normalizedText;
+      generic.value = normalizedText;
+      generic.type = region.region_type;
+      content[region.region_key] = generic;
     } else if (region.region_type === 'rss') {
       const submitted = body[`region_text_${region.id}`];
       const current = existingContent && existingContent[region.region_key] ? existingContent[region.region_key] : {};
@@ -387,7 +485,7 @@ async function buildTemplateContent(pool, template, body, filesByField, existing
       const style = getTextRegionStyle(body, region, existingContent);
       content[region.region_key] = {
         type: 'text',
-        value: stripEditorOnlyMarkup(normalizeEditorMarkup(submitted === undefined ? current : String(submitted || ''))),
+        value: sanitizeRichText(stripEditorOnlyMarkup(normalizeEditorMarkup(submitted === undefined ? current : String(submitted || '')))),
         font_family: style.font_family,
         font_size: style.font_size,
         font_color: style.font_color

src/data/templates.js

@@ -194,43 +194,6 @@ function extractTemplateRegions(body) {
   return regions;
 }
 
-function extractGenericRegionContent(region, body, filesByField, existingContent) {
-  const content = {};
-  const current = existingContent && existingContent[region.region_key] && typeof existingContent[region.region_key] === 'object' ? existingContent[region.region_key] : {};
-  const suffix = '_' + region.id;
-
-  Object.keys(body || {}).forEach((key) => {
-    if (!key.startsWith('region_') || !key.endsWith(suffix)) {
-      return;
-    }
-    const field = key.slice('region_'.length, -suffix.length);
-    if (!field || field === 'type' || field === 'key' || field === 'name' || field === 'label') {
-      return;
-    }
-    content[field] = body[key];
-  });
-
-  Object.keys(filesByField || {}).forEach((fieldName) => {
-    if (!fieldName.startsWith('region_') || !fieldName.endsWith(suffix)) {
-      return;
-    }
-    const field = fieldName.slice('region_'.length, -suffix.length);
-    if (!field) {
-      return;
-    }
-    content[field] = `/media/uploads/${filesByField[fieldName].filename}`;
-  });
-
-  Object.keys(current).forEach((key) => {
-    if (content[key] === undefined) {
-      content[key] = current[key];
-    }
-  });
-
-  content.type = region.region_type;
-  return content;
-}
-
 function getFilesByField(files) {
   const map = {};
   (files || []).forEach((file) => {

src/data/timetables.js

@@ -4,6 +4,23 @@ const { fetchPagedRows, validateMaxLength } = require('./utils');
 
 const NAME_MAX_LENGTH = 255;
 const DESCRIPTION_MAX_LENGTH = 255;
+const DEFAULT_TIME_ZONE = 'Europe/London';
+
+function normalizeTimeZone(value, fallback) {
+  const raw = String(value || '').trim();
+  if (!raw) {
+    return String(fallback || DEFAULT_TIME_ZONE).trim() || DEFAULT_TIME_ZONE;
+  }
+
+  try {
+    new Intl.DateTimeFormat('en-GB', { timeZone: raw }).format(new Date());
+    return raw;
+  } catch (_error) {
+    const error = new Error('Timetable time zone is invalid.');
+    error.statusCode = 400;
+    throw error;
+  }
+}
 
 function normalizeDisplayMode(value) {
   const mode = String(value || 'upcoming').trim().toLowerCase();
@@ -15,15 +32,15 @@ function normalizeDisplayMode(value) {
 
 async function fetchTimetablesData(pool) {
   const [timetableGroups] = await pool.query(`
-    SELECT g.id, g.name, g.short_description, g.created_at, g.modified_at, g.created_by, g.modified_by,
+    SELECT g.id, g.name, g.short_description, g.timezone, g.created_at, g.modified_at, g.created_by, g.modified_by,
-           (SELECT COUNT(*) FROM i_schedule_entries e WHERE e.schedule_group_id = g.id) AS entry_count,
+           (SELECT COUNT(*) FROM i_timetable_entries e WHERE e.schedule_group_id = g.id) AS entry_count,
-           (SELECT MIN(e.start_datetime) FROM i_schedule_entries e WHERE e.schedule_group_id = g.id AND e.start_datetime IS NOT NULL) AS next_start_datetime
+           (SELECT MIN(e.start_datetime) FROM i_timetable_entries e WHERE e.schedule_group_id = g.id AND e.start_datetime IS NOT NULL) AS next_start_datetime
-    FROM i_schedule_groups g
+    FROM i_timetable_groups g
     ORDER BY g.modified_at DESC, g.id DESC
   `);
   const [timetableEntries] = await pool.query(`
     SELECT id, schedule_group_id, title, short_description, start_datetime, end_datetime, created_at, modified_at, created_by, modified_by
-    FROM i_schedule_entries
+    FROM i_timetable_entries
     ORDER BY schedule_group_id ASC, start_datetime ASC, id ASC
   `);
 
@@ -50,17 +67,18 @@ async function fetchTimetablesData(pool) {
 
 async function fetchTimetableGroupsPage(pool, page, pageSize, searchTerm, sortKey, sortDirection) {
   const paged = await fetchPagedRows(pool, {
-    selectSql: `SELECT g.id, g.name, g.short_description, g.created_at, g.modified_at, g.created_by, g.modified_by,
+    selectSql: `SELECT g.id, g.name, g.short_description, g.timezone, g.created_at, g.modified_at, g.created_by, g.modified_by,
-           (SELECT COUNT(*) FROM i_schedule_entries e WHERE e.schedule_group_id = g.id) AS entry_count,
+        (SELECT COUNT(*) FROM i_timetable_entries e WHERE e.schedule_group_id = g.id) AS entry_count,
-           (SELECT MIN(e.start_datetime) FROM i_schedule_entries e WHERE e.schedule_group_id = g.id AND e.start_datetime IS NOT NULL) AS next_start_datetime
+        (SELECT MIN(e.start_datetime) FROM i_timetable_entries e WHERE e.schedule_group_id = g.id AND e.start_datetime IS NOT NULL) AS next_start_datetime
-    FROM i_schedule_groups g
+      FROM i_timetable_groups g
     ORDER BY g.modified_at DESC, g.id DESC`,
-    countSql: 'SELECT COUNT(*) AS count FROM i_schedule_groups',
+      countSql: 'SELECT COUNT(*) AS count FROM i_timetable_groups',
     searchColumns: ['g.name', 'g.short_description'],
     searchTerm: searchTerm,
     sortColumns: {
       name: 'g.name',
       description: 'g.short_description',
+      timezone: 'g.timezone',
       entries: 'entry_count',
       next_start: 'next_start_datetime',
       created: 'g.created_at',
@@ -77,7 +95,7 @@ async function fetchTimetableGroupsPage(pool, page, pageSize, searchTerm, sortKe
 
 async function fetchTimetableGroupById(pool, id) {
   const [rows] = await pool.query(
-    'SELECT id, name, short_description, created_at, modified_at, created_by, modified_by FROM i_schedule_groups WHERE id = ?',
+    'SELECT id, name, short_description, timezone, created_at, modified_at, created_by, modified_by FROM i_timetable_groups WHERE id = ?',
     [id]
   );
 
@@ -87,7 +105,7 @@ async function fetchTimetableGroupById(pool, id) {
 async function fetchTimetableEntriesByGroupId(pool, timetableGroupId) {
   const [rows] = await pool.query(
     `SELECT id, schedule_group_id, title, short_description, start_datetime, end_datetime, created_at, modified_at, created_by, modified_by
-     FROM i_schedule_entries
+     FROM i_timetable_entries
      WHERE schedule_group_id = ?
      ORDER BY start_datetime ASC, id ASC`,
     [timetableGroupId]
@@ -100,6 +118,7 @@ function buildTimetableGroupPayload(req, existingTimetableGroup) {
   const fallback = existingTimetableGroup || {};
   const name = validateMaxLength(req.body.name || fallback.name || '', NAME_MAX_LENGTH, 'Timetable group name');
   const shortDescription = validateMaxLength(req.body.short_description || req.body.shortDescription || fallback.short_description || '', DESCRIPTION_MAX_LENGTH, 'Timetable group description');
+  const timezone = normalizeTimeZone(req.body.timezone || req.body.time_zone || fallback.timezone || DEFAULT_TIME_ZONE, fallback.timezone || DEFAULT_TIME_ZONE);
 
   if (!name) {
     const error = new Error('Timetable group name is required.');
@@ -109,7 +128,8 @@ function buildTimetableGroupPayload(req, existingTimetableGroup) {
 
   return {
     name: name,
-    shortDescription: shortDescription
+    shortDescription: shortDescription,
+    timezone: timezone
   };
 }
 
@@ -119,5 +139,6 @@ module.exports = {
   fetchTimetableGroupsPage,
   fetchTimetableGroupById,
   fetchTimetableEntriesByGroupId,
-  buildTimetableGroupPayload
+  buildTimetableGroupPayload,
+  normalizeTimeZone
 };

src/db/bootstrap.js

@@ -15,11 +15,19 @@ async function bootstrapDatabase(pool) {
   }
 
   for (const permission of PERMISSIONS) {
+    await pool.query(
+      `UPDATE a_permissions
+          SET name = ?, section_name = ?, description = ?, modified_by = ?
+        WHERE permission_key = ?`,
+      [permission.name, permission.sectionName, permission.description || null, null, permission.key]
+    );
     await pool.query(
       `INSERT INTO a_permissions (permission_key, name, section_name, description, created_by, modified_by)
-       VALUES (?, ?, ?, ?, ?, ?)
+       SELECT ?, ?, ?, ?, ?, ?
-       ON DUPLICATE KEY UPDATE name = VALUES(name), section_name = VALUES(section_name), description = VALUES(description), modified_by = VALUES(modified_by)` ,
+        WHERE NOT EXISTS (
-      [permission.key, permission.name, permission.sectionName, permission.description || null, null, null]
+          SELECT 1 FROM a_permissions WHERE permission_key = ?
+        )`,
+      [permission.key, permission.name, permission.sectionName, permission.description || null, null, null, permission.key]
     );
   }
 
@@ -35,22 +43,37 @@ async function bootstrapDatabase(pool) {
     );
   }
 
-  await pool.query('UPDATE a_users SET name = username WHERE name IS NULL OR name = ""');
+  const [legacyRoleRows] = await pool.query('SELECT id FROM a_roles WHERE role_key = ? LIMIT 1', ['administrators']);
+  const [currentRoleRows] = await pool.query('SELECT id FROM a_roles WHERE role_key = ? LIMIT 1', [DEFAULT_ROLE.key]);
+  if (legacyRoleRows.length && !currentRoleRows.length) {
+    await pool.query(
+      `UPDATE a_roles
+          SET role_key = ?, name = ?, description = ?, modified_by = ?
+        WHERE role_key = ?`,
+      [DEFAULT_ROLE.key, DEFAULT_ROLE.name, DEFAULT_ROLE.description || null, null, 'administrators']
+    );
+  }
 
   await pool.query(
     `INSERT INTO a_roles (role_key, name, description, created_by, modified_by)
-     VALUES (?, ?, ?, ?, ?)
+     SELECT ?, ?, ?, ?, ?
-     ON DUPLICATE KEY UPDATE name = VALUES(name), description = VALUES(description), modified_by = VALUES(modified_by)`,
+      WHERE NOT EXISTS (
-    [DEFAULT_ROLE.key, DEFAULT_ROLE.name, DEFAULT_ROLE.description || null, null, null]
+        SELECT 1 FROM a_roles WHERE role_key = ?
+      )`,
+    [DEFAULT_ROLE.key, DEFAULT_ROLE.name, DEFAULT_ROLE.description || null, null, null, DEFAULT_ROLE.key]
   );
 
   const [defaultRoleRows] = await pool.query('SELECT id FROM a_roles WHERE role_key = ? LIMIT 1', [DEFAULT_ROLE.key]);
   const defaultRoleId = defaultRoleRows.length ? Number(defaultRoleRows[0].id) : null;
   if (defaultRoleId) {
     await pool.query(
-      `INSERT IGNORE INTO a_role_permissions (role_id, permission_id, created_by, modified_by)
+      `INSERT INTO a_role_permissions (role_id, permission_id, created_by, modified_by)
-       SELECT ?, id, NULL, NULL FROM a_permissions`,
+       SELECT ?, permissions.id, NULL, NULL
-      [defaultRoleId]
+         FROM a_permissions permissions
+         LEFT JOIN a_role_permissions existing
+           ON existing.role_id = ? AND existing.permission_id = permissions.id
+        WHERE existing.id IS NULL`,
+      [defaultRoleId, defaultRoleId]
     );
   }
 

src/db/index.js

@@ -1,3 +1,6 @@
+const { version: appVersion } = require('#root/package.json');
+const { compareVersions, detectSchemaVersion, getPendingMigrations, recordSchemaVersion, runMigrations } = require('./migrations');
+
 // Snapshot only: keep this file aligned with the current schema state.
 async function ensureSchema(pool, options) {
   const schemaLockName = 'pulse_signage_schema_lock';
@@ -12,6 +15,12 @@ async function ensureSchema(pool, options) {
     }
 
     try {
+      const currentVersion = await detectSchemaVersion(pool);
+      const pendingMigrations = await getPendingMigrations(pool, { currentVersion: currentVersion });
+      const updateRequired = pendingMigrations.length > 0;
+
+      console.info('[schema] previous=' + currentVersion + ' current=' + appVersion + ' update=' + (updateRequired ? 'yes' : 'no'));
+
       await pool.query(`
     CREATE TABLE IF NOT EXISTS c_canvas_sizes (
       id INT AUTO_INCREMENT PRIMARY KEY,
@@ -175,13 +184,14 @@ async function ensureSchema(pool, options) {
 
   await pool.query(`
     CREATE TABLE IF NOT EXISTS d_announcement_screens (
+      id BIGINT AUTO_INCREMENT PRIMARY KEY,
       announcement_id INT NOT NULL,
       screen_id INT NOT NULL,
       created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
       created_by INT NULL,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
       modified_by INT NULL,
-      PRIMARY KEY (announcement_id, screen_id),
+      UNIQUE KEY uq_announcement_screens_pair (announcement_id, screen_id),
       INDEX idx_announcement_screens_screen_id (screen_id),
       CONSTRAINT fk_announcement_screens_announcement FOREIGN KEY (announcement_id) REFERENCES d_announcements(id) ON DELETE CASCADE,
       CONSTRAINT fk_announcement_screens_screen FOREIGN KEY (screen_id) REFERENCES d_screens(id) ON DELETE CASCADE
@@ -238,10 +248,11 @@ async function ensureSchema(pool, options) {
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS i_schedule_groups (
+    CREATE TABLE IF NOT EXISTS i_timetable_groups (
       id INT AUTO_INCREMENT PRIMARY KEY,
       name VARCHAR(255) NOT NULL,
       short_description VARCHAR(255) NULL,
+      timezone VARCHAR(64) NOT NULL DEFAULT 'Europe/London',
       created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
       created_by INT NULL,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
@@ -250,7 +261,7 @@ async function ensureSchema(pool, options) {
   `);
 
   await pool.query(`
-    CREATE TABLE IF NOT EXISTS i_schedule_entries (
+    CREATE TABLE IF NOT EXISTS i_timetable_entries (
       id INT AUTO_INCREMENT PRIMARY KEY,
       schedule_group_id INT NOT NULL,
       title VARCHAR(255) NOT NULL,
@@ -261,14 +272,15 @@ async function ensureSchema(pool, options) {
       created_by INT NULL,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
       modified_by INT NULL,
-      CONSTRAINT fk_schedule_entries_group FOREIGN KEY (schedule_group_id) REFERENCES i_schedule_groups(id) ON DELETE CASCADE,
+      CONSTRAINT fk_timetable_entries_group FOREIGN KEY (schedule_group_id) REFERENCES i_timetable_groups(id) ON DELETE CASCADE,
-      INDEX idx_schedule_entries_group_start (schedule_group_id, start_datetime)
+      INDEX idx_timetable_entries_group_start (schedule_group_id, start_datetime)
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
   await pool.query(`
     CREATE TABLE IF NOT EXISTS d_onboarding_devices (
-      device_id VARCHAR(128) PRIMARY KEY,
+      id BIGINT AUTO_INCREMENT PRIMARY KEY,
+      device_id VARCHAR(128) NOT NULL UNIQUE,
       client_name VARCHAR(255) NULL,
       screen_id INT NULL,
       created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
@@ -287,6 +299,8 @@ async function ensureSchema(pool, options) {
       password_hash CHAR(64) NOT NULL,
       password_salt VARCHAR(64) NOT NULL,
       password_iterations INT NOT NULL,
+      must_change_password TINYINT(1) NOT NULL DEFAULT 0,
+      account_locked TINYINT(1) NOT NULL DEFAULT 0,
       created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
       created_by INT NULL,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
@@ -323,13 +337,14 @@ async function ensureSchema(pool, options) {
 
   await pool.query(`
     CREATE TABLE IF NOT EXISTS a_role_permissions (
+      id BIGINT AUTO_INCREMENT PRIMARY KEY,
       role_id INT NOT NULL,
       permission_id INT NOT NULL,
       created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
       created_by INT NULL,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
       modified_by INT NULL,
-      PRIMARY KEY (role_id, permission_id),
+      UNIQUE KEY uq_role_permissions_pair (role_id, permission_id),
       CONSTRAINT fk_role_permissions_role FOREIGN KEY (role_id) REFERENCES a_roles(id) ON DELETE CASCADE,
       CONSTRAINT fk_role_permissions_permission FOREIGN KEY (permission_id) REFERENCES a_permissions(id) ON DELETE CASCADE
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
@@ -337,13 +352,14 @@ async function ensureSchema(pool, options) {
 
   await pool.query(`
     CREATE TABLE IF NOT EXISTS a_user_roles (
+      id BIGINT AUTO_INCREMENT PRIMARY KEY,
       user_id INT NOT NULL,
       role_id INT NOT NULL,
       created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
       created_by INT NULL,
       modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
       modified_by INT NULL,
-      PRIMARY KEY (user_id, role_id),
+      UNIQUE KEY uq_user_roles_pair (user_id, role_id),
       CONSTRAINT fk_user_roles_user FOREIGN KEY (user_id) REFERENCES a_users(id) ON DELETE CASCADE,
       CONSTRAINT fk_user_roles_role FOREIGN KEY (role_id) REFERENCES a_roles(id) ON DELETE CASCADE
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
@@ -351,8 +367,11 @@ async function ensureSchema(pool, options) {
 
   await pool.query(`
     CREATE TABLE IF NOT EXISTS a_sessions (
-      session_hash CHAR(64) PRIMARY KEY,
+      id BIGINT AUTO_INCREMENT PRIMARY KEY,
+      session_hash CHAR(64) NOT NULL UNIQUE,
       user_id INT NOT NULL,
+      ip_address VARCHAR(255) NULL,
+      user_agent VARCHAR(512) NULL,
       expires_at DATETIME NOT NULL,
       created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
       created_by INT NULL,
@@ -362,6 +381,18 @@ async function ensureSchema(pool, options) {
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
+  await pool.query(`
+    CREATE TABLE IF NOT EXISTS a_login_attempts (
+      id BIGINT AUTO_INCREMENT PRIMARY KEY,
+      rate_key VARCHAR(600) NOT NULL UNIQUE,
+      failed_count INT NOT NULL DEFAULT 0,
+      last_failed_at DATETIME NULL,
+      locked_until DATETIME NULL,
+      created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+      modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+  `);
+
   await pool.query(`
     CREATE TABLE IF NOT EXISTS o_background_tasks (
       id BIGINT AUTO_INCREMENT PRIMARY KEY,
@@ -383,8 +414,20 @@ async function ensureSchema(pool, options) {
     ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
   `);
 
-      const { runMigrations } = require('./migrations');
+  await pool.query(`
-      await runMigrations(pool, options);
+    CREATE TABLE IF NOT EXISTS o_app_settings (
+      id BIGINT AUTO_INCREMENT PRIMARY KEY,
+      setting_key VARCHAR(191) NOT NULL UNIQUE,
+      setting_value JSON NOT NULL,
+      created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+      created_by INT NULL,
+      modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+      modified_by INT NULL
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+  `);
+
+      await runMigrations(pool, Object.assign({}, options, { currentVersion: currentVersion }));
+      await recordSchemaVersion(pool, appVersion);
     } finally {
       await pool.query('SELECT RELEASE_LOCK(?)', [schemaLockName]).catch(function () {
       });

src/db/migrations.js

@@ -1,4 +1,7 @@
 const { version: appVersion } = require('#root/package.json');
+const TIMETABLE_TIME_ZONE = 'Europe/London';
+const APP_STATE_TABLE = 'o_app_state';
+const APP_STATE_SCHEMA_VERSION_KEY = 'schema_version';
 
 const VERSIONED_MIGRATIONS = [
   {
@@ -56,7 +59,6 @@ const VERSIONED_MIGRATIONS = [
       if (await columnExists(pool, 'c_template_regions', 'font_family')) {
         await pool.query('ALTER TABLE c_template_regions DROP COLUMN font_family');
       }
-
     }
   },
   {
@@ -276,6 +278,7 @@ const VERSIONED_MIGRATIONS = [
       await pool.query('RENAME TABLE d_players_rebuild TO d_players');
 
       await pool.query('ALTER TABLE d_screens MODIFY COLUMN player_id INT NULL AFTER playlist_id');
+      return;
     }
   },
   {
@@ -295,6 +298,200 @@ const VERSIONED_MIGRATIONS = [
       await dropForeignKeyIfExists(pool, 'd_screens', 'player_id');
       await dropColumnIfExists(pool, 'd_screens', 'player_id');
     }
+  },
+  {
+    version: '2.6.16',
+    label: 'v2.6.16 timetable timezone schema',
+    run: async function (pool) {
+      const timetableGroupsExists = await tableExists(pool, 'i_timetable_groups');
+      const scheduleGroupsExists = await tableExists(pool, 'i_schedule_groups');
+      const tableName = timetableGroupsExists ? 'i_timetable_groups' : scheduleGroupsExists ? 'i_schedule_groups' : null;
+
+      if (!tableName) {
+        return;
+      }
+
+      await ensureColumn(pool, tableName, 'timezone', "VARCHAR(64) NOT NULL DEFAULT 'Europe/London'", 'short_description');
+    }
+  },
+  {
+    version: '2.6.17',
+    label: 'v2.6.17 timetable europe/london conversion',
+    run: async function (pool) {
+      const timetableGroupsExists = await tableExists(pool, 'i_timetable_groups');
+      const timetableEntriesExists = await tableExists(pool, 'i_timetable_entries');
+      const scheduleGroupsExists = await tableExists(pool, 'i_schedule_groups');
+      const scheduleEntriesExists = await tableExists(pool, 'i_schedule_entries');
+      const groupTableName = timetableGroupsExists ? 'i_timetable_groups' : scheduleGroupsExists ? 'i_schedule_groups' : null;
+      const entryTableName = timetableEntriesExists ? 'i_timetable_entries' : scheduleEntriesExists ? 'i_schedule_entries' : null;
+
+      if (!groupTableName || !entryTableName) {
+        return;
+      }
+
+      await ensureColumn(pool, groupTableName, 'timezone', "VARCHAR(64) NOT NULL DEFAULT 'Europe/London'", 'short_description');
+
+      await pool.query('UPDATE ' + groupTableName + ' SET timezone = ?', [TIMETABLE_TIME_ZONE]);
+
+      const [rows] = await pool.query('SELECT id, start_datetime, end_datetime FROM ' + entryTableName + ' ORDER BY id ASC');
+      for (const row of rows) {
+        const startDate = convertMigrationDateTimeFromTimeZone(row.start_datetime, TIMETABLE_TIME_ZONE);
+        const endDate = row.end_datetime ? convertMigrationDateTimeFromTimeZone(row.end_datetime, TIMETABLE_TIME_ZONE) : null;
+        await pool.query(
+          'UPDATE ' + entryTableName + ' SET start_datetime = ?, end_datetime = ? WHERE id = ?',
+          [formatMigrationDateTimeUtc(startDate), endDate ? formatMigrationDateTimeUtc(endDate) : null, row.id]
+        );
+      }
+    }
+  },
+  {
+    version: '2.6.18',
+    label: 'v2.6.18 timetable table rename',
+    run: async function (pool) {
+      const scheduleGroupsExists = await tableExists(pool, 'i_schedule_groups');
+      const timetableGroupsExists = await tableExists(pool, 'i_timetable_groups');
+
+      if (scheduleGroupsExists) {
+        if (!timetableGroupsExists) {
+          await pool.query('RENAME TABLE i_schedule_groups TO i_timetable_groups, i_schedule_entries TO i_timetable_entries');
+          await ensureColumn(pool, 'i_timetable_groups', 'timezone', "VARCHAR(64) NOT NULL DEFAULT 'Europe/London'", 'short_description');
+          return;
+        }
+
+        await ensureColumn(pool, 'i_timetable_groups', 'timezone', "VARCHAR(64) NOT NULL DEFAULT 'Europe/London'", 'short_description');
+
+        await pool.query(`
+          INSERT IGNORE INTO i_timetable_groups (id, name, short_description, timezone, created_at, created_by, modified_at, modified_by)
+          SELECT id, name, short_description, 'Europe/London' AS timezone, created_at, created_by, modified_at, modified_by
+          FROM i_schedule_groups
+          ORDER BY id ASC
+        `);
+
+        await pool.query(`
+          INSERT IGNORE INTO i_timetable_entries (id, schedule_group_id, title, short_description, start_datetime, end_datetime, created_at, created_by, modified_at, modified_by)
+          SELECT id, schedule_group_id, title, short_description, start_datetime, end_datetime, created_at, created_by, modified_at, modified_by
+          FROM i_schedule_entries
+          ORDER BY schedule_group_id ASC, start_datetime ASC, id ASC
+        `);
+
+        const [groupRows] = await pool.query('SELECT COALESCE(MAX(id), 0) AS max_id FROM i_timetable_groups');
+        const [entryRows] = await pool.query('SELECT COALESCE(MAX(id), 0) AS max_id FROM i_timetable_entries');
+        const nextGroupId = Number(groupRows && groupRows[0] && groupRows[0].max_id) + 1;
+        const nextEntryId = Number(entryRows && entryRows[0] && entryRows[0].max_id) + 1;
+        await pool.query('ALTER TABLE i_timetable_groups AUTO_INCREMENT = ' + nextGroupId);
+        await pool.query('ALTER TABLE i_timetable_entries AUTO_INCREMENT = ' + nextEntryId);
+
+        await pool.query('DROP TABLE i_schedule_entries');
+        await pool.query('DROP TABLE i_schedule_groups');
+      }
+    }
+  },
+  {
+    version: '2.8.0',
+    label: 'v2.8.0 combined application schema',
+    run: async function (pool) {
+      await pool.query(`
+        CREATE TABLE IF NOT EXISTS o_app_settings (
+          id BIGINT AUTO_INCREMENT PRIMARY KEY,
+          setting_key VARCHAR(191) NOT NULL UNIQUE,
+          setting_value JSON NOT NULL,
+          created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+          created_by INT NULL,
+          modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
+          modified_by INT NULL
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+      `);
+      await pool.query(`
+        CREATE TABLE IF NOT EXISTS o_app_state (
+          id BIGINT AUTO_INCREMENT PRIMARY KEY,
+          state_key VARCHAR(191) NOT NULL UNIQUE,
+          state_value MEDIUMTEXT NULL,
+          created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+          modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+      `);
+
+      const numericIdTables = [
+        ['d_announcement_screens', 'uq_announcement_screens_pair', '(announcement_id, screen_id)'],
+        ['d_onboarding_devices', 'uq_onboarding_devices_device_id', '(device_id)'],
+        ['a_role_permissions', 'uq_role_permissions_pair', '(role_id, permission_id)'],
+        ['a_user_roles', 'uq_user_roles_pair', '(user_id, role_id)'],
+        ['a_sessions', 'uq_sessions_hash', '(session_hash)'],
+        ['o_app_state', 'uq_app_state_key', '(state_key)']
+      ];
+
+      for (const [tableName, uniqueKeyName, uniqueColumns] of numericIdTables) {
+        if (!(await tableExists(pool, tableName)) || await columnExists(pool, tableName, 'id')) {
+          continue;
+        }
+        await pool.query('ALTER TABLE ' + tableName + ' DROP PRIMARY KEY, ADD COLUMN id BIGINT NOT NULL AUTO_INCREMENT PRIMARY KEY FIRST, ADD UNIQUE KEY ' + uniqueKeyName + ' ' + uniqueColumns);
+      }
+      await ensureColumn(pool, 'a_users', 'must_change_password', 'TINYINT(1) NOT NULL DEFAULT 0', 'password_iterations');
+      await pool.query(`
+        CREATE TABLE IF NOT EXISTS a_login_attempts (
+          id BIGINT AUTO_INCREMENT PRIMARY KEY,
+          rate_key VARCHAR(600) NOT NULL UNIQUE,
+          failed_count INT NOT NULL DEFAULT 0,
+          last_failed_at DATETIME NULL,
+          locked_until DATETIME NULL,
+          created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+          modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+      `);
+      await ensureColumn(pool, 'a_users', 'account_locked', 'TINYINT(1) NOT NULL DEFAULT 0', 'must_change_password');
+      await ensureColumn(pool, 'a_sessions', 'ip_address', 'VARCHAR(255) NULL', 'user_id');
+      await ensureColumn(pool, 'a_sessions', 'user_agent', 'VARCHAR(512) NULL', 'ip_address');
+      await pool.query(`
+        CREATE TABLE IF NOT EXISTS o_audit_events (
+          id BIGINT AUTO_INCREMENT PRIMARY KEY,
+          occurred_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+          category VARCHAR(64) NOT NULL,
+          event_type VARCHAR(128) NOT NULL,
+          actor_user_id INT NULL,
+          target_type VARCHAR(64) NULL,
+          target_id VARCHAR(191) NULL,
+          target_label VARCHAR(255) NULL,
+          ip_address VARCHAR(255) NULL,
+          user_agent VARCHAR(512) NULL,
+          details_json JSON NULL,
+          INDEX idx_audit_events_occurred_at (occurred_at),
+          INDEX idx_audit_events_category_type (category, event_type),
+          INDEX idx_audit_events_actor (actor_user_id),
+          INDEX idx_audit_events_target (target_type, target_id)
+        ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
+      `);
+      await pool.query(
+        `INSERT INTO o_app_settings (setting_key, setting_value, created_by, modified_by)
+         VALUES (?, ?, NULL, NULL) ON DUPLICATE KEY UPDATE setting_value = VALUES(setting_value)`,
+        ['audit.retention_days', JSON.stringify(30)]
+      );
+      const settings = [
+        ['audit.enabled', true],
+        ['audit.categories', ['authentication', 'security', 'sessions', 'users', 'roles', 'system-settings']],
+        ['audit.include_request_metadata', true]
+      ];
+      for (const [key, value] of settings) {
+        await pool.query(
+          `INSERT INTO o_app_settings (setting_key, setting_value, created_by, modified_by)
+           VALUES (?, ?, NULL, NULL) ON DUPLICATE KEY UPDATE setting_value = VALUES(setting_value)`,
+          [key, JSON.stringify(value)]
+        );
+      }
+      await pool.query(
+        `INSERT IGNORE INTO a_permissions
+          (permission_key, name, section_name, description, created_by, modified_by)
+         VALUES (?, ?, ?, ?, NULL, NULL)`,
+        ['audit-log.allow', 'Audit log', 'Settings', 'Download filtered audit events.']
+      );
+      await pool.query(
+        `INSERT IGNORE INTO a_role_permissions (role_id, permission_id, created_by, modified_by)
+         SELECT roles.id, permissions.id, NULL, NULL
+           FROM a_roles roles
+           CROSS JOIN a_permissions permissions
+          WHERE roles.role_key = 'administrators'
+            AND permissions.permission_key = 'audit-log.allow'`
+      );
+    }
   }
 ];
 
@@ -311,6 +508,65 @@ async function columnExists(pool, tableName, columnName) {
   return Number(rows && rows[0] && rows[0].column_count) > 0;
 }
 
+async function tableExists(pool, tableName) {
+  const [rows] = await pool.query(
+    `SELECT COUNT(*) AS table_count
+     FROM information_schema.TABLES
+     WHERE TABLE_SCHEMA = DATABASE()
+       AND TABLE_NAME = ?`,
+    [tableName]
+  );
+
+  return Number(rows && rows[0] && rows[0].table_count) > 0;
+}
+
+async function detectSchemaVersion(pool) {
+  if (await tableExists(pool, APP_STATE_TABLE)) {
+    const [rows] = await pool.query(
+      'SELECT state_value FROM ' + APP_STATE_TABLE + ' WHERE state_key = ? LIMIT 1',
+      [APP_STATE_SCHEMA_VERSION_KEY]
+    );
+
+    const storedVersion = String(rows && rows[0] && rows[0].state_value || '').trim();
+    if (storedVersion) {
+      return storedVersion;
+    }
+  }
+
+  const timetableGroupsExists = await tableExists(pool, 'i_timetable_groups');
+  const timetableEntriesExists = await tableExists(pool, 'i_timetable_entries');
+  const scheduleGroupsExists = await tableExists(pool, 'i_schedule_groups');
+  const scheduleEntriesExists = await tableExists(pool, 'i_schedule_entries');
+
+  if (timetableGroupsExists && timetableEntriesExists && !scheduleGroupsExists && !scheduleEntriesExists) {
+    return '2.6.18';
+  }
+
+  return '0.0.0';
+}
+
+async function recordSchemaVersion(pool, version) {
+  await pool.query(
+    `CREATE TABLE IF NOT EXISTS ${APP_STATE_TABLE} (
+      id BIGINT AUTO_INCREMENT PRIMARY KEY,
+      state_key VARCHAR(191) NOT NULL UNIQUE,
+      state_value MEDIUMTEXT NULL,
+      created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
+      modified_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
+    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci`
+  );
+
+  const stateValue = String(version || appVersion || '0.0.0').trim();
+  await pool.query(
+    'UPDATE ' + APP_STATE_TABLE + ' SET state_value = ? WHERE state_key = ?',
+    [stateValue, APP_STATE_SCHEMA_VERSION_KEY]
+  );
+  await pool.query(
+    'INSERT INTO ' + APP_STATE_TABLE + ' (state_key, state_value) SELECT ?, ? WHERE NOT EXISTS (SELECT 1 FROM ' + APP_STATE_TABLE + ' WHERE state_key = ?)',
+    [APP_STATE_SCHEMA_VERSION_KEY, stateValue, APP_STATE_SCHEMA_VERSION_KEY]
+  );
+}
+
 async function columnIsAutoIncrement(pool, tableName, columnName) {
   const [rows] = await pool.query(
     `SELECT COUNT(*) AS auto_increment_count
@@ -512,6 +768,107 @@ function formatMigrationDateTime(value) {
   return year + '-' + month + '-' + day + 'T' + hours + ':' + minutes;
 }
 
+function parseMigrationDateTimeParts(value) {
+  if (!value) {
+    return null;
+  }
+
+  if (value instanceof Date) {
+    if (Number.isNaN(value.getTime())) {
+      return null;
+    }
+
+    return {
+      year: value.getUTCFullYear(),
+      month: value.getUTCMonth() + 1,
+      day: value.getUTCDate(),
+      hour: value.getUTCHours(),
+      minute: value.getUTCMinutes(),
+      second: value.getUTCSeconds()
+    };
+  }
+
+  const raw = String(value || '').trim();
+  const match = raw.match(/^(\d{4})-(\d{2})-(\d{2})(?:[ T](\d{2}):(\d{2})(?::(\d{2}))?)?$/);
+  if (!match) {
+    return null;
+  }
+
+  return {
+    year: Number(match[1]),
+    month: Number(match[2]),
+    day: Number(match[3]),
+    hour: Number(match[4] || 0),
+    minute: Number(match[5] || 0),
+    second: Number(match[6] || 0)
+  };
+}
+
+function getMigrationTimeZoneOffsetMillis(date, timeZone) {
+  if (!(date instanceof Date) || Number.isNaN(date.getTime())) {
+    return 0;
+  }
+
+  const parts = new Intl.DateTimeFormat('en-GB', {
+    timeZone: timeZone,
+    hour12: false,
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit'
+  }).formatToParts(date).reduce(function (acc, part) {
+    if (part && part.type && part.type !== 'literal') {
+      acc[part.type] = part.value;
+    }
+    return acc;
+  }, Object.create(null));
+
+  const localAsUtc = Date.UTC(
+    Number(parts.year) || 0,
+    (Number(parts.month) || 1) - 1,
+    Number(parts.day) || 1,
+    Number(parts.hour) || 0,
+    Number(parts.minute) || 0,
+    Number(parts.second) || 0,
+    0
+  );
+
+  return localAsUtc - date.getTime();
+}
+
+function convertMigrationDateTimeFromTimeZone(value, timeZone) {
+  const parts = parseMigrationDateTimeParts(value);
+  if (!parts) {
+    return null;
+  }
+
+  const utcMillis = Date.UTC(parts.year, parts.month - 1, parts.day, parts.hour, parts.minute, parts.second, 0);
+  let adjusted = new Date(utcMillis - getMigrationTimeZoneOffsetMillis(new Date(utcMillis), timeZone));
+  const adjustedOffset = getMigrationTimeZoneOffsetMillis(adjusted, timeZone);
+
+  if (adjustedOffset !== getMigrationTimeZoneOffsetMillis(new Date(utcMillis), timeZone)) {
+    adjusted = new Date(utcMillis - adjustedOffset);
+  }
+
+  return adjusted;
+}
+
+function formatMigrationDateTimeUtc(value) {
+  if (!(value instanceof Date) || Number.isNaN(value.getTime())) {
+    return null;
+  }
+
+  const year = value.getUTCFullYear();
+  const month = String(value.getUTCMonth() + 1).padStart(2, '0');
+  const day = String(value.getUTCDate()).padStart(2, '0');
+  const hours = String(value.getUTCHours()).padStart(2, '0');
+  const minutes = String(value.getUTCMinutes()).padStart(2, '0');
+  const seconds = String(value.getUTCSeconds()).padStart(2, '0');
+  return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
+}
+
 function formatMigrationTime(value) {
   if (!value) {
     return null;
@@ -562,12 +919,13 @@ function compareVersions(leftVersion, rightVersion) {
   return 0;
 }
 
-async function runMigrations(pool, options) {
+async function getPendingMigrations(pool, options) {
-  // Only run migrations that are newer than the installed schema version and not beyond the app version.
   const targetVersion = String(appVersion || '0.0.0').trim();
   const currentVersion = String(options && options.currentVersion || '0.0.0').trim();
   const legacyPlayerSchemaPresent = await columnExists(pool, 'd_players', 'device_id');
   const screenPlayerColumnPresent = await columnExists(pool, 'd_screens', 'player_id');
+  const legacyTimetableGroupsPresent = await tableExists(pool, 'i_schedule_groups');
+  const legacyTimetableEntriesPresent = await tableExists(pool, 'i_schedule_entries');
   let effectiveCurrentVersion = currentVersion;
 
   if (!legacyPlayerSchemaPresent && compareVersions(effectiveCurrentVersion, '2.1.0') < 0) {
@@ -578,14 +936,29 @@ async function runMigrations(pool, options) {
     effectiveCurrentVersion = '2.6.3';
   }
 
-  for (const migration of VERSIONED_MIGRATIONS) {
+  if (legacyTimetableGroupsPresent || legacyTimetableEntriesPresent) {
-    if (compareVersions(migration.version, effectiveCurrentVersion) > 0 && compareVersions(migration.version, targetVersion) <= 0) {
+    effectiveCurrentVersion = compareVersions(effectiveCurrentVersion, '2.6.18') < 0 ? '2.6.17' : '2.6.17';
-      await migration.run(pool);
   }
+
+  return VERSIONED_MIGRATIONS.filter(function (migration) {
+    return compareVersions(migration.version, effectiveCurrentVersion) > 0 && compareVersions(migration.version, targetVersion) <= 0;
+  });
+}
+
+async function runMigrations(pool, options) {
+  // Only run migrations that are newer than the installed schema version and not beyond the app version.
+  const pendingMigrations = await getPendingMigrations(pool, options);
+
+  for (const migration of pendingMigrations) {
+    await migration.run(pool);
   }
 }
 
 module.exports = {
   appVersion: appVersion,
-  runMigrations: runMigrations
+  getPendingMigrations: getPendingMigrations,
+  runMigrations: runMigrations,
+  detectSchemaVersion: detectSchemaVersion,
+  recordSchemaVersion: recordSchemaVersion,
+  compareVersions: compareVersions
 };

src/player-bridge/index.js

@@ -532,12 +532,6 @@ async function start() {
         return res.status(400).json({ error: 'Device ID is required.' });
       }
 
-      logBridge('Forwarding media upload to player', {
-        deviceId: deviceId,
-        relativePath: relativePath,
-        contentLength: Buffer.isBuffer(req.body) ? req.body.length : 0
-      });
-
       const bodyBuffer = Buffer.isBuffer(req.body) ? req.body : Buffer.from(req.body || '');
       const response = await sendPlayerCommand({
         command: 'media-put',
@@ -545,13 +539,6 @@ async function start() {
         bodyBase64: bodyBuffer.toString('base64')
       }, deviceId);
 
-      logBridge('Player media upload completed', {
-        deviceId: deviceId,
-        relativePath: relativePath,
-        ok: Boolean(response && response.ok),
-        status: response && response.status ? response.status : null
-      });
-
       res.status(response.status || (response.ok ? 200 : 502)).json(response);
     } catch (error) {
       logBridge('Player media upload failed', {
@@ -574,23 +561,11 @@ async function start() {
         return res.status(400).json({ error: 'Device ID is required.' });
       }
 
-      logBridge('Forwarding media delete to player', {
-        deviceId: deviceId,
-        relativePath: relativePath
-      });
-
       const response = await sendPlayerCommand({
         command: 'media-delete',
         relativePath: relativePath
       }, deviceId);
 
-      logBridge('Player media delete completed', {
-        deviceId: deviceId,
-        relativePath: relativePath,
-        ok: Boolean(response && response.ok),
-        status: response && response.status ? response.status : null
-      });
-
       res.status(response.status || (response.ok ? 200 : 502)).json(response);
     } catch (error) {
       logBridge('Player media delete failed', {

src/player.js

@@ -252,10 +252,6 @@ async function start() {
         if (!filePath) {
           response.error = 'Invalid media path.';
         } else {
-          console.info('[player] Removing media file', {
-            relativePath: relativePath,
-            filePath: filePath
-          });
           try {
             await fs.promises.unlink(filePath);
           } catch (error) {
@@ -264,10 +260,6 @@ async function start() {
             }
           }
           response.ok = true;
-          console.info('[player] Media file removed', {
-            relativePath: relativePath,
-            filePath: filePath
-          });
         }
       } else if (['refresh', 'reload', 'redirect', 'pause', 'blackout', 'previous', 'next', 'setclientname'].indexOf(command) !== -1) {
         const screenSlug = String(payload.screenSlug || payload.slug || '').trim();
@@ -467,9 +459,6 @@ async function start() {
         }
 
         if (parsedMessage && String(parsedMessage.type || '').trim() === 'registered') {
-          console.info('[player] Bridge registration acknowledged', {
-            playerIdentifier: PLAYER_DEVICE_ID
-          });
           sendHeartbeat();
           return;
         }

src/player/onboarding/index.js

@@ -128,8 +128,18 @@ async function commitDeviceBinding(pool, deviceId, clientName, screenSlug, isNam
     }
 
     await pool.query(
-      'INSERT INTO d_onboarding_devices (device_id, client_name, screen_id) VALUES (?, ?, ?) ON DUPLICATE KEY UPDATE client_name = VALUES(client_name), screen_id = VALUES(screen_id), modified_at = CURRENT_TIMESTAMP',
+      `UPDATE d_onboarding_devices
-      [normalizedDeviceId, normalizedClientName, screen.id]
+          SET client_name = ?, screen_id = ?, modified_at = CURRENT_TIMESTAMP
+        WHERE device_id = ?`,
+      [normalizedClientName, screen.id, normalizedDeviceId]
+    );
+    await pool.query(
+      `INSERT INTO d_onboarding_devices (device_id, client_name, screen_id)
+       SELECT ?, ?, ?
+        WHERE NOT EXISTS (
+          SELECT 1 FROM d_onboarding_devices WHERE device_id = ?
+        )`,
+      [normalizedDeviceId, normalizedClientName, screen.id, normalizedDeviceId]
     );
 
     return getOnboardingStatus(pool, normalizedDeviceId);

src/player/player-client-name.script.html

@@ -23,7 +23,12 @@
   function getOnboardingDeviceId() {
     try {
       var storedDeviceId = getSessionStorageItem(onboardingDeviceIdStorageKey);
+      if (storedDeviceId) {
         return String(storedDeviceId || '').trim();
+      }
+      var nextDeviceId = window.crypto && window.crypto.randomUUID ? window.crypto.randomUUID() : 'device-' + Date.now() + '-' + Math.random().toString(16).slice(2);
+      setSessionStorageItem(onboardingDeviceIdStorageKey, nextDeviceId);
+      return String(nextDeviceId || '').trim();
     } catch (_error) {
       return '';
     }

src/player/player-page.template.html

@@ -7,7 +7,7 @@
     <link rel="icon" type="image/png" href="/assets/favicon.png" />
     <link rel="stylesheet" href="/assets/adminlte/bootstrap-icons/css/bootstrap-icons.min.css" />
     <link rel="stylesheet" href="/assets/vendor/animate.css/animate.min.css" />
-    <link rel="stylesheet" href="/assets/css/player.css?v=36" />
+    <link rel="stylesheet" href="/assets/css/player.css?v=37" />
     {{{STYLESHEETS}}}
   </head>
   <body class="{{BODY_CLASS}}">

src/player/public/css/player.css

@@ -4,7 +4,7 @@ body {
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background: #111;
+  background: #0a0a0a;
   color: #fff;
   font-family: Arial, sans-serif;
 }
@@ -43,7 +43,7 @@ body.thumbnail-preview .player-offline-banner {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: #111;
+  background: #0a0a0a;
   position: relative;
 }
 
@@ -294,15 +294,6 @@ body.screen-blackout #app {
   display: block;
 }
 
-.slide img,
-.slide video,
-.slide iframe {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  border: 0;
-}
-
 .body {
   position: absolute;
   left: 5%;

src/player/public/js/player-page-commands.js

@@ -427,6 +427,42 @@ function normalizeBoolean(value) {
   return null;
 }
 
+function isEditableTarget(target) {
+  if (!target) {
+    return false;
+  }
+
+  if (target.isContentEditable) {
+    return true;
+  }
+
+  var tagName = String(target.tagName || '').toUpperCase();
+  return ['INPUT', 'TEXTAREA', 'SELECT', 'OPTION'].indexOf(tagName) !== -1;
+}
+
+function handlePlayerKeydown(event) {
+  if (!event || event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) {
+    return;
+  }
+
+  if (isEditableTarget(event.target)) {
+    return;
+  }
+
+  if (event.key === 'ArrowLeft') {
+    event.preventDefault();
+    navigateSlides(-1);
+    return;
+  }
+
+  if (event.key === 'ArrowRight') {
+    event.preventDefault();
+    navigateSlides(1);
+  }
+}
+
+window.addEventListener('keydown', handlePlayerKeydown);
+
 // Move to the previous or next active slide.
 function navigateSlides(offset) {
   const manualSlides = getCurrentActiveSlides();

src/player/public/js/player-page-playback.js

@@ -70,6 +70,7 @@ function applyPendingPlaylistUpdate() {
   if (!pendingPlaylistUpdate) {
     return false;
   }
+  var nextIndex = Number(index || 0);
   slides = pendingPlaylistUpdate.slides;
   currentPlaylistSignature = pendingPlaylistUpdate.signature;
   currentPlaylistFadeBetweenSlides = pendingPlaylistUpdate.fadeBetweenSlides;
@@ -80,7 +81,11 @@ function applyPendingPlaylistUpdate() {
   templateLayoutCache = Object.create(null);
   templateRenderPlanCache = Object.create(null);
   renderCacheViewportKey = window.innerWidth + 'x' + window.innerHeight;
-  index = 0;
+  const activeSlides = getCurrentActiveSlides();
+  if (!Number.isFinite(nextIndex) || nextIndex < 0) {
+    nextIndex = 0;
+  }
+  index = activeSlides.length ? Math.min(nextIndex, activeSlides.length - 1) : 0;
   logDebug('Applied updated playlist on slide transition.');
   return true;
 }
@@ -184,6 +189,15 @@ function refresh() {
       const nextActiveSlides = getActiveSlidesFrom(nextSlides);
       const nextFadeBetweenSlides = Boolean(data && data.playlist && data.playlist.fade_between_slides);
       const nextSkipUnavailableRtmp = Boolean(data && data.playlist && data.playlist.skip_unavailable_rtmp);
+      if (window.initialData && typeof window.initialData === 'object') {
+        window.initialData.screen = data.screen || window.initialData.screen || null;
+        window.initialData.playlist = data.playlist || null;
+        window.initialData.slides = nextSlides;
+        window.initialData.rssFeeds = Array.isArray(data.rssFeeds) ? data.rssFeeds : [];
+        window.initialData.apiSources = Array.isArray(data.apiSources) ? data.apiSources : [];
+        window.initialData.timetableGroups = Array.isArray(data.timetableGroups) ? data.timetableGroups : [];
+        window.initialData.revision = nextSignature;
+      }
       savePlaylistSnapshot({
         slides: nextSlides,
         signature: nextSignature,

src/player/public/js/player-page-rendering.js

@@ -4,6 +4,14 @@ function sanitizeFontFamily(value) {
   return String(value || '').replace(/[^a-zA-Z0-9 ,\"-]/g, '').trim();
 }
 
+function normalizeStyleAttributeValue(value) {
+  return String(value || '')
+    .replace(/"/g, '"')
+    .replace(/'/g, "'")
+    .replace(/"/g, '"')
+    .replace(/'/g, "'");
+}
+
 // Clamp font size to the supported range.
 function sanitizeFontSize(value) {
   return Math.max(8, Number(value || 0) || 24);
@@ -334,7 +342,7 @@ function setPlayerCanvasDimensions(canvasWidth, canvasHeight) {
   document.documentElement.style.setProperty('--player-canvas-height', height + 'px');
 }
 
-const ALLOWED_RICH_TEXT_TAGS = ['a', 'b', 'blockquote', 'br', 'code', 'div', 'em', 'figure', 'figcaption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'li', 'ol', 'p', 'pre', 'span', 'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'];
+const ALLOWED_RICH_TEXT_TAGS = ['a', 'b', 'blockquote', 'br', 'code', 'col', 'colgroup', 'div', 'em', 'figure', 'figcaption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'li', 'ol', 'p', 'pre', 'span', 'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'];
 
 function sanitizeRichTextAttributes(tagName, attrText) {
   const allowedAttributes = {
@@ -349,14 +357,19 @@ function sanitizeRichTextAttributes(tagName, attrText) {
     h4: ['class', 'style'],
     h5: ['class', 'style'],
     h6: ['class', 'style'],
+    img: ['src', 'alt', 'title', 'width', 'height', 'class', 'style', 'loading', 'decoding'],
+    col: ['class', 'style', 'span', 'width'],
+    colgroup: ['class', 'style', 'span'],
     li: ['class', 'style'],
     ol: ['class', 'style', 'start'],
     p: ['class', 'style'],
     pre: ['class', 'style'],
     span: ['class', 'style'],
     table: ['class', 'style'],
+    tbody: ['class', 'style'],
     td: ['class', 'style', 'colspan', 'rowspan'],
     th: ['class', 'style', 'colspan', 'rowspan', 'scope'],
+    thead: ['class', 'style'],
     tr: ['class', 'style'],
     ul: ['class', 'style']
   };
@@ -365,6 +378,14 @@ function sanitizeRichTextAttributes(tagName, attrText) {
     return '';
   }
 
+  if (tagName === 'img') {
+    const srcMatch = String(attrText || '').match(/\bsrc\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>/=`]+))/i);
+    const srcValue = srcMatch ? String(srcMatch[2] !== undefined ? srcMatch[2] : srcMatch[3] !== undefined ? srcMatch[3] : srcMatch[4] !== undefined ? srcMatch[4] : '').trim() : '';
+    if (!srcValue || !/^(?:https?:\/\/|\/media\/|\/assets\/|\/[^/]|data:image\/)/i.test(srcValue)) {
+      return '';
+    }
+  }
+
   const attrs = [];
   String(attrText || '').replace(/([a-zA-Z0-9:-]+)(?:\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>/=`]+)))?/g, (_full, key, _valuePart, doubleQuoted, singleQuoted, bareValue) => {
     const lowerKey = String(key || '').toLowerCase();
@@ -388,7 +409,7 @@ function sanitizeRichTextAttributes(tagName, attrText) {
         return '';
       }
     }
-    attrs.push(' ' + lowerKey + '="' + escapeHtml(value) + '"');
+    attrs.push(' ' + lowerKey + '="' + escapeHtml(lowerKey === 'style' ? normalizeStyleAttributeValue(value) : value) + '"');
     return '';
   });
 

src/player/regions/html.js

@@ -2,16 +2,49 @@
 
 var registry = window.pulsePlayerRegionTypes;
 
+function normalizeRenderableValue(value) {
+  if (value && typeof value === 'object') {
+    if (value.value !== undefined) {
+      return normalizeRenderableValue(value.value);
+    }
+    if (value.text !== undefined) {
+      return normalizeRenderableValue(value.text);
+    }
+    if (value.html !== undefined) {
+      return normalizeRenderableValue(value.html);
+    }
+    if (value.content !== undefined) {
+      return normalizeRenderableValue(value.content);
+    }
+    return '';
+  }
+
+  return String(value === undefined || value === null ? '' : value);
+}
+
+function buildHtmlDocument(html) {
+  var raw = String(html || '').trim();
+  if (!raw) {
+    return '';
+  }
+
+  if (/^<!doctype\b/i.test(raw) || /^<html\b/i.test(raw)) {
+    return raw;
+  }
+
+  return '<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + raw + '</body></html>';
+}
+
 function renderHtmlRegionContent(value) {
-  var html = String(value || '').trim();
+  var html = normalizeRenderableValue(value).trim();
   if (!html) {
     return '';
   }
-  return '<iframe class="template-region-html-frame" sandbox="" scrolling="no" srcdoc="<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + escapeHtml(html) + '</body></html>" title="HTML region" loading="eager"></iframe>';
+  return '<iframe class="template-region-html-frame" sandbox="" scrolling="no" srcdoc="' + escapeHtml(buildHtmlDocument(html)) + '" title="HTML region" loading="eager" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe>';
 }
 
 function renderHtmlRegion(region, regionContent) {
-  return '<div class="template-region html" style="' + region.baseStyle + '">' + renderHtmlRegionContent(regionContent.value || '') + '</div>';
+  return '<div class="template-region html" style="' + region.baseStyle + '">' + renderHtmlRegionContent(regionContent && regionContent.value !== undefined ? regionContent.value : '') + '</div>';
 }
 
 registry.register('html', {

src/player/regions/time-date.js

@@ -1,6 +1,7 @@
 // Time/date region rendering and live updates.
 
 var registry = window.pulsePlayerRegionTypes;
+var placeholderUtils = window.placeholderUtils || {};
 var DEFAULT_FORMAT = '{{hh}}:{{mm}}';
 var DEFAULT_STYLE = {
   font_family: 'Arial',
@@ -9,15 +10,6 @@ var DEFAULT_STYLE = {
 };
 var timeDateFormatterCache = Object.create(null);
 
-function escapeHtml(value) {
-  return String(value === undefined || value === null ? '' : value)
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
-}
-
 function sanitizeTagAttributes(tagName, attrText) {
   var allowedAttributes = {
     a: ['href', 'title', 'target', 'rel', 'class', 'style'],
@@ -133,7 +125,7 @@ function resolveTimeZone(value) {
   }
 }
 
-function getFormatter(key, options) {
+function getTimeDateFormatter(key, options) {
   if (!timeDateFormatterCache[key]) {
     timeDateFormatterCache[key] = new Intl.DateTimeFormat('en-GB', options);
   }
@@ -141,10 +133,10 @@ function getFormatter(key, options) {
   return timeDateFormatterCache[key];
 }
 
-function getFormattedParts(timeZone, date) {
+function getTimeDateFormattedParts(timeZone, date) {
   var targetDate = date instanceof Date ? date : new Date();
   var resolvedTimeZone = resolveTimeZone(timeZone);
-  var numericParts = getFormatter('numeric:' + resolvedTimeZone, {
+  var numericParts = getTimeDateFormatter('numeric:' + resolvedTimeZone, {
     timeZone: resolvedTimeZone,
     hour12: false,
     hour: '2-digit',
@@ -154,29 +146,29 @@ function getFormattedParts(timeZone, date) {
     month: '2-digit',
     year: 'numeric'
   }).formatToParts(targetDate);
-  var weekdayLong = getFormatter('weekday-long:' + resolvedTimeZone, {
+  var weekdayLong = getTimeDateFormatter('weekday-long:' + resolvedTimeZone, {
     timeZone: resolvedTimeZone,
     weekday: 'long'
   }).formatToParts(targetDate);
-  var weekdayShort = getFormatter('weekday-short:' + resolvedTimeZone, {
+  var weekdayShort = getTimeDateFormatter('weekday-short:' + resolvedTimeZone, {
     timeZone: resolvedTimeZone,
     weekday: 'short'
   }).formatToParts(targetDate);
-  var monthLong = getFormatter('month-long:' + resolvedTimeZone, {
+  var monthLong = getTimeDateFormatter('month-long:' + resolvedTimeZone, {
     timeZone: resolvedTimeZone,
     month: 'long'
   }).formatToParts(targetDate);
-  var monthShort = getFormatter('month-short:' + resolvedTimeZone, {
+  var monthShort = getTimeDateFormatter('month-short:' + resolvedTimeZone, {
     timeZone: resolvedTimeZone,
     month: 'short'
   }).formatToParts(targetDate);
-  var ampm = getFormatter('ampm:' + resolvedTimeZone, {
+  var ampm = getTimeDateFormatter('ampm:' + resolvedTimeZone, {
     timeZone: resolvedTimeZone,
     hour12: true,
     hour: '2-digit',
     minute: '2-digit'
   }).formatToParts(targetDate);
-  var timezoneShort = getFormatter('tz-short:' + resolvedTimeZone, {
+  var timezoneShort = getTimeDateFormatter('tz-short:' + resolvedTimeZone, {
     timeZone: resolvedTimeZone,
     timeZoneName: 'short'
   }).formatToParts(targetDate);
@@ -213,27 +205,28 @@ function getFormattedParts(timeZone, date) {
     MMM: toTitleCase(getPart(monthShort, 'month')),
     MMMM: toTitleCase(getPart(monthLong, 'month')),
     a: toTitleCase(getPart(ampm, 'dayPeriod')),
-    tz: resolvedTimeZone,
+      tz: getPart(timezoneShort, 'timeZoneName'),
-    tz_short: getPart(timezoneShort, 'timeZoneName'),
+      tz_long: resolvedTimeZone,
     date: getPart(numericParts, 'year') + '-' + getPart(numericParts, 'month') + '-' + getPart(numericParts, 'day'),
     time: getPart(numericParts, 'hour') + ':' + getPart(numericParts, 'minute') + ':' + getPart(numericParts, 'second')
   };
 }
 
-function resolveTimeDatePlaceholder(values, expression) {
+function resolveTimeDateTemplatePlaceholder(values, expression) {
-  if (typeof placeholderUtils.resolvePlaceholderExpression === 'function' && typeof placeholderUtils.formatPlaceholderValue === 'function') {
+  var currentPlaceholderUtils = window.placeholderUtils || placeholderUtils || {};
-    return placeholderUtils.formatPlaceholderValue(placeholderUtils.resolvePlaceholderExpression(values, expression));
+  if (typeof currentPlaceholderUtils.resolvePlaceholderExpression === 'function' && typeof currentPlaceholderUtils.formatPlaceholderValue === 'function') {
+    return currentPlaceholderUtils.formatPlaceholderValue(currentPlaceholderUtils.resolvePlaceholderExpression(values, expression));
   }
 
   var parsed = String(expression || '').trim();
   return Object.prototype.hasOwnProperty.call(values, parsed) ? values[parsed] : '';
 }
 
-function renderTemplate(format, timeZone, date) {
+function renderTimeDateTemplate(format, timeZone, date) {
   var template = String(format || '').trim() || DEFAULT_FORMAT;
-  var values = getFormattedParts(timeZone, date);
+  var values = getTimeDateFormattedParts(timeZone, date);
   return template.replace(/\{\{\s*([a-zA-Z0-9_.()\-]+)\s*\}\}/g, function (_match, key) {
-    return String(resolveTimeDatePlaceholder(values, key) || '');
+    return String(resolveTimeDateTemplatePlaceholder(values, key, { timeZone: timeZone }) || '');
   });
 }
 
@@ -257,7 +250,7 @@ function renderTimeDateRegion(region, regionContent) {
   var fontSize = style.font_size ? 'font-size:' + Math.max(1, Math.round(Number(style.font_size))) + 'px;' : '';
   var fontColor = style.font_color ? 'color:' + escapeHtml(style.font_color) + ';' : '';
   var contentStyle = 'width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;transform:scale(' + region.canvasScale + ');transform-origin:top left;' + (fontFamily ? fontFamily : '') + fontSize + fontColor + 'white-space:pre-wrap;line-height:1.1;';
-  var renderedText = renderTemplate(format, timeZone, new Date());
+  var renderedText = renderTimeDateTemplate(format, timeZone, new Date());
   return '<div class="template-region time-date" data-time-date-format="' + escapeHtml(format) + '" data-time-date-timezone="' + escapeHtml(timeZone) + '" style="' + region.baseStyle + '"><div class="template-region-text-scale" style="' + contentStyle + '">' + renderEditorJsContent(renderedText) + '</div></div>';
 }
 
@@ -273,7 +266,7 @@ function updateTimeDateRegion(element) {
     return;
   }
 
-  scaleWrapper.innerHTML = renderEditorJsContent(renderTemplate(format, timeZone, new Date()));
+  scaleWrapper.innerHTML = renderEditorJsContent(renderTimeDateTemplate(format, timeZone, new Date()));
 }
 
 function scheduleTimeDateRegionUpdate(element) {

src/player/regions/timetable.js

@@ -2,101 +2,6 @@
 
 var registry = window.pulsePlayerRegionTypes;
 
-function escapeHtml(value) {
-  return String(value === undefined || value === null ? '' : value)
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#39;');
-}
-
-function sanitizeRichTextAttributes(tagName, attrText) {
-  var allowedAttributes = {
-    a: ['href', 'title', 'target', 'rel', 'class', 'style'],
-    blockquote: ['class', 'style'],
-    col: ['class', 'style', 'span', 'width'],
-    colgroup: ['class', 'style', 'span'],
-    div: ['class', 'style'],
-    figure: ['class', 'style'],
-    figcaption: ['class', 'style'],
-    h1: ['class', 'style'],
-    h2: ['class', 'style'],
-    h3: ['class', 'style'],
-    h4: ['class', 'style'],
-    h5: ['class', 'style'],
-    h6: ['class', 'style'],
-    li: ['class', 'style'],
-    ol: ['class', 'style', 'start'],
-    p: ['class', 'style'],
-    pre: ['class', 'style'],
-    span: ['class', 'style'],
-    table: ['class', 'style'],
-    tbody: ['class', 'style'],
-    td: ['class', 'style', 'colspan', 'rowspan'],
-    th: ['class', 'style', 'colspan', 'rowspan', 'scope'],
-    thead: ['class', 'style'],
-    tr: ['class', 'style'],
-    ul: ['class', 'style']
-  };
-  var allowed = allowedAttributes[tagName] || [];
-  if (!allowed.length) {
-    return '';
-  }
-
-  var attrs = [];
-  String(attrText || '').replace(/([a-zA-Z0-9:-]+)(?:\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>/=`]+)))?/g, function (_full, key, _valuePart, doubleQuoted, singleQuoted, bareValue) {
-    var lowerKey = String(key || '').toLowerCase();
-    if (allowed.indexOf(lowerKey) === -1) {
-      return '';
-    }
-
-    var value = doubleQuoted !== undefined ? doubleQuoted : singleQuoted !== undefined ? singleQuoted : bareValue !== undefined ? bareValue : '';
-    if (lowerKey === 'href' && /^(?:\s*javascript:|\s*data:)/i.test(String(value || ''))) {
-      return '';
-    }
-    if (lowerKey === 'style' && /(?:expression\s*\(|javascript:|url\s*\()/i.test(String(value || ''))) {
-      return '';
-    }
-    if (lowerKey === 'target') {
-      var targetValue = String(value || '').trim();
-      if (targetValue === '_blank') {
-        attrs.push(' target="_blank"');
-        if (attrs.indexOf(' rel="noreferrer noopener"') === -1) {
-          attrs.push(' rel="noreferrer noopener"');
-        }
-        return '';
-      }
-    }
-    attrs.push(' ' + lowerKey + '="' + escapeHtml(value) + '"');
-    return '';
-  });
-
-  return attrs.join('');
-}
-
-function sanitizeRichText(html) {
-  var output = String(html || '');
-  output = output.replace(/<script[\s\S]*?<\/script>/gi, '');
-  output = output.replace(/<style[\s\S]*?<\/style>/gi, '');
-  return output.replace(/<[^>]+>/g, function (tag) {
-    var match = tag.match(/^<\s*(\/?)\s*([a-z0-9]+)([\s\S]*?)(\/?)>$/i);
-    if (!match) {
-      return '';
-    }
-    var closing = Boolean(match[1]);
-    var name = String(match[2] || '').toLowerCase();
-    var allowed = ['a', 'b', 'blockquote', 'br', 'code', 'col', 'colgroup', 'div', 'em', 'figure', 'figcaption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'li', 'ol', 'p', 'pre', 'span', 'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'];
-    if (allowed.indexOf(name) === -1) {
-      return '';
-    }
-    if (closing) {
-      return '</' + name + '>';
-    }
-    return '<' + name + sanitizeRichTextAttributes(name, String(match[3] || '')) + '>';
-  });
-}
-
 function substituteTimetableVariables(html, entry) {
   var source = String(html || '');
   return source.replace(/\{\{\s*([^{}]+?)\s*\}\}/g, function (_match, expression) {
@@ -228,6 +133,7 @@ function renderRegion(region, regionContent) {
   var maxItems = regionContent && regionContent.max_items !== undefined ? regionContent.max_items : 5;
   var group = getGroupById(groupId, groups);
   var entries = getVisibleEntries(groupId, displayMode, maxItems, groups);
+  var timeZone = group && (group.timezone || group.time_zone) ? String(group.timezone || group.time_zone) : '';
   var width = Math.max(1, Math.round(Number(region && region.pixelWidth ? region.pixelWidth : 0) || 1));
   var height = Math.max(1, Math.round(Number(region && region.pixelHeight ? region.pixelHeight : 0) || 1));
   var canvasScale = Number(region && region.canvasScale ? region.canvasScale : 1) || 1;
@@ -241,6 +147,7 @@ function renderRegion(region, regionContent) {
     return '<div class="timetable-region-entry" data-timetable-entry-index="' + index + '">' + sanitizeRichText(substituteTimetableVariables(value, Object.assign({}, entry || {}, {
       start: entry && entry.start_datetime !== undefined ? entry.start_datetime : '',
       end: entry && entry.end_datetime !== undefined ? entry.end_datetime : '',
+      timeZone: timeZone,
       group: group || {},
       entries: entries,
       index: index + 1

src/player/regions/webpage.js

@@ -2,12 +2,38 @@
 
 var registry = window.pulsePlayerRegionTypes;
 
+function normalizeRenderableValue(value) {
+  if (value && typeof value === 'object') {
+    if (value.value !== undefined) {
+      return normalizeRenderableValue(value.value);
+    }
+    if (value.text !== undefined) {
+      return normalizeRenderableValue(value.text);
+    }
+    if (value.url !== undefined) {
+      return normalizeRenderableValue(value.url);
+    }
+    if (value.href !== undefined) {
+      return normalizeRenderableValue(value.href);
+    }
+    if (value.src !== undefined) {
+      return normalizeRenderableValue(value.src);
+    }
+    if (value.content !== undefined) {
+      return normalizeRenderableValue(value.content);
+    }
+    return '';
+  }
+
+  return String(value === undefined || value === null ? '' : value);
+}
+
 function renderWebpageRegion(region, regionContent) {
-  var url = String(regionContent.value || '').trim();
+  var url = normalizeRenderableValue(regionContent && regionContent.value !== undefined ? regionContent.value : '').trim();
   if (!url) {
     return '';
   }
-  return '<div class="template-region webpage" style="' + region.baseStyle + '"><iframe src="' + escapeHtml(url) + '" title="' + escapeHtml(region.label) + '" loading="eager" referrerpolicy="no-referrer" scrolling="no"></iframe></div>';
+  return '<div class="template-region webpage" style="' + region.baseStyle + '"><iframe src="' + escapeHtml(url) + '" title="' + escapeHtml(region.label) + '" loading="eager" referrerpolicy="no-referrer" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:#fff;overflow:hidden;"></iframe></div>';
 }
 
 registry.register('webpage', {

src/player/render-helpers.js

@@ -25,6 +25,14 @@ function escapeHtml(value) {
     .replace(/'/g, ''');
 }
 
+function normalizeStyleAttributeValue(value) {
+  return String(value || '')
+    .replace(/"/g, '"')
+    .replace(/'/g, "'")
+    .replace(/"/g, '"')
+    .replace(/'/g, "'");
+}
+
 function sanitizeFontFamily(value) {
   return String(value || '').replace(/[^a-zA-Z0-9 ,"-]/g, '').trim();
 }
@@ -41,7 +49,7 @@ function sanitizeTextColor(value, fallback) {
   return fallback || '#000000';
 }
 
-const ALLOWED_RICH_TEXT_TAGS = ['a', 'b', 'blockquote', 'br', 'code', 'div', 'em', 'figure', 'figcaption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'li', 'ol', 'p', 'pre', 'span', 'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'];
+const ALLOWED_RICH_TEXT_TAGS = ['a', 'b', 'blockquote', 'br', 'code', 'col', 'colgroup', 'div', 'em', 'figure', 'figcaption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'li', 'ol', 'p', 'pre', 'span', 'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'];
 
 function sanitizeRichTextAttributes(tagName, attrText) {
   const allowedAttributes = {
@@ -56,6 +64,9 @@ function sanitizeRichTextAttributes(tagName, attrText) {
     h4: ['class', 'style'],
     h5: ['class', 'style'],
     h6: ['class', 'style'],
+    img: ['src', 'alt', 'title', 'width', 'height', 'class', 'style', 'loading', 'decoding'],
+    col: ['class', 'style', 'span', 'width'],
+    colgroup: ['class', 'style', 'span'],
     li: ['class', 'style'],
     ol: ['class', 'style', 'start'],
     p: ['class', 'style'],
@@ -72,6 +83,14 @@ function sanitizeRichTextAttributes(tagName, attrText) {
     return '';
   }
 
+  if (tagName === 'img') {
+    const srcMatch = String(attrText || '').match(/\bsrc\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>/=`]+))/i);
+    const srcValue = srcMatch ? String(srcMatch[2] !== undefined ? srcMatch[2] : srcMatch[3] !== undefined ? srcMatch[3] : srcMatch[4] !== undefined ? srcMatch[4] : '').trim() : '';
+    if (!srcValue || !/^(?:https?:\/\/|\/media\/|\/assets\/|\/[^/]|data:image\/)/i.test(srcValue)) {
+      return '';
+    }
+  }
+
   const attrs = [];
   String(attrText || '').replace(/([a-zA-Z0-9:-]+)(?:\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>/=`]+)))?/g, (_full, key, _valuePart, doubleQuoted, singleQuoted, bareValue) => {
     const lowerKey = String(key || '').toLowerCase();
@@ -95,7 +114,7 @@ function sanitizeRichTextAttributes(tagName, attrText) {
         return '';
       }
     }
-    attrs.push(' ' + lowerKey + '="' + escapeHtml(value) + '"');
+    attrs.push(' ' + lowerKey + '="' + escapeHtml(lowerKey === 'style' ? normalizeStyleAttributeValue(value) : value) + '"');
     return '';
   });
 
@@ -268,12 +287,45 @@ function renderEditorJsContent(value) {
   return wrapRichTextParagraph(sanitizeRichText(raw));
 }
 
+function buildHtmlDocument(html) {
+  const raw = String(html || '').trim();
+  if (!raw) {
+    return '';
+  }
+
+  if (/^<!doctype\b/i.test(raw) || /^<html\b/i.test(raw)) {
+    return raw;
+  }
+
+  return '<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + raw + '</body></html>';
+}
+
 function renderHtmlRegionContent(value) {
-  const html = String(value || '').trim();
+  const html = normalizeRenderableValue(value).trim();
   if (!html) {
     return '<div class="template-region-placeholder">HTML</div>';
   }
-  return '<iframe class="template-region-html-frame" sandbox="" srcdoc="' + escapeHtml(html) + '" title="HTML region" loading="eager"></iframe>';
+  return '<iframe class="template-region-html-frame" sandbox="" srcdoc="' + escapeHtml(buildHtmlDocument(html)) + '" title="HTML region" loading="eager" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe>';
+}
+
+function normalizeRenderableValue(value) {
+  if (value && typeof value === 'object') {
+    if (value.value !== undefined) {
+      return normalizeRenderableValue(value.value);
+    }
+    if (value.text !== undefined) {
+      return normalizeRenderableValue(value.text);
+    }
+    if (value.html !== undefined) {
+      return normalizeRenderableValue(value.html);
+    }
+    if (value.content !== undefined) {
+      return normalizeRenderableValue(value.content);
+    }
+    return '';
+  }
+
+  return String(value === undefined || value === null ? '' : value);
 }
 
 function fitCanvasSize(canvasWidth, canvasHeight, maxWidth, maxHeight) {

src/rbac.js

@@ -140,6 +140,24 @@ const PERMISSION_SECTIONS = [
     sectionName: 'Settings',
     order: 40,
     permissions: [
+      {
+        key: 'system-settings',
+        order: 70,
+        name: 'System settings',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'View global application settings.' },
+          { key: 'update', name: 'Update', description: 'Update global application settings.' }
+        ]
+      },
+      {
+        key: 'audit-log',
+        order: 60,
+        name: 'Audit log',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'View security and session audit events.' },
+          { key: 'allow', name: 'Allow', description: 'Download filtered audit events.' }
+        ]
+      },
       {
         key: 'users',
         order: 10,
@@ -218,8 +236,8 @@ const PERMISSIONS = PERMISSION_SECTIONS.flatMap(function (section, sectionIndex)
 });
 
 const DEFAULT_ROLE = {
-  key: 'administrators',
+  key: 'super-admin',
-  name: 'Administrators',
+  name: 'Super Admin',
   description: 'Full access to the admin interface.'
 };
 

src/web.js

@@ -9,6 +9,7 @@ const common = require('./common');
 const { verifyPassword, createSessionToken, hashSessionToken, hashPassword, validatePasswordStrength } = require('#src/auth');
 const pages = require('#src/web/pages');
 const registerMiddleware = require('#src/web/middleware');
+const registerNotFoundHandler = require('#src/web/middleware/not-found');
 const { createBackgroundTaskQueue } = require('#src/web/lib/background-tasks/queue');
 const { initializeBackgroundTasks } = require('#src/web/lib/background-tasks');
 const { createDataSourceTaskService } = require('#src/web/lib/background-tasks/tasks-scheduled/data-source-refresh');
@@ -23,6 +24,8 @@ const { rbacData } = require('#src/web/lib/auth');
 const { createPlayerActionService } = require('#src/web/lib/player-actions');
 const { isClientNameAvailable, withClientNameReservation } = require('#src/data/client-name-check');
 const { createSessionService } = require('#src/web/lib/auth');
+const { fetchAppSettings } = require('#src/data/app-settings');
+const { recordRequestAuditEvent } = require('#src/data/audit-log');
 const { hasAnyPermission } = require('#src/rbac');
 const { ensureFontLibrary } = require('#src/web/lib/media/font-library');
 const {
@@ -34,7 +37,6 @@ const {
   getAuditUserId,
   getCanvasSignature,
   fetchPlaylistCanvasId,
-  fetchPlaylistCanvasSignature,
   fetchScreensByPlaylistId,
   fetchScreensBySlideId,
   fetchScreensByTemplateId,
@@ -92,6 +94,14 @@ async function start() {
   const sessionService = createSessionService({
     sessionCookieName: webConfig.sessionCookieName,
     sessionMaxAgeMs: webConfig.sessionMaxAgeMs,
+    getConfiguredSessionMaxAgeMs: async function () {
+      const settings = await fetchAppSettings(pool);
+      return Number(settings['security.session_lifetime_days']) * 24 * 60 * 60 * 1000;
+    },
+    getConfiguredMaxActiveSessions: async function () {
+      const settings = await fetchAppSettings(pool);
+      return Number(settings['security.max_active_sessions']);
+    },
     hashSessionToken: hashSessionToken,
     createSessionToken: createSessionToken
   });
@@ -99,6 +109,7 @@ async function start() {
   const createUserSession = sessionService.createUserSession;
   const clearSessionCookie = sessionService.clearSessionCookie;
   const setSessionCookie = sessionService.setSessionCookie;
+  const getSessionMaxAgeMs = sessionService.getSessionMaxAgeMs;
   const setAuthMessageCookie = sessionService.setAuthMessageCookie;
   const consumeAuthMessageCookie = sessionService.consumeAuthMessageCookie;
   const loadCurrentUser = sessionService.loadCurrentUser;
@@ -119,9 +130,11 @@ async function start() {
     common: common,
     pages: pages,
     upload: upload,
+    mediaDir: webConfig.mediaDir,
     uploadDir: webConfig.uploadsDir,
     createUserSession: createUserSession,
     setSessionCookie: setSessionCookie,
+    getSessionMaxAgeMs: getSessionMaxAgeMs,
     clearSessionCookie: clearSessionCookie,
     setAuthMessageCookie: setAuthMessageCookie,
     consumeAuthMessageCookie: consumeAuthMessageCookie,
@@ -131,6 +144,7 @@ async function start() {
     sessionCookieName: webConfig.sessionCookieName,
     formatDashboardDate: formatDashboardDate,
     getAuditUserId: getAuditUserId,
+    recordRequestAuditEvent: recordRequestAuditEvent,
     hashPassword: hashPassword,
     validatePasswordStrength: validatePasswordStrength,
     readArrayField: readArrayField,
@@ -140,7 +154,6 @@ async function start() {
     fetchScreensBySlideId: fetchScreensBySlideId,
     fetchScreensByTemplateId: fetchScreensByTemplateId,
     fetchPlaylistCanvasId: fetchPlaylistCanvasId,
-    fetchPlaylistCanvasSignature: fetchPlaylistCanvasSignature,
     getCanvasSignature: getCanvasSignature,
     normalizeScheduleMode: normalizeScheduleMode,
     parseDateTimeLocal: parseDateTimeLocal,
@@ -157,7 +170,6 @@ async function start() {
     },
     hasAnyPermission: hasAnyPermission,
     backgroundTaskQueue: backgroundTaskQueue,
-    mediaDir: webConfig.mediaDir,
     uploadSyncService: webBootstrap.uploadSyncService,
     collectUploadReferencesFromSlide: collectUploadReferencesFromSlide,
     collectUploadReferencesFromTemplate: collectUploadReferencesFromTemplate,
@@ -167,9 +179,15 @@ async function start() {
     buildDashboardState: webBootstrap.buildDashboardState
   });
 
+  registerNotFoundHandler(app);
+
   app.use(function (error, req, res, _next) {
-    console.error(error);
     const statusCode = Number(error && (error.statusCode || error.status)) || 500;
+    if (statusCode >= 500) {
+      console.error(error);
+    } else if (statusCode >= 400 && statusCode !== 404) {
+      console.warn(error && error.message ? error.message : 'Request failed.', { statusCode: statusCode });
+    }
     const isXhr = String(req.get && req.get('X-Requested-With') || '').toLowerCase() === 'xmlhttprequest';
     const wantsHtml = !isXhr && !String(req.originalUrl || '').startsWith('/api/') && (!req.accepts || req.accepts('html'));
 
@@ -207,6 +225,7 @@ async function start() {
     mediaDir: webConfig.mediaDir,
     backgroundTaskQueue: backgroundTaskQueue,
     webBootstrap: webBootstrap,
+    notifyPlayerScreens: notifyPlayerScreens,
     loadCurrentUser: loadCurrentUser,
     initializeBackgroundTasks: initializeBackgroundTasks,
     captureSlideThumbnail: captureSlideThumbnail,

src/web/lib/auth/rbac-data.js

@@ -113,7 +113,7 @@ async function fetchRolesForUser(pool, userId) {
 
 async function fetchUsersWithRoles(pool) {
   const [rows] = await pool.query(
-    `SELECT u.id, u.name, u.username, u.created_at, u.modified_at,
+    `SELECT u.id, u.name, u.username, u.account_locked, u.created_at, u.modified_at,
             COALESCE(role_data.role_names, '') AS role_names,
             COALESCE(role_data.role_ids_csv, '') AS role_ids_csv
     FROM a_users u
@@ -142,7 +142,7 @@ async function fetchUsersWithRolesPage(pool, page, pageSize, searchTerm, sortKey
   const whereSql = hasExcludedUserId ? 'WHERE u.id <> ?' : '';
   const queryArgs = hasExcludedUserId ? [excludedUserId] : [];
   const paged = await fetchPagedRows(pool, {
-    selectSql: `SELECT u.id, u.name, u.username, u.created_at, u.modified_at,
+    selectSql: `SELECT u.id, u.name, u.username, u.account_locked, u.created_at, u.modified_at,
             COALESCE(role_data.role_names, '') AS role_names,
             COALESCE(role_data.role_ids_csv, '') AS role_ids_csv
     FROM a_users u
@@ -189,7 +189,7 @@ async function fetchUsersWithRolesPage(pool, page, pageSize, searchTerm, sortKey
 
 async function fetchUserWithRoles(pool, userId) {
   const [rows] = await pool.query(
-    `SELECT u.id, u.name, u.username, u.created_at, u.modified_at,
+    `SELECT u.id, u.name, u.username, u.account_locked, u.created_at, u.modified_at,
             COALESCE(role_data.role_names, '') AS role_names,
             COALESCE(role_data.role_ids_csv, '') AS role_ids_csv
     FROM a_users u
@@ -216,6 +216,17 @@ async function fetchUserWithRoles(pool, userId) {
   });
 }
 
+async function fetchActiveUserSessions(pool, userId) {
+  const [rows] = await pool.query(
+    `SELECT id, ip_address, user_agent, created_at, last_used_at, expires_at
+     FROM a_sessions
+     WHERE user_id = ? AND expires_at > NOW()
+     ORDER BY last_used_at DESC`,
+    [userId]
+  );
+  return rows || [];
+}
+
 async function syncUserRoles(pool, userId, roleIds) {
   const uniqueRoleIds = Array.from(new Set((Array.isArray(roleIds) ? roleIds : []).map(function (roleId) {
     return Number(roleId);
@@ -225,7 +236,14 @@ async function syncUserRoles(pool, userId, roleIds) {
 
   await pool.query('DELETE FROM a_user_roles WHERE user_id = ?', [userId]);
   for (const roleId of uniqueRoleIds) {
-    await pool.query('INSERT IGNORE INTO a_user_roles (user_id, role_id, created_by, modified_by) VALUES (?, ?, ?, ?)', [userId, roleId, null, null]);
+    await pool.query(
+      `INSERT INTO a_user_roles (user_id, role_id, created_by, modified_by)
+       SELECT ?, ?, ?, ?
+        WHERE NOT EXISTS (
+          SELECT 1 FROM a_user_roles WHERE user_id = ? AND role_id = ?
+        )`,
+      [userId, roleId, null, null, userId, roleId]
+    );
   }
 }
 
@@ -238,7 +256,14 @@ async function syncRoleUsers(pool, roleId, userIds) {
 
   await pool.query('DELETE FROM a_user_roles WHERE role_id = ?', [roleId]);
   for (const userId of uniqueUserIds) {
-    await pool.query('INSERT IGNORE INTO a_user_roles (user_id, role_id, created_by, modified_by) VALUES (?, ?, ?, ?)', [userId, roleId, null, null]);
+    await pool.query(
+      `INSERT INTO a_user_roles (user_id, role_id, created_by, modified_by)
+       SELECT ?, ?, ?, ?
+        WHERE NOT EXISTS (
+          SELECT 1 FROM a_user_roles WHERE user_id = ? AND role_id = ?
+        )`,
+      [userId, roleId, null, null, userId, roleId]
+    );
   }
 }
 
@@ -257,7 +282,15 @@ async function syncRolePermissions(pool, roleId, permissionKeys) {
 
   await pool.query('DELETE FROM a_role_permissions WHERE role_id = ?', [roleId]);
   for (const permissionRow of permissionRows) {
-    await pool.query('INSERT IGNORE INTO a_role_permissions (role_id, permission_id, created_by, modified_by) VALUES (?, ?, ?, ?)', [roleId, Number(permissionRow.id), null, null]);
+    const permissionId = Number(permissionRow.id);
+    await pool.query(
+      `INSERT INTO a_role_permissions (role_id, permission_id, created_by, modified_by)
+       SELECT ?, ?, ?, ?
+        WHERE NOT EXISTS (
+          SELECT 1 FROM a_role_permissions WHERE role_id = ? AND permission_id = ?
+        )`,
+      [roleId, permissionId, null, null, roleId, permissionId]
+    );
   }
 }
 
@@ -273,6 +306,7 @@ module.exports = {
   fetchUsersWithRoles,
   fetchUsersWithRolesPage,
   fetchUserWithRoles,
+  fetchActiveUserSessions,
   syncUserRoles,
   syncRoleUsers,
   syncRolePermissions

src/web/lib/auth/session.js

@@ -34,6 +34,8 @@ function normalizeReturnToPath(value, baseUrl) {
 function createSessionService(options) {
   const sessionCookieName = String(options && options.sessionCookieName || '').trim();
   const sessionMaxAgeMs = Number(options && options.sessionMaxAgeMs);
+  const getConfiguredSessionMaxAgeMs = options && options.getConfiguredSessionMaxAgeMs;
+  const getConfiguredMaxActiveSessions = options && options.getConfiguredMaxActiveSessions;
   const hashSessionToken = options && options.hashSessionToken;
   const createSessionToken = options && options.createSessionToken;
   const authMessageCookieName = 'pulse_auth_message';
@@ -88,7 +90,20 @@ function createSessionService(options) {
   }
 
   function setSessionCookie(res, token) {
-    appendCookieHeader(res, serializeCookie(sessionCookieName, token, { maxAge: sessionMaxAgeMs }));
+    const hasRequestedMaxAge = arguments.length > 2;
+    const requestedMaxAgeMs = hasRequestedMaxAge ? Number(arguments[2]) : sessionMaxAgeMs;
+    const cookieOptions = hasRequestedMaxAge && arguments[2] === null
+      ? {}
+      : { maxAge: Number.isFinite(requestedMaxAgeMs) && requestedMaxAgeMs > 0 ? requestedMaxAgeMs : sessionMaxAgeMs };
+    appendCookieHeader(res, serializeCookie(sessionCookieName, token, cookieOptions));
+  }
+
+  async function getSessionMaxAgeMs() {
+    const configuredValue = typeof getConfiguredSessionMaxAgeMs === 'function'
+      ? await getConfiguredSessionMaxAgeMs()
+      : sessionMaxAgeMs;
+    const normalizedValue = Number(configuredValue);
+    return Number.isFinite(normalizedValue) && normalizedValue > 0 ? normalizedValue : sessionMaxAgeMs;
   }
 
   function setAuthMessageCookie(res, message) {
@@ -113,7 +128,7 @@ function createSessionService(options) {
 
     const tokenHash = hashSessionToken(token);
     const [rows] = await pool.query(
-      `SELECT s.user_id, u.id, u.name, u.username
+      `SELECT s.user_id, u.id, u.name, u.username, u.must_change_password
       FROM a_sessions s
       JOIN a_users u ON u.id = s.user_id
        WHERE s.session_hash = ?
@@ -146,6 +161,7 @@ function createSessionService(options) {
 
     await pool.query('UPDATE a_sessions SET last_used_at = CURRENT_TIMESTAMP, modified_by = ? WHERE session_hash = ?', [rows[0].user_id, tokenHash]);
     return Object.assign({}, rows[0], {
+      mustChangePassword: Boolean(rows[0].must_change_password),
       roleKeys: roleRows.map(function (row) {
         return String(row.role_key || '').trim();
       }).filter(Boolean),
@@ -155,14 +171,34 @@ function createSessionService(options) {
     });
   }
 
-  async function createUserSession(pool, userId) {
+  async function createUserSession(pool, userId, configuredMaxAgeMs, metadata) {
     const token = createSessionToken();
     const tokenHash = hashSessionToken(token);
-    const expiresAt = new Date(Date.now() + sessionMaxAgeMs);
+    const maxAgeMs = Number.isFinite(Number(configuredMaxAgeMs)) && Number(configuredMaxAgeMs) > 0
+      ? Number(configuredMaxAgeMs)
+      : await getSessionMaxAgeMs();
+    const expiresAt = new Date(Date.now() + maxAgeMs);
+    const sessionMetadata = metadata && typeof metadata === 'object' ? metadata : {};
     await pool.query(
-      'INSERT INTO a_sessions (session_hash, user_id, expires_at, created_by, modified_by) VALUES (?, ?, ?, ?, ?)',
+      'INSERT INTO a_sessions (session_hash, user_id, ip_address, user_agent, expires_at, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?)',
-      [tokenHash, userId, expiresAt, userId, userId]
+      [tokenHash, userId, String(sessionMetadata.ipAddress || '').slice(0, 255) || null, String(sessionMetadata.userAgent || '').slice(0, 512) || null, expiresAt, userId, userId]
     );
+
+    if (typeof getConfiguredMaxActiveSessions === 'function') {
+      const maxActiveSessions = Number(await getConfiguredMaxActiveSessions());
+      if (Number.isInteger(maxActiveSessions) && maxActiveSessions > 0) {
+        const [sessionRows] = await pool.query(
+          'SELECT id, session_hash FROM a_sessions WHERE user_id = ? AND expires_at > NOW() ORDER BY last_used_at ASC, created_at ASC, id ASC',
+          [userId]
+        );
+        const sessionsToRemove = (sessionRows || []).filter(function (session) {
+          return session.session_hash !== tokenHash;
+        }).slice(0, Math.max(0, sessionRows.length - maxActiveSessions));
+        for (const session of sessionsToRemove) {
+          await pool.query('DELETE FROM a_sessions WHERE id = ? AND user_id = ?', [session.id, userId]);
+        }
+      }
+    }
     return token;
   }
 
@@ -184,6 +220,7 @@ function createSessionService(options) {
     consumeAuthMessageCookie: consumeAuthMessageCookie,
     loadCurrentUser: loadCurrentUser,
     createUserSession: createUserSession,
+    getSessionMaxAgeMs: getSessionMaxAgeMs,
     requireAuth: requireAuth,
     getRequestOrigin: getRequestOrigin
   };

src/web/lib/background-tasks/queue.js

@@ -19,6 +19,9 @@ function normalizeIntervalMs(value, unit) {
   if (normalizedUnit === 'seconds') {
     return numericValue * 1000;
   }
+  if (normalizedUnit === 'hours') {
+    return numericValue * 60 * 60 * 1000;
+  }
   return numericValue * 60 * 1000;
 }
 

src/web/lib/background-tasks/tasks-adhoc/data-source-refresh.js

@@ -24,7 +24,7 @@ function registerDataSourceRefreshTask(options) {
       if (!apiSource) {
         throw new Error('API source not found.');
       }
-      return refreshApiSource(pool, common, apiSource, Number(payload.actorId) || null);
+      return refreshApiSource(pool, common, apiSource, Number(payload.actorId) || null, options.notifyPlayerScreens);
     }
 
     if (sourceType === 'rss-feed') {
@@ -32,7 +32,7 @@ function registerDataSourceRefreshTask(options) {
       if (!rssFeed) {
         throw new Error('RSS feed not found.');
       }
-      return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, Number(payload.actorId) || null);
+      return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, Number(payload.actorId) || null, options.notifyPlayerScreens);
     }
 
     throw new Error('Unsupported data source refresh task.');

src/web/lib/background-tasks/tasks-scheduled/audit-log-sweep.js

@@ -0,0 +1,34 @@
+const { fetchAppSettings } = require('#src/data/app-settings');
+
+const TASK = {
+  key: 'audit-log-sweep',
+  title: 'Audit log cleanup',
+  category: 'cleanup',
+  intervalMs: 24 * 60 * 60 * 1000
+};
+
+function registerAuditLogSweepTask(options) {
+  const backgroundTaskQueue = options && options.backgroundTaskQueue;
+  const pool = options && options.pool;
+  if (!backgroundTaskQueue || !pool) {
+    throw new Error('registerAuditLogSweepTask requires audit cleanup dependencies.');
+  }
+  backgroundTaskQueue.registerRecurringTask({
+    key: TASK.key,
+    title: TASK.title,
+    category: TASK.category,
+    intervalMs: TASK.intervalMs,
+    metadata: {},
+    run: async function () {
+      const settings = await fetchAppSettings(pool);
+      const retentionDays = Number(settings['audit.retention_days']);
+      if (!Number.isInteger(retentionDays) || retentionDays <= 0) {
+        return;
+      }
+      const cutoff = new Date(Date.now() - retentionDays * 24 * 60 * 60 * 1000);
+      await pool.query('DELETE FROM o_audit_events WHERE occurred_at < ?', [cutoff]);
+    }
+  });
+}
+
+module.exports = { registerAuditLogSweepTask };

src/web/lib/background-tasks/tasks-scheduled/data-source-refresh.js

@@ -34,7 +34,7 @@ function registerRecurringDataSourceRefreshes(options) {
           sourceName: apiSource.name
         },
         run: function () {
-          return refreshApiSource(pool, common, apiSource, null);
+          return refreshApiSource(pool, common, apiSource, null, options.notifyPlayerScreens);
         }
       });
     });
@@ -52,7 +52,7 @@ function registerRecurringDataSourceRefreshes(options) {
           sourceName: rssFeed.name
         },
         run: function () {
-          return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, null);
+          return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, null, options.notifyPlayerScreens);
         }
       });
     });
@@ -115,11 +115,11 @@ function createDataSourceTaskService(options) {
   }
 
   async function refreshApiSourceInBackground(apiSourceId, actorId) {
-    return refreshApiSource(pool, common, apiSourceId, actorId);
+    return refreshApiSource(pool, common, apiSourceId, actorId, options.notifyPlayerScreens);
   }
 
   async function refreshRssFeedInBackground(rssFeedId, feedUrl, itemLimit, actorId) {
-    return refreshRssFeed(pool, common, rssFeedId, feedUrl, itemLimit, actorId);
+    return refreshRssFeed(pool, common, rssFeedId, feedUrl, itemLimit, actorId, options.notifyPlayerScreens);
   }
 
   return {

src/web/lib/background-tasks/tasks-scheduled/expired-session-sweep.js

@@ -0,0 +1,31 @@
+const TASK = {
+  key: 'expired-session-sweep',
+  title: 'Expired session cleanup',
+  category: 'cleanup',
+  trigger: 'scheduled recurring task, hourly',
+  purpose: 'remove expired authentication sessions and their metadata.',
+  taskType: 'recurring-run',
+  intervalMs: 60 * 60 * 1000
+};
+
+function registerExpiredSessionSweepTask(options) {
+  const backgroundTaskQueue = options && options.backgroundTaskQueue;
+  const pool = options && options.pool;
+
+  if (!backgroundTaskQueue || !pool) {
+    throw new Error('registerExpiredSessionSweepTask requires the session cleanup dependencies.');
+  }
+
+  backgroundTaskQueue.registerRecurringTask({
+    key: TASK.key,
+    title: TASK.title,
+    category: TASK.category,
+    intervalMs: TASK.intervalMs,
+    metadata: {},
+    run: async function () {
+      await pool.query('DELETE FROM a_sessions WHERE expires_at <= NOW()');
+    }
+  });
+}
+
+module.exports = { registerExpiredSessionSweepTask };

src/web/lib/background-tasks/tasks-startup/data-source-refresh.js

@@ -33,13 +33,13 @@ function scheduleStartupDataSourceRefreshes(options) {
 
     (apiSourcesData.apiSources || []).forEach(function (apiSource) {
       startupSources.push(buildStartupSource('api-source', apiSource.id, apiSource.name, function () {
-        return refreshApiSource(pool, common, apiSource, null);
+        return refreshApiSource(pool, common, apiSource, null, options.notifyPlayerScreens);
       }));
     });
 
     (rssFeedsData.rssFeeds || []).forEach(function (rssFeed) {
       startupSources.push(buildStartupSource('rss-feed', rssFeed.id, rssFeed.name, function () {
-        return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, null);
+        return refreshRssFeed(pool, common, rssFeed.id, rssFeed.feed_url, rssFeed.item_limit, null, options.notifyPlayerScreens);
       }));
     });
 

src/web/lib/config.js

@@ -9,8 +9,7 @@ function createWebConfig() {
   const bridgeInternalUrl = (process.env.BRIDGE_INTERNAL_URL || 'http://player-bridge:8090').replace(/\/$/, '');
   const webInternalUrl = (process.env.WEB_INTERNAL_URL || `http://127.0.0.1:${Number(process.env.WEB_PORT || 8080)}`).replace(/\/$/, '');
   const sessionCookieName = 'digital_signage_session';
-  const sessionMaxAgeDays = Number(process.env.SESSION_MAX_AGE_DAYS || 14);
+  const sessionMaxAgeMs = 14 * 24 * 60 * 60 * 1000;
-  const sessionMaxAgeMs = (Number.isFinite(sessionMaxAgeDays) && sessionMaxAgeDays > 0 ? sessionMaxAgeDays : 14) * 24 * 60 * 60 * 1000;
   const port = Number(process.env.WEB_PORT || 8080);
   const dataSourceStartupRefreshStaggerMs = Math.max(100, Number(process.env.DATA_SOURCE_STARTUP_REFRESH_STAGGER_MS || 250));
 

src/web/lib/data-source-refresh.js

@@ -1,4 +1,112 @@
-async function refreshApiSource(pool, common, apiSourceOrId, actorId) {
+async function getAffectedScreenSlugs(connection, common, slideMatchKey, sourceId) {
+  const [slideRows] = await connection.query('SELECT id, content_json FROM c_slides WHERE content_json IS NOT NULL');
+  const slideIds = [];
+  const seenSlideIds = new Set();
+
+  slideRows.forEach(function (row) {
+    const content = typeof common.parseJsonSafe === 'function' ? common.parseJsonSafe(row.content_json) : null;
+    if (!content || typeof content !== 'object') {
+      return;
+    }
+
+    const stack = [content];
+    while (stack.length) {
+      const value = stack.pop();
+      if (!value || typeof value !== 'object') {
+        continue;
+      }
+
+      if (Array.isArray(value)) {
+        value.forEach(function (item) {
+          stack.push(item);
+        });
+        continue;
+      }
+
+      if (Object.prototype.hasOwnProperty.call(value, slideMatchKey) && Number(value[slideMatchKey]) === Number(sourceId)) {
+        const slideId = Number(row.id);
+        if (Number.isFinite(slideId) && slideId > 0 && !seenSlideIds.has(slideId)) {
+          seenSlideIds.add(slideId);
+          slideIds.push(slideId);
+        }
+        break;
+      }
+
+      Object.keys(value).forEach(function (key) {
+        stack.push(value[key]);
+      });
+    }
+  });
+
+  if (!slideIds.length) {
+    return [];
+  }
+
+  const [screenRows] = await connection.query(
+    `SELECT DISTINCT s.slug
+     FROM d_screens s
+     JOIN c_playlist_slides ps ON ps.playlist_id = s.playlist_id
+     WHERE ps.slide_id IN (?)
+       AND s.slug IS NOT NULL`,
+    [slideIds]
+  );
+
+  return screenRows.map(function (row) {
+    return String(row.slug || '').trim();
+  }).filter(Boolean);
+}
+
+async function notifyAffectedScreens(connection, common, notifyPlayerScreens, slideMatchKey, sourceId) {
+  if (typeof notifyPlayerScreens !== 'function') {
+    return;
+  }
+
+  const slugs = await getAffectedScreenSlugs(connection, common, slideMatchKey, sourceId);
+  if (!slugs.length) {
+    return;
+  }
+
+  await notifyPlayerScreens(slugs, 'refresh');
+}
+
+function normalizeSnapshotValue(value) {
+  return String(value || '').trim();
+}
+
+async function hasRssFeedChanged(connection, rssFeedId, items) {
+  const [rows] = await connection.query(
+    `SELECT item_json
+     FROM i_rss_feed_items
+     WHERE rss_feed_id = ?
+     ORDER BY position ASC, id ASC`,
+    [rssFeedId]
+  );
+
+  const currentSnapshots = (rows || []).map(function (row) {
+    return normalizeSnapshotValue(row && row.item_json);
+  });
+  const nextSnapshots = (Array.isArray(items) ? items : []).map(function (item) {
+    return normalizeSnapshotValue(JSON.stringify(item || {}));
+  });
+
+  if (currentSnapshots.length !== nextSnapshots.length) {
+    return true;
+  }
+
+  for (let index = 0; index < currentSnapshots.length; index += 1) {
+    if (currentSnapshots[index] !== nextSnapshots[index]) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+function hasApiSourceChanged(apiSource, responseDetails) {
+  return normalizeSnapshotValue(apiSource && apiSource.last_response_json) !== normalizeSnapshotValue(responseDetails && responseDetails.responseJson);
+}
+
+async function refreshApiSource(pool, common, apiSourceOrId, actorId, notifyPlayerScreens) {
   const connection = await pool.getConnection();
   try {
     const apiSource = apiSourceOrId && typeof apiSourceOrId === 'object'
@@ -25,6 +133,14 @@ async function refreshApiSource(pool, common, apiSourceOrId, actorId) {
       [new Date(), pullError || null, responseDetails ? responseDetails.responseStatus : null, responseDetails ? responseDetails.responseContentType : null, responseDetails ? responseDetails.responseJson : null, actorId, apiSource.id]
     );
     await connection.commit();
+
+    if (!pullError && hasApiSourceChanged(apiSource, responseDetails)) {
+      try {
+        await notifyAffectedScreens(connection, common, notifyPlayerScreens, 'source_id', apiSource.id);
+      } catch (notifyError) {
+        console.warn('[data-source-refresh] Unable to notify players after API source refresh ' + apiSource.id + ':', notifyError);
+      }
+    }
   } catch (error) {
     try {
       await connection.rollback();
@@ -37,7 +153,7 @@ async function refreshApiSource(pool, common, apiSourceOrId, actorId) {
   }
 }
 
-async function refreshRssFeed(pool, common, rssFeedId, feedUrl, itemLimit, actorId) {
+async function refreshRssFeed(pool, common, rssFeedId, feedUrl, itemLimit, actorId, notifyPlayerScreens) {
   const connection = await pool.getConnection();
   try {
     let updatedItems = [];
@@ -50,11 +166,20 @@ async function refreshRssFeed(pool, common, rssFeedId, feedUrl, itemLimit, actor
     }
 
     await connection.beginTransaction();
+    const rssFeedChanged = await hasRssFeedChanged(connection, rssFeedId, updatedItems);
     if (typeof common.replaceRssFeedItems === 'function') {
       await common.replaceRssFeedItems(connection, rssFeedId, updatedItems);
     }
     await connection.commit();
 
+    if (!pullError && rssFeedChanged) {
+      try {
+        await notifyAffectedScreens(connection, common, notifyPlayerScreens, 'feed_id', rssFeedId);
+      } catch (notifyError) {
+        console.warn('[data-source-refresh] Unable to notify players after RSS feed refresh ' + rssFeedId + ':', notifyError);
+      }
+    }
+
     if (pullError) {
       console.error('[data-source-refresh] RSS feed refresh completed with an error for feed ' + rssFeedId + ': ' + pullError);
     }

src/web/lib/helpers.js

@@ -198,7 +198,6 @@ module.exports = {
   getAuditUserId: getAuditUserId,
   getCanvasSignature: getCanvasSignature,
   fetchPlaylistCanvasId: fetchPlaylistCanvasId,
-  fetchPlaylistCanvasSignature: fetchPlaylistCanvasId,
   fetchScreensByPlaylistId: fetchScreensByPlaylistId,
   fetchScreensBySlideId: fetchScreensBySlideId,
   fetchScreensByTemplateId: fetchScreensByTemplateId,

src/web/lib/media/font-library.js

@@ -30,6 +30,43 @@ function normalizeText(value) {
   return String(value || '').replace(/\s+/g, ' ').trim();
 }
 
+function quoteFontFamilyToken(token) {
+  const normalizedToken = normalizeText(token);
+  if (!normalizedToken) {
+    return '';
+  }
+
+  if (normalizedToken === 'inherit' || /^[a-zA-Z0-9_-]+$/.test(normalizedToken)) {
+    return normalizedToken;
+  }
+
+  return `'${normalizedToken.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`;
+}
+
+function normalizeFontFamilyFormat(format) {
+  return String(format || '')
+    .split(',')
+    .map(quoteFontFamilyToken)
+    .filter(Boolean)
+    .join(',');
+}
+
+function normalizeFontFamilyFormatEntry(entry) {
+  const value = String(entry || '').trim();
+  if (!value) {
+    return '';
+  }
+
+  const separatorIndex = value.indexOf('=');
+  if (separatorIndex === -1) {
+    return `${value}=${normalizeFontFamilyFormat(value)}`;
+  }
+
+  const label = value.slice(0, separatorIndex).trim();
+  const format = value.slice(separatorIndex + 1).trim();
+  return `${label}=${normalizeFontFamilyFormat(format || label)}`;
+}
+
 function resolveMediaRoot(mediaRootOrUploadDir) {
   const resolved = path.resolve(String(mediaRootOrUploadDir || '').trim());
   return path.basename(resolved) === 'uploads' ? path.dirname(resolved) : resolved;
@@ -119,22 +156,19 @@ function buildFontFaceRule(entry) {
 
 function buildFontStylesheet(fonts) {
   const rules = (Array.isArray(fonts) ? fonts : [])
-    .filter(function (font) {
-      return font && font.enabled !== false;
-    })
     .map(buildFontFaceRule)
     .filter(Boolean);
   return rules.length ? `/* Managed fonts */\n\n${rules.join('\n\n')}\n` : '/* Managed fonts */\n';
 }
 
 function buildFontFamilyFormats(fonts) {
-  const formatEntries = Array.from(new Set(DEFAULT_FONT_FAMILY_FORMATS.concat((Array.isArray(fonts) ? fonts : [])
+  const formatEntries = Array.from(new Set(DEFAULT_FONT_FAMILY_FORMATS.map(normalizeFontFamilyFormatEntry).concat((Array.isArray(fonts) ? fonts : [])
     .filter(function (font) {
       return font && font.enabled !== false && normalizeText(font.family || font.name);
     })
     .map(function (font) {
       const family = normalizeText(font.family || font.name);
-      return `${family}=${family}`;
+      return `${family}=${normalizeFontFamilyFormat(family)}`;
     }))))
     .sort(function (left, right) {
       const leftLabel = String(left || '').split('=')[0];
@@ -344,7 +378,7 @@ function collectFontLibrarySyncOperations(mediaRootOrUploadDir) {
     }
 
     operations.push({
-      type: font.enabled === false ? 'delete' : 'put',
+      type: 'put',
       uploadPath: `/media/${FONT_LIBRARY_DIR_NAME}/${font.fileName}`
     });
   });
@@ -363,7 +397,10 @@ module.exports = {
   collectFontLibraryDirectoryUploadPaths: collectFontLibraryDirectoryUploadPaths,
   collectFontLibrarySyncOperations: collectFontLibrarySyncOperations,
   getFontStylesheetHref: getFontStylesheetHref,
+  buildFontStylesheet: buildFontStylesheet,
   buildFontFamilyFormats: buildFontFamilyFormats,
+  normalizeFontFamilyFormat: normalizeFontFamilyFormat,
+  normalizeFontFamilyFormatEntry: normalizeFontFamilyFormatEntry,
   isSupportedFontUpload: isSupportedFontUpload,
   getFontLibraryDir: getFontLibraryDir,
   getFontManifestPath: getFontManifestPath,

src/web/lib/media/slide-thumbnail-preview.js

@@ -30,6 +30,35 @@ function resolveAssetUrl(baseUrl, value) {
   return normalizedBaseUrl + '/' + raw.replace(/^\/+/, '');
 }
 
+function normalizeRenderableValue(value) {
+  if (value && typeof value === 'object') {
+    if (value.value !== undefined) {
+      return normalizeRenderableValue(value.value);
+    }
+    if (value.text !== undefined) {
+      return normalizeRenderableValue(value.text);
+    }
+    if (value.html !== undefined) {
+      return normalizeRenderableValue(value.html);
+    }
+    if (value.url !== undefined) {
+      return normalizeRenderableValue(value.url);
+    }
+    if (value.href !== undefined) {
+      return normalizeRenderableValue(value.href);
+    }
+    if (value.src !== undefined) {
+      return normalizeRenderableValue(value.src);
+    }
+    if (value.content !== undefined) {
+      return normalizeRenderableValue(value.content);
+    }
+    return '';
+  }
+
+  return String(value === undefined || value === null ? '' : value);
+}
+
 function getThumbnailCanvasSize(slide) {
   const template = slide && slide.template ? slide.template : null;
   return {
@@ -53,7 +82,16 @@ function buildThumbnailRegionStyle(region, canvasWidth, canvasHeight) {
 }
 
 function hasVisibleContent(html) {
-  return Boolean(String(html || '').replace(/<[^>]+>/g, '').trim());
+  var raw = String(html || '').trim();
+  if (!raw) {
+    return false;
+  }
+
+  if (/<img\b/i.test(raw)) {
+    return true;
+  }
+
+  return Boolean(raw.replace(/<[^>]+>/g, '').trim());
 }
 
 function buildTextRegionMarkup(region, regionContent) {
@@ -70,7 +108,7 @@ function buildTextRegionMarkup(region, regionContent) {
 
 function buildRegionInnerHtml(region, regionContent, baseUrl) {
   const regionType = String(regionContent.type || region.region_type || 'text').trim().toLowerCase();
-  const rawValue = regionContent && regionContent.value !== undefined ? regionContent.value : '';
+  const rawValue = normalizeRenderableValue(regionContent && regionContent.value !== undefined ? regionContent.value : '');
 
   if (regionType === 'image') {
     const src = resolveAssetUrl(baseUrl, rawValue);
@@ -89,7 +127,7 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
   if (regionType === 'webpage') {
     const src = resolveAssetUrl(baseUrl, rawValue);
     return src
-      ? '<div class="slide-preview-region slide-preview-webpage-region" style="' + region.baseStyle + '"><iframe src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'webpage') + '" loading="eager" referrerpolicy="no-referrer" scrolling="no"></iframe></div>'
+      ? '<div class="slide-preview-region slide-preview-webpage-region" style="' + region.baseStyle + '"><iframe src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'webpage') + '" loading="eager" referrerpolicy="no-referrer" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:#fff;overflow:hidden;"></iframe></div>'
       : '';
   }
 
@@ -105,7 +143,7 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
   if (regionType === 'html') {
     const html = String(rawValue || '').trim();
     return html
-      ? '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" srcdoc="<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + escapeHtml(html) + '</body></html>" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no"></iframe></div>'
+      ? '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" allowtransparency="true" srcdoc="' + escapeHtml('<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + html + '</body></html>') + '" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe></div>'
       : '';
   }
 

src/web/lib/media/slide-thumbnails.js

@@ -52,6 +52,35 @@ function resolveAssetUrl(baseUrl, value) {
   return normalizedBaseUrl + '/' + raw.replace(/^\/+/, '');
 }
 
+function normalizeRenderableValue(value) {
+  if (value && typeof value === 'object') {
+    if (value.value !== undefined) {
+      return normalizeRenderableValue(value.value);
+    }
+    if (value.text !== undefined) {
+      return normalizeRenderableValue(value.text);
+    }
+    if (value.html !== undefined) {
+      return normalizeRenderableValue(value.html);
+    }
+    if (value.url !== undefined) {
+      return normalizeRenderableValue(value.url);
+    }
+    if (value.href !== undefined) {
+      return normalizeRenderableValue(value.href);
+    }
+    if (value.src !== undefined) {
+      return normalizeRenderableValue(value.src);
+    }
+    if (value.content !== undefined) {
+      return normalizeRenderableValue(value.content);
+    }
+    return '';
+  }
+
+  return String(value === undefined || value === null ? '' : value);
+}
+
 function getCanvasSize(slide) {
   const template = slide && slide.template ? slide.template : null;
   return {
@@ -83,7 +112,16 @@ function buildThumbnailRegionStyle(region, canvasWidth, canvasHeight) {
 }
 
 function hasVisibleContent(html) {
-  return Boolean(String(html || '').replace(/<[^>]+>/g, '').trim());
+  var raw = String(html || '').trim();
+  if (!raw) {
+    return false;
+  }
+
+  if (/<img\b/i.test(raw)) {
+    return true;
+  }
+
+  return Boolean(raw.replace(/<[^>]+>/g, '').trim());
 }
 
 function buildTextRegionMarkup(region, regionContent) {
@@ -100,7 +138,7 @@ function buildTextRegionMarkup(region, regionContent) {
 
 function buildRegionInnerHtml(region, regionContent, baseUrl) {
   const regionType = String(regionContent.type || region.region_type || 'text').trim().toLowerCase();
-  const rawValue = regionContent && regionContent.value !== undefined ? regionContent.value : '';
+  const rawValue = normalizeRenderableValue(regionContent && regionContent.value !== undefined ? regionContent.value : '');
 
   if (regionType === 'image') {
     const src = resolveAssetUrl(baseUrl, rawValue);
@@ -119,7 +157,7 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
   if (regionType === 'webpage') {
     const src = resolveAssetUrl(baseUrl, rawValue);
     return src
-      ? '<div class="slide-preview-region slide-preview-webpage-region" style="' + region.baseStyle + '"><iframe src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'webpage') + '" loading="eager" referrerpolicy="no-referrer" scrolling="no"></iframe></div>'
+      ? '<div class="slide-preview-region slide-preview-webpage-region" style="' + region.baseStyle + '"><iframe src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'webpage') + '" loading="eager" referrerpolicy="no-referrer" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:#fff;overflow:hidden;"></iframe></div>'
       : '';
   }
 
@@ -135,7 +173,7 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
   if (regionType === 'html') {
     const html = String(rawValue || '').trim();
     return html
-      ? '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" srcdoc="<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + escapeHtml(html) + '</body></html>" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no"></iframe></div>'
+      ? '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" allowtransparency="true" srcdoc="' + escapeHtml('<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + html + '</body></html>') + '" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe></div>'
       : '';
   }
 

src/web/lib/media/upload-sync.js

@@ -959,9 +959,29 @@ function createUploadSyncService(options) {
 
       if (operation.previousUploadRefs.length) {
         const nextUploadRefSet = new Set(operation.nextUploadRefs);
-        await removeUnusedUploadFiles(pool, operation.localUploadDir, operation.previousUploadRefs.filter(function (reference) {
+        const removedUploadRefs = operation.previousUploadRefs.filter(function (reference) {
           return !nextUploadRefSet.has(reference);
-        }));
+        });
+        for (let i = 0; i < removedUploadRefs.length; i += 1) {
+          const removedUploadRef = removedUploadRefs[i];
+          const referenceCount = await countUploadReferences(pool, removedUploadRef);
+          if (referenceCount > 0) {
+            continue;
+          }
+
+          const deleted = await removeUploadFileFromPlayer(removedUploadRef, operation.localUploadDir, taskPayload.playerInternalBaseUrl, taskPayload.playerIdentifier);
+          if (!deleted) {
+            queuePlayerUploadSync({
+              type: 'delete',
+              uploadPath: removedUploadRef,
+              uploadDir: operation.localUploadDir,
+              playerIdentifier: taskPayload.playerIdentifier,
+              playerInternalBaseUrl: taskPayload.playerInternalBaseUrl,
+              metadata: playerMetadata
+            });
+          }
+        }
+        await removeUnusedUploadFiles(pool, operation.localUploadDir, removedUploadRefs);
       }
 
       if (operation.refreshScreenSlugs.length) {

src/web/lib/web-startup.js

@@ -22,6 +22,7 @@ async function initializeWebServer(options) {
     pool: pool,
     common: common,
     backgroundTaskQueue: backgroundTaskQueue,
+    notifyPlayerScreens: options && options.notifyPlayerScreens ? options.notifyPlayerScreens : null,
     uploadSyncService: webBootstrap.uploadSyncService,
     captureSlideThumbnail: captureSlideThumbnail,
     mediaDir: mediaDir,

src/web/middleware.js

@@ -33,6 +33,11 @@ module.exports = function registerMiddleware(app, deps) {
       return next();
     }
 
-    return requireAuth(req, res, next);
+    return requireAuth(req, res, function () {
+      if (req.currentUser && req.currentUser.mustChangePassword && req.path !== '/account' && req.path !== '/account/password' && req.path !== '/account/sessions/revoke' && req.path !== '/logout') {
+        return res.redirect('/account?message=' + encodeURIComponent('Please change your password before continuing.'));
+      }
+      next();
+    });
   });
 };

src/web/middleware/not-found.js

@@ -0,0 +1,9 @@
+// Forward unmatched requests to the shared error-page handler.
+
+module.exports = function registerNotFoundHandler(app) {
+  app.use(function (_req, _res, next) {
+    const error = new Error('Page not found.');
+    error.statusCode = 404;
+    next(error);
+  });
+};

src/web/pages/index.js

@@ -9,6 +9,8 @@ function routePath(...segments) {
 module.exports = {
   renderLoginPage: require(routePath('auth', 'login')),
   renderAccountPage: require(routePath('account', 'password')),
+  renderSettingsPage: require(routePath('settings', 'index')),
+  renderAboutPage: require(routePath('settings', 'about', 'index')),
   renderUsersPage: require(routePath('settings', 'users', 'list')),
   renderUsersAddPage: require(routePath('settings', 'users', 'add')),
   renderUsersEditPage: require(routePath('settings', 'users', 'edit')),

src/web/public/css/theme-custom.css

@@ -163,6 +163,37 @@
   opacity: 0.8;
 }
 
+.settings-nav-card {
+  position: sticky;
+  top: 1rem;
+}
+
+.settings-section-card h4.text-uppercase {
+  color: var(--bs-emphasis-color) !important;
+  font-size: 0.86rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  margin-top: 0.25rem;
+}
+
+.settings-audit-retention-input {
+  max-width: 18rem;
+}
+
+.settings-audit-category-label {
+  color: var(--bs-secondary-color);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+@media (max-width: 991.98px) {
+  .settings-nav-card {
+    position: static;
+  }
+}
+
 .card {
   box-shadow: none;
 }
@@ -224,6 +255,39 @@
 .template-preview-card .btn-group {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
+.audit-change-list {
+  display: grid;
+  padding: 0.08rem 0.3rem;
+  border-radius: 0.2rem;
+  gap: 0.2rem;
+  min-width: 18rem;
+}
+.audit-change-row {
+  display: grid;
+  grid-template-columns: minmax(8rem, 0.7fr) minmax(5rem, 1fr) auto minmax(5rem, 1fr);
+  background: var(--bs-danger-bg-subtle);
+  gap: 0.35rem;
+  align-items: baseline;
+  font-size: 0.78rem;
+}
+  background: var(--bs-success-bg-subtle);
+.audit-change-to {
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+.audit-change-from {
+  color: var(--bs-danger-text-emphasis);
+}
+.audit-change-to {
+  color: var(--bs-success-text-emphasis);
+}
+.audit-change-from del,
+.audit-change-to ins {
+  text-decoration-thickness: 2px;
+}
+.audit-change-arrow {
+  color: var(--bs-secondary-color);
+}
   gap: 0.5rem;
 }
 
@@ -263,6 +327,12 @@
   border-bottom-width: 0;
 }
 
+.rbac-permissions-table > thead > tr > * {
+  background-color: var(--bs-tertiary-bg) !important;
+  color: var(--bs-emphasis-color) !important;
+  border-bottom-color: var(--bs-border-color) !important;
+}
+
 .template-designer-form--previewing .region-item [disabled],
 .template-designer-form--previewing .template-details-card [disabled],
 .template-designer-form--previewing .template-options-card [disabled],
@@ -405,6 +475,11 @@
   border-radius: 1rem;
   background: var(--bs-body-bg);
   box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.18);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  max-height: min(32rem, calc(100vh - 3rem));
+  overflow: hidden;
 }
 
 .announcement-type-picker__menu {
@@ -437,15 +512,61 @@
   align-items: center;
   justify-content: space-between;
   gap: 0.75rem;
-  margin-bottom: 0.75rem;
   font-size: 0.875rem;
   font-weight: 700;
 }
 
+.announcement-icon-picker__search {
+  flex: 0 0 auto;
+}
+
+.announcement-icon-picker__search .input-group-text {
+  background: var(--bs-body-bg);
+  color: var(--bs-secondary-color);
+}
+
+.announcement-icon-picker__section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-height: 0;
+}
+
+.announcement-icon-picker__section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  color: var(--bs-secondary-color);
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.announcement-icon-picker__section-count {
+  font-size: 0.7rem;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
 .announcement-icon-picker__grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr));
   gap: 0.5rem;
+  align-content: start;
+}
+
+.announcement-icon-picker__search-grid {
+  max-height: none;
+  overflow: hidden;
+  padding-right: 0;
+}
+
+.announcement-icon-picker__search-empty {
+  color: var(--bs-secondary-color);
+  font-size: 0.875rem;
+  line-height: 1.35;
 }
 
 .announcement-type-picker__grid {
@@ -742,6 +863,10 @@
   overflow: auto;
 }
 
+[data-table-pagination-card] > .card-header {
+  flex: 0 0 auto;
+}
+
 [data-table-pagination-card] > .card-footer {
   margin-top: auto;
   background: var(--bs-body-bg);
@@ -752,10 +877,54 @@
   box-shadow: none;
 }
 
+.account-lock-label-locked {
+  display: none;
+}
+
+.btn-check:checked + label .account-lock-label-unlocked {
+  display: none;
+}
+
+.btn-check:checked + label .account-lock-label-locked {
+  display: inline;
+}
+
 .admin-form-card .card-header {
   background: var(--bs-tertiary-bg);
 }
 
+.timetable-entries-table-shell {
+  overflow: hidden;
+  border-bottom-left-radius: calc(var(--bs-border-radius) - 1px);
+  border-bottom-right-radius: calc(var(--bs-border-radius) - 1px);
+}
+
+.timetable-entries-table-shell > .table-responsive {
+  margin-bottom: 0;
+}
+
+.timetable-entries-table {
+  border-collapse: collapse;
+}
+
+.timetable-entries-table > thead > tr:first-child > * {
+  border-top-width: 0;
+}
+
+.timetable-entries-table > :not(caption) > * > :first-child {
+  border-left-width: 0;
+  padding-left: 0;
+}
+
+.timetable-entries-table > :not(caption) > * > :last-child {
+  border-right-width: 0;
+  padding-right: 0;
+}
+
+.timetable-entries-table > tbody > tr:last-child > * {
+  border-bottom-width: 0;
+}
+
 .api-source-section-heading {
   display: flex;
   align-items: center;
@@ -1620,6 +1789,31 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   background: var(--bs-body-bg);
 }
 
+.slide-image-cropper-frame.is-loading > :not(.slide-image-cropper-loading-overlay) {
+  opacity: 0.22;
+  filter: saturate(0.8);
+}
+
+.slide-image-cropper-loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.72);
+  backdrop-filter: blur(1px);
+}
+
+.slide-image-cropper-frame.is-loading .slide-image-cropper-loading-overlay {
+  display: flex;
+}
+
+.slide-image-cropper-loading-spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
 .slide-image-cropper-frame img {
   display: block;
   max-width: 100%;
@@ -1657,6 +1851,10 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   white-space: nowrap;
 }
 
+#slide-image-cropper-status:empty {
+  display: none;
+}
+
 .slide-image-region-preview-box {
   display: grid;
   gap: 0;
@@ -2107,10 +2305,21 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 .template-field-actions {
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
   gap: 0.5rem;
   margin-left: auto;
 }
 
+.template-editor-size-controls {
+  flex-shrink: 0;
+}
+
+.template-editor-size-controls .btn {
+  min-width: 2rem;
+  padding-inline: 0.45rem;
+}
+
 .template-field-head strong {
   font-size: 0.95rem;
   min-width: 0;
@@ -2189,6 +2398,14 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   min-width: 0;
 }
 
+.template-field-card .editor-holder[data-editor-height] {
+  overflow: hidden;
+}
+
+.template-field-card .editor-holder .tox.tox-tinymce {
+  height: 100% !important;
+}
+
 .announcement-color-preview {
   display: flex;
   align-items: center;

src/web/public/js/admin/admin-page.js

@@ -423,19 +423,6 @@
         return true;
       }
 
-      if (submitterValue === 'close' || submitterValue === 'new') {
-        var redirectUrl = submitterValue === 'close'
-          ? String(response.url || form.dataset.asyncSaveCloseUrl || window.location.href)
-          : String(response.url || form.dataset.asyncSaveNewUrl || window.location.href);
-        window.location.replace(redirectUrl);
-        return true;
-      }
-
-      if (form.dataset && form.dataset.asyncSaveNewRedirect === 'response-url') {
-        window.location.replace(String(response.url || form.dataset.asyncSaveNewUrl || window.location.href));
-        return true;
-      }
-
       var responseText = await response.text();
       var responseDocument = null;
       try {
@@ -454,8 +441,36 @@
         });
       }
 
+      try {
+        form.dispatchEvent(new CustomEvent('web-async-save:success', {
+          bubbles: true,
+          detail: {
+            form: form,
+            response: response,
+            responseText: responseText,
+            responseDocument: responseDocument,
+            submitterValue: submitterValue
+          }
+        }));
+      } catch (_error) {
+        // Ignore event dispatch failures and continue the save flow.
+      }
+
       clearFormDirty(form);
 
+      if (submitterValue === 'close' || submitterValue === 'new') {
+        var redirectUrl = submitterValue === 'close'
+          ? String(response.url || form.dataset.asyncSaveCloseUrl || window.location.href)
+          : String(response.url || form.dataset.asyncSaveNewUrl || window.location.href);
+        window.location.replace(redirectUrl);
+        return true;
+      }
+
+      if (form.dataset && form.dataset.asyncSaveNewRedirect === 'response-url') {
+        window.location.replace(String(response.url || form.dataset.asyncSaveNewUrl || window.location.href));
+        return true;
+      }
+
       var successMessage = typeof settings.getSuccessMessage === 'function'
         ? settings.getSuccessMessage({
             form: form,
@@ -539,6 +554,39 @@
       return true;
     }
 
+    function updateFontToggleRow(form) {
+      if (!form) {
+        return false;
+      }
+
+      var row = form.closest ? form.closest('tr[data-font-toggle-row]') : null;
+      if (!row) {
+        return false;
+      }
+
+      var enabledInput = form.querySelector('input[name="enabled"]');
+      var toggleButton = form.querySelector('button[type="submit"]');
+      var statusBadge = row.querySelector('[data-font-status-badge]');
+      var isCurrentlyEnabled = String(row.getAttribute('data-font-enabled') || '').trim() === 'true';
+      var willEnable = !isCurrentlyEnabled;
+
+      if (enabledInput) {
+        enabledInput.value = isCurrentlyEnabled ? '0' : '1';
+      }
+
+      if (toggleButton) {
+        toggleButton.textContent = willEnable ? 'Disable' : 'Enable';
+      }
+
+      if (statusBadge) {
+        statusBadge.className = statusBadge.className.replace(/text-bg-(success|secondary)/g, willEnable ? 'text-bg-success' : 'text-bg-secondary');
+        statusBadge.textContent = willEnable ? 'Enabled' : 'Disabled';
+      }
+
+      row.setAttribute('data-font-enabled', willEnable ? 'true' : 'false');
+      return true;
+    }
+
     document.addEventListener('submit', function (event) {
       var form = event.target;
       if (!form || !form.hasAttribute || !form.hasAttribute('data-async-command')) {
@@ -584,6 +632,15 @@
         body: body.toString(),
         credentials: 'same-origin'
       }).then(function (response) {
+        if (!response || Number(response.status) >= 400) {
+          return;
+        }
+
+        if (/^\/settings\/fonts\/[^/]+\/toggle$/.test(actionPath)) {
+          updateFontToggleRow(form);
+          return;
+        }
+
         if (shouldReloadAfterSuccess && response && response.ok) {
           window.location.reload();
           return;

src/web/public/js/announcements/announcement-form.js

@@ -39,6 +39,63 @@ function setAnnouncementScreenSelection(isSelected) {
   });
 }
 
+function getAnnouncementActionButtonState() {
+  var actionForm = document.getElementById('announcement-action-form');
+  var visibleButton = document.querySelector('button[form="announcement-action-form"]');
+  var actionPath = actionForm ? String(actionForm.getAttribute('action') || '').trim() : '';
+  var isPlay = /\/play$/.test(actionPath);
+  var isActive = !isPlay;
+  var selectedScreenCount = document.querySelectorAll('input[name="screen_ids[]"]:checked').length;
+
+  return {
+    visibleButton: visibleButton,
+    actionForm: actionForm,
+    isActive: isActive,
+    hasTargets: selectedScreenCount > 0,
+    actionDisabled: !isActive && selectedScreenCount === 0,
+    actionLabel: isActive ? 'Stop' : 'Play',
+    actionIcon: isActive ? 'bi-stop-fill' : 'bi-play-fill',
+    actionClassName: !isActive && selectedScreenCount === 0
+      ? 'btn-outline-info'
+      : (isActive ? 'btn-outline-warning' : 'btn-info'),
+    actionDisabledTitle: !isActive && selectedScreenCount === 0
+      ? 'Select at least one screen group to play this announcement.'
+      : '',
+    actionConfirmMessage: isActive
+      ? 'Stop this announcement on the selected screens now?'
+      : 'Send this announcement to the selected screens now?'
+  };
+}
+
+function updateAnnouncementActionButtonState() {
+  var state = getAnnouncementActionButtonState();
+  if (!state.visibleButton) {
+    return;
+  }
+
+  state.visibleButton.className = state.visibleButton.className.replace(/btn-outline-(info|warning|success)|btn-info/g, state.actionClassName);
+  state.visibleButton.disabled = state.actionDisabled;
+  state.visibleButton.setAttribute('aria-disabled', state.actionDisabled ? 'true' : 'false');
+  state.visibleButton.setAttribute('title', state.actionDisabled ? state.actionDisabledTitle : state.actionConfirmMessage);
+  state.visibleButton.setAttribute('aria-label', state.actionLabel);
+
+  var icon = state.visibleButton.querySelector('i.bi');
+  if (icon) {
+    icon.className = 'bi ' + state.actionIcon + ' me-1';
+  }
+
+  var label = state.visibleButton.childNodes.length > 1 ? state.visibleButton.childNodes[state.visibleButton.childNodes.length - 1] : null;
+  if (label && label.nodeType === Node.TEXT_NODE) {
+    label.textContent = state.actionLabel;
+  } else {
+    state.visibleButton.textContent = state.actionLabel;
+  }
+
+  if (state.actionForm) {
+    state.actionForm.setAttribute('data-confirm-message', state.actionConfirmMessage);
+  }
+}
+
 function positionAnnouncementTypePicker() {
   var picker = document.querySelector('[data-announcement-type-picker]');
   var toggle = document.querySelector('[data-announcement-type-picker-toggle]');
@@ -141,125 +198,6 @@ function setAnnouncementTypeValue(typeKey) {
   updateAnnouncementTypePickerSelection();
 }
 
-function updateAnnouncementIconPreview() {
-  var iconSelect = document.getElementById('announcement-icon');
-  var preview = document.querySelector('[data-announcement-icon-preview]');
-  if (!iconSelect || !preview) {
-    return;
-  }
-
-  var selectedOption = iconSelect.options[iconSelect.selectedIndex] || null;
-  var iconKey = selectedOption ? String(selectedOption.value || '').trim().toLowerCase() : '';
-  var label = selectedOption ? String(selectedOption.textContent || selectedOption.label || iconKey).trim() : iconKey;
-
-  preview.className = 'announcement-icon-preview';
-  preview.innerHTML = '<i class="bi bi-' + iconKey + '" aria-hidden="true"></i>';
-  preview.setAttribute('aria-label', label);
-  preview.setAttribute('title', label);
-}
-
-function positionAnnouncementIconPicker() {
-  var picker = document.querySelector('[data-announcement-icon-picker]');
-  var toggle = document.querySelector('[data-announcement-icon-picker-toggle]');
-  var shell = document.querySelector('[data-announcement-icon-picker-shell]');
-  if (!picker || picker.hidden || !toggle || !shell) {
-    return;
-  }
-
-  var padding = 8;
-  var toggleRect = toggle.getBoundingClientRect();
-  var menuRect = picker.getBoundingClientRect();
-  var viewportHeight = window.innerHeight || document.documentElement.clientHeight || toggleRect.bottom;
-  var placementAbove = false;
-  var spaceBelow = viewportHeight - toggleRect.bottom - padding;
-  var spaceAbove = toggleRect.top - padding;
-
-  if (menuRect.height > spaceBelow && spaceAbove > spaceBelow) {
-    placementAbove = true;
-  }
-
-  picker.classList.toggle('is-open-above', placementAbove);
-}
-
-function closeAnnouncementIconPicker() {
-  var picker = document.querySelector('[data-announcement-icon-picker]');
-  var toggle = document.querySelector('[data-announcement-icon-picker-toggle]');
-  if (!picker) {
-    return;
-  }
-
-  picker.hidden = true;
-  picker.classList.remove('is-open-above');
-  if (toggle) {
-    toggle.setAttribute('aria-expanded', 'false');
-  }
-}
-
-function openAnnouncementIconPicker() {
-  var picker = document.querySelector('[data-announcement-icon-picker]');
-  var toggle = document.querySelector('[data-announcement-icon-picker-toggle]');
-  if (!picker) {
-    return;
-  }
-
-  picker.hidden = false;
-  if (toggle) {
-    toggle.setAttribute('aria-expanded', 'true');
-  }
-
-  if (typeof window !== 'undefined' && window.requestAnimationFrame) {
-    window.requestAnimationFrame(positionAnnouncementIconPicker);
-  } else {
-    positionAnnouncementIconPicker();
-  }
-}
-
-function updateAnnouncementIconPickerSelection() {
-  var iconSelect = document.getElementById('announcement-icon');
-  var previewButton = document.querySelector('[data-announcement-icon-picker-toggle]');
-  var picker = document.querySelector('[data-announcement-icon-picker]');
-  if (!iconSelect || !previewButton || !picker) {
-    return;
-  }
-
-  var selectedOption = iconSelect.options[iconSelect.selectedIndex] || null;
-  var selectedValue = selectedOption ? String(selectedOption.value || '').trim().toLowerCase() : '';
-  var label = selectedOption ? String(selectedOption.textContent || selectedOption.label || selectedValue).trim() : selectedValue;
-  var icon = previewButton.querySelector('[data-announcement-icon-picker-icon]');
-  var text = previewButton.querySelector('[data-announcement-icon-picker-label]');
-
-  previewButton.setAttribute('aria-label', label);
-  previewButton.setAttribute('title', label);
-  if (icon) {
-    icon.className = 'bi bi-' + selectedValue;
-  }
-  if (text) {
-    text.textContent = label;
-  }
-
-  picker.querySelectorAll('[data-announcement-icon-option]').forEach(function (button) {
-    var isSelected = String(button.getAttribute('data-icon-key') || '').trim().toLowerCase() === selectedValue;
-    button.classList.toggle('is-selected', isSelected);
-    button.setAttribute('aria-pressed', isSelected ? 'true' : 'false');
-  });
-}
-
-function setAnnouncementIconValue(iconKey) {
-  var iconSelect = document.getElementById('announcement-icon');
-  if (!iconSelect) {
-    return;
-  }
-
-  var normalized = String(iconKey || '').trim().toLowerCase();
-  if (!normalized) {
-    return;
-  }
-
-  iconSelect.value = normalized;
-  updateAnnouncementIconPreview();
-  updateAnnouncementIconPickerSelection();
-}
-
 function initAnnouncementForm() {
   var typeInput = document.getElementById('announcement-type');
   var typePickerToggle = document.querySelector('[data-announcement-type-picker-toggle]');
@@ -270,10 +208,6 @@ function initAnnouncementForm() {
   var colorPicker = document.querySelector('[data-announcement-color-picker-shell]');
   var screenSelectAll = document.querySelector('[data-announcement-screen-select-all]');
   var screenSelectNone = document.querySelector('[data-announcement-screen-select-none]');
-  var iconSelect = document.getElementById('announcement-icon');
-  var iconPickerToggle = document.querySelector('[data-announcement-icon-picker-toggle]');
-  var iconPicker = document.querySelector('[data-announcement-icon-picker]');
-  var iconPickerClose = document.querySelector('[data-announcement-icon-picker-close]');
 
   if (typeInput) {
     updateAnnouncementTypePickerSelection();
@@ -347,44 +281,16 @@ function initAnnouncementForm() {
     });
   }
 
-  if (iconSelect) {
+  document.addEventListener('web-async-save:success', function (event) {
-    iconSelect.addEventListener('change', updateAnnouncementIconPreview);
+    var detail = event && event.detail ? event.detail : null;
-    updateAnnouncementIconPreview();
+    var form = detail && detail.form ? detail.form : null;
-  }
+    if (!form || form.id !== 'announcement-form') {
-
-  if (iconPickerToggle) {
-    iconPickerToggle.addEventListener('click', function (event) {
-      event.preventDefault();
-      var isExpanded = iconPicker && !iconPicker.hidden;
-      if (isExpanded) {
-        closeAnnouncementIconPicker();
-      } else {
-        openAnnouncementIconPicker();
-      }
-    });
-  }
-
-  if (iconPickerClose) {
-    iconPickerClose.addEventListener('click', function (event) {
-      event.preventDefault();
-      closeAnnouncementIconPicker();
-    });
-  }
-
-  if (iconPicker) {
-    iconPicker.addEventListener('click', function (event) {
-      var button = event.target && event.target.closest ? event.target.closest('[data-announcement-icon-option]') : null;
-      if (!button) {
       return;
     }
 
-      event.preventDefault();
+    updateAnnouncementActionButtonState();
-      setAnnouncementIconValue(button.getAttribute('data-icon-key'));
-      closeAnnouncementIconPicker();
   });
-  }
 
-  window.addEventListener('resize', positionAnnouncementIconPicker);
   window.addEventListener('resize', positionAnnouncementTypePicker);
 
   document.addEventListener('click', function (event) {
@@ -396,20 +302,9 @@ function initAnnouncementForm() {
       }
     }
 
-    var picker = document.querySelector('[data-announcement-icon-picker]');
-    var toggle = document.querySelector('[data-announcement-icon-picker-toggle]');
-    if (!picker || picker.hidden) {
-      return;
-    }
-
-    if (picker.contains(event.target) || (toggle && toggle.contains(event.target))) {
-      return;
-    }
-
-    closeAnnouncementIconPicker();
   });
 
-  updateAnnouncementIconPickerSelection();
+  updateAnnouncementActionButtonState();
 }
 
 if (typeof document !== 'undefined') {

src/web/public/js/data-sources/timetable-group-form.js

@@ -2,14 +2,17 @@
 
 (function () {
   var form = document.getElementById('timetable-group-form');
+  var timezoneInput = document.getElementById('timetable-group-timezone');
   var body = document.querySelector('[data-timetable-entries-body]');
   var addButton = document.querySelector('[data-add-timetable-entry]');
   var template = document.getElementById('timetable-entry-row-template');
 
-  if (!form || !body || !addButton || !template) {
+  if (!form || !timezoneInput || !body || !addButton || !template) {
     return;
   }
 
+  var DEFAULT_TIME_ZONE = 'Europe/London';
+
   function markDirty() {
     form.dataset.dirty = 'true';
   }
@@ -18,43 +21,150 @@
     return String(value).padStart(2, '0');
   }
 
-  function formatDateTimeLocalValue(date) {
+  function getDefaultTimeZone() {
+    try {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone || DEFAULT_TIME_ZONE;
+    } catch (_error) {
+      return DEFAULT_TIME_ZONE;
+    }
+  }
+
+  function resolveTimeZone(value) {
+    var raw = String(value || '').trim();
+    if (!raw) {
+      return getDefaultTimeZone();
+    }
+
+    try {
+      new Intl.DateTimeFormat('en-GB', { timeZone: raw }).format(new Date());
+      return raw;
+    } catch (_error) {
+      return getDefaultTimeZone();
+    }
+  }
+
+  function parseDateTimeLocalParts(value) {
+    var raw = String(value || '').trim();
+    var match = raw.match(/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?$/);
+    if (!match) {
+      return null;
+    }
+
+    return {
+      year: Number(match[1]),
+      month: Number(match[2]),
+      day: Number(match[3]),
+      hour: Number(match[4]),
+      minute: Number(match[5]),
+      second: Number(match[6] || '0')
+    };
+  }
+
+  function getDateTimeParts(date, timeZone) {
     if (!(date instanceof Date) || Number.isNaN(date.getTime())) {
+      return null;
+    }
+
+    var resolvedTimeZone = resolveTimeZone(timeZone);
+    var parts = new Intl.DateTimeFormat('en-GB', {
+      timeZone: resolvedTimeZone,
+      hour12: false,
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit'
+    }).formatToParts(date);
+    var mapped = Object.create(null);
+
+    parts.forEach(function (part) {
+      if (part && part.type && part.type !== 'literal') {
+        mapped[part.type] = part.value;
+      }
+    });
+
+    return mapped;
+  }
+
+  function formatDateTimeLocalValue(date, timeZone) {
+    var parts = getDateTimeParts(date, timeZone);
+    if (!parts) {
       return '';
     }
 
     return [
-      String(date.getFullYear()).padStart(4, '0'),
+      String(parts.year || '').padStart(4, '0'),
       '-',
-      pad(date.getMonth() + 1),
+      pad(parts.month),
       '-',
-      pad(date.getDate()),
+      pad(parts.day),
       'T',
-      pad(date.getHours()),
+      pad(parts.hour),
       ':',
-      pad(date.getMinutes())
+      pad(parts.minute)
     ].join('');
   }
 
-  function parseUtcDateTimeLocalValue(value) {
+  function getTimeZoneOffsetMillis(date, timeZone) {
+    var parts = getDateTimeParts(date, timeZone);
+    if (!parts) {
+      return 0;
+    }
+
+    var localAsUtc = Date.UTC(
+      Number(parts.year) || 0,
+      (Number(parts.month) || 1) - 1,
+      Number(parts.day) || 1,
+      Number(parts.hour) || 0,
+      Number(parts.minute) || 0,
+      Number(parts.second) || 0,
+      0
+    );
+
+    return localAsUtc - date.getTime();
+  }
+
+  function parseDateTimeLocalAsUtc(value, timeZone) {
+    var raw = String(value || '').trim();
+    var isoDate;
+    var parts = parseDateTimeLocalParts(value);
+    if (!parts) {
+      isoDate = /(?:[zZ]|[+-]\d\d(?::?\d\d)?)$/.test(raw) ? new Date(raw) : null;
+      return isoDate && !Number.isNaN(isoDate.getTime()) ? isoDate : null;
+    }
+
+    var resolvedTimeZone = resolveTimeZone(timeZone);
+    var utcMillis = Date.UTC(parts.year, parts.month - 1, parts.day, parts.hour, parts.minute, parts.second, 0);
+    var date = new Date(utcMillis);
+    var offset = getTimeZoneOffsetMillis(date, resolvedTimeZone);
+    var adjusted = new Date(utcMillis - offset);
+    var adjustedOffset = getTimeZoneOffsetMillis(adjusted, resolvedTimeZone);
+
+    if (adjustedOffset !== offset) {
+      adjusted = new Date(utcMillis - adjustedOffset);
+    }
+
+    return Number.isNaN(adjusted.getTime()) ? null : adjusted;
+  }
+
+  function convertDateTimeLocalValue(value, sourceTimeZone, targetTimeZone) {
     var raw = String(value || '').trim();
     if (!raw) {
-      return null;
+      return '';
     }
 
-    var normalized = /(?:[zZ]|[+-]\d\d(?::?\d\d)?)$/.test(raw) ? raw : raw + 'Z';
+    var utcDate = parseDateTimeLocalAsUtc(raw, sourceTimeZone);
-    var date = new Date(normalized);
+    if (!utcDate) {
-    return Number.isNaN(date.getTime()) ? null : date;
+      return '';
     }
 
-  function parseDateTimeLocalValue(value) {
+    var resolvedTargetTimeZone = resolveTimeZone(targetTimeZone);
-    var raw = String(value || '').trim();
+    if (resolvedTargetTimeZone === 'UTC') {
-    if (!raw) {
+      return utcDate.toISOString();
-      return null;
     }
 
-    var date = new Date(raw);
+    return formatDateTimeLocalValue(utcDate, resolvedTargetTimeZone);
-    return Number.isNaN(date.getTime()) ? null : date;
   }
 
   function clearFieldValidity(input) {
@@ -82,17 +192,21 @@
   }
 
   function validateEntryRow(row) {
-    if (!row) {
+    var timezone = resolveTimeZone(timezoneInput.value);
-      return;
+    var startInput;
-    }
+    var endInput;
-
-    var startInput = row.querySelector('[name="entry_start_datetime[]"]');
-    var endInput = row.querySelector('[name="entry_end_datetime[]"]');
     var startValue;
     var endValue;
     var startDate;
     var endDate;
 
+    if (!row) {
+      return;
+    }
+
+    startInput = row.querySelector('[name="entry_start_datetime[]"]');
+    endInput = row.querySelector('[name="entry_end_datetime[]"]');
+
     clearFieldValidity(endInput);
 
     if (!startInput || !endInput) {
@@ -106,8 +220,8 @@
       return;
     }
 
-    startDate = parseDateTimeLocalValue(startValue);
+    startDate = parseDateTimeLocalAsUtc(startValue, timezone);
-    endDate = parseDateTimeLocalValue(endValue);
+    endDate = parseDateTimeLocalAsUtc(endValue, timezone);
 
     if (!startDate || !endDate) {
       return;
@@ -119,12 +233,15 @@
   }
 
   function bindRowValidation(row) {
+    var startInput;
+    var endInput;
+
     if (!row) {
       return;
     }
 
-    var startInput = row.querySelector('[name="entry_start_datetime[]"]');
+    startInput = row.querySelector('[name="entry_start_datetime[]"]');
-    var endInput = row.querySelector('[name="entry_end_datetime[]"]');
+    endInput = row.querySelector('[name="entry_end_datetime[]"]');
 
     if (!startInput || !endInput) {
       return;
@@ -142,32 +259,37 @@
     validateEntryRow(row);
   }
 
-  function toUtcDateTimeLocalValue(value) {
+  function syncRowValuesToTimeZone(row, sourceTimeZone, targetTimeZone) {
-    var localDate = new Date(String(value || '').trim());
-    return Number.isNaN(localDate.getTime()) ? '' : localDate.toISOString();
-  }
-
-  function syncRowValuesToLocal(row) {
     if (!row) {
       return;
     }
 
     ['entry_start_datetime[]', 'entry_end_datetime[]'].forEach(function (name) {
       var input = row.querySelector('[name="' + name + '"]');
-      if (!input || input.dataset.timetableTimezoneSynced === 'true') {
+      var convertedValue;
+
+      if (!input) {
         return;
       }
 
-      var localValue = formatDateTimeLocalValue(parseUtcDateTimeLocalValue(input.value));
+      convertedValue = convertDateTimeLocalValue(input.value, sourceTimeZone, targetTimeZone);
-      if (localValue) {
+      if (convertedValue) {
-        input.value = localValue;
+        input.value = convertedValue;
       }
-      input.dataset.timetableTimezoneSynced = 'true';
+    });
+  }
+
+  function syncAllRowsToTimeZone(sourceTimeZone, targetTimeZone) {
+    body.querySelectorAll('[data-timetable-entry-row]').forEach(function (row) {
+      syncRowValuesToTimeZone(row, sourceTimeZone, targetTimeZone);
+      validateEntryRow(row);
     });
   }
 
   function syncFormDataToUtc(formData) {
     var rows = body.querySelectorAll('[data-timetable-entry-row]');
+    var currentTimeZone = resolveTimeZone(timezoneInput.value);
+
     ['entry_id[]', 'entry_title[]', 'entry_short_description[]', 'entry_start_datetime[]', 'entry_end_datetime[]'].forEach(function (name) {
       formData.delete(name);
     });
@@ -182,8 +304,8 @@
       formData.append('entry_id[]', idInput ? idInput.value : '');
       formData.append('entry_title[]', titleInput ? titleInput.value : '');
       formData.append('entry_short_description[]', descriptionInput ? descriptionInput.value : '');
-      formData.append('entry_start_datetime[]', startInput ? toUtcDateTimeLocalValue(startInput.value) : '');
+      formData.append('entry_start_datetime[]', startInput ? convertDateTimeLocalValue(startInput.value, currentTimeZone, 'UTC') : '');
-      formData.append('entry_end_datetime[]', endInput ? toUtcDateTimeLocalValue(endInput.value) : '');
+      formData.append('entry_end_datetime[]', endInput ? convertDateTimeLocalValue(endInput.value, currentTimeZone, 'UTC') : '');
     });
   }
 
@@ -210,9 +332,16 @@
     markDirty();
   }
 
+  function handleTimezoneChange() {
+    var nextTimeZone = resolveTimeZone(timezoneInput.value || DEFAULT_TIME_ZONE);
+    form.dataset.timetableTimezone = nextTimeZone;
+    markDirty();
+  }
+
+  form.dataset.timetableTimezone = resolveTimeZone(timezoneInput.value || DEFAULT_TIME_ZONE);
+
   body.querySelectorAll('[data-timetable-entry-row]').forEach(function (row) {
     bindRemove(row);
-    syncRowValuesToLocal(row);
     bindRowValidation(row);
   });
 
@@ -220,5 +349,8 @@
     syncFormDataToUtc(event.formData);
   });
 
+  timezoneInput.addEventListener('change', handleTimezoneChange);
+  timezoneInput.addEventListener('input', handleTimezoneChange);
+
   addButton.addEventListener('click', addRow);
 }());

src/web/public/js/icon-picker.js

@@ -0,0 +1,111 @@
+(function () {
+  'use strict';
+
+  function initIconPicker(root) {
+    var select = root.querySelector('select');
+    var toggle = root.querySelector('[data-icon-picker-toggle]');
+    var menu = root.querySelector('[data-icon-picker-menu]');
+    var preview = root.querySelector('[data-icon-picker-preview]');
+    var label = root.querySelector('[data-icon-picker-label]');
+    var search = root.querySelector('[data-icon-picker-search]');
+    var close = root.querySelector('[data-icon-picker-close]');
+    var grid = root.querySelector('[data-icon-picker-grid]');
+    var empty = root.querySelector('[data-icon-picker-empty]');
+    var initialOptions = Array.prototype.slice.call(root.querySelectorAll('[data-icon-picker-option]'));
+
+    if (!select || !toggle || !menu || !grid) {
+      return;
+    }
+
+    function catalogOptions() {
+      return Array.prototype.slice.call(select.options).map(function (option) {
+        return { value: option.value, label: option.textContent || option.label || option.value };
+      });
+    }
+
+    function createOption(option, selectedValue) {
+      var button = document.createElement('button');
+      button.type = 'button';
+      button.className = 'announcement-icon-picker__option';
+      button.setAttribute('data-icon-picker-option', '');
+      button.setAttribute('data-icon-key', option.value);
+      button.setAttribute('data-icon-label', option.label);
+      button.setAttribute('aria-pressed', option.value === selectedValue ? 'true' : 'false');
+      button.title = option.label;
+      button.innerHTML = '<i class="bi bi-' + option.value + '" aria-hidden="true"></i><span class="visually-hidden">' + option.label + '</span>';
+      return button;
+    }
+
+    function getOptionLimit() {
+      var firstOption = grid.querySelector('[data-icon-picker-option]');
+      var gridStyle = window.getComputedStyle(grid);
+      var gap = parseFloat(gridStyle.columnGap || gridStyle.gap || '0') || 0;
+      var optionWidth = firstOption ? firstOption.getBoundingClientRect().width : 0;
+      var columns = optionWidth && grid.clientWidth
+        ? Math.max(1, Math.floor((grid.clientWidth + gap) / (optionWidth + gap)))
+        : 4;
+      return columns * 6;
+    }
+
+    function updatePreview() {
+      var option = select.options[select.selectedIndex];
+      var value = option ? option.value : '';
+      if (preview) {
+        preview.className = 'announcement-icon-picker__toggle-icon bi bi-' + value;
+      }
+      if (label) {
+        label.textContent = option ? option.textContent : 'Select an icon';
+      }
+      root.querySelectorAll('[data-icon-picker-option]').forEach(function (optionButton) {
+        var selected = optionButton.getAttribute('data-icon-key') === value;
+        optionButton.classList.toggle('is-selected', selected);
+        optionButton.setAttribute('aria-pressed', selected ? 'true' : 'false');
+      });
+    }
+
+    function render(query) {
+      var normalizedQuery = String(query || '').trim().toLowerCase();
+      var selectedValue = String(select.value || '').trim();
+      var options = normalizedQuery
+        ? catalogOptions().filter(function (option) { return (option.value + ' ' + option.label).toLowerCase().indexOf(normalizedQuery) !== -1; })
+        : initialOptions.map(function (option) { return { value: option.getAttribute('data-icon-key') || '', label: option.getAttribute('data-icon-label') || '' }; });
+      var visibleOptions = options.slice(0, getOptionLimit());
+      grid.innerHTML = '';
+      visibleOptions.forEach(function (option) { grid.appendChild(createOption(option, selectedValue)); });
+      if (empty) empty.hidden = options.length > 0;
+      updatePreview();
+    }
+
+    function closeMenu() {
+      menu.hidden = true;
+      toggle.setAttribute('aria-expanded', 'false');
+    }
+
+    toggle.addEventListener('click', function (event) {
+      event.preventDefault();
+      menu.hidden = !menu.hidden;
+      toggle.setAttribute('aria-expanded', menu.hidden ? 'false' : 'true');
+      if (!menu.hidden) {
+        render(search ? search.value : '');
+        if (search) search.focus();
+      }
+    });
+    if (close) close.addEventListener('click', function (event) { event.preventDefault(); closeMenu(); });
+    grid.addEventListener('click', function (event) {
+      var option = event.target.closest ? event.target.closest('[data-icon-picker-option]') : null;
+      if (!option) return;
+      select.value = option.getAttribute('data-icon-key') || '';
+      select.dispatchEvent(new Event('change', { bubbles: true }));
+      closeMenu();
+    });
+    if (search) search.addEventListener('input', function () { render(search.value); });
+    select.addEventListener('change', updatePreview);
+    document.addEventListener('click', function (event) {
+      if (!menu.hidden && !root.contains(event.target)) closeMenu();
+    });
+    updatePreview();
+  }
+
+  window.PulseIconPicker = { init: initIconPicker };
+  document.querySelectorAll('[data-icon-picker]').forEach(initIconPicker);
+}());

src/web/public/js/playlists/playlist-schedule.js

@@ -1665,6 +1665,7 @@
     var slidePickerSlides = [];
     var lastDurationPointerDown = null;
     var lastDurationPointerUp = null;
+    var defaultSlideDuration = Number(tbody.getAttribute('data-default-slide-duration')) || 10;
 
     if (!tbody || !form) {
       return;
@@ -1961,8 +1962,8 @@
           videoDurationSeconds: slide.videoDurationSeconds,
           disableAudio: slide.disableAudio,
           title: slide.title || 'Slide',
-          duration_seconds: 10,
+          duration_seconds: defaultSlideDuration,
-          durationSeconds: 10,
+          durationSeconds: defaultSlideDuration,
           scheduleRules: [],
           summary: 'Always visible'
         });

src/web/public/js/rbac-permissions.js

@@ -105,6 +105,13 @@
     return document.querySelector('[data-permission-row-id="' + targetId + '"]');
   }
 
+  function markPermissionFormDirty(control) {
+    var form = control && (control.form || (typeof control.closest === 'function' ? control.closest('form') : null));
+    if (form && form.dataset) {
+      form.dataset.dirty = 'true';
+    }
+  }
+
   function handleRowChange(event) {
     var checkbox = event.target && event.target.matches ? event.target : null;
     if (!checkbox || checkbox.tagName !== 'INPUT' || checkbox.type !== 'checkbox') {
@@ -162,6 +169,7 @@
 
       if (control.hasAttribute('data-permission-row-toggle')) {
         toggleRowCheckboxes(findPermissionRow(targetId));
+        markPermissionFormDirty(control);
       }
     });
 

src/web/public/js/regions/region-utils.js

@@ -28,11 +28,19 @@
       var name = String(match[2] || '').toLowerCase();
       var attrText = String(match[3] || '');
       var selfClosing = Boolean(match[4]) || name === 'br' || name === 'hr';
-      var allowed = ['a', 'b', 'blockquote', 'br', 'code', 'div', 'em', 'figure', 'figcaption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'li', 'ol', 'p', 'pre', 'span', 'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'];
+      var allowed = ['a', 'b', 'blockquote', 'br', 'code', 'col', 'colgroup', 'div', 'em', 'figure', 'figcaption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'li', 'ol', 'p', 'pre', 'span', 'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'];
       if (allowed.indexOf(name) === -1) {
         return '';
       }
 
+      if (name === 'img') {
+        var srcMatch = String(attrText || '').match(/\bsrc\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>/=`]+))/i);
+        var srcValue = srcMatch ? String(srcMatch[2] !== undefined ? srcMatch[2] : srcMatch[3] !== undefined ? srcMatch[3] : srcMatch[4] !== undefined ? srcMatch[4] : '').trim() : '';
+        if (!srcValue || !/^(?:https?:\/\/|\/media\/|\/assets\/|\/[^/]|data:image\/)/i.test(srcValue)) {
+          return '';
+        }
+      }
+
       if (closing) {
         return '</' + name + '>';
       }
@@ -42,7 +50,100 @@
   }
 
   function sanitizeRichText(html) {
-    return sanitizePreviewHtml(html);
+    var output = String(html || '');
+    output = output.replace(/<script[\s\S]*?<\/script>/gi, '');
+    output = output.replace(/<style[\s\S]*?<\/style>/gi, '');
+    return output.replace(/<[^>]+>/g, function (tag) {
+      var match = tag.match(/^<\s*(\/?)\s*([a-z0-9]+)([\s\S]*?)(\/?)>$/i);
+      if (!match) {
+        return '';
+      }
+
+      var closing = Boolean(match[1]);
+      var name = String(match[2] || '').toLowerCase();
+      var attrText = String(match[3] || '');
+      var allowed = ['a', 'b', 'blockquote', 'br', 'code', 'col', 'colgroup', 'div', 'em', 'figure', 'figcaption', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'i', 'img', 'li', 'ol', 'p', 'pre', 'span', 'strong', 'sub', 'sup', 'table', 'tbody', 'td', 'th', 'thead', 'tr', 'u', 'ul'];
+      if (allowed.indexOf(name) === -1) {
+        return '';
+      }
+
+      if (closing) {
+        return '</' + name + '>';
+      }
+
+      return '<' + name + sanitizeRichTextAttributes(name, attrText) + '>';
+    });
+  }
+
+  function sanitizeRichTextAttributes(tagName, attrText) {
+    var allowedAttributes = {
+      a: ['href', 'title', 'target', 'rel', 'class', 'style'],
+      blockquote: ['class', 'style'],
+      div: ['class', 'style'],
+      figure: ['class', 'style'],
+      figcaption: ['class', 'style'],
+      h1: ['class', 'style'],
+      h2: ['class', 'style'],
+      h3: ['class', 'style'],
+      h4: ['class', 'style'],
+      h5: ['class', 'style'],
+      h6: ['class', 'style'],
+      img: ['src', 'alt', 'title', 'width', 'height', 'class', 'style', 'loading', 'decoding'],
+      col: ['class', 'style', 'span', 'width'],
+      colgroup: ['class', 'style', 'span'],
+      li: ['class', 'style'],
+      ol: ['class', 'style', 'start'],
+      p: ['class', 'style'],
+      pre: ['class', 'style'],
+      span: ['class', 'style'],
+      table: ['class', 'style'],
+      td: ['class', 'style', 'colspan', 'rowspan'],
+      th: ['class', 'style', 'colspan', 'rowspan', 'scope'],
+      tr: ['class', 'style'],
+      ul: ['class', 'style']
+    };
+    var allowed = allowedAttributes[tagName] || [];
+    if (!allowed.length) {
+      return '';
+    }
+
+    if (tagName === 'img') {
+      var srcMatch = String(attrText || '').match(/\bsrc\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>/=`]+))/i);
+      var srcValue = srcMatch ? String(srcMatch[2] !== undefined ? srcMatch[2] : srcMatch[3] !== undefined ? srcMatch[3] : srcMatch[4] !== undefined ? srcMatch[4] : '').trim() : '';
+      if (!srcValue || !/^(?:https?:\/\/|\/media\/|\/assets\/|\/[^/]|data:image\/)/i.test(srcValue)) {
+        return '';
+      }
+    }
+
+    var attrs = [];
+    String(attrText || '').replace(/([a-zA-Z0-9:-]+)(?:\s*=\s*("([^"]*)"|'([^']*)'|([^\s"'>/=`]+)))?/g, function (_full, key, _valuePart, doubleQuoted, singleQuoted, bareValue) {
+      var lowerKey = String(key || '').toLowerCase();
+      if (allowed.indexOf(lowerKey) === -1) {
+        return '';
+      }
+
+      var value = doubleQuoted !== undefined ? doubleQuoted : singleQuoted !== undefined ? singleQuoted : bareValue !== undefined ? bareValue : '';
+      if (lowerKey === 'href' && /^(?:\s*javascript:|\s*data:)/i.test(String(value || ''))) {
+        return '';
+      }
+      if (lowerKey === 'style' && /(?:expression\s*\(|javascript:|url\s*\()/i.test(String(value || ''))) {
+        return '';
+      }
+      if (lowerKey === 'target') {
+        var targetValue = String(value || '').trim();
+        if (targetValue === '_blank') {
+          attrs.push(' target="_blank"');
+          if (attrs.indexOf(' rel="noreferrer noopener"') === -1) {
+            attrs.push(' rel="noreferrer noopener"');
+          }
+          return '';
+        }
+      }
+      attrs.push(' ' + lowerKey + '="' + escapeHtml(value) + '"');
+      return '';
+    });
+
+    return attrs.join('');
   }
 
   function sanitizeTagAttributes(tagName, attrText) {
@@ -64,6 +165,7 @@
       pre: ['class', 'style'],
       span: ['class', 'style'],
       table: ['class', 'style'],
+      img: ['src', 'alt', 'title', 'width', 'height', 'class', 'style', 'loading', 'decoding'],
       td: ['class', 'style', 'colspan', 'rowspan'],
       th: ['class', 'style', 'colspan', 'rowspan', 'scope'],
       tr: ['class', 'style'],
@@ -844,6 +946,7 @@
     escapeHtml: escapeHtml,
     sanitizePreviewHtml: sanitizePreviewHtml,
     sanitizeRichText: sanitizeRichText,
+    sanitizeRichTextAttributes: sanitizeRichTextAttributes,
     sanitizeFontFamily: sanitizeFontFamily,
     sanitizeTextColor: sanitizeTextColor,
     normalizeAcceptList: normalizeAcceptList,

src/web/public/js/regions/type/api.js

@@ -9,8 +9,8 @@
     return utils.escapeHtml ? utils.escapeHtml(value) : String(value === undefined || value === null ? '' : value);
   }
 
-  function sanitizeRichText(html) {
+  function sanitizePreviewHtml(html) {
-    return utils.sanitizeRichText ? utils.sanitizeRichText(html) : escapeHtml(html);
+    return utils.sanitizePreviewHtml ? utils.sanitizePreviewHtml(html) : escapeHtml(html);
   }
 
   function sanitizeFontFamily(value) {
@@ -128,7 +128,7 @@
       summary.push('<h3>' + escapeHtml(title) + '</h3>');
     }
     if (description) {
-      summary.push('<div>' + sanitizeRichText(description) + '</div>');
+      summary.push('<div>' + sanitizePreviewHtml(description) + '</div>');
     }
     if (!summary.length) {
       return '';
@@ -183,7 +183,7 @@
     if (!body) {
       return '';
     }
-    var renderedBody = sanitizeRichText(body);
+    var renderedBody = sanitizePreviewHtml(body);
     return renderedBody ? '<div class="template-region api" style="width:100%;height:100%;overflow:hidden;font-family:' + escapeHtml(fontFamily) + ';font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor) + ';"><div class="template-region-text-scale" style="width:100%;height:100%;overflow:hidden;">' + renderedBody + '</div></div>' : '';
   }
 
@@ -207,6 +207,12 @@
           '</div>' +
         '</div>' +
         '<div class="card-body p-3 d-grid gap-3 pb-0">' +
+          '<div class="d-flex justify-content-end">' +
+            '<div class="btn-group btn-group-sm template-editor-size-controls" role="group" aria-label="Editor size controls">' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="decrease" aria-label="Decrease editor size">-</button>' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="increase" aria-label="Increase editor size">+</button>' +
+            '</div>' +
+          '</div>' +
           '<div class="editor-holder" data-region-id="' + region.id + '">' +
             '<textarea class="editor-source" rows="10">' + escapeHtml(current.value !== undefined ? current.value : '') + '</textarea>' +
           '</div>' +
@@ -272,8 +278,18 @@
   function buildPreviewRenderContext(region, card, existingContent, sources) {
     var current = getCurrentConfig(region, existingContent || {}, sources || []);
     var editor = window.tinymce && typeof window.tinymce.get === 'function' ? window.tinymce.get('slide-editor-region-' + region.id) : null;
+    var fallbackValue = card && card.querySelector ? ((card.querySelector('textarea[name="region_text_' + region.id + '"]') || {}).value || current.value || '') : current.value;
     var content = card && card.querySelector ? {
-      value: String(editor ? editor.getContent({ format: 'html' }) : ((card.querySelector('textarea[name="region_text_' + region.id + '"]') || {}).value || current.value || '')),
+      value: String((function () {
+        if (!editor || typeof editor.getContent !== 'function') {
+          return fallbackValue;
+        }
+        try {
+          return editor.getContent({ format: 'html' });
+        } catch (_error) {
+          return fallbackValue;
+        }
+      }())),
       source_id: (card.querySelector('select[name="region_api_source_id_' + region.id + '"]') || {}).value || current.source_id,
       item_number: (card.querySelector('input[name="region_api_item_number_' + region.id + '"]') || {}).value || current.item_number,
       items_path: card.querySelector('input[name="region_api_items_path_' + region.id + '"]') ? (card.querySelector('input[name="region_api_items_path_' + region.id + '"]') || {}).value : current.items_path

src/web/public/js/regions/type/html.js

@@ -8,13 +8,49 @@
     return utils.escapeHtml ? utils.escapeHtml(value) : String(value === undefined || value === null ? '' : value);
   }
 
-  function renderPreview(value) {
+  function normalizePreviewValue(value) {
-    var content = value && typeof value === 'object' && value.value !== undefined ? value : null;
+    if (value && typeof value === 'object') {
-    var html = String(content ? content.value : value || '').trim();
+      if (value.value !== undefined) {
+        return normalizePreviewValue(value.value);
+      }
+      if (value.text !== undefined) {
+        return normalizePreviewValue(value.text);
+      }
+      if (value.html !== undefined) {
+        return normalizePreviewValue(value.html);
+      }
+      if (value.content !== undefined) {
+        return normalizePreviewValue(value.content);
+      }
+      return '';
+    }
+
+    return String(value === undefined || value === null ? '' : value);
+  }
+
+  function buildHtmlDocument(html) {
+    var raw = String(html || '').trim();
+    if (!raw) {
+      return '';
+    }
+
+    if (/^<!doctype\b/i.test(raw) || /^<html\b/i.test(raw)) {
+      return raw;
+    }
+
+    return '<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + raw + '</body></html>';
+  }
+
+  function renderPreview(region, value) {
+    var html = normalizePreviewValue(value !== undefined ? value : region).trim();
     if (!html) {
       return '<div class="slide-preview-placeholder">HTML</div>';
     }
-    return '<iframe class="slide-preview-html-frame" sandbox="" scrolling="no" srcdoc="<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + escapeHtml(html) + '</body></html>" title="HTML preview" loading="eager" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe>';
+    if (/^<!doctype\b/i.test(html) || /^<html\b/i.test(html)) {
+      return '<iframe class="slide-preview-html-frame" sandbox="" allowtransparency="true" scrolling="no" srcdoc="' + escapeHtml(buildHtmlDocument(html)) + '" title="HTML preview" loading="eager" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe>';
+    }
+
+    return '<div class="slide-preview-html-frame" style="width:100%;height:100%;overflow:hidden;background:transparent;">' + html + '</div>';
   }
 
   function renderEditorCard(context) {

src/web/public/js/regions/type/image.js

@@ -32,8 +32,8 @@
     var regionRatio = String(context.regionRatio || '1:1');
     var uploadConfig = context.uploadConfig || {};
     var uploadMaxLabel = String(uploadConfig.limitLabel || context.uploadMaxLabel || '100 MB');
-    var uploadAccept = Array.isArray(uploadConfig.accept) ? uploadConfig.accept.join(', ') : String(uploadConfig.accept || 'image/png, image/jpeg, image/gif, image/webp');
+    var uploadAccept = Array.isArray(uploadConfig.accept) ? uploadConfig.accept.join(', ') : String(uploadConfig.accept || 'image/png, image/jpeg, image/gif, image/webp, image/svg+xml');
-    var uploadHelpText = String(uploadConfig.helpText || 'PNG, JPG, GIF, or WebP');
+    var uploadHelpText = String(uploadConfig.helpText || 'PNG, JPG, GIF, WebP, or SVG');
     return registry.renderEditorCardShell({
       region: region,
       headerActions: '<span class="chip">Image</span>',
@@ -76,17 +76,31 @@
 
   function buildEditorCardContext(context) {
     var defaultConfig = context && context.uploadConfig ? context.uploadConfig : {};
+    var configuredTypes = Array.isArray(context && context.uploadMimeTypes)
+      ? context.uploadMimeTypes.filter(function (mimeType) { return String(mimeType || '').indexOf('image/') === 0; })
+      : [];
+    var accept = configuredTypes.length
+      ? configuredTypes
+      : (Array.isArray(defaultConfig.accept) ? defaultConfig.accept : ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml']);
+    var acceptLabels = accept.map(function (mimeType) {
+      var subtype = String(mimeType).split('/')[1] || '';
+      return subtype === 'jpeg' ? 'JPG' : subtype === 'svg+xml' ? 'SVG' : subtype.toUpperCase();
+    });
+    var acceptLabel = acceptLabels.length > 1
+      ? acceptLabels.slice(0, -1).join(', ') + ' or ' + acceptLabels[acceptLabels.length - 1]
+      : (acceptLabels[0] || 'supported image');
     return {
       region: context.region,
       current: String(context.current || ''),
       regionRatio: String(context.regionRatio || '1:1'),
       uploadConfig: {
-        accept: Array.isArray(defaultConfig.accept) ? defaultConfig.accept : ['image/png', 'image/jpeg', 'image/gif', 'image/webp'],
+        accept: accept,
-        limitBytes: defaultConfig.limitBytes,
+        limitBytes: defaultConfig.limitBytes || context.uploadMaxBytes,
         limitLabel: defaultConfig.limitLabel || context.uploadMaxLabel || '100 MB',
-        helpText: defaultConfig.helpText || 'PNG, JPG, GIF, or WebP'
+        helpText: defaultConfig.helpText || acceptLabel
       },
-      uploadMaxLabel: context.uploadMaxLabel || '100 MB'
+      uploadMaxLabel: context.uploadMaxLabel || '100 MB',
+      uploadMimeTypes: context.uploadMimeTypes || []
     };
   }
 
@@ -107,11 +121,18 @@
     }
 
     var uploadConfig = context.uploadConfig || {};
-    var accept = uploadConfig.accept || ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+    var accept = uploadConfig.accept || ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml'];
+    var acceptLabels = accept.map(function (mimeType) {
+      var subtype = String(mimeType).split('/')[1] || '';
+      return subtype === 'jpeg' ? 'JPG' : subtype === 'svg+xml' ? 'SVG' : subtype.toUpperCase();
+    });
+    var acceptLabel = acceptLabels.length > 1
+      ? acceptLabels.slice(0, -1).join(', ') + (acceptLabels.length > 2 ? ', or ' : ' or ') + acceptLabels[acceptLabels.length - 1]
+      : (acceptLabels[0] || 'supported image');
     var limitBytes = Number(uploadConfig.limitBytes || 100 * 1024 * 1024);
 
     if (!utils.fileMatchesAccept || !utils.fileMatchesAccept(context.file, accept)) {
-      showUploadWarning('This image region accepts PNG, JPG, GIF, or WebP files.');
+      showUploadWarning('This image region accepts ' + acceptLabel + ' files.');
       return false;
     }
 
@@ -132,10 +153,10 @@
       var defaultConfig = context && context.defaultConfig ? context.defaultConfig : {};
 
       return {
-        accept: ['image/png', 'image/jpeg', 'image/gif', 'image/webp'],
+        accept: ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml'],
-        limitBytes: defaultConfig.limitBytes,
+        limitBytes: defaultConfig.limitBytes || context.uploadMaxBytes,
         limitLabel: defaultConfig.limitLabel,
-        helpText: 'PNG, JPG, GIF, or WebP'
+        helpText: 'PNG, JPG, GIF, WebP, or SVG'
       };
     },
     renderPreview: renderPreview,

src/web/public/js/regions/type/rss.js

@@ -17,10 +17,6 @@
     return utils.sanitizePreviewHtml ? utils.sanitizePreviewHtml(html) : escapeHtml(html);
   }
 
-  function sanitizeRichText(html) {
-    return utils.sanitizeRichText ? utils.sanitizeRichText(html) : sanitizePreviewHtml(html);
-  }
-
   function sanitizeFontFamily(value) {
     return utils.sanitizeFontFamily ? utils.sanitizeFontFamily(value) : String(value || '').trim();
   }
@@ -198,7 +194,7 @@
         summaryParts.push('<h3>' + escapeHtml(item.title) + '</h3>');
       }
       if (item.description) {
-        summaryParts.push('<div>' + sanitizeRichText(item.description) + '</div>');
+        summaryParts.push('<div>' + sanitizePreviewHtml(item.description) + '</div>');
       }
       body = summaryParts.join('');
     }
@@ -206,7 +202,7 @@
     if (!body) {
       return '';
     }
-    var renderedBody = sanitizeRichText(body);
+    var renderedBody = sanitizePreviewHtml(body);
     return renderedBody ? '<div class="template-region rss" style="width:100%;height:100%;overflow:hidden;font-family:' + escapeHtml(fontFamily) + ';font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor) + ';"><div class="template-region-text-scale" style="width:100%;height:100%;overflow:hidden;">' + renderedBody + '</div></div>' : '';
   }
 
@@ -226,6 +222,12 @@
           '</div>' +
         '</div>' +
         '<div class="card-body p-3 d-grid gap-3 pb-0">' +
+          '<div class="d-flex justify-content-end">' +
+            '<div class="btn-group btn-group-sm template-editor-size-controls" role="group" aria-label="Editor size controls">' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="decrease" aria-label="Decrease editor size">-</button>' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="increase" aria-label="Increase editor size">+</button>' +
+            '</div>' +
+          '</div>' +
           '<div class="editor-holder" data-region-id="' + region.id + '">' +
             '<textarea class="editor-source" rows="10">' + escapeHtml(current.value !== undefined ? current.value : '') + '</textarea>' +
           '</div>' +
@@ -277,8 +279,18 @@
   function buildPreviewRenderContext(region, card, existingContent, feeds) {
     var current = getCurrentConfig(region, existingContent || {});
     var editor = window.tinymce && typeof window.tinymce.get === 'function' ? window.tinymce.get('slide-editor-region-' + region.id) : null;
+    var fallbackValue = card && card.querySelector ? ((card.querySelector('textarea[name="region_text_' + region.id + '"]') || {}).value || current.value || '') : current.value;
     var content = card && card.querySelector ? {
-      value: String(editor ? editor.getContent({ format: 'html' }) : ((card.querySelector('textarea[name="region_text_' + region.id + '"]') || {}).value || current.value || '')),
+      value: String((function () {
+        if (!editor || typeof editor.getContent !== 'function') {
+          return fallbackValue;
+        }
+        try {
+          return editor.getContent({ format: 'html' });
+        } catch (_error) {
+          return fallbackValue;
+        }
+      }())),
       feed_id: (card.querySelector('select[name="region_rss_feed_id_' + region.id + '"]') || {}).value || current.feed_id,
       item_number: (card.querySelector('input[name="region_rss_item_number_' + region.id + '"]') || {}).value || current.item_number
     } : current;

src/web/public/js/regions/type/text.js

@@ -54,7 +54,13 @@
             '<span class="chip">Text</span>' +
           '</div>' +
         '</div>' +
-        '<div class="card-body p-3 d-grid">' +
+        '<div class="card-body p-3 d-grid gap-2">' +
+          '<div class="d-flex justify-content-end">' +
+            '<div class="btn-group btn-group-sm template-editor-size-controls" role="group" aria-label="Editor size controls">' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="decrease" aria-label="Decrease editor size">-</button>' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="increase" aria-label="Increase editor size">+</button>' +
+            '</div>' +
+          '</div>' +
           '<div class="editor-holder" data-region-id="' + region.id + '">' +
               '<textarea class="editor-source" rows="10">' + escapeHtml(current) + '</textarea>' +
           '</div>' +
@@ -84,7 +90,17 @@
     } : {};
 
     return {
-      value: String(editor ? editor.getContent({ format: 'html' }) : (hidden && hidden.value !== undefined ? hidden.value : (textarea && textarea.value !== undefined ? textarea.value : (current && current.value !== undefined ? current.value : '')))),
+      value: String((function () {
+        var fallback = hidden && hidden.value !== undefined ? hidden.value : (textarea && textarea.value !== undefined ? textarea.value : (current && current.value !== undefined ? current.value : ''));
+        if (!editor || typeof editor.getContent !== 'function') {
+          return fallback;
+        }
+        try {
+          return editor.getContent({ format: 'html' });
+        } catch (_error) {
+          return fallback;
+        }
+      }())),
       style: style,
       existingContent: existingContent || {}
     };

src/web/public/js/regions/type/time-date.js

@@ -156,19 +156,19 @@
       MMM: toTitleCase(getPart(monthShort, 'month')),
       MMMM: toTitleCase(getPart(monthLong, 'month')),
       a: toTitleCase(getPart(ampm, 'dayPeriod')),
-      tz: resolvedTimeZone,
+      tz: getPart(getFormatter('tz-short:' + resolvedTimeZone, {
-      tz_short: getPart(getFormatter('tz-short:' + resolvedTimeZone, {
         timeZone: resolvedTimeZone,
         timeZoneName: 'short'
       }).formatToParts(targetDate), 'timeZoneName'),
+      tz_long: resolvedTimeZone,
       date: getPart(numericParts, 'year') + '-' + getPart(numericParts, 'month') + '-' + getPart(numericParts, 'day'),
       time: getPart(numericParts, 'hour') + ':' + getPart(numericParts, 'minute') + ':' + getPart(numericParts, 'second')
     };
   }
 
-  function resolveTimeDatePlaceholder(values, expression) {
+  function resolveTimeDatePlaceholder(values, expression, options) {
     if (typeof placeholderUtils.resolvePlaceholderExpression === 'function' && typeof placeholderUtils.formatPlaceholderValue === 'function') {
-      return placeholderUtils.formatPlaceholderValue(placeholderUtils.resolvePlaceholderExpression(values, expression));
+      return placeholderUtils.formatPlaceholderValue(placeholderUtils.resolvePlaceholderExpression(values, expression, options || {}));
     }
 
     var parsed = String(expression || '').trim();
@@ -200,7 +200,7 @@
       'MMMM',
       'a',
       'tz',
-      'tz_short'
+      'tz_long'
     ];
 
     if (typeof placeholderChips.renderChips === 'function') {
@@ -220,7 +220,7 @@
     var template = String(format || '').trim();
     var values = getFormattedParts(timeZone, date);
     return template.replace(/\{\{\s*([a-zA-Z0-9_.()\-]+)\s*\}\}/g, function (_match, key) {
-      return String(resolveTimeDatePlaceholder(values, key) || '');
+      return String(resolveTimeDatePlaceholder(values, key, { timeZone: timeZone }) || '');
     });
   }
 
@@ -302,6 +302,12 @@
           '</div>' +
         '</div>' +
         '<div class="card-body p-3 d-grid gap-3">' +
+          '<div class="d-flex justify-content-end">' +
+            '<div class="btn-group btn-group-sm template-editor-size-controls" role="group" aria-label="Editor size controls">' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="decrease" aria-label="Decrease editor size">-</button>' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="increase" aria-label="Increase editor size">+</button>' +
+            '</div>' +
+          '</div>' +
           '<div class="editor-holder" data-region-id="' + region.id + '">' +
             '<textarea id="region_time_date_text_' + region.id + '" class="editor-source form-control" rows="4" name="region_text_' + region.id + '">' + escapeHtml(value) + '</textarea>' +
           '</div>' +

src/web/public/js/regions/type/timetable.js

@@ -15,10 +15,6 @@
     return utils.escapeHtml ? utils.escapeHtml(value) : String(value === undefined || value === null ? '' : value);
   }
 
-  function sanitizeRichText(html) {
-    return utils.sanitizeRichText ? utils.sanitizeRichText(html) : escapeHtml(html);
-  }
-
   function getDefaultStyle() {
     return {
       font_family: DEFAULT_STYLE.font_family,
@@ -43,6 +39,52 @@
     return group && Array.isArray(group.entries) ? group.entries : [];
   }
 
+  function getDefaultTimeZone() {
+    try {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+    } catch (_error) {
+      return 'UTC';
+    }
+  }
+
+  function resolveTimeZone(value) {
+    var raw = String(value || '').trim();
+    if (!raw) {
+      return getDefaultTimeZone();
+    }
+
+    try {
+      new Intl.DateTimeFormat('en-GB', { timeZone: raw }).format(new Date());
+      return raw;
+    } catch (_error) {
+      return getDefaultTimeZone();
+    }
+  }
+
+  function getTimezoneValues(group, dateValue) {
+    var timeZone = resolveTimeZone(group && (group.timezone || group.time_zone || ''));
+    var shortName = timeZone;
+    var targetDate = dateValue instanceof Date ? dateValue : new Date(dateValue || Date.now());
+
+    try {
+      var parts = new Intl.DateTimeFormat('en-GB', {
+        timeZone: timeZone,
+        timeZoneName: 'short'
+      }).formatToParts(Number.isNaN(targetDate.getTime()) ? new Date() : targetDate);
+      var timeZonePart = parts.find(function (part) {
+        return part && part.type === 'timeZoneName';
+      });
+      shortName = timeZonePart && timeZonePart.value ? String(timeZonePart.value) : timeZone;
+    } catch (_error) {
+      shortName = timeZone;
+    }
+
+    return {
+      tz: shortName,
+      tz_long: timeZone
+    };
+  }
+
   function toDate(value) {
     if (!value) {
       return null;
@@ -119,9 +161,9 @@
     var current = existingContent[region.region_key] || {};
     return {
       timetable_group_id: current.timetable_group_id === undefined || current.timetable_group_id === null || current.timetable_group_id === '' ? '' : Number(current.timetable_group_id),
-      display_mode: String(current.display_mode || 'upcoming').trim().toLowerCase() || 'upcoming',
+      display_mode: String(current.display_mode || current.timetable_display_mode || 'upcoming').trim().toLowerCase() || 'upcoming',
-      value: String(current.value !== undefined ? current.value : current.text !== undefined ? current.text : ''),
+      value: String(current.text !== undefined ? current.text : current.value !== undefined ? current.value : ''),
-      max_items: Math.max(1, Number(current.max_items || 5)),
+      max_items: Math.max(1, Number(current.max_items || current.timetable_max_items || 5)),
       font_family: current.font_family || region.font_family || getDefaultStyle().font_family,
       font_size: current.font_size || region.font_size || getDefaultStyle().font_size,
       font_color: current.font_color || region.font_color || getDefaultStyle().font_color
@@ -143,14 +185,47 @@
     }).join('');
   }
 
+  function renderScheduleFormatTokenTable() {
+    if (window.timeDatePlaceholders && typeof window.timeDatePlaceholders.renderTable === 'function') {
+      return window.timeDatePlaceholders.renderTable();
+    }
+
+    return '' +
+      '<div class="table-responsive">' +
+        '<table class="table table-sm align-middle mb-0">' +
+          '<thead><tr><th scope="col">Format</th><th scope="col">Output</th><th scope="col">Description</th></tr></thead>' +
+          '<tbody>' +
+            '<tr><td><code>h</code></td><td>1-12</td><td>The hour, 12-hour clock</td></tr>' +
+            '<tr><td><code>hh</code></td><td>01-12</td><td>The hour, 12-hour clock, 2-digits</td></tr>' +
+            '<tr><td><code>m</code></td><td>0-59</td><td>The minute</td></tr>' +
+            '<tr><td><code>mm</code></td><td>00-59</td><td>The minute, 2-digits</td></tr>' +
+            '<tr><td><code>s</code></td><td>0-59</td><td>The second</td></tr>' +
+            '<tr><td><code>ss</code></td><td>00-59</td><td>The second, 2-digits</td></tr>' +
+            '<tr><td><code>A</code></td><td>AM/PM</td><td>Uppercase day period</td></tr>' +
+            '<tr><td><code>a</code></td><td>am/pm</td><td>Lowercase day period</td></tr>' +
+            '<tr><td><code>D</code></td><td>1-31</td><td>The day of the month</td></tr>' +
+            '<tr><td><code>DD</code></td><td>01-31</td><td>The day of the month, 2-digits</td></tr>' +
+            '<tr><td><code>ddd</code></td><td>Mon</td><td>The abbreviated weekday name</td></tr>' +
+            '<tr><td><code>dddd</code></td><td>Monday</td><td>The full weekday name</td></tr>' +
+            '<tr><td><code>M</code></td><td>1-12</td><td>The month, beginning at 1</td></tr>' +
+            '<tr><td><code>MM</code></td><td>01-12</td><td>The month, 2-digits</td></tr>' +
+            '<tr><td><code>MMM</code></td><td>Jan-Dec</td><td>The abbreviated month name</td></tr>' +
+            '<tr><td><code>MMMM</code></td><td>January-December</td><td>The full month name</td></tr>' +
+            '<tr><td><code>YY</code></td><td>18</td><td>The two-digit year</td></tr>' +
+            '<tr><td><code>YYYY</code></td><td>2018</td><td>The four-digit year</td></tr>' +
+          '</tbody>' +
+        '</table>' +
+      '</div>';
+  }
+
   function getCurrentSelection(regionId, card, existingContent, timetableGroups) {
     var current = existingContent[regionId] || {};
     var timetableGroupInput = card && card.querySelector ? card.querySelector('select[name="region_timetable_group_id_' + regionId + '"]') : null;
     var timetableDisplayModeInput = card && card.querySelector ? card.querySelector('select[name="region_timetable_display_mode_' + regionId + '"]') : null;
     var timetableMaxItemsInput = card && card.querySelector ? card.querySelector('input[name="region_timetable_max_items_' + regionId + '"]') : null;
     var groupId = timetableGroupInput ? timetableGroupInput.value : (current.timetable_group_id === undefined || current.timetable_group_id === null || current.timetable_group_id === '' ? '' : Number(current.timetable_group_id));
-    var displayMode = timetableDisplayModeInput ? timetableDisplayModeInput.value : String(current.display_mode || 'upcoming').trim().toLowerCase() || 'upcoming';
+    var displayMode = timetableDisplayModeInput ? timetableDisplayModeInput.value : String(current.display_mode || current.timetable_display_mode || 'upcoming').trim().toLowerCase() || 'upcoming';
-    var maxItems = Math.max(1, Number(timetableMaxItemsInput ? timetableMaxItemsInput.value : current.max_items || 5));
+    var maxItems = Math.max(1, Number(timetableMaxItemsInput ? timetableMaxItemsInput.value : current.max_items || current.timetable_max_items || 5));
     var group = getGroupById(groupId, timetableGroups);
     var entries = getVisibleEntries(groupId, displayMode, maxItems, timetableGroups);
     if (!entries.length) {
@@ -169,10 +244,10 @@
     var region = context.region;
     var current = context.current || {};
     var timetableGroups = Array.isArray(context.timetableGroups) ? context.timetableGroups : [];
-    var currentValue = String(current.value !== undefined ? current.value : current.text !== undefined ? current.text : '');
+    var currentValue = String(current.text !== undefined ? current.text : current.value !== undefined ? current.value : '');
     var currentGroupId = current.timetable_group_id === undefined || current.timetable_group_id === null || current.timetable_group_id === '' ? '' : Number(current.timetable_group_id);
-    var currentDisplayMode = String(current.display_mode || 'upcoming').trim().toLowerCase() || 'upcoming';
+    var currentDisplayMode = String(current.display_mode || current.timetable_display_mode || 'upcoming').trim().toLowerCase() || 'upcoming';
-    var currentMaxItems = Math.max(1, Number(current.max_items || 5));
+    var currentMaxItems = Math.max(1, Number(current.max_items || current.timetable_max_items || 5));
     var currentGroup = getGroupById(currentGroupId, timetableGroups);
     var currentEntries = getVisibleEntries(currentGroupId, currentDisplayMode, currentMaxItems, timetableGroups);
     if (!currentEntries.length) {
@@ -190,6 +265,12 @@
           '<div class="template-field-actions"><span class="chip">Timetable</span></div>' +
         '</div>' +
         '<div class="card-body p-3 d-grid gap-3">' +
+          '<div class="d-flex justify-content-end">' +
+            '<div class="btn-group btn-group-sm template-editor-size-controls" role="group" aria-label="Editor size controls">' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="decrease" aria-label="Decrease editor size">-</button>' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="increase" aria-label="Increase editor size">+</button>' +
+            '</div>' +
+          '</div>' +
           '<div class="editor-holder" data-region-id="' + region.id + '">' +
             '<textarea class="editor-source" rows="10">' + escapeHtml(currentValue) + '</textarea>' +
             '<input type="hidden" name="region_text_' + region.id + '" value="' + escapeHtml(currentValue) + '" />' +
@@ -219,7 +300,12 @@
           '<div class="api-region-placeholder-section schedule-placeholder-section" data-schedule-placeholder-chips>' +
             '<div class="api-region-placeholder-title">Available placeholders</div>' +
             '<div class="d-flex flex-wrap gap-2">' + renderSchedulePlaceholderChips(currentGroup, currentEntries) + '</div>' +
-            '<div class="text-body-secondary small mt-1">Placeholder values support transforms, for example <code>{{title.upper()}}</code>, <code>{{title.title()}}</code>, <code>{{title.lower()}}</code> or <code>{{start.format("MMM D, YYYY h:mm A")}}</code>.</div>' +
+            '<div class="text-body-secondary small mt-1">Placeholder values support transforms, for example <code>{{title.upper()}}</code>, <code>{{title.title()}}</code>, <code>{{title.lower()}}</code>, <code>{{start.format("MMM D, YYYY h:mm A")}}</code>, <code>{{start.tz()}}</code> for the short zone name, or <code>{{start.tz_long()}}</code> for the full IANA zone name.</div>' +
+            '<details class="mt-2">' +
+              '<summary class="small text-body-secondary">Supported date format tokens</summary>' +
+              '<div class="mt-2">' + renderScheduleFormatTokenTable() + '</div>' +
+              '<div class="text-body-secondary small mt-1">Use these tokens inside <code>.format(...)</code>; for example <code>{{start.format("MMM D, YYYY h:mm A")}}</code>.</div>' +
+            '</details>' +
           '</div>' +
           '</div>' +
         '</div>' +
@@ -287,13 +373,29 @@
     var textAreaInput = card && card.querySelector ? card.querySelector('textarea.editor-source') : null;
     var hiddenInput = card && card.querySelector ? card.querySelector('input[type="hidden"][name="region_text_' + region.id + '"]') : null;
     var editor = window.tinymce && typeof window.tinymce.get === 'function' ? window.tinymce.get('slide-editor-region-' + region.id) : null;
-    var value = String(editor ? editor.getContent({ format: 'html' }) : (hiddenInput && hiddenInput.value !== undefined ? hiddenInput.value : (textAreaInput && textAreaInput.value !== undefined ? textAreaInput.value : current.value)));
+    var fallbackValue = hiddenInput && hiddenInput.value !== undefined ? hiddenInput.value : (textAreaInput && textAreaInput.value !== undefined ? textAreaInput.value : current.value);
+    var currentGroup = getGroupById(timetableGroupInput ? timetableGroupInput.value : current.timetable_group_id, timetableGroups);
+    var timezoneValues = getTimezoneValues(currentGroup);
+    var value = String((function () {
+      if (!editor || typeof editor.getContent !== 'function') {
+        return fallbackValue;
+      }
+
+      try {
+        return editor.getContent({ format: 'html' });
+      } catch (_error) {
+        return fallbackValue;
+      }
+    }()));
 
     return {
       value: value,
       style: getTextStyle(region, current),
       timetable_group_id: timetableGroupInput ? timetableGroupInput.value || current.timetable_group_id : current.timetable_group_id,
       display_mode: timetableDisplayModeInput ? timetableDisplayModeInput.value || current.display_mode : current.display_mode,
+      tz: timezoneValues.tz,
+      tz_long: timezoneValues.tz_long,
+      timeZone: timezoneValues.tz_long,
       max_items: timetableMaxItemsInput ? timetableMaxItemsInput.value || current.max_items : current.max_items,
       existingContent: existingContent || {},
       timetableGroups: Array.isArray(timetableGroups) ? timetableGroups : []
@@ -303,7 +405,7 @@
   function renderPreview(region, regionContent, context) {
     var groups = context && context.timetableGroups ? context.timetableGroups : [];
     var style = regionContent && regionContent.style ? regionContent.style : getTextStyle(region, regionContent || {});
-    var value = String(regionContent && (regionContent.value !== undefined ? regionContent.value : regionContent.text !== undefined ? regionContent.text : '') || '').trim();
+    var value = String(regionContent && (regionContent.text !== undefined ? regionContent.text : regionContent.value !== undefined ? regionContent.value : '') || '').trim();
     var groupId = regionContent && regionContent.timetable_group_id !== undefined ? regionContent.timetable_group_id : '';
     var displayMode = regionContent && regionContent.display_mode ? regionContent.display_mode : 'upcoming';
     var maxItems = regionContent && regionContent.max_items !== undefined ? regionContent.max_items : 5;
@@ -315,13 +417,27 @@
     }
 
       return '<div class="slide-preview-region timetable" style="width:100%;height:100%;overflow:hidden;' + (style.font_family ? 'font-family:' + escapeHtml(style.font_family) + ';' : '') + (style.font_size ? 'font-size:' + Math.max(1, Math.round(Number(style.font_size))) + 'px;' : '') + (style.font_color ? 'color:' + escapeHtml(style.font_color) + ';' : '') + '">' + entries.map(function (entry, index) {
-      return '<div class="timetable-region-entry" data-timetable-entry-index="' + index + '">' + sanitizeRichText(renderTemplate(value, Object.assign({}, entry || {}, {
+      var entryDate = entry && (entry.start_datetime || entry.end_datetime || entry.date || entry.time || '');
+      var timezoneValues = getTimezoneValues(group, entryDate);
+      return '<div class="timetable-region-entry" data-timetable-entry-index="' + index + '">' + (utils.sanitizeRichText ? utils.sanitizeRichText(renderTemplate(value, Object.assign({}, entry || {}, {
         start: entry && entry.start_datetime !== undefined ? entry.start_datetime : '',
         end: entry && entry.end_datetime !== undefined ? entry.end_datetime : '',
+        tz: timezoneValues.tz,
+        tz_long: timezoneValues.tz_long,
+        timeZone: timezoneValues.tz_long,
         group: group || {},
         entries: entries,
         index: index + 1
-      }))) + '</div>';
+      }))) : escapeHtml(renderTemplate(value, Object.assign({}, entry || {}, {
+        start: entry && entry.start_datetime !== undefined ? entry.start_datetime : '',
+        end: entry && entry.end_datetime !== undefined ? entry.end_datetime : '',
+        tz: timezoneValues.tz,
+        tz_long: timezoneValues.tz_long,
+        timeZone: timezoneValues.tz_long,
+        group: group || {},
+        entries: entries,
+        index: index + 1
+      })))) + '</div>';
     }).join('') + '</div>';
   }
 

src/web/public/js/regions/type/video.js

@@ -82,17 +82,30 @@
 
   function buildEditorCardContext(context) {
     var defaultConfig = context && context.uploadConfig ? context.uploadConfig : {};
+    var configuredTypes = Array.isArray(context && context.uploadMimeTypes)
+      ? context.uploadMimeTypes.filter(function (mimeType) { return String(mimeType || '').indexOf('video/') === 0; })
+      : [];
+    var accept = configuredTypes.length
+      ? configuredTypes
+      : (Array.isArray(defaultConfig.accept) ? defaultConfig.accept : ['video/mp4', 'video/webm', 'video/ogg']);
+    var acceptLabels = accept.map(function (mimeType) {
+      return (String(mimeType).split('/')[1] || '').toUpperCase();
+    });
+    var acceptLabel = acceptLabels.length > 1
+      ? acceptLabels.slice(0, -1).join(', ') + ' or ' + acceptLabels[acceptLabels.length - 1]
+      : (acceptLabels[0] || 'supported video');
     return {
       region: context.region,
       current: String(context.current || ''),
       currentDuration: String(context.currentDuration || ''),
       uploadConfig: {
-        accept: Array.isArray(defaultConfig.accept) ? defaultConfig.accept : ['video/mp4', 'video/webm', 'video/ogg'],
+        accept: accept,
-        limitBytes: defaultConfig.limitBytes,
+        limitBytes: defaultConfig.limitBytes || context.uploadVideoMaxBytes,
         limitLabel: defaultConfig.limitLabel || context.uploadVideoMaxLabel || '1 GB',
-        helpText: defaultConfig.helpText || 'MP4, WebM, or Ogg'
+        helpText: defaultConfig.helpText || acceptLabel
       },
-      uploadVideoMaxLabel: context.uploadVideoMaxLabel || '1 GB'
+      uploadVideoMaxLabel: context.uploadVideoMaxLabel || '1 GB',
+      uploadMimeTypes: context.uploadMimeTypes || []
     };
   }
 
@@ -114,10 +127,16 @@
 
     var uploadConfig = context.uploadConfig || {};
     var accept = uploadConfig.accept || ['video/mp4', 'video/webm', 'video/ogg'];
+    var acceptLabels = accept.map(function (mimeType) {
+      return (String(mimeType).split('/')[1] || '').toUpperCase();
+    });
+    var acceptLabel = acceptLabels.length > 1
+      ? acceptLabels.slice(0, -1).join(', ') + (acceptLabels.length > 2 ? ', or ' : ' or ') + acceptLabels[acceptLabels.length - 1]
+      : (acceptLabels[0] || 'supported video');
     var limitBytes = Number(uploadConfig.limitBytes || 1024 * 1024 * 1024);
 
     if (!utils.fileMatchesAccept || !utils.fileMatchesAccept(context.file, accept)) {
-      showUploadWarning('This video region accepts MP4, WebM, or Ogg files.');
+      showUploadWarning('This video region accepts ' + acceptLabel + ' files.');
       return false;
     }
 
@@ -163,7 +182,7 @@
 
       return {
         accept: ['video/mp4', 'video/webm', 'video/ogg'],
-        limitBytes: defaultConfig.limitBytes,
+        limitBytes: defaultConfig.limitBytes || context.uploadVideoMaxBytes,
         limitLabel: defaultConfig.limitLabel,
         helpText: 'MP4, WebM, or Ogg'
       };

src/web/public/js/regions/type/webpage.js

@@ -8,9 +8,34 @@
     return utils.escapeHtml ? utils.escapeHtml(value) : String(value === undefined || value === null ? '' : value);
   }
 
-  function renderPreview(value) {
+  function normalizePreviewValue(value) {
-    var content = value && typeof value === 'object' && value.value !== undefined ? value : null;
+    if (value && typeof value === 'object') {
-    var src = String(content ? content.value : value || '').trim();
+      if (value.value !== undefined) {
+        return normalizePreviewValue(value.value);
+      }
+      if (value.text !== undefined) {
+        return normalizePreviewValue(value.text);
+      }
+      if (value.url !== undefined) {
+        return normalizePreviewValue(value.url);
+      }
+      if (value.href !== undefined) {
+        return normalizePreviewValue(value.href);
+      }
+      if (value.src !== undefined) {
+        return normalizePreviewValue(value.src);
+      }
+      if (value.content !== undefined) {
+        return normalizePreviewValue(value.content);
+      }
+      return '';
+    }
+
+    return String(value === undefined || value === null ? '' : value);
+  }
+
+  function renderPreview(region, value) {
+    var src = normalizePreviewValue(value !== undefined ? value : region).trim();
     if (!src) {
       return '<div class="slide-preview-placeholder">Webpage</div>';
     }
@@ -24,7 +49,10 @@
       region: region,
       headerActions: '<span class="chip">Webpage</span>',
       bodyHtml: '' +
-        '<input type="url" name="region_webpage_' + region.id + '" class="form-control" value="' + escapeHtml(current) + '" placeholder="https://example.com" />'
+        '<div class="input-group flex-nowrap">' +
+          '<input type="url" name="region_webpage_' + region.id + '" class="form-control" value="' + escapeHtml(current) + '" placeholder="https://example.com" />' +
+          '<button type="button" class="btn btn-outline-secondary text-nowrap" data-webpage-preview-update data-region-id="' + region.id + '">Update</button>' +
+        '</div>'
     });
   }
 

src/web/public/js/settings/settings-page.js

@@ -0,0 +1,392 @@
+(function () {
+  'use strict';
+
+  function initIconSuggestions() {
+    var searchInput = document.querySelector('[data-icon-suggestions-search]');
+    var countNode = document.querySelector('[data-icon-suggestions-count]');
+    var selectedList = document.querySelector('[data-selected-icon-list]');
+    var noSelectedNode = document.querySelector('[data-no-selected-icons]');
+    var addButton = document.querySelector('[data-add-icon-button]');
+    var iconForm = document.querySelector('[data-settings-form="icons"]');
+    var options = Array.prototype.slice.call(document.querySelectorAll('[data-icon-suggestion-option]'));
+    var maxSelected = 48;
+    var draggedItem = null;
+    var initialOrder = [];
+
+    if (!searchInput || !countNode || !selectedList || !options.length) {
+      return;
+    }
+
+    function getOptionByKey(key) {
+      return options.find(function (option) {
+        var checkbox = option.querySelector('[data-icon-picker-checkbox]');
+        return checkbox && checkbox.value === key;
+      }) || null;
+    }
+
+    function getCheckedKeys() {
+      return options.filter(function (option) {
+        var checkbox = option.querySelector('[data-icon-picker-checkbox]');
+        return checkbox && checkbox.checked;
+      }).map(function (option) {
+        return option.querySelector('[data-icon-picker-checkbox]').value;
+      });
+    }
+
+    function getSelectedOrder() {
+      return Array.prototype.slice.call(selectedList.querySelectorAll('[data-selected-icon-item]')).map(function (item) {
+        return item.getAttribute('data-icon-key');
+      });
+    }
+
+    function createSelectedItem(key) {
+      var option = getOptionByKey(key);
+      var checkbox = option && option.querySelector('[data-icon-picker-checkbox]');
+      if (!option || !checkbox) {
+        return null;
+      }
+
+      var item = document.createElement('div');
+      var content = document.createElement('div');
+      var dragButton = document.createElement('button');
+      var dragIcon = document.createElement('i');
+      var icon = document.createElement('i');
+      var label = document.createElement('span');
+      var hiddenInput = document.createElement('input');
+      var removeButton = document.createElement('button');
+      var removeIcon = document.createElement('i');
+      var iconLabel = String(option.getAttribute('data-icon-label') || key);
+
+      item.className = 'col-12 col-sm-6 col-xl-3';
+      content.className = 'd-flex align-items-center gap-2 border rounded p-2 h-100';
+      item.draggable = true;
+      item.setAttribute('data-selected-icon-item', '');
+      item.setAttribute('data-icon-key', key);
+
+      dragButton.type = 'button';
+      dragButton.className = 'btn btn-link text-body-secondary p-1';
+      dragButton.setAttribute('data-drag-icon', '');
+      dragButton.title = 'Drag to reorder';
+      dragButton.setAttribute('aria-label', 'Drag ' + iconLabel + ' to reorder');
+      dragIcon.className = 'bi bi-grip-vertical';
+      dragIcon.setAttribute('aria-hidden', 'true');
+      dragButton.appendChild(dragIcon);
+
+      icon.className = 'bi bi-' + key + ' fs-5 text-primary';
+      icon.setAttribute('aria-hidden', 'true');
+      label.className = 'flex-grow-1';
+      label.textContent = iconLabel;
+
+      hiddenInput.type = 'hidden';
+      hiddenInput.name = 'suggested_icons[]';
+      hiddenInput.value = key;
+      hiddenInput.setAttribute('data-ordered-icon-input', '');
+
+      removeButton.type = 'button';
+      removeButton.className = 'btn btn-link text-danger p-1';
+      removeButton.setAttribute('data-remove-icon', '');
+      removeButton.title = 'Remove ' + iconLabel;
+      removeButton.setAttribute('aria-label', 'Remove ' + iconLabel);
+      removeIcon.className = 'bi bi-x-lg';
+      removeIcon.setAttribute('aria-hidden', 'true');
+      removeButton.appendChild(removeIcon);
+
+      content.appendChild(dragButton);
+      content.appendChild(icon);
+      content.appendChild(label);
+      content.appendChild(hiddenInput);
+      content.appendChild(removeButton);
+      item.appendChild(content);
+      return item;
+    }
+
+    function renderSelectedItems(order) {
+      selectedList.querySelectorAll('[data-selected-icon-item]').forEach(function (item) {
+        item.remove();
+      });
+      order.forEach(function (key) {
+        var item = createSelectedItem(key);
+        if (item) {
+          selectedList.insertBefore(item, noSelectedNode);
+        }
+      });
+    }
+
+    function syncSelectionState() {
+      var checkedKeys = getCheckedKeys();
+      var checkedSet = new Set(checkedKeys);
+      var currentOrder = getSelectedOrder().filter(function (key) {
+        return checkedSet.has(key);
+      });
+      checkedKeys.forEach(function (key) {
+        if (currentOrder.indexOf(key) === -1) {
+          currentOrder.push(key);
+        }
+      });
+      renderSelectedItems(currentOrder);
+      countNode.textContent = String(currentOrder.length);
+      if (noSelectedNode) {
+        noSelectedNode.hidden = currentOrder.length > 0;
+      }
+      if (addButton) {
+        addButton.disabled = currentOrder.length >= maxSelected;
+        addButton.setAttribute('aria-disabled', addButton.disabled ? 'true' : 'false');
+      }
+      options.forEach(function (option) {
+        var checkbox = option.querySelector('[data-icon-picker-checkbox]');
+        if (checkbox) {
+          checkbox.disabled = !checkbox.checked && currentOrder.length >= maxSelected;
+        }
+      });
+    }
+
+    function resetIconForm() {
+      var initialSet = new Set(initialOrder);
+      options.forEach(function (option) {
+        var checkbox = option.querySelector('[data-icon-picker-checkbox]');
+        if (checkbox) {
+          checkbox.checked = initialSet.has(checkbox.value);
+        }
+      });
+      renderSelectedItems(initialOrder.slice());
+      syncSelectionState();
+      if (iconForm) {
+        iconForm.dataset.dirty = 'false';
+      }
+    }
+
+    function markIconFormDirty() {
+      if (iconForm) {
+        iconForm.dataset.dirty = 'true';
+      }
+    }
+
+    function filterOptions() {
+      var query = String(searchInput.value || '').trim().toLowerCase();
+      options.forEach(function (option) {
+        var label = String(option.getAttribute('data-icon-label') || '').toLowerCase();
+        option.hidden = Boolean(query && label.indexOf(query) === -1);
+      });
+    }
+
+    options.forEach(function (option) {
+      var checkbox = option.querySelector('[data-icon-picker-checkbox]');
+      if (checkbox) {
+        checkbox.addEventListener('change', function () {
+          markIconFormDirty();
+          syncSelectionState();
+        });
+      }
+    });
+
+    selectedList.addEventListener('click', function (event) {
+      var removeButton = event.target.closest ? event.target.closest('[data-remove-icon]') : null;
+      if (!removeButton) {
+        return;
+      }
+      var item = removeButton.closest('[data-selected-icon-item]');
+      var key = item && item.getAttribute('data-icon-key');
+      var option = getOptionByKey(key);
+      var checkbox = option && option.querySelector('[data-icon-picker-checkbox]');
+      if (checkbox) {
+        checkbox.checked = false;
+      }
+      markIconFormDirty();
+      syncSelectionState();
+    });
+
+    selectedList.addEventListener('dragstart', function (event) {
+      var item = event.target.closest ? event.target.closest('[data-selected-icon-item]') : null;
+      if (!item) {
+        return;
+      }
+      draggedItem = item;
+      item.classList.add('opacity-50');
+      event.dataTransfer.effectAllowed = 'move';
+      event.dataTransfer.setData('text/plain', item.getAttribute('data-icon-key') || '');
+    });
+
+    selectedList.addEventListener('dragover', function (event) {
+      if (!draggedItem) {
+        return;
+      }
+      event.preventDefault();
+      var target = event.target.closest ? event.target.closest('[data-selected-icon-item]') : null;
+      if (!target || target === draggedItem) {
+        return;
+      }
+      var bounds = target.getBoundingClientRect();
+      var insertBefore = event.clientY < bounds.top + bounds.height / 2;
+      selectedList.insertBefore(draggedItem, insertBefore ? target : target.nextSibling);
+    });
+
+    selectedList.addEventListener('dragend', function () {
+      if (!draggedItem) {
+        return;
+      }
+      draggedItem.classList.remove('opacity-50');
+      draggedItem = null;
+      markIconFormDirty();
+      syncSelectionState();
+    });
+
+    searchInput.addEventListener('input', filterOptions);
+    syncSelectionState();
+    initialOrder = getSelectedOrder();
+    document.addEventListener('settings:reset', resetIconForm);
+  }
+
+  function initDefaultAnnouncementIconPicker() {
+    return;
+    var shell = document.querySelector('[data-settings-default-icon-picker]');
+    if (!shell) return;
+    var select = shell.querySelector('select');
+    var toggle = shell.querySelector('[data-settings-default-icon-toggle]');
+    var menu = shell.querySelector('[data-settings-default-icon-menu]');
+    var preview = shell.querySelector('[data-settings-default-icon-preview]');
+    var label = shell.querySelector('[data-settings-default-icon-label]');
+    var search = shell.querySelector('[data-settings-default-icon-search]');
+    var empty = shell.querySelector('[data-settings-default-icon-empty]');
+    var options = Array.prototype.slice.call(shell.querySelectorAll('[data-settings-default-icon-option]'));
+
+    function getCatalogOptions() {
+      return Array.prototype.slice.call(select.options).map(function (option) {
+        return { value: option.value, label: option.textContent || option.label || option.value };
+      });
+    }
+
+    function createOption(option, selectedValue) {
+      var item = document.createElement('button');
+      item.type = 'button';
+      item.className = 'announcement-icon-picker__option';
+      item.setAttribute('data-settings-default-icon-option', '');
+      item.setAttribute('data-icon-key', option.value);
+      item.setAttribute('data-icon-label', option.label);
+      item.setAttribute('data-icon-search-terms', option.value + ' ' + option.label);
+      item.setAttribute('aria-pressed', option.value === selectedValue ? 'true' : 'false');
+      item.title = option.label;
+      item.innerHTML = '<i class="bi bi-' + option.value + '" aria-hidden="true"></i><span class="visually-hidden">' + option.label + '</span>';
+      return item;
+    }
+
+    function renderOptions(query) {
+      var normalizedQuery = String(query || '').trim().toLowerCase();
+      var selectedValue = String(select.value || '').trim();
+      var sourceOptions = normalizedQuery ? getCatalogOptions().filter(function (option) {
+        return (option.value + ' ' + option.label).toLowerCase().indexOf(normalizedQuery) !== -1;
+      }) : options.map(function (option) {
+        return { value: option.getAttribute('data-icon-key') || '', label: option.getAttribute('data-icon-label') || '' };
+      });
+      var grid = shell.querySelector('[data-settings-default-icon-grid]');
+      grid.innerHTML = '';
+      sourceOptions.forEach(function (option) {
+        grid.appendChild(createOption(option, selectedValue));
+      });
+      options = Array.prototype.slice.call(grid.querySelectorAll('[data-settings-default-icon-option]'));
+      options.forEach(bindOption);
+      empty.hidden = Boolean(sourceOptions.length);
+    }
+
+    function bindOption(item) {
+      item.addEventListener('click', function () {
+        select.value = item.getAttribute('data-icon-key') || '';
+        select.dispatchEvent(new Event('change', { bubbles: true }));
+        menu.hidden = true;
+        toggle.setAttribute('aria-expanded', 'false');
+      });
+    }
+
+    function render() {
+      var option = select.options[select.selectedIndex];
+      var key = option ? option.value : '';
+      var text = option ? option.textContent : 'Select an icon';
+      preview.className = 'announcement-icon-picker__toggle-icon bi bi-' + key;
+      if (label) label.textContent = text;
+      options.forEach(function (item) {
+        item.classList.toggle('is-selected', item.getAttribute('data-icon-key') === key);
+      });
+    }
+    toggle.addEventListener('click', function () {
+      menu.hidden = !menu.hidden;
+      toggle.setAttribute('aria-expanded', menu.hidden ? 'false' : 'true');
+      if (!menu.hidden && search) search.focus();
+    });
+    shell.querySelector('[data-settings-default-icon-close]').addEventListener('click', function () {
+      menu.hidden = true;
+      toggle.setAttribute('aria-expanded', 'false');
+    });
+    options.forEach(bindOption);
+    if (search) search.addEventListener('input', function () {
+      renderOptions(search.value);
+    });
+    select.addEventListener('change', render);
+    render();
+  }
+
+  function initSettingsSectionNavigation() {
+    var links = Array.prototype.slice.call(document.querySelectorAll('[data-settings-section-link]'));
+    var sections = Array.prototype.slice.call(document.querySelectorAll('[data-settings-section]'));
+    if (!links.length || !sections.length) {
+      return;
+    }
+
+    function setActiveSection(sectionId) {
+      links.forEach(function (link) {
+        var isActive = link.getAttribute('href') === '#' + sectionId;
+        link.classList.toggle('active', isActive);
+        link.setAttribute('aria-current', isActive ? 'page' : 'false');
+      });
+      sections.forEach(function (section) {
+        section.hidden = section.id !== sectionId;
+      });
+    }
+
+    function hasDirtySettingsForm() {
+      return Array.prototype.some.call(document.querySelectorAll('[data-settings-form]'), function (form) {
+        return form.dataset && form.dataset.dirty === 'true';
+      });
+    }
+
+    function resetSettingsForms() {
+      document.querySelectorAll('[data-settings-form]').forEach(function (form) {
+        if (typeof form.reset === 'function') {
+          form.reset();
+        }
+        form.dataset.dirty = 'false';
+      });
+      document.dispatchEvent(new CustomEvent('settings:reset'));
+    }
+
+    links.forEach(function (link) {
+      link.addEventListener('click', function (event) {
+        var target = document.getElementById(String(link.getAttribute('href') || '').replace(/^#/, ''));
+        if (!target) {
+          return;
+        }
+        var currentSection = sections.find(function (section) { return !section.hidden; });
+        if (currentSection && target.id !== currentSection.id && hasDirtySettingsForm()) {
+          if (!window.confirm('You have unsaved settings. Switch sections anyway?')) {
+            event.preventDefault();
+            return;
+          }
+          resetSettingsForms();
+        }
+        event.preventDefault();
+        setActiveSection(target.id);
+        window.history.replaceState(null, '', '#' + target.id);
+      });
+    });
+
+    var hashSectionId = String(window.location.hash || '').replace(/^#/, '');
+    var initialSection = sections.some(function (section) {
+      return section.id === hashSectionId;
+    }) ? hashSectionId : sections[0].id;
+    setActiveSection(initialSection);
+  }
+
+  document.addEventListener('DOMContentLoaded', function () {
+    initIconSuggestions();
+    initDefaultAnnouncementIconPicker();
+    initSettingsSectionNavigation();
+  });
+}());

src/web/public/js/shared/placeholder-utils.js

@@ -75,36 +75,148 @@
     return text;
   }
 
-  function formatDateValue(value, pattern) {
+  function getDefaultTimeZone() {
-    var date = value instanceof Date ? value : new Date(value);
+    try {
+      return Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC';
+    } catch (_error) {
+      return 'UTC';
+    }
+  }
+
+  function getDateValue(value) {
+    return value instanceof Date ? value : new Date(value);
+  }
+
+  function resolveTimeZone(value) {
+    var raw = String(value || '').trim();
+    if (!raw) {
+      return getDefaultTimeZone();
+    }
+
+    try {
+      new Intl.DateTimeFormat('en-GB', { timeZone: raw }).format(new Date());
+      return raw;
+    } catch (_error) {
+      return getDefaultTimeZone();
+    }
+  }
+
+  function getDatePartsFromLocalTime(date) {
+    var dayPeriod = date.getHours() >= 12 ? 'PM' : 'AM';
+    return {
+      year: String(date.getFullYear()),
+      month: padNumber(date.getMonth() + 1, 2),
+      day: padNumber(date.getDate(), 2),
+      hour24: padNumber(date.getHours(), 2),
+      hour12: padNumber(date.getHours() % 12 || 12, 2),
+      minute: padNumber(date.getMinutes(), 2),
+      second: padNumber(date.getSeconds(), 2),
+      weekdayLong: dayNamesLong[date.getDay()],
+      weekdayShort: dayNamesShort[date.getDay()],
+      monthLong: monthNamesLong[date.getMonth()],
+      monthShort: monthNamesShort[date.getMonth()],
+      dayPeriod: dayPeriod
+    };
+  }
+
+  function getDatePartsFromTimeZone(date, timeZone) {
+    var resolvedTimeZone = resolveTimeZone(timeZone);
+    var baseFormatter = new Intl.DateTimeFormat('en-GB', {
+      timeZone: resolvedTimeZone,
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric'
+    });
+    var weekdayLongFormatter = new Intl.DateTimeFormat('en-GB', {
+      timeZone: resolvedTimeZone,
+      weekday: 'long'
+    });
+    var weekdayShortFormatter = new Intl.DateTimeFormat('en-GB', {
+      timeZone: resolvedTimeZone,
+      weekday: 'short'
+    });
+    var monthLongFormatter = new Intl.DateTimeFormat('en-GB', {
+      timeZone: resolvedTimeZone,
+      month: 'long'
+    });
+    var monthShortFormatter = new Intl.DateTimeFormat('en-GB', {
+      timeZone: resolvedTimeZone,
+      month: 'short'
+    });
+    var ampmFormatter = new Intl.DateTimeFormat('en-GB', {
+      timeZone: resolvedTimeZone,
+      hour12: true,
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+    var numericParts = baseFormatter.formatToParts(date);
+    var weekdayLong = weekdayLongFormatter.formatToParts(date);
+    var weekdayShort = weekdayShortFormatter.formatToParts(date);
+    var monthLong = monthLongFormatter.formatToParts(date);
+    var monthShort = monthShortFormatter.formatToParts(date);
+    var ampm = ampmFormatter.formatToParts(date);
+
+    function getPart(parts, type) {
+      var match = parts.find(function (part) {
+        return part && part.type === type;
+      });
+      return match ? String(match.value || '') : '';
+    }
+
+    var dayPeriod = getPart(ampm, 'dayPeriod');
+
+    return {
+      year: getPart(numericParts, 'year'),
+      month: getPart(numericParts, 'month'),
+      day: getPart(numericParts, 'day'),
+      hour24: getPart(numericParts, 'hour'),
+      hour12: getPart(ampm, 'hour'),
+      minute: getPart(numericParts, 'minute'),
+      second: getPart(numericParts, 'second'),
+      weekdayLong: getPart(weekdayLong, 'weekday'),
+      weekdayShort: getPart(weekdayShort, 'weekday'),
+      monthLong: getPart(monthLong, 'month'),
+      monthShort: getPart(monthShort, 'month'),
+      dayPeriod: String(dayPeriod || '').toUpperCase(),
+      timeZone: resolvedTimeZone
+    };
+  }
+
+  function formatDateValue(value, pattern, timeZone) {
+    var date = getDateValue(value);
     if (Number.isNaN(date.getTime())) {
       return '';
     }
 
     var format = String(pattern || 'YYYY-MM-DD HH:mm').trim() || 'YYYY-MM-DD HH:mm';
-    var hours24 = date.getHours();
+    var parts = timeZone ? getDatePartsFromTimeZone(date, timeZone) : getDatePartsFromLocalTime(date);
-    var hours12 = hours24 % 12 || 12;
+    var hours24 = parts.hour24;
+    var hours12 = parts.hour12;
     var tokenMap = {
-      YYYY: String(date.getFullYear()),
+      YYYY: parts.year,
-      YY: String(date.getFullYear()).slice(-2),
+      YY: parts.year.slice(-2),
-      MMMM: monthNamesLong[date.getMonth()],
+      MMMM: parts.monthLong,
-      MMM: monthNamesShort[date.getMonth()],
+      MMM: parts.monthShort,
-      MM: padNumber(date.getMonth() + 1, 2),
+      MM: parts.month,
-      M: String(date.getMonth() + 1),
+      M: String(Number(parts.month) || 0),
-      DD: padNumber(date.getDate(), 2),
+      DD: parts.day,
-      D: String(date.getDate()),
+      D: String(Number(parts.day) || 0),
-      dddd: dayNamesLong[date.getDay()],
+      dddd: parts.weekdayLong,
-      ddd: dayNamesShort[date.getDay()],
+      ddd: parts.weekdayShort,
-      HH: padNumber(hours24, 2),
+      HH: hours24,
-      H: String(hours24),
+      H: String(Number(hours24) || 0),
-      hh: padNumber(hours12, 2),
+      hh: hours12,
-      h: String(hours12),
+      h: String(Number(hours12) || 0),
-      mm: padNumber(date.getMinutes(), 2),
+      mm: parts.minute,
-      m: String(date.getMinutes()),
+      m: String(Number(parts.minute) || 0),
-      ss: padNumber(date.getSeconds(), 2),
+      ss: parts.second,
-      s: String(date.getSeconds()),
+      s: String(Number(parts.second) || 0),
-      A: hours24 >= 12 ? 'PM' : 'AM',
+      A: parts.dayPeriod,
-      a: hours24 >= 12 ? 'pm' : 'am'
+      a: String(parts.dayPeriod || '').toLowerCase()
     };
 
     return format.replace(/\[([^\]]+)\]|YYYY|YY|MMMM|MMM|MM|M|DD|D|dddd|ddd|HH|H|hh|h|mm|m|ss|s|A|a/g, function (match, literal) {
@@ -112,7 +224,36 @@
     });
   }
 
-  function applyTransform(value, transform) {
+  function getTimeZoneShortName(value, timeZone) {
+    var date = getDateValue(value);
+    if (Number.isNaN(date.getTime())) {
+      return '';
+    }
+
+    var resolvedTimeZone = resolveTimeZone(timeZone);
+    try {
+      var parts = new Intl.DateTimeFormat('en-GB', {
+        timeZone: resolvedTimeZone,
+        timeZoneName: 'short'
+      }).formatToParts(date);
+      var match = parts.find(function (part) {
+        return part && part.type === 'timeZoneName';
+      });
+      return match ? String(match.value || '') : resolvedTimeZone;
+    } catch (_error) {
+      return resolvedTimeZone;
+    }
+  }
+
+  function getTimeZoneLongName(timeZone) {
+    return getTransformTimeZone([], { timeZone: timeZone });
+  }
+
+  function getTransformTimeZone(args, options) {
+    return resolveTimeZone((args && args[0]) || (options && options.timeZone) || '');
+  }
+
+  function applyTransform(value, transform, options) {
     var text = String(value === undefined || value === null ? '' : value);
     var name = String(transform && transform.name || '').trim().toLowerCase();
     var args = Array.isArray(transform && transform.args) ? transform.args : [];
@@ -132,18 +273,26 @@
     }
 
     if (name === 'format' || name === 'date' || name === 'datetime' || name === 'time') {
-      return formatDateValue(value, args[0] || (name === 'time' ? 'h:mm A' : name === 'date' ? 'MMM D, YYYY' : 'MMM D, YYYY h:mm A'));
+      return formatDateValue(value, args[0] || (name === 'time' ? 'h:mm A' : name === 'date' ? 'MMM D, YYYY' : 'MMM D, YYYY h:mm A'), getTransformTimeZone(args.slice(1), options));
+    }
+
+    if (name === 'tz') {
+      return getTimeZoneShortName(value, getTransformTimeZone(args, options));
+    }
+
+    if (name === 'tz_long') {
+      return getTimeZoneLongName(getTransformTimeZone(args, options));
     }
 
     return text;
   }
 
-  function resolvePlaceholderExpression(value, expression) {
+  function resolvePlaceholderExpression(value, expression, options) {
     var parsed = parsePlaceholderExpression(expression);
     var resolved = resolvePath(value, parsed.path);
 
     parsed.transforms.forEach(function (transform) {
-      resolved = applyTransform(resolved, transform);
+      resolved = applyTransform(resolved, transform, options || {});
     });
 
     return resolved;

src/web/public/js/shared/time-date-placeholders.js

@@ -2,47 +2,79 @@
 
 (function () {
   var root = window;
-  var PLACEHOLDERS = [
+  var FORMAT_PLACEHOLDERS = [
-    { token: 'h', label: 'h' },
+    { token: 'h', output: '1-12', description: 'The hour, 12-hour clock' },
-    { token: 'hh', label: 'hh' },
+    { token: 'hh', output: '01-12', description: 'The hour, 12-hour clock, 2-digits' },
-    { token: 'm', label: 'm' },
+    { token: 'm', output: '0-59', description: 'The minute' },
-    { token: 'mm', label: 'mm' },
+    { token: 'mm', output: '00-59', description: 'The minute, 2-digits' },
-    { token: 's', label: 's' },
+    { token: 's', output: '0-59', description: 'The second' },
-    { token: 'ss', label: 'ss' },
+    { token: 'ss', output: '00-59', description: 'The second, 2-digits' },
-    { token: 'd', label: 'd' },
+    { token: 'A', output: 'AM/PM', description: 'Uppercase day period' },
-    { token: 'dd', label: 'dd' },
+    { token: 'a', output: 'am/pm', description: 'Lowercase day period' },
-    { token: 'M', label: 'M' },
+    { token: 'D', output: '1-31', description: 'The day of the month' },
-    { token: 'MM', label: 'MM' },
+    { token: 'DD', output: '01-31', description: 'The day of the month, 2-digits' },
-    { token: 'y', label: 'y' },
+    { token: 'ddd', output: 'Mon', description: 'The abbreviated weekday name' },
-    { token: 'yyyy', label: 'yyyy' },
+    { token: 'dddd', output: 'Monday', description: 'The full weekday name' },
-    { token: 'yy', label: 'yy' },
+    { token: 'M', output: '1-12', description: 'The month, beginning at 1' },
-    { token: 'ddd', label: 'ddd' },
+    { token: 'MM', output: '01-12', description: 'The month, 2-digits' },
-    { token: 'dddd', label: 'dddd' },
+    { token: 'MMM', output: 'Jan-Dec', description: 'The abbreviated month name' },
-    { token: 'MMM', label: 'MMM' },
+    { token: 'MMMM', output: 'January-December', description: 'The full month name' },
-    { token: 'MMMM', label: 'MMMM' },
+    { token: 'YY', output: '18', description: 'The two-digit year' },
-    { token: 'a', label: 'a' },
+    { token: 'YYYY', output: '2018', description: 'The four-digit year' }
-    { token: 'tz', label: 'tz' },
-    { token: 'tz_short', label: 'tz_short' }
   ];
 
+  var HELPER_PLACEHOLDERS = [
+    { token: 'tz', output: 'BST/GMT', description: 'The time zone abbreviation for the selected date' },
+    { token: 'tz_long', output: 'Europe/London', description: 'The resolved time zone name' }
+  ];
+
+  var PLACEHOLDERS = FORMAT_PLACEHOLDERS.concat(HELPER_PLACEHOLDERS);
+
   function getTokens() {
     return PLACEHOLDERS.slice();
   }
 
-  function renderChips() {
+  function getFormatTokens() {
-    if (root.placeholderChips && typeof root.placeholderChips.renderChips === 'function') {
+    return FORMAT_PLACEHOLDERS.slice();
-      return root.placeholderChips.renderChips(PLACEHOLDERS.map(function (item) {
-        return item.token;
-      }));
   }
 
-    return PLACEHOLDERS.map(function (item) {
+  function renderTable() {
-      return '<span class="chip">{{' + item.token + '}}</span>';
+    return '' +
-    }).join('');
+      '<div class="table-responsive">' +
+        '<table class="table table-sm align-middle mb-0">' +
+          '<thead>' +
+            '<tr>' +
+              '<th scope="col">Format</th>' +
+              '<th scope="col">Output</th>' +
+              '<th scope="col">Description</th>' +
+            '</tr>' +
+          '</thead>' +
+          '<tbody>' +
+            FORMAT_PLACEHOLDERS.map(function (item) {
+              return '' +
+                '<tr>' +
+                  '<td><code>' + item.token + '</code></td>' +
+                  '<td>' + escapeHtml(item.output || '') + '</td>' +
+                  '<td>' + escapeHtml(item.description || '') + '</td>' +
+                '</tr>';
+            }).join('') +
+          '</tbody>' +
+        '</table>' +
+      '</div>';
+  }
+
+  function escapeHtml(value) {
+    return String(value === undefined || value === null ? '' : value)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;');
   }
 
   root.timeDatePlaceholders = {
     getTokens: getTokens,
-    renderChips: renderChips
+    getFormatTokens: getFormatTokens,
+    renderTable: renderTable
   };
 }());

src/web/public/js/slides/slide-form-editor.js

@@ -3,14 +3,39 @@ export function createSlideFormEditorController(options) {
   var templateFields = settings.templateFields || null;
   var templateSelectorLock = settings.templateSelectorLock || null;
   var requestPreviewRender = typeof settings.requestPreviewRender === 'function' ? settings.requestPreviewRender : function () {};
+  var markFormDirty = typeof settings.markFormDirty === 'function' ? settings.markFormDirty : function () {};
   var defaultFontSize = Math.max(1, Number(settings.defaultFontSize || 32));
   var fontFamilyFormats = String(settings.fontFamilyFormats || '').trim();
   var fontStylesheetHref = String(settings.fontStylesheetHref || '').trim();
   var defaultEditorFontFamily = 'Arial, Helvetica, sans-serif';
   var editorInstances = new Map();
+  var editorHeights = new Map();
+  var editorSizeControlsBound = false;
   var getRegionTypeModule = typeof settings.getRegionTypeModule === 'function' ? settings.getRegionTypeModule : function () {
     return null;
   };
+  var imageUploadUrl = String(settings.imageUploadUrl || '/slides/uploads').trim() || '/slides/uploads';
+  var imageUploadMaxBytes = Math.max(1, Number(settings.imageUploadMaxBytes || 2 * 1024 * 1024));
+  var imageUploadLimitLabel = String(settings.imageUploadLimitLabel || '').trim() || Math.max(1, Math.round(imageUploadMaxBytes / (1024 * 1024))) + ' MB';
+  var imageUploadContext = String(settings.imageUploadContext || 'wysiwyg').trim() || 'wysiwyg';
+  var configuredImageMimeTypes = Array.isArray(settings.uploadMimeTypes)
+    ? settings.uploadMimeTypes.filter(function (mimeType) { return String(mimeType || '').indexOf('image/') === 0; })
+    : [];
+  var imageUploadAllowedMimeTypes = configuredImageMimeTypes.length
+    ? configuredImageMimeTypes
+    : ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml'];
+  var imageUploadAllowedExtensions = imageUploadAllowedMimeTypes.map(function (mimeType) {
+    var subtype = String(mimeType).split('/')[1] || '';
+    return subtype === 'jpeg' ? 'jpg' : subtype === 'svg+xml' ? 'svg' : subtype;
+  });
+  var imageUploadFileTypes = imageUploadAllowedExtensions.join(',');
+  var wysiwygEditorHeightStep = Math.max(1, Number(settings.wysiwygEditorHeightStep || 80));
+  var wysiwygEditorHeightMin = Math.max(1, Number(settings.wysiwygEditorHeightMin || 240));
+  var wysiwygEditorHeightMax = Math.max(wysiwygEditorHeightMin, Number(settings.wysiwygEditorHeightMax || 960));
+  var wysiwygEditorHeightDefault = Math.max(wysiwygEditorHeightMin, Number(settings.wysiwygEditorHeightDefault || 360));
+  var editorImageUploadPaths = new Set();
+  var committedEditorImageUploadPaths = new Set();
+  var pendingEditorImageUploadCleanupPaths = new Set();
   var getEditorBackgroundColor = typeof settings.getEditorBackgroundColor === 'function' ? settings.getEditorBackgroundColor : function () {
     return '#111111';
   };
@@ -29,6 +54,10 @@ export function createSlideFormEditorController(options) {
       return true;
     }
 
+    if (/<img\b/i.test(raw)) {
+      return false;
+    }
+
     var stripped = raw
       .replace(/<\s*br\s*\/?>/gi, '')
       .replace(/<p[^>]*>(?:\s|&nbsp;|<br\s*\/?>)*<\/p>/gi, '')
@@ -50,6 +79,99 @@ export function createSlideFormEditorController(options) {
     return '';
   }
 
+  function normalizeEditorHeightValue(value) {
+    var numericValue = Number(value);
+    if (!Number.isFinite(numericValue) || numericValue <= 0) {
+      numericValue = wysiwygEditorHeightDefault;
+    }
+
+    return Math.min(wysiwygEditorHeightMax, Math.max(wysiwygEditorHeightMin, Math.round(numericValue)));
+  }
+
+  function getEditorHolder(regionId) {
+    if (!templateFields) {
+      return null;
+    }
+
+    return templateFields.querySelector('.editor-holder[data-region-id="' + regionId + '"]');
+  }
+
+  function getEditorHeight(regionId) {
+    var key = String(regionId || '');
+    var storedHeight = editorHeights.get(key);
+    if (storedHeight !== undefined && storedHeight !== null) {
+      return normalizeEditorHeightValue(storedHeight);
+    }
+
+    var holder = getEditorHolder(key);
+    var holderHeight = holder && holder.dataset ? holder.dataset.editorHeight : '';
+    var normalizedHeight = normalizeEditorHeightValue(holderHeight || wysiwygEditorHeightDefault);
+    editorHeights.set(key, normalizedHeight);
+    return normalizedHeight;
+  }
+
+  function applyEditorHeight(regionId, height, options) {
+    var key = String(regionId || '');
+    var normalizedHeight = normalizeEditorHeightValue(height);
+    var holder = getEditorHolder(key);
+    var editor = editorInstances.get(key);
+    var container = editor && typeof editor.getContainer === 'function' ? editor.getContainer() : null;
+    var shouldRequestPreview = !(options && options.silent);
+
+    editorHeights.set(key, normalizedHeight);
+
+    if (holder) {
+      holder.dataset.editorHeight = String(normalizedHeight);
+      holder.style.height = normalizedHeight + 'px';
+      holder.style.minHeight = normalizedHeight + 'px';
+    }
+
+    if (container) {
+      container.style.height = normalizedHeight + 'px';
+      container.style.minHeight = normalizedHeight + 'px';
+    }
+
+    if (editor && typeof editor.dispatch === 'function') {
+      editor.dispatch('ResizeEditor');
+    }
+
+    if (shouldRequestPreview) {
+      requestPreviewRender();
+    }
+  }
+
+  function adjustEditorHeight(regionId, delta) {
+    applyEditorHeight(regionId, getEditorHeight(regionId) + Number(delta || 0));
+  }
+
+  function bindEditorSizeControls() {
+    if (editorSizeControlsBound || !templateFields) {
+      return;
+    }
+
+    editorSizeControlsBound = true;
+    templateFields.addEventListener('click', function (event) {
+      var button = event.target && typeof event.target.closest === 'function' ? event.target.closest('[data-editor-size-action]') : null;
+      if (!button) {
+        return;
+      }
+
+      var action = String(button.getAttribute('data-editor-size-action') || '').trim();
+      if (action !== 'increase' && action !== 'decrease') {
+        return;
+      }
+
+      var card = typeof button.closest === 'function' ? button.closest('[data-region-id]') : null;
+      var regionId = card ? card.getAttribute('data-region-id') : '';
+      if (!regionId) {
+        return;
+      }
+
+      event.preventDefault();
+      adjustEditorHeight(regionId, action === 'increase' ? wysiwygEditorHeightStep : -wysiwygEditorHeightStep);
+    });
+  }
+
   function getEditorHiddenInput(regionId) {
     if (!templateFields) {
       return null;
@@ -72,6 +194,18 @@ export function createSlideFormEditorController(options) {
     return window.tinymce || null;
   }
 
+  function getEditorContentSafely(editor, fallbackValue) {
+    if (!editor || typeof editor.getContent !== 'function') {
+      return String(fallbackValue || '');
+    }
+
+    try {
+      return String(editor.getContent({ format: 'html' }));
+    } catch (_error) {
+      return String(fallbackValue || '');
+    }
+  }
+
   function getThemeName() {
     var theme = String(document.documentElement && document.documentElement.dataset && document.documentElement.dataset.bsTheme || 'light').trim().toLowerCase();
     if (theme === 'auto') {
@@ -95,14 +229,19 @@ export function createSlideFormEditorController(options) {
   }
 
   function syncEditorState(regionId, editor, shouldLock, hydrated) {
+    var hidden = getEditorHiddenInput(regionId);
+    var sourceElm = editor && editor.targetElm ? editor.targetElm : null;
+    var fallbackContent = hidden && hidden.value !== undefined ? hidden.value : (sourceElm && sourceElm.value !== undefined ? sourceElm.value : '');
+
     if (editor && typeof editor.save === 'function') {
+      if (typeof editor.blur === 'function') {
+        editor.blur();
+      }
       editor.save();
     }
 
-    var content = editor.getContent({ format: 'html' });
+    var content = sourceElm && sourceElm.value !== undefined ? String(sourceElm.value || '') : getEditorContentSafely(editor, fallbackContent);
     content = isEmptyRichTextValue(content) ? '' : content;
-    var hidden = getEditorHiddenInput(regionId);
-    var sourceElm = editor && editor.targetElm ? editor.targetElm : null;
 
     if (hidden) {
       hidden.value = content;
@@ -192,6 +331,191 @@ export function createSlideFormEditorController(options) {
       : themeAssets.contentCss;
   }
 
+  function normalizeUploadPath(value) {
+    return String(value || '').trim();
+  }
+
+  function collectEditorImageUploadPaths(html) {
+    var matches = String(html || '').match(/\/media\/uploads\/[^^\s"'<>]+/g);
+    return matches ? Array.from(new Set(matches.map(normalizeUploadPath).filter(Boolean))) : [];
+  }
+
+  function collectCurrentEditorImageUploadPaths() {
+    var currentPaths = new Set();
+
+    editorInstances.forEach(function (editor, regionId) {
+      var hidden = getEditorHiddenInput(regionId);
+      var sourceElm = editor && editor.targetElm ? editor.targetElm : null;
+      var fallbackContent = hidden && hidden.value !== undefined ? hidden.value : (sourceElm && sourceElm.value !== undefined ? sourceElm.value : '');
+      collectEditorImageUploadPaths(getEditorContentSafely(editor, fallbackContent)).forEach(function (path) {
+        currentPaths.add(path);
+      });
+    });
+
+    return currentPaths;
+  }
+
+  function getImageUploadCleanupPaths() {
+    var currentPaths = collectCurrentEditorImageUploadPaths();
+    return Array.from(editorImageUploadPaths).filter(function (path) {
+      return !currentPaths.has(path);
+    });
+  }
+
+  function getCommittedImageUploadCleanupPaths() {
+    var currentPaths = collectCurrentEditorImageUploadPaths();
+    return Array.from(committedEditorImageUploadPaths).filter(function (path) {
+      return !currentPaths.has(path);
+    });
+  }
+
+  function getPendingImageUploadPaths() {
+    return Array.from(editorImageUploadPaths).filter(function (path) {
+      return !committedEditorImageUploadPaths.has(path);
+    });
+  }
+
+  function queueImageUploadCleanupPaths(paths) {
+    Array.from(new Set((paths || []).map(normalizeUploadPath).filter(Boolean))).forEach(function (path) {
+      pendingEditorImageUploadCleanupPaths.add(path);
+    });
+  }
+
+  function getPendingImageUploadCleanupPaths() {
+    var currentPaths = collectCurrentEditorImageUploadPaths();
+    return Array.from(pendingEditorImageUploadCleanupPaths).filter(function (path) {
+      return !currentPaths.has(path);
+    });
+  }
+
+  function markImageUploadsCommitted() {
+    committedEditorImageUploadPaths = collectCurrentEditorImageUploadPaths();
+  }
+
+  function getAllImageUploadPaths() {
+    return Array.from(editorImageUploadPaths);
+  }
+
+  function clearImageUploadPaths() {
+    editorImageUploadPaths.clear();
+    committedEditorImageUploadPaths.clear();
+    pendingEditorImageUploadCleanupPaths.clear();
+  }
+
+  function getFileExtension(fileName) {
+    var match = String(fileName || '').toLowerCase().match(/\.([a-z0-9]+)$/);
+    return match ? String(match[1] || '') : '';
+  }
+
+  function getImageUploadValidationMessage(blobInfo) {
+    var blob = blobInfo && typeof blobInfo.blob === 'function' ? blobInfo.blob() : null;
+    var fileName = blobInfo && typeof blobInfo.filename === 'function' ? String(blobInfo.filename() || '') : '';
+    var mimeType = blob && blob.type ? String(blob.type || '').trim().toLowerCase() : '';
+    var extension = getFileExtension(fileName);
+
+    if (!blob) {
+      return 'No image file was provided.';
+    }
+
+    if (Number(blob.size || 0) > imageUploadMaxBytes) {
+      return 'Image must be ' + imageUploadLimitLabel + ' or smaller. Larger images should use the dedicated Image region.';
+    }
+
+    if (mimeType && imageUploadAllowedMimeTypes.indexOf(mimeType) === -1) {
+      return 'This editor accepts PNG, JPG, GIF, WebP, or SVG images.';
+    }
+
+    if (!mimeType && extension && imageUploadAllowedExtensions.indexOf(extension) === -1) {
+      return 'This editor accepts PNG, JPG, GIF, WebP, or SVG images.';
+    }
+
+    if (!mimeType && !extension) {
+      return 'This editor accepts PNG, JPG, GIF, WebP, or SVG images.';
+    }
+
+    return '';
+  }
+
+  function uploadEditorImage(blobInfo, progress) {
+    var validationError = getImageUploadValidationMessage(blobInfo);
+    if (validationError) {
+      return Promise.reject(new Error(validationError));
+    }
+
+    return new Promise(function (resolve, reject) {
+      var xhr = new XMLHttpRequest();
+      var formData = new FormData();
+      var blob = blobInfo.blob();
+      var fileName = typeof blobInfo.filename === 'function' ? String(blobInfo.filename() || 'image') : 'image';
+
+      formData.append('file', blob, fileName);
+
+      xhr.open('POST', imageUploadUrl, true);
+      xhr.responseType = 'text';
+      xhr.withCredentials = true;
+      xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+      xhr.setRequestHeader('Accept', 'application/json, text/plain, */*');
+      xhr.setRequestHeader('X-Upload-Context', imageUploadContext);
+
+      xhr.upload.onprogress = function (event) {
+        if (!progress) {
+          return;
+        }
+
+        if (!event || !event.lengthComputable || !event.total) {
+          progress(0);
+          return;
+        }
+
+        progress(Math.round((event.loaded / event.total) * 100));
+      };
+
+      xhr.onload = function () {
+        var responseText = String(xhr.responseText || '');
+        if (xhr.status < 200 || xhr.status >= 300) {
+          reject(new Error(responseText || 'Unable to upload image.'));
+          return;
+        }
+
+        if (responseText.trim().toLowerCase().indexOf('<!doctype html') === 0 || responseText.toLowerCase().indexOf('<html') !== -1) {
+          reject(new Error('Upload redirected to an HTML page. Please sign in again and retry.'));
+          return;
+        }
+
+        var payload = {};
+        try {
+          payload = JSON.parse(responseText || '{}') || {};
+        } catch (_error) {
+          reject(new Error('Unable to parse the upload response.'));
+          return;
+        }
+
+        if (!payload.path) {
+          reject(new Error('Unable to upload image.'));
+          return;
+        }
+
+        if (progress) {
+          progress(100);
+        }
+
+        editorImageUploadPaths.add(String(payload.path || '').trim());
+
+        resolve(String(payload.path || ''));
+      };
+
+      xhr.onerror = function () {
+        reject(new Error('Unable to upload image.'));
+      };
+
+      xhr.ontimeout = function () {
+        reject(new Error('Upload timed out. Please try again.'));
+      };
+
+      xhr.send(formData);
+    });
+  }
+
   function attachEditorEvents(regionId, editor) {
     var hidden = getEditorHiddenInput(regionId);
     var source = editor && editor.targetElm ? editor.targetElm : null;
@@ -211,7 +535,7 @@ export function createSlideFormEditorController(options) {
     }
 
     editor.on('init', function () {
-      var content = editor.getContent({ format: 'html' });
+      var content = getEditorContentSafely(editor, hidden && hidden.value !== undefined ? hidden.value : (source && source.value !== undefined ? source.value : ''));
       content = isEmptyRichTextValue(content) ? '' : content;
       if (hidden) {
         hidden.value = content;
@@ -227,6 +551,9 @@ export function createSlideFormEditorController(options) {
     ['change', 'keyup', 'undo', 'redo', 'Paste', 'input'].forEach(function (eventName) {
       editor.on(eventName, function () {
         syncState(true);
+        if (hydrated) {
+          markFormDirty();
+        }
       });
     });
   }
@@ -254,6 +581,8 @@ export function createSlideFormEditorController(options) {
       source.id = 'slide-editor-region-' + regionId;
     }
 
+    applyEditorHeight(regionId, getEditorHeight(regionId), { silent: true });
+
     function registerInlineFormat(editor, formatName, styles) {
       editor.formatter.register(formatName, {
         inline: 'span',
@@ -288,16 +617,29 @@ export function createSlideFormEditorController(options) {
       menubar: false,
       branding: false,
       promotion: false,
+      relative_urls: false,
+      remove_script_host: false,
+      convert_urls: true,
       paste_data_images: false,
-      plugins: 'lists code advlist fullscreen table',
+      automatic_uploads: true,
-      toolbar: 'undo redo | fontfamily fontsizeinput | forecolor backcolor bold italic underlineformats removeformat | align lineheight indent outdent bullist numlist table chip | fullscreen',
+      images_file_types: imageUploadFileTypes,
+      images_upload_handler: uploadEditorImage,
+      plugins: 'lists code advlist fullscreen table image',
+      toolbar: 'undo redo | fontfamily fontsizeinput | forecolor backcolor bold italic underlineformats removeformat | align lineheight indent outdent bullist numlist table image chip | fullscreen',
       toolbar_mode: 'sliding',
       license_key: 'gpl',
+      height: getEditorHeight(regionId),
+      min_height: wysiwygEditorHeightMin,
+      table_default_attributes: {
+        border: '1',
+        cellpadding: '0',
+        cellspacing: '0'
+      },
       skin: themeAssets.skinName,
       skin_url: themeAssets.skinUrl,
       content_css: getContentCss(),
       body_class: themeAssets.bodyClass,
-      content_style: 'body { font-family: ' + defaultEditorFontFamily + '; font-size: 32px; line-height: 1.5; background-color: ' + getEditorBackgroundColorValue() + '; } p { margin: 1em 0; } p:first-child { margin-top: 0; } p:last-child { margin-bottom: 1em; } table { border-collapse: collapse; width: 100%; } td, th { border: 1px solid currentColor; padding: 0.35em 0.5em; vertical-align: top; } th { font-weight: 700; }' + (editorContentStyle ? ' ' + editorContentStyle : ''),
+      content_style: 'body { font-family: ' + defaultEditorFontFamily + '; font-size: 32px; line-height: 1.5; background-color: ' + getEditorBackgroundColorValue() + '; } p { margin: 1em 0; } p:first-child { margin-top: 0; } p:last-child { margin-bottom: 1em; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } td, th { border: 1px solid currentColor; padding: 0; vertical-align: top; } th { font-weight: 700; }' + (editorContentStyle ? ' ' + editorContentStyle : ''),
       font_family_formats: getFontFamilyFormats(),
       font_size_input_default_unit: 'px',
       invalid_elements: 'a',
@@ -374,9 +716,11 @@ export function createSlideFormEditorController(options) {
       }
 
       editorInstances.set(regionId, editor);
+      applyEditorHeight(regionId, getEditorHeight(regionId), { silent: true });
       if (editor.targetElm) {
         editor.targetElm.value = editor.getContent({ format: 'html' });
       }
+      markImageUploadsCommitted();
       return editor;
     }).catch(function (error) {
       console.error('Failed to initialize TinyMCE.', error);
@@ -389,6 +733,7 @@ export function createSlideFormEditorController(options) {
       return Promise.resolve([]);
     }
 
+    bindEditorSizeControls();
     watchThemeChanges();
 
     var holders = Array.prototype.slice.call(templateFields.querySelectorAll('.editor-holder'));
@@ -405,18 +750,19 @@ export function createSlideFormEditorController(options) {
     var saves = Array.prototype.map.call(templateFields.querySelectorAll('.editor-holder'), function (holder) {
       var regionId = holder.getAttribute('data-region-id');
       var editor = editorInstances.get(regionId);
-      var hidden = getEditorHiddenInput(regionId);
 
-      if (!editor || !hidden) {
+      if (!editor) {
         return Promise.resolve();
       }
 
-      hidden.value = editor.getContent({ format: 'html' });
+      syncEditorState(regionId, editor, false, true);
-      syncEditorFontSizeHidden(regionId);
       return Promise.resolve();
     });
 
-    return Promise.all(saves);
+    return Promise.all(saves).then(function (results) {
+      getCommittedImageUploadCleanupPaths();
+      return results;
+    });
   }
 
   function destroyEditors() {
@@ -454,6 +800,14 @@ export function createSlideFormEditorController(options) {
   return {
     renderEditors: renderEditors,
     syncEditors: syncEditors,
+    getImageUploadCleanupPaths: getImageUploadCleanupPaths,
+    getCommittedImageUploadCleanupPaths: getCommittedImageUploadCleanupPaths,
+    getPendingImageUploadPaths: getPendingImageUploadPaths,
+    getPendingImageUploadCleanupPaths: getPendingImageUploadCleanupPaths,
+    getAllImageUploadPaths: getAllImageUploadPaths,
+    queueImageUploadCleanupPaths: queueImageUploadCleanupPaths,
+    markImageUploadsCommitted: markImageUploadsCommitted,
+    clearImageUploadPaths: clearImageUploadPaths,
     destroyEditors: function () {
       if (themeObserver) {
         themeObserver.disconnect();

src/web/public/js/slides/slide-form-regions.js

@@ -30,6 +30,9 @@ export function createSlideFormRegionHelpers(options) {
   var defaultFontSize = Math.max(1, Number(settings.defaultFontSize || 32));
   var uploadMaxLabel = String(settings.uploadMaxLabel || '100 MB');
   var uploadVideoMaxLabel = String(settings.uploadVideoMaxLabel || '1 GB');
+  var uploadMaxBytes = Number(settings.uploadMaxBytes || 100 * 1024 * 1024);
+  var uploadVideoMaxBytes = Number(settings.uploadVideoMaxBytes || 1024 * 1024 * 1024);
+  var uploadMimeTypes = Array.isArray(settings.uploadMimeTypes) ? settings.uploadMimeTypes : [];
 
   function sanitizeFontSize(value) {
     var raw = String(value || '').trim().toLowerCase();
@@ -539,6 +542,9 @@ export function createSlideFormRegionHelpers(options) {
         regionRatio: reduceAspectRatio(region.width, region.height),
         uploadMaxLabel: uploadMaxLabel,
         uploadVideoMaxLabel: uploadVideoMaxLabel,
+        uploadMaxBytes: uploadMaxBytes,
+        uploadVideoMaxBytes: uploadVideoMaxBytes,
+        uploadMimeTypes: uploadMimeTypes,
         disableAudio: (existingContent[region.region_key] || {}).disable_audio,
         config: region.region_type === 'api' ? getCurrentApiConfig(region) : region.region_type === 'timetable' ? getCurrentTimetableConfig(region) : getCurrentRssConfig(region),
         style: getCurrentTextStyle(region),
@@ -579,6 +585,9 @@ export function createSlideFormRegionHelpers(options) {
       regionRatio: reduceAspectRatio(region.width, region.height),
       uploadMaxLabel: uploadMaxLabel,
       uploadVideoMaxLabel: uploadVideoMaxLabel,
+      uploadMaxBytes: uploadMaxBytes,
+      uploadVideoMaxBytes: uploadVideoMaxBytes,
+      uploadMimeTypes: uploadMimeTypes,
       disableAudio: currentContent.disable_audio,
       config: region.region_type === 'api' ? apiConfig : region.region_type === 'timetable' ? getCurrentTimetableConfig(region) : rssConfig,
       style: textStyle,

src/web/public/js/slides/slide-form.js

@@ -6,6 +6,14 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
 (function () {
   var DEFAULT_FONT_SIZE = 32;
 
+  function formatUploadLimitLabel(bytes) {
+    var megabytes = Number(bytes || 0) / 1024 / 1024;
+    if (megabytes >= 1024 && megabytes % 1024 === 0) {
+      return String(megabytes / 1024) + ' GB';
+    }
+    return (Number.isInteger(megabytes) ? String(megabytes) : megabytes.toFixed(2).replace(/0+$/, '').replace(/\.$/, '')) + ' MB';
+  }
+
   var dataElement = document.getElementById('slide-editor-data');
   if (!dataElement) {
     return;
@@ -37,10 +45,14 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
   var slidePreviewEmpty = document.getElementById('slide-preview-empty');
   var slidePreviewOverlay = document.getElementById('slide-preview-overlay');
   var openPreviewPopupButton = document.getElementById('open-preview-popup');
-  var uploadMaxBytes = 100 * 1024 * 1024;
+  var uploadLimits = slideEditorData.uploadLimits || {};
-  var uploadMaxLabel = '100 MB';
+  var uploadMaxBytes = Number(uploadLimits.imageMaxBytes || 100 * 1024 * 1024);
-  var uploadVideoMaxBytes = 1024 * 1024 * 1024;
+  var uploadMaxLabel = formatUploadLimitLabel(uploadMaxBytes);
-  var uploadVideoMaxLabel = '1 GB';
+  var uploadVideoMaxBytes = Number(uploadLimits.videoMaxBytes || 1024 * 1024 * 1024);
+  var uploadVideoMaxLabel = formatUploadLimitLabel(uploadVideoMaxBytes);
+  var wysiwygImageUploadMaxBytes = Number(uploadLimits.wysiwygImageMaxBytes || 2 * 1024 * 1024);
+  var wysiwygImageUploadLimitLabel = formatUploadLimitLabel(wysiwygImageUploadMaxBytes);
+  var uploadMimeTypes = Array.isArray(uploadLimits.allowedMimeTypes) ? uploadLimits.allowedMimeTypes : [];
   var videoDurationCache = Object.create(null);
   var previewRenderFrame = 0;
   var previewPopupWindow = null;
@@ -106,7 +118,14 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     defaultFontSize: DEFAULT_FONT_SIZE,
     fontFamilyFormats: slideEditorData.fontFamilyFormats || '',
     fontStylesheetHref: fontStylesheetHref,
+    imageUploadMaxBytes: wysiwygImageUploadMaxBytes,
+    imageUploadLimitLabel: wysiwygImageUploadLimitLabel,
+    imageUploadContext: 'wysiwyg',
+    uploadMimeTypes: uploadMimeTypes,
     getRegionTypeModule: getRegionTypeModule,
+    markFormDirty: function () {
+      slideForm.dataset.dirty = 'true';
+    },
     getEditorBackgroundColor: function () {
       var template = getTemplateById(templateSelect.value);
       return template && template.background_color ? String(template.background_color) : '#111111';
@@ -123,6 +142,9 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     defaultFontSize: DEFAULT_FONT_SIZE,
     uploadMaxLabel: uploadMaxLabel,
     uploadVideoMaxLabel: uploadVideoMaxLabel,
+    uploadMaxBytes: uploadMaxBytes,
+    uploadVideoMaxBytes: uploadVideoMaxBytes,
+    uploadMimeTypes: uploadMimeTypes,
     escapeHtml: escapeHtml,
     getRegionTypeModule: getRegionTypeModule,
     requestPreviewRender: requestPreviewRender
@@ -820,6 +842,16 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
       });
     });
 
+    templateFields.querySelectorAll('input[type="url"][name^="region_webpage_"]').forEach(function (input) {
+      input.addEventListener('input', function () {
+        templateSelectorLock.markEdited();
+      });
+
+      input.addEventListener('change', function () {
+        templateSelectorLock.markEdited();
+      });
+    });
+
     if (existingTemplateId && hasExistingSlideContent()) {
       templateSelectorLock.arm();
       templateSelectorLock.markEdited();
@@ -840,6 +872,14 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
           throw new Error('Wait for the image upload to finish before saving.');
         }
         await slideFormEditorController.syncEditors();
+        await new Promise(function (resolve) {
+          window.requestAnimationFrame(function () {
+            resolve();
+          });
+        });
+        await new Promise(function (resolve) {
+          window.setTimeout(resolve, 0);
+        });
         await syncRegionCards();
       },
       fallbackSuccessMessage: 'Saved slide.',
@@ -867,18 +907,42 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
 
   templateSelect.addEventListener('change', renderTemplate);
   templateFields.addEventListener('change', function () {
+    var webpageInput = event.target && typeof event.target.matches === 'function' && event.target.matches('input[type="url"][name^="region_webpage_"]');
+    if (webpageInput) {
+      templateSelectorLock.arm();
+      templateSelectorLock.markEdited();
+      return;
+    }
+
     templateSelectorLock.arm();
     templateSelectorLock.markEdited();
     requestPreviewRender();
   });
   templateFields.addEventListener('input', function () {
+    var webpageInput = event.target && typeof event.target.matches === 'function' && event.target.matches('input[type="url"][name^="region_webpage_"]');
+    if (webpageInput) {
+      templateSelectorLock.arm();
+      templateSelectorLock.markEdited();
+      return;
+    }
+
     templateSelectorLock.arm();
     templateSelectorLock.markEdited();
     requestPreviewRender();
   });
   templateFields.addEventListener('click', function (event) {
     var button = event.target && typeof event.target.closest === 'function' ? event.target.closest('[data-api-items-path-reset]') : null;
+    var webpageUpdateButton = event.target && typeof event.target.closest === 'function' ? event.target.closest('[data-webpage-preview-update]') : null;
     if (!button) {
+      if (!webpageUpdateButton) {
+        return;
+      }
+    }
+
+    if (webpageUpdateButton) {
+      templateSelectorLock.arm();
+      templateSelectorLock.markEdited();
+      requestPreviewRender();
       return;
     }
 
@@ -915,6 +979,12 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     if (regionMediaController) {
       regionMediaController.queueUploadCleanup(regionMediaController.getPendingUploadCleanupPaths());
     }
+    if (slideFormEditorController && typeof slideFormEditorController.getCommittedImageUploadCleanupPaths === 'function' && regionMediaController) {
+      regionMediaController.queueUploadCleanup(slideFormEditorController.getCommittedImageUploadCleanupPaths());
+    }
+    if (slideFormEditorController && typeof slideFormEditorController.getImageUploadCleanupPaths === 'function' && regionMediaController) {
+      regionMediaController.queueUploadCleanup(slideFormEditorController.getImageUploadCleanupPaths());
+    }
     if (previewPopupWindow && !previewPopupWindow.closed) {
       previewPopupWindow.close();
     }

src/web/public/js/slides/slide-image-cropper.js

@@ -14,6 +14,7 @@
   var currentInput = null;
   var currentFile = null;
   var currentObjectUrl = '';
+  var cropperFrame = modal.querySelector('.slide-image-cropper-frame');
   var flipX = 1;
   var flipY = 1;
   var currentAspectRatio = NaN;
@@ -22,6 +23,14 @@
   var listenersAttached = false;
   var uploadMaxBytes = 100 * 1024 * 1024;
   var uploadMaxLabel = '100 MB';
+  var editorDataElement = document.getElementById('slide-editor-data');
+  try {
+    var editorData = JSON.parse(editorDataElement && (editorDataElement.value || editorDataElement.textContent) || '{}') || {};
+    uploadMaxBytes = Number(editorData.uploadLimits && editorData.uploadLimits.imageMaxBytes) || uploadMaxBytes;
+    var megabytes = uploadMaxBytes / 1024 / 1024;
+    uploadMaxLabel = Number.isInteger(megabytes) ? String(megabytes) + ' MB' : megabytes.toFixed(2).replace(/0+$/, '').replace(/\.$/, '') + ' MB';
+  } catch (_error) {
+  }
 
   function getRegionId(input) {
     var match = String(input && input.name || '').match(/^region_image_(\d+)$/);
@@ -40,6 +49,12 @@
     status.textContent = String(message || '');
   }
 
+  function setCropperLoading(loading) {
+    if (cropperFrame) {
+      cropperFrame.classList.toggle('is-loading', Boolean(loading));
+    }
+  }
+
   function showModal() {
     if (window.pulseModal && typeof window.pulseModal.show === 'function') {
       window.pulseModal.show(modal);
@@ -79,6 +94,7 @@
   function resetModalState() {
     destroyCropper();
     revokeObjectUrl();
+    setCropperLoading(false);
     currentInput = null;
     currentFile = null;
     flipX = 1;
@@ -118,6 +134,75 @@
     return width / height;
   }
 
+  function isSvgFile(file) {
+    if (!file) {
+      return false;
+    }
+
+    return String(file.type || '').toLowerCase() === 'image/svg+xml' || /\.svg$/i.test(String(file.name || ''));
+  }
+
+  function isGifFile(file) {
+    if (!file) {
+      return false;
+    }
+
+    return String(file.type || '').toLowerCase() === 'image/gif' || /\.gif$/i.test(String(file.name || ''));
+  }
+
+  function isSpecialRasterizationFile(file) {
+    return isSvgFile(file) || isGifFile(file);
+  }
+
+  function getSpecialFileWarning(file) {
+    if (isGifFile(file)) {
+      return 'GIF selected. If you crop, rotate, or flip this image, it will be rasterized and the animation will be lost. Leave the full image selected to keep the original GIF.';
+    }
+
+    return 'SVG selected. If you crop, rotate, or flip this image, it will be rasterized. Leave the full image selected to keep the original SVG.';
+  }
+
+  function isOriginalSpecialSelection() {
+    if (!cropper || !currentFile || !isSpecialRasterizationFile(currentFile) || typeof cropper.getData !== 'function' || typeof cropper.getImageData !== 'function') {
+      return false;
+    }
+
+    var cropData = cropper.getData(true) || {};
+    var imageData = cropper.getImageData() || {};
+    var width = Number(imageData.naturalWidth || 0);
+    var height = Number(imageData.naturalHeight || 0);
+
+    if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+      return false;
+    }
+
+    return Math.abs(Number(cropData.x || 0)) < 0.5 &&
+      Math.abs(Number(cropData.y || 0)) < 0.5 &&
+      Math.abs(Number(cropData.width || 0) - width) < 0.5 &&
+      Math.abs(Number(cropData.height || 0) - height) < 0.5 &&
+      Math.abs(Number(cropData.rotate || 0)) < 0.5 &&
+      Number(cropData.scaleX || 1) === 1 &&
+      Number(cropData.scaleY || 1) === 1;
+  }
+
+  function getRasterizedFileName(sourceName) {
+    var name = String(sourceName || '').trim();
+
+    if (!name) {
+      return 'slide-region-image.png';
+    }
+
+    if (/\.svg$/i.test(name)) {
+      return name.replace(/\.svg$/i, '.png');
+    }
+
+    if (/\.[a-z0-9]+$/i.test(name)) {
+      return name.replace(/\.[a-z0-9]+$/i, '.png');
+    }
+
+    return name + '.png';
+  }
+
   function setActiveRatioButton(value) {
     var targetValue = ratioLabelForValue(value);
     modal.querySelectorAll('[data-slide-image-cropper-action="ratio"]').forEach(function (button) {
@@ -183,6 +268,8 @@
       zoomOnTouch: true,
       zoomOnWheel: true,
       ready: function () {
+        setCropperLoading(false);
+
         if (cropper && cropper.container) {
           cropper.container.style.width = '100%';
           cropper.container.style.height = '560px';
@@ -209,7 +296,10 @@
 
     setButtonState(false);
     setActiveRatioButton(currentAspectRatio === undefined ? 'free' : currentAspectRatio);
-    setStatus('Use the toolbar to crop, rotate, or flip the image before applying it.');
+
+    if (isSpecialRasterizationFile(currentFile)) {
+      setStatus(getSpecialFileWarning(currentFile));
+    }
   }
 
   function openEditor(input, file) {
@@ -220,8 +310,9 @@
     currentAspectRatio = 'free';
     currentRegionAspectRatio = parseAspectRatio(input && input.dataset && input.dataset.slideImageCropperRegionRatio);
     currentRegionAspectRatioLabel = String(input && input.dataset && input.dataset.slideImageCropperRegionRatioLabel || 'Region').trim() || 'Region';
+    setCropperLoading(true);
     setButtonState(true);
-    setStatus('Loading image editor...');
+    setStatus(isSpecialRasterizationFile(file) ? getSpecialFileWarning(file) : '');
 
     modal.querySelectorAll('[data-slide-image-cropper-action="ratio"][data-slide-image-cropper-ratio="region"]').forEach(function (button) {
       button.title = currentRegionAspectRatioLabel ? 'Region ratio ' + currentRegionAspectRatioLabel : 'Region ratio';
@@ -286,11 +377,62 @@
     hideModal();
   }
 
+  function finalizeCurrentSvgSelection() {
+    if (!currentFile) {
+      return;
+    }
+
+    if (isOriginalSpecialSelection()) {
+      finalizeCropFile(currentFile);
+      return;
+    }
+
+    setButtonState(true);
+    setStatus('Creating a rasterized image from the crop...');
+
+    var canvas = cropper && typeof cropper.getCroppedCanvas === 'function' ? cropper.getCroppedCanvas({
+      fillColor: 'transparent',
+      imageSmoothingEnabled: true,
+      imageSmoothingQuality: 'high'
+    }) : null;
+
+    if (!canvas) {
+      setStatus('Unable to create the cropped image.');
+      setButtonState(false);
+      return;
+    }
+
+    canvas.toBlob(function (blob) {
+      if (!blob) {
+        setStatus('Unable to create the cropped image.');
+        setButtonState(false);
+        return;
+      }
+
+      var finalFile = new File([blob], getRasterizedFileName(currentFile.name), {
+        lastModified: Date.now(),
+        type: blob.type || 'image/png'
+      });
+
+      finalizeCropFile(finalFile);
+    }, 'image/png');
+  }
+
   function commitCrop() {
     if (!currentInput || !currentFile) {
       return;
     }
 
+    if (isSpecialRasterizationFile(currentFile)) {
+      if (!cropper) {
+        finalizeCropFile(currentFile);
+        return;
+      }
+
+      finalizeCurrentSvgSelection();
+      return;
+    }
+
     if (!cropper) {
       finalizeCropFile(currentFile);
       return;
@@ -381,7 +523,7 @@
       return;
     }
 
-    if (!/^image\//i.test(file.type || '')) {
+    if (!/^image\//i.test(file.type || '') && !/\.svg$/i.test(String(file.name || ''))) {
       input.value = '';
       return;
     }