admin-ui-starter-kit 0.4.5 → 0.5.0

package/dist/showcase/assets/layout-containers-Bk_jSDWd.js

@@ -0,0 +1,101 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Dr as t,Er as n,Rr as r,jr as i,t as a}from"./example-CbMg22fx.js";import{n as o,s}from"./index-DNH0y0r-.js";import{t as c}from"./smart-card-DpvRHqI9.js";import{t as l}from"./content-container-Cc8Vv5Wp.js";var u=s(),d={tight:`space-y-3`,default:`space-y-5`,loose:`space-y-8`};function f({children:e,as:t=`section`,density:n=`default`,className:r,...i}){return(0,u.jsx)(t,{className:o(d[n],r),...i,children:e})}var p=e({BareContainer:()=>v,NarrowContainer:()=>g,SectionRhythm:()=>y,WideContainer:()=>_});function m({title:e,detail:t}){return(0,u.jsx)(c,{padding:`sm`,className:`border-dashed`,children:(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(r,{weight:`semibold`,children:e}),(0,u.jsx)(r,{size:`xs`,type:`secondary`,children:t})]})})}function h({children:e,height:t=320}){return(0,u.jsx)(`div`,{className:`layout-demo-viewport relative w-full overflow-auto rounded-md border border-dashed border-border bg-background`,style:{height:t},children:e})}function g(){return(0,u.jsx)(h,{children:(0,u.jsxs)(l,{as:`section`,width:`narrow`,padding:`sm`,innerClassName:`gap-3`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,u.jsx)(r,{weight:`semibold`,children:`Narrow container`}),(0,u.jsx)(i,{variant:`info`,children:`padding sm`})]}),(0,u.jsx)(m,{title:`Centered content`,detail:`Useful for forms, setup flows, and readable single-column pages.`}),(0,u.jsx)(m,{title:`Comfortable reading width`,detail:"`max-w-7xl` keeps line lengths sensible at desktop sizes."})]})})}function _(){return(0,u.jsx)(h,{children:(0,u.jsxs)(l,{as:`section`,width:`wide`,padding:`default`,innerClassName:`grid grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-3`,children:[(0,u.jsx)(m,{title:`Card A`,detail:`Dashboard pages can keep cards aligned inside a max-width shell.`}),(0,u.jsx)(m,{title:`Card B`,detail:"`innerClassName` controls the inner column without breaking the outer wrapper."}),(0,u.jsx)(m,{title:`Card C`,detail:"Use `as` to render the right semantic element for the surface."})]})})}function v(){return(0,u.jsx)(h,{height:260,children:(0,u.jsxs)(l,{width:`full`,bare:!0,className:`bg-card`,children:[(0,u.jsx)(`div`,{className:`grid grid-cols-4 border-b border-border px-3 py-2`,children:[`Name`,`Owner`,`Status`,`Updated`].map(e=>(0,u.jsx)(r,{size:`xxs`,weight:`semibold`,type:`secondary`,className:`uppercase tracking-wider`,children:e},e))}),[`Billing portal`,`Customer records`,`Sync monitor`].map((e,t)=>(0,u.jsxs)(`div`,{className:`grid grid-cols-4 px-3 py-2`,children:[(0,u.jsx)(r,{weight:`medium`,children:e}),(0,u.jsx)(r,{type:`secondary`,children:`Operations`}),(0,u.jsx)(i,{variant:t===2?`warning`:`success`,children:t===2?`Review`:`Healthy`}),(0,u.jsx)(r,{size:`xs`,type:`secondary`,children:`Today`})]},e))]})})}function y(){return(0,u.jsx)(`div`,{className:`grid grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-3`,children:[`tight`,`default`,`loose`].map(e=>(0,u.jsxs)(f,{density:e,className:`rounded-md border border-dashed border-border p-4`,children:[(0,u.jsx)(r,{weight:`semibold`,className:`capitalize`,children:e}),(0,u.jsx)(m,{title:`Block one`,detail:`Section controls vertical rhythm only.`}),(0,u.jsx)(m,{title:`Block two`,detail:`Cards and headings remain separate composition concerns.`})]},e))})}var b=`import type { ReactNode } from 'react';
+import { Container, Section } from '@/components/layout/containers';
+import { SmartCard } from '@/components/base/cards';
+import { Text } from '@/components/typography';
+import { Badge } from '@/components/base/badge';
+
+function SampleCard({ title, detail }: { title: string; detail: string }) {
+	return (
+		<SmartCard padding="sm" className="border-dashed">
+			<div className="space-y-1">
+				<Text weight="semibold">{title}</Text>
+				<Text size="xs" type="secondary">{detail}</Text>
+			</div>
+		</SmartCard>
+	);
+}
+
+/**
+ * Layout primitives expect to live inside a real page shell with bounded
+ * height. The docs preview pane is unbounded, so we wrap demos in a fixed
+ * viewport so \`width\` clamps and section rhythm read as intended.
+ */
+function DemoViewport({ children, height = 320 }: { children: ReactNode; height?: number }) {
+	return (
+		<div
+			className="layout-demo-viewport relative w-full overflow-auto rounded-md border border-dashed border-border bg-background"
+			style={{ height }}
+		>
+			{children}
+		</div>
+	);
+}
+
+export function NarrowContainer() {
+	return (
+		<DemoViewport>
+			<Container as="section" width="narrow" padding="sm" innerClassName="gap-3">
+				<div className="flex items-center justify-between gap-3">
+					<Text weight="semibold">Narrow container</Text>
+					<Badge variant="info">padding sm</Badge>
+				</div>
+				<SampleCard title="Centered content" detail="Useful for forms, setup flows, and readable single-column pages." />
+				<SampleCard title="Comfortable reading width" detail="\`max-w-7xl\` keeps line lengths sensible at desktop sizes." />
+			</Container>
+		</DemoViewport>
+	);
+}
+
+export function WideContainer() {
+	return (
+		<DemoViewport>
+			<Container
+				as="section"
+				width="wide"
+				padding="default"
+				innerClassName="grid grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-3"
+			>
+				<SampleCard title="Card A" detail="Dashboard pages can keep cards aligned inside a max-width shell." />
+				<SampleCard title="Card B" detail="\`innerClassName\` controls the inner column without breaking the outer wrapper." />
+				<SampleCard title="Card C" detail="Use \`as\` to render the right semantic element for the surface." />
+			</Container>
+		</DemoViewport>
+	);
+}
+
+export function BareContainer() {
+	return (
+		<DemoViewport height={260}>
+			<Container width="full" bare className="bg-card">
+				<div className="grid grid-cols-4 border-b border-border px-3 py-2">
+					{['Name', 'Owner', 'Status', 'Updated'].map((h) => (
+						<Text key={h} size="xxs" weight="semibold" type="secondary" className="uppercase tracking-wider">{h}</Text>
+					))}
+				</div>
+				{['Billing portal', 'Customer records', 'Sync monitor'].map((name, index) => (
+					<div key={name} className="grid grid-cols-4 px-3 py-2">
+						<Text weight="medium">{name}</Text>
+						<Text type="secondary">Operations</Text>
+						<Badge variant={index === 2 ? 'warning' : 'success'}>{index === 2 ? 'Review' : 'Healthy'}</Badge>
+						<Text size="xs" type="secondary">Today</Text>
+					</div>
+				))}
+			</Container>
+		</DemoViewport>
+	);
+}
+
+export function SectionRhythm() {
+	return (
+		<div className="grid grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-3">
+			{(['tight', 'default', 'loose'] as const).map((density) => (
+				<Section key={density} density={density} className="rounded-md border border-dashed border-border p-4">
+					<Text weight="semibold" className="capitalize">{density}</Text>
+					<SampleCard title="Block one" detail="Section controls vertical rhythm only." />
+					<SampleCard title="Block two" detail="Cards and headings remain separate composition concerns." />
+				</Section>
+			))}
+		</div>
+	);
+}
+`;function x(e){return p||C(`Examples`,!1),v||C(`Examples.BareContainer`,!0),g||C(`Examples.NarrowContainer`,!0),y||C(`Examples.SectionRhythm`,!0),_||C(`Examples.WideContainer`,!0),(0,u.jsx)(t,{title:`Layout · Containers`,description:`Container and Section primitives for page structure, width clamps, padding density, and semantic wrappers.`,layer:`layout`,status:`ready`,children:(0,u.jsxs)(n,{title:`Examples`,id:`examples`,children:[(0,u.jsx)(a,{name:`NarrowContainer`,source:b,children:(0,u.jsx)(g,{})}),(0,u.jsx)(a,{name:`WideContainer`,source:b,children:(0,u.jsx)(_,{})}),(0,u.jsx)(a,{name:`BareContainer`,source:b,children:(0,u.jsx)(v,{})}),(0,u.jsx)(a,{name:`SectionRhythm`,source:b,children:(0,u.jsx)(y,{})})]})})}function S(e={}){let{wrapper:t}=e.components||{};return t?(0,u.jsx)(t,{...e,children:(0,u.jsx)(x,{...e})}):x(e)}function C(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{S as default};

package/dist/showcase/assets/layout-header-CuJVU1Rx.js

@@ -0,0 +1,203 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,Rr as a,jr as o,r as s,t as c}from"./example-CbMg22fx.js";import{t as l}from"./bell-YYeVQNAQ.js";import{t as u}from"./circle-alert-DM8Q0Da0.js";import{t as d}from"./circle-check-BYi8zv0a.js";import{n as f,t as p}from"./header-notifications-fOFoqfCR.js";import{r as m,t as h}from"./sidebar.context-BhexAjPM.js";import{t as g}from"./settings-Mbnp6hDe.js";import{n as _,s as v}from"./index-DNH0y0r-.js";import{t as y}from"./props-table-DSdjPLVr.js";import{t as b}from"./smart-card-DpvRHqI9.js";import{i as x,t as S}from"./popover-DoEhmJ7G.js";import{t as C}from"./popover-BWbBoxN0.js";import{t as w}from"./separator-kwh2KDqD.js";import{n as T,t as E}from"./header-CMjgUhtM.js";import{t as D}from"./page-header-DoZnb9z9.js";var O=v();function k({onOpen:e,onOpenChange:t,...n}){return(0,O.jsx)(f,{...n,onOpen:()=>{e?.(),t?.(!0)}})}var A=t(n(),1).forwardRef(({label:e,icon:t,active:n=!1,disabled:r=!1,badge:i,onClick:a,className:o,iconClassName:c},l)=>(0,O.jsxs)(s,{ref:l,"data-component":`header-tool-button`,"data-slot":`header-tool-button`,type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-sm`,"aria-label":e,"aria-pressed":n||void 0,title:e,disabled:r,onClick:a,className:_(`header-tool-button--component header-tool-button--trigger relative h-9 w-9 rounded-lg text-foreground transition-[background-color,color,box-shadow] hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background`,n&&`bg-accent text-accent-foreground`,o),children:[(0,O.jsx)(t,{"data-slot":`header-tool-icon`,className:_(`header-tool-button--icon size-4`,c),"aria-hidden":`true`}),!!i&&(0,O.jsx)(`span`,{"data-slot":`header-tool-badge`,className:`header-tool-button--badge absolute right-1 top-1 flex min-h-3 min-w-3 items-center justify-center rounded-full bg-destructive px-0.5 text-[length:var(--text-xxs)] font-medium leading-none text-destructive-foreground`,children:i}),(0,O.jsx)(`span`,{className:`sr-only`,children:e})]}));A.displayName=`HeaderToolButton`;function j({label:e,icon:t,open:n,defaultOpen:r,onOpenChange:i,active:a,disabled:o,badge:s,align:c=`end`,side:l=`bottom`,sideOffset:u=8,className:d,triggerClassName:f,contentClassName:p,children:m}){return(0,O.jsxs)(S,{open:n,defaultOpen:r,onOpenChange:i,children:[(0,O.jsx)(x,{asChild:!0,children:(0,O.jsx)(A,{label:e,icon:t,active:a??n,disabled:o,badge:s,className:f})}),(0,O.jsx)(C,{"data-component":`header-tool-popover`,"data-slot":`header-tool-popover-content`,align:c,side:l,sideOffset:u,className:_(`header-tool-popover--component w-80 max-w-[calc(100vw-2rem)] p-0`,d,p),children:m})]})}var M=e({AppHeaderComposition:()=>I,CustomNotificationRenderer:()=>z,HeaderPartials:()=>L,HeaderToolPrimitives:()=>R}),N={name:`Nicolas Vlachos`,email:`nicolas@example.com`,avatar:`https://i.pravatar.cc/96?img=11`},P=[{id:`sync`,title:`Catalog sync completed`,description:`248 products updated across two markets.`,time:`2 min ago`,tone:`success`,href:`#/features/activities`,read:!1},{id:`risk`,title:`Payment risk changed`,description:`Three invoices moved to manual review.`,time:`18 min ago`,tone:`warning`,read:!1}];function F({href:e,children:t,className:n,target:r,rel:i}){return(0,O.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,children:t})}function I(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(h,{className:`min-h-0`,children:(0,O.jsx)(`div`,{className:`w-full overflow-hidden rounded-lg border border-border bg-background p-3`,children:(0,O.jsxs)(`div`,{className:`overflow-hidden rounded-lg border border-border bg-background shadow-sm`,children:[(0,O.jsx)(E,{renderLink:F,breadcrumbs:[{label:`Operations`,href:`#/features/activities`},{label:`Orders`}],centerClassName:`w-[32rem] max-w-[40vw]`,slots:{center:(0,O.jsx)(f,{className:`w-full`,onOpen:()=>{}}),right:(0,O.jsxs)(O.Fragment,{children:[(0,O.jsx)(p,{notifications:P,unreadCount:2,viewAllHref:`#/features/activities`,renderLink:F}),(0,O.jsx)(w,{orientation:`vertical`,className:`h-7`}),(0,O.jsx)(m,{user:N,showEmail:!1,onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})}}),(0,O.jsxs)(`div`,{className:`space-y-5 p-5`,children:[(0,O.jsx)(D,{title:`Pending orders`,description:`The sidebar controls navigation only; the app owns routing and page content.`,headingTag:`h3`,titleBadges:[{label:`8 pending`,variant:`warning`}]}),(0,O.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[[`Manual review`,`8`],[`Awaiting stock`,`12`],[`Ready to fulfill`,`36`]].map(([e,t,n])=>(0,O.jsxs)(b,{padding:`sm`,className:`shadow-sm`,children:[(0,O.jsx)(a,{size:`xs`,type:`secondary`,children:e}),(0,O.jsx)(a,{weight:`semibold`,children:t}),!!n&&(0,O.jsx)(a,{size:`xs`,type:`secondary`,children:n})]},e))})]})]})})})})}function L(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsx)(h,{className:`min-h-0`,children:(0,O.jsxs)(`div`,{className:`grid w-full gap-4 lg:grid-cols-2`,children:[(0,O.jsxs)(b,{padding:`sm`,children:[(0,O.jsx)(a,{weight:`semibold`,className:`mb-3`,children:`Breadcrumbs`}),(0,O.jsx)(`div`,{className:`h-10 rounded-lg border border-border bg-background px-3`,children:(0,O.jsx)(T,{showSidebarTrigger:!0,homeBreadcrumb:{label:`Admin`,href:`#/admin`},renderLink:F,breadcrumbs:[{label:`Customers`,href:`#/customers`},{label:`Sarah Smitha`}]})})]}),(0,O.jsxs)(b,{padding:`sm`,children:[(0,O.jsx)(a,{weight:`semibold`,className:`mb-3`,children:`Search`}),(0,O.jsx)(f,{className:`w-full`,strings:{placeholder:`Search customers, invoices, comments...`}})]}),(0,O.jsxs)(b,{padding:`sm`,children:[(0,O.jsx)(a,{weight:`semibold`,className:`mb-3`,children:`Notifications`}),(0,O.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,O.jsx)(p,{notifications:P,unreadCount:2,renderLink:F}),(0,O.jsx)(o,{variant:`warning`,children:`Unread state`})]})]}),(0,O.jsxs)(b,{padding:`sm`,children:[(0,O.jsx)(a,{weight:`semibold`,className:`mb-3`,children:`Right action cluster`}),(0,O.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,O.jsx)(p,{notifications:P,unreadCount:2,renderLink:F}),(0,O.jsx)(m,{user:N,showEmail:!1,onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})]})]})})})}function R(){return(0,O.jsx)(b,{padding:`sm`,children:(0,O.jsxs)(`div`,{className:`grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center`,children:[(0,O.jsxs)(`div`,{className:`min-w-0`,children:[(0,O.jsx)(a,{weight:`semibold`,children:`Header tools`}),(0,O.jsx)(a,{size:`xs`,type:`secondary`,children:`Icon tools, popovers, and global-search triggers share the same dense header contract.`})]}),(0,O.jsxs)(`div`,{className:`flex min-w-0 flex-wrap items-center gap-2`,children:[(0,O.jsx)(k,{className:`w-64`,strings:{placeholder:`Search workspace`},onOpen:()=>{}}),(0,O.jsx)(A,{label:`Notifications`,icon:l,badge:`3`,onClick:()=>{}}),(0,O.jsx)(j,{label:`Settings`,icon:g,open:!0,children:(0,O.jsxs)(`div`,{className:`grid gap-1 p-3`,children:[(0,O.jsx)(a,{weight:`semibold`,children:`Workspace tools`}),(0,O.jsx)(a,{size:`xs`,type:`secondary`,children:`Consumer-owned content inside package popover chrome.`}),(0,O.jsx)(s,{variant:`secondary`,size:`sm`,children:`Open settings`})]})})]})]})})}function z(){return(0,O.jsx)(O.Fragment,{children:(0,O.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3 rounded-xl border border-border bg-background p-4 shadow-sm`,children:[(0,O.jsx)(p,{notifications:P,unreadCount:2,renderNotification:e=>(0,O.jsxs)(`div`,{className:`flex items-start gap-3 rounded-md px-3 py-2`,children:[e.tone===`success`?(0,O.jsx)(d,{className:`mt-0.5 size-4 text-success`}):(0,O.jsx)(u,{className:`mt-0.5 size-4 text-warning`}),(0,O.jsxs)(`div`,{className:`min-w-0`,children:[(0,O.jsx)(a,{weight:`medium`,children:e.title}),(0,O.jsx)(a,{size:`xs`,type:`secondary`,children:e.description})]})]})}),(0,O.jsx)(s,{variant:`secondary`,icon:l,children:`Open bell`}),(0,O.jsx)(s,{variant:`secondary`,icon:g,children:`Settings`})]})})}var B=`import { Bell, CheckCircle2, CircleAlert, Settings } from 'lucide-react';
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { Separator } from '@/components/base/display/separator';
+import { SmartCard } from '@/components/base/cards';
+import { Text } from '@/components/typography';
+import {
+	Header,
+	HeaderBreadcrumbs,
+	HeaderGlobalSearchTrigger,
+	HeaderNotifications,
+	HeaderSearch,
+	HeaderToolButton,
+	HeaderToolPopover,
+	HeaderUserMenu,
+	type HeaderNotification,
+} from '@/components/layout/header';
+import { PageHeader } from '@/components/layout/page';
+import type { LayoutLinkRenderProps, LayoutUser } from '@/components/layout';
+import { SidebarProvider } from '@/components/layout/sidebar';
+
+const user: LayoutUser = {
+	name: 'Nicolas Vlachos',
+	email: 'nicolas@example.com',
+	avatar: 'https://i.pravatar.cc/96?img=11',
+};
+
+const notifications: HeaderNotification[] = [
+	{
+		id: 'sync',
+		title: 'Catalog sync completed',
+		description: '248 products updated across two markets.',
+		time: '2 min ago',
+		tone: 'success',
+		href: '#/features/activities',
+		read: false,
+	},
+	{
+		id: 'risk',
+		title: 'Payment risk changed',
+		description: 'Three invoices moved to manual review.',
+		time: '18 min ago',
+		tone: 'warning',
+		read: false,
+	},
+];
+
+function renderPreviewLink({ href, children, className, target, rel }: LayoutLinkRenderProps) {
+	return <a href={href ?? '#'} className={className} target={target} rel={rel}>{children}</a>;
+}
+
+export function AppHeaderComposition() {
+	return (
+		<>
+			<SidebarProvider className="min-h-0">
+								<div className="w-full overflow-hidden rounded-lg border border-border bg-background p-3">
+									<div className="overflow-hidden rounded-lg border border-border bg-background shadow-sm">
+										<Header
+											renderLink={renderPreviewLink}
+											breadcrumbs={[{ label: 'Operations', href: '#/features/activities' }, { label: 'Orders' }]}
+											centerClassName="w-[32rem] max-w-[40vw]"
+											slots={{
+												center: <HeaderSearch className="w-full" onOpen={() => {}} />,
+												right: (
+													<>
+														<HeaderNotifications notifications={notifications} unreadCount={2} viewAllHref="#/features/activities" renderLink={renderPreviewLink} />
+														<Separator orientation="vertical" className="h-7" />
+														<HeaderUserMenu
+															user={user}
+															showEmail={false}
+															onProfile={() => {}}
+															onSettings={() => {}}
+															onLogout={() => {}}
+														/>
+													</>
+												),
+											}}
+										/>
+										<div className="space-y-5 p-5">
+											<PageHeader
+												title="Pending orders"
+												description="The sidebar controls navigation only; the app owns routing and page content."
+												headingTag="h3"
+												titleBadges={[{ label: '8 pending', variant: 'warning' }]}
+											/>
+											<div className="grid gap-3 md:grid-cols-3">
+												{[
+													['Manual review', '8'],
+													['Awaiting stock', '12'],
+													['Ready to fulfill', '36'],
+												].map(([label, value, detail]) => (
+													<SmartCard key={label} padding="sm" className="shadow-sm">
+														<Text size="xs" type="secondary">{label}</Text>
+														<Text weight="semibold">{value}</Text>
+														{!!detail && <Text size="xs" type="secondary">{detail}</Text>}
+													</SmartCard>
+												))}
+											</div>
+										</div>
+									</div>
+								</div>
+							</SidebarProvider>
+		</>
+	);
+}
+
+export function HeaderPartials() {
+	return (
+		<>
+			<SidebarProvider className="min-h-0">
+								<div className="grid w-full gap-4 lg:grid-cols-2">
+									<SmartCard padding="sm">
+										<Text weight="semibold" className="mb-3">Breadcrumbs</Text>
+										<div className="h-10 rounded-lg border border-border bg-background px-3">
+											<HeaderBreadcrumbs
+												showSidebarTrigger
+												homeBreadcrumb={{ label: 'Admin', href: '#/admin' }}
+												renderLink={renderPreviewLink}
+												breadcrumbs={[{ label: 'Customers', href: '#/customers' }, { label: 'Sarah Smitha' }]}
+											/>
+										</div>
+									</SmartCard>
+
+									<SmartCard padding="sm">
+										<Text weight="semibold" className="mb-3">Search</Text>
+										<HeaderSearch className="w-full" strings={{ placeholder: 'Search customers, invoices, comments...' }} />
+									</SmartCard>
+
+									<SmartCard padding="sm">
+										<Text weight="semibold" className="mb-3">Notifications</Text>
+										<div className="flex items-center gap-3">
+											<HeaderNotifications notifications={notifications} unreadCount={2} renderLink={renderPreviewLink} />
+											<Badge variant="warning">Unread state</Badge>
+										</div>
+									</SmartCard>
+
+									<SmartCard padding="sm">
+										<Text weight="semibold" className="mb-3">Right action cluster</Text>
+										<div className="flex items-center gap-2">
+											<HeaderNotifications notifications={notifications} unreadCount={2} renderLink={renderPreviewLink} />
+											<HeaderUserMenu user={user} showEmail={false} onProfile={() => {}} onSettings={() => {}} onLogout={() => {}} />
+										</div>
+									</SmartCard>
+								</div>
+							</SidebarProvider>
+		</>
+	);
+}
+
+export function HeaderToolPrimitives() {
+	return (
+		<SmartCard padding="sm">
+			<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>
+					<Text size="xs" type="secondary">
+						Icon tools, popovers, and global-search triggers share the same dense header contract.
+					</Text>
+				</div>
+				<div className="flex min-w-0 flex-wrap items-center gap-2">
+					<HeaderGlobalSearchTrigger
+						className="w-64"
+						strings={{ placeholder: 'Search workspace' }}
+						onOpen={() => {}}
+					/>
+					<HeaderToolButton label="Notifications" icon={Bell} badge="3" onClick={() => {}} />
+					<HeaderToolPopover label="Settings" icon={Settings} open>
+						<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>
+						</div>
+					</HeaderToolPopover>
+				</div>
+			</div>
+		</SmartCard>
+	);
+}
+
+export function CustomNotificationRenderer() {
+	return (
+		<>
+			<div className="flex flex-wrap items-center gap-3 rounded-xl border border-border bg-background p-4 shadow-sm">
+								<HeaderNotifications
+									notifications={notifications}
+									unreadCount={2}
+									renderNotification={(item) => (
+										<div className="flex items-start gap-3 rounded-md px-3 py-2">
+											{item.tone === 'success' ? <CheckCircle2 className="mt-0.5 size-4 text-success" /> : <CircleAlert className="mt-0.5 size-4 text-warning" />}
+											<div className="min-w-0">
+												<Text weight="medium">{item.title}</Text>
+												<Text size="xs" type="secondary">{item.description}</Text>
+											</div>
+										</div>
+									)}
+								/>
+								<Button variant="secondary" icon={Bell}>Open bell</Button>
+								<Button variant="secondary" icon={Settings}>Settings</Button>
+							</div>
+		</>
+	);
+}
+`;function V(e){return M||U(`Examples`,!1),I||U(`Examples.AppHeaderComposition`,!0),z||U(`Examples.CustomNotificationRenderer`,!0),L||U(`Examples.HeaderPartials`,!0),R||U(`Examples.HeaderToolPrimitives`,!0),(0,O.jsxs)(r,{title:`Layout · Header`,description:`Topbar, breadcrumbs, command search, notifications, and action slots in a realistic app-shell canvas.`,layer:`layout`,status:`ready`,children:[(0,O.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,O.jsx)(c,{name:`AppHeaderComposition`,source:B,children:(0,O.jsx)(I,{})}),(0,O.jsx)(c,{name:`HeaderPartials`,source:B,children:(0,O.jsx)(L,{})}),(0,O.jsx)(c,{name:`HeaderToolPrimitives`,source:B,children:(0,O.jsx)(R,{})}),(0,O.jsx)(c,{name:`CustomNotificationRenderer`,source:B,children:(0,O.jsx)(z,{})})]}),(0,O.jsxs)(i,{title:`API`,id:`api`,children:[(0,O.jsx)(y,{component:`HeaderToolButton`}),(0,O.jsx)(y,{component:`HeaderToolPopover`}),(0,O.jsx)(y,{component:`HeaderGlobalSearchTrigger`}),(0,O.jsx)(y,{component:`HeaderUserMenu`})]})]})}function H(e={}){let{wrapper:t}=e.components||{};return t?(0,O.jsx)(t,{...e,children:(0,O.jsx)(V,{...e})}):V(e)}function U(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{H as default};

package/dist/showcase/assets/layout-page-DHOPox5Z.js

@@ -0,0 +1,278 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,Lr as a,Rr as o,jr as s,r as c,t as l}from"./example-CbMg22fx.js";import{t as u}from"./bell-YYeVQNAQ.js";import{t as d}from"./ellipsis-D0y6rUzm.js";import{t as f}from"./plus-PKSdX45c.js";import{t as p}from"./refresh-cw-DlkWEAjG.js";import{t as m}from"./shield-D084AWSl.js";import{t as h}from"./trash-2-xwHdvAn6.js";import{t as g}from"./user-BCzeUL5p.js";import{k as _,n as v,s as y}from"./index-DNH0y0r-.js";import{t as b}from"./page-action-button-8faHdFOD.js";import{t as x}from"./props-table-DSdjPLVr.js";import{t as S}from"./icon-badge-IP9B3lQm.js";import{t as C}from"./smart-card-DpvRHqI9.js";import{a as w,s as T}from"./dropdown-menu-CrcweCup.js";import{o as ee,r as te,t as ne}from"./avatar-Dk78XyHT.js";import{t as re}from"./separator-kwh2KDqD.js";import{t as E}from"./skeleton-uyUucxJA.js";import{t as ie}from"./metadata-list-Bcy5s1_q.js";import{t as D}from"./action-menu-BkBav9jX.js";import{t as ae}from"./overflow-tab-bar-UXs-T5Fq.js";import{n as oe,t as se}from"./use-layout-link-DR4Apqbc.js";import{t as ce}from"./content-container-Cc8Vv5Wp.js";import{t as O}from"./page-header-DoZnb9z9.js";var k=y();function le({header:e,width:t=`narrow`,children:n,className:r,bodyClassName:i,renderLink:a,LinkComponent:o}){return(0,k.jsxs)(ce,{width:t,className:r,children:[!!e&&(0,k.jsx)(O,{...e,renderLink:e.renderLink??a,LinkComponent:e.LinkComponent??o}),!!n&&(0,k.jsx)(`div`,{className:v(`relative block w-full`,i),children:n})]})}var ue={sm:`max-w-screen-sm`,md:`max-w-screen-md`,lg:`max-w-screen-lg`,xl:`max-w-screen-xl`,"2xl":`max-w-screen-2xl`,full:`max-w-full`};function de({noPadding:e=!1,maxWidth:t,className:n,children:r,...i}){return(0,k.jsx)(`main`,{className:v(`flex-1`,!e&&`p-4 md:p-6`,t&&v(`mx-auto w-full`,ue[t]),n),...i,children:r})}var fe={menuLabel:`Page actions`},A=t(n(),1),pe=e=>e===`destructive`?`error`:e===`primary`||e===`success`||e===`warning`?`primary`:`secondary`,me=`max-h-[80vh] overflow-y-auto overscroll-contain`,he=4;function ge(e,t,n){if(e.visible===!1)return null;if(e.element)return(0,k.jsx)(`div`,{children:e.element},e.id??t.index);if(n)return n(e,t);let r=e.id??t.index,i=!!e.disabled||!!e.loading,a=e.icon,o=(0,k.jsxs)(b,{variant:pe(e.variant),onClick:e.onClick,disabled:i,children:[!!a&&(0,k.jsx)(a,{className:`size-3.5`,"aria-hidden":`true`}),e.label]},r);return e.href&&!e.onClick?t.renderLink({href:e.href,children:o,className:`inline-flex`,target:e.target,rel:e.rel,external:e.external,disabled:i}):o}function j(e,t,n){let r=[],i=null;return e.forEach(({action:e,index:a})=>{let s={...t,index:a,isInline:!1},c=e.group??null,l=c!==i;if(r.length>0&&l&&r.push((0,k.jsx)(re,{className:`my-1`},`sep-${i??`root`}-${c??`root`}-${e.id??a}`)),l&&(i=c,c&&r.push((0,k.jsx)(`div`,{className:`px-2 pt-1`,children:(0,k.jsx)(o,{size:`xxs`,weight:`semibold`,type:`secondary`,className:`uppercase tracking-wider`,children:c})},`group-${c}-${e.id??a}`))),e.element){r.push((0,k.jsx)(`div`,{children:e.element},e.id??a));return}if(n){r.push((0,k.jsx)(`div`,{children:n(e,s)},e.id??a));return}let u=e.icon,d=!!e.disabled||!!e.loading,f=(0,k.jsxs)(k.Fragment,{children:[!!u&&(0,k.jsx)(u,{className:`size-3.5`,"aria-hidden":`true`}),typeof e.label==`string`?(0,k.jsx)(o,{tag:`span`,size:`xs`,className:`text-inherit`,children:e.label}):e.label]}),p=v(`gap-1.5 px-2 py-1.5 text-xs`,e.variant===`destructive`&&`text-destructive focus-visible:text-destructive`);if(e.href&&!e.onClick&&!d){r.push((0,k.jsx)(T,{href:e.href,className:p,render:t=>s.renderLink({...t,href:e.href,children:t.children,target:e.target,rel:e.rel,external:e.external}),children:f},e.id??a));return}r.push((0,k.jsx)(w,{disabled:d,onClick:e.onClick,className:p,children:f},e.id??a))}),r}function M({actions:e,display:t=`dropdown`,breakpoint:n=1040,maxInlineActions:r=he,renderLink:i,LinkComponent:a,strings:o,className:s,inlineClassName:c,menuClassName:l,renderAction:u}){let f=_(fe,o),p=se({renderLink:i,LinkComponent:a}),m=(0,A.useMemo)(()=>(e??[]).map((e,t)=>({action:e,index:t})).filter(({action:e})=>e.visible!==!1),[e]),[h,g]=(0,A.useState)(!1);if((0,A.useEffect)(()=>{if(t!==`auto`||typeof window>`u`)return;let e=()=>g(window.innerWidth<=n);return e(),window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[t,n]),m.length===0)return null;let y={renderLink:p},b=v(`flex items-center gap-2`,c,s),x=v(me,l);if(t===`dropdown`||t===`auto`&&h)return(0,k.jsx)(D,{icon:d,srText:f.menuLabel,align:`end`,closeOnSelect:!0,contentClassName:x,children:j(m,y,u)});let S=Math.max(0,r),C=m.filter(({action:e})=>(e.placement??`auto`)!==`menu`),w=C.slice(0,S),T=[...C.slice(S),...m.filter(({action:e})=>(e.placement??`auto`)===`menu`)];return(0,k.jsxs)(`div`,{className:b,children:[w.map(e=>(0,k.jsx)(A.Fragment,{children:ge(e.action,{...y,index:e.index,isInline:!0},u)},e.action.id??e.index)),T.length>0&&(0,k.jsx)(D,{icon:d,srText:f.menuLabel,align:`end`,closeOnSelect:!0,contentClassName:x,children:j(T,y,u)})]})}function _e(e){return e.split(/\s+/).filter(Boolean).slice(0,2).map(e=>e[0]?.toUpperCase()).join(``)}function N({title:e,description:t,eyebrow:n,media:r,avatarUrl:i,avatarAlt:s,avatarFallback:c,icon:l,iconTone:u=`muted`,badges:d,metadata:f,actions:p,className:m,contentClassName:h,mediaClassName:g}){let _=l,y=typeof e==`string`?e:``,b=r??(i||c?(0,k.jsxs)(ne,{size:`lg`,className:v(`resource-header--avatar size-11`,g),children:[!!i&&(0,k.jsx)(ee,{src:i,alt:s??y}),(0,k.jsx)(te,{children:c??_e(y)})]}):_?(0,k.jsx)(S,{icon:_,size:`lg`,shape:`square`,tone:u,className:v(`resource-header--icon`,g)}):null);return(0,k.jsxs)(`header`,{"data-component":`resource-header`,"data-slot":`resource-header`,className:v(`resource-header--component flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between`,m),children:[(0,k.jsxs)(`div`,{"data-slot":`resource-header-main`,className:`resource-header--main flex min-w-0 flex-1 items-start gap-3`,children:[b,(0,k.jsxs)(`div`,{"data-slot":`resource-header-content`,className:v(`resource-header--content min-w-0 flex-1`,h),children:[!!n&&(0,k.jsx)(o,{size:`xxs`,type:`secondary`,weight:`medium`,className:`resource-header--eyebrow mb-1 uppercase tracking-normal`,children:n}),(0,k.jsxs)(`div`,{"data-slot":`resource-header-title-row`,className:`resource-header--title-row flex min-w-0 flex-wrap items-center gap-2`,children:[(0,k.jsx)(a,{tag:`h2`,className:`resource-header--title truncate border-0 pb-0`,children:e}),!!d&&(0,k.jsx)(`div`,{"data-slot":`resource-header-badges`,className:`resource-header--badges flex shrink-0 flex-wrap items-center gap-1.5`,children:d})]}),!!t&&(0,k.jsx)(o,{type:`secondary`,className:`resource-header--description mt-1 max-w-3xl`,children:t}),!!f&&(0,k.jsx)(`div`,{"data-slot":`resource-header-metadata`,className:`resource-header--metadata mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground`,children:f})]})]}),!!p&&(0,k.jsx)(`div`,{"data-slot":`resource-header-actions`,className:`resource-header--actions flex shrink-0 flex-wrap items-center gap-2`,children:p})]})}function ve({children:e,leading:t,trailing:n,sticky:r=!1,className:i}){return(0,k.jsxs)(`div`,{"data-component":`resource-action-bar`,"data-slot":`resource-action-bar`,className:v(`resource-action-bar--component flex min-w-0 flex-col gap-3 rounded-lg border border-border/70 bg-card px-3 py-2.5 shadow-sm sm:flex-row sm:items-center sm:justify-between`,r&&`sticky top-[calc(var(--topbar-height)_+_0.5rem)] z-30`,i),children:[(0,k.jsx)(`div`,{"data-slot":`resource-action-leading`,className:`resource-action-bar--leading flex min-w-0 flex-1 flex-wrap items-center gap-2`,children:t??e}),!!n&&(0,k.jsx)(`div`,{"data-slot":`resource-action-trailing`,className:`resource-action-bar--trailing flex shrink-0 flex-wrap items-center gap-2`,children:n})]})}function P({children:e,title:t,description:n,actions:r,toolbar:i,empty:a,isEmpty:o=!1,isLoading:s=!1,error:c,slots:l,className:u,headerClassName:d,contentClassName:f,asideClassName:p,variant:m}){let h=l?.header??(t?(0,k.jsx)(N,{title:t,description:n,actions:r,className:d}):null),g=l?.toolbar??i,_=s?l?.loading??(0,k.jsxs)(`div`,{className:`resource-shell--loading grid gap-3`,children:[(0,k.jsx)(E,{className:`h-10 w-full`}),(0,k.jsx)(E,{className:`h-28 w-full`})]}):c?l?.error??c:o?a:e;return(0,k.jsxs)(`section`,{"data-component":`resource-${m}-shell`,"data-slot":`resource-${m}-shell`,className:v(`resource-${m}-shell--component grid min-w-0 gap-4`,l?.aside&&`lg:grid-cols-[minmax(0,1fr)_var(--resource-aside-width,20rem)]`,u),children:[(0,k.jsxs)(`div`,{className:`min-w-0 space-y-4`,children:[!!h&&(0,k.jsx)(`div`,{"data-slot":`resource-${m}-header`,className:`resource-${m}-shell--header`,children:h}),!!g&&(0,k.jsx)(`div`,{"data-slot":`resource-${m}-toolbar`,className:`resource-${m}-shell--toolbar`,children:g}),(0,k.jsx)(`div`,{"data-slot":`resource-${m}-content`,className:v(`resource-${m}-shell--content min-w-0`,f),children:_}),!!l?.footer&&(0,k.jsx)(`div`,{"data-slot":`resource-${m}-footer`,className:`resource-${m}-shell--footer`,children:l.footer})]}),!!l?.aside&&(0,k.jsx)(`aside`,{"data-slot":`resource-${m}-aside`,className:v(`resource-${m}-shell--aside min-w-0`,p),children:l.aside})]})}function ye(e){return(0,k.jsx)(P,{...e,variant:`index`})}function F(e){return(0,k.jsx)(P,{...e,variant:`show`})}function be({tabs:e,activeTab:t,onTabChange:n,tabsClassName:r,moreLabel:i,tabsAriaLabel:a,toolbar:o,slots:s,...c}){let l=(0,k.jsxs)(`div`,{"data-slot":`tabbed-resource-toolbar`,className:`tabbed-resource-shell--toolbar grid gap-3`,children:[(0,k.jsx)(ae,{items:e,value:t,onChange:n,className:r,moreLabel:i,ariaLabel:a}),o]});return(0,k.jsx)(F,{...c,toolbar:l,slots:{...s,toolbar:s?.toolbar??l}})}function I({title:e,description:t,actions:n,headerAction:r,children:i,footer:a,padding:o=`sm`,surface:s=`card`,className:c,contentClassName:l,name:u}){return(0,k.jsx)(C,{"data-component":u,"data-slot":u,title:e,description:t,actions:n,headerAction:r,footerSlot:a,padding:o,surface:s,className:v(`${u}--component`,c),contentClassName:l,children:i})}function xe(e){return(0,k.jsx)(I,{...e,name:`resource-details-card`})}function L({metadata:e,metadataColumns:t=2,metadataDense:n=!1,body:r,help:i,children:a,contentClassName:s,...c}){return(0,k.jsxs)(I,{...c,name:`resource-details-section`,contentClassName:v(`resource-details-section--content grid gap-4`,s),children:[!!e?.length&&(0,k.jsx)(ie,{items:e,columns:t,dense:n}),r,a,!!i&&(0,k.jsx)(o,{size:`xs`,type:`secondary`,className:`resource-details-section--help`,children:i})]})}function R(e){return(0,k.jsx)(I,{...e,name:`resource-related-card`})}function z(e){return(0,k.jsx)(I,{...e,name:`resource-activity-card`})}var Se={navigationAriaLabel:`Settings navigation`};function B(e){if(!e)return``;try{let t=typeof window<`u`?window.location.origin:`http://localhost`,n=new URL(e,t).pathname.replace(/\/+$/,``);return n.length>0?n:`/`}catch{let t=(e.split(`?`)[0]??e).replace(/\/+$/,``);return t.length>0?t:`/`}}function Ce(e,t,n){if(t)return e.id===t;if(!n||!e.href)return!1;let r=B(n),i=B(e.href);return r===i||r.startsWith(`${i}/`)}function V({title:e,description:t,groups:n,currentId:r,currentPath:i,children:c,aside:l,actions:u,footer:d,className:f,navClassName:p,contentClassName:m,renderLink:h,LinkComponent:g,strings:y}){let b=_(Se,y),x=oe({renderLink:h,LinkComponent:g});return(0,k.jsxs)(`section`,{"data-component":`aside-nav-shell`,"data-slot":`aside-nav-shell`,className:v(`aside-nav-shell--component grid min-w-0 gap-5 lg:grid-cols-[17rem_minmax(0,1fr)]`,f),children:[(0,k.jsx)(`aside`,{"data-slot":`aside-nav-shell-aside`,className:`aside-nav-shell--aside min-w-0`,children:(0,k.jsxs)(C,{padding:`sm`,surface:`card`,className:v(`aside-nav-shell--nav-card sticky top-[calc(var(--topbar-height)_+_1rem)]`,p),contentClassName:`grid gap-4`,children:[!!l&&(0,k.jsx)(`div`,{className:`aside-nav-shell--aside-header`,children:l}),(0,k.jsx)(`nav`,{"aria-label":b.navigationAriaLabel,className:`grid gap-4`,children:n.map(e=>(0,k.jsxs)(`div`,{className:`grid gap-1.5`,children:[!!e.label&&(0,k.jsx)(o,{size:`xxs`,type:`secondary`,weight:`medium`,className:`px-2 uppercase tracking-normal`,children:e.label}),(0,k.jsx)(`div`,{className:`grid gap-0.5`,children:e.items.map(e=>{let t=e.icon,n=Ce(e,r,i),a=(0,k.jsxs)(`span`,{className:`flex min-w-0 items-center gap-2`,children:[!!t&&(0,k.jsx)(t,{className:v(`size-4 shrink-0`,n?`text-primary`:`text-muted-foreground`)}),(0,k.jsxs)(`span`,{className:`grid min-w-0 flex-1 gap-0.5`,children:[(0,k.jsx)(o,{tag:`span`,weight:n?`semibold`:`medium`,className:`truncate`,children:e.label}),!!e.description&&(0,k.jsx)(o,{tag:`span`,size:`xs`,type:`secondary`,className:`truncate`,children:e.description})]}),!!e.badge&&(0,k.jsx)(s,{variant:n?`primary`:`secondary`,className:`shrink-0`,children:e.badge})]});return(0,k.jsx)(`div`,{onClick:()=>e.onSelect?.(e.id),children:x({href:e.href,children:a,active:n,disabled:e.disabled,external:e.external,className:v(`aside-nav-shell--item flex min-w-0 rounded-md px-2 py-2 text-sm transition-colors`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`,n?`bg-primary/8 text-foreground`:`text-muted-foreground hover:bg-muted/60 hover:text-foreground`,e.disabled&&`pointer-events-none opacity-50`),"aria-label":typeof e.label==`string`?e.label:void 0})},e.id)})})]},e.id))})]})}),(0,k.jsxs)(`div`,{"data-slot":`aside-nav-shell-main`,className:v(`aside-nav-shell--main min-w-0 space-y-4`,m),children:[(e||t||u)&&(0,k.jsxs)(`header`,{className:`aside-nav-shell--header flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between`,children:[(0,k.jsxs)(`div`,{className:`min-w-0`,children:[!!e&&(0,k.jsx)(a,{tag:`h2`,className:`border-0 pb-0`,children:e}),!!t&&(0,k.jsx)(o,{type:`secondary`,className:`mt-1 max-w-3xl`,children:t})]}),!!u&&(0,k.jsx)(`div`,{className:`flex shrink-0 flex-wrap items-center gap-2`,children:u})]}),(0,k.jsx)(`div`,{"data-slot":`aside-nav-shell-content`,className:`aside-nav-shell--content min-w-0`,children:c}),!!d&&(0,k.jsx)(`footer`,{className:`aside-nav-shell--footer`,children:d})]})]})}var we=V;V.displayName=`AsideNavShell`;var Te=e({ComposablePartials:()=>q,ProductionPageShell:()=>K,ResourceShells:()=>J,SettingsShellExample:()=>X,TabbedResourceDetails:()=>Y}),H=[{id:`new`,label:`New customer`,icon:f,variant:`primary`,href:`#/customers/new`,placement:`inline`},{id:`sync`,label:`Sync records`,icon:p,group:`Data`,placement:`menu`},{id:`delete`,label:`Delete saved view`,icon:h,variant:`destructive`,group:`Danger`,placement:`menu`}],U=[{label:`Open invoices`,value:`24`,detail:`8 need manual review`},{label:`Active customers`,value:`1,284`,detail:`+4.8% this month`},{label:`Draft contracts`,value:`16`,detail:`3 waiting on finance`}];function W({href:e,children:t,className:n,target:r,rel:i}){return(0,k.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,children:t})}function Ee({children:e,height:t=560}){return(0,k.jsx)(`div`,{className:`layout-demo-viewport relative w-full overflow-hidden rounded-md border border-dashed border-border bg-background`,style:{height:t},children:e})}function G(){return(0,k.jsxs)(`div`,{className:`space-y-4`,children:[(0,k.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:U.map(e=>(0,k.jsx)(C,{padding:`sm`,className:`border-border/80 shadow-sm`,children:(0,k.jsxs)(`div`,{className:`space-y-1`,children:[(0,k.jsx)(o,{size:`xs`,type:`secondary`,children:e.label}),(0,k.jsx)(o,{weight:`semibold`,children:e.value}),(0,k.jsx)(o,{size:`xs`,type:`secondary`,children:e.detail})]})},e.label))}),(0,k.jsx)(C,{padding:`sm`,className:`border-border/80 shadow-sm`,children:(0,k.jsxs)(`div`,{className:`flex flex-col gap-4 md:flex-row md:items-center md:justify-between`,children:[(0,k.jsxs)(`div`,{className:`space-y-1`,children:[(0,k.jsx)(o,{weight:`semibold`,children:`Review queue`}),(0,k.jsx)(o,{size:`xs`,type:`secondary`,children:`A compact body area that stays owned by the consuming app.`})]}),(0,k.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,k.jsx)(s,{variant:`warning`,children:`8 urgent`}),(0,k.jsx)(s,{variant:`info`,children:`12 assigned`}),(0,k.jsx)(c,{variant:`secondary`,children:`Open queue`})]})]})})]})}function K(){return(0,k.jsx)(Ee,{children:(0,k.jsx)(le,{width:`full`,renderLink:W,bodyClassName:`space-y-4`,header:{title:`Customers`,description:`Manage accounts, contacts, lifecycle state, and billing risk from one focused workspace.`,headingTag:`h2`,backHref:`#/base/navigation`,titleBadges:[{label:`Live`,variant:`success`}],actions:(0,k.jsx)(M,{actions:H,display:`auto`,renderLink:W}),actionsClassName:`pt-1`},children:(0,k.jsx)(G,{})})})}function q(){return(0,k.jsxs)(`div`,{className:`grid gap-4 lg:grid-cols-[1.3fr_0.7fr]`,children:[(0,k.jsx)(`div`,{className:`rounded-md border border-border bg-background p-5`,children:(0,k.jsx)(O,{title:`Invoice review`,description:`Use PageHeader directly when an app already owns the surrounding shell.`,headingTag:`h4`,titleBadges:[{label:`42 queued`,variant:`info`},{label:`3 overdue`,variant:`warning`}],actions:(0,k.jsx)(M,{actions:H,display:`flat`,renderLink:W}),renderLink:W})}),(0,k.jsx)(de,{maxWidth:`full`,className:`rounded-md border border-border bg-background p-5`,children:(0,k.jsxs)(`div`,{className:`space-y-2`,children:[(0,k.jsx)(o,{weight:`semibold`,children:`Standalone main region`}),(0,k.jsx)(o,{size:`xs`,type:`secondary`,children:`PageContent supplies body padding and width clamps when Header and Sidebar are composed manually.`}),(0,k.jsx)(c,{variant:`secondary`,children:`Open content`})]})})]})}function J(){return(0,k.jsxs)(`div`,{className:`grid gap-4`,children:[(0,k.jsx)(ye,{title:`Bookings`,description:`Index shells keep header, toolbar, list content, and empty state rhythm consistent.`,actions:(0,k.jsx)(c,{variant:`primary`,icon:f,children:`New booking`}),toolbar:(0,k.jsx)(ve,{leading:(0,k.jsxs)(k.Fragment,{children:[(0,k.jsx)(s,{variant:`info`,children:`24 active`}),(0,k.jsx)(s,{variant:`warning`,children:`8 review`})]}),trailing:(0,k.jsx)(c,{variant:`secondary`,children:`Export`})}),children:(0,k.jsx)(`div`,{className:`grid gap-2`,children:U.map(e=>(0,k.jsx)(C,{padding:`sm`,className:`shadow-sm`,children:(0,k.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,k.jsxs)(`div`,{children:[(0,k.jsx)(o,{weight:`medium`,children:e.label}),(0,k.jsx)(o,{size:`xs`,type:`secondary`,children:e.detail})]}),(0,k.jsx)(o,{weight:`semibold`,children:e.value})]})},e.label))})}),(0,k.jsx)(F,{slots:{header:(0,k.jsx)(N,{title:`Sarah Smitha`,eyebrow:`Customer`,description:`Gold-tier account with active bookings and billing history.`,badges:(0,k.jsx)(s,{variant:`success`,children:`Active`}),actions:(0,k.jsx)(c,{variant:`secondary`,children:`Edit profile`})}),aside:(0,k.jsx)(R,{title:`Related records`,children:(0,k.jsxs)(`div`,{className:`grid gap-2`,children:[(0,k.jsx)(o,{size:`xs`,type:`secondary`,children:`4 bookings`}),(0,k.jsx)(o,{size:`xs`,type:`secondary`,children:`2 invoices`})]})})},children:(0,k.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-2`,children:[(0,k.jsx)(xe,{title:`Account details`,children:(0,k.jsx)(o,{size:`xs`,type:`secondary`,children:`Primary email, billing status, and customer metadata.`})}),(0,k.jsx)(z,{title:`Recent activity`,children:(0,k.jsx)(o,{size:`xs`,type:`secondary`,children:`Last booking updated 12 minutes ago.`})})]})})]})}function Y(){return(0,k.jsx)(be,{title:`Sarah Smitha`,description:`Gold-tier account with active bookings and billing history.`,activeTab:`profile`,tabs:[{id:`profile`,label:`Profile`,icon:g},{id:`security`,label:`Security`,icon:m},{id:`notifications`,label:`Notifications`,icon:u,badge:`3`}],actions:(0,k.jsx)(c,{variant:`secondary`,children:`Edit profile`}),slots:{aside:(0,k.jsx)(R,{title:`Related records`,children:(0,k.jsxs)(`div`,{className:`grid gap-2`,children:[(0,k.jsx)(o,{size:`xs`,type:`secondary`,children:`4 bookings`}),(0,k.jsx)(o,{size:`xs`,type:`secondary`,children:`2 invoices`})]})})},children:(0,k.jsxs)(`div`,{className:`grid gap-3 md:grid-cols-2`,children:[(0,k.jsx)(L,{title:`Account details`,metadata:[{label:`Email`,value:`sarah@example.com`},{label:`Segment`,value:`Gold`},{label:`Created`,value:`May 14, 2026`},{label:`Owner`,value:`Emma Garcia`}],help:`Consumers own field visibility, permissions, and edit workflows.`}),(0,k.jsx)(z,{title:`Recent activity`,children:(0,k.jsx)(o,{size:`xs`,type:`secondary`,children:`Last booking updated 12 minutes ago.`})})]})})}function X(){return(0,k.jsx)(we,{title:`Workspace settings`,description:`Aside navigation shell with router-neutral links.`,currentId:`profile`,renderLink:W,groups:[{id:`workspace`,label:`Workspace`,items:[{id:`profile`,label:`Profile`,href:`#/settings/profile`,icon:g,description:`Name, logo, and contact details`},{id:`security`,label:`Security`,href:`#/settings/security`,icon:m,description:`Sessions and policies`},{id:`notifications`,label:`Notifications`,href:`#/settings/notifications`,icon:u,badge:3}]}],children:(0,k.jsx)(L,{title:`Profile`,metadata:[{label:`Workspace`,value:`Gift Come True`},{label:`Plan`,value:`Pro`}],children:(0,k.jsx)(o,{size:`xs`,type:`secondary`,children:`The app supplies forms, validation, permissions, and navigation.`})})})}var Z=`import type { ReactNode } from 'react';
+import { Bell, Plus, RefreshCw, Shield, Trash2, User } from 'lucide-react';
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { SmartCard } from '@/components/base/cards';
+import { Text } from '@/components/typography';
+import { Page, PageActions, PageContent, PageHeader, type PageAction } from '@/components/layout/page';
+import {
+	ResourceActionBar,
+	ResourceActivityCard,
+	ResourceDetailsCard,
+	ResourceDetailsSection,
+	ResourceHeader,
+	ResourceIndexShell,
+	ResourceRelatedCard,
+	ResourceShowShell,
+	TabbedResourceShell,
+} from '@/components/layout/resource';
+import { SettingsShell } from '@/components/layout/settings';
+import type { LayoutLinkRenderProps } from '@/components/layout';
+
+const actions: PageAction[] = [
+	{ id: 'new', label: 'New customer', icon: Plus, variant: 'primary', href: '#/customers/new', placement: 'inline' },
+	{ id: 'sync', label: 'Sync records', icon: RefreshCw, group: 'Data', placement: 'menu' },
+	{ id: 'delete', label: 'Delete saved view', icon: Trash2, variant: 'destructive', group: 'Danger', placement: 'menu' },
+];
+
+const queue = [
+	{ label: 'Open invoices', value: '24', detail: '8 need manual review' },
+	{ label: 'Active customers', value: '1,284', detail: '+4.8% this month' },
+	{ label: 'Draft contracts', value: '16', detail: '3 waiting on finance' },
+];
+
+function renderPreviewLink({ href, children, className, target, rel }: LayoutLinkRenderProps) {
+	return <a href={href ?? '#'} className={className} target={target} rel={rel}>{children}</a>;
+}
+
+/**
+ * Layout shells (\`<Page>\`, \`<Sidebar>\`, \`<Header>\`) expect to live inside a
+ * full-height app frame. The docs preview pane is unbounded vertically, so we
+ * give them a fixed-height demo viewport so their internal \`flex-1\` / \`h-full\`
+ * resolve sensibly and the demo reads as intended.
+ */
+function DemoViewport({ children, height = 560 }: { children: ReactNode; height?: number }) {
+	return (
+		<div
+			className="layout-demo-viewport relative w-full overflow-hidden rounded-md border border-dashed border-border bg-background"
+			style={{ height }}
+		>
+			{children}
+		</div>
+	);
+}
+
+function CustomerOverview() {
+	return (
+		<div className="space-y-4">
+			<div className="grid gap-3 md:grid-cols-3">
+				{queue.map((item) => (
+					<SmartCard key={item.label} padding="sm" className="border-border/80 shadow-sm">
+						<div className="space-y-1">
+							<Text size="xs" type="secondary">{item.label}</Text>
+							<Text weight="semibold">{item.value}</Text>
+							<Text size="xs" type="secondary">{item.detail}</Text>
+						</div>
+					</SmartCard>
+				))}
+			</div>
+
+			<SmartCard padding="sm" className="border-border/80 shadow-sm">
+				<div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+					<div className="space-y-1">
+						<Text weight="semibold">Review queue</Text>
+						<Text size="xs" type="secondary">A compact body area that stays owned by the consuming app.</Text>
+					</div>
+					<div className="flex flex-wrap items-center gap-2">
+						<Badge variant="warning">8 urgent</Badge>
+						<Badge variant="info">12 assigned</Badge>
+						<Button variant="secondary">Open queue</Button>
+					</div>
+				</div>
+			</SmartCard>
+		</div>
+	);
+}
+
+export function ProductionPageShell() {
+	return (
+		<DemoViewport>
+			<Page
+				width="full"
+				renderLink={renderPreviewLink}
+				bodyClassName="space-y-4"
+				header={{
+					title: 'Customers',
+					description: 'Manage accounts, contacts, lifecycle state, and billing risk from one focused workspace.',
+					headingTag: 'h2',
+					backHref: '#/base/navigation',
+					titleBadges: [{ label: 'Live', variant: 'success' }],
+					actions: <PageActions actions={actions} display="auto" renderLink={renderPreviewLink} />,
+					actionsClassName: 'pt-1',
+				}}
+			>
+				<CustomerOverview />
+			</Page>
+		</DemoViewport>
+	);
+}
+
+export function ComposablePartials() {
+	return (
+		<div className="grid gap-4 lg:grid-cols-[1.3fr_0.7fr]">
+			<div className="rounded-md border border-border bg-background p-5">
+				<PageHeader
+					title="Invoice review"
+					description="Use PageHeader directly when an app already owns the surrounding shell."
+					headingTag="h4"
+					titleBadges={[{ label: '42 queued', variant: 'info' }, { label: '3 overdue', variant: 'warning' }]}
+					actions={<PageActions actions={actions} display="flat" renderLink={renderPreviewLink} />}
+					renderLink={renderPreviewLink}
+				/>
+			</div>
+
+			<PageContent maxWidth="full" className="rounded-md border border-border bg-background p-5">
+				<div className="space-y-2">
+					<Text weight="semibold">Standalone main region</Text>
+					<Text size="xs" type="secondary">PageContent supplies body padding and width clamps when Header and Sidebar are composed manually.</Text>
+					<Button variant="secondary">Open content</Button>
+				</div>
+			</PageContent>
+		</div>
+	);
+}
+
+export function ResourceShells() {
+	return (
+		<div className="grid gap-4">
+			<ResourceIndexShell
+				title="Bookings"
+				description="Index shells keep header, toolbar, list content, and empty state rhythm consistent."
+				actions={<Button variant="primary" icon={Plus}>New booking</Button>}
+				toolbar={
+					<ResourceActionBar
+						leading={
+							<>
+								<Badge variant="info">24 active</Badge>
+								<Badge variant="warning">8 review</Badge>
+							</>
+						}
+						trailing={<Button variant="secondary">Export</Button>}
+					/>
+				}
+			>
+				<div className="grid gap-2">
+					{queue.map((item) => (
+						<SmartCard key={item.label} padding="sm" className="shadow-sm">
+							<div className="flex items-center justify-between gap-3">
+								<div>
+									<Text weight="medium">{item.label}</Text>
+									<Text size="xs" type="secondary">{item.detail}</Text>
+								</div>
+								<Text weight="semibold">{item.value}</Text>
+							</div>
+						</SmartCard>
+					))}
+				</div>
+			</ResourceIndexShell>
+
+			<ResourceShowShell
+				slots={{
+					header: (
+						<ResourceHeader
+							title="Sarah Smitha"
+							eyebrow="Customer"
+							description="Gold-tier account with active bookings and billing history."
+							badges={<Badge variant="success">Active</Badge>}
+							actions={<Button variant="secondary">Edit profile</Button>}
+						/>
+					),
+					aside: (
+						<ResourceRelatedCard title="Related records">
+							<div className="grid gap-2">
+								<Text size="xs" type="secondary">4 bookings</Text>
+								<Text size="xs" type="secondary">2 invoices</Text>
+							</div>
+						</ResourceRelatedCard>
+					),
+				}}
+			>
+				<div className="grid gap-3 md:grid-cols-2">
+					<ResourceDetailsCard title="Account details">
+						<Text size="xs" type="secondary">Primary email, billing status, and customer metadata.</Text>
+					</ResourceDetailsCard>
+					<ResourceActivityCard title="Recent activity">
+						<Text size="xs" type="secondary">Last booking updated 12 minutes ago.</Text>
+					</ResourceActivityCard>
+				</div>
+			</ResourceShowShell>
+		</div>
+	);
+}
+
+export function TabbedResourceDetails() {
+	return (
+		<TabbedResourceShell
+			title="Sarah Smitha"
+			description="Gold-tier account with active bookings and billing history."
+			activeTab="profile"
+			tabs={[
+				{ id: 'profile', label: 'Profile', icon: User },
+				{ id: 'security', label: 'Security', icon: Shield },
+				{ id: 'notifications', label: 'Notifications', icon: Bell, badge: '3' },
+			]}
+			actions={<Button variant="secondary">Edit profile</Button>}
+			slots={{
+				aside: (
+					<ResourceRelatedCard title="Related records">
+						<div className="grid gap-2">
+							<Text size="xs" type="secondary">4 bookings</Text>
+							<Text size="xs" type="secondary">2 invoices</Text>
+						</div>
+					</ResourceRelatedCard>
+				),
+			}}
+		>
+			<div className="grid gap-3 md:grid-cols-2">
+				<ResourceDetailsSection
+					title="Account details"
+					metadata={[
+						{ label: 'Email', value: 'sarah@example.com' },
+						{ label: 'Segment', value: 'Gold' },
+						{ label: 'Created', value: 'May 14, 2026' },
+						{ label: 'Owner', value: 'Emma Garcia' },
+					]}
+					help="Consumers own field visibility, permissions, and edit workflows."
+				/>
+				<ResourceActivityCard title="Recent activity">
+					<Text size="xs" type="secondary">Last booking updated 12 minutes ago.</Text>
+				</ResourceActivityCard>
+			</div>
+		</TabbedResourceShell>
+	);
+}
+
+export function SettingsShellExample() {
+	return (
+		<SettingsShell
+			title="Workspace settings"
+			description="Aside navigation shell with router-neutral links."
+			currentId="profile"
+			renderLink={renderPreviewLink}
+			groups={[
+				{
+					id: 'workspace',
+					label: 'Workspace',
+					items: [
+						{ id: 'profile', label: 'Profile', href: '#/settings/profile', icon: User, description: 'Name, logo, and contact details' },
+						{ id: 'security', label: 'Security', href: '#/settings/security', icon: Shield, description: 'Sessions and policies' },
+						{ id: 'notifications', label: 'Notifications', href: '#/settings/notifications', icon: Bell, badge: 3 },
+					],
+				},
+			]}
+		>
+			<ResourceDetailsSection
+				title="Profile"
+				metadata={[
+					{ label: 'Workspace', value: 'Gift Come True' },
+					{ label: 'Plan', value: 'Pro' },
+				]}
+			>
+				<Text size="xs" type="secondary">
+					The app supplies forms, validation, permissions, and navigation.
+				</Text>
+			</ResourceDetailsSection>
+		</SettingsShell>
+	);
+}
+`;function Q(e){return Te||$(`Examples`,!1),q||$(`Examples.ComposablePartials`,!0),K||$(`Examples.ProductionPageShell`,!0),J||$(`Examples.ResourceShells`,!0),X||$(`Examples.SettingsShellExample`,!0),Y||$(`Examples.TabbedResourceDetails`,!0),(0,k.jsxs)(r,{title:`Layout · Page`,description:`Page shell, header partials, actions, and content regions with framework-neutral links.`,layer:`layout`,status:`ready`,children:[(0,k.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,k.jsx)(l,{name:`ProductionPageShell`,source:Z,children:(0,k.jsx)(K,{})}),(0,k.jsx)(l,{name:`ComposablePartials`,source:Z,children:(0,k.jsx)(q,{})}),(0,k.jsx)(l,{name:`ResourceShells`,source:Z,children:(0,k.jsx)(J,{})}),(0,k.jsx)(l,{name:`TabbedResourceDetails`,source:Z,children:(0,k.jsx)(Y,{})}),(0,k.jsx)(l,{name:`SettingsShellExample`,source:Z,children:(0,k.jsx)(X,{})})]}),(0,k.jsxs)(i,{title:`API`,id:`api`,children:[(0,k.jsx)(x,{component:`Page`}),(0,k.jsx)(x,{component:`PageHeader`}),(0,k.jsx)(x,{component:`ResourceIndexShell`}),(0,k.jsx)(x,{component:`ResourceShowShell`}),(0,k.jsx)(x,{component:`ResourceHeader`}),(0,k.jsx)(x,{component:`ResourceActionBar`}),(0,k.jsx)(x,{component:`ResourceEmptyState`}),(0,k.jsx)(x,{component:`ResourceDetailsCard`}),(0,k.jsx)(x,{component:`ResourceDetailsSection`}),(0,k.jsx)(x,{component:`TabbedResourceShell`}),(0,k.jsx)(x,{component:`SettingsShell`}),(0,k.jsx)(x,{component:`AsideNavShell`})]})]})}function De(e={}){let{wrapper:t}=e.components||{};return t?(0,k.jsx)(t,{...e,children:(0,k.jsx)(Q,{...e})}):Q(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{De as default};