{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "error-500",
  "title": "500 Server Error",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/error-500/error-500.component.ts",
      "content": "// Full-page 500 with an isometric crashed-server illustration slot, HTTP code, headline,\n// and Try again + Back to home + Contact support actions. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core'\nimport { LifeBuoy, LucideAngularModule, RefreshCcw } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiButtonComponent } from '@/ui/button/button.component'\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-error-500, [ui-error-500]',\n  standalone: true,\n  // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [LucideAngularModule, UiButtonComponent],\n  template: `\n    <section data-slot=\"error-500\" [attr.data-layout]=\"layout\" [class]=\"rootClass\">\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 (codeText) {\n            <p class=\"text-muted-foreground text-sm font-medium\">HTTP {{ codeText }}</p>\n          }\n          @if (codeText) {\n            <p class=\"mt-3 text-6xl font-semibold tracking-tighter sm:text-7xl\">{{ codeText }}</p>\n          }\n          <h1 class=\"mt-3 text-2xl font-semibold tracking-tight sm:text-3xl\">{{ titleText }}</h1>\n          @if (descriptionText) {\n            <p class=\"text-muted-foreground mt-4 max-w-md text-base\">{{ descriptionText }}</p>\n          }\n          @if (showPrimary || showSecondary || showTertiary) {\n            <div class=\"mt-8 flex flex-wrap items-center gap-3\">\n              @if (showPrimary) {\n                @if (primaryHref) {\n                  <a ui-button size=\"lg\" [href]=\"primaryHref\" (click)=\"primary.emit()\">\n                    <lucide-icon [img]=\"RefreshCcw\" />\n                    {{ primaryText }}\n                  </a>\n                } @else {\n                  <button ui-button size=\"lg\" [disabled]=\"primaryDisabled\" (click)=\"primary.emit()\">\n                    <lucide-icon [img]=\"RefreshCcw\" />\n                    {{ primaryText }}\n                  </button>\n                }\n              }\n              @if (showSecondary) {\n                @if (secondaryHref) {\n                  <a ui-button size=\"lg\" variant=\"outline\" [href]=\"secondaryHref\" (click)=\"secondary.emit()\">\n                    {{ secondaryText }}\n                  </a>\n                } @else {\n                  <button\n                    ui-button\n                    size=\"lg\"\n                    variant=\"outline\"\n                    [disabled]=\"secondaryDisabled\"\n                    (click)=\"secondary.emit()\"\n                  >\n                    {{ secondaryText }}\n                  </button>\n                }\n              }\n              @if (showTertiary) {\n                @if (tertiaryHref) {\n                  <a ui-button size=\"lg\" variant=\"ghost\" [href]=\"tertiaryHref\" (click)=\"tertiary.emit()\">\n                    {{ tertiaryText }}\n                    <lucide-icon [img]=\"LifeBuoy\" />\n                  </a>\n                } @else {\n                  <button ui-button size=\"lg\" variant=\"ghost\" [disabled]=\"tertiaryDisabled\" (click)=\"tertiary.emit()\">\n                    {{ tertiaryText }}\n                    <lucide-icon [img]=\"LifeBuoy\" />\n                  </button>\n                }\n              }\n            </div>\n          }\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\">\n              POST /api/v1/invoices\n            </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\">{{ codeText || '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        }\n      </div>\n    </section>\n  `,\n})\nexport class UiError500Component {\n  protected readonly LifeBuoy = LifeBuoy\n  protected readonly RefreshCcw = RefreshCcw\n\n  @Input() code?: string\n  @Input() title?: string\n  @Input() description?: string\n  /** Replaces the HTTP response panel. Pass `''` to hide art entirely. */\n  @Input() image: string | undefined = '/illustrations/error-500.jpg'\n  @Input() imageAlt = ''\n  @Input() primaryLabel?: string\n  @Input() secondaryLabel?: string\n  @Input() tertiaryLabel?: string\n  @Input() primaryHref?: string\n  @Input() secondaryHref?: string\n  @Input() tertiaryHref?: string\n  @Input() showPrimary = true\n  @Input() showSecondary = true\n  @Input() showTertiary = true\n  @Input() primaryDisabled = false\n  @Input() secondaryDisabled = false\n  @Input() tertiaryDisabled = false\n  @Output() primary = new EventEmitter<void>()\n  @Output() secondary = new EventEmitter<void>()\n  @Output() tertiary = new EventEmitter<void>()\n  /** `'page'` fills the viewport; `'contained'` fits a preview or nested panel. */\n  @Input() layout: 'page' | 'contained' = 'page'\n  @Input('class') className?: string\n\n  get codeText(): string {\n    return this.code === undefined ? '500' : this.code\n  }\n\n  get titleText(): string {\n    return this.title === undefined ? 'Something went wrong' : this.title\n  }\n\n  get descriptionText(): string {\n    return this.description === undefined\n      ? 'We hit an unexpected error on our side. Try again in a moment — if it keeps happening, our team is on it.'\n      : this.description\n  }\n\n  get primaryText(): string {\n    return this.primaryLabel === undefined ? 'Try again' : this.primaryLabel\n  }\n\n  get secondaryText(): string {\n    return this.secondaryLabel === undefined ? 'Back to home' : this.secondaryLabel\n  }\n\n  get tertiaryText(): string {\n    return this.tertiaryLabel === undefined ? 'Contact support' : this.tertiaryLabel\n  }\n\n  get rootClass(): string {\n    return cn(\n      'bg-background relative flex items-center overflow-hidden px-6 py-16',\n      this.layout === 'page' ? 'min-h-svh' : 'min-h-[28rem]',\n      this.className,\n    )\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/error-500/error-500.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/error-500/index.ts",
      "content": "export { UiError500Component } from './error-500.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/error-500/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/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"
}