@open-mercato/core 0.7.1-develop.7202.1.a52dc6707c → 0.8.0

package/dist/modules/design_system/gallery/demos/selection-cards.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/selection-cards.tsx"],
+  "sourcesContent": ["import * as React from 'react'\nimport { Settings } from 'lucide-react'\nimport { cn } from '@open-mercato/shared/lib/utils'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'\nimport { RadioGroup } from '@open-mercato/ui/primitives/radio'\nimport { RadioField } from '@open-mercato/ui/primitives/radio-field'\nimport { Switch } from '@open-mercato/ui/primitives/switch'\nimport { SwitchField } from '@open-mercato/ui/primitives/switch-field'\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@open-mercato/ui/primitives/dialog'\nimport avatar from '../assets/avatar-photo.png'\nimport mastercard from '../assets/menu-mastercard.svg'\nimport spotify from '../assets/menu-spotify.svg'\nimport company from '../assets/menu-apex.svg'\nimport { selectionArtwork } from '../assets/selection-artwork'\n\nexport type SelectionCardKind = 'icon' | 'avatar' | 'provider' | 'brand' | 'company'\ntype SelectionControl = 'checkbox' | 'radio' | 'switch'\nconst imageSource = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src\n\nexport const selectionSourceCardClassName = 'relative flex w-90 max-w-full items-start gap-3.5 rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs transition-colors hover:bg-muted hover:shadow-none has-[[data-state=checked]]:ring-accent-indigo has-[[data-state=checked]]:shadow-none has-[:focus-visible]:shadow-focus [&_label]:after:absolute [&_label]:after:inset-0 [&_label]:after:rounded-selection-card [&_button]:relative [&_button]:z-10'\n\nfunction SelectionLeading({ kind }: { kind: SelectionCardKind }) {\n  if (kind === 'avatar') return <Avatar label=\"James Brown\" size={40} src={imageSource(avatar)} aria-hidden=\"true\" />\n  const source = kind === 'icon' ? selectionArtwork.keyIcon : imageSource(kind === 'provider' ? mastercard : kind === 'brand' ? spotify : company)\n  return <img src={source} alt=\"\" aria-hidden=\"true\" className={kind === 'provider' ? 'h-6 w-8 shrink-0 object-contain' : 'size-10 shrink-0 object-contain'} />\n}\n\nfunction SourceSelectionCard({ control, kind, state }: { control: SelectionControl; kind: SelectionCardKind; state: 'default' | 'active' | 'disabled' }) {\n  const t = useT()\n  const disabled = state === 'disabled'\n  const fields = {\n    label: t('design_system.gallery.samples.selection.label'),\n    sublabel: t('design_system.gallery.samples.selection.sublabel'),\n    description: t('design_system.gallery.samples.selection.description'),\n    badge: <Badge size={16} appearance={disabled ? 'stroke' : 'light'} tone={disabled ? 'neutral' : 'info'} className={disabled ? 'border-border text-text-disabled' : undefined}>{t('design_system.gallery.samples.selection.new')}</Badge>,\n    disabled,\n    containerClassName: 'min-w-0 flex-1 gap-3.5',\n    contentClassName: disabled ? '[&_label]:text-text-disabled [&_label]:opacity-100 [&_p]:text-text-disabled [&_span]:text-text-disabled' : undefined,\n    className: cn('mt-0', disabled && control !== 'switch' && 'disabled:opacity-100 disabled:data-[state=checked]:bg-bg-disabled disabled:data-[state=checked]:border-border-disabled disabled:data-[state=checked]:text-background'),\n  }\n  return (\n    <div data-slot=\"selection-source-card\" data-kind={kind} data-disabled={disabled} className={cn(selectionSourceCardClassName, disabled && 'shadow-none hover:bg-background has-[[data-state=checked]]:ring-border')}>\n      <SelectionLeading kind={kind} />\n      {control === 'radio' ? <RadioField value={state} flip {...fields} /> : control === 'switch' ? <SwitchField defaultChecked={state === 'active'} {...fields} /> : <CheckboxField defaultChecked={state !== 'default'} flip {...fields} />}\n    </div>\n  )\n}\n\nexport function SelectionSourceCardsDemo({ control, kind }: { control: SelectionControl; kind: SelectionCardKind }) {\n  const t = useT()\n  if (control === 'radio') return (\n    <div className=\"grid gap-3\">\n      <RadioGroup defaultValue=\"active\" aria-label={t('design_system.gallery.samples.selection.preferences')} className=\"gap-3\">\n        <SourceSelectionCard control={control} kind={kind} state=\"default\" />\n        <SourceSelectionCard control={control} kind={kind} state=\"active\" />\n      </RadioGroup>\n      <RadioGroup value=\"disabled\" disabled aria-label={t('design_system.gallery.samples.selection.preferences')}>\n        <SourceSelectionCard control={control} kind={kind} state=\"disabled\" />\n      </RadioGroup>\n    </div>\n  )\n  return <div className=\"grid gap-3\">{(['default', 'active', 'disabled'] as const).map(state => <SourceSelectionCard key={state} control={control} kind={kind} state={state} />)}</div>\n}\n\nexport function IntegrationSwitchDemo({ alignment, appearance }: { alignment: 'horizontal' | 'vertical'; appearance: 'card' | 'list' }) {\n  const t = useT()\n  const id = React.useId()\n  const [checked, setChecked] = React.useState(false)\n  const [open, setOpen] = React.useState(false)\n  const horizontal = alignment === 'horizontal'\n  const card = appearance === 'card'\n  return (\n    <Dialog open={open} onOpenChange={setOpen}>\n      <div data-slot=\"integration-switch\" data-alignment={alignment} data-appearance={appearance} className={cn('relative flex max-w-full gap-3.5', horizontal ? 'w-154 flex-wrap items-center sm:flex-nowrap' : 'w-95 flex-col items-start', card && 'rounded-selection-card bg-background p-4 ring-1 ring-inset ring-border shadow-xs')}>\n        <img src={card ? selectionArtwork.officeCard : selectionArtwork.officeList} alt=\"\" className={cn('shrink-0', card ? 'size-10' : 'size-12')} />\n        <div className={cn('flex min-w-0 flex-col gap-1', horizontal && 'min-w-40 flex-1')}>\n          <div className=\"flex flex-wrap items-center gap-1.5\">\n            <span id={id} className={cn('font-medium text-foreground', card ? 'text-sm leading-5' : 'text-base leading-6')}>Microsoft Office 365</span>\n            <Badge size={16} appearance=\"light\" tone=\"info\">{t('design_system.gallery.samples.selection.new')}</Badge>\n          </div>\n          <p className={cn('text-muted-foreground', card ? 'text-xs leading-4' : 'text-sm leading-5')}>{t('design_system.gallery.samples.selection.integrationDescription')}</p>\n        </div>\n        <Button asChild variant=\"outline\" size=\"default\" className={horizontal ? undefined : 'w-full'}><DialogTrigger><Settings aria-hidden=\"true\" />{t('design_system.gallery.samples.selection.integrationManage')}</DialogTrigger></Button>\n        <Switch aria-labelledby={id} checked={checked} onCheckedChange={setChecked} className={horizontal ? undefined : card ? 'absolute top-5 right-5' : 'absolute top-3 right-3'} />\n      </div>\n        <DialogContent onKeyDownCapture={event => { if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { event.preventDefault(); setOpen(false) } }}>\n          <DialogHeader><DialogTitle>{t('design_system.gallery.samples.selection.integrationDialog')}</DialogTitle><DialogDescription>{t('design_system.gallery.samples.selection.integrationDescription')}</DialogDescription></DialogHeader>\n          <SwitchField label={t('design_system.gallery.samples.selection.integrationEnabled')} checked={checked} onCheckedChange={setChecked} />\n          <DialogFooter><Button variant=\"outline\" onClick={() => setOpen(false)}>{t('common.close')}</Button></DialogFooter>\n        </DialogContent>\n    </Dialog>\n  )\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/modules/design_system/gallery/demos/shell-code.generated.js

@@ -0,0 +1,189 @@
+const source = `import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { BadgeCheck, Bell, CalendarDays, ChevronDown, ChevronRight, ChevronsUpDown, Cloud, CreditCard, Download, FileText, Folder, Gift, Headphones, Home, Layers, PanelLeftClose, PanelLeftOpen, Pause, Play, Plus, Search, Settings, UserRound, Users, X } from 'lucide-react'
+import { PageHeader } from '@open-mercato/ui/backend/Page'
+import { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { CompactButton } from '@open-mercato/ui/primitives/compact-button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import { SearchInput } from '@open-mercato/ui/primitives/search-input'
+import { Progress } from '@open-mercato/ui/primitives/progress'
+import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
+import { Sidebar, SidebarContent, SidebarFeatureCard, SidebarFooter, SidebarHeader, SidebarIdentity, SidebarItem, Topbar } from '@open-mercato/ui/primitives/sidebar'
+import { navigationBrandArtwork } from '@open-mercato/ui/assets/navigation-brand-artwork'
+import avatarIllustration from '../assets/avatar-illustration.png'
+import avatarMemoji from '../assets/avatar-memoji.png'
+import avatarPhoto from '../assets/avatar-photo.png'
+
+const avatarImages = [avatarIllustration, avatarMemoji, avatarPhoto].map(image => typeof image === 'string' ? image : image.src)
+type Product = 'hr' | 'finance'
+type HeaderType = 'basic' | 'avatar' | 'icon' | 'brand' | 'company'
+type FeatureType = 'meeting' | 'progress' | 'link' | 'gift' | 'storage' | 'support'
+type FeatureAppearance = 'stroke' | 'gray' | 'primary' | 'neutral'
+const navItems = {
+  hr: ['dashboard', 'calendar', 'timeOff', 'projects', 'teams', 'integrations', 'benefits', 'documents'],
+  finance: ['dashboard', 'cards', 'transfer', 'transactions', 'payments', 'exchange'],
+} as const
+const navIcons = [Home, CalendarDays, CreditCard, Folder, Users, Layers, Gift, FileText]
+
+function ShellAvatar({ size = 40, product = 'hr' }: { size?: 24 | 32 | 40 | 48; product?: Product }) {
+  return <Avatar src={product === 'hr' ? navigationBrandArtwork.sophiaAvatar : navigationBrandArtwork.arthurAvatar} label={product === 'hr' ? 'Sophia Williams' : 'Arthur Taylor'} size={size} />
+}
+
+function WorkspaceIdentity({ product, onProductChange, collapsed = false, profile = false }: { product: Product; onProductChange?: (product: Product) => void; collapsed?: boolean; profile?: boolean }) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const name = product === 'hr' ? 'Synergy' : 'Apex'
+  return <Popover open={open} onOpenChange={setOpen}>
+    <PopoverTrigger asChild>
+      <SidebarIdentity collapsed={collapsed} label={profile ? product === 'hr' ? 'Sophia Williams' : 'Arthur Taylor' : name}
+        description={profile ? product === 'hr' ? 'sophia@example.com' : 'arthur@example.com' : t(\`design_system.gallery.examples.shell.\${product}\`)}
+        leading={profile ? <ShellAvatar product={product} /> : <img src={navigationBrandArtwork[product === 'hr' ? 'synergyOriginal' : 'apexOriginal']} alt="" className="size-10" />}
+        badge={profile ? <BadgeCheck className="size-3.5 fill-status-info-icon stroke-status-info-solid-foreground" aria-hidden="true" /> : undefined}
+        trailing={profile ? <ChevronRight className="size-5" /> : <span className="flex size-6 items-center justify-center rounded-sm border border-border bg-background shadow-xs"><ChevronsUpDown className="size-5" /></span>} />
+    </PopoverTrigger>
+    <PopoverContent className="w-64 p-3">
+      {profile ? <p className="text-sm">{t('design_system.gallery.examples.shell.localProfile')}</p> : <div className="flex flex-col gap-1">
+        {(['hr', 'finance'] as const).map(value => <Button key={value} type="button" variant="ghost" aria-pressed={product === value} onClick={() => { onProductChange?.(value); setOpen(false) }}>{value === 'hr' ? 'Synergy' : 'Apex'}</Button>)}
+      </div>}
+    </PopoverContent>
+  </Popover>
+}
+
+export function PageHeaderExample({ appearance = 'page', type = 'basic', configurable = false }: { appearance?: 'page' | 'section'; type?: HeaderType; configurable?: boolean }) {
+  const t = useT()
+  const [options, setOptions] = React.useState({ divider: true, search: true, notification: true, actions: true, second: true, dropdown: false })
+  const [query, setQuery] = React.useState('')
+  const [dialog, setDialog] = React.useState(false)
+  const [draft, setDraft] = React.useState('')
+  const [saved, setSaved] = React.useState('')
+  const [period, setPeriod] = React.useState('month')
+  const [workspace, setWorkspace] = React.useState<Product>('hr')
+  const submit = () => { if (draft.trim()) { setSaved(draft.trim()); setDialog(false) } }
+  const copy = (key: string) => t(\`design_system.gallery.examples.shell.\${key}\`)
+  const leading = type === 'avatar' ? <ShellAvatar size={48} />
+    : type === 'icon' ? <span className="flex size-12 items-center justify-center rounded-full border border-border"><UserRound className="size-6" aria-hidden="true" /></span>
+      : type === 'brand' ? <img src={navigationBrandArtwork.loom} alt="Loom" className="size-12" />
+        : type === 'company' ? <img src={navigationBrandArtwork.apexOriginal} alt="Apex" className="size-12" /> : undefined
+  const periodMenu = <Popover><PopoverTrigger asChild><Button type="button" variant="outline" size="lg"><CalendarDays className="size-5" />{copy(period)}<ChevronDown className="size-5" /></Button></PopoverTrigger><PopoverContent className="p-2">{['month', 'year'].map(value => <Button key={value} type="button" variant="ghost" aria-pressed={period === value} onClick={() => setPeriod(value)}>{copy(value)}</Button>)}</PopoverContent></Popover>
+  const titleAction = options.dropdown && appearance === 'section' ? <Popover><PopoverTrigger asChild><CompactButton fullRadius aria-label={copy('switchWorkspace')}><ChevronDown /></CompactButton></PopoverTrigger><PopoverContent className="p-3">{(['hr', 'finance'] as const).map(value => <Button key={value} type="button" variant="ghost" onClick={() => setWorkspace(value)}>{copy(value)}</Button>)}</PopoverContent></Popover> : undefined
+  return <div className="w-full">
+    {configurable ? <div className="mb-4 flex flex-wrap gap-4">{(Object.keys(options) as Array<keyof typeof options>).map(key => <label key={key} className="flex items-center gap-2 text-sm"><Checkbox checked={options[key]} onCheckedChange={checked => setOptions(current => ({ ...current, [key]: checked === true }))} />{copy(key)}</label>)}</div> : null}
+    <PageHeader appearance={appearance} leading={leading} divider={options.divider} title={configurable ? copy(workspace) : copy('title')} description={copy('description')} titleAction={titleAction}
+      actions={<>
+        {options.search ? <Popover><PopoverTrigger asChild><IconButton variant="ghost" className="size-10 rounded-lg data-[state=open]:bg-muted" aria-label={copy('search')}><Search className="size-5" /></IconButton></PopoverTrigger><PopoverContent className="p-3"><SearchInput value={query} onChange={setQuery} aria-label={copy('search')} /><p className="mt-2 text-sm" role="status">{query ? t('design_system.gallery.examples.shell.localQuery', { query }) : copy('searchHint')}</p></PopoverContent></Popover> : null}
+        {options.notification && appearance === 'page' ? <Popover><PopoverTrigger asChild><IconButton variant="ghost" className="size-10 rounded-lg data-[state=open]:bg-muted" aria-label={copy('notifications')}><Bell className="size-5" /></IconButton></PopoverTrigger><PopoverContent className="p-4 text-sm">{copy('noNotifications')}</PopoverContent></Popover> : null}
+        {options.dropdown && appearance === 'page' ? periodMenu : null}
+        {options.actions ? <>
+          {options.second ? appearance === 'page' ? <Button type="button" variant="outline" size="lg" onClick={() => { setDraft(''); setDialog(true) }}><CalendarDays className="size-5" />{copy('schedule')}</Button> : <Button asChild variant="outline" size="lg"><a download="page-header-example.json" href={\`data:application/json;charset=utf-8,\${encodeURIComponent(JSON.stringify({ title: copy('title'), description: copy('description') }, null, 2))}\`}><Download className="size-5" />{copy('export')}</a></Button> : null}
+          <Button type="button" variant="primary-filled" size="lg" onClick={() => { setDraft(''); setDialog(true) }}><Plus className="size-5" />{copy(appearance === 'page' ? 'create' : 'invite')}</Button>
+        </> : null}
+      </>} />
+    {saved ? <output className="block px-8 pt-3 text-sm">{t('design_system.gallery.examples.shell.savedDraft', { title: saved })}</output> : null}
+    <Dialog open={dialog} onOpenChange={setDialog}><DialogContent onKeyDown={event => { if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') { event.preventDefault(); submit() } }}>
+      <DialogHeader><DialogTitle>{copy('localDraft')}</DialogTitle><DialogDescription>{copy('localDraftHint')}</DialogDescription></DialogHeader>
+      <Input value={draft} onChange={event => setDraft(event.target.value)} aria-label={copy('draftTitle')} autoFocus />
+      <DialogFooter><Button type="button" variant="outline" onClick={() => setDialog(false)}>{copy('cancel')}</Button><Button type="button" disabled={!draft.trim()} onClick={submit}>{copy('saveDraft')}</Button></DialogFooter>
+    </DialogContent></Dialog>
+  </div>
+}
+
+function FeatureCard({ type, appearance }: { type: FeatureType; appearance: FeatureAppearance }) {
+  const t = useT()
+  const [dismissed, setDismissed] = React.useState(false)
+  const [paused, setPaused] = React.useState(true)
+  const [details, setDetails] = React.useState(false)
+  const id = React.useId()
+  const copy = (key: string) => t(\`design_system.gallery.examples.shell.\${key}\`)
+  const inverse = appearance === 'primary' || appearance === 'neutral'
+  const descriptionClass = inverse ? 'text-current' : 'text-muted-foreground'
+  const link = (key: string) => <LinkButton asChild variant="modifiable" underline="always" className={type === 'link' ? undefined : 'self-start'}><a href={\`#\${id}\`} onClick={() => setDetails(true)}>{copy(key)}{type === 'meeting' ? <ChevronRight className="size-5" /> : null}</a></LinkButton>
+  if (dismissed) return <div className="flex min-h-27 w-58 items-center justify-center rounded-lg border border-dashed border-border"><Button type="button" variant="outline" onClick={() => setDismissed(false)}>{copy('restoreCard')}</Button></div>
+  return <div className="w-58 max-w-full">
+    <SidebarFeatureCard appearance={appearance} className={cn('flex flex-col', type === 'gift' ? 'flex-row items-center gap-3 p-3' : type === 'link' || type === 'support' ? 'gap-3' : 'gap-4', type === 'link' && 'items-center text-center', type === 'storage' && 'px-2 pt-4 pb-2')}>
+      {(type === 'meeting' || type === 'support') ? <CompactButton appearance="modifiable" className="absolute top-3 right-3 text-current" aria-label={copy('dismissCard')} onClick={() => setDismissed(true)}><X /></CompactButton> : null}
+      {type === 'meeting' ? <>
+        <div data-slot="sidebar-meeting-avatars" className="flex w-fit items-center gap-1.5 rounded-full bg-background p-0.5 pr-2 text-foreground ring-1 ring-inset ring-border"><AvatarStack size={24} max={3} className="[&_[data-slot=avatar-stack-item]+[data-slot=avatar-stack-item]]:-ml-0.5">{avatarImages.map((src, index) => <Avatar key={\`meeting-avatar-\${index}\`} label={String(index + 1)} src={src} size={24} />)}</AvatarStack><span className="w-4 text-xs leading-4 text-muted-foreground">+4</span></div>
+        <div className="flex flex-col gap-1"><p className="text-sm font-medium">{copy('meeting')}</p><p className={cn('text-xs', descriptionClass)}>{copy('meetingTime')}</p></div>{link('join')}
+      </> : null}
+      {type === 'progress' ? <><div className="flex flex-col gap-1"><p className="text-sm font-medium">{copy('capacity')}</p><p className={cn('text-xs', descriptionClass)}>{copy('capacityHint')}</p></div><Progress value={90} size="md" aria-label={copy('capacity')} className={inverse ? 'bg-current/20' : undefined} fillClassName={inverse ? 'bg-current' : undefined} />{link('upgrade')}</> : null}
+      {(type === 'link' || type === 'gift') ? <span className={cn('flex size-10 shrink-0 items-center justify-center rounded-full', inverse ? 'bg-background text-status-info-icon' : 'bg-status-info-bg text-status-info-icon')}>{type === 'link' ? <Cloud className="size-5" /> : <Gift className="size-5" />}</span> : null}
+      {type === 'link' ? <><p className={cn('text-sm', descriptionClass)}>{copy('plansHint')}</p>{link('plans')}</> : null}
+      {type === 'gift' ? <div className="flex min-w-0 flex-col gap-1"><p className="text-sm font-medium">{copy('gift')}</p><p className={cn('text-xs', descriptionClass)}>{copy('giftHint')}</p></div> : null}
+      {type === 'storage' ? <><div className="px-2"><div className="mb-1.5 flex items-center justify-between text-sm"><span>{copy('storage')}</span><span className="text-xs">80%</span></div><Progress value={80} size="md" aria-label={copy('storage')} className={inverse ? 'bg-current/20' : undefined} fillClassName={inverse ? 'bg-current' : undefined} /><p className={cn('mt-1.5 text-xs', descriptionClass)}>{copy('storageHint')}</p></div><Button type="button" variant="ghost" className="h-8 w-full justify-start gap-1 rounded-md bg-background px-2.5 py-1.5 text-xs text-foreground hover:bg-muted" aria-pressed={!paused} onClick={() => setPaused(value => !value)}>{copy('sync')}<span className="flex-1 text-left text-muted-foreground">{copy(paused ? 'paused' : 'running')}</span>{paused ? <Play className="size-5" /> : <Pause className="size-5" />}</Button></> : null}
+      {type === 'support' ? <><div className="flex items-center gap-2.5 pr-4"><Headphones className="size-6" /><p className="text-base">{copy('supportTitle')}</p></div><p className={cn('text-sm', descriptionClass)}>{copy('supportHint')}</p></> : null}
+    </SidebarFeatureCard>
+    {(type === 'meeting' || type === 'progress' || type === 'link') ? <div id={id} tabIndex={-1}>{details ? <div data-slot="sidebar-feature-details" className="mt-3 rounded-md border border-border p-3 text-sm"><p className="font-medium">{copy('localDestination')}</p><p className="mt-1 text-muted-foreground">{copy(type === 'meeting' ? 'meetingTime' : 'plansHint')}</p></div> : null}</div> : null}
+  </div>
+}
+
+export function SidebarFeatureExample({ type = 'meeting' }: { type?: FeatureType }) {
+  return <div className="flex w-full flex-wrap items-start gap-6">{(['stroke', 'gray', 'primary', 'neutral'] as const).map(appearance => <FeatureCard key={appearance} type={type} appearance={appearance} />)}</div>
+}
+
+export function SidebarItemsExample() {
+  const t = useT()
+  const [selected, setSelected] = React.useState([0, 0])
+  return <div className="flex flex-wrap items-start gap-6">{[false, true].map((collapsed, group) => <div key={String(collapsed)} className={collapsed ? 'w-9' : 'w-58'}>
+    {['dashboard', 'calendar', 'projects'].map((key, index) => <SidebarItem key={key} collapsed={collapsed} icon={React.createElement(navIcons[index], { className: 'size-5' })} active={selected[group] === index} trailing={<ChevronRight className="size-5" />} onClick={() => setSelected(current => current.map((value, currentGroup) => currentGroup === group ? index : value))}>{t(\`design_system.gallery.examples.shell.\${key}\`)}</SidebarItem>)}
+    <output className="sr-only">{t(\`design_system.gallery.examples.shell.\${['dashboard', 'calendar', 'projects'][selected[group]]}\`)}</output>
+  </div>)}</div>
+}
+
+export function SidebarIdentityExample() {
+  const [product, setProduct] = React.useState<Product>('hr')
+  return <div className="flex flex-wrap items-start gap-6">{[false, true].map(collapsed => <div key={String(collapsed)} className={collapsed ? 'w-16' : 'w-62'}><WorkspaceIdentity collapsed={collapsed} product={product} onProductChange={setProduct} /><WorkspaceIdentity collapsed={collapsed} product={product} profile /></div>)}</div>
+}
+
+export function SidebarExample({ product = 'hr', collapsed = false, feature = false }: { product?: Product; collapsed?: boolean; feature?: boolean }) {
+  const t = useT()
+  const [compact, setCompact] = React.useState(collapsed)
+  const [workspace, setWorkspace] = React.useState(product)
+  const [active, setActive] = React.useState('dashboard')
+  const copy = (key: string) => t(\`design_system.gallery.examples.shell.\${key}\`)
+  return <div className="flex w-full flex-wrap items-start gap-6">
+    <Sidebar collapsed={compact} className="max-w-full" aria-label={copy('sidebar')}>
+      <SidebarHeader className="relative after:absolute after:inset-x-5 after:bottom-0 after:border-b after:border-border after:content-['']"><WorkspaceIdentity collapsed={compact} product={workspace} onProductChange={value => { setWorkspace(value); setActive('dashboard') }} /></SidebarHeader>
+      <SidebarContent>
+        <nav aria-label={copy('main')} className="w-full"><p className={cn('mb-3 px-1 text-xs uppercase text-muted-foreground', compact && 'sr-only')}>{copy('main')}</p><div className="flex flex-col gap-1">
+          {navItems[workspace].map((key, index) => <SidebarItem key={key} icon={React.createElement(navIcons[index], { className: 'size-5' })} active={active === key} trailing={active === key ? <ChevronRight className="size-5" /> : undefined} className={active === key ? cn("before:absolute before:top-2 before:h-5 before:w-1 before:rounded-r before:bg-foreground before:content-['']", compact ? 'before:-left-5.5' : 'before:-left-5') : undefined} onClick={() => setActive(key)}>{copy(key)}</SidebarItem>)}
+        </div></nav>
+        {!compact && workspace === 'hr' && !feature ? <nav aria-label={copy('favorites')}><p className="mb-3 px-1 text-xs uppercase text-muted-foreground">{copy('favorites')}</p>{['Loom Mobile App', 'Monday Redesign', 'Udemy Courses'].map((name, index) => <SidebarItem key={name} icon={<Folder className="size-5" />} active={active === name} trailing={<span className="text-xs">\u2318{index + 1}</span>} onClick={() => setActive(name)}>{name}</SidebarItem>)}</nav> : null}
+        <nav aria-label={copy('support')} className="mt-auto w-full">{['settings', 'support'].map(key => <SidebarItem key={key} icon={key === 'settings' ? <Settings /> : <Headphones />} active={active === key} onClick={() => setActive(key)}>{copy(key)}</SidebarItem>)}</nav>
+        {feature && !compact ? <FeatureCard type={workspace === 'hr' ? 'meeting' : 'progress'} appearance="stroke" /> : null}
+      </SidebarContent>
+      <SidebarFooter><WorkspaceIdentity collapsed={compact} product={workspace} profile /></SidebarFooter>
+    </Sidebar>
+    <div className="min-w-0 flex-1 basis-64 space-y-4 py-5"><IconButton variant="outline" aria-label={copy(compact ? 'expand' : 'collapse')} aria-expanded={!compact} onClick={() => setCompact(value => !value)}>{compact ? <PanelLeftOpen /> : <PanelLeftClose />}</IconButton><h3 className="text-lg font-medium">{navItems[workspace].some(key => key === active) || ['settings', 'support'].includes(active) ? copy(active) : active}</h3><p className="text-sm text-muted-foreground">{copy('previewHint')}</p></div>
+  </div>
+}
+
+export function TopbarExample({ product = 'hr', icons = false }: { product?: Product; icons?: boolean }) {
+  const t = useT()
+  const [active, setActive] = React.useState('dashboard')
+  const [query, setQuery] = React.useState('')
+  const copy = (key: string) => t(\`design_system.gallery.examples.shell.\${key}\`)
+  const items = product === 'hr' ? ['dashboard', 'calendar', 'timeOff', 'projects', 'teams', 'settings'] : navItems.finance
+  return <div className="w-full overflow-x-auto"><Topbar className="w-360 flex-nowrap">
+    <img src={navigationBrandArtwork[product === 'hr' ? 'synergyOriginal' : 'apexOriginal']} alt={product === 'hr' ? 'Synergy' : 'Apex'} className="size-10" />
+    <nav aria-label={copy('topbar')} className="flex min-w-0 flex-1 items-center gap-1">{items.filter(key => copy(key).toLocaleLowerCase().includes(query.toLocaleLowerCase())).map((key, index) => <SidebarItem key={key} icon={icons ? React.createElement(navIcons[index], { className: 'size-5' }) : null} active={active === key} className={cn('w-auto flex-1 px-2', !icons && '[&>span:first-child]:hidden')} onClick={() => setActive(key)}>{copy(key)}</SidebarItem>)}<Popover><PopoverTrigger asChild><Button type="button" variant="ghost" className="h-9 gap-2 px-3">{copy('others')}<ChevronDown className="size-5" /></Button></PopoverTrigger><PopoverContent className="p-2">{['settings', 'support'].map(key => <Button key={key} type="button" variant="ghost" onClick={() => setActive(key)}>{copy(key)}</Button>)}</PopoverContent></Popover></nav>
+    <SearchInput value={query} onChange={setQuery} className="w-58" aria-label={copy('filterNavigation')} />
+    <Popover><PopoverTrigger asChild><IconButton variant="ghost" className="size-10 rounded-lg data-[state=open]:bg-muted" aria-label={copy('notifications')}><Bell className="size-5" /></IconButton></PopoverTrigger><PopoverContent className="p-4 text-sm">{copy('noNotifications')}</PopoverContent></Popover>
+    <Popover><PopoverTrigger asChild><Button type="button" variant="ghost" className="h-10 gap-1.5 rounded-lg py-1 pr-2 pl-1 data-[state=open]:bg-muted"><ShellAvatar size={32} product={product} /><span>{product === 'hr' ? 'Sophia' : 'Arthur'}</span><ChevronDown className="size-5" /></Button></PopoverTrigger><PopoverContent className="p-4 text-sm">{copy('localProfile')}</PopoverContent></Popover>
+  </Topbar><output className="sr-only">{copy(active)}</output></div>
+}
+
+export function NavigationBrandsExample() {
+  return <div className="flex flex-wrap gap-6">{Object.entries(navigationBrandArtwork).filter(([key]) => key !== 'loom' && !key.endsWith('Avatar')).map(([key, src]) => <figure key={key} className="space-y-2"><div className={cn('flex size-20 items-center justify-center rounded-lg', key.endsWith('White') ? 'bg-status-info-solid' : key.endsWith('Black') ? 'bg-accent-indigo-foreground' : 'bg-background')}><img src={src} alt={key.startsWith('synergy') ? 'Synergy' : 'Apex'} className="size-10" /></div><figcaption className="text-xs text-muted-foreground">{key}</figcaption></figure>)}</div>
+}
+`;
+const shellExampleCode = (expression) => source + "\n" + expression + "\n";
+export {
+  shellExampleCode
+};
+//# sourceMappingURL=shell-code.generated.js.map

package/dist/modules/design_system/gallery/demos/shell-code.generated.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/shell-code.generated.ts"],
+  "sourcesContent": ["// Generated by yarn storybook:generate from shell.tsx.\nconst source = \"import * as React from 'react'\\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\\nimport { cn } from '@open-mercato/shared/lib/utils'\\nimport { BadgeCheck, Bell, CalendarDays, ChevronDown, ChevronRight, ChevronsUpDown, Cloud, CreditCard, Download, FileText, Folder, Gift, Headphones, Home, Layers, PanelLeftClose, PanelLeftOpen, Pause, Play, Plus, Search, Settings, UserRound, Users, X } from 'lucide-react'\\nimport { PageHeader } from '@open-mercato/ui/backend/Page'\\nimport { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'\\nimport { Button } from '@open-mercato/ui/primitives/button'\\nimport { CompactButton } from '@open-mercato/ui/primitives/compact-button'\\nimport { IconButton } from '@open-mercato/ui/primitives/icon-button'\\nimport { LinkButton } from '@open-mercato/ui/primitives/link-button'\\nimport { Input } from '@open-mercato/ui/primitives/input'\\nimport { Checkbox } from '@open-mercato/ui/primitives/checkbox'\\nimport { SearchInput } from '@open-mercato/ui/primitives/search-input'\\nimport { Progress } from '@open-mercato/ui/primitives/progress'\\nimport { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'\\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'\\nimport { Sidebar, SidebarContent, SidebarFeatureCard, SidebarFooter, SidebarHeader, SidebarIdentity, SidebarItem, Topbar } from '@open-mercato/ui/primitives/sidebar'\\nimport { navigationBrandArtwork } from '@open-mercato/ui/assets/navigation-brand-artwork'\\nimport avatarIllustration from '../assets/avatar-illustration.png'\\nimport avatarMemoji from '../assets/avatar-memoji.png'\\nimport avatarPhoto from '../assets/avatar-photo.png'\\n\\nconst avatarImages = [avatarIllustration, avatarMemoji, avatarPhoto].map(image => typeof image === 'string' ? image : image.src)\\ntype Product = 'hr' | 'finance'\\ntype HeaderType = 'basic' | 'avatar' | 'icon' | 'brand' | 'company'\\ntype FeatureType = 'meeting' | 'progress' | 'link' | 'gift' | 'storage' | 'support'\\ntype FeatureAppearance = 'stroke' | 'gray' | 'primary' | 'neutral'\\nconst navItems = {\\n  hr: ['dashboard', 'calendar', 'timeOff', 'projects', 'teams', 'integrations', 'benefits', 'documents'],\\n  finance: ['dashboard', 'cards', 'transfer', 'transactions', 'payments', 'exchange'],\\n} as const\\nconst navIcons = [Home, CalendarDays, CreditCard, Folder, Users, Layers, Gift, FileText]\\n\\nfunction ShellAvatar({ size = 40, product = 'hr' }: { size?: 24 | 32 | 40 | 48; product?: Product }) {\\n  return <Avatar src={product === 'hr' ? navigationBrandArtwork.sophiaAvatar : navigationBrandArtwork.arthurAvatar} label={product === 'hr' ? 'Sophia Williams' : 'Arthur Taylor'} size={size} />\\n}\\n\\nfunction WorkspaceIdentity({ product, onProductChange, collapsed = false, profile = false }: { product: Product; onProductChange?: (product: Product) => void; collapsed?: boolean; profile?: boolean }) {\\n  const t = useT()\\n  const [open, setOpen] = React.useState(false)\\n  const name = product === 'hr' ? 'Synergy' : 'Apex'\\n  return <Popover open={open} onOpenChange={setOpen}>\\n    <PopoverTrigger asChild>\\n      <SidebarIdentity collapsed={collapsed} label={profile ? product === 'hr' ? 'Sophia Williams' : 'Arthur Taylor' : name}\\n        description={profile ? product === 'hr' ? 'sophia@example.com' : 'arthur@example.com' : t(`design_system.gallery.examples.shell.${product}`)}\\n        leading={profile ? <ShellAvatar product={product} /> : <img src={navigationBrandArtwork[product === 'hr' ? 'synergyOriginal' : 'apexOriginal']} alt=\\\"\\\" className=\\\"size-10\\\" />}\\n        badge={profile ? <BadgeCheck className=\\\"size-3.5 fill-status-info-icon stroke-status-info-solid-foreground\\\" aria-hidden=\\\"true\\\" /> : undefined}\\n        trailing={profile ? <ChevronRight className=\\\"size-5\\\" /> : <span className=\\\"flex size-6 items-center justify-center rounded-sm border border-border bg-background shadow-xs\\\"><ChevronsUpDown className=\\\"size-5\\\" /></span>} />\\n    </PopoverTrigger>\\n    <PopoverContent className=\\\"w-64 p-3\\\">\\n      {profile ? <p className=\\\"text-sm\\\">{t('design_system.gallery.examples.shell.localProfile')}</p> : <div className=\\\"flex flex-col gap-1\\\">\\n        {(['hr', 'finance'] as const).map(value => <Button key={value} type=\\\"button\\\" variant=\\\"ghost\\\" aria-pressed={product === value} onClick={() => { onProductChange?.(value); setOpen(false) }}>{value === 'hr' ? 'Synergy' : 'Apex'}</Button>)}\\n      </div>}\\n    </PopoverContent>\\n  </Popover>\\n}\\n\\nexport function PageHeaderExample({ appearance = 'page', type = 'basic', configurable = false }: { appearance?: 'page' | 'section'; type?: HeaderType; configurable?: boolean }) {\\n  const t = useT()\\n  const [options, setOptions] = React.useState({ divider: true, search: true, notification: true, actions: true, second: true, dropdown: false })\\n  const [query, setQuery] = React.useState('')\\n  const [dialog, setDialog] = React.useState(false)\\n  const [draft, setDraft] = React.useState('')\\n  const [saved, setSaved] = React.useState('')\\n  const [period, setPeriod] = React.useState('month')\\n  const [workspace, setWorkspace] = React.useState<Product>('hr')\\n  const submit = () => { if (draft.trim()) { setSaved(draft.trim()); setDialog(false) } }\\n  const copy = (key: string) => t(`design_system.gallery.examples.shell.${key}`)\\n  const leading = type === 'avatar' ? <ShellAvatar size={48} />\\n    : type === 'icon' ? <span className=\\\"flex size-12 items-center justify-center rounded-full border border-border\\\"><UserRound className=\\\"size-6\\\" aria-hidden=\\\"true\\\" /></span>\\n      : type === 'brand' ? <img src={navigationBrandArtwork.loom} alt=\\\"Loom\\\" className=\\\"size-12\\\" />\\n        : type === 'company' ? <img src={navigationBrandArtwork.apexOriginal} alt=\\\"Apex\\\" className=\\\"size-12\\\" /> : undefined\\n  const periodMenu = <Popover><PopoverTrigger asChild><Button type=\\\"button\\\" variant=\\\"outline\\\" size=\\\"lg\\\"><CalendarDays className=\\\"size-5\\\" />{copy(period)}<ChevronDown className=\\\"size-5\\\" /></Button></PopoverTrigger><PopoverContent className=\\\"p-2\\\">{['month', 'year'].map(value => <Button key={value} type=\\\"button\\\" variant=\\\"ghost\\\" aria-pressed={period === value} onClick={() => setPeriod(value)}>{copy(value)}</Button>)}</PopoverContent></Popover>\\n  const titleAction = options.dropdown && appearance === 'section' ? <Popover><PopoverTrigger asChild><CompactButton fullRadius aria-label={copy('switchWorkspace')}><ChevronDown /></CompactButton></PopoverTrigger><PopoverContent className=\\\"p-3\\\">{(['hr', 'finance'] as const).map(value => <Button key={value} type=\\\"button\\\" variant=\\\"ghost\\\" onClick={() => setWorkspace(value)}>{copy(value)}</Button>)}</PopoverContent></Popover> : undefined\\n  return <div className=\\\"w-full\\\">\\n    {configurable ? <div className=\\\"mb-4 flex flex-wrap gap-4\\\">{(Object.keys(options) as Array<keyof typeof options>).map(key => <label key={key} className=\\\"flex items-center gap-2 text-sm\\\"><Checkbox checked={options[key]} onCheckedChange={checked => setOptions(current => ({ ...current, [key]: checked === true }))} />{copy(key)}</label>)}</div> : null}\\n    <PageHeader appearance={appearance} leading={leading} divider={options.divider} title={configurable ? copy(workspace) : copy('title')} description={copy('description')} titleAction={titleAction}\\n      actions={<>\\n        {options.search ? <Popover><PopoverTrigger asChild><IconButton variant=\\\"ghost\\\" className=\\\"size-10 rounded-lg data-[state=open]:bg-muted\\\" aria-label={copy('search')}><Search className=\\\"size-5\\\" /></IconButton></PopoverTrigger><PopoverContent className=\\\"p-3\\\"><SearchInput value={query} onChange={setQuery} aria-label={copy('search')} /><p className=\\\"mt-2 text-sm\\\" role=\\\"status\\\">{query ? t('design_system.gallery.examples.shell.localQuery', { query }) : copy('searchHint')}</p></PopoverContent></Popover> : null}\\n        {options.notification && appearance === 'page' ? <Popover><PopoverTrigger asChild><IconButton variant=\\\"ghost\\\" className=\\\"size-10 rounded-lg data-[state=open]:bg-muted\\\" aria-label={copy('notifications')}><Bell className=\\\"size-5\\\" /></IconButton></PopoverTrigger><PopoverContent className=\\\"p-4 text-sm\\\">{copy('noNotifications')}</PopoverContent></Popover> : null}\\n        {options.dropdown && appearance === 'page' ? periodMenu : null}\\n        {options.actions ? <>\\n          {options.second ? appearance === 'page' ? <Button type=\\\"button\\\" variant=\\\"outline\\\" size=\\\"lg\\\" onClick={() => { setDraft(''); setDialog(true) }}><CalendarDays className=\\\"size-5\\\" />{copy('schedule')}</Button> : <Button asChild variant=\\\"outline\\\" size=\\\"lg\\\"><a download=\\\"page-header-example.json\\\" href={`data:application/json;charset=utf-8,${encodeURIComponent(JSON.stringify({ title: copy('title'), description: copy('description') }, null, 2))}`}><Download className=\\\"size-5\\\" />{copy('export')}</a></Button> : null}\\n          <Button type=\\\"button\\\" variant=\\\"primary-filled\\\" size=\\\"lg\\\" onClick={() => { setDraft(''); setDialog(true) }}><Plus className=\\\"size-5\\\" />{copy(appearance === 'page' ? 'create' : 'invite')}</Button>\\n        </> : null}\\n      </>} />\\n    {saved ? <output className=\\\"block px-8 pt-3 text-sm\\\">{t('design_system.gallery.examples.shell.savedDraft', { title: saved })}</output> : null}\\n    <Dialog open={dialog} onOpenChange={setDialog}><DialogContent onKeyDown={event => { if ((event.ctrlKey || event.metaKey) && event.key === 'Enter') { event.preventDefault(); submit() } }}>\\n      <DialogHeader><DialogTitle>{copy('localDraft')}</DialogTitle><DialogDescription>{copy('localDraftHint')}</DialogDescription></DialogHeader>\\n      <Input value={draft} onChange={event => setDraft(event.target.value)} aria-label={copy('draftTitle')} autoFocus />\\n      <DialogFooter><Button type=\\\"button\\\" variant=\\\"outline\\\" onClick={() => setDialog(false)}>{copy('cancel')}</Button><Button type=\\\"button\\\" disabled={!draft.trim()} onClick={submit}>{copy('saveDraft')}</Button></DialogFooter>\\n    </DialogContent></Dialog>\\n  </div>\\n}\\n\\nfunction FeatureCard({ type, appearance }: { type: FeatureType; appearance: FeatureAppearance }) {\\n  const t = useT()\\n  const [dismissed, setDismissed] = React.useState(false)\\n  const [paused, setPaused] = React.useState(true)\\n  const [details, setDetails] = React.useState(false)\\n  const id = React.useId()\\n  const copy = (key: string) => t(`design_system.gallery.examples.shell.${key}`)\\n  const inverse = appearance === 'primary' || appearance === 'neutral'\\n  const descriptionClass = inverse ? 'text-current' : 'text-muted-foreground'\\n  const link = (key: string) => <LinkButton asChild variant=\\\"modifiable\\\" underline=\\\"always\\\" className={type === 'link' ? undefined : 'self-start'}><a href={`#${id}`} onClick={() => setDetails(true)}>{copy(key)}{type === 'meeting' ? <ChevronRight className=\\\"size-5\\\" /> : null}</a></LinkButton>\\n  if (dismissed) return <div className=\\\"flex min-h-27 w-58 items-center justify-center rounded-lg border border-dashed border-border\\\"><Button type=\\\"button\\\" variant=\\\"outline\\\" onClick={() => setDismissed(false)}>{copy('restoreCard')}</Button></div>\\n  return <div className=\\\"w-58 max-w-full\\\">\\n    <SidebarFeatureCard appearance={appearance} className={cn('flex flex-col', type === 'gift' ? 'flex-row items-center gap-3 p-3' : type === 'link' || type === 'support' ? 'gap-3' : 'gap-4', type === 'link' && 'items-center text-center', type === 'storage' && 'px-2 pt-4 pb-2')}>\\n      {(type === 'meeting' || type === 'support') ? <CompactButton appearance=\\\"modifiable\\\" className=\\\"absolute top-3 right-3 text-current\\\" aria-label={copy('dismissCard')} onClick={() => setDismissed(true)}><X /></CompactButton> : null}\\n      {type === 'meeting' ? <>\\n        <div data-slot=\\\"sidebar-meeting-avatars\\\" className=\\\"flex w-fit items-center gap-1.5 rounded-full bg-background p-0.5 pr-2 text-foreground ring-1 ring-inset ring-border\\\"><AvatarStack size={24} max={3} className=\\\"[&_[data-slot=avatar-stack-item]+[data-slot=avatar-stack-item]]:-ml-0.5\\\">{avatarImages.map((src, index) => <Avatar key={`meeting-avatar-${index}`} label={String(index + 1)} src={src} size={24} />)}</AvatarStack><span className=\\\"w-4 text-xs leading-4 text-muted-foreground\\\">+4</span></div>\\n        <div className=\\\"flex flex-col gap-1\\\"><p className=\\\"text-sm font-medium\\\">{copy('meeting')}</p><p className={cn('text-xs', descriptionClass)}>{copy('meetingTime')}</p></div>{link('join')}\\n      </> : null}\\n      {type === 'progress' ? <><div className=\\\"flex flex-col gap-1\\\"><p className=\\\"text-sm font-medium\\\">{copy('capacity')}</p><p className={cn('text-xs', descriptionClass)}>{copy('capacityHint')}</p></div><Progress value={90} size=\\\"md\\\" aria-label={copy('capacity')} className={inverse ? 'bg-current/20' : undefined} fillClassName={inverse ? 'bg-current' : undefined} />{link('upgrade')}</> : null}\\n      {(type === 'link' || type === 'gift') ? <span className={cn('flex size-10 shrink-0 items-center justify-center rounded-full', inverse ? 'bg-background text-status-info-icon' : 'bg-status-info-bg text-status-info-icon')}>{type === 'link' ? <Cloud className=\\\"size-5\\\" /> : <Gift className=\\\"size-5\\\" />}</span> : null}\\n      {type === 'link' ? <><p className={cn('text-sm', descriptionClass)}>{copy('plansHint')}</p>{link('plans')}</> : null}\\n      {type === 'gift' ? <div className=\\\"flex min-w-0 flex-col gap-1\\\"><p className=\\\"text-sm font-medium\\\">{copy('gift')}</p><p className={cn('text-xs', descriptionClass)}>{copy('giftHint')}</p></div> : null}\\n      {type === 'storage' ? <><div className=\\\"px-2\\\"><div className=\\\"mb-1.5 flex items-center justify-between text-sm\\\"><span>{copy('storage')}</span><span className=\\\"text-xs\\\">80%</span></div><Progress value={80} size=\\\"md\\\" aria-label={copy('storage')} className={inverse ? 'bg-current/20' : undefined} fillClassName={inverse ? 'bg-current' : undefined} /><p className={cn('mt-1.5 text-xs', descriptionClass)}>{copy('storageHint')}</p></div><Button type=\\\"button\\\" variant=\\\"ghost\\\" className=\\\"h-8 w-full justify-start gap-1 rounded-md bg-background px-2.5 py-1.5 text-xs text-foreground hover:bg-muted\\\" aria-pressed={!paused} onClick={() => setPaused(value => !value)}>{copy('sync')}<span className=\\\"flex-1 text-left text-muted-foreground\\\">{copy(paused ? 'paused' : 'running')}</span>{paused ? <Play className=\\\"size-5\\\" /> : <Pause className=\\\"size-5\\\" />}</Button></> : null}\\n      {type === 'support' ? <><div className=\\\"flex items-center gap-2.5 pr-4\\\"><Headphones className=\\\"size-6\\\" /><p className=\\\"text-base\\\">{copy('supportTitle')}</p></div><p className={cn('text-sm', descriptionClass)}>{copy('supportHint')}</p></> : null}\\n    </SidebarFeatureCard>\\n    {(type === 'meeting' || type === 'progress' || type === 'link') ? <div id={id} tabIndex={-1}>{details ? <div data-slot=\\\"sidebar-feature-details\\\" className=\\\"mt-3 rounded-md border border-border p-3 text-sm\\\"><p className=\\\"font-medium\\\">{copy('localDestination')}</p><p className=\\\"mt-1 text-muted-foreground\\\">{copy(type === 'meeting' ? 'meetingTime' : 'plansHint')}</p></div> : null}</div> : null}\\n  </div>\\n}\\n\\nexport function SidebarFeatureExample({ type = 'meeting' }: { type?: FeatureType }) {\\n  return <div className=\\\"flex w-full flex-wrap items-start gap-6\\\">{(['stroke', 'gray', 'primary', 'neutral'] as const).map(appearance => <FeatureCard key={appearance} type={type} appearance={appearance} />)}</div>\\n}\\n\\nexport function SidebarItemsExample() {\\n  const t = useT()\\n  const [selected, setSelected] = React.useState([0, 0])\\n  return <div className=\\\"flex flex-wrap items-start gap-6\\\">{[false, true].map((collapsed, group) => <div key={String(collapsed)} className={collapsed ? 'w-9' : 'w-58'}>\\n    {['dashboard', 'calendar', 'projects'].map((key, index) => <SidebarItem key={key} collapsed={collapsed} icon={React.createElement(navIcons[index], { className: 'size-5' })} active={selected[group] === index} trailing={<ChevronRight className=\\\"size-5\\\" />} onClick={() => setSelected(current => current.map((value, currentGroup) => currentGroup === group ? index : value))}>{t(`design_system.gallery.examples.shell.${key}`)}</SidebarItem>)}\\n    <output className=\\\"sr-only\\\">{t(`design_system.gallery.examples.shell.${['dashboard', 'calendar', 'projects'][selected[group]]}`)}</output>\\n  </div>)}</div>\\n}\\n\\nexport function SidebarIdentityExample() {\\n  const [product, setProduct] = React.useState<Product>('hr')\\n  return <div className=\\\"flex flex-wrap items-start gap-6\\\">{[false, true].map(collapsed => <div key={String(collapsed)} className={collapsed ? 'w-16' : 'w-62'}><WorkspaceIdentity collapsed={collapsed} product={product} onProductChange={setProduct} /><WorkspaceIdentity collapsed={collapsed} product={product} profile /></div>)}</div>\\n}\\n\\nexport function SidebarExample({ product = 'hr', collapsed = false, feature = false }: { product?: Product; collapsed?: boolean; feature?: boolean }) {\\n  const t = useT()\\n  const [compact, setCompact] = React.useState(collapsed)\\n  const [workspace, setWorkspace] = React.useState(product)\\n  const [active, setActive] = React.useState('dashboard')\\n  const copy = (key: string) => t(`design_system.gallery.examples.shell.${key}`)\\n  return <div className=\\\"flex w-full flex-wrap items-start gap-6\\\">\\n    <Sidebar collapsed={compact} className=\\\"max-w-full\\\" aria-label={copy('sidebar')}>\\n      <SidebarHeader className=\\\"relative after:absolute after:inset-x-5 after:bottom-0 after:border-b after:border-border after:content-['']\\\"><WorkspaceIdentity collapsed={compact} product={workspace} onProductChange={value => { setWorkspace(value); setActive('dashboard') }} /></SidebarHeader>\\n      <SidebarContent>\\n        <nav aria-label={copy('main')} className=\\\"w-full\\\"><p className={cn('mb-3 px-1 text-xs uppercase text-muted-foreground', compact && 'sr-only')}>{copy('main')}</p><div className=\\\"flex flex-col gap-1\\\">\\n          {navItems[workspace].map((key, index) => <SidebarItem key={key} icon={React.createElement(navIcons[index], { className: 'size-5' })} active={active === key} trailing={active === key ? <ChevronRight className=\\\"size-5\\\" /> : undefined} className={active === key ? cn(\\\"before:absolute before:top-2 before:h-5 before:w-1 before:rounded-r before:bg-foreground before:content-['']\\\", compact ? 'before:-left-5.5' : 'before:-left-5') : undefined} onClick={() => setActive(key)}>{copy(key)}</SidebarItem>)}\\n        </div></nav>\\n        {!compact && workspace === 'hr' && !feature ? <nav aria-label={copy('favorites')}><p className=\\\"mb-3 px-1 text-xs uppercase text-muted-foreground\\\">{copy('favorites')}</p>{['Loom Mobile App', 'Monday Redesign', 'Udemy Courses'].map((name, index) => <SidebarItem key={name} icon={<Folder className=\\\"size-5\\\" />} active={active === name} trailing={<span className=\\\"text-xs\\\">\u2318{index + 1}</span>} onClick={() => setActive(name)}>{name}</SidebarItem>)}</nav> : null}\\n        <nav aria-label={copy('support')} className=\\\"mt-auto w-full\\\">{['settings', 'support'].map(key => <SidebarItem key={key} icon={key === 'settings' ? <Settings /> : <Headphones />} active={active === key} onClick={() => setActive(key)}>{copy(key)}</SidebarItem>)}</nav>\\n        {feature && !compact ? <FeatureCard type={workspace === 'hr' ? 'meeting' : 'progress'} appearance=\\\"stroke\\\" /> : null}\\n      </SidebarContent>\\n      <SidebarFooter><WorkspaceIdentity collapsed={compact} product={workspace} profile /></SidebarFooter>\\n    </Sidebar>\\n    <div className=\\\"min-w-0 flex-1 basis-64 space-y-4 py-5\\\"><IconButton variant=\\\"outline\\\" aria-label={copy(compact ? 'expand' : 'collapse')} aria-expanded={!compact} onClick={() => setCompact(value => !value)}>{compact ? <PanelLeftOpen /> : <PanelLeftClose />}</IconButton><h3 className=\\\"text-lg font-medium\\\">{navItems[workspace].some(key => key === active) || ['settings', 'support'].includes(active) ? copy(active) : active}</h3><p className=\\\"text-sm text-muted-foreground\\\">{copy('previewHint')}</p></div>\\n  </div>\\n}\\n\\nexport function TopbarExample({ product = 'hr', icons = false }: { product?: Product; icons?: boolean }) {\\n  const t = useT()\\n  const [active, setActive] = React.useState('dashboard')\\n  const [query, setQuery] = React.useState('')\\n  const copy = (key: string) => t(`design_system.gallery.examples.shell.${key}`)\\n  const items = product === 'hr' ? ['dashboard', 'calendar', 'timeOff', 'projects', 'teams', 'settings'] : navItems.finance\\n  return <div className=\\\"w-full overflow-x-auto\\\"><Topbar className=\\\"w-360 flex-nowrap\\\">\\n    <img src={navigationBrandArtwork[product === 'hr' ? 'synergyOriginal' : 'apexOriginal']} alt={product === 'hr' ? 'Synergy' : 'Apex'} className=\\\"size-10\\\" />\\n    <nav aria-label={copy('topbar')} className=\\\"flex min-w-0 flex-1 items-center gap-1\\\">{items.filter(key => copy(key).toLocaleLowerCase().includes(query.toLocaleLowerCase())).map((key, index) => <SidebarItem key={key} icon={icons ? React.createElement(navIcons[index], { className: 'size-5' }) : null} active={active === key} className={cn('w-auto flex-1 px-2', !icons && '[&>span:first-child]:hidden')} onClick={() => setActive(key)}>{copy(key)}</SidebarItem>)}<Popover><PopoverTrigger asChild><Button type=\\\"button\\\" variant=\\\"ghost\\\" className=\\\"h-9 gap-2 px-3\\\">{copy('others')}<ChevronDown className=\\\"size-5\\\" /></Button></PopoverTrigger><PopoverContent className=\\\"p-2\\\">{['settings', 'support'].map(key => <Button key={key} type=\\\"button\\\" variant=\\\"ghost\\\" onClick={() => setActive(key)}>{copy(key)}</Button>)}</PopoverContent></Popover></nav>\\n    <SearchInput value={query} onChange={setQuery} className=\\\"w-58\\\" aria-label={copy('filterNavigation')} />\\n    <Popover><PopoverTrigger asChild><IconButton variant=\\\"ghost\\\" className=\\\"size-10 rounded-lg data-[state=open]:bg-muted\\\" aria-label={copy('notifications')}><Bell className=\\\"size-5\\\" /></IconButton></PopoverTrigger><PopoverContent className=\\\"p-4 text-sm\\\">{copy('noNotifications')}</PopoverContent></Popover>\\n    <Popover><PopoverTrigger asChild><Button type=\\\"button\\\" variant=\\\"ghost\\\" className=\\\"h-10 gap-1.5 rounded-lg py-1 pr-2 pl-1 data-[state=open]:bg-muted\\\"><ShellAvatar size={32} product={product} /><span>{product === 'hr' ? 'Sophia' : 'Arthur'}</span><ChevronDown className=\\\"size-5\\\" /></Button></PopoverTrigger><PopoverContent className=\\\"p-4 text-sm\\\">{copy('localProfile')}</PopoverContent></Popover>\\n  </Topbar><output className=\\\"sr-only\\\">{copy(active)}</output></div>\\n}\\n\\nexport function NavigationBrandsExample() {\\n  return <div className=\\\"flex flex-wrap gap-6\\\">{Object.entries(navigationBrandArtwork).filter(([key]) => key !== 'loom' && !key.endsWith('Avatar')).map(([key, src]) => <figure key={key} className=\\\"space-y-2\\\"><div className={cn('flex size-20 items-center justify-center rounded-lg', key.endsWith('White') ? 'bg-status-info-solid' : key.endsWith('Black') ? 'bg-accent-indigo-foreground' : 'bg-background')}><img src={src} alt={key.startsWith('synergy') ? 'Synergy' : 'Apex'} className=\\\"size-10\\\" /></div><figcaption className=\\\"text-xs text-muted-foreground\\\">{key}</figcaption></figure>)}</div>\\n}\\n\"\nexport const shellExampleCode = (expression: string) => source + \"\\n\" + expression + \"\\n\"\n"],
+  "mappings": "AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACR,MAAM,mBAAmB,CAAC,eAAuB,SAAS,OAAO,aAAa;",
+  "names": []
+}