{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "page",
  "title": "Page",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/page/page.component.ts",
      "content": "import { Component, Input, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\n\n/**\n * Angular port of UIPKGE Page (React `Page`, `PageBody`, `PageHeader`, `PageHeaderHeading`).\n * Page-level layout shell. React's `PageHeader actions` prop is the `[slot=actions]` projection:\n * `<div slot=\"actions\">…</div>` renders right after the heading column, with no wrapper.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-page, [ui-page]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"page\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiPageComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('block space-y-6', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-page-body, [ui-page-body]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"page-body\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiPageBodyComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('block', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-page-header, [ui-page-header]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"page-header\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: `\n    <div class=\"flex-1\"><ng-content /></div>\n    <ng-content select=\"[slot=actions]\" />\n  `,\n})\nexport class UiPageHeaderComponent {\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('flex flex-col justify-between gap-4 sm:flex-row sm:items-center', this.className)\n  }\n}\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-page-header-heading, [ui-page-header-heading]',\n  standalone: true,\n  host: {\n    '[attr.data-slot]': '\"page-header-heading\"',\n    '[attr.data-uipkge]': '\"\"',\n    '[class]': 'hostClass',\n  },\n  template: ` <h2 class=\"text-xl font-bold tracking-tight\">{{ title }}</h2>\n    @if (description) {\n      <p class=\"text-muted-foreground mt-1 text-sm leading-relaxed\">\n        {{ description }}\n      </p>\n    }`,\n})\nexport class UiPageHeaderHeadingComponent {\n  @Input({ required: true }) title!: string\n  @Input() description?: string\n  @Input('class') className?: string\n\n  get hostClass(): string {\n    return cn('block', this.className)\n  }\n}\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/page/page.component.ts"
    },
    {
      "path": "packages/registry-angular/components/page/index.ts",
      "content": "export {\n  UiPageComponent,\n  UiPageBodyComponent,\n  UiPageHeaderComponent,\n  UiPageHeaderHeadingComponent,\n} from './page.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/page/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Page-level layout shell — title row, optional breadcrumbs, action bar, and slotted content well. The standard wrapper for `routes/*.vue` pages so every screen looks consistent.",
  "categories": [
    "layout"
  ]
}