Release 2.7.4

Release 2.7.3
Release 2.7.2
2026-08-15 12:30:31 +01:00 · 2026-08-15 11:43:07 +01:00 · 2026-08-14 23:51:38 +01:00
46 changed files with 1402 additions and 154 deletions
@@ -2,6 +2,35 @@

 All notable changes to this project will be documented in this file.

+## 2.7.4 - 2026-08-15
+
+### Added
+
+- A new About page.
+
+### Changed
+
+- Refreshed the vendored AdminLTE assets to 4.3.1.
+
+## 2.7.3 - 2026-08-15
+
+### Changed
+
+- The slide image cropper now warns that SVG and GIF files will be rasterized if they are edited, and it keeps the original file only when the full image remains selected.
+- The slide image upload flow now accepts PNG, JPG, GIF, WebP, and SVG images, while the WYSIWYG image uploader now matches that same allowlist.
+- TIFF is no longer accepted by the WYSIWYG image uploader.
+
+### Fixed
+
+- The player now preserves quoted custom font-family values from rich text content, so fonts with spaces such as Old London render correctly on screens.
+
+## 2.7.2 - 2026-08-14
+
+### Fixed
+
+- HTML and webpage region previews now normalize object-shaped content before rendering, so the player, thumbnails, and popup preview show the intended iframe content instead of leaking raw objects.
+- HTML and webpage preview iframes now size explicitly to the full region bounds in the player, thumbnails, and popup preview.
+
 ## 2.7.1 - 2026-08-14

 ### Changed
