Release 2.7.3

Release 2.7.2
Add player keyboard controls and release 2.7.1
2026-08-15 11:43:07 +01:00 · 2026-08-14 23:51:38 +01:00 · 2026-08-14 13:50:40 +01:00
38 changed files with 1337 additions and 148 deletions
@@ -2,6 +2,31 @@

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

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

 ### Added
@@ -1,6 +1,6 @@
 {
  "name": "pulse-signage-player",
-  "version": "2.7.0",
+  "version": "2.7.3",
  "private": false,
  "description": "Pulse Signage player application bundle",
  "main": "src/common.js",
@@ -1,6 +1,6 @@
 {
  "name": "pulse-signage-web",
-  "version": "2.7.0",
+  "version": "2.7.3",
  "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.3",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "pulse-signage",
-      "version": "2.6.15",
+      "version": "2.7.3",
      "dependencies": {
        "@sparticuz/chromium": "^137.0.0",
        "animate.css": "^4.1.1",
@@ -1,6 +1,6 @@
 {
  "name": "pulse-signage",
-  "version": "2.7.0",
+  "version": "2.7.3",
  "private": false,
  "description": "Pulse Signage application with MySQL and media storage",
  "repository": {
@@ -427,6 +427,42 @@ function normalizeBoolean(value) {
  return null;
 }

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

@@ -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;
@@ -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 || ''
  });
 };
@@ -5,67 +5,77 @@
  </div>
 </div>

-<div class="row g-3">
-  <div class="col-12 col-xl-4">
-    <div class="card card-outline card-primary">
+<div class="card card-outline card-primary mb-4">
  <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>
+  <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>
-            <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 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>
+      </div>
+      <div class="text-muted small mt-3">Accepted formats: WOFF2, WOFF, TTF, and OTF.</div>
+    </div>
  </form>
-    </div>
-  </div>
+</div>

-  <div class="col-12 col-xl-8">
-    <div class="card card-outline card-primary">
+<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 class="table-responsive fonts-table-responsive">
-        <table class="table table-striped align-middle mb-0">
+    </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>Family</th>
-              <th>File</th>
-              <th>Format</th>
-              <th>Status</th>
+          <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>
-                  <td class="fw-semibold">{{family}}</td>
-                  <td class="text-break">{{fileName}}</td>
-                  <td>{{format}}</td>
-                  <td>
+          <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">Enabled</span>
+                  <span class="badge text-bg-success" data-font-status-badge>Enabled</span>
                {{else}}
-                      <span class="badge text-bg-secondary">Disabled</span>
+                  <span class="badge text-bg-secondary" data-font-status-badge>Disabled</span>
                {{/if}}
              </td>
-                  <td class="text-nowrap">
-                    <form method="post" action="/settings/fonts/{{id}}/toggle" class="d-inline">
+              <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" {{#if inUse}}disabled{{/if}}>Delete</button>
+                    <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}}
@@ -74,13 +84,12 @@
            </tr>
          {{/each}}
        {{else}}
-              <tr>
+          <tr data-table-search-empty-default>
            <td colspan="5" class="empty">No managed fonts yet.</td>
          </tr>
        {{/if}}
      </tbody>
    </table>
  </div>
-    </div>
-  </div>
+  {{> table-pagination pagination=pagination basePath="/settings/fonts" alwaysShow=true}}
 </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,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"/);
