admin-ui-starter-kit 0.7.0 → 0.7.1

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

@@ -0,0 +1,141 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,o as i,p as a,t as o}from"./section-C_rLy6Zn.js";import{t as s}from"./example-BsDQngs7.js";import{d as c,n as l}from"./index-B4sKWDcN.js";import{t as u}from"./smart-card-CwDYx0xj.js";import{t as d}from"./content-container-CJN01OtO.js";var f=c(),p={tight:`space-y-space-lg`,default:`space-y-space-xl`,loose:`space-y-space-2xl`};function m({children:e,as:t=`section`,density:n=`default`,className:r,...i}){return(0,f.jsx)(t,{className:l(p[n],r),...i,children:e})}var h=t(n(),1),g=({children:e})=>e;g.displayName=`InnerLayoutBlock`;var _=({children:e})=>e;_.displayName=`OuterLayoutBlock`;var v=({children:e})=>e;v.displayName=`TopLayoutBlock`;var y=`lg:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]`,b=`gap-space-2xl`,x=`mt-space-2xl`,S=`lg:top-space-2xl`,C=`mb-space-2xl`;function w({children:e,className:t,columnsClassName:n=y,gapClassName:r=b,topWrapperClassName:i=C,outerWrapperClassName:a=x,leftColumnClassName:o,rightColumnClassName:s,reverse:c=!1,mobileReverse:u=!0,stickyRight:d=!1,stickyRightOffsetClassName:p=S}){let m=h.Children.toArray(e).filter(Boolean),w=[],T=[],E=[];if(m.forEach(e=>{if((0,h.isValidElement)(e)){if(e.type===g){w.push(e);return}if(e.type===_){T.push(e);return}e.type===v&&E.push(e)}}),w.length!==2)throw Error(`TwoColumnLayout requires exactly two InnerLayoutBlock children.`);let[D,O]=w,k=c?O:D,A=c?D:O,j=T[0]??null,M=E[0]??null,N=u?`order-2 lg:order-1`:`order-1 lg:order-1`,P=u?`order-1 lg:order-2`:`order-2 lg:order-2`,F=d?l(`lg:sticky lg:self-start`,p):null;return(0,f.jsxs)(f.Fragment,{children:[!!M&&(0,f.jsx)(`div`,{"data-slot":`two-column-layout-top`,className:l(`two-column-layout--top`,i,M.props.className),children:M.props.children}),(0,f.jsxs)(`div`,{"data-slot":`two-column-layout`,className:l(`two-column-layout--component flex min-w-0 flex-col`,r,`lg:grid`,n,t),children:[(0,f.jsx)(`div`,{"data-slot":`two-column-layout-left`,className:l(`two-column-layout--left min-h-0 min-w-0`,N,o,k.props.className),children:k.props.children}),(0,f.jsx)(`div`,{"data-slot":`two-column-layout-right`,className:l(`two-column-layout--right min-h-0 min-w-0`,P,s,F,A.props.className),children:A.props.children})]}),!!j&&(0,f.jsx)(`div`,{"data-slot":`two-column-layout-outer`,className:l(`two-column-layout--outer`,a,j.props.className),children:j.props.children})]})}w.displayName=`TwoColumnLayout`;var T=e({BareContainer:()=>A,NarrowContainer:()=>O,SectionRhythm:()=>M,TwoColumnDetailLayout:()=>j,WideContainer:()=>k});function E({title:e,detail:t}){return(0,f.jsx)(u,{padding:`default`,className:`border-dashed`,children:(0,f.jsxs)(`div`,{className:`space-y-1`,children:[(0,f.jsx)(a,{weight:`semibold`,children:e}),(0,f.jsx)(a,{size:`xs`,type:`secondary`,children:t})]})})}function D({children:e,height:t=320}){return(0,f.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 O(){return(0,f.jsx)(D,{children:(0,f.jsxs)(d,{as:`section`,width:`narrow`,padding:`default`,innerClassName:`gap-3`,children:[(0,f.jsxs)(`div`,{className:`flex items-center justify-between gap-3`,children:[(0,f.jsx)(a,{weight:`semibold`,children:`Narrow container`}),(0,f.jsx)(i,{variant:`info`,children:`padding sm`})]}),(0,f.jsx)(E,{title:`Centered content`,detail:`Useful for forms, setup flows, and readable single-column pages.`}),(0,f.jsx)(E,{title:`Comfortable reading width`,detail:'`width="narrow"` clamps content at 1040px.'})]})})}function k(){return(0,f.jsx)(D,{children:(0,f.jsxs)(d,{as:`section`,width:`large`,padding:`default`,innerClassName:`grid grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-3`,children:[(0,f.jsx)(E,{title:`Card A`,detail:`Dashboard pages can keep cards aligned inside a max-width shell.`}),(0,f.jsx)(E,{title:`Card B`,detail:"`innerClassName` controls the inner column without breaking the outer wrapper."}),(0,f.jsx)(E,{title:`Card C`,detail:"Use `as` to render the right semantic element for the surface."})]})})}function A(){return(0,f.jsx)(D,{height:260,children:(0,f.jsxs)(d,{width:`full`,bare:!0,className:`bg-card`,children:[(0,f.jsx)(`div`,{className:`grid grid-cols-4 border-b border-border px-3 py-2`,children:[`Name`,`Owner`,`Status`,`Updated`].map(e=>(0,f.jsx)(a,{size:`xs`,weight:`semibold`,type:`secondary`,className:`uppercase tracking-wider`,children:e},e))}),[`Billing portal`,`Customer records`,`Sync monitor`].map((e,t)=>(0,f.jsxs)(`div`,{className:`grid grid-cols-4 px-3 py-2`,children:[(0,f.jsx)(a,{weight:`medium`,children:e}),(0,f.jsx)(a,{type:`secondary`,children:`Operations`}),(0,f.jsx)(i,{variant:t===2?`warning`:`success`,children:t===2?`Review`:`Healthy`}),(0,f.jsx)(a,{size:`xs`,type:`secondary`,children:`Today`})]},e))]})})}function j(){return(0,f.jsx)(D,{height:520,children:(0,f.jsx)(d,{as:`section`,width:`narrow`,padding:`default`,children:(0,f.jsxs)(w,{stickyRight:!0,children:[(0,f.jsx)(v,{children:(0,f.jsxs)(`div`,{className:`flex min-w-0 flex-col gap-space-xs`,children:[(0,f.jsx)(a,{weight:`semibold`,children:`Two column detail layout`}),(0,f.jsx)(a,{type:`secondary`,children:`Use this for main form/detail content with a right-hand summary or support rail.`})]})}),(0,f.jsx)(g,{children:(0,f.jsxs)(`div`,{className:`grid gap-space-lg`,children:[(0,f.jsx)(E,{title:`Primary details`,detail:`The first inner block owns the wider content column by default.`}),(0,f.jsx)(E,{title:`Configuration`,detail:`Form sections, tables, and detail cards stay together in the main column.`}),(0,f.jsx)(E,{title:`Publishing`,detail:`The layout does not own data or routing; it only standardizes structure.`})]})}),(0,f.jsx)(g,{children:(0,f.jsxs)(`div`,{className:`grid gap-space-lg`,children:[(0,f.jsx)(E,{title:`Summary`,detail:`The second inner block becomes the aside column.`}),(0,f.jsx)(E,{title:`Checklist`,detail:"Set `stickyRight` when the aside should remain visible on desktop."})]})}),(0,f.jsx)(_,{children:(0,f.jsx)(E,{title:`Full-width follow-up`,detail:`Outer blocks render below both columns for logs, related records, or footers.`})})]})})})}function M(){return(0,f.jsx)(`div`,{className:`grid grid-cols-[repeat(auto-fit,minmax(min(12rem,100%),1fr))] gap-3`,children:[`tight`,`default`,`loose`].map(e=>(0,f.jsxs)(m,{density:e,className:`rounded-md border border-dashed border-border p-4`,children:[(0,f.jsx)(a,{weight:`semibold`,className:`capitalize`,children:e}),(0,f.jsx)(E,{title:`Block one`,detail:`Section controls vertical rhythm only.`}),(0,f.jsx)(E,{title:`Block two`,detail:`Cards and headings remain separate composition concerns.`})]},e))})}var N=`import type { ReactNode } from 'react';
+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';
+
+function SampleCard({ title, detail }: { title: string; detail: string }) {
+	return (
+		<SmartCard padding="default" 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="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>
+				</div>
+				<SampleCard title="Centered content" detail="Useful for forms, setup flows, and readable single-column pages." />
+				<SampleCard title="Comfortable reading width" detail="\`width=&quot;narrow&quot;\` clamps content at 1040px." />
+			</Container>
+		</DemoViewport>
+	);
+}
+
+export function WideContainer() {
+	return (
+		<DemoViewport>
+			<Container
+				as="section"
+				width="large"
+				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="xs" 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 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">
+			{(['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 P(e){return T||I(`Examples`,!1),A||I(`Examples.BareContainer`,!0),O||I(`Examples.NarrowContainer`,!0),M||I(`Examples.SectionRhythm`,!0),j||I(`Examples.TwoColumnDetailLayout`,!0),k||I(`Examples.WideContainer`,!0),(0,f.jsx)(r,{title:`Layout · Containers`,description:`Container and Section primitives for page structure, width clamps, padding density, and semantic wrappers.`,layer:`layout`,status:`ready`,children:(0,f.jsxs)(o,{title:`Examples`,id:`examples`,children:[(0,f.jsx)(s,{name:`NarrowContainer`,source:N,children:(0,f.jsx)(O,{})}),(0,f.jsx)(s,{name:`WideContainer`,source:N,children:(0,f.jsx)(k,{})}),(0,f.jsx)(s,{name:`BareContainer`,source:N,children:(0,f.jsx)(A,{})}),(0,f.jsx)(s,{name:`TwoColumnDetailLayout`,source:N,children:(0,f.jsx)(j,{})}),(0,f.jsx)(s,{name:`SectionRhythm`,source:N,children:(0,f.jsx)(M,{})})]})})}function F(e={}){let{wrapper:t}=e.components||{};return t?(0,f.jsx)(t,{...e,children:(0,f.jsx)(P,{...e})}):P(e)}function I(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{F as default};

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

@@ -0,0 +1,203 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{t as n}from"./react-sKtkuLrH.js";import{n as r,o as i,p as a,t as o}from"./section-C_rLy6Zn.js";import{t as s}from"./bell-DyqsYdKK.js";import{r as c,t as l}from"./example-BsDQngs7.js";import{t as u}from"./circle-alert-DSpR2pdl.js";import{t as d}from"./circle-check-BjuHEm7p.js";import{n as f,t as p}from"./header-notifications-BdWsVoN3.js";import{r as m,t as h}from"./sidebar.context-CYk51BQ5.js";import{t as g}from"./settings-YDwquOPS.js";import{d as _,n as v}from"./index-B4sKWDcN.js";import{t as y}from"./props-table-aynAz90t.js";import{t as b}from"./smart-card-CwDYx0xj.js";import{t as x}from"./separator-CjWigMul.js";import{i as S,t as C}from"./popover-BP4R2w67.js";import{t as w}from"./popover-DfGXC2pN.js";import{n as T,t as E}from"./header-XNCAB6Rs.js";import{t as D}from"./page-header-AFTuoGVw.js";var O=_();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:s},l)=>(0,O.jsxs)(c,{ref:l,"data-component":`header-tool-button`,"data-slot":`header-tool-button`,type:`button`,variant:`secondary`,buttonStyle:`ghost`,size:`icon-small`,"aria-label":e,"aria-pressed":n||void 0,title:e,disabled:r,onClick:a,className:v(`header-tool-button--component header-tool-button--trigger relative size-control 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:v(`header-tool-button--icon size-icon`,s),"aria-hidden":`true`}),!!i&&(0,O.jsx)(`span`,{"data-slot":`header-tool-badge`,className:`header-tool-button--badge absolute right-space-xs top-space-xs flex min-h-space-lg min-w-space-lg items-center justify-center rounded-full bg-destructive px-space-2xs text-xs 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)(C,{open:n,defaultOpen:r,onOpenChange:i,children:[(0,O.jsx)(S,{asChild:!0,children:(0,O.jsx)(A,{label:e,icon:t,active:a??n,disabled:o,badge:s,className:f})}),(0,O.jsx)(w,{"data-component":`header-tool-popover`,"data-slot":`header-tool-popover-content`,align:c,side:l,sideOffset:u,className:v(`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-128 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)(x,{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:`default`,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:`default`,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:`default`,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:`default`,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)(i,{variant:`warning`,children:`Unread state`})]})]}),(0,O.jsxs)(b,{padding:`default`,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:`default`,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:s,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)(c,{variant:`secondary`,size:`default`,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)(c,{variant:`secondary`,icon:s,children:`Open bell`}),(0,O.jsx)(c,{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-128 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="default" 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="default">
+										<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="default">
+										<Text weight="semibold" className="mb-3">Search</Text>
+										<HeaderSearch className="w-full" strings={{ placeholder: 'Search customers, invoices, comments...' }} />
+									</SmartCard>
+
+									<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} />
+											<Badge variant="warning">Unread state</Badge>
+										</div>
+									</SmartCard>
+
+									<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} />
+											<HeaderUserMenu user={user} showEmail={false} onProfile={() => {}} onSettings={() => {}} onLogout={() => {}} />
+										</div>
+									</SmartCard>
+								</div>
+							</SidebarProvider>
+		</>
+	);
+}
+
+export function HeaderToolPrimitives() {
+	return (
+		<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>
+					<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="default">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)(o,{title:`Examples`,id:`examples`,children:[(0,O.jsx)(l,{name:`AppHeaderComposition`,source:B,children:(0,O.jsx)(I,{})}),(0,O.jsx)(l,{name:`HeaderPartials`,source:B,children:(0,O.jsx)(L,{})}),(0,O.jsx)(l,{name:`HeaderToolPrimitives`,source:B,children:(0,O.jsx)(R,{})}),(0,O.jsx)(l,{name:`CustomNotificationRenderer`,source:B,children:(0,O.jsx)(z,{})})]}),(0,O.jsxs)(o,{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};