{title}

61:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 62:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 63:T27c7,import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import type { ComponentProps, ReactNode } from "react"; import { cn } from "@/lib/utils"; /** * True when a slot value should produce markup. `null`, `undefined`, booleans, * empty strings, and `0` are treated as empty, so `aside={false}` or * `metadata={count}` with a zero count never render a stray wrapper or a bare "0". */ function isRenderable(node: ReactNode): boolean { return node != null && typeof node !== "boolean" && node !== "" && node !== 0; } // ------------------------------------------------------------------ // Page // ------------------------------------------------------------------ const pageSizeVariants = { sm: "max-w-3xl", md: "max-w-5xl", lg: "max-w-7xl", xl: "max-w-[1600px]", full: "max-w-none", } as const; type PageSize = keyof typeof pageSizeVariants; type PageProps = useRender.ComponentProps<"div"> & { /** Maximum content width. */ size?: PageSize; /** Responsive horizontal padding. */ gutter?: boolean; }; function PageRoot({ size = "lg", gutter = true, className, render, ...props }: PageProps) { return useRender({ defaultTagName: "div", render, state: { slot: "page" }, props: mergeProps<"div">( { className: cn( "mx-auto w-full min-w-0", pageSizeVariants[size], gutter && "px-4 sm:px-6 lg:px-8", "py-6 md:py-8", className, ), }, props, ), }); } // ------------------------------------------------------------------ // Page.Header // ------------------------------------------------------------------ /** * Page.Header renders a div by default. A

outside

