{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-container",
  "type": "registry:component",
  "title": "Page container",
  "description": "The centred readable column of a page: narrow, medium, wide or full, with the shared gutters and arrival motion; bleed for one canvas across the whole content frame.",
  "registryDependencies": [
    "@wibo/utils"
  ],
  "files": [
    {
      "path": "src/patterns/page-container.tsx",
      "type": "registry:component",
      "content": "import type { ComponentProps } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * The readable column of a page, centred in the content frame with equal air\n * either side, as in the Luminars console. The width is a rule, not a taste:\n *\n *   narrow  760 px   one form or one record to read\n *   medium  860 px   cards read top to bottom (an inbox, an approval)\n *   wide   1080 px   tables, grids of cards, two-column settings, a chat\n *   full    none     a board or a wide canvas, inside the gutters\n *   bleed   none     a canvas that is its own app (an artifact frame)\n *\n * Gutters: 16 px on phones, 32 px from `md`; 20 px (28 px from `md`) above\n * the header, 48 px below the last block; 24 px between blocks. The content\n * fades and rises 4 px in on arrival, so a navigation reads as one motion.\n *\n * `bleed` drops the gutters and the header: the page fills the content frame\n * edge to edge and to its full height (the frame keeps the banner and the\n * phone bar above it), so its child takes the space with `flex-1` and\n * scrolls inside itself while the page does not. It fades in without the\n * rise, which would push it past the frame's bottom edge for a moment. Name\n * the page with an `sr-only` heading, since there is no `PageHeader`.\n */\nconst widthClass = {\n  narrow: \"max-w-[760px]\",\n  medium: \"max-w-[860px]\",\n  wide: \"max-w-[1080px]\",\n  full: \"max-w-none\",\n  bleed: \"h-full max-w-none animate-fade-in gap-0 p-0 md:p-0\",\n} as const;\n\ntype PageWidth = keyof typeof widthClass;\n\ninterface PageContainerProps extends ComponentProps<\"div\"> {\n  width?: PageWidth;\n}\n\n/** Wraps a page: `PageHeader` first, then the page's blocks; with `width=\"bleed\"`, one canvas that fills the content frame. */\nfunction PageContainer({ width = \"wide\", className, ...props }: PageContainerProps) {\n  return (\n    <div\n      data-slot=\"page-container\"\n      data-width={width}\n      className={cn(\n        \"mx-auto flex w-full min-w-0 animate-content-in flex-col gap-6 px-4 pt-5 pb-12 md:px-8 md:pt-7\",\n        widthClass[width],\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { PageContainer };\nexport type { PageContainerProps, PageWidth };\n"
    }
  ]
}