Give each canonical layout a page of its own in the Layout section

Plan step 38: the Layout section's Overview keeps its breakpoint
table and live "This window" readout (now a shared
<x-showcase::breakpoint-readout> partial, and the five breakpoint
cards a real range-queried data-md-showcase-breakpoint-card instead
of Tailwind's max-medium:/medium:max-expanded: variants), but the
three canonical layouts move off it onto a page of their own:
/material/layout/{list-detail,supporting-pane,feed}
(ShowcaseController::layout(), routes/showcase.php), each built on
the real component, sharing one <x-section-nav> Sections::
layoutPages() feeds. The search index gains an entry per page with
its own URL, and the component-homes scan now also reads the three
pages' own source so <x-list-detail>, <x-supporting-pane> and
<x-feed> keep a home.

The whole section moves onto the layout components and md-* classes:
no bespoke Tailwind grid or table styling remains.

LayoutTest's browser test now visits the three dedicated pages
instead of one shared /material/layout; a new Feature test asserts
each page renders and is linked from the Layout section.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

tests/Browser/LayoutTest.php

@@ -529,25 +529,33 @@ it('draws no second margin for a pane or a canonical layout inside the scaffold\
         ->assertScript(layoutStyle('#pane [data-md-pane-body]', 'paddingLeft')." === '0px'");
 });
 
-it('shows each canonical layout working on the showcase\'s Layout page', function () {
-    $example = fn (string $title): string => "#example-{$title}";
-
-    $page = layoutReady(visit('/material/layout')->resize(1280, 900))
+it('shows each canonical layout working on its own Layout page', function () {
+    $listDetail = layoutReady(visit('/material/layout/list-detail')->resize(1280, 900))
         ->assertScript("document.querySelectorAll('#example-list-detail [data-md-list-detail-pane]').length === 2")
-        ->assertScript("[...document.querySelectorAll('#example-list-detail [data-md-list-detail-pane]')].every((pane) => pane.checkVisibility())")
-        ->assertScript(layoutRect($example('supporting-pane').' [data-md-supporting-pane-supporting]', 'top').' === '.layoutRect($example('supporting-pane').' [data-md-supporting-pane-main]', 'top'))
-        ->assertScript(layoutColumns($example('feed').' [data-md-feed]').' > 1');
+        ->assertScript("[...document.querySelectorAll('#example-list-detail [data-md-list-detail-pane]')].every((pane) => pane.checkVisibility())");
 
-    $page->click('#example-list-detail a:has-text("Ben Keller")')
+    $listDetail->click('#example-list-detail a:has-text("Ben Keller")')
         ->assertSeeIn('#example-list-detail [data-md-list-detail-pane="detail"]', 'Contract, second draft')
         ->assertNoJavaScriptErrors();
 
-    $compact = layoutReady(visit('/material/layout')->resize(599, 900));
+    $compactListDetail = layoutReady(visit('/material/layout/list-detail')->resize(599, 900));
 
-    $compact->click('#example-list-detail a:has-text("Chiara Rossi")')
+    $compactListDetail->click('#example-list-detail a:has-text("Chiara Rossi")')
         ->assertSeeIn('#example-list-detail [data-md-list-detail-pane="detail"]', 'Train times for Friday')
         ->assertScript("! document.querySelector('#example-list-detail [data-md-list-detail-pane=\"list\"]').checkVisibility()")
-        ->assertScript(layoutColumns($example('feed').' [data-md-feed]').' === 1')
+        ->assertNoJavaScriptErrors();
+
+    layoutReady(visit('/material/layout/supporting-pane')->resize(1280, 900))
+        ->assertScript(layoutRect('#example-supporting-pane [data-md-supporting-pane-supporting]', 'top').' === '.layoutRect('#example-supporting-pane [data-md-supporting-pane-main]', 'top'));
+
+    layoutReady(visit('/material/layout/supporting-pane')->resize(599, 900))
         ->assertScript("document.querySelector('#example-supporting-pane [data-md-supporting-pane-handle]').checkVisibility()")
         ->assertNoJavaScriptErrors();
+
+    layoutReady(visit('/material/layout/feed')->resize(1280, 900))
+        ->assertScript(layoutColumns('#example-feed [data-md-feed]').' > 1');
+
+    layoutReady(visit('/material/layout/feed')->resize(599, 900))
+        ->assertScript(layoutColumns('#example-feed [data-md-feed]').' === 1')
+        ->assertNoJavaScriptErrors();
 });

tests/Feature/ShowcaseTest.php

@@ -45,6 +45,24 @@ it('gives every section a page of its own, linked from the overview and the rail
     $this->get('/material/not-a-section')->assertNotFound();
 });
 
+it('gives each canonical layout a page of its own, linked from the Layout section', function () {
+    foreach (['list-detail', 'supporting-pane', 'feed'] as $page) {
+        test()->withoutVite()->get("/material/layout/{$page}")
+            ->assertOk()
+            ->assertSee('id="example-'.$page.'"', false)
+            // Its own navigation reaches the other three pages, including itself.
+            ->assertSee(route('livewire-material.layout', 'list-detail', false), false)
+            ->assertSee(route('livewire-material.layout', 'supporting-pane', false), false)
+            ->assertSee(route('livewire-material.layout', 'feed', false), false);
+    }
+
+    test()->withoutVite()->get('/material/layout')
+        ->assertOk()
+        ->assertSee(route('livewire-material.layout', 'list-detail', false), false)
+        ->assertSee(route('livewire-material.layout', 'supporting-pane', false), false)
+        ->assertSee(route('livewire-material.layout', 'feed', false), false);
+});
+
 it('indexes every section, example and component for the search, each linking to a place that exists', function () {
     $index = collect($this->getJson('/material/search.json')->assertOk()->json());