Zoom: compose the box as a real 2x layer above the background (Unit: zoom layer + magnification proof)

Right-click now creates a transient ZoomSceneElement at z-index 1 whose pixels are a
genuine 2x magnified sample of the backdrop (live capture under art), composited into
stream/recording like any layer while the output crop stays the tier. All shapes are
centered on the click and clamped to frame; healed on load/scene-create, never persisted,
hidden from the layers list + element template (IsZoomLayer). BuildCompositorOptions is
now internal = always tier crop (test seam). ZoomFrameBuilder is a pure static sampler
(box/2 window centered on the box center, single-slot cache) proven by a banded-backdrop
test; LayerReorderPersistenceTests drag resolves rows by item since the collapsed zoom
row shifts container indices. Also books TASK 51 (webcam background Remove + Blur) and
syncs memory docs (HANDOFF, MyMistakes, indexes). Full suite: 405 passed, 0 warnings.

ytLive.Tests/LayerReorderPersistenceTests.cs

@@ -94,11 +94,15 @@ public sealed class LayerReorderPersistenceTests
             var list = (FocusPreservingListBox)panel.FindName("SourceList")!;
             list.UpdateLayout();
 
-            // Elements = [Background, ImgA, ImgB, ImgC]. Physically drag ImgC
-            // (row 3) up onto ImgA (row 1): the handlers reorder live elements to
-            // [Background, ImgC, ImgA, ImgB] and EndListDrag must persist that.
-            var from = RowScreenPoint(list, 3);
-            var to = RowScreenPoint(list, 1);
+            // Elements = [Background, Zoom(placeholder, collapsed), ImgA, ImgB,
+            // ImgC]. Physically drag ImgC up onto ImgA: the handlers reorder the
+            // live elements to [Background, Zoom, ImgC, ImgA, ImgB] and EndListDrag
+            // must persist that. Rows are resolved BY ITEM — the collapsed zoom row
+            // shifts container indices, but ItemContainerGenerator maps items to
+            // their (collapsed = zero-height) containers transparently.
+            var sources = vm.StagedScene.Elements.OfType<Source>().ToArray();
+            var from = RowScreenPoint(list, sources.First(s => s.Name == "ImgC"));
+            var to = RowScreenPoint(list, sources.First(s => s.Name == "ImgA"));
 
             SetCursorPos((int)from.X, (int)from.Y);
             LetInputSettle(80);
@@ -133,13 +137,13 @@ public sealed class LayerReorderPersistenceTests
         }
     }
 
-    /// <summary>Screen (device-pixel) point one-third into the list row — over the
-    /// name TextBlock, away from the per-row buttons/rename TextBox.</summary>
-    private static Point RowScreenPoint(FocusPreservingListBox list, int index)
+    /// <summary>Screen (device-pixel) point one-third into an item's list row — over
+    /// the name TextBlock, away from the per-row buttons/rename TextBox.</summary>
+    private static Point RowScreenPoint(FocusPreservingListBox list, Models.SceneElement item)
     {
-        var item = (ListBoxItem)list.ItemContainerGenerator.ContainerFromIndex(index)!;
-        var inList = item.TransformToVisual(list)
-            .Transform(new Point(Math.Min(30, item.ActualWidth - 12), item.ActualHeight / 2));
+        var container = (ListBoxItem)list.ItemContainerGenerator.ContainerFromItem(item)!;
+        var inList = container.TransformToVisual(list)
+            .Transform(new Point(Math.Min(30, container.ActualWidth - 12), container.ActualHeight / 2));
         return list.PointToScreen(inList);
     }
 
@@ -251,7 +255,12 @@ public sealed class LayerReorderPersistenceTests
 
             // Restart: a brand-new LayoutStore reading the same DB must restore
             // the cross-type order exactly — webcam between Image and Web
