Auto-add vertical scrollbar in BeginScrollArea/EndScrollArea

Change BeginScrollArea from ElementScope/using pattern to Begin/End
pattern that automatically includes a vertical scrollbar, matching
how BeginVertical(scroll: true) and ListBox already work.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: andreakarasho

src/Clay.Example/Program.cs

@@ -655,27 +655,15 @@ void PageListBoxAndCombo()
 
 void PageScrollAreas()
 {
-    ClayUI.Label("BeginScrollArea creates a scrollable region with a max height.");
-    ClayUI.Label("Add a VerticalScrollbar sibling for a visible scroll indicator:");
+    ClayUI.Label("BeginScrollArea creates a scrollable region with an automatic scrollbar:");
     ClayUI.Space(8);
 
-    var scrollId = ClayUI.StableId($"ScrollArea_DemoScroll");
+    ClayUI.BeginScrollArea("DemoScroll", maxHeight: 150);
 
-    // Horizontal wrapper: scroll area + scrollbar
-    ClayUI.BeginHorizontal();
+    for (int i = 0; i < 20; i++)
+        ClayUI.Label($"  Scrollable item {i + 1}");
 
-    using (ClayUI.BeginScrollArea("DemoScroll", maxHeight: 150))
-    {
-        for (int i = 0; i < 20; i++)
-            ClayUI.Label($"  Scrollable item {i + 1}");
-    }
-
-    ClayUI.VerticalScrollbar(scrollId);
-
-    ClayUI.EndHorizontal();
-
-    ClayUI.Space(16);
-    ClayUI.Label("The main content area also uses this pattern (ScrollConfig + VerticalScrollbar).");
+    ClayUI.EndScrollArea();
 }
 
 void PageWindows()

src/Clay.Test/ClayUIScrollbarTests.cs

@@ -223,11 +223,10 @@ public void BeginScrollArea_Renders_WithoutCrash()
     {
         _fixture.RunFrame(() =>
         {
-            using (ClayUI.BeginScrollArea("scroll1", maxHeight: 100))
-            {
-                for (int i = 0; i < 10; i++)
-                    ClayUI.Label($"Item {i}");
-            }
+            ClayUI.BeginScrollArea("scroll1", maxHeight: 100);
+            for (int i = 0; i < 10; i++)
+                ClayUI.Label($"Item {i}");
+            ClayUI.EndScrollArea();
         });
     }
 
@@ -236,11 +235,10 @@ public void BeginScrollArea_GeneratesScissorCommands()
     {
         var commands = _fixture.RunFrame(() =>
         {
-            using (ClayUI.BeginScrollArea("scroll2", maxHeight: 100))
-            {
-                for (int i = 0; i < 20; i++)
-                    ClayUI.Label($"Item {i}");
-            }
+            ClayUI.BeginScrollArea("scroll2", maxHeight: 100);
+            for (int i = 0; i < 20; i++)
+                ClayUI.Label($"Item {i}");
+            ClayUI.EndScrollArea();
         });
 
         bool hasScissor = false;

src/Clay/ClayUI.cs

@@ -3010,32 +3010,76 @@ public static void HorizontalScrollbar(ElementId scrollContainerId, ScrollbarSty
     }
 
     /// <summary>
-    /// Begins a scrollable area.
+    /// Begins a scrollable area with an automatic vertical scrollbar.
+    /// Call <see cref="EndScrollArea"/> when done adding children.
     /// </summary>
-    public static ElementScope BeginScrollArea(string id, float? maxHeight = null, ScrollAreaStyle? style = null)
+    public static void BeginScrollArea(string id, float? maxHeight = null, ScrollAreaStyle? style = null)
     {
         var s = style ?? Style.ScrollArea;
-        var elementId = StableId($"ScrollArea_{id}");
+        var scrollId = StableId($"ScrollArea_{id}");
 
-        return Clay.Element(new ElementDeclaration
+        _context.LayoutScrollInfo.Push(new ClayUIContext.ScrollWrapperInfo(scrollId, IsVertical: true, HasWrapper: true));
+
+        // Wrapper container (horizontal: scroll content + scrollbar)
+        Clay.Element(new ElementDeclaration
         {
-            Id = elementId,
             Layout = new LayoutConfig
             {
-                Direction = LayoutDirection.TopToBottom,
+                Direction = LayoutDirection.LeftToRight,
                 Sizing = new Sizing
                 {
                     Width = SizingAxis.Grow(),
                     Height = maxHeight.HasValue
                         ? SizingAxis.Fit(0, maxHeight.Value)
                         : SizingAxis.Grow()
-                },
-                Padding = s.Padding
+                }
             },
-            Scroll = ScrollConfig.VerticalScroll,
             BackgroundColor = s.BackgroundColor,
             CornerRadius = s.CornerRadius
         });
+        _context.LayoutDepth++;
+
+        // Scroll container inside wrapper
+        Clay.Element(new ElementDeclaration
+        {
+            Id = scrollId,
+            Layout = new LayoutConfig
+            {
+                Direction = LayoutDirection.TopToBottom,
+                Sizing = Sizing.Fill(),
+                Padding = s.Padding
+            },
+            Scroll = ScrollConfig.VerticalScroll
+        });
+        _context.LayoutDepth++;
+    }
+
+    /// <summary>
+    /// Ends a scrollable area started with <see cref="BeginScrollArea"/>.
+    /// Automatically adds a vertical scrollbar.
+    /// </summary>
+    public static void EndScrollArea()
+    {
+        // Close the scroll container
+        if (_context.LayoutDepth > 0)
+        {
+            Clay.CloseElement();
+            _context.LayoutDepth--;
+        }
+
+        // Close the wrapper + add scrollbar
+        if (_context.LayoutDepth > 0)
+        {
+            ClayUIContext.ScrollWrapperInfo? scrollInfo = null;
+            if (_context.LayoutScrollInfo.Count > 0)
+                scrollInfo = _context.LayoutScrollInfo.Pop();
+
+            if (scrollInfo.HasValue && scrollInfo.Value.HasWrapper)
+                VerticalScrollbar(scrollInfo.Value.ScrollId);
+
+            Clay.CloseElement();
+            _context.LayoutDepth--;
+        }
     }
 
     // ============ ListBox ============