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

package/src/modules/design_system/gallery/components/ColorPlayground.tsx

@@ -0,0 +1,324 @@
+'use client'
+
+import * as React from 'react'
+import { ArrowLeft, ArrowRight, GripVertical, Check, Copy, RotateCcw, Sun, Moon, Paintbrush, MousePointer2, Layers, CircleCheck } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'
+import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
+import { readThemeTokens, type ThemeTokens } from './themeTokens'
+import { contrastRatio, normalizeHex } from './colorPreview'
+import { createColorStudio, exportColorStudio, type ColorStudio, type ColorStop, type Harmony, type NeutralTone, type Shade } from './colorStudio'
+import { ColorStudioSpecimen } from './ColorStudioSpecimen'
+import { ColorStudioCompositions } from './ColorStudioCompositions'
+
+const INITIAL_COLOR = '#F4700D'
+const PRESETS = ['#BC9AFF', INITIAL_COLOR, '#2563EB', '#0F766E', '#BE185D']
+const THEMES = ['light', 'dark'] as const
+const ROLE_ICONS = { action: Paintbrush, selection: MousePointer2, surface: Layers, status: CircleCheck }
+
+function ShadeSelect({ label, scale, value, onChange }: { label: string; scale: ColorStop[]; value: Shade; onChange: (shade: Shade) => void }) {
+  const id = React.useId()
+  return <div className="min-w-0 space-y-2">
+    <Label htmlFor={id}>{label}</Label>
+    <Select value={String(value)} onValueChange={next => {
+      const stop = scale.find(item => String(item.step) === next)
+      if (stop) onChange(stop.step)
+    }}>
+      <SelectTrigger id={id} aria-label={label}><SelectValue /></SelectTrigger>
+      <SelectContent>{scale.map(stop => <SelectItem key={stop.step} value={String(stop.step)}>
+        <span className="inline-flex items-center gap-2"><span aria-hidden className="size-4 shrink-0 rounded-sm border border-border" style={{ backgroundColor: stop.hex }} /><span className="font-mono text-xs">{stop.step} · {stop.hex}</span></span>
+      </SelectItem>)}</SelectContent>
+    </Select>
+  </div>
+}
+
+const COLOR_ROLES = ['primary', 'secondary', 'tertiary'] as const
+type ColorRole = typeof COLOR_ROLES[number]
+
+function ColorRoleSwap({ role, disabled, onSwap, onDragStart, onDragEnd }: {
+  role: ColorRole
+  disabled: boolean
+  onSwap: (first: ColorRole, second: ColorRole) => void
+  onDragStart: (event: React.DragEvent) => void
+  onDragEnd: () => void
+}) {
+  const t = useT()
+  const index = COLOR_ROLES.indexOf(role)
+  return <div className="flex items-center gap-1">
+    <span draggable={!disabled} onDragStart={onDragStart} onDragEnd={onDragEnd} title={t('design_system.colorStudio.dragColor')} className="inline-flex size-8 cursor-grab items-center justify-center text-muted-foreground active:cursor-grabbing" aria-hidden>
+      <GripVertical className="size-4" />
+    </span>
+    {(['left', 'right'] as const).map(direction => {
+      const target = COLOR_ROLES[index + (direction === 'left' ? -1 : 1)]
+      const Icon = direction === 'left' ? ArrowLeft : ArrowRight
+      return <Button key={direction} type="button" variant="ghost" size="icon" disabled={disabled || !target} aria-label={`${t(`design_system.colorStudio.move${direction === 'left' ? 'Left' : 'Right'}`)}: ${t(`design_system.colorStudio.${role}`)}`} className="shrink-0 text-muted-foreground" onClick={() => { if (target) onSwap(role, target) }}>
+        <Icon aria-hidden className="size-4" />
+      </Button>
+    })}
+  </div>
+}
+
+export function ColorPlayground({ initialSeeds, initialActionShades, initialView = 'compare', logo, onStudioChange }: {
+  initialSeeds?: ColorStudio['seeds']
+  initialActionShades?: { light?: Shade; dark?: Shade }
+  initialView?: 'light' | 'dark' | 'compare'
+  logo?: string | null
+  onStudioChange?: (studio: ColorStudio, valid: boolean) => void
+} = {}) {
+  const t = useT()
+  const id = React.useId()
+  const [color, setColor] = React.useState(initialSeeds?.primary ?? INITIAL_COLOR)
+  const [draft, setDraft] = React.useState(initialSeeds?.primary ?? INITIAL_COLOR)
+  const [harmony, setHarmony] = React.useState<Harmony>('triadic')
+  const [supporting, setSupporting] = React.useState<{ secondary?: string; tertiary?: string }>(initialSeeds ? { secondary: initialSeeds.secondary, tertiary: initialSeeds.tertiary } : {})
+  const [supportingDrafts, setSupportingDrafts] = React.useState<{ secondary?: string; tertiary?: string }>(initialSeeds ? { secondary: initialSeeds.secondary, tertiary: initialSeeds.tertiary } : {})
+  const [neutral, setNeutral] = React.useState<NeutralTone>('neutral')
+  const [view, setView] = React.useState<'light' | 'dark' | 'compare'>(initialView)
+  const [actionShades, setActionShades] = React.useState<{ light?: Shade; dark?: Shade }>(initialActionShades ?? {})
+  const [hostTokens, setHostTokens] = React.useState<ThemeTokens | null>(null)
+  const [matrixForeground, setMatrixForeground] = React.useState<Shade>(900)
+  const [matrixBackground, setMatrixBackground] = React.useState<Shade>(50)
+  const [draggedRole, setDraggedRole] = React.useState<ColorRole | null>(null)
+  const [dropRole, setDropRole] = React.useState<ColorRole | null>(null)
+  const [feedback, setFeedback] = React.useState('')
+  const [resetVersion, setResetVersion] = React.useState(0)
+  const invalid = !normalizeHex(draft)
+  const hasManualColors = Object.keys(supportingDrafts).length > 0
+  const studio = React.useMemo(() => createColorStudio(color, neutral, actionShades, { harmony, ...supporting }), [color, neutral, actionShades, harmony, supporting])
+
+  React.useEffect(() => {
+    onStudioChange?.(studio, !invalid && Object.values(supportingDrafts).every(value => Boolean(normalizeHex(value))))
+  }, [studio, invalid, supportingDrafts, onStudioChange])
+
+  const matrixText = studio.scale.find(stop => stop.step === matrixForeground)!.hex
+  const matrixSurface = studio.scale.find(stop => stop.step === matrixBackground)!.hex
+  const matrixRatio = contrastRatio(matrixText, matrixSurface)
+
+  React.useEffect(() => { setHostTokens(readThemeTokens(document.styleSheets)) }, [])
+
+  function chooseColor(value: string) {
+    setDraft(value)
+    const normalized = normalizeHex(value)
+    if (normalized) setColor(normalized)
+    setFeedback('')
+  }
+
+  function swapColors(first: keyof ColorStudio['seeds'], second: keyof ColorStudio['seeds']) {
+    if (invalid || Object.values(supportingDrafts).some(value => !normalizeHex(value))) return
+    const next = { ...studio.seeds, [first]: studio.seeds[second], [second]: studio.seeds[first] }
+    setColor(next.primary)
+    setDraft(next.primary)
+    setSupporting({ secondary: next.secondary, tertiary: next.tertiary })
+    setSupportingDrafts({ secondary: next.secondary, tertiary: next.tertiary })
+    if (first === 'primary' || second === 'primary') setActionShades({})
+    setFeedback(t('design_system.colorStudio.swapped'))
+  }
+
+  function reset() {
+    chooseColor(INITIAL_COLOR)
+    setNeutral('neutral')
+    setHarmony('triadic')
+    setSupporting({})
+    setSupportingDrafts({})
+    setView(initialView)
+    setActionShades({})
+    setMatrixForeground(900)
+    setMatrixBackground(50)
+    setResetVersion(previous => previous + 1)
+  }
+
+  async function copy(value: string, message: string) {
+    try {
+      await navigator.clipboard.writeText(value)
+      setFeedback(message)
+    } catch { setFeedback(t('design_system.colorPreview.copyFailed')) }
+  }
+
+  const swapDisabled = invalid || Object.values(supportingDrafts).some(value => !normalizeHex(value))
+  function dragStart(role: ColorRole, event: React.DragEvent) {
+    if (swapDisabled) { event.preventDefault(); return }
+    event.dataTransfer.effectAllowed = 'move'
+    event.dataTransfer.setData('text/plain', role)
+    setDraggedRole(role)
+  }
+  function dragEnd() { setDraggedRole(null); setDropRole(null) }
+  function dropProps(role: ColorRole) {
+    return {
+      'data-color-role': role,
+      className: `space-y-2 rounded-lg transition-shadow ${dropRole === role ? 'ring-2 ring-ring' : ''}`,
+      onDragOver: (event: React.DragEvent) => {
+        if (!draggedRole || draggedRole === role || swapDisabled) return
+        event.preventDefault()
+        event.dataTransfer.dropEffect = 'move'
+        setDropRole(role)
+      },
+      onDragLeave: (event: React.DragEvent<HTMLDivElement>) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setDropRole(null)
+      },
+      onDrop: (event: React.DragEvent) => {
+        event.preventDefault()
+        if (draggedRole && draggedRole !== role && !swapDisabled) swapColors(draggedRole, role)
+        dragEnd()
+      },
+    }
+  }
+
+  return <section className="space-y-8" aria-labelledby={`${id}-title`} data-example="color-playground">
+    <header className="flex flex-wrap items-start justify-between gap-4">
+      <div className="max-w-2xl space-y-2">
+        <h2 id={`${id}-title`} className="text-2xl font-medium tracking-tight">{t('design_system.colorStudio.title')}</h2>
+        <p className="text-sm leading-relaxed text-muted-foreground">{t('design_system.colorStudio.description')}</p>
+      </div>
+      <Button type="button" variant="ghost" onClick={reset}><RotateCcw aria-hidden />{t('design_system.colorPreview.reset')}</Button>
+    </header>
+
+    <div className="space-y-6 rounded-xl border border-border bg-card p-5 sm:p-6">
+      <div className="grid gap-5 sm:grid-cols-3">
+        <div {...dropProps('primary')}>
+          <div className="flex items-center justify-between gap-2">
+            <Label htmlFor={`${id}-hex`}>{t('design_system.colorStudio.primary')}</Label>
+            <ColorRoleSwap role="primary" disabled={swapDisabled} onSwap={swapColors} onDragStart={event => dragStart('primary', event)} onDragEnd={dragEnd} />
+          </div>
+          <div className="flex items-center gap-2">
+            <Input type="color" value={color} aria-label={t('design_system.colorPreview.color')} onChange={event => chooseColor(event.target.value)} className="w-12 shrink-0 p-1" inputClassName="h-full w-full cursor-pointer p-0" />
+            <Input id={`${id}-hex`} aria-label={t('design_system.colorPreview.hex')} value={draft} onChange={event => chooseColor(event.target.value)} onBlur={() => { const value = normalizeHex(draft); if (value) setDraft(value) }} inputClassName="font-mono" aria-invalid={invalid} aria-describedby={invalid ? `${id}-error` : undefined} spellCheck={false} maxLength={7} />
+          </div>
+        </div>
+        {(['secondary', 'tertiary'] as const).map(role => {
+          const value = supportingDrafts[role] ?? studio.seeds[role]
+          const valid = Boolean(normalizeHex(value))
+          const change = (next: string) => {
+            setSupportingDrafts(previous => ({ ...previous, [role]: next }))
+            const normalized = normalizeHex(next)
+            if (normalized) setSupporting(previous => ({ ...previous, [role]: normalized }))
+            setFeedback('')
+          }
+          return <div key={role} {...dropProps(role)}>
+            <div className="flex items-center justify-between gap-2">
+              <Label htmlFor={`${id}-${role}`}>{t(`design_system.colorStudio.${role}`)}</Label>
+              <ColorRoleSwap role={role} disabled={swapDisabled} onSwap={swapColors} onDragStart={event => dragStart(role, event)} onDragEnd={dragEnd} />
+            </div>
+            <div className="flex items-center gap-2">
+              <Input type="color" value={studio.seeds[role]} aria-label={t(`design_system.colorStudio.${role}`)} onChange={event => change(event.target.value)} className="w-12 shrink-0 p-1" inputClassName="h-full w-full cursor-pointer p-0" />
+              <Input id={`${id}-${role}`} value={value} aria-label={`${t(`design_system.colorStudio.${role}`)} HEX`} onChange={event => change(event.target.value)} inputClassName="font-mono" aria-invalid={!valid} aria-describedby={!valid ? `${id}-${role}-error` : undefined} maxLength={7} spellCheck={false} />
+            </div>
+            {!valid ? <p id={`${id}-${role}-error`} role="alert" className="text-xs text-status-error-text">{t(`design_system.colorStudio.${role}Invalid`)}</p> : null}
+          </div>
+        })}
+      </div>
+      <div className="grid gap-5 sm:grid-cols-2 xl:grid-cols-4">
+        <div className="space-y-2">
+          <Label htmlFor={`${id}-harmony`}>{t('design_system.colorStudio.harmony')}</Label>
+          <Select value={harmony} onValueChange={value => { if (value === 'analogous' || value === 'triadic' || value === 'split') { setHarmony(value); setSupporting({}); setSupportingDrafts({}); setFeedback('') } }}>
+            <SelectTrigger id={`${id}-harmony`} aria-label={t('design_system.colorStudio.harmony')} aria-describedby={`${id}-harmony-description`}><SelectValue /></SelectTrigger>
+            <SelectContent>{(['analogous', 'triadic', 'split'] as const).map(mode => <SelectItem key={mode} value={mode}>{t(`design_system.colorStudio.harmony.${mode}`)}</SelectItem>)}</SelectContent>
+          </Select>
+          <p id={`${id}-harmony-description`} className="text-xs leading-relaxed text-muted-foreground">{t(`design_system.colorStudio.harmonyDescription.${harmony}`)}</p>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor={`${id}-neutral`}>{t('design_system.colorStudio.neutral')}</Label>
+          <Select value={neutral} onValueChange={value => { if (value === 'neutral' || value === 'warm' || value === 'cool') { setNeutral(value); setFeedback('') } }}>
+            <SelectTrigger id={`${id}-neutral`} aria-label={t('design_system.colorStudio.neutral')}><SelectValue /></SelectTrigger>
+            <SelectContent>{(['neutral', 'warm', 'cool'] as const).map(tone => <SelectItem key={tone} value={tone}>{t(`design_system.colorStudio.neutral.${tone}`)}</SelectItem>)}</SelectContent>
+          </Select>
+        </div>
+        {THEMES.map(theme => <ShadeSelect key={theme} label={t(`design_system.colorStudio.${theme}Action`)} scale={studio.scale} value={studio[theme].actionStep} onChange={shade => { setActionShades(previous => ({ ...previous, [theme]: shade })); setFeedback('') }} />)}
+      </div>
+      <div className="flex flex-wrap items-center justify-between gap-4 border-t border-border pt-4">
+        <div className="max-w-2xl space-y-2">
+          <p className="text-sm leading-relaxed">{t('design_system.colorStudio.harmonyHint')}</p>
+          <p role="status" className="text-xs leading-relaxed text-muted-foreground">{t(`design_system.colorStudio.${hasManualColors ? 'harmonyManual' : 'harmonyAutomatic'}`)}</p>
+        </div>
+        {hasManualColors ? <Button type="button" size="sm" variant="secondary" onClick={() => { setSupporting({}); setSupportingDrafts({}); setFeedback(t('design_system.colorStudio.harmonyRestored')) }}><RotateCcw aria-hidden />{t('design_system.colorStudio.auto')}</Button> : null}
+      </div>
+      {invalid ? <p id={`${id}-error`} role="alert" className="text-sm text-status-error-text">{t('design_system.colorPreview.invalid')}</p> : null}
+      <div className="flex flex-wrap gap-2">{PRESETS.map(preset => <Button type="button" key={preset} variant="ghost" size="sm" onClick={() => chooseColor(preset)} aria-pressed={color === preset}>
+        <span aria-hidden className="size-4 shrink-0 rounded-full border border-border" style={{ backgroundColor: preset }} /><span className="font-mono text-xs">{preset}</span>{color === preset ? <Check className="size-3" aria-hidden /> : null}
+      </Button>)}</div>
+      <div className="space-y-3 border-t border-border pt-5">
+        <div className="space-y-1"><h3 className="text-sm font-medium">{t('design_system.colorStudio.scale')}</h3><p className="text-xs leading-relaxed text-muted-foreground">{t('design_system.colorStudio.scaleHint')}</p></div>
+        {([
+          { role: 'primary', scale: studio.scale, seed: studio.seeds.primary },
+          { role: 'secondary', scale: studio.secondaryScale, seed: studio.seeds.secondary },
+          { role: 'tertiary', scale: studio.tertiaryScale, seed: studio.seeds.tertiary },
+        ] as const).map(({ role, scale, seed }) => <div key={role} className="space-y-2">
+          <h4 className="text-xs font-medium text-muted-foreground">{t(`design_system.colorStudio.${role}`)}</h4>
+          <div className="grid grid-cols-3 gap-1 sm:grid-cols-6 xl:grid-cols-11">
+            {scale.map(stop => <Button type="button" key={stop.step} variant="ghost" className="h-24 min-w-0 flex-col items-start justify-end gap-1 rounded-lg px-2 py-3 text-left" style={{ backgroundColor: stop.hex, color: contrastRatio(stop.hex, '#FFFFFF') >= contrastRatio(stop.hex, '#000000') ? '#FFFFFF' : '#000000' }} aria-label={`${t('design_system.colorStudio.copyColor')} ${t(`design_system.colorStudio.${role}`)} ${stop.step} ${stop.hex}`} onClick={() => copy(stop.hex, `${t('design_system.colorStudio.copiedColor')}: ${stop.hex}`)}>
+              <span className="flex w-full items-center justify-between gap-1 text-xs"><span className="font-semibold">{stop.step}</span>{stop.hex === seed ? <span title={t('design_system.colorStudio.base')}><Paintbrush className="size-3" aria-hidden /><span className="sr-only">{t('design_system.colorStudio.base')}</span></span> : null}</span>
+              <code className="text-xs font-normal">{stop.hex}</code>
+            </Button>)}
+          </div>
+        </div>)}
+      </div>
+    </div>
+
+    <section className="space-y-4" aria-labelledby={`${id}-preview-title`}>
+      <div className="flex flex-wrap items-end justify-between gap-4">
+        <div className="max-w-xl space-y-1"><h3 id={`${id}-preview-title`} className="text-lg font-medium">{t('design_system.colorStudio.preview')}</h3><p className="text-xs leading-relaxed text-muted-foreground">{t('design_system.colorStudio.previewHint')}</p></div>
+        <SegmentedControl value={view} onValueChange={value => { if (value === 'light' || value === 'dark' || value === 'compare') setView(value) }} aria-label={t('design_system.colorPreview.theme')}>
+          <SegmentedControlItem value="light">{t('design_system.colorPreview.light')}</SegmentedControlItem>
+          <SegmentedControlItem value="dark">{t('design_system.colorPreview.dark')}</SegmentedControlItem>
+          <SegmentedControlItem value="compare">{t('design_system.colorStudio.compare')}</SegmentedControlItem>
+        </SegmentedControl>
+      </div>
+      <div className={view === 'compare' ? 'grid min-w-0 gap-5 xl:grid-cols-2' : 'min-w-0'}>
+        {THEMES.filter(theme => view === 'compare' || theme === view).map(theme => <div key={theme} className="min-w-0 space-y-3">
+          <p className="flex items-center gap-2 text-xs font-medium text-muted-foreground">{theme === 'light' ? <Sun className="size-4" aria-hidden /> : <Moon className="size-4" aria-hidden />}{t(`design_system.colorPreview.${theme}`)}</p>
+          <ColorStudioCompositions theme={theme} tokens={{ ...hostTokens?.[theme], ...studio[theme].tokens }} />
+          <ColorStudioSpecimen logo={logo} key={`${theme}-${resetVersion}`} theme={theme} tokens={{ ...hostTokens?.[theme], ...studio[theme].tokens }} />
+        </div>)}
+      </div>
+    </section>
+
+    <section className="space-y-4" aria-labelledby={`${id}-roles-title`}>
+      <h3 id={`${id}-roles-title`} className="text-lg font-medium">{t('design_system.colorStudio.roles')}</h3>
+      <div className="grid gap-5 sm:grid-cols-2 xl:grid-cols-4">{(Object.keys(ROLE_ICONS) as (keyof typeof ROLE_ICONS)[]).map(role => {
+        const Icon = ROLE_ICONS[role]
+        return <div key={role} className="space-y-3 border-t border-border pt-4"><Icon aria-hidden className="size-5 text-muted-foreground" /><h4 className="text-sm font-medium">{t(`design_system.colorStudio.roles.${role}`)}</h4><p className="text-xs leading-relaxed text-muted-foreground">{t(`design_system.colorStudio.roles.${role}Hint`)}</p></div>
+      })}</div>
+    </section>
+
+    <section className="space-y-4" aria-labelledby={`${id}-contrast-title`}>
+      <div className="max-w-3xl space-y-1"><h3 id={`${id}-contrast-title`} className="text-lg font-medium">{t('design_system.colorStudio.contrast')}</h3><p className="text-xs leading-relaxed text-muted-foreground">{t('design_system.colorStudio.contrastHint')}</p></div>
+      <div className="grid gap-5 rounded-xl border border-border p-5 lg:grid-cols-2">
+        <div className="space-y-4">
+          <div className="space-y-1"><h4 className="text-sm font-medium">{t('design_system.colorStudio.matrix')}</h4><p className="text-xs leading-relaxed text-muted-foreground">{t('design_system.colorStudio.matrixHint')}</p></div>
+          <div className="grid grid-cols-2 gap-3"><ShadeSelect label={t('design_system.colorStudio.foreground')} scale={studio.scale} value={matrixForeground} onChange={setMatrixForeground} /><ShadeSelect label={t('design_system.colorStudio.background')} scale={studio.scale} value={matrixBackground} onChange={setMatrixBackground} /></div>
+        </div>
+        <div className="flex items-center justify-between gap-4 rounded-lg p-6" style={{ backgroundColor: matrixSurface, color: matrixText }}>
+          <div className="space-y-2"><span className="text-4xl font-medium">Aa</span><p className="text-sm">{t('design_system.colorStudio.pair.body')}</p></div>
+          <div className="space-y-2 rounded-md bg-card px-3 py-2 text-right text-card-foreground"><p className="font-mono text-xl font-semibold">{matrixRatio.toFixed(2)}:1</p><p className="text-xs">{t(`design_system.colorStudio.${matrixRatio >= 4.5 ? 'pass' : 'fail'}`)}</p></div>
+        </div>
+      </div>
+      <div className="overflow-hidden rounded-xl border border-border">
+        <div className="grid grid-cols-3 gap-3 bg-muted px-4 py-3 text-xs font-medium text-muted-foreground"><span>{t('design_system.colorStudio.pair')}</span>{THEMES.map(theme => <span key={theme}>{t(`design_system.colorPreview.${theme}`)}</span>)}</div>
+        <dl className="divide-y divide-border">{studio.light.pairs.map(pair => <div key={pair.id} className="grid grid-cols-3 items-center gap-3 px-4 py-3">
+          <dt className="space-y-1"><p className="text-sm font-medium">{t(`design_system.colorStudio.pair.${pair.id}`)}</p><p className="text-xs text-muted-foreground">{t('design_system.colorStudio.minimum')}: {pair.minimum}:1</p></dt>
+          {THEMES.map(theme => {
+            const item = studio[theme].pairs.find(candidate => candidate.id === pair.id)!
+            const passing = item.ratio >= item.minimum
+            return <dd key={theme} className="flex flex-wrap items-center gap-3">
+              <span aria-hidden className="inline-flex size-10 shrink-0 items-center justify-center rounded-md border border-border font-semibold" style={{ backgroundColor: item.background, color: item.foreground }}>Aa</span>
+              <div className="space-y-1"><p className="font-mono text-sm">{item.ratio.toFixed(2)}:1</p><Badge variant={passing ? 'success' : 'error'}>{t(`design_system.colorStudio.${passing ? 'pass' : 'fail'}`)}</Badge><p className="font-mono text-xs text-muted-foreground">{item.foreground}<br />{item.background}</p></div>
+            </dd>
+          })}
+        </div>)}</dl>
+      </div>
+    </section>
+
+    <section className="space-y-4 border-t border-border pt-6" aria-labelledby={`${id}-export-title`}>
+      <div className="flex flex-wrap items-center justify-between gap-4">
+        <div className="max-w-xl space-y-1"><h3 id={`${id}-export-title`} className="text-lg font-medium">{t('design_system.colorStudio.export')}</h3><p className="text-xs leading-relaxed text-muted-foreground">{t('design_system.colorStudio.exportHint')}</p></div>
+        <div className="flex flex-wrap gap-2">{(['css', 'json'] as const).map(format => <Button type="button" key={format} variant="secondary" onClick={() => copy(exportColorStudio(studio, format), t('design_system.colorPreview.copied'))}><Copy aria-hidden />{t(`design_system.colorStudio.${format === 'css' ? 'copyCss' : 'copyJson'}`)}</Button>)}</div>
+      </div>
+      <div className="max-w-3xl space-y-1"><h4 className="text-sm font-medium">{t('design_system.colorStudio.algorithm')}</h4><p className="text-xs leading-relaxed text-muted-foreground">{t('design_system.colorStudio.algorithmHint')}</p></div>
+      <section className="rounded-lg border border-border"><h3 className="p-4 text-sm font-medium">{t('design_system.colorStudio.showTokens')}</h3><pre className="max-h-80 overflow-auto border-t border-border bg-muted p-4 text-xs leading-relaxed"><code>{exportColorStudio(studio, 'css')}</code></pre></section>
+    </section>
+    <p role="status" aria-live="polite" className="sticky bottom-4 z-10 w-fit rounded-lg bg-popover px-3 py-2 text-xs text-popover-foreground empty:hidden">{feedback}</p>
+  </section>
+}

