import { cn } from "../lib/utils"; // ---------------------------------------------------------------------------// Settings page scaffold//// Every top-level settings view (Integrations, Policies, API keys, Providers,// Organization, Billing) shares one column width, gutter, and heading scale so// the content edge and title don't shift as you move between tabs. Use these// instead of hand-rolling the `mx-auto max-w-* px-* py-*` wrapper per page.// --------------------------------------------------------------------------- function PageContainer({ className, children, ...props }: React.ComponentProps<"div">) {  return (    <div className="min-h-0 flex-1 overflow-y-auto" data-slot="page-container">      <div className={cn("mx-auto max-w-4xl px-6 py-10 lg:px-8 lg:py-14", className)} {...props}>        {children}      </div>    </div>  );} function PageHeader({  title,  description,  actions,  className,  children,  ...props}: Omit<React.ComponentProps<"div">, "title"> & {  title: React.ReactNode;  description?: React.ReactNode;  /** Optional trailing controls (buttons) aligned to the heading baseline. */  actions?: React.ReactNode;}) {  return (    <div      data-slot="page-header"      className={cn("mb-10 flex items-start justify-between gap-4", className)}      {...props}    >      <div className="min-w-0">        <h1 className="font-display text-[2rem] tracking-tight leading-none text-foreground">          {title}        </h1>        {description && (          <p className="mt-2 max-w-2xl text-sm leading-relaxed text-muted-foreground">            {description}          </p>        )}        {children}      </div>      {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}    </div>  );} export { PageContainer, PageHeader };