-            // Resource-0, not appended after all sources.
+            // Resource-0, not appended after all sources. Only persisted elements
+            // count: the transient zoom placeholder (TASK 51) is never written,
+            // so the DB order naturally has no seat for it.
+            expected = elements.Where(e => e is Source or WebcamSceneConfig)
+                .Select(e => e.Name).ToArray();
+
             Assert.True(PumpUntil(() =>
                     TryReadSceneOrder(tempDb, out var names) && names.SequenceEqual(expected),
                     TimeSpan.FromSeconds(10)),

ytLive.Tests/ZoomBoxInteractionTests.cs

@@ -1,4 +1,5 @@
 using System;
+using System.Linq;
 using System.Windows;
 using System.Windows.Controls;
 using System.Windows.Media;
@@ -11,12 +12,13 @@ using ytLive.ViewModels;
 namespace ytLive.Tests;
 
 /// <summary>
-/// Verifies the zoom box created by a right-click in the live preview: each
-/// ZoomView Shape procures the right bounding box (circle is square and
-/// centered on the click, phone is a tall 9:16 rect, tablet a wide 16:9 rect
-/// both anchored top-left at the click), the box stays fully inside the
-/// 1920x1080 preview, and the UI renders the matching outline with the zoomed
-/// region clipped to the shape.
+/// Verifies the zoom box created by a right-click in the live preview: every
+/// ZoomView shape procures the right bounding box CENTERED on the click (circle
+/// square, phone 9:16, tablet 16:9), the box stays fully inside the 1920x1080
+/// preview, and — because the box is now a real composited layer (TASK 51) —
+/// a ZoomSceneElement placeholder sits at z-index 1 whose rect mirrors the box,
+/// its Kind flips Dynamic only while active, and the output crop stays the tier
+/// (the box is never the crop source).
 /// </summary>
 [Collection("RealApp")]
 public sealed class ZoomBoxInteractionTests
@@ -29,7 +31,7 @@ public sealed class ZoomBoxInteractionTests
     }
 
     [Fact]
-    public void Zoom_Shape_Controls_Box_Aspect_Anchor_And_Render()
+    public void Zoom_Shape_Controls_Box_Aspect_Anchor_Layer_And_Render()
     {
         _app.Run(Run);
     }