+});
@@ -92,6 +92,7 @@ function createSandbox() {
    playRegionAnimations() {
      calls.playRegionAnimations += 1;
    },
+    addEventListener() {},
    pulsePlayerRegionTypes: {
      list() {
        return [
@@ -68,6 +68,7 @@ test('playlist refresh queues updates until the next slide transition', async ()
    scheduleRefreshRetry() {},
    syncWebpagePreloads() {},
    syncRtmpWarmups() {},
+    addEventListener() {},
    showCurrent() {
      calls.showCurrent += 1;
    },
@@ -209,6 +210,7 @@ test('single-slide playlists re-render the active slide instead of refreshing af
    scheduleRefreshRetry() {},
    syncWebpagePreloads() {},
    syncRtmpWarmups() {},
+    addEventListener() {},
    clearActiveSlidesCache() {},
    showCurrent() {},
    sendCommandState() {},
@@ -347,6 +349,7 @@ test('deferred playlist updates preserve the current slide index', async () => {
    scheduleRefreshRetry() {},
    syncWebpagePreloads() {},
    syncRtmpWarmups() {},
+    addEventListener() {},
    clearActiveSlidesCache() {},
    showCurrent() {},
    sendCommandState() {},
@@ -406,6 +409,87 @@ test('deferred playlist updates preserve the current slide index', async () => {
  assert.equal(sandbox.index, 1);
 });

+test('player page arrow keys move between slides', async () => {
+  const handlers = Object.create(null);
+  const calls = [];
+
+  const sandbox = {
+    window: null,
+    console,
+    Array,
+    Object,
+    String,
+    Boolean,
+    Number,
+    Math,
+    Date,
+    JSON,
+    Promise,
+    setTimeout,
+    clearTimeout,
+    location: { origin: 'http://localhost', href: 'http://localhost/screen/test2' },
+    addEventListener(type, handler) {
+      handlers[type] = handler;
+    },
+    slides: [{ id: 1 }, { id: 2 }, { id: 3 }],
+    lastRenderedSlide: { id: 2 },
+    index: 1,
+    timer: null,
+    slideOutroTimers: [],
+    getCurrentActiveSlides() {
+      return sandbox.slides;
+    },
+    clearSlideTimer() {},
+    applyPendingPlaylistUpdate() {},
+    renderSlideAtIndex(_sourceSlides, targetIndex) {
+      calls.push(targetIndex);
+    }
+  };
+  sandbox.window = sandbox;
+
+  const scriptPath = path.join(__dirname, '..', 'src', 'player', 'public', 'js', 'player-page-commands.js');
+  const script = fs.readFileSync(scriptPath, 'utf8');
+  vm.runInNewContext(script, sandbox, { filename: scriptPath });
+
+  assert.equal(typeof handlers.keydown, 'function');
+
+  let prevented = false;
+  handlers.keydown({
+    key: 'ArrowLeft',
+    target: {},
+    preventDefault() {
+      prevented = true;
+    }
+  });
+
+  assert.deepEqual(calls, [0]);
+  assert.equal(prevented, true);
+
+  sandbox.lastRenderedSlide = { id: 2 };
+  sandbox.index = 1;
+  prevented = false;
+  handlers.keydown({
+    key: 'ArrowRight',
+    target: {},
+    preventDefault() {
+      prevented = true;
+    }
+  });
+
+  assert.deepEqual(calls, [0, 2]);
+  assert.equal(prevented, true);
+
+  handlers.keydown({
+    key: 'ArrowLeft',
+    target: { tagName: 'INPUT' },
+    preventDefault() {
+      throw new Error('should not be called for editable targets');
+    }
+  });
+
+  assert.deepEqual(calls, [0, 2]);
+});
+
 test('removing the currently visible slide from a two-slide playlist applies the one-slide update immediately', async () => {
  const calls = {
    showCurrent: 0,
@@ -464,6 +548,7 @@ test('removing the currently visible slide from a two-slide playlist applies the
    scheduleRefreshRetry() {},
    syncWebpagePreloads() {},
    syncRtmpWarmups() {},
+    addEventListener() {},
    clearActiveSlidesCache() {},
    showCurrent() {
      calls.showCurrent += 1;
@@ -10,6 +10,7 @@ const {
  mediaKind,
  normalizeSlide,
  renderEditorJsContent,
+  renderHtmlRegionContent,
  sanitizeRichText
 } = require('../src/player/render-helpers');

@@ -87,3 +88,26 @@ 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'));
@@ -57,3 +59,23 @@ 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	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
lzstealth	75b5cb5a6b	Add player keyboard controls and release 2.7.1 Publish Docker Image / build-and-push (./build/Dockerfile, git.lzstealth.com/lzstealth/pulse-signage-web, web) (push) Successful in 1m17s 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 13:50:40 +01:00