Fix template region stacking order

test/templates.test.js

@@ -61,6 +61,21 @@ test('extractTemplateRegions normalizes JSON regions and filters invalid rows',
   }]);
 });
 
+test('extractTemplateRegions keeps JSON and form z-index values at positive integers', () => {
+  const values = [-5, 0, '', undefined, 'invalid', 'Infinity', 1, '4', 2.6];
+  const expected = [1, 1, 1, 1, 1, 1, 1, 4, 3];
+  const jsonRegions = extractTemplateRegions({
+    regions_json: JSON.stringify(values.map((value, index) => ({ region_name: `Region ${index}`, z_index: value })))
+  });
+  const formRegions = extractTemplateRegions({
+    'region_key[]': values.map((value, index) => `Region ${index}`),
+    'region_z[]': values
+  });
+
+  assert.deepEqual(jsonRegions.map((region) => region.z_index), expected);
+  assert.deepEqual(formRegions.map((region) => region.z_index), expected);
+});
+
 test('buildTemplatePayload resolves canvas size and rejects duplicate region names', async () => {
   const pool = {
     async query(sql, params) {
@@ -106,7 +121,7 @@ test('buildTemplatePayload resolves canvas size and rejects duplicate region nam
       y: 0,
       width: 100,
       height: 100,
-      z_index: 0
+      z_index: 1
     }]
   });
 
@@ -184,6 +199,7 @@ test('template create page renders the background remove control', () => {
   assert.match(html, /data-media-picker-file-input="background-image"/);
   assert.match(html, /id="background-image"/);
   assert.match(html, /placeholder="type_1"/);
+  assert.match(html, /name="region_z\[\]" min="1" step="1" value="1" required/);
   assert.match(html, /Save and Close/);
   assert.match(html, /Save and New/);
   assert.match(html, /data-confirm-unsaved="You've made changes\. Are you sure you want to leave this page\?"/);
@@ -265,6 +281,7 @@ test('template preview and live output keep matching visual CSS contracts', () =
   const layoutProperties = ['position', 'overflow', 'box-sizing'];
   const mediaProperties = ['width', 'height', 'object-fit', 'display'];
 
+  assert.equal(readCssDeclarations(playerCss, '.template-stage').isolation, 'isolate');
   assert.deepEqual(
     Object.fromEntries(layoutProperties.map((property) => [property, readCssDeclarations(previewCss, '.slide-preview-region')[property]])),
     Object.fromEntries(layoutProperties.map((property) => [property, readCssDeclarations(playerCss, '.template-region')[property]]))
@@ -405,6 +422,19 @@ test('region coordinate and stacking fields immediately refresh the preview and
   assert.equal(harness.dirtyCount, 3);
 });
 
+test('region stacking stays above the background while typing and clamps on commit', () => {
+  const harness = createRegionCardHarness();
+  for (const value of ['-5', '0', '']) {
+    harness.edit('z', value);
+    assert.equal(harness.previews.at(-1).z_index, 1);
+    harness.edit('z', value, 'change');
+    assert.equal(harness.value('z'), 1);
+  }
+  harness.edit('z', '4', 'change');
+  assert.equal(harness.value('z'), 4);
+  assert.equal(harness.previews.at(-1).z_index, 4);
+});
+
 test('region dimensions allow clearing and typing below the minimum until committed', () => {
   for (const field of ['width', 'height']) {
     const harness = createRegionCardHarness();