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

src/Http/Controllers/ShowcaseController.php

@@ -24,6 +24,19 @@ class ShowcaseController
         ]);
     }
 
+    /**
+     * One of the Layout section's own pages (plan step 38): a canonical layout on a page of its
+     * own, sharing the Layout section's rail entry and title.
+     */
+    public function layout(string $page): View
+    {
+        return view('livewire-material::showcase.layout.'.$page, [
+            'sections' => Sections::all(),
+            'section' => 'layout',
+            'title' => Sections::layoutPages()[$page]['title'].' · Layout',
+        ]);
+    }
+
     /**
      * The search's index, fetched when the search is first focused rather than written into every page.
      */

src/Showcase/Sections.php

@@ -40,6 +40,19 @@ class Sections
             }
         }
 
+        // The Layout section's three canonical layouts (plan step 38): each is a page of its own
+        // rather than an anchor on the Overview, so its search entry carries its own URL; the
+        // page's own source joins the Layout section's for the component-homes scan below, so
+        // <x-list-detail>, <x-supporting-pane> and <x-feed> still find a home.
+        foreach (static::layoutPages() as $key => $page) {
+            if ($key === 'layout') {
+                continue;
+            }
+
+            $entries[] = ['title' => $page['title'], 'kind' => 'Example', 'context' => 'Layout', 'url' => $page['url'].'#'.static::anchor($page['title']), 'keywords' => ''];
+            $sources['layout'] .= (string) file_get_contents(static::layoutPagePath($key));
+        }
+
         // A section that names a component in its introduction is its home; otherwise the first that uses it.
         foreach (['/&lt;x-([a-z0-9-]+)&gt;/', '/<x-(?:livewire-material::)?([a-z0-9-]+)(?=[\\s\\/>])/'] as $pattern) {
             foreach ($sources as $key => $source) {
@@ -76,6 +89,34 @@ class Sections
         return dirname(__DIR__, 2).'/resources/views/showcase/sections/'.$key.'.blade.php';
     }
 
+    /**
+     * The Layout section's own pages (plan step 38): the overview and the three canonical
+     * layouts, each on a page of its own, sharing one `<x-section-nav>` and the live breakpoint
+     * readout rather than three anchors on the Overview. They are not top-level destinations of
+     * their own — `Sections::all()` still has one `layout` entry for the rail and the overview
+     * grid — so this is their own small index instead.
+     *
+     * @return array<string, array{title: string, icon: string, url: string}>
+     */
+    public static function layoutPages(): array
+    {
+        return [
+            'layout' => ['title' => 'Overview', 'icon' => 'devices', 'url' => route('livewire-material.section', 'layout', false)],
+            'list-detail' => ['title' => 'List-detail', 'icon' => 'view_sidebar', 'url' => route('livewire-material.layout', 'list-detail', false)],
+            'supporting-pane' => ['title' => 'Supporting pane', 'icon' => 'splitscreen', 'url' => route('livewire-material.layout', 'supporting-pane', false)],
+            'feed' => ['title' => 'Feed', 'icon' => 'view_agenda', 'url' => route('livewire-material.layout', 'feed', false)],
+        ];
+    }
+
+    /**
+     * One of the Layout section's own pages' view file (`layoutPages()`'s keys but `layout`
+     * itself, which is `path('layout')`).
+     */
+    public static function layoutPagePath(string $key): string
+    {
+        return dirname(__DIR__, 2).'/resources/views/showcase/layout/'.$key.'.blade.php';
+    }
+
     /**
      * @return array<string, array{title: string, icon: string, group: string, description: string}>
      */