@@ -1,6 +1,6 @@
 {
  "name": "pulse-signage-player",
-  "version": "2.7.1",
+  "version": "2.7.4",
  "private": false,
  "description": "Pulse Signage player application bundle",
  "main": "src/common.js",
@@ -1,6 +1,6 @@
 {
  "name": "pulse-signage-web",
-  "version": "2.7.1",
+  "version": "2.7.4",
  "private": false,
  "description": "Pulse Signage web and bridge application bundle",
  "main": "src/common.js",
@@ -1,12 +1,12 @@
 {
  "name": "pulse-signage",
-  "version": "2.6.15",
+  "version": "2.7.4",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "pulse-signage",
-      "version": "2.6.15",
+      "version": "2.7.4",
      "dependencies": {
        "@sparticuz/chromium": "^137.0.0",
        "animate.css": "^4.1.1",
@@ -1,6 +1,6 @@
 {
  "name": "pulse-signage",
-  "version": "2.7.1",
+  "version": "2.7.4",
  "private": false,
  "description": "Pulse Signage application with MySQL and media storage",
  "repository": {
@@ -4,6 +4,14 @@ function sanitizeFontFamily(value) {
  return String(value || '').replace(/[^a-zA-Z0-9 ,\"-]/g, '').trim();
 }

+function normalizeStyleAttributeValue(value) {
+  return String(value || '')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&amp;quot;/g, '"')
+    .replace(/&amp;#39;/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 '';
  });

@@ -2,16 +2,49 @@

 var registry = window.pulsePlayerRegionTypes;

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

 function renderHtmlRegion(region, regionContent) {
-  return '<div class="template-region html" style="' + region.baseStyle + '">' + renderHtmlRegionContent(regionContent.value || '') + '</div>';
+  return '<div class="template-region html" style="' + region.baseStyle + '">' + renderHtmlRegionContent(regionContent && regionContent.value !== undefined ? regionContent.value : '') + '</div>';
 }

 registry.register('html', {
@@ -2,12 +2,38 @@

 var registry = window.pulsePlayerRegionTypes;

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

 registry.register('webpage', {
@@ -25,6 +25,14 @@ function escapeHtml(value) {
    .replace(/'/g, '&#39;');
 }

+function normalizeStyleAttributeValue(value) {
+  return String(value || '')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/&amp;quot;/g, '"')
+    .replace(/&amp;#39;/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 '';
  });

@@ -279,12 +287,45 @@ function renderEditorJsContent(value) {
  return wrapRichTextParagraph(sanitizeRichText(raw));
 }

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

 function fitCanvasSize(canvasWidth, canvasHeight, maxWidth, maxHeight) {
@@ -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,
@@ -30,6 +30,35 @@ function resolveAssetUrl(baseUrl, value) {
  return normalizedBaseUrl + '/' + raw.replace(/^\/+/, '');
 }

+function normalizeRenderableValue(value) {
+  if (value && typeof value === 'object') {
+    if (value.value !== undefined) {
+      return normalizeRenderableValue(value.value);
+    }
+    if (value.text !== undefined) {
+      return normalizeRenderableValue(value.text);
+    }
+    if (value.html !== undefined) {
+      return normalizeRenderableValue(value.html);
+    }
+    if (value.url !== undefined) {
+      return normalizeRenderableValue(value.url);
+    }
+    if (value.href !== undefined) {
+      return normalizeRenderableValue(value.href);
+    }
+    if (value.src !== undefined) {
+      return normalizeRenderableValue(value.src);
+    }
+    if (value.content !== undefined) {
+      return normalizeRenderableValue(value.content);
+    }
+    return '';
+  }
+
+  return String(value === undefined || value === null ? '' : value);
+}
+
 function getThumbnailCanvasSize(slide) {
  const template = slide && slide.template ? slide.template : null;
  return {
@@ -79,7 +108,7 @@ function buildTextRegionMarkup(region, regionContent) {

 function buildRegionInnerHtml(region, regionContent, baseUrl) {
  const regionType = String(regionContent.type || region.region_type || 'text').trim().toLowerCase();
-  const rawValue = regionContent && regionContent.value !== undefined ? regionContent.value : '';
+  const rawValue = normalizeRenderableValue(regionContent && regionContent.value !== undefined ? regionContent.value : '');

  if (regionType === 'image') {
    const src = resolveAssetUrl(baseUrl, rawValue);
@@ -98,7 +127,7 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
  if (regionType === 'webpage') {
    const src = resolveAssetUrl(baseUrl, rawValue);
    return src
-      ? '<div class="slide-preview-region slide-preview-webpage-region" style="' + region.baseStyle + '"><iframe src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'webpage') + '" loading="eager" referrerpolicy="no-referrer" scrolling="no"></iframe></div>'
+      ? '<div class="slide-preview-region slide-preview-webpage-region" style="' + region.baseStyle + '"><iframe src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'webpage') + '" loading="eager" referrerpolicy="no-referrer" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:#fff;overflow:hidden;"></iframe></div>'
      : '';
  }

@@ -114,7 +143,7 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
  if (regionType === 'html') {
    const html = String(rawValue || '').trim();
    return html
-      ? '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" srcdoc="<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + escapeHtml(html) + '</body></html>" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no"></iframe></div>'
+      ? '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" allowtransparency="true" srcdoc="' + escapeHtml('<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + html + '</body></html>') + '" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe></div>'
      : '';
  }

@@ -52,6 +52,35 @@ function resolveAssetUrl(baseUrl, value) {
  return normalizedBaseUrl + '/' + raw.replace(/^\/+/, '');
 }

+function normalizeRenderableValue(value) {
+  if (value && typeof value === 'object') {
+    if (value.value !== undefined) {
+      return normalizeRenderableValue(value.value);
+    }
+    if (value.text !== undefined) {
+      return normalizeRenderableValue(value.text);
+    }
+    if (value.html !== undefined) {
+      return normalizeRenderableValue(value.html);
+    }
+    if (value.url !== undefined) {
+      return normalizeRenderableValue(value.url);
+    }
+    if (value.href !== undefined) {
+      return normalizeRenderableValue(value.href);
+    }
+    if (value.src !== undefined) {
+      return normalizeRenderableValue(value.src);
+    }
+    if (value.content !== undefined) {
+      return normalizeRenderableValue(value.content);
+    }
+    return '';
+  }
+
+  return String(value === undefined || value === null ? '' : value);
+}
+
 function getCanvasSize(slide) {
  const template = slide && slide.template ? slide.template : null;
  return {
@@ -109,7 +138,7 @@ function buildTextRegionMarkup(region, regionContent) {

 function buildRegionInnerHtml(region, regionContent, baseUrl) {
  const regionType = String(regionContent.type || region.region_type || 'text').trim().toLowerCase();
-  const rawValue = regionContent && regionContent.value !== undefined ? regionContent.value : '';
+  const rawValue = normalizeRenderableValue(regionContent && regionContent.value !== undefined ? regionContent.value : '');

  if (regionType === 'image') {
    const src = resolveAssetUrl(baseUrl, rawValue);
@@ -128,7 +157,7 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
  if (regionType === 'webpage') {
    const src = resolveAssetUrl(baseUrl, rawValue);
    return src
-      ? '<div class="slide-preview-region slide-preview-webpage-region" style="' + region.baseStyle + '"><iframe src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'webpage') + '" loading="eager" referrerpolicy="no-referrer" scrolling="no"></iframe></div>'
+      ? '<div class="slide-preview-region slide-preview-webpage-region" style="' + region.baseStyle + '"><iframe src="' + escapeHtml(src) + '" title="' + escapeHtml(region.label || region.region_key || 'webpage') + '" loading="eager" referrerpolicy="no-referrer" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:#fff;overflow:hidden;"></iframe></div>'
      : '';
  }

@@ -144,7 +173,7 @@ function buildRegionInnerHtml(region, regionContent, baseUrl) {
  if (regionType === 'html') {
    const html = String(rawValue || '').trim();
    return html
-      ? '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" srcdoc="<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + escapeHtml(html) + '</body></html>" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no"></iframe></div>'
+      ? '<div class="slide-preview-region slide-preview-html-region" style="' + region.baseStyle + '"><iframe sandbox="" allowtransparency="true" srcdoc="' + escapeHtml('<!doctype html><html><head><style>html,body{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;}</style></head><body>' + html + '</body></html>') + '" title="' + escapeHtml(region.label || region.region_key || 'html') + '" loading="eager" scrolling="no" style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"></iframe></div>'
      : '';
  }

@@ -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')),
@@ -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;
@@ -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;
@@ -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>' +
@@ -8,13 +8,49 @@
    return utils.escapeHtml ? utils.escapeHtml(value) : String(value === undefined || value === null ? '' : value);
  }

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

  function renderEditorCard(context) {
@@ -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 uploadHelpText = String(uploadConfig.helpText || 'PNG, JPG, GIF, or 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, 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,
@@ -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>' +
@@ -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>' +
@@ -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>' +
@@ -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) + '" />' +
@@ -8,9 +8,34 @@
    return utils.escapeHtml ? utils.escapeHtml(value) : String(value === undefined || value === null ? '' : value);
  }

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

@@ -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 imageUploadAllowedMimeTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp', 'image/bmp', 'image/avif', 'image/tiff'];
+  var imageUploadAllowedExtensions = ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'];
+  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'));
@@ -825,6 +825,16 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev
      });
    });

+    templateFields.querySelectorAll('input[type="url"][name^="region_webpage_"]').forEach(function (input) {
+      input.addEventListener('input', function () {
+        templateSelectorLock.markEdited();
+      });
+
+      input.addEventListener('change', function () {
+        templateSelectorLock.markEdited();
+      });
+    });
+
    if (existingTemplateId && hasExistingSlideContent()) {
      templateSelectorLock.arm();
      templateSelectorLock.markEdited();
@@ -880,18 +890,42 @@ import { createSlideFormPreviewHelpers } from '/assets/js/slides/slide-form-prev

  templateSelect.addEventListener('change', renderTemplate);
  templateFields.addEventListener('change', function () {
+    var webpageInput = event.target && typeof event.target.matches === 'function' && event.target.matches('input[type="url"][name^="region_webpage_"]');
+    if (webpageInput) {
+      templateSelectorLock.arm();
+      templateSelectorLock.markEdited();
+      return;
+    }
+
    templateSelectorLock.arm();
    templateSelectorLock.markEdited();
    requestPreviewRender();
  });
  templateFields.addEventListener('input', function () {
+    var webpageInput = event.target && typeof event.target.matches === 'function' && event.target.matches('input[type="url"][name^="region_webpage_"]');
+    if (webpageInput) {
+      templateSelectorLock.arm();
+      templateSelectorLock.markEdited();
+      return;
+    }
+
    templateSelectorLock.arm();
    templateSelectorLock.markEdited();
    requestPreviewRender();
  });
  templateFields.addEventListener('click', function (event) {
    var button = event.target && typeof event.target.closest === 'function' ? event.target.closest('[data-api-items-path-reset]') : null;
+    var webpageUpdateButton = event.target && typeof event.target.closest === 'function' ? event.target.closest('[data-webpage-preview-update]') : null;
    if (!button) {
+      if (!webpageUpdateButton) {
+        return;
+      }
+    }
+
+    if (webpageUpdateButton) {
+      templateSelectorLock.arm();
+      templateSelectorLock.markEdited();
+      requestPreviewRender();
      return;
    }

@@ -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;
    }
@@ -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;
@@ -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,
@@ -0,0 +1,31 @@
+// Settings page renderer for the About page.
+
+const { renderView } = require('../../../view');
+
+function buildLibraryList() {
+  return [
+    { name: 'AdminLTE', version: '4.3.1', usage: 'Admin dashboard layout and components', license: 'MIT', url: 'https://adminlte.io/' },
+    { name: 'Animate.css', version: '4.1.1', usage: 'Reusable animation classes', license: 'MIT', url: 'https://animate.style/' },
+    { name: 'Bootstrap Icons', version: '1.11.3', usage: 'Icon set used throughout the UI', license: 'MIT', url: 'https://icons.getbootstrap.com/' },
+    { name: 'Cropper.js', version: '1.6.2', usage: 'Image cropping in the slide editor', license: 'MIT', url: 'https://github.com/fengyuanchen/cropperjs' },
+    { name: 'Express', version: '4.21.2', usage: 'Web server and routing', license: 'MIT', url: 'https://expressjs.com/' },
+    { name: 'Handlebars', version: '4.7.8', usage: 'Server-side view rendering', license: 'MIT', url: 'https://handlebarsjs.com/' },
+    { name: 'hls.js', version: '1.5.15', usage: 'HTTP Live Streaming playback', license: 'Apache-2.0', url: 'https://github.com/video-dev/hls.js' },
+    { name: 'Multer', version: '2.2.0', usage: 'Multipart file uploads', license: 'MIT', url: 'https://github.com/expressjs/multer' },
+    { name: 'MySQL2', version: '3.14.3', usage: 'Database access layer', license: 'MIT', url: 'https://github.com/sidorares/node-mysql2' },
+    { name: 'Sharp', version: '0.35.3', usage: 'Image processing and transforms', license: 'Apache-2.0', url: 'https://sharp.pixelplumbing.com/' },
+    { name: 'TinyMCE', version: '7.7.0', usage: 'Rich text editing for content fields', license: 'GPL-2.0-or-later', url: 'https://www.tiny.cloud/' },
+    { name: 'ws', version: '8.21.0', 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: []
+  });
+};
@@ -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));
+  });
+};
@@ -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 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)
-        });
-      });
-      res.send(pages.renderFontsPage({
-        fonts: fonts,
-        stylesheetHref: library.stylesheetHref
-      }, req.query.message ? String(req.query.message) : '', req.currentUser));
+      const data = await buildFontsPageData(pool, uploadDir, req, common);
+      res.send(pages.renderFontsPage(data, 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 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)
-          });
-        });
+        const data = await buildFontsPageData(pool, uploadDir, req, common);

-        return res.status(400).send(pages.renderFontsPage({
-          fonts: fonts,
-          stylesheetHref: library.stylesheetHref
-        }, String(error.message || 'Font already exists.'), req.currentUser));
+        return res.status(400).send(pages.renderFontsPage(data, String(error.message || 'Font already exists.'), req.currentUser));
      }

      next(error);
@@ -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 || ''
  });
 };
@@ -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>
@@ -5,82 +5,91 @@
  </div>
 </div>

-<div class="row g-3">
-  <div class="col-12 col-xl-4">
-    <div class="card card-outline card-primary">
-      <div class="card-header">
-        <h3 class="card-title">Upload font</h3>
-      </div>
-      <form method="post" action="/settings/fonts" enctype="multipart/form-data">
-        <div class="card-body d-flex flex-column gap-3 pb-0">
-          <div>
-            <label for="font-family" class="form-label">Font family name</label>
-            <input id="font-family" name="font_family" class="form-control" maxlength="128" data-limit-text-length placeholder="Acme Sans" required />
-          </div>
-          <div>
-            <label for="font-file" class="form-label">Font file</label>
-            <input id="font-file" name="font_file" type="file" class="form-control" accept=".woff2,.woff,.ttf,.otf" required />
-          </div>
+<div class="card card-outline card-primary mb-4">
+  <div class="card-header">
+    <h3 class="card-title">Upload font</h3>
+  </div>
+  <style>
+    .font-upload-form .invalid-feedback {
+      display: none !important;
+    }
+  </style>
+  <form method="post" action="/settings/fonts" enctype="multipart/form-data" class="font-upload-form">
+    <div class="card-body">
+      <div class="row g-3 align-items-end">
+        <div class="col-12 col-lg-5">
+        <input id="font-family" name="font_family" class="form-control" maxlength="128" data-limit-text-length placeholder="Acme Sans" required />
+        </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">
-      <div class="card-header">
-        <h3 class="card-title">Managed fonts</h3>
-      </div>
-      <div class="table-responsive fonts-table-responsive">
-        <table class="table table-striped align-middle mb-0">
-          <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 class="card card-outline card-primary" data-table-search-container data-table-pagination-card>
+  <div class="card-header">
+    <h3 class="card-title">Managed fonts</h3>
+    <div class="card-tools d-flex flex-nowrap align-items-center gap-2">
+      <div class="input-group input-group-sm flex-shrink-1" style="width: min(14rem, 100%);">
+        <span class="input-group-text" aria-hidden="true"><i class="bi bi-search"></i></span>
+        <input type="search" class="form-control" placeholder="Search fonts" aria-label="Search fonts" data-table-search />
      </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>
@@ -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">
-                v{{appVersion}}
+              <div class="sidebar-version__inner border-top pt-2 d-flex align-items-center justify-content-between gap-3">
+                <span>v{{appVersion}}</span>
+                <a href="/settings/about" class="text-secondary text-decoration-none text-nowrap">Pulse Signage</a>
              </div>
            </div>
          </div>
@@ -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">
@@ -28,6 +28,22 @@
    display: block;
  }

+  #popup-preview-canvas iframe {
+    width: 100%;
+    height: 100%;
+    border: 0;
+    display: block;
+    overflow: hidden;
+  }
+
+  #popup-preview-canvas .slide-preview-webpage-region iframe {
+    background: #fff;
+  }
+
+  #popup-preview-canvas .slide-preview-html-region iframe {
+    background: transparent;
+  }
+
  .slide-preview-text-content {
    line-height: 1.5;
  }
