{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "error-500",
  "title": "500 Server Error",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/error-500/Error500.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { computed } from 'vue'\nimport { LifeBuoy, RefreshCcw } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/components/ui/button'\n\ninterface Props {\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?: HTMLAttributes['class']\n}\n\nexport type Error500Props = Props\n\nconst props = withDefaults(defineProps<Props>(), {\n  image: '/illustrations/error-500.jpg',\n  imageAlt: '',\n  showPrimary: true,\n  showSecondary: true,\n  showTertiary: true,\n  primaryDisabled: false,\n  secondaryDisabled: false,\n  tertiaryDisabled: false,\n  layout: 'page',\n})\n\nconst copy = (fallback: string, override?: string) => (override === undefined ? fallback : override)\n\nconst code = computed(() => copy('500', props.code))\nconst title = computed(() => copy('Something went wrong', props.title))\nconst description = computed(() =>\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    props.description,\n  ),\n)\nconst primaryLabel = computed(() => copy('Try again', props.primaryLabel))\nconst secondaryLabel = computed(() => copy('Back to home', props.secondaryLabel))\nconst tertiaryLabel = computed(() => copy('Contact support', props.tertiaryLabel))\n</script>\n\n<template>\n  <section\n    data-slot=\"error-500\"\n    :data-layout=\"layout\"\n    :class=\"\n      cn(\n        'bg-background relative flex items-center overflow-hidden px-6 py-16',\n        layout === 'page' ? 'min-h-svh' : 'min-h-[28rem]',\n        props.class,\n      )\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        <p v-if=\"code\" class=\"text-muted-foreground text-sm font-medium\">HTTP {{ code }}</p>\n        <p v-if=\"code\" class=\"mt-3 text-6xl font-semibold tracking-tighter sm:text-7xl\">{{ code }}</p>\n        <h1 class=\"mt-3 text-2xl font-semibold tracking-tight sm:text-3xl\">{{ title }}</h1>\n        <p v-if=\"description\" class=\"text-muted-foreground mt-4 max-w-md text-base\">{{ description }}</p>\n        <div v-if=\"showPrimary || showSecondary || showTertiary\" class=\"mt-8 flex flex-wrap items-center gap-3\">\n          <Button\n            v-if=\"showPrimary\"\n            :as=\"primaryHref ? 'a' : 'button'\"\n            :href=\"primaryHref\"\n            size=\"lg\"\n            :disabled=\"primaryDisabled\"\n            @click=\"onPrimary?.()\"\n          >\n            <RefreshCcw />\n            {{ primaryLabel }}\n          </Button>\n          <Button\n            v-if=\"showSecondary\"\n            :as=\"secondaryHref ? 'a' : 'button'\"\n            :href=\"secondaryHref\"\n            size=\"lg\"\n            variant=\"outline\"\n            :disabled=\"secondaryDisabled\"\n            @click=\"onSecondary?.()\"\n          >\n            {{ secondaryLabel }}\n          </Button>\n          <Button\n            v-if=\"showTertiary\"\n            :as=\"tertiaryHref ? 'a' : 'button'\"\n            :href=\"tertiaryHref\"\n            size=\"lg\"\n            variant=\"ghost\"\n            :disabled=\"tertiaryDisabled\"\n            @click=\"onTertiary?.()\"\n          >\n            {{ tertiaryLabel }}\n            <LifeBuoy />\n          </Button>\n        </div>\n      </div>\n      <div v-if=\"image\" 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      <div\n        v-else-if=\"image === undefined\"\n        class=\"border-border bg-muted/40 overflow-hidden rounded-xl border font-mono\"\n        aria-hidden=\"true\"\n      >\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            <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    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/Error500.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/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"
}