Add the row layout component

Plan step 35: <x-row gap align justify wrap stack-below>, children side
by side in a pane and stacked under one another below an M3 breakpoint,
in the inline direction so a right-to-left document mirrors it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

tests/Browser/LayoutTest.php

@@ -72,3 +72,26 @@ it('spaces a stack with its token, never with its parent\'s, and hides it from a
     layoutPage($body, 600)
         ->assertScript(layoutStyle('#hidden-from', 'display')." === 'none'");
 });
+
+it('stacks a row below its breakpoint and lays it side by side from it', function () {
+    $body = '<x-row id="row" gap="space200" stack-below="medium"><span>One</span><span>Two</span></x-row>'
+        .'<x-row id="aligned" align="start" stack-below="medium"><span>One</span></x-row>'
+        .'<x-row id="hidden" hide-below="medium"><span>Medium and up</span></x-row>';
+
+    layoutPage($body, 599)
+        ->assertScript(layoutStyle('#row', 'flexDirection')." === 'column'")
+        ->assertScript(layoutStyle('#row', 'alignItems')." === 'stretch'")
+        ->assertScript(layoutStyle('#aligned', 'alignItems')." === 'flex-start'")
+        ->assertScript(layoutStyle('#row', 'rowGap')." === '16px'")
+        ->assertScript(layoutStyle('#hidden', 'display')." === 'none'");
+
+    layoutPage($body, 600)
+        ->assertScript(layoutStyle('#row', 'flexDirection')." === 'row'")
+        ->assertScript(layoutStyle('#row', 'alignItems')." === 'center'")
+        ->assertScript(layoutStyle('#hidden', 'display')." === 'flex'");
+});
+
+it('mirrors a row in a right-to-left document', function () {
+    layoutPage('<x-row id="row"><span id="first">First</span><span id="second">Second</span></x-row>', 800, 600, 'rtl')
+        ->assertScript(layoutRect('#first', 'left').' > '.layoutRect('#second', 'left'));
+});