admin-ui-starter-kit 0.5.0 → 0.6.2

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

@@ -129,7 +129,7 @@ import {
 	Sparkles,
 	UsersRound,
 } from 'lucide-react';
-import { useState } from 'react';
+import { useState, type ReactNode } from 'react';
 
 import { Badge } from '@/components/base/badge';
 import { Button } from '@/components/base/buttons';
@@ -234,6 +234,18 @@ function renderPreviewLink({
 	);
 }
 
+const AUTH_DEMO_SHELL_CLASS = 'min-h-full';
+const AUTH_DEMO_MAIN_CLASS = 'min-h-full py-6 sm:py-6 md:py-7';
+const AUTH_DEMO_SPLIT_GRID_CLASS = 'min-h-full';
+
+function AuthDemoViewport({ children }: { children: ReactNode }) {
+	return (
+		<div className="auth-demo-viewport h-168 overflow-auto bg-background">
+			{children}
+		</div>
+	);
+}
+
 function PatternStrip() {
 	return (
 		<div className="relative h-full min-h-16 overflow-hidden">
@@ -290,7 +302,7 @@ function LoginForm() {
 						</label>
 						<Button
 							type="button"
-							size="xs"
+							size="small"
 							variant="action"
 							buttonStyle="ghost"
 							className="h-auto px-1 py-0"
@@ -561,217 +573,241 @@ function InvitePanel() {
 
 export function CenteredCardAuth() {
 	return (
-		<AuthShell
-			brand={{
-				logo: <LogoMark />,
-				label: 'Northwind Admin',
-				description: 'Operations console',
-				href: '#/',
-				ariaLabel: 'Northwind Admin home',
-			}}
-			title="Sign in to your workspace"
-			description="Use your company account to continue."
-			banner={
-				<Alert variant="info">
-					<AlertTitle>Single sign-on is available</AlertTitle>
-					<AlertDescription>Company domains can sign in with Google or email.</AlertDescription>
-					<AlertAction>
-						<Button size="xs" variant="action" buttonStyle="ghost">
-							Learn more
-						</Button>
-					</AlertAction>
-				</Alert>
-			}
-			socialProviders={socialProviders}
-			socialProvidersLayout="grid"
-			socialDivider="or use email"
-			cardFooter={
-				<Text size="xs" type="secondary">
-					New to Northwind? <TextLink href="#/register" size="xs">Request access</TextLink>
-				</Text>
-			}
-			postCard={
-				<Text size="xs" type="secondary">
-					Protected by device verification and audit logging.
-				</Text>
-			}
-			footerLinks={footerLinks}
-			policyLinks={policyLinks}
-			languageLinks={languageLinks}
-			renderLink={renderPreviewLink}
-		>
-			<LoginForm />
-		</AuthShell>
+		<AuthDemoViewport>
+			<AuthShell
+				className={AUTH_DEMO_SHELL_CLASS}
+				mainClassName={AUTH_DEMO_MAIN_CLASS}
+				brand={{
+					logo: <LogoMark />,
+					label: 'Northwind Admin',
+					description: 'Operations console',
+					href: '#/',
+					ariaLabel: 'Northwind Admin home',
+				}}
+				title="Sign in to your workspace"
+				description="Use your company account to continue."
+				banner={
+					<Alert variant="info">
+						<AlertTitle>Single sign-on is available</AlertTitle>
+						<AlertDescription>Company domains can sign in with Google or email.</AlertDescription>
+						<AlertAction>
+							<Button size="small" variant="action" buttonStyle="ghost">
+								Learn more
+							</Button>
+						</AlertAction>
+					</Alert>
+				}
+				socialProviders={socialProviders}
+				socialProvidersLayout="grid"
+				socialDivider="or use email"
+				cardFooter={
+					<Text size="xs" type="secondary">
+						New to Northwind? <TextLink href="#/register" size="xs">Request access</TextLink>
+					</Text>
+				}
+				postCard={
+					<Text size="xs" type="secondary">
+						Protected by device verification and audit logging.
+					</Text>
+				}
+				footerLinks={footerLinks}
+				policyLinks={policyLinks}
+				languageLinks={languageLinks}
+				renderLink={renderPreviewLink}
+			>
+				<LoginForm />
+			</AuthShell>
+		</AuthDemoViewport>
 	);
 }
 
 export function LocalizedPatternCardAuth() {
 	return (
-		<AuthShell
-			size="md"
-			brand={<Wordmark />}
-			cardMedia={<DensePatternStrip />}
-			cardMediaClassName="h-16 min-h-16 overflow-hidden border-b-0 bg-transparent"
-			title="Влезте в акаунта си"
-			description="Въведете вашите данни, за да получите достъп до таблото."
-			cardFooter={
-				<Text size="xs" type="secondary">
-					Нямате достъп? <TextLink href="#/request-access" size="xs">Заявете покана</TextLink>
-				</Text>
-			}
-			languageLinks={[
-				{ id: 'bg', label: 'Български', href: '#/locale/bg' },
-				{ id: 'en', label: 'English', href: '#/locale/en' },
-			]}
-			policyLinks={policyLinks}
-			renderLink={renderPreviewLink}
-			strings={{
-				languageLinksLabel: 'Език',
-				policyLinksLabel: 'Правила',
-			}}
-		>
-			<LocalizedLoginForm />
-		</AuthShell>
+		<AuthDemoViewport>
+			<AuthShell
+				className={AUTH_DEMO_SHELL_CLASS}
+				mainClassName={AUTH_DEMO_MAIN_CLASS}
+				size="md"
+				brand={<Wordmark />}
+				cardMedia={<DensePatternStrip />}
+				cardMediaClassName="h-16 min-h-16 overflow-hidden border-b-0 bg-transparent"
+				title="Влезте в акаунта си"
+				description="Въведете вашите данни, за да получите достъп до таблото."
+				cardFooter={
+					<Text size="xs" type="secondary">
+						Нямате достъп? <TextLink href="#/request-access" size="xs">Заявете покана</TextLink>
+					</Text>
+				}
+				languageLinks={[
+					{ id: 'bg', label: 'Български', href: '#/locale/bg' },
+					{ id: 'en', label: 'English', href: '#/locale/en' },
+				]}
+				policyLinks={policyLinks}
+				renderLink={renderPreviewLink}
+				strings={{
+					languageLinksLabel: 'Език',
+					policyLinksLabel: 'Правила',
+				}}
+			>
+				<LocalizedLoginForm />
+			</AuthShell>
+		</AuthDemoViewport>
 	);
 }
 
 export function ProviderMatrixAuth() {
 	return (
-		<AuthShell
-			brand={{
-				logo: <LogoMark />,
-				label: 'Northwind Admin',
-				description: 'Identity gateway',
-				href: '#/',
-			}}
-			title="Choose a sign-in method"
-			description="Route every provider through the host app while keeping the button layout consistent."
-			socialProviders={providerMatrix}
-			socialProvidersLayout="grid"
-			socialDivider="or send a one-time code"
-			footerLinks={footerLinks}
-			policyLinks={policyLinks}
-			renderLink={renderPreviewLink}
-		>
-			<OneTimeCodeForm />
-		</AuthShell>
+		<AuthDemoViewport>
+			<AuthShell
+				className={AUTH_DEMO_SHELL_CLASS}
+				mainClassName={AUTH_DEMO_MAIN_CLASS}
+				brand={{
+					logo: <LogoMark />,
+					label: 'Northwind Admin',
+					description: 'Identity gateway',
+					href: '#/',
+				}}
+				title="Choose a sign-in method"
+				description="Route every provider through the host app while keeping the button layout consistent."
+				socialProviders={providerMatrix}
+				socialProvidersLayout="grid"
+				socialDivider="or send a one-time code"
+				footerLinks={footerLinks}
+				policyLinks={policyLinks}
+				renderLink={renderPreviewLink}
+			>
+				<OneTimeCodeForm />
+			</AuthShell>
+		</AuthDemoViewport>
 	);
 }
 
 export function ResetPasswordAuth() {
 	return (
-		<AuthShell
-			size="sm"
-			brand={{ logo: <LogoMark />, label: 'Northwind Admin', href: '#/' }}
-			title="Reset your password"
-			description="Choose a new password for marina@northwind.test."
-			banner={
-				<Alert variant="warning">
-					<AlertTitle>Reset link expires soon</AlertTitle>
-					<AlertDescription>For security, this link is valid for another 12 minutes.</AlertDescription>
-				</Alert>
-			}
-			cardFooter={
-				<Text size="xs" type="secondary">
-					Remembered it? <TextLink href="#/login" size="xs">Back to sign in</TextLink>
-				</Text>
-			}
-			policyLinks={policyLinks}
-			renderLink={renderPreviewLink}
-		>
-			<ResetPasswordForm />
-		</AuthShell>
+		<AuthDemoViewport>
+			<AuthShell
+				className={AUTH_DEMO_SHELL_CLASS}
+				mainClassName={AUTH_DEMO_MAIN_CLASS}
+				size="sm"
+				brand={{ logo: <LogoMark />, label: 'Northwind Admin', href: '#/' }}
+				title="Reset your password"
+				description="Choose a new password for marina@northwind.test."
+				banner={
+					<Alert variant="warning">
+						<AlertTitle>Reset link expires soon</AlertTitle>
+						<AlertDescription>For security, this link is valid for another 12 minutes.</AlertDescription>
+					</Alert>
+				}
+				cardFooter={
+					<Text size="xs" type="secondary">
+						Remembered it? <TextLink href="#/login" size="xs">Back to sign in</TextLink>
+					</Text>
+				}
+				policyLinks={policyLinks}
+				renderLink={renderPreviewLink}
+			>
+				<ResetPasswordForm />
+			</AuthShell>
+		</AuthDemoViewport>
 	);
 }
 
 export function SplitAuthShell() {
 	return (
-		<AuthShell
-			variant="split"
-			size="md"
-			splitSide="left"
-			splitMobile="stacked"
-			className="bg-muted/20"
-			splitPanelClassName="p-3 lg:p-6"
-			brand={{
-				logo: <LogoMark />,
-				label: 'Northwind Admin',
-				href: '#/',
-			}}
-			cardMedia={<PatternStrip />}
-			cardMediaClassName="h-16 min-h-16 overflow-hidden border-b-0 bg-transparent"
-			eyebrow="Team invite"
-			title="Create your admin account"
-			description="Accept the invite and configure your first secure session."
-			headerEnd={<Badge variant="warning">Invite</Badge>}
-			splitPanel={<InvitePanel />}
-			cardFooter={
-				<Text size="xs" type="secondary">
-					Already joined? <TextLink href="#/login" size="xs">Sign in</TextLink>
-				</Text>
-			}
-			footerLinks={footerLinks}
-			policyLinks={policyLinks}
-			renderLink={renderPreviewLink}
-		>
-			<InviteForm />
-		</AuthShell>
+		<AuthDemoViewport>
+			<AuthShell
+				variant="split"
+				size="md"
+				splitSide="left"
+				splitMobile="stacked"
+				className="min-h-full bg-muted/20"
+				mainClassName={AUTH_DEMO_MAIN_CLASS}
+				splitGridClassName={AUTH_DEMO_SPLIT_GRID_CLASS}
+				splitPanelClassName="p-3 lg:p-5"
+				brand={{
+					logo: <LogoMark />,
+					label: 'Northwind Admin',
+					href: '#/',
+				}}
+				cardMedia={<PatternStrip />}
+				cardMediaClassName="h-16 min-h-16 overflow-hidden border-b-0 bg-transparent"
+				eyebrow="Team invite"
+				title="Create your admin account"
+				description="Accept the invite and configure your first secure session."
+				headerEnd={<Badge variant="warning">Invite</Badge>}
+				splitPanel={<InvitePanel />}
+				cardFooter={
+					<Text size="xs" type="secondary">
+						Already joined? <TextLink href="#/login" size="xs">Sign in</TextLink>
+					</Text>
+				}
+				footerLinks={footerLinks}
+				policyLinks={policyLinks}
+				renderLink={renderPreviewLink}
+			>
+				<InviteForm />
+			</AuthShell>
+		</AuthDemoViewport>
 	);
 }
 
 export function RightSplitAuthShell() {
 	return (
-		<AuthShell
-			variant="split"
-			size="sm"
-			splitSide="right"
-			className="bg-muted/20"
-			splitPanelClassName="p-3 lg:p-6"
-			splitPanel={{
-				surface: 'card',
-				className: 'rounded-lg shadow-sm',
-				contentClassName: 'gap-6 p-5 md:p-7 lg:p-8',
-				eyebrow: 'Access policy',
-				title: 'Passwordless flows use the same shell.',
-				description: 'Magic-link, verification, reset-password, and two-factor pages can reuse the same card and after-card areas.',
-				features: [
-					{
-						id: 'configurable',
-						icon: <Sparkles className="size-4" aria-hidden="true" />,
-						title: 'Configurable chrome',
-						description: 'Brand, media, footer links, panel, and post-card copy are all slots.',
-					},
-					{
-						id: 'framework',
-						icon: <ShieldCheck className="size-4" aria-hidden="true" />,
-						title: 'Framework-neutral links',
-						description: 'Pass renderLink once and the shell uses the host router component.',
-					},
-				],
-			}}
-			brand={{ logo: <LogoMark />, label: 'Northwind Admin', href: '#/' }}
-			title="Check your email"
-			description="We sent a one-time sign-in link to marina@northwind.test."
-			footerLinks={footerLinks}
-			policyLinks={policyLinks}
-			languageSwitcher={
-				<Button size="xs" variant="secondary" buttonStyle="outline">
-					English
-				</Button>
-			}
-			renderLink={renderPreviewLink}
-		>
-			<div className="grid gap-4">
-				<Alert variant="success">
-					<AlertTitle>Magic link sent</AlertTitle>
-					<AlertDescription>The link expires in 15 minutes.</AlertDescription>
-				</Alert>
-				<Button fullWidth>Open mail app</Button>
-				<Button variant="secondary" buttonStyle="outline" fullWidth>
-					Resend link
-				</Button>
-			</div>
-		</AuthShell>
+		<AuthDemoViewport>
+			<AuthShell
+				variant="split"
+				size="sm"
+				splitSide="right"
+				className="min-h-full bg-muted/20"
+				mainClassName={AUTH_DEMO_MAIN_CLASS}
+				splitGridClassName={AUTH_DEMO_SPLIT_GRID_CLASS}
+				splitPanelClassName="p-3 lg:p-5"
+				splitPanel={{
+					surface: 'card',
+					className: 'rounded-lg shadow-sm',
+					contentClassName: 'gap-6 p-5 md:p-7 lg:p-8',
+					eyebrow: 'Access policy',
+					title: 'Passwordless flows use the same shell.',
+					description: 'Magic-link, verification, reset-password, and two-factor pages can reuse the same card and after-card areas.',
+					features: [
+						{
+							id: 'configurable',
+							icon: <Sparkles className="size-4" aria-hidden="true" />,
+							title: 'Configurable chrome',
+							description: 'Brand, media, footer links, panel, and post-card copy are all slots.',
+						},
+						{
+							id: 'framework',
+							icon: <ShieldCheck className="size-4" aria-hidden="true" />,
+							title: 'Framework-neutral links',
+							description: 'Pass renderLink once and the shell uses the host router component.',
+						},
+					],
+				}}
+				brand={{ logo: <LogoMark />, label: 'Northwind Admin', href: '#/' }}
+				title="Check your email"
+				description="We sent a one-time sign-in link to marina@northwind.test."
+				footerLinks={footerLinks}
+				policyLinks={policyLinks}
+				languageSwitcher={
+					<Button size="small" variant="secondary" buttonStyle="outline">
+						English
+					</Button>
+				}
+				renderLink={renderPreviewLink}
+			>
+				<div className="grid gap-4">
+					<Alert variant="success">
+						<AlertTitle>Magic link sent</AlertTitle>
+						<AlertDescription>The link expires in 15 minutes.</AlertDescription>
+					</Alert>
+					<Button fullWidth>Open mail app</Button>
+					<Button variant="secondary" buttonStyle="outline" fullWidth>
+						Resend link
+					</Button>
+				</div>
+			</AuthShell>
+		</AuthDemoViewport>
 	);
 }
 

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

@@ -51,7 +51,7 @@ import { Badge } from '@/components/base/badge';
 
 function SampleCard({ title, detail }: { title: string; detail: string }) {
 	return (
-		<SmartCard padding="sm" className="border-dashed">
+		<SmartCard padding="default" className="border-dashed">
 			<div className="space-y-1">
 				<Text weight="semibold">{title}</Text>
 				<Text size="xs" type="secondary">{detail}</Text>
@@ -79,7 +79,7 @@ function DemoViewport({ children, height = 320 }: { children: ReactNode; height?
 export function NarrowContainer() {
 	return (
 		<DemoViewport>
-			<Container as="section" width="narrow" padding="sm" innerClassName="gap-3">
+			<Container as="section" width="narrow" padding="default" innerClassName="gap-3">
 				<div className="flex items-center justify-between gap-3">
 					<Text weight="semibold">Narrow container</Text>
 					<Badge variant="info">padding sm</Badge>

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

@@ -106,7 +106,7 @@ export function AppHeaderComposition() {
 										<Header
 											renderLink={renderPreviewLink}
 											breadcrumbs={[{ label: 'Operations', href: '#/features/activities' }, { label: 'Orders' }]}
-											centerClassName="w-[32rem] max-w-[40vw]"
+											centerClassName="w-128 max-w-[40vw]"
 											slots={{
 												center: <HeaderSearch className="w-full" onOpen={() => {}} />,
 												right: (
@@ -137,7 +137,7 @@ export function AppHeaderComposition() {
 													['Awaiting stock', '12'],
 													['Ready to fulfill', '36'],
 												].map(([label, value, detail]) => (
-													<SmartCard key={label} padding="sm" className="shadow-sm">
+													<SmartCard key={label} padding="default" className="shadow-sm">
 														<Text size="xs" type="secondary">{label}</Text>
 														<Text weight="semibold">{value}</Text>
 														{!!detail && <Text size="xs" type="secondary">{detail}</Text>}
@@ -157,7 +157,7 @@ export function HeaderPartials() {
 		<>
 			<SidebarProvider className="min-h-0">
 								<div className="grid w-full gap-4 lg:grid-cols-2">
-									<SmartCard padding="sm">
+									<SmartCard padding="default">
 										<Text weight="semibold" className="mb-3">Breadcrumbs</Text>
 										<div className="h-10 rounded-lg border border-border bg-background px-3">
 											<HeaderBreadcrumbs
@@ -169,12 +169,12 @@ export function HeaderPartials() {
 										</div>
 									</SmartCard>
 
-									<SmartCard padding="sm">
+									<SmartCard padding="default">
 										<Text weight="semibold" className="mb-3">Search</Text>
 										<HeaderSearch className="w-full" strings={{ placeholder: 'Search customers, invoices, comments...' }} />
 									</SmartCard>
 
-									<SmartCard padding="sm">
+									<SmartCard padding="default">
 										<Text weight="semibold" className="mb-3">Notifications</Text>
 										<div className="flex items-center gap-3">
 											<HeaderNotifications notifications={notifications} unreadCount={2} renderLink={renderPreviewLink} />
@@ -182,7 +182,7 @@ export function HeaderPartials() {
 										</div>
 									</SmartCard>
 
-									<SmartCard padding="sm">
+									<SmartCard padding="default">
 										<Text weight="semibold" className="mb-3">Right action cluster</Text>
 										<div className="flex items-center gap-2">
 											<HeaderNotifications notifications={notifications} unreadCount={2} renderLink={renderPreviewLink} />
@@ -197,7 +197,7 @@ export function HeaderPartials() {
 
 export function HeaderToolPrimitives() {
 	return (
-		<SmartCard padding="sm">
+		<SmartCard padding="default">
 			<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
 				<div className="min-w-0">
 					<Text weight="semibold">Header tools</Text>
@@ -216,7 +216,7 @@ export function HeaderToolPrimitives() {
 						<div className="grid gap-1 p-3">
 							<Text weight="semibold">Workspace tools</Text>
 							<Text size="xs" type="secondary">Consumer-owned content inside package popover chrome.</Text>
-							<Button variant="secondary" size="sm">Open settings</Button>
+							<Button variant="secondary" size="default">Open settings</Button>
 						</div>
 					</HeaderToolPopover>
 				</div>