{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "error-500",
  "title": "500 Server Error",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/error-500/Error500.svelte",
      "content": "<script lang=\"ts\" module>\n  export interface Error500Props {\n    code?: string\n    title?: string\n    description?: string\n    /** Replaces the HTTP response panel. Pass `''` to hide art entirely. */\n    image?: string\n    imageAlt?: string\n    primaryLabel?: string\n    secondaryLabel?: string\n    tertiaryLabel?: string\n    primaryHref?: string\n    secondaryHref?: string\n    tertiaryHref?: string\n    showPrimary?: boolean\n    showSecondary?: boolean\n    showTertiary?: boolean\n    primaryDisabled?: boolean\n    secondaryDisabled?: boolean\n    tertiaryDisabled?: boolean\n    onPrimary?: () => void\n    onSecondary?: () => void\n    onTertiary?: () => void\n    /** `'page'` fills the viewport; `'contained'` fits a preview or nested panel. */\n    layout?: 'page' | 'contained'\n    class?: string\n  }\n</script>\n\n<script lang=\"ts\">\n  import { LifeBuoy, RefreshCcw } from '@lucide/svelte'\n  import { cn } from '$lib/utils'\n  import { Button } from '$lib/components/ui/button'\n\n  let {\n    code: codeOverride,\n    title: titleOverride,\n    description: descriptionOverride,\n    image = '/illustrations/error-500.jpg',\n    imageAlt = '',\n    primaryLabel: primaryLabelOverride,\n    secondaryLabel: secondaryLabelOverride,\n    tertiaryLabel: tertiaryLabelOverride,\n    primaryHref,\n    secondaryHref,\n    tertiaryHref,\n    showPrimary = true,\n    showSecondary = true,\n    showTertiary = true,\n    primaryDisabled = false,\n    secondaryDisabled = false,\n    tertiaryDisabled = false,\n    onPrimary,\n    onSecondary,\n    onTertiary,\n    layout = 'page',\n    class: className,\n  }: Error500Props = $props()\n\n  const copy = (fallback: string, override?: string) => (override === undefined ? fallback : override)\n\n  const code = $derived(copy('500', codeOverride))\n  const title = $derived(copy('Something went wrong', titleOverride))\n  const description = $derived(\n    copy(\n      'We hit an unexpected error on our side. Try again in a moment — if it keeps happening, our team is on it.',\n      descriptionOverride,\n    ),\n  )\n  const primaryLabel = $derived(copy('Try again', primaryLabelOverride))\n  const secondaryLabel = $derived(copy('Back to home', secondaryLabelOverride))\n  const tertiaryLabel = $derived(copy('Contact support', tertiaryLabelOverride))\n</script>\n\n<section\n  data-slot=\"error-500\"\n  data-layout={layout}\n  class={cn(\n    'bg-background relative flex items-center overflow-hidden px-6 py-16',\n    layout === 'page' ? 'min-h-svh' : 'min-h-[28rem]',\n    className,\n  )}\n>\n  <div class=\"mx-auto grid w-full max-w-5xl items-center gap-10 lg:grid-cols-2 lg:gap-16\">\n    <div>\n      {#if code}\n        <p class=\"text-muted-foreground text-sm font-medium\">HTTP {code}</p>\n        <p class=\"mt-3 text-6xl font-semibold tracking-tighter sm:text-7xl\">{code}</p>\n      {/if}\n      <h1 class=\"mt-3 text-2xl font-semibold tracking-tight sm:text-3xl\">{title}</h1>\n      {#if description}\n        <p class=\"text-muted-foreground mt-4 max-w-md text-base\">{description}</p>\n      {/if}\n      {#if showPrimary || showSecondary || showTertiary}\n        <div class=\"mt-8 flex flex-wrap items-center gap-3\">\n          {#if showPrimary}\n            {#if primaryHref}\n              <Button size=\"lg\" disabled={primaryDisabled} onclick={() => onPrimary?.()}>\n                {#snippet child({ props })}\n                  <a href={primaryHref} {...props}>\n                    <RefreshCcw />\n                    {primaryLabel}\n                  </a>\n                {/snippet}\n              </Button>\n            {:else}\n              <Button size=\"lg\" disabled={primaryDisabled} onclick={() => onPrimary?.()}>\n                <RefreshCcw />\n                {primaryLabel}\n              </Button>\n            {/if}\n          {/if}\n          {#if showSecondary}\n            {#if secondaryHref}\n              <Button variant=\"outline\" size=\"lg\" disabled={secondaryDisabled} onclick={() => onSecondary?.()}>\n                {#snippet child({ props })}\n                  <a href={secondaryHref} {...props}>\n                    {secondaryLabel}\n                  </a>\n                {/snippet}\n              </Button>\n            {:else}\n              <Button variant=\"outline\" size=\"lg\" disabled={secondaryDisabled} onclick={() => onSecondary?.()}>\n                {secondaryLabel}\n              </Button>\n            {/if}\n          {/if}\n          {#if showTertiary}\n            {#if tertiaryHref}\n              <Button variant=\"ghost\" size=\"lg\" disabled={tertiaryDisabled} onclick={() => onTertiary?.()}>\n                {#snippet child({ props })}\n                  <a href={tertiaryHref} {...props}>\n                    {tertiaryLabel}\n                    <LifeBuoy />\n                  </a>\n                {/snippet}\n              </Button>\n            {:else}\n              <Button variant=\"ghost\" size=\"lg\" disabled={tertiaryDisabled} onclick={() => onTertiary?.()}>\n                {tertiaryLabel}\n                <LifeBuoy />\n              </Button>\n            {/if}\n          {/if}\n        </div>\n      {/if}\n    </div>\n    {#if image}\n      <div class=\"border-border bg-muted overflow-hidden rounded-xl border\">\n        <img src={image} alt={imageAlt} class=\"aspect-[4/3] w-full object-cover\" />\n      </div>\n    {:else if image === undefined}\n      <div class=\"border-border bg-muted/40 overflow-hidden rounded-xl border font-mono\" aria-hidden=\"true\">\n        <div class=\"border-border text-muted-foreground truncate border-b px-3 py-2 text-xs\">POST /api/v1/invoices</div>\n        <div class=\"space-y-1 p-4 text-xs leading-relaxed\">\n          <p>\n            <span class=\"text-muted-foreground\">HTTP/1.1</span>\n            {' '}\n            <span class=\"text-destructive\">{code || '500'} Internal Server Error</span>\n          </p>\n          <p class=\"text-muted-foreground\">error: ECONNRESET</p>\n          <p class=\"text-muted-foreground\">at: Worker.run:142</p>\n          <p class=\"text-muted-foreground\">x-request-id: req_8f3c2a</p>\n        </div>\n      </div>\n    {/if}\n  </div>\n</section>\n",
      "type": "registry:block",
      "target": "~/src/lib/components/blocks/error-500/Error500.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/button.json"
  ],
  "description": "Full-page 500 with an isometric crashed-server illustration, HTTP code, headline, and Try again + Back to home + Contact support. Prop-driven: pass title, description, image, action labels, hrefs, and layout (`page` | `contained`). Pass `image=\"\"` to hide the art.",
  "categories": [
    "layout",
    "feedback"
  ],
  "deprecated": true,
  "replacedBy": "error-page"
}