admin-ui-starter-kit 0.7.0 → 0.7.1

package/.agents/skills/component-library-rules/references/components/INDEX.json

@@ -118,7 +118,7 @@
   {"id":"features/sync","title":"Features · Sync","description":"Reusable sync-range form for integration repair flows. The feature owns form state and validation wiring; consumers own dialog placement, submission, errors, and telemetry.","layer":"features","family":"Operations","tags":["features","operations","sync","reusable","range","form","integration"],"sourcePath":"src/components/features/sync","publicImport":"admin-ui-starter-kit/features/sync","examples":["SyncDialogPattern","InlineSyncForm"],"doc":"./features__sync.md"},
   {"id":"layout/layout-app-shell","title":"Layout · App shell","description":"Standalone header-first shell with a 70px+ topbar and a sidebar/content body grid.","layer":"layout","family":"Shells","tags":["layout","shells","app-shell","app","shell","standalone","header"],"sourcePath":"src/components/layout/app-shell","publicImport":"admin-ui-starter-kit/layout/app-shell","examples":["DarkHeaderLeftSidebar","LightHeaderRightSidebar"],"doc":"./layout__layout-app-shell.md"},
   {"id":"layout/layout-auth","title":"Layout · Auth shell","description":"Framework-neutral auth card and split shells for login, register, invite, reset, magic-link, and verification pages.","layer":"layout","family":"Shells","tags":["layout","shells","auth","shell","framework","neutral","card"],"sourcePath":"src/components/layout/auth","publicImport":"admin-ui-starter-kit/layout/auth","examples":["CenteredCardAuth","LocalizedPatternCardAuth","ProviderMatrixAuth","ResetPasswordAuth","SplitAuthShell","RightSplitAuthShell","FrameworkLinkContract"],"doc":"./layout__layout-auth.md"},
-  {"id":"layout/layout-containers","title":"Layout · Containers","description":"Container and Section primitives for page structure, width clamps, padding density, and semantic wrappers.","layer":"layout","family":"Building blocks","tags":["layout","building","blocks","containers","container","section","primitives","page"],"sourcePath":"src/components/layout/containers","publicImport":"admin-ui-starter-kit/layout/containers","examples":["NarrowContainer","WideContainer","BareContainer","SectionRhythm"],"doc":"./layout__layout-containers.md"},
+  {"id":"layout/layout-containers","title":"Layout · Containers","description":"Container and Section primitives for page structure, width clamps, padding density, and semantic wrappers.","layer":"layout","family":"Building blocks","tags":["layout","building","blocks","containers","container","section","primitives","page"],"sourcePath":"src/components/layout/containers","publicImport":"admin-ui-starter-kit/layout/containers","examples":["NarrowContainer","WideContainer","BareContainer","TwoColumnDetailLayout","SectionRhythm"],"doc":"./layout__layout-containers.md"},
   {"id":"layout/layout-header","title":"Layout · Header","description":"Topbar, breadcrumbs, command search, notifications, and action slots in a realistic app-shell canvas.","layer":"layout","family":"Shells","tags":["layout","shells","header","topbar","breadcrumbs","command"],"sourcePath":"src/components/layout","publicImport":"admin-ui-starter-kit/layout","examples":["AppHeaderComposition","HeaderPartials","HeaderToolPrimitives","CustomNotificationRenderer"],"doc":"./layout__layout-header.md"},
   {"id":"layout/layout-page","title":"Layout · Page","description":"Page shell, index scaffolds, resource show shells, header partials, actions, and content regions with framework-neutral links.","layer":"layout","family":"Shells","tags":["layout","shells","page","shell","index","scaffolds"],"sourcePath":"src/components/layout","publicImport":"admin-ui-starter-kit/layout","examples":["ProductionPageShell","ComposablePartials","ResourceShells","TabbedResourceDetails","SettingsShellExample"],"doc":"./layout__layout-page.md"},
   {"id":"layout/layout-sidebar","title":"Layout · Sidebar","description":"Full app sidebar assembly plus reusable navigation, workspace, and footer item partials.","layer":"layout","family":"Shells","tags":["layout","shells","sidebar","full","app","assembly"],"sourcePath":"src/components/layout","publicImport":"admin-ui-starter-kit/layout","examples":["AppSidebarShell","NavigationPartials","CustomRowRenderer"],"doc":"./layout__layout-sidebar.md"},

package/.agents/skills/component-library-rules/references/components/layout__layout-containers.md

