@open-mercato/core 0.7.1-develop.7203.1.9396450b78 → 0.8.0

package/src/modules/design_system/gallery/demos/marketing-widgets.tsx

@@ -0,0 +1,189 @@
+import * as React from 'react'
+import { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Line, LineChart, Pie, PieChart, PolarAngleAxis, PolarGrid, Radar, RadarChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis } from 'recharts'
+import { ArrowDownLeft, ArrowUp, ArrowUpRight, CheckCircle2, ChevronLeft, ChevronRight, Clock3, Code, Info, Minus, Plus, Store, Target, UserRound } from 'lucide-react'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { ChartContainer, ChartTooltipContent } from '@open-mercato/ui/backend/charts'
+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 { Card } from '@open-mercato/ui/primitives/card'
+import { CompactButton } from '@open-mercato/ui/primitives/compact-button'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@open-mercato/ui/primitives/dialog'
+import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
+import { SearchInput } from '@open-mercato/ui/primitives/search-input'
+import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
+import { marketingBrands, marketingProducts, marketingWorldMap, marketingActivityIcons } from '../assets/marketing-artwork'
+
+export type MarketingWidgetKind = 'total-sales' | 'total-visitors' | 'conversion-rate' | 'user-retention' | 'weekly-visitors' | 'visitor-channels' | 'geography' | 'realtime-visitors' | 'marketing-channels' | 'product-performance' | 'shipping-tracking' | 'my-products' | 'product-categories' | 'customer-segments' | 'sales-channels' | 'campaign-data' | 'support-analytics' | 'recent-activities'
+const key = (name: string) => `design_system.gallery.samples.marketing.${name}`
+const chartColor = 'var(--chart-orange)'
+const palette = ['var(--chart-orange)','var(--chart-amber)','var(--chart-teal)','var(--chart-cyan)','var(--chart-violet)','var(--chart-indigo)']
+function useMarketing() {
+  const t = useT()
+  const locale = useLocale()
+  const number = (value: number, digits = 0) => new Intl.NumberFormat(locale,{maximumFractionDigits:digits,minimumFractionDigits:digits}).format(value)
+  const money = (value: number) => new Intl.NumberFormat(locale,{style:'currency',currency:'USD',maximumFractionDigits:value % 1 ? 2 : 0}).format(value)
+  const date = (value: string, options: Intl.DateTimeFormatOptions = {month:'short',day:'numeric',year:'numeric'}) => new Intl.DateTimeFormat(locale,{...options,timeZone:'UTC'}).format(new Date(value))
+  return { t, locale, number, money, date }
+}
+function Trend({ value, badge = false, previous = false }: { value: number; badge?: boolean; previous?: boolean }) {
+  const { t, number } = useMarketing()
+  const label = `${value > 0 ? '+' : ''}${number(value,1)}%`
+  return <span className="inline-flex items-center gap-1 whitespace-nowrap text-sm">{badge ? <Badge appearance="light" tone={value < 0 ? 'error' : 'success'} size={20}>{label}</Badge> : <span className={value < 0 ? 'text-status-error-icon' : 'text-status-success-icon'}>{label}</span>}{previous ? <span className="text-muted-foreground">{t(key('versusWeek'))}</span> : null}</span>
+}
+function MarketingFrame({ children, compact = false, tall = false, flush = false, className }: { children: React.ReactNode; compact?: boolean; tall?: boolean; flush?: boolean; className?: string }) {
+  return <Card data-slot="marketing-widget" className={cn('relative w-88 max-w-full overflow-hidden rounded-xl border-0 bg-background ring-1 ring-inset ring-border shadow-xs',tall ? 'h-196' : compact ? 'h-44.5' : 'h-95',flush ? 'gap-0 p-0' : 'gap-5 p-5',className)}>{children}</Card>
+}
+function Header({ title, value, action, children, info = false, className }: { title: string; value?: React.ReactNode; action?: React.ReactNode; children?: React.ReactNode; info?: boolean; className?: string }) {
+  return <div className={cn('flex h-14 shrink-0 items-start gap-2',className)}><div className="min-w-0 flex-1"><h3 className="flex items-center gap-1 text-sm font-medium leading-5 text-muted-foreground">{title}{info ? <Info aria-hidden="true" className="size-3 shrink-0 text-text-disabled" /> : null}</h3><div className="mt-1 flex items-center gap-2"><span className="whitespace-nowrap text-2xl font-medium leading-8 tracking-tight">{value}</span>{children}</div></div>{action}</div>
+}
+function Details({ title, children, label, className }: { title: string; children: React.ReactNode; label?: string; className?: string }) {
+  const {t} = useMarketing()
+  const [open,setOpen] = React.useState(false)
+  return <Dialog open={open} onOpenChange={setOpen}><Button asChild variant="outline" className={cn('h-7 shrink-0 rounded-lg px-2.5 text-sm font-normal',className)}><DialogTrigger>{label ?? t(key('details'))}</DialogTrigger></Button><DialogContent onKeyDownCapture={event=>{if(event.key==='Enter'&&(event.ctrlKey||event.metaKey)){event.preventDefault();setOpen(false)}}}><DialogHeader><DialogTitle>{title}</DialogTitle><DialogDescription>{t(key('localData'))}</DialogDescription></DialogHeader><ScrollArea className="max-h-96" scrollbarSize="sm">{children}</ScrollArea><DialogFooter><Button variant="outline" onClick={()=>setOpen(false)}>{t(key('close'))}</Button></DialogFooter></DialogContent></Dialog>
+}
+function Period({ value, onChange, compact = false }: { value: string; onChange: (value: string)=>void; compact?: boolean }) {
+  const {t}=useMarketing()
+  return compact ? <Select value={value} onValueChange={onChange}><SelectTrigger aria-label={t(key('period'))} className="h-7 w-auto gap-2 rounded-lg px-2.5 text-sm"><SelectValue /></SelectTrigger><SelectContent>{['weekly','monthly','yearly'].map(option=><SelectItem key={option} value={option}>{t(key(option))}</SelectItem>)}</SelectContent></Select> : <SegmentedControl value={value} onValueChange={onChange} aria-label={t(key('period'))} className="h-6 w-full shrink-0 rounded-sm bg-background p-0">{['1d','1w','1m','3m','1y'].map(option=><SegmentedControlItem key={option} value={option} className="h-6 flex-1 rounded-none border-r border-border p-0 text-xs last:border-0 data-[state=checked]:bg-muted data-[state=checked]:font-medium data-[state=checked]:shadow-none">{t(key(`period${option}`))}</SegmentedControlItem>)}</SegmentedControl>
+}
+function Choices({ values, value, onChange, label }: { values: string[]; value: string; onChange: (value:string)=>void; label: string }) {
+  const {t}=useMarketing()
+  return <SegmentedControl value={value} onValueChange={onChange} aria-label={label} className="h-7 max-w-full gap-2 rounded-none border-0 bg-transparent p-0">{values.map(option=><SegmentedControlItem key={option} value={option} className="h-7 rounded-lg bg-muted px-2.5 text-sm font-normal data-[state=checked]:bg-accent-orange/10 data-[state=checked]:font-normal data-[state=checked]:text-accent-orange-text data-[state=checked]:shadow-none data-[state=unchecked]:bg-muted">{t(key(option))}</SegmentedControlItem>)}</SegmentedControl>
+}
+function DataList({ rows }: { rows: { label: string; value: React.ReactNode; detail?: React.ReactNode; icon?: React.ReactNode }[] }) {
+  return <div className="flex flex-col gap-4">{rows.map(row=><div key={row.label} className="flex min-h-5 items-center gap-2 text-sm text-muted-foreground">{row.icon}<span className="min-w-0 flex-1">{row.label}</span><span>{row.value}</span>{row.detail ? <span className="ml-3 flex w-18 items-center justify-end gap-1">{row.detail}</span> : null}</div>)}</div>
+}
+const salesSeries = [28,14,33,11,57,26,57,7,42,39,24,44,31,36,15,25,13,21,41,46,15,30,24,44,18]
+function TotalSales() {
+  const {t,money}=useMarketing()
+  const [period,setPeriod]=React.useState('1w')
+  const factor = {'1d':0.4,'1w':1,'1m':2,'3m':3,'1y':7}[period] ?? 1
+  const rows=[{label:t(key('onlineStore')),value:money(52.12*factor),icon:<Store aria-hidden="true" className="size-5" />,delta:4.5},{label:'Facebook',value:money(38.45*factor),icon:<img src={marketingBrands.facebook} alt="" className="size-5" />,delta:-2.8},{label:'Instagram',value:money(37.75*factor),icon:<img src={marketingBrands.instagram} alt="" className="size-5" />,delta:3.2}].map(row=>({...row,detail:<><ArrowUp aria-hidden="true" className={cn('size-4',row.delta < 0 ? 'rotate-180 text-status-error-icon':'text-status-success-icon')} />{row.delta>0?'+':''}{row.delta}%</>}))
+  return <MarketingFrame><Header title={t(key('totalSales'))} value={money(128.32*factor)} action={<Details title={t(key('totalSales'))} label={t(key('report'))}><DataList rows={rows} /></Details>}><Trend value={2} badge /></Header><Period value={period} onChange={setPeriod}/><ChartContainer config={{value:{label:t(key('sales')),color:chartColor}}} className="h-27 min-h-0 w-full shrink-0" aria-label={t(key('totalSales'))}><ResponsiveContainer width="100%" height="100%"><LineChart data={salesSeries.map((value,index)=>({index,value:value*factor}))} margin={{top:0,right:0,bottom:0,left:0}}><CartesianGrid stroke="var(--border)" strokeDasharray="3 3"/><Tooltip content={<ChartTooltipContent/>}/><Line dataKey="value" type="linear" stroke={chartColor} strokeWidth={1.5} dot={false} isAnimationActive={false}/></LineChart></ResponsiveContainer></ChartContainer><DataList rows={rows}/></MarketingFrame>
+}
+function TotalVisitors() {
+  const {t,number}=useMarketing()
+  const values=[{key:'desktop',value:27,delta:-3.2,color:'bg-chart-amber'},{key:'tablet',value:12,delta:-6.4,color:'bg-chart-cyan'},{key:'mobile',value:61,delta:0.8,color:'bg-chart-violet'}]
+  return <MarketingFrame><Header title={t(key('totalVisitors'))} value={number(237456)}><Trend value={-1.4} badge/></Header><div className="flex min-h-0 flex-1 border-t border-border pt-5">{values.map(item=><div key={item.key} className="flex min-w-0 flex-1 flex-col border-r border-dashed border-border px-4 first:pl-0 last:border-0 last:pr-0"><p className="text-sm text-muted-foreground">{t(key(item.key))}</p><p className="mt-1 text-xl font-medium">{item.value}%</p><span className="mt-auto flex items-center gap-1 text-sm text-muted-foreground">{item.delta>0?'+':''}{number(item.delta,1)}%{item.delta<0?<ArrowDownLeft aria-hidden="true" className="size-3 text-status-error-icon"/>:<ArrowUpRight aria-hidden="true" className="size-3 text-status-success-icon"/>}</span><span className={cn('mt-4 h-2 w-full rounded-sm',item.color)}/></div>)}</div></MarketingFrame>
+}
+function ConversionRate() {
+  const {t,number}=useMarketing()
+  const rows=[['addedToCart',3842,1.8],['reachedCheckout',1256,-1.2],['purchased',649,2.4]] as const
+  const list=<DataList rows={rows.map(([label,value,delta])=>({label:t(key(label)),value:number(value),detail:<Trend value={delta}/>}))}/>
+  const series=[12,9,6,12,3,8,7,6,23,19,28,3,14,4].map((value,index)=>({month:index,value,previous:value+8+(index%3)*5}))
+  return <MarketingFrame><Header title={t(key('conversionRate'))} value={`${number(16.9,1)}%`} action={<Details title={t(key('conversionRate'))}>{list}</Details>}><Trend value={2.1} badge/></Header><div className="border-t border-border pt-5">{list}</div><ChartContainer config={{value:{label:t(key('purchased')),color:chartColor},previous:{label:t(key('previousPeriod')),color:'var(--chart-orange)'}}} className="min-h-0 flex-1" aria-label={t(key('conversionRate'))}><ResponsiveContainer width="100%" height="100%"><AreaChart data={series} margin={{top:0,right:0,left:0,bottom:0}}><CartesianGrid stroke="var(--border)"/><Tooltip content={<ChartTooltipContent/>}/><Area dataKey="previous" stroke="none" fill={chartColor} fillOpacity={0.18} isAnimationActive={false}/><Area dataKey="value" stroke="none" fill={chartColor} fillOpacity={1} isAnimationActive={false}/></AreaChart></ResponsiveContainer></ChartContainer><div className="-mt-3 flex justify-between text-overline text-muted-foreground">{['feb','mar','apr','may','jun','jul'].map(month=><span key={month}>{t(key(month))}</span>)}</div></MarketingFrame>
+}
+function Retention() {
+  const {t,number}=useMarketing()
+  const [selected,setSelected]=React.useState<[number,number]|null>(null)
+  const cells=Array.from({length:12},(_,row)=>Array.from({length:12-row},(_,column)=>({row,column,value:Math.max(8,100-row*6-column*4+(row*column%5)*5)}))).flat()
+  return <MarketingFrame><Header title={t(key('retention'))} value="24%" action={<Details title={t(key('retention'))}><DataList rows={cells.filter(cell=>cell.column===0).map(cell=>({label:t(key('month'),undefined,{month:cell.row+1}),value:`${cell.value}%`}))}/></Details>}><Trend value={2} badge/></Header><div className="grid h-48 shrink-0 grid-cols-12 grid-rows-12 gap-0.5" role="group" aria-label={t(key('retentionCohorts'))}>{cells.map(cell=><button key={`${cell.row}-${cell.column}`} type="button" aria-label={t(key('cohortCell'),undefined,{cohort:cell.row+1,month:cell.column+1,value:cell.value})} aria-pressed={selected?.[0]===cell.row&&selected?.[1]===cell.column} className="min-h-0 min-w-0 bg-chart-orange outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-1" style={{gridRow:cell.row+1,gridColumn:cell.column+1,opacity:cell.value/100}} onClick={()=>setSelected([cell.row,cell.column])}/>)}</div><div className="-mt-3 grid grid-cols-12 text-center text-overline text-muted-foreground">{Array.from({length:12},(_,index)=><span key={index}>{index+1}</span>)}</div><p aria-live="polite" className="mt-auto flex h-7 items-center gap-2 rounded-lg border border-border px-2 text-xs text-muted-foreground"><Info aria-hidden="true" className="size-3 shrink-0"/><span className="truncate">{selected?t(key('cohortCell'),undefined,{cohort:selected[0]+1,month:selected[1]+1,value:number(cells.find(cell=>cell.row===selected[0]&&cell.column===selected[1])?.value??0)}):t(key('retentionUpdated'))}</span></p></MarketingFrame>
+}
+function WeeklyVisitors() {
+  const {t,number}=useMarketing()
+  const values=['happiness','sadness','anger','fear','surprise','disgust','love','excitement']
+  const [series,setSeries]=React.useState({fresh:true,returning:true})
+  return <MarketingFrame className="gap-4"><Header title={t(key('weeklyVisitors'))} value={number(16008)}><Trend value={1.1} badge/></Header><div className="flex h-7 shrink-0 rounded-lg border border-border">{(['fresh','returning'] as const).map((item,index)=><Button key={item} variant="ghost" aria-pressed={series[item]} onClick={()=>setSeries(current=>({...current,[item]:!current[item]}))} className="h-7 min-w-0 flex-1 gap-2 p-0 text-xs font-normal"><span className={cn('size-2 rounded-full',index?'bg-chart-emerald':'bg-chart-orange',!series[item]&&'opacity-30')}/>{t(key(item==='fresh'?'newVisitors':'returningVisitors'))}</Button>)}</div><ChartContainer config={{fresh:{label:t(key('newVisitors')),color:chartColor},returning:{label:t(key('returningVisitors')),color:'var(--chart-emerald)'}}} className="min-h-0 flex-1" aria-label={t(key('weeklyVisitors'))}><ResponsiveContainer width="100%" height="100%"><RadarChart data={values.map((label,index)=>({label:t(key(label)),fresh:[76,39,84,72,40,70,74,32][index],returning:[43,75,39,40,0,54,39,75][index]}))} outerRadius="62%"><PolarGrid stroke="var(--border)"/><PolarAngleAxis dataKey="label" tick={{fontSize:11,fill:'var(--muted-foreground)'}}/>{series.fresh?<Radar name={t(key('newVisitors'))} dataKey="fresh" stroke={chartColor} fill={chartColor} fillOpacity={0.08} dot={{r:2}} isAnimationActive={false}/>:null}{series.returning?<Radar name={t(key('returningVisitors'))} dataKey="returning" stroke="var(--chart-emerald)" fill="var(--chart-emerald)" fillOpacity={0.08} dot={{r:2}} isAnimationActive={false}/>:null}<Tooltip content={<ChartTooltipContent/>}/></RadarChart></ResponsiveContainer></ChartContainer></MarketingFrame>
+}
+function ChannelRows({ marketing = false }: { marketing?: boolean }) {
+  const {t,money,number}=useMarketing()
+  const names=marketing?['acquisition','conversion','roi']:['Facebook','Instagram','Google']
+  return <div className="flex flex-col gap-4"><div className="flex items-center text-xs text-muted-foreground"><span className="flex-1">{t(key('channels'))}</span><span className="w-22">{t(key(marketing?'metric':'percent'))}</span><span className="w-12">{t(key('total'))}</span></div>{names.map((name,index)=><div key={name} className="flex h-5 items-center gap-2 text-sm text-muted-foreground">{marketing ? index===0?<UserRound aria-hidden="true" className="size-5"/>:index===1?<Clock3 aria-hidden="true" className="size-5"/>:<Target aria-hidden="true" className="size-5"/>:<img src={marketingBrands[name.toLowerCase() as 'facebook'|'instagram'|'google']} alt="" className="size-5"/>}<span className="min-w-0 flex-1">{marketing?t(key(name)):name}</span><span className="w-18">{marketing?[money(38.25),t(key('days'),undefined,{count:4.2}),'324%'][index]:`${[28,23,32][index]}%`}</span><span className="w-12 text-right">{marketing?<Trend value={[5.2,3.8,4.5][index]}/>:number([6958,5716,7952][index])}</span></div>)}</div>
+}
+function Channels({ marketing = false }: { marketing?: boolean }) {
+  const {t}=useMarketing()
+  const title=t(key(marketing?'marketingChannels':'visitorChannels'))
+  return <MarketingFrame><Header title={title} info={marketing} value={marketing?'82%':'78%'} action={marketing?<Details title={title}><ChannelRows marketing/></Details>:undefined}><Trend value={marketing?2.1:-0.4} badge={!marketing} previous={marketing}/></Header><div className="space-y-4"><div className="flex h-2 gap-1">{[41,41,16].map((width,index)=><span key={index} className="rounded-sm" style={{width:`${width}%`,background:marketing?palette[index]:['var(--chart-amber)','var(--chart-cyan)','var(--chart-violet)'][index]}}/>)}</div><div className="flex justify-between gap-1 text-xs text-muted-foreground">{(marketing?['organicSearch','socialMedia','direct']:['organic','referral','direct']).map((name,index)=><span key={name} className="flex items-center gap-2"><span className="size-2 shrink-0 rounded-full" style={{background:marketing?palette[index]:['var(--chart-amber)','var(--chart-cyan)','var(--chart-violet)'][index]}}/>{t(key(name))}</span>)}</div></div><div className={cn('border-t border-border pt-5',marketing&&'border-dashed')}><ChannelRows marketing={marketing}/></div><Details title={title} label={t(key('viewReports'))} className="mt-auto h-8 w-full"><ChannelRows marketing={marketing}/></Details></MarketingFrame>
+}
+const mapPoints=[{key:'greenland',x:161,y:7,visitors:1032},{key:'usa',x:80,y:69,visitors:8530},{key:'brazil',x:129,y:126,visitors:3240},{key:'turkey',x:222,y:110,visitors:6504},{key:'china',x:276,y:57,visitors:9322}]
+function Geography() {
+  const {t,number}=useMarketing()
+  const [selected,setSelected]=React.useState('turkey')
+  const [zoom,setZoom]=React.useState(1)
+  const place=mapPoints.find(point=>point.key===selected)??mapPoints[3]
+  return <MarketingFrame className="gap-4"><Header title={t(key('geography'))} value={number(place.visitors)} action={<Details title={t(key('geography'))}><DataList rows={mapPoints.map(point=>({label:t(key(point.key)),value:number(point.visitors)}))}/></Details>}><span className="flex h-6 items-center gap-1 rounded-sm border border-border px-1 text-xs text-muted-foreground">{selected==='turkey'?<img src={marketingBrands.turkey} alt="" className="size-4"/>:null}{t(key(selected))}</span></Header><div className="flex h-7 shrink-0 items-center justify-around rounded-lg border border-border text-xs text-muted-foreground">{['men','women','other'].map((item,index)=><span key={item}>{t(key(item))} <span className="text-foreground">{[32,60,8][index]}%</span></span>)}</div><div data-slot="marketing-map" className="relative h-56 w-full shrink-0 overflow-hidden"><div className="absolute inset-0 origin-center transition-transform" style={{transform:`scale(${zoom})`}}><span aria-hidden="true" className="absolute left-0 top-0 h-56 w-83 bg-text-disabled" style={{maskImage:`url("${marketingWorldMap}")`,WebkitMaskImage:`url("${marketingWorldMap}")`,maskSize:'100% 100%',WebkitMaskSize:'100% 100%'}}/>{mapPoints.map(point=><button key={point.key} type="button" aria-label={t(key(point.key))} aria-pressed={selected===point.key} onClick={()=>setSelected(point.key)} style={{left:`${point.x/312*100}%`,top:`${point.y/224*100}%`}} className={cn('absolute flex size-4 items-center justify-center rounded-full bg-background ring-1 ring-inset ring-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground',selected===point.key&&'bg-accent-orange ring-4 ring-accent-orange/20')}><span className={cn('size-2 rounded-full',selected===point.key?'bg-accent-orange-foreground':'bg-text-disabled')}/></button>)}</div><div className="absolute bottom-0 left-0 flex flex-col gap-2"><CompactButton aria-label={t(key('zoomIn'))} disabled={zoom>=2} onClick={()=>setZoom(current=>Math.min(2,current+0.25))}><Plus aria-hidden="true"/></CompactButton><CompactButton aria-label={t(key('zoomOut'))} disabled={zoom<=1} onClick={()=>setZoom(current=>Math.max(1,current-0.25))}><Minus aria-hidden="true"/></CompactButton></div><CompactButton className="absolute bottom-0 right-0" aria-label={t(key('resetMap'))} onClick={()=>{setZoom(1);setSelected('turkey')}}><Code aria-hidden="true"/></CompactButton></div></MarketingFrame>
+}
+function RealtimeVisitors() {
+  const {t,number}=useMarketing()
+  return <MarketingFrame><Header title={t(key('realtimeVisitors'))} value={t(key('millions'),undefined,{value:number(32.6,1)})}><Trend value={8.4} badge/></Header><div className="relative h-39 shrink-0" aria-label={t(key('regionalVisitors'))}><div className="absolute left-1/2 top-1/2 -ml-10.5 -mt-9.5 flex size-20 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-chart-emerald/25 text-xl text-status-success-foreground">20%</div><div className="absolute left-1/2 top-1/2 ml-10 mt-1 flex size-33 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-chart-orange/25 text-title-4 font-medium text-accent-orange-text">48%</div><div className="absolute left-1/2 top-1/2 -ml-14.5 mt-7.5 flex size-24 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-chart-amber/25 text-2xl font-medium text-status-warning-foreground">32%</div></div><DataList rows={['europe','asia','americas'].map((region,index)=>({label:t(key(region)),value:t(key('millions'),undefined,{value:number([15.8,10.2,6.6][index],1)}),icon:<span className="ml-1 size-2 rounded-full" style={{background:[palette[0],palette[1],'var(--chart-emerald)'][index]}}/>,detail:<><ArrowUpRight aria-hidden="true" className={cn('size-4',index===1?'rotate-90 text-status-error-icon':'text-status-success-icon')}/>+{number([4.7,6.2,3.8][index],1)}%</>}))}/></MarketingFrame>
+}
+function ProductPerformance() {
+  const {t,number}=useMarketing()
+  const [period,setPeriod]=React.useState('1w')
+  const factor=period==='1w'?1:period==='1d'?0.6:0.85
+  return <MarketingFrame><Header title={t(key('productPerformance'))} value={`${number(22.8*factor,1)}%`}><Trend value={8.4} badge/></Header><Period value={period} onChange={setPeriod}/><div className="flex h-39.5 shrink-0 items-end gap-2.5" aria-label={t(key('productPerformance'))}>{[50,80,100,60,40].map((value,index)=><div key={index} className="flex min-w-0 flex-1 flex-col items-center justify-between rounded-lg bg-chart-orange px-1 py-2 text-xs font-medium text-accent-orange-foreground" style={{height:`${value*factor}%`}}><span>{Math.round(value*factor)}%</span><span>{String.fromCharCode(65+index)}</span></div>)}</div><div className="flex flex-1">{['averageRating','satisfaction','returnRate'].map((name,index)=><div key={name} className="flex min-w-0 flex-1 flex-col items-center justify-center border-r border-border last:border-0"><p className="text-base font-medium text-muted-foreground">{[number(4.7,1),'92%',`${number(4.2,1)}%`][index]}</p><p className="mt-1 text-xs text-muted-foreground">{t(key(name))}</p></div>)}</div></MarketingFrame>
+}
+const productData=[{image:0,name:'Apple Watch S5 GPS 40MM',count:500},{image:4,name:'AirPods Max Green',count:960},{image:6,name:'iMac M1 24-inch Purple',count:45},{image:8,name:'iPhone 15 Pro 512GB',count:150},{image:1,name:'MacBook Air',count:380},{image:3,name:'AirPods Pro',count:780}]
+function ProductRows({ query = '' }: { query?: string }) {
+  const {t,number}=useMarketing()
+  const matches=productData.filter(product=>product.name.toLocaleLowerCase().includes(query.toLocaleLowerCase()))
+  return matches.length ? <div>{matches.map(product=><div key={product.name} className="flex min-h-17 items-center gap-3 border-b border-border px-5 py-3 last:border-0"><img src={marketingProducts[product.image].src} alt="" className="size-8 shrink-0 object-contain"/><div className="min-w-0"><p className="truncate text-sm font-medium">{product.name}</p><p className="mt-1 text-xs text-muted-foreground">{t(key('unitsSold'),undefined,{count:number(product.count)})}</p></div></div>)}</div> : <p role="status" className="p-5 text-sm text-muted-foreground">{t(key('noProducts'))}</p>
+}
+function MyProducts() {
+  const {t,number}=useMarketing()
+  const [query,setQuery]=React.useState('')
+  return <MarketingFrame flush><Header title={t(key('myProducts'))} info value={number(468)} className="h-23 px-5 py-5" action={<Details title={t(key('myProducts'))} label={t(key('seeAll'))}><ProductRows query={query}/></Details>}><Trend value={2.1} previous/></Header><div className="border-y border-border px-5"><SearchInput aria-label={t(key('searchProducts'))} placeholder={t(key('searchProducts'))} value={query} onChange={setQuery} className="h-11 rounded-none border-0 px-0 shadow-none"/></div><ScrollArea className="min-h-0 flex-1" scrollbarSize="xs"><ProductRows query={query}/></ScrollArea></MarketingFrame>
+}
+function ShippingTracking() {
+  const {t,number,date}=useMarketing()
+  const [period,setPeriod]=React.useState('weekly')
+  const [status,setStatus]=React.useState('delivered')
+  const [product,setProduct]=React.useState(0)
+  const factor=(status==='delivered'?1:status==='inTransit'?0.55:0.2)*(period==='weekly'?1:period==='monthly'?3:12)
+  const data=[0,10,44,59,0,29,0,0,45,29,29,10,29,29,0,59,29,29].map((value,index)=>({day:date(`2024-02-${String(19+Math.floor(index/3)).padStart(2,'0')}T00:00:00Z`,{weekday:'short'}),value:(value+product*3)*factor}))
+  return <MarketingFrame flush><div className="flex h-35 shrink-0 flex-col gap-4 p-5"><Header title={t(key('shippingTracking'))} value={number(Math.round(3844*factor))} info action={<Period compact value={period} onChange={setPeriod}/>}><Trend value={1.8} badge/></Header><Choices values={['delivered','inTransit','returned']} value={status} onChange={setStatus} label={t(key('shippingStatus'))}/></div><div className="flex h-12 shrink-0 items-center gap-2 border-y border-border px-5"><img src={marketingProducts[product].src} alt="" className="size-6"/><span className="min-w-0 flex-1 truncate text-sm text-muted-foreground">{marketingProducts[product].name}</span><div className="flex"><CompactButton aria-label={t(key('previousProduct'))} onClick={()=>setProduct(current=>(current+marketingProducts.length-1)%marketingProducts.length)}><ChevronLeft aria-hidden="true"/></CompactButton><CompactButton aria-label={t(key('nextProduct'))} onClick={()=>setProduct(current=>(current+1)%marketingProducts.length)}><ChevronRight aria-hidden="true"/></CompactButton></div></div><ChartContainer config={{value:{label:t(key(status)),color:chartColor}}} className="min-h-0 flex-1" aria-label={t(key('shippingTracking'))}><ResponsiveContainer width="100%" height="100%"><LineChart data={data} margin={{top:0,right:20,left:20,bottom:0}}><CartesianGrid stroke="var(--border)"/><XAxis dataKey="day" interval={2} tickLine={false} axisLine={false} tick={{fontSize:12,fill:'var(--muted-foreground)'}}/><Tooltip content={<ChartTooltipContent/>}/><Line type="stepAfter" dataKey="value" dot={false} stroke={chartColor} strokeWidth={1.5} isAnimationActive={false}/></LineChart></ResponsiveContainer></ChartContainer></MarketingFrame>
+}
+function ProductCategories() {
+  const {t,number}=useMarketing()
+  const [category,setCategory]=React.useState(0)
+  const categories=['accessories','computers','audio']
+  const percentage=[58,72,34][category]
+  const details=<DataList rows={categories.map((name,index)=>({label:t(key(name)),value:t(key('productsCount'),undefined,{count:[45,32,18][index]})}))}/>
+  return <MarketingFrame compact className="gap-4"><Header title={t(key('productCategories'))} value={`${percentage}%`} info action={<Details title={t(key('productCategories'))}>{details}</Details>}><Trend value={2.1} previous/></Header><div className="flex h-7.5 shrink-0 gap-0.5" role="meter" aria-label={t(key('productCategories'))} aria-valuemin={0} aria-valuemax={100} aria-valuenow={percentage}>{Array.from({length:36},(_,index)=><span key={index} className={cn('min-w-0 flex-1',index<Math.round(percentage/100*36)?'bg-chart-orange':'bg-border')}/>)}</div><div className="flex min-h-5 items-center gap-2 text-sm text-muted-foreground"><span>{t(key(categories[category]))}</span><div className="flex"><CompactButton aria-label={t(key('previousCategory'))} onClick={()=>setCategory(current=>(current+2)%3)}><ChevronLeft aria-hidden="true"/></CompactButton><CompactButton aria-label={t(key('nextCategory'))} onClick={()=>setCategory(current=>(current+1)%3)}><ChevronRight aria-hidden="true"/></CompactButton></div><span className="ml-auto whitespace-nowrap">{t(key('productsCount'),undefined,{count:number([45,32,18][category])})}</span><Trend value={3.2}/></div></MarketingFrame>
+}
+function CustomerSegments() {
+  const {t,money}=useMarketing()
+  const data=[{label:'premium',value:32,amount:9450},{label:'regular',value:46,amount:8320},{label:'new',value:20,amount:3280}]
+  return <MarketingFrame compact><div className="flex h-5 shrink-0 items-center justify-between gap-2"><h3 className="flex items-center gap-1 text-sm font-medium text-muted-foreground">{t(key('customerSegments'))}<Info aria-hidden="true" className="size-3 text-text-disabled"/></h3><Trend value={5.8} previous/></div><div className="flex h-25 items-center gap-5"><ChartContainer config={Object.fromEntries(data.map((item,index)=>[item.label,{label:t(key(item.label)),color:palette[index]}]))} className="size-25 shrink-0" aria-label={t(key('customerSegments'))}><PieChart width={100} height={100}><Pie data={data} dataKey="value" nameKey="label" cx={45} cy={45} innerRadius={34} outerRadius={49} paddingAngle={3} stroke="none" startAngle={90} endAngle={450} isAnimationActive={false}>{data.map((item,index)=><Cell key={item.label} fill={palette[index]}/>)}</Pie><Tooltip content={<ChartTooltipContent/>}/></PieChart></ChartContainer><div className="flex min-w-0 flex-1 flex-col gap-3">{data.map((item,index)=><div key={item.label} className="flex items-center gap-2 text-sm text-muted-foreground"><span className="size-2 shrink-0 rounded-full" style={{background:palette[index]}}/><span className="min-w-0 flex-1 truncate">{t(key(item.label))}</span><span>{money(item.amount)}</span><span className="text-xs">{item.value}%</span></div>)}</div></div></MarketingFrame>
+}
+function SalesChannels() {
+  const {t,number,date}=useMarketing()
+  const [period,setPeriod]=React.useState('weekly')
+  const multiplier=period==='weekly'?1:period==='monthly'?4:52
+  return <MarketingFrame compact className="gap-4"><Header title={t(key('salesChannels'))} value={number(246*multiplier)} info action={<Period compact value={period} onChange={setPeriod}/>}><Trend value={2.1} previous/></Header><div className="space-y-2"><div className="flex justify-between text-xs text-muted-foreground"><span>{date('2024-02-21T00:00:00Z')}</span><span>{date(period==='weekly'?'2024-02-28T00:00:00Z':period==='monthly'?'2024-03-21T00:00:00Z':'2025-02-21T00:00:00Z')}</span></div><div className="flex h-10.5 gap-1" aria-label={t(key('salesChannels'))}>{[26,21,16,13,10,5,2].map((width,index)=><span key={index} className="rounded-sm" style={{flex:width,background:['var(--chart-indigo)','var(--chart-cyan)','var(--chart-violet)','var(--chart-orange)','var(--chart-amber)','var(--chart-emerald)','var(--chart-teal)'][index]}}/>)}</div></div></MarketingFrame>
+}
+function CampaignData() {
+  const {t,money}=useMarketing()
+  return <MarketingFrame compact flush><Header title={t(key('campaignData'))} value={money(1750)} info className="h-23.5 px-5 py-5" action={<Details title={t(key('campaignData'))}><DataList rows={[{label:t(key('campaignBudget')),value:money(1750)},{label:t(key('usedBudget')),value:money(32900)},{label:t(key('campaignProgress')),value:'45%'}]}/></Details>}><Badge size={20} appearance="lighter" tone="success">{t(key('lastDays'),undefined,{count:15})}</Badge></Header><div className="flex min-h-0 flex-1 border-t border-border"><ChartContainer config={{value:{label:t(key('campaignData')),color:chartColor}}} className="w-44 min-w-0 shrink-0 border-r border-accent-orange-border" aria-label={t(key('campaignData'))}><ResponsiveContainer width="100%" height="100%"><AreaChart data={salesSeries.slice(0,18).map((value,index)=>({index,value:value+index*2}))} margin={{top:0,left:0,right:0,bottom:0}}><Tooltip content={<ChartTooltipContent/>}/><Area dataKey="value" type="linear" stroke={chartColor} strokeWidth={1.5} fill={chartColor} fillOpacity={0.18} isAnimationActive={false}/></AreaChart></ResponsiveContainer></ChartContainer><div className="flex min-w-0 flex-1 flex-col justify-end p-4"><p className="text-base font-medium">45%</p><p className="text-xs text-muted-foreground">{t(key('budgetUsed'),undefined,{amount:money(32900)})}</p></div></div></MarketingFrame>
+}
+type TicketStatus = 'solved' | 'inProgress' | 'pending'
+const ticketSamples: {name:string;status:TicketStatus;minutes:number;priority:string;id:number}[]=[{name:'James Brown',status:'solved',minutes:12,priority:'high',id:98745},{name:'Sophia Williams',status:'inProgress',minutes:48,priority:'medium',id:98744},{name:'Matthew Johnson',status:'pending',minutes:19,priority:'low',id:98743}]
+function SupportAnalytics() {
+  const {t,number,date}=useMarketing()
+  const [period,setPeriod]=React.useState('weekly')
+  const [category,setCategory]=React.useState('technical')
+  const [tab,setTab]=React.useState('allTickets')
+  const [tickets,setTickets]=React.useState(ticketSamples)
+  const [selected,setSelected]=React.useState<number|null>(null)
+  const factor=(['technical','billing','account','product'].indexOf(category)+4)/4*(period==='weekly'?1:period==='monthly'?4:52)
+  const current=tickets.find(ticket=>ticket.id===selected)
+  const visible=tickets.filter(ticket=>tab==='allTickets'||(tab==='openTickets'?ticket.status!=='solved':ticket.status==='solved'))
+  const metrics=[{label:'firstResponse',detail:'belowSla',value:t(key('minutes'),undefined,{count:Math.round(15*factor)}),delta:-22},{label:'resolutionTime',detail:'meetingSla',value:t(key('minutes'),undefined,{count:Math.round(48*factor)}),delta:-18},{label:'csat',detail:'aboveTarget',value:'4.8/5',delta:-0.3}]
+  return <><MarketingFrame tall flush><div className="flex h-34 shrink-0 flex-col gap-3 p-5"><Header title={t(key('supportAnalytics'))} value={number(Math.round(2450*factor))} info action={<Period compact value={period} onChange={setPeriod}/>}><Trend value={5.4}/><span className="text-sm text-muted-foreground">{t(key('totalTickets'))}</span></Header><Choices values={['technical','billing','account','product']} value={category} onChange={setCategory} label={t(key('ticketCategory'))}/></div><ChartContainer config={{value:{label:t(key('responseTime')),color:chartColor}}} className="h-44 shrink-0 border-y border-border px-3 pt-4" aria-label={t(key('responseTime'))}><ResponsiveContainer width="100%" height="100%"><BarChart data={[10,34,44,58,44,34,34].map((value,index)=>({day:date(`2024-02-${19+index}T00:00:00Z`,{weekday:'short'}),value:Math.round(value*factor)}))} margin={{top:0,right:0,left:0,bottom:0}}><XAxis dataKey="day" axisLine={false} tickLine={false} tick={{fontSize:12,fill:'var(--muted-foreground)'}}/><Tooltip content={<ChartTooltipContent/>}/><ReferenceLine y={30*factor} stroke="var(--muted-foreground)" strokeDasharray="4 4" label={{value:t(key('targetMinutes'),undefined,{count:30}),fill:'var(--foreground)',fontSize:12,position:'insideTopLeft'}}/><Bar dataKey="value" radius={[6,6,6,6]} isAnimationActive={false}>{Array.from({length:7},(_,index)=><Cell key={index} fill={index===4?chartColor:'var(--border)'}/>)}</Bar></BarChart></ResponsiveContainer></ChartContainer><Tabs value={tab} onValueChange={setTab} variant="underline" className="min-h-0 flex-1 gap-0"><TabsList className="h-12 w-full shrink-0 justify-start gap-4 px-5"><TabsTrigger value="allTickets" className="min-w-0 flex-auto justify-center px-0 text-sm font-normal data-[state=active]:border-accent-orange-border hover:text-accent-orange-text">{t(key('allTickets'))}</TabsTrigger><TabsTrigger value="openTickets" className="min-w-0 flex-auto justify-center px-0 text-sm font-normal data-[state=active]:border-accent-orange-border hover:text-accent-orange-text">{t(key('openTickets'))}</TabsTrigger><TabsTrigger value="solvedTickets" className="min-w-0 flex-auto justify-center px-0 text-sm font-normal data-[state=active]:border-accent-orange-border hover:text-accent-orange-text">{t(key('solvedTickets'))}</TabsTrigger></TabsList>{['allTickets','openTickets','solvedTickets'].map(value=><TabsContent key={value} value={value} className="m-0 flex min-h-0 flex-1 flex-col"><div className="flex shrink-0 flex-col gap-4 px-5 pb-5 pt-4"><div className="flex text-xs text-muted-foreground"><span className="flex-1">{t(key('channels'))}</span><span className="w-18">{t(key('actual'))}</span><span className="w-10">{t(key('average'))}</span></div>{metrics.map((metric,index)=><div key={metric.label} className="flex items-center text-sm"><div className="min-w-0 flex-1"><p>{t(key(metric.label))}</p><p className="mt-1 text-xs text-muted-foreground">{t(key(metric.detail))}</p></div><span className="w-18 text-muted-foreground">{metric.value}</span><span className={cn('w-10',index===2?'text-status-error-icon':'text-status-success-icon')}>{number(metric.delta,index===2?1:0)}%</span></div>)}</div><div className="min-h-0 flex-1 border-t border-border px-5 pt-4"><p className="mb-3 text-xs text-muted-foreground">{t(key('recentTickets'))}</p><ScrollArea className="h-40" scrollbarSize="xs"><div className="flex flex-col gap-4">{visible.map((ticket,index)=><Button key={ticket.id} variant="ghost" onClick={()=>setSelected(ticket.id)} className="h-auto min-h-10 w-full justify-start gap-3 p-0 text-left font-normal hover:bg-muted"><Avatar label={ticket.name} size={32} className={index===1?'bg-chart-amber/20 text-status-warning-foreground':index===2?'bg-chart-violet/20 text-accent-indigo':'bg-muted'}/><div className="min-w-0 flex-1"><p className="truncate text-sm font-medium">{ticket.name}</p><p className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">{t(key(ticket.priority))} · <span className={ticket.status==='solved'?'text-status-success-icon':'text-status-warning-icon'}>{t(key(ticket.status))}</span></p></div><div className="text-right"><p className="text-sm">{t(key('minutes'),undefined,{count:ticket.minutes})}</p><p className="mt-1 text-xs text-muted-foreground">#TKT-{ticket.id}</p></div></Button>)}</div></ScrollArea></div></TabsContent>)}</Tabs></MarketingFrame><Dialog open={selected!==null} onOpenChange={open=>{if(!open)setSelected(null)}}><DialogContent onKeyDownCapture={event=>{if(event.key==='Enter'&&(event.ctrlKey||event.metaKey)){event.preventDefault();setSelected(null)}}}><DialogHeader><DialogTitle>{current?.name}</DialogTitle><DialogDescription>{current?`#TKT-${current.id}`:t(key('recentTickets'))}</DialogDescription></DialogHeader>{current?<DataList rows={[{label:t(key('status')),value:t(key(current.status))},{label:t(key('priority')),value:t(key(current.priority))}]}/>:null}<DialogFooter><Button variant="outline" onClick={()=>setSelected(null)}>{t(key('close'))}</Button><Button disabled={current?.status==='solved'} onClick={()=>{setTickets(items=>items.map(ticket=>ticket.id===selected?{...ticket,status:'solved'}:ticket));setSelected(null)}}>{t(key('resolveTicket'))}</Button></DialogFooter></DialogContent></Dialog></>
+}
+const activityKinds=[{key:'inventory',icon:'stack-line',color:'text-chart-violet',detail:'inventoryDetail'},{key:'price',icon:'price-tag-line',color:'text-status-success-icon',detail:'priceDetail'},{key:'newProduct',icon:'add-circle-line',color:'text-chart-violet',detail:'newProductDetail'},{key:'images',icon:'image-line',color:'text-status-warning-icon',detail:'imagesDetail'},{key:'descriptionUpdated',icon:'pencil-line',color:'text-muted-foreground',detail:'descriptionDetail'}] satisfies {key:string;icon:string;color:string;detail:string}[]
+function RecentActivities() {
+  const {t,date}=useMarketing()
+  const [period,setPeriod]=React.useState('today')
+  const [query,setQuery]=React.useState('')
+  const records=Array.from({length:period==='today'?7:period==='yesterday'?2:9},(_,index)=>({id:index,...activityKinds[index%5]})).filter(item=>[t(key(item.key)),t(key(item.detail)),t(key('activityProduct'))].join(' ').toLocaleLowerCase().includes(query.toLocaleLowerCase()))
+  const list=<div className="flex flex-col gap-5">{records.map((item,index)=><div key={item.id} className="relative flex gap-4"><div className="relative flex w-7 shrink-0 justify-center"><span className="z-10 flex size-7 items-center justify-center rounded-full border border-border bg-background shadow-xs"><span aria-hidden="true" className={cn('size-4 bg-current',item.color)} style={{maskImage:`url("${marketingActivityIcons[item.key as keyof typeof marketingActivityIcons]}")`,WebkitMaskImage:`url("${marketingActivityIcons[item.key as keyof typeof marketingActivityIcons]}")`,maskSize:'contain',WebkitMaskSize:'contain'}}/></span>{index<records.length-1?<span aria-hidden="true" className="absolute bottom-0 top-8 w-px bg-border"/>:null}</div><div className="min-w-0 flex-1"><div className="flex items-center gap-2"><p className="min-w-0 flex-1 text-sm font-medium">{t(key(item.key))}</p><time className="text-overline text-muted-foreground">{date('2024-02-21T11:30:00Z',{hour:'numeric',minute:'2-digit'})}</time></div><p className="mt-1 text-xs text-muted-foreground">{item.key==='price'?t(key('seasonalDiscount')):t(key('activityProduct'))}</p><p className="mt-1 text-xs text-muted-foreground">{t(key(item.detail))}</p></div></div>)}{!records.length?<p role="status" className="text-sm text-muted-foreground">{t(key('noActivities'))}</p>:null}</div>
+  return <MarketingFrame tall flush><div className="flex h-33 shrink-0 flex-col gap-4 p-5"><div className="flex items-start"><div className="flex-1"><h3 className="text-sm font-medium">{t(key('recentActivities'))}</h3><p className="mt-1 text-sm text-muted-foreground">{t(key('newActivities'),undefined,{count:5})}</p></div><Details title={t(key('recentActivities'))}>{list}</Details></div><Choices values={['today','yesterday','thisWeek']} value={period} onChange={setPeriod} label={t(key('activityPeriod'))}/></div><div className="border-y border-border px-5"><SearchInput aria-label={t(key('searchActivities'))} placeholder={t(key('searchActivities'))} value={query} onChange={setQuery} className="h-12 rounded-none border-0 px-0 shadow-none"/></div><ScrollArea className="min-h-0 flex-1 px-5 py-5" scrollbarSize="xs">{list}</ScrollArea></MarketingFrame>
+}
+const widgets: Record<MarketingWidgetKind, React.ComponentType> = {
+  'total-sales':TotalSales,'total-visitors':TotalVisitors,'conversion-rate':ConversionRate,'user-retention':Retention,'weekly-visitors':WeeklyVisitors,'visitor-channels':Channels,geography:Geography,'realtime-visitors':RealtimeVisitors,'marketing-channels':()=> <Channels marketing/>,'product-performance':ProductPerformance,'shipping-tracking':ShippingTracking,'my-products':MyProducts,'product-categories':ProductCategories,'customer-segments':CustomerSegments,'sales-channels':SalesChannels,'campaign-data':CampaignData,'support-analytics':SupportAnalytics,'recent-activities':RecentActivities,
+}
+export function MarketingWidgetDemo({kind}:{kind:MarketingWidgetKind}) { const Widget=widgets[kind]; return <Widget/> }

package/src/modules/design_system/gallery/demos/menu-fixtures.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react'
+import { Globe, UserRound } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Avatar } from '@open-mercato/ui/primitives/avatar'
+import mastercard from '../assets/menu-mastercard.svg'
+import apex from '../assets/menu-apex.svg'
+import spotify from '../assets/menu-spotify.svg'
+import unitedStates from '../assets/menu-united-states.svg'
+import google from '../assets/select-google.png'
+import poland from '../assets/select-poland.png'
+import avatar from '../assets/avatar-illustration.png'
+
+export type MenuKind = 'basic' | 'country' | 'avatar' | 'provider' | 'brand' | 'company' | 'icon'
+export const selectKinds: MenuKind[] = ['basic', 'country', 'avatar', 'provider', 'brand', 'company']
+export const commandKinds: MenuKind[] = ['basic', 'avatar', 'icon', 'brand', 'company', 'country']
+
+const imageSource = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src
+
+export function useMenuChoices(kind: MenuKind) {
+  const t = useT()
+  return [0, 1, 2].map((index) => ({
+    value: `${kind}-${index}`,
+    label: t(`design_system.gallery.samples.menu.${kind}.${index}`),
+    description: t('design_system.gallery.samples.menu.description'),
+    disabled: index === 2,
+    alternative: index !== 0,
+  }))
+}
+
+export function MenuVisual({ kind, large = false, alternative = false, providerSize = 'row' }: {
+  kind: MenuKind
+  large?: boolean
+  alternative?: boolean
+  providerSize?: 'row' | 'select'
+}) {
+  if (kind === 'avatar') {
+    return <Avatar size={large ? 40 : 20} label={alternative ? 'Sophia Williams' : 'James Brown'} src={alternative ? undefined : imageSource(avatar)} />
+  }
+  const asset = kind === 'country' ? alternative ? poland : unitedStates
+    : kind === 'provider' ? mastercard
+      : kind === 'brand' ? alternative ? google : spotify
+        : kind === 'company' ? apex : undefined
+  const Icon = kind === 'icon' ? UserRound : Globe
+  const content = asset
+    ? <img src={imageSource(asset)} alt="" className={kind === 'provider' ? providerSize === 'select' ? 'h-6 w-8 object-contain' : 'h-5 w-6.5 object-contain' : large ? 'size-6 object-contain' : 'size-5 object-contain'} />
+    : <Icon aria-hidden="true" className={large ? 'size-6' : 'size-5'} />
+  return <span aria-hidden="true" className={large ? 'flex size-10 shrink-0 items-center justify-center rounded-full border border-input bg-background text-muted-foreground' : 'inline-flex shrink-0 items-center justify-center text-muted-foreground'}>{content}</span>
+}

package/src/modules/design_system/gallery/demos/menu-sources.ts

@@ -0,0 +1,5 @@
+export const selectSourceCode = "import * as React from 'react'\nimport { Globe, UserRound } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\nimport mastercard from '@open-mercato/core/modules/design_system/gallery/assets/menu-mastercard.svg'\nimport apex from '@open-mercato/core/modules/design_system/gallery/assets/menu-apex.svg'\nimport spotify from '@open-mercato/core/modules/design_system/gallery/assets/menu-spotify.svg'\nimport unitedStates from '@open-mercato/core/modules/design_system/gallery/assets/menu-united-states.svg'\nimport google from '@open-mercato/core/modules/design_system/gallery/assets/select-google.png'\nimport poland from '@open-mercato/core/modules/design_system/gallery/assets/select-poland.png'\nimport avatar from '@open-mercato/core/modules/design_system/gallery/assets/avatar-illustration.png'\n\nexport type MenuKind = 'basic' | 'country' | 'avatar' | 'provider' | 'brand' | 'company' | 'icon'\nexport const selectKinds: MenuKind[] = ['basic', 'country', 'avatar', 'provider', 'brand', 'company']\nexport const commandKinds: MenuKind[] = ['basic', 'avatar', 'icon', 'brand', 'company', 'country']\n\nconst imageSource = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src\n\nexport function useMenuChoices(kind: MenuKind) {\n  const t = useT()\n  return [0, 1, 2].map((index) => ({\n    value: `${kind}-${index}`,\n    label: t(`design_system.gallery.samples.menu.${kind}.${index}`),\n    description: t('design_system.gallery.samples.menu.description'),\n    disabled: index === 2,\n    alternative: index !== 0,\n  }))\n}\n\nexport function MenuVisual({ kind, large = false, alternative = false, providerSize = 'row' }: {\n  kind: MenuKind\n  large?: boolean\n  alternative?: boolean\n  providerSize?: 'row' | 'select'\n}) {\n  if (kind === 'avatar') {\n    return <Avatar size={large ? 40 : 20} label={alternative ? 'Sophia Williams' : 'James Brown'} src={alternative ? undefined : imageSource(avatar)} />\n  }\n  const asset = kind === 'country' ? alternative ? poland : unitedStates\n    : kind === 'provider' ? mastercard\n      : kind === 'brand' ? alternative ? google : spotify\n        : kind === 'company' ? apex : undefined\n  const Icon = kind === 'icon' ? UserRound : Globe\n  const content = asset\n    ? <img src={imageSource(asset)} alt=\"\" className={kind === 'provider' ? providerSize === 'select' ? 'h-6 w-8 object-contain' : 'h-5 w-6.5 object-contain' : large ? 'size-6 object-contain' : 'size-5 object-contain'} />\n    : <Icon aria-hidden=\"true\" className={large ? 'size-6' : 'size-5'} />\n  return <span aria-hidden=\"true\" className={large ? 'flex size-10 shrink-0 items-center justify-center rounded-full border border-input bg-background text-muted-foreground' : 'inline-flex shrink-0 items-center justify-center text-muted-foreground'}>{content}</span>\n}\n\nimport { Info, Plus } from 'lucide-react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Kbd } from '@open-mercato/ui/primitives/kbd'\nimport { FormField } from '@open-mercato/ui/primitives/form-field'\nimport { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectTriggerLeading, SelectValue } from '@open-mercato/ui/primitives/select'\nimport { Dropdown, DropdownTrigger, DropdownContent, DropdownInput, DropdownList, DropdownEmpty, DropdownItem, DropdownFooter, DropdownCaption } from '@open-mercato/ui/primitives/dropdown'\nimport { CommandMenu, CommandMenuTrigger, CommandMenuContent, CommandMenuInput, CommandMenuList, CommandMenuEmpty, CommandMenuItem, CommandMenuGroup, CommandMenuSeparator, CommandMenuFooter } from '@open-mercato/ui/primitives/command-menu'\n\nexport function SelectSourceExample({ kind, size = 36, state = 'filled' }: {\n  kind: MenuKind\n  size?: 32 | 36 | 40\n  state?: 'default' | 'filled' | 'disabled' | 'error'\n}) {\n  const t = useT()\n  const choices = useMenuChoices(kind)\n  const [value, setValue] = React.useState(state === 'default' || state === 'error' ? '' : choices[0].value)\n  const selected = choices.find((choice) => choice.value === value)\n  const disabled = state === 'disabled'\n  const label = t(`design_system.gallery.samples.menu.kind.${kind}`)\n  const providerPadding = kind !== 'provider' ? undefined : size === 40 ? 'p-2' : size === 36 ? 'p-1.5' : 'p-1'\n  return (\n    <Select value={value} onValueChange={setValue} disabled={disabled}>\n      <FormField label={label} disabled={disabled} description={t('design_system.gallery.samples.menu.hint')} error={state === 'error' ? t('design_system.gallery.samples.menu.required') : undefined}>\n        <SelectTrigger size={size} className={providerPadding}>\n          {kind !== 'basic' && <SelectTriggerLeading><MenuVisual kind={kind} alternative={selected?.alternative} providerSize=\"select\" /></SelectTriggerLeading>}\n          <SelectValue className=\"min-w-0 flex-1 text-left\" placeholder={t('design_system.gallery.samples.menu.placeholder')} />\n        </SelectTrigger>\n      </FormField>\n      <SelectContent>\n        {choices.map((choice) => <SelectItem key={choice.value} value={choice.value} disabled={choice.disabled} leading={kind === 'basic' ? undefined : <MenuVisual kind={kind} alternative={choice.alternative} />}>\n          {choice.label}\n        </SelectItem>)}\n      </SelectContent>\n    </Select>\n  )\n}\n\nexport function SelectSourceMatrix({ size = 36, state = 'filled' }: { size?: 32 | 36 | 40; state?: 'default' | 'filled' | 'disabled' | 'error' }) {\n  return <div className=\"grid w-full gap-6 sm:grid-cols-2 xl:grid-cols-3\">{selectKinds.map((kind) => <SelectSourceExample key={kind} kind={kind} size={size} state={state} />)}</div>\n}\n\n"
+
+export const dropdownSourceCode = "import * as React from 'react'\nimport { Globe, UserRound } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\nimport mastercard from '@open-mercato/core/modules/design_system/gallery/assets/menu-mastercard.svg'\nimport apex from '@open-mercato/core/modules/design_system/gallery/assets/menu-apex.svg'\nimport spotify from '@open-mercato/core/modules/design_system/gallery/assets/menu-spotify.svg'\nimport unitedStates from '@open-mercato/core/modules/design_system/gallery/assets/menu-united-states.svg'\nimport google from '@open-mercato/core/modules/design_system/gallery/assets/select-google.png'\nimport poland from '@open-mercato/core/modules/design_system/gallery/assets/select-poland.png'\nimport avatar from '@open-mercato/core/modules/design_system/gallery/assets/avatar-illustration.png'\n\nexport type MenuKind = 'basic' | 'country' | 'avatar' | 'provider' | 'brand' | 'company' | 'icon'\nexport const selectKinds: MenuKind[] = ['basic', 'country', 'avatar', 'provider', 'brand', 'company']\nexport const commandKinds: MenuKind[] = ['basic', 'avatar', 'icon', 'brand', 'company', 'country']\n\nconst imageSource = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src\n\nexport function useMenuChoices(kind: MenuKind) {\n  const t = useT()\n  return [0, 1, 2].map((index) => ({\n    value: `${kind}-${index}`,\n    label: t(`design_system.gallery.samples.menu.${kind}.${index}`),\n    description: t('design_system.gallery.samples.menu.description'),\n    disabled: index === 2,\n    alternative: index !== 0,\n  }))\n}\n\nexport function MenuVisual({ kind, large = false, alternative = false, providerSize = 'row' }: {\n  kind: MenuKind\n  large?: boolean\n  alternative?: boolean\n  providerSize?: 'row' | 'select'\n}) {\n  if (kind === 'avatar') {\n    return <Avatar size={large ? 40 : 20} label={alternative ? 'Sophia Williams' : 'James Brown'} src={alternative ? undefined : imageSource(avatar)} />\n  }\n  const asset = kind === 'country' ? alternative ? poland : unitedStates\n    : kind === 'provider' ? mastercard\n      : kind === 'brand' ? alternative ? google : spotify\n        : kind === 'company' ? apex : undefined\n  const Icon = kind === 'icon' ? UserRound : Globe\n  const content = asset\n    ? <img src={imageSource(asset)} alt=\"\" className={kind === 'provider' ? providerSize === 'select' ? 'h-6 w-8 object-contain' : 'h-5 w-6.5 object-contain' : large ? 'size-6 object-contain' : 'size-5 object-contain'} />\n    : <Icon aria-hidden=\"true\" className={large ? 'size-6' : 'size-5'} />\n  return <span aria-hidden=\"true\" className={large ? 'flex size-10 shrink-0 items-center justify-center rounded-full border border-input bg-background text-muted-foreground' : 'inline-flex shrink-0 items-center justify-center text-muted-foreground'}>{content}</span>\n}\n\nimport { Info, Plus } from 'lucide-react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Kbd } from '@open-mercato/ui/primitives/kbd'\nimport { FormField } from '@open-mercato/ui/primitives/form-field'\nimport { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectTriggerLeading, SelectValue } from '@open-mercato/ui/primitives/select'\nimport { Dropdown, DropdownTrigger, DropdownContent, DropdownInput, DropdownList, DropdownEmpty, DropdownItem, DropdownFooter, DropdownCaption } from '@open-mercato/ui/primitives/dropdown'\nimport { CommandMenu, CommandMenuTrigger, CommandMenuContent, CommandMenuInput, CommandMenuList, CommandMenuEmpty, CommandMenuItem, CommandMenuGroup, CommandMenuSeparator, CommandMenuFooter } from '@open-mercato/ui/primitives/command-menu'\n\nexport function DropdownSourceExample({ size = 36, empty = false }: { size?: 36 | 56; empty?: boolean }) {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const [value, setValue] = React.useState('basic')\n  const [query, setQuery] = React.useState(empty ? 'zzzz' : '')\n  const [workspaceCount, setWorkspaceCount] = React.useState(0)\n  return (\n    <div className=\"flex w-full flex-col items-start gap-3\">\n      <Dropdown open={open} onOpenChange={setOpen}>\n        <DropdownTrigger asChild><Button variant=\"outline\">{t('design_system.gallery.samples.menu.openDropdown')}</Button></DropdownTrigger>\n        <DropdownContent className=\"w-96 max-w-full\" aria-label={t('design_system.gallery.samples.menu.openDropdown')} commandProps={{ label: t('design_system.gallery.samples.menu.options') }}>\n          <DropdownInput value={query} onValueChange={setQuery} aria-label={t('design_system.gallery.samples.menu.search')} placeholder={t('design_system.gallery.samples.menu.search')} />\n          <DropdownList>\n            <DropdownEmpty>{t('design_system.gallery.samples.menu.noResults')}</DropdownEmpty>\n            {selectKinds.map((kind) => {\n              const label = t(`design_system.gallery.samples.menu.${kind}.0`)\n              return <DropdownItem key={kind} value={label} size={size} checked={value === kind} leading={<MenuVisual kind={kind} large={size === 56} />}\n                description={size === 56 ? t('design_system.gallery.samples.menu.description') : undefined}\n                sublabel={kind === 'basic' ? t('design_system.gallery.samples.menu.sublabel') : undefined}\n                badge={kind === 'brand' ? <Badge appearance=\"lighter\" tone=\"info\" size={20}>{t('design_system.gallery.samples.menu.new')}</Badge> : undefined}\n                shortcut={kind === 'company' ? <Kbd>\u23181</Kbd> : undefined}\n                onSelect={() => { setValue(kind); setOpen(false) }}>\n                {label}\n              </DropdownItem>\n            })}\n            <DropdownItem value={t('design_system.gallery.samples.menu.unavailable')} size={size} disabled leading={<MenuVisual kind=\"basic\" large={size === 56} />}>{t('design_system.gallery.samples.menu.unavailable')}</DropdownItem>\n          </DropdownList>\n          <DropdownFooter><Button variant=\"outline\" size=\"sm\" className=\"w-full\" onClick={() => { setWorkspaceCount((count) => count + 1); setOpen(false) }}><Plus className=\"size-5\" />{t('design_system.gallery.samples.menu.addWorkspace')}</Button></DropdownFooter>\n          <DropdownCaption>{t('design_system.gallery.samples.menu.localCaption')}</DropdownCaption>\n        </DropdownContent>\n      </Dropdown>\n      <output aria-live=\"polite\" className=\"text-sm text-muted-foreground\">{t('design_system.gallery.samples.menu.selected', { value: t(`design_system.gallery.samples.menu.${value}.0`) })}</output>\n      {workspaceCount > 0 && <output aria-live=\"polite\" className=\"text-sm text-muted-foreground\">{t('design_system.gallery.samples.menu.created', { count: workspaceCount })}</output>}\n    </div>\n  )\n}\n\n"
+
+export const commandSourceCode = "import * as React from 'react'\nimport { Globe, UserRound } from 'lucide-react'\nimport { useT } from '@open-mercato/shared/lib/i18n/context'\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\nimport mastercard from '@open-mercato/core/modules/design_system/gallery/assets/menu-mastercard.svg'\nimport apex from '@open-mercato/core/modules/design_system/gallery/assets/menu-apex.svg'\nimport spotify from '@open-mercato/core/modules/design_system/gallery/assets/menu-spotify.svg'\nimport unitedStates from '@open-mercato/core/modules/design_system/gallery/assets/menu-united-states.svg'\nimport google from '@open-mercato/core/modules/design_system/gallery/assets/select-google.png'\nimport poland from '@open-mercato/core/modules/design_system/gallery/assets/select-poland.png'\nimport avatar from '@open-mercato/core/modules/design_system/gallery/assets/avatar-illustration.png'\n\nexport type MenuKind = 'basic' | 'country' | 'avatar' | 'provider' | 'brand' | 'company' | 'icon'\nexport const selectKinds: MenuKind[] = ['basic', 'country', 'avatar', 'provider', 'brand', 'company']\nexport const commandKinds: MenuKind[] = ['basic', 'avatar', 'icon', 'brand', 'company', 'country']\n\nconst imageSource = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src\n\nexport function useMenuChoices(kind: MenuKind) {\n  const t = useT()\n  return [0, 1, 2].map((index) => ({\n    value: `${kind}-${index}`,\n    label: t(`design_system.gallery.samples.menu.${kind}.${index}`),\n    description: t('design_system.gallery.samples.menu.description'),\n    disabled: index === 2,\n    alternative: index !== 0,\n  }))\n}\n\nexport function MenuVisual({ kind, large = false, alternative = false, providerSize = 'row' }: {\n  kind: MenuKind\n  large?: boolean\n  alternative?: boolean\n  providerSize?: 'row' | 'select'\n}) {\n  if (kind === 'avatar') {\n    return <Avatar size={large ? 40 : 20} label={alternative ? 'Sophia Williams' : 'James Brown'} src={alternative ? undefined : imageSource(avatar)} />\n  }\n  const asset = kind === 'country' ? alternative ? poland : unitedStates\n    : kind === 'provider' ? mastercard\n      : kind === 'brand' ? alternative ? google : spotify\n        : kind === 'company' ? apex : undefined\n  const Icon = kind === 'icon' ? UserRound : Globe\n  const content = asset\n    ? <img src={imageSource(asset)} alt=\"\" className={kind === 'provider' ? providerSize === 'select' ? 'h-6 w-8 object-contain' : 'h-5 w-6.5 object-contain' : large ? 'size-6 object-contain' : 'size-5 object-contain'} />\n    : <Icon aria-hidden=\"true\" className={large ? 'size-6' : 'size-5'} />\n  return <span aria-hidden=\"true\" className={large ? 'flex size-10 shrink-0 items-center justify-center rounded-full border border-input bg-background text-muted-foreground' : 'inline-flex shrink-0 items-center justify-center text-muted-foreground'}>{content}</span>\n}\n\nimport { Info, Plus } from 'lucide-react'\nimport { Button } from '@open-mercato/ui/primitives/button'\nimport { Badge } from '@open-mercato/ui/primitives/badge'\nimport { Kbd } from '@open-mercato/ui/primitives/kbd'\nimport { FormField } from '@open-mercato/ui/primitives/form-field'\nimport { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectTriggerLeading, SelectValue } from '@open-mercato/ui/primitives/select'\nimport { Dropdown, DropdownTrigger, DropdownContent, DropdownInput, DropdownList, DropdownEmpty, DropdownItem, DropdownFooter, DropdownCaption } from '@open-mercato/ui/primitives/dropdown'\nimport { CommandMenu, CommandMenuTrigger, CommandMenuContent, CommandMenuInput, CommandMenuList, CommandMenuEmpty, CommandMenuItem, CommandMenuGroup, CommandMenuSeparator, CommandMenuFooter } from '@open-mercato/ui/primitives/command-menu'\n\nfunction CommandSourceRows({ size, onSelect }: { size: 40 | 64; onSelect: (value: string) => void }) {\n  const t = useT()\n  return <>{commandKinds.map((kind) => {\n    const label = t(`design_system.gallery.samples.menu.${kind}.0`)\n    return <CommandMenuItem key={kind} value={label} size={size} leading={kind === 'basic' ? undefined : <MenuVisual kind={kind} large={size === 64} />}\n      description={size === 64 ? t('design_system.gallery.samples.menu.description') : undefined}\n      sublabel={kind === 'basic' ? t('design_system.gallery.samples.menu.sublabel') : undefined}\n      badge={kind === 'brand' ? <Badge appearance=\"lighter\" tone=\"info\" size={20}>{t('design_system.gallery.samples.menu.new')}</Badge> : undefined}\n      shortcut={kind === 'company' ? <Kbd>\u2318K</Kbd> : undefined}\n      onSelect={() => onSelect(label)}>{label}</CommandMenuItem>\n  })}</>\n}\n\nexport function CommandSourceExample({ size = 40, empty = false, withGroups = false }: { size?: 40 | 64; empty?: boolean; withGroups?: boolean }) {\n  const t = useT()\n  const [open, setOpen] = React.useState(false)\n  const [query, setQuery] = React.useState(empty ? 'zzzz' : '')\n  const [result, setResult] = React.useState('')\n  const onSelect = (label: string) => { setResult(label); setOpen(false) }\n  const rows = <CommandSourceRows size={size} onSelect={onSelect} />\n  return (\n    <div className=\"flex flex-col items-start gap-3\">\n      <CommandMenu open={open} onOpenChange={setOpen}>\n        <CommandMenuTrigger asChild><Button variant=\"outline\">{t('design_system.gallery.samples.menu.openCommand')}</Button></CommandMenuTrigger>\n        <CommandMenuContent title={t('design_system.gallery.samples.menu.openCommand')} commandProps={{ loop: true }}>\n          <CommandMenuInput appearance=\"source\" value={query} onValueChange={setQuery} aria-label={t('design_system.gallery.samples.menu.search')} placeholder={t('design_system.gallery.samples.menu.search')}\n            trailing={<SimpleTooltip content={t('design_system.gallery.samples.menu.hint')}><Button variant=\"ghost\" size=\"2xs\" aria-label={t('design_system.gallery.samples.menu.help')}><Info className=\"size-5\" /></Button></SimpleTooltip>} />\n          <CommandMenuList>\n            <CommandMenuEmpty>{t('design_system.gallery.samples.menu.noResults')}</CommandMenuEmpty>\n            {withGroups ? <CommandMenuGroup heading={t('design_system.gallery.samples.menu.caption')} actionLabel={t('design_system.gallery.samples.menu.seeAll')} onAction={() => setQuery('')}>{rows}</CommandMenuGroup> : rows}\n            {withGroups && <><CommandMenuSeparator /><CommandMenuGroup heading={t('design_system.gallery.samples.menu.unavailable')}><CommandMenuItem value=\"unavailable\" disabled size={size}>{t('design_system.gallery.samples.menu.unavailable')}</CommandMenuItem></CommandMenuGroup></>}\n          </CommandMenuList>\n          <CommandMenuFooter className=\"min-h-12 flex-wrap px-5 py-3.5\" helpSlot={<Button variant=\"link\" size=\"2xs\" onClick={() => setResult(t('design_system.gallery.samples.menu.hint'))}>{t('design_system.gallery.samples.menu.help')}</Button>} />\n        </CommandMenuContent>\n      </CommandMenu>\n      {result && <output aria-live=\"polite\" className=\"text-sm text-muted-foreground\">{t('design_system.gallery.samples.menu.selected', { value: result })}</output>}\n    </div>\n  )\n}\n"

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

@@ -0,0 +1,122 @@
+import * as React from 'react'
+import { Info, Plus } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Kbd } from '@open-mercato/ui/primitives/kbd'
+import { FormField } from '@open-mercato/ui/primitives/form-field'
+import { SimpleTooltip } from '@open-mercato/ui/primitives/tooltip'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectTriggerLeading, SelectValue } from '@open-mercato/ui/primitives/select'
+import { Dropdown, DropdownTrigger, DropdownContent, DropdownInput, DropdownList, DropdownEmpty, DropdownItem, DropdownFooter, DropdownCaption } from '@open-mercato/ui/primitives/dropdown'
+import { CommandMenu, CommandMenuTrigger, CommandMenuContent, CommandMenuInput, CommandMenuList, CommandMenuEmpty, CommandMenuItem, CommandMenuGroup, CommandMenuSeparator, CommandMenuFooter } from '@open-mercato/ui/primitives/command-menu'
+import { MenuVisual, useMenuChoices, selectKinds, commandKinds, type MenuKind } from './menu-fixtures'
+
+export function SelectSourceExample({ kind, size = 36, state = 'filled' }: {
+  kind: MenuKind
+  size?: 32 | 36 | 40
+  state?: 'default' | 'filled' | 'disabled' | 'error'
+}) {
+  const t = useT()
+  const choices = useMenuChoices(kind)
+  const [value, setValue] = React.useState(state === 'default' || state === 'error' ? '' : choices[0].value)
+  const selected = choices.find((choice) => choice.value === value)
+  const disabled = state === 'disabled'
+  const label = t(`design_system.gallery.samples.menu.kind.${kind}`)
+  const providerPadding = kind !== 'provider' ? undefined : size === 40 ? 'p-2' : size === 36 ? 'p-1.5' : 'p-1'
+  return (
+    <Select value={value} onValueChange={setValue} disabled={disabled}>
+      <FormField label={label} disabled={disabled} description={t('design_system.gallery.samples.menu.hint')} error={state === 'error' ? t('design_system.gallery.samples.menu.required') : undefined}>
+        <SelectTrigger size={size} className={providerPadding}>
+          {kind !== 'basic' && <SelectTriggerLeading><MenuVisual kind={kind} alternative={selected?.alternative} providerSize="select" /></SelectTriggerLeading>}
+          <SelectValue className="min-w-0 flex-1 text-left" placeholder={t('design_system.gallery.samples.menu.placeholder')} />
+        </SelectTrigger>
+      </FormField>
+      <SelectContent>
+        {choices.map((choice) => <SelectItem key={choice.value} value={choice.value} disabled={choice.disabled} leading={kind === 'basic' ? undefined : <MenuVisual kind={kind} alternative={choice.alternative} />}>
+          {choice.label}
+        </SelectItem>)}
+      </SelectContent>
+    </Select>
+  )
+}
+
+export function SelectSourceMatrix({ size = 36, state = 'filled' }: { size?: 32 | 36 | 40; state?: 'default' | 'filled' | 'disabled' | 'error' }) {
+  return <div className="grid w-full gap-6 sm:grid-cols-2 xl:grid-cols-3">{selectKinds.map((kind) => <SelectSourceExample key={kind} kind={kind} size={size} state={state} />)}</div>
+}
+
+export function DropdownSourceExample({ size = 36, empty = false }: { size?: 36 | 56; empty?: boolean }) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const [value, setValue] = React.useState('basic')
+  const [query, setQuery] = React.useState(empty ? 'zzzz' : '')
+  const [workspaceCount, setWorkspaceCount] = React.useState(0)
+  return (
+    <div className="flex w-full flex-col items-start gap-3">
+      <Dropdown open={open} onOpenChange={setOpen}>
+        <DropdownTrigger asChild><Button variant="outline">{t('design_system.gallery.samples.menu.openDropdown')}</Button></DropdownTrigger>
+        <DropdownContent className="w-96 max-w-full" aria-label={t('design_system.gallery.samples.menu.openDropdown')} commandProps={{ label: t('design_system.gallery.samples.menu.options') }}>
+          <DropdownInput value={query} onValueChange={setQuery} aria-label={t('design_system.gallery.samples.menu.search')} placeholder={t('design_system.gallery.samples.menu.search')} />
+          <DropdownList>
+            <DropdownEmpty>{t('design_system.gallery.samples.menu.noResults')}</DropdownEmpty>
+            {selectKinds.map((kind) => {
+              const label = t(`design_system.gallery.samples.menu.${kind}.0`)
+              return <DropdownItem key={kind} value={label} size={size} checked={value === kind} leading={<MenuVisual kind={kind} large={size === 56} />}
+                description={size === 56 ? t('design_system.gallery.samples.menu.description') : undefined}
+                sublabel={kind === 'basic' ? t('design_system.gallery.samples.menu.sublabel') : undefined}
+                badge={kind === 'brand' ? <Badge appearance="lighter" tone="info" size={20}>{t('design_system.gallery.samples.menu.new')}</Badge> : undefined}
+                shortcut={kind === 'company' ? <Kbd>⌘1</Kbd> : undefined}
+                onSelect={() => { setValue(kind); setOpen(false) }}>
+                {label}
+              </DropdownItem>
+            })}
+            <DropdownItem value={t('design_system.gallery.samples.menu.unavailable')} size={size} disabled leading={<MenuVisual kind="basic" large={size === 56} />}>{t('design_system.gallery.samples.menu.unavailable')}</DropdownItem>
+          </DropdownList>
+          <DropdownFooter><Button variant="outline" size="sm" className="w-full" onClick={() => { setWorkspaceCount((count) => count + 1); setOpen(false) }}><Plus className="size-5" />{t('design_system.gallery.samples.menu.addWorkspace')}</Button></DropdownFooter>
+          <DropdownCaption>{t('design_system.gallery.samples.menu.localCaption')}</DropdownCaption>
+        </DropdownContent>
+      </Dropdown>
+      <output aria-live="polite" className="text-sm text-muted-foreground">{t('design_system.gallery.samples.menu.selected', { value: t(`design_system.gallery.samples.menu.${value}.0`) })}</output>
+      {workspaceCount > 0 && <output aria-live="polite" className="text-sm text-muted-foreground">{t('design_system.gallery.samples.menu.created', { count: workspaceCount })}</output>}
+    </div>
+  )
+}
+
+function CommandSourceRows({ size, onSelect }: { size: 40 | 64; onSelect: (value: string) => void }) {
+  const t = useT()
+  return <>{commandKinds.map((kind) => {
+    const label = t(`design_system.gallery.samples.menu.${kind}.0`)
+    return <CommandMenuItem key={kind} value={label} size={size} leading={kind === 'basic' ? undefined : <MenuVisual kind={kind} large={size === 64} />}
+      description={size === 64 ? t('design_system.gallery.samples.menu.description') : undefined}
+      sublabel={kind === 'basic' ? t('design_system.gallery.samples.menu.sublabel') : undefined}
+      badge={kind === 'brand' ? <Badge appearance="lighter" tone="info" size={20}>{t('design_system.gallery.samples.menu.new')}</Badge> : undefined}
+      shortcut={kind === 'company' ? <Kbd>⌘K</Kbd> : undefined}
+      onSelect={() => onSelect(label)}>{label}</CommandMenuItem>
+  })}</>
+}
+
+export function CommandSourceExample({ size = 40, empty = false, withGroups = false }: { size?: 40 | 64; empty?: boolean; withGroups?: boolean }) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState(empty ? 'zzzz' : '')
+  const [result, setResult] = React.useState('')
+  const onSelect = (label: string) => { setResult(label); setOpen(false) }
+  const rows = <CommandSourceRows size={size} onSelect={onSelect} />
+  return (
+    <div className="flex flex-col items-start gap-3">
+      <CommandMenu open={open} onOpenChange={setOpen}>
+        <CommandMenuTrigger asChild><Button variant="outline">{t('design_system.gallery.samples.menu.openCommand')}</Button></CommandMenuTrigger>
+        <CommandMenuContent title={t('design_system.gallery.samples.menu.openCommand')} commandProps={{ loop: true }}>
+          <CommandMenuInput appearance="source" value={query} onValueChange={setQuery} aria-label={t('design_system.gallery.samples.menu.search')} placeholder={t('design_system.gallery.samples.menu.search')}
+            trailing={<SimpleTooltip content={t('design_system.gallery.samples.menu.hint')}><Button variant="ghost" size="2xs" aria-label={t('design_system.gallery.samples.menu.help')}><Info className="size-5" /></Button></SimpleTooltip>} />
+          <CommandMenuList>
+            <CommandMenuEmpty>{t('design_system.gallery.samples.menu.noResults')}</CommandMenuEmpty>
+            {withGroups ? <CommandMenuGroup heading={t('design_system.gallery.samples.menu.caption')} actionLabel={t('design_system.gallery.samples.menu.seeAll')} onAction={() => setQuery('')}>{rows}</CommandMenuGroup> : rows}
+            {withGroups && <><CommandMenuSeparator /><CommandMenuGroup heading={t('design_system.gallery.samples.menu.unavailable')}><CommandMenuItem value="unavailable" disabled size={size}>{t('design_system.gallery.samples.menu.unavailable')}</CommandMenuItem></CommandMenuGroup></>}
+          </CommandMenuList>
+          <CommandMenuFooter className="min-h-12 flex-wrap px-5 py-3.5" helpSlot={<Button variant="link" size="2xs" onClick={() => setResult(t('design_system.gallery.samples.menu.hint'))}>{t('design_system.gallery.samples.menu.help')}</Button>} />
+        </CommandMenuContent>
+      </CommandMenu>
+      {result && <output aria-live="polite" className="text-sm text-muted-foreground">{t('design_system.gallery.samples.menu.selected', { value: result })}</output>}
+    </div>
+  )
+}