@@ -0,0 +1,59 @@
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+require('../src/common');
+
+const pages = require('../src/web/pages');
+const registerAboutRoutes = require('../src/web/routes/settings/about/routes');
+
+test('about page renders the footer link beside the version and lists bundled libraries', () => {
+  const html = pages.renderAboutPage({ id: 1 });
+
+  const orderedNames = ['AdminLTE', 'Animate.css', 'Bootstrap Icons', 'Cropper.js', 'Express', 'Handlebars', 'hls.js', 'Multer', 'MySQL2', 'Sharp', 'TinyMCE', 'ws'];
+  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, /v2\.7\.4/);
+  assert.match(html, /About Pulse/);
+  assert.match(html, /href="\/settings\/about"/);
+  assert.match(html, /Cropper\.js/);
+  assert.match(html, /TinyMCE/);
+  assert.match(html, /7\.7\.0/);
+  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');
+});
@@ -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']);
+});
@@ -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"/);
+});
@@ -10,6 +10,7 @@ const {
  mediaKind,
  normalizeSlide,
  renderEditorJsContent,
+  renderHtmlRegionContent,
  sanitizeRichText
 } = require('../src/player/render-helpers');

@@ -86,4 +87,27 @@ test('renderEditorJsContent sanitizes editor blocks and wraps legacy text', () =
 test('timetable region registers the timetable type', () => {
  assert.ok(timetableRegionSource.includes("registry.register('timetable'"));
  assert.ok(timetableRegionSource.includes("sanitizeRichText(substituteTimetableVariables(value"));
+});
+
+test('shared iframe renderers size preview content explicitly', () => {
+  const playerHtmlRegionSource = fs.readFileSync(require.resolve('../src/player/regions/html.js'), 'utf8');
+  const playerWebpageRegionSource = fs.readFileSync(require.resolve('../src/player/regions/webpage.js'), 'utf8');
+  const playerRenderHelpersSource = fs.readFileSync(require.resolve('../src/player/render-helpers.js'), 'utf8');
+  const slideThumbnailPreviewSource = fs.readFileSync(require.resolve('../src/web/lib/media/slide-thumbnail-preview.js'), 'utf8');
+  const slideThumbnailsSource = fs.readFileSync(require.resolve('../src/web/lib/media/slide-thumbnails.js'), 'utf8');
+
+  assert.ok(playerHtmlRegionSource.includes('style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"'));
+  assert.ok(playerWebpageRegionSource.includes('style="width:100%;height:100%;border:0;display:block;background:#fff;overflow:hidden;"'));
+  assert.ok(playerRenderHelpersSource.includes('style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"'));
+  assert.ok(slideThumbnailPreviewSource.includes('style="width:100%;height:100%;border:0;display:block;background:#fff;overflow:hidden;"'));
+  assert.ok(slideThumbnailPreviewSource.includes('style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"'));
+  assert.ok(slideThumbnailsSource.includes('style="width:100%;height:100%;border:0;display:block;background:#fff;overflow:hidden;"'));
+  assert.ok(slideThumbnailsSource.includes('style="width:100%;height:100%;border:0;display:block;background:transparent;overflow:hidden;"'));
+});
+
+test('html region helpers unwrap object-shaped values before rendering', () => {
+  const rendered = renderHtmlRegionContent({ html: '<div>Hi</div>' });
+
+  assert.match(rendered, /srcdoc="&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;style&gt;html,body\{margin:0;width:100%;height:100%;overflow:hidden;background:transparent;\}&lt;\/style&gt;&lt;\/head&gt;&lt;body&gt;&lt;div&gt;Hi&lt;\/div&gt;&lt;\/body&gt;&lt;\/html&gt;"/);
+  assert.doesNotMatch(rendered, /\[object Object\]/);
 });
@@ -6,6 +6,8 @@ const slideFormEditorSource = fs.readFileSync(require.resolve('../src/web/public
 const slideFormSource = fs.readFileSync(require.resolve('../src/web/public/js/slides/slide-form.js'), 'utf8');
 const slideThumbnailPreviewSource = fs.readFileSync(require.resolve('../src/web/lib/media/slide-thumbnail-preview.js'), 'utf8');
 const slideThumbnailsSource = fs.readFileSync(require.resolve('../src/web/lib/media/slide-thumbnails.js'), 'utf8');
+const slideHtmlRegionSource = fs.readFileSync(require.resolve('../src/web/public/js/regions/type/html.js'), 'utf8');
+const slideWebpageRegionSource = fs.readFileSync(require.resolve('../src/web/public/js/regions/type/webpage.js'), 'utf8');

 test('slide editor disables pasted data images in TinyMCE', () => {
  assert.ok(slideFormEditorSource.includes('paste_data_images: false'));
@@ -56,4 +58,24 @@ test('slide form queues editor image cleanup on save and close', () => {
 test('slide thumbnail previews treat image-only text as visible content', () => {
  assert.ok(slideThumbnailPreviewSource.includes('/<img\\b/i.test(raw)'));
  assert.ok(slideThumbnailsSource.includes('/<img\\b/i.test(raw)'));
+});
+
+test('popup preview falls back to iframe sizing rules', () => {
+  const popupPreviewSource = fs.readFileSync(require.resolve('../src/web/views/signage/slides/popup-preview.hbs'), 'utf8');
+
+  assert.ok(popupPreviewSource.includes('#popup-preview-canvas iframe'));
+  assert.ok(popupPreviewSource.includes('#popup-preview-canvas .slide-preview-webpage-region iframe'));
+  assert.ok(popupPreviewSource.includes('#popup-preview-canvas .slide-preview-html-region iframe'));
+});
+
+test('browser preview helpers normalize object-shaped HTML and webpage values', () => {
+  assert.ok(slideHtmlRegionSource.includes('normalizePreviewValue'));
+  assert.ok(slideWebpageRegionSource.includes('normalizePreviewValue'));
+});
+
+test('webpage preview updates only through the explicit button', () => {
+  assert.ok(slideWebpageRegionSource.includes('input-group flex-nowrap'));
+  assert.ok(slideWebpageRegionSource.includes('data-webpage-preview-update'));
+  assert.ok(slideFormSource.includes('input[type="url"][name^="region_webpage_"]'));
+  assert.ok(slideFormSource.includes('requestPreviewRender();'));
 });
Author	SHA1	Message	Date
lzstealth	1f1ad5d61f	Release 2.7.4 Publish Docker Image / build-and-push (./build/Dockerfile, git.lzstealth.com/lzstealth/pulse-signage-web, web) (push) Successful in 1m15s Details Publish Docker Image / build-and-push (./build/Dockerfile.player, git.lzstealth.com/lzstealth/pulse-signage-player, player) (push) Successful in 32s Details	2026-08-15 12:30:31 +01:00
lzstealth	f0177e6628	Release 2.7.3 Publish Docker Image / build-and-push (./build/Dockerfile, git.lzstealth.com/lzstealth/pulse-signage-web, web) (push) Successful in 1m15s Details Publish Docker Image / build-and-push (./build/Dockerfile.player, git.lzstealth.com/lzstealth/pulse-signage-player, player) (push) Successful in 32s Details	2026-08-15 11:43:07 +01:00
lzstealth	15dc6eb7f2	Release 2.7.2 Publish Docker Image / build-and-push (./build/Dockerfile, git.lzstealth.com/lzstealth/pulse-signage-web, web) (push) Successful in 1m16s Details Publish Docker Image / build-and-push (./build/Dockerfile.player, git.lzstealth.com/lzstealth/pulse-signage-player, player) (push) Successful in 32s Details	2026-08-14 23:51:38 +01:00