{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-layout",
  "title": "Page Layout",
  "description": "Responsive page header, body, action, and aside composition.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://zeron-ui.vercel.app/r/surfaces.json",
    "https://zeron-ui.vercel.app/r/nav-item.json",
    "https://zeron-ui.vercel.app/r/nav-menu.json",
    "utils"
  ],
  "files": [
    {
      "path": "src/components/ui/page-layout.tsx",
      "content": "\"use client\";\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { NavItem, NavItemTrigger } from \"@/components/ui/nav-item\";\nimport { NavMenu, type NavMenuProps, useNavMenuOptional } from \"@/components/ui/nav-menu\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { IconComponent } from \"@/lib/icon-context\";\n\nexport type PageLayoutSize = \"sm\" | \"md\" | \"lg\" | \"full\";\nexport type PageLayoutGutter = \"default\" | \"none\";\nexport type PageSubnavLabelVisibility = \"all\" | \"active\";\n\nconst pageLayoutVariants = cva(\"mx-auto flex h-full w-full min-h-0 min-w-0 flex-col\", {\n  variants: {\n    size: {\n      sm: \"max-w-[40rem]\",\n      md: \"max-w-[56rem]\",\n      lg: \"max-w-[75rem]\",\n      full: \"max-w-none\",\n    },\n    gutter: {\n      default: \"gap-2 p-3\",\n      none: \"gap-2 p-0\",\n    },\n  },\n  defaultVariants: { size: \"full\", gutter: \"default\" },\n});\n\nexport interface PageLayoutProps extends ComponentPropsWithoutRef<\"div\">, VariantProps<typeof pageLayoutVariants> {}\nexport type PageHeaderProps = ComponentPropsWithoutRef<\"header\">;\nexport interface PageHeaderContentProps extends ComponentPropsWithoutRef<\"div\"> {\n  /** Optional decorative icon rendered before the header content. */\n  icon?: IconComponent;\n}\nexport type PageTitleProps = ComponentPropsWithoutRef<\"h1\">;\nexport type PageDescriptionProps = ComponentPropsWithoutRef<\"p\">;\nexport type PageActionsProps = ComponentPropsWithoutRef<\"div\">;\nexport type PageContentProps = ComponentPropsWithoutRef<\"div\">;\nexport type PageBodyProps = ComponentPropsWithoutRef<\"div\">;\nexport type PageSubnavProps = ComponentPropsWithoutRef<\"nav\">;\nexport interface PageSubnavListProps extends Omit<NavMenuProps, \"as\" | \"orientation\" | \"variant\"> {\n  /** Shows every icon label, or only the active item's label. Requires item icons for the collapsed state. */\n  labelVisibility?: PageSubnavLabelVisibility;\n  children: ReactNode;\n}\nexport interface PageSubnavItemProps extends useRender.ComponentProps<\"a\"> {\n  /** Stable identifier used by PageSubnavList to determine the active link. */\n  value: string;\n  active?: boolean;\n  /** Optional icon displayed before the item label. */\n  icon?: IconComponent;\n  /** Accessible label used when labelVisibility=\"active\" hides this item's visible label. */\n  label?: string;\n}\n\nconst PageSubnavListContext = createContext<{ labelVisibility: PageSubnavLabelVisibility }>({\n  labelVisibility: \"all\",\n});\n\nconst PageLayout = forwardRef<HTMLDivElement, PageLayoutProps>(({ size, gutter, className, ...props }, ref) => (\n  <div ref={ref} data-slot=\"page-layout\" className={cn(pageLayoutVariants({ size, gutter }), className)} {...props} />\n));\n\nPageLayout.displayName = \"PageLayout\";\n\nconst PageHeader = forwardRef<HTMLElement, PageHeaderProps>(({ className, ...props }, ref) => (\n  <header ref={ref} data-slot=\"page-header\" className={cn(\"flex shrink-0 min-w-0 flex-wrap items-start justify-between gap-2 py-1 px-3 max-sm:flex-col\", className)} {...props} />\n));\n\nPageHeader.displayName = \"PageHeader\";\n\nconst PageHeaderContent = forwardRef<HTMLDivElement, PageHeaderContentProps>(\n  ({ icon: Icon, className, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"page-header-content\"\n      className={cn(\"flex min-w-0 items-center gap-2\", className)}\n      {...props}\n    >\n      {Icon && <Icon aria-hidden=\"true\" size={20} strokeWidth={1.5} className=\"size-5 shrink-0 text-fg-muted\" />}\n      {children}\n    </div>\n  )\n);\n\nPageHeaderContent.displayName = \"PageHeaderContent\";\n\nconst PageTitle = forwardRef<HTMLHeadingElement, PageTitleProps>(({ className, ...props }, ref) => (\n  <h1 ref={ref} data-slot=\"page-title\" className={cn(\"text-heading text-fg-default\", className)} {...props} />\n));\n\nPageTitle.displayName = \"PageTitle\";\n\nconst PageDescription = forwardRef<HTMLParagraphElement, PageDescriptionProps>(({ className, ...props }, ref) => (\n  <p ref={ref} data-slot=\"page-description\" className={cn(\"mt-2 max-w-prose text-body text-fg-muted\", className)} {...props} />\n));\n\nPageDescription.displayName = \"PageDescription\";\n\nconst PageActions = forwardRef<HTMLDivElement, PageActionsProps>(({ className, ...props }, ref) => (\n  <div ref={ref} data-slot=\"page-actions\" className={cn(\"flex shrink-0 flex-wrap items-center gap-2 max-sm:w-full\", className)} {...props} />\n));\n\nPageActions.displayName = \"PageActions\";\n\nconst PageContent = forwardRef<HTMLDivElement, PageContentProps>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"page-content\"\n    className={cn(\n      \"flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden border border-border rounded-xl\",\n      className\n    )}\n    {...props}\n  />\n));\n\nPageContent.displayName = \"PageContent\";\n\nconst PageBody = forwardRef<HTMLDivElement, PageBodyProps>(({ className, ...props }, ref) => (\n  <div ref={ref} data-slot=\"page-body\" className={cn(\"min-h-0 min-w-0 flex-1 overflow-y-auto overscroll-contain\", className)} {...props} />\n));\n\nPageBody.displayName = \"PageBody\";\n\nconst PageSubnav = forwardRef<HTMLElement, PageSubnavProps>(({ className, ...props }, ref) => (\n  <nav ref={ref} data-slot=\"page-subnav\" className={cn(\"min-w-0 shrink-0 border-b border-border p-3\", className)} {...props} />\n));\n\nPageSubnav.displayName = \"PageSubnav\";\n\nconst PageSubnavList = forwardRef<HTMLElement, PageSubnavListProps>(\n  ({ className, labelVisibility = \"all\", ...props }, ref) => (\n    <PageSubnavListContext.Provider value={{ labelVisibility }}>\n      <NavMenu\n        ref={ref}\n        as=\"div\"\n        data-slot=\"page-subnav-list\"\n        orientation=\"horizontal\"\n        variant=\"segment\"\n        className={cn(\"w-full\", className)}\n        {...props}\n      />\n    </PageSubnavListContext.Provider>\n  )\n);\n\nPageSubnavList.displayName = \"PageSubnavList\";\n\nconst PageSubnavItem = forwardRef<HTMLElement, PageSubnavItemProps>(\n  ({ value, active, icon: Icon, label, className, children, ...props }, ref) => {\n    const { labelVisibility } = useContext(PageSubnavListContext);\n    const navMenu = useNavMenuOptional();\n    const isActive = active ?? navMenu?.activeValue === value;\n    const collapseLabel = labelVisibility === \"active\" && !!Icon;\n    const showLabel = !collapseLabel || isActive;\n    const accessibleLabel = label ?? (typeof children === \"string\" ? children : undefined);\n    const labelContent = (\n      <span className=\"inline-grid min-w-0 whitespace-nowrap\">\n        <span aria-hidden=\"true\" className=\"col-start-1 row-start-1 invisible font-semibold\">\n          {children}\n        </span>\n        <span className=\"col-start-1 row-start-1 font-normal text-inherit group-data-[active=true]/nav-item:font-semibold\">\n          {children}\n        </span>\n      </span>\n    );\n\n    return (\n      <NavItem value={value} active={active}>\n        <NavItemTrigger\n          ref={ref}\n          className={cn(collapseLabel && \"gap-0\", className)}\n          aria-label={collapseLabel && !showLabel ? accessibleLabel : undefined}\n          {...props}\n        >\n          {Icon && (\n            <Icon\n              aria-hidden=\"true\"\n              size={16}\n              strokeWidth={isActive ? 2 : 1.5}\n              className={cn(\n                \"shrink-0 transition-[color,stroke-width] duration-fast\",\n                isActive ? \"text-fg-on-brand\" : \"text-fg-muted\"\n              )}\n            />\n          )}\n          {showLabel && (\n            <span className={cn(collapseLabel && \"ml-2\")}>{labelContent}</span>\n          )}\n        </NavItemTrigger>\n      </NavItem>\n    );\n  }\n);\n\nPageSubnavItem.displayName = \"PageSubnavItem\";\n\nexport {\n  PageLayout,\n  PageHeader,\n  PageHeaderContent,\n  PageTitle,\n  PageDescription,\n  PageActions,\n  PageContent,\n  PageBody,\n  PageSubnav,\n  PageSubnavList,\n  PageSubnavItem,\n  pageLayoutVariants,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/page-layout.tsx"
    }
  ],
  "type": "registry:ui"
}