Release 2.5.13

.gitignore

@@ -3,9 +3,11 @@ media/
 !src/web/lib/media/
 !src/web/lib/media/**
 docker-compose.dev.yml
+/dev-demo-seed.js
 .vscode/
 .env
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 .DS_Store
+TODO.md

CHANGELOG.md

@@ -2,6 +2,175 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.5.13 - 2026-08-05
+
+### Fixed
+
+- Slide and template save forms now allow larger multipart text fields, so rich region content no longer trips Multer's default field-value limit.
+
+## 2.5.12 - 2026-08-05
+
+### Fixed
+
+- The auth route test now loads the alias bootstrap before the login flow, so isolated test runs do not depend on prior module initialization.
+- The slide editor now blocks pasted data images in TinyMCE so image content must come through the upload flow.
+
+## 2.5.11 - 2026-08-05
+
+### Fixed
+
+- Single-slide playlists now re-render the active slide immediately when a refresh arrives, instead of waiting for a transition that never happens.
+- Playlist create and update flows now redirect to the canonical `/playlists/:id/edit` path after saving.
+- Slide preview popups now keep rich-text spacing and line height consistent with the editor preview.
+
+## 2.5.10 - 2026-08-05
+
+### Fixed
+
+- Slide editor rich-text updates now keep the hidden field and preview state in sync after inline formatting actions.
+
+## 2.5.9 - 2026-08-05
+
+### Fixed
+
+- Screen playlist refreshes now wait until the next slide transition before applying a pending update, so one-slide playlists do not swap immediately during a refresh.
+- Playlist rows now show the mute control for any playable media region, including RTMP slides, instead of only video regions.
+
+## 2.5.8 - 2026-08-05
+
+### Fixed
+
+- MariaDB migrations now retry alternate foreign-key constraint names when screen-to-player constraint creation reports a duplicate-key error.
+
+## 2.5.7 - 2026-08-05
+
+### Fixed
+
+- QR template backgrounds now use a single solid color only, and the editor no longer exposes a background gradient mode.
+
+## 2.5.6 - 2026-08-05
+
+### Added
+
+- Onboarding QR rendering now uses the vendored `qr-code-styling` library directly, with a wider quiet zone and extra frame padding so the code does not clip at the corners.
+
+### Changed
+
+- The shared QR helper now renders `qr-code-styling` in Node without the old `qrcode` or `qrcode-generator` packages.
+- The onboarding QR endpoint now generates the styled QR at request time, and the player onboarding page requests it only after confirming the player is not already onboarded.
+- Playlist QR preview backfill now uses the same styled QR helper as onboarding, so playlist snapshots and generated previews stay consistent.
+- The onboarding QR layout now keeps the code inset within its frame so the corners have more breathing room.
+
+## 2.5.5 - 2026-08-04
+
+### Added
+
+- A shared Dupe flow was added to most admin create pages and list views, including roles, users, playlists, slides, templates, canvas sizes, announcements, and supported data sources.
+
+### Changed
+
+- RBAC roles now include a Dupe action that opens a copy-on-create flow with the selected permissions already populated.
+- Users now include a Dupe action that opens the add-user form with the copied name and roles, while leaving the username blank for a new login.
+- User usernames are now editable from the admin users section, while the personal account password page remains unchanged.
+- The users form now allows creating an account without assigning any roles.
+- Save and New on the users form now returns to the blank create page instead of falling back to the list.
+- Password updates now accept a slightly lighter policy of 10 characters with 3 of 4 character classes, and the account and user password forms now describe the updated requirement.
+- The slide rich-text editor now groups underline, strikethrough, subscript, and superscript into a single split-button control, with the main button using the underline icon and the dropdown exposing the other text-format actions.
+- Chip formatting in the slide rich-text editor now uses a reusable inline-format helper so the chip action continues to sync and mark the editor as edited when applied.
+- RSS, API, and timetable placeholder help text now uses the same transform examples, spacing, and typography as the timetable version, with the hint shown after the visible placeholders and before any overflow disclosure.
+
+### Fixed
+
+- Cells and inputs now enforce route-specific character limits on the form itself and on the matching save paths, so overlong values no longer fail at submit time.
+- Playlist rows now use a grip drag handle with separate up/down move controls, and the drag grip cursor now changes to grab and grabbing on hover and drag.
+- Playlist duration inputs now respect a min-only limit correctly, so the shared limiter no longer coerces values down to 0 when no max attribute is present.
+- Playlist row video and mute toggles now use the correct filled/outline Bootstrap button styles for their current state without relying on the `active` class.
+- Slides table search now only matches slide titles and template names, and no longer searches within slide content.
+- Banner marquee text now measures its real cycle width so top-banner and lower-third announcements loop continuously instead of resetting from a fixed start position.
+- Slide editor template selection now stays editable on blank slides until the user makes a real content edit, so TinyMCE hydration no longer locks the canvas immediately.
+- Slide editor region cards now share a common header shell, so the image and video chips stay aligned with the other region types on the Video Webpage and HTML RTMP pages.
+- Firefox preview popup now centers the preview canvas in normal layout flow and scales from the center, so the popup preview lines up correctly in Chrome and Firefox.
+- Canvas size edits now keep the width and height fields locked while the size is in use, and oversized canvas dimensions are rejected at 16384 instead of reaching the save path.
+- Schedule rules now start collapsed by default, use the built-in card collapse behavior, and keep validation messages visible without re-highlighting empty paired inputs.
+- Timetable group deletes now scan slide content for the actual `timetable_group_id` field, so groups that are still referenced by slides stay protected from deletion.
+- Timetable add and edit pages now keep cancel confirmation tied to timetable entry edits, so changes inside the entries table are treated as unsaved form changes.
+- Screen add and edit pages now keep the Player URL box in a stable two-column layout, so switching between the forms no longer causes the page to jump or shift.
+- Screen add pages now show the secondary Save and Close / Save and New actions, and screen edit delete actions now prompt for confirmation before removing the screen.
+- Admin user password resets now keep the selected user in view by returning to that user's edit page after saving.
+- Account password saves now refresh the page after the success toast is queued so the confirmation message stays visible.
+- Shared toast handling now preserves a pending success message across the redirect so refreshes do not drop the confirmation banner.
+- Announcement create and edit pages now keep the save action buttons visible, and the edit-page delete action now prompts for confirmation before deleting.
+- Active announcements are now blocked from deletion with a clearer edit-page message that explains why.
+- Slide template create now shows the background image remove button and clear flag, matching the edit page behavior.
+- Template create now exposes Save & Close and Save & New actions, and template edit delete actions now use the shared action-button helper with a confirmation prompt instead of a separate hidden form.
+- The advanced animation modal now shows intro, outro, and loop durations as 1-200% fields, with 100% saving back as 1000ms.
+- The advanced animation modal now hard-limits repeat counts to 999 so attention-seeker animations cannot be configured with unbounded loops.
+- Template editor region boxes now rerender when the canvas or stage resizes, and region width/height changes now keep the lock ratio, stay within the canvas, and shift back on-canvas instead of spilling over.
+- Background tasks and scheduled tasks now render timestamps in 24-hour format, and the background task queue keeps a confirmation prompt before clearing finished items.
+
+## 2.5.4 - 2026-08-03
+
+### Changed
+
+- The API source bearer token field now uses a password input with a right-side toggle to show or hide the token.
+
+### Fixed
+
+- QR code regions now render at the correct size in the slide editor preview, and the QR chip header now matches the other region cards.
+- The dashboard onboarding link now uses the player public base URL stored in the database instead of a `/screen/...` URL.
+
+## 2.5.3 - 2026-08-03
+
+### Changed
+
+- The user edit page delete action now shows a confirmation prompt before removing an account.
+
+### Fixed
+
+- Schedule modal cancel now restores the original rule set instead of keeping edits made after the modal opened.
+
+## 2.5.2 - 2026-08-03
+
+### Changed
+
+- Player page auth now writes a cookie for websocket reuse, and player and announcement sockets accept that cookie so they no longer depend on query-string tokens.
+- RSS and API region placeholder panels now use shared field-aware chip rendering, with updated spacing and defaults across the slide editor.
+- RTMP regions now default audio to enabled in the editor, and the slide rich-text editor no longer allows anchor tags.
+
+### Fixed
+
+- Player websocket auth now falls back to the `pulse_page_auth` cookie when the auth query parameter is unavailable.
+
+## 2.5.1 - 2026-08-03
+
+### Added
+
+- Template regions now include a dedicated advanced animation modal for editing intro, outro, and Attention Seekers settings directly.
+
+### Changed
+
+- Template region animation settings now store as a single JSON object with `intro`, `outro`, and `loop` keys.
+- The template editor advanced animation field now edits the JSON object directly instead of separate preset selects.
+- Animate.css is now loaded from vendored assets so template previews and player rendering use the local copy.
+
+### Fixed
+
+- Existing databases now migrate legacy animation columns into `animation_json` and then drop the old columns.
+
+## 2.5.0 - 2026-08-03
+
+### Added
+
+- Template regions now support intro, exit, and Attention Seekers animation presets in the editor, with in-canvas preview controls.
+
+### Changed
+
+- The template editor now locks editing while preview playback is running so animation changes are easier to inspect.
+
+### Fixed
+
+- Existing databases now receive the template region animation columns through the versioned migration path.
+
 ## 2.4.2 - 2026-08-02
 
 ### Added

Dockerfile

@@ -9,6 +9,9 @@ RUN npm install --omit=dev --no-audit --no-fund
 
 COPY src ./src
 
+RUN mkdir -p /app/src/web/public/vendor/animate.css && cp /app/node_modules/animate.css/animate.min.css /app/src/web/public/vendor/animate.css/animate.min.css
+RUN mkdir -p /app/src/player/public/vendor/animate.css && cp /app/node_modules/animate.css/animate.min.css /app/src/player/public/vendor/animate.css/animate.min.css
+
 RUN mkdir -p /app/media
 
 EXPOSE 3000

docs/schema.md

@@ -81,7 +81,7 @@ Primary keys are `id` unless noted otherwise. Timestamps are stored as `created_
 
 ### `c_template_regions`
 
-- `id`, `template_id`, `region_key`, `region_type`, `label`, `lock_ratio`, `x`, `y`, `width`, `height`, `z_index`, `created_at`, `created_by`, `modified_at`, `modified_by`
+- `id`, `template_id`, `region_key`, `region_type`, `label`, `font_family`, `lock_ratio`, `animation_json`, `x`, `y`, `width`, `height`, `z_index`, `created_at`, `created_by`, `modified_at`, `modified_by`
 - Foreign key:
         - `template_id` -> `c_templates.id` with `ON DELETE CASCADE`
 

package-lock.json

@@ -1,14 +1,15 @@
 {
   "name": "pulse-signage",
-  "version": "2.1.0",
+  "version": "2.5.9",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-signage",
-      "version": "2.0.0",
+      "version": "2.5.9",
       "dependencies": {
         "@sparticuz/chromium": "^137.0.0",
+        "animate.css": "^4.1.1",
         "bootstrap-icons": "1.11.3",
         "cropperjs": "^1.6.2",
         "dotenv": "^17.4.2",
@@ -18,7 +19,6 @@
         "multer": "^2.2.0",
         "mysql2": "^3.14.3",
         "puppeteer-core": "^24.16.0",
-        "qrcode": "^1.5.4",
         "sharp": "^0.35.3",
         "ws": "^8.21.0"
       },
@@ -755,6 +755,12 @@
         "node": ">= 14"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
+      "license": "MIT"
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -1082,15 +1088,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/camelcase": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
-      "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/chokidar": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
@@ -1129,17 +1126,6 @@
         "devtools-protocol": "*"
       }
     },
-    "node_modules/cliui": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
-      "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
-      "license": "ISC",
-      "dependencies": {
-        "string-width": "^4.2.0",
-        "strip-ansi": "^6.0.0",
-        "wrap-ansi": "^6.2.0"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1233,15 +1219,6 @@
         "ms": "2.0.0"
       }
     },
-    "node_modules/decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/degenerator": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/degenerator/-/degenerator-5.0.1.tgz",
@@ -1299,12 +1276,6 @@
       "integrity": "sha512-Tpm17fxYzt+J7VrGdc1k8YdRqS3YV7se/M6KeemEqvUbq/n7At1rWVuXMxQgpWkdwSdIEKYbU//Bve+Shm4YNQ==",
       "license": "BSD-3-Clause"
     },
-    "node_modules/dijkstrajs": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/dijkstrajs/-/dijkstrajs-1.0.3.tgz",
-      "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==",
-      "license": "MIT"
-    },
     "node_modules/dotenv": {
       "version": "17.4.2",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.4.2.tgz",
@@ -1611,19 +1582,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "license": "MIT",
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/follow-redirects": {
       "version": "1.16.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
@@ -2075,18 +2033,6 @@
       "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==",
       "license": "MIT"
     },
-    "node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "license": "MIT",
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/long": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/long/-/long-5.3.2.tgz",
@@ -2404,42 +2350,6 @@
         "wrappy": "1"
       }
     },
-    "node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "license": "MIT",
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "license": "MIT",
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/p-try": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
-      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/pac-proxy-agent": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/pac-proxy-agent/-/pac-proxy-agent-7.2.0.tgz",
@@ -2504,15 +2414,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/path-exists": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
-      "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/path-to-regexp": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz",
@@ -2538,15 +2439,6 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
-    "node_modules/pngjs": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/pngjs/-/pngjs-5.0.0.tgz",
-      "integrity": "sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/progress": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
@@ -2684,23 +2576,6 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
-    "node_modules/qrcode": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz",
-      "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==",
-      "license": "MIT",
-      "dependencies": {
-        "dijkstrajs": "^1.0.1",
-        "pngjs": "^5.0.0",
-        "yargs": "^15.3.1"
-      },
-      "bin": {
-        "qrcode": "bin/qrcode"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/qs": {
       "version": "6.15.3",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz",
@@ -2777,12 +2652,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/require-main-filename": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
-      "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
-      "license": "ISC"
-    },
     "node_modules/safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -2866,12 +2735,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
-      "license": "ISC"
-    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -3345,32 +3208,12 @@
       "integrity": "sha512-ARrjNjtWRRs2w4Tk7nqrf2gBI0QXWuOmMCx2hU+1jUt6d00MjMxURrhxhGbrsoiZKJrhTSTzbIrc554iKI10qw==",
       "license": "Apache-2.0"
     },
-    "node_modules/which-module": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/which-module/-/which-module-2.0.1.tgz",
-      "integrity": "sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==",
-      "license": "ISC"
-    },
     "node_modules/wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
       "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==",
       "license": "MIT"
     },
-    "node_modules/wrap-ansi": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
-      "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -3398,47 +3241,6 @@
         }
       }
     },
-    "node_modules/y18n": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
-      "integrity": "sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==",
-      "license": "ISC"
-    },
-    "node_modules/yargs": {
-      "version": "15.4.1",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
-      "integrity": "sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==",
-      "license": "MIT",
-      "dependencies": {
-        "cliui": "^6.0.0",
-        "decamelize": "^1.2.0",
-        "find-up": "^4.1.0",
-        "get-caller-file": "^2.0.1",
-        "require-directory": "^2.1.1",
-        "require-main-filename": "^2.0.0",
-        "set-blocking": "^2.0.0",
-        "string-width": "^4.2.0",
-        "which-module": "^2.0.0",
-        "y18n": "^4.0.0",
-        "yargs-parser": "^18.1.2"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/yargs-parser": {
-      "version": "18.1.3",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz",
-      "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==",
-      "license": "ISC",
-      "dependencies": {
-        "camelcase": "^5.0.0",
-        "decamelize": "^1.2.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/yauzl": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-signage",
-  "version": "2.4.2",
+  "version": "2.5.13",
   "private": false,
   "description": "Pulse Signage application with MySQL and media storage",
   "repository": {
@@ -13,10 +13,12 @@
     "start:web": "node -r dotenv/config src/web.js",
     "start:player": "node -r dotenv/config src/player.js",
     "dev:web": "nodemon -r dotenv/config src/web.js",
-    "dev:player": "nodemon -r dotenv/config src/player.js"
+    "dev:player": "nodemon -r dotenv/config src/player.js",
+    "test": "node --test"
   },
   "dependencies": {
     "@sparticuz/chromium": "^137.0.0",
+    "animate.css": "^4.1.1",
     "bootstrap-icons": "1.11.3",
     "cropperjs": "^1.6.2",
     "dotenv": "^17.4.2",
@@ -26,7 +28,6 @@
     "multer": "^2.2.0",
     "mysql2": "^3.14.3",
     "puppeteer-core": "^24.16.0",
-    "qrcode": "^1.5.4",
     "sharp": "^0.35.3",
     "ws": "^8.21.0"
   },

src/auth.js

@@ -7,6 +7,21 @@ const PASSWORD_KEY_LENGTH = 32;
 const PASSWORD_DIGEST = 'sha256';
 const SESSION_BYTES = 32;
 
+function validatePasswordStrength(password) {
+  const value = String(password || '');
+  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) {
+    return 'Password must be at least 10 characters and include 3 of: uppercase, lowercase, number, and symbol.';
+  }
+
+  return '';
+}
+
 function hashPassword(password, salt) {
   const safePassword = String(password || '');
   const safeSalt = salt || crypto.randomBytes(16).toString('hex');
@@ -40,6 +55,7 @@ function hashSessionToken(token) {
 module.exports = {
   hashPassword,
   verifyPassword,
+  validatePasswordStrength,
   createSessionToken,
   hashSessionToken
 };

src/common.js

@@ -37,6 +37,8 @@ module.exports = {
   slugify: data.slugify,
   uniqueScreenSlug: data.uniqueScreenSlug,
   parseJsonSafe: data.parseJsonSafe,
+  validateMaxLength: data.validateMaxLength,
+  truncateToMaxLength: data.truncateToMaxLength,
   fetchAdminData: data.fetchAdminData,
   fetchPlaylistsPage: data.fetchPlaylistsPage,
   fetchSlidesPage: data.fetchSlidesPage,
@@ -91,6 +93,7 @@ module.exports = {
   fetchCanvasSizesData: data.fetchCanvasSizesData,
   fetchCanvasSizeById: data.fetchCanvasSizeById,
   buildCanvasSizePayload: data.buildCanvasSizePayload,
+  MAX_CANVAS_SIZE_DIMENSION: data.MAX_CANVAS_SIZE_DIMENSION,
   buildSlidePayload: data.buildSlidePayload,
   extractTemplateRegions: data.extractTemplateRegions,
   buildTemplatePayload: data.buildTemplatePayload,

src/data/admin.js

@@ -22,9 +22,10 @@ async function fetchAdminData(pool) {
     ORDER BY s.id DESC
   `);
   const [screens] = await pool.query(`
-    SELECT s.id, s.name, s.slug, s.playlist_id, s.created_at, s.modified_at, s.created_by, s.modified_by, p.name AS playlist_name
+    SELECT s.id, s.name, s.slug, s.playlist_id, s.created_at, s.modified_at, s.created_by, s.modified_by, p.name AS playlist_name, pl.public_base_url
     FROM d_screens s
     LEFT JOIN c_playlists p ON p.id = s.playlist_id
+    LEFT JOIN d_players pl ON pl.device_id = s.player_id
     ORDER BY s.id DESC
   `);
   const [playlistSlides] = await pool.query(`
@@ -93,7 +94,7 @@ async function fetchSlidesPage(pool, page, pageSize, searchTerm, sortKey, sortDi
     LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
      ORDER BY s.id DESC`,
     countSql: 'SELECT COUNT(*) AS count FROM c_slides',
-    searchColumns: ['s.title', 'st.name', 's.content_json'],
+    searchColumns: ['s.title', 'st.name'],
     searchTerm: searchTerm,
     sortColumns: {
       title: 's.title',

src/data/announcements.js

@@ -6,6 +6,9 @@ const {
   DEFAULT_ANNOUNCEMENT_ICON,
   normalizeAnnouncementIcon: normalizeAnnouncementIconFromConfig
 } = require('./announcement-icons');
+const { validateMaxLength } = require('./utils');
+
+const SHORT_LABEL_MAX_LENGTH = 255;
 
 const ANNOUNCEMENT_TYPES = ['lower-third', 'fullscreen', 'top-banner'];
 const ANNOUNCEMENT_COLORS = ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'dark', 'light'];
@@ -57,7 +60,7 @@ function normalizeAnnouncementScreenIds(value) {
 
 function buildAnnouncementPayload(input) {
   const message = normalizeAnnouncementMessage(input && input.message);
-  const shortLabel = normalizeAnnouncementShortLabel(input && input.short_label);
+  const shortLabel = validateMaxLength(normalizeAnnouncementShortLabel(input && input.short_label), SHORT_LABEL_MAX_LENGTH, 'Announcement short description');
   const announcementType = normalizeAnnouncementType(input && input.announcement_type);
   const colorKey = normalizeAnnouncementColor(input && input.color_key);
   const iconKey = normalizeAnnouncementIconFromConfig(input && input.icon_key);

src/data/api-sources.js

@@ -2,7 +2,12 @@
 
 const http = require('http');
 const https = require('https');
-const { fetchPagedRows } = require('./utils');
+const { fetchPagedRows, validateMaxLength } = require('./utils');
+
+const NAME_MAX_LENGTH = 255;
+const URL_MAX_LENGTH = 1024;
+const AUTH_MAX_LENGTH = 255;
+const ITEMS_PATH_MAX_LENGTH = 255;
 
 function normalizeUpdateIntervalUnit(value) {
   const unit = String(value || '').trim().toLowerCase();
@@ -171,15 +176,15 @@ function buildApiSourcePayload(req, existingApiSource) {
     return fallbackValue;
   }
 
-  const name = String(req.body.name || fallback.name || '').trim();
+  const name = validateMaxLength(req.body.name || fallback.name || '', NAME_MAX_LENGTH, 'API source name');
-  const apiUrl = String(req.body.api_url || req.body.apiUrl || fallback.api_url || '').trim();
+  const apiUrl = validateMaxLength(req.body.api_url || req.body.apiUrl || fallback.api_url || '', URL_MAX_LENGTH, 'API source URL');
   const authMethod = normalizeAuthMethod(readBodyValue('auth_method', readBodyValue('authMethod', fallback.auth_method || 'none')));
-  const authUsername = String(readBodyValue('auth_username', readBodyValue('authUsername', fallback.auth_username || '')) || '').trim();
+  const authUsername = validateMaxLength(readBodyValue('auth_username', readBodyValue('authUsername', fallback.auth_username || '')) || '', AUTH_MAX_LENGTH, 'API source username');
-  const authPassword = String(readBodyValue('auth_password', readBodyValue('authPassword', fallback.auth_password || '')) || '');
+  const authPassword = validateMaxLength(readBodyValue('auth_password', readBodyValue('authPassword', fallback.auth_password || '')) || '', AUTH_MAX_LENGTH, 'API source password');
-  const authBearerToken = String(readBodyValue('auth_bearer_token', readBodyValue('authBearerToken', fallback.auth_bearer_token || '')) || '').trim();
+  const authBearerToken = validateMaxLength(readBodyValue('auth_bearer_token', readBodyValue('authBearerToken', fallback.auth_bearer_token || '')) || '', AUTH_MAX_LENGTH, 'API source bearer token');
-  const authHeaderName = String(readBodyValue('auth_header_name', readBodyValue('authHeaderName', fallback.auth_header_name || 'X-API-Key')) || 'X-API-Key').trim() || 'X-API-Key';
+  const authHeaderName = validateMaxLength(readBodyValue('auth_header_name', readBodyValue('authHeaderName', fallback.auth_header_name || 'X-API-Key')) || 'X-API-Key', AUTH_MAX_LENGTH, 'API source header name') || 'X-API-Key';
-  const authHeaderValue = String(readBodyValue('auth_header_value', readBodyValue('authHeaderValue', fallback.auth_header_value || '')) || '').trim();
+  const authHeaderValue = validateMaxLength(readBodyValue('auth_header_value', readBodyValue('authHeaderValue', fallback.auth_header_value || '')) || '', AUTH_MAX_LENGTH, 'API source header value');
-  const itemsPath = String(readBodyValue('items_path', readBodyValue('itemsPath', fallback.items_path || '')) || '').trim();
+  const itemsPath = validateMaxLength(readBodyValue('items_path', readBodyValue('itemsPath', fallback.items_path || '')) || '', ITEMS_PATH_MAX_LENGTH, 'API source items path');
   const updateIntervalValue = Math.max(1, Number(req.body.update_interval_value || req.body.updateIntervalValue || fallback.update_interval_value || 60));
   const updateIntervalUnit = normalizeUpdateIntervalUnit(req.body.update_interval_unit || req.body.updateIntervalUnit || fallback.update_interval_unit || 'minutes');
 

src/data/canvas-sizes.js

@@ -1,6 +1,7 @@
 // Canvas size data access and pagination helpers.
 
 const { fetchPagedRows } = require('./utils');
+const MAX_CANVAS_SIZE_DIMENSION = 16384;
 
 async function fetchCanvasSizesData(pool) {
   const [canvasSizes] = await pool.query('SELECT id, name, width, height, created_at, modified_at, created_by, modified_by FROM c_canvas_sizes ORDER BY width ASC, height ASC, name ASC');
@@ -33,10 +34,31 @@ async function fetchCanvasSizeById(pool, id) {
   return rows[0] || null;
 }
 
+function readCanvasDimension(rawValue, fallbackValue, fieldName) {
+  const sourceValue = rawValue !== undefined && rawValue !== null && String(rawValue).trim() !== ''
+    ? rawValue
+    : fallbackValue;
+  const numericValue = Number(sourceValue);
+
+  if (!Number.isFinite(numericValue)) {
+    const error = new Error('Canvas size ' + fieldName + ' must be a number.');
+    error.statusCode = 400;
+    throw error;
+  }
+
+  if (numericValue > MAX_CANVAS_SIZE_DIMENSION) {
+    const error = new Error('Canvas size dimensions must be 16384 or less.');
+    error.statusCode = 400;
+    throw error;
+  }
+
+  return Math.max(1, numericValue);
+}
+
 function buildCanvasSizePayload(req, existingCanvasSize) {
   const name = String(req.body.name || '').trim();
-  const width = Math.max(1, Number(req.body.width || (existingCanvasSize && existingCanvasSize.width) || 0));
+  const width = readCanvasDimension(req.body.width, existingCanvasSize && existingCanvasSize.width, 'width');
-  const height = Math.max(1, Number(req.body.height || (existingCanvasSize && existingCanvasSize.height) || 0));
+  const height = readCanvasDimension(req.body.height, existingCanvasSize && existingCanvasSize.height, 'height');
 
   if (!name) {
     const error = new Error('Canvas size name is required.');
@@ -55,5 +77,6 @@ module.exports = {
   fetchCanvasSizesData,
   fetchCanvasSizesPage,
   fetchCanvasSizeById,
-  buildCanvasSizePayload
+  buildCanvasSizePayload,
+  MAX_CANVAS_SIZE_DIMENSION
 };

src/data/index.js

@@ -9,14 +9,16 @@ const { fetchApiSourcesData, fetchApiSourcesPage, fetchApiSourceById, fetchApiSo
 const { fetchRssFeedsData, fetchRssFeedsPage, fetchRssFeedById, fetchRssFeedItemsByFeedId, normalizeRssFeedItem, buildRssFeedPayload, fetchRssFeedItems, replaceRssFeedItems } = require('./rss-feeds');
 const { slugify, uniqueScreenSlug, fetchScreenById, fetchScreenEditData, fetchScreenPlayerUrls, fetchScreenPlayerRecord } = require('./screens');
 const { fetchTemplateById, fetchTemplatesData, extractTemplateRegions, buildTemplatePayload } = require('./templates');
-const { fetchCanvasSizesData, fetchCanvasSizeById, buildCanvasSizePayload } = require('./canvas-sizes');
+const { fetchCanvasSizesData, fetchCanvasSizeById, buildCanvasSizePayload, MAX_CANVAS_SIZE_DIMENSION } = require('./canvas-sizes');
 const { fetchSlideById, buildSlidePayload } = require('./slides');
-const { parseJsonSafe, fetchDuplicateName } = require('./utils');
+const { parseJsonSafe, fetchDuplicateName, validateMaxLength, truncateToMaxLength } = require('./utils');
 
 module.exports = {
   slugify,
   uniqueScreenSlug,
   parseJsonSafe,
+  validateMaxLength,
+  truncateToMaxLength,
   fetchAdminData,
   fetchPlaylistsPage,
   fetchSlidesPage,
@@ -66,6 +68,7 @@ module.exports = {
   fetchCanvasSizesData,
   fetchCanvasSizeById,
   buildCanvasSizePayload,
+  MAX_CANVAS_SIZE_DIMENSION,
   buildSlidePayload,
   extractTemplateRegions,
   buildTemplatePayload,

src/data/qr-code.js

@@ -0,0 +1,562 @@
+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 puppeteer = require('puppeteer-core');
+const chromiumModule = require('@sparticuz/chromium');
+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);
+const chromium = chromiumModule && typeof chromiumModule.executablePath === 'function'
+  ? chromiumModule
+  : chromiumModule && chromiumModule.default && typeof chromiumModule.default.executablePath === 'function'
+    ? chromiumModule.default
+    : chromiumModule;
+let qrBrowserPromise = null;
+
+function escapeXml(value) {
+  return String(value === undefined || value === null ? '' : value).replace(/[&<>"']/g, function (character) {
+    return {
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&apos;'
+    }[character];
+  });
+}
+
+function serializeNode(node) {
+  if (!node) {
+    return '';
+  }
+  if (node.nodeType === 3) {
+    return escapeXml(node.textContent || '');
+  }
+
+  const attributeEntries = Object.keys(node.attributes || {}).map(function (name) {
+    return name + '="' + escapeXml(node.attributes[name]) + '"';
+  });
+  if (node.tagName === 'svg' && node.namespaceURI === 'http://www.w3.org/2000/svg' && !Object.prototype.hasOwnProperty.call(node.attributes || {}, 'xmlns')) {
+    attributeEntries.unshift('xmlns="http://www.w3.org/2000/svg"');
+  }
+  const attributes = attributeEntries.join(' ');
+  const children = (node.childNodes || []).map(serializeNode).join('') + escapeXml(node.textContent || '');
+  return '<' + node.tagName + (attributes ? ' ' + attributes : '') + '>' + children + '</' + node.tagName + '>';
+}
+
+function createDomNode(tagName, namespaceUri) {
+  return {
+    tagName: tagName,
+    namespaceURI: namespaceUri || null,
+    attributes: {},
+    childNodes: [],
+    parentNode: null,
+    nodeType: 1,
+    textContent: '',
+    style: {},
+    setAttribute: function (name, value) {
+      this.attributes[name] = String(value);
+    },
+    appendChild: function (child) {
+      if (child) {
+        this.childNodes.push(child);
+        child.parentNode = this;
+      }
+      return child;
+    },
+    removeChild: function (child) {
+      this.childNodes = this.childNodes.filter(function (node) { return node !== child; });
+      return child;
+    },
+    get firstChild() {
+      return this.childNodes[0] || null;
+    },
+    get outerHTML() {
+      return serializeNode(this);
+    }
+  };
+}
+
+function createCanvasContext() {
+  return {
+    fillStyle: '#000000',
+    strokeStyle: '#000000',
+    lineWidth: 1,
+    beginPath: function () {},
+    closePath: function () {},
+    clearRect: function () {},
+    fillRect: function () {},
+    strokeRect: function () {},
+    moveTo: function () {},
+    lineTo: function () {},
+    arc: function () {},
+    rect: function () {},
+    fill: function () {},
+    stroke: function () {},
+    save: function () {},
+    restore: function () {},
+    translate: function () {},
+    rotate: function () {},
+    scale: function () {},
+    setTransform: function () {},
+    transform: function () {},
+    drawImage: function () {},
+    measureText: function (text) {
+      return { width: String(text === undefined || text === null ? '' : text).length * 8 };
+    },
+    createLinearGradient: function () {
+      return { addColorStop: function () {} };
+    },
+    createRadialGradient: function () {
+      return { addColorStop: function () {} };
+    },
+    createPattern: function () {
+      return null;
+    },
+    getImageData: function () {
+      return { data: [] };
+    },
+    putImageData: function () {},
+    clip: function () {}
+  };
+}
+
+function createCanvasNode() {
+  const node = createDomNode('canvas', 'http://www.w3.org/1999/xhtml');
+  node.width = 0;
+  node.height = 0;
+  node.getContext = function () {
+    return createCanvasContext();
+  };
+  node.toDataURL = function () {
+    return '';
+  };
+  node.toBlob = function (callback) {
+    if (typeof callback === 'function') {
+      callback(null);
+    }
+  };
+  return node;
+}
+
+function createQrStylingWindow() {
+  const document = {
+    createElement: function (tagName) {
+      if (String(tagName || '').toLowerCase() === 'canvas') {
+        return createCanvasNode();
+      }
+      return createDomNode(tagName, 'http://www.w3.org/1999/xhtml');
+    },
+    createElementNS: function (namespaceUri, tagName) {
+      return createDomNode(tagName, namespaceUri);
+    },
+    createTextNode: function (text) {
+      return {
+        nodeType: 3,
+        textContent: String(text === undefined || text === null ? '' : text),
+        parentNode: null
+      };
+    },
+    body: createDomNode('body', 'http://www.w3.org/1999/xhtml'),
+    head: createDomNode('head', 'http://www.w3.org/1999/xhtml')
+  };
+
+  const window = {
+    document: document,
+    navigator: { userAgent: 'node' },
+    URL: {
+      createObjectURL: function () { return ''; },
+      revokeObjectURL: function () {}
+    }
+  };
+
+  window.window = window;
+  window.self = window;
+  window.Image = class {
+    constructor() {
+      this.onload = null;
+      this.onerror = null;
+      this.width = 1;
+      this.height = 1;
+      this.naturalWidth = 1;
+      this.naturalHeight = 1;
+      this._src = '';
+    }
+
+    set src(value) {
+      this._src = String(value === undefined || value === null ? '' : value);
+      if (typeof this.onload === 'function') {
+        setTimeout(() => this.onload(), 0);
+      }
+    }
+
+    get src() {
+      return this._src;
+    }
+  };
+  window.HTMLImageElement = window.Image;
+
+  window.XMLSerializer = class {
+    serializeToString(node) {
+      return serializeNode(node);
+    }
+  };
+
+  return { window: window, document: document };
+}
+
+async function renderStyledQrRawData(options, format) {
+  const previousWindow = global.window;
+  const previousDocument = global.document;
+  const previousXMLSerializer = global.XMLSerializer;
+  const dom = createQrStylingWindow();
+
+  global.window = dom.window;
+  global.document = dom.document;
+  global.XMLSerializer = dom.window.XMLSerializer;
+
+  try {
+    const qrCode = new QRCodeStyling(options);
+    const blob = await qrCode.getRawData(format);
+    if (!blob) {
+      return '';
+    }
+
+    if (typeof blob === 'string') {
+      return blob;
+    }
+
+    if (typeof blob.text === 'function') {
+      return blob.text();
+    }
+
+    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 binary;
+    }
+
+    return '';
+  } finally {
+    global.window = previousWindow;
+    global.document = previousDocument;
+    global.XMLSerializer = previousXMLSerializer;
+  }
+}
+
+function svgToDataUrl(svg) {
+  const markup = String(svg === undefined || svg === null ? '' : svg).trim();
+  if (!markup) {
+    return '';
+  }
+
+  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(markup);
+}
+
+function normalizeQrStyleColor(value, fallback) {
+  const raw = String(value === undefined || value === null ? '' : value).trim();
+  return raw || fallback;
+}
+
+function normalizeQrStyleNumber(value, fallback, min, max) {
+  const parsed = Number(value);
+  if (!Number.isFinite(parsed)) {
+    return fallback;
+  }
+
+  let next = parsed;
+  if (typeof min === 'number') {
+    next = Math.max(min, next);
+  }
+  if (typeof max === 'number') {
+    next = Math.min(max, next);
+  }
+  return next;
+}
+
+function buildQrStylingOptions(source) {
+  const text = String(source && source.value === undefined ? '' : source && source.value === null ? '' : source.value || '').trim();
+  const qrStyle = source && typeof source === 'object' ? source : {};
+  const dotsGradient = qrStyle.qr_dots_color_mode === 'gradient' ? {
+    type: String(qrStyle.qr_dots_gradient_type || 'linear').trim() || 'linear',
+    rotation: normalizeQrStyleNumber(qrStyle.qr_dots_gradient_rotation, 0, undefined, undefined),
+    colorStops: [
+      { offset: 0, color: normalizeQrStyleColor(qrStyle.qr_dots_gradient_color_1, normalizeQrStyleColor(qrStyle.qr_dots_color, '#000000')) },
+      { offset: 1, color: normalizeQrStyleColor(qrStyle.qr_dots_gradient_color_2, '#ffffff') }
+    ]
+  } : null;
+  const cornersSquareGradient = qrStyle.qr_corners_square_color_mode === 'gradient' ? {
+    type: String(qrStyle.qr_corners_square_gradient_type || 'linear').trim() || 'linear',
+    rotation: normalizeQrStyleNumber(qrStyle.qr_corners_square_gradient_rotation, 0, undefined, undefined),
+    colorStops: [
+      { offset: 0, color: normalizeQrStyleColor(qrStyle.qr_corners_square_gradient_color_1, normalizeQrStyleColor(qrStyle.qr_corners_square_color, '#000000')) },
+      { offset: 1, color: normalizeQrStyleColor(qrStyle.qr_corners_square_gradient_color_2, '#ffffff') }
+    ]
+  } : null;
+  const cornersDotGradient = qrStyle.qr_corners_dot_color_mode === 'gradient' ? {
+    type: String(qrStyle.qr_corners_dot_gradient_type || 'linear').trim() || 'linear',
+    rotation: normalizeQrStyleNumber(qrStyle.qr_corners_dot_gradient_rotation, 0, undefined, undefined),
+    colorStops: [
+      { offset: 0, color: normalizeQrStyleColor(qrStyle.qr_corners_dot_gradient_color_1, normalizeQrStyleColor(qrStyle.qr_corners_dot_color, '#000000')) },
+      { offset: 1, color: normalizeQrStyleColor(qrStyle.qr_corners_dot_gradient_color_2, '#ffffff') }
+    ]
+  } : null;
+
+  return {
+    width: QR_PNG_WIDTH,
+    height: QR_PNG_WIDTH,
+    type: 'canvas',
+    data: text,
+    margin: normalizeQrStyleNumber(qrStyle.qr_margin, 10, 0, undefined),
+    qrOptions: {},
+    dotsOptions: {
+      type: String(qrStyle.qr_dots_type || 'square').trim() || 'square',
+      color: normalizeQrStyleColor(qrStyle.qr_dots_color, '#000000'),
+      gradient: dotsGradient || undefined
+    },
+    cornersSquareOptions: {
+      type: String(qrStyle.qr_corners_square_type || 'square').trim() || 'square',
+      color: normalizeQrStyleColor(qrStyle.qr_corners_square_color, '#000000'),
+      gradient: cornersSquareGradient || undefined
+    },
+    cornersDotOptions: {
+      type: String(qrStyle.qr_corners_dot_type || 'square').trim() || 'square',
+      color: normalizeQrStyleColor(qrStyle.qr_corners_dot_color, '#000000'),
+      gradient: cornersDotGradient || undefined
+    },
+    backgroundOptions: {
+      color: qrStyle.qr_background_transparent ? 'transparent' : normalizeQrStyleColor(qrStyle.qr_background_color, '#ffffff')
+    },
+    image: String(qrStyle.qr_image || '').trim() || undefined,
+    imageOptions: {
+      hideBackgroundDots: Boolean(qrStyle.qr_image_hide_background_dots),
+      imageSize: normalizeQrStyleNumber(qrStyle.qr_image_size, 0.4, 0, 1),
+      margin: normalizeQrStyleNumber(qrStyle.qr_image_margin, 5, 0, undefined)
+    }
+  };
+}
+
+function getQrBrowser() {
+  if (qrBrowserPromise) {
+    return qrBrowserPromise;
+  }
+
+  qrBrowserPromise = (async function () {
+    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);
+  if (!options.data) {
+    return '';
+  }
+
+  return svgToDataUrl(await createStyledQrCodeSvg(options.data));
+}
+
+async function createStyledQrCodeSvg(value) {
+  const source = value && typeof value === 'object' ? value : { value: value };
+  const options = buildQrStylingOptions(source);
+  if (!options.data) {
+    return '';
+  }
+
+  return renderStyledQrRawData(options, 'svg');
+}
+
+async function createQrCodeDataUrlPlain(value) {
+  return createStyledQrCodeDataUrl(value);
+}
+
+async function createQrCodeSvg(value) {
+  return createStyledQrCodeSvg(value);
+}
+
+async function createQrCodeDataUrl(value) {
+  return createStyledQrCodeDataUrl(value);
+}
+
+async function buildQrCodeContent(value, options) {
+  const source = value && typeof value === 'object' ? value : { value: value };
+  const forcePreviewRefresh = Boolean(options && options.forcePreviewRefresh);
+  const text = String(source.value === undefined || source.value === null ? '' : source.value).trim();
+  const hasBooleanField = function (key) {
+    return Object.prototype.hasOwnProperty.call(source, key);
+  };
+  const margin = Number(source.qr_margin);
+  const normalizeHex = function (value) {
+    const raw = String(value === undefined || value === null ? '' : value).trim();
+    return raw || undefined;
+  };
+  const normalizeNumber = function (value, min, max, round) {
+    const parsed = Number(value);
+    if (!Number.isFinite(parsed)) {
+      return undefined;
+    }
+
+    let next = parsed;
+    if (round) {
+      next = Math.round(next);
+    }
+    if (typeof min === 'number') {
+      next = Math.max(min, next);
+    }
+    if (typeof max === 'number') {
+      next = Math.min(max, next);
+    }
+    return next;
+  };
+  const style = {
+    qr_margin: Number.isFinite(margin) && margin >= 0 ? Math.round(margin) : undefined,
+    qr_border_radius: Number.isFinite(Number(source.qr_border_radius)) ? Math.max(0, Math.round(Number(source.qr_border_radius))) : undefined,
+    qr_background_color: String(source.qr_background_color === undefined || source.qr_background_color === null ? '' : source.qr_background_color).trim() || undefined,
+    qr_background_transparent: hasBooleanField('qr_background_transparent') ? Boolean(source.qr_background_transparent) : undefined,
+    qr_background_color_mode: 'single',
+    qr_background_gradient_type: String(source.qr_background_gradient_type === undefined || source.qr_background_gradient_type === null ? '' : source.qr_background_gradient_type).trim() || undefined,
+    qr_background_gradient_rotation: normalizeNumber(source.qr_background_gradient_rotation),
+    qr_background_gradient_color_1: normalizeHex(source.qr_background_gradient_color_1),
+    qr_background_gradient_color_2: normalizeHex(source.qr_background_gradient_color_2),
+    qr_dots_color: String(source.qr_dots_color === undefined || source.qr_dots_color === null ? '' : source.qr_dots_color).trim() || undefined,
+    qr_dots_type: String(source.qr_dots_type === undefined || source.qr_dots_type === null ? '' : source.qr_dots_type).trim() || undefined,
+    qr_dots_color_mode: String(source.qr_dots_color_mode === undefined || source.qr_dots_color_mode === null ? '' : source.qr_dots_color_mode).trim() || undefined,
+    qr_dots_gradient_type: String(source.qr_dots_gradient_type === undefined || source.qr_dots_gradient_type === null ? '' : source.qr_dots_gradient_type).trim() || undefined,
+    qr_dots_gradient_rotation: normalizeNumber(source.qr_dots_gradient_rotation),
+    qr_dots_gradient_color_1: normalizeHex(source.qr_dots_gradient_color_1),
+    qr_dots_gradient_color_2: normalizeHex(source.qr_dots_gradient_color_2),
+    qr_corners_square_color: String(source.qr_corners_square_color === undefined || source.qr_corners_square_color === null ? '' : source.qr_corners_square_color).trim() || undefined,
+    qr_corners_square_type: String(source.qr_corners_square_type === undefined || source.qr_corners_square_type === null ? '' : source.qr_corners_square_type).trim() || undefined,
+    qr_corners_square_color_mode: String(source.qr_corners_square_color_mode === undefined || source.qr_corners_square_color_mode === null ? '' : source.qr_corners_square_color_mode).trim() || undefined,
+    qr_corners_square_gradient_type: String(source.qr_corners_square_gradient_type === undefined || source.qr_corners_square_gradient_type === null ? '' : source.qr_corners_square_gradient_type).trim() || undefined,
+    qr_corners_square_gradient_rotation: normalizeNumber(source.qr_corners_square_gradient_rotation),
+    qr_corners_square_gradient_color_1: normalizeHex(source.qr_corners_square_gradient_color_1),
+    qr_corners_square_gradient_color_2: normalizeHex(source.qr_corners_square_gradient_color_2),
+    qr_corners_dot_color: String(source.qr_corners_dot_color === undefined || source.qr_corners_dot_color === null ? '' : source.qr_corners_dot_color).trim() || undefined,
+    qr_corners_dot_type: String(source.qr_corners_dot_type === undefined || source.qr_corners_dot_type === null ? '' : source.qr_corners_dot_type).trim() || undefined,
+    qr_corners_dot_color_mode: String(source.qr_corners_dot_color_mode === undefined || source.qr_corners_dot_color_mode === null ? '' : source.qr_corners_dot_color_mode).trim() || undefined,
+    qr_corners_dot_gradient_type: String(source.qr_corners_dot_gradient_type === undefined || source.qr_corners_dot_gradient_type === null ? '' : source.qr_corners_dot_gradient_type).trim() || undefined,
+    qr_corners_dot_gradient_rotation: normalizeNumber(source.qr_corners_dot_gradient_rotation),
+    qr_corners_dot_gradient_color_1: normalizeHex(source.qr_corners_dot_gradient_color_1),
+    qr_corners_dot_gradient_color_2: normalizeHex(source.qr_corners_dot_gradient_color_2),
+    qr_image: String(source.qr_image === undefined || source.qr_image === null ? '' : source.qr_image).trim() || undefined,
+    qr_image_size: Number.isFinite(Number(source.qr_image_size)) ? Math.max(0, Math.min(1, Number(source.qr_image_size))) : undefined,
+    qr_image_margin: Number.isFinite(Number(source.qr_image_margin)) ? Math.max(0, Math.round(Number(source.qr_image_margin))) : undefined,
+    qr_image_hide_background_dots: hasBooleanField('qr_image_hide_background_dots') ? Boolean(source.qr_image_hide_background_dots) : undefined
+  };
+  const content = {
+    type: 'qr-code',
+    value: text
+  };
+
+  Object.keys(style).forEach((key) => {
+    if (style[key] !== undefined) {
+      content[key] = style[key];
+    }
+  });
+
+  content.qr_background_use_gradient = false;
+  content.qr_dots_use_gradient = content.qr_dots_gradient_type && content.qr_dots_gradient_type !== 'none';
+  content.qr_corners_square_use_gradient = content.qr_corners_square_gradient_type && content.qr_corners_square_gradient_type !== 'none';
+  content.qr_corners_dot_use_gradient = content.qr_corners_dot_gradient_type && content.qr_corners_dot_gradient_type !== 'none';
+
+  const svg = String(source.qr_svg === undefined || source.qr_svg === null ? '' : source.qr_svg).trim();
+  if (svg) {
+    content.qr_svg = svg;
+  }
+
+  const preview = forcePreviewRefresh ? '' : String(source.qr_preview === undefined || source.qr_preview === null ? '' : source.qr_preview).trim();
+  if (preview) {
+    content.qr_preview = preview;
+  }
+
+  if (text && !content.qr_preview) {
+    const generatedSvg = await createQrCodeSvg(text);
+    if (generatedSvg) {
+      content.qr_svg = generatedSvg;
+    }
+    const generatedDataUrl = await createStyledQrCodeDataUrl(content);
+    if (generatedDataUrl) {
+      content.qr_preview = generatedDataUrl;
+    }
+  }
+
+  return content;
+}
+
+module.exports = {
+  createQrCodeSvg,
+  createStyledQrCodeSvg,
+  createStyledQrCodeDataUrl,
+  createQrCodeDataUrl,
+  buildQrCodeContent
+};

src/data/rss-feeds.js

@@ -2,7 +2,10 @@
 
 const http = require('http');
 const https = require('https');
-const { fetchPagedRows } = require('./utils');
+const { fetchPagedRows, validateMaxLength } = require('./utils');
+
+const NAME_MAX_LENGTH = 255;
+const URL_MAX_LENGTH = 1024;
 
 function normalizeUpdateIntervalUnit(value) {
   const unit = String(value || '').trim().toLowerCase();
@@ -255,8 +258,8 @@ async function replaceRssFeedItems(connection, rssFeedId, items) {
 
 function buildRssFeedPayload(req, existingRssFeed) {
   const fallback = existingRssFeed || {};
-  const name = String(req.body.name || fallback.name || '').trim();
+  const name = validateMaxLength(req.body.name || fallback.name || '', NAME_MAX_LENGTH, 'RSS feed name');
-  const feedUrl = String(req.body.feed_url || req.body.feedUrl || fallback.feed_url || '').trim();
+  const feedUrl = validateMaxLength(req.body.feed_url || req.body.feedUrl || fallback.feed_url || '', URL_MAX_LENGTH, 'RSS feed URL');
   const updateIntervalValue = Math.max(1, Number(req.body.update_interval_value || req.body.updateIntervalValue || fallback.update_interval_value || 60));
   const updateIntervalUnit = normalizeUpdateIntervalUnit(req.body.update_interval_unit || req.body.updateIntervalUnit || fallback.update_interval_unit || 'minutes');
   const itemLimit = Math.max(1, Number(req.body.item_limit || req.body.itemLimit || fallback.item_limit || 1));

src/data/schedules.js

@@ -1,6 +1,9 @@
 // Timetable group and entry data access helpers.
 
-const { fetchPagedRows } = require('./utils');
+const { fetchPagedRows, validateMaxLength } = require('./utils');
+
+const NAME_MAX_LENGTH = 255;
+const DESCRIPTION_MAX_LENGTH = 255;
 
 function normalizeDisplayMode(value) {
   const mode = String(value || 'upcoming').trim().toLowerCase();
@@ -95,8 +98,8 @@ async function fetchTimetableEntriesByGroupId(pool, timetableGroupId) {
 
 function buildTimetableGroupPayload(req, existingTimetableGroup) {
   const fallback = existingTimetableGroup || {};
-  const name = String(req.body.name || fallback.name || '').trim();
+  const name = validateMaxLength(req.body.name || fallback.name || '', NAME_MAX_LENGTH, 'Timetable group name');
-  const shortDescription = String(req.body.short_description || req.body.shortDescription || fallback.short_description || '').trim();
+  const shortDescription = validateMaxLength(req.body.short_description || req.body.shortDescription || fallback.short_description || '', DESCRIPTION_MAX_LENGTH, 'Timetable group description');
 
   if (!name) {
     const error = new Error('Timetable group name is required.');

src/data/slides.js

@@ -1,7 +1,10 @@
 // Slide data access helpers, including rich-text normalization and payload building.
 
 const { fetchTemplateById } = require('./templates');
-const { parseJsonSafe } = require('./utils');
+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;
@@ -111,9 +114,130 @@ function getTextRegionStyle(body, region, existingContent) {
   };
 }
 
-function buildTemplateContent(template, body, filesByField, existingContent) {
+function getQrRegionStyle(body, region, existingContent) {
+  const existing = existingContent && existingContent[region.region_key] ? existingContent[region.region_key] : {};
+  const styleKeys = [
+    'qr_margin',
+    'qr_background_color',
+    'qr_background_transparent',
+    'qr_background_color_mode',
+    'qr_background_gradient_type',
+    'qr_background_gradient_rotation',
+    'qr_background_gradient_color_1',
+    'qr_background_gradient_color_2',
+    'qr_dots_color',
+    'qr_dots_type',
+    'qr_dots_color_mode',
+    'qr_dots_gradient_type',
+    'qr_dots_gradient_rotation',
+    'qr_dots_gradient_color_1',
+    'qr_dots_gradient_color_2',
+    'qr_corners_square_color',
+    'qr_corners_square_type',
+    'qr_corners_square_color_mode',
+    'qr_corners_square_gradient_type',
+    'qr_corners_square_gradient_rotation',
+    'qr_corners_square_gradient_color_1',
+    'qr_corners_square_gradient_color_2',
+    'qr_corners_dot_color',
+    'qr_corners_dot_type',
+    'qr_corners_dot_color_mode',
+    'qr_corners_dot_gradient_type',
+    'qr_corners_dot_gradient_rotation',
+    'qr_corners_dot_gradient_color_1',
+    'qr_corners_dot_gradient_color_2',
+    'qr_image',
+    'qr_image_size',
+    'qr_image_margin',
+    'qr_image_hide_background_dots',
+    'qr_border_radius'
+  ];
+  const style = {};
+
+  styleKeys.forEach((key) => {
+    const fieldNames = [`region_${key}_${region.id}`, `${key}_${region.id}`];
+    let fieldName = fieldNames[0];
+    let hasSubmittedValue = false;
+    let submitted;
+
+    for (let index = 0; index < fieldNames.length; index += 1) {
+      const candidate = fieldNames[index];
+      if (Object.prototype.hasOwnProperty.call(body || {}, candidate)) {
+        fieldName = candidate;
+        hasSubmittedValue = true;
+        submitted = body[candidate];
+        break;
+      }
+    }
+
+    const value = String(submitted || '').trim();
+
+    if (key === 'qr_background_transparent' || key === 'qr_image_hide_background_dots') {
+      style[key] = hasSubmittedValue;
+      return;
+    }
+
+    if (key === 'qr_background_color_mode' || key === 'qr_dots_color_mode' || key === 'qr_corners_square_color_mode' || key === 'qr_corners_dot_color_mode' || key === 'qr_background_gradient_type' || key === 'qr_dots_gradient_type' || key === 'qr_corners_square_gradient_type' || key === 'qr_corners_dot_gradient_type') {
+      style[key] = value === 'none' ? 'none' : value;
+      return;
+    }
+
+    if (key === 'qr_image') {
+      style[key] = value;
+      return;
+    }
+
+    if (submitted === undefined) {
+      if (existing[key] !== undefined && existing[key] !== null && String(existing[key]).trim() !== '') {
+        style[key] = existing[key];
+      }
+      return;
+    }
+
+    if (value !== '') {
+      if (key === 'qr_margin') {
+        const parsedMargin = Number(value);
+        if (Number.isFinite(parsedMargin)) {
+          style[key] = Math.max(0, Math.round(parsedMargin));
+        }
+        return;
+      }
+
+      if (key === 'qr_image_size') {
+        const parsedSize = Number(value);
+        if (Number.isFinite(parsedSize)) {
+          style[key] = Math.max(0, Math.min(1, parsedSize));
+        }
+        return;
+      }
+
+      if (key === 'qr_image_margin' || key === 'qr_border_radius') {
+        const parsedImageMargin = Number(value);
+        if (Number.isFinite(parsedImageMargin)) {
+          style[key] = Math.max(0, Math.round(parsedImageMargin));
+        }
+        return;
+      }
+
+      style[key] = value;
+    }
+  });
+
+  return style;
+}
+
+async function getRssFeedItemCount(pool, feedId) {
+  const [rows] = await pool.query(
+    'SELECT COUNT(*) AS count FROM i_rss_feed_items WHERE rss_feed_id = ?',
+    [feedId]
+  );
+
+  return Number(rows && rows[0] && rows[0].count) || 0;
+}
+
+async function buildTemplateContent(pool, template, body, filesByField, existingContent) {
   const content = {};
-  template.regions.forEach((region) => {
+  for (const region of template.regions) {
     if (region.region_type === 'image') {
       const uploaded = filesByField[`region_image_${region.id}`];
       const existing = body[`existing_region_image_${region.id}`];
@@ -142,6 +266,24 @@ function buildTemplateContent(template, body, filesByField, existingContent) {
         type: 'webpage',
         value: submitted === undefined ? current : String(submitted || '').trim()
       };
+    } else if (region.region_type === 'qr-code') {
+      const uploadedImage = filesByField[`region_qr_image_${region.id}`];
+      const submitted = body[`region_qr_code_${region.id}`];
+      const submittedSvg = body[`region_qr_svg_${region.id}`];
+      const submittedPreview = body[`region_qr_preview_${region.id}`];
+      const existingImage = body[`existing_region_qr_image_${region.id}`];
+      const current = existingContent && existingContent[region.region_key] ? existingContent[region.region_key] : {};
+      const nextValue = submitted === undefined ? String(current.value !== undefined ? current.value : current.qr_code || '').trim() : String(submitted || '').trim();
+      const qrStyle = getQrRegionStyle(body, region, existingContent);
+      delete qrStyle.qr_image;
+      content[region.region_key] = {
+        type: 'qr-code',
+        value: nextValue,
+        qr_svg: submittedSvg === undefined ? String(current.qr_svg || '').trim() : String(submittedSvg || '').trim(),
+        qr_preview: submittedPreview === undefined ? String(current.qr_preview || '').trim() : String(submittedPreview || '').trim(),
+        qr_image: uploadedImage ? `/media/uploads/${uploadedImage.filename}` : String(existingImage === undefined ? String(current.qr_image || '').trim() : String(existingImage || '').trim()),
+        ...qrStyle
+      };
     } else if (region.region_type === 'rtmp') {
       const submitted = body[`region_rtmp_${region.id}`];
       const current = existingContent && existingContent[region.region_key] ? existingContent[region.region_key] : {};
@@ -173,11 +315,13 @@ function buildTemplateContent(template, body, filesByField, existingContent) {
       const feedId = body[`region_rss_feed_id_${region.id}`];
       const itemNumber = body[`region_rss_item_number_${region.id}`];
       const parsedItemNumber = Math.max(1, Number(itemNumber || current.item_number || 1));
+      const normalizedFeedId = feedId === undefined || feedId === null || feedId === '' ? Number(current.feed_id || 0) : Number(feedId);
+      const itemCount = normalizedFeedId > 0 ? Math.max(1, await getRssFeedItemCount(pool, normalizedFeedId) || 1) : 1;
       content[region.region_key] = {
         type: 'rss',
         value: stripEditorOnlyMarkup(normalizeEditorMarkup(submitted === undefined ? String(current.value || '') : String(submitted || ''))),
         feed_id: feedId === undefined || feedId === null || feedId === '' ? (current.feed_id || null) : Number(feedId),
-        item_number: Number.isFinite(parsedItemNumber) && parsedItemNumber > 0 ? parsedItemNumber : 1,
+        item_number: Math.min(itemCount, Number.isFinite(parsedItemNumber) && parsedItemNumber > 0 ? parsedItemNumber : 1),
         variable_name: 'item',
         font_family: style.font_family,
         font_size: style.font_size,
@@ -202,7 +346,7 @@ function buildTemplateContent(template, body, filesByField, existingContent) {
         font_size: style.font_size,
         font_color: style.font_color
       };
-    } else if (!['text', 'image', 'video', 'webpage', 'html', 'rtmp', 'rss', 'api'].includes(String(region.region_type || '').trim())) {
+    } else if (!['text', 'image', 'video', 'webpage', 'qr-code', 'html', 'rtmp', 'rss', 'api'].includes(String(region.region_type || '').trim())) {
       const current = existingContent && existingContent[region.region_key] && typeof existingContent[region.region_key] === 'object' ? existingContent[region.region_key] : {};
       const suffix = '_' + region.id;
       const generic = {};
@@ -249,12 +393,12 @@ function buildTemplateContent(template, body, filesByField, existingContent) {
         font_color: style.font_color
       };
     }
-  });
+  }
   return content;
 }
 
 async function buildSlidePayload(pool, req, existingSlide) {
-  const title = String(req.body.title || '').trim();
+  const title = validateMaxLength(req.body.title || '', TITLE_MAX_LENGTH, 'Slide title');
   const templateId = req.body.template_id ? Number(req.body.template_id) : null;
   const filesByField = getFilesByField(req.files || []);
   const template = templateId ? await fetchTemplateById(pool, templateId) : null;
@@ -273,10 +417,22 @@ async function buildSlidePayload(pool, req, existingSlide) {
   }
 
   if (template) {
+    const content = await buildTemplateContent(pool, template, req.body, filesByField, existingContent);
+    await Promise.all(Object.keys(content).map(async function (regionKey) {
+      const region = template.regions.find(function (item) {
+        return String(item.region_key || '').trim() === regionKey;
+      });
+      if (!region || region.region_type !== 'qr-code') {
+        return;
+      }
+
+      content[regionKey] = await buildQrCodeContent(content[regionKey]);
+    }));
+
     return {
       title,
       templateId: template.id,
-      contentJson: JSON.stringify(buildTemplateContent(template, req.body, filesByField, existingContent))
+      contentJson: JSON.stringify(content)
     };
   }
 

src/data/templates.js

@@ -1,6 +1,10 @@
 // Template data access helpers and region normalization logic.
 
-const { parseJsonSafe, readFormArray } = require('./utils');
+const { parseJsonSafe, readFormArray, validateMaxLength } = require('./utils');
+const animationPresets = require('../web/public/js/templates/animation-presets');
+
+const TEMPLATE_NAME_MAX_LENGTH = 255;
+const REGION_NAME_MAX_LENGTH = 255;
 
 function sanitizeBackgroundColor(value) {
   const raw = String(value || '').trim();
@@ -23,6 +27,61 @@ function normalizeTemplateRegionLockRatio(value) {
   return rawRatio.replace(/\s+/g, '');
 }
 
+function normalizeTemplateRegionAnimation(value) {
+  if (animationPresets && typeof animationPresets.normalize === 'function') {
+    return animationPresets.normalize(value);
+  }
+
+  const allowed = new Set(
+    Array.isArray(animationPresets && animationPresets.allValues) && animationPresets.allValues.length
+      ? animationPresets.allValues
+      : ['none', 'fadeIn', 'fadeInDown', 'fadeInLeft', 'fadeInRight', 'fadeInUp', 'zoomIn', 'zoomInDown', 'zoomInLeft', 'zoomInRight', 'zoomInUp', 'slideInDown', 'slideInLeft', 'slideInRight', 'slideInUp', 'fadeOut', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight', 'fadeOutUp', 'zoomOut', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight', 'zoomOutUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight', 'slideOutUp', 'backInDown', 'backInLeft', 'backInRight', 'backInUp', 'backOutDown', 'backOutLeft', 'backOutRight', 'backOutUp', 'bounceIn', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceInUp', 'bounceOut', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight', 'bounceOutUp', 'flip', 'flipInX', 'flipInY', 'flipOutX', 'flipOutY', 'lightSpeedInLeft', 'lightSpeedInRight', 'lightSpeedOutLeft', 'lightSpeedOutRight', 'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight', 'hinge', 'jackInTheBox', 'rollIn', 'rollOut', 'flash', 'pulse', 'rubberBand', 'shakeX', 'shakeY', 'headShake', 'swing', 'tada', 'wobble', 'jello', 'heartBeat', 'bounce']
+  );
+  const raw = String(value || '').trim().toLowerCase();
+  return allowed.has(raw) ? raw : 'none';
+}
+
+function normalizeTemplateRegionAnimationStep(value, fallbackPreset) {
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    const normalized = {};
+    Object.keys(value).forEach((key) => {
+      normalized[key] = value[key];
+    });
+    normalized.preset = normalizeTemplateRegionAnimation(value.preset !== undefined ? value.preset : fallbackPreset || 'none');
+    return normalized;
+  }
+
+  return {
+    preset: normalizeTemplateRegionAnimation(typeof value === 'string' ? value : fallbackPreset || 'none')
+  };
+}
+
+function normalizeTemplateRegionAnimationConfig(value) {
+  let raw = value;
+  if (typeof raw === 'string') {
+    const text = String(raw || '').trim();
+    if (!text) {
+      raw = null;
+    } else {
+      try {
+        raw = JSON.parse(text);
+      } catch (_error) {
+        raw = null;
+      }
+    }
+  }
+
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+    raw = {};
+  }
+
+  return {
+    intro: normalizeTemplateRegionAnimationStep(raw.intro, 'none'),
+    outro: normalizeTemplateRegionAnimationStep(raw.outro !== undefined ? raw.outro : raw.out, 'none'),
+    loop: normalizeTemplateRegionAnimationStep(raw.loop, 'none')
+  };
+}
+
 function normalizeTemplateRegionName(value) {
   return String(value || '').trim();
 }
@@ -57,7 +116,7 @@ async function fetchTemplateById(pool, id) {
     return null;
   }
   const template = templates[0];
-  const [regions] = await pool.query('SELECT id, template_id, region_key, region_type, label, lock_ratio, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM c_template_regions WHERE template_id = ? ORDER BY z_index ASC, id ASC', [id]);
+  const [regions] = await pool.query('SELECT id, template_id, region_key, region_type, label, lock_ratio, animation_json, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM c_template_regions WHERE template_id = ? ORDER BY z_index ASC, id ASC', [id]);
   template.regions = regions;
   return template;
 }
@@ -70,7 +129,7 @@ async function fetchTemplatesData(pool) {
     LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
     ORDER BY st.id DESC
   `);
-  const [templateRegions] = await pool.query('SELECT id, template_id, region_key, region_type, label, lock_ratio, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM c_template_regions ORDER BY template_id ASC, z_index ASC, id ASC');
+  const [templateRegions] = await pool.query('SELECT id, template_id, region_key, region_type, label, lock_ratio, animation_json, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM c_template_regions ORDER BY template_id ASC, z_index ASC, id ASC');
   return { templates, templateRegions };
 }
 
@@ -81,11 +140,13 @@ function extractTemplateRegions(body) {
     if (Array.isArray(parsed)) {
       return parsed.map((region) => {
         const regionType = normalizeTemplateRegionType(region.region_type);
+        const regionName = validateMaxLength(region.region_name || region.region_key || region.label || '', REGION_NAME_MAX_LENGTH, 'Region name');
         return {
-          region_key: String(region.region_name || region.region_key || region.label || '').trim(),
+          region_key: regionName,
           region_type: regionType,
-          label: String(region.region_name || region.label || region.region_key || '').trim(),
+          label: regionName,
           lock_ratio: normalizeTemplateRegionLockRatio(region.lock_ratio),
+          animation_json: normalizeTemplateRegionAnimationConfig(region.animation_json),
           x: Number(region.x || 0),
           y: Number(region.y || 0),
           width: Number(region.width || 100),
@@ -101,6 +162,7 @@ function extractTemplateRegions(body) {
   const labels = readFormArray(body, 'region_label[]');
   const types = readFormArray(body, 'region_type[]');
   const ratios = readFormArray(body, 'region_lock_ratio[]');
+  const animationJsons = readFormArray(body, 'region_animation_json[]');
   const xs = readFormArray(body, 'region_x[]');
   const ys = readFormArray(body, 'region_y[]');
   const widths = readFormArray(body, 'region_width[]');
@@ -109,7 +171,7 @@ function extractTemplateRegions(body) {
   const regions = [];
 
   for (let i = 0; i < keys.length; i += 1) {
-    const name = String(names[i] || keys[i] || labels[i] || '').trim();
+    const name = validateMaxLength(names[i] || keys[i] || labels[i] || '', REGION_NAME_MAX_LENGTH, 'Region name');
     const rawType = String(types[i] || 'text').trim();
     const regionType = normalizeTemplateRegionType(rawType);
     if (!name) {
@@ -120,6 +182,7 @@ function extractTemplateRegions(body) {
       region_type: regionType,
       label: name,
       lock_ratio: normalizeTemplateRegionLockRatio(ratios[i]),
+      animation_json: normalizeTemplateRegionAnimationConfig(animationJsons[i]),
       x: Number(xs[i] || 0),
       y: Number(ys[i] || 0),
       width: Number(widths[i] || 100),
@@ -177,7 +240,7 @@ function getFilesByField(files) {
 }
 
 async function buildTemplatePayload(pool, req, existingTemplate) {
-  const name = String(req.body.name || '').trim();
+  const name = validateMaxLength(req.body.name || '', TEMPLATE_NAME_MAX_LENGTH, 'Template name');
   const canvasSizeId = req.body.canvas_size_id ? Number(req.body.canvas_size_id) : null;
   let canvasWidth = Math.max(1, Number((existingTemplate && existingTemplate.canvas_size_width) || 1920));
   let canvasHeight = Math.max(1, Number((existingTemplate && existingTemplate.canvas_size_height) || 1080));

src/data/utils.js

@@ -24,6 +24,26 @@ function readFormArray(body, key) {
   return [body[key]];
 }
 
+function validateMaxLength(value, maxLength, fieldName) {
+  const text = String(value || '').trim();
+  const limit = Number(maxLength);
+  if (Number.isFinite(limit) && limit > 0 && text.length > limit) {
+    const error = new Error(fieldName + ' must be ' + limit + ' characters or fewer.');
+    error.statusCode = 400;
+    throw error;
+  }
+  return text;
+}
+
+function truncateToMaxLength(value, maxLength) {
+  const text = String(value || '').trim();
+  const limit = Number(maxLength);
+  if (!Number.isFinite(limit) || limit <= 0 || text.length <= limit) {
+    return text;
+  }
+  return text.slice(0, limit);
+}
+
 function normalizePageNumber(value) {
   const pageNumber = Math.floor(Number(value) || 1);
   return Math.max(1, pageNumber);
@@ -201,6 +221,75 @@ function findTopLevelWhereIndex(sql) {
   return lastWhereIndex;
 }
 
+function findTopLevelGroupByIndex(sql) {
+  const text = String(sql || '');
+  let depth = 0;
+  let inSingleQuote = false;
+  let inDoubleQuote = false;
+  let inBacktick = false;
+  let lastGroupByIndex = -1;
+
+  for (let index = 0; index < text.length; index += 1) {
+    const character = text[index];
+    const previousCharacter = index > 0 ? text[index - 1] : '';
+
+    if (inSingleQuote) {
+      if (character === '\'' && previousCharacter !== '\\') {
+        inSingleQuote = false;
+      }
+      continue;
+    }
+
+    if (inDoubleQuote) {
+      if (character === '"' && previousCharacter !== '\\') {
+        inDoubleQuote = false;
+      }
+      continue;
+    }
+
+    if (inBacktick) {
+      if (character === '`') {
+        inBacktick = false;
+      }
+      continue;
+    }
+
+    if (character === '\'') {
+      inSingleQuote = true;
+      continue;
+    }
+
+    if (character === '"') {
+      inDoubleQuote = true;
+      continue;
+    }
+
+    if (character === '`') {
+      inBacktick = true;
+      continue;
+    }
+
+    if (character === '(') {
+      depth += 1;
+      continue;
+    }
+
+    if (character === ')' && depth > 0) {
+      depth -= 1;
+      continue;
+    }
+
+    if (depth === 0 && /[gG]/.test(character)) {
+      const remaining = text.slice(index);
+      if (/^group\s+by\b/i.test(remaining)) {
+        lastGroupByIndex = index;
+      }
+    }
+  }
+
+  return lastGroupByIndex;
+}
+
 function buildSearchFilter(searchColumns, searchTerm) {
   const columns = Array.isArray(searchColumns) ? searchColumns.map(function (column) {
     return String(column || '').trim();
@@ -238,17 +327,24 @@ async function fetchPagedRows(pool, options) {
     throw new Error('fetchPagedRows requires selectSql and countSql.');
   }
   const orderByIndex = findTopLevelOrderByIndex(selectSql);
+  const groupByIndex = findTopLevelGroupByIndex(selectSql);
   let baseSelectSql = selectSql;
   let orderBySql = '';
+  let groupBySql = '';
 
   if (orderByIndex >= 0) {
     baseSelectSql = selectSql.slice(0, orderByIndex).trim();
     orderBySql = selectSql.slice(orderByIndex).trim();
   }
 
+  if (groupByIndex >= 0 && (orderByIndex < 0 || groupByIndex < orderByIndex)) {
+    baseSelectSql = selectSql.slice(0, groupByIndex).trim();
+    groupBySql = selectSql.slice(groupByIndex, orderByIndex >= 0 ? orderByIndex : selectSql.length).trim();
+  }
+
   const hasTopLevelWhere = findTopLevelWhereIndex(baseSelectSql) >= 0;
   const searchClause = searchFilter.clause ? (hasTopLevelWhere ? searchFilter.clause.replace(/^\s*WHERE\s+/i, ' AND ') : searchFilter.clause) : '';
-  const filteredSelectSql = `${baseSelectSql}${searchClause}`;
+  const filteredSelectSql = `${baseSelectSql}${searchClause}${groupBySql ? ' ' + groupBySql : ''}`;
   const countQuery = searchFilter.clause
     ? `SELECT COUNT(*) AS count FROM (${filteredSelectSql}) AS filtered_rows`
     : countSql;
@@ -294,10 +390,13 @@ async function fetchDuplicateName(pool, tableName, name, excludeId, columnName)
 module.exports = {
   parseJsonSafe,
   readFormArray,
+  validateMaxLength,
+  truncateToMaxLength,
   normalizePageNumber,
   normalizeSortDirection,
   buildSortOrderClause,
   findTopLevelOrderByIndex,
+  findTopLevelGroupByIndex,
   buildSearchFilter,
   fetchPagedRows,
   fetchDuplicateName

src/db/bootstrap.js

@@ -5,7 +5,7 @@ async function bootstrapDatabase(pool) {
   const [canvasSizeCountRows] = await pool.query('SELECT COUNT(*) AS canvas_size_count FROM c_canvas_sizes');
   if (!canvasSizeCountRows.length || Number(canvasSizeCountRows[0].canvas_size_count) === 0) {
     await pool.query(`
-      INSERT INTO c_canvas_sizes (name, width, height) VALUES
+      INSERT IGNORE INTO c_canvas_sizes (name, width, height) VALUES
         ('Full HD', 1920, 1080),
         ('HD', 1280, 720),
         ('4K UHD', 3840, 2160),

src/db/index.js

@@ -52,6 +52,7 @@ async function ensureSchema(pool, options) {
       label VARCHAR(255) NOT NULL,
       font_family VARCHAR(100) NULL,
       lock_ratio VARCHAR(20) NULL,
+      animation_json JSON NULL,
       x INT NOT NULL DEFAULT 0,
       y INT NOT NULL DEFAULT 0,
       width INT NOT NULL DEFAULT 100,

src/db/migrations.js

@@ -55,16 +55,7 @@ const VERSIONED_MIGRATIONS = [
       }
 
       // Recreate the screen-to-player foreign key after the column exists and legacy data is copied over.
-      const [screenPlayerFkRows] = await pool.query(
+      await ensureForeignKey(pool, 'd_screens', 'fk_screens_player', 'player_id', 'd_players', 'device_id', 'RESTRICT');
-        `SELECT COUNT(*) AS fk_count
-         FROM information_schema.KEY_COLUMN_USAGE
-         WHERE TABLE_SCHEMA = DATABASE()
-           AND TABLE_NAME = 'd_screens'
-           AND CONSTRAINT_NAME = 'fk_screens_player'`
-      );
-      if (Number(screenPlayerFkRows && screenPlayerFkRows[0] && screenPlayerFkRows[0].fk_count) === 0) {
-        await pool.query('ALTER TABLE d_screens ADD CONSTRAINT fk_screens_player FOREIGN KEY (player_id) REFERENCES d_players(device_id) ON DELETE RESTRICT');
-      }
 
       if (await columnExists(pool, 'c_template_regions', 'font_family')) {
         await pool.query('ALTER TABLE c_template_regions DROP COLUMN font_family');
@@ -107,9 +98,7 @@ const VERSIONED_MIGRATIONS = [
           INDEX idx_announcements_modified_at (modified_at)
         ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
       `);
-
     }
-
   },
   {
     version: '2.4.0',
@@ -217,6 +206,13 @@ const VERSIONED_MIGRATIONS = [
       `);
     }
   },
+  {
+    version: '2.5.1',
+    label: 'v2.5.1 template animation json schema',
+    run: async function (pool) {
+      await ensureColumn(pool, 'c_template_regions', 'animation_json', 'JSON NULL', 'lock_ratio');
+    }
+  }
 ];
 
 async function columnExists(pool, tableName, columnName) {
@@ -238,29 +234,70 @@ async function ensureColumn(pool, tableName, columnName, columnDefinition, after
   }
 
   const afterClause = afterColumn ? ' AFTER ' + afterColumn : '';
-  await pool.query('ALTER TABLE ' + tableName + ' ADD COLUMN ' + columnName + ' ' + columnDefinition + afterClause);
+  try {
+    await pool.query('ALTER TABLE ' + tableName + ' ADD COLUMN ' + columnName + ' ' + columnDefinition + afterClause);
+  } catch (error) {
+    if (!error || (error.code !== 'ER_DUP_FIELDNAME' && error.errno !== 1060)) {
+      throw error;
+    }
+  }
 }
 
 async function ensureForeignKey(pool, tableName, constraintName, columnName, referencedTable, referencedColumn, onDeleteAction) {
-  const [rows] = await pool.query(
+  const [existingFkRows] = await pool.query(
     `SELECT COUNT(*) AS fk_count
      FROM information_schema.KEY_COLUMN_USAGE
      WHERE TABLE_SCHEMA = DATABASE()
        AND TABLE_NAME = ?
+       AND COLUMN_NAME = ?
+       AND REFERENCED_TABLE_NAME IS NOT NULL`,
+    [tableName, columnName]
+  );
+
+  if (Number(existingFkRows && existingFkRows[0] && existingFkRows[0].fk_count) > 0) {
+    return;
+  }
+
+  const [rows] = await pool.query(
+    `SELECT COUNT(*) AS fk_count
+     FROM information_schema.KEY_COLUMN_USAGE
+     WHERE TABLE_SCHEMA = DATABASE()
        AND CONSTRAINT_NAME = ?`,
-    [tableName, constraintName]
+    [constraintName]
   );
 
   if (Number(rows && rows[0] && rows[0].fk_count) > 0) {
     return;
   }
 
-  await pool.query('ALTER TABLE ' + tableName + ' ADD CONSTRAINT ' + constraintName + ' FOREIGN KEY (' + columnName + ') REFERENCES ' + referencedTable + '(' + referencedColumn + ') ON DELETE ' + onDeleteAction);
+  const fallbackNames = [
+    constraintName,
+    tableName + '_' + columnName + '_fk',
+    tableName + '_' + columnName + '_fk_2',
+    tableName + '_' + columnName + '_fk_3'
+  ];
+
+  for (const candidateName of fallbackNames) {
+    try {
+      await pool.query('ALTER TABLE ' + tableName + ' ADD CONSTRAINT ' + candidateName + ' FOREIGN KEY (' + columnName + ') REFERENCES ' + referencedTable + '(' + referencedColumn + ') ON DELETE ' + onDeleteAction);
+      return;
+    } catch (error) {
+      if (!error || (error.code !== 'ER_FK_DUP_NAME' && error.errno !== 1826 && error.errno !== 121)) {
+        throw error;
+      }
+    }
+  }
 }
 
 async function dropColumnIfExists(pool, tableName, columnName) {
   if (await columnExists(pool, tableName, columnName)) {
-    await pool.query('ALTER TABLE ' + tableName + ' DROP COLUMN ' + columnName);
+    try {
+      await pool.query('ALTER TABLE ' + tableName + ' DROP COLUMN ' + columnName);
+    } catch (error) {
+      if (!error || (error.code !== 'ER_CANT_DROP_FIELD_OR_KEY' && error.errno !== 1091)) {
+        throw error;
+      }
+    }
   }
 }
 

src/player.js

@@ -46,8 +46,7 @@ async function start() {
     playerRuntime: playerRuntime,
     onboardingStore: onboardingStore,
     playerPublicBaseUrl: PLAYER_PUBLIC_BASE_URL,
-    playerInternalBaseUrl: PLAYER_INTERNAL_BASE_URL,
+    playerInternalBaseUrl: PLAYER_INTERNAL_BASE_URL
-    QRCode: require('qrcode')
   });
   registerPlayerRoutes(app, {
     pool: pool,
@@ -77,7 +76,6 @@ async function start() {
   async function syncDatabaseState() {
     try {
       await common.ensureSchema(pool, { mediaDir: MEDIA_DIR });
-      await common.bootstrapDatabase(pool);
 
       if (playerRuntime.snapshotAllConnections().length > 0) {
         await common.pruneStaleOnboardingDevices(pool);

src/player/announcement-templates/lower-third.template.html

@@ -99,8 +99,8 @@
   display: inline-flex;
   align-items: center;
   gap: 2.5rem;
-  min-width: 100%;
   width: max-content;
+  backface-visibility: hidden;
   will-change: transform;
   animation: lower-third-scroll var(--announcement-scroll-duration, 20s) linear infinite;
 }
@@ -144,10 +144,10 @@
 
 @keyframes lower-third-scroll {
   from {
-    transform: translateX(0);
+    transform: translate3d(0, 0, 0);
   }
   to {
-    transform: translateX(-50%);
+    transform: translate3d(calc(-1 * var(--announcement-scroll-distance, 0px)), 0, 0);
   }
 }
 </style>
@@ -177,21 +177,10 @@
   }
 
   var track = root.querySelector('.player-announcement__message-track');
-  if (!track) {
+  if (!track || typeof window.initPlayerAnnouncementMarquee !== 'function') {
     return;
   }
 
-  if (track.dataset.marqueeMeasured === 'true') {
+  window.initPlayerAnnouncementMarquee(track, { container: root.querySelector('.player-announcement__message') || root });
-    return;
-  }
-
-  var rate = Number(track.getAttribute('data-announcement-marquee-rate') || 44) || 44;
-  var singlePassWidth = Math.max(1, track.scrollWidth / 2);
-  var durationSeconds = Math.max(8, singlePassWidth / rate);
-  var durationValue = durationSeconds.toFixed(2) + 's';
-
-  track.dataset.marqueeMeasured = 'true';
-  track.style.setProperty('--announcement-scroll-duration', durationValue);
-  track.style.animationDuration = durationValue;
 }());
 </script>

src/player/announcement-templates/top-banner.template.html

@@ -101,8 +101,8 @@
   display: inline-flex;
   align-items: center;
   gap: 2.5rem;
-  min-width: 100%;
   width: max-content;
+  backface-visibility: hidden;
   will-change: transform;
   animation: top-banner-scroll var(--announcement-scroll-duration, 20s) linear infinite;
 }
@@ -146,10 +146,10 @@
 
 @keyframes top-banner-scroll {
   from {
-    transform: translateX(0);
+    transform: translate3d(0, 0, 0);
   }
   to {
-    transform: translateX(-50%);
+    transform: translate3d(calc(-1 * var(--announcement-scroll-distance, 0px)), 0, 0);
   }
 }
 </style>
@@ -179,21 +179,10 @@
   }
 
   var track = root.querySelector('.player-announcement__message-track');
-  if (!track) {
+  if (!track || typeof window.initPlayerAnnouncementMarquee !== 'function') {
     return;
   }
 
-  if (track.dataset.marqueeMeasured === 'true') {
+  window.initPlayerAnnouncementMarquee(track, { container: root.querySelector('.player-announcement__message') || root });
-    return;
-  }
-
-  var rate = Number(track.getAttribute('data-announcement-marquee-rate') || 44) || 44;
-  var singlePassWidth = Math.max(1, track.scrollWidth / 2);
-  var durationSeconds = Math.max(8, singlePassWidth / rate);
-  var durationValue = durationSeconds.toFixed(2) + 's';
-
-  track.dataset.marqueeMeasured = 'true';
-  track.style.setProperty('--announcement-scroll-duration', durationValue);
-  track.style.animationDuration = durationValue;
 }());
 </script>

src/player/onboarding/index.js

@@ -1,6 +1,7 @@
 // Player onboarding routes and signup flow helpers.
 
 const { isClientNameAvailable, withClientNameReservation } = require('#src/data/client-name-check');
+const { createStyledQrCodeSvg } = require('#src/data/qr-code');
 const { getSharedSecret, verifyPageAuthToken } = require('#src/request-auth');
 const { isTransientDbError } = require('./store');
 
@@ -222,11 +223,10 @@ function registerPlayerOnboardingRoutes(app, options) {
   const pool = options && options.pool ? options.pool : null;
   const common = options && options.common ? options.common : null;
   const playerRuntime = options && options.playerRuntime ? options.playerRuntime : null;
-  const QRCode = options && options.QRCode ? options.QRCode : null;
   const onboardingStore = options && options.onboardingStore ? options.onboardingStore : null;
 
-  if (!app || !pool || !common || !playerRuntime || !QRCode) {
+  if (!app || !pool || !common || !playerRuntime) {
-    throw new Error('registerPlayerOnboardingRoutes requires app, pool, common, playerRuntime, and QRCode.');
+    throw new Error('registerPlayerOnboardingRoutes requires app, pool, common, and playerRuntime.');
   }
 
   const sharedSecret = getSharedSecret();
@@ -303,7 +303,7 @@ function registerPlayerOnboardingRoutes(app, options) {
         return res.status(400).json({ error: 'Device ID is required' });
       }
       const onboardingUrl = `${getPublicBaseUrl(req, options && options.playerPublicBaseUrl)}/onboard?deviceId=${encodeURIComponent(deviceId)}`;
-      const svg = await QRCode.toString(onboardingUrl, { type: 'svg', margin: 1, errorCorrectionLevel: 'M' });
+      const svg = await createStyledQrCodeSvg({ value: onboardingUrl, qr_margin: 20 });
       res.set('Content-Type', 'image/svg+xml; charset=utf-8');
       res.set('Cache-Control', 'no-store');
       res.send(svg);

src/player/player-page-announcements.js

@@ -1,6 +1,10 @@
 // Announcement overlay polling and rendering helpers.
 
 (function () {
+  if (window.__pulseThumbnailPreview) {
+    return;
+  }
+
   var announcementLayer = null;
   var announcementRefreshTimer = null;
   var announcementPollTimer = null;
@@ -211,12 +215,7 @@
       return;
     }
 
-    var socketUrl = new URL(announcementSocketPath, window.location.origin);
+    var socket = new WebSocket(new URL(announcementSocketPath, window.location.origin).toString());
-    if (window.__pulsePageAuthToken) {
-      socketUrl.searchParams.set('auth', window.__pulsePageAuthToken);
-    }
-
-    var socket = new WebSocket(socketUrl.toString());
     announcementSocket = socket;
 
     socket.onopen = function () {

src/player/player-page.template.html

@@ -6,6 +6,7 @@
     <title>{{TITLE}}</title>
     <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" />
     {{{STYLESHEETS}}}
   </head>

src/player/playlist.js

@@ -3,6 +3,7 @@
 const crypto = require('crypto');
 const fs = require('fs');
 const path = require('path');
+const { createStyledQrCodeDataUrl } = require('../data/qr-code');
 
 function createPlayerPlaylistService(options) {
   const pool = options && options.pool ? options.pool : null;
@@ -56,6 +57,10 @@ function createPlayerPlaylistService(options) {
     await fs.promises.writeFile(filePath, JSON.stringify(payload, null, 2), 'utf8');
   }
 
+  async function createQrPreviewDataUrl(value) {
+    return createStyledQrCodeDataUrl(value);
+  }
+
   async function buildScreenPlaylist(slug) {
     try {
       const [screenRows] = await pool.query('SELECT id, name, slug, playlist_id, created_at, modified_at, created_by, modified_by FROM d_screens WHERE slug = ?', [slug]);
@@ -121,7 +126,7 @@ function createPlayerPlaylistService(options) {
           LEFT JOIN c_canvas_sizes cs ON cs.id = st.canvas_size_id
           WHERE st.id IN (?)
         `, [templateIds]);
-        [regionRows] = await pool.query('SELECT id, template_id, region_key, region_type, label, lock_ratio, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM c_template_regions WHERE template_id IN (?) ORDER BY template_id ASC, z_index ASC, id ASC', [templateIds]);
+        [regionRows] = await pool.query('SELECT id, template_id, region_key, region_type, label, lock_ratio, animation_json, x, y, width, height, z_index, created_at, modified_at, created_by, modified_by FROM c_template_regions WHERE template_id IN (?) ORDER BY template_id ASC, z_index ASC, id ASC', [templateIds]);
         templateRows.forEach(function (template) {
           template.regions = regionRows.filter(function (region) { return region.template_id === template.id; });
           templatesById[template.id] = template;
@@ -150,12 +155,13 @@ function createPlayerPlaylistService(options) {
         }
       }
 
-      const slides = slideRows.map(function (slide) {
+      const slides = await Promise.all(slideRows.map(async function (slide) {
         const storedDuration = Number(slide.duration_seconds || 0);
         const videoDuration = slide.use_video_duration ? getVideoRegionDurationSeconds(slide.content_json) : null;
         const disableAudio = slide.disable_audio === undefined || slide.disable_audio === null ? true : Boolean(slide.disable_audio);
         const videoCacheBust = String(slide.modified_at || slide.content_json || slide.id || '');
         const content = common.parseJsonSafe(slide.content_json) || {};
+        const qrBackfillTasks = [];
         Object.keys(content).forEach(function (key) {
           const region = content[key];
           if (region && typeof region === 'object') {
@@ -168,6 +174,27 @@ function createPlayerPlaylistService(options) {
             region.cache_bust = videoCacheBust;
           }
         });
+
+        Object.keys(content).forEach(function (key) {
+          const region = content[key];
+          if (!region || typeof region !== 'object' || String(region.type || '').trim().toLowerCase() !== 'qr-code') {
+            return;
+          }
+
+          if (region.qr_preview && /^data:image\//i.test(String(region.qr_preview || '').trim())) {
+            return;
+          }
+
+          qrBackfillTasks.push(createQrPreviewDataUrl(region.value).then(function (preview) {
+            if (preview) {
+              region.qr_preview = preview;
+            }
+            return null;
+          }).catch(function () {
+            return null;
+          }));
+        });
+        await Promise.all(qrBackfillTasks);
         return {
           id: slide.id,
           title: slide.title,
@@ -180,7 +207,7 @@ function createPlayerPlaylistService(options) {
           template: slide.template_id ? templatesById[slide.template_id] || null : null,
           content: content
         };
-      });
+      }));
 
       let rssFeeds = [];
       if (typeof common.fetchRssFeedsData === 'function' && typeof common.fetchRssFeedItemsByFeedId === 'function') {

src/player/public/css/player.css

@@ -22,6 +22,21 @@ body.onboarding-page #app {
   display: none;
 }
 
+body.thumbnail-preview *,
+body.thumbnail-preview *::before,
+body.thumbnail-preview *::after {
+  animation: none !important;
+  animation-delay: 0s !important;
+  animation-duration: 0s !important;
+  animation-iteration-count: 1 !important;
+  transition: none !important;
+}
+
+body.thumbnail-preview .player-announcement-layer,
+body.thumbnail-preview .player-offline-banner {
+  display: none !important;
+}
+
 #app {
   width: 100%;
   height: 100%;
@@ -101,6 +116,8 @@ body.onboarding-page #app {
   display: block;
   background: #fff;
   border-radius: 18px;
+  padding: 16px;
+  box-sizing: border-box;
 }
 
 .onboarding-form {
@@ -199,6 +216,8 @@ body.onboarding-page #app {
   height: 100%;
   opacity: 0;
   transition: opacity 560ms ease;
+  will-change: opacity;
+  backface-visibility: hidden;
 }
 
 .slide-shell.is-visible {
@@ -228,7 +247,8 @@ body.screen-blackout #app {
   height: var(--player-canvas-height, 100vh);
   max-width: 100vw;
   max-height: 100vh;
-  transform: translate(-50%, -50%);
+  transform: translate3d(-50%, -50%, 0);
+  backface-visibility: hidden;
   z-index: 9999;
   pointer-events: none;
   display: flex;
@@ -375,18 +395,6 @@ body.screen-blackout #app {
   white-space: pre-wrap;
 }
 
-.template-region.text > *,
-.template-region.api > *,
-.template-region.rss > * {
-  margin: 0;
-}
-
-.template-region.text > * + *,
-.template-region.api > * + *,
-.template-region.rss > * + * {
-  margin-top: 0.5em;
-}
-
 .template-region.text ul,
 .template-region.text ol,
 .template-region.api ul,
@@ -425,6 +433,14 @@ body.screen-blackout #app {
   overflow: hidden;
 }
 
+.template-region.qr-code img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: block;
+  background: #fff;
+}
+
 .template-region.html iframe {
   width: 100%;
   height: 100%;

src/player/public/js/player-announcement-templates.js

@@ -54,12 +54,68 @@
     });
   }
 
+  function getComputedGapWidth(track) {
+    if (!track || !window.getComputedStyle) {
+      return 0;
+    }
+
+    var computedStyle = window.getComputedStyle(track);
+    var gapValue = String(computedStyle.columnGap || computedStyle.gap || '0').trim();
+    var gap = Number.parseFloat(gapValue);
+    return Number.isFinite(gap) ? gap : 0;
+  }
+
+  function getElementWidth(element) {
+    if (!element || !element.getBoundingClientRect) {
+      return 0;
+    }
+
+    return Math.max(0, element.getBoundingClientRect().width || 0);
+  }
+
+  function initPlayerAnnouncementMarquee(track, options) {
+    if (!track || track.dataset.marqueeMeasured === 'true') {
+      return;
+    }
+
+    var settings = options || {};
+    var rate = Number(settings.rate || track.getAttribute('data-announcement-marquee-rate') || 44) || 44;
+    var textSelector = String(settings.textSelector || '.player-announcement__message-text').trim() || '.player-announcement__message-text';
+    var textNodes = Array.prototype.slice.call(track.querySelectorAll(textSelector));
+    if (!textNodes.length) {
+      return;
+    }
+
+    var container = settings.container || track.parentElement || track;
+    var containerWidth = Math.max(1, getElementWidth(container) || 0);
+    var gapWidth = getComputedGapWidth(track);
+    var firstItemWidth = Math.max(1, getElementWidth(textNodes[0]) || 0);
+    var cycleWidth = Math.max(1, firstItemWidth + gapWidth);
+    var minimumTrackWidth = Math.max(containerWidth + cycleWidth, cycleWidth * 2);
+    var cloneIndex = 0;
+
+    while (getElementWidth(track) < minimumTrackWidth && cloneIndex < 8) {
+      var clone = textNodes[cloneIndex % textNodes.length].cloneNode(true);
+      clone.setAttribute('aria-hidden', 'true');
+      track.appendChild(clone);
+      cloneIndex += 1;
+    }
+
+    var durationSeconds = Math.max(8, cycleWidth / rate);
+    var durationValue = durationSeconds.toFixed(2) + 's';
+
+    track.dataset.marqueeMeasured = 'true';
+    track.style.setProperty('--announcement-scroll-distance', cycleWidth.toFixed(2) + 'px');
+    track.style.setProperty('--announcement-scroll-duration', durationValue);
+    track.style.animationDuration = durationValue;
+  }
+
   function renderPlayerAnnouncementMarkup(announcement) {
     var normalizedType = normalizeAnnouncementType(announcement && announcement.announcement_type);
     var colorKey = normalizeAnnouncementColor(announcement && announcement.color_key);
     var colorTokens = getAnnouncementColorTokens(colorKey);
     var iconKey = normalizeAnnouncementIcon(announcement && announcement.icon_key);
-    var text = escapeHtml(String(announcement && announcement.message || '').trim()).replace(/\n/g, '<br />');
+    var text = escapeHtml(String(announcement && announcement.message || '').trim()).replace(/[\r\n]+/g, ' ');
     var titleText = escapeHtml(String(announcement && announcement.short_label || 'Announcement').trim() || 'Announcement');
     var templates = window.playerAnnouncementTemplates || {};
     var templateName = normalizedType === 'fullscreen' ? 'fullscreen' : normalizedType === 'top-banner' ? 'topBanner' : 'lowerThird';
@@ -77,4 +133,5 @@
   }
 
   window.renderPlayerAnnouncementMarkup = renderPlayerAnnouncementMarkup;
+  window.initPlayerAnnouncementMarquee = initPlayerAnnouncementMarquee;
 })();

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

@@ -6,6 +6,8 @@ function getCurrentViewport() {
   };
 }
 
+var slideOutroTimers = [];
+
 // Command websocket and player-state helpers.
 // Send the current playback state to the command websocket.
 function sendCommandState(currentSlide) {
@@ -65,6 +67,56 @@ function clearSlideTimer() {
     window.clearTimeout(timer);
     timer = null;
   }
+  clearSlideOutroTimer();
+}
+
+// Cancel any pending outro triggers for the current slide.
+function clearSlideOutroTimer() {
+  if (!Array.isArray(slideOutroTimers) || !slideOutroTimers.length) {
+    slideOutroTimers = [];
+    return;
+  }
+
+  slideOutroTimers.forEach(function (timerId) {
+    window.clearTimeout(timerId);
+  });
+  slideOutroTimers = [];
+}
+
+// Return the rendered slide root that is currently on screen.
+function getCurrentSlideRoot() {
+  var shells = Array.prototype.slice.call(app ? app.querySelectorAll('.slide-shell') : []);
+  if (shells.length) {
+    return shells[shells.length - 1];
+  }
+  return app && app.firstElementChild ? app.firstElementChild : app;
+}
+
+// Schedule the outgoing slide animation for each region so it finishes before removal.
+function scheduleSlideOutro(holdDelayMs) {
+  clearSlideOutroTimer();
+
+  var currentRoot = getCurrentSlideRoot();
+  if (!currentRoot || typeof getRegionAnimationPhaseTimings !== 'function' || typeof playRegionAnimation !== 'function') {
+    return;
+  }
+
+  var regionTimings = getRegionAnimationPhaseTimings(currentRoot, 'outro');
+  if (!regionTimings.length) {
+    return;
+  }
+
+  var slideDurationMs = Math.max(1, Math.round(Number(holdDelayMs || 0)));
+  slideOutroTimers = regionTimings.map(function (entry) {
+    var timingMs = Math.max(0, Math.round(Number(entry && entry.timingMs || 0)));
+    var triggerDelayMs = Math.max(0, slideDurationMs - timingMs);
+    return window.setTimeout(function () {
+      if (!entry || !entry.element || !entry.element.isConnected) {
+        return;
+      }
+      playRegionAnimation(entry.element, 'outro');
+    }, triggerDelayMs);
+  });
 }
 
 // Schedule the next slide transition.
@@ -72,13 +124,16 @@ function scheduleSlideAdvance(delayMs) {
   clearSlideTimer();
   var holdDelayMs = Math.max(1, Number(delayMs || 0));
   slideExpiresAt = Date.now() + holdDelayMs;
+  scheduleSlideOutro(holdDelayMs);
   timer = window.setTimeout(function () {
     timer = null;
     slideExpiresAt = null;
     pausedRemainingMs = null;
+    clearSlideOutroTimer();
+    applyPendingPlaylistUpdate();
     const activeSlides = getCurrentActiveSlides();
     if (activeSlides.length < 2) {
-      refresh();
+      showCurrent();
       return;
     }
     if (index >= activeSlides.length) {
@@ -89,13 +144,10 @@ function scheduleSlideAdvance(delayMs) {
   }, holdDelayMs);
 }
 
-// Account for fade only when it is enabled so the transition is centered on the slide boundary.
+// Return the slide duration without shifting it for fade timing.
 function getSlideHoldDelay(delayMs) {
   var holdDelayMs = Math.max(1, Number(delayMs || 0));
-  if (!currentPlaylistFadeBetweenSlides) {
+  return holdDelayMs;
-    return holdDelayMs;
-  }
-  return Math.max(1, holdDelayMs - (slideFadeDurationMs / 2));
 }
 
 // Cancel any pending fade-transition cleanup.
@@ -114,11 +166,19 @@ function getPlayerRegionModules() {
   return window.pulsePlayerRegionTypes.list();
 }
 
+function isThumbnailPreview() {
+  return Boolean(window.__pulseThumbnailPreview);
+}
+
 function runRegionLifecycle(root, lifecycleName) {
   if (!root) {
     return;
   }
 
+  if (isThumbnailPreview() && lifecycleName === 'initRegion') {
+    return;
+  }
+
   getPlayerRegionModules().forEach(function (entry) {
     var module = entry && entry.definition ? entry.definition : null;
     if (!module || typeof module[lifecycleName] !== 'function') {
@@ -208,8 +268,15 @@ function renderSlideMarkup(markup, shouldFade) {
     if (typeof syncRtmpRegions === 'function') {
       syncRtmpRegions(app);
     }
-    initializeRegionInstances(app);
+    if (!isThumbnailPreview()) {
+      initializeRegionInstances(app);
+    }
     initializeRenderedVideoPlayback(app);
+    if (typeof playRegionAnimations === 'function') {
+      window.requestAnimationFrame(function () {
+        playRegionAnimations(app, 'intro');
+      });
+    }
     return app.firstElementChild;
   }
 
@@ -277,14 +344,18 @@ function renderSlideMarkup(markup, shouldFade) {
   window.requestAnimationFrame(function () {
     nextShell.style.opacity = '1';
     previousShell.style.opacity = '0';
+    if (typeof playRegionAnimations === 'function') {
+      playRegionAnimations(nextShell, 'intro');
+    }
   });
 
   if (typeof syncRtmpRegions === 'function') {
     syncRtmpRegions(nextShell);
   }
 
-  initializeRegionInstances(nextShell);
+  if (!isThumbnailPreview()) {
-
+    initializeRegionInstances(nextShell);
+  }
   initializeRenderedVideoPlayback(nextShell, slideFadeDurationMs / 2);
 
   slideTransitionTimer = window.setTimeout(function () {
@@ -456,12 +527,7 @@ function connectCommandSocket() {
   if (commandSocket && (commandSocket.readyState === WebSocket.OPEN || commandSocket.readyState === WebSocket.CONNECTING)) {
     return;
   }
-  var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  var socket = new WebSocket(new URL(commandSocketPath, window.location.origin).toString());
-  var socketUrl = new URL(commandSocketPath, window.location.origin);
-  if (window.__pulsePageAuthToken) {
-    socketUrl.searchParams.set('auth', window.__pulsePageAuthToken);
-  }
-  var socket = new WebSocket(socketUrl.toString());
   commandSocket = socket;
 
   socket.onopen = function () {

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

@@ -85,7 +85,6 @@ function applyPendingPlaylistUpdate() {
 // Render the current active slide or the empty state.
 function showCurrent() {
   clearSlideTimer();
-  applyPendingPlaylistUpdate();
   const activeSlides = getCurrentActiveSlides();
   syncWebpagePreloads(activeSlides, index);
   if (typeof syncRtmpWarmups === 'function') {
@@ -100,6 +99,16 @@ function showCurrent() {
   lastRenderedViewKey = getCurrentRenderKey(activeSlides);
 }
 
+function isSlideInList(slide, slideList) {
+  if (!slide || !Array.isArray(slideList)) {
+    return false;
+  }
+
+  return slideList.some(function (item) {
+    return item && Number(item.id) === Number(slide.id);
+  });
+}
+
 // Skip the current slide when an RTMP feed is unavailable and the playlist asks for it.
 function handleRtmpPlaybackFailure(message, options) {
   if (!currentPlaylistSkipUnavailableRtmp) {
@@ -166,6 +175,7 @@ function refresh() {
       const data = JSON.parse(request.responseText || '{}');
       const nextSignature = getPlaylistRevision(data);
       const nextSlides = Array.isArray(data.slides) ? data.slides.map(normalizeSlide) : [];
+      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);
       savePlaylistSnapshot({
@@ -197,19 +207,23 @@ function refresh() {
         }
         return;
       }
-      syncWebpagePreloads(getActiveSlidesFrom(nextSlides), index);
+      syncWebpagePreloads(nextActiveSlides, index);
       if (typeof syncRtmpWarmups === 'function') {
-        syncRtmpWarmups(getActiveSlidesFrom(nextSlides), index);
+        syncRtmpWarmups(nextActiveSlides, index);
       }
-      if (currentActiveSlides.length < 2) {
+      if (nextActiveSlides.length < 2) {
-        slides = nextSlides;
+        pendingPlaylistUpdate = {
-        currentPlaylistSignature = nextSignature;
+          slides: nextSlides,
-        currentPlaylistFadeBetweenSlides = nextFadeBetweenSlides;
+          signature: nextSignature,
-        currentPlaylistSkipUnavailableRtmp = nextSkipUnavailableRtmp;
+          fadeBetweenSlides: nextFadeBetweenSlides,
-        pendingPlaylistUpdate = null;
+          skipUnavailableRtmp: nextSkipUnavailableRtmp
-        index = 0;
+        };
-        showCurrent();
+        if (!isSlideInList(lastRenderedSlide, nextSlides)) {
-        sendCommandState(lastRenderedSlide);
+          applyPendingPlaylistUpdate();
+          showCurrent();
+          return;
+        }
+        logDebug('Playlist update detected; applying on next slide transition.');
         return;
       }
       pendingPlaylistUpdate = {

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

@@ -53,6 +53,276 @@ function fitCanvasSize(canvasWidth, canvasHeight, maxWidth, maxHeight) {
   };
 }
 
+function normalizePlayerAnimationStep(value, fallbackPreset) {
+  if (value && typeof value === 'object' && !Array.isArray(value)) {
+    return {
+      preset: String(value.preset || fallbackPreset || 'none').trim(),
+      duration_ms: Number.isFinite(Number(value.duration_ms)) && Number(value.duration_ms) > 0 ? Math.round(Number(value.duration_ms)) : null,
+      delay_ms: Number.isFinite(Number(value.delay_ms)) && Number(value.delay_ms) >= 0 ? Math.round(Number(value.delay_ms)) : null,
+      iterations: Number.isFinite(Number(value.iterations)) && Number(value.iterations) > 0 ? Math.round(Number(value.iterations)) : null
+    };
+  }
+
+  return {
+    preset: String(typeof value === 'string' ? value : fallbackPreset || 'none').trim(),
+    duration_ms: null,
+    delay_ms: null,
+    iterations: null
+  };
+}
+
+function normalizePlayerAnimationConfig(value) {
+  var raw = value;
+  if (typeof raw === 'string') {
+    var text = String(raw || '').trim();
+    if (!text) {
+      raw = null;
+    } else {
+      try {
+        raw = JSON.parse(text);
+      } catch (_error) {
+        raw = null;
+      }
+    }
+  }
+
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+    raw = {};
+  }
+
+  return {
+    intro: normalizePlayerAnimationStep(raw.intro, 'none'),
+    outro: normalizePlayerAnimationStep(raw.outro !== undefined ? raw.outro : raw.out, 'none'),
+    loop: normalizePlayerAnimationStep(raw.loop, 'none')
+  };
+}
+
+function hasPlayerAnimation(config) {
+  return Boolean(config && ['intro', 'outro', 'loop'].some(function (stepName) {
+    return String((config[stepName] && config[stepName].preset) || '').trim() && String((config[stepName] && config[stepName].preset) || '').trim() !== 'none';
+  }));
+}
+
+function decorateRegionMarkup(markup, region) {
+  if (!markup || !region || !hasPlayerAnimation(region.animationConfig)) {
+    return markup;
+  }
+
+  var animationJson = escapeHtml(JSON.stringify(region.animationConfig));
+  return markup.replace(/^(\s*)<([a-z0-9-]+)(\s[^>]*)?>/i, function (match, leadingWhitespace, tagName, attributes) {
+    return leadingWhitespace + '<' + tagName + (attributes || '') + ' data-animation-json="' + animationJson + '">';
+  });
+}
+
+function clearRegionAnimationClasses(root) {
+  if (!root) {
+    return;
+  }
+
+  var elements = [];
+  if (typeof root.matches === 'function' && root.matches('[data-animation-json]')) {
+    elements.push(root);
+  }
+  Array.prototype.forEach.call(root.querySelectorAll('[data-animation-json]'), function (element) {
+    elements.push(element);
+  });
+
+  elements.forEach(function (element) {
+    if (!element) {
+      return;
+    }
+    element.classList.remove('animate__animated', 'animate__infinite');
+    element.classList.remove('animate__repeat-1', 'animate__repeat-2', 'animate__repeat-3');
+    Array.prototype.slice.call(element.classList || []).forEach(function (className) {
+      if (String(className || '').indexOf('animate__') === 0) {
+        element.classList.remove(className);
+      }
+    });
+    element.style.removeProperty('--animate-duration');
+    element.style.removeProperty('--animate-delay');
+    element.style.removeProperty('--animate-repeat');
+  });
+}
+
+function isAttentionSeekerAnimation(preset) {
+  return ['bounce', 'flash', 'pulse', 'rubberBand', 'shakeX', 'shakeY', 'headShake', 'swing', 'tada', 'wobble', 'jello', 'heartBeat'].indexOf(String(preset || '').trim()) !== -1;
+}
+
+function applyAnimationStep(element, step, phase) {
+  if (!element || !step) {
+    return;
+  }
+
+  var preset = String(step.preset || 'none').trim();
+  if (!preset || preset === 'none') {
+    return;
+  }
+
+  element.classList.add('animate__animated', 'animate__' + preset);
+  element.style.setProperty('--animate-duration', String(Math.max(1, Number(step.duration_ms || 0) || 1000)) + 'ms');
+  if (Number(step.delay_ms || 0) > 0) {
+    element.style.setProperty('--animate-delay', String(Math.max(0, Number(step.delay_ms || 0))) + 'ms');
+  } else {
+    element.style.removeProperty('--animate-delay');
+  }
+
+  if (phase === 'loop') {
+    var repeatCount = Number(step.iterations);
+    if (!Number.isFinite(repeatCount) || repeatCount < 1) {
+      repeatCount = 1;
+    }
+    if (repeatCount > 1) {
+      element.classList.add('animate__repeat-1');
+    }
+    element.style.setProperty('--animate-repeat', String(repeatCount));
+    return;
+  }
+
+  if (isAttentionSeekerAnimation(preset) && Number(step.iterations || 0) > 1) {
+    element.style.setProperty('--animate-repeat', String(Math.max(1, Number(step.iterations || 1))));
+  }
+}
+
+function getAnimationStepTimingMs(step) {
+  if (!step) {
+    return 0;
+  }
+
+  var preset = String(step.preset || 'none').trim();
+  if (!preset || preset === 'none') {
+    return 0;
+  }
+
+  var durationMs = Number(step.duration_ms);
+  if (!Number.isFinite(durationMs) || durationMs <= 0) {
+    durationMs = 1000;
+  }
+
+  var delayMs = Number(step.delay_ms);
+  if (!Number.isFinite(delayMs) || delayMs < 0) {
+    delayMs = 0;
+  }
+
+  var iterations = Number(step.iterations);
+  if (!Number.isFinite(iterations) || iterations < 1) {
+    iterations = 1;
+  }
+
+  return delayMs + (durationMs * iterations);
+}
+
+function getRegionAnimationPhaseTimingMs(root, phase) {
+  var timings = getRegionAnimationPhaseTimings(root, phase);
+  return timings.reduce(function (maxTimingMs, entry) {
+    return Math.max(maxTimingMs, Number(entry && entry.timingMs || 0));
+  }, 0);
+}
+
+function getRegionAnimationPhaseTimings(root, phase) {
+  if (!root || isThumbnailPreview()) {
+    return [];
+  }
+
+  var normalizedPhase = String(phase || 'intro').trim().toLowerCase();
+  if (normalizedPhase !== 'intro' && normalizedPhase !== 'outro') {
+    normalizedPhase = 'intro';
+  }
+
+  var timings = [];
+  Array.prototype.forEach.call(root.querySelectorAll('[data-animation-json]'), function (element) {
+    if (!element) {
+      return;
+    }
+
+    var config;
+    try {
+      config = normalizePlayerAnimationConfig(element.getAttribute('data-animation-json') || '{}');
+    } catch (_error) {
+      config = null;
+    }
+
+    if (!config) {
+      return;
+    }
+
+    var timingMs = getAnimationStepTimingMs(normalizedPhase === 'outro' ? config.outro : config.intro);
+    if (timingMs > 0) {
+      timings.push({
+        element: element,
+        timingMs: timingMs
+      });
+    }
+  });
+
+  return timings;
+}
+
+function playRegionAnimation(element, phase) {
+  if (!element || isThumbnailPreview()) {
+    return;
+  }
+
+  var normalizedPhase = String(phase || 'intro').trim().toLowerCase();
+  if (normalizedPhase !== 'intro' && normalizedPhase !== 'outro') {
+    normalizedPhase = 'intro';
+  }
+
+  var config;
+  try {
+    config = normalizePlayerAnimationConfig(element.getAttribute('data-animation-json') || '{}');
+  } catch (_error) {
+    config = null;
+  }
+
+  if (!config) {
+    return;
+  }
+
+  element.dataset.animationPhase = normalizedPhase;
+  clearRegionAnimationClasses(element);
+
+  if (normalizedPhase === 'outro') {
+    applyAnimationStep(element, config.outro, 'outro');
+    return;
+  }
+
+  if (config.intro && String(config.intro.preset || '').trim() && String(config.intro.preset || '').trim() !== 'none') {
+    applyAnimationStep(element, config.intro, 'intro');
+    if (config.loop && String(config.loop.preset || '').trim() && String(config.loop.preset || '').trim() !== 'none') {
+      element.addEventListener('animationend', function handleAnimationEnd(event) {
+        if (event.target !== element) {
+          return;
+        }
+        if (String(element.dataset.animationPhase || '').trim() !== 'intro') {
+          return;
+        }
+        element.removeEventListener('animationend', handleAnimationEnd);
+        clearRegionAnimationClasses(element);
+        applyAnimationStep(element, config.loop, 'loop');
+      });
+    }
+    return;
+  }
+
+  applyAnimationStep(element, config.loop, 'loop');
+}
+
+function playRegionAnimations(root, phase) {
+  if (!root || isThumbnailPreview()) {
+    return;
+  }
+
+  var normalizedPhase = String(phase || 'intro').trim().toLowerCase();
+  if (normalizedPhase !== 'intro' && normalizedPhase !== 'outro') {
+    normalizedPhase = 'intro';
+  }
+
+  var elements = Array.prototype.slice.call(root.querySelectorAll('[data-animation-json]'));
+  elements.forEach(function (element) {
+    playRegionAnimation(element, normalizedPhase);
+  });
+}
+
 function setPlayerCanvasDimensions(canvasWidth, canvasHeight) {
   if (!document || !document.documentElement) {
     return;
@@ -474,6 +744,7 @@ function getTemplateLayout(template) {
       regionKey: region.region_key,
       regionType: region.region_type,
       label: region.label,
+      animationJson: region.animation_json || null,
       baseStyle: baseStyle,
       pixelWidth: pixelWidth,
       pixelHeight: pixelHeight,
@@ -578,7 +849,10 @@ function renderTemplateSlideMarkup(slide) {
   const layout = plan ? plan.layout : null;
   const regions = layout ? layout.regions.map(function (region) {
     const regionContent = content[region.regionKey] || {};
-    return plan.renderRegion(region, regionContent);
+    const markup = plan.renderRegion(region, regionContent);
+    return decorateRegionMarkup(markup, {
+      animationConfig: normalizePlayerAnimationConfig(region.animationJson)
+    });
   }).join('') : '';
   const stageStyle = layout ? buildBackdropStyle(layout.backgroundColor || '#111111', template.background_image_path) : '';
   if (layout) {

src/player/public/sw.js

@@ -61,7 +61,7 @@ async function networkFirst(request, cacheName, cacheKeyRequest) {
     if (cached) {
       return cached;
     }
-    throw _error;
+    return new Response('', { status: 504, statusText: 'Offline' });
   }
 }
 

src/player/regions/qr-code.js

@@ -0,0 +1,20 @@
+// QR code region rendering for embedded URL-to-image output.
+
+var registry = window.pulsePlayerRegionTypes;
+
+function renderQrCodeRegion(region, regionContent) {
+  var borderRadius = Math.max(0, Math.round(Number(regionContent && regionContent.qr_border_radius || 0)));
+  var radiusStyle = borderRadius > 0 ? 'border-radius:' + borderRadius + 'px;overflow:hidden;' : '';
+  var preview = String(regionContent && regionContent.qr_preview || '').trim();
+
+  if (!preview) {
+    return '';
+  }
+
+  return '<div class="template-region qr-code" style="' + region.baseStyle + radiusStyle + '"><img class="template-region-qr-code-image" src="' + escapeHtml(preview) + '" alt="QR code" role="img" draggable="false" style="background:transparent;display:block;width:100%;height:100%;object-fit:contain;' + radiusStyle + '" /></div>';
+}
+
+registry.register('qr-code', {
+  renderRegion: renderQrCodeRegion,
+  initRegion: function () {}
+});

src/player/regions/text.js

@@ -40,7 +40,7 @@ function renderTextRegion(region, regionContent) {
   var fontFamily = sanitizeFontFamily(regionContent.font_family || region.fontFamily || defaultStyle.font_family);
   var fontSize = sanitizeFontSize(regionContent.font_size || region.fontSize || defaultStyle.font_size);
   var fontColor = sanitizeTextColor(regionContent.font_color || region.fontColor || defaultStyle.font_color);
-  var contentStyle = 'width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;transform:scale(' + region.canvasScale + ');transform-origin:top left;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor) + ';';
+  var contentStyle = 'width:' + region.pixelWidth + 'px;height:' + region.pixelHeight + 'px;transform:scale(' + region.canvasScale + ');transform-origin:top left;line-height:1.5;' + (fontFamily ? 'font-family:' + escapeHtml(fontFamily) + ';' : '') + 'font-size:' + fontSize + 'px;color:' + escapeHtml(fontColor) + ';';
   var renderedBody = renderEditorJsContent(rawValue);
   return renderedBody ? '<div class="template-region text" style="' + region.baseStyle + '"><div class="template-region-text-scale" style="' + contentStyle + '">' + renderedBody + '</div></div>' : '';
 }

src/player/render-helpers.js

@@ -442,8 +442,9 @@ function getPlayerRegionScriptPaths() {
 
 function getPlayerRegionScripts() {
   const sharedPlaceholderUtilsPath = path.join(__dirname, '..', 'web', 'public', 'js', 'shared', 'placeholder-utils.js');
+  const sharedQrSvgUtilsPath = path.join(__dirname, '..', 'web', 'public', 'js', 'shared', 'qr-code-svg.js');
   const playerRegionScriptPaths = getPlayerRegionScriptPaths();
-  const scriptPaths = [sharedPlaceholderUtilsPath].concat(playerRegionScriptPaths);
+  const scriptPaths = [sharedPlaceholderUtilsPath, sharedQrSvgUtilsPath].concat(playerRegionScriptPaths);
   const statSignature = scriptPaths.map(function (filePath) {
     return fs.statSync(filePath).mtimeMs;
   }).join('|');

src/player/render.js

@@ -120,6 +120,7 @@ function renderPlayerPage(slug, initialData) {
   const hlsScriptTag = '<script src="/assets/vendor/hls.min.js"></script>';
   const pageAuthToken = createPageAuthBundle({ scope: 'player', slug: String(slug || '').trim() });
   const fontStylesheetHref = getFontStylesheetHref(PLAYER_MEDIA_DIR);
+  const bodyClass = [initialData && initialData.thumbnailPreview ? 'thumbnail-preview' : '', ''].join(' ').trim();
   const script = getPlayerPageScript()({
     SLUG_JSON: new Handlebars.SafeString(JSON.stringify(slug)),
     INITIAL_DATA_JSON: new Handlebars.SafeString(safeJsonForScript(initialData || null)),
@@ -128,9 +129,10 @@ function renderPlayerPage(slug, initialData) {
 
   return renderPage(template, {
     title: 'Screen ' + slug,
+    bodyClass: bodyClass,
     body: '<div id="app"><div class="empty">Loading screen...</div></div>',
     stylesheets: fontStylesheetHref ? [fontStylesheetHref] : [],
-    script: createPageFetchAuthScript(pageAuthToken) + hlsScriptTag + serviceWorkerScript + createThumbnailPreviewBootstrapScript(initialData) + '<script>' + offlineScript + '</script>' + '<script>' + playlistScript + '</script>' + '<script>' + commandScript + '</script>' + '<script>' + renderingScript + '</script>' + '<script>' + playbackScript + '</script>' + '<script>' + getAnnouncementIconsDataScript() + '</script>' + '<script>' + getPlayerAnnouncementTemplatesDataScript() + '</script>' + '<script>' + getPlayerAnnouncementTemplatesScript() + '</script>' + onboardingScript + script + '<script>' + getPlayerPageAnnouncementsScript()() + '</script>'
+    script: createPageFetchAuthScript(pageAuthToken, '/ws/screens/' + encodeURIComponent(slug || '')) + hlsScriptTag + serviceWorkerScript + createThumbnailPreviewBootstrapScript(initialData) + '<script>' + offlineScript + '</script>' + '<script>' + playlistScript + '</script>' + '<script>' + commandScript + '</script>' + '<script>' + renderingScript + '</script>' + '<script>' + playbackScript + '</script>' + '<script>' + getAnnouncementIconsDataScript() + '</script>' + '<script>' + getPlayerAnnouncementTemplatesDataScript() + '</script>' + '<script>' + getPlayerAnnouncementTemplatesScript() + '</script>' + onboardingScript + script + '<script>' + getPlayerPageAnnouncementsScript()() + '</script>'
   });
 }
 

src/player/runtime.js

@@ -4,6 +4,7 @@ const crypto = require('crypto');
 const { WebSocketServer, WebSocket } = require('ws');
 const { isClientNameAvailable } = require('#src/data/client-name-check');
 const { verifyPageAuthToken, verifyRequestAuth } = require('#src/request-auth');
+const PAGE_AUTH_COOKIE_NAME = 'pulse_page_auth';
 
 function normalizePlayerPublicBaseUrl(pageUrl) {
   const value = String(pageUrl || '').trim();
@@ -43,6 +44,34 @@ function createPlayerRuntime(options) {
     return ip;
   }
 
+  function parseCookies(cookieHeader) {
+    return String(cookieHeader || '').split(/;\s*/).reduce(function (cookies, pair) {
+      if (!pair) {
+        return cookies;
+      }
+      const separatorIndex = pair.indexOf('=');
+      if (separatorIndex === -1) {
+        return cookies;
+      }
+      const name = decodeURIComponent(pair.slice(0, separatorIndex).trim());
+      const value = decodeURIComponent(pair.slice(separatorIndex + 1).trim());
+      if (name) {
+        cookies[name] = value;
+      }
+      return cookies;
+    }, {});
+  }
+
+  function readPageAuthToken(request) {
+    const queryToken = String(new URL(request.url, 'http://localhost').searchParams.get('auth') || '').trim();
+    if (queryToken) {
+      return queryToken;
+    }
+
+    const cookies = parseCookies(request.headers && request.headers.cookie || '');
+    return String(cookies[PAGE_AUTH_COOKIE_NAME] || '').trim();
+  }
+
   function getConnectionBucket(slug) {
     const key = String(slug || '').trim();
     if (!key) {
@@ -314,7 +343,7 @@ function createPlayerRuntime(options) {
     }
 
     if (playerMatch) {
-      const authToken = String(new URL(request.url, 'http://localhost').searchParams.get('auth') || '').trim();
+      const authToken = readPageAuthToken(request);
       const payload = verifyPageAuthToken(authToken);
       if (!payload || String(payload.scope || '').trim() !== 'player') {
         socket.destroy();
@@ -323,7 +352,7 @@ function createPlayerRuntime(options) {
     }
 
     if (announcementMatch) {
-      const authToken = String(new URL(request.url, 'http://localhost').searchParams.get('auth') || '').trim();
+      const authToken = readPageAuthToken(request);
       const payload = verifyPageAuthToken(authToken);
       if (!payload || String(payload.scope || '').trim() !== 'player') {
         socket.destroy();

src/rbac.js

@@ -2,202 +2,215 @@
 
 const PERMISSION_SECTIONS = [
   {
-    key: 'dashboard',
+    sectionName: 'Main navigation',
     order: 10,
-    name: 'Dashboard',
+    permissions: [
-    sectionName: 'Main navigation',
+      {
-    actions: [
+        key: 'dashboard',
-      { key: 'read', name: 'Read', description: 'Access the dashboard overview.' },
+        order: 10,
-      { key: 'allow', name: 'Allow', description: 'Send global player commands.' }
+        name: 'Dashboard',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'Access the dashboard overview.' },
+          { key: 'allow', name: 'Allow', description: 'Send global player commands.' }
+        ]
+      },
+      {
+        key: 'clients',
+        order: 20,
+        name: 'Connected clients',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'View connected player clients and live status.' },
+          { key: 'allow', name: 'Allow', description: 'Use the connected client command buttons.' }
+        ]
+      }
     ]
   },
   {
-    key: 'clients',
+    sectionName: 'Content',
     order: 20,
-    name: 'Connected clients',
+    permissions: [
-    sectionName: 'Main navigation',
+      {
-    actions: [
+        key: 'screens',
-      { key: 'read', name: 'Read', description: 'View connected player clients and live status.' },
+        order: 10,
-      { key: 'allow', name: 'Allow', description: 'Use the connected client command buttons.' }
+        name: 'Screens',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'View the screen list and open screen details.' },
+          { key: 'create', name: 'Create', description: 'Create new screens.' },
+          { key: 'update', name: 'Update', description: 'Update screens.' },
+          { key: 'delete', name: 'Delete', description: 'Delete screens.' }
+        ]
+      },
+      {
+        key: 'playlists',
+        order: 20,
+        name: 'Playlists',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'View playlists and playlist contents.' },
+          { key: 'create', name: 'Create', description: 'Create new playlists.' },
+          { key: 'update', name: 'Update', description: 'Update playlists and playlist slides.' },
+          { key: 'delete', name: 'Delete', description: 'Delete playlists.' }
+        ]
+      },
+      {
+        key: 'slides',
+        order: 30,
+        name: 'Slides',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'View slides.' },
+          { key: 'create', name: 'Create', description: 'Create new slides.' },
+          { key: 'update', name: 'Update', description: 'Update slide content.' },
+          { key: 'delete', name: 'Delete', description: 'Delete slides.' }
+        ]
+      },
+      {
+        key: 'templates',
+        order: 40,
+        name: 'Slide templates',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'View slide templates.' },
+          { key: 'create', name: 'Create', description: 'Create new slide templates.' },
+          { key: 'update', name: 'Update', description: 'Update slide templates.' },
+          { key: 'delete', name: 'Delete', description: 'Delete slide templates.' }
+        ]
+      },
+      {
+        key: 'canvas-sizes',
+        order: 50,
+        name: 'Canvas sizes',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'View canvas sizes.' },
+          { key: 'create', name: 'Create', description: 'Create new canvas sizes.' },
+          { key: 'update', name: 'Update', description: 'Update canvas sizes.' },
+          { key: 'delete', name: 'Delete', description: 'Delete canvas sizes.' }
+        ]
+      },
+      {
+        key: 'announcements',
+        order: 60,
+        name: 'Announcements',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'View announcements.' },
+          { key: 'create', name: 'Create', description: 'Create new announcements.' },
+          { key: 'update', name: 'Update', description: 'Update announcements.' },
+          { key: 'delete', name: 'Delete', description: 'Delete announcements.' }
+        ]
+      }
     ]
   },
   {
-    key: 'screens',
+    sectionName: 'Data Sources',
     order: 30,
-    name: 'Screens',
+    permissions: [
-    sectionName: 'Content',
+      {
-    actions: [
+        key: 'rss-feeds',
-      { key: 'read', name: 'Read', description: 'View the screen list and open screen details.' },
+        order: 10,
-      { key: 'create', name: 'Create', description: 'Create new screens.' },
+        name: 'RSS feeds',
-      { key: 'update', name: 'Update', description: 'Update screens.' },
+        permissions: [
-      { key: 'delete', name: 'Delete', description: 'Delete screens.' }
+          { key: 'read', name: 'Read', description: 'View configured RSS feeds.' },
+          { key: 'create', name: 'Create', description: 'Create new RSS feeds.' },
+          { key: 'update', name: 'Update', description: 'Update RSS feeds.' },
+          { key: 'delete', name: 'Delete', description: 'Delete RSS feeds.' }
+        ]
+      },
+      {
+        key: 'api-sources',
+        order: 20,
+        name: 'API sources',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'View configured API sources.' },
+          { key: 'create', name: 'Create', description: 'Create new API sources.' },
+          { key: 'update', name: 'Update', description: 'Update API sources.' },
+          { key: 'delete', name: 'Delete', description: 'Delete API sources.' }
+        ]
+      },
+      {
+        key: 'timetables',
+        order: 30,
+        name: 'Timetables',
+        permissions: [
+          { key: 'read', name: 'Read', description: 'View configured timetable groups.' },
+          { key: 'create', name: 'Create', description: 'Create new timetable groups.' },
+          { key: 'update', name: 'Update', description: 'Update timetable groups and entries.' },
+          { key: 'delete', name: 'Delete', description: 'Delete timetable groups.' }
+        ]
+      }
     ]
   },
   {
-    key: 'playlists',
+    sectionName: 'Settings',
     order: 40,
-    name: 'Playlists',
+    permissions: [
-    sectionName: 'Content',
+      {
-    actions: [
+        key: 'users',
-      { key: 'read', name: 'Read', description: 'View playlists and playlist contents.' },
+        order: 10,
-      { key: 'create', name: 'Create', description: 'Create new playlists.' },
+        name: 'Users',
-      { key: 'update', name: 'Update', description: 'Update playlists and playlist slides.' },
+        permissions: [
-      { key: 'delete', name: 'Delete', description: 'Delete playlists.' }
+          { key: 'read', name: 'Read', description: 'View users and role assignments.' },
-    ]
+          { key: 'create', name: 'Create', description: 'Create new users.' },
-  },
+          { key: 'update', name: 'Update', description: 'Update users, passwords, and role assignments.' },
-  {
+          { key: 'delete', name: 'Delete', description: 'Delete users.' }
-    key: 'slides',
+        ]
-    order: 50,
+      },
-    name: 'Slides',
+      {
-    sectionName: 'Content',
+        key: 'rbac',
-    actions: [
+        order: 20,
-      { key: 'read', name: 'Read', description: 'View slides.' },
+        name: 'Roles and permissions',
-      { key: 'create', name: 'Create', description: 'Create new slides.' },
+        permissions: [
-      { key: 'update', name: 'Update', description: 'Update slide content.' },
+          { key: 'read', name: 'Read', description: 'View roles and permissions.' },
-      { key: 'delete', name: 'Delete', description: 'Delete slides.' }
+          { key: 'create', name: 'Create', description: 'Create new roles.' },
-    ]
+          { key: 'update', name: 'Update', description: 'Update role details and permissions.' },
-  },
+          { key: 'delete', name: 'Delete', description: 'Delete roles.' }
-  {
+        ]
-    key: 'templates',
+      },
-    order: 60,
+      {
-    name: 'Slide templates',
+        key: 'fonts',
-    sectionName: 'Content',
+        order: 30,
-    actions: [
+        name: 'Fonts',
-      { key: 'read', name: 'Read', description: 'View slide templates.' },
+        permissions: [
-      { key: 'create', name: 'Create', description: 'Create new slide templates.' },
+          { key: 'read', name: 'Read', description: 'View managed fonts.' },
-      { key: 'update', name: 'Update', description: 'Update slide templates.' },
+          { key: 'create', name: 'Create', description: 'Upload managed fonts.' },
-      { key: 'delete', name: 'Delete', description: 'Delete slide templates.' }
+          { key: 'delete', name: 'Delete', description: 'Remove managed fonts.' }
-    ]
+        ]
-  },
+      },
-  {
+      {
-    key: 'canvas-sizes',
+        key: 'background-tasks',
-    order: 70,
+        order: 40,
-    name: 'Canvas sizes',
+        name: 'Task Queue',
-    sectionName: 'Content',
+        permissions: [
-    actions: [
+          { key: 'read', name: 'Read', description: 'View queued background tasks.' },
-      { key: 'read', name: 'Read', description: 'View canvas sizes.' },
+          { key: 'allow', name: 'Allow', description: 'Manage queued background tasks and clear finished items.' }
-      { key: 'create', name: 'Create', description: 'Create new canvas sizes.' },
+        ]
-      { key: 'update', name: 'Update', description: 'Update canvas sizes.' },
+      },
-      { key: 'delete', name: 'Delete', description: 'Delete canvas sizes.' }
+      {
-    ]
+        key: 'scheduled-tasks',
-  },
+        order: 50,
-  {
+        name: 'Scheduled tasks',
-    key: 'announcements',
+        permissions: [
-    order: 80,
+          { key: 'read', name: 'Read', description: 'View scheduled refresh tasks.' },
-    name: 'Announcements',
+          { key: 'allow', name: 'Allow', description: 'Run scheduled refreshes manually.' }
-    sectionName: 'Content',
+        ]
-    actions: [
+      }
-      { key: 'read', name: 'Read', description: 'View announcements.' },
-      { key: 'create', name: 'Create', description: 'Create new announcements.' },
-      { key: 'update', name: 'Update', description: 'Update announcements.' },
-      { key: 'delete', name: 'Delete', description: 'Delete announcements.' }
-    ]
-  },
-  {
-    key: 'rss-feeds',
-    order: 90,
-    name: 'RSS feeds',
-    sectionName: 'Data Sources',
-    actions: [
-      { key: 'read', name: 'Read', description: 'View configured RSS feeds.' },
-      { key: 'create', name: 'Create', description: 'Create new RSS feeds.' },
-      { key: 'update', name: 'Update', description: 'Update RSS feeds.' },
-      { key: 'delete', name: 'Delete', description: 'Delete RSS feeds.' }
-    ]
-  },
-  {
-    key: 'api-sources',
-    order: 100,
-    name: 'API sources',
-    sectionName: 'Data Sources',
-    actions: [
-      { key: 'read', name: 'Read', description: 'View configured API sources.' },
-      { key: 'create', name: 'Create', description: 'Create new API sources.' },
-      { key: 'update', name: 'Update', description: 'Update API sources.' },
-      { key: 'delete', name: 'Delete', description: 'Delete API sources.' }
-    ]
-  },
-  {
-    key: 'timetables',
-    order: 110,
-    name: 'Timetables',
-    sectionName: 'Data Sources',
-    actions: [
-      { key: 'read', name: 'Read', description: 'View configured timetable groups.' },
-      { key: 'create', name: 'Create', description: 'Create new timetable groups.' },
-      { key: 'update', name: 'Update', description: 'Update timetable groups and entries.' },
-      { key: 'delete', name: 'Delete', description: 'Delete timetable groups.' }
-    ]
-  },
-  {
-    key: 'users',
-    order: 120,
-    name: 'Users',
-    sectionName: 'Settings',
-    actions: [
-      { key: 'read', name: 'Read', description: 'View users and role assignments.' },
-      { key: 'create', name: 'Create', description: 'Create new users.' },
-      { key: 'update', name: 'Update', description: 'Update users, passwords, and role assignments.' },
-      { key: 'delete', name: 'Delete', description: 'Delete users.' }
-    ]
-  },
-  {
-    key: 'rbac',
-    order: 130,
-    name: 'Roles and permissions',
-    sectionName: 'Settings',
-    actions: [
-      { key: 'read', name: 'Read', description: 'View roles and permissions.' },
-      { key: 'create', name: 'Create', description: 'Create new roles.' },
-      { key: 'update', name: 'Update', description: 'Update role details and permissions.' },
-      { key: 'delete', name: 'Delete', description: 'Delete roles.' }
-    ]
-  },
-  {
-    key: 'fonts',
-    order: 140,
-    name: 'Fonts',
-    sectionName: 'Settings',
-    actions: [
-      { key: 'read', name: 'Read', description: 'View managed fonts.' },
-      { key: 'create', name: 'Create', description: 'Upload managed fonts.' },
-      { key: 'delete', name: 'Delete', description: 'Remove managed fonts.' }
-    ]
-  },
-  {
-    key: 'background-tasks',
-    order: 150,
-    name: 'Task Queue',
-    sectionName: 'Settings',
-    actions: [
-      { key: 'read', name: 'Read', description: 'View queued background tasks.' },
-      { key: 'allow', name: 'Allow', description: 'Manage queued background tasks and clear finished items.' }
-    ]
-  },
-  {
-    key: 'scheduled-tasks',
-    order: 160,
-    name: 'Scheduled tasks',
-    sectionName: 'Settings',
-    actions: [
-      { key: 'read', name: 'Read', description: 'View scheduled refresh tasks.' },
-      { key: 'allow', name: 'Allow', description: 'Run scheduled refreshes manually.' }
     ]
   }
 ];
 
 const PERMISSIONS = PERMISSION_SECTIONS.flatMap(function (section) {
-  return section.actions.map(function (action) {
+  return (Array.isArray(section.permissions) ? section.permissions : []).flatMap(function (resource) {
-    return {
+    return (Array.isArray(resource.permissions) ? resource.permissions : []).map(function (action, index) {
-      key: `${section.key}.${action.key}`,
+      return {
-      name: section.name,
+        key: `${resource.key}.${action.key}`,
-      sectionOrder: section.order,
+        name: resource.name,
-      actionName: action.name,
+        sectionOrder: section.order,
-      sectionName: section.sectionName,
+        actionName: action.name,
-      sectionKey: section.key,
+        permissionOrder: index + 1,
-      actionKey: action.key,
+        sectionName: section.sectionName,
-      description: action.description
+        resourceKey: resource.key,
-    };
+        resourceOrder: resource.order,
+        resourceName: resource.name,
+        actionKey: action.key,
+        description: action.description
+      };
+    });
   });
 });
 

src/request-auth.js

@@ -246,12 +246,13 @@ function verifyRequestAuth(req) {
   return timingSafeEqualHex(expectedSignature, signature);
 }
 
-function createPageFetchAuthScript(token) {
+function createPageFetchAuthScript(token, cookiePath) {
   const normalizedToken = String(token && typeof token === 'object' ? token.token : token || '').trim();
   if (!normalizedToken) {
     return '';
   }
 
+  const normalizedCookiePath = String(cookiePath || '').trim();
   const pageAuthExpiresAt = token && typeof token === 'object' && Number.isFinite(Number(token.expiresAt))
     ? Number(token.expiresAt)
     : null;
@@ -262,6 +263,8 @@ function createPageFetchAuthScript(token) {
     '  (function () {',
     '    var pageAuthToken = ' + JSON.stringify(normalizedToken) + ';',
     '    var pageAuthExpiresAt = ' + JSON.stringify(pageAuthExpiresAt) + ';',
+    '    var pageAuthCookiePath = ' + JSON.stringify(normalizedCookiePath) + ';',
+    '    var pageAuthCookieName = "pulse_page_auth";',
     '    var pageAuthRenewalTimer = null;',
     '    var pageAuthRenewalInFlight = null;',
     '    var pageAuthRenewalSkewMs = ' + JSON.stringify(renewSkewMs) + ';',
@@ -287,11 +290,28 @@ function createPageFetchAuthScript(token) {
     '        });',
     '      }, delayMs);',
     '    }',
+    '    function writePageAuthCookie(nextToken, nextExpiresAt) {',
+    '      if (!pageAuthCookiePath) {',
+    '        return;',
+    '      }',
+    '      var cookieParts = [pageAuthCookieName + "=" + encodeURIComponent(String(nextToken || "").trim()), "Path=" + pageAuthCookiePath, "SameSite=Lax"];',
+    '      var expiresInMs = Number(nextExpiresAt || 0) - Date.now();',
+    '      if (Number.isFinite(expiresInMs) && expiresInMs > 0) {',
+    '        cookieParts.push("Max-Age=" + Math.max(1, Math.floor(expiresInMs / 1000)));',
+    '      } else {',
+    '        cookieParts.push("Max-Age=0");',
+    '      }',
+    '      if (window.location.protocol === "https:") {',
+    '        cookieParts.push("Secure");',
+    '      }',
+    '      document.cookie = cookieParts.join("; ");',
+    '    }',
     '    function setPageAuthToken(nextToken, nextExpiresAt) {',
     '      pageAuthToken = String(nextToken || "").trim();',
     '      pageAuthExpiresAt = Number(nextExpiresAt || 0) || null;',
     '      window.__pulsePageAuthToken = pageAuthToken;',
     '      window.__pulsePageAuthExpiresAt = pageAuthExpiresAt;',
+    '      writePageAuthCookie(pageAuthToken, pageAuthExpiresAt);',
     '      schedulePageAuthRenewal();',
     '    }',
     '    async function renewPageAuthToken() {',
@@ -326,6 +346,7 @@ function createPageFetchAuthScript(token) {
     '    window.__pulseRenewPageAuthToken = renewPageAuthToken;',
     '    window.__pulsePageAuthToken = pageAuthToken;',
     '    window.__pulsePageAuthExpiresAt = pageAuthExpiresAt;',
+    '    writePageAuthCookie(pageAuthToken, pageAuthExpiresAt);',
     '    window.addEventListener("focus", function () {',
     '      schedulePageAuthRenewal();',
     '    });',

src/web.js

@@ -6,7 +6,7 @@ const multer = require('multer');
 const fs = require('fs');
 const crypto = require('crypto');
 const common = require('./common');
-const { verifyPassword, createSessionToken, hashSessionToken, hashPassword } = require('#src/auth');
+const { verifyPassword, createSessionToken, hashSessionToken, hashPassword, validatePasswordStrength } = require('#src/auth');
 const pages = require('#src/web/pages');
 const registerMiddleware = require('#src/web/middleware');
 const { createBackgroundTaskQueue } = require('#src/web/lib/background-tasks/queue');
@@ -131,6 +131,7 @@ async function start() {
     formatDashboardDate: formatDashboardDate,
     getAuditUserId: getAuditUserId,
     hashPassword: hashPassword,
+    validatePasswordStrength: validatePasswordStrength,
     readArrayField: readArrayField,
     rbacData: rbacData,
     fetchOrderedPlaylistSlides: fetchOrderedPlaylistSlides,

src/web/handlebars.js

@@ -28,6 +28,15 @@ function registerGeneralHelpers(Handlebars) {
 
     return `${text.slice(0, Math.max(0, limit - 1)).trimEnd()}…`;
   });
+
+  Handlebars.registerHelper('textLengthAttrs', function (maxLength) {
+    const limit = Number(maxLength);
+    if (!Number.isFinite(limit) || limit < 1) {
+      return '';
+    }
+
+    return new Handlebars.SafeString(`maxlength="${Handlebars.escapeExpression(String(Math.floor(limit)))}" data-limit-text-length`);
+  });
 }
 
 // URL helpers for generating links and external URL checks.
@@ -112,12 +121,14 @@ function registerActionHelpers(Handlebars) {
       label: String(hash.deleteLabel || 'Delete'),
       className: String(hash.deleteClass || 'btn btn-danger'),
       url: String(hash.deleteUrl || '').trim(),
+      formId: String(hash.deleteFormId || '').trim(),
       confirmMessage: String(hash.deleteConfirmMessage || '').trim(),
       disabled: hash.deleteDisabled === undefined ? false : String(hash.deleteDisabled).toLowerCase() !== 'false',
       title: String(hash.deleteTitle || '')
     };
 
     const resolvedDeleteUrl = deleteAction.url || (!deleteAction.disabled && saveUrl ? saveUrl.replace(/\/+$/, '') + '/delete' : '');
+    const resolvedDeleteFormId = deleteAction.formId || '';
 
     if (!formId) {
       return '';
@@ -141,10 +152,11 @@ function registerActionHelpers(Handlebars) {
     }
 
     if (showDelete && (deleteAction.disabled || resolvedDeleteUrl)) {
-      const deleteActionAttr = resolvedDeleteUrl ? ` data-delete-action-url="${escape(resolvedDeleteUrl)}"` : '';
+      const deleteActionAttr = resolvedDeleteUrl && !resolvedDeleteFormId ? ` data-delete-action-url="${escape(resolvedDeleteUrl)}"` : '';
+      const deleteFormAttr = resolvedDeleteFormId ? ` form="${escape(resolvedDeleteFormId)}"` : '';
       const confirmAttr = deleteAction.confirmMessage ? ` data-confirm-message="${escape(deleteAction.confirmMessage)}"` : '';
       const titleAttr = deleteAction.disabled && deleteAction.title ? ` title="${escape(deleteAction.title)}"` : '';
-      parts.push(`<button type="button" class="${escape(deleteAction.className)}"${deleteActionAttr}${confirmAttr}${deleteAction.disabled ? ' disabled' : ''}${titleAttr}>${escape(deleteAction.label)}</button>`);
+      parts.push(`<button type="${resolvedDeleteFormId ? 'submit' : 'button'}" class="${escape(deleteAction.className)}"${deleteFormAttr}${deleteActionAttr}${confirmAttr}${deleteAction.disabled ? ' disabled' : ''}${titleAttr}>${escape(deleteAction.label)}</button>`);
     }
 
     parts.push('</div>');
@@ -160,6 +172,7 @@ function registerPartials(Handlebars, viewsRoot) {
   Handlebars.registerPartial('playlists/form', fs.readFileSync(path.join(viewsRoot, 'signage', 'playlists', 'form.hbs'), 'utf8'));
   Handlebars.registerPartial('signage/playlists/slide-row', fs.readFileSync(path.join(viewsRoot, 'signage', 'playlists', 'slide-row.hbs'), 'utf8'));
   Handlebars.registerPartial('signage/playlists/schedule-rule-card', fs.readFileSync(path.join(viewsRoot, 'signage', 'playlists', 'schedule-rule-card.hbs'), 'utf8'));
+  Handlebars.registerPartial('signage/templates/animation-advanced-modal', fs.readFileSync(path.join(viewsRoot, 'signage', 'templates', 'animation-advanced-modal.hbs'), 'utf8'));
   Handlebars.registerPartial('data-sources/api-sources/form', fs.readFileSync(path.join(viewsRoot, 'data-sources', 'api-sources', 'form.hbs'), 'utf8'));
   Handlebars.registerPartial('data-sources/rss-feeds/form', fs.readFileSync(path.join(viewsRoot, 'data-sources', 'rss-feeds', 'form.hbs'), 'utf8'));
 }

src/web/lib/auth/session.js

@@ -2,6 +2,35 @@
 
 const { normalizePermissionKeys } = require('#src/rbac');
 
+function getRequestOrigin(req) {
+  const forwardedProto = String(req && req.headers && req.headers['x-forwarded-proto'] || '').trim().split(',')[0];
+  const protocol = forwardedProto || (req && req.socket && req.socket.encrypted ? 'https' : 'http');
+  const forwardedHost = String(req && req.headers && req.headers['x-forwarded-host'] || '').trim().split(',')[0];
+  const host = forwardedHost || String(req && req.headers && req.headers.host || '').trim();
+  return host ? `${protocol}://${host}`.replace(/\/$/, '') : 'http://localhost';
+}
+
+function normalizeReturnToPath(value, baseUrl) {
+  const rawValue = String(value || '').trim();
+  if (!rawValue) {
+    return '';
+  }
+
+  const normalizedBaseUrl = String(baseUrl || '').trim().replace(/\/$/, '') || 'http://localhost';
+
+  try {
+    const parsed = new URL(rawValue, normalizedBaseUrl);
+    const baseOrigin = new URL(normalizedBaseUrl).origin;
+    if (parsed.origin !== baseOrigin) {
+      return '';
+    }
+
+    return parsed.pathname + parsed.search + parsed.hash;
+  } catch (_error) {
+    return rawValue.charAt(0) === '/' ? rawValue : '';
+  }
+}
+
 function createSessionService(options) {
   const sessionCookieName = String(options && options.sessionCookieName || '').trim();
   const sessionMaxAgeMs = Number(options && options.sessionMaxAgeMs);
@@ -142,7 +171,8 @@ function createSessionService(options) {
       return next();
     }
     setAuthMessageCookie(res, 'Please sign in to continue.');
-    res.redirect('/login');
+    const returnTo = normalizeReturnToPath(req && (req.originalUrl || req.url || req.path), getRequestOrigin(req));
+    res.redirect(returnTo ? '/login?returnTo=' + encodeURIComponent(returnTo) : '/login');
   }
 
   return {
@@ -154,8 +184,9 @@ function createSessionService(options) {
     consumeAuthMessageCookie: consumeAuthMessageCookie,
     loadCurrentUser: loadCurrentUser,
     createUserSession: createUserSession,
-    requireAuth: requireAuth
+    requireAuth: requireAuth,
+    getRequestOrigin: getRequestOrigin
   };
 }
 
-module.exports = { createSessionService };
+  module.exports = { createSessionService, normalizeReturnToPath, getRequestOrigin };

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

@@ -114,6 +114,15 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
       : '';
   }
 
+  if (regionType === 'qr-code') {
+    const src = String(regionContent.qr_preview || '').trim();
+    const borderRadius = Math.max(0, Math.round(Number(regionContent.qr_border_radius || 0)));
+    const radiusStyle = borderRadius > 0 ? ' style="border-radius:' + borderRadius + 'px;overflow:hidden;"' : '';
+    return src
+      ? '<img src="' + escapeHtml(src) + '" alt="' + escapeHtml(region.label || region.region_key || 'qr code') + '"' + radiusStyle + ' />'
+      : '';
+  }
+
   if (regionType === 'html') {
     const html = String(rawValue || '').trim();
     return html

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

@@ -19,6 +19,7 @@ function createUploadSyncService(options) {
   const notifyPlayerScreens = options && options.notifyPlayerScreens;
   const backgroundTaskQueue = options && options.backgroundTaskQueue;
   const MAX_UPLOAD_BYTES = 1024 * 1024 * 1024;
+  const MAX_FIELD_BYTES = 10 * 1024 * 1024;
   const pendingPlayerUploadSyncs = new Map();
   let pendingPlayerUploadSyncFlushTimer = null;
   let pendingPlayerUploadSyncFlushInFlight = null;
@@ -84,7 +85,8 @@ function createUploadSyncService(options) {
     return multer({
       storage: storage,
       limits: {
-        fileSize: MAX_UPLOAD_BYTES
+        fileSize: MAX_UPLOAD_BYTES,
+        fieldSize: MAX_FIELD_BYTES
       }
     });
   }

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

@@ -190,19 +190,117 @@
   max-width: 14rem;
 }
 
+.template-preview-card .card-body {
+  gap: 0.75rem 1rem;
+}
+
+.template-preview-card.is-previewing {
+  border-color: rgba(var(--bs-primary-rgb), 0.45);
+}
+
+.template-preview-card.is-previewing .card-header {
+  position: relative;
+}
+
+.template-preview-card.is-previewing .card-title {
+  position: relative;
+  padding-right: 6.25rem;
+}
+
+.template-preview-card.is-previewing .card-title::after {
+  content: ' previewing';
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 0.35rem);
+  color: var(--bs-primary);
+  font-size: 0.8em;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  transform: translateY(-50%);
+}
+
+.template-preview-card .btn-group {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0.5rem;
+}
+
+.template-preview-card .btn-group .btn {
+  width: 100%;
+}
+
+.template-preview-card[hidden] {
+  display: none !important;
+}
+
+.template-designer-form--previewing .designer-stage {
+  box-shadow: none !important;
+  overflow: hidden;
+}
+
+.template-designer-form--previewing .designer-overlay {
+  cursor: progress;
+}
+
+.template-designer-form--previewing .designer-rect {
+  transition: none !important;
+}
+
+.template-designer-form--previewing .resize-handle {
+  display: none;
+}
+
+.template-designer-form--previewing .region-item,
+.template-designer-form--previewing .template-details-card,
+.template-designer-form--previewing .template-options-card,
+.template-designer-form--previewing .region-info-card {
+  opacity: 0.84;
+}
+
+.rbac-permissions-table tbody tr:last-child > * {
+  border-bottom-width: 0;
+}
+
+.template-designer-form--previewing .region-item [disabled],
+.template-designer-form--previewing .template-details-card [disabled],
+.template-designer-form--previewing .template-options-card [disabled],
+.template-designer-form--previewing .region-info-card [disabled] {
+  cursor: not-allowed;
+}
+
 .announcement-icon-picker {
   position: relative;
 }
 
+.announcement-type-picker {
+  position: relative;
+}
+
 .announcement-icon-picker__toggle {
   display: flex;
   align-items: center;
   gap: 0.75rem;
   width: 100%;
-  min-height: calc(1.5em + 0.75rem + 2px);
+  min-height: calc(2.375rem + 2px);
   padding: 0.375rem 0.75rem;
   border: 1px solid var(--bs-border-color);
-  border-radius: 0.375rem;
+  border-radius: 0.875rem;
+  background: var(--bs-body-bg);
+  color: var(--bs-body-color);
+  text-align: left;
+}
+
+.announcement-type-picker__toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  min-height: calc(2.375rem + 2px);
+  padding: 0.375rem 0.75rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.875rem;
   background: var(--bs-body-bg);
   color: var(--bs-body-color);
   text-align: left;
@@ -213,23 +311,73 @@
   box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
 }
 
+.announcement-type-picker__toggle:focus-visible {
+  outline: 0;
+  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
+}
+
 .announcement-icon-picker__toggle-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.75rem;
   height: 1.75rem;
-  border-radius: 0.5rem;
+  border-radius: 0.7rem;
   background: rgba(var(--bs-primary-rgb), 0.1);
   color: var(--bs-primary);
   font-size: 1rem;
   flex: 0 0 auto;
 }
 
-.announcement-icon-picker__toggle-label {
+.announcement-type-picker__toggle-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 0.7rem;
+  background: rgba(var(--bs-primary-rgb), 0.1);
+  color: var(--bs-primary);
+  font-size: 1rem;
+  flex: 0 0 auto;
+}
+
+.announcement-icon-picker__toggle-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
   flex: 1 1 auto;
   min-width: 0;
+}
+
+.announcement-type-picker__toggle-content {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.announcement-icon-picker__toggle-label {
   font-weight: 600;
+  line-height: 1.1;
+}
+
+.announcement-type-picker__toggle-label {
+  font-weight: 600;
+  line-height: 1.1;
+}
+
+.announcement-icon-picker__toggle-hint {
+  color: var(--bs-secondary-color);
+  font-size: 0.78rem;
+  line-height: 1.1;
+}
+
+.announcement-type-picker__toggle-hint {
+  color: var(--bs-secondary-color);
+  font-size: 0.78rem;
+  line-height: 1.1;
 }
 
 .announcement-icon-picker__caret {
@@ -238,6 +386,12 @@
   font-size: 0.8rem;
 }
 
+.announcement-type-picker__caret {
+  flex: 0 0 auto;
+  color: var(--bs-secondary-color);
+  font-size: 0.8rem;
+}
+
 .announcement-icon-picker__menu {
   position: absolute;
   z-index: 20;
@@ -253,6 +407,26 @@
   box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.18);
 }
 
+.announcement-type-picker__menu {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 0.5rem);
+  bottom: auto;
+  left: 0;
+  width: min(100%, 28rem);
+  max-width: calc(100vw - 1rem);
+  padding: 0.75rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 1rem;
+  background: var(--bs-body-bg);
+  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.18);
+}
+
+.announcement-type-picker__menu.is-open-above {
+  top: auto;
+  bottom: calc(100% + 0.5rem);
+}
+
 .announcement-icon-picker__menu.is-open-above {
   top: auto;
   bottom: calc(100% + 0.5rem);
@@ -274,6 +448,12 @@
   gap: 0.5rem;
 }
 
+.announcement-type-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  gap: 0.5rem;
+}
+
 .announcement-icon-picker__option {
   display: inline-flex;
   align-items: center;
@@ -287,6 +467,20 @@
   transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
 }
 
+.announcement-type-picker__option {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.75rem;
+  background: var(--bs-body-bg);
+  color: var(--bs-body-color);
+  text-align: left;
+  transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
+}
+
 .announcement-icon-picker__option:hover,
 .announcement-icon-picker__option:focus-visible {
   border-color: rgba(var(--bs-primary-rgb), 0.7);
@@ -295,6 +489,14 @@
   transform: translateY(-1px);
 }
 
+.announcement-type-picker__option:hover,
+.announcement-type-picker__option:focus-visible {
+  border-color: rgba(var(--bs-primary-rgb), 0.7);
+  background: rgba(var(--bs-primary-rgb), 0.04);
+  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.15);
+  transform: translateY(-1px);
+}
+
 .announcement-icon-picker__option.is-selected {
   border-color: var(--bs-primary);
   background: rgba(var(--bs-primary-rgb), 0.12);
@@ -302,11 +504,154 @@
   box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.12);
 }
 
+.announcement-type-picker__option.is-selected {
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.12);
+}
+
 .announcement-icon-picker__option i {
   font-size: 1.05rem;
   line-height: 1;
 }
 
+.announcement-type-picker__option-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.5rem;
+  border-radius: 0.65rem;
+  background: rgba(var(--bs-primary-rgb), 0.1);
+  color: var(--bs-primary);
+  font-size: 1rem;
+}
+
+.announcement-type-picker__option-icon i {
+  line-height: 1;
+}
+
+.announcement-type-picker__label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  line-height: 1.1;
+  text-align: center;
+}
+
+.announcement-screen-picker {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 0.5rem;
+  max-height: 18rem;
+  padding: 0.25rem;
+  overflow: auto;
+}
+
+.announcement-screen-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.announcement-screen-action {
+  flex: 1 1 9rem;
+}
+
+.announcement-screen-option {
+  position: relative;
+  min-width: 0;
+}
+
+.announcement-screen-option > .btn-check {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+}
+
+.announcement-screen-chip {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  width: 100%;
+  min-height: 2.5rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.875rem;
+  background: var(--bs-body-bg);
+  color: var(--bs-body-color);
+  cursor: pointer;
+  transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
+}
+
+.announcement-screen-chip:hover,
+.announcement-screen-chip:focus-visible {
+  border-color: rgba(var(--bs-primary-rgb), 0.7);
+  background: rgba(var(--bs-primary-rgb), 0.04);
+  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.12);
+  transform: translateY(-1px);
+}
+
+.announcement-screen-option > .btn-check:checked + .announcement-screen-chip {
+  border-color: var(--bs-primary);
+  background: rgba(var(--bs-primary-rgb), 0.08);
+  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.12);
+}
+
+.announcement-screen-chip__check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: auto;
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 999px;
+  background: rgba(var(--bs-primary-rgb), 0.1);
+  color: var(--bs-primary);
+  opacity: 0;
+  transform: scale(0.85);
+  transition: opacity 120ms ease, transform 120ms ease, background-color 120ms ease, color 120ms ease;
+}
+
+.announcement-screen-chip__check-icon {
+  font-size: 0.9rem;
+  line-height: 1;
+}
+
+.announcement-screen-option > .btn-check:checked + .announcement-screen-chip .announcement-screen-chip__check {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.announcement-screen-chip__text {
+  display: block;
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+@media (max-width: 576px) {
+  .announcement-screen-picker {
+    max-height: 16rem;
+  }
+}
+
+@media (max-width: 576px) {
+  .announcement-type-picker__menu {
+    width: calc(100vw - 2rem);
+    right: 0;
+    left: auto;
+  }
+
+  .announcement-type-picker__grid {
+    grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
+  }
+}
+
 @media (max-width: 576px) {
   .announcement-icon-picker__menu {
     width: calc(100vw - 2rem);
@@ -1103,6 +1448,31 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   box-sizing: border-box;
 }
 
+.slide-preview-text-content {
+  line-height: 1.5;
+}
+
+.slide-preview-text-content > * {
+  margin: 1em 0;
+}
+
+.slide-preview-text-content > *:first-child {
+  margin-top: 0;
+}
+
+.slide-preview-text-content > *:last-child {
+  margin-bottom: 1em;
+}
+
+.slide-preview-text-content ul,
+.slide-preview-text-content ol {
+  padding-left: 1.2em;
+}
+
+.slide-preview-text-content code {
+  white-space: pre-wrap;
+}
+
 .slide-preview-image {
   width: 100%;
   height: 100%;
@@ -1401,7 +1771,7 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   position: relative;
   width: 100%;
   min-height: 18rem;
-  /* overflow: hidden; */
+  overflow: visible;
   border: 1px solid var(--bs-border-color);
   border-radius: 0;
   background: var(--bs-body-bg);
@@ -1431,11 +1801,16 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 .designer-overlay {
   z-index: 2;
   cursor: default;
+  --designer-overlay-scale: 1;
 }
 
 .designer-rect {
   position: absolute;
-  border: 2px solid rgba(13, 110, 253, 0.95);
+  overflow: visible;
+  z-index: 3;
+  border: 0;
+  outline: 2px solid rgba(13, 110, 253, 0.95);
+  outline-offset: -2px;
   background: rgba(13, 110, 253, 0.12);
   box-sizing: border-box;
   border-radius: 0;
@@ -1445,20 +1820,20 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 }
 
 .designer-rect.selected {
-  border-color: rgba(25, 135, 84, 1);
+  outline-color: rgba(25, 135, 84, 1);
   background: rgba(25, 135, 84, 0.14);
 }
 
 .designer-rect-label {
   position: absolute;
-  left: 0.4rem;
+  left: calc(6px * var(--designer-overlay-scale, 1));
-  top: 0.35rem;
+  top: calc(6px * var(--designer-overlay-scale, 1));
   max-width: 100%;
-  padding: 0.15rem 0.45rem;
+  padding: calc(2px * var(--designer-overlay-scale, 1)) calc(7px * var(--designer-overlay-scale, 1));
   border-radius: 999px;
   background: rgba(33, 37, 41, 0.92);
   color: #fff;
-  font-size: 0.75rem;
+  font-size: calc(0.75rem * var(--designer-overlay-scale, 1));
   line-height: 1.2;
   white-space: nowrap;
   overflow: hidden;
@@ -1471,8 +1846,10 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 
 .resize-handle {
   position: absolute;
-  width: 0.8rem;
+  z-index: 4;
-  height: 0.8rem;
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
   border-radius: 999px;
   border: 2px solid #fff;
   background: rgba(13, 110, 253, 1);
@@ -1482,28 +1859,28 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 .resize-handle.nw {
   left: 0;
   top: 0;
-  transform: translate(-50%, -50%);
+  transform: translate(-40%, -40%);
   cursor: nwse-resize;
 }
 
 .resize-handle.ne {
   right: 0;
   top: 0;
-  transform: translate(50%, -50%);
+  transform: translate(40%, -40%);
   cursor: nesw-resize;
 }
 
 .resize-handle.sw {
   left: 0;
   bottom: 0;
-  transform: translate(-50%, 50%);
+  transform: translate(-40%, 40%);
   cursor: nesw-resize;
 }
 
 .resize-handle.se {
   right: 0;
   bottom: 0;
-  transform: translate(50%, 50%);
+  transform: translate(40%, 40%);
   cursor: nwse-resize;
 }
 
@@ -1641,6 +2018,10 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.region-field-grid--animation {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .region-field-grid > label {
   display: grid;
   gap: 0.35rem;
@@ -1656,6 +2037,7 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: nowrap;
   gap: 0;
   min-height: 3.25rem;
 }
@@ -1669,6 +2051,7 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 
 .template-field-head strong {
   font-size: 0.95rem;
+  min-width: 0;
 }
 
 .template-field-head .chip {
@@ -1755,6 +2138,83 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   border-radius: var(--bs-border-radius);
 }
 
+.announcement-color-picker {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.announcement-color-picker__grid {
+  display: grid;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: 0.375rem;
+}
+
+.announcement-color-picker__option {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.375rem;
+  padding: 0.375rem;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 0.75rem;
+  background: var(--bs-body-bg);
+  color: var(--bs-body-color);
+  text-align: left;
+  transition: transform 120ms ease, border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
+}
+
+.announcement-color-picker__option:hover,
+.announcement-color-picker__option:focus-visible {
+  border-color: rgba(var(--bs-primary-rgb), 0.7);
+  background: rgba(var(--bs-primary-rgb), 0.04);
+  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.15);
+  transform: translateY(-1px);
+}
+
+.announcement-color-picker__option.is-selected {
+  border-color: var(--bs-primary);
+  box-shadow: 0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.12);
+}
+
+.announcement-color-picker__swatch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.5rem;
+  border-radius: 0.65rem;
+  font-size: 1rem;
+}
+
+.announcement-color-picker__check {
+  opacity: 0;
+  transform: scale(0.8);
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+
+.announcement-color-picker__option.is-selected .announcement-color-picker__check {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.announcement-color-picker__label {
+  font-size: 0.8rem;
+  font-weight: 600;
+  line-height: 1.1;
+  text-align: center;
+}
+
+@media (max-width: 1200px) {
+  .announcement-color-picker__grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 768px) {
+  .announcement-color-picker__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
 .announcement-icon-preview {
   display: flex;
   align-items: center;
@@ -1782,6 +2242,8 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   display: grid;
   gap: 0.5rem;
   padding-top: 0.25rem;
+  padding-bottom: 0.5rem;
+  margin-bottom: 0;
 }
 
 .api-region-placeholder-title {
@@ -1793,7 +2255,8 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 }
 
 .api-region-sample-accordion {
-  padding: 0.85rem 1rem;
+  padding: 0.85rem 1rem 1rem;
+  margin-bottom: 0.75rem;
   border: 1px solid var(--bs-border-color);
   border-radius: 0.85rem;
   background: var(--bs-secondary-bg);
@@ -1877,7 +2340,8 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 
   .region-field-grid--identity,
   .region-field-grid--position,
-  .region-field-grid--size {
+  .region-field-grid--size,
+  .region-field-grid--animation {
     grid-template-columns: 1fr;
   }
 }
@@ -2128,6 +2592,50 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   flex: 1 1 0;
 }
 
+.schedule-day-grid .schedule-day-option {
+  position: relative;
+  display: flex;
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.schedule-day-grid .schedule-day-option > .btn-check {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+}
+
+.schedule-day-grid .schedule-day-option > .schedule-day-button {
+  width: 100%;
+  border-radius: 0;
+}
+
+.schedule-day-grid .schedule-day-option:first-child > .schedule-day-button {
+  border-top-left-radius: var(--bs-btn-border-radius);
+  border-bottom-left-radius: var(--bs-btn-border-radius);
+}
+
+.schedule-day-grid .schedule-day-option:last-child > .schedule-day-button {
+  border-top-right-radius: var(--bs-btn-border-radius);
+  border-bottom-right-radius: var(--bs-btn-border-radius);
+}
+
+.schedule-day-grid .schedule-day-option + .schedule-day-option {
+  margin-left: -1px;
+}
+
+.schedule-day-grid .schedule-day-button.is-invalid {
+  color: var(--bs-danger);
+  border-color: var(--bs-danger);
+  background-color: rgba(var(--bs-danger-rgb), 0.08);
+}
+
+.schedule-day-grid .btn-check:checked + .schedule-day-button.is-invalid {
+  color: #fff;
+  border-color: var(--bs-danger);
+  background-color: var(--bs-danger);
+}
+
 .slide-schedule-dialog {
   position: fixed;
   top: 50%;
@@ -2191,11 +2699,9 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   overflow: hidden;
 }
 
-.slide-schedule-content .schedule-rule-card.collapsed-card > .card-body {
+.slide-schedule-content .schedule-rule-card.collapsed-card > .card-body,
-  display: block !important;
+.slide-schedule-content .schedule-rule-card.collapsed-card > .card-footer {
-  padding: 0 !important;
+  display: none;
-  max-height: 0;
-  overflow: hidden;
 }
 
 .slide-schedule-content .schedule-rule-card.collapsed-card .card-header {
@@ -2240,8 +2746,18 @@ td[data-label="Actions"] > div {
 }
 
 .playlist-duration-input {
-  width: 6rem;
+  width: 4rem !important;
-  min-width: 6rem;
+  min-width: 4rem !important;
+  flex: 0 0 4rem !important;
+}
+
+.playlist-duration-input-group {
+  display: inline-flex !important;
+  flex: 0 0 auto !important;
+  width: fit-content !important;
+  max-width: fit-content !important;
+  border-radius: var(--bs-border-radius-sm);
+  overflow: hidden;
 }
 
 .playlist-duration-input::-webkit-outer-spin-button,
@@ -2264,6 +2780,13 @@ td[data-label="Actions"] > div {
   text-align: left;
 }
 
+.playlist-duration-prefix {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
 .playlist-use-video-duration {
   white-space: nowrap;
 }
@@ -2332,13 +2855,24 @@ table.table > :not(caption) > * > * {
 .playlist-order-cell {
   width: 1%;
   white-space: nowrap;
+  vertical-align: top;
+  padding-top: 0 !important;
   padding-bottom: 0 !important;
 }
 
 .playlist-order-cell-inner {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 0.5rem;
+  width: 100%;
+  gap: 0.65rem;
+}
+
+.playlist-order-stepper {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.02rem;
 }
 
 .playlist-drag-handle {
@@ -2346,26 +2880,46 @@ table.table > :not(caption) > * > * {
   align-items: center;
   justify-content: center;
   width: 1.35rem;
-  height: 1.9rem;
+  height: 1.35rem;
   line-height: 1;
-  cursor: grab;
+  cursor: grab !important;
   text-decoration: none;
   touch-action: none;
 }
 
+.playlist-drag-handle:hover,
+.playlist-drag-handle:focus {
+  cursor: grab !important;
+}
+
+.playlist-drag-handle:active,
+.playlist-drag-handle[aria-grabbed="true"] {
+  cursor: grabbing !important;
+}
+
 .playlist-drag-handle-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 1.1rem;
-  height: 1.9rem;
+  height: 1.1rem;
+  font-size: 1rem;
+  line-height: 1;
 }
 
-.playlist-drag-handle-svg {
+.playlist-order-move {
-  display: block;
+  display: inline-flex;
-  width: 100%;
+  align-items: center;
-  height: 100%;
+  justify-content: center;
-  fill: currentColor;
+  width: 1.15rem;
+  height: 1.15rem;
+  line-height: 1;
+  text-decoration: none;
+}
+
+.playlist-order-move:hover,
+.playlist-order-move:focus {
+  text-decoration: none;
 }
 
 .playlist-drag-handle:active,

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

@@ -157,10 +157,14 @@
     return Boolean(form && form.dataset && form.dataset.dirty === 'true');
   }
 
+  function isRegionEditorField(target) {
+    return Boolean(target && typeof target.closest === 'function' && target.closest('.region-item'));
+  }
+
   function initDirtyTracking() {
     document.addEventListener('input', function (event) {
       var target = event.target;
-      if (!target || !target.form) {
+      if (!target || !target.form || isRegionEditorField(target)) {
         return;
       }
       markFormDirty(target.form);
@@ -168,13 +172,101 @@
 
     document.addEventListener('change', function (event) {
       var target = event.target;
-      if (!target || !target.form) {
+      if (!target || !target.form || isRegionEditorField(target)) {
         return;
       }
       markFormDirty(target.form);
     }, true);
   }
 
+  function clampLimitedInputValue(input) {
+    if (!input || !input.matches || !input.matches('input[data-limit-input-value]')) {
+      return;
+    }
+
+    var minAttr = input.getAttribute('min');
+    var maxAttr = input.getAttribute('max');
+    var minValue = minAttr === null || minAttr === '' ? null : Number(minAttr);
+    var maxValue = maxAttr === null || maxAttr === '' ? null : Number(maxAttr);
+    var rawValue = String(input.value || '').trim();
+
+    if (!rawValue) {
+      return;
+    }
+
+    var numericValue = Number(rawValue);
+    if (!Number.isFinite(numericValue)) {
+      return;
+    }
+
+    if (Number.isFinite(minValue) && numericValue < minValue) {
+      input.value = String(minValue);
+      return;
+    }
+
+    if (Number.isFinite(maxValue) && numericValue > maxValue) {
+      input.value = String(maxValue);
+    }
+  }
+
+  function initLimitedInputValues() {
+    document.addEventListener('input', function (event) {
+      clampLimitedInputValue(event.target);
+    }, true);
+
+    document.addEventListener('change', function (event) {
+      clampLimitedInputValue(event.target);
+    }, true);
+
+    document.addEventListener('paste', function (event) {
+      var target = event.target;
+      if (!target || !target.matches || !target.matches('input[data-limit-input-value]')) {
+        return;
+      }
+
+      window.setTimeout(function () {
+        clampLimitedInputValue(target);
+      }, 0);
+    }, true);
+  }
+
+  function clampLimitedTextValue(input) {
+    if (!input || !input.matches || !input.matches('input[data-limit-text-length], textarea[data-limit-text-length]')) {
+      return;
+    }
+
+    var maxLength = Number(input.getAttribute('maxlength'));
+    if (!Number.isFinite(maxLength) || maxLength < 1) {
+      return;
+    }
+
+    var value = String(input.value || '');
+    if (value.length > maxLength) {
+      input.value = value.slice(0, maxLength);
+    }
+  }
+
+  function initLimitedTextInputValues() {
+    document.addEventListener('input', function (event) {
+      clampLimitedTextValue(event.target);
+    }, true);
+
+    document.addEventListener('change', function (event) {
+      clampLimitedTextValue(event.target);
+    }, true);
+
+    document.addEventListener('paste', function (event) {
+      var target = event.target;
+      if (!target || !target.matches || !target.matches('input[data-limit-text-length], textarea[data-limit-text-length]')) {
+        return;
+      }
+
+      window.setTimeout(function () {
+        clampLimitedTextValue(target);
+      }, 0);
+    }, true);
+  }
+
   function initCancelConfirm() {
     document.addEventListener('click', function (event) {
       var cancelTarget = event.target.closest('[data-confirm-unsaved]');
@@ -210,6 +302,24 @@
     return savedMessage;
   }
 
+  function parseAsyncSaveErrorMessage(responseText) {
+    var errorMessage = parseAsyncSaveResponseMessage(responseText);
+    if (errorMessage) {
+      return errorMessage;
+    }
+
+    return String(responseText || '').trim();
+  }
+
+  function isWarningSaveError(error) {
+    var status = Number(error && error.status);
+    if (status === 400 || status === 422) {
+      return true;
+    }
+
+    return /region names must be unique/i.test(String(error && error.message || ''));
+  }
+
   function getAsyncSaveActionField(form) {
     if (!form || !form.querySelector) {
       return null;
@@ -302,7 +412,10 @@
       });
 
       if (!response.ok) {
-        throw new Error(await response.text() || (settings.errorMessage || 'Unable to save changes.'));
+        var responseText = await response.text();
+        var error = new Error(parseAsyncSaveErrorMessage(responseText) || (settings.errorMessage || 'Unable to save changes.'));
+        error.status = response.status;
+        throw error;
       }
 
       if (isLoginRedirect(response)) {
@@ -353,11 +466,25 @@
           })
         : parseAsyncSaveResponseMessage(responseText);
 
-      showToast(successMessage || String(settings.fallbackSuccessMessage || 'Saved.'), 'success');
+      var resolvedSuccessMessage = successMessage || String(settings.fallbackSuccessMessage || 'Saved.');
+
+      if (form.dataset && form.dataset.asyncSaveRefreshPage === 'true') {
+        if (typeof window.queueToastAfterRefresh === 'function') {
+          window.queueToastAfterRefresh(resolvedSuccessMessage, 'success');
+        } else if (typeof showToast === 'function') {
+          showToast(resolvedSuccessMessage, 'success');
+        }
+        window.setTimeout(function () {
+          window.location.reload();
+        }, 1000);
+        return true;
+      }
+
+      showToast(resolvedSuccessMessage, 'success');
       return true;
     } catch (error) {
       if (typeof showToast === 'function') {
-        var variant = Number(error && error.status) >= 400 && Number(error && error.status) < 500 ? 'warning' : 'danger';
+        var variant = isWarningSaveError(error) ? 'warning' : 'danger';
         showToast(error && error.message ? error.message : (settings.errorMessage || 'Unable to save changes.'), variant);
       } else {
         window.alert(error && error.message ? error.message : (settings.errorMessage || 'Unable to save changes.'));
@@ -812,7 +939,7 @@
         return;
       }
 
-      element.textContent = formatDashboardDate(date);
+      element.textContent = formatDashboardDate(date, element.getAttribute('data-local-datetime-format') === '24h');
     });
   }
 
@@ -852,6 +979,8 @@
   initConfirmForms();
   initDeleteButtons();
   initDirtyTracking();
+  initLimitedInputValues();
+  initLimitedTextInputValues();
   initCancelConfirm();
   initAsyncCommandForms();
   initAsyncSaveForms();
@@ -862,6 +991,10 @@
   attachSlideThumbFallbacks(document);
   window.initJsonTogglePanels = initJsonTogglePanels;
   window.initLocalDateTimes = initLocalDateTimes;
+  window.clampLimitedInputValue = clampLimitedInputValue;
+  window.initLimitedInputValues = initLimitedInputValues;
+  window.clampLimitedTextValue = clampLimitedTextValue;
+  window.initLimitedTextInputValues = initLimitedTextInputValues;
   window.createSlideThumbPlaceholder = createSlideThumbPlaceholder;
   window.attachSlideThumbFallbacks = attachSlideThumbFallbacks;
 }());

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

@@ -18,21 +18,127 @@ function updateAnnouncementDurationFields() {
   }
 }
 
-function updateAnnouncementColorPreview() {
+function updateAnnouncementColorPickerSelection() {
-  var colorSelect = document.getElementById('announcement-color');
+  var colorInput = document.getElementById('announcement-color');
-  var preview = document.querySelector('[data-announcement-color-preview]');
+  var picker = document.querySelector('[data-announcement-color-picker-shell]');
-  if (!colorSelect || !preview) {
+  if (!colorInput || !picker) {
     return;
   }
 
-  var selectedOption = colorSelect.options[colorSelect.selectedIndex] || null;
+  var selectedValue = String(colorInput.value || '').trim().toLowerCase() || 'primary';
-  var colorKey = String(colorSelect.value || '').trim().toLowerCase() || 'primary';
+  picker.querySelectorAll('[data-announcement-color-option]').forEach(function (button) {
-  var label = selectedOption ? String(selectedOption.textContent || selectedOption.label || colorKey).trim() : colorKey;
+    var isSelected = String(button.getAttribute('data-color-key') || '').trim().toLowerCase() === selectedValue;
+    button.classList.toggle('is-selected', isSelected);
+    button.setAttribute('aria-pressed', isSelected ? 'true' : 'false');
+  });
+}
 
-  preview.className = 'announcement-color-preview text-bg-' + colorKey;
+function setAnnouncementScreenSelection(isSelected) {
-  preview.setAttribute('aria-label', label);
+  document.querySelectorAll('input[name="screen_ids[]"]').forEach(function (input) {
-  preview.setAttribute('title', label);
+    input.checked = isSelected;
-  preview.textContent = '';
+  });
+}
+
+function positionAnnouncementTypePicker() {
+  var picker = document.querySelector('[data-announcement-type-picker]');
+  var toggle = document.querySelector('[data-announcement-type-picker-toggle]');
+  var shell = document.querySelector('[data-announcement-type-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 closeAnnouncementTypePicker() {
+  var picker = document.querySelector('[data-announcement-type-picker]');
+  var toggle = document.querySelector('[data-announcement-type-picker-toggle]');
+  if (!picker) {
+    return;
+  }
+
+  picker.hidden = true;
+  picker.classList.remove('is-open-above');
+  if (toggle) {
+    toggle.setAttribute('aria-expanded', 'false');
+  }
+}
+
+function openAnnouncementTypePicker() {
+  var picker = document.querySelector('[data-announcement-type-picker]');
+  var toggle = document.querySelector('[data-announcement-type-picker-toggle]');
+  if (!picker) {
+    return;
+  }
+
+  picker.hidden = false;
+  if (toggle) {
+    toggle.setAttribute('aria-expanded', 'true');
+  }
+
+  if (typeof window !== 'undefined' && window.requestAnimationFrame) {
+    window.requestAnimationFrame(positionAnnouncementTypePicker);
+  } else {
+    positionAnnouncementTypePicker();
+  }
+}
+
+function updateAnnouncementTypePickerSelection() {
+  var typeInput = document.getElementById('announcement-type');
+  var previewButton = document.querySelector('[data-announcement-type-picker-toggle]');
+  var picker = document.querySelector('[data-announcement-type-picker]');
+  if (!typeInput || !previewButton || !picker) {
+    return;
+  }
+
+  var selectedValue = String(typeInput.value || '').trim().toLowerCase();
+  var selectedOption = picker.querySelector('[data-announcement-type-option][data-type-key="' + selectedValue + '"]');
+  var label = selectedOption ? String(selectedOption.getAttribute('data-type-label') || selectedOption.textContent || selectedValue).trim() : selectedValue;
+  var iconKey = selectedOption ? String(selectedOption.getAttribute('data-type-icon') || '').trim().toLowerCase() : '';
+  var icon = previewButton.querySelector('[data-announcement-type-picker-icon]');
+  var text = previewButton.querySelector('[data-announcement-type-picker-label]');
+
+  previewButton.setAttribute('aria-label', label);
+  previewButton.setAttribute('title', label);
+  if (icon) {
+    icon.className = 'bi bi-' + iconKey;
+  }
+  if (text) {
+    text.textContent = label;
+  }
+
+  picker.querySelectorAll('[data-announcement-type-option]').forEach(function (button) {
+    var isSelected = String(button.getAttribute('data-type-key') || '').trim().toLowerCase() === selectedValue;
+    button.classList.toggle('is-selected', isSelected);
+    button.setAttribute('aria-pressed', isSelected ? 'true' : 'false');
+  });
+}
+
+function setAnnouncementTypeValue(typeKey) {
+  var typeInput = document.getElementById('announcement-type');
+  if (!typeInput) {
+    return;
+  }
+
+  var normalized = String(typeKey || '').trim().toLowerCase();
+  if (!normalized) {
+    return;
+  }
+
+  typeInput.value = normalized;
+  updateAnnouncementTypePickerSelection();
 }
 
 function updateAnnouncementIconPreview() {
@@ -155,21 +261,90 @@ function setAnnouncementIconValue(iconKey) {
 }
 
 function initAnnouncementForm() {
+  var typeInput = document.getElementById('announcement-type');
+  var typePickerToggle = document.querySelector('[data-announcement-type-picker-toggle]');
+  var typePicker = document.querySelector('[data-announcement-type-picker]');
+  var typePickerClose = document.querySelector('[data-announcement-type-picker-close]');
   var modeSelect = document.getElementById('announcement-duration-mode');
-  var colorSelect = document.getElementById('announcement-color');
+  var colorInput = document.getElementById('announcement-color');
+  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();
+  }
+
+  if (typePickerToggle) {
+    typePickerToggle.addEventListener('click', function (event) {
+      event.preventDefault();
+      var isExpanded = typePicker && !typePicker.hidden;
+      if (isExpanded) {
+        closeAnnouncementTypePicker();
+      } else {
+        openAnnouncementTypePicker();
+      }
+    });
+  }
+
+  if (typePickerClose) {
+    typePickerClose.addEventListener('click', function (event) {
+      event.preventDefault();
+      closeAnnouncementTypePicker();
+    });
+  }
+
+  if (typePicker) {
+    typePicker.addEventListener('click', function (event) {
+      var button = event.target && event.target.closest ? event.target.closest('[data-announcement-type-option]') : null;
+      if (!button) {
+        return;
+      }
+
+      event.preventDefault();
+      setAnnouncementTypeValue(button.getAttribute('data-type-key'));
+      closeAnnouncementTypePicker();
+    });
+  }
+
   if (modeSelect) {
     modeSelect.addEventListener('change', updateAnnouncementDurationFields);
     updateAnnouncementDurationFields();
   }
 
-  if (colorSelect) {
+  if (colorInput) {
-    colorSelect.addEventListener('change', updateAnnouncementColorPreview);
+    updateAnnouncementColorPickerSelection();
-    updateAnnouncementColorPreview();
+  }
+
+  if (colorPicker) {
+    colorPicker.addEventListener('click', function (event) {
+      var button = event.target && event.target.closest ? event.target.closest('[data-announcement-color-option]') : null;
+      if (!button) {
+        return;
+      }
+
+      event.preventDefault();
+      colorInput.value = String(button.getAttribute('data-color-key') || '').trim().toLowerCase();
+      updateAnnouncementColorPickerSelection();
+    });
+  }
+
+  if (screenSelectAll) {
+    screenSelectAll.addEventListener('click', function (event) {
+      event.preventDefault();
+      setAnnouncementScreenSelection(true);
+    });
+  }
+
+  if (screenSelectNone) {
+    screenSelectNone.addEventListener('click', function (event) {
+      event.preventDefault();
+      setAnnouncementScreenSelection(false);
+    });
   }
 
   if (iconSelect) {
@@ -210,8 +385,17 @@ function initAnnouncementForm() {
   }
 
   window.addEventListener('resize', positionAnnouncementIconPicker);
+  window.addEventListener('resize', positionAnnouncementTypePicker);
 
   document.addEventListener('click', function (event) {
+    var typePickerNode = document.querySelector('[data-announcement-type-picker]');
+    var typeToggleNode = document.querySelector('[data-announcement-type-picker-toggle]');
+    if (typePickerNode && !typePickerNode.hidden) {
+      if (!(typePickerNode.contains(event.target) || (typeToggleNode && typeToggleNode.contains(event.target)))) {
+        closeAnnouncementTypePicker();
+      }
+    }
+
     var picker = document.querySelector('[data-announcement-icon-picker]');
     var toggle = document.querySelector('[data-announcement-icon-picker-toggle]');
     if (!picker || picker.hidden) {

src/web/public/js/data-sources/api-source-form.js

@@ -9,6 +9,29 @@
   var methodSelect = form.querySelector('[data-api-source-auth-method]');
   var authDetailsSection = form.querySelector('[data-api-source-auth-details-section]');
   var panels = Array.prototype.slice.call(form.querySelectorAll('[data-api-source-auth-panel]'));
+  var bearerTokenInput = form.querySelector('[data-api-source-bearer-token-input]');
+  var bearerTokenToggle = form.querySelector('[data-api-source-bearer-token-toggle]');
+
+  function updateBearerTokenToggle() {
+    if (!bearerTokenInput || !bearerTokenToggle) {
+      return;
+    }
+
+    var isVisible = bearerTokenInput.type === 'text';
+    bearerTokenToggle.setAttribute('aria-pressed', String(isVisible));
+    bearerTokenToggle.setAttribute('aria-label', isVisible ? 'Hide bearer token' : 'Show bearer token');
+    bearerTokenToggle.innerHTML = '<i class="bi ' + (isVisible ? 'bi-eye-slash' : 'bi-eye') + '" aria-hidden="true"></i>';
+  }
+
+  function toggleBearerTokenVisibility() {
+    if (!bearerTokenInput) {
+      return;
+    }
+
+    bearerTokenInput.type = bearerTokenInput.type === 'password' ? 'text' : 'password';
+    updateBearerTokenToggle();
+    bearerTokenInput.focus();
+  }
 
   function updatePanels() {
     var method = String(methodSelect && methodSelect.value || 'none').trim();
@@ -28,5 +51,10 @@
     methodSelect.addEventListener('change', updatePanels);
   }
 
+  if (bearerTokenToggle && bearerTokenInput) {
+    bearerTokenToggle.addEventListener('click', toggleBearerTokenVisibility);
+    updateBearerTokenToggle();
+  }
+
   updatePanels();
 }());

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

@@ -10,6 +10,10 @@
     return;
   }
 
+  function markDirty() {
+    form.dataset.dirty = 'true';
+  }
+
   function pad(value) {
     return String(value).padStart(2, '0');
   }
@@ -95,6 +99,7 @@
     }
     button.addEventListener('click', function () {
       row.remove();
+      markDirty();
     });
   }
 
@@ -106,6 +111,7 @@
     }
     bindRemove(row);
     body.appendChild(fragment);
+    markDirty();
   }
 
   body.querySelectorAll('[data-timetable-entry-row]').forEach(function (row) {

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

@@ -197,6 +197,341 @@
     }).join('');
   }
 
+  function parseLocalDate(value) {
+    var date = new Date(String(value || '').trim());
+
+    if (Number.isNaN(date.getTime())) {
+      return null;
+    }
+
+    return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  }
+
+  function isDayInDateRange(startDatetime, endDatetime, dayIndex) {
+    var startDate = parseLocalDate(startDatetime);
+    var endDate = parseLocalDate(endDatetime);
+    var currentDate;
+
+    if (!startDate || !endDate) {
+      return false;
+    }
+
+    for (currentDate = new Date(startDate.getTime()); currentDate.getTime() <= endDate.getTime(); currentDate.setDate(currentDate.getDate() + 1)) {
+      if (currentDate.getDay() === Number(dayIndex)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  function getTimeParts(value) {
+    var match = String(value || '').trim().match(/^(\d{2}):(\d{2})(?::\d{2})?$/);
+
+    if (!match) {
+      return null;
+    }
+
+    return {
+      hours: Number(match[1]),
+      minutes: Number(match[2])
+    };
+  }
+
+  function combineDateAndTime(baseDate, timeValue) {
+    var timeParts = getTimeParts(timeValue);
+
+    if (!baseDate || !timeParts) {
+      return null;
+    }
+
+    return new Date(
+      baseDate.getFullYear(),
+      baseDate.getMonth(),
+      baseDate.getDate(),
+      timeParts.hours,
+      timeParts.minutes,
+      0,
+      0
+    );
+  }
+
+  function hasScheduleRuleOverlap(startDatetime, endDatetime, startTime, endTime, selectedDays) {
+    var startDateTime = new Date(String(startDatetime || '').trim());
+    var endDateTime = new Date(String(endDatetime || '').trim());
+    var startDate = parseLocalDate(startDatetime);
+    var endDate = parseLocalDate(endDatetime);
+    var allowedDays = Array.isArray(selectedDays) && selectedDays.length ? selectedDays : [0, 1, 2, 3, 4, 5, 6];
+    var currentDate;
+
+    if (!startDate || !endDate || Number.isNaN(startDateTime.getTime()) || Number.isNaN(endDateTime.getTime())) {
+      return false;
+    }
+
+    for (currentDate = new Date(startDate.getTime()); currentDate.getTime() <= endDate.getTime(); currentDate.setDate(currentDate.getDate() + 1)) {
+      if (allowedDays.indexOf(currentDate.getDay()) === -1) {
+        continue;
+      }
+
+      var dayStart = combineDateAndTime(currentDate, startTime);
+      var dayEnd = combineDateAndTime(currentDate, endTime);
+
+      if (!dayStart || !dayEnd) {
+        continue;
+      }
+
+      if (dayEnd >= startDateTime && dayStart <= endDateTime) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  function getDateRangeDayIndices(startDatetime, endDatetime) {
+    var startDate = parseLocalDate(startDatetime);
+    var endDate = parseLocalDate(endDatetime);
+    var dayIndices = [];
+    var currentDate;
+
+    if (!startDate || !endDate) {
+      return dayIndices;
+    }
+
+    for (currentDate = new Date(startDate.getTime()); currentDate.getTime() <= endDate.getTime(); currentDate.setDate(currentDate.getDate() + 1)) {
+      if (dayIndices.indexOf(currentDate.getDay()) === -1) {
+        dayIndices.push(currentDate.getDay());
+      }
+    }
+
+    return dayIndices;
+  }
+
+  function setDayInputError(card, dayInput, message) {
+    var dayInputs = card ? Array.prototype.slice.call(card.querySelectorAll('[data-schedule-rule-day]')) : [];
+    var dayLabels = card ? Array.prototype.slice.call(card.querySelectorAll('.schedule-day-button')) : [];
+    var feedbackNode = card ? card.querySelector('[data-schedule-rule-feedback]') : null;
+    var dayIndex = dayInputs.indexOf(dayInput);
+
+    if (dayInput) {
+      dayInput.setCustomValidity(message);
+      dayInput.classList.add('is-invalid');
+      dayInput.setAttribute('aria-invalid', 'true');
+    }
+
+    if (dayIndex !== -1 && dayLabels[dayIndex]) {
+      dayLabels[dayIndex].classList.add('is-invalid');
+      dayLabels[dayIndex].setAttribute('aria-invalid', 'true');
+    }
+
+    if (feedbackNode) {
+      var messageNode = document.createElement('div');
+      messageNode.textContent = message;
+      feedbackNode.appendChild(messageNode);
+      feedbackNode.hidden = false;
+    }
+  }
+
+  function appendRuleFeedbackMessage(card, message) {
+    var feedbackNode = card ? card.querySelector('[data-schedule-rule-feedback]') : null;
+
+    if (!feedbackNode) {
+      return;
+    }
+
+    var messageNode = document.createElement('div');
+    messageNode.textContent = message;
+    feedbackNode.appendChild(messageNode);
+    feedbackNode.hidden = false;
+  }
+
+  function validateScheduleRuleCard(card) {
+    var fields = getRuleFields(card);
+    var dayInputs = Array.prototype.slice.call(fields.days || []);
+    var dayLabels = getRuleDayLabels(card);
+    var checkedDayInputs = dayInputs.filter(function (input) {
+      return Boolean(input && input.checked);
+    });
+    var checkedDayIndices = checkedDayInputs.map(function (input) {
+      return Number(input && input.value);
+    });
+    var startDatetime = String(fields.startDatetime && fields.startDatetime.value || '').trim();
+    var endDatetime = String(fields.endDatetime && fields.endDatetime.value || '').trim();
+    var startTime = String(fields.startTime && fields.startTime.value || '').trim();
+    var endTime = String(fields.endTime && fields.endTime.value || '').trim();
+    clearRuleValidity(card);
+
+    if ((startDatetime || endDatetime) && (!startDatetime || !endDatetime)) {
+      setRuleError(!startDatetime ? fields.startDatetime : fields.endDatetime, 'Start and end datetimes must both be set for this rule.');
+      return false;
+    }
+
+    if ((startTime || endTime) && (!startTime || !endTime)) {
+      setRuleError(!startTime ? fields.startTime : fields.endTime, 'Start and end times must both be set for this rule.');
+      return false;
+    }
+
+    if (startDatetime && endDatetime && new Date(endDatetime) <= new Date(startDatetime)) {
+      setRuleError(fields.endDatetime, 'End datetime must be after start datetime.');
+      return false;
+    }
+
+    if (startTime && endTime && endTime <= startTime) {
+      setRuleError(fields.endTime, 'End time must be after start time.');
+      if (fields.startTime) {
+        fields.startTime.classList.add('is-invalid');
+        fields.startTime.setAttribute('aria-invalid', 'true');
+      }
+      return false;
+    }
+
+    if (startDatetime && endDatetime) {
+      var dateRangeDayIndices = getDateRangeDayIndices(startDatetime, endDatetime);
+      var dayIndicesToCheck = checkedDayIndices.length ? checkedDayIndices : [0, 1, 2, 3, 4, 5, 6];
+      var invalidDayInputs = checkedDayInputs.filter(function (input) {
+        return dateRangeDayIndices.indexOf(Number(input && input.value)) === -1;
+      });
+
+      invalidDayInputs.forEach(function (input) {
+        var dayIndex = dayInputs.indexOf(input);
+
+        if (dayIndex !== -1 && dayLabels[dayIndex]) {
+          dayLabels[dayIndex].classList.add('is-invalid');
+          dayLabels[dayIndex].setAttribute('aria-invalid', 'true');
+        }
+      });
+
+      if (checkedDayInputs.length && invalidDayInputs.length === checkedDayInputs.length) {
+        setDayInputError(card, invalidDayInputs[0] || checkedDayInputs[0] || dayInputs[0], 'Selected days must overlap the date range.');
+        return false;
+      }
+
+      if (startTime && endTime && !hasScheduleRuleOverlap(startDatetime, endDatetime, startTime, endTime, dayIndicesToCheck)) {
+        setRuleError(fields.endTime, 'Start and end times must overlap the date range.');
+        if (fields.startTime) {
+          fields.startTime.classList.add('is-invalid');
+          fields.startTime.setAttribute('aria-invalid', 'true');
+        }
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  function getScheduleRuleValidationIssue(card) {
+    var fields = getRuleFields(card);
+    var dayInputs = Array.prototype.slice.call(fields.days || []);
+    var checkedDayInputs = dayInputs.filter(function (input) {
+      return Boolean(input && input.checked);
+    });
+    var checkedDayIndices = checkedDayInputs.map(function (input) {
+      return Number(input && input.value);
+    });
+    var startDatetime = String(fields.startDatetime && fields.startDatetime.value || '').trim();
+    var endDatetime = String(fields.endDatetime && fields.endDatetime.value || '').trim();
+    var startTime = String(fields.startTime && fields.startTime.value || '').trim();
+    var endTime = String(fields.endTime && fields.endTime.value || '').trim();
+
+    if (startDatetime || endDatetime) {
+      if (!startDatetime || !endDatetime) {
+        return {
+          type: 'datetime-pair',
+          target: !startDatetime ? fields.startDatetime : fields.endDatetime,
+          message: 'Start and end datetimes must both be set for this rule.'
+        };
+      }
+    }
+
+    if (startTime || endTime) {
+      if (!startTime || !endTime) {
+        return {
+          type: 'time-pair',
+          target: !startTime ? fields.startTime : fields.endTime,
+          message: 'Start and end times must both be set for this rule.'
+        };
+      }
+    }
+
+    if (startDatetime && endDatetime && new Date(endDatetime) <= new Date(startDatetime)) {
+      return {
+        type: 'datetime-order',
+        target: fields.endDatetime,
+        message: 'End datetime must be after start datetime.'
+      };
+    }
+
+    if (startTime && endTime && endTime <= startTime) {
+      return {
+        type: 'time-order',
+        target: fields.endTime,
+        message: 'End time must be after start time.'
+      };
+    }
+
+    if (startDatetime && endDatetime) {
+      var dateRangeDayIndices = getDateRangeDayIndices(startDatetime, endDatetime);
+      var dayIndicesToCheck = checkedDayIndices.length ? checkedDayIndices : [0, 1, 2, 3, 4, 5, 6];
+      var invalidDayInputs = checkedDayInputs.filter(function (input) {
+        return dateRangeDayIndices.indexOf(Number(input && input.value)) === -1;
+      });
+
+      if (checkedDayInputs.length && invalidDayInputs.length === checkedDayInputs.length) {
+        return {
+          type: 'day-overlap',
+          target: checkedDayInputs[0] || dayInputs[0] || fields.endDatetime,
+          message: 'Selected days must overlap the date range.'
+        };
+      }
+
+      if (startTime && endTime && !hasScheduleRuleOverlap(startDatetime, endDatetime, startTime, endTime, dayIndicesToCheck)) {
+        return {
+          type: 'time-overlap',
+          target: fields.endTime,
+          secondaryTarget: fields.startTime,
+          message: 'Start and end times must overlap the date range.'
+        };
+      }
+    }
+
+    return null;
+  }
+
+  function applyScheduleRuleValidationIssue(card, issue) {
+    var fields = getRuleFields(card);
+    var dayLabels = getRuleDayLabels(card);
+
+    clearRuleValidity(card);
+
+    if (!issue) {
+      return true;
+    }
+
+    if (issue.type === 'time-overlap') {
+      setRuleError(issue.target || fields.endTime, issue.message);
+      if (issue.secondaryTarget) {
+        issue.secondaryTarget.classList.add('is-invalid');
+        issue.secondaryTarget.setAttribute('aria-invalid', 'true');
+      }
+      return false;
+    }
+
+    if (issue.type === 'day-overlap') {
+      var dayInputs = Array.prototype.slice.call(fields.days || []);
+      var dayIndex = dayInputs.indexOf(issue.target);
+
+      setRuleError(issue.target, issue.message);
+      if (dayIndex !== -1 && dayLabels[dayIndex]) {
+        dayLabels[dayIndex].classList.add('is-invalid');
+        dayLabels[dayIndex].setAttribute('aria-invalid', 'true');
+      }
+      return false;
+    }
+
+    setRuleError(issue.target, issue.message);
+    return false;
+  }
+
   // Video duration helpers.
   function getVideoDurationButtonLabel(isPressed) {
     return isPressed ? 'Disable use video duration' : 'Use video duration';
@@ -213,7 +548,7 @@
       return '';
     }
 
-    return '<button type="button" class="btn btn-outline-info btn-sm playlist-use-video-duration' + (isPressed ? ' active' : '') + '" data-use-video-duration-button aria-pressed="' + (isPressed ? 'true' : 'false') + '" aria-label="' + getVideoDurationButtonLabel(isPressed) + '" title="' + getVideoDurationButtonLabel(isPressed) + '">' + buildVideoDurationButtonContent(isPressed) + '</button>';
+    return '<button type="button" class="btn ' + (isPressed ? 'btn-info' : 'btn-outline-info') + ' btn-sm playlist-use-video-duration" data-use-video-duration-button aria-pressed="' + (isPressed ? 'true' : 'false') + '" aria-label="' + getVideoDurationButtonLabel(isPressed) + '" title="' + getVideoDurationButtonLabel(isPressed) + '">' + buildVideoDurationButtonContent(isPressed) + '</button>';
   }
 
   function getDisableAudioButtonLabel(isPressed) {
@@ -241,7 +576,6 @@
 
     button.classList.toggle('btn-outline-secondary', Boolean(isPressed));
     button.classList.toggle('btn-secondary', !Boolean(isPressed));
-    button.classList.toggle('active', !Boolean(isPressed));
     button.setAttribute('aria-pressed', isPressed ? 'true' : 'false');
     button.setAttribute('aria-label', getDisableAudioButtonLabel(isPressed));
     button.setAttribute('title', getDisableAudioButtonLabel(isPressed));
@@ -253,7 +587,8 @@
       return;
     }
 
-    button.classList.toggle('active', Boolean(isPressed));
+    button.classList.toggle('btn-outline-info', !Boolean(isPressed));
+    button.classList.toggle('btn-info', Boolean(isPressed));
     button.setAttribute('aria-pressed', isPressed ? 'true' : 'false');
     button.setAttribute('aria-label', getVideoDurationButtonLabel(isPressed));
     button.setAttribute('title', getVideoDurationButtonLabel(isPressed));
@@ -382,7 +717,11 @@
     return '' +
       '<td class="playlist-order-cell" data-label="Order">' +
         '<div class="playlist-order-cell-inner">' +
-          '<button type="button" class="playlist-drag-handle btn btn-link p-0 text-body-secondary" data-playlist-drag-handle aria-label="Drag to reorder" title="Drag to reorder"><span class="playlist-drag-handle-icon" aria-hidden="true"><svg class="playlist-drag-handle-svg" viewBox="0 0 24 32" focusable="false" aria-hidden="true"><polygon points="12,2 20,9 4,9"></polygon><rect x="4" y="14" width="16" height="4" rx="2"></rect><polygon points="4,23 20,23 12,30"></polygon></svg></span></button>' +
+          '<div class="playlist-order-stepper" aria-label="Reorder slide controls">' +
+            '<button type="button" class="playlist-order-move playlist-order-move-up btn btn-link p-0 text-body-secondary" data-playlist-row-move="up" aria-label="Move slide up" title="Move slide up"><i class="bi bi-caret-up-fill" aria-hidden="true" data-playlist-row-move-icon="up"></i></button>' +
+            '<button type="button" class="playlist-drag-handle btn btn-link p-0 text-body-secondary" data-playlist-drag-handle aria-label="Drag to reorder" title="Drag to reorder"><span class="playlist-drag-handle-icon" aria-hidden="true"><i class="bi bi-grip-horizontal"></i></span></button>' +
+            '<button type="button" class="playlist-order-move playlist-order-move-down btn btn-link p-0 text-body-secondary" data-playlist-row-move="down" aria-label="Move slide down" title="Move slide down"><i class="bi bi-caret-down-fill" aria-hidden="true" data-playlist-row-move-icon="down"></i></button>' +
+          '</div>' +
           '<span class="playlist-order-number"></span>' +
         '</div>' +
       '</td>';
@@ -412,8 +751,11 @@
 
   function buildPlaylistDurationCellMarkup(values, durationActionMarkup) {
     return '' +
-      '<td data-label="Config"><div class="playlist-duration-field">' +
+      '<td data-label="Playback"><div class="playlist-duration-field">' +
-        '<input name="duration_seconds[]" type="text" inputmode="decimal" value="' + values.duration_seconds + '" required form="playlist-edit-form" class="form-control form-control-sm playlist-duration-input text-end"' + (values.useVideoDuration ? ' disabled' : '') + ' />' +
+        '<div class="input-group input-group-sm flex-nowrap playlist-duration-input-group">' +
+          '<span class="input-group-text playlist-duration-prefix text-body-secondary" aria-hidden="true"><i class="bi bi-clock"></i></span>' +
+          '<input name="duration_seconds[]" type="text" inputmode="decimal" min="1" value="' + values.duration_seconds + '" required form="playlist-edit-form" class="form-control form-control-sm playlist-duration-input text-end" data-limit-input-value' + (values.useVideoDuration ? ' disabled' : '') + ' />' +
+        '</div>' +
         '<input type="hidden" name="use_video_duration[]" value="' + (values.useVideoDuration ? '1' : '0') + '" form="playlist-edit-form" />' +
         '<input type="hidden" name="disable_audio[]" value="' + (values.disableAudio ? '1' : '0') + '" form="playlist-edit-form" data-playlist-disable-audio-input />' +
         (values.useVideoDuration ? '<input type="hidden" name="duration_seconds[]" value="' + values.duration_seconds + '" form="playlist-edit-form" data-video-duration-mirror />' : '') +
@@ -478,9 +820,18 @@
     });
   }
 
-  function closeScheduleModal() {
+  function closeScheduleModal(options) {
     var dialog = document.getElementById('slide-schedule-dialog');
     var content = document.getElementById('slide-schedule-content');
+    var shouldDiscardDraft = Boolean(options && options.discardDraft);
+    var shouldPreserveChanges = Boolean(options && options.preserveChanges);
+
+    if (shouldDiscardDraft && !shouldPreserveChanges && typeof window.restorePlaylistScheduleDraft === 'function') {
+      window.restorePlaylistScheduleDraft();
+    }
+    if (shouldDiscardDraft && typeof window.clearPlaylistScheduleDraft === 'function') {
+      window.clearPlaylistScheduleDraft();
+    }
 
     if (content) {
       content.innerHTML = '';
@@ -577,8 +928,7 @@
           '<div class="d-flex align-items-center gap-4 ms-auto flex-shrink-0">' +
             '<button type="button" class="btn btn-sm btn-outline-danger" data-remove-schedule-rule data-confirm-message="Remove this rule?">Remove</button>' +
             '<button type="button" class="btn btn-tool p-0 text-body-secondary" data-lte-toggle="card-collapse" aria-label="Collapse rule ' + String(ruleIndex) + '" title="Collapse rule ' + String(ruleIndex) + '">' +
-              '<i class="bi bi-dash-lg" aria-hidden="true" data-lte-icon="collapse"></i>' +
+              '<i class="bi ' + (isCollapsed ? 'bi-plus-lg' : 'bi-dash-lg') + '" aria-hidden="true" data-schedule-rule-collapse-icon></i>' +
-              '<i class="bi bi-plus-lg" aria-hidden="true" data-lte-icon="expand"></i>' +
               '<span class="visually-hidden">Collapse rule ' + String(ruleIndex) + '</span>' +
             '</button>' +
           '</div>' +
@@ -605,11 +955,14 @@
             '</div>' +
             '<div class="col-12">' +
               '<div class="btn-group btn-group-sm w-100 schedule-day-grid" role="group" aria-label="Schedule days">' + DAY_NAMES.map(function (label, dayIndex) {
-                return '<input class="btn-check" type="checkbox" id="schedule-rule-' + String(ruleIndex) + '-day-' + String(dayIndex) + '" value="' + String(dayIndex) + '" autocomplete="off"' + (selectedDays.has(dayIndex) ? ' checked' : '') + ' data-schedule-rule-day />' +
+                return '<span class="schedule-day-option">' +
-                  '<label class="btn btn-outline-primary flex-fill schedule-day-button" for="schedule-rule-' + String(ruleIndex) + '-day-' + String(dayIndex) + '">' + label + '</label>';
+                  '<input class="btn-check" type="checkbox" id="schedule-rule-' + String(ruleIndex) + '-day-' + String(dayIndex) + '" value="' + String(dayIndex) + '" autocomplete="off"' + (selectedDays.has(dayIndex) ? ' checked' : '') + ' data-schedule-rule-day />' +
+                  '<label class="btn btn-outline-primary flex-fill schedule-day-button" for="schedule-rule-' + String(ruleIndex) + '-day-' + String(dayIndex) + '">' + label + '</label>' +
+                '</span>';
               }).join('') + '</div>' +
             '</div>' +
           '</div>' +
+          '<div class="invalid-feedback d-block mt-2" data-schedule-rule-feedback aria-live="polite" hidden></div>' +
         '</div>' +
       '</div>';
   }
@@ -629,6 +982,7 @@
     var isDraftMode = Boolean(form.getAttribute('data-schedule-draft') === 'true');
     var rowKeyInput = form.querySelector('[name="row_key"]');
     var draftStore = window.__playlistScheduleDraftStore = window.__playlistScheduleDraftStore || {};
+    var draftSnapshotStore = window.__playlistScheduleDraftSnapshotStore = window.__playlistScheduleDraftSnapshotStore || {};
     var cancelButton = scope.querySelector('[data-schedule-cancel]');
 
     // Draft state is keyed by the row being edited so cancel/save can restore it later.
@@ -659,6 +1013,41 @@
       };
     }
 
+    function captureScheduleDraftState() {
+      return getRuleCards().map(function (card) {
+        return {
+          rule: readRuleDraftFromCard(card),
+          isCollapsed: Boolean(card && card.classList && card.classList.contains('collapsed-card'))
+        };
+      });
+    }
+
+    function renderScheduleDraftState(ruleStates) {
+      var states = Array.isArray(ruleStates) ? ruleStates : [];
+
+      scheduleRuleList.innerHTML = '';
+      states.forEach(function (ruleState, index) {
+        var card = createRuleCardElement(ruleState && ruleState.rule ? ruleState.rule : {}, index + 1, { isCollapsed: Boolean(ruleState && ruleState.isCollapsed) });
+
+        if (card) {
+          scheduleRuleList.appendChild(card);
+        }
+      });
+      refreshRuleNumbers();
+      syncScheduleRulesField();
+    }
+
+    function restoreScheduleDraft() {
+      var draftKey = getScheduleDraftKey();
+      var snapshot = draftKey && Object.prototype.hasOwnProperty.call(draftSnapshotStore, draftKey) ? draftSnapshotStore[draftKey] : null;
+
+      if (!draftKey || !Array.isArray(snapshot)) {
+        return;
+      }
+
+      renderScheduleDraftState(snapshot);
+    }
+
     function getScheduleDraftRules() {
       var draftKey = getScheduleDraftKey();
       if (!draftKey || !Object.prototype.hasOwnProperty.call(draftStore, draftKey)) {
@@ -687,9 +1076,18 @@
       if (draftKey && Object.prototype.hasOwnProperty.call(draftStore, draftKey)) {
         delete draftStore[draftKey];
       }
+      if (draftKey && Object.prototype.hasOwnProperty.call(draftSnapshotStore, draftKey)) {
+        delete draftSnapshotStore[draftKey];
+      }
     }
 
     window.clearPlaylistScheduleDraft = clearScheduleDraft;
+    window.restorePlaylistScheduleDraft = restoreScheduleDraft;
+
+    var draftKey = getScheduleDraftKey();
+    if (draftKey && !Object.prototype.hasOwnProperty.call(draftSnapshotStore, draftKey)) {
+      draftSnapshotStore[draftKey] = captureScheduleDraftState();
+    }
 
     function getRuleCards() {
       return Array.prototype.slice.call(scheduleRuleList.querySelectorAll('[data-schedule-rule-card]'));
@@ -725,13 +1123,71 @@
       return card ? card.querySelector('[data-remove-schedule-rule]') : null;
     }
 
+    function getRuleDayLabels(card) {
+      return card ? Array.prototype.slice.call(card.querySelectorAll('.schedule-day-button')) : [];
+    }
+
+    function getCollapseRuleButton(card) {
+        return card ? card.querySelector('[data-schedule-rule-collapse], [data-lte-toggle="card-collapse"]') : null;
+    }
+
+    function getCollapseRuleIcon(card) {
+      return card ? card.querySelector('[data-schedule-rule-collapse-icon]') : null;
+    }
+
+    function syncRuleCollapseButtonState(card) {
+      var button = getCollapseRuleButton(card);
+      var icon = getCollapseRuleIcon(card);
+      var numberNode = getRuleNumberNode(card);
+      var ruleIndex = numberNode ? String(numberNode.textContent || '') : '';
+      var isCollapsed = Boolean(card && card.classList && card.classList.contains('collapsed-card'));
+      var label = (isCollapsed ? 'Expand' : 'Collapse') + ' rule ' + ruleIndex;
+
+      if (!button) {
+        return;
+      }
+
+      button.setAttribute('aria-expanded', isCollapsed ? 'false' : 'true');
+      button.setAttribute('aria-label', label);
+      button.setAttribute('title', label);
+
+      if (icon) {
+        icon.classList.remove('bi-dash-lg', 'bi-plus-lg');
+        icon.classList.add(isCollapsed ? 'bi-plus-lg' : 'bi-dash-lg');
+      }
+
+      var visibleLabel = button.querySelector('.visually-hidden');
+      if (visibleLabel) {
+        visibleLabel.textContent = label;
+      }
+    }
+
     function clearRuleValidity(card) {
       var fields = getRuleFields(card);
+      var dayInputs = Array.prototype.slice.call(fields.days || []);
+      var dayLabels = getRuleDayLabels(card);
+      var feedbackNode = card ? card.querySelector('[data-schedule-rule-feedback]') : null;
       [fields.startDatetime, fields.endDatetime, fields.startTime, fields.endTime].forEach(function (input) {
         if (input) {
           input.setCustomValidity('');
+          input.classList.remove('is-invalid');
+          input.removeAttribute('aria-invalid');
         }
       });
+      dayInputs.forEach(function (input) {
+        input.setCustomValidity('');
+        input.classList.remove('is-invalid');
+        input.removeAttribute('aria-invalid');
+      });
+      dayLabels.forEach(function (label) {
+        label.classList.remove('is-invalid');
+        label.removeAttribute('aria-invalid');
+      });
+
+      if (feedbackNode) {
+        feedbackNode.innerHTML = '';
+        feedbackNode.hidden = true;
+      }
     }
 
     function setRuleError(input, message) {
@@ -739,37 +1195,96 @@
         return;
       }
       input.setCustomValidity(message);
+      if (String(input.value || '').trim()) {
+        input.classList.add('is-invalid');
+        input.setAttribute('aria-invalid', 'true');
+      }
+
+      appendRuleFeedbackMessage(input.closest ? input.closest('[data-schedule-rule-card]') : null, message);
     }
 
-    function validateRuleCard(card) {
+    function validateScheduleRuleCard(card) {
       var fields = getRuleFields(card);
+      var dayInputs = Array.prototype.slice.call(fields.days || []);
+      var dayLabels = getRuleDayLabels(card);
+      var checkedDayInputs = dayInputs.filter(function (input) {
+        return Boolean(input && input.checked);
+      });
+      var checkedDayIndices = checkedDayInputs.map(function (input) {
+        return Number(input && input.value);
+      });
       var startDatetime = String(fields.startDatetime && fields.startDatetime.value || '').trim();
       var endDatetime = String(fields.endDatetime && fields.endDatetime.value || '').trim();
       var startTime = String(fields.startTime && fields.startTime.value || '').trim();
       var endTime = String(fields.endTime && fields.endTime.value || '').trim();
-      var hasDateInput = Boolean(startDatetime || endDatetime);
+      var isValid = true;
-      var hasTimeInput = Boolean(startTime || endTime);
 
       clearRuleValidity(card);
 
-      if (hasDateInput && (!startDatetime || !endDatetime)) {
+      if ((startDatetime || endDatetime) && (!startDatetime || !endDatetime)) {
-        setRuleError(fields.startDatetime || fields.endDatetime, 'Start and end datetimes must both be set for this rule.');
+        setRuleError(!startDatetime ? fields.startDatetime : fields.endDatetime, 'Start and end datetimes must both be set for this rule.');
-        return false;
+        isValid = false;
-      }
-      if (hasTimeInput && (!startTime || !endTime)) {
-        setRuleError(fields.startTime || fields.endTime, 'Start and end times must both be set for this rule.');
-        return false;
-      }
-      if (startDatetime && endDatetime && new Date(endDatetime) < new Date(startDatetime)) {
-        setRuleError(fields.endDatetime, 'End datetime must be after start datetime.');
-        return false;
-      }
-      if (startTime && endTime && endTime < startTime) {
-        setRuleError(fields.endTime, 'End time must be after start time.');
-        return false;
       }
 
-      return true;
+      if ((startTime || endTime) && (!startTime || !endTime)) {
+        setRuleError(!startTime ? fields.startTime : fields.endTime, 'Start and end times must both be set for this rule.');
+        isValid = false;
+      }
+
+      if (startDatetime && endDatetime && new Date(endDatetime) <= new Date(startDatetime)) {
+        setRuleError(fields.endDatetime, 'End datetime must be after start datetime.');
+        isValid = false;
+      }
+
+      if (startTime && endTime && endTime <= startTime) {
+        setRuleError(fields.endTime, 'End time must be after start time.');
+        if (fields.startTime) {
+          fields.startTime.classList.add('is-invalid');
+          fields.startTime.setAttribute('aria-invalid', 'true');
+        }
+        isValid = false;
+      }
+
+      if (startDatetime && endDatetime) {
+        var dateRangeDayIndices = getDateRangeDayIndices(startDatetime, endDatetime);
+        var dayIndicesToCheck = checkedDayIndices.length ? checkedDayIndices : [0, 1, 2, 3, 4, 5, 6];
+        var invalidDayInputs = checkedDayInputs.filter(function (input) {
+          return dateRangeDayIndices.indexOf(Number(input && input.value)) === -1;
+        });
+
+        invalidDayInputs.forEach(function (input) {
+          var dayIndex = dayInputs.indexOf(input);
+
+          if (dayIndex !== -1 && dayLabels[dayIndex]) {
+            dayLabels[dayIndex].classList.add('is-invalid');
+            dayLabels[dayIndex].setAttribute('aria-invalid', 'true');
+          }
+        });
+
+        if (checkedDayInputs.length && invalidDayInputs.length === checkedDayInputs.length) {
+          setDayInputError(card, checkedDayInputs[0] || dayInputs[0], 'Selected days must overlap the date range.');
+          isValid = false;
+        }
+
+        if (startTime && endTime && !hasScheduleRuleOverlap(startDatetime, endDatetime, startTime, endTime, dayIndicesToCheck)) {
+          setRuleError(fields.endTime, 'Start and end times must overlap the date range.');
+          if (fields.startTime) {
+            fields.startTime.classList.add('is-invalid');
+            fields.startTime.setAttribute('aria-invalid', 'true');
+          }
+          isValid = false;
+        }
+      }
+
+      return isValid;
+    }
+
+    function updateLiveRuleValidity(card) {
+      validateScheduleRuleCard(card);
+    }
+
+    function validateRuleCard(card) {
+      return validateScheduleRuleCard(card);
     }
 
     function readRuleFromCard(card) {
@@ -924,37 +1439,47 @@
       card.querySelector('[data-schedule-rule-start-time]').value = String(normalizedRule.start_time || '');
       card.querySelector('[data-schedule-rule-end-time]').value = String(normalizedRule.end_time || '');
       card.querySelector('[data-remove-schedule-rule]').setAttribute('data-confirm-message', 'Remove this rule?');
-      card.querySelector('[data-lte-toggle="card-collapse"]').setAttribute('aria-label', 'Collapse rule ' + String(ruleIndex));
-      card.querySelector('[data-lte-toggle="card-collapse"]').setAttribute('title', 'Collapse rule ' + String(ruleIndex));
-      card.querySelector('[data-lte-toggle="card-collapse"] .visually-hidden').textContent = 'Collapse rule ' + String(ruleIndex);
       updateRuleCardDayOptions(card, ruleKey, normalizedRule);
 
-      card.querySelector('[data-lte-toggle="card-collapse"]').addEventListener('click', function (event) {
-        event.preventDefault();
-        card.classList.toggle('collapsed-card');
-        persistScheduleDraft();
-      });
-
       if (isCollapsed) {
         card.classList.add('collapsed-card');
       } else {
         card.classList.remove('collapsed-card');
       }
 
+      try {
+        updateLiveRuleValidity(card);
+      } catch (_error) {
+        clearRuleValidity(card);
+      }
+      syncRuleCollapseButtonState(card);
+
       return card;
     }
 
     function addRule(rule, options) {
       var ruleCount = getRuleCards().length + 1;
       var card = createRuleCardElement(rule || {}, ruleCount, options);
-      scheduleRuleList.appendChild(card);
+
+      if (!card) {
+        scheduleRuleList.insertAdjacentHTML('beforeend', buildScheduleRuleCardMarkup(rule || {}, ruleCount, Boolean(options && options.isCollapsed)));
+        card = scheduleRuleList.lastElementChild;
+      }
+
+      if (!card) {
+        return null;
+      }
+
+      if (card.parentNode !== scheduleRuleList) {
+        scheduleRuleList.appendChild(card);
+      }
       refreshRuleNumbers();
       syncScheduleRulesField();
       return card;
     }
 
     function handleCardChange(card) {
-      clearRuleValidity(card);
+      updateLiveRuleValidity(card);
       updateRuleCardSummary(card);
       syncScheduleRulesField();
     }
@@ -1020,6 +1545,16 @@
 
     scheduleRuleList.addEventListener('click', function (event) {
       var removeButton = event.target && event.target.closest ? event.target.closest('[data-remove-schedule-rule]') : null;
+      var collapseButton = event.target && event.target.closest ? event.target.closest('[data-schedule-rule-collapse], [data-lte-toggle="card-collapse"]') : null;
+
+      if (collapseButton) {
+        window.setTimeout(function () {
+          syncRuleCollapseButtonState(collapseButton.closest('[data-schedule-rule-card]'));
+          persistScheduleDraft();
+        }, 0);
+        return;
+      }
+
       if (!removeButton) {
         return;
       }
@@ -1047,16 +1582,14 @@
 
     var draftRules = getScheduleDraftRules();
     if (draftRules !== null) {
-      scheduleRuleList.innerHTML = '';
+      renderScheduleDraftState(draftRules);
-      draftRules.forEach(function (rule) {
-        addRule(rule && rule.rule ? rule.rule : {}, { isCollapsed: Boolean(rule && rule.isCollapsed) });
-      });
-      syncScheduleRulesField();
     } else if (!getRuleCards().length) {
       syncScheduleRulesField();
     } else {
       refreshRuleNumbers();
       getRuleCards().forEach(function (card) {
+        syncRuleCollapseButtonState(card);
+        updateLiveRuleValidity(card);
         updateRuleCardSummary(card);
       });
       syncScheduleRulesField();
@@ -1587,9 +2120,36 @@
       var rows = getRows();
       rows.forEach(function (row, index) {
         var orderNumber = row.querySelector('.playlist-order-number');
+        var moveUpButton = row.querySelector('[data-playlist-row-move="up"]');
+        var moveDownButton = row.querySelector('[data-playlist-row-move="down"]');
+        var moveUpIcon = row.querySelector('[data-playlist-row-move-icon="up"]');
+        var moveDownIcon = row.querySelector('[data-playlist-row-move-icon="down"]');
+        var isFirst = index === 0;
+        var isLast = index === rows.length - 1;
+
         if (orderNumber) {
           orderNumber.textContent = String(index + 1);
         }
+
+        if (moveUpButton) {
+          moveUpButton.disabled = isFirst;
+          moveUpButton.setAttribute('aria-disabled', isFirst ? 'true' : 'false');
+        }
+
+        if (moveUpIcon) {
+          moveUpIcon.classList.toggle('bi-caret-up-fill', !isFirst);
+          moveUpIcon.classList.toggle('bi-caret-up', isFirst);
+        }
+
+        if (moveDownButton) {
+          moveDownButton.disabled = isLast;
+          moveDownButton.setAttribute('aria-disabled', isLast ? 'true' : 'false');
+        }
+
+        if (moveDownIcon) {
+          moveDownIcon.classList.toggle('bi-caret-down-fill', !isLast);
+          moveDownIcon.classList.toggle('bi-caret-down', isLast);
+        }
       });
       syncAddSlideOptions();
       syncPlaylistCanvasLock();
@@ -1615,6 +2175,38 @@
       });
     }
 
+    function movePlaylistRowByOffset(row, offset) {
+      var currentTbody = document.getElementById('playlist-items-body') || tbody;
+      var rows = getRows();
+      var currentIndex = rows.indexOf(row);
+      var targetIndex;
+      var referenceRow;
+
+      if (!currentTbody || !row || currentIndex === -1) {
+        return false;
+      }
+
+      targetIndex = currentIndex + Number(offset || 0);
+      if (targetIndex < 0 || targetIndex >= rows.length) {
+        return false;
+      }
+
+      referenceRow = rows[targetIndex];
+
+      if (targetIndex > currentIndex) {
+        referenceRow = referenceRow ? referenceRow.nextSibling : null;
+      }
+
+      if (referenceRow) {
+        currentTbody.insertBefore(row, referenceRow);
+      } else {
+        currentTbody.appendChild(row);
+      }
+
+      updateRowOrder(true);
+      return true;
+    }
+
     function populatePlaylistSlideRow(row, values, rowKey) {
       var canvasWidth = Number(values.canvas_width);
       var canvasHeight = Number(values.canvas_height);
@@ -1848,6 +2440,7 @@
         return;
       }
 
+      var moveButton = event.target.closest('[data-playlist-row-move]');
       var removeButton = event.target.closest('[data-playlist-remove-row]');
       var durationButton = event.target.closest('.playlist-use-video-duration');
       var muteButton = event.target.closest('.playlist-disable-audio');
@@ -1857,6 +2450,13 @@
         return;
       }
 
+      if (moveButton) {
+        event.preventDefault();
+        event.stopPropagation();
+        movePlaylistRowByOffset(row, moveButton.getAttribute('data-playlist-row-move') === 'up' ? -1 : 1);
+        return;
+      }
+
       if (removeButton) {
         event.preventDefault();
         row.remove();

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

@@ -1,8 +1,16 @@
 // RBAC permission matrix helpers for checkbox groups.
 
 (function () {
-  function getGroupCheckboxes(group) {
+  function getPermissionSections() {
-    return Array.prototype.slice.call(group.querySelectorAll('input[name="permission_keys[]"]'));
+    return Array.prototype.slice.call(document.querySelectorAll('[data-permission-section]'));
+  }
+
+  function getPermissionRows(container) {
+    return Array.prototype.slice.call(container.querySelectorAll('[data-permission-row]'));
+  }
+
+  function getRowCheckboxes(row) {
+    return Array.prototype.slice.call(row.querySelectorAll('input[name="permission_keys[]"]'));
   }
 
   function getPermissionKey(checkbox) {
@@ -19,8 +27,12 @@
     return String(parts[1] || '').trim().toLowerCase();
   }
 
-  function syncPermissionGroup(group) {
+  function syncPermissionRow(row) {
-    var checkboxes = getGroupCheckboxes(group);
+    if (!row) {
+      return;
+    }
+
+    var checkboxes = getRowCheckboxes(row);
     if (!checkboxes.length) {
       return;
     }
@@ -55,19 +67,57 @@
     }
   }
 
-  function handleGroupChange(event) {
+  function setRowCheckboxes(row, checked) {
+    if (!row) {
+      return;
+    }
+
+    var checkboxes = getRowCheckboxes(row);
+    if (!checkboxes.length) {
+      return;
+    }
+
+    checkboxes.forEach(function (checkbox) {
+      checkbox.checked = Boolean(checked);
+    });
+
+    syncPermissionRow(row);
+  }
+
+  function toggleRowCheckboxes(row) {
+    if (!row) {
+      return;
+    }
+
+    var checkboxes = getRowCheckboxes(row);
+    if (!checkboxes.length) {
+      return;
+    }
+
+    var allChecked = checkboxes.every(function (checkbox) {
+      return Boolean(checkbox.checked);
+    });
+
+    setRowCheckboxes(row, !allChecked);
+  }
+
+  function findPermissionRow(targetId) {
+    return document.querySelector('[data-permission-row-id="' + targetId + '"]');
+  }
+
+  function handleRowChange(event) {
     var checkbox = event.target && event.target.matches ? event.target : null;
     if (!checkbox || checkbox.tagName !== 'INPUT' || checkbox.type !== 'checkbox') {
       return;
     }
 
     var actionKey = getActionKey(checkbox);
-    var group = checkbox.closest('.accordion-item');
+    var row = checkbox.closest('[data-permission-row]');
-    if (!group) {
+    if (!row) {
       return;
     }
 
-    var checkboxes = getGroupCheckboxes(group);
+    var checkboxes = getRowCheckboxes(row);
     var readCheckbox = checkboxes.find(function (candidate) {
       return getActionKey(candidate) === 'read';
     }) || null;
@@ -91,8 +141,28 @@
   }
 
   function initPermissionGroups() {
-    document.querySelectorAll('.accordion-item').forEach(function (group) {
+    getPermissionSections().forEach(function (section) {
-      syncPermissionGroup(group);
+      getPermissionRows(section).forEach(function (row) {
+        syncPermissionRow(row);
+      });
+    });
+
+    document.addEventListener('click', function (event) {
+      var control = event.target && event.target.closest ? event.target.closest('[data-permission-row-toggle]') : null;
+      if (!control) {
+        return;
+      }
+
+      event.preventDefault();
+
+      var targetId = String(control.getAttribute('data-permission-row-target') || '').trim();
+      if (!targetId) {
+        return;
+      }
+
+      if (control.hasAttribute('data-permission-row-toggle')) {
+        toggleRowCheckboxes(findPermissionRow(targetId));
+      }
     });
 
     document.addEventListener('change', function (event) {
@@ -104,8 +174,8 @@
         return;
       }
 
-      handleGroupChange(event);
+      handleRowChange(event);
-      syncPermissionGroup(checkbox.closest('.accordion-item'));
+      syncPermissionRow(checkbox.closest('[data-permission-row]'));
     });
   }
 

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

@@ -58,13 +58,26 @@
     return registry[normalizeType(type)] || null;
   }
 
+  function getRegionTypeLabel(type, definition) {
+    return String(definition && definition.label ? definition.label : type || '')
+      .trim()
+      .toLowerCase();
+  }
+
+  function compareRegionTypeEntries(left, right) {
+    var leftLabel = getRegionTypeLabel(left && left.type, left && left.definition);
+    var rightLabel = getRegionTypeLabel(right && right.type, right && right.definition);
+
+    return leftLabel.localeCompare(rightLabel, undefined, { sensitivity: 'base' }) || String(left && left.type || '').localeCompare(String(right && right.type || ''), undefined, { sensitivity: 'base' });
+  }
+
   function list() {
     return Object.keys(registry).map(function (type) {
       return {
         type: type,
         definition: registry[type] || {}
       };
-    });
+    }).sort(compareRegionTypeEntries);
   }
 
   function getDefaultRegionSize(regionType, lockRatio) {
@@ -91,18 +104,38 @@
       return String(definition.label);
     }
 
-    var normalized = normalizeType(regionType);
+    return 'Text';
-    if (!normalized) {
+  }
-      return 'Region';
-    }
 
-    return normalized
+  function escapeHtml(value) {
-      .split(/[_-]+/)
+    return String(value === undefined || value === null ? '' : value)
-      .filter(function (segment) { return segment; })
+      .replace(/&/g, '&')
-      .map(function (segment) {
+      .replace(/</g, '&lt;')
-        return segment.charAt(0).toUpperCase() + segment.slice(1);
+      .replace(/>/g, '&gt;')
-      })
+      .replace(/"/g, '&quot;')
-      .join(' ') || 'Region';
+      .replace(/'/g, '&#39;');
+  }
+
+  function renderEditorCardShell(options) {
+    var settings = options || {};
+    var region = settings.region || {};
+    var cardClass = String(settings.cardClass || 'card card-outline card-secondary admin-form-card template-field-card mb-3');
+    var cardAttrs = String(settings.cardAttrs || '');
+    var cardStyle = settings.cardStyle ? ' style="' + escapeHtml(settings.cardStyle) + '"' : '';
+    var bodyClass = String(settings.bodyClass || 'card-body p-3 d-grid');
+    var bodyAttrs = String(settings.bodyAttrs || '');
+    var bodyStyle = settings.bodyStyle ? ' style="' + escapeHtml(settings.bodyStyle) + '"' : '';
+    var headerActions = String(settings.headerActions || '');
+    var bodyHtml = String(settings.bodyHtml || '');
+
+    return '' +
+      '<div class="' + cardClass + '" data-region-id="' + escapeHtml(region.id) + '"' + cardAttrs + cardStyle + '>' +
+        '<div class="card-header template-field-head">' +
+          '<strong>' + escapeHtml(region.label) + '</strong>' +
+          '<div class="template-field-actions">' + headerActions + '</div>' +
+        '</div>' +
+        '<div class="' + bodyClass + '"' + bodyAttrs + bodyStyle + '>' + bodyHtml + '</div>' +
+      '</div>';
   }
 
   root.pulseRegionTypes = {
@@ -111,6 +144,7 @@
     list: list,
     getDefaultRegionSize: getDefaultRegionSize,
     getDefaultRegionStyle: getDefaultRegionStyle,
-    getRegionChipLabel: getRegionChipLabel
+    getRegionChipLabel: getRegionChipLabel,
+    renderEditorCardShell: renderEditorCardShell
   };
 }());

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

@@ -178,12 +178,25 @@
         return 'video';
       }
 
+      if (button && button.hasAttribute('data-remove-region-qr-image')) {
+        return 'qr-image';
+      }
+
       if (button && button.hasAttribute('data-remove-region-image')) {
         return 'image';
       }
 
       if (card && card.dataset && String(card.dataset.regionMediaType || '').trim()) {
-        return String(card.dataset.regionMediaType || '').trim() === 'video' ? 'video' : 'image';
+        var regionMediaType = String(card.dataset.regionMediaType || '').trim();
+        if (regionMediaType === 'video') {
+          return 'video';
+        }
+
+        if (regionMediaType === 'qr-image') {
+          return 'qr-image';
+        }
+
+        return 'image';
       }
 
       return 'image';
@@ -194,7 +207,15 @@
         return callbacks.getExistingMediaPrefix(mediaType);
       }
 
-      return String(mediaType || '').trim() === 'video' ? 'existing_region_video_' : 'existing_region_image_';
+      if (String(mediaType || '').trim() === 'video') {
+        return 'existing_region_video_';
+      }
+
+      if (String(mediaType || '').trim() === 'qr-image') {
+        return 'existing_region_qr_image_';
+      }
+
+      return 'existing_region_image_';
     }
 
     function getMediaPrefix(mediaType) {
@@ -202,7 +223,15 @@
         return callbacks.getMediaPrefix(mediaType);
       }
 
-      return String(mediaType || '').trim() === 'video' ? 'region_video_' : 'region_image_';
+      if (String(mediaType || '').trim() === 'video') {
+        return 'region_video_';
+      }
+
+      if (String(mediaType || '').trim() === 'qr-image') {
+        return 'region_qr_image_';
+      }
+
+      return 'region_image_';
     }
 
     function getVideoDurationHiddenInput(regionId) {
@@ -214,18 +243,33 @@
     }
 
     function handleRemove(button) {
-      var regionId = button.getAttribute('data-remove-region-image') || button.getAttribute('data-remove-region-video');
+      var regionId = button.getAttribute('data-remove-region-image') || button.getAttribute('data-remove-region-video') || button.getAttribute('data-remove-region-qr-image');
       var card = getCard(regionId);
       var mediaType = getMediaType(button, card);
-      var hidden = card && card.querySelector('input[type="hidden"][name="' + getExistingPrefix(mediaType) + regionId + '"]');
+      var hiddenName = getExistingPrefix(mediaType) + regionId;
-      var input = card && card.querySelector('input[type="file"][name="' + getMediaPrefix(mediaType) + regionId + '"]');
+      var inputName = getMediaPrefix(mediaType) + regionId;
+      var hidden = card && card.querySelector('input[type="hidden"][name="' + hiddenName + '"]');
+      var input = card && card.querySelector('input[type="file"][name="' + inputName + '"]');
+
+      if (!hidden && regionId) {
+        hidden = templateFields.querySelector('input[type="hidden"][name="' + hiddenName + '"]');
+      }
+
+      if (!input && regionId) {
+        input = templateFields.querySelector('input[type="file"][name="' + inputName + '"]');
+      }
       var uploadPath = input ? String(input.dataset.uploadedPath || '').trim() : '';
+      var hasPendingUpload = input && input.dataset && String(input.dataset.uploadToken || '').trim();
 
       if (input && input.dataset.previewUrl) {
         URL.revokeObjectURL(input.dataset.previewUrl);
         delete input.dataset.previewUrl;
       }
 
+      if (input && hasPendingUpload) {
+        input.dataset.uploadCancelRequested = '1';
+      }
+
       if (input && input.dataset.uploadedNeedsCleanup === '1' && uploadPath && typeof callbacks.queueUploadCleanup === 'function') {
         callbacks.queueUploadCleanup([uploadPath]);
       }
@@ -238,6 +282,7 @@
 
       if (hidden) {
         hidden.value = '';
+          hidden.dispatchEvent(new Event('change', { bubbles: true }));
       }
 
       var durationHidden = getVideoDurationHiddenInput(regionId);
@@ -259,7 +304,7 @@
     }
 
     templateFields.addEventListener('click', function (event) {
-      var button = event.target && event.target.closest ? event.target.closest('[data-remove-region-image], [data-remove-region-video]') : null;
+      var button = event.target && event.target.closest ? event.target.closest('[data-remove-region-image], [data-remove-region-video], [data-remove-region-qr-image]') : null;
 
       if (!button || !templateFields.contains(button)) {
         return;
@@ -273,7 +318,7 @@
         return;
       }
 
-      var button = event.target && event.target.closest ? event.target.closest('[data-remove-region-image], [data-remove-region-video]') : null;
+      var button = event.target && event.target.closest ? event.target.closest('[data-remove-region-image], [data-remove-region-video], [data-remove-region-qr-image]') : null;
 
       if (!button || !templateFields.contains(button)) {
         return;
@@ -304,7 +349,15 @@
         return callbacks.getMediaTypeFromInput(input);
       }
 
-      return input && input.name && input.name.indexOf('region_video_') === 0 ? 'video' : 'image';
+      if (input && input.name && input.name.indexOf('region_video_') === 0) {
+        return 'video';
+      }
+
+      if (input && input.name && input.name.indexOf('region_qr_image_') === 0) {
+        return 'qr-image';
+      }
+
+      return 'image';
     }
 
     function getMediaPrefix(mediaType) {
@@ -312,7 +365,15 @@
         return callbacks.getMediaPrefix(mediaType);
       }
 
-      return String(mediaType || '').trim() === 'video' ? 'region_video_' : 'region_image_';
+      if (String(mediaType || '').trim() === 'video') {
+        return 'region_video_';
+      }
+
+      if (String(mediaType || '').trim() === 'qr-image') {
+        return 'region_qr_image_';
+      }
+
+      return 'region_image_';
     }
 
     function getExistingMediaPrefix(mediaType) {
@@ -320,7 +381,15 @@
         return callbacks.getExistingMediaPrefix(mediaType);
       }
 
-      return String(mediaType || '').trim() === 'video' ? 'existing_region_video_' : 'existing_region_image_';
+      if (String(mediaType || '').trim() === 'video') {
+        return 'existing_region_video_';
+      }
+
+      if (String(mediaType || '').trim() === 'qr-image') {
+        return 'existing_region_qr_image_';
+      }
+
+      return 'existing_region_image_';
     }
 
     function getUploadZone(input) {
@@ -440,7 +509,7 @@
     }
 
     function getPendingUploadCleanupPaths() {
-      return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]')).map(function (input) {
+      return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"], input[type="file"][name^="region_qr_image_"]')).map(function (input) {
         if (!input || String(input.dataset.uploadedNeedsCleanup || '') !== '1') {
           return null;
         }
@@ -450,7 +519,7 @@
     }
 
     function clearPendingUploadCleanupPaths() {
-      Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]')).forEach(function (input) {
+      Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"], input[type="file"][name^="region_qr_image_"]')).forEach(function (input) {
         if (!input) {
           return;
         }
@@ -465,7 +534,7 @@
       }
 
       var mediaType = getMediaTypeFromInput(input);
-      var regionId = input.name.replace(/^region_(?:image|video)_/, '');
+      var regionId = input.name.replace(/^region_(?:image|video|qr_image)_/, '');
       var card = getCard(regionId);
       var hidden = card && card.querySelector('input[type="hidden"][name="' + getExistingMediaPrefix(mediaType) + regionId + '"]');
       var zone = getUploadZone(input);
@@ -475,6 +544,7 @@
       var uploadUrl = String(callbacks.uploadUrl || '/slides/uploads');
       var uploadTimeoutMs = Math.max(1, Number(callbacks.uploadTimeoutMs || 30000));
 
+      delete input.dataset.uploadCancelRequested;
       input.dataset.uploadToken = uploadToken;
       setUploadState(input, true, 0, 'Uploading...', true);
 
@@ -549,8 +619,19 @@
             delete input.dataset.previewUrl;
           }
 
+          if (String(input.dataset.uploadCancelRequested || '') === '1') {
+            if (uploadedPath) {
+              queueUploadCleanup([uploadedPath]);
+            }
+
+            setUploadState(input, false);
+            resolve(payload);
+            return;
+          }
+
           if (hidden) {
             hidden.value = uploadedPath;
+            hidden.dispatchEvent(new Event('change', { bubbles: true }));
           }
           input.dataset.uploadedPath = uploadedPath;
           input.dataset.uploadedNeedsCleanup = '1';
@@ -611,6 +692,7 @@
         xhr.onloadend = function () {
           if (input.dataset.uploadToken === uploadToken) {
             delete input.dataset.uploadToken;
+            delete input.dataset.uploadCancelRequested;
             setUploadState(input, false);
           }
         };
@@ -647,7 +729,7 @@
       templateFields.dataset.regionMediaUploadBound = '1';
 
       templateFields.addEventListener('change', function (event) {
-        var input = event.target && event.target.matches && event.target.matches('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]') ? event.target : null;
+        var input = event.target && event.target.matches && event.target.matches('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"], input[type="file"][name^="region_qr_image_"]') ? event.target : null;
 
         if (!input || !templateFields.contains(input)) {
           return;

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

@@ -191,6 +191,7 @@
     var region = context.region;
     var current = context.current || {};
     var config = context.config || {};
+    var placeholderFields = Array.isArray(context.placeholderFields) ? context.placeholderFields : [];
     var placeholderChips = String(context.placeholderChips || '');
     var sourceOptions = String(context.sourceOptions || '');
     var itemsPathValue = context.itemsPath !== undefined
@@ -231,10 +232,9 @@
           '</div>' +
           '<input type="hidden" name="region_font_size_' + region.id + '" value="' + escapeHtml(context.fontSize || '') + '" />' +
           '<input type="hidden" name="region_text_' + region.id + '" value="' + escapeHtml(current.value !== undefined ? current.value : '') + '" />' +
-          '<div class="muted slide-image-file">Use transforms like {{name.upper()}}, {{name.title()}}, or {{name.lower()}} on leaf fields.</div>' +
           '<div class="api-region-placeholder-section">' +
             '<div class="api-region-placeholder-title">Available placeholders</div>' +
-            '<div class="d-flex flex-wrap gap-2" data-placeholder-chips>' + (placeholderChips || '<span class="muted slide-image-file">No JSON fields available.</span>') + '</div>' +
+            '<div class="d-flex flex-wrap gap-2" data-placeholder-chips>' + ((placeholderFields.length && window.placeholderChips && typeof window.placeholderChips.renderChips === 'function') ? window.placeholderChips.renderChips(placeholderFields) : placeholderChips || '<span class="muted slide-image-file">No JSON fields available.</span>') + '</div>' +
           '</div>' +
           '<details class="api-region-sample-accordion" data-api-sample-data-accordion>' +
             '<summary>Data</summary>' +

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

@@ -20,19 +20,13 @@
   function renderEditorCard(context) {
     var region = context.region;
     var current = String(context.current || '');
-    return '' +
+    return registry.renderEditorCardShell({
-      '<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '">' +
+      region: region,
-        '<div class="card-header template-field-head">' +
+      headerActions: '<span class="chip">HTML</span>',
-          '<strong>' + escapeHtml(region.label) + '</strong>' +
+      bodyHtml: '' +
-          '<span class="chip">HTML</span>' +
+        '<textarea name="region_html_' + region.id + '" class="form-control" rows="10" placeholder="<div>Hello</div>">' + escapeHtml(current) + '</textarea>' +
-        '</div>' +
+        '<div class="muted slide-image-file">HTML is rendered in a sandboxed iframe preview.</div>'
-        '<div class="card-body p-3 d-grid">' +
+    });
-          '<label style="display:block;">HTML content' +
-            '<textarea name="region_html_' + region.id + '" class="form-control" rows="10" placeholder="<div>Hello</div>">' + escapeHtml(current) + '</textarea>' +
-          '</label>' +
-          '<div class="muted slide-image-file">HTML is rendered in a sandboxed iframe preview.</div>' +
-        '</div>' +
-      '</div>';
   }
 
   registry.register('html', {

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

@@ -34,47 +34,44 @@
     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 uploadHelpText = String(uploadConfig.helpText || 'PNG, JPG, GIF, or WebP');
-    return '' +
+    return registry.renderEditorCardShell({
-      '<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '" data-region-media-type="image">' +
+      region: region,
-        '<div class="card-header template-field-head">' +
+      headerActions: '<span class="chip">Image</span>',
-          '<strong>' + escapeHtml(region.label) + '</strong>' +
+      cardAttrs: ' data-region-media-type="image"',
-          '<span class="chip">Image</span>' +
+      bodyHtml: '' +
-        '</div>' +
+        '<div class="row g-3 align-items-start">' +
-        '<div class="card-body p-3 d-grid">' +
+          '<div class="col-12 col-md-8 d-flex flex-column">' +
-          '<div class="row g-3 align-items-start">' +
+            '<label class="slide-image-region-upload-zone" data-region-upload-zone="' + region.id + '" for="region_image_' + region.id + '">' +
-            '<div class="col-12 col-md-8 d-flex flex-column">' +
+              '<input type="file" id="region_image_' + region.id + '" name="region_image_' + region.id + '" class="visually-hidden" accept="' + escapeHtml(uploadAccept) + '" data-slide-image-cropper-region-ratio="' + escapeHtml(regionRatio) + '" data-slide-image-cropper-region-ratio-label="Region" />' +
-              '<label class="slide-image-region-upload-zone" data-region-upload-zone="' + region.id + '" for="region_image_' + region.id + '">' +
+              '<span class="slide-image-region-upload-zone-content">' +
-                '<input type="file" id="region_image_' + region.id + '" name="region_image_' + region.id + '" class="visually-hidden" accept="' + escapeHtml(uploadAccept) + '" data-slide-image-cropper-region-ratio="' + escapeHtml(regionRatio) + '" data-slide-image-cropper-region-ratio-label="Region" />' +
+                '<span class="slide-image-region-upload-zone-icon"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i></span>' +
-                '<span class="slide-image-region-upload-zone-content">' +
+                '<span class="slide-image-region-upload-zone-copy">' +
-                  '<span class="slide-image-region-upload-zone-icon"><i class="bi bi-cloud-arrow-up" aria-hidden="true"></i></span>' +
+                  '<strong>Drop an image here or click to upload</strong>' +
-                  '<span class="slide-image-region-upload-zone-copy">' +
+                  '<span>' + escapeHtml(uploadHelpText) + '</span>' +
-                    '<strong>Drop an image here or click to upload</strong>' +
+                  '<span class="slide-image-region-upload-zone-limit">Max ' + escapeHtml(uploadMaxLabel) + ' per file</span>' +
-                    '<span>' + escapeHtml(uploadHelpText) + '</span>' +
-                    '<span class="slide-image-region-upload-zone-limit">Max ' + escapeHtml(uploadMaxLabel) + ' per file</span>' +
-                  '</span>' +
                 '</span>' +
-                '<span class="slide-image-region-upload-zone-progress" data-region-upload-progress hidden>' +
+              '</span>' +
-                  '<span class="slide-image-region-upload-zone-progress-label" data-region-upload-progress-text>Uploading...</span>' +
+              '<span class="slide-image-region-upload-zone-progress" data-region-upload-progress hidden>' +
-                  '<div class="progress slide-image-region-upload-zone-progress-bar" role="progressbar" aria-label="Image upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
+                '<span class="slide-image-region-upload-zone-progress-label" data-region-upload-progress-text>Uploading...</span>' +
-                    '<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" data-region-upload-progress-bar style="width:0%">0%</div>' +
+                '<div class="progress slide-image-region-upload-zone-progress-bar" role="progressbar" aria-label="Image upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
-                  '</div>' +
+                  '<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" data-region-upload-progress-bar style="width:0%">0%</div>' +
-                '</span>' +
+                '</div>' +
-              '</label>' +
+              '</span>' +
-            '</div>' +
+            '</label>' +
-            '<div class="col-12 col-md-4">' +
+          '</div>' +
-              '<div class="slide-image-region-preview-box">' +
+          '<div class="col-12 col-md-4">' +
-                (current
+            '<div class="slide-image-region-preview-box">' +
-                  ? '<div class="slide-image-region-preview-shell" data-remove-region-image="' + region.id + '" role="button" tabindex="0" aria-label="Remove image">' +
+              (current
-                      '<img class="slide-image-region-preview" src="' + escapeHtml(current) + '" alt="Current image preview" />' +
+                ? '<div class="slide-image-region-preview-shell" data-remove-region-image="' + region.id + '" role="button" tabindex="0" aria-label="Remove image">' +
-                      '<span class="slide-image-region-preview-remove" aria-hidden="true"><i class="bi bi-trash3" aria-hidden="true"></i></span>' +
+                    '<img class="slide-image-region-preview" src="' + escapeHtml(current) + '" alt="Current image preview" />' +
-                    '</div>'
+                    '<span class="slide-image-region-preview-remove" aria-hidden="true"><i class="bi bi-trash3" aria-hidden="true"></i></span>' +
-                  : '<div class="slide-image-region-preview slide-image-region-preview-empty">No image</div>') +
+                  '</div>'
-              '</div>' +
+                : '<div class="slide-image-region-preview slide-image-region-preview-empty">No image</div>') +
             '</div>' +
           '</div>' +
-          '<input type="hidden" name="existing_region_image_' + region.id + '" value="' + escapeHtml(current) + '" />' +
         '</div>' +
-      '</div>';
+        '<input type="hidden" name="existing_region_image_' + region.id + '" value="' + escapeHtml(current) + '" />'
+    });
   }
 
   function buildEditorCardContext(context) {

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

@@ -55,6 +55,11 @@
     }) || null;
   }
 
+  function getFeedItemCount(feedId, feeds) {
+    var feed = getFeedById(feedId, feeds);
+    return feed && Array.isArray(feed.items) ? feed.items.length : 0;
+  }
+
   function getFieldList(feedId, feeds) {
     var feed = getFeedById(feedId, feeds);
     var sampleItem = feed && Array.isArray(feed.items) ? feed.items[0] : null;
@@ -128,7 +133,8 @@
     var feed = getFeedById(feedId, feeds);
     var items = feed && Array.isArray(feed.items) ? feed.items : [];
     var parsedItemNumber = Math.max(1, Number(itemNumber || 1));
-    var index = Number.isFinite(parsedItemNumber) && parsedItemNumber > 0 ? parsedItemNumber - 1 : 0;
+    var itemCount = Math.max(1, items.length || 1);
+    var index = Number.isFinite(parsedItemNumber) && parsedItemNumber > 0 ? Math.min(itemCount, parsedItemNumber) - 1 : 0;
     return items[index] || null;
   }
 
@@ -208,6 +214,7 @@
     var region = context.region;
     var current = context.current || {};
     var config = context.config || {};
+    var itemNumberLimit = Math.max(1, Number(context.itemNumberLimit || 1));
     var placeholderChips = String(context.placeholderChips || '');
     var feedOptions = String(context.feedOptions || '');
     return '' +
@@ -218,7 +225,7 @@
             '<span class="chip">RSS</span>' +
           '</div>' +
         '</div>' +
-        '<div class="card-body p-3 d-grid">' +
+        '<div class="card-body p-3 d-grid gap-3 pb-0">' +
           '<div class="editor-holder" data-region-id="' + region.id + '">' +
             '<textarea class="editor-source" rows="10">' + escapeHtml(current.value !== undefined ? current.value : '') + '</textarea>' +
           '</div>' +
@@ -232,13 +239,16 @@
             '</div>' +
             '<div class="col-6 col-md-4">' +
               '<label class="form-label" for="region_rss_item_number_' + region.id + '">Entry number</label>' +
-              '<input id="region_rss_item_number_' + region.id + '" type="number" min="1" step="1" name="region_rss_item_number_' + region.id + '" class="form-control" value="' + escapeHtml(config.item_number) + '" />' +
+              '<input id="region_rss_item_number_' + region.id + '" type="number" min="1" max="' + escapeHtml(itemNumberLimit) + '" step="1" name="region_rss_item_number_' + region.id + '" class="form-control" value="' + escapeHtml(config.item_number) + '" />' +
             '</div>' +
           '</div>' +
           '<input type="hidden" name="region_font_size_' + region.id + '" value="' + escapeHtml(context.fontSize || '') + '" />' +
           '<input type="hidden" name="region_text_' + region.id + '" value="' + escapeHtml(current.value !== undefined ? current.value : '') + '" />' +
-          '<div class="muted slide-image-file">Use placeholders like {{title.upper()}}, {{title.title()}}, or {{title.lower()}}. Available placeholders:</div>' +
+          '<div class="api-region-placeholder-section">' +
-          '<div class="d-flex flex-wrap gap-2" data-placeholder-chips>' + (placeholderChips || '<span class="muted slide-image-file">No RSS fields available.</span>') + '</div>' +
+            '<div class="api-region-placeholder-title">Available placeholders</div>' +
+            '<div class="d-flex flex-wrap gap-2" data-placeholder-chips>' + (placeholderChips || '<span class="muted slide-image-file">No RSS fields available.</span>') + '</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>{{publishedAt.format("MMM D, YYYY")}}</code>.</div>' +
+          '</div>' +
         '</div>' +
       '</div>';
   }
@@ -247,6 +257,7 @@
     var region = context.region;
     var current = context.current || {};
     var config = context.config || {};
+    var itemNumberLimit = Math.max(1, Number(getFeedItemCount(config.feed_id, feeds) || 1));
     var placeholderChips = String(context.placeholderChips || '');
     var feedOptions = String(context.feedOptions || '');
 
@@ -254,6 +265,7 @@
       region: region,
       current: current,
       config: config,
+      itemNumberLimit: itemNumberLimit,
       fontSize: context.fontSize || '',
       placeholderChips: placeholderChips,
       feedOptions: feedOptions,

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

@@ -21,24 +21,12 @@
   function renderEditorCard(context) {
     var region = context.region;
     var current = String(context.current || '');
-    var disableAudio = context.disableAudio === undefined ? true : Boolean(context.disableAudio);
+    return registry.renderEditorCardShell({
-    return '' +
+      region: region,
-      '<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '">' +
+      headerActions: '<span class="chip">RTMP</span>',
-        '<div class="card-header template-field-head">' +
+      bodyHtml: '' +
-          '<strong>' + escapeHtml(region.label) + '</strong>' +
+        '<input type="url" name="region_rtmp_' + region.id + '" class="form-control" value="' + escapeHtml(current) + '" placeholder="rtmp://example.com/live/stream" />'
-          '<span class="chip">RTMP</span>' +
+    });
-        '</div>' +
-        '<div class="card-body p-3 d-grid">' +
-          '<label style="display:block;">RTMP URL' +
-            '<input type="url" name="region_rtmp_' + region.id + '" class="form-control" value="' + escapeHtml(current) + '" placeholder="rtmp://example.com/live/stream" />' +
-          '</label>' +
-          '<label class="form-check m-0">' +
-            '<input class="form-check-input" type="checkbox" name="region_disable_audio_' + region.id + '" value="1"' + (disableAudio ? ' checked' : '') + ' />' +
-            '<span class="form-check-label">Disable audio</span>' +
-          '</label>' +
-          '<div class="muted slide-image-file">Player controls stay hidden and the stream is not interactive.</div>' +
-        '</div>' +
-      '</div>';
   }
 
   registry.register('rtmp', {

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

@@ -219,7 +219,7 @@
           '<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-2">Format start and end values with expressions like <code>{{start.format("MMM D, YYYY h:mm A")}}</code> and <code>{{end.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> or <code>{{start.format("MMM D, YYYY h:mm A")}}</code>.</div>' +
           '</div>' +
           '</div>' +
         '</div>' +

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

@@ -38,7 +38,7 @@
     var fontSize = style && style.font_size ? 'font-size:' + Math.max(1, Math.round(Number(style.font_size))) + 'px;' : '';
     var width = Math.max(1, Math.round(Number(region && region.width ? region.width : 0) || 1));
     var height = Math.max(1, Math.round(Number(region && region.height ? region.height : 0) || 1));
-    var wrapperStyle = 'width:' + width + 'px;height:' + height + 'px;overflow:hidden;' + fontFamily + fontSize + color;
+    var wrapperStyle = 'width:' + width + 'px;height:' + height + 'px;overflow:hidden;line-height:1.5;' + fontFamily + fontSize + color;
     return '<div class="slide-preview-text-content" style="' + wrapperStyle + '">' + sanitizePreviewHtml(raw) + '</div>';
   }
 

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

@@ -39,48 +39,45 @@
     var uploadVideoMaxLabel = String(uploadConfig.limitLabel || context.uploadVideoMaxLabel || '1 GB');
     var uploadAccept = Array.isArray(uploadConfig.accept) ? uploadConfig.accept.join(', ') : String(uploadConfig.accept || 'video/mp4, video/webm, video/ogg');
     var uploadHelpText = String(uploadConfig.helpText || 'MP4, WebM, or Ogg');
-    return '' +
+    return registry.renderEditorCardShell({
-      '<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '" data-region-media-type="video">' +
+      region: region,
-        '<div class="card-header template-field-head">' +
+      headerActions: '<span class="chip">Video</span>',
-          '<strong>' + escapeHtml(region.label) + '</strong>' +
+      cardAttrs: ' data-region-media-type="video"',
-          '<span class="chip">Video</span>' +
+      bodyHtml: '' +
-        '</div>' +
+        '<div class="row g-3 align-items-start">' +
-        '<div class="card-body p-3 d-grid">' +
+          '<div class="col-12 col-md-8 d-flex flex-column">' +
-          '<div class="row g-3 align-items-start">' +
+            '<label class="slide-image-region-upload-zone" data-region-upload-zone="' + region.id + '" for="region_video_' + region.id + '">' +
-            '<div class="col-12 col-md-8 d-flex flex-column">' +
+              '<input type="file" id="region_video_' + region.id + '" name="region_video_' + region.id + '" class="visually-hidden" accept="' + escapeHtml(uploadAccept) + '" />' +
-              '<label class="slide-image-region-upload-zone" data-region-upload-zone="' + region.id + '" for="region_video_' + region.id + '">' +
+              '<span class="slide-image-region-upload-zone-content">' +
-                '<input type="file" id="region_video_' + region.id + '" name="region_video_' + region.id + '" class="visually-hidden" accept="' + escapeHtml(uploadAccept) + '" />' +
+                '<span class="slide-image-region-upload-zone-icon"><i class="bi bi-camera-video" aria-hidden="true"></i></span>' +
-                '<span class="slide-image-region-upload-zone-content">' +
+                '<span class="slide-image-region-upload-zone-copy">' +
-                  '<span class="slide-image-region-upload-zone-icon"><i class="bi bi-camera-video" aria-hidden="true"></i></span>' +
+                  '<strong>Drop a video here or click to upload</strong>' +
-                  '<span class="slide-image-region-upload-zone-copy">' +
+                  '<span>' + escapeHtml(uploadHelpText) + '</span>' +
-                    '<strong>Drop a video here or click to upload</strong>' +
+                  '<span class="slide-image-region-upload-zone-limit">Max ' + escapeHtml(uploadVideoMaxLabel) + ' per file</span>' +
-                    '<span>' + escapeHtml(uploadHelpText) + '</span>' +
-                    '<span class="slide-image-region-upload-zone-limit">Max ' + escapeHtml(uploadVideoMaxLabel) + ' per file</span>' +
-                  '</span>' +
                 '</span>' +
-                '<span class="slide-image-region-upload-zone-progress" data-region-upload-progress hidden>' +
+              '</span>' +
-                  '<span class="slide-image-region-upload-zone-progress-label" data-region-upload-progress-text>Uploading...</span>' +
+              '<span class="slide-image-region-upload-zone-progress" data-region-upload-progress hidden>' +
-                  '<div class="progress slide-image-region-upload-zone-progress-bar" role="progressbar" aria-label="Video upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
+                '<span class="slide-image-region-upload-zone-progress-label" data-region-upload-progress-text>Uploading...</span>' +
-                    '<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" data-region-upload-progress-bar style="width:0%">0%</div>' +
+                '<div class="progress slide-image-region-upload-zone-progress-bar" role="progressbar" aria-label="Video upload progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">' +
-                  '</div>' +
+                  '<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" data-region-upload-progress-bar style="width:0%">0%</div>' +
-                '</span>' +
+                '</div>' +
-              '</label>' +
+              '</span>' +
-            '</div>' +
+            '</label>' +
-            '<div class="col-12 col-md-4">' +
+          '</div>' +
-              '<div class="slide-image-region-preview-box">' +
+          '<div class="col-12 col-md-4">' +
-                (current
+            '<div class="slide-image-region-preview-box">' +
-                  ? '<div class="slide-image-region-preview-shell" data-remove-region-video="' + region.id + '" role="button" tabindex="0" aria-label="Remove video">' +
+              (current
-                      '<video class="slide-image-region-preview" src="' + escapeHtml(current) + '" muted playsinline preload="metadata"></video>' +
+                ? '<div class="slide-image-region-preview-shell" data-remove-region-video="' + region.id + '" role="button" tabindex="0" aria-label="Remove video">' +
-                      '<span class="slide-image-region-preview-remove" aria-hidden="true"><i class="bi bi-trash3" aria-hidden="true"></i></span>' +
+                    '<video class="slide-image-region-preview" src="' + escapeHtml(current) + '" muted playsinline preload="metadata"></video>' +
-                    '</div>'
+                    '<span class="slide-image-region-preview-remove" aria-hidden="true"><i class="bi bi-trash3" aria-hidden="true"></i></span>' +
-                  : '<div class="slide-image-region-preview slide-image-region-preview-empty">No video</div>') +
+                  '</div>'
-              '</div>' +
+                : '<div class="slide-image-region-preview slide-image-region-preview-empty">No video</div>') +
             '</div>' +
           '</div>' +
-          '<input type="hidden" name="existing_region_video_' + region.id + '" value="' + escapeHtml(current) + '" />' +
-          '<input type="hidden" name="existing_region_video_duration_' + region.id + '" value="' + escapeHtml(currentDuration) + '" />' +
         '</div>' +
-      '</div>';
+        '<input type="hidden" name="existing_region_video_' + region.id + '" value="' + escapeHtml(current) + '" />' +
+        '<input type="hidden" name="existing_region_video_duration_' + region.id + '" value="' + escapeHtml(currentDuration) + '" />'
+    });
   }
 
   function buildEditorCardContext(context) {

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

@@ -20,19 +20,12 @@
   function renderEditorCard(context) {
     var region = context.region;
     var current = String(context.current || '');
-    return '' +
+    return registry.renderEditorCardShell({
-      '<div class="card card-outline card-secondary admin-form-card template-field-card mb-3" data-region-id="' + region.id + '">' +
+      region: region,
-        '<div class="card-header template-field-head">' +
+      headerActions: '<span class="chip">Webpage</span>',
-          '<strong>' + escapeHtml(region.label) + '</strong>' +
+      bodyHtml: '' +
-          '<span class="chip">Webpage</span>' +
+        '<input type="url" name="region_webpage_' + region.id + '" class="form-control" value="' + escapeHtml(current) + '" placeholder="https://example.com" />'
-        '</div>' +
+    });
-        '<div class="card-body p-3 d-grid">' +
-          '<label style="display:block;">Webpage URL' +
-            '<input type="url" name="region_webpage_' + region.id + '" class="form-control" value="' + escapeHtml(current) + '" placeholder="https://example.com" />' +
-          '</label>' +
-          '<div class="muted slide-image-file">The webpage will be loaded in an iframe.</div>' +
-        '</div>' +
-      '</div>';
   }
 
   registry.register('webpage', {

src/web/public/js/shared/qr-code-svg.js

@@ -0,0 +1,54 @@
+// Shared QR SVG helpers for browser renderers.
+
+(function () {
+  function normalizeSvgMarkup(svg) {
+    var markup = String(svg || '').trim();
+    if (!markup) {
+      return '';
+    }
+
+    return markup.replace(/^<\?xml[^>]*>\s*/i, '');
+  }
+
+  function stripBackground(svg) {
+    var markup = String(svg || '').trim();
+    if (!markup) {
+      return '';
+    }
+
+    return markup
+      .replace(/<path\b[^>]*fill="#ffffff"[^>]*d="M0 0h[^\"]*"[^>]*\s*\/>/i, '')
+      .replace(/<path\b[^>]*fill="#ffffff"[^>]*d="M0 0h[^\"]*"[^>]*><\/path>/i, '')
+      .replace(/<rect\b[^>]*fill="#ffffff"[^>]*x="0"[^>]*y="0"[^>]*width="\d+"[^>]*height="\d+"[^>]*\s*\/?>(?:<\/rect>)?/i, '');
+  }
+
+  function normalizePreviewSvg(svg) {
+    var markup = normalizeSvgMarkup(stripBackground(svg));
+    if (!markup || markup.charAt(0) !== '<') {
+      return markup;
+    }
+
+    return markup.replace(/^<svg\b([^>]*)>/i, function (_match, attrText) {
+      var attrs = String(attrText || '');
+      if (!/\bwidth\s*=\s*/i.test(attrs)) {
+        attrs += ' width="95%"';
+      }
+      if (!/\bheight\s*=\s*/i.test(attrs)) {
+        attrs += ' height="95%"';
+      }
+      if (!/\bpreserveAspectRatio\s*=\s*/i.test(attrs)) {
+        attrs += ' preserveAspectRatio="xMidYMid meet"';
+      }
+      if (!/\bstyle\s*=\s*/i.test(attrs)) {
+        attrs += ' style="display:block;width:95%;height:95%;"';
+      }
+      return '<svg' + attrs + '>';
+    });
+  }
+
+  window.pulseQrSvgUtils = {
+    normalizeSvgMarkup: normalizeSvgMarkup,
+    stripBackground: stripBackground,
+    normalizePreviewSvg: normalizePreviewSvg
+  };
+}());

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

@@ -68,6 +68,65 @@ export function createSlideFormEditorController(options) {
     return card ? card.querySelector('input[name="region_font_size_' + regionId + '"]') : null;
   }
 
+  function getTinymce() {
+    return window.tinymce || null;
+  }
+
+  function getThemeName() {
+    var theme = String(document.documentElement && document.documentElement.dataset && document.documentElement.dataset.bsTheme || 'light').trim().toLowerCase();
+    if (theme === 'auto') {
+      return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    return theme === 'dark' ? 'dark' : 'light';
+  }
+
+  function getTinyMceThemeAssets() {
+    var themeName = getThemeName();
+    var skinName = themeName === 'dark' ? 'oxide-dark' : 'oxide';
+    var skinBase = '/assets/vendor/tinymce/skins/ui/' + skinName;
+    return {
+      themeName: themeName,
+      skinName: skinName,
+      skinUrl: skinBase,
+      contentCss: skinBase + '/content.css',
+      bodyClass: themeName === 'dark' ? 'tinymce-theme-dark' : 'tinymce-theme-light'
+    };
+  }
+
+  function syncEditorState(regionId, editor, shouldLock, hydrated) {
+    if (editor && typeof editor.save === 'function') {
+      editor.save();
+    }
+
+    var content = editor.getContent({ format: 'html' });
+    content = isEmptyRichTextValue(content) ? '' : content;
+    var hidden = getEditorHiddenInput(regionId);
+    var sourceElm = editor && editor.targetElm ? editor.targetElm : null;
+
+    if (hidden) {
+      hidden.value = content;
+    }
+    if (sourceElm) {
+      sourceElm.value = content;
+    }
+    if (typeof editor.nodeChanged === 'function') {
+      editor.nodeChanged();
+    }
+    if (typeof editor.setDirty === 'function') {
+      editor.setDirty(true);
+    }
+    if (shouldLock && templateSelectorLock && typeof templateSelectorLock.arm === 'function') {
+      templateSelectorLock.arm();
+    }
+    if (shouldLock && templateSelectorLock && typeof templateSelectorLock.markEdited === 'function') {
+      templateSelectorLock.markEdited();
+    }
+    if (hydrated) {
+      requestPreviewRender();
+    }
+  }
+
   function getEditorRegionType(card) {
     if (!card) {
       return '';
@@ -99,31 +158,6 @@ export function createSlideFormEditorController(options) {
     fontSizeHidden.value = normalizeFontSizeValue(fontSizeHidden.value) || String(defaultFontSize);
   }
 
-  function getTinymce() {
-    return window.tinymce || null;
-  }
-
-  function getThemeName() {
-    var theme = String(document.documentElement && document.documentElement.dataset && document.documentElement.dataset.bsTheme || 'light').trim().toLowerCase();
-    if (theme === 'auto') {
-      return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-    }
-    return theme === 'dark' ? 'dark' : 'light';
-  }
-
-  function getTinyMceThemeAssets() {
-    var themeName = getThemeName();
-    var skinName = themeName === 'dark' ? 'oxide-dark' : 'oxide';
-    var skinBase = '/assets/vendor/tinymce/skins/ui/' + skinName;
-    return {
-      themeName: themeName,
-      skinName: skinName,
-      skinUrl: skinBase,
-      contentCss: skinBase + '/content.css',
-      bodyClass: themeName === 'dark' ? 'tinymce-theme-dark' : 'tinymce-theme-light'
-    };
-  }
-
   function getEditorBackgroundColorValue() {
     var value = String(getEditorBackgroundColor() || '').trim();
     return value || '#111111';
@@ -161,28 +195,19 @@ export function createSlideFormEditorController(options) {
   function attachEditorEvents(regionId, editor) {
     var hidden = getEditorHiddenInput(regionId);
     var source = editor && editor.targetElm ? editor.targetElm : null;
+    var hydrated = false;
 
-    function syncState() {
+    function syncState(shouldLock) {
       var currentEditor = editorInstances.get(regionId);
       if (currentEditor !== editor) {
         return;
       }
 
-      if (typeof editor.save === 'function') {
+      syncEditorState(regionId, editor, shouldLock, hydrated);
-        editor.save();
+      if (!hydrated) {
+        requestPreviewRender();
+        return;
       }
-      var content = editor.getContent({ format: 'html' });
-      content = isEmptyRichTextValue(content) ? '' : content;
-      if (hidden) {
-        hidden.value = content;
-      }
-      if (source) {
-        source.value = content;
-      }
-      if (templateSelectorLock && typeof templateSelectorLock.markEdited === 'function') {
-        templateSelectorLock.markEdited();
-      }
-      requestPreviewRender();
     }
 
     editor.on('init', function () {
@@ -195,11 +220,14 @@ export function createSlideFormEditorController(options) {
         source.value = content;
       }
       syncEditorFontSizeHidden(regionId);
-      syncState();
+      hydrated = true;
+      requestPreviewRender();
     });
 
-    ['change', 'keyup', 'undo', 'redo', 'SetContent', 'Paste', 'input', 'NodeChange'].forEach(function (eventName) {
+    ['change', 'keyup', 'undo', 'redo', 'Paste', 'input'].forEach(function (eventName) {
-      editor.on(eventName, syncState);
+      editor.on(eventName, function () {
+        syncState(true);
+      });
     });
   }
 
@@ -226,15 +254,43 @@ export function createSlideFormEditorController(options) {
       source.id = 'slide-editor-region-' + regionId;
     }
 
+    function registerInlineFormat(editor, formatName, styles) {
+      editor.formatter.register(formatName, {
+        inline: 'span',
+        styles: styles
+      });
+    }
+
+    function applyInlineFormat(regionId, editor, formatName) {
+      if (editor && editor.undoManager && typeof editor.undoManager.transact === 'function') {
+        editor.undoManager.transact(function () {
+          editor.formatter.apply(formatName);
+        });
+      } else {
+        editor.formatter.apply(formatName);
+      }
+      syncEditorState(regionId, editor, false, true);
+    }
+
+    function applyEditorCommand(regionId, editor, commandName) {
+      if (editor && editor.undoManager && typeof editor.undoManager.transact === 'function') {
+        editor.undoManager.transact(function () {
+          editor.execCommand(commandName);
+        });
+      } else {
+        editor.execCommand(commandName);
+      }
+      syncEditorState(regionId, editor, false, true);
+    }
+
     return tinymce.init({
       target: source,
       menubar: false,
       branding: false,
       promotion: false,
-      statusbar: true,
+      paste_data_images: false,
-      resize: true,
+      plugins: 'lists code advlist fullscreen table',
-      plugins: 'lists link code advlist fullscreen table',
+      toolbar: 'undo redo | fontfamily fontsizeinput | forecolor backcolor bold italic underlineformats removeformat | align lineheight indent outdent bullist numlist table chip | fullscreen',
-      toolbar: 'undo redo | fontfamily fontsizeinput | forecolor backcolor bold italic underline strikethrough subscript superscript removeformat | align lineheight indent outdent bullist numlist table | fullscreen',
       toolbar_mode: 'sliding',
       license_key: 'gpl',
       skin: themeAssets.skinName,
@@ -244,12 +300,71 @@ export function createSlideFormEditorController(options) {
       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 : ''),
       font_family_formats: getFontFamilyFormats(),
       font_size_input_default_unit: 'px',
+      invalid_elements: 'a',
       forced_root_block: 'p',
       force_br_newlines: false,
       newline_behavior: 'default',
       placeholder: String(source.getAttribute('placeholder') || '').trim(),
       setup: function (editor) {
         editorInstances.set(regionId, editor);
+        editor.ui.registry.addButton('chip', {
+          icon: 'addtag',
+          tooltip: 'Chip style',
+          onAction: function () {
+            applyInlineFormat(regionId, editor, 'chip');
+          }
+        });
+        editor.ui.registry.addSplitButton('underlineformats', {
+          icon: 'underline',
+          tooltip: 'Text formats',
+          onAction: function () {
+            applyEditorCommand(regionId, editor, 'Underline');
+          },
+          onItemAction: function (_api, value) {
+            if (value === 'strikethrough') {
+              applyEditorCommand(regionId, editor, 'Strikethrough');
+              return;
+            }
+            if (value === 'subscript') {
+              applyEditorCommand(regionId, editor, 'Subscript');
+              return;
+            }
+            if (value === 'superscript') {
+              applyEditorCommand(regionId, editor, 'Superscript');
+            }
+          },
+          fetch: function (callback) {
+            callback([
+              {
+                type: 'choiceitem',
+                value: 'strikethrough',
+                icon: 'strikethrough',
+                text: 'Strikethrough',
+              },
+              {
+                type: 'choiceitem',
+                value: 'subscript',
+                icon: 'subscript',
+                text: 'Subscript',
+              },
+              {
+                type: 'choiceitem',
+                value: 'superscript',
+                icon: 'superscript',
+                text: 'Superscript',
+              }
+            ]);
+          }
+        });
+        editor.on('init', function () {
+          registerInlineFormat(editor, 'chip', {
+            display: 'inline-block',
+            padding: '0.2em 0.6em',
+            borderRadius: '999px',
+            fontWeight: '700',
+            letterSpacing: '0.02em'
+          });
+        });
         attachEditorEvents(regionId, editor);
       }
     }).then(function (editors) {

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

@@ -10,6 +10,7 @@ export function createSlideFormRegionHelpers(options) {
   var apiSources = Array.isArray(settings.apiSources) ? settings.apiSources : [];
   var timetableGroups = Array.isArray(settings.timetableGroups) ? settings.timetableGroups : [];
   var getRegionTypeModule = typeof settings.getRegionTypeModule === 'function' ? settings.getRegionTypeModule : function () { return null; };
+  var requestPreviewRender = typeof settings.requestPreviewRender === 'function' ? settings.requestPreviewRender : function () {};
   var placeholderUtils = window.placeholderUtils || {};
   var placeholderChips = window.placeholderChips || {};
   var escapeHtml = typeof settings.escapeHtml === 'function'
@@ -76,6 +77,11 @@ export function createSlideFormRegionHelpers(options) {
     }) || null;
   }
 
+  function getRssFeedItemCount(feedId) {
+    var feed = getRssFeedById(feedId);
+    return feed && Array.isArray(feed.items) ? feed.items.length : 0;
+  }
+
   function getRssFieldList(feedId) {
     var module = getRegionTypeModule('rss');
     if (module && typeof module.getFieldList === 'function') {
@@ -128,16 +134,18 @@ export function createSlideFormRegionHelpers(options) {
         ? placeholderChips.renderChip(field)
         : '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
     }).join('');
+    var transformHint = '<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>{{publishedAt.format("MMM D, YYYY")}}</code>.</div>';
 
     if (!overflowFields.length) {
-      return visibleMarkup;
+      return visibleMarkup + transformHint;
     }
 
     return '' +
       visibleMarkup +
-      '<details class="w-100 mt-2" data-placeholder-chips-more>' +
+      transformHint +
+      '<details class="w-100 mt-1" data-placeholder-chips-more>' +
         '<summary class="small text-body-secondary">Show ' + escapeHtml(overflowFields.length) + ' more fields</summary>' +
-        '<div class="d-flex flex-wrap gap-2 mt-2">' + overflowFields.map(function (field) {
+        '<div class="d-flex flex-wrap gap-2 mt-1">' + overflowFields.map(function (field) {
           return typeof placeholderChips.renderChip === 'function'
             ? placeholderChips.renderChip(field)
             : '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
@@ -200,7 +208,53 @@ export function createSlideFormRegionHelpers(options) {
 
   function updateRssPlaceholderChips(regionId, feedId) {
     var card = templateFields ? templateFields.querySelector('[data-region-id="' + regionId + '"]') : null;
-    updatePlaceholderChipList(card, getRssFieldList(feedId), 'No RSS fields available.');
+    if (!card) {
+      return;
+    }
+
+    var container = card.querySelector('[data-placeholder-chips]');
+    if (!container) {
+      return;
+    }
+
+    container.innerHTML = buildLimitedPlaceholderChipMarkup(getRssFieldList(feedId), 'No RSS fields available.');
+  }
+
+  function updateRssItemNumberLimit(regionId, feedId) {
+    var card = templateFields ? templateFields.querySelector('[data-region-id="' + regionId + '"]') : null;
+    if (!card) {
+      return;
+    }
+
+    var input = card.querySelector('input[name="region_rss_item_number_' + regionId + '"]');
+    if (!input) {
+      return;
+    }
+
+    var itemCount = Math.max(1, Number(getRssFeedItemCount(feedId) || 1));
+    input.setAttribute('max', String(itemCount));
+    if (Number(input.value || 0) > itemCount) {
+      input.value = String(itemCount);
+    }
+  }
+
+  function clampRssItemNumber(regionId, feedId, itemNumber) {
+    var card = templateFields ? templateFields.querySelector('[data-region-id="' + regionId + '"]') : null;
+    if (!card) {
+      return '';
+    }
+
+    var input = card.querySelector('input[name="region_rss_item_number_' + regionId + '"]');
+    if (!input) {
+      return '';
+    }
+
+    var itemCount = Math.max(1, Number(getRssFeedItemCount(feedId) || 1));
+    var parsedValue = Math.max(1, Number(itemNumber || 1));
+    var clampedValue = Math.min(itemCount, Number.isFinite(parsedValue) && parsedValue > 0 ? parsedValue : 1);
+    input.setAttribute('max', String(itemCount));
+    input.value = String(clampedValue);
+    return String(clampedValue);
   }
 
   function getCurrentRssConfig(region) {
@@ -502,6 +556,11 @@ export function createSlideFormRegionHelpers(options) {
               return '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
             }).join('')
           : buildLimitedPlaceholderChipMarkup(getApiFieldList(getCurrentApiConfig(region).source_id, getCurrentApiConfig(region).items_path), 'No JSON fields available.'),
+        placeholderFields: region.region_type === 'api'
+          ? getApiFieldList(getCurrentApiConfig(region).source_id, getCurrentApiConfig(region).items_path)
+          : region.region_type === 'rss'
+            ? getRssFieldList(getCurrentRssConfig(region).feed_id)
+            : [],
         sampleDataPreview: buildApiSampleDataMarkup(getCurrentApiConfig(region).source_id, getCurrentApiConfig(region).item_number, getCurrentApiConfig(region).items_path),
         timetableGroups: timetableGroups
       }, existingContent, region.region_type === 'rss' ? rssFeeds : region.region_type === 'timetable' ? timetableGroups : apiSources);
@@ -533,10 +592,13 @@ export function createSlideFormRegionHelpers(options) {
         return '<option value="' + escapeHtml(source.id) + '"' + selected + '>' + escapeHtml(source.name || ('Source ' + source.id)) + '</option>';
       }).join(''),
       placeholderChips: region.region_type === 'rss'
-        ? getRssFieldList(rssConfig.feed_id).map(function (field) {
+        ? buildLimitedPlaceholderChipMarkup(getRssFieldList(rssConfig.feed_id), 'No RSS fields available.')
-            return '<span class="chip">{{' + escapeHtml(field) + '}}</span>';
-          }).join('')
         : buildLimitedPlaceholderChipMarkup(getApiFieldList(apiConfig.source_id, apiItemsPath), 'No JSON fields available.'),
+      placeholderFields: region.region_type === 'api'
+        ? getApiFieldList(apiConfig.source_id, apiItemsPath)
+        : region.region_type === 'rss'
+          ? getRssFieldList(rssConfig.feed_id)
+          : [],
       sampleDataPreview: buildApiSampleDataMarkup(apiConfig.source_id, apiConfig.item_number, apiItemsPath),
       timetableGroups: timetableGroups
     };
@@ -551,6 +613,50 @@ export function createSlideFormRegionHelpers(options) {
     return makeRegionCardCollapsible(module.renderEditorCard(buildRegionEditorCardContext(region)), region);
   }
 
+  function bindRegionCards() {
+    if (!templateFields) {
+      return;
+    }
+
+    Array.prototype.forEach.call(templateFields.querySelectorAll('[data-region-id]'), function (card) {
+      var module = null;
+
+      if (!card || !card.querySelector || !card.querySelector('input[type="url"][name^="region_qr_code_"]')) {
+        return;
+      }
+
+      module = getRegionTypeModule('qr-code');
+
+      if (module && typeof module.bindEditorCard === 'function') {
+        module.bindEditorCard({
+          card: card,
+          region: { id: card.getAttribute('data-region-id') },
+          existingContent: existingContent,
+          requestPreviewRender: requestPreviewRender
+        });
+      }
+    });
+  }
+
+  function syncRegionCards() {
+    if (!templateFields) {
+      return Promise.resolve();
+    }
+
+    var syncs = [];
+    Array.prototype.forEach.call(templateFields.querySelectorAll('[data-region-id]'), function (card) {
+      if (!card || !card.querySelector || !card.querySelector('input[type="url"][name^="region_qr_code_"]')) {
+        return;
+      }
+
+      if (typeof card.__pulseQrSync === 'function') {
+        syncs.push(Promise.resolve(card.__pulseQrSync()));
+      }
+    });
+
+    return Promise.all(syncs);
+  }
+
   function makeRegionCardCollapsible(html, region) {
     if (typeof html !== 'string' || !html) {
       return html;
@@ -649,7 +755,6 @@ export function createSlideFormRegionHelpers(options) {
     var videoFileInput = card.querySelector('input[type="file"][name="region_video_' + region.id + '"]');
     var webpageInput = card.querySelector('input[type="url"][name="region_webpage_' + region.id + '"]');
     var rtmpInput = card.querySelector('input[type="url"][name="region_rtmp_' + region.id + '"]');
-    var disableAudioInput = card.querySelector('input[type="checkbox"][name="region_disable_audio_' + region.id + '"]');
     var rssFeedInput = card.querySelector('select[name="region_rss_feed_id_' + region.id + '"]');
     var rssItemInput = card.querySelector('input[name="region_rss_item_number_' + region.id + '"]');
     var apiSourceInput = card.querySelector('select[name="region_api_source_id_' + region.id + '"]');
@@ -664,7 +769,7 @@ export function createSlideFormRegionHelpers(options) {
       content.value = webpageInput ? webpageInput.value : (content.value || '');
     } else if (region.region_type === 'rtmp') {
       content.value = rtmpInput ? rtmpInput.value : (content.value || '');
-      content.disable_audio = disableAudioInput ? disableAudioInput.checked : (content.disable_audio === undefined ? true : Boolean(content.disable_audio));
+      content.disable_audio = false;
     } else if (region.region_type === 'html') {
       content.value = htmlInput ? htmlInput.value : (content.value || '');
     } else if (region.region_type === 'time-date') {
@@ -674,7 +779,7 @@ export function createSlideFormRegionHelpers(options) {
     } else if (region.region_type === 'rss') {
       content.value = hiddenInput ? hiddenInput.value : (content.value || '');
       content.feed_id = rssFeedInput ? rssFeedInput.value : content.feed_id;
-      content.item_number = rssItemInput ? rssItemInput.value : content.item_number;
+      content.item_number = rssItemInput ? clampRssItemNumber(region.id, content.feed_id, rssItemInput.value) : content.item_number;
     } else if (region.region_type === 'api') {
       content.value = hiddenInput ? hiddenInput.value : (content.value || '');
       content.source_id = apiSourceInput ? apiSourceInput.value : content.source_id;
@@ -737,11 +842,14 @@ export function createSlideFormRegionHelpers(options) {
     updateApiPlaceholderChips: updateApiPlaceholderChips,
     updateApiSampleDataPanel: updateApiSampleDataPanel,
     updateApiItemNumberLimit: updateApiItemNumberLimit,
+    updateRssItemNumberLimit: updateRssItemNumberLimit,
     getCurrentApiConfig: getCurrentApiConfig,
     reduceAspectRatio: reduceAspectRatio,
     renderPreviewTextRegion: renderPreviewTextRegion,
     startPreviewVideoPlayback: startPreviewVideoPlayback,
     getRegionEditorCardHtml: getRegionEditorCardHtml,
+    bindRegionCards: bindRegionCards,
+    syncRegionCards: syncRegionCards,
     buildRegionEditorCardContext: buildRegionEditorCardContext,
     getPreviewRegionContent: getPreviewRegionContent,
     buildPreviewRenderContext: buildPreviewRenderContext,

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

@@ -114,7 +114,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     requestPreviewRender: requestPreviewRender
   });
   var regionUtils = window.pulseRegionUtils || {};
-  var slideRegionHelpers = createSlideFormRegionHelpers({
+  var slideRegionHelperOptions = {
     templateFields: templateFields,
     existingContent: existingContent,
     rssFeeds: rssFeeds,
@@ -124,8 +124,10 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     uploadMaxLabel: uploadMaxLabel,
     uploadVideoMaxLabel: uploadVideoMaxLabel,
     escapeHtml: escapeHtml,
-    getRegionTypeModule: getRegionTypeModule
+    getRegionTypeModule: getRegionTypeModule,
-  });
+    requestPreviewRender: requestPreviewRender
+  };
+  var slideRegionHelpers = createSlideFormRegionHelpers(slideRegionHelperOptions);
   var slidePreviewHelpers = createSlideFormPreviewHelpers({
     getRegionTypeModule: getRegionTypeModule,
     escapeHtml: escapeHtml
@@ -139,6 +141,8 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
   var renderPreviewTextRegion = slidePreviewHelpers.renderPreviewTextRegion;
   var buildRegionEditorCardContext = slideRegionHelpers.buildRegionEditorCardContext;
   var getRegionEditorCardHtml = slideRegionHelpers.getRegionEditorCardHtml;
+  var bindRegionCards = slideRegionHelpers.bindRegionCards;
+  var syncRegionCards = slideRegionHelpers.syncRegionCards;
   var getPreviewRegionContent = slideRegionHelpers.getPreviewRegionContent;
   var buildPreviewRenderContext = slideRegionHelpers.buildPreviewRenderContext;
   var startPreviewVideoPlayback = slidePreviewHelpers.startPreviewVideoPlayback;
@@ -147,6 +151,28 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     return templates.find(function (item) { return Number(item.id) === Number(templateSelect.value); }) || null;
   }
 
+  function hasMeaningfulValue(value) {
+    if (value === null || value === undefined) {
+      return false;
+    }
+
+    if (Array.isArray(value)) {
+      return value.some(hasMeaningfulValue);
+    }
+
+    if (typeof value === 'object') {
+      return Object.keys(value).some(function (key) {
+        return hasMeaningfulValue(value[key]);
+      });
+    }
+
+    return String(value).trim() !== '';
+  }
+
+  function hasExistingSlideContent() {
+    return hasMeaningfulValue(existingContent);
+  }
+
   function clearImagePreviewUrls() {
     templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]').forEach(function (input) {
       if (input.dataset.previewUrl) {
@@ -170,6 +196,10 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
       return String(card.dataset.regionMediaType || '').trim();
     }
 
+    if (card.querySelector && card.querySelector('input[type="file"][name^="region_qr_image_"], input[type="url"][name^="region_qr_code_"]')) {
+      return 'qr-code';
+    }
+
     var regionTypeInput = card.querySelector ? card.querySelector('input[type="hidden"][name="region_type[]"]') : null;
     return String(regionTypeInput && regionTypeInput.value || '').trim();
   }
@@ -192,6 +222,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
       return syncVideoRegionDuration(card, source);
     },
     markEdited: function () {
+      templateSelectorLock.arm();
       templateSelectorLock.markEdited();
       requestPreviewRender();
     },
@@ -201,7 +232,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
   }) : null;
 
   function buildRegionMediaHookContext(input, file) {
-    var regionId = input && input.name ? input.name.replace(/^region_(?:image|video)_/, '') : '';
+    var regionId = input && input.name ? input.name.replace(/^region_(?:image|video|qr_image)_/, '') : '';
     var card = regionId ? templateFields.querySelector('[data-region-id="' + regionId + '"]') : null;
 
     return {
@@ -220,7 +251,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
   }
 
   function handleRegionMediaFileSelection(input, file) {
-    var card = input && input.name ? templateFields.querySelector('[data-region-id="' + input.name.replace(/^region_(?:image|video)_/, '') + '"]') : null;
+    var card = input && input.name ? templateFields.querySelector('[data-region-id="' + input.name.replace(/^region_(?:image|video|qr_image)_/, '') + '"]') : null;
     var module = getRegionEditorModule(card);
     var hookContext = buildRegionMediaHookContext(input, file);
 
@@ -241,14 +272,19 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
       return;
     }
 
-    var mediaType = card && card.dataset && String(card.dataset.regionMediaType || '').trim() === 'video' ? 'video' : 'image';
+    var mediaType = card && card.dataset && String(card.dataset.regionMediaType || '').trim() === 'video'
+      ? 'video'
+      : card && card.querySelector && card.querySelector('input[type="file"][name^="region_qr_image_"]')
+        ? 'qr-image'
+        : 'image';
     var isVideo = mediaType === 'video';
+    var isQrImage = mediaType === 'qr-image';
 
     previewBox.innerHTML = value
-      ? '<div class="slide-image-region-preview-shell" data-remove-' + (isVideo ? 'region-video' : 'region-image') + '="' + escapeHtml(card.getAttribute('data-region-id') || '') + '" role="button" tabindex="0" aria-label="Remove ' + (isVideo ? 'video' : 'image') + '">' +
+      ? '<div class="slide-image-region-preview-shell" data-remove-' + (isVideo ? 'region-video' : isQrImage ? 'region-qr-image' : 'region-image') + '="' + escapeHtml(card.getAttribute('data-region-id') || '') + '" role="button" tabindex="0" aria-label="Remove ' + (isVideo ? 'video' : isQrImage ? 'QR image' : 'image') + '">' +
           (isVideo
             ? '<video class="slide-image-region-preview" src="' + escapeHtml(value) + '" autoplay loop muted playsinline preload="metadata"></video>'
-            : '<img class="slide-image-region-preview" src="' + escapeHtml(value) + '" alt="Current image preview" />') +
+            : '<img class="slide-image-region-preview" src="' + escapeHtml(value) + '" alt="' + (isQrImage ? 'Current QR image preview' : 'Current image preview') + '" />') +
           '<span class="slide-image-region-preview-remove" aria-hidden="true"><i class="bi bi-trash3" aria-hidden="true"></i></span>' +
         '</div>'
       : '<div class="slide-image-region-preview slide-image-region-preview-empty">No ' + (isVideo ? 'video' : 'image') + '</div>';
@@ -389,15 +425,15 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
   }
 
   function getRegionImageInputs() {
-    return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"]'));
+    return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"], input[type="file"][name^="region_qr_image_"]'));
   }
 
   function getRegionMediaInputs() {
-    return getRegionImageInputs();
+    return Array.prototype.slice.call(templateFields.querySelectorAll('input[type="file"][name^="region_image_"], input[type="file"][name^="region_video_"], input[type="file"][name^="region_qr_image_"]'));
   }
 
   function hasPendingRegionImageUpload() {
-    return getRegionImageInputs().some(function (input) {
+    return getRegionMediaInputs().some(function (input) {
       return Boolean(input && input.files && input.files.length);
     });
   }
@@ -434,8 +470,12 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     };
   }
 
+  function buildPreviewPopupHash() {
+    return encodeURIComponent(JSON.stringify(buildPreviewPopupPayload()));
+  }
+
   function buildPreviewPopupUrl() {
-    return '/slides/popup-preview#' + encodeURIComponent(JSON.stringify(buildPreviewPopupPayload()));
+    return '/slides/popup-preview#' + buildPreviewPopupHash();
   }
 
   function syncPopupPreview() {
@@ -444,7 +484,15 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
       return;
     }
 
-    previewPopupWindow = window.open(buildPreviewPopupUrl(), 'slide-preview-popup', previewPopupFeatures);
+    try {
+      if (previewPopupWindow.location && previewPopupWindow.location.pathname !== '/slides/popup-preview') {
+        return;
+      }
+    } catch (_error) {
+      return;
+    }
+
+    previewPopupWindow.location.hash = buildPreviewPopupHash();
   }
 
   function openPreviewPopup() {
@@ -467,13 +515,18 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
       'top=' + top
     ].join(',');
 
-    previewPopupWindow = window.open(buildPreviewPopupUrl(), 'slide-preview-popup', previewPopupFeatures);
+    previewPopupWindow = window.open('about:blank', 'slide-preview-popup', previewPopupFeatures);
     if (!previewPopupWindow) {
       return;
     }
 
+    try {
+      previewPopupWindow.location.replace(buildPreviewPopupUrl());
+    } catch (_error) {
+      previewPopupWindow.location.href = buildPreviewPopupUrl();
+    }
+
     previewPopupWindow.focus();
-    syncPopupPreview();
   }
 
   function syncSlideEditorSidebar() {
@@ -588,6 +641,8 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
           ? ' slide-preview-video-region'
         : region.region_type === 'webpage'
           ? ' slide-preview-webpage-region'
+          : region.region_type === 'qr-code'
+            ? ' slide-preview-qr-code-region'
           : region.region_type === 'rtmp'
             ? ' slide-preview-rtmp-region'
           : region.region_type === 'rss'
@@ -626,6 +681,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
   var updateApiSampleDataPanel = slideRegionHelpers.updateApiSampleDataPanel;
   var updateApiItemNumberLimit = slideRegionHelpers.updateApiItemNumberLimit;
   var getCurrentApiConfig = slideRegionHelpers.getCurrentApiConfig;
+  var updateRssItemNumberLimit = slideRegionHelpers.updateRssItemNumberLimit;
 
   function renderTemplate() {
     templateSelectorLock.reset();
@@ -657,6 +713,9 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
     });
 
     slideFormEditorController.renderEditors();
+    window.requestAnimationFrame(function () {
+      bindRegionCards();
+    });
     templateFields.querySelectorAll('input[name^="region_api_item_number_"]').forEach(function (input) {
       var regionId = input.name.replace(/^region_api_item_number_/, '');
       var sourceInput = templateFields.querySelector('select[name="region_api_source_id_' + regionId + '"]');
@@ -665,19 +724,42 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
         updateApiItemNumberLimit(regionId, sourceInput.value, pathInput ? pathInput.value : '');
       }
     });
+    templateFields.querySelectorAll('input[name^="region_rss_item_number_"]').forEach(function (input) {
+      var regionId = input.name.replace(/^region_rss_item_number_/, '');
+      var feedInput = templateFields.querySelector('select[name="region_rss_feed_id_' + regionId + '"]');
+      if (feedInput) {
+        updateRssItemNumberLimit(regionId, feedInput.value);
+      }
+    });
 
     if (typeof regionUtils.bindRegionMediaRemoveControls === 'function') {
       regionUtils.bindRegionMediaRemoveControls(templateFields, {
         getCardByRegionId: function (regionId) {
           return templateFields.querySelector('[data-region-id="' + regionId + '"]');
         },
-        getMediaType: function (card) {
+        getMediaType: function (card, button) {
+          if (button && button.hasAttribute && button.hasAttribute('data-remove-region-qr-image')) {
+            return 'qr-image';
+          }
+
+          if (button && button.hasAttribute && button.hasAttribute('data-remove-region-video')) {
+            return 'video';
+          }
+
           return card && card.dataset && String(card.dataset.regionMediaType || '').trim() === 'video' ? 'video' : 'image';
         },
         getExistingMediaPrefix: function (mediaType) {
+          if (String(mediaType || '').trim() === 'qr-image') {
+            return 'existing_region_qr_image_';
+          }
+
           return String(mediaType || '').trim() === 'video' ? 'existing_region_video_' : 'existing_region_image_';
         },
         getMediaPrefix: function (mediaType) {
+          if (String(mediaType || '').trim() === 'qr-image') {
+            return 'region_qr_image_';
+          }
+
           return String(mediaType || '').trim() === 'video' ? 'region_video_' : 'region_image_';
         },
         getVideoDurationHiddenInput: function (regionId) {
@@ -705,6 +787,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
         if (input.name.indexOf('region_rss_') === 0) {
           var rssFeed = input.name.indexOf('region_rss_feed_id_') === 0 ? input.value : (templateFields.querySelector('select[name="region_rss_feed_id_' + regionId + '"]') || {}).value;
           updateRssPlaceholderChips(regionId, rssFeed);
+          updateRssItemNumberLimit(regionId, rssFeed);
         }
         if (input.name.indexOf('region_api_') === 0) {
           var apiSource = input.name.indexOf('region_api_source_id_') === 0 ? input.value : (templateFields.querySelector('select[name="region_api_source_id_' + regionId + '"]') || {}).value;
@@ -722,6 +805,7 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
         if (input.name.indexOf('region_rss_') === 0) {
           var rssFeed = input.name.indexOf('region_rss_feed_id_') === 0 ? input.value : (templateFields.querySelector('select[name="region_rss_feed_id_' + regionId + '"]') || {}).value;
           updateRssPlaceholderChips(regionId, rssFeed);
+          updateRssItemNumberLimit(regionId, rssFeed);
         }
         if (input.name.indexOf('region_api_') === 0) {
           var apiSource = input.name.indexOf('region_api_source_id_') === 0 ? input.value : (templateFields.querySelector('select[name="region_api_source_id_' + regionId + '"]') || {}).value;
@@ -736,16 +820,12 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
       });
     });
 
-    if (existingTemplateId) {
+    if (existingTemplateId && hasExistingSlideContent()) {
       templateSelectorLock.arm();
       templateSelectorLock.markEdited();
       requestPreviewRender();
       return;
     }
-
-    window.requestAnimationFrame(function () {
-      templateSelectorLock.arm();
-    });
     requestPreviewRender();
   }
 
@@ -760,6 +840,7 @@ 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 syncRegionCards();
       },
       fallbackSuccessMessage: 'Saved slide.',
       afterSuccess: function () {
@@ -786,10 +867,12 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
 
   templateSelect.addEventListener('change', renderTemplate);
   templateFields.addEventListener('change', function () {
+    templateSelectorLock.arm();
     templateSelectorLock.markEdited();
     requestPreviewRender();
   });
   templateFields.addEventListener('input', function () {
+    templateSelectorLock.arm();
     templateSelectorLock.markEdited();
     requestPreviewRender();
   });

src/web/public/js/templates/animation-presets.js

@@ -0,0 +1,203 @@
+(function (root, factory) {
+  var presets = factory();
+
+  if (typeof module === 'object' && module.exports) {
+    module.exports = presets;
+  }
+
+  if (root) {
+    root.templateAnimationPresets = presets;
+  }
+})(typeof window !== 'undefined' ? window : (typeof globalThis !== 'undefined' ? globalThis : this), function () {
+  function option(value, label) {
+    return { value: value, label: label };
+  }
+
+  function formatLabel(value) {
+    return String(value || '')
+      .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+      .replace(/[_-]+/g, ' ')
+      .replace(/\s+/g, ' ')
+      .trim()
+      .replace(/\b\w/g, function (letter) {
+        return letter.toUpperCase();
+      });
+  }
+
+  function buildAllValues(groups, extraValues) {
+    var values = [];
+    var seen = Object.create(null);
+
+    function addEntry(entry) {
+      if (!entry || typeof entry !== 'object' || !entry.value || seen[entry.value]) {
+        return;
+      }
+
+      seen[entry.value] = true;
+      values.push(entry.value);
+    }
+
+    Object.keys(groups).forEach(function (groupName) {
+      (groups[groupName] || []).forEach(function (entry) {
+        if (Array.isArray(entry)) {
+          entry.forEach(addEntry);
+          return;
+        }
+
+        addEntry(entry);
+      });
+    });
+
+    (extraValues || []).forEach(function (value) {
+      if (!value || seen[value]) {
+        return;
+      }
+
+      seen[value] = true;
+      values.push(value);
+    });
+
+    return values;
+  }
+
+  function buildLookup(values) {
+    var lookup = Object.create(null);
+
+    values.forEach(function (value) {
+      var key = String(value || '').trim().toLowerCase();
+      if (key && !lookup[key]) {
+        lookup[key] = value;
+      }
+    });
+
+    return lookup;
+  }
+
+  function normalizeValue(value, lookup) {
+    var raw = String(value || '').trim();
+    if (!raw) {
+      return 'none';
+    }
+
+    return lookup[raw.toLowerCase()] || 'none';
+  }
+
+  function splitAnimateCssValues(values) {
+    var groups = {
+      intro: [],
+      outro: [],
+      attentionSeekers: []
+    };
+
+    (values || []).forEach(function (value) {
+      if (!value || value === 'none') {
+        return;
+      }
+
+      if (value.indexOf('In') !== -1) {
+        groups.intro.push(value);
+        return;
+      }
+
+      if (value.indexOf('Out') !== -1) {
+        groups.outro.push(value);
+        return;
+      }
+
+      groups.attentionSeekers.push(value);
+    });
+
+    return groups;
+  }
+
+  function buildCuratedBasic(values) {
+    return [option('none', 'None')].concat(values.map(function (value) {
+      return option(value, formatLabel(value));
+    }));
+  }
+
+  var animateCssValues = [
+    'none',
+    'bounce', 'flash', 'pulse', 'rubberBand', 'shakeX', 'shakeY', 'headShake', 'swing', 'tada', 'wobble', 'jello', 'heartBeat',
+    'backInDown', 'backInLeft', 'backInRight', 'backInUp',
+    'backOutDown', 'backOutLeft', 'backOutRight', 'backOutUp',
+    'bounceIn', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceInUp',
+    'bounceOut', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight', 'bounceOutUp',
+    'fadeIn', 'fadeInDown', 'fadeInDownBig', 'fadeInLeft', 'fadeInLeftBig', 'fadeInRight', 'fadeInRightBig', 'fadeInUp', 'fadeInUpBig', 'fadeInTopLeft', 'fadeInTopRight', 'fadeInBottomLeft', 'fadeInBottomRight',
+    'fadeOut', 'fadeOutDown', 'fadeOutDownBig', 'fadeOutLeft', 'fadeOutLeftBig', 'fadeOutRight', 'fadeOutRightBig', 'fadeOutUp', 'fadeOutUpBig', 'fadeOutTopLeft', 'fadeOutTopRight', 'fadeOutBottomLeft', 'fadeOutBottomRight',
+    'flip', 'flipInX', 'flipInY', 'flipOutX', 'flipOutY',
+    'lightSpeedInLeft', 'lightSpeedInRight', 'lightSpeedOutLeft', 'lightSpeedOutRight',
+    'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight',
+    'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight',
+    'hinge', 'jackInTheBox', 'rollIn', 'rollOut',
+    'zoomIn', 'zoomInDown', 'zoomInLeft', 'zoomInRight', 'zoomInUp',
+    'zoomOut', 'zoomOutDown', 'zoomOutLeft', 'zoomOutRight', 'zoomOutUp',
+    'slideInDown', 'slideInLeft', 'slideInRight', 'slideInUp',
+    'slideOutDown', 'slideOutLeft', 'slideOutRight', 'slideOutUp'
+  ];
+
+  var splitValues = splitAnimateCssValues(animateCssValues);
+
+  var basic = {
+    intro: [
+      option('none', 'None'),
+      option('fadeIn', formatLabel('fadeIn')),
+      option('fadeInDown', formatLabel('fadeInDown')),
+      option('fadeInLeft', formatLabel('fadeInLeft')),
+      option('fadeInRight', formatLabel('fadeInRight')),
+      option('fadeInUp', formatLabel('fadeInUp')),
+      option('zoomIn', formatLabel('zoomIn')),
+      option('zoomInDown', formatLabel('zoomInDown')),
+      option('zoomInLeft', formatLabel('zoomInLeft')),
+      option('zoomInRight', formatLabel('zoomInRight')),
+      option('zoomInUp', formatLabel('zoomInUp')),
+      option('slideInDown', formatLabel('slideInDown')),
+      option('slideInLeft', formatLabel('slideInLeft')),
+      option('slideInRight', formatLabel('slideInRight')),
+      option('slideInUp', formatLabel('slideInUp'))
+    ],
+    outro: [
+      option('none', 'None'),
+      option('fadeOut', formatLabel('fadeOut')),
+      option('fadeOutDown', formatLabel('fadeOutDown')),
+      option('fadeOutLeft', formatLabel('fadeOutLeft')),
+      option('fadeOutRight', formatLabel('fadeOutRight')),
+      option('fadeOutUp', formatLabel('fadeOutUp')),
+      option('zoomOut', formatLabel('zoomOut')),
+      option('zoomOutDown', formatLabel('zoomOutDown')),
+      option('zoomOutLeft', formatLabel('zoomOutLeft')),
+      option('zoomOutRight', formatLabel('zoomOutRight')),
+      option('zoomOutUp', formatLabel('zoomOutUp')),
+      option('slideOutDown', formatLabel('slideOutDown')),
+      option('slideOutLeft', formatLabel('slideOutLeft')),
+      option('slideOutRight', formatLabel('slideOutRight')),
+      option('slideOutUp', formatLabel('slideOutUp'))
+    ],
+    attentionSeekers: buildCuratedBasic(['flash', 'pulse', 'rubberBand', 'shakeX', 'shakeY', 'swing', 'tada', 'wobble', 'jello', 'heartBeat', 'bounce'])
+  };
+
+  var advanced = {
+    intro: buildCuratedBasic(splitValues.intro),
+    outro: buildCuratedBasic(splitValues.outro),
+    attentionSeekers: buildCuratedBasic(splitValues.attentionSeekers)
+  };
+
+  var lookup = buildLookup(buildAllValues({ basic: [basic.intro, basic.outro, basic.attentionSeekers], advanced: [advanced.intro, advanced.outro, advanced.attentionSeekers] }));
+
+  function normalize(value) {
+    return normalizeValue(value, lookup);
+  }
+
+  function isAnimateCssPreset(value) {
+    return animateCssValues.indexOf(normalizeValue(value, buildLookup(animateCssValues))) !== -1;
+  }
+
+  return {
+    basic: basic,
+    advanced: advanced,
+    animateCssValues: animateCssValues,
+    allValues: buildAllValues({ basic: [basic.intro, basic.outro, basic.attentionSeekers], advanced: [advanced.intro, advanced.outro, advanced.attentionSeekers] }),
+    normalize: normalize,
+    isAnimateCssPreset: isAnimateCssPreset
+  };
+});

src/web/public/js/templates/template-designer-utils.js

@@ -78,10 +78,182 @@
     return Math.max(min, Math.min(max, value));
   }
 
+  var MAX_ANIMATION_REPEAT_COUNT = 999;
+
   function getRegionName(card) {
     return String(card.querySelector('[name="region_name[]"]').value || '').trim();
   }
 
+  function getAnimationConfig(card) {
+    var hiddenAnimationInput = card.querySelector('[name="region_animation_json[]"]');
+    var animationConfig = normalizeAnimationConfig(hiddenAnimationInput ? hiddenAnimationInput.value || '{}' : '{}');
+    var introPresetInput = card.querySelector('[data-animation-preset="intro"]');
+    var outroPresetInput = card.querySelector('[data-animation-preset="outro"]');
+    var loopPresetInput = card.querySelector('[data-animation-preset="loop"]');
+
+    if (introPresetInput && introPresetInput.dataset.animationPresetCustom !== '1' && introPresetInput.selectedIndex >= 0) {
+      animationConfig.intro.preset = normalizePreviewAnimation(introPresetInput.value);
+    }
+    if (outroPresetInput && outroPresetInput.dataset.animationPresetCustom !== '1' && outroPresetInput.selectedIndex >= 0) {
+      animationConfig.outro.preset = normalizePreviewAnimation(outroPresetInput.value);
+    }
+    if (loopPresetInput && loopPresetInput.dataset.animationPresetCustom !== '1' && loopPresetInput.selectedIndex >= 0) {
+      animationConfig.loop.preset = normalizePreviewAnimation(loopPresetInput.value);
+    }
+
+    return animationConfig;
+  }
+
+  function getAnimationPresetValues() {
+    var presets = window.templateAnimationPresets || {};
+    if (Array.isArray(presets.allValues) && presets.allValues.length) {
+      return presets.allValues;
+    }
+
+    return [
+      'none', 'fadeIn', 'fadeInDown', 'fadeInLeft', 'fadeInRight', 'fadeInUp', 'zoomIn', 'zoomInDown',
+      'zoomInLeft', 'zoomInRight', 'zoomInUp', 'slideInDown', 'slideInLeft', 'slideInRight', 'slideInUp',
+      'fadeOut', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight', 'fadeOutUp', 'zoomOut', 'zoomOutDown',
+      'zoomOutLeft', 'zoomOutRight', 'zoomOutUp', 'slideOutDown', 'slideOutLeft', 'slideOutRight', 'slideOutUp',
+      'backInDown', 'backInLeft', 'backInRight', 'backInUp', 'backOutDown', 'backOutLeft', 'backOutRight', 'backOutUp',
+      'bounceIn', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceInUp', 'bounceOut', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight', 'bounceOutUp',
+      'flip', 'flipInX', 'flipInY', 'flipOutX', 'flipOutY', 'lightSpeedInLeft', 'lightSpeedInRight', 'lightSpeedOutLeft', 'lightSpeedOutRight',
+      'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight',
+      'hinge', 'jackInTheBox', 'rollIn', 'rollOut', 'flash', 'pulse', 'rubberBand', 'shakeX', 'shakeY', 'headShake', 'swing', 'tada', 'wobble', 'jello', 'heartBeat', 'bounce'
+    ];
+  }
+
+  function getAnimationPresetMap() {
+    var lookup = {};
+    getAnimationPresetValues().forEach(function (value) {
+      lookup[value] = true;
+    });
+    return lookup;
+  }
+
+  function syncAnimationPresetCustomState(selectInput, resetButton, preset) {
+    if (!selectInput) {
+      return;
+    }
+
+    var normalizedPreset = normalizePreviewAnimation(preset);
+    var hasMatchingOption = Array.prototype.some.call(selectInput.options || [], function (option) {
+      return option && option.value === normalizedPreset;
+    });
+
+    if (hasMatchingOption) {
+      delete selectInput.dataset.animationPresetCustom;
+      selectInput.hidden = false;
+      if (resetButton) {
+        resetButton.hidden = true;
+      }
+    } else {
+      selectInput.dataset.animationPresetCustom = '1';
+      selectInput.hidden = true;
+      if (resetButton) {
+        resetButton.hidden = false;
+        resetButton.textContent = 'Reset to basic';
+      }
+    }
+  }
+
+  function writeAnimationConfig(card, animationConfig) {
+    var normalized = normalizeAnimationConfig(animationConfig);
+    var hiddenAnimationInput = card.querySelector('[name="region_animation_json[]"]');
+    var introPresetInput = card.querySelector('[data-animation-preset="intro"]');
+    var outroPresetInput = card.querySelector('[data-animation-preset="outro"]');
+    var loopPresetInput = card.querySelector('[data-animation-preset="loop"]');
+    var introResetButton = card.querySelector('[data-animation-reset-button="intro"]');
+    var outroResetButton = card.querySelector('[data-animation-reset-button="outro"]');
+    var loopResetButton = card.querySelector('[data-animation-reset-button="loop"]');
+
+    if (hiddenAnimationInput) {
+      hiddenAnimationInput.value = JSON.stringify(normalized, null, 2);
+    }
+    if (introPresetInput) {
+      introPresetInput.value = normalized.intro.preset;
+      syncAnimationPresetCustomState(introPresetInput, introResetButton, normalized.intro.preset);
+    }
+    if (outroPresetInput) {
+      outroPresetInput.value = normalized.outro.preset;
+      syncAnimationPresetCustomState(outroPresetInput, outroResetButton, normalized.outro.preset);
+    }
+    if (loopPresetInput) {
+      loopPresetInput.value = normalized.loop.preset;
+      syncAnimationPresetCustomState(loopPresetInput, loopResetButton, normalized.loop.preset);
+    }
+
+    return normalized;
+  }
+
+  function normalizePreviewAnimation(value) {
+    if (window.templateAnimationPresets && typeof window.templateAnimationPresets.normalize === 'function') {
+      return window.templateAnimationPresets.normalize(value);
+    }
+
+    var allowed = getAnimationPresetMap();
+
+    var raw = String(value || '').trim().toLowerCase();
+    return allowed[raw] ? raw : 'none';
+  }
+
+  function normalizeAnimationStep(value, fallbackPreset) {
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      var normalized = {};
+      Object.keys(value).forEach(function (key) {
+        normalized[key] = value[key];
+      });
+      normalized.preset = normalizePreviewAnimation(value.preset !== undefined ? value.preset : fallbackPreset || 'none');
+      normalized.duration_ms = Number.isFinite(Number(value.duration_ms)) && Number(value.duration_ms) > 0 ? Math.round(Number(value.duration_ms)) : null;
+      normalized.delay_ms = Number.isFinite(Number(value.delay_ms)) && Number(value.delay_ms) >= 0 ? Math.round(Number(value.delay_ms)) : null;
+      normalized.iterations = Number.isFinite(Number(value.iterations)) && Number(value.iterations) > 0
+        ? clamp(Math.round(Number(value.iterations)), 1, MAX_ANIMATION_REPEAT_COUNT)
+        : null;
+      normalized.easing = String(value.easing || '').trim();
+      normalized.fill_mode = String(value.fill_mode || '').trim();
+      return normalized;
+    }
+
+    return {
+      preset: normalizePreviewAnimation(typeof value === 'string' ? value : fallbackPreset || 'none'),
+      duration_ms: null,
+      delay_ms: null,
+      iterations: null,
+      easing: '',
+      fill_mode: ''
+    };
+  }
+
+  function normalizeAnimationConfig(value) {
+    var raw = value;
+    if (typeof raw === 'string') {
+      var text = String(raw || '').trim();
+      if (!text) {
+        raw = null;
+      } else {
+        try {
+          raw = JSON.parse(text);
+        } catch (_error) {
+          raw = null;
+        }
+      }
+    }
+
+    if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+      raw = {};
+    }
+
+    return {
+      intro: normalizeAnimationStep(raw.intro, 'none'),
+      outro: normalizeAnimationStep(raw.outro !== undefined ? raw.outro : raw.out, 'none'),
+      loop: normalizeAnimationStep(raw.loop, 'none')
+    };
+  }
+
+  function formatAnimationConfig(value) {
+    return JSON.stringify(normalizeAnimationConfig(value), null, 2);
+  }
+
   function syncRegionIdentity(card, value) {
     var next = String(value || '').trim();
     card.querySelector('[name="region_name[]"]').value = next;
@@ -96,6 +268,7 @@
       label: name,
       region_type: card.querySelector('[name="region_type[]"]').value,
       lock_ratio: normalizeLockRatio(card.querySelector('[name="region_lock_ratio[]"]').value),
+      animation_json: getAnimationConfig(card),
       x: Number(card.querySelector('[name="region_x[]"]').value || 0),
       y: Number(card.querySelector('[name="region_y[]"]').value || 0),
       width: Number(card.querySelector('[name="region_width[]"]').value || 0),
@@ -114,6 +287,7 @@
     }
     if (values.region_type !== undefined) { card.querySelector('[name="region_type[]"]').value = values.region_type; }
     if (values.lock_ratio !== undefined) { card.querySelector('[name="region_lock_ratio[]"]').value = normalizeLockRatio(values.lock_ratio); }
+    if (values.animation_json !== undefined) { writeAnimationConfig(card, values.animation_json); }
     if (values.x !== undefined) { card.querySelector('[name="region_x[]"]').value = Math.round(values.x); }
     if (values.y !== undefined) { card.querySelector('[name="region_y[]"]').value = Math.round(values.y); }
     if (values.width !== undefined) { card.querySelector('[name="region_width[]"]').value = Math.round(values.width); }
@@ -171,6 +345,10 @@
     syncRegionIdentity: syncRegionIdentity,
     readCard: readCard,
     writeCard: writeCard,
+    normalizeAnimationConfig: normalizeAnimationConfig,
+    formatAnimationConfig: formatAnimationConfig,
+    getAnimationConfig: getAnimationConfig,
+    writeAnimationConfig: writeAnimationConfig,
     clampRegion: clampRegion,
     getOverlayRect: getOverlayRect,
     toCanvasPoint: toCanvasPoint,

src/web/public/js/toast.js

@@ -1,4 +1,63 @@
  (function (root) {
+  var pendingToastStorageKey = 'pulse:pending-toast';
+
+  function readPendingToast() {
+    try {
+      if (!root.sessionStorage) {
+        return null;
+      }
+
+      var rawValue = root.sessionStorage.getItem(pendingToastStorageKey);
+      if (!rawValue) {
+        return null;
+      }
+
+      root.sessionStorage.removeItem(pendingToastStorageKey);
+      var payload = JSON.parse(rawValue);
+      if (!payload || !payload.message) {
+        return null;
+      }
+
+      return {
+        message: String(payload.message || '').trim(),
+        variant: String(payload.variant || 'info').trim().toLowerCase() || 'info'
+      };
+    } catch (_error) {
+      return null;
+    }
+  }
+
+  function writePendingToast(message, variant) {
+    try {
+      if (!root.sessionStorage) {
+        return false;
+      }
+
+      var text = String(message || '').trim();
+      if (!text) {
+        return false;
+      }
+
+      root.sessionStorage.setItem(pendingToastStorageKey, JSON.stringify({
+        message: text,
+        variant: String(variant || 'info').trim().toLowerCase() || 'info'
+      }));
+      return true;
+    } catch (_error) {
+      return false;
+    }
+  }
+
+  function clearPendingToast() {
+    try {
+      if (root.sessionStorage) {
+        root.sessionStorage.removeItem(pendingToastStorageKey);
+      }
+    } catch (_error) {
+      // ignore storage cleanup failures
+    }
+  }
+
   function getToastTitle(variant, message) {
     var text = String(message || '').trim();
     if (/\b(?:deleted|removed)\.?$/i.test(text)) {
@@ -219,9 +278,15 @@
   function initToast() {
     var toast = document.getElementById('app-toast');
     if (!toast) {
+      var pendingToast = readPendingToast();
+      if (pendingToast) {
+        showToast(pendingToast.message, pendingToast.variant);
+      }
       return;
     }
 
+    clearPendingToast();
+
     try {
       var url = new URL(window.location.href);
       if (url.searchParams.has('message')) {
@@ -250,6 +315,7 @@
   root.showToast = showToast;
   root.initToast = initToast;
   root.getMessageVariant = getMessageVariant;
+  root.queueToastAfterRefresh = writePendingToast;
 
   if (typeof module !== 'undefined' && module.exports) {
     module.exports = {

src/web/public/js/web-ui-helpers.js

@@ -10,7 +10,7 @@
       .replace(/'/g, ''');
   }
 
-  function formatDashboardDate(value) {
+  function formatDashboardDate(value, useTwentyFourHour) {
     if (!value) {
       return '';
     }
@@ -20,14 +20,20 @@
       return '';
     }
 
-    return new Intl.DateTimeFormat('en-US', {
+    var formatOptions = {
       month: 'short',
       day: '2-digit',
       year: 'numeric',
       hour: 'numeric',
       minute: '2-digit',
       second: '2-digit'
-    }).format(date);
+    };
+
+    if (useTwentyFourHour) {
+      formatOptions.hour12 = false;
+    }
+
+    return new Intl.DateTimeFormat('en-US', formatOptions).format(date);
   }
 
   function getClientRowKey(client) {
@@ -85,6 +91,206 @@
     return ip;
   }
 
+  window.escapeHtml = escapeHtml;
+
+  var defaultQrOptions = window.defaultQrOptions || {
+    width: 1000,
+    height: 1000,
+    type: 'canvas',
+    margin: 10,
+    qrOptions: {},
+    dotsOptions: {
+      color: '#000000',
+      type: 'square'
+    },
+    cornersSquareOptions: {
+      color: '#000000',
+      type: 'square'
+    },
+    cornersDotOptions: {
+      color: '#000000',
+      type: 'square'
+    },
+    backgroundOptions: {
+      color: '#ffffff'
+    }
+  };
+  var qrDotTypes = window.qrDotTypes || [
+    { value: 'square', label: 'Square' },
+    { value: 'dots', label: 'Dots' },
+    { value: 'rounded', label: 'Rounded' },
+    { value: 'extra-rounded', label: 'Extra rounded' },
+    { value: 'classy', label: 'Classy' },
+    { value: 'classy-rounded', label: 'Classy rounded' }
+  ];
+  var qrCornerSquareTypes = window.qrCornerSquareTypes || [
+    { value: 'square', label: 'Square' },
+    { value: 'dot', label: 'Dot' },
+    { value: 'rounded', label: 'Rounded' },
+    { value: 'extra-rounded', label: 'Extra rounded' },
+    { value: 'dots', label: 'Dots' },
+    { value: 'classy', label: 'Classy' },
+    { value: 'classy-rounded', label: 'Classy rounded' }
+  ];
+  var qrCornerDotTypes = window.qrCornerDotTypes || [
+    { value: 'square', label: 'Square' },
+    { value: 'dot', label: 'Dot' },
+    { value: 'rounded', label: 'Rounded' },
+    { value: 'extra-rounded', label: 'Extra rounded' },
+    { value: 'classy', label: 'Classy' },
+    { value: 'classy-rounded', label: 'Classy rounded' }
+  ];
+
+  function getOptionValue(option) {
+    if (option && typeof option === 'object' && option.value !== undefined && option.value !== null) {
+      return String(option.value).trim();
+    }
+
+    return String(option === undefined || option === null ? '' : option).trim();
+  }
+
+  function normalizeMarginValue(value, fallback) {
+    var parsed = Number(value);
+    return Number.isFinite(parsed) && parsed >= 0 ? Math.round(parsed) : fallback;
+  }
+
+  function normalizeHexColorValue(value, fallback) {
+    var raw = String(value === undefined || value === null ? '' : value).trim();
+    return raw || fallback;
+  }
+
+  function normalizeBooleanValue(value, fallback) {
+    if (value === undefined || value === null || value === '') {
+      return Boolean(fallback);
+    }
+    if (typeof value === 'boolean') {
+      return value;
+    }
+    var text = String(value).trim().toLowerCase();
+    if (text === 'true' || text === '1' || text === 'yes' || text === 'on') {
+      return true;
+    }
+    if (text === 'false' || text === '0' || text === 'no' || text === 'off') {
+      return false;
+    }
+    return Boolean(value);
+  }
+
+  function normalizeOptionValue(value, options, fallback) {
+    var text = String(value === undefined || value === null ? '' : value).trim();
+    for (var index = 0; index < options.length; index += 1) {
+      if (getOptionValue(options[index]) === text) {
+        return text;
+      }
+    }
+
+    return fallback;
+  }
+
+  function normalizeRatioValue(value, fallback) {
+    var parsed = Number(value);
+    return Number.isFinite(parsed) && parsed >= 0 ? parsed : fallback;
+  }
+
+  function normalizeGradientTypeValue(value, fallback) {
+    var text = String(value === undefined || value === null ? '' : value).trim().toLowerCase();
+    return text === 'radial' ? 'radial' : 'linear';
+  }
+
+  function normalizeGradientRotationValue(value, fallback) {
+    var parsed = Number(value);
+    return Number.isFinite(parsed) ? Math.round(parsed) : fallback;
+  }
+
+  function normalizeColorModeValue(value, fallback) {
+    var text = String(value === undefined || value === null ? '' : value).trim().toLowerCase();
+    return text === 'gradient' ? 'gradient' : 'single';
+  }
+
+  function normalizeColorValue(value, fallback) {
+    return normalizeHexColorValue(value, fallback);
+  }
+
+  function renderSelectOptions(options, currentValue) {
+    return options.map(function (option) {
+      var optionValue = getOptionValue(option);
+      var optionLabel = option && typeof option === 'object' && option.label !== undefined ? option.label : optionValue;
+      return '<option value="' + escapeHtml(optionValue) + '"' + (String(optionValue) === String(currentValue) ? ' selected' : '') + '>' + escapeHtml(optionLabel) + '</option>';
+    }).join('');
+  }
+
+  function normalizeSvgMarkup(svg) {
+    var markup = String(svg || '').trim();
+    if (!markup || markup.charAt(0) !== '<') {
+      return markup;
+    }
+
+    return markup.replace(/^<svg\b([^>]*)>/i, function (_match, attrText) {
+      var attrs = String(attrText || '');
+      if (!/\bwidth\s*=\s*/i.test(attrs)) {
+        attrs += ' width="95%"';
+      }
+      if (!/\bheight\s*=\s*/i.test(attrs)) {
+        attrs += ' height="95%"';
+      }
+      if (!/\bpreserveAspectRatio\s*=\s*/i.test(attrs)) {
+        attrs += ' preserveAspectRatio="xMidYMid meet"';
+      }
+      if (!/\bstyle\s*=\s*/i.test(attrs)) {
+        attrs += ' style="display:block;width:95%;height:95%;"';
+      }
+      return '<svg' + attrs + '>';
+    });
+  }
+
+  function normalizeQrSvg(svg) {
+    return normalizeSvgMarkup(svg);
+  }
+
+  async function blobToText(blob) {
+    if (!blob) {
+      return '';
+    }
+
+    if (typeof blob.text === 'function') {
+      return blob.text();
+    }
+
+    if (typeof FileReader === 'function') {
+      return await new Promise(function (resolve, reject) {
+        var reader = new FileReader();
+        reader.onload = function () {
+          resolve(String(reader.result || ''));
+        };
+        reader.onerror = function () {
+          reject(reader.error || new Error('Failed to read blob.'));
+        };
+        reader.readAsText(blob);
+      });
+    }
+
+    return '';
+  }
+
+  window.defaultQrOptions = defaultQrOptions;
+  window.qrDotTypes = qrDotTypes;
+  window.qrCornerSquareTypes = qrCornerSquareTypes;
+  window.qrCornerDotTypes = qrCornerDotTypes;
+  window.normalizeMarginValue = normalizeMarginValue;
+  window.normalizeHexColorValue = normalizeHexColorValue;
+  window.normalizeBooleanValue = normalizeBooleanValue;
+  window.normalizeOptionValue = normalizeOptionValue;
+  window.normalizeRatioValue = normalizeRatioValue;
+  window.normalizeGradientTypeValue = normalizeGradientTypeValue;
+  window.normalizeGradientRotationValue = normalizeGradientRotationValue;
+  window.normalizeColorModeValue = normalizeColorModeValue;
+  window.normalizeColorValue = normalizeColorValue;
+  window.renderSelectOptions = renderSelectOptions;
+  window.normalizeSvgMarkup = normalizeSvgMarkup;
+  window.normalizeQrSvg = normalizeQrSvg;
+  window.blobToText = blobToText;
+  window.pendingByRegionId = window.pendingByRegionId || Object.create(null);
+
   window.webUiHelpers = {
     escapeHtml: escapeHtml,
     formatDashboardDate: formatDashboardDate,

src/web/public/vendor/qr-code-styling/qr-code-styling-loader.js

@@ -0,0 +1,21 @@
+(function () {
+  if (window.QRCodeStyling) {
+    return;
+  }
+
+  var request = new XMLHttpRequest();
+  request.open('GET', '/assets/vendor/qr-code-styling/qr-code-styling.js', false);
+  request.send(null);
+
+  if (request.status < 200 || request.status >= 300) {
+    throw new Error('Failed to load QR code styling library.');
+  }
+
+  var source = String(request.responseText || '');
+  var initialize = new Function(source + '\nreturn typeof QRCodeStyling !== \'undefined\' ? QRCodeStyling : window.QRCodeStyling;');
+  var exported = initialize.call(window);
+
+  if (exported && !window.QRCodeStyling) {
+    window.QRCodeStyling = exported;
+  }
+}());

src/web/routes/admin/account.js

@@ -8,6 +8,7 @@ module.exports = function registerAccountRoutes(app, deps) {
   const getAuditUserId = deps.getAuditUserId;
   const verifyPassword = deps.verifyPassword;
   const hashPassword = deps.hashPassword;
+  const validatePasswordStrength = deps.validatePasswordStrength;
   const createUserSession = deps.createUserSession;
   const setSessionCookie = deps.setSessionCookie;
 
@@ -52,8 +53,9 @@ module.exports = function registerAccountRoutes(app, deps) {
       if (!verifyPassword(currentPassword, user)) {
         return res.status(400).send('Current password is incorrect.');
       }
-      if (!newPassword || newPassword.length < 8) {
+      const passwordStrengthMessage = validatePasswordStrength(newPassword);
-        return res.status(400).send('New password must be at least 8 characters.');
+      if (passwordStrengthMessage) {
+        return res.status(400).send(passwordStrengthMessage);
       }
       if (newPassword !== confirmPassword) {
         return res.status(400).send('New passwords do not match.');
@@ -68,7 +70,7 @@ module.exports = function registerAccountRoutes(app, deps) {
 
       const token = await createUserSession(pool, user.id);
       setSessionCookie(res, token);
-      res.redirect('/dashboard?message=' + encodeURIComponent('Password updated.'));
+      res.redirect('/account?message=' + encodeURIComponent('Password updated.'));
     } catch (error) {
       next(error);
     }

src/web/routes/admin/content.js

@@ -29,6 +29,8 @@ module.exports = function registerContentRoutes(app, deps) {
   const requirePermission = deps.requirePermission;
   const hasAnyPermission = deps.hasAnyPermission;
   const { buildPagination } = require('#src/web/lib/pagination');
+  const { buildDuplicateSlideName, buildDuplicateSlide } = require('#src/web/routes/signage/slides/duplicate');
+  const { buildDuplicateCanvasSizeName, buildDuplicateCanvasSize } = require('#src/web/routes/signage/canvas-sizes/duplicate');
 
   const LIST_PAGE_SIZE = 25;
   const IMAGE_UPLOAD_MAX_BYTES = 100 * 1024 * 1024;
@@ -163,6 +165,11 @@ module.exports = function registerContentRoutes(app, deps) {
     return Number(rows[0] && rows[0].slide_count) || 0;
   }
 
+  async function fetchCanvasSizeUsageCount(canvasSizeId) {
+    const [rows] = await pool.query('SELECT COUNT(*) AS ref_count FROM c_templates WHERE canvas_size_id = ?', [canvasSizeId]);
+    return Number(rows[0] && rows[0].ref_count) || 0;
+  }
+
   async function fetchTemplateRegionUsage(template) {
     const [slides] = await pool.query('SELECT content_json FROM c_slides WHERE template_id = ?', [template.id]);
     const usage = new Set();
@@ -188,6 +195,7 @@ module.exports = function registerContentRoutes(app, deps) {
 
     return Array.from(usage);
   }
+    const { buildDuplicateTemplateName, buildDuplicateTemplate } = require('../signage/templates/duplicate');
 
   async function fetchSlidesByTemplateId(templateId) {
     const [slides] = await pool.query('SELECT id, thumbnail_path FROM c_slides WHERE template_id = ? ORDER BY id ASC', [templateId]);
@@ -201,6 +209,27 @@ module.exports = function registerContentRoutes(app, deps) {
       .filter((regionKey) => regionKey && !nextKeys.has(regionKey));
   }
 
+
+    app.get('/templates/:id/duplicate', requirePermission('templates.read'), requirePermission('templates.create'), async function (req, res, next) {
+      try {
+        const template = await common.fetchTemplateById(pool, Number(req.params.id));
+        if (!template) {
+          return res.status(404).send('Template not found');
+        }
+
+        const canvasSizes = await common.fetchCanvasSizesData(pool);
+        let duplicateName = buildDuplicateTemplateName(template.name);
+        let duplicateIndex = 2;
+        while (await common.fetchDuplicateName(pool, 'c_templates', duplicateName)) {
+          duplicateName = buildDuplicateTemplateName(template.name) + ' (' + duplicateIndex + ')';
+          duplicateIndex += 1;
+        }
+
+        res.send(pages.renderTemplateAddPage(buildDuplicateTemplate(template, duplicateName), req.query.message ? String(req.query.message) : 'Review the copied values and save when ready.', canvasSizes.canvasSizes, req.currentUser));
+      } catch (error) {
+        next(error);
+      }
+    });
   async function getTemplateRegionDeleteBlockMessage(template, nextRegions) {
     const removedRegionKeys = getRemovedTemplateRegionKeys(template && template.regions ? template.regions : [], nextRegions);
     if (!removedRegionKeys.length) {
@@ -306,6 +335,27 @@ module.exports = function registerContentRoutes(app, deps) {
     }
   });
 
+  app.get('/slides/:id/duplicate', requirePermission('slides.read'), requirePermission('slides.create'), async function (req, res, next) {
+    try {
+      const slide = await common.fetchSlideById(pool, Number(req.params.id));
+      if (!slide) {
+        return res.status(404).send('Slide not found');
+      }
+
+      const data = await fetchSlideFormData();
+      let duplicateName = buildDuplicateSlideName(slide.title);
+      let duplicateIndex = 2;
+      while (await common.fetchDuplicateName(pool, 'c_slides', duplicateName, null, 'title')) {
+        duplicateName = buildDuplicateSlideName(slide.title) + ' (' + duplicateIndex + ')';
+        duplicateIndex += 1;
+      }
+
+      res.send(pages.renderSlideAddPage(buildDuplicateSlide(slide, duplicateName), data, req.query.message ? String(req.query.message) : 'Review the copied values and save when ready.', req.currentUser));
+    } catch (error) {
+      next(error);
+    }
+  });
+
   app.get('/slides/:id/edit', requirePermission('slides.update'), async function (req, res, next) {
     try {
       const slide = await common.fetchSlideById(pool, Number(req.params.id));
@@ -342,12 +392,16 @@ module.exports = function registerContentRoutes(app, deps) {
     try {
       const uploadPaths = Array.isArray(req.body && req.body.uploadPaths)
         ? req.body.uploadPaths
-        : Array.isArray(req.body && req.body.paths)
+        : req.body && req.body.uploadPaths
-          ? req.body.paths
+          ? [req.body.uploadPaths]
           : [];
 
+      if (!uploadPaths.length) {
+        return res.status(400).json({ error: 'No upload paths were provided.' });
+      }
+
       await removeUnusedUploadFiles(pool, deps.uploadDir, uploadPaths);
-      res.json({ ok: true });
+      res.sendStatus(204);
     } catch (error) {
       next(error);
     }
@@ -501,8 +555,8 @@ module.exports = function registerContentRoutes(app, deps) {
       for (let i = 0; i < payload.regions.length; i += 1) {
         const region = payload.regions[i];
         await pool.query(
-          'INSERT INTO c_template_regions (template_id, region_key, region_type, label, lock_ratio, x, y, width, height, z_index, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
+          'INSERT INTO c_template_regions (template_id, region_key, region_type, label, lock_ratio, animation_json, x, y, width, height, z_index, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
-          [result.insertId, region.region_key, region.region_type, region.label, region.lock_ratio, region.x, region.y, region.width, region.height, region.z_index, actorId, actorId]
+          [result.insertId, region.region_key, region.region_type, region.label, region.lock_ratio, JSON.stringify(region.animation_json || {}), region.x, region.y, region.width, region.height, region.z_index, actorId, actorId]
         );
       }
       await syncPlaylistUploadsOnChange({
@@ -563,8 +617,8 @@ module.exports = function registerContentRoutes(app, deps) {
       for (let i = 0; i < payload.regions.length; i += 1) {
         const region = payload.regions[i];
         await pool.query(
-          'INSERT INTO c_template_regions (template_id, region_key, region_type, label, lock_ratio, x, y, width, height, z_index, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
+          'INSERT INTO c_template_regions (template_id, region_key, region_type, label, lock_ratio, animation_json, x, y, width, height, z_index, created_by, modified_by) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)',
-          [template.id, region.region_key, region.region_type, region.label, region.lock_ratio, region.x, region.y, region.width, region.height, region.z_index, actorId, actorId]
+          [template.id, region.region_key, region.region_type, region.label, region.lock_ratio, JSON.stringify(region.animation_json || {}), region.x, region.y, region.width, region.height, region.z_index, actorId, actorId]
         );
       }
       await syncPlaylistUploadsOnChange({
@@ -639,6 +693,26 @@ module.exports = function registerContentRoutes(app, deps) {
     res.send(pages.renderCanvasSizeAddPage(null, req.query.message ? String(req.query.message) : '', req.currentUser));
   });
 
+  app.get('/canvas-sizes/:id/duplicate', requirePermission('canvas-sizes.read'), requirePermission('canvas-sizes.create'), async function (req, res, next) {
+    try {
+      const canvasSize = await common.fetchCanvasSizeById(pool, Number(req.params.id));
+      if (!canvasSize) {
+        return res.status(404).send('Canvas size not found');
+      }
+
+      let duplicateName = buildDuplicateCanvasSizeName(canvasSize.name);
+      let duplicateIndex = 2;
+      while (await common.fetchDuplicateName(pool, 'c_canvas_sizes', duplicateName)) {
+        duplicateName = buildDuplicateCanvasSizeName(canvasSize.name) + ' (' + duplicateIndex + ')';
+        duplicateIndex += 1;
+      }
+
+      res.send(pages.renderCanvasSizeAddPage(buildDuplicateCanvasSize(canvasSize, duplicateName), req.query.message ? String(req.query.message) : 'Review the copied values and save when ready.', req.currentUser));
+    } catch (error) {
+      next(error);
+    }
+  });
+
   app.post('/canvas-sizes', requirePermission('canvas-sizes.create'), async function (req, res, next) {
     try {
       const payload = common.buildCanvasSizePayload(req, null);
@@ -646,7 +720,7 @@ module.exports = function registerContentRoutes(app, deps) {
         return res.redirect('/canvas-sizes/new?message=' + encodeURIComponent('A canvas size with that name already exists.'));
       }
       if (await canvasSizeExists(payload.width, payload.height)) {
-        return res.redirect('/canvas-sizes/new?message=' + encodeURIComponent('That canvas size already exists.'));
+        return res.status(400).send('That canvas size already exists.');
       }
       const actorId = getAuditUserId(req);
       const [result] = await pool.query('INSERT INTO c_canvas_sizes (name, width, height, created_by, modified_by) VALUES (?, ?, ?, ?, ?)', [payload.name, payload.width, payload.height, actorId, actorId]);
@@ -666,8 +740,7 @@ module.exports = function registerContentRoutes(app, deps) {
       if (!canvasSize) {
         return res.status(404).send('Canvas size not found');
       }
-      const [rows] = await pool.query('SELECT COUNT(*) AS ref_count FROM c_templates WHERE canvas_size_id = ?', [canvasSize.id]);
+      canvasSize.inUse = (await fetchCanvasSizeUsageCount(canvasSize.id)) > 0;
-      canvasSize.inUse = Number(rows[0] && rows[0].ref_count) > 0;
       res.send(pages.renderCanvasSizeEditPage(canvasSize, null, req.query.message ? String(req.query.message) : '', req.currentUser));
     } catch (error) {
       next(error);
@@ -680,12 +753,16 @@ module.exports = function registerContentRoutes(app, deps) {
       if (!canvasSize) {
         return res.status(404).send('Canvas size not found');
       }
+      canvasSize.inUse = (await fetchCanvasSizeUsageCount(canvasSize.id)) > 0;
       const payload = common.buildCanvasSizePayload(req, canvasSize);
+      if (canvasSize.inUse && (payload.width !== Number(canvasSize.width) || payload.height !== Number(canvasSize.height))) {
+        return res.status(400).send('This canvas size is still used by one or more templates, so its dimensions cannot be changed.');
+      }
       if (await common.fetchDuplicateName(pool, 'c_canvas_sizes', payload.name, canvasSize.id)) {
         return res.redirect('/canvas-sizes/' + canvasSize.id + '/edit?message=' + encodeURIComponent('A canvas size with that name already exists.'));
       }
       if (await canvasSizeExists(payload.width, payload.height, canvasSize.id)) {
-        return res.redirect('/canvas-sizes/' + canvasSize.id + '/edit?message=' + encodeURIComponent('That canvas size already exists.'));
+        return res.status(400).send('That canvas size already exists.');
       }
       await pool.query('UPDATE c_canvas_sizes SET name = ?, width = ?, height = ?, modified_by = ? WHERE id = ?', [payload.name, payload.width, payload.height, getAuditUserId(req), canvasSize.id]);
       redirectAfterSave(req, res, '/canvas-sizes', {

src/web/routes/admin/manage.js

@@ -14,6 +14,18 @@ module.exports = function registerManageRoutes(app, deps) {
   const PLAYER_PUBLIC_BASE_URL = deps.playerPublicBaseUrl;
   const requirePermission = deps.requirePermission;
 
+  const SCREEN_NAME_MAX_LENGTH = 255;
+  const SCREEN_SLUG_MAX_LENGTH = 255;
+
+  function readLimitedText(value, maxLength) {
+    const text = String(value || '').trim();
+    const limit = Number(maxLength);
+    if (!Number.isFinite(limit) || limit < 1 || text.length <= limit) {
+      return text;
+    }
+    return text.slice(0, limit);
+  }
+
   async function fetchAllScreenSlugs() {
     const [rows] = await pool.query('SELECT slug FROM d_screens ORDER BY slug ASC');
     return (rows || [])
@@ -85,14 +97,18 @@ module.exports = function registerManageRoutes(app, deps) {
 
   app.post('/screens', requirePermission('screens.create'), async function (req, res, next) {
     try {
-      const name = String(req.body.name || '').trim();
+      const name = typeof common.validateMaxLength === 'function'
+        ? common.validateMaxLength(req.body.name || '', SCREEN_NAME_MAX_LENGTH, 'Screen name')
+        : readLimitedText(req.body.name || '', 255);
       if (!name) {
         return res.status(400).send('Screen name is required.');
       }
       if (await common.fetchDuplicateName(pool, 'd_screens', name)) {
         return res.status(400).send('A screen with that name already exists.');
       }
-      const slugInput = String(req.body.slug || '').trim();
+      const slugInput = typeof common.validateMaxLength === 'function'
+        ? common.validateMaxLength(req.body.slug || '', SCREEN_SLUG_MAX_LENGTH, 'Screen URL')
+        : readLimitedText(req.body.slug || '', 255);
       const playlistId = req.body.playlist_id ? Number(req.body.playlist_id) : null;
       const slug = await common.uniqueScreenSlug(pool, common.slugify(slugInput || name));
       const actorId = getAuditUserId(req);
@@ -109,7 +125,9 @@ module.exports = function registerManageRoutes(app, deps) {
 
   app.post('/screens/:id', requirePermission('screens.update'), async function (req, res, next) {
     try {
-      const name = String(req.body.name || '').trim();
+      const name = typeof common.validateMaxLength === 'function'
+        ? common.validateMaxLength(req.body.name || '', SCREEN_NAME_MAX_LENGTH, 'Screen name')
+        : readLimitedText(req.body.name || '', 255);
       if (!name) {
         return res.status(400).send('Screen name is required.');
       }
@@ -120,7 +138,9 @@ module.exports = function registerManageRoutes(app, deps) {
       if (await common.fetchDuplicateName(pool, 'd_screens', name, screen.id)) {
         return res.status(400).send('A screen with that name already exists.');
       }
-      const slugInput = String(req.body.slug || '').trim();
+      const slugInput = typeof common.validateMaxLength === 'function'
+        ? common.validateMaxLength(req.body.slug || '', SCREEN_SLUG_MAX_LENGTH, 'Screen URL')
+        : readLimitedText(req.body.slug || '', 255);
       const playlistId = req.body.playlist_id ? Number(req.body.playlist_id) : null;
       const previousPlaylistId = screen.playlist_id;
       const slug = await common.uniqueScreenSlug(pool, common.slugify(slugInput || name), screen.id);

src/web/routes/admin/playlists.js

@@ -295,7 +295,7 @@ module.exports = function registerPlaylistRoutes(app, deps) {
       };
       await savePlaylistItems(connection, playlist, req.body, actorId, { updatePlaylist: false });
       await connection.commit();
-      redirectAfterSave(req, res, '/playlists?edit=' + result.insertId, {
+      redirectAfterSave(req, res, '/playlists/' + result.insertId + '/edit', {
         closeUrl: '/playlists',
         newUrl: '/playlists/new',
         message: 'Playlist created.'
@@ -352,7 +352,7 @@ module.exports = function registerPlaylistRoutes(app, deps) {
       await connection.commit();
       await notifyPlayerScreens(saveResult.affectedScreens, 'refresh');
       await broadcastDashboardState();
-      redirectAfterSave(req, res, '/playlists?edit=' + playlist.id, {
+      redirectAfterSave(req, res, '/playlists/' + playlist.id + '/edit', {
         closeUrl: '/playlists',
         newUrl: '/playlists/new',
         message: 'Playlist updated.'

src/web/routes/admin/rbac.js

@@ -11,12 +11,17 @@
 	const normalizePermissionKeys = deps.normalizePermissionKeys;
 	const { buildPagination } = require('../../lib/pagination');
 	const requirePermission = deps.requirePermission;
+	const { buildDuplicateRoleName, buildDuplicateRole } = require('../settings/rbac/duplicate');
+
+	const ROLE_NAME_MAX_LENGTH = 255;
+	const ROLE_DESCRIPTION_MAX_LENGTH = 255;
+	const ROLE_KEY_MAX_LENGTH = 100;
 
 	const LIST_PAGE_SIZE = 25;
 
 	function slugifyRoleKey(name) {
 		const value = String(name || '').trim().toLowerCase();
-		const slug = value.replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
+		const slug = value.replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '').slice(0, ROLE_KEY_MAX_LENGTH);
 		return slug || 'role';
 	}
 
@@ -65,10 +70,12 @@
 		return (Array.isArray(permissionRows) ? permissionRows : []).map(function (permission) {
 			const definition = permissionDefinitions.get(String(permission.permission_key || '').trim()) || null;
 			return Object.assign({}, permission, {
-				resourceKey: definition ? definition.sectionKey : String(permission.section_name || '').trim().toLowerCase().replace(/[^a-z0-9]+/g, '-'),
+				resourceKey: definition ? definition.resourceKey : String(permission.section_name || '').trim().toLowerCase().replace(/[^a-z0-9]+/g, '-'),
-				resourceName: definition ? definition.name : permission.section_name,
+				resourceName: definition ? definition.resourceName : permission.section_name,
 				categoryName: definition ? definition.sectionName : permission.section_name,
 				sectionOrder: definition ? definition.sectionOrder : 999,
+				resourceOrder: definition ? Number(definition.resourceOrder) || 999 : 999,
+				permissionOrder: definition ? Number(definition.permissionOrder) || 999 : 999,
 				actionKey: definition ? definition.actionKey : 'read',
 				actionLabel: definition ? definition.actionName : getActionLabel(permission.actionKey),
 				isSelected: selectedKeys.has(String(permission.permission_key || '').trim())
@@ -107,9 +114,8 @@
 
 		groups.forEach(function (group) {
 			group.permissions.sort(function (left, right) {
-				const actionOrder = { create: 1, read: 2, update: 3, edit: 3, delete: 4, allow: 5 };
+				const leftOrder = Number(left.permissionOrder) || 999;
-				const leftOrder = actionOrder[String(left.actionKey || '').trim()] || 99;
+				const rightOrder = Number(right.permissionOrder) || 999;
-				const rightOrder = actionOrder[String(right.actionKey || '').trim()] || 99;
 				if (leftOrder !== rightOrder) {
 					return leftOrder - rightOrder;
 				}
@@ -136,8 +142,8 @@
 		});
 		return {
 			formValues: {
-				name: String(formValues && formValues.name || '').trim(),
+				name: common.validateMaxLength(formValues && formValues.name || '', ROLE_NAME_MAX_LENGTH, 'Role name'),
-				description: String(formValues && formValues.description || '').trim()
+				description: common.validateMaxLength(formValues && formValues.description || '', ROLE_DESCRIPTION_MAX_LENGTH, 'Role description')
 			},
 			permissionGroups: buildPermissionGroups(mapPermissionsForView(permissionRows, selectedPermissionKeys)),
 			users: mapUsersForView(data.users, selectedUserIds),
@@ -197,10 +203,39 @@
 		});
 	});
 
+	app.get('/rbac/:id/duplicate', requirePermission('rbac.read'), requirePermission('rbac.create'), async function (req, res, next) {
+		try {
+			const roleId = Number(req.params.id);
+			if (!Number.isInteger(roleId) || roleId <= 0) {
+				return res.status(400).send('Invalid role.');
+			}
+
+			const role = await rbacData.fetchRoleById(pool, roleId);
+			if (!role) {
+				return res.status(404).send('Role not found.');
+			}
+
+			const page = Math.max(1, Math.floor(Number(req.query.page) || 1));
+			const search = common.getSearchQuery(req);
+			const sort = common.getSortQuery(req);
+			const direction = common.getSortDirectionQuery(req);
+			const currentUserId = req.currentUser ? Number(req.currentUser.id) : null;
+			const permissionKeys = await rbacData.fetchRolePermissionKeys(pool, roleId);
+			const viewModel = await buildRoleCreateViewModel({
+				name: buildDuplicateRoleName(role.name),
+				description: buildDuplicateRole(role).description
+			}, permissionKeys, [], page, search, sort, direction, currentUserId);
+
+			res.send(pages.renderRbacAddPage('Review the copied values and save when ready.', req.currentUser, viewModel.formValues, viewModel.permissionGroups, viewModel.users, viewModel.pagination, 'primary'));
+		} catch (error) {
+			next(error);
+		}
+	});
+
 	app.post('/rbac', requirePermission('rbac.create'), async function (req, res, next) {
 		try {
-			const name = String(req.body.name || '').trim();
+			const name = common.validateMaxLength(req.body.name || '', ROLE_NAME_MAX_LENGTH, 'Role name');
-			const description = String(req.body.description || '').trim();
+			const description = common.validateMaxLength(req.body.description || '', ROLE_DESCRIPTION_MAX_LENGTH, 'Role description');
 			const selectedUserIds = Object.prototype.hasOwnProperty.call(req.body || {}, 'users_present')
 				? readArrayField(req.body, ['user_ids[]', 'user_ids'])
 				: [];
@@ -311,8 +346,8 @@
 				return res.status(404).send('Role not found.');
 			}
 
-			const name = String(req.body.name || '').trim();
+			const name = common.validateMaxLength(req.body.name || '', ROLE_NAME_MAX_LENGTH, 'Role name');
-			const description = String(req.body.description || '').trim();
+			const description = common.validateMaxLength(req.body.description || '', ROLE_DESCRIPTION_MAX_LENGTH, 'Role description');
 			const shouldSyncPermissions = Object.prototype.hasOwnProperty.call(req.body || {}, 'permissions_present');
 			const shouldSyncUsers = Object.prototype.hasOwnProperty.call(req.body || {}, 'users_present');
 			const selectedPermissionKeys = shouldSyncPermissions

src/web/routes/admin/users.js

@@ -7,10 +7,15 @@
 	const formatDashboardDate = deps.formatDashboardDate;
 	const getAuditUserId = deps.getAuditUserId;
 	const hashPassword = deps.hashPassword;
+	const validatePasswordStrength = deps.validatePasswordStrength;
 	const readArrayField = deps.readArrayField;
 	const rbacData = deps.rbacData;
 	const { buildPagination } = require('../../lib/pagination');
 	const requirePermission = deps.requirePermission;
+	const { buildDuplicateUserName, buildDuplicateUser } = require('../settings/users/duplicate');
+
+	const USER_NAME_MAX_LENGTH = 255;
+	const USER_USERNAME_MAX_LENGTH = 255;
 
 	const LIST_PAGE_SIZE = 25;
 
@@ -43,10 +48,6 @@
 			return Number.isInteger(roleId) && roleId > 0;
 		})));
 
-		if (!normalizedRoleIds.length) {
-			return { ok: false, message: 'Select at least one role.' };
-		}
-
 		if (normalizedRoleIds.some(function (roleId) {
 			return !validRoleIds.has(roleId);
 		})) {
@@ -88,6 +89,38 @@
 		});
 	});
 
+	app.get('/users/:id/duplicate', requirePermission('users.read'), requirePermission('users.create'), async function (req, res, next) {
+		try {
+			const userId = Number(req.params.id);
+			if (!Number.isInteger(userId) || userId <= 0) {
+				return res.status(400).send('Invalid user.');
+			}
+
+			const user = await rbacData.fetchUserWithRoles(pool, userId);
+			if (!user) {
+				return res.status(404).send('User not found.');
+			}
+			if (Number(req.currentUser.id) === userId) {
+				return res.redirect('/users?message=' + encodeURIComponent('Use Add user to create another login for yourself.'));
+			}
+
+			const roles = await fetchRoleOptions();
+			const duplicateUser = buildDuplicateUser(user, buildDuplicateUserName(user.name));
+
+			res.send(pages.renderUsersAddPage(
+				'Review the copied values and save when ready.',
+				req.currentUser,
+				mapRolesForForm(roles, user.roleIds),
+				{
+					name: duplicateUser.name
+				},
+				'primary'
+			));
+		} catch (error) {
+			next(error);
+		}
+	});
+
 	app.get('/users/:id/edit', requirePermission('users.update'), async function (req, res, next) {
 		try {
 			const userId = Number(req.params.id);
@@ -122,10 +155,11 @@
 	app.post('/users', requirePermission('users.create'), async function (req, res, next) {
 		const connection = await pool.getConnection();
 		try {
-			const name = String(req.body.name || '').trim();
+			const name = common.validateMaxLength(req.body.name || '', USER_NAME_MAX_LENGTH, 'Name');
-			const username = String(req.body.username || user.username || '').trim();
+			const username = common.validateMaxLength(req.body.username || '', USER_USERNAME_MAX_LENGTH, 'Username');
 			const password = String(req.body.password || '');
 			const confirmPassword = String(req.body.confirm_password || '');
+			const saveAction = String(req.body.save_action || req.body.action || '').trim().toLowerCase();
 			const selectedRoleIds = readArrayField(req.body, ['role_ids[]', 'role_ids']);
 			const roleCheck = await validateRoleIds(selectedRoleIds);
 			const formValues = {
@@ -144,8 +178,9 @@
 			if (!username) {
 				return renderValidationError('Username is required.');
 			}
-			if (!password || password.length < 8) {
+			const passwordStrengthMessage = validatePasswordStrength(password);
-				return renderValidationError('Password must be at least 8 characters.');
+			if (passwordStrengthMessage) {
+				return renderValidationError(passwordStrengthMessage);
 			}
 			if (password !== confirmPassword) {
 				return renderValidationError('Passwords do not match.');
@@ -171,6 +206,9 @@
 			);
 			await rbacData.syncUserRoles(connection, result.insertId, roleCheck.roleIds);
 			await connection.commit();
+			if (saveAction === 'new') {
+				return res.redirect('/users/new?message=' + encodeURIComponent('User created.'));
+			}
 			res.redirect('/users/' + result.insertId + '/edit?message=' + encodeURIComponent('User created.'));
 		} catch (error) {
 			try {
@@ -216,11 +254,12 @@
 		const connection = await pool.getConnection();
 		try {
 			const userId = Number(req.params.id);
-			const name = String(req.body.name || '').trim();
+			const name = common.validateMaxLength(req.body.name || '', USER_NAME_MAX_LENGTH, 'Name');
 			const selectedRoleIds = readArrayField(req.body, ['role_ids[]', 'role_ids']);
 			const password = String(req.body.password || '');
 			const confirmPassword = String(req.body.confirm_password || '');
 			const shouldUpdatePassword = Boolean(password || confirmPassword);
+			const saveAction = String(req.body.save_action || req.body.action || '').trim().toLowerCase();
 
 			if (!Number.isInteger(userId) || userId <= 0) {
 				return res.status(400).send('Invalid user.');
@@ -234,7 +273,7 @@
 				return res.status(404).send('User not found.');
 			}
 
-			const username = String(req.body.username || user.username || '').trim();
+			const username = common.validateMaxLength(req.body.username || user.username || '', USER_USERNAME_MAX_LENGTH, 'Username');
 
 			const [countRows] = await pool.query('SELECT COUNT(*) AS user_count FROM a_users');
 			const canDelete = !countRows.length || Number(countRows[0].user_count) > 1;
@@ -256,8 +295,11 @@
 			if (!username) {
 				return renderValidationError('Username is required.');
 			}
-			if (shouldUpdatePassword && (!password || password.length < 8)) {
+			if (shouldUpdatePassword) {
-				return renderValidationError('Password must be at least 8 characters.');
+				const passwordStrengthMessage = validatePasswordStrength(password);
+				if (passwordStrengthMessage) {
+					return renderValidationError(passwordStrengthMessage);
+				}
 			}
 			if (shouldUpdatePassword && password !== confirmPassword) {
 				return renderValidationError('Passwords do not match.');
@@ -290,6 +332,9 @@
 				await connection.query('DELETE FROM a_sessions WHERE user_id = ?', [userId]);
 			}
 			await connection.commit();
+			if (saveAction === 'new') {
+				return res.redirect('/users/new?message=' + encodeURIComponent('User updated.'));
+			}
 			res.redirect('/users?message=' + encodeURIComponent('User updated.'));
 		} catch (error) {
 			try {
@@ -308,6 +353,7 @@
 			const userId = Number(req.params.id);
 			const password = String(req.body.password || '');
 			const confirmPassword = String(req.body.confirm_password || '');
+			const editUrl = '/users/' + userId + '/edit';
 
 			if (!Number.isInteger(userId) || userId <= 0) {
 				return res.status(400).send('Invalid user.');
@@ -315,11 +361,12 @@
 			if (Number(req.currentUser.id) === userId) {
 				return res.redirect('/account?message=' + encodeURIComponent('Use My Account to change your own password.'));
 			}
-			if (!password || password.length < 8) {
+			const passwordStrengthMessage = validatePasswordStrength(password);
-				return res.redirect('/users?message=' + encodeURIComponent('Password must be at least 8 characters.'));
+			if (passwordStrengthMessage) {
+				return res.redirect(editUrl + '?message=' + encodeURIComponent(passwordStrengthMessage));
 			}
 			if (password !== confirmPassword) {
-				return res.redirect('/users?message=' + encodeURIComponent('Passwords do not match.'));
+				return res.redirect(editUrl + '?message=' + encodeURIComponent('Passwords do not match.'));
 			}
 
 			const [rows] = await pool.query('SELECT id FROM a_users WHERE id = ? LIMIT 1', [userId]);
@@ -333,7 +380,7 @@
 				[passwordRecord.hash, passwordRecord.salt, passwordRecord.iterations, getAuditUserId(req), userId]
 			);
 			await pool.query('DELETE FROM a_sessions WHERE user_id = ?', [userId]);
-			res.redirect('/users?message=' + encodeURIComponent('Password updated.'));
+			res.redirect(editUrl + '?message=' + encodeURIComponent('Password updated.'));
 		} catch (error) {
 			next(error);
 		}

src/web/routes/auth/index.js

@@ -1,5 +1,7 @@
 // Authentication route registration for the web app.
 
+const { normalizeReturnToPath, getRequestOrigin } = require('../../lib/auth/session');
+
 module.exports = function registerAuthRoutes(app, deps) {
   const pool = deps.pool;
   const pages = deps.pages;
@@ -13,19 +15,28 @@ module.exports = function registerAuthRoutes(app, deps) {
   const verifyPassword = deps.verifyPassword;
   const sessionCookieName = deps.sessionCookieName;
 
+  function getReturnTo(req) {
+    return normalizeReturnToPath(req && (req.query && req.query.returnTo || req.body && req.body.returnTo), getRequestOrigin(req));
+  }
+
+  function buildLoginRedirect(returnTo) {
+    return returnTo ? '/login?returnTo=' + encodeURIComponent(returnTo) : '/login';
+  }
+
   app.get('/', function (req, res) {
     res.redirect(req.currentUser ? '/dashboard' : '/login');
   });
 
   app.get('/login', function (req, res) {
+    const returnTo = getReturnTo(req);
     if (req.currentUser) {
-      return res.redirect('/dashboard');
+      return res.redirect(returnTo || '/dashboard');
     }
 
     const message = typeof consumeAuthMessageCookie === 'function'
       ? consumeAuthMessageCookie(req, res)
       : (req.query.message ? String(req.query.message) : '');
-    res.send(pages.renderLoginPage(message));
+    res.send(pages.renderLoginPage(message, returnTo));
   });
 
   app.post('/login', async function (req, res, next) {
@@ -39,17 +50,19 @@ module.exports = function registerAuthRoutes(app, deps) {
       const [rows] = await pool.query('SELECT id, name, username, password_hash, password_salt, password_iterations FROM a_users WHERE username = ? LIMIT 1', [username]);
       const user = rows[0] || null;
       if (!user || !verifyPassword(password, user)) {
+        const returnTo = getReturnTo(req);
         if (typeof setAuthMessageCookie === 'function') {
           setAuthMessageCookie(res, 'Invalid username or password.');
-          return res.redirect('/login');
+          return res.redirect(buildLoginRedirect(returnTo));
         }
 
-        return res.status(401).send(pages.renderLoginPage('Invalid username or password.'));
+        return res.status(401).send(pages.renderLoginPage('Invalid username or password.', returnTo));
       }
 
+      const returnTo = getReturnTo(req);
       const token = await createUserSession(pool, user.id);
       setSessionCookie(res, token);
-      res.redirect('/dashboard');
+      res.redirect(returnTo || '/dashboard');
     } catch (error) {
       next(error);
     }

src/web/routes/auth/login.js

@@ -2,12 +2,13 @@
 
 const { renderView } = require('../../view');
 
-module.exports = function renderLoginPage(message) {
+module.exports = function renderLoginPage(message, returnTo) {
   return renderView('auth/login', {
     title: 'Sign in',
     authShell: true,
     bodyClass: 'login-page-body',
     message: message || '',
+    returnTo: returnTo || '',
     messageVariant: 'warning'
   });
 };

src/web/routes/data-sources/api-sources/duplicate.js

@@ -0,0 +1,31 @@
+// API source duplication helpers.
+
+function buildDuplicateApiSourceName(sourceName) {
+  const baseName = 'Copy of ' + String(sourceName || '').trim();
+  return baseName;
+}
+
+function buildDuplicateApiSource(apiSource, duplicateName) {
+  return Object.assign({}, apiSource, {
+    id: null,
+    name: duplicateName,
+    apiUrl: apiSource.api_url || '',
+    lastPulledAt: null,
+    lastPullError: '',
+    lastResponseStatus: null,
+    lastResponseContentType: '',
+    lastResponseJson: '',
+    authMethod: apiSource.auth_method || 'none',
+    authUsername: apiSource.auth_username || '',
+    authPassword: apiSource.auth_password || '',
+    authBearerToken: apiSource.auth_bearer_token || '',
+    authHeaderName: apiSource.auth_header_name || 'X-API-Key',
+    authHeaderValue: apiSource.auth_header_value || '',
+    itemsPath: apiSource.items_path || ''
+  });
+}
+
+module.exports = {
+  buildDuplicateApiSourceName,
+  buildDuplicateApiSource
+};

src/web/routes/data-sources/api-sources/form-view-model.js

@@ -35,8 +35,9 @@ function buildApiSourceFormViewModel(apiSource, message, currentUser, options, i
     inUse: Boolean(viewApiSource.inUse),
     lastResponseJson: viewOptions.lastResponseJson || viewApiSource.lastResponseJson || '',
     lastPullError: viewOptions.lastPullError || viewApiSource.lastPullError || '',
+    messageVariant: viewOptions.messageVariant || '',
     isEdit: Boolean(isEdit),
-    showSaveSecondaryActions: Boolean(isEdit),
+    showSaveSecondaryActions: true,
     deleteDisabled: !isEdit || Boolean(viewApiSource.inUse),
     formAction: isEdit && viewApiSource.id ? '/data-sources/api-sources/' + viewApiSource.id : '/data-sources/api-sources',
     formAttrs: isEdit && viewApiSource.id ? 'data-async-save data-async-save-refresh-target="#api-source-response-panel" data-async-save-refresh-state-url="/data-sources/api-sources/' + viewApiSource.id + '/state" data-async-save-close-url="/data-sources/api-sources" data-async-save-new-url="/data-sources/api-sources/new"' : 'data-async-save data-async-save-close-url="/data-sources/api-sources" data-async-save-new-redirect="response-url" data-async-save-new-url="/data-sources/api-sources/new"',

src/web/routes/data-sources/api-sources/routes.js

@@ -4,6 +4,7 @@ const { buildPagination } = require('../../../lib/pagination');
 const renderApiSourcesPage = require('./list');
 const renderApiSourceAddPage = require('./add');
 const renderApiSourceEditPage = require('./edit');
+const { buildDuplicateApiSourceName, buildDuplicateApiSource } = require('./duplicate');
 
 function toIsoTimestamp(value) {
   if (!value) {
@@ -185,6 +186,29 @@ module.exports = function registerApiSourceRoutes(app, deps) {
     }
   });
 
+  app.get('/data-sources/api-sources/:id/duplicate', requirePermission('api-sources.read'), requirePermission('api-sources.create'), async function (req, res, next) {
+    try {
+      const apiSource = await common.fetchApiSourceById(pool, Number(req.params.id));
+      if (!apiSource) {
+        return res.status(404).send('API source not found');
+      }
+
+      let duplicateName = buildDuplicateApiSourceName(apiSource.name);
+      let duplicateIndex = 2;
+      while (await common.fetchDuplicateName(pool, 'i_api_sources', duplicateName)) {
+        duplicateName = buildDuplicateApiSourceName(apiSource.name) + ' (' + duplicateIndex + ')';
+        duplicateIndex += 1;
+      }
+
+      res.send(renderApiSourceAddPage(buildDuplicateApiSource(apiSource, duplicateName), req.query.message ? String(req.query.message) : 'Review the copied values and save when ready.', req.currentUser, {
+        messageVariant: 'info',
+        showSaveSecondaryActions: true
+      }));
+    } catch (error) {
+      next(error);
+    }
+  });
+
   app.get('/data-sources/api-sources/:id/state', requirePermission('api-sources.update'), function (req, res, next) {
     sendRefreshTaskState(req, res, dataSourceTasks, Number(req.params.id)).catch(next);
   });

src/web/routes/data-sources/rss-feeds/duplicate.js

@@ -0,0 +1,26 @@
+// RSS feed duplication helpers.
+
+function buildDuplicateRssFeedName(feedName) {
+  const baseName = 'Copy of ' + String(feedName || '').trim();
+  return baseName;
+}
+
+function buildDuplicateRssFeed(rssFeed, duplicateName) {
+  return Object.assign({}, rssFeed, {
+    id: null,
+    name: duplicateName,
+    feedUrl: rssFeed.feed_url || '',
+    lastPulledAt: null,
+    pullError: '',
+    pulledItems: [],
+    updateIntervalValue: rssFeed.update_interval_value,
+    updateIntervalUnit: rssFeed.update_interval_unit || 'minutes',
+    itemLimit: rssFeed.item_limit,
+    feedUrlValue: rssFeed.feed_url || ''
+  });
+}
+
+module.exports = {
+  buildDuplicateRssFeedName,
+  buildDuplicateRssFeed
+};

src/web/routes/data-sources/rss-feeds/form-view-model.js

@@ -24,8 +24,9 @@ function buildRssFeedFormViewModel(rssFeed, message, currentUser, options, isEdi
     inUse: Boolean(viewRssFeed.inUse),
     pulledItems: viewOptions.pulledItems || viewRssFeed.pulledItems || [],
     pullError: viewOptions.pullError || viewRssFeed.pullError || '',
+    messageVariant: viewOptions.messageVariant || '',
     isEdit: Boolean(isEdit),
-    showSaveSecondaryActions: Boolean(isEdit),
+    showSaveSecondaryActions: true,
     deleteDisabled: !isEdit || Boolean(viewRssFeed.inUse),
     formAction: isEdit && viewRssFeed.id ? '/data-sources/rss-feeds/' + viewRssFeed.id : '/data-sources/rss-feeds',
     formAttrs: isEdit && viewRssFeed.id ? 'data-async-save data-async-save-refresh-target="#rss-feed-items-panel" data-async-save-refresh-state-url="/data-sources/rss-feeds/' + viewRssFeed.id + '/state" data-async-save-close-url="/data-sources/rss-feeds" data-async-save-new-url="/data-sources/rss-feeds/new"' : 'data-async-save data-async-save-close-url="/data-sources/rss-feeds" data-async-save-new-redirect="response-url" data-async-save-new-url="/data-sources/rss-feeds/new"',

src/web/routes/data-sources/rss-feeds/routes.js

@@ -4,6 +4,7 @@ const { buildPagination } = require('../../../lib/pagination');
 const renderRssFeedsPage = require('./list');
 const renderRssFeedAddPage = require('./add');
 const renderRssFeedEditPage = require('./edit');
+const { buildDuplicateRssFeedName, buildDuplicateRssFeed } = require('./duplicate');
 
 async function getDataSourceUsageMaps(pool, common) {
   const [slides] = await pool.query('SELECT content_json FROM c_slides WHERE content_json IS NOT NULL');
@@ -155,6 +156,29 @@ module.exports = function registerRssFeedRoutes(app, deps) {
     }
   });
 
+  app.get('/data-sources/rss-feeds/:id/duplicate', requirePermission('rss-feeds.read'), requirePermission('rss-feeds.create'), async function (req, res, next) {
+    try {
+      const rssFeed = await common.fetchRssFeedById(pool, Number(req.params.id));
+      if (!rssFeed) {
+        return res.status(404).send('RSS feed not found');
+      }
+
+      let duplicateName = buildDuplicateRssFeedName(rssFeed.name);
+      let duplicateIndex = 2;
+      while (await common.fetchDuplicateName(pool, 'i_rss_feeds', duplicateName)) {
+        duplicateName = buildDuplicateRssFeedName(rssFeed.name) + ' (' + duplicateIndex + ')';
+        duplicateIndex += 1;
+      }
+
+      res.send(renderRssFeedAddPage(buildDuplicateRssFeed(rssFeed, duplicateName), req.query.message ? String(req.query.message) : 'Review the copied values and save when ready.', req.currentUser, {
+        messageVariant: 'info',
+        showSaveSecondaryActions: true
+      }));
+    } catch (error) {
+      next(error);
+    }
+  });
+
   app.get('/data-sources/rss-feeds/:id/state', requirePermission('rss-feeds.update'), function (req, res, next) {
     sendRefreshTaskState(req, res, dataSourceTasks, Number(req.params.id)).catch(next);
   });

src/web/routes/data-sources/timetables/add.js

@@ -3,6 +3,6 @@
 const { renderView } = require('../../../view');
 const { buildTimetableGroupFormViewModel } = require('./form-view-model');
 
-module.exports = function renderTimetableGroupAddPage(timetableGroup, timetableEntries, message, currentUser) {
+module.exports = function renderTimetableGroupAddPage(timetableGroup, timetableEntries, message, currentUser, options) {
-  return renderView('data-sources/timetables/form', buildTimetableGroupFormViewModel(timetableGroup, timetableEntries, message, currentUser, false));
+  return renderView('data-sources/timetables/form', buildTimetableGroupFormViewModel(timetableGroup, timetableEntries, message, currentUser, false, options));
 };

src/web/routes/data-sources/timetables/duplicate.js

@@ -0,0 +1,27 @@
+// Timetable duplication helpers.
+
+function buildDuplicateTimetableGroupName(groupName) {
+  const baseName = 'Copy of ' + String(groupName || '').trim();
+  return baseName;
+}
+
+function buildDuplicateTimetableGroup(timetableGroup, duplicateName) {
+  return Object.assign({}, timetableGroup, {
+    id: null,
+    name: duplicateName,
+    shortDescription: timetableGroup.short_description || ''
+  });
+}
+
+function buildDuplicateTimetableEntry(timetableEntry) {
+  return Object.assign({}, timetableEntry, {
+    id: null,
+    schedule_group_id: null
+  });
+}
+
+module.exports = {
+  buildDuplicateTimetableGroupName,
+  buildDuplicateTimetableGroup,
+  buildDuplicateTimetableEntry
+};

src/web/routes/data-sources/timetables/form-view-model.js

@@ -26,8 +26,9 @@ function formatDateTimeLocalValue(value) {
   return `${year}-${month}-${day}T${hours}:${minutes}`;
 }
 
-function buildTimetableGroupFormViewModel(timetableGroup, timetableEntries, message, currentUser, isEdit) {
+function buildTimetableGroupFormViewModel(timetableGroup, timetableEntries, message, currentUser, isEdit, options) {
   const viewTimetableGroup = Object.assign(buildDefaultTimetableGroup(), timetableGroup || {});
+  const viewOptions = options || {};
   const viewTimetableEntries = Array.isArray(timetableEntries) && timetableEntries.length
     ? timetableEntries.map(function (entry) {
         return Object.assign({}, entry, {
@@ -42,11 +43,14 @@ function buildTimetableGroupFormViewModel(timetableGroup, timetableEntries, mess
     active: 'timetables',
     message: message,
     currentUser: currentUser || null,
+    messageVariant: viewOptions.messageVariant || '',
     isEdit: Boolean(isEdit),
     timetableGroup: viewTimetableGroup,
     timetableEntries: viewTimetableEntries,
     inUse: Boolean(viewTimetableGroup.inUse),
-    showSaveSecondaryActions: Boolean(isEdit),
+    showSaveSecondaryActions: true,
+    cancelConfirmMessage: "You've made changes. Are you sure you want to leave this page?",
+    deleteConfirmMessage: isEdit ? 'Delete this timetable group?' : '',
     deleteDisabled: !isEdit || Boolean(viewTimetableGroup.inUse),
     formAction: isEdit && viewTimetableGroup.id ? '/data-sources/timetables/' + viewTimetableGroup.id : '/data-sources/timetables',
     formAttrs: 'data-async-save' + (isEdit ? ' data-async-save-close-url="/data-sources/timetables"' : ' data-async-save-new-redirect="response-url"') + ' data-async-save-new-url="/data-sources/timetables/new"',

src/web/routes/data-sources/timetables/routes.js

@@ -4,6 +4,7 @@ const { buildPagination } = require('../../../lib/pagination');
 const renderTimetableGroupsPage = require('./list');
 const renderTimetableGroupAddPage = require('./add');
 const renderTimetableGroupEditPage = require('./edit');
+const { buildDuplicateTimetableGroupName, buildDuplicateTimetableGroup, buildDuplicateTimetableEntry } = require('./duplicate');
 
 async function getDataSourceUsageMaps(pool, common) {
   const [slides] = await pool.query('SELECT content_json FROM c_slides WHERE content_json IS NOT NULL');
@@ -25,8 +26,8 @@ async function getDataSourceUsageMaps(pool, common) {
         return;
       }
 
-      if (Object.prototype.hasOwnProperty.call(value, 'schedule_group_id')) {
+      if (Object.prototype.hasOwnProperty.call(value, 'timetable_group_id')) {
-        const timetableGroupId = Number(value.schedule_group_id);
+        const timetableGroupId = Number(value.timetable_group_id);
         if (Number.isFinite(timetableGroupId)) {
           timetableGroupIds.add(timetableGroupId);
         }
@@ -176,6 +177,32 @@ module.exports = function registerTimetableRoutes(app, deps) {
     }
   });
 
+
+  app.get('/data-sources/timetables/:id/duplicate', requirePermission('timetables.read'), requirePermission('timetables.create'), async function (req, res, next) {
+    try {
+      const timetableGroup = await common.fetchTimetableGroupById(pool, Number(req.params.id));
+      if (!timetableGroup) {
+        return res.status(404).send('Timetable group not found');
+      }
+
+      const timetableEntries = typeof common.fetchTimetableEntriesByGroupId === 'function'
+        ? await common.fetchTimetableEntriesByGroupId(pool, timetableGroup.id)
+        : [];
+
+      let duplicateName = buildDuplicateTimetableGroupName(timetableGroup.name);
+      let duplicateIndex = 2;
+      while (await common.fetchDuplicateName(pool, 'i_schedule_groups', duplicateName)) {
+        duplicateName = buildDuplicateTimetableGroupName(timetableGroup.name) + ' (' + duplicateIndex + ')';
+        duplicateIndex += 1;
+      }
+
+      res.send(renderTimetableGroupAddPage(buildDuplicateTimetableGroup(timetableGroup, duplicateName), timetableEntries.map(buildDuplicateTimetableEntry), req.query.message ? String(req.query.message) : 'Review the copied values and save when ready.', req.currentUser, {
+        messageVariant: 'info'
+      }));
+    } catch (error) {
+      next(error);
+    }
+  });
   app.post('/data-sources/timetables', requirePermission('timetables.create'), async function (req, res, next) {
     const connection = await pool.getConnection();
     try {

src/web/routes/register.js

@@ -59,6 +59,7 @@ function registerAuthAndAccountRoutes(app, deps) {
     getAuditUserId: deps.getAuditUserId,
     verifyPassword: deps.verifyPassword,
     hashPassword: deps.hashPassword,
+    validatePasswordStrength: deps.validatePasswordStrength,
     createUserSession: deps.createUserSession,
     setSessionCookie: deps.setSessionCookie
   });
@@ -70,6 +71,7 @@ function registerAuthAndAccountRoutes(app, deps) {
     formatDashboardDate: deps.formatDashboardDate,
     getAuditUserId: deps.getAuditUserId,
     hashPassword: deps.hashPassword,
+    validatePasswordStrength: deps.validatePasswordStrength,
     readArrayField: deps.readArrayField,
     rbacData: deps.rbacData,
     requirePermission: deps.requirePermission

src/web/routes/settings/background-tasks-page.js

@@ -9,6 +9,12 @@ const TASKS_PER_PAGE = 25;
 const QUEUE_PAGE_URL = '/settings/tasks-background';
 const SCHEDULED_PAGE_URL = '/settings/tasks-scheduled';
 
+const DATE_FILTER_FIELDS = {
+  createdAt: 'queued',
+  startedAt: 'started',
+  finishedAt: 'finished'
+};
+
 function formatIntervalLabel(intervalMs) {
   const value = Math.max(1, Number(intervalMs) || 0);
   if (value % 60000 === 0) {
@@ -36,6 +42,54 @@ function normalizeSourceFilter(sourceType, sourceId) {
   };
 }
 
+function normalizeDateInput(value) {
+  const normalizedValue = String(value || '').trim();
+  return /^\d{4}-\d{2}-\d{2}$/.test(normalizedValue) ? normalizedValue : '';
+}
+
+function normalizeDateField(value) {
+  const normalizedField = String(value || '').trim();
+  return DATE_FILTER_FIELDS[normalizedField] ? normalizedField : 'createdAt';
+}
+
+function getIsoDateString(value) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) {
+    return '';
+  }
+
+  return date.toISOString().slice(0, 10);
+}
+
+function getTaskDateValue(task, dateField) {
+  if (!task || !dateField) {
+    return '';
+  }
+
+  return task[dateField] || '';
+}
+
+function taskMatchesDateFilter(task, dateFilter) {
+  if (!dateFilter || (!dateFilter.from && !dateFilter.to)) {
+    return true;
+  }
+
+  const taskDate = getIsoDateString(getTaskDateValue(task, dateFilter.field));
+  if (!taskDate) {
+    return false;
+  }
+
+  if (dateFilter.from && taskDate < dateFilter.from) {
+    return false;
+  }
+
+  if (dateFilter.to && taskDate > dateFilter.to) {
+    return false;
+  }
+
+  return true;
+}
+
 function taskMatchesFilters(task, sourceFilter) {
   if (!sourceFilter || !sourceFilter.sourceType || !sourceFilter.sourceId) {
     return true;
@@ -107,12 +161,14 @@ function buildQueuePageViewModel(data, message, currentUser) {
   queryState.sourceType = sourceFilter.sourceType;
   queryState.sourceId = sourceFilter.sourceId;
   const filteredTasks = tasks.filter(function (task) {
-    return taskMatchesFilters(task, sourceFilter) && taskMatchesSearch(queryState.search, [
+    return taskMatchesFilters(task, sourceFilter) && taskMatchesDateFilter(task, { field: 'createdAt', from: '', to: '' }) && taskMatchesSearch(queryState.search, [
       'title',
-      'key',
       'category',
       'status',
       'errorMessage',
+      'createdAt',
+      'startedAt',
+      'finishedAt',
       function (item) { return item && item.metadata && item.metadata.sourceName; },
       function (item) { return item && item.metadata && item.metadata.sourceType; },
       function (item) { return item && item.metadata && item.metadata.sourceId; }
@@ -199,6 +255,11 @@ function buildQueuePageViewModel(data, message, currentUser) {
     summary: summary,
     statusCards: statusCards,
     activeSourceLabel: queryState.sourceType && queryState.sourceId ? `${queryState.sourceType} #${queryState.sourceId}` : '',
+    search: queryState.search,
+    sort: sort,
+    direction: direction,
+    sourceType: queryState.sourceType,
+    sourceId: queryState.sourceId,
     clearFiltersUrl: QUEUE_PAGE_URL,
     hasActiveFilters: hasActiveFilters,
     pagination: pagination,

src/web/routes/settings/fonts.js

@@ -77,6 +77,8 @@ module.exports = function registerFontRoutes(app, deps) {
   const backgroundTaskQueue = deps.backgroundTaskQueue;
   const setAuthMessageCookie = deps.setAuthMessageCookie;
 
+  const FONT_FAMILY_MAX_LENGTH = 255;
+
   if (!pool || !pages || !upload || !uploadDir) {
     throw new Error('registerFontRoutes requires pool, pages, upload, and uploadDir.');
   }
@@ -106,7 +108,7 @@ module.exports = function registerFontRoutes(app, deps) {
         return res.status(400).send('No font file was uploaded.');
       }
 
-      const result = await fontLibrary.addFontFile(uploadDir, req.file, String(req.body && req.body.font_family || '').trim());
+      const result = await fontLibrary.addFontFile(uploadDir, req.file, String(req.body && req.body.font_family || '').trim().slice(0, FONT_FAMILY_MAX_LENGTH));
       if (backgroundTaskQueue && typeof backgroundTaskQueue.enqueueTask === 'function') {
         await backgroundTaskQueue.enqueueTask({
           key: `font-sync:${result && result.font && result.font.id ? result.font.id : Date.now()}`,