Target Node 26

.dockerignore

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

.github/copilot-instructions.md

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

.github/workflows/docker-publish.yml

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

CHANGELOG.md

@@ -2,6 +2,47 @@
 
 All notable changes to this project will be documented in this file.
 
+## 2.7.5 - 2026-08-15
+
+### Changed
+
+- The About page now reads bundled library versions from package metadata and the vendored AdminLTE stylesheet.
+- AdminLTE is now reported as 4.3.1.
+- Animate.css is now reported as 4.1.1.
+- Bootstrap Icons is now reported as 1.13.1.
+- Cropper.js is now reported as 1.6.2.
+- Express is now reported as 5.2.1.
+- Handlebars is now reported as 4.7.8.
+- hls.js is now reported as 1.7.0.
+- Multer is now reported as 2.2.0.
+- MySQL2 is now reported as 3.23.3.
+- Sharp is now reported as 0.35.3.
+- TinyMCE is now reported from the vendored package metadata.
+- ws is now reported as 8.21.3.
+- The runtime and container images now target Node.js 26.
+
+## 2.7.4 - 2026-08-15
+
+### Added
+
+- A new About page.
+
+### Changed
+
+- Refreshed the vendored AdminLTE assets to 4.3.1.
+
+## 2.7.3 - 2026-08-15
+
+### Changed
+
+- The slide image cropper now warns that SVG and GIF files will be rasterized if they are edited, and it keeps the original file only when the full image remains selected.
+- The slide image upload flow now accepts PNG, JPG, GIF, WebP, and SVG images, while the WYSIWYG image uploader now matches that same allowlist.
+- TIFF is no longer accepted by the WYSIWYG image uploader.
+
+### Fixed
+
+- The player now preserves quoted custom font-family values from rich text content, so fonts with spaces such as Old London render correctly on screens.
+
 ## 2.7.2 - 2026-08-14
 
 ### Fixed

build/Dockerfile

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

build/Dockerfile.player

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

build/package.player.json

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

build/package.web.json

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

package.json

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

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

