admin-ui-starter-kit 0.6.6 → 0.6.8

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

@@ -1,101 +0,0 @@
-import{n as e}from"./chunk-QTnfLwEv.js";import{n as t,o as n,p as r,t as i}from"./section-Cv8i4DIx.js";import{t as a}from"./example-eGsLGIcp.js";import{d as o,n as s}from"./index-DDZl6kOS.js";import{t as c}from"./smart-card-Cg6rtWH9.js";import{t as l}from"./content-container-C4uopCBg.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:`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)(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="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)(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-TJ-WVmG3.js

@@ -1,203 +0,0 @@
-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-Cv8i4DIx.js";import{t as s}from"./bell-CmuQlO_k.js";import{r as c,t as l}from"./example-eGsLGIcp.js";import{t as u}from"./circle-alert-B56AFULT.js";import{t as d}from"./circle-check-B4XZj4Ty.js";import{n as f,t as p}from"./header-notifications-D_CJPbvs.js";import{r as m,t as h}from"./sidebar.context-C8gkOwJ5.js";import{t as g}from"./settings-CXjN6wTC.js";import{d as _,n as v}from"./index-DDZl6kOS.js";import{t as y}from"./props-table-Bjc9IHmp.js";import{t as b}from"./smart-card-Cg6rtWH9.js";import{t as x}from"./separator-CecGyBaV.js";import{i as S,t as C}from"./popover-pZ4Jbp0s.js";import{t as w}from"./popover-CjVWDO7C.js";import{n as T,t as E}from"./header-DzYOgZLP.js";import{t as D}from"./page-header-C_-KYryO.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-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)(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};