or a sectioning * element becomes the page's banner landmark, which usually belongs to the app * shell; pass `render={

}` when this header should be one. */ type PageTitleElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; type PageHeaderProps = Omit, "title"> & { /** Rendered as the page heading, an h1 unless `titleAs` says otherwise. */ title: ReactNode; /** * Heading element for the title. Keep the default h1 for a real page; pick a * lower level when the Page is nested, for example in a preview or a dialog. */ titleAs?: PageTitleElement; description?: ReactNode; /** Badges or status rendered inline after the title. */ metadata?: ReactNode; /** Primary actions, usually wrapped in Page.Actions. */ actions?: ReactNode; }; function PageHeader({ title, titleAs: Title = "h1", description, metadata, actions, className, children, render, ...props }: PageHeaderProps) { const content = ( <>

{title} {isRenderable(metadata) &&

{metadata}

}

{isRenderable(description) && (

{description}

)} {children}

{isRenderable(actions) && (

{actions}

)} ); return useRender({ defaultTagName: "div", render, state: { slot: "page-header" }, props: mergeProps<"div">( { className: cn( "mb-6 flex min-w-0 flex-col gap-4", "sm:flex-row sm:items-start sm:justify-between", className, ), children: content, }, props, ), }); } // ------------------------------------------------------------------ // Page.Actions // ------------------------------------------------------------------ type PageActionsProps = useRender.ComponentProps<"div">; function PageActions({ className, render, ...props }: PageActionsProps) { return useRender({ defaultTagName: "div", render, state: { slot: "page-actions" }, props: mergeProps<"div">( { className: cn("flex flex-wrap items-center gap-2", className) }, props, ), }); } // ------------------------------------------------------------------ // Page.Body // ------------------------------------------------------------------ type PageAsideWidth = "sm" | "md" | "lg"; type PageAsidePosition = "start" | "end"; type PageAsideBreakpoint = "md" | "lg" | "xl" | "2xl"; type PageAsideCollapse = "stack" | "hide"; // Each preset sets --page-aside-width; the grid template reads it, so a custom // width is one style or class away: style={{ "--page-aside-width": "13rem" }}. const asideWidthVariants = { sm: "[--page-aside-width:16rem]", md: "[--page-aside-width:20rem]", lg: "[--page-aside-width:24rem]", } as const satisfies Record; // The aside column is mirrored for "start", so the content always gets the // flexible track. Both children are placed explicitly on row 1 from the // breakpoint up, which keeps the DOM (and reading) order content-first // regardless of position. const asideTemplateVariants = { md: { end: "md:grid-cols-[minmax(0,1fr)_var(--page-aside-width)]", start: "md:grid-cols-[var(--page-aside-width)_minmax(0,1fr)]", }, lg: { end: "lg:grid-cols-[minmax(0,1fr)_var(--page-aside-width)]", start: "lg:grid-cols-[var(--page-aside-width)_minmax(0,1fr)]", }, xl: { end: "xl:grid-cols-[minmax(0,1fr)_var(--page-aside-width)]", start: "xl:grid-cols-[var(--page-aside-width)_minmax(0,1fr)]", }, "2xl": { end: "2xl:grid-cols-[minmax(0,1fr)_var(--page-aside-width)]", start: "2xl:grid-cols-[var(--page-aside-width)_minmax(0,1fr)]", }, } as const satisfies Record>; const contentPlacementVariants = { md: { end: "md:col-start-1 md:row-start-1", start: "md:col-start-2 md:row-start-1" }, lg: { end: "lg:col-start-1 lg:row-start-1", start: "lg:col-start-2 lg:row-start-1" }, xl: { end: "xl:col-start-1 xl:row-start-1", start: "xl:col-start-2 xl:row-start-1" }, "2xl": { end: "2xl:col-start-1 2xl:row-start-1", start: "2xl:col-start-2 2xl:row-start-1" }, } as const satisfies Record>; const asidePlacementVariants = { md: { end: "md:col-start-2 md:row-start-1", start: "md:col-start-1 md:row-start-1" }, lg: { end: "lg:col-start-2 lg:row-start-1", start: "lg:col-start-1 lg:row-start-1" }, xl: { end: "xl:col-start-2 xl:row-start-1", start: "xl:col-start-1 xl:row-start-1" }, "2xl": { end: "2xl:col-start-2 2xl:row-start-1", start: "2xl:col-start-1 2xl:row-start-1" }, } as const satisfies Record>; // "hide" removes the aside below the breakpoint instead of stacking it. const asideHiddenVariants = { md: "hidden md:block", lg: "hidden lg:block", xl: "hidden xl:block", "2xl": "hidden 2xl:block", } as const satisfies Record; type PageBodyProps = useRender.ComponentProps<"div"> & { /** Supplementary column, placed beside the content from `asideBreakpoint` up. */ aside?: ReactNode; /** Aside width: 16rem, 20rem, or 24rem. Set --page-aside-width for any other width. */ asideWidth?: PageAsideWidth; /** Which side the aside sits on from `asideBreakpoint` up. */ asidePosition?: PageAsidePosition; /** Breakpoint at which the aside moves beside the content. */ asideBreakpoint?: PageAsideBreakpoint; /** Below the breakpoint, stack the aside under the content or hide it. */ asideCollapse?: PageAsideCollapse; /** Accessible name for the aside landmark. */ asideLabel?: string; /** Extra props for the aside element, for example a sticky className. */ asideProps?: Omit, "children">; }; function PageBody({ aside, asideWidth = "md", asidePosition = "end", asideBreakpoint = "lg", asideCollapse = "stack", asideLabel = "Supplementary information", asideProps, className, children, render, ...props }: PageBodyProps) { const hasAside = isRenderable(aside); const dataAttributes = { "data-aside-position": hasAside ? asidePosition : undefined }; const content = ( <>

{children}

{hasAside && ( )} ); return useRender({ defaultTagName: "div", render, state: { slot: "page-body" }, props: mergeProps<"div">( { ...dataAttributes, className: cn( "grid min-w-0 grid-cols-1 items-start gap-6", hasAside && asideWidthVariants[asideWidth], hasAside && asideTemplateVariants[asideBreakpoint][asidePosition], className, ), children: content, }, props, ), }); } // ------------------------------------------------------------------ // Compound API // ------------------------------------------------------------------ const Page = Object.assign(PageRoot, { Header: PageHeader, Actions: PageActions, Body: PageBody, }); export { Page, PageRoot, PageHeader, PageActions, PageBody, isRenderable }; export type { PageProps, PageSize, PageHeaderProps, PageTitleElement, PageActionsProps, PageBodyProps, PageAsideWidth, PageAsidePosition, PageAsideBreakpoint, PageAsideCollapse, }; 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@base-ui/react"}]]}]}]]}],["$","$L61",null,{"namespace":"@layout-kit","registryDependencies":[]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/ui/page.tsx","content":"$63","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]