@@ -4,6 +4,14 @@ function sanitizeFontFamily(value) {
   return String(value || '').replace(/[^a-zA-Z0-9 ,\"-]/g, '').trim();
 }
 
+function normalizeStyleAttributeValue(value) {
+  return String(value || '')
+    .replace(/"/g, '"')
+    .replace(/'/g, "'")
+    .replace(/"/g, '"')
+    .replace(/'/g, "'");
+}
+
 // Clamp font size to the supported range.
 function sanitizeFontSize(value) {
   return Math.max(8, Number(value || 0) || 24);
@@ -401,7 +409,7 @@ function sanitizeRichTextAttributes(tagName, attrText) {
         return '';
       }
     }
-    attrs.push(' ' + lowerKey + '="' + escapeHtml(value) + '"');
+    attrs.push(' ' + lowerKey + '="' + escapeHtml(lowerKey === 'style' ? normalizeStyleAttributeValue(value) : value) + '"');
     return '';
   });
 

src/player/render-helpers.js

@@ -25,6 +25,14 @@ function escapeHtml(value) {
     .replace(/'/g, ''');
 }
 
+function normalizeStyleAttributeValue(value) {
+  return String(value || '')
+    .replace(/"/g, '"')
+    .replace(/'/g, "'")
+    .replace(/"/g, '"')
+    .replace(/'/g, "'");
+}
+
 function sanitizeFontFamily(value) {
   return String(value || '').replace(/[^a-zA-Z0-9 ,"-]/g, '').trim();
 }
@@ -106,7 +114,7 @@ function sanitizeRichTextAttributes(tagName, attrText) {
         return '';
       }
     }
-    attrs.push(' ' + lowerKey + '="' + escapeHtml(value) + '"');
+    attrs.push(' ' + lowerKey + '="' + escapeHtml(lowerKey === 'style' ? normalizeStyleAttributeValue(value) : value) + '"');
     return '';
   });
 

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

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

src/web/pages/index.js

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

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

@@ -1652,6 +1652,31 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   background: var(--bs-body-bg);
 }
 
+.slide-image-cropper-frame.is-loading > :not(.slide-image-cropper-loading-overlay) {
+  opacity: 0.22;
+  filter: saturate(0.8);
+}
+
+.slide-image-cropper-loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: rgba(var(--bs-body-bg-rgb, 255, 255, 255), 0.72);
+  backdrop-filter: blur(1px);
+}
+
+.slide-image-cropper-frame.is-loading .slide-image-cropper-loading-overlay {
+  display: flex;
+}
+
+.slide-image-cropper-loading-spinner {
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
 .slide-image-cropper-frame img {
   display: block;
   max-width: 100%;
@@ -1689,6 +1714,10 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   white-space: nowrap;
 }
 
+#slide-image-cropper-status:empty {
+  display: none;
+}
+
 .slide-image-region-preview-box {
   display: grid;
   gap: 0;
@@ -2139,10 +2168,21 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
 .template-field-actions {
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
+  justify-content: flex-end;
   gap: 0.5rem;
   margin-left: auto;
 }
 
+.template-editor-size-controls {
+  flex-shrink: 0;
+}
+
+.template-editor-size-controls .btn {
+  min-width: 2rem;
+  padding-inline: 0.45rem;
+}
+
 .template-field-head strong {
   font-size: 0.95rem;
   min-width: 0;
@@ -2221,6 +2261,14 @@ html[data-bs-theme='dark'] .template-field-card .tox .tox-collection {
   min-width: 0;
 }
 
+.template-field-card .editor-holder[data-editor-height] {
+  overflow: hidden;
+}
+
+.template-field-card .editor-holder .tox.tox-tinymce {
+  height: 100% !important;
+}
+
 .announcement-color-preview {
   display: flex;
   align-items: center;

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

@@ -539,6 +539,39 @@
       return true;
     }
 
+    function updateFontToggleRow(form) {
+      if (!form) {
+        return false;
+      }
+
+      var row = form.closest ? form.closest('tr[data-font-toggle-row]') : null;
+      if (!row) {
+        return false;
+      }
+
+      var enabledInput = form.querySelector('input[name="enabled"]');
+      var toggleButton = form.querySelector('button[type="submit"]');
+      var statusBadge = row.querySelector('[data-font-status-badge]');
+      var isCurrentlyEnabled = String(row.getAttribute('data-font-enabled') || '').trim() === 'true';
+      var willEnable = !isCurrentlyEnabled;
+
+      if (enabledInput) {
+        enabledInput.value = isCurrentlyEnabled ? '0' : '1';
+      }
+
+      if (toggleButton) {
+        toggleButton.textContent = willEnable ? 'Disable' : 'Enable';
+      }
+
+      if (statusBadge) {
+        statusBadge.className = statusBadge.className.replace(/text-bg-(success|secondary)/g, willEnable ? 'text-bg-success' : 'text-bg-secondary');
+        statusBadge.textContent = willEnable ? 'Enabled' : 'Disabled';
+      }
+
+      row.setAttribute('data-font-enabled', willEnable ? 'true' : 'false');
+      return true;
+    }
+
     document.addEventListener('submit', function (event) {
       var form = event.target;
       if (!form || !form.hasAttribute || !form.hasAttribute('data-async-command')) {
@@ -584,6 +617,15 @@
         body: body.toString(),
         credentials: 'same-origin'
       }).then(function (response) {
+        if (!response || Number(response.status) >= 400) {
+          return;
+        }
+
+        if (/^\/settings\/fonts\/[^/]+\/toggle$/.test(actionPath)) {
+          updateFontToggleRow(form);
+          return;
+        }
+
         if (shouldReloadAfterSuccess && response && response.ok) {
           window.location.reload();
           return;

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

@@ -207,6 +207,12 @@
           '</div>' +
         '</div>' +
         '<div class="card-body p-3 d-grid gap-3 pb-0">' +
+          '<div class="d-flex justify-content-end">' +
+            '<div class="btn-group btn-group-sm template-editor-size-controls" role="group" aria-label="Editor size controls">' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="decrease" aria-label="Decrease editor size">-</button>' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="increase" aria-label="Increase editor size">+</button>' +
+            '</div>' +
+          '</div>' +
           '<div class="editor-holder" data-region-id="' + region.id + '">' +
             '<textarea class="editor-source" rows="10">' + escapeHtml(current.value !== undefined ? current.value : '') + '</textarea>' +
           '</div>' +

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

@@ -32,8 +32,8 @@
     var regionRatio = String(context.regionRatio || '1:1');
     var uploadConfig = context.uploadConfig || {};
     var uploadMaxLabel = String(uploadConfig.limitLabel || context.uploadMaxLabel || '100 MB');
-    var uploadAccept = Array.isArray(uploadConfig.accept) ? uploadConfig.accept.join(', ') : String(uploadConfig.accept || 'image/png, image/jpeg, image/gif, image/webp');
+    var uploadAccept = Array.isArray(uploadConfig.accept) ? uploadConfig.accept.join(', ') : String(uploadConfig.accept || 'image/png, image/jpeg, image/gif, image/webp, image/svg+xml');
-    var uploadHelpText = String(uploadConfig.helpText || 'PNG, JPG, GIF, or WebP');
+    var uploadHelpText = String(uploadConfig.helpText || 'PNG, JPG, GIF, WebP, or SVG');
     return registry.renderEditorCardShell({
       region: region,
       headerActions: '<span class="chip">Image</span>',
@@ -81,10 +81,10 @@
       current: String(context.current || ''),
       regionRatio: String(context.regionRatio || '1:1'),
       uploadConfig: {
-        accept: Array.isArray(defaultConfig.accept) ? defaultConfig.accept : ['image/png', 'image/jpeg', 'image/gif', 'image/webp'],
+        accept: Array.isArray(defaultConfig.accept) ? defaultConfig.accept : ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml'],
         limitBytes: defaultConfig.limitBytes,
         limitLabel: defaultConfig.limitLabel || context.uploadMaxLabel || '100 MB',
-        helpText: defaultConfig.helpText || 'PNG, JPG, GIF, or WebP'
+        helpText: defaultConfig.helpText || 'PNG, JPG, GIF, WebP, or SVG'
       },
       uploadMaxLabel: context.uploadMaxLabel || '100 MB'
     };
@@ -107,11 +107,11 @@
     }
 
     var uploadConfig = context.uploadConfig || {};
-    var accept = uploadConfig.accept || ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+    var accept = uploadConfig.accept || ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml'];
     var limitBytes = Number(uploadConfig.limitBytes || 100 * 1024 * 1024);
 
     if (!utils.fileMatchesAccept || !utils.fileMatchesAccept(context.file, accept)) {
-      showUploadWarning('This image region accepts PNG, JPG, GIF, or WebP files.');
+      showUploadWarning('This image region accepts PNG, JPG, GIF, WebP, or SVG files.');
       return false;
     }
 
@@ -132,10 +132,10 @@
       var defaultConfig = context && context.defaultConfig ? context.defaultConfig : {};
 
       return {
-        accept: ['image/png', 'image/jpeg', 'image/gif', 'image/webp'],
+        accept: ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml'],
         limitBytes: defaultConfig.limitBytes,
         limitLabel: defaultConfig.limitLabel,
-        helpText: 'PNG, JPG, GIF, or WebP'
+        helpText: 'PNG, JPG, GIF, WebP, or SVG'
       };
     },
     renderPreview: renderPreview,

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

@@ -222,6 +222,12 @@
           '</div>' +
         '</div>' +
         '<div class="card-body p-3 d-grid gap-3 pb-0">' +
+          '<div class="d-flex justify-content-end">' +
+            '<div class="btn-group btn-group-sm template-editor-size-controls" role="group" aria-label="Editor size controls">' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="decrease" aria-label="Decrease editor size">-</button>' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="increase" aria-label="Increase editor size">+</button>' +
+            '</div>' +
+          '</div>' +
           '<div class="editor-holder" data-region-id="' + region.id + '">' +
             '<textarea class="editor-source" rows="10">' + escapeHtml(current.value !== undefined ? current.value : '') + '</textarea>' +
           '</div>' +

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

@@ -54,7 +54,13 @@
             '<span class="chip">Text</span>' +
           '</div>' +
         '</div>' +
-        '<div class="card-body p-3 d-grid">' +
+        '<div class="card-body p-3 d-grid gap-2">' +
+          '<div class="d-flex justify-content-end">' +
+            '<div class="btn-group btn-group-sm template-editor-size-controls" role="group" aria-label="Editor size controls">' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="decrease" aria-label="Decrease editor size">-</button>' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="increase" aria-label="Increase editor size">+</button>' +
+            '</div>' +
+          '</div>' +
           '<div class="editor-holder" data-region-id="' + region.id + '">' +
               '<textarea class="editor-source" rows="10">' + escapeHtml(current) + '</textarea>' +
           '</div>' +

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

@@ -302,6 +302,12 @@
           '</div>' +
         '</div>' +
         '<div class="card-body p-3 d-grid gap-3">' +
+          '<div class="d-flex justify-content-end">' +
+            '<div class="btn-group btn-group-sm template-editor-size-controls" role="group" aria-label="Editor size controls">' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="decrease" aria-label="Decrease editor size">-</button>' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="increase" aria-label="Increase editor size">+</button>' +
+            '</div>' +
+          '</div>' +
           '<div class="editor-holder" data-region-id="' + region.id + '">' +
             '<textarea id="region_time_date_text_' + region.id + '" class="editor-source form-control" rows="4" name="region_text_' + region.id + '">' + escapeHtml(value) + '</textarea>' +
           '</div>' +

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

@@ -265,6 +265,12 @@
           '<div class="template-field-actions"><span class="chip">Timetable</span></div>' +
         '</div>' +
         '<div class="card-body p-3 d-grid gap-3">' +
+          '<div class="d-flex justify-content-end">' +
+            '<div class="btn-group btn-group-sm template-editor-size-controls" role="group" aria-label="Editor size controls">' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="decrease" aria-label="Decrease editor size">-</button>' +
+              '<button type="button" class="btn btn-outline-secondary" data-editor-size-action="increase" aria-label="Increase editor size">+</button>' +
+            '</div>' +
+          '</div>' +
           '<div class="editor-holder" data-region-id="' + region.id + '">' +
             '<textarea class="editor-source" rows="10">' + escapeHtml(currentValue) + '</textarea>' +
             '<input type="hidden" name="region_text_' + region.id + '" value="' + escapeHtml(currentValue) + '" />' +

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

@@ -8,6 +8,8 @@ export function createSlideFormEditorController(options) {
   var fontStylesheetHref = String(settings.fontStylesheetHref || '').trim();
   var defaultEditorFontFamily = 'Arial, Helvetica, sans-serif';
   var editorInstances = new Map();
+  var editorHeights = new Map();
+  var editorSizeControlsBound = false;
   var getRegionTypeModule = typeof settings.getRegionTypeModule === 'function' ? settings.getRegionTypeModule : function () {
     return null;
   };
@@ -15,9 +17,13 @@ export function createSlideFormEditorController(options) {
   var imageUploadMaxBytes = Math.max(1, Number(settings.imageUploadMaxBytes || 2 * 1024 * 1024));
   var imageUploadLimitLabel = String(settings.imageUploadLimitLabel || '').trim() || Math.max(1, Math.round(imageUploadMaxBytes / (1024 * 1024))) + ' MB';
   var imageUploadContext = String(settings.imageUploadContext || 'wysiwyg').trim() || 'wysiwyg';
-  var imageUploadAllowedExtensions = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'avif', 'tif', 'tiff'];
+  var imageUploadAllowedExtensions = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'];
-  var imageUploadAllowedMimeTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/bmp', 'image/avif', 'image/tiff'];
+  var imageUploadAllowedMimeTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/svg+xml'];
   var imageUploadFileTypes = imageUploadAllowedExtensions.join(',');
+  var wysiwygEditorHeightStep = Math.max(1, Number(settings.wysiwygEditorHeightStep || 80));
+  var wysiwygEditorHeightMin = Math.max(1, Number(settings.wysiwygEditorHeightMin || 240));
+  var wysiwygEditorHeightMax = Math.max(wysiwygEditorHeightMin, Number(settings.wysiwygEditorHeightMax || 960));
+  var wysiwygEditorHeightDefault = Math.max(wysiwygEditorHeightMin, Number(settings.wysiwygEditorHeightDefault || 360));
   var editorImageUploadPaths = new Set();
   var committedEditorImageUploadPaths = new Set();
   var pendingEditorImageUploadCleanupPaths = new Set();
@@ -64,6 +70,99 @@ export function createSlideFormEditorController(options) {
     return '';
   }
 
+  function normalizeEditorHeightValue(value) {
+    var numericValue = Number(value);
+    if (!Number.isFinite(numericValue) || numericValue <= 0) {
+      numericValue = wysiwygEditorHeightDefault;
+    }
+
+    return Math.min(wysiwygEditorHeightMax, Math.max(wysiwygEditorHeightMin, Math.round(numericValue)));
+  }
+
+  function getEditorHolder(regionId) {
+    if (!templateFields) {
+      return null;
+    }
+
+    return templateFields.querySelector('.editor-holder[data-region-id="' + regionId + '"]');
+  }
+
+  function getEditorHeight(regionId) {
+    var key = String(regionId || '');
+    var storedHeight = editorHeights.get(key);
+    if (storedHeight !== undefined && storedHeight !== null) {
+      return normalizeEditorHeightValue(storedHeight);
+    }
+
+    var holder = getEditorHolder(key);
+    var holderHeight = holder && holder.dataset ? holder.dataset.editorHeight : '';
+    var normalizedHeight = normalizeEditorHeightValue(holderHeight || wysiwygEditorHeightDefault);
+    editorHeights.set(key, normalizedHeight);
+    return normalizedHeight;
+  }
+
+  function applyEditorHeight(regionId, height, options) {
+    var key = String(regionId || '');
+    var normalizedHeight = normalizeEditorHeightValue(height);
+    var holder = getEditorHolder(key);
+    var editor = editorInstances.get(key);
+    var container = editor && typeof editor.getContainer === 'function' ? editor.getContainer() : null;
+    var shouldRequestPreview = !(options && options.silent);
+
+    editorHeights.set(key, normalizedHeight);
+
+    if (holder) {
+      holder.dataset.editorHeight = String(normalizedHeight);
+      holder.style.height = normalizedHeight + 'px';
+      holder.style.minHeight = normalizedHeight + 'px';
+    }
+
+    if (container) {
+      container.style.height = normalizedHeight + 'px';
+      container.style.minHeight = normalizedHeight + 'px';
+    }
+
+    if (editor && typeof editor.dispatch === 'function') {
+      editor.dispatch('ResizeEditor');
+    }
+
+    if (shouldRequestPreview) {
+      requestPreviewRender();
+    }
+  }
+
+  function adjustEditorHeight(regionId, delta) {
+    applyEditorHeight(regionId, getEditorHeight(regionId) + Number(delta || 0));
+  }
+
+  function bindEditorSizeControls() {
+    if (editorSizeControlsBound || !templateFields) {
+      return;
+    }
+
+    editorSizeControlsBound = true;
+    templateFields.addEventListener('click', function (event) {
+      var button = event.target && typeof event.target.closest === 'function' ? event.target.closest('[data-editor-size-action]') : null;
+      if (!button) {
+        return;
+      }
+
+      var action = String(button.getAttribute('data-editor-size-action') || '').trim();
+      if (action !== 'increase' && action !== 'decrease') {
+        return;
+      }
+
+      var card = typeof button.closest === 'function' ? button.closest('[data-region-id]') : null;
+      var regionId = card ? card.getAttribute('data-region-id') : '';
+      if (!regionId) {
+        return;
+      }
+
+      event.preventDefault();
+      adjustEditorHeight(regionId, action === 'increase' ? wysiwygEditorHeightStep : -wysiwygEditorHeightStep);
+    });
+  }
+
   function getEditorHiddenInput(regionId) {
     if (!templateFields) {
       return null;
@@ -314,15 +413,15 @@ export function createSlideFormEditorController(options) {
     }
 
     if (mimeType && imageUploadAllowedMimeTypes.indexOf(mimeType) === -1) {
-      return 'This editor accepts PNG, JPG, GIF, WebP, BMP, AVIF, or TIFF images.';
+      return 'This editor accepts PNG, JPG, GIF, WebP, or SVG images.';
     }
 
     if (!mimeType && extension && imageUploadAllowedExtensions.indexOf(extension) === -1) {
-      return 'This editor accepts PNG, JPG, GIF, WebP, BMP, AVIF, or TIFF images.';
+      return 'This editor accepts PNG, JPG, GIF, WebP, or SVG images.';
     }
 
     if (!mimeType && !extension) {
-      return 'This editor accepts PNG, JPG, GIF, WebP, BMP, AVIF, or TIFF images.';
+      return 'This editor accepts PNG, JPG, GIF, WebP, or SVG images.';
     }
 
     return '';
@@ -470,6 +569,8 @@ export function createSlideFormEditorController(options) {
       source.id = 'slide-editor-region-' + regionId;
     }
 
+    applyEditorHeight(regionId, getEditorHeight(regionId), { silent: true });
+
     function registerInlineFormat(editor, formatName, styles) {
       editor.formatter.register(formatName, {
         inline: 'span',
@@ -515,6 +616,8 @@ export function createSlideFormEditorController(options) {
       toolbar: 'undo redo | fontfamily fontsizeinput | forecolor backcolor bold italic underlineformats removeformat | align lineheight indent outdent bullist numlist table image chip | fullscreen',
       toolbar_mode: 'sliding',
       license_key: 'gpl',
+      height: getEditorHeight(regionId),
+      min_height: wysiwygEditorHeightMin,
       table_default_attributes: {
         border: '1',
         cellpadding: '0',
@@ -601,6 +704,7 @@ export function createSlideFormEditorController(options) {
       }
 
       editorInstances.set(regionId, editor);
+      applyEditorHeight(regionId, getEditorHeight(regionId), { silent: true });
       if (editor.targetElm) {
         editor.targetElm.value = editor.getContent({ format: 'html' });
       }
@@ -617,6 +721,7 @@ export function createSlideFormEditorController(options) {
       return Promise.resolve([]);
     }
 
+    bindEditorSizeControls();
     watchThemeChanges();
 
     var holders = Array.prototype.slice.call(templateFields.querySelectorAll('.editor-holder'));

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

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

src/web/routes/admin/content.js

@@ -110,14 +110,14 @@ module.exports = function registerContentRoutes(app, deps) {
     const extension = path.extname(String(file && file.originalname || '')).toLowerCase();
     const isWysiwyg = String(uploadContext || '').trim().toLowerCase() === 'wysiwyg';
 
-    if (isWysiwyg && mimeType.indexOf('image/') !== 0 && ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp', '.avif', '.tif', '.tiff'].indexOf(extension) === -1) {
+    if (isWysiwyg && mimeType.indexOf('image/') !== 0 && ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg'].indexOf(extension) === -1) {
       return null;
     }
 
     if (mimeType.indexOf('video/') === 0 || ['.mp4', '.webm', '.ogg', '.ogv', '.mov', '.avi', '.mkv'].indexOf(extension) !== -1) {
       return 'video';
     }
-    if (mimeType.indexOf('image/') === 0 || ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp', '.avif', '.tif', '.tiff'].indexOf(extension) !== -1) {
+    if (mimeType.indexOf('image/') === 0 || ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.svg'].indexOf(extension) !== -1) {
       return 'image';
     }
     return null;

src/web/routes/register.js

@@ -15,6 +15,7 @@ const registerRssFeedRoutes = require('./data-sources/rss-feeds/routes');
 const registerTimetableRoutes = require('./data-sources/timetables/routes');
 const registerSettingsRoutes = require('./settings/background-tasks');
 const registerFontRoutes = require('./settings/fonts');
+const registerAboutRoutes = require('./settings/about/routes');
 const registerInternalSyncRoutes = require('./internal/sync');
 const registerScreensRoutes = require('./signage/screens/routes');
 const { PERMISSIONS, normalizePermissionKeys } = require('#src/rbac');
@@ -24,6 +25,7 @@ function registerRoutes(app, deps) {
   registerAuthAndAccountRoutes(app, deps);
   registerSignageRoutes(app, deps);
   registerSettingsAndContentRoutes(app, deps);
+  registerAboutRoutes(app, deps);
   registerInternalSyncRoutes(app, {
     backgroundTaskQueue: deps.backgroundTaskQueue,
     uploadSyncService: deps.uploadSyncService,

src/web/routes/settings/about/index.js

@@ -0,0 +1,82 @@
+// Settings page renderer for the About page.
+
+const fs = require('fs');
+const path = require('path');
+const { renderView } = require('../../../view');
+const packageLock = require('#root/package-lock.json');
+const tinyMcePackage = require('#root/src/web/public/vendor/tinymce/package.json');
+
+function readVersionFromLockfile(packageName) {
+  const entry = packageLock && packageLock.packages ? packageLock.packages[`node_modules/${packageName}`] : null;
+  return entry && entry.version ? String(entry.version) : '';
+}
+
+function readPackageVersion(packageName) {
+  const lockedVersion = readVersionFromLockfile(packageName);
+  if (lockedVersion) {
+    return lockedVersion;
+  }
+
+  try {
+    const packageJsonPath = require.resolve(`${packageName}/package.json`);
+    return String(JSON.parse(fs.readFileSync(packageJsonPath, 'utf8')).version || '');
+  } catch (_error) {
+    try {
+      let currentDir = path.dirname(require.resolve(packageName));
+      for (;;) {
+        const packageJsonPath = path.join(currentDir, 'package.json');
+        if (fs.existsSync(packageJsonPath)) {
+          const parsed = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+          if (String(parsed && parsed.name || '') === packageName) {
+            return String(parsed.version || '');
+          }
+        }
+
+        const parentDir = path.dirname(currentDir);
+        if (parentDir === currentDir) {
+          return '';
+        }
+        currentDir = parentDir;
+      }
+    } catch (_error2) {
+      return '';
+    }
+  }
+}
+
+function readAdminLteVersion() {
+  const cssPath = path.join(__dirname, '../../../public/adminlte/css/adminlte.min.css');
+  const cssText = fs.readFileSync(cssPath, 'utf8');
+  const match = cssText.match(/AdminLTE v([0-9]+\.[0-9]+\.[0-9]+)/i);
+  return match ? match[1] : '';
+}
+
+function buildLibraryList() {
+  return [
+    { name: 'AdminLTE', version: readAdminLteVersion(), usage: 'Admin dashboard layout and components', license: 'MIT', url: 'https://adminlte.io/' },
+    { name: 'Animate.css', version: readPackageVersion('animate.css'), usage: 'Reusable animation classes', license: 'MIT', url: 'https://animate.style/' },
+    { name: 'Bootstrap Icons', version: readPackageVersion('bootstrap-icons'), usage: 'Icon set used throughout the UI', license: 'MIT', url: 'https://icons.getbootstrap.com/' },
+    { name: 'Cropper.js', version: readPackageVersion('cropperjs'), usage: 'Image cropping in the slide editor', license: 'MIT', url: 'https://github.com/fengyuanchen/cropperjs' },
+    { name: 'Express', version: readPackageVersion('express'), usage: 'Web server and routing', license: 'MIT', url: 'https://expressjs.com/' },
+    { name: 'Handlebars', version: readPackageVersion('handlebars'), usage: 'Server-side view rendering', license: 'MIT', url: 'https://handlebarsjs.com/' },
+    { name: 'hls.js', version: readPackageVersion('hls.js'), usage: 'HTTP Live Streaming playback', license: 'Apache-2.0', url: 'https://github.com/video-dev/hls.js' },
+    { name: 'Multer', version: readPackageVersion('multer'), usage: 'Multipart file uploads', license: 'MIT', url: 'https://github.com/expressjs/multer' },
+    { name: 'MySQL2', version: readPackageVersion('mysql2'), usage: 'Database access layer', license: 'MIT', url: 'https://github.com/sidorares/node-mysql2' },
+    { name: 'Sharp', version: readPackageVersion('sharp'), usage: 'Image processing and transforms', license: 'Apache-2.0', url: 'https://sharp.pixelplumbing.com/' },
+    { name: 'TinyMCE', version: tinyMcePackage.version, usage: 'Rich text editing for content fields', license: 'GPL-2.0-or-later', url: 'https://www.tiny.cloud/' },
+    { name: 'ws', version: readPackageVersion('ws'), usage: 'WebSocket transport', license: 'MIT', url: 'https://github.com/websockets/ws' }
+  ];
+}
+
+module.exports = function renderAboutPage(currentUser) {
+  return renderView('settings/about/index', {
+    title: 'About',
+    active: 'about',
+    currentUser: currentUser || null,
+    repositoryUrl: 'https://git.lzstealth.com/LZStealth/pulse-signage.git',
+    libraries: buildLibraryList(),
+    scripts: []
+  });
+};
+
+module.exports.buildLibraryList = buildLibraryList;

src/web/routes/settings/about/routes.js

@@ -0,0 +1,13 @@
+// Settings route registration for the About page.
+
+module.exports = function registerAboutRoutes(app, deps) {
+  const pages = deps.pages;
+
+  if (!pages) {
+    throw new Error('registerAboutRoutes requires pages.');
+  }
+
+  app.get('/settings/about', function (req, res) {
+    res.send(pages.renderAboutPage(req.currentUser));
+  });
+};

src/web/routes/settings/fonts.js

@@ -3,6 +3,10 @@
 const fs = require('fs');
 const { hasAnyPermission, PERMISSION_DENIED_MESSAGE } = require('#src/rbac');
 const fontLibrary = require('#src/web/lib/media/font-library');
+const { buildPagination } = require('../../lib/pagination');
+const { createSearchMatcher, getSearchQuery, getSortDirectionQuery, getSortQuery, parsePageNumber, sortRows } = require('../../lib/list-query');
+
+const LIST_PAGE_SIZE = 25;
 
 function normalizeFontFamilyName(value) {
   return String(value || '').replace(/\s+/g, ' ').trim().toLowerCase();
@@ -43,6 +47,48 @@ async function isFontUsed(pool, family) {
   return Number(rows && rows[0] && rows[0].match_count) > 0;
 }
 
+async function buildFontsPageData(pool, uploadDir, req, common) {
+  const library = fontLibrary.loadFontLibrary(uploadDir);
+  const usedFamilies = await fetchUsedFontFamilies(pool, library.fonts);
+  const search = common && typeof common.getSearchQuery === 'function' ? common.getSearchQuery(req) : getSearchQuery(req);
+  const sort = common && typeof common.getSortQuery === 'function' ? common.getSortQuery(req) : getSortQuery(req);
+  const direction = common && typeof common.getSortDirectionQuery === 'function' ? common.getSortDirectionQuery(req) : getSortDirectionQuery(req);
+  const searchableFonts = sortRows(library.fonts.map(function (font) {
+    const family = normalizeFontFamilyName(font.family || font.name);
+    return Object.assign({}, font, {
+      inUse: usedFamilies.has(family)
+    });
+  }), function (font) {
+    if (sort === 'file') {
+      return String(font && font.fileName || '').trim();
+    }
+    if (sort === 'format') {
+      return String(font && font.format || '').trim();
+    }
+    if (sort === 'status') {
+      return font && font.enabled ? 'Enabled' : 'Disabled';
+    }
+
+    return String(font && font.family || font && font.name || '').trim();
+  }, direction).filter(createSearchMatcher(search, [
+    'family',
+    'name',
+    'fileName',
+    'format',
+    function (font) {
+      return font && font.enabled ? 'enabled' : 'disabled';
+    }
+  ]));
+  const pagination = buildPagination(searchableFonts.length, parsePageNumber(req && req.query && req.query.page), 'page', { search: search, sort: sort, direction: direction }, LIST_PAGE_SIZE, 'fonts', 'Font pages');
+  const startIndex = (pagination.currentPage - 1) * LIST_PAGE_SIZE;
+
+  return {
+    fonts: searchableFonts.slice(startIndex, startIndex + LIST_PAGE_SIZE),
+    pagination: pagination,
+    stylesheetHref: library.stylesheetHref
+  };
+}
+
 function redirectToLogin(res, setAuthMessageCookie) {
   if (typeof setAuthMessageCookie === 'function') {
     setAuthMessageCookie(res, 'Please sign in to continue.');
@@ -71,6 +117,7 @@ function requireFontsAccess(setAuthMessageCookie) {
 
 module.exports = function registerFontRoutes(app, deps) {
   const pool = deps.pool;
+  const common = deps.common || {};
   const pages = deps.pages;
   const upload = deps.upload;
   const uploadDir = deps.uploadDir;
@@ -85,18 +132,8 @@ module.exports = function registerFontRoutes(app, deps) {
 
   app.get('/settings/fonts', requireFontsAccess(setAuthMessageCookie), async function (req, res, next) {
     try {
-      const library = fontLibrary.loadFontLibrary(uploadDir);
+      const data = await buildFontsPageData(pool, uploadDir, req, common);
-      const usedFamilies = await fetchUsedFontFamilies(pool, library.fonts);
+      res.send(pages.renderFontsPage(data, req.query.message ? String(req.query.message) : '', req.currentUser));
-      const fonts = library.fonts.map(function (font) {
-        const family = normalizeFontFamilyName(font.family || font.name);
-        return Object.assign({}, font, {
-          inUse: usedFamilies.has(family)
-        });
-      });
-      res.send(pages.renderFontsPage({
-        fonts: fonts,
-        stylesheetHref: library.stylesheetHref
-      }, req.query.message ? String(req.query.message) : '', req.currentUser));
     } catch (error) {
       next(error);
     }
@@ -132,19 +169,9 @@ module.exports = function registerFontRoutes(app, deps) {
       }
 
       if (error && /already exists/i.test(String(error.message || ''))) {
-        const library = fontLibrary.loadFontLibrary(uploadDir);
+        const data = await buildFontsPageData(pool, uploadDir, req, common);
-        const usedFamilies = await fetchUsedFontFamilies(pool, library.fonts);
-        const fonts = library.fonts.map(function (font) {
-          const family = normalizeFontFamilyName(font.family || font.name);
-          return Object.assign({}, font, {
-            inUse: usedFamilies.has(family)
-          });
-        });
 
-        return res.status(400).send(pages.renderFontsPage({
+        return res.status(400).send(pages.renderFontsPage(data, String(error.message || 'Font already exists.'), req.currentUser));
-          fonts: fonts,
-          stylesheetHref: library.stylesheetHref
-        }, String(error.message || 'Font already exists.'), req.currentUser));
       }
 
       next(error);

src/web/routes/settings/fonts/list.js

@@ -9,6 +9,7 @@ module.exports = function renderFontsPage(data, message, currentUser) {
     message: message,
     currentUser: currentUser || null,
     fonts: data.fonts || [],
+    pagination: data.pagination || null,
     stylesheetHref: data.stylesheetHref || ''
   });
 };

src/web/views/settings/about/index.hbs

@@ -0,0 +1,68 @@
+<div class="page-header">
+  <div>
+    <h2>About Pulse Signage</h2>
+    <p>Version details and the main open-source libraries bundled with the app.</p>
+  </div>
+</div>
+
+<div class="row g-3">
+  <div class="col-12 col-xl-4">
+    <div class="card card-outline card-primary h-100">
+      <div class="card-body">
+        <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
+          <div>
+            <div class="text-uppercase text-muted small fw-semibold">Application</div>
+            <div class="fs-3 fw-semibold">Pulse Signage</div>
+          </div>
+          <div class="text-end">
+            <div class="text-muted small text-uppercase">Version</div>
+            <div class="fs-4 fw-semibold">v{{appVersion}}</div>
+          </div>
+        </div>
+
+        <p class="text-muted mb-3">Pulse is a self-hosted signage platform for managing screens, playlists, slides, and data sources from one web interface.</p>
+
+        <div class="d-flex flex-wrap gap-2">
+          <a class="btn btn-primary" href="/dashboard"><i class="bi bi-speedometer2 me-1" aria-hidden="true"></i>Open dashboard</a>
+          <a class="btn btn-outline-secondary" href="{{repositoryUrl}}" target="_blank" rel="noreferrer"><i class="bi bi-github me-1" aria-hidden="true"></i>Repository</a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="col-12 col-xl-8">
+    <div class="card card-outline card-primary h-100 overflow-hidden">
+      <div class="card-header">
+        <h3 class="card-title">Third-party libraries</h3>
+      </div>
+      <div class="table-responsive">
+        <table class="table table-striped align-middle mb-0">
+          <thead>
+            <tr>
+              <th>Library</th>
+              <th>Version</th>
+              <th>Use</th>
+              <th>License</th>
+            </tr>
+          </thead>
+          <tbody>
+            {{#each libraries}}
+              <tr>
+                <td class="fw-semibold">{{name}}</td>
+                <td>{{version}}</td>
+                <td>{{usage}}</td>
+                <td>
+                  {{#if url}}
+                    <a href="{{url}}" target="_blank" rel="noreferrer">{{license}}</a>
+                  {{else}}
+                    {{license}}
+                  {{/if}}
+                </td>
+              </tr>
+            {{/each}}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>

src/web/views/settings/fonts/list.hbs

@@ -5,82 +5,91 @@
   </div>
 </div>
 
-<div class="row g-3">
+<div class="card card-outline card-primary mb-4">
-  <div class="col-12 col-xl-4">
+  <div class="card-header">
-    <div class="card card-outline card-primary">
+    <h3 class="card-title">Upload font</h3>
-      <div class="card-header">
+  </div>
-        <h3 class="card-title">Upload font</h3>
+  <style>
-      </div>
+    .font-upload-form .invalid-feedback {
-      <form method="post" action="/settings/fonts" enctype="multipart/form-data">
+      display: none !important;
-        <div class="card-body d-flex flex-column gap-3 pb-0">
+    }
-          <div>
+  </style>
-            <label for="font-family" class="form-label">Font family name</label>
+  <form method="post" action="/settings/fonts" enctype="multipart/form-data" class="font-upload-form">
-            <input id="font-family" name="font_family" class="form-control" maxlength="128" data-limit-text-length placeholder="Acme Sans" required />
+    <div class="card-body">
-          </div>
+      <div class="row g-3 align-items-end">
-          <div>
+        <div class="col-12 col-lg-5">
-            <label for="font-file" class="form-label">Font file</label>
+        <input id="font-family" name="font_family" class="form-control" maxlength="128" data-limit-text-length placeholder="Acme Sans" required />
-            <input id="font-file" name="font_file" type="file" class="form-control" accept=".woff2,.woff,.ttf,.otf" required />
+        </div>
-          </div>
+        <div class="col-12 col-lg-5">
+        <input id="font-file" name="font_file" type="file" class="form-control" accept=".woff2,.woff,.ttf,.otf" aria-label="Font file" required />
+        </div>
+        <div class="col-12 col-lg-2 d-grid">
           <button type="submit" class="btn btn-primary">Upload font</button>
         </div>
-      </form>
+      </div>
+      <div class="text-muted small mt-3">Accepted formats: WOFF2, WOFF, TTF, and OTF.</div>
     </div>
-  </div>
+  </form>
+</div>
 
-  <div class="col-12 col-xl-8">
+<div class="card card-outline card-primary" data-table-search-container data-table-pagination-card>
-    <div class="card card-outline card-primary">
+  <div class="card-header">
-      <div class="card-header">
+    <h3 class="card-title">Managed fonts</h3>
-        <h3 class="card-title">Managed fonts</h3>
+    <div class="card-tools d-flex flex-nowrap align-items-center gap-2">
-      </div>
+      <div class="input-group input-group-sm flex-shrink-1" style="width: min(14rem, 100%);">
-      <div class="table-responsive fonts-table-responsive">
+        <span class="input-group-text" aria-hidden="true"><i class="bi bi-search"></i></span>
-        <table class="table table-striped align-middle mb-0">
+        <input type="search" class="form-control" placeholder="Search fonts" aria-label="Search fonts" data-table-search />
-          <thead>
-            <tr>
-              <th>Family</th>
-              <th>File</th>
-              <th>Format</th>
-              <th>Status</th>
-              <th>Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            {{#if fonts.length}}
-              {{#each fonts}}
-                <tr>
-                  <td class="fw-semibold">{{family}}</td>
-                  <td class="text-break">{{fileName}}</td>
-                  <td>{{format}}</td>
-                  <td>
-                    {{#if enabled}}
-                      <span class="badge text-bg-success">Enabled</span>
-                    {{else}}
-                      <span class="badge text-bg-secondary">Disabled</span>
-                    {{/if}}
-                  </td>
-                  <td class="text-nowrap">
-                    <form method="post" action="/settings/fonts/{{id}}/toggle" class="d-inline">
-                      <input type="hidden" name="enabled" value="{{#if enabled}}0{{else}}1{{/if}}" />
-                      <button type="submit" class="btn btn-secondary btn-sm">{{#if enabled}}Disable{{else}}Enable{{/if}}</button>
-                    </form>
-                    <form method="post" action="/settings/fonts/{{id}}/delete" class="d-inline ms-1" data-confirm-message="Delete this font?">
-                      <input type="hidden" name="family" value="{{family}}" />
-                      {{#if inUse}}
-                        <button type="submit" class="btn btn-outline-danger btn-sm" {{#if inUse}}disabled{{/if}}>Delete</button>
-                      {{else}}
-                        <button type="submit" class="btn btn-danger btn-sm">Delete</button>
-                      {{/if}}
-                    </form>
-                  </td>
-                </tr>
-              {{/each}}
-            {{else}}
-              <tr>
-                <td colspan="5" class="empty">No managed fonts yet.</td>
-              </tr>
-            {{/if}}
-          </tbody>
-        </table>
       </div>
     </div>
   </div>
+  <div class="card-body table-responsive p-0">
+    <table class="table table-striped align-middle mb-0" data-table-searchable>
+      <thead>
+        <tr>
+          <th data-table-sort-key="family">Family</th>
+          <th data-table-sort-key="file">File</th>
+          <th data-table-sort-key="format">Format</th>
+          <th data-table-sort-key="status">Status</th>
+          <th>Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        {{#if fonts.length}}
+          {{#each fonts}}
+          <tr data-table-search-row data-font-toggle-row data-font-enabled="{{#if enabled}}true{{else}}false{{/if}}">
+              <td data-label="Family" class="fw-semibold">{{family}}</td>
+              <td data-label="File" class="text-break">{{fileName}}</td>
+              <td data-label="Format">{{format}}</td>
+              <td data-label="Status">
+                {{#if enabled}}
+                  <span class="badge text-bg-success" data-font-status-badge>Enabled</span>
+                {{else}}
+                  <span class="badge text-bg-secondary" data-font-status-badge>Disabled</span>
+                {{/if}}
+              </td>
+              <td data-label="Actions" class="text-nowrap">
+                <form method="post" action="/settings/fonts/{{id}}/toggle" class="d-inline" data-async-command>
+                  <input type="hidden" name="enabled" value="{{#if enabled}}0{{else}}1{{/if}}" />
+                  <button type="submit" class="btn btn-secondary btn-sm">{{#if enabled}}Disable{{else}}Enable{{/if}}</button>
+                </form>
+                <form method="post" action="/settings/fonts/{{id}}/delete" class="d-inline ms-1" data-confirm-message="Delete this font?">
+                  <input type="hidden" name="family" value="{{family}}" />
+                  {{#if inUse}}
+                    <button type="submit" class="btn btn-outline-danger btn-sm" disabled>Delete</button>
+                  {{else}}
+                    <button type="submit" class="btn btn-danger btn-sm">Delete</button>
+                  {{/if}}
+                </form>
+              </td>
+            </tr>
+          {{/each}}
+        {{else}}
+          <tr data-table-search-empty-default>
+            <td colspan="5" class="empty">No managed fonts yet.</td>
+          </tr>
+        {{/if}}
+      </tbody>
+    </table>
+  </div>
+  {{> table-pagination pagination=pagination basePath="/settings/fonts" alwaysShow=true}}
 </div>

src/web/views/shared/layout.hbs

@@ -326,8 +326,9 @@
               </ul>
             </nav>
             <div class="sidebar-version mt-auto pt-2 text-secondary small">
-              <div class="sidebar-version__inner border-top pt-2">
+              <div class="sidebar-version__inner border-top pt-2 d-flex align-items-center justify-content-between gap-3">
-                v{{appVersion}}
+                <span>v{{appVersion}}</span>
+                <a href="/settings/about" class="text-secondary text-decoration-none text-nowrap">Pulse Signage</a>
               </div>
             </div>
           </div>

src/web/views/signage/slides/form.hbs

@@ -84,6 +84,11 @@
   <div class="modal-body d-grid gap-3">
     <div class="slide-image-cropper-frame">
       <img id="slide-image-cropper-image" alt="Selected image to crop" />
+      <div class="slide-image-cropper-loading-overlay" aria-hidden="true">
+        <div class="spinner-border text-primary slide-image-cropper-loading-spinner" role="status">
+          <span class="visually-hidden">Loading image editor</span>
+        </div>
+      </div>
     </div>
     <div class="btn-toolbar flex-wrap gap-2 slide-image-cropper-toolbar" role="toolbar" aria-label="Image editing controls">
       <div class="btn-group btn-group-sm" role="group" aria-label="Rotate">

test/about-page.test.js

@@ -0,0 +1,65 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+require('../src/common');
+
+const packageJson = require('../package.json');
+const pages = require('../src/web/pages');
+const registerAboutRoutes = require('../src/web/routes/settings/about/routes');
+const renderAboutPage = require('../src/web/routes/settings/about');
+
+test('about page renders the footer link beside the version and lists bundled libraries', () => {
+  const html = pages.renderAboutPage({ id: 1 });
+  const libraries = renderAboutPage.buildLibraryList();
+
+  const orderedNames = libraries.map(function (library) {
+    return library.name;
+  });
+  let previousIndex = -1;
+
+  orderedNames.forEach(function (name) {
+    const currentIndex = html.indexOf(name);
+    assert.ok(currentIndex >= 0, `missing ${name}`);
+    assert.ok(currentIndex > previousIndex, `${name} is out of order`);
+    previousIndex = currentIndex;
+  });
+
+  assert.match(html, new RegExp('v' + packageJson.version.split('.').join('\\.')));
+  assert.match(html, /About Pulse/);
+  assert.match(html, /href="\/settings\/about"/);
+  libraries.forEach(function (library) {
+    assert.ok(library.version, `${library.name} version is missing`);
+    assert.match(html, new RegExp(`>${library.version}<`));
+  });
+  assert.match(html, /card card-outline card-primary h-100 overflow-hidden/);
+  assert.doesNotMatch(html, /rounded-3 overflow-hidden border/);
+});
+
+test('about route sends the about page', async () => {
+  const handlers = {};
+  const app = {
+    get(path, ...routeHandlers) {
+      handlers[path] = routeHandlers;
+    }
+  };
+
+  registerAboutRoutes(app, {
+    pages: {
+      renderAboutPage(currentUser) {
+        return currentUser && currentUser.id === 7 ? 'about-page' : 'unexpected';
+      }
+    }
+  });
+
+  const response = {
+    body: null,
+    send(value) {
+      this.body = value;
+      return this;
+    }
+  };
+
+  await handlers['/settings/about'][0]({ currentUser: { id: 7 } }, response, function () {});
+
+  assert.equal(response.body, 'about-page');
+});

test/font-library.test.js

@@ -0,0 +1,52 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const os = require('node:os');
+const path = require('node:path');
+
+const {
+  buildFontFamilyFormats,
+  buildFontStylesheet,
+  collectFontLibrarySyncOperations
+} = require('../src/web/lib/media/font-library');
+
+test('buildFontFamilyFormats quotes multi-word font families for TinyMCE previews', () => {
+  const formats = buildFontFamilyFormats([
+    { family: 'Old London', enabled: true },
+    { family: 'My Custom Font', enabled: true }
+  ]);
+
+  assert.match(formats, /Old London='Old London'/);
+  assert.match(formats, /My Custom Font='My Custom Font'/);
+  assert.match(formats, /Times New Roman='Times New Roman',Times,serif/);
+  assert.match(formats, /Lucida Sans Unicode='Lucida Sans Unicode','Lucida Grande',sans-serif/);
+});
+
+test('buildFontStylesheet keeps disabled fonts available for rendering', () => {
+  const stylesheet = buildFontStylesheet([
+    { family: 'Enabled Font', fileName: 'enabled-font.ttf', format: 'truetype', enabled: true },
+    { family: 'Disabled Font', fileName: 'disabled-font.ttf', format: 'truetype', enabled: false }
+  ]);
+
+  assert.match(stylesheet, /Enabled Font/);
+  assert.match(stylesheet, /Disabled Font/);
+});
+
+test('collectFontLibrarySyncOperations keeps disabled fonts as puts', async () => {
+  const tempRoot = await fs.promises.mkdtemp(path.join(os.tmpdir(), 'pulse-font-library-'));
+  const fontDir = path.join(tempRoot, 'fonts');
+  await fs.promises.mkdir(fontDir, { recursive: true });
+  await fs.promises.writeFile(path.join(fontDir, 'fonts.json'), JSON.stringify([
+    { family: 'Enabled Font', fileName: 'enabled-font.ttf', enabled: true },
+    { family: 'Disabled Font', fileName: 'disabled-font.ttf', enabled: false }
+  ], null, 2));
+
+  const operations = collectFontLibrarySyncOperations(tempRoot);
+  const fontOps = operations.filter(function (operation) {
+    return String(operation.uploadPath || '').indexOf('/media/fonts/') === 0 && /\.ttf$/.test(String(operation.uploadPath || ''));
+  });
+
+  assert.deepEqual(fontOps.map(function (operation) {
+    return operation.type;
+  }), ['put', 'put']);
+});

test/fonts-routes.test.js

@@ -0,0 +1,226 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+require('../src/common');
+
+const fontLibrary = require('../src/web/lib/media/font-library');
+const registerFontRoutes = require('../src/web/routes/settings/fonts');
+const renderFontsPage = require('../src/web/routes/settings/fonts/list');
+
+function createHandlers() {
+  const handlers = {};
+  const app = {
+    get(path, ...routeHandlers) {
+      handlers[`GET ${path}`] = routeHandlers;
+    },
+    post(path, ...routeHandlers) {
+      handlers[`POST ${path}`] = routeHandlers;
+    }
+  };
+
+  return { app, handlers };
+}
+
+test('fonts route filters and paginates managed fonts', async () => {
+  const originalLoadFontLibrary = fontLibrary.loadFontLibrary;
+  const { app, handlers } = createHandlers();
+
+  fontLibrary.loadFontLibrary = function () {
+    return {
+      fonts: [
+        { id: 'alpha', family: 'Alpha Sans', fileName: 'alpha.woff2', format: 'woff2', enabled: true },
+        { id: 'beta', family: 'Beta Sans', fileName: 'beta.woff2', format: 'woff2', enabled: false },
+        { id: 'gamma', family: 'Gamma Sans', fileName: 'gamma.woff2', format: 'woff2', enabled: true }
+      ],
+      stylesheetHref: '/media/fonts/fonts.css'
+    };
+  };
+
+  try {
+    registerFontRoutes(app, {
+      pool: {
+        async query() {
+          return [[{ match_count: 0 }]];
+        }
+      },
+      common: {
+        getSearchQuery() {
+          return 'beta';
+        }
+      },
+      pages: {
+        renderFontsPage(data) {
+          return JSON.stringify(data);
+        }
+      },
+      upload: {
+        single() {
+          return function (_req, _res, next) {
+            next();
+          };
+        }
+      },
+      uploadDir: 'e:/Projects Git/pulse-signage/media',
+      backgroundTaskQueue: null,
+      setAuthMessageCookie() {}
+    });
+
+    const response = {
+      statusCode: 200,
+      body: null,
+      send(value) {
+        this.body = value;
+        return this;
+      }
+    };
+
+    await handlers['GET /settings/fonts'][1]({
+      query: {
+        page: '2'
+      },
+      currentUser: {
+        id: 1,
+        permissions: ['fonts.read']
+      }
+    }, response, function () {});
+
+    const rendered = JSON.parse(response.body);
+    assert.equal(rendered.fonts.length, 1);
+    assert.equal(rendered.fonts[0].id, 'beta');
+    assert.equal(rendered.pagination.currentPage, 1);
+    assert.equal(rendered.pagination.totalItems, 1);
+  } finally {
+    fontLibrary.loadFontLibrary = originalLoadFontLibrary;
+  }
+});
+
+test('fonts route sorts by format and status', async () => {
+  const originalLoadFontLibrary = fontLibrary.loadFontLibrary;
+  const { app, handlers } = createHandlers();
+
+  fontLibrary.loadFontLibrary = function () {
+    return {
+      fonts: [
+        { id: 'alpha', family: 'Alpha Sans', fileName: 'alpha.woff2', format: 'woff2', enabled: true },
+        { id: 'beta', family: 'Beta Sans', fileName: 'beta.otf', format: 'opentype', enabled: false },
+        { id: 'gamma', family: 'Gamma Sans', fileName: 'gamma.ttf', format: 'truetype', enabled: true }
+      ],
+      stylesheetHref: '/media/fonts/fonts.css'
+    };
+  };
+
+  try {
+    registerFontRoutes(app, {
+      pool: {
+        async query() {
+          return [[{ match_count: 0 }]];
+        }
+      },
+      common: {
+        getSearchQuery() {
+          return '';
+        },
+        getSortQuery(req) {
+          return req.query.sort;
+        },
+        getSortDirectionQuery(req) {
+          return req.query.direction;
+        }
+      },
+      pages: {
+        renderFontsPage(data) {
+          return JSON.stringify(data);
+        }
+      },
+      upload: {
+        single() {
+          return function (_req, _res, next) {
+            next();
+          };
+        }
+      },
+      uploadDir: 'e:/Projects Git/pulse-signage/media',
+      backgroundTaskQueue: null,
+      setAuthMessageCookie() {}
+    });
+
+    const response = {
+      statusCode: 200,
+      body: null,
+      send(value) {
+        this.body = value;
+        return this;
+      }
+    };
+
+    await handlers['GET /settings/fonts'][1]({
+      query: {
+        sort: 'format',
+        direction: 'asc'
+      },
+      currentUser: {
+        id: 1,
+        permissions: ['fonts.read']
+      }
+    }, response, function () {});
+
+    let rendered = JSON.parse(response.body);
+    assert.deepEqual(rendered.fonts.map(function (font) { return font.id; }), ['beta', 'gamma', 'alpha']);
+
+    await handlers['GET /settings/fonts'][1]({
+      query: {
+        sort: 'status',
+        direction: 'asc'
+      },
+      currentUser: {
+        id: 1,
+        permissions: ['fonts.read']
+      }
+    }, response, function () {});
+
+    rendered = JSON.parse(response.body);
+    assert.deepEqual(rendered.fonts.map(function (font) { return font.id; }), ['beta', 'alpha', 'gamma']);
+  } finally {
+    fontLibrary.loadFontLibrary = originalLoadFontLibrary;
+  }
+});
+
+test('fonts page renders the upload card above the table card', () => {
+  const html = renderFontsPage({
+    fonts: [
+      {
+        id: 'alpha',
+        family: 'Alpha Sans',
+        fileName: 'alpha.woff2',
+        format: 'woff2',
+        enabled: true,
+        inUse: false
+      }
+    ],
+    pagination: {
+      hasMultiplePages: true,
+      startItem: 1,
+      endItem: 1,
+      totalItems: 1,
+      itemLabel: 'fonts',
+      ariaLabel: 'Font pages',
+      hasPrevious: false,
+      hasNext: true,
+      previousUrl: '',
+      nextUrl: '?page=2',
+      pages: [{ number: 1, active: true, url: '' }]
+    },
+    stylesheetHref: ''
+  }, '', { id: 1 });
+
+  assert.ok(html.indexOf('Upload font') < html.indexOf('Managed fonts'));
+  assert.match(html, /data-table-search-container/);
+  assert.match(html, /table-pagination/);
+  assert.match(html, /data-async-command/);
+  assert.match(html, /data-font-toggle-row/);
+  assert.match(html, /data-font-status-badge/);
+  assert.match(html, /data-table-sort-key="family"/);
+  assert.match(html, /data-table-sort-key="file"/);
+  assert.match(html, /data-table-sort-key="format"/);
+  assert.match(html, /data-table-sort-key="status"/);
+});