package/src/modules/design_system/gallery/components/ColorStudioCompositions.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import * as React from 'react'
+import { ArrowUpRight, Check, Clock3, Heart, Layers, MoveUpRight, Palette, Sparkles } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Avatar, AvatarStack } from '@open-mercato/ui/primitives/avatar'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import product from '../assets/style-studio-product.png'
+import portrait from '../assets/landing-teams-01.png'
+import creator from '../assets/contact-support-portrait.png'
+import workspace from '../assets/blog-photo-0.png'
+
+const assetSource = (asset: string | { readonly src: string }) => typeof asset === 'string' ? asset : asset.src
+const CARD = 'flex min-h-112 min-w-0 flex-col overflow-hidden rounded-xl border border-border shadow-sm'
+const TASKS = ['collect', 'explore', 'share'] as const
+const CATEGORIES = ['identity', 'digital', 'editorial'] as const
+
+export function ColorStudioCompositions({ theme, tokens }: { theme: 'light' | 'dark'; tokens: Record<string, string> }) {
+  const t = useT()
+  const id = React.useId()
+  const copy = (key: string) => t(`design_system.colorStudio.compositions.${key}`)
+  const [plan, setPlan] = React.useState('solo')
+  const [category, setCategory] = React.useState<typeof CATEGORIES[number]>('identity')
+  const [completed, setCompleted] = React.useState<string[]>(['collect'])
+  const [saved, setSaved] = React.useState(false)
+  const [following, setFollowing] = React.useState(false)
+  const [productSaved, setProductSaved] = React.useState(false)
+  const primary = { backgroundColor: tokens['--primary'], color: tokens['--primary-foreground'] }
+  const secondary = { backgroundColor: tokens['--studio-secondary-soft'], color: tokens['--studio-secondary-soft-foreground'] }
+  const tertiary = { backgroundColor: tokens['--studio-tertiary'], color: tokens['--studio-tertiary-foreground'] }
+  const gradient = `linear-gradient(145deg, ${tokens['--accent']}, ${tokens['--studio-secondary-soft']}, ${tokens['--studio-tertiary-soft']})`
+  const appointments = [
+    { key: 'meeting', time: '09:00–10:00', background: tokens['--accent'], foreground: tokens['--accent-foreground'], accent: tokens['--primary'] },
+    { key: 'research', time: '11:00–12:30', background: tokens['--studio-secondary-soft'], foreground: tokens['--studio-secondary-soft-foreground'], accent: tokens['--studio-secondary'] },
+    { key: 'review', time: '14:00–15:00', background: tokens['--studio-tertiary-soft'], foreground: tokens['--studio-tertiary-soft-foreground'], accent: tokens['--studio-tertiary'] },
+  ]
+  return <section aria-labelledby={`${id}-title`} data-composition-theme={theme} style={tokens as React.CSSProperties} className="@container/cards min-w-0 space-y-6 rounded-xl bg-background p-4 text-foreground sm:p-6">
+    <div className="flex items-end justify-between gap-4"><h4 id={`${id}-title`} className="text-2xl font-medium tracking-tight">{copy('galleryTitle')}</h4><p className="text-xs text-muted-foreground">{copy('live')}</p></div>
+    <div className="grid min-w-0 auto-rows-fr gap-6 @md/cards:grid-cols-2 @7xl/cards:grid-cols-4">
+      <article className={`${CARD} gap-6 bg-card p-6`} aria-label={t('design_system.colorStudio.agenda')}>
+        <div className="space-y-2"><Clock3 aria-hidden className="size-5 text-muted-foreground" /><h5 className="text-xl font-medium tracking-tight">{t('design_system.colorStudio.agenda')}</h5><p className="text-xs text-muted-foreground">{copy('today')}</p></div>
+        <div className="flex flex-1 flex-col gap-3">{appointments.map(item => <div key={item.key} className="flex-1 space-y-2 rounded-lg border-l-4 px-4 py-3" style={{ backgroundColor: item.background, color: item.foreground, borderLeftColor: item.accent }}>
+          <p className="text-sm font-semibold">{t(`design_system.colorStudio.${item.key}`)}</p><p className="text-xs">{item.time}</p>
+        </div>)}</div>
+        <AvatarStack size="xs"><Avatar label={copy('creatorName')} src={assetSource(creator)} /><Avatar label={copy('designerName')} src={assetSource(portrait)} /><Avatar label={copy('collaboratorName')} src={assetSource(workspace)} /></AvatarStack>
+      </article>
+
+      <article className={`${CARD} relative justify-between border-transparent p-6`} style={secondary} aria-label={copy('poster')}>
+        <div className="relative -mx-6 -mt-6 h-56 overflow-hidden" aria-hidden>
+          <div className="absolute inset-6 rounded-full border-8" style={{ borderColor: tokens['--studio-secondary'] }} />
+          <img src={assetSource(portrait)} alt="" className="relative mx-auto h-full w-full object-contain object-bottom" loading="lazy" />
+          <div className="absolute -right-8 -top-8 size-40 rounded-full border-8" style={{ borderColor: tokens['--studio-tertiary'] }} />
+        </div>
+        <div className="relative space-y-4 pt-6"><Sparkles aria-hidden className="size-6" /><h5 className="text-4xl font-semibold leading-tight tracking-tight">{copy('posterTitle')}</h5><p className="text-sm leading-relaxed">{copy('posterDescription')}</p></div>
+      </article>
+
+      <article className={`${CARD} border-transparent bg-card`} aria-label={copy('creator')}>
+        <div className="relative min-h-56 flex-1 overflow-hidden" style={{ background: gradient }}><img src={assetSource(creator)} alt={copy('creatorPhoto')} className="absolute inset-0 h-full w-full object-cover" loading="lazy" /><div className="absolute inset-x-0 bottom-0 h-24" style={{ background: `linear-gradient(transparent, ${tokens['--primary']})` }} aria-hidden /></div>
+        <div className="space-y-4 p-6" style={primary}><p className="text-xs font-medium uppercase tracking-wider">{copy('creator')}</p><h5 className="text-3xl font-medium leading-tight tracking-tight">{copy('creatorName')}</h5><div className="flex items-center justify-between gap-3"><p className="text-sm">{copy('creatorRole')}</p><IconButton type="button" variant="modifiable" size="lg" aria-label={copy(following ? 'unfollow' : 'follow')} aria-pressed={following} onClick={() => setFollowing(value => !value)} style={{ color: 'inherit' }}>{following ? <Check /> : <ArrowUpRight />}</IconButton></div><p role="status" className="text-xs empty:hidden">{following ? copy('following') : ''}</p></div>
+      </article>
+
+      <article className={`${CARD} justify-between gap-6 p-6`} style={{ background: gradient }} aria-label={copy('product')}>
+        <div className="flex items-center justify-between gap-3"><span className="rounded-md bg-card px-3 py-2 text-xs font-medium text-card-foreground">{copy('productLabel')}</span><IconButton type="button" variant="white" size="lg" aria-label={copy(productSaved ? 'removeProduct' : 'saveProduct')} aria-pressed={productSaved} onClick={() => setProductSaved(value => !value)}><Heart className={productSaved ? 'fill-current' : ''} /></IconButton></div>
+        <img src={assetSource(product)} alt={copy('productPhoto')} className="h-56 w-full rounded-lg object-contain" loading="lazy" />
+        <div className="space-y-2 rounded-lg bg-card p-4 text-card-foreground"><p className="text-xs text-muted-foreground">{copy('productCollection')}</p><h5 className="text-2xl font-medium tracking-tight">{copy('productTitle')}</h5><p role="status" className="text-sm text-muted-foreground">{copy(productSaved ? 'productSaved' : 'productHint')}</p></div>
+      </article>
+
+      <article className={`${CARD} gap-6 bg-card p-6`} aria-label={copy('plans')}>
+        <div className="space-y-3"><Layers aria-hidden className="size-6" style={{ color: tokens['--primary'] }} /><h5 className="text-2xl font-medium tracking-tight">{copy('plans')}</h5><p className="text-sm leading-relaxed text-muted-foreground">{copy('plansHint')}</p></div>
+        <div className="space-y-3">{['solo', 'team'].map(choice => <Button key={choice} type="button" variant="outline" aria-pressed={plan === choice} onClick={() => setPlan(choice)} className="h-auto w-full justify-between gap-3 whitespace-normal p-4 text-left" style={plan === choice ? { backgroundColor: tokens['--accent'], color: tokens['--accent-foreground'], borderColor: tokens['--primary'] } : undefined}><span className="space-y-1"><span className="block text-base font-medium">{copy(choice)}</span><span className="block text-xs font-normal">{copy(`${choice}Hint`)}</span></span>{plan === choice ? <Check aria-hidden className="size-5 shrink-0" /> : <span className="size-5 shrink-0 rounded-full border border-border" aria-hidden />}</Button>)}</div>
+        <div className="mt-auto space-y-3 border-t border-border pt-5"><p role="status" className="text-sm font-medium">{copy(plan === 'solo' ? 'soloSelected' : 'teamSelected')}</p><p className="text-xs leading-relaxed text-muted-foreground">{copy('planNote')}</p></div>
+      </article>
+
+      <article className={`${CARD} gap-6 bg-card p-6`} aria-label={copy('categories')}>
+        <div className="space-y-2"><Palette aria-hidden className="size-6 text-muted-foreground" /><h5 className="text-2xl font-medium tracking-tight">{copy('categories')}</h5></div>
+        <div className="flex flex-wrap gap-2">{CATEGORIES.map(choice => <Button key={choice} type="button" variant="outline" size="sm" aria-pressed={category === choice} onClick={() => setCategory(choice)} style={category === choice ? tertiary : undefined}>{copy(choice)}</Button>)}</div>
+        <div className="relative flex min-h-36 flex-1 items-center justify-center overflow-hidden rounded-lg p-6" style={{ background: gradient }} aria-hidden><div className={`flex size-28 items-center justify-center shadow-lg ${category === 'identity' ? 'rounded-full' : category === 'digital' ? 'rotate-12 rounded-xl' : '-rotate-6 rounded-md'}`} style={category === 'digital' ? secondary : tertiary}>{category === 'identity' ? <Sparkles className="size-12" /> : category === 'digital' ? <Layers className="size-12" /> : <Palette className="size-12" />}</div></div>
+        <div role="status" className="space-y-2"><h6 className="text-lg font-medium">{copy(`${category}Title`)}</h6><p className="text-sm leading-relaxed text-muted-foreground">{copy(`${category}Description`)}</p></div>
+      </article>
+
+      <article className={`${CARD} gap-6 bg-card p-6`} aria-label={copy('tasks')}>
+        <div className="space-y-2"><p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{copy('workspace')}</p><h5 className="text-2xl font-medium tracking-tight">{copy('tasks')}</h5></div>
+        <p className="text-5xl font-medium tracking-tight" style={{ color: tokens['--primary'] }}>{completed.length}<span className="text-xl text-muted-foreground"> / {TASKS.length}</span></p>
+        <div className="flex-1 divide-y divide-border">{TASKS.map(task => <label key={task} className="flex cursor-pointer items-start gap-3 py-4"><Checkbox size="md" checked={completed.includes(task)} onCheckedChange={checked => setCompleted(current => checked ? [...current.filter(item => item !== task), task] : current.filter(item => item !== task))} aria-label={copy(task)} /><span className={`text-sm leading-relaxed ${completed.includes(task) ? 'text-muted-foreground line-through' : ''}`}>{copy(task)}</span></label>)}</div>
+        <p role="status" className="rounded-lg p-4 text-sm" style={secondary}>{copy(completed.length === TASKS.length ? 'allDone' : 'keepGoing')}</p>
+      </article>
+
+      <article className={`${CARD} border-transparent`} aria-label={copy('inspiration')}>
+        <div className="relative min-h-56 flex-1"><img src={assetSource(workspace)} alt={copy('workspacePhoto')} className="absolute inset-0 h-full w-full object-cover" loading="lazy" /></div>
+        <div className="space-y-5 p-6" style={tertiary}><div className="flex items-center justify-between gap-3"><p className="text-xs font-medium uppercase tracking-wider">{copy('inspiration')}</p><MoveUpRight aria-hidden className="size-5" /></div><h5 className="text-3xl font-medium leading-tight tracking-tight">{copy('inspirationTitle')}</h5><Button type="button" variant="outline" aria-pressed={saved} onClick={() => setSaved(value => !value)} className="w-full" style={{ backgroundColor: tokens['--studio-tertiary-soft'], color: tokens['--studio-tertiary-soft-foreground'], borderColor: 'transparent' }}><Heart aria-hidden className={saved ? 'fill-current' : ''} />{copy(saved ? 'saved' : 'save')}</Button></div>
+      </article>
+    </div>
+  </section>
+}

