Rewrite the showcase frame without Tailwind

Plan step 38 (first batch): layout.blade.php, index.blade.php,
section.blade.php, shell.blade.php and the example component now
lay out through the layout components (pane, stack, row, grid,
surface) and their props, text through the md-* classes, and
everything else through showcase.css's data-md-showcase-* hooks — no
Tailwind utility remains in any of them. The head links the new
stylesheet route after @vite(...), not before: that entry opens the
document's first @layer statement, and linking the showcase's own
bundle ahead of it re-anchors the material layer before Tailwind's
own and lets its preflight's `padding: 0` beat the search view's
padding-top (found by a failing browser test). @vite(...) stays, its
Tailwind CSS entry included, only for the section views (still
Tailwind until the next batches) and the JS runtime; the config
comment says so.

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

resources/views/showcase/components/example.blade.php

@@ -18,17 +18,30 @@
     }
 @endphp
 
-<div @if ($title) id="{{ \NoNameWeb\LivewireMaterial\Showcase\Sections::anchor($title) }}" @endif class="scroll-mt-24 space-y-4 rounded-corner-lg bg-surface-container p-4">
-    @if ($title)
-        <h3 class="type-title-md">{{ $title }}</h3>
-    @endif
+<x-livewire-material::surface
+    :id="$title ? \NoNameWeb\LivewireMaterial\Showcase\Sections::anchor($title) : null"
+    padding="space200"
+    corner="lg"
+    data-md-showcase-example
+>
+    <x-livewire-material::stack gap="space200">
+        @if ($title)
+            <h3 class="md-type-title-md">{{ $title }}</h3>
+        @endif
 
-    <div @class(['flex flex-wrap items-center gap-4' => ! $stack, 'space-y-4' => $stack])>
-        {!! \Illuminate\Support\Facades\Blade::render($code) !!}
-    </div>
+        @if ($stack)
+            <x-livewire-material::stack gap="space200">
+                {!! \Illuminate\Support\Facades\Blade::render($code) !!}
+            </x-livewire-material::stack>
+        @else
+            <x-livewire-material::row gap="space200" wrap align="center">
+                {!! \Illuminate\Support\Facades\Blade::render($code) !!}
+            </x-livewire-material::row>
+        @endif
 
-    <details>
-        <summary class="w-fit cursor-pointer rounded-corner-xs type-label-md text-on-surface-variant focus-ring">Blade</summary>
-        <pre class="mt-2 overflow-x-auto rounded-corner-sm bg-surface-container-highest p-3 type-body-sm"><code>{{ trim($code) }}</code></pre>
-    </details>
-</div>
+        <details>
+            <summary class="md-type-label-md md-ink-variant md-focus-ring" data-md-showcase-code-summary>Blade</summary>
+            <pre class="md-type-body-sm" data-md-showcase-code><code>{{ trim($code) }}</code></pre>
+        </details>
+    </x-livewire-material::stack>
+</x-livewire-material::surface>