package/src/modules/design_system/gallery/demos/rating-reviews.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'
+import { Rating } from '@open-mercato/ui/primitives/rating'
+import { LinkButton } from '@open-mercato/ui/primitives/link-button'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@open-mercato/ui/primitives/dialog'
+
+export function RatingCellDemo({ icon, initialValue = 0, max = 1, disabled = false }: { icon: 'star' | 'heart'; initialValue?: number; max?: number; disabled?: boolean }) {
+  const t = useT()
+  const [value, setValue] = React.useState(initialValue)
+  return <Rating value={value} onChange={setValue} max={max} icon={icon} appearance="cell" disabled={disabled} aria-label={t('design_system.gallery.samples.rating.label')} />
+}
+
+export function RatingReviewDemo({ icon, alignment }: { icon: 'star' | 'heart'; alignment: 'vertical' | 'horizontal' }) {
+  const t = useT()
+  const locale = useLocale()
+  const [open, setOpen] = React.useState(false)
+  const value = new Intl.NumberFormat(locale).format(4.5)
+  const count = new Intl.NumberFormat(locale, { notation: 'compact', maximumFractionDigits: 1 }).format(5200)
+  const summary = t('design_system.gallery.samples.rating.summary', '{value} ∙ {count} Ratings', { value, count })
+  const reviews = t('design_system.gallery.samples.rating.reviews', '{count} reviews', { count: 18 })
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <div data-slot="rating-review" data-alignment={alignment} className={cn('inline-flex max-w-full items-start gap-2', alignment === 'vertical' ? 'flex-col' : 'flex-wrap')}>
+        <Rating value={4.5} allowHalf icon={icon} />
+        <div className="flex flex-wrap items-start gap-1 text-sm leading-5">
+          <span>{summary}</span>
+          <LinkButton asChild variant="gray" underline="always"><DialogTrigger>{reviews}</DialogTrigger></LinkButton>
+        </div>
+      </div>
+      <DialogContent onKeyDownCapture={event => { if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { event.preventDefault(); setOpen(false) } }}>
+        <DialogHeader><DialogTitle>{reviews}</DialogTitle><DialogDescription>{summary}</DialogDescription></DialogHeader>
+        <ScrollArea className="h-72" scrollbarSize="md">
+          <ol className="flex flex-col gap-3 pr-6">
+            {Array.from({ length: 18 }, (_, index) => <li key={index} className="flex items-center justify-between gap-3 text-sm"><span>{t('design_system.gallery.samples.rating.reviewNumber', 'Review {number}', { number: index + 1 })}</span><Rating value={index < 9 ? 5 : 4} icon={icon} /></li>)}
+          </ol>
+        </ScrollArea>
+        <DialogFooter><Button asChild variant="outline"><DialogClose>{t('common.close')}</DialogClose></Button></DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}