admin-ui-starter-kit 0.1.2 → 0.1.4

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

@@ -0,0 +1,170 @@
+import{n as e}from"./chunk-QTnfLwEv.js";import{Cr as t,gr as n,hr as r,mr as i,r as a,t as o}from"./example-C6-_Sy6B.js";import{t as s}from"./bell-CVEeEWw4.js";import{t as c}from"./circle-alert-DJevf3tT.js";import{t as l}from"./circle-check-BCxORlAM.js";import{n as u,t as d}from"./header-notifications-Caa9i87J.js";import{r as f,t as p}from"./sidebar.context-D3P7qppn.js";import{t as m}from"./settings-DlKX-bZT.js";import{a as h}from"./index-B8DVXCmf.js";import{t as g}from"./smart-card-7szg_qSt.js";import{t as _}from"./separator-DUKleOvU.js";import{t as v}from"./page-header-4F_iaFPW.js";import{n as y,t as b}from"./header-eZHN-s6P.js";var x=e({AppHeaderComposition:()=>E,CustomNotificationRenderer:()=>O,HeaderPartials:()=>D}),S=h(),C={name:`Nicolas Vlachos`,email:`nicolas@example.com`,avatar:`https://i.pravatar.cc/96?img=11`},w=[{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 T({href:e,children:t,className:n,target:r,rel:i}){return(0,S.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,children:t})}function E(){return(0,S.jsx)(S.Fragment,{children:(0,S.jsx)(p,{className:`min-h-0`,children:(0,S.jsx)(`div`,{className:`w-full overflow-hidden rounded-lg border border-border bg-background p-3`,children:(0,S.jsxs)(`div`,{className:`overflow-hidden rounded-lg border border-border bg-background shadow-sm`,children:[(0,S.jsx)(b,{renderLink:T,breadcrumbs:[{label:`Operations`,href:`#/features/activities`},{label:`Orders`}],centerClassName:`w-[32rem] max-w-[40vw]`,slots:{center:(0,S.jsx)(u,{className:`w-full`,onOpen:()=>{}}),right:(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(d,{notifications:w,unreadCount:2,viewAllHref:`#/features/activities`,renderLink:T}),(0,S.jsx)(_,{orientation:`vertical`,className:`h-7`}),(0,S.jsx)(f,{user:C,showEmail:!1,onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})}}),(0,S.jsxs)(`div`,{className:`space-y-5 p-5`,children:[(0,S.jsx)(v,{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,S.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[[`Manual review`,`8`],[`Awaiting stock`,`12`],[`Ready to fulfill`,`36`]].map(([e,n,r])=>(0,S.jsxs)(g,{padding:`sm`,className:`shadow-sm`,children:[(0,S.jsx)(t,{size:`xs`,type:`secondary`,children:e}),(0,S.jsx)(t,{weight:`semibold`,children:n}),!!r&&(0,S.jsx)(t,{size:`xs`,type:`secondary`,children:r})]},e))})]})]})})})})}function D(){return(0,S.jsx)(S.Fragment,{children:(0,S.jsx)(p,{className:`min-h-0`,children:(0,S.jsxs)(`div`,{className:`grid w-full gap-4 lg:grid-cols-2`,children:[(0,S.jsxs)(g,{padding:`sm`,children:[(0,S.jsx)(t,{weight:`semibold`,className:`mb-3`,children:`Breadcrumbs`}),(0,S.jsx)(`div`,{className:`h-10 rounded-lg border border-border bg-background px-3`,children:(0,S.jsx)(y,{showSidebarTrigger:!0,homeBreadcrumb:{label:`Admin`,href:`#/admin`},renderLink:T,breadcrumbs:[{label:`Customers`,href:`#/customers`},{label:`Sarah Smitha`}]})})]}),(0,S.jsxs)(g,{padding:`sm`,children:[(0,S.jsx)(t,{weight:`semibold`,className:`mb-3`,children:`Search`}),(0,S.jsx)(u,{className:`w-full`,strings:{placeholder:`Search customers, invoices, comments...`}})]}),(0,S.jsxs)(g,{padding:`sm`,children:[(0,S.jsx)(t,{weight:`semibold`,className:`mb-3`,children:`Notifications`}),(0,S.jsxs)(`div`,{className:`flex items-center gap-3`,children:[(0,S.jsx)(d,{notifications:w,unreadCount:2,renderLink:T}),(0,S.jsx)(n,{variant:`warning`,children:`Unread state`})]})]}),(0,S.jsxs)(g,{padding:`sm`,children:[(0,S.jsx)(t,{weight:`semibold`,className:`mb-3`,children:`Right action cluster`}),(0,S.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,S.jsx)(d,{notifications:w,unreadCount:2,renderLink:T}),(0,S.jsx)(f,{user:C,showEmail:!1,onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})]})]})})})}function O(){return(0,S.jsx)(S.Fragment,{children:(0,S.jsxs)(`div`,{className:`flex flex-wrap items-center gap-3 rounded-xl border border-border bg-background p-4 shadow-sm`,children:[(0,S.jsx)(d,{notifications:w,unreadCount:2,renderNotification:e=>(0,S.jsxs)(`div`,{className:`flex items-start gap-3 rounded-md px-3 py-2`,children:[e.tone===`success`?(0,S.jsx)(l,{className:`mt-0.5 size-4 text-success`}):(0,S.jsx)(c,{className:`mt-0.5 size-4 text-warning`}),(0,S.jsxs)(`div`,{className:`min-w-0`,children:[(0,S.jsx)(t,{weight:`medium`,children:e.title}),(0,S.jsx)(t,{size:`xs`,type:`secondary`,children:e.description})]})]})}),(0,S.jsx)(a,{variant:`secondary`,icon:s,children:`Open bell`}),(0,S.jsx)(a,{variant:`secondary`,icon:m,children:`Settings`})]})})}var k=`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,
+	HeaderNotifications,
+	HeaderSearch,
+	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 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 A(e){return x||M(`Examples`,!1),E||M(`Examples.AppHeaderComposition`,!0),O||M(`Examples.CustomNotificationRenderer`,!0),D||M(`Examples.HeaderPartials`,!0),(0,S.jsx)(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,S.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,S.jsx)(o,{name:`AppHeaderComposition`,source:k,children:(0,S.jsx)(E,{})}),(0,S.jsx)(o,{name:`HeaderPartials`,source:k,children:(0,S.jsx)(D,{})}),(0,S.jsx)(o,{name:`CustomNotificationRenderer`,source:k,children:(0,S.jsx)(O,{})})]})})}function j(e={}){let{wrapper:t}=e.components||{};return t?(0,S.jsx)(t,{...e,children:(0,S.jsx)(A,{...e})}):A(e)}function M(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{j as default};

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

@@ -0,0 +1,122 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Cr as r,Tr as i,gr as a,hr as o,mr as s,r as c,t as l}from"./example-C6-_Sy6B.js";import{t as u}from"./ellipsis-Bn-XgoA7.js";import{t as d}from"./plus-C9kwz7rW.js";import{t as f}from"./refresh-cw-Tu5E_cGA.js";import{t as p}from"./trash-2-_xF5j-Ya.js";import{D as m,a as h}from"./index-B8DVXCmf.js";import{t as g}from"./page-action-button-DgvZVtzx.js";import{t as _}from"./smart-card-7szg_qSt.js";import{a as v,s as y}from"./dropdown-menu-Q1BV3wPP.js";import{t as b}from"./separator-DUKleOvU.js";import{t as x}from"./action-menu-mlWlGE5P.js";import{n as S,t as C}from"./page-header-4F_iaFPW.js";import{t as w}from"./content-container-CHXwWViz.js";var T=h();function E({header:e,width:t=`narrow`,children:n,className:r,bodyClassName:a,renderLink:o,LinkComponent:s}){return(0,T.jsxs)(w,{width:t,className:r,children:[!!e&&(0,T.jsx)(C,{...e,renderLink:e.renderLink??o,LinkComponent:e.LinkComponent??s}),!!n&&(0,T.jsx)(`div`,{className:i(`relative block w-full`,a),children:n})]})}var D={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 O({noPadding:e=!1,maxWidth:t,className:n,children:r,...a}){return(0,T.jsx)(`main`,{className:i(`flex-1`,!e&&`p-4 md:p-6`,t&&i(`mx-auto w-full`,D[t]),n),...a,children:r})}var k={menuLabel:`Page actions`},A=t(n(),1),j=e=>e===`destructive`?`error`:e===`primary`||e===`success`||e===`warning`?`primary`:`secondary`,M=`max-h-[80vh] overflow-y-auto overscroll-contain`,N=4;function P(e,t,n){if(e.visible===!1)return null;if(e.element)return(0,T.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,T.jsxs)(g,{variant:j(e.variant),onClick:e.onClick,disabled:i,children:[!!a&&(0,T.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 F(e,t,n){let a=[],o=null;return e.forEach(({action:e,index:s})=>{let c={...t,index:s,isInline:!1},l=e.group??null,u=l!==o;if(a.length>0&&u&&a.push((0,T.jsx)(b,{className:`my-1`},`sep-${o??`root`}-${l??`root`}-${e.id??s}`)),u&&(o=l,l&&a.push((0,T.jsx)(`div`,{className:`px-2 pt-1`,children:(0,T.jsx)(r,{size:`xxs`,weight:`semibold`,type:`secondary`,className:`uppercase tracking-wider`,children:l})},`group-${l}-${e.id??s}`))),e.element){a.push((0,T.jsx)(`div`,{children:e.element},e.id??s));return}if(n){a.push((0,T.jsx)(`div`,{children:n(e,c)},e.id??s));return}let d=e.icon,f=!!e.disabled||!!e.loading,p=(0,T.jsxs)(T.Fragment,{children:[!!d&&(0,T.jsx)(d,{className:`size-3.5`,"aria-hidden":`true`}),typeof e.label==`string`?(0,T.jsx)(r,{tag:`span`,size:`xs`,className:`text-inherit`,children:e.label}):e.label]}),m=i(`gap-1.5 px-2 py-1.5 text-xs`,e.variant===`destructive`&&`text-destructive focus-visible:text-destructive`);if(e.href&&!e.onClick&&!f){a.push((0,T.jsx)(y,{href:e.href,className:m,render:t=>c.renderLink({...t,href:e.href,children:t.children,target:e.target,rel:e.rel,external:e.external}),children:p},e.id??s));return}a.push((0,T.jsx)(v,{disabled:f,onClick:e.onClick,className:m,children:p},e.id??s))}),a}function I({actions:e,display:t=`dropdown`,breakpoint:n=1040,maxInlineActions:r=N,renderLink:a,LinkComponent:o,strings:s,className:c,inlineClassName:l,menuClassName:d,renderAction:f}){let p=m(k,s),h=S({renderLink:a,LinkComponent:o}),g=(0,A.useMemo)(()=>(e??[]).map((e,t)=>({action:e,index:t})).filter(({action:e})=>e.visible!==!1),[e]),[_,v]=(0,A.useState)(!1);if((0,A.useEffect)(()=>{if(t!==`auto`||typeof window>`u`)return;let e=()=>v(window.innerWidth<=n);return e(),window.addEventListener(`resize`,e),()=>window.removeEventListener(`resize`,e)},[t,n]),g.length===0)return null;let y={renderLink:h},b=i(`flex items-center gap-2`,l,c),C=i(M,d);if(t===`dropdown`||t===`auto`&&_)return(0,T.jsx)(x,{icon:u,srText:p.menuLabel,align:`end`,closeOnSelect:!0,contentClassName:C,children:F(g,y,f)});let w=Math.max(0,r),E=g.filter(({action:e})=>(e.placement??`auto`)!==`menu`),D=E.slice(0,w),O=[...E.slice(w),...g.filter(({action:e})=>(e.placement??`auto`)===`menu`)];return(0,T.jsxs)(`div`,{className:b,children:[D.map(e=>(0,T.jsx)(A.Fragment,{children:P(e.action,{...y,index:e.index,isInline:!0},f)},e.action.id??e.index)),O.length>0&&(0,T.jsx)(x,{icon:u,srText:p.menuLabel,align:`end`,closeOnSelect:!0,contentClassName:C,children:F(O,y,f)})]})}var L=e({ComposablePartials:()=>W,ProductionPageShell:()=>U}),R=[{id:`new`,label:`New customer`,icon:d,variant:`primary`,href:`#/customers/new`,placement:`inline`},{id:`sync`,label:`Sync records`,icon:f,group:`Data`,placement:`menu`},{id:`delete`,label:`Delete saved view`,icon:p,variant:`destructive`,group:`Danger`,placement:`menu`}],z=[{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 B({href:e,children:t,className:n,target:r,rel:i}){return(0,T.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,children:t})}function V({children:e,height:t=560}){return(0,T.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 H(){return(0,T.jsxs)(`div`,{className:`space-y-4`,children:[(0,T.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:z.map(e=>(0,T.jsx)(_,{padding:`sm`,className:`border-border/80 shadow-sm`,children:(0,T.jsxs)(`div`,{className:`space-y-1`,children:[(0,T.jsx)(r,{size:`xs`,type:`secondary`,children:e.label}),(0,T.jsx)(r,{weight:`semibold`,children:e.value}),(0,T.jsx)(r,{size:`xs`,type:`secondary`,children:e.detail})]})},e.label))}),(0,T.jsx)(_,{padding:`sm`,className:`border-border/80 shadow-sm`,children:(0,T.jsxs)(`div`,{className:`flex flex-col gap-4 md:flex-row md:items-center md:justify-between`,children:[(0,T.jsxs)(`div`,{className:`space-y-1`,children:[(0,T.jsx)(r,{weight:`semibold`,children:`Review queue`}),(0,T.jsx)(r,{size:`xs`,type:`secondary`,children:`A compact body area that stays owned by the consuming app.`})]}),(0,T.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[(0,T.jsx)(a,{variant:`warning`,children:`8 urgent`}),(0,T.jsx)(a,{variant:`info`,children:`12 assigned`}),(0,T.jsx)(c,{variant:`secondary`,children:`Open queue`})]})]})})]})}function U(){return(0,T.jsx)(V,{children:(0,T.jsx)(E,{width:`full`,renderLink:B,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,T.jsx)(I,{actions:R,display:`auto`,renderLink:B}),actionsClassName:`pt-1`},children:(0,T.jsx)(H,{})})})}function W(){return(0,T.jsxs)(`div`,{className:`grid gap-4 lg:grid-cols-[1.3fr_0.7fr]`,children:[(0,T.jsx)(`div`,{className:`rounded-md border border-border bg-background p-5`,children:(0,T.jsx)(C,{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,T.jsx)(I,{actions:R,display:`flat`,renderLink:B}),renderLink:B})}),(0,T.jsx)(O,{maxWidth:`full`,className:`rounded-md border border-border bg-background p-5`,children:(0,T.jsxs)(`div`,{className:`space-y-2`,children:[(0,T.jsx)(r,{weight:`semibold`,children:`Standalone main region`}),(0,T.jsx)(r,{size:`xs`,type:`secondary`,children:`PageContent supplies body padding and width clamps when Header and Sidebar are composed manually.`}),(0,T.jsx)(c,{variant:`secondary`,children:`Open content`})]})})]})}var G=`import type { ReactNode } from 'react';
+import { Plus, RefreshCw, Trash2 } 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 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>
+	);
+}
+`;function K(e){return L||J(`Examples`,!1),W||J(`Examples.ComposablePartials`,!0),U||J(`Examples.ProductionPageShell`,!0),(0,T.jsx)(o,{title:`Layout · Page`,description:`Page shell, header partials, actions, and content regions with framework-neutral links.`,layer:`layout`,status:`ready`,children:(0,T.jsxs)(s,{title:`Examples`,id:`examples`,children:[(0,T.jsx)(l,{name:`ProductionPageShell`,source:G,children:(0,T.jsx)(U,{})}),(0,T.jsx)(l,{name:`ComposablePartials`,source:G,children:(0,T.jsx)(W,{})})]})})}function q(e={}){let{wrapper:t}=e.components||{};return t?(0,T.jsx)(t,{...e,children:(0,T.jsx)(K,{...e})}):K(e)}function J(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{q as default};

package/dist/showcase/assets/layout-sidebar-DZer5Uuh.js

@@ -0,0 +1,224 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Cr as r,Tr as i,gr as a,hr as o,mr as s,t as c}from"./example-C6-_Sy6B.js";import{t as l}from"./brain-DsoOsd7m.js";import{t as u}from"./chart-column-6Tn3WAT9.js";import{n as d,t as f}from"./header-notifications-Caa9i87J.js";import{t as p}from"./credit-card-BoDfW0R8.js";import{t as m}from"./external-link-Bg-_8Uq7.js";import{t as h}from"./house-DKxCiHyB.js";import{t as g}from"./inbox-ZxSy1pgX.js";import{c as _,f as ee,m as v,r as te,t as y,u as ne}from"./sidebar.context-D3P7qppn.js";import{t as b}from"./package-CUNvdlBi.js";import{t as x}from"./settings-DlKX-bZT.js";import{t as S}from"./shield-BD0Y8Jj3.js";import{t as re}from"./users-DzgXeZbf.js";import{a as C,r as w}from"./index-B8DVXCmf.js";import{t as T}from"./smart-card-7szg_qSt.js";import{t as ie}from"./separator-DUKleOvU.js";import{t as ae}from"./sidebar-JWZ88xw5.js";import{n as oe,t as se}from"./page-header-4F_iaFPW.js";import{a as ce,c as E,d as le,f as ue,i as D,l as O,n as k,o as A,p as j,r as M,s as N,t as P,u as F}from"./app-sidebar-BdOu5rVn.js";import{t as I}from"./header-eZHN-s6P.js";var L=w(`life-buoy`,[[`circle`,{cx:`12`,cy:`12`,r:`10`,key:`1mglay`}],[`path`,{d:`m4.93 4.93 4.24 4.24`,key:`1ymg45`}],[`path`,{d:`m14.83 9.17 4.24-4.24`,key:`1cb5xl`}],[`path`,{d:`m14.83 14.83 4.24 4.24`,key:`q42g0n`}],[`path`,{d:`m9.17 14.83-4.24 4.24`,key:`bqpfvv`}],[`circle`,{cx:`12`,cy:`12`,r:`4`,key:`4exip2`}]]),R=w(`sliders-horizontal`,[[`path`,{d:`M10 5H3`,key:`1qgfaw`}],[`path`,{d:`M12 19H3`,key:`yhmn1j`}],[`path`,{d:`M14 3v4`,key:`1sua03`}],[`path`,{d:`M16 17v4`,key:`1q0r14`}],[`path`,{d:`M21 12h-9`,key:`1o4lsq`}],[`path`,{d:`M21 19h-5`,key:`1rlt1p`}],[`path`,{d:`M21 5h-7`,key:`1oszz2`}],[`path`,{d:`M8 10v4`,key:`tgpxqk`}],[`path`,{d:`M8 12H3`,key:`a7s4jb`}]]),z=w(`store`,[[`path`,{d:`M15 21v-5a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v5`,key:`slp6dd`}],[`path`,{d:`M17.774 10.31a1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.451 0 1.12 1.12 0 0 0-1.548 0 2.5 2.5 0 0 1-3.452 0 1.12 1.12 0 0 0-1.549 0 2.5 2.5 0 0 1-3.77-3.248l2.889-4.184A2 2 0 0 1 7 2h10a2 2 0 0 1 1.653.873l2.895 4.192a2.5 2.5 0 0 1-3.774 3.244`,key:`o0xfot`}],[`path`,{d:`M4 10.95V19a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8.05`,key:`wn3emo`}]]),B=t(n(),1),V=C();function de({item:e}){return(0,V.jsx)(r,{tag:`span`,className:`truncate text-inherit`,children:O(e)})}function H({items:e,label:t=`Platform`,currentUrl:n=`/`,iconMap:r={},liveBadges:a,renderLink:o,LinkComponent:s,renderItem:c,className:l}){let u=oe({renderLink:o,LinkComponent:s});return(0,V.jsxs)(_,{className:i(`px-2 py-0`,l),children:[!!t&&(0,V.jsx)(ne,{children:t}),(0,V.jsx)(ee,{className:`gap-0.5`,children:e.map((e,t)=>{let o=!!e.href&&F(n,j(e.href)),s=ue(e.handle,e.badge,a),l={depth:0,active:o,expanded:!1,badge:s,renderLink:u},d=O(e);if(c)return(0,V.jsx)(B.Fragment,{children:c(e,l)},E(e,t));let f=(0,V.jsxs)(V.Fragment,{children:[!!e.icon&&(0,V.jsx)(A,{icon:e.icon,iconMap:r,className:`size-4`,"aria-hidden":`true`}),(0,V.jsx)(de,{item:e}),!!s&&(0,V.jsx)(N,{value:s})]});return(0,V.jsx)(v,{children:(0,V.jsx)(ae,{isActive:o,render:e.href&&!e.disabled?le(u,e,f,void 0,o):void 0,tooltip:{children:d},disabled:e.disabled,className:i(`h-7 font-medium`,o&&`bg-sidebar-accent text-sidebar-foreground`,e.disabled&&`cursor-not-allowed opacity-50`),children:f})},E(e,t))})})]})}var fe=e({AppSidebarShell:()=>J,CustomRowRenderer:()=>X,NavigationPartials:()=>Y}),U={Platform:[{label:`Dashboard`,href:`#/layout/sidebar`,icon:h,handle:`dashboard`},{label:`Customers`,href:`#/customers`,icon:re,handle:`customers`,badge:24},{label:`Orders`,href:`#/orders`,icon:b,handle:`orders`,children:[{label:`Pending`,href:`#/orders/pending`,handle:`orders-pending`,badge:8},{label:`Fulfilled`,href:`#/orders/fulfilled`,handle:`orders-fulfilled`}]}],Finance:[{label:`Invoices`,href:`#/invoices`,icon:p,handle:`invoices`,badge:12},{label:`Reports`,href:`#/reports`,icon:u,handle:`reports`}]},W=[{label:`Support`,href:`#/support`,icon:L,handle:`support`},{label:`Security`,href:`#/security`,icon:S,handle:`security`},{label:`External docs`,href:`https://example.com`,icon:m,handle:`docs`,external:!0}],G=[{label:`Settings`,href:`#/settings`,icon:R,handle:`settings`},{label:`AI`,href:`#/ai`,icon:l,handle:`ai`}],pe={name:`Nicolas Vlachos`,email:`nicolas@example.com`,avatar:`https://i.pravatar.cc/96?img=11`};function K({href:e,children:t,className:n,target:r,rel:i}){return(0,V.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,children:t})}function q(){return(0,V.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[(0,V.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm`,children:(0,V.jsx)(z,{className:`size-4`,"aria-hidden":`true`})}),(0,V.jsxs)(`div`,{className:`min-w-0`,children:[(0,V.jsx)(r,{weight:`semibold`,className:`truncate text-inherit`,children:`Atlas Admin`}),(0,V.jsx)(r,{size:`xxs`,type:`secondary`,className:`truncate`,children:`Production`})]})]})}function me(){return(0,V.jsx)(`div`,{className:`flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm`,children:(0,V.jsx)(z,{className:`size-4`,"aria-hidden":`true`})})}function J(){return(0,V.jsx)(V.Fragment,{children:(0,V.jsx)(y,{defaultOpen:!0,className:`min-h-0`,children:(0,V.jsx)(`div`,{className:`flex h-[42rem] w-full overflow-hidden rounded-lg border border-border bg-background p-3`,children:(0,V.jsxs)(`div`,{className:`flex min-w-0 flex-1 overflow-hidden rounded-lg border border-border bg-background shadow-sm`,children:[(0,V.jsx)(P,{className:`h-full p-0`,surfaceClassName:`bg-background`,headerClassName:`px-4 pb-3 pt-4`,logoClassName:`px-0`,logo:(0,V.jsx)(q,{}),collapsedLogo:(0,V.jsx)(me,{}),workspaceLinks:[{label:`Production store`,url:`#/workspaces/production`,icon:z,external:!1},{label:`Sandbox`,url:`#/workspaces/sandbox`,icon:z,external:!1}],workspaceStrings:{label:`Workspace`,select:`Switch workspace`},navigationGroups:U,footerNavItems:G,currentUrl:`#/orders/pending`,liveBadges:{customers:31,invoices:14},renderLink:K,slots:{afterNavigation:(0,V.jsx)(M,{items:W,label:`Help`,currentUrl:`#/orders/pending`,renderLink:K})}}),(0,V.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col`,children:[(0,V.jsx)(I,{renderLink:K,breadcrumbs:[{label:`Operations`,href:`#/features/activities`},{label:`Orders`}],centerClassName:`justify-start`,slots:{center:(0,V.jsx)(d,{className:`w-full max-w-sm`}),right:(0,V.jsxs)(V.Fragment,{children:[(0,V.jsx)(f,{unreadCount:2,notifications:[]}),(0,V.jsx)(ie,{orientation:`vertical`,className:`h-7`}),(0,V.jsx)(te,{user:pe,showEmail:!1,onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})}}),(0,V.jsxs)(`main`,{className:`min-w-0 flex-1 space-y-4 p-5`,children:[(0,V.jsx)(se,{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,V.jsx)(`div`,{className:`grid gap-3 md:grid-cols-3`,children:[`Manual review`,`Awaiting stock`,`Ready to fulfill`].map((e,t)=>(0,V.jsxs)(T,{padding:`sm`,className:`shadow-sm`,children:[(0,V.jsx)(r,{size:`xs`,type:`secondary`,children:e}),(0,V.jsx)(r,{weight:`semibold`,children:[8,12,36][t]})]},e))})]})]})]})})})})}function Y(){return(0,V.jsx)(V.Fragment,{children:(0,V.jsx)(y,{defaultOpen:!0,className:`min-h-0`,children:(0,V.jsxs)(`div`,{className:`grid w-full gap-5 md:grid-cols-2`,children:[(0,V.jsx)(`div`,{className:`h-[30rem] overflow-hidden rounded-xl border border-border bg-sidebar text-sidebar-foreground shadow-sm`,children:(0,V.jsxs)(ce,{collapsible:`none`,className:`w-full`,surfaceClassName:`bg-background`,children:[(0,V.jsx)(k,{logo:(0,V.jsx)(q,{}),workspaceLinks:[{label:`Production store`,url:`#/workspaces/production`,icon:z,external:!1},{label:`Sandbox`,url:`#/workspaces/sandbox`,icon:z,external:!1}],renderLink:K}),(0,V.jsx)(D,{navigationByGroups:U,currentUrl:`#/customers`,liveBadges:{customers:9},renderLink:K})]})}),(0,V.jsxs)(`div`,{className:`h-[30rem] overflow-hidden rounded-xl border border-border bg-sidebar p-2 text-sidebar-foreground shadow-sm`,children:[(0,V.jsx)(H,{label:`Flat navigation`,items:[{label:`Inbox`,href:`#/inbox`,icon:g,badge:6},{label:`Settings`,href:`#/settings`,icon:x},{label:`Disabled item`,href:`#/disabled`,icon:S,disabled:!0}],currentUrl:`#/inbox`,renderLink:K}),(0,V.jsxs)(`div`,{className:`mt-4 border-t border-sidebar-border pt-3`,children:[(0,V.jsx)(M,{items:W,label:`Help`,currentUrl:`#/orders/pending`,renderLink:K}),(0,V.jsx)(M,{items:G,currentUrl:`#/orders/pending`,renderLink:K})]})]})]})})})}function X(){return(0,V.jsx)(V.Fragment,{children:(0,V.jsx)(y,{defaultOpen:!0,className:`min-h-0`,children:(0,V.jsx)(`div`,{className:`rounded-xl border border-border bg-sidebar p-3 text-sidebar-foreground shadow-sm`,children:(0,V.jsx)(H,{label:`Custom renderItem`,items:[{label:`Priority inbox`,href:`#/priority`,icon:g,badge:3},{label:`Billing review`,href:`#/billing`,icon:p,badge:11}],renderLink:K,renderItem:(e,t)=>(0,V.jsx)(v,{children:(0,V.jsxs)(`div`,{className:`flex items-center justify-between rounded-lg px-3 py-2 hover:bg-sidebar-accent`,children:[(0,V.jsxs)(`div`,{children:[(0,V.jsx)(r,{weight:`medium`,className:`text-inherit`,children:e.label}),(0,V.jsxs)(r,{size:`xxs`,type:`secondary`,children:[`active: `,String(t.active)]})]}),!!t.badge&&(0,V.jsx)(a,{variant:`primary`,children:t.badge})]})})})})})})}var Z=`import { BarChart3, Brain, CreditCard, ExternalLink, Home, Inbox, LifeBuoy, Package, Settings, Shield, SlidersHorizontal, Store, Users } from 'lucide-react';
+import { Badge } from '@/components/base/badge';
+import { SmartCard } from '@/components/base/cards';
+import { Separator } from '@/components/base/display/separator';
+import { Text } from '@/components/typography';
+import type { LayoutLinkRenderProps, LayoutUser } from '@/components/layout';
+import { Header, HeaderSearch, HeaderNotifications, HeaderUserMenu } from '@/components/layout/header';
+import { PageHeader } from '@/components/layout/page';
+import {
+	AppSidebar,
+	Sidebar,
+	SidebarGroupedNavigation,
+	SidebarNavigation,
+	SidebarNavigationFooter,
+	SidebarProvider,
+	SidebarWorkspaceDropdown,
+	type SidebarNavItem,
+} from '@/components/layout/sidebar';
+import { SidebarMenuItem } from '@/components/base/sidebar';
+
+const groups: Record<string, SidebarNavItem[]> = {
+	Platform: [
+		{ label: 'Dashboard', href: '#/layout/sidebar', icon: Home, handle: 'dashboard' },
+		{ label: 'Customers', href: '#/customers', icon: Users, handle: 'customers', badge: 24 },
+		{ label: 'Orders', href: '#/orders', icon: Package, handle: 'orders', children: [
+			{ label: 'Pending', href: '#/orders/pending', handle: 'orders-pending', badge: 8 },
+			{ label: 'Fulfilled', href: '#/orders/fulfilled', handle: 'orders-fulfilled' },
+		] },
+	],
+	Finance: [
+		{ label: 'Invoices', href: '#/invoices', icon: CreditCard, handle: 'invoices', badge: 12 },
+		{ label: 'Reports', href: '#/reports', icon: BarChart3, handle: 'reports' },
+	],
+};
+
+const footerItems = [
+	{ label: 'Support', href: '#/support', icon: LifeBuoy, handle: 'support' },
+	{ label: 'Security', href: '#/security', icon: Shield, handle: 'security' },
+	{ label: 'External docs', href: 'https://example.com', icon: ExternalLink, handle: 'docs', external: true },
+];
+
+const utilityItems = [
+	{ label: 'Settings', href: '#/settings', icon: SlidersHorizontal, handle: 'settings' },
+	{ label: 'AI', href: '#/ai', icon: Brain, handle: 'ai' },
+];
+
+const user: LayoutUser = {
+	name: 'Nicolas Vlachos',
+	email: 'nicolas@example.com',
+	avatar: 'https://i.pravatar.cc/96?img=11',
+};
+
+function renderPreviewLink({ href, children, className, target, rel }: LayoutLinkRenderProps) {
+	return <a href={href ?? '#'} className={className} target={target} rel={rel}>{children}</a>;
+}
+
+function Brand() {
+	return (
+		<div className="flex min-w-0 items-center gap-2">
+			<div className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm">
+				<Store className="size-4" aria-hidden="true" />
+			</div>
+			<div className="min-w-0">
+				<Text weight="semibold" className="truncate text-inherit">Atlas Admin</Text>
+				<Text size="xxs" type="secondary" className="truncate">Production</Text>
+			</div>
+		</div>
+	);
+}
+
+function CollapsedBrand() {
+	return (
+		<div className="flex size-8 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm">
+			<Store className="size-4" aria-hidden="true" />
+		</div>
+	);
+}
+
+export function AppSidebarShell() {
+	return (
+		<>
+			<SidebarProvider defaultOpen className="min-h-0">
+								<div className="flex h-[42rem] w-full overflow-hidden rounded-lg border border-border bg-background p-3">
+									<div className="flex min-w-0 flex-1 overflow-hidden rounded-lg border border-border bg-background shadow-sm">
+										<AppSidebar
+											className="h-full p-0"
+											surfaceClassName="bg-background"
+											headerClassName="px-4 pb-3 pt-4"
+											logoClassName="px-0"
+											logo={<Brand />}
+											collapsedLogo={<CollapsedBrand />}
+											workspaceLinks={[
+												{ label: 'Production store', url: '#/workspaces/production', icon: Store, external: false },
+												{ label: 'Sandbox', url: '#/workspaces/sandbox', icon: Store, external: false },
+											]}
+											workspaceStrings={{ label: 'Workspace', select: 'Switch workspace' }}
+											navigationGroups={groups}
+											footerNavItems={utilityItems}
+											currentUrl="#/orders/pending"
+											liveBadges={{ customers: 31, invoices: 14 }}
+											renderLink={renderPreviewLink}
+											slots={{
+												afterNavigation: (
+													<SidebarNavigationFooter items={footerItems} label="Help" currentUrl="#/orders/pending" renderLink={renderPreviewLink} />
+												),
+											}}
+										/>
+										<div className="flex min-w-0 flex-1 flex-col">
+											<Header
+												renderLink={renderPreviewLink}
+												breadcrumbs={[{ label: 'Operations', href: '#/features/activities' }, { label: 'Orders' }]}
+												centerClassName="justify-start"
+												slots={{
+													center: <HeaderSearch className="w-full max-w-sm" />,
+													right: (
+														<>
+															<HeaderNotifications unreadCount={2} notifications={[]} />
+															<Separator orientation="vertical" className="h-7" />
+															<HeaderUserMenu
+																user={user}
+																showEmail={false}
+																onProfile={() => {}}
+																onSettings={() => {}}
+																onLogout={() => {}}
+															/>
+														</>
+													),
+												}}
+											/>
+											<main className="min-w-0 flex-1 space-y-4 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', 'Awaiting stock', 'Ready to fulfill'].map((label, index) => (
+														<SmartCard key={label} padding="sm" className="shadow-sm">
+															<Text size="xs" type="secondary">{label}</Text>
+															<Text weight="semibold">{[8, 12, 36][index]}</Text>
+														</SmartCard>
+													))}
+												</div>
+											</main>
+										</div>
+									</div>
+								</div>
+							</SidebarProvider>
+		</>
+	);
+}
+
+export function NavigationPartials() {
+	return (
+		<>
+			<SidebarProvider defaultOpen className="min-h-0">
+								<div className="grid w-full gap-5 md:grid-cols-2">
+									<div className="h-[30rem] overflow-hidden rounded-xl border border-border bg-sidebar text-sidebar-foreground shadow-sm">
+										<Sidebar collapsible="none" className="w-full" surfaceClassName="bg-background">
+											<SidebarWorkspaceDropdown
+												logo={<Brand />}
+												workspaceLinks={[
+													{ label: 'Production store', url: '#/workspaces/production', icon: Store, external: false },
+													{ label: 'Sandbox', url: '#/workspaces/sandbox', icon: Store, external: false },
+												]}
+												renderLink={renderPreviewLink}
+											/>
+											<SidebarGroupedNavigation navigationByGroups={groups} currentUrl="#/customers" liveBadges={{ customers: 9 }} renderLink={renderPreviewLink} />
+										</Sidebar>
+									</div>
+
+									<div className="h-[30rem] overflow-hidden rounded-xl border border-border bg-sidebar p-2 text-sidebar-foreground shadow-sm">
+										<SidebarNavigation
+											label="Flat navigation"
+											items={[
+												{ label: 'Inbox', href: '#/inbox', icon: Inbox, badge: 6 },
+												{ label: 'Settings', href: '#/settings', icon: Settings },
+												{ label: 'Disabled item', href: '#/disabled', icon: Shield, disabled: true },
+											]}
+											currentUrl="#/inbox"
+											renderLink={renderPreviewLink}
+										/>
+										<div className="mt-4 border-t border-sidebar-border pt-3">
+											<SidebarNavigationFooter items={footerItems} label="Help" currentUrl="#/orders/pending" renderLink={renderPreviewLink} />
+											<SidebarNavigationFooter items={utilityItems} currentUrl="#/orders/pending" renderLink={renderPreviewLink} />
+										</div>
+									</div>
+								</div>
+							</SidebarProvider>
+		</>
+	);
+}
+
+export function CustomRowRenderer() {
+	return (
+		<>
+			<SidebarProvider defaultOpen className="min-h-0">
+								<div className="rounded-xl border border-border bg-sidebar p-3 text-sidebar-foreground shadow-sm">
+									<SidebarNavigation
+										label="Custom renderItem"
+										items={[
+											{ label: 'Priority inbox', href: '#/priority', icon: Inbox, badge: 3 },
+											{ label: 'Billing review', href: '#/billing', icon: CreditCard, badge: 11 },
+										]}
+										renderLink={renderPreviewLink}
+										renderItem={(item, context) => (
+											<SidebarMenuItem>
+												<div className="flex items-center justify-between rounded-lg px-3 py-2 hover:bg-sidebar-accent">
+													<div>
+														<Text weight="medium" className="text-inherit">{item.label}</Text>
+														<Text size="xxs" type="secondary">active: {String(context.active)}</Text>
+													</div>
+													{!!context.badge && <Badge variant="primary">{context.badge}</Badge>}
+												</div>
+											</SidebarMenuItem>
+										)}
+									/>
+								</div>
+							</SidebarProvider>
+		</>
+	);
+}
+`;function Q(e){return fe||$(`Examples`,!1),J||$(`Examples.AppSidebarShell`,!0),X||$(`Examples.CustomRowRenderer`,!0),Y||$(`Examples.NavigationPartials`,!0),(0,V.jsx)(o,{title:`Layout · Sidebar`,description:`Full app sidebar assembly plus reusable navigation, workspace, and footer item partials.`,layer:`layout`,status:`ready`,children:(0,V.jsxs)(s,{title:`Examples`,id:`examples`,children:[(0,V.jsx)(c,{name:`AppSidebarShell`,source:Z,children:(0,V.jsx)(J,{})}),(0,V.jsx)(c,{name:`NavigationPartials`,source:Z,children:(0,V.jsx)(Y,{})}),(0,V.jsx)(c,{name:`CustomRowRenderer`,source:Z,children:(0,V.jsx)(X,{})})]})})}function he(e={}){let{wrapper:t}=e.components||{};return t?(0,V.jsx)(t,{...e,children:(0,V.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{he as default};