Add M3 error pages and the Markdown mail theme

Error pages for 401 to 503 in an error-view root appended to view.paths,
with an inline fallback when the Vite build is missing, and a mail theme
rendered from the application's scheme JSON, with opt-in header and
message components. Completes Phase 9.

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

src/Support/ErrorPage.php

@@ -0,0 +1,92 @@
+<?php
+
+namespace NoNameWeb\LivewireMaterial\Support;
+
+use Illuminate\Contracts\Support\Htmlable;
+use Illuminate\Foundation\Vite;
+use Illuminate\Support\HtmlString;
+use Throwable;
+
+/**
+ * What the error layout needs from PHP, written so that nothing in it can fail the page: an
+ * error page is shown precisely when something else already went wrong.
+ */
+class ErrorPage
+{
+    /**
+     * The roles the fallback stylesheet draws with.
+     */
+    protected const array ROLES = [
+        'surface', 'on-surface', 'on-surface-variant', 'primary', 'on-primary',
+        'primary-container', 'on-primary-container', 'secondary',
+    ];
+
+    /**
+     * The application's Vite tags, or null when they cannot be made.
+     *
+     * A 500 during a deploy is the moment the manifest is missing, half-written or names files
+     * that are not there yet — a missing manifest throws a ViteException, a truncated one a
+     * PHP warning turned exception — so every failure means "no build", never a second error.
+     */
+    public static function assets(): ?Htmlable
+    {
+        try {
+            $tags = app(Vite::class)(config('livewire-material.showcase.vite', []));
+        } catch (Throwable) {
+            return null;
+        }
+
+        return $tags instanceof Htmlable ? $tags : new HtmlString((string) $tags);
+    }
+
+    /**
+     * Where the Back button goes: the page the visitor came from, when there was one other than
+     * this page and the home page Home already offers. Null when the session behind it cannot
+     * be read.
+     */
+    public static function backUrl(): ?string
+    {
+        try {
+            $previous = url()->previous();
+            $current = url()->current();
+        } catch (Throwable) {
+            return null;
+        }
+
+        $isHome = rtrim($previous, '/') === rtrim(url('/'), '/');
+
+        return $previous === $current || $isHome ? null : $previous;
+    }
+
+    /**
+     * A stylesheet for a page without its build: the application's scheme in both themes, a
+     * system font, and the layout's `data-error-*` hooks drawn to match the Tailwind version.
+     */
+    public static function fallbackStyles(): HtmlString
+    {
+        $scheme = Scheme::load();
+
+        $roles = fn (array $theme): string => implode('', array_map(
+            fn (string $role): string => "--md-sys-color-{$role}: {$theme[$role]}; ",
+            self::ROLES,
+        ));
+
+        return new HtmlString(<<<CSS
+            :root, [data-theme='light'] { color-scheme: light; {$roles($scheme['light'])}}
+            [data-theme='dark'] { color-scheme: dark; {$roles($scheme['dark'])}}
+            *, ::before, ::after { box-sizing: border-box; }
+            body { margin: 0; background-color: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font: 400 1rem/1.5rem ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; -webkit-font-smoothing: antialiased; }
+            [data-error-page] { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100dvh; max-width: 36rem; margin: 0 auto; padding: 3rem 1.5rem; text-align: center; }
+            [data-error-art] { position: relative; display: grid; place-items: center; width: 12rem; height: 12rem; }
+            [data-error-shape] { position: absolute; inset: 0; color: var(--md-sys-color-primary-container); }
+            [data-error-shape] svg { display: block; width: 100%; height: 100%; }
+            [data-error-code] { position: relative; margin: 0; font-size: 3.5625rem; font-weight: 500; line-height: 4rem; color: var(--md-sys-color-on-primary-container); font-variant-numeric: tabular-nums; }
+            [data-error-headline] { margin: 2.5rem 0 0; font-size: 1.75rem; font-weight: 400; line-height: 2.25rem; text-wrap: balance; }
+            [data-error-message] { margin: 0.75rem 0 0; color: var(--md-sys-color-on-surface-variant); text-wrap: balance; }
+            [data-error-actions] { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 2.5rem; }
+            [data-error-actions] :is(a, button) { display: inline-flex; align-items: center; height: 3.5rem; padding: 0 1.5rem; border: 0; border-radius: 9999px; background: none; color: var(--md-sys-color-primary); font-family: inherit; font-size: 1rem; font-weight: 500; line-height: 1.5rem; text-decoration: none; cursor: pointer; }
+            [data-error-actions] > :first-child { background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
+            [data-error-actions] :is(a, button):focus-visible { outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px; }
+            CSS);
+    }
+}