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

package/src/modules/design_system/gallery/demos/registered-icons.tsx

@@ -0,0 +1,117 @@
+import * as React from 'react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { LUCIDE_ICON_REGISTRY } from '@open-mercato/ui/backend/icons/lucideRegistry'
+import { SearchInput } from '@open-mercato/ui/primitives/search-input'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Pagination } from '@open-mercato/ui/primitives/pagination'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+import { Popover, PopoverClose, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+
+function pascalCase(registryName: string): string {
+  return registryName
+    .split(/[-_]/)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('')
+}
+
+function IconTile({ name }: { name: string }) {
+  const t = useT()
+  const Icon = LUCIDE_ICON_REGISTRY[name]
+  const jsxSnippet = `<${pascalCase(name)} aria-hidden className="size-4" />`
+
+  const copy = React.useCallback(async (payload: string) => {
+    try {
+      await navigator.clipboard.writeText(payload)
+      flash(t('design_system.gallery.iconCopied', 'Copied: {snippet}', { snippet: payload }), 'success')
+    } catch {
+      flash(t('design_system.gallery.copyFailed', 'Could not copy the snippet'), 'error')
+    }
+  }, [t])
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          className="h-auto min-h-28 min-w-0 flex-col gap-3 whitespace-normal rounded-lg border border-border bg-background p-3"
+        >
+          <Icon aria-hidden className="size-7 text-foreground" strokeWidth={1.75} />
+          <code className="max-w-full break-words text-xs leading-4 text-muted-foreground">{name}</code>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="center" className="w-auto max-w-xs p-2">
+        <div className="space-y-1">
+          <PopoverClose asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={() => copy(name)}
+              className="h-auto w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus"
+            >
+              <span className="text-xs font-medium text-foreground">
+                {t('design_system.gallery.iconCopyMeta', 'Copy name for page.meta icon')}
+              </span>
+              <code className="text-xs text-muted-foreground">{name}</code>
+            </Button>
+          </PopoverClose>
+          <PopoverClose asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={() => copy(jsxSnippet)}
+              className="h-auto w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-muted focus-visible:outline-none focus-visible:shadow-focus"
+            >
+              <span className="text-xs font-medium text-foreground">
+                {t('design_system.gallery.iconCopyJsx', 'Copy JSX (lucide-react)')}
+              </span>
+              <code className="max-w-full truncate text-xs text-muted-foreground">{jsxSnippet}</code>
+            </Button>
+          </PopoverClose>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export function IconGrid({ collectionControl }: { collectionControl?: React.ReactNode } = {}) {
+  const t = useT()
+  const [query, setQuery] = React.useState('')
+  const names = React.useMemo(() => Object.keys(LUCIDE_ICON_REGISTRY).sort((a, b) => a.localeCompare(b)), [])
+  const [page, setPage] = React.useState(1)
+  const needle = query.trim().toLowerCase()
+  const filtered = needle ? names.filter((name) => name.toLowerCase().includes(needle)) : names
+  const visible = filtered.slice((page - 1) * 48, page * 48)
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center gap-3">
+        {collectionControl}
+        <div className="max-w-sm flex-1">
+          <SearchInput
+            value={query}
+            onChange={value => { setQuery(value); setPage(1) }}
+            placeholder={t('design_system.gallery.iconSearchPlaceholder', 'Filter icons…')}
+            aria-label={t('design_system.gallery.iconSearchPlaceholder', 'Filter icons…')}
+          />
+        </div>
+        <p className="text-xs text-muted-foreground">
+          {needle
+            ? t('design_system.gallery.iconCountFiltered', '{visible} of {total} icons', {
+                visible: filtered.length,
+                total: names.length,
+              })
+            : t('design_system.gallery.iconCountAll', '{total} icons', { total: names.length })}
+        </p>
+      </div>
+      {visible.length ? <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-6">
+        {visible.map((name) => (
+          <IconTile key={name} name={name} />
+        ))}
+      </div> : <EmptyState title={t('design_system.gallery.noResults')} />}
+      {filtered.length > 48 ? <Pagination page={page} pageSize={48} total={filtered.length} showPageSize={false} onPageChange={setPage} aria-label={t('design_system.gallery.sourceIcons.pages')} /> : null}
+    </div>
+  )
+}
+

package/src/modules/design_system/gallery/demos/selection-cards.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react'
+import { Settings } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { CheckboxField } from '@open-mercato/ui/primitives/checkbox-field'
+import { RadioGroup } from '@open-mercato/ui/primitives/radio'
+import { RadioField } from '@open-mercato/ui/primitives/radio-field'
+import { Switch } from '@open-mercato/ui/primitives/switch'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@open-mercato/ui/primitives/dialog'
+import avatar from '../assets/avatar-photo.png'
+import mastercard from '../assets/menu-mastercard.svg'
+import spotify from '../assets/menu-spotify.svg'
+import company from '../assets/menu-apex.svg'
+import { selectionArtwork } from '../assets/selection-artwork'
+
+export type SelectionCardKind = 'icon' | 'avatar' | 'provider' | 'brand' | 'company'
+type SelectionControl = 'checkbox' | 'radio' | 'switch'
+const imageSource = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src
+
+export 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'
+
+function SelectionLeading({ kind }: { kind: SelectionCardKind }) {
+  if (kind === 'avatar') return <Avatar label="James Brown" size={40} src={imageSource(avatar)} aria-hidden="true" />
+  const source = kind === 'icon' ? selectionArtwork.keyIcon : imageSource(kind === 'provider' ? mastercard : kind === 'brand' ? spotify : company)
+  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'} />
+}
+
+function SourceSelectionCard({ control, kind, state }: { control: SelectionControl; kind: SelectionCardKind; state: 'default' | 'active' | 'disabled' }) {
+  const t = useT()
+  const disabled = state === 'disabled'
+  const fields = {
+    label: t('design_system.gallery.samples.selection.label'),
+    sublabel: t('design_system.gallery.samples.selection.sublabel'),
+    description: t('design_system.gallery.samples.selection.description'),
+    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>,
+    disabled,
+    containerClassName: 'min-w-0 flex-1 gap-3.5',
+    contentClassName: disabled ? '[&_label]:text-text-disabled [&_label]:opacity-100 [&_p]:text-text-disabled [&_span]:text-text-disabled' : undefined,
+    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'),
+  }
+  return (
+    <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')}>
+      <SelectionLeading kind={kind} />
+      {control === 'radio' ? <RadioField value={state} flip {...fields} /> : control === 'switch' ? <SwitchField defaultChecked={state === 'active'} {...fields} /> : <CheckboxField defaultChecked={state !== 'default'} flip {...fields} />}
+    </div>
+  )
+}
+
+export function SelectionSourceCardsDemo({ control, kind }: { control: SelectionControl; kind: SelectionCardKind }) {
+  const t = useT()
+  if (control === 'radio') return (
+    <div className="grid gap-3">
+      <RadioGroup defaultValue="active" aria-label={t('design_system.gallery.samples.selection.preferences')} className="gap-3">
+        <SourceSelectionCard control={control} kind={kind} state="default" />
+        <SourceSelectionCard control={control} kind={kind} state="active" />
+      </RadioGroup>
+      <RadioGroup value="disabled" disabled aria-label={t('design_system.gallery.samples.selection.preferences')}>
+        <SourceSelectionCard control={control} kind={kind} state="disabled" />
+      </RadioGroup>
+    </div>
+  )
+  return <div className="grid gap-3">{(['default', 'active', 'disabled'] as const).map(state => <SourceSelectionCard key={state} control={control} kind={kind} state={state} />)}</div>
+}
+
+export function IntegrationSwitchDemo({ alignment, appearance }: { alignment: 'horizontal' | 'vertical'; appearance: 'card' | 'list' }) {
+  const t = useT()
+  const id = React.useId()
+  const [checked, setChecked] = React.useState(false)
+  const [open, setOpen] = React.useState(false)
+  const horizontal = alignment === 'horizontal'
+  const card = appearance === 'card'
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <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')}>
+        <img src={card ? selectionArtwork.officeCard : selectionArtwork.officeList} alt="" className={cn('shrink-0', card ? 'size-10' : 'size-12')} />
+        <div className={cn('flex min-w-0 flex-col gap-1', horizontal && 'min-w-40 flex-1')}>
+          <div className="flex flex-wrap items-center gap-1.5">
+            <span id={id} className={cn('font-medium text-foreground', card ? 'text-sm leading-5' : 'text-base leading-6')}>Microsoft Office 365</span>
+            <Badge size={16} appearance="light" tone="info">{t('design_system.gallery.samples.selection.new')}</Badge>
+          </div>
+          <p className={cn('text-muted-foreground', card ? 'text-xs leading-4' : 'text-sm leading-5')}>{t('design_system.gallery.samples.selection.integrationDescription')}</p>
+        </div>
+        <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>
+        <Switch aria-labelledby={id} checked={checked} onCheckedChange={setChecked} className={horizontal ? undefined : card ? 'absolute top-5 right-5' : 'absolute top-3 right-3'} />
+      </div>
+        <DialogContent onKeyDownCapture={event => { if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { event.preventDefault(); setOpen(false) } }}>
+          <DialogHeader><DialogTitle>{t('design_system.gallery.samples.selection.integrationDialog')}</DialogTitle><DialogDescription>{t('design_system.gallery.samples.selection.integrationDescription')}</DialogDescription></DialogHeader>
+          <SwitchField label={t('design_system.gallery.samples.selection.integrationEnabled')} checked={checked} onCheckedChange={setChecked} />
+          <DialogFooter><Button variant="outline" onClick={() => setOpen(false)}>{t('common.close')}</Button></DialogFooter>
+        </DialogContent>
+    </Dialog>
+  )
+}

