admin-ui-starter-kit 0.4.5 → 0.5.0

package/dist/showcase/assets/layout-app-shell-BkqOwNe9.js

@@ -0,0 +1,608 @@
+import{n as e,r as t}from"./chunk-QTnfLwEv.js";import{n}from"./react-dom-Bz4cALsF.js";import{Dr as r,Er as i,Rr as a,jr as o,r as s,t as c}from"./example-CbMg22fx.js";import{t as l}from"./briefcase-DNJAkTSQ.js";import{t as u}from"./chart-column-BAuLvocu.js";import{n as d,t as f}from"./header-notifications-fOFoqfCR.js";import{t as p}from"./credit-card-CoIW8_5L.js";import{t as m}from"./external-link-C4QW5KPr.js";import{t as h}from"./file-text-B21ZcL9w.js";import{t as g}from"./house-CnsMNKdQ.js";import{t as _}from"./inbox-BcbV9uGN.js";import{r as v,t as y,y as b}from"./sidebar.context-BhexAjPM.js";import{t as x}from"./package-C9EnWNEP.js";import{t as S}from"./plus-PKSdX45c.js";import{t as C}from"./settings-Mbnp6hDe.js";import{t as w}from"./shield-D084AWSl.js";import{n as T,t as E}from"./global-search-DSMNBBiZ.js";import{t as D}from"./user-BCzeUL5p.js";import{t as O}from"./users-DOGJZmUN.js";import{n as k,s as ee}from"./index-DNH0y0r-.js";import{t as te}from"./props-table-DSdjPLVr.js";import{t as A}from"./smart-card-DpvRHqI9.js";import{t as ne}from"./metric-grid-DJZjbFrm.js";import{t as re}from"./separator-kwh2KDqD.js";import{r as ie}from"./fetchers-DHuMQ6PN.js";import{c as ae,i as j,n as M,r as N,t as P,u as F}from"./item-CdgzxWcL.js";import{t as oe}from"./app-sidebar-C9tjHr7T.js";import{t as I}from"./page-header-DoZnb9z9.js";var L=ee(),se={light:`light`,dark:`dark`};function R({children:e,headerTheme:t=`light`,sidebarSide:n=`left`,mobileSidebarMode:r=`drawer`,headerHeight:i,sidebarWidth:a,sidebarTrigger:o,logo:s,headerActions:c,sidebar:l,slots:u,contentAs:d=`main`,className:f,headerClassName:p,headerInnerClassName:m,bodyClassName:h,sidebarClassName:g,contentClassName:_,style:v,...y}){let b={...i?{"--app-shell-header-height":i}:null,...a?{"--app-shell-sidebar-width-expanded":a}:null,...v},x=u?.sidebarTrigger??o,S=u?.logo??s,C=u?.headerActions??c,w=u?.sidebar??l,T=u?.content??e,E=!!w,D=(0,L.jsx)(d,{className:k(`topbar-sidebar-layout--content min-h-0 min-w-0 flex-1 overflow-auto bg-background`,_),children:T}),O=E?(0,L.jsx)(`aside`,{className:k(`topbar-sidebar-layout--sidebar min-h-0 min-w-0 overflow-hidden border-border bg-sidebar text-sidebar-foreground`,r===`drawer`?`hidden md:block`:`border-b md:border-b-0`,g),children:w}):null;return(0,L.jsxs)(`div`,{className:k(`topbar-sidebar-layout--component flex min-h-svh flex-col overflow-hidden bg-background text-foreground`,`[--app-shell-sidebar-width-expanded:var(--app-shell-sidebar-width)]`,`[--app-shell-sidebar-width-current:var(--app-shell-sidebar-width-expanded)]`,`[--sidebar-width:var(--app-shell-sidebar-width-expanded)]`,`has-[[data-slot=sidebar][data-collapsible=icon]]:[--app-shell-sidebar-width-current:var(--sidebar-width-icon)]`,`has-[[data-slot=sidebar][data-collapsible=offcanvas]]:[--app-shell-sidebar-width-current:0rem]`,f),style:b,"data-header-theme":t,"data-sidebar-side":n,"data-mobile-sidebar-mode":r,...y,children:[(0,L.jsx)(`header`,{className:k(`topbar-sidebar-layout--header z-40 flex min-h-[var(--app-shell-header-height)] shrink-0 items-center border-b border-border bg-background px-4 text-foreground`,se[t],p),children:(0,L.jsx)(`div`,{className:k(`topbar-sidebar-layout--header-inner flex min-h-10 w-full min-w-0 items-center gap-3 md:gap-4`,m),children:u?.header??(0,L.jsxs)(L.Fragment,{children:[!!x&&(0,L.jsx)(`div`,{className:`topbar-sidebar-layout--sidebar-trigger flex shrink-0 items-center`,children:x}),!!S&&(0,L.jsx)(`div`,{className:`topbar-sidebar-layout--logo flex min-w-0 shrink-0 items-center`,children:S}),!!u?.headerStart&&(0,L.jsx)(`div`,{className:`topbar-sidebar-layout--header-start flex min-w-0 items-center`,children:u.headerStart}),!!u?.headerCenter&&(0,L.jsx)(`div`,{className:`topbar-sidebar-layout--header-center hidden min-w-0 flex-1 items-center md:flex`,children:u.headerCenter}),!!(C||u?.headerEnd)&&(0,L.jsxs)(`div`,{className:`topbar-sidebar-layout--header-trailing ml-auto flex shrink-0 items-center gap-1.5 md:gap-2`,children:[!!C&&(0,L.jsx)(`div`,{className:`topbar-sidebar-layout--header-actions flex shrink-0 items-center gap-1.5 md:gap-2`,children:C}),!!u?.headerEnd&&(0,L.jsx)(`div`,{className:`topbar-sidebar-layout--header-end flex shrink-0 items-center gap-1.5 md:gap-2`,children:u.headerEnd})]})]})})}),(0,L.jsx)(`div`,{className:k(`topbar-sidebar-layout--body grid min-h-0 flex-1 grid-cols-1`,E&&(n===`left`?`md:grid-cols-[var(--app-shell-sidebar-width-current)_minmax(0,1fr)]`:`md:grid-cols-[minmax(0,1fr)_var(--app-shell-sidebar-width-current)]`),h),children:n===`left`?(0,L.jsxs)(L.Fragment,{children:[O,D]}):(0,L.jsxs)(L.Fragment,{children:[D,O]})})]})}var ce=e({DarkHeaderLeftSidebar:()=>X,LightHeaderRightSidebar:()=>Z}),z=t(n(),1),le={Platform:[{label:`Dashboard`,href:`#/dashboard`,icon:g,handle:`dashboard`},{label:`Customers`,href:`#/customers`,icon:O,handle:`customers`,badge:31},{label:`Orders`,href:`#/orders`,icon:x,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`}]},ue=[{label:`Inbox`,href:`#/inbox`,icon:_,handle:`inbox`,badge:4},{label:`Settings`,href:`#/settings`,icon:C,handle:`settings`},{label:`Docs`,href:`https://example.com`,icon:m,handle:`docs`,external:!0}],de=[{id:`sync`,title:`Order sync completed`,description:`36 orders reconciled across two markets.`,time:`4 min ago`,tone:`success`,read:!1},{id:`risk`,title:`Manual review required`,description:`Three high-value orders need approval.`,time:`22 min ago`,tone:`warning`,read:!1}],fe={name:`Nicolas Vlachos`,email:`nicolas@example.com`,avatar:`https://i.pravatar.cc/96?img=11`},B={customer:`Customers`,order:`Orders`,voucher:`Vouchers`,team:`Team`},V={customer:D,order:h,voucher:T,team:l},pe={customer:`primary`,order:`info`,voucher:`success`,team:`warning`},H={customer:`info`,order:`secondary`,voucher:`success`,team:`warning`},me=`size-[var(--app-shell-header-control-size)] rounded-lg border border-border bg-accent text-foreground shadow-none hover:bg-accent data-[state=open]:bg-accent [&>svg]:size-4`,he=`h-[var(--app-shell-header-control-size)] text-foreground hover:bg-accent data-[state=open]:bg-accent max-md:size-[var(--app-shell-header-control-size)] max-md:justify-center max-md:p-0 max-md:[&_.header-user-menu--avatar]:size-7 max-md:[&_.header-user-menu--identity]:hidden max-md:[&_.header-user-menu--chevron]:hidden`,ge=`light !ring-border/70`,U=`w-full min-w-0 max-w-[72rem] min-h-0 rounded-md border border-border shadow-sm`,_e=[{title:`Stripe payout mismatch`,meta:`Payments / due 11:30`},{title:`Address verification`,meta:`Risk review / awaiting customer`},{title:`Large quantity approval`,meta:`Operations / high-value order`},{title:`Supplier hold`,meta:`Inventory / split fulfillment`}],ve=[{title:`Payout batch`,meta:`North America / 36 invoices`,status:`Ready`,variant:`success`,icon:p},{title:`Tax export`,meta:`EU marketplaces / Q2 review`,status:`Review`,variant:`warning`,icon:h},{title:`Risk controls`,meta:`Three orders above manual threshold`,status:`Active`,variant:`info`,icon:w},{title:`Forecast delta`,meta:`Revenue plan is 4.8% above baseline`,status:`Live`,variant:`secondary`,icon:u}],ye=[{id:`revenue`,label:`Revenue`,value:24820,valueType:`currency`,currency:`USD`,change:{value:`12.4%`,direction:`up`},icon:p,subtitle:`This month`},{id:`manual-review`,label:`Manual review`,value:8,valueType:`number`,icon:w,subtitle:`High-value orders`},{id:`ready-to-fulfill`,label:`Ready to fulfill`,value:36,valueType:`number`,icon:x,subtitle:`Queued today`}];function W({href:e,children:t,className:n,target:r,rel:i}){return(0,L.jsx)(`a`,{href:e??`#`,className:n,target:r,rel:i,children:t})}function be(e){return{id:e.id,title:e.title,subtitle:e.subtitle,group:e.type,thumbnail:{icon:V[e.type],tone:pe[e.type]},badge:{label:B[e.type],tone:H[e.type]},data:e}}function xe(e,t){let n=V[e.group];return(0,L.jsxs)(P,{size:`xs`,render:(0,L.jsx)(`button`,{type:`button`,onClick:t.onSelect}),className:k(`rounded-lg px-3 py-2 text-left hover:bg-accent hover:text-accent-foreground`,t.isActive&&`bg-accent text-accent-foreground`),children:[(0,L.jsx)(ae,{variant:`icon`,className:`size-7 rounded-md bg-muted text-muted-foreground`,children:(0,L.jsx)(n,{className:`size-4`,"aria-hidden":`true`})}),(0,L.jsxs)(N,{children:[(0,L.jsx)(F,{children:e.title}),(0,L.jsx)(j,{clamp:1,children:e.subtitle})]}),(0,L.jsx)(M,{children:(0,L.jsx)(o,{variant:H[e.group],children:B[e.group]})})]})}function G({enableShortcut:e=!0}={}){let[t,n]=(0,z.useState)(!1),[r,i]=(0,z.useState)(``),[a,o]=(0,z.useState)([]),[s,c]=(0,z.useState)(!1),[l,u]=(0,z.useState)(null),f=(0,z.useMemo)(()=>B,[]);(0,z.useEffect)(()=>{let e=r.trim();if(e.length<=1){o([]),c(!1);return}let t=!1;return c(!0),ie(e).then(e=>{t||(o(e.map(be)),c(!1))}),()=>{t=!0}},[r]);let p=()=>{n(!1),i(``),o([]),c(!1)},m=e=>{i(e)};return{trigger:(0,L.jsx)(d,{className:`h-[var(--app-shell-header-control-size)] min-w-0 max-w-72`,enableShortcut:e,onOpen:()=>n(!0),strings:{placeholder:l?`Search again`:`Search`}}),overlay:t?(0,L.jsx)(`div`,{className:`fixed inset-0 z-50 flex items-start justify-center bg-foreground/50 px-4 pt-24 backdrop-blur-[1px]`,onMouseDown:e=>{e.target===e.currentTarget&&p()},children:(0,L.jsx)(`div`,{className:`w-full max-w-2xl`,children:(0,L.jsx)(E,{query:r,onQueryChange:m,results:a,loading:s,groupLabels:f,autoFocus:!0,onClose:p,onResultSelect:e=>{u(e.title),p()},idleSections:[{id:`shortcuts`,label:`Suggested searches`,items:[{id:`orders`,label:`pending orders`,icon:x,onSelect:()=>m(`pending`)},{id:`customers`,label:`customers in Berlin`,icon:O,onSelect:()=>m(`Berlin`)},{id:`team`,label:`team admins`,icon:w,onSelect:()=>m(`admin`)}]}],slots:{renderResult:xe},strings:{placeholder:`Search workspace`,loading:`Searching workspace...`}})})}):null,selectedLabel:l}}function Se({name:e=`Atlas Admin`,description:t=`Production workspace`,logoSrc:n=`/favicon.svg`,fullLogoSrc:r}){return r?(0,L.jsx)(`img`,{src:r,alt:e,className:`h-9 max-w-40 shrink-0 object-contain`}):(0,L.jsxs)(`div`,{className:`flex min-w-0 items-center gap-3`,children:[(0,L.jsx)(`div`,{className:`flex size-[var(--app-shell-header-control-size)] shrink-0 items-center justify-center rounded-lg bg-card text-card-foreground shadow-sm ring-1 ring-border`,children:(0,L.jsx)(`img`,{src:n,alt:``,className:`size-5 object-contain`,"aria-hidden":`true`})}),(0,L.jsxs)(`div`,{className:`hidden min-w-0 sm:block`,children:[(0,L.jsx)(a,{weight:`semibold`,className:`truncate text-inherit`,children:e}),(0,L.jsx)(a,{size:`xxs`,type:`secondary`,className:`truncate`,children:t})]})]})}function Ce(){return(0,L.jsxs)(`div`,{className:`flex h-[var(--app-shell-header-control-size)] shrink-0 items-center gap-2`,children:[(0,L.jsx)(`img`,{src:`/favicon.svg`,alt:``,className:`size-6 object-contain`,"aria-hidden":`true`}),(0,L.jsx)(a,{weight:`semibold`,className:`text-inherit`,children:`Atlas`})]})}function K(){return(0,L.jsx)(b,{className:me})}function q({currentUrl:e,collapsible:t=`icon`,side:n=`left`}){return(0,L.jsx)(oe,{collapsible:t,side:n,className:`h-full`,surfaceClassName:`border-0 bg-sidebar`,contentClassName:`bg-sidebar`,navigationGroups:le,footerNavItems:ue,footerLabel:`Utilities`,currentUrl:e,liveBadges:{customers:42,invoices:14},renderLink:W})}function J({divider:e=!1,menuSurface:t=`dark`}){let n=t===`light`?ge:void 0;return(0,L.jsxs)(L.Fragment,{children:[(0,L.jsx)(f,{notifications:de,unreadCount:2,renderLink:W,className:me,contentClassName:n}),e&&(0,L.jsx)(re,{orientation:`vertical`,className:`hidden h-7 bg-border md:block`}),(0,L.jsx)(v,{user:fe,showEmail:!1,triggerClassName:he,contentClassName:n,onProfile:()=>{},onSettings:()=>{},onLogout:()=>{}})]})}function Y(){return(0,L.jsx)(ne,{metrics:ye,variant:`bordered`,size:`sm`,columns:3,gap:`sm`,showSparklines:!1})}function we(){return(0,L.jsxs)(A,{padding:`sm`,className:`shadow-sm`,children:[(0,L.jsxs)(`div`,{className:`flex items-center justify-between gap-3 border-b border-border pb-3`,children:[(0,L.jsxs)(`div`,{children:[(0,L.jsx)(a,{weight:`semibold`,children:`Review queue`}),(0,L.jsx)(a,{size:`xs`,type:`secondary`,children:`Exceptions that affect fulfillment and payout timing.`})]}),(0,L.jsx)(o,{variant:`warning`,children:`8 pending`})]}),(0,L.jsx)(`div`,{className:`divide-y divide-border`,children:_e.map(e=>(0,L.jsxs)(P,{size:`sm`,className:`px-0 py-3`,children:[(0,L.jsxs)(N,{children:[(0,L.jsx)(F,{children:e.title}),(0,L.jsx)(j,{clamp:1,children:e.meta})]}),(0,L.jsx)(M,{children:(0,L.jsx)(s,{variant:`secondary`,buttonStyle:`outline`,size:`xs`,children:`Open`})})]},e.title))})]})}function Te(){return(0,L.jsxs)(A,{padding:`sm`,className:`shadow-sm`,children:[(0,L.jsxs)(`div`,{className:`flex items-start justify-between gap-3 border-b border-border pb-2.5`,children:[(0,L.jsxs)(`div`,{className:`min-w-0`,children:[(0,L.jsx)(a,{weight:`semibold`,children:`Settlement signals`}),(0,L.jsx)(a,{size:`xs`,type:`secondary`,className:`mt-1`,children:`Current finance checkpoints with owner-ready statuses.`})]}),(0,L.jsx)(o,{variant:`info`,children:`4 live`})]}),(0,L.jsx)(`div`,{className:`grid gap-2 pt-3 md:grid-cols-2`,children:ve.map(e=>{let t=e.icon;return(0,L.jsxs)(P,{size:`sm`,className:`rounded-md border border-border bg-background/60 px-3 py-2.5`,children:[(0,L.jsx)(ae,{variant:`icon`,className:`size-8 rounded-md bg-muted text-muted-foreground`,children:(0,L.jsx)(t,{className:`size-4`,"aria-hidden":`true`})}),(0,L.jsxs)(N,{children:[(0,L.jsx)(F,{children:e.title}),(0,L.jsx)(j,{clamp:1,children:e.meta})]}),(0,L.jsx)(M,{children:(0,L.jsx)(o,{variant:e.variant,children:e.status})})]},e.title)})})]})}function X(){let e=G();return(0,L.jsx)(y,{defaultOpen:!0,className:`min-h-0`,children:(0,L.jsx)(R,{headerTheme:`dark`,className:k(`h-[44rem]`,U),sidebarTrigger:(0,L.jsx)(K,{}),logo:(0,L.jsx)(Se,{}),sidebar:(0,L.jsx)(q,{currentUrl:`#/orders/pending`}),headerActions:(0,L.jsx)(s,{variant:`secondary`,buttonStyle:`outline`,icon:S,className:`hidden h-[var(--app-shell-header-control-size)] rounded-lg md:inline-flex`,children:`New order`}),slots:{headerCenter:e.trigger,headerEnd:(0,L.jsx)(J,{divider:!0})},children:(0,L.jsxs)(`div`,{className:`space-y-4 p-4`,children:[e.overlay,(0,L.jsx)(I,{title:`Pending orders`,description:`Exceptions, holds, and stock checks that need attention before cutoff.`,headingTag:`h3`,titleBadges:[{label:`Live`,variant:`success`}],actions:(0,L.jsx)(s,{variant:`primary`,icon:w,children:`Approve batch`})}),(0,L.jsx)(Y,{}),!!e.selectedLabel&&(0,L.jsxs)(A,{padding:`sm`,className:`border-info/30 bg-info/5 shadow-sm`,children:[(0,L.jsx)(a,{size:`xs`,type:`secondary`,children:`Last selected search result`}),(0,L.jsx)(a,{weight:`semibold`,children:e.selectedLabel})]}),(0,L.jsx)(we,{})]})})})}function Z(){let e=G({enableShortcut:!1});return(0,L.jsx)(y,{defaultOpen:!0,className:`min-h-0`,children:(0,L.jsx)(R,{headerTheme:`light`,sidebarSide:`right`,sidebarWidth:`18rem`,className:k(`h-[42rem]`,U),sidebarTrigger:(0,L.jsx)(K,{}),logo:(0,L.jsx)(Ce,{}),sidebar:(0,L.jsx)(q,{currentUrl:`#/reports`,side:`right`}),slots:{headerCenter:e.trigger,headerEnd:(0,L.jsx)(J,{menuSurface:`light`})},children:(0,L.jsxs)(`div`,{className:`space-y-4 p-4`,children:[e.overlay,(0,L.jsx)(I,{title:`Finance reports`,description:`Revenue, invoices, and payout signals with navigation on the right.`,headingTag:`h3`,titleBadges:[{label:`Right rail`,variant:`info`}]}),(0,L.jsx)(Y,{}),(0,L.jsxs)(A,{padding:`sm`,className:`shadow-sm`,children:[(0,L.jsx)(a,{weight:`semibold`,children:`Report activity`}),(0,L.jsx)(a,{size:`xs`,type:`secondary`,className:`mt-1`,children:`Finance work stays in the content region while the right rail handles navigation.`})]}),(0,L.jsx)(Te,{})]})})})}var Q=`import { BarChart3, Briefcase, CreditCard, ExternalLink, FileText, Home, Inbox, Package, Plus, Settings, Shield, Ticket, User, Users } from 'lucide-react';
+import { useEffect, useMemo, useState } from 'react';
+
+import { Badge } from '@/components/base/badge';
+import { Button } from '@/components/base/buttons';
+import { SmartCard } from '@/components/base/cards';
+import { Separator } from '@/components/base/display/separator';
+import { SidebarTrigger } from '@/components/base/sidebar';
+import { MetricGrid, type MetricData } from '@/components/composed/analytics';
+import {
+	Item,
+	ItemActions,
+	ItemContent,
+	ItemDescription,
+	ItemMedia,
+	ItemTitle,
+} from '@/components/base/item';
+import {
+	GlobalSearch,
+	type GlobalSearchRenderResultContext,
+	type GlobalSearchResult,
+} from '@/components/features/global-search';
+import { Text } from '@/components/typography';
+import type { HeaderNotification } from '@/components/layout/header';
+import { HeaderNotifications, HeaderSearch, HeaderUserMenu } from '@/components/layout/header';
+import type { LayoutLinkRenderProps, LayoutUser } from '@/components/layout';
+import { TopbarSidebarLayout } from '@/components/layout/app-shell';
+import { PageHeader } from '@/components/layout/page';
+import {
+	AppSidebar,
+	SidebarProvider,
+	type AppSidebarProps,
+	type SidebarNavItem,
+} from '@/components/layout/sidebar';
+import { mockSearch, type MockSearchResult } from '@/preview/_mocks';
+import { cn } from '@/lib/utils';
+
+const navigationGroups: Record<string, SidebarNavItem[]> = {
+	Platform: [
+		{ label: 'Dashboard', href: '#/dashboard', icon: Home, handle: 'dashboard' },
+		{ label: 'Customers', href: '#/customers', icon: Users, handle: 'customers', badge: 31 },
+		{
+			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: 'Inbox', href: '#/inbox', icon: Inbox, handle: 'inbox', badge: 4 },
+	{ label: 'Settings', href: '#/settings', icon: Settings, handle: 'settings' },
+	{ label: 'Docs', href: 'https://example.com', icon: ExternalLink, handle: 'docs', external: true },
+];
+
+const notifications: HeaderNotification[] = [
+	{
+		id: 'sync',
+		title: 'Order sync completed',
+		description: '36 orders reconciled across two markets.',
+		time: '4 min ago',
+		tone: 'success',
+		read: false,
+	},
+	{
+		id: 'risk',
+		title: 'Manual review required',
+		description: 'Three high-value orders need approval.',
+		time: '22 min ago',
+		tone: 'warning',
+		read: false,
+	},
+];
+
+const user: LayoutUser = {
+	name: 'Nicolas Vlachos',
+	email: 'nicolas@example.com',
+	avatar: 'https://i.pravatar.cc/96?img=11',
+};
+
+type SearchGroup = MockSearchResult['type'];
+
+const SEARCH_GROUP_LABEL: Record<SearchGroup, string> = {
+	customer: 'Customers',
+	order: 'Orders',
+	voucher: 'Vouchers',
+	team: 'Team',
+};
+
+const SEARCH_GROUP_ICON = {
+	customer: User,
+	order: FileText,
+	voucher: Ticket,
+	team: Briefcase,
+} as const;
+
+const SEARCH_GROUP_TONE = {
+	customer: 'primary',
+	order: 'info',
+	voucher: 'success',
+	team: 'warning',
+} as const;
+
+const BADGE_VARIANT = {
+	customer: 'info',
+	order: 'secondary',
+	voucher: 'success',
+	team: 'warning',
+} as const;
+
+const HEADER_CONTROL_CLASS = 'size-[var(--app-shell-header-control-size)] rounded-lg border border-border bg-accent text-foreground shadow-none hover:bg-accent data-[state=open]:bg-accent [&>svg]:size-4';
+const HEADER_USER_TRIGGER_CLASS = 'h-[var(--app-shell-header-control-size)] text-foreground hover:bg-accent data-[state=open]:bg-accent max-md:size-[var(--app-shell-header-control-size)] max-md:justify-center max-md:p-0 max-md:[&_.header-user-menu--avatar]:size-7 max-md:[&_.header-user-menu--identity]:hidden max-md:[&_.header-user-menu--chevron]:hidden';
+// Portalled menus from the light header render outside the header's \`.light\`
+// scope, so re-apply the light palette on the menu content with the scope class.
+const HEADER_LIGHT_MENU_CONTENT_CLASS = 'light !ring-border/70';
+const SHELL_PREVIEW_FRAME_CLASS = 'w-full min-w-0 max-w-[72rem] min-h-0 rounded-md border border-border shadow-sm';
+
+const queueItems = [
+	{ title: 'Stripe payout mismatch', meta: 'Payments / due 11:30' },
+	{ title: 'Address verification', meta: 'Risk review / awaiting customer' },
+	{ title: 'Large quantity approval', meta: 'Operations / high-value order' },
+	{ title: 'Supplier hold', meta: 'Inventory / split fulfillment' },
+];
+
+const financeSignals = [
+	{
+		title: 'Payout batch',
+		meta: 'North America / 36 invoices',
+		status: 'Ready',
+		variant: 'success',
+		icon: CreditCard,
+	},
+	{
+		title: 'Tax export',
+		meta: 'EU marketplaces / Q2 review',
+		status: 'Review',
+		variant: 'warning',
+		icon: FileText,
+	},
+	{
+		title: 'Risk controls',
+		meta: 'Three orders above manual threshold',
+		status: 'Active',
+		variant: 'info',
+		icon: Shield,
+	},
+	{
+		title: 'Forecast delta',
+		meta: 'Revenue plan is 4.8% above baseline',
+		status: 'Live',
+		variant: 'secondary',
+		icon: BarChart3,
+	},
+] as const;
+
+const shellMetrics: MetricData[] = [
+	{
+		id: 'revenue',
+		label: 'Revenue',
+		value: 24820,
+		valueType: 'currency',
+		currency: 'USD',
+		change: { value: '12.4%', direction: 'up' },
+		icon: CreditCard,
+		subtitle: 'This month',
+	},
+	{
+		id: 'manual-review',
+		label: 'Manual review',
+		value: 8,
+		valueType: 'number',
+		icon: Shield,
+		subtitle: 'High-value orders',
+	},
+	{
+		id: 'ready-to-fulfill',
+		label: 'Ready to fulfill',
+		value: 36,
+		valueType: 'number',
+		icon: Package,
+		subtitle: 'Queued today',
+	},
+];
+
+function renderPreviewLink({ href, children, className, target, rel }: LayoutLinkRenderProps) {
+	return <a href={href ?? '#'} className={className} target={target} rel={rel}>{children}</a>;
+}
+
+function toSearchResult(result: MockSearchResult): GlobalSearchResult<SearchGroup> {
+	return {
+		id: result.id,
+		title: result.title,
+		subtitle: result.subtitle,
+		group: result.type,
+		thumbnail: {
+			icon: SEARCH_GROUP_ICON[result.type],
+			tone: SEARCH_GROUP_TONE[result.type],
+		},
+		badge: {
+			label: SEARCH_GROUP_LABEL[result.type],
+			tone: BADGE_VARIANT[result.type],
+		},
+		data: result,
+	};
+}
+
+function renderSearchResult(
+	result: GlobalSearchResult<SearchGroup>,
+	context: GlobalSearchRenderResultContext,
+) {
+	const Icon = SEARCH_GROUP_ICON[result.group];
+
+	return (
+		<Item
+			size="xs"
+			render={<button type="button" onClick={context.onSelect} />}
+			className={cn(
+				'rounded-lg px-3 py-2 text-left hover:bg-accent hover:text-accent-foreground',
+				context.isActive && 'bg-accent text-accent-foreground',
+			)}
+		>
+			<ItemMedia variant="icon" className="size-7 rounded-md bg-muted text-muted-foreground">
+				<Icon className="size-4" aria-hidden="true" />
+			</ItemMedia>
+			<ItemContent>
+				<ItemTitle>{result.title}</ItemTitle>
+				<ItemDescription clamp={1}>{result.subtitle}</ItemDescription>
+			</ItemContent>
+			<ItemActions>
+				<Badge variant={BADGE_VARIANT[result.group]}>{SEARCH_GROUP_LABEL[result.group]}</Badge>
+			</ItemActions>
+		</Item>
+	);
+}
+
+function useAppShellSearch({ enableShortcut = true }: { enableShortcut?: boolean } = {}) {
+	const [open, setOpen] = useState(false);
+	const [query, setQuery] = useState('');
+	const [results, setResults] = useState<Array<GlobalSearchResult<SearchGroup>>>([]);
+	const [loading, setLoading] = useState(false);
+	const [selectedLabel, setSelectedLabel] = useState<string | null>(null);
+	const groupLabels = useMemo(() => SEARCH_GROUP_LABEL, []);
+
+	useEffect(() => {
+		const trimmed = query.trim();
+		if (trimmed.length <= 1) {
+			setResults([]);
+			setLoading(false);
+			return;
+		}
+
+		let cancelled = false;
+		setLoading(true);
+		mockSearch(trimmed).then((rows) => {
+			if (cancelled) return;
+			setResults(rows.map(toSearchResult));
+			setLoading(false);
+		});
+
+		return () => {
+			cancelled = true;
+		};
+	}, [query]);
+
+	const closeSearch = () => {
+		setOpen(false);
+		setQuery('');
+		setResults([]);
+		setLoading(false);
+	};
+
+	const handleSearch = (nextQuery: string) => {
+		setQuery(nextQuery);
+	};
+
+	const trigger = (
+		<HeaderSearch
+			className="h-[var(--app-shell-header-control-size)] min-w-0 max-w-72"
+			enableShortcut={enableShortcut}
+			onOpen={() => setOpen(true)}
+			strings={{
+				placeholder: selectedLabel ? 'Search again' : 'Search',
+			}}
+		/>
+	);
+
+	const overlay = open ? (
+		<div
+			className="fixed inset-0 z-50 flex items-start justify-center bg-foreground/50 px-4 pt-24 backdrop-blur-[1px]"
+			onMouseDown={(event) => {
+				if (event.target === event.currentTarget) closeSearch();
+			}}
+		>
+			<div className="w-full max-w-2xl">
+				<GlobalSearch<SearchGroup>
+					query={query}
+					onQueryChange={handleSearch}
+					results={results}
+					loading={loading}
+					groupLabels={groupLabels}
+					autoFocus
+					onClose={closeSearch}
+					onResultSelect={(result) => {
+						setSelectedLabel(result.title);
+						closeSearch();
+					}}
+					idleSections={[
+						{
+							id: 'shortcuts',
+							label: 'Suggested searches',
+							items: [
+								{ id: 'orders', label: 'pending orders', icon: Package, onSelect: () => handleSearch('pending') },
+								{ id: 'customers', label: 'customers in Berlin', icon: Users, onSelect: () => handleSearch('Berlin') },
+								{ id: 'team', label: 'team admins', icon: Shield, onSelect: () => handleSearch('admin') },
+							],
+						},
+					]}
+					slots={{ renderResult: renderSearchResult }}
+					strings={{
+						placeholder: 'Search workspace',
+						loading: 'Searching workspace...',
+					}}
+				/>
+			</div>
+		</div>
+	) : null;
+
+	return { trigger, overlay, selectedLabel };
+}
+
+interface HeaderLogoProps {
+	name?: string;
+	description?: string;
+	logoSrc?: string;
+	fullLogoSrc?: string;
+}
+
+function HeaderLogo({
+	name = 'Atlas Admin',
+	description = 'Production workspace',
+	logoSrc = '/favicon.svg',
+	fullLogoSrc,
+}: HeaderLogoProps) {
+	if (fullLogoSrc) {
+		return (
+			<img
+				src={fullLogoSrc}
+				alt={name}
+				className="h-9 max-w-40 shrink-0 object-contain"
+			/>
+		);
+	}
+
+	return (
+		<div className="flex min-w-0 items-center gap-3">
+			<div className="flex size-[var(--app-shell-header-control-size)] shrink-0 items-center justify-center rounded-lg bg-card text-card-foreground shadow-sm ring-1 ring-border">
+				<img src={logoSrc} alt="" className="size-5 object-contain" aria-hidden="true" />
+			</div>
+			<div className="hidden min-w-0 sm:block">
+				<Text weight="semibold" className="truncate text-inherit">{name}</Text>
+				<Text size="xxs" type="secondary" className="truncate">{description}</Text>
+			</div>
+		</div>
+	);
+}
+
+function FullLogo() {
+	return (
+		<div className="flex h-[var(--app-shell-header-control-size)] shrink-0 items-center gap-2">
+			<img src="/favicon.svg" alt="" className="size-6 object-contain" aria-hidden="true" />
+			<Text weight="semibold" className="text-inherit">Atlas</Text>
+		</div>
+	);
+}
+
+function AppShellSidebarTrigger() {
+	return (
+		<SidebarTrigger
+			className={HEADER_CONTROL_CLASS}
+		/>
+	);
+}
+
+function SidebarColumn({
+	currentUrl,
+	collapsible = 'icon',
+	side = 'left',
+}: {
+	currentUrl: string;
+	collapsible?: AppSidebarProps['collapsible'];
+	side?: AppSidebarProps['side'];
+}) {
+	return (
+		<AppSidebar
+			collapsible={collapsible}
+			side={side}
+			className="h-full"
+			surfaceClassName="border-0 bg-sidebar"
+			contentClassName="bg-sidebar"
+			navigationGroups={navigationGroups}
+			footerNavItems={footerItems}
+			footerLabel="Utilities"
+			currentUrl={currentUrl}
+			liveBadges={{ customers: 42, invoices: 14 }}
+			renderLink={renderPreviewLink}
+		/>
+	);
+}
+
+function HeaderEnd({
+	divider = false,
+	menuSurface = 'dark',
+}: {
+	divider?: boolean;
+	menuSurface?: 'dark' | 'light';
+}) {
+	const menuContentClassName = menuSurface === 'light' ? HEADER_LIGHT_MENU_CONTENT_CLASS : undefined;
+
+	return (
+		<>
+			<HeaderNotifications
+				notifications={notifications}
+				unreadCount={2}
+				renderLink={renderPreviewLink}
+				className={HEADER_CONTROL_CLASS}
+				contentClassName={menuContentClassName}
+			/>
+			{divider && (
+				<Separator orientation="vertical" className="hidden h-7 bg-border md:block" />
+			)}
+			<HeaderUserMenu
+				user={user}
+				showEmail={false}
+				triggerClassName={HEADER_USER_TRIGGER_CLASS}
+				contentClassName={menuContentClassName}
+				onProfile={() => {}}
+				onSettings={() => {}}
+				onLogout={() => {}}
+			/>
+		</>
+	);
+}
+
+function MetricsGrid() {
+	return (
+		<MetricGrid
+			metrics={shellMetrics}
+			variant="bordered"
+			size="sm"
+			columns={3}
+			gap="sm"
+			showSparklines={false}
+		/>
+	);
+}
+
+function WorkQueue() {
+	return (
+		<SmartCard padding="sm" className="shadow-sm">
+			<div className="flex items-center justify-between gap-3 border-b border-border pb-3">
+				<div>
+					<Text weight="semibold">Review queue</Text>
+					<Text size="xs" type="secondary">Exceptions that affect fulfillment and payout timing.</Text>
+				</div>
+				<Badge variant="warning">8 pending</Badge>
+			</div>
+			<div className="divide-y divide-border">
+				{queueItems.map((item) => (
+					<Item key={item.title} size="sm" className="px-0 py-3">
+						<ItemContent>
+							<ItemTitle>{item.title}</ItemTitle>
+							<ItemDescription clamp={1}>{item.meta}</ItemDescription>
+						</ItemContent>
+						<ItemActions>
+							<Button variant="secondary" buttonStyle="outline" size="xs">Open</Button>
+						</ItemActions>
+					</Item>
+				))}
+			</div>
+		</SmartCard>
+	);
+}
+
+function FinanceSignals() {
+	return (
+		<SmartCard padding="sm" className="shadow-sm">
+			<div className="flex items-start justify-between gap-3 border-b border-border pb-2.5">
+				<div className="min-w-0">
+					<Text weight="semibold">Settlement signals</Text>
+					<Text size="xs" type="secondary" className="mt-1">
+						Current finance checkpoints with owner-ready statuses.
+					</Text>
+				</div>
+				<Badge variant="info">4 live</Badge>
+			</div>
+			<div className="grid gap-2 pt-3 md:grid-cols-2">
+				{financeSignals.map((signal) => {
+					const Icon = signal.icon;
+
+					return (
+						<Item key={signal.title} size="sm" className="rounded-md border border-border bg-background/60 px-3 py-2.5">
+							<ItemMedia variant="icon" className="size-8 rounded-md bg-muted text-muted-foreground">
+								<Icon className="size-4" aria-hidden="true" />
+							</ItemMedia>
+							<ItemContent>
+								<ItemTitle>{signal.title}</ItemTitle>
+								<ItemDescription clamp={1}>{signal.meta}</ItemDescription>
+							</ItemContent>
+							<ItemActions>
+								<Badge variant={signal.variant}>{signal.status}</Badge>
+							</ItemActions>
+						</Item>
+					);
+				})}
+			</div>
+		</SmartCard>
+	);
+}
+
+export function DarkHeaderLeftSidebar() {
+	const search = useAppShellSearch();
+
+	return (
+		<SidebarProvider defaultOpen className="min-h-0">
+			<TopbarSidebarLayout
+				headerTheme="dark"
+				className={cn('h-[44rem]', SHELL_PREVIEW_FRAME_CLASS)}
+				sidebarTrigger={<AppShellSidebarTrigger />}
+				logo={<HeaderLogo />}
+				sidebar={<SidebarColumn currentUrl="#/orders/pending" />}
+				headerActions={<Button variant="secondary" buttonStyle="outline" icon={Plus} className="hidden h-[var(--app-shell-header-control-size)] rounded-lg md:inline-flex">New order</Button>}
+				slots={{
+					headerCenter: search.trigger,
+					headerEnd: <HeaderEnd divider />,
+				}}
+			>
+				<div className="space-y-4 p-4">
+					{search.overlay}
+					<PageHeader
+						title="Pending orders"
+						description="Exceptions, holds, and stock checks that need attention before cutoff."
+						headingTag="h3"
+						titleBadges={[{ label: 'Live', variant: 'success' }]}
+						actions={<Button variant="primary" icon={Shield}>Approve batch</Button>}
+					/>
+					<MetricsGrid />
+					{!!search.selectedLabel && (
+						<SmartCard padding="sm" className="border-info/30 bg-info/5 shadow-sm">
+							<Text size="xs" type="secondary">Last selected search result</Text>
+							<Text weight="semibold">{search.selectedLabel}</Text>
+						</SmartCard>
+					)}
+					<WorkQueue />
+				</div>
+			</TopbarSidebarLayout>
+		</SidebarProvider>
+	);
+}
+
+export function LightHeaderRightSidebar() {
+	const search = useAppShellSearch({ enableShortcut: false });
+
+	return (
+		<SidebarProvider defaultOpen className="min-h-0">
+			<TopbarSidebarLayout
+				headerTheme="light"
+				sidebarSide="right"
+				sidebarWidth="18rem"
+				className={cn('h-[42rem]', SHELL_PREVIEW_FRAME_CLASS)}
+				sidebarTrigger={<AppShellSidebarTrigger />}
+				logo={<FullLogo />}
+				sidebar={<SidebarColumn currentUrl="#/reports" side="right" />}
+				slots={{
+					headerCenter: search.trigger,
+					headerEnd: <HeaderEnd menuSurface="light" />,
+				}}
+			>
+				<div className="space-y-4 p-4">
+					{search.overlay}
+					<PageHeader
+						title="Finance reports"
+						description="Revenue, invoices, and payout signals with navigation on the right."
+						headingTag="h3"
+						titleBadges={[{ label: 'Right rail', variant: 'info' }]}
+					/>
+					<MetricsGrid />
+					<SmartCard padding="sm" className="shadow-sm">
+						<Text weight="semibold">Report activity</Text>
+						<Text size="xs" type="secondary" className="mt-1">
+							Finance work stays in the content region while the right rail handles navigation.
+						</Text>
+					</SmartCard>
+					<FinanceSignals />
+				</div>
+			</TopbarSidebarLayout>
+		</SidebarProvider>
+	);
+}
+`;function Ee(e){let t={h4:`h4`,...e.components};return ce||$(`Examples`,!1),X||$(`Examples.DarkHeaderLeftSidebar`,!0),Z||$(`Examples.LightHeaderRightSidebar`,!0),(0,L.jsxs)(r,{title:`Layout · App shell`,description:`Standalone header-first shell with a 70px+ topbar and a sidebar/content body grid.`,layer:`layout`,status:`ready`,sourcePath:`src/components/layout/app-shell`,children:[(0,L.jsxs)(i,{title:`Examples`,id:`examples`,children:[(0,L.jsx)(c,{name:`DarkHeaderLeftSidebar`,description:`Dark topbar with collapsible left navigation.`,source:Q,children:(0,L.jsx)(X,{})}),(0,L.jsx)(c,{name:`LightHeaderRightSidebar`,description:`Light topbar with right navigation rail.`,source:Q,children:(0,L.jsx)(Z,{})})]}),(0,L.jsxs)(i,{title:`API`,id:`api`,children:[(0,L.jsx)(t.h4,{children:`TopbarSidebarLayout`}),(0,L.jsx)(te,{component:`TopbarSidebarLayout`})]})]})}function De(e={}){let{wrapper:t}=e.components||{};return t?(0,L.jsx)(t,{...e,children:(0,L.jsx)(Ee,{...e})}):Ee(e)}function $(e,t){throw Error(`Expected `+(t?`component`:`object`)+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}export{De as default};