@@ -44,8 +46,12 @@ public sealed class ZoomBoxInteractionTests
         {
             window.Show();
             window.UpdateLayout();
+            Assert.NotNull(vm.StagedScene);
+            // The healed zoom placeholder sits at z-index 1, inert.
+            var placeholder = (ZoomSceneElement)vm.StagedScene.Elements[1];
+            Assert.False(placeholder.IsZoomActive);
+            Assert.Equal(ElementKind.Static, placeholder.Kind);
 
-            // Same internal test seam as IsRecording allows ActivateZoom (IsEditMode goes false).
             vm.IsRecording = true;
             var pane = (UserControl)window.FindName("PreviewPane")!;
             var zoomBox = (Grid)pane.FindName("ZoomBox")!;
@@ -59,6 +65,7 @@ public sealed class ZoomBoxInteractionTests
             Assert.Equal(vm.ZoomState.Width, vm.ZoomState.Height, 3);
             Assert.Equal(1000 - vm.ZoomState.Width / 2, vm.ZoomState.X, 3);
             Assert.Equal(500 - vm.ZoomState.Height / 2, vm.ZoomState.Y, 3);
+            AssertTrueActiveLayer(vm);
 
             window.UpdateLayout();
             Assert.Equal(Visibility.Visible, zoomBox.Visibility);
@@ -66,26 +73,28 @@ public sealed class ZoomBoxInteractionTests
             Assert.Equal(Visibility.Visible, circleOutline.Visibility);
             Assert.Equal(Visibility.Collapsed, rectOutline.Visibility);
 
-            // Phone (vertical rectangle): tall 9:16 box, click point is the TOP-LEFT corner.
+            // Phone (vertical rectangle): tall 9:16 box, click point is the CENTER.
             vm.ZoomShape = ZoomShape.VerticalRectangle;
-            vm.ActivateZoom(200, 100);
+            vm.ActivateZoom(960, 540);
             Assert.True(vm.ZoomState.Height > vm.ZoomState.Width);
             Assert.Equal(9.0 / 16.0, vm.ZoomState.Width / vm.ZoomState.Height, 3);
-            Assert.Equal(200, vm.ZoomState.X, 3);
-            Assert.Equal(100, vm.ZoomState.Y, 3);
+            Assert.Equal(960 - vm.ZoomState.Width / 2, vm.ZoomState.X, 3);
+            Assert.Equal(540 - vm.ZoomState.Height / 2, vm.ZoomState.Y, 3);
+            AssertTrueActiveLayer(vm);
 
             window.UpdateLayout();
             Assert.Null(zoomBox.Clip);
             Assert.Equal(Visibility.Collapsed, circleOutline.Visibility);
             Assert.Equal(Visibility.Visible, rectOutline.Visibility);
 
-            // Tablet (horizontal rectangle): wide 16:9 box, anchored top-left.
+            // Tablet (horizontal rectangle): wide 16:9 box, click point is the CENTER.
             vm.ZoomShape = ZoomShape.HorizontalRectangle;
-            vm.ActivateZoom(200, 100);
+            vm.ActivateZoom(960, 540);
             Assert.True(vm.ZoomState.Width > vm.ZoomState.Height);
             Assert.Equal(16.0 / 9.0, vm.ZoomState.Width / vm.ZoomState.Height, 3);
-            Assert.Equal(200, vm.ZoomState.X, 3);
-            Assert.Equal(100, vm.ZoomState.Y, 3);
+            Assert.Equal(960 - vm.ZoomState.Width / 2, vm.ZoomState.X, 3);
+            Assert.Equal(540 - vm.ZoomState.Height / 2, vm.ZoomState.Y, 3);
+            AssertTrueActiveLayer(vm);
 
             // Clamp keeps the box fully inside the 1920x1080 preview even for a
             // corner click that would otherwise overhang it.
@@ -94,6 +103,20 @@ public sealed class ZoomBoxInteractionTests
             Assert.True(vm.ZoomState.X >= 0 && vm.ZoomState.Y >= 0);
             Assert.True(vm.ZoomState.X + vm.ZoomState.Width <= frameW);
             Assert.True(vm.ZoomState.Y + vm.ZoomState.Height <= frameH);
+            AssertTrueActiveLayer(vm);
+
+            // The box is a composited layer, NEVER the crop: output stays the tier.
+            var opts = vm.BuildCompositorOptions();
+            Assert.True(opts.SourceRectWidth > vm.ZoomState.Width);
+            Assert.Equal((int)Math.Round(vm.OutputRectWidth), opts.SourceRectWidth);
+            Assert.Equal((int)Math.Round(vm.OutputRectHeight), opts.SourceRectHeight);
+
+            // Dismiss restores the inert placeholder (Kind back to Static).
+            vm.DismissZoom();
+            Assert.False(vm.IsZoomActive);
+            Assert.False(placeholder.IsZoomActive);
+            Assert.False(placeholder.IsVisible);
+            Assert.Equal(ElementKind.Static, placeholder.Kind);
         }
         finally
         {
@@ -103,4 +126,17 @@ public sealed class ZoomBoxInteractionTests
             try { System.IO.File.Delete(tempDb); } catch { }
         }
     }
+
+    private static void AssertTrueActiveLayer(MainViewModel vm)
+    {
+        var zoom = Assert.IsType<ZoomSceneElement>(vm.StagedScene!.Elements[1]);
+        Assert.True(zoom.IsZoomActive);
+        Assert.True(zoom.IsVisible);
+        Assert.Equal(ElementKind.Dynamic, zoom.Kind);
+        Assert.Equal(vm.ZoomState.X, zoom.X, 3);
+        Assert.Equal(vm.ZoomState.Y, zoom.Y, 3);
+        Assert.Equal(vm.ZoomState.Width, zoom.Width, 3);
+        Assert.Equal(vm.ZoomState.Height, zoom.Height, 3);
+        Assert.Equal(vm.ZoomShape == ZoomShape.Circle ? ClipShape.Round : ClipShape.Traditional, zoom.ClipShape);
+    }
 }