package/src/modules/design_system/gallery/demos/shell-code.generated.ts

@@ -0,0 +1,3 @@
+// Generated by yarn storybook:generate from shell.tsx.
+const 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\">⌘{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"
+export const shellExampleCode = (expression: string) => source + "\n" + expression + "\n"

package/src/modules/design_system/gallery/demos/shell.tsx

@@ -0,0 +1,183 @@
+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">⌘{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>
+}

package/src/modules/design_system/gallery/demos/source-artwork.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { loadSourceArtwork, type SourceArtwork, type SourceArtworkGroup } from '@open-mercato/ui/assets/source-artwork'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { SearchInput } from '@open-mercato/ui/primitives/search-input'
+import { Pagination } from '@open-mercato/ui/primitives/pagination'
+import { EmptyState } from '@open-mercato/ui/primitives/empty-state'
+import { Popover, PopoverContent, PopoverTrigger } from '@open-mercato/ui/primitives/popover'
+import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
+
+const pageSize = 48
+
+function ArtworkTile({ asset, group, duplicate }: { asset: SourceArtwork; group: SourceArtworkGroup; duplicate: boolean }) {
+  const t = useT()
+  const [notice, setNotice] = React.useState('')
+  const illustration = group === 'thumbnails'
+  const name = illustration ? t(`design_system.gallery.thumbnailNames.${asset.name}`, asset.name) : asset.name
+  const category = illustration ? t(`design_system.gallery.thumbnailCategories.${asset.category}`, asset.category) : asset.category
+  const label = duplicate ? `${name} (${illustration ? category : asset.id})` : name
+  async function copy() {
+    const code = `import { loadSourceArtwork } from '@open-mercato/ui/assets/source-artwork'\n\nconst assets = await loadSourceArtwork('${group}')\nconst asset = assets.find(item => item.id === '${asset.id}')\n\n<img src={asset?.src} width={asset?.width} height={asset?.height} alt="" />`
+    try { await navigator.clipboard.writeText(code); setNotice(t('design_system.gallery.sourceIcons.copied')) }
+    catch { setNotice(t('design_system.gallery.copyFailed')) }
+  }
+  return <Popover onOpenChange={() => setNotice('')}>
+    <PopoverTrigger asChild>
+      <Button type="button" variant="ghost" data-source-node={asset.id} aria-label={label} className="h-auto min-h-36 min-w-0 flex-col gap-3 whitespace-normal rounded-lg border border-border bg-background p-3">
+        <span className={cn("flex w-full items-center justify-center rounded-md bg-muted p-2", illustration ? "h-40" : "h-20")}><img src={asset.src} width={asset.width} height={asset.height} alt="" loading="lazy" className="max-h-full max-w-full object-contain drop-shadow-sm" /></span>
+        <span className="max-w-full break-words text-center text-xs font-normal leading-4">{name}</span>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent className={cn("space-y-4 p-4", illustration ? "w-80" : "w-72")} aria-label={label}>
+      <div className={cn("flex items-center justify-center rounded-md bg-status-neutral-solid p-4", illustration ? "h-64" : "h-32")}><img src={asset.src} width={asset.width} height={asset.height} alt="" className="max-h-full max-w-full object-contain" /></div>
+      <div><p className="break-words font-medium">{name}</p><p className="text-xs text-muted-foreground">{category} · {asset.width} × {asset.height}</p></div>
+      <Button type="button" size="sm" variant="outline" onClick={copy}>{t('design_system.gallery.sourceIcons.copy')}</Button>
+      {notice ? <p role="status" className="text-xs text-muted-foreground">{notice}</p> : null}
+    </PopoverContent>
+  </Popover>
+}
+
+export function SourceArtworkCatalogue({ group, collectionControl }: { group: SourceArtworkGroup; collectionControl?: React.ReactNode }) {
+  const t = useT()
+  const [assets, setAssets] = React.useState<readonly SourceArtwork[] | null>(null)
+  const [failed, setFailed] = React.useState(false)
+  const [attempt, setAttempt] = React.useState(0)
+  const [query, setQuery] = React.useState('')
+  const [page, setPage] = React.useState(1)
+
+  React.useEffect(() => {
+    let active = true
+    setAssets(null)
+    setFailed(false)
+    setPage(1)
+    setQuery('')
+    loadSourceArtwork(group).then(items => {
+      if (active) setAssets(items)
+    }).catch(() => { if (active) setFailed(true) })
+    return () => { active = false }
+  }, [group, attempt])
+
+  if (failed) return <div className="space-y-5">{collectionControl}<ErrorMessage label={t('design_system.gallery.loadFailed')} action={<Button type="button" variant="outline" onClick={() => setAttempt(value => value + 1)}>{t('design_system.gallery.retry')}</Button>} /></div>
+  if (!assets) return <div className="space-y-5">{collectionControl}<LoadingMessage label={t('design_system.gallery.sourceArtwork.loading')} /></div>
+  const needle = query.trim().toLowerCase()
+  const nameCounts = new Map<string, number>()
+  for (const asset of assets) nameCounts.set(asset.name, (nameCounts.get(asset.name) ?? 0) + 1)
+  const filtered = assets.filter(asset => {
+    const translated = group === 'thumbnails' ? `${t(`design_system.gallery.thumbnailNames.${asset.name}`, asset.name)} ${t(`design_system.gallery.thumbnailCategories.${asset.category}`, asset.category)}` : ''
+    return `${asset.name} ${asset.category} ${translated}`.toLowerCase().includes(needle)
+  })
+  const visible = filtered.slice((page - 1) * pageSize, page * pageSize)
+
+  return <div className="w-full min-w-0 space-y-5" data-example="source-artwork-catalogue" data-collection={group}>
+    <div className="flex flex-wrap items-center gap-4">
+      {collectionControl}
+      <SearchInput value={query} onChange={value => { setQuery(value); setPage(1) }} className="w-80 max-w-full" aria-label={t('design_system.gallery.sourceArtwork.search')} placeholder={t('design_system.gallery.sourceArtwork.search')} />
+      <p role="status" className="text-sm text-muted-foreground">{t('design_system.gallery.sourceArtwork.count', { visible: filtered.length, total: assets.length })}</p>
+    </div>
+    {visible.length ? <div className={cn("grid gap-3", group === "thumbnails" ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3" : "grid-cols-2 sm:grid-cols-3 lg:grid-cols-5")}>
+      {visible.map(asset => <ArtworkTile key={asset.id} asset={asset} group={group} duplicate={(nameCounts.get(asset.name) ?? 0) > 1} />)}
+    </div> : <EmptyState title={t('design_system.gallery.noResults')} />}
+    {filtered.length > pageSize ? <Pagination page={page} pageSize={pageSize} total={filtered.length} showPageSize={false} onPageChange={setPage} aria-label={t('design_system.gallery.sourceArtwork.pages')} /> : null}
+  </div>
+}
+
+export function sourceArtworkCode(group: SourceArtworkGroup) {
+  return `import { loadSourceArtwork } from '@open-mercato/ui/assets/source-artwork'\n\nconst artwork = await loadSourceArtwork('${group}')\n\n<div className="flex flex-wrap gap-4">\n  {artwork.slice(0, 24).map(asset => <img key={asset.id} src={asset.src} width={asset.width} height={asset.height} alt={asset.name} />)}\n</div>`
+}