vv webcam Unit 1: the vertical (9:16) tier keeps its OWN camera placement per scene

The vertical tier is a centred band crop of the SAME 1920x1080 master (band x
656.25, w 607.5, h 1080), so the 16:9 camera placement (x~1408) falls outside the
cropped window and the creator is simply not in the vertical stream. Each scene
now keeps its own vertical position, size and shape; switching back to 16:9
restores the desktop layout exactly (the creator's locked table, 2026-10-17).

Geometry only - NO render-path change. The preview and the compositor both read
the element's own X/Y/W/H + ClipShape, so the tier switch swaps the LIVE geometry:
- Models/VerticalCameraLayout.cs (new): the pure math - the band, its two 607x540
  areas, the six spots (top/bottom x left/centre/right), the 32px inset and the
  270x152 default tile (480x270 in the 1080x1920 output) in the bottom-right spot,
  the corner the 16:9 default webcam uses.
- Models/WebcamSceneConfig.cs: the vertical placement lives in seven additive
  columns (VerticalX/Y/Width/Height/ClipShape/RectWidth/RectHeight; NULL = "this
  scene has no vertical placement yet"). The 16:9 layout stays in the old columns
  and is parked in the transient Landscape* fields while the vertical tier is
  live; Begin/EndVerticalLayout + CommitLiveLayoutToVertical do the swap. The
  X/Y/W/H overrides clamp every write into the band - outside it the camera is
  invisible in the vertical output.
- Models/SceneElement.cs: X/Y/Width/Height became virtual so the derived element
  constrains every writer (drag, resize handle, typed fields) in ONE choke point
  instead of three writers each re-implementing the rule.
- ViewModels/MainViewModel.Webcam.cs + .Streaming.cs: IsVerticalTier/VerticalBand,
  ResolveVerticalCameraLayout(s) (the tier swap), MoveWebcamInVerticalTier /
  SnapWebcamInVerticalTier (the six-spot snap, by the tile's centre),
  EnsureVerticalCameraLayout; ApplyStreamQuality is the tier-change hook. The
  Live scene gets its small tile automatically on the first vertical switch (the
  vertical stream would otherwise have no camera at all); the other scenes keep
  their 16:9 placement until the creator drags them into the band.
- Controls/PreviewPane.xaml.cs: the drag/resize route through the VM snap under
  the vertical tier instead of free-floating over the master.
  Controls/LeftPanel.xaml: the webcam properties gained a Geometry section
  (X/Y/W/H) for the manual entry the creator asked for, bound to the LIVE
  placement, gated on the VM's IsWebcamSelected (NOT SelectedElement.IsWebcam -
  the TASK 51 test finds that panel by binding text and would match twice).
- The store: seven guarded ADD COLUMNs, the INSERT/SELECT extended, and the
  X/Y/W/H/ClipShape columns stay the 16:9 layout - while the vertical tier is
  live the save writes the parked values there and the live ones into Vertical*.

Test: ytLive.Tests/VerticalWebcamLayoutTests.cs - the ONE Good Dog test. The
vertical tier brings the Live camera INTO the band as a small tile; dragging it to
the top-right lands it top-right inside the band; back to 16:9 the desktop layout
is restored exactly (1408/778/480x270); both placements survive a save + reload.
Full suite 429/429, 0 warnings. LayerReorderPersistenceTests.RealMouseDrag fails
ALONE on a clean tree in this environment - pre-existing flake, proven by stashing
this work, not a regression.

Derivative work: OBS has no built-in per-aspect-ratio layout storage - the
maintainers' answer is "create a second scene and add the scene you want to send
as source" (obsproject.com/forum/threads/161307) - and Streamyard's dual-aspect
guide says the same ("no built-in way to store separate layouts per aspect ratio",
so you rely on manual workarounds and plugins):
https://streamyard.com/blog/dual-aspect-ratio-streaming-tool
Our per-scene, per-tier stored placement, resolved on the tier change, is the
step past both.

Memory in the same commit: ai.md (new section), TASKS.md + TASKS/task-57-*.md
(Unit 1 shipped, Unit 2 = the Chat scene still open), HANDOFF.md, MyMistakes.md
(the per-tier geometry-swap recipe, the binding-text panel trap, the store's
webcam-identity rule) and the Models/Services/ViewModels/Controls index rows.

Models/SceneElement.cs

@@ -184,15 +184,18 @@ public abstract class SceneElement : INotifyPropertyChanged
     /// <summary>What the preview shows: live frames (webcam) or a static image (sources).</summary>
     public abstract ImageSource? DisplaySource { get; }
 
-    // Position/transform (per-scene usage)
+    // Position/transform (per-scene usage). The geometry setters are virtual so
+    // a derived element can CONSTRAIN them (the webcam clamps itself into the
+    // vertical tier's band — TASK 57) instead of every writer re-implementing
+    // the rule.
     private double _x;
-    public double X { get => _x; set => Set(ref _x, value); }
+    public virtual double X { get => _x; set => Set(ref _x, value); }
 
     private double _y;
-    public double Y { get => _y; set => Set(ref _y, value); }
+    public virtual double Y { get => _y; set => Set(ref _y, value); }
 
     private double _width;
-    public double Width
+    public virtual double Width
     {
         get => _width;
         set
@@ -203,7 +206,7 @@ public abstract class SceneElement : INotifyPropertyChanged
     }
 
     private double _height;
-    public double Height
+    public virtual double Height
     {
         get => _height;
         set

Models/VerticalCameraLayout.cs

@@ -0,0 +1,69 @@
+using System.Windows;
+
+namespace ytLive.Models;
+
+/// <summary>
+/// The vertical (9:16) tier's camera rules — TASK 57, the "vv" feature.
+///
+/// The vertical tier is a centred band crop of the SAME 1920×1080 master the
+/// 16:9 tiers use, so a camera placed for 16:9 lands outside the cropped
+/// window and vanishes from the vertical output. The vertical tier therefore
+/// keeps its OWN placement per scene: a small tile inside the band, snapped to
+/// one of six spots — the band splits into a top and a bottom half, each with
+/// a left, a centre and a right slot.
+///
+/// Geometry only: the preview and the compositor both read the element's own
+/// X/Y/W/H + ClipShape, so the placement is resolved by swapping those values
+/// when the tier changes. No render-path change.
+/// </summary>
+public static class VerticalCameraLayout
+{
+    /// <summary>The vertical tier's camera tile over the master frame —
+    /// 270×152 master px = 480×270 in the 1080×1920 output.</summary>
+    public const double TileWidth = 270;
+    public const double TileHeight = 152;
+
+    /// <summary>How far the tile keeps from the band's outer edge — the app's
+    /// own placement margin (32 master px) used by the default webcam spot.</summary>
+    public const double Inset = 32;
+
+    /// <summary>True for the portrait tier (the vertical 1080×1920 one).</summary>
+    public static bool IsVerticalTier(QualityOption quality) => quality.Height > quality.Width;
+
+    /// <summary>The half of the band a tile lives in — top or bottom.</summary>
+    public static Rect AreaFor(Rect band, bool bottom)
+        => new(band.Left, bottom ? band.Top + band.Height / 2 : band.Top, band.Width, band.Height / 2);
+
+    /// <summary>The largest a camera may be inside the band: one whole area.</summary>
+    public static (double Width, double Height) MaxSizeFor(Rect band)
+        => (band.Width, band.Height / 2);
+
+    /// <summary>
+    /// The spot a tile snaps to: the area (top/bottom) and the column
+    /// (left/centre/right) its centre falls in, then the tile's top-left for
+    /// that spot — inset from the band's outer edge, and never outside the band
+    /// (a tile wider than the inset eats it).
+    /// </summary>
+    public static (double X, double Y) SpotFor(Rect band, double width, double height, double centreX, double centreY)
+    {
+        var bottom = centreY >= band.Top + band.Height / 2;
+        var area = AreaFor(band, bottom);
+        var third = area.Width / 3;
+
+        double x;
+        if (centreX < area.Left + third) x = area.Left + Inset;
+        else if (centreX < area.Left + 2 * third) x = area.Left + (area.Width - width) / 2;
+        else x = area.Right - Inset - width;
+
+        var y = bottom ? area.Bottom - Inset - height : area.Top + Inset;
+
+        x = Math.Clamp(x, band.Left, Math.Max(band.Left, band.Right - width));
+        y = Math.Clamp(y, band.Top, Math.Max(band.Top, band.Bottom - height));
+        return (x, y);
+    }
+
+    /// <summary>The default tile spot: the bottom-right corner of the band —
+    /// the same corner the 16:9 default webcam placement uses.</summary>
+    public static (double X, double Y) DefaultSpot(Rect band, double width, double height)
+        => SpotFor(band, width, height, band.Right, band.Bottom);
+}

Models/WebcamSceneConfig.cs

@@ -1,3 +1,4 @@
+using System.Windows;
 using System.Windows.Media;
 
 namespace ytLive.Models;
@@ -57,4 +58,153 @@ public class WebcamSceneConfig : SceneElement
         set => BackgroundEffect = value ? BackgroundEffect.Blur
             : BackgroundEffect == BackgroundEffect.Blur ? BackgroundEffect.None : BackgroundEffect;
     }
+
+    // ─── Vertical (9:16) tier placement (TASK 57, the "vv" feature) ────────
+    // The vertical tier is a centred band crop of the same master frame, so the
+    // 16:9 placement lands outside the cropped window and the camera vanishes
+    // from the vertical output. The vertical tier therefore keeps its OWN
+    // position, size and shape per scene, stored here and resolved when the
+    // tier changes; switching back to 16:9 restores the desktop layout exactly.
+
+    /// <summary>The vertical placement's X (null until the scene has one).</summary>
+    public double? VerticalX { get; set; }
+
+    /// <summary>The vertical placement's Y (null until the scene has one).</summary>
+    public double? VerticalY { get; set; }
+
+    /// <summary>The vertical placement's width (null until the scene has one).</summary>
+    public double? VerticalWidth { get; set; }
+
+    /// <summary>The vertical placement's height (null until the scene has one).</summary>
+    public double? VerticalHeight { get; set; }
+
+    /// <summary>The vertical placement's clip shape (circle or rect) — the
+    /// creator's own choice per scene, independent of the 16:9 shape.</summary>
+    public ClipShape? VerticalClipShape { get; set; }
+
+    /// <summary>The vertical placement's pre-Round rect (so a Round tile
+    /// restores its aspect on toggle-back, like the 16:9 one does).</summary>
+    public double? VerticalRectWidth { get; set; }
+
+    /// <inheritdoc cref="VerticalRectWidth"/>
+    public double? VerticalRectHeight { get; set; }
+
+    /// <summary>True once this scene has a vertical placement of its own.</summary>
+    public bool HasVerticalLayout => VerticalX is not null;
+
+    /// <summary>True while the vertical placement is the LIVE geometry (the
+    /// element's own X/Y/W/H). The 16:9 layout is parked in
+    /// <see cref="LandscapeX"/> and friends until the tier switches back.</summary>
+    public bool VerticalLayoutLive { get; private set; }
+
+    /// <summary>The vertical tier's band over the master frame (transient — the
+    /// VM sets it when the tier changes). While the vertical placement is live
+    /// the camera's geometry is clamped to it: outside the band is invisible.</summary>
+    public Rect VerticalBand { get; set; } = Rect.Empty;
+
+    // The parked 16:9 layout — meaningful only while the vertical placement is
+    // live (it is the 16:9 geometry the tier switch restores).
+    public double LandscapeX { get; private set; }
+    public double LandscapeY { get; private set; }
+    public double LandscapeWidth { get; private set; }
+    public double LandscapeHeight { get; private set; }
+    public ClipShape LandscapeClipShape { get; private set; }
+    public double? LandscapeRectWidth { get; private set; }
+    public double? LandscapeRectHeight { get; private set; }
+
+    /// <summary>Parks the live (16:9) layout and brings a vertical placement
+    /// in. The vertical placement becomes the live geometry from here on.</summary>
+    public void BeginVerticalLayout(double x, double y, double width, double height, ClipShape clipShape)
+    {
+        LandscapeX = X;
+        LandscapeY = Y;
+        LandscapeWidth = Width;
+        LandscapeHeight = Height;
+        LandscapeClipShape = ClipShape;
+        LandscapeRectWidth = RectWidth;
+        LandscapeRectHeight = RectHeight;
+
+        VerticalLayoutLive = true;
+        Width = width;
+        Height = height;
+        X = x;
+        Y = y;
+        ClipShape = clipShape;
+        RectWidth = VerticalRectWidth;
+        RectHeight = VerticalRectHeight;
+    }
+
+    /// <summary>Restores the parked 16:9 layout — the tier switched back.</summary>
+    public void EndVerticalLayout()
+    {
+        if (!VerticalLayoutLive) return;
+
+        // The vertical placement is the creator's own — keep it, so switching
+        // back and forth does not lose where they put it.
+        CommitLiveLayoutToVertical();
+
+        VerticalLayoutLive = false;
+        Width = LandscapeWidth;
+        Height = LandscapeHeight;
+        X = LandscapeX;
+        Y = LandscapeY;
+        ClipShape = LandscapeClipShape;
+        RectWidth = LandscapeRectWidth;
+        RectHeight = LandscapeRectHeight;
+    }
+
+    /// <summary>Copies the live geometry into the stored vertical placement, so
+    /// the stored copy never lags the live one (the save path calls this).</summary>
+    public void CommitLiveLayoutToVertical()
+    {
+        VerticalX = X;
+        VerticalY = Y;
+        VerticalWidth = Width;
+        VerticalHeight = Height;
+        VerticalClipShape = ClipShape;
+        VerticalRectWidth = RectWidth;
+        VerticalRectHeight = RectHeight;
+    }
+
+    // The geometry is clamped into the band while the vertical placement is
+    // live — a camera outside the cropped window is a camera the viewers never
+    // see, and every writer (drag, resize handle, the properties fields) goes
+    // through these setters.
+    public override double X
+    {
+        get => base.X;
+        set => base.X = ClampToBand(value, base.Width, vertical: true);
+    }
+
+    public override double Y
+    {
+        get => base.Y;
+        set => base.Y = ClampToBand(value, base.Height, vertical: false);
+    }
+
+    public override double Width
+    {
+        get => base.Width;
+        set => base.Width = VerticalLayoutLive && !VerticalBand.IsEmpty
+            ? Math.Min(value, VerticalBand.Width)
+            : value;
+    }
+
+    public override double Height
+    {
+        get => base.Height;
+        set => base.Height = VerticalLayoutLive && !VerticalBand.IsEmpty
+            ? Math.Min(value, VerticalBand.Height / 2)
+            : value;
+    }
+
+    private double ClampToBand(double value, double size, bool vertical)
+    {
+        if (!VerticalLayoutLive || VerticalBand.IsEmpty) return value;
+        var band = VerticalBand;
+        var min = vertical ? band.Left : band.Top;
+        var max = vertical ? band.Right - size : band.Bottom - size;
+        if (max < min) return min;
+        return Math.Clamp(value, min, max);
+    }
 }

Models/index.md

@@ -8,11 +8,12 @@ Plain data types. No logic beyond what a property can carry. See
 | `Scene.cs` | A scene: `Name`, `IsHidden`, `IsChatScene`, `IsEditing`, **`HasBackdrop`** (Live-only policy flag, default off — only the canonical Live scene has one, see `SceneCatalog`), `Elements` collection (images + webcam config), `WebcamConfig` accessor |
 | `SceneCatalog.cs` | The five canonical scenes (Starting/Live/BRB/Chat/Ending) — the product, by name: `All`, `IsCanonical`, `Is(name, canonical)` (case-insensitive trim), `IsChat`, `HasBackdrop(name)` (true only for Live). Drives the empty-DB seed, the "+" missing-scenes menu, and `MainViewModel.EnforceBackdropPolicy` |
 | `Source.cs` | A source: `SourceType` enum (DisplayCapture/WindowCapture/Background/Image/TextOverlay/ChatBox/Countdown/WebSource/MediaSource/**AlertBox (TASK 43 — the celebration zone, one per layout)** — **Webcam removed**), `X`/`Y`/`Width`/`Height`, `Opacity`, `IsEnabled`, `ImageSource` (static) / `VideoImageSource` (live frames), `DisplaySource` (`IsLiveCapture` → video, else static), `ClipShape` enum (Traditional/Round), `IsMirrored` + `MirrorScale`, `MirrorButtonText`/`ShapeButtonText`, asset identity, `IsImageSource` (XAML binds this, never `Type`), **backdrop surface**: `IsBackdrop` (permanent bottom layer, never removable), `CaptureKey` (persisted `monitor:<n>`/`window:<hwnd>`/`picker:<name>`), `IsLiveCapture` (`Type` is Display/WindowCapture) |
-| `SceneElement.cs` | Base for anything placeable in a scene: shared layout/clip/mirror/border surface, `virtual IsWebcam`/`virtual IsImageSource`/`virtual IsZoomLayer` (TASK 52); `ToggleClipShape` + persisted `RectWidth`/`RectHeight` (pre-Round rect so round→rect restores after reload) |
+| `SceneElement.cs` | Base for anything placeable in a scene: shared layout/clip/mirror/border surface, `virtual IsWebcam`/`virtual IsImageSource`/`virtual IsZoomLayer` (TASK 52); `ToggleClipShape` + persisted `RectWidth`/`RectHeight` (pre-Round rect so round→rect restores after reload); **TASK 57:** the geometry setters (`X`/`Y`/`Width`/`Height`) are `virtual` so a derived element can CONSTRAIN every write (the webcam clamps itself into the vertical tier's band) instead of every writer re-implementing the rule |
+| `VerticalCameraLayout.cs` | **TASK 57 (the "vv" feature):** the vertical (9:16) tier's camera rules as pure math — `TileWidth`/`TileHeight` (270×152 master px = 480×270 in the 1080×1920 output), `Inset` (32 master px from the band's outer edge), `IsVerticalTier(QualityOption)` (portrait tier), `AreaFor(band, bottom)` (the band splits into two 607×540 areas), `MaxSizeFor(band)`, `SpotFor(band, w, h, centreX, centreY)` (the six spots — the area and column the tile's **centre** falls in, inset, never outside the band) and `DefaultSpot` (bottom-right, the corner the 16:9 default webcam uses) |
 | `ZoomSceneElement.cs` | **Transient zoom box (TASK 52, creator-corrected 2026-10-08):** carries the box rect AND the anchored `CaptureX`/`CaptureY` (the fixed box/2 capture window set on `ActivateZoom`; moving the box never touches it). `IsZoomActive` flips `Kind` Static→Dynamic (leaves the baked base while active); never persisted (LayoutStore save skips non-Source/non-WebcamSceneConfig rows), never shown in the layers list or the element template (`IsZoomLayer` gates both). The compositor SKIPS the active element in every layer loop and draws its 2x content LAST (layer n+1) via `ZoomMagnifier`. |
 | `Webcam.cs` | Singleton webcam identity: `Id`, `DeviceId`, `Name` (one row app-wide) |
 | `BackgroundEffect.cs` | **TASK 51:** per-webcam background effect enum `None` / `Remove` / `Blur`, carried by `WebcamSceneConfig` |
-| `WebcamSceneConfig.cs` | Per-scene webcam placement (subclass of `SceneElement`): geometry + `IsVisible` + border (`BorderColor`/`BorderOpacity`/`BorderWidth`/`BorderAnimation`) + `VideoImageSource`; `WebcamId` links to `Webcam`; **TASK 51:** `BackgroundEffect` + `BackgroundStrength` (0..1, default 0.5) + the radio-pill surface `RemoveBackground`/`BlurBackground` (one on turns the other off; both off = None) + `HasBackgroundEffect` (shows the strength slider) |
+| `WebcamSceneConfig.cs` | Per-scene webcam placement (subclass of `SceneElement`): geometry + `IsVisible` + border (`BorderColor`/`BorderOpacity`/`BorderWidth`/`BorderAnimation`) + `VideoImageSource`; `WebcamId` links to `Webcam`; **TASK 51:** `BackgroundEffect` + `BackgroundStrength` (0..1, default 0.5) + the radio-pill surface `RemoveBackground`/`BlurBackground` (one on turns the other off; both off = None) + `HasBackgroundEffect` (shows the strength slider); **TASK 57 (the "vv" feature):** the vertical (9:16) tier's OWN placement per scene — `VerticalX/Y/Width/Height/VerticalClipShape/VerticalRectWidth/VerticalRectHeight` (persisted, NULL = no vertical placement yet) + the transient `VerticalBand`/`VerticalLayoutLive`/`LandscapeX…LandscapeRectHeight` (the parked 16:9 layout) + `BeginVerticalLayout`/`EndVerticalLayout`/`CommitLiveLayoutToVertical` (the tier swap) and the `X`/`Y`/`Width`/`Height` overrides that clamp every write into the band |
 | `QualityOption.cs` | Resolution tier record `(Display, Fps, Bitrate, Width, Height)`; `Label` formats as `1080p60 (8Mbps)` — drives the bottom-bar dropdown and the output-rect math |
 | `StreamConfig.cs` | `StreamConfig` (note: `TargetBitrate`/`Resolution` defaults are stale — not yet wired to the dropdown), `StreamHealth` (bitrate/FPS/dropped/duration), `StreamStatus` enum |
 | `MicStatus.cs` | Footer mic indicator: `NotConnected` / `Connected` / `Problem` — the state behind the MIC button's status dot (red = no device/capture off, green = capturing, yellow = a requested mic failed: in use/unplugged) |