admin-ui-starter-kit 0.1.4 → 0.4.2

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

@@ -1,170 +0,0 @@
-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

@@ -1,122 +0,0 @@
-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

@@ -1,224 +0,0 @@
-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};