umbral-core 0.0.4

umbral internals: ORM, migrations, routing, DB backends, the Plugin trait. Do not depend on this directly; use the `umbral` facade.
Documentation
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>500 — Internal Server Error</title>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
            rel="stylesheet"
        />
        <script>
            // Tailwind config must run BEFORE the CDN script loads.
            // Extends the default theme: Inter as the default sans family
            // (so `font-sans` / body text picks it up), and JetBrains Mono
            // as the default mono family (so `font-mono` / `.mono` works).
            window.tailwind = window.tailwind || {};
            window.tailwind.config = {
                theme: {
                    extend: {
                        fontFamily: {
                            sans: [
                                "Inter",
                                "ui-sans-serif",
                                "system-ui",
                                "-apple-system",
                                "Segoe UI",
                                "Roboto",
                                "sans-serif",
                            ],
                            mono: [
                                "JetBrains Mono",
                                "ui-monospace",
                                "SFMono-Regular",
                                "Menlo",
                                "Consolas",
                                "monospace",
                            ],
                        },
                    },
                },
            };
        </script>
        <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
        <style>
            /* Apply the body font to the page (Tailwind's preflight
               already sets ui-sans-serif on body; we override it here
               so Inter wins once it has loaded). */
            body {
                font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
                    "Segoe UI", Roboto, sans-serif;
            }
            /* `.mono` is the shorthand class used throughout the page
               for monospace text. Tailwind's `font-mono` utility also
               resolves to the same stack via the config above. */
            .mono {
                font-family: "JetBrains Mono", ui-monospace, SFMono-Regular,
                    Menlo, Consolas, monospace;
            }
        </style>
    </head>
    <body class="min-h-screen bg-slate-950 text-slate-300 antialiased">
        <!-- Wordmark -->
        <header
            class="absolute top-0 inset-x-0 px-6 py-5 flex items-center justify-between"
        >
            <a
                href="/"
                class="mono text-xs tracking-widest text-slate-500 hover:text-slate-300 transition-colors"
            >
                umbral
            </a>
            <span
                class="mono text-[10px] tracking-widest text-slate-600 uppercase"
            >
                error // internal
            </span>
        </header>

        <!-- Subtle grid background -->
        <div
            class="absolute inset-0 -z-10 bg-[linear-gradient(to_right,#0f172a_1px,transparent_1px),linear-gradient(to_bottom,#0f172a_1px,transparent_1px)] bg-[size:4rem_4rem] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_40%,#000_30%,transparent_100%)] opacity-40"
        ></div>
        <div
            class="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_50%_30%,rgba(99,102,241,0.08),transparent_60%)]"
        ></div>

        <!-- Main content -->
        <main
            class="relative min-h-screen flex items-center justify-center px-6 py-24"
        >
            <div class="w-full max-w-2xl mx-auto text-center">
                <!-- Status label -->
                <p
                    class="mono text-xs tracking-[0.25em] text-slate-500 uppercase"
                >
                    Error // Internal
                </p>

                <!-- Hero code -->
                <h1
                    class="mono mt-6 text-7xl sm:text-8xl md:text-9xl font-bold tracking-tighter text-slate-200 leading-none"
                >
                    500
                </h1>

                <!-- Headline -->
                <h2
                    class="mt-8 text-2xl sm:text-3xl font-semibold text-slate-100 tracking-tight"
                >
                    Internal server error
                </h2>

                <!-- Sub-copy -->
                <p
                    class="mt-4 text-base text-slate-400 max-w-md mx-auto leading-relaxed"
                >
                    Something went wrong on our end. The error has been logged
                    and we'll look into it.
                </p>

                <!-- URL strip (uses request_path when available) -->
                {% if request_path %}
                <div class="mt-8 mx-auto max-w-xl">
                    <div
                        class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-900/60 px-3 py-2.5 backdrop-blur-sm"
                    >
                        <span
                            class="mono text-[10px] tracking-widest text-slate-600 uppercase shrink-0"
                            >REQ</span
                        >
                        <code
                            class="mono text-sm text-slate-300 truncate flex-1 text-left"
                            title="{{ request_path }}"
                            >{{ request_path }}</code
                        >
                        <button
                            type="button"
                            onclick="navigator.clipboard?.writeText('{{ request_path }}'); this.textContent='Copied'; setTimeout(()=>this.textContent='Copy',1200);"
                            class="mono text-[10px] tracking-widest uppercase text-slate-500 hover:text-slate-200 transition-colors shrink-0 px-2 py-1 rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
                        >
                            Copy
                        </button>
                    </div>
                </div>
                {% endif %}

                <!-- Actions -->
                <div
                    class="mt-10 flex flex-col sm:flex-row items-center justify-center gap-3"
                >
                    <a
                        href="/"
                        class="inline-flex items-center justify-center gap-2 rounded-md bg-indigo-500 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400 w-full sm:w-auto"
                    >
                        <span aria-hidden="true"></span>
                        <span>Go home</span>
                    </a>
                    <button
                        type="button"
                        onclick="
                            if (history.length > 1) {
                                history.back();
                            } else {
                                window.location.href = '/';
                            }
                        "
                        class="inline-flex items-center justify-center gap-2 rounded-md border border-slate-800 bg-slate-900/40 px-5 py-2.5 text-sm font-semibold text-slate-200 hover:bg-slate-900 hover:border-slate-700 transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400 w-full sm:w-auto"
                    >
                        Go back
                    </button>
                </div>

                <!-- Dev-mode diagnostic panel -->
                {% if dev_mode %}
                <div
                    class="mt-16 text-left rounded-lg border border-rose-900/50 bg-rose-950/20 overflow-hidden"
                >
                    <!-- Panel header -->
                    <div
                        class="flex items-center justify-between gap-3 px-4 py-2.5 border-b border-rose-900/50 bg-rose-950/40"
                    >
                        <div class="flex items-center gap-2">
                            <span
                                class="inline-block h-2 w-2 rounded-full bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.6)]"
                                aria-hidden="true"
                            ></span>
                            <span
                                class="mono text-[10px] tracking-widest uppercase text-rose-300 font-semibold"
                            >
                                Developer detail
                            </span>
                        </div>
                        <span
                            class="mono text-[10px] tracking-widest uppercase text-rose-400/70"
                        >
                            Hidden in production
                        </span>
                    </div>

                    <div class="px-4 py-4 space-y-4">
                        {% if request_path %}
                        <section>
                            <p
                                class="mono text-[10px] tracking-widest uppercase text-rose-400/80 font-semibold mb-1.5"
                            >
                                Request path
                            </p>
                            <code
                                class="block mono text-sm text-rose-100 bg-slate-950/60 border border-rose-900/40 rounded px-3 py-2 break-all"
                            >
                                {{ request_path }}
                            </code>
                        </section>
                        {% endif %} {% if error_display %}
                        <section>
                            <div
                                class="flex items-center justify-between mb-1.5"
                            >
                                <p
                                    class="mono text-[10px] tracking-widest uppercase text-rose-400/80 font-semibold"
                                >
                                    Error
                                </p>
                                <button
                                    type="button"
                                    onclick="
                                        navigator.clipboard?.writeText(
                                            this.dataset.copy,
                                        );
                                        this.textContent = 'Copied';
                                        setTimeout(
                                            () => (this.textContent = 'Copy'),
                                            1200,
                                        );
                                    "
                                    data-copy="{{ error_display }}"
                                    class="mono text-[10px] tracking-widest uppercase text-rose-400/70 hover:text-rose-200 transition-colors px-2 py-0.5 rounded focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-rose-400"
                                >
                                    Copy
                                </button>
                            </div>
                            <pre
                                class="mono text-sm text-rose-100 bg-slate-950/60 border border-rose-900/40 rounded px-3 py-2 whitespace-pre-wrap break-all overflow-x-auto"
                            ><code>{{ error_display }}</code></pre>
                        </section>
                        {% endif %} {% if error_chain | length > 1 %}
                        <section>
                            <p
                                class="mono text-[10px] tracking-widest uppercase text-rose-400/80 font-semibold mb-1.5"
                            >
                                Cause chain ({{ error_chain | length }})
                            </p>
                            <ol class="space-y-1.5">
                                {% for cause in error_chain %}
                                <li class="flex gap-3 items-start">
                                    <span
                                        class="mono text-[10px] tracking-widest text-rose-500/70 mt-1.5 shrink-0 w-6 text-right"
                                    >
                                        [{{ loop.index }}]
                                    </span>
                                    <code
                                        class="flex-1 mono text-sm text-rose-100 bg-slate-950/60 border border-rose-900/40 rounded px-3 py-1.5 break-all"
                                    >
                                        {{ cause }}
                                    </code>
                                </li>
                                {% endfor %}
                            </ol>
                        </section>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
            </div>
        </main>

        <!-- Footer links -->
        <footer
            class="absolute bottom-0 inset-x-0 px-6 py-5 flex items-center justify-center gap-6"
        >
            <a
                href="/docs"
                class="text-xs text-slate-500 hover:text-slate-300 transition-colors"
                >Docs</a
            >
            <span class="text-slate-800" aria-hidden="true">·</span>
            <a
                href="/status"
                class="text-xs text-slate-500 hover:text-slate-300 transition-colors"
                >Status</a
            >
            <span class="text-slate-800" aria-hidden="true">·</span>
            <a
                href="https://github.com/umbral/umbral"
                class="text-xs text-slate-500 hover:text-slate-300 transition-colors"
                >GitHub</a
            >
        </footer>
    </body>
</html>