admin-ui-starter-kit 0.6.8 → 0.6.9

package/dist/showcase/assets/layout-containers-B6c-uvil.js

@@ -0,0 +1,101 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,o as n,p as r,t as i}from"./section-DuBNJP4P.js";import{t as a}from"./example-6bZGEb3-.js";import{d as o,n as s}from"./index-BjjNfnhP.js";import{t as c}from"./smart-card-OExZHSsj.js";import{t as l}from"./content-container-b1dC2caJ.js";var u=o(),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:s(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:`default`,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:`default`,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)(n,{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:'`width="narrow"` clamps content at 1040px.'})]})})}function _(){return(0,u.jsx)(h,{children:(0,u.jsxs)(l,{as:`section`,width:`large`,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:`xs`,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)(n,{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="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 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)(i,{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-DNhJHWNw.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-DuBNJP4P.js";import{t as s}from"./bell-D7HWGStL.js";import{r as c,t as l}from"./example-6bZGEb3-.js";import{t as u}from"./circle-alert-BQkAwFkl.js";import{t as d}from"./circle-check-dqmKTiDe.js";import{n as f,t as p}from"./header-notifications-CpHeFPQF.js";import{r as m,t as h}from"./sidebar.context-BiNOpG5W.js";import{t as g}from"./settings-D9Z79UcG.js";import{d as _,n as v}from"./index-BjjNfnhP.js";import{t as y}from"./props-table-X9St7Q4m.js";import{t as b}from"./smart-card-OExZHSsj.js";import{t as x}from"./separator-O-VQMSf_.js";import{i as S,t as C}from"./popover-DILNXLWy.js";import{t as w}from"./popover-o1EO2yVS.js";import{n as T,t as E}from"./header-CSiNqg9Q.js";import{t as D}from"./page-header-2VEUPx67.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};