ytLive.Tests/ZoomFrameBuilderTests.cs

@@ -0,0 +1,83 @@
+using System;
+using Xunit;
+using ytLive.Services;
+using ytLive.ViewModels;
+
+namespace ytLive.Tests;
+
+/// <summary>
+/// Proves the zoom layer's pixels are the GENUINE 2x magnification of the
+/// backdrop: the source window is the box/2 interior centred on the box centre
+/// (the same region as the preview's VisualBrush), with the static art composited
+/// over the live capture exactly as the SceneCompositor draws the backdrop. This
+/// is the "don't ship a magnifier you only think exists" proof — a 1x box, a
+/// mis-positioned window, or a wrong backdrop layer all fail hard below.
+/// </summary>
+public sealed class ZoomFrameBuilderTests
+{
+    private static VideoFrame BandedBackdrop(int bandW, int bandCount)
+    {
+        var w = bandW * bandCount;
+        const int h = 1080;
+        var buf = new byte[w * h * 4];
+        var bandColors = new (byte B, byte G, byte R)[]
+        {
+            (10, 20, 30),  // band 0
+            (0, 0, 255),   // band 1 red
+            (0, 255, 0),   // band 2 green — the box window lands here
+            (255, 0, 0),   // band 3 blue
+        };
+        for (var y = 0; y < h; y++)
+        {
+            for (var x = 0; x < w; x++)
+            {
+                var (b, g, r) = bandColors[Math.Min(bandCount - 1, x / bandW)];
+                var i = (y * w + x) * 4;
+                buf[i] = b;
+                buf[i + 1] = g;
+                buf[i + 2] = r;
+                buf[i + 3] = 255;
+            }
+        }
+        return new VideoFrame(w, h, buf);
+    }
+
+    private static VideoFrame SolidFrame(int w, int h, byte b, byte g, byte r)
+    {
+        var buf = new byte[w * h * 4];
+        for (var i = 0; i < w * h; i++)
+        {
+            buf[i * 4] = b;
+            buf[i * 4 + 1] = g;
+            buf[i * 4 + 2] = r;
+            buf[i * 4 + 3] = 255;
+        }
+        return new VideoFrame(w, h, buf);
+    }
+
+    [Fact]
+    public void Build_Produces_2x_Centered_ArtOverLive_Magnification()
+    {
+        var art = BandedBackdrop(480, 4); // [0,480) 1/4 dim, [480,960) red, [960,1440) green, [1440,1920) blue
+        var live = SolidFrame(1920, 1080, 200, 60, 60); // magenta-ish — must never show through
+
+        // Box [840,1320)x[100,580). 2x window = [960,1200)x[160,520) = band 2, all green.
+        // A 1x (broken) magnifier samples [840,1320) → red+green+blue mixed.
+        var zoom = ZoomFrameBuilder.Build(live, art, 840, 100, 480, 480, 1920, 1080);
+
+        Assert.NotNull(zoom);
+        Assert.Equal(480, zoom.Width);
+        Assert.Equal(480, zoom.Height);
+        for (var y = 0; y < zoom.Height; y++)
+        {
+            for (var x = 0; x < zoom.Width; x++)
+            {
+                var i = (y * zoom.Width + x) * 4;
+                Assert.Equal(0, zoom.BgraPixels[i]);       // B
+                Assert.Equal(255, zoom.BgraPixels[i + 1]); // G
+                Assert.Equal(0, zoom.BgraPixels[i + 2]);   // R
+                Assert.Equal(255, zoom.BgraPixels[i + 3]); // A
+            }
+        }
+    }
+}