@@ -9,6 +9,7 @@ examples:
   - NarrowContainer
   - WideContainer
   - BareContainer
+  - TwoColumnDetailLayout
   - SectionRhythm
 imports:
   - @/components/base/badge
@@ -44,7 +45,14 @@ The examples below use repository source aliases because they run inside the pre
 
 ```tsx
 import type { ReactNode } from 'react';
-import { Container, Section } from '@/components/layout/containers';
+import {
+	Container,
+	InnerLayoutBlock,
+	OuterLayoutBlock,
+	Section,
+	TopLayoutBlock,
+	TwoColumnLayout,
+} from '@/components/layout/containers';
 import { SmartCard } from '@/components/base/cards';
 import { Text } from '@/components/typography';
 import { Badge } from '@/components/base/badge';
@@ -130,6 +138,39 @@ export function BareContainer() {
 	);
 }
 
+export function TwoColumnDetailLayout() {
+	return (
+		<DemoViewport height={520}>
+			<Container as="section" width="narrow" padding="default">
+				<TwoColumnLayout stickyRight>
+					<TopLayoutBlock>
+						<div className="flex min-w-0 flex-col gap-space-xs">
+							<Text weight="semibold">Two column detail layout</Text>
+							<Text type="secondary">Use this for main form/detail content with a right-hand summary or support rail.</Text>
+						</div>
+					</TopLayoutBlock>
+					<InnerLayoutBlock>
+						<div className="grid gap-space-lg">
+							<SampleCard title="Primary details" detail="The first inner block owns the wider content column by default." />
+							<SampleCard title="Configuration" detail="Form sections, tables, and detail cards stay together in the main column." />
+							<SampleCard title="Publishing" detail="The layout does not own data or routing; it only standardizes structure." />
+						</div>
+					</InnerLayoutBlock>
+					<InnerLayoutBlock>
+						<div className="grid gap-space-lg">
+							<SampleCard title="Summary" detail="The second inner block becomes the aside column." />
+							<SampleCard title="Checklist" detail="Set `stickyRight` when the aside should remain visible on desktop." />
+						</div>
+					</InnerLayoutBlock>
+					<OuterLayoutBlock>
+						<SampleCard title="Full-width follow-up" detail="Outer blocks render below both columns for logs, related records, or footers." />
+					</OuterLayoutBlock>
+				</TwoColumnLayout>
+			</Container>
+		</DemoViewport>
+	);
+}
+
 export function SectionRhythm() {
 	return (
 		<div className="grid grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-3">
@@ -150,5 +191,6 @@ export function SectionRhythm() {
 - `NarrowContainer`
 - `WideContainer`
 - `BareContainer`
+- `TwoColumnDetailLayout`
 - `SectionRhythm`
 

package/dist/_shared/containers-CclPUW7j.cjs

@@ -0,0 +1,2 @@
+const e=require("../lib/utils.cjs");let t=require("react"),n=require("react/jsx-runtime");var r={narrow:`max-w-[1040px] mx-auto`,default:``,large:`max-w-screen-2xl mx-auto`,wide:`max-w-screen-2xl mx-auto`,full:``},i={none:`p-0`,sm:`p-surface-sm md:p-surface`,default:`p-surface md:p-space-2xl`,lg:`p-space-2xl`};function a({children:t,as:a=`div`,width:o=`default`,padding:s=`default`,bare:c=!1,className:l,innerClassName:u,...d}){let f=r[o],p=i[s];return c?(0,n.jsx)(a,{className:e.cn(`w-full flex-1 relative overflow-hidden overflow-y-auto @container/main h-full`,f,l),...d,children:t}):(0,n.jsx)(a,{className:e.cn(`w-full flex-1 relative overflow-hidden @container/main h-full`,l),...d,children:(0,n.jsx)(`div`,{className:e.cn(`flex min-h-full flex-1 flex-col gap-space-2xl rounded-xl`,f,p,u),children:t})})}var o={tight:`space-y-space-lg`,default:`space-y-space-xl`,loose:`space-y-space-2xl`};function s({children:t,as:r=`section`,density:i=`default`,className:a,...s}){return(0,n.jsx)(r,{className:e.cn(o[i],a),...s,children:t})}var c=({children:e})=>e;c.displayName=`InnerLayoutBlock`;var l=({children:e})=>e;l.displayName=`OuterLayoutBlock`;var u=({children:e})=>e;u.displayName=`TopLayoutBlock`;var d=`lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]`,f=`gap-space-2xl`,p=`mt-space-2xl`,m=`lg:top-space-2xl`,h=`mb-space-2xl`;function g({children:r,className:i,columnsClassName:a=d,gapClassName:o=f,topWrapperClassName:s=h,outerWrapperClassName:g=p,leftColumnClassName:_,rightColumnClassName:v,reverse:y=!1,mobileReverse:b=!0,stickyRight:x=!1,stickyRightOffsetClassName:S=m}){let C=t.Children.toArray(r).filter(Boolean),w=[],T=[],E=[];if(C.forEach(e=>{if((0,t.isValidElement)(e)){if(e.type===c){w.push(e);return}if(e.type===l){T.push(e);return}e.type===u&&E.push(e)}}),w.length!==2)throw Error(`TwoColumnLayout requires exactly two InnerLayoutBlock children.`);let[D,O]=w,k=y?O:D,A=y?D:O,j=T[0]??null,M=E[0]??null,N=b?`order-2 lg:order-1`:`order-1 lg:order-1`,P=b?`order-1 lg:order-2`:`order-2 lg:order-2`,F=x?e.cn(`lg:sticky lg:self-start`,S):null;return(0,n.jsxs)(n.Fragment,{children:[!!M&&(0,n.jsx)(`div`,{"data-slot":`two-column-layout-top`,className:e.cn(`two-column-layout--top`,s,M.props.className),children:M.props.children}),(0,n.jsxs)(`div`,{"data-slot":`two-column-layout`,className:e.cn(`two-column-layout--component flex min-w-0 flex-col`,o,`lg:grid`,a,i),children:[(0,n.jsx)(`div`,{"data-slot":`two-column-layout-left`,className:e.cn(`two-column-layout--left min-h-0 min-w-0`,N,_,k.props.className),children:k.props.children}),(0,n.jsx)(`div`,{"data-slot":`two-column-layout-right`,className:e.cn(`two-column-layout--right min-h-0 min-w-0`,P,v,F,A.props.className),children:A.props.children})]}),!!j&&(0,n.jsx)(`div`,{"data-slot":`two-column-layout-outer`,className:e.cn(`two-column-layout--outer`,g,j.props.className),children:j.props.children})]})}g.displayName=`TwoColumnLayout`,Object.defineProperty(exports,"a",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,"o",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return c}});
+//# sourceMappingURL=containers-CclPUW7j.cjs.map

package/dist/_shared/containers-CclPUW7j.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"containers-CclPUW7j.cjs","names":[],"sources":["../../src/components/layout/containers/content-container.tsx","../../src/components/layout/containers/section.tsx","../../src/components/layout/containers/two-column-layout.tsx"],"sourcesContent":["/**\n * Container — page-level content wrapper.\n *\n * Wraps the page body in a flexbox column with consistent padding and an\n * optional max-width clamp. Use as the outer wrapper inside a `<Page>`, or\n * standalone for content panes that need a centered, padded surface.\n *\n * `bare` skips the padded inner column for edge-to-edge children, while\n * `innerClassName` customizes the clamped column without affecting the outer\n * scroll/container-query wrapper.\n */\nimport { cn } from '@/lib/utils';\n\nimport type { ContainerProps } from './containers.types';\n\nconst WIDTH_CLASS: Record<NonNullable<ContainerProps['width']>, string> = {\n\tnarrow: 'max-w-[1040px] mx-auto',\n\tdefault: '',\n\tlarge: 'max-w-screen-2xl mx-auto',\n\twide: 'max-w-screen-2xl mx-auto',\n\tfull: '',\n};\n\nconst PADDING_CLASS: Record<NonNullable<ContainerProps['padding']>, string> = {\n\tnone: 'p-0',\n\tsm: 'p-surface-sm md:p-surface',\n\tdefault: 'p-surface md:p-space-2xl',\n\tlg: 'p-space-2xl',\n};\n\nexport function Container({\n\tchildren,\n\tas: Component = 'div',\n\twidth = 'default',\n\tpadding = 'default',\n\tbare = false,\n\tclassName,\n\tinnerClassName,\n\t...props\n}: ContainerProps) {\n\tconst widthClass = WIDTH_CLASS[width];\n\tconst paddingClass = PADDING_CLASS[padding];\n\n\tif (bare) {\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'w-full flex-1 relative overflow-hidden overflow-y-auto @container/main h-full',\n\t\t\t\t\twidthClass,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cn(\n\t\t\t\t'w-full flex-1 relative overflow-hidden @container/main h-full',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'flex min-h-full flex-1 flex-col gap-space-2xl rounded-xl',\n\t\t\t\t\twidthClass,\n\t\t\t\t\tpaddingClass,\n\t\t\t\t\tinnerClassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</Component>\n\t);\n}\n","/**\n * Section — vertical-spaced wrapper for grouping content blocks inside a page.\n *\n * Use between cards or content groups when you want a consistent vertical\n * rhythm without nesting another `Container`. Three densities scale the\n * top/bottom spacing.\n */\nimport { cn } from '@/lib/utils';\n\nimport type { SectionProps } from './containers.types';\n\nconst DENSITY_CLASS: Record<NonNullable<SectionProps['density']>, string> = {\n\ttight: 'space-y-space-lg',\n\tdefault: 'space-y-space-xl',\n\tloose: 'space-y-space-2xl',\n};\n\nexport function Section({\n\tchildren,\n\tas: Component = 'section',\n\tdensity = 'default',\n\tclassName,\n\t...props\n}: SectionProps) {\n\treturn (\n\t\t<Component className={cn(DENSITY_CLASS[density], className)} {...props}>\n\t\t\t{children}\n\t\t</Component>\n\t);\n}\n","import {\n\tChildren,\n\ttype PropsWithChildren,\n\ttype ReactElement,\n\ttype ReactNode,\n\tisValidElement,\n} from 'react';\n\nimport { cn } from '@/lib/utils';\n\ninterface LayoutBlockProps {\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\nexport interface TwoColumnLayoutProps {\n\tchildren: ReactNode;\n\tclassName?: string;\n\tcolumnsClassName?: string;\n\tgapClassName?: string;\n\ttopWrapperClassName?: string;\n\touterWrapperClassName?: string;\n\tleftColumnClassName?: string;\n\trightColumnClassName?: string;\n\treverse?: boolean;\n\tmobileReverse?: boolean;\n\tstickyRight?: boolean;\n\tstickyRightOffsetClassName?: string;\n}\n\nexport const InnerLayoutBlock = ({ children }: PropsWithChildren<LayoutBlockProps>) => children;\n\nInnerLayoutBlock.displayName = 'InnerLayoutBlock';\n\nexport const OuterLayoutBlock = ({ children }: PropsWithChildren<LayoutBlockProps>) => children;\n\nOuterLayoutBlock.displayName = 'OuterLayoutBlock';\n\nexport const TopLayoutBlock = ({ children }: PropsWithChildren<LayoutBlockProps>) => children;\n\nTopLayoutBlock.displayName = 'TopLayoutBlock';\n\ntype InnerLayoutBlockElement = ReactElement<LayoutBlockProps, typeof InnerLayoutBlock>;\ntype OuterLayoutBlockElement = ReactElement<LayoutBlockProps, typeof OuterLayoutBlock>;\ntype TopLayoutBlockElement = ReactElement<LayoutBlockProps, typeof TopLayoutBlock>;\n\nconst DEFAULT_COLUMNS = 'lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]';\nconst DEFAULT_GAP = 'gap-space-2xl';\nconst DEFAULT_OUTER_WRAPPER = 'mt-space-2xl';\nconst DEFAULT_STICKY_OFFSET = 'lg:top-space-2xl';\nconst DEFAULT_TOP_WRAPPER = 'mb-space-2xl';\n\n/**\n * TwoColumnLayout — generic main + aside page structure.\n *\n * Use two `InnerLayoutBlock` children for the columns, optional `TopLayoutBlock`\n * for content above the grid, and optional `OuterLayoutBlock` for content below.\n */\nexport function TwoColumnLayout({\n\tchildren,\n\tclassName,\n\tcolumnsClassName = DEFAULT_COLUMNS,\n\tgapClassName = DEFAULT_GAP,\n\ttopWrapperClassName = DEFAULT_TOP_WRAPPER,\n\touterWrapperClassName = DEFAULT_OUTER_WRAPPER,\n\tleftColumnClassName,\n\trightColumnClassName,\n\treverse = false,\n\tmobileReverse = true,\n\tstickyRight = false,\n\tstickyRightOffsetClassName = DEFAULT_STICKY_OFFSET,\n}: TwoColumnLayoutProps) {\n\tconst childArray = Children.toArray(children).filter(Boolean);\n\n\tconst innerBlocks: InnerLayoutBlockElement[] = [];\n\tconst outerBlocks: OuterLayoutBlockElement[] = [];\n\tconst topBlocks: TopLayoutBlockElement[] = [];\n\n\tchildArray.forEach((child) => {\n\t\tif (!isValidElement(child)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (child.type === InnerLayoutBlock) {\n\t\t\tinnerBlocks.push(child as InnerLayoutBlockElement);\n\t\t\treturn;\n\t\t}\n\n\t\tif (child.type === OuterLayoutBlock) {\n\t\t\touterBlocks.push(child as OuterLayoutBlockElement);\n\t\t\treturn;\n\t\t}\n\n\t\tif (child.type === TopLayoutBlock) {\n\t\t\ttopBlocks.push(child as TopLayoutBlockElement);\n\t\t}\n\t});\n\n\tif (innerBlocks.length !== 2) {\n\t\tthrow new Error('TwoColumnLayout requires exactly two InnerLayoutBlock children.');\n\t}\n\n\tconst [firstInner, secondInner] = innerBlocks;\n\tconst leftBlock = reverse ? secondInner : firstInner;\n\tconst rightBlock = reverse ? firstInner : secondInner;\n\tconst outerBlock = outerBlocks[0] ?? null;\n\tconst topBlock = topBlocks[0] ?? null;\n\n\tconst leftOrderClass = mobileReverse ? 'order-2 lg:order-1' : 'order-1 lg:order-1';\n\tconst rightOrderClass = mobileReverse ? 'order-1 lg:order-2' : 'order-2 lg:order-2';\n\tconst stickyClassNames = stickyRight\n\t\t? cn('lg:sticky lg:self-start', stickyRightOffsetClassName)\n\t\t: null;\n\n\treturn (\n\t\t<>\n\t\t\t{!!topBlock && (\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"two-column-layout-top\"\n\t\t\t\t\tclassName={cn('two-column-layout--top', topWrapperClassName, topBlock.props.className)}\n\t\t\t\t>\n\t\t\t\t\t{topBlock.props.children}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tdata-slot=\"two-column-layout\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'two-column-layout--component flex min-w-0 flex-col',\n\t\t\t\t\tgapClassName,\n\t\t\t\t\t'lg:grid',\n\t\t\t\t\tcolumnsClassName,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"two-column-layout-left\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t'two-column-layout--left min-h-0 min-w-0',\n\t\t\t\t\t\tleftOrderClass,\n\t\t\t\t\t\tleftColumnClassName,\n\t\t\t\t\t\tleftBlock.props.className,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{leftBlock.props.children}\n\t\t\t\t</div>\n\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"two-column-layout-right\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t'two-column-layout--right min-h-0 min-w-0',\n\t\t\t\t\t\trightOrderClass,\n\t\t\t\t\t\trightColumnClassName,\n\t\t\t\t\t\tstickyClassNames,\n\t\t\t\t\t\trightBlock.props.className,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{rightBlock.props.children}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{!!outerBlock && (\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"two-column-layout-outer\"\n\t\t\t\t\tclassName={cn('two-column-layout--outer', outerWrapperClassName, outerBlock.props.className)}\n\t\t\t\t>\n\t\t\t\t\t{outerBlock.props.children}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nTwoColumnLayout.displayName = 'TwoColumnLayout';\n\nexport default TwoColumnLayout;\n"],"mappings":"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"}

package/dist/_shared/containers-GDaJ3SOV.js

@@ -0,0 +1,101 @@
+import { cn as e } from "../lib/utils.js";
+import { Children as t, isValidElement as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/layout/containers/content-container.tsx
+var o = {
+	narrow: "max-w-[1040px] mx-auto",
+	default: "",
+	large: "max-w-screen-2xl mx-auto",
+	wide: "max-w-screen-2xl mx-auto",
+	full: ""
+}, s = {
+	none: "p-0",
+	sm: "p-surface-sm md:p-surface",
+	default: "p-surface md:p-space-2xl",
+	lg: "p-space-2xl"
+};
+function c({ children: t, as: n = "div", width: r = "default", padding: a = "default", bare: c = !1, className: l, innerClassName: u, ...d }) {
+	let f = o[r], p = s[a];
+	return c ? /* @__PURE__ */ i(n, {
+		className: e("w-full flex-1 relative overflow-hidden overflow-y-auto @container/main h-full", f, l),
+		...d,
+		children: t
+	}) : /* @__PURE__ */ i(n, {
+		className: e("w-full flex-1 relative overflow-hidden @container/main h-full", l),
+		...d,
+		children: /* @__PURE__ */ i("div", {
+			className: e("flex min-h-full flex-1 flex-col gap-space-2xl rounded-xl", f, p, u),
+			children: t
+		})
+	});
+}
+//#endregion
+//#region src/components/layout/containers/section.tsx
+var l = {
+	tight: "space-y-space-lg",
+	default: "space-y-space-xl",
+	loose: "space-y-space-2xl"
+};
+function u({ children: t, as: n = "section", density: r = "default", className: a, ...o }) {
+	return /* @__PURE__ */ i(n, {
+		className: e(l[r], a),
+		...o,
+		children: t
+	});
+}
+//#endregion
+//#region src/components/layout/containers/two-column-layout.tsx
+var d = ({ children: e }) => e;
+d.displayName = "InnerLayoutBlock";
+var f = ({ children: e }) => e;
+f.displayName = "OuterLayoutBlock";
+var p = ({ children: e }) => e;
+p.displayName = "TopLayoutBlock";
+var m = "lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]", h = "gap-space-2xl", g = "mt-space-2xl", _ = "lg:top-space-2xl", v = "mb-space-2xl";
+function y({ children: o, className: s, columnsClassName: c = m, gapClassName: l = h, topWrapperClassName: u = v, outerWrapperClassName: y = g, leftColumnClassName: b, rightColumnClassName: x, reverse: S = !1, mobileReverse: C = !0, stickyRight: w = !1, stickyRightOffsetClassName: T = _ }) {
+	let E = t.toArray(o).filter(Boolean), D = [], O = [], k = [];
+	if (E.forEach((e) => {
+		if (n(e)) {
+			if (e.type === d) {
+				D.push(e);
+				return;
+			}
+			if (e.type === f) {
+				O.push(e);
+				return;
+			}
+			e.type === p && k.push(e);
+		}
+	}), D.length !== 2) throw Error("TwoColumnLayout requires exactly two InnerLayoutBlock children.");
+	let [A, j] = D, M = S ? j : A, N = S ? A : j, P = O[0] ?? null, F = k[0] ?? null, I = C ? "order-2 lg:order-1" : "order-1 lg:order-1", L = C ? "order-1 lg:order-2" : "order-2 lg:order-2", R = w ? e("lg:sticky lg:self-start", T) : null;
+	return /* @__PURE__ */ a(r, { children: [
+		!!F && /* @__PURE__ */ i("div", {
+			"data-slot": "two-column-layout-top",
+			className: e("two-column-layout--top", u, F.props.className),
+			children: F.props.children
+		}),
+		/* @__PURE__ */ a("div", {
+			"data-slot": "two-column-layout",
+			className: e("two-column-layout--component flex min-w-0 flex-col", l, "lg:grid", c, s),
+			children: [/* @__PURE__ */ i("div", {
+				"data-slot": "two-column-layout-left",
+				className: e("two-column-layout--left min-h-0 min-w-0", I, b, M.props.className),
+				children: M.props.children
+			}), /* @__PURE__ */ i("div", {
+				"data-slot": "two-column-layout-right",
+				className: e("two-column-layout--right min-h-0 min-w-0", L, x, R, N.props.className),
+				children: N.props.children
+			})]
+		}),
+		!!P && /* @__PURE__ */ i("div", {
+			"data-slot": "two-column-layout-outer",
+			className: e("two-column-layout--outer", y, P.props.className),
+			children: P.props.children
+		})
+	] });
+}
+y.displayName = "TwoColumnLayout";
+//#endregion
+export { u as a, y as i, f as n, c as o, p as r, d as t };
+
+//# sourceMappingURL=containers-GDaJ3SOV.js.map

package/dist/_shared/containers-GDaJ3SOV.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"containers-GDaJ3SOV.js","names":[],"sources":["../../src/components/layout/containers/content-container.tsx","../../src/components/layout/containers/section.tsx","../../src/components/layout/containers/two-column-layout.tsx"],"sourcesContent":["/**\n * Container — page-level content wrapper.\n *\n * Wraps the page body in a flexbox column with consistent padding and an\n * optional max-width clamp. Use as the outer wrapper inside a `<Page>`, or\n * standalone for content panes that need a centered, padded surface.\n *\n * `bare` skips the padded inner column for edge-to-edge children, while\n * `innerClassName` customizes the clamped column without affecting the outer\n * scroll/container-query wrapper.\n */\nimport { cn } from '@/lib/utils';\n\nimport type { ContainerProps } from './containers.types';\n\nconst WIDTH_CLASS: Record<NonNullable<ContainerProps['width']>, string> = {\n\tnarrow: 'max-w-[1040px] mx-auto',\n\tdefault: '',\n\tlarge: 'max-w-screen-2xl mx-auto',\n\twide: 'max-w-screen-2xl mx-auto',\n\tfull: '',\n};\n\nconst PADDING_CLASS: Record<NonNullable<ContainerProps['padding']>, string> = {\n\tnone: 'p-0',\n\tsm: 'p-surface-sm md:p-surface',\n\tdefault: 'p-surface md:p-space-2xl',\n\tlg: 'p-space-2xl',\n};\n\nexport function Container({\n\tchildren,\n\tas: Component = 'div',\n\twidth = 'default',\n\tpadding = 'default',\n\tbare = false,\n\tclassName,\n\tinnerClassName,\n\t...props\n}: ContainerProps) {\n\tconst widthClass = WIDTH_CLASS[width];\n\tconst paddingClass = PADDING_CLASS[padding];\n\n\tif (bare) {\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'w-full flex-1 relative overflow-hidden overflow-y-auto @container/main h-full',\n\t\t\t\t\twidthClass,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cn(\n\t\t\t\t'w-full flex-1 relative overflow-hidden @container/main h-full',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'flex min-h-full flex-1 flex-col gap-space-2xl rounded-xl',\n\t\t\t\t\twidthClass,\n\t\t\t\t\tpaddingClass,\n\t\t\t\t\tinnerClassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t</Component>\n\t);\n}\n","/**\n * Section — vertical-spaced wrapper for grouping content blocks inside a page.\n *\n * Use between cards or content groups when you want a consistent vertical\n * rhythm without nesting another `Container`. Three densities scale the\n * top/bottom spacing.\n */\nimport { cn } from '@/lib/utils';\n\nimport type { SectionProps } from './containers.types';\n\nconst DENSITY_CLASS: Record<NonNullable<SectionProps['density']>, string> = {\n\ttight: 'space-y-space-lg',\n\tdefault: 'space-y-space-xl',\n\tloose: 'space-y-space-2xl',\n};\n\nexport function Section({\n\tchildren,\n\tas: Component = 'section',\n\tdensity = 'default',\n\tclassName,\n\t...props\n}: SectionProps) {\n\treturn (\n\t\t<Component className={cn(DENSITY_CLASS[density], className)} {...props}>\n\t\t\t{children}\n\t\t</Component>\n\t);\n}\n","import {\n\tChildren,\n\ttype PropsWithChildren,\n\ttype ReactElement,\n\ttype ReactNode,\n\tisValidElement,\n} from 'react';\n\nimport { cn } from '@/lib/utils';\n\ninterface LayoutBlockProps {\n\tclassName?: string;\n\tchildren: ReactNode;\n}\n\nexport interface TwoColumnLayoutProps {\n\tchildren: ReactNode;\n\tclassName?: string;\n\tcolumnsClassName?: string;\n\tgapClassName?: string;\n\ttopWrapperClassName?: string;\n\touterWrapperClassName?: string;\n\tleftColumnClassName?: string;\n\trightColumnClassName?: string;\n\treverse?: boolean;\n\tmobileReverse?: boolean;\n\tstickyRight?: boolean;\n\tstickyRightOffsetClassName?: string;\n}\n\nexport const InnerLayoutBlock = ({ children }: PropsWithChildren<LayoutBlockProps>) => children;\n\nInnerLayoutBlock.displayName = 'InnerLayoutBlock';\n\nexport const OuterLayoutBlock = ({ children }: PropsWithChildren<LayoutBlockProps>) => children;\n\nOuterLayoutBlock.displayName = 'OuterLayoutBlock';\n\nexport const TopLayoutBlock = ({ children }: PropsWithChildren<LayoutBlockProps>) => children;\n\nTopLayoutBlock.displayName = 'TopLayoutBlock';\n\ntype InnerLayoutBlockElement = ReactElement<LayoutBlockProps, typeof InnerLayoutBlock>;\ntype OuterLayoutBlockElement = ReactElement<LayoutBlockProps, typeof OuterLayoutBlock>;\ntype TopLayoutBlockElement = ReactElement<LayoutBlockProps, typeof TopLayoutBlock>;\n\nconst DEFAULT_COLUMNS = 'lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]';\nconst DEFAULT_GAP = 'gap-space-2xl';\nconst DEFAULT_OUTER_WRAPPER = 'mt-space-2xl';\nconst DEFAULT_STICKY_OFFSET = 'lg:top-space-2xl';\nconst DEFAULT_TOP_WRAPPER = 'mb-space-2xl';\n\n/**\n * TwoColumnLayout — generic main + aside page structure.\n *\n * Use two `InnerLayoutBlock` children for the columns, optional `TopLayoutBlock`\n * for content above the grid, and optional `OuterLayoutBlock` for content below.\n */\nexport function TwoColumnLayout({\n\tchildren,\n\tclassName,\n\tcolumnsClassName = DEFAULT_COLUMNS,\n\tgapClassName = DEFAULT_GAP,\n\ttopWrapperClassName = DEFAULT_TOP_WRAPPER,\n\touterWrapperClassName = DEFAULT_OUTER_WRAPPER,\n\tleftColumnClassName,\n\trightColumnClassName,\n\treverse = false,\n\tmobileReverse = true,\n\tstickyRight = false,\n\tstickyRightOffsetClassName = DEFAULT_STICKY_OFFSET,\n}: TwoColumnLayoutProps) {\n\tconst childArray = Children.toArray(children).filter(Boolean);\n\n\tconst innerBlocks: InnerLayoutBlockElement[] = [];\n\tconst outerBlocks: OuterLayoutBlockElement[] = [];\n\tconst topBlocks: TopLayoutBlockElement[] = [];\n\n\tchildArray.forEach((child) => {\n\t\tif (!isValidElement(child)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (child.type === InnerLayoutBlock) {\n\t\t\tinnerBlocks.push(child as InnerLayoutBlockElement);\n\t\t\treturn;\n\t\t}\n\n\t\tif (child.type === OuterLayoutBlock) {\n\t\t\touterBlocks.push(child as OuterLayoutBlockElement);\n\t\t\treturn;\n\t\t}\n\n\t\tif (child.type === TopLayoutBlock) {\n\t\t\ttopBlocks.push(child as TopLayoutBlockElement);\n\t\t}\n\t});\n\n\tif (innerBlocks.length !== 2) {\n\t\tthrow new Error('TwoColumnLayout requires exactly two InnerLayoutBlock children.');\n\t}\n\n\tconst [firstInner, secondInner] = innerBlocks;\n\tconst leftBlock = reverse ? secondInner : firstInner;\n\tconst rightBlock = reverse ? firstInner : secondInner;\n\tconst outerBlock = outerBlocks[0] ?? null;\n\tconst topBlock = topBlocks[0] ?? null;\n\n\tconst leftOrderClass = mobileReverse ? 'order-2 lg:order-1' : 'order-1 lg:order-1';\n\tconst rightOrderClass = mobileReverse ? 'order-1 lg:order-2' : 'order-2 lg:order-2';\n\tconst stickyClassNames = stickyRight\n\t\t? cn('lg:sticky lg:self-start', stickyRightOffsetClassName)\n\t\t: null;\n\n\treturn (\n\t\t<>\n\t\t\t{!!topBlock && (\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"two-column-layout-top\"\n\t\t\t\t\tclassName={cn('two-column-layout--top', topWrapperClassName, topBlock.props.className)}\n\t\t\t\t>\n\t\t\t\t\t{topBlock.props.children}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tdata-slot=\"two-column-layout\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'two-column-layout--component flex min-w-0 flex-col',\n\t\t\t\t\tgapClassName,\n\t\t\t\t\t'lg:grid',\n\t\t\t\t\tcolumnsClassName,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"two-column-layout-left\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t'two-column-layout--left min-h-0 min-w-0',\n\t\t\t\t\t\tleftOrderClass,\n\t\t\t\t\t\tleftColumnClassName,\n\t\t\t\t\t\tleftBlock.props.className,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{leftBlock.props.children}\n\t\t\t\t</div>\n\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"two-column-layout-right\"\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t'two-column-layout--right min-h-0 min-w-0',\n\t\t\t\t\t\trightOrderClass,\n\t\t\t\t\t\trightColumnClassName,\n\t\t\t\t\t\tstickyClassNames,\n\t\t\t\t\t\trightBlock.props.className,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{rightBlock.props.children}\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t{!!outerBlock && (\n\t\t\t\t<div\n\t\t\t\t\tdata-slot=\"two-column-layout-outer\"\n\t\t\t\t\tclassName={cn('two-column-layout--outer', outerWrapperClassName, outerBlock.props.className)}\n\t\t\t\t>\n\t\t\t\t\t{outerBlock.props.children}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nTwoColumnLayout.displayName = 'TwoColumnLayout';\n\nexport default TwoColumnLayout;\n"],"mappings":"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"}