admin-ui-starter-kit 0.5.0 → 0.6.2

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

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