Fix template region stacking order

src/data/templates.js

@@ -6,6 +6,11 @@ const animationPresets = require('#src/web/public/js/templates/animation-presets
 const TEMPLATE_NAME_MAX_LENGTH = 255;
 const REGION_NAME_MAX_LENGTH = 255;
 
+function normalizeRegionZIndex(value) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? Math.max(1, Math.round(parsed)) : 1;
+}
+
 function sanitizeBackgroundColor(value) {
   const raw = String(value || '').trim();
   if (/^#[0-9a-fA-F]{6}$/.test(raw) || /^#[0-9a-fA-F]{3}$/.test(raw)) {
@@ -185,7 +190,7 @@ function extractTemplateRegions(body) {
           y: Number(region.y || 0),
           width: Number(region.width || 100),
           height: Number(region.height || 100),
-          z_index: Number(region.z_index || 0)
+          z_index: normalizeRegionZIndex(region.z_index)
         };
       }).filter((region) => region.region_key && region.label);
     }
@@ -221,7 +226,7 @@ function extractTemplateRegions(body) {
       y: Number(ys[i] || 0),
       width: Number(widths[i] || 100),
       height: Number(heights[i] || 100),
-      z_index: Number(zs[i] || 0)
+      z_index: normalizeRegionZIndex(zs[i])
     });
   }
 

src/player/public/css/player.css

@@ -544,6 +544,7 @@ body.screen-blackout #app {
 
 .template-stage {
   position: relative;
+  isolation: isolate;
   width: 100%;
   height: 100%;
 }

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

@@ -273,7 +273,7 @@
       y: Number(card.querySelector('[name="region_y[]"]').value || 0),
       width: Number(card.querySelector('[name="region_width[]"]').value || 0),
       height: Number(card.querySelector('[name="region_height[]"]').value || 0),
-      z_index: Number(card.querySelector('[name="region_z[]"]').value || 0)
+      z_index: Math.max(1, Math.round(Number(card.querySelector('[name="region_z[]"]').value) || 1))
     };
   }
 
@@ -292,7 +292,7 @@
     if (values.y !== undefined) { card.querySelector('[name="region_y[]"]').value = Math.round(values.y); }
     if (values.width !== undefined) { card.querySelector('[name="region_width[]"]').value = Math.round(values.width); }
     if (values.height !== undefined) { card.querySelector('[name="region_height[]"]').value = Math.round(values.height); }
-    if (values.z_index !== undefined) { card.querySelector('[name="region_z[]"]').value = Math.round(values.z_index); }
+    if (values.z_index !== undefined) { card.querySelector('[name="region_z[]"]').value = Math.max(1, Math.round(Number(values.z_index) || 1)); }
   }
 
   function clampRegion(region, size, minSize) {

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

@@ -300,7 +300,7 @@
       y: Number(card.querySelector('[name="region_y[]"]').value || 0),
       width: Number(card.querySelector('[name="region_width[]"]').value || 0),
       height: Number(card.querySelector('[name="region_height[]"]').value || 0),
-      z_index: Number(card.querySelector('[name="region_z[]"]').value || 0)
+      z_index: Math.max(1, Math.round(Number(card.querySelector('[name="region_z[]"]').value) || 1))
     };
   }
 
@@ -956,7 +956,7 @@
     if (values.y !== undefined) { card.querySelector('[name="region_y[]"]').value = Math.round(values.y); }
     if (values.width !== undefined) { card.querySelector('[name="region_width[]"]').value = Math.round(values.width); }
     if (values.height !== undefined) { card.querySelector('[name="region_height[]"]').value = Math.round(values.height); }
-    if (values.z_index !== undefined) { card.querySelector('[name="region_z[]"]').value = Math.round(values.z_index); }
+    if (values.z_index !== undefined) { card.querySelector('[name="region_z[]"]').value = Math.max(1, Math.round(Number(values.z_index) || 1)); }
   }
 
   function getOverlayRect() {
@@ -1290,7 +1290,7 @@
     writeAnimationConfig(card, region.animation_json);
     card.querySelector('[name="region_x[]"]').value = valueOrDefault(region.x, 80);
     card.querySelector('[name="region_y[]"]').value = valueOrDefault(region.y, 80);
-    card.querySelector('[name="region_z[]"]').value = valueOrDefault(region.z_index, 1);
+    card.querySelector('[name="region_z[]"]').value = Math.max(1, Math.round(Number(region.z_index) || 1));
     card.querySelector('[name="region_width[]"]').value = valueOrDefault(region.width, 300);
     card.querySelector('[name="region_height[]"]').value = valueOrDefault(region.height, 120);
     updateRegionLockRatioState(card);
@@ -1382,6 +1382,9 @@
         syncLockedDimensions(card, changedField, true);
       });
       input.addEventListener('change', function () {
+        if (field === 'z') {
+          input.value = Math.max(1, Math.round(Number(input.value) || 1));
+        }
         syncLockedDimensions(card, changedField);
       });
     });

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

@@ -171,7 +171,7 @@
       <div class="region-field-grid region-field-grid--position">
         <label>X<input class="form-control" type="number" name="region_x[]" value="80" required /></label>
         <label>Y<input class="form-control" type="number" name="region_y[]" value="80" required /></label>
-        <label>Z-Index<input class="form-control" type="number" name="region_z[]" value="1" required /></label>
+        <label>Z-Index<input class="form-control" type="number" name="region_z[]" min="1" step="1" value="1" required /></label>
       </div>
       <div class="region-field-grid region-field-grid--size">
         <label>Width<input class="form-control" type="number" name="region_width[]" value="300" required /></label>