package/src/modules/design_system/gallery/components/ColorStudioSpecimen.tsx

@@ -0,0 +1,164 @@
+'use client'
+
+import * as React from 'react'
+import type { LegacyColumnDef as ColumnDef } from '@tanstack/react-table/legacy'
+import { Check, FolderKanban, Plus, Search } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { DataTable } from '@open-mercato/ui/backend/DataTable'
+import { Badge } from '@open-mercato/ui/primitives/badge'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { Checkbox } from '@open-mercato/ui/primitives/checkbox'
+import { Input } from '@open-mercato/ui/primitives/input'
+import { Label } from '@open-mercato/ui/primitives/label'
+import { CircularProgress } from '@open-mercato/ui/primitives/progress'
+import { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'
+
+type Project = {
+  id: string
+  titleKey: string
+  ownerKey: string
+  status: 'confirmed' | 'pending' | 'error'
+  progress: number
+}
+
+const PROJECTS: Project[] = [
+  { id: 'design', titleKey: 'project.design', ownerKey: 'owner.you', status: 'confirmed', progress: 72 },
+  { id: 'website', titleKey: 'project.website', ownerKey: 'owner.team', status: 'pending', progress: 38 },
+  { id: 'mobile', titleKey: 'project.mobile', ownerKey: 'owner.review', status: 'error', progress: 16 },
+]
+
+const STATUS_VARIANTS = { confirmed: 'success', pending: 'warning', error: 'error' } as const
+
+export function ColorStudioSpecimen({ theme, tokens, logo }: { logo?: string | null; theme: 'light' | 'dark'; tokens: Record<string, string> }) {
+  const t = useT()
+  const id = React.useId()
+  const [view, setView] = React.useState('projects')
+  const [search, setSearch] = React.useState('')
+  const [projects, setProjects] = React.useState(PROJECTS)
+  const [selectedId, setSelectedId] = React.useState('design')
+  const [workspaceName, setWorkspaceName] = React.useState('')
+  const [savedName, setSavedName] = React.useState('')
+  const [notifications, setNotifications] = React.useState(true)
+  const [savedNotifications, setSavedNotifications] = React.useState(true)
+  const [feedback, setFeedback] = React.useState<'saved' | 'added' | null>(null)
+  const selectedProject = projects.find(project => project.id === selectedId) ?? projects[0]
+  const hasNewProject = projects.some(project => project.id === 'new')
+  const visibleProjects = projects.filter(project => `${t(`design_system.colorStudio.${project.titleKey}`)} ${t(`design_system.colorStudio.${project.ownerKey}`)}`.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase()))
+  const columns = React.useMemo<ColumnDef<Project, unknown>[]>(() => [
+    {
+      id: 'project',
+      header: t('design_system.colorStudio.projectName'),
+      meta: { truncate: false },
+      cell: ({ row }) => <Button
+        type="button"
+        variant="secondary"
+        size="sm"
+        aria-pressed={row.original.id === selectedId}
+        onClick={() => setSelectedId(row.original.id)}
+        className="h-auto w-full justify-start gap-3 whitespace-normal rounded-md px-0 py-1 text-left shadow-none"
+        style={{ backgroundColor: 'transparent', color: tokens['--foreground'] }}
+      >
+        <span className="flex size-8 shrink-0 items-center justify-center rounded-md" style={{ backgroundColor: row.original.id === selectedId ? tokens['--accent'] : tokens['--muted'], color: row.original.id === selectedId ? tokens['--accent-foreground'] : tokens['--muted-foreground'] }}>{row.original.id === selectedId ? <Check className="size-4" aria-hidden /> : <FolderKanban className="size-4" aria-hidden />}</span>
+        <span className="min-w-0 space-y-1">
+          <span className="block text-sm font-medium">{t(`design_system.colorStudio.${row.original.titleKey}`)}</span>
+          <span className="block text-xs font-normal text-muted-foreground">{t(`design_system.colorStudio.${row.original.ownerKey}`)}</span>
+        </span>
+      </Button>,
+    },
+    {
+      id: 'status',
+      header: t('design_system.colorStudio.status'),
+      meta: { truncate: false },
+      cell: ({ row }) => <Badge variant={STATUS_VARIANTS[row.original.status]} dot>{t(`design_system.colorPreview.${row.original.status}`)}</Badge>,
+    },
+  ], [selectedId, t, tokens])
+
+  function addProject() {
+    if (hasNewProject) return
+    setProjects(current => [...current, { id: 'new', titleKey: 'newProject', ownerKey: 'owner.you', status: 'pending', progress: 0 }])
+    setSelectedId('new')
+    setSearch('')
+    setFeedback('added')
+  }
+
+  function saveSettings() {
+    setSavedName(workspaceName)
+    setSavedNotifications(notifications)
+    setFeedback('saved')
+  }
+
+  return <section
+    role="region"
+    aria-label={`${t('design_system.colorStudio.preview')} — ${t(`design_system.colorPreview.${theme}`)}`}
+    data-preview-theme={theme}
+    style={tokens as React.CSSProperties}
+    className="min-w-0 overflow-hidden rounded-xl border border-border bg-card text-foreground"
+  >
+    <header className="flex flex-wrap items-center justify-between gap-3 border-b border-border bg-card px-5 py-4">
+      <div className="flex min-w-0 items-center gap-3">
+        {logo ? <img src={logo} alt={t('design_system.styleAgents.logoPreview')} className="h-9 w-28 shrink-0 object-contain object-left" /> : <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent text-accent-foreground"><FolderKanban className="size-5" aria-hidden /></span>}
+        <div className="min-w-0">
+          <p className="truncate text-sm font-semibold">{savedName || t('design_system.colorStudio.workspace')}</p>
+          <p className="text-xs text-muted-foreground">{t(`design_system.colorPreview.${theme}`)}</p>
+        </div>
+      </div>
+      <SegmentedControl value={view} onValueChange={value => { setView(value); setFeedback(null) }} aria-label={t('design_system.colorStudio.overview')} size="sm">
+        <SegmentedControlItem value="projects">{t('design_system.colorStudio.projects')}</SegmentedControlItem>
+        <SegmentedControlItem value="settings">{t('design_system.colorStudio.settings')}</SegmentedControlItem>
+      </SegmentedControl>
+    </header>
+    <div className="space-y-5 p-5 sm:p-6">
+      {view === 'projects' ? <>
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <h3 className="text-lg font-semibold tracking-tight">{t('design_system.colorStudio.projects')}</h3>
+          <Button type="button" size="sm" onClick={addProject} disabled={hasNewProject}><Plus aria-hidden />{t('design_system.colorStudio.newProject')}</Button>
+        </div>
+        <div className="grid items-start gap-6" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(min(100%, 24rem), 1fr))' }}>
+          <div className="min-w-0 space-y-4">
+            <Input value={search} onChange={event => setSearch(event.target.value)} aria-label={t('design_system.colorStudio.search')} placeholder={t('design_system.colorStudio.search')} leading={<Search className="size-4" aria-hidden />} />
+            <DataTable<Project> data={visibleProjects} columns={columns} embedded sortable={false} exporter={false} onRowClick={project => setSelectedId(project.id)} emptyState={<p className="text-sm text-muted-foreground">{t('design_system.colorStudio.noResults')}</p>} />
+          </div>
+          <aside className="space-y-6 rounded-xl border border-border bg-background p-6" aria-label={t('design_system.colorStudio.selected')}>
+            <div className="space-y-3">
+              <Badge variant={STATUS_VARIANTS[selectedProject.status]} dot>{t(`design_system.colorPreview.${selectedProject.status}`)}</Badge>
+              <h4 className="text-xl font-medium tracking-tight">{t(`design_system.colorStudio.${selectedProject.titleKey}`)}</h4>
+              <p className="text-xs text-muted-foreground">{t(`design_system.colorStudio.${selectedProject.ownerKey}`)}</p>
+            </div>
+            <div className="flex items-center gap-5 border-t border-border pt-5">
+              <CircularProgress value={selectedProject.progress} size="lg" showValue aria-label={t('design_system.colorStudio.progress')} />
+              <div className="min-w-0 space-y-2"><p className="text-sm font-medium">{t('design_system.colorStudio.progress')}</p><p className="text-xs leading-relaxed text-muted-foreground">{t('design_system.colorStudio.progressHint')}</p></div>
+            </div>
+          </aside>
+        </div>
+      </> : <form className="max-w-xl space-y-5" onSubmit={event => { event.preventDefault(); saveSettings() }}>
+        <div className="space-y-1">
+          <h3 className="text-lg font-semibold tracking-tight">{t('design_system.colorStudio.settings')}</h3>
+          <p className="text-sm text-muted-foreground">{t('design_system.colorStudio.detailsHint')}</p>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor={`${id}-workspace`}>{t('design_system.colorPreview.name')}</Label>
+          <Input id={`${id}-workspace`} value={workspaceName} placeholder={t('design_system.colorStudio.workspace')} onChange={event => { setWorkspaceName(event.target.value); setFeedback(null) }} />
+        </div>
+        <div className="flex items-start gap-3 rounded-lg border border-border bg-card p-4">
+          <Checkbox id={`${id}-notifications`} checked={notifications} onCheckedChange={checked => { setNotifications(checked === true); setFeedback(null) }} />
+          <Label htmlFor={`${id}-notifications`} className="leading-5">{t('design_system.colorStudio.notifications')}</Label>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          <Button type="submit">{t('design_system.colorPreview.save')}</Button>
+          <Button type="button" variant="secondary" onClick={() => { setWorkspaceName(savedName); setNotifications(savedNotifications); setFeedback(null) }}>{t('design_system.colorPreview.cancel')}</Button>
+        </div>
+      </form>}
+      <p role="status" className="text-xs text-status-success-text empty:hidden">{feedback ? t(feedback === 'saved' ? 'design_system.colorPreview.saved' : 'design_system.colorStudio.added') : null}</p>
+    </div>
+    <footer className="flex flex-wrap items-center justify-between gap-4 border-t border-border bg-background px-6 py-4">
+      <p className="text-xs font-medium text-muted-foreground">{t('design_system.colorStudio.states')}</p>
+      <div className="flex flex-wrap gap-3">
+        <Button type="button" size="sm">{t('design_system.colorStudio.default')}</Button>
+        <Button type="button" size="sm" style={{ backgroundColor: tokens['--primary-hover'], color: tokens['--primary-foreground'] }}>{t('design_system.colorStudio.hover')}</Button>
+        <Button type="button" size="sm" style={{ boxShadow: `0 0 0 2px ${tokens['--background']}, 0 0 0 4px ${tokens['--focus-ring-outer']}` }}>{t('design_system.colorStudio.focus')}</Button>
+        <Button type="button" size="sm" disabled>{t('design_system.colorStudio.disabled')}</Button>
+      </div>
+
+    </footer